@jobber/components 6.98.2 → 6.100.0

package/dist/Menu-es.js

@@ -1,36 +1,126 @@
-import React__default, { useState, useId, useMemo, useRef } from 'react';
+import React__default, { useEffect, createContext, useState, useRef, useId, useMemo, useContext } from 'react';
 import classnames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useWindowDimensions, useRefocusOnActivator, useFocusTrap, useIsMounted } from '@jobber/hooks';
-import { o as offset, f as flip, s as size, u as useFloating, a as useDismiss, b as useInteractions, F as FloatingPortal, c as autoUpdate } from './floating-ui.react-es.js';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useWindowDimensions, useRefocusOnActivator, useIsMounted } from '@jobber/hooks';
+import { o as offset, f as flip, c as size, u as useFloating, d as useDismiss, e as useListNavigation, g as useInteractions, F as FloatingPortal, b as autoUpdate } from './floating-ui.react-es.js';
+import { $ as $df56164dff5785e2$export$4338b53315abf666, a as $f6c31cce2adf654f$export$45712eceda6fad21, b as $f645667febf57a63$export$4c014de7c8940b4c, c as $431fbd86ca7dc216$export$f21a1ffae260145a, d as $b4b717babfbb907b$export$4c063cf1350e6fed, e as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $5dc95899b306f630$export$c9058316764c140e, g as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, h as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, i as $3674c52c6b3c5bce$export$27d2ad3c5815583e, j as $07b14b47974efb58$export$5b6b19405a83ff9d, k as $431f98aba6844401$export$1ff3c3f08ae963c0, l as $3674c52c6b3c5bce$export$4b1545b4f2016d26, m as $72a5793c14baf454$export$8b251419efc915eb } from './Tree-es.js';
+import 'react-dom';
 import { B as Button } from './Button-es.js';
 import { T as Typography } from './Typography-es.js';
 import { I as Icon } from './Icon-es.js';
 import { f as formFieldFocusAttribute } from './useFormFieldFocus-es.js';
 import { c as calculateMaxHeight } from './maxHeight-es.js';
 
-var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","section":"X0W9r8kjA6Q-","sectionHeader":"Bq7pLWj3jm4-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+const $3b117e43dc0ca95d$export$27c701ed9e449e99 = /*#__PURE__*/ (React__default).forwardRef(({ children: children, ...props }, ref)=>{
+    ref = ($df56164dff5785e2$export$4338b53315abf666)(ref);
+    let { pressProps: pressProps } = ($f6c31cce2adf654f$export$45712eceda6fad21)({
+        ...props,
+        ref: ref
+    });
+    let { focusableProps: focusableProps } = ($f645667febf57a63$export$4c014de7c8940b4c)(props, ref);
+    let child = (React__default).Children.only(children);
+    (useEffect)(()=>{
+        if (process.env.NODE_ENV === 'production') return;
+        let el = ref.current;
+        if (!el || !(el instanceof ($431fbd86ca7dc216$export$f21a1ffae260145a)(el).Element)) {
+            console.error('<Pressable> child must forward its ref to a DOM element.');
+            return;
+        }
+        if (!props.isDisabled && !($b4b717babfbb907b$export$4c063cf1350e6fed)(el)) {
+            console.warn('<Pressable> child must be focusable. Please ensure the tabIndex prop is passed through.');
+            return;
+        }
+        if (el.localName !== 'button' && el.localName !== 'input' && el.localName !== 'select' && el.localName !== 'textarea' && el.localName !== 'a' && el.localName !== 'area' && el.localName !== 'summary') {
+            let role = el.getAttribute('role');
+            if (!role) console.warn('<Pressable> child must have an interactive ARIA role.');
+            else if (// https://w3c.github.io/aria/#widget_roles
+            role !== 'application' && role !== 'button' && role !== 'checkbox' && role !== 'combobox' && role !== 'gridcell' && role !== 'link' && role !== 'menuitem' && role !== 'menuitemcheckbox' && role !== 'menuitemradio' && role !== 'option' && role !== 'radio' && role !== 'searchbox' && role !== 'separator' && role !== 'slider' && role !== 'spinbutton' && role !== 'switch' && role !== 'tab' && role !== 'textbox' && role !== 'treeitem') console.warn(`<Pressable> child must have an interactive ARIA role. Got "${role}".`);
+        }
+    }, [
+        ref,
+        props.isDisabled
+    ]);
+    // @ts-ignore
+    let childRef = parseInt((React__default).version, 10) < 19 ? child.ref : child.props.ref;
+    return /*#__PURE__*/ (React__default).cloneElement(child, {
+        ...($3ef42575df84b30b$export$9d1611c77c2fe928)(pressProps, focusableProps, child.props),
+        // @ts-ignore
+        ref: ($5dc95899b306f630$export$c9058316764c140e)(childRef, ref)
+    });
+});
+
+var styles = {"wrapper":"fpi0W91w2ag-","floatingContainer":"ba-Kj6mvQUw-","menu":"-DayvgvIcVo-","legacySection":"VsRRunpS6Yo-","separator":"jnggqK3YTIU-","triggerWrapper":"oRQQVVq-yxA-","ariaMenu":"QInUBKqkrl0-","ariaItem":"bWR8m7-LKg4-","ariaSection":"PH5vvtLgvXI-","ariaSectionHeader":"iJjIifpa9bk-","sectionHeader":"Bq7pLWj3jm4-","legacyAction":"P4Sdaq0-lZs-","action":"M1BgN-oCmKw-","destructive":"U9ihZZavz9w-","overlay":"_7we5hh6kYs8-","fullWidth":"_5OJ7B6mFcwk-","screenReaderOnly":"Bzvkz60bwWE-","spinning":"_0-VzuzHdi8o-"};
 
 const SMALL_SCREEN_BREAKPOINT = 490;
 const MENU_OFFSET = 6;
 const MENU_MAX_HEIGHT_PERCENTAGE = 72;
