@coreui/react-pro 5.0.0-alpha.3 → 5.0.0-beta.0

package/dist/components/date-range-picker/CDateRangePicker copy.d.ts

@@ -1,114 +0,0 @@
-import React, { ReactNode } from 'react';
-import { CCalendarProps } from '../calendar/CCalendar';
-import { CFormControlWrapperProps } from '../form/CFormControlWrapper';
-import { CPickerProps } from '../picker/CPicker';
-import { Colors } from '../../types';
-export interface CDateRangePickerProps extends Omit<CFormControlWrapperProps, 'floatingLabel'>, Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant'>, Omit<CCalendarProps, 'onCalendarCellHover' | 'onCalendarDateChange'> {
-    /**
-     * The number of calendars that render on desktop devices.
-     */
-    calendars?: number;
-    /**
-     * A string of all className you want applied to the component.
-     */
-    className?: string;
-    /**
-     * If true the dropdown will be immediately closed after submitting the full date.
-     *
-     * @since 4.8.0
-     */
-    closeOnSelect?: boolean;
-    /**
-     * Toggle visibility or set the content of the cleaner button.
-     */
-    cleaner?: boolean;
-    /**
-     * Set date format.
-     * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
-     */
-    format?: string;
-    /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-     *
-     * The name attributes for input elements are generated based on the `id` property:
-     * - \{id\}-start-date
-     * - \{id\}-end-date
-     */
-    id?: string;
-    /**
-     * Toggle visibility or set the content of the input indicator.
-     */
-    indicator?: ReactNode | boolean;
-    /**
-     * Toggle the readonly state for the component.
-     */
-    inputReadOnly?: boolean;
-    /**
-     * Specifies short hints that are visible in start date and end date inputs.
-     */
-    placeholder?: string | string[];
-    /**
-     * @ignore
-     */
-    range?: boolean;
-    /**
-     * Predefined date ranges the user can select from.
-     */
-    ranges?: object;
-    /**
-     * Sets the color context of the cancel button to one of CoreUI’s themed colors.
-     *
-     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-     */
-    rangesButtonsColor?: Colors;
-    /**
-     * Size the ranges button small or large.
-     */
-    rangesButtonsSize?: 'sm' | 'lg';
-    /**
-     * Set the ranges button variant to an outlined button or a ghost button.
-     */
-    rangesButtonsVariant?: 'outline' | 'ghost';
-    /**
-     * When present, it specifies that date must be filled out before submitting the form.
-     *
-     * @since 4.10.0
-     */
-    required?: boolean;
-    /**
-     * Default icon or character character that separates two dates.
-     */
-    separator?: ReactNode | boolean;
-    /**
-     * Size the component small or large.
-     */
-    size?: 'sm' | 'lg';
-    /**
-     * Provide an additional time selection by adding select boxes to choose times.
-     */
-    timepicker?: boolean;
-    /**
-     * Toggle visibility or set the content of today button.
-     *
-     * @default 'Today'
-     */
-    todayButton?: boolean | ReactNode;
-    /**
-     * Sets the color context of the today button to one of CoreUI’s themed colors.
-     *
-     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-     * @default 'primary'
-     */
-    todayButtonColor?: Colors;
-    /**
-     * Size the today button small or large.
-     *
-     * @default 'sm'
-     */
-    todayButtonSize?: 'sm' | 'lg';
-    /**
-     * Set the today button variant to an outlined button or a ghost button.
-     */
-    todayButtonVariant?: 'outline' | 'ghost';
-}
-export declare const CDateRangePicker: React.ForwardRefExoticComponent<CDateRangePickerProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;

package/dist/components/date-range-picker/CDateRangePicker.d.ts

