@coreui/react 4.2.3 → 4.3.0

package/dist/index.js

@@ -7944,6 +7944,9 @@ var CPopover = function (_a) {
         ],
         placement: placement,
     }), styles = _j.styles, attributes = _j.attributes;
+    React.useEffect(function () {
+        setVisible(visible);
+    }, [visible]);
     var getTransitionClass = function (state) {
         return state === 'entering'
             ? 'fade'
@@ -8160,65 +8163,50 @@ CSpinner.propTypes = {
 };
 CSpinner.displayName = 'CSpinner';
 
-var CTable = React.forwardRef(function (_a, ref) {
+var CTableHead = React.forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, align = _a.align, borderColor = _a.borderColor, bordered = _a.bordered, borderless = _a.borderless, caption = _a.caption, className = _a.className, color = _a.color, hover = _a.hover, responsive = _a.responsive, small = _a.small, striped = _a.striped, rest = __rest(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "className", "color", "hover", "responsive", "small", "striped"]);
-    var _className = classNames('table', (_b = {},
-        _b["align-".concat(align)] = align,
-        _b["caption-".concat(caption)] = caption,
-        _b["border-".concat(borderColor)] = borderColor,
-        _b['table-bordered'] = bordered,
-        _b['table-borderless'] = borderless,
+    var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
+    var _className = classNames((_b = {},
         _b["table-".concat(color)] = color,
-        _b['table-hover'] = hover,
-        _b['table-sm'] = small,
-        _b['table-striped'] = striped,
         _b), className);
-    return responsive ? (React__default["default"].createElement("div", { className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) },
-        React__default["default"].createElement("table", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children))) : (React__default["default"].createElement("table", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default["default"].createElement("thead", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
-CTable.propTypes = {
-    align: propTypes.exports.oneOf(['bottom', 'middle', 'top']),
-    borderColor: propTypes.exports.string,
-    bordered: propTypes.exports.bool,
-    borderless: propTypes.exports.bool,
-    caption: propTypes.exports.oneOf(['top']),
+CTableHead.propTypes = {
     children: propTypes.exports.node,
     className: propTypes.exports.string,
     color: colorPropType,
-    hover: propTypes.exports.bool,
-    responsive: propTypes.exports.oneOfType([
-        propTypes.exports.bool,
-        propTypes.exports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
-    ]),
-    small: propTypes.exports.bool,
-    striped: propTypes.exports.bool,
 };
-CTable.displayName = 'CTable';
+CTableHead.displayName = 'CTableHead';
 
-var CTableBody = React.forwardRef(function (_a, ref) {
+var CTableHeaderCell = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
     var _className = classNames((_b = {},
         _b["table-".concat(color)] = color,
         _b), className);
-    return (React__default["default"].createElement("tbody", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default["default"].createElement("th", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
-CTableBody.propTypes = {
+CTableHeaderCell.propTypes = {
     children: propTypes.exports.node,
     className: propTypes.exports.string,
     color: colorPropType,
 };
-CTableBody.displayName = 'CTableBody';
+CTableHeaderCell.displayName = 'CTableHeaderCell';
 
-var CTableCaption = React.forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (React__default["default"].createElement("caption", __assign({}, props, { ref: ref }), children));
+var CTableBody = React.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
+    var _className = classNames((_b = {},
+        _b["table-".concat(color)] = color,
+        _b), className);
+    return (React__default["default"].createElement("tbody", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
-CTableCaption.propTypes = {
+CTableBody.propTypes = {
     children: propTypes.exports.node,
+    className: propTypes.exports.string,
+    color: colorPropType,
 };
-CTableCaption.displayName = 'CTableCaption';
+CTableBody.displayName = 'CTableBody';
 
 var CTableDataCell = React.forwardRef(function (_a, ref) {
     var _b;
@@ -8228,7 +8216,8 @@ var CTableDataCell = React.forwardRef(function (_a, ref) {
         _b['table-active'] = active,
         _b["table-".concat(color)] = color,
         _b), className);
-    return (React__default["default"].createElement("td", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    var Component = rest.scope ? 'th' : 'td';
+    return (React__default["default"].createElement(Component, __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
 CTableDataCell.propTypes = {
     active: propTypes.exports.bool,
@@ -8239,69 +8228,126 @@ CTableDataCell.propTypes = {
 };
 CTableDataCell.displayName = 'CTableDataCell';
 
-var CTableFoot = React.forwardRef(function (_a, ref) {
+var CTableRow = React.forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
+    var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "active", "align", "className", "color"]);
     var _className = classNames((_b = {},
+        _b["align-".concat(align)] = align,
+        _b['table-active'] = active,
         _b["table-".concat(color)] = color,
         _b), className);
-    return (React__default["default"].createElement("tfoot", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default["default"].createElement("tr", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
-CTableFoot.propTypes = {
+CTableRow.propTypes = {
+    active: propTypes.exports.bool,
+    align: propTypes.exports.oneOf(['bottom', 'middle', 'top']),
     children: propTypes.exports.node,
     className: propTypes.exports.string,
     color: colorPropType,
 };
-CTableFoot.displayName = 'CTableFoot';
+CTableRow.displayName = 'CTableRow';
 
-var CTableHead = React.forwardRef(function (_a, ref) {
+var CTableFoot = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
     var _className = classNames((_b = {},
         _b["table-".concat(color)] = color,
         _b), className);
-    return (React__default["default"].createElement("thead", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__default["default"].createElement("tfoot", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
-CTableHead.propTypes = {
+CTableFoot.propTypes = {
     children: propTypes.exports.node,
     className: propTypes.exports.string,
     color: colorPropType,
 };
-CTableHead.displayName = 'CTableHead';
+CTableFoot.displayName = 'CTableFoot';
 
-var CTableHeaderCell = React.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "className", "color"]);
-    var _className = classNames((_b = {},
-        _b["table-".concat(color)] = color,
-        _b), className);
-    return (React__default["default"].createElement("th", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+var CTableCaption = React.forwardRef(function (_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React__default["default"].createElement("caption", __assign({}, props, { ref: ref }), children));
 });
-CTableHeaderCell.propTypes = {
+CTableCaption.propTypes = {
     children: propTypes.exports.node,
-    className: propTypes.exports.string,
-    color: colorPropType,
 };
-CTableHeaderCell.displayName = 'CTableHeaderCell';
+CTableCaption.displayName = 'CTableCaption';
 
-var CTableRow = React.forwardRef(function (_a, ref) {
+var CTable = React.forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, active = _a.active, align = _a.align, className = _a.className, color = _a.color, rest = __rest(_a, ["children", "active", "align", "className", "color"]);
-    var _className = classNames((_b = {},
+    var children = _a.children, align = _a.align, borderColor = _a.borderColor, bordered = _a.bordered, borderless = _a.borderless, caption = _a.caption, captionTop = _a.captionTop, className = _a.className, color = _a.color, columns = _a.columns, footer = _a.footer, hover = _a.hover, _c = _a.items, items = _c === void 0 ? [] : _c, responsive = _a.responsive, small = _a.small, striped = _a.striped, stripedColumns = _a.stripedColumns, tableFootProps = _a.tableFootProps, tableHeadProps = _a.tableHeadProps, rest = __rest(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "captionTop", "className", "color", "columns", "footer", "hover", "items", "responsive", "small", "striped", "stripedColumns", "tableFootProps", "tableHeadProps"]);
+    var _className = classNames('table', (_b = {},
         _b["align-".concat(align)] = align,
-        _b['table-active'] = active,
+        _b["border-".concat(borderColor)] = borderColor,
+        _b["caption-top"] = captionTop || caption === 'top',
+        _b['table-bordered'] = bordered,
+        _b['table-borderless'] = borderless,
         _b["table-".concat(color)] = color,
+        _b['table-hover'] = hover,
+        _b['table-sm'] = small,
+        _b['table-striped'] = striped,
+        _b['table-striped-columns'] = stripedColumns,
         _b), className);
-    return (React__default["default"].createElement("tr", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    var rawColumnNames = columns
+        ? columns.map(function (column) {
+            if (typeof column === 'object')
+                return column.key;
+            else
+                return column;
+        })
+        : Object.keys(items[0] || {}).filter(function (el) { return el.charAt(0) !== '_'; });
+    var pretifyName = function (name) {
+        return name
+            .replace(/[-_.]/g, ' ')
+            .replace(/ +/g, ' ')
+            .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+            .split(' ')
+            .map(function (word) { return word.charAt(0).toUpperCase() + word.slice(1); })
+            .join(' ');
+    };
+    var label = function (column) {
+        return typeof column === 'object'
+            ? column.label !== undefined
+                ? column.label
+                : pretifyName(column.key)
+            : pretifyName(column);
+    };
+    var Table = function () { return (React__default["default"].createElement("table", __assign({ className: _className }, rest, { ref: ref }),
+        ((caption && caption !== 'top') || captionTop) && (React__default["default"].createElement(CTableCaption, null, caption || captionTop)),
+        columns && (React__default["default"].createElement(CTableHead, __assign({}, tableHeadProps),
+            React__default["default"].createElement(CTableRow, null, columns.map(function (column, index) { return (React__default["default"].createElement(CTableHeaderCell, __assign({}, (column._props && __assign({}, column._props)), (column._style && { style: __assign({}, column._style) }), { key: index }), label(column))); })))),
+        items && (React__default["default"].createElement(CTableBody, null, items.map(function (item, index) { return (React__default["default"].createElement(CTableRow, __assign({}, (item._props && __assign({}, item._props)), { key: index }), rawColumnNames.map(function (colName, index) {
+            return item[colName] ? (React__default["default"].createElement(CTableDataCell, __assign({}, (item._cellProps && __assign(__assign({}, (item._cellProps['all'] && __assign({}, item._cellProps['all']))), (item._cellProps[colName] && __assign({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
+        }))); }))),
+        children,
+        footer && (React__default["default"].createElement(CTableFoot, __assign({}, tableFootProps),
+            React__default["default"].createElement(CTableRow, null, footer.map(function (item, index) { return (React__default["default"].createElement(CTableDataCell, __assign({}, (item._props && __assign({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); })))))); };
+    return responsive ? (React__default["default"].createElement("div", { className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) },
+        React__default["default"].createElement(Table, null))) : (React__default["default"].createElement(Table, null));
 });
-CTableRow.propTypes = {
-    active: propTypes.exports.bool,
+CTable.propTypes = {
     align: propTypes.exports.oneOf(['bottom', 'middle', 'top']),
+    borderColor: propTypes.exports.string,
+    bordered: propTypes.exports.bool,
+    borderless: propTypes.exports.bool,
+    caption: propTypes.exports.oneOfType([propTypes.exports.string, propTypes.exports.oneOf(['top'])]),
+    captionTop: propTypes.exports.string,
     children: propTypes.exports.node,
     className: propTypes.exports.string,
     color: colorPropType,
+    columns: propTypes.exports.array,
+    footer: propTypes.exports.array,
+    hover: propTypes.exports.bool,
+    items: propTypes.exports.array,
+    responsive: propTypes.exports.oneOfType([
+        propTypes.exports.bool,
+        propTypes.exports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    ]),
+    small: propTypes.exports.bool,
+    striped: propTypes.exports.bool,
+    stripedColumns: propTypes.exports.bool,
+    tableFootProps: propTypes.exports.shape(__assign({}, CTableFoot.propTypes)),
+    tableHeadProps: propTypes.exports.shape(__assign({}, CTableHead.propTypes)),
 };
-CTableRow.displayName = 'CTableRow';
+CTable.displayName = 'CTable';
 
 var CTabContent = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);