+const Y_TRANSLATION_DESKTOP = 10;
+const Y_TRANSLATION_MOBILE = 150;
+const MENU_ANIMATION_DURATION = 0.25;
+const OVERLAY_ANIMATION_DURATION = 0.15;
+const MENU_ANIMATION_CONFIG = {
+    duration: MENU_ANIMATION_DURATION,
+    type: "tween",
+};
+const OVERLAY_ANIMATION_CONFIG = {
+    duration: OVERLAY_ANIMATION_DURATION,
+    type: "tween",
+};
+
+const composeOverlayVariation = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+};
 const variation = {
     overlayStartStop: { opacity: 0 },
     startOrStop: (placement) => {
-        let y = 10;
+        let y = Y_TRANSLATION_DESKTOP;
         if (placement === null || placement === void 0 ? void 0 : placement.includes("bottom"))
             y *= -1;
-        if (window.innerWidth < SMALL_SCREEN_BREAKPOINT)
-            y = 150;
+        if (isMobileDevice())
+            y = Y_TRANSLATION_MOBILE;
         return { opacity: 0, y };
     },
     done: { opacity: 1, y: 0 },
 };
+function isMobileDevice() {
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return window.innerWidth <= SMALL_SCREEN_BREAKPOINT;
+}
+function isLegacy(props) {
+    return "items" in props;
+}
+const MotionMenu = motion.create($3674c52c6b3c5bce$export$d9b273488cd8ce6f);
+// Single implementation
+function Menu(props) {
+    if (isLegacy(props)) {
+        return React__default.createElement(MenuLegacy, Object.assign({}, props));
+    }
+    return (React__default.createElement(MenuComposable, { onOpenChange: props.onOpenChange, open: props.open, defaultOpen: props.defaultOpen }, props.children));
+}
 // eslint-disable-next-line max-statements
