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

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

@@ -0,0 +1,66 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styles_exports = {};
+__export(styles_exports, {
+  StyledItemButton: () => StyledItemButton,
+  StyledItemContainer: () => StyledItemContainer,
+  StyledLabel: () => StyledLabel,
+  StyledList: () => StyledList,
+  StyledSeparator: () => StyledSeparator
+});
+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");
+const StyledList = (0, import_ds_system.styled)("ul", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.MENUBAR.POPUP_MENU.LIST })`
+  padding: 5px 0px;
+  margin: 0;
+  background: white;
+`;
+const StyledItemContainer = (0, import_ds_system.styled)("li", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.MENUBAR.POPUP_MENU.ITEM })`
+  list-style: none;
+`;
+const StyledItemButton = (0, import_ds_system.styled)("button", { name: import_theming.COMPONENT_NAME, slot: import_theming.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 = (0, import_ds_system.styled)("span", { name: import_theming.COMPONENT_NAME, slot: import_theming.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.COMPONENT_NAME, slot: import_theming.slots.MENUBAR.POPUP_MENU.SEPARATOR })`
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #ccc;
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +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 { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAsC;AAE/B,MAAM,aAAa,6BAAO,MAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,QAAQ,WAAW,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAM7F,MAAM,sBAAsB,6BAAO,MAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,QAAQ,WAAW,KAAK,CAAC;AAAA;AAAA;AAItG,MAAM,mBAAmB,6BAAO,UAAU,EAAE,MAAM,+BAAgB,MAAM,qBAAM,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,6BAAO,QAAQ,EAAE,MAAM,+BAAgB,MAAM,qBAAM,QAAQ,WAAW,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAM7G,MAAM,kBAAkB,6BAAO,OAAO,EAAE,MAAM,+BAAgB,MAAM,qBAAM,QAAQ,WAAW,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

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

@@ -0,0 +1,74 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePopupMenuContent_exports = {};
+__export(usePopupMenuContent_exports, {
+  usePopupMenuContent: () => usePopupMenuContent
+});
+module.exports = __toCommonJS(usePopupMenuContent_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const usePopupMenuContent = ({ setIsOpen }) => {
+  const menuRef = (0, import_react.useRef)(null);
+  const allMenuItemsRef = (0, import_react.useRef)([]);
+  const setRef = (0, import_react.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");
+      }
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    allMenuItemsRef.current?.[0]?.focus();
+  }, []);
+  const keyboardNavigation = (0, import_react.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
+  };
+};
+//# sourceMappingURL=usePopupMenuContent.js.map

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

@@ -0,0 +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<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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+C;AAMxC,MAAM,sBAAsB,CAAC,EAAE,gBAAsC;AAC1E,QAAM,UAAU,yBAAuB,IAAI;AAC3C,QAAM,kBAAkB,yBAA4B,CAAC,CAAC;AAEtD,QAAM,SAAS,8BAAY,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,IAAC,gBAAgB,UAAU,IAA0B,MAAM;AAAA,EAC7D,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,8BACzB,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/cjs/{outOfTheBox → parts/Toolbar/outOfTheBox}/SearchToggle/SearchToggle.js

@@ -18,7 +18,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -35,39 +34,42 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var SearchToggle_exports = {};
 __export(SearchToggle_exports, {
   SearchToggle: () => SearchToggle
 });
+module.exports = __toCommonJS(SearchToggle_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_ds_icon = require("@elliemae/ds-icon");
 var import_ds_form = require("@elliemae/ds-form");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_styles = require("./styles");
-var import_styles2 = require("../../components/Toolbar/styles");
+var import_styles2 = require("../../../styles");
+var import_exported_related = require("../../../../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] = (0, import_react.useState)(false);
-  const inputRef = (0, import_react.useRef)(null);
-  const triggerRef = (0, import_react.useRef)(null);
+  const internalInputRef = (0, import_react.useRef)(null);
+  const internalTriggerRef = (0, import_react.useRef)(null);
   const containerRef = (0, import_react.useRef)(null);
   const {
     onNext,
@@ -81,8 +83,12 @@ const SearchToggle = (_a) => {
     onClear,
     isOpen: userIsOpen,
     onKeyDown,
-    onClick
+    onClick,
+    triggerRef,
+    searchContainerRef
   } = componentProps;
+  const schedule = (0, import_ds_utilities.useCallbackAfterRender)();
+  const focusTrigger = (0, import_react.useCallback)(() => internalTriggerRef.current?.focus(), []);
   const handleOnClick = (0, import_react.useCallback)((e) => {
     if (userIsOpen === void 0)
       setIsOpen(true);
@@ -91,25 +97,33 @@ const SearchToggle = (_a) => {
   }, [onClick, userIsOpen]);
   const handleOnKeyDown = (0, import_react.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 = (0, import_react.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 = (0, import_react.useCallback)((searchNavRef) => {
+    setRef(searchNavRef);
+    internalInputRef.current = searchNavRef;
+  }, [setRef]);
+  const handleTriggerRefs = (0, import_react.useCallback)((buttonRef) => {
+    (0, import_ds_utilities.mergeRefs)(triggerRef, internalTriggerRef)(buttonRef);
+    setRef(buttonRef);
+  }, [setRef, triggerRef]);
   return userIsOpen || isOpen ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledNavSearchBoxContainer, {
     onKeyDown: handleOnKeyDown,
-    ref: containerRef,
-    onBlur: handleOnBlur
+    ref: (0, import_ds_utilities.mergeRefs)(searchContainerRef, containerRef),
+    onBlur: handleOnBlur,
+    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.CONTAINER
   }, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSNavSearchBox, {
     onNext,
     onPrevious,
@@ -120,15 +134,14 @@ const SearchToggle = (_a) => {
     onChange,
     value,
     onBlur,
-    innerRef: inputRef,
+    innerRef: handleNavInputRefs,
     autoFocus: true
-  })) : /* @__PURE__ */ import_react.default.createElement(import_styles2.Button, __spreadValues({
+  })) : /* @__PURE__ */ import_react.default.createElement(import_styles2.StyledButton, __spreadValues({
     onClick: handleOnClick,
-    ref: triggerRef,
-    id
-  }, (0, import_ds_props_helpers.getDataProps)(otherProps)), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Search, {
-    color: import_ds_icon.DSIconColors.WHITE
-  }));
+    ref: handleTriggerRefs,
+    id,
+    role: "menuitem",
+    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.SEARCH_TOGGLE.ITEM_BUTTON
+  }, (0, import_ds_utilities.getGlobalAttributes)(otherProps)), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Search, null));
 };
-module.exports = __toCommonJS(SearchToggle_exports);
 //# sourceMappingURL=SearchToggle.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/SearchToggle.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,sBAAuB;AACvB,qBAA+B;AAC/B,0BAAuE;AACvE,oBAA4C;AAC5C,qBAA6B;AAC7B,8BAAyC;AAGlC,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,2BAAkB,KAAK;AACnD,QAAM,mBAAmB,yBAAgC,IAAI;AAC7D,QAAM,qBAAqB,yBAAiC,IAAI;AAChE,QAAM,eAAe,yBAA8B,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,gDAAuB;AAExC,QAAM,eAAe,8BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,gBAAgB,8BACpB,CAAC,MAAwB;AACvB,QAAI,eAAe;AAAW,gBAAU,IAAI;AAC5C,QAAI;AAAS,cAAQ,CAAC;AAAA,EACxB,GACA,CAAC,SAAS,UAAU,CACtB;AAEA,QAAM,kBAAkB,8BACtB,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,8BAAY,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,8BACzB,CAAC,iBAAmC;AAClC,WAAO,YAAY;AACnB,qBAAiB,UAAU;AAAA,EAC7B,GACA,CAAC,MAAM,CACT;AAEA,QAAM,oBAAoB,8BACxB,CAAC,cAAiC;AAChC,uCAAU,YAAY,kBAAkB,EAAE,SAAS;AACnD,WAAO,SAAS;AAAA,EAClB,GACA,CAAC,QAAQ,UAAU,CACrB;AAEA,SAAO,cAAc,SACnB,mDAAC;AAAA,IACC,WAAW;AAAA,IACX,KAAK,mCAAU,oBAAoB,YAAY;AAAA,IAC/C,QAAQ;AAAA,IACR,eAAa,iDAAyB,QAAQ,cAAc;AAAA,KAE5D,mDAAC;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,mDAAC;AAAA,IACC,SAAS;AAAA,IACT,KAAK;AAAA,IACL;AAAA,IACA,MAAK;AAAA,IACL,eAAa,iDAAyB,QAAQ,cAAc;AAAA,KACxD,6CAAoB,UAAU,IAElC,mDAAC,4BAAO,CACV;AAEJ;",
+  "names": []
+}

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

@@ -4,37 +4,34 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
   StyledNavSearchBoxContainer: () => StyledNavSearchBoxContainer
 });
+module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-const StyledNavSearchBoxContainer = import_styled_components.default.div`
-  background: white;
+var import_ds_system = require("@elliemae/ds-system");
+var import_theming = require("../../../../exported-related/theming");
+const StyledNavSearchBoxContainer = (0, import_ds_system.styled)("div", {
+  name: import_theming.COMPONENT_NAME,
+  slot: import_theming.slots.MENUBAR.SEARCH_TOGGLE.CONTAINER
+})`
+  background: ${({ theme }) => theme.colors.neutral["000"]};
   position: relative;
-
   min-width: 260px;
 
   & .em-ds-button {
@@ -78,5 +75,4 @@ const StyledNavSearchBoxContainer = import_styled_components.default.div`
     box-shadow: none;
   }
 `;
-module.exports = __toCommonJS(styles_exports);
 //# sourceMappingURL=styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/SearchToggle/styles.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAsC;AAE/B,MAAM,8BAA8B,6BAAO,OAAO;AAAA,EACvD,MAAM;AAAA,EACN,MAAM,qBAAM,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": []
+}

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

@@ -0,0 +1,24 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var outOfTheBox_exports = {};
+module.exports = __toCommonJS(outOfTheBox_exports);
+var React = __toESM(require("react"));
+__reExport(outOfTheBox_exports, require("./AppPicker/AppPicker"), module.exports);
+__reExport(outOfTheBox_exports, require("./PopupMenu/PopupMenu"), module.exports);
+__reExport(outOfTheBox_exports, require("./SearchToggle/SearchToggle"), module.exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/parts/Toolbar/outOfTheBox/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './AppPicker/AppPicker';\nexport * from './PopupMenu/PopupMenu';\nexport * from './SearchToggle/SearchToggle';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,gCAAc,kCAAd;AACA,gCAAc,kCADd;AAEA,gCAAc,wCAFd;",
+  "names": []
+}

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

@@ -0,0 +1,40 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styles_exports = {};
+__export(styles_exports, {
+  StyledList: () => StyledList,
+  StyledMenubarContainer: () => StyledMenubarContainer,
+  StyledToolbarItem: () => StyledToolbarItem
+});
+module.exports = __toCommonJS(styles_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_theming = require("../../exported-related/theming");
+const StyledMenubarContainer = (0, import_ds_system.styled)("nav", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.MENUBAR.CONTAINER })``;
+const StyledList = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.MENUBAR.LIST })`
+  padding: 0;
+  margin: 0;
+`;
+const StyledToolbarItem = (0, import_ds_system.styled)("li", { name: import_theming.COMPONENT_NAME, slot: import_theming.slots.MENUBAR.ITEM })`
+  list-style: none;
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Toolbar/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { COMPONENT_NAME, slots } from '../../exported-related/theming';\n\nexport const StyledMenubarContainer = styled('nav', { name: COMPONENT_NAME, slot: slots.MENUBAR.CONTAINER })``;\n\nexport const StyledList = styled(Grid, { name: COMPONENT_NAME, slot: slots.MENUBAR.LIST })`\n  padding: 0;\n  margin: 0;\n`;\n\nexport const StyledToolbarItem = styled('li', { name: COMPONENT_NAME, slot: slots.MENUBAR.ITEM })`\n  list-style: none;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AACrB,qBAAsC;AAE/B,MAAM,yBAAyB,6BAAO,OAAO,EAAE,MAAM,+BAAgB,MAAM,qBAAM,QAAQ,UAAU,CAAC;AAEpG,MAAM,aAAa,6BAAO,qBAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAKlF,MAAM,oBAAoB,6BAAO,MAAM,EAAE,MAAM,+BAAgB,MAAM,qBAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/parts/Toolbar/useGlobalHeaderToolbar.js

@@ -0,0 +1,65 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useGlobalHeaderToolbar_exports = {};
+__export(useGlobalHeaderToolbar_exports, {
+  useGlobalHeaderToolbar: () => useGlobalHeaderToolbar
+});
+module.exports = __toCommonJS(useGlobalHeaderToolbar_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const useGlobalHeaderToolbar = () => {
+  const allButtonRefs = (0, import_react.useRef)([]);
+  const listRef = (0, import_react.useRef)(null);
+  const setRef = (0, import_react.useCallback)((index) => (ref) => {
+    allButtonRefs.current[index] = ref;
+    if (index === 0 && allButtonRefs.current[0]) {
+      allButtonRefs.current[0]?.setAttribute?.("tabindex", "0");
+    } else {
+      allButtonRefs.current[index]?.setAttribute?.("tabindex", "-1");
+    }
+  }, []);
+  const keyboardNavigation = (0, import_react.useCallback)((e) => {
+    if (allButtonRefs.current.includes(e.target)) {
+      const currentIndex = allButtonRefs.current.indexOf(e.target);
+      const allRefsLength = allButtonRefs.current.length;
+      if (e.key === "ArrowRight") {
+        if (currentIndex < allRefsLength - 1) {
+          allButtonRefs.current[currentIndex + 1]?.focus?.();
+        } else {
+          allButtonRefs.current[0]?.focus?.();
+        }
+      }
+      if (e.key === "ArrowLeft") {
+        if (currentIndex === 0) {
+          allButtonRefs.current[allRefsLength - 1]?.focus?.();
+        } else {
+          allButtonRefs.current[currentIndex - 1]?.focus?.();
+        }
+      }
+    }
+  }, []);
+  return {
+    listRef,
+    setRef,
+    keyboardNavigation
+  };
+};
+//# sourceMappingURL=useGlobalHeaderToolbar.js.map

package/dist/cjs/parts/Toolbar/useGlobalHeaderToolbar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Toolbar/useGlobalHeaderToolbar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { useRef, useCallback } from 'react';\n\nexport const useGlobalHeaderToolbar = () => {\n  const allButtonRefs = useRef<HTMLElement[]>([]);\n  const listRef = useRef<HTMLUListElement | null>(null);\n\n  const setRef = useCallback(\n    (index: number) => (ref: HTMLElement) => {\n      allButtonRefs.current[index] = ref;\n      if (index === 0 && allButtonRefs.current[0]) {\n        allButtonRefs.current[0]?.setAttribute?.('tabindex', '0');\n      } else {\n        allButtonRefs.current[index]?.setAttribute?.('tabindex', '-1');\n      }\n    },\n    [],\n  );\n\n  const keyboardNavigation = useCallback((e: React.KeyboardEvent) => {\n    if (allButtonRefs.current.includes(e.target as HTMLElement)) {\n      const currentIndex = allButtonRefs.current.indexOf(e.target as HTMLElement);\n      const allRefsLength = allButtonRefs.current.length;\n      if (e.key === 'ArrowRight') {\n        if (currentIndex < allRefsLength - 1) {\n          allButtonRefs.current[currentIndex + 1]?.focus?.();\n        } else {\n          allButtonRefs.current[0]?.focus?.();\n        }\n      }\n      if (e.key === 'ArrowLeft') {\n        if (currentIndex === 0) {\n          allButtonRefs.current[allRefsLength - 1]?.focus?.();\n        } else {\n          allButtonRefs.current[currentIndex - 1]?.focus?.();\n        }\n      }\n    }\n  }, []);\n\n  return {\n    listRef,\n    setRef,\n    keyboardNavigation,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAoC;AAE7B,MAAM,yBAAyB,MAAM;AAC1C,QAAM,gBAAgB,yBAAsB,CAAC,CAAC;AAC9C,QAAM,UAAU,yBAAgC,IAAI;AAEpD,QAAM,SAAS,8BACb,CAAC,UAAkB,CAAC,QAAqB;AACvC,kBAAc,QAAQ,SAAS;AAC/B,QAAI,UAAU,KAAK,cAAc,QAAQ,IAAI;AAC3C,oBAAc,QAAQ,IAAI,eAAe,YAAY,GAAG;AAAA,IAC1D,OAAO;AACL,oBAAc,QAAQ,QAAQ,eAAe,YAAY,IAAI;AAAA,IAC/D;AAAA,EACF,GACA,CAAC,CACH;AAEA,QAAM,qBAAqB,8BAAY,CAAC,MAA2B;AACjE,QAAI,cAAc,QAAQ,SAAS,EAAE,MAAqB,GAAG;AAC3D,YAAM,eAAe,cAAc,QAAQ,QAAQ,EAAE,MAAqB;AAC1E,YAAM,gBAAgB,cAAc,QAAQ;AAC5C,UAAI,EAAE,QAAQ,cAAc;AAC1B,YAAI,eAAe,gBAAgB,GAAG;AACpC,wBAAc,QAAQ,eAAe,IAAI,QAAQ;AAAA,QACnD,OAAO;AACL,wBAAc,QAAQ,IAAI,QAAQ;AAAA,QACpC;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,aAAa;AACzB,YAAI,iBAAiB,GAAG;AACtB,wBAAc,QAAQ,gBAAgB,IAAI,QAAQ;AAAA,QACpD,OAAO;AACL,wBAAc,QAAQ,eAAe,IAAI,QAAQ;AAAA,QACnD;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}