@coreui/react-pro 5.25.0 → 5.27.0

package/dist/cjs/src/components/chip-set/useChipSet.d.ts

@@ -0,0 +1,48 @@
+import React, { KeyboardEvent, ReactNode } from 'react';
+import { type CChipProps } from '../chip/CChip';
+export interface CChipSetItem extends Omit<CChipProps, 'value' | 'children'> {
+    /**
+     * The value that identifies the chip and tracks its selection.
+     */
+    value: string;
+    /**
+     * The chip content. Falls back to `value` when omitted.
+     */
+    label?: ReactNode;
+}
+export interface UseChipSetOptions {
+    ariaRemoveLabel?: string;
+    defaultSelected?: string[];
+    disabled?: boolean;
+    filter?: boolean;
+    removable?: boolean;
+    removeIcon?: ReactNode;
+    /**
+     * Move focus to a neighboring chip after one is removed. Containers that own a
+     * different focus target after removal (e.g. CChipInput refocuses its input)
+     * set this to `false`.
+     */
+    restoreFocusOnRemove?: boolean;
+    selectable?: boolean;
+    selected?: string[];
+    selectedIcon?: ReactNode;
+    selectionMode?: 'single' | 'multiple';
+    onRemoveChip?: (value: string) => void;
+    onSelectionChange?: (selected: string[]) => void;
+}
+/**
+ * The shared chip-set engine. Both `CChipSet` and `CChipInput` build on it — the
+ * React equivalent of the vanilla `ChipInput extends ChipSet`. It owns selection
+ * coordination (single/multiple, controlled-or-uncontrolled), roving focus, the
+ * focus-a-neighbor-after-removal behavior, and the per-chip prop injection.
+ * Existence of the chips stays with the caller (its children / value list).
+ */
+export declare const useChipSet: (options: UseChipSetOptions) => {
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    selectedValues: string[];
+    clearSelection: () => void;
+    getFocusableChips: () => HTMLElement[];
+    handleKeyDown: (event: KeyboardEvent<HTMLElement>) => boolean;
+    renderChips: (children: ReactNode) => ReactNode;
+    renderChipsFromData: (items: (string | CChipSetItem)[]) => ReactNode;
+};

package/dist/cjs/src/components/chip-set/utils.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import type { CChipProps } from '../chip/CChip';
+/**
+ * Resolves the value used to identify a chip in a `CChipSet`: its explicit
+ * `value` prop, its text children, or the render index as a last resort.
+ */
+export declare const resolveChipValue: (chip: ReactElement<CChipProps>, index: number) => string;

package/dist/cjs/{components → src/components}/close-button/CCloseButton.d.ts

@@ -1,5 +1,11 @@
 import React, { HTMLAttributes } from 'react';
 export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Sets the `aria-label` attribute of the close button.
+     *
+     * @default 'Close'
+     */
+    'aria-label'?: string;
     /**
      * A string of all className you want applied to the base component.
      */

package/dist/cjs/{components → src/components}/dropdown/CDropdownToggle.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { CButtonProps } from '../button/CButton';
 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.
      */

package/dist/cjs/{components → src/components}/form/CChipInput.d.ts

@@ -2,13 +2,17 @@ import React, { HTMLAttributes, ReactNode } from 'react';
 type ChipClassName = string | ((value: string) => string);
 export interface CChipInputProps extends Omit<HTMLAttributes<HTMLDivElement>, '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.
      */
@@ -21,6 +25,10 @@ export interface CChipInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
      * 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.
      */
@@ -73,6 +81,10 @@ export interface CChipInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
      * 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.
      */

package/dist/cjs/{components → src/components}/index.d.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/dist/{esm → cjs/src}/components/modal/CModalHeader.d.ts

@@ -1,5 +1,11 @@
 import React, { HTMLAttributes } from 'react';
 export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Sets the `aria-label` of the close button.
+     *
+     * @since 5.13.0
+     */
+    ariaCloseLabel?: string;
     /**
      * A string of all className you want applied to the base component.
      */

package/dist/cjs/{components → src/components}/multi-select/CMultiSelect.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
 import { CFormControlWrapperProps } from '../form/CFormControlWrapper';
-import type { Option, OptionsGroup, Search } from './types';
+import type { Option, OptionsGroup, Search, SelectionActions, SelectionState } from './types';
 export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'floatingClassName' | 'floatingLabel'>, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
      * Allow users to create options if they are not in the list of options.
@@ -20,6 +20,18 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
      * @since 5.19.0
      */
     ariaIndicatorLabel?: string;
+    /**
+     * Accessible label for the search input (when `search` is enabled).
+     *
+     * @since 5.26.0
+     */
+    ariaSearchLabel?: string;
+    /**
+     * Accessible label prefix for a tag's delete button (selection type `tags`). The selected option's label is appended, so screen readers announce e.g. "Remove Angular".
+     *
+     * @since 5.26.0
+     */
+    ariaTagDeleteLabel?: string;
     /**
      * A string of all className you want applied to the base component.
      */
