@elliemae/ds-global-header 3.56.0-rc.1 → 3.57.0-next.1

package/dist/esm/config/useValidateProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import {\n  throwToolbarPopupItemError,\n  throwToolbarAppPickerItemError,\n  throwToolbarItemGenericError,\n  throwLogoError,\n  throwBreadcrumbItemError,\n  isValidToolbarType,\n  isObject,\n} from './validateHelpers.js';\nimport type { DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport type { DSGlobalHeaderInternalsT } from '../sharedTypes.js';\n\nconst validatePopupItem = (componentProps: DSGlobalHeaderInternalsT.PopupMenuComponentProps): void => {\n  if (componentProps.options && !Array.isArray(componentProps.options)) {\n    throwToolbarPopupItemError('options', componentProps.options);\n  }\n  if (componentProps.closeOnClick && typeof componentProps.closeOnClick !== 'boolean') {\n    throwToolbarPopupItemError('closeOnClick', componentProps.closeOnClick);\n  }\n};\n\nconst validateAppPickerItem = (componentProps: DSGlobalHeaderInternalsT.AppPickerComponentProps): void => {\n  if (componentProps.apps && !Array.isArray(componentProps.apps)) {\n    throwToolbarAppPickerItemError('apps', componentProps.apps);\n  }\n  if (componentProps.customApps && !Array.isArray(componentProps.customApps)) {\n    throwToolbarAppPickerItemError('customApps', componentProps.customApps);\n  }\n  if (componentProps.sectionTitle && typeof componentProps.sectionTitle !== 'string') {\n    throwToolbarAppPickerItemError('sectionTitle', componentProps.sectionTitle);\n  }\n  if (componentProps.customSectionTitle && typeof componentProps.customSectionTitle !== 'string') {\n    throwToolbarAppPickerItemError('customSectionTitle', componentProps.customSectionTitle);\n  }\n};\n\nexport const useValidateProps = (props: DSGlobalHeaderT.Props): void => {\n  const { breadcrumb, toolbar, Logo, LogoWithBrand } = props;\n\n  if (Logo && typeof Logo !== 'function') {\n    throwLogoError('Logo', Logo);\n  }\n\n  if (LogoWithBrand && typeof LogoWithBrand !== 'function') {\n    throwLogoError('LogoWithBrand', LogoWithBrand);\n  }\n\n  breadcrumb?.forEach((breadcrumbItem) => {\n    if (breadcrumbItem.label && typeof breadcrumbItem.label !== 'string') {\n      throwBreadcrumbItemError('label', breadcrumbItem.label);\n    }\n    if (breadcrumbItem.onClick && typeof breadcrumbItem.onClick !== 'function') {\n      throwBreadcrumbItemError('onClick', breadcrumbItem.onClick);\n    }\n    if (breadcrumbItem.hasNext && typeof breadcrumbItem.hasNext !== 'boolean') {\n      throwBreadcrumbItemError('hasNext', breadcrumbItem.hasNext);\n    }\n    if (breadcrumbItem.isSelected && typeof breadcrumbItem.isSelected !== 'boolean') {\n      throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);\n    }\n  });\n\n  toolbar?.forEach((toolbarItem) => {\n    if (toolbarItem.type) {\n      if (!isValidToolbarType(toolbarItem.type)) {\n        throwToolbarItemGenericError('type', toolbarItem.type);\n      }\n      if (toolbarItem.componentProps && !isObject(toolbarItem.componentProps)) {\n        throwToolbarItemGenericError('componentProps', toolbarItem.componentProps);\n      }\n      if (toolbarItem.type === 'ds-popup-menu') {\n        validatePopupItem(toolbarItem.componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps);\n      }\n      if (toolbarItem.type === 'ds-app-picker' && toolbarItem.componentProps) {\n        validateAppPickerItem(toolbarItem.componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps);\n      }\n    }\n  });\n};\n\n// Validation Needs to be checked carefully to avoid any breaking change\n// const validateGenericToolbarItem = (item: DSGlobalHeaderInternalsT.ToolbarItem): void => {\n//   if (item.label && typeof item.label !== 'string') {\n//     throwToolbarItemGenericError('label', item.label);\n//   }\n//   if (item.onClick && typeof item.onClick !== 'function') {\n//     throwToolbarItemGenericError('onClick', item.onClick);\n//   }\n//   if (item.Icon && typeof item.Icon !== 'function') {\n//     if (item.type === 'ds-app-picker') return;\n//     throwToolbarItemGenericError('Icon', item.Icon);\n//   }\n// };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,MAAM,oBAAoB,CAAC,mBAA2E;AACpG,MAAI,eAAe,WAAW,CAAC,MAAM,QAAQ,eAAe,OAAO,GAAG;AACpE,+BAA2B,WAAW,eAAe,OAAO;AAAA,EAC9D;AACA,MAAI,eAAe,gBAAgB,OAAO,eAAe,iBAAiB,WAAW;AACnF,+BAA2B,gBAAgB,eAAe,YAAY;AAAA,EACxE;AACF;AAEA,MAAM,wBAAwB,CAAC,mBAA2E;AACxG,MAAI,eAAe,QAAQ,CAAC,MAAM,QAAQ,eAAe,IAAI,GAAG;AAC9D,mCAA+B,QAAQ,eAAe,IAAI;AAAA,EAC5D;AACA,MAAI,eAAe,cAAc,CAAC,MAAM,QAAQ,eAAe,UAAU,GAAG;AAC1E,mCAA+B,cAAc,eAAe,UAAU;AAAA,EACxE;AACA,MAAI,eAAe,gBAAgB,OAAO,eAAe,iBAAiB,UAAU;AAClF,mCAA+B,gBAAgB,eAAe,YAAY;AAAA,EAC5E;AACA,MAAI,eAAe,sBAAsB,OAAO,eAAe,uBAAuB,UAAU;AAC9F,mCAA+B,sBAAsB,eAAe,kBAAkB;AAAA,EACxF;AACF;AAEO,MAAM,mBAAmB,CAAC,UAAuC;AACtE,QAAM,EAAE,YAAY,SAAS,MAAM,cAAc,IAAI;AAErD,MAAI,QAAQ,OAAO,SAAS,YAAY;AACtC,mBAAe,QAAQ,IAAI;AAAA,EAC7B;AAEA,MAAI,iBAAiB,OAAO,kBAAkB,YAAY;AACxD,mBAAe,iBAAiB,aAAa;AAAA,EAC/C;AAEA,cAAY,QAAQ,CAAC,mBAAmB;AACtC,QAAI,eAAe,SAAS,OAAO,eAAe,UAAU,UAAU;AACpE,+BAAyB,SAAS,eAAe,KAAK;AAAA,IACxD;AACA,QAAI,eAAe,WAAW,OAAO,eAAe,YAAY,YAAY;AAC1E,+BAAyB,WAAW,eAAe,OAAO;AAAA,IAC5D;AACA,QAAI,eAAe,WAAW,OAAO,eAAe,YAAY,WAAW;AACzE,+BAAyB,WAAW,eAAe,OAAO;AAAA,IAC5D;AACA,QAAI,eAAe,cAAc,OAAO,eAAe,eAAe,WAAW;AAC/E,+BAAyB,cAAc,eAAe,UAAU;AAAA,IAClE;AAAA,EACF,CAAC;AAED,WAAS,QAAQ,CAAC,gBAAgB;AAChC,QAAI,YAAY,MAAM;AACpB,UAAI,CAAC,mBAAmB,YAAY,IAAI,GAAG;AACzC,qCAA6B,QAAQ,YAAY,IAAI;AAAA,MACvD;AACA,UAAI,YAAY,kBAAkB,CAAC,SAAS,YAAY,cAAc,GAAG;AACvE,qCAA6B,kBAAkB,YAAY,cAAc;AAAA,MAC3E;AACA,UAAI,YAAY,SAAS,iBAAiB;AACxC,0BAAkB,YAAY,cAAkE;AAAA,MAClG;AACA,UAAI,YAAY,SAAS,mBAAmB,YAAY,gBAAgB;AACtE,8BAAsB,YAAY,cAAkE;AAAA,MACtG;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport {\n  isObject,\n  isValidToolbarType,\n  throwBreadcrumbItemError,\n  throwLogoError,\n  throwToolbarAppPickerItemError,\n  throwToolbarItemGenericError,\n  throwToolbarPopupItemError,\n} from './validateHelpers.js';\n\nconst validatePopupItem = (componentProps: DSGlobalHeaderT.PopupMenuComponentProps): void => {\n  if (componentProps.options && !Array.isArray(componentProps.options)) {\n    throwToolbarPopupItemError('options', componentProps.options);\n  }\n  if (componentProps.closeOnClick && typeof componentProps.closeOnClick !== 'boolean') {\n    throwToolbarPopupItemError('closeOnClick', componentProps.closeOnClick);\n  }\n};\n\nconst validateAppPickerItem = (componentProps: DSGlobalHeaderT.AppPickerComponentProps): void => {\n  if (componentProps.apps && !Array.isArray(componentProps.apps)) {\n    throwToolbarAppPickerItemError('apps', componentProps.apps);\n  }\n  if (componentProps.customApps && !Array.isArray(componentProps.customApps)) {\n    throwToolbarAppPickerItemError('customApps', componentProps.customApps);\n  }\n  if (componentProps.sectionTitle && typeof componentProps.sectionTitle !== 'string') {\n    throwToolbarAppPickerItemError('sectionTitle', componentProps.sectionTitle);\n  }\n  if (componentProps.customSectionTitle && typeof componentProps.customSectionTitle !== 'string') {\n    throwToolbarAppPickerItemError('customSectionTitle', componentProps.customSectionTitle);\n  }\n};\n\nexport const useValidateProps = (props: DSGlobalHeaderT.Props): void => {\n  const { breadcrumb, toolbar, Logo, LogoWithBrand } = props;\n\n  if (Logo && typeof Logo !== 'function') {\n    throwLogoError('Logo', Logo);\n  }\n\n  if (LogoWithBrand && typeof LogoWithBrand !== 'function') {\n    throwLogoError('LogoWithBrand', LogoWithBrand);\n  }\n\n  breadcrumb?.forEach((breadcrumbItem) => {\n    if (breadcrumbItem.label && typeof breadcrumbItem.label !== 'string') {\n      throwBreadcrumbItemError('label', breadcrumbItem.label);\n    }\n    if (breadcrumbItem.onClick && typeof breadcrumbItem.onClick !== 'function') {\n      throwBreadcrumbItemError('onClick', breadcrumbItem.onClick);\n    }\n    if (breadcrumbItem.hasNext && typeof breadcrumbItem.hasNext !== 'boolean') {\n      throwBreadcrumbItemError('hasNext', breadcrumbItem.hasNext);\n    }\n    if (breadcrumbItem.isSelected && typeof breadcrumbItem.isSelected !== 'boolean') {\n      throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);\n    }\n  });\n\n  toolbar?.forEach((toolbarItem) => {\n    if (toolbarItem.type) {\n      if (!isValidToolbarType(toolbarItem.type)) {\n        throwToolbarItemGenericError('type', toolbarItem.type);\n      }\n      if (toolbarItem.componentProps && !isObject(toolbarItem.componentProps)) {\n        throwToolbarItemGenericError('componentProps', toolbarItem.componentProps);\n      }\n      if (toolbarItem.type === 'ds-popup-menu') {\n        validatePopupItem(toolbarItem.componentProps);\n      }\n      if (toolbarItem.type === 'ds-app-picker' && toolbarItem.componentProps) {\n        validateAppPickerItem(toolbarItem.componentProps);\n      }\n    }\n  });\n};\n\n// Validation Needs to be checked carefully to avoid any breaking change\n// const validateGenericToolbarItem = (item: DSGlobalHeaderT.ToolbarItem): void => {\n//   if (item.label && typeof item.label !== 'string') {\n//     throwToolbarItemGenericError('label', item.label);\n//   }\n//   if (item.onClick && typeof item.onClick !== 'function') {\n//     throwToolbarItemGenericError('onClick', item.onClick);\n//   }\n//   if (item.Icon && typeof item.Icon !== 'function') {\n//     if (item.type === 'ds-app-picker') return;\n//     throwToolbarItemGenericError('Icon', item.Icon);\n//   }\n// };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,oBAAoB,CAAC,mBAAkE;AAC3F,MAAI,eAAe,WAAW,CAAC,MAAM,QAAQ,eAAe,OAAO,GAAG;AACpE,+BAA2B,WAAW,eAAe,OAAO;AAAA,EAC9D;AACA,MAAI,eAAe,gBAAgB,OAAO,eAAe,iBAAiB,WAAW;AACnF,+BAA2B,gBAAgB,eAAe,YAAY;AAAA,EACxE;AACF;AAEA,MAAM,wBAAwB,CAAC,mBAAkE;AAC/F,MAAI,eAAe,QAAQ,CAAC,MAAM,QAAQ,eAAe,IAAI,GAAG;AAC9D,mCAA+B,QAAQ,eAAe,IAAI;AAAA,EAC5D;AACA,MAAI,eAAe,cAAc,CAAC,MAAM,QAAQ,eAAe,UAAU,GAAG;AAC1E,mCAA+B,cAAc,eAAe,UAAU;AAAA,EACxE;AACA,MAAI,eAAe,gBAAgB,OAAO,eAAe,iBAAiB,UAAU;AAClF,mCAA+B,gBAAgB,eAAe,YAAY;AAAA,EAC5E;AACA,MAAI,eAAe,sBAAsB,OAAO,eAAe,uBAAuB,UAAU;AAC9F,mCAA+B,sBAAsB,eAAe,kBAAkB;AAAA,EACxF;AACF;AAEO,MAAM,mBAAmB,CAAC,UAAuC;AACtE,QAAM,EAAE,YAAY,SAAS,MAAM,cAAc,IAAI;AAErD,MAAI,QAAQ,OAAO,SAAS,YAAY;AACtC,mBAAe,QAAQ,IAAI;AAAA,EAC7B;AAEA,MAAI,iBAAiB,OAAO,kBAAkB,YAAY;AACxD,mBAAe,iBAAiB,aAAa;AAAA,EAC/C;AAEA,cAAY,QAAQ,CAAC,mBAAmB;AACtC,QAAI,eAAe,SAAS,OAAO,eAAe,UAAU,UAAU;AACpE,+BAAyB,SAAS,eAAe,KAAK;AAAA,IACxD;AACA,QAAI,eAAe,WAAW,OAAO,eAAe,YAAY,YAAY;AAC1E,+BAAyB,WAAW,eAAe,OAAO;AAAA,IAC5D;AACA,QAAI,eAAe,WAAW,OAAO,eAAe,YAAY,WAAW;AACzE,+BAAyB,WAAW,eAAe,OAAO;AAAA,IAC5D;AACA,QAAI,eAAe,cAAc,OAAO,eAAe,eAAe,WAAW;AAC/E,+BAAyB,cAAc,eAAe,UAAU;AAAA,IAClE;AAAA,EACF,CAAC;AAED,WAAS,QAAQ,CAAC,gBAAgB;AAChC,QAAI,YAAY,MAAM;AACpB,UAAI,CAAC,mBAAmB,YAAY,IAAI,GAAG;AACzC,qCAA6B,QAAQ,YAAY,IAAI;AAAA,MACvD;AACA,UAAI,YAAY,kBAAkB,CAAC,SAAS,YAAY,cAAc,GAAG;AACvE,qCAA6B,kBAAkB,YAAY,cAAc;AAAA,MAC3E;AACA,UAAI,YAAY,SAAS,iBAAiB;AACxC,0BAAkB,YAAY,cAAc;AAAA,MAC9C;AACA,UAAI,YAAY,SAAS,mBAAmB,YAAY,gBAAgB;AACtE,8BAAsB,YAAY,cAAc;AAAA,MAClD;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/dist/esm/exported-related/index.js

