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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React, { useCallback, useState } from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { StyledButton } from '../../../styles.js';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent.js';\n\nexport const PopupMenu = ({\n  Icon,\n  onClick,\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderT.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        innerRef={handleRefs}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n        aria-haspopup\n        aria-expanded={userIsOpen ?? isOpen}\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACiEnB,mBAWa,KAXb;AAjEJ,SAAS,kBAAkB;AAC3B,SAAS,8BAA8B;AACvC,SAAgB,aAAa,gBAAgB;AAC7C,SAAS,gCAAgC;AAEzC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAE1B,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+C;AAC7C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAmC,IAAI;AAEzE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,aAAa;AAC1B,kBAAU,IAAI;AAAA,MAChB;AACA,UAAI,WAAY,YAAW,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU,KAAK;AAAA,IACjB;AACA,eAAW,MAAM;AAAA,EACnB,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAwB;AACvB,UAAI,eAAe,OAAW,WAAU,IAAI;AAC5C,UAAI,QAAS,SAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe,OAAW,eAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,aAAa;AAAA,IACjB,CAAC,QAA2B;AAC1B,aAAO,GAAG;AACV,mBAAa,GAAG;AAAA,IAClB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,eAAa,yBAAyB,QAAQ;AAAA,QAC9C,iBAAa;AAAA,QACb,iBAAe,cAAc;AAAA,QAC5B,GAAG,uBAAuB,UAAU;AAAA,QACrC,MAAK;AAAA,QAEJ,kBAAQ,oBAAC,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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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        innerRef={handleRefs}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\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"],
+  "mappings": "AAAA,YAAY,WAAW;ACkEnB,mBAYa,KAZb;AAlEJ,SAAgB,UAAU,mBAAmB;AAC7C,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwD;AACtD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAmC,IAAI;AAEzE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,aAAa;AAC1B,kBAAU,IAAI;AAAA,MAChB;AACA,UAAI,WAAY,YAAW,CAAC;AAAA,IAC9B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU,KAAK;AAAA,IACjB;AACA,eAAW,MAAM;AAAA,EACnB,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAwB;AACvB,UAAI,eAAe,OAAW,WAAU,IAAI;AAC5C,UAAI,QAAS,SAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe,OAAW,eAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,aAAa;AAAA,IACjB,CAAC,QAA2B;AAC1B,aAAO,GAAG;AACV,mBAAa,GAAG;AAAA,IAClB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,eAAa,yBAAyB,QAAQ;AAAA,QAC9C,iBAAa;AAAA,QACb,iBAAe,cAAc;AAAA,QAC7B;AAAA,QACC,GAAG,uBAAuB,UAAU;AAAA,QACrC,MAAK;AAAA,QAEJ,kBAAQ,oBAAC,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/esm/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { getGlobalAttributes } from "@elliemae/ds-props-helpers";
 import React2, { useContext } from "react";
+import { getGlobalAttributes } from "@elliemae/ds-props-helpers";
+import { StyledSeparator, StyledItemButton, StyledLabel, StyledList, StyledItemContainer } from "./styles.js";
 import { DSGlobalHeaderContext } from "../../../../../DSGlobalHeaderContext.js";
 import { DSGlobalHeaderDatatestid } from "../../../../../exported-related/index.js";
