@deque/cauldron-react 6.17.1 → 6.18.0

package/lib/components/ActionMenu/ActionMenu.d.ts

@@ -4,6 +4,8 @@ type ActionMenuTriggerFunction = (props: ActionMenuTriggerProps, open: boolean)
 declare const ActionMenu: React.ForwardRefExoticComponent<{
     children: React.ReactElement;
     trigger: React.ReactElement | ActionMenuTriggerFunction;
+    /** Render the action menu in a different location in the dom. */
+    portal?: HTMLElement | React.RefObject<HTMLElement> | undefined;
 } & Pick<{
     target: HTMLElement | React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement>;
     placement?: "auto" | import("@floating-ui/utils").Placement | "auto-start" | "auto-end" | undefined;
@@ -19,6 +21,7 @@ declare const ActionMenu: React.ForwardRefExoticComponent<{
         returnFocus?: boolean | undefined;
         returnFocusElement?: import("../../types").ElementOrRef<HTMLElement> | undefined;
     } | undefined;
+    portal?: HTMLElement | React.RefObject<HTMLElement> | undefined;
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement> & {
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;

package/lib/components/AnchoredOverlay/index.d.ts

@@ -20,6 +20,8 @@ declare const AnchoredOverlay: React.ForwardRefExoticComponent<{
     focusTrap?: boolean | undefined;
     /** When `focusTrap` is true, optional arguments to configure the focus trap. */
     focusTrapOptions?: Parameters<typeof useFocusTrap>[1];
+    /** Render the anchored overlay in a different location in the dom. */
+    portal?: HTMLElement | React.RefObject<HTMLElement> | undefined;
     children?: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement> & {
     as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;

package/lib/components/Popover/index.d.ts

@@ -8,6 +8,7 @@ type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
     show: boolean;
     onClose: () => void;
     placement?: React.ComponentProps<typeof AnchoredOverlay>['placement'];
+    /** Render the popover in a different location in the dom. */
     portal?: React.RefObject<HTMLElement> | HTMLElement;
 };
 type CustomProps = BaseProps & {

package/lib/components/TextEllipsis/index.d.ts

@@ -10,6 +10,7 @@ interface TextEllipsisBaseProps extends PolymorphicProps<React.HTMLAttributes<HT
      * Only use this prop if you have an alternative way to make the full text accessible.
      */
     hideTooltip?: boolean;
+    onOverflowChange?: (hasOverflow: boolean) => void;
 }
 interface TextEllipsisWithTooltipProps extends TextEllipsisBaseProps {
     tooltipProps?: Omit<TooltipProps, 'target' | 'association' | 'children'>;

package/lib/components/Tooltip/index.d.ts

@@ -9,6 +9,7 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     show?: boolean | undefined;
     defaultShow?: boolean;
     placement?: React.ComponentProps<typeof AnchoredOverlay>['placement'];
+    /** Render the tooltip in a different location in the dom. */
     portal?: React.RefObject<HTMLElement> | HTMLElement;
     hideElementOnHidden?: boolean;
 }

package/lib/index.js

@@ -826,7 +826,8 @@ function ClickOutsideListener(_a, ref) {
             // target instead of a child element target
             return;
         }
-        if (childElementRef.current &&
+        if (!target &&
+            childElementRef.current &&
             !childElementRef.current.contains(eventTarget)) {
             onClickOutside(event);
         }
@@ -1783,7 +1784,7 @@ function getAutoAlignment(placement) {
 }
 var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
     var _b, _c;
-    var as = _a.as, _d = _a.placement, initialPlacement = _d === void 0 ? 'auto' : _d, target = _a.target, children = _a.children, style = _a.style, _e = _a.open, open = _e === void 0 ? false : _e, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, onShiftChange = _a.onShiftChange, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange", "onShiftChange"]);
+    var as = _a.as, _d = _a.placement, initialPlacement = _d === void 0 ? 'auto' : _d, target = _a.target, children = _a.children, style = _a.style, _e = _a.open, open = _e === void 0 ? false : _e, offset = _a.offset, focusTrap = _a.focusTrap, focusTrapOptions = _a.focusTrapOptions, onOpenChange = _a.onOpenChange, onPlacementChange = _a.onPlacementChange, onShiftChange = _a.onShiftChange, portal = _a.portal, props = tslib.__rest(_a, ["as", "placement", "target", "children", "style", "open", "offset", "focusTrap", "focusTrapOptions", "onOpenChange", "onPlacementChange", "onShiftChange", "portal"]);
     var ref = useSharedRef(refProp);
     var Component = as || 'div';
     var _f = reactDom$1.useFloating({
@@ -1835,7 +1836,18 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
             });
         }
     }, [onShiftChange, (_b = middlewareData.shift) === null || _b === void 0 ? void 0 : _b.x, (_c = middlewareData.shift) === null || _c === void 0 ? void 0 : _c.y]);
-    return (React__default["default"].createElement(Component, tslib.__assign({ ref: ref }, props, { style: tslib.__assign(tslib.__assign({}, floatingStyles), style) }), children));
+    var AnchoredOverlayComponent = (React__default["default"].createElement(Component, tslib.__assign({ ref: ref }, props, { style: tslib.__assign(tslib.__assign({}, floatingStyles), style) }), children));
+    if (portal && !isBrowser()) {
+        return null;
+    }
+    if (portal && typeof portal !== 'undefined') {
+        var portalElement = (portal && 'current' in portal ? portal.current : portal) ||
+            (
+            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+            document === null || document === void 0 ? void 0 : document.body);
+        return reactDom.createPortal(AnchoredOverlayComponent, portalElement);
+    }
+    return AnchoredOverlayComponent;
 });
 AnchoredOverlay.displayName = 'AnchoredOverlay';
 
@@ -1985,18 +1997,18 @@ function Tooltip(_a) {
         // that the arrow needs to shift
         setArrowShift(x * -1);
     }, [variant]);
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, (showTooltip || hideElementOnHidden) && isBrowser()
-        ? reactDom.createPortal(React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, target: target, placement: initialPlacement, onPlacementChange: setPlacement, open: showTooltip && typeof showProp !== 'boolean', onOpenChange: setShowTooltip, onShiftChange: updateArrowShiftPosition, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
-                TooltipInfo: variant === 'info',
-                'Tooltip--hidden': !showTooltip && hideElementOnHidden,
-                'Tooltip--big': variant === 'big'
-            }), ref: setTooltipElement, role: "tooltip", offset: 8 }, props),
-            variant !== 'big' && React__default["default"].createElement("div", { className: "TooltipArrow", style: arrowShift ? { transform: "translateX(".concat(arrowShift, "px)") } : undefined }),
-            children), (portal && 'current' in portal ? portal.current : portal) ||
-            (
-            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-            document === null || document === void 0 ? void 0 : document.body))
-        : null));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, (showTooltip || hideElementOnHidden) && isBrowser() ? (React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, target: target, placement: initialPlacement, onPlacementChange: setPlacement, open: showTooltip && typeof showProp !== 'boolean', onOpenChange: setShowTooltip, onShiftChange: updateArrowShiftPosition, className: classNames__default["default"]('Tooltip', "Tooltip--".concat(placement), className, {
+            TooltipInfo: variant === 'info',
+            'Tooltip--hidden': !showTooltip && hideElementOnHidden,
+            'Tooltip--big': variant === 'big'
+        }), ref: setTooltipElement, role: "tooltip", offset: 8, 
+        // guarded by isBrowser() check
+        // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+        portal: portal || (document === null || document === void 0 ? void 0 : document.body) }, props),
+        variant !== 'big' && (React__default["default"].createElement("div", { className: "TooltipArrow", style: arrowShift
+                ? { transform: "translateX(".concat(arrowShift, "px)") }
+                : undefined })),
+        children)) : null));
 }
 Tooltip.displayName = 'Tooltip';
 var TooltipHead = function (_a) {
@@ -4643,19 +4655,20 @@ var Popover = React.forwardRef(function (_a, ref) {
         active: show
     }, [show]);
     useFocusTrap(popoverRef, { disabled: !show, returnFocus: true });
-    if (!show || !isBrowser())
+    if (!show || !isBrowser()) {
         return null;
-    return reactDom.createPortal(React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside },
+    }
+    return (React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside },
         React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ id: id, className: classNames__default["default"]('Popover', "Popover--".concat(placement), className, {
                 'Popover--hidden': !show,
                 'Popover--prompt': variant === 'prompt'
-            }), ref: popoverRef, role: "dialog", target: target, open: show, placement: initialPlacement, onPlacementChange: setPlacement, offset: 8 }, additionalProps, props),
+            }), ref: popoverRef, role: "dialog", target: target, open: show, placement: initialPlacement, onPlacementChange: setPlacement, offset: 8, 
+            // guarded by isBrowser() check
+            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+            portal: portal || (document === null || document === void 0 ? void 0 : document.body) }, additionalProps, props),
             React__default["default"].createElement("div", { className: "Popover__popoverArrow" }),
             React__default["default"].createElement("div", { className: "Popover__borderLeft" }),
