@coreui/react-pro 5.25.0 → 5.27.0

package/src/components/dropdown/CDropdown.tsx

@@ -271,18 +271,14 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     useEffect(() => {
       if (visible) {
         handleShow()
-      } else {
+      } else if (_visible) {
         handleHide()
       }
     }, [visible])
 
     useEffect(() => {
-      return () => {
-        if (_visible) {
-          handleHide()
-        }
-      }
-    }, [])
+      return () => destroyPopper()
+    }, [destroyPopper])
 
     useEffect(() => {
       const referenceElement = getReferenceElement(reference, dropdownToggleElement, dropdownRef)
@@ -302,21 +298,12 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
     const handleHide = useCallback(() => {
       setVisible(false)
 
-      const menuElement = dropdownMenuRef.current
-      const toggleElement = dropdownToggleElement
-
       if (allowPopperUse) {
         destroyPopper()
       }
 
-      menuElement?.removeEventListener('keydown', handleKeydown)
-      toggleElement?.removeEventListener('keydown', handleKeydown)
-
-      window.removeEventListener('click', handleClick)
-      window.removeEventListener('keyup', handleKeyup)
-
       onHide?.()
-    }, [allowPopperUse, dropdownToggleElement, destroyPopper, onHide])
+    }, [allowPopperUse, destroyPopper, onHide])
 
     const handleKeydown = useCallback((event: KeyboardEvent) => {
       if (!dropdownMenuRef.current) {
@@ -399,11 +386,6 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
           }
 
           toggleElement.focus()
-          toggleElement.addEventListener('keydown', handleKeydown)
-          menuElement.addEventListener('keydown', handleKeydown)
-
-          window.addEventListener('click', handleClick)
-          window.addEventListener('keyup', handleKeyup)
 
           if (event && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
             setPendingKeyDownEvent(event)
@@ -412,19 +394,32 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
           onShow?.()
         }
       },
-      [
-        allowPopperUse,
-        computedPopperConfig,
-        dropdownToggleElement,
-        reference,
-        handleClick,
-        handleKeydown,
-        handleKeyup,
-        initPopper,
-        onShow,
-      ]
+      [allowPopperUse, computedPopperConfig, dropdownToggleElement, reference, initPopper, onShow]
     )
 
