@elliemae/ds-global-header 3.22.0-rc.8 → 3.22.0

package/dist/cjs/DSGlobalHeader.js

@@ -35,6 +35,7 @@ __export(DSGlobalHeader_exports, {
 module.exports = __toCommonJS(DSGlobalHeader_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_lodash = require("lodash");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_GlobalHeaderLogo = require("./parts/Logo/GlobalHeaderLogo.js");
@@ -42,23 +43,23 @@ var import_GlobalHeaderBreadcrumb = require("./parts/Breadcrumb/GlobalHeaderBrea
 var import_GlobalHeaderToolbar = require("./parts/Toolbar/GlobalHeaderToolbar.js");
 var import_DSGlobalHeaderContext = require("./DSGlobalHeaderContext.js");
 var import_useGlobalHeader = require("./config/useGlobalHeader.js");
-var import_GlobalHeaderContainer = require("./parts/GlobalHeaderContainer.js");
 var import_useValidateProps = require("./config/useValidateProps.js");
 var import_exported_related = require("./exported-related/index.js");
+var import_styles = require("./parts/styles.js");
 const DSGlobalHeader = (props) => {
   (0, import_useValidateProps.useValidateProps)(props);
   const ctx = (0, import_useGlobalHeader.useGlobalHeader)(props);
-  const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
-  const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(props);
-  const { bg, backgroundColor } = props;
+  const propsWithDefaults = ctx.props;
+  const globalAttrs = (0, import_lodash.omit)((0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefaults), ["cols", "rows", "wrap"]);
+  const xstyledAttrs = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefaults);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_GlobalHeaderContainer.GlobalHeaderContainer,
+    import_styles.Container,
     {
-      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.CONTAINER,
-      globalAttrs,
-      xstyledAttrs,
-      bg,
-      backgroundColor,
+      ...globalAttrs,
+      ...xstyledAttrs,
+      cols: ["auto", "1fr", "auto"],
+      forwardedAs: "header",
+      "data-testid": "ds-global-header",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DSGlobalHeaderContext.DSGlobalHeaderContext.Provider, { value: ctx, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderLogo.GlobalHeaderLogo, {}),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, {}),
@@ -67,8 +68,9 @@ const DSGlobalHeader = (props) => {
     }
   );
 };
+DSGlobalHeader.propTypes = import_react_desc_prop_types.propTypes;
 DSGlobalHeader.displayName = import_exported_related.DSGlobalHeaderName;
-const DSGlobalHeaderWithSchema = (0, import_ds_props_helpers.describe)(DSGlobalHeader);
+const DSGlobalHeaderWithSchema = (0, import_ds_props_helpers.describe)(DSGlobalHeader).description("DSGlobalHeader");
 DSGlobalHeaderWithSchema.propTypes = import_react_desc_prop_types.propTypes;
 const GlobalHeader = DSGlobalHeader;
 //# sourceMappingURL=DSGlobalHeader.js.map

package/dist/cjs/DSGlobalHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSGlobalHeader.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes } 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 { GlobalHeaderContainer } from './parts/GlobalHeaderContainer.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderDatatestid, DSGlobalHeaderName } from './exported-related/index.js';\nimport type { DSGlobalHeaderT } from './react-desc-prop-types.js';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n\n  const globalAttrs = useGetGlobalAttributes(props);\n  const xstyledAttrs = useGetXstyledProps(props);\n\n  const { bg, backgroundColor } = props;\n\n  return (\n    <GlobalHeaderContainer\n      data-testid={DSGlobalHeaderDatatestid.CONTAINER}\n      globalAttrs={globalAttrs}\n      xstyledAttrs={xstyledAttrs}\n      bg={bg}\n      backgroundColor={backgroundColor}\n    >\n      <DSGlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderLogo />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </DSGlobalHeaderContext.Provider>\n    </GlobalHeaderContainer>\n  );\n};\n\nDSGlobalHeader.displayName = DSGlobalHeaderName;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader);\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BjB;AA7BN,8BAAqE;AACrE,mCAA0B;AAC1B,8BAAiC;AACjC,oCAAuC;AACvC,iCAAoC;AACpC,mCAAsC;AACtC,6BAAgC;AAChC,mCAAsC;AACtC,8BAAiC;AACjC,8BAA6D;AAG7D,MAAM,iBAAiB,CAAC,UAA8C;AACpE,gDAAiB,KAAK;AACtB,QAAM,UAAM,wCAAgB,KAAK;AAEjC,QAAM,kBAAc,gDAAuB,KAAK;AAChD,QAAM,mBAAe,4CAAmB,KAAK;AAE7C,QAAM,EAAE,IAAI,gBAAgB,IAAI;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,iDAAyB;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,uDAAC,mDAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,oDAAC,4CAAiB;AAAA,QAClB,4CAAC,wDAAuB;AAAA,QACxB,4CAAC,kDAAoB;AAAA,SACvB;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc;AACxD,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
+  "sourcesContent": ["import React from 'react';\nimport { omit } from 'lodash';\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';\n// import type { DSGlobalHeaderInternalsT } from './sharedTypes.js';\nimport { Container } from './parts/styles.js';\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n  const propsWithDefaults = ctx.props;\n  const globalAttrs = omit(useGetGlobalAttributes(propsWithDefaults), ['cols', 'rows', 'wrap']);\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n\n  return (\n    <Container\n      {...globalAttrs}\n      {...xstyledAttrs}\n      cols={['auto', '1fr', 'auto']}\n      forwardedAs=\"header\"\n      data-testid=\"ds-global-header\"\n    >\n      <DSGlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderLogo />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </DSGlobalHeaderContext.Provider>\n    </Container>\n  );\n};\n\nDSGlobalHeader.propTypes = propTypes;\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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BjB;AA3BN,oBAAqB;AACrB,8BAAqE;AACrE,mCAAgD;AAChD,8BAAiC;AACjC,oCAAuC;AACvC,iCAAoC;AACpC,mCAAsC;AACtC,6BAAgC;AAChC,8BAAiC;AACjC,8BAAmC;AAEnC,oBAA0B;AAC1B,MAAM,iBAAiB,CAAC,UAA8C;AACpE,gDAAiB,KAAK;AACtB,QAAM,UAAM,wCAAgB,KAAK;AACjC,QAAM,oBAAoB,IAAI;AAC9B,QAAM,kBAAc,wBAAK,gDAAuB,iBAAiB,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AAC5F,QAAM,mBAAe,4CAAmB,iBAAiB;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAY;AAAA,MAEZ,uDAAC,mDAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,oDAAC,4CAAiB;AAAA,QAClB,4CAAC,wDAAuB;AAAA,QACxB,4CAAC,kDAAoB;AAAA,SACvB;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,kCAAS,cAAc,EAAE,YAAY,gBAAgB;AACtF,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
   "names": []
 }

package/dist/cjs/config/useGlobalHeader.js

@@ -32,7 +32,7 @@ __export(useGlobalHeader_exports, {
 });
 module.exports = __toCommonJS(useGlobalHeader_exports);
 var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_uid = require("uid");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react_desc_prop_types = require("../react-desc-prop-types.js");
@@ -44,7 +44,7 @@ const useGlobalHeader = (props) => {
     () => new Array(propsWithDefaults.toolbar.length).fill("auto"),
     [propsWithDefaults.toolbar]
   );
-  const ctx = import_react.default.useMemo(
+  return (0, import_react.useMemo)(
     () => ({
       props: propsWithDefaults,
       showIconOnly,
@@ -54,6 +54,5 @@ const useGlobalHeader = (props) => {
     }),
     [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid]
   );
-  return ctx;
 };
 //# sourceMappingURL=useGlobalHeader.js.map

package/dist/cjs/config/useGlobalHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useGlobalHeader.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../react-desc-prop-types.js';\nimport type { DSGlobalHeaderInternalsT } from '../sharedTypes.js';\nimport type { DSGlobalHeaderT } from '../react-desc-prop-types.js';\n\nexport const useGlobalHeader = (props: DSGlobalHeaderT.Props): DSGlobalHeaderInternalsT.Context => {\n  const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n  const propsWithDefaults = useMemoMergePropsWithDefault(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 ctx = React.useMemo(\n    () => ({\n      props: propsWithDefaults,\n      showIconOnly,\n      setShowIconOnly,\n      instanceUID,\n      globalHeaderToolbarGrid,\n    }),\n    [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAyC;AACzC,iBAAoB;AACpB,8BAA6C;AAC7C,mCAA6B;AAItB,MAAM,kBAAkB,CAAC,UAAmE;AACjG,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAkB,KAAK;AAE/D,QAAM,wBAAoB,sDAA6B,OAAO,yCAAY;AAE1E,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,MAAM,aAAAA,QAAM;AAAA,IAChB,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,cAAc,aAAa,uBAAuB;AAAA,EACxE;AAEA,SAAO;AACT;",
-  "names": ["React"]
+  "sourcesContent": ["import { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { defaultProps, type DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport { type DSGlobalHeaderInternalsT } from '../sharedTypes.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  return useMemo(\n    () => ({\n      props: propsWithDefaults,\n      showIconOnly,\n      setShowIconOnly,\n      instanceUID,\n      globalHeaderToolbarGrid,\n    }),\n    [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid],\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,iBAAoB;AACpB,8BAA6C;AAC7C,mCAAmD;AAE5C,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,aAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,cAAc,aAAa,uBAAuB;AAAA,EACxE;AACF;",
+  "names": []
 }

package/dist/cjs/config/useValidateProps.js

@@ -88,7 +88,7 @@ const useValidateProps = (props) => {
       if (toolbarItem.type === "ds-popup-menu") {
         validatePopupItem(toolbarItem.componentProps);
       }
-      if (toolbarItem.type === "ds-app-picker") {
+      if (toolbarItem.type === "ds-app-picker" && toolbarItem.componentProps) {
         validateAppPickerItem(toolbarItem.componentProps);
       }
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useValidateProps.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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') {\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: 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,6BAQO;AAIP,MAAM,oBAAoB,CAAC,mBAA2E;AACpG,MAAI,eAAe,WAAW,CAAC,MAAM,QAAQ,eAAe,OAAO,GAAG;AACpE,2DAA2B,WAAW,eAAe,OAAO;AAAA,EAC9D;AACA,MAAI,eAAe,gBAAgB,OAAO,eAAe,iBAAiB,WAAW;AACnF,2DAA2B,gBAAgB,eAAe,YAAY;AAAA,EACxE;AACF;AAEA,MAAM,wBAAwB,CAAC,mBAA2E;AACxG,MAAI,eAAe,QAAQ,CAAC,MAAM,QAAQ,eAAe,IAAI,GAAG;AAC9D,+DAA+B,QAAQ,eAAe,IAAI;AAAA,EAC5D;AACA,MAAI,eAAe,cAAc,CAAC,MAAM,QAAQ,eAAe,UAAU,GAAG;AAC1E,+DAA+B,cAAc,eAAe,UAAU;AAAA,EACxE;AACA,MAAI,eAAe,gBAAgB,OAAO,eAAe,iBAAiB,UAAU;AAClF,+DAA+B,gBAAgB,eAAe,YAAY;AAAA,EAC5E;AACA,MAAI,eAAe,sBAAsB,OAAO,eAAe,uBAAuB,UAAU;AAC9F,+DAA+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,+CAAe,QAAQ,IAAI;AAAA,EAC7B;AAEA,MAAI,iBAAiB,OAAO,kBAAkB,YAAY;AACxD,+CAAe,iBAAiB,aAAa;AAAA,EAC/C;AAEA,cAAY,QAAQ,CAAC,mBAAmB;AACtC,QAAI,eAAe,SAAS,OAAO,eAAe,UAAU,UAAU;AACpE,2DAAyB,SAAS,eAAe,KAAK;AAAA,IACxD;AACA,QAAI,eAAe,WAAW,OAAO,eAAe,YAAY,YAAY;AAC1E,2DAAyB,WAAW,eAAe,OAAO;AAAA,IAC5D;AACA,QAAI,eAAe,WAAW,OAAO,eAAe,YAAY,WAAW;AACzE,2DAAyB,WAAW,eAAe,OAAO;AAAA,IAC5D;AACA,QAAI,eAAe,cAAc,OAAO,eAAe,eAAe,WAAW;AAC/E,2DAAyB,cAAc,eAAe,UAAU;AAAA,IAClE;AAAA,EACF,CAAC;AAED,WAAS,QAAQ,CAAC,gBAAgB;AAChC,QAAI,YAAY,MAAM;AACpB,UAAI,KAAC,2CAAmB,YAAY,IAAI,GAAG;AACzC,iEAA6B,QAAQ,YAAY,IAAI;AAAA,MACvD;AACA,UAAI,YAAY,kBAAkB,KAAC,iCAAS,YAAY,cAAc,GAAG;AACvE,iEAA6B,kBAAkB,YAAY,cAAc;AAAA,MAC3E;AACA,UAAI,YAAY,SAAS,iBAAiB;AACxC,0BAAkB,YAAY,cAAkE;AAAA,MAClG;AACA,UAAI,YAAY,SAAS,iBAAiB;AACxC,8BAAsB,YAAY,cAAc;AAAA,MAClD;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,6BAQO;AAIP,MAAM,oBAAoB,CAAC,mBAA2E;AACpG,MAAI,eAAe,WAAW,CAAC,MAAM,QAAQ,eAAe,OAAO,GAAG;AACpE,2DAA2B,WAAW,eAAe,OAAO;AAAA,EAC9D;AACA,MAAI,eAAe,gBAAgB,OAAO,eAAe,iBAAiB,WAAW;AACnF,2DAA2B,gBAAgB,eAAe,YAAY;AAAA,EACxE;AACF;AAEA,MAAM,wBAAwB,CAAC,mBAA2E;AACxG,MAAI,eAAe,QAAQ,CAAC,MAAM,QAAQ,eAAe,IAAI,GAAG;AAC9D,+DAA+B,QAAQ,eAAe,IAAI;AAAA,EAC5D;AACA,MAAI,eAAe,cAAc,CAAC,MAAM,QAAQ,eAAe,UAAU,GAAG;AAC1E,+DAA+B,cAAc,eAAe,UAAU;AAAA,EACxE;AACA,MAAI,eAAe,gBAAgB,OAAO,eAAe,iBAAiB,UAAU;AAClF,+DAA+B,gBAAgB,eAAe,YAAY;AAAA,EAC5E;AACA,MAAI,eAAe,sBAAsB,OAAO,eAAe,uBAAuB,UAAU;AAC9F,+DAA+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,+CAAe,QAAQ,IAAI;AAAA,EAC7B;AAEA,MAAI,iBAAiB,OAAO,kBAAkB,YAAY;AACxD,+CAAe,iBAAiB,aAAa;AAAA,EAC/C;AAEA,cAAY,QAAQ,CAAC,mBAAmB;AACtC,QAAI,eAAe,SAAS,OAAO,eAAe,UAAU,UAAU;AACpE,2DAAyB,SAAS,eAAe,KAAK;AAAA,IACxD;AACA,QAAI,eAAe,WAAW,OAAO,eAAe,YAAY,YAAY;AAC1E,2DAAyB,WAAW,eAAe,OAAO;AAAA,IAC5D;AACA,QAAI,eAAe,WAAW,OAAO,eAAe,YAAY,WAAW;AACzE,2DAAyB,WAAW,eAAe,OAAO;AAAA,IAC5D;AACA,QAAI,eAAe,cAAc,OAAO,eAAe,eAAe,WAAW;AAC/E,2DAAyB,cAAc,eAAe,UAAU;AAAA,IAClE;AAAA,EACF,CAAC;AAED,WAAS,QAAQ,CAAC,gBAAgB;AAChC,QAAI,YAAY,MAAM;AACpB,UAAI,KAAC,2CAAmB,YAAY,IAAI,GAAG;AACzC,iEAA6B,QAAQ,YAAY,IAAI;AAAA,MACvD;AACA,UAAI,YAAY,kBAAkB,KAAC,iCAAS,YAAY,cAAc,GAAG;AACvE,iEAA6B,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;",
   "names": []
 }

package/dist/cjs/index.js

@@ -36,4 +36,5 @@ var React = __toESM(require("react"));
 __reExport(src_exports, require("./DSGlobalHeader.js"), module.exports);
 __reExport(src_exports, require("./exported-related/index.js"), module.exports);
 var import_DSGlobalHeader = require("./DSGlobalHeader.js");
+var import_sharedTypes = require("./sharedTypes.js");
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './DSGlobalHeader.js';\nexport * from './exported-related/index.js';\nexport { GlobalHeader as default } from './DSGlobalHeader.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,gCAAd;AACA,wBAAc,wCADd;AAEA,4BAAwC;",
+  "sourcesContent": ["export * from './DSGlobalHeader.js';\nexport * from './exported-related/index.js';\nexport { GlobalHeader as default } from './DSGlobalHeader.js';\nexport { type DSGlobalHeaderInternalsT } from './sharedTypes.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,gCAAd;AACA,wBAAc,wCADd;AAEA,4BAAwC;AACxC,yBAA8C;",
   "names": []
 }

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

@@ -53,7 +53,7 @@ const GlobalHeaderBreadcrumb = () => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledPipe, { showIconOnly, "aria-hidden": true, "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.PIPE }),
         /* @__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) => {
-          const { onClick, isSelected, label, hasNext, id, ...rest } = item;
+          const { onClick, isSelected, label, hasNext, ...rest } = item;
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_PureBreadcrumb.PureBreadcrumb,
             {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Breadcrumb/GlobalHeaderBreadcrumb.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\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\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={showIconOnly} 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, id, ...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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,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;AAE5B,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,cAA4B,eAAW,MAAC,eAAa,iDAAyB,WAAW,MAAM;AAAA,QAC3G,4CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MACpE,+BAAqB,SACpB,4CAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,IAAI,GAAG,KAAK,IAAI;AAC7D,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,+BAA+B;AAAA,UAKzC;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,4CAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
+  "sourcesContent": ["import React from 'react';\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\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={showIconOnly} 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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADYnB;AAXJ,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;AAE5B,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,cAA4B,eAAW,MAAC,eAAa,iDAAyB,WAAW,MAAM;AAAA,QAC3G,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,+BAA+B;AAAA,UAKzC;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,4CAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
   "names": []
 }

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

@@ -55,7 +55,7 @@ const PureBreadcrumb = import_react.default.memo(
         "data-testid": import_exported_related.DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK,
         "aria-current": isSelected,
         id,
-        tabIndex: "0",
+        tabIndex: 0,
         ...rest,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_styles.StyledLabel,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Breadcrumb/PureBreadcrumb.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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';\n\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBnB;AAhBJ,mBAAkB;AAClB,oBAA6E;AAC7E,8BAAyC;AAGlC,MAAM,iBAAiB,aAAAA,QAAM;AAAA,EAClC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,MACE,6CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MACrE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,eAAa,iDAAyB,WAAW;AAAA,QACjD,gBAAc;AAAA,QACd;AAAA,QACA,UAAS;AAAA,QACR,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,YAAY,CAAC,CAAC;AAAA,YACd,YAAY,WAAW;AAAA,YACvB,eAAa,iDAAyB,WAAW;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,IACC,WAAW,4CAAC,+BAAc,MAAK,KAAI,eAAW,MAAC;AAAA,KAClD;AAEJ;",
+  "sourcesContent": ["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';\n\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBnB;AAhBJ,mBAAkB;AAClB,oBAA6E;AAC7E,8BAAyC;AAGlC,MAAM,iBAAiB,aAAAA,QAAM;AAAA,EAClC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,MACE,6CAAC,sCAAqB,eAAa,iDAAyB,WAAW,MACrE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,eAAa,iDAAyB,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,iDAAyB,WAAW;AAAA,YAEhD;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,IACC,WAAW,4CAAC,+BAAc,MAAK,KAAI,eAAW,MAAC;AAAA,KAClD;AAEJ;",
   "names": ["React"]
 }

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

@@ -153,6 +153,7 @@ const GlobalHeaderToolbar = () => {
                     role: "menuitem",
                     ref: setRef(index),
                     ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
+                    type: "button",
                     children: Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "m" })
                   }
                 )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    instanceUID,\n    globalHeaderToolbarGrid,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        onKeyDown={keyboardNavigation}\n        ref={listRef}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n      >\n        {toolbar.map((item, index) => {\n          const {\n            Icon,\n            type,\n            onClick,\n            onKeyPress,\n            CustomComponent,\n            label,\n            id = '',\n            componentProps = {},\n            ...otherProps\n          } = item;\n\n          switch (type) {\n            case 'ds-popup-menu':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <PopupMenu\n                    title={label}\n                    Icon={Icon}\n                    onClick={onClick}\n                    onKeyPress={onKeyPress}\n                    setRef={setRef(index)}\n                    id={id}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-app-picker':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <AppPicker\n                    label={label}\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-search-toggle':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <SearchToggle\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'custom':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  {CustomComponent && <CustomComponent item={item} role=\"menuitem\" setRef={setRef(index)} />}\n                </StyledToolbarItem>\n              );\n\n            default:\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <StyledButton\n                    onClick={onClick}\n                    title={label}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n                    id={id}\n                    role=\"menuitem\"\n                    ref={setRef(index)}\n                    {...getGlobalAttributes(otherProps)}\n                  >\n                    {Icon && <Icon size=\"m\" />}\n                  </StyledButton>\n                </StyledToolbarItem>\n              );\n          }\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    instanceUID,\n    globalHeaderToolbarGrid,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        onKeyDown={keyboardNavigation}\n        ref={listRef}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n      >\n        {toolbar.map((item, index) => {\n          const {\n            Icon,\n            type,\n            onClick,\n            onKeyPress,\n            CustomComponent,\n            label,\n            id = '',\n            componentProps = {},\n            ...otherProps\n          } = item;\n\n          switch (type) {\n            case 'ds-popup-menu':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <PopupMenu\n                    title={label}\n                    Icon={Icon}\n                    onClick={onClick}\n                    onKeyPress={onKeyPress}\n                    setRef={setRef(index)}\n                    id={id}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-app-picker':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <AppPicker\n                    label={label}\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-search-toggle':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <SearchToggle\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'custom':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  {CustomComponent && <CustomComponent item={item} role=\"menuitem\" setRef={setRef(index)} />}\n                </StyledToolbarItem>\n              );\n\n            default:\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <StyledButton\n                    onClick={onClick}\n                    title={label}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n                    id={id}\n                    role=\"menuitem\"\n                    ref={setRef(index)}\n                    {...getGlobalAttributes(otherProps)}\n                    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"],
+  "mappings": "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",
   "names": ["import_styles"]
 }

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

@@ -33,7 +33,7 @@ __export(AppPicker_exports, {
 module.exports = __toCommonJS(AppPicker_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_ds_app_picker = require("@elliemae/ds-app-picker");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
@@ -65,11 +65,6 @@ const AppPicker = ({
     triggerOnClick
   } = componentProps;
   const schedule = (0, import_ds_utilities.useCallbackAfterRender)();
-  const internalActionRef = (0, import_react.useMemo)(() => {
-    const ref = import_react.default.createRef();
-    ref.current = {};
-    return actionRef ?? ref;
-  }, [actionRef]);
   const focusTrigger = (0, import_react.useCallback)(() => internalTriggerRef.current?.focus(), []);
   const handleTriggerKeyDown = (0, import_react.useCallback)((e) => {
     if (e.code === "Enter" || e.code === "Space" || e.code === "ArrowDown") {
@@ -83,7 +78,7 @@ const AppPicker = ({
         schedule(focusTrigger);
       }
     },
-    [schedule]
+    [focusTrigger, schedule]
   );
   const handleOnClickOutside = (0, import_react.useCallback)(() => {
     setIsOpen(false);
@@ -93,12 +88,32 @@ const AppPicker = ({
       setIsOpen(true);
       setTimeout(() => {
         if (e.detail === 0)
-          internalActionRef.current.focusSelectedOrFirstAvailable();
+          actionRef?.current?.focusSelectedOrFirstAvailable?.();
         else
-          internalActionRef.current.focusWrapper();
+          actionRef?.current?.focusWrapper();
       }, 10);
     },
-    [internalActionRef]
+    [actionRef]
+  );
+  const TriggerDefaultComponent = ({ ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_styles.StyledButton,
+    {
+      onClick: triggerOnClick ?? handleOnClick,
+      onKeyDown: handleTriggerKeyDown,
+      ref: (buttonRef) => {
+        setRef(buttonRef);
+        (0, import_ds_utilities.mergeRefs)(internalTriggerRef, triggerRef, ref)(buttonRef);
+      },
+      "aria-label": label,
+      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+      role: "menuitem",
+      "aria-haspopup": true,
+      "aria-expanded": userIsOpen ?? isOpen,
+      id,
+      ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
+      type: "button",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MenuPicker, { width: 20.73, height: 20.73 })
+    }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ds_app_picker.DSAppPicker,
@@ -109,27 +124,9 @@ const AppPicker = ({
       customSectionTitle,
       icon,
       onKeyDown: userOnKeyDown ?? handleAppPickerOnKeyDown,
-      actionRef: internalActionRef,
+      actionRef,
       onClickOutside: userOnClickOutside ?? handleOnClickOutside,
-      renderTrigger: userRenderTrigger || (({ ref }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_styles.StyledButton,
-        {
-          onClick: triggerOnClick ?? handleOnClick,
-          onKeyDown: handleTriggerKeyDown,
-          ref: (buttonRef) => {
-            setRef(buttonRef);
-            (0, import_ds_utilities.mergeRefs)(internalTriggerRef, triggerRef, ref)(buttonRef);
-          },
-          "aria-label": label,
-          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
-          role: "menuitem",
-          "aria-haspopup": true,
-          "aria-expanded": userIsOpen ?? isOpen,
-          id,
-          ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MenuPicker, { width: 20.73, height: 20.73 })
-        }
-      )),
+      renderTrigger: userRenderTrigger || TriggerDefaultComponent,
       isOpen: userIsOpen ?? isOpen,
       onClose,
       triggerRef

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { MenuPicker } from '@elliemae/ds-icons';\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 internalActionRef = useMemo(() => {\n    const ref = React.createRef();\n    ref.current = {};\n    return actionRef ?? ref;\n  }, [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    [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) internalActionRef.current.focusSelectedOrFirstAvailable();\n        else internalActionRef.current.focusWrapper();\n      }, 10);\n    },\n    [internalActionRef],\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={internalActionRef}\n      onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n      renderTrigger={\n        userRenderTrigger ||\n        (({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n          <StyledButton\n            onClick={triggerOnClick ?? handleOnClick}\n            onKeyDown={handleTriggerKeyDown}\n            ref={(buttonRef: HTMLButtonElement) => {\n              setRef(buttonRef);\n              mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n            }}\n            aria-label={label}\n            data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n            role=\"menuitem\"\n            aria-haspopup\n            aria-expanded={userIsOpen ?? isOpen}\n            id={id}\n            {...getGlobalAttributes(otherProps)}\n          >\n            <MenuPicker width={20.73} height={20.73} />\n          </StyledButton>\n        ))\n      }\n      isOpen={userIsOpen ?? isOpen}\n      onClose={onClose}\n      triggerRef={triggerRef}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwGX;AAxGZ,mBAA8D;AAC9D,2BAA4B;AAC5B,0BAAkD;AAClD,8BAAoC;AACpC,sBAA2B;AAC3B,oBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4D;AAC1D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,yBAAqB,qBAA0B,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,eAAW,4CAAuB;AAExC,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,UAAM,MAAM,aAAAA,QAAM,UAAU;AAC5B,QAAI,UAAU,CAAC;AACf,WAAO,aAAa;AAAA,EACtB,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,2BAAmD,0BAAY,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,+BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW;AAAG,4BAAkB,QAAQ,8BAA8B;AAAA;AACvE,4BAAkB,QAAQ,aAAa;AAAA,MAC9C,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B,WAAW;AAAA,MACX,gBAAgB,sBAAsB;AAAA,MACtC,eACE,sBACC,CAAC,EAAE,IAAI,MACN;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,kBAAkB;AAAA,UAC3B,WAAW;AAAA,UACX,KAAK,CAAC,cAAiC;AACrC,mBAAO,SAAS;AAChB,+CAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,UAC1D;AAAA,UACA,cAAY;AAAA,UACZ,eAAa,iDAAyB,QAAQ;AAAA,UAC9C,MAAK;AAAA,UACL,iBAAa;AAAA,UACb,iBAAe,cAAc;AAAA,UAC7B;AAAA,UACC,OAAG,6CAAoB,UAAU;AAAA,UAElC,sDAAC,8BAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,MAC3C;AAAA,MAGJ,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
-  "names": ["React"]
+  "sourcesContent": ["import React, { useState, useRef, useCallback } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { MenuPicker } from '@elliemae/ds-icons';\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  const TriggerDefaultComponent = ({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n    <StyledButton\n      onClick={triggerOnClick ?? handleOnClick}\n      onKeyDown={handleTriggerKeyDown}\n      ref={(buttonRef: HTMLButtonElement) => {\n        setRef(buttonRef);\n        mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n      }}\n      aria-label={label}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n      role=\"menuitem\"\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0FjB;AA1FN,mBAAqD;AACrD,2BAA4B;AAC5B,0BAAkD;AAClD,8BAAoC;AACpC,sBAA2B;AAC3B,oBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4D;AAC1D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,yBAAqB,qBAA0B,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,eAAW,4CAAuB;AAKxC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,2BAAmD,0BAAY,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,+BAA2B;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,2BAAuB,0BAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW;AAAG,qBAAW,SAAS,gCAAgC;AAAA;AACnE,qBAAW,SAAS,aAAa;AAAA,MACxC,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,0BAA0B,CAAC,EAAE,IAAI,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,KAAK,CAAC,cAAiC;AACrC,eAAO,SAAS;AAChB,2CAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,iDAAyB,QAAQ;AAAA,MAC9C,MAAK;AAAA,MACL,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,8BAAW,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/cjs/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js

@@ -86,10 +86,13 @@ const PopupMenu = ({
     if (closeOnClick && userIsOpen === void 0)
       handleOnClose();
   }, [closeOnClick, handleOnClose, userIsOpen]);
-  const handleRefs = (0, import_react.useCallback)((ref) => {
-    setRef(ref);
-    setButtonRef(ref);
-  }, []);
+  const handleRefs = (0, import_react.useCallback)(
+    (ref) => {
+      setRef(ref);
+      setButtonRef(ref);
+    },
+    [setRef]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_styles.StyledButton,
@@ -103,10 +106,11 @@ const PopupMenu = ({
         "aria-expanded": userIsOpen ?? isOpen,
         id,
         ...(0, import_ds_props_helpers.useGetGlobalAttributes)(otherProps),
+        type: "button",
         children: Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "m" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    buttonRef ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_ds_popperjs.DSPopperJS,
       {
         referenceElement: buttonRef,
@@ -125,7 +129,7 @@ const PopupMenu = ({
           }
         )
       }
-    )
+    ) : null
   ] });
 };
 //# sourceMappingURL=PopupMenu.js.map

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const PopupMenu = ({\n  Icon,\n  onClick,\n  id,\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderInternalsT.PopupProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n\n  const {\n    onClickOutside = () => null,\n    onKeyPress,\n    popupOnKeyPress,\n    isOpen: userIsOpen,\n    options,\n    closeOnClick,\n  } = componentProps;\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'ArrowDown') {\n        setIsOpen(true);\n      }\n      if (onKeyPress) onKeyPress(e);\n    },\n    [onKeyPress],\n  );\n\n  const handleOnClose = useCallback(() => {\n    if (userIsOpen === undefined) {\n      setIsOpen(false);\n    }\n    buttonRef?.focus();\n  }, [buttonRef, userIsOpen]);\n\n  const handleTriggerOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleItemClick = useCallback(() => {\n    if (closeOnClick && userIsOpen === undefined) handleOnClose();\n  }, [closeOnClick, handleOnClose, userIsOpen]);\n\n  const handleRefs = useCallback((ref: HTMLButtonElement) => {\n    setRef(ref);\n    setButtonRef(ref);\n  }, []);\n\n  return (\n    <>\n      <StyledButton\n        onClick={handleTriggerOnClick}\n        onKeyDown={handleOnKeyDown}\n        ref={handleRefs}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n        role=\"menuitem\"\n        aria-haspopup\n        aria-expanded={userIsOpen ?? isOpen}\n        id={id}\n        {...useGetGlobalAttributes(otherProps)}\n      >\n        {Icon && <Icon size=\"m\" />}\n      </StyledButton>\n      <DSPopperJS\n        referenceElement={buttonRef}\n        showPopover={userIsOpen ?? isOpen}\n        closeContextMenu={handleOnClose}\n        onClickOutside={onClickOutside}\n        withoutPortal\n      >\n        <PopupMenuContent\n          options={options}\n          onItemClick={handleItemClick}\n          onClose={handleOnClose}\n          setIsOpen={setIsOpen}\n          popupOnKeyPress={popupOnKeyPress}\n        />\n      </DSPopperJS>\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+DnB;AA/DJ,mBAA6C;AAC7C,8BAAuC;AACvC,yBAA2B;AAC3B,8BAAiC;AACjC,oBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwD;AACtD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAmC,IAAI;AAEzE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,aAAa;AAC1B,kBAAU,IAAI;AAAA,MAChB;AACA,UAAI;AAAY,mBAAW,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU,KAAK;AAAA,IACjB;AACA,eAAW,MAAM;AAAA,EACnB,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,2BAAuB;AAAA,IAC3B,CAAC,MAAwB;AACvB,UAAI,eAAe;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,sBAAkB,0BAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW,oBAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,iBAAa,0BAAY,CAAC,QAA2B;AACzD,WAAO,GAAG;AACV,iBAAa,GAAG;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX,KAAK;AAAA,QACL,eAAa,iDAAyB,QAAQ;AAAA,QAC9C,MAAK;AAAA,QACL,iBAAa;AAAA,QACb,iBAAe,cAAc;AAAA,QAC7B;AAAA,QACC,OAAG,gDAAuB,UAAU;AAAA,QAEpC,kBAAQ,4CAAC,QAAK,MAAK,KAAI;AAAA;AAAA,IAC1B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,aAAa,cAAc;AAAA,QAC3B,kBAAkB;AAAA,QAClB;AAAA,QACA,eAAa;AAAA,QAEb;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,aAAa;AAAA,YACb,SAAS;AAAA,YACT;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import React, { useState, useCallback } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const PopupMenu = ({\n  Icon,\n  onClick,\n  id,\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderInternalsT.PopupProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n\n  const {\n    onClickOutside = () => null,\n    onKeyPress,\n    popupOnKeyPress,\n    isOpen: userIsOpen,\n    options,\n    closeOnClick,\n  } = componentProps;\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'ArrowDown') {\n        setIsOpen(true);\n      }\n      if (onKeyPress) onKeyPress(e);\n    },\n    [onKeyPress],\n  );\n\n  const handleOnClose = useCallback(() => {\n    if (userIsOpen === undefined) {\n      setIsOpen(false);\n    }\n    buttonRef?.focus();\n  }, [buttonRef, userIsOpen]);\n\n  const handleTriggerOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleItemClick = useCallback(() => {\n    if (closeOnClick && userIsOpen === undefined) handleOnClose();\n  }, [closeOnClick, handleOnClose, userIsOpen]);\n\n  const handleRefs = useCallback(\n    (ref: HTMLButtonElement) => {\n      setRef(ref);\n      setButtonRef(ref);\n    },\n    [setRef],\n  );\n\n  return (\n    <>\n      <StyledButton\n        onClick={handleTriggerOnClick}\n        onKeyDown={handleOnKeyDown}\n        ref={handleRefs}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n        role=\"menuitem\"\n        aria-haspopup\n        aria-expanded={userIsOpen ?? isOpen}\n        id={id}\n        {...useGetGlobalAttributes(otherProps)}\n        type=\"button\"\n      >\n        {Icon && <Icon size=\"m\" />}\n      </StyledButton>\n      {buttonRef ? (\n        <DSPopperJS\n          referenceElement={buttonRef}\n          showPopover={userIsOpen ?? isOpen}\n          closeContextMenu={handleOnClose}\n          onClickOutside={onClickOutside}\n          withoutPortal\n        >\n          <PopupMenuContent\n            options={options}\n            onItemClick={handleItemClick}\n            onClose={handleOnClose}\n            setIsOpen={setIsOpen}\n            popupOnKeyPress={popupOnKeyPress}\n          />\n        </DSPopperJS>\n      ) : null}\n    </>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkEnB;AAlEJ,mBAA6C;AAC7C,8BAAuC;AACvC,yBAA2B;AAC3B,8BAAiC;AACjC,oBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwD;AACtD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAmC,IAAI;AAEzE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,aAAa;AAC1B,kBAAU,IAAI;AAAA,MAChB;AACA,UAAI;AAAY,mBAAW,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU,KAAK;AAAA,IACjB;AACA,eAAW,MAAM;AAAA,EACnB,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,2BAAuB;AAAA,IAC3B,CAAC,MAAwB;AACvB,UAAI,eAAe;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,sBAAkB,0BAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW,oBAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,iBAAa;AAAA,IACjB,CAAC,QAA2B;AAC1B,aAAO,GAAG;AACV,mBAAa,GAAG;AAAA,IAClB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX,KAAK;AAAA,QACL,eAAa,iDAAyB,QAAQ;AAAA,QAC9C,MAAK;AAAA,QACL,iBAAa;AAAA,QACb,iBAAe,cAAc;AAAA,QAC7B;AAAA,QACC,OAAG,gDAAuB,UAAU;AAAA,QACrC,MAAK;AAAA,QAEJ,kBAAQ,4CAAC,QAAK,MAAK,KAAI;AAAA;AAAA,IAC1B;AAAA,IACC,YACC;AAAA,MAAC;AAAA;AAAA,QACC,kBAAkB;AAAA,QAClB,aAAa,cAAc;AAAA,QAC3B,kBAAkB;AAAA,QAClB;AAAA,QACA,eAAa;AAAA,QAEb;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,aAAa;AAAA,YACb,SAAS;AAAA,YACT;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA,IACF,IACE;AAAA,KACN;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js

@@ -90,6 +90,7 @@ const PopupMenuContent = import_react.default.memo(
                   id,
                   "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
                   ...globalAttrs,
+                  type: "button",
                   children: Content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {})
                 }
               )
@@ -111,6 +112,7 @@ const PopupMenuContent = import_react.default.memo(
                   id,
                   "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
                   ...globalAttrs,
+                  type: "button",
                   children: [
                     Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
                     label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, { "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL, children: label })

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.tsx", "../../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledSeparator, StyledItemButton, StyledLabel, StyledList, StyledItemContainer } from './styles.js';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../../exported-related/index.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../../sharedTypes.js';\n\nexport const PopupMenuContent = React.memo(\n  ({\n    options,\n    onItemClick,\n    onClose,\n    popupOnKeyPress,\n    setIsOpen,\n  }: DSGlobalHeaderInternalsT.PopupMenuContentProps): JSX.Element => {\n    const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n    const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n    return (\n      <StyledList ref={menuRef} role=\"menu\" data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST}>\n        {options.map((option) => {\n          const { type, Icon, label = '', onClick, Content, id, ...rest } = option;\n\n          const globalAttrs = getGlobalAttributes(rest);\n\n          const handleClick = (e: React.MouseEvent) => {\n            onItemClick();\n            if (onClick) onClick(e);\n          };\n\n          const handleKeyDown = (e: React.KeyboardEvent) => {\n            keyboardNavigation(e);\n            if (e.code === 'Escape') onClose();\n            if (popupOnKeyPress) popupOnKeyPress(e);\n          };\n\n          switch (type) {\n            case 'separator':\n              return (\n                <StyledSeparator\n                  key={`${instanceUID}-separator-${label}`}\n                  role=\"none\"\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR}\n                  {...globalAttrs}\n                />\n              );\n            case 'custom':\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n                >\n                  <StyledItemButton\n                    ref={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    id={id}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n                    {...globalAttrs}\n                  >\n                    {Content && <Content />}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n            default:\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n                >\n                  <StyledItemButton\n                    ref={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    id={id}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n                    {...globalAttrs}\n                  >\n                    {Icon && <Icon />}\n                    {label && (\n                      <StyledLabel data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL}>\n                        {label}\n                      </StyledLabel>\n                    )}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n          }\n        })}\n      </StyledList>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCP;AAzChB,mBAAkC;AAClC,8BAAoC;AACpC,oBAAgG;AAChG,mCAAsC;AACtC,8BAAyC;AACzC,iCAAoC;AAG7B,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmE;AACjE,UAAM,EAAE,YAAY,QAAI,yBAAW,kDAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,gDAAoB,EAAE,UAAU,CAAC;AAEjF,WACE,4CAAC,4BAAW,KAAK,SAAS,MAAK,QAAO,eAAa,iDAAyB,QAAQ,WAAW,MAC5F,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,IAAI,GAAG,KAAK,IAAI;AAElE,YAAM,kBAAc,6CAAoB,IAAI;AAE5C,YAAM,cAAc,CAAC,MAAwB;AAC3C,oBAAY;AACZ,YAAI;AAAS,kBAAQ,CAAC;AAAA,MACxB;AAEA,YAAM,gBAAgB,CAAC,MAA2B;AAChD,2BAAmB,CAAC;AACpB,YAAI,EAAE,SAAS;AAAU,kBAAQ;AACjC,YAAI;AAAiB,0BAAgB,CAAC;AAAA,MACxC;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cACxD,GAAG;AAAA;AAAA,YAHC,GAAG,yBAAyB;AAAA,UAInC;AAAA,QAEJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBAEH,qBAAW,4CAAC,WAAQ;AAAA;AAAA,cACvB;AAAA;AAAA,YAbK,GAAG,qBAAqB;AAAA,UAc/B;AAAA,QAEJ;AACE,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBAEH;AAAA,4BAAQ,4CAAC,QAAK;AAAA,oBACd,SACC,4CAAC,6BAAY,eAAa,iDAAyB,QAAQ,WAAW,mBACnE,iBACH;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA,YAlBK,GAAG,qBAAqB;AAAA,UAmB/B;AAAA,MAEN;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledSeparator, StyledItemButton, StyledLabel, StyledList, StyledItemContainer } from './styles.js';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../../exported-related/index.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../../sharedTypes.js';\n\nexport const PopupMenuContent = React.memo(\n  ({\n    options,\n    onItemClick,\n    onClose,\n    popupOnKeyPress,\n    setIsOpen,\n  }: DSGlobalHeaderInternalsT.PopupMenuContentProps): JSX.Element => {\n    const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n    const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n    return (\n      <StyledList ref={menuRef} role=\"menu\" data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST}>\n        {options.map((option) => {\n          const { type, Icon, label = '', onClick, Content, id, ...rest } = option;\n\n          const globalAttrs = getGlobalAttributes(rest);\n\n          const handleClick = (e: React.MouseEvent) => {\n            onItemClick();\n            if (onClick) onClick(e);\n          };\n\n          const handleKeyDown = (e: React.KeyboardEvent) => {\n            keyboardNavigation(e);\n            if (e.code === 'Escape') onClose();\n            if (popupOnKeyPress) popupOnKeyPress(e);\n          };\n\n          switch (type) {\n            case 'separator':\n              return (\n                <StyledSeparator\n                  key={`${instanceUID}-separator-${label}`}\n                  role=\"none\"\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR}\n                  {...globalAttrs}\n                />\n              );\n            case 'custom':\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n                >\n                  <StyledItemButton\n                    ref={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    id={id}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n                    {...globalAttrs}\n                    type=\"button\"\n                  >\n                    {Content && <Content />}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n            default:\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n                >\n                  <StyledItemButton\n                    ref={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    id={id}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n                    {...globalAttrs}\n                    type=\"button\"\n                  >\n                    {Icon && <Icon />}\n                    {label && (\n                      <StyledLabel data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL}>\n                        {label}\n                      </StyledLabel>\n                    )}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n          }\n        })}\n      </StyledList>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCP;AAzChB,mBAAkC;AAClC,8BAAoC;AACpC,oBAAgG;AAChG,mCAAsC;AACtC,8BAAyC;AACzC,iCAAoC;AAG7B,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmE;AACjE,UAAM,EAAE,YAAY,QAAI,yBAAW,kDAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,gDAAoB,EAAE,UAAU,CAAC;AAEjF,WACE,4CAAC,4BAAW,KAAK,SAAS,MAAK,QAAO,eAAa,iDAAyB,QAAQ,WAAW,MAC5F,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,IAAI,GAAG,KAAK,IAAI;AAElE,YAAM,kBAAc,6CAAoB,IAAI;AAE5C,YAAM,cAAc,CAAC,MAAwB;AAC3C,oBAAY;AACZ,YAAI;AAAS,kBAAQ,CAAC;AAAA,MACxB;AAEA,YAAM,gBAAgB,CAAC,MAA2B;AAChD,2BAAmB,CAAC;AACpB,YAAI,EAAE,SAAS;AAAU,kBAAQ;AACjC,YAAI;AAAiB,0BAAgB,CAAC;AAAA,MACxC;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cACxD,GAAG;AAAA;AAAA,YAHC,GAAG,yBAAyB;AAAA,UAInC;AAAA,QAEJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ,qBAAW,4CAAC,WAAQ;AAAA;AAAA,cACvB;AAAA;AAAA,YAdK,GAAG,qBAAqB;AAAA,UAe/B;AAAA,QAEJ;AACE,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ;AAAA,4BAAQ,4CAAC,QAAK;AAAA,oBACd,SACC,4CAAC,6BAAY,eAAa,iDAAyB,QAAQ,WAAW,mBACnE,iBACH;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA,YAnBK,GAAG,qBAAqB;AAAA,UAoB/B;AAAA,MAEN;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

package/dist/cjs/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/usePopupMenuContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/usePopupMenuContent.tsx", "../../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useRef, useCallback, useEffect } from 'react';\n\ninterface UsePopupMenuContentT {\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nexport const usePopupMenuContent = ({ setIsOpen }: UsePopupMenuContentT) => {\n  const menuRef = useRef<HTMLDivElement>(null);\n  const allMenuItemsRef = useRef<HTMLButtonElement[]>([]);\n\n  const setRef = useCallback((ref: HTMLButtonElement) => {\n    if (ref && !allMenuItemsRef.current.includes(ref)) {\n      allMenuItemsRef.current.push(ref);\n    }\n\n    allMenuItemsRef.current.forEach((item, index) => {\n      if (index === 0) {\n        item?.setAttribute?.('tabindex', '0');\n      } else {\n        item?.setAttribute?.('tabindex', '-1');\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    allMenuItemsRef.current?.[0]?.focus();\n  }, []);\n\n  const keyboardNavigation = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Tab') {\n        setIsOpen(false);\n      } else {\n        const currentIndex = allMenuItemsRef.current.indexOf(e.target as HTMLButtonElement);\n        const allRefsLength = allMenuItemsRef.current.length;\n        if (e.key === 'ArrowDown') {\n          if (currentIndex < allRefsLength - 1) {\n            allMenuItemsRef.current[currentIndex + 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[0]?.focus?.();\n          }\n        }\n        if (e.key === 'ArrowUp') {\n          if (currentIndex === 0) {\n            allMenuItemsRef.current[allRefsLength - 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[currentIndex - 1]?.focus?.();\n          }\n        }\n      }\n    },\n    [setIsOpen],\n  );\n\n  return {\n    menuRef,\n    setRef,\n    keyboardNavigation,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAMxC,MAAM,sBAAsB,CAAC,EAAE,UAAU,MAA4B;AAC1E,QAAM,cAAU,qBAAuB,IAAI;AAC3C,QAAM,sBAAkB,qBAA4B,CAAC,CAAC;AAEtD,QAAM,aAAS,0BAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,gBAAgB,QAAQ,SAAS,GAAG,GAAG;AACjD,sBAAgB,QAAQ,KAAK,GAAG;AAAA,IAClC;AAEA,oBAAgB,QAAQ,QAAQ,CAAC,MAAM,UAAU;AAC/C,UAAI,UAAU,GAAG;AACf,cAAM,eAAe,YAAY,GAAG;AAAA,MACtC,OAAO;AACL,cAAM,eAAe,YAAY,IAAI;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,oBAAgB,UAAU,CAAC,GAAG,MAAM;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,OAAO;AACpB,kBAAU,KAAK;AAAA,MACjB,OAAO;AACL,cAAM,eAAe,gBAAgB,QAAQ,QAAQ,EAAE,MAA2B;AAClF,cAAM,gBAAgB,gBAAgB,QAAQ;AAC9C,YAAI,EAAE,QAAQ,aAAa;AACzB,cAAI,eAAe,gBAAgB,GAAG;AACpC,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD,OAAO;AACL,4BAAgB,QAAQ,CAAC,GAAG,QAAQ;AAAA,UACtC;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,WAAW;AACvB,cAAI,iBAAiB,GAAG;AACtB,4BAAgB,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,UACtD,OAAO;AACL,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useRef, useCallback, useEffect } from 'react';\n\ninterface UsePopupMenuContentT {\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nexport const usePopupMenuContent = ({ setIsOpen }: UsePopupMenuContentT) => {\n  const menuRef = useRef<HTMLUListElement>(null);\n  const allMenuItemsRef = useRef<HTMLButtonElement[]>([]);\n\n  const setRef = useCallback((ref: HTMLButtonElement) => {\n    if (ref && !allMenuItemsRef.current.includes(ref)) {\n      allMenuItemsRef.current.push(ref);\n    }\n\n    allMenuItemsRef.current.forEach((item, index) => {\n      if (index === 0) {\n        item?.setAttribute?.('tabindex', '0');\n      } else {\n        item?.setAttribute?.('tabindex', '-1');\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    allMenuItemsRef.current?.[0]?.focus();\n  }, []);\n\n  const keyboardNavigation = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Tab') {\n        setIsOpen(false);\n      } else {\n        const currentIndex = allMenuItemsRef.current.indexOf(e.target as HTMLButtonElement);\n        const allRefsLength = allMenuItemsRef.current.length;\n        if (e.key === 'ArrowDown') {\n          if (currentIndex < allRefsLength - 1) {\n            allMenuItemsRef.current[currentIndex + 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[0]?.focus?.();\n          }\n        }\n        if (e.key === 'ArrowUp') {\n          if (currentIndex === 0) {\n            allMenuItemsRef.current[allRefsLength - 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[currentIndex - 1]?.focus?.();\n          }\n        }\n      }\n    },\n    [setIsOpen],\n  );\n\n  return {\n    menuRef,\n    setRef,\n    keyboardNavigation,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAMxC,MAAM,sBAAsB,CAAC,EAAE,UAAU,MAA4B;AAC1E,QAAM,cAAU,qBAAyB,IAAI;AAC7C,QAAM,sBAAkB,qBAA4B,CAAC,CAAC;AAEtD,QAAM,aAAS,0BAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,gBAAgB,QAAQ,SAAS,GAAG,GAAG;AACjD,sBAAgB,QAAQ,KAAK,GAAG;AAAA,IAClC;AAEA,oBAAgB,QAAQ,QAAQ,CAAC,MAAM,UAAU;AAC/C,UAAI,UAAU,GAAG;AACf,cAAM,eAAe,YAAY,GAAG;AAAA,MACtC,OAAO;AACL,cAAM,eAAe,YAAY,IAAI;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,oBAAgB,UAAU,CAAC,GAAG,MAAM;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,OAAO;AACpB,kBAAU,KAAK;AAAA,MACjB,OAAO;AACL,cAAM,eAAe,gBAAgB,QAAQ,QAAQ,EAAE,MAA2B;AAClF,cAAM,gBAAgB,gBAAgB,QAAQ;AAC9C,YAAI,EAAE,QAAQ,aAAa;AACzB,cAAI,eAAe,gBAAgB,GAAG;AACpC,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD,OAAO;AACL,4BAAgB,QAAQ,CAAC,GAAG,QAAQ;AAAA,UACtC;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,WAAW;AACvB,cAAI,iBAAiB,GAAG;AACtB,4BAAgB,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,UACtD,OAAO;AACL,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.js

@@ -144,6 +144,7 @@ const SearchToggle = ({
       role: "menuitem",
       "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON,
       ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
+      type: "button",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, {})
     }
   );