@coreui/react-pro 5.11.0 → 5.12.0

package/dist/esm/hooks/useColorModes.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColorModes.js","sources":["../../../src/hooks/useColorModes.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAQA,IAAM,cAAc,GAAG,UAAC,oBAA4B,EAAA;IAClD,OAAA,OAAO,UAAU,KAAK,WAAW,IAAI,YAAY,CAAC,OAAO,CAAC,oBAAoB,CAAC;AAA/E,CAA+E;AAEjF,IAAM,cAAc,GAAG,UAAC,oBAA4B,EAAE,SAAiB,EAAA;AACrE,IAAA,OAAA,YAAY,CAAC,OAAO,CAAC,oBAAoB,EAAE,SAAS,CAAC;AAArD,CAAqD;AAEvD,IAAM,uBAAuB,GAAG,UAAC,oBAA4B,EAAA;AAC3D,IAAA,IAAI,OAAO,UAAU,KAAK,WAAW,EAAE;AACrC,QAAA,OAAO,OAAO;;AAGhB,IAAA,IAAM,WAAW,GAAG,cAAc,CAAC,oBAAoB,CAAC;IAExD,IAAI,WAAW,EAAE;AACf,QAAA,OAAO,WAAW;;AAGpB,IAAA,OAAO,UAAU,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACzF,CAAC;AAED,IAAM,QAAQ,GAAG,UAAC,SAAiB,EAAA;AACjC,IAAA,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW;QAC1C,SAAS,KAAK,MAAM,IAAI,UAAU,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;AAC5E,cAAE;cACA,SAAS;AAEf,IAAA,IAAM,KAAK,GAAG,IAAI,KAAK,CAAC,mBAAmB,CAAC;AAC5C,IAAA,QAAQ,CAAC,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC;AAC/C,CAAC;AAEM,IAAM,aAAa,GAAG,UAC3B,oBAAkD,EAAA;AAAlD,IAAA,IAAA,oBAAA,KAAA,KAAA,CAAA,EAAA,EAAA,oBAAkD,GAAA,2BAAA,CAAA;AAE5C,IAAA,IAAA,EAA4B,GAAA,QAAQ,CACxC,uBAAuB,CAAC,oBAAoB,CAAC,CAC9C,EAFM,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,QAE7B;AAED,IAAA,SAAS,CAAC,YAAA;QACR,IAAI,SAAS,EAAE;AACb,YAAA,cAAc,CAAC,oBAAoB,EAAE,SAAS,CAAC;YAC/C,QAAQ,CAAC,SAAS,CAAC;;AAEvB,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,SAAS,CAAC,YAAA;QACR,UAAU,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAA;AAC/E,YAAA,IAAM,WAAW,GAAG,cAAc,CAAC,oBAAoB,CAAC;YACxD,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,MAAM,IAAI,SAAS,EAAE;gBAClE,QAAQ,CAAC,SAAS,CAAC;;AAEvB,SAAC,CAAC;AACJ,KAAC,CAAC;IAEF,OAAO;AACL,QAAA,SAAS,EAAA,SAAA;QACT,cAAc,EAAE,YAAM,EAAA,OAAA,OAAO,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC,CAAA,EAAA;AACnE,QAAA,YAAY,EAAA,YAAA;KACb;AACH;;;;"}
+{"version":3,"file":"useColorModes.js","sources":["../../../src/hooks/useColorModes.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAQA,IAAM,cAAc,GAAG,UAAC,oBAA4B,EAAA;IAClD,OAAA,OAAO,MAAM,KAAK,WAAW,IAAI,YAAY,CAAC,OAAO,CAAC,oBAAoB,CAAC;AAA3E,CAA2E;AAE7E,IAAM,cAAc,GAAG,UAAC,oBAA4B,EAAE,SAAiB,EAAA;AACrE,IAAA,OAAA,YAAY,CAAC,OAAO,CAAC,oBAAoB,EAAE,SAAS,CAAC;AAArD,CAAqD;AAEvD,IAAM,uBAAuB,GAAG,UAAC,oBAA4B,EAAA;AAC3D,IAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;AACjC,QAAA,OAAO,OAAO;;AAGhB,IAAA,IAAM,WAAW,GAAG,cAAc,CAAC,oBAAoB,CAAC;IAExD,IAAI,WAAW,EAAE;AACf,QAAA,OAAO,WAAW;;AAGpB,IAAA,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO;AACrF,CAAC;AAED,IAAM,QAAQ,GAAG,UAAC,SAAiB,EAAA;AACjC,IAAA,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW;QAC1C,SAAS,KAAK,MAAM,IAAI,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;AACxE,cAAE;cACA,SAAS;AAEf,IAAA,IAAM,KAAK,GAAG,IAAI,KAAK,CAAC,mBAAmB,CAAC;AAC5C,IAAA,QAAQ,CAAC,eAAe,CAAC,aAAa,CAAC,KAAK,CAAC;AAC/C,CAAC;AAEM,IAAM,aAAa,GAAG,UAC3B,oBAAkD,EAAA;AAAlD,IAAA,IAAA,oBAAA,KAAA,KAAA,CAAA,EAAA,EAAA,oBAAkD,GAAA,2BAAA,CAAA;AAE5C,IAAA,IAAA,EAA4B,GAAA,QAAQ,CACxC,uBAAuB,CAAC,oBAAoB,CAAC,CAC9C,EAFM,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,QAE7B;AAED,IAAA,SAAS,CAAC,YAAA;QACR,IAAI,SAAS,EAAE;AACb,YAAA,cAAc,CAAC,oBAAoB,EAAE,SAAS,CAAC;YAC/C,QAAQ,CAAC,SAAS,CAAC;;AAEvB,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,SAAS,CAAC,YAAA;QACR,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAA;AAC3E,YAAA,IAAM,WAAW,GAAG,cAAc,CAAC,oBAAoB,CAAC;YACxD,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,MAAM,IAAI,SAAS,EAAE;gBAClE,QAAQ,CAAC,SAAS,CAAC;;AAEvB,SAAC,CAAC;AACJ,KAAC,CAAC;IAEF,OAAO;AACL,QAAA,SAAS,EAAA,SAAA;QACT,cAAc,EAAE,YAAM,EAAA,OAAA,OAAO,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAAC,CAAA,EAAA;AACnE,QAAA,YAAY,EAAA,YAAA;KACb;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react-pro",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "description": "UI Components Library for React.js",
   "keywords": [
     "react",
@@ -51,7 +51,7 @@
     "@rollup/plugin-typescript": "^12.1.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.1.0",
+    "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.14",
     "@types/prop-types": "15.7.13",
     "@types/react": "^18.3.18",
@@ -65,10 +65,10 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "rollup": "^4.29.1",
+    "rollup": "^4.34.4",
     "ts-jest": "^29.2.5",
     "tslib": "^2.8.1",
-    "typescript": "^5.7.2"
+    "typescript": "^5.7.3"
   },
   "peerDependencies": {
     "react": ">=17",

package/src/components/accordion/CAccordionBody.tsx

@@ -15,16 +15,16 @@ export interface CAccordionBodyProps extends HTMLAttributes<HTMLDivElement> {
 
 export const CAccordionBody = forwardRef<HTMLDivElement, CAccordionBodyProps>(
   ({ children, className, ...rest }, ref) => {
-    const { visible } = useContext(CAccordionItemContext)
+    const { id, visible } = useContext(CAccordionItemContext)
 
     return (
-      <CCollapse className="accordion-collapse" visible={visible}>
+      <CCollapse className="accordion-collapse" id={id} visible={visible}>
         <div className={classNames('accordion-body', className)} {...rest} ref={ref}>
           {children}
         </div>
       </CCollapse>
     )
-  },
+  }
 )
 
 CAccordionBody.propTypes = {

package/src/components/accordion/CAccordionItem.tsx

@@ -22,6 +22,10 @@ export interface CAccordionItemContextProps {
 export const CAccordionItemContext = createContext({} as CAccordionItemContextProps)
 
 export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+   */
+  id?: string
   /**
    * A string of all className you want applied to the base component.
    */
@@ -33,9 +37,9 @@ export interface CAccordionItemProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
-  ({ children, className, itemKey, ...rest }, ref) => {
-    const id = useId()
-    const _itemKey = useRef(itemKey ?? id)
+  ({ children, className, id, itemKey, ...rest }, ref) => {
+    const _id = id ?? useId()
+    const _itemKey = useRef(itemKey ?? _id)
 
     const { _activeItemKey, alwaysOpen, setActiveKey } = useContext(CAccordionContext)
     const [visible, setVisible] = useState(Boolean(_activeItemKey === _itemKey.current))
@@ -52,12 +56,12 @@ export const CAccordionItem = forwardRef<HTMLDivElement, CAccordionItemProps>(
 
     return (
       <div className={classNames('accordion-item', className)} {...rest} ref={ref}>
-        <CAccordionItemContext.Provider value={{ id, setVisible, visible }}>
+        <CAccordionItemContext.Provider value={{ id: _id, setVisible, visible }}>
           {children}
         </CAccordionItemContext.Provider>
       </div>
     )
-  },
+  }
 )
 
 CAccordionItem.propTypes = {

package/src/components/dropdown/CDropdown.tsx

@@ -10,6 +10,7 @@ import React, {
 } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
+import type { Options } from '@popperjs/core'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { useForkedRef, usePopper } from '../../hooks'
@@ -22,77 +23,148 @@ import { getPlacement } from './utils'
 
 export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
   /**
-   * Set aligment of dropdown menu.
+   * Specifies the alignment of the React Dropdown Menu within this React Dropdown.
+   *
+   * @example
+   * // Align dropdown menu to the end on large devices, otherwise start
+   * <CDropdown alignment={{ lg: 'end', xs: 'start' }}>
+   *   <CDropdownToggle>Toggle dropdown</CDropdownToggle>
+   *   <CDropdownMenu>
+   *     <CDropdownItem>Action</CDropdownItem>
+   *     <CDropdownItem>Another Action</CDropdownItem>
+   *   </CDropdownMenu>
+   * </CDropdown>
    *
    * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
    */
   alignment?: Alignments
+
   /**
-   * Component used for the root node. Either a string to use a HTML element or a component.
+   * Determines the root node component (native HTML element or a custom React component) for the React Dropdown.
    */
   as?: ElementType
+
   /**
-   * Configure the auto close behavior of the dropdown:
-   * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
-   * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
-   * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
-   * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+   * Configures automatic closing behavior for the React Dropdown:
+   * - `true` - Close on clicks inside or outside of the React Dropdown Menu.
+   * - `false` - Disable auto-close; manually call `hide` or `toggle` (also not closed by `Escape`).
+   * - `'inside'` - Close only when clicking inside the React Dropdown Menu.
+   * - `'outside'` - Close only when clicking outside the React Dropdown Menu.
+   *
+   * @example
+   * // Close only when user clicks outside of the menu
+   * <CDropdown autoClose="outside" />
    */
   autoClose?: 'inside' | 'outside' | boolean
+
   /**
-   * A string of all className you want applied to the base component.
+   * Adds custom classes to the React Dropdown root element.
    */
   className?: string
+
   /**
-   * Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   * Appends the React Dropdown Menu to a specific element. You can pass an HTML element or a function returning an element. Defaults to `document.body`.
+   *
+   * @example
+   * // Append the menu to a custom container
+   * const myContainer = document.getElementById('my-container')
+   *
+   * <CDropdown container={myContainer} />
    *
    * @since 4.11.0
    */
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+
   /**
-   * Sets a darker color scheme to match a dark navbar.
+   * Applies a darker color scheme to the React Dropdown Menu, often used within dark navbars.
    */
   dark?: boolean
+
   /**
-   * Sets a specified  direction and location of the dropdown menu.
+   * Specifies the direction of the React Dropdown.
    */
   direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart'
+
   /**
-   * Offset of the dropdown menu relative to its target.
+   * Defines x and y offsets ([x, y]) for the React Dropdown Menu relative to its target.
+   *
+   * @example
+   * // Offset the menu 10px in X and 5px in Y direction
+   * <CDropdown offset={[10, 5]}>
+   *   ...
+   * </CDropdown>
    */
   offset?: [number, number]
+
   /**
-   * Callback fired when the component requests to be hidden.
+   * Callback fired right before the React Dropdown becomes hidden.
    *
    * @since 4.9.0
    */
   onHide?: () => void
+
   /**
-   * Callback fired when the component requests to be shown.
+   * Callback fired immediately after the React Dropdown is displayed.
    */
   onShow?: () => void
+
   /**
-   * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+   * Determines the placement of the React Dropdown Menu after Popper.js modifiers.
    *
-   * @type 'auto' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
+   * @type 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end'
    */
   placement?: Placements
+
   /**
-   * If you want to disable dynamic positioning set this property to `true`.
+   * Enables or disables dynamic positioning via Popper.js for the React Dropdown Menu.
    */
   popper?: boolean
+
+  /**
+   * Provides a custom Popper.js configuration or a function that returns a modified Popper.js configuration for advanced positioning of the React Dropdown Menu. [Read more](https://popper.js.org/docs/v2/constructors/#options)
+   *
+   * @example
+   * // Providing a custom popper config
+   * <CDropdown
+   *   popperConfig={{
+   *     modifiers: [
+   *       {
+   *         name: 'flip',
+   *         options: { fallbackPlacements: ['bottom', 'top'] },
+   *       },
+   *     ],
+   *   }}
+   * >...</CDropdown>
+   *
+   * @since 5.5.0
+   */
+  popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
+
   /**
-   * Generates dropdown menu using createPortal.
+   * Renders the React Dropdown Menu using a React Portal, allowing it to escape the DOM hierarchy for improved positioning.
    *
    * @since 4.8.0
    */
   portal?: boolean
+
   /**
-   * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
+   * Defines the visual variant of the React Dropdown
    */
   variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item'
+
   /**
-   * Toggle the visibility of dropdown menu component.
+   * Controls the visibility of the React Dropdown Menu:
+   * - `true` - Visible
+   * - `false` - Hidden
+   *
+   * @example
+   * // Programmatically manage the dropdown visibility
+   * const [visible, setVisible] = useState(false)
+   *
+   * <CDropdown visible={visible}>
+   *   ...
+   * </CDropdown>
+   *
    */
   visible?: boolean
 }
@@ -126,12 +198,13 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       onShow,
       placement = 'bottom-start',
       popper = true,
+      popperConfig,
       portal = false,
       variant = 'btn-group',
       visible = false,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -161,7 +234,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       setVisible,
     }
 
-    const popperConfig = {
+    const defaultPopperConfig = {
       modifiers: [
         {
           name: 'offset',
@@ -173,6 +246,11 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       placement: getPlacement(placement, direction, alignment, isRTL(dropdownMenuRef.current)),
     }
 
+    const computedPopperConfig: Partial<Options> = {
+      ...defaultPopperConfig,
+      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+    }
+
     useEffect(() => {
       setVisible(visible)
     }, [visible])
@@ -180,7 +258,8 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     useEffect(() => {
       if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
         dropdownToggleRef.current.focus()
-        popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig)
+        popper &&
+          initPopper(dropdownToggleRef.current, dropdownMenuRef.current, computedPopperConfig)
         window.addEventListener('mouseup', handleMouseUp)
         window.addEventListener('keyup', handleKeyup)
         dropdownToggleRef.current.addEventListener('keydown', handleKeydown)
@@ -209,7 +288,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         event.preventDefault()
         const target = event.target as HTMLElement
         const items: HTMLElement[] = Array.from(
-          dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)'),
+          dropdownMenuRef.current.querySelectorAll('.dropdown-item:not(.disabled):not(:disabled)')
         )
         getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus()
       }
@@ -258,7 +337,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
                 [`${direction}`]:
                   direction && direction !== 'center' && direction !== 'dropup-center',
               },
-              className,
+              className
             )}
             {...rest}
             ref={forkedRef}
@@ -268,7 +347,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
         )}
       </CDropdownContext.Provider>
     )