-function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
+function MenuLegacy({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     var _a;
     const [visible, setVisible] = useState(false);
     const [referenceElement, setReferenceElement] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const listRef = useRef([]);
     const { width } = useWindowDimensions();
     const buttonID = useId();
     const menuID = useId();
@@ -38,9 +128,8 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     const wrapperClasses = classnames(styles.wrapper, {
         [styles.fullWidth]: fullWidth,
     });
-    // useRefocusOnActivator must come before useFocusTrap for them both to work
+    // Ensure focus returns to the activator when closed
     useRefocusOnActivator(visible);
-    const menuRef = useFocusTrap(visible);
     const isLargeScreen = width >= SMALL_SCREEN_BREAKPOINT;
     const middleware = useMemo(() => {
         if (isLargeScreen) {
@@ -69,7 +158,9 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     }, [isLargeScreen]);
     const { refs, floatingStyles, context } = useFloating({
         open: visible,
-        onOpenChange: setVisible,
+        onOpenChange: (isOpen) => {
+            setVisible(isOpen);
+        },
         placement: "bottom-start",
         strategy: "fixed",
         middleware,
@@ -79,7 +170,13 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         whileElementsMounted: autoUpdate,
     });
     const dismiss = useDismiss(context);
-    const { getFloatingProps } = useInteractions([dismiss]);
+    const listNavigation = useListNavigation(context, {
+        listRef,
+        activeIndex,
+        onNavigate: setActiveIndex,
+        loop: true,
+    });
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([dismiss, listNavigation]);
     const positionAttributes = isLargeScreen
         ? {
             style: floatingStyles,
@@ -88,8 +185,17 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     if (!activator) {
         activator = (React__default.createElement(Button, { fullWidth: true, label: "More Actions", icon: "more", type: "secondary" }));
     }
+    let itemIndexCounter = 0;
+    const renderedSections = items === null || items === void 0 ? void 0 : items.map((item, key) => (React__default.createElement("div", { key: key, className: styles.legacySection },
+        item.header && (React__default.createElement(SectionHeader, { text: item.header, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.header, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.header })),
+        item.actions.map(action => {
+            const currentIndex = itemIndexCounter++;
+            return (React__default.createElement(Action, Object.assign({ UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.action, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.action, sectionLabel: item.header, key: action.label, tabIndex: activeIndex === currentIndex ? 0 : -1, setItemNode: node => {
+                    listRef.current[currentIndex] = node;
+                }, getItemProps: getItemProps }, action)));
+        }))));
     return (React__default.createElement("div", { className: wrapperClasses, onClick: handleParentClick },
-        React__default.createElement("div", { ref: setReferenceElement }, React__default.cloneElement(activator, {
+        React__default.createElement("div", Object.assign({ ref: setReferenceElement }, getReferenceProps()), React__default.cloneElement(activator, {
             onClick: toggle(activator.props.onClick),
             id: buttonID,
             ariaControls: menuID,
@@ -98,16 +204,14 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
         })),
         React__default.createElement(MenuPortal, null,
             React__default.createElement(AnimatePresence, null, visible && (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: {
-                        type: "tween",
-                        duration: 0.15,
-                    } }),
-                React__default.createElement("div", Object.assign({ ref: refs.setFloating, className: styles.floatingContainer }, getFloatingProps(), positionAttributes, formFieldFocusAttribute), items.length > 0 && (React__default.createElement(motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, ref: menuRef, transition: {
-                        type: "tween",
-                        duration: 0.25,
-                    }, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, items.map((item, key) => (React__default.createElement("div", { key: key, className: styles.section },
-                    item.header && (React__default.createElement(SectionHeader, { text: item.header, UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.header, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.header })),
-                    item.actions.map(action => (React__default.createElement(Action, Object.assign({ UNSAFE_style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.action, UNSAFE_className: UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.action, sectionLabel: item.header, key: action.label }, action))))))))))))))));
+                React__default.createElement(motion.div, { className: styles.overlay, onClick: toggle(), variants: variation, initial: "overlayStartStop", animate: "done", exit: "overlayStartStop", transition: Object.assign({}, OVERLAY_ANIMATION_CONFIG) }),
+                React__default.createElement("div", Object.assign({ ref: refs.setFloating, className: styles.floatingContainer }, getFloatingProps({
+                    onKeyDown: event => {
+                        if (event.key === "Tab") {
+                            event.preventDefault();
+                        }
+                    },
+                }), positionAttributes, formFieldFocusAttribute), items.length > 0 && (React__default.createElement(motion.div, { className: classnames(styles.menu, UNSAFE_className === null || UNSAFE_className === void 0 ? void 0 : UNSAFE_className.menu), role: "menu", "data-elevation": "elevated", "aria-labelledby": buttonID, id: menuID, onClick: hide, variants: variation, initial: "startOrStop", animate: "done", exit: "startOrStop", custom: context === null || context === void 0 ? void 0 : context.placement, transition: Object.assign({}, MENU_ANIMATION_CONFIG), style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.menu }, renderedSections)))))))));
     function toggle(callbackPassthrough) {
         return (event) => {
             setVisible(!visible);
@@ -116,6 +220,7 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
     }
     function hide() {
         setVisible(false);
+        setActiveIndex(null);
     }
     function handleParentClick(event) {
         // Since the menu is being rendered within the same parent as the activator,
@@ -127,20 +232,32 @@ function Menu({ activator, items, UNSAFE_className, UNSAFE_style, }) {
 }
 function SectionHeader({ text, UNSAFE_style, UNSAFE_className, }) {
     return (React__default.createElement("div", { className: classnames(styles.sectionHeader, UNSAFE_className), "aria-hidden": true, style: UNSAFE_style },
-        React__default.createElement(Typography, { element: "h6", size: "base", textColor: "textSecondary", fontWeight: "regular", textCase: "none" }, text)));
+        React__default.createElement(DefaultHeaderContent, null, text)));
 }
