@elliemae/ds-global-header 3.51.0-rc.9 → 3.51.1

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.
Files changed (38) hide show
  1. package/dist/cjs/DSGlobalHeader.js +19 -7
  2. package/dist/cjs/DSGlobalHeader.js.map +2 -2
  3. package/dist/cjs/config/useGlobalHeader.js +4 -2
  4. package/dist/cjs/config/useGlobalHeader.js.map +2 -2
  5. package/dist/cjs/exported-related/DSGlobalHeaderDatatestid.js +4 -2
  6. package/dist/cjs/exported-related/DSGlobalHeaderDatatestid.js.map +2 -2
  7. package/dist/cjs/index.js +7 -7
  8. package/dist/cjs/index.js.map +1 -1
  9. package/dist/cjs/parts/Breadcrumb/GlobalHeaderBreadcrumb.js +12 -3
  10. package/dist/cjs/parts/Breadcrumb/GlobalHeaderBreadcrumb.js.map +2 -2
  11. package/dist/cjs/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js +3 -1
  12. package/dist/cjs/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js.map +2 -2
  13. package/dist/cjs/parts/Logo/GlobalHeaderLogo.js +3 -1
  14. package/dist/cjs/parts/Logo/GlobalHeaderLogo.js.map +2 -2
  15. package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js +8 -0
  16. package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js.map +2 -2
  17. package/dist/cjs/sharedTypes.js.map +1 -1
  18. package/dist/esm/DSGlobalHeader.js +19 -7
  19. package/dist/esm/DSGlobalHeader.js.map +2 -2
  20. package/dist/esm/config/useGlobalHeader.js +5 -3
  21. package/dist/esm/config/useGlobalHeader.js.map +2 -2
  22. package/dist/esm/exported-related/DSGlobalHeaderDatatestid.js +4 -2
  23. package/dist/esm/exported-related/DSGlobalHeaderDatatestid.js.map +2 -2
  24. package/dist/esm/index.js +2 -2
  25. package/dist/esm/index.js.map +1 -1
  26. package/dist/esm/parts/Breadcrumb/GlobalHeaderBreadcrumb.js +12 -3
  27. package/dist/esm/parts/Breadcrumb/GlobalHeaderBreadcrumb.js.map +2 -2
  28. package/dist/esm/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js +3 -1
  29. package/dist/esm/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js.map +2 -2
  30. package/dist/esm/parts/Logo/GlobalHeaderLogo.js +3 -1
  31. package/dist/esm/parts/Logo/GlobalHeaderLogo.js.map +2 -2
  32. package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js +8 -0
  33. package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js.map +2 -2
  34. package/dist/types/config/useGlobalHeader.d.ts +4 -0
  35. package/dist/types/exported-related/DSGlobalHeaderDatatestid.d.ts +2 -0
  36. package/dist/types/parts/Breadcrumb/useGlobalHeaderBreadcrumb.d.ts +4 -0
  37. package/dist/types/sharedTypes.d.ts +4 -0
  38. package/package.json +10 -10
package/dist/cjs/DSGlobalHeader.js CHANGED
@@ -54,6 +54,7 @@ const DSGlobalHeader = (props) => {
54
54
  const ctx = (0, import_useGlobalHeader.useGlobalHeader)(props);
55
55
  const {
56
56
  props: { toolbar },
57
+ ownerProps,
57
58
  fontDetector
58
59
  } = ctx;
59
60
  const propsWithDefaults = ctx.props;
@@ -81,13 +82,24 @@ const DSGlobalHeader = (props) => {
81
82
  }
82
83
  return ["auto", "1fr"];
83
84
  }, [layoutMode]);
84
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.Container, { ...globalAttrs, ...xstyledAttrs, forwardedAs: "header", "data-testid": "ds-global-header", cols: cols2, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DSGlobalHeaderContext.DSGlobalHeaderContext.Provider, { value: ctx, children: [
85
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols, children: [
86
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderLogo.GlobalHeaderLogo, {}),
87
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, {})
88
- ] }),
89
- toolbar.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderToolbar.GlobalHeaderToolbar, {}) : null
90
- ] }) });
85
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
86
+ import_styles.Container,
87
+ {
88
+ ...globalAttrs,
89
+ ...xstyledAttrs,
90
+ ...ownerProps,
91
+ forwardedAs: "header",
92
+ "data-testid": "ds-global-header",
93
+ cols: cols2,
94
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DSGlobalHeaderContext.DSGlobalHeaderContext.Provider, { value: ctx, children: [
95
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_grid.Grid, { cols, children: [
96
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderLogo.GlobalHeaderLogo, {}),
97
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, {})
98
+ ] }),
99
+ toolbar.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderToolbar.GlobalHeaderToolbar, {}) : null
100
+ ] })
101
+ }
102
+ );
91
103
  };
92
104
  DSGlobalHeader.displayName = import_exported_related.DSGlobalHeaderName;
93
105
  const DSGlobalHeaderWithSchema = (0, import_ds_props_helpers.describe)(DSGlobalHeader).description("DSGlobalHeader");
package/dist/cjs/DSGlobalHeader.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSGlobalHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useMemo } from 'react';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes, type DSGlobalHeaderT } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderName } from './exported-related/index.js';\nimport { FONT_DETECTOR } from './config/constants.js';\nimport { Container } from './parts/styles.js';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n useValidateProps(props);\n const ctx = useGlobalHeader(props);\n const {\n props: { toolbar },\n fontDetector,\n } = ctx;\n const propsWithDefaults = ctx.props;\n const globalAttrs = useGetGlobalAttributes<DSGlobalHeaderT.Props, HTMLDivElement, DSGridT.Props>(propsWithDefaults);\n const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n const layoutMode = useGetLayoutMode();\n\n const cols2 = useMemo(() => {\n if (['l'].includes(layoutMode!)) {\n return ['1fr', 'auto'];\n }\n if (['m', 's'].includes(layoutMode!)) {\n return ['1fr'];\n }\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n if (fontDetector > FONT_DETECTOR.SMALL) {\n return ['auto', '1fr'];\n }\n return ['1fr', 'auto'];\n }, [fontDetector, layoutMode]);\n\n const cols = useMemo(() => {\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n return ['auto', '1fr'];\n }, [layoutMode]);\n\n return (\n <Container {...globalAttrs} {...xstyledAttrs} forwardedAs=\"header\" data-testid=\"ds-global-header\" cols={cols2}>\n <DSGlobalHeaderContext.Provider value={ctx}>\n <Grid cols={cols}>\n <GlobalHeaderLogo />\n <GlobalHeaderBreadcrumb />\n </Grid>\n {toolbar.length ? <GlobalHeaderToolbar /> : null}\n </DSGlobalHeaderContext.Provider>\n </Container>\n );\n};\n\nDSGlobalHeader.displayName = DSGlobalHeaderName;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader).description('DSGlobalHeader');\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDf;AArDR,mBAA+B;AAC/B,qBAAmC;AACnC,uBAAiC;AACjC,8BAAqE;AACrE,mCAAgD;AAChD,8BAAiC;AACjC,oCAAuC;AACvC,iCAAoC;AACpC,mCAAsC;AACtC,6BAAgC;AAChC,8BAAiC;AACjC,8BAAmC;AACnC,uBAA8B;AAC9B,oBAA0B;AAE1B,MAAM,iBAAiB,CAAC,UAA8C;AACpE,gDAAiB,KAAK;AACtB,QAAM,UAAM,wCAAgB,KAAK;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,oBAAoB,IAAI;AAC9B,QAAM,kBAAc,gDAA6E,iBAAiB;AAClH,QAAM,mBAAe,4CAAmB,iBAAiB;AACzD,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,YAAQ,sBAAQ,MAAM;AAC1B,QAAI,CAAC,GAAG,EAAE,SAAS,UAAW,GAAG;AAC/B,aAAO,CAAC,OAAO,MAAM;AAAA,IACvB;AACA,QAAI,CAAC,KAAK,GAAG,EAAE,SAAS,UAAW,GAAG;AACpC,aAAO,CAAC,KAAK;AAAA,IACf;AACA,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,QAAI,eAAe,+BAAc,OAAO;AACtC,aAAO,CAAC,QAAQ,KAAK;AAAA,IACvB;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,CAAC;AAE7B,QAAM,WAAO,sBAAQ,MAAM;AACzB,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,WAAO,CAAC,QAAQ,KAAK;AAAA,EACvB,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,4CAAC,2BAAW,GAAG,aAAc,GAAG,cAAc,aAAY,UAAS,eAAY,oBAAmB,MAAM,OACtG,uDAAC,mDAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,iDAAC,uBAAK,MACJ;AAAA,kDAAC,4CAAiB;AAAA,MAClB,4CAAC,wDAAuB;AAAA,OAC1B;AAAA,IACC,QAAQ,SAAS,4CAAC,kDAAoB,IAAK;AAAA,KAC9C,GACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc,EAAE,YAAY,gBAAgB;AACtF,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
4
+ "sourcesContent": ["import React, { useMemo } from 'react';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes, type DSGlobalHeaderT } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderName } from './exported-related/index.js';\nimport { FONT_DETECTOR } from './config/constants.js';\nimport { Container } from './parts/styles.js';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n useValidateProps(props);\n const ctx = useGlobalHeader(props);\n const {\n props: { toolbar },\n ownerProps,\n fontDetector,\n } = ctx;\n const propsWithDefaults = ctx.props;\n const globalAttrs = useGetGlobalAttributes<DSGlobalHeaderT.Props, HTMLDivElement, DSGridT.Props>(propsWithDefaults);\n const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n const layoutMode = useGetLayoutMode();\n\n const cols2 = useMemo(() => {\n if (['l'].includes(layoutMode!)) {\n return ['1fr', 'auto'];\n }\n if (['m', 's'].includes(layoutMode!)) {\n return ['1fr'];\n }\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n if (fontDetector > FONT_DETECTOR.SMALL) {\n return ['auto', '1fr'];\n }\n return ['1fr', 'auto'];\n }, [fontDetector, layoutMode]);\n\n const cols = useMemo(() => {\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n return ['auto', '1fr'];\n }, [layoutMode]);\n\n return (\n <Container\n {...globalAttrs}\n {...xstyledAttrs}\n {...ownerProps}\n forwardedAs=\"header\"\n data-testid=\"ds-global-header\"\n cols={cols2}\n >\n <DSGlobalHeaderContext.Provider value={ctx}>\n <Grid cols={cols}>\n <GlobalHeaderLogo />\n <GlobalHeaderBreadcrumb />\n </Grid>\n {toolbar.length ? <GlobalHeaderToolbar /> : null}\n </DSGlobalHeaderContext.Provider>\n </Container>\n );\n};\n\nDSGlobalHeader.displayName = DSGlobalHeaderName;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader).description('DSGlobalHeader');\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6Df;AA7DR,mBAA+B;AAC/B,qBAAmC;AACnC,uBAAiC;AACjC,8BAAqE;AACrE,mCAAgD;AAChD,8BAAiC;AACjC,oCAAuC;AACvC,iCAAoC;AACpC,mCAAsC;AACtC,6BAAgC;AAChC,8BAAiC;AACjC,8BAAmC;AACnC,uBAA8B;AAC9B,oBAA0B;AAE1B,MAAM,iBAAiB,CAAC,UAA8C;AACpE,gDAAiB,KAAK;AACtB,QAAM,UAAM,wCAAgB,KAAK;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,oBAAoB,IAAI;AAC9B,QAAM,kBAAc,gDAA6E,iBAAiB;AAClH,QAAM,mBAAe,4CAAmB,iBAAiB;AACzD,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,YAAQ,sBAAQ,MAAM;AAC1B,QAAI,CAAC,GAAG,EAAE,SAAS,UAAW,GAAG;AAC/B,aAAO,CAAC,OAAO,MAAM;AAAA,IACvB;AACA,QAAI,CAAC,KAAK,GAAG,EAAE,SAAS,UAAW,GAAG;AACpC,aAAO,CAAC,KAAK;AAAA,IACf;AACA,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,QAAI,eAAe,+BAAc,OAAO;AACtC,aAAO,CAAC,QAAQ,KAAK;AAAA,IACvB;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,CAAC;AAE7B,QAAM,WAAO,sBAAQ,MAAM;AACzB,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,WAAO,CAAC,QAAQ,KAAK;AAAA,EACvB,GAAG,CAAC,UAAU,CAAC;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,aAAY;AAAA,MACZ,eAAY;AAAA,MACZ,MAAM;AAAA,MAEN,uDAAC,mDAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,qDAAC,uBAAK,MACJ;AAAA,sDAAC,4CAAiB;AAAA,UAClB,4CAAC,wDAAuB;AAAA,WAC1B;AAAA,QACC,QAAQ,SAAS,4CAAC,kDAAoB,IAAK;AAAA,SAC9C;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc,EAAE,YAAY,gBAAgB;AACtF,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
6
6
  "names": []
7
7
  }
package/dist/cjs/config/useGlobalHeader.js CHANGED
@@ -46,6 +46,7 @@ const useGlobalHeader = (props) => {
46
46
  () => new Array(propsWithDefaults.toolbar.length).fill("auto"),
47
47
  [propsWithDefaults.toolbar]
48
48
  );
49
+ const ownerProps = (0, import_ds_props_helpers.useOwnerProps)(props);
49
50
  const fontDetector = (0, import_ds_hooks_fontsize_media.useFontsizeMedia)({
50
51
  largeFont: import_constants.FONT_DETECTOR.LARGE,
51
52
  mediumFont: import_constants.FONT_DETECTOR.MEDIUM,
@@ -58,9 +59,10 @@ const useGlobalHeader = (props) => {
58
59
  setShowIconOnly,
59
60
  instanceUID,
60
61
  globalHeaderToolbarGrid,
61
- fontDetector
62
+ fontDetector,
63
+ ownerProps
62
64
  }),
63
- [propsWithDefaults, showIconOnly, instanceUID, fontDetector, globalHeaderToolbarGrid]
65
+ [propsWithDefaults, ownerProps, showIconOnly, instanceUID, fontDetector, globalHeaderToolbarGrid]
64
66
  );
65
67
  };