@@ -1,4 +1,11 @@
 import * as React from "react";
-export * from "./theming.js";
-export * from "./DSGlobalHeaderDatatestid.js";
+import { DSGlobalHeaderName, DSGlobalHeaderSlots, DSGlobalHeaderSlotsFlattened } from "./theming.js";
+import { DSGlobalHeaderDatatestid, DSGlobalHeaderDatatestidFlattened } from "./DSGlobalHeaderDatatestid.js";
+export {
+  DSGlobalHeaderDatatestid,
+  DSGlobalHeaderDatatestidFlattened,
+  DSGlobalHeaderName,
+  DSGlobalHeaderSlots,
+  DSGlobalHeaderSlotsFlattened
+};
 //# sourceMappingURL=index.js.map

package/dist/esm/exported-related/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './theming.js';\nexport * from './DSGlobalHeaderDatatestid.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSGlobalHeaderName, DSGlobalHeaderSlots, DSGlobalHeaderSlotsFlattened } from './theming.js';\nexport { DSGlobalHeaderDatatestid, DSGlobalHeaderDatatestidFlattened } from './DSGlobalHeaderDatatestid.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB,qBAAqB,oCAAoC;AACtF,SAAS,0BAA0B,yCAAyC;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,9 +1,23 @@
 import * as React from "react";
 import { DSGlobalHeader } from "./DSGlobalHeader.js";