-function Action({ label, sectionLabel, icon, iconColor, destructive, UNSAFE_style, UNSAFE_className, onClick, }) {
-    const actionButtonRef = useRef();
-    const buttonClasses = classnames(styles.action, {
+function Action(props) {
+    const { label, sectionLabel, icon, iconColor, destructive, UNSAFE_style, UNSAFE_className, onClick, tabIndex, setItemNode, getItemProps, } = props;
+    const buttonClasses = classnames(styles.action, styles.legacyAction, {
         [styles.destructive]: destructive,
     });
-    return (React__default.createElement("button", { role: "menuitem", type: "button", className: classnames(buttonClasses, UNSAFE_className), key: label, onClick: onClick, ref: actionButtonRef, style: UNSAFE_style },
+    return (React__default.createElement("button", Object.assign({ className: classnames(buttonClasses, UNSAFE_className), style: UNSAFE_style, key: label, type: "button" }, getItemProps({
+        ref: setItemNode,
+        role: "menuitem",
+        onClick,
+        tabIndex,
+    })),
+        React__default.createElement(DefaultItemContent, { label: label, icon: icon, iconColor: iconColor, destructive: destructive, sectionLabel: sectionLabel })));
+}
+function DefaultItemContent({ label, icon, iconColor, destructive, sectionLabel, }) {
+    return (React__default.createElement(React__default.Fragment, null,
         icon && (React__default.createElement("div", null,
             React__default.createElement(Icon, { color: destructive ? "destructive" : iconColor, name: icon }))),
-        React__default.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: "text" },
+        React__default.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: destructive ? "destructive" : "text" },
             sectionLabel && (React__default.createElement("span", { className: styles.screenReaderOnly }, sectionLabel)),
             label)));
 }
+function DefaultHeaderContent({ children, }) {
+    return (React__default.createElement(Typography, { element: "h6", size: "base", textColor: "textSecondary", fontWeight: "regular", textCase: "none" }, children));
+}
 function MenuPortal({ children }) {
     const mounted = useIsMounted();
     if (!(mounted === null || mounted === void 0 ? void 0 : mounted.current)) {
@@ -148,5 +265,122 @@ function MenuPortal({ children }) {
     }
     return React__default.createElement(FloatingPortal, null, children);
 }
+const MenuAnimationContext = createContext(null);
+function useMenuAnimation() {
+    const ctx = useContext(MenuAnimationContext);
+    if (!ctx) {
+        throw new Error("MenuAnimationContext used outside provider");
+    }
+    return ctx;
+}
+function MenuComposable({ children, onOpenChange, open, defaultOpen, }) {
+    const isInitiallyOpen = Boolean(open !== null && open !== void 0 ? open : defaultOpen);
+    const [animation, setAnimation] = useState(isInitiallyOpen ? "visible" : "unmounted");
+    const derivedAnimation = getDerivedAnimation(open, animation);
+    return (React__default.createElement(MenuAnimationContext.Provider, { value: { state: derivedAnimation, setState: setAnimation } },
+        React__default.createElement($3674c52c6b3c5bce$export$27d2ad3c5815583e, { isOpen: open, defaultOpen: defaultOpen, onOpenChange: isOpen => {
+                setAnimation(isOpen ? "visible" : "hidden");
+                onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+            } }, children)));
+}
+function getDerivedAnimation(open, animation) {
+    const isControlled = open !== undefined;
+    if (!isControlled)
+        return animation;
+    if (open)
+        return "visible";
+    // When controlled and closing, allow local state to progress to "unmounted"
+    // so the Popover can be removed from the DOM once exit completes.
+    return animation === "unmounted" ? "unmounted" : "hidden";
+}
+const MenuTriggerComposable = React__default.forwardRef(function MenuTriggerComposable({ ariaLabel, children }, ref) {
+    return (React__default.createElement($3b117e43dc0ca95d$export$27c701ed9e449e99, { "aria-label": ariaLabel },
+        React__default.createElement("div", { role: "button", className: styles.triggerWrapper, ref: ref }, children)));
+});
+function MenuContentComposable({ children, UNSAFE_style, UNSAFE_className, }) {
+    const { state: animation, setState } = useMenuAnimation();
+    const isMobile = isMobileDevice();
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement($07b14b47974efb58$export$5b6b19405a83ff9d, { isExiting: animation === "hidden", placement: "bottom start", offset: MENU_OFFSET }, ({ placement }) => {
+            const directionModifier = (placement === null || placement === void 0 ? void 0 : placement.includes("bottom")) ? -1 : 1;
+            const variants = isMobile
+                ? {
+                    hidden: { opacity: 0, y: Y_TRANSLATION_MOBILE },
+                    visible: { opacity: 1, y: 0 },
+                }
+                : {
+                    hidden: {
+                        opacity: 0,
+                        y: Y_TRANSLATION_DESKTOP * directionModifier,
+                    },
+                    visible: { opacity: 1, y: 0 },
+                };
+            return (React__default.createElement(MotionMenu, { key: `menu-content-${placement !== null && placement !== void 0 ? placement : "pending"}`, className: classnames(styles.menu, styles.ariaMenu, UNSAFE_className), style: UNSAFE_style, variants: variants, initial: "hidden", 
+                // placement is null on first render cycle, so we need to wait for it to be defined
+                animate: placement ? animation : false, transition: Object.assign({}, MENU_ANIMATION_CONFIG), onAnimationComplete: animationState => {
+                    setState(prev => animationState === "hidden" && prev === "hidden"
+                        ? "unmounted"
+                        : prev);
+                } }, children));
+        }),
+        isMobile && React__default.createElement(MenuMobileUnderlay, { animation: animation })));
+}
+function MenuMobileUnderlay({ animation }) {
+    if (animation === "unmounted")
+        return null;
+    return (React__default.createElement(motion.div, { key: "menu-mobile-underlay", variants: composeOverlayVariation, initial: "hidden", transition: Object.assign({}, OVERLAY_ANIMATION_CONFIG), className: styles.overlay, animate: animation }));
+}
+function MenuSeparatorComposable({ UNSAFE_style, UNSAFE_className, }) {
+    return (React__default.createElement($431f98aba6844401$export$1ff3c3f08ae963c0, { className: classnames(styles.separator, UNSAFE_className), style: UNSAFE_style, "data-testid": "ATL-Menu-Separator" }));
+}
+function MenuSectionComposable({ children, UNSAFE_style, UNSAFE_className, ariaLabel, }) {
+    return (React__default.createElement($3674c52c6b3c5bce$export$4b1545b4f2016d26, { "aria-label": ariaLabel, className: classnames(styles.ariaSection, UNSAFE_className), style: UNSAFE_style }, children));
+}
+function MenuHeaderComposable(props) {
+    const { UNSAFE_style, UNSAFE_className } = props;
+    return (React__default.createElement($72a5793c14baf454$export$8b251419efc915eb, { className: classnames(styles.sectionHeader, styles.ariaSectionHeader, UNSAFE_className), style: UNSAFE_style }, props.children));
+}
+const MenuItemComposable = React__default.forwardRef(function MenuItemComposable(props, ref) {
+    const { UNSAFE_style, UNSAFE_className } = props;
+    const className = classnames(styles.action, styles.ariaItem, UNSAFE_className);
+    if (props.href) {
+        const { href, target, rel, onClick } = props;
+        return (React__default.createElement($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ref: ref, className: className, style: UNSAFE_style, textValue: props.textValue, href: href, target: target, rel: rel, onClick: onClick },
+            React__default.createElement(MenuItemContext.Provider, { value: { destructive: props.destructive } }, props.children)));
+    }
+    return (React__default.createElement($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ref: ref, className: className, style: UNSAFE_style, textValue: props.textValue, onAction: () => {
+            var _a;
+            // Zero-arg activation for non-link items
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
+        } },
+        React__default.createElement(MenuItemContext.Provider, { value: { destructive: props.destructive } }, props.children)));
+});
+const MenuItemContext = createContext(null);
+function useMenuItemContext() {
+    const ctx = useContext(MenuItemContext);
+    return ctx !== null && ctx !== void 0 ? ctx : {};
+}
+function MenuItemIconComposable(props) {
+    const { destructive } = useMenuItemContext();
+    return (React__default.createElement("div", { "data-menu-slot": "icon" },
+        React__default.createElement(Icon, Object.assign({}, props, { color: destructive ? "destructive" : props.color }))));
+}
+function MenuItemLabelComposable(props) {
+    const { destructive } = useMenuItemContext();
+    return (React__default.createElement("div", { "data-menu-slot": "label" },
+        React__default.createElement(Typography, { element: "span", fontWeight: "semiBold", textColor: destructive ? "destructive" : "text" }, props.children)));
+}
+function MenuHeaderLabel(props) {
+    return React__default.createElement(DefaultHeaderContent, null, props.children);
+}
+Menu.Section = MenuSectionComposable;
+Menu.Header = MenuHeaderComposable;
+Menu.Item = MenuItemComposable;
+Menu.Trigger = MenuTriggerComposable;
+Menu.Content = MenuContentComposable;
+Menu.Separator = MenuSeparatorComposable;
+Menu.ItemIcon = MenuItemIconComposable;
+Menu.ItemLabel = MenuItemLabelComposable;
+Menu.HeaderLabel = MenuHeaderLabel;
 
 export { Menu as M };

