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

package/dist/components/index.d.ts

@@ -1 +1,42 @@
+export * from './accordion';
+export * from './alert';
+export * from './avatar';
+export * from './backdrop';
+export * from './badge';
+export * from './breadcrumb';
+export * from './button';
+export * from './button-group';
+export * from './callout';
+export * from './card';
+export * from './carousel';
+export * from './close-button';
+export * from './collapse';
+export * from './date-picker';
+export * from './date-range-picker';
+export * from './dropdown';
+export * from './footer';
+export * from './form';
+export * from './grid';
+export * from './header';
+export * from './image';
+export * from './link';
+export * from './list-group';
+export * from './loading-button';
+export * from './modal';
+export * from './multi-select';
+export * from './nav';
+export * from './navbar';
+export * from './offcanvas';
+export * from './pagination';
+export * from './placeholder';
+export * from './progress';
+export * from './popover';
+export * from './smart-table';
+export * from './sidebar';
+export * from './spinner';
+export * from './table';
+export * from './tabs';
+export * from './time-picker';
+export * from './toast';
+export * from './tooltip';
 export * from './widgets';

package/dist/components/link/index.d.ts

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

package/dist/components/list-group/index.d.ts

@@ -0,0 +1,3 @@
+import { CListGroup } from './CListGroup';
+import { CListGroupItem } from './CListGroupItem';
+export { CListGroup, CListGroupItem };

package/dist/components/loading-button/index.d.ts

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

package/dist/components/modal/CModal.d.ts

@@ -52,6 +52,9 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
      * Remove animation to create modal that simply appear rather than fade in to view.
      */
     transition?: boolean;
+    /**
+     * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
+     */
     unmountOnClose?: boolean;
     /**
      * Toggle the visibility of modal component.

package/dist/components/modal/index.d.ts

@@ -0,0 +1,8 @@
+import { CModal } from './CModal';
+import { CModalBody } from './CModalBody';
+import { CModalContent } from './CModalContent';
+import { CModalDialog } from './CModalDialog';
+import { CModalFooter } from './CModalFooter';
+import { CModalHeader } from './CModalHeader';
+import { CModalTitle } from './CModalTitle';
+export { CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle };

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

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

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

@@ -0,0 +1,7 @@
+import { CNav } from './CNav';
+import { CNavGroupItems } from './CNavGroupItems';
+import { CNavGroup } from './CNavGroup';
+import { CNavItem } from './CNavItem';
+import { CNavLink } from './CNavLink';
+import { CNavTitle } from './CNavTitle';
+export { CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle };

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

@@ -0,0 +1,6 @@
+import { CNavbar } from './CNavbar';
+import { CNavbarBrand } from './CNavbarBrand';
+import { CNavbarNav } from './CNavbarNav';
+import { CNavbarText } from './CNavbarText';
+import { CNavbarToggler } from './CNavbarToggler';
+export { CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler };

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

@@ -0,0 +1,5 @@
+import { COffcanvas } from './COffcanvas';
+import { COffcanvasBody } from './COffcanvasBody';
+import { COffcanvasHeader } from './COffcanvasHeader';
+import { COffcanvasTitle } from './COffcanvasTitle';
+export { COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle };

package/dist/components/pagination/index.d.ts

@@ -0,0 +1,4 @@
+import { CPagination } from './CPagination';
+import { CPaginationItem } from './CPaginationItem';
+import { CSmartPagination } from './CSmartPagination';
+export { CPagination, CPaginationItem, CSmartPagination };

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.
      */
@@ -18,17 +63,17 @@ export interface CPickerProps extends Omit<CDropdownProps, 'variant'> {
      */
     footer?: boolean | ReactNode;
     /**
-     * Ok button text
+     * Add custom elements to the footer.
      */
-    okButtonText?: ReactNode;
+    footerContent?: 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/placeholder/index.d.ts

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

package/dist/components/popover/CPopover.d.ts

@@ -1,7 +1,7 @@
-import { FC, ReactElement, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { Triggers } from '../Types';
 export interface CPopoverProps {
-    children: ReactElement;
+    children: any;
     /**
      * Content node for your component.
      */

package/dist/components/popover/index.d.ts

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

package/dist/components/progress/index.d.ts

@@ -0,0 +1,3 @@
+import { CProgress } from './CProgress';
+import { CProgressBar } from './CProgressBar';
+export { CProgress, CProgressBar };

package/dist/components/sidebar/index.d.ts

@@ -0,0 +1,7 @@
+import { CSidebar } from './CSidebar';
+import { CSidebarBrand } from './CSidebarBrand';
+import { CSidebarFooter } from './CSidebarFooter';
+import { CSidebarToggler } from './CSidebarToggler';
+import { CSidebarHeader } from './CSidebarHeader';
+import { CSidebarNav } from './CSidebarNav';
+export { CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav };

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

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

package/dist/components/spinner/index.d.ts

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

package/dist/components/table/index.d.ts

@@ -0,0 +1,9 @@
+import { CTable } from './CTable';
+import { CTableBody } from './CTableBody';
+import { CTableCaption } from './CTableCaption';
+import { CTableDataCell } from './CTableDataCell';
+import { CTableFoot } from './CTableFoot';
+import { CTableHead } from './CTableHead';
+import { CTableHeaderCell } from './CTableHeaderCell';
+import { CTableRow } from './CTableRow';
+export { CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, };

package/dist/components/tabs/index.d.ts

@@ -0,0 +1,3 @@
+import { CTabContent } from './CTabContent';
+import { CTabPane } from './CTabPane';
+export { CTabContent, CTabPane };

package/dist/components/time-picker/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/time-picker/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/components/time-picker/index.d.ts

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

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/index.d.ts

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

package/dist/components/toast/index.d.ts

@@ -0,0 +1,6 @@
+import { CToast } from './CToast';
+import { CToastBody } from './CToastBody';
+import { CToastClose } from './CToastClose';
+import { CToastHeader } from './CToastHeader';
+import { CToaster } from './CToaster';
+export { CToast, CToastBody, CToastClose, CToastHeader, CToaster };

package/dist/components/tooltip/CTooltip.d.ts

@@ -1,11 +1,15 @@
-import { FC, ReactElement, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { Triggers } from '../Types';
 export interface CTooltipProps {
-    children: ReactElement;
+    children: any;
     /**
      * Content node for your component.
      */
     content: ReactNode | string;
+    /**
+     * Offset of the popover relative to its target.
+     */
+    offset?: [number, number];
     /**
      * Callback fired when the component requests to be hidden.
      */

package/dist/components/tooltip/index.d.ts

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

package/dist/index.d.ts

@@ -1,129 +1 @@
-import { CAccordion } from './components/accordion/CAccordion';
-import { CAccordionBody } from './components/accordion/CAccordionBody';
-import { CAccordionButton } from './components/accordion/CAccordionButton';
-import { CAccordionCollapse } from './components/accordion/CAccordionCollapse';
-import { CAccordionHeader } from './components/accordion/CAccordionHeader';
-import { CAccordionItem } from './components/accordion/CAccordionItem';
-import { CAlert } from './components/alert/CAlert';
-import { CAlertHeading } from './components/alert/CAlertHeading';
-import { CAlertLink } from './components/alert/CAlertLink';
-import { CAvatar } from './components/avatar/CAvatar';
-import { CBadge } from './components/badge/CBadge';
-import { CBackdrop } from './components/backdrop/CBackdrop';
-import { CBreadcrumb } from './components/breadcrumb/CBreadcrumb';
-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';
-import { CCardFooter } from './components/card/CCardFooter';
-import { CCardGroup } from './components/card/CCardGroup';
-import { CCardHeader } from './components/card/CCardHeader';
-import { CCardImage } from './components/card/CCardImage';
-import { CCardImageOverlay } from './components/card/CCardImageOverlay';
-import { CCardLink } from './components/card/CCardLink';
-import { CCardSubtitle } from './components/card/CCardSubtitle';
-import { CCardText } from './components/card/CCardText';
-import { CCardTitle } from './components/card/CCardTitle';
-import { CCarousel } from './components/carousel/CCarousel';
-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';
-import { CDropdownItem } from './components/dropdown/CDropdownItem';
-import { CDropdownItemPlain } from './components/dropdown/CDropdownItemPlain';
-import { CDropdownMenu } from './components/dropdown/CDropdownMenu';
-import { CDropdownToggle } from './components/dropdown/CDropdownToggle';
-import { CCol } from './components/grid/CCol';
-import { CContainer } from './components/grid/CContainer';
-import { CRow } from './components/grid/CRow';
-import { CFooter } from './components/footer/CFooter';
-import { CForm } from './components/form/CForm';
-import { CFormCheck } from './components/form/CFormCheck';
-import { CFormFeedback } from './components/form/CFormFeedback';
-import { CFormFloating } from './components/form/CFormFloating';
-import { CFormInput } from './components/form/CFormInput';
-import { CFormLabel } from './components/form/CFormLabel';
-import { CFormRange } from './components/form/CFormRange';
-import { CFormSelect } from './components/form/CFormSelect';
-import { CFormSwitch } from './components/form/CFormSwitch';
-import { CFormText } from './components/form/CFormText';
-import { CFormTextarea } from './components/form/CFormTextarea';
-import { CInputGroup } from './components/form/CInputGroup';
-import { CInputGroupText } from './components/form/CInputGroupText';
-import { CHeader } from './components/header/CHeader';
-import { CHeaderBrand } from './components/header/CHeaderBrand';
-import { CHeaderDivider } from './components/header/CHeaderDivider';
-import { CHeaderNav } from './components/header/CHeaderNav';
-import { CHeaderText } from './components/header/CHeaderText';
-import { CHeaderToggler } from './components/header/CHeaderToggler';
-import { CImage } from './components/image/CImage';
-import { CLink } from './components/link/CLink';
-import { CListGroup } from './components/list-group/CListGroup';
-import { CListGroupItem } from './components/list-group/CListGroupItem';
-import { CLoadingButton } from './components/loading-button/CLoadingButton';
-import { CModal } from './components/modal/CModal';
-import { CModalBody } from './components/modal/CModalBody';
-import { CModalContent } from './components/modal/CModalContent';
-import { CModalDialog } from './components/modal/CModalDialog';
-import { CModalFooter } from './components/modal/CModalFooter';
-import { CModalHeader } from './components/modal/CModalHeader';
-import { CModalTitle } from './components/modal/CModalTitle';
-import { CMultiSelect } from './components/multi-select/CMultiSelect';
-import { CNav } from './components/nav/CNav';
-import { CNavGroupItems } from './components/nav/CNavGroupItems';
-import { CNavGroup } from './components/nav/CNavGroup';
-import { CNavItem } from './components/nav/CNavItem';
-import { CNavLink } from './components/nav/CNavLink';
-import { CNavTitle } from './components/nav/CNavTitle';
-import { CNavbar } from './components/navbar/CNavbar';
-import { CNavbarBrand } from './components/navbar/CNavbarBrand';
-import { CNavbarNav } from './components/navbar/CNavbarNav';
-import { CNavbarText } from './components/navbar/CNavbarText';
-import { CNavbarToggler } from './components/navbar/CNavbarToggler';
-import { CPagination } from './components/pagination/CPagination';
-import { CPaginationItem } from './components/pagination/CPaginationItem';
-import { CSmartPagination } from './components/pagination/CSmartPagination';
-import { CPlaceholder } from './components/placeholder/CPlaceholder';
-import { CPopover } from './components/popover/CPopover';
-import { CProgress } from './components/progress/CProgress';
-import { CProgressBar } from './components/progress/CProgressBar';
-import { CSidebar } from './components/sidebar/CSidebar';
-import { COffcanvas } from './components/offcanvas/COffcanvas';
-import { COffcanvasBody } from './components/offcanvas/COffcanvasBody';
-import { COffcanvasHeader } from './components/offcanvas/COffcanvasHeader';
-import { COffcanvasTitle } from './components/offcanvas/COffcanvasTitle';
-import { CSidebarBrand } from './components/sidebar/CSidebarBrand';
-import { CSidebarFooter } from './components/sidebar/CSidebarFooter';
-import { CSidebarToggler } from './components/sidebar/CSidebarToggler';
-import { CSidebarHeader } from './components/sidebar/CSidebarHeader';
-import { CSidebarNav } from './components/sidebar/CSidebarNav';
-import { CSmartTable } from './components/smart-table/CSmartTable';
-import { CSpinner } from './components/spinner/CSpinner';
-import { CTable } from './components/table/CTable';
-import { CTableBody } from './components/table/CTableBody';
-import { CTableCaption } from './components/table/CTableCaption';
-import { CTableDataCell } from './components/table/CTableDataCell';
-import { CTableFoot } from './components/table/CTableFoot';
-import { CTableHead } from './components/table/CTableHead';
-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, 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/';