@deque/cauldron-react 6.17.0 → 6.17.1-canary.4218550

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/Stepper/index.d.ts

@@ -14,7 +14,7 @@ export declare const Step: {
     (props: StepProps): React.JSX.Element;
     displayName: string;
 };
-interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
+interface StepperProps extends React.OlHTMLAttributes<HTMLOListElement> {
     children: React.ReactNode;
     className?: string;
 }

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';
 
@@ -5070,7 +5083,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 +5151,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.0",
+  "version": "6.17.1-canary.4218550",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",