@coreui/react 4.3.1 → 4.4.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.3.1.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.4.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/Types.d.ts

@@ -1,12 +1,12 @@
 import PropTypes from 'prop-types';
-export declare type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-export declare type Colors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string;
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type Colors = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string;
 export declare const colorPropType: PropTypes.Requireable<string>;
-export declare type Placements = 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end' | undefined;
+export type Placements = 'auto' | 'auto-start' | 'auto-end' | 'top-end' | 'top' | 'top-start' | 'bottom-end' | 'bottom' | 'bottom-start' | 'right-start' | 'right' | 'right-end' | 'left-start' | 'left' | 'left-end' | undefined;
 export declare const placementPropType: PropTypes.Requireable<Placements>;
-export declare type Shapes = 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string;
+export type Shapes = 'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string;
 export declare const shapePropType: PropTypes.Requireable<string>;
-export declare type TextColors = Colors | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string;
+export type TextColors = Colors | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string;
 export declare const textColorsPropType: PropTypes.Requireable<string>;
-export declare type Triggers = 'hover' | 'focus' | 'click';
+export type Triggers = 'hover' | 'focus' | 'click';
 export declare const triggerPropType: PropTypes.Requireable<Triggers>;

package/dist/components/button/CButton.d.ts

@@ -1,6 +1,7 @@
-import React, { ButtonHTMLAttributes, ElementType } from 'react';
+import React, { ElementType } from 'react';
 import { Colors, Shapes } from '../Types';
-export interface CButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+import { CLinkProps } from '../link/CLink';
+export interface CButtonProps extends Omit<CLinkProps, 'size'> {
     /**
      * Toggle the active state for the component.
      */
@@ -51,4 +52,4 @@ export interface CButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      */
     variant?: 'outline' | 'ghost';
 }
-export declare const CButton: React.ForwardRefExoticComponent<CButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export declare const CButton: React.ForwardRefExoticComponent<CButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/dropdown/CDropdown.d.ts

@@ -1,7 +1,7 @@
 import React, { ElementType, HTMLAttributes, RefObject } from 'react';
 import { Placements } from '../Types';