-import { StyledItemButton, StyledItemContainer, StyledLabel, StyledList, StyledSeparator } from "./styles.js";
 import { usePopupMenuContent } from "./usePopupMenuContent.js";
 const PopupMenuContent = React2.memo(
   ({
@@ -17,7 +17,7 @@ const PopupMenuContent = React2.memo(
     const { instanceUID } = useContext(DSGlobalHeaderContext);
     const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });
     return /* @__PURE__ */ jsx(StyledList, { innerRef: menuRef, role: "menu", "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST, children: options.map((option) => {
-      const { type, Icon, label = "", onClick, Content, ...rest } = option;
+      const { type, Icon, label = "", onClick, Content, id, ...rest } = option;
       const globalAttrs = getGlobalAttributes(rest);
       const handleClick = (e) => {
         onItemClick();
@@ -51,6 +51,7 @@ const PopupMenuContent = React2.memo(
                   innerRef: setRef,
                   onClick: handleClick,
                   onKeyDown: handleKeyDown,
+                  id,
                   "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
                   ...globalAttrs,
                   type: "button",
@@ -72,6 +73,7 @@ const PopupMenuContent = React2.memo(
                   innerRef: setRef,
                   onClick: handleClick,
                   onKeyDown: handleKeyDown,
+                  id,
                   "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
                   ...globalAttrs,
                   type: "button",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React, { useContext } from 'react';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../../react-desc-prop-types.js';\nimport { StyledItemButton, StyledItemContainer, StyledLabel, StyledList, StyledSeparator } from './styles.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\n\nexport const PopupMenuContent = React.memo(\n  ({\n    options,\n    onItemClick,\n    onClose,\n    popupOnKeyPress,\n    setIsOpen,\n  }: DSGlobalHeaderT.PopupMenuContentProps): JSX.Element => {\n    const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n    const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n    return (\n      <StyledList innerRef={menuRef} role=\"menu\" data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST}>\n        {options.map((option) => {\n          const { type, Icon, label = '', onClick, Content, ...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                    innerRef={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\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                    innerRef={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\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"],
-  "mappings": "AAAA,YAAY,WAAW;ACyCP,cAiCE,YAjCF;AAzChB,SAAS,2BAA2B;AACpC,OAAOA,UAAS,kBAAkB;AAClC,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AAEzC,SAAS,kBAAkB,qBAAqB,aAAa,YAAY,uBAAuB;AAChG,SAAS,2BAA2B;AAE7B,MAAM,mBAAmBA,OAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAA0D;AACxD,UAAM,EAAE,YAAY,IAAI,WAAW,qBAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,IAAI,oBAAoB,EAAE,UAAU,CAAC;AAEjF,WACE,oBAAC,cAAW,UAAU,SAAS,MAAK,QAAO,eAAa,yBAAyB,QAAQ,WAAW,MACjG,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,GAAG,KAAK,IAAI;AAE9D,YAAM,cAAc,oBAAoB,IAAI;AAE5C,YAAM,cAAc,CAAC,MAAwB;AAC3C,oBAAY;AACZ,YAAI,QAAS,SAAQ,CAAC;AAAA,MACxB;AAEA,YAAM,gBAAgB,CAAC,MAA2B;AAChD,2BAAmB,CAAC;AACpB,YAAI,EAAE,SAAS,SAAU,SAAQ;AACjC,YAAI,gBAAiB,iBAAgB,CAAC;AAAA,MACxC;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cACxD,GAAG;AAAA;AAAA,YAHC,GAAG,WAAW,cAAc,KAAK;AAAA,UAIxC;AAAA,QAEJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX,eAAa,yBAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ,qBAAW,oBAAC,WAAQ;AAAA;AAAA,cACvB;AAAA;AAAA,YAbK,GAAG,WAAW,UAAU,KAAK;AAAA,UAcpC;AAAA,QAEJ;AACE,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX,eAAa,yBAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ;AAAA,4BAAQ,oBAAC,QAAK;AAAA,oBACd,SACC,oBAAC,eAAY,eAAa,yBAAyB,QAAQ,WAAW,mBACnE,iBACH;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA,YAlBK,GAAG,WAAW,UAAU,KAAK;AAAA,UAmBpC;AAAA,MAEN;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 innerRef={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                    innerRef={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                    innerRef={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"],
+  "mappings": "AAAA,YAAY,WAAW;ACyCP,cAkCE,YAlCF;AAzChB,OAAOA,UAAS,kBAAkB;AAClC,SAAS,2BAA2B;AACpC,SAAS,iBAAiB,kBAAkB,aAAa,YAAY,2BAA2B;AAChG,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AAG7B,MAAM,mBAAmBA,OAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmE;AACjE,UAAM,EAAE,YAAY,IAAI,WAAW,qBAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,IAAI,oBAAoB,EAAE,UAAU,CAAC;AAEjF,WACE,oBAAC,cAAW,UAAU,SAAS,MAAK,QAAO,eAAa,yBAAyB,QAAQ,WAAW,MACjG,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,IAAI,GAAG,KAAK,IAAI;AAElE,YAAM,cAAc,oBAAoB,IAAI;AAE5C,YAAM,cAAc,CAAC,MAAwB;AAC3C,oBAAY;AACZ,YAAI,QAAS,SAAQ,CAAC;AAAA,MACxB;AAEA,YAAM,gBAAgB,CAAC,MAA2B;AAChD,2BAAmB,CAAC;AACpB,YAAI,EAAE,SAAS,SAAU,SAAQ;AACjC,YAAI,gBAAiB,iBAAgB,CAAC;AAAA,MACxC;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cACxD,GAAG;AAAA;AAAA,YAHC,GAAG,WAAW,cAAc,KAAK;AAAA,UAIxC;AAAA,QAEJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,yBAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ,qBAAW,oBAAC,WAAQ;AAAA;AAAA,cACvB;AAAA;AAAA,YAdK,GAAG,WAAW,UAAU,KAAK;AAAA,UAepC;AAAA,QAEJ;AACE,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,yBAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ;AAAA,4BAAQ,oBAAC,QAAK;AAAA,oBACd,SACC,oBAAC,eAAY,eAAa,yBAAyB,QAAQ,WAAW,mBACnE,iBACH;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA,YAnBK,GAAG,WAAW,UAAU,KAAK;AAAA,UAoBpC;AAAA,MAEN;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -1,15 +1,16 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { DSNavSearchBox } from "@elliemae/ds-form";
+import { useState, useCallback, useRef } from "react";
 import { Search } from "@elliemae/ds-icons";
-import { getGlobalAttributes } from "@elliemae/ds-props-helpers";
+import { DSNavSearchBox } from "@elliemae/ds-form";
 import { mergeRefs } from "@elliemae/ds-system";
-import { useCallback, useRef, useState } from "react";
-import { DSGlobalHeaderDatatestid } from "../../../../exported-related/index.js";
-import { StyledButton } from "../../../styles.js";
-import { StyledNavSearchBoxContainer } from "./styles.js";
+import { getGlobalAttributes } from "@elliemae/ds-props-helpers";
 import { useCallbackAfterRender } from "./useCallbackAfterRender.js";
+import { StyledNavSearchBoxContainer } from "./styles.js";
+import { StyledButton } from "../../../styles.js";
+import { DSGlobalHeaderDatatestid } from "../../../../exported-related/index.js";
 const SearchToggle = ({
+  id,
   setRef,
   componentProps,
   ...otherProps
@@ -103,6 +104,7 @@ const SearchToggle = ({
     {
       onClick: handleOnClick,
       innerRef: handleTriggerRefs,
+      id,
       "data-testid": DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON,
       ...getGlobalAttributes(otherProps),
       type: "button",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSNavSearchBox } from '@elliemae/ds-form';\nimport { Search } from '@elliemae/ds-icons';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { StyledButton } from '../../../styles.js';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { useCallbackAfterRender } from './useCallbackAfterRender.js';\n\nexport const SearchToggle = ({\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderT.SearchToggleProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    onNext,\n    onPrevious,\n    currentResultIndex,\n    totalResults,\n    placeholder,\n    value,\n    onChange,\n    onBlur,\n    onClear,\n    isOpen: userIsOpen,\n    onKeyDown,\n    onClick,\n    triggerRef,\n    searchContainerRef,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (userIsOpen === undefined) {\n        if (e.key === 'Escape') {\n          setIsOpen(false);\n          schedule(focusTrigger);\n        }\n      }\n      if (onKeyDown) onKeyDown(e);\n    },\n    [focusTrigger, onKeyDown, schedule, userIsOpen],\n  );\n\n  const handleOnBlur = useCallback(() => {\n    const contains = containerRef.current?.contains(document.activeElement);\n    if (value === '' && !contains) setIsOpen(false);\n    schedule(focusTrigger);\n  }, [focusTrigger, schedule, value]);\n\n  const handleNavInputRefs = useCallback(\n    (searchNavRef: HTMLInputElement) => {\n      setRef(searchNavRef);\n      internalInputRef.current = searchNavRef;\n    },\n    [setRef],\n  );\n\n  const handleTriggerRefs = useCallback(\n    (buttonRef: HTMLButtonElement) => {\n      mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n      setRef(buttonRef);\n    },\n    [setRef, triggerRef],\n  );\n\n  return userIsOpen || isOpen ? (\n    <StyledNavSearchBoxContainer\n      onKeyDown={handleOnKeyDown}\n      innerRef={mergeRefs(searchContainerRef, containerRef)}\n      onBlur={handleOnBlur}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER}\n    >\n      <DSNavSearchBox\n        onNext={onNext}\n        onPrevious={onPrevious}\n        currentResultIndex={currentResultIndex}\n        totalResults={totalResults}\n        onClear={onClear}\n        placeholder={placeholder}\n        onChange={onChange}\n        value={value}\n        onBlur={onBlur}\n        innerRef={handleNavInputRefs}\n        autoFocus\n      />\n    </StyledNavSearchBoxContainer>\n  ) : (\n    <StyledButton\n      onClick={handleOnClick}\n      innerRef={handleTriggerRefs}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON}\n      {...getGlobalAttributes(otherProps)}\n      type=\"button\"\n    >\n      <Search />\n    </StyledButton>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC4FjB;AA5FN,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAC1B,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,SAAS,gCAAgC;AAEzC,SAAS,oBAAoB;AAC7B,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AAEhC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsD;AACpD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,mBAAmB,OAAgC,IAAI;AAC7D,QAAM,qBAAqB,OAAiC,IAAI;AAChE,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,uBAAuB;AAExC,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,eAAe,OAAW,WAAU,IAAI;AAC5C,UAAI,QAAS,SAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,eAAe,QAAW;AAC5B,YAAI,EAAE,QAAQ,UAAU;AACtB,oBAAU,KAAK;AACf,mBAAS,YAAY;AAAA,QACvB;AAAA,MACF;AACA,UAAI,UAAW,WAAU,CAAC;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,WAAW,UAAU,UAAU;AAAA,EAChD;AAEA,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW,aAAa,SAAS,SAAS,SAAS,aAAa;AACtE,QAAI,UAAU,MAAM,CAAC,SAAU,WAAU,KAAK;AAC9C,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,KAAK,CAAC;AAElC,QAAM,qBAAqB;AAAA,IACzB,CAAC,iBAAmC;AAClC,aAAO,YAAY;AACnB,uBAAiB,UAAU;AAAA,IAC7B;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,cAAiC;AAChC,gBAAU,YAAY,kBAAkB,EAAE,SAAS;AACnD,aAAO,SAAS;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACrB;AAEA,SAAO,cAAc,SACnB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,UAAU,UAAU,oBAAoB,YAAY;AAAA,MACpD,QAAQ;AAAA,MACR,eAAa,yBAAyB,QAAQ,cAAc;AAAA,MAE5D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,WAAS;AAAA;AAAA,MACX;AAAA;AAAA,EACF,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,eAAa,yBAAyB,QAAQ,cAAc;AAAA,MAC3D,GAAG,oBAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,8BAAC,UAAO;AAAA;AAAA,EACV;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useRef } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { useCallbackAfterRender } from './useCallbackAfterRender.js';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const SearchToggle = ({\n  id,\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderInternalsT.SearchToggleProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    onNext,\n    onPrevious,\n    currentResultIndex,\n    totalResults,\n    placeholder,\n    value,\n    onChange,\n    onBlur,\n    onClear,\n    isOpen: userIsOpen,\n    onKeyDown,\n    onClick,\n    triggerRef,\n    searchContainerRef,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (userIsOpen === undefined) {\n        if (e.key === 'Escape') {\n          setIsOpen(false);\n          schedule(focusTrigger);\n        }\n      }\n      if (onKeyDown) onKeyDown(e);\n    },\n    [focusTrigger, onKeyDown, schedule, userIsOpen],\n  );\n\n  const handleOnBlur = useCallback(() => {\n    const contains = containerRef.current?.contains(document.activeElement);\n    if (value === '' && !contains) setIsOpen(false);\n    schedule(focusTrigger);\n  }, [focusTrigger, schedule, value]);\n\n  const handleNavInputRefs = useCallback(\n    (searchNavRef: HTMLInputElement) => {\n      setRef(searchNavRef);\n      internalInputRef.current = searchNavRef;\n    },\n    [setRef],\n  );\n\n  const handleTriggerRefs = useCallback(\n    (buttonRef: HTMLButtonElement) => {\n      mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n      setRef(buttonRef);\n    },\n    [setRef, triggerRef],\n  );\n\n  return userIsOpen || isOpen ? (\n    <StyledNavSearchBoxContainer\n      onKeyDown={handleOnKeyDown}\n      innerRef={mergeRefs(searchContainerRef, containerRef)}\n      onBlur={handleOnBlur}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER}\n    >\n      <DSNavSearchBox\n        onNext={onNext}\n        onPrevious={onPrevious}\n        currentResultIndex={currentResultIndex}\n        totalResults={totalResults}\n        onClear={onClear}\n        placeholder={placeholder}\n        onChange={onChange}\n        value={value}\n        onBlur={onBlur}\n        innerRef={handleNavInputRefs}\n        autoFocus\n      />\n    </StyledNavSearchBoxContainer>\n  ) : (\n    <StyledButton\n      onClick={handleOnClick}\n      innerRef={handleTriggerRefs}\n      id={id}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON}\n      {...getGlobalAttributes(otherProps)}\n      type=\"button\"\n    >\n      <Search />\n    </StyledButton>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6FjB;AA7FN,SAAgB,UAAU,aAAa,cAAc;AACrD,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;AACpC,SAAS,8BAA8B;AACvC,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+D;AAC7D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,mBAAmB,OAAgC,IAAI;AAC7D,QAAM,qBAAqB,OAAiC,IAAI;AAChE,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,uBAAuB;AAExC,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,eAAe,OAAW,WAAU,IAAI;AAC5C,UAAI,QAAS,SAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,eAAe,QAAW;AAC5B,YAAI,EAAE,QAAQ,UAAU;AACtB,oBAAU,KAAK;AACf,mBAAS,YAAY;AAAA,QACvB;AAAA,MACF;AACA,UAAI,UAAW,WAAU,CAAC;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,WAAW,UAAU,UAAU;AAAA,EAChD;AAEA,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW,aAAa,SAAS,SAAS,SAAS,aAAa;AACtE,QAAI,UAAU,MAAM,CAAC,SAAU,WAAU,KAAK;AAC9C,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,KAAK,CAAC;AAElC,QAAM,qBAAqB;AAAA,IACzB,CAAC,iBAAmC;AAClC,aAAO,YAAY;AACnB,uBAAiB,UAAU;AAAA,IAC7B;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,cAAiC;AAChC,gBAAU,YAAY,kBAAkB,EAAE,SAAS;AACnD,aAAO,SAAS;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACrB;AAEA,SAAO,cAAc,SACnB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,UAAU,UAAU,oBAAoB,YAAY;AAAA,MACpD,QAAQ;AAAA,MACR,eAAa,yBAAyB,QAAQ,cAAc;AAAA,MAE5D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,WAAS;AAAA;AAAA,MACX;AAAA;AAAA,EACF,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV;AAAA,MACA,eAAa,yBAAyB,QAAQ,cAAc;AAAA,MAC3D,GAAG,oBAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,8BAAC,UAAO;AAAA;AAAA,EACV;AAEJ;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -7,42 +7,37 @@ const defaultProps = {
   LogoWithBrand: noop,
   Logo: noop
 };
-const DSGlobalHeaderPropTypes = {
+const breadcrumbItem = PropTypes.shape({
+  label: PropTypes.string.description("breadrcrumb item label"),
+  hasNext: PropTypes.bool.description("whether the item has a child or not"),
+  isSelected: PropTypes.bool.description("whether the item is selected or not"),
+  onClick: PropTypes.func.description("Callback executed on click")
+});
+const toolbarItem = PropTypes.shape({
+  label: PropTypes.string.description("title tag description"),
+  type: PropTypes.oneOf(["ds-app-picker", "ds-popup-menu", "ds-search-toggle", "custom"]).description(
+    "use to select one of the out-of-the-box types of items"
+  ),
+  componentProps: PropTypes.object.description("props of out-of-the-box component"),
+  Icon: PropTypes.func.description("Icon to display"),
+  onClick: PropTypes.func.description("Callback executed on click")
+});
+const propTypes = {
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
-  CustomNavigation: PropTypes.func.description(
-    "Component to use instead of the standard breadcrumb out of the box configuration for custom scenarios"
-  ).defaultValue("() => JSX.Element"),
   Logo: PropTypes.func.description("Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.").defaultValue("() => JSX.Element"),
   LogoWithBrand: PropTypes.func.description(
     "Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing."
   ).defaultValue("() => JSX.Element"),
-  breadcrumb: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.description("breadrcrumb item label"),
-      hasNext: PropTypes.bool.description("whether the item has a child or not"),
-      isSelected: PropTypes.bool.description("whether the item is selected or not"),
-      onClick: PropTypes.func.description("Callback executed on click")
-    })
-  ).description("Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.").defaultValue("[]"),
-  toolbar: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.description("title tag description"),
-      type: PropTypes.oneOf(["ds-app-picker", "ds-popup-menu", "ds-search-toggle", "custom"]).description(
-        "use to select one of the out-of-the-box types of items"
-      ),
-      componentProps: PropTypes.object.description("props of out-of-the-box component"),
-      Icon: PropTypes.func.description("Icon to display"),
-      onClick: PropTypes.func.description("Callback executed on click")
-    })
-  ).description("Toolbar items. Compatible with GlobalAttributes.").defaultValue("[]")
+  breadcrumb: PropTypes.arrayOf(breadcrumbItem).description("Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.").defaultValue("[]"),
+  toolbar: PropTypes.arrayOf(toolbarItem).description("Toolbar items. Compatible with GlobalAttributes.").defaultValue("[]"),
+  backgroundColor: PropTypes.string.description("Changes background color."),
+  bg: PropTypes.string.description("Changes background color.")
 };
-const propTypes = DSGlobalHeaderPropTypes;
-const DSGlobalHeaderPropTypesSchema = DSGlobalHeaderPropTypes;
 export {
-  DSGlobalHeaderPropTypes,
-  DSGlobalHeaderPropTypesSchema,
+  breadcrumbItem,
   defaultProps,
-  propTypes
+  propTypes,
+  toolbarItem
 };
 //# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSAppPicker } from '@elliemae/ds-app-picker';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\n\nconst noop = () => null;\n\nexport const defaultProps = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: noop,\n  Logo: noop,\n};\n\nexport declare namespace DSGlobalHeaderT {\n  /* *************************************************************************************\n                      \"Breadcrumb widget\" configuration types\n  ****************************************************************************************\n  The breadcrumb items ARE SPREADING GLOBAL PROPS!!!\n    + The breadcrumb items have a logic that force the onClick to be invoked on spacebar/enter too\n    forcing it even if not the standard browser behaviour as per our buttons too\n  ************************************************************************************** */\n  export interface BreadcrumbItemOptionals {\n    hasNext?: boolean;\n    isSelected?: boolean;\n    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  }\n  export interface BreadcrumbItemRequired {\n    label: string;\n  }\n  export interface BreadcrumbItemOptionalsGlobals\n    extends Omit<GlobalAttributesT, keyof BreadcrumbItemOptionals | keyof BreadcrumbItemRequired> {}\n\n  export interface BreadcrumbItem\n    extends BreadcrumbItemRequired,\n      BreadcrumbItemOptionals,\n      BreadcrumbItemOptionalsGlobals {}\n  /* *************************************************************************************\n                      \"Toolbar widget\" configuration types\n  ****************************************************************************************\n    The toolbar item can be mainly of 4 different types\n    - app-picker \n        more or less map to ds-app-picker interface\n    - popup-menu\n        should more less map to dropdownmenu-v2 but should be changed to menu-button when possible\n    - search-toggle\n        a custom ad hoc implementation that expands in place and expose an input text,\n        kinda problematic and force-added due to unrestrained \"yes man\" attitude with PM/PO\n        we will be suggesting against using it officially in the later releases and try to find a better solution.\n    - custom\n        a way to allow app to provide their own render props along other pre-configured widgets out of the box\n  ************************************************************************************** */\n\n  /* *************************************************************************************\n      toolbar -> type === 'custom'\n  ************************************************************************************** */\n  export interface ToolbarCustomComponentProps {\n    item: Record<string, unknown> & {\n      type: 'custom';\n      CustomComponent: React.ComponentType<ToolbarCustomComponentProps>;\n    };\n    setRef: (ref: HTMLElement | null) => void;\n  }\n  export interface ToolbarCustomItem extends Record<string, unknown> {\n    type: 'custom';\n    label: string;\n    CustomComponent: React.ComponentType<ToolbarCustomComponentProps>;\n  }\n  /* *************************************************************************************\n      toolbar -> type === 'ds-search-toggle'\n  ************************************************************************************** */\n  // this props are actually required for the out-of-the-box to actually do what it needs to do\n  //    it's meant to be provided from the application, so this is kind of a weird way to do controlled components\n  export interface ToggleSearchComponentProps {\n    onNext: () => void;\n    onPrevious: () => void;\n    currentResultIndex: number;\n    totalResults: number;\n    placeholder: string;\n    value: string;\n    onChange: () => void;\n    onBlur: () => void;\n    onClear: () => void;\n    isOpen: boolean;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    onClick: (event: React.MouseEvent) => void;\n    triggerRef: React.MutableRefObject<HTMLButtonElement>;\n    searchContainerRef: React.MutableRefObject<HTMLDivElement>;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  export interface SearchToggleProps extends GlobalAttributesT {\n    setRef: (ref: HTMLElement) => void;\n    componentProps: ToggleSearchComponentProps;\n  }\n  export interface ToolbarSearchToggleItem {\n    type: 'ds-search-toggle';\n    label: string;\n    componentProps: ToggleSearchComponentProps;\n  }\n  /* *************************************************************************************\n      toolbar -> type === 'ds-popup-menu'\n  ************************************************************************************** */\n\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupMenuContentItem extends Omit<GlobalAttributesT, 'type' | 'label' | 'onClick'> {\n    type?: 'separator' | 'custom';\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    closeOnClick?: boolean;\n    Content?: React.ComponentType;\n  }\n  export interface PopupMenuComponentProps {\n    onClickOutside?: (e: MouseEvent | TouchEvent) => void;\n    onKeyPress: (event: React.KeyboardEvent) => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    isOpen: boolean;\n    options: PopupMenuContentItem[];\n    closeOnClick: boolean;\n  }\n  // this is the only type that was pre-existing (even if differently defined)\n  //  and that's why it doesn't include Toolbar at the start\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupMenuItem extends Omit<GlobalAttributesT, 'type' | 'label' | 'onClick'> {\n    type: 'ds-popup-menu';\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    Content?: React.ComponentType;\n    componentProps: PopupMenuComponentProps;\n  }\n\n  export interface PopupMenuContentProps {\n    options: PopupMenuContentItem[];\n    onItemClick: () => void;\n    onClose: () => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupProps extends Omit<GlobalAttributesT, 'title' | 'label' | 'onClick'> {\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    onClick?: (event: React.MouseEvent) => void;\n    setRef: (ref: HTMLElement) => void;\n    componentProps: PopupMenuComponentProps;\n    title?: string; // this was probably not intended, but removing this means the HTML will not print the title={label}\n    // keeping this for now, if A11y says otherwise we will do the proper steps to remove it\n  }\n\n  /* *************************************************************************************\n      toolbar -> type === 'ds-app-picker'\n  ************************************************************************************** */\n  export type AppPickerComponentProps = React.ComponentProps<typeof DSAppPicker> & {\n    triggerOnClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface AppPickerProps extends Omit<GlobalAttributesT, 'label'> {\n    label: string;\n    componentProps: AppPickerComponentProps;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface ToolbarAppPickerItem extends Omit<GlobalAttributesT, 'type' | 'label'> {\n    type: 'ds-app-picker';\n    label: string;\n    componentProps: AppPickerComponentProps;\n  }\n\n  /* *************************************************************************************\n      toolbar -> type === undefined (fallback default)\n  ************************************************************************************** */\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface ToolbarItemTypelessDefault extends Omit<GlobalAttributesT, 'label'> {\n    type?: undefined;\n    label: string;\n    Icon: React.ComponentType<{ fill?: string; size?: string }>;\n  }\n\n  export type ToolbarItem =\n    | ToolbarCustomItem\n    | ToolbarSearchToggleItem\n    | ToolbarAppPickerItem\n    | PopupMenuItem // this is the only type that was pre-existing and that's why it doesn't include Toolbar at the start\n    | ToolbarItemTypelessDefault;\n\n  export interface DefaultProps {\n    Logo: React.ComponentType;\n    LogoWithBrand: React.ComponentType;\n    breadcrumb: DSGlobalHeaderT.BreadcrumbItem[];\n    toolbar: DSGlobalHeaderT.ToolbarItem[];\n    CustomNavigation: React.ComponentType;\n  }\n\n  export interface InternalProps extends DefaultProps, Omit<GlobalAttributesT, keyof DefaultProps>, XstyledProps {}\n\n  export type Props = Partial<DSGlobalHeaderT.DefaultProps>;\n\n  export interface Context {\n    showIconOnly: boolean;\n    fontDetector: number;\n    setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n    instanceUID: string;\n    globalHeaderToolbarGrid: string[];\n    props: InternalProps;\n    ownerProps: {\n      getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n      getOwnerPropsArguments: () => object;\n    };\n  }\n}\n\nexport const DSGlobalHeaderPropTypes: DSPropTypesSchema<DSGlobalHeaderT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  CustomNavigation: PropTypes.func\n    .description(\n      'Component to use instead of the standard breadcrumb out of the box configuration for custom scenarios',\n    )\n    .defaultValue('() => JSX.Element'),\n  Logo: PropTypes.func\n    .description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.')\n    .defaultValue('() => JSX.Element'),\n  LogoWithBrand: PropTypes.func\n    .description(\n      'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n    )\n    .defaultValue('() => JSX.Element'),\n  breadcrumb: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.description('breadrcrumb item label'),\n      hasNext: PropTypes.bool.description('whether the item has a child or not'),\n      isSelected: PropTypes.bool.description('whether the item is selected or not'),\n      onClick: PropTypes.func.description('Callback executed on click'),\n    }),\n  )\n    .description('Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  toolbar: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.description('title tag description'),\n      type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description(\n        'use to select one of the out-of-the-box types of items',\n      ),\n      componentProps: PropTypes.object.description('props of out-of-the-box component'),\n      Icon: PropTypes.func.description('Icon to display'),\n      onClick: PropTypes.func.description('Callback executed on click'),\n    }),\n  )\n    .description('Toolbar items. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n};\n// kept for legacy reasons, this is now named differently, but we want no breaking changes.\nexport const propTypes = DSGlobalHeaderPropTypes;\n\nexport const DSGlobalHeaderPropTypesSchema = DSGlobalHeaderPropTypes as unknown as ValidationMap<DSGlobalHeaderT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AAGvE,MAAM,OAAO,MAAM;AAEZ,MAAM,eAAe;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,EACf,MAAM;AACR;AA4MO,MAAM,0BAAoE;AAAA,EAC/E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,kBAAkB,UAAU,KACzB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,MAAM,UAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,UAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,UAAU;AAAA,IACpB,UAAU,MAAM;AAAA,MACd,OAAO,UAAU,OAAO,YAAY,wBAAwB;AAAA,MAC5D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,MACzE,YAAY,UAAU,KAAK,YAAY,qCAAqC;AAAA,MAC5E,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,UAAU;AAAA,IACjB,UAAU,MAAM;AAAA,MACd,OAAO,UAAU,OAAO,YAAY,uBAAuB;AAAA,MAC3D,MAAM,UAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE;AAAA,QACtF;AAAA,MACF;AAAA,MACA,gBAAgB,UAAU,OAAO,YAAY,mCAAmC;AAAA,MAChF,MAAM,UAAU,KAAK,YAAY,iBAAiB;AAAA,MAClD,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AACtB;AAEO,MAAM,YAAY;AAElB,MAAM,gCAAgC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type { DSGlobalHeaderInternalsT } from './sharedTypes.js';\n\nconst noop = () => null;\n\nexport const defaultProps = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: noop,\n  Logo: noop,\n};\n\nexport declare namespace DSGlobalHeaderT {\n  export type Props = Partial<DSGlobalHeaderInternalsT.DefaultProps>;\n}\n\nexport const breadcrumbItem = PropTypes.shape({\n  label: PropTypes.string.description('breadrcrumb item label'),\n  hasNext: PropTypes.bool.description('whether the item has a child or not'),\n  isSelected: PropTypes.bool.description('whether the item is selected or not'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const toolbarItem = PropTypes.shape({\n  label: PropTypes.string.description('title tag description'),\n  type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description(\n    'use to select one of the out-of-the-box types of items',\n  ),\n  componentProps: PropTypes.object.description('props of out-of-the-box component'),\n  Icon: PropTypes.func.description('Icon to display'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  Logo: PropTypes.func\n    .description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.')\n    .defaultValue('() => JSX.Element'),\n  LogoWithBrand: PropTypes.func\n    .description(\n      'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n    )\n    .defaultValue('() => JSX.Element'),\n  breadcrumb: PropTypes.arrayOf(breadcrumbItem)\n    .description('Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  toolbar: PropTypes.arrayOf(toolbarItem)\n    .description('Toolbar items. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  backgroundColor: PropTypes.string.description('Changes background color.'),\n  bg: PropTypes.string.description('Changes background color.'),\n} as unknown as WeakValidationMap<DSGlobalHeaderInternalsT.InternalProps>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAGvE,MAAM,OAAO,MAAM;AAEZ,MAAM,eAAe;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,EACf,MAAM;AACR;AAMO,MAAM,iBAAiB,UAAU,MAAM;AAAA,EAC5C,OAAO,UAAU,OAAO,YAAY,wBAAwB;AAAA,EAC5D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,YAAY,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,cAAc,UAAU,MAAM;AAAA,EACzC,OAAO,UAAU,OAAO,YAAY,uBAAuB;AAAA,EAC3D,MAAM,UAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE;AAAA,IACtF;AAAA,EACF;AAAA,EACA,gBAAgB,UAAU,OAAO,YAAY,mCAAmC;AAAA,EAChF,MAAM,UAAU,KAAK,YAAY,iBAAiB;AAAA,EAClD,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,UAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,UAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,UAAU,QAAQ,cAAc,EACzC,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,UAAU,QAAQ,WAAW,EACnC,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AAAA,EACpB,iBAAiB,UAAU,OAAO,YAAY,2BAA2B;AAAA,EACzE,IAAI,UAAU,OAAO,YAAY,2BAA2B;AAC9D;",
   "names": []
 }

package/dist/esm/typescript-testing/typescript-global-header-valid.js

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DSGlobalHeader } from "../index.js";
-import { breadcrumbItems, breadcrumbItemsAsSyntax } from "./typescript-global-header-breadcrumb-types.js";
-import { toolbarItemsStrict, toolbarItemsAsSyntax } from "./typescript-global-header-toolbar-types.js";
 const testPartialDefaults = {
-  breadcrumb: breadcrumbItems,
-  toolbar: toolbarItemsStrict,
+  breadcrumb: [],
+  toolbar: [],
   LogoWithBrand: () => null,
   Logo: () => null
 };
@@ -13,8 +11,8 @@ const testPropsAsSyntax = {
   ...testPartialDefaults
 };
 const testCompleteDefaults = {
-  breadcrumb: breadcrumbItems,
-  toolbar: toolbarItemsStrict,
+  breadcrumb: [],
+  toolbar: [],
   LogoWithBrand: () => null,
   Logo: () => null,
   CustomNavigation: () => null
@@ -26,20 +24,20 @@ const testInternalPropsAsSyntax = {
   ...testCompleteDefaults
 };
 const testExplicitDefinition = {
-  breadcrumb: breadcrumbItems,
-  toolbar: toolbarItemsStrict,
+  breadcrumb: [],
+  toolbar: [],
   LogoWithBrand: () => null,
   Logo: () => null
 };
 const testInferedTypeCompatibility = {
-  breadcrumb: breadcrumbItemsAsSyntax,
-  toolbar: toolbarItemsAsSyntax,
+  breadcrumb: [],
+  toolbar: [],
   LogoWithBrand: () => null,
   Logo: () => null
 };
 const testDefinitionAsConst = {
-  breadcrumb: breadcrumbItemsAsSyntax,
-  toolbar: toolbarItemsAsSyntax,
+  breadcrumb: [],
+  toolbar: [],
   LogoWithBrand: () => null,
   Logo: () => null
 };
@@ -47,14 +45,6 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(DSGlobalHeader, { ...testExplicitDefinition }),
   /* @__PURE__ */ jsx(DSGlobalHeader, { ...testInferedTypeCompatibility }),
   /* @__PURE__ */ jsx(DSGlobalHeader, { ...testDefinitionAsConst }),
-  /* @__PURE__ */ jsx(
-    DSGlobalHeader,
-    {
-      breadcrumb: breadcrumbItems,
-      toolbar: toolbarItemsStrict,
-      LogoWithBrand: () => null,
-      Logo: () => null
-    }
-  )
+  /* @__PURE__ */ jsx(DSGlobalHeader, { breadcrumb: [], toolbar: [], LogoWithBrand: () => null, Logo: () => null })
 ] });
 //# sourceMappingURL=typescript-global-header-valid.js.map

package/dist/esm/typescript-testing/typescript-global-header-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-global-header-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React from 'react';\nimport type { DSGlobalHeaderT } from '../index.js';\nimport { DSGlobalHeader } from '../index.js';\nimport { breadcrumbItems, breadcrumbItemsAsSyntax } from './typescript-global-header-breadcrumb-types.js';\nimport { toolbarItemsStrict, toolbarItemsAsSyntax } from './typescript-global-header-toolbar-types.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSGlobalHeaderT.Props;\ntype ComponentPropsInternals = DSGlobalHeaderT.InternalProps;\ntype ComponentPropsDefaultProps = DSGlobalHeaderT.DefaultProps;\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  breadcrumb: breadcrumbItems,\n  toolbar: toolbarItemsStrict,\n  LogoWithBrand: () => null,\n  Logo: () => null,\n};\n\nconst testPropsAsSyntax = {\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  breadcrumb: breadcrumbItems,\n  toolbar: toolbarItemsStrict,\n  LogoWithBrand: () => null,\n  Logo: () => null,\n  CustomNavigation: () => null,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  breadcrumb: breadcrumbItems,\n  toolbar: toolbarItemsStrict,\n  LogoWithBrand: () => null,\n  Logo: () => null,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  breadcrumb: breadcrumbItemsAsSyntax,\n  toolbar: toolbarItemsAsSyntax,\n  LogoWithBrand: () => null,\n  Logo: () => null,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  breadcrumb: breadcrumbItemsAsSyntax,\n  toolbar: toolbarItemsAsSyntax,\n  LogoWithBrand: () => null,\n  Logo: () => null,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSGlobalHeader {...testExplicitDefinition} />\n    <DSGlobalHeader {...testInferedTypeCompatibility} />\n    <DSGlobalHeader {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSGlobalHeader\n      breadcrumb={breadcrumbItems}\n      toolbar={toolbarItemsStrict}\n      LogoWithBrand={() => null}\n      Logo={() => null}\n    />\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmErB,mBAEE,KAFF;AA/DF,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,+BAA+B;AACzD,SAAS,oBAAoB,4BAA4B;AASzD,MAAM,sBAA2D;AAAA,EAC/D,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,eAAe,MAAM;AAAA,EACrB,MAAM,MAAM;AACd;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,eAAe,MAAM;AAAA,EACrB,MAAM,MAAM;AAAA,EACZ,kBAAkB,MAAM;AAC1B;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,eAAe,MAAM;AAAA,EACrB,MAAM,MAAM;AACd;AAGA,MAAM,+BAA+B;AAAA,EACnC,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,eAAe,MAAM;AAAA,EACrB,MAAM,MAAM;AACd;AAEA,MAAM,wBAAwB;AAAA,EAC5B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,eAAe,MAAM;AAAA,EACrB,MAAM,MAAM;AACd;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,kBAAgB,GAAG,wBAAwB;AAAA,EAC5C,oBAAC,kBAAgB,GAAG,8BAA8B;AAAA,EAClD,oBAAC,kBAAgB,GAAG,uBAAuB;AAAA,EAE3C;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,eAAe,MAAM;AAAA,MACrB,MAAM,MAAM;AAAA;AAAA,EACd;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { createRef } from 'react';\nimport { DSGlobalHeader } from '../index.js';\nimport type { DSGlobalHeaderInternalsT, DSGlobalHeaderT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSGlobalHeaderT.Props;\ntype ComponentPropsInternals = DSGlobalHeaderInternalsT.InternalProps;\ntype ComponentPropsDefaultProps = DSGlobalHeaderInternalsT.DefaultProps;\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: () => null,\n  Logo: () => null,\n};\n\nconst testPropsAsSyntax = {\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: () => null,\n  Logo: () => null,\n  CustomNavigation: () => null,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: () => null,\n  Logo: () => null,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: () => null,\n  Logo: () => null,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  breadcrumb: [] as DSGlobalHeaderInternalsT.BreadcrumbItem[],\n  toolbar: [] as DSGlobalHeaderInternalsT.ToolbarItem[],\n  LogoWithBrand: () => null,\n  Logo: () => null,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSGlobalHeader {...testExplicitDefinition} />\n    <DSGlobalHeader {...testInferedTypeCompatibility} />\n    <DSGlobalHeader {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSGlobalHeader breadcrumb={[]} toolbar={[]} LogoWithBrand={() => null} Logo={() => null} />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgErB,mBAEE,KAFF;AA9DF,SAAS,sBAAsB;AAU/B,MAAM,sBAA2D;AAAA,EAC/D,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe,MAAM;AAAA,EACrB,MAAM,MAAM;AACd;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe,MAAM;AAAA,EACrB,MAAM,MAAM;AAAA,EACZ,kBAAkB,MAAM;AAC1B;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe,MAAM;AAAA,EACrB,MAAM,MAAM;AACd;AAGA,MAAM,+BAA+B;AAAA,EACnC,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe,MAAM;AAAA,EACrB,MAAM,MAAM;AACd;AAEA,MAAM,wBAAwB;AAAA,EAC5B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe,MAAM;AAAA,EACrB,MAAM,MAAM;AACd;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,kBAAgB,GAAG,wBAAwB;AAAA,EAC5C,oBAAC,kBAAgB,GAAG,8BAA8B;AAAA,EAClD,oBAAC,kBAAgB,GAAG,uBAAuB;AAAA,EAE3C,oBAAC,kBAAe,YAAY,CAAC,GAAG,SAAS,CAAC,GAAG,eAAe,MAAM,MAAM,MAAM,MAAM,MAAM;AAAA,GAC5F;",
   "names": []
 }

