@elliemae/ds-global-header 3.70.0-next.7 → 3.70.0-next.71

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js

@@ -38,49 +38,97 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = require("react");
 var import_constants = require("../../../../constants/index.js");
 var import_styles = require("../../../styles.js");
+var import_styles2 = require("../../styles.js");
 var import_PopupMenuContent = require("./menuContent/PopupMenuContent.js");
-var import_useOnClickOutside = require("../../../../hooks/useOnClickOutside.js");
 const PopupMenu = ({
   Icon,
   onClick,
   setRef,
   componentProps,
-  ownerProps,
+  getOwnerPropsAwareOfPropsPassedToGlobalHeader,
   ...otherProps
 }) => {
-  const { arrowStyles, floatingStyles, isOpen, refs, context, showTooltip, hideTooltip } = (0, import_ds_floating_context.useFloatingContext)({
-    externallyControlledIsOpen: componentProps.isOpen,
-    placement: "bottom",
-    withoutAnimation: true,
-    withoutPortal: true
-  });
   const {
     onClickOutside = () => null,
     onKeyPress,
     popupOnKeyPress,
     isOpen: userIsOpen,
     options,
-    closeOnClick
+    closeOnClick,
+    onOpen,
+    onClose
   } = componentProps;
-  const boundaryRef = (0, import_react.useRef)(null);
+  const { arrowStyles, floatingStyles, isOpen, refs, context, showTooltip, hideTooltip } = (0, import_ds_floating_context.useFloatingContext)({
+    externallyControlledIsOpen: componentProps.isOpen,
+    placement: "bottom",
+    withoutAnimation: true,
+    withoutPortal: true,
+    // The hook auto-excludes clicks inside the floating element and the reference, so the
+    // outside boundary is now { reference, floating } — no boundary <div> needed.
+    // Gated internally on `isOpen`, so it only fires while open.
+    onClickOutside: (event) => {
+      onClickOutside(event);
+      if (userIsOpen === void 0) hideTooltip();
+    },
+    /*
+     * Passive notification, straight through from the floating context. Handed over rather than
+     * reimplemented because the hook is the only place that sees every transition: the trigger click and
+     * ArrowDown both go through `showTooltip`, and click-outside, Escape inside the menu and a
+     * closeOnClick item all go through `hideTooltip` — plus a controlled flip of `isOpen`, which no
+     * handler in this file observes at all.
+     *
+     * Notifying does NOT make the consumer responsible for the transition: this stays uncontrolled unless
+     * they also supply `isOpen`.
+     *
+     * The scoped-Escape caveat in the hook's docs does not apply here. A scoped Escape would route to
+     * `onEscape` instead of `onClose`, but that path needs `closeOnEscape`, which defaults to false and is
+     * not passed — Escape is handled inside PopupMenuContent and closes via `hideTooltip`, so it surfaces
+     * as a normal 'interaction' close. Passing `closeOnEscape` here later would silently punch a hole in
+     * `onClose` unless `onEscape` is wired at the same time.
+     */
+    /*
+     * Escape is the floating context's, not this part's. `closeOnEscape` closes the menu and
+     * `returnFocusToReference` puts focus back on the trigger — both were hand-rolled here before, in
+     * PopupMenuContent's per-item keydown and in a manual `.focus()`.
+     *
+     * Gated on being UNCONTROLLED, and that gate is load-bearing rather than tidy: the hook applies
+     * `returnFocusToReference` on a scoped Escape whichever side owns the open state. For a controlled
+     * consumer the close below is inert, so leaving it on would move focus to the trigger while their
+     * menu is still open — focus outside an open menu. A controlled consumer owns the close, so they own
+     * the Escape and the refocus with it.
+     */
+    closeOnEscape: userIsOpen === void 0,
+    returnFocusToReference: true,
+    /*
+     * A scoped Escape routes HERE and not to `onClose`, so the consumer's close notification has to be
+     * re-emitted or it silently stops reporting the most common keyboard close.
+     */
+    onEscape: (event) => {
+      hideTooltip();
+      onClose?.({ reason: "interaction", event, isControlled: userIsOpen !== void 0 });
+    },
+    onOpen,
+    onClose
+  });
+  const openIntentRef = (0, import_react.useRef)("first");
   const handleOnKeyDown = (0, import_react.useCallback)(
     (e) => {
-      if (e.code === "ArrowDown") {
-        showTooltip();
+      if (e.code === "ArrowDown" || e.code === "ArrowUp") {
+        e.preventDefault();
+        openIntentRef.current = e.code === "ArrowUp" ? "last" : "first";
+        if (userIsOpen === void 0) showTooltip();
       }
       if (onKeyPress) onKeyPress(e);
     },
-    [onKeyPress, showTooltip]
+    [onKeyPress, showTooltip, userIsOpen]
   );
   const handleOnClose = (0, import_react.useCallback)(() => {
-    if (userIsOpen === void 0) {
-      hideTooltip();
-    }
-    refs.reference?.focus();
-  }, [hideTooltip, refs.reference, userIsOpen]);
+    if (userIsOpen === void 0) hideTooltip();
+  }, [hideTooltip, userIsOpen]);
   const handleTriggerOnClick = (0, import_react.useCallback)(
     (e) => {
-      if (userIsOpen === void 0) showTooltip();
+      openIntentRef.current = "first";
+      if (userIsOpen === void 0) showTooltip(e);
       if (onClick) onClick(e);
     },
     [onClick, userIsOpen, showTooltip]
@@ -88,18 +136,6 @@ const PopupMenu = ({
   const handleItemClick = (0, import_react.useCallback)(() => {
     if (closeOnClick && userIsOpen === void 0) handleOnClose();
   }, [closeOnClick, handleOnClose, userIsOpen]);
-  const handleOutside = (0, import_react.useCallback)(
-    (event) => {
-      onClickOutside(event);
-      const actuallyOpen = userIsOpen ?? isOpen;
-      if (!actuallyOpen) return;
-      if (userIsOpen === void 0) {
-        handleOnClose();
-      }
-    },
-    [handleOnClose, isOpen, onClickOutside, userIsOpen]
-  );
-  (0, import_useOnClickOutside.useOnClickOutside)(userIsOpen ?? isOpen ? boundaryRef.current : null, handleOutside);
   const handleRefs = (0, import_react.useCallback)(
     (ref) => {
       setRef(ref);
@@ -107,45 +143,56 @@ const PopupMenu = ({
     },
     [refs, setRef]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: boundaryRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_styles.StyledButton,
-      {
-        onClick: handleTriggerOnClick,
-        onKeyDown: handleOnKeyDown,
-        innerRef: handleRefs,
-        "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON,
-        "aria-haspopup": true,
-        "aria-expanded": userIsOpen ?? isOpen,
-        ...(0, import_ds_props_helpers.useGetGlobalAttributes)(otherProps),
-        type: "button",
-        ...ownerProps,
-        children: Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "m" })
-      }
-    ),
-    refs.reference ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_ds_floating_context.FloatingWrapper,
-      {
-        innerRef: refs.setFloating,
-        isOpen: userIsOpen ?? isOpen,
-        floatingStyles,
-        context,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_PopupMenuContent.PopupMenuContent,
-            {
-              options,
-              onItemClick: handleItemClick,
-              onClose: handleOnClose,
-              setIsOpen: hideTooltip,
-              popupOnKeyPress,
-              ownerProps
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
-        ]
-      }
-    ) : null
-  ] });
+  const noSlotArguments = (0, import_react.useCallback)(() => ({}), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styles2.StyledPopupMenuContainer,
+    {
+      "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_POPUPMENU_CONTAINER,
+      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      getOwnerPropsArguments: noSlotArguments,
+      ...(0, import_ds_props_helpers.useGetXstyledProps)(otherProps),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styles.StyledButton,
+          {
+            onClick: handleTriggerOnClick,
+            onKeyDown: handleOnKeyDown,
+            innerRef: handleRefs,
+            "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON,
+            "aria-haspopup": true,
+            "aria-expanded": userIsOpen ?? isOpen,
+            ...(0, import_ds_props_helpers.useGetGlobalAttributes)(otherProps),
+            type: "button",
+            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments,
+            children: Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "m" })
+          }
+        ),
+        refs.reference ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_ds_floating_context.FloatingWrapper,
+          {
+            innerRef: refs.setFloating,
+            isOpen: userIsOpen ?? isOpen,
+            floatingStyles,
+            context,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_PopupMenuContent.PopupMenuContent,
+                {
+                  options,
+                  onItemClick: handleItemClick,
+                  openIntent: openIntentRef.current,
+                  setIsOpen: hideTooltip,
+                  popupOnKeyPress,
+                  getOwnerPropsAwareOfPropsPassedToGlobalHeader
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_floating_context.PopoverArrow, { ...arrowStyles })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
 };
 //# sourceMappingURL=PopupMenu.js.map

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useFloatingContext, PopoverArrow, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useRef } from 'react';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../constants/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { StyledButton } from '../../../styles.js';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent.js';\nimport { useOnClickOutside } from '../../../../hooks/useOnClickOutside.js';\nexport const PopupMenu = ({\n  Icon,\n  onClick,\n  setRef,\n  componentProps,\n  ownerProps,\n  ...otherProps\n}: DSGlobalHeaderT.PopupProps): JSX.Element => {\n  const { arrowStyles, floatingStyles, isOpen, refs, context, showTooltip, hideTooltip } = useFloatingContext({\n    externallyControlledIsOpen: componentProps.isOpen,\n    placement: 'bottom',\n    withoutAnimation: true,\n    withoutPortal: true,\n  });\n\n  const {\n    onClickOutside = () => null,\n    onKeyPress,\n    popupOnKeyPress,\n    isOpen: userIsOpen,\n    options,\n    closeOnClick,\n  } = componentProps;\n\n  /**\n   * We want \"outside\" to mean: outside BOTH the trigger and the floating panel.\n   * So wrap them in a single DOM node and use that as the boundary.\n   */\n  const boundaryRef = useRef<HTMLDivElement | null>(null);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'ArrowDown') {\n        showTooltip();\n      }\n      if (onKeyPress) onKeyPress(e);\n    },\n    [onKeyPress, showTooltip],\n  );\n\n  const handleOnClose = useCallback(() => {\n    if (userIsOpen === undefined) {\n      hideTooltip();\n    }\n    (refs.reference as HTMLElement)?.focus();\n  }, [hideTooltip, refs.reference, userIsOpen]);\n\n  const handleTriggerOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (userIsOpen === undefined) showTooltip();\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen, showTooltip],\n  );\n\n  const handleItemClick = useCallback(() => {\n    if (closeOnClick && userIsOpen === undefined) handleOnClose();\n  }, [closeOnClick, handleOnClose, userIsOpen]);\n\n  // Close on outside click, but:\n  // - always notify consumer via onClickOutside\n  // - only actually close when uncontrolled (userIsOpen === undefined)\n  // - only run while open\n  const handleOutside = useCallback(\n    (event: Event) => {\n      onClickOutside(event as MouseEvent | TouchEvent);\n\n      const actuallyOpen = userIsOpen ?? isOpen;\n      if (!actuallyOpen) return;\n\n      if (userIsOpen === undefined) {\n        handleOnClose();\n      }\n    },\n    [handleOnClose, isOpen, onClickOutside, userIsOpen],\n  );\n\n  // If you only want to listen when open, pass `null` when closed\n  useOnClickOutside((userIsOpen ?? isOpen) ? boundaryRef.current : null, handleOutside);\n\n  const handleRefs = useCallback(\n    (ref: HTMLButtonElement) => {\n      setRef(ref);\n      refs.setReference(ref);\n    },\n    [refs, setRef],\n  );\n  return (\n    <div ref={boundaryRef}>\n      <StyledButton\n        onClick={handleTriggerOnClick}\n        onKeyDown={handleOnKeyDown}\n        innerRef={handleRefs}\n        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n        aria-haspopup\n        aria-expanded={userIsOpen ?? isOpen}\n        {...useGetGlobalAttributes(otherProps)}\n        type=\"button\"\n        {...ownerProps}\n      >\n        {Icon && <Icon size=\"m\" />}\n      </StyledButton>\n\n      {refs.reference ? (\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={userIsOpen ?? isOpen}\n          floatingStyles={floatingStyles}\n          context={context}\n        >\n          <PopupMenuContent\n            options={options}\n            onItemClick={handleItemClick}\n            onClose={handleOnClose}\n            setIsOpen={hideTooltip}\n            popupOnKeyPress={popupOnKeyPress}\n            ownerProps={ownerProps}\n          />\n          <PopoverArrow {...arrowStyles} />\n        </FloatingWrapper>\n      ) : null}\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { useFloatingContext, PopoverArrow, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useRef } from 'react';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../constants/index.js';\nimport { StyledButton } from '../../../styles.js';\nimport { StyledPopupMenuContainer } from '../../styles.js';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent.js';\nimport type { PopupMenuT } from './react-desc-prop-types.js';\n\nexport const PopupMenu = ({\n  Icon,\n  onClick,\n  setRef,\n  componentProps,\n  getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n  ...otherProps\n}: PopupMenuT.Props): JSX.Element => {\n  const {\n    onClickOutside = () => null,\n    onKeyPress,\n    popupOnKeyPress,\n    isOpen: userIsOpen,\n    options,\n    closeOnClick,\n    onOpen,\n    onClose,\n  } = componentProps;\n\n  // We need to declare the floating context before we can reference its hideTooltip in\n  // handleOutside; but handleOutside is passed into the same hook call. We resolve this by\n  // pulling hideTooltip / refs.reference via the latest-ref pattern of the hook itself \u2014\n  // see comments on `onClickOutside` below.\n  const { arrowStyles, floatingStyles, isOpen, refs, context, showTooltip, hideTooltip } = useFloatingContext({\n    externallyControlledIsOpen: componentProps.isOpen,\n    placement: 'bottom',\n    withoutAnimation: true,\n    withoutPortal: true,\n    // The hook auto-excludes clicks inside the floating element and the reference, so the\n    // outside boundary is now { reference, floating } \u2014 no boundary <div> needed.\n    // Gated internally on `isOpen`, so it only fires while open.\n    onClickOutside: (event) => {\n      onClickOutside(event);\n      // Closes but does NOT move focus. The user clicked somewhere else and the browser has already put\n      // focus where they aimed; pulling it back to the trigger would undo that. Returning focus is a\n      // scoped-Escape affordance only \u2014 the same line DSAppPicker and the floating context both draw.\n      if (userIsOpen === undefined) hideTooltip();\n    },\n    /*\n     * Passive notification, straight through from the floating context. Handed over rather than\n     * reimplemented because the hook is the only place that sees every transition: the trigger click and\n     * ArrowDown both go through `showTooltip`, and click-outside, Escape inside the menu and a\n     * closeOnClick item all go through `hideTooltip` \u2014 plus a controlled flip of `isOpen`, which no\n     * handler in this file observes at all.\n     *\n     * Notifying does NOT make the consumer responsible for the transition: this stays uncontrolled unless\n     * they also supply `isOpen`.\n     *\n     * The scoped-Escape caveat in the hook's docs does not apply here. A scoped Escape would route to\n     * `onEscape` instead of `onClose`, but that path needs `closeOnEscape`, which defaults to false and is\n     * not passed \u2014 Escape is handled inside PopupMenuContent and closes via `hideTooltip`, so it surfaces\n     * as a normal 'interaction' close. Passing `closeOnEscape` here later would silently punch a hole in\n     * `onClose` unless `onEscape` is wired at the same time.\n     */\n    /*\n     * Escape is the floating context's, not this part's. `closeOnEscape` closes the menu and\n     * `returnFocusToReference` puts focus back on the trigger \u2014 both were hand-rolled here before, in\n     * PopupMenuContent's per-item keydown and in a manual `.focus()`.\n     *\n     * Gated on being UNCONTROLLED, and that gate is load-bearing rather than tidy: the hook applies\n     * `returnFocusToReference` on a scoped Escape whichever side owns the open state. For a controlled\n     * consumer the close below is inert, so leaving it on would move focus to the trigger while their\n     * menu is still open \u2014 focus outside an open menu. A controlled consumer owns the close, so they own\n     * the Escape and the refocus with it.\n     */\n    closeOnEscape: userIsOpen === undefined,\n    returnFocusToReference: true,\n    /*\n     * A scoped Escape routes HERE and not to `onClose`, so the consumer's close notification has to be\n     * re-emitted or it silently stops reporting the most common keyboard close.\n     */\n    onEscape: (event) => {\n      hideTooltip();\n      onClose?.({ reason: 'interaction', event, isControlled: userIsOpen !== undefined });\n    },\n    onOpen,\n    onClose,\n  });\n\n  /*\n   * WHICH end of the menu the pending open lands on. Same mechanism as DSAppPicker's `openIntentRef`,\n   * scoped to this part: the trigger is the only place that knows which key was pressed, and the seeding\n   * happens later, in PopupMenuContent's ref callback. A ref rather than state because nothing renders\n   * from it and it must not cause a render of its own between the key and the open.\n   */\n  const openIntentRef = useRef<'first' | 'last'>('first');\n\n  /*\n   * ArrowDown opens onto the first item, ArrowUp onto the last \u2014 the menubar convention, and the same\n   * split DSAppPicker makes.\n   *\n   * Enter and Space are absent on purpose: this is a native <button>, so the browser turns them into a\n   * click that arrives at handleTriggerOnClick. Handling them here too would open twice.\n   *\n   * `preventDefault` stops the page scrolling on a key being used to open a widget.\n   */\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {\n        e.preventDefault();\n        openIntentRef.current = e.code === 'ArrowUp' ? 'last' : 'first';\n        if (userIsOpen === undefined) showTooltip();\n      }\n      if (onKeyPress) onKeyPress(e);\n    },\n    [onKeyPress, showTooltip, userIsOpen],\n  );\n\n  /*\n   * Closes after an item click. No `.focus()` here: returning focus to the trigger is the floating\n   * context's job on a scoped Escape, and an item click is not one \u2014 the clicked item is usually\n   * navigating away, so yanking focus back to the trigger would fight the user.\n   */\n  const handleOnClose = useCallback(() => {\n    if (userIsOpen === undefined) hideTooltip();\n  }, [hideTooltip, userIsOpen]);\n\n  const handleTriggerOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      // Click, Enter and Space all land on the first item; only ArrowUp asks for the other end.\n      openIntentRef.current = 'first';\n      if (userIsOpen === undefined) showTooltip(e);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen, showTooltip],\n  );\n\n  const handleItemClick = useCallback(() => {\n    if (closeOnClick && userIsOpen === undefined) handleOnClose();\n  }, [closeOnClick, handleOnClose, userIsOpen]);\n\n  const handleRefs = useCallback(\n    (ref: HTMLButtonElement) => {\n      setRef(ref);\n      refs.setReference(ref);\n    },\n    [refs, setRef],\n  );\n\n  // Explicit and empty, shared by this part's slot render sites: `getOwnerPropsArguments` hydrates\n  // function-form slot props and nothing else, and none of these elements have render-time values worth\n  // passing. Stated rather than omitted so the answer is always visible at the call site.\n  const noSlotArguments = useCallback(() => ({}), []);\n  return (\n    <StyledPopupMenuContainer\n      data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_POPUPMENU_CONTAINER}\n      getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n      // Explicit and empty: this root has no render-time values to hand a function-form slot prop.\n      getOwnerPropsArguments={noSlotArguments}\n      // The part-level xstyled layer. This root is the only element in the part that can receive it, so it\n      // must stay a styled component \u2014 a plain <div> here silently drops every xstyled prop the contract\n      // advertises.\n      {...useGetXstyledProps(otherProps)}\n    >\n      <StyledButton\n        onClick={handleTriggerOnClick}\n        onKeyDown={handleOnKeyDown}\n        innerRef={handleRefs}\n        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n        aria-haspopup\n        aria-expanded={userIsOpen ?? isOpen}\n        {...useGetGlobalAttributes(otherProps)}\n        type=\"button\"\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\n      >\n        {Icon && <Icon size=\"m\" />}\n      </StyledButton>\n\n      {refs.reference ? (\n        <FloatingWrapper\n          innerRef={refs.setFloating}\n          isOpen={userIsOpen ?? isOpen}\n          floatingStyles={floatingStyles}\n          context={context}\n        >\n          <PopupMenuContent\n            options={options}\n            onItemClick={handleItemClick}\n            openIntent={openIntentRef.current}\n            setIsOpen={hideTooltip}\n            popupOnKeyPress={popupOnKeyPress}\n            getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n          />\n          <PopoverArrow {...arrowStyles} />\n        </FloatingWrapper>\n      ) : null}\n    </StyledPopupMenuContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["import_styles"]
 }

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js

@@ -43,20 +43,31 @@ const PopupMenuContent = import_react.default.memo(
   ({
     options,
     onItemClick,
-    onClose,
+    openIntent,
     popupOnKeyPress,
     setIsOpen,
-    ownerProps
+    getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+    // The part-level global attribute + xstyled layers, forwarded onto the list root below.
+    ...restGlobalAndXstyled
   }) => {
     const { instanceUID } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
-    const { menuRef, setRef, keyboardNavigation } = (0, import_usePopupMenuContent.usePopupMenuContent)({ setIsOpen });
+    const focusableItemsCount = options.filter((option) => option.type !== "separator").length;
+    const { menuRef, setRef, keyboardNavigation } = (0, import_usePopupMenuContent.usePopupMenuContent)({
+      setIsOpen,
+      openIntent,
+      focusableItemsCount
+    });
+    const noSlotArguments = () => ({});
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_styles.StyledList,
       {
         innerRef: menuRef,
         role: "menu",
         "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_LIST,
-        ...ownerProps,
+        getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+        getOwnerPropsArguments: noSlotArguments,
+        ...(0, import_ds_props_helpers.getGlobalAttributes)(restGlobalAndXstyled),
+        ...(0, import_ds_props_helpers.getXstyledProps)(restGlobalAndXstyled),
         children: options.map((option) => {
           const { type, Icon, label = "", onClick, Content, ...rest } = option;
           const globalAttrs = (0, import_ds_props_helpers.getGlobalAttributes)(rest);
@@ -66,7 +77,6 @@ const PopupMenuContent = import_react.default.memo(
           };
           const handleKeyDown = (e) => {
             keyboardNavigation(e);
-            if (e.code === "Escape") onClose();
             if (popupOnKeyPress) popupOnKeyPress(e);
           };
           switch (type) {
@@ -77,7 +87,8 @@ const PopupMenuContent = import_react.default.memo(
                   role: "none",
                   "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_SEPARATOR,
                   ...globalAttrs,
-                  ...ownerProps
+                  getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                  getOwnerPropsArguments: noSlotArguments
                 },
                 `${instanceUID}-separator-${label}`
               );
@@ -87,7 +98,8 @@ const PopupMenuContent = import_react.default.memo(
                 {
                   role: "menuitem",
                   "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM,
-                  ...ownerProps,
+                  getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                  getOwnerPropsArguments: noSlotArguments,
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_styles.StyledItemButton,
                     {
@@ -97,7 +109,8 @@ const PopupMenuContent = import_react.default.memo(
                       "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON,
                       ...globalAttrs,
                       type: "button",
-                      ...ownerProps,
+                      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                      getOwnerPropsArguments: noSlotArguments,
                       children: Content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {})
                     }
                   )
@@ -110,7 +123,8 @@ const PopupMenuContent = import_react.default.memo(
                 {
                   role: "menuitem",
                   "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM,
-                  ...ownerProps,
+                  getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                  getOwnerPropsArguments: noSlotArguments,
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                     import_styles.StyledItemButton,
                     {
@@ -120,14 +134,16 @@ const PopupMenuContent = import_react.default.memo(
                       "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON,
                       ...globalAttrs,
                       type: "button",
-                      ...ownerProps,
+                      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                      getOwnerPropsArguments: noSlotArguments,
                       children: [
                         Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
                         label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                           import_styles.StyledLabel,
                           {
                             "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL,
-                            ...ownerProps,
+                            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                            getOwnerPropsArguments: noSlotArguments,
                             children: label
                           }
                         )

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.tsx", "../../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React, { useContext } from 'react';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../../constants/index.js';\nimport type { DSGlobalHeaderT } from '../../../../../react-desc-prop-types.js';\nimport { StyledItemButton, StyledItemContainer, StyledLabel, StyledList, StyledSeparator } from './styles.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\n\nexport const PopupMenuContent = React.memo(\n  ({\n    options,\n    onItemClick,\n    onClose,\n    popupOnKeyPress,\n    setIsOpen,\n    ownerProps,\n  }: DSGlobalHeaderT.PopupMenuContentProps): JSX.Element => {\n    const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n    const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n    return (\n      <StyledList\n        innerRef={menuRef}\n        role=\"menu\"\n        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_LIST}\n        {...ownerProps}\n      >\n        {options.map((option) => {\n          const { type, Icon, label = '', onClick, Content, ...rest } = option;\n\n          const globalAttrs = getGlobalAttributes(rest);\n\n          const handleClick = (e: React.MouseEvent) => {\n            onItemClick();\n            if (onClick) onClick(e);\n          };\n\n          const handleKeyDown = (e: React.KeyboardEvent) => {\n            keyboardNavigation(e);\n            if (e.code === 'Escape') onClose();\n            if (popupOnKeyPress) popupOnKeyPress(e);\n          };\n\n          switch (type) {\n            case 'separator':\n              return (\n                <StyledSeparator\n                  key={`${instanceUID}-separator-${label}`}\n                  role=\"none\"\n                  data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_SEPARATOR}\n                  {...globalAttrs}\n                  {...ownerProps}\n                />\n              );\n            case 'custom':\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM}\n                  {...ownerProps}\n                >\n                  <StyledItemButton\n                    innerRef={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON}\n                    {...globalAttrs}\n                    type=\"button\"\n                    {...ownerProps}\n                  >\n                    {Content && <Content />}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n            default:\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM}\n                  {...ownerProps}\n                >\n                  <StyledItemButton\n                    innerRef={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON}\n                    {...globalAttrs}\n                    type=\"button\"\n                    {...ownerProps}\n                  >\n                    {Icon && <Icon />}\n                    {label && (\n                      <StyledLabel\n                        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL}\n                        {...ownerProps}\n                      >\n                        {label}\n                      </StyledLabel>\n                    )}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n          }\n        })}\n      </StyledList>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+CP;AA/ChB,8BAAoC;AACpC,mBAAkC;AAClC,mCAAsC;AACtC,uBAA0C;AAE1C,oBAAgG;AAChG,iCAAoC;AAE7B,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAA0D;AACxD,UAAM,EAAE,YAAY,QAAI,yBAAW,kDAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,gDAAoB,EAAE,UAAU,CAAC;AAEjF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAK;AAAA,QACL,eAAa,2CAA0B;AAAA,QACtC,GAAG;AAAA,QAEH,kBAAQ,IAAI,CAAC,WAAW;AACvB,gBAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,GAAG,KAAK,IAAI;AAE9D,gBAAM,kBAAc,6CAAoB,IAAI;AAE5C,gBAAM,cAAc,CAAC,MAAwB;AAC3C,wBAAY;AACZ,gBAAI,QAAS,SAAQ,CAAC;AAAA,UACxB;AAEA,gBAAM,gBAAgB,CAAC,MAA2B;AAChD,+BAAmB,CAAC;AACpB,gBAAI,EAAE,SAAS,SAAU,SAAQ;AACjC,gBAAI,gBAAiB,iBAAgB,CAAC;AAAA,UACxC;AAEA,kBAAQ,MAAM;AAAA,YACZ,KAAK;AACH,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,eAAa,2CAA0B;AAAA,kBACtC,GAAG;AAAA,kBACH,GAAG;AAAA;AAAA,gBAJC,GAAG,WAAW,cAAc,KAAK;AAAA,cAKxC;AAAA,YAEJ,KAAK;AACH,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,eAAa,2CAA0B;AAAA,kBACtC,GAAG;AAAA,kBAEJ;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,SAAS;AAAA,sBACT,WAAW;AAAA,sBACX,eAAa,2CAA0B;AAAA,sBACtC,GAAG;AAAA,sBACJ,MAAK;AAAA,sBACJ,GAAG;AAAA,sBAEH,qBAAW,4CAAC,WAAQ;AAAA;AAAA,kBACvB;AAAA;AAAA,gBAfK,GAAG,WAAW,UAAU,KAAK;AAAA,cAgBpC;AAAA,YAEJ;AACE,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,eAAa,2CAA0B;AAAA,kBACtC,GAAG;AAAA,kBAEJ;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,SAAS;AAAA,sBACT,WAAW;AAAA,sBACX,eAAa,2CAA0B;AAAA,sBACtC,GAAG;AAAA,sBACJ,MAAK;AAAA,sBACJ,GAAG;AAAA,sBAEH;AAAA,gCAAQ,4CAAC,QAAK;AAAA,wBACd,SACC;AAAA,0BAAC;AAAA;AAAA,4BACC,eAAa,2CAA0B;AAAA,4BACtC,GAAG;AAAA,4BAEH;AAAA;AAAA,wBACH;AAAA;AAAA;AAAA,kBAEJ;AAAA;AAAA,gBAvBK,GAAG,WAAW,UAAU,KAAK;AAAA,cAwBpC;AAAA,UAEN;AAAA,QACF,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport React, { useContext } from 'react';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../../constants/index.js';\nimport { StyledItemButton, StyledItemContainer, StyledLabel, StyledList, StyledSeparator } from './styles.js';\nimport type { PopupMenuContentT } from './react-desc-prop-types.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\n\nexport const PopupMenuContent = React.memo(\n  ({\n    options,\n    onItemClick,\n    openIntent,\n    popupOnKeyPress,\n    setIsOpen,\n    getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n    // The part-level global attribute + xstyled layers, forwarded onto the list root below.\n    ...restGlobalAndXstyled\n  }: PopupMenuContentT.Props): JSX.Element => {\n    const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n    // Separators are rendered as `role=\"none\"` and carry no ref, so they are excluded from the count the\n    // seeding compares against.\n    const focusableItemsCount = options.filter((option) => option.type !== 'separator').length;\n\n    const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({\n      setIsOpen,\n      openIntent,\n      focusableItemsCount,\n    });\n\n    /*\n     * Explicit and empty at every slot render site below. `getOwnerPropsArguments` hydrates function-form\n     * slot props and nothing else, so \"no arguments\" is worth stating rather than leaving to inference.\n     *\n     * The per-option sites (item container, item button, label, separator) are where a real payload would\n     * go \u2014 ds-fast-list hands its rows `{ index: getId(index) }` for exactly this. What a per-option payload\n     * should contain is a consumer-facing contract decision, so adding one is a deliberate API change, not\n     * a fill-in-the-blank.\n     */\n    const noSlotArguments = () => ({});\n\n    return (\n      <StyledList\n        innerRef={menuRef}\n        role=\"menu\"\n        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_LIST}\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\n        {...getGlobalAttributes(restGlobalAndXstyled)}\n        {...getXstyledProps(restGlobalAndXstyled)}\n      >\n        {options.map((option) => {\n          const { type, Icon, label = '', onClick, Content, ...rest } = option;\n\n          const globalAttrs = getGlobalAttributes(rest);\n\n          const handleClick = (e: React.MouseEvent) => {\n            onItemClick();\n            if (onClick) onClick(e);\n          };\n\n          /*\n           * No Escape branch here on purpose. Escape is the floating context's, via `closeOnEscape` +\n           * `returnFocusToReference` \u2014 it closes the menu AND returns focus to the trigger, which this\n           * part used to hand-roll. Re-adding a local Escape would close it twice and fight that focus\n           * return.\n           */\n          const handleKeyDown = (e: React.KeyboardEvent) => {\n            keyboardNavigation(e);\n            if (popupOnKeyPress) popupOnKeyPress(e);\n          };\n\n          switch (type) {\n            case 'separator':\n              return (\n                <StyledSeparator\n                  key={`${instanceUID}-separator-${label}`}\n                  role=\"none\"\n                  data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_SEPARATOR}\n                  {...globalAttrs}\n                  getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                  getOwnerPropsArguments={noSlotArguments}\n                />\n              );\n            case 'custom':\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM}\n                  getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                  getOwnerPropsArguments={noSlotArguments}\n                >\n                  <StyledItemButton\n                    innerRef={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON}\n                    {...globalAttrs}\n                    type=\"button\"\n                    getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                    getOwnerPropsArguments={noSlotArguments}\n                  >\n                    {Content && <Content />}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n            default:\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM}\n                  getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                  getOwnerPropsArguments={noSlotArguments}\n                >\n                  <StyledItemButton\n                    innerRef={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON}\n                    {...globalAttrs}\n                    type=\"button\"\n                    getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                    getOwnerPropsArguments={noSlotArguments}\n                  >\n                    {Icon && <Icon />}\n                    {label && (\n                      <StyledLabel\n                        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL}\n                        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                        getOwnerPropsArguments={noSlotArguments}\n                      >\n                        {label}\n                      </StyledLabel>\n                    )}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n          }\n        })}\n      </StyledList>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/react-desc-prop-types.js

@@ -0,0 +1,52 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  PopupMenuContentPropTypes: () => PopupMenuContentPropTypes,
+  PopupMenuContentPropTypesSchema: () => PopupMenuContentPropTypesSchema
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+const PopupMenuContentPropTypes = {
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  options: import_ds_props_helpers.PropTypes.array.description(
+    "Consumer-authored menu entries. Format: [{ type?, Icon?, label?, onClick?, Content?, ...globalAttributes }]"
+  ).isRequired,
+  onItemClick: import_ds_props_helpers.PropTypes.func.description("Invoked after a menu item click so the wrapper can apply its closeOnClick policy").signature("(() => void )").isRequired,
+  openIntent: import_ds_props_helpers.PropTypes.string.description('Which end of the menu this open lands on: "first" or "last"').isRequired,
+  setIsOpen: import_ds_props_helpers.PropTypes.func.description("The floating context's hide function").signature("(() => void )").isRequired,
+  getOwnerPropsAwareOfPropsPassedToGlobalHeader: import_ds_props_helpers.PropTypes.func.description(
+    "Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead"
+  ).signature("(() => Partial<DSGlobalHeaderT.DefaultProps> )").isRequired,
+  popupOnKeyPress: import_ds_props_helpers.PropTypes.func.description("Consumer key handler, invoked on menu items alongside the internal keyboard navigation").signature("(( event: React.KeyboardEvent ) => void )")
+};
+const PopupMenuContentPropTypesSchema = PopupMenuContentPropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/react-desc-prop-types.ts", "../../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport type { DSGlobalHeaderT } from '../../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.PopupMenuContentProps, per the convention every other part in the\n * repo follows. Consumed by PopupMenuContent.tsx.\n *\n * This is the innermost of the three Popup* contracts and the one least likely to be a consumer's\n * business: it is what the PopupMenu wrapper hands to its own menu-content renderer. Every prop except\n * `options` is machinery the wrapper generated. `options` is the one consumer-authored value on it,\n * and it arrives already unwrapped from DSGlobalHeaderT.PopupMenuComponentProps \u2014 which is exactly why\n * having both `PopupMenuComponentProps` and `PopupMenuContentProps` visible side by side in the public\n * namespace was misleading: they look like a pair a developer chooses between, and they are not.\n *\n * IoC layers: the slot layer via `getOwnerPropsAwareOfPropsPassedToGlobalHeader` (fully wired \u2014 this part\n * passes it to the list, items, item buttons, labels and separators, each with its own explicit empty\n * hydrator), per-entry global attributes via `options` items, and the part-level global attribute /\n * xstyled layer below.\n *\n * KNOWN GAP \u2014 the part-level global attribute + xstyled layer is the one thing in this file that was an\n * addition rather than a transcription: the old DSGlobalHeaderT.PopupMenuContentProps did not extend\n * GlobalAttributesT at all, which made this the only out-of-the-box part missing that layer and left its\n * PropTypes unable to spread globalAttributesPropTypes coherently. Nothing forwards either to the root\n * list yet, so for this part both remain a statement of the intended contract rather than of behaviour.\n * Per-entry attributes on `options` items DO reach the DOM and are covered by the pillar tests.\n *\n * No slots of its own \u2014 see the AppPicker sibling file for why.\n */\nexport declare namespace PopupMenuContentT {\n  export interface RequiredProps {\n    /** The consumer-authored menu entries, unwrapped from componentProps by the PopupMenu wrapper. */\n    options: DSGlobalHeaderT.PopupMenuContentItem[];\n    /** Wrapper callback: applies the item's closeOnClick policy after a menu item is clicked. */\n    onItemClick: () => void;\n    /** Wrapper callback: closes the menu and returns focus to the trigger. */\n    /** Which end of the menu this open lands on \u2014 see usePopupMenuContent. */\n    openIntent: 'first' | 'last';\n    /** Wrapper callback: the floating context's hide function. */\n    setIsOpen: () => void;\n    /*\n     * The slot lookup table, and the only half of the slot IoC layer that may be drilled down \u2014 the\n     * function-form hydrator is supplied per slot render site instead. See the AppPicker sibling for the\n     * full reasoning and the getPartProps mechanics behind the name.\n     */\n    getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n  }\n\n  /*\n   * Intentionally empty, and intentionally still declared \u2014 \"this part has no default props, do not\n   * expect them\". See the AppPicker sibling for the full reasoning.\n   */\n  export interface DefaultProps {}\n\n  export interface OptionalProps {\n    /*\n     * Optional, matching the runtime: PopupMenuContent guards it (`if (popupOnKeyPress)`) and consumers\n     * routinely omit it. It was declared required, which was simply wrong \u2014 the type claimed a guarantee\n     * the code never relied on, and every consumer omitting it was type-lying to satisfy the compiler.\n     */\n    popupOnKeyPress?: (event: React.KeyboardEvent) => void;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLUListElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n        keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLUListElement>,\n        // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents\n        keyof RequiredProps | keyof DefaultProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const PopupMenuContentPropTypes: DSPropTypesSchema<PopupMenuContentT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  options: PropTypes.array.description(\n    'Consumer-authored menu entries. Format: [{ type?, Icon?, label?, onClick?, Content?, ...globalAttributes }]',\n  ).isRequired,\n  onItemClick: PropTypes.func\n    .description('Invoked after a menu item click so the wrapper can apply its closeOnClick policy')\n    .signature('(() => void )').isRequired,\n  openIntent: PropTypes.string.description('Which end of the menu this open lands on: \"first\" or \"last\"').isRequired,\n  setIsOpen: PropTypes.func.description(\"The floating context's hide function\").signature('(() => void )').isRequired,\n  getOwnerPropsAwareOfPropsPassedToGlobalHeader: PropTypes.func\n    .description(\n      'Returns the props passed to DSGlobalHeader, so getPartProps can look up this slot consumer-supplied props. Must come from DSGlobalHeader; the function-form hydrator is supplied per slot render site instead',\n    )\n    .signature('(() => Partial<DSGlobalHeaderT.DefaultProps> )').isRequired,\n  popupOnKeyPress: PropTypes.func\n    .description('Consumer key handler, invoked on menu items alongside the internal keyboard navigation')\n    .signature('(( event: React.KeyboardEvent ) => void )'),\n};\n\nexport const PopupMenuContentPropTypesSchema =\n  PopupMenuContentPropTypes as unknown as ValidationMap<PopupMenuContentT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AAwFhE,MAAM,4BAAwE;AAAA,EACnF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,MAAM;AAAA,IACvB;AAAA,EACF,EAAE;AAAA,EACF,aAAa,kCAAU,KACpB,YAAY,kFAAkF,EAC9F,UAAU,eAAe,EAAE;AAAA,EAC9B,YAAY,kCAAU,OAAO,YAAY,6DAA6D,EAAE;AAAA,EACxG,WAAW,kCAAU,KAAK,YAAY,sCAAsC,EAAE,UAAU,eAAe,EAAE;AAAA,EACzG,+CAA+C,kCAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,iBAAiB,kCAAU,KACxB,YAAY,wFAAwF,EACpG,UAAU,2CAA2C;AAC1D;AAEO,MAAM,kCACX;",
+  "names": []
+}

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/usePopupMenuContent.js

@@ -33,24 +33,32 @@ __export(usePopupMenuContent_exports, {
 module.exports = __toCommonJS(usePopupMenuContent_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-const usePopupMenuContent = ({ setIsOpen }) => {
+const usePopupMenuContent = ({ setIsOpen, openIntent, focusableItemsCount }) => {
   const menuRef = (0, import_react.useRef)(null);
   const allMenuItemsRef = (0, import_react.useRef)([]);
-  const setRef = (0, import_react.useCallback)((ref) => {
-    if (ref && !allMenuItemsRef.current.includes(ref)) {
-      allMenuItemsRef.current.push(ref);
-    }
-    allMenuItemsRef.current.forEach((item, index) => {
-      if (index === 0) {
-        item?.setAttribute?.("tabindex", "0");
-      } else {
-        item?.setAttribute?.("tabindex", "-1");
+  const hasSeededFocusRef = (0, import_react.useRef)(false);
+  const setRef = (0, import_react.useCallback)(
+    (ref) => {
+      if (ref && !allMenuItemsRef.current.includes(ref)) {
+        allMenuItemsRef.current.push(ref);
+      }
+      allMenuItemsRef.current.forEach((item, index) => {
+        if (index === 0) {
+          item?.setAttribute?.("tabindex", "0");
+        } else {
+          item?.setAttribute?.("tabindex", "-1");
+        }
+      });
+      if (!ref || hasSeededFocusRef.current) return;
+      const hasReachedSeedTarget = openIntent === "last" ? allMenuItemsRef.current.length === focusableItemsCount : allMenuItemsRef.current[0] === ref;
+      if (hasReachedSeedTarget) {
+        hasSeededFocusRef.current = true;
+        const target = openIntent === "last" ? allMenuItemsRef.current[focusableItemsCount - 1] : ref;
+        target?.focus();
       }
-    });
-  }, []);
-  (0, import_react.useEffect)(() => {
-    setTimeout(() => allMenuItemsRef.current?.[0]?.focus(), 0);
-  }, []);
+    },
+    [openIntent, focusableItemsCount]
+  );
   const keyboardNavigation = (0, import_react.useCallback)(
     (e) => {
       if (e.code === "Tab") {

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/usePopupMenuContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/usePopupMenuContent.tsx", "../../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useRef, useCallback, useEffect } from 'react';\n\ninterface UsePopupMenuContentT {\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nexport const usePopupMenuContent = ({ setIsOpen }: UsePopupMenuContentT) => {\n  const menuRef = useRef<HTMLUListElement>(null);\n  const allMenuItemsRef = useRef<HTMLButtonElement[]>([]);\n\n  const setRef = useCallback((ref: HTMLButtonElement) => {\n    if (ref && !allMenuItemsRef.current.includes(ref)) {\n      allMenuItemsRef.current.push(ref);\n    }\n\n    allMenuItemsRef.current.forEach((item, index) => {\n      if (index === 0) {\n        item?.setAttribute?.('tabindex', '0');\n      } else {\n        item?.setAttribute?.('tabindex', '-1');\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    setTimeout(() => allMenuItemsRef.current?.[0]?.focus(), 0);\n  }, []);\n\n  const keyboardNavigation = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Tab') {\n        setIsOpen(false);\n      } else {\n        const currentIndex = allMenuItemsRef.current.indexOf(e.target as HTMLButtonElement);\n        const allRefsLength = allMenuItemsRef.current.length;\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          if (currentIndex < allRefsLength - 1) {\n            allMenuItemsRef.current[currentIndex + 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[0]?.focus?.();\n          }\n        }\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          if (currentIndex === 0) {\n            allMenuItemsRef.current[allRefsLength - 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[currentIndex - 1]?.focus?.();\n          }\n        }\n      }\n    },\n    [setIsOpen],\n  );\n\n  return {\n    menuRef,\n    setRef,\n    keyboardNavigation,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAMxC,MAAM,sBAAsB,CAAC,EAAE,UAAU,MAA4B;AAC1E,QAAM,cAAU,qBAAyB,IAAI;AAC7C,QAAM,sBAAkB,qBAA4B,CAAC,CAAC;AAEtD,QAAM,aAAS,0BAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,gBAAgB,QAAQ,SAAS,GAAG,GAAG;AACjD,sBAAgB,QAAQ,KAAK,GAAG;AAAA,IAClC;AAEA,oBAAgB,QAAQ,QAAQ,CAAC,MAAM,UAAU;AAC/C,UAAI,UAAU,GAAG;AACf,cAAM,eAAe,YAAY,GAAG;AAAA,MACtC,OAAO;AACL,cAAM,eAAe,YAAY,IAAI;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,eAAW,MAAM,gBAAgB,UAAU,CAAC,GAAG,MAAM,GAAG,CAAC;AAAA,EAC3D,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,OAAO;AACpB,kBAAU,KAAK;AAAA,MACjB,OAAO;AACL,cAAM,eAAe,gBAAgB,QAAQ,QAAQ,EAAE,MAA2B;AAClF,cAAM,gBAAgB,gBAAgB,QAAQ;AAC9C,YAAI,EAAE,QAAQ,aAAa;AACzB,YAAE,eAAe;AACjB,cAAI,eAAe,gBAAgB,GAAG;AACpC,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD,OAAO;AACL,4BAAgB,QAAQ,CAAC,GAAG,QAAQ;AAAA,UACtC;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,WAAW;AACvB,YAAE,eAAe;AACjB,cAAI,iBAAiB,GAAG;AACtB,4BAAgB,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,UACtD,OAAO;AACL,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useRef, useCallback } from 'react';\n\ninterface UsePopupMenuContentT {\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  /**\n   * Which end of the menu this open should land on. Mirrors DSAppPicker's open-intent mechanism, scoped\n   * to this part: the trigger records WHICH key opened the menu and the seeding below reads it \u2014 ArrowUp\n   * lands on the last item, everything else on the first.\n   */\n  openIntent: 'first' | 'last';\n  /** How many focusable items the menu mounts. Separators are not focusable and are excluded. */\n  focusableItemsCount: number;\n}\n\nexport const usePopupMenuContent = ({ setIsOpen, openIntent, focusableItemsCount }: UsePopupMenuContentT) => {\n  const menuRef = useRef<HTMLUListElement>(null);\n  const allMenuItemsRef = useRef<HTMLButtonElement[]>([]);\n  // Seeded once per mount of the menu content. A ref rather than state because nothing renders from it.\n  const hasSeededFocusRef = useRef(false);\n\n  const setRef = useCallback(\n    (ref: HTMLButtonElement) => {\n      if (ref && !allMenuItemsRef.current.includes(ref)) {\n        allMenuItemsRef.current.push(ref);\n      }\n\n      allMenuItemsRef.current.forEach((item, index) => {\n        if (index === 0) {\n          item?.setAttribute?.('tabindex', '0');\n        } else {\n          item?.setAttribute?.('tabindex', '-1');\n        }\n      });\n\n      /*\n       * Initial focus, seeded from this ref callback \u2014 the correct place for it, because the callback is\n       * guaranteed to run once the node exists. Do not move this into an effect or wrap it in a timer; per\n       * antipattern_focus_management.md there is nothing left to wait for, and both reintroduce a race this\n       * has no need for.\n       *\n       * `first` can seed the moment item 0 attaches. `last` cannot: the ref callbacks fire one per item and\n       * nothing else here knows when the set is complete, which is why the count is passed in rather than\n       * inferred. Comparing against it keeps the decision inside the callback instead of deferring it.\n       *\n       * Seeds once per mount of the menu content, which is why the guard ref exists.\n       */\n      if (!ref || hasSeededFocusRef.current) return;\n\n      const hasReachedSeedTarget =\n        openIntent === 'last'\n          ? allMenuItemsRef.current.length === focusableItemsCount\n          : allMenuItemsRef.current[0] === ref;\n\n      if (hasReachedSeedTarget) {\n        hasSeededFocusRef.current = true;\n        const target = openIntent === 'last' ? allMenuItemsRef.current[focusableItemsCount - 1] : ref;\n        target?.focus();\n      }\n    },\n    [openIntent, focusableItemsCount],\n  );\n\n  const keyboardNavigation = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Tab') {\n        setIsOpen(false);\n      } else {\n        const currentIndex = allMenuItemsRef.current.indexOf(e.target as HTMLButtonElement);\n        const allRefsLength = allMenuItemsRef.current.length;\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          if (currentIndex < allRefsLength - 1) {\n            allMenuItemsRef.current[currentIndex + 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[0]?.focus?.();\n          }\n        }\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          if (currentIndex === 0) {\n            allMenuItemsRef.current[allRefsLength - 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[currentIndex - 1]?.focus?.();\n          }\n        }\n      }\n    },\n    [setIsOpen],\n  );\n\n  return {\n    menuRef,\n    setRef,\n    keyboardNavigation,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAc7B,MAAM,sBAAsB,CAAC,EAAE,WAAW,YAAY,oBAAoB,MAA4B;AAC3G,QAAM,cAAU,qBAAyB,IAAI;AAC7C,QAAM,sBAAkB,qBAA4B,CAAC,CAAC;AAEtD,QAAM,wBAAoB,qBAAO,KAAK;AAEtC,QAAM,aAAS;AAAA,IACb,CAAC,QAA2B;AAC1B,UAAI,OAAO,CAAC,gBAAgB,QAAQ,SAAS,GAAG,GAAG;AACjD,wBAAgB,QAAQ,KAAK,GAAG;AAAA,MAClC;AAEA,sBAAgB,QAAQ,QAAQ,CAAC,MAAM,UAAU;AAC/C,YAAI,UAAU,GAAG;AACf,gBAAM,eAAe,YAAY,GAAG;AAAA,QACtC,OAAO;AACL,gBAAM,eAAe,YAAY,IAAI;AAAA,QACvC;AAAA,MACF,CAAC;AAcD,UAAI,CAAC,OAAO,kBAAkB,QAAS;AAEvC,YAAM,uBACJ,eAAe,SACX,gBAAgB,QAAQ,WAAW,sBACnC,gBAAgB,QAAQ,CAAC,MAAM;AAErC,UAAI,sBAAsB;AACxB,0BAAkB,UAAU;AAC5B,cAAM,SAAS,eAAe,SAAS,gBAAgB,QAAQ,sBAAsB,CAAC,IAAI;AAC1F,gBAAQ,MAAM;AAAA,MAChB;AAAA,IACF;AAAA,IACA,CAAC,YAAY,mBAAmB;AAAA,EAClC;AAEA,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,OAAO;AACpB,kBAAU,KAAK;AAAA,MACjB,OAAO;AACL,cAAM,eAAe,gBAAgB,QAAQ,QAAQ,EAAE,MAA2B;AAClF,cAAM,gBAAgB,gBAAgB,QAAQ;AAC9C,YAAI,EAAE,QAAQ,aAAa;AACzB,YAAE,eAAe;AACjB,cAAI,eAAe,gBAAgB,GAAG;AACpC,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD,OAAO;AACL,4BAAgB,QAAQ,CAAC,GAAG,QAAQ;AAAA,UACtC;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,WAAW;AACvB,YAAE,eAAe;AACjB,cAAI,iBAAiB,GAAG;AACtB,4BAAgB,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,UACtD,OAAO;AACL,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }