@coreui/react 4.3.0 → 4.4.0

package/dist/index.js

@@ -1263,9 +1263,9 @@ if (process.env.NODE_ENV !== 'production') {
 var classnames = {exports: {}};
 
 /*!
-  Copyright (c) 2018 Jed Watson.
-  Licensed under the MIT License (MIT), see
-  http://jedwatson.github.io/classnames
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
 */
 
 (function (module) {
@@ -1294,14 +1294,15 @@ var classnames = {exports: {}};
 						}
 					}
 				} else if (argType === 'object') {
-					if (arg.toString === Object.prototype.toString) {
-						for (var key in arg) {
-							if (hasOwn.call(arg, key) && arg[key]) {
-								classes.push(key);
-							}
-						}
-					} else {
+					if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
 						classes.push(arg.toString());
+						continue;
+					}
+
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
 					}
 				}
 			}
@@ -1361,7 +1362,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];
 
@@ -1374,7 +1375,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -1394,11 +1394,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);
 }
 
@@ -1475,6 +1474,10 @@ var classNamesShape = process.env.NODE_ENV !== 'production' ? propTypes.exports.
 
 var TransitionGroupContext = React__default["default"].createContext(null);
 
+var forceReflow = function forceReflow(node) {
+  return node.scrollTop;
+};
+
 var UNMOUNTED = 'unmounted';
 var EXITED = 'exited';
 var ENTERING = 'entering';