-  },
+  }
 )
 
 const alignmentDirection = PropTypes.oneOf<Directions>(['start', 'end'])
@@ -297,6 +376,7 @@ CDropdown.propTypes = {
   onShow: PropTypes.func,
   placement: placementPropType,
   popper: PropTypes.bool,
+  popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   portal: PropTypes.bool,
   variant: PropTypes.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
   visible: PropTypes.bool,

package/src/components/dropdown/CDropdownMenu.tsx

@@ -42,7 +42,6 @@ export const CDropdownMenu: PolymorphicRefForwardingComponent<'ul', CDropdownMen
             )}
             ref={forkedRef}
             role="menu"
-            aria-hidden={!visible}
             {...(!popper && { 'data-coreui-popper': 'static' })}
             {...(dark && { 'data-coreui-theme': 'dark' })}
             {...rest}

package/src/components/popover/CPopover.tsx

@@ -9,6 +9,7 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
+import type { Options } from '@popperjs/core'
 
 import { CConditionalPortal } from '../conditional-portal'
 import { useForkedRef, usePopper } from '../../hooks'
@@ -18,65 +19,132 @@ import { executeAfterTransition, getRTLPlacement } from '../../utils'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
-   * Apply a CSS fade transition to the popover.
+   * Adds a fade transition animation to the React Popover.
    *
    * @since 4.9.0
    */
   animation?: boolean