@@ -1,162 +0,0 @@
-import React, { ReactNode } from 'react';
-import { CCalendarProps } from '../calendar/CCalendar';
-import { CFormControlWrapperProps } from '../form/CFormControlWrapper';
-import { CPickerProps } from '../picker/CPicker';
-import { Colors } from '../../types';
-export interface CDateRangePickerProps extends Omit<CFormControlWrapperProps, 'floatingLabel'>, Omit<CPickerProps, 'placeholder'>, Omit<CCalendarProps, 'onDayHover' | 'onCalendarDateChange'> {
-    /**
-     * The number of calendars that render on desktop devices.
-     */
-    calendars?: number;
-    /**
-     * Toggle visibility or set the content of cancel button.
-     *
-     * @default 'Cancel'
-     */
-    cancelButton?: boolean | ReactNode;
-    /**
-     * Sets the color context of the cancel button to one of CoreUI’s themed colors.
-     *
-     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-     * @default 'primary'
-     */
-    cancelButtonColor?: Colors;
-    /**
-     * Size the cancel button small or large.
-     *
-     * @default 'sm'
-     */
-    cancelButtonSize?: 'sm' | 'lg';
-    /**
-     * Set the cancel button variant to an outlined button or a ghost button.
-     *
-     * @default 'ghost'
-     */
-    cancelButtonVariant?: 'outline' | 'ghost';
-    /**
-     * A string of all className you want applied to the component.
-     */
-    className?: string;
-    /**
-     * If true the dropdown will be immediately closed after submitting the full date.
-     *
-     * @since 4.8.0
-     */
-    closeOnSelect?: boolean;
-    /**
-     * Toggle visibility or set the content of the cleaner button.
-     */
-    cleaner?: boolean;
-    /**
-     * Toggle visibility or set the content of confirm button.
-     *
-     * @default 'OK'
-     */
-    confirmButton?: boolean | ReactNode;
-    /**
-     * Sets the color context of the confirm button to one of CoreUI’s themed colors.
-     *
-     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-     * @default 'primary'
-     */
-    confirmButtonColor?: Colors;
-    /**
-     * Size the confirm button small or large.
-     *
-     * @default 'sm'
-     */
-    confirmButtonSize?: 'sm' | 'lg';
-    /**
-     * Set the confirm button variant to an outlined button or a ghost button.
-     */
-    confirmButtonVariant?: 'outline' | 'ghost';
-    /**
-     * Set date format.
-     * We use date-fns to format dates. Visit https://date-fns.org/v2.28.0/docs/format to check accepted patterns.
-     */
-    format?: string;
-    /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-     *
-     * The name attributes for input elements are generated based on the `id` property:
-     * - \{id\}-start-date
-     * - \{id\}-end-date
-     */
-    id?: string;
-    /**
-     * Toggle visibility or set the content of the input indicator.
-     */
-    indicator?: ReactNode | boolean;
-    /**
-     * Toggle the readonly state for the component.
-     */
-    inputReadOnly?: boolean;
-    /**
-     * Specifies short hints that are visible in start date and end date inputs.
-     */
-    placeholder?: string | string[];
-    /**
-     * @ignore
-     */
-    range?: boolean;
-    /**
-     * Predefined date ranges the user can select from.
-     */
-    ranges?: object;
-    /**
-     * Sets the color context of the cancel button to one of CoreUI’s themed colors.
-     *
-     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-     */
-    rangesButtonsColor?: Colors;
-    /**
-     * Size the ranges button small or large.
-     */
-    rangesButtonsSize?: 'sm' | 'lg';
-    /**
-     * Set the ranges button variant to an outlined button or a ghost button.
-     */
-    rangesButtonsVariant?: 'outline' | 'ghost';
-    /**
-     * When present, it specifies that date must be filled out before submitting the form.
-     *
-     * @since 4.10.0
-     */
-    required?: boolean;
-    /**
-     * Default icon or character character that separates two dates.
-     */
-    separator?: ReactNode | boolean;
-    /**
-     * Size the component small or large.
-     */
-    size?: 'sm' | 'lg';
-    /**
-     * Provide an additional time selection by adding select boxes to choose times.
-     */
-    timepicker?: boolean;
-    /**
-     * Toggle visibility or set the content of today button.
-     *
-     * @default 'Today'
-     */
-    todayButton?: boolean | ReactNode;
-    /**
-     * Sets the color context of the today button to one of CoreUI’s themed colors.
-     *
-     * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
-     * @default 'primary'
-     */
-    todayButtonColor?: Colors;
-    /**
-     * Size the today button small or large.
-     *
-     * @default 'sm'
-     */
-    todayButtonSize?: 'sm' | 'lg';
-    /**
-     * Set the today button variant to an outlined button or a ghost button.
-     */
-    todayButtonVariant?: 'outline' | 'ghost';
-}
-export declare const CDateRangePicker: React.ForwardRefExoticComponent<CDateRangePickerProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;