66
68
  //# sourceMappingURL=useGlobalHeader.js.map
package/dist/cjs/config/useGlobalHeader.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/config/useGlobalHeader.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { defaultProps, type DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport { type DSGlobalHeaderInternalsT } from '../sharedTypes.js';\n\nimport { FONT_DETECTOR } from './constants.js';\nexport const useGlobalHeader = (props: DSGlobalHeaderT.Props) => {\n const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n const propsWithDefaults = useMemoMergePropsWithDefault<DSGlobalHeaderInternalsT.InternalProps>(props, defaultProps);\n\n const instanceUID = useMemo(() => uid(5), []);\n\n const globalHeaderToolbarGrid = useMemo(\n () => new Array(propsWithDefaults.toolbar.length).fill('auto') as string[],\n [propsWithDefaults.toolbar],\n );\n\n const fontDetector = useFontsizeMedia({\n largeFont: FONT_DETECTOR.LARGE,\n mediumFont: FONT_DETECTOR.MEDIUM,\n smallFont: FONT_DETECTOR.SMALL,\n });\n\n return useMemo(\n () => ({\n props: propsWithDefaults,\n showIconOnly,\n setShowIconOnly,\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n }),\n [propsWithDefaults, showIconOnly, instanceUID, fontDetector, globalHeaderToolbarGrid],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,iBAAoB;AACpB,qCAAiC;AACjC,8BAA6C;AAC7C,mCAAmD;AAGnD,uBAA8B;AACvB,MAAM,kBAAkB,CAAC,UAAiC;AAC/D,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAkB,KAAK;AAE/D,QAAM,wBAAoB,sDAAqE,OAAO,yCAAY;AAElH,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,8BAA0B;AAAA,IAC9B,MAAM,IAAI,MAAM,kBAAkB,QAAQ,MAAM,EAAE,KAAK,MAAM;AAAA,IAC7D,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AAEA,QAAM,mBAAe,iDAAiB;AAAA,IACpC,WAAW,+BAAc;AAAA,IACzB,YAAY,+BAAc;AAAA,IAC1B,WAAW,+BAAc;AAAA,EAC3B,CAAC;AAED,aAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,cAAc,aAAa,cAAc,uBAAuB;AAAA,EACtF;AACF;",
4
+ "sourcesContent": ["import { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\nimport { useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { defaultProps, type DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport { type DSGlobalHeaderInternalsT } from '../sharedTypes.js';\n\nimport { FONT_DETECTOR } from './constants.js';\nexport const useGlobalHeader = (props: DSGlobalHeaderT.Props) => {\n const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n const propsWithDefaults = useMemoMergePropsWithDefault<DSGlobalHeaderInternalsT.InternalProps>(props, defaultProps);\n\n const instanceUID = useMemo(() => uid(5), []);\n\n const globalHeaderToolbarGrid = useMemo(\n () => new Array(propsWithDefaults.toolbar.length).fill('auto') as string[],\n [propsWithDefaults.toolbar],\n );\n\n const ownerProps = useOwnerProps(props);\n\n const fontDetector = useFontsizeMedia({\n largeFont: FONT_DETECTOR.LARGE,\n mediumFont: FONT_DETECTOR.MEDIUM,\n smallFont: FONT_DETECTOR.SMALL,\n });\n\n return useMemo(\n () => ({\n props: propsWithDefaults,\n showIconOnly,\n setShowIconOnly,\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n ownerProps,\n }),\n [propsWithDefaults, ownerProps, showIconOnly, instanceUID, fontDetector, globalHeaderToolbarGrid],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,iBAAoB;AACpB,qCAAiC;AACjC,8BAA4D;AAC5D,mCAAmD;AAGnD,uBAA8B;AACvB,MAAM,kBAAkB,CAAC,UAAiC;AAC/D,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAkB,KAAK;AAE/D,QAAM,wBAAoB,sDAAqE,OAAO,yCAAY;AAElH,QAAM,kBAAc,sBAAQ,UAAM,gBAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,8BAA0B;AAAA,IAC9B,MAAM,IAAI,MAAM,kBAAkB,QAAQ,MAAM,EAAE,KAAK,MAAM;AAAA,IAC7D,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AAEA,QAAM,iBAAa,uCAAc,KAAK;AAEtC,QAAM,mBAAe,iDAAiB;AAAA,IACpC,WAAW,+BAAc;AAAA,IACzB,YAAY,+BAAc;AAAA,IAC1B,WAAW,+BAAc;AAAA,EAC3B,CAAC;AAED,aAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,YAAY,cAAc,aAAa,cAAc,uBAAuB;AAAA,EAClG;AACF;",
6
6
  "names": []
7
7
  }
package/dist/cjs/exported-related/DSGlobalHeaderDatatestid.js CHANGED
@@ -34,11 +34,12 @@ __export(DSGlobalHeaderDatatestid_exports, {
34
34
  module.exports = __toCommonJS(DSGlobalHeaderDatatestid_exports);
35
35
  var React = __toESM(require("react"));
36
36
  const DSGlobalHeaderDatatestid = {
37
- CONTAINER: "ds-global-header-container",
37
+ CONTAINER: "ds-global-header",
38
38
  LOGO: {
39
39
  CONTAINER: "ds-global-header-logo-container"
40
40
  },
41
41
  BREADCRUMB: {
42
+ CHEVRON: "ds-globalheader-breadcrumb-chevron",
42
43
  CONTAINER: "ds-global-header-breadcrumb-container",
43
44
  PIPE: "ds-global-header-breadcrumb-pipe",
44
45
  LIST: "ds-global-header-breadcrumb-list",
@@ -65,7 +66,7 @@ const DSGlobalHeaderDatatestid = {
65
66
  }
66
67
  };
67
68
  const DSGlobalHeaderDatatestidFlattened = {
68
- CONTAINER: "ds-global-header-container",
69
+ CONTAINER: "ds-global-header",
69
70
  LOGO_CONTAINER: "ds-global-header-logo-container",
70
71
  BREADCRUMB_CONTAINER: "ds-global-header-breadcrumb-container",
71
72
  BREADCRUMB_PIPE: "ds-global-header-breadcrumb-pipe",
@@ -73,6 +74,7 @@ const DSGlobalHeaderDatatestidFlattened = {
73
74
  BREADCRUMB_ITEM: "ds-global-header-breadcrumb-item",
74
75
  BREADCRUMB_ITEM_LINK: "gh-breadcrumb-btn",
75
76
  BREADCRUMB_ITEM_LINK_LABEL: "ds-global-header-breadcrumb-item-link-label",
77
+ BREADCRUMB_CHEVRON: "ds-globalheader-breadcrumb-chevron",
76
78
  MENUBAR_CONTAINER: "ds-global-header-menubar-container",
77
79
  MENUBAR_LIST: "ds-global-header-menubar-list",
78
80
  MENUBAR_ITEM: "ds-global-header-menubar-item",
package/dist/cjs/exported-related/DSGlobalHeaderDatatestid.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/exported-related/DSGlobalHeaderDatatestid.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export const DSGlobalHeaderDatatestid = {\n CONTAINER: 'ds-global-header-container',\n LOGO: {\n CONTAINER: 'ds-global-header-logo-container',\n },\n BREADCRUMB: {\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\nexport const DSGlobalHeaderDatatestidFlattened = {\n CONTAINER: 'ds-global-header-container',\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 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", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,2BAA2B;AAAA,EACtC,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,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;AAIO,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,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;",
4
+ "sourcesContent": ["export 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\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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,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;AAIO,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;",
6
6
  "names": []
7
7
  }
package/dist/cjs/index.js CHANGED
@@ -27,14 +27,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
27
27
  mod
28
28
  ));
29
29
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
30
- var src_exports = {};
31
- __export(src_exports, {
32
- default: () => src_default
30
+ var index_exports = {};
31
+ __export(index_exports, {
32
+ default: () => index_default
33
33
  });
34
- module.exports = __toCommonJS(src_exports);
34
+ module.exports = __toCommonJS(index_exports);
35
35
  var React = __toESM(require("react"));
36
36
  var import_DSGlobalHeader = require("./DSGlobalHeader.js");
37
- __reExport(src_exports, require("./DSGlobalHeader.js"), module.exports);
38
- __reExport(src_exports, require("./exported-related/index.js"), module.exports);
39
- var src_default = import_DSGlobalHeader.DSGlobalHeader;
37
+ __reExport(index_exports, require("./DSGlobalHeader.js"), module.exports);
38
+ __reExport(index_exports, require("./exported-related/index.js"), module.exports);
39
+ var index_default = import_DSGlobalHeader.DSGlobalHeader;
40
40
  //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import { DSGlobalHeader } from './DSGlobalHeader.js';\nexport * from './DSGlobalHeader.js';\nexport * from './exported-related/index.js';\nexport type { DSGlobalHeaderInternalsT } from './sharedTypes.js';\nexport type { DSGlobalHeaderT } from './react-desc-prop-types.js';\nexport default DSGlobalHeader;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,4BAA+B;AAC/B,wBAAc,gCADd;AAEA,wBAAc,wCAFd;AAKA,IAAO,cAAQ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,4BAA+B;AAC/B,0BAAc,gCADd;AAEA,0BAAc,wCAFd;AAKA,IAAO,gBAAQ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/Breadcrumb/GlobalHeaderBreadcrumb.js CHANGED
@@ -40,7 +40,7 @@ var import_useGlobalHeaderBreadcrumb = require("./useGlobalHeaderBreadcrumb.js")
40
40
  var import_PureBreadcrumb = require("./PureBreadcrumb.js");
41
41
  var import_exported_related = require("../../exported-related/index.js");
42
42
  const GlobalHeaderBreadcrumb = () => {
43
- const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } = (0, import_useGlobalHeaderBreadcrumb.useGlobalHeaderBreadcrumb)();
43
+ const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID, ownerProps } = (0, import_useGlobalHeaderBreadcrumb.useGlobalHeaderBreadcrumb)();
44
44
  const layoutMode = (0, import_ds_system.useGetLayoutMode)();
45
45
  const smalScreen = layoutMode === "xs" || layoutMode === "s" || !layoutMode && showIconOnly;
46
46
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -53,9 +53,18 @@ const GlobalHeaderBreadcrumb = () => {
53
53
  cols: ["auto", "auto", "1fr"],
54
54
  forwardedAs: "nav",
55
55
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER,
56
+ ...ownerProps,
56
57
  children: [
57
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledPipe, { showIconOnly: smalScreen, "aria-hidden": true, "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.PIPE }),
58
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledBreadcrumbList, { "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.LIST, children: CustomNavigation !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomNavigation, {}) : breadcrumb?.map((item) => {
58
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
59
+ import_styles.StyledPipe,
60
+ {
61
+ showIconOnly: smalScreen,
62
+ "aria-hidden": true,
63
+ "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.PIPE,
64
+ ...ownerProps
65
+ }
66
+ ),
67
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledBreadcrumbList, { "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.LIST, ...ownerProps, children: CustomNavigation !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomNavigation, {}) : breadcrumb?.map((item) => {
59
68
  const { onClick, isSelected, label, hasNext, ...rest } = item;
60
69
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
61
70
  import_PureBreadcrumb.PureBreadcrumb,
package/dist/cjs/parts/Breadcrumb/GlobalHeaderBreadcrumb.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/Breadcrumb/GlobalHeaderBreadcrumb.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } =\n useGlobalHeaderBreadcrumb();\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = layoutMode === 'xs' || layoutMode === 's' || (!layoutMode && showIconOnly);\n\n return (\n <StyledBreadcrumbContainer\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumb\"\n cols={['auto', 'auto', '1fr']}\n forwardedAs=\"nav\"\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n >\n <StyledPipe showIconOnly={smalScreen} aria-hidden data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE} />\n <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST}>\n {CustomNavigation !== undefined ? (\n <CustomNavigation />\n ) : (\n breadcrumb?.map((item) => {\n const { onClick, isSelected, label, hasNext, ...rest } = item;\n return (\n <PureBreadcrumb\n label={label}\n hasNext={hasNext}\n isSelected={isSelected}\n key={`${instanceUID}-breadcrumb-item-${label}`}\n onKeyDown={onClick && handleOnKeyDown(onClick)}\n {...getGlobalAttributes(rest)}\n onClick={onClick}\n length={breadcrumb.length}\n />\n );\n })\n )}\n </StyledBreadcrumbList>\n <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n </StyledBreadcrumbContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBnB;AAfJ,uBAAiC;AACjC,8BAAoC;AACpC,oBAA4E;AAC5E,uCAA0C;AAC1C,4BAA+B;AAC/B,8BAAyC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,YAAY,QAC9F,4DAA0B;AAC5B,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,aAAa,eAAe,QAAQ,eAAe,OAAQ,CAAC,cAAc;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAa,iDAAyB,WAAW;AAAA,MAEjD;AAAA,oDAAC,4BAAW,cAAc,YAAY,eAAW,MAAC,eAAa,iDAAyB,WAAW,MAAM;AAAA,QACzG,4CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MACpE,+BAAqB,SACpB,4CAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,GAAG,KAAK,IAAI;AACzD,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,cAC5C,OAAG,6CAAoB,IAAI;AAAA,cAC5B;AAAA,cACA,QAAQ,WAAW;AAAA;AAAA,YAJd,GAAG,WAAW,oBAAoB,KAAK;AAAA,UAK9C;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,4CAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
4
+ "sourcesContent": ["import React from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID, ownerProps } =\n useGlobalHeaderBreadcrumb();\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = layoutMode === 'xs' || layoutMode === 's' || (!layoutMode && showIconOnly);\n\n return (\n <StyledBreadcrumbContainer\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumb\"\n cols={['auto', 'auto', '1fr']}\n forwardedAs=\"nav\"\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n {...ownerProps}\n >\n <StyledPipe\n showIconOnly={smalScreen}\n aria-hidden\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE}\n {...ownerProps}\n />\n <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST} {...ownerProps}>\n {CustomNavigation !== undefined ? (\n <CustomNavigation />\n ) : (\n breadcrumb?.map((item) => {\n const { onClick, isSelected, label, hasNext, ...rest } = item;\n return (\n <PureBreadcrumb\n label={label}\n hasNext={hasNext}\n isSelected={isSelected}\n key={`${instanceUID}-breadcrumb-item-${label}`}\n onKeyDown={onClick && handleOnKeyDown(onClick)}\n {...getGlobalAttributes(rest)}\n onClick={onClick}\n length={breadcrumb.length}\n />\n );\n })\n )}\n </StyledBreadcrumbList>\n <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n </StyledBreadcrumbContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBnB;AAfJ,uBAAiC;AACjC,8BAAoC;AACpC,oBAA4E;AAC5E,uCAA0C;AAC1C,4BAA+B;AAC/B,8BAAyC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,aAAa,WAAW,QAC1G,4DAA0B;AAC5B,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,aAAa,eAAe,QAAQ,eAAe,OAAQ,CAAC,cAAc;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAa,iDAAyB,WAAW;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,cAAc;AAAA,YACd,eAAW;AAAA,YACX,eAAa,iDAAyB,WAAW;AAAA,YAChD,GAAG;AAAA;AAAA,QACN;AAAA,QACA,4CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MAAO,GAAG,YAC9E,+BAAqB,SACpB,4CAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,GAAG,KAAK,IAAI;AACzD,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,cAC5C,OAAG,6CAAoB,IAAI;AAAA,cAC5B;AAAA,cACA,QAAQ,WAAW;AAAA;AAAA,YAJd,GAAG,WAAW,oBAAoB,KAAK;AAAA,UAK9C;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,4CAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js CHANGED
@@ -38,6 +38,7 @@ var import_constants = require("../../config/constants.js");
38
38
  const useGlobalHeaderBreadcrumb = () => {
39
39
  const {
40
40
  props: { breadcrumb, CustomNavigation },
41
+ ownerProps,
41
42
  instanceUID,
42
43
  showIconOnly,
43
44
  setShowIconOnly,
@@ -73,7 +74,8 @@ const useGlobalHeaderBreadcrumb = () => {
73
74
  showIconOnly,
74
75
  flexRegionRef,
75
76
  handleOnKeyDown,
76
- instanceUID
77
+ instanceUID,
78
+ ownerProps
77
79
  };
78
80
  };
79
81
  //# sourceMappingURL=useGlobalHeaderBreadcrumb.js.map
package/dist/cjs/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/Breadcrumb/useGlobalHeaderBreadcrumb.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type React from 'react';\nimport { useEffect, useRef, useContext, useCallback } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\nimport { FONT_DETECTOR } from '../../config/constants.js';\ninterface UseGlobalHeaderBreadcrumbReturnT {\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n CustomNavigation: React.ComponentType;\n showIconOnly: boolean;\n flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n handleOnKeyDown: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n instanceUID: string;\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n const {\n props: { breadcrumb, CustomNavigation },\n instanceUID,\n showIconOnly,\n setShowIconOnly,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const breakpointRef = useRef<number | null>(null);\n const flexRegionRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const evaluateShowIconOnly = () => {\n if (\n (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) ||\n fontDetector === FONT_DETECTOR.LARGE ||\n fontDetector === FONT_DETECTOR.MEDIUM\n ) {\n setShowIconOnly(true);\n breakpointRef.current = window.innerWidth;\n } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n setShowIconOnly(false);\n breakpointRef.current = null;\n }\n };\n\n evaluateShowIconOnly();\n\n window.addEventListener('resize', evaluateShowIconOnly);\n return () => window.removeEventListener('resize', evaluateShowIconOnly);\n }, [breakpointRef, flexRegionRef, setShowIconOnly, fontDetector]);\n\n const handleOnKeyDown = useCallback(\n (onClick: (event?: React.MouseEvent) => void) => (e: React.KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n onClick();\n }\n },\n [],\n );\n\n return {\n breadcrumb,\n CustomNavigation,\n showIconOnly,\n flexRegionRef,\n handleOnKeyDown,\n instanceUID,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA2D;AAC3D,mCAAsC;AAEtC,uBAA8B;AAUvB,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY,iBAAiB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AAEpC,QAAM,oBAAgB,qBAAsB,IAAI;AAChD,QAAM,oBAAgB,qBAAuB,IAAI;AAEjD,8BAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UACG,cAAc,WAAW,cAAc,QAAQ,eAAe,KAAK,CAAC,cAAc,WACnF,iBAAiB,+BAAc,SAC/B,iBAAiB,+BAAc,QAC/B;AACA,wBAAgB,IAAI;AACpB,sBAAc,UAAU,OAAO;AAAA,MACjC,WAAW,cAAc,WAAW,OAAO,cAAc,cAAc,SAAS;AAC9E,wBAAgB,KAAK;AACrB,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,yBAAqB;AAErB,WAAO,iBAAiB,UAAU,oBAAoB;AACtD,WAAO,MAAM,OAAO,oBAAoB,UAAU,oBAAoB;AAAA,EACxE,GAAG,CAAC,eAAe,eAAe,iBAAiB,YAAY,CAAC;AAEhE,QAAM,sBAAkB;AAAA,IACtB,CAAC,YAAgD,CAAC,MAA2B;AAC3E,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import type React from 'react';\nimport { useEffect, useRef, useContext, useCallback } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\nimport { FONT_DETECTOR } from '../../config/constants.js';\ninterface UseGlobalHeaderBreadcrumbReturnT {\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n CustomNavigation: React.ComponentType;\n showIconOnly: boolean;\n flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n handleOnKeyDown: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n instanceUID: string;\n ownerProps: {\n getOwnerProps: () => Partial<DSGlobalHeaderInternalsT.DefaultProps>;\n getOwnerPropsArguments: () => object;\n };\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n const {\n props: { breadcrumb, CustomNavigation },\n ownerProps,\n instanceUID,\n showIconOnly,\n setShowIconOnly,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const breakpointRef = useRef<number | null>(null);\n const flexRegionRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const evaluateShowIconOnly = () => {\n if (\n (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) ||\n fontDetector === FONT_DETECTOR.LARGE ||\n fontDetector === FONT_DETECTOR.MEDIUM\n ) {\n setShowIconOnly(true);\n breakpointRef.current = window.innerWidth;\n } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n setShowIconOnly(false);\n breakpointRef.current = null;\n }\n };\n\n evaluateShowIconOnly();\n\n window.addEventListener('resize', evaluateShowIconOnly);\n return () => window.removeEventListener('resize', evaluateShowIconOnly);\n }, [breakpointRef, flexRegionRef, setShowIconOnly, fontDetector]);\n\n const handleOnKeyDown = useCallback(\n (onClick: (event?: React.MouseEvent) => void) => (e: React.KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n onClick();\n }\n },\n [],\n );\n\n return {\n breadcrumb,\n CustomNavigation,\n showIconOnly,\n flexRegionRef,\n handleOnKeyDown,\n instanceUID,\n ownerProps,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAA2D;AAC3D,mCAAsC;AAEtC,uBAA8B;AAcvB,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY,iBAAiB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AAEpC,QAAM,oBAAgB,qBAAsB,IAAI;AAChD,QAAM,oBAAgB,qBAAuB,IAAI;AAEjD,8BAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UACG,cAAc,WAAW,cAAc,QAAQ,eAAe,KAAK,CAAC,cAAc,WACnF,iBAAiB,+BAAc,SAC/B,iBAAiB,+BAAc,QAC/B;AACA,wBAAgB,IAAI;AACpB,sBAAc,UAAU,OAAO;AAAA,MACjC,WAAW,cAAc,WAAW,OAAO,cAAc,cAAc,SAAS;AAC9E,wBAAgB,KAAK;AACrB,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,yBAAqB;AAErB,WAAO,iBAAiB,UAAU,oBAAoB;AACtD,WAAO,MAAM,OAAO,oBAAoB,UAAU,oBAAoB;AAAA,EACxE,GAAG,CAAC,eAAe,eAAe,iBAAiB,YAAY,CAAC;AAEhE,QAAM,sBAAkB;AAAA,IACtB,CAAC,YAAgD,CAAC,MAA2B;AAC3E,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/Logo/GlobalHeaderLogo.js CHANGED
@@ -41,7 +41,8 @@ var import_exported_related = require("../../exported-related/index.js");
41
41
  const GlobalHeaderLogo = () => {
42
42
  const {
43
43
  props: { Logo, LogoWithBrand },
44
- showIconOnly
44
+ showIconOnly,
45
+ ownerProps
45
46
  } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
46
47
  const layoutMode = (0, import_ds_system.useGetLayoutMode)();
47
48
  const smalScreen = import_react.default.useMemo(() => {
@@ -56,6 +57,7 @@ const GlobalHeaderLogo = () => {
56
57
  alignItems: "center",
57
58
  pr: smalScreen ? "0px" : "36px",
58
59
  cols: smalScreen ? ["auto"] : ["auto", "1fr"],
60
+ ...ownerProps,
59
61
  children: [
60
62
  Logo && smalScreen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Logo, {}),
61
63
  LogoWithBrand && !smalScreen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LogoWithBrand, {})
package/dist/cjs/parts/Logo/GlobalHeaderLogo.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/Logo/GlobalHeaderLogo.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n const {\n props: { Logo, LogoWithBrand },\n showIconOnly,\n } = useContext(DSGlobalHeaderContext);\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = React.useMemo(() => {\n if (!layoutMode) return showIconOnly;\n if (layoutMode === 'xs' || layoutMode === 's') return true;\n return false;\n }, [layoutMode, showIconOnly]);\n\n return (\n <StyledLogoContainer\n data-testid={DSGlobalHeaderDatatestid.LOGO.CONTAINER}\n alignItems=\"center\"\n pr={smalScreen ? '0px' : '36px'}\n cols={smalScreen ? ['auto'] : ['auto', '1fr']}\n >\n {Logo && smalScreen && <Logo />}\n {LogoWithBrand && !smalScreen && <LogoWithBrand />}\n </StyledLogoContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoBnB;AApBJ,mBAAkC;AAClC,uBAAiC;AACjC,mCAAsC;AACtC,oBAAoC;AACpC,8BAAyC;AAElC,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,cAAc;AAAA,IAC7B;AAAA,EACF,QAAI,yBAAW,kDAAqB;AACpC,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,aAAa,aAAAA,QAAM,QAAQ,MAAM;AACrC,QAAI,CAAC,WAAY,QAAO;AACxB,QAAI,eAAe,QAAQ,eAAe,IAAK,QAAO;AACtD,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,YAAY,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,iDAAyB,KAAK;AAAA,MAC3C,YAAW;AAAA,MACX,IAAI,aAAa,QAAQ;AAAA,MACzB,MAAM,aAAa,CAAC,MAAM,IAAI,CAAC,QAAQ,KAAK;AAAA,MAE3C;AAAA,gBAAQ,cAAc,4CAAC,QAAK;AAAA,QAC5B,iBAAiB,CAAC,cAAc,4CAAC,iBAAc;AAAA;AAAA;AAAA,EAClD;AAEJ;",
4
+ "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n const {\n props: { Logo, LogoWithBrand },\n showIconOnly,\n ownerProps,\n } = useContext(DSGlobalHeaderContext);\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = React.useMemo(() => {\n if (!layoutMode) return showIconOnly;\n if (layoutMode === 'xs' || layoutMode === 's') return true;\n return false;\n }, [layoutMode, showIconOnly]);\n\n return (\n <StyledLogoContainer\n data-testid={DSGlobalHeaderDatatestid.LOGO.CONTAINER}\n alignItems=\"center\"\n pr={smalScreen ? '0px' : '36px'}\n cols={smalScreen ? ['auto'] : ['auto', '1fr']}\n {...ownerProps}\n >\n {Logo && smalScreen && <Logo />}\n {LogoWithBrand && !smalScreen && <LogoWithBrand />}\n </StyledLogoContainer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqBnB;AArBJ,mBAAkC;AAClC,uBAAiC;AACjC,mCAAsC;AACtC,oBAAoC;AACpC,8BAAyC;AAElC,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,cAAc;AAAA,IAC7B;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AACpC,QAAM,iBAAa,mCAAiB;AAEpC,QAAM,aAAa,aAAAA,QAAM,QAAQ,MAAM;AACrC,QAAI,CAAC,WAAY,QAAO;AACxB,QAAI,eAAe,QAAQ,eAAe,IAAK,QAAO;AACtD,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,YAAY,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,iDAAyB,KAAK;AAAA,MAC3C,YAAW;AAAA,MACX,IAAI,aAAa,QAAQ;AAAA,MACzB,MAAM,aAAa,CAAC,MAAM,IAAI,CAAC,QAAQ,KAAK;AAAA,MAC3C,GAAG;AAAA,MAEH;AAAA,gBAAQ,cAAc,4CAAC,QAAK;AAAA,QAC5B,iBAAiB,CAAC,cAAc,4CAAC,iBAAc;AAAA;AAAA;AAAA,EAClD;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js CHANGED
@@ -45,6 +45,7 @@ var import_constants = require("../../config/constants.js");
45
45
  const GlobalHeaderToolbar = () => {
46
46
  const {
47
47
  props: { toolbar },
48
+ ownerProps,
48
49
  instanceUID,
49
50
  globalHeaderToolbarGrid,
50
51
  fontDetector
@@ -56,6 +57,7 @@ const GlobalHeaderToolbar = () => {
56
57
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.CONTAINER,
57
58
  "aria-label": "menubar",
58
59
  withSpan: fontDetector > import_constants.FONT_DETECTOR.SMALL,
60
+ ...ownerProps,
59
61
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
60
62
  import_styles.StyledList,
61
63
  {
@@ -68,6 +70,7 @@ const GlobalHeaderToolbar = () => {
68
70
  onKeyDown: keyboardNavigation,
69
71
  innerRef: listRef,
70
72
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.LIST,
73
+ ...ownerProps,
71
74
  children: toolbar.map((item, index) => {
72
75
  const {
73
76
  Icon,
@@ -87,6 +90,7 @@ const GlobalHeaderToolbar = () => {
87
90
  {
88
91
  role: "menuitem",
89
92
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
93
+ ...ownerProps,
90
94
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
91
95
  import_outOfTheBox.PopupMenu,
92
96
  {
@@ -109,6 +113,7 @@ const GlobalHeaderToolbar = () => {
109
113
  {
110
114
  role: "menuitem",
111
115
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
116
+ ...ownerProps,
112
117
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
113
118
  import_outOfTheBox.AppPicker,
114
119
  {
@@ -128,6 +133,7 @@ const GlobalHeaderToolbar = () => {
128
133
  {
129
134
  role: "menuitem",
130
135
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
136
+ ...ownerProps,
131
137
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
132
138
  import_outOfTheBox.SearchToggle,
133
139
  {
@@ -146,6 +152,7 @@ const GlobalHeaderToolbar = () => {
146
152
  {
147
153
  role: "menuitem",
148
154
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
155
+ ...ownerProps,
149
156
  children: CustomComponent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomComponent, { item, setRef: setRef(index) })
150
157
  },
151
158
  `${instanceUID}-ds-toolbar-item-${label}`
@@ -156,6 +163,7 @@ const GlobalHeaderToolbar = () => {
156
163
  {
157
164
  role: "menuitem",
158
165
  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM,
166
+ ...ownerProps,
159
167
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
160
168
  import_styles2.StyledButton,
161
169
  {
package/dist/cjs/parts/Toolbar/GlobalHeaderToolbar.js.map CHANGED
@@ -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';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}\n aria-label=\"menubar\"\n withSpan={fontDetector > FONT_DETECTOR.SMALL}\n >\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={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 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';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n ownerProps,\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}\n aria-label=\"menubar\"\n withSpan={fontDetector > FONT_DETECTOR.SMALL}\n {...ownerProps}\n >\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n {...ownerProps}\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 {...ownerProps}\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 {...ownerProps}\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 {...ownerProps}\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 {...ownerProps}\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 {...ownerProps}\n >\n <StyledButton\n onClick={onClick}\n title={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n id={id}\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;AD8DL;AA9DlB,mBAAkC;AAClC,8BAAoC;AACpC,oBAAsE;AACtE,yBAAmD;AACnD,IAAAA,iBAA6B;AAC7B,mCAAsC;AACtC,8BAAyC;AACzC,oCAAuC;AAEvC,uBAA8B;AACvB,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,yBAAW,kDAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,sDAAuB;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,iDAAyB,QAAQ;AAAA,MAC9C,cAAW;AAAA,MACX,UAAU,eAAe,+BAAc;AAAA,MACtC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,QAAO;AAAA,UACP,YAAW;AAAA,UACX,gBAAe;AAAA,UACf,QAAO;AAAA,UACP,MAAM;AAAA,UACN,MAAK;AAAA,UACL,WAAW;AAAA,UACX,UAAU;AAAA,UACV,eAAa,iDAAyB,QAAQ;AAAA,UAC7C,GAAG;AAAA,UAEH,kBAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,KAAK;AAAA,cACL,iBAAiB,CAAC;AAAA,cAClB,GAAG;AAAA,YACL,IAAI;AAEJ,oBAAQ,MAAM;AAAA,cACZ,KAAK;AACH,uBACE;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBAEL,eAAa,iDAAyB,QAAQ;AAAA,oBAC7C,GAAG;AAAA,oBAEJ;AAAA,sBAAC;AAAA;AAAA,wBACC,OAAO;AAAA,wBACP;AAAA,wBACA;AAAA,wBACA;AAAA,wBACA,QAAQ,OAAO,KAAK;AAAA,wBACpB;AAAA,wBACA;AAAA,wBACC,GAAG;AAAA;AAAA,oBACN;AAAA;AAAA,kBAbK,GAAG,WAAW,oBAAoB,KAAK;AAAA,gBAc9C;AAAA,cAEJ,KAAK;AACH,uBACE;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBAEL,eAAa,iDAAyB,QAAQ;AAAA,oBAC7C,GAAG;AAAA,oBAEJ;AAAA,sBAAC;AAAA;AAAA,wBACC;AAAA,wBACA;AAAA,wBACA,QAAQ,OAAO,KAAK;AAAA,wBACpB;AAAA,wBACC,GAAG;AAAA;AAAA,oBACN;AAAA;AAAA,kBAVK,GAAG,WAAW,oBAAoB,KAAK;AAAA,gBAW9C;AAAA,cAEJ,KAAK;AACH,uBACE;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBAEL,eAAa,iDAAyB,QAAQ;AAAA,oBAC7C,GAAG;AAAA,oBAEJ;AAAA,sBAAC;AAAA;AAAA,wBACC;AAAA,wBACA,QAAQ,OAAO,KAAK;AAAA,wBACpB;AAAA,wBACC,GAAG;AAAA;AAAA,oBACN;AAAA;AAAA,kBATK,GAAG,WAAW,oBAAoB,KAAK;AAAA,gBAU9C;AAAA,cAEJ,KAAK;AACH,uBACE;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBAEL,eAAa,iDAAyB,QAAQ;AAAA,oBAC7C,GAAG;AAAA,oBAEH,6BAAmB,4CAAC,mBAAgB,MAAY,QAAQ,OAAO,KAAK,GAAG;AAAA;AAAA,kBAJnE,GAAG,WAAW,oBAAoB,KAAK;AAAA,gBAK9C;AAAA,cAGJ;AACE,uBACE;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBAEL,eAAa,iDAAyB,QAAQ;AAAA,oBAC7C,GAAG;AAAA,oBAEJ;AAAA,sBAAC;AAAA;AAAA,wBACC;AAAA,wBACA,OAAO;AAAA,wBACP,eAAa,iDAAyB,QAAQ;AAAA,wBAC9C;AAAA,wBACA,UAAU,OAAO,KAAK;AAAA,wBACrB,OAAG,6CAAoB,UAAU;AAAA,wBAClC,MAAK;AAAA,wBAEJ,kBAAQ,4CAAC,QAAK,MAAK,KAAI;AAAA;AAAA,oBAC1B;AAAA;AAAA,kBAdK,GAAG,WAAW,oBAAoB,KAAK;AAAA,gBAe9C;AAAA,YAEN;AAAA,UACF,CAAC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": ["import_styles"]
7
7
  }
package/dist/cjs/sharedTypes.js.map CHANGED
@@ -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 fontDetector: number;\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 fontDetector: number;\n setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n instanceUID: string;\n globalHeaderToolbarGrid: string[];\n props: InternalProps;\n ownerProps: {\n getOwnerProps: () => Partial<DSGlobalHeaderInternalsT.DefaultProps>;\n getOwnerPropsArguments: () => object;\n };\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
6
6
  "names": []
7
7
  }
package/dist/esm/DSGlobalHeader.js CHANGED
@@ -19,6 +19,7 @@ const DSGlobalHeader = (props) => {
19
19
  const ctx = useGlobalHeader(props);
20
20
  const {
21
21
  props: { toolbar },
22
+ ownerProps,
22
23
  fontDetector
23
24
  } = ctx;
24
25
  const propsWithDefaults = ctx.props;
@@ -46,13 +47,24 @@ const DSGlobalHeader = (props) => {
46
47
  }
47
48
  return ["auto", "1fr"];
48
49
  }, [layoutMode]);
49
- return /* @__PURE__ */ jsx(Container, { ...globalAttrs, ...xstyledAttrs, forwardedAs: "header", "data-testid": "ds-global-header", cols: cols2, children: /* @__PURE__ */ jsxs(DSGlobalHeaderContext.Provider, { value: ctx, children: [
50
- /* @__PURE__ */ jsxs(Grid, { cols, children: [
51
- /* @__PURE__ */ jsx(GlobalHeaderLogo, {}),
52
- /* @__PURE__ */ jsx(GlobalHeaderBreadcrumb, {})
53
- ] }),
54
- toolbar.length ? /* @__PURE__ */ jsx(GlobalHeaderToolbar, {}) : null
55
- ] }) });
50
+ return /* @__PURE__ */ jsx(
51
+ Container,
52
+ {
53
+ ...globalAttrs,
54
+ ...xstyledAttrs,
55
+ ...ownerProps,
56
+ forwardedAs: "header",
57
+ "data-testid": "ds-global-header",
58
+ cols: cols2,
59
+ children: /* @__PURE__ */ jsxs(DSGlobalHeaderContext.Provider, { value: ctx, children: [
60
+ /* @__PURE__ */ jsxs(Grid, { cols, children: [
61
+ /* @__PURE__ */ jsx(GlobalHeaderLogo, {}),
62
+ /* @__PURE__ */ jsx(GlobalHeaderBreadcrumb, {})
63
+ ] }),
64
+ toolbar.length ? /* @__PURE__ */ jsx(GlobalHeaderToolbar, {}) : null
65
+ ] })
66
+ }
67
+ );
56
68
  };
57
69
  DSGlobalHeader.displayName = DSGlobalHeaderName;
58
70
  const DSGlobalHeaderWithSchema = describe(DSGlobalHeader).description("DSGlobalHeader");
package/dist/esm/DSGlobalHeader.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSGlobalHeader.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes, type DSGlobalHeaderT } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderName } from './exported-related/index.js';\nimport { FONT_DETECTOR } from './config/constants.js';\nimport { Container } from './parts/styles.js';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n useValidateProps(props);\n const ctx = useGlobalHeader(props);\n const {\n props: { toolbar },\n fontDetector,\n } = ctx;\n const propsWithDefaults = ctx.props;\n const globalAttrs = useGetGlobalAttributes<DSGlobalHeaderT.Props, HTMLDivElement, DSGridT.Props>(propsWithDefaults);\n const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n const layoutMode = useGetLayoutMode();\n\n const cols2 = useMemo(() => {\n if (['l'].includes(layoutMode!)) {\n return ['1fr', 'auto'];\n }\n if (['m', 's'].includes(layoutMode!)) {\n return ['1fr'];\n }\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n if (fontDetector > FONT_DETECTOR.SMALL) {\n return ['auto', '1fr'];\n }\n return ['1fr', 'auto'];\n }, [fontDetector, layoutMode]);\n\n const cols = useMemo(() => {\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n return ['auto', '1fr'];\n }, [layoutMode]);\n\n return (\n <Container {...globalAttrs} {...xstyledAttrs} forwardedAs=\"header\" data-testid=\"ds-global-header\" cols={cols2}>\n <DSGlobalHeaderContext.Provider value={ctx}>\n <Grid cols={cols}>\n <GlobalHeaderLogo />\n <GlobalHeaderBreadcrumb />\n </Grid>\n {toolbar.length ? <GlobalHeaderToolbar /> : null}\n </DSGlobalHeaderContext.Provider>\n </Container>\n );\n};\n\nDSGlobalHeader.displayName = DSGlobalHeaderName;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader).description('DSGlobalHeader');\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACqDf,SACE,KADF;AArDR,SAAgB,eAAe;AAC/B,SAAuB,YAAY;AACnC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB,oBAAoB,gBAAgB;AACrE,SAAS,iBAAuC;AAChD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB,CAAC,UAA8C;AACpE,mBAAiB,KAAK;AACtB,QAAM,MAAM,gBAAgB,KAAK;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,EACF,IAAI;AACJ,QAAM,oBAAoB,IAAI;AAC9B,QAAM,cAAc,uBAA6E,iBAAiB;AAClH,QAAM,eAAe,mBAAmB,iBAAiB;AACzD,QAAM,aAAa,iBAAiB;AAEpC,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,CAAC,GAAG,EAAE,SAAS,UAAW,GAAG;AAC/B,aAAO,CAAC,OAAO,MAAM;AAAA,IACvB;AACA,QAAI,CAAC,KAAK,GAAG,EAAE,SAAS,UAAW,GAAG;AACpC,aAAO,CAAC,KAAK;AAAA,IACf;AACA,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,QAAI,eAAe,cAAc,OAAO;AACtC,aAAO,CAAC,QAAQ,KAAK;AAAA,IACvB;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,CAAC;AAE7B,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,WAAO,CAAC,QAAQ,KAAK;AAAA,EACvB,GAAG,CAAC,UAAU,CAAC;AAEf,SACE,oBAAC,aAAW,GAAG,aAAc,GAAG,cAAc,aAAY,UAAS,eAAY,oBAAmB,MAAM,OACtG,+BAAC,sBAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,yBAAC,QAAK,MACJ;AAAA,0BAAC,oBAAiB;AAAA,MAClB,oBAAC,0BAAuB;AAAA,OAC1B;AAAA,IACC,QAAQ,SAAS,oBAAC,uBAAoB,IAAK;AAAA,KAC9C,GACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc,EAAE,YAAY,gBAAgB;AACtF,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { type DSGridT, Grid } from '@elliemae/ds-grid';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes, type DSGlobalHeaderT } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderName } from './exported-related/index.js';\nimport { FONT_DETECTOR } from './config/constants.js';\nimport { Container } from './parts/styles.js';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n useValidateProps(props);\n const ctx = useGlobalHeader(props);\n const {\n props: { toolbar },\n ownerProps,\n fontDetector,\n } = ctx;\n const propsWithDefaults = ctx.props;\n const globalAttrs = useGetGlobalAttributes<DSGlobalHeaderT.Props, HTMLDivElement, DSGridT.Props>(propsWithDefaults);\n const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n const layoutMode = useGetLayoutMode();\n\n const cols2 = useMemo(() => {\n if (['l'].includes(layoutMode!)) {\n return ['1fr', 'auto'];\n }\n if (['m', 's'].includes(layoutMode!)) {\n return ['1fr'];\n }\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n if (fontDetector > FONT_DETECTOR.SMALL) {\n return ['auto', '1fr'];\n }\n return ['1fr', 'auto'];\n }, [fontDetector, layoutMode]);\n\n const cols = useMemo(() => {\n if (['xs'].includes(layoutMode!)) {\n return ['auto'];\n }\n return ['auto', '1fr'];\n }, [layoutMode]);\n\n return (\n <Container\n {...globalAttrs}\n {...xstyledAttrs}\n {...ownerProps}\n forwardedAs=\"header\"\n data-testid=\"ds-global-header\"\n cols={cols2}\n >\n <DSGlobalHeaderContext.Provider value={ctx}>\n <Grid cols={cols}>\n <GlobalHeaderLogo />\n <GlobalHeaderBreadcrumb />\n </Grid>\n {toolbar.length ? <GlobalHeaderToolbar /> : null}\n </DSGlobalHeaderContext.Provider>\n </Container>\n );\n};\n\nDSGlobalHeader.displayName = DSGlobalHeaderName;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader).description('DSGlobalHeader');\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC6Df,SACE,KADF;AA7DR,SAAgB,eAAe;AAC/B,SAAuB,YAAY;AACnC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB,oBAAoB,gBAAgB;AACrE,SAAS,iBAAuC;AAChD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB,CAAC,UAA8C;AACpE,mBAAiB,KAAK;AACtB,QAAM,MAAM,gBAAgB,KAAK;AACjC,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,oBAAoB,IAAI;AAC9B,QAAM,cAAc,uBAA6E,iBAAiB;AAClH,QAAM,eAAe,mBAAmB,iBAAiB;AACzD,QAAM,aAAa,iBAAiB;AAEpC,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,CAAC,GAAG,EAAE,SAAS,UAAW,GAAG;AAC/B,aAAO,CAAC,OAAO,MAAM;AAAA,IACvB;AACA,QAAI,CAAC,KAAK,GAAG,EAAE,SAAS,UAAW,GAAG;AACpC,aAAO,CAAC,KAAK;AAAA,IACf;AACA,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,QAAI,eAAe,cAAc,OAAO;AACtC,aAAO,CAAC,QAAQ,KAAK;AAAA,IACvB;AACA,WAAO,CAAC,OAAO,MAAM;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,CAAC;AAE7B,QAAM,OAAO,QAAQ,MAAM;AACzB,QAAI,CAAC,IAAI,EAAE,SAAS,UAAW,GAAG;AAChC,aAAO,CAAC,MAAM;AAAA,IAChB;AACA,WAAO,CAAC,QAAQ,KAAK;AAAA,EACvB,GAAG,CAAC,UAAU,CAAC;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,aAAY;AAAA,MACZ,eAAY;AAAA,MACZ,MAAM;AAAA,MAEN,+BAAC,sBAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,6BAAC,QAAK,MACJ;AAAA,8BAAC,oBAAiB;AAAA,UAClB,oBAAC,0BAAuB;AAAA,WAC1B;AAAA,QACC,QAAQ,SAAS,oBAAC,uBAAoB,IAAK;AAAA,SAC9C;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc,EAAE,YAAY,gBAAgB;AACtF,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
6
6
  "names": []
7
7
  }
package/dist/esm/config/useGlobalHeader.js CHANGED
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { useState, useMemo } from "react";
3
3
  import { uid } from "uid";
4
4
  import { useFontsizeMedia } from "@elliemae/ds-hooks-fontsize-media";
5
- import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
5
+ import { useMemoMergePropsWithDefault, useOwnerProps } from "@elliemae/ds-props-helpers";
6
6
  import { defaultProps } from "../react-desc-prop-types.js";
7
7
  import { FONT_DETECTOR } from "./constants.js";
8
8
  const useGlobalHeader = (props) => {
@@ -13,6 +13,7 @@ const useGlobalHeader = (props) => {
13
13
  () => new Array(propsWithDefaults.toolbar.length).fill("auto"),
14
14
  [propsWithDefaults.toolbar]
15
15
  );
16
+ const ownerProps = useOwnerProps(props);
16
17
  const fontDetector = useFontsizeMedia({
17
18
  largeFont: FONT_DETECTOR.LARGE,
18
19
  mediumFont: FONT_DETECTOR.MEDIUM,
@@ -25,9 +26,10 @@ const useGlobalHeader = (props) => {
25
26
  setShowIconOnly,
26
27
  instanceUID,
27
28
  globalHeaderToolbarGrid,
28
- fontDetector
29
+ fontDetector,
30
+ ownerProps
29
31
  }),
30
- [propsWithDefaults, showIconOnly, instanceUID, fontDetector, globalHeaderToolbarGrid]
32
+ [propsWithDefaults, ownerProps, showIconOnly, instanceUID, fontDetector, globalHeaderToolbarGrid]
31
33
  );
32
34
  };
33
35
  export {
package/dist/esm/config/useGlobalHeader.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGlobalHeader.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { defaultProps, type DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport { type DSGlobalHeaderInternalsT } from '../sharedTypes.js';\n\nimport { FONT_DETECTOR } from './constants.js';\nexport const useGlobalHeader = (props: DSGlobalHeaderT.Props) => {\n const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n const propsWithDefaults = useMemoMergePropsWithDefault<DSGlobalHeaderInternalsT.InternalProps>(props, defaultProps);\n\n const instanceUID = useMemo(() => uid(5), []);\n\n const globalHeaderToolbarGrid = useMemo(\n () => new Array(propsWithDefaults.toolbar.length).fill('auto') as string[],\n [propsWithDefaults.toolbar],\n );\n\n const fontDetector = useFontsizeMedia({\n largeFont: FONT_DETECTOR.LARGE,\n mediumFont: FONT_DETECTOR.MEDIUM,\n smallFont: FONT_DETECTOR.SMALL,\n });\n\n return useMemo(\n () => ({\n props: propsWithDefaults,\n showIconOnly,\n setShowIconOnly,\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n }),\n [propsWithDefaults, showIconOnly, instanceUID, fontDetector, globalHeaderToolbarGrid],\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,eAAe;AAClC,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,oCAAoC;AAC7C,SAAS,oBAA0C;AAGnD,SAAS,qBAAqB;AACvB,MAAM,kBAAkB,CAAC,UAAiC;AAC/D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,oBAAoB,6BAAqE,OAAO,YAAY;AAElH,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,0BAA0B;AAAA,IAC9B,MAAM,IAAI,MAAM,kBAAkB,QAAQ,MAAM,EAAE,KAAK,MAAM;AAAA,IAC7D,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AAEA,QAAM,eAAe,iBAAiB;AAAA,IACpC,WAAW,cAAc;AAAA,IACzB,YAAY,cAAc;AAAA,IAC1B,WAAW,cAAc;AAAA,EAC3B,CAAC;AAED,SAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,cAAc,aAAa,cAAc,uBAAuB;AAAA,EACtF;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useFontsizeMedia } from '@elliemae/ds-hooks-fontsize-media';\nimport { useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { defaultProps, type DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport { type DSGlobalHeaderInternalsT } from '../sharedTypes.js';\n\nimport { FONT_DETECTOR } from './constants.js';\nexport const useGlobalHeader = (props: DSGlobalHeaderT.Props) => {\n const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n const propsWithDefaults = useMemoMergePropsWithDefault<DSGlobalHeaderInternalsT.InternalProps>(props, defaultProps);\n\n const instanceUID = useMemo(() => uid(5), []);\n\n const globalHeaderToolbarGrid = useMemo(\n () => new Array(propsWithDefaults.toolbar.length).fill('auto') as string[],\n [propsWithDefaults.toolbar],\n );\n\n const ownerProps = useOwnerProps(props);\n\n const fontDetector = useFontsizeMedia({\n largeFont: FONT_DETECTOR.LARGE,\n mediumFont: FONT_DETECTOR.MEDIUM,\n smallFont: FONT_DETECTOR.SMALL,\n });\n\n return useMemo(\n () => ({\n props: propsWithDefaults,\n showIconOnly,\n setShowIconOnly,\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n ownerProps,\n }),\n [propsWithDefaults, ownerProps, showIconOnly, instanceUID, fontDetector, globalHeaderToolbarGrid],\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,eAAe;AAClC,SAAS,WAAW;AACpB,SAAS,wBAAwB;AACjC,SAAS,8BAA8B,qBAAqB;AAC5D,SAAS,oBAA0C;AAGnD,SAAS,qBAAqB;AACvB,MAAM,kBAAkB,CAAC,UAAiC;AAC/D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,oBAAoB,6BAAqE,OAAO,YAAY;AAElH,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,0BAA0B;AAAA,IAC9B,MAAM,IAAI,MAAM,kBAAkB,QAAQ,MAAM,EAAE,KAAK,MAAM;AAAA,IAC7D,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AAEA,QAAM,aAAa,cAAc,KAAK;AAEtC,QAAM,eAAe,iBAAiB;AAAA,IACpC,WAAW,cAAc;AAAA,IACzB,YAAY,cAAc;AAAA,IAC1B,WAAW,cAAc;AAAA,EAC3B,CAAC;AAED,SAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,YAAY,cAAc,aAAa,cAAc,uBAAuB;AAAA,EAClG;AACF;",
6
6
  "names": []
7
7
  }
package/dist/esm/exported-related/DSGlobalHeaderDatatestid.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import * as React from "react";
2
2
  const DSGlobalHeaderDatatestid = {
3
- CONTAINER: "ds-global-header-container",
3
+ CONTAINER: "ds-global-header",
4
4
  LOGO: {
5
5
  CONTAINER: "ds-global-header-logo-container"
6
6
  },
7
7
  BREADCRUMB: {
8
+ CHEVRON: "ds-globalheader-breadcrumb-chevron",
8
9
  CONTAINER: "ds-global-header-breadcrumb-container",
9
10
  PIPE: "ds-global-header-breadcrumb-pipe",
10
11
  LIST: "ds-global-header-breadcrumb-list",
@@ -31,7 +32,7 @@ const DSGlobalHeaderDatatestid = {
31
32
  }
32
33
  };
33
34
  const DSGlobalHeaderDatatestidFlattened = {
34
- CONTAINER: "ds-global-header-container",
35
+ CONTAINER: "ds-global-header",
35
36
  LOGO_CONTAINER: "ds-global-header-logo-container",
36
37
  BREADCRUMB_CONTAINER: "ds-global-header-breadcrumb-container",
37
38
  BREADCRUMB_PIPE: "ds-global-header-breadcrumb-pipe",
@@ -39,6 +40,7 @@ const DSGlobalHeaderDatatestidFlattened = {
39
40
  BREADCRUMB_ITEM: "ds-global-header-breadcrumb-item",
40
41
  BREADCRUMB_ITEM_LINK: "gh-breadcrumb-btn",
41
42
  BREADCRUMB_ITEM_LINK_LABEL: "ds-global-header-breadcrumb-item-link-label",
43
+ BREADCRUMB_CHEVRON: "ds-globalheader-breadcrumb-chevron",
42
44
  MENUBAR_CONTAINER: "ds-global-header-menubar-container",
43
45
  MENUBAR_LIST: "ds-global-header-menubar-list",
44
46
  MENUBAR_ITEM: "ds-global-header-menubar-item",
package/dist/esm/exported-related/DSGlobalHeaderDatatestid.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSGlobalHeaderDatatestid.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSGlobalHeaderDatatestid = {\n CONTAINER: 'ds-global-header-container',\n LOGO: {\n CONTAINER: 'ds-global-header-logo-container',\n },\n BREADCRUMB: {\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\nexport const DSGlobalHeaderDatatestidFlattened = {\n CONTAINER: 'ds-global-header-container',\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 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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,2BAA2B;AAAA,EACtC,WAAW;AAAA,EACX,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,YAAY;AAAA,IACV,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;AAIO,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,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;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export 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\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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAhB,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;AAIO,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;",
6
6
  "names": []
7
7
  }
package/dist/esm/index.js CHANGED
@@ -2,8 +2,8 @@ import * as React from "react";
2
2
  import { DSGlobalHeader } from "./DSGlobalHeader.js";
3
3
  export * from "./DSGlobalHeader.js";
4
4
  export * from "./exported-related/index.js";
5
- var src_default = DSGlobalHeader;
5
+ var index_default = DSGlobalHeader;
6
6
  export {
7
- src_default as default
7
+ index_default as default
8
8
  };
9
9
  //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSGlobalHeader } from './DSGlobalHeader.js';\nexport * from './DSGlobalHeader.js';\nexport * from './exported-related/index.js';\nexport type { DSGlobalHeaderInternalsT } from './sharedTypes.js';\nexport type { DSGlobalHeaderT } from './react-desc-prop-types.js';\nexport default DSGlobalHeader;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sBAAsB;AAC/B,cAAc;AACd,cAAc;AAGd,IAAO,cAAQ;",
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sBAAsB;AAC/B,cAAc;AACd,cAAc;AAGd,IAAO,gBAAQ;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Breadcrumb/GlobalHeaderBreadcrumb.js CHANGED
@@ -7,7 +7,7 @@ import { useGlobalHeaderBreadcrumb } from "./useGlobalHeaderBreadcrumb.js";
7
7
  import { PureBreadcrumb } from "./PureBreadcrumb.js";
8
8
  import { DSGlobalHeaderDatatestid } from "../../exported-related/index.js";
9
9
  const GlobalHeaderBreadcrumb = () => {
10
- const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } = useGlobalHeaderBreadcrumb();
10
+ const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID, ownerProps } = useGlobalHeaderBreadcrumb();
11
11
  const layoutMode = useGetLayoutMode();
12
12
  const smalScreen = layoutMode === "xs" || layoutMode === "s" || !layoutMode && showIconOnly;
13
13
  return /* @__PURE__ */ jsxs(
@@ -20,9 +20,18 @@ const GlobalHeaderBreadcrumb = () => {
20
20
  cols: ["auto", "auto", "1fr"],
21
21
  forwardedAs: "nav",
22
22
  "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER,
23
+ ...ownerProps,
23
24
  children: [
24
- /* @__PURE__ */ jsx(StyledPipe, { showIconOnly: smalScreen, "aria-hidden": true, "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.PIPE }),
25
- /* @__PURE__ */ jsx(StyledBreadcrumbList, { "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.LIST, children: CustomNavigation !== void 0 ? /* @__PURE__ */ jsx(CustomNavigation, {}) : breadcrumb?.map((item) => {
25
+ /* @__PURE__ */ jsx(
26
+ StyledPipe,
27
+ {
28
+ showIconOnly: smalScreen,
29
+ "aria-hidden": true,
30
+ "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.PIPE,
31
+ ...ownerProps
32
+ }
33
+ ),
34
+ /* @__PURE__ */ jsx(StyledBreadcrumbList, { "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.LIST, ...ownerProps, children: CustomNavigation !== void 0 ? /* @__PURE__ */ jsx(CustomNavigation, {}) : breadcrumb?.map((item) => {
26
35
  const { onClick, isSelected, label, hasNext, ...rest } = item;
27
36
  return /* @__PURE__ */ jsx(
28
37
  PureBreadcrumb,
package/dist/esm/parts/Breadcrumb/GlobalHeaderBreadcrumb.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Breadcrumb/GlobalHeaderBreadcrumb.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } =\n useGlobalHeaderBreadcrumb();\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = layoutMode === 'xs' || layoutMode === 's' || (!layoutMode && showIconOnly);\n\n return (\n <StyledBreadcrumbContainer\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumb\"\n cols={['auto', 'auto', '1fr']}\n forwardedAs=\"nav\"\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n >\n <StyledPipe showIconOnly={smalScreen} aria-hidden data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE} />\n <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST}>\n {CustomNavigation !== undefined ? (\n <CustomNavigation />\n ) : (\n breadcrumb?.map((item) => {\n const { onClick, isSelected, label, hasNext, ...rest } = item;\n return (\n <PureBreadcrumb\n label={label}\n hasNext={hasNext}\n isSelected={isSelected}\n key={`${instanceUID}-breadcrumb-item-${label}`}\n onKeyDown={onClick && handleOnKeyDown(onClick)}\n {...getGlobalAttributes(rest)}\n onClick={onClick}\n length={breadcrumb.length}\n />\n );\n })\n )}\n </StyledBreadcrumbList>\n <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n </StyledBreadcrumbContainer>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACgBnB,SASE,KATF;AAfJ,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B,YAAY,4BAA4B;AAC5E,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,YAAY,IAC9F,0BAA0B;AAC5B,QAAM,aAAa,iBAAiB;AAEpC,QAAM,aAAa,eAAe,QAAQ,eAAe,OAAQ,CAAC,cAAc;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAa,yBAAyB,WAAW;AAAA,MAEjD;AAAA,4BAAC,cAAW,cAAc,YAAY,eAAW,MAAC,eAAa,yBAAyB,WAAW,MAAM;AAAA,QACzG,oBAAC,wBAAqB,eAAa,yBAAyB,WAAW,MACpE,+BAAqB,SACpB,oBAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,GAAG,KAAK,IAAI;AACzD,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,cAC5C,GAAG,oBAAoB,IAAI;AAAA,cAC5B;AAAA,cACA,QAAQ,WAAW;AAAA;AAAA,YAJd,GAAG,WAAW,oBAAoB,KAAK;AAAA,UAK9C;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,oBAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID, ownerProps } =\n useGlobalHeaderBreadcrumb();\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = layoutMode === 'xs' || layoutMode === 's' || (!layoutMode && showIconOnly);\n\n return (\n <StyledBreadcrumbContainer\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n aria-label=\"breadcrumb\"\n cols={['auto', 'auto', '1fr']}\n forwardedAs=\"nav\"\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n {...ownerProps}\n >\n <StyledPipe\n showIconOnly={smalScreen}\n aria-hidden\n data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE}\n {...ownerProps}\n />\n <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST} {...ownerProps}>\n {CustomNavigation !== undefined ? (\n <CustomNavigation />\n ) : (\n breadcrumb?.map((item) => {\n const { onClick, isSelected, label, hasNext, ...rest } = item;\n return (\n <PureBreadcrumb\n label={label}\n hasNext={hasNext}\n isSelected={isSelected}\n key={`${instanceUID}-breadcrumb-item-${label}`}\n onKeyDown={onClick && handleOnKeyDown(onClick)}\n {...getGlobalAttributes(rest)}\n onClick={onClick}\n length={breadcrumb.length}\n />\n );\n })\n )}\n </StyledBreadcrumbList>\n <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n </StyledBreadcrumbContainer>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACgBnB,SAUE,KAVF;AAfJ,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B,YAAY,4BAA4B;AAC5E,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,aAAa,WAAW,IAC1G,0BAA0B;AAC5B,QAAM,aAAa,iBAAiB;AAEpC,QAAM,aAAa,eAAe,QAAQ,eAAe,OAAQ,CAAC,cAAc;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAa,yBAAyB,WAAW;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,cAAc;AAAA,YACd,eAAW;AAAA,YACX,eAAa,yBAAyB,WAAW;AAAA,YAChD,GAAG;AAAA;AAAA,QACN;AAAA,QACA,oBAAC,wBAAqB,eAAa,yBAAyB,WAAW,MAAO,GAAG,YAC9E,+BAAqB,SACpB,oBAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,GAAG,KAAK,IAAI;AACzD,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,cAC5C,GAAG,oBAAoB,IAAI;AAAA,cAC5B;AAAA,cACA,QAAQ,WAAW;AAAA;AAAA,YAJd,GAAG,WAAW,oBAAoB,KAAK;AAAA,UAK9C;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,oBAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js CHANGED
@@ -5,6 +5,7 @@ import { FONT_DETECTOR } from "../../config/constants.js";
5
5
  const useGlobalHeaderBreadcrumb = () => {
6
6
  const {
7
7
  props: { breadcrumb, CustomNavigation },
8
+ ownerProps,
8
9
  instanceUID,
9
10
  showIconOnly,
10
11
  setShowIconOnly,
@@ -40,7 +41,8 @@ const useGlobalHeaderBreadcrumb = () => {
40
41
  showIconOnly,
41
42
  flexRegionRef,
42
43
  handleOnKeyDown,
43
- instanceUID
44
+ instanceUID,
45
+ ownerProps
44
46
  };
45
47
  };
46
48
  export {
package/dist/esm/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Breadcrumb/useGlobalHeaderBreadcrumb.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useEffect, useRef, useContext, useCallback } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\nimport { FONT_DETECTOR } from '../../config/constants.js';\ninterface UseGlobalHeaderBreadcrumbReturnT {\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n CustomNavigation: React.ComponentType;\n showIconOnly: boolean;\n flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n handleOnKeyDown: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n instanceUID: string;\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n const {\n props: { breadcrumb, CustomNavigation },\n instanceUID,\n showIconOnly,\n setShowIconOnly,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const breakpointRef = useRef<number | null>(null);\n const flexRegionRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const evaluateShowIconOnly = () => {\n if (\n (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) ||\n fontDetector === FONT_DETECTOR.LARGE ||\n fontDetector === FONT_DETECTOR.MEDIUM\n ) {\n setShowIconOnly(true);\n breakpointRef.current = window.innerWidth;\n } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n setShowIconOnly(false);\n breakpointRef.current = null;\n }\n };\n\n evaluateShowIconOnly();\n\n window.addEventListener('resize', evaluateShowIconOnly);\n return () => window.removeEventListener('resize', evaluateShowIconOnly);\n }, [breakpointRef, flexRegionRef, setShowIconOnly, fontDetector]);\n\n const handleOnKeyDown = useCallback(\n (onClick: (event?: React.MouseEvent) => void) => (e: React.KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n onClick();\n }\n },\n [],\n );\n\n return {\n breadcrumb,\n CustomNavigation,\n showIconOnly,\n flexRegionRef,\n handleOnKeyDown,\n instanceUID,\n };\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,QAAQ,YAAY,mBAAmB;AAC3D,SAAS,6BAA6B;AAEtC,SAAS,qBAAqB;AAUvB,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY,iBAAiB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,gBAAgB,OAAsB,IAAI;AAChD,QAAM,gBAAgB,OAAuB,IAAI;AAEjD,YAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UACG,cAAc,WAAW,cAAc,QAAQ,eAAe,KAAK,CAAC,cAAc,WACnF,iBAAiB,cAAc,SAC/B,iBAAiB,cAAc,QAC/B;AACA,wBAAgB,IAAI;AACpB,sBAAc,UAAU,OAAO;AAAA,MACjC,WAAW,cAAc,WAAW,OAAO,cAAc,cAAc,SAAS;AAC9E,wBAAgB,KAAK;AACrB,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,yBAAqB;AAErB,WAAO,iBAAiB,UAAU,oBAAoB;AACtD,WAAO,MAAM,OAAO,oBAAoB,UAAU,oBAAoB;AAAA,EACxE,GAAG,CAAC,eAAe,eAAe,iBAAiB,YAAY,CAAC;AAEhE,QAAM,kBAAkB;AAAA,IACtB,CAAC,YAAgD,CAAC,MAA2B;AAC3E,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useEffect, useRef, useContext, useCallback } from 'react';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\nimport { FONT_DETECTOR } from '../../config/constants.js';\ninterface UseGlobalHeaderBreadcrumbReturnT {\n breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n CustomNavigation: React.ComponentType;\n showIconOnly: boolean;\n flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n handleOnKeyDown: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n instanceUID: string;\n ownerProps: {\n getOwnerProps: () => Partial<DSGlobalHeaderInternalsT.DefaultProps>;\n getOwnerPropsArguments: () => object;\n };\n}\n\nexport const useGlobalHeaderBreadcrumb = (): UseGlobalHeaderBreadcrumbReturnT => {\n const {\n props: { breadcrumb, CustomNavigation },\n ownerProps,\n instanceUID,\n showIconOnly,\n setShowIconOnly,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const breakpointRef = useRef<number | null>(null);\n const flexRegionRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const evaluateShowIconOnly = () => {\n if (\n (flexRegionRef.current && flexRegionRef.current.offsetWidth <= 0 && !breakpointRef.current) ||\n fontDetector === FONT_DETECTOR.LARGE ||\n fontDetector === FONT_DETECTOR.MEDIUM\n ) {\n setShowIconOnly(true);\n breakpointRef.current = window.innerWidth;\n } else if (breakpointRef.current && window.innerWidth >= breakpointRef.current) {\n setShowIconOnly(false);\n breakpointRef.current = null;\n }\n };\n\n evaluateShowIconOnly();\n\n window.addEventListener('resize', evaluateShowIconOnly);\n return () => window.removeEventListener('resize', evaluateShowIconOnly);\n }, [breakpointRef, flexRegionRef, setShowIconOnly, fontDetector]);\n\n const handleOnKeyDown = useCallback(\n (onClick: (event?: React.MouseEvent) => void) => (e: React.KeyboardEvent) => {\n if (e.key === ' ' || e.key === 'Enter') {\n onClick();\n }\n },\n [],\n );\n\n return {\n breadcrumb,\n CustomNavigation,\n showIconOnly,\n flexRegionRef,\n handleOnKeyDown,\n instanceUID,\n ownerProps,\n };\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,QAAQ,YAAY,mBAAmB;AAC3D,SAAS,6BAA6B;AAEtC,SAAS,qBAAqB;AAcvB,MAAM,4BAA4B,MAAwC;AAC/E,QAAM;AAAA,IACJ,OAAO,EAAE,YAAY,iBAAiB;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,gBAAgB,OAAsB,IAAI;AAChD,QAAM,gBAAgB,OAAuB,IAAI;AAEjD,YAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UACG,cAAc,WAAW,cAAc,QAAQ,eAAe,KAAK,CAAC,cAAc,WACnF,iBAAiB,cAAc,SAC/B,iBAAiB,cAAc,QAC/B;AACA,wBAAgB,IAAI;AACpB,sBAAc,UAAU,OAAO;AAAA,MACjC,WAAW,cAAc,WAAW,OAAO,cAAc,cAAc,SAAS;AAC9E,wBAAgB,KAAK;AACrB,sBAAc,UAAU;AAAA,MAC1B;AAAA,IACF;AAEA,yBAAqB;AAErB,WAAO,iBAAiB,UAAU,oBAAoB;AACtD,WAAO,MAAM,OAAO,oBAAoB,UAAU,oBAAoB;AAAA,EACxE,GAAG,CAAC,eAAe,eAAe,iBAAiB,YAAY,CAAC;AAEhE,QAAM,kBAAkB;AAAA,IACtB,CAAC,YAAgD,CAAC,MAA2B;AAC3E,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/Logo/GlobalHeaderLogo.js CHANGED
@@ -8,7 +8,8 @@ import { DSGlobalHeaderDatatestid } from "../../exported-related/index.js";
8
8
  const GlobalHeaderLogo = () => {
9
9
  const {
10
10
  props: { Logo, LogoWithBrand },
11
- showIconOnly
11
+ showIconOnly,
12
+ ownerProps
12
13
  } = useContext(DSGlobalHeaderContext);
13
14
  const layoutMode = useGetLayoutMode();
14
15
  const smalScreen = React2.useMemo(() => {
@@ -23,6 +24,7 @@ const GlobalHeaderLogo = () => {
23
24
  alignItems: "center",
24
25
  pr: smalScreen ? "0px" : "36px",
25
26
  cols: smalScreen ? ["auto"] : ["auto", "1fr"],
27
+ ...ownerProps,
26
28
  children: [
27
29
  Logo && smalScreen && /* @__PURE__ */ jsx(Logo, {}),
28
30
  LogoWithBrand && !smalScreen && /* @__PURE__ */ jsx(LogoWithBrand, {})
package/dist/esm/parts/Logo/GlobalHeaderLogo.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Logo/GlobalHeaderLogo.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n const {\n props: { Logo, LogoWithBrand },\n showIconOnly,\n } = useContext(DSGlobalHeaderContext);\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = React.useMemo(() => {\n if (!layoutMode) return showIconOnly;\n if (layoutMode === 'xs' || layoutMode === 's') return true;\n return false;\n }, [layoutMode, showIconOnly]);\n\n return (\n <StyledLogoContainer\n data-testid={DSGlobalHeaderDatatestid.LOGO.CONTAINER}\n alignItems=\"center\"\n pr={smalScreen ? '0px' : '36px'}\n cols={smalScreen ? ['auto'] : ['auto', '1fr']}\n >\n {Logo && smalScreen && <Logo />}\n {LogoWithBrand && !smalScreen && <LogoWithBrand />}\n </StyledLogoContainer>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACoBnB,SAMyB,KANzB;AApBJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AAElC,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,cAAc;AAAA,IAC7B;AAAA,EACF,IAAI,WAAW,qBAAqB;AACpC,QAAM,aAAa,iBAAiB;AAEpC,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,QAAI,CAAC,WAAY,QAAO;AACxB,QAAI,eAAe,QAAQ,eAAe,IAAK,QAAO;AACtD,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,YAAY,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,yBAAyB,KAAK;AAAA,MAC3C,YAAW;AAAA,MACX,IAAI,aAAa,QAAQ;AAAA,MACzB,MAAM,aAAa,CAAC,MAAM,IAAI,CAAC,QAAQ,KAAK;AAAA,MAE3C;AAAA,gBAAQ,cAAc,oBAAC,QAAK;AAAA,QAC5B,iBAAiB,CAAC,cAAc,oBAAC,iBAAc;AAAA;AAAA;AAAA,EAClD;AAEJ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { useGetLayoutMode } from '@elliemae/ds-system';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { StyledLogoContainer } from './styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderLogo = (): JSX.Element => {\n const {\n props: { Logo, LogoWithBrand },\n showIconOnly,\n ownerProps,\n } = useContext(DSGlobalHeaderContext);\n const layoutMode = useGetLayoutMode();\n\n const smalScreen = React.useMemo(() => {\n if (!layoutMode) return showIconOnly;\n if (layoutMode === 'xs' || layoutMode === 's') return true;\n return false;\n }, [layoutMode, showIconOnly]);\n\n return (\n <StyledLogoContainer\n data-testid={DSGlobalHeaderDatatestid.LOGO.CONTAINER}\n alignItems=\"center\"\n pr={smalScreen ? '0px' : '36px'}\n cols={smalScreen ? ['auto'] : ['auto', '1fr']}\n {...ownerProps}\n >\n {Logo && smalScreen && <Logo />}\n {LogoWithBrand && !smalScreen && <LogoWithBrand />}\n </StyledLogoContainer>\n );\n};\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACqBnB,SAOyB,KAPzB;AArBJ,OAAOA,UAAS,kBAAkB;AAClC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AAElC,MAAM,mBAAmB,MAAmB;AACjD,QAAM;AAAA,IACJ,OAAO,EAAE,MAAM,cAAc;AAAA,IAC7B;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AACpC,QAAM,aAAa,iBAAiB;AAEpC,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,QAAI,CAAC,WAAY,QAAO;AACxB,QAAI,eAAe,QAAQ,eAAe,IAAK,QAAO;AACtD,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,YAAY,CAAC;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,yBAAyB,KAAK;AAAA,MAC3C,YAAW;AAAA,MACX,IAAI,aAAa,QAAQ;AAAA,MACzB,MAAM,aAAa,CAAC,MAAM,IAAI,CAAC,QAAQ,KAAK;AAAA,MAC3C,GAAG;AAAA,MAEH;AAAA,gBAAQ,cAAc,oBAAC,QAAK;AAAA,QAC5B,iBAAiB,CAAC,cAAc,oBAAC,iBAAc;AAAA;AAAA;AAAA,EAClD;AAEJ;",
6
6
  "names": ["React"]
7
7
  }
package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js CHANGED
@@ -12,6 +12,7 @@ import { FONT_DETECTOR } from "../../config/constants.js";
12
12
  const GlobalHeaderToolbar = () => {
13
13
  const {
14
14
  props: { toolbar },
15
+ ownerProps,
15
16
  instanceUID,
16
17
  globalHeaderToolbarGrid,
17
18
  fontDetector
@@ -23,6 +24,7 @@ const GlobalHeaderToolbar = () => {
23
24
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.CONTAINER,
24
25
  "aria-label": "menubar",
25
26
  withSpan: fontDetector > FONT_DETECTOR.SMALL,
27
+ ...ownerProps,
26
28
  children: /* @__PURE__ */ jsx(
27
29
  StyledList,
28
30
  {
@@ -35,6 +37,7 @@ const GlobalHeaderToolbar = () => {
35
37
  onKeyDown: keyboardNavigation,
36
38
  innerRef: listRef,
37
39
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.LIST,
40
+ ...ownerProps,
38
41
  children: toolbar.map((item, index) => {
39
42
  const {
40
43
  Icon,
@@ -54,6 +57,7 @@ const GlobalHeaderToolbar = () => {
54
57
  {
55
58
  role: "menuitem",
56
59
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
60
+ ...ownerProps,
57
61
  children: /* @__PURE__ */ jsx(
58
62
  PopupMenu,
59
63
  {
@@ -76,6 +80,7 @@ const GlobalHeaderToolbar = () => {
76
80
  {
77
81
  role: "menuitem",
78
82
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
83
+ ...ownerProps,
79
84
  children: /* @__PURE__ */ jsx(
80
85
  AppPicker,
81
86
  {
@@ -95,6 +100,7 @@ const GlobalHeaderToolbar = () => {
95
100
  {
96
101
  role: "menuitem",
97
102
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
103
+ ...ownerProps,
98
104
  children: /* @__PURE__ */ jsx(
99
105
  SearchToggle,
100
106
  {
@@ -113,6 +119,7 @@ const GlobalHeaderToolbar = () => {
113
119
  {
114
120
  role: "menuitem",
115
121
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
122
+ ...ownerProps,
116
123
  children: CustomComponent && /* @__PURE__ */ jsx(CustomComponent, { item, setRef: setRef(index) })
117
124
  },
118
125
  `${instanceUID}-ds-toolbar-item-${label}`
@@ -123,6 +130,7 @@ const GlobalHeaderToolbar = () => {
123
130
  {
124
131
  role: "menuitem",
125
132
  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
133
+ ...ownerProps,
126
134
  children: /* @__PURE__ */ jsx(
127
135
  StyledButton,
128
136
  {
package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js.map CHANGED
@@ -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';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}\n aria-label=\"menubar\"\n withSpan={fontDetector > FONT_DETECTOR.SMALL}\n >\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={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 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';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n const {\n props: { toolbar },\n ownerProps,\n instanceUID,\n globalHeaderToolbarGrid,\n fontDetector,\n } = useContext(DSGlobalHeaderContext);\n\n const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n return (\n <StyledMenubarContainer\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}\n aria-label=\"menubar\"\n withSpan={fontDetector > FONT_DETECTOR.SMALL}\n {...ownerProps}\n >\n <StyledList\n height=\"100%\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gutter=\"xxs\"\n cols={globalHeaderToolbarGrid}\n role=\"menubar\"\n onKeyDown={keyboardNavigation}\n innerRef={listRef}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n {...ownerProps}\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 {...ownerProps}\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 {...ownerProps}\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 {...ownerProps}\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 {...ownerProps}\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 {...ownerProps}\n >\n <StyledButton\n onClick={onClick}\n title={label}\n data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n id={id}\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
  }
package/dist/types/config/useGlobalHeader.d.ts CHANGED
@@ -8,4 +8,8 @@ export declare const useGlobalHeader: (props: DSGlobalHeaderT.Props) => {
8
8
  instanceUID: string;
9
9
  globalHeaderToolbarGrid: string[];
10
10
  fontDetector: 1 | 2 | 3;
11
+ ownerProps: {
12
+ getOwnerProps: () => Partial<DSGlobalHeaderInternalsT.DefaultProps>;
13
+ getOwnerPropsArguments: () => {};
14
+ };
11
15
  };
package/dist/types/exported-related/DSGlobalHeaderDatatestid.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const DSGlobalHeaderDatatestid: {
4
4
  CONTAINER: string;
5
5
  };
6
6
  BREADCRUMB: {
7
+ CHEVRON: string;
7
8
  CONTAINER: string;
8
9
  PIPE: string;
9
10
  LIST: string;
@@ -38,6 +39,7 @@ export declare const DSGlobalHeaderDatatestidFlattened: {
38
39
  BREADCRUMB_ITEM: string;
39
40
  BREADCRUMB_ITEM_LINK: string;
40
41
  BREADCRUMB_ITEM_LINK_LABEL: string;
42
+ BREADCRUMB_CHEVRON: string;
41
43
  MENUBAR_CONTAINER: string;
42
44
  MENUBAR_LIST: string;
43
45
  MENUBAR_ITEM: string;
package/dist/types/parts/Breadcrumb/useGlobalHeaderBreadcrumb.d.ts CHANGED
@@ -7,6 +7,10 @@ interface UseGlobalHeaderBreadcrumbReturnT {
7
7
  flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;
8
8
  handleOnKeyDown: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;
9
9
  instanceUID: string;
10
+ ownerProps: {
11
+ getOwnerProps: () => Partial<DSGlobalHeaderInternalsT.DefaultProps>;
12
+ getOwnerPropsArguments: () => object;
13
+ };
10
14
  }
11
15
  export declare const useGlobalHeaderBreadcrumb: () => UseGlobalHeaderBreadcrumbReturnT;
12
16
  export {};
package/dist/types/sharedTypes.d.ts CHANGED
@@ -128,5 +128,9 @@ export declare namespace DSGlobalHeaderInternalsT {
128
128
  instanceUID: string;
129
129
  globalHeaderToolbarGrid: string[];
130
130
  props: InternalProps;
131
+ ownerProps: {
132
+ getOwnerProps: () => Partial<DSGlobalHeaderInternalsT.DefaultProps>;
133
+ getOwnerPropsArguments: () => object;
134
+ };
131
135
  }
132
136
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-global-header",
3
- "version": "3.51.0-rc.9",
3
+ "version": "3.51.1",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Global Header",
6
6
  "files": [
@@ -37,20 +37,20 @@
37
37
  },
38
38
  "dependencies": {
39
39
  "uid": "~2.0.1",
40
- "@elliemae/ds-app-picker": "3.51.0-rc.9",
41
- "@elliemae/ds-grid": "3.51.0-rc.9",
42
- "@elliemae/ds-hooks-fontsize-media": "3.51.0-rc.9",
43
- "@elliemae/ds-form": "3.51.0-rc.9",
44
- "@elliemae/ds-popperjs": "3.51.0-rc.9",
45
- "@elliemae/ds-props-helpers": "3.51.0-rc.9",
46
- "@elliemae/ds-system": "3.51.0-rc.9",
47
- "@elliemae/ds-icons": "3.51.0-rc.9"
40
+ "@elliemae/ds-app-picker": "3.51.1",
41
+ "@elliemae/ds-form": "3.51.1",
42
+ "@elliemae/ds-hooks-fontsize-media": "3.51.1",
43
+ "@elliemae/ds-grid": "3.51.1",
44
+ "@elliemae/ds-popperjs": "3.51.1",
45
+ "@elliemae/ds-icons": "3.51.1",
46
+ "@elliemae/ds-props-helpers": "3.51.1",
47
+ "@elliemae/ds-system": "3.51.1"
48
48
  },
49
49
  "devDependencies": {
50
50
  "@elliemae/pui-cli": "9.0.0-next.55",
51
51
  "jest": "~29.7.0",
52
52
  "styled-components": "~5.3.9",
53
- "@elliemae/ds-monorepo-devops": "3.51.0-rc.9"
53
+ "@elliemae/ds-monorepo-devops": "3.51.1"
54
54
  },
55
55
  "peerDependencies": {
56
56
  "lodash": "^4.17.21",