@coreui/react 4.2.2 → 4.3.1

package/dist/index.es.js

@@ -1334,7 +1334,7 @@ CAccordionItem.propTypes = {
 CAccordionItem.displayName = 'CAccordionItem';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1347,7 +1347,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -1367,11 +1366,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 
@@ -1448,6 +1446,10 @@ var classNamesShape = process.env.NODE_ENV !== 'production' ? propTypes.exports.
 
 var TransitionGroupContext = React__default.createContext(null);
 
+var forceReflow = function forceReflow(node) {
+  return node.scrollTop;
+};
+
 var UNMOUNTED = 'unmounted';
 var EXITED = 'exited';
 var ENTERING = 'entering';
@@ -1667,6 +1669,14 @@ var Transition = /*#__PURE__*/function (_React$Component) {
       this.cancelNextCallback();
 
       if (nextStatus === ENTERING) {
+        if (this.props.unmountOnExit || this.props.mountOnEnter) {
+          var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM__default.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749
+          // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
+          // To make the animation happen,  we have to separate each rendering and avoid being processed as batched.
+
+          if (node) forceReflow(node);
+        }
+
         this.performEnter(mounting);
       } else {
         this.performExit();
@@ -2275,8 +2285,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
 
 
     if (phase === 'active') {
-      /* eslint-disable no-unused-expressions */
-      node && node.scrollTop;
+      if (node) forceReflow(node);
     }
 
     if (className) {
@@ -7917,6 +7926,9 @@ var CPopover = function (_a) {
         ],
         placement: placement,
     }), styles = _j.styles, attributes = _j.attributes;
+    useEffect(function () {
+        setVisible(visible);
+    }, [visible]);
     var getTransitionClass = function (state) {
         return state === 'entering'
             ? 'fade'
@@ -8133,65 +8145,50 @@ CSpinner.propTypes = {
 };
 CSpinner.displayName = 'CSpinner';
 
-var CTable = forwardRef(function (_a, ref) {
+var CTableHead = 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.createElement("div", { className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) },
-        React__default.createElement("table", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children))) : (React__default.createElement("table", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__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 = forwardRef(function (_a, ref) {
+var CTableHeaderCell = 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.createElement("tbody", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__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 = forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (React__default.createElement("caption", __assign({}, props, { ref: ref }), children));
+var CTableBody = 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.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 = forwardRef(function (_a, ref) {
     var _b;
@@ -8201,7 +8198,8 @@ var CTableDataCell = forwardRef(function (_a, ref) {
         _b['table-active'] = active,
         _b["table-".concat(color)] = color,
         _b), className);
-    return (React__default.createElement("td", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    var Component = rest.scope ? 'th' : 'td';
+    return (React__default.createElement(Component, __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
 });
 CTableDataCell.propTypes = {
     active: propTypes.exports.bool,
@@ -8212,69 +8210,138 @@ CTableDataCell.propTypes = {
 };
 CTableDataCell.displayName = 'CTableDataCell';
 
-var CTableFoot = forwardRef(function (_a, ref) {
+var CTableRow = 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.createElement("tfoot", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__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 = forwardRef(function (_a, ref) {
+var CTableFoot = 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.createElement("thead", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+    return (React__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 = 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.createElement("th", __assign({ className: _className ? _className : undefined }, rest, { ref: ref }), children));
+var CTableCaption = forwardRef(function (_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React__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 = forwardRef(function (_a, ref) {
+var CTableResponsiveWrapper = function (_a) {
+    var children = _a.children, responsive = _a.responsive, rest = __rest(_a, ["children", "responsive"]);
+    return responsive ? (React__default.createElement("div", __assign({ className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) }, rest), children)) : (children);
+};
+CTableResponsiveWrapper.propTypes = {
+    children: propTypes.exports.any,
+    responsive: propTypes.exports.oneOfType([
+        propTypes.exports.bool,
+        propTypes.exports.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    ]),
+};
+CTableResponsiveWrapper.displayName = 'CTableResponsiveWrapper';
+
+var CTable = 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.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);
+    };
+    return (React__default.createElement(CTableResponsiveWrapper, { responsive: responsive },
+        React__default.createElement("table", __assign({ className: _className }, rest, { ref: ref }),
+            ((caption && caption !== 'top') || captionTop) && (React__default.createElement(CTableCaption, null, caption || captionTop)),
+            columns && (React__default.createElement(CTableHead, __assign({}, tableHeadProps),
+                React__default.createElement(CTableRow, null, columns.map(function (column, index) { return (React__default.createElement(CTableHeaderCell, __assign({}, (column._props && __assign({}, column._props)), (column._style && { style: __assign({}, column._style) }), { key: index }), label(column))); })))),
+            items && (React__default.createElement(CTableBody, null, items.map(function (item, index) { return (React__default.createElement(CTableRow, __assign({}, (item._props && __assign({}, item._props)), { key: index }), rawColumnNames.map(function (colName, index) {
+                return item[colName] ? (React__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.createElement(CTableFoot, __assign({}, tableFootProps),
+                React__default.createElement(CTableRow, null, footer.map(function (item, index) { return (React__default.createElement(CTableDataCell, __assign({}, (item._props && __assign({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); })))))));
 });
-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 = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
@@ -8357,7 +8424,7 @@ var CToast = forwardRef(function (_a, ref) {
     return (React__default.createElement(Transition, { in: _visible, nodeRef: toastRef, onEnter: function () { return onShow && onShow(index ? index : null); }, onExited: function () { return onClose && onClose(index ? index : null); }, timeout: 250, unmountOnExit: true }, function (state) {
         var transitionClass = getTransitionClass(state);
         return (React__default.createElement(CToastContext.Provider, { value: contextValues },
-            React__default.createElement("div", __assign({ className: classNames(_className, transitionClass), "aria-live": "assertive", "aria-atomic": "true", role: "alert", onMouseEnter: function () { return clearTimeout(timeout.current); }, onMouseLeave: function () { return _autohide; } }, rest, { key: key, ref: forkedRef }), children)));
+            React__default.createElement("div", __assign({ className: classNames(_className, transitionClass), "aria-live": "assertive", "aria-atomic": "true", role: "alert", onMouseEnter: function () { return clearTimeout(timeout.current); }, onMouseLeave: function () { return _autohide(); } }, rest, { key: key, ref: forkedRef }), children)));
     }));
 });
 CToast.propTypes = {