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

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

@@ -36,7 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_react = __toESM(require("react"));
 var import_DSGlobalHeaderContext = require("../../../../../DSGlobalHeaderContext.js");
-var import_exported_related = require("../../../../../exported-related/index.js");
+var import_constants = require("../../../../../constants/index.js");
 var import_styles = require("./styles.js");
 var import_usePopupMenuContent = require("./usePopupMenuContent.js");
 const PopupMenuContent = import_react.default.memo(
@@ -45,80 +45,102 @@ const PopupMenuContent = import_react.default.memo(
     onItemClick,
     onClose,
     popupOnKeyPress,
-    setIsOpen
+    setIsOpen,
+    ownerProps
   }) => {
     const { instanceUID } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
     const { menuRef, setRef, keyboardNavigation } = (0, import_usePopupMenuContent.usePopupMenuContent)({ setIsOpen });
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledList, { innerRef: menuRef, role: "menu", "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST, children: options.map((option) => {
-      const { type, Icon, label = "", onClick, Content, ...rest } = option;
-      const globalAttrs = (0, import_ds_props_helpers.getGlobalAttributes)(rest);
-      const handleClick = (e) => {
-        onItemClick();
-        if (onClick) onClick(e);
-      };
-      const handleKeyDown = (e) => {
-        keyboardNavigation(e);
-        if (e.code === "Escape") onClose();
-        if (popupOnKeyPress) popupOnKeyPress(e);
-      };
-      switch (type) {
-        case "separator":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_styles.StyledSeparator,
-            {
-              role: "none",
-              "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR,
-              ...globalAttrs
-            },
-            `${instanceUID}-separator-${label}`
-          );
-        case "custom":
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_styles.StyledItemContainer,
-            {
-              role: "menuitem",
-              "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_styles.StyledItemButton,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_styles.StyledList,
+      {
+        innerRef: menuRef,
+        role: "menu",
+        "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_LIST,
+        ...ownerProps,
+        children: options.map((option) => {
+          const { type, Icon, label = "", onClick, Content, ...rest } = option;
+          const globalAttrs = (0, import_ds_props_helpers.getGlobalAttributes)(rest);
+          const handleClick = (e) => {
+            onItemClick();
+            if (onClick) onClick(e);
+          };
+          const handleKeyDown = (e) => {
+            keyboardNavigation(e);
+            if (e.code === "Escape") onClose();
+            if (popupOnKeyPress) popupOnKeyPress(e);
+          };
+          switch (type) {
+            case "separator":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styles.StyledSeparator,
                 {
-                  innerRef: setRef,
-                  onClick: handleClick,
-                  onKeyDown: handleKeyDown,
-                  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
+                  role: "none",
+                  "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_SEPARATOR,
                   ...globalAttrs,
-                  type: "button",
-                  children: Content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {})
-                }
-              )
-            },
-            `${instanceUID}-popup-${label}`
-          );
-        default:
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_styles.StyledItemContainer,
-            {
-              role: "menuitem",
-              "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                import_styles.StyledItemButton,
+                  ...ownerProps
+                },
+                `${instanceUID}-separator-${label}`
+              );
+            case "custom":
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styles.StyledItemContainer,
                 {
-                  innerRef: setRef,
-                  onClick: handleClick,
-                  onKeyDown: handleKeyDown,
-                  "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON,
-                  ...globalAttrs,
-                  type: "button",
-                  children: [
-                    Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
-                    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, { "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL, children: label })
-                  ]
-                }
-              )
-            },
-            `${instanceUID}-popup-${label}`
-          );
+                  role: "menuitem",
+                  "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM,
+                  ...ownerProps,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_styles.StyledItemButton,
+                    {
+                      innerRef: setRef,
+                      onClick: handleClick,
+                      onKeyDown: handleKeyDown,
+                      "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON,
+                      ...globalAttrs,
+                      type: "button",
+                      ...ownerProps,
+                      children: Content && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {})
+                    }
+                  )
+                },
+                `${instanceUID}-popup-${label}`
+              );
+            default:
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_styles.StyledItemContainer,
+                {
+                  role: "menuitem",
+                  "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM,
+                  ...ownerProps,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                    import_styles.StyledItemButton,
+                    {
+                      innerRef: setRef,
+                      onClick: handleClick,
+                      onKeyDown: handleKeyDown,
+                      "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON,
+                      ...globalAttrs,
+                      type: "button",
+                      ...ownerProps,
+                      children: [
+                        Icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
+                        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_styles.StyledLabel,
+                          {
+                            "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL,
+                            ...ownerProps,
+                            children: label
+                          }
+                        )
+                      ]
+                    }
+                  )
+                },
+                `${instanceUID}-popup-${label}`
+              );
+          }
+        })
       }
