@coreui/react-pro 4.1.3 → 4.1.4

package/README.md

@@ -43,7 +43,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.1.3.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.1.4.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

package/dist/components/Types.d.ts

@@ -10,5 +10,5 @@ export declare type Shapes = 'rounded' | 'rounded-top' | 'rounded-end' | 'rounde
 export declare const shapePropType: PropTypes.Requireable<string>;
 export declare type TextColors = Colors | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string;
 export declare const textColorsPropType: PropTypes.Requireable<string>;
-export declare type Triggers = 'hover' | 'focus' | 'click';
+export declare type Triggers = 'hover' | 'focus' | 'click' | 'click-init';
 export declare const triggerPropType: PropTypes.Requireable<Triggers>;

package/dist/components/dropdown/CDropdownToggleCustom.d.ts

@@ -0,0 +1,15 @@
+import { FC, HTMLAttributes } from 'react';
+import { Triggers } from '../Types';
+export interface CDropdownToggleCustomProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Toggle the disabled state for the component.
+     */
+    disabled?: boolean;
+    /**
+     * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+     *
+     * @type 'hover' | 'focus' | 'click'
+     */
+    trigger?: Triggers | Triggers[];
+}
+export declare const CDropdownToggleCustom: FC<CDropdownToggleCustomProps>;

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

@@ -49,8 +49,6 @@ export interface SorterValue {
 export interface TableFilter {
     lazy?: boolean;
     external?: boolean;
-    label?: string;
-    placeholder?: string;
 }
 export interface NoItemsView {
     noResults?: string;
@@ -63,14 +61,9 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      * @default 1
      */
     activePage?: number;
-    /**
-     * A string of all className you want applied to the base component.
-     */
-    className?: string;
     /**
      * When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set)
      * Cleaner resets `tableFilterValue`, `columnFilterValue`, `sorterValue`. If clean is possible it is clickable (`tabIndex="0"` `role="button"`, `color="danger"`), otherwise it is not clickable and transparent. Cleaner can be customized through the `cleaner` slot.
-     *
      */
     cleaner?: boolean;
     /**
@@ -264,8 +257,6 @@ export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
      * When set, displays table filter above table, allowing filtering by specific column.
      *
      * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
-     * - placeholder (String) - Sets custom table filter placeholder.
-     * - label (String) - Sets custom table filter label.
      * - external (Boolean) - Disables automatic filtering inside component.
      * - lazy (Boolean) - Set to true to trigger filter updates only on change event.
      */

package/dist/index.d.ts

@@ -39,6 +39,7 @@ import { CDropdownItem } from './components/dropdown/CDropdownItem';
 import { CDropdownItemPlain } from './components/dropdown/CDropdownItemPlain';
 import { CDropdownMenu } from './components/dropdown/CDropdownMenu';
 import { CDropdownToggle } from './components/dropdown/CDropdownToggle';
+import { CDropdownToggleCustom } from './components/dropdown/CDropdownToggleCustom';
 import { CCol } from './components/grid/CCol';
 import { CContainer } from './components/grid/CContainer';
 import { CRow } from './components/grid/CRow';
@@ -121,5 +122,5 @@ import { CToastClose } from './components/toast/CToastClose';
 import { CToastHeader } from './components/toast/CToastHeader';
 import { CToaster } from './components/toast/CToaster';
 import { CTooltip } from './components/tooltip/CTooltip';
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBadge, CBackdrop, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCollapse, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CCol, CContainer, CRow, CFooter, CCardGroup, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CImage, CInputGroup, CInputGroupText, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CSmartPagination, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav, CSmartTable, CSpinner, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTabContent, CTabPane, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBadge, CBackdrop, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCollapse, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CDropdownToggleCustom, CCol, CContainer, CRow, CFooter, CCardGroup, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CImage, CInputGroup, CInputGroupText, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CSmartPagination, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarToggler, CSidebarHeader, CSidebarNav, CSmartTable, CSpinner, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTabContent, CTabPane, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, };
 export * from './components/';

package/dist/index.es.js

@@ -852,7 +852,7 @@ var factoryWithTypeCheckers$1 = function(isValidElement, throwOnDirectAccess) {
         if (checkerResult == null) {
           return null;
         }
-        if (checkerResult.data.hasOwnProperty('expectedType')) {
+        if (checkerResult.data && has$2(checkerResult.data, 'expectedType')) {
           expectedTypes.push(checkerResult.data.expectedType);
         }
       }
@@ -2603,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"]);
@@ -3773,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;
@@ -3824,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;
 
@@ -3833,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,
@@ -4134,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
@@ -5634,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]);
@@ -5832,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',
@@ -7690,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);
@@ -9170,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,
@@ -9370,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]);
@@ -9491,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;
@@ -9514,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;
@@ -9527,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();
@@ -9551,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);
@@ -9575,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;
@@ -10066,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