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

package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/AppPickerRenderer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPickerRenderer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSAppPicker } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport { AppPickerCtx } from './AppPickerCTX.js';\nimport { TriggerDefaultComponent } from './TriggerDefaultComponent.js';\n\nexport const AppPickerRenderer = (): JSX.Element => {\n  const { contractProps, id } = React.useContext(AppPickerCtx);\n\n  /*\n   * Our default trigger applies only when the consumer supplied neither trigger API.\n   *\n   * This one cannot be expressed by spread order, unlike every other default below. DSAppPicker's\n   * Trigger gives `TriggerComponent` precedence over `renderTrigger` (Trigger.tsx: \"TriggerComponent\n   * wins when both custom APIs are supplied\"), so passing ours unconditionally would silently discard a\n   * consumer's `renderTrigger` no matter where `contractProps` is spread \u2014 the spread would forward\n   * their prop faithfully and DSAppPicker would then ignore it. Deciding here instead keeps both custom\n   * trigger APIs working through the toolbar config.\n   */\n  const consumerOwnsTheTrigger = Boolean(contractProps.renderTrigger || contractProps.TriggerComponent);\n\n  return (\n    <DSAppPicker\n      // Dimsum IoC direction: our default renders first and the consumer's contract props are spread over\n      // it, so anything they put in `componentProps` wins and becomes theirs to own.\n      // `getDSAppPickerContractProps` drops keys explicitly set to undefined, so an unset key in the config\n      // never erases a default here.\n      //\n      // Note what is NOT passed: no `isOpen`, no `onKeyDown`, no `onClickOutside`. Passing `isOpen` makes\n      // the picker controlled and passing `onKeyDown` switches off its Escape routing and focus return \u2014\n      // either way this part would owe a reimplementation of behaviour DSAppPicker already has. See\n      // useAppPickerCTX for the full statement.\n      //\n      // The toolbar is a menubar, so ArrowDown/ArrowUp on a toolbar item open it \u2014 that is this widget's\n      // keyboard contract, not an application-level choice, which is why it is opted in here rather than\n      // left to each consumer. The picker owns the whole flow: it records the arrow-key activation and\n      // seeds focus on the selected app (first for ArrowDown, last for ArrowUp). Spread order still lets a\n      // consumer turn it off through `componentProps`.\n      openAndFocusOnArrowKeys\n      // `TriggerComponent`, not the deprecated `renderTrigger`: DSAppPicker renders this one as JSX so it\n      // gets its own fiber and may use hooks, and it is the only trigger API that receives the id the\n      // panel's aria-labelledby points at. See TriggerDefaultComponent for the full reasoning.\n      {...(consumerOwnsTheTrigger ? {} : { TriggerComponent: TriggerDefaultComponent })}\n      /*\n       * PUI-18985 \u2014 the item-level `id` names the App Picker, and DSAppPicker derives every id in the\n       * widget from it: the root takes it unchanged, the trigger becomes `getIdForAppPickerTrigger(id)`, and the\n       * dialog's `aria-labelledby` points at that same trigger id. Handing it over here is what makes\n       * those three agree.\n       *\n       * Before this, `id` rode along in `otherProps` and was spread onto the trigger AFTER the id\n       * DSAppPicker had supplied, so the trigger carried the bare item id while the dialog still pointed\n       * at the generated one \u2014 a pointer to no element, and a dialog with no accessible name (axe\n       * `aria-dialog-name`, serious). useAppPickerCTX now reads `id` out of `otherProps` so only this\n       * route exists.\n       *\n       * Consumers who addressed the trigger by the bare item id migrate to `getIdForAppPickerTrigger`, exported by\n       * ds-app-picker; the bare id now selects the picker root. Omitted when unset, so DSAppPicker's own\n       * generated instance id is untouched.\n       */\n      {...(id ? { id } : {})}\n      {...contractProps}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqBnB;AArBJ,SAAS,mBAAmB;AAC5B,OAAOA,YAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AAEjC,MAAM,oBAAoB,MAAmB;AAClD,QAAM,EAAE,eAAe,GAAG,IAAIA,OAAM,WAAW,YAAY;AAY3D,QAAM,yBAAyB,QAAQ,cAAc,iBAAiB,cAAc,gBAAgB;AAEpG,SACE;AAAA,IAAC;AAAA;AAAA,MAgBC,yBAAuB;AAAA,MAItB,GAAI,yBAAyB,CAAC,IAAI,EAAE,kBAAkB,wBAAwB;AAAA,MAiB9E,GAAI,KAAK,EAAE,GAAG,IAAI,CAAC;AAAA,MACnB,GAAG;AAAA;AAAA,EACN;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/TriggerDefaultComponent.js

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { MenuPicker } from "@elliemae/ds-icons";
+import { getGlobalAttributes, getXstyledProps } from "@elliemae/ds-props-helpers";
+import { mergeRefs } from "@elliemae/ds-system";
+import React2 from "react";
+import { GLOBAL_HEADER_DATA_TESTID } from "../../../../constants/index.js";
+import { StyledButton } from "../../../styles.js";
+import { AppPickerCtx } from "./AppPickerCTX.js";
+const TriggerDefaultComponent = ({
+  innerRef,
+  id,
+  onClick: appPickerOnClick,
+  onKeyDown: appPickerOnKeyDown,
+  "aria-haspopup": ariaHasPopup
+}) => {
+  const { triggerOnClick, setRef, triggerRef, label, otherProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader } = React2.useContext(AppPickerCtx);
+  const handleTriggerRefs = React2.useCallback(
+    (buttonRef) => {
+      setRef(buttonRef);
+      mergeRefs(triggerRef, innerRef)(buttonRef);
+    },
+    [setRef, triggerRef, innerRef]
+  );
+  const handleOnClickComposed = React2.useCallback(
+    (e) => {
+      appPickerOnClick(e);
+      triggerOnClick?.(e);
+    },
+    [appPickerOnClick, triggerOnClick]
+  );
+  return /* @__PURE__ */ jsx(
+    StyledButton,
+    {
+      id,
+      onClick: handleOnClickComposed,
+      onKeyDown: appPickerOnKeyDown,
+      innerRef: handleTriggerRefs,
+      "aria-label": label,
+      "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON,
+      "aria-haspopup": ariaHasPopup,
+      ...getGlobalAttributes(otherProps),
+      ...getXstyledProps(otherProps),
+      type: "button",
+      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      getOwnerPropsArguments: () => ({}),
+      children: /* @__PURE__ */ jsx(MenuPicker, { width: 20.73, height: 20.73 })
+    }
+  );
+};
+export {
+  TriggerDefaultComponent
+};
+//# sourceMappingURL=TriggerDefaultComponent.js.map

package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/TriggerDefaultComponent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/TriggerDefaultComponent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSAppPickerT } from '@elliemae/ds-app-picker';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React from 'react';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../constants/index.js';\nimport { StyledButton } from '../../../styles.js';\nimport { AppPickerCtx } from './AppPickerCTX.js';\n\n/*\n * The toolbar's default App Picker trigger, as a real component with its own module.\n *\n * MUST be handed to DSAppPicker as `TriggerComponent`, never `renderTrigger`. Two reasons, both hard:\n *\n *   1. This component uses `useContext`. DSAppPicker renders `TriggerComponent` as JSX so React creates a\n *      fiber for it, which is what makes hooks here legal. `renderTrigger` is invoked as a plain function\n *      (`renderTrigger({ ref })`) to honour the legacy DSPopover render-prop contract, so any hook inside\n *      it registers against DSAppPicker's Trigger fiber instead \u2014 a rules-of-hooks violation React cannot\n *      detect at runtime.\n *   2. Only `TriggerComponent` receives `dialogLabelId`, the id the panel's `aria-labelledby` points at.\n *      It arrives as `id` and is applied below; drop it and the dialog has no accessible name.\n */\nexport const TriggerDefaultComponent = ({\n  innerRef,\n  id,\n  onClick: appPickerOnClick,\n  onKeyDown: appPickerOnKeyDown,\n  'aria-haspopup': ariaHasPopup,\n}: DSAppPickerT.TriggerComponentProps): JSX.Element => {\n  const { triggerOnClick, setRef, triggerRef, label, otherProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader } =\n    React.useContext(AppPickerCtx);\n\n  /*\n   * Three refs on one node: the toolbar's arrow-key roving registration, a consumer-supplied `triggerRef`,\n   * and DSAppPicker's own \u2014 the last is what its focus return targets after a scoped Escape, so dropping\n   * `innerRef` here silently strands focus when the panel closes.\n   *\n   * No focus logic beyond that. Returning focus to this trigger is DSAppPicker's job and it does it, which\n   * is only true while this part supplies no `onKeyDown` to it \u2014 see useAppPickerCTX.\n   */\n  const handleTriggerRefs = React.useCallback(\n    (buttonRef: HTMLButtonElement) => {\n      setRef(buttonRef);\n      mergeRefs(triggerRef, innerRef)(buttonRef);\n    },\n    [setRef, triggerRef, innerRef],\n  );\n\n  /*\n   * DSAppPicker's `onClick` does the opening AND records whether the activation came from the keyboard\n   * (`e.detail === 0`), which is what lets it land focus on the selected app rather than the panel. It must\n   * always run.\n   *\n   * `triggerOnClick` is the consumer's own click callback and runs alongside it. It does not suppress the\n   * open: a consumer who needs to own the transition supplies `componentProps.isOpen`, which makes the\n   * picker controlled and renders its internal flip inert.\n   */\n  const handleOnClickComposed = React.useCallback(\n    (e: React.MouseEvent | React.KeyboardEvent) => {\n      appPickerOnClick(e);\n      triggerOnClick?.(e as React.MouseEvent<HTMLButtonElement>);\n    },\n    [appPickerOnClick, triggerOnClick],\n  );\n\n  return (\n    <StyledButton\n      id={id}\n      onClick={handleOnClickComposed}\n      onKeyDown={appPickerOnKeyDown}\n      innerRef={handleTriggerRefs}\n      aria-label={label}\n      data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n      aria-haspopup={ariaHasPopup}\n      // No `aria-expanded`, matching DSAppPicker's own trigger. This one opens a `role=\"dialog\"`, and in\n      // the dialog pattern the open state is conveyed by the dialog's presence, not by an attribute on the\n      // control. The sibling toolbar items DO carry it correctly \u2014 `ds-popup-menu` opens a `role=\"menu\"`\n      // and `ds-search-toggle` expands an inline region, which are the patterns the attribute belongs to.\n      // Item-level global attributes land here, AFTER the handlers above, so an `onKeyDown` or `onClick`\n      // set directly on the toolbar entry replaces the one this trigger wired. That is the documented\n      // item-level override and `WithControlledAppPicker` relies on it \u2014 but note what an `onKeyDown`\n      // override costs now: it takes over `openAndFocusOnArrowKeys`, so the arrow keys stop opening the\n      // picker unless the consumer opens it themselves.\n      //\n      // `id` is the one global attribute that cannot reach this spread: useAppPickerCTX reads it out by\n      // name and AppPickerRenderer hands it to DSAppPicker, which owns every id in this widget and derives\n      // the `id` above from it. Left in here it would take that key back and strand the dialog's\n      // `aria-labelledby` \u2014 PUI-18985.\n      {...getGlobalAttributes(otherProps)}\n      // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n      {...getXstyledProps(otherProps)}\n      type=\"button\"\n      // Exposes the dsGlobalheaderMenubarItemButton slot on this trigger. Drop either prop and the slot\n      // goes silently inert \u2014 getPartProps returns {} without the lookup table and generates no\n      // data-dimsum-slot.\n      getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n      // Explicit and empty: no render-time values worth handing to a function-form slot prop. Stated so\n      // \"what arguments does this slot get?\" always has a visible answer at the call site.\n      getOwnerPropsArguments={() => ({})}\n    >\n      <MenuPicker width={20.73} height={20.73} />\n    </StyledButton>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoGjB;AAnGN,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB,uBAAuB;AACrD,SAAS,iBAAiB;AAC1B,OAAOA,YAAW;AAClB,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAetB,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AACnB,MAAuD;AACrD,QAAM,EAAE,gBAAgB,QAAQ,YAAY,OAAO,YAAY,8CAA8C,IAC3GA,OAAM,WAAW,YAAY;AAU/B,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,CAAC,cAAiC;AAChC,aAAO,SAAS;AAChB,gBAAU,YAAY,QAAQ,EAAE,SAAS;AAAA,IAC3C;AAAA,IACA,CAAC,QAAQ,YAAY,QAAQ;AAAA,EAC/B;AAWA,QAAM,wBAAwBA,OAAM;AAAA,IAClC,CAAC,MAA8C;AAC7C,uBAAiB,CAAC;AAClB,uBAAiB,CAAwC;AAAA,IAC3D;AAAA,IACA,CAAC,kBAAkB,cAAc;AAAA,EACnC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,eAAa,0BAA0B;AAAA,MACvC,iBAAe;AAAA,MAed,GAAG,oBAAoB,UAAU;AAAA,MAEjC,GAAG,gBAAgB,UAAU;AAAA,MAC9B,MAAK;AAAA,MAIL,eAAe;AAAA,MAGf,wBAAwB,OAAO,CAAC;AAAA,MAEhC,8BAAC,cAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/react-desc-prop-types.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+const AppPickerPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  label: PropTypes.string.description("Accessible name for the trigger button, and the toolbar label").isRequired,
+  componentProps: PropTypes.object.description(
+    "The consumer-authored DSAppPicker configuration; forwarded per DSAppPicker own contract via getDSAppPickerContractProps"
+  ).isRequired,
+  getOwnerPropsAwareOfPropsPassedToGlobalHeader: 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,
+  setRef: PropTypes.func.description("Registers the trigger node with the toolbar focus management for arrow-key navigation").signature("(( ref: HTMLElement ) => void )").isRequired
+};
+const AppPickerPropTypesSchema = AppPickerPropTypes;
+export {
+  AppPickerPropTypes,
+  AppPickerPropTypesSchema
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.AppPickerProps, per the convention every other part in the repo\n * follows. Consumed by useAppPickerCTX / AppPickerCTXRenderer.\n *\n * This namespace describes what DSGlobalHeader passes DOWN to its own out-of-the-box App Picker\n * wrapper. It is NOT the shape an application developer authors \u2014 that is\n * DSGlobalHeaderT.ToolbarAppPickerItem (the toolbar config entry) and, inside it,\n * DSGlobalHeaderT.AppPickerComponentProps. The wrapper is an opinionated pre-configuration that\n * offloads work from the app developer onto Dimsum, so it generates props the developer never sees\n * (`setRef`, `getOwnerPropsAwareOfPropsPassedToGlobalHeader`) and is not meant to know about unless they\n * drop to atomic composition and render DSAppPicker themselves.\n *\n * The three IoC layers an out-of-the-box item is meant to expose are all present here:\n *   1. item-level global attributes, forwarded onto the rendered trigger \u2014 except `id`, which\n *      useAppPickerCTX reads out by name and AppPickerRenderer hands to DSAppPicker, because that is\n *      the component that owns every id this widget renders (PUI-18985)\n *   2. the slot layer, via `getOwnerPropsAwareOfPropsPassedToGlobalHeader` (parent-owned slots \u2014 see the\n *      no-slots note below)\n *   3. `componentProps`, the wrapped component's own contract\n *\n * No slots of its own: every styled element this part renders is declared under the PARENT's name and\n * GLOBAL_HEADER_SLOTS, and those slot values are a published data-dimsum-slot / data-testid surface \u2014\n * re-declaring them here would change them, which the QA stability rule forbids. So, as with\n * ds-data-table-filters' FilterPopover, this file carries no PropsForGlobalOnSlots and no\n * getPropsPerSlotPropTypes. Consumers reach these slots through DSGlobalHeader, where they already do.\n *\n * KNOWN GAP (shared by all four out-of-the-box parts, no decision pending on this file) \u2014 `XstyledProps`\n * is declared below and `xstyledPropTypes` is spread into the schema, but no part forwards xstyled props\n * to any element. Global attributes ARE forwarded, via getGlobalAttributes in TriggerDefaultComponent.\n * The declaration comes from the part-generator template and the FilterPopover precedent; making it true\n * needs a styled target per part, which PopupMenu's bare-<div> root does not currently have.\n */\nexport declare namespace AppPickerT {\n  export interface RequiredProps {\n    /** Accessible name for the trigger, and the toolbar item's label. */\n    label: string;\n    /** The consumer-authored configuration object. Forwarded to DSAppPicker by its own contract. */\n    componentProps: DSGlobalHeaderT.AppPickerComponentProps;\n    /*\n     * The slot IoC layer, and the ONLY half of it that may be drilled down.\n     *\n     * `getPartProps` uses this as the lookup table: it indexes the returned object by the styled\n     * element's `data-dimsum-slot` (falling back to `data-testid`) to find the consumer's slot prop.\n     * That table can therefore only come from DSGlobalHeader, because only DSGlobalHeader holds the\n     * props the consumer passed \u2014 hence the deliberately verbose name. It is also what gates slot\n     * generation at all: `styledFunction` sets `didDefinedGetOwnerProps: !!getOwnerProps`, and\n     * `getPartProps` short-circuits to `{}` without it.\n     *\n     * Its former companion `getOwnerPropsArguments` is deliberately NOT here. That one is the hydrator\n     * for function-form slot props \u2014 `getPartProps` calls `elementProps(getOwnerPropsArguments())` and\n     * uses it for nothing else \u2014 so it must be defined by whichever element is rendering the slot,\n     * which is the only place that knows the render-time values worth passing. Bundling the two forced\n     * every slot in the package to share one hydrator; see ds-chat-bubble's ChatBubbleArrow and\n     * ds-fast-list's List for what per-site hydration is actually for.\n     */\n    getOwnerPropsAwareOfPropsPassedToGlobalHeader: () => Partial<DSGlobalHeaderT.DefaultProps>;\n    /** Focus-management registration, supplied by useGlobalHeaderToolbar for arrow-key navigation. */\n    setRef: (ref: HTMLElement) => void;\n  }\n\n  /*\n   * Intentionally empty, and intentionally still declared: `never` is a statement, not an oversight \u2014\n   * \"this part has no default props, do not expect them\". Keeping the member present preserves\n   * at-a-glance parity with every other part's namespace and makes adding a default a one-line change.\n   */\n  export interface DefaultProps {}\n\n  export interface OptionalProps {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<\n        GlobalAttributesT<HTMLButtonElement>,\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<HTMLButtonElement>,\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 AppPickerPropTypes: DSPropTypesSchema<AppPickerT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  label: PropTypes.string.description('Accessible name for the trigger button, and the toolbar label').isRequired,\n  componentProps: PropTypes.object.description(\n    'The consumer-authored DSAppPicker configuration; forwarded per DSAppPicker own contract via getDSAppPickerContractProps',\n  ).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  setRef: PropTypes.func\n    .description('Registers the trigger node with the toolbar focus management for arrow-key navigation')\n    .signature('(( ref: HTMLElement ) => void )').isRequired,\n};\n\nexport const AppPickerPropTypesSchema = AppPickerPropTypes as unknown as ValidationMap<AppPickerT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAiGhE,MAAM,qBAA0D;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,UAAU,OAAO,YAAY,+DAA+D,EAAE;AAAA,EACrG,gBAAgB,UAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,+CAA+C,UAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,QAAQ,UAAU,KACf,YAAY,uFAAuF,EACnG,UAAU,iCAAiC,EAAE;AAClD;AAEO,MAAM,2BAA2B;",
+  "names": []
+}

package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { getDSAppPickerContractProps } from "@elliemae/ds-app-picker";
+import React2 from "react";
+const useAppPickerCTX = (config) => {
+  const { label, componentProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader, setRef, id, ...otherProps } = config;
+  const { triggerRef, triggerOnClick } = componentProps;
+  const contractProps = React2.useMemo(() => getDSAppPickerContractProps(componentProps), [componentProps]);
+  return React2.useMemo(
+    () => ({
+      id,
+      label,
+      componentProps,
+      otherProps,
+      getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      setRef,
+      contractProps,
+      triggerRef,
+      triggerOnClick
+    }),
+    [
+      id,
+      label,
+      componentProps,
+      otherProps,
+      getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      setRef,
+      contractProps,
+      triggerRef,
+      triggerOnClick
+    ]
+  );
+};
+export {
+  useAppPickerCTX
+};
+//# sourceMappingURL=useAppPickerCTX.js.map

package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/useAppPickerCTX.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getDSAppPickerContractProps } from '@elliemae/ds-app-picker';\nimport React from 'react';\nimport type { AppPickerT } from './react-desc-prop-types.js';\n\n/*\n * This part owns NO open/close state, and that is deliberate.\n *\n * DSAppPicker owns the whole flow: its trigger click toggles the panel, `openAndFocusOnArrowKeys` gives\n * it ArrowDown/ArrowUp, a scoped Escape closes it and returns focus to the trigger, and a click outside\n * closes it. Lifting `isOpen` into this part would make the picker CONTROLLED, which switches every one\n * of those off \u2014 they would then have to be reimplemented here, against a component that already has\n * them and is tested for them.\n *\n * Two knock-on effects, worth knowing before adding state back:\n *   - there is no `aria-expanded` on this item's trigger, so no open state is needed to feed one. The\n *     picker opens a `role=\"dialog\"`, and that pattern conveys open state by the dialog's presence. The\n *     sibling items keep the attribute because a menu and a disclosure region are what it is for.\n *   - supplying `onKeyDown` to DSAppPicker sets `closeOnEscape: !onKeyDown`, i.e. it switches OFF the\n *     picker's Escape routing AND its focus return. That is why this part supplies none, and why it needs\n *     no focus tracker of its own.\n *\n * A consumer can still drive it: `componentProps.isOpen` reaches DSAppPicker through the contract\n * passthrough and makes it controlled for them, which is the supported way to own the transition.\n */\nexport const useAppPickerCTX = (config: AppPickerT.Props) => {\n  /*\n   * Read by name: only what this part needs for its own behaviour. `otherProps` is the item-level global\n   * attributes, which reach the trigger via getGlobalAttributes. Everything a consumer put in\n   * `componentProps` reaches DSAppPicker through `contractProps` instead \u2014 do not cherry-pick from\n   * componentProps here, that is what the contract filter is for.\n   *\n   * `id` is read out by name so it does NOT stay in `otherProps` (PUI-18985). It is a member of\n   * GlobalAttributesT, so left in there it would be spread onto the trigger and take the key back from\n   * DSAppPicker \u2014 which owns every id this widget puts in the DOM and derives them all from this one\n   * value. Naming the App Picker is what the item-level `id` means here; the trigger's own id is\n   * `getIdForAppPickerTrigger(id)`, exported by ds-app-picker for exactly this reason.\n   */\n  const { label, componentProps, getOwnerPropsAwareOfPropsPassedToGlobalHeader, setRef, id, ...otherProps } = config;\n  const { triggerRef, triggerOnClick } = componentProps;\n\n  // `componentProps` is declared as DSAppPicker's own props plus this part's `triggerOnClick`, so every\n  // DSAppPicker prop a consumer puts there is part of the contract \u2014 including all nine slot props.\n  // Deriving the forwardable set from DSAppPicker's own contract is what keeps the two from drifting, and\n  // it strips the one key in that object that belongs to this part rather than to DSAppPicker:\n  // `triggerOnClick`. (`setRef` is a sibling field of `componentProps`, not inside it, so it never\n  // reaches the filter.)\n  const contractProps = React.useMemo(() => getDSAppPickerContractProps(componentProps), [componentProps]);\n\n  return React.useMemo(\n    () => ({\n      id,\n      label,\n      componentProps,\n      otherProps,\n      getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n      setRef,\n      contractProps,\n      triggerRef,\n      triggerOnClick,\n    }),\n    [\n      id,\n      label,\n      componentProps,\n      otherProps,\n      getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n      setRef,\n      contractProps,\n      triggerRef,\n      triggerOnClick,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mCAAmC;AAC5C,OAAOA,YAAW;AAuBX,MAAM,kBAAkB,CAAC,WAA6B;AAa3D,QAAM,EAAE,OAAO,gBAAgB,+CAA+C,QAAQ,IAAI,GAAG,WAAW,IAAI;AAC5G,QAAM,EAAE,YAAY,eAAe,IAAI;AAQvC,QAAM,gBAAgBA,OAAM,QAAQ,MAAM,4BAA4B,cAAc,GAAG,CAAC,cAAc,CAAC;AAEvG,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

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

@@ -1,53 +1,101 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFloatingContext, PopoverArrow, FloatingWrapper } from "@elliemae/ds-floating-context";
-import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
+import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
 import { useCallback, useRef } from "react";
 import { GLOBAL_HEADER_DATA_TESTID } from "../../../../constants/index.js";
 import { StyledButton } from "../../../styles.js";
+import { StyledPopupMenuContainer } from "../../styles.js";
 import { PopupMenuContent } from "./menuContent/PopupMenuContent.js";
-import { useOnClickOutside } from "../../../../hooks/useOnClickOutside.js";
 const PopupMenu = ({
   Icon,
   onClick,
   setRef,
   componentProps,
-  ownerProps,
+  getOwnerPropsAwareOfPropsPassedToGlobalHeader,
   ...otherProps
 }) => {
-  const { arrowStyles, floatingStyles, isOpen, refs, context, showTooltip, hideTooltip } = 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 = useRef(null);
+  const { arrowStyles, floatingStyles, isOpen, refs, context, showTooltip, hideTooltip } = 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 = useRef("first");
   const handleOnKeyDown = 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 = useCallback(() => {
-    if (userIsOpen === void 0) {
-      hideTooltip();
-    }
-    refs.reference?.focus();
-  }, [hideTooltip, refs.reference, userIsOpen]);
+    if (userIsOpen === void 0) hideTooltip();
+  }, [hideTooltip, userIsOpen]);
   const handleTriggerOnClick = useCallback(
     (e) => {
-      if (userIsOpen === void 0) showTooltip();
+      openIntentRef.current = "first";
+      if (userIsOpen === void 0) showTooltip(e);
       if (onClick) onClick(e);
     },
     [onClick, userIsOpen, showTooltip]
@@ -55,18 +103,6 @@ const PopupMenu = ({
   const handleItemClick = useCallback(() => {
     if (closeOnClick && userIsOpen === void 0) handleOnClose();
   }, [closeOnClick, handleOnClose, userIsOpen]);
-  const handleOutside = useCallback(
-    (event) => {
-      onClickOutside(event);
-      const actuallyOpen = userIsOpen ?? isOpen;
-      if (!actuallyOpen) return;
-      if (userIsOpen === void 0) {
-        handleOnClose();
-      }
-    },
-    [handleOnClose, isOpen, onClickOutside, userIsOpen]
-  );
-  useOnClickOutside(userIsOpen ?? isOpen ? boundaryRef.current : null, handleOutside);
   const handleRefs = useCallback(
     (ref) => {
       setRef(ref);
@@ -74,46 +110,57 @@ const PopupMenu = ({
     },
     [refs, setRef]
   );
-  return /* @__PURE__ */ jsxs("div", { ref: boundaryRef, children: [
-    /* @__PURE__ */ jsx(
-      StyledButton,
-      {
-        onClick: handleTriggerOnClick,
-        onKeyDown: handleOnKeyDown,
-        innerRef: handleRefs,
-        "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON,
-        "aria-haspopup": true,
-        "aria-expanded": userIsOpen ?? isOpen,
-        ...useGetGlobalAttributes(otherProps),
-        type: "button",
-        ...ownerProps,
-        children: Icon && /* @__PURE__ */ jsx(Icon, { size: "m" })
-      }
-    ),
-    refs.reference ? /* @__PURE__ */ jsxs(
-      FloatingWrapper,
-      {
-        innerRef: refs.setFloating,
-        isOpen: userIsOpen ?? isOpen,
-        floatingStyles,
-        context,
-        children: [
-          /* @__PURE__ */ jsx(
-            PopupMenuContent,
-            {
-              options,
-              onItemClick: handleItemClick,
-              onClose: handleOnClose,
-              setIsOpen: hideTooltip,
-              popupOnKeyPress,
-              ownerProps
-            }
-          ),
-          /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
-        ]
-      }
-    ) : null
-  ] });
+  const noSlotArguments = useCallback(() => ({}), []);
+  return /* @__PURE__ */ jsxs(
+    StyledPopupMenuContainer,
+    {
+      "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_POPUPMENU_CONTAINER,
+      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      getOwnerPropsArguments: noSlotArguments,
+      ...useGetXstyledProps(otherProps),
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledButton,
+          {
+            onClick: handleTriggerOnClick,
+            onKeyDown: handleOnKeyDown,
+            innerRef: handleRefs,
+            "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON,
+            "aria-haspopup": true,
+            "aria-expanded": userIsOpen ?? isOpen,
+            ...useGetGlobalAttributes(otherProps),
+            type: "button",
+            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments,
+            children: Icon && /* @__PURE__ */ jsx(Icon, { size: "m" })
+          }
+        ),
+        refs.reference ? /* @__PURE__ */ jsxs(
+          FloatingWrapper,
+          {
+            innerRef: refs.setFloating,
+            isOpen: userIsOpen ?? isOpen,
+            floatingStyles,
+            context,
+            children: [
+              /* @__PURE__ */ jsx(
+                PopupMenuContent,
+                {
+                  options,
+                  onItemClick: handleItemClick,
+                  openIntent: openIntentRef.current,
+                  setIsOpen: hideTooltip,
+                  popupOnKeyPress,
+                  getOwnerPropsAwareOfPropsPassedToGlobalHeader
+                }
+              ),
+              /* @__PURE__ */ jsx(PopoverArrow, { ...arrowStyles })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
 };
 export {
   PopupMenu

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;AC4GN,cAIT,YAJS;AA5GjB,SAAS,oBAAoB,cAAc,uBAAuB;AAClE,SAAS,8BAA8B;AACvC,SAAgB,aAAa,cAAc;AAC3C,SAAS,iCAAiC;AAE1C,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAC3B,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+C;AAC7C,QAAM,EAAE,aAAa,gBAAgB,QAAQ,MAAM,SAAS,aAAa,YAAY,IAAI,mBAAmB;AAAA,IAC1G,4BAA4B,eAAe;AAAA,IAC3C,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,eAAe;AAAA,EACjB,CAAC;AAED,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAMJ,QAAM,cAAc,OAA8B,IAAI;AAEtD,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,aAAa;AAC1B,oBAAY;AAAA,MACd;AACA,UAAI,WAAY,YAAW,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,YAAY,WAAW;AAAA,EAC1B;AAEA,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,kBAAY;AAAA,IACd;AACA,IAAC,KAAK,WAA2B,MAAM;AAAA,EACzC,GAAG,CAAC,aAAa,KAAK,WAAW,UAAU,CAAC;AAE5C,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAwB;AACvB,UAAI,eAAe,OAAW,aAAY;AAC1C,UAAI,QAAS,SAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,YAAY,WAAW;AAAA,EACnC;AAEA,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe,OAAW,eAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAM5C,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAAiB;AAChB,qBAAe,KAAgC;AAE/C,YAAM,eAAe,cAAc;AACnC,UAAI,CAAC,aAAc;AAEnB,UAAI,eAAe,QAAW;AAC5B,sBAAc;AAAA,MAChB;AAAA,IACF;AAAA,IACA,CAAC,eAAe,QAAQ,gBAAgB,UAAU;AAAA,EACpD;AAGA,oBAAmB,cAAc,SAAU,YAAY,UAAU,MAAM,aAAa;AAEpF,QAAM,aAAa;AAAA,IACjB,CAAC,QAA2B;AAC1B,aAAO,GAAG;AACV,WAAK,aAAa,GAAG;AAAA,IACvB;AAAA,IACA,CAAC,MAAM,MAAM;AAAA,EACf;AACA,SACE,qBAAC,SAAI,KAAK,aACR;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,eAAa,0BAA0B;AAAA,QACvC,iBAAa;AAAA,QACb,iBAAe,cAAc;AAAA,QAC5B,GAAG,uBAAuB,UAAU;AAAA,QACrC,MAAK;AAAA,QACJ,GAAG;AAAA,QAEH,kBAAQ,oBAAC,QAAK,MAAK,KAAI;AAAA;AAAA,IAC1B;AAAA,IAEC,KAAK,YACJ;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ,cAAc;AAAA,QACtB;AAAA,QACA;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,aAAa;AAAA,cACb,SAAS;AAAA,cACT,WAAW;AAAA,cACX;AAAA,cACA;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,gBAAc,GAAG,aAAa;AAAA;AAAA;AAAA,IACjC,IACE;AAAA,KACN;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;AC+KN,cAIT,YAJS;AA/KjB,SAAS,oBAAoB,cAAc,uBAAuB;AAClE,SAAS,wBAAwB,0BAA0B;AAC3D,SAAgB,aAAa,cAAc;AAC3C,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAG1B,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAMJ,QAAM,EAAE,aAAa,gBAAgB,QAAQ,MAAM,SAAS,aAAa,YAAY,IAAI,mBAAmB;AAAA,IAC1G,4BAA4B,eAAe;AAAA,IAC3C,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB,eAAe;AAAA;AAAA;AAAA;AAAA,IAIf,gBAAgB,CAAC,UAAU;AACzB,qBAAe,KAAK;AAIpB,UAAI,eAAe,OAAW,aAAY;AAAA,IAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA4BA,eAAe,eAAe;AAAA,IAC9B,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxB,UAAU,CAAC,UAAU;AACnB,kBAAY;AACZ,gBAAU,EAAE,QAAQ,eAAe,OAAO,cAAc,eAAe,OAAU,CAAC;AAAA,IACpF;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAQD,QAAM,gBAAgB,OAAyB,OAAO;AAWtD,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,eAAe,EAAE,SAAS,WAAW;AAClD,UAAE,eAAe;AACjB,sBAAc,UAAU,EAAE,SAAS,YAAY,SAAS;AACxD,YAAI,eAAe,OAAW,aAAY;AAAA,MAC5C;AACA,UAAI,WAAY,YAAW,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,YAAY,aAAa,UAAU;AAAA,EACtC;AAOA,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,eAAe,OAAW,aAAY;AAAA,EAC5C,GAAG,CAAC,aAAa,UAAU,CAAC;AAE5B,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAwB;AAEvB,oBAAc,UAAU;AACxB,UAAI,eAAe,OAAW,aAAY,CAAC;AAC3C,UAAI,QAAS,SAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,YAAY,WAAW;AAAA,EACnC;AAEA,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe,OAAW,eAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,aAAa;AAAA,IACjB,CAAC,QAA2B;AAC1B,aAAO,GAAG;AACV,WAAK,aAAa,GAAG;AAAA,IACvB;AAAA,IACA,CAAC,MAAM,MAAM;AAAA,EACf;AAKA,QAAM,kBAAkB,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,0BAA0B;AAAA,MACvC,eAAe;AAAA,MAEf,wBAAwB;AAAA,MAIvB,GAAG,mBAAmB,UAAU;AAAA,MAEjC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,WAAW;AAAA,YACX,UAAU;AAAA,YACV,eAAa,0BAA0B;AAAA,YACvC,iBAAa;AAAA,YACb,iBAAe,cAAc;AAAA,YAC5B,GAAG,uBAAuB,UAAU;AAAA,YACrC,MAAK;AAAA,YACL,eAAe;AAAA,YACf,wBAAwB;AAAA,YAEvB,kBAAQ,oBAAC,QAAK,MAAK,KAAI;AAAA;AAAA,QAC1B;AAAA,QAEC,KAAK,YACJ;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ,cAAc;AAAA,YACtB;AAAA,YACA;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA,aAAa;AAAA,kBACb,YAAY,cAAc;AAAA,kBAC1B,WAAW;AAAA,kBACX;AAAA,kBACA;AAAA;AAAA,cACF;AAAA,cACA,oBAAC,gBAAc,GAAG,aAAa;AAAA;AAAA;AAAA,QACjC,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getGlobalAttributes } from "@elliemae/ds-props-helpers";
+import { getGlobalAttributes, getXstyledProps } from "@elliemae/ds-props-helpers";
 import React2, { useContext } from "react";
 import { DSGlobalHeaderContext } from "../../../../../DSGlobalHeaderContext.js";
 import { GLOBAL_HEADER_DATA_TESTID } from "../../../../../constants/index.js";
@@ -10,20 +10,31 @@ const PopupMenuContent = React2.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 } = useContext(DSGlobalHeaderContext);
-    const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });
+    const focusableItemsCount = options.filter((option) => option.type !== "separator").length;
+    const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({
+      setIsOpen,
+      openIntent,
+      focusableItemsCount
+    });
+    const noSlotArguments = () => ({});
     return /* @__PURE__ */ jsx(
       StyledList,
       {
         innerRef: menuRef,
         role: "menu",
         "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_LIST,
-        ...ownerProps,
+        getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+        getOwnerPropsArguments: noSlotArguments,
+        ...getGlobalAttributes(restGlobalAndXstyled),
+        ...getXstyledProps(restGlobalAndXstyled),
         children: options.map((option) => {
           const { type, Icon, label = "", onClick, Content, ...rest } = option;
           const globalAttrs = getGlobalAttributes(rest);
@@ -33,7 +44,6 @@ const PopupMenuContent = React2.memo(
           };
           const handleKeyDown = (e) => {
             keyboardNavigation(e);
-            if (e.code === "Escape") onClose();
             if (popupOnKeyPress) popupOnKeyPress(e);
           };
           switch (type) {
@@ -44,7 +54,8 @@ const PopupMenuContent = React2.memo(
                   role: "none",
                   "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_SEPARATOR,
                   ...globalAttrs,
-                  ...ownerProps
+                  getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                  getOwnerPropsArguments: noSlotArguments
                 },
                 `${instanceUID}-separator-${label}`
               );
@@ -54,7 +65,8 @@ const PopupMenuContent = React2.memo(
                 {
                   role: "menuitem",
                   "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM,
-                  ...ownerProps,
+                  getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                  getOwnerPropsArguments: noSlotArguments,
                   children: /* @__PURE__ */ jsx(
                     StyledItemButton,
                     {
@@ -64,7 +76,8 @@ const PopupMenuContent = React2.memo(
                       "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON,
                       ...globalAttrs,
                       type: "button",
-                      ...ownerProps,
+                      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                      getOwnerPropsArguments: noSlotArguments,
                       children: Content && /* @__PURE__ */ jsx(Content, {})
                     }
                   )
@@ -77,7 +90,8 @@ const PopupMenuContent = React2.memo(
                 {
                   role: "menuitem",
                   "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM,
-                  ...ownerProps,
+                  getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                  getOwnerPropsArguments: noSlotArguments,
                   children: /* @__PURE__ */ jsxs(
                     StyledItemButton,
                     {
@@ -87,14 +101,16 @@ const PopupMenuContent = React2.memo(
                       "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON,
                       ...globalAttrs,
                       type: "button",
-                      ...ownerProps,
+                      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                      getOwnerPropsArguments: noSlotArguments,
                       children: [
                         Icon && /* @__PURE__ */ jsx(Icon, {}),
                         label && /* @__PURE__ */ jsx(
                           StyledLabel,
                           {
                             "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL,
-                            ...ownerProps,
+                            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                            getOwnerPropsArguments: noSlotArguments,
                             children: label
                           }
                         )