@elliemae/ds-global-header 3.70.0-next.45 → 3.70.0-next.46

package/dist/cjs/constants/index.js

@@ -35,7 +35,8 @@ __export(constants_exports, {
   DSGlobalHeaderSlotsFlattened: () => DSGlobalHeaderSlotsFlattened,
   FONT_DETECTOR: () => FONT_DETECTOR,
   GLOBAL_HEADER_DATA_TESTID: () => GLOBAL_HEADER_DATA_TESTID,
-  GLOBAL_HEADER_SLOTS: () => GLOBAL_HEADER_SLOTS
+  GLOBAL_HEADER_SLOTS: () => GLOBAL_HEADER_SLOTS,
+  SEARCH_TOGGLE_DEFAULT_ARIA_LABEL: () => SEARCH_TOGGLE_DEFAULT_ARIA_LABEL
 });
 module.exports = __toCommonJS(constants_exports);
 var React = __toESM(require("react"));
@@ -167,6 +168,7 @@ const GLOBAL_HEADER_SLOTS = {
   SEARCH_TOGGLE_TRIGGER_BUTTON: "searchtoggle-trigger-button",
   SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: "searchtoggle-expanded-content-wrapper"
 };
+const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = "Search. Press Tab twice to reach the result navigation.";
 const GLOBAL_HEADER_DATA_TESTID = {
   ...(0, import_ds_system.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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["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\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};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -198,6 +198,7 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
                   getOwnerProps,
                   getOwnerPropsArguments,
                   id: inputId,
+                  "aria-label": import_constants.SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,
                   placeholder: placeholder || "Search...",
                   value,
                   clearable: true,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["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 {\n  DSGlobalHeaderName,\n  GLOBAL_HEADER_DATA_TESTID,\n  GLOBAL_HEADER_SLOTS,\n  SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,\n} 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            // 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            onKeyDown={handleInputKeyDown}\n            onClear={onClear}\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -69,7 +69,7 @@ const StyledResultTracker = (0, import_ds_system.styled)("div", {
   slot: import_constants.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;
@@ -126,6 +126,7 @@ const SearchToggleSpinButton = import_react.default.memo((props) => {
         getOwnerProps,
         getOwnerPropsArguments,
         role: "spinbutton",
+        "aria-label": "Search results",
         "aria-valuenow": currentResultIndex + 1,
         "aria-valuemin": 1,
         "aria-valuemax": totalResults,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggleSpinButton.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["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: ${({ 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 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-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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -127,6 +127,7 @@ const GLOBAL_HEADER_SLOTS = {
   SEARCH_TOGGLE_TRIGGER_BUTTON: "searchtoggle-trigger-button",
   SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: "searchtoggle-expanded-content-wrapper"
 };
+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
@@ -141,6 +142,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      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\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};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -7,7 +7,12 @@ import { Search } from "@elliemae/ds-icons";
 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 { useSearchToggle } from "./useSearchToggle.js";
 const StyledNavSearchBoxContainer = styled("div", {
@@ -165,6 +170,7 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
                   getOwnerProps,
                   getOwnerPropsArguments,
                   id: inputId,
+                  "aria-label": SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,
                   placeholder: placeholder || "Search...",
                   value,
                   clearable: true,

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 { css, mergeRefs, styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSGlobalHeaderContext } from '../../../../DSGlobalHeaderContext.js';\nimport {\n  DSGlobalHeaderName,\n  GLOBAL_HEADER_DATA_TESTID,\n  GLOBAL_HEADER_SLOTS,\n  SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,\n} 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            // 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            onKeyDown={handleInputKeyDown}\n            onClear={onClear}\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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",
   "names": ["React"]
 }

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

@@ -36,7 +36,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;
@@ -93,6 +93,7 @@ const SearchToggleSpinButton = React2.memo((props) => {
         getOwnerProps,
         getOwnerPropsArguments,
         role: "spinbutton",
+        "aria-label": "Search results",
         "aria-valuenow": currentResultIndex + 1,
         "aria-valuemin": 1,
         "aria-valuemax": totalResults,

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 { 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: ${({ 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 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-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 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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",
   "names": ["React"]
 }

package/dist/types/constants/index.d.ts

@@ -151,6 +151,7 @@ export declare const GLOBAL_HEADER_SLOTS: {
     readonly MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: string;
     readonly MENUBAR_SEARCH_TOGGLE_CONTAINER: string;
 };
+export declare const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = "Search. Press Tab twice to reach the result navigation.";
 export declare const GLOBAL_HEADER_DATA_TESTID: {
     SEARCH_TOGGLE_TRIGGER_BUTTON: string;
     CONTAINER: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-global-header",
-  "version": "3.70.0-next.45",
+  "version": "3.70.0-next.46",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Global Header",
   "files": [
@@ -37,21 +37,21 @@
   },
   "dependencies": {
     "uid": "^2.0.2",
-    "@elliemae/ds-app-picker": "3.70.0-next.45",
-    "@elliemae/ds-button-v2": "3.70.0-next.45",
-    "@elliemae/ds-form-input-text": "3.70.0-next.45",
-    "@elliemae/ds-hooks-fontsize-media": "3.70.0-next.45",
-    "@elliemae/ds-grid": "3.70.0-next.45",
-    "@elliemae/ds-system": "3.70.0-next.45",
-    "@elliemae/ds-icons": "3.70.0-next.45",
-    "@elliemae/ds-floating-context": "3.70.0-next.45",
-    "@elliemae/ds-props-helpers": "3.70.0-next.45"
+    "@elliemae/ds-app-picker": "3.70.0-next.46",
+    "@elliemae/ds-button-v2": "3.70.0-next.46",
+    "@elliemae/ds-form-input-text": "3.70.0-next.46",
+    "@elliemae/ds-grid": "3.70.0-next.46",
+    "@elliemae/ds-floating-context": "3.70.0-next.46",
+    "@elliemae/ds-hooks-fontsize-media": "3.70.0-next.46",
+    "@elliemae/ds-icons": "3.70.0-next.46",
+    "@elliemae/ds-props-helpers": "3.70.0-next.46",
+    "@elliemae/ds-system": "3.70.0-next.46"
   },
   "devDependencies": {
     "jest": "^30.0.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.70.0-next.45",
-    "@elliemae/ds-test-utils": "3.70.0-next.45"
+    "@elliemae/ds-monorepo-devops": "3.70.0-next.46",
+    "@elliemae/ds-test-utils": "3.70.0-next.46"
   },
   "peerDependencies": {
     "lodash-es": "^4.18.1",