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

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.2.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.2.0-beta.0.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,89 @@
+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
+     */
+    firstDayOfWeek?: number;
+    /**
+     * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+     */
+    locale?: string;
+    /**
+     * Max selectable date.
+     */
+    maxDate?: Date;
+    /**
+     * Min selectable date.
+     */
+    minDate?: Date;
+    /**
+     * Show arrows navigation.
+     */
+    navigation?: boolean;
+    /**
+     * The custom next icon.
+     */
+    nextIcon?: ReactNode;
+    /**
+     * The custom next double icon.
+     */
+    nextDoubleIcon?: ReactNode;
+    /**
+     * The custom prev icon.
+     */
+    prevIcon?: ReactNode;
+    /**
+     * The custom prev double icon.
+     */
+    prevDoubleIcon?: 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 of day name.
+     */
+    weekdayLength?: number;
+    /**
+     * 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;
+}
+export declare const CCalendar: React.ForwardRefExoticComponent<CCalendarProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,20 @@
+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 | undefined, max?: Date | 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;

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,50 @@
+import React, { ReactNode } from 'react';
+import { CCalendarProps } from '../calendar/CCalendar';
+import { CPickerProps } from './../picker/CPicker';
+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.
+     */
+    cleaner?: boolean;
+    /**
+     * Cleaner icon.
+     */
+    cleanerIcon?: ReactNode | boolean;
+    /**
+     * Default input icon.
+     */
+    defaultIcon?: ReactNode | boolean;
+    /**
+     * Default icon between date input fields.
+     */
+    infixIcon?: 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;
+    /**
+     * 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/modal/CModal.d.ts

@@ -52,6 +52,7 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
      * Remove animation to create modal that simply appear rather than fade in to view.
      */
     transition?: boolean;
+    unmountOnClose?: boolean;
     /**
      * Toggle the visibility of modal component.
      */

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

@@ -0,0 +1,37 @@
+import React, { ReactNode } from 'react';
+import { CDropdownProps } from '../dropdown/CDropdown';
+export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
+    /**
+     * Cancel button text.
+     */
+    cancelButtonText?: ReactNode;
+    /**
+     * 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;
+    /**
+     * Ok button text
+     */
+    okButtonText?: ReactNode;
+    /**
+     * Callback fired when the cancel button has been clicked.
+     */
+    onCancelClick?: () => void;
+    /**
+     * Callback fired when the ok button has been clicked.
+     */
+    onOkClick?: () => 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,49 @@
+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;
+    /**
+     * Enables selection cleaner element.
+     */
+    cleaner?: boolean;
+    /**
+     * Cleaner icon.
+     */
+    cleanerIcon?: ReactNode | boolean;
+    /**
+     * Default input icon.
+     */
+    defaultIcon?: 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.
+     */
+    locale?: string;
+    /**
+     * Callback fired when the user hovers over the calendar cell.
+     */
+    onChange?: (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';
+    /**
+     * Default value of the component
+     */
+    value?: 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,4 @@
+export declare const convert12hTo24h: (abbr: 'am' | 'pm', hour: number) => number;
+export declare const convert24hTo12h: (hour: number) => number;
+export declare const getAmPm: (date: Date, locale: string) => "am" | "pm";
+export declare const isAmPm: (locale: string) => boolean;

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/';