+    useEffect(() => {
+      if (!_visible) {
+        return
+      }
+
+      const menuElement = dropdownMenuRef.current
+      const toggleElement = dropdownToggleElement
+
+      toggleElement?.addEventListener('keydown', handleKeydown)
+      menuElement?.addEventListener('keydown', handleKeydown)
+
+      window.addEventListener('click', handleClick)
+      window.addEventListener('keyup', handleKeyup)
+
+      return () => {
+        toggleElement?.removeEventListener('keydown', handleKeydown)
+        menuElement?.removeEventListener('keydown', handleKeydown)
+
+        window.removeEventListener('click', handleClick)
+        window.removeEventListener('keyup', handleKeyup)
+      }
+    }, [_visible, dropdownToggleElement, handleClick, handleKeydown, handleKeyup])
+
     const contextValues = useMemo(
       () => ({
         alignment,

package/src/components/dropdown/CDropdownToggle.tsx

@@ -8,7 +8,7 @@ import { CDropdownContext } from './CDropdownContext'
 import { triggerPropType } from '../../props'
 import type { Triggers } from '../../types'
 
-export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
+export interface CDropdownToggleProps extends Omit<CButtonProps, 'toggle' | 'type'> {
   /**
    * Enables pseudo element caret on toggler.
    */
@@ -106,7 +106,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   if (custom && React.isValidElement(children)) {
     return (
       <>
-        {React.cloneElement(children as React.ReactElement<any>, {
+        {React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {
           'aria-expanded': visible,
           ...(!rest.disabled && { ...triggers }),
           ref: dropdownToggleRef,

package/src/components/element-cover/CElementCover.tsx

@@ -44,15 +44,15 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
         return {}
       }
 
-      const parentCoords: {[key: string]: any} = parent.getBoundingClientRect()
-      const customBoundaries: {[key: string]: string} = {}
+      const parentCoords = parent.getBoundingClientRect() as unknown as Record<string, number>
+      const customBoundaries: { [key: string]: string } = {}
       boundaries.forEach(({ sides, query }) => {
         const element = parent.querySelector(query)
         if (!element || !sides) {
           return
         }
 
-        const coords: {[key: string]: any} = element.getBoundingClientRect()
+        const coords = element.getBoundingClientRect() as unknown as Record<string, number>
         sides.forEach((side) => {
           const sideMargin = Math.abs(coords[side] - parentCoords[side])
           customBoundaries[side] = `${sideMargin}px`
@@ -96,7 +96,7 @@ export const CElementCover = forwardRef<HTMLDivElement, CElementCoverProps>(
         </div>
       </div>
     )
-  },
+  }
 )
 
 CElementCover.propTypes = {

package/src/components/form/CChipInput.tsx

@@ -5,7 +5,8 @@ import React, {
   KeyboardEvent,
   ReactNode,
   forwardRef,
-  useEffect,
+  isValidElement,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -13,8 +14,9 @@ import React, {
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
-import { CChip } from '../chip/CChip'
+import { useChipSet } from '../chip-set/useChipSet'
 import { useForkedRef } from '../../hooks'
+import { isRTL } from '../../utils'
 
 type ChipClassName = string | ((value: string) => string)
 
@@ -23,13 +25,17 @@ export interface CChipInputProps extends Omit<
   'onChange' | 'onInput' | 'onSelect'
 > {
   /**
-   * Adds custom classes to the React Chip Input component root element.
+   * Declarative `CChip` children used as the initial chips. Their values seed the uncontrolled value when `defaultValue` is not provided (parity with the vanilla Chip Input).
    */
-  className?: string
+  children?: ReactNode
   /**
    * Adds custom classes to chips rendered by the React Chip Input component. Accepts a static className or a resolver function based on chip value.
    */
   chipClassName?: ChipClassName
+  /**
+   * Adds custom classes to the React Chip Input component root element.
+   */
+  className?: string
   /**
    * Creates a new chip when the React Chip Input component loses focus with a pending value.
    */
@@ -42,6 +48,10 @@ export interface CChipInputProps extends Omit<
    * Disables the React Chip Input component and prevents adding, removing, or selecting chips.
    */
   disabled?: boolean
+  /**
+   * Renders the chips as filter chips, each showing a leading check icon while selected. Implies `selectable`.
+   */
+  filter?: boolean
   /**
    * Sets the `id` of the internal text input rendered by the React Chip Input component.
    */
@@ -94,6 +104,10 @@ export interface CChipInputProps extends Omit<
    * Enables chip selection behavior in the React Chip Input component.
    */
   selectable?: boolean
+  /**
+   * Sets how many chips can be selected at once in the React Chip Input component.
+   */
+  selectionMode?: 'single' | 'multiple'
   /**
    * Sets the separator character used to create chips while typing or pasting in the React Chip Input component.
    */
@@ -127,14 +141,37 @@ const uniqueValues = (values: string[]) => [
   ...new Set(values.map((value) => value.trim()).filter(Boolean)),
 ]
 
+// Initial chip values can be supplied declaratively as CChip children (parity
+// with the vanilla ChipInput, which reads existing .chip elements on init).
+const valuesFromChildren = (children: ReactNode): string[] => {
+  const values: string[] = []
+  React.Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return
+    }
+
+    const { value, children: childContent } = child.props as {
+      value?: string
+      children?: ReactNode
+    }
+    const chipValue = value ?? (typeof childContent === 'string' ? childContent : undefined)
+    if (chipValue) {
+      values.push(chipValue)
+    }
+  })
+  return values
+}
+
 export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
   (
     {
+      children,
       className,
       chipClassName,
       createOnBlur = true,
       defaultValue = [],
       disabled,
+      filter,
       id,
       label,
       maxChips = null,
@@ -148,6 +185,7 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
       readOnly,
       removable = true,
       selectable,
+      selectionMode,
       separator = ',',
       size,
       value,
@@ -156,21 +194,34 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
     ref
   ) => {
     const isControlled = value !== undefined
-    const [_values, setValues] = useState<string[]>(() => uniqueValues(defaultValue))
+    const [_values, setValues] = useState<string[]>(() =>
+      uniqueValues(defaultValue.length > 0 ? defaultValue : valuesFromChildren(children))
+    )
     const [inputValue, setInputValue] = useState('')
-    const [selectedValues, setSelectedValues] = useState<string[]>([])
-    const rootRef = useRef<HTMLDivElement>(null)
     const inputRef = useRef<HTMLInputElement>(null)
-    const forkedRef = useForkedRef(ref, rootRef)
+    const generatedName = useId()
 
     const values = useMemo(
       () => uniqueValues(isControlled ? (value as string[]) : _values),
       [isControlled, value, _values]
     )
 
-    useEffect(() => {
-      setSelectedValues((prev) => prev.filter((item) => values.includes(item)))
-    }, [values])
+    // Build CChipInput on the same engine as CChipSet: selection coordination,
+    // roving focus, and chip prop injection all live in useChipSet. CChipInput
+    // owns the chip list and adds the text-input layer on top.
+    const { rootRef, clearSelection, getFocusableChips, handleKeyDown, renderChipsFromData } =
+      useChipSet({
+        ariaRemoveLabel: undefined,
+        disabled,
+        filter,
+        removable: Boolean(removable && !disabled && !readOnly),
+        selectable,
+        selectionMode,
+        restoreFocusOnRemove: false,
+        onSelectionChange: onSelect,
+        onRemoveChip: (chipValue) => remove(chipValue),
+      })
+    const forkedRef = useForkedRef(ref, rootRef)
 
     const emitValuesChange = (nextValues: string[]) => {
       if (!isControlled) {
@@ -206,16 +257,10 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
         return false
       }
 
-      const nextValues = values.filter((item) => item !== valueToRemove)
-      emitValuesChange(nextValues)
-      setSelectedValues((prev) => {
-        const nextSelected = prev.filter((item) => item !== valueToRemove)
-        if (nextSelected.length !== prev.length) {
-          onSelect?.(nextSelected)
-        }
-        return nextSelected
-      })
+      // Selection is cleaned up by useChipSet; here we just drop the value.
+      emitValuesChange(values.filter((item) => item !== valueToRemove))
       onRemove?.(valueToRemove)
+      inputRef.current?.focus()
       return true
     }
 
@@ -226,19 +271,8 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
     }
 
     const focusLastChip = () => {
-      if (!rootRef.current) {
-        return
-      }
-
-      const focusableChips = [
-        ...rootRef.current.querySelectorAll<HTMLElement>(
-          '[data-coreui-chip-focusable="true"]:not(.disabled)'
-        ),
-      ]
-      if (focusableChips.length === 0) {
-        return
-      }
-      focusableChips[focusableChips.length - 1].focus()
+      const chips = getFocusableChips()
+      chips[chips.length - 1]?.focus()
     }
 
     const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
@@ -258,8 +292,16 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
           break
         }
 
-        case 'ArrowLeft': {
-          if (event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0) {
+        case 'ArrowLeft':
+        case 'ArrowRight': {
+          // The arrow pointing toward the chips (left in LTR, right in RTL) jumps
+          // to the last chip when the caret is at the start of the input.
+          const towardChipsKey = isRTL(rootRef.current) ? 'ArrowRight' : 'ArrowLeft'
+          if (
+            event.key === towardChipsKey &&
+            event.currentTarget.selectionStart === 0 &&
+            event.currentTarget.selectionEnd === 0
+          ) {
             event.preventDefault()
             focusLastChip()
           }
@@ -359,6 +401,21 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
         return
       }
 
+      // The arrow past the last chip moves focus into the text field (mirrored in RTL).
+      if (event.key === (isRTL(rootRef.current) ? 'ArrowLeft' : 'ArrowRight')) {
+        const chips = getFocusableChips()
+        const lastChip = chips[chips.length - 1]
+        if (lastChip?.contains(event.target as Node)) {
+          event.preventDefault()
+          inputRef.current?.focus()
+          return
+        }
+      }
+
+      if (handleKeyDown(event)) {
+        return
+      }
+
       if (event.key.length === 1) {
         inputRef.current?.focus()
       }
@@ -370,16 +427,6 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
       }
     }
 
-    const handleSelectedChange = (chipValue: string, selected: boolean) => {
-      setSelectedValues((prev) => {
-        const nextSelected = selected
-          ? uniqueValues([...prev, chipValue])
-          : prev.filter((value) => value !== chipValue)
-        onSelect?.(nextSelected)
-        return nextSelected
-      })
-    }
-
     const inputSize = Math.max(placeholder.length, inputValue.length, 1)
 
     return (
@@ -406,21 +453,14 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
           </label>
         )}
 
-        {values.map((chipValue) => (
-          <CChip
-            key={chipValue}
-            className={resolveChipClassName(chipClassName, chipValue)}
-            removable={Boolean(removable && !disabled && !readOnly)}
-            ariaRemoveLabel={`Remove ${chipValue}`}
-            disabled={disabled}
-            onRemove={() => remove(chipValue)}
-            selectable={selectable}
-            selected={selectedValues.includes(chipValue)}
-            onSelectedChange={(selected) => handleSelectedChange(chipValue, selected)}
-          >
-            {chipValue}
-          </CChip>
-        ))}
+        {renderChipsFromData(
+          values.map((chipValue) => ({
+            value: chipValue,
+            label: chipValue,
+            className: resolveChipClassName(chipClassName, chipValue),
+            ariaRemoveLabel: `Remove ${chipValue}`,
+          }))
+        )}
 
         <input
           type="text"
@@ -435,27 +475,24 @@ export const CChipInput = forwardRef<HTMLDivElement, CChipInputProps>(
           onChange={(event) => handleInputChange(event.target.value)}
           onKeyDown={handleInputKeyDown}
           onPaste={handlePaste}
-          onFocus={() => {
-            if (selectedValues.length > 0) {
-              setSelectedValues([])
-              onSelect?.([])
-            }
-          }}
+          onFocus={clearSelection}
           ref={inputRef}
         />
 
-        {name && <input type="hidden" name={name} value={values.join(',')} />}
+        <input type="hidden" name={name ?? generatedName} value={values.join(',')} />
       </div>
     )
   }
 )
 
 CChipInput.propTypes = {
+  children: PropTypes.node,
   chipClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   className: PropTypes.string,
   createOnBlur: PropTypes.bool,
   defaultValue: PropTypes.array,
   disabled: PropTypes.bool,
+  filter: PropTypes.bool,
   id: PropTypes.string,
   label: PropTypes.node,
   maxChips: PropTypes.number,
@@ -469,6 +506,7 @@ CChipInput.propTypes = {
   readOnly: PropTypes.bool,
   removable: PropTypes.bool,
   selectable: PropTypes.bool,
+  selectionMode: PropTypes.oneOf(['single', 'multiple']),
   separator: PropTypes.string,
   size: PropTypes.oneOf(['sm', 'lg']),
   value: PropTypes.array,

package/src/components/form/CFormCheck.tsx

@@ -32,8 +32,7 @@ export type ButtonObject = {
 }
 
 export interface CFormCheckProps
-  extends CFormControlValidationProps,
-    InputHTMLAttributes<HTMLInputElement> {
+  extends CFormControlValidationProps, InputHTMLAttributes<HTMLInputElement> {
   /**
    * Create button-like checkboxes and radio buttons.
    */

package/src/components/form/CFormInput.tsx

@@ -11,8 +11,7 @@ import classNames from 'classnames'
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 
 export interface CFormInputProps
-  extends CFormControlWrapperProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  extends CFormControlWrapperProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /**
    * A string of all className you want applied to the component.
    */

package/src/components/form/CFormSelect.tsx

@@ -12,8 +12,7 @@ type Option = {
 }
 
 export interface CFormSelectProps
-  extends CFormControlWrapperProps,
-    Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
+  extends CFormControlWrapperProps, Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
   /**
    * A string of all className you want applied to the component.
    */

package/src/components/form/CFormTextarea.tsx

@@ -5,8 +5,7 @@ import classNames from 'classnames'
 import { CFormControlWrapper, CFormControlWrapperProps } from './CFormControlWrapper'
 
 export interface CFormTextareaProps
-  extends CFormControlWrapperProps,
-    TextareaHTMLAttributes<HTMLTextAreaElement> {
+  extends CFormControlWrapperProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
   /**
    * A string of all className you want applied to the component.
    */

package/src/components/form/CInputGroupText.tsx

@@ -4,8 +4,9 @@ import classNames from 'classnames'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-export interface CInputGroupTextProps
-  extends LabelHTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
+export interface CInputGroupTextProps extends LabelHTMLAttributes<
+  HTMLLabelElement | HTMLSpanElement
+> {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */

package/src/components/grid/CContainer.tsx

@@ -50,7 +50,9 @@ export const CContainer = forwardRef<HTMLDivElement, CContainerProps>(
       const breakpoint = rest[bp]
       delete rest[bp]
 
-      breakpoint && repsonsiveClassNames.push(`container-${bp}`)
+      if (breakpoint) {
+        repsonsiveClassNames.push(`container-${bp}`)
+      }
     })
 
     return (

package/src/components/header/CHeaderBrand.tsx

@@ -4,8 +4,9 @@ import classNames from 'classnames'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-export interface CHeaderBrandProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
+export interface CHeaderBrandProps extends AnchorHTMLAttributes<
+  HTMLAnchorElement | HTMLSpanElement
+> {
   /**
    * Component used for the root node. Either a string to use a HTML element or a component.
    */

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './callout'
 export * from './card'
 export * from './carousel'
 export * from './chip'
+export * from './chip-set'
 export * from './close-button'
 export * from './collapse'
 export * from './conditional-portal'

package/src/components/link/CLink.tsx

@@ -4,8 +4,10 @@ import classNames from 'classnames'
 
 import { PolymorphicRefForwardingComponent } from '../../helpers'
 
-export interface CLinkProps
-  extends Omit<AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, 'as'> {
+export interface CLinkProps extends Omit<
+  AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>,
+  'as'
+> {
   /**
    * Toggle the active state for the component.
    */
@@ -40,8 +42,9 @@ export const CLink: PolymorphicRefForwardingComponent<'a', CLinkProps> = forward
       {...(Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 })}
       {...((Component === 'a' || Component === 'button') && {
         onClick: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-          event.preventDefault
-          !disabled && rest.onClick && rest.onClick(event)
+          if (!disabled) {
+            rest.onClick?.(event)
+          }
         },
       })}
       disabled={disabled}

package/src/components/list-group/CListGroupItem.tsx

@@ -8,8 +8,9 @@ import { PolymorphicRefForwardingComponent } from '../../helpers'
 import { colorPropType } from '../../props'
 import type { Colors } from '../../types'
 
-export interface CListGroupItemProps
-  extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
+export interface CListGroupItemProps extends AnchorHTMLAttributes<
+  HTMLLIElement | HTMLAnchorElement | HTMLButtonElement
+> {
   /**
    * Toggle the active state for the component.
    */

package/src/components/loading-button/CLoadingButton.tsx

@@ -43,7 +43,7 @@ export const CLoadingButton = forwardRef<HTMLButtonElement, CLoadingButtonProps>
       timeout,
       ...rest
     },
-    ref,
+    ref
   ) => {
     const [_loading, setLoading] = useState<boolean>()
 
@@ -73,7 +73,7 @@ export const CLoadingButton = forwardRef<HTMLButtonElement, CLoadingButtonProps>
         {children}
       </CButton>
     )
-  },
+  }
 )
 
 CLoadingButton.propTypes = {

package/src/components/modal/CModal.tsx

@@ -120,6 +120,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     ref
   ) => {
     const modalRef = useRef<HTMLDivElement>(null)
+    const mouseDownTarget = useRef<EventTarget | null>(null)
     const forkedRef = useForkedRef(ref, modalRef)
 
     const [_visible, setVisible] = useState(visible)
@@ -136,11 +137,13 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
 
     useEffect(() => {
       if (_visible) {
+        document.addEventListener('mousedown', handleMouseDown)
         document.addEventListener('mouseup', handleClickOutside)
         document.addEventListener('keydown', handleKeyDown)
       }
 
       return () => {
+        document.removeEventListener('mousedown', handleMouseDown)
         document.removeEventListener('mouseup', handleClickOutside)
         document.removeEventListener('keydown', handleKeyDown)
       }
@@ -155,8 +158,14 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
     }
 
     useLayoutEffect(() => {
+      if (!staticBackdrop) {
+        return
+      }
+
       onClosePrevented?.()
-      setTimeout(() => setStaticBackdrop(false), duration)
+      const timeout = setTimeout(() => setStaticBackdrop(false), duration)
+
+      return () => clearTimeout(timeout)
     }, [staticBackdrop])
 
     // Set focus to modal after open
@@ -186,8 +195,16 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
       }
     }, [_visible])
 
+    const handleMouseDown = (event: Event) => {
+      mouseDownTarget.current = event.target
+    }
+
     const handleClickOutside = (event: Event) => {
-      if (modalRef.current && modalRef.current == event.target) {
+      if (
+        modalRef.current &&
+        modalRef.current == event.target &&
+        mouseDownTarget.current == event.target
+      ) {
         handleDismiss()
       }
     }