-export * from "./DSGlobalHeader.js";
-export * from "./exported-related/index.js";
 var index_default = DSGlobalHeader;
+import { DSGlobalHeader as DSGlobalHeader2, DSGlobalHeaderWithSchema, GlobalHeader } from "./DSGlobalHeader.js";
+import {
+  DSGlobalHeaderDatatestid,
+  DSGlobalHeaderDatatestidFlattened,
+  DSGlobalHeaderName,
+  DSGlobalHeaderSlots,
+  DSGlobalHeaderSlotsFlattened
+} from "./exported-related/index.js";
 export {
+  DSGlobalHeader2 as DSGlobalHeader,
+  DSGlobalHeaderDatatestid,
+  DSGlobalHeaderDatatestidFlattened,
+  DSGlobalHeaderName,
+  DSGlobalHeaderSlots,
+  DSGlobalHeaderSlotsFlattened,
+  DSGlobalHeaderWithSchema,
+  GlobalHeader,
   index_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "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"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sBAAsB;AAC/B,cAAc;AACd,cAAc;AAGd,IAAO,gBAAQ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSGlobalHeader } from './DSGlobalHeader.js';\n\nexport default DSGlobalHeader;\nexport { DSGlobalHeader, DSGlobalHeaderWithSchema, GlobalHeader } from './DSGlobalHeader.js';\nexport {\n  DSGlobalHeaderDatatestid,\n  DSGlobalHeaderDatatestidFlattened,\n  DSGlobalHeaderName,\n  DSGlobalHeaderSlots,\n  DSGlobalHeaderSlotsFlattened,\n} from './exported-related/index.js';\nexport type { DSGlobalHeaderT } from './react-desc-prop-types.js';\nexport type { DSGlobalHeaderInternalsT } from './sharedTypes.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sBAAsB;AAE/B,IAAO,gBAAQ;AACf,SAAS,kBAAAA,iBAAgB,0BAA0B,oBAAoB;AACvE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "names": ["DSGlobalHeader"]
 }

