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

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

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

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

@@ -33,15 +33,21 @@ __export(AppPicker_exports, {
 module.exports = __toCommonJS(AppPicker_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_ds_app_picker = require("@elliemae/ds-app-picker");
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_system = require("@elliemae/ds-system");
-var import_react = require("react");
-var import_exported_related = require("../../../../exported-related/index.js");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_icons = require("@elliemae/ds-icons");
 var import_useCallbackAfterRender = require("../../../../utils/useCallbackAfterRender.js");
 var import_styles = require("../../../styles.js");
-const AppPicker = ({ label, setRef, componentProps, ...otherProps }) => {
+var import_exported_related = require("../../../../exported-related/index.js");
+const AppPicker = ({
+  label,
+  id,
+  setRef,
+  componentProps,
+  ...otherProps
+}) => {
   const [isOpen, setIsOpen] = (0, import_react.useState)(false);
   const internalTriggerRef = (0, import_react.useRef)(null);
   const {
@@ -101,6 +107,7 @@ const AppPicker = ({ label, setRef, componentProps, ...otherProps }) => {
       "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
       "aria-haspopup": true,
       "aria-expanded": userIsOpen ?? isOpen,
+      id,
       ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
       type: "button",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.MenuPicker, { width: 20.73, height: 20.73 })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+FjB;AA/FN,2BAA4B;AAC5B,sBAA2B;AAC3B,8BAAoC;AACpC,uBAA0B;AAC1B,mBAAqD;AACrD,8BAAyC;AAEzC,oCAAuC;AACvC,oBAA6B;AAatB,MAAM,YAAY,CAAC,EAAE,OAAO,QAAQ,gBAAgB,GAAG,WAAW,MAA8C;AACrH,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,yBAAqB,qBAA0B,IAAI;AAEzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,eAAW,sDAAuB;AAKxC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,2BAAmD,0BAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,+BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW,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,wCAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,iDAAyB,QAAQ;AAAA,MAC9C,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC5B,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,8BAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA,gBAAgB,sBAAsB;AAAA,MACtC,eAAe,qBAAqB;AAAA,MACpC,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2FjB;AA3FN,mBAAqD;AACrD,2BAA4B;AAC5B,uBAA0B;AAC1B,8BAAoC;AACpC,sBAA2B;AAC3B,oCAAuC;AACvC,oBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4D;AAC1D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,yBAAqB,qBAA0B,IAAI;AAEzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,eAAW,sDAAuB;AAKxC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,2BAAmD,0BAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,+BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW,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,wCAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,iDAAyB,QAAQ;AAAA,MAC9C,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,8BAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA,gBAAgB,sBAAsB;AAAA,MACtC,eAAe,qBAAqB;AAAA,MACpC,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -33,15 +33,16 @@ __export(PopupMenu_exports, {
 module.exports = __toCommonJS(PopupMenu_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_popperjs = require("@elliemae/ds-popperjs");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = require("react");
-var import_exported_related = require("../../../../exported-related/index.js");
-var import_styles = require("../../../styles.js");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_popperjs = require("@elliemae/ds-popperjs");
 var import_PopupMenuContent = require("./menuContent/PopupMenuContent.js");
+var import_styles = require("../../../styles.js");
+var import_exported_related = require("../../../../exported-related/index.js");
 const PopupMenu = ({
   Icon,
   onClick,
+  id,
   setRef,
   componentProps,
   ...otherProps
@@ -98,6 +99,7 @@ const PopupMenu = ({
         "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
         "aria-haspopup": true,
         "aria-expanded": userIsOpen ?? isOpen,
+        id,
         ...(0, import_ds_props_helpers.useGetGlobalAttributes)(otherProps),
         type: "button",
         children: Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: "m" })

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

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

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

@@ -33,11 +33,11 @@ __export(PopupMenuContent_exports, {
 module.exports = __toCommonJS(PopupMenuContent_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_styles = require("./styles.js");
 var import_DSGlobalHeaderContext = require("../../../../../DSGlobalHeaderContext.js");
 var import_exported_related = require("../../../../../exported-related/index.js");
-var import_styles = require("./styles.js");
 var import_usePopupMenuContent = require("./usePopupMenuContent.js");
 const PopupMenuContent = import_react.default.memo(
   ({
@@ -50,7 +50,7 @@ const PopupMenuContent = import_react.default.memo(
     const { instanceUID } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
     const { menuRef, setRef, keyboardNavigation } = (0, import_usePopupMenuContent.usePopupMenuContent)({ setIsOpen });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledList, { innerRef: menuRef, role: "menu", "data-testid": import_exported_related.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 = (0, import_ds_props_helpers.getGlobalAttributes)(rest);
       const handleClick = (e) => {
         onItemClick();
@@ -84,6 +84,7 @@ const PopupMenuContent = import_react.default.memo(
                   innerRef: setRef,
                   onClick: handleClick,
                   onKeyDown: handleKeyDown,
+                  id,
                   "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
                   ...globalAttrs,
                   type: "button",
@@ -105,6 +106,7 @@ const PopupMenuContent = import_react.default.memo(
                   innerRef: setRef,
                   onClick: handleClick,
                   onKeyDown: handleKeyDown,
+                  id,
                   "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
                   ...globalAttrs,
                   type: "button",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.tsx", "../../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCP;AAzChB,8BAAoC;AACpC,mBAAkC;AAClC,mCAAsC;AACtC,8BAAyC;AAEzC,oBAAgG;AAChG,iCAAoC;AAE7B,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAA0D;AACxD,UAAM,EAAE,YAAY,QAAI,yBAAW,kDAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,gDAAoB,EAAE,UAAU,CAAC;AAEjF,WACE,4CAAC,4BAAW,UAAU,SAAS,MAAK,QAAO,eAAa,iDAAyB,QAAQ,WAAW,MACjG,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,GAAG,KAAK,IAAI;AAE9D,YAAM,kBAAc,6CAAoB,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,iDAAyB,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,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ,qBAAW,4CAAC,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,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ;AAAA,4BAAQ,4CAAC,QAAK;AAAA,oBACd,SACC,4CAAC,6BAAY,eAAa,iDAAyB,QAAQ,WAAW,mBACnE,iBACH;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA,YAlBK,GAAG,WAAW,UAAU,KAAK;AAAA,UAmBpC;AAAA,MAEN;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledSeparator, StyledItemButton, StyledLabel, StyledList, StyledItemContainer } from './styles.js';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../../exported-related/index.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../../sharedTypes.js';\n\nexport const PopupMenuContent = React.memo(\n  ({\n    options,\n    onItemClick,\n    onClose,\n    popupOnKeyPress,\n    setIsOpen,\n  }: DSGlobalHeaderInternalsT.PopupMenuContentProps): JSX.Element => {\n    const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n    const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n    return (\n      <StyledList 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCP;AAzChB,mBAAkC;AAClC,8BAAoC;AACpC,oBAAgG;AAChG,mCAAsC;AACtC,8BAAyC;AACzC,iCAAoC;AAG7B,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAAmE;AACjE,UAAM,EAAE,YAAY,QAAI,yBAAW,kDAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,gDAAoB,EAAE,UAAU,CAAC;AAEjF,WACE,4CAAC,4BAAW,UAAU,SAAS,MAAK,QAAO,eAAa,iDAAyB,QAAQ,WAAW,MACjG,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,IAAI,GAAG,KAAK,IAAI;AAElE,YAAM,kBAAc,6CAAoB,IAAI;AAE5C,YAAM,cAAc,CAAC,MAAwB;AAC3C,oBAAY;AACZ,YAAI,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,iDAAyB,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,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ,qBAAW,4CAAC,WAAQ;AAAA;AAAA,cACvB;AAAA;AAAA,YAdK,GAAG,WAAW,UAAU,KAAK;AAAA,UAepC;AAAA,QAEJ;AACE,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX;AAAA,kBACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ;AAAA,4BAAQ,4CAAC,QAAK;AAAA,oBACd,SACC,4CAAC,6BAAY,eAAa,iDAAyB,QAAQ,WAAW,mBACnE,iBACH;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA,YAnBK,GAAG,WAAW,UAAU,KAAK;AAAA,UAoBpC;AAAA,MAEN;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -33,16 +33,17 @@ __export(SearchToggle_exports, {
 module.exports = __toCommonJS(SearchToggle_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_form = require("@elliemae/ds-form");
+var import_react = require("react");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_form = require("@elliemae/ds-form");
 var import_ds_system = require("@elliemae/ds-system");
-var import_react = require("react");
-var import_exported_related = require("../../../../exported-related/index.js");
-var import_styles = require("../../../styles.js");
-var import_styles2 = require("./styles.js");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_useCallbackAfterRender = require("./useCallbackAfterRender.js");
+var import_styles = require("./styles.js");
+var import_styles2 = require("../../../styles.js");
+var import_exported_related = require("../../../../exported-related/index.js");
 const SearchToggle = ({
+  id,
   setRef,
   componentProps,
   ...otherProps
@@ -108,7 +109,7 @@ const SearchToggle = ({
     [setRef, triggerRef]
   );
   return userIsOpen || isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styles2.StyledNavSearchBoxContainer,
+    import_styles.StyledNavSearchBoxContainer,
     {
       onKeyDown: handleOnKeyDown,
       innerRef: (0, import_ds_system.mergeRefs)(searchContainerRef, containerRef),
@@ -132,10 +133,11 @@ const SearchToggle = ({
       )
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styles.StyledButton,
+    import_styles2.StyledButton,
     {
       onClick: handleOnClick,
       innerRef: handleTriggerRefs,
+      id,
       "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON,
       ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
       type: "button",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4FjB;AA5FN,qBAA+B;AAC/B,sBAAuB;AACvB,8BAAoC;AACpC,uBAA0B;AAC1B,mBAAqD;AACrD,8BAAyC;AAEzC,oBAA6B;AAC7B,IAAAA,iBAA4C;AAC5C,oCAAuC;AAEhC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsD;AACpD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,uBAAmB,qBAAgC,IAAI;AAC7D,QAAM,yBAAqB,qBAAiC,IAAI;AAChE,QAAM,mBAAe,qBAA8B,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,eAAW,sDAAuB;AAExC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,oBAAgB;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,sBAAkB;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,mBAAe,0BAAY,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,yBAAqB;AAAA,IACzB,CAAC,iBAAmC;AAClC,aAAO,YAAY;AACnB,uBAAiB,UAAU;AAAA,IAC7B;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAAC,cAAiC;AAChC,sCAAU,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,cAAU,4BAAU,oBAAoB,YAAY;AAAA,MACpD,QAAQ;AAAA,MACR,eAAa,iDAAyB,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,iDAAyB,QAAQ,cAAc;AAAA,MAC3D,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,0BAAO;AAAA;AAAA,EACV;AAEJ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6FjB;AA7FN,mBAAqD;AACrD,sBAAuB;AACvB,qBAA+B;AAC/B,uBAA0B;AAC1B,8BAAoC;AACpC,oCAAuC;AACvC,oBAA4C;AAC5C,IAAAA,iBAA6B;AAC7B,8BAAyC;AAGlC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+D;AAC7D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,uBAAmB,qBAAgC,IAAI;AAC7D,QAAM,yBAAqB,qBAAiC,IAAI;AAChE,QAAM,mBAAe,qBAA8B,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,eAAW,sDAAuB;AAExC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,oBAAgB;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,sBAAkB;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,mBAAe,0BAAY,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,yBAAqB;AAAA,IACzB,CAAC,iBAAmC;AAClC,aAAO,YAAY;AACnB,uBAAiB,UAAU;AAAA,IAC7B;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAAC,cAAiC;AAChC,sCAAU,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,cAAU,4BAAU,oBAAoB,YAAY;AAAA,MACpD,QAAQ;AAAA,MACR,eAAa,iDAAyB,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,iDAAyB,QAAQ,cAAc;AAAA,MAC3D,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,0BAAO;AAAA;AAAA,EACV;AAEJ;",
   "names": ["import_styles"]
 }

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

@@ -28,10 +28,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var react_desc_prop_types_exports = {};
 __export(react_desc_prop_types_exports, {
-  DSGlobalHeaderPropTypes: () => DSGlobalHeaderPropTypes,
-  DSGlobalHeaderPropTypesSchema: () => DSGlobalHeaderPropTypesSchema,
+  breadcrumbItem: () => breadcrumbItem,
   defaultProps: () => defaultProps,
-  propTypes: () => propTypes
+  propTypes: () => propTypes,
+  toolbarItem: () => toolbarItem
 });
 module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
@@ -43,36 +43,31 @@ const defaultProps = {
   LogoWithBrand: noop,
   Logo: noop
 };
-const DSGlobalHeaderPropTypes = {
+const breadcrumbItem = import_ds_props_helpers.PropTypes.shape({
+  label: import_ds_props_helpers.PropTypes.string.description("breadrcrumb item label"),
+  hasNext: import_ds_props_helpers.PropTypes.bool.description("whether the item has a child or not"),
+  isSelected: import_ds_props_helpers.PropTypes.bool.description("whether the item is selected or not"),
+  onClick: import_ds_props_helpers.PropTypes.func.description("Callback executed on click")
+});
+const toolbarItem = import_ds_props_helpers.PropTypes.shape({
+  label: import_ds_props_helpers.PropTypes.string.description("title tag description"),
+  type: import_ds_props_helpers.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: import_ds_props_helpers.PropTypes.object.description("props of out-of-the-box component"),
+  Icon: import_ds_props_helpers.PropTypes.func.description("Icon to display"),
+  onClick: import_ds_props_helpers.PropTypes.func.description("Callback executed on click")
+});
+const propTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
   ...import_ds_props_helpers.xstyledPropTypes,
-  CustomNavigation: import_ds_props_helpers.PropTypes.func.description(
-    "Component to use instead of the standard breadcrumb out of the box configuration for custom scenarios"
-  ).defaultValue("() => JSX.Element"),
   Logo: import_ds_props_helpers.PropTypes.func.description("Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.").defaultValue("() => JSX.Element"),
   LogoWithBrand: import_ds_props_helpers.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: import_ds_props_helpers.PropTypes.arrayOf(
-    import_ds_props_helpers.PropTypes.shape({
-      label: import_ds_props_helpers.PropTypes.string.description("breadrcrumb item label"),
-      hasNext: import_ds_props_helpers.PropTypes.bool.description("whether the item has a child or not"),
-      isSelected: import_ds_props_helpers.PropTypes.bool.description("whether the item is selected or not"),
-      onClick: import_ds_props_helpers.PropTypes.func.description("Callback executed on click")
-    })
-  ).description("Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.").defaultValue("[]"),
-  toolbar: import_ds_props_helpers.PropTypes.arrayOf(
-    import_ds_props_helpers.PropTypes.shape({
-      label: import_ds_props_helpers.PropTypes.string.description("title tag description"),
-      type: import_ds_props_helpers.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: import_ds_props_helpers.PropTypes.object.description("props of out-of-the-box component"),
-      Icon: import_ds_props_helpers.PropTypes.func.description("Icon to display"),
-      onClick: import_ds_props_helpers.PropTypes.func.description("Callback executed on click")
-    })
-  ).description("Toolbar items. Compatible with GlobalAttributes.").defaultValue("[]")
+  breadcrumb: import_ds_props_helpers.PropTypes.arrayOf(breadcrumbItem).description("Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.").defaultValue("[]"),
+  toolbar: import_ds_props_helpers.PropTypes.arrayOf(toolbarItem).description("Toolbar items. Compatible with GlobalAttributes.").defaultValue("[]"),
+  backgroundColor: import_ds_props_helpers.PropTypes.string.description("Changes background color."),
+  bg: import_ds_props_helpers.PropTypes.string.description("Changes background color.")
 };
-const propTypes = DSGlobalHeaderPropTypes;
-const DSGlobalHeaderPropTypesSchema = DSGlobalHeaderPropTypes;
 //# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;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,kCAAU,KACzB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,MAAM,kCAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,kCAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,kCAAU;AAAA,IACpB,kCAAU,MAAM;AAAA,MACd,OAAO,kCAAU,OAAO,YAAY,wBAAwB;AAAA,MAC5D,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA,MACzE,YAAY,kCAAU,KAAK,YAAY,qCAAqC;AAAA,MAC5E,SAAS,kCAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,kCAAU;AAAA,IACjB,kCAAU,MAAM;AAAA,MACd,OAAO,kCAAU,OAAO,YAAY,uBAAuB;AAAA,MAC3D,MAAM,kCAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE;AAAA,QACtF;AAAA,MACF;AAAA,MACA,gBAAgB,kCAAU,OAAO,YAAY,mCAAmC;AAAA,MAChF,MAAM,kCAAU,KAAK,YAAY,iBAAiB;AAAA,MAClD,SAAS,kCAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AACtB;AAEO,MAAM,YAAY;AAElB,MAAM,gCAAgC;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;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,kCAAU,MAAM;AAAA,EAC5C,OAAO,kCAAU,OAAO,YAAY,wBAAwB;AAAA,EAC5D,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,YAAY,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EAC5E,SAAS,kCAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,cAAc,kCAAU,MAAM;AAAA,EACzC,OAAO,kCAAU,OAAO,YAAY,uBAAuB;AAAA,EAC3D,MAAM,kCAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE;AAAA,IACtF;AAAA,EACF;AAAA,EACA,gBAAgB,kCAAU,OAAO,YAAY,mCAAmC;AAAA,EAChF,MAAM,kCAAU,KAAK,YAAY,iBAAiB;AAAA,EAClD,SAAS,kCAAU,KAAK,YAAY,4BAA4B;AAClE,CAAC;AAEM,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,MAAM,kCAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,kCAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,kCAAU,QAAQ,cAAc,EACzC,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,kCAAU,QAAQ,WAAW,EACnC,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AAAA,EACpB,iBAAiB,kCAAU,OAAO,YAAY,2BAA2B;AAAA,EACzE,IAAI,kCAAU,OAAO,YAAY,2BAA2B;AAC9D;",
   "names": []
 }

package/dist/cjs/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSGlobalHeaderT } from './react-desc-prop-types.js';\n\n/* ******************************************************************************\n KEPT AROUND FOR BACKWARD COMPATIBILITY, THIS IS LEGACY!\n*********************************************************************************\nthis should be code-modded away in code-bases in favour of the actual namespace.\n******************************************************************************* */\n\n/**\n * @deprecated This namespace is outdated. Use `DSGlobalHeaderT` instead.\n */\nexport declare namespace DSGlobalHeaderInternalsT {\n  /**\n   * @deprecated This namespace is outdated. Use `DSGlobalHeaderT.DefaultProps` instead.\n   */\n  export interface DefaultProps extends DSGlobalHeaderT.DefaultProps {}\n  /**\n   * @deprecated This namespace is outdated. Use `DSGlobalHeaderT.InternalProps` instead.\n   */\n  export interface InternalProps extends DSGlobalHeaderT.InternalProps {}\n  /**\n   * @deprecated This namespace is outdated. Use `DSGlobalHeaderT.BreadcrumbItem` instead.\n   */\n  export interface BreadcrumbItem extends DSGlobalHeaderT.BreadcrumbItem {}\n  /**\n   * @deprecated This namespace is outdated. Use `DSGlobalHeaderT.ToolbarCustomComponentProps` instead.\n   */\n  export interface ToolbarCustomComponentProps extends DSGlobalHeaderT.ToolbarCustomComponentProps {}\n  /**\n   * @deprecated This namespace is outdated. Use `DSGlobalHeaderT.ToolbarItem` instead.\n   */\n  export type ToolbarItem = DSGlobalHeaderT.ToolbarItem;\n  /**\n   * @deprecated This namespace is outdated. Use `DSGlobalHeaderT.PopupMenuContentItem` instead.\n   */\n  export interface PopupMenuContentItem extends DSGlobalHeaderT.PopupMenuContentItem {}\n  /**\n   * @deprecated This namespace is outdated. Use `DSGlobalHeaderT.PopupMenuContentProps` instead.\n   */\n  export interface PopupMenuContentProps extends DSGlobalHeaderT.PopupMenuContentProps {}\n  /**\n   * @deprecated This namespace is outdated. Use `DSGlobalHeaderT.PopupProps` instead.\n   */\n  export interface PopupProps extends DSGlobalHeaderT.PopupProps {}\n  /**\n   * @deprecated This namespace is outdated. Use `DSGlobalHeaderT.Context` instead.\n   */\n  export interface Context extends DSGlobalHeaderT.Context {}\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type React from 'react';\nimport type { DSAppPicker } from '@elliemae/ds-app-picker';\nimport type { XstyledProps, GlobalAttributesT } from '@elliemae/ds-props-helpers';\nexport declare namespace DSGlobalHeaderInternalsT {\n  export interface DefaultProps {\n    Logo: React.ComponentType;\n    LogoWithBrand: React.ComponentType;\n    breadcrumb: DSGlobalHeaderInternalsT.BreadcrumbItem[];\n    toolbar: DSGlobalHeaderInternalsT.ToolbarItem[];\n    CustomNavigation: React.ComponentType;\n  }\n\n  export interface InternalProps extends DefaultProps, Omit<GlobalAttributesT, keyof DefaultProps>, XstyledProps {}\n\n  export interface BreadcrumbItem {\n    label: string;\n    id?: string;\n    hasNext?: boolean;\n    isSelected?: boolean;\n    onClick?: (event?: React.MouseEvent) => void;\n    onKeyDown?: (event: React.KeyboardEvent) => void;\n    length: number;\n    role?: string;\n  }\n  export interface ToolbarCustomComponentProps {\n    item: ToolbarItem;\n    role?: string;\n    setRef: (ref: HTMLElement | null) => void;\n  }\n  export interface ToolbarItem {\n    type?: 'ds-app-picker' | 'ds-popup-menu' | 'ds-search-toggle' | 'custom';\n    onKeyPress?: (event: React.KeyboardEvent) => void;\n    onClick?: (event: React.MouseEvent) => void;\n    id?: string;\n    label: string;\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    componentProps?: PopupMenuComponentProps | ToggleSearchComponentProps | AppPickerComponentProps;\n    CustomComponent?: React.ComponentType<ToolbarCustomComponentProps>;\n    [key: string]: unknown;\n  }\n\n  interface PopupMenuItem {\n    type?: string;\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    Content?: React.ComponentType;\n    id?: string;\n  }\n\n  //* ******  Component Props ***** *//\n  interface ToggleSearchComponentProps {\n    onNext: () => void;\n    onPrevious: () => void;\n    currentResultIndex: number;\n    totalResults: number;\n    placeholder: string;\n    value: string;\n    onChange: () => void;\n    onBlur: () => void;\n    onClear: () => void;\n    isOpen: boolean;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    onClick: (event: React.MouseEvent) => void;\n    triggerRef: React.MutableRefObject<HTMLButtonElement>;\n    searchContainerRef: React.MutableRefObject<HTMLDivElement>;\n  }\n\n  type AppPickerComponentProps = React.ComponentProps<typeof DSAppPicker> & {\n    triggerOnClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n\n  interface PopupMenuComponentProps {\n    onClickOutside?: (e: MouseEvent | TouchEvent) => void;\n    onKeyPress: (event: React.KeyboardEvent) => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    isOpen: boolean;\n    options: PopupMenuContentItem[];\n    closeOnClick: boolean;\n  }\n\n  //* ******  *****  ***** *//\n\n  interface SearchToggleProps {\n    id: string;\n    setRef: (ref: HTMLElement) => void;\n    componentProps: ToggleSearchComponentProps;\n  }\n\n  interface AppPickerProps {\n    label: string;\n    id: string;\n    setRef: (ref: HTMLElement) => void;\n    componentProps: AppPickerComponentProps;\n  }\n\n  export interface PopupMenuContentItem extends Record<string, unknown> {\n    type?: string;\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    closeOnClick?: boolean;\n    Content?: React.ComponentType;\n  }\n\n  export interface PopupMenuContentProps {\n    options: PopupMenuItem[];\n    onItemClick: () => void;\n    onClose: () => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  }\n\n  export interface PopupProps {\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    id?: string;\n    closeOnClick?: boolean;\n    onKeyPress?: (event: React.KeyboardEvent) => void;\n    title?: string;\n    options?: PopupMenuContentItem[];\n    onClick?: (event: React.MouseEvent) => void;\n    componentProps: PopupMenuComponentProps;\n    setRef: (ref: HTMLElement) => void;\n  }\n\n  export interface Context {\n    showIconOnly: boolean;\n    fontDetector: number;\n    setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n    instanceUID: string;\n    globalHeaderToolbarGrid: string[];\n    props: InternalProps;\n    ownerProps: {\n      getOwnerProps: () => Partial<DSGlobalHeaderInternalsT.DefaultProps>;\n      getOwnerPropsArguments: () => object;\n    };\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

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

@@ -24,11 +24,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import__ = require("../index.js");
-var import_typescript_global_header_breadcrumb_types = require("./typescript-global-header-breadcrumb-types.js");
-var import_typescript_global_header_toolbar_types = require("./typescript-global-header-toolbar-types.js");
 const testPartialDefaults = {
-  breadcrumb: import_typescript_global_header_breadcrumb_types.breadcrumbItems,
-  toolbar: import_typescript_global_header_toolbar_types.toolbarItemsStrict,
+  breadcrumb: [],
+  toolbar: [],
   LogoWithBrand: () => null,
   Logo: () => null
 };
@@ -36,8 +34,8 @@ const testPropsAsSyntax = {
   ...testPartialDefaults
 };
 const testCompleteDefaults = {
-  breadcrumb: import_typescript_global_header_breadcrumb_types.breadcrumbItems,
-  toolbar: import_typescript_global_header_toolbar_types.toolbarItemsStrict,
+  breadcrumb: [],
+  toolbar: [],
   LogoWithBrand: () => null,
   Logo: () => null,
   CustomNavigation: () => null
@@ -49,20 +47,20 @@ const testInternalPropsAsSyntax = {
   ...testCompleteDefaults
 };
 const testExplicitDefinition = {
-  breadcrumb: import_typescript_global_header_breadcrumb_types.breadcrumbItems,
-  toolbar: import_typescript_global_header_toolbar_types.toolbarItemsStrict,
+  breadcrumb: [],
+  toolbar: [],
   LogoWithBrand: () => null,
   Logo: () => null
 };
 const testInferedTypeCompatibility = {
-  breadcrumb: import_typescript_global_header_breadcrumb_types.breadcrumbItemsAsSyntax,
-  toolbar: import_typescript_global_header_toolbar_types.toolbarItemsAsSyntax,
+  breadcrumb: [],
+  toolbar: [],
   LogoWithBrand: () => null,
   Logo: () => null
 };
 const testDefinitionAsConst = {
-  breadcrumb: import_typescript_global_header_breadcrumb_types.breadcrumbItemsAsSyntax,
-  toolbar: import_typescript_global_header_toolbar_types.toolbarItemsAsSyntax,
+  breadcrumb: [],
+  toolbar: [],
   LogoWithBrand: () => null,
   Logo: () => null
 };
@@ -70,14 +68,6 @@ const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSGlobalHeader, { ...testExplicitDefinition }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSGlobalHeader, { ...testInferedTypeCompatibility }),
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSGlobalHeader, { ...testDefinitionAsConst }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import__.DSGlobalHeader,
-    {
-      breadcrumb: import_typescript_global_header_breadcrumb_types.breadcrumbItems,
-      toolbar: import_typescript_global_header_toolbar_types.toolbarItemsStrict,
-      LogoWithBrand: () => null,
-      Logo: () => null
-    }
-  )
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSGlobalHeader, { breadcrumb: [], toolbar: [], LogoWithBrand: () => null, Logo: () => null })
 ] });
 //# sourceMappingURL=typescript-global-header-valid.js.map