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

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

@@ -33,24 +33,17 @@ __export(SearchToggle_exports, {
 module.exports = __toCommonJS(SearchToggle_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_legacy_form = require("@elliemae/ds-legacy-form");
+var import_react = __toESM(require("react"));
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
 var import_ds_system = require("@elliemae/ds-system");
-var import_react = require("react");
 var import_exported_related = require("../../../../exported-related/index.js");
-var import_styles = require("../../../styles.js");
-var import_styles2 = require("./styles.js");
-var import_useCallbackAfterRender = require("./useCallbackAfterRender.js");
-const SearchToggle = ({
-  setRef,
-  componentProps,
-  label,
-  ...otherProps
-}) => {
-  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+var import_styles = require("./styles.js");
+var import_LiveRegion = __toESM(require("./LiveRegion.js"));
+var import_ToolbarRightAddons = require("./ToolbarRightAddons.js");
+const SearchToggle = ({ setRef, componentProps, label }) => {
+  const [isOpenUncontrolled, setIsOpenUncontrolled] = (0, import_react.useState)(false);
   const internalInputRef = (0, import_react.useRef)(null);
-  const internalTriggerRef = (0, import_react.useRef)(null);
   const containerRef = (0, import_react.useRef)(null);
   const {
     onNext,
@@ -68,39 +61,77 @@ const SearchToggle = ({
     triggerRef,
     searchContainerRef
   } = componentProps;
-  const schedule = (0, import_useCallbackAfterRender.useCallbackAfterRender)();
-  const focusTrigger = (0, import_react.useCallback)(() => internalTriggerRef.current?.focus(), []);
-  const handleOnClick = (0, import_react.useCallback)(
-    (e) => {
-      if (userIsOpen === void 0) setIsOpen(true);
-      if (onClick) onClick(e);
+  const isControlled = userIsOpen !== void 0;
+  const isOpen = userIsOpen ?? isOpenUncontrolled;
+  const internalTriggerRef = (0, import_react.useRef)(null);
+  const [liveMessage, setLiveMessage] = import_react.default.useState("");
+  const handleNavInputRefs = (0, import_react.useCallback)(
+    (searchNavRef) => {
+      setRef(searchNavRef);
+      internalInputRef.current = searchNavRef;
     },
-    [onClick, userIsOpen]
+    [setRef]
   );
-  const handleOnKeyDown = (0, import_react.useCallback)(
+  const openUncontrolled = (0, import_react.useCallback)(() => {
+    if (!isControlled) setIsOpenUncontrolled(true);
+    setLiveMessage("Search expanded.");
+  }, [isControlled]);
+  const closeUncontrolled = (0, import_react.useCallback)(() => {
+    if (!isControlled) setIsOpenUncontrolled(false);
+    setLiveMessage("Search collapsed.");
+    internalTriggerRef.current?.focus();
+    onClear();
+  }, [isControlled, onClear]);
+  const toggle = (0, import_react.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 = (0, import_react.useCallback)(() => {
-    const contains = containerRef.current?.contains(document.activeElement);
-    if (value === "" && !contains) setIsOpen(false);
-    schedule(focusTrigger);
-  }, [focusTrigger, schedule, value]);
-  const handleNavInputRefs = (0, import_react.useCallback)(
-    (searchNavRef) => {
-      setRef(searchNavRef);
-      internalInputRef.current = searchNavRef;
+  const handleContainerKeyDown = (0, import_react.useCallback)(
+    (e) => {
+      if (!isControlled && e.key === "Escape" && isOpen) {
+        closeUncontrolled();
+      }
+      onKeyDown?.(e);
     },
-    [setRef]
+    [closeUncontrolled, isControlled, isOpen, onKeyDown]
   );
+  import_react.default.useEffect(() => {
+    if (!value) return;
+    if (totalResults === 0) {
+      setLiveMessage(`No results for "${value}".`);
+      return;
+    }
+    if (totalResults > 0) {
+      setLiveMessage(`${totalResults} results for "${value}".`);
+    }
+  }, [totalResults, value]);
+  import_react.default.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 = (0, import_react.useCallback)(
     (buttonRef) => {
       (0, import_ds_system.mergeRefs)(triggerRef, internalTriggerRef)(buttonRef);
@@ -108,40 +139,58 @@ const SearchToggle = ({
     },
     [setRef, triggerRef]
   );
-  return userIsOpen || isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styles2.StyledNavSearchBoxContainer,
+  const inputId = "ds-nav-searchbox-input";
+  const panelId = "ds-nav-searchbox-panel";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styles.StyledNavSearchBoxContainer,
     {
-      onKeyDown: handleOnKeyDown,
+      onKeyDown: handleContainerKeyDown,
       innerRef: (0, import_ds_system.mergeRefs)(searchContainerRef, containerRef),
-      onBlur: handleOnBlur,
       "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ds_legacy_form.DSNavSearchBox,
-        {
-          onNext,
-          onPrevious,
-          currentResultIndex,
-          totalResults,
-          onClear,
-          placeholder,
-          onChange,
-          value,
-          onBlur,
-          innerRef: handleNavInputRefs,
-          autoFocus: true
-        }
-      )
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styles.StyledButton,
-    {
-      onClick: handleOnClick,
-      innerRef: handleTriggerRefs,
-      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON,
-      "aria-label": label,
-      ...(0, import_ds_props_helpers.getGlobalAttributes)(otherProps),
-      type: "button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, {})
+      isOpen,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveRegion.default, { message: liveMessage }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styles.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__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Search, { color: isOpen ? ["brand-primary", "800"] : ["neutral", "0"] })
+          }
+        ),
+        isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledSearchNavContainer, { id: panelId, alignItems: "center", cols: ["1fr", "1fr"], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ds_form_input_text.DSInputText,
+            {
+              id: inputId,
+              onChange: handleChange,
+              "data-testid": "ds-nav-searchbox-input",
+              onBlur,
+              onKeyDown: handleInputKeyDown,
+              placeholder: placeholder || "Search...",
+              value,
+              innerRef: handleNavInputRefs,
+              clearable: true,
+              onClear
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_ToolbarRightAddons.ToolbarRightAddons,
+            {
+              onNext,
+              onPrevious,
+              currentResultIndex,
+              totalResults
+            }
+          )
+        ] }) : null
+      ]
     }
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { DSNavSearchBox } from '@elliemae/ds-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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6FjB;AA7FN,4BAA+B;AAC/B,sBAAuB;AACvB,8BAAoC;AACpC,uBAA0B;AAC1B,mBAAqD;AACrD,8BAAyC;AAEzC,oBAA6B;AAC7B,IAAAA,iBAA4C;AAC5C,oCAAuC;AAEhC,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsD;AACpD,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAkB,KAAK;AACnD,QAAM,uBAAmB,qBAAgC,IAAI;AAC7D,QAAM,yBAAqB,qBAAiC,IAAI;AAChE,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,eAAW,sDAAuB;AAExC,QAAM,mBAAe,0BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAwB;AACvB,UAAI,eAAe,OAAW,WAAU,IAAI;AAC5C,UAAI,QAAS,SAAQ,CAAC;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,UAAU;AAAA,EACtB;AAEA,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,eAAe,QAAW;AAC5B,YAAI,EAAE,QAAQ,UAAU;AACtB,oBAAU,KAAK;AACf,mBAAS,YAAY;AAAA,QACvB;AAAA,MACF;AACA,UAAI,UAAW,WAAU,CAAC;AAAA,IAC5B;AAAA,IACA,CAAC,cAAc,WAAW,UAAU,UAAU;AAAA,EAChD;AAEA,QAAM,mBAAe,0BAAY,MAAM;AACrC,UAAM,WAAW,aAAa,SAAS,SAAS,SAAS,aAAa;AACtE,QAAI,UAAU,MAAM,CAAC,SAAU,WAAU,KAAK;AAC9C,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,KAAK,CAAC;AAElC,QAAM,yBAAqB;AAAA,IACzB,CAAC,iBAAmC;AAClC,aAAO,YAAY;AACnB,uBAAiB,UAAU;AAAA,IAC7B;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAAC,cAAiC;AAChC,sCAAU,YAAY,kBAAkB,EAAE,SAAS;AACnD,aAAO,SAAS;AAAA,IAClB;AAAA,IACA,CAAC,QAAQ,UAAU;AAAA,EACrB;AAEA,SAAO,cAAc,SACnB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,cAAU,4BAAU,oBAAoB,YAAY;AAAA,MACpD,QAAQ;AAAA,MACR,eAAa,iDAAyB,QAAQ,cAAc;AAAA,MAE5D;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,WAAS;AAAA;AAAA,MACX;AAAA;AAAA,EACF,IAEA;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,eAAa,iDAAyB,QAAQ,cAAc;AAAA,MAC5D,cAAY;AAAA,MACX,OAAG,6CAAoB,UAAU;AAAA,MAClC,MAAK;AAAA,MAEL,sDAAC,0BAAO;AAAA;AAAA,EACV;AAEJ;",
-  "names": ["import_styles"]
+  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": ["React", "LiveRegion"]
 }

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

@@ -0,0 +1,83 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ToolbarRightAddons_exports = {};
+__export(ToolbarRightAddons_exports, {
+  ToolbarRightAddons: () => ToolbarRightAddons
+});
+module.exports = __toCommonJS(ToolbarRightAddons_exports);
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_styles = require("./styles.js");
+const RightButtonsGroup = (props) => {
+  const { onNext, onPrevious, totalResults } = props;
+  const isDisabled = totalResults === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styles.NavBtn,
+      {
+        buttonType: "icon",
+        "data-testid": "ds-navsearchbox-next",
+        onClick: onNext,
+        "aria-label": "Next search result",
+        disabled: isDisabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ChevronDown, { color: !isDisabled ? ["brand-primary", "800"] : void 0 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styles.NavBtn,
+      {
+        buttonType: "icon",
+        "data-testid": "ds-navsearchbox-previous",
+        onClick: onPrevious,
+        "aria-label": "Previous search result",
+        disabled: isDisabled,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.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__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledResultTracker, { children: totalResults });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledResultTracker, { children: `${currentResultIndex + 1} / ${totalResults}` });
+};
+const VerticalSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledVerticalSeparator, {});
+const ToolbarRightAddons = import_react.default.memo((props) => {
+  const { onNext, onPrevious, currentResultIndex, totalResults } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledToolbarRightAddonsWrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResultTracker, { currentResultIndex, totalResults }),
+    currentResultIndex !== -1 || totalResults ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(VerticalSeparator, {}) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RightButtonsGroup, { onNext, onPrevious, totalResults })
+  ] });
+});
+ToolbarRightAddons.displayName = "ToolbarRightAddons";
+//# sourceMappingURL=ToolbarRightAddons.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/ToolbarRightAddons.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgBnB;AAhBJ,mBAAkB;AAClB,sBAAuC;AACvC,oBAAsG;AAQtG,MAAM,oBAAoB,CAAC,UAAmC;AAC5D,QAAM,EAAE,QAAQ,YAAY,aAAa,IAAI;AAE7C,QAAM,aAAa,iBAAiB;AAEpC,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,eAAY;AAAA,QACZ,SAAS;AAAA,QACT,cAAW;AAAA,QACX,UAAU;AAAA,QAEV,sDAAC,+BAAY,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,sDAAC,6BAAU,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,4CAAC,qCAAqB,wBAAa;AAEzF,SAAO,4CAAC,qCAAqB,aAAG,qBAAqB,CAAC,MAAM,YAAY,IAAG;AAC7E;AAEA,MAAM,oBAAoB,MAAM,4CAAC,yCAAwB;AASlD,MAAM,qBAAqB,aAAAA,QAAM,KAAK,CAAC,UAAoC;AAChF,QAAM,EAAE,QAAQ,YAAY,oBAAoB,aAAa,IAAI;AAEjE,SACE,6CAAC,iDACC;AAAA,gDAAC,iBAAc,oBAAwC,cAA4B;AAAA,IAClF,uBAAuB,MAAM,eAAe,4CAAC,qBAAkB,IAAK;AAAA,IACrE,4CAAC,qBAAkB,QAAgB,YAAwB,cAA4B;AAAA,KACzF;AAEJ,CAAC;AAED,mBAAmB,cAAc;",
+  "names": ["React"]
+}

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

@@ -28,63 +28,104 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
-  StyledNavSearchBoxContainer: () => StyledNavSearchBoxContainer
+  NavBtn: () => NavBtn,
+  StyledNavSearchBoxContainer: () => StyledNavSearchBoxContainer,
+  StyledResultTracker: () => StyledResultTracker,
+  StyledSearchNavContainer: () => StyledSearchNavContainer,
+  StyledToolbarRightAddonsWrapper: () => StyledToolbarRightAddonsWrapper,
+  StyledVerticalSeparator: () => StyledVerticalSeparator,
+  ToggleBtn: () => ToggleBtn
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
 var import_theming = require("../../../../exported-related/theming.js");
 const StyledNavSearchBoxContainer = (0, import_ds_system.styled)("div", {
   name: import_theming.DSGlobalHeaderName,
   slot: import_theming.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 = (0, import_ds_system.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 = (0, import_ds_system.styled)("div")`
+  height: 20px;
+  border-right: 1px solid #a2a9b6;
+`;
+const StyledToolbarRightAddonsWrapper = (0, import_ds_system.styled)("div")`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+const NavBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2)``;
+const ToggleBtn = (0, import_ds_system.styled)(import_ds_button_v2.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 = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  background: ${({ theme }) => theme.colors.neutral["000"]};
+  position: relative;
+  padding: 2px;
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/styles.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAwD;AAEjD,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,mCAAoB,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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,0BAA2B;AAC3B,qBAAwD;AACjD,MAAM,kCAA8B,yBAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,mCAAoB,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,0BAAsB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAMxC,MAAM,8BAA0B,yBAAO,KAAK;AAAA;AAAA;AAAA;AAI5C,MAAM,sCAAkC,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAMpD,MAAM,aAAS,yBAAO,8BAAU;AAEhC,MAAM,gBAAY,yBAAO,8BAAU;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,+BAA2B,yBAAO,mBAAI;AAAA,gBACnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;",
   "names": []
 }

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

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

package/dist/esm/exported-related/theming.js

@@ -49,8 +49,7 @@ const DSGlobalHeaderSlotsFlattened = {
   MENUBAR_POPUP_MENU_ITEM: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM,
   MENUBAR_POPUP_MENU_ITEM_BUTTON: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON,
   MENUBAR_POPUP_MENU_SEPARATOR: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR,
-  MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,
-  MENUBAR_SEARCH_TOGGLE_CONTAINER: DSGlobalHeaderSlots.MENUBAR.SEARCH_TOGGLE.CONTAINER
+  MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL
 };
 export {
   DSGlobalHeaderName,