@coreui/react-pro 4.11.0-next.1 → 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 }),
@@ -9967,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') {
@@ -9985,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,
@@ -9997,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 = {
@@ -10029,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);
@@ -10085,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);
@@ -11934,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) {
@@ -13870,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) !== '_'; });
@@ -13957,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 &&
@@ -13977,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,
@@ -14018,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)
@@ -14057,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);
@@ -14126,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]);
@@ -14189,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');
             }
         }
@@ -14315,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: [
@@ -14883,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;