@@ -1694,6 +1697,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["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();
@@ -2302,8 +2313,7 @@ var CSSTransition = /*#__PURE__*/function (_React$Component) {
 
 
     if (phase === 'active') {
-      /* eslint-disable no-unused-expressions */
-      node && node.scrollTop;
+      if (node) forceReflow(node);
     }
 
     if (className) {
@@ -4246,38 +4256,57 @@ var max = Math.max;
 var min = Math.min;
 var round = Math.round;
 
-function getBoundingClientRect(element, includeScale) {
+function getUAString() {
+  var uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands) {
+    return uaData.brands.map(function (item) {
+      return item.brand + "/" + item.version;
+    }).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
   if (includeScale === void 0) {
     includeScale = false;
   }
 
-  var rect = element.getBoundingClientRect();
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  var clientRect = element.getBoundingClientRect();
   var scaleX = 1;
   var scaleY = 1;
 
-  if (isHTMLElement(element) && includeScale) {
-    var offsetHeight = element.offsetHeight;
-    var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
-    // Fallback to 1 in case both values are `0`
-
-    if (offsetWidth > 0) {
-      scaleX = round(rect.width) / offsetWidth || 1;
-    }
-
-    if (offsetHeight > 0) {
-      scaleY = round(rect.height) / offsetHeight || 1;
-    }
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
   }
 
+  var _ref = isElement(element) ? getWindow(element) : window,
+      visualViewport = _ref.visualViewport;
+
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
   return {
-    width: rect.width / scaleX,
-    height: rect.height / scaleY,
-    top: rect.top / scaleY,
-    right: rect.right / scaleX,
-    bottom: rect.bottom / scaleY,
-    left: rect.left / scaleX,
-    x: rect.left / scaleX,
-    y: rect.top / scaleY
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
   };
 }
 
@@ -4372,8 +4401,8 @@ function getTrueOffsetParent(element) {
 
 
 function getContainingBlock(element) {
-  var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
-  var isIE = navigator.userAgent.indexOf('Trident') !== -1;
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
 
   if (isIE && isHTMLElement(element)) {
     // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
@@ -4813,31 +4842,21 @@ function getWindowScrollBarX(element) {
   return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
 }
 
-function getViewportRect(element) {
+function getViewportRect(element, strategy) {
   var win = getWindow(element);
   var html = getDocumentElement(element);
   var visualViewport = win.visualViewport;
   var width = html.clientWidth;
   var height = html.clientHeight;
   var x = 0;
-  var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
-  // can be obscured underneath it.
-  // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
-  // if it isn't open, so if this isn't available, the popper will be detected
-  // to overflow the bottom of the screen too early.
+  var y = 0;
 
   if (visualViewport) {
     width = visualViewport.width;
-    height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
-    // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
-    // errors due to floating point numbers, so we need to check precision.
-    // Safari returns a number <= 0, usually < -1 when pinch-zoomed
-    // Feature detection fails in mobile emulation mode in Chrome.
-    // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
-    // 0.001
-    // Fallback here: "Not Safari" userAgent
-
-    if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+    height = visualViewport.height;
+    var layoutViewport = isLayoutViewport();
+
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
     }
@@ -4931,8 +4950,8 @@ function rectToClientRect(rect) {
   });
 }
 
-function getInnerBoundingClientRect(element) {
-  var rect = getBoundingClientRect(element);
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === 'fixed');
   rect.top = rect.top + element.clientTop;
   rect.left = rect.left + element.clientLeft;
   rect.bottom = rect.top + element.clientHeight;
@@ -4944,8 +4963,8 @@ function getInnerBoundingClientRect(element) {
   return rect;
 }
 
-function getClientRectFromMixedType(element, clippingParent) {
-  return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
 } // A "clipping parent" is an overflowable container with the characteristic of
 // clipping (or hiding) overflowing elements with a position different from
 // `initial`
@@ -4968,18 +4987,18 @@ function getClippingParents(element) {
 // clipping parents
 
 
-function getClippingRect(element, boundary, rootBoundary) {
+function getClippingRect(element, boundary, rootBoundary, strategy) {
   var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
   var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
   var firstClippingParent = clippingParents[0];
   var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
-    var rect = getClientRectFromMixedType(element, clippingParent);
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
     accRect.top = max(rect.top, accRect.top);
     accRect.right = min(rect.right, accRect.right);
     accRect.bottom = min(rect.bottom, accRect.bottom);
     accRect.left = max(rect.left, accRect.left);
     return accRect;
-  }, getClientRectFromMixedType(element, firstClippingParent));
+  }, getClientRectFromMixedType(element, firstClippingParent, strategy));
   clippingRect.width = clippingRect.right - clippingRect.left;
   clippingRect.height = clippingRect.bottom - clippingRect.top;
   clippingRect.x = clippingRect.left;
@@ -5060,6 +5079,8 @@ function detectOverflow(state, options) {
   var _options = options,
       _options$placement = _options.placement,
       placement = _options$placement === void 0 ? state.placement : _options$placement,
+      _options$strategy = _options.strategy,
+      strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
       _options$boundary = _options.boundary,
       boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
       _options$rootBoundary = _options.rootBoundary,
@@ -5074,7 +5095,7 @@ function detectOverflow(state, options) {
   var altContext = elementContext === popper ? reference : popper;
   var popperRect = state.rects.popper;
   var element = state.elements[altBoundary ? altContext : elementContext];
-  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
   var referenceClientRect = getBoundingClientRect(state.elements.reference);
   var popperOffsets = computeOffsets({
     reference: referenceClientRect,
@@ -5592,7 +5613,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
   var isOffsetParentAnElement = isHTMLElement(offsetParent);
   var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
   var documentElement = getDocumentElement(offsetParent);
-  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
+  var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
   var scroll = {
     scrollLeft: 0,
     scrollTop: 0
@@ -6464,7 +6485,11 @@ var CDropdown = React.forwardRef(function (_a, ref) {
     };
     var _className = classNames(variant === 'nav-item' ? 'nav-item dropdown' : variant, {
         show: _visible,
-    }, direction, className);
+    }, direction === 'center'
+        ? 'dropdown-center'
+        : direction === 'dropup-center'
+            ? 'dropup dropup-center'
+            : direction, className);
     React.useEffect(function () {
         setVisible(visible);
     }, [visible]);
@@ -6498,7 +6523,7 @@ CDropdown.propTypes = {
     className: propTypes.exports.string,
     component: propTypes.exports.elementType,
     dark: propTypes.exports.bool,
-    direction: propTypes.exports.oneOf(['dropup', 'dropend', 'dropstart']),
+    direction: propTypes.exports.oneOf(['center', 'dropup', 'dropup-center', 'dropend', 'dropstart']),
     onHide: propTypes.exports.func,
     onShow: propTypes.exports.func,
     placement: placementPropType,
@@ -6587,9 +6612,15 @@ var CDropdownMenu = function (_a) {
         }
     };
     var _placement = placement;
+    if (direction === 'center') {
+        _placement = 'bottom';
+    }
     if (direction === 'dropup') {
         _placement = 'top-start';
     }
+    if (direction === 'dropup-center') {
+        _placement = 'top';
+    }
     if (direction === 'dropend') {
         _placement = 'right-start';
     }
@@ -7350,6 +7381,10 @@ var CModal = React.forwardRef(function (_a, ref) {
     React.useLayoutEffect(function () {
         if (_visible) {
             document.body.classList.add('modal-open');
+            if (backdrop) {
+                document.body.style.overflow = 'hidden';
+                document.body.style.paddingRight = '0px';
+            }
             setTimeout(function () {
                 var _a;
                 (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -7357,8 +7392,18 @@ var CModal = React.forwardRef(function (_a, ref) {
         }
         else {
             document.body.classList.remove('modal-open');
+            if (backdrop) {
+                document.body.style.removeProperty('overflow');
+                document.body.style.removeProperty('padding-right');
+            }
         }
-        return function () { return document.body.classList.remove('modal-open'); };
+        return function () {
+            document.body.classList.remove('modal-open');
+            if (backdrop) {
+                document.body.style.removeProperty('overflow');
+                document.body.style.removeProperty('padding-right');
+            }
+        };
     }, [_visible]);
     var handleClickOutside = function (event) {
         if (modalContentRef.current &&
@@ -7501,7 +7546,10 @@ var CSidebarNav = React.forwardRef(function (_a, ref) {
     return (React__default["default"].createElement("ul", __assign({ className: classes, ref: ref }, rest),
         React__default["default"].createElement(CNavContext.Provider, { value: CNavContextValues }, React__default["default"].Children.map(children, function (child, index) {
             if (React__default["default"].isValidElement(child)) {
-                return React__default["default"].cloneElement(child, { key: index, idx: "".concat(index) });
+                return React__default["default"].cloneElement(child, {
+                    key: index,
+                    idx: "".concat(index),
+                });
             }
             return;
         }))));
@@ -7561,7 +7609,10 @@ var CNavGroup = React.forwardRef(function (_a, ref) {
                 compact: compact,
             }), style: __assign(__assign({}, style), transitionStyles[state]), ref: navItemsRef }, React__default["default"].Children.map(children, function (child, index) {
             if (React__default["default"].isValidElement(child)) {
-                return React__default["default"].cloneElement(child, { key: index, idx: "".concat(idx, ".").concat(index) });
+                return React__default["default"].cloneElement(child, {
+                    key: index,
+                    idx: "".concat(idx, ".").concat(index),
+                });
             }
             return;
         }))); })));
@@ -8271,6 +8322,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["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 = 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, 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"]);
@@ -8310,18 +8374,17 @@ var CTable = React.forwardRef(function (_a, ref) {
                 : 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));
+    return (React__default["default"].createElement(CTableResponsiveWrapper, { responsive: responsive },
+        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)); })))))));
 });
 CTable.propTypes = {
     align: propTypes.exports.oneOf(['bottom', 'middle', 'top']),
@@ -8430,7 +8493,7 @@ var CToast = React.forwardRef(function (_a, ref) {
     return (React__default["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["default"].createElement(CToastContext.Provider, { value: contextValues },
-            React__default["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["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 = {