@coreui/react 5.0.0-alpha.0 → 5.0.0-alpha.2

package/dist/index.js

@@ -4359,14 +4359,103 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
+var getTransitionDurationFromElement = function (element) {
+    if (!element) {
+        return 0;
+    }
+    // Get transition-duration of the element
+    var _a = window.getComputedStyle(element), transitionDuration = _a.transitionDuration, transitionDelay = _a.transitionDelay;
+    var floatTransitionDuration = Number.parseFloat(transitionDuration);
+    var floatTransitionDelay = Number.parseFloat(transitionDelay);
+    // Return 0 if element or transition duration is not found
+    if (!floatTransitionDuration && !floatTransitionDelay) {
+        return 0;
+    }
+    // If multiple durations are defined, take the first
+    transitionDuration = transitionDuration.split(',')[0];
+    transitionDelay = transitionDelay.split(',')[0];
+    return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * 1000;
+};
+
+var execute = function (callback) {
+    if (typeof callback === 'function') {
+        callback();
+    }
+};
+var triggerTransitionEnd = function (element) {
+    element.dispatchEvent(new Event('transitionend'));
+};
+var executeAfterTransition = function (callback, transitionElement, waitForTransition) {
+    if (waitForTransition === void 0) { waitForTransition = true; }
+    if (!waitForTransition) {
+        execute(callback);
+        return;
+    }
+    var durationPadding = 5;
+    var emulatedDuration = getTransitionDurationFromElement(transitionElement) + durationPadding;
+    var called = false;
+    var handler = function (_a) {
+        var target = _a.target;
+        if (target !== transitionElement) {
+            return;
+        }
+        called = true;
+        transitionElement.removeEventListener('transitionend', handler);
+        execute(callback);
+    };
+    transitionElement.addEventListener('transitionend', handler);
+    setTimeout(function () {
+        if (!called) {
+            triggerTransitionEnd(transitionElement);
+        }
+    }, emulatedDuration);
+};
+
+var isRTL = function (element) {
+    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
+        return true;
+    }
+    if (element) {
+        return element.closest('[dir="rtl"]') !== null;
+    }
+    return false;
+};
+
+var getRTLPlacement = function (placement, element) {
+    switch (placement) {
+        case 'right': {
+            return isRTL(element) ? 'left' : 'right';
+        }
+        case 'left': {
+            return isRTL(element) ? 'right' : 'left';
+        }
+        default: {
+            return placement;
+        }
+    }
+};
+
+var isInViewport = function (element) {
+    var rect = element.getBoundingClientRect();
+    return (Math.floor(rect.top) >= 0 &&
+        Math.floor(rect.left) >= 0 &&
+        Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&
+        Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth));
+};
+
 var usePopper = function () {
     var _popper = React.useRef();
+    var el = React.useRef();
     var initPopper = function (reference, popper, options) {
         _popper.current = createPopper(reference, popper, options);
+        el.current = popper;
     };
     var destroyPopper = function () {
-        if (_popper.current) {
-            _popper.current.destroy();
+        var popperInstance = _popper.current;
+        if (popperInstance && el.current) {
+            executeAfterTransition(function () {
+                popperInstance.destroy();
+            }, el.current);
         }
         _popper.current = undefined;
     };
@@ -4476,13 +4565,14 @@ CAccordionHeader.propTypes = {
 CAccordionHeader.displayName = 'CAccordionHeader';
 
 var CCloseButton = React.forwardRef(function (_a, ref) {
-    var className = _a.className, disabled = _a.disabled, white = _a.white, rest = __rest(_a, ["className", "disabled", "white"]);
+    var className = _a.className, dark = _a.dark, disabled = _a.disabled, white = _a.white, rest = __rest(_a, ["className", "dark", "disabled", "white"]);
     return (React.createElement("button", __assign({ type: "button", className: classNames('btn', 'btn-close', {
             'btn-close-white': white,
-        }, disabled, className), "aria-label": "Close", disabled: disabled }, rest, { ref: ref })));
+        }, disabled, className), "aria-label": "Close", disabled: disabled }, (dark && { 'data-coreui-theme': 'dark' }), rest, { ref: ref })));
 });
 CCloseButton.propTypes = {
     className: PropTypes.string,
+    dark: PropTypes.bool,
     disabled: PropTypes.bool,
     white: PropTypes.bool,
 };
