@elliemae/ds-global-header 3.60.0-next.9 → 3.70.0-next.1

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggleSpinButton.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\nimport { ChevronDown, ChevronUp } from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport React from 'react';\nimport { DSGlobalHeaderContext } from '../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from '../../../../constants/index.js';\n\nconst StyledToolbarRightAddonsWrapper = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_WRAPPER,\n})`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  position: relative; // to position the focus-within outline\n  :focus-within {\n    ::after {\n      content: '';\n      position: absolute;\n      width: calc(100% - 2px);\n      height: 100%;\n      border: brand-700 2px solid;\n      margin: -1px;\n      pointer-events: none;\n    }\n  }\n  // we want to avoid the pseudo-border in the nested buttons\n  & button:focus .pseudo-border {\n    outline: none;\n    border: none;\n  }\n`;\nconst StyledResultTracker = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_TEXT,\n})`\n  padding: 0 8px;\n  color: #a2a9b6; // this is color picked from the placeholder, specs doesn't specify\n  white-space: nowrap;\n  word-spacing: 2px;\n  outline: none;\n`;\nconst StyledVerticalSeparator = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_SEPARATOR,\n})`\n  height: 20px;\n  border-right: 1px solid #a2a9b6;\n`;\n// why? because when we add slots support, this should be a slot too, to customize aria-labels\nconst StyledPrevBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_PREV,\n})``;\nconst StyledNextBtn = styled(DSButtonV3, {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_SPINBUTTON_NEXT,\n})``;\n\ninterface SearchToggleSpinButtonPropsT {\n  onNext: () => void;\n  onPrevious: () => void;\n  currentResultIndex: number;\n  totalResults: number;\n}\n\nexport const SearchToggleSpinButton = React.memo((props: SearchToggleSpinButtonPropsT) => {\n  const { onNext, onPrevious, currentResultIndex, totalResults } = props;\n  const { props: propsWithDefault } = React.useContext(DSGlobalHeaderContext);\n\n  const shouldShowNoResearchOngoing = currentResultIndex === -1 && !totalResults;\n  const canShowFullResults = !shouldShowNoResearchOngoing && currentResultIndex !== -1;\n  const shouldFallbackToTotalResultsOnly = !shouldShowNoResearchOngoing && !canShowFullResults;\n  let resultText = 'n/a';\n  let ariaResultsText = 'no research ongoing';\n  if (canShowFullResults) {\n    resultText = `${currentResultIndex + 1} / ${totalResults}`;\n    ariaResultsText = `result ${currentResultIndex + 1} of ${totalResults}`;\n  }\n  if (shouldFallbackToTotalResultsOnly) {\n    resultText = `${totalResults}`;\n    ariaResultsText = `${totalResults} total results`;\n  }\n\n  const handleKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (event) => {\n      if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        onNext();\n      } else if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        onPrevious();\n      }\n    },\n    [onNext, onPrevious],\n  );\n  const getOwnerProps = React.useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = React.useCallback(() => ({}), []);\n\n  return (\n    <StyledToolbarRightAddonsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      <StyledResultTracker\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        role=\"spinbutton\"\n        aria-valuenow={currentResultIndex + 1}\n        aria-valuemin={1}\n        aria-valuemax={totalResults}\n        aria-valuetext={ariaResultsText}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n      >\n        {resultText}\n      </StyledResultTracker>\n      <StyledVerticalSeparator getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments} />\n      <StyledPrevBtn\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        buttonType=\"icon\"\n        onClick={onNext}\n        aria-label=\"Next search result\"\n        tabIndex={-1} // part of a spinbutton, so remove from tab order\n      >\n        <ChevronDown color={['brand-primary', '800']} />\n      </StyledPrevBtn>\n      <StyledNextBtn\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n        buttonType=\"icon\"\n        onClick={onPrevious}\n        aria-label=\"Previous search result\"\n        tabIndex={-1} // part of a spinbutton, so remove from tab order\n      >\n        <ChevronUp color={['brand-primary', '800']} />\n      </StyledNextBtn>\n    </StyledToolbarRightAddonsWrapper>\n  );\n});\n\nSearchToggleSpinButton.displayName = 'SearchToggleSpinButton';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoGnB,SACE,KADF;AApGJ,SAAS,kBAAkB;AAC3B,SAAS,aAAa,iBAAiB;AACvC,SAAS,cAAc;AACvB,OAAOA,YAAW;AAClB,SAAS,6BAA6B;AACtC,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,kCAAkC,OAAO,OAAO;AAAA,EACpD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBD,MAAM,sBAAsB,OAAO,OAAO;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOD,MAAM,0BAA0B,OAAO,OAAO;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAKD,MAAM,gBAAgB,OAAO,YAAY;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AACD,MAAM,gBAAgB,OAAO,YAAY;AAAA,EACvC,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AASM,MAAM,yBAAyBA,OAAM,KAAK,CAAC,UAAwC;AACxF,QAAM,EAAE,QAAQ,YAAY,oBAAoB,aAAa,IAAI;AACjE,QAAM,EAAE,OAAO,iBAAiB,IAAIA,OAAM,WAAW,qBAAqB;AAE1E,QAAM,8BAA8B,uBAAuB,MAAM,CAAC;AAClE,QAAM,qBAAqB,CAAC,+BAA+B,uBAAuB;AAClF,QAAM,mCAAmC,CAAC,+BAA+B,CAAC;AAC1E,MAAI,aAAa;AACjB,MAAI,kBAAkB;AACtB,MAAI,oBAAoB;AACtB,iBAAa,GAAG,qBAAqB,CAAC,MAAM,YAAY;AACxD,sBAAkB,UAAU,qBAAqB,CAAC,OAAO,YAAY;AAAA,EACvE;AACA,MAAI,kCAAkC;AACpC,iBAAa,GAAG,YAAY;AAC5B,sBAAkB,GAAG,YAAY;AAAA,EACnC;AAEA,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,UAAU;AACT,UAAI,MAAM,QAAQ,WAAW;AAC3B,cAAM,eAAe;AACrB,eAAO;AAAA,MACT,WAAW,MAAM,QAAQ,aAAa;AACpC,cAAM,eAAe;AACrB,mBAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACrB;AACA,QAAM,gBAAgBA,OAAM,YAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAClF,QAAM,yBAAyBA,OAAM,YAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAE/D,SACE,qBAAC,mCAAgC,eAA8B,wBAC7D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,iBAAe,qBAAqB;AAAA,QACpC,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,UAAU;AAAA,QACV,WAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,IACA,oBAAC,2BAAwB,eAA8B,wBAAgD;AAAA,IACvG;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,YAAW;AAAA,QACX,SAAS;AAAA,QACT,cAAW;AAAA,QACX,UAAU;AAAA,QAEV,8BAAC,eAAY,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IAChD;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,YAAW;AAAA,QACX,SAAS;AAAA,QACT,cAAW;AAAA,QACX,UAAU;AAAA,QAEV,8BAAC,aAAU,OAAO,CAAC,iBAAiB,KAAK,GAAG;AAAA;AAAA,IAC9C;AAAA,KACF;AAEJ,CAAC;AAED,uBAAuB,cAAc;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { mergeRefs } from "@elliemae/ds-system";
+import React2 from "react";
+const useSearchToggle = (outOfTheBoxDrilledDownProps) => {
+  const { setRef, componentProps, instanceUID } = outOfTheBoxDrilledDownProps;
+  const { onChange, onClear, isOpen: userIsOpen, onKeyDown, onClick, triggerRef } = componentProps;
+  const [isOpenUncontrolled, setIsOpenUncontrolled] = React2.useState(false);
+  const internalInputRef = React2.useRef(null);
+  const containerRef = React2.useRef(null);
+  const internalTriggerRef = React2.useRef(null);
+  const isControlled = userIsOpen !== void 0;
+  const isOpen = userIsOpen ?? isOpenUncontrolled;
+  const openUncontrolled = React2.useCallback(() => {
+    if (!isControlled) setIsOpenUncontrolled(true);
+  }, [isControlled]);
+  const closeUncontrolled = React2.useCallback(() => {
+    if (!isControlled) setIsOpenUncontrolled(false);
+    internalTriggerRef.current?.focus();
+    onClear();
+  }, [isControlled, onClear]);
+  const handleToggleSearch = React2.useCallback(
+    (e) => {
+      if (isOpen) {
+        closeUncontrolled();
+      } else {
+        openUncontrolled();
+      }
+      onClick?.(e);
+    },
+    [closeUncontrolled, isOpen, onClick, openUncontrolled]
+  );
+  const handleContainerKeyDown = React2.useCallback(
+    (e) => {
+      if (!isControlled && e.key === "Escape" && isOpen) closeUncontrolled();
+      onKeyDown?.(e);
+    },
+    [closeUncontrolled, isControlled, isOpen, onKeyDown]
+  );
+  const handleChange = React2.useCallback(
+    (e) => {
+      onChange?.(e.target.value);
+    },
+    [onChange]
+  );
+  const handleInputKeyDown = React2.useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        onClear();
+        closeUncontrolled();
+      }
+    },
+    [onClear, closeUncontrolled]
+  );
+  const handleTriggerRefs = React2.useCallback(
+    (buttonRef) => {
+      mergeRefs(triggerRef, internalTriggerRef)(buttonRef);
+      setRef(buttonRef);
+    },
+    [setRef, triggerRef]
+  );
+  const inputId = `${instanceUID}-nav-searchbox-input`;
+  const panelId = `${instanceUID}-nav-searchbox-panel`;
+  return React2.useMemo(
+    () => ({
+      isOpenUncontrolled,
+      internalInputRef,
+      containerRef,
+      handleToggleSearch,
+      handleContainerKeyDown,
+      handleChange,
+      handleInputKeyDown,
+      handleTriggerRefs,
+      inputId,
+      panelId
+    }),
+    [
+      isOpenUncontrolled,
+      containerRef,
+      handleToggleSearch,
+      handleContainerKeyDown,
+      handleChange,
+      handleInputKeyDown,
+      handleTriggerRefs,
+      inputId,
+      panelId
+    ]
+  );
+};
+export {
+  useSearchToggle
+};
+//# sourceMappingURL=useSearchToggle.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/useSearchToggle.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { mergeRefs } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\n\nexport const useSearchToggle = (outOfTheBoxDrilledDownProps: DSGlobalHeaderT.SearchToggleProps) => {\n  const { setRef, componentProps, instanceUID } = outOfTheBoxDrilledDownProps;\n  const { onChange, onClear, isOpen: userIsOpen, onKeyDown, onClick, triggerRef } = componentProps;\n\n  const [isOpenUncontrolled, setIsOpenUncontrolled] = React.useState<boolean>(false);\n  const internalInputRef = React.useRef<HTMLInputElement | null>(null);\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const internalTriggerRef = React.useRef<HTMLButtonElement | null>(null);\n\n  const isControlled = userIsOpen !== undefined;\n  const isOpen = userIsOpen ?? isOpenUncontrolled;\n\n  const openUncontrolled = React.useCallback(() => {\n    if (!isControlled) setIsOpenUncontrolled(true);\n  }, [isControlled]);\n\n  const closeUncontrolled = React.useCallback(() => {\n    if (!isControlled) setIsOpenUncontrolled(false);\n    internalTriggerRef.current?.focus();\n    onClear();\n  }, [isControlled, onClear]);\n\n  const handleToggleSearch = React.useCallback(\n    (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => {\n      if (isOpen) {\n        closeUncontrolled();\n      } else {\n        openUncontrolled();\n      }\n\n      onClick?.(e as React.MouseEvent<HTMLButtonElement, MouseEvent>);\n    },\n    [closeUncontrolled, isOpen, onClick, openUncontrolled],\n  );\n\n  const handleContainerKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLDivElement>>(\n    (e) => {\n      if (!isControlled && e.key === 'Escape' && isOpen) closeUncontrolled();\n      onKeyDown?.(e);\n    },\n    [closeUncontrolled, isControlled, isOpen, onKeyDown],\n  );\n\n  const handleChange = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      onChange?.(e.target.value);\n    },\n    [onChange],\n  );\n\n  const handleInputKeyDown = React.useCallback<React.KeyboardEventHandler<HTMLInputElement>>(\n    (e) => {\n      if (e.key === 'Escape') {\n        onClear();\n        closeUncontrolled();\n      }\n    },\n    [onClear, closeUncontrolled],\n  );\n\n  const handleTriggerRefs = React.useCallback(\n    (buttonRef: HTMLButtonElement) => {\n      mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n      setRef(buttonRef); // this is used for left/arrow navigation in the region.\n    },\n    [setRef, triggerRef],\n  );\n\n  const inputId = `${instanceUID}-nav-searchbox-input`;\n  const panelId = `${instanceUID}-nav-searchbox-panel`;\n  return React.useMemo(\n    () => ({\n      isOpenUncontrolled,\n      internalInputRef,\n      containerRef,\n      handleToggleSearch,\n      handleContainerKeyDown,\n      handleChange,\n      handleInputKeyDown,\n      handleTriggerRefs,\n      inputId,\n      panelId,\n    }),\n    [\n      isOpenUncontrolled,\n      containerRef,\n      handleToggleSearch,\n      handleContainerKeyDown,\n      handleChange,\n      handleInputKeyDown,\n      handleTriggerRefs,\n      inputId,\n      panelId,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,OAAOA,YAAW;AAGX,MAAM,kBAAkB,CAAC,gCAAmE;AACjG,QAAM,EAAE,QAAQ,gBAAgB,YAAY,IAAI;AAChD,QAAM,EAAE,UAAU,SAAS,QAAQ,YAAY,WAAW,SAAS,WAAW,IAAI;AAElF,QAAM,CAAC,oBAAoB,qBAAqB,IAAIA,OAAM,SAAkB,KAAK;AACjF,QAAM,mBAAmBA,OAAM,OAAgC,IAAI;AACnE,QAAM,eAAeA,OAAM,OAA8B,IAAI;AAC7D,QAAM,qBAAqBA,OAAM,OAAiC,IAAI;AAEtE,QAAM,eAAe,eAAe;AACpC,QAAM,SAAS,cAAc;AAE7B,QAAM,mBAAmBA,OAAM,YAAY,MAAM;AAC/C,QAAI,CAAC,aAAc,uBAAsB,IAAI;AAAA,EAC/C,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,oBAAoBA,OAAM,YAAY,MAAM;AAChD,QAAI,CAAC,aAAc,uBAAsB,KAAK;AAC9C,uBAAmB,SAAS,MAAM;AAClC,YAAQ;AAAA,EACV,GAAG,CAAC,cAAc,OAAO,CAAC;AAE1B,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,MAAgG;AAC/F,UAAI,QAAQ;AACV,0BAAkB;AAAA,MACpB,OAAO;AACL,yBAAiB;AAAA,MACnB;AAEA,gBAAU,CAAoD;AAAA,IAChE;AAAA,IACA,CAAC,mBAAmB,QAAQ,SAAS,gBAAgB;AAAA,EACvD;AAEA,QAAM,yBAAyBA,OAAM;AAAA,IACnC,CAAC,MAAM;AACL,UAAI,CAAC,gBAAgB,EAAE,QAAQ,YAAY,OAAQ,mBAAkB;AACrE,kBAAY,CAAC;AAAA,IACf;AAAA,IACA,CAAC,mBAAmB,cAAc,QAAQ,SAAS;AAAA,EACrD;AAEA,QAAM,eAAeA,OAAM;AAAA,IACzB,CAAC,MAAM;AACL,iBAAW,EAAE,OAAO,KAAK;AAAA,IAC3B;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,MAAM;AACL,UAAI,EAAE,QAAQ,UAAU;AACtB,gBAAQ;AACR,0BAAkB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS,iBAAiB;AAAA,EAC7B;AAEA,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,CAAC,cAAiC;AAChC,gBAAU,YAAY,kBAAkB,EAAE,SAAS;AACnD,aAAO,SAAS;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACrB;AAEA,QAAM,UAAU,GAAG,WAAW;AAC9B,QAAM,UAAU,GAAG,WAAW;AAC9B,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

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

