@coreui/react-pro 5.11.0 → 5.13.0

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

package/src/components/time-picker/CTimePicker.tsx

@@ -200,7 +200,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       visible,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const formRef = useRef<HTMLFormElement>()
     const inputRef = useRef<HTMLInputElement>(null)
@@ -239,8 +239,9 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
             })
           : ''
       }
-
-      date && setAmPm(getAmPm(new Date(date), locale))
+      if (date) {
+        setAmPm(getAmPm(new Date(date), locale))
+      }
     }, [date])
 
     useEffect(() => {
@@ -262,7 +263,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
     const handleClear = (event: React.MouseEvent<HTMLElement>) => {
       event.stopPropagation()
       setDate(null)
-      onTimeChange && onTimeChange(null)
+      onTimeChange?.(null)
     }
 
     const handleFormValidation = (form: HTMLFormElement) => {
@@ -279,7 +280,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
 
     const handleOnChange = useDebouncedCallback(
       (value: string) => isValidTime(value) && setDate(convertTimeToDate(value)),
-      inputOnChangeDelay,
+      inputOnChangeDelay
     )
 
     const handleTimeChange = (set: 'hours' | 'minutes' | 'seconds' | 'toggle', value: string) => {
@@ -311,7 +312,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
       }
 
       setDate(new Date(_date))
-      onTimeChange && onTimeChange(_date.toTimeString(), _date.toLocaleTimeString(), _date)
+      onTimeChange?.(_date.toTimeString(), _date.toLocaleTimeString(), _date)
     }
 
     const InputGroup = () => (
@@ -456,7 +457,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
               'is-invalid': isValid === false ? true : false,
               'is-valid': isValid,
             },
-            className,
+            className
           )}
           container={container}
           disabled={disabled}
@@ -470,7 +471,10 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
                   size={cancelButtonSize}
                   variant={cancelButtonVariant}
                   onClick={() => {
-                    initialDate && setDate(new Date(initialDate))
+                    if (initialDate) {
+                      setDate(new Date(initialDate))
+                    }
+
                     setVisible(false)
                   }}
                 >
@@ -493,12 +497,15 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
           }
           onHide={() => {
             setVisible(false)
-            onHide && onHide()
+            onHide?.()
           }}
           onShow={() => {
-            date && setInitialDate(new Date(date))
+            if (date) {
+              setInitialDate(new Date(date))
+            }
+
             setVisible(true)
-            onShow && onShow()
+            onShow?.()
           }}
           portal={portal}
           toggler={InputGroup()}
@@ -550,7 +557,7 @@ export const CTimePicker = forwardRef<HTMLDivElement | HTMLLIElement, CTimePicke
         </CPicker>
       </CFormControlWrapper>
     )
-  },
+  }
 )
 
 CTimePicker.propTypes = {

package/src/components/time-picker/utils.ts

@@ -65,12 +65,12 @@ export const getAmPm = (date: Date, locale: string): AmPm => {
 export const formatTimePartials = (
   values: number[],
   locale: string,
-  partial: 'hour' | 'minute' | 'second',
+  partial: 'hour' | 'minute' | 'second'
 ): FormattedPartial[] => {
   const date = new Date()
-
+  const forceTwoDigit = shouldUseTwoDigitHour(locale)
   const formatter = new Intl.DateTimeFormat(locale, {
-    hour: 'numeric',
+    hour: forceTwoDigit ? '2-digit' : 'numeric',
     minute: '2-digit',
     second: '2-digit',
   })
@@ -109,32 +109,32 @@ export const getLocalizedTimePartials = (
   ampm: 'auto' | boolean = 'auto',
   hours: boolean | number[] | ((hour: number) => number[]) = [],
   minutes: boolean | number[] | ((minute: number) => number[]) = [],
-  seconds: boolean | number[] | ((second: number) => number[]) = [],
+  seconds: boolean | number[] | ((second: number) => number[]) = []
 ): LocalizedTimePartials => {
   const hour12 = (ampm === 'auto' && isAmPm(locale)) || ampm === true
 
   const listOfHours =
     Array.isArray(hours) && hours.length > 0
       ? hours
-      : (typeof hours === 'function'
+      : typeof hours === 'function'
         ? Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)).filter((hour) =>
-            hours(hour),
+            hours(hour)
           )
-        : Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i)))
+        : Array.from({ length: hour12 ? 12 : 24 }, (_, i) => (hour12 ? i + 1 : i))
 
   const listOfMinutes =
     Array.isArray(minutes) && minutes.length > 0
       ? minutes
-      : (typeof minutes === 'function'
+      : typeof minutes === 'function'
         ? Array.from({ length: 60 }, (_, i) => i).filter((minute) => minutes(minute))
-        : Array.from({ length: 60 }, (_, i) => i))
+        : Array.from({ length: 60 }, (_, i) => i)
 
   const listOfSeconds =
     Array.isArray(seconds) && seconds.length > 0
       ? seconds
-      : (typeof seconds === 'function'
+      : typeof seconds === 'function'
         ? Array.from({ length: 60 }, (_, i) => i).filter((second) => seconds(second))
-        : Array.from({ length: 60 }, (_, i) => i))
+        : Array.from({ length: 60 }, (_, i) => i)
 
   return {
     listOfHours: formatTimePartials(listOfHours, locale, 'hour'),
@@ -154,12 +154,12 @@ export const getLocalizedTimePartials = (
 export const getSelectedHour = (
   date: Date | null,
   locale: string,
-  ampm: 'auto' | boolean = 'auto',
+  ampm: 'auto' | boolean = 'auto'
 ): number | string =>
   date
-    ? ((ampm === 'auto' && isAmPm(locale)) || ampm === true
+    ? (ampm === 'auto' && isAmPm(locale)) || ampm === true
       ? convert24hTo12h(date.getHours())
-      : date.getHours())
+      : date.getHours()
     : ''
 
 /**
@@ -195,3 +195,19 @@ export const isValidTime = (time: string): boolean => {
   const d = new Date(`1970-01-01T${time}`)
   return d instanceof Date && !Number.isNaN(d.getTime())
 }
+
+/**
+ * Checks whether the given locale formats the hour "9" with a leading zero ("09")
+ * when using `hour: 'numeric'` in `toLocaleTimeString`.
+ *
+ * This helps determine if you should force `hour: '2-digit'` for consistent formatting.
+ *
+ * @param {string} locale - The locale code (e.g., "en-US", "pl-PL").
+ * @returns {boolean} `true` if the formatted hour starts with a leading zero, otherwise `false`.
+ */
+export const shouldUseTwoDigitHour = (locale: string): boolean => {
+  const d = new Date(2020, 0, 1, 7, 5, 7) // 7:05:07
+  const formatted = d.toLocaleTimeString(locale)
+
+  return formatted.startsWith('0') // check if the hour starts with "0"
+}