package/dist/components/dropdown/CDropdown.d.ts

@@ -1,97 +0,0 @@
-import React, { ElementType, HTMLAttributes, RefObject } from 'react';
-import type { Placements } from '../../types';
-export type Directions = 'start' | 'end';
-export type Breakpoints = {
-    xs: Directions;
-} | {
-    sm: Directions;
-} | {
-    md: Directions;
-} | {
-    lg: Directions;
-} | {
-    xl: Directions;
-} | {
-    xxl: Directions;
-};
-export type Alignments = Directions | Breakpoints;
-export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
-    /**
-     * Set aligment of dropdown menu.
-     *
-     * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
-     */
-    alignment?: Alignments;
-    /**
-     * 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.
-     */
-    autoClose?: 'inside' | 'outside' | boolean;
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className?: string;
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component?: string | ElementType;
-    /**
-     * Sets a darker color scheme to match a dark navbar.
-     */
-    dark?: boolean;
-    /**
-     * Sets a specified  direction and location of the dropdown menu.
-     */
-    direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart';
-    /**
-     * Offset of the dropdown menu relative to its target.
-     */
-    offset?: [number, number];
-    /**
-     * Callback fired when the component requests to be hidden.
-     *
-     * @since 4.9.0
-     */
-    onHide?: () => void;
-    /**
-     * Callback fired when the component requests to be shown.
-     */
-    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.
-     *
-     * @type 'auto' | '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`.
-     */
-    popper?: boolean;
-    /**
-     * Generates dropdown menu using createPortal.
-     *
-     * @since 4.8.0
-     */
-    portal?: boolean;
-    /**
-     * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
-     */
-    variant?: 'btn-group' | 'dropdown' | 'input-group' | 'nav-item';
-    /**
-     * Toggle the visibility of dropdown menu component.
-     */
-    visible?: boolean;
-}
-interface ContextProps extends CDropdownProps {
-    dropdownToggleRef: RefObject<any | undefined>;
-    dropdownMenuRef: RefObject<HTMLDivElement | HTMLUListElement | undefined>;
-    setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
-    portal: boolean;
-}
-export declare const getNextActiveElement: (list: HTMLElement[], activeElement: HTMLElement, shouldGetNext: boolean, isCycleAllowed: boolean) => HTMLElement;
-export declare const CDropdownContext: React.Context<ContextProps>;
-export declare const CDropdown: React.ForwardRefExoticComponent<CDropdownProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
-export {};

package/dist/components/dropdown/CDropdownToggle.d.ts

@@ -1,30 +0,0 @@
-import { FC } from 'react';
-import { CButtonProps } from '../button/CButton';
-import type { Triggers } from '../../types';
-export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
-    /**
-     * Enables pseudo element caret on toggler.
-     */
-    caret?: boolean;
-    /**
-     * Create a custom toggler which accepts any content.
-     */
-    custom?: boolean;
-    /**
-     * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
-     *
-     * @since v5.0.0-alpha.3
-     */
-    navLink?: boolean;
-    /**
-     * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
-     */
-    split?: boolean;
-    /**
-     * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
-     *
-     * @type 'hover' | 'focus' | 'click'
-     */
-    trigger?: Triggers | Triggers[];
-}
-export declare const CDropdownToggle: FC<CDropdownToggleProps>;

package/dist/components/multi-select-new/CMultiSelect.d.ts

