@coreui/react-pro 5.24.1 → 5.26.0

package/src/components/dropdown/CDropdown.tsx

@@ -226,7 +226,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
       popperConfig,
       portal = false,
       reference = 'toggle',
-      variant = 'btn-group',
+      variant = 'dropdown',
       visible = false,
       ...rest
     },
@@ -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

@@ -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/dropdown/__tests__/CDropdown.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
+import { createPopper } from '@popperjs/core'
 import {
   CDropdown,
   CDropdownToggle,
@@ -11,6 +12,14 @@ import {
   CDropdownDivider,
 } from '../index'
 
+jest.mock('@popperjs/core', () => {
+  const actual = jest.requireActual('@popperjs/core')
+  return {
+    ...actual,
+    createPopper: jest.fn(actual.createPopper),
+  }
+})
+
 test('loads and displays CDropdown component', async () => {
   const { container } = render(<CDropdown>Test</CDropdown>)
   expect(container).toMatchSnapshot()
@@ -89,7 +98,7 @@ test('CDropdown opens on toggle click and closes on clicking outside', async ()
 
   // Click outside the dropdown to close it
   const externalArea = screen.getByTestId('external-area')
-  fireEvent.mouseUp(externalArea)
+  fireEvent.click(externalArea)
 
   // Wait for the dropdown menu to be hidden
   await waitFor(() => {
@@ -98,6 +107,52 @@ test('CDropdown opens on toggle click and closes on clicking outside', async ()
   })
 })
 
+test('CDropdown keeps absolute positioning attached to a replaced toggler', async () => {
+  const createPopperMock = createPopper as jest.Mock
+  createPopperMock.mockClear()
+
+  const DropdownApp = ({ togglerKey }: { togglerKey: string }) => (
+    <CDropdown>
+      <CDropdownToggle key={togglerKey} data-testid={`toggler-${togglerKey}`}>
+        Toggle
+      </CDropdownToggle>
+      <CDropdownMenu>
+        <CDropdownItem>A</CDropdownItem>
+      </CDropdownMenu>
+    </CDropdown>
+  )
+
+  const { rerender } = render(<DropdownApp togglerKey="first" />)
+
+  fireEvent.click(screen.getByTestId('toggler-first'))
+
+  const menu = screen.getByRole('menu')
+  await waitFor(() => {
+    expect(menu).toHaveStyle('position: absolute')
+    expect(menu).toHaveAttribute('data-popper-placement', 'bottom-start')
+  })
+
+  expect(createPopperMock).toHaveBeenCalledTimes(1)
+  expect(createPopperMock.mock.calls[0][0]).toBe(screen.getByTestId('toggler-first'))
+
+  const firstPopper = createPopperMock.mock.results[0].value
+  const destroySpy = jest.spyOn(firstPopper, 'destroy')
+
+  rerender(<DropdownApp togglerKey="second" />)
+
+  await waitFor(() => {
+    expect(createPopperMock).toHaveBeenCalledTimes(2)
+  })
+
+  expect(destroySpy).toHaveBeenCalledTimes(1)
+  expect(createPopperMock.mock.calls[1][0]).toBe(screen.getByTestId('toggler-second'))
+
+  await waitFor(() => {
+    expect(menu).toHaveStyle('position: absolute')
+    expect(menu).toHaveAttribute('data-popper-placement', 'bottom-start')
+  })
+})
+
 test('CDropdown example', async () => {
   jest.useFakeTimers()
   const { container } = render(

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.tsx.snap

@@ -13,7 +13,7 @@ exports[`CDropdown customize 1`] = `
 exports[`CDropdown example 1`] = `
 <div>
   <div
-    class="btn-group"
+    class="dropdown"
   >
     <button
       aria-expanded="false"
@@ -68,7 +68,7 @@ exports[`CDropdown example 1`] = `
 exports[`loads and displays CDropdown component 1`] = `
 <div>
   <div
-    class="btn-group"
+    class="dropdown"
   >
     Test
   </div>

package/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CDropdownMenu customize 1`] = `
 <div>
   <div
-    class="btn-group"
+    class="dropdown"
   >
     <div
       class="dropdown-menu show bazinga"

package/src/components/focus-trap/__tests__/CFocusTrap.spec.tsx

@@ -6,7 +6,7 @@ import { CFocusTrap } from '../CFocusTrap'
 // Helper function to create a test component with focusable elements
 interface TestComponentProps {
   children?: React.ReactNode
-  [key: string]: any
+  [key: string]: unknown
 }
 
 const TestComponent = ({ children, ...props }: TestComponentProps) => (

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.
    */