-    }) });
+    );
   }
 );
 //# sourceMappingURL=PopupMenuContent.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.tsx", "../../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React, { useContext } from 'react';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { DSGlobalHeaderDatatestid } from '../../../../../exported-related/index.js';\nimport type { DSGlobalHeaderT } from '../../../../../react-desc-prop-types.js';\nimport { StyledItemButton, StyledItemContainer, StyledLabel, StyledList, StyledSeparator } from './styles.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\n\nexport const PopupMenuContent = React.memo(\n  ({\n    options,\n    onItemClick,\n    onClose,\n    popupOnKeyPress,\n    setIsOpen,\n  }: DSGlobalHeaderT.PopupMenuContentProps): JSX.Element => {\n    const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n    const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n    return (\n      <StyledList innerRef={menuRef} role=\"menu\" data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST}>\n        {options.map((option) => {\n          const { type, Icon, label = '', onClick, Content, ...rest } = option;\n\n          const globalAttrs = getGlobalAttributes(rest);\n\n          const handleClick = (e: React.MouseEvent) => {\n            onItemClick();\n            if (onClick) onClick(e);\n          };\n\n          const handleKeyDown = (e: React.KeyboardEvent) => {\n            keyboardNavigation(e);\n            if (e.code === 'Escape') onClose();\n            if (popupOnKeyPress) popupOnKeyPress(e);\n          };\n\n          switch (type) {\n            case 'separator':\n              return (\n                <StyledSeparator\n                  key={`${instanceUID}-separator-${label}`}\n                  role=\"none\"\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR}\n                  {...globalAttrs}\n                />\n              );\n            case 'custom':\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n                >\n                  <StyledItemButton\n                    innerRef={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n                    {...globalAttrs}\n                    type=\"button\"\n                  >\n                    {Content && <Content />}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n            default:\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM}\n                >\n                  <StyledItemButton\n                    innerRef={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n                    {...globalAttrs}\n                    type=\"button\"\n                  >\n                    {Icon && <Icon />}\n                    {label && (\n                      <StyledLabel data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL}>\n                        {label}\n                      </StyledLabel>\n                    )}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n          }\n        })}\n      </StyledList>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyCP;AAzChB,8BAAoC;AACpC,mBAAkC;AAClC,mCAAsC;AACtC,8BAAyC;AAEzC,oBAAgG;AAChG,iCAAoC;AAE7B,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAA0D;AACxD,UAAM,EAAE,YAAY,QAAI,yBAAW,kDAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,gDAAoB,EAAE,UAAU,CAAC;AAEjF,WACE,4CAAC,4BAAW,UAAU,SAAS,MAAK,QAAO,eAAa,iDAAyB,QAAQ,WAAW,MACjG,kBAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,GAAG,KAAK,IAAI;AAE9D,YAAM,kBAAc,6CAAoB,IAAI;AAE5C,YAAM,cAAc,CAAC,MAAwB;AAC3C,oBAAY;AACZ,YAAI,QAAS,SAAQ,CAAC;AAAA,MACxB;AAEA,YAAM,gBAAgB,CAAC,MAA2B;AAChD,2BAAmB,CAAC;AACpB,YAAI,EAAE,SAAS,SAAU,SAAQ;AACjC,YAAI,gBAAiB,iBAAgB,CAAC;AAAA,MACxC;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cACxD,GAAG;AAAA;AAAA,YAHC,GAAG,WAAW,cAAc,KAAK;AAAA,UAIxC;AAAA,QAEJ,KAAK;AACH,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ,qBAAW,4CAAC,WAAQ;AAAA;AAAA,cACvB;AAAA;AAAA,YAbK,GAAG,WAAW,UAAU,KAAK;AAAA,UAcpC;AAAA,QAEJ;AACE,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,cAEzD;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,WAAW;AAAA,kBACX,eAAa,iDAAyB,QAAQ,WAAW;AAAA,kBACxD,GAAG;AAAA,kBACJ,MAAK;AAAA,kBAEJ;AAAA,4BAAQ,4CAAC,QAAK;AAAA,oBACd,SACC,4CAAC,6BAAY,eAAa,iDAAyB,QAAQ,WAAW,mBACnE,iBACH;AAAA;AAAA;AAAA,cAEJ;AAAA;AAAA,YAlBK,GAAG,WAAW,UAAU,KAAK;AAAA,UAmBpC;AAAA,MAEN;AAAA,IACF,CAAC,GACH;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import { getGlobalAttributes } from '@elliemae/ds-props-helpers';\nimport React, { useContext } from 'react';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext.js';\nimport { GLOBAL_HEADER_DATA_TESTID } from '../../../../../constants/index.js';\nimport type { DSGlobalHeaderT } from '../../../../../react-desc-prop-types.js';\nimport { StyledItemButton, StyledItemContainer, StyledLabel, StyledList, StyledSeparator } from './styles.js';\nimport { usePopupMenuContent } from './usePopupMenuContent.js';\n\nexport const PopupMenuContent = React.memo(\n  ({\n    options,\n    onItemClick,\n    onClose,\n    popupOnKeyPress,\n    setIsOpen,\n    ownerProps,\n  }: DSGlobalHeaderT.PopupMenuContentProps): JSX.Element => {\n    const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n    const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n    return (\n      <StyledList\n        innerRef={menuRef}\n        role=\"menu\"\n        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_LIST}\n        {...ownerProps}\n      >\n        {options.map((option) => {\n          const { type, Icon, label = '', onClick, Content, ...rest } = option;\n\n          const globalAttrs = getGlobalAttributes(rest);\n\n          const handleClick = (e: React.MouseEvent) => {\n            onItemClick();\n            if (onClick) onClick(e);\n          };\n\n          const handleKeyDown = (e: React.KeyboardEvent) => {\n            keyboardNavigation(e);\n            if (e.code === 'Escape') onClose();\n            if (popupOnKeyPress) popupOnKeyPress(e);\n          };\n\n          switch (type) {\n            case 'separator':\n              return (\n                <StyledSeparator\n                  key={`${instanceUID}-separator-${label}`}\n                  role=\"none\"\n                  data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_SEPARATOR}\n                  {...globalAttrs}\n                  {...ownerProps}\n                />\n              );\n            case 'custom':\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM}\n                  {...ownerProps}\n                >\n                  <StyledItemButton\n                    innerRef={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON}\n                    {...globalAttrs}\n                    type=\"button\"\n                    {...ownerProps}\n                  >\n                    {Content && <Content />}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n            default:\n              return (\n                <StyledItemContainer\n                  key={`${instanceUID}-popup-${label}`}\n                  role=\"menuitem\"\n                  data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM}\n                  {...ownerProps}\n                >\n                  <StyledItemButton\n                    innerRef={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON}\n                    {...globalAttrs}\n                    type=\"button\"\n                    {...ownerProps}\n                  >\n                    {Icon && <Icon />}\n                    {label && (\n                      <StyledLabel\n                        data-testid={GLOBAL_HEADER_DATA_TESTID.MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL}\n                        {...ownerProps}\n                      >\n                        {label}\n                      </StyledLabel>\n                    )}\n                  </StyledItemButton>\n                </StyledItemContainer>\n              );\n          }\n        })}\n      </StyledList>\n    );\n  },\n);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+CP;AA/ChB,8BAAoC;AACpC,mBAAkC;AAClC,mCAAsC;AACtC,uBAA0C;AAE1C,oBAAgG;AAChG,iCAAoC;AAE7B,MAAM,mBAAmB,aAAAA,QAAM;AAAA,EACpC,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,MAA0D;AACxD,UAAM,EAAE,YAAY,QAAI,yBAAW,kDAAqB;AAExD,UAAM,EAAE,SAAS,QAAQ,mBAAmB,QAAI,gDAAoB,EAAE,UAAU,CAAC;AAEjF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAU;AAAA,QACV,MAAK;AAAA,QACL,eAAa,2CAA0B;AAAA,QACtC,GAAG;AAAA,QAEH,kBAAQ,IAAI,CAAC,WAAW;AACvB,gBAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,GAAG,KAAK,IAAI;AAE9D,gBAAM,kBAAc,6CAAoB,IAAI;AAE5C,gBAAM,cAAc,CAAC,MAAwB;AAC3C,wBAAY;AACZ,gBAAI,QAAS,SAAQ,CAAC;AAAA,UACxB;AAEA,gBAAM,gBAAgB,CAAC,MAA2B;AAChD,+BAAmB,CAAC;AACpB,gBAAI,EAAE,SAAS,SAAU,SAAQ;AACjC,gBAAI,gBAAiB,iBAAgB,CAAC;AAAA,UACxC;AAEA,kBAAQ,MAAM;AAAA,YACZ,KAAK;AACH,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,eAAa,2CAA0B;AAAA,kBACtC,GAAG;AAAA,kBACH,GAAG;AAAA;AAAA,gBAJC,GAAG,WAAW,cAAc,KAAK;AAAA,cAKxC;AAAA,YAEJ,KAAK;AACH,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,eAAa,2CAA0B;AAAA,kBACtC,GAAG;AAAA,kBAEJ;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,SAAS;AAAA,sBACT,WAAW;AAAA,sBACX,eAAa,2CAA0B;AAAA,sBACtC,GAAG;AAAA,sBACJ,MAAK;AAAA,sBACJ,GAAG;AAAA,sBAEH,qBAAW,4CAAC,WAAQ;AAAA;AAAA,kBACvB;AAAA;AAAA,gBAfK,GAAG,WAAW,UAAU,KAAK;AAAA,cAgBpC;AAAA,YAEJ;AACE,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,eAAa,2CAA0B;AAAA,kBACtC,GAAG;AAAA,kBAEJ;AAAA,oBAAC;AAAA;AAAA,sBACC,UAAU;AAAA,sBACV,SAAS;AAAA,sBACT,WAAW;AAAA,sBACX,eAAa,2CAA0B;AAAA,sBACtC,GAAG;AAAA,sBACJ,MAAK;AAAA,sBACJ,GAAG;AAAA,sBAEH;AAAA,gCAAQ,4CAAC,QAAK;AAAA,wBACd,SACC;AAAA,0BAAC;AAAA;AAAA,4BACC,eAAa,2CAA0B;AAAA,4BACtC,GAAG;AAAA,4BAEH;AAAA;AAAA,wBACH;AAAA;AAAA;AAAA,kBAEJ;AAAA;AAAA,gBAvBK,GAAG,WAAW,UAAU,KAAK;AAAA,cAwBpC;AAAA,UAEN;AAAA,QACF,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
   "names": ["React"]
 }

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

