@coreui/react-pro 4.12.0-rc.0 → 5.0.0-alpha.0

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

@@ -4,7 +4,7 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
     /**
      * Apply a CSS fade transition to the tooltip.
      *
-     * @since 4.9.0-beta.2
+     * @since 4.9.0
      */
     animation?: boolean;
     /**
@@ -18,7 +18,7 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
     /**
      * The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
      *
-     * @since 4.9.0-beta.2
+     * @since 4.9.0
      */
     delay?: number | {
         show: number;
@@ -27,7 +27,7 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
     /**
      * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
      *
-     * @since 4.9.0-beta.2
+     * @since 4.9.0
      */
     fallbackPlacements?: Placements | Placements[];
     /**

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
+import { useColorModes } from './useColorModes';
 import { useForkedRef } from './useForkedRef';
 import { usePopper } from './usePopper';
 import { useStateWithCallback } from './useStateWithCallback';
-export { useForkedRef, usePopper, useStateWithCallback };
+export { useColorModes, useForkedRef, usePopper, useStateWithCallback };

package/dist/index.es.js

@@ -15,7 +15,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 var __assign$1 = function() {
@@ -49,7 +49,12 @@ function __spreadArray(to, from, pack) {
         }
     }
     return to.concat(ar || Array.prototype.slice.call(from));
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2472,6 +2477,54 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$1({},
 }) : {};
 var CSSTransition$1 = CSSTransition;
 
+var getStoredTheme = function (localStorageItemName) {
+    return typeof window !== 'undefined' && localStorage.getItem(localStorageItemName);
+};
+var setStoredTheme = function (localStorageItemName, colorMode) {
+    return localStorage.setItem(localStorageItemName, colorMode);
+};
+var getPreferredColorScheme = function (localStorageItemName) {
+    if (typeof window === 'undefined') {
+        return 'light';
+    }
+    var storedTheme = getStoredTheme(localStorageItemName);
+    if (storedTheme) {
+        return storedTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+var setTheme = function (colorMode) {
+    document.documentElement.dataset.coreuiTheme =
+        colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : colorMode;
+    var event = new Event('ColorSchemeChange');
+    document.documentElement.dispatchEvent(event);
+};
+var useColorModes = function (localStorageItemName) {
+    if (localStorageItemName === void 0) { localStorageItemName = 'coreui-react-color-scheme'; }
+    var _a = useState(getPreferredColorScheme(localStorageItemName)), colorMode = _a[0], setColorMode = _a[1];
+    useEffect(function () {
+        if (colorMode) {
+            setStoredTheme(localStorageItemName, colorMode);
+            setTheme(colorMode);
+        }
+    }, [colorMode]);
+    useEffect(function () {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+            var storedTheme = getStoredTheme(localStorageItemName);
+            if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode) {
+                setTheme(colorMode);
+            }
+        });
+    });
+    return {
+        colorMode: colorMode,
+        isColorModeSet: function () { return Boolean(getStoredTheme(localStorageItemName)); },
+        setColorMode: setColorMode,
+    };
+};
+
 // code borrowed from https://github.com/reach/reach-ui
 // problem described https://github.com/facebook/react/issues/13029
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -4848,6 +4901,16 @@ CCardTitle.propTypes = {
 };
 CCardTitle.displayName = 'CCardTitle';
 
+var isRTL = function (element) {
+    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
+        return true;
+    }
+    if (element) {
+        return element.closest('[dir="rtl"]') !== null;
+    }
+    return false;
+};
+
 var getRTLPlacement = function (placement, element) {
     switch (placement) {
         case 'right': {
@@ -4884,16 +4947,6 @@ var isObjectInArray = function (array, item, ignore) {
     });
 };
 
-var isRTL = function (element) {
-    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
-        return true;
-    }
-    if (element) {
-        return element.closest('[dir="rtl"]') !== null;
-    }
-    return false;
-};
-
 var CCarouselContext = createContext({});
 var CCarousel = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.activeIndex, activeIndex = _b === void 0 ? 0 : _b, className = _a.className, controls = _a.controls, dark = _a.dark, indicators = _a.indicators, _c = _a.interval, interval = _c === void 0 ? 5000 : _c, onSlid = _a.onSlid, onSlide = _a.onSlide, _d = _a.pause, pause = _d === void 0 ? 'hover' : _d, _e = _a.touch, touch = _e === void 0 ? true : _e, transition = _a.transition, _f = _a.wrap, wrap = _f === void 0 ? true : _f, rest = __rest$1(_a, ["children", "activeIndex", "className", "controls", "dark", "indicators", "interval", "onSlid", "onSlide", "pause", "touch", "transition", "wrap"]);
@@ -9046,7 +9099,7 @@ var CPicker = forwardRef(function (_a, ref) {
             return (React$1.createElement("div", { className: classNames$1('picker', className), ref: pickerForkedRef }, children));
         }
         default: {
-            return (React$1.createElement("div", { className: classNames$1('dropdown', 'picker', className, {
+            return (React$1.createElement("div", { className: classNames$1(className, {
                     show: _visible,
                 }), onClick: function () { return !disabled && setVisible(true); }, ref: pickerForkedRef },
                 toggler &&
@@ -9054,9 +9107,7 @@ var CPicker = forwardRef(function (_a, ref) {
                     React$1.cloneElement(toggler, {
                         ref: togglerRef,
                     }),
-                React$1.createElement("div", { className: classNames$1('dropdown-menu', {
-                        show: _visible,
-                    }, dropdownClassNames), ref: dropdownRef },
+                React$1.createElement("div", { className: dropdownClassNames, ref: dropdownRef },
                     children,
                     footer && footerContent)));
         }
@@ -9269,15 +9320,20 @@ var CTimePicker = forwardRef(function (_a, ref) {
         setDate(new Date(_date));
         onTimeChange && onTimeChange(_date.toTimeString(), _date.toLocaleTimeString(), _date);
     };
-    var InputGroup = function () { return (React$1.createElement("div", { className: "input-group picker-input-group" },
-        React$1.createElement("input", { autoComplete: "off", className: "form-control", 
+    var InputGroup = function () { return (React$1.createElement("div", { className: "time-picker-input-group" },
+        React$1.createElement("input", { autoComplete: "off", className: "time-picker-input", 
             // delay={true}
             disabled: disabled, onChange: function (event) {
                 return isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value));
             }, placeholder: placeholder, readOnly: inputReadOnly, required: required, ref: inputRef }),
-        (indicator || cleaner) && (React$1.createElement("span", { className: "input-group-text" },
-            indicator && (React$1.createElement("span", { className: "picker-input-group-indicator" }, typeof indicator === 'boolean' ? (React$1.createElement("span", { className: "picker-input-group-icon time-picker-input-icon" })) : (indicator))),
-            cleaner && date && (React$1.createElement("span", { className: "picker-input-group-cleaner", role: "button", onClick: function (event) { return handleClear(event); } }, typeof cleaner === 'boolean' ? (React$1.createElement("span", { className: "picker-input-group-icon time-picker-cleaner-icon" })) : (cleaner))))))); };
+        indicator &&
+            (typeof indicator === 'boolean' ? React$1.createElement("div", { className: "time-picker-indicator" }) : indicator),
+        cleaner &&
+            date &&
+            (typeof cleaner === 'boolean' ? (React$1.createElement("div", { className: "time-picker-cleaner", onClick: function (event) { return handleClear(event); } })) : (React$1.isValidElement(cleaner) &&
+                React$1.cloneElement(cleaner, {
+                    onClick: function (event) { return handleClear(event); },
+                }))))); };
     var TimePickerSelect = function () {
         return (React$1.createElement(React$1.Fragment, null,
             React$1.createElement("span", { className: "time-picker-inline-icon" }),
@@ -9316,7 +9372,7 @@ var CTimePicker = forwardRef(function (_a, ref) {
                 _b.disabled = disabled,
                 _b['is-invalid'] = isValid === false ? true : false,
                 _b['is-valid'] = isValid,
-                _b), className), container: container, disabled: disabled, dropdownClassNames: "time-picker-dropdown", footer: footer, footerContent: React$1.createElement("div", { className: "picker-footer" },
+                _b), className), container: container, disabled: disabled, dropdownClassNames: "time-picker-dropdown", footer: footer, footerContent: React$1.createElement("div", { className: "time-picker-footer" },
                 cancelButton && (React$1.createElement(CButton, { color: cancelButtonColor, size: cancelButtonSize, variant: cancelButtonVariant, onClick: function () {
                         initialDate && setDate(new Date(initialDate));
                         setVisible(false);
@@ -9499,8 +9555,8 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
             setVisible(false);
         }
     };
-    var InputGroup = function () { return (React$1.createElement("div", { className: "input-group picker-input-group" },
-        React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('form-control date-picker-input', {
+    var InputGroup = function () { return (React$1.createElement("div", { className: "date-picker-input-group" },
+        React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('date-picker-input', {
                 hover: inputStartHoverValue,
             }), 
             // delay={true}
@@ -9511,9 +9567,8 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
                     setStartDate(date);
                 }
             }, onClick: function () { return setSelectEndDate(false); }, ref: inputStartRef })),
-        range && separator !== false && (React$1.createElement("span", { className: "input-group-text" },
-            React$1.createElement("span", { className: "picker-input-group-icon date-picker-arrow-icon" }))),
-        range && (React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('form-control date-picker-input', {
+        range && separator !== false && React$1.createElement("div", { className: "date-picker-separator" }),
+        range && (React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('date-picker-input', {
                 hover: inputEndHoverValue,
             }), 
             // delay={true}
@@ -9524,16 +9579,21 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
                     setEndDate(date);
                 }
             }, onClick: function () { return setSelectEndDate(true); }, ref: inputEndRef }))),
-        (indicator || cleaner) && (React$1.createElement("span", { className: "input-group-text" },
-            indicator && (React$1.createElement("span", { className: "picker-input-group-indicator" }, typeof indicator === 'boolean' ? (React$1.createElement("span", { className: "picker-input-group-icon date-picker-input-icon" })) : (indicator))),
-            cleaner && (_startDate || _endDate) && (React$1.createElement("span", { className: "picker-input-group-cleaner", role: "button", onClick: function (event) { return handleClear(event); } }, typeof cleaner === 'boolean' ? (React$1.createElement("span", { className: "picker-input-group-icon date-picker-cleaner-icon" })) : (cleaner))))))); };
+        indicator &&
+            (typeof indicator === 'boolean' ? React$1.createElement("div", { className: "date-picker-indicator" }) : indicator),
+        cleaner &&
+            (_startDate || _endDate) &&
+            (typeof cleaner === 'boolean' ? (React$1.createElement("div", { className: "date-picker-cleaner", onClick: function (event) { return handleClear(event); } })) : (React$1.isValidElement(cleaner) &&
+                React$1.cloneElement(cleaner, {
+                    onClick: function (event) { return handleClear(event); },
+                }))))); };
     return (React$1.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, id: id, invalid: isValid === false ? true : false, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: isValid },
         React$1.createElement(CPicker, __assign$1({ className: classNames$1('date-picker', (_b = {},
                 _b["date-picker-".concat(size)] = size,
                 _b.disabled = disabled,
                 _b['is-invalid'] = isValid === false ? true : false,
                 _b['is-valid'] = isValid,
-                _b), className), disabled: disabled, footer: footer || timepicker, footerContent: React$1.createElement("div", { className: "picker-footer" },
+                _b), className), disabled: disabled, dropdownClassNames: "date-picker-dropdown", footer: footer || timepicker, footerContent: React$1.createElement("div", { className: "date-picker-footer" },
                 todayButton && (React$1.createElement(CButton, { className: "me-auto", color: todayButtonColor, size: todayButtonSize, variant: todayButtonVariant, onClick: function () {
                         var date = new Date();
                         handleStartDateChange(date);
@@ -10875,8 +10935,7 @@ var CMultiSelectSelection = forwardRef(function (_a, ref) {
                 if (selectionType === 'tags') {
                     return (React$1.createElement("span", { className: "form-multi-select-tag", key: index },
                         option.text,
-                        !option.disabled && (React$1.createElement("button", { className: "form-multi-select-tag-delete", "aria-label": "Close", onClick: function () { return onRemove && onRemove(option); } },
-                            React$1.createElement("span", { "aria-hidden": "true" }, "\u00D7")))));
+                        !option.disabled && (React$1.createElement("button", { className: "form-multi-select-tag-delete", "aria-label": "Close", onClick: function () { return onRemove && onRemove(option); } }))));
                 }
                 return;
             }),
@@ -11060,11 +11119,8 @@ var CMultiSelect = forwardRef(function (_a, ref) {
         React$1.createElement(CMultiSelectNativeSelect, { id: id, multiple: multiple, options: selected, required: required, value: multiple
                 ? selected.map(function (option) { return option.value.toString(); })
                 : selected.map(function (option) { return option.value; })[0], onChange: function () { return onChange && onChange(selected); }, ref: nativeSelectRef }),
-        React$1.createElement("div", { className: classNames$1('form-multi-select', (_b = {
-                    'form-multi-select-with-cleaner': cleaner
-                },
+        React$1.createElement("div", { className: classNames$1('form-multi-select', (_b = {},
                 _b["form-multi-select-".concat(size)] = size,
-                _b['form-multi-select-selection-tags'] = multiple && selectionType === 'tags',
                 _b.disabled = disabled,
                 _b['is-invalid'] = invalid,
                 _b['is-valid'] = valid,
@@ -11078,7 +11134,13 @@ var CMultiSelect = forwardRef(function (_a, ref) {
                     !multiple && { placeholder: selected.map(function (option) { return option.text; })[0] }), (multiple &&
                     selected.length > 0 &&
                     selectionType !== 'counter' && { size: searchValue.length + 2 }), { ref: searchRef })))),
-                !disabled && cleaner && selected.length > 0 && (React$1.createElement("button", { type: "button", className: "form-multi-select-selection-cleaner", onClick: function () { return handleDeselectAll(); } }))),
+                React$1.createElement("div", { className: "form-multi-select-buttons" },
+                    !disabled && cleaner && selected.length > 0 && (React$1.createElement("button", { type: "button", className: "form-multi-select-cleaner", onClick: function () { return handleDeselectAll(); } })),
+                    React$1.createElement("button", { type: "button", className: "form-multi-select-indicator", onClick: function (event) {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            setVisible(!_visible);
+                        } }))),
             React$1.createElement("div", { className: "form-multi-select-dropdown", role: "menu", ref: dropdownRef },
                 multiple && selectAll && (React$1.createElement("button", { type: "button", className: "form-multi-select-all", onClick: function () { return handleSelectAll(); } }, selectAllLabel)),
                 React$1.createElement(CMultiSelectOptions, { handleOptionOnClick: function (option) { return !disabled && handleOptionOnClick(option); }, loading: loading, options: filteredOptions.length === 0 && allowCreateOptions
@@ -14462,5 +14524,5 @@ CWidgetStatsF.propTypes = {
 };
 CWidgetStatsF.displayName = 'CWidgetStatsF';
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CProgressStacked, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, useForkedRef, usePopper, useStateWithCallback };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CProgressStacked, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, useColorModes, useForkedRef, usePopper, useStateWithCallback };
 //# sourceMappingURL=index.es.js.map