@coreui/react-pro 4.1.0 → 4.1.4

package/dist/index.es.js

@@ -358,6 +358,8 @@ var ReactPropTypesSecret$7 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
 
 var ReactPropTypesSecret_1$1 = ReactPropTypesSecret$7;
 
+var has$4 = Function.call.bind(Object.prototype.hasOwnProperty);
+
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -370,7 +372,7 @@ var printWarning$4 = function() {};
 if (process.env.NODE_ENV !== 'production') {
   var ReactPropTypesSecret$6 = ReactPropTypesSecret_1$1;
   var loggedTypeFailures$1 = {};
-  var has$3 = Function.call.bind(Object.prototype.hasOwnProperty);
+  var has$3 = has$4;
 
   printWarning$4 = function(text) {
     var message = 'Warning: ' + text;
@@ -382,7 +384,7 @@ if (process.env.NODE_ENV !== 'production') {
       // This error was thrown as a convenience so that you can use this stack
       // to find the callsite that caused this warning to fire.
       throw new Error(message);
-    } catch (x) {}
+    } catch (x) { /**/ }
   };
 }
 
@@ -411,7 +413,8 @@ function checkPropTypes$3(typeSpecs, values, location, componentName, getStack)
           if (typeof typeSpecs[typeSpecName] !== 'function') {
             var err = Error(
               (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
-              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
+              'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +
+              'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'
             );
             err.name = 'Invariant Violation';
             throw err;
@@ -470,9 +473,9 @@ var ReactIs$3 = reactIs$1.exports;
 var assign$1 = objectAssign$1;
 
 var ReactPropTypesSecret$5 = ReactPropTypesSecret_1$1;
+var has$2 = has$4;
 var checkPropTypes$2 = checkPropTypes_1$1;
 
-var has$2 = Function.call.bind(Object.prototype.hasOwnProperty);
 var printWarning$3 = function() {};
 
 if (process.env.NODE_ENV !== 'production') {
@@ -573,6 +576,7 @@ var factoryWithTypeCheckers$1 = function(isValidElement, throwOnDirectAccess) {
   // Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
   var ReactPropTypes = {
     array: createPrimitiveTypeChecker('array'),
+    bigint: createPrimitiveTypeChecker('bigint'),
     bool: createPrimitiveTypeChecker('boolean'),
     func: createPrimitiveTypeChecker('function'),
     number: createPrimitiveTypeChecker('number'),
@@ -618,8 +622,9 @@ var factoryWithTypeCheckers$1 = function(isValidElement, throwOnDirectAccess) {
    * is prohibitively expensive if they are created too often, such as what
    * happens in oneOfType() for any type before the one that matched.
    */
-  function PropTypeError(message) {
+  function PropTypeError(message, data) {
     this.message = message;
+    this.data = data && typeof data === 'object' ? data: {};
     this.stack = '';
   }
   // Make `instanceof Error` still work for returned errors.
@@ -654,7 +659,7 @@ var factoryWithTypeCheckers$1 = function(isValidElement, throwOnDirectAccess) {
           ) {
             printWarning$3(
               'You are manually calling a React.PropTypes validation ' +
-              'function for the `' + propFullName + '` prop on `' + componentName  + '`. This is deprecated ' +
+              'function for the `' + propFullName + '` prop on `' + componentName + '`. This is deprecated ' +
               'and will throw in the standalone `prop-types` package. ' +
               'You may be seeing this warning due to a third-party PropTypes ' +
               'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.'
@@ -693,7 +698,10 @@ var factoryWithTypeCheckers$1 = function(isValidElement, throwOnDirectAccess) {
         // 'of type `object`'.
         var preciseType = getPreciseType(propValue);
 
-        return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
+        return new PropTypeError(
+          'Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'),
+          {expectedType: expectedType}
+        );
       }
       return null;
     }
@@ -837,14 +845,19 @@ var factoryWithTypeCheckers$1 = function(isValidElement, throwOnDirectAccess) {
     }
 
     function validate(props, propName, componentName, location, propFullName) {
+      var expectedTypes = [];
       for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
         var checker = arrayOfTypeCheckers[i];
-        if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$5) == null) {
+        var checkerResult = checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret$5);
+        if (checkerResult == null) {
           return null;
         }
+        if (checkerResult.data && has$2(checkerResult.data, 'expectedType')) {
+          expectedTypes.push(checkerResult.data.expectedType);
+        }
       }
-
-      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
+      var expectedTypesMessage = (expectedTypes.length > 0) ? ', expected one of type [' + expectedTypes.join(', ') + ']': '';
+      return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`' + expectedTypesMessage + '.'));
     }
     return createChainableTypeChecker(validate);
   }
@@ -859,6 +872,13 @@ var factoryWithTypeCheckers$1 = function(isValidElement, throwOnDirectAccess) {
     return createChainableTypeChecker(validate);
   }
 
+  function invalidValidatorError(componentName, location, propFullName, key, type) {
+    return new PropTypeError(
+      (componentName || 'React class') + ': ' + location + ' type `' + propFullName + '.' + key + '` is invalid; ' +
+      'it must be a function, usually from the `prop-types` package, but received `' + type + '`.'
+    );
+  }
+
   function createShapeTypeChecker(shapeTypes) {
     function validate(props, propName, componentName, location, propFullName) {
       var propValue = props[propName];
@@ -868,8 +888,8 @@ var factoryWithTypeCheckers$1 = function(isValidElement, throwOnDirectAccess) {
       }
       for (var key in shapeTypes) {
         var checker = shapeTypes[key];
-        if (!checker) {
-          continue;
+        if (typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
         }
         var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$5);
         if (error) {
@@ -888,16 +908,18 @@ var factoryWithTypeCheckers$1 = function(isValidElement, throwOnDirectAccess) {
       if (propType !== 'object') {
         return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
       }
-      // We need to check all keys in case some are required but missing from
-      // props.
+      // We need to check all keys in case some are required but missing from props.
       var allKeys = assign$1({}, props[propName], shapeTypes);
       for (var key in allKeys) {
         var checker = shapeTypes[key];
+        if (has$2(shapeTypes, key) && typeof checker !== 'function') {
+          return invalidValidatorError(componentName, location, propFullName, key, getPreciseType(checker));
+        }
         if (!checker) {
           return new PropTypeError(
             'Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' +
             '\nBad object: ' + JSON.stringify(props[propName], null, '  ') +
-            '\nValid keys: ' +  JSON.stringify(Object.keys(shapeTypes), null, '  ')
+            '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  ')
           );
         }
         var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret$5);
@@ -1082,6 +1104,7 @@ var factoryWithThrowingShims$1 = function() {
   // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
   var ReactPropTypes = {
     array: shim,
+    bigint: shim,
     bool: shim,
     func: shim,
     number: shim,
@@ -2360,6 +2383,7 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, T
 var CSSTransition$1 = CSSTransition;
 
 // code borrowed from https://github.com/reach/reach-ui
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function useForkedRef() {
     var refs = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -2369,6 +2393,7 @@ function useForkedRef() {
         if (refs.every(function (ref) { return ref == null; })) {
             return null;
         }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         return function (node) {
             refs.forEach(function (ref) {
                 assignRef(ref, node);
@@ -2376,7 +2401,10 @@ function useForkedRef() {
         };
     }, refs);
 }
-function assignRef(ref, value) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function assignRef(ref, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+value) {
     if (ref == null)
         return;
     if (isFunction(ref)) {
@@ -2391,6 +2419,7 @@ function assignRef(ref, value) {
         }
     }
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
 function isFunction(value) {
     return !!(value && {}.toString.call(value) == '[object Function]');
 }
@@ -2574,7 +2603,7 @@ var textColorsPropType = PropTypes$1.oneOfType([
     PropTypes$1.oneOf(['white', 'muted']),
     PropTypes$1.string,
 ]);
-var triggerPropType = PropTypes$1.oneOf(['hover', 'focus', 'click']);
+var triggerPropType = PropTypes$1.oneOf(['hover', 'focus', 'click', 'click-init']);
 
 var CCloseButton = forwardRef(function (_a, ref) {
     var className = _a.className, disabled = _a.disabled, white = _a.white, rest = __rest$1(_a, ["className", "disabled", "white"]);
@@ -3744,13 +3773,21 @@ function mapToStyles(_ref2) {
       adaptive = _ref2.adaptive,
       roundOffsets = _ref2.roundOffsets,
       isFixed = _ref2.isFixed;
+  var _offsets$x = offsets.x,
+      x = _offsets$x === void 0 ? 0 : _offsets$x,
+      _offsets$y = offsets.y,
+      y = _offsets$y === void 0 ? 0 : _offsets$y;
 
-  var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
-      _ref3$x = _ref3.x,
-      x = _ref3$x === void 0 ? 0 : _ref3$x,
-      _ref3$y = _ref3.y,
-      y = _ref3$y === void 0 ? 0 : _ref3$y;
+  var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
 
+  x = _ref3.x;
+  y = _ref3.y;
   var hasX = offsets.hasOwnProperty('x');
   var hasY = offsets.hasOwnProperty('y');
   var sideX = left;
@@ -3795,6 +3832,17 @@ function mapToStyles(_ref2) {
     position: position
   }, adaptive && unsetSides);
 
+  var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+    x: x,
+    y: y
+  }) : {
+    x: x,
+    y: y
+  };
+
+  x = _ref4.x;
+  y = _ref4.y;
+
   if (gpuAcceleration) {
     var _Object$assign;
 
@@ -3804,9 +3852,9 @@ function mapToStyles(_ref2) {
   return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
 }
 
-function computeStyles(_ref4) {
-  var state = _ref4.state,
-      options = _ref4.options;
+function computeStyles(_ref5) {
+  var state = _ref5.state,
+      options = _ref5.options;
   var _options$gpuAccelerat = options.gpuAcceleration,
       gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
       _options$adaptive = options.adaptive,
@@ -4105,7 +4153,7 @@ function getClippingParents(element) {
 
 
   return clippingParents.filter(function (clippingParent) {
-    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body' && (canEscapeClipping ? getComputedStyle$1(clippingParent).position !== 'static' : true);
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
   });
 } // Gets the maximum area that the element is visible in due to any number of
 // clipping parents
@@ -5605,11 +5653,11 @@ var CDropdown = forwardRef(function (_a, ref) {
     useEffect(function () {
         _visible &&
             setTimeout(function () {
-                window.addEventListener('click', handleClickOutside);
+                window.addEventListener('mouseup', handleClickOutside);
                 window.addEventListener('keyup', handleKeyup);
             });
         return function () {
-            window.removeEventListener('click', handleClickOutside);
+            window.removeEventListener('mouseup', handleClickOutside);
             window.removeEventListener('keyup', handleKeyup);
         };
     }, [_visible]);
@@ -5803,6 +5851,46 @@ CDropdownToggle.propTypes = {
 };
 CDropdownToggle.displayName = 'CDropdownToggle';
 
+var CDropdownToggleCustom = function (_a) {
+    var children = _a.children, className = _a.className, disabled = _a.disabled, _b = _a.trigger, trigger = _b === void 0 ? 'click' : _b, rest = __rest$1(_a, ["children", "className", "disabled", "trigger"]);
+    var _c = useContext(CDropdownContext), popper = _c.popper, visible = _c.visible, setVisible = _c.setVisible;
+    var _className = classNames$1(className);
+    var triggers = __assign$1(__assign$1(__assign$1({}, ((trigger === 'click' || trigger.includes('click')) &&
+        !disabled && {
+        onClick: function (event) {
+            event.preventDefault();
+            setVisible(!visible);
+        },
+    })), ((trigger === 'click-init' || trigger.includes('click-init')) &&
+        !disabled && {
+        onClick: function (event) {
+            event.preventDefault();
+            setVisible(true);
+        },
+    })), ((trigger === 'focus' || trigger.includes('focus')) &&
+        !disabled && {
+        onFocus: function () { return setVisible(true); },
+        onBlur: function () { return setVisible(false); },
+    }));
+    var togglerProps = __assign$1({ className: _className, 'aria-expanded': visible }, triggers);
+    // We use any because Toggler can be `a` as well as `button`.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var Toggler = function (ref) {
+        return (React__default.createElement("div", __assign$1({}, togglerProps, rest, { ref: ref }), children));
+    };
+    return popper ? React__default.createElement(Reference, null, function (_a) {
+        var ref = _a.ref;
+        return Toggler(ref);
+    }) : Toggler();
+};
+CDropdownToggleCustom.propTypes = {
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    disabled: PropTypes$1.bool,
+    trigger: triggerPropType,
+};
+CDropdownToggleCustom.displayName = 'CDropdownToggleCustom';
+
 var BREAKPOINTS$3 = [
     'xxl',
     'xl',
@@ -6461,11 +6549,12 @@ CModalDialog.displayName = 'CModalDialog';
 
 var CModalContext = createContext({});
 var CModal = forwardRef(function (_a, ref) {
-    var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, fullscreen = _a.fullscreen, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _e = _a.portal, portal = _e === void 0 ? true : _e, scrollable = _a.scrollable, size = _a.size, _f = _a.transition, transition = _f === void 0 ? true : _f, visible = _a.visible;
+    var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, fullscreen = _a.fullscreen, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _e = _a.portal, portal = _e === void 0 ? true : _e, scrollable = _a.scrollable, size = _a.size, _f = _a.transition, transition = _f === void 0 ? true : _f, _g = _a.unmountOnClose, unmountOnClose = _g === void 0 ? true : _g, visible = _a.visible;
     var modalRef = useRef(null);
+    var modalContentRef = useRef(null);
     var forkedRef = useForkedRef(ref, modalRef);
-    var _g = useState(visible), _visible = _g[0], setVisible = _g[1];
-    var _h = useState(false), staticBackdrop = _h[0], setStaticBackdrop = _h[1];
+    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
+    var _j = useState(false), staticBackdrop = _j[0], setStaticBackdrop = _j[1];
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
@@ -6473,6 +6562,14 @@ var CModal = forwardRef(function (_a, ref) {
         visible: _visible,
         setVisible: setVisible,
     };
+    useEffect(function () {
+        modalRef.current && modalRef.current.addEventListener('click', handleClickOutside);
+        modalRef.current && modalRef.current.addEventListener('keyup', handleKeyDown);
+        return function () {
+            modalRef.current && modalRef.current.removeEventListener('click', handleClickOutside);
+            modalRef.current && modalRef.current.removeEventListener('keyup', handleKeyDown);
+        };
+    }, [_visible]);
     var handleDismiss = function () {
         if (backdrop === 'static') {
             return setStaticBackdrop(true);
@@ -6510,6 +6607,12 @@ var CModal = forwardRef(function (_a, ref) {
         }
         return function () { return document.body.classList.remove('modal-open'); };
     }, [_visible]);
+    var handleClickOutside = function (event) {
+        if (modalContentRef.current &&
+            !modalContentRef.current.contains(event.target)) {
+            handleDismiss();
+        }
+    };
     var handleKeyDown = useCallback(function (event) {
         if (event.key === 'Escape' && keyboard) {
             return handleDismiss();
@@ -6518,17 +6621,16 @@ var CModal = forwardRef(function (_a, ref) {
     var modal = function (ref, transitionClass) {
         return (React__default.createElement(CModalContext.Provider, { value: contextValues },
             React__default.createElement("div", { className: classNames$1(_className, transitionClass), tabIndex: -1, role: "dialog", ref: ref },
-                React__default.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size, onClick: function (event) { return event.stopPropagation(); } },
-                    React__default.createElement(CModalContent, null, children)))));
+                React__default.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
+                    React__default.createElement(CModalContent, { ref: modalContentRef }, children)))));
     };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("div", { onClick: handleDismiss, onKeyDown: handleKeyDown },
-            React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onClose, unmountOnExit: true, timeout: !transition ? 0 : duration }, function (state) {
-                var transitionClass = getTransitionClass(state);
-                return typeof window !== 'undefined' && portal
-                    ? createPortal(modal(forkedRef, transitionClass), document.body)
-                    : modal(forkedRef, transitionClass);
-            })),
+        React__default.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: !transition ? 0 : duration }, function (state) {
+            var transitionClass = getTransitionClass(state);
+            return typeof window !== 'undefined' && portal
+                ? createPortal(modal(forkedRef, transitionClass), document.body)
+                : modal(forkedRef, transitionClass);
+        }),
         typeof window !== 'undefined' && portal
             ? backdrop && createPortal(React__default.createElement(CBackdrop, { visible: _visible }), document.body)
             : backdrop && React__default.createElement(CBackdrop, { visible: _visible })));
@@ -6551,6 +6653,7 @@ CModal.propTypes = {
     scrollable: PropTypes$1.bool,
     size: PropTypes$1.oneOf(['sm', 'lg', 'xl']),
     transition: PropTypes$1.bool,
+    unmountOnClose: PropTypes$1.bool,
     visible: PropTypes$1.bool,
 };
 CModal.displayName = 'CModal';
@@ -7334,12 +7437,12 @@ var CPopover = function (_a) {
 };
 CPopover.propTypes = {
     children: PropTypes$1.any,
-    content: PropTypes$1.node,
+    content: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
     placement: PropTypes$1.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     offset: PropTypes$1.any,
     onHide: PropTypes$1.func,
     onShow: PropTypes$1.func,
-    title: PropTypes$1.string,
+    title: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
     trigger: triggerPropType,
     visible: PropTypes$1.bool,
 };
@@ -7646,6 +7749,14 @@ CSidebarHeader.propTypes = {
 };
 CSidebarHeader.displayName = 'CSidebarHeader';
 
+const cilArrowBottom = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75' class='ci-primary'/>"];
+
+const cilArrowTop = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>"];
+
+const cilFilterX = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225' class='ci-primary'/>"];
+
+const cilSwapVertical = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372' class='ci-primary'/>"];
+
 var CElementCover = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, boundaries = _a.boundaries, _b = _a.opacity, opacity = _b === void 0 ? 0.4 : _b, rest = __rest$1(_a, ["children", "className", "boundaries", "opacity"]);
     var elementCoverRef = useRef(null);
@@ -9069,7 +9180,7 @@ var CIcon = forwardRef(function (_a, ref) {
     var iconName = useMemo(function () {
         return _icon && typeof _icon === 'string' && _icon.includes('-') ? toCamelCase(_icon) : _icon;
     }, [change]);
-    var titleCode = title ? "<title>" + title + "</title>" : '';
+    var titleCode = title ? "<title>".concat(title, "</title>") : '';
     var code = useMemo(function () {
         if (Array.isArray(_icon)) {
             return _icon;
@@ -9085,13 +9196,13 @@ var CIcon = forwardRef(function (_a, ref) {
         return Array.isArray(code) && code.length > 1 ? code[0] : '64 64';
     })();
     var viewBox = (function () {
-        return rest['viewBox'] || "0 0 " + scale;
+        return rest['viewBox'] || "0 0 ".concat(scale);
     })();
     // render
     var _className = customClassName
         ? classNames(customClassName)
         : classNames('icon', (_b = {},
-            _b["icon-" + size] = size,
+            _b["icon-".concat(size)] = size,
             _b["icon-custom-size"] = height || width,
             _b), className);
     return use ? (React__default.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", className: _className }, (height && { height: height }), (width && { width: width }), { role: "img" }, rest, { ref: ref }),
@@ -9126,10 +9237,7 @@ CIcon.propTypes = {
 CIcon.displayName = 'CIcon';
 
 var CSmartTableCleaner = forwardRef(function (_a, ref) {
-    var _b = _a.content, content = _b === void 0 ? (React__default.createElement(CIcon, { width: 18, icon: [
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16" class="ci-primary"></polygon><polygon fill="var(--ci-primary-color, currentColor)" points="166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225" class="ci-primary"></polygon>',
-        ] })) : _b, isFiltered = _a.isFiltered, rest = __rest$1(_a, ["content", "isFiltered"]);
+    var _b = _a.content, content = _b === void 0 ? React__default.createElement(CIcon, { width: 18, icon: cilFilterX }) : _b, isFiltered = _a.isFiltered, rest = __rest$1(_a, ["content", "isFiltered"]);
     return (React__default.createElement("button", __assign$1({ type: "button", className: "btn btn-transparent" }, (!isFiltered && {
         disabled: true,
         tabIndex: -1,
@@ -9290,7 +9398,7 @@ var CSmartTableHead = forwardRef(function (_a, ref) {
 CSmartTableHead.propTypes = {
     columnFilter: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
     columnFilterState: PropTypes$1.object,
-    columnSorter: PropTypes$1.bool,
+    columnSorter: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.object]),
     component: PropTypes$1.elementType,
     children: PropTypes$1.node,
     columns: PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.any, PropTypes$1.string])).isRequired,
@@ -9326,46 +9434,34 @@ CSmartTableItemsPerPageSelector.displayName = 'CSmartTableItemsPerPageSelector';
 
 var CSmartTable = forwardRef(function (_a, ref) {
     var _b = _a.activePage, activePage = _b === void 0 ? 1 : _b, cleaner = _a.cleaner, clickableRows = _a.clickableRows, columnFilter = _a.columnFilter, columnFilterValue = _a.columnFilterValue, // TODO: consider to use only columnFilter prop
-    columns = _a.columns, columnSorter = _a.columnSorter, footer = _a.footer, _c = _a.header, header = _c === void 0 ? true : _c, items = _a.items, _d = _a.itemsPerPage, itemsPerPage = _d === void 0 ? 10 : _d, _e = _a.itemsPerPageLabel, itemsPerPageLabel = _e === void 0 ? 'Items per page:' : _e, _f = _a.itemsPerPageOptions, itemsPerPageOptions = _f === void 0 ? [5, 10, 20, 50] : _f, itemsPerPageSelect = _a.itemsPerPageSelect, loading = _a.loading, _g = _a.noItemsLabel, noItemsLabel = _g === void 0 ? 'No items found' : _g, onActivePageChange = _a.onActivePageChange, onColumnFilterChange = _a.onColumnFilterChange, onFilteredItemsChange = _a.onFilteredItemsChange, onItemsPerPageChange = _a.onItemsPerPageChange, onRowClick = _a.onRowClick, onSelectedItemsChange = _a.onSelectedItemsChange, onSorterChange = _a.onSorterChange, onTableFilterChange = _a.onTableFilterChange, pagination = _a.pagination, paginationProps = _a.paginationProps, scopedColumns = _a.scopedColumns, selectable = _a.selectable, sorterValue = _a.sorterValue, _h = _a.sortingIcon, sortingIcon = _h === void 0 ? (React__default.createElement(CIcon, { width: 18, icon: [
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373" class="ci-primary"></polygon><polygon fill="var(--ci-primary-color, currentColor)" points="159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372" class="ci-primary"></polygon>',
-        ], key: "csv" })) : _h, _j = _a.sortingIconAscending, sortingIconAscending = _j === void 0 ? (React__default.createElement(CIcon, { width: 18, icon: [
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625" class="ci-primary"></polygon>',
-        ], key: "cat" })) : _j, _k = _a.sortingIconDescending, sortingIconDescending = _k === void 0 ? (React__default.createElement(CIcon, { width: 18, icon: [
-            '512 512',
-            '<polygon fill="var(--ci-primary-color, currentColor)" points="367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75" class="ci-primary"></polygon>',
-        ], key: "cab" })) : _k, tableBodyProps = _a.tableBodyProps, tableFootProps = _a.tableFootProps, tableFilter = _a.tableFilter, _l = _a.tableFilterLabel, tableFilterLabel = _l === void 0 ? 'Filter:' : _l, _m = _a.tableFilterPlaceholder, tableFilterPlaceholder = _m === void 0 ? 'type string...' : _m, tableFilterValue = _a.tableFilterValue, // TODO: consider to use only tableFilter prop
+    columns = _a.columns, columnSorter = _a.columnSorter, footer = _a.footer, _c = _a.header, header = _c === void 0 ? true : _c, items = _a.items, _d = _a.itemsPerPage, itemsPerPage = _d === void 0 ? 10 : _d, _e = _a.itemsPerPageLabel, itemsPerPageLabel = _e === void 0 ? 'Items per page:' : _e, _f = _a.itemsPerPageOptions, itemsPerPageOptions = _f === void 0 ? [5, 10, 20, 50] : _f, itemsPerPageSelect = _a.itemsPerPageSelect, loading = _a.loading, _g = _a.noItemsLabel, noItemsLabel = _g === void 0 ? 'No items found' : _g, onActivePageChange = _a.onActivePageChange, onColumnFilterChange = _a.onColumnFilterChange, onFilteredItemsChange = _a.onFilteredItemsChange, onItemsPerPageChange = _a.onItemsPerPageChange, onRowClick = _a.onRowClick, onSelectedItemsChange = _a.onSelectedItemsChange, onSorterChange = _a.onSorterChange, onTableFilterChange = _a.onTableFilterChange, pagination = _a.pagination, paginationProps = _a.paginationProps, scopedColumns = _a.scopedColumns, selectable = _a.selectable, sorterValue = _a.sorterValue, _h = _a.sortingIcon, sortingIcon = _h === void 0 ? React__default.createElement(CIcon, { width: 18, icon: cilSwapVertical, key: "csv" }) : _h, _j = _a.sortingIconAscending, sortingIconAscending = _j === void 0 ? React__default.createElement(CIcon, { width: 18, icon: cilArrowTop, key: "cat" }) : _j, _k = _a.sortingIconDescending, sortingIconDescending = _k === void 0 ? React__default.createElement(CIcon, { width: 18, icon: cilArrowBottom, key: "cab" }) : _k, tableBodyProps = _a.tableBodyProps, tableFootProps = _a.tableFootProps, tableFilter = _a.tableFilter, _l = _a.tableFilterLabel, tableFilterLabel = _l === void 0 ? 'Filter:' : _l, _m = _a.tableFilterPlaceholder, tableFilterPlaceholder = _m === void 0 ? 'type string...' : _m, tableFilterValue = _a.tableFilterValue, // TODO: consider to use only tableFilter prop
     tableHeadProps = _a.tableHeadProps, tableProps = _a.tableProps, rest = __rest$1(_a, ["activePage", "cleaner", "clickableRows", "columnFilter", "columnFilterValue", "columns", "columnSorter", "footer", "header", "items", "itemsPerPage", "itemsPerPageLabel", "itemsPerPageOptions", "itemsPerPageSelect", "loading", "noItemsLabel", "onActivePageChange", "onColumnFilterChange", "onFilteredItemsChange", "onItemsPerPageChange", "onRowClick", "onSelectedItemsChange", "onSorterChange", "onTableFilterChange", "pagination", "paginationProps", "scopedColumns", "selectable", "sorterValue", "sortingIcon", "sortingIconAscending", "sortingIconDescending", "tableBodyProps", "tableFootProps", "tableFilter", "tableFilterLabel", "tableFilterPlaceholder", "tableFilterValue", "tableHeadProps", "tableProps"]);
     // instance data
-    var compData = useRef({ firstRun: true, columnFiltered: 0, changeItems: 0 }).current;
-    var previousSorterValue = useRef();
-    var previousItemsValue = useRef();
     var _o = useState(activePage), _activePage = _o[0], setActivePage = _o[1];
     var _p = useState([]), _items = _p[0], setItems = _p[1];
     var _q = useState(itemsPerPage), _itemsPerPage = _q[0], setItemsPerPage = _q[1];
-    var _r = useState(columnFilterValue ? columnFilterValue : {}), columnFilterState = _r[0], setColumnFilterState = _r[1];
+    var _r = useState({}), columnFilterState = _r[0], setColumnFilterState = _r[1];
     var _s = useState(), selectedAll = _s[0], setSelectedAll = _s[1];
-    var _t = useState(previousSorterValue.current || {}), sorterState = _t[0], setSorterState = _t[1];
+    var _t = useState({}), sorterState = _t[0], setSorterState = _t[1];
     var _u = useState(tableFilterValue ? tableFilterValue : ''), tableFilterState = _u[0], setTableFilterState = _u[1];
+    // watch
     useMemo(function () {
-        if (JSON.stringify(previousSorterValue.current) !== JSON.stringify(sorterValue)) {
-            previousSorterValue.current = sorterValue;
-            setSorterState(__assign$1({}, sorterValue));
+        if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
+            setActivePage(1);
         }
-    }, [sorterValue]);
+        // Create the internal array of items
+        Array.isArray(items) &&
+            setItems(items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+                return __assign$1(__assign$1({}, item), { _id: index });
+            }));
+    }, [JSON.stringify(items)]);
     useMemo(function () {
-        if (JSON.stringify(previousItemsValue.current) !== JSON.stringify(items)) {
-            if (items && items.length < _itemsPerPage * _activePage - _itemsPerPage) {
-                setActivePage(1);
-            }
-            previousItemsValue.current = items;
-            Array.isArray(items) &&
-                setItems(items === null || items === void 0 ? void 0 : items.map(function (item, index) {
-                    return __assign$1(__assign$1({}, item), { _id: index });
-                }));
-        }
-    }, [items]);
+        columnFilterValue && setColumnFilterState(columnFilterValue);
+    }, [JSON.stringify(columnFilterValue)]);
+    useMemo(function () {
+        setSorterState(__assign$1({}, sorterValue));
+    }, [JSON.stringify(sorterValue)]);
+    useMemo(function () { return setItemsPerPage(itemsPerPage); }, [itemsPerPage]);
     // functions
     var isSortable = function (i) {
         var isDataColumn = itemsDataColumns.includes(rawColumnNames[i]);
@@ -9447,15 +9543,7 @@ var CSmartTable = forwardRef(function (_a, ref) {
         : genCols; //! || el
     var itemsDataColumns = rawColumnNames.filter(function (name) { return genCols.includes(name); });
     // variables
-    useMemo(function () {
-        compData.columnFiltered++;
-    }, [
-        JSON.stringify(columnFilter),
-        JSON.stringify(columnFilterState),
-        itemsDataColumns.join(''),
-        compData.changeItems,
-    ]);
-    var columnFiltered = useMemo(function () {
+    var filteredColumns = useMemo(function () {
         var items = _items;
         if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
             return items;
@@ -9470,9 +9558,9 @@ var CSmartTable = forwardRef(function (_a, ref) {
             }
         });
         return items;
-    }, [compData.columnFiltered, _items]);
-    var tableFiltered = useMemo(function () {
-        var items = columnFiltered;
+    }, [JSON.stringify(columnFilterState), JSON.stringify(_items)]);
+    var filteredTable = useMemo(function () {
+        var items = filteredColumns;
         if (!tableFilterState ||
             (tableFilter && typeof tableFilter === 'object' && tableFilter.external)) {
             return items;
@@ -9483,23 +9571,16 @@ var CSmartTable = forwardRef(function (_a, ref) {
             return !!itemsDataColumns.find(function (key) { return valueContainFilter(item[key]); });
         });
         return items;
-    }, [
-        compData.columnFiltered,
-        tableFilterState,
-        JSON.stringify(tableFilter),
-        JSON.stringify(columnFiltered),
-    ]);
+    }, [tableFilterState, JSON.stringify(tableFilterValue), JSON.stringify(filteredColumns)]);
     var sortedItems = useMemo(function () {
         var col = sorterState === null || sorterState === void 0 ? void 0 : sorterState.column;
         if (!col ||
             !itemsDataColumns.includes(col) ||
             (columnSorter && typeof columnSorter === 'object' && columnSorter.external)) {
-            return tableFiltered;
+            return filteredTable;
         }
-        //if values in column are to be sorted by numeric value they all have to be type number
-        // const flip = sorterState.asc ? 1 : -1
         var flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0;
-        var sorted = tableFiltered.slice().sort(function (item, item2) {
+        var sorted = filteredTable.slice().sort(function (item, item2) {
             var value = item[col];
             var value2 = item2[col];
             var a = typeof value === 'number' ? value : String(value).toLowerCase();
@@ -9507,7 +9588,13 @@ var CSmartTable = forwardRef(function (_a, ref) {
             return a > b ? 1 * flip : b > a ? -1 * flip : 0;
         });
         return sorted;
-    }, [JSON.stringify(tableFiltered), JSON.stringify(sorterState), JSON.stringify(columnSorter)]);
+    }, [
+        JSON.stringify(filteredTable),
+        JSON.stringify(sorterState),
+        JSON.stringify(columnSorter),
+        JSON.stringify(filteredColumns),
+        JSON.stringify(_items),
+    ]);
     var numberOfPages = _itemsPerPage ? Math.ceil(sortedItems.length / _itemsPerPage) : 1;
     var firstItemOnActivePageIndex = _activePage ? (_activePage - 1) * _itemsPerPage : 0;
     var itemsOnActivePage = sortedItems.slice(firstItemOnActivePageIndex, firstItemOnActivePageIndex + _itemsPerPage);
@@ -9531,16 +9618,8 @@ var CSmartTable = forwardRef(function (_a, ref) {
         onTableFilterChange && onTableFilterChange(tableFilterState);
     }, [tableFilterState]);
     useEffect(function () {
-        !compData.firstRun && onFilteredItemsChange && onFilteredItemsChange(sortedItems);
+        onFilteredItemsChange && onFilteredItemsChange(sortedItems);
     }, [JSON.stringify(sortedItems)]);
-    // watch
-    useMemo(function () { return setItemsPerPage(itemsPerPage); }, [itemsPerPage]);
-    useMemo(function () {
-        return JSON.stringify(previousSorterValue.current) !== JSON.stringify(sorterValue) &&
-            setSorterState(__assign$1({}, sorterValue));
-    }, [sorterValue]);
-    useMemo(function () { return setColumnFilterState(__assign$1({}, columnFilterValue)); }, [columnFilterValue]);
-    compData.firstRun = false;
     var handleRowChecked = function (id, value) {
         var newArr = __spreadArray([], _items, true);
         newArr[id]._selected = value;
@@ -9882,7 +9961,7 @@ var CTooltip = function (_a) {
 };
 CTooltip.propTypes = {
     children: PropTypes$1.any,
-    content: PropTypes$1.node,
+    content: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.node]),
     placement: PropTypes$1.oneOf(['auto', 'top', 'right', 'bottom', 'left']),
     onHide: PropTypes$1.func,
     onShow: PropTypes$1.func,
@@ -10022,5 +10101,5 @@ CWidgetStatsF.propTypes = {
 };
 CWidgetStatsF.displayName = 'CWidgetStatsF';
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, 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, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CFooter, CForm, CFormCheck, 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, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, 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, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CDropdownToggleCustom, CFooter, CForm, CFormCheck, 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, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
 //# sourceMappingURL=index.es.js.map