From 38fc15aee8dd508897139954406dbccce089c808 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 8 Jun 2025 21:03:03 +0200
Subject: [PATCH 1/7] docs: update content

---
 .../docs/content/forms/checkbox/bootstrap.mdx | 68 ++++++++++---------
 .../docs/content/forms/checkbox/index.mdx     | 68 +++++++++----------
 2 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/packages/docs/content/forms/checkbox/bootstrap.mdx b/packages/docs/content/forms/checkbox/bootstrap.mdx
index 185c6753..842bb911 100644
--- a/packages/docs/content/forms/checkbox/bootstrap.mdx
+++ b/packages/docs/content/forms/checkbox/bootstrap.mdx
@@ -1,69 +1,71 @@
 ---
-title: React Checkbox Components
-name: Checkbox
-description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
+title: React Bootstrap Checkbox Component
+name: Checkbox with Bootstrap Styling
+description: Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.
 route: /forms/checkbox/
-other_frameworks: checkbox
+bootstrap_component: true
 ---
 
-## Approach
+## How to use React Bootstrap Checkbox component
 
-Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.
+Use CoreUI’s `<CFormCheck>` to create cross-browser, accessible, and Bootstrap-styled checkboxes in React. Checkboxes are ideal for selecting one or more options from a list and can be styled, stacked, or grouped using layout utilities.
 
-## Checkboxes
+### Basic example
 
-<ExampleSnippet component="CheckboxExample" componentName="React Form Checkbox" />
+Use the `<CFormCheck>` component to render a standard Bootstrap-style checkbox.
 
-### Indeterminate
+<ExampleSnippet className="theme-bootstrap" component="CheckboxExample" componentName="React Bootstrap Checkbox" />
 
-Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
+### Indeterminate state
 
-<ExampleSnippet component="CheckboxIndeterminateExample" componentName="React Form Checkbox" />
+Set the `indeterminate` property to render a checkbox in an indeterminate state, commonly used to indicate partial selections.
 
-### Disabled
+<ExampleSnippet className="theme-bootstrap" component="CheckboxIndeterminateExample" componentName="React Bootstrap Checkbox" />
 
-Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
+### Disabled state
 
-<ExampleSnippet component="CheckboxDisabledExample" componentName="React Form Checkbox" />
+Add the `disabled` prop to disable a checkbox and automatically style its label in a muted color, following Bootstrap conventions.
 
-## Default (stacked)
+<ExampleSnippet className="theme-bootstrap" component="CheckboxDisabledExample" componentName="React Bootstrap Checkbox" />
 
-By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
+### Stacked layout (default)
 
-<ExampleSnippet component="CheckboxStackedExample" componentName="React Form Checkbox" />
+By default, multiple checkboxes stack vertically and are spaced evenly.
 
-## Inline
+<ExampleSnippet className="theme-bootstrap" component="CheckboxStackedExample" componentName="React Bootstrap Checkbox" />
 
-Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
+### Inline checkboxes
 
-<ExampleSnippet component="CheckboxInlineExample" componentName="React Form Checkbox" />
+Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.
 
-## Reverse 
+<ExampleSnippet className="theme-bootstrap" component="CheckboxInlineExample" componentName="React Bootstrap Checkbox" />
 
-Put your checkboxes on the opposite side by adding `reverse` boolean property.
+### Reversed checkboxes
 
-<ExampleSnippet component="CheckboxReverseExample" componentName="React Form Checkbox" />
+Use the `reverse` prop to position the checkbox on the opposite side of the label.
 
-## Without labels
+<ExampleSnippet className="theme-bootstrap" component="CheckboxReverseExample" componentName="React Bootstrap Checkbox" />
 
-Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
+### Without labels
 
-<ExampleSnippet component="CheckboxWithoutLabelsExample" componentName="React Form Checkbox" />
+If omitting a label, remember to include `aria-label` for accessibility compliance.
+
+<ExampleSnippet className="theme-bootstrap" component="CheckboxWithoutLabelsExample" componentName="React Bootstrap Checkbox" />
 
 ## Checkbox toggle buttons
 
-Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.
+Transform checkboxes into Bootstrap-style toggle buttons using the `button` prop. You can also group them with button groups.
 