@@ -1,133 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-import { CFormControlWrapperProps } from '../form/CFormControlWrapper';
-import type { Option } 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.
-     *
-     * @since 4.11.0-next.0
-     */
-    allowCreateOptions?: boolean;
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className?: string;
-    /**
-     * Enables selection cleaner element.
-     */
-    cleaner?: boolean;
-    /**
-     * Clear current search on selecting an item.
-     *
-     * @since 4.11.0-next.0
-     */
-    clearSearchOnSelect?: boolean;
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled?: boolean;
-    /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-     *
-     * The name and id attributes for the native select element are generated based on the `id` property:
-     * - <select id="\{id\}-multi-select" name="\{id\}-multi-select" />
-     */
-    id?: string;
-    /**
-     * When set, the options list will have a loading style: loading spinner and reduced opacity.
-     *
-     * @since 4.11.0-next.0
-     */
-    loading?: boolean;
-    /**
-     * It specifies that multiple options can be selected at once.
-     */
-    multiple?: boolean;
-    /**
-     * Execute a function when a user changes the selected option.
-     */
-    onChange?: (selected: Option[]) => void;
-    /**
-     * Execute a function when the filter value changed.
-     *
-     * @since 4.8.0
-     */
-    onFilterChange?: (value: string) => void;
-    /**
-     * List of option elements.
-     */
-    options: Option[];
-    /**
-     * Sets maxHeight of options list.
-     */
-    optionsMaxHeight?: number | string;
-    /**
-     * Sets option style.
-     */
-    optionsStyle?: 'checkbox' | 'text';
-    /**
-     * TODO:
-     *
-     * @since TODO: 4._.0
-     */
-    optionsTemplate?: (option: Option) => ReactNode;
-    /**
-     * TODO:
-     *
-     * @since TODO: 4._.0
-     */
-    optionsGroupsTemplate?: (option: Option) => ReactNode;
-    /**
-     * Specifies a short hint that is visible in the search input.
-     */
-    placeholder?: string;
-    /**
-     * @since XXXX
-     */
-    required?: boolean;
-    /**
-     * Enables search input element.
-     */
-    search?: boolean | 'external';
-    /**
-     * Sets the label for no results when filtering.
-     */
-    searchNoResultsLabel?: string | ReactNode;
-    /**
-     * Enables select all button.
-     */
-    selectAll?: boolean;
-    /**
-     * Sets the select all button label.
-     */
-    selectAllLabel?: string | ReactNode;
-    /**
-     * Sets the selection style.
-     */
-    selectionType?: 'counter' | 'tags' | 'text';
-    /**
-     * Sets the counter selection label.
-     */
-    selectionTypeCounterText?: string;
-    /**
-     * Size the component small or large.
-     */
-    size?: 'sm' | 'lg';
-    /**
-     * Enable virtual scroller for the options list.
-     *
-     * @since 4.8.0
-     */
-    virtualScroller?: boolean;
-    /**
-     * Toggle the visibility of multi select dropdown.
-     */
-    visible?: boolean;
-    /**
-     * Amount of visible items when virtualScroller is set to `true`.
-     *
-     * @since 4.8.0
-     */
-    visibleItems?: number;
-}
-export declare const CMultiSelectNew: React.ForwardRefExoticComponent<CMultiSelectProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/multi-select-new/CMultiSelectNew.d.ts

