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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;AC+CP,cAqCE,YArCF;AA/ChB,SAAS,2BAA2B;AACpC,OAAOA,UAAS,kBAAkB;AAClC,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAE1C,SAAS,kBAAkB,qBAAqB,aAAa,YAAY,uBAAuB;AAChG,SAAS,2BAA2B;AAE7B,MAAM,mBAAmBA,OAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAA0D;AACxD,UAAM,EAAE,YAAY,IAAI,WAAW,qBAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,IAAI,oBAAoB,EAAE,UAAU,CAAC;AAEjF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAK;AAAA,QACL,eAAa,0BAA0B;AAAA,QACtC,GAAG;AAAA,QAEH,kBAAQ,IAAI,CAAC,WAAW;AACvB,gBAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,GAAG,KAAK,IAAI;AAE9D,gBAAM,cAAc,oBAAoB,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,0BAA0B;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,0BAA0B;AAAA,kBACtC,GAAG;AAAA,kBAEJ;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,SAAS;AAAA,sBACT,WAAW;AAAA,sBACX,eAAa,0BAA0B;AAAA,sBACtC,GAAG;AAAA,sBACJ,MAAK;AAAA,sBACJ,GAAG;AAAA,sBAEH,qBAAW,oBAAC,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,0BAA0B;AAAA,kBACtC,GAAG;AAAA,kBAEJ;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,SAAS;AAAA,sBACT,WAAW;AAAA,sBACX,eAAa,0BAA0B;AAAA,sBACtC,GAAG;AAAA,sBACJ,MAAK;AAAA,sBACJ,GAAG;AAAA,sBAEH;AAAA,gCAAQ,oBAAC,QAAK;AAAA,wBACd,SACC;AAAA,0BAAC;AAAA;AAAA,4BACC,eAAa,0BAA0B;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+const PopupMenuContentPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  options: PropTypes.array.description(
+    "Consumer-authored menu entries. Format: [{ type?, Icon?, label?, onClick?, Content?, ...globalAttributes }]"
+  ).isRequired,
+  onItemClick: PropTypes.func.description("Invoked after a menu item click so the wrapper can apply its closeOnClick policy").signature("(() => void )").isRequired,
+  openIntent: PropTypes.string.description('Which end of the menu this open lands on: "first" or "last"').isRequired,
+  setIsOpen: PropTypes.func.description("The floating context's hide function").signature("(() => void )").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,
+  popupOnKeyPress: PropTypes.func.description("Consumer key handler, invoked on menu items alongside the internal keyboard navigation").signature("(( event: React.KeyboardEvent ) => void )")
+};
+const PopupMenuContentPropTypesSchema = PopupMenuContentPropTypes;
+export {
+  PopupMenuContentPropTypes,
+  PopupMenuContentPropTypesSchema
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/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 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"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAwFhE,MAAM,4BAAwE;AAAA,EACnF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,MAAM;AAAA,IACvB;AAAA,EACF,EAAE;AAAA,EACF,aAAa,UAAU,KACpB,YAAY,kFAAkF,EAC9F,UAAU,eAAe,EAAE;AAAA,EAC9B,YAAY,UAAU,OAAO,YAAY,6DAA6D,EAAE;AAAA,EACxG,WAAW,UAAU,KAAK,YAAY,sCAAsC,EAAE,UAAU,eAAe,EAAE;AAAA,EACzG,+CAA+C,UAAU,KACtD;AAAA,IACC;AAAA,EACF,EACC,UAAU,gDAAgD,EAAE;AAAA,EAC/D,iBAAiB,UAAU,KACxB,YAAY,wFAAwF,EACpG,UAAU,2CAA2C;AAC1D;AAEO,MAAM,kCACX;",
+  "names": []
+}

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

@@ -1,23 +1,31 @@
 import * as React from "react";
-import { useRef, useCallback, useEffect } from "react";
-const usePopupMenuContent = ({ setIsOpen }) => {
+import { useRef, useCallback } from "react";
+const usePopupMenuContent = ({ setIsOpen, openIntent, focusableItemsCount }) => {
   const menuRef = useRef(null);
   const allMenuItemsRef = useRef([]);
-  const setRef = 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 = useRef(false);
+  const setRef = 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();
       }
-    });
-  }, []);
-  useEffect(() => {
-    setTimeout(() => allMenuItemsRef.current?.[0]?.focus(), 0);
-  }, []);
+    },
+    [openIntent, focusableItemsCount]
+  );
   const keyboardNavigation = useCallback(
     (e) => {
       if (e.code === "Tab") {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/usePopupMenuContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,aAAa,iBAAiB;AAMxC,MAAM,sBAAsB,CAAC,EAAE,UAAU,MAA4B;AAC1E,QAAM,UAAU,OAAyB,IAAI;AAC7C,QAAM,kBAAkB,OAA4B,CAAC,CAAC;AAEtD,QAAM,SAAS,YAAY,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,YAAU,MAAM;AACd,eAAW,MAAM,gBAAgB,UAAU,CAAC,GAAG,MAAM,GAAG,CAAC;AAAA,EAC3D,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB;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 * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,mBAAmB;AAc7B,MAAM,sBAAsB,CAAC,EAAE,WAAW,YAAY,oBAAoB,MAA4B;AAC3G,QAAM,UAAU,OAAyB,IAAI;AAC7C,QAAM,kBAAkB,OAA4B,CAAC,CAAC;AAEtD,QAAM,oBAAoB,OAAO,KAAK;AAEtC,QAAM,SAAS;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,qBAAqB;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": []
 }

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

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+const PopupMenuPropTypes = {
+  ...globalAttributesPropTypes,
+  ...xstyledPropTypes,
+  componentProps: PropTypes.object.description(
+    "The consumer-authored popup menu configuration: options, isOpen, closeOnClick and the key handlers"
+  ).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,
+  Icon: PropTypes.func.description("Icon rendered inside the trigger button"),
+  onClick: PropTypes.func.description("Consumer click handler for the trigger, invoked alongside the internal open/close toggle").signature("(( event: React.MouseEvent ) => void )"),
+  title: PropTypes.string.description(
+    "Receives the toolbar item label; printed as the HTML title attribute on the trigger"
+  )
+};
+const PopupMenuPropTypesSchema = PopupMenuPropTypes;
+export {
+  PopupMenuPropTypes,
+  PopupMenuPropTypesSchema
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/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 { SvgIconT } from '@elliemae/ds-icons';\nimport type React from 'react';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\n\n/*\n * Relocated here from DSGlobalHeaderT.PopupProps, per the convention every other part in the repo\n * follows. Consumed by PopupMenu.tsx.\n *\n * This namespace describes what DSGlobalHeader passes DOWN to its own out-of-the-box Popup Menu\n * wrapper. It is NOT the shape an application developer authors \u2014 that is\n * DSGlobalHeaderT.PopupMenuItem (the toolbar config entry) and, inside it,\n * DSGlobalHeaderT.PopupMenuComponentProps. `setRef` and\n * `getOwnerPropsAwareOfPropsPassedToGlobalHeader` are generated by the widget and the developer is not\n * meant to know about them.\n *\n * The old name is worth losing on the way: `PopupProps` sat a word away from `PopupMenuItem`,\n * `PopupMenuComponentProps` and `PopupMenuContentProps` in the same namespace \u2014 the first two of which\n * ARE consumer-authored, while the third was internal and has been relocated to menuContent/ alongside\n * this one. `PopupMenuT.Props`, scoped to this directory, cannot be mistaken for any of them.\n *\n * All three IoC layers present: item-level global attributes onto the trigger, the slot layer via\n * `getOwnerPropsAwareOfPropsPassedToGlobalHeader`, and `componentProps` for the menu's own contract.\n *\n * No slots of its own \u2014 see the AppPicker sibling file for why (published slot surface stays under the\n * parent's name).\n *\n * KNOWN GAP \u2014 xstyled props are declared and not forwarded, as in every sibling part. See the AppPicker\n * file for the full statement; this part is additionally the one with no styled root to forward them to,\n * because PopupMenu.tsx's outermost element is a bare <div>.\n */\nexport declare namespace PopupMenuT {\n  export interface RequiredProps {\n    /** The consumer-authored configuration object for this toolbar item. */\n    componentProps: DSGlobalHeaderT.PopupMenuComponentProps;\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    /** 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 \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    Icon?: React.ComponentType<SvgIconT.Props>;\n    onClick?: (event: React.MouseEvent) => void;\n    /*\n     * Carries the toolbar item's `label`: GlobalHeaderToolbar renders <PopupMenu title={label} .../>.\n     * Faithful to the current declaration, including its standing note that landing this in the HTML\n     * `title` attribute was probably not intended but is kept to avoid a breaking change.\n     */\n    title?: string;\n  }\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 OptionalProps | 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 OptionalProps | keyof XstyledProps\n      >,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const PopupMenuPropTypes: DSPropTypesSchema<PopupMenuT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  componentProps: PropTypes.object.description(\n    'The consumer-authored popup menu configuration: options, isOpen, closeOnClick and the key handlers',\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  Icon: PropTypes.func.description('Icon rendered inside the trigger button'),\n  onClick: PropTypes.func\n    .description('Consumer click handler for the trigger, invoked alongside the internal open/close toggle')\n    .signature('(( event: React.MouseEvent ) => void )'),\n  title: PropTypes.string.description(\n    'Receives the toolbar item label; printed as the HTML title attribute on the trigger',\n  ),\n};\n\nexport const PopupMenuPropTypesSchema = PopupMenuPropTypes as unknown as ValidationMap<PopupMenuT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAuFhE,MAAM,qBAA0D;AAAA,EACrE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,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;AAAA,EAChD,MAAM,UAAU,KAAK,YAAY,yCAAyC;AAAA,EAC1E,SAAS,UAAU,KAChB,YAAY,0FAA0F,EACtG,UAAU,wCAAwC;AAAA,EACrD,OAAO,UAAU,OAAO;AAAA,IACtB;AAAA,EACF;AACF;AAEO,MAAM,2BAA2B;",
+  "names": []
+}

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

@@ -4,11 +4,17 @@ import { DSButtonV3 } from "@elliemae/ds-button-v2";
 import { DSInputText } from "@elliemae/ds-form-input-text";
 import { Grid } from "@elliemae/ds-grid";
 import { Search } from "@elliemae/ds-icons";
+import { getGlobalAttributes, getXstyledProps } from "@elliemae/ds-props-helpers";
 import { css, mergeRefs, styled } from "@elliemae/ds-system";
 import React2 from "react";
-import { DSGlobalHeaderContext } from "../../../../DSGlobalHeaderContext.js";
-import { DSGlobalHeaderName, GLOBAL_HEADER_DATA_TESTID, GLOBAL_HEADER_SLOTS } from "../../../../constants/index.js";
+import {
+  DSGlobalHeaderName,
+  GLOBAL_HEADER_DATA_TESTID,
+  GLOBAL_HEADER_SLOTS,
+  SEARCH_TOGGLE_DEFAULT_ARIA_LABEL
+} from "../../../../constants/index.js";
 import { SearchToggleSpinButton } from "./SearchToggleSpinButton.js";
+import { defaultProps } from "./react-desc-prop-types.js";
 import { useSearchToggle } from "./useSearchToggle.js";
 const StyledNavSearchBoxContainer = styled("div", {
   name: DSGlobalHeaderName,
@@ -93,10 +99,17 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
   const {
     componentProps,
     label,
+    getOwnerPropsAwareOfPropsPassedToGlobalHeader,
     // added in https://jira.elliemae.io/browse/PUI-17852
     //   keeping the default value as "Close search" for backward compatibility
     //   we expect authors to provide descriptive aria-labels that fit their specific context, we do so in our example stories.
-    ariaLabelExpanded = "Close search"
+    // The default now comes from this part's own defaultProps rather than being repeated inline, so the
+    // documented contract and the runtime behaviour cannot drift apart.
+    ariaLabelExpanded = defaultProps.ariaLabelExpanded,
+    // Everything else the toolbar drilled down, which is where item-level global attributes arrive.
+    // `setRef` and `instanceUID` ride along in here too and are filtered out by getGlobalAttributes'
+    // own whitelist, so they never reach the DOM.
+    ...restIncludingItemLevelGlobalAttributes
   } = outOfTheBoxDrilledDownProps;
   const {
     isOpenUncontrolled,
@@ -104,12 +117,10 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
     handleToggleSearch,
     handleContainerKeyDown,
     handleChange,
-    handleInputKeyDown,
     handleTriggerRefs,
     inputId,
     panelId
   } = useSearchToggle(outOfTheBoxDrilledDownProps);
-  const { props: propsWithDefault } = React2.useContext(DSGlobalHeaderContext);
   const {
     onNext,
     onPrevious,
@@ -122,14 +133,19 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
     isOpen: userIsOpen,
     searchContainerRef
   } = componentProps;
-  const getOwnerProps = React2.useCallback(() => propsWithDefault, [propsWithDefault]);
-  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
+  const noSlotArguments = React2.useCallback(() => ({}), []);
   const isOpen = userIsOpen ?? isOpenUncontrolled;
+  const itemLevelGlobalAttributes = getGlobalAttributes(
+    restIncludingItemLevelGlobalAttributes
+  );
   return /* @__PURE__ */ jsxs(
     StyledNavSearchBoxContainer,
     {
-      getOwnerProps,
-      getOwnerPropsArguments,
+      "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_SEARCH_TOGGLE_CONTAINER,
+      ...itemLevelGlobalAttributes,
+      ...getXstyledProps(restIncludingItemLevelGlobalAttributes),
+      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      getOwnerPropsArguments: noSlotArguments,
       onKeyDown: handleContainerKeyDown,
       innerRef: mergeRefs(searchContainerRef, containerRef),
       isOpen,
@@ -137,8 +153,8 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
         /* @__PURE__ */ jsx(
           StyledToggleBtn,
           {
-            getOwnerProps,
-            getOwnerPropsArguments,
+            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments,
             buttonType: "icon",
             innerRef: handleTriggerRefs,
             "aria-label": isOpen ? ariaLabelExpanded : label,
@@ -153,8 +169,8 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
         isOpen ? /* @__PURE__ */ jsxs(
           StyledSearchNavContainer,
           {
-            getOwnerProps,
-            getOwnerPropsArguments,
+            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments,
             id: panelId,
             alignItems: "center",
             cols: ["1fr", "1fr"],
@@ -162,15 +178,15 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
               /* @__PURE__ */ jsx(
                 StyledSearchInput,
                 {
-                  getOwnerProps,
-                  getOwnerPropsArguments,
+                  getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                  getOwnerPropsArguments: noSlotArguments,
                   id: inputId,
+                  "aria-label": SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,
                   placeholder: placeholder || "Search...",
                   value,
                   clearable: true,
                   ...onBlur && { onBlur },
                   onChange: handleChange,
-                  onKeyDown: handleInputKeyDown,
                   onClear
                 }
               ),
@@ -180,7 +196,8 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
                   onNext,
                   onPrevious,
                   currentResultIndex,
-                  totalResults
+                  totalResults,
+                  getOwnerPropsAwareOfPropsPassedToGlobalHeader
                 }
               )
             ]

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSGlobalHeaderContext } from '../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_DATA_TESTID, GLOBAL_HEADER_SLOTS } from '../../../../constants/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { SearchToggleSpinButton } from './SearchToggleSpinButton.js';\nimport { useSearchToggle } from './useSearchToggle.js';\n\nconst StyledNavSearchBoxContainer = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_SEARCH_TOGGLE_CONTAINER,\n})<{ isOpen: boolean }>`\n  background: ${({ theme, isOpen }) => (isOpen ? theme.colors.neutral['000'] : 'transparent')};\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: ${({ isOpen }) => (isOpen ? '260px' : 'auto')};\n  & .em-ds-button {\n    margin-right: 2px;\n    height: 24px;\n    width: 24px;\n  }\n`;\n\nconst StyledSearchNavContainer = styled(Grid, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER,\n})`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  position: relative;\n  padding: 2px;\n`;\n\nconst StyledSearchInput = styled(DSInputText, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TEXTINPUT,\n})``;\n\nconst ExpandedToggleBtnStyles = css`\n  margin-left: 2px;\n`;\nconst CollapsedToggleBtnStyles = css`\n  height: 3.077rem;\n  width: 3.077rem;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n\n  // we want to avoid the pseudo-border in the nested buttons\n  & button:focus .pseudo-border {\n    outline: none;\n    border: none;\n  }\n  && span.pseudo-border {\n    display: none;\n  }\n\n  // our \"ad-hoc\" styling of the DSButtonV3 that re-implement changed colors/focus-borders\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.neutral['000']};\n  }\n\n  &&:hover {\n    background-color: ${({ theme }) => theme.colors.brand[700]};\n  }\n\n  &&:focus-visible {\n    background-color: transparent;\n  }\n\n  &&:focus-visible::before {\n    content: '';\n    position: absolute;\n    z-index: 2;\n    top: 2px;\n    left: 2px;\n    width: calc(100% - 4px);\n    height: calc(100% - 4px);\n    border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n    border-radius: 4px;\n    pointer-events: none;\n  }\n`;\n\nconst StyledToggleBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TRIGGER_BUTTON,\n})<{ isOpen: boolean }>`\n  ${({ isOpen }) => (!isOpen ? CollapsedToggleBtnStyles : ExpandedToggleBtnStyles)}\n`;\n\nexport const SearchToggle = (outOfTheBoxDrilledDownProps: DSGlobalHeaderT.SearchToggleProps): JSX.Element => {\n  const {\n    componentProps,\n    label,\n    // added in https://jira.elliemae.io/browse/PUI-17852\n    //   keeping the default value as \"Close search\" for backward compatibility\n    //   we expect authors to provide descriptive aria-labels that fit their specific context, we do so in our example stories.\n    ariaLabelExpanded = 'Close search',\n  } = outOfTheBoxDrilledDownProps;\n\n  const {\n    isOpenUncontrolled,\n    containerRef,\n    handleToggleSearch,\n    handleContainerKeyDown,\n    handleChange,\n    handleInputKeyDown,\n    handleTriggerRefs,\n    inputId,\n    panelId,\n  } = useSearchToggle(outOfTheBoxDrilledDownProps);\n  const { props: propsWithDefault } = React.useContext(DSGlobalHeaderContext);\n\n  const {\n    onNext,\n    onPrevious,\n    currentResultIndex,\n    totalResults,\n    placeholder,\n    value,\n    onBlur,\n    onClear,\n    isOpen: userIsOpen,\n    searchContainerRef,\n  } = componentProps;\n\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n  const isOpen = userIsOpen ?? isOpenUncontrolled;\n\n  return (\n    <StyledNavSearchBoxContainer\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      onKeyDown={handleContainerKeyDown}\n      innerRef={mergeRefs(searchContainerRef, containerRef)}\n      isOpen={isOpen}\n    >\n      <StyledToggleBtn\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        buttonType=\"icon\"\n        innerRef={handleTriggerRefs}\n        aria-label={isOpen ? ariaLabelExpanded : label}\n        aria-expanded={isOpen}\n        aria-controls={panelId}\n        onClick={handleToggleSearch}\n        isOpen={isOpen}\n        data-testid={GLOBAL_HEADER_DATA_TESTID.SEARCH_TOGGLE_TRIGGER_BUTTON}\n      >\n        <Search color={isOpen ? ['brand-primary', '800'] : ['neutral', '0']} />\n      </StyledToggleBtn>\n\n      {isOpen ? (\n        <StyledSearchNavContainer\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          id={panelId}\n          alignItems=\"center\"\n          cols={['1fr', '1fr']}\n        >\n          <StyledSearchInput\n            getOwnerProps={getOwnerProps}\n            getOwnerPropsArguments={getOwnerPropsArguments}\n            id={inputId}\n            placeholder={placeholder || 'Search...'}\n            value={value}\n            clearable\n            // passing onBlur as {undefined} breaks the input text focus ring management\n            //    if onBlur is not provided, we don't pass the prop at all\n            // this is not expected as confirmed in conversation with Gerardo\n            //    we are not going to implement the fix right now to avoid potential breaking changes,\n            //    but we will keep an eye on this behavior and consider a fix in the future if needed.\n            {...(onBlur && { onBlur })}\n            onChange={handleChange}\n            onKeyDown={handleInputKeyDown}\n            onClear={onClear}\n          />\n\n          <SearchToggleSpinButton\n            onNext={onNext}\n            onPrevious={onPrevious}\n            currentResultIndex={currentResultIndex}\n            totalResults={totalResults}\n          />\n        </StyledSearchNavContainer>\n      ) : null}\n    </StyledNavSearchBoxContainer>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Search } from '@elliemae/ds-icons';\nimport { getGlobalAttributes, getXstyledProps } from '@elliemae/ds-props-helpers';\nimport { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport {\n  DSGlobalHeaderName,\n  GLOBAL_HEADER_DATA_TESTID,\n  GLOBAL_HEADER_SLOTS,\n  SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,\n} from '../../../../constants/index.js';\nimport { SearchToggleSpinButton } from './SearchToggleSpinButton.js';\nimport { defaultProps, type SearchToggleT } from './react-desc-prop-types.js';\nimport { useSearchToggle } from './useSearchToggle.js';\n\nconst StyledNavSearchBoxContainer = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_SEARCH_TOGGLE_CONTAINER,\n})<{ isOpen: boolean }>`\n  background: ${({ theme, isOpen }) => (isOpen ? theme.colors.neutral['000'] : 'transparent')};\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: ${({ isOpen }) => (isOpen ? '260px' : 'auto')};\n  & .em-ds-button {\n    margin-right: 2px;\n    height: 24px;\n    width: 24px;\n  }\n`;\n\nconst StyledSearchNavContainer = styled(Grid, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER,\n})`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  position: relative;\n  padding: 2px;\n`;\n\nconst StyledSearchInput = styled(DSInputText, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TEXTINPUT,\n})``;\n\nconst ExpandedToggleBtnStyles = css`\n  margin-left: 2px;\n`;\nconst CollapsedToggleBtnStyles = css`\n  height: 3.077rem;\n  width: 3.077rem;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n\n  // we want to avoid the pseudo-border in the nested buttons\n  & button:focus .pseudo-border {\n    outline: none;\n    border: none;\n  }\n  && span.pseudo-border {\n    display: none;\n  }\n\n  // our \"ad-hoc\" styling of the DSButtonV3 that re-implement changed colors/focus-borders\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.neutral['000']};\n  }\n\n  &&:hover {\n    background-color: ${({ theme }) => theme.colors.brand[700]};\n  }\n\n  &&:focus-visible {\n    background-color: transparent;\n  }\n\n  &&:focus-visible::before {\n    content: '';\n    position: absolute;\n    z-index: 2;\n    top: 2px;\n    left: 2px;\n    width: calc(100% - 4px);\n    height: calc(100% - 4px);\n    border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n    border-radius: 4px;\n    pointer-events: none;\n  }\n`;\n\nconst StyledToggleBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TRIGGER_BUTTON,\n})<{ isOpen: boolean }>`\n  ${({ isOpen }) => (!isOpen ? CollapsedToggleBtnStyles : ExpandedToggleBtnStyles)}\n`;\n\nexport const SearchToggle = (outOfTheBoxDrilledDownProps: SearchToggleT.Props): JSX.Element => {\n  const {\n    componentProps,\n    label,\n    getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n    // added in https://jira.elliemae.io/browse/PUI-17852\n    //   keeping the default value as \"Close search\" for backward compatibility\n    //   we expect authors to provide descriptive aria-labels that fit their specific context, we do so in our example stories.\n    // The default now comes from this part's own defaultProps rather than being repeated inline, so the\n    // documented contract and the runtime behaviour cannot drift apart.\n    ariaLabelExpanded = defaultProps.ariaLabelExpanded,\n    // Everything else the toolbar drilled down, which is where item-level global attributes arrive.\n    // `setRef` and `instanceUID` ride along in here too and are filtered out by getGlobalAttributes'\n    // own whitelist, so they never reach the DOM.\n    ...restIncludingItemLevelGlobalAttributes\n  } = outOfTheBoxDrilledDownProps;\n\n  const {\n    isOpenUncontrolled,\n    containerRef,\n    handleToggleSearch,\n    handleContainerKeyDown,\n    handleChange,\n    handleTriggerRefs,\n    inputId,\n    panelId,\n  } = useSearchToggle(outOfTheBoxDrilledDownProps);\n\n  const {\n    onNext,\n    onPrevious,\n    currentResultIndex,\n    totalResults,\n    placeholder,\n    value,\n    onBlur,\n    onClear,\n    isOpen: userIsOpen,\n    searchContainerRef,\n  } = componentProps;\n\n  /*\n   * Explicit and empty hydrator, shared by this part's slot render sites: `getOwnerPropsArguments` feeds\n   * function-form slot props and nothing else, and none of the elements below carry render-time values\n   * worth passing. Stated so \"what arguments does this slot get?\" is always answerable at the call site.\n   */\n  const noSlotArguments = React.useCallback(() => ({}), []);\n  const isOpen = userIsOpen ?? isOpenUncontrolled;\n  /*\n   * Item-level global attributes, forwarded onto this part's ROOT container \u2014 NOT onto its trigger button,\n   * which is where the sibling item types put theirs. Two reasons, and both matter if you move it:\n   *\n   *   - The trigger is a DSButtonV3, whose own prop vocabulary collides with the HTML global set: `shape`\n   *     is `ButtonShapesT` there and the `<area>` attribute in GlobalAttributesT, and `onClick` takes a\n   *     wider event union. Spreading the whole set onto it does not type-check, and narrowing it would\n   *     forward less than the siblings do.\n   *   - The container is what this item type renders AS; the button is a child of it. Attributes describing\n   *     the toolbar item belong on the item's root.\n   *\n   * Consequence for selector authors: `data-public` lands on the element wrapping the whole search area,\n   * not on the icon button.\n   */\n  const itemLevelGlobalAttributes = getGlobalAttributes<typeof restIncludingItemLevelGlobalAttributes, HTMLDivElement>(\n    restIncludingItemLevelGlobalAttributes,\n  );\n\n  return (\n    <StyledNavSearchBoxContainer\n      // Legacy data-testid \u2014 breaking change if removed/changed (see project_compatibility.md)\n      data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_SEARCH_TOGGLE_CONTAINER}\n      // Spread FIRST, so the props below win on the keys they own \u2014 the opposite order from PopupMenu and\n      // AppPicker, which spread theirs last. Here the internal keys are live state rather than defaults:\n      // `onKeyDown` carries Escape-collapses and `innerRef` carries the consumer's own searchContainerRef.\n      // An item-level attribute overwriting either is a regression, not an override. Everything a consumer\n      // legitimately sets at this level \u2014 data attributes, id, title \u2014 is unaffected, since nothing below\n      // claims those keys.\n      {...itemLevelGlobalAttributes}\n      // The part-level xstyled layer, which the contract advertises \u2014 this is the element that serves it.\n      {...getXstyledProps(restIncludingItemLevelGlobalAttributes)}\n      getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n      getOwnerPropsArguments={noSlotArguments}\n      onKeyDown={handleContainerKeyDown}\n      innerRef={mergeRefs(searchContainerRef, containerRef)}\n      isOpen={isOpen}\n    >\n      <StyledToggleBtn\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\n        buttonType=\"icon\"\n        innerRef={handleTriggerRefs}\n        aria-label={isOpen ? ariaLabelExpanded : label}\n        aria-expanded={isOpen}\n        aria-controls={panelId}\n        onClick={handleToggleSearch}\n        isOpen={isOpen}\n        data-testid={GLOBAL_HEADER_DATA_TESTID.SEARCH_TOGGLE_TRIGGER_BUTTON}\n      >\n        <Search color={isOpen ? ['brand-primary', '800'] : ['neutral', '0']} />\n      </StyledToggleBtn>\n\n      {isOpen ? (\n        <StyledSearchNavContainer\n          getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n          getOwnerPropsArguments={noSlotArguments}\n          id={panelId}\n          alignItems=\"center\"\n          cols={['1fr', '1fr']}\n        >\n          <StyledSearchInput\n            getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n            getOwnerPropsArguments={noSlotArguments}\n            id={inputId}\n            // PUI-17973 \u2014 default accessible name guiding users to the result navigation; a\n            //   consumer-supplied aria-label (via the textinput slot) overrides this.\n            aria-label={SEARCH_TOGGLE_DEFAULT_ARIA_LABEL}\n            placeholder={placeholder || 'Search...'}\n            value={value}\n            clearable\n            // passing onBlur as {undefined} breaks the input text focus ring management\n            //    if onBlur is not provided, we don't pass the prop at all\n            // this is not expected as confirmed in conversation with Gerardo\n            //    we are not going to implement the fix right now to avoid potential breaking changes,\n            //    but we will keep an eye on this behavior and consider a fix in the future if needed.\n            {...(onBlur && { onBlur })}\n            onChange={handleChange}\n            onClear={onClear}\n          />\n          <SearchToggleSpinButton\n            onNext={onNext}\n            onPrevious={onPrevious}\n            currentResultIndex={currentResultIndex}\n            totalResults={totalResults}\n            getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n          />\n        </StyledSearchNavContainer>\n      ) : null}\n    </StyledNavSearchBoxContainer>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggleSpinButton.js

@@ -4,7 +4,6 @@ import { DSButtonV3 } from "@elliemae/ds-button-v2";
 import { ChevronDown, ChevronUp } from "@elliemae/ds-icons";
 import { styled } from "@elliemae/ds-system";
 import React2 from "react";
-import { DSGlobalHeaderContext } from "../../../../DSGlobalHeaderContext.js";
 import { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from "../../../../constants/index.js";
 const StyledToolbarRightAddonsWrapper = styled("div", {
   name: DSGlobalHeaderName,
@@ -36,7 +35,7 @@ const StyledResultTracker = styled("div", {
   slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_TEXT
 })`
   padding: 0 8px;
-  color: #a2a9b6; // this is color picked from the placeholder, specs doesn't specify
+  color: ${({ theme }) => theme.colors.neutral["500"]};
   white-space: nowrap;
   word-spacing: 2px;
   outline: none;
@@ -48,17 +47,16 @@ const StyledVerticalSeparator = styled("div", {
   height: 20px;
   border-right: 1px solid #a2a9b6;
 `;
-const StyledPrevBtn = styled(DSButtonV3, {
+const StyledSpinbuttonPrevSlotBtn = styled(DSButtonV3, {
   name: DSGlobalHeaderName,
   slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_PREV
 })``;
-const StyledNextBtn = styled(DSButtonV3, {
+const StyledSpinbuttonNextSlotBtn = styled(DSButtonV3, {
   name: DSGlobalHeaderName,
   slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_NEXT
 })``;
 const SearchToggleSpinButton = React2.memo((props) => {
-  const { onNext, onPrevious, currentResultIndex, totalResults } = props;
-  const { props: propsWithDefault } = React2.useContext(DSGlobalHeaderContext);
+  const { onNext, onPrevious, currentResultIndex, totalResults, getOwnerPropsAwareOfPropsPassedToGlobalHeader } = props;
   const shouldShowNoResearchOngoing = currentResultIndex === -1 && !totalResults;
   const canShowFullResults = !shouldShowNoResearchOngoing && currentResultIndex !== -1;
   const shouldFallbackToTotalResultsOnly = !shouldShowNoResearchOngoing && !canShowFullResults;
@@ -84,50 +82,63 @@ const SearchToggleSpinButton = React2.memo((props) => {
     },
     [onNext, onPrevious]
   );
-  const getOwnerProps = React2.useCallback(() => propsWithDefault, [propsWithDefault]);
-  const getOwnerPropsArguments = React2.useCallback(() => ({}), []);
-  return /* @__PURE__ */ jsxs(StyledToolbarRightAddonsWrapper, { getOwnerProps, getOwnerPropsArguments, children: [
-    /* @__PURE__ */ jsx(
-      StyledResultTracker,
-      {
-        getOwnerProps,
-        getOwnerPropsArguments,
-        role: "spinbutton",
-        "aria-valuenow": currentResultIndex + 1,
-        "aria-valuemin": 1,
-        "aria-valuemax": totalResults,
-        "aria-valuetext": ariaResultsText,
-        tabIndex: 0,
-        onKeyDown: handleKeyDown,
-        children: resultText
-      }
-    ),
-    /* @__PURE__ */ jsx(StyledVerticalSeparator, { getOwnerProps, getOwnerPropsArguments }),
-    /* @__PURE__ */ jsx(
-      StyledPrevBtn,
-      {
-        getOwnerProps,
-        getOwnerPropsArguments,
-        buttonType: "icon",
-        onClick: onNext,
-        "aria-label": "Next search result",
-        tabIndex: -1,
-        children: /* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "800"] })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      StyledNextBtn,
-      {
-        getOwnerProps,
-        getOwnerPropsArguments,
-        buttonType: "icon",
-        onClick: onPrevious,
-        "aria-label": "Previous search result",
-        tabIndex: -1,
-        children: /* @__PURE__ */ jsx(ChevronUp, { color: ["brand-primary", "800"] })
-      }
-    )
-  ] });
+  const noSlotArguments = React2.useCallback(() => ({}), []);
+  return /* @__PURE__ */ jsxs(
+    StyledToolbarRightAddonsWrapper,
+    {
+      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      getOwnerPropsArguments: noSlotArguments,
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledResultTracker,
+          {
+            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments,
+            role: "spinbutton",
+            "aria-label": "Search results",
+            "aria-valuenow": currentResultIndex + 1,
+            "aria-valuemin": 1,
+            "aria-valuemax": totalResults,
+            "aria-valuetext": ariaResultsText,
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+            children: resultText
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledVerticalSeparator,
+          {
+            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledSpinbuttonNextSlotBtn,
+          {
+            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments,
+            buttonType: "icon",
+            onClick: onNext,
+            "aria-label": "Next search result",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(ChevronDown, { color: ["brand-primary", "800"] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StyledSpinbuttonPrevSlotBtn,
+          {
+            getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+            getOwnerPropsArguments: noSlotArguments,
+            buttonType: "icon",
+            onClick: onPrevious,
+            "aria-label": "Previous search result",
+            tabIndex: -1,
+            children: /* @__PURE__ */ jsx(ChevronUp, { color: ["brand-primary", "800"] })
+          }
+        )
+      ]
+    }
+  );
 });
 SearchToggleSpinButton.displayName = "SearchToggleSpinButton";
 export {

package/dist/esm/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggleSpinButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggleSpinButton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { ChevronDown, ChevronUp } from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSGlobalHeaderContext } from '../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from '../../../../constants/index.js';\n\nconst StyledToolbarRightAddonsWrapper = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_WRAPPER,\n})`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative; // to position the focus-within outline\n  :focus-within {\n    ::after {\n      content: '';\n      position: absolute;\n      width: calc(100% - 2px);\n      height: 100%;\n      border: brand-700 2px solid;\n      margin: -1px;\n      pointer-events: none;\n    }\n  }\n  // we want to avoid the pseudo-border in the nested buttons\n  & button:focus .pseudo-border {\n    outline: none;\n    border: none;\n  }\n`;\nconst StyledResultTracker = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_TEXT,\n})`\n  padding: 0 8px;\n  color: #a2a9b6; // this is color picked from the placeholder, specs doesn't specify\n  white-space: nowrap;\n  word-spacing: 2px;\n  outline: none;\n`;\nconst StyledVerticalSeparator = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_SEPARATOR,\n})`\n  height: 20px;\n  border-right: 1px solid #a2a9b6;\n`;\n// why? because when we add slots support, this should be a slot too, to customize aria-labels\nconst StyledPrevBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_PREV,\n})``;\nconst StyledNextBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_NEXT,\n})``;\n\ninterface SearchToggleSpinButtonPropsT {\n  onNext: () => void;\n  onPrevious: () => void;\n  currentResultIndex: number;\n  totalResults: number;\n}\n\nexport const SearchToggleSpinButton = React.memo((props: SearchToggleSpinButtonPropsT) => {\n  const { onNext, onPrevious, currentResultIndex, totalResults } = props;\n  const { props: propsWithDefault } = React.useContext(DSGlobalHeaderContext);\n\n  const shouldShowNoResearchOngoing = currentResultIndex === -1 && !totalResults;\n  const canShowFullResults = !shouldShowNoResearchOngoing && currentResultIndex !== -1;\n  const shouldFallbackToTotalResultsOnly = !shouldShowNoResearchOngoing && !canShowFullResults;\n  let resultText = 'n/a';\n  let ariaResultsText = 'no research ongoing';\n  if (canShowFullResults) {\n    resultText = `${currentResultIndex + 1} / ${totalResults}`;\n    ariaResultsText = `result ${currentResultIndex + 1} of ${totalResults}`;\n  }\n  if (shouldFallbackToTotalResultsOnly) {\n    resultText = `${totalResults}`;\n    ariaResultsText = `${totalResults} total results`;\n  }\n\n  const handleKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (event) => {\n      if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        onNext();\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        onPrevious();\n      }\n    },\n    [onNext, onPrevious],\n  );\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  return (\n    <StyledToolbarRightAddonsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      <StyledResultTracker\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        role=\"spinbutton\"\n        aria-valuenow={currentResultIndex + 1}\n        aria-valuemin={1}\n        aria-valuemax={totalResults}\n        aria-valuetext={ariaResultsText}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n      >\n        {resultText}\n      </StyledResultTracker>\n      <StyledVerticalSeparator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n      <StyledPrevBtn\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        buttonType=\"icon\"\n        onClick={onNext}\n        aria-label=\"Next search result\"\n        tabIndex={-1} // part of a spinbutton, so remove from tab order\n      >\n        <ChevronDown color={['brand-primary', '800']} />\n      </StyledPrevBtn>\n      <StyledNextBtn\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        buttonType=\"icon\"\n        onClick={onPrevious}\n        aria-label=\"Previous search result\"\n        tabIndex={-1} // part of a spinbutton, so remove from tab order\n      >\n        <ChevronUp color={['brand-primary', '800']} />\n      </StyledNextBtn>\n    </StyledToolbarRightAddonsWrapper>\n  );\n});\n\nSearchToggleSpinButton.displayName = 'SearchToggleSpinButton';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { ChevronDown, ChevronUp } from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from '../../../../constants/index.js';\nimport type { SearchToggleT } from './react-desc-prop-types.js';\n\nconst StyledToolbarRightAddonsWrapper = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_WRAPPER,\n})`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative; // to position the focus-within outline\n  :focus-within {\n    ::after {\n      content: '';\n      position: absolute;\n      width: calc(100% - 2px);\n      height: 100%;\n      border: brand-700 2px solid;\n      margin: -1px;\n      pointer-events: none;\n    }\n  }\n  // we want to avoid the pseudo-border in the nested buttons\n  & button:focus .pseudo-border {\n    outline: none;\n    border: none;\n  }\n`;\nconst StyledResultTracker = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_TEXT,\n})`\n  padding: 0 8px;\n  color: ${({ theme }) => theme.colors.neutral['500']};\n  white-space: nowrap;\n  word-spacing: 2px;\n  outline: none;\n`;\nconst StyledVerticalSeparator = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_SEPARATOR,\n})`\n  height: 20px;\n  border-right: 1px solid #a2a9b6;\n`;\n// why? because when we add slots support, this should be a slot too, to customize aria-labels\nconst StyledSpinbuttonPrevSlotBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_PREV,\n})``;\nconst StyledSpinbuttonNextSlotBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_NEXT,\n})``;\n\ninterface SearchToggleSpinButtonPropsT {\n  onNext: () => void;\n  onPrevious: () => void;\n  currentResultIndex: number;\n  totalResults: number;\n  // Drilled through SearchToggle from DSGlobalHeader \u2014 the slot lookup table, never the hydrator.\n  getOwnerPropsAwareOfPropsPassedToGlobalHeader: SearchToggleT.Props['getOwnerPropsAwareOfPropsPassedToGlobalHeader'];\n}\n\nexport const SearchToggleSpinButton = React.memo((props: SearchToggleSpinButtonPropsT) => {\n  const { onNext, onPrevious, currentResultIndex, totalResults, getOwnerPropsAwareOfPropsPassedToGlobalHeader } = props;\n\n  const shouldShowNoResearchOngoing = currentResultIndex === -1 && !totalResults;\n  const canShowFullResults = !shouldShowNoResearchOngoing && currentResultIndex !== -1;\n  const shouldFallbackToTotalResultsOnly = !shouldShowNoResearchOngoing && !canShowFullResults;\n  let resultText = 'n/a';\n  let ariaResultsText = 'no research ongoing';\n  if (canShowFullResults) {\n    resultText = `${currentResultIndex + 1} / ${totalResults}`;\n    ariaResultsText = `result ${currentResultIndex + 1} of ${totalResults}`;\n  }\n  if (shouldFallbackToTotalResultsOnly) {\n    resultText = `${totalResults}`;\n    ariaResultsText = `${totalResults} total results`;\n  }\n\n  const handleKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (event) => {\n      if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        onNext();\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        onPrevious();\n      }\n    },\n    [onNext, onPrevious],\n  );\n  // Explicit and empty: none of the spinbutton elements have render-time values worth handing to a\n  // function-form slot prop. Stated rather than omitted.\n  const noSlotArguments = React.useCallback(() => ({}), []);\n\n  return (\n    <StyledToolbarRightAddonsWrapper\n      getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n      getOwnerPropsArguments={noSlotArguments}\n    >\n      <StyledResultTracker\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\n        role=\"spinbutton\"\n        aria-label=\"Search results\"\n        aria-valuenow={currentResultIndex + 1}\n        aria-valuemin={1}\n        aria-valuemax={totalResults}\n        aria-valuetext={ariaResultsText}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n      >\n        {resultText}\n      </StyledResultTracker>\n      <StyledVerticalSeparator\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\n      />\n      <StyledSpinbuttonNextSlotBtn\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\n        buttonType=\"icon\"\n        onClick={onNext}\n        aria-label=\"Next search result\"\n        tabIndex={-1} // part of a spinbutton, so remove from tab order\n      >\n        <ChevronDown color={['brand-primary', '800']} />\n      </StyledSpinbuttonNextSlotBtn>\n      <StyledSpinbuttonPrevSlotBtn\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\n        buttonType=\"icon\"\n        onClick={onPrevious}\n        aria-label=\"Previous search result\"\n        tabIndex={-1} // part of a spinbutton, so remove from tab order\n      >\n        <ChevronUp color={['brand-primary', '800']} />\n      </StyledSpinbuttonPrevSlotBtn>\n    </StyledToolbarRightAddonsWrapper>\n  );\n});\n\nSearchToggleSpinButton.displayName = 'SearchToggleSpinButton';\n"],
+  "mappings": "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",
   "names": ["React"]
 }