-export declare type Directions = 'start' | 'end';
-export declare type Breakpoints = {
+export type Directions = 'start' | 'end';
+export type Breakpoints = {
     xs: Directions;
 } | {
     sm: Directions;
@@ -14,7 +14,7 @@ export declare type Breakpoints = {
 } | {
     xxl: Directions;
 };
-export declare type Alignments = Directions | Breakpoints;
+export type Alignments = Directions | Breakpoints;
 export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIElement> {
     /**
      * Set aligment of dropdown menu.
@@ -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/components/dropdown/CDropdownItem.d.ts

@@ -10,4 +10,4 @@ export interface CDropdownItemProps extends CLinkProps {
      */
     component?: string | ElementType;
 }
-export declare const CDropdownItem: React.ForwardRefExoticComponent<CDropdownItemProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export declare const CDropdownItem: React.ForwardRefExoticComponent<CDropdownItemProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/form/CFormCheck.d.ts

@@ -1,7 +1,7 @@
 import React, { InputHTMLAttributes, ReactNode } from 'react';
 import { Colors, Shapes } from '../Types';
 import { CFormControlValidationProps } from './CFormControlValidation';
-export declare type ButtonObject = {
+export type ButtonObject = {
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *

package/dist/components/form/CFormLabel.d.ts

@@ -1,5 +1,5 @@
-import React, { AllHTMLAttributes } from 'react';
-export interface CFormLabelProps extends AllHTMLAttributes<HTMLLabelElement> {
+import React, { LabelHTMLAttributes } from 'react';
+export interface CFormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     /**
      * A string of all className you want applied to the component.
      */

package/dist/components/form/CFormRange.d.ts

@@ -33,7 +33,7 @@ export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
     /**
      * Specifies the interval between legal numbers in the component.
      */
-    steps: number;
+    step?: number;
     /**
      * The `value` attribute of component.
      *

package/dist/components/form/CFormSelect.d.ts

@@ -1,6 +1,6 @@
 import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
 import { CFormControlWrapperProps } from './CFormControlWrapper';
-declare type Option = {
+type Option = {
     disabled?: boolean;
     label?: string;
     value?: string;

package/dist/components/form/CInputGroupText.d.ts

@@ -1,5 +1,5 @@
-import React, { ElementType, HTMLAttributes } from 'react';
-export interface CInputGroupTextProps extends HTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
+import React, { ElementType, LabelHTMLAttributes } from 'react';
+export interface CInputGroupTextProps extends LabelHTMLAttributes<HTMLLabelElement | HTMLSpanElement> {
     /**
      * A string of all className you want applied to the component.
      */

package/dist/components/form/index.d.ts

@@ -1,5 +1,7 @@
 import { CForm } from './CForm';
 import { CFormCheck } from './CFormCheck';
+import { CFormControlValidation } from './CFormControlValidation';
+import { CFormControlWrapper } from './CFormControlWrapper';
 import { CFormFeedback } from './CFormFeedback';
 import { CFormFloating } from './CFormFloating';
 import { CFormInput } from './CFormInput';
@@ -11,4 +13,4 @@ import { CFormText } from './CFormText';
 import { CFormTextarea } from './CFormTextarea';
 import { CInputGroup } from './CInputGroup';
 import { CInputGroupText } from './CInputGroupText';
-export { CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CInputGroup, CInputGroupText, };
+export { CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CInputGroup, CInputGroupText, };

package/dist/components/grid/CCol.d.ts

@@ -1,11 +1,11 @@
 import React, { HTMLAttributes } from 'react';
-declare type Span = 'auto' | number | string | boolean | null;
-declare type BPObject = {
+type Span = 'auto' | number | string | boolean | null;
+type BPObject = {
     span?: Span;
     offset?: number | string | null;
     order?: 'first' | 'last' | number | string | null;
 };
-declare type Col = Span | BPObject;
+type Col = Span | BPObject;
 export interface CColProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * A string of all className you want applied to the base component.

package/dist/components/grid/CRow.d.ts

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-export declare type BPObject = {
+export type BPObject = {
     cols?: 'auto' | number | string | null;
     gutter?: number | string | null;
     gutterX?: number | string | null;

package/dist/components/header/CHeaderBrand.d.ts

@@ -1,5 +1,5 @@
-import React, { ElementType, HTMLAttributes } from 'react';
-export interface CHeaderBrandProps extends HTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
+import React, { ElementType, AnchorHTMLAttributes } from 'react';
+export interface CHeaderBrandProps extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> {
     /**
      * A string of all className you want applied to the component.
      */

package/dist/components/link/CLink.d.ts

@@ -1,5 +1,5 @@
 import React, { AllHTMLAttributes, ElementType } from 'react';
-export interface CLinkProps extends AllHTMLAttributes<HTMLElement> {
+export interface CLinkProps extends AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
     /**
      * Toggle the active state for the component.
      */
@@ -21,4 +21,4 @@ export interface CLinkProps extends AllHTMLAttributes<HTMLElement> {
      */
     href?: string;
 }
-export declare const CLink: React.ForwardRefExoticComponent<CLinkProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export declare const CLink: React.ForwardRefExoticComponent<CLinkProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/components/list-group/CListGroupItem.d.ts

@@ -1,6 +1,6 @@
-import React, { ElementType, HTMLAttributes } from 'react';
+import React, { ElementType, AnchorHTMLAttributes } from 'react';
 import { Colors } from '../Types';
-export interface CListGroupItemProps extends HTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
+export interface CListGroupItemProps extends AnchorHTMLAttributes<HTMLLIElement | HTMLAnchorElement | HTMLButtonElement> {
     /**
      * Toggle the active state for the component.
      */
@@ -24,4 +24,4 @@ export interface CListGroupItemProps extends HTMLAttributes<HTMLLIElement | HTML
      */
     component?: string | ElementType;
 }
-export declare const CListGroupItem: React.ForwardRefExoticComponent<CListGroupItemProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLLIElement>>;
+export declare const CListGroupItem: React.ForwardRefExoticComponent<CListGroupItemProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLLIElement>>;

package/dist/components/nav/CNavLink.d.ts

@@ -26,4 +26,4 @@ export interface CNavLinkProps extends Omit<CLinkProps, 'idx'> {
      */
     to?: string;
 }
-export declare const CNavLink: React.ForwardRefExoticComponent<CNavLinkProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLLIElement>>;
+export declare const CNavLink: React.ForwardRefExoticComponent<CNavLinkProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLLIElement>>;

package/dist/components/toast/CToastClose.d.ts

@@ -1,9 +1,12 @@
 import React, { ElementType } from 'react';
 import { CCloseButtonProps } from '../close-button/CCloseButton';
-export interface CToastCloseProps extends CCloseButtonProps {
+import type { CButtonProps } from '../button/CButton';
+type CombineButtonProps = CCloseButtonProps & CButtonProps;
+export interface CToastCloseProps extends CombineButtonProps {
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
     component?: string | ElementType;
 }
 export declare const CToastClose: React.ForwardRefExoticComponent<CToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/widgets/CWidgetStatsD.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
 import { Colors } from '../Types';
-declare type Value = {
+type Value = {
     title?: string | ReactNode;
     value?: number | string | ReactNode;
 };

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);
+						}
 					}
 				}
 			}
@@ -1337,14 +1338,12 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
   return _extends.apply(this, arguments);
@@ -1355,13 +1354,11 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
-
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
-
   return target;
 }
 
@@ -2471,7 +2468,6 @@ function _assertThisInitialized(self) {
   if (self === void 0) {
     throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   }
-
   return self;
 }
 
@@ -4228,38 +4224,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 +4369,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 +4810,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 +4918,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 +4931,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 +4955,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 +5047,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 +5063,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 +5581,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 +6453,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 +6491,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 +6580,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 +7349,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 +7360,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 +7514,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 +7577,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;
         }))); })));
@@ -8725,5 +8762,5 @@ CWidgetStatsF.propTypes = {
 };
 CWidgetStatsF.displayName = 'CWidgetStatsF';
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CFooter, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CContainer, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF };
 //# sourceMappingURL=index.es.js.map