@coreui/react 4.9.2 → 4.10.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.9.2.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.10.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/modal/CModal.d.ts

@@ -16,6 +16,12 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
      * @ignore
      */
     duration?: number;
+    /**
+     * Puts the focus on the modal when shown.
+     *
+     * @since v4.10.0
+     */
+    focus?: boolean;
     /**
      * Set modal to covers the entire user viewport.
      */

package/dist/components/popover/CPopover.d.ts

@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import type { Placements, Triggers } from '../../types';
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
     /**
@@ -61,4 +61,4 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
      */
     visible?: boolean;
 }
-export declare const CPopover: FC<CPopoverProps>;
+export declare const CPopover: React.ForwardRefExoticComponent<CPopoverProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tooltip/CTooltip copy.d.ts

@@ -0,0 +1,60 @@
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import type { Placements, Triggers } from '../../types';
+export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+    /**
+     * Apply a CSS fade transition to the tooltip.
+     *
+     * @since 4.9.0
+     */
+    animation?: boolean;
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+    /**
+     * Content node for your component.
+     */
+    content: ReactNode | string;
+    /**
+     * The delay for displaying and hiding the tooltip (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+     *
+     * @since 4.9.0
+     */
+    delay?: number | {
+        show: number;
+        hide: number;
+    };
+    /**
+     * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+     *
+     * @since 4.9.0
+     */
+    fallbackPlacements?: Placements | Placements[];
+    /**
+     * Offset of the tooltip relative to its target.
+     */
+    offset?: [number, number];
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    onHide?: () => void;
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    onShow?: () => void;
+    /**
+     * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+     *
+     * @type 'hover' | 'focus' | 'click'
+     */
+    trigger?: Triggers | Triggers[];
+    /**
+     * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
+     */
+    placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Toggle the visibility of tooltip component.
+     */
+    visible?: boolean;
+}
+export declare const CTooltip: FC<CTooltipProps>;

package/dist/components/tooltip/CTooltip.d.ts

@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import type { Placements, Triggers } from '../../types';
 export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
     /**
@@ -57,4 +57,4 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
      */
     visible?: boolean;
 }
-export declare const CTooltip: FC<CTooltipProps>;
+export declare const CTooltip: React.ForwardRefExoticComponent<CTooltipProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.es.js

@@ -4309,14 +4309,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 = useRef();
+    var el = 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;
     };
@@ -4832,38 +4921,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 = createContext({});
 var CCarousel = 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"]);
@@ -5969,12 +6026,13 @@ CModalDialog.displayName = 'CModalDialog';
 
 var CModalContext = createContext({});
 var CModal = 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 = useRef(null);
     var modalRef = useRef(null);
     var modalContentRef = useRef(null);
     var forkedRef = useForkedRef(ref, modalRef);
-    var _h = useState(visible), _visible = _h[0], setVisible = _h[1];
-    var _j = useState(false), staticBackdrop = _j[0], setStaticBackdrop = _j[1];
+    var _j = useState(visible), _visible = _j[0], setVisible = _j[1];
+    var _k = useState(false), staticBackdrop = _k[0], setStaticBackdrop = _k[1];
     var contextValues = {
         visible: _visible,
         setVisible: setVisible,
@@ -5983,10 +6041,15 @@ var CModal = forwardRef(function (_a, ref) {
         setVisible(visible);
     }, [visible]);
     useEffect(function () {
+        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('mouseup', handleClickOutside);
             document.removeEventListener('keydown', handleKeyDown);
@@ -6013,7 +6076,7 @@ var CModal = 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 {
@@ -6045,13 +6108,15 @@ var CModal = 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 })))));
 });
@@ -6061,6 +6126,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']),
@@ -6595,10 +6661,11 @@ CProgress.propTypes = {
 };
 CProgress.displayName = 'CProgress';
 
-var CPopover = function (_a) {
+var CPopover = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, content = _a.content, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.fallbackPlacements, fallbackPlacements = _d === void 0 ? ['top', 'right', 'bottom', 'left'] : _d, _e = _a.offset, offset = _e === void 0 ? [0, 8] : _e, onHide = _a.onHide, onShow = _a.onShow, _f = _a.placement, placement = _f === void 0 ? 'top' : _f, title = _a.title, _g = _a.trigger, trigger = _g === void 0 ? 'click' : _g, visible = _a.visible, rest = __rest(_a, ["children", "animation", "className", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "title", "trigger", "visible"]);
     var popoverRef = useRef(null);
     var togglerRef = useRef(null);
+    var forkedRef = useForkedRef(ref, popoverRef);
     var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
     var _j = useState(visible), _visible = _j[0], setVisible = _j[1];
     var _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
@@ -6656,15 +6723,17 @@ var CPopover = function (_a) {
         typeof window !== 'undefined' &&
             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',
-                }, className), ref: popoverRef, role: "tooltip" }, rest),
+                }, className), ref: forkedRef, role: "tooltip" }, rest),
                 React.createElement("div", { className: "popover-arrow" }),
                 React.createElement("div", { className: "popover-header" }, title),
                 React.createElement("div", { className: "popover-body" }, content))); }), document.body)));
-};
+});
 CPopover.propTypes = {
     animation: PropTypes.bool,
     children: PropTypes.node,
@@ -7208,10 +7277,11 @@ CToaster.propTypes = {
 };
 CToaster.displayName = 'CToaster';
 
-var CTooltip = function (_a) {
+var CTooltip = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, content = _a.content, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.fallbackPlacements, fallbackPlacements = _d === void 0 ? ['top', 'right', 'bottom', 'left'] : _d, _e = _a.offset, offset = _e === void 0 ? [0, 6] : _e, onHide = _a.onHide, onShow = _a.onShow, _f = _a.placement, placement = _f === void 0 ? 'top' : _f, _g = _a.trigger, trigger = _g === void 0 ? ['hover', 'focus'] : _g, visible = _a.visible, rest = __rest(_a, ["children", "animation", "className", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
     var tooltipRef = useRef(null);
     var togglerRef = useRef(null);
+    var forkedRef = useForkedRef(ref, tooltipRef);
     var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
     var _j = useState(visible), _visible = _j[0], setVisible = _j[1];
     var _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
@@ -7267,16 +7337,18 @@ var CTooltip = function (_a) {
             onMouseLeave: function () { return toggleVisible(false); },
         }))),
         typeof window !== 'undefined' &&
-            createPortal(React.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onHide, timeout: {
+            createPortal(React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: tooltipRef, 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',
-                }, className), ref: tooltipRef, role: "tooltip" }, rest),
+                }, className), ref: forkedRef, role: "tooltip" }, rest),
                 React.createElement("div", { className: "tooltip-arrow" }),
                 React.createElement("div", { className: "tooltip-inner" }, content))); }), document.body)));
-};
+});
 CTooltip.propTypes = {
     animation: PropTypes.bool,
     children: PropTypes.node,