@@ -37,21 +37,21 @@ __export(styles_exports, {
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-var import_theming = require("../../../../../exported-related/theming.js");
-const StyledList = (0, import_ds_system.styled)("ul", { name: import_theming.DSGlobalHeaderName, slot: import_theming.DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.LIST })`
+var import_constants = require("../../../../../constants/index.js");
+const StyledList = (0, import_ds_system.styled)("ul", { name: import_constants.DSGlobalHeaderName, slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_POPUP_MENU_LIST })`
   padding: 5px 0px;
   margin: 0;
   background: white;
 `;
 const StyledItemContainer = (0, import_ds_system.styled)("li", {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_POPUP_MENU_ITEM
 })`
   list-style: none;
 `;
 const StyledItemButton = (0, import_ds_system.styled)("button", {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_POPUP_MENU_ITEM_BUTTON
 })`
   display: flex;
   align-items: center;
@@ -68,16 +68,16 @@ const StyledItemButton = (0, import_ds_system.styled)("button", {
   }
 `;
 const StyledLabel = (0, import_ds_system.styled)("span", {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL
 })`
   width: 100%;
   font-size: 14px;
   margin: 10px;
 `;
 const StyledSeparator = (0, import_ds_system.styled)("div", {
-  name: import_theming.DSGlobalHeaderName,
-  slot: import_theming.DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_POPUP_MENU_SEPARATOR
 })`
   width: 100%;
   border: none;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/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 StyledList = styled('ul', { name: DSGlobalHeaderName, slot: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.LIST })`\n  padding: 5px 0px;\n  margin: 0;\n  background: white;\n`;\n\nexport const StyledItemContainer = styled('li', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM,\n})`\n  list-style: none;\n`;\n\nexport const StyledItemButton = styled('button', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON,\n})`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: 0 20px;\n  cursor: pointer;\n  border: 1px solid transparent;\n  background-color: transparent;\n  outline: none;\n  :hover,\n  :focus {\n    border: ${({ theme }) => `1px solid ${theme.colors.brand[600]}`};\n  }\n`;\n\nexport const StyledLabel = styled('span', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL,\n})`\n  width: 100%;\n  font-size: 14px;\n  margin: 10px;\n`;\n\nexport const StyledSeparator = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: DSGlobalHeaderSlots.MENUBAR.POPUP_MENU.SEPARATOR,\n})`\n  width: 100%;\n  border: none;\n  border-bottom: 1px solid #ccc;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAwD;AAEjD,MAAM,iBAAa,yBAAO,MAAM,EAAE,MAAM,mCAAoB,MAAM,mCAAoB,QAAQ,WAAW,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAM/G,MAAM,0BAAsB,yBAAO,MAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ,WAAW;AAC/C,CAAC;AAAA;AAAA;AAIM,MAAM,uBAAmB,yBAAO,UAAU;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ,WAAW;AAC/C,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAYa,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,MAAM,GAAG,CAAC,EAAE;AAAA;AAAA;AAI5D,MAAM,kBAAc,yBAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ,WAAW;AAC/C,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,mCAAoB,QAAQ,WAAW;AAC/C,CAAC;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSGlobalHeaderName, GLOBAL_HEADER_SLOTS } from '../../../../../constants/index.js';\n\nexport const StyledList = styled('ul', { name: DSGlobalHeaderName, slot: GLOBAL_HEADER_SLOTS.MENUBAR_POPUP_MENU_LIST })`\n  padding: 5px 0px;\n  margin: 0;\n  background: white;\n`;\n\nexport const StyledItemContainer = styled('li', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_POPUP_MENU_ITEM,\n})`\n  list-style: none;\n`;\n\nexport const StyledItemButton = styled('button', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_POPUP_MENU_ITEM_BUTTON,\n})`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: 0 20px;\n  cursor: pointer;\n  border: 1px solid transparent;\n  background-color: transparent;\n  outline: none;\n  :hover,\n  :focus {\n    border: ${({ theme }) => `1px solid ${theme.colors.brand[600]}`};\n  }\n`;\n\nexport const StyledLabel = styled('span', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_POPUP_MENU_ITEM_BUTTON_LABEL,\n})`\n  width: 100%;\n  font-size: 14px;\n  margin: 10px;\n`;\n\nexport const StyledSeparator = styled('div', {\n  name: DSGlobalHeaderName,\n  slot: GLOBAL_HEADER_SLOTS.MENUBAR_POPUP_MENU_SEPARATOR,\n})`\n  width: 100%;\n  border: none;\n  border-bottom: 1px solid #ccc;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAwD;AAEjD,MAAM,iBAAa,yBAAO,MAAM,EAAE,MAAM,qCAAoB,MAAM,qCAAoB,wBAAwB,CAAC;AAAA;AAAA;AAAA;AAAA;AAM/G,MAAM,0BAAsB,yBAAO,MAAM;AAAA,EAC9C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAIM,MAAM,uBAAmB,yBAAO,UAAU;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAYa,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,MAAM,GAAG,CAAC,EAAE;AAAA;AAAA;AAI5D,MAAM,kBAAc,yBAAO,QAAQ;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAMM,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,qCAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -49,7 +49,7 @@ const usePopupMenuContent = ({ setIsOpen }) => {
     });
   }, []);
   (0, import_react.useEffect)(() => {
-    allMenuItemsRef.current?.[0]?.focus();
+    setTimeout(() => allMenuItemsRef.current?.[0]?.focus(), 0);
   }, []);
   const keyboardNavigation = (0, import_react.useCallback)(
     (e) => {
@@ -59,6 +59,7 @@ const usePopupMenuContent = ({ setIsOpen }) => {
         const currentIndex = allMenuItemsRef.current.indexOf(e.target);
         const allRefsLength = allMenuItemsRef.current.length;
         if (e.key === "ArrowDown") {
+          e.preventDefault();
           if (currentIndex < allRefsLength - 1) {
             allMenuItemsRef.current[currentIndex + 1]?.focus?.();
           } else {
@@ -66,6 +67,7 @@ const usePopupMenuContent = ({ setIsOpen }) => {
           }
         }
         if (e.key === "ArrowUp") {
+          e.preventDefault();
           if (currentIndex === 0) {
             allMenuItemsRef.current[allRefsLength - 1]?.focus?.();
           } else {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/usePopupMenuContent.tsx", "../../../../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useRef, useCallback, useEffect } from 'react';\n\ninterface UsePopupMenuContentT {\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nexport const usePopupMenuContent = ({ setIsOpen }: UsePopupMenuContentT) => {\n  const menuRef = useRef<HTMLUListElement>(null);\n  const allMenuItemsRef = useRef<HTMLButtonElement[]>([]);\n\n  const setRef = useCallback((ref: HTMLButtonElement) => {\n    if (ref && !allMenuItemsRef.current.includes(ref)) {\n      allMenuItemsRef.current.push(ref);\n    }\n\n    allMenuItemsRef.current.forEach((item, index) => {\n      if (index === 0) {\n        item?.setAttribute?.('tabindex', '0');\n      } else {\n        item?.setAttribute?.('tabindex', '-1');\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    allMenuItemsRef.current?.[0]?.focus();\n  }, []);\n\n  const keyboardNavigation = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Tab') {\n        setIsOpen(false);\n      } else {\n        const currentIndex = allMenuItemsRef.current.indexOf(e.target as HTMLButtonElement);\n        const allRefsLength = allMenuItemsRef.current.length;\n        if (e.key === 'ArrowDown') {\n          if (currentIndex < allRefsLength - 1) {\n            allMenuItemsRef.current[currentIndex + 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[0]?.focus?.();\n          }\n        }\n        if (e.key === 'ArrowUp') {\n          if (currentIndex === 0) {\n            allMenuItemsRef.current[allRefsLength - 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[currentIndex - 1]?.focus?.();\n          }\n        }\n      }\n    },\n    [setIsOpen],\n  );\n\n  return {\n    menuRef,\n    setRef,\n    keyboardNavigation,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAMxC,MAAM,sBAAsB,CAAC,EAAE,UAAU,MAA4B;AAC1E,QAAM,cAAU,qBAAyB,IAAI;AAC7C,QAAM,sBAAkB,qBAA4B,CAAC,CAAC;AAEtD,QAAM,aAAS,0BAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,gBAAgB,QAAQ,SAAS,GAAG,GAAG;AACjD,sBAAgB,QAAQ,KAAK,GAAG;AAAA,IAClC;AAEA,oBAAgB,QAAQ,QAAQ,CAAC,MAAM,UAAU;AAC/C,UAAI,UAAU,GAAG;AACf,cAAM,eAAe,YAAY,GAAG;AAAA,MACtC,OAAO;AACL,cAAM,eAAe,YAAY,IAAI;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,oBAAgB,UAAU,CAAC,GAAG,MAAM;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,OAAO;AACpB,kBAAU,KAAK;AAAA,MACjB,OAAO;AACL,cAAM,eAAe,gBAAgB,QAAQ,QAAQ,EAAE,MAA2B;AAClF,cAAM,gBAAgB,gBAAgB,QAAQ;AAC9C,YAAI,EAAE,QAAQ,aAAa;AACzB,cAAI,eAAe,gBAAgB,GAAG;AACpC,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD,OAAO;AACL,4BAAgB,QAAQ,CAAC,GAAG,QAAQ;AAAA,UACtC;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,WAAW;AACvB,cAAI,iBAAiB,GAAG;AACtB,4BAAgB,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,UACtD,OAAO;AACL,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useRef, useCallback, useEffect } from 'react';\n\ninterface UsePopupMenuContentT {\n  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nexport const usePopupMenuContent = ({ setIsOpen }: UsePopupMenuContentT) => {\n  const menuRef = useRef<HTMLUListElement>(null);\n  const allMenuItemsRef = useRef<HTMLButtonElement[]>([]);\n\n  const setRef = useCallback((ref: HTMLButtonElement) => {\n    if (ref && !allMenuItemsRef.current.includes(ref)) {\n      allMenuItemsRef.current.push(ref);\n    }\n\n    allMenuItemsRef.current.forEach((item, index) => {\n      if (index === 0) {\n        item?.setAttribute?.('tabindex', '0');\n      } else {\n        item?.setAttribute?.('tabindex', '-1');\n      }\n    });\n  }, []);\n\n  useEffect(() => {\n    setTimeout(() => allMenuItemsRef.current?.[0]?.focus(), 0);\n  }, []);\n\n  const keyboardNavigation = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Tab') {\n        setIsOpen(false);\n      } else {\n        const currentIndex = allMenuItemsRef.current.indexOf(e.target as HTMLButtonElement);\n        const allRefsLength = allMenuItemsRef.current.length;\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          if (currentIndex < allRefsLength - 1) {\n            allMenuItemsRef.current[currentIndex + 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[0]?.focus?.();\n          }\n        }\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          if (currentIndex === 0) {\n            allMenuItemsRef.current[allRefsLength - 1]?.focus?.();\n          } else {\n            allMenuItemsRef.current[currentIndex - 1]?.focus?.();\n          }\n        }\n      }\n    },\n    [setIsOpen],\n  );\n\n  return {\n    menuRef,\n    setRef,\n    keyboardNavigation,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAMxC,MAAM,sBAAsB,CAAC,EAAE,UAAU,MAA4B;AAC1E,QAAM,cAAU,qBAAyB,IAAI;AAC7C,QAAM,sBAAkB,qBAA4B,CAAC,CAAC;AAEtD,QAAM,aAAS,0BAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,gBAAgB,QAAQ,SAAS,GAAG,GAAG;AACjD,sBAAgB,QAAQ,KAAK,GAAG;AAAA,IAClC;AAEA,oBAAgB,QAAQ,QAAQ,CAAC,MAAM,UAAU;AAC/C,UAAI,UAAU,GAAG;AACf,cAAM,eAAe,YAAY,GAAG;AAAA,MACtC,OAAO;AACL,cAAM,eAAe,YAAY,IAAI;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,eAAW,MAAM,gBAAgB,UAAU,CAAC,GAAG,MAAM,GAAG,CAAC;AAAA,EAC3D,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAqB;AAAA,IACzB,CAAC,MAA2B;AAC1B,UAAI,EAAE,SAAS,OAAO;AACpB,kBAAU,KAAK;AAAA,MACjB,OAAO;AACL,cAAM,eAAe,gBAAgB,QAAQ,QAAQ,EAAE,MAA2B;AAClF,cAAM,gBAAgB,gBAAgB,QAAQ;AAC9C,YAAI,EAAE,QAAQ,aAAa;AACzB,YAAE,eAAe;AACjB,cAAI,eAAe,gBAAgB,GAAG;AACpC,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD,OAAO;AACL,4BAAgB,QAAQ,CAAC,GAAG,QAAQ;AAAA,UACtC;AAAA,QACF;AACA,YAAI,EAAE,QAAQ,WAAW;AACvB,YAAE,eAAe;AACjB,cAAI,iBAAiB,GAAG;AACtB,4BAAgB,QAAQ,gBAAgB,CAAC,GAAG,QAAQ;AAAA,UACtD,OAAO;AACL,4BAAgB,QAAQ,eAAe,CAAC,GAAG,QAAQ;AAAA,UACrD;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -33,25 +33,116 @@ __export(SearchToggle_exports, {
 module.exports = __toCommonJS(SearchToggle_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_form = require("@elliemae/ds-form");
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_ds_form_input_text = require("@elliemae/ds-form-input-text");
+var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_ds_system = require("@elliemae/ds-system");
-var import_react = require("react");
-var import_exported_related = require("../../../../exported-related/index.js");
-var import_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);
-  const internalInputRef = (0, import_react.useRef)(null);
-  const internalTriggerRef = (0, import_react.useRef)(null);
-  const containerRef = (0, import_react.useRef)(null);
+var import_react = __toESM(require("react"));
+var import_DSGlobalHeaderContext = require("../../../../DSGlobalHeaderContext.js");
+var import_constants = require("../../../../constants/index.js");
+var import_SearchToggleSpinButton = require("./SearchToggleSpinButton.js");
+var import_useSearchToggle = require("./useSearchToggle.js");
+const StyledNavSearchBoxContainer = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.MENUBAR_SEARCH_TOGGLE_CONTAINER
+})`
+  background: ${({ theme, isOpen }) => isOpen ? theme.colors.neutral["000"] : "transparent"};
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: ${({ isOpen }) => isOpen ? "260px" : "auto"};
+  & .em-ds-button {
+    margin-right: 2px;
+    height: 24px;
+    width: 24px;
+  }
+`;
+const StyledSearchNavContainer = (0, import_ds_system.styled)(import_ds_grid.Grid, {
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_EXPANDED_CONTENT_WRAPPER
+})`
+  background: ${({ theme }) => theme.colors.neutral["000"]};
+  position: relative;
+  padding: 2px;
+`;
+const StyledSearchInput = (0, import_ds_system.styled)(import_ds_form_input_text.DSInputText, {
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TEXTINPUT
+})``;
+const ExpandedToggleBtnStyles = import_ds_system.css`
+  margin-left: 2px;
+`;
+const CollapsedToggleBtnStyles = import_ds_system.css`
+  height: 3.077rem;
+  width: 3.077rem;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  position: relative;
+
+  // we want to avoid the pseudo-border in the nested buttons
+  & button:focus .pseudo-border {
+    outline: none;
+    border: none;
+  }
+  && span.pseudo-border {
+    display: none;
+  }
+
+  // our "ad-hoc" styling of the DSButtonV3 that re-implement changed colors/focus-borders
+  & .em-ds-icon svg {
+    fill: ${({ theme }) => theme.colors.neutral["000"]};
+  }
+
+  &&:hover {
+    background-color: ${({ theme }) => theme.colors.brand[700]};
+  }
+
+  &&:focus-visible {
+    background-color: transparent;
+  }
+
+  &&: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 }) => theme.colors.neutral["000"]};
+    border-radius: 4px;
+    pointer-events: none;
+  }
+`;
+const StyledToggleBtn = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV3, {
+  name: import_constants.DSGlobalHeaderName,
+  slot: import_constants.GLOBAL_HEADER_SLOTS.SEARCH_TOGGLE_TRIGGER_BUTTON
+})`
+  ${({ isOpen }) => !isOpen ? CollapsedToggleBtnStyles : ExpandedToggleBtnStyles}
+`;
+const SearchToggle = (outOfTheBoxDrilledDownProps) => {
+  const {
+    componentProps,
+    label,
+    // added in https://jira.elliemae.io/browse/PUI-17852
+    //   keeping the default value as "Close search" for backward compatibility
+    //   we expect authors to provide descriptive aria-labels that fit their specific context, we do so in our example stories.
+    ariaLabelExpanded = "Close search"
+  } = outOfTheBoxDrilledDownProps;
+  const {
+    isOpenUncontrolled,
+    containerRef,
+    handleToggleSearch,
+    handleContainerKeyDown,
+    handleChange,
+    handleInputKeyDown,
+    handleTriggerRefs,
+    inputId,
+    panelId
+  } = (0, import_useSearchToggle.useSearchToggle)(outOfTheBoxDrilledDownProps);
+  const { props: propsWithDefault } = import_react.default.useContext(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
   const {
     onNext,
     onPrevious,
@@ -59,89 +150,76 @@ const SearchToggle = ({
     totalResults,
     placeholder,
     value,
-    onChange,
     onBlur,
     onClear,
     isOpen: userIsOpen,
-    onKeyDown,
-    onClick,
-    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);
-    },
-    [onClick, userIsOpen]
-  );
-  const handleOnKeyDown = (0, import_react.useCallback)(
-    (e) => {
-      if (userIsOpen === void 0) {
-        if (e.key === "Escape") {
-          setIsOpen(false);
-          schedule(focusTrigger);
-        }
-      }
-      if (onKeyDown) onKeyDown(e);
-    },
-    [focusTrigger, onKeyDown, schedule, userIsOpen]
-  );
-  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;
-    },
-    [setRef]
-  );
-  const handleTriggerRefs = (0, import_react.useCallback)(
-    (buttonRef) => {
-      (0, import_ds_system.mergeRefs)(triggerRef, internalTriggerRef)(buttonRef);
-      setRef(buttonRef);
-    },
-    [setRef, triggerRef]
-  );
-  return userIsOpen || isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_styles2.StyledNavSearchBoxContainer,
+  const getOwnerProps = import_react.default.useCallback(() => propsWithDefault, [propsWithDefault]);
+  const getOwnerPropsArguments = import_react.default.useCallback(() => ({}), []);
+  const isOpen = userIsOpen ?? isOpenUncontrolled;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    StyledNavSearchBoxContainer,
     {
-      onKeyDown: handleOnKeyDown,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      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_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)(
+          StyledToggleBtn,
+          {
+            getOwnerProps,
+            getOwnerPropsArguments,
+            buttonType: "icon",
+            innerRef: handleTriggerRefs,
+            "aria-label": isOpen ? ariaLabelExpanded : label,
+            "aria-expanded": isOpen,
+            "aria-controls": panelId,
+            onClick: handleToggleSearch,
+            isOpen,
+            "data-testid": import_constants.GLOBAL_HEADER_DATA_TESTID.SEARCH_TOGGLE_TRIGGER_BUTTON,
+            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)(
+          StyledSearchNavContainer,
+          {
+            getOwnerProps,
+            getOwnerPropsArguments,
+            id: panelId,
+            alignItems: "center",
+            cols: ["1fr", "1fr"],
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                StyledSearchInput,
+                {
+                  getOwnerProps,
+                  getOwnerPropsArguments,
+                  id: inputId,
+                  placeholder: placeholder || "Search...",
+                  value,
+                  clearable: true,
+                  ...onBlur && { onBlur },
+                  onChange: handleChange,
+                  onKeyDown: handleInputKeyDown,
+                  onClear
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_SearchToggleSpinButton.SearchToggleSpinButton,
+                {
+                  onNext,
+                  onPrevious,
+                  currentResultIndex,
+                  totalResults
+                }
+              )
+            ]
+          }
+        ) : null
+      ]
     }
   );
 };