@@ -44,6 +56,18 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
      * Toggle the disabled state for the component.
      */
     disabled?: boolean;
+    /**
+     * Render a custom dropdown header (the area above the options list), replacing the built-in select all button. Receives a `state` object (`{ selected, total, filtered, filteredSelected }`) and an `actions` object (`{ selectAll, deselectAll, selectFiltered, deselectFiltered }`) so you can wire your own controls. Renders independently of `selectAll`.
+     *
+     * @since 5.26.0
+     */
+    headerTemplate?: (state: SelectionState, actions: SelectionActions) => ReactNode;
+    /**
+     * Hide the dropdown header with the built-in select all button when a search filter leaves no matching options. Set to `false` to keep the select all button visible even when there are no results.
+     *
+     * @since 5.27.0
+     */
+    hideSelectAllOnSearchNoResults?: boolean;
     /**
      * Set the id attribute for the native select element.
      *
@@ -81,6 +105,12 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
      * The callback is fired when the Multi Select component requests to be hidden.
      */
     onHide?: () => void;
+    /**
+     * Execute a function when the user tries to select more options than allowed by `selectionLimit`.
+     *
+     * @since 5.26.0
+     */
+    onSelectionLimit?: (selectionLimit: number) => void;
     /**
      * The callback is fired when the Multi Select component requests to be shown.
      */
@@ -103,6 +133,18 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
      * @since 4.12.0
      */
     optionsTemplate?: (option: Option) => ReactNode;
+    /**
+     * Makes each options group label a toggle that selects or deselects all options in that group. With `optionsGroupsStyle="checkbox"` (and `multiple`) the label shows a tri-state checkbox indicator (`none` / `all` / `indeterminate`) reflecting the group's selection.
+     *
+     * @since 5.26.0
+     */
+    optionsGroupsSelectable?: boolean;
+    /**
+     * Sets the options group label style when `optionsGroupsSelectable` is enabled.
+     *
+     * @since 5.26.0
+     */
+    optionsGroupsStyle?: 'checkbox' | 'text';
     /**
      * Custom template for options groups.
      *
@@ -142,6 +184,18 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
      * Sets the label for no results when filtering.
      */
     searchNoResultsLabel?: string | ReactNode;
+    /**
+     * Sets the select all button label shown once everything is selected. The button is a toggle: it shows `selectAllLabel` (and selects all) until everything is selected, then shows `deselectAllLabel` (and deselects all).
+     *
+     * @since 5.26.0
+     */
+    deselectAllLabel?: string | ReactNode;
+    /**
+     * Sets the deselect filtered button label (selection type `selectAllMode="filtered"`).
+     *
+     * @since 5.26.0
+     */
+    deselectFilteredLabel?: string | ReactNode;
     /**
      * Enables select all button.
      */
@@ -150,6 +204,30 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
      * Sets the select all button label.
      */
     selectAllLabel?: string | ReactNode;
+    /**
+     * Determines what the select all button operates on: all options (`'all'`) or only the currently filtered (search-visible) options (`'filtered'`).
+     *
+     * @since 5.26.0
+     */
+    selectAllMode?: 'all' | 'filtered';
+    /**
+     * Sets the select all button style. With `'checkbox'` (and `multiple`), the button shows a tri-state checkbox indicator (`none` / `all` / `indeterminate`) and toggles between selecting and deselecting.
+     *
+     * @since 5.26.0
+     */
+    selectAllStyle?: 'checkbox' | 'text';
+    /**
+     * Sets the select filtered button label (used with `selectAllMode="filtered"`).
+     *
+     * @since 5.26.0
+     */
+    selectFilteredLabel?: string | ReactNode;
+    /**
+     * Sets the maximum number of options that can be selected. The select all button stays enabled and selects options up to the limit, then toggles to deselect all once the limit is reached. The `onSelectionLimit` callback fires when a user tries to select more options than allowed.
+     *
+     * @since 5.26.0
+     */
+    selectionLimit?: number;
     /**
      * Sets the selection style.
      */

package/dist/{esm → cjs/src}/components/multi-select/CMultiSelectOptions.d.ts

@@ -2,11 +2,14 @@ import React, { HTMLAttributes, ReactNode } from 'react';
 import type { Option, OptionsGroup } from './types';
 export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
     loading?: boolean;
+    onGroupOnClick?: (group: OptionsGroup) => void;
     onOptionOnClick?: (option: Option) => void;
     options: (Option | OptionsGroup)[];
     optionsMaxHeight?: number | string;
     optionsStyle?: 'checkbox' | 'text';
     optionsTemplate?: (option: Option) => ReactNode;
