@elliemae/ds-global-header 3.62.1 → 3.70.0-alpha.11

package/dist/esm/config/useGlobalHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGlobalHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\nimport { useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useMemo, useState } from 'react';\nimport { uid } from 'uid';\nimport { defaultProps, type DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport { FONT_DETECTOR } from '../constants/index.js';\n\nexport const useGlobalHeader = (props: DSGlobalHeaderT.Props) => {\n  const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSGlobalHeaderT.InternalProps>(props, defaultProps);\n\n  const instanceUID = useMemo(() => `ds-global-header-${uid(5)}`, []);\n\n  const globalHeaderToolbarGrid = useMemo(\n    () => new Array(propsWithDefaults.toolbar.length).fill('auto') as string[],\n    [propsWithDefaults.toolbar],\n  );\n\n  const ownerProps = useOwnerProps(props);\n\n  const fontDetector = useFontsizeMedia({\n    largeFont: FONT_DETECTOR.LARGE,\n    mediumFont: FONT_DETECTOR.MEDIUM,\n    smallFont: FONT_DETECTOR.SMALL,\n  });\n\n  return useMemo(\n    () => ({\n      props: propsWithDefaults,\n      showIconOnly,\n      setShowIconOnly,\n      instanceUID,\n      globalHeaderToolbarGrid,\n      fontDetector,\n      ownerProps,\n    }),\n    [propsWithDefaults, ownerProps, showIconOnly, instanceUID, fontDetector, globalHeaderToolbarGrid],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB;AACjC,SAAS,8BAA8B,qBAAqB;AAC5D,SAAS,SAAS,gBAAgB;AAClC,SAAS,WAAW;AACpB,SAAS,oBAA0C;AACnD,SAAS,qBAAqB;AAEvB,MAAM,kBAAkB,CAAC,UAAiC;AAC/D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,oBAAoB,6BAA4D,OAAO,YAAY;AAEzG,QAAM,cAAc,QAAQ,MAAM,oBAAoB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAElE,QAAM,0BAA0B;AAAA,IAC9B,MAAM,IAAI,MAAM,kBAAkB,QAAQ,MAAM,EAAE,KAAK,MAAM;AAAA,IAC7D,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AAEA,QAAM,aAAa,cAAc,KAAK;AAEtC,QAAM,eAAe,iBAAiB;AAAA,IACpC,WAAW,cAAc;AAAA,IACzB,YAAY,cAAc;AAAA,IAC1B,WAAW,cAAc;AAAA,EAC3B,CAAC;AAED,SAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,YAAY,cAAc,aAAa,cAAc,uBAAuB;AAAA,EAClG;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\nimport { useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { useMemo, useState } from 'react';\nimport { uid } from 'uid';\nimport { defaultProps, type DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport { FONT_DETECTOR } from '../constants/index.js';\n\nexport const useGlobalHeader = (props: DSGlobalHeaderT.Props) => {\n  const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSGlobalHeaderT.InternalProps>(props, defaultProps);\n\n  const instanceUID = useMemo(() => `ds-global-header-${uid(5)}`, []);\n\n  const globalHeaderToolbarGrid = useMemo(\n    () => new Array(propsWithDefaults.toolbar.length).fill('auto') as string[],\n    [propsWithDefaults.toolbar],\n  );\n\n  const ownerProps = useOwnerProps(props);\n\n  const getOwnerPropsAwareOfPropsPassedToGlobalHeader = ownerProps.getOwnerProps;\n  const noSlotArguments = ownerProps.getOwnerPropsArguments;\n\n  const fontDetector = useFontsizeMedia({\n    largeFont: FONT_DETECTOR.LARGE,\n    mediumFont: FONT_DETECTOR.MEDIUM,\n    smallFont: FONT_DETECTOR.SMALL,\n  });\n\n  return useMemo(\n    () => ({\n      props: propsWithDefaults,\n      showIconOnly,\n      setShowIconOnly,\n      instanceUID,\n      globalHeaderToolbarGrid,\n      fontDetector,\n      getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n      noSlotArguments,\n    }),\n    [\n      propsWithDefaults,\n      showIconOnly,\n      instanceUID,\n      globalHeaderToolbarGrid,\n      fontDetector,\n      getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n      noSlotArguments,\n    ],\n  );\n};\n\nexport type GlobalHeaderCTX = ReturnType<typeof useGlobalHeader>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB;AACjC,SAAS,8BAA8B,qBAAqB;AAC5D,SAAS,SAAS,gBAAgB;AAClC,SAAS,WAAW;AACpB,SAAS,oBAA0C;AACnD,SAAS,qBAAqB;AAEvB,MAAM,kBAAkB,CAAC,UAAiC;AAC/D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,oBAAoB,6BAA4D,OAAO,YAAY;AAEzG,QAAM,cAAc,QAAQ,MAAM,oBAAoB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAElE,QAAM,0BAA0B;AAAA,IAC9B,MAAM,IAAI,MAAM,kBAAkB,QAAQ,MAAM,EAAE,KAAK,MAAM;AAAA,IAC7D,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AAEA,QAAM,aAAa,cAAc,KAAK;AAEtC,QAAM,gDAAgD,WAAW;AACjE,QAAM,kBAAkB,WAAW;AAEnC,QAAM,eAAe,iBAAiB;AAAA,IACpC,WAAW,cAAc;AAAA,IACzB,YAAY,cAAc;AAAA,IAC1B,WAAW,cAAc;AAAA,EAC3B,CAAC;AAED,SAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO;AAAA,MACP;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,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/constants/index.js

@@ -80,7 +80,6 @@ const DSGlobalHeaderDatatestid = {
       SEPARATOR: "ds-global-header-menubar-item-popupmenu-separator"
     },
     SEARCH_TOGGLE: {
-      CONTAINER: "ds-global-header-menubar-item-searchtoggle-container",
       ITEM_BUTTON: "gh-toolbar-item"
     }
   }
@@ -104,7 +103,6 @@ const DSGlobalHeaderDatatestidFlattened = {
   MENUBAR_POPUP_MENU_ITEM_BUTTON: "ds-global-header-menubar-item-popupmenu-item-button",
   MENUBAR_POPUP_MENU_ITEM_LABEL: "ds-global-header-menubar-item-popupmenu-item-label",
   MENUBAR_POPUP_MENU_SEPARATOR: "ds-global-header-menubar-item-popupmenu-separator",
-  MENUBAR_SEARCH_TOGGLE_CONTAINER: "ds-global-header-menubar-item-searchtoggle-container",
   MENUBAR_SEARCH_TOGGLE_ITEM_BUTTON: "gh-toolbar-item"
 };
 const FONT_DETECTOR = {
@@ -125,13 +123,20 @@ const GLOBAL_HEADER_SLOTS = {
   SEARCH_TOGGLE_SPINBUTTON_NEXT: "searchtoggle-spinbutton-next",
   SEARCH_TOGGLE_TEXTINPUT: "searchtoggle-textinput",
   SEARCH_TOGGLE_TRIGGER_BUTTON: "searchtoggle-trigger-button",
-  SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: "searchtoggle-expanded-content-wrapper"
+  SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: "searchtoggle-expanded-content-wrapper",
+  // The popup menu item's own root — the element consumers target to reach the whole item, and the one
+  // that receives its xstyled props. Post-convention slot, so it carries no legacy data-testid override.
+  MENUBAR_ITEM_POPUPMENU_CONTAINER: "menubar-item-popupmenu-container"
 };
+const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = "Search. Press Tab twice to reach the result navigation.";
 const GLOBAL_HEADER_DATA_TESTID = {
   ...slotObjectToDataTestIds(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),
   // this are the "hardcoded" data-testid that maps to the slots in the component that we keep as they were for backwards compatibility
   ...DSGlobalHeaderDatatestidFlattened,
-  SEARCH_TOGGLE_TRIGGER_BUTTON: "gh-toolbar-item"
+  SEARCH_TOGGLE_TRIGGER_BUTTON: "gh-toolbar-item",
+  MENUBAR_SEARCH_TOGGLE_CONTAINER: "ds-global-header-menubar-item-searchtoggle-container"
+  //                                        /\ PUI-19020 was ds-global-header-... changed to ds-globalheader ...
+  // unexpected and unwanted change in the data-testid existing testid detected by QA.
 };
 export {
   DSGlobalHeaderDatatestid,
@@ -141,6 +146,7 @@ export {
   DSGlobalHeaderSlotsFlattened,
   FONT_DETECTOR,
   GLOBAL_HEADER_DATA_TESTID,
-  GLOBAL_HEADER_SLOTS
+  GLOBAL_HEADER_SLOTS,
+  SEARCH_TOGGLE_DEFAULT_ARIA_LABEL
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSGlobalHeaderName = 'DSGlobalheader';\n\n/* ************************************************************************************************\n * LEGACY VARIABLES\n * ************************************************************************************************\n *   WE KEEP THIS AROUND TO AVOID BREAKING CHANGES\n *   THE NEW VARIABLES INHERIT FROM THIS TO AVOID BREAKING CHANGES!!!\n ************************************************************************************************ */\n\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderSlots = {\n  CONTAINER: 'root',\n  LOGO: {\n    CONTAINER: 'logo-container',\n  },\n  BREADCRUMB: {\n    CONTAINER: 'breadcrumb-container',\n    PIPE: 'breadcrumb-pipe',\n    CHEVRON: 'breadcrumb-chevron',\n    LIST: 'breadcrumb-list',\n    ITEM: 'breadcrumb-item',\n    ITEM_LINK: 'breadcrumb-item-link',\n    ITEM_LINK_LABEL: 'breadcrumb-item-link-label',\n  },\n  MENUBAR: {\n    CONTAINER: 'menubar-container',\n    LIST: 'menubar-list',\n    ITEM: 'menubar-item',\n    ITEM_BUTTON: 'menubar-item-button',\n    POPUP_MENU: {\n      LIST: 'menubar-item-popupmenu-list',\n      ITEM: 'menubar-item-popupmenu-item',\n      ITEM_BUTTON: 'menubar-item-popupmenu-item-button',\n      SEPARATOR: 'menubar-item-popupmenu-separator',\n      ITEM_BUTTON_LABEL: 'menubar-item-popupmenu-item-label',\n    },\n    SEARCH_TOGGLE: {\n      CONTAINER: 'menubar-item-searchtoggle-container',\n    },\n  },\n};\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list.\n */\nexport const DSGlobalHeaderSlotsFlattened = {\n  CONTAINER: DSGlobalHeaderSlots.CONTAINER,\n  LOGO_CONTAINER: DSGlobalHeaderSlots.LOGO.CONTAINER,\n  BREADCRUMB_CONTAINER: DSGlobalHeaderSlots.BREADCRUMB.CONTAINER,\n  BREADCRUMB_PIPE: DSGlobalHeaderSlots.BREADCRUMB.PIPE,\n  BREADCRUMB_CHEVRON: DSGlobalHeaderSlots.BREADCRUMB.CHEVRON,\n  BREADCRUMB_LIST: DSGlobalHeaderSlots.BREADCRUMB.LIST,\n  BREADCRUMB_ITEM: DSGlobalHeaderSlots.BREADCRUMB.ITEM,\n  BREADCRUMB_ITEM_LINK: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK,\n  BREADCRUMB_ITEM_LINK_LABEL: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL,\n  MENUBAR_CONTAINER: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n  MENUBAR_LIST: DSGlobalHeaderSlots.MENUBAR.LIST,\n  MENUBAR_ITEM: DSGlobalHeaderSlots.MENUBAR.ITEM,\n  MENUBAR_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON,\n  MENUBAR_POPUP_MENU_LIST: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.LIST,\n  MENUBAR_POPUP_MENU_ITEM: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM,\n  MENUBAR_POPUP_MENU_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON,\n  MENUBAR_POPUP_MENU_SEPARATOR: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR,\n  MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,\n  MENUBAR_SEARCH_TOGGLE_CONTAINER: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n};\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderDatatestid = {\n  CONTAINER: 'ds-global-header',\n  LOGO: {\n    CONTAINER: 'ds-global-header-logo-container',\n  },\n  BREADCRUMB: {\n    CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n    CONTAINER: 'ds-global-header-breadcrumb-container',\n    PIPE: 'ds-global-header-breadcrumb-pipe',\n    LIST: 'ds-global-header-breadcrumb-list',\n    ITEM: 'ds-global-header-breadcrumb-item',\n    ITEM_LINK: 'gh-breadcrumb-btn',\n    ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n  },\n  MENUBAR: {\n    CONTAINER: 'ds-global-header-menubar-container',\n    LIST: 'ds-global-header-menubar-list',\n    ITEM: 'ds-global-header-menubar-item',\n    ITEM_BUTTON: 'gh-toolbar-item',\n    POPUP_MENU: {\n      LIST: 'ds-global-header-menubar-item-popupmenu-list',\n      ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n      ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n      ITEM_BUTTON_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n      SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n    },\n    SEARCH_TOGGLE: {\n      CONTAINER: 'ds-global-header-menubar-item-searchtoggle-container',\n      ITEM_BUTTON: 'gh-toolbar-item',\n    },\n  },\n};\n\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list\n */\nexport const DSGlobalHeaderDatatestidFlattened = {\n  CONTAINER: 'ds-global-header',\n  LOGO_CONTAINER: 'ds-global-header-logo-container',\n  BREADCRUMB_CONTAINER: 'ds-global-header-breadcrumb-container',\n  BREADCRUMB_PIPE: 'ds-global-header-breadcrumb-pipe',\n  BREADCRUMB_LIST: 'ds-global-header-breadcrumb-list',\n  BREADCRUMB_ITEM: 'ds-global-header-breadcrumb-item',\n  BREADCRUMB_ITEM_LINK: 'gh-breadcrumb-btn',\n  BREADCRUMB_ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n  BREADCRUMB_CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n  MENUBAR_CONTAINER: 'ds-global-header-menubar-container',\n  MENUBAR_LIST: 'ds-global-header-menubar-list',\n  MENUBAR_ITEM: 'ds-global-header-menubar-item',\n  MENUBAR_ITEM_BUTTON: 'gh-toolbar-item',\n  MENUBAR_POPUP_MENU_LIST: 'ds-global-header-menubar-item-popupmenu-list',\n  MENUBAR_POPUP_MENU_ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n  MENUBAR_POPUP_MENU_ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n  MENUBAR_POPUP_MENU_ITEM_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n  MENUBAR_POPUP_MENU_SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n  MENUBAR_SEARCH_TOGGLE_CONTAINER: 'ds-global-header-menubar-item-searchtoggle-container',\n  MENUBAR_SEARCH_TOGGLE_ITEM_BUTTON: 'gh-toolbar-item',\n};\n\n/* ************************************************************************************************\n * From here on our it's the \"new\" convention, but adapted to inherit from the legacy variables\n ************************************************************************************************ */\nexport const FONT_DETECTOR = {\n  SMALL: 1,\n  MEDIUM: 2,\n  LARGE: 3,\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_SLOTS = {\n  ...DSGlobalHeaderSlotsFlattened,\n  // the following slots are completely new, added to the component post BREAKING CHANGES\n  //   https://confluence.ice.com/x/6SqFPQ\n  //  [Breaking Changes] Global Header - Search Toggle\n  //  hence, given they are new, we are not adding them to the legacy variables, we are not going to overwrite the auto-generation pattern.\n  SEARCH_TOGGLE_SPINBUTTON_WRAPPER: 'searchtoggle-spinbutton-wrapper',\n  SEARCH_TOGGLE_SPINBUTTON_TEXT: 'searchtoggle-spinbutton-text',\n  SEARCH_TOGGLE_SPINBUTTON_SEPARATOR: 'searchtoggle-spinbutton-separator',\n  SEARCH_TOGGLE_SPINBUTTON_PREV: 'searchtoggle-spinbutton-prev',\n  SEARCH_TOGGLE_SPINBUTTON_NEXT: 'searchtoggle-spinbutton-next',\n  SEARCH_TOGGLE_TEXTINPUT: 'searchtoggle-textinput',\n  SEARCH_TOGGLE_TRIGGER_BUTTON: 'searchtoggle-trigger-button',\n  SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: 'searchtoggle-expanded-content-wrapper',\n} as const;\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),\n  // this are the \"hardcoded\" data-testid that maps to the slots in the component that we keep as they were for backwards compatibility\n  ...DSGlobalHeaderDatatestidFlattened,\n  SEARCH_TOGGLE_TRIGGER_BUTTON: 'gh-toolbar-item',\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSGlobalHeaderName = 'DSGlobalheader';\n\n/* ************************************************************************************************\n * LEGACY VARIABLES\n * ************************************************************************************************\n *   WE KEEP THIS AROUND TO AVOID BREAKING CHANGES\n *   THE NEW VARIABLES INHERIT FROM THIS TO AVOID BREAKING CHANGES!!!\n ************************************************************************************************ */\n\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderSlots = {\n  CONTAINER: 'root',\n  LOGO: {\n    CONTAINER: 'logo-container',\n  },\n  BREADCRUMB: {\n    CONTAINER: 'breadcrumb-container',\n    PIPE: 'breadcrumb-pipe',\n    CHEVRON: 'breadcrumb-chevron',\n    LIST: 'breadcrumb-list',\n    ITEM: 'breadcrumb-item',\n    ITEM_LINK: 'breadcrumb-item-link',\n    ITEM_LINK_LABEL: 'breadcrumb-item-link-label',\n  },\n  MENUBAR: {\n    CONTAINER: 'menubar-container',\n    LIST: 'menubar-list',\n    ITEM: 'menubar-item',\n    ITEM_BUTTON: 'menubar-item-button',\n    POPUP_MENU: {\n      LIST: 'menubar-item-popupmenu-list',\n      ITEM: 'menubar-item-popupmenu-item',\n      ITEM_BUTTON: 'menubar-item-popupmenu-item-button',\n      SEPARATOR: 'menubar-item-popupmenu-separator',\n      ITEM_BUTTON_LABEL: 'menubar-item-popupmenu-item-label',\n    },\n    SEARCH_TOGGLE: {\n      CONTAINER: 'menubar-item-searchtoggle-container',\n    },\n  },\n};\n/**\n * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list.\n */\nexport const DSGlobalHeaderSlotsFlattened = {\n  CONTAINER: DSGlobalHeaderSlots.CONTAINER,\n  LOGO_CONTAINER: DSGlobalHeaderSlots.LOGO.CONTAINER,\n  BREADCRUMB_CONTAINER: DSGlobalHeaderSlots.BREADCRUMB.CONTAINER,\n  BREADCRUMB_PIPE: DSGlobalHeaderSlots.BREADCRUMB.PIPE,\n  BREADCRUMB_CHEVRON: DSGlobalHeaderSlots.BREADCRUMB.CHEVRON,\n  BREADCRUMB_LIST: DSGlobalHeaderSlots.BREADCRUMB.LIST,\n  BREADCRUMB_ITEM: DSGlobalHeaderSlots.BREADCRUMB.ITEM,\n  BREADCRUMB_ITEM_LINK: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK,\n  BREADCRUMB_ITEM_LINK_LABEL: DSGlobalHeaderSlots.BREADCRUMB.ITEM_LINK_LABEL,\n  MENUBAR_CONTAINER: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n  MENUBAR_LIST: DSGlobalHeaderSlots.MENUBAR.LIST,\n  MENUBAR_ITEM: DSGlobalHeaderSlots.MENUBAR.ITEM,\n  MENUBAR_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON,\n  MENUBAR_POPUP_MENU_LIST: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.LIST,\n  MENUBAR_POPUP_MENU_ITEM: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM,\n  MENUBAR_POPUP_MENU_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON,\n  MENUBAR_POPUP_MENU_SEPARATOR: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR,\n  MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,\n  MENUBAR_SEARCH_TOGGLE_CONTAINER: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n};\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list and is flat.\n */\nexport const DSGlobalHeaderDatatestid = {\n  CONTAINER: 'ds-global-header',\n  LOGO: {\n    CONTAINER: 'ds-global-header-logo-container',\n  },\n  BREADCRUMB: {\n    CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n    CONTAINER: 'ds-global-header-breadcrumb-container',\n    PIPE: 'ds-global-header-breadcrumb-pipe',\n    LIST: 'ds-global-header-breadcrumb-list',\n    ITEM: 'ds-global-header-breadcrumb-item',\n    ITEM_LINK: 'gh-breadcrumb-btn',\n    ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n  },\n  MENUBAR: {\n    CONTAINER: 'ds-global-header-menubar-container',\n    LIST: 'ds-global-header-menubar-list',\n    ITEM: 'ds-global-header-menubar-item',\n    ITEM_BUTTON: 'gh-toolbar-item',\n    POPUP_MENU: {\n      LIST: 'ds-global-header-menubar-item-popupmenu-list',\n      ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n      ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n      ITEM_BUTTON_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n      SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n    },\n    SEARCH_TOGGLE: {\n      ITEM_BUTTON: 'gh-toolbar-item',\n    },\n  },\n};\n\n// maintain the same order as the original object\n// for slots showcase purpose\n/**\n * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list\n */\nexport const DSGlobalHeaderDatatestidFlattened = {\n  CONTAINER: 'ds-global-header',\n  LOGO_CONTAINER: 'ds-global-header-logo-container',\n  BREADCRUMB_CONTAINER: 'ds-global-header-breadcrumb-container',\n  BREADCRUMB_PIPE: 'ds-global-header-breadcrumb-pipe',\n  BREADCRUMB_LIST: 'ds-global-header-breadcrumb-list',\n  BREADCRUMB_ITEM: 'ds-global-header-breadcrumb-item',\n  BREADCRUMB_ITEM_LINK: 'gh-breadcrumb-btn',\n  BREADCRUMB_ITEM_LINK_LABEL: 'ds-global-header-breadcrumb-item-link-label',\n  BREADCRUMB_CHEVRON: 'ds-globalheader-breadcrumb-chevron',\n  MENUBAR_CONTAINER: 'ds-global-header-menubar-container',\n  MENUBAR_LIST: 'ds-global-header-menubar-list',\n  MENUBAR_ITEM: 'ds-global-header-menubar-item',\n  MENUBAR_ITEM_BUTTON: 'gh-toolbar-item',\n  MENUBAR_POPUP_MENU_LIST: 'ds-global-header-menubar-item-popupmenu-list',\n  MENUBAR_POPUP_MENU_ITEM: 'ds-global-header-menubar-item-popupmenu-item',\n  MENUBAR_POPUP_MENU_ITEM_BUTTON: 'ds-global-header-menubar-item-popupmenu-item-button',\n  MENUBAR_POPUP_MENU_ITEM_LABEL: 'ds-global-header-menubar-item-popupmenu-item-label',\n  MENUBAR_POPUP_MENU_SEPARATOR: 'ds-global-header-menubar-item-popupmenu-separator',\n  MENUBAR_SEARCH_TOGGLE_ITEM_BUTTON: 'gh-toolbar-item',\n};\n\n/* ************************************************************************************************\n * From here on our it's the \"new\" convention, but adapted to inherit from the legacy variables\n ************************************************************************************************ */\nexport const FONT_DETECTOR = {\n  SMALL: 1,\n  MEDIUM: 2,\n  LARGE: 3,\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_SLOTS = {\n  ...DSGlobalHeaderSlotsFlattened,\n  // the following slots are completely new, added to the component post BREAKING CHANGES\n  //   https://confluence.ice.com/x/6SqFPQ\n  //  [Breaking Changes] Global Header - Search Toggle\n  //  hence, given they are new, we are not adding them to the legacy variables, we are not going to overwrite the auto-generation pattern.\n  SEARCH_TOGGLE_SPINBUTTON_WRAPPER: 'searchtoggle-spinbutton-wrapper',\n  SEARCH_TOGGLE_SPINBUTTON_TEXT: 'searchtoggle-spinbutton-text',\n  SEARCH_TOGGLE_SPINBUTTON_SEPARATOR: 'searchtoggle-spinbutton-separator',\n  SEARCH_TOGGLE_SPINBUTTON_PREV: 'searchtoggle-spinbutton-prev',\n  SEARCH_TOGGLE_SPINBUTTON_NEXT: 'searchtoggle-spinbutton-next',\n  SEARCH_TOGGLE_TEXTINPUT: 'searchtoggle-textinput',\n  SEARCH_TOGGLE_TRIGGER_BUTTON: 'searchtoggle-trigger-button',\n  SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: 'searchtoggle-expanded-content-wrapper',\n  // The popup menu item's own root \u2014 the element consumers target to reach the whole item, and the one\n  // that receives its xstyled props. Post-convention slot, so it carries no legacy data-testid override.\n  MENUBAR_ITEM_POPUPMENU_CONTAINER: 'menubar-item-popupmenu-container',\n} as const;\n\n// PUI-17973 \u2014 default accessible name for the search input, applied when the consumer does not\n//   supply their own aria-label (a consumer aria-label overrides it). Guides screen-reader users to\n//   the result navigation (the spinbutton), which announces the result count/position natively.\nexport const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = 'Search. Press Tab twice to reach the result navigation.';\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const GLOBAL_HEADER_DATA_TESTID = {\n  ...slotObjectToDataTestIds(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),\n  // this are the \"hardcoded\" data-testid that maps to the slots in the component that we keep as they were for backwards compatibility\n  ...DSGlobalHeaderDatatestidFlattened,\n  SEARCH_TOGGLE_TRIGGER_BUTTON: 'gh-toolbar-item',\n  MENUBAR_SEARCH_TOGGLE_CONTAINER: 'ds-global-header-menubar-item-searchtoggle-container',\n  //                                        /\\ PUI-19020 was ds-global-header-... changed to ds-globalheader ...\n  // unexpected and unwanted change in the data-testid existing testid detected by QA.\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/index.js

@@ -1,7 +1,5 @@
 import * as React from "react";
-import { DSGlobalHeader } from "./DSGlobalHeader.js";
-var index_default = DSGlobalHeader;
-import { DSGlobalHeader as DSGlobalHeader2, DSGlobalHeaderWithSchema, GlobalHeader } from "./DSGlobalHeader.js";
+import { DSGlobalHeader, DSGlobalHeaderWithSchema, GlobalHeader } from "./DSGlobalHeader.js";
 import {
   DSGlobalHeaderDatatestid,
   DSGlobalHeaderDatatestidFlattened,
@@ -12,7 +10,7 @@ import {
   GLOBAL_HEADER_DATA_TESTID
 } from "./constants/index.js";
 export {
-  DSGlobalHeader2 as DSGlobalHeader,
+  DSGlobalHeader,
   DSGlobalHeaderDatatestid,
   DSGlobalHeaderDatatestidFlattened,
   DSGlobalHeaderName,
@@ -21,7 +19,6 @@ export {
   DSGlobalHeaderWithSchema,
   GLOBAL_HEADER_DATA_TESTID,
   GLOBAL_HEADER_SLOTS,
-  GlobalHeader,
-  index_default as default
+  GlobalHeader
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSGlobalHeader } from './DSGlobalHeader.js';\n\nexport default DSGlobalHeader;\nexport { DSGlobalHeader, DSGlobalHeaderWithSchema, GlobalHeader } from './DSGlobalHeader.js';\nexport {\n  // LEGACY VARIABLES\n  DSGlobalHeaderDatatestid,\n  DSGlobalHeaderDatatestidFlattened,\n  DSGlobalHeaderSlots,\n  DSGlobalHeaderSlotsFlattened,\n  // NEW PATTERNS INHERITING FROM THE LEGACY VARIABLES:\n  DSGlobalHeaderName,\n  GLOBAL_HEADER_SLOTS,\n  GLOBAL_HEADER_DATA_TESTID,\n} from './constants/index.js';\nexport type { DSGlobalHeaderT } from './react-desc-prop-types.js';\nexport type { DSGlobalHeaderInternalsT } from './sharedTypes.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sBAAsB;AAE/B,IAAO,gBAAQ;AACf,SAAS,kBAAAA,iBAAgB,0BAA0B,oBAAoB;AACvE;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
-  "names": ["DSGlobalHeader"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSGlobalHeader, DSGlobalHeaderWithSchema, GlobalHeader } from './DSGlobalHeader.js';\nexport {\n  // LEGACY VARIABLES\n  DSGlobalHeaderDatatestid,\n  DSGlobalHeaderDatatestidFlattened,\n  DSGlobalHeaderSlots,\n  DSGlobalHeaderSlotsFlattened,\n  // NEW PATTERNS INHERITING FROM THE LEGACY VARIABLES:\n  DSGlobalHeaderName,\n  GLOBAL_HEADER_SLOTS,\n  GLOBAL_HEADER_DATA_TESTID,\n} from './constants/index.js';\nexport type { DSGlobalHeaderT } from './react-desc-prop-types.js';\nexport type { DSGlobalHeaderInternalsT } from './sharedTypes.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,gBAAgB,0BAA0B,oBAAoB;AACvE;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "names": []
 }

package/dist/esm/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js

@@ -1,11 +1,24 @@
 import * as React from "react";
-import { useCallback, useContext, useEffect, useRef } from "react";
+import { useMemo, useCallback, useContext, useEffect, useRef } from "react";
 import { FONT_DETECTOR } from "../../constants/index.js";
 import { DSGlobalHeaderContext } from "../../DSGlobalHeaderContext.js";
 const useGlobalHeaderBreadcrumb = () => {
   const {
     props: { breadcrumb, CustomNavigation },
-    ownerProps,
+    /*
+     * The slot layer, split into its two genuinely separate halves.
+     *
+     * `getOwnerProps` is the lookup table getPartProps indexes by data-dimsum-slot to find a consumer's
+     * slot prop, so it can only come from DSGlobalHeader — that is what the verbose drilled name says out
+     * loud when it reaches the out-of-the-box parts.
+     *
+     * `getOwnerPropsArguments` is the hydrator for function-form slot props and is used for nothing else,
+     * so it belongs to whichever element renders the slot. Explicit and empty here: none of the toolbar's
+     * own elements have render-time values worth passing. Stated rather than omitted, so "what arguments
+     * does this slot get?" always has a visible answer.
+     */
+    getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+    noSlotArguments,
     instanceUID,
     showIconOnly,
     setShowIconOnly,
@@ -35,6 +48,25 @@ const useGlobalHeaderBreadcrumb = () => {
     },
     []
   );
+  const ownerProps = useMemo(
+    () => ({
+      /*
+       * The slot layer, split into its two genuinely separate halves.
+       *
+       * `getOwnerProps` is the lookup table getPartProps indexes by data-dimsum-slot to find a consumer's
+       * slot prop, so it can only come from DSGlobalHeader — that is what the verbose drilled name says out
+       * loud when it reaches the out-of-the-box parts.
+       *
+       * `getOwnerPropsArguments` is the hydrator for function-form slot props and is used for nothing else,
+       * so it belongs to whichever element renders the slot. Explicit and empty here: none of the toolbar's
+       * own elements have render-time values worth passing. Stated rather than omitted, so "what arguments
+       * does this slot get?" always has a visible answer.
+       */
+      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      getOwnerPropsArguments: noSlotArguments
+    }),
+    [getOwnerPropsAwareOfPropsPassedToGlobalHeader, noSlotArguments]
+  );
   return {
     breadcrumb,
     CustomNavigation,

package/dist/esm/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Breadcrumb/useGlobalHeaderBreadcrumb.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext, useEffect, useRef } from 'react';\nimport { FONT_DETECTOR } from '../../constants/index.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport type { DSGlobalHeaderT } from '../../react-desc-prop-types.js';\n\ninterface UseGlobalHeaderBreadcrumbReturnT {\n  breadcrumb: DSGlobalHeaderT.BreadcrumbItem[];\n  CustomNavigation: React.ComponentType;\n  showIconOnly: boolean;\n  flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n  handleOnKeyDown: (\n    onClick: (event: React.MouseEvent | React.KeyboardEvent) => void,\n  ) => (event: React.KeyboardEvent) => void;\n  instanceUID: string;\n  ownerProps: {\n    getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n    getOwnerPropsArguments: () => object;\n  };\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n  const {\n    props: { breadcrumb, CustomNavigation },\n    ownerProps,\n    instanceUID,\n    showIconOnly,\n    setShowIconOnly,\n    fontDetector,\n  } = useContext(DSGlobalHeaderContext);\n\n  const breakpointRef = useRef<number | null>(null);\n  const flexRegionRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const evaluateShowIconOnly = () => {\n      if (\n        (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) ||\n        fontDetector === FONT_DETECTOR.LARGE ||\n        fontDetector === FONT_DETECTOR.MEDIUM\n      ) {\n        setShowIconOnly(true);\n        breakpointRef.current = window.innerWidth;\n      } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n        setShowIconOnly(false);\n        breakpointRef.current = null;\n      }\n    };\n\n    evaluateShowIconOnly();\n\n    window.addEventListener('resize', evaluateShowIconOnly);\n    return () => window.removeEventListener('resize', evaluateShowIconOnly);\n  }, [breakpointRef, flexRegionRef, setShowIconOnly, fontDetector]);\n\n  const handleOnKeyDown = useCallback(\n    (onClick: (event: React.MouseEvent | React.KeyboardEvent) => void) => (e: React.KeyboardEvent) => {\n      if (e.key === ' ' || e.key === 'Enter') {\n        onClick(e);\n      }\n    },\n    [],\n  );\n\n  return {\n    breadcrumb,\n    CustomNavigation,\n    showIconOnly,\n    flexRegionRef,\n    handleOnKeyDown,\n    instanceUID,\n    ownerProps,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,YAAY,WAAW,cAAc;AAC3D,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAkB/B,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY,iBAAiB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,gBAAgB,OAAsB,IAAI;AAChD,QAAM,gBAAgB,OAAuB,IAAI;AAEjD,YAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UACG,cAAc,WAAW,cAAc,QAAQ,eAAe,KAAK,CAAC,cAAc,WACnF,iBAAiB,cAAc,SAC/B,iBAAiB,cAAc,QAC/B;AACA,wBAAgB,IAAI;AACpB,sBAAc,UAAU,OAAO;AAAA,MACjC,WAAW,cAAc,WAAW,OAAO,cAAc,cAAc,SAAS;AAC9E,wBAAgB,KAAK;AACrB,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,yBAAqB;AAErB,WAAO,iBAAiB,UAAU,oBAAoB;AACtD,WAAO,MAAM,OAAO,oBAAoB,UAAU,oBAAoB;AAAA,EACxE,GAAG,CAAC,eAAe,eAAe,iBAAiB,YAAY,CAAC;AAEhE,QAAM,kBAAkB;AAAA,IACtB,CAAC,YAAqE,CAAC,MAA2B;AAChG,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useMemo, useCallback, useContext, useEffect, useRef } from 'react';\nimport { FONT_DETECTOR } from '../../constants/index.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport type { DSGlobalHeaderT } from '../../react-desc-prop-types.js';\n\ninterface UseGlobalHeaderBreadcrumbReturnT {\n  breadcrumb: DSGlobalHeaderT.BreadcrumbItem[];\n  CustomNavigation: React.ComponentType;\n  showIconOnly: boolean;\n  flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n  handleOnKeyDown: (\n    onClick: (event: React.MouseEvent | React.KeyboardEvent) => void,\n  ) => (event: React.KeyboardEvent) => void;\n  instanceUID: string;\n  ownerProps: {\n    getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n    getOwnerPropsArguments: () => object;\n  };\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n  const {\n    props: { breadcrumb, CustomNavigation },\n    /*\n     * The slot layer, split into its two genuinely separate halves.\n     *\n     * `getOwnerProps` is the lookup table getPartProps indexes by data-dimsum-slot to find a consumer's\n     * slot prop, so it can only come from DSGlobalHeader \u2014 that is what the verbose drilled name says out\n     * loud when it reaches the out-of-the-box parts.\n     *\n     * `getOwnerPropsArguments` is the hydrator for function-form slot props and is used for nothing else,\n     * so it belongs to whichever element renders the slot. Explicit and empty here: none of the toolbar's\n     * own elements have render-time values worth passing. Stated rather than omitted, so \"what arguments\n     * does this slot get?\" always has a visible answer.\n     */\n    getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n    noSlotArguments,\n    instanceUID,\n    showIconOnly,\n    setShowIconOnly,\n    fontDetector,\n  } = useContext(DSGlobalHeaderContext);\n\n  const breakpointRef = useRef<number | null>(null);\n  const flexRegionRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const evaluateShowIconOnly = () => {\n      if (\n        (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) ||\n        fontDetector === FONT_DETECTOR.LARGE ||\n        fontDetector === FONT_DETECTOR.MEDIUM\n      ) {\n        setShowIconOnly(true);\n        breakpointRef.current = window.innerWidth;\n      } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n        setShowIconOnly(false);\n        breakpointRef.current = null;\n      }\n    };\n\n    evaluateShowIconOnly();\n\n    window.addEventListener('resize', evaluateShowIconOnly);\n    return () => window.removeEventListener('resize', evaluateShowIconOnly);\n  }, [breakpointRef, flexRegionRef, setShowIconOnly, fontDetector]);\n\n  const handleOnKeyDown = useCallback(\n    (onClick: (event: React.MouseEvent | React.KeyboardEvent) => void) => (e: React.KeyboardEvent) => {\n      if (e.key === ' ' || e.key === 'Enter') {\n        onClick(e);\n      }\n    },\n    [],\n  );\n\n  const ownerProps = useMemo(\n    () => ({\n      /*\n       * The slot layer, split into its two genuinely separate halves.\n       *\n       * `getOwnerProps` is the lookup table getPartProps indexes by data-dimsum-slot to find a consumer's\n       * slot prop, so it can only come from DSGlobalHeader \u2014 that is what the verbose drilled name says out\n       * loud when it reaches the out-of-the-box parts.\n       *\n       * `getOwnerPropsArguments` is the hydrator for function-form slot props and is used for nothing else,\n       * so it belongs to whichever element renders the slot. Explicit and empty here: none of the toolbar's\n       * own elements have render-time values worth passing. Stated rather than omitted, so \"what arguments\n       * does this slot get?\" always has a visible answer.\n       */\n      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n      getOwnerPropsArguments: noSlotArguments,\n    }),\n    [getOwnerPropsAwareOfPropsPassedToGlobalHeader, noSlotArguments],\n  );\n\n  return {\n    breadcrumb,\n    CustomNavigation,\n    showIconOnly,\n    flexRegionRef,\n    handleOnKeyDown,\n    instanceUID,\n    ownerProps,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,SAAS,aAAa,YAAY,WAAW,cAAc;AACpE,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAkB/B,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAatC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,gBAAgB,OAAsB,IAAI;AAChD,QAAM,gBAAgB,OAAuB,IAAI;AAEjD,YAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UACG,cAAc,WAAW,cAAc,QAAQ,eAAe,KAAK,CAAC,cAAc,WACnF,iBAAiB,cAAc,SAC/B,iBAAiB,cAAc,QAC/B;AACA,wBAAgB,IAAI;AACpB,sBAAc,UAAU,OAAO;AAAA,MACjC,WAAW,cAAc,WAAW,OAAO,cAAc,cAAc,SAAS;AAC9E,wBAAgB,KAAK;AACrB,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,yBAAqB;AAErB,WAAO,iBAAiB,UAAU,oBAAoB;AACtD,WAAO,MAAM,OAAO,oBAAoB,UAAU,oBAAoB;AAAA,EACxE,GAAG,CAAC,eAAe,eAAe,iBAAiB,YAAY,CAAC;AAEhE,QAAM,kBAAkB;AAAA,IACtB,CAAC,YAAqE,CAAC,MAA2B;AAChG,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ,CAAC;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAaL,eAAe;AAAA,MACf,wBAAwB;AAAA,IAC1B;AAAA,IACA,CAAC,+CAA+C,eAAe;AAAA,EACjE;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/Logo/GlobalHeaderLogo.js

@@ -9,7 +9,20 @@ const GlobalHeaderLogo = () => {
   const {
     props: { Logo, LogoWithBrand },
     showIconOnly,
-    ownerProps
+    /*
+     * The slot layer, split into its two genuinely separate halves.
+     *
+     * `getOwnerProps` is the lookup table getPartProps indexes by data-dimsum-slot to find a consumer's
+     * slot prop, so it can only come from DSGlobalHeader — that is what the verbose drilled name says out
+     * loud when it reaches the out-of-the-box parts.
+     *
+     * `getOwnerPropsArguments` is the hydrator for function-form slot props and is used for nothing else,
+     * so it belongs to whichever element renders the slot. Explicit and empty here: none of the toolbar's
+     * own elements have render-time values worth passing. Stated rather than omitted, so "what arguments
+     * does this slot get?" always has a visible answer.
+     */
+    getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+    noSlotArguments
   } = useContext(DSGlobalHeaderContext);
   const layoutMode = useGetLayoutMode();
   const smalScreen = React2.useMemo(() => {
@@ -24,7 +37,8 @@ const GlobalHeaderLogo = () => {
       alignItems: "center",
       pr: smalScreen ? "0px" : "36px",
       cols: smalScreen ? ["auto"] : ["auto", "1fr"],
-      ...ownerProps,
+      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      getOwnerPropsArguments: noSlotArguments,
       children: [
         Logo && smalScreen && /* @__PURE__ */ jsx(Logo, {}),
         LogoWithBrand && !smalScreen && /* @__PURE__ */ jsx(LogoWithBrand, {})

package/dist/esm/parts/Logo/GlobalHeaderLogo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Logo/GlobalHeaderLogo.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../constants/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n  const {\n    props: { Logo, LogoWithBrand },\n    showIconOnly,\n    ownerProps,\n  } = useContext(DSGlobalHeaderContext);\n  const layoutMode = useGetLayoutMode();\n\n  const smalScreen = React.useMemo(() => {\n    if (!layoutMode) return showIconOnly;\n    if (layoutMode === 'xs' || layoutMode === 's') return true;\n    return false;\n  }, [layoutMode, showIconOnly]);\n\n  return (\n    <StyledLogoContainer\n      data-testid={GLOBAL_HEADER_DATA_TESTID.LOGO_CONTAINER}\n      alignItems=\"center\"\n      pr={smalScreen ? '0px' : '36px'}\n      cols={smalScreen ? ['auto'] : ['auto', '1fr']}\n      {...ownerProps}\n    >\n      {Logo && smalScreen && <Logo />}\n      {LogoWithBrand && !smalScreen && <LogoWithBrand />}\n    </StyledLogoContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqBnB,SAOyB,KAPzB;AArBJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAEnC,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,cAAc;AAAA,IAC7B;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AACpC,QAAM,aAAa,iBAAiB;AAEpC,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,QAAI,CAAC,WAAY,QAAO;AACxB,QAAI,eAAe,QAAQ,eAAe,IAAK,QAAO;AACtD,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,YAAY,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,0BAA0B;AAAA,MACvC,YAAW;AAAA,MACX,IAAI,aAAa,QAAQ;AAAA,MACzB,MAAM,aAAa,CAAC,MAAM,IAAI,CAAC,QAAQ,KAAK;AAAA,MAC3C,GAAG;AAAA,MAEH;AAAA,gBAAQ,cAAc,oBAAC,QAAK;AAAA,QAC5B,iBAAiB,CAAC,cAAc,oBAAC,iBAAc;AAAA;AAAA;AAAA,EAClD;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../constants/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n  const {\n    props: { Logo, LogoWithBrand },\n    showIconOnly,\n    /*\n     * The slot layer, split into its two genuinely separate halves.\n     *\n     * `getOwnerProps` is the lookup table getPartProps indexes by data-dimsum-slot to find a consumer's\n     * slot prop, so it can only come from DSGlobalHeader \u2014 that is what the verbose drilled name says out\n     * loud when it reaches the out-of-the-box parts.\n     *\n     * `getOwnerPropsArguments` is the hydrator for function-form slot props and is used for nothing else,\n     * so it belongs to whichever element renders the slot. Explicit and empty here: none of the toolbar's\n     * own elements have render-time values worth passing. Stated rather than omitted, so \"what arguments\n     * does this slot get?\" always has a visible answer.\n     */\n    getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n    noSlotArguments,\n  } = useContext(DSGlobalHeaderContext);\n  const layoutMode = useGetLayoutMode();\n\n  const smalScreen = React.useMemo(() => {\n    if (!layoutMode) return showIconOnly;\n    if (layoutMode === 'xs' || layoutMode === 's') return true;\n    return false;\n  }, [layoutMode, showIconOnly]);\n\n  return (\n    <StyledLogoContainer\n      data-testid={GLOBAL_HEADER_DATA_TESTID.LOGO_CONTAINER}\n      alignItems=\"center\"\n      pr={smalScreen ? '0px' : '36px'}\n      cols={smalScreen ? ['auto'] : ['auto', '1fr']}\n      getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n      getOwnerPropsArguments={noSlotArguments}\n    >\n      {Logo && smalScreen && <Logo />}\n      {LogoWithBrand && !smalScreen && <LogoWithBrand />}\n    </StyledLogoContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCnB,SAQyB,KARzB;AAlCJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAEnC,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,cAAc;AAAA,IAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AACpC,QAAM,aAAa,iBAAiB;AAEpC,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,QAAI,CAAC,WAAY,QAAO;AACxB,QAAI,eAAe,QAAQ,eAAe,IAAK,QAAO;AACtD,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,YAAY,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,0BAA0B;AAAA,MACvC,YAAW;AAAA,MACX,IAAI,aAAa,QAAQ;AAAA,MACzB,MAAM,aAAa,CAAC,MAAM,IAAI,CAAC,QAAQ,KAAK;AAAA,MAC5C,eAAe;AAAA,MACf,wBAAwB;AAAA,MAEvB;AAAA,gBAAQ,cAAc,oBAAC,QAAK;AAAA,QAC5B,iBAAiB,CAAC,cAAc,oBAAC,iBAAc;AAAA;AAAA;AAAA,EAClD;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js

@@ -5,16 +5,29 @@ import { useContext } from "react";
 import { FONT_DETECTOR, GLOBAL_HEADER_DATA_TESTID } from "../../constants/index.js";
 import { DSGlobalHeaderContext } from "../../DSGlobalHeaderContext.js";
 import { StyledButton } from "../styles.js";
-import { AppPicker, PopupMenu, SearchToggle } from "./outOfTheBox/index.js";
+import { AppPickerCTXRenderer, PopupMenu, SearchToggle } from "./outOfTheBox/index.js";
 import { StyledList, StyledMenubarContainer, StyledToolbarItem } from "./styles.js";
 import { useGlobalHeaderToolbar } from "./useGlobalHeaderToolbar.js";
 const GlobalHeaderToolbar = () => {
   const {
     props: { toolbar },
-    ownerProps,
     instanceUID,
     globalHeaderToolbarGrid,
-    fontDetector
+    fontDetector,
+    /*
+     * The slot layer, split into its two genuinely separate halves.
+     *
+     * `getOwnerProps` is the lookup table getPartProps indexes by data-dimsum-slot to find a consumer's
+     * slot prop, so it can only come from DSGlobalHeader — that is what the verbose drilled name says out
+     * loud when it reaches the out-of-the-box parts.
+     *
+     * `getOwnerPropsArguments` is the hydrator for function-form slot props and is used for nothing else,
+     * so it belongs to whichever element renders the slot. Explicit and empty here: none of the toolbar's
+     * own elements have render-time values worth passing. Stated rather than omitted, so "what arguments
+     * does this slot get?" always has a visible answer.
+     */
+    getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+    noSlotArguments
   } = useContext(DSGlobalHeaderContext);
   const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();
   return /* @__PURE__ */ jsx(
@@ -23,7 +36,8 @@ const GlobalHeaderToolbar = () => {
       "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_CONTAINER,
       "aria-label": "menubar",
       withSpan: fontDetector > FONT_DETECTOR.SMALL,
-      ...ownerProps,
+      getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+      getOwnerPropsArguments: noSlotArguments,
       children: /* @__PURE__ */ jsx(
         StyledList,
         {
@@ -36,25 +50,27 @@ const GlobalHeaderToolbar = () => {
           onKeyDown: keyboardNavigation,
           innerRef: listRef,
           "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_LIST,
-          ...ownerProps,
+          getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+          getOwnerPropsArguments: noSlotArguments,
           children: toolbar.map((item, index) => {
             const { type } = item;
             const setRefIndex = setRef(index);
             if (type === "ds-popup-menu") {
-              const { label: label2, ...otherProps2 } = item;
+              const { label: label2, type: strippedDiscriminator, ...otherProps2 } = item;
               return /* @__PURE__ */ jsx(
                 StyledToolbarItem,
                 {
                   role: "menuitem",
                   "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM,
-                  ...ownerProps,
+                  getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                  getOwnerPropsArguments: noSlotArguments,
                   children: /* @__PURE__ */ jsx(
                     PopupMenu,
                     {
                       title: label2,
                       setRef: setRefIndex,
                       ...otherProps2,
-                      ownerProps
+                      getOwnerPropsAwareOfPropsPassedToGlobalHeader
                     }
                   )
                 },
@@ -62,27 +78,46 @@ const GlobalHeaderToolbar = () => {
               );
             }
             if (type === "ds-app-picker") {
-              const { label: label2, ...otherProps2 } = item;
+              const { label: label2, type: strippedDiscriminator, ...otherProps2 } = item;
               return /* @__PURE__ */ jsx(
                 StyledToolbarItem,
                 {
                   role: "menuitem",
                   "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM,
-                  ...ownerProps,
-                  children: /* @__PURE__ */ jsx(AppPicker, { label: label2, setRef: setRefIndex, ...otherProps2 })
+                  getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                  getOwnerPropsArguments: noSlotArguments,
+                  children: /* @__PURE__ */ jsx(
+                    AppPickerCTXRenderer,
+                    {
+                      label: label2,
+                      setRef: setRefIndex,
+                      ...otherProps2,
+                      getOwnerPropsAwareOfPropsPassedToGlobalHeader
+                    }
+                  )
                 },
                 `${instanceUID}-ds-toolbar-item-${label2}`
               );
             }
             if (type === "ds-search-toggle") {
-              const { label: label2, ...otherProps2 } = item;
+              const { label: label2, type: strippedDiscriminator, ...otherProps2 } = item;
               return /* @__PURE__ */ jsx(
                 StyledToolbarItem,
                 {
                   role: "menuitem",
                   "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM,
-                  ...ownerProps,
-                  children: /* @__PURE__ */ jsx(SearchToggle, { instanceUID, label: label2, setRef: setRefIndex, ...otherProps2 })
+                  getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                  getOwnerPropsArguments: noSlotArguments,
+                  children: /* @__PURE__ */ jsx(
+                    SearchToggle,
+                    {
+                      instanceUID,
+                      label: label2,
+                      setRef: setRefIndex,
+                      ...otherProps2,
+                      getOwnerPropsAwareOfPropsPassedToGlobalHeader
+                    }
+                  )
                 },
                 `${instanceUID}-ds-toolbar-item-${label2}`
               );
@@ -95,7 +130,8 @@ const GlobalHeaderToolbar = () => {
                 {
                   role: "menuitem",
                   "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM,
-                  ...ownerProps,
+                  getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                  getOwnerPropsArguments: noSlotArguments,
                   children: CustomComponent && /* @__PURE__ */ jsx(CustomComponent, { item, setRef: setRefIndex })
                 },
                 `${instanceUID}-ds-toolbar-item-${label2}`
@@ -107,7 +143,8 @@ const GlobalHeaderToolbar = () => {
               {
                 role: "menuitem",
                 "data-testid": GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM,
-                ...ownerProps,
+                getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                getOwnerPropsArguments: noSlotArguments,
                 children: /* @__PURE__ */ jsx(
                   StyledButton,
                   {
@@ -116,7 +153,8 @@ const GlobalHeaderToolbar = () => {
                     innerRef: setRefIndex,
                     ...getGlobalAttributes(otherProps),
                     type: "button",
-                    ...ownerProps,
+                    getOwnerProps: getOwnerPropsAwareOfPropsPassedToGlobalHeader,
+                    getOwnerPropsArguments: noSlotArguments,
                     children: Icon && /* @__PURE__ */ jsx(Icon, { size: "m" })
                   }
                 )

package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR, GLOBAL_HEADER_DATA_TESTID } from '../../constants/index.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledButton } from '../styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    ownerProps,\n    instanceUID,\n    globalHeaderToolbarGrid,\n    fontDetector,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer\n      data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_CONTAINER}\n      aria-label=\"menubar\"\n      withSpan={fontDetector > FONT_DETECTOR.SMALL}\n      {...ownerProps}\n    >\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        onKeyDown={keyboardNavigation}\n        innerRef={listRef}\n        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_LIST}\n        {...ownerProps}\n      >\n        {toolbar.map((item, index) => {\n          const { type } = item;\n          // inside a toolbar items needs to be navigable via arrow keys.\n          //  this setRef(index) is generating an index of references that can be \"focused\" when user is navigating with arrows\n          // NOTE:\n          //  focus management based on DOM nodes.focus() in react is problematic due to unpredictable timing of refs assignment and react rendering\n          //  we should be using the \"focus tracker\" approach where we keep track of \"what we want to focuse\",\n          //    then have the ref callback functions invoke the focus to the element AFTER the LAST element is rendered, not tracking the DOM nodes directly.\n          // We aren't changing this right now, but let's keep this in mind.\n          const setRefIndex = setRef(index);\n\n          if (type === 'ds-popup-menu') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                {...ownerProps}\n              >\n                <PopupMenu\n                  title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                  setRef={setRefIndex}\n                  {...otherProps}\n                  ownerProps={ownerProps}\n                />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-app-picker') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                {...ownerProps}\n              >\n                <AppPicker label={label} setRef={setRefIndex} {...otherProps} />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-search-toggle') {\n            const { label, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                {...ownerProps}\n              >\n                <SearchToggle instanceUID={instanceUID} label={label} setRef={setRefIndex} {...otherProps} />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'custom') {\n            const { label, CustomComponent } = item;\n            if (!CustomComponent) return null;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                {...ownerProps}\n              >\n                {CustomComponent && <CustomComponent item={item} setRef={setRefIndex} />}\n              </StyledToolbarItem>\n            );\n          }\n\n          const { label, Icon, ...otherProps } = item;\n          return (\n            <StyledToolbarItem\n              role=\"menuitem\"\n              key={`${instanceUID}-ds-toolbar-item-${label}`}\n              data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n              {...ownerProps}\n            >\n              <StyledButton\n                title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n                innerRef={setRefIndex}\n                {...getGlobalAttributes(otherProps)}\n                type=\"button\"\n                {...ownerProps}\n              >\n                {Icon && <Icon size=\"m\" />}\n              </StyledButton>\n            </StyledToolbarItem>\n          );\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR, GLOBAL_HEADER_DATA_TESTID } from '../../constants/index.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledButton } from '../styles.js';\nimport { AppPickerCTXRenderer, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    instanceUID,\n    globalHeaderToolbarGrid,\n    fontDetector,\n    /*\n     * The slot layer, split into its two genuinely separate halves.\n     *\n     * `getOwnerProps` is the lookup table getPartProps indexes by data-dimsum-slot to find a consumer's\n     * slot prop, so it can only come from DSGlobalHeader \u2014 that is what the verbose drilled name says out\n     * loud when it reaches the out-of-the-box parts.\n     *\n     * `getOwnerPropsArguments` is the hydrator for function-form slot props and is used for nothing else,\n     * so it belongs to whichever element renders the slot. Explicit and empty here: none of the toolbar's\n     * own elements have render-time values worth passing. Stated rather than omitted, so \"what arguments\n     * does this slot get?\" always has a visible answer.\n     */\n    getOwnerPropsAwareOfPropsPassedToGlobalHeader,\n    noSlotArguments,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer\n      data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_CONTAINER}\n      aria-label=\"menubar\"\n      withSpan={fontDetector > FONT_DETECTOR.SMALL}\n      getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n      getOwnerPropsArguments={noSlotArguments}\n    >\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        onKeyDown={keyboardNavigation}\n        innerRef={listRef}\n        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_LIST}\n        getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n        getOwnerPropsArguments={noSlotArguments}\n      >\n        {toolbar.map((item, index) => {\n          const { type } = item;\n          /*\n           * Each branch below strips `type` rather than forwarding it. It is toolbar configuration, but it\n           * is ALSO a member of GlobalAttributesT \u2014 so any part that spreads item-level global attributes\n           * onto a non-button element renders `type=\"ds-search-toggle\"` into the DOM. The button-rooted\n           * parts escape that only incidentally, by re-declaring `type=\"button\"` after their spread.\n           * Stripping here is what stops the outcome depending on that accident.\n           */\n          // inside a toolbar items needs to be navigable via arrow keys.\n          //  this setRef(index) is generating an index of references that can be \"focused\" when user is navigating with arrows\n          // NOTE:\n          //  focus management based on DOM nodes.focus() in react is problematic due to unpredictable timing of refs assignment and react rendering\n          //  we should be using the \"focus tracker\" approach where we keep track of \"what we want to focuse\",\n          //    then have the ref callback functions invoke the focus to the element AFTER the LAST element is rendered, not tracking the DOM nodes directly.\n          // We aren't changing this right now, but let's keep this in mind.\n          const setRefIndex = setRef(index);\n\n          if (type === 'ds-popup-menu') {\n            const { label, type: strippedDiscriminator, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                getOwnerPropsArguments={noSlotArguments}\n              >\n                <PopupMenu\n                  title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                  setRef={setRefIndex}\n                  {...otherProps}\n                  getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-app-picker') {\n            const { label, type: strippedDiscriminator, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                getOwnerPropsArguments={noSlotArguments}\n              >\n                <AppPickerCTXRenderer\n                  label={label}\n                  setRef={setRefIndex}\n                  {...otherProps}\n                  getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-search-toggle') {\n            const { label, type: strippedDiscriminator, ...otherProps } = item;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                getOwnerPropsArguments={noSlotArguments}\n              >\n                <SearchToggle\n                  instanceUID={instanceUID}\n                  label={label}\n                  setRef={setRefIndex}\n                  {...otherProps}\n                  getOwnerPropsAwareOfPropsPassedToGlobalHeader={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'custom') {\n            const { label, CustomComponent } = item;\n            if (!CustomComponent) return null;\n            return (\n              <StyledToolbarItem\n                role=\"menuitem\"\n                key={`${instanceUID}-ds-toolbar-item-${label}`}\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n                getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                getOwnerPropsArguments={noSlotArguments}\n              >\n                {CustomComponent && <CustomComponent item={item} setRef={setRefIndex} />}\n              </StyledToolbarItem>\n            );\n          }\n\n          const { label, Icon, ...otherProps } = item;\n          return (\n            <StyledToolbarItem\n              role=\"menuitem\"\n              key={`${instanceUID}-ds-toolbar-item-${label}`}\n              data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM}\n              getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n              getOwnerPropsArguments={noSlotArguments}\n            >\n              <StyledButton\n                title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_ITEM_BUTTON}\n                innerRef={setRefIndex}\n                {...getGlobalAttributes(otherProps)}\n                type=\"button\"\n                getOwnerProps={getOwnerPropsAwareOfPropsPassedToGlobalHeader}\n                getOwnerPropsArguments={noSlotArguments}\n              >\n                {Icon && <Icon size=\"m\" />}\n              </StyledButton>\n            </StyledToolbarItem>\n          );\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["label", "otherProps"]
 }

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { createContext } from "react";
+const defaultContext = {};
+const AppPickerCtx = createContext(defaultContext);
+export {
+  AppPickerCtx
+};
+//# sourceMappingURL=AppPickerCTX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPickerCTX.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { useAppPickerCTX } from './useAppPickerCTX.js';\n\nexport interface AppPickerCTX extends ReturnType<typeof useAppPickerCTX> {}\n\n// `{} as AppPickerCTX` rather than `null`, matching DSAppPickerContext and DSGlobalHeaderContext: the\n// provider always wraps the consumers, so a nullable context would only buy every reader a null check\n// that can never be true.\nconst defaultContext = {} as AppPickerCTX;\n\nexport const AppPickerCtx = createContext<AppPickerCTX>(defaultContext);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAQ9B,MAAM,iBAAiB,CAAC;AAEjB,MAAM,eAAe,cAA4B,cAAc;",
+  "names": []
+}

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { AppPickerRenderer } from "./AppPickerRenderer.js";
+import { useAppPickerCTX } from "./useAppPickerCTX.js";
+import { AppPickerCtx } from "./AppPickerCTX.js";
+const AppPickerCTXRenderer = (appPickerProps) => {
+  const appPickerCTX = useAppPickerCTX(appPickerProps);
+  return /* @__PURE__ */ jsx(AppPickerCtx.Provider, { value: appPickerCTX, children: /* @__PURE__ */ jsx(AppPickerRenderer, {}) });
+};
+export {
+  AppPickerCTXRenderer
+};
+//# sourceMappingURL=AppPickerCTXRenderer.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPickerCTXRenderer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { AppPickerRenderer } from './AppPickerRenderer.js';\nimport type { AppPickerT } from './react-desc-prop-types.js';\nimport { useAppPickerCTX } from './useAppPickerCTX.js';\nimport { AppPickerCtx } from './AppPickerCTX.js';\n\nexport const AppPickerCTXRenderer = (appPickerProps: AppPickerT.Props): JSX.Element => {\n  const appPickerCTX = useAppPickerCTX(appPickerProps);\n\n  return (\n    <AppPickerCtx.Provider value={appPickerCTX}>\n      <AppPickerRenderer />\n    </AppPickerCtx.Provider>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACUjB;AAVN,SAAS,yBAAyB;AAElC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAEtB,MAAM,uBAAuB,CAAC,mBAAkD;AACrF,QAAM,eAAe,gBAAgB,cAAc;AAEnD,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,cAC5B,8BAAC,qBAAkB,GACrB;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { DSAppPicker } from "@elliemae/ds-app-picker";
+import React2 from "react";
+import { AppPickerCtx } from "./AppPickerCTX.js";
+import { TriggerDefaultComponent } from "./TriggerDefaultComponent.js";
+const AppPickerRenderer = () => {
+  const { contractProps, id } = React2.useContext(AppPickerCtx);
+  const consumerOwnsTheTrigger = Boolean(contractProps.renderTrigger || contractProps.TriggerComponent);
+  return /* @__PURE__ */ jsx(
+    DSAppPicker,
+    {
+      openAndFocusOnArrowKeys: true,
+      ...consumerOwnsTheTrigger ? {} : { TriggerComponent: TriggerDefaultComponent },
+      ...id ? { id } : {},
+      ...contractProps
+    }
+  );
+};
+export {
+  AppPickerRenderer
+};
+//# sourceMappingURL=AppPickerRenderer.js.map

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"]
+}