@@ -4709,7 +4799,7 @@ CBreadcrumbItem.displayName = 'CBreadcrumbItem';
 var CButton = React.forwardRef(function (_a, ref) {
     var _b;
     var children = _a.children, className = _a.className, _c = _a.color, color = _c === void 0 ? 'primary' : _c, _d = _a.component, component = _d === void 0 ? 'button' : _d, shape = _a.shape, size = _a.size, _e = _a.type, type = _e === void 0 ? 'button' : _e, variant = _a.variant, rest = __rest(_a, ["children", "className", "color", "component", "shape", "size", "type", "variant"]);
-    return (React.createElement(CLink, __assign({ component: rest.href ? 'a' : component, type: type, className: classNames('btn', variant ? "btn-".concat(variant, "-").concat(color) : "btn-".concat(color), (_b = {}, _b["btn-".concat(size)] = size, _b), shape, className) }, rest, { ref: ref }), children));
+    return (React.createElement(CLink, __assign({ component: rest.href ? 'a' : component }, (!rest.href && { type: type }), { className: classNames('btn', variant ? "btn-".concat(variant, "-").concat(color) : "btn-".concat(color), (_b = {}, _b["btn-".concat(size)] = size, _b), shape, className) }, rest, { ref: ref }), children));
 });
 CButton.propTypes = {
     children: PropTypes.node,
@@ -4882,38 +4972,6 @@ CCardTitle.propTypes = {
 };
 CCardTitle.displayName = 'CCardTitle';
 
-var isRTL = function (element) {
-    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
-        return true;
-    }
-    if (element) {
-        return element.closest('[dir="rtl"]') !== null;
-    }
-    return false;
-};
-
-var getRTLPlacement = function (placement, element) {
-    switch (placement) {
-        case 'right': {
-            return isRTL(element) ? 'left' : 'right';
-        }
-        case 'left': {
-            return isRTL(element) ? 'right' : 'left';
-        }
-        default: {
-            return placement;
-        }
-    }
-};
-
-var isInViewport = function (element) {
-    var rect = element.getBoundingClientRect();
-    return (Math.floor(rect.top) >= 0 &&
-        Math.floor(rect.left) >= 0 &&
-        Math.floor(rect.bottom) <= (window.innerHeight || document.documentElement.clientHeight) &&
-        Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth));
-};
-
 var CCarouselContext = React.createContext({});
 var CCarousel = React.forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.activeIndex, activeIndex = _b === void 0 ? 0 : _b, className = _a.className, controls = _a.controls, dark = _a.dark, indicators = _a.indicators, _c = _a.interval, interval = _c === void 0 ? 5000 : _c, onSlid = _a.onSlid, onSlide = _a.onSlide, _d = _a.pause, pause = _d === void 0 ? 'hover' : _d, _e = _a.touch, touch = _e === void 0 ? true : _e, transition = _a.transition, _f = _a.wrap, wrap = _f === void 0 ? true : _f, rest = __rest(_a, ["children", "activeIndex", "className", "controls", "dark", "indicators", "interval", "onSlid", "onSlide", "pause", "touch", "transition", "wrap"]);
@@ -5018,17 +5076,18 @@ var CCarousel = React.forwardRef(function (_a, ref) {
         setTouchPosition(touchDown);
     };
     return (React.createElement("div", __assign({ className: classNames('carousel slide', {
-            'carousel-dark': dark,
             'carousel-fade': transition === 'crossfade',
-        }, className), onMouseEnter: _pause, onMouseLeave: cycle }, (touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove }), rest, { ref: forkedRef }),
+        }, className) }, (dark && { 'data-coreui-theme': 'dark' }), { onMouseEnter: _pause, onMouseLeave: cycle }, (touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove }), rest, { ref: forkedRef }),
         React.createElement(CCarouselContext.Provider, { value: {
                 setAnimating: setAnimating,
                 setCustomInterval: setCustomInterval,
             } },
-            indicators && (React.createElement("ol", { className: "carousel-indicators" }, Array.from({ length: itemsNumber }, function (_, i) { return i; }).map(function (index) {
-                return (React.createElement("li", { key: "indicator".concat(index), onClick: function () {
+            indicators && (React.createElement("div", { className: "carousel-indicators" }, Array.from({ length: itemsNumber }, function (_, i) { return i; }).map(function (index) {
+                return (React.createElement("button", __assign({ key: "indicator".concat(index), onClick: function () {
                         !animating && handleIndicatorClick(index);
-                    }, className: active === index ? 'active' : '', "data-coreui-target": "" }));
+                    }, className: classNames({
+                        active: active === index
+                    }), "data-coreui-target": "" }, (active === index && { 'aria-current': true }), { "aria-label": "Slide ".concat(index + 1) })));
             }))),
             React.createElement("div", { className: "carousel-inner" }, React.Children.map(children, function (child, index) {
                 if (React.isValidElement(child)) {
@@ -5161,6 +5220,18 @@ CConditionalPortal.propTypes = {
 };
 CConditionalPortal.displayName = 'CConditionalPortal';
 
+var getNextActiveElement = function (list, activeElement, shouldGetNext, isCycleAllowed) {
+    var listLength = list.length;
+    var index = list.indexOf(activeElement);
+    if (index === -1) {
+        return !shouldGetNext && isCycleAllowed ? list[listLength - 1] : list[0];
+    }
+    index += shouldGetNext ? 1 : -1;
+    if (isCycleAllowed) {
+        index = (index + listLength) % listLength;
+    }
+    return list[Math.max(0, Math.min(index, listLength - 1))];
+};
 var getPlacement = function (placement, direction, alignment, isRTL) {
     var _placement = placement;
     if (direction === 'dropup') {
@@ -5223,18 +5294,33 @@ var CDropdown = React.forwardRef(function (_a, ref) {
     }, [visible]);
     React.useEffect(function () {
         if (_visible && dropdownToggleRef.current && dropdownMenuRef.current) {
+            dropdownToggleRef.current.focus();
             popper && initPopper(dropdownToggleRef.current, dropdownMenuRef.current, popperConfig);
             window.addEventListener('mouseup', handleMouseUp);
             window.addEventListener('keyup', handleKeyup);
+            dropdownToggleRef.current.addEventListener('keydown', handleKeydown);
+            dropdownMenuRef.current.addEventListener('keydown', handleKeydown);
             onShow && onShow();
         }
         return function () {
             popper && destroyPopper();
             window.removeEventListener('mouseup', handleMouseUp);
             window.removeEventListener('keyup', handleKeyup);
+            dropdownToggleRef.current &&
+                dropdownToggleRef.current.removeEventListener('keydown', handleKeydown);
+            dropdownMenuRef.current &&
+                dropdownMenuRef.current.removeEventListener('keydown', handleKeydown);
             onHide && onHide();
         };
     }, [_visible]);
+    var handleKeydown = function (event) {
+        if (_visible && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            var target = event.target;
+            event.preventDefault();
+            var items = [].concat.apply([], Element.prototype.querySelectorAll.call(dropdownMenuRef.current, '.dropdown-item:not(.disabled):not(:disabled)'));
+            getNextActiveElement(items, target, event.key === 'ArrowDown', true).focus();
+        }
+    };
     var handleKeyup = function (event) {
         if (autoClose === false) {
             return;
@@ -5262,7 +5348,6 @@ var CDropdown = React.forwardRef(function (_a, ref) {
                 'dropup dropup-center': direction === 'dropup-center'
             },
             _b["".concat(direction)] = direction && direction !== 'center' && direction !== 'dropup-center',
-            _b.show = _visible,
             _b), className) }, rest, { ref: forkedRef }), children))));
 });
 var alignmentDirection = PropTypes.oneOf(['start', 'end']);
@@ -5356,9 +5441,8 @@ var CDropdownMenu = React.forwardRef(function (_a, ref) {
     var forkedRef = useForkedRef(ref, dropdownMenuRef);
     return (React.createElement(CConditionalPortal, { portal: portal !== null && portal !== void 0 ? portal : false },
         React.createElement(Component, __assign({ className: classNames('dropdown-menu', {
-                'dropdown-menu-dark': dark,
                 show: visible,
-            }, alignment && alignmentClassNames(alignment), className), ref: forkedRef, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), rest), Component === 'ul'
+            }, alignment && alignmentClassNames(alignment), className), ref: forkedRef, role: "menu", "aria-hidden": !visible }, (!popper && { 'data-coreui-popper': 'static' }), (dark && { 'data-coreui-theme': 'dark' }), rest), Component === 'ul'
             ? React.Children.map(children, function (child, index) {
                 if (React.isValidElement(child)) {
                     return React.createElement("li", { key: index }, React.cloneElement(child));
@@ -5376,7 +5460,7 @@ CDropdownMenu.displayName = 'CDropdownMenu';
 
 var CDropdownToggle = function (_a) {
     var children = _a.children, _b = _a.caret, caret = _b === void 0 ? true : _b, custom = _a.custom, className = _a.className, split = _a.split, _c = _a.trigger, trigger = _c === void 0 ? 'click' : _c, rest = __rest(_a, ["children", "caret", "custom", "className", "split", "trigger"]);
-    var _d = React.useContext(CDropdownContext), dropdownToggleRef = _d.dropdownToggleRef, variant = _d.variant, visible = _d.visible, setVisible = _d.setVisible;
+    var _d = React.useContext(CDropdownContext), dropdownToggleRef = _d.dropdownToggleRef, visible = _d.visible, setVisible = _d.setVisible;
     var triggers = __assign(__assign({}, ((trigger === 'click' || trigger.includes('click')) && {
         onClick: function (event) {
             event.preventDefault();
@@ -5389,17 +5473,13 @@ var CDropdownToggle = function (_a) {
     var togglerProps = __assign({ className: classNames({
             'dropdown-toggle': caret,
             'dropdown-toggle-split': split,
-            'nav-link': variant === 'nav-item',
+            show: visible,
         }, className), 'aria-expanded': visible }, (!rest.disabled && __assign({}, triggers)));
-    // We use any because Toggler can be `a` as well as `button`.
     var Toggler = function () {
         if (custom && React.isValidElement(children)) {
             return (React.createElement(React.Fragment, null, React.cloneElement(children, __assign(__assign({ 'aria-expanded': visible }, (!rest.disabled && __assign({}, triggers))), { ref: dropdownToggleRef }))));
         }
-        if (variant === 'nav-item') {
-            return (React.createElement("a", __assign({ href: "#" }, togglerProps, { ref: dropdownToggleRef }), children));
-        }
-        return (React.createElement(CButton, __assign({ type: "button" }, togglerProps, { tabIndex: 0 }, rest, { ref: dropdownToggleRef }),
+        return (React.createElement(CButton, __assign({}, togglerProps, { tabIndex: 0 }, rest, { ref: dropdownToggleRef }),
             children,
             split && React.createElement("span", { className: "visually-hidden" }, "Toggle Dropdown")));
     };
@@ -6019,12 +6099,13 @@ CModalDialog.displayName = 'CModalDialog';
 
 var CModalContext = React.createContext({});
 var CModal = React.forwardRef(function (_a, ref) {
-    var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, fullscreen = _a.fullscreen, _d = _a.keyboard, keyboard = _d === void 0 ? true : _d, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _e = _a.portal, portal = _e === void 0 ? true : _e, scrollable = _a.scrollable, size = _a.size, _f = _a.transition, transition = _f === void 0 ? true : _f, _g = _a.unmountOnClose, unmountOnClose = _g === void 0 ? true : _g, visible = _a.visible, rest = __rest(_a, ["children", "alignment", "backdrop", "className", "duration", "fullscreen", "keyboard", "onClose", "onClosePrevented", "onShow", "portal", "scrollable", "size", "transition", "unmountOnClose", "visible"]);
+    var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, _d = _a.focus, focus = _d === void 0 ? true : _d, fullscreen = _a.fullscreen, _e = _a.keyboard, keyboard = _e === void 0 ? true : _e, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _f = _a.portal, portal = _f === void 0 ? true : _f, scrollable = _a.scrollable, size = _a.size, _g = _a.transition, transition = _g === void 0 ? true : _g, _h = _a.unmountOnClose, unmountOnClose = _h === void 0 ? true : _h, visible = _a.visible, rest = __rest(_a, ["children", "alignment", "backdrop", "className", "duration", "focus", "fullscreen", "keyboard", "onClose", "onClosePrevented", "onShow", "portal", "scrollable", "size", "transition", "unmountOnClose", "visible"]);
+    var activeElementRef = React.useRef(null);
     var modalRef = React.useRef(null);
     var modalContentRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, modalRef);
-    var _h = React.useState(visible), _visible = _h[0], setVisible = _h[1];
-    var _j = React.useState(false), staticBackdrop = _j[0], setStaticBackdrop = _j[1];
+    var _j = React.useState(visible), _visible = _j[0], setVisible = _j[1];
+    var _k = React.useState(false), staticBackdrop = _k[0], setStaticBackdrop = _k[1];
     var contextValues = {
         visible: _visible,
         setVisible: setVisible,
@@ -6033,10 +6114,17 @@ var CModal = React.forwardRef(function (_a, ref) {
         setVisible(visible);
     }, [visible]);
     React.useEffect(function () {
-        document.addEventListener('click', handleClickOutside);
-        document.addEventListener('keydown', handleKeyDown);
+        var _a;
+        if (_visible) {
+            activeElementRef.current = document.activeElement;
+            document.addEventListener('mouseup', handleClickOutside);
+            document.addEventListener('keydown', handleKeyDown);
+        }
+        else {
+            (_a = activeElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
         return function () {
-            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('mouseup', handleClickOutside);
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [_visible]);
@@ -6061,7 +6149,7 @@ var CModal = React.forwardRef(function (_a, ref) {
             }
             setTimeout(function () {
                 var _a;
-                (_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                focus && ((_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.focus());
             }, transition ? duration : 0);
         }
         else {
@@ -6093,13 +6181,15 @@ var CModal = React.forwardRef(function (_a, ref) {
     return (React.createElement(React.Fragment, null,
         React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: modalRef, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: transition ? duration : 0 }, function (state) { return (React.createElement(CConditionalPortal, { portal: portal },
             React.createElement(CModalContext.Provider, { value: contextValues },
-                React.createElement("div", { className: classNames('modal', {
+                React.createElement("div", __assign({ className: classNames('modal', {
                         'modal-static': staticBackdrop,
                         fade: transition,
                         show: state === 'entered',
-                    }, className), tabIndex: -1, role: "dialog", style: __assign({}, (state !== 'exited' && { display: 'block' })), ref: forkedRef },
+                    }, className), tabIndex: -1 }, (_visible
+                    ? { 'aria-modal': true, role: 'dialog' }
+                    : { 'aria-hidden': 'true' }), { style: __assign({}, (state !== 'exited' && { display: 'block' })) }, rest, { ref: forkedRef }),
                     React.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
-                        React.createElement(CModalContent, __assign({}, rest, { ref: modalContentRef }), children)))))); }),
+                        React.createElement(CModalContent, { ref: modalContentRef }, children)))))); }),
         backdrop && (React.createElement(CConditionalPortal, { portal: portal },
             React.createElement(CBackdrop, { visible: _visible })))));
 });
@@ -6109,6 +6199,7 @@ CModal.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     duration: PropTypes.number,
+    focus: PropTypes.bool,
     fullscreen: PropTypes.oneOfType([
         PropTypes.bool,
         PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
@@ -6184,7 +6275,7 @@ CNav.propTypes = {
     className: PropTypes.string,
     component: PropTypes.elementType,
     layout: PropTypes.oneOf(['fill', 'justified']),
-    variant: PropTypes.oneOf(['tabs', 'pills']),
+    variant: PropTypes.oneOf(['pills', 'tabs', 'underline']),
 };
 CNav.displayName = 'CNav';
 
@@ -6223,14 +6314,19 @@ CSidebarNav.propTypes = {
 };
 CSidebarNav.displayName = 'CSidebarNav';
 
+var isInVisibleGroup = function (el1, el2) {
+    var array1 = el1.toString().split('.');
+    var array2 = el2.toString().split('.');
+    return array2.every(function (item, index) { return item === array1[index]; });
+};
 var CNavGroup = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, compact = _a.compact, idx = _a.idx, toggler = _a.toggler, visible = _a.visible, rest = __rest(_a, ["children", "className", "compact", "idx", "toggler", "visible"]);
     var _b = React.useState(), height = _b[0], setHeight = _b[1];
     var navItemsRef = React.useRef(null);
     var _c = React.useContext(CNavContext), visibleGroup = _c.visibleGroup, setVisibleGroup = _c.setVisibleGroup;
-    var _d = React.useState(Boolean(visible || (idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())))), _visible = _d[0], setVisible = _d[1];
+    var _d = React.useState(Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))), _visible = _d[0], setVisible = _d[1];
     React.useEffect(function () {
-        setVisible(Boolean(idx && visibleGroup && visibleGroup.toString().startsWith(idx.toString())));
+        setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)));
     }, [visibleGroup]);
     var handleTogglerOnCLick = function (event) {
         event.preventDefault();
@@ -6333,9 +6429,8 @@ var CNavbar = React.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, color = _a.color, colorScheme = _a.colorScheme, _c = _a.component, Component = _c === void 0 ? 'nav' : _c, container = _a.container, expand = _a.expand, placement = _a.placement, rest = __rest(_a, ["children", "className", "color", "colorScheme", "component", "container", "expand", "placement"]);
     return (React.createElement(Component, __assign({ className: classNames('navbar', (_b = {},
             _b["bg-".concat(color)] = color,
-            _b["navbar-".concat(colorScheme)] = colorScheme,
             _b[typeof expand === 'boolean' ? 'navbar-expand' : "navbar-expand-".concat(expand)] = expand,
-            _b), placement, className) }, rest, { ref: ref }), container ? (React.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React.createElement(React.Fragment, null, children))));
+            _b), placement, className) }, (colorScheme && { 'data-coreui-theme': colorScheme }), rest, { ref: ref }), container ? (React.createElement("div", { className: typeof container === 'string' ? "container-".concat(container) : 'container' }, children)) : (React.createElement(React.Fragment, null, children))));
 });
 CNavbar.propTypes = {
     children: PropTypes.node,
@@ -6406,7 +6501,7 @@ CNavbarToggler.propTypes = {
 CNavbarToggler.displayName = 'CNavbarToggler';
 
 var COffcanvas = React.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.keyboard, keyboard = _c === void 0 ? true : _c, onHide = _a.onHide, onShow = _a.onShow, placement = _a.placement, _d = _a.portal, portal = _d === void 0 ? false : _d, _e = _a.responsive, responsive = _e === void 0 ? true : _e, _f = _a.scroll, scroll = _f === void 0 ? false : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest(_a, ["children", "backdrop", "className", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
+    var children = _a.children, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, dark = _a.dark, _c = _a.keyboard, keyboard = _c === void 0 ? true : _c, onHide = _a.onHide, onShow = _a.onShow, placement = _a.placement, _d = _a.portal, portal = _d === void 0 ? false : _d, _e = _a.responsive, responsive = _e === void 0 ? true : _e, _f = _a.scroll, scroll = _f === void 0 ? false : _f, _g = _a.visible, visible = _g === void 0 ? false : _g, rest = __rest(_a, ["children", "backdrop", "className", "dark", "keyboard", "onHide", "onShow", "placement", "portal", "responsive", "scroll", "visible"]);
     var _h = React.useState(visible), _visible = _h[0], setVisible = _h[1];
     var offcanvasRef = React.useRef(null);
     var forkedRef = useForkedRef(ref, offcanvasRef);
@@ -6447,7 +6542,7 @@ var COffcanvas = React.forwardRef(function (_a, ref) {
                         _a.showing = state === 'entering',
                         _a.show = state === 'entered',
                         _a['show hiding'] = state === 'exiting',
-                        _a), className), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, rest, { ref: forkedRef }), children)));
+                        _a), className), role: "dialog", tabIndex: -1, onKeyDown: handleKeyDown }, (dark && { 'data-coreui-theme': 'dark' }), rest, { ref: forkedRef }), children)));
         }),
         backdrop && (React.createElement(CConditionalPortal, { portal: portal },
             React.createElement(CBackdrop, { className: "offcanvas-backdrop", onClick: handleBackdropDismiss, visible: _visible })))));
@@ -6456,6 +6551,7 @@ COffcanvas.propTypes = {
     backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
     children: PropTypes.node,
     className: PropTypes.string,
+    dark: PropTypes.bool,
     keyboard: PropTypes.bool,
     onHide: PropTypes.func,
     onShow: PropTypes.func,
@@ -6699,7 +6795,7 @@ var CPopover = function (_a) {
         typeof window !== 'undefined' &&
             ReactDOM.createPortal(React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: popoverRef, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
-                    exit: 200,
+                    exit: popoverRef.current ? getTransitionDurationFromElement(popoverRef.current) + 50 : 200,
                 }, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames('popover', 'bs-popover-auto', {
                     fade: animation,
                     show: state === 'entered',
@@ -7312,7 +7408,7 @@ var CTooltip = function (_a) {
         typeof window !== 'undefined' &&
             ReactDOM.createPortal(React.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
-                    exit: 200,
+                    exit: tooltipRef.current ? getTransitionDurationFromElement(tooltipRef.current) + 50 : 200,
                 }, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames('tooltip', 'bs-tooltip-auto', {
                     fade: animation,
                     show: state === 'entered',
@@ -7344,7 +7440,7 @@ CTooltip.displayName = 'CTooltip';
 var CWidgetStatsA = React.forwardRef(function (_a, ref) {
     var _b;
     var action = _a.action, chart = _a.chart, className = _a.className, color = _a.color, title = _a.title, value = _a.value, rest = __rest(_a, ["action", "chart", "className", "color", "title", "value"]);
-    return (React.createElement(CCard, __assign({ className: classNames((_b = {}, _b["bg-".concat(color)] = color, _b['text-high-emphasis-inverse'] = color, _b), className) }, rest, { ref: ref }),
+    return (React.createElement(CCard, __assign({ className: classNames((_b = {}, _b["bg-".concat(color)] = color, _b['text-white'] = color, _b), className) }, rest, { ref: ref }),
         React.createElement(CCardBody, { className: "pb-0 d-flex justify-content-between align-items-start" },
             React.createElement("div", null,
                 value && React.createElement("div", { className: "fs-4 fw-semibold" }, value),
@@ -7364,12 +7460,12 @@ CWidgetStatsA.displayName = 'CWidgetStatsA';
 
 var CWidgetStatsB = React.forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, inverse = _a.inverse, progress = _a.progress, text = _a.text, title = _a.title, value = _a.value, rest = __rest(_a, ["className", "color", "inverse", "progress", "text", "title", "value"]);
-    return (React.createElement(CCard, __assign({ className: className, color: color }, (inverse && { textColor: 'high-emphasis-inverse' }), rest, { ref: ref }),
+    return (React.createElement(CCard, __assign({ className: className, color: color }, (inverse && { textColor: 'white' }), rest, { ref: ref }),
         React.createElement(CCardBody, null,
             value && React.createElement("div", { className: "fs-4 fw-semibold" }, value),
             title && React.createElement("div", null, title),
             React.createElement(CProgress, __assign({ className: "my-2", height: 4 }, (inverse && { white: true }), progress)),
-            text && (React.createElement("small", { className: inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis' }, text)))));
+            text && (React.createElement("small", { className: inverse ? 'text-white text-opacity-75' : 'text-body-secondary' }, text)))));
 });
 CWidgetStatsB.propTypes = {
     className: PropTypes.string,
@@ -7384,11 +7480,11 @@ CWidgetStatsB.displayName = 'CWidgetCWidgetStatsB';
 
 var CWidgetStatsC = React.forwardRef(function (_a, ref) {
     var className = _a.className, color = _a.color, icon = _a.icon, inverse = _a.inverse, progress = _a.progress, title = _a.title, value = _a.value, rest = __rest(_a, ["className", "color", "icon", "inverse", "progress", "title", "value"]);
-    return (React.createElement(CCard, __assign({ className: className, color: color }, (inverse && { textColor: 'high-emphasis-inverse' }), rest, { ref: ref }),
+    return (React.createElement(CCard, __assign({ className: className, color: color }, (inverse && { textColor: 'white' }), rest, { ref: ref }),
         React.createElement(CCardBody, null,
-            icon && (React.createElement("div", { className: "text-medium-emphasis".concat(inverse ? '-inverse' : '', " text-end mb-4") }, icon)),
-            value && (React.createElement("div", { className: "text-high-emphasis".concat(inverse ? '-inverse' : '', " fs-4 fw-semibold") }, value)),
-            title && (React.createElement("div", { className: inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis' }, title)),
+            icon && React.createElement("div", { className: "text-end mb-4" }, icon),
+            value && React.createElement("div", { className: "fs-4 fw-semibold" }, value),
+            title && (React.createElement("div", { className: inverse ? 'text-white text-opacity-75' : 'text-body-secondary' }, title)),
             React.createElement(CProgress, __assign({ className: "mt-3 mb-0", height: 4 }, (inverse && { white: true }), progress)))));
 });
 CWidgetStatsC.propTypes = {
@@ -7417,7 +7513,7 @@ var CWidgetStatsD = React.forwardRef(function (_a, ref) {
                     index % 2 !== 0 && React.createElement("div", { className: "vr" }),
                     React.createElement(CCol, null,
                         React.createElement("div", { className: "fs-5 fw-semibold" }, value.value),
-                        React.createElement("div", { className: "text-uppercase text-medium-emphasis small" }, value.title))));
+                        React.createElement("div", { className: "text-uppercase text-body-secondary small" }, value.title))));
             }))));
 });
 CWidgetStatsD.propTypes = {
@@ -7433,7 +7529,7 @@ var CWidgetStatsE = React.forwardRef(function (_a, ref) {
     var chart = _a.chart, className = _a.className, title = _a.title, value = _a.value, rest = __rest(_a, ["chart", "className", "title", "value"]);
     return (React.createElement(CCard, __assign({ className: classNames(className) }, rest, { ref: ref }),
         React.createElement(CCardBody, { className: "text-center" },
-            title && (React.createElement("div", { className: "text-medium-emphasis small text-uppercase fw-semibold" }, title)),
+            title && (React.createElement("div", { className: "text-body-secondary small text-uppercase fw-semibold" }, title)),
             value && React.createElement("div", { className: "fs-6 fw-semibold py-3" }, value),
             chart)));
 });
@@ -7453,7 +7549,7 @@ var CWidgetStatsF = React.forwardRef(function (_a, ref) {
             React.createElement("div", { className: "me-3 text-white bg-".concat(color, " ").concat(padding ? 'p-3' : 'p-4') }, icon),
             React.createElement("div", null,
                 React.createElement("div", { className: "fs-6 fw-semibold text-".concat(color) }, value),
-                React.createElement("div", { className: "text-medium-emphasis text-uppercase fw-semibold small" }, title))),
+                React.createElement("div", { className: "text-body-secondary text-uppercase fw-semibold small" }, title))),
         footer && React.createElement(CCardFooter, null, footer)));
 });
 CWidgetStatsF.propTypes = {