+    optionsGroupsSelectable?: boolean;
+    optionsGroupsStyle?: 'checkbox' | 'text';
     optionsGroupsTemplate?: (option: OptionsGroup) => ReactNode;
     searchNoResultsLabel?: string | ReactNode;
     selected: Option[];

package/dist/{esm → cjs/src}/components/multi-select/CMultiSelectSelection.d.ts

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 import type { Search, SelectedOption } from './types';
 export interface CMultiSelectSelectionProps extends HTMLAttributes<HTMLSpanElement> {
+    ariaTagDeleteLabel?: string;
     disabled?: boolean;
     multiple?: boolean;
     onRemove?: (option: SelectedOption) => void;

package/dist/cjs/{components → src/components}/multi-select/types.d.ts

@@ -3,13 +3,14 @@ export type Option = {
     disabled?: boolean;
     selected?: boolean;
     label: string;
+    options?: Option[];
     value: number | string;
-    [key: string]: number | string | any;
+    [key: string]: unknown;
 };
 export type OptionsGroup = {
     label: string;
     options?: Option[];
-    [key: string]: number | string | any;
+    [key: string]: unknown;
 };
 export type Search = boolean | 'external' | 'global' | {
     external?: boolean;
@@ -19,5 +20,17 @@ export type SelectedOption = {
     disabled?: boolean;
     label: string;
     value: number | string;
-    [key: string]: number | string | any;
+    [key: string]: unknown;
+};
+export type SelectionState = {
+    selected: number;
+    total: number;
+    filtered: number;
+    filteredSelected: number;
+};
+export type SelectionActions = {
+    selectAll: () => void;
+    deselectAll: () => void;
+    selectFiltered: () => void;
+    deselectFiltered: () => void;
 };

package/dist/{esm → cjs/src}/components/multi-select/utils.d.ts

@@ -4,7 +4,7 @@ export declare const createOption: (label: string, options: (Option | OptionsGro
     label: string;
     custom: boolean;
 }[];
-export declare const filterOptionsList: (search: string, _options: (Option | OptionsGroup)[]) => any[];
+export declare const filterOptionsList: (search: string, _options: (Option | OptionsGroup)[]) => (Option | OptionsGroup)[];
 export declare const flattenOptionsArray: (options: (Option | OptionsGroup)[], keepGroupLabel?: boolean) => (Option | OptionsGroup)[];
 export declare const getOptionsList: (container: HTMLElement) => HTMLElement[];
 export declare const isExternalSearch: (search: Search) => boolean;

package/dist/{esm → cjs/src}/components/nav/CNavGroup.d.ts

@@ -15,6 +15,14 @@ export interface CNavGroupProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
      * Make nav group more compact by cutting all `padding` in half.
      */
     compact?: boolean;
+    /**
+     * Callback fired when the user toggles the group. Receives the requested visibility. Provide
+     * it together with `visible` for controlled mode—update `visible` from here, or ignore the
+     * change to keep the group as is.
+     *
+     * @since 5.12.0
+     */
+    onVisibleChange?: (visible: boolean) => void;
     /**
      * Set group toggler label.
      */
@@ -22,12 +30,9 @@ export interface CNavGroupProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
         visible: boolean;
     }) => ReactNode);
     /**
-     * Show nav group items.
+     * Show nav group items. Acts as the initial state when used on its own, or as the controlled
+     * value when paired with `onVisibleChange`.
      */
     visible?: boolean;
-    /**
-     * @ignore
-     */
-    idx?: string;
 }
 export declare const CNavGroup: PolymorphicRefForwardingComponent<'li', CNavGroupProps>;

package/dist/cjs/src/components/nav/CNavGroupContext.d.ts

@@ -0,0 +1,25 @@
+import { Dispatch, SetStateAction } from 'react';
+export interface CNavGroupContextValue {
+    /**
+     * The id of the currently open child group at this level, or `undefined` when none is open.
+     * Each `CNavGroup` keeps its own accordion state, so collapsing an ancestor never discards the
+     * open/closed state of its descendants—reopening the ancestor restores them.
+     */
+    activeId: string | undefined;
+    /**
+     * Open (or, with `undefined`, close) a child group at this level. Opening a group collapses its
+     * siblings, mirroring the vanilla `groupsAutoCollapse` behavior.
+     */
+    setActiveId: Dispatch<SetStateAction<string | undefined>>;
+    /**
+     * Open the whole branch from the parent group up to the root. Used by an active nav link to
+     * reveal every ancestor group.
+     */
+    openBranch: () => void;
+}
+/**
+ * Provides the per-level accordion state to the direct children (`CNavGroup`, `CNavLink`) of a
+ * `CSidebarNav` or a parent `CNavGroup`. `null` means the consumer is rendered outside a sidebar
+ * navigation, in which case groups fall back to their own local state.
+ */
+export declare const CNavGroupContext: import("react").Context<CNavGroupContextValue | null>;

package/dist/{esm → cjs/src}/components/nav/CNavLink.d.ts

@@ -1,10 +1,6 @@
 import { CLinkProps } from '../link/CLink';
 import { PolymorphicRefForwardingComponent } from '../../helpers';
-export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
-    /**
-     * @ignore
-     */
-    idx?: string;
+export interface CNavLinkProps extends CLinkProps {
     /**
      * @ignore
      */

package/dist/cjs/{components → src/components}/range-slider/CRangeSlider.d.ts

@@ -1,6 +1,12 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
 import { type Label } from './types';
 export interface CRangeSliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Accessible labels (`aria-label`) for the slider handles, one per thumb, applied only to multi-thumb sliders to distinguish otherwise identically-announced handles. When omitted, two-thumb sliders default to `"Minimum value"` / `"Maximum value"` and sliders with more thumbs to `"Value {n}"`.
+     *
+     * @since 5.27.0
+     */
+    ariaLabels?: string[];
     /**
      * Customize the styling of your React Range Slider by adding a custom `className`.
      * This allows you to apply additional CSS classes for enhanced design flexibility and integration with your existing stylesheets.

package/dist/{esm → cjs/src}/components/rating/CRating.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, JSX } from 'react';
 type Icon = {
     [key: number]: JSX.Element;
 };
@@ -11,6 +11,12 @@ export interface CRatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCh
      * Enables the clearing upon clicking the selected item again.
      */
     allowClear?: boolean;
+    /**
+     * A function that returns the accessible label (`aria-label`) for each rating item's radio input. Receives the item's value and the total item count.
+     *
+     * @since 5.27.0
+     */
+    ariaLabel?: (value: number, itemCount: number) => string;
     /**
      * A string of all className you want applied to the component.
      */

package/dist/cjs/{components → src/components}/smart-table/CSmartTableHead.d.ts

@@ -8,7 +8,7 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
     columnFilterState?: ColumnFilterValue;
     columnSorter?: boolean | Sorter;
     columns: (Column | string)[];
-    handleOnCustomFilterChange?: (key: string, value: any) => void;
+    handleOnCustomFilterChange?: (key: string, value: string | number) => void;
     handleFilterOnChange?: (key: string, value: string) => void;
     handleFilterOnInput?: (key: string, value: string) => void;
     handleSelectAllChecked?: () => void;

package/dist/{esm → cjs/src}/components/smart-table/types.d.ts

@@ -1,17 +1,17 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { CTableDataCellProps } from '../table/CTableDataCell';
 import { CTableHeaderCellProps } from '../table/CTableHeaderCell';
 import { CTableRowProps } from '../table/CTableRow';
 export type Column = {
     children?: Column[];
-    filter?: boolean | ((values: any[], onChange: (value: any) => void, state: ColumnFilterValue | undefined) => ReactNode);
+    filter?: boolean | ((values: unknown[], onChange: (value: string | number) => void, state: string | number | undefined) => ReactNode);
     group?: string;
     key: string;
     label?: string;
-    sorter?: boolean | ((a: any, b: any) => number);
-    _style?: any;
+    sorter?: boolean | ((a: Item, b: Item) => number);
+    _style?: CSSProperties;
     _props?: CTableHeaderCellProps;
-    _colStyle?: any;
+    _colStyle?: CSSProperties;
     _colProps?: CTableDataCellProps;
 };
 export type ColumnFilter = {
@@ -19,7 +19,7 @@ export type ColumnFilter = {
     external?: boolean;
 };
 export type ColumnFilterValue = {
-    [key: string]: any;
+    [key: string]: string | number | ((value: unknown) => boolean);
 };
 export type FooterItem = {
     label?: string;
@@ -32,12 +32,13 @@ export type Group = {
     group?: string;
     key: string;
     label?: string;
-    _style?: any;
+    _style?: CSSProperties;
     _props?: CTableHeaderCellProps;
 };
 export type Item = {
-    [key: string]: number | string | any;
-    _cellProps?: any;
+    [key: string]: unknown;
+    _cellProps?: Record<string, CTableDataCellProps | undefined>;
+    _cellStyle?: Record<string, CSSProperties | undefined>;
     _props?: CTableRowProps;
     _selectable?: boolean;
     _selected?: boolean;
@@ -54,7 +55,7 @@ export type Sorter = {
     resetable?: boolean;
 };
 export type ScopedColumns = {
-    [key: string]: any;
+    [key: string]: ((item: Item, index: number) => ReactNode) | undefined;
     details?: (a: Item, b: number) => ReactNode;
 };
 export type SorterValue = {