@coreui/react-pro 4.2.0-beta.0 → 4.2.0-beta.1

package/README.md

@@ -43,7 +43,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.2.0-beta.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.2.0-beta.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

@@ -18,21 +18,32 @@ export interface CCalendarProps {
     endDate?: Date | string | null;
     /**
      * Sets the day of start week.
-     * 0 - Sunday, 1 - Monday, 2 - Tuesday, 3 - Wednesday, 4 - Thursday, 5 - Friday, 6 - Saturday, 7 - Sunday
+     * - 0 - Sunday,
+     * - 1 - Monday,
+     * - 2 - Tuesday,
+     * - 3 - Wednesday,
+     * - 4 - Thursday,
+     * - 5 - Friday,
+     * - 6 - Saturday,
+     * - 7 - Sunday
+     *
+     * @default 1
      */
     firstDayOfWeek?: number;
     /**
-     * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+     * Sets the default locale for components. If not set, it is inherited from the browser.
+     *
+     * @default 'default'
      */
     locale?: string;
     /**
      * Max selectable date.
      */
-    maxDate?: Date;
+    maxDate?: Date | string;
     /**
      * Min selectable date.
      */
-    minDate?: Date;
+    minDate?: Date | string;
     /**
      * Show arrows navigation.
      */
@@ -40,19 +51,19 @@ export interface CCalendarProps {
     /**
      * The custom next icon.
      */
-    nextIcon?: ReactNode;
+    navNextIcon?: ReactNode;
     /**
      * The custom next double icon.
      */
-    nextDoubleIcon?: ReactNode;
+    navNextDoubleIcon?: ReactNode;
     /**
      * The custom prev icon.
      */
-    prevIcon?: ReactNode;
+    navPrevIcon?: ReactNode;
     /**
      * The custom prev double icon.
      */
-    prevDoubleIcon?: ReactNode;
+    navPrevDoubleIcon?: ReactNode;
     /**
      * Allow range selection.
      */
@@ -66,9 +77,11 @@ export interface CCalendarProps {
      */
     startDate?: Date | string | null;
     /**
-     * Set length of day name.
+     * Set length or format of day name.
+     *
+     * @default 2
      */
-    weekdayLength?: number;
+    weekdayFormat?: number | 'long' | 'narrow' | 'short';
     /**
      * Callback fired when the user hovers over the calendar cell.
      */
@@ -85,5 +98,9 @@ export interface CCalendarProps {
      * Callback fired when the end date changed.
      */
     onEndDateChange?: (date: Date | null) => void;
+    /**
+     * Callback fired when the view type of calendar changed.
+     */
+    onViewChanged?: (view: string) => void;
 }
 export declare const CCalendar: React.ForwardRefExoticComponent<CCalendarProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -10,7 +10,7 @@ export declare const getMonthDetails: (year: number, month: number, firstDayOfWe
     date: Date;
     month: string;
 }[][];
-export declare const isDisabled: (date: Date, min?: Date | undefined, max?: Date | undefined, dates?: Date[] | Date[][] | undefined) => boolean | undefined;
+export declare const isDisabled: (date: Date, min?: Date | null | undefined, max?: Date | null | undefined, dates?: Date[] | Date[][] | undefined) => boolean | undefined;
 export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean | null;
 export declare const isDateSelected: (date: Date, start: Date | null, end: Date | null) => boolean | null;
 export declare const isEndDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
@@ -18,3 +18,4 @@ export declare const isLastDayOfMonth: (date: Date) => boolean;
 export declare const isSameDateAs: (date: Date, date2: Date) => boolean;
 export declare const isStartDate: (date: Date, start: Date | null, end: Date | null) => boolean | null;
 export declare const isToday: (date: Date) => boolean;
+export declare const isValidDate: (date: string) => number | false;

package/dist/components/daterangepicker/CDateRangePicker.d.ts

@@ -1,27 +1,24 @@
 import React, { ReactNode } from 'react';
 import { CCalendarProps } from '../calendar/CCalendar';
-import { CPickerProps } from './../picker/CPicker';
+import { CPickerProps } from '../picker/CPicker';
+import { Colors } from '../Types';
 export interface CDateRangePickerProps extends Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant'>, Omit<CCalendarProps, 'onCalendarCellHover' | 'onCalendarDateChange'> {
     /**
      * The number of calendars that render on desktop devices.
      */
     calendars?: number;
     /**
-     * Enables selection cleaner element.
+     * A string of all className you want applied to the component.
      */
-    cleaner?: boolean;
-    /**
-     * Cleaner icon.
-     */
-    cleanerIcon?: ReactNode | boolean;
+    className?: string;
     /**
-     * Default input icon.
+     * Toggle visibility or set the content of the cleaner button.
      */
-    defaultIcon?: ReactNode | boolean;
+    cleaner?: boolean;
     /**
-     * Default icon between date input fields.
+     * Toggle visibility or set the content of the input indicator.
      */
-    infixIcon?: ReactNode | boolean;
+    indicator?: ReactNode | boolean;
     /**
      * Toggle the readonly state for the component.
      */
@@ -38,6 +35,24 @@ export interface CDateRangePickerProps extends Omit<CPickerProps, 'autoClose' |
      * 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';
+    /**
+     * Default icon or character character that separates two dates.
+     */
+    separator?: ReactNode | boolean;
     /**
      * Size the component small or large.
      */

package/dist/components/picker/CPicker.d.ts

@@ -1,10 +1,55 @@
 import React, { ReactNode } from 'react';
 import { CDropdownProps } from '../dropdown/CDropdown';
+import { Colors } from '../Types';
 export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
     /**
-     * Cancel button text.
+     * Toggle visibility or set the content of cancel button.
+     *
+     * @default 'Cancel'
      */
-    cancelButtonText?: ReactNode;
+    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';
+    /**
+     * 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 container type for the component.
      */
@@ -17,18 +62,14 @@ export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
      * Toggle visibility of footer element or set the content of footer.
      */
     footer?: boolean | ReactNode;
-    /**
-     * Ok button text
-     */
-    okButtonText?: ReactNode;
     /**
      * Callback fired when the cancel button has been clicked.
      */
-    onCancelClick?: () => void;
+    onCancel?: () => void;
     /**
-     * Callback fired when the ok button has been clicked.
+     * Callback fired when the confirm button has been clicked.
      */
-    onOkClick?: () => void;
+    onConfirm?: () => void;
     /**
      * The content of toggler.
      */

package/dist/components/timepicker/CTimePicker.d.ts

@@ -6,29 +6,25 @@ export interface CTimePickerProps extends Omit<CPickerProps, 'autoClose' | 'comp
      */
     className?: string;
     /**
-     * Enables selection cleaner element.
+     * Toggle visibility or set the content of the cleaner button.
      */
-    cleaner?: boolean;
+    cleaner?: ReactNode | boolean;
     /**
-     * Cleaner icon.
+     * Toggle visibility or set the content of the input indicator.
      */
-    cleanerIcon?: ReactNode | boolean;
-    /**
-     * Default input icon.
-     */
-    defaultIcon?: ReactNode | boolean;
+    indicator?: ReactNode | boolean;
     /**
      * Toggle the readonly state for the component.
      */
     inputReadOnly?: boolean;
     /**
-     * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+     * Sets the default locale for components. If not set, it is inherited from the browser.
      */
     locale?: string;
     /**
-     * Callback fired when the user hovers over the calendar cell.
+     * Callback fired when the time changed.
      */
-    onChange?: (timeString: string, localeTimeString: string, date: Date) => void;
+    onTimeChange?: (timeString: string, localeTimeString: string, date: Date) => void;
     /**
      * Specifies a short hint that is visible in the input.
      */
@@ -38,9 +34,9 @@ export interface CTimePickerProps extends Omit<CPickerProps, 'autoClose' | 'comp
      */
     size?: 'sm' | 'lg';
     /**
-     * Default value of the component
+     * Initial selected time.
      */
-    value?: Date | string | null;
+    time?: Date | string | null;
     /**
      * Set the time picker variant to a roll or select.
      */

package/dist/components/timepicker/CTimePicker.utils.d.ts

@@ -1,4 +1,17 @@
 export declare const convert12hTo24h: (abbr: 'am' | 'pm', hour: number) => number;
 export declare const convert24hTo12h: (hour: number) => number;
+export declare const convertTimeToDate: (time: Date | string | null | undefined) => Date | null;
 export declare const getAmPm: (date: Date, locale: string) => "am" | "pm";
+export declare const getListOfHours: (locale: string) => {
+    value: number;
+    label: string;
+}[];
+export declare const getMinutesOrSeconds: (locale: string) => {
+    value: number;
+    label: string;
+}[];
+export declare const getSelectedHour: (date: Date | null, locale: string) => number;
+export declare const getSelectedMinutes: (date: Date | null) => number;
+export declare const getSelectedSeconds: (date: Date | null) => number;
 export declare const isAmPm: (locale: string) => boolean;
+export declare const isValidTime: (time: string) => number | false;