@coreui/react-pro 4.13.1 → 5.0.0-alpha.1

package/README.md

@@ -42,7 +42,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.13.1.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v5.0.0-alpha.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

package/dist/components/calendar/CCalendar.d.ts

@@ -3,7 +3,7 @@ export interface CCalendarProps {
     /**
      * Default date of the component
      */
-    calendarDate?: Date | string;
+    calendarDate?: Date | string | null;
     /**
      * The number of calendars that render on desktop devices.
      */
@@ -80,6 +80,10 @@ export interface CCalendarProps {
      * @since 4.3.0
      */
     navYearFirst?: boolean;
+    /**
+     * Allow range selection.
+     */
+    range?: boolean;
     /**
      * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
      *
@@ -93,13 +97,21 @@ export interface CCalendarProps {
      */
     showAdjacementDays?: boolean;
     /**
-     * Allow range selection.
+     * Set whether to display week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
      */
-    range?: boolean;
+    showWeekNumber?: boolean;
     /**
      * Toggle select mode between start and end date.
      */
     selectEndDate?: boolean;
+    /**
+     * Specify the type of date selection as day, week, month, or year.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    selectionType?: 'day' | 'week' | 'month' | 'year';
     /**
      * Initial selected date.
      */
@@ -110,22 +122,28 @@ export interface CCalendarProps {
      * @default 2
      */
     weekdayFormat?: number | 'long' | 'narrow' | 'short' | ((date: Date) => string | number);
+    /**
+     * Label displayed over week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    weekNumbersLabel?: string;
     /**
      * Callback fired when the calendar date changed.
      */
-    onCalendarDateChange?: (date: Date) => void;
+    onCalendarDateChange?: (date: Date | string) => void;
     /**
      * Callback fired when the user hovers over the calendar cell.
      */
-    onDayHover?: (date: Date | null) => void;
+    onDateHover?: (date: Date | string | null) => void;
     /**
      * Callback fired when the start date changed.
      */
-    onStartDateChange?: (date: Date | null, formatedDate?: string | undefined) => void;
+    onStartDateChange?: (date: Date | string | null, formatedDate?: string | undefined) => void;
     /**
      * Callback fired when the end date changed.
      */
-    onEndDateChange?: (date: Date | null, formatedDate?: string | undefined) => void;
+    onEndDateChange?: (date: Date | string | null, formatedDate?: string | undefined) => void;
     /**
      * Callback fired when the selection type changed.
      */

package/dist/components/calendar/utils.d.ts

@@ -1,15 +1,24 @@
+export declare const convertIsoWeekToDate: (isoWeek: string) => Date;
+export declare const convertToDateObject: (date: Date | string | null, selectionType?: 'day' | 'week' | 'month' | 'year') => Date;
 export declare const convertToLocalDate: (d: Date, locale: string, options?: {}) => string;
 export declare const convertToLocalTime: (d: Date, locale: string, options?: {}) => string;
 export declare const createGroupsInArray: <T>(arr: T[], numberOfGroups: number) => T[][];
+export declare const getCalendarDate: (calendarDate: Date, order: number, view: 'days' | 'months' | 'years') => Date;
 export declare const getCurrentYear: () => number;
 export declare const getCurrentMonth: () => number;
+export declare const getDateBySelectionType: (date: Date | null, selectionType: 'day' | 'week' | 'month' | 'year') => string | Date | null;
 export declare const getMonthName: (month: number, locale: string) => string;
 export declare const getMonthsNames: (locale: string) => string[];
 export declare const getYears: (year: number) => number[];
+export declare const getDayNumber: (date: Date) => number;
+export declare const getWeekNumber: (date: Date) => number;
 export declare const getMonthDetails: (year: number, month: number, firstDayOfWeek: number) => {
-    date: Date;
-    month: string;
-}[][];
+    weekNumber?: number | undefined;
+    days: {
+        date: Date;
+        month: string;
+    }[];
+}[];
 export declare const isDisableDateInRange: (startDate?: Date | null, endDate?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => boolean;
 export declare const isDateDisabled: (date: Date, min?: Date | null, max?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => boolean | undefined;
 export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean | null;

package/dist/components/close-button/CCloseButton.d.ts

@@ -4,12 +4,18 @@ export interface CCloseButtonProps extends HTMLAttributes<HTMLButtonElement> {
      * A string of all className you want applied to the base component.
      */
     className?: string;
+    /**
+     * Invert the default color.
+     */
+    dark?: boolean;
     /**
      * Toggle the disabled state for the component.
      */
     disabled?: boolean;
     /**
      * Change the default color to white.
+     *
+     * @deprecated 5.0.0
      */
     white?: boolean;
 }

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

@@ -0,0 +1,114 @@
+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/multi-select/types.d.ts

@@ -2,7 +2,7 @@ export type Option = {
     custom?: boolean;
     disabled?: boolean;
     selected?: boolean;
-    text: string;
+    label: string;
     value: number | string;
     [key: string]: number | string | any;
 };
@@ -13,7 +13,7 @@ export type OptionsGroup = {
 };
 export type SelectedOption = {
     disabled?: boolean;
-    text: string;
+    label: string;
     value: number | string;
     [key: string]: number | string | any;
 };

package/dist/components/multi-select/utils.d.ts

@@ -1,7 +1,7 @@
 import type { Option, OptionsGroup, SelectedOption } from './types';
-export declare const createOption: (text: string, options: (Option | OptionsGroup)[]) => {
+export declare const createOption: (label: string, options: (Option | OptionsGroup)[]) => {
     value: string;
-    text: string;
+    label: string;
     custom: boolean;
 }[];
 export declare const filterOptionsList: (search: string, _options: (Option | OptionsGroup)[]) => any[];

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

@@ -0,0 +1,133 @@
+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/CMultiSelectNativeSelect.d.ts

@@ -0,0 +1,7 @@
+import React, { InputHTMLAttributes } from 'react';
+import type { Option } from './types';
+export interface CMultiSelectNativeSelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'options'> {
+    options?: Option[];
+    value?: string | number | string[];
+}
+export declare const CMultiSelectNativeSelect: React.ForwardRefExoticComponent<CMultiSelectNativeSelectProps & React.RefAttributes<HTMLSelectElement>>;

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

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,15 @@
+export type Option = {
+    custom?: boolean;
+    disabled?: boolean;
+    label?: string;
+    options?: Option[];
+    selected?: boolean;
+    text: string;
+    value: number | string;
+    [key: string]: number | string | any;
+};
+export type SelectedOption = {
+    disabled?: boolean;
+    text: string;
+    value: number | string;
+};

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

@@ -0,0 +1,11 @@
+import type { Option, SelectedOption } from './types';
+export declare const createOption: (text: string, options: Option[]) => {
+    value: string;
+    text: string;
+    custom: boolean;
+}[];
+export declare const filterOptionsList: (search: string, _options: Option[]) => Option[];
+export declare const flattenArray: (options: Option[]) => Option[];
+export declare const getNextSibling: (elem: HTMLElement, selector?: string) => Element | null | undefined;
+export declare const getPreviousSibling: (elem: HTMLElement, selector?: string) => Element | null | undefined;
+export declare const selectOptions: (options: Option[], selected: SelectedOption[], deselected?: Option[]) => SelectedOption[];

package/dist/components/nav/CNav.d.ts

@@ -15,6 +15,6 @@ export interface CNavProps extends HTMLAttributes<HTMLDivElement | HTMLUListElem
     /**
      * Set the nav variant to tabs or pills.
      */
-    variant?: 'tabs' | 'pills' | 'underline';
+    variant?: 'pills' | 'tabs' | 'underline';
 }
 export declare const CNav: React.ForwardRefExoticComponent<CNavProps & React.RefAttributes<HTMLDivElement | HTMLOListElement | HTMLUListElement>>;

package/dist/components/navbar/CNavbar.d.ts

@@ -12,7 +12,7 @@ export interface CNavbarProps extends HTMLAttributes<HTMLDivElement> {
      */
     color?: Colors;
     /**
-     * Sets if the color of text should be colored for a light or dark dark background.
+     * Sets if the color of text should be colored for a light or dark background.
      */
     colorScheme?: 'dark' | 'light';
     /**

package/dist/components/offcanvas/COffcanvas.d.ts

@@ -8,6 +8,10 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> {
      * A string of all className you want applied to the base component.
      */
     className?: string;
+    /**
+     * Sets a darker color scheme.
+     */
+    dark?: boolean;
     /**
      * Closes the offcanvas when escape key is pressed.
      */