@coreui/react 4.10.0 → 4.11.0

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.10.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.11.0.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/conditional-portal/CConditionalPortal.d.ts

@@ -4,9 +4,15 @@ export interface CConditionalPortalProps {
      * @ignore
      */
     children: ReactNode;
+    /**
+     * An HTML element or function that returns a single element, with `document.body` as the default.
+     *
+     * @since v4.11.0
+     */
+    container?: Element | (() => Element | null) | null;
     /**
      * Render some children into a different part of the DOM
      */
-    portal: boolean;
+    portal: boolean | any;
 }
 export declare const CConditionalPortal: FC<CConditionalPortalProps>;

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

@@ -38,6 +38,12 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
     component?: string | ElementType;
+    /**
+     * Appends the react dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since v4.11.0
+     */
+    container?: Element | (() => Element | null) | null;
     /**
      * Sets a darker color scheme to match a dark navbar.
      */

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'> {
     /**
@@ -11,6 +11,12 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
      * A string of all className you want applied to the component.
      */
     className?: string;
+    /**
+     * Appends the react popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since v4.11.0
+     */
+    container?: Element | (() => Element | null) | null;
     /**
      * Content node for your component.
      */
@@ -61,4 +67,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'> {
     /**
@@ -11,6 +11,12 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
      * A string of all className you want applied to the component.
      */
     className?: string;
+    /**
+     * Appends the react tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since v4.11.0
+     */
+    container?: Element | (() => Element | null) | null;
     /**
      * Content node for your component.
      */
@@ -57,4 +63,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

@@ -5158,13 +5158,24 @@ CCarouselItem.propTypes = {
 };
 CCarouselItem.displayName = 'CCarouselItem';
 
+var getContainer = function (container) {
+    if (container) {
+        return typeof container === 'function' ? container() : container;
+    }
+    return document.body;
+};
 var CConditionalPortal = function (_a) {
-    var children = _a.children, portal = _a.portal;
-    return typeof window !== 'undefined' && portal ? (createPortal(children, document.body)) : (React.createElement(React.Fragment, null, children));
+    var children = _a.children, container = _a.container, portal = _a.portal;
+    var _b = useState(null), _container = _b[0], setContainer = _b[1];
+    useEffect(function () {
+        portal && setContainer(getContainer(container) || document.body);
+    }, [container, portal]);
+    return typeof window !== 'undefined' && portal && _container ? (createPortal(children, _container)) : (React.createElement(React.Fragment, null, children));
 };
 CConditionalPortal.propTypes = {
     children: PropTypes.node,
-    portal: PropTypes.bool.isRequired,
+    container: PropTypes.any,
+    portal: PropTypes.bool,
 };
 CConditionalPortal.displayName = 'CConditionalPortal';
 
@@ -5190,7 +5201,7 @@ var getPlacement = function (placement, direction, alignment, isRTL) {
 var CDropdownContext = createContext({});
 var CDropdown = forwardRef(function (_a, ref) {
     var _b;
-    var children = _a.children, alignment = _a.alignment, _c = _a.autoClose, autoClose = _c === void 0 ? true : _c, className = _a.className, dark = _a.dark, direction = _a.direction, _d = _a.offset, offset = _d === void 0 ? [0, 2] : _d, onHide = _a.onHide, onShow = _a.onShow, _e = _a.placement, placement = _e === void 0 ? 'bottom-start' : _e, _f = _a.popper, popper = _f === void 0 ? true : _f, _g = _a.portal, portal = _g === void 0 ? false : _g, _h = _a.variant, variant = _h === void 0 ? 'btn-group' : _h, _j = _a.component, component = _j === void 0 ? 'div' : _j, _k = _a.visible, visible = _k === void 0 ? false : _k, rest = __rest(_a, ["children", "alignment", "autoClose", "className", "dark", "direction", "offset", "onHide", "onShow", "placement", "popper", "portal", "variant", "component", "visible"]);
+    var children = _a.children, alignment = _a.alignment, _c = _a.autoClose, autoClose = _c === void 0 ? true : _c, className = _a.className, container = _a.container, dark = _a.dark, direction = _a.direction, _d = _a.offset, offset = _d === void 0 ? [0, 2] : _d, onHide = _a.onHide, onShow = _a.onShow, _e = _a.placement, placement = _e === void 0 ? 'bottom-start' : _e, _f = _a.popper, popper = _f === void 0 ? true : _f, _g = _a.portal, portal = _g === void 0 ? false : _g, _h = _a.variant, variant = _h === void 0 ? 'btn-group' : _h, _j = _a.component, component = _j === void 0 ? 'div' : _j, _k = _a.visible, visible = _k === void 0 ? false : _k, rest = __rest(_a, ["children", "alignment", "autoClose", "className", "container", "dark", "direction", "offset", "onHide", "onShow", "placement", "popper", "portal", "variant", "component", "visible"]);
     var dropdownRef = useRef(null);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var dropdownToggleRef = useRef(null);
@@ -5205,6 +5216,7 @@ var CDropdown = forwardRef(function (_a, ref) {
     }
     var contextValues = {
         alignment: alignment,
+        container: container,
         dark: dark,
         dropdownToggleRef: dropdownToggleRef,
         dropdownMenuRef: dropdownMenuRef,
@@ -5359,9 +5371,9 @@ var alignmentClassNames = function (alignment) {
 };
 var CDropdownMenu = forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'ul' : _b, rest = __rest(_a, ["children", "className", "component"]);
-    var _c = useContext(CDropdownContext), alignment = _c.alignment, dark = _c.dark, dropdownMenuRef = _c.dropdownMenuRef, popper = _c.popper, portal = _c.portal, visible = _c.visible;
+    var _c = useContext(CDropdownContext), alignment = _c.alignment, container = _c.container, dark = _c.dark, dropdownMenuRef = _c.dropdownMenuRef, popper = _c.popper, portal = _c.portal, visible = _c.visible;
     var forkedRef = useForkedRef(ref, dropdownMenuRef);
-    return (React.createElement(CConditionalPortal, { portal: portal !== null && portal !== void 0 ? portal : false },
+    return (React.createElement(CConditionalPortal, { container: container, portal: portal !== null && portal !== void 0 ? portal : false },
         React.createElement(Component, __assign({ className: classNames('dropdown-menu', {
                 'dropdown-menu-dark': dark,
                 show: visible,
@@ -6661,10 +6673,11 @@ CProgress.propTypes = {
 };
 CProgress.displayName = 'CProgress';
 
-var CPopover = function (_a) {
-    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 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 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;
@@ -6719,22 +6732,25 @@ var CPopover = function (_a) {
             onMouseEnter: function () { return toggleVisible(true); },
             onMouseLeave: function () { return toggleVisible(false); },
         }))),
-        typeof window !== 'undefined' &&
-            createPortal(React.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: popoverRef, onEnter: onShow, onExit: onHide, timeout: {
+        React.createElement(CConditionalPortal, { container: container, portal: true },
+            React.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.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)));
-};
+                React.createElement("div", { className: "popover-body" }, content))); }))));
+});
 CPopover.propTypes = {
     animation: PropTypes.bool,
     children: PropTypes.node,
     className: PropTypes.string,
+    container: PropTypes.any,
     content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     delay: PropTypes.oneOfType([
         PropTypes.number,
@@ -7274,10 +7290,11 @@ CToaster.propTypes = {
 };
 CToaster.displayName = 'CToaster';
 
-var CTooltip = function (_a) {
-    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 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 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;
@@ -7332,20 +7349,23 @@ var CTooltip = function (_a) {
             onMouseEnter: function () { return toggleVisible(true); },
             onMouseLeave: function () { return toggleVisible(false); },
         }))),
-        typeof window !== 'undefined' &&
-            createPortal(React.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onHide, timeout: {
+        React.createElement(CConditionalPortal, { container: container, portal: true },
+            React.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.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)));
-};
+                React.createElement("div", { className: "tooltip-inner" }, content))); }))));
+});
 CTooltip.propTypes = {
     animation: PropTypes.bool,
     children: PropTypes.node,
+    container: PropTypes.any,
     content: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     delay: PropTypes.oneOfType([
         PropTypes.number,