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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -35,7 +35,8 @@ __export(constants_exports, {
35
35
  DSGlobalHeaderSlotsFlattened: () => DSGlobalHeaderSlotsFlattened,
36
36
  FONT_DETECTOR: () => FONT_DETECTOR,
37
37
  GLOBAL_HEADER_DATA_TESTID: () => GLOBAL_HEADER_DATA_TESTID,
38
- GLOBAL_HEADER_SLOTS: () => GLOBAL_HEADER_SLOTS
38
+ GLOBAL_HEADER_SLOTS: () => GLOBAL_HEADER_SLOTS,
39
+ SEARCH_TOGGLE_DEFAULT_ARIA_LABEL: () => SEARCH_TOGGLE_DEFAULT_ARIA_LABEL
39
40
  });
40
41
  module.exports = __toCommonJS(constants_exports);
41
42
  var React = __toESM(require("react"));
@@ -167,6 +168,7 @@ const GLOBAL_HEADER_SLOTS = {
167
168
  SEARCH_TOGGLE_TRIGGER_BUTTON: "searchtoggle-trigger-button",
168
169
  SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: "searchtoggle-expanded-content-wrapper"
169
170
  };
171
+ const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = "Search. Press Tab twice to reach the result navigation.";
170
172
  const GLOBAL_HEADER_DATA_TESTID = {
171
173
  ...(0, import_ds_system.slotObjectToDataTestIds)(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),
172
174
  // this are the "hardcoded" data-testid that maps to the slots in the component that we keep as they were for backwards compatibility
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,qBAAqB;AAY3B,MAAM,sBAAsB;AAAA,EACjC,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,WAAW;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,IACT,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,iBAAiB;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,WAAW;AAAA,MACX,mBAAmB;AAAA,IACrB;AAAA,IACA,eAAe;AAAA,MACb,WAAW;AAAA,IACb;AAAA,EACF;AACF;AAIO,MAAM,+BAA+B;AAAA,EAC1C,WAAW,oBAAoB;AAAA,EAC/B,gBAAgB,oBAAoB,KAAK;AAAA,EACzC,sBAAsB,oBAAoB,WAAW;AAAA,EACrD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,oBAAoB,oBAAoB,WAAW;AAAA,EACnD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,iBAAiB,oBAAoB,WAAW;AAAA,EAChD,sBAAsB,oBAAoB,WAAW;AAAA,EACrD,4BAA4B,oBAAoB,WAAW;AAAA,EAC3D,mBAAmB,oBAAoB,QAAQ;AAAA,EAC/C,cAAc,oBAAoB,QAAQ;AAAA,EAC1C,cAAc,oBAAoB,QAAQ;AAAA,EAC1C,qBAAqB,oBAAoB,QAAQ;AAAA,EACjD,yBAAyB,oBAAoB,QAAQ,WAAW;AAAA,EAChE,yBAAyB,oBAAoB,QAAQ,WAAW;AAAA,EAChE,gCAAgC,oBAAoB,QAAQ,WAAW;AAAA,EACvE,8BAA8B,oBAAoB,QAAQ,WAAW;AAAA,EACrE,sCAAsC,oBAAoB,QAAQ,WAAW;AAAA,EAC7E,iCAAiC,oBAAoB,QAAQ,cAAc;AAC7E;AAMO,MAAM,2BAA2B;AAAA,EACtC,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,WAAW;AAAA,IACX,iBAAiB;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,IACP,WAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,WAAW;AAAA,IACb;AAAA,IACA,eAAe;AAAA,MACb,WAAW;AAAA,MACX,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAOO,MAAM,oCAAoC;AAAA,EAC/C,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,sBAAsB;AAAA,EACtB,4BAA4B;AAAA,EAC5B,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,qBAAqB;AAAA,EACrB,yBAAyB;AAAA,EACzB,yBAAyB;AAAA,EACzB,gCAAgC;AAAA,EAChC,+BAA+B;AAAA,EAC/B,8BAA8B;AAAA,EAC9B,iCAAiC;AAAA,EACjC,mCAAmC;AACrC;AAKO,MAAM,gBAAgB;AAAA,EAC3B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAGO,MAAM,sBAAsB;AAAA,EACjC,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,kCAAkC;AAAA,EAClC,+BAA+B;AAAA,EAC/B,oCAAoC;AAAA,EACpC,+BAA+B;AAAA,EAC/B,+BAA+B;AAAA,EAC/B,yBAAyB;AAAA,EACzB,8BAA8B;AAAA,EAC9B,wCAAwC;AAC1C;AAEO,MAAM,4BAA4B;AAAA,EACvC,OAAG,0CAAwB,oBAAoB,mBAAmB;AAAA;AAAA,EAElE,GAAG;AAAA,EACH,8BAA8B;AAChC;",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -198,6 +198,7 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
198
198
  getOwnerProps,
199
199
  getOwnerPropsArguments,
200
200
  id: inputId,
201
+ "aria-label": import_constants.SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,
201
202
  placeholder: placeholder || "Search...",
202
203
  value,
203
204
  clearable: true,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
@@ -69,7 +69,7 @@ const StyledResultTracker = (0, import_ds_system.styled)("div", {
69
69
  slot: import_constants.GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_TEXT
70
70
  })`
71
71
  padding: 0 8px;
72
- color: #a2a9b6; // this is color picked from the placeholder, specs doesn't specify
72
+ color: ${({ theme }) => theme.colors.neutral["500"]};
73
73
  white-space: nowrap;
74
74
  word-spacing: 2px;
75
75
  outline: none;
@@ -126,6 +126,7 @@ const SearchToggleSpinButton = import_react.default.memo((props) => {
126
126
  getOwnerProps,
127
127
  getOwnerPropsArguments,
128
128
  role: "spinbutton",
129
+ "aria-label": "Search results",
129
130
  "aria-valuenow": currentResultIndex + 1,
130
131
  "aria-valuemin": 1,
131
132
  "aria-valuemax": totalResults,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggleSpinButton.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
@@ -127,6 +127,7 @@ const GLOBAL_HEADER_SLOTS = {
127
127
  SEARCH_TOGGLE_TRIGGER_BUTTON: "searchtoggle-trigger-button",
128
128
  SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: "searchtoggle-expanded-content-wrapper"
129
129
  };
130
+ const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = "Search. Press Tab twice to reach the result navigation.";
130
131
  const GLOBAL_HEADER_DATA_TESTID = {
131
132
  ...slotObjectToDataTestIds(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),
132
133
  // 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 {
141
142
  DSGlobalHeaderSlotsFlattened,
142
143
  FONT_DETECTOR,
143
144
  GLOBAL_HEADER_DATA_TESTID,
144
- GLOBAL_HEADER_SLOTS
145
+ GLOBAL_HEADER_SLOTS,
146
+ SEARCH_TOGGLE_DEFAULT_ARIA_LABEL
145
147
  };
146
148
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
4
- "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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -7,7 +7,12 @@ import { Search } from "@elliemae/ds-icons";
7
7
  import { css, mergeRefs, styled } from "@elliemae/ds-system";
8
8
  import React2 from "react";
9
9
  import { DSGlobalHeaderContext } from "../../../../DSGlobalHeaderContext.js";
10
- import { DSGlobalHeaderName, GLOBAL_HEADER_DATA_TESTID, GLOBAL_HEADER_SLOTS } from "../../../../constants/index.js";
10
+ import {
11
+ DSGlobalHeaderName,
12
+ GLOBAL_HEADER_DATA_TESTID,
13
+ GLOBAL_HEADER_SLOTS,
14
+ SEARCH_TOGGLE_DEFAULT_ARIA_LABEL
15
+ } from "../../../../constants/index.js";
11
16
  import { SearchToggleSpinButton } from "./SearchToggleSpinButton.js";
12
17
  import { useSearchToggle } from "./useSearchToggle.js";
13
18
  const StyledNavSearchBoxContainer = styled("div", {
@@ -165,6 +170,7 @@ const SearchToggle = (outOfTheBoxDrilledDownProps) => {
165
170
  getOwnerProps,
166
171
  getOwnerPropsArguments,
167
172
  id: inputId,
173
+ "aria-label": SEARCH_TOGGLE_DEFAULT_ARIA_LABEL,
168
174
  placeholder: placeholder || "Search...",
169
175
  value,
170
176
  clearable: true,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx"],
4
- "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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
@@ -36,7 +36,7 @@ const StyledResultTracker = styled("div", {
36
36
  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_TEXT
37
37
  })`
38
38
  padding: 0 8px;
39
- color: #a2a9b6; // this is color picked from the placeholder, specs doesn't specify
39
+ color: ${({ theme }) => theme.colors.neutral["500"]};
40
40
  white-space: nowrap;
41
41
  word-spacing: 2px;
42
42
  outline: none;
@@ -93,6 +93,7 @@ const SearchToggleSpinButton = React2.memo((props) => {
93
93
  getOwnerProps,
94
94
  getOwnerPropsArguments,
95
95
  role: "spinbutton",
96
+ "aria-label": "Search results",
96
97
  "aria-valuenow": currentResultIndex + 1,
97
98
  "aria-valuemin": 1,
98
99
  "aria-valuemax": totalResults,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggleSpinButton.tsx"],
4
- "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"],
5
- "mappings": "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",
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": ["React"]
7
7
  }
@@ -151,6 +151,7 @@ export declare const GLOBAL_HEADER_SLOTS: {
151
151
  readonly MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: string;
152
152
  readonly MENUBAR_SEARCH_TOGGLE_CONTAINER: string;
153
153
  };
154
+ export declare const SEARCH_TOGGLE_DEFAULT_ARIA_LABEL = "Search. Press Tab twice to reach the result navigation.";
154
155
  export declare const GLOBAL_HEADER_DATA_TESTID: {
155
156
  SEARCH_TOGGLE_TRIGGER_BUTTON: string;
156
157
  CONTAINER: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-global-header",
3
- "version": "3.70.0-next.44",
3
+ "version": "3.70.0-next.46",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Global Header",
6
6
  "files": [
@@ -37,21 +37,21 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "uid": "^2.0.2",
40
- "@elliemae/ds-app-picker": "3.70.0-next.44",
41
- "@elliemae/ds-button-v2": "3.70.0-next.44",
42
- "@elliemae/ds-grid": "3.70.0-next.44",
43
- "@elliemae/ds-floating-context": "3.70.0-next.44",
44
- "@elliemae/ds-hooks-fontsize-media": "3.70.0-next.44",
45
- "@elliemae/ds-form-input-text": "3.70.0-next.44",
46
- "@elliemae/ds-props-helpers": "3.70.0-next.44",
47
- "@elliemae/ds-icons": "3.70.0-next.44",
48
- "@elliemae/ds-system": "3.70.0-next.44"
40
+ "@elliemae/ds-app-picker": "3.70.0-next.46",
41
+ "@elliemae/ds-button-v2": "3.70.0-next.46",
42
+ "@elliemae/ds-form-input-text": "3.70.0-next.46",
43
+ "@elliemae/ds-grid": "3.70.0-next.46",
44
+ "@elliemae/ds-floating-context": "3.70.0-next.46",
45
+ "@elliemae/ds-hooks-fontsize-media": "3.70.0-next.46",
46
+ "@elliemae/ds-icons": "3.70.0-next.46",
47
+ "@elliemae/ds-props-helpers": "3.70.0-next.46",
48
+ "@elliemae/ds-system": "3.70.0-next.46"
49
49
  },
50
50
  "devDependencies": {
51
51
  "jest": "^30.0.0",
52
52
  "styled-components": "~5.3.9",
53
- "@elliemae/ds-monorepo-devops": "3.70.0-next.44",
54
- "@elliemae/ds-test-utils": "3.70.0-next.44"
53
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.46",
54
+ "@elliemae/ds-test-utils": "3.70.0-next.46"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "lodash-es": "^4.18.1",