@coreui/react-pro 4.11.0-next.0 → 4.11.0

package/dist/index.js

@@ -2636,15 +2636,6 @@ CAccordionButton.propTypes = {
 };
 CAccordionButton.displayName = 'CAccordionButton';
 
-var CAccordionCollapse = React$1.forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest$1(_a, ["children"]);
-    return (React$1.createElement(CCollapse, __assign$1({ className: "accordion-collapse" }, props, { ref: ref }), children));
-});
-CAccordionCollapse.propTypes = {
-    children: propTypesExports.node,
-};
-CAccordionCollapse.displayName = 'CAccordionCollapse';
-
 var CAccordionHeader = React$1.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
     return (React$1.createElement("div", __assign$1({ className: classNames$1('accordion-header', className) }, rest, { ref: ref }),
@@ -6941,7 +6932,7 @@ var isToday = function (date) {
 };
 
 var Calendar = function (props) {
-    var addMonths = props.addMonths, calendarDate = props.calendarDate, dayFormat = props.dayFormat, disabledDates = props.disabledDates, endDate = props.endDate, firstDayOfWeek = props.firstDayOfWeek, hoverDate = props.hoverDate, locale = props.locale, maxDate = props.maxDate, minDate = props.minDate, onCellClick = props.onCellClick, onCellKeyDown = props.onCellKeyDown, onCellMouseEnter = props.onCellMouseEnter, onCellMouseLeave = props.onCellMouseLeave, onMonthClick = props.onMonthClick, onYearClick = props.onYearClick, selectAdjacementDays = props.selectAdjacementDays, selectEndDate = props.selectEndDate, showAdjacementDays = props.showAdjacementDays, startDate = props.startDate, view = props.view, weekdayFormat = props.weekdayFormat;
+    var addMonths = props.addMonths, calendarDate = props.calendarDate, dayFormat = props.dayFormat, disabledDates = props.disabledDates, endDate = props.endDate, firstDayOfWeek = props.firstDayOfWeek, hoverDate = props.hoverDate, locale = props.locale, maxDate = props.maxDate, minDate = props.minDate, onCellClick = props.onCellClick, onCellKeyDown = props.onCellKeyDown, onCellMouseEnter = props.onCellMouseEnter, onCellMouseLeave = props.onCellMouseLeave, onMonthClick = props.onMonthClick, onMonthKeyDown = props.onMonthKeyDown, onYearClick = props.onYearClick, onYearKeyDown = props.onYearKeyDown, selectAdjacementDays = props.selectAdjacementDays, selectEndDate = props.selectEndDate, showAdjacementDays = props.showAdjacementDays, startDate = props.startDate, view = props.view, weekdayFormat = props.weekdayFormat;
     var _a = React$1.useState(calendarDate), date = _a[0], setDate = _a[1];
     var _b = React$1.useState([]), listOfMonths = _b[0], setListOfMonths = _b[1];
     React$1.useEffect(function () {
@@ -6979,6 +6970,7 @@ var Calendar = function (props) {
                                     disabled: isDateDisabled(date, minDate, maxDate, disabledDates)
                                 },
                                 _b[month] = true,
+                                _b.clickable = month !== 'current' && selectAdjacementDays,
                                 _b.last = isLastDayOfMonth(date),
                                 _b['range-hover'] = month === 'current' &&
                                     (hoverDate && selectEndDate
@@ -6988,7 +6980,10 @@ var Calendar = function (props) {
                                 _b.selected = isDateSelected(date, startDate, endDate),
                                 _b.start = isStartDate(date, startDate, endDate),
                                 _b.end = isEndDate(date, startDate, endDate),
-                                _b)), key: idx, tabIndex: 0, title: date.toLocaleDateString(locale) }, ((month === 'current' || selectAdjacementDays) && {
+                                _b)), key: idx, tabIndex: (month === 'current' || selectAdjacementDays) &&
+                                !isDateDisabled(date, minDate, maxDate, disabledDates)
+                                ? 0
+                                : -1, title: date.toLocaleDateString(locale) }, ((month === 'current' || selectAdjacementDays) && {
                             onBlur: function () { return onCellMouseLeave(); },
                             onClick: function () { return onCellClick(date); },
                             onFocus: function () { return onCellMouseEnter(date); },
@@ -7007,16 +7002,18 @@ var Calendar = function (props) {
             view === 'months' &&
                 listOfMonths.map(function (row, index) {
                     return (React$1.createElement("tr", { key: index }, row.map(function (month, idx) {
-                        return (React$1.createElement("td", { key: idx, className: "calendar-cell month", onClick: function () { return onMonthClick(index * 3 + idx - addMonths, 'days'); } },
+                        return (React$1.createElement("td", { className: "calendar-cell month", key: idx, onClick: function () { return onMonthClick(index * 3 + idx - addMonths); }, onKeyDown: function (event) { return onMonthKeyDown(event, index * 3 + idx - addMonths); }, tabIndex: 0 },
                             React$1.createElement("div", { className: "calendar-cell-inner" }, month)));
                     })));
                 }),
             view === 'years' &&
                 listOfYears.map(function (row, index) {
                     return (React$1.createElement("tr", { key: index }, row.map(function (year, idx) {
-                        return (React$1.createElement("td", { key: idx, className: "calendar-cell year", onClick: function () {
-                                return onYearClick(new Date(year, date.getMonth() - addMonths, date.getDate()), 'months');
-                            } },
+                        return (React$1.createElement("td", { className: "calendar-cell year", key: idx, onClick: function () {
+                                return onYearClick(new Date(year, date.getMonth() - addMonths, date.getDate()));
+                            }, onKeyDown: function (event) {
+                                return onYearKeyDown(event, new Date(year, date.getMonth() - addMonths, date.getDate()));
+                            }, tabIndex: 0 },
                             React$1.createElement("div", { className: "calendar-cell-inner" }, new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' }))));
                     })));
                 }))));
@@ -7163,6 +7160,16 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
             return;
         }
     };
+    var handleMonthClick = function (month) {
+        setCalendarPage(0, 0, month);
+        setView('days');
+    };
+    var handleMonthKeyDown = function (event, month) {
+        if (event.code === 'Space' || event.key === 'Enter') {
+            setCalendarPage(0, 0, month);
+            setView('days');
+        }
+    };
     var handleNavigationOnClick = function (direction, double) {
         if (double === void 0) { double = false; }
         if (direction === 'prev') {
@@ -7190,16 +7197,20 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
             return;
         }
     };
+    var handleYearClick = function (date) {
+        setCalendarDate(date);
+        setView('months');
+    };
+    var handleYearKeyDown = function (event, date) {
+        if (event.code === 'Space' || event.key === 'Enter') {
+            setCalendarDate(date);
+            setView('months');
+        }
+    };
     return (React$1.createElement("div", { className: classNames$1('calendars', className) }, _calendarDate &&
         Array.from({ length: calendars }, function (_, index) { return (React$1.createElement("div", { className: classNames$1('calendar', view), key: index, ref: ref },
             React$1.createElement(Navigation, { addMonths: index, calendarDate: _calendarDate, locale: locale, navigation: navigation, navNextDoubleIcon: navNextDoubleIcon, navNextIcon: navNextIcon, navPrevDoubleIcon: navPrevDoubleIcon, navPrevIcon: navPrevIcon, navYearFirst: navYearFirst, onMonthClick: function () { return setView('months'); }, onNavigationClick: handleNavigationOnClick, onYearClick: function () { return setView('years'); }, view: view }),
-            React$1.createElement(Calendar, { addMonths: index, calendarDate: _calendarDate, dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, hoverDate: _hoverDate, locale: locale, maxDate: _maxDate, minDate: _minDate, onCellClick: function (date) { return handleCellOnClick(date, index); }, onCellKeyDown: function (event, date) { return handleCellKeyDown(event, date, index); }, onCellMouseEnter: handleCellMouseEnter, onCellMouseLeave: handleCellMouseLeave, onMonthClick: function (month, view) {
-                    setCalendarPage(0, 0, month);
-                    setView(view);
-                }, onYearClick: function (date, view) {
-                    setCalendarDate(date);
-                    setView(view);
-                }, selectEndDate: _selectEndDate, selectAdjacementDays: selectAdjacementDays, showAdjacementDays: showAdjacementDays, startDate: _startDate, view: view, weekdayFormat: weekdayFormat }))); })));
+            React$1.createElement(Calendar, { addMonths: index, calendarDate: _calendarDate, dayFormat: dayFormat, disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, hoverDate: _hoverDate, locale: locale, maxDate: _maxDate, minDate: _minDate, onCellClick: function (date) { return handleCellOnClick(date, index); }, onCellKeyDown: function (event, date) { return handleCellKeyDown(event, date, index); }, onCellMouseEnter: handleCellMouseEnter, onCellMouseLeave: handleCellMouseLeave, onMonthClick: handleMonthClick, onMonthKeyDown: handleMonthKeyDown, onYearClick: handleYearClick, onYearKeyDown: handleYearKeyDown, selectEndDate: _selectEndDate, selectAdjacementDays: selectAdjacementDays, showAdjacementDays: showAdjacementDays, startDate: _startDate, view: view, weekdayFormat: weekdayFormat }))); })));
 });
 CCalendar.propTypes = {
     className: propTypesExports.string,
@@ -9947,11 +9958,12 @@ var PopperManagerWrapper = function (_a) {
 };
 var CDropdownContext = React$1.createContext({});
 var CDropdown = React$1.forwardRef(function (_a, ref) {
-    var children = _a.children, alignment = _a.alignment, _b = _a.autoClose, autoClose = _b === void 0 ? true : _b, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _c = _a.placement, placement = _c === void 0 ? 'bottom-start' : _c, _d = _a.popper, popper = _d === void 0 ? true : _d, _e = _a.variant, variant = _e === void 0 ? 'btn-group' : _e, _f = _a.component, component = _f === void 0 ? 'div' : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest$1(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "variant", "component", "visible"]);
+    var _b;
+    var children = _a.children, alignment = _a.alignment, _c = _a.autoClose, autoClose = _c === void 0 ? true : _c, className = _a.className, dark = _a.dark, direction = _a.direction, onHide = _a.onHide, onShow = _a.onShow, _d = _a.placement, placement = _d === void 0 ? 'bottom-start' : _d, _e = _a.popper, popper = _e === void 0 ? true : _e, _f = _a.portal, portal = _f === void 0 ? false : _f, _g = _a.variant, variant = _g === void 0 ? 'btn-group' : _g, _h = _a.component, component = _h === void 0 ? 'div' : _h, _j = _a.visible, visible = _j === void 0 ? false : _j, rest = __rest$1(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "onHide", "onShow", "placement", "popper", "portal", "variant", "component", "visible"]);
     var dropdownRef = React$1.useRef(null);
     var dropdownToggleRef = React$1.useRef(null);
     var forkedRef = useForkedRef(ref, dropdownRef);
-    var _h = React$1.useState(visible), _visible = _h[0], setVisible = _h[1];
+    var _k = React$1.useState(visible), _visible = _k[0], setVisible = _k[1];
     var Component = variant === 'nav-item' ? 'li' : component;
     // Disable popper if responsive aligment is set.
     if (typeof alignment === 'object') {
@@ -9965,6 +9977,7 @@ var CDropdown = React$1.forwardRef(function (_a, ref) {
         dropdownToggleRef: dropdownToggleRef,
         placement: placement,
         popper: popper,
+        portal: portal,
         variant: variant,
         visible: _visible,
         setVisible: setVisible,
@@ -9977,12 +9990,13 @@ var CDropdown = React$1.forwardRef(function (_a, ref) {
         !_visible && onHide && onHide();
     }, [_visible]);
     return (React$1.createElement(CDropdownContext.Provider, { value: contextValues },
-        React$1.createElement(PopperManagerWrapper, { popper: popper }, variant === 'input-group' ? (React$1.createElement(React$1.Fragment, null, children)) : (React$1.createElement(Component, __assign$1({ className: classNames$1(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
-                'dropdown-center': direction === 'center',
-                'dropup dropup-center': direction === 'dropup-center',
-                direction: direction && direction !== 'center' && direction !== 'dropup-center',
-                show: _visible,
-            }, className) }, rest, { ref: forkedRef }), children)))));
+        React$1.createElement(PopperManagerWrapper, { popper: popper }, variant === 'input-group' ? (React$1.createElement(React$1.Fragment, null, children)) : (React$1.createElement(Component, __assign$1({ className: classNames$1(variant === 'nav-item' ? 'nav-item dropdown' : variant, (_b = {
+                    'dropdown-center': direction === 'center',
+                    'dropup dropup-center': direction === 'dropup-center'
+                },
+                _b["".concat(direction)] = direction && direction !== 'center' && direction !== 'dropup-center',
+                _b.show = _visible,
+                _b), className) }, rest, { ref: forkedRef }), children)))));
 });
 var alignmentDirection = propTypesExports.oneOf(['start', 'end']);
 CDropdown.propTypes = {
@@ -10009,14 +10023,27 @@ CDropdown.propTypes = {
     onShow: propTypesExports.func,
     placement: placementPropType,
     popper: propTypesExports.bool,
+    portal: propTypesExports.bool,
     variant: propTypesExports.oneOf(['btn-group', 'dropdown', 'input-group', 'nav-item']),
     visible: propTypesExports.bool,
 };
 CDropdown.displayName = 'CDropdown';
 
+var alignmentClassNames = function (alignment) {
+    var classNames = [];
+    if (typeof alignment === 'object') {
+        Object.keys(alignment).map(function (key) {
+            classNames.push("dropdown-menu".concat(key === 'xs' ? '' : "-".concat(key), "-").concat(alignment[key]));
+        });
+    }
+    if (typeof alignment === 'string') {
+        classNames.push("dropdown-menu-".concat(alignment));
+    }
+    return classNames;
+};
 var CDropdownMenu = function (_a) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, rest = __rest$1(_a, ["children", "className", "component"]);
-    var _c = React$1.useContext(CDropdownContext), alignment = _c.alignment, autoClose = _c.autoClose, dark = _c.dark, direction = _c.direction, dropdownToggleRef = _c.dropdownToggleRef, placement = _c.placement, popper = _c.popper, visible = _c.visible, setVisible = _c.setVisible;
+    var _c = React$1.useContext(CDropdownContext), alignment = _c.alignment, autoClose = _c.autoClose, dark = _c.dark, direction = _c.direction, dropdownToggleRef = _c.dropdownToggleRef, placement = _c.placement, popper = _c.popper, portal = _c.portal, visible = _c.visible, setVisible = _c.setVisible;
     var dropdownMenuRef = React$1.useRef(null);
     React$1.useEffect(function () {
         visible && window.addEventListener('mouseup', handleMouseUp);
@@ -10065,29 +10092,18 @@ var CDropdownMenu = function (_a) {
     if (alignment === 'end') {
         _placement = 'bottom-end';
     }
-    var alignmentClassNames = function (alignment) {
-        var classNames = [];
-        if (typeof alignment === 'object') {
-            Object.keys(alignment).map(function (key) {
-                classNames.push("dropdown-menu".concat(key === 'xs' ? '' : "-".concat(key), "-").concat(alignment[key]));
-            });
-        }
-        if (typeof alignment === 'string') {
-            classNames.push("dropdown-menu-".concat(alignment));
-        }
-        return classNames;
-    };
-    var dropdownMenuComponent = function (style, ref) { return (React$1.createElement(Component, __assign$1({ className: classNames$1('dropdown-menu', {
-            'dropdown-menu-dark': dark,
-            show: visible,
-        }, alignment && alignmentClassNames(alignment), className), ref: ref, style: style, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
-        ? React$1.Children.map(children, function (child, index) {
-            if (React$1.isValidElement(child)) {
-                return React$1.createElement("li", { key: index }, React$1.cloneElement(child));
-            }
-            return;
-        })
-        : children)); };
+    var dropdownMenuComponent = function (style, ref) { return (React$1.createElement(CConditionalPortal, { portal: portal !== null && portal !== void 0 ? portal : false },
+        React$1.createElement(Component, __assign$1({ className: classNames$1('dropdown-menu', {
+                'dropdown-menu-dark': dark,
+                show: visible,
+            }, alignment && alignmentClassNames(alignment), className), ref: ref, style: style, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
+            ? React$1.Children.map(children, function (child, index) {
+                if (React$1.isValidElement(child)) {
+                    return React$1.createElement("li", { key: index }, React$1.cloneElement(child));
+                }
+                return;
+            })
+            : children))); };
     return popper && visible ? (React$1.createElement(Popper, { innerRef: dropdownMenuRef, placement: _placement }, function (_a) {
         var ref = _a.ref, style = _a.style;
         return dropdownMenuComponent(style, ref);
@@ -11579,6 +11595,7 @@ var CMultiSelect = React$1.forwardRef(function (_a, ref) {
     };
     var handleSearchKeyDown = function (event) {
         if (event.key === 'Enter' && searchValue && allowCreateOptions) {
+            event.preventDefault();
             if (userOption) {
                 setSelected(__spreadArray(__spreadArray([], selected, true), userOption, true));
                 setUserOptions(__spreadArray(__spreadArray([], userOptions, true), userOption, true));
@@ -11913,11 +11930,9 @@ var COffcanvas = React$1.forwardRef(function (_a, ref) {
         setVisible(visible);
     }, [visible]);
     React$1.useEffect(function () {
-        if (_visible) {
-            if (!scroll) {
-                document.body.style.overflow = 'hidden';
-                document.body.style.paddingRight = '0px';
-            }
+        if (_visible && !scroll) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = '0px';
             return;
         }
         if (!scroll) {
@@ -13849,12 +13864,104 @@ var getColumnLabel = function (column) {
             : pretifyName(column.key)
         : pretifyName(column);
 };
+// export const getColumnNames = (columns: (string | Column)[] | undefined, items: Item[]) =>
+//   columns
+//     ? columns.map((column: Column | string) => {
+//         return typeof column === 'object' ? column.key : column
+//       })
+//     : getColumnNamesFromItems(items)
 var getColumnNames = function (columns, items) {
-    return columns
-        ? columns.map(function (column) {
-            return typeof column === 'object' ? column.key : column;
-        })
-        : getColumnNamesFromItems(items);
+    if (columns) {
+        var _columns = [];
+        for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
+            var column = columns_1[_i];
+            if (typeof column === 'object' && column.children) {
+                _columns.push.apply(_columns, getColumnNames(column.children, []));
+                continue;
+            }
+            typeof column === 'object' ? _columns.push(column.key) : _columns.push(column);
+        }
+        return _columns;
+    }
+    return getColumnNamesFromItems(items);
+};
+var getColumns = function (_columns) {
+    var columns = [];
+    for (var _i = 0, _columns_1 = _columns; _i < _columns_1.length; _i++) {
+        var column = _columns_1[_i];
+        if (typeof column === 'object' && column.group && column.children) {
+            columns.push.apply(columns, getColumns(column.children));
+            continue;
+        }
+        if (typeof column === 'object' && column.children) {
+            columns.push.apply(columns, getColumns(column.children));
+        }
+        columns.push(column);
+    }
+    return columns;
+};
+var countColumns = function (columns, counter) {
+    if (counter === void 0) { counter = 0; }
+    var _counter = counter;
+    for (var _i = 0, columns_2 = columns; _i < columns_2.length; _i++) {
+        var column = columns_2[_i];
+        if (!column.children) {
+            _counter++;
+        }
+        if (column.children) {
+            _counter = countColumns(column.children, _counter);
+        }
+    }
+    return _counter;
+};
+var getColumnGroups = function (columns) {
+    var groups = [];
+    var traverseColumns = function (column, deep, colSpan) {
+        if (deep === void 0) { deep = 0; }
+        var groups = [];
+        if (column.children) {
+            for (var _i = 0, _a = column.children; _i < _a.length; _i++) {
+                var _column = _a[_i];
+                if (!_column.group) ;
+                groups.push.apply(groups, traverseColumns(_column, deep + 1));
+            }
+        }
+        if (typeof column === 'object' && column.group) {
+            var children = column.children, group = column.group, rest = __rest$1(column, ["children", "group"]);
+            groups.push(__assign$1(__assign$1({ deep: deep, label: group }, (children && { colspan: countColumns(children) })), rest));
+        }
+        return groups;
+    };
+    if (columns) {
+        for (var _i = 0, columns_3 = columns; _i < columns_3.length; _i++) {
+            var column = columns_3[_i];
+            if (typeof column === 'object' && column.group) {
+                var objects = traverseColumns(column);
+                if (objects) {
+                    for (var _a = 0, objects_1 = objects; _a < objects_1.length; _a++) {
+                        var object = objects_1[_a];
+                        var deep = object.deep, rest = __rest$1(object, ["deep"]);
+                        if (deep === undefined) {
+                            continue;
+                        }
+                        for (var i = 0; i < deep; i++) {
+                            if (groups[i]) {
+                                continue;
+                            }
+                            groups.push([]);
+                        }
+                        if (groups[deep]) {
+                            groups[deep].push(rest);
+                        }
+                        else {
+                            groups.push([rest]);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return groups;
 };
 var getColumnNamesFromItems = function (items) {
     return Object.keys(items[0] || {}).filter(function (el) { return el.charAt(0) !== '_'; });
@@ -13936,7 +14043,7 @@ var CSmartTableBody = React$1.forwardRef(function (_a, ref) {
     var colspan = selectable ? columnNames.length + 1 : columnNames.length;
     return (React$1.createElement(CTableBody, __assign$1({}, (clickableRows && {
         style: { cursor: 'pointer' },
-    }), rest, { ref: ref }), currentItems.length ? (currentItems.map(function (item, trIndex) {
+    }), rest, { ref: ref }), currentItems.length > 0 ? (currentItems.map(function (item, trIndex) {
         return (React$1.createElement(React$1.Fragment, { key: trIndex },
             React$1.createElement(CTableRow, __assign$1({}, (item._props && __assign$1({}, item._props)), (clickableRows && { tabIndex: 0 }), { onClick: function (event) {
                     return onRowClick &&
@@ -13956,7 +14063,8 @@ var CSmartTableBody = React$1.forwardRef(function (_a, ref) {
                         scopedColumns[colName] &&
                         React$1.cloneElement(scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex), {
                             key: index,
-                        })) || (React$1.createElement(CTableDataCell, __assign$1({}, getTableDataCellProps(item, colName), { key: index }), String(item[colName]))));
+                        })) ||
+                        (item[colName] && (React$1.createElement(CTableDataCell, __assign$1({}, getTableDataCellProps(item, colName), { key: index }), String(item[colName])))));
                 })),
             scopedColumns && scopedColumns.details && (React$1.createElement(React$1.Fragment, null,
                 React$1.createElement(CTableRow, null,
@@ -13997,9 +14105,11 @@ CSmartTableCleaner.propTypes = {
 CSmartTableCleaner.displayName = 'CSmartTableCleaner';
 
 var CSmartTableHead = React$1.forwardRef(function (_a, ref) {
-    var columnFilter = _a.columnFilter, columnFilterState = _a.columnFilterState, columnSorter = _a.columnSorter, _b = _a.component, Component = _b === void 0 ? CTableHead : _b, columns = _a.columns, handleOnCustomFilterChange = _a.handleOnCustomFilterChange, handleFilterOnChange = _a.handleFilterOnChange, handleFilterOnInput = _a.handleFilterOnInput, handleSelectAllChecked = _a.handleSelectAllChecked, handleSort = _a.handleSort, items = _a.items, selectable = _a.selectable, selectAll = _a.selectAll, selectedAll = _a.selectedAll, sorterState = _a.sorterState, sortingIcon = _a.sortingIcon, sortingIconAscending = _a.sortingIconAscending, sortingIconDescending = _a.sortingIconDescending, rest = __rest$1(_a, ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "handleOnCustomFilterChange", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "items", "selectable", "selectAll", "selectedAll", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
+    var columnFilter = _a.columnFilter, columnFilterState = _a.columnFilterState, columnSorter = _a.columnSorter, _b = _a.component, Component = _b === void 0 ? CTableHead : _b, columns = _a.columns, handleOnCustomFilterChange = _a.handleOnCustomFilterChange, handleFilterOnChange = _a.handleFilterOnChange, handleFilterOnInput = _a.handleFilterOnInput, handleSelectAllChecked = _a.handleSelectAllChecked, handleSort = _a.handleSort, items = _a.items, selectable = _a.selectable, selectAll = _a.selectAll, selectedAll = _a.selectedAll, _c = _a.showGroups, showGroups = _c === void 0 ? true : _c, sorterState = _a.sorterState, sortingIcon = _a.sortingIcon, sortingIconAscending = _a.sortingIconAscending, sortingIconDescending = _a.sortingIconDescending, rest = __rest$1(_a, ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "handleOnCustomFilterChange", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "items", "selectable", "selectAll", "selectedAll", "showGroups", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
     var selectAllcheckboxRef = React$1.useRef(null);
-    var _c = React$1.useState(false), refresh = _c[0], setRefresh = _c[1];
+    var _d = React$1.useState(false), refresh = _d[0], setRefresh = _d[1];
+    var _columns = React$1.useMemo(function () { return getColumns(columns); }, [columns]);
+    var groups = React$1.useMemo(function () { return getColumnGroups(columns); }, [columns]);
     React$1.useEffect(function () {
         if (selectedAll === 'indeterminate') {
             if (selectAllcheckboxRef.current)
@@ -14036,27 +14146,33 @@ var CSmartTableHead = React$1.forwardRef(function (_a, ref) {
         return;
     };
     return (React$1.createElement(Component, __assign$1({}, rest, { ref: ref }),
+        showGroups &&
+            groups &&
+            groups.length > 0 &&
+            groups.map(function (row, index) { return (React$1.createElement(CTableRow, { key: index },
+                selectable && React$1.createElement(CTableHeaderCell, null),
+                row.map(function (cell, index) { return (React$1.createElement(CTableHeaderCell, __assign$1({ colSpan: cell.colspan }, getTableHeaderCellProps(cell), { key: index }), cell.label)); }))); }),
         React$1.createElement(CTableRow, null,
             selectable && (React$1.createElement(CTableHeaderCell, null, selectAll && (React$1.createElement(CFormCheck, { checked: typeof selectedAll === 'boolean' ? selectedAll : false, onChange: function () { return handleSelectAllChecked && handleSelectAllChecked(); }, ref: selectAllcheckboxRef })))),
-            columns.map(function (column, index) {
+            _columns.map(function (column, index) {
                 return (React$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { onClick: function () { return handleSort && handleSort(getColumnKey(column), index); }, style: getTableHeaderCellStyles(column, columnSorter), key: index }),
                     React$1.createElement("div", { className: "d-inline" }, getColumnLabel(column)),
                     columnSorter &&
-                        (typeof column !== 'object'
-                            ? true
-                            : typeof column.sorter === 'undefined'
+                        (typeof column === 'object'
+                            ? typeof column.sorter === 'undefined'
                                 ? true
-                                : column.sorter) &&
+                                : column.sorter
+                            : true) &&
                         columnSorterIcon(column)));
             })),
         columnFilter && (React$1.createElement(CTableRow, null,
             selectable && React$1.createElement(CTableHeaderCell, null),
-            columns.map(function (column, index) {
-                return (React$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { key: index }), (typeof column !== 'object'
-                    ? true
-                    : typeof column.filter === 'undefined'
+            _columns.map(function (column, index) {
+                return (React$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { key: index }), (typeof column === 'object'
+                    ? column.filter === undefined
                         ? true
-                        : column.filter) ? (typeof column !== 'string' && typeof column.filter === 'function' ? (!refresh &&
+                        : column.filter
+                    : true) ? (typeof column !== 'string' && typeof column.filter === 'function' ? (!refresh &&
                     column.filter(getColumnValues(items, getColumnKey(column)), function (value) {
                         return handleOnCustomFilterChange &&
                             handleOnCustomFilterChange(getColumnKey(column), value);
@@ -14105,7 +14221,7 @@ var CSmartTable = React$1.forwardRef(function (_a, ref) {
     var _u = React$1.useState({}), columnFilterState = _u[0], setColumnFilterState = _u[1];
     var _v = React$1.useState(), selectedAll = _v[0], setSelectedAll = _v[1];
     var _w = React$1.useState({}), sorterState = _w[0], setSorterState = _w[1];
-    var _x = React$1.useState(tableFilterValue ? tableFilterValue : ''), tableFilterState = _x[0], setTableFilterState = _x[1];
+    var _x = React$1.useState(tableFilterValue !== null && tableFilterValue !== void 0 ? tableFilterValue : ''), tableFilterState = _x[0], setTableFilterState = _x[1];
     React$1.useEffect(function () {
         setActivePage(activePage);
     }, [activePage]);
@@ -14168,7 +14284,7 @@ var CSmartTable = React$1.forwardRef(function (_a, ref) {
                 setSelectedAll(false);
                 return;
             }
-            if (_selected.length !== 0 && _selected.length !== _itemsNumber) {
+            if (_selected.length > 0 && _selected.length !== _itemsNumber) {
                 setSelectedAll('indeterminate');
             }
         }
@@ -14294,7 +14410,7 @@ var CSmartTable = React$1.forwardRef(function (_a, ref) {
                 React$1.createElement(CSmartTableBody, __assign$1({ clickableRows: clickableRows, currentItems: currentItems, firstItemOnActivePageIndex: firstItemOnActivePageIndex, noItemsLabel: noItemsLabel, onRowClick: function (item, index, columnName, event) {
                         return clickableRows && onRowClick && onRowClick(item, index, columnName, event);
                     }, onRowChecked: function (item, value) { return handleRowChecked(item, value); }, columnNames: columnNames, scopedColumns: scopedColumns, selectable: selectable, selected: _selected }, tableBodyProps)),
-                typeof footer === 'boolean' && footer && (React$1.createElement(CSmartTableHead, __assign$1({ component: CTableFoot }, tableFootProps, { columnFilter: false, columnSorter: false, columns: columns !== null && columns !== void 0 ? columns : columnNames, items: _items, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll }))),
+                typeof footer === 'boolean' && footer && (React$1.createElement(CSmartTableHead, __assign$1({ component: CTableFoot }, tableFootProps, { columnFilter: false, columnSorter: false, columns: columns !== null && columns !== void 0 ? columns : columnNames, items: _items, handleSelectAllChecked: function () { return handleSelectAllChecked(); }, selectable: selectable, selectAll: selectAll, selectedAll: selectedAll, showGroups: false }))),
                 Array.isArray(footer) && (React$1.createElement(CTableFoot, __assign$1({}, tableFootProps),
                     React$1.createElement(CTableRow, null, footer.map(function (item, index) { return (React$1.createElement(CTableDataCell, __assign$1({}, (typeof item === 'object' && item._props && __assign$1({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); }))))),
             loading && (React$1.createElement(CElementCover, { boundaries: [
@@ -14862,7 +14978,6 @@ CWidgetStatsF.displayName = 'CWidgetStatsF';
 exports.CAccordion = CAccordion;
 exports.CAccordionBody = CAccordionBody;
 exports.CAccordionButton = CAccordionButton;
-exports.CAccordionCollapse = CAccordionCollapse;
 exports.CAccordionHeader = CAccordionHeader;
 exports.CAccordionItem = CAccordionItem;
 exports.CAlert = CAlert;