-<ExampleSnippet component="CheckboxToggleButtonsExample" componentName="React Form Checkbox" />
+<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsExample" componentName="React Bootstrap Checkbox" />
 
-### Outlined styles
+### Outlined toggle styles
 
-Different variants of button, such at the various outlined styles, are supported.
+Use outlined button variants for a lighter, bordered appearance.
 
-<ExampleSnippet component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Form Checkbox" />
+<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Bootstrap Checkbox" />
 
-## API
+## API reference
 
-Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
+Refer to the API documentation for detailed descriptions of all the available props and configuration options.
 
 - [&lt;CFormCheck /&gt;](../api/#cformcheck)
diff --git a/packages/docs/content/forms/checkbox/index.mdx b/packages/docs/content/forms/checkbox/index.mdx
index bf330f43..fd8db1ae 100644
--- a/packages/docs/content/forms/checkbox/index.mdx
+++ b/packages/docs/content/forms/checkbox/index.mdx
@@ -1,71 +1,69 @@
 ---
-title: React Bootstrap Checkbox Component
-name: Checkbox with Bootstrap Styling
-description: Learn how to build accessible and consistent Bootstrap-style checkboxes in React using CoreUI components.
+title: React Checkbox Components
+name: Checkbox
+description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components.
 route: /forms/checkbox/
-bootstrap_component: true
+other_frameworks: checkbox
 ---
 
-## How to use React Bootstrap Checkbox component
+## Approach
 
-Use CoreUI’s `<CFormCheck>` to create cross-browser, accessible, and Bootstrap-styled checkboxes in React. Checkboxes are ideal for selecting one or more options from a list and can be styled, stacked, or grouped using layout utilities.
+Browser default checkboxes and radios are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.
 
-### Basic example
+## Checkboxes
 
-Use the `<CFormCheck>` component to render a standard Bootstrap-style checkbox.
+<ExampleSnippet component="CheckboxExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxExample" componentName="React Bootstrap Checkbox" />
+### Indeterminate
 
-### Indeterminate state
+Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.
 
-Set the `indeterminate` property to render a checkbox in an indeterminate state, commonly used to indicate partial selections.
+<ExampleSnippet component="CheckboxIndeterminateExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxIndeterminateExample" componentName="React Bootstrap Checkbox" />
+### Disabled
 
-### Disabled state
+Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.
 
-Add the `disabled` prop to disable a checkbox and automatically style its label in a muted color, following Bootstrap conventions.
+<ExampleSnippet component="CheckboxDisabledExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxDisabledExample" componentName="React Bootstrap Checkbox" />
+## Default (stacked)
 
-### Stacked layout (default)
+By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.
 
-By default, multiple checkboxes stack vertically and are spaced evenly.
+<ExampleSnippet component="CheckboxStackedExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxStackedExample" componentName="React Bootstrap Checkbox" />
+## Inline
 
-### Inline checkboxes
+Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.
 
-Use the `inline` boolean prop to place multiple checkboxes on the same horizontal row.
+<ExampleSnippet component="CheckboxInlineExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxInlineExample" componentName="React Bootstrap Checkbox" />
+## Reverse 
 
-### Reversed checkboxes
+Put your checkboxes on the opposite side by adding `reverse` boolean property.
 
-Use the `reverse` prop to position the checkbox on the opposite side of the label.
+<ExampleSnippet component="CheckboxReverseExample" componentName="React Form Checkbox" />
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxReverseExample" componentName="React Bootstrap Checkbox" />
+## Without labels
 
-### Without labels
+Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
 
-If omitting a label, remember to include `aria-label` for accessibility compliance.
-
-<ExampleSnippet className="theme-bootstrap" component="CheckboxWithoutLabelsExample" componentName="React Bootstrap Checkbox" />
+<ExampleSnippet component="CheckboxWithoutLabelsExample" componentName="React Form Checkbox" />
 
 ## Checkbox toggle buttons
 
-Transform checkboxes into Bootstrap-style toggle buttons using the `button` prop. You can also group them with button groups.
+Create button-like checkboxes and radio buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsExample" componentName="React Bootstrap Checkbox" />
+<ExampleSnippet component="CheckboxToggleButtonsExample" componentName="React Form Checkbox" />
 
-### Outlined toggle styles
+### Outlined styles
 
-Use outlined button variants for a lighter, bordered appearance.
+Different variants of button, such at the various outlined styles, are supported.
 
-<ExampleSnippet className="theme-bootstrap" component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Bootstrap Checkbox" />
+<ExampleSnippet component="CheckboxToggleButtonsOutlinedStylesExample" componentName="React Form Checkbox" />
 
-## API reference
+## API
 
-Refer to the API documentation for detailed descriptions of all the available props and configuration options.
+Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
 
 - [&lt;CFormCheck /&gt;](./api/#cformcheck)

From 90d8100809b9ce5c52907af25102d6e506bc285b Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 12 Jun 2025 12:32:42 +0200
Subject: [PATCH 2/7] refactor: update tabs component

---
 packages/remark-code-tabs/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/remark-code-tabs/index.js b/packages/remark-code-tabs/index.js
index bb414d7d..e8b6d6a6 100755
--- a/packages/remark-code-tabs/index.js
+++ b/packages/remark-code-tabs/index.js
@@ -140,7 +140,7 @@ function createTabs(tabNodes, { labels }) {
   })
 
   return {
-    attributes: [{ name: 'activeItemKey', type: 'mdxJsxAttribute', value: 0 }],
+    attributes: [{ name: 'defaultActiveItemKey', type: 'mdxJsxAttribute', value: 0 }],
     children: [
       {
         attributes: [

From a2d3eb5bcc8bab4d9c4440f92f8b796f11f0d1a2 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 6 Jul 2025 14:36:32 +0200
Subject: [PATCH 3/7] fix(CDropdown): prevent unnecessary re-rendering

---
 .../src/components/dropdown/CDropdown.tsx     | 78 ++++++++++---------
 .../components/dropdown/CDropdownContext.ts   |  3 +-
 .../components/dropdown/CDropdownToggle.tsx   | 44 +++++------
 3 files changed, 63 insertions(+), 62 deletions(-)

diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
index 5b5e35d4..bcd9f14d 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
@@ -1,4 +1,13 @@
-import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
+import React, {
+  ElementType,
+  forwardRef,
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import type { Options } from '@popperjs/core'
@@ -190,59 +199,63 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     ref
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null)
-    const dropdownToggleRef = useRef<HTMLElement>(null)
     const dropdownMenuRef = useRef<HTMLDivElement | HTMLUListElement>(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
+    const [dropdownToggleElement, setDropdownToggleElement] = useState<HTMLElement | null>(null)
     const [_visible, setVisible] = useState(visible)
     const { initPopper, destroyPopper } = usePopper()
 
-    const Component = variant === 'nav-item' ? 'li' : as
+    const dropdownToggleRef = useCallback((node: HTMLElement | null) => {
+      if (node) {
+        setDropdownToggleElement(node)
+      }
+    }, [])
 
-    // Disable popper if responsive aligment is set.
-    if (typeof alignment === 'object') {
-      popper = false
-    }
+    const allowPopperUse = popper && typeof alignment !== 'object'
+    const Component = variant === 'nav-item' ? 'li' : as
 
     const contextValues = {
       alignment,
       container,
       dark,
-      dropdownToggleRef,
       dropdownMenuRef,
-      popper,
+      dropdownToggleRef,
+      popper: allowPopperUse,
       portal,
       variant,
       visible: _visible,
       setVisible,
     }
 
-    const defaultPopperConfig = {
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: offset,
+    const computedPopperConfig: Partial<Options> = useMemo(() => {
+      const defaultPopperConfig = {
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset,
+            },
           },
-        },
-      ],
-      placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
-    }
+        ],
+        placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
+      }
 
-    const computedPopperConfig: Partial<Options> = {
-      ...defaultPopperConfig,
-      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
-    }
+      return {
+        ...defaultPopperConfig,
+        ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+      }
+    }, [offset, placement, direction, alignment, popperConfig])
 
     useEffect(() => {
       setVisible(visible)
     }, [visible])
 
     useEffect(() => {
-      const toggleElement = dropdownToggleRef.current
+      const toggleElement = dropdownToggleElement
       const menuElement = dropdownMenuRef.current
 
       if (_visible && toggleElement && menuElement) {
-        if (popper) {
+        if (allowPopperUse) {
           initPopper(toggleElement, menuElement, computedPopperConfig)
         }
 
@@ -257,7 +270,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       }
 
       return () => {
-        if (popper) {
+        if (allowPopperUse) {
           destroyPopper()
         }
 
@@ -269,14 +282,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
 
         onHide?.()
       }
-    }, [
-      computedPopperConfig,
-      destroyPopper,
-      dropdownMenuRef,
-      dropdownToggleRef,
-      initPopper,
-      _visible,
-    ])
+    }, [dropdownToggleElement, _visible])
 
     const handleKeydown = (event: KeyboardEvent) => {
       if (
@@ -304,11 +310,11 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     }
 
     const handleMouseUp = (event: Event) => {
-      if (!dropdownToggleRef.current || !dropdownMenuRef.current) {
+      if (!dropdownToggleElement || !dropdownMenuRef.current) {
         return
       }
 
-      if (dropdownToggleRef.current.contains(event.target as HTMLElement)) {
+      if (dropdownToggleElement.contains(event.target as HTMLElement)) {
         return
       }
 
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownContext.ts b/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
index 81af43aa..53ab1151 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
+++ b/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
@@ -5,9 +5,8 @@ export interface CDropdownContextProps {
   alignment?: Alignments
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
   dark?: boolean
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  dropdownToggleRef: RefObject<any | null>
   dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | null>
+  dropdownToggleRef: (node: HTMLElement | null) => void
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
   popper?: boolean
   portal?: boolean
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
index ee8dfe82..29434d7e 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
@@ -74,36 +74,32 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
     ...(!rest.disabled && { ...triggers }),
   }
 
-  const Toggler = () => {
-    if (custom && React.isValidElement(children)) {
-      return (
-        <>
-          {React.cloneElement(children as React.ReactElement<any>, {
-            'aria-expanded': visible,
-            ...(!rest.disabled && { ...triggers }),
-            ref: dropdownToggleRef,
-          })}
-        </>
-      )
-    }
-
-    if (variant === 'nav-item' && navLink) {
-      return (
-        <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
-          {children}
-        </a>
-      )
-    }
+  if (custom && React.isValidElement(children)) {
+    return (
+      <>
+        {React.cloneElement(children as React.ReactElement<any>, {
+          'aria-expanded': visible,
+          ...(!rest.disabled && { ...triggers }),
+          ref: dropdownToggleRef,
+        })}
+      </>
+    )
+  }
 
+  if (variant === 'nav-item' && navLink) {
     return (
-      <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      <a href="#" {...togglerProps} role="button" {...rest} ref={dropdownToggleRef}>
         {children}
-        {split && <span className="visually-hidden">Toggle Dropdown</span>}
-      </CButton>
+      </a>
     )
   }
 
-  return <Toggler />
+  return (
+    <CButton {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
+      {children}
+      {split && <span className="visually-hidden">Toggle Dropdown</span>}
+    </CButton>
+  )
 }
 
 CDropdownToggle.propTypes = {

From 5688b6132a0b22dd2b08899f6a71a1414b229c69 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 12 Jul 2025 16:32:53 +0200
Subject: [PATCH 4/7] refactor(CDropdown): optimize menu visibility toggling

---
 .../src/components/dropdown/CDropdown.tsx     | 76 ++++++++++++-------
 .../components/dropdown/CDropdownContext.ts   |  3 +-
 .../components/dropdown/CDropdownToggle.tsx   | 14 +++-
 3 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
index bcd9f14d..2d8a7bbd 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdown.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
@@ -214,19 +214,6 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     const allowPopperUse = popper && typeof alignment !== 'object'
     const Component = variant === 'nav-item' ? 'li' : as
 
-    const contextValues = {
-      alignment,
-      container,
-      dark,
-      dropdownMenuRef,
-      dropdownToggleRef,
-      popper: allowPopperUse,
-      portal,
-      variant,
-      visible: _visible,
-      setVisible,
-    }
-
     const computedPopperConfig: Partial<Options> = useMemo(() => {
       const defaultPopperConfig = {
         modifiers: [
@@ -247,14 +234,28 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     }, [offset, placement, direction, alignment, popperConfig])
 
     useEffect(() => {
-      setVisible(visible)
+      if (visible) {
+        handleShow()
+      } else {
+        handleHide()
+      }
     }, [visible])
 
     useEffect(() => {
       const toggleElement = dropdownToggleElement
       const menuElement = dropdownMenuRef.current
+      if (allowPopperUse && menuElement && toggleElement && _visible) {
+        initPopper(toggleElement, menuElement, computedPopperConfig)
+      }
+    }, [dropdownToggleElement])
+
+    const handleShow = () => {
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
+
+      if (toggleElement && menuElement) {
+        setVisible(true)
 
-      if (_visible && toggleElement && menuElement) {
         if (allowPopperUse) {
           initPopper(toggleElement, menuElement, computedPopperConfig)
         }
@@ -268,21 +269,26 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
 
         onShow?.()
       }
+    }
 
-      return () => {
-        if (allowPopperUse) {
-          destroyPopper()
-        }
-
-        toggleElement?.removeEventListener('keydown', handleKeydown)
-        menuElement?.removeEventListener('keydown', handleKeydown)
+    const handleHide = () => {
+      setVisible(false)
 
-        window.removeEventListener('mouseup', handleMouseUp)
-        window.removeEventListener('keyup', handleKeyup)
+      const toggleElement = dropdownToggleElement
+      const menuElement = dropdownMenuRef.current
 
-        onHide?.()
+      if (allowPopperUse) {
+        destroyPopper()
       }
-    }, [dropdownToggleElement, _visible])
+
+      toggleElement?.removeEventListener('keydown', handleKeydown)
+      menuElement?.removeEventListener('keydown', handleKeydown)
+
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+
+      onHide?.()
+    }
 
     const handleKeydown = (event: KeyboardEvent) => {
       if (
@@ -305,7 +311,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       }
 
       if (event.key === 'Escape') {
-        setVisible(false)
+        handleHide()
       }
     }
 
@@ -323,11 +329,25 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         (autoClose === 'inside' && dropdownMenuRef.current.contains(event.target as HTMLElement)) ||
         (autoClose === 'outside' && !dropdownMenuRef.current.contains(event.target as HTMLElement))
       ) {
-        setTimeout(() => setVisible(false), 1)
+        setTimeout(() => handleHide(), 1)
         return
       }
     }
 
+    const contextValues = {
+      alignment,
+      container,
+      dark,
+      dropdownMenuRef,
+      dropdownToggleRef,
+      handleHide,
+      handleShow,
+      popper: allowPopperUse,
+      portal,
+      variant,
+      visible: _visible,
+    }
+
     return (
       <CDropdownContext.Provider value={contextValues}>
         {variant === 'input-group' ? (
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownContext.ts b/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
index 53ab1151..d46b69d2 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
+++ b/packages/coreui-react/src/components/dropdown/CDropdownContext.ts
@@ -7,7 +7,8 @@ export interface CDropdownContextProps {
   dark?: boolean
   dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | null>
   dropdownToggleRef: (node: HTMLElement | null) => void
-  setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  handleHide?: () => void
+  handleShow?: () => void
   popper?: boolean
   portal?: boolean
   variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
index 29434d7e..def263e5 100644
--- a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
+++ b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
@@ -45,18 +45,24 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   trigger = 'click',
   ...rest
 }) => {
-  const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, handleHide, handleShow, variant, visible } =
+    useContext(CDropdownContext)
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
       onClick: (event: React.MouseEvent<HTMLElement>) => {
         event.preventDefault()
-        setVisible(!visible)
+
+        if (visible) {
+          handleHide?.()
+        } else {
+          handleShow?.()
+        }
       },
     }),
     ...((trigger === 'focus' || trigger.includes('focus')) && {
-      onFocus: () => setVisible(true),
-      onBlur: () => setVisible(false),
+      onFocus: () => handleShow?.(),
+      onBlur: () => handleHide?.(),
     }),
   }
 

From a6d3bb53f4a971a7ace608fd29f27ef3791a216c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 12 Jul 2025 16:40:59 +0200
Subject: [PATCH 5/7] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui              ^5.4.0  →   ^5.4.1
@rollup/plugin-commonjs    ^28.0.3  →  ^28.0.6
@rollup/plugin-typescript  ^12.1.2  →  ^12.1.4
@types/prop-types          15.7.14  →  15.7.15
@types/react               ^19.1.4  →  ^19.1.8
@types/react-dom           ^19.1.5  →  ^19.1.6
@typescript-eslint/parser  ^8.32.1  →  ^8.36.0
eslint                     ^9.27.0  →  ^9.31.0
eslint-plugin-prettier      ^5.4.0  →   ^5.5.1
gatsby                     ^5.14.3  →  ^5.14.5
globals                    ^16.1.0  →  ^16.3.0
lerna                       ^8.2.2  →   ^8.2.3
prettier                    ^3.5.3  →   ^3.6.2
react-docgen-typescript     ^2.2.2  →   ^2.4.0
rollup                     ^4.41.0  →  ^4.45.0
sass                       ^1.89.0  →  ^1.89.2
ts-jest                    ^29.3.4  →  ^29.4.0
typescript-eslint          ^8.32.1  →  ^8.36.0
---
 package.json                       | 14 +++++++-------
 packages/coreui-react/package.json | 16 ++++++++--------
 packages/docs/package.json         |  8 ++++----
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index e51bf9e0..b7e32b5f 100644
--- a/package.json
+++ b/package.json
@@ -22,18 +22,18 @@
     "test:update": "npm-run-all charts:test:update icons:test:update lib:test:update"
   },
   "devDependencies": {
-    "@typescript-eslint/parser": "^8.32.1",
-    "eslint": "^9.27.0",
+    "@typescript-eslint/parser": "^8.36.0",
+    "eslint": "^9.31.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-prettier": "^5.5.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-unicorn": "^59.0.1",
-    "globals": "^16.1.0",
-    "lerna": "^8.2.2",
+    "globals": "^16.3.0",
+    "lerna": "^8.2.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.5.3",
-    "typescript-eslint": "^8.32.1"
+    "prettier": "^3.6.2",
+    "typescript-eslint": "^8.36.0"
   },
   "overrides": {
     "gatsby-remark-external-links": {
diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json
index 6952b2c9..a052955f 100644
--- a/packages/coreui-react/package.json
+++ b/packages/coreui-react/package.json
@@ -41,21 +41,21 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui": "^5.4.0",
+    "@coreui/coreui": "^5.4.1",
     "@popperjs/core": "^2.11.8",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-typescript": "^12.1.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
-    "@types/prop-types": "15.7.14",
-    "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.5",
+    "@types/prop-types": "15.7.15",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@types/react-transition-group": "^4.4.12",
     "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
@@ -64,8 +64,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.41.0",
-    "ts-jest": "^29.3.4",
+    "rollup": "^4.45.0",
+    "ts-jest": "^29.4.0",
     "tslib": "^2.8.1",
     "typescript": "^5.8.3"
   },
diff --git a/packages/docs/package.json b/packages/docs/package.json
index c7bc49c3..2bb6d91c 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.1.0",
-    "@coreui/coreui": "^5.4.0",
+    "@coreui/coreui": "^5.4.1",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.3.0",
     "@coreui/react-chartjs": "^3.0.0",
@@ -35,7 +35,7 @@
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@stackblitz/sdk": "^1.11.0",
-    "gatsby": "^5.14.3",
+    "gatsby": "^5.14.5",
     "gatsby-plugin-google-tagmanager": "^5.14.0",
     "gatsby-plugin-image": "^3.14.0",
     "gatsby-plugin-manifest": "^5.14.0",
@@ -53,12 +53,12 @@
     "prismjs": "^1.30.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-docgen-typescript": "^2.2.2",
+    "react-docgen-typescript": "^2.4.0",
     "react-dom": "^18.3.1",
     "react-imask": "^7.6.1",
     "react-markdown": "^10.1.0",
     "rimraf": "^6.0.1",
-    "sass": "^1.89.0",
+    "sass": "^1.89.2",
     "showdown": "^2.1.0"
   },
   "devDependencies": {

From 1969a64986f55e47bb2f156ffaac0c282e1a4b2d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 13 Jul 2025 12:33:53 +0200
Subject: [PATCH 6/7] release: v5.7.1

---
 README.md                          | 2 +-
 lerna.json                         | 2 +-
 packages/coreui-react/README.md    | 2 +-
 packages/coreui-react/package.json | 2 +-
 packages/docs/package.json         | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 467a62fb..96d149a2 100644
--- a/README.md
+++ b/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
diff --git a/lerna.json b/lerna.json
index e456a603..d86538ff 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "npmClient": "yarn",
   "packages": ["packages/*"],
-  "version": "5.7.0",
+  "version": "5.7.1",
   "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }
diff --git a/packages/coreui-react/README.md b/packages/coreui-react/README.md
index c98015a2..190eafc0 100644
--- a/packages/coreui-react/README.md
+++ b/packages/coreui-react/README.md
@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.7.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
diff --git a/packages/coreui-react/package.json b/packages/coreui-react/package.json
index a052955f..4e62fee7 100644
--- a/packages/coreui-react/package.json
+++ b/packages/coreui-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "5.7.0",
+  "version": "5.7.1",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 2bb6d91c..7055ba02 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-docs",
-  "version": "5.7.0",
+  "version": "5.7.1",
   "private": true,
   "description": "",
   "homepage": "https://coreui.io/react/",

From 44a6c9889e5ee5156e6d6bdb28e4670c15d1f3f5 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sun, 13 Jul 2025 17:38:36 +0200
Subject: [PATCH 7/7] docs: update schema markup

---
 packages/docs/src/components/Seo.tsx      | 139 ++++++++++++++++++----
 packages/docs/src/templates/MdxLayout.tsx |   3 +-
 2 files changed, 121 insertions(+), 21 deletions(-)

diff --git a/packages/docs/src/components/Seo.tsx b/packages/docs/src/components/Seo.tsx
index 26cd82d0..cbb99f62 100644
--- a/packages/docs/src/components/Seo.tsx
+++ b/packages/docs/src/components/Seo.tsx
@@ -8,9 +8,10 @@ interface SEOProps {
   name?: string
   image?: string
   article?: string
+  pro?: boolean
 }
 
-const SEO = ({ title, description, name, image, article }: SEOProps) => {
+const SEO = ({ title, description, name, image, article, pro }: SEOProps) => {
   const { pathname } = useLocation()
   const { site } = useStaticQuery(query)
 
@@ -35,6 +36,122 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
 
   const formattedTitle = title ? titleTemplate.replace('%s', title) : 'My Gatsby Site'
 
+  const humanize = (text: string): string => {
+    return text
+      .split('-')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ')
+  }
+
+  const breadcrumbList = (startIndex = 1) => {
+    return seo.url
+      .replace('docs//', 'docs/')
+      .replace(siteUrl, '')
+      .split('/')
+      .filter(Boolean)
+      .map((item, index) => ({
+        '@type': 'ListItem',
+        position: index + startIndex,
+        name: humanize(item),
+        item: `${siteUrl}${item}`,
+      }))
+  }
+
+  const getDynamicDescription = (pathname: string, name?: string): string => {
+    if (pathname.includes('/components/') && pathname.includes('api')) {
+      return `Complete guide to CoreUI React ${name} API documentation. Learn how to use the CoreUI React ${name} component, its properties, methods, and events.`
+    }
+
+    if (pathname.includes('/components/') && pathname.includes('bootstrap')) {
+      return `Complete guide to CoreUI React ${name} usage with Bootstrap 5. Learn how to use the CoreUI React ${name} component with Bootstrap 5, including its properties, methods, and events.`
+    }
+
+    if (pathname.includes('/components/') && pathname.includes('styling')) {
+      return `Complete guide to CoreUI React ${name} component styling. Learn how to customize the CoreUI React ${name} component styles, themes, and appearance.`
+    }
+
+    if (pathname.includes('/components/')) {
+      return `Complete guide to CoreUI React ${name} components and implementation. Learn how to use the CoreUI React ${name} component in your React.js application.`
+    }
+
+    if (pathname.includes('/customize/')) {
+      return `Complete guide to CoreUI React customization and theming. Learn how to customize CoreUI React components, styles, and themes to fit your project's needs.`
+    }
+
+    if (pathname.includes('/forms/')) {
+      return `Complete guide to CoreUI React ${name} components and implementation.`
+    }
+
+    if (pathname.includes('/layouts/')) {
+      return `Complete guide to CoreUI React ${name} implementation.`
+    }
+
+    if (pathname.includes('/templates/')) {
+      return 'Complete guide to CoreUI React Templates. Learn how to download, install, customize, and use CoreUI React templates.'
+    }
+
+    if (pathname.includes('/migration/')) {
+      return 'Complete guide to CoreUI React migration. Track and review changes to the CoreUI for React.js components to help you migrate to the latest version.'
+    }
+
+    return  'Complete guide to CoreUI for React.js components and implementation.'
+  }
+
+  const schema = [
+    {
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: [
+        {
+          '@type': 'ListItem',
+          position: 1,
+          name: 'CoreUI',
+          item: 'https://coreui.io',
+        },
+        {
+          '@type': 'ListItem',
+          position: 2,
+          name: 'React',
+          item: 'https://coreui.io/react/',
+        },
+        {
+          '@type': 'ListItem',
+          position: 3,
+          name: 'Documentation',
+          item: siteUrl,
+        },
+        ...breadcrumbList(4),
+      ],
+    },
+    {
+      '@context': 'https://schema.org',
+      '@type': 'TechArticle',
+      headline: `${seo.title} documentation`,
+      description: getDynamicDescription(seo.url, name,),
+      author: {
+        '@type': 'Organization',
+        name: 'CoreUI Team',
+        sameAs: 'https://github.com/coreui/',
+      },
+      publisher: {
+        '@type': 'Organization',
+        name: 'CoreUI',
+        logo: {
+          '@type': 'ImageObject',
+          url: 'https://coreui.io/images/brand/coreui-logo.svg',
+        },
+      },
+      datePublished: '2021-01-13',
+      dateModified: new Date().toISOString().split('T')[0],
+      mainEntityOfPage: {
+        '@type': 'WebPage',
+        '@id': seo.url.replace('docs//', 'docs/'),
+      },
+      version: pro ? '5.17.1' : '5.7.1',
+      proficiencyLevel: 'Beginner',
+    },
+  ]
+
   return (
     <>
       <title>{formattedTitle}</title>
@@ -50,25 +167,7 @@ const SEO = ({ title, description, name, image, article }: SEOProps) => {
       {seo.title && <meta name="twitter:title" content={seo.title} />}
       {seo.description && <meta name="twitter:description" content={seo.description} />}
       {seo.image && <meta name="twitter:image" content={seo.image} />}
-      {seo.name && (
-        <script type="application/ld+json">
-          {`{
-            "@context": "https://schema.org",
-            "@type": "BreadcrumbList",
-            "itemListElement": [{
-              "@type": "ListItem",
-              "position": 1,
-              "name": "React",
-              "item": "${siteUrl}"
-            },{
-              "@type": "ListItem",
-              "position": 2,
-              "name": "${seo.name}",
-              "item": "${seo.url.replace('docs//', 'docs/')}"
-            }]
-          }`}
-        </script>
-      )}
+      {seo.name && <script type="application/ld+json">{JSON.stringify(schema)}</script>}
     </>
   )
 }
diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx
index 00aa6f11..4fddc174 100644
--- a/packages/docs/src/templates/MdxLayout.tsx
+++ b/packages/docs/src/templates/MdxLayout.tsx
@@ -98,11 +98,12 @@ export const Head = ({ pageContext }: { pageContext: PageContextType }) => {
   const title = frontmatter?.title || ''
   const description = frontmatter?.description || ''
   const name = frontmatter?.name || ''
+  const pro = frontmatter?.pro_component || false
 
   return (
     <>
       <html lang="en" />
-      <Seo title={title} description={description} name={name} />
+      <Seo title={title} description={description} name={name} pro={pro} />
     </>
   )
 }