@coreui/react-pro 4.12.0-beta.3 → 4.12.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,54 +2479,6 @@ 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
@@ -4898,6 +4855,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': {
@@ -4934,16 +4901,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"]);
@@ -9096,7 +9053,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(className, {
+            return (React$1.createElement("div", { className: classNames$1('dropdown', 'picker', className, {
                     show: _visible,
                 }), onClick: function () { return !disabled && setVisible(true); }, ref: pickerForkedRef },
                 toggler &&
@@ -9104,7 +9061,9 @@ var CPicker = React$1.forwardRef(function (_a, ref) {
                     React$1.cloneElement(toggler, {
                         ref: togglerRef,
                     }),
-                React$1.createElement("div", { className: dropdownClassNames, ref: dropdownRef },
+                React$1.createElement("div", { className: classNames$1('dropdown-menu', {
+                        show: _visible,
+                    }, dropdownClassNames), ref: dropdownRef },
                     children,
                     footer && footerContent)));
         }
@@ -9317,20 +9276,18 @@ 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: "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 &&
-            (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 InputGroup = function () {
+        var _a;
+        return (React$1.createElement("div", { className: classNames$1('input-group', 'picker-input-group', (_a = {},
+                _a["input-group-".concat(size)] = size,
+                _a)) },
+            React$1.createElement("input", { autoComplete: "off", className: "form-control", 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)))))));
+    };
     var TimePickerSelect = function () {
         return (React$1.createElement(React$1.Fragment, null,
             React$1.createElement("span", { className: "time-picker-inline-icon" }),
@@ -9369,7 +9326,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: "time-picker-footer" },
+                _b), className), container: container, disabled: disabled, dropdownClassNames: "time-picker-dropdown", footer: footer, footerContent: React$1.createElement("div", { className: "picker-footer" },
                 cancelButton && (React$1.createElement(CButton, { color: cancelButtonColor, size: cancelButtonSize, variant: cancelButtonVariant, onClick: function () {
                         initialDate && setDate(new Date(initialDate));
                         setVisible(false);
@@ -9552,45 +9509,42 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
             setVisible(false);
         }
     };
-    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}
-            disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format$1 === 'string', required: required, onChange: function (event) {
-                var date = getLocalDateFromString(event.target.value, locale, timepicker);
-                if (date instanceof Date && date.getTime()) {
-                    setCalendarDate(date);
-                    setStartDate(date);
-                }
-            }, onClick: function () { return setSelectEndDate(false); }, ref: inputStartRef })),
-        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}
-            disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format$1 === 'string', required: required, onChange: function (event) {
-                var date = getLocalDateFromString(event.target.value, locale, timepicker);
-                if (date instanceof Date && date.getTime()) {
-                    setCalendarDate(date);
-                    setEndDate(date);
-                }
-            }, onClick: function () { return setSelectEndDate(true); }, ref: inputEndRef }))),
-        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); },
-                }))))); };
+    var InputGroup = function () {
+        var _a;
+        return (React$1.createElement("div", { className: classNames$1('input-group', 'picker-input-group', (_a = {},
+                _a["input-group-".concat(size)] = size,
+                _a)) },
+            React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('form-control date-picker-input', {
+                    hover: inputStartHoverValue,
+                }), disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format$1 === 'string', required: required, onChange: function (event) {
+                    var date = getLocalDateFromString(event.target.value, locale, timepicker);
+                    if (date instanceof Date && date.getTime()) {
+                        setCalendarDate(date);
+                        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', {
+                    hover: inputEndHoverValue,
+                }), disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format$1 === 'string', required: required, onChange: function (event) {
+                    var date = getLocalDateFromString(event.target.value, locale, timepicker);
+                    if (date instanceof Date && date.getTime()) {
+                        setCalendarDate(date);
+                        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)))))));
+    };
     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, dropdownClassNames: "date-picker-dropdown", footer: footer || timepicker, footerContent: React$1.createElement("div", { className: "date-picker-footer" },
+                _b), className), disabled: disabled, footer: footer || timepicker, footerContent: React$1.createElement("div", { className: "picker-footer" },
                 todayButton && (React$1.createElement(CButton, { className: "me-auto", color: todayButtonColor, size: todayButtonSize, variant: todayButtonVariant, onClick: function () {
                         var date = new Date();
                         handleStartDateChange(date);
@@ -10932,7 +10886,8 @@ 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); } }))));
+                        !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")))));
                 }
                 return;
             }),
@@ -11116,8 +11071,11 @@ 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 = {},
+        React$1.createElement("div", { className: classNames$1('form-multi-select', (_b = {
+                    'form-multi-select-with-cleaner': cleaner
+                },
                 _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,
@@ -11131,13 +11089,7 @@ 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 })))),
-                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);
-                        } }))),
+                !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-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
@@ -14658,7 +14610,6 @@ exports.CWidgetStatsC = CWidgetStatsC;
 exports.CWidgetStatsD = CWidgetStatsD;
 exports.CWidgetStatsE = CWidgetStatsE;
 exports.CWidgetStatsF = CWidgetStatsF;
-exports.useColorModes = useColorModes;
 exports.useForkedRef = useForkedRef;
 exports.usePopper = usePopper;
 exports.useStateWithCallback = useStateWithCallback;