@elliemae/ds-global-header 3.22.0-rc.0 → 3.22.0-rc.10

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 React, { useState, useCallback, useRef } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\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      ref={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      ref={handleTriggerRefs}\n      id={id}\n      role=\"menuitem\"\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON}\n      {...getGlobalAttributes(otherProps)}\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,mBAAqD;AACrD,sBAAuB;AACvB,qBAA+B;AAC/B,0BAAkD;AAClD,8BAAoC;AACpC,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,4CAAuB;AAExC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,eAAe;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,sBAAkB;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;AAAW,kBAAU,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;AAAU,gBAAU,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,yCAAU,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,SAAK,+BAAU,oBAAoB,YAAY;AAAA,MAC/C,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,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACL,eAAa,iDAAyB,QAAQ,cAAc;AAAA,MAC3D,OAAG,6CAAoB,UAAU;AAAA,MAElC,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, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\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      ref={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      ref={handleTriggerRefs}\n      id={id}\n      role=\"menuitem\"\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,mBAAqD;AACrD,sBAAuB;AACvB,qBAA+B;AAC/B,0BAAkD;AAClD,8BAAoC;AACpC,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,4CAAuB;AAExC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,eAAe;AAAW,kBAAU,IAAI;AAC5C,UAAI;AAAS,gBAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,sBAAkB;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;AAAW,kBAAU,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;AAAU,gBAAU,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,yCAAU,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,SAAK,+BAAU,oBAAoB,YAAY;AAAA,MAC/C,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,KAAK;AAAA,MACL;AAAA,MACA,MAAK;AAAA,MACL,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/parts/Toolbar/useGlobalHeaderToolbar.js

@@ -38,6 +38,8 @@ const useGlobalHeaderToolbar = () => {
   const listRef = (0, import_react.useRef)(null);
   const setRef = (0, import_react.useCallback)(
     (index) => (ref) => {
+      if (!ref)
+        return;
       allButtonRefs.current[index] = ref;
       if (index === 0 && allButtonRefs.current[0]) {
         allButtonRefs.current[0]?.setAttribute?.("tabindex", "0");

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Toolbar/useGlobalHeaderToolbar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useRef, useCallback } from 'react';\n\nexport const useGlobalHeaderToolbar = () => {\n  const allButtonRefs = useRef<HTMLElement[]>([]);\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  const setRef = useCallback(\n    (index: number) => (ref: HTMLElement) => {\n      allButtonRefs.current[index] = ref;\n      if (index === 0 && allButtonRefs.current[0]) {\n        allButtonRefs.current[0]?.setAttribute?.('tabindex', '0');\n      } else {\n        allButtonRefs.current[index]?.setAttribute?.('tabindex', '-1');\n      }\n    },\n    [],\n  );\n\n  const keyboardNavigation = useCallback((e: React.KeyboardEvent) => {\n    if (allButtonRefs.current.includes(e.target as HTMLElement)) {\n      const currentIndex = allButtonRefs.current.indexOf(e.target as HTMLElement);\n      const allRefsLength = allButtonRefs.current.length;\n      if (e.key === 'ArrowRight') {\n        if (currentIndex < allRefsLength - 1) {\n          allButtonRefs.current[currentIndex + 1]?.focus?.();\n        } else {\n          allButtonRefs.current[0]?.focus?.();\n        }\n      }\n      if (e.key === 'ArrowLeft') {\n        if (currentIndex === 0) {\n          allButtonRefs.current[allRefsLength - 1]?.focus?.();\n        } else {\n          allButtonRefs.current[currentIndex - 1]?.focus?.();\n        }\n      }\n    }\n  }, []);\n\n  return {\n    listRef,\n    setRef,\n    keyboardNavigation,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAE7B,MAAM,yBAAyB,MAAM;AAC1C,QAAM,oBAAgB,qBAAsB,CAAC,CAAC;AAC9C,QAAM,cAAU,qBAA8B,IAAI;AAElD,QAAM,aAAS;AAAA,IACb,CAAC,UAAkB,CAAC,QAAqB;AACvC,oBAAc,QAAQ,KAAK,IAAI;AAC/B,UAAI,UAAU,KAAK,cAAc,QAAQ,CAAC,GAAG;AAC3C,sBAAc,QAAQ,CAAC,GAAG,eAAe,YAAY,GAAG;AAAA,MAC1D,OAAO;AACL,sBAAc,QAAQ,KAAK,GAAG,eAAe,YAAY,IAAI;AAAA,MAC/D;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,yBAAqB,0BAAY,CAAC,MAA2B;AACjE,QAAI,cAAc,QAAQ,SAAS,EAAE,MAAqB,GAAG;AAC3D,YAAM,eAAe,cAAc,QAAQ,QAAQ,EAAE,MAAqB;AAC1E,YAAM,gBAAgB,cAAc,QAAQ;AAC5C,UAAI,EAAE,QAAQ,cAAc;AAC1B,YAAI,eAAe,gBAAgB,GAAG;AACpC,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD,OAAO;AACL,wBAAc,QAAQ,CAAC,GAAG,QAAQ;AAAA,QACpC;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,YAAI,iBAAiB,GAAG;AACtB,wBAAc,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,QACpD,OAAO;AACL,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useRef, useCallback } from 'react';\n\nexport const useGlobalHeaderToolbar = () => {\n  const allButtonRefs = useRef<HTMLElement[]>([]);\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  const setRef = useCallback(\n    (index: number) => (ref: HTMLElement | null) => {\n      if (!ref) return;\n      allButtonRefs.current[index] = ref;\n      if (index === 0 && allButtonRefs.current[0]) {\n        allButtonRefs.current[0]?.setAttribute?.('tabindex', '0');\n      } else {\n        allButtonRefs.current[index]?.setAttribute?.('tabindex', '-1');\n      }\n    },\n    [],\n  );\n\n  const keyboardNavigation = useCallback((e: React.KeyboardEvent) => {\n    if (allButtonRefs.current.includes(e.target as HTMLElement)) {\n      const currentIndex = allButtonRefs.current.indexOf(e.target as HTMLElement);\n      const allRefsLength = allButtonRefs.current.length;\n      if (e.key === 'ArrowRight') {\n        if (currentIndex < allRefsLength - 1) {\n          allButtonRefs.current[currentIndex + 1]?.focus?.();\n        } else {\n          allButtonRefs.current[0]?.focus?.();\n        }\n      }\n      if (e.key === 'ArrowLeft') {\n        if (currentIndex === 0) {\n          allButtonRefs.current[allRefsLength - 1]?.focus?.();\n        } else {\n          allButtonRefs.current[currentIndex - 1]?.focus?.();\n        }\n      }\n    }\n  }, []);\n\n  return {\n    listRef,\n    setRef,\n    keyboardNavigation,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAE7B,MAAM,yBAAyB,MAAM;AAC1C,QAAM,oBAAgB,qBAAsB,CAAC,CAAC;AAC9C,QAAM,cAAU,qBAA8B,IAAI;AAElD,QAAM,aAAS;AAAA,IACb,CAAC,UAAkB,CAAC,QAA4B;AAC9C,UAAI,CAAC;AAAK;AACV,oBAAc,QAAQ,KAAK,IAAI;AAC/B,UAAI,UAAU,KAAK,cAAc,QAAQ,CAAC,GAAG;AAC3C,sBAAc,QAAQ,CAAC,GAAG,eAAe,YAAY,GAAG;AAAA,MAC1D,OAAO;AACL,sBAAc,QAAQ,KAAK,GAAG,eAAe,YAAY,IAAI;AAAA,MAC/D;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,yBAAqB,0BAAY,CAAC,MAA2B;AACjE,QAAI,cAAc,QAAQ,SAAS,EAAE,MAAqB,GAAG;AAC3D,YAAM,eAAe,cAAc,QAAQ,QAAQ,EAAE,MAAqB;AAC1E,YAAM,gBAAgB,cAAc,QAAQ;AAC5C,UAAI,EAAE,QAAQ,cAAc;AAC1B,YAAI,eAAe,gBAAgB,GAAG;AACpC,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD,OAAO;AACL,wBAAc,QAAQ,CAAC,GAAG,QAAQ;AAAA,QACpC;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,YAAI,iBAAiB,GAAG;AACtB,wBAAc,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,QACpD,OAAO;AACL,wBAAc,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,QACnD;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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": ["import { 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    backgroundColor?: string;\n    bg?: string;\n  };\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};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;AAGvE,MAAM,OAAO,MAAM;AAEZ,MAAM,eAAe;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,EACf,MAAM;AACR;AASO,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;",
+  "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 React from 'react';\nimport type { DSAppPicker } from '@elliemae/ds-app-picker';\n\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 type InternalProps = DefaultProps;\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?: (onClick: (event?: React.MouseEvent) => void) => (event: React.KeyboardEvent) => void;\n    length: number;\n  }\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<{ item: ToolbarItem; role: string; setRef: (ref: HTMLElement) => void }>;\n  }\n\n  interface PopupMenuItem {\n    type?: 'separator' | 'custom';\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?: (event: React.MouseEvent) => void;\n  };\n\n  interface PopupMenuComponentProps {\n    onClickOutside?: (event: React.MouseEvent | React.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    setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n    instanceUID: string;\n    globalHeaderToolbarGrid: string[];\n    props: InternalProps;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "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    setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n    instanceUID: string;\n    globalHeaderToolbarGrid: string[];\n    props: InternalProps;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/esm/DSGlobalHeader.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { omit } from "lodash";
 import { useGetGlobalAttributes, useGetXstyledProps, describe } from "@elliemae/ds-props-helpers";
 import { propTypes } from "./react-desc-prop-types.js";
 import { GlobalHeaderLogo } from "./parts/Logo/GlobalHeaderLogo.js";
@@ -7,23 +8,23 @@ import { GlobalHeaderBreadcrumb } from "./parts/Breadcrumb/GlobalHeaderBreadcrum
 import { GlobalHeaderToolbar } from "./parts/Toolbar/GlobalHeaderToolbar.js";
 import { DSGlobalHeaderContext } from "./DSGlobalHeaderContext.js";
 import { useGlobalHeader } from "./config/useGlobalHeader.js";
-import { GlobalHeaderContainer } from "./parts/GlobalHeaderContainer.js";
 import { useValidateProps } from "./config/useValidateProps.js";
-import { DSGlobalHeaderDatatestid, DSGlobalHeaderName } from "./exported-related/index.js";
+import { DSGlobalHeaderName } from "./exported-related/index.js";
+import { Container } from "./parts/styles.js";
 const DSGlobalHeader = (props) => {
   useValidateProps(props);
   const ctx = useGlobalHeader(props);
-  const globalAttrs = useGetGlobalAttributes(props);
-  const xstyledAttrs = useGetXstyledProps(props);
-  const { bg, backgroundColor } = props;
+  const propsWithDefaults = ctx.props;
+  const globalAttrs = omit(useGetGlobalAttributes(propsWithDefaults), ["cols", "rows", "wrap"]);
+  const xstyledAttrs = useGetXstyledProps(propsWithDefaults);
   return /* @__PURE__ */ jsx(
-    GlobalHeaderContainer,
+    Container,
     {
-      "data-testid": DSGlobalHeaderDatatestid.CONTAINER,
-      globalAttrs,
-      xstyledAttrs,
-      bg,
-      backgroundColor,
+      ...globalAttrs,
+      ...xstyledAttrs,
+      cols: ["auto", "1fr", "auto"],
+      forwardedAs: "header",
+      "data-testid": "ds-global-header",
       children: /* @__PURE__ */ jsxs(DSGlobalHeaderContext.Provider, { value: ctx, children: [
         /* @__PURE__ */ jsx(GlobalHeaderLogo, {}),
         /* @__PURE__ */ jsx(GlobalHeaderBreadcrumb, {}),
@@ -32,8 +33,9 @@ const DSGlobalHeader = (props) => {
     }
   );
 };
+DSGlobalHeader.propTypes = propTypes;
 DSGlobalHeader.displayName = DSGlobalHeaderName;
-const DSGlobalHeaderWithSchema = describe(DSGlobalHeader);
+const DSGlobalHeaderWithSchema = describe(DSGlobalHeader).description("DSGlobalHeader");
 DSGlobalHeaderWithSchema.propTypes = propTypes;
 const GlobalHeader = DSGlobalHeader;
 export {

package/dist/esm/DSGlobalHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSGlobalHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { GlobalHeaderContainer } from './parts/GlobalHeaderContainer.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderDatatestid, DSGlobalHeaderName } from './exported-related/index.js';\nimport type { DSGlobalHeaderT } from './react-desc-prop-types.js';\n\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n\n  const globalAttrs = useGetGlobalAttributes(props);\n  const xstyledAttrs = useGetXstyledProps(props);\n\n  const { bg, backgroundColor } = props;\n\n  return (\n    <GlobalHeaderContainer\n      data-testid={DSGlobalHeaderDatatestid.CONTAINER}\n      globalAttrs={globalAttrs}\n      xstyledAttrs={xstyledAttrs}\n      bg={bg}\n      backgroundColor={backgroundColor}\n    >\n      <DSGlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderLogo />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </DSGlobalHeaderContext.Provider>\n    </GlobalHeaderContainer>\n  );\n};\n\nDSGlobalHeader.displayName = DSGlobalHeaderName;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader);\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8BjB,SACE,KADF;AA7BN,SAAS,wBAAwB,oBAAoB,gBAAgB;AACrE,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B,0BAA0B;AAG7D,MAAM,iBAAiB,CAAC,UAA8C;AACpE,mBAAiB,KAAK;AACtB,QAAM,MAAM,gBAAgB,KAAK;AAEjC,QAAM,cAAc,uBAAuB,KAAK;AAChD,QAAM,eAAe,mBAAmB,KAAK;AAE7C,QAAM,EAAE,IAAI,gBAAgB,IAAI;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,yBAAyB;AAAA,MACtC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,+BAAC,sBAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,4BAAC,oBAAiB;AAAA,QAClB,oBAAC,0BAAuB;AAAA,QACxB,oBAAC,uBAAoB;AAAA,SACvB;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { omit } from 'lodash';\nimport { useGetGlobalAttributes, useGetXstyledProps, describe } from '@elliemae/ds-props-helpers';\nimport { propTypes, type DSGlobalHeaderT } from './react-desc-prop-types.js';\nimport { GlobalHeaderLogo } from './parts/Logo/GlobalHeaderLogo.js';\nimport { GlobalHeaderBreadcrumb } from './parts/Breadcrumb/GlobalHeaderBreadcrumb.js';\nimport { GlobalHeaderToolbar } from './parts/Toolbar/GlobalHeaderToolbar.js';\nimport { DSGlobalHeaderContext } from './DSGlobalHeaderContext.js';\nimport { useGlobalHeader } from './config/useGlobalHeader.js';\nimport { useValidateProps } from './config/useValidateProps.js';\nimport { DSGlobalHeaderName } from './exported-related/index.js';\n// import type { DSGlobalHeaderInternalsT } from './sharedTypes.js';\nimport { Container } from './parts/styles.js';\nconst DSGlobalHeader = (props: DSGlobalHeaderT.Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n  const propsWithDefaults = ctx.props;\n  const globalAttrs = omit(useGetGlobalAttributes(propsWithDefaults), ['cols', 'rows', 'wrap']);\n  const xstyledAttrs = useGetXstyledProps(propsWithDefaults);\n\n  return (\n    <Container\n      {...globalAttrs}\n      {...xstyledAttrs}\n      cols={['auto', '1fr', 'auto']}\n      forwardedAs=\"header\"\n      data-testid=\"ds-global-header\"\n    >\n      <DSGlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderLogo />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </DSGlobalHeaderContext.Provider>\n    </Container>\n  );\n};\n\nDSGlobalHeader.propTypes = propTypes;\nDSGlobalHeader.displayName = DSGlobalHeaderName;\nconst DSGlobalHeaderWithSchema = describe(DSGlobalHeader).description('DSGlobalHeader');\nDSGlobalHeaderWithSchema.propTypes = propTypes;\n\nconst GlobalHeader = DSGlobalHeader;\n\nexport { GlobalHeader, DSGlobalHeader, DSGlobalHeaderWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC4BjB,SACE,KADF;AA3BN,SAAS,YAAY;AACrB,SAAS,wBAAwB,oBAAoB,gBAAgB;AACrE,SAAS,iBAAuC;AAChD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AAEnC,SAAS,iBAAiB;AAC1B,MAAM,iBAAiB,CAAC,UAA8C;AACpE,mBAAiB,KAAK;AACtB,QAAM,MAAM,gBAAgB,KAAK;AACjC,QAAM,oBAAoB,IAAI;AAC9B,QAAM,cAAc,KAAK,uBAAuB,iBAAiB,GAAG,CAAC,QAAQ,QAAQ,MAAM,CAAC;AAC5F,QAAM,eAAe,mBAAmB,iBAAiB;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAY;AAAA,MAEZ,+BAAC,sBAAsB,UAAtB,EAA+B,OAAO,KACrC;AAAA,4BAAC,oBAAiB;AAAA,QAClB,oBAAC,0BAAuB;AAAA,QACxB,oBAAC,uBAAoB;AAAA,SACvB;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc,EAAE,YAAY,gBAAgB;AACtF,yBAAyB,YAAY;AAErC,MAAM,eAAe;",
   "names": []
 }

package/dist/esm/config/useGlobalHeader.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React2, { useState, useMemo } from "react";
+import { useState, useMemo } from "react";
 import { uid } from "uid";
 import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { defaultProps } from "../react-desc-prop-types.js";
@@ -11,7 +11,7 @@ const useGlobalHeader = (props) => {
     () => new Array(propsWithDefaults.toolbar.length).fill("auto"),
     [propsWithDefaults.toolbar]
   );
-  const ctx = React2.useMemo(
+  return useMemo(
     () => ({
       props: propsWithDefaults,
       showIconOnly,
@@ -21,7 +21,6 @@ const useGlobalHeader = (props) => {
     }),
     [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid]
   );
-  return ctx;
 };
 export {
   useGlobalHeader

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useGlobalHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { defaultProps } from '../react-desc-prop-types.js';\nimport type { DSGlobalHeaderInternalsT } from '../sharedTypes.js';\nimport type { DSGlobalHeaderT } from '../react-desc-prop-types.js';\n\nexport const useGlobalHeader = (props: DSGlobalHeaderT.Props): DSGlobalHeaderInternalsT.Context => {\n  const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n\n  const instanceUID = useMemo(() => uid(5), []);\n\n  const globalHeaderToolbarGrid = useMemo(\n    () => new Array(propsWithDefaults.toolbar.length).fill('auto') as string[],\n    [propsWithDefaults.toolbar],\n  );\n\n  const ctx = React.useMemo(\n    () => ({\n      props: propsWithDefaults,\n      showIconOnly,\n      setShowIconOnly,\n      instanceUID,\n      globalHeaderToolbarGrid,\n    }),\n    [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,UAAU,eAAe;AACzC,SAAS,WAAW;AACpB,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB;AAItB,MAAM,kBAAkB,CAAC,UAAmE;AACjG,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAE1E,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,0BAA0B;AAAA,IAC9B,MAAM,IAAI,MAAM,kBAAkB,QAAQ,MAAM,EAAE,KAAK,MAAM;AAAA,IAC7D,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AAEA,QAAM,MAAMA,OAAM;AAAA,IAChB,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,cAAc,aAAa,uBAAuB;AAAA,EACxE;AAEA,SAAO;AACT;",
-  "names": ["React"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { defaultProps, type DSGlobalHeaderT } from '../react-desc-prop-types.js';\nimport { type DSGlobalHeaderInternalsT } from '../sharedTypes.js';\nexport const useGlobalHeader = (props: DSGlobalHeaderT.Props) => {\n  const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSGlobalHeaderInternalsT.InternalProps>(props, defaultProps);\n\n  const instanceUID = useMemo(() => uid(5), []);\n\n  const globalHeaderToolbarGrid = useMemo(\n    () => new Array(propsWithDefaults.toolbar.length).fill('auto') as string[],\n    [propsWithDefaults.toolbar],\n  );\n\n  return useMemo(\n    () => ({\n      props: propsWithDefaults,\n      showIconOnly,\n      setShowIconOnly,\n      instanceUID,\n      globalHeaderToolbarGrid,\n    }),\n    [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,eAAe;AAClC,SAAS,WAAW;AACpB,SAAS,oCAAoC;AAC7C,SAAS,oBAA0C;AAE5C,MAAM,kBAAkB,CAAC,UAAiC;AAC/D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,oBAAoB,6BAAqE,OAAO,YAAY;AAElH,QAAM,cAAc,QAAQ,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC;AAE5C,QAAM,0BAA0B;AAAA,IAC9B,MAAM,IAAI,MAAM,kBAAkB,QAAQ,MAAM,EAAE,KAAK,MAAM;AAAA,IAC7D,CAAC,kBAAkB,OAAO;AAAA,EAC5B;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,cAAc,aAAa,uBAAuB;AAAA,EACxE;AACF;",
+  "names": []
 }

package/dist/esm/config/useValidateProps.js

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

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

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

package/dist/esm/index.js

@@ -2,6 +2,7 @@ import * as React from "react";
 export * from "./DSGlobalHeader.js";
 export * from "./exported-related/index.js";
 import { GlobalHeader } from "./DSGlobalHeader.js";
+import {} from "./sharedTypes.js";
 export {
   GlobalHeader as default
 };

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSGlobalHeader.js';\nexport * from './exported-related/index.js';\nexport { GlobalHeader as default } from './DSGlobalHeader.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,SAAyB,oBAAe;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSGlobalHeader.js';\nexport * from './exported-related/index.js';\nexport { GlobalHeader as default } from './DSGlobalHeader.js';\nexport { type DSGlobalHeaderInternalsT } from './sharedTypes.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,SAAyB,oBAAe;AACxC,eAA8C;",
   "names": []
 }

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

@@ -20,7 +20,7 @@ const GlobalHeaderBreadcrumb = () => {
       children: [
         /* @__PURE__ */ jsx(StyledPipe, { showIconOnly, "aria-hidden": true, "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.PIPE }),
         /* @__PURE__ */ jsx(StyledBreadcrumbList, { "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.LIST, children: CustomNavigation !== void 0 ? /* @__PURE__ */ jsx(CustomNavigation, {}) : breadcrumb?.map((item) => {
-          const { onClick, isSelected, label, hasNext, id, ...rest } = item;
+          const { onClick, isSelected, label, hasNext, ...rest } = item;
           return /* @__PURE__ */ jsx(
             PureBreadcrumb,
             {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Breadcrumb/GlobalHeaderBreadcrumb.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n  const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } =\n    useGlobalHeaderBreadcrumb();\n\n  return (\n    <StyledBreadcrumbContainer\n      height=\"100%\"\n      alignItems=\"center\"\n      justifyContent=\"flex-start\"\n      aria-label=\"breadcrumb\"\n      cols={['auto', 'auto', '1fr']}\n      forwardedAs=\"nav\"\n      data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n    >\n      <StyledPipe showIconOnly={showIconOnly} aria-hidden data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE} />\n      <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST}>\n        {CustomNavigation !== undefined ? (\n          <CustomNavigation />\n        ) : (\n          breadcrumb?.map((item) => {\n            const { onClick, isSelected, label, hasNext, id, ...rest } = item;\n            return (\n              <PureBreadcrumb\n                label={label}\n                hasNext={hasNext}\n                isSelected={isSelected}\n                key={`${instanceUID}-breadcrumb-item-${label}`}\n                onKeyDown={onClick && handleOnKeyDown(onClick)}\n                {...getGlobalAttributes(rest)}\n                onClick={onClick}\n                length={breadcrumb.length}\n              />\n            );\n          })\n        )}\n      </StyledBreadcrumbList>\n      <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n    </StyledBreadcrumbContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACYnB,SASE,KATF;AAXJ,SAAS,2BAA2B;AACpC,SAAS,2BAA2B,YAAY,4BAA4B;AAC5E,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,YAAY,IAC9F,0BAA0B;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAa,yBAAyB,WAAW;AAAA,MAEjD;AAAA,4BAAC,cAAW,cAA4B,eAAW,MAAC,eAAa,yBAAyB,WAAW,MAAM;AAAA,QAC3G,oBAAC,wBAAqB,eAAa,yBAAyB,WAAW,MACpE,+BAAqB,SACpB,oBAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,IAAI,GAAG,KAAK,IAAI;AAC7D,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,cAC5C,GAAG,oBAAoB,IAAI;AAAA,cAC5B;AAAA,cACA,QAAQ,WAAW;AAAA;AAAA,YAJd,GAAG,+BAA+B;AAAA,UAKzC;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,oBAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledBreadcrumbContainer, StyledPipe, StyledBreadcrumbList } from './styles.js';\nimport { useGlobalHeaderBreadcrumb } from './useGlobalHeaderBreadcrumb.js';\nimport { PureBreadcrumb } from './PureBreadcrumb.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n  const { breadcrumb, CustomNavigation, showIconOnly, flexRegionRef, handleOnKeyDown, instanceUID } =\n    useGlobalHeaderBreadcrumb();\n\n  return (\n    <StyledBreadcrumbContainer\n      height=\"100%\"\n      alignItems=\"center\"\n      justifyContent=\"flex-start\"\n      aria-label=\"breadcrumb\"\n      cols={['auto', 'auto', '1fr']}\n      forwardedAs=\"nav\"\n      data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.CONTAINER}\n    >\n      <StyledPipe showIconOnly={showIconOnly} aria-hidden data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.PIPE} />\n      <StyledBreadcrumbList data-testid={DSGlobalHeaderDatatestid.BREADCRUMB.LIST}>\n        {CustomNavigation !== undefined ? (\n          <CustomNavigation />\n        ) : (\n          breadcrumb?.map((item) => {\n            const { onClick, isSelected, label, hasNext, ...rest } = item;\n            return (\n              <PureBreadcrumb\n                label={label}\n                hasNext={hasNext}\n                isSelected={isSelected}\n                key={`${instanceUID}-breadcrumb-item-${label}`}\n                onKeyDown={onClick && handleOnKeyDown(onClick)}\n                {...getGlobalAttributes(rest)}\n                onClick={onClick}\n                length={breadcrumb.length}\n              />\n            );\n          })\n        )}\n      </StyledBreadcrumbList>\n      <div id=\"global-header-flex-region\" ref={flexRegionRef} aria-hidden />\n    </StyledBreadcrumbContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYnB,SASE,KATF;AAXJ,SAAS,2BAA2B;AACpC,SAAS,2BAA2B,YAAY,4BAA4B;AAC5E,SAAS,iCAAiC;AAC1C,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAElC,MAAM,yBAAyB,MAAmB;AACvD,QAAM,EAAE,YAAY,kBAAkB,cAAc,eAAe,iBAAiB,YAAY,IAC9F,0BAA0B;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,aAAY;AAAA,MACZ,eAAa,yBAAyB,WAAW;AAAA,MAEjD;AAAA,4BAAC,cAAW,cAA4B,eAAW,MAAC,eAAa,yBAAyB,WAAW,MAAM;AAAA,QAC3G,oBAAC,wBAAqB,eAAa,yBAAyB,WAAW,MACpE,+BAAqB,SACpB,oBAAC,oBAAiB,IAElB,YAAY,IAAI,CAAC,SAAS;AACxB,gBAAM,EAAE,SAAS,YAAY,OAAO,SAAS,GAAG,KAAK,IAAI;AACzD,iBACE;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,WAAW,WAAW,gBAAgB,OAAO;AAAA,cAC5C,GAAG,oBAAoB,IAAI;AAAA,cAC5B;AAAA,cACA,QAAQ,WAAW;AAAA;AAAA,YAJd,GAAG,+BAA+B;AAAA,UAKzC;AAAA,QAEJ,CAAC,GAEL;AAAA,QACA,oBAAC,SAAI,IAAG,6BAA4B,KAAK,eAAe,eAAW,MAAC;AAAA;AAAA;AAAA,EACtE;AAEJ;",
   "names": []
 }

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

@@ -22,7 +22,7 @@ const PureBreadcrumb = React2.memo(
         "data-testid": DSGlobalHeaderDatatestid.BREADCRUMB.ITEM_LINK,
         "aria-current": isSelected,
         id,
-        tabIndex: "0",
+        tabIndex: 0,
         ...rest,
         children: /* @__PURE__ */ jsx(
           StyledLabel,

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    instanceUID,\n    globalHeaderToolbarGrid,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        onKeyDown={keyboardNavigation}\n        ref={listRef}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n      >\n        {toolbar.map((item, index) => {\n          const {\n            Icon,\n            type,\n            onClick,\n            onKeyPress,\n            CustomComponent,\n            label,\n            id = '',\n            componentProps = {},\n            ...otherProps\n          } = item;\n\n          switch (type) {\n            case 'ds-popup-menu':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <PopupMenu\n                    title={label}\n                    Icon={Icon}\n                    onClick={onClick}\n                    onKeyPress={onKeyPress}\n                    setRef={setRef(index)}\n                    id={id}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-app-picker':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <AppPicker\n                    label={label}\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-search-toggle':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <SearchToggle\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'custom':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  {CustomComponent && <CustomComponent item={item} role=\"menuitem\" setRef={setRef(index)} />}\n                </StyledToolbarItem>\n              );\n\n            default:\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <StyledButton\n                    onClick={onClick}\n                    title={label}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n                    id={id}\n                    role=\"menuitem\"\n                    ref={setRef(index)}\n                    {...getGlobalAttributes(otherProps)}\n                  >\n                    {Icon && <Icon size=\"m\" />}\n                  </StyledButton>\n                </StyledToolbarItem>\n              );\n          }\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoDL;AApDlB,SAAgB,kBAAkB;AAClC,SAAS,2BAA2B;AACpC,SAAS,YAAY,wBAAwB,yBAAyB;AACtE,SAAS,WAAW,WAAW,oBAAoB;AACnD,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,8BAA8B;AAGhC,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,mBAAmB,IAAI,uBAAuB;AAEvE,SACE,oBAAC,0BAAuB,eAAa,yBAAyB,QAAQ,WAAW,cAAW,WAC1F;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAK;AAAA,MACL,WAAW;AAAA,MACX,KAAK;AAAA,MACL,eAAa,yBAAyB,QAAQ;AAAA,MAE7C,kBAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,cAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL,iBAAiB,CAAC;AAAA,UAClB,GAAG;AAAA,QACL,IAAI;AAEJ,gBAAQ,MAAM;AAAA,UACZ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,yBAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,oBACP;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACA;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cAZK,GAAG,+BAA+B;AAAA,YAazC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,yBAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cATK,GAAG,+BAA+B;AAAA,YAUzC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,yBAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cARK,GAAG,+BAA+B;AAAA,YASzC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,yBAAyB,QAAQ;AAAA,gBAE7C,6BAAmB,oBAAC,mBAAgB,MAAY,MAAK,YAAW,QAAQ,OAAO,KAAK,GAAG;AAAA;AAAA,cAHnF,GAAG,+BAA+B;AAAA,YAIzC;AAAA,UAGJ;AACE,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,yBAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,OAAO;AAAA,oBACP,eAAa,yBAAyB,QAAQ;AAAA,oBAC9C;AAAA,oBACA,MAAK;AAAA,oBACL,KAAK,OAAO,KAAK;AAAA,oBAChB,GAAG,oBAAoB,UAAU;AAAA,oBAEjC,kBAAQ,oBAAC,QAAK,MAAK,KAAI;AAAA;AAAA,gBAC1B;AAAA;AAAA,cAbK,GAAG,+BAA+B;AAAA,YAczC;AAAA,QAEN;AAAA,MACF,CAAC;AAAA;AAAA,EACH,GACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles.js';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox/index.js';\nimport { StyledButton } from '../styles.js';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related/index.js';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar.js';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes.js';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    instanceUID,\n    globalHeaderToolbarGrid,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER} aria-label=\"menubar\">\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        onKeyDown={keyboardNavigation}\n        ref={listRef}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n      >\n        {toolbar.map((item, index) => {\n          const {\n            Icon,\n            type,\n            onClick,\n            onKeyPress,\n            CustomComponent,\n            label,\n            id = '',\n            componentProps = {},\n            ...otherProps\n          } = item;\n\n          switch (type) {\n            case 'ds-popup-menu':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <PopupMenu\n                    title={label}\n                    Icon={Icon}\n                    onClick={onClick}\n                    onKeyPress={onKeyPress}\n                    setRef={setRef(index)}\n                    id={id}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-app-picker':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <AppPicker\n                    label={label}\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-search-toggle':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <SearchToggle\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'custom':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  {CustomComponent && <CustomComponent item={item} role=\"menuitem\" setRef={setRef(index)} />}\n                </StyledToolbarItem>\n              );\n\n            default:\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <StyledButton\n                    onClick={onClick}\n                    title={label}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n                    id={id}\n                    role=\"menuitem\"\n                    ref={setRef(index)}\n                    {...getGlobalAttributes(otherProps)}\n                    type=\"button\"\n                  >\n                    {Icon && <Icon size=\"m\" />}\n                  </StyledButton>\n                </StyledToolbarItem>\n              );\n          }\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoDL;AApDlB,SAAgB,kBAAkB;AAClC,SAAS,2BAA2B;AACpC,SAAS,YAAY,wBAAwB,yBAAyB;AACtE,SAAS,WAAW,WAAW,oBAAoB;AACnD,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,8BAA8B;AAGhC,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE,QAAQ;AAAA,IACjB;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,mBAAmB,IAAI,uBAAuB;AAEvE,SACE,oBAAC,0BAAuB,eAAa,yBAAyB,QAAQ,WAAW,cAAW,WAC1F;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,YAAW;AAAA,MACX,gBAAe;AAAA,MACf,QAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAK;AAAA,MACL,WAAW;AAAA,MACX,KAAK;AAAA,MACL,eAAa,yBAAyB,QAAQ;AAAA,MAE7C,kBAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,cAAM;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL,iBAAiB,CAAC;AAAA,UAClB,GAAG;AAAA,QACL,IAAI;AAEJ,gBAAQ,MAAM;AAAA,UACZ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,yBAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,oBACP;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACA;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cAZK,GAAG,+BAA+B;AAAA,YAazC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,yBAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cATK,GAAG,+BAA+B;AAAA,YAUzC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,yBAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,QAAQ,OAAO,KAAK;AAAA,oBACpB;AAAA,oBACC,GAAG;AAAA;AAAA,gBACN;AAAA;AAAA,cARK,GAAG,+BAA+B;AAAA,YASzC;AAAA,UAEJ,KAAK;AACH,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,yBAAyB,QAAQ;AAAA,gBAE7C,6BAAmB,oBAAC,mBAAgB,MAAY,MAAK,YAAW,QAAQ,OAAO,KAAK,GAAG;AAAA;AAAA,cAHnF,GAAG,+BAA+B;AAAA,YAIzC;AAAA,UAGJ;AACE,mBACE;AAAA,cAAC;AAAA;AAAA,gBAEC,eAAa,yBAAyB,QAAQ;AAAA,gBAE9C;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA,OAAO;AAAA,oBACP,eAAa,yBAAyB,QAAQ;AAAA,oBAC9C;AAAA,oBACA,MAAK;AAAA,oBACL,KAAK,OAAO,KAAK;AAAA,oBAChB,GAAG,oBAAoB,UAAU;AAAA,oBAClC,MAAK;AAAA,oBAEJ,kBAAQ,oBAAC,QAAK,MAAK,KAAI;AAAA;AAAA,gBAC1B;AAAA;AAAA,cAdK,GAAG,+BAA+B;AAAA,YAezC;AAAA,QAEN;AAAA,MACF,CAAC;AAAA;AAAA,EACH,GACF;AAEJ;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import React2, { useState, useRef, useCallback, useMemo } from "react";
+import { useState, useRef, useCallback } from "react";
 import { DSAppPicker } from "@elliemae/ds-app-picker";
 import { mergeRefs, useCallbackAfterRender } from "@elliemae/ds-utilities";
 import { getGlobalAttributes } from "@elliemae/ds-props-helpers";
@@ -32,11 +32,6 @@ const AppPicker = ({
     triggerOnClick
   } = componentProps;
   const schedule = useCallbackAfterRender();
-  const internalActionRef = useMemo(() => {
-    const ref = React2.createRef();
-    ref.current = {};
-    return actionRef ?? ref;
-  }, [actionRef]);
   const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);
   const handleTriggerKeyDown = useCallback((e) => {
     if (e.code === "Enter" || e.code === "Space" || e.code === "ArrowDown") {
@@ -50,7 +45,7 @@ const AppPicker = ({
         schedule(focusTrigger);
       }
     },
-    [schedule]
+    [focusTrigger, schedule]
   );
   const handleOnClickOutside = useCallback(() => {
     setIsOpen(false);
@@ -60,12 +55,32 @@ const AppPicker = ({
       setIsOpen(true);
       setTimeout(() => {
         if (e.detail === 0)
-          internalActionRef.current.focusSelectedOrFirstAvailable();
+          actionRef?.current?.focusSelectedOrFirstAvailable?.();
         else
-          internalActionRef.current.focusWrapper();
+          actionRef?.current?.focusWrapper();
       }, 10);
     },
-    [internalActionRef]
+    [actionRef]
+  );
+  const TriggerDefaultComponent = ({ ref }) => /* @__PURE__ */ jsx(
+    StyledButton,
+    {
+      onClick: triggerOnClick ?? handleOnClick,
+      onKeyDown: handleTriggerKeyDown,
+      ref: (buttonRef) => {
+        setRef(buttonRef);
+        mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);
+      },
+      "aria-label": label,
+      "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+      role: "menuitem",
+      "aria-haspopup": true,
+      "aria-expanded": userIsOpen ?? isOpen,
+      id,
+      ...getGlobalAttributes(otherProps),
+      type: "button",
+      children: /* @__PURE__ */ jsx(MenuPicker, { width: 20.73, height: 20.73 })
+    }
   );
   return /* @__PURE__ */ jsx(
     DSAppPicker,
@@ -76,27 +91,9 @@ const AppPicker = ({
       customSectionTitle,
       icon,
       onKeyDown: userOnKeyDown ?? handleAppPickerOnKeyDown,
-      actionRef: internalActionRef,
+      actionRef,
       onClickOutside: userOnClickOutside ?? handleOnClickOutside,
-      renderTrigger: userRenderTrigger || (({ ref }) => /* @__PURE__ */ jsx(
-        StyledButton,
-        {
-          onClick: triggerOnClick ?? handleOnClick,
-          onKeyDown: handleTriggerKeyDown,
-          ref: (buttonRef) => {
-            setRef(buttonRef);
-            mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);
-          },
-          "aria-label": label,
-          "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
-          role: "menuitem",
-          "aria-haspopup": true,
-          "aria-expanded": userIsOpen ?? isOpen,
-          id,
-          ...getGlobalAttributes(otherProps),
-          children: /* @__PURE__ */ jsx(MenuPicker, { width: 20.73, height: 20.73 })
-        }
-      )),
+      renderTrigger: userRenderTrigger || TriggerDefaultComponent,
       isOpen: userIsOpen ?? isOpen,
       onClose,
       triggerRef

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const AppPicker = ({\n  label,\n  id,\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderInternalsT.AppPickerProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalTriggerRef = useRef<HTMLButtonElement>(null);\n\n  const {\n    apps,\n    icon,\n    customApps,\n    sectionTitle,\n    customSectionTitle,\n    actionRef,\n    isOpen: userIsOpen,\n    onKeyDown: userOnKeyDown,\n    onClickOutside: userOnClickOutside,\n    renderTrigger: userRenderTrigger,\n    onClose,\n    triggerRef,\n    triggerOnClick,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  const internalActionRef = useMemo(() => {\n    const ref = React.createRef();\n    ref.current = {};\n    return actionRef ?? ref;\n  }, [actionRef]);\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n    if (e.code === 'Enter' || e.code === 'Space' || e.code === 'ArrowDown') {\n      setIsOpen(true);\n    }\n  }, []);\n\n  const handleAppPickerOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        schedule(focusTrigger);\n      }\n    },\n    [schedule],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      setIsOpen(true);\n      setTimeout(() => {\n        if (e.detail === 0) internalActionRef.current.focusSelectedOrFirstAvailable();\n        else internalActionRef.current.focusWrapper();\n      }, 10);\n    },\n    [internalActionRef],\n  );\n\n  return (\n    <DSAppPicker\n      apps={apps}\n      customApps={customApps}\n      sectionTitle={sectionTitle}\n      customSectionTitle={customSectionTitle}\n      icon={icon}\n      onKeyDown={userOnKeyDown ?? handleAppPickerOnKeyDown}\n      actionRef={internalActionRef}\n      onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n      renderTrigger={\n        userRenderTrigger ||\n        (({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n          <StyledButton\n            onClick={triggerOnClick ?? handleOnClick}\n            onKeyDown={handleTriggerKeyDown}\n            ref={(buttonRef: HTMLButtonElement) => {\n              setRef(buttonRef);\n              mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n            }}\n            aria-label={label}\n            data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n            role=\"menuitem\"\n            aria-haspopup\n            aria-expanded={userIsOpen ?? isOpen}\n            id={id}\n            {...getGlobalAttributes(otherProps)}\n          >\n            <MenuPicker width={20.73} height={20.73} />\n          </StyledButton>\n        ))\n      }\n      isOpen={userIsOpen ?? isOpen}\n      onClose={onClose}\n      triggerRef={triggerRef}\n    />\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACwGX;AAxGZ,OAAOA,UAAS,UAAU,QAAQ,aAAa,eAAe;AAC9D,SAAS,mBAAmB;AAC5B,SAAS,WAAW,8BAA8B;AAClD,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4D;AAC1D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,qBAAqB,OAA0B,IAAI;AAEzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,uBAAuB;AAExC,QAAM,oBAAoB,QAAQ,MAAM;AACtC,UAAM,MAAMA,OAAM,UAAU;AAC5B,QAAI,UAAU,CAAC;AACf,WAAO,aAAa;AAAA,EACtB,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,uBAAmD,YAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,2BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,uBAAuB,YAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW;AAAG,4BAAkB,QAAQ,8BAA8B;AAAA;AACvE,4BAAkB,QAAQ,aAAa;AAAA,MAC9C,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B,WAAW;AAAA,MACX,gBAAgB,sBAAsB;AAAA,MACtC,eACE,sBACC,CAAC,EAAE,IAAI,MACN;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,kBAAkB;AAAA,UAC3B,WAAW;AAAA,UACX,KAAK,CAAC,cAAiC;AACrC,mBAAO,SAAS;AAChB,sBAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,UAC1D;AAAA,UACA,cAAY;AAAA,UACZ,eAAa,yBAAyB,QAAQ;AAAA,UAC9C,MAAK;AAAA,UACL,iBAAa;AAAA,UACb,iBAAe,cAAc;AAAA,UAC7B;AAAA,UACC,GAAG,oBAAoB,UAAU;AAAA,UAElC,8BAAC,cAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,MAC3C;AAAA,MAGJ,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
-  "names": ["React"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { StyledButton } from '../../../styles.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes.js';\n\nexport const AppPicker = ({\n  label,\n  id,\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderInternalsT.AppPickerProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalTriggerRef = useRef<HTMLButtonElement>(null);\n\n  const {\n    apps,\n    icon,\n    customApps,\n    sectionTitle,\n    customSectionTitle,\n    actionRef,\n    isOpen: userIsOpen,\n    onKeyDown: userOnKeyDown,\n    onClickOutside: userOnClickOutside,\n    renderTrigger: userRenderTrigger,\n    onClose,\n    triggerRef,\n    triggerOnClick,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  // const appPickerRef = useRef(null);\n  // const internalActionRef = useMemo(() => actionRef ?? appPickerRef, [actionRef]);\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n    if (e.code === 'Enter' || e.code === 'Space' || e.code === 'ArrowDown') {\n      setIsOpen(true);\n    }\n  }, []);\n\n  const handleAppPickerOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        schedule(focusTrigger);\n      }\n    },\n    [focusTrigger, schedule],\n  );\n\n  const handleOnClickOutside = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      setIsOpen(true);\n      setTimeout(() => {\n        if (e.detail === 0) actionRef?.current?.focusSelectedOrFirstAvailable?.();\n        else actionRef?.current?.focusWrapper();\n      }, 10);\n    },\n    [actionRef],\n  );\n\n  const TriggerDefaultComponent = ({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n    <StyledButton\n      onClick={triggerOnClick ?? handleOnClick}\n      onKeyDown={handleTriggerKeyDown}\n      ref={(buttonRef: HTMLButtonElement) => {\n        setRef(buttonRef);\n        mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n      }}\n      aria-label={label}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n      role=\"menuitem\"\n      aria-haspopup\n      aria-expanded={userIsOpen ?? isOpen}\n      id={id}\n      {...getGlobalAttributes(otherProps)}\n      type=\"button\"\n    >\n      <MenuPicker width={20.73} height={20.73} />\n    </StyledButton>\n  );\n\n  return (\n    <DSAppPicker\n      apps={apps}\n      customApps={customApps}\n      sectionTitle={sectionTitle}\n      customSectionTitle={customSectionTitle}\n      icon={icon}\n      onKeyDown={userOnKeyDown ?? handleAppPickerOnKeyDown}\n      actionRef={actionRef}\n      onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n      renderTrigger={userRenderTrigger || TriggerDefaultComponent}\n      isOpen={userIsOpen ?? isOpen}\n      onClose={onClose}\n      triggerRef={triggerRef}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0FjB;AA1FN,SAAgB,UAAU,QAAQ,mBAAmB;AACrD,SAAS,mBAAmB;AAC5B,SAAS,WAAW,8BAA8B;AAClD,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AAGlC,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4D;AAC1D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,qBAAqB,OAA0B,IAAI;AAEzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,uBAAuB;AAKxC,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,uBAAmD,YAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,2BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,cAAc,QAAQ;AAAA,EACzB;AAEA,QAAM,uBAAuB,YAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC;AAAA,IAC7C,CAAC,MAAM;AACL,gBAAU,IAAI;AACd,iBAAW,MAAM;AACf,YAAI,EAAE,WAAW;AAAG,qBAAW,SAAS,gCAAgC;AAAA;AACnE,qBAAW,SAAS,aAAa;AAAA,MACxC,GAAG,EAAE;AAAA,IACP;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,0BAA0B,CAAC,EAAE,IAAI,MACrC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,KAAK,CAAC,cAAiC;AACrC,eAAO,SAAS;AAChB,kBAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,yBAAyB,QAAQ;AAAA,MAC9C,MAAK;AAAA,MACL,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,MACC,GAAG,oBAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,8BAAC,cAAW,OAAO,OAAO,QAAQ,OAAO;AAAA;AAAA,EAC3C;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,iBAAiB;AAAA,MAC5B;AAAA,MACA,gBAAgB,sBAAsB;AAAA,MACtC,eAAe,qBAAqB;AAAA,MACpC,QAAQ,cAAc;AAAA,MACtB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
 }

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

@@ -53,10 +53,13 @@ const PopupMenu = ({
     if (closeOnClick && userIsOpen === void 0)
       handleOnClose();
   }, [closeOnClick, handleOnClose, userIsOpen]);
-  const handleRefs = useCallback((ref) => {
-    setRef(ref);
-    setButtonRef(ref);
-  }, []);
+  const handleRefs = useCallback(
+    (ref) => {
+      setRef(ref);
+      setButtonRef(ref);
+    },
+    [setRef]
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       StyledButton,
@@ -70,10 +73,11 @@ const PopupMenu = ({
         "aria-expanded": userIsOpen ?? isOpen,
         id,
         ...useGetGlobalAttributes(otherProps),
+        type: "button",
         children: Icon && /* @__PURE__ */ jsx(Icon, { size: "m" })
       }
     ),
-    /* @__PURE__ */ jsx(
+    buttonRef ? /* @__PURE__ */ jsx(
       DSPopperJS,
       {
         referenceElement: buttonRef,
@@ -92,7 +96,7 @@ const PopupMenu = ({
           }
         )
       }
-    )
+    ) : null
   ] });
 };
 export {