@hjmds/react 1.1.0 → 1.2.0

package/dist/menubar.d.ts

@@ -0,0 +1,11 @@
+import { type MenubarDescriptor } from "@hjmds/design-contracts/components/menubar";
+export type MenubarProps<Key extends string = string, MenuKey extends string = string> = Readonly<{
+    descriptor: MenubarDescriptor<Key, MenuKey>;
+    openMenuId?: MenuKey | null;
+    defaultOpenMenuId?: MenuKey | null;
+    onOpenMenuIdChange?: (id: MenuKey | null) => void;
+    onAction: (id: Key, menuId: MenuKey) => void;
+    className?: string;
+}>;
+export declare function Menubar<Key extends string = string, MenuKey extends string = string>({ descriptor, openMenuId: controlledOpen, defaultOpenMenuId, onOpenMenuIdChange, onAction, className, }: MenubarProps<Key, MenuKey>): import("react").JSX.Element;
+//# sourceMappingURL=menubar.d.ts.map

package/dist/menubar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../src/menubar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,4CAA4C,CAAC;AAIpD,MAAM,MAAM,YAAY,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,OAAO,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IAChG,UAAU,EAAE,iBAAiB,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,wBAAgB,OAAO,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,OAAO,SAAS,MAAM,GAAG,MAAM,EAAE,EACpF,UAAU,EACV,UAAU,EAAE,cAAc,EAC1B,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,SAAS,GACV,EAAE,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,+BA0J5B"}

package/dist/menubar.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { menubarRecipe, resolveMenubarNavigation, validateMenubarDescriptor, } from "@hjmds/design-contracts/components/menubar";
+import { useEffect, useRef, useState } from "react";
+import { classNames, useControllableState } from "./internal.js";
+export function Menubar({ descriptor, openMenuId: controlledOpen, defaultOpenMenuId, onOpenMenuIdChange, onAction, className, }) {
+    validateMenubarDescriptor(descriptor);
+    const [openId, setOpenId] = useControllableState({
+        ...(controlledOpen === undefined ? {} : { value: controlledOpen }),
+        defaultValue: defaultOpenMenuId ?? null,
+        ...(onOpenMenuIdChange === undefined ? {} : { onChange: onOpenMenuIdChange }),
+    });
+    const enabledMenus = descriptor.menus.filter((menu) => menu.disabled !== true);
+    // Roving focus: the bar is one tab stop, so the bar — not each label — owns
+    // which menu is reachable by Tab.
+    const [focusedId, setFocusedId] = useState(enabledMenus[0]?.id ?? descriptor.menus[0].id);
+    const [activeItemIndex, setActiveItemIndex] = useState(0);
+    const rootRef = useRef(null);
+    const labelRefs = useRef(new Map());
+    const openMenu = descriptor.menus.find((menu) => menu.id === openId) ?? null;
+    const openItems = openMenu?.items.filter((item) => item.disabled !== true) ?? [];
+    useEffect(() => {
+        if (openId === null)
+            return;
+        const onPointerDown = (event) => {
+            if (event.target instanceof Node && rootRef.current?.contains(event.target))
+                return;
+            setOpenId(null);
+        };
+        document.addEventListener("pointerdown", onPointerDown);
+        return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [openId, setOpenId]);
+    const focusLabel = (id) => {
+        setFocusedId(id);
+        labelRefs.current.get(id)?.focus();
+    };
+    const move = (direction) => {
+        const next = resolveMenubarNavigation(descriptor, focusedId, direction);
+        focusLabel(next);
+        // Left/right while a menu is open moves to the neighbour already open, which
+        // is the whole reason this is a bar and not three independent Menus.
+        if (openId !== null) {
+            setOpenId(next);
+            setActiveItemIndex(0);
+        }
+    };
+    return (_jsx("div", { ref: rootRef, role: "menubar", "aria-label": descriptor.accessibilityLabel, className: classNames("hjm-menubar", className), style: {
+            "--hjm-menubar-min-height": `${menubarRecipe.minHeight}px`,
+            "--hjm-menubar-gap": `${menubarRecipe.gap}px`,
+            "--hjm-menubar-padding": `${menubarRecipe.paddingHorizontal}px`,
+            "--hjm-menubar-label-padding": `${menubarRecipe.label.paddingHorizontal}px`,
+            "--hjm-menubar-label-radius": `${menubarRecipe.label.radius}px`,
+        }, onKeyDown: (event) => {
+            if (event.key === "ArrowRight") {
+                event.preventDefault();
+                move("next");
+                return;
+            }
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                move("previous");
+                return;
+            }
+            if (event.key === "Home" || event.key === "End") {
+                event.preventDefault();
+                const target = (event.key === "Home" ? enabledMenus[0] : enabledMenus.at(-1))?.id;
+                if (target !== undefined) {
+                    focusLabel(target);
+                    if (openId !== null) {
+                        setOpenId(target);
+                        setActiveItemIndex(0);
+                    }
+                }
+                return;
+            }
+            if (event.key === "Escape" && openId !== null) {
+                event.preventDefault();
+                setOpenId(null);
+                focusLabel(focusedId);
+                return;
+            }
+            if (openId === null) {
+                if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    setOpenId(focusedId);
+                    setActiveItemIndex(0);
+                }
+                return;
+            }
+            if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+                setActiveItemIndex((previous) => {
+                    const next = event.key === "ArrowDown" ? previous + 1 : previous - 1;
+                    return (next + openItems.length) % Math.max(openItems.length, 1);
+                });
+                return;
+            }
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                const item = openItems[activeItemIndex];
+                if (item) {
+                    onAction(item.id, openId);
+                    // Activation runs an action and leaves nothing selected — unlike Tabs.
+                    setOpenId(null);
+                    focusLabel(openId);
+                }
+            }
+        }, children: descriptor.menus.map((menu) => {
+            const open = menu.id === openId;
+            return (_jsxs("div", { className: "hjm-menubar__menu", children: [_jsx("button", { type: "button", ref: (node) => { if (node)
+                            labelRefs.current.set(menu.id, node);
+                        else
+                            labelRefs.current.delete(menu.id); }, role: "menuitem", "aria-haspopup": "menu", "aria-expanded": open, disabled: menu.disabled, tabIndex: menu.id === focusedId ? 0 : -1, "data-open": open || undefined, className: "hjm-menubar__label", onClick: () => {
+                            setFocusedId(menu.id);
+                            setOpenId(open ? null : menu.id);
+                            setActiveItemIndex(0);
+                        }, onMouseEnter: () => {
+                            // Once one menu is open, hovering the bar switches menus — the
+                            // desktop convention; with nothing open, hover opens nothing.
+                            if (openId !== null && menu.disabled !== true) {
+                                setOpenId(menu.id);
+                                setFocusedId(menu.id);
+                                setActiveItemIndex(0);
+                            }
+                        }, children: menu.label }), open ? (_jsx("div", { role: "menu", "aria-label": menu.label, className: "hjm-menubar__panel", children: menu.items.map((item) => {
+                            const index = openItems.findIndex((candidate) => candidate.id === item.id);
+                            return (_jsxs("div", { role: "menuitem", "aria-disabled": item.disabled || undefined, "data-active": index === activeItemIndex && item.disabled !== true ? "" : undefined, "data-tone": item.tone, className: "hjm-menubar__item", onMouseEnter: () => { if (index >= 0)
+                                    setActiveItemIndex(index); }, onClick: () => {
+                                    if (item.disabled)
+                                        return;
+                                    onAction(item.id, menu.id);
+                                    setOpenId(null);
+                                    focusLabel(menu.id);
+                                }, children: [_jsx("span", { children: item.label }), item.shortcut ? _jsx("kbd", { className: "hjm-menubar__shortcut", children: item.shortcut }) : null] }, item.id));
+                        }) })) : null] }, menu.id));
+        }) }));
+}
+//# sourceMappingURL=menubar.js.map

