@coreui/react-pro 4.13.0 → 4.13.2

package/dist/index.js

@@ -11136,7 +11136,7 @@ var CMultiSelect = React$1.forwardRef(function (_a, ref) {
         setSelected(selected.filter(function (option) { return option.disabled; }));
     };
     return (React$1.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, id: id, invalid: invalid, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: valid },
-        React$1.createElement(CMultiSelectNativeSelect, { id: id, multiple: multiple, options: selected, required: required, value: multiple
+        React$1.createElement(CMultiSelectNativeSelect, { className: 'form-multi-select', id: id, multiple: multiple, options: selected, required: required, value: multiple
                 ? selected.map(function (option) { return option.value.toString(); })
                 : selected.map(function (option) { return option.value; })[0], onChange: function () { return onChange && onChange(selected); }, ref: nativeSelectRef }),
         React$1.createElement("div", { className: classNames$1('form-multi-select', (_b = {
@@ -11639,10 +11639,11 @@ CProgress.propTypes = {
 };
 CProgress.displayName = 'CProgress';
 
-var CPopover = function (_a) {
+var CPopover = React$1.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$1(_a, ["children", "animation", "className", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "title", "trigger", "visible"]);
     var popoverRef = React$1.useRef(null);
     var togglerRef = React$1.useRef(null);
+    var forkedRef = useForkedRef(ref, popoverRef);
     var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
     var _j = React$1.useState(visible), _visible = _j[0], setVisible = _j[1];
     var _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
@@ -11700,15 +11701,17 @@ var CPopover = function (_a) {
         typeof window !== 'undefined' &&
             ReactDOM.createPortal(React$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: popoverRef, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
-                    exit: popoverRef.current ? getTransitionDurationFromElement(popoverRef.current) + 50 : 200,
+                    exit: popoverRef.current
+                        ? getTransitionDurationFromElement(popoverRef.current) + 50
+                        : 200,
                 }, unmountOnExit: true }, function (state) { return (React$1.createElement("div", __assign$1({ className: classNames$1('popover', 'bs-popover-auto', {
                     fade: animation,
                     show: state === 'entered',
-                }, className), ref: popoverRef, role: "tooltip" }, rest),
+                }, className), ref: forkedRef, role: "tooltip" }, rest),
                 React$1.createElement("div", { className: "popover-arrow" }),
                 React$1.createElement("div", { className: "popover-header" }, title),
                 React$1.createElement("div", { className: "popover-body" }, content))); }), document.body)));
-};
+});
 CPopover.propTypes = {
     animation: PropTypes$1.bool,
     children: PropTypes$1.node,
@@ -14343,10 +14346,11 @@ CToaster.propTypes = {
 };
 CToaster.displayName = 'CToaster';
 
-var CTooltip = function (_a) {
+var CTooltip = React$1.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$1(_a, ["children", "animation", "className", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
     var tooltipRef = React$1.useRef(null);
     var togglerRef = React$1.useRef(null);
+    var forkedRef = useForkedRef(ref, tooltipRef);
     var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
     var _j = React$1.useState(visible), _visible = _j[0], setVisible = _j[1];
     var _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
@@ -14402,16 +14406,18 @@ var CTooltip = function (_a) {
             onMouseLeave: function () { return toggleVisible(false); },
         }))),
         typeof window !== 'undefined' &&
-            ReactDOM.createPortal(React$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onHide, timeout: {
+            ReactDOM.createPortal(React$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: tooltipRef, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
-                    exit: tooltipRef.current ? getTransitionDurationFromElement(tooltipRef.current) + 50 : 200,
+                    exit: tooltipRef.current
+                        ? getTransitionDurationFromElement(tooltipRef.current) + 50
+                        : 200,
                 }, unmountOnExit: true }, function (state) { return (React$1.createElement("div", __assign$1({ className: classNames$1('tooltip', 'bs-tooltip-auto', {
                     fade: animation,
                     show: state === 'entered',
-                }, className), ref: tooltipRef, role: "tooltip" }, rest),
+                }, className), ref: forkedRef, role: "tooltip" }, rest),
                 React$1.createElement("div", { className: "tooltip-arrow" }),
                 React$1.createElement("div", { className: "tooltip-inner" }, content))); }), document.body)));
-};
+});
 CTooltip.propTypes = {
     animation: PropTypes$1.bool,
     children: PropTypes$1.node,