package/dist/Modal/Modal.types.d.ts

@@ -53,6 +53,11 @@ export interface ModalContextType {
      * Floating-ui props to position the modal.
      */
     readonly getFloatingProps: UseInteractionsReturn["getFloatingProps"];
+    /**
+     * Tracks whether the current pointer interaction began inside the dialog.
+     * Used to disambiguate outsidePress after nested overlay closes.
+     */
+    readonly startedInsideRef?: MutableRefObject<boolean>;
 }
 export interface ModalActionsProps {
     /**

package/dist/Modal/index.cjs

@@ -79,7 +79,7 @@ function Actions({ primary, secondary, tertiary }) {
             React.createElement(Button.Button, Object.assign({}, tertiary))))))));
 }
 
-function useModal({ open, activatorRef: refProp, onRequestClose, }) {
+function useModal({ open, activatorRef: refProp, onRequestClose, startedInsideRef, }) {
     const nodeId = floatingUi_react.useFloatingNodeId();
     const defaultActivatorRef = React.useRef(null);
     const activatorRef = refProp !== null && refProp !== void 0 ? refProp : defaultActivatorRef;
@@ -87,14 +87,31 @@ function useModal({ open, activatorRef: refProp, onRequestClose, }) {
         elements: { reference: activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current },
         nodeId,
         onOpenChange: (newOpen) => {
-            if (!newOpen) {
+            if (!newOpen)
                 onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
-            }
         },
         open: open,
     });
+    React.useEffect(() => {
+        if (!startedInsideRef)
+            return;
+        if (open) {
+            // Ensure the first interaction after open is treated as inside
+            startedInsideRef.current = true;
+        }
+        else {
+            // Reset on close
+            startedInsideRef.current = false;
+        }
+    }, [open, startedInsideRef]);
     const dismiss = floatingUi_react.useDismiss(floatingContext, {
+        // Use pointerdown so the dialog/overlay capture handlers run first and set intent
         outsidePressEvent: "pointerdown",
+        outsidePress: () => {
+            var _a;
+            const startedInside = (_a = startedInsideRef === null || startedInsideRef === void 0 ? void 0 : startedInsideRef.current) !== null && _a !== void 0 ? _a : true;
+            return !startedInside;
+        },
         escapeKey: true,
         bubbles: false,
     });
@@ -123,10 +140,12 @@ const ModalContext = React.createContext({
     getFloatingProps: identity.identity,
 });
 function ModalProvider({ children, open = false, size, onRequestClose = noop.noop, activatorRef: refProp, dismissible = true, modalLabelledBy = MODAL_HEADER_ID, ariaLabel, }) {
+    const startedInsideRef = React.useRef(true);
     const { floatingRefs, floatingContext, nodeId, activatorRef, parentId, getFloatingProps, } = useModal({
         open,
         activatorRef: refProp,
         onRequestClose,
+        startedInsideRef,
     });
     const content = (React.createElement(ModalContext.Provider, { value: {
             onRequestClose,
@@ -140,6 +159,7 @@ function ModalProvider({ children, open = false, size, onRequestClose = noop.noo
             modalLabelledBy,
             ariaLabel,
             getFloatingProps,
+            startedInsideRef,
         } }, children));
     if (parentId) {
         return content;
@@ -195,13 +215,17 @@ function ModalActivator({ children }) {
  */
 function ModalOverlay({ children }) {
     const { overlay, overlayBackground } = useModalStyles();
-    const { floatingNodeId } = useModalContext();
+    const { floatingNodeId, startedInsideRef } = useModalContext();
     return (React.createElement(floatingUi_react.FloatingOverlay, { lockScroll: true, className: overlay, "data-modal-node-id": floatingNodeId },
-        React.createElement(framerMotion.motion.div, { "aria-hidden": "true", className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, "data-modal-node-id": floatingNodeId }),
+        React.createElement(framerMotion.motion.div, { "aria-hidden": "true", className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, "data-modal-node-id": floatingNodeId, onPointerDownCapture: () => {
+                // Interaction began on overlay: mark as outside for the next click
+                if (startedInsideRef)
+                    startedInsideRef.current = false;
+            } }),
         children));
 }
 function ModalContent({ children }) {
-    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, ariaLabel, getFloatingProps, } = useModalContext();
+    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, ariaLabel, getFloatingProps, startedInsideRef, } = useModalContext();
     const { modal } = useModalStyles(size);
     return (React.createElement(framerMotion.AnimatePresence, null, open && (React.createElement(floatingUi_react.FloatingNode, { id: floatingNodeId },
         React.createElement(floatingUi_react.FloatingPortal, null,
@@ -218,7 +242,11 @@ function ModalContent({ children }) {
                                 "aria-labelledby": modalLabelledBy,
                                 "aria-label": ariaLabel,
                                 "aria-modal": true,
-                            })), children))))))))));
+                            }), { onPointerDownCapture: () => {
+                                    // Interaction began inside dialog
+                                    if (startedInsideRef)
+                                        startedInsideRef.current = true;
+                                } }), children))))))))));
 }
 
 function Modal(props) {

package/dist/Modal/index.mjs

@@ -1,4 +1,4 @@
-import React__default, { useRef, createContext, useContext } from 'react';
+import React__default, { useRef, useEffect, createContext, useContext } from 'react';
 import ReactDOM__default from 'react-dom';
 import classnames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -7,7 +7,7 @@ import { H as Heading } from '../Heading-es.js';
 import { B as Button } from '../Button-es.js';
 import { B as ButtonDismiss } from '../ButtonDismiss-es.js';
 import { n as noop } from '../noop-es.js';
-import { h as useFloatingNodeId, u as useFloating, a as useDismiss, m as useRole, b as useInteractions, g as useFloatingParentNodeId, i as FloatingTree, j as FloatingNode, F as FloatingPortal, n as FloatingFocusManager, p as FloatingOverlay } from '../floating-ui.react-es.js';
+import { i as useFloatingNodeId, u as useFloating, d as useDismiss, n as useRole, g as useInteractions, h as useFloatingParentNodeId, j as FloatingTree, k as FloatingNode, F as FloatingPortal, p as FloatingFocusManager, q as FloatingOverlay } from '../floating-ui.react-es.js';
 import { b as identity } from '../identity-es.js';
 import { A as AtlantisPortalContent } from '../AtlantisPortalContent-es.js';
 import '../Typography-es.js';
@@ -77,7 +77,7 @@ function Actions({ primary, secondary, tertiary }) {
             React__default.createElement(Button, Object.assign({}, tertiary))))))));
 }
 