+
   /**
-   * A string of all className you want applied to the component.
+   * Custom class name(s) for additional styling.
    */
   className?: string
+
   /**
-   * Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+   * Defines the container element to which the React Popover is appended.
+   * Accepts:
+   * - A DOM element (`HTMLElement` or `DocumentFragment`)
+   * - A function that returns a single element
+   * - `null` (defaults to `document.body`)
+   *
+   * @example
+   * <CPopover container={document.getElementById('my-container')}>...</CPopover>
    *
+   * @default document.body
    * @since 4.11.0
    */
   container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
+
   /**
-   * Content node for your component.
+   * Main content of the React Popover. It can be a string or any valid React node.
    */
   content: ReactNode | string
+
   /**
-   * Offset of the popover relative to its target.
-   */
-  offset?: [number, number]
-  /**
-   * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+   * Delay (in milliseconds) before showing or hiding the React Popover.
+   * - If a number is provided, that delay applies to both "show" and "hide".
+   * - If an object is provided, use separate values for "show" and "hide".
+   *
+   * @example
+   * // Delays 300ms on both show and hide
+   * <CPopover delay={300}>...</CPopover>
+   *
+   * // Delays 500ms on show and 100ms on hide
+   * <CPopover delay={{ show: 500, hide: 100 }}>...</CPopover>
    *
    * @since 4.9.0
    */
   delay?: number | { show: number; hide: number }
