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

package/README.md

@@ -42,7 +42,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.11.0-next.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.11.0.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/accordion/index.d.ts

@@ -1,7 +1,6 @@
 import { CAccordion } from './CAccordion';
 import { CAccordionBody } from './CAccordionBody';
 import { CAccordionButton } from './CAccordionButton';
-import { CAccordionCollapse } from './CAccordionCollapse';
 import { CAccordionHeader } from './CAccordionHeader';
 import { CAccordionItem } from './CAccordionItem';
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, };

package/dist/components/calendar/CCalendar.d.ts

@@ -83,13 +83,13 @@ export interface CCalendarProps {
     /**
      * Set whether days in adjacent months shown before or after the current month are selectable. This only applies if the `showAdjacementDays` option is set to true.
      *
-     * @since 4.11.0-next.0
+     * @since 4.11.0
      */
     selectAdjacementDays?: boolean;
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
      *
-     * @since 4.11.0-next.0
+     * @since 4.11.0
      */
     showAdjacementDays?: boolean;
     /**

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

@@ -64,6 +64,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
      * If you want to disable dynamic positioning set this property to `true`.
      */
     popper?: boolean;
+    /**
+     * Generates dropdown menu using createPortal.
+     *
+     * @since 4.8.0
+     */
+    portal?: boolean;
     /**
      * Set the dropdown variant to an btn-group, dropdown, input-group, and nav-item.
      */
@@ -76,6 +82,7 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
 interface ContextProps extends CDropdownProps {
     dropdownToggleRef: RefObject<any> | undefined;
     setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+    portal: boolean;
 }
 export declare const CDropdownContext: React.Context<ContextProps>;
 export declare const CDropdown: React.ForwardRefExoticComponent<CDropdownProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;

package/dist/components/multi-select/CMultiSelect.d.ts

@@ -5,7 +5,7 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
     /**
      * Allow users to create options if they are not in the list of options.
      *
-     * @since 4.11.0-next.0
+     * @since 4.11.0
      */
     allowCreateOptions?: boolean;
     /**
@@ -19,7 +19,7 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
     /**
      * Clear current search on selecting an item.
      *
-     * @since 4.11.0-next.0
+     * @since 4.11.0
      */
     clearSearchOnSelect?: boolean;
     /**
@@ -29,7 +29,7 @@ export interface CMultiSelectProps extends Omit<CFormControlWrapperProps, 'float
     /**
      * When set, the options list will have a loading style: loading spinner and reduced opacity.
      *
-     * @since 4.11.0-next.0
+     * @since 4.11.0
      */
     loading?: boolean;
     /**

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

@@ -18,6 +18,7 @@ export interface CSmartTableHeadProps extends CTableHeadProps {
         external?: boolean;
     };
     selectedAll?: boolean | string;
+    showGroups?: boolean;
     sorterState?: SorterValue;
     sortingIcon?: ReactNode;
     sortingIconAscending?: ReactNode;

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

@@ -3,7 +3,9 @@ import { CTableDataCellProps } from '../table/CTableDataCell';
 import { CTableHeaderCellProps } from '../table/CTableHeaderCell';
 import { CTableRowProps } from '../table/CTableRow';
 export type Column = {
+    children?: Column[];
     filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode);
+    group?: string;
     key: string;
     label?: string;
     sorter?: boolean;
@@ -21,6 +23,16 @@ export type FooterItem = {
     label?: string;
     _props?: CTableDataCellProps;
 };
+export type Group = {
+    children?: Group[] | Column[];
+    colspan?: number;
+    deep?: number;
+    group?: string;
+    key: string;
+    label?: string;
+    _style?: any;
+    _props?: CTableHeaderCellProps;
+};
 export type Item = {
     [key: string]: number | string | any;
     _cellProps?: any;

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

@@ -1,10 +1,21 @@
-import type { Column, ColumnFilter, ColumnFilterValue, Item, Sorter, SorterValue, TableFilter } from './types';
+import type { Column, ColumnFilter, ColumnFilterValue, Group, Item, Sorter, SorterValue, TableFilter } from './types';
 export declare const filterColumns: (items: Item[], columnFilter: boolean | ColumnFilter | undefined, columnFilterState: ColumnFilterValue, itemsDataColumns: string[]) => Item[];
 export declare const filterTable: (items: Item[], tableFilter: boolean | TableFilter | undefined, tableFilterState: string, itemsDataColumns: string[]) => Item[];
 export declare const getClickedColumnName: (target: HTMLTextAreaElement, columnNames: string[]) => string;
 export declare const getColumnKey: (column: Column | string) => string;
 export declare const getColumnLabel: (column: Column | string) => string;
 export declare const getColumnNames: (columns: (string | Column)[] | undefined, items: Item[]) => string[];
+export declare const getColumns: (_columns: (Column | Group | string)[]) => (Column | string)[];
+export declare const countColumns: (columns: Column[], counter?: number) => number;
+export declare const getColumnGroups: (columns: (string | Column)[] | undefined) => {
+    children?: Column[] | Group[] | undefined;
+    colspan?: number | undefined;
+    group?: string | undefined;
+    key: string;
+    label?: string | undefined;
+    _style?: any;
+    _props?: import("../table/CTableHeaderCell").CTableHeaderCellProps | undefined;
+}[][];
 export declare const getColumnNamesFromItems: (items: Item[]) => string[];
 export declare const getColumnSorterState: (key: string, sorterState: SorterValue | undefined) => string | number;
 export declare const getColumnValues: (items: Item[], key: string) => any[];

package/dist/index.es.js

@@ -2616,15 +2616,6 @@ CAccordionButton.propTypes = {
 };
 CAccordionButton.displayName = 'CAccordionButton';
 
-var CAccordionCollapse = forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest$1(_a, ["children"]);
-    return (React__default$1.createElement(CCollapse, __assign$1({ className: "accordion-collapse" }, props, { ref: ref }), children));
-});
-CAccordionCollapse.propTypes = {
-    children: propTypesExports.node,
-};
-CAccordionCollapse.displayName = 'CAccordionCollapse';
-
 var CAccordionHeader = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest$1(_a, ["children", "className"]);
     return (React__default$1.createElement("div", __assign$1({ className: classNames$1('accordion-header', className) }, rest, { ref: ref }),
@@ -6921,7 +6912,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 = useState(calendarDate), date = _a[0], setDate = _a[1];
     var _b = useState([]), listOfMonths = _b[0], setListOfMonths = _b[1];
     useEffect(function () {
@@ -6959,6 +6950,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
@@ -6968,7 +6960,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); },
@@ -6987,16 +6982,18 @@ var Calendar = function (props) {
             view === 'months' &&
                 listOfMonths.map(function (row, index) {
                     return (React__default$1.createElement("tr", { key: index }, row.map(function (month, idx) {
-                        return (React__default$1.createElement("td", { key: idx, className: "calendar-cell month", onClick: function () { return onMonthClick(index * 3 + idx - addMonths, 'days'); } },
+                        return (React__default$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__default$1.createElement("div", { className: "calendar-cell-inner" }, month)));
                     })));
                 }),
             view === 'years' &&
                 listOfYears.map(function (row, index) {
                     return (React__default$1.createElement("tr", { key: index }, row.map(function (year, idx) {
-                        return (React__default$1.createElement("td", { key: idx, className: "calendar-cell year", onClick: function () {
-                                return onYearClick(new Date(year, date.getMonth() - addMonths, date.getDate()), 'months');
-                            } },
+                        return (React__default$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__default$1.createElement("div", { className: "calendar-cell-inner" }, new Date(year, 0, 1).toLocaleDateString(locale, { year: 'numeric' }))));
                     })));
                 }))));
@@ -7143,6 +7140,16 @@ var CCalendar = 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') {
@@ -7170,16 +7177,20 @@ var CCalendar = 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__default$1.createElement("div", { className: classNames$1('calendars', className) }, _calendarDate &&
         Array.from({ length: calendars }, function (_, index) { return (React__default$1.createElement("div", { className: classNames$1('calendar', view), key: index, ref: ref },
             React__default$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__default$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__default$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,
@@ -9927,11 +9938,12 @@ var PopperManagerWrapper = function (_a) {
 };
 var CDropdownContext = createContext({});
 var CDropdown = 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 = useRef(null);
     var dropdownToggleRef = useRef(null);
     var forkedRef = useForkedRef(ref, dropdownRef);
-    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
+    var _k = 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') {
@@ -9945,6 +9957,7 @@ var CDropdown = forwardRef(function (_a, ref) {
         dropdownToggleRef: dropdownToggleRef,
         placement: placement,
         popper: popper,
+        portal: portal,
         variant: variant,
         visible: _visible,
         setVisible: setVisible,
@@ -9957,12 +9970,13 @@ var CDropdown = forwardRef(function (_a, ref) {
         !_visible && onHide && onHide();
     }, [_visible]);
     return (React__default$1.createElement(CDropdownContext.Provider, { value: contextValues },
-        React__default$1.createElement(PopperManagerWrapper, { popper: popper }, variant === 'input-group' ? (React__default$1.createElement(React__default$1.Fragment, null, children)) : (React__default$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__default$1.createElement(PopperManagerWrapper, { popper: popper }, variant === 'input-group' ? (React__default$1.createElement(React__default$1.Fragment, null, children)) : (React__default$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 = {
@@ -9989,14 +10003,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 = 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 = 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 = useRef(null);
     useEffect(function () {
         visible && window.addEventListener('mouseup', handleMouseUp);
@@ -10045,29 +10072,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__default$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__default$1.Children.map(children, function (child, index) {
-            if (React__default$1.isValidElement(child)) {
-                return React__default$1.createElement("li", { key: index }, React__default$1.cloneElement(child));
-            }
-            return;
-        })
-        : children)); };
+    var dropdownMenuComponent = function (style, ref) { return (React__default$1.createElement(CConditionalPortal, { portal: portal !== null && portal !== void 0 ? portal : false },
+        React__default$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__default$1.Children.map(children, function (child, index) {
+                if (React__default$1.isValidElement(child)) {
+                    return React__default$1.createElement("li", { key: index }, React__default$1.cloneElement(child));
+                }
+                return;
+            })
+            : children))); };
     return popper && visible ? (React__default$1.createElement(Popper, { innerRef: dropdownMenuRef, placement: _placement }, function (_a) {
         var ref = _a.ref, style = _a.style;
         return dropdownMenuComponent(style, ref);
@@ -11559,6 +11575,7 @@ var CMultiSelect = 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));
@@ -11893,11 +11910,9 @@ var COffcanvas = forwardRef(function (_a, ref) {
         setVisible(visible);
     }, [visible]);
     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) {
@@ -13829,12 +13844,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) !== '_'; });
@@ -13916,7 +14023,7 @@ var CSmartTableBody = forwardRef(function (_a, ref) {
     var colspan = selectable ? columnNames.length + 1 : columnNames.length;
     return (React__default$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__default$1.createElement(React__default$1.Fragment, { key: trIndex },
             React__default$1.createElement(CTableRow, __assign$1({}, (item._props && __assign$1({}, item._props)), (clickableRows && { tabIndex: 0 }), { onClick: function (event) {
                     return onRowClick &&
@@ -13936,7 +14043,8 @@ var CSmartTableBody = forwardRef(function (_a, ref) {
                         scopedColumns[colName] &&
                         React__default$1.cloneElement(scopedColumns[colName](item, trIndex + firstItemOnActivePageIndex), {
                             key: index,
-                        })) || (React__default$1.createElement(CTableDataCell, __assign$1({}, getTableDataCellProps(item, colName), { key: index }), String(item[colName]))));
+                        })) ||
+                        (item[colName] && (React__default$1.createElement(CTableDataCell, __assign$1({}, getTableDataCellProps(item, colName), { key: index }), String(item[colName])))));
                 })),
             scopedColumns && scopedColumns.details && (React__default$1.createElement(React__default$1.Fragment, null,
                 React__default$1.createElement(CTableRow, null,
@@ -13977,9 +14085,11 @@ CSmartTableCleaner.propTypes = {
 CSmartTableCleaner.displayName = 'CSmartTableCleaner';
 
 var CSmartTableHead = 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 = useRef(null);
-    var _c = useState(false), refresh = _c[0], setRefresh = _c[1];
+    var _d = useState(false), refresh = _d[0], setRefresh = _d[1];
+    var _columns = useMemo(function () { return getColumns(columns); }, [columns]);
+    var groups = useMemo(function () { return getColumnGroups(columns); }, [columns]);
     useEffect(function () {
         if (selectedAll === 'indeterminate') {
             if (selectAllcheckboxRef.current)
@@ -14016,27 +14126,33 @@ var CSmartTableHead = forwardRef(function (_a, ref) {
         return;
     };
     return (React__default$1.createElement(Component, __assign$1({}, rest, { ref: ref }),
+        showGroups &&
+            groups &&
+            groups.length > 0 &&
+            groups.map(function (row, index) { return (React__default$1.createElement(CTableRow, { key: index },
+                selectable && React__default$1.createElement(CTableHeaderCell, null),
+                row.map(function (cell, index) { return (React__default$1.createElement(CTableHeaderCell, __assign$1({ colSpan: cell.colspan }, getTableHeaderCellProps(cell), { key: index }), cell.label)); }))); }),
         React__default$1.createElement(CTableRow, null,
             selectable && (React__default$1.createElement(CTableHeaderCell, null, selectAll && (React__default$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__default$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { onClick: function () { return handleSort && handleSort(getColumnKey(column), index); }, style: getTableHeaderCellStyles(column, columnSorter), key: index }),
                     React__default$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__default$1.createElement(CTableRow, null,
             selectable && React__default$1.createElement(CTableHeaderCell, null),
-            columns.map(function (column, index) {
-                return (React__default$1.createElement(CTableHeaderCell, __assign$1({}, getTableHeaderCellProps(column), { key: index }), (typeof column !== 'object'
-                    ? true
-                    : typeof column.filter === 'undefined'
+            _columns.map(function (column, index) {
+                return (React__default$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);
@@ -14085,7 +14201,7 @@ var CSmartTable = forwardRef(function (_a, ref) {
     var _u = useState({}), columnFilterState = _u[0], setColumnFilterState = _u[1];
     var _v = useState(), selectedAll = _v[0], setSelectedAll = _v[1];
     var _w = useState({}), sorterState = _w[0], setSorterState = _w[1];
-    var _x = useState(tableFilterValue ? tableFilterValue : ''), tableFilterState = _x[0], setTableFilterState = _x[1];
+    var _x = useState(tableFilterValue !== null && tableFilterValue !== void 0 ? tableFilterValue : ''), tableFilterState = _x[0], setTableFilterState = _x[1];
     useEffect(function () {
         setActivePage(activePage);
     }, [activePage]);
@@ -14148,7 +14264,7 @@ var CSmartTable = forwardRef(function (_a, ref) {
                 setSelectedAll(false);
                 return;
             }
-            if (_selected.length !== 0 && _selected.length !== _itemsNumber) {
+            if (_selected.length > 0 && _selected.length !== _itemsNumber) {
                 setSelectedAll('indeterminate');
             }
         }
@@ -14274,7 +14390,7 @@ var CSmartTable = forwardRef(function (_a, ref) {
                 React__default$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__default$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__default$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__default$1.createElement(CTableFoot, __assign$1({}, tableFootProps),
                     React__default$1.createElement(CTableRow, null, footer.map(function (item, index) { return (React__default$1.createElement(CTableDataCell, __assign$1({}, (typeof item === 'object' && item._props && __assign$1({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); }))))),
             loading && (React__default$1.createElement(CElementCover, { boundaries: [
@@ -14839,5 +14955,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, CConditionalPortal, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, 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, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
+export { CAccordion, CAccordionBody, CAccordionButton, 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, CConditionalPortal, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, 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, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
 //# sourceMappingURL=index.es.js.map