@coreui/react 4.3.1 → 4.4.0

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.3.1.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.4.0.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/dropdown/CDropdown.d.ts

@@ -44,10 +44,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
     dark?: boolean;
     /**
      * Sets a specified  direction and location of the dropdown menu.
-     *
-     * @type 'dropup' | 'dropend' | 'dropstart'
      */
-    direction?: 'dropup' | 'dropend' | 'dropstart';
+    direction?: 'center' | 'dropup' | 'dropup-center' | 'dropend' | 'dropstart';
     /**
      * Callback fired when the component requests to be hidden.
      */

package/dist/index.es.js

@@ -1236,9 +1236,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) {
@@ -1267,14 +1267,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);
+						}
 					}
 				}
 			}
@@ -4228,38 +4229,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
   };
 }
 
@@ -4354,8 +4374,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
@@ -4795,31 +4815,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;
     }
@@ -4913,8 +4923,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;
@@ -4926,8 +4936,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`
@@ -4950,18 +4960,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;
@@ -5042,6 +5052,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,
@@ -5056,7 +5068,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,
@@ -5574,7 +5586,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
@@ -6446,7 +6458,11 @@ var CDropdown = 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);
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
@@ -6480,7 +6496,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,
@@ -6569,9 +6585,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';
     }
@@ -7332,6 +7354,10 @@ var CModal = forwardRef(function (_a, ref) {
     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();
@@ -7339,8 +7365,18 @@ var CModal = 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 &&
@@ -7483,7 +7519,10 @@ var CSidebarNav = forwardRef(function (_a, ref) {
     return (React__default.createElement("ul", __assign({ className: classes, ref: ref }, rest),
         React__default.createElement(CNavContext.Provider, { value: CNavContextValues }, React__default.Children.map(children, function (child, index) {
             if (React__default.isValidElement(child)) {
-                return React__default.cloneElement(child, { key: index, idx: "".concat(index) });
+                return React__default.cloneElement(child, {
+                    key: index,
+                    idx: "".concat(index),
+                });
             }
             return;
         }))));
@@ -7543,7 +7582,10 @@ var CNavGroup = forwardRef(function (_a, ref) {
                 compact: compact,
             }), style: __assign(__assign({}, style), transitionStyles[state]), ref: navItemsRef }, React__default.Children.map(children, function (child, index) {
             if (React__default.isValidElement(child)) {
-                return React__default.cloneElement(child, { key: index, idx: "".concat(idx, ".").concat(index) });
+                return React__default.cloneElement(child, {
+                    key: index,
+                    idx: "".concat(idx, ".").concat(index),
+                });
             }
             return;
         }))); })));