+
   /**
-   * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+   * Specifies the fallback placements when the preferred `placement` cannot be met.
    *
+   * @type 'top', 'right', 'bottom', 'left' | ('top', 'right', 'bottom', 'left')[]
    * @since 4.9.0
    */
   fallbackPlacements?: Placements | Placements[]
+
   /**
-   * Callback fired when the component requests to be hidden.
+   * Offset of the React Popover relative to its toggle element, in the form `[x, y]`.
+   *
+   * @example
+   * // Offset the menu 0px in X and 10px in Y direction
+   * <CPopover offset={[0, 10]}>...</CPopover>
+   *
+   * // Offset the menu 5px in both X and Y direction
+   * <CPopover offset={[5, 5]}>...</CPopover>
+   */
+  offset?: [number, number]
+
+  /**
+   * Invoked when the React Popover is about to hide.
    */
   onHide?: () => void
+
   /**
-   * Callback fired when the component requests to be shown.
+   * Invoked when the React Popover is about to show.
    */
   onShow?: () => void
+
   /**
-   * Title node for your component.
+   * Placement of the React Popover. Popper.js may override this based on available space.
    */
-  title?: ReactNode | string
+  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
+
   /**
-   * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+   * Allows customization of the Popper.js configuration for the React Popover.
+   * Can be an object or a function returning a modified configuration.
+   * [Learn more](https://popper.js.org/docs/v2/constructors/#options)
+   *
+   * @example
+   * <CPopover
+   *   popperConfig={(defaultConfig) => ({
+   *     ...defaultConfig,
+   *     strategy: 'fixed',
+   *     modifiers: [
+   *       ...defaultConfig.modifiers,
+   *       { name: 'computeStyles', options: { adaptive: false } },
+   *     ],
+   *   })}
+   * >...</CPopover>
    *
-   * @type 'hover' | 'focus' | 'click'
+   * @since 5.5.0
    */