@@ -1,121 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-import { CFormControlWrapperProps } from './../form/CFormControlWrapper';
-import type { Option } 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.
-     *
-     * @since 4.11.0-next.0
-     */
-    allowCreateOptions?: boolean;
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className?: string;
-    /**
-     * Enables selection cleaner element.
-     */
-    cleaner?: boolean;
-    /**
-     * Clear current search on selecting an item.
-     *
-     * @since 4.11.0-next.0
-     */
-    clearSearchOnSelect?: boolean;
-    /**
-     * Toggle the disabled state for the component.
-     */
-    disabled?: boolean;
-    /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
-     *
-     * The name and id attributes for the native select element are generated based on the `id` property:
-     * - <select id="\{id\}-multi-select" name="\{id\}-multi-select" />
-     */
-    id?: string;
-    /**
-     * When set, the options list will have a loading style: loading spinner and reduced opacity.
-     *
-     * @since 4.11.0-next.0
-     */
-    loading?: boolean;
-    /**
-     * It specifies that multiple options can be selected at once.
-     */
-    multiple?: boolean;
-    /**
-     * Execute a function when a user changes the selected option.
-     */
-    onChange?: (selected: Option[]) => void;
-    /**
-     * Execute a function when the filter value changed.
-     *
-     * @since 4.8.0
-     */
-    onFilterChange?: (value: string) => void;
-    /**
-     * List of option elements.
-     */
-    options: Option[];
-    /**
-     * Sets maxHeight of options list.
-     */
-    optionsMaxHeight?: number | string;
-    /**
-     * Sets option style.
-     */
-    optionsStyle?: 'checkbox' | 'text';
-    /**
-     * Specifies a short hint that is visible in the search input.
-     */
-    placeholder?: string;
-    /**
-     * @since XXXX
-     */
-    required?: boolean;
-    /**
-     * Enables search input element.
-     */
-    search?: boolean | 'external';
-    /**
-     * Sets the label for no results when filtering.
-     */
-    searchNoResultsLabel?: string | ReactNode;
-    /**
-     * Enables select all button.
-     */
-    selectAll?: boolean;
-    /**
-     * Sets the select all button label.
-     */
-    selectAllLabel?: string | ReactNode;
-    /**
-     * Sets the selection style.
-     */
-    selectionType?: 'counter' | 'tags' | 'text';
-    /**
-     * Sets the counter selection label.
-     */
-    selectionTypeCounterText?: string;
-    /**
-     * Size the component small or large.
-     */
-    size?: 'sm' | 'lg';
-    /**
-     * Enable virtual scroller for the options list.
-     *
-     * @since 4.8.0
-     */
-    virtualScroller?: boolean;
-    /**
-     * Toggle the visibility of multi select dropdown.
-     */
-    visible?: boolean;
-    /**
-     * Amount of visible items when virtualScroller is set to `true`.
-     *
-     * @since 4.8.0
-     */
-    visibleItems?: number;
-}
-export declare const CMultiSelectNew: React.ForwardRefExoticComponent<CMultiSelectProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/multi-select-new/CMultiSelectOptions.d.ts

@@ -1,16 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-import type { Option } from './types';
-export interface CMultiSelectOptionsProps extends HTMLAttributes<HTMLDivElement> {
-    handleOptionOnClick?: (option: Option) => void;
-    loading?: boolean;
-    options: Option[];
-    optionsMaxHeight?: number | string;
-    optionsStyle?: 'checkbox' | 'text';
-    optionsTemplate?: (option: Option) => ReactNode;
-    optionsGroupsTemplate?: (option: Option) => ReactNode;
-    searchNoResultsLabel?: string | ReactNode;
-    selected: Option[];
-    virtualScroller?: boolean;
-    visibleItems?: number;
-}
-export declare const CMultiSelectOptions: React.ForwardRefExoticComponent<CMultiSelectOptionsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/multi-select-new/CMultiSelectSelection.d.ts

@@ -1,11 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import type { SelectedOption } from './types';
-export interface CMultiSelectSelectionProps extends HTMLAttributes<HTMLSpanElement> {
-    multiple?: boolean;
-    onRemove?: (option: SelectedOption) => void;
-    search?: boolean | 'external';
-    selected?: SelectedOption[];
-    selectionType?: 'counter' | 'tags' | 'text';
-    selectionTypeCounterText?: string;
-}
-export declare const CMultiSelectSelection: React.ForwardRefExoticComponent<CMultiSelectSelectionProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/multi-select-new/index.d.ts

@@ -1,2 +0,0 @@
-import { CMultiSelectNew } from './CMultiSelect';
-export { CMultiSelectNew };