@elliemae/ds-global-header 3.2.1-rc.4 → 3.3.0-next.2
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.
- package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js +1 -2
- package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js.map +2 -2
- package/dist/cjs/parts/Toolbar/styles.js +1 -3
- package/dist/cjs/parts/Toolbar/styles.js.map +2 -2
- package/dist/cjs/parts/Toolbar/useGlobalHeaderToolbar.js.map +2 -2
- package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js +1 -2
- package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js.map +2 -2
- package/dist/esm/parts/Toolbar/styles.js +1 -3
- package/dist/esm/parts/Toolbar/styles.js.map +2 -2
- package/dist/esm/parts/Toolbar/useGlobalHeaderToolbar.js.map +2 -2
- package/package.json +8 -8
|
@@ -75,9 +75,8 @@ const GlobalHeaderToolbar = () => {
|
|
|
75
75
|
gutter: "xxs",
|
|
76
76
|
cols: globalHeaderToolbarGrid,
|
|
77
77
|
role: "menubar",
|
|
78
|
-
forwardedAs: "ul",
|
|
79
78
|
onKeyDown: keyboardNavigation,
|
|
80
|
-
listRef,
|
|
79
|
+
ref: listRef,
|
|
81
80
|
"data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.LIST
|
|
82
81
|
}, toolbar.map((item, index) => {
|
|
83
82
|
const _a = item, {
|
|
@@ -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-utilities';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox';\nimport { StyledButton } from '../styles';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\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}>\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,0BAAoC;AACpC,oBAAsE;AACtE,yBAAmD;AACnD,qBAA6B;AAC7B,mCAAsC;AACtC,8BAAyC;AACzC,oCAAuC;AAGhC,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,MACE,6BAAW,kDAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,uBAAuB,0DAAuB;AAEvE,SACE,mDAAC;AAAA,IAAuB,eAAa,iDAAyB,QAAQ;AAAA,KACpE,mDAAC;AAAA,IACC,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,QAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAK;AAAA,IACL,
|
|
4
|
+
"sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-utilities';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox';\nimport { StyledButton } from '../styles';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\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}>\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n ref={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} role=\"menuitem\" 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 ref={setRef(index)}\n {...getGlobalAttributes(otherProps)}\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;ADAvB,mBAAkC;AAClC,0BAAoC;AACpC,oBAAsE;AACtE,yBAAmD;AACnD,qBAA6B;AAC7B,mCAAsC;AACtC,8BAAyC;AACzC,oCAAuC;AAGhC,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,MACE,6BAAW,kDAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,uBAAuB,0DAAuB;AAEvE,SACE,mDAAC;AAAA,IAAuB,eAAa,iDAAyB,QAAQ;AAAA,KACpE,mDAAC;AAAA,IACC,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,QAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAK;AAAA,IACL,WAAW;AAAA,IACX,KAAK;AAAA,IACL,eAAa,iDAAyB,QAAQ;AAAA,KAE7C,QAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,UAUI,WATF;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,iBAAiB,CAAC;AAAA,QAEhB,IADC,uBACD,IADC;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAIF,YAAQ;AAAA,WACD;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,UACA;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE7C,mBAAmB,mDAAC;AAAA,UAAgB;AAAA,UAAY,MAAK;AAAA,UAAW,QAAQ,OAAO,KAAK;AAAA,SAAG,CAC1F;AAAA;AAIF,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,eAAa,iDAAyB,QAAQ;AAAA,UAC9C;AAAA,UACA,MAAK;AAAA,UACL,KAAK,OAAO,KAAK;AAAA,WACb,6CAAoB,UAAU,IAEjC,QAAQ,mDAAC;AAAA,UAAK,MAAK;AAAA,SAAI,CAC1B,CACF;AAAA;AAAA,EAGR,CAAC,CACH,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -38,7 +38,5 @@ const StyledList = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: imp
|
|
|
38
38
|
padding: 0;
|
|
39
39
|
margin: 0;
|
|
40
40
|
`;
|
|
41
|
-
const StyledToolbarItem = (0, import_ds_system.styled)("
|
|
42
|
-
list-style: none;
|
|
43
|
-
`;
|
|
41
|
+
const StyledToolbarItem = (0, import_ds_system.styled)("div", { name: import_theming.DSGlobalHeaderName, slot: import_theming.DSGlobalHeaderSlots.MENUBAR.ITEM })``;
|
|
44
42
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Toolbar/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming';\n\nexport const StyledMenubarContainer = styled('nav', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n})``;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`\n padding: 0;\n margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,qBAAwD;AAEjD,MAAM,yBAAyB,6BAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ;AACpC,CAAC;AAEM,MAAM,aAAa,6BAAO,qBAAM,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAKpG,MAAM,oBAAoB,6BAAO,
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming';\n\nexport const StyledMenubarContainer = styled('nav', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n})``;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`\n padding: 0;\n margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('div', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.ITEM })``;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,qBAAwD;AAEjD,MAAM,yBAAyB,6BAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ;AACpC,CAAC;AAEM,MAAM,aAAa,6BAAO,qBAAM,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAKpG,MAAM,oBAAoB,6BAAO,OAAO,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,QAAQ,KAAK,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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<
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAE7B,MAAM,yBAAyB,MAAM;AAC1C,QAAM,gBAAgB,yBAAsB,CAAC,CAAC;AAC9C,QAAM,UAAU,
|
|
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) => {\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,gBAAgB,yBAAsB,CAAC,CAAC;AAC9C,QAAM,UAAU,yBAA8B,IAAI;AAElD,QAAM,SAAS,8BACb,CAAC,UAAkB,CAAC,QAAqB;AACvC,kBAAc,QAAQ,SAAS;AAC/B,QAAI,UAAU,KAAK,cAAc,QAAQ,IAAI;AAC3C,oBAAc,QAAQ,IAAI,eAAe,YAAY,GAAG;AAAA,IAC1D,OAAO;AACL,oBAAc,QAAQ,QAAQ,eAAe,YAAY,IAAI;AAAA,IAC/D;AAAA,EACF,GACA,CAAC,CACH;AAEA,QAAM,qBAAqB,8BAAY,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,IAAI,QAAQ;AAAA,QACnD,OAAO;AACL,wBAAc,QAAQ,IAAI,QAAQ;AAAA,QACpC;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,YAAI,iBAAiB,GAAG;AACtB,wBAAc,QAAQ,gBAAgB,IAAI,QAAQ;AAAA,QACpD,OAAO;AACL,wBAAc,QAAQ,eAAe,IAAI,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
|
}
|
|
@@ -52,9 +52,8 @@ const GlobalHeaderToolbar = () => {
|
|
|
52
52
|
gutter: "xxs",
|
|
53
53
|
cols: globalHeaderToolbarGrid,
|
|
54
54
|
role: "menubar",
|
|
55
|
-
forwardedAs: "ul",
|
|
56
55
|
onKeyDown: keyboardNavigation,
|
|
57
|
-
listRef,
|
|
56
|
+
ref: listRef,
|
|
58
57
|
"data-testid": DSGlobalHeaderDatatestid.MENUBAR.LIST
|
|
59
58
|
}, toolbar.map((item, index) => {
|
|
60
59
|
const _a = item, {
|
|
@@ -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-utilities';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox';\nimport { StyledButton } from '../styles';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\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}>\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,MACE,WAAW,qBAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,uBAAuB,uBAAuB;AAEvE,SACE,qCAAC;AAAA,IAAuB,eAAa,yBAAyB,QAAQ;AAAA,KACpE,qCAAC;AAAA,IACC,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,QAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAK;AAAA,IACL,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-utilities';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox';\nimport { StyledButton } from '../styles';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\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}>\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n ref={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} role=\"menuitem\" 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 ref={setRef(index)}\n {...getGlobalAttributes(otherProps)}\n >\n {Icon && <Icon size=\"m\" />}\n </StyledButton>\n </StyledToolbarItem>\n );\n }\n })}\n </StyledList>\n </StyledMenubarContainer>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,MACE,WAAW,qBAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,uBAAuB,uBAAuB;AAEvE,SACE,qCAAC;AAAA,IAAuB,eAAa,yBAAyB,QAAQ;AAAA,KACpE,qCAAC;AAAA,IACC,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,QAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAK;AAAA,IACL,WAAW;AAAA,IACX,KAAK;AAAA,IACL,eAAa,yBAAyB,QAAQ;AAAA,KAE7C,QAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,UAUI,WATF;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,iBAAiB,CAAC;AAAA,QAEhB,IADC,uBACD,IADC;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAIF,YAAQ;AAAA,WACD;AACH,eACE,qCAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,yBAAyB,QAAQ;AAAA,WAE9C,qCAAC;AAAA,UACC,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,UACA;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,qCAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,yBAAyB,QAAQ;AAAA,WAE9C,qCAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,qCAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,yBAAyB,QAAQ;AAAA,WAE9C,qCAAC;AAAA,UACC;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,qCAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,yBAAyB,QAAQ;AAAA,WAE7C,mBAAmB,qCAAC;AAAA,UAAgB;AAAA,UAAY,MAAK;AAAA,UAAW,QAAQ,OAAO,KAAK;AAAA,SAAG,CAC1F;AAAA;AAIF,eACE,qCAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,yBAAyB,QAAQ;AAAA,WAE9C,qCAAC;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,eAAa,yBAAyB,QAAQ;AAAA,UAC9C;AAAA,UACA,MAAK;AAAA,UACL,KAAK,OAAO,KAAK;AAAA,WACb,oBAAoB,UAAU,IAEjC,QAAQ,qCAAC;AAAA,UAAK,MAAK;AAAA,SAAI,CAC1B,CACF;AAAA;AAAA,EAGR,CAAC,CACH,CACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,9 +11,7 @@ const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeader
|
|
|
11
11
|
padding: 0;
|
|
12
12
|
margin: 0;
|
|
13
13
|
`;
|
|
14
|
-
const StyledToolbarItem = styled("
|
|
15
|
-
list-style: none;
|
|
16
|
-
`;
|
|
14
|
+
const StyledToolbarItem = styled("div", { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.ITEM })``;
|
|
17
15
|
export {
|
|
18
16
|
StyledList,
|
|
19
17
|
StyledMenubarContainer,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Toolbar/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming';\n\nexport const StyledMenubarContainer = styled('nav', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n})``;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`\n padding: 0;\n margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('
|
|
5
|
-
"mappings": ";AAAA;ACAA;AACA;AACA;AAEO,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB,QAAQ;AACpC,CAAC;AAEM,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAKpG,MAAM,oBAAoB,OAAO,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming';\n\nexport const StyledMenubarContainer = styled('nav', {\n name: DSGlobalHeaderName,\n slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n})``;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`\n padding: 0;\n margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('div', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.ITEM })``;\n"],
|
|
5
|
+
"mappings": ";AAAA;ACAA;AACA;AACA;AAEO,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB,QAAQ;AACpC,CAAC;AAEM,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAKpG,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,QAAQ,KAAK,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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<
|
|
5
|
-
"mappings": ";AAAA;ACAA;AAEO,MAAM,yBAAyB,MAAM;AAC1C,QAAM,gBAAgB,OAAsB,CAAC,CAAC;AAC9C,QAAM,UAAU,
|
|
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) => {\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;ACAA;AAEO,MAAM,yBAAyB,MAAM;AAC1C,QAAM,gBAAgB,OAAsB,CAAC,CAAC;AAC9C,QAAM,UAAU,OAA8B,IAAI;AAElD,QAAM,SAAS,YACb,CAAC,UAAkB,CAAC,QAAqB;AACvC,kBAAc,QAAQ,SAAS;AAC/B,QAAI,UAAU,KAAK,cAAc,QAAQ,IAAI;AAC3C,oBAAc,QAAQ,IAAI,eAAe,YAAY,GAAG;AAAA,IAC1D,OAAO;AACL,oBAAc,QAAQ,QAAQ,eAAe,YAAY,IAAI;AAAA,IAC/D;AAAA,EACF,GACA,CAAC,CACH;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,IAAI,QAAQ;AAAA,QACnD,OAAO;AACL,wBAAc,QAAQ,IAAI,QAAQ;AAAA,QACpC;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,YAAI,iBAAiB,GAAG;AACtB,wBAAc,QAAQ,gBAAgB,IAAI,QAAQ;AAAA,QACpD,OAAO;AACL,wBAAc,QAAQ,eAAe,IAAI,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
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-global-header",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.3.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Global Header",
|
|
6
6
|
"files": [
|
|
@@ -135,13 +135,13 @@
|
|
|
135
135
|
"indent": 4
|
|
136
136
|
},
|
|
137
137
|
"dependencies": {
|
|
138
|
-
"@elliemae/ds-app-picker": "3.
|
|
139
|
-
"@elliemae/ds-form": "3.
|
|
140
|
-
"@elliemae/ds-grid": "3.
|
|
141
|
-
"@elliemae/ds-icons": "3.
|
|
142
|
-
"@elliemae/ds-popperjs": "3.
|
|
143
|
-
"@elliemae/ds-system": "3.
|
|
144
|
-
"@elliemae/ds-utilities": "3.
|
|
138
|
+
"@elliemae/ds-app-picker": "3.3.0-next.2",
|
|
139
|
+
"@elliemae/ds-form": "3.3.0-next.2",
|
|
140
|
+
"@elliemae/ds-grid": "3.3.0-next.2",
|
|
141
|
+
"@elliemae/ds-icons": "3.3.0-next.2",
|
|
142
|
+
"@elliemae/ds-popperjs": "3.3.0-next.2",
|
|
143
|
+
"@elliemae/ds-system": "3.3.0-next.2",
|
|
144
|
+
"@elliemae/ds-utilities": "3.3.0-next.2",
|
|
145
145
|
"uid": "~2.0.0"
|
|
146
146
|
},
|
|
147
147
|
"devDependencies": {
|