-  trigger?: Triggers | Triggers[]
+  popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>)
+
   /**
-   * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+   * Title for the React Popover header. Can be a string or any valid React node.
    */
-  placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left'
+  title?: ReactNode | string
+
   /**
-   * Toggle the visibility of popover component.
+   * Determines which events trigger the visibility of the React Popover. Can be a single trigger or an array of triggers.
+   *
+   * @example
+   * // Hover-only popover
+   * <CPopover trigger="hover">...</CPopover>
+   *
+   * // Hover + click combined
+   * <CPopover trigger={['hover', 'click']}>...</CPopover>
+   *
+   * @type 'hover' | 'focus' | 'click' | ('hover' | 'focus' | 'click')[]
+   */
+  trigger?: Triggers | Triggers[]
+
+  /**
+   * Controls the visibility of the React Popover.
+   * - `true` shows the popover.
+   * - `false` hides the popover.
    */
   visible?: boolean
 }
@@ -95,12 +163,13 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
       onHide,
       onShow,
       placement = 'top',
+      popperConfig,
       title,
       trigger = 'click',
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const popoverRef = useRef<HTMLDivElement>(null)
     const togglerRef = useRef(null)
@@ -114,30 +183,20 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
 
     const _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay
 
-    const popperConfig = {
+    const defaultPopperConfig: Partial<Options> = {
       modifiers: [
-        {
-          name: 'arrow',
-          options: {
-            element: '.popover-arrow',
-          },
-        },
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: fallbackPlacements,
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: offset,
-          },
-        },
+        { name: 'arrow', options: { element: '.popover-arrow' } },
+        { name: 'flip', options: { fallbackPlacements } },
+        { name: 'offset', options: { offset } },
       ],
       placement: getRTLPlacement(placement, togglerRef.current),
     }
 
+    const computedPopperConfig: Partial<Options> = {
+      ...defaultPopperConfig,
+      ...(typeof popperConfig === 'function' ? popperConfig(defaultPopperConfig) : popperConfig),
+    }
+
     useEffect(() => {
       if (visible) {
         handleShow()
@@ -149,7 +208,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
 
     useEffect(() => {
       if (mounted && togglerRef.current && popoverRef.current) {
-        initPopper(togglerRef.current, popoverRef.current, popperConfig)
+        initPopper(togglerRef.current, popoverRef.current, computedPopperConfig)
         setTimeout(() => {
           setVisible(true)
         }, _delay.show)
@@ -215,7 +274,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
                   fade: animation,
                   show: _visible,
                 },
-                className,
+                className
               )}
               id={id}
               ref={forkedRef}
@@ -230,7 +289,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
         </CConditionalPortal>
       </>
     )
-  },
+  }
 )
 
 CPopover.propTypes = {
@@ -251,6 +310,7 @@ CPopover.propTypes = {
   onHide: PropTypes.func,
   onShow: PropTypes.func,
   placement: PropTypes.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
+  popperConfig: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   trigger: triggerPropType,
   visible: PropTypes.bool,

package/src/components/smart-table/CSmartTableHead.tsx

@@ -177,6 +177,9 @@ export const CSmartTableHead: PolymorphicRefForwardingComponent<'thead', CSmartT
                           (value: any) =>
                             handleOnCustomFilterChange &&
                             handleOnCustomFilterChange(getColumnKey(column), value),
+                          columnFilterState && columnFilterState[getColumnKey(column)]
+                            ? columnFilterState[getColumnKey(column)]
+                            : undefined
                         )
                       ) : (
                         <CFormInput

package/src/components/smart-table/types.ts

@@ -6,7 +6,13 @@ import { CTableRowProps } from '../table/CTableRow'
 
 export type Column = {
   children?: Column[]
-  filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode)
+  filter?:
+    | boolean
+    | ((
+        values: any[],
+        onChange: (value: any) => void,
+        state: ColumnFilterValue | undefined
+      ) => ReactNode)
   group?: string
   key: string
   label?: string