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

package/dist/index.js

@@ -17,7 +17,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() {
@@ -51,7 +51,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 : {};
 
@@ -2474,6 +2479,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 = React$1.useState(getPreferredColorScheme(localStorageItemName)), colorMode = _a[0], setColorMode = _a[1];
+    React$1.useEffect(function () {
+        if (colorMode) {
+            setStoredTheme(localStorageItemName, colorMode);
+            setTheme(colorMode);
+        }
+    }, [colorMode]);
+    React$1.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
@@ -4850,6 +4903,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': {
@@ -4886,16 +4949,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 = React$1.createContext({});
 var CCarousel = React$1.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"]);
@@ -9048,7 +9101,7 @@ var CPicker = React$1.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 &&
@@ -9056,9 +9109,7 @@ var CPicker = React$1.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)));
         }
@@ -9271,15 +9322,20 @@ var CTimePicker = React$1.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" }),
@@ -9318,7 +9374,7 @@ var CTimePicker = React$1.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);
@@ -9501,8 +9557,8 @@ var CDateRangePicker = React$1.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}
@@ -9513,9 +9569,8 @@ var CDateRangePicker = React$1.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}
@@ -9526,16 +9581,21 @@ var CDateRangePicker = React$1.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);
@@ -10877,8 +10937,7 @@ var CMultiSelectSelection = React$1.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;
             }),
@@ -11062,11 +11121,8 @@ var CMultiSelect = React$1.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,
@@ -11080,7 +11136,13 @@ var CMultiSelect = React$1.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
@@ -14601,6 +14663,7 @@ exports.CWidgetStatsC = CWidgetStatsC;
 exports.CWidgetStatsD = CWidgetStatsD;
 exports.CWidgetStatsE = CWidgetStatsE;
 exports.CWidgetStatsF = CWidgetStatsF;
+exports.useColorModes = useColorModes;
 exports.useForkedRef = useForkedRef;
 exports.usePopper = usePopper;
 exports.useStateWithCallback = useStateWithCallback;