@coreui/react 4.3.0 → 4.3.1

package/README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.2.2.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.3.1.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/table/CTable.d.ts

@@ -9,7 +9,7 @@ export interface CTableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
     /**
      * Set the vertical aligment.
      */
-    align?: 'bottom' | 'middle' | 'top';
+    align?: 'bottom' | 'middle' | 'top' | string;
     /**
      * Sets the border color of the component to one of CoreUI’s themed colors.
      *

package/dist/components/table/CTableDataCell.d.ts

@@ -8,7 +8,7 @@ export interface CTableDataCellProps extends Omit<TdHTMLAttributes<HTMLTableCell
     /**
      * Set the vertical aligment.
      */
-    align?: 'bottom' | 'middle' | 'top';
+    align?: 'bottom' | 'middle' | 'top' | string;
     /**
      * A string of all className you want applied to the component.
      */
@@ -19,5 +19,9 @@ export interface CTableDataCellProps extends Omit<TdHTMLAttributes<HTMLTableCell
      * @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
      */
     color?: Colors;
+    /**
+     * @ignore
+     */
+    colSpan?: number;
 }
 export declare const CTableDataCell: React.ForwardRefExoticComponent<CTableDataCellProps & React.RefAttributes<HTMLTableCellElement>>;

package/dist/components/table/CTableResponsiveWrapper.d.ts

@@ -0,0 +1,9 @@
+import { FC, HTMLAttributes } from 'react';
+export interface CTableResponsiveWrapperProps extends HTMLAttributes<HTMLDivElement> {
+    children: any;
+    /**
+     * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+     */
+    responsive?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+}
+export declare const CTableResponsiveWrapper: FC<CTableResponsiveWrapperProps>;

package/dist/components/table/CTableRow.d.ts

@@ -8,7 +8,7 @@ export interface CTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
     /**
      * Set the vertical aligment.
      */
-    align?: 'bottom' | 'middle' | 'top';
+    align?: 'bottom' | 'middle' | 'top' | string;
     /**
      * A string of all className you want applied to the component.
      */

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) {
@@ -8244,6 +8253,19 @@ CTableCaption.propTypes = {
 };
 CTableCaption.displayName = 'CTableCaption';
 
+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, 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"]);
@@ -8283,18 +8305,17 @@ var CTable = forwardRef(function (_a, ref) {
                 : pretifyName(column.key)
             : pretifyName(column);
     };
-    var Table = function () { return (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)); })))))); };
-    return responsive ? (React__default.createElement("div", { className: typeof responsive === 'boolean' ? 'table-responsive' : "table-responsive-".concat(responsive) },
-        React__default.createElement(Table, null))) : (React__default.createElement(Table, null));
+    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)); })))))));
 });
 CTable.propTypes = {
     align: propTypes.exports.oneOf(['bottom', 'middle', 'top']),
@@ -8403,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 = {