@elliemae/ds-global-header 3.60.0-next.14 → 3.60.0-next.16

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

@@ -1,23 +1,16 @@
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-import { DSNavSearchBox } from "@elliemae/ds-legacy-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useCallback, useRef, useState } from "react";
 import { Search } from "@elliemae/ds-icons";
-import { getGlobalAttributes } from "@elliemae/ds-props-helpers";
+import { DSInputText } from "@elliemae/ds-form-input-text";
 import { mergeRefs } from "@elliemae/ds-system";
-import { useCallback, useRef, useState } from "react";
 import { DSGlobalHeaderDatatestid } from "../../../../exported-related/index.js";
-import { StyledButton } from "../../../styles.js";
-import { StyledNavSearchBoxContainer } from "./styles.js";
-import { useCallbackAfterRender } from "./useCallbackAfterRender.js";
-const SearchToggle = ({
-  setRef,
-  componentProps,
-  label,
-  ...otherProps
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
+import { StyledNavSearchBoxContainer, StyledSearchNavContainer, ToggleBtn } from "./styles.js";
+import LiveRegion from "./LiveRegion.js";
+import { ToolbarRightAddons } from "./ToolbarRightAddons.js";
+const SearchToggle = ({ setRef, componentProps, label }) => {
+  const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(false);
   const internalInputRef = useRef(null);
-  const internalTriggerRef = useRef(null);
   const containerRef = useRef(null);
   const {
     onNext,
@@ -35,39 +28,77 @@ const SearchToggle = ({
     triggerRef,
     searchContainerRef
   } = componentProps;
-  const schedule = useCallbackAfterRender();
-  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);
-  const handleOnClick = useCallback(
-    (e) => {
-      if (userIsOpen === void 0) setIsOpen(true);
-      if (onClick) onClick(e);
+  const isControlled = userIsOpen !== void 0;
+  const isOpen = userIsOpen ?? isOpenUncontrolled;
+  const internalTriggerRef = useRef(null);
+  const [liveMessage, setLiveMessage] = React2.useState("");
+  const handleNavInputRefs = useCallback(
+    (searchNavRef) => {
+      setRef(searchNavRef);
+      internalInputRef.current = searchNavRef;
     },
-    [onClick, userIsOpen]
+    [setRef]
   );
-  const handleOnKeyDown = useCallback(
+  const openUncontrolled = useCallback(() => {
+    if (!isControlled) setIsOpenUncontrolled(true);
+    setLiveMessage("Search expanded.");
+  }, [isControlled]);
+  const closeUncontrolled = useCallback(() => {
+    if (!isControlled) setIsOpenUncontrolled(false);
+    setLiveMessage("Search collapsed.");
+    internalTriggerRef.current?.focus();
+    onClear();
+  }, [isControlled, onClear]);
+  const toggle = useCallback(
     (e) => {
-      if (userIsOpen === void 0) {
-        if (e.key === "Escape") {
-          setIsOpen(false);
-          schedule(focusTrigger);
-        }
+      if (isOpen) {
+        closeUncontrolled();
+      } else {
+        openUncontrolled();
       }
-      if (onKeyDown) onKeyDown(e);
+      onClick?.(e);
     },
-    [focusTrigger, onKeyDown, schedule, userIsOpen]
+    [closeUncontrolled, isOpen, onClick, openUncontrolled]
   );
-  const handleOnBlur = useCallback(() => {
-    const contains = containerRef.current?.contains(document.activeElement);
-    if (value === "" && !contains) setIsOpen(false);
-    schedule(focusTrigger);
-  }, [focusTrigger, schedule, value]);
-  const handleNavInputRefs = useCallback(
-    (searchNavRef) => {
-      setRef(searchNavRef);
-      internalInputRef.current = searchNavRef;
+  const handleContainerKeyDown = useCallback(
+    (e) => {
+      if (!isControlled && e.key === "Escape" && isOpen) {
+        closeUncontrolled();
+      }
+      onKeyDown?.(e);
     },
-    [setRef]
+    [closeUncontrolled, isControlled, isOpen, onKeyDown]
   );
+  React2.useEffect(() => {
+    if (!value) return;
+    if (totalResults === 0) {
+      setLiveMessage(`No results for "${value}".`);
+      return;
+    }
+    if (totalResults > 0) {
+      setLiveMessage(`${totalResults} results for "${value}".`);
+    }
+  }, [totalResults, value]);
+  React2.useEffect(() => {
+    if (!value) return;
+    if (totalResults <= 0) return;
+    if (currentResultIndex < 0) return;
+    setLiveMessage(`Result ${currentResultIndex + 1} of ${totalResults}.`);
+  }, [currentResultIndex, totalResults, value]);
+  const handleChange = (e) => {
+    onChange?.(e.target.value);
+  };
+  const handleInputKeyDown = (e) => {
+    if (e.shiftKey) {
+      if (e.key === "Enter" || e.keyCode === 13) onPrevious();
+    } else if (e.key === "Escape" || e.keyCode === 27) {
+      onClear();
+      setLiveMessage("Search cleared.");
+      closeUncontrolled();
+    } else if (e.key === "Enter" || e.keyCode === 13) {
+      onNext();
+    }
+  };
   const handleTriggerRefs = useCallback(
     (buttonRef) => {
       mergeRefs(triggerRef, internalTriggerRef)(buttonRef);
@@ -75,40 +106,58 @@ const SearchToggle = ({
     },
     [setRef, triggerRef]
   );
-  return userIsOpen || isOpen ? /* @__PURE__ */ jsx(
+  const inputId = "ds-nav-searchbox-input";
+  const panelId = "ds-nav-searchbox-panel";
+  return /* @__PURE__ */ jsxs(
     StyledNavSearchBoxContainer,
     {
-      onKeyDown: handleOnKeyDown,
+      onKeyDown: handleContainerKeyDown,
       innerRef: mergeRefs(searchContainerRef, containerRef),
-      onBlur: handleOnBlur,
       "data-testid": DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER,
-      children: /* @__PURE__ */ jsx(
-        DSNavSearchBox,
-        {
-          onNext,
-          onPrevious,
-          currentResultIndex,
-          totalResults,
-          onClear,
-          placeholder,
-          onChange,
-          value,
-          onBlur,
-          innerRef: handleNavInputRefs,
-          autoFocus: true
-        }
-      )
-    }
-  ) : /* @__PURE__ */ jsx(
-    StyledButton,
-    {
-      onClick: handleOnClick,
-      innerRef: handleTriggerRefs,
-      "data-testid": DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON,
-      "aria-label": label,
-      ...getGlobalAttributes(otherProps),
-      type: "button",
-      children: /* @__PURE__ */ jsx(Search, {})
+      isOpen,
+      children: [
+        /* @__PURE__ */ jsx(LiveRegion, { message: liveMessage }),
+        /* @__PURE__ */ jsx(
+          ToggleBtn,
+          {
+            buttonType: "icon",
+            innerRef: handleTriggerRefs,
+            "aria-label": isOpen ? "Close search" : label,
+            "aria-expanded": isOpen,
+            "aria-controls": panelId,
+            onClick: toggle,
+            isOpen,
+            "data-testid": "gh-toolbar-item",
+            children: /* @__PURE__ */ jsx(Search, { color: isOpen ? ["brand-primary", "800"] : ["neutral", "0"] })
+          }
+        ),
+        isOpen ? /* @__PURE__ */ jsxs(StyledSearchNavContainer, { id: panelId, alignItems: "center", cols: ["1fr", "1fr"], children: [
+          /* @__PURE__ */ jsx(
+            DSInputText,
+            {
+              id: inputId,
+              onChange: handleChange,
+              "data-testid": "ds-nav-searchbox-input",
+              onBlur,
+              onKeyDown: handleInputKeyDown,
+              placeholder: placeholder || "Search...",
+              value,
+              innerRef: handleNavInputRefs,
+              clearable: true,
+              onClear
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarRightAddons,
+            {
+              onNext,
+              onPrevious,
+              currentResultIndex,
+              totalResults
+            }
+          )
+        ] }) : null
+      ]
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSNavSearchBox } from '@elliemae/ds-legacy-form';\nimport { Search } from '@elliemae/ds-icons';\nimport { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { StyledButton } from '../../../styles.js';\nimport { StyledNavSearchBoxContainer } from './styles.js';\nimport { useCallbackAfterRender } from './useCallbackAfterRender.js';\n\nexport const SearchToggle = ({\n  setRef,\n  componentProps,\n  label,\n  ...otherProps\n}: DSGlobalHeaderT.SearchToggleProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    onNext,\n    onPrevious,\n    currentResultIndex,\n    totalResults,\n    placeholder,\n    value,\n    onChange,\n    onBlur,\n    onClear,\n    isOpen: userIsOpen,\n    onKeyDown,\n    onClick,\n    triggerRef,\n    searchContainerRef,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (userIsOpen === undefined) {\n        if (e.key === 'Escape') {\n          setIsOpen(false);\n          schedule(focusTrigger);\n        }\n      }\n      if (onKeyDown) onKeyDown(e);\n    },\n    [focusTrigger, onKeyDown, schedule, userIsOpen],\n  );\n\n  const handleOnBlur = useCallback(() => {\n    const contains = containerRef.current?.contains(document.activeElement);\n    if (value === '' && !contains) setIsOpen(false);\n    schedule(focusTrigger);\n  }, [focusTrigger, schedule, value]);\n\n  const handleNavInputRefs = useCallback(\n    (searchNavRef: HTMLInputElement) => {\n      setRef(searchNavRef);\n      internalInputRef.current = searchNavRef;\n    },\n    [setRef],\n  );\n\n  const handleTriggerRefs = useCallback(\n    (buttonRef: HTMLButtonElement) => {\n      mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n      setRef(buttonRef);\n    },\n    [setRef, triggerRef],\n  );\n\n  return userIsOpen || isOpen ? (\n    <StyledNavSearchBoxContainer\n      onKeyDown={handleOnKeyDown}\n      innerRef={mergeRefs(searchContainerRef, containerRef)}\n      onBlur={handleOnBlur}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER}\n    >\n      <DSNavSearchBox\n        onNext={onNext}\n        onPrevious={onPrevious}\n        currentResultIndex={currentResultIndex}\n        totalResults={totalResults}\n        onClear={onClear}\n        placeholder={placeholder}\n        onChange={onChange}\n        value={value}\n        onBlur={onBlur}\n        innerRef={handleNavInputRefs}\n        autoFocus\n      />\n    </StyledNavSearchBoxContainer>\n  ) : (\n    <StyledButton\n      onClick={handleOnClick}\n      innerRef={handleTriggerRefs}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON}\n      aria-label={label}\n      {...getGlobalAttributes(otherProps)}\n      type=\"button\"\n    >\n      <Search />\n    </StyledButton>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6FjB;AA7FN,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAC1B,SAAgB,aAAa,QAAQ,gBAAgB;AACrD,SAAS,gCAAgC;AAEzC,SAAS,oBAAoB;AAC7B,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AAEhC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsD;AACpD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,KAAK;AACnD,QAAM,mBAAmB,OAAgC,IAAI;AAC7D,QAAM,qBAAqB,OAAiC,IAAI;AAChE,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,WAAW,uBAAuB;AAExC,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,eAAe,OAAW,WAAU,IAAI;AAC5C,UAAI,QAAS,SAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,eAAe,QAAW;AAC5B,YAAI,EAAE,QAAQ,UAAU;AACtB,oBAAU,KAAK;AACf,mBAAS,YAAY;AAAA,QACvB;AAAA,MACF;AACA,UAAI,UAAW,WAAU,CAAC;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,WAAW,UAAU,UAAU;AAAA,EAChD;AAEA,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW,aAAa,SAAS,SAAS,SAAS,aAAa;AACtE,QAAI,UAAU,MAAM,CAAC,SAAU,WAAU,KAAK;AAC9C,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,KAAK,CAAC;AAElC,QAAM,qBAAqB;AAAA,IACzB,CAAC,iBAAmC;AAClC,aAAO,YAAY;AACnB,uBAAiB,UAAU;AAAA,IAC7B;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,cAAiC;AAChC,gBAAU,YAAY,kBAAkB,EAAE,SAAS;AACnD,aAAO,SAAS;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACrB;AAEA,SAAO,cAAc,SACnB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,UAAU,UAAU,oBAAoB,YAAY;AAAA,MACpD,QAAQ;AAAA,MACR,eAAa,yBAAyB,QAAQ,cAAc;AAAA,MAE5D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,WAAS;AAAA;AAAA,MACX;AAAA;AAAA,EACF,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,eAAa,yBAAyB,QAAQ,cAAc;AAAA,MAC5D,cAAY;AAAA,MACX,GAAG,oBAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,8BAAC,UAAO;AAAA;AAAA,EACV;AAEJ;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport React, { useCallback, useRef, useState } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../react-desc-prop-types.js';\nimport { StyledNavSearchBoxContainer, StyledSearchNavContainer, ToggleBtn } from './styles.js';\nimport LiveRegion from './LiveRegion.js';\nimport { ToolbarRightAddons } from './ToolbarRightAddons.js';\n\nexport const SearchToggle = ({ setRef, componentProps, label }: DSGlobalHeaderT.SearchToggleProps): JSX.Element => {\n  const [isOpenUncontrolled, setIsOpenUncontrolled] = useState<boolean>(false);\n  const internalInputRef = useRef<HTMLInputElement | 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 isControlled = userIsOpen !== undefined;\n  const isOpen = userIsOpen ?? isOpenUncontrolled;\n\n  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const [liveMessage, setLiveMessage] = React.useState('');\n\n  const handleNavInputRefs = useCallback(\n    (searchNavRef: HTMLInputElement | null) => {\n      setRef(searchNavRef);\n      internalInputRef.current = searchNavRef;\n    },\n    [setRef],\n  );\n\n  const openUncontrolled = useCallback(() => {\n    if (!isControlled) setIsOpenUncontrolled(true);\n    setLiveMessage('Search expanded.');\n  }, [isControlled]);\n\n  const closeUncontrolled = useCallback(() => {\n    if (!isControlled) setIsOpenUncontrolled(false);\n    setLiveMessage('Search collapsed.');\n    internalTriggerRef.current?.focus();\n    onClear();\n  }, [isControlled, onClear]);\n\n  const toggle = 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 = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!isControlled && e.key === 'Escape' && isOpen) {\n        closeUncontrolled();\n      }\n      onKeyDown?.(e);\n    },\n    [closeUncontrolled, isControlled, isOpen, onKeyDown],\n  );\n\n  React.useEffect(() => {\n    if (!value) return;\n\n    if (totalResults === 0) {\n      setLiveMessage(`No results for \"${value}\".`);\n      return;\n    }\n\n    if (totalResults > 0) {\n      setLiveMessage(`${totalResults} results for \"${value}\".`);\n    }\n  }, [totalResults, value]);\n\n  React.useEffect(() => {\n    if (!value) return;\n    if (totalResults <= 0) return;\n    if (currentResultIndex < 0) return;\n\n    setLiveMessage(`Result ${currentResultIndex + 1} of ${totalResults}.`);\n  }, [currentResultIndex, totalResults, value]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e.target.value);\n  };\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.shiftKey) {\n      if (e.key === 'Enter' || e.keyCode === 13) onPrevious();\n    } else if (e.key === 'Escape' || e.keyCode === 27) {\n      onClear();\n      setLiveMessage('Search cleared.');\n      closeUncontrolled();\n    } else if (e.key === 'Enter' || e.keyCode === 13) {\n      onNext();\n    }\n  };\n\n  const handleTriggerRefs = useCallback(\n    (buttonRef: HTMLButtonElement) => {\n      mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n\n      setRef(buttonRef);\n    },\n    [setRef, triggerRef],\n  );\n\n  const inputId = 'ds-nav-searchbox-input';\n  const panelId = 'ds-nav-searchbox-panel';\n\n  return (\n    <StyledNavSearchBoxContainer\n      onKeyDown={handleContainerKeyDown}\n      innerRef={mergeRefs(searchContainerRef, containerRef)}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER}\n      isOpen={isOpen}\n    >\n      <LiveRegion message={liveMessage} />\n\n      <ToggleBtn\n        buttonType=\"icon\"\n        innerRef={handleTriggerRefs}\n        aria-label={isOpen ? 'Close search' : label}\n        aria-expanded={isOpen}\n        aria-controls={panelId}\n        onClick={toggle}\n        isOpen={isOpen}\n        data-testid=\"gh-toolbar-item\"\n      >\n        <Search color={isOpen ? ['brand-primary', '800'] : ['neutral', '0']} />\n      </ToggleBtn>\n\n      {isOpen ? (\n        <StyledSearchNavContainer id={panelId} alignItems=\"center\" cols={['1fr', '1fr']}>\n          <DSInputText\n            id={inputId}\n            onChange={handleChange}\n            data-testid=\"ds-nav-searchbox-input\"\n            onBlur={onBlur}\n            onKeyDown={handleInputKeyDown}\n            placeholder={placeholder || 'Search...'}\n            value={value}\n            innerRef={handleNavInputRefs}\n            clearable\n            onClear={onClear}\n          />\n\n          <ToolbarRightAddons\n            onNext={onNext}\n            onPrevious={onPrevious}\n            currentResultIndex={currentResultIndex}\n            totalResults={totalResults}\n          />\n        </StyledSearchNavContainer>\n      ) : null}\n    </StyledNavSearchBoxContainer>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
 }

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { ChevronDown, ChevronUp } from "@elliemae/ds-icons";
+import { StyledResultTracker, StyledVerticalSeparator, StyledToolbarRightAddonsWrapper, NavBtn } from "./styles.js";
+const RightButtonsGroup = (props) => {
+  const { onNext, onPrevious, totalResults } = props;
+  const isDisabled = totalResults === 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      NavBtn,
+      {
+        buttonType: "icon",
+        "data-testid": "ds-navsearchbox-next",
+        onClick: onNext,
+        "aria-label": "Next search result",
+        disabled: isDisabled,
+        children: /* @__PURE__ */ jsx(ChevronDown, { color: !isDisabled ? ["brand-primary", "800"] : void 0 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NavBtn,
+      {
+        buttonType: "icon",
+        "data-testid": "ds-navsearchbox-previous",
+        onClick: onPrevious,
+        "aria-label": "Previous search result",
+        disabled: isDisabled,
+        children: /* @__PURE__ */ jsx(ChevronUp, { color: !isDisabled ? ["brand-primary", "800"] : void 0 })
+      }
+    )
+  ] });
+};
+const ResultTracker = (props) => {
+  const { currentResultIndex, totalResults } = props;
+  if (currentResultIndex === -1 && !totalResults) return null;
+  if (currentResultIndex === -1 && totalResults) return /* @__PURE__ */ jsx(StyledResultTracker, { children: totalResults });
+  return /* @__PURE__ */ jsx(StyledResultTracker, { children: `${currentResultIndex + 1} / ${totalResults}` });
+};
+const VerticalSeparator = () => /* @__PURE__ */ jsx(StyledVerticalSeparator, {});
+const ToolbarRightAddons = React2.memo((props) => {
+  const { onNext, onPrevious, currentResultIndex, totalResults } = props;
+  return /* @__PURE__ */ jsxs(StyledToolbarRightAddonsWrapper, { children: [
+    /* @__PURE__ */ jsx(ResultTracker, { currentResultIndex, totalResults }),
+    currentResultIndex !== -1 || totalResults ? /* @__PURE__ */ jsx(VerticalSeparator, {}) : null,
+    /* @__PURE__ */ jsx(RightButtonsGroup, { onNext, onPrevious, totalResults })
+  ] });
+});
+ToolbarRightAddons.displayName = "ToolbarRightAddons";
+export {
+  ToolbarRightAddons
+};
+//# sourceMappingURL=ToolbarRightAddons.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/ToolbarRightAddons.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ChevronDown, ChevronUp } from '@elliemae/ds-icons';\nimport { StyledResultTracker, StyledVerticalSeparator, StyledToolbarRightAddonsWrapper, NavBtn } from './styles.js';\n\ninterface RightButtonsGroupPropsT {\n  onNext: () => void;\n  onPrevious: () => void;\n  totalResults: number;\n}\n\nconst RightButtonsGroup = (props: RightButtonsGroupPropsT) => {\n  const { onNext, onPrevious, totalResults } = props;\n\n  const isDisabled = totalResults === 0;\n\n  return (\n    <>\n      <NavBtn\n        buttonType=\"icon\"\n        data-testid=\"ds-navsearchbox-next\"\n        onClick={onNext}\n        aria-label=\"Next search result\"\n        disabled={isDisabled}\n      >\n        <ChevronDown color={!isDisabled ? ['brand-primary', '800'] : undefined} />\n      </NavBtn>\n\n      <NavBtn\n        buttonType=\"icon\"\n        data-testid=\"ds-navsearchbox-previous\"\n        onClick={onPrevious}\n        aria-label=\"Previous search result\"\n        disabled={isDisabled}\n      >\n        <ChevronUp color={!isDisabled ? ['brand-primary', '800'] : undefined} />\n      </NavBtn>\n    </>\n  );\n};\n\ninterface ResultTrackerPropsT {\n  currentResultIndex: number;\n  totalResults: number;\n}\n\nconst ResultTracker = (props: ResultTrackerPropsT) => {\n  const { currentResultIndex, totalResults } = props;\n\n  if (currentResultIndex === -1 && !totalResults) return null;\n  if (currentResultIndex === -1 && totalResults) return <StyledResultTracker>{totalResults}</StyledResultTracker>;\n\n  return <StyledResultTracker>{`${currentResultIndex + 1} / ${totalResults}`}</StyledResultTracker>;\n};\n\nconst VerticalSeparator = () => <StyledVerticalSeparator />;\n\nexport interface ToolbarRightAddonsPropsT {\n  onNext: () => void;\n  onPrevious: () => void;\n  currentResultIndex: number;\n  totalResults: number;\n}\n\nexport const ToolbarRightAddons = React.memo((props: ToolbarRightAddonsPropsT) => {\n  const { onNext, onPrevious, currentResultIndex, totalResults } = props;\n\n  return (\n    <StyledToolbarRightAddonsWrapper>\n      <ResultTracker currentResultIndex={currentResultIndex} totalResults={totalResults} />\n      {currentResultIndex !== -1 || totalResults ? <VerticalSeparator /> : null}\n      <RightButtonsGroup onNext={onNext} onPrevious={onPrevious} totalResults={totalResults} />\n    </StyledToolbarRightAddonsWrapper>\n  );\n});\n\nToolbarRightAddons.displayName = 'ToolbarRightAddons';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgBnB,mBAQI,KARJ;AAhBJ,OAAOA,YAAW;AAClB,SAAS,aAAa,iBAAiB;AACvC,SAAS,qBAAqB,yBAAyB,iCAAiC,cAAc;AAQtG,MAAM,oBAAoB,CAAC,UAAmC;AAC5D,QAAM,EAAE,QAAQ,YAAY,aAAa,IAAI;AAE7C,QAAM,aAAa,iBAAiB;AAEpC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,eAAY;AAAA,QACZ,SAAS;AAAA,QACT,cAAW;AAAA,QACX,UAAU;AAAA,QAEV,8BAAC,eAAY,OAAO,CAAC,aAAa,CAAC,iBAAiB,KAAK,IAAI,QAAW;AAAA;AAAA,IAC1E;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,eAAY;AAAA,QACZ,SAAS;AAAA,QACT,cAAW;AAAA,QACX,UAAU;AAAA,QAEV,8BAAC,aAAU,OAAO,CAAC,aAAa,CAAC,iBAAiB,KAAK,IAAI,QAAW;AAAA;AAAA,IACxE;AAAA,KACF;AAEJ;AAOA,MAAM,gBAAgB,CAAC,UAA+B;AACpD,QAAM,EAAE,oBAAoB,aAAa,IAAI;AAE7C,MAAI,uBAAuB,MAAM,CAAC,aAAc,QAAO;AACvD,MAAI,uBAAuB,MAAM,aAAc,QAAO,oBAAC,uBAAqB,wBAAa;AAEzF,SAAO,oBAAC,uBAAqB,aAAG,qBAAqB,CAAC,MAAM,YAAY,IAAG;AAC7E;AAEA,MAAM,oBAAoB,MAAM,oBAAC,2BAAwB;AASlD,MAAM,qBAAqBA,OAAM,KAAK,CAAC,UAAoC;AAChF,QAAM,EAAE,QAAQ,YAAY,oBAAoB,aAAa,IAAI;AAEjE,SACE,qBAAC,mCACC;AAAA,wBAAC,iBAAc,oBAAwC,cAA4B;AAAA,IAClF,uBAAuB,MAAM,eAAe,oBAAC,qBAAkB,IAAK;AAAA,IACrE,oBAAC,qBAAkB,QAAgB,YAAwB,cAA4B;AAAA,KACzF;AAEJ,CAAC;AAED,mBAAmB,cAAc;",
+  "names": ["React"]
+}

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

@@ -1,60 +1,101 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSButtonV2 } from "@elliemae/ds-button-v2";
 import { DSGlobalHeaderName, DSGlobalHeaderSlots } from "../../../../exported-related/theming.js";
 const StyledNavSearchBoxContainer = styled("div", {
   name: DSGlobalHeaderName,
   slot: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER
 })`
-  background: ${({ theme }) => theme.colors.neutral["000"]};
+  background: ${({ theme, isOpen }) => isOpen ? theme.colors.neutral["000"] : "transparent"};
   position: relative;
-  min-width: 260px;
-
+  display: flex;
+  align-items: center;
+  width: ${({ isOpen }) => isOpen ? "260px" : "auto"};
   & .em-ds-button {
     margin-right: 2px;
     height: 24px;
     width: 24px;
   }
+`;
+const StyledResultTracker = styled("div")`
+  padding: 0 8px;
+  color: #a2a9b6; // this is color picked from the placeholder, specs doesn't specify
+  white-space: nowrap;
+  word-spacing: 2px;
+`;
+const StyledVerticalSeparator = styled("div")`
+  height: 20px;
+  border-right: 1px solid #a2a9b6;
+`;
+const StyledToolbarRightAddonsWrapper = styled("div")`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const NavBtn = styled(DSButtonV2)``;
+const ToggleBtn = styled(DSButtonV2)`
+  ${({ isOpen, theme }) => !isOpen ? `
+  height: 3.077rem;
+  width: 3.077rem;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  position: relative;
 
-  & .em-ds-input {
-    border: none;
+  /* 1) sube especificidad para pisar DSButtonV2 */
+  && {
     outline: none;
-    box-shadow: none;
   }
 
-  & .em-ds-input:focus {
-    border: none;
-    box-shadow: none;
-  }
-
-  & .em-ds-input.em-ds-input--clearable:hover {
-    border: none;
+  &&:focus,
+  &&:focus-visible {
     outline: none;
-    box-shadow: none;
+    box-shadow: none; /* por si el DS usa ring con shadow */
   }
 
-  & .em-ds-input-addon-wrapper {
-    box-shadow: none;
+  & .em-ds-icon svg {
+    fill: ${theme.colors.neutral["000"]};
   }
 
-  & .em-ds-input-addon-wrapper:hover {
-    outline: none;
+  &&:hover {
+    background-color: ${theme.colors.brand[700]};
   }
 
-  & .em-ds-input-addon-wrapper__addon:hover {
-    outline: none;
+  &&:focus-visible {
+    background-color: transparent;
   }
 
-  & .em-ds-input:not(.floating-label-input-controller):hover:active {
-    border: none;
-    outline: none;
-    box-shadow: none;
+  &&:focus-visible::before {
+    content: '';
+    position: absolute;
+    z-index: 2;
+    top: 2px;
+    left: 2px;
+    width: calc(100% - 4px);
+    height: calc(100% - 4px);
+    border: 2px solid ${theme.colors.neutral["000"]};
+    border-radius: 4px;
+    pointer-events: none;
   }
 
-  & .em-ds-input-addon-wrapper__addon--right > div > div {
-    color: ${({ theme }) => theme.colors.neutral["500"]};
+  && span.pseudo-border {
+    display: none;
   }
+  ` : "margin-left: 2px;"}
+`;
+const StyledSearchNavContainer = styled(Grid)`
+  background: ${({ theme }) => theme.colors.neutral["000"]};
+  position: relative;
+  padding: 2px;
 `;
 export {
-  StyledNavSearchBoxContainer
+  NavBtn,
+  StyledNavSearchBoxContainer,
+  StyledResultTracker,
+  StyledSearchNavContainer,
+  StyledToolbarRightAddonsWrapper,
+  StyledVerticalSeparator,
+  ToggleBtn
 };
 //# sourceMappingURL=styles.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../../../exported-related/theming.js';\n\nexport const StyledNavSearchBoxContainer = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n})`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  position: relative;\n  min-width: 260px;\n\n  & .em-ds-button {\n    margin-right: 2px;\n    height: 24px;\n    width: 24px;\n  }\n\n  & .em-ds-input {\n    border: none;\n    outline: none;\n    box-shadow: none;\n  }\n\n  & .em-ds-input:focus {\n    border: none;\n    box-shadow: none;\n  }\n\n  & .em-ds-input.em-ds-input--clearable:hover {\n    border: none;\n    outline: none;\n    box-shadow: none;\n  }\n\n  & .em-ds-input-addon-wrapper {\n    box-shadow: none;\n  }\n\n  & .em-ds-input-addon-wrapper:hover {\n    outline: none;\n  }\n\n  & .em-ds-input-addon-wrapper__addon:hover {\n    outline: none;\n  }\n\n  & .em-ds-input:not(.floating-label-input-controller):hover:active {\n    border: none;\n    outline: none;\n    box-shadow: none;\n  }\n\n  & .em-ds-input-addon-wrapper__addon--right > div > div {\n    color: ${({ theme }) => theme.colors.neutral['500']};\n  }\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB,QAAQ,cAAc;AAClD,CAAC;AAAA,gBACe,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aA8C7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSGlobalHeaderName, DSGlobalHeaderSlots } from '../../../../exported-related/theming.js';\nexport const StyledNavSearchBoxContainer = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER,\n})<{ isOpen: boolean }>`\n  background: ${({ theme, isOpen }) => (isOpen ? theme.colors.neutral['000'] : 'transparent')};\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: ${({ isOpen }) => (isOpen ? '260px' : 'auto')};\n  & .em-ds-button {\n    margin-right: 2px;\n    height: 24px;\n    width: 24px;\n  }\n`;\n\nexport const StyledResultTracker = styled('div')`\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`;\nexport const StyledVerticalSeparator = styled('div')`\n  height: 20px;\n  border-right: 1px solid #a2a9b6;\n`;\nexport const StyledToolbarRightAddonsWrapper = styled('div')`\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n`;\n\nexport const NavBtn = styled(DSButtonV2)``;\n\nexport const ToggleBtn = styled(DSButtonV2)<{ isOpen: boolean }>`\n  ${({ isOpen, theme }) =>\n    !isOpen\n      ? `\n  height: 3.077rem;\n  width: 3.077rem;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  position: relative;\n\n  /* 1) sube especificidad para pisar DSButtonV2 */\n  && {\n    outline: none;\n  }\n\n  &&:focus,\n  &&:focus-visible {\n    outline: none;\n    box-shadow: none; /* por si el DS usa ring con shadow */\n  }\n\n  & .em-ds-icon svg {\n    fill: ${theme.colors.neutral['000']};\n  }\n\n  &&:hover {\n    background-color: ${theme.colors.brand[700]};\n  }\n\n  &&:focus-visible {\n    background-color: transparent;\n  }\n\n  &&:focus-visible::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.colors.neutral['000']};\n    border-radius: 4px;\n    pointer-events: none;\n  }\n\n  && span.pseudo-border {\n    display: none;\n  }\n  `\n      : 'margin-left: 2px;'}\n`;\n\nexport const StyledSearchNavContainer = styled(Grid)`\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  position: relative;\n  padding: 2px;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,2BAA2B;AACjD,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,oBAAoB,QAAQ,cAAc;AAClD,CAAC;AAAA,gBACe,CAAC,EAAE,OAAO,OAAO,MAAO,SAAS,MAAM,OAAO,QAAQ,KAAK,IAAI,aAAc;AAAA;AAAA;AAAA;AAAA,WAIlF,CAAC,EAAE,OAAO,MAAO,SAAS,UAAU,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/C,MAAM,sBAAsB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAMxC,MAAM,0BAA0B,OAAO,KAAK;AAAA;AAAA;AAAA;AAI5C,MAAM,kCAAkC,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAMpD,MAAM,SAAS,OAAO,UAAU;AAEhC,MAAM,YAAY,OAAO,UAAU;AAAA,IACtC,CAAC,EAAE,QAAQ,MAAM,MACjB,CAAC,SACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAoBI,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,wBAIf,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAevB,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAS3C,mBAAmB;AAAA;AAGpB,MAAM,2BAA2B,OAAO,IAAI;AAAA,gBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;",
   "names": []
 }

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 { 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: (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: HTMLElement | null) => void;\n    label: string;\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    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 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;AAqNO,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;",
   "names": []
 }

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

@@ -49,5 +49,4 @@ export declare const DSGlobalHeaderSlotsFlattened: {
     MENUBAR_POPUP_MENU_ITEM_BUTTON: string;
     MENUBAR_POPUP_MENU_SEPARATOR: string;
     MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: string;
-    MENUBAR_SEARCH_TOGGLE_CONTAINER: string;
 };

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/LiveRegion.d.ts

@@ -0,0 +1,4 @@
+declare const LiveRegion: ({ message }: {
+    message: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default LiveRegion;

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: ({ setRef, componentProps, label }: DSGlobalHeaderT.SearchToggleProps) => JSX.Element;

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

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