-function useModal({ open, activatorRef: refProp, onRequestClose, }) {
+function useModal({ open, activatorRef: refProp, onRequestClose, startedInsideRef, }) {
     const nodeId = useFloatingNodeId();
     const defaultActivatorRef = useRef(null);
     const activatorRef = refProp !== null && refProp !== void 0 ? refProp : defaultActivatorRef;
@@ -85,14 +85,31 @@ function useModal({ open, activatorRef: refProp, onRequestClose, }) {
         elements: { reference: activatorRef === null || activatorRef === void 0 ? void 0 : activatorRef.current },
         nodeId,
         onOpenChange: (newOpen) => {
-            if (!newOpen) {
+            if (!newOpen)
                 onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
-            }
         },
         open: open,
     });
+    useEffect(() => {
+        if (!startedInsideRef)
+            return;
+        if (open) {
+            // Ensure the first interaction after open is treated as inside
+            startedInsideRef.current = true;
+        }
+        else {
+            // Reset on close
+            startedInsideRef.current = false;
+        }
+    }, [open, startedInsideRef]);
     const dismiss = useDismiss(floatingContext, {
+        // Use pointerdown so the dialog/overlay capture handlers run first and set intent
         outsidePressEvent: "pointerdown",
+        outsidePress: () => {
+            var _a;
+            const startedInside = (_a = startedInsideRef === null || startedInsideRef === void 0 ? void 0 : startedInsideRef.current) !== null && _a !== void 0 ? _a : true;
+            return !startedInside;
+        },
         escapeKey: true,
         bubbles: false,
     });
@@ -121,10 +138,12 @@ const ModalContext = createContext({
     getFloatingProps: identity,
 });
 function ModalProvider({ children, open = false, size, onRequestClose = noop, activatorRef: refProp, dismissible = true, modalLabelledBy = MODAL_HEADER_ID, ariaLabel, }) {
+    const startedInsideRef = useRef(true);
     const { floatingRefs, floatingContext, nodeId, activatorRef, parentId, getFloatingProps, } = useModal({
         open,
         activatorRef: refProp,
         onRequestClose,
+        startedInsideRef,
     });
     const content = (React__default.createElement(ModalContext.Provider, { value: {
             onRequestClose,
@@ -138,6 +157,7 @@ function ModalProvider({ children, open = false, size, onRequestClose = noop, ac
             modalLabelledBy,
             ariaLabel,
             getFloatingProps,
+            startedInsideRef,
         } }, children));
     if (parentId) {
         return content;
@@ -193,13 +213,17 @@ function ModalActivator({ children }) {
  */
 function ModalOverlay({ children }) {
     const { overlay, overlayBackground } = useModalStyles();
-    const { floatingNodeId } = useModalContext();
+    const { floatingNodeId, startedInsideRef } = useModalContext();
     return (React__default.createElement(FloatingOverlay, { lockScroll: true, className: overlay, "data-modal-node-id": floatingNodeId },
-        React__default.createElement(motion.div, { "aria-hidden": "true", className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, "data-modal-node-id": floatingNodeId }),
+        React__default.createElement(motion.div, { "aria-hidden": "true", className: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 0.8 }, exit: { opacity: 0 }, transition: { duration: 0.2 }, "data-modal-node-id": floatingNodeId, onPointerDownCapture: () => {
+                // Interaction began on overlay: mark as outside for the next click
+                if (startedInsideRef)
+                    startedInsideRef.current = false;
+            } }),
         children));
 }
 function ModalContent({ children }) {
-    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, ariaLabel, getFloatingProps, } = useModalContext();
+    const { open, floatingContext, activatorRef, floatingRefs, size, floatingNodeId, modalLabelledBy, ariaLabel, getFloatingProps, startedInsideRef, } = useModalContext();
     const { modal } = useModalStyles(size);
     return (React__default.createElement(AnimatePresence, null, open && (React__default.createElement(FloatingNode, { id: floatingNodeId },
         React__default.createElement(FloatingPortal, null,
@@ -216,7 +240,11 @@ function ModalContent({ children }) {
                                 "aria-labelledby": modalLabelledBy,
                                 "aria-label": ariaLabel,
                                 "aria-modal": true,
-                            })), children))))))))));
+                            }), { onPointerDownCapture: () => {
+                                    // Interaction began inside dialog
+                                    if (startedInsideRef)
+                                        startedInsideRef.current = true;
+                                } }), children))))))))));
 }
 
 function Modal(props) {

package/dist/Modal/useModal.d.ts

@@ -1,11 +1,13 @@
+import type { MutableRefObject } from "react";
 interface UseModalProps {
     open: boolean;
     activatorRef?: React.RefObject<HTMLElement | null> | null;
     onRequestClose: () => void;
+    startedInsideRef?: MutableRefObject<boolean> | undefined;
 }
-export declare function useModal({ open, activatorRef: refProp, onRequestClose, }: UseModalProps): {
+export declare function useModal({ open, activatorRef: refProp, onRequestClose, startedInsideRef, }: UseModalProps): {
     floatingRefs: {
-        reference: import("react").MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        reference: MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
         floating: React.MutableRefObject<HTMLElement | null>;
         setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
         setFloating: (node: HTMLElement | null) => void;

package/dist/Page/index.cjs

@@ -21,6 +21,8 @@ require('../Menu-cjs.js');
 require('framer-motion');
 require('../floating-ui.react-cjs.js');
 require('react-dom');
+require('../Tree-cjs.js');
+require('../clsx-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 

package/dist/Page/index.mjs

@@ -19,5 +19,7 @@ import '../Menu-es.js';
 import 'framer-motion';
 import '../floating-ui.react-es.js';
 import 'react-dom';
+import '../Tree-es.js';
+import '../clsx-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';