package/dist/esm/parts/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -42,7 +42,7 @@ const GlobalHeaderBreadcrumb = () => {
               onKeyDown: onClick && handleOnKeyDown(onClick),
               ...getGlobalAttributes(rest),
               onClick,
-              length: breadcrumb.length
+              fullBreadcrumbListLength: breadcrumb.length
             },
             `${instanceUID}-breadcrumb-item-${label}`
           );

package/dist/esm/parts/Breadcrumb/GlobalHeaderBreadcrumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Breadcrumb/GlobalHeaderBreadcrumb.tsx"],
-  "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"],
-  "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;",
+  "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                fullBreadcrumbListLength={breadcrumb.length}\n              />\n            );\n          })\n        )}\n      </StyledBreadcrumbList>\n      <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n    </StyledBreadcrumbContainer>\n  );\n};\n"],
+  "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,0BAA0B,WAAW;AAAA;AAAA,YAJhC,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;",
   "names": []
 }

package/dist/esm/parts/Breadcrumb/PureBreadcrumb.js

@@ -1,34 +1,23 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2 from "react";
-import { StyledBreadcrumbItem, StyledLink, StyledLabel, StyledChevron } from "./styles.js";
 import { DSGlobalHeaderDatatestid } from "../../exported-related/index.js";
+import { StyledBreadcrumbItem, StyledChevron, StyledLabel, StyledLink } from "./styles.js";
 const PureBreadcrumb = React2.memo(
-  ({
-    onClick,
-    onKeyDown,
-    isSelected,
-    length,
-    label,
-    hasNext,
-    id,
-    ...rest
-  }) => /* @__PURE__ */ jsxs(StyledBreadcrumbItem, { "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.ITEM, children: [
+  ({ onClick, isSelected, fullBreadcrumbListLength, label, hasNext, ...rest }) => /* @__PURE__ */ jsxs(StyledBreadcrumbItem, { "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.ITEM, children: [
     /* @__PURE__ */ jsx(
       StyledLink,
       {
         onClick,
-        onKeyDown,
         "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK,
         "aria-current": isSelected,
-        id,
         tabIndex: 0,
         ...rest,
         children: /* @__PURE__ */ jsx(
           StyledLabel,
           {
             isSelected: !!isSelected,
-            isOnlyItem: length === 1,
+            isOnlyItem: fullBreadcrumbListLength === 1,
             "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK_LABEL,
             children: label
           }

package/dist/esm/parts/Breadcrumb/PureBreadcrumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Breadcrumb/PureBreadcrumb.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { StyledBreadcrumbItem, StyledLink, StyledLabel, StyledChevron } from './styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\nexport const PureBreadcrumb = React.memo(\n  ({\n    onClick,\n    onKeyDown,\n    isSelected,\n    length,\n    label,\n    hasNext,\n    id,\n    ...rest\n  }: DSGlobalHeaderInternalsT.BreadcrumbItem) => (\n    <StyledBreadcrumbItem data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM}>\n      <StyledLink\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK}\n        aria-current={isSelected}\n        id={id}\n        tabIndex={0}\n        {...rest}\n      >\n        <StyledLabel\n          isSelected={!!isSelected}\n          isOnlyItem={length === 1}\n          data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK_LABEL}\n        >\n          {label}\n        </StyledLabel>\n      </StyledLink>\n      {hasNext && <StyledChevron size=\"m\" aria-hidden />}\n    </StyledBreadcrumbItem>\n  ),\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACenB,SAUI,KAVJ;AAfJ,OAAOA,YAAW;AAClB,SAAS,sBAAsB,YAAY,aAAa,qBAAqB;AAC7E,SAAS,gCAAgC;AAElC,MAAM,iBAAiBA,OAAM;AAAA,EAClC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,MACE,qBAAC,wBAAqB,eAAa,yBAAyB,WAAW,MACrE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,eAAa,yBAAyB,WAAW;AAAA,QACjD,gBAAc;AAAA,QACd;AAAA,QACA,UAAU;AAAA,QACT,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,CAAC,CAAC;AAAA,YACd,YAAY,WAAW;AAAA,YACvB,eAAa,yBAAyB,WAAW;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,IACC,WAAW,oBAAC,iBAAc,MAAK,KAAI,eAAW,MAAC;AAAA,KAClD;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../react-desc-prop-types.js';\nimport { StyledBreadcrumbItem, StyledChevron, StyledLabel, StyledLink } from './styles.js';\n\ntype PureBreadcrumbProps = DSGlobalHeaderT.BreadcrumbItem & { fullBreadcrumbListLength: number };\n\nexport const PureBreadcrumb = React.memo(\n  ({ onClick, isSelected, fullBreadcrumbListLength, label, hasNext, ...rest }: PureBreadcrumbProps) => (\n    <StyledBreadcrumbItem data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM}>\n      <StyledLink\n        onClick={onClick}\n        data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK}\n        aria-current={isSelected}\n        tabIndex={0}\n        {...rest}\n      >\n        <StyledLabel\n          isSelected={!!isSelected}\n          isOnlyItem={fullBreadcrumbListLength === 1}\n          data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK_LABEL}\n        >\n          {label}\n        </StyledLabel>\n      </StyledLink>\n      {hasNext && <StyledChevron size=\"m\" aria-hidden />}\n    </StyledBreadcrumbItem>\n  ),\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACSnB,SAQI,KARJ;AATJ,OAAOA,YAAW;AAClB,SAAS,gCAAgC;AAEzC,SAAS,sBAAsB,eAAe,aAAa,kBAAkB;AAItE,MAAM,iBAAiBA,OAAM;AAAA,EAClC,CAAC,EAAE,SAAS,YAAY,0BAA0B,OAAO,SAAS,GAAG,KAAK,MACxE,qBAAC,wBAAqB,eAAa,yBAAyB,WAAW,MACrE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa,yBAAyB,WAAW;AAAA,QACjD,gBAAc;AAAA,QACd,UAAU;AAAA,QACT,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,CAAC,CAAC;AAAA,YACd,YAAY,6BAA6B;AAAA,YACzC,eAAa,yBAAyB,WAAW;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,IACC,WAAW,oBAAC,iBAAc,MAAK,KAAI,eAAW,MAAC;AAAA,KAClD;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { useEffect, useRef, useContext, useCallback } from "react";
-import { DSGlobalHeaderContext } from "../../DSGlobalHeaderContext.js";
+import { useCallback, useContext, useEffect, useRef } from "react";
 import { FONT_DETECTOR } from "../../config/constants.js";
+import { DSGlobalHeaderContext } from "../../DSGlobalHeaderContext.js";
 const useGlobalHeaderBreadcrumb = () => {
   const {
     props: { breadcrumb, CustomNavigation },
@@ -30,7 +30,7 @@ const useGlobalHeaderBreadcrumb = () => {
   const handleOnKeyDown = useCallback(
     (onClick) => (e) => {
       if (e.key === " " || e.key === "Enter") {
-        onClick();
+        onClick(e);
       }
     },
     []

package/dist/esm/parts/Breadcrumb/useGlobalHeaderBreadcrumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Breadcrumb/useGlobalHeaderBreadcrumb.tsx"],
-  "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"],
-  "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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useCallback, useContext, useEffect, useRef } from 'react';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport type { DSGlobalHeaderT } from '../../react-desc-prop-types.js';\n\ninterface UseGlobalHeaderBreadcrumbReturnT {\n  breadcrumb: DSGlobalHeaderT.BreadcrumbItem[];\n  CustomNavigation: React.ComponentType;\n  showIconOnly: boolean;\n  flexRegionRef: React.MutableRefObject<HTMLDivElement | null>;\n  handleOnKeyDown: (\n    onClick: (event: React.MouseEvent | React.KeyboardEvent) => void,\n  ) => (event: React.KeyboardEvent) => void;\n  instanceUID: string;\n  ownerProps: {\n    getOwnerProps: () => Partial<DSGlobalHeaderT.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 | React.KeyboardEvent) => void) => (e: React.KeyboardEvent) => {\n      if (e.key === ' ' || e.key === 'Enter') {\n        onClick(e);\n      }\n    },\n    [],\n  );\n\n  return {\n    breadcrumb,\n    CustomNavigation,\n    showIconOnly,\n    flexRegionRef,\n    handleOnKeyDown,\n    instanceUID,\n    ownerProps,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,YAAY,WAAW,cAAc;AAC3D,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAkB/B,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,YAAqE,CAAC,MAA2B;AAChG,UAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,gBAAQ,CAAC;AAAA,MACX;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;",
   "names": []
 }

package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js

@@ -1,14 +1,14 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useContext } from "react";
 import { getGlobalAttributes } from "@elliemae/ds-props-helpers";
-import { StyledList, StyledMenubarContainer, StyledToolbarItem } from "./styles.js";
-import { AppPicker, PopupMenu, SearchToggle } from "./outOfTheBox/index.js";
-import { StyledButton } from "../styles.js";
+import { useContext } from "react";
+import { FONT_DETECTOR } from "../../config/constants.js";
 import { DSGlobalHeaderContext } from "../../DSGlobalHeaderContext.js";
 import { DSGlobalHeaderDatatestid } from "../../exported-related/index.js";
+import { StyledButton } from "../styles.js";
+import { AppPicker, PopupMenu, SearchToggle } from "./outOfTheBox/index.js";
+import { StyledList, StyledMenubarContainer, StyledToolbarItem } from "./styles.js";
 import { useGlobalHeaderToolbar } from "./useGlobalHeaderToolbar.js";
-import { FONT_DETECTOR } from "../../config/constants.js";
 const GlobalHeaderToolbar = () => {
   const {
     props: { toolbar },
@@ -39,115 +39,89 @@ const GlobalHeaderToolbar = () => {
           "data-testid": DSGlobalHeaderDatatestid.MENUBAR.LIST,
           ...ownerProps,
           children: toolbar.map((item, index) => {
-            const {
-              Icon,
-              type,
-              onClick,
-              onKeyPress,
-              CustomComponent,
-              label,
-              id = "",
-              componentProps = {},
-              ...otherProps
-            } = item;
-            switch (type) {
-              case "ds-popup-menu":
-                return /* @__PURE__ */ jsx(
-                  StyledToolbarItem,
-                  {
-                    role: "menuitem",
-                    "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
-                    ...ownerProps,
-                    children: /* @__PURE__ */ jsx(
-                      PopupMenu,
-                      {
-                        title: label,
-                        Icon,
-                        onClick,
-                        onKeyPress,
-                        setRef: setRef(index),
-                        id,
-                        componentProps,
-                        ...otherProps
-                      }
-                    )
-                  },
-                  `${instanceUID}-ds-toolbar-item-${label}`
-                );
-              case "ds-app-picker":
-                return /* @__PURE__ */ jsx(
-                  StyledToolbarItem,
-                  {
-                    role: "menuitem",
-                    "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
-                    ...ownerProps,
-                    children: /* @__PURE__ */ jsx(
-                      AppPicker,
-                      {
-                        label,
-                        id,
-                        setRef: setRef(index),
-                        componentProps,
-                        ...otherProps
-                      }
-                    )
-                  },
-                  `${instanceUID}-ds-toolbar-item-${label}`
-                );
-              case "ds-search-toggle":
-                return /* @__PURE__ */ jsx(
-                  StyledToolbarItem,
-                  {
-                    role: "menuitem",
-                    "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
-                    ...ownerProps,
-                    children: /* @__PURE__ */ jsx(
-                      SearchToggle,
-                      {
-                        id,
-                        setRef: setRef(index),
-                        componentProps,
-                        ...otherProps
-                      }
-                    )
-                  },
-                  `${instanceUID}-ds-toolbar-item-${label}`
-                );
-              case "custom":
-                return /* @__PURE__ */ jsx(
-                  StyledToolbarItem,
-                  {
-                    role: "menuitem",
-                    "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
-                    ...ownerProps,
-                    children: CustomComponent && /* @__PURE__ */ jsx(CustomComponent, { item, setRef: setRef(index) })
-                  },
-                  `${instanceUID}-ds-toolbar-item-${label}`
-                );
-              default:
-                return /* @__PURE__ */ jsx(
-                  StyledToolbarItem,
-                  {
-                    role: "menuitem",
-                    "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
-                    ...ownerProps,
-                    children: /* @__PURE__ */ jsx(
-                      StyledButton,
-                      {
-                        onClick,
-                        title: label,
-                        "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
-                        id,
-                        innerRef: setRef(index),
-                        ...getGlobalAttributes(otherProps),
-                        type: "button",
-                        children: Icon && /* @__PURE__ */ jsx(Icon, { size: "m" })
-                      }
-                    )
-                  },
-                  `${instanceUID}-ds-toolbar-item-${label}`
-                );
+            const { type } = item;
+            const setRefIndex = setRef(index);
+            if (type === "ds-popup-menu") {
+              const { label: label2, ...otherProps2 } = item;
+              return /* @__PURE__ */ jsx(
+                StyledToolbarItem,
+                {
+                  role: "menuitem",
+                  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                  ...ownerProps,
+                  children: /* @__PURE__ */ jsx(
+                    PopupMenu,
+                    {
+                      title: label2,
+                      setRef: setRefIndex,
+                      ...otherProps2
+                    }
+                  )
+                },
+                `${instanceUID}-ds-toolbar-item-${label2}`
+              );
             }
+            if (type === "ds-app-picker") {
+              const { label: label2, ...otherProps2 } = item;
+              return /* @__PURE__ */ jsx(
+                StyledToolbarItem,
+                {
+                  role: "menuitem",
+                  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                  ...ownerProps,
+                  children: /* @__PURE__ */ jsx(AppPicker, { label: label2, setRef: setRefIndex, ...otherProps2 })
+                },
+                `${instanceUID}-ds-toolbar-item-${label2}`
+              );
+            }
+            if (type === "ds-search-toggle") {
+              const { label: label2, ...otherProps2 } = item;
+              return /* @__PURE__ */ jsx(
+                StyledToolbarItem,
+                {
+                  role: "menuitem",
+                  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                  ...ownerProps,
+                  children: /* @__PURE__ */ jsx(SearchToggle, { setRef: setRefIndex, ...otherProps2 })
+                },
+                `${instanceUID}-ds-toolbar-item-${label2}`
+              );
+            }
+            if (type === "custom") {
+              const { label: label2, CustomComponent } = item;
+              if (!CustomComponent) return null;
+              return /* @__PURE__ */ jsx(
+                StyledToolbarItem,
+                {
+                  role: "menuitem",
+                  "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                  ...ownerProps,
+                  children: CustomComponent && /* @__PURE__ */ jsx(CustomComponent, { item, setRef: setRefIndex })
+                },
+                `${instanceUID}-ds-toolbar-item-${label2}`
+              );
+            }
+            const { label, Icon, ...otherProps } = item;
+            return /* @__PURE__ */ jsx(
+              StyledToolbarItem,
+              {
+                role: "menuitem",
+                "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM,
+                ...ownerProps,
+                children: /* @__PURE__ */ jsx(
+                  StyledButton,
+                  {
+                    title: label,
+                    "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+                    innerRef: setRefIndex,
+                    ...getGlobalAttributes(otherProps),
+                    type: "button",
+                    children: Icon && /* @__PURE__ */ jsx(Icon, { size: "m" })
+                  }
+                )
+              },
+              `${instanceUID}-ds-toolbar-item-${label}`
+            );
           })
         }
       )

package/dist/esm/parts/Toolbar/GlobalHeaderToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx"],
-  "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"],
-  "mappings": "AAAA,YAAY,WAAW;AC8DL;AA9DlB,SAAgB,kBAAkB;AAClC,SAAS,2BAA2B;AACpC,SAAS,YAAY,wBAAwB,yBAAyB;AACtE,SAAS,WAAW,WAAW,oBAAoB;AACnD,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,8BAA8B;AAEvC,SAAS,qBAAqB;AACvB,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,mBAAmB,IAAI,uBAAuB;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,yBAAyB,QAAQ;AAAA,MAC9C,cAAW;AAAA,MACX,UAAU,eAAe,cAAc;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,yBAAyB,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,yBAAyB,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,yBAAyB,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,yBAAyB,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,yBAAyB,QAAQ;AAAA,oBAC7C,GAAG;AAAA,oBAEH,6BAAmB,oBAAC,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,yBAAyB,QAAQ;AAAA,oBAC7C,GAAG;AAAA,oBAEJ;AAAA,sBAAC;AAAA;AAAA,wBACC;AAAA,wBACA,OAAO;AAAA,wBACP,eAAa,yBAAyB,QAAQ;AAAA,wBAC9C;AAAA,wBACA,UAAU,OAAO,KAAK;AAAA,wBACrB,GAAG,oBAAoB,UAAU;AAAA,wBAClC,MAAK;AAAA,wBAEJ,kBAAQ,oBAAC,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;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useContext } from 'react';\nimport { FONT_DETECTOR } from '../../config/constants.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { StyledButton } from '../styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\n\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 { type } = item;\n          const setRefIndex = setRef(index);\n\n          if (type === 'ds-popup-menu') {\n            const { label, ...otherProps } = item;\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} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                  setRef={setRefIndex}\n                  {...otherProps}\n                />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-app-picker') {\n            const { label, ...otherProps } = item;\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 label={label} setRef={setRefIndex} {...otherProps} />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'ds-search-toggle') {\n            const { label, ...otherProps } = item;\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 setRef={setRefIndex} {...otherProps} />\n              </StyledToolbarItem>\n            );\n          }\n          if (type === 'custom') {\n            const { label, CustomComponent } = item;\n            if (!CustomComponent) return null;\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={setRefIndex} />}\n              </StyledToolbarItem>\n            );\n          }\n\n          const { label, Icon, ...otherProps } = item;\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                title={label} // this is captured as the standard HTML \"title\" attribute and is printed in output HTML\n                data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n                innerRef={setRefIndex}\n                {...getGlobalAttributes(otherProps)}\n                type=\"button\"\n              >\n                {Icon && <Icon size=\"m\" />}\n              </StyledButton>\n            </StyledToolbarItem>\n          );\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["label", "otherProps"]
 }

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

@@ -1,20 +1,14 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useCallback } from "react";
 import { DSAppPicker } from "@elliemae/ds-app-picker";
-import { mergeRefs } from "@elliemae/ds-system";
-import { getGlobalAttributes } from "@elliemae/ds-props-helpers";
 import { MenuPicker } from "@elliemae/ds-icons";
+import { getGlobalAttributes } from "@elliemae/ds-props-helpers";
+import { mergeRefs } from "@elliemae/ds-system";
+import { useCallback, useRef, useState } from "react";
+import { DSGlobalHeaderDatatestid } from "../../../../exported-related/index.js";
 import { useCallbackAfterRender } from "../../../../utils/useCallbackAfterRender.js";
 import { StyledButton } from "../../../styles.js";
-import { DSGlobalHeaderDatatestid } from "../../../../exported-related/index.js";
-const AppPicker = ({
-  label,
-  id,
-  setRef,
-  componentProps,
-  ...otherProps
-}) => {
+const AppPicker = ({ label, setRef, componentProps, ...otherProps }) => {
   const [isOpen, setIsOpen] = useState(false);
   const internalTriggerRef = useRef(null);
   const {
@@ -74,7 +68,6 @@ const AppPicker = ({
       "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
       "aria-haspopup": true,
       "aria-expanded": userIsOpen ?? isOpen,
-      id,
       ...getGlobalAttributes(otherProps),
       type: "button",
       children: /* @__PURE__ */ jsx(MenuPicker, { width: 20.73, height: 20.73 })

package/dist/esm/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { useCallbackAfterRender } from '../../../../utils/useCallbackAfterRender.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const AppPicker = ({\n  label,\n  id,\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderInternalsT.AppPickerProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalTriggerRef = useRef<HTMLButtonElement>(null);\n\n  const {\n    apps,\n    icon,\n    customApps,\n    sectionTitle,\n    customSectionTitle,\n    actionRef,\n    isOpen: userIsOpen,\n    onKeyDown: userOnKeyDown,\n    onClickOutside: userOnClickOutside,\n    renderTrigger: userRenderTrigger,\n    onClose,\n    triggerRef,\n    triggerOnClick,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  // const appPickerRef = useRef(null);\n  // const internalActionRef = useMemo(() => actionRef ?? appPickerRef, [actionRef]);\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n    if (e.code === 'Enter' || e.code === 'Space' || e.code === 'ArrowDown') {\n      setIsOpen(true);\n    }\n  }, []);\n\n  const handleAppPickerOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        schedule(focusTrigger);\n      }\n    },\n    [focusTrigger, schedule],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      setIsOpen(true);\n      setTimeout(() => {\n        if (e.detail === 0) actionRef?.current?.focusSelectedOrFirstAvailable?.();\n        else actionRef?.current?.focusWrapper();\n      }, 10);\n    },\n    [actionRef],\n  );\n\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const TriggerDefaultComponent = ({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n    <StyledButton\n      onClick={triggerOnClick ?? handleOnClick}\n      onKeyDown={handleTriggerKeyDown}\n      innerRef={(buttonRef: HTMLButtonElement) => {\n        setRef(buttonRef);\n        mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n      }}\n      aria-label={label}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n      aria-haspopup\n      aria-expanded={userIsOpen ?? isOpen}\n      id={id}\n      {...getGlobalAttributes(otherProps)}\n      type=\"button\"\n    >\n      <MenuPicker width={20.73} height={20.73} />\n    </StyledButton>\n  );\n\n  return (\n    <DSAppPicker\n      apps={apps}\n      customApps={customApps}\n      sectionTitle={sectionTitle}\n      customSectionTitle={customSectionTitle}\n      icon={icon}\n      onKeyDown={userOnKeyDown ?? handleAppPickerOnKeyDown}\n      actionRef={actionRef}\n      onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n      renderTrigger={userRenderTrigger || TriggerDefaultComponent}\n      isOpen={userIsOpen ?? isOpen}\n      onClose={onClose}\n      triggerRef={triggerRef}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2FjB;AA3FN,SAAgB,UAAU,QAAQ,mBAAmB;AACrD,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4D;AAC1D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,qBAAqB,OAA0B,IAAI;AAEzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,uBAAuB;AAKxC,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,uBAAmD,YAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,2BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,uBAAuB,YAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW,EAAG,YAAW,SAAS,gCAAgC;AAAA,YACnE,YAAW,SAAS,aAAa;AAAA,MACxC,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAGA,QAAM,0BAA0B,CAAC,EAAE,IAAI,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,UAAU,CAAC,cAAiC;AAC1C,eAAO,SAAS;AAChB,kBAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,yBAAyB,QAAQ;AAAA,MAC9C,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,GAAG,oBAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,8BAAC,cAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA,gBAAgB,sBAAsB;AAAA,MACtC,eAAe,qBAAqB;AAAA,MACpC,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { useCallbackAfterRender } from '../../../../utils/useCallbackAfterRender.js';\nimport { StyledButton } from '../../../styles.js';\n\ntype AppPickerOutOfTheBoxProps =\n  // what comes from\n  //   the prop toolbar (array)\n  //     specifically only if the type is 'ds-app-picker' so they give us the correct interface\n  DSGlobalHeaderT.AppPickerProps & {\n    // this interface is an addition that comes from our own implementation\n    // GlobalHeaderToolbar -> useGlobalHeaderToolbar\n    //   is handling focus management for the user when using our out of the box\n    setRef: (ref: HTMLElement) => void;\n  };\n\nexport const AppPicker = ({ label, setRef, componentProps, ...otherProps }: AppPickerOutOfTheBoxProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalTriggerRef = useRef<HTMLButtonElement>(null);\n\n  const {\n    apps,\n    icon,\n    customApps,\n    sectionTitle,\n    customSectionTitle,\n    actionRef,\n    isOpen: userIsOpen,\n    onKeyDown: userOnKeyDown,\n    onClickOutside: userOnClickOutside,\n    renderTrigger: userRenderTrigger,\n    onClose,\n    triggerRef,\n    triggerOnClick,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  // const appPickerRef = useRef(null);\n  // const internalActionRef = useMemo(() => actionRef ?? appPickerRef, [actionRef]);\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n    if (e.code === 'Enter' || e.code === 'Space' || e.code === 'ArrowDown') {\n      setIsOpen(true);\n    }\n  }, []);\n\n  const handleAppPickerOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        schedule(focusTrigger);\n      }\n    },\n    [focusTrigger, schedule],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      setIsOpen(true);\n      setTimeout(() => {\n        if (e.detail === 0) actionRef?.current?.focusSelectedOrFirstAvailable?.();\n        else actionRef?.current?.focusWrapper();\n      }, 10);\n    },\n    [actionRef],\n  );\n\n  // eslint-disable-next-line react/no-unstable-nested-components\n  const TriggerDefaultComponent = ({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n    <StyledButton\n      onClick={triggerOnClick ?? handleOnClick}\n      onKeyDown={handleTriggerKeyDown}\n      innerRef={(buttonRef: HTMLButtonElement) => {\n        setRef(buttonRef);\n        mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n      }}\n      aria-label={label}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n      aria-haspopup\n      aria-expanded={userIsOpen ?? isOpen}\n      {...getGlobalAttributes(otherProps)}\n      type=\"button\"\n    >\n      <MenuPicker width={20.73} height={20.73} />\n    </StyledButton>\n  );\n\n  return (\n    <DSAppPicker\n      apps={apps}\n      customApps={customApps}\n      sectionTitle={sectionTitle}\n      customSectionTitle={customSectionTitle}\n      icon={icon}\n      onKeyDown={userOnKeyDown ?? handleAppPickerOnKeyDown}\n      actionRef={actionRef}\n      onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n      renderTrigger={userRenderTrigger || TriggerDefaultComponent}\n      isOpen={userIsOpen ?? isOpen}\n      onClose={onClose}\n      triggerRef={triggerRef}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+FjB;AA/FN,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAC1B,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,SAAS,gCAAgC;AAEzC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAatB,MAAM,YAAY,CAAC,EAAE,OAAO,QAAQ,gBAAgB,GAAG,WAAW,MAA8C;AACrH,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,qBAAqB,OAA0B,IAAI;AAEzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,uBAAuB;AAKxC,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,uBAAmD,YAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,2BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,uBAAuB,YAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW,EAAG,YAAW,SAAS,gCAAgC;AAAA,YACnE,YAAW,SAAS,aAAa;AAAA,MACxC,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAGA,QAAM,0BAA0B,CAAC,EAAE,IAAI,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,UAAU,CAAC,cAAiC;AAC1C,eAAO,SAAS;AAChB,kBAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,yBAAyB,QAAQ;AAAA,MAC9C,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC5B,GAAG,oBAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,8BAAC,cAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA,gBAAgB,sBAAsB;AAAA,MACtC,eAAe,qBAAqB;AAAA,MACpC,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,15 +1,14 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
-import { PopupMenuContent } from "./menuContent/PopupMenuContent.js";
-import { StyledButton } from "../../../styles.js";
+import { useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
+import { useCallback, useState } from "react";
 import { DSGlobalHeaderDatatestid } from "../../../../exported-related/index.js";
+import { StyledButton } from "../../../styles.js";
+import { PopupMenuContent } from "./menuContent/PopupMenuContent.js";
 const PopupMenu = ({
   Icon,
   onClick,
-  id,
   setRef,
   componentProps,
   ...otherProps
@@ -66,7 +65,6 @@ const PopupMenu = ({
         "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
         "aria-haspopup": true,
         "aria-expanded": userIsOpen ?? isOpen,
-        id,
         ...useGetGlobalAttributes(otherProps),
         type: "button",
         children: Icon && /* @__PURE__ */ jsx(Icon, { size: "m" })