@@ -1,18 +1,18 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSGlobalHeaderName, DSGlobalHeaderSlots } from "../../exported-related/theming.js";
+import { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from "../../constants/index.js";
 const StyledMenubarContainer = styled("div", {
   name: DSGlobalHeaderName,
-  slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER
+  slot: GLOBAL_HEADER_SLOTS.MENUBAR_CONTAINER
 })`
   ${({ withSpan, theme }) => withSpan && !theme.layoutMode ? "grid-column: span 2;" : ""}
 `;
-const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`
+const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: GLOBAL_HEADER_SLOTS.MENUBAR_LIST })`
   padding: 0;
   margin: 0;
 `;
-const StyledToolbarItem = styled("div", { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.ITEM })``;
+const StyledToolbarItem = styled("div", { name: DSGlobalHeaderName, slot: GLOBAL_HEADER_SLOTS.MENUBAR_ITEM })``;
 export {
   StyledList,
   StyledMenubarContainer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Toolbar/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../exported-related/theming.js';\n\nexport const StyledMenubarContainer = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.MENUBAR.CONTAINER,\n})<{ withSpan: boolean }>`\n  ${({ withSpan, theme }) => (withSpan && !theme.layoutMode ? 'grid-column: span 2;' : '')}\n`;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.LIST })`\n  padding: 0;\n  margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('div', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.ITEM })``;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB,QAAQ;AACpC,CAAC;AAAA,IACG,CAAC,EAAE,UAAU,MAAM,MAAO,YAAY,CAAC,MAAM,aAAa,yBAAyB,EAAG;AAAA;AAGnF,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAKpG,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,QAAQ,KAAK,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from '../../constants/index.js';\n\nexport const StyledMenubarContainer = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_CONTAINER,\n})<{ withSpan: boolean }>`\n  ${({ withSpan, theme }) => (withSpan && !theme.layoutMode ? 'grid-column: span 2;' : '')}\n`;\n\nexport const StyledList = styled(Grid, { name: DSGlobalHeaderName, slot: GLOBAL_HEADER_SLOTS.MENUBAR_LIST })`\n  padding: 0;\n  margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('div', { name: DSGlobalHeaderName, slot: GLOBAL_HEADER_SLOTS.MENUBAR_ITEM })``;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,yBAAyB,OAAO,OAAO;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,IACG,CAAC,EAAE,UAAU,MAAM,MAAO,YAAY,CAAC,MAAM,aAAa,yBAAyB,EAAG;AAAA;AAGnF,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,aAAa,CAAC;AAAA;AAAA;AAAA;AAKpG,MAAM,oBAAoB,OAAO,OAAO,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,aAAa,CAAC;",
   "names": []
 }

package/dist/esm/parts/styles.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
-import { DSGlobalHeaderSlots, DSGlobalHeaderName } from "../exported-related/theming.js";
-const Container = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.CONTAINER })`
+import { GLOBAL_HEADER_SLOTS, DSGlobalHeaderName } from "../constants/index.js";
+const Container = styled(Grid, { name: DSGlobalHeaderName, slot: GLOBAL_HEADER_SLOTS.CONTAINER })`
   ${({ bg, backgroundColor }) => bg || backgroundColor ? "" : "background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);"}
   color: ${({ theme }) => theme.colors.neutral["000"]};
   min-height: 40px;
@@ -10,7 +10,7 @@ const Container = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderS
 `;
 const StyledButton = styled("button", {
   name: DSGlobalHeaderName,
-  slot: DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON
+  slot: GLOBAL_HEADER_SLOTS.MENUBAR_ITEM_BUTTON
 })`
   height: 3.077rem;
   width: 3.077rem;

package/dist/esm/parts/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSGlobalHeaderSlots, DSGlobalHeaderName } from '../exported-related/theming.js';\n\nexport const Container = styled(Grid, { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.CONTAINER })`\n  ${({ bg, backgroundColor }) =>\n    bg || backgroundColor ? '' : 'background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);'}\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  min-height: 40px;\n  padding: 0 24px 0 12px;\n`;\n\nexport const StyledButton = styled('button', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.MENUBAR.ITEM_BUTTON,\n})`\n  height: 3.077rem;\n  width: 3.077rem;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.neutral['000']};\n  }\n  &:hover:not(:focus) {\n    background-color: ${({ theme }) => theme.colors.brand[700]};\n    outline: none;\n  }\n  &:focus {\n    :before {\n      content: '';\n      position: absolute;\n      z-index: 2;\n      top: 2px;\n      left: 2px;\n      width: calc(100% - 4px);\n      height: calc(100% - 4px);\n      border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n      border-radius: 4px;\n    }\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,qBAAqB,0BAA0B;AAEjD,MAAM,YAAY,OAAO,MAAM,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,UAAU,CAAC;AAAA,IACnG,CAAC,EAAE,IAAI,gBAAgB,MACvB,MAAM,kBAAkB,KAAK,kFAAkF;AAAA,WACxG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAK9C,MAAM,eAAe,OAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,oBAAoB,QAAQ;AACpC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,wBAG9B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { GLOBAL_HEADER_SLOTS, DSGlobalHeaderName } from '../constants/index.js';\n\nexport const Container = styled(Grid, { name: DSGlobalHeaderName, slot: GLOBAL_HEADER_SLOTS.CONTAINER })`\n  ${({ bg, backgroundColor }) =>\n    bg || backgroundColor ? '' : 'background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);'}\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  min-height: 40px;\n  padding: 0 24px 0 12px;\n`;\n\nexport const StyledButton = styled('button', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_ITEM_BUTTON,\n})`\n  height: 3.077rem;\n  width: 3.077rem;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n  outline: none;\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.neutral['000']};\n  }\n  &:hover:not(:focus) {\n    background-color: ${({ theme }) => theme.colors.brand[700]};\n    outline: none;\n  }\n  &:focus {\n    :before {\n      content: '';\n      position: absolute;\n      z-index: 2;\n      top: 2px;\n      left: 2px;\n      width: calc(100% - 4px);\n      height: calc(100% - 4px);\n      border: 2px solid ${({ theme }) => theme.colors.neutral['000']};\n      border-radius: 4px;\n    }\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,qBAAqB,0BAA0B;AAEjD,MAAM,YAAY,OAAO,MAAM,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,UAAU,CAAC;AAAA,IACnG,CAAC,EAAE,IAAI,gBAAgB,MACvB,MAAM,kBAAkB,KAAK,kFAAkF;AAAA,WACxG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAK9C,MAAM,eAAe,OAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASW,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA,wBAG9B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from "@elliemae/ds-props-helpers";
+import {
+  PropTypes,
+  globalAttributesPropTypes,
+  getPropsPerSlotPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from "./constants/index.js";
 const noop = () => null;
 const defaultProps = {
   breadcrumb: [],
@@ -8,6 +14,7 @@ const defaultProps = {
   Logo: noop
 };
 const DSGlobalHeaderPropTypes = {
+  ...getPropsPerSlotPropTypes(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),
   ...globalAttributesPropTypes,
   ...xstyledPropTypes,
   CustomNavigation: PropTypes.func.description(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSAppPicker } from '@elliemae/ds-app-picker';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\n\nconst noop = () => null;\n\nexport const defaultProps = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: noop,\n  Logo: noop,\n};\n\nexport declare namespace DSGlobalHeaderT {\n  /* *************************************************************************************\n                      \"Breadcrumb widget\" configuration types\n  ****************************************************************************************\n  The breadcrumb items ARE SPREADING GLOBAL PROPS!!!\n    + The breadcrumb items have a logic that force the onClick to be invoked on spacebar/enter too\n    forcing it even if not the standard browser behaviour as per our buttons too\n  ************************************************************************************** */\n  export interface BreadcrumbItemOptionals {\n    hasNext?: boolean;\n    isSelected?: boolean;\n    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  }\n  export interface BreadcrumbItemRequired {\n    label: string;\n  }\n  export interface BreadcrumbItemOptionalsGlobals\n    extends Omit<GlobalAttributesT, keyof BreadcrumbItemOptionals | keyof BreadcrumbItemRequired> {}\n\n  export interface BreadcrumbItem\n    extends BreadcrumbItemRequired,\n      BreadcrumbItemOptionals,\n      BreadcrumbItemOptionalsGlobals {}\n  /* *************************************************************************************\n                      \"Toolbar widget\" configuration types\n  ****************************************************************************************\n    The toolbar item can be mainly of 4 different types\n    - app-picker \n        more or less map to ds-app-picker interface\n    - popup-menu\n        should more less map to dropdownmenu-v2 but should be changed to menu-button when possible\n    - search-toggle\n        a custom ad hoc implementation that expands in place and expose an input text,\n        kinda problematic and force-added due to unrestrained \"yes man\" attitude with PM/PO\n        we will be suggesting against using it officially in the later releases and try to find a better solution.\n    - custom\n        a way to allow app to provide their own render props along other pre-configured widgets out of the box\n  ************************************************************************************** */\n\n  /* *************************************************************************************\n      toolbar -> type === 'custom'\n  ************************************************************************************** */\n  export interface ToolbarCustomComponentProps {\n    item: Record<string, unknown> & {\n      type: 'custom';\n      CustomComponent: React.ComponentType<ToolbarCustomComponentProps>;\n    };\n    setRef: (ref: HTMLElement | null) => void;\n  }\n  export interface ToolbarCustomItem extends Record<string, unknown> {\n    type: 'custom';\n    label: string;\n    CustomComponent: React.ComponentType<ToolbarCustomComponentProps>;\n  }\n  /* *************************************************************************************\n      toolbar -> type === 'ds-search-toggle'\n  ************************************************************************************** */\n  // this props are actually required for the out-of-the-box to actually do what it needs to do\n  //    it's meant to be provided from the application, so this is kind of a weird way to do controlled components\n  export interface ToggleSearchComponentProps {\n    onNext: () => void;\n    onPrevious: () => void;\n    currentResultIndex: number;\n    totalResults: number;\n    placeholder: string;\n    value: string;\n    onChange: () => void;\n    onBlur: () => void;\n    onClear: () => void;\n    isOpen: boolean;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    onClick: (event: React.MouseEvent) => void;\n    triggerRef: React.MutableRefObject<HTMLButtonElement>;\n    searchContainerRef: React.MutableRefObject<HTMLDivElement>;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  export interface SearchToggleProps extends GlobalAttributesT {\n    setRef: (ref: HTMLElement) => void;\n    componentProps: ToggleSearchComponentProps;\n  }\n  export interface ToolbarSearchToggleItem {\n    type: 'ds-search-toggle';\n    label: string;\n    componentProps: ToggleSearchComponentProps;\n  }\n  /* *************************************************************************************\n      toolbar -> type === 'ds-popup-menu'\n  ************************************************************************************** */\n\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupMenuContentItem extends Omit<GlobalAttributesT, 'type' | 'label' | 'onClick'> {\n    type?: 'separator' | 'custom';\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    closeOnClick?: boolean;\n    Content?: React.ComponentType;\n  }\n  export interface PopupMenuComponentProps {\n    onClickOutside?: (e: MouseEvent | TouchEvent) => void;\n    onKeyPress: (event: React.KeyboardEvent) => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    isOpen: boolean;\n    options: PopupMenuContentItem[];\n    closeOnClick: boolean;\n  }\n  // this is the only type that was pre-existing (even if differently defined)\n  //  and that's why it doesn't include Toolbar at the start\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupMenuItem extends Omit<GlobalAttributesT, 'type' | 'label' | 'onClick'> {\n    type: 'ds-popup-menu';\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    Content?: React.ComponentType;\n    componentProps: PopupMenuComponentProps;\n  }\n\n  export interface PopupMenuContentProps {\n    options: PopupMenuContentItem[];\n    onItemClick: () => void;\n    onClose: () => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupProps extends Omit<GlobalAttributesT, 'title' | 'label' | 'onClick'> {\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    onClick?: (event: React.MouseEvent) => void;\n    setRef: (ref: HTMLElement) => void;\n    componentProps: PopupMenuComponentProps;\n    title?: string; // this was probably not intended, but removing this means the HTML will not print the title={label}\n    // keeping this for now, if A11y says otherwise we will do the proper steps to remove it\n  }\n\n  /* *************************************************************************************\n      toolbar -> type === 'ds-app-picker'\n  ************************************************************************************** */\n  export type AppPickerComponentProps = React.ComponentProps<typeof DSAppPicker> & {\n    triggerOnClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface AppPickerProps extends Omit<GlobalAttributesT, 'label'> {\n    label: string;\n    componentProps: AppPickerComponentProps;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface ToolbarAppPickerItem extends Omit<GlobalAttributesT, 'type' | 'label'> {\n    type: 'ds-app-picker';\n    label: string;\n    componentProps: AppPickerComponentProps;\n  }\n\n  /* *************************************************************************************\n      toolbar -> type === undefined (fallback default)\n  ************************************************************************************** */\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface ToolbarItemTypelessDefault extends Omit<GlobalAttributesT, 'label'> {\n    type?: undefined;\n    label: string;\n    Icon: React.ComponentType<{ fill?: string; size?: string }>;\n  }\n\n  export type ToolbarItem =\n    | ToolbarCustomItem\n    | ToolbarSearchToggleItem\n    | ToolbarAppPickerItem\n    | PopupMenuItem // this is the only type that was pre-existing and that's why it doesn't include Toolbar at the start\n    | ToolbarItemTypelessDefault;\n\n  export interface DefaultProps {\n    Logo: React.ComponentType;\n    LogoWithBrand: React.ComponentType;\n    breadcrumb: DSGlobalHeaderT.BreadcrumbItem[];\n    toolbar: DSGlobalHeaderT.ToolbarItem[];\n    CustomNavigation: React.ComponentType;\n  }\n\n  export interface InternalProps extends DefaultProps, Omit<GlobalAttributesT, keyof DefaultProps>, XstyledProps {}\n\n  export type Props = Partial<DSGlobalHeaderT.DefaultProps>;\n\n  export interface Context {\n    showIconOnly: boolean;\n    fontDetector: number;\n    setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n    instanceUID: string;\n    globalHeaderToolbarGrid: string[];\n    props: InternalProps;\n    ownerProps: {\n      getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n      getOwnerPropsArguments: () => object;\n    };\n  }\n}\n\nexport const DSGlobalHeaderPropTypes: DSPropTypesSchema<DSGlobalHeaderT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  CustomNavigation: PropTypes.func\n    .description(\n      'Component to use instead of the standard breadcrumb out of the box configuration for custom scenarios',\n    )\n    .defaultValue('() => JSX.Element'),\n  Logo: PropTypes.func\n    .description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.')\n    .defaultValue('() => JSX.Element'),\n  LogoWithBrand: PropTypes.func\n    .description(\n      'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n    )\n    .defaultValue('() => JSX.Element'),\n  breadcrumb: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.description('breadrcrumb item label'),\n      hasNext: PropTypes.bool.description('whether the item has a child or not'),\n      isSelected: PropTypes.bool.description('whether the item is selected or not'),\n      onClick: PropTypes.func.description('Callback executed on click'),\n    }),\n  )\n    .description('Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  toolbar: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.description('title tag description'),\n      type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description(\n        'use to select one of the out-of-the-box types of items',\n      ),\n      componentProps: PropTypes.object.description('props of out-of-the-box component'),\n      Icon: PropTypes.func.description('Icon to display'),\n      onClick: PropTypes.func.description('Callback executed on click'),\n    }),\n  )\n    .description('Toolbar items. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n};\n// kept for legacy reasons, this is now named differently, but we want no breaking changes.\nexport const propTypes = DSGlobalHeaderPropTypes;\n\nexport const DSGlobalHeaderPropTypesSchema = DSGlobalHeaderPropTypes as unknown as ValidationMap<DSGlobalHeaderT.Props>;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,WAAW,2BAA2B,wBAAwB;AAGvE,MAAM,OAAO,MAAM;AAEZ,MAAM,eAAe;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,EACf,MAAM;AACR;AA4MO,MAAM,0BAAoE;AAAA,EAC/E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,kBAAkB,UAAU,KACzB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,MAAM,UAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,UAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,UAAU;AAAA,IACpB,UAAU,MAAM;AAAA,MACd,OAAO,UAAU,OAAO,YAAY,wBAAwB;AAAA,MAC5D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,MACzE,YAAY,UAAU,KAAK,YAAY,qCAAqC;AAAA,MAC5E,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,UAAU;AAAA,IACjB,UAAU,MAAM;AAAA,MACd,OAAO,UAAU,OAAO,YAAY,uBAAuB;AAAA,MAC3D,MAAM,UAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE;AAAA,QACtF;AAAA,MACF;AAAA,MACA,gBAAgB,UAAU,OAAO,YAAY,mCAAmC;AAAA,MAChF,MAAM,UAAU,KAAK,YAAY,iBAAiB;AAAA,MAClD,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AACtB;AAEO,MAAM,YAAY;AAElB,MAAM,gCAAgC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { DSAppPicker } from '@elliemae/ds-app-picker';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  globalAttributesPropTypes,\n  getPropsPerSlotPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from './constants/index.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 interface Context {\n    showIconOnly: boolean;\n    fontDetector: number;\n    setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;\n    instanceUID: string;\n    globalHeaderToolbarGrid: string[];\n    props: InternalProps;\n    ownerProps: {\n      getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n      getOwnerPropsArguments: () => object;\n    };\n  }\n  /* *************************************************************************************\n                      \"Breadcrumb widget\" configuration types\n  ****************************************************************************************\n  The breadcrumb items ARE SPREADING GLOBAL PROPS!!!\n    + The breadcrumb items have a logic that force the onClick to be invoked on spacebar/enter too\n    forcing it even if not the standard browser behaviour as per our buttons too\n  ************************************************************************************** */\n  export interface BreadcrumbItemOptionals {\n    hasNext?: boolean;\n    isSelected?: boolean;\n    onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;\n  }\n  export interface BreadcrumbItemRequired {\n    label: string;\n  }\n  export interface BreadcrumbItemOptionalsGlobals\n    extends Omit<GlobalAttributesT, keyof BreadcrumbItemOptionals | keyof BreadcrumbItemRequired> {}\n\n  export interface BreadcrumbItem\n    extends BreadcrumbItemRequired,\n      BreadcrumbItemOptionals,\n      BreadcrumbItemOptionalsGlobals {}\n  /* *************************************************************************************\n                      \"Toolbar widget\" configuration types\n  ****************************************************************************************\n    The toolbar item can be mainly of 4 different types\n    - app-picker \n        more or less map to ds-app-picker interface\n    - popup-menu\n        should more less map to dropdownmenu-v2 but should be changed to menu-button when possible\n    - search-toggle\n        a custom ad hoc implementation that expands in place and expose an input text,\n        kinda problematic and force-added due to unrestrained \"yes man\" attitude with PM/PO\n        we will be suggesting against using it officially in the later releases and try to find a better solution.\n    - custom\n        a way to allow app to provide their own render props along other pre-configured widgets out of the box\n  ************************************************************************************** */\n\n  /* *************************************************************************************\n      toolbar -> type === 'custom'\n  ************************************************************************************** */\n  export interface ToolbarCustomComponentProps {\n    item: Record<string, unknown> & {\n      type: 'custom';\n      CustomComponent: React.ComponentType<ToolbarCustomComponentProps>;\n    };\n    setRef: (ref: HTMLElement | null) => void;\n  }\n  export interface ToolbarCustomItem extends Record<string, unknown> {\n    type: 'custom';\n    label: string;\n    CustomComponent: React.ComponentType<ToolbarCustomComponentProps>;\n  }\n  /* *************************************************************************************\n      toolbar -> type === 'ds-search-toggle'\n  ************************************************************************************** */\n  // this props are actually required for the out-of-the-box to actually do what it needs to do\n  //    it's meant to be provided from the application, so this is kind of a weird way to do controlled components\n  export interface ToggleSearchComponentProps {\n    onNext: () => void;\n    onPrevious: () => void;\n    currentResultIndex: number;\n    totalResults: number;\n    placeholder: string;\n    value: string;\n    onChange: (value: string) => void;\n    onBlur?: () => void;\n    onClear: () => void;\n    isOpen: boolean;\n    onKeyDown: (event: React.KeyboardEvent) => void;\n    onClick: (event: React.MouseEvent) => void;\n    triggerRef: React.MutableRefObject<HTMLButtonElement>;\n    searchContainerRef: React.MutableRefObject<HTMLDivElement>;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  export interface SearchToggleProps extends GlobalAttributesT {\n    setRef: (ref: HTMLButtonElement | null) => void;\n    label: string;\n    componentProps: ToggleSearchComponentProps;\n    // https://jira.elliemae.io/browse/PUI-17852\n    //   - Generic aria-labels\n    //     -> allows users to specify a custom aria-label when the search toggle is expanded\n    //     -> it's an incremental change, so its \"optional\", we fall back to the previous hardcoded \"Close search\" if not provided\n    //         but authors are encouraged to improve the Aria-label with context-specific information when possible, to improve the overall accessibility of the component.\n    ariaLabelExpanded?: string;\n    // aria-controls needs to point to a DOM id, we need to make sure there are no conflicts in case of multiple search toggles on the same page\n    instanceUID: Context['instanceUID'];\n  }\n  export interface ToolbarSearchToggleItem {\n    type: 'ds-search-toggle';\n    label: string;\n    componentProps: ToggleSearchComponentProps;\n  }\n  /* *************************************************************************************\n      toolbar -> type === 'ds-popup-menu'\n  ************************************************************************************** */\n\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupMenuContentItem extends Omit<GlobalAttributesT, 'type' | 'label' | 'onClick'> {\n    type?: 'separator' | 'custom';\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    closeOnClick?: boolean;\n    Content?: React.ComponentType;\n  }\n  export interface PopupMenuComponentProps {\n    onClickOutside?: (e: MouseEvent | TouchEvent) => void;\n    onKeyPress: (event: React.KeyboardEvent) => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    isOpen: boolean;\n    options: PopupMenuContentItem[];\n    closeOnClick: boolean;\n  }\n  // this is the only type that was pre-existing (even if differently defined)\n  //  and that's why it doesn't include Toolbar at the start\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupMenuItem extends Omit<GlobalAttributesT, 'type' | 'label' | 'onClick'> {\n    type: 'ds-popup-menu';\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    label?: string;\n    onClick?: (event: React.MouseEvent) => void;\n    Content?: React.ComponentType;\n    componentProps: PopupMenuComponentProps;\n  }\n\n  export interface PopupMenuContentProps {\n    options: PopupMenuContentItem[];\n    onItemClick: () => void;\n    onClose: () => void;\n    popupOnKeyPress: (event: React.KeyboardEvent) => void;\n    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n    ownerProps: {\n      getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n      getOwnerPropsArguments: () => object;\n    };\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface PopupProps extends Omit<GlobalAttributesT, 'title' | 'label' | 'onClick'> {\n    Icon?: React.ComponentType<{ fill?: string; size?: string }>;\n    onClick?: (event: React.MouseEvent) => void;\n    setRef: (ref: HTMLElement) => void;\n    componentProps: PopupMenuComponentProps;\n    title?: string; // this was probably not intended, but removing this means the HTML will not print the title={label}\n    // keeping this for now, if A11y says otherwise we will do the proper steps to remove it\n    ownerProps: {\n      getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;\n      getOwnerPropsArguments: () => object;\n    };\n  }\n\n  /* *************************************************************************************\n      toolbar -> type === 'ds-app-picker'\n  ************************************************************************************** */\n  export type AppPickerComponentProps = React.ComponentProps<typeof DSAppPicker> & {\n    triggerOnClick?: React.MouseEventHandler<HTMLButtonElement>;\n  };\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface AppPickerProps extends Omit<GlobalAttributesT, 'label'> {\n    label: string;\n    componentProps: AppPickerComponentProps;\n  }\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface ToolbarAppPickerItem extends Omit<GlobalAttributesT, 'type' | 'label'> {\n    type: 'ds-app-picker';\n    label: string;\n    componentProps: AppPickerComponentProps;\n  }\n\n  /* *************************************************************************************\n      toolbar -> type === undefined (fallback default)\n  ************************************************************************************** */\n  // WE ARE SPREADING GLOBAL PROPS!!!\n  //   WE ARE ALSO OVERRIDING SOME GLOBAL KEYS!\n  export interface ToolbarItemTypelessDefault extends Omit<GlobalAttributesT, 'label'> {\n    type?: undefined;\n    label: string;\n    Icon: React.ComponentType<{ fill?: string; size?: string }>;\n  }\n\n  export type ToolbarItem =\n    | ToolbarCustomItem\n    | ToolbarSearchToggleItem\n    | ToolbarAppPickerItem\n    | PopupMenuItem // this is the only type that was pre-existing and that's why it doesn't include Toolbar at the start\n    | ToolbarItemTypelessDefault;\n\n  export type SlotFunctionArguments = {\n    dsGlobalheaderRoot: () => Record<string, never>;\n    dsGlobalheaderLogoContainer: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbContainer: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbPipe: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbChevron: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbList: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbItem: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbItemLink: () => Record<string, never>;\n    dsGlobalheaderBreadcrumbItemLinkLabel: () => Record<string, never>;\n    dsGlobalheaderMenubarContainer: () => Record<string, never>;\n    dsGlobalheaderMenubarList: () => Record<string, never>;\n    dsGlobalheaderMenubarItem: () => Record<string, never>;\n    dsGlobalheaderMenubarItemButton: () => Record<string, never>;\n    dsGlobalheaderMenubarItemPopupmenuList: () => Record<string, never>;\n    dsGlobalheaderMenubarItemPopupmenuItem: () => Record<string, never>;\n    dsGlobalheaderMenubarItemPopupmenuItemButton: () => Record<string, never>;\n    dsGlobalheaderMenubarItemPopupmenuSeparator: () => Record<string, never>;\n    dsGlobalheaderMenubarItemPopupmenuItemLabel: () => Record<string, never>;\n    dsGlobalheaderMenubarItemSearchtoggleContainer: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleSpinbuttonWrapper: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleSpinbuttonText: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleSpinbuttonSeparator: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleSpinbuttonPrev: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleSpinbuttonNext: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleTextinput: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleTriggerButton: () => Record<string, never>;\n    dsGlobalheaderSearchtoggleExpandedContentWrapper: () => Record<string, never>;\n  };\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    Logo: React.ComponentType;\n    LogoWithBrand: React.ComponentType;\n    breadcrumb: DSGlobalHeaderT.BreadcrumbItem[];\n    toolbar: DSGlobalHeaderT.ToolbarItem[];\n    CustomNavigation: React.ComponentType;\n  }\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSGlobalHeaderName, typeof GLOBAL_HEADER_SLOTS> {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n}\n\nexport const DSGlobalHeaderPropTypes: DSPropTypesSchema<DSGlobalHeaderT.Props> = {\n  ...getPropsPerSlotPropTypes(DSGlobalHeaderName, GLOBAL_HEADER_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  CustomNavigation: PropTypes.func\n    .description(\n      'Component to use instead of the standard breadcrumb out of the box configuration for custom scenarios',\n    )\n    .defaultValue('() => JSX.Element'),\n  Logo: PropTypes.func\n    .description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.')\n    .defaultValue('() => JSX.Element'),\n  LogoWithBrand: PropTypes.func\n    .description(\n      'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n    )\n    .defaultValue('() => JSX.Element'),\n  breadcrumb: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.description('breadrcrumb item label'),\n      hasNext: PropTypes.bool.description('whether the item has a child or not'),\n      isSelected: PropTypes.bool.description('whether the item is selected or not'),\n      onClick: PropTypes.func.description('Callback executed on click'),\n    }),\n  )\n    .description('Breadcrumb items to display. Max 3 levels. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n  toolbar: PropTypes.arrayOf(\n    PropTypes.shape({\n      label: PropTypes.string.description('title tag description'),\n      type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description(\n        'use to select one of the out-of-the-box types of items',\n      ),\n      componentProps: PropTypes.object.description('props of out-of-the-box component'),\n      Icon: PropTypes.func.description('Icon to display'),\n      onClick: PropTypes.func.description('Callback executed on click'),\n    }),\n  )\n    .description('Toolbar items. Compatible with GlobalAttributes.')\n    .defaultValue('[]'),\n};\n// kept for legacy reasons, this is now named differently, but we want no breaking changes.\nexport const propTypes = DSGlobalHeaderPropTypes;\n\nexport const DSGlobalHeaderPropTypesSchema = DSGlobalHeaderPropTypes as unknown as ValidationMap<DSGlobalHeaderT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,oBAAoB,2BAA2B;AAExD,MAAM,OAAO,MAAM;AAEZ,MAAM,eAAe;AAAA,EAC1B,YAAY,CAAC;AAAA,EACb,SAAS,CAAC;AAAA,EACV,eAAe;AAAA,EACf,MAAM;AACR;AAyQO,MAAM,0BAAoE;AAAA,EAC/E,GAAG,yBAAyB,oBAAoB,mBAAmB;AAAA,EACnE,GAAG;AAAA,EACH,GAAG;AAAA,EACH,kBAAkB,UAAU,KACzB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,MAAM,UAAU,KACb,YAAY,gGAAgG,EAC5G,aAAa,mBAAmB;AAAA,EACnC,eAAe,UAAU,KACtB;AAAA,IACC;AAAA,EACF,EACC,aAAa,mBAAmB;AAAA,EACnC,YAAY,UAAU;AAAA,IACpB,UAAU,MAAM;AAAA,MACd,OAAO,UAAU,OAAO,YAAY,wBAAwB;AAAA,MAC5D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,MACzE,YAAY,UAAU,KAAK,YAAY,qCAAqC;AAAA,MAC5E,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,8EAA8E,EAC1F,aAAa,IAAI;AAAA,EACpB,SAAS,UAAU;AAAA,IACjB,UAAU,MAAM;AAAA,MACd,OAAO,UAAU,OAAO,YAAY,uBAAuB;AAAA,MAC3D,MAAM,UAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,QAAQ,CAAC,EAAE;AAAA,QACtF;AAAA,MACF;AAAA,MACA,gBAAgB,UAAU,OAAO,YAAY,mCAAmC;AAAA,MAChF,MAAM,UAAU,KAAK,YAAY,iBAAiB;AAAA,MAClD,SAAS,UAAU,KAAK,YAAY,4BAA4B;AAAA,IAClE,CAAC;AAAA,EACH,EACG,YAAY,kDAAkD,EAC9D,aAAa,IAAI;AACtB;AAEO,MAAM,YAAY;AAElB,MAAM,gCAAgC;",
   "names": []
 }

package/dist/types/DSGlobalHeader.d.ts

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

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

@@ -1,5 +0,0 @@
-export declare const FONT_DETECTOR: {
-    readonly SMALL: 1;
-    readonly MEDIUM: 2;
-    readonly LARGE: 3;
-};

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

@@ -7,7 +7,7 @@ export declare const useGlobalHeader: (props: DSGlobalHeaderT.Props) => {
     globalHeaderToolbarGrid: string[];
     fontDetector: 1 | 2 | 3;
     ownerProps: {
-        getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;
+        getOwnerProps: () => DSGlobalHeaderT.Props;
         getOwnerPropsArguments: () => {};
     };
 };

package/dist/types/constants/index.d.ts

@@ -0,0 +1,184 @@
+export declare const DSGlobalHeaderName = "DSGlobalheader";
+/**
+ * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list and is flat.
+ */
+export declare const DSGlobalHeaderSlots: {
+    CONTAINER: string;
+    LOGO: {
+        CONTAINER: string;
+    };
+    BREADCRUMB: {
+        CONTAINER: string;
+        PIPE: string;
+        CHEVRON: string;
+        LIST: string;
+        ITEM: string;
+        ITEM_LINK: string;
+        ITEM_LINK_LABEL: string;
+    };
+    MENUBAR: {
+        CONTAINER: string;
+        LIST: string;
+        ITEM: string;
+        ITEM_BUTTON: string;
+        POPUP_MENU: {
+            LIST: string;
+            ITEM: string;
+            ITEM_BUTTON: string;
+            SEPARATOR: string;
+            ITEM_BUTTON_LABEL: string;
+        };
+        SEARCH_TOGGLE: {
+            CONTAINER: string;
+        };
+    };
+};
+/**
+ * @deprecated - use GLOBAL_HEADER_SLOTS instead, it containse the full list.
+ */
+export declare const DSGlobalHeaderSlotsFlattened: {
+    CONTAINER: string;
+    LOGO_CONTAINER: string;
+    BREADCRUMB_CONTAINER: string;
+    BREADCRUMB_PIPE: string;
+    BREADCRUMB_CHEVRON: string;
+    BREADCRUMB_LIST: string;
+    BREADCRUMB_ITEM: string;
+    BREADCRUMB_ITEM_LINK: string;
+    BREADCRUMB_ITEM_LINK_LABEL: string;
+    MENUBAR_CONTAINER: string;
+    MENUBAR_LIST: string;
+    MENUBAR_ITEM: string;
+    MENUBAR_ITEM_BUTTON: string;
+    MENUBAR_POPUP_MENU_LIST: string;
+    MENUBAR_POPUP_MENU_ITEM: string;
+    MENUBAR_POPUP_MENU_ITEM_BUTTON: string;
+    MENUBAR_POPUP_MENU_SEPARATOR: string;
+    MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: string;
+    MENUBAR_SEARCH_TOGGLE_CONTAINER: string;
+};
+/**
+ * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list and is flat.
+ */
+export declare const DSGlobalHeaderDatatestid: {
+    CONTAINER: string;
+    LOGO: {
+        CONTAINER: string;
+    };
+    BREADCRUMB: {
+        CHEVRON: string;
+        CONTAINER: string;
+        PIPE: string;
+        LIST: string;
+        ITEM: string;
+        ITEM_LINK: string;
+        ITEM_LINK_LABEL: string;
+    };
+    MENUBAR: {
+        CONTAINER: string;
+        LIST: string;
+        ITEM: string;
+        ITEM_BUTTON: string;
+        POPUP_MENU: {
+            LIST: string;
+            ITEM: string;
+            ITEM_BUTTON: string;
+            ITEM_BUTTON_LABEL: string;
+            SEPARATOR: string;
+        };
+        SEARCH_TOGGLE: {
+            CONTAINER: string;
+            ITEM_BUTTON: string;
+        };
+    };
+};
+/**
+ * @deprecated - use GLOBAL_HEADER_DATA_TESTID instead, it containse the full list
+ */
+export declare const DSGlobalHeaderDatatestidFlattened: {
+    CONTAINER: string;
+    LOGO_CONTAINER: string;
+    BREADCRUMB_CONTAINER: string;
+    BREADCRUMB_PIPE: string;
+    BREADCRUMB_LIST: string;
+    BREADCRUMB_ITEM: string;
+    BREADCRUMB_ITEM_LINK: string;
+    BREADCRUMB_ITEM_LINK_LABEL: string;
+    BREADCRUMB_CHEVRON: string;
+    MENUBAR_CONTAINER: string;
+    MENUBAR_LIST: string;
+    MENUBAR_ITEM: string;
+    MENUBAR_ITEM_BUTTON: string;
+    MENUBAR_POPUP_MENU_LIST: string;
+    MENUBAR_POPUP_MENU_ITEM: string;
+    MENUBAR_POPUP_MENU_ITEM_BUTTON: string;
+    MENUBAR_POPUP_MENU_ITEM_LABEL: string;
+    MENUBAR_POPUP_MENU_SEPARATOR: string;
+    MENUBAR_SEARCH_TOGGLE_CONTAINER: string;
+    MENUBAR_SEARCH_TOGGLE_ITEM_BUTTON: string;
+};
+export declare const FONT_DETECTOR: {
+    readonly SMALL: 1;
+    readonly MEDIUM: 2;
+    readonly LARGE: 3;
+};
+export declare const GLOBAL_HEADER_SLOTS: {
+    readonly SEARCH_TOGGLE_SPINBUTTON_WRAPPER: "searchtoggle-spinbutton-wrapper";
+    readonly SEARCH_TOGGLE_SPINBUTTON_TEXT: "searchtoggle-spinbutton-text";
+    readonly SEARCH_TOGGLE_SPINBUTTON_SEPARATOR: "searchtoggle-spinbutton-separator";
+    readonly SEARCH_TOGGLE_SPINBUTTON_PREV: "searchtoggle-spinbutton-prev";
+    readonly SEARCH_TOGGLE_SPINBUTTON_NEXT: "searchtoggle-spinbutton-next";
+    readonly SEARCH_TOGGLE_TEXTINPUT: "searchtoggle-textinput";
+    readonly SEARCH_TOGGLE_TRIGGER_BUTTON: "searchtoggle-trigger-button";
+    readonly SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: "searchtoggle-expanded-content-wrapper";
+    readonly CONTAINER: string;
+    readonly LOGO_CONTAINER: string;
+    readonly BREADCRUMB_CONTAINER: string;
+    readonly BREADCRUMB_PIPE: string;
+    readonly BREADCRUMB_CHEVRON: string;
+    readonly BREADCRUMB_LIST: string;
+    readonly BREADCRUMB_ITEM: string;
+    readonly BREADCRUMB_ITEM_LINK: string;
+    readonly BREADCRUMB_ITEM_LINK_LABEL: string;
+    readonly MENUBAR_CONTAINER: string;
+    readonly MENUBAR_LIST: string;
+    readonly MENUBAR_ITEM: string;
+    readonly MENUBAR_ITEM_BUTTON: string;
+    readonly MENUBAR_POPUP_MENU_LIST: string;
+    readonly MENUBAR_POPUP_MENU_ITEM: string;
+    readonly MENUBAR_POPUP_MENU_ITEM_BUTTON: string;
+    readonly MENUBAR_POPUP_MENU_SEPARATOR: string;
+    readonly MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: string;
+    readonly MENUBAR_SEARCH_TOGGLE_CONTAINER: string;
+};
+export declare const GLOBAL_HEADER_DATA_TESTID: {
+    SEARCH_TOGGLE_TRIGGER_BUTTON: string;
+    CONTAINER: string;
+    LOGO_CONTAINER: string;
+    BREADCRUMB_CONTAINER: string;
+    BREADCRUMB_PIPE: string;
+    BREADCRUMB_LIST: string;
+    BREADCRUMB_ITEM: string;
+    BREADCRUMB_ITEM_LINK: string;
+    BREADCRUMB_ITEM_LINK_LABEL: string;
+    BREADCRUMB_CHEVRON: string;
+    MENUBAR_CONTAINER: string;
+    MENUBAR_LIST: string;
+    MENUBAR_ITEM: string;
+    MENUBAR_ITEM_BUTTON: string;
+    MENUBAR_POPUP_MENU_LIST: string;
+    MENUBAR_POPUP_MENU_ITEM: string;
+    MENUBAR_POPUP_MENU_ITEM_BUTTON: string;
+    MENUBAR_POPUP_MENU_ITEM_LABEL: string;
+    MENUBAR_POPUP_MENU_SEPARATOR: string;
+    MENUBAR_SEARCH_TOGGLE_CONTAINER: string;
+    MENUBAR_SEARCH_TOGGLE_ITEM_BUTTON: string;
+    SEARCH_TOGGLE_SPINBUTTON_WRAPPER: "ds-globalheader-searchtoggle-spinbutton-wrapper";
+    SEARCH_TOGGLE_SPINBUTTON_TEXT: "ds-globalheader-searchtoggle-spinbutton-text";
+    SEARCH_TOGGLE_SPINBUTTON_SEPARATOR: "ds-globalheader-searchtoggle-spinbutton-separator";
+    SEARCH_TOGGLE_SPINBUTTON_PREV: "ds-globalheader-searchtoggle-spinbutton-prev";
+    SEARCH_TOGGLE_SPINBUTTON_NEXT: "ds-globalheader-searchtoggle-spinbutton-next";
+    SEARCH_TOGGLE_TEXTINPUT: "ds-globalheader-searchtoggle-textinput";
+    SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER: "ds-globalheader-searchtoggle-expanded-content-wrapper";
+    MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: `ds-globalheader-${string}`;
+};

package/dist/types/hooks/useOnClickOutside.d.ts

@@ -0,0 +1 @@
+export declare function useOnClickOutside<T extends Node>(ref: T | null, cb: (event: Event) => void): void;

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import { DSGlobalHeader } from './DSGlobalHeader.js';
 export default DSGlobalHeader;
 export { DSGlobalHeader, DSGlobalHeaderWithSchema, GlobalHeader } from './DSGlobalHeader.js';
-export { DSGlobalHeaderDatatestid, DSGlobalHeaderDatatestidFlattened, DSGlobalHeaderName, DSGlobalHeaderSlots, DSGlobalHeaderSlotsFlattened, } from './exported-related/index.js';
+export { DSGlobalHeaderDatatestid, DSGlobalHeaderDatatestidFlattened, DSGlobalHeaderSlots, DSGlobalHeaderSlotsFlattened, DSGlobalHeaderName, GLOBAL_HEADER_SLOTS, GLOBAL_HEADER_DATA_TESTID, } from './constants/index.js';
 export type { DSGlobalHeaderT } from './react-desc-prop-types.js';
 export type { DSGlobalHeaderInternalsT } from './sharedTypes.js';

package/dist/types/parts/Breadcrumb/PureBreadcrumb.d.ts

@@ -2,6 +2,10 @@ import React from 'react';
 import type { DSGlobalHeaderT } from '../../react-desc-prop-types.js';
 type PureBreadcrumbProps = DSGlobalHeaderT.BreadcrumbItem & {
     fullBreadcrumbListLength: number;
+    ownerProps?: {
+        getOwnerProps: () => Partial<DSGlobalHeaderT.DefaultProps>;
+        getOwnerPropsArguments: () => object;
+    };
 };
-export declare const PureBreadcrumb: React.MemoExoticComponent<({ onClick, isSelected, fullBreadcrumbListLength, label, hasNext, ...rest }: PureBreadcrumbProps) => import("react/jsx-runtime.js").JSX.Element>;
+export declare const PureBreadcrumb: React.MemoExoticComponent<({ onClick, isSelected, fullBreadcrumbListLength, label, hasNext, ownerProps, ...rest }: PureBreadcrumbProps) => import("react/jsx-runtime.js").JSX.Element>;
 export {};

package/dist/types/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.d.ts

@@ -1,2 +1,2 @@
 import type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';
-export declare const PopupMenu: ({ Icon, onClick, setRef, componentProps, ...otherProps }: DSGlobalHeaderT.PopupProps) => JSX.Element;
+export declare const PopupMenu: ({ Icon, onClick, setRef, componentProps, ownerProps, ...otherProps }: DSGlobalHeaderT.PopupProps) => JSX.Element;

package/dist/types/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { DSGlobalHeaderT } from '../../../../../react-desc-prop-types.js';
-export declare const PopupMenuContent: React.MemoExoticComponent<({ options, onItemClick, onClose, popupOnKeyPress, setIsOpen, }: DSGlobalHeaderT.PopupMenuContentProps) => JSX.Element>;
+export declare const PopupMenuContent: React.MemoExoticComponent<({ options, onItemClick, onClose, popupOnKeyPress, setIsOpen, ownerProps, }: DSGlobalHeaderT.PopupMenuContentProps) => JSX.Element>;

package/dist/types/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.d.ts

@@ -1,2 +1,2 @@
 import type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';
-export declare const SearchToggle: ({ setRef, componentProps, label, ...otherProps }: DSGlobalHeaderT.SearchToggleProps) => JSX.Element;
+export declare const SearchToggle: (outOfTheBoxDrilledDownProps: DSGlobalHeaderT.SearchToggleProps) => JSX.Element;

package/dist/types/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggleSpinButton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SearchToggleSpinButtonPropsT {
+    onNext: () => void;
+    onPrevious: () => void;
+    currentResultIndex: number;
+    totalResults: number;
+}
+export declare const SearchToggleSpinButton: React.MemoExoticComponent<(props: SearchToggleSpinButtonPropsT) => import("react/jsx-runtime.js").JSX.Element>;
+export {};

package/dist/types/parts/Toolbar/outOfTheBox/SearchToggle/useSearchToggle.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';
+export declare const useSearchToggle: (outOfTheBoxDrilledDownProps: DSGlobalHeaderT.SearchToggleProps) => {
+    isOpenUncontrolled: boolean;
+    internalInputRef: React.MutableRefObject<HTMLInputElement | null>;
+    containerRef: React.MutableRefObject<HTMLDivElement | null>;
+    handleToggleSearch: (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    handleContainerKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
+    handleChange: React.ChangeEventHandler<HTMLInputElement>;
+    handleInputKeyDown: React.KeyboardEventHandler<HTMLInputElement>;
+    handleTriggerRefs: (buttonRef: HTMLButtonElement) => void;
+    inputId: string;
+    panelId: string;
+};