package/dist/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","sourceRoot":"","sources":["../src/menubar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  menubarRecipe,\n  resolveMenubarNavigation,\n  validateMenubarDescriptor,\n  type MenubarDescriptor,\n} from \"@hjmds/design-contracts/components/menubar\";\nimport { useEffect, useRef, useState, type CSSProperties } from \"react\";\nimport { classNames, useControllableState } from \"./internal.js\";\n\nexport type MenubarProps<Key extends string = string, MenuKey extends string = string> = Readonly<{\n  descriptor: MenubarDescriptor<Key, MenuKey>;\n  openMenuId?: MenuKey | null;\n  defaultOpenMenuId?: MenuKey | null;\n  onOpenMenuIdChange?: (id: MenuKey | null) => void;\n  onAction: (id: Key, menuId: MenuKey) => void;\n  className?: string;\n}>;\n\nexport function Menubar<Key extends string = string, MenuKey extends string = string>({\n  descriptor,\n  openMenuId: controlledOpen,\n  defaultOpenMenuId,\n  onOpenMenuIdChange,\n  onAction,\n  className,\n}: MenubarProps<Key, MenuKey>) {\n  validateMenubarDescriptor(descriptor);\n  const [openId, setOpenId] = useControllableState<MenuKey | null>({\n    ...(controlledOpen === undefined ? {} : { value: controlledOpen }),\n    defaultValue: defaultOpenMenuId ?? null,\n    ...(onOpenMenuIdChange === undefined ? {} : { onChange: onOpenMenuIdChange }),\n  });\n  const enabledMenus = descriptor.menus.filter((menu) => menu.disabled !== true);\n  // Roving focus: the bar is one tab stop, so the bar — not each label — owns\n  // which menu is reachable by Tab.\n  const [focusedId, setFocusedId] = useState<MenuKey>(enabledMenus[0]?.id ?? descriptor.menus[0]!.id);\n  const [activeItemIndex, setActiveItemIndex] = useState(0);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const labelRefs = useRef(new Map<MenuKey, HTMLButtonElement>());\n  const openMenu = descriptor.menus.find((menu) => menu.id === openId) ?? null;\n  const openItems = openMenu?.items.filter((item) => item.disabled !== true) ?? [];\n\n  useEffect(() => {\n    if (openId === null) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (event.target instanceof Node && rootRef.current?.contains(event.target)) return;\n      setOpenId(null);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  }, [openId, setOpenId]);\n\n  const focusLabel = (id: MenuKey) => {\n    setFocusedId(id);\n    labelRefs.current.get(id)?.focus();\n  };\n  const move = (direction: \"next\" | \"previous\") => {\n    const next = resolveMenubarNavigation(descriptor, focusedId, direction);\n    focusLabel(next);\n    // Left/right while a menu is open moves to the neighbour already open, which\n    // is the whole reason this is a bar and not three independent Menus.\n    if (openId !== null) { setOpenId(next); setActiveItemIndex(0); }\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      role=\"menubar\"\n      aria-label={descriptor.accessibilityLabel}\n      className={classNames(\"hjm-menubar\", className)}\n      style={{\n        \"--hjm-menubar-min-height\": `${menubarRecipe.minHeight}px`,\n        \"--hjm-menubar-gap\": `${menubarRecipe.gap}px`,\n        \"--hjm-menubar-padding\": `${menubarRecipe.paddingHorizontal}px`,\n        \"--hjm-menubar-label-padding\": `${menubarRecipe.label.paddingHorizontal}px`,\n        \"--hjm-menubar-label-radius\": `${menubarRecipe.label.radius}px`,\n      } as CSSProperties}\n      onKeyDown={(event) => {\n        if (event.key === \"ArrowRight\") { event.preventDefault(); move(\"next\"); return; }\n        if (event.key === \"ArrowLeft\") { event.preventDefault(); move(\"previous\"); return; }\n        if (event.key === \"Home\" || event.key === \"End\") {\n          event.preventDefault();\n          const target = (event.key === \"Home\" ? enabledMenus[0] : enabledMenus.at(-1))?.id;\n          if (target !== undefined) { focusLabel(target); if (openId !== null) { setOpenId(target); setActiveItemIndex(0); } }\n          return;\n        }\n        if (event.key === \"Escape\" && openId !== null) {\n          event.preventDefault();\n          setOpenId(null);\n          focusLabel(focusedId);\n          return;\n        }\n        if (openId === null) {\n          if (event.key === \"ArrowDown\" || event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            setOpenId(focusedId);\n            setActiveItemIndex(0);\n          }\n          return;\n        }\n        if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n          event.preventDefault();\n          setActiveItemIndex((previous) => {\n            const next = event.key === \"ArrowDown\" ? previous + 1 : previous - 1;\n            return (next + openItems.length) % Math.max(openItems.length, 1);\n          });\n          return;\n        }\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          const item = openItems[activeItemIndex];\n          if (item) {\n            onAction(item.id as Key, openId);\n            // Activation runs an action and leaves nothing selected — unlike Tabs.\n            setOpenId(null);\n            focusLabel(openId);\n          }\n        }\n      }}\n    >\n      {descriptor.menus.map((menu) => {\n        const open = menu.id === openId;\n        return (\n          <div key={menu.id} className=\"hjm-menubar__menu\">\n            <button\n              type=\"button\"\n              ref={(node) => { if (node) labelRefs.current.set(menu.id, node); else labelRefs.current.delete(menu.id); }}\n              role=\"menuitem\"\n              aria-haspopup=\"menu\"\n              aria-expanded={open}\n              disabled={menu.disabled}\n              tabIndex={menu.id === focusedId ? 0 : -1}\n              data-open={open || undefined}\n              className=\"hjm-menubar__label\"\n              onClick={() => {\n                setFocusedId(menu.id);\n                setOpenId(open ? null : menu.id);\n                setActiveItemIndex(0);\n              }}\n              onMouseEnter={() => {\n                // Once one menu is open, hovering the bar switches menus — the\n                // desktop convention; with nothing open, hover opens nothing.\n                if (openId !== null && menu.disabled !== true) { setOpenId(menu.id); setFocusedId(menu.id); setActiveItemIndex(0); }\n              }}\n            >\n              {menu.label}\n            </button>\n            {open ? (\n              <div role=\"menu\" aria-label={menu.label} className=\"hjm-menubar__panel\">\n                {menu.items.map((item) => {\n                  const index = openItems.findIndex((candidate) => candidate.id === item.id);\n                  return (\n                    <div\n                      key={item.id}\n                      role=\"menuitem\"\n                      aria-disabled={item.disabled || undefined}\n                      data-active={index === activeItemIndex && item.disabled !== true ? \"\" : undefined}\n                      data-tone={item.tone}\n                      className=\"hjm-menubar__item\"\n                      onMouseEnter={() => { if (index >= 0) setActiveItemIndex(index); }}\n                      onClick={() => {\n                        if (item.disabled) return;\n                        onAction(item.id as Key, menu.id);\n                        setOpenId(null);\n                        focusLabel(menu.id);\n                      }}\n                    >\n                      <span>{item.label}</span>\n                      {item.shortcut ? <kbd className=\"hjm-menubar__shortcut\">{item.shortcut}</kbd> : null}\n                    </div>\n                  );\n                })}\n              </div>\n            ) : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"]}

package/dist/modal.d.ts

@@ -0,0 +1,67 @@
+import { type AriaAttributes, type MouseEventHandler, type ReactElement, type ReactNode, type Ref } from "react";
+export type TriggerElementProps = Readonly<{
+    ref?: Ref<HTMLElement>;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLElement>;
+    onMouseEnter?: MouseEventHandler<HTMLElement>;
+    onMouseLeave?: MouseEventHandler<HTMLElement>;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement>;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement>;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    "aria-controls"?: string;
+    "aria-describedby"?: string;
+    "aria-disabled"?: AriaAttributes["aria-disabled"];
+    "aria-expanded"?: AriaAttributes["aria-expanded"];
+    "aria-haspopup"?: AriaAttributes["aria-haspopup"];
+}>;
+export type OverlayTrigger = ReactElement<TriggerElementProps>;
+export declare function containsEventTarget(container: Node | null, target: EventTarget | null): boolean;
+type ModalPortalProps = Readonly<{
+    children: ReactNode;
+    container?: HTMLElement;
+}>;
+export declare function HjmPortal({ children, container }: ModalPortalProps): import("react").ReactPortal | null;
+export type OpenState<Detail> = Readonly<{
+    open: boolean;
+    defaultOpen?: never;
+    onOpenChange: (open: boolean, detail: Detail) => void;
+}> | Readonly<{
+    open?: never;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, detail: Detail) => void;
+}>;
+export type ModalOpenState<Detail> = Readonly<{
+    open: boolean;
+    defaultOpen?: never;
+    onOpenChange: (open: boolean, detail: Detail) => void;
+    /** Optional for product-owned, programmatically controlled overlays. */
+    trigger?: OverlayTrigger;
+}> | Readonly<{
+    open?: never;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, detail: Detail) => void;
+    /** Uncontrolled overlays need a first-party activation target. */
+    trigger: OverlayTrigger;
+}>;
+export declare function useOpenState<Detail>({ open, defaultOpen, onOpenChange, }: Readonly<{
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, detail: Detail) => void;
+}>): readonly [boolean, (nextOpen: boolean, detail: Detail) => void];
+export declare function getFocusable(container: HTMLElement): HTMLElement[];
+export declare function getModalLayer(priority: number): number;
+type ModalFocusOptions = Readonly<{
+    active: boolean;
+    priority?: number;
+    contentRef: React.RefObject<HTMLElement | null>;
+    initialFocusRef?: React.RefObject<HTMLElement | null>;
+    returnFocusRef?: React.RefObject<HTMLElement | null>;
+    fallbackReturnRef?: React.RefObject<HTMLElement | null>;
+    onEscape(): void;
+}>;
+export declare function useModalFocus({ active, priority, contentRef, initialFocusRef, returnFocusRef, fallbackReturnRef, onEscape, }: ModalFocusOptions): void;
+export declare function renderTrigger(trigger: OverlayTrigger, triggerRef: React.RefObject<HTMLElement | null>, open: boolean, contentId: string, popup: "dialog" | "menu", onOpen: () => void): ReactElement;
+export {};
+//# sourceMappingURL=modal.d.ts.map

package/dist/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../src/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAef,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACxD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAClD,eAAe,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAClD,eAAe,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;CACnD,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAC;AAE/D,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,IAAI,GAAG,IAAI,EACtB,MAAM,EAAE,WAAW,GAAG,IAAI,GACzB,OAAO,CAIT;AAED,KAAK,gBAAgB,GAAG,QAAQ,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB,CAAC,CAAC;AAEH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,sCAsBlE;AAED,MAAM,MAAM,SAAS,CAAC,MAAM,IACxB,QAAQ,CAAC;IACP,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD,CAAC,GACF,QAAQ,CAAC;IACP,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD,CAAC,CAAC;AAEP,MAAM,MAAM,cAAc,CAAC,MAAM,IAC7B,QAAQ,CAAC;IACP,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,wEAAwE;IACxE,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B,CAAC,GACF,QAAQ,CAAC;IACP,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvD,kEAAkE;IAClE,OAAO,EAAE,cAAc,CAAC;CACzB,CAAC,CAAC;AAEP,wBAAgB,YAAY,CAAC,MAAM,EAAE,EACnC,IAAI,EACJ,WAAmB,EACnB,YAAY,GACb,EAAE,QAAQ,CAAC;IACV,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD,CAAC,iCAWa,OAAO,UAAU,MAAM,WAmBrC;AAWD,wBAAgB,YAAY,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAMlE;AAoCD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAKtD;AAkGD,KAAK,iBAAiB,GAAG,QAAQ,CAAC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAChD,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACrD,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxD,QAAQ,IAAI,IAAI,CAAC;CAClB,CAAC,CAAC;AAEH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,QAAY,EACZ,UAAU,EACV,eAAe,EACf,cAAc,EACd,iBAAiB,EACjB,QAAQ,GACT,EAAE,iBAAiB,GAAG,IAAI,CAoG1B;AAED,wBAAgB,aAAa,CAC3B,OAAO,EAAE,cAAc,EACvB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC/C,IAAI,EAAE,OAAO,EACb,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,QAAQ,GAAG,MAAM,EACxB,MAAM,EAAE,MAAM,IAAI,GACjB,YAAY,CAYd"}

package/dist/modal.js

@@ -0,0 +1,307 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isLargeTextScale } from "@hjmds/design-contracts/components/design-system-provider";
+import { cloneElement, useCallback, useEffect, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
+import { composeRefs } from "./internal.js";
+import { getPopoverOwner } from "./portal.js";
+import { useOptionalHjmTheme } from "./provider.js";
+import { createHjmThemeStyle } from "./theme.js";
+export function containsEventTarget(container, target) {
+    return target !== null &&
+        "nodeType" in target &&
+        container?.contains(target) === true;
+}
+export function HjmPortal({ children, container }) {
+    const [mounted, setMounted] = useState(false);
+    const theme = useOptionalHjmTheme();
+    useEffect(() => setMounted(true), []);
+    if (!mounted)
+        return null;
+    return createPortal(theme ? (_jsx("div", { className: "hjm-root hjm-portal", "data-hjm-portal": "", "data-motion": theme.environment.reducedMotion ? "reduced" : "full", "data-theme": theme.environment.theme, "data-text-scale": theme.environment.textScale, "data-large-text": isLargeTextScale(theme.environment.textScale) ? "true" : undefined, dir: theme.environment.direction, style: createHjmThemeStyle(theme), children: children })) : children, container ?? document.body);
+}
+export function useOpenState({ open, defaultOpen = false, onOpenChange, }) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const controlled = open !== undefined;
+    const currentOpen = controlled ? open : internalOpen;
+    const pendingRequestRef = useRef(undefined);
+    useEffect(() => {
+        if (pendingRequestRef.current === currentOpen) {
+            pendingRequestRef.current = undefined;
+        }
+    }, [currentOpen]);
+    const changeOpen = useCallback((nextOpen, detail) => {
+        if (nextOpen === currentOpen ||
+            pendingRequestRef.current === nextOpen)
+            return;
+        pendingRequestRef.current = nextOpen;
+        if (!controlled)
+            setInternalOpen(nextOpen);
+        onOpenChange?.(nextOpen, detail);
+        if (controlled && nextOpen) {
+            queueMicrotask(() => {
+                if (pendingRequestRef.current === true) {
+                    pendingRequestRef.current = undefined;
+                }
+            });
+        }
+    }, [controlled, currentOpen, onOpenChange]);
+    return [currentOpen, changeOpen];
+}
+const focusableSelector = [
+    "a[href]",
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    "[tabindex]:not([tabindex='-1'])",
+].join(",");
+export function getFocusable(container) {
+    return [...container.querySelectorAll(focusableSelector)].filter((element) => element.tabIndex >= 0 && !element.matches(":disabled") &&
+        !element.closest('[hidden],[inert],[aria-hidden="true"]') &&
+        element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden");
+}
+let bodyLockCount = 0;
+let previousBodyOverflow = "";
+const activeModalStack = [];
+let activeModalOrder = 0;
+const isolatedModalBackground = new Map();
+let modalIsolationObserver = null;
+function getOwnedPopupHosts(modal) {
+    const ownerId = modal.element.id;
+    if (ownerId.length === 0)
+        return [];
+    return [...document.querySelectorAll("[data-hjm-popup-owner]")]
+        .filter((host) => host.getAttribute("data-hjm-popup-owner") === ownerId);
+}
+function modalContainsNode(modal, node) {
+    return modal.element.contains(node) ||
+        getOwnedPopupHosts(modal).some((host) => host.contains(node));
+}
+function getModalFocusable(modal) {
+    return [
+        ...getFocusable(modal.element),
+        ...getOwnedPopupHosts(modal).flatMap((host) => getFocusable(host)),
+    ];
+}
+export function getModalLayer(priority) {
+    if (!Number.isSafeInteger(priority)) {
+        throw new TypeError("modalPriority must be a safe integer");
+    }
+    return 1000 + priority;
+}
+function getTopModal() {
+    let top;
+    for (const modal of activeModalStack) {
+        if (!modal.element.isConnected)
+            continue;
+        if (top === undefined ||
+            modal.priority > top.priority ||
+            (modal.priority === top.priority && modal.order > top.order))
+            top = modal;
+    }
+    return top;
+}
+function modalRanksAbove(candidate, reference) {
+    return candidate.priority > reference.priority ||
+        (candidate.priority === reference.priority && candidate.order > reference.order);
+}
+function restoreModalBackground() {
+    for (const [element, previous] of isolatedModalBackground) {
+        element.inert = previous.inert;
+        if (previous.ariaHidden === null)
+            element.removeAttribute("aria-hidden");
+        else
+            element.setAttribute("aria-hidden", previous.ariaHidden);
+    }
+    isolatedModalBackground.clear();
+}
+function isolateModalBackgroundElement(element) {
+    if (isolatedModalBackground.has(element))
+        return;
+    isolatedModalBackground.set(element, {
+        ariaHidden: element.getAttribute("aria-hidden"),
+        inert: element.inert,
+    });
+    element.inert = true;
+    element.setAttribute("aria-hidden", "true");
+}
+/** Keeps only the top modal's ancestor path interactive, including late portals. */
+function synchronizeModalBackgroundIsolation() {
+    restoreModalBackground();
+    for (let index = activeModalStack.length - 1; index >= 0; index -= 1) {
+        if (!activeModalStack[index]?.element.isConnected)
+            activeModalStack.splice(index, 1);
+    }
+    const top = getTopModal();
+    if (!top) {
+        modalIsolationObserver?.disconnect();
+        modalIsolationObserver = null;
+        return;
+    }
+    const interactivePath = new Set();
+    for (const root of [top.element, ...getOwnedPopupHosts(top)]) {
+        let pathNode = root;
+        while (pathNode) {
+            if (pathNode === document.body)
+                break;
+            interactivePath.add(pathNode);
+            pathNode = pathNode.parentElement;
+        }
+    }
+    const inspectedParents = new Set();
+    for (const pathNode of interactivePath) {
+        const parent = pathNode.parentElement;
+        if (!parent || inspectedParents.has(parent))
+            continue;
+        inspectedParents.add(parent);
+        for (const sibling of parent.children) {
+            if (sibling instanceof HTMLElement && !interactivePath.has(sibling)) {
+                isolateModalBackgroundElement(sibling);
+            }
+        }
+    }
+    if (modalIsolationObserver === null) {
+        modalIsolationObserver = new MutationObserver(() => {
+            synchronizeModalBackgroundIsolation();
+        });
+        modalIsolationObserver.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["data-hjm-popup-owner"],
+            childList: true,
+            subtree: true,
+        });
+    }
+}
+function lockBodyScroll() {
+    if (bodyLockCount === 0) {
+        previousBodyOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+    }
+    bodyLockCount += 1;
+    return () => {
+        bodyLockCount = Math.max(0, bodyLockCount - 1);
+        if (bodyLockCount === 0)
+            document.body.style.overflow = previousBodyOverflow;
+    };
+}
+export function useModalFocus({ active, priority = 0, contentRef, initialFocusRef, returnFocusRef, fallbackReturnRef, onEscape, }) {
+    const escapeRef = useRef(onEscape);
+    escapeRef.current = onEscape;
+    useEffect(() => {
+        if (!active)
+            return;
+        let retryTimer;
+        let release;
+        let cancelled = false;
+        const activate = () => {
+            const content = contentRef.current;
+            if (!content) {
+                retryTimer = setTimeout(activate, 0);
+                return;
+            }
+            const previouslyFocused = document.activeElement instanceof HTMLElement
+                ? document.activeElement
+                : null;
+            const releaseScroll = lockBodyScroll();
+            const modal = {
+                element: content,
+                order: activeModalOrder += 1,
+                priority,
+            };
+            activeModalStack.push(modal);
+            synchronizeModalBackgroundIsolation();
+            const initial = initialFocusRef?.current ?? getFocusable(content)[0] ?? content;
+            if (getTopModal() === modal)
+                initial.focus();
+            const handleKeyDown = (event) => {
+                if (getTopModal() !== modal)
+                    return;
+                if (event.key === "Escape") {
+                    // A focused non-modal child owns its first Escape. Let its content (or
+                    // nested menu) handle it before dismissing the containing modal.
+                    if (event.target instanceof Node && getPopoverOwner(event.target))
+                        return;
+                    event.preventDefault();
+                    escapeRef.current();
+                    return;
+                }
+                if (event.key !== "Tab")
+                    return;
+                const focusable = getModalFocusable(modal);
+                if (focusable.length === 0) {
+                    event.preventDefault();
+                    content.focus();
+                    return;
+                }
+                const first = focusable[0];
+                const last = focusable.at(-1);
+                const current = document.activeElement;
+                if (event.shiftKey && (current === first || !(current instanceof Node) || !modalContainsNode(modal, current))) {
+                    event.preventDefault();
+                    last.focus();
+                }
+                else if (!event.shiftKey && (current === last || !(current instanceof Node) || !modalContainsNode(modal, current))) {
+                    event.preventDefault();
+                    first.focus();
+                }
+            };
+            const handleFocusIn = (event) => {
+                if (getTopModal() !== modal)
+                    return;
+                if (event.target instanceof Node && !modalContainsNode(modal, event.target)) {
+                    (initialFocusRef?.current ?? getFocusable(content)[0] ?? content).focus();
+                }
+            };
+            document.addEventListener("keydown", handleKeyDown, true);
+            document.addEventListener("focusin", handleFocusIn, true);
+            release = () => {
+                const wasTop = !activeModalStack.some((candidate) => candidate !== modal && candidate.element.isConnected && modalRanksAbove(candidate, modal));
+                document.removeEventListener("keydown", handleKeyDown, true);
+                document.removeEventListener("focusin", handleFocusIn, true);
+                const stackIndex = activeModalStack.lastIndexOf(modal);
+                if (stackIndex >= 0)
+                    activeModalStack.splice(stackIndex, 1);
+                synchronizeModalBackgroundIsolation();
+                releaseScroll();
+                const returnTarget = returnFocusRef?.current ?? fallbackReturnRef?.current ?? previouslyFocused;
+                if (wasTop) {
+                    queueMicrotask(() => {
+                        const nextTop = getTopModal();
+                        if (!nextTop) {
+                            returnTarget?.focus();
+                            return;
+                        }
+                        if (returnTarget && modalContainsNode(nextTop, returnTarget))
+                            returnTarget.focus();
+                        else
+                            (getModalFocusable(nextTop)[0] ?? nextTop.element).focus();
+                    });
+                }
+            };
+            if (cancelled)
+                release();
+        };
+        activate();
+        return () => {
+            cancelled = true;
+            if (retryTimer !== undefined)
+                clearTimeout(retryTimer);
+            release?.();
+        };
+    }, [active, contentRef, fallbackReturnRef, initialFocusRef, priority, returnFocusRef]);
+}
+export function renderTrigger(trigger, triggerRef, open, contentId, popup, onOpen) {
+    const props = trigger.props;
+    return cloneElement(trigger, {
+        ref: composeRefs(props.ref, triggerRef),
+        "aria-controls": contentId,
+        "aria-expanded": open,
+        "aria-haspopup": popup,
+        onClick: (event) => {
+            props.onClick?.(event);
+            if (!event.defaultPrevented && !props.disabled)
+                onOpen();
+        },
+    });
+}
+//# sourceMappingURL=modal.js.map

package/dist/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../src/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { isLargeTextScale } from \"@hjmds/design-contracts/components/design-system-provider\";\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type AriaAttributes,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { composeRefs } from \"./internal.js\";\nimport { getPopoverOwner } from \"./portal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\nimport { createHjmThemeStyle } from \"./theme.js\";\n\n/*\n  Shared modal machinery for Dialog, AlertDialog, Sheet, and SidePanel. Keeping it\n  inside overlays.tsx would drag the Menu and Tooltip graph into SidePanel's granular\n  entry; copying it would split `activeModalStack` in two, so a Dialog and a SidePanel\n  would each believe they are topmost. The stack, the body-scroll lock, and background\n  isolation must stay single module-level instances, so they live here alone.\n*/\n\nexport type TriggerElementProps = Readonly<{\n  ref?: Ref<HTMLElement>;\n  disabled?: boolean;\n  onClick?: MouseEventHandler<HTMLElement>;\n  onMouseEnter?: MouseEventHandler<HTMLElement>;\n  onMouseLeave?: MouseEventHandler<HTMLElement>;\n  onPointerEnter?: React.PointerEventHandler<HTMLElement>;\n  onPointerLeave?: React.PointerEventHandler<HTMLElement>;\n  onFocus?: React.FocusEventHandler<HTMLElement>;\n  onBlur?: React.FocusEventHandler<HTMLElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n  \"aria-controls\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-disabled\"?: AriaAttributes[\"aria-disabled\"];\n  \"aria-expanded\"?: AriaAttributes[\"aria-expanded\"];\n  \"aria-haspopup\"?: AriaAttributes[\"aria-haspopup\"];\n}>;\n\nexport type OverlayTrigger = ReactElement<TriggerElementProps>;\n\nexport function containsEventTarget(\n  container: Node | null,\n  target: EventTarget | null,\n): boolean {\n  return target !== null &&\n    \"nodeType\" in target &&\n    container?.contains(target as Node) === true;\n}\n\ntype ModalPortalProps = Readonly<{\n  children: ReactNode;\n  container?: HTMLElement;\n}>;\n\nexport function HjmPortal({ children, container }: ModalPortalProps) {\n  const [mounted, setMounted] = useState(false);\n  const theme = useOptionalHjmTheme();\n  useEffect(() => setMounted(true), []);\n  if (!mounted) return null;\n  return createPortal(\n    theme ? (\n      <div\n        className=\"hjm-root hjm-portal\"\n        data-hjm-portal=\"\"\n        data-motion={theme.environment.reducedMotion ? \"reduced\" : \"full\"}\n        data-theme={theme.environment.theme}\n        data-text-scale={theme.environment.textScale}\n        data-large-text={isLargeTextScale(theme.environment.textScale) ? \"true\" : undefined}\n        dir={theme.environment.direction}\n        style={createHjmThemeStyle(theme)}\n      >\n        {children}\n      </div>\n    ) : children,\n    container ?? document.body,\n  );\n}\n\nexport type OpenState<Detail> =\n  | Readonly<{\n      open: boolean;\n      defaultOpen?: never;\n      onOpenChange: (open: boolean, detail: Detail) => void;\n    }>\n  | Readonly<{\n      open?: never;\n      defaultOpen?: boolean;\n      onOpenChange?: (open: boolean, detail: Detail) => void;\n    }>;\n\nexport type ModalOpenState<Detail> =\n  | Readonly<{\n      open: boolean;\n      defaultOpen?: never;\n      onOpenChange: (open: boolean, detail: Detail) => void;\n      /** Optional for product-owned, programmatically controlled overlays. */\n      trigger?: OverlayTrigger;\n    }>\n  | Readonly<{\n      open?: never;\n      defaultOpen?: boolean;\n      onOpenChange?: (open: boolean, detail: Detail) => void;\n      /** Uncontrolled overlays need a first-party activation target. */\n      trigger: OverlayTrigger;\n    }>;\n\nexport function useOpenState<Detail>({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n}: Readonly<{\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, detail: Detail) => void;\n}>) {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const controlled = open !== undefined;\n  const currentOpen = controlled ? open : internalOpen;\n  const pendingRequestRef = useRef<boolean | undefined>(undefined);\n  useEffect(() => {\n    if (pendingRequestRef.current === currentOpen) {\n      pendingRequestRef.current = undefined;\n    }\n  }, [currentOpen]);\n  const changeOpen = useCallback(\n    (nextOpen: boolean, detail: Detail) => {\n      if (\n        nextOpen === currentOpen ||\n        pendingRequestRef.current === nextOpen\n      ) return;\n      pendingRequestRef.current = nextOpen;\n      if (!controlled) setInternalOpen(nextOpen);\n      onOpenChange?.(nextOpen, detail);\n      if (controlled && nextOpen) {\n        queueMicrotask(() => {\n          if (pendingRequestRef.current === true) {\n            pendingRequestRef.current = undefined;\n          }\n        });\n      }\n    },\n    [controlled, currentOpen, onOpenChange],\n  );\n  return [currentOpen, changeOpen] as const;\n}\n\nconst focusableSelector = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\nexport function getFocusable(container: HTMLElement): HTMLElement[] {\n  return [...container.querySelectorAll<HTMLElement>(focusableSelector)].filter(\n    (element) => element.tabIndex >= 0 && !element.matches(\":disabled\") &&\n      !element.closest('[hidden],[inert],[aria-hidden=\"true\"]') &&\n      element.getClientRects().length > 0 && getComputedStyle(element).visibility !== \"hidden\",\n  );\n}\n\nlet bodyLockCount = 0;\nlet previousBodyOverflow = \"\";\ntype ActiveModal = Readonly<{\n  element: HTMLElement;\n  order: number;\n  priority: number;\n}>;\nconst activeModalStack: ActiveModal[] = [];\nlet activeModalOrder = 0;\nconst isolatedModalBackground = new Map<\n  HTMLElement,\n  Readonly<{ ariaHidden: string | null; inert: boolean }>\n>();\nlet modalIsolationObserver: MutationObserver | null = null;\n\nfunction getOwnedPopupHosts(modal: ActiveModal): HTMLElement[] {\n  const ownerId = modal.element.id;\n  if (ownerId.length === 0) return [];\n  return [...document.querySelectorAll<HTMLElement>(\"[data-hjm-popup-owner]\")]\n    .filter((host) => host.getAttribute(\"data-hjm-popup-owner\") === ownerId);\n}\n\nfunction modalContainsNode(modal: ActiveModal, node: Node): boolean {\n  return modal.element.contains(node) ||\n    getOwnedPopupHosts(modal).some((host) => host.contains(node));\n}\n\nfunction getModalFocusable(modal: ActiveModal): HTMLElement[] {\n  return [\n    ...getFocusable(modal.element),\n    ...getOwnedPopupHosts(modal).flatMap((host) => getFocusable(host)),\n  ];\n}\n\nexport function getModalLayer(priority: number): number {\n  if (!Number.isSafeInteger(priority)) {\n    throw new TypeError(\"modalPriority must be a safe integer\");\n  }\n  return 1000 + priority;\n}\n\nfunction getTopModal(): ActiveModal | undefined {\n  let top: ActiveModal | undefined;\n  for (const modal of activeModalStack) {\n    if (!modal.element.isConnected) continue;\n    if (\n      top === undefined ||\n      modal.priority > top.priority ||\n      (modal.priority === top.priority && modal.order > top.order)\n    ) top = modal;\n  }\n  return top;\n}\n\nfunction modalRanksAbove(candidate: ActiveModal, reference: ActiveModal): boolean {\n  return candidate.priority > reference.priority ||\n    (candidate.priority === reference.priority && candidate.order > reference.order);\n}\n\nfunction restoreModalBackground(): void {\n  for (const [element, previous] of isolatedModalBackground) {\n    element.inert = previous.inert;\n    if (previous.ariaHidden === null) element.removeAttribute(\"aria-hidden\");\n    else element.setAttribute(\"aria-hidden\", previous.ariaHidden);\n  }\n  isolatedModalBackground.clear();\n}\n\nfunction isolateModalBackgroundElement(element: HTMLElement): void {\n  if (isolatedModalBackground.has(element)) return;\n  isolatedModalBackground.set(element, {\n    ariaHidden: element.getAttribute(\"aria-hidden\"),\n    inert: element.inert,\n  });\n  element.inert = true;\n  element.setAttribute(\"aria-hidden\", \"true\");\n}\n\n/** Keeps only the top modal's ancestor path interactive, including late portals. */\nfunction synchronizeModalBackgroundIsolation(): void {\n  restoreModalBackground();\n  for (let index = activeModalStack.length - 1; index >= 0; index -= 1) {\n    if (!activeModalStack[index]?.element.isConnected) activeModalStack.splice(index, 1);\n  }\n  const top = getTopModal();\n  if (!top) {\n    modalIsolationObserver?.disconnect();\n    modalIsolationObserver = null;\n    return;\n  }\n\n  const interactivePath = new Set<HTMLElement>();\n  for (const root of [top.element, ...getOwnedPopupHosts(top)]) {\n    let pathNode: HTMLElement | null = root;\n    while (pathNode) {\n      if (pathNode === document.body) break;\n      interactivePath.add(pathNode);\n      pathNode = pathNode.parentElement;\n    }\n  }\n  const inspectedParents = new Set<HTMLElement>();\n  for (const pathNode of interactivePath) {\n    const parent = pathNode.parentElement;\n    if (!parent || inspectedParents.has(parent)) continue;\n    inspectedParents.add(parent);\n    for (const sibling of parent.children) {\n      if (sibling instanceof HTMLElement && !interactivePath.has(sibling)) {\n        isolateModalBackgroundElement(sibling);\n      }\n    }\n  }\n\n  if (modalIsolationObserver === null) {\n    modalIsolationObserver = new MutationObserver(() => {\n      synchronizeModalBackgroundIsolation();\n    });\n    modalIsolationObserver.observe(document.body, {\n      attributes: true,\n      attributeFilter: [\"data-hjm-popup-owner\"],\n      childList: true,\n      subtree: true,\n    });\n  }\n}\n\nfunction lockBodyScroll(): () => void {\n  if (bodyLockCount === 0) {\n    previousBodyOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n  }\n  bodyLockCount += 1;\n  return () => {\n    bodyLockCount = Math.max(0, bodyLockCount - 1);\n    if (bodyLockCount === 0) document.body.style.overflow = previousBodyOverflow;\n  };\n}\n\ntype ModalFocusOptions = Readonly<{\n  active: boolean;\n  priority?: number;\n  contentRef: React.RefObject<HTMLElement | null>;\n  initialFocusRef?: React.RefObject<HTMLElement | null>;\n  returnFocusRef?: React.RefObject<HTMLElement | null>;\n  fallbackReturnRef?: React.RefObject<HTMLElement | null>;\n  onEscape(): void;\n}>;\n\nexport function useModalFocus({\n  active,\n  priority = 0,\n  contentRef,\n  initialFocusRef,\n  returnFocusRef,\n  fallbackReturnRef,\n  onEscape,\n}: ModalFocusOptions): void {\n  const escapeRef = useRef(onEscape);\n  escapeRef.current = onEscape;\n\n  useEffect(() => {\n    if (!active) return;\n    let retryTimer: ReturnType<typeof setTimeout> | undefined;\n    let release: (() => void) | undefined;\n    let cancelled = false;\n\n    const activate = () => {\n      const content = contentRef.current;\n      if (!content) {\n        retryTimer = setTimeout(activate, 0);\n        return;\n      }\n      const previouslyFocused = document.activeElement instanceof HTMLElement\n        ? document.activeElement\n        : null;\n      const releaseScroll = lockBodyScroll();\n      const modal: ActiveModal = {\n        element: content,\n        order: activeModalOrder += 1,\n        priority,\n      };\n      activeModalStack.push(modal);\n      synchronizeModalBackgroundIsolation();\n      const initial = initialFocusRef?.current ?? getFocusable(content)[0] ?? content;\n      if (getTopModal() === modal) initial.focus();\n\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (getTopModal() !== modal) return;\n        if (event.key === \"Escape\") {\n          // A focused non-modal child owns its first Escape. Let its content (or\n          // nested menu) handle it before dismissing the containing modal.\n          if (event.target instanceof Node && getPopoverOwner(event.target)) return;\n          event.preventDefault();\n          escapeRef.current();\n          return;\n        }\n        if (event.key !== \"Tab\") return;\n        const focusable = getModalFocusable(modal);\n        if (focusable.length === 0) {\n          event.preventDefault();\n          content.focus();\n          return;\n        }\n        const first = focusable[0]!;\n        const last = focusable.at(-1)!;\n        const current = document.activeElement;\n        if (event.shiftKey && (current === first || !(current instanceof Node) || !modalContainsNode(modal, current))) {\n          event.preventDefault();\n          last.focus();\n        } else if (!event.shiftKey && (current === last || !(current instanceof Node) || !modalContainsNode(modal, current))) {\n          event.preventDefault();\n          first.focus();\n        }\n      };\n      const handleFocusIn = (event: FocusEvent) => {\n        if (getTopModal() !== modal) return;\n        if (event.target instanceof Node && !modalContainsNode(modal, event.target)) {\n          (initialFocusRef?.current ?? getFocusable(content)[0] ?? content).focus();\n        }\n      };\n      document.addEventListener(\"keydown\", handleKeyDown, true);\n      document.addEventListener(\"focusin\", handleFocusIn, true);\n      release = () => {\n        const wasTop = !activeModalStack.some(\n          (candidate) =>\n            candidate !== modal && candidate.element.isConnected && modalRanksAbove(candidate, modal),\n        );\n        document.removeEventListener(\"keydown\", handleKeyDown, true);\n        document.removeEventListener(\"focusin\", handleFocusIn, true);\n        const stackIndex = activeModalStack.lastIndexOf(modal);\n        if (stackIndex >= 0) activeModalStack.splice(stackIndex, 1);\n        synchronizeModalBackgroundIsolation();\n        releaseScroll();\n        const returnTarget =\n          returnFocusRef?.current ?? fallbackReturnRef?.current ?? previouslyFocused;\n        if (wasTop) {\n          queueMicrotask(() => {\n            const nextTop = getTopModal();\n            if (!nextTop) {\n              returnTarget?.focus();\n              return;\n            }\n            if (returnTarget && modalContainsNode(nextTop, returnTarget)) returnTarget.focus();\n            else (getModalFocusable(nextTop)[0] ?? nextTop.element).focus();\n          });\n        }\n      };\n      if (cancelled) release();\n    };\n    activate();\n    return () => {\n      cancelled = true;\n      if (retryTimer !== undefined) clearTimeout(retryTimer);\n      release?.();\n    };\n  }, [active, contentRef, fallbackReturnRef, initialFocusRef, priority, returnFocusRef]);\n}\n\nexport function renderTrigger(\n  trigger: OverlayTrigger,\n  triggerRef: React.RefObject<HTMLElement | null>,\n  open: boolean,\n  contentId: string,\n  popup: \"dialog\" | \"menu\",\n  onOpen: () => void,\n): ReactElement {\n  const props = trigger.props;\n  return cloneElement(trigger, {\n    ref: composeRefs(props.ref, triggerRef),\n    \"aria-controls\": contentId,\n    \"aria-expanded\": open,\n    \"aria-haspopup\": popup,\n    onClick: (event) => {\n      props.onClick?.(event);\n      if (!event.defaultPrevented && !props.disabled) onOpen();\n    },\n  });\n}\n\n"]}