@elliemae/ds-global-header 3.0.0-next.9 → 3.0.1

package/dist/esm/{outOfTheBox → parts/Toolbar/outOfTheBox}/AppPicker/AppPicker.js

@@ -27,24 +27,26 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
-import React2, { useState, useRef, useCallback, useMemo } from "react";
+import React2, { useState, useRef, useCallback } from "react";
 import { DSAppPicker } from "@elliemae/ds-app-picker";
-import { mergeRefs } from "@elliemae/ds-utilities";
+import { mergeRefs, getGlobalAttributes, useCallbackAfterRender } from "@elliemae/ds-utilities";
 import { MenuPicker } from "@elliemae/ds-icons";
-import { getDataProps } from "@elliemae/ds-props-helpers";
-import { Button } from "../../components/Toolbar/styles";
+import { StyledButton } from "../../../styles";
+import { DSGlobalHeaderDatatestid } from "../../../../exported-related";
 const AppPicker = (_a) => {
   var _b = _a, {
     label,
     id,
+    setRef,
     componentProps
   } = _b, otherProps = __objRest(_b, [
     "label",
     "id",
+    "setRef",
     "componentProps"
   ]);
   const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef(null);
+  const internalTriggerRef = useRef(null);
   const {
     apps,
     icon,
@@ -60,15 +62,17 @@ const AppPicker = (_a) => {
     triggerRef,
     triggerOnClick
   } = componentProps;
+  const schedule = useCallbackAfterRender();
+  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);
   const handleTriggerKeyDown = useCallback((e) => {
-    if (e.code === "Enter" || e.code === "Space") {
+    if (e.code === "Enter" || e.code === "Space" || e.code === "ArrowDown") {
       setIsOpen(true);
     }
   }, []);
   const handleAppPickerOnKeyDown = useCallback((e) => {
-    if (e.code === "Escape") {
+    if (e.key === "Escape") {
       setIsOpen(false);
-      buttonRef?.current?.focus();
+      schedule(focusTrigger);
     }
   }, []);
   const handleOnClickOutside = useCallback(() => {
@@ -77,20 +81,6 @@ const AppPicker = (_a) => {
   const handleOnClick = useCallback(() => {
     setIsOpen(true);
   }, []);
-  const renderTrigger = useMemo(() => ({ ref }) => /* @__PURE__ */ React2.createElement("div", {
-    ref
-  }, /* @__PURE__ */ React2.createElement(Button, __spreadValues({
-    onClick: triggerOnClick ?? handleOnClick,
-    onKeyDown: handleTriggerKeyDown,
-    ref: mergeRefs(buttonRef, triggerRef),
-    title: label,
-    "data-testid": "gh-toolbar-item",
-    id
-  }, getDataProps(otherProps)), /* @__PURE__ */ React2.createElement(MenuPicker, {
-    fill: "#FFF",
-    width: 20.73,
-    height: 20.73
-  }))), [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps]);
   return /* @__PURE__ */ React2.createElement(DSAppPicker, {
     apps,
     customApps,
@@ -100,7 +90,23 @@ const AppPicker = (_a) => {
     onKeyDown: userOnKeyDown ?? handleAppPickerOnKeyDown,
     actionRef,
     onClickOutside: userOnClickOutside ?? handleOnClickOutside,
-    renderTrigger: userRenderTrigger ?? renderTrigger,
+    renderTrigger: userRenderTrigger || (({ ref }) => /* @__PURE__ */ React2.createElement(StyledButton, __spreadValues({
+      onClick: triggerOnClick ?? handleOnClick,
+      onKeyDown: handleTriggerKeyDown,
+      ref: (buttonRef) => {
+        setRef(buttonRef);
+        mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);
+      },
+      "aria-label": label,
+      "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+      role: "menuitem",
+      "aria-haspopup": true,
+      "aria-expanded": userIsOpen ?? isOpen,
+      id
+    }, getGlobalAttributes(otherProps)), /* @__PURE__ */ React2.createElement(MenuPicker, {
+      width: 20.73,
+      height: 20.73
+    }))),
     isOpen: userIsOpen ?? isOpen,
     onClose,
     triggerRef

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useRef, useCallback } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs, getGlobalAttributes, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { StyledButton } from '../../../styles';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes';\n\nexport const AppPicker = ({\n  label,\n  id,\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderInternalsT.AppPickerProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalTriggerRef = useRef<HTMLButtonElement>(null);\n\n  const {\n    apps,\n    icon,\n    customApps,\n    sectionTitle,\n    customSectionTitle,\n    actionRef,\n    isOpen: userIsOpen,\n    onKeyDown: userOnKeyDown,\n    onClickOutside: userOnClickOutside,\n    renderTrigger: userRenderTrigger,\n    onClose,\n    triggerRef,\n    triggerOnClick,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n    if (e.code === 'Enter' || e.code === 'Space' || e.code === 'ArrowDown') {\n      setIsOpen(true);\n    }\n  }, []);\n\n  const handleAppPickerOnKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      setIsOpen(false);\n      schedule(focusTrigger);\n    }\n  }, []);\n\n  const handleOnClickOutside = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(() => {\n    setIsOpen(true);\n  }, []);\n\n  return (\n    <DSAppPicker\n      apps={apps}\n      customApps={customApps}\n      sectionTitle={sectionTitle}\n      customSectionTitle={customSectionTitle}\n      icon={icon}\n      onKeyDown={userOnKeyDown ?? handleAppPickerOnKeyDown}\n      actionRef={actionRef}\n      onClickOutside={userOnClickOutside ?? handleOnClickOutside}\n      renderTrigger={\n        userRenderTrigger ||\n        (({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) => (\n          <StyledButton\n            onClick={triggerOnClick ?? handleOnClick}\n            onKeyDown={handleTriggerKeyDown}\n            ref={(buttonRef: HTMLButtonElement) => {\n              setRef(buttonRef);\n              mergeRefs(internalTriggerRef, triggerRef, ref)(buttonRef);\n            }}\n            aria-label={label}\n            data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n            role=\"menuitem\"\n            aria-haspopup\n            aria-expanded={userIsOpen ?? isOpen}\n            id={id}\n            {...getGlobalAttributes(otherProps)}\n          >\n            <MenuPicker width={20.73} height={20.73} />\n          </StyledButton>\n        ))\n      }\n      isOpen={userIsOpen ?? isOpen}\n      onClose={onClose}\n      triggerRef={triggerRef}\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,YAAY,CAAC,OAMkC;AANlC,eACxB;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAJwB,IAKrB,uBALqB,IAKrB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,CAAC,QAAQ,aAAa,SAAkB,KAAK;AACnD,QAAM,qBAAqB,OAA0B,IAAI;AAEzD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,WAAW,uBAAuB;AAExC,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,uBAAmD,YAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,WAAW,EAAE,SAAS,aAAa;AACtE,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,2BAA2B,YAAY,CAAC,MAA2B;AACvE,QAAI,EAAE,QAAQ,UAAU;AACtB,gBAAU,KAAK;AACf,eAAS,YAAY;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAuB,YAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC,YAAY,MAAM;AAC/D,cAAU,IAAI;AAAA,EAChB,GAAG,CAAC,CAAC;AAEL,SACE,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B;AAAA,IACA,gBAAgB,sBAAsB;AAAA,IACtC,eACE,qBACC,EAAC,EAAE,UACF,qCAAC;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,KAAK,CAAC,cAAiC;AACrC,eAAO,SAAS;AAChB,kBAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,yBAAyB,QAAQ;AAAA,MAC9C,MAAK;AAAA,MACL,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,OACI,oBAAoB,UAAU,IAElC,qCAAC;AAAA,MAAW,OAAO;AAAA,MAAO,QAAQ;AAAA,KAAO,CAC3C;AAAA,IAGJ,QAAQ,cAAc;AAAA,IACtB;AAAA,IACA;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/esm/{outOfTheBox → parts/Toolbar/outOfTheBox}/PopupMenu/PopupMenu.js

@@ -27,13 +27,28 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
-import React2, { useState, useCallback, useMemo } from "react";
+import React2, { useState, useCallback } from "react";
+import { useGetGlobalAttributes } from "@elliemae/ds-utilities";
 import { DSPopperJS } from "@elliemae/ds-popperjs";
-import { PopupMenuContent } from "./PopupMenuContent";
-import { Button } from "../../components/Toolbar/styles";
-import { getDataProps } from "@elliemae/ds-props-helpers";
+import { PopupMenuContent } from "./menuContent/PopupMenuContent";
+import { StyledButton } from "../../../styles";
+import { DSGlobalHeaderDatatestid } from "../../../../exported-related";
 const PopupMenu = (_a) => {
-  var _b = _a, { Icon, title, onClick, id, componentProps } = _b, otherProps = __objRest(_b, ["Icon", "title", "onClick", "id", "componentProps"]);
+  var _b = _a, {
+    Icon,
+    title,
+    onClick,
+    id,
+    setRef,
+    componentProps
+  } = _b, otherProps = __objRest(_b, [
+    "Icon",
+    "title",
+    "onClick",
+    "id",
+    "setRef",
+    "componentProps"
+  ]);
   const [isOpen, setIsOpen] = useState(false);
   const [buttonRef, setButtonRef] = useState(null);
   const {
@@ -44,8 +59,8 @@ const PopupMenu = (_a) => {
     options,
     closeOnClick
   } = componentProps;
-  const handleKeyPress = useCallback((e) => {
-    if (e.code === "Enter" || e.code === "Space") {
+  const handleOnKeyDown = useCallback((e) => {
+    if (e.code === "ArrowDown") {
       setIsOpen(true);
     }
     if (onKeyPress)
@@ -60,34 +75,42 @@ const PopupMenu = (_a) => {
   const handleTriggerOnClick = useCallback((e) => {
     if (userIsOpen === void 0)
       setIsOpen(true);
-    onClick(e);
+    if (onClick)
+      onClick(e);
   }, [onClick, userIsOpen]);
   const handleItemClick = useCallback(() => {
     if (closeOnClick && userIsOpen === void 0)
       handleOnClose();
   }, [closeOnClick, handleOnClose, userIsOpen]);
-  const content = useMemo(() => /* @__PURE__ */ React2.createElement(PopupMenuContent, {
-    options,
-    onItemClick: handleItemClick,
-    onClose: handleOnClose,
-    popupOnKeyPress
-  }), [options, handleItemClick, handleOnClose, popupOnKeyPress]);
-  return /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement(Button, __spreadValues({
+  const handleRefs = useCallback((ref) => {
+    setRef(ref);
+    setButtonRef(ref);
+  }, []);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(StyledButton, __spreadValues({
     onClick: handleTriggerOnClick,
-    onKeyPress: handleKeyPress,
-    title,
-    ref: setButtonRef,
-    "data-testid": "gh-toolbar-item",
+    onKeyDown: handleOnKeyDown,
+    "aria-label": title,
+    ref: handleRefs,
+    "data-testid": DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+    role: "menuitem",
+    "aria-haspopup": true,
+    "aria-expanded": userIsOpen ?? isOpen,
     id
-  }, getDataProps(otherProps)), Icon && /* @__PURE__ */ React2.createElement(Icon, {
-    fill: "#FFF",
+  }, useGetGlobalAttributes(otherProps)), Icon && /* @__PURE__ */ React2.createElement(Icon, {
     size: "m"
   })), /* @__PURE__ */ React2.createElement(DSPopperJS, {
     referenceElement: buttonRef,
     showPopover: userIsOpen ?? isOpen,
     closeContextMenu: handleOnClose,
-    onClickOutside
-  }, content));
+    onClickOutside,
+    withoutPortal: true
+  }, /* @__PURE__ */ React2.createElement(PopupMenuContent, {
+    options,
+    onItemClick: handleItemClick,
+    onClose: handleOnClose,
+    setIsOpen,
+    popupOnKeyPress
+  })));
 };
 export {
   PopupMenu

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './menuContent/PopupMenuContent';\nimport { StyledButton } from '../../../styles';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes';\n\nexport const PopupMenu = ({\n  Icon,\n  title,\n  onClick,\n  id,\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderInternalsT.PopupProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n\n  const {\n    onClickOutside = () => null,\n    onKeyPress,\n    popupOnKeyPress,\n    isOpen: userIsOpen,\n    options,\n    closeOnClick,\n  } = componentProps;\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'ArrowDown') {\n        setIsOpen(true);\n      }\n      if (onKeyPress) onKeyPress(e);\n    },\n    [onKeyPress],\n  );\n\n  const handleOnClose = useCallback(() => {\n    if (userIsOpen === undefined) {\n      setIsOpen(false);\n    }\n    buttonRef?.focus();\n  }, [buttonRef, userIsOpen]);\n\n  const handleTriggerOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleItemClick = useCallback(() => {\n    if (closeOnClick && userIsOpen === undefined) handleOnClose();\n  }, [closeOnClick, handleOnClose, userIsOpen]);\n\n  const handleRefs = useCallback((ref) => {\n    setRef(ref);\n    setButtonRef(ref);\n  }, []);\n\n  return (\n    <>\n      <StyledButton\n        onClick={handleTriggerOnClick}\n        onKeyDown={handleOnKeyDown}\n        aria-label={title}\n        ref={handleRefs}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n        role=\"menuitem\"\n        aria-haspopup\n        aria-expanded={userIsOpen ?? isOpen}\n        id={id}\n        {...useGetGlobalAttributes(otherProps)}\n      >\n        {Icon && <Icon size=\"m\" />}\n      </StyledButton>\n      <DSPopperJS\n        referenceElement={buttonRef}\n        showPopover={userIsOpen ?? isOpen}\n        closeContextMenu={handleOnClose}\n        onClickOutside={onClickOutside}\n        withoutPortal\n      >\n        <PopupMenuContent\n          options={options}\n          onItemClick={handleItemClick}\n          onClose={handleOnClose}\n          setIsOpen={setIsOpen}\n          popupOnKeyPress={popupOnKeyPress}\n        />\n      </DSPopperJS>\n    </>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,YAAY,CAAC,OAQ8B;AAR9B,eACxB;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MANwB,IAOrB,uBAPqB,IAOrB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,CAAC,QAAQ,aAAa,SAAkB,KAAK;AACnD,QAAM,CAAC,WAAW,gBAAgB,SAAmC,IAAI;AAEzE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,SAAS,aAAa;AAC1B,gBAAU,IAAI;AAAA,IAChB;AACA,QAAI;AAAY,iBAAW,CAAC;AAAA,EAC9B,GACA,CAAC,UAAU,CACb;AAEA,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU,KAAK;AAAA,IACjB;AACA,eAAW,MAAM;AAAA,EACnB,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,uBAAuB,YAC3B,CAAC,MAAwB;AACvB,QAAI,eAAe;AAAW,gBAAU,IAAI;AAC5C,QAAI;AAAS,cAAQ,CAAC;AAAA,EACxB,GACA,CAAC,SAAS,UAAU,CACtB;AAEA,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW,oBAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,aAAa,YAAY,CAAC,QAAQ;AACtC,WAAO,GAAG;AACV,iBAAa,GAAG;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,SACE,4DACE,qCAAC;AAAA,IACC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAY;AAAA,IACZ,KAAK;AAAA,IACL,eAAa,yBAAyB,QAAQ;AAAA,IAC9C,MAAK;AAAA,IACL,iBAAa;AAAA,IACb,iBAAe,cAAc;AAAA,IAC7B;AAAA,KACI,uBAAuB,UAAU,IAEpC,QAAQ,qCAAC;AAAA,IAAK,MAAK;AAAA,GAAI,CAC1B,GACA,qCAAC;AAAA,IACC,kBAAkB;AAAA,IAClB,aAAa,cAAc;AAAA,IAC3B,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAa;AAAA,KAEb,qCAAC;AAAA,IACC;AAAA,IACA,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,IACA;AAAA,GACF,CACF,CACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,103 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import React2, { useContext } from "react";
+import { getGlobalAttributes } from "@elliemae/ds-utilities";
+import { StyledSeparator, StyledItemButton, StyledLabel, StyledList, StyledItemContainer } from "./styles";
+import { DSGlobalHeaderContext } from "../../../../../DSGlobalHeaderContext";
+import { DSGlobalHeaderDatatestid } from "../../../../../exported-related";
+import { usePopupMenuContent } from "./usePopupMenuContent";
+const PopupMenuContent = React2.memo(({
+  options,
+  onItemClick,
+  onClose,
+  popupOnKeyPress,
+  setIsOpen
+}) => {
+  const { instanceUID } = useContext(DSGlobalHeaderContext);
+  const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });
+  return /* @__PURE__ */ React2.createElement(StyledList, {
+    ref: menuRef,
+    role: "menu",
+    "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST
+  }, options.map((option) => {
+    const _a = option, { type, Icon, label = "", onClick, Content, id } = _a, rest = __objRest(_a, ["type", "Icon", "label", "onClick", "Content", "id"]);
+    const globalAttrs = 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__ */ React2.createElement(StyledSeparator, __spreadValues({
+          key: `${instanceUID}-separator-${label}`,
+          role: "none",
+          "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR
+        }, globalAttrs));
+      case "custom":
+        return /* @__PURE__ */ React2.createElement(StyledItemContainer, {
+          key: `${instanceUID}-popup-${label}`,
+          role: "menuitem",
+          "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM
+        }, /* @__PURE__ */ React2.createElement(StyledItemButton, __spreadValues({
+          ref: setRef,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          id,
+          "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON
+        }, globalAttrs), Content && /* @__PURE__ */ React2.createElement(Content, null)));
+      default:
+        return /* @__PURE__ */ React2.createElement(StyledItemContainer, {
+          key: `${instanceUID}-popup-${label}`,
+          role: "menuitem",
+          "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM
+        }, /* @__PURE__ */ React2.createElement(StyledItemButton, __spreadValues({
+          ref: setRef,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          id,
+          "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON
+        }, globalAttrs), Icon && /* @__PURE__ */ React2.createElement(Icon, null), label && /* @__PURE__ */ React2.createElement(StyledLabel, {
+          "data-testid": DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL
+        }, label)));
+    }
+  }));
+});
+export {
+  PopupMenuContent
+};
+//# sourceMappingURL=PopupMenuContent.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-utilities';\nimport { StyledSeparator, StyledItemButton, StyledLabel, StyledList, StyledItemContainer } from './styles';\nimport { DSGlobalHeaderContext } from '../../../../../DSGlobalHeaderContext';\nimport { DSGlobalHeaderDatatestid } from '../../../../../exported-related';\nimport { usePopupMenuContent } from './usePopupMenuContent';\nimport type { DSGlobalHeaderInternalsT } from '../../../../../sharedTypes';\n\nexport const PopupMenuContent = React.memo(\n  ({\n    options,\n    onItemClick,\n    onClose,\n    popupOnKeyPress,\n    setIsOpen,\n  }: DSGlobalHeaderInternalsT.PopupMenuContentProps): JSX.Element => {\n    const { instanceUID } = useContext(DSGlobalHeaderContext);\n\n    const { menuRef, setRef, keyboardNavigation } = usePopupMenuContent({ setIsOpen });\n\n    return (\n      <StyledList ref={menuRef} role=\"menu\" data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.LIST}>\n        {options.map((option) => {\n          const { type, Icon, label = '', onClick, Content, id, ...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                    ref={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    id={id}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n                    {...globalAttrs}\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                    ref={setRef}\n                    onClick={handleClick}\n                    onKeyDown={handleKeyDown}\n                    id={id}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON}\n                    {...globalAttrs}\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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,mBAAmB,OAAM,KACpC,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACiE;AACjE,QAAM,EAAE,gBAAgB,WAAW,qBAAqB;AAExD,QAAM,EAAE,SAAS,QAAQ,uBAAuB,oBAAoB,EAAE,UAAU,CAAC;AAEjF,SACE,qCAAC;AAAA,IAAW,KAAK;AAAA,IAAS,MAAK;AAAA,IAAO,eAAa,yBAAyB,QAAQ,WAAW;AAAA,KAC5F,QAAQ,IAAI,CAAC,WAAW;AACvB,UAAkE,aAA1D,QAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,OAAgB,IAAT,iBAAS,IAAT,CAAjD,QAAM,QAAM,SAAY,WAAS,WAAS;AAElD,UAAM,cAAc,oBAAoB,IAAI;AAE5C,UAAM,cAAc,CAAC,MAAwB;AAC3C,kBAAY;AACZ,UAAI;AAAS,gBAAQ,CAAC;AAAA,IACxB;AAEA,UAAM,gBAAgB,CAAC,MAA2B;AAChD,yBAAmB,CAAC;AACpB,UAAI,EAAE,SAAS;AAAU,gBAAQ;AACjC,UAAI;AAAiB,wBAAgB,CAAC;AAAA,IACxC;AAEA,YAAQ;AAAA,WACD;AACH,eACE,qCAAC;AAAA,UACC,KAAK,GAAG,yBAAyB;AAAA,UACjC,MAAK;AAAA,UACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,WACrD,YACN;AAAA,WAEC;AACH,eACE,qCAAC;AAAA,UACC,KAAK,GAAG,qBAAqB;AAAA,UAC7B,MAAK;AAAA,UACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,WAEzD,qCAAC;AAAA,UACC,KAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW;AAAA,UACX;AAAA,UACA,eAAa,yBAAyB,QAAQ,WAAW;AAAA,WACrD,cAEH,WAAW,qCAAC,aAAQ,CACvB,CACF;AAAA;AAGF,eACE,qCAAC;AAAA,UACC,KAAK,GAAG,qBAAqB;AAAA,UAC7B,MAAK;AAAA,UACL,eAAa,yBAAyB,QAAQ,WAAW;AAAA,WAEzD,qCAAC;AAAA,UACC,KAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW;AAAA,UACX;AAAA,UACA,eAAa,yBAAyB,QAAQ,WAAW;AAAA,WACrD,cAEH,QAAQ,qCAAC,UAAK,GACd,SACC,qCAAC;AAAA,UAAY,eAAa,yBAAyB,QAAQ,WAAW;AAAA,WACnE,KACH,CAEJ,CACF;AAAA;AAAA,EAGR,CAAC,CACH;AAEJ,CACF;",
+  "names": []
+}

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { styled } from "@elliemae/ds-system";
+import { COMPONENT_NAME, slots } from "../../../../../exported-related/theming";
+const StyledList = styled("ul", { name: COMPONENT_NAME, slot: slots.MENUBAR.POPUP_MENU.LIST })`
+  padding: 5px 0px;
+  margin: 0;
+  background: white;
+`;
+const StyledItemContainer = styled("li", { name: COMPONENT_NAME, slot: slots.MENUBAR.POPUP_MENU.ITEM })`
+  list-style: none;
+`;
+const StyledItemButton = styled("button", { name: COMPONENT_NAME, slot: slots.MENUBAR.POPUP_MENU.ITEM_BUTTON })`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0 20px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  background-color: transparent;
+  outline: none;
+  :hover,
+  :focus {
+    border: ${({ theme }) => `1px solid ${theme.colors.brand[600]}`};
+  }
+`;
+const StyledLabel = styled("span", { name: COMPONENT_NAME, slot: slots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL })`
+  width: 100%;
+  font-size: 14px;
+  margin: 10px;
+`;
+const StyledSeparator = styled("div", { name: COMPONENT_NAME, slot: slots.MENUBAR.POPUP_MENU.SEPARATOR })`
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #ccc;
+`;
+export {
+  StyledItemButton,
+  StyledItemContainer,
+  StyledLabel,
+  StyledList,
+  StyledSeparator
+};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { COMPONENT_NAME, slots } from '../../../../../exported-related/theming';\n\nexport const StyledList = styled('ul', { name: COMPONENT_NAME, slot: slots.MENUBAR.POPUP_MENU.LIST })`\n  padding: 5px 0px;\n  margin: 0;\n  background: white;\n`;\n\nexport const StyledItemContainer = styled('li', { name: COMPONENT_NAME, slot: slots.MENUBAR.POPUP_MENU.ITEM })`\n  list-style: none;\n`;\n\nexport const StyledItemButton = styled('button', { name: COMPONENT_NAME, slot: slots.MENUBAR.POPUP_MENU.ITEM_BUTTON })`\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', { name: COMPONENT_NAME, slot: slots.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL })`\n  width: 100%;\n  font-size: 14px;\n  margin: 10px;\n`;\n\nexport const StyledSeparator = styled('div', { name: COMPONENT_NAME, slot: slots.MENUBAR.POPUP_MENU.SEPARATOR })`\n  width: 100%;\n  border: none;\n  border-bottom: 1px solid #ccc;\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,MAAM,QAAQ,WAAW,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAM7F,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,gBAAgB,MAAM,MAAM,QAAQ,WAAW,KAAK,CAAC;AAAA;AAAA;AAItG,MAAM,mBAAmB,OAAO,UAAU,EAAE,MAAM,gBAAgB,MAAM,MAAM,QAAQ,WAAW,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAYvG,CAAC,EAAE,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA;AAAA;AAItD,MAAM,cAAc,OAAO,QAAQ,EAAE,MAAM,gBAAgB,MAAM,MAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAM7G,MAAM,kBAAkB,OAAO,OAAO,EAAE,MAAM,gBAAgB,MAAM,MAAM,QAAQ,WAAW,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { useRef, useCallback, useEffect } from "react";
+const usePopupMenuContent = ({ setIsOpen }) => {
+  const menuRef = useRef(null);
+  const allMenuItemsRef = useRef([]);
+  const setRef = useCallback((ref) => {
+    if (ref && !allMenuItemsRef.current.includes(ref)) {
+      allMenuItemsRef.current.push(ref);
+    }
+    allMenuItemsRef.current.forEach((item, index) => {
+      if (index === 0) {
+        item?.setAttribute?.("tabindex", "0");
+      } else {
+        item?.setAttribute?.("tabindex", "-1");
+      }
+    });
+  }, []);
+  useEffect(() => {
+    allMenuItemsRef.current?.[0]?.focus();
+  }, []);
+  const keyboardNavigation = useCallback((e) => {
+    if (e.code === "Tab") {
+      setIsOpen(false);
+    } else {
+      const currentIndex = allMenuItemsRef.current.indexOf(e.target);
+      const allRefsLength = allMenuItemsRef.current.length;
+      if (e.key === "ArrowDown") {
+        if (currentIndex < allRefsLength - 1) {
+          allMenuItemsRef.current[currentIndex + 1]?.focus?.();
+        } else {
+          allMenuItemsRef.current[0]?.focus?.();
+        }
+      }
+      if (e.key === "ArrowUp") {
+        if (currentIndex === 0) {
+          allMenuItemsRef.current[allRefsLength - 1]?.focus?.();
+        } else {
+          allMenuItemsRef.current[currentIndex - 1]?.focus?.();
+        }
+      }
+    }
+  }, [setIsOpen]);
+  return {
+    menuRef,
+    setRef,
+    keyboardNavigation
+  };
+};
+export {
+  usePopupMenuContent
+};
+//# sourceMappingURL=usePopupMenuContent.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/usePopupMenuContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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<HTMLDivElement>(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] as HTMLButtonElement)?.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"],
+  "mappings": "AAAA;ACAA;AAMO,MAAM,sBAAsB,CAAC,EAAE,gBAAsC;AAC1E,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,kBAAkB,OAA4B,CAAC,CAAC;AAEtD,QAAM,SAAS,YAAY,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,YAAU,MAAM;AACd,IAAC,gBAAgB,UAAU,IAA0B,MAAM;AAAA,EAC7D,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YACzB,CAAC,MAA2B;AAC1B,QAAI,EAAE,SAAS,OAAO;AACpB,gBAAU,KAAK;AAAA,IACjB,OAAO;AACL,YAAM,eAAe,gBAAgB,QAAQ,QAAQ,EAAE,MAA2B;AAClF,YAAM,gBAAgB,gBAAgB,QAAQ;AAC9C,UAAI,EAAE,QAAQ,aAAa;AACzB,YAAI,eAAe,gBAAgB,GAAG;AACpC,0BAAgB,QAAQ,eAAe,IAAI,QAAQ;AAAA,QACrD,OAAO;AACL,0BAAgB,QAAQ,IAAI,QAAQ;AAAA,QACtC;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,WAAW;AACvB,YAAI,iBAAiB,GAAG;AACtB,0BAAgB,QAAQ,gBAAgB,IAAI,QAAQ;AAAA,QACtD,OAAO;AACL,0BAAgB,QAAQ,eAAe,IAAI,QAAQ;AAAA,QACrD;AAAA,MACF;AAAA,IACF;AAAA,EACF,GACA,CAAC,SAAS,CACZ;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/{outOfTheBox → parts/Toolbar/outOfTheBox}/SearchToggle/SearchToggle.js

@@ -29,16 +29,24 @@ var __objRest = (source, exclude) => {
 import * as React from "react";
 import React2, { useState, useCallback, useRef } from "react";
 import { Search } from "@elliemae/ds-icons";
-import { getDataProps } from "@elliemae/ds-props-helpers";
-import { DSIconColors } from "@elliemae/ds-icon";
 import { DSNavSearchBox } from "@elliemae/ds-form";
+import { getGlobalAttributes, mergeRefs, useCallbackAfterRender } from "@elliemae/ds-utilities";
 import { StyledNavSearchBoxContainer } from "./styles";
-import { Button } from "../../components/Toolbar/styles";
+import { StyledButton } from "../../../styles";
+import { DSGlobalHeaderDatatestid } from "../../../../exported-related";
 const SearchToggle = (_a) => {
-  var _b = _a, { id, componentProps } = _b, otherProps = __objRest(_b, ["id", "componentProps"]);
+  var _b = _a, {
+    id,
+    setRef,
+    componentProps
+  } = _b, otherProps = __objRest(_b, [
+    "id",
+    "setRef",
+    "componentProps"
+  ]);
   const [isOpen, setIsOpen] = useState(false);
-  const inputRef = useRef(null);
-  const triggerRef = useRef(null);
+  const internalInputRef = useRef(null);
+  const internalTriggerRef = useRef(null);
   const containerRef = useRef(null);
   const {
     onNext,
@@ -52,8 +60,12 @@ const SearchToggle = (_a) => {
     onClear,
     isOpen: userIsOpen,
     onKeyDown,
-    onClick
+    onClick,
+    triggerRef,
+    searchContainerRef
   } = componentProps;
+  const schedule = useCallbackAfterRender();
+  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);
   const handleOnClick = useCallback((e) => {
     if (userIsOpen === void 0)
       setIsOpen(true);
@@ -62,25 +74,33 @@ const SearchToggle = (_a) => {
   }, [onClick, userIsOpen]);
   const handleOnKeyDown = useCallback((e) => {
     if (userIsOpen === void 0) {
-      if (e.code === "Escape") {
+      if (e.key === "Escape") {
         setIsOpen(false);
-        setTimeout(() => triggerRef.current?.focus());
+        schedule(focusTrigger);
       }
     }
     if (onKeyDown)
       onKeyDown(e);
-  }, [onKeyDown, userIsOpen]);
+  }, [focusTrigger, onKeyDown, schedule, userIsOpen]);
   const handleOnBlur = useCallback(() => {
-    setTimeout(() => {
-      const contains = containerRef.current?.contains(document.activeElement);
-      if (value === "" && !contains)
-        setIsOpen(false);
-    });
-  }, [value]);
+    const contains = containerRef.current?.contains(document.activeElement);
+    if (value === "" && !contains)
+      setIsOpen(false);
+    schedule(focusTrigger);
+  }, [focusTrigger, schedule, value]);
+  const handleNavInputRefs = useCallback((searchNavRef) => {
+    setRef(searchNavRef);
+    internalInputRef.current = searchNavRef;
+  }, [setRef]);
+  const handleTriggerRefs = useCallback((buttonRef) => {
+    mergeRefs(triggerRef, internalTriggerRef)(buttonRef);
+    setRef(buttonRef);
+  }, [setRef, triggerRef]);
   return userIsOpen || isOpen ? /* @__PURE__ */ React2.createElement(StyledNavSearchBoxContainer, {
     onKeyDown: handleOnKeyDown,
-    ref: containerRef,
-    onBlur: handleOnBlur
+    ref: mergeRefs(searchContainerRef, containerRef),
+    onBlur: handleOnBlur,
+    "data-testid": DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER
   }, /* @__PURE__ */ React2.createElement(DSNavSearchBox, {
     onNext,
     onPrevious,
@@ -91,15 +111,15 @@ const SearchToggle = (_a) => {
     onChange,
     value,
     onBlur,
-    innerRef: inputRef,
+    innerRef: handleNavInputRefs,
     autoFocus: true
-  })) : /* @__PURE__ */ React2.createElement(Button, __spreadValues({
+  })) : /* @__PURE__ */ React2.createElement(StyledButton, __spreadValues({
     onClick: handleOnClick,
-    ref: triggerRef,
-    id
-  }, getDataProps(otherProps)), /* @__PURE__ */ React2.createElement(Search, {
-    color: DSIconColors.WHITE
-  }));
+    ref: handleTriggerRefs,
+    id,
+    role: "menuitem",
+    "data-testid": DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON
+  }, getGlobalAttributes(otherProps)), /* @__PURE__ */ React2.createElement(Search, null));
 };
 export {
   SearchToggle

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useRef } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\nimport { getGlobalAttributes, mergeRefs, useCallbackAfterRender } from '@elliemae/ds-utilities';\nimport { StyledNavSearchBoxContainer } from './styles';\nimport { StyledButton } from '../../../styles';\nimport { DSGlobalHeaderDatatestid } from '../../../../exported-related';\nimport type { DSGlobalHeaderInternalsT } from '../../../../sharedTypes';\n\nexport const SearchToggle = ({\n  id,\n  setRef,\n  componentProps,\n  ...otherProps\n}: DSGlobalHeaderInternalsT.SearchToggleProps): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const internalTriggerRef = useRef<HTMLButtonElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    onNext,\n    onPrevious,\n    currentResultIndex,\n    totalResults,\n    placeholder,\n    value,\n    onChange,\n    onBlur,\n    onClear,\n    isOpen: userIsOpen,\n    onKeyDown,\n    onClick,\n    triggerRef,\n    searchContainerRef,\n  } = componentProps;\n\n  const schedule = useCallbackAfterRender();\n\n  const focusTrigger = useCallback(() => internalTriggerRef.current?.focus(), []);\n\n  const handleOnClick = useCallback(\n    (e: React.MouseEvent) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (userIsOpen === undefined) {\n        if (e.key === 'Escape') {\n          setIsOpen(false);\n          schedule(focusTrigger);\n        }\n      }\n      if (onKeyDown) onKeyDown(e);\n    },\n    [focusTrigger, onKeyDown, schedule, userIsOpen],\n  );\n\n  const handleOnBlur = useCallback(() => {\n    const contains = containerRef.current?.contains(document.activeElement);\n    if (value === '' && !contains) setIsOpen(false);\n    schedule(focusTrigger);\n  }, [focusTrigger, schedule, value]);\n\n  const handleNavInputRefs = useCallback(\n    (searchNavRef: HTMLInputElement) => {\n      setRef(searchNavRef);\n      internalInputRef.current = searchNavRef;\n    },\n    [setRef],\n  );\n\n  const handleTriggerRefs = useCallback(\n    (buttonRef: HTMLButtonElement) => {\n      mergeRefs(triggerRef, internalTriggerRef)(buttonRef);\n      setRef(buttonRef);\n    },\n    [setRef, triggerRef],\n  );\n\n  return userIsOpen || isOpen ? (\n    <StyledNavSearchBoxContainer\n      onKeyDown={handleOnKeyDown}\n      ref={mergeRefs(searchContainerRef, containerRef)}\n      onBlur={handleOnBlur}\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER}\n    >\n      <DSNavSearchBox\n        onNext={onNext}\n        onPrevious={onPrevious}\n        currentResultIndex={currentResultIndex}\n        totalResults={totalResults}\n        onClear={onClear}\n        placeholder={placeholder}\n        onChange={onChange}\n        value={value}\n        onBlur={onBlur}\n        innerRef={handleNavInputRefs}\n        autoFocus\n      />\n    </StyledNavSearchBoxContainer>\n  ) : (\n    <StyledButton\n      onClick={handleOnClick}\n      ref={handleTriggerRefs}\n      id={id}\n      role=\"menuitem\"\n      data-testid={DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON}\n      {...getGlobalAttributes(otherProps)}\n    >\n      <Search />\n    </StyledButton>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,eAAe,CAAC,OAKkC;AALlC,eAC3B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,MAH2B,IAIxB,uBAJwB,IAIxB;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,CAAC,QAAQ,aAAa,SAAkB,KAAK;AACnD,QAAM,mBAAmB,OAAgC,IAAI;AAC7D,QAAM,qBAAqB,OAAiC,IAAI;AAChE,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,WAAW,uBAAuB;AAExC,QAAM,eAAe,YAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,gBAAgB,YACpB,CAAC,MAAwB;AACvB,QAAI,eAAe;AAAW,gBAAU,IAAI;AAC5C,QAAI;AAAS,cAAQ,CAAC;AAAA,EACxB,GACA,CAAC,SAAS,UAAU,CACtB;AAEA,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,eAAe,QAAW;AAC5B,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,iBAAS,YAAY;AAAA,MACvB;AAAA,IACF;AACA,QAAI;AAAW,gBAAU,CAAC;AAAA,EAC5B,GACA,CAAC,cAAc,WAAW,UAAU,UAAU,CAChD;AAEA,QAAM,eAAe,YAAY,MAAM;AACrC,UAAM,WAAW,aAAa,SAAS,SAAS,SAAS,aAAa;AACtE,QAAI,UAAU,MAAM,CAAC;AAAU,gBAAU,KAAK;AAC9C,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,cAAc,UAAU,KAAK,CAAC;AAElC,QAAM,qBAAqB,YACzB,CAAC,iBAAmC;AAClC,WAAO,YAAY;AACnB,qBAAiB,UAAU;AAAA,EAC7B,GACA,CAAC,MAAM,CACT;AAEA,QAAM,oBAAoB,YACxB,CAAC,cAAiC;AAChC,cAAU,YAAY,kBAAkB,EAAE,SAAS;AACnD,WAAO,SAAS;AAAA,EAClB,GACA,CAAC,QAAQ,UAAU,CACrB;AAEA,SAAO,cAAc,SACnB,qCAAC;AAAA,IACC,WAAW;AAAA,IACX,KAAK,UAAU,oBAAoB,YAAY;AAAA,IAC/C,QAAQ;AAAA,IACR,eAAa,yBAAyB,QAAQ,cAAc;AAAA,KAE5D,qCAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAS;AAAA,GACX,CACF,IAEA,qCAAC;AAAA,IACC,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,IACA,MAAK;AAAA,IACL,eAAa,yBAAyB,QAAQ,cAAc;AAAA,KACxD,oBAAoB,UAAU,IAElC,qCAAC,YAAO,CACV;AAEJ;",
+  "names": []
+}

package/dist/esm/{outOfTheBox → parts/Toolbar/outOfTheBox}/SearchToggle/styles.js

@@ -1,9 +1,12 @@
 import * as React from "react";
-import styled from "styled-components";
-const StyledNavSearchBoxContainer = styled.div`
-  background: white;
+import { styled } from "@elliemae/ds-system";
+import { COMPONENT_NAME, slots } from "../../../../exported-related/theming";
+const StyledNavSearchBoxContainer = styled("div", {
+  name: COMPONENT_NAME,
+  slot: slots.MENUBAR.SEARCH_TOGGLE.CONTAINER
+})`
+  background: ${({ theme }) => theme.colors.neutral["000"]};
   position: relative;
-
   min-width: 260px;
 
   & .em-ds-button {

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { COMPONENT_NAME, slots } from '../../../../exported-related/theming';\n\nexport const StyledNavSearchBoxContainer = styled('div', {\n  name: COMPONENT_NAME,\n  slot: slots.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"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,8BAA8B,OAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,MAAM,QAAQ,cAAc;AACpC,CAAC;AAAA,gBACe,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;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;",
+  "names": []
+}