package/dist/types/DSGlobalHeader.d.ts

@@ -3,7 +3,7 @@ declare const DSGlobalHeader: {
     (props: DSGlobalHeaderT.Props): JSX.Element;
     displayName: string;
 };
-declare const DSGlobalHeaderWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<Partial<DSGlobalHeaderT.DefaultProps>>;
+declare const DSGlobalHeaderWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<Partial<import("./sharedTypes.js").DSGlobalHeaderInternalsT.DefaultProps>>;
 declare const GlobalHeader: {
     (props: DSGlobalHeaderT.Props): JSX.Element;
     displayName: string;

package/dist/types/DSGlobalHeaderContext.d.ts

@@ -1,2 +1,2 @@
-import type { DSGlobalHeaderT } from './react-desc-prop-types.js';
-export declare const DSGlobalHeaderContext: import("react").Context<DSGlobalHeaderT.Context>;
+import type { DSGlobalHeaderInternalsT } from './sharedTypes.js';
+export declare const DSGlobalHeaderContext: import("react").Context<DSGlobalHeaderInternalsT.Context>;

package/dist/types/config/useGlobalHeader.d.ts

@@ -1,13 +1,14 @@
 import { type DSGlobalHeaderT } from '../react-desc-prop-types.js';
+import { type DSGlobalHeaderInternalsT } from '../sharedTypes.js';
 export declare const useGlobalHeader: (props: DSGlobalHeaderT.Props) => {
-    props: DSGlobalHeaderT.InternalProps;
+    props: DSGlobalHeaderInternalsT.InternalProps;
     showIconOnly: boolean;
     setShowIconOnly: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     instanceUID: string;
     globalHeaderToolbarGrid: string[];
     fontDetector: 1 | 2 | 3;
     ownerProps: {
-        getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;
+        getOwnerProps: () => Partial<DSGlobalHeaderInternalsT.DefaultProps>;
         getOwnerPropsArguments: () => {};
     };
 };

package/dist/types/exported-related/index.d.ts

@@ -1,2 +1,2 @@
-export { DSGlobalHeaderName, DSGlobalHeaderSlots, DSGlobalHeaderSlotsFlattened } from './theming.js';
-export { DSGlobalHeaderDatatestid, DSGlobalHeaderDatatestidFlattened } from './DSGlobalHeaderDatatestid.js';
+export * from './theming.js';
+export * from './DSGlobalHeaderDatatestid.js';