@coreui/react 4.11.0 → 4.11.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.11.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.11.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/index.es.js

@@ -6107,8 +6107,7 @@ var CModal = forwardRef(function (_a, ref) {
         };
     }, [_visible]);
     var handleClickOutside = function (event) {
-        if (modalContentRef.current &&
-            !modalContentRef.current.contains(event.target)) {
+        if (modalRef.current && modalRef.current == event.target) {
             handleDismiss();
         }
     };
@@ -6674,10 +6673,11 @@ CProgress.propTypes = {
 CProgress.displayName = 'CProgress';
 
 var CPopover = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, container = _a.container, 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", "container", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "title", "trigger", "visible"]);
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, container = _a.container, 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; _a.onShow; var _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", "container", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "title", "trigger", "visible"]);
     var popoverRef = useRef(null);
     var togglerRef = useRef(null);
     var forkedRef = useForkedRef(ref, popoverRef);
+    var uID = useRef("popover".concat(Math.floor(Math.random() * 1000000)));
     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;
@@ -6707,14 +6707,6 @@ var CPopover = forwardRef(function (_a, ref) {
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
-    useEffect(function () {
-        if (_visible && togglerRef.current && popoverRef.current) {
-            initPopper(togglerRef.current, popoverRef.current, popperConfig);
-        }
-        return function () {
-            destroyPopper();
-        };
-    }, [_visible]);
     var toggleVisible = function (visible) {
         if (visible) {
             setTimeout(function () { return setVisible(true); }, _delay.show);
@@ -6723,7 +6715,9 @@ var CPopover = forwardRef(function (_a, ref) {
         setTimeout(function () { return setVisible(false); }, _delay.hide);
     };
     return (React.createElement(React.Fragment, null,
-        React.cloneElement(children, __assign(__assign(__assign({ ref: togglerRef }, ((trigger === 'click' || trigger.includes('click')) && {
+        React.cloneElement(children, __assign(__assign(__assign(__assign(__assign({}, (_visible && {
+            'aria-describedby': uID.current,
+        })), { ref: togglerRef }), ((trigger === 'click' || trigger.includes('click')) && {
             onClick: function () { return toggleVisible(!_visible); },
         })), ((trigger === 'focus' || trigger.includes('focus')) && {
             onFocus: function () { return toggleVisible(true); },
@@ -6733,7 +6727,17 @@ var CPopover = forwardRef(function (_a, ref) {
             onMouseLeave: function () { return toggleVisible(false); },
         }))),
         React.createElement(CConditionalPortal, { container: container, portal: true },
-            React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: popoverRef, onEnter: onShow, onExit: onHide, timeout: {
+            React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: popoverRef, onEnter: function () {
+                    if (togglerRef.current && popoverRef.current) {
+                        initPopper(togglerRef.current, popoverRef.current, popperConfig);
+                    }
+                }, onEntering: function () {
+                    if (togglerRef.current && popoverRef.current) {
+                        popoverRef.current.style.display = 'initial';
+                    }
+                }, onExit: onHide, onExited: function () {
+                    destroyPopper();
+                }, timeout: {
                     enter: 0,
                     exit: popoverRef.current
                         ? getTransitionDurationFromElement(popoverRef.current) + 50
@@ -6741,7 +6745,9 @@ var CPopover = forwardRef(function (_a, ref) {
                 }, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames('popover', 'bs-popover-auto', {
                     fade: animation,
                     show: state === 'entered',
-                }, className), ref: forkedRef, role: "tooltip" }, rest),
+                }, className), id: uID.current, ref: forkedRef, role: "tooltip", style: {
+                    display: 'none',
+                } }, rest),
                 React.createElement("div", { className: "popover-arrow" }),
                 React.createElement("div", { className: "popover-header" }, title),
                 React.createElement("div", { className: "popover-body" }, content))); }))));
@@ -7291,10 +7297,11 @@ CToaster.propTypes = {
 CToaster.displayName = 'CToaster';
 
 var CTooltip = forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, container = _a.container, 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", "container", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
+    var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, container = _a.container, 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; _a.onShow; var _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", "container", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
     var tooltipRef = useRef(null);
     var togglerRef = useRef(null);
     var forkedRef = useForkedRef(ref, tooltipRef);
+    var uID = useRef("tooltip".concat(Math.floor(Math.random() * 1000000)));
     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;
@@ -7324,14 +7331,6 @@ var CTooltip = forwardRef(function (_a, ref) {
     useEffect(function () {
         setVisible(visible);
     }, [visible]);
-    useEffect(function () {
-        if (_visible && togglerRef.current && tooltipRef.current) {
-            initPopper(togglerRef.current, tooltipRef.current, popperConfig);
-        }
-        return function () {
-            destroyPopper();
-        };
-    }, [_visible]);
     var toggleVisible = function (visible) {
         if (visible) {
             setTimeout(function () { return setVisible(true); }, _delay.show);
@@ -7340,7 +7339,9 @@ var CTooltip = forwardRef(function (_a, ref) {
         setTimeout(function () { return setVisible(false); }, _delay.hide);
     };
     return (React.createElement(React.Fragment, null,
-        React.cloneElement(children, __assign(__assign(__assign({ ref: togglerRef }, ((trigger === 'click' || trigger.includes('click')) && {
+        React.cloneElement(children, __assign(__assign(__assign(__assign(__assign({}, (_visible && {
+            'aria-describedby': uID.current,
+        })), { ref: togglerRef }), ((trigger === 'click' || trigger.includes('click')) && {
             onClick: function () { return toggleVisible(!_visible); },
         })), ((trigger === 'focus' || trigger.includes('focus')) && {
             onFocus: function () { return toggleVisible(true); },
@@ -7350,7 +7351,17 @@ var CTooltip = forwardRef(function (_a, ref) {
             onMouseLeave: function () { return toggleVisible(false); },
         }))),
         React.createElement(CConditionalPortal, { container: container, portal: true },
-            React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: tooltipRef, onEnter: onShow, onExit: onHide, timeout: {
+            React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: tooltipRef, onEnter: function () {
+                    if (togglerRef.current && tooltipRef.current) {
+                        initPopper(togglerRef.current, tooltipRef.current, popperConfig);
+                    }
+                }, onEntering: function () {
+                    if (togglerRef.current && tooltipRef.current) {
+                        tooltipRef.current.style.display = 'initial';
+                    }
+                }, onExit: onHide, onExited: function () {
+                    destroyPopper();
+                }, timeout: {
                     enter: 0,
                     exit: tooltipRef.current
                         ? getTransitionDurationFromElement(tooltipRef.current) + 50
@@ -7358,7 +7369,9 @@ var CTooltip = forwardRef(function (_a, ref) {
                 }, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames('tooltip', 'bs-tooltip-auto', {
                     fade: animation,
                     show: state === 'entered',
-                }, className), ref: forkedRef, role: "tooltip" }, rest),
+                }, className), id: uID.current, ref: forkedRef, role: "tooltip", style: {
+                    display: 'none',
+                } }, rest),
                 React.createElement("div", { className: "tooltip-arrow" }),
                 React.createElement("div", { className: "tooltip-inner" }, content))); }))));
 });