@coreui/react-pro 4.1.3 → 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.1.3.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

@@ -0,0 +1,106 @@
+import React, { ReactNode } from 'react';
+export interface CCalendarProps {
+    /**
+     * Default date of the component
+     */
+    calendarDate?: Date | string;
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+    /**
+     * Specify the list of dates that cannot be selected.
+     */
+    disabledDates?: Date[] | Date[][];
+    /**
+     * Initial selected to date (range).
+     */
+    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
+     *
+     * @default 1
+     */
+    firstDayOfWeek?: number;
+    /**
+     * Sets the default locale for components. If not set, it is inherited from the browser.
+     *
+     * @default 'default'
+     */
+    locale?: string;
+    /**
+     * Max selectable date.
+     */
+    maxDate?: Date | string;
+    /**
+     * Min selectable date.
+     */
+    minDate?: Date | string;
+    /**
+     * Show arrows navigation.
+     */
+    navigation?: boolean;
+    /**
+     * The custom next icon.
+     */
+    navNextIcon?: ReactNode;
+    /**
+     * The custom next double icon.
+     */
+    navNextDoubleIcon?: ReactNode;
+    /**
+     * The custom prev icon.
+     */
+    navPrevIcon?: ReactNode;
+    /**
+     * The custom prev double icon.
+     */
+    navPrevDoubleIcon?: ReactNode;
+    /**
+     * Allow range selection.
+     */
+    range?: boolean;
+    /**
+     * Toggle select mode between start and end date.
+     */
+    selectEndDate?: boolean;
+    /**
+     * Initial selected date.
+     */
+    startDate?: Date | string | null;
+    /**
+     * Set length or format of day name.
+     *
+     * @default 2
+     */
+    weekdayFormat?: number | 'long' | 'narrow' | 'short';
+    /**
+     * Callback fired when the user hovers over the calendar cell.
+     */
+    onCalendarCellHover?: (date: Date | null) => void;
+    /**
+     * Callback fired when the calendar date changed.
+     */
+    onCalendarDateChange?: (date: Date) => void;
+    /**
+     * Callback fired when the start date changed.
+     */
+    onStartDateChange?: (date: Date | null) => void;
+    /**
+     * 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

@@ -0,0 +1,21 @@
+export declare const convertToLocalDate: (d: Date, locale: string, options?: {}) => string;
+export declare const convertToLocalTime: (d: Date, locale: string, options?: {}) => string;
+export declare const createGroupsInArray: (arr: any[], numberOfGroups: number) => any[][];
+export declare const getCurrentYear: () => number;
+export declare const getCurrentMonth: () => number;
+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 getMonthDetails: (year: number, month: number, firstDayOfWeek: number) => {
+    date: Date;
+    month: string;
+}[][];
+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;
+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/datepicker/CDatePicker.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CDateRangePickerProps } from '../daterangepicker/CDateRangePicker';
+export interface CDatePickerProps extends Omit<CDateRangePickerProps, 'calendars' | 'endDate' | 'range' | 'onEndDateChange' | 'onStartDateChange' | 'ranges' | 'selectEndDate' | 'startDate'> {
+    /**
+     * Initial selected date.
+     */
+    date?: Date | string | null;
+    /**
+     * Callback fired when the date changed.
+     */
+    onDateChange?: (date: Date | null) => void;
+}
+export declare const CDatePicker: React.ForwardRefExoticComponent<CDatePickerProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;

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

@@ -0,0 +1,65 @@
+import React, { ReactNode } from 'react';
+import { CCalendarProps } from '../calendar/CCalendar';
+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;
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+    /**
+     * Toggle visibility or set the content of the cleaner button.
+     */
+    cleaner?: boolean;
+    /**
+     * 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';
+    /**
+     * 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;
+}
+export declare const CDateRangePicker: React.ForwardRefExoticComponent<CDateRangePickerProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;

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

@@ -1,4 +1,4 @@
-import React, { ElementType, HTMLAttributes } from 'react';
+import React, { ElementType, HTMLAttributes, RefObject } from 'react';
 import { Placements } from '../Types';
 export declare type Directions = 'start' | 'end';
 export declare type Breakpoints = {
@@ -22,6 +22,14 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
      * @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.
      */
@@ -68,6 +76,7 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
     visible?: boolean;
 }
 interface ContextProps extends CDropdownProps {
+    dropdownToggleRef: RefObject<any> | undefined;
     setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
 }
 export declare const CDropdownContext: React.Context<ContextProps>;

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

@@ -6,6 +6,10 @@ 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;
     /**
      * 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.
      */

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

@@ -0,0 +1,15 @@
+import { FC, HTMLAttributes } from 'react';
+import { Triggers } from '../Types';
+export interface CDropdownToggleCustomProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled?: 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 CDropdownToggleCustom: FC<CDropdownToggleCustomProps>;

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

@@ -0,0 +1,78 @@
+import React, { ReactNode } from 'react';
+import { CDropdownProps } from '../dropdown/CDropdown';
+import { Colors } from '../Types';
+export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
+    /**
+     * 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';
+    /**
+     * 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.
+     */
+    container?: 'dropdown' | 'inline';
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled?: boolean;
+    /**
+     * Toggle visibility of footer element or set the content of footer.
+     */
+    footer?: boolean | ReactNode;
+    /**
+     * Callback fired when the cancel button has been clicked.
+     */
+    onCancel?: () => void;
+    /**
+     * Callback fired when the confirm button has been clicked.
+     */
+    onConfirm?: () => void;
+    /**
+     * The content of toggler.
+     */
+    toggler?: ReactNode;
+}
+export declare const CPicker: React.ForwardRefExoticComponent<CPickerProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;

package/dist/components/smart-table/CSmartTableInterface.d.ts

@@ -49,8 +49,6 @@ export interface SorterValue {
 export interface TableFilter {
     lazy?: boolean;
     external?: boolean;
-    label?: string;
-    placeholder?: string;
 }
 export interface NoItemsView {
     noResults?: string;
@@ -63,14 +61,9 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      * @default 1
      */
     activePage?: number;
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className?: string;
     /**
      * When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set)
      * Cleaner resets `tableFilterValue`, `columnFilterValue`, `sorterValue`. If clean is possible it is clickable (`tabIndex="0"` `role="button"`, `color="danger"`), otherwise it is not clickable and transparent. Cleaner can be customized through the `cleaner` slot.
-     *
      */
     cleaner?: boolean;
     /**
@@ -264,8 +257,6 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      * When set, displays table filter above table, allowing filtering by specific column.
      *
      * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
-     * - placeholder (String) - Sets custom table filter placeholder.
-     * - label (String) - Sets custom table filter label.
      * - external (Boolean) - Disables automatic filtering inside component.
      * - lazy (Boolean) - Set to true to trigger filter updates only on change event.
      */

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

@@ -0,0 +1,45 @@
+import React, { ReactNode } from 'react';
+import { CPickerProps } from './../picker/CPicker';
+export interface CTimePickerProps extends Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant' | 'onChange'> {
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+    /**
+     * Toggle visibility or set the content of the cleaner button.
+     */
+    cleaner?: ReactNode | boolean;
+    /**
+     * Toggle visibility or set the content of the input indicator.
+     */
+    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 browser.
+     */
+    locale?: string;
+    /**
+     * Callback fired when the time changed.
+     */
+    onTimeChange?: (timeString: string, localeTimeString: string, date: Date) => void;
+    /**
+     * Specifies a short hint that is visible in the input.
+     */
+    placeholder?: string;
+    /**
+     * Size the component small or large.
+     */
+    size?: 'sm' | 'lg';
+    /**
+     * Initial selected time.
+     */
+    time?: Date | string | null;
+    /**
+     * Set the time picker variant to a roll or select.
+     */
+    variant?: 'roll' | 'select';
+}
+export declare const CTimePicker: React.ForwardRefExoticComponent<CTimePickerProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface Element {
+    value: number | string;
+    label: number | string;
+}
+export interface CTimePickerRollColProps {
+    elements: Element[];
+    onClick?: (value: number | string) => void;
+    selected?: number | string | null;
+}
+export declare const CTimePickerRollCol: React.ForwardRefExoticComponent<CTimePickerRollColProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import { CBreadcrumbItem } from './components/breadcrumb/CBreadcrumbItem';
 import { CButton } from './components/button/CButton';
 import { CButtonGroup } from './components/button-group/CButtonGroup';
 import { CButtonToolbar } from './components/button-group/CButtonToolbar';
+import { CCalendar } from './components/calendar/CCalendar';
 import { CCallout } from './components/callout/CCallout';
 import { CCard } from './components/card/CCard';
 import { CCardBody } from './components/card/CCardBody';
@@ -32,6 +33,8 @@ import { CCarouselCaption } from './components/carousel/CCarouselCaption';
 import { CCarouselItem } from './components/carousel/CCarouselItem';
 import { CCollapse } from './components/collapse/CCollapse';
 import { CCloseButton } from './components/close-button/CCloseButton';
+import { CDatePicker } from './components/datepicker/CDatePicker';
+import { CDateRangePicker } from './components/daterangepicker/CDateRangePicker';
 import { CDropdown } from './components/dropdown/CDropdown';
 import { CDropdownDivider } from './components/dropdown/CDropdownDivider';
 import { CDropdownHeader } from './components/dropdown/CDropdownHeader';
@@ -115,11 +118,12 @@ import { CTableHeaderCell } from './components/table/CTableHeaderCell';
 import { CTableRow } from './components/table/CTableRow';
 import { CTabContent } from './components/tabs/CTabContent';
 import { CTabPane } from './components/tabs/CTabPane';
+import { CTimePicker } from './components/timepicker/CTimePicker';
 import { CToast } from './components/toast/CToast';
 import { CToastBody } from './components/toast/CToastBody';
 import { CToastClose } from './components/toast/CToastClose';
 import { CToastHeader } from './components/toast/CToastHeader';
 import { CToaster } from './components/toast/CToaster';
 import { CTooltip } from './components/tooltip/CTooltip';
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBadge, CBackdrop, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCollapse, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CCol, CContainer, CRow, CFooter, CCardGroup, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CImage, CInputGroup, CInputGroupText, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CSmartPagination, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav, CSmartTable, CSpinner, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTabContent, CTabPane, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBadge, CBackdrop, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCalendar, CCallout, CCard, CCardBody, CCardFooter, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCollapse, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CCol, CContainer, CRow, CFooter, CCardGroup, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CImage, CInputGroup, CInputGroupText, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CSmartPagination, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav, CSmartTable, CSpinner, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTabContent, CTabPane, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, };
 export * from './components/';