-            variant === 'prompt' ? (React__default["default"].createElement(PromptPopoverContent, { applyButtonText: applyButtonText, onApply: onApply, closeButtonText: closeButtonText, infoText: infoText || '', onClose: handleClosePopover, infoTextId: "".concat(id, "-label") })) : (children))), (portal && 'current' in portal ? portal.current : portal) ||
-        // Dependent on "isBrowser" check above:
-        // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-        document.body);
+            variant === 'prompt' ? (React__default["default"].createElement(PromptPopoverContent, { applyButtonText: applyButtonText, onApply: onApply, closeButtonText: closeButtonText, infoText: infoText || '', onClose: handleClosePopover, infoTextId: "".concat(id, "-label") })) : (children))));
 });
 Popover.displayName = 'Popover';
 
@@ -4672,7 +4685,7 @@ function TimelineItem(_a) {
 }
 
 var TextEllipsis = React__default["default"].forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, maxLines = _a.maxLines, as = _a.as, tooltipProps = _a.tooltipProps, hideTooltip = _a.hideTooltip, props = tslib.__rest(_a, ["className", "children", "maxLines", "as", "tooltipProps", "hideTooltip"]);
+    var className = _a.className, children = _a.children, maxLines = _a.maxLines, as = _a.as, tooltipProps = _a.tooltipProps, hideTooltip = _a.hideTooltip, onOverflowChange = _a.onOverflowChange, props = tslib.__rest(_a, ["className", "children", "maxLines", "as", "tooltipProps", "hideTooltip", "onOverflowChange"]);
     var Element = 'div';
     var sharedRef = useSharedRef(ref);
     var _b = tslib.__read(React.useState(false), 2), hasOverflow = _b[0], setHasOverflow = _b[1];
@@ -4711,6 +4724,11 @@ var TextEllipsis = React__default["default"].forwardRef(function (_a, ref) {
             observer === null || observer === void 0 ? void 0 : observer.disconnect();
         };
     }, [hideTooltip]);
+    React.useEffect(function () {
+        if (typeof onOverflowChange === 'function') {
+            onOverflowChange(hasOverflow);
+        }
+    }, [hasOverflow]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(Element, tslib.__assign({ className: classNames__default["default"]('TextEllipsis', className, {
                 'TextEllipsis--multiline': !!maxLines
@@ -5070,7 +5088,7 @@ ActionListLinkItem.displayName = 'ActionListLinkItem';
 
 var _a = tslib.__read(['ArrowDown', 'ArrowUp'], 2), ArrowDown = _a[0], ArrowUp = _a[1];
 var ActionMenu = React.forwardRef(function (_a, ref) {
-    var className = _a.className, style = _a.style, trigger = _a.trigger, _b = _a.placement, placement = _b === void 0 ? 'bottom-start' : _b, actionMenuList = _a.children, props = tslib.__rest(_a, ["className", "style", "trigger", "placement", "children"]);
+    var className = _a.className, style = _a.style, trigger = _a.trigger, _b = _a.placement, placement = _b === void 0 ? 'bottom-start' : _b, actionMenuList = _a.children, portal = _a.portal, props = tslib.__rest(_a, ["className", "style", "trigger", "placement", "children", "portal"]);
     var _c = tslib.__read(React.useState(false), 2), open = _c[0], setOpen = _c[1];
     var _d = tslib.__read(React.useState('first'), 2), focusStrategy = _d[0], setFocusStrategy = _d[1];
     var triggerRef = React.useRef(null);
@@ -5138,7 +5156,7 @@ var ActionMenu = React.forwardRef(function (_a, ref) {
     }, [open]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, mouseEvent: open ? undefined : false, touchEvent: open ? undefined : false }, actionMenuTrigger),
-        React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ ref: actionMenuRef, role: "presentation", className: classNames__default["default"]('ActionMenu', className), open: open, onOpenChange: setOpen, target: triggerRef, placement: placement, offset: 4, style: tslib.__assign({ display: !open ? 'none' : undefined }, style) }, props), React__default["default"].cloneElement(actionMenuList, {
+        React__default["default"].createElement(AnchoredOverlay, tslib.__assign({ ref: actionMenuRef, role: "presentation", className: classNames__default["default"]('ActionMenu', className), open: open, onOpenChange: setOpen, target: triggerRef, placement: placement, offset: 4, portal: portal, style: tslib.__assign({ display: !open ? 'none' : undefined }, style) }, props), React__default["default"].cloneElement(actionMenuList, {
             ref: actionMenuListRef,
             role: 'menu',
             onAction: handleAction,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.17.1",
+  "version": "6.18.0",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",