@elliemae/ds-global-header 3.25.0-next.2 → 3.25.0-next.4

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.
@@ -56,7 +56,7 @@ const GlobalHeaderToolbar = () => {
56
56
  justifyContent: "center",
57
57
  gutter: "xxs",
58
58
  cols: globalHeaderToolbarGrid,
59
- role: "toolbar",
59
+ role: "menubar",
60
60
  onKeyDown: keyboardNavigation,
61
61
  innerRef: listRef,
62
62
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.LIST,
@@ -77,6 +77,7 @@ const GlobalHeaderToolbar = () => {
77
77
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
78
78
  import_styles.StyledToolbarItem,
79
79
  {
80
+ role: "menuitem",
80
81
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
81
82
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
82
83
  import_outOfTheBox.PopupMenu,
@@ -98,6 +99,7 @@ const GlobalHeaderToolbar = () => {
98
99
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
99
100
  import_styles.StyledToolbarItem,
100
101
  {
102
+ role: "menuitem",
101
103
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
102
104
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
103
105
  import_outOfTheBox.AppPicker,
@@ -116,6 +118,7 @@ const GlobalHeaderToolbar = () => {
116
118
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
117
119
  import_styles.StyledToolbarItem,
118
120
  {
121
+ role: "menuitem",
119
122
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
120
123
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
121
124
  import_outOfTheBox.SearchToggle,
@@ -133,6 +136,7 @@ const GlobalHeaderToolbar = () => {
133
136
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
134
137
  import_styles.StyledToolbarItem,
135
138
  {
139
+ role: "menuitem",
136
140
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
137
141
  children: CustomComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomComponent, { item, setRef: setRef(index) })
138
142
  },
@@ -142,6 +146,7 @@ const GlobalHeaderToolbar = () => {
142
146
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
143
147
  import_styles.StyledToolbarItem,
144
148
  {
149
+ role: "menuitem",
145
150
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
146
151
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
147
152
  import_styles2.StyledButton,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n globalHeaderToolbarGrid,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"toolbar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n >\n {toolbar.map((item, index) => {\n const {\n Icon,\n type,\n onClick,\n onKeyPress,\n CustomComponent,\n label,\n id = '',\n componentProps = {},\n ...otherProps\n } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <PopupMenu\n title={label}\n Icon={Icon}\n onClick={onClick}\n onKeyPress={onKeyPress}\n setRef={setRef(index)}\n id={id}\n componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-app-picker':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <AppPicker\n label={label}\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-search-toggle':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <SearchToggle\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'custom':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRef(index)} />}\n </StyledToolbarItem>\n );\n\n default:\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <StyledButton\n onClick={onClick}\n title={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n id={id}\n role=\"menuitem\"\n innerRef={setRef(index)}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\n }\n })}\n </StyledList>\n </StyledMenubarContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n globalHeaderToolbarGrid,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n >\n {toolbar.map((item, index) => {\n const {\n Icon,\n type,\n onClick,\n onKeyPress,\n CustomComponent,\n label,\n id = '',\n componentProps = {},\n ...otherProps\n } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <PopupMenu\n title={label}\n Icon={Icon}\n onClick={onClick}\n onKeyPress={onKeyPress}\n setRef={setRef(index)}\n id={id}\n componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-app-picker':\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <AppPicker\n label={label}\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-search-toggle':\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <SearchToggle\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'custom':\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRef(index)} />}\n </StyledToolbarItem>\n );\n\n default:\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <StyledButton\n onClick={onClick}\n title={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n id={id}\n role=\"menuitem\"\n innerRef={setRef(index)}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\n }\n })}\n </StyledList>\n </StyledMenubarContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDL;AArDlB,mBAAkC;AAClC,8BAAoC;AACpC,oBAAsE;AACtE,yBAAmD;AACnD,IAAAA,iBAA6B;AAC7B,mCAAsC;AACtC,8BAAyC;AACzC,oCAAuC;AAGhC,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,sDAAuB;AAEvE,SACE,4CAAC,wCAAuB,eAAa,iDAAyB,QAAQ,WAAW,cAAW,WAC1F;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAK;AAAA,MACL,WAAW;AAAA,MACX,UAAU;AAAA,MACV,eAAa,iDAAyB,QAAQ;AAAA,MAE7C,kBAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,cAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL,iBAAiB,CAAC;AAAA,UAClB,GAAG;AAAA,QACL,IAAI;AAEJ,gBAAQ,MAAM;AAAA,UACZ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBAEL,eAAa,iDAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,oBACP;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACA;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cAZK,GAAG,+BAA+B;AAAA,YAazC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBAEL,eAAa,iDAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cATK,GAAG,+BAA+B;AAAA,YAUzC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBAEL,eAAa,iDAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cARK,GAAG,+BAA+B;AAAA,YASzC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBAEL,eAAa,iDAAyB,QAAQ;AAAA,gBAE7C,6BAAmB,4CAAC,mBAAgB,MAAY,QAAQ,OAAO,KAAK,GAAG;AAAA;AAAA,cAHnE,GAAG,+BAA+B;AAAA,YAIzC;AAAA,UAGJ;AACE,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBAEL,eAAa,iDAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,OAAO;AAAA,oBACP,eAAa,iDAAyB,QAAQ;AAAA,oBAC9C;AAAA,oBACA,MAAK;AAAA,oBACL,UAAU,OAAO,KAAK;AAAA,oBACrB,OAAG,6CAAoB,UAAU;AAAA,oBAClC,MAAK;AAAA,oBAEJ,kBAAQ,4CAAC,QAAK,MAAK,KAAI;AAAA;AAAA,gBAC1B;AAAA;AAAA,cAdK,GAAG,+BAA+B;AAAA,YAezC;AAAA,QAEN;AAAA,MACF,CAAC;AAAA;AAAA,EACH,GACF;AAEJ;",
6
6
  "names": ["import_styles"]
7
7
  }
@@ -41,11 +41,6 @@ const useGlobalHeaderToolbar = () => {
41
41
  if (!ref)
42
42
  return;
43
43
  allButtonRefs.current[index] = ref;
44
- if (index === 0 && allButtonRefs.current[0]) {
45
- allButtonRefs.current[0]?.setAttribute?.("tabindex", "0");
46
- } else {
47
- allButtonRefs.current[index]?.setAttribute?.("tabindex", "-1");
48
- }
49
44
  },
50
45
  []
51
46
  );
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/Toolbar/useGlobalHeaderToolbar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { useRef, useCallback } from 'react';\n\nexport const useGlobalHeaderToolbar = () => {\n const allButtonRefs = useRef<HTMLElement[]>([]);\n const listRef = useRef<HTMLDivElement | null>(null);\n\n const setRef = useCallback(\n (index: number) => (ref: HTMLElement | null) => {\n if (!ref) return;\n allButtonRefs.current[index] = ref;\n if (index === 0 && allButtonRefs.current[0]) {\n allButtonRefs.current[0]?.setAttribute?.('tabindex', '0');\n } else {\n allButtonRefs.current[index]?.setAttribute?.('tabindex', '-1');\n }\n },\n [],\n );\n\n const keyboardNavigation = useCallback((e: React.KeyboardEvent) => {\n if (allButtonRefs.current.includes(e.target as HTMLElement)) {\n const currentIndex = allButtonRefs.current.indexOf(e.target as HTMLElement);\n const allRefsLength = allButtonRefs.current.length;\n if (e.key === 'ArrowRight') {\n if (currentIndex < allRefsLength - 1) {\n allButtonRefs.current[currentIndex + 1]?.focus?.();\n } else {\n allButtonRefs.current[0]?.focus?.();\n }\n }\n if (e.key === 'ArrowLeft') {\n if (currentIndex === 0) {\n allButtonRefs.current[allRefsLength - 1]?.focus?.();\n } else {\n allButtonRefs.current[currentIndex - 1]?.focus?.();\n }\n }\n }\n }, []);\n\n return {\n listRef,\n setRef,\n keyboardNavigation,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAE7B,MAAM,yBAAyB,MAAM;AAC1C,QAAM,oBAAgB,qBAAsB,CAAC,CAAC;AAC9C,QAAM,cAAU,qBAA8B,IAAI;AAElD,QAAM,aAAS;AAAA,IACb,CAAC,UAAkB,CAAC,QAA4B;AAC9C,UAAI,CAAC;AAAK;AACV,oBAAc,QAAQ,KAAK,IAAI;AAC/B,UAAI,UAAU,KAAK,cAAc,QAAQ,CAAC,GAAG;AAC3C,sBAAc,QAAQ,CAAC,GAAG,eAAe,YAAY,GAAG;AAAA,MAC1D,OAAO;AACL,sBAAc,QAAQ,KAAK,GAAG,eAAe,YAAY,IAAI;AAAA,MAC/D;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,yBAAqB,0BAAY,CAAC,MAA2B;AACjE,QAAI,cAAc,QAAQ,SAAS,EAAE,MAAqB,GAAG;AAC3D,YAAM,eAAe,cAAc,QAAQ,QAAQ,EAAE,MAAqB;AAC1E,YAAM,gBAAgB,cAAc,QAAQ;AAC5C,UAAI,EAAE,QAAQ,cAAc;AAC1B,YAAI,eAAe,gBAAgB,GAAG;AACpC,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD,OAAO;AACL,wBAAc,QAAQ,CAAC,GAAG,QAAQ;AAAA,QACpC;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,YAAI,iBAAiB,GAAG;AACtB,wBAAc,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,QACpD,OAAO;AACL,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import { useRef, useCallback } from 'react';\n\nexport const useGlobalHeaderToolbar = () => {\n const allButtonRefs = useRef<HTMLElement[]>([]);\n const listRef = useRef<HTMLDivElement | null>(null);\n\n const setRef = useCallback(\n (index: number) => (ref: HTMLElement | null) => {\n if (!ref) return;\n allButtonRefs.current[index] = ref;\n // We started supporting tab key navigation in the toolbar\n // if (index === 0 && allButtonRefs.current[0]) {\n // allButtonRefs.current[0]?.setAttribute?.('tabindex', '0');\n // } else {\n // allButtonRefs.current[index]?.setAttribute?.('tabindex', '-1');\n // }\n },\n [],\n );\n\n const keyboardNavigation = useCallback((e: React.KeyboardEvent) => {\n if (allButtonRefs.current.includes(e.target as HTMLElement)) {\n const currentIndex = allButtonRefs.current.indexOf(e.target as HTMLElement);\n const allRefsLength = allButtonRefs.current.length;\n if (e.key === 'ArrowRight') {\n if (currentIndex < allRefsLength - 1) {\n allButtonRefs.current[currentIndex + 1]?.focus?.();\n } else {\n allButtonRefs.current[0]?.focus?.();\n }\n }\n if (e.key === 'ArrowLeft') {\n if (currentIndex === 0) {\n allButtonRefs.current[allRefsLength - 1]?.focus?.();\n } else {\n allButtonRefs.current[currentIndex - 1]?.focus?.();\n }\n }\n }\n }, []);\n\n return {\n listRef,\n setRef,\n keyboardNavigation,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAE7B,MAAM,yBAAyB,MAAM;AAC1C,QAAM,oBAAgB,qBAAsB,CAAC,CAAC;AAC9C,QAAM,cAAU,qBAA8B,IAAI;AAElD,QAAM,aAAS;AAAA,IACb,CAAC,UAAkB,CAAC,QAA4B;AAC9C,UAAI,CAAC;AAAK;AACV,oBAAc,QAAQ,KAAK,IAAI;AAAA,IAOjC;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,yBAAqB,0BAAY,CAAC,MAA2B;AACjE,QAAI,cAAc,QAAQ,SAAS,EAAE,MAAqB,GAAG;AAC3D,YAAM,eAAe,cAAc,QAAQ,QAAQ,EAAE,MAAqB;AAC1E,YAAM,gBAAgB,cAAc,QAAQ;AAC5C,UAAI,EAAE,QAAQ,cAAc;AAC1B,YAAI,eAAe,gBAAgB,GAAG;AACpC,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD,OAAO;AACL,wBAAc,QAAQ,CAAC,GAAG,QAAQ;AAAA,QACpC;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,YAAI,iBAAiB,GAAG;AACtB,wBAAc,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,QACpD,OAAO;AACL,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/sharedTypes.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type React from 'react';\nimport type { DSAppPicker } from '@elliemae/ds-app-picker';\nimport type { XstyledProps, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nexport declare namespace DSGlobalHeaderInternalsT {\n export interface DefaultProps {\n Logo: React.ComponentType;\n LogoWithBrand: React.ComponentType;\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n toolbar: DSGlobalHeaderInternalsT.ToolbarItem[];\n CustomNavigation: React.ComponentType;\n }\n\n export interface InternalProps extends DefaultProps, Omit<GlobalAttributesT, keyof DefaultProps>, XstyledProps {}\n\n export interface BreadcrumbItem {\n label: string;\n id?: string;\n hasNext?: boolean;\n isSelected?: boolean;\n onClick?: (event?: React.MouseEvent) => void;\n onKeyDown?: (event: React.KeyboardEvent) => void;\n length: number;\n role?: string;\n }\n export interface ToolbarCustomComponentProps {\n item: ToolbarItem;\n role: string;\n setRef: (ref: HTMLElement | null) => void;\n }\n export interface ToolbarItem {\n type?: 'ds-app-picker' | 'ds-popup-menu' | 'ds-search-toggle' | 'custom';\n onKeyPress?: (event: React.KeyboardEvent) => void;\n onClick?: (event: React.MouseEvent) => void;\n id?: string;\n label: string;\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n componentProps?: PopupMenuComponentProps | ToggleSearchComponentProps | AppPickerComponentProps;\n CustomComponent?: React.ComponentType<ToolbarCustomComponentProps>;\n [key: string]: unknown;\n }\n\n interface PopupMenuItem {\n type?: string;\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n label?: string;\n onClick?: (event: React.MouseEvent) => void;\n Content?: React.ComponentType;\n id?: string;\n }\n\n //* ****** Component Props ***** *//\n interface ToggleSearchComponentProps {\n onNext: () => void;\n onPrevious: () => void;\n currentResultIndex: number;\n totalResults: number;\n placeholder: string;\n value: string;\n onChange: () => void;\n onBlur: () => void;\n onClear: () => void;\n isOpen: boolean;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onClick: (event: React.MouseEvent) => void;\n triggerRef: React.MutableRefObject<HTMLButtonElement>;\n searchContainerRef: React.MutableRefObject<HTMLDivElement>;\n }\n\n type AppPickerComponentProps = React.ComponentProps<typeof DSAppPicker> & {\n triggerOnClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n\n interface PopupMenuComponentProps {\n onClickOutside?: (e: MouseEvent | TouchEvent) => void;\n onKeyPress: (event: React.KeyboardEvent) => void;\n popupOnKeyPress: (event: React.KeyboardEvent) => void;\n isOpen: boolean;\n options: PopupMenuContentItem[];\n closeOnClick: boolean;\n }\n\n //* ****** ***** ***** *//\n\n interface SearchToggleProps {\n id: string;\n setRef: (ref: HTMLElement) => void;\n componentProps: ToggleSearchComponentProps;\n }\n\n interface AppPickerProps {\n label: string;\n id: string;\n setRef: (ref: HTMLElement) => void;\n componentProps: AppPickerComponentProps;\n }\n\n export interface PopupMenuContentItem extends Record<string, unknown> {\n type?: string;\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n label?: string;\n onClick?: (event: React.MouseEvent) => void;\n closeOnClick?: boolean;\n Content?: React.ComponentType;\n }\n\n export interface PopupMenuContentProps {\n options: PopupMenuItem[];\n onItemClick: () => void;\n onClose: () => void;\n popupOnKeyPress: (event: React.KeyboardEvent) => void;\n setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n }\n\n export interface PopupProps {\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n id?: string;\n closeOnClick?: boolean;\n onKeyPress?: (event: React.KeyboardEvent) => void;\n title?: string;\n options?: PopupMenuContentItem[];\n onClick?: (event: React.MouseEvent) => void;\n componentProps: PopupMenuComponentProps;\n setRef: (ref: HTMLElement) => void;\n }\n\n export interface Context {\n showIconOnly: boolean;\n setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n instanceUID: string;\n globalHeaderToolbarGrid: string[];\n props: InternalProps;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
4
+ "sourcesContent": ["import type React from 'react';\nimport type { DSAppPicker } from '@elliemae/ds-app-picker';\nimport type { XstyledProps, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nexport declare namespace DSGlobalHeaderInternalsT {\n export interface DefaultProps {\n Logo: React.ComponentType;\n LogoWithBrand: React.ComponentType;\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n toolbar: DSGlobalHeaderInternalsT.ToolbarItem[];\n CustomNavigation: React.ComponentType;\n }\n\n export interface InternalProps extends DefaultProps, Omit<GlobalAttributesT, keyof DefaultProps>, XstyledProps {}\n\n export interface BreadcrumbItem {\n label: string;\n id?: string;\n hasNext?: boolean;\n isSelected?: boolean;\n onClick?: (event?: React.MouseEvent) => void;\n onKeyDown?: (event: React.KeyboardEvent) => void;\n length: number;\n role?: string;\n }\n export interface ToolbarCustomComponentProps {\n item: ToolbarItem;\n role?: string;\n setRef: (ref: HTMLElement | null) => void;\n }\n export interface ToolbarItem {\n type?: 'ds-app-picker' | 'ds-popup-menu' | 'ds-search-toggle' | 'custom';\n onKeyPress?: (event: React.KeyboardEvent) => void;\n onClick?: (event: React.MouseEvent) => void;\n id?: string;\n label: string;\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n componentProps?: PopupMenuComponentProps | ToggleSearchComponentProps | AppPickerComponentProps;\n CustomComponent?: React.ComponentType<ToolbarCustomComponentProps>;\n [key: string]: unknown;\n }\n\n interface PopupMenuItem {\n type?: string;\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n label?: string;\n onClick?: (event: React.MouseEvent) => void;\n Content?: React.ComponentType;\n id?: string;\n }\n\n //* ****** Component Props ***** *//\n interface ToggleSearchComponentProps {\n onNext: () => void;\n onPrevious: () => void;\n currentResultIndex: number;\n totalResults: number;\n placeholder: string;\n value: string;\n onChange: () => void;\n onBlur: () => void;\n onClear: () => void;\n isOpen: boolean;\n onKeyDown: (event: React.KeyboardEvent) => void;\n onClick: (event: React.MouseEvent) => void;\n triggerRef: React.MutableRefObject<HTMLButtonElement>;\n searchContainerRef: React.MutableRefObject<HTMLDivElement>;\n }\n\n type AppPickerComponentProps = React.ComponentProps<typeof DSAppPicker> & {\n triggerOnClick?: React.MouseEventHandler<HTMLButtonElement>;\n };\n\n interface PopupMenuComponentProps {\n onClickOutside?: (e: MouseEvent | TouchEvent) => void;\n onKeyPress: (event: React.KeyboardEvent) => void;\n popupOnKeyPress: (event: React.KeyboardEvent) => void;\n isOpen: boolean;\n options: PopupMenuContentItem[];\n closeOnClick: boolean;\n }\n\n //* ****** ***** ***** *//\n\n interface SearchToggleProps {\n id: string;\n setRef: (ref: HTMLElement) => void;\n componentProps: ToggleSearchComponentProps;\n }\n\n interface AppPickerProps {\n label: string;\n id: string;\n setRef: (ref: HTMLElement) => void;\n componentProps: AppPickerComponentProps;\n }\n\n export interface PopupMenuContentItem extends Record<string, unknown> {\n type?: string;\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n label?: string;\n onClick?: (event: React.MouseEvent) => void;\n closeOnClick?: boolean;\n Content?: React.ComponentType;\n }\n\n export interface PopupMenuContentProps {\n options: PopupMenuItem[];\n onItemClick: () => void;\n onClose: () => void;\n popupOnKeyPress: (event: React.KeyboardEvent) => void;\n setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n }\n\n export interface PopupProps {\n Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n id?: string;\n closeOnClick?: boolean;\n onKeyPress?: (event: React.KeyboardEvent) => void;\n title?: string;\n options?: PopupMenuContentItem[];\n onClick?: (event: React.MouseEvent) => void;\n componentProps: PopupMenuComponentProps;\n setRef: (ref: HTMLElement) => void;\n }\n\n export interface Context {\n showIconOnly: boolean;\n setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n instanceUID: string;\n globalHeaderToolbarGrid: string[];\n props: InternalProps;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
6
6
  "names": []
7
7
  }
@@ -23,7 +23,7 @@ const GlobalHeaderToolbar = () => {
23
23
  justifyContent: "center",
24
24
  gutter: "xxs",
25
25
  cols: globalHeaderToolbarGrid,
26
- role: "toolbar",
26
+ role: "menubar",
27
27
  onKeyDown: keyboardNavigation,
28
28
  innerRef: listRef,
29
29
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.LIST,
@@ -44,6 +44,7 @@ const GlobalHeaderToolbar = () => {
44
44
  return /* @__PURE__ */ jsx(
45
45
  StyledToolbarItem,
46
46
  {
47
+ role: "menuitem",
47
48
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
48
49
  children: /* @__PURE__ */ jsx(
49
50
  PopupMenu,
@@ -65,6 +66,7 @@ const GlobalHeaderToolbar = () => {
65
66
  return /* @__PURE__ */ jsx(
66
67
  StyledToolbarItem,
67
68
  {
69
+ role: "menuitem",
68
70
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
69
71
  children: /* @__PURE__ */ jsx(
70
72
  AppPicker,
@@ -83,6 +85,7 @@ const GlobalHeaderToolbar = () => {
83
85
  return /* @__PURE__ */ jsx(
84
86
  StyledToolbarItem,
85
87
  {
88
+ role: "menuitem",
86
89
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
87
90
  children: /* @__PURE__ */ jsx(
88
91
  SearchToggle,
@@ -100,6 +103,7 @@ const GlobalHeaderToolbar = () => {
100
103
  return /* @__PURE__ */ jsx(
101
104
  StyledToolbarItem,
102
105
  {
106
+ role: "menuitem",
103
107
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
104
108
  children: CustomComponent && /* @__PURE__ */ jsx(CustomComponent, { item, setRef: setRef(index) })
105
109
  },
@@ -109,6 +113,7 @@ const GlobalHeaderToolbar = () => {
109
113
  return /* @__PURE__ */ jsx(
110
114
  StyledToolbarItem,
111
115
  {
116
+ role: "menuitem",
112
117
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
113
118
  children: /* @__PURE__ */ jsx(
114
119
  StyledButton,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n globalHeaderToolbarGrid,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"toolbar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n >\n {toolbar.map((item, index) => {\n const {\n Icon,\n type,\n onClick,\n onKeyPress,\n CustomComponent,\n label,\n id = '',\n componentProps = {},\n ...otherProps\n } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <PopupMenu\n title={label}\n Icon={Icon}\n onClick={onClick}\n onKeyPress={onKeyPress}\n setRef={setRef(index)}\n id={id}\n componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-app-picker':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <AppPicker\n label={label}\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-search-toggle':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <SearchToggle\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'custom':\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRef(index)} />}\n </StyledToolbarItem>\n );\n\n default:\n return (\n <StyledToolbarItem\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <StyledButton\n onClick={onClick}\n title={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n id={id}\n role=\"menuitem\"\n innerRef={setRef(index)}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\n }\n })}\n </StyledList>\n </StyledMenubarContainer>\n );\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n globalHeaderToolbarGrid,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n >\n {toolbar.map((item, index) => {\n const {\n Icon,\n type,\n onClick,\n onKeyPress,\n CustomComponent,\n label,\n id = '',\n componentProps = {},\n ...otherProps\n } = item;\n\n switch (type) {\n case 'ds-popup-menu':\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <PopupMenu\n title={label}\n Icon={Icon}\n onClick={onClick}\n onKeyPress={onKeyPress}\n setRef={setRef(index)}\n id={id}\n componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-app-picker':\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <AppPicker\n label={label}\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'ds-search-toggle':\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <SearchToggle\n id={id}\n setRef={setRef(index)}\n componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n {...otherProps}\n />\n </StyledToolbarItem>\n );\n case 'custom':\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n {CustomComponent && <CustomComponent item={item} setRef={setRef(index)} />}\n </StyledToolbarItem>\n );\n\n default:\n return (\n <StyledToolbarItem\n role=\"menuitem\"\n key={`${instanceUID}-ds-toolbar-item-${label}`}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n >\n <StyledButton\n onClick={onClick}\n title={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n id={id}\n role=\"menuitem\"\n innerRef={setRef(index)}\n {...getGlobalAttributes(otherProps)}\n type=\"button\"\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\n }\n })}\n </StyledList>\n </StyledMenubarContainer>\n );\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -8,11 +8,6 @@ const useGlobalHeaderToolbar = () => {
8
8
  if (!ref)
9
9
  return;
10
10
  allButtonRefs.current[index] = ref;
11
- if (index === 0 && allButtonRefs.current[0]) {
12
- allButtonRefs.current[0]?.setAttribute?.("tabindex", "0");
13
- } else {
14
- allButtonRefs.current[index]?.setAttribute?.("tabindex", "-1");
15
- }
16
11
  },
17
12
  []
18
13
  );
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Toolbar/useGlobalHeaderToolbar.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useCallback } from 'react';\n\nexport const useGlobalHeaderToolbar = () => {\n const allButtonRefs = useRef<HTMLElement[]>([]);\n const listRef = useRef<HTMLDivElement | null>(null);\n\n const setRef = useCallback(\n (index: number) => (ref: HTMLElement | null) => {\n if (!ref) return;\n allButtonRefs.current[index] = ref;\n if (index === 0 && allButtonRefs.current[0]) {\n allButtonRefs.current[0]?.setAttribute?.('tabindex', '0');\n } else {\n allButtonRefs.current[index]?.setAttribute?.('tabindex', '-1');\n }\n },\n [],\n );\n\n const keyboardNavigation = useCallback((e: React.KeyboardEvent) => {\n if (allButtonRefs.current.includes(e.target as HTMLElement)) {\n const currentIndex = allButtonRefs.current.indexOf(e.target as HTMLElement);\n const allRefsLength = allButtonRefs.current.length;\n if (e.key === 'ArrowRight') {\n if (currentIndex < allRefsLength - 1) {\n allButtonRefs.current[currentIndex + 1]?.focus?.();\n } else {\n allButtonRefs.current[0]?.focus?.();\n }\n }\n if (e.key === 'ArrowLeft') {\n if (currentIndex === 0) {\n allButtonRefs.current[allRefsLength - 1]?.focus?.();\n } else {\n allButtonRefs.current[currentIndex - 1]?.focus?.();\n }\n }\n }\n }, []);\n\n return {\n listRef,\n setRef,\n keyboardNavigation,\n };\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,mBAAmB;AAE7B,MAAM,yBAAyB,MAAM;AAC1C,QAAM,gBAAgB,OAAsB,CAAC,CAAC;AAC9C,QAAM,UAAU,OAA8B,IAAI;AAElD,QAAM,SAAS;AAAA,IACb,CAAC,UAAkB,CAAC,QAA4B;AAC9C,UAAI,CAAC;AAAK;AACV,oBAAc,QAAQ,KAAK,IAAI;AAC/B,UAAI,UAAU,KAAK,cAAc,QAAQ,CAAC,GAAG;AAC3C,sBAAc,QAAQ,CAAC,GAAG,eAAe,YAAY,GAAG;AAAA,MAC1D,OAAO;AACL,sBAAc,QAAQ,KAAK,GAAG,eAAe,YAAY,IAAI;AAAA,MAC/D;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,qBAAqB,YAAY,CAAC,MAA2B;AACjE,QAAI,cAAc,QAAQ,SAAS,EAAE,MAAqB,GAAG;AAC3D,YAAM,eAAe,cAAc,QAAQ,QAAQ,EAAE,MAAqB;AAC1E,YAAM,gBAAgB,cAAc,QAAQ;AAC5C,UAAI,EAAE,QAAQ,cAAc;AAC1B,YAAI,eAAe,gBAAgB,GAAG;AACpC,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD,OAAO;AACL,wBAAc,QAAQ,CAAC,GAAG,QAAQ;AAAA,QACpC;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,YAAI,iBAAiB,GAAG;AACtB,wBAAc,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,QACpD,OAAO;AACL,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useCallback } from 'react';\n\nexport const useGlobalHeaderToolbar = () => {\n const allButtonRefs = useRef<HTMLElement[]>([]);\n const listRef = useRef<HTMLDivElement | null>(null);\n\n const setRef = useCallback(\n (index: number) => (ref: HTMLElement | null) => {\n if (!ref) return;\n allButtonRefs.current[index] = ref;\n // We started supporting tab key navigation in the toolbar\n // if (index === 0 && allButtonRefs.current[0]) {\n // allButtonRefs.current[0]?.setAttribute?.('tabindex', '0');\n // } else {\n // allButtonRefs.current[index]?.setAttribute?.('tabindex', '-1');\n // }\n },\n [],\n );\n\n const keyboardNavigation = useCallback((e: React.KeyboardEvent) => {\n if (allButtonRefs.current.includes(e.target as HTMLElement)) {\n const currentIndex = allButtonRefs.current.indexOf(e.target as HTMLElement);\n const allRefsLength = allButtonRefs.current.length;\n if (e.key === 'ArrowRight') {\n if (currentIndex < allRefsLength - 1) {\n allButtonRefs.current[currentIndex + 1]?.focus?.();\n } else {\n allButtonRefs.current[0]?.focus?.();\n }\n }\n if (e.key === 'ArrowLeft') {\n if (currentIndex === 0) {\n allButtonRefs.current[allRefsLength - 1]?.focus?.();\n } else {\n allButtonRefs.current[currentIndex - 1]?.focus?.();\n }\n }\n }\n }, []);\n\n return {\n listRef,\n setRef,\n keyboardNavigation,\n };\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,mBAAmB;AAE7B,MAAM,yBAAyB,MAAM;AAC1C,QAAM,gBAAgB,OAAsB,CAAC,CAAC;AAC9C,QAAM,UAAU,OAA8B,IAAI;AAElD,QAAM,SAAS;AAAA,IACb,CAAC,UAAkB,CAAC,QAA4B;AAC9C,UAAI,CAAC;AAAK;AACV,oBAAc,QAAQ,KAAK,IAAI;AAAA,IAOjC;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,qBAAqB,YAAY,CAAC,MAA2B;AACjE,QAAI,cAAc,QAAQ,SAAS,EAAE,MAAqB,GAAG;AAC3D,YAAM,eAAe,cAAc,QAAQ,QAAQ,EAAE,MAAqB;AAC1E,YAAM,gBAAgB,cAAc,QAAQ;AAC5C,UAAI,EAAE,QAAQ,cAAc;AAC1B,YAAI,eAAe,gBAAgB,GAAG;AACpC,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD,OAAO;AACL,wBAAc,QAAQ,CAAC,GAAG,QAAQ;AAAA,QACpC;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,YAAI,iBAAiB,GAAG;AACtB,wBAAc,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,QACpD,OAAO;AACL,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
@@ -23,7 +23,7 @@ export declare namespace DSGlobalHeaderInternalsT {
23
23
  }
24
24
  interface ToolbarCustomComponentProps {
25
25
  item: ToolbarItem;
26
- role: string;
26
+ role?: string;
27
27
  setRef: (ref: HTMLElement | null) => void;
28
28
  }
29
29
  interface ToolbarItem {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-global-header",
3
- "version": "3.25.0-next.2",
3
+ "version": "3.25.0-next.4",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Global Header",
6
6
  "files": [
@@ -136,19 +136,19 @@
136
136
  },
137
137
  "dependencies": {
138
138
  "uid": "~2.0.1",
139
- "@elliemae/ds-app-picker": "3.25.0-next.2",
140
- "@elliemae/ds-form": "3.25.0-next.2",
141
- "@elliemae/ds-grid": "3.25.0-next.2",
142
- "@elliemae/ds-popperjs": "3.25.0-next.2",
143
- "@elliemae/ds-props-helpers": "3.25.0-next.2",
144
- "@elliemae/ds-system": "3.25.0-next.2",
145
- "@elliemae/ds-utilities": "3.25.0-next.2",
146
- "@elliemae/ds-icons": "3.25.0-next.2"
139
+ "@elliemae/ds-app-picker": "3.25.0-next.4",
140
+ "@elliemae/ds-grid": "3.25.0-next.4",
141
+ "@elliemae/ds-popperjs": "3.25.0-next.4",
142
+ "@elliemae/ds-props-helpers": "3.25.0-next.4",
143
+ "@elliemae/ds-icons": "3.25.0-next.4",
144
+ "@elliemae/ds-system": "3.25.0-next.4",
145
+ "@elliemae/ds-utilities": "3.25.0-next.4",
146
+ "@elliemae/ds-form": "3.25.0-next.4"
147
147
  },
148
148
  "devDependencies": {
149
149
  "@elliemae/pui-cli": "~9.0.0-next.31",
150
150
  "styled-components": "~5.3.9",
151
- "@elliemae/ds-monorepo-devops": "3.25.0-next.2"
151
+ "@elliemae/ds-monorepo-devops": "3.25.0-next.4"
152
152
  },
153
153
  "peerDependencies": {
154
154
  "lodash": "^4.17.21",