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

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

@@ -0,0 +1,160 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+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 GlobalHeaderToolbar_exports = {};
+__export(GlobalHeaderToolbar_exports, {
+  GlobalHeaderToolbar: () => GlobalHeaderToolbar
+});
+module.exports = __toCommonJS(GlobalHeaderToolbar_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_styles = require("./styles");
+var import_outOfTheBox = require("./outOfTheBox");
+var import_styles2 = require("../styles");
+var import_DSGlobalHeaderContext = require("../../DSGlobalHeaderContext");
+var import_exported_related = require("../../exported-related");
+var import_useGlobalHeaderToolbar = require("./useGlobalHeaderToolbar");
+const GlobalHeaderToolbar = () => {
+  const {
+    props: { toolbar },
+    instanceUID,
+    globalHeaderToolbarGrid
+  } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
+  const { listRef, setRef, keyboardNavigation } = (0, import_useGlobalHeaderToolbar.useGlobalHeaderToolbar)();
+  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledMenubarContainer, {
+    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.CONTAINER
+  }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledList, {
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    gutter: "xxs",
+    cols: globalHeaderToolbarGrid,
+    role: "menubar",
+    forwardedAs: "ul",
+    onKeyDown: keyboardNavigation,
+    listRef,
+    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.LIST
+  }, toolbar.map((item, index) => {
+    const _a = item, {
+      Icon,
+      type,
+      onClick,
+      onKeyPress,
+      CustomComponent,
+      label,
+      id = "",
+      componentProps = {}
+    } = _a, otherProps = __objRest(_a, [
+      "Icon",
+      "type",
+      "onClick",
+      "onKeyPress",
+      "CustomComponent",
+      "label",
+      "id",
+      "componentProps"
+    ]);
+    switch (type) {
+      case "ds-popup-menu":
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledToolbarItem, {
+          key: `${instanceUID}-ds-toolbar-item-${label}`,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM
+        }, /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.PopupMenu, __spreadValues({
+          title: label,
+          Icon,
+          onClick,
+          onKeyPress,
+          setRef: setRef(index),
+          id,
+          componentProps
+        }, otherProps)));
+      case "ds-app-picker":
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledToolbarItem, {
+          key: `${instanceUID}-ds-toolbar-item-${label}`,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM
+        }, /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.AppPicker, __spreadValues({
+          label,
+          id,
+          setRef: setRef(index),
+          componentProps
+        }, otherProps)));
+      case "ds-search-toggle":
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledToolbarItem, {
+          key: `${instanceUID}-ds-toolbar-item-${label}`,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM
+        }, /* @__PURE__ */ import_react.default.createElement(import_outOfTheBox.SearchToggle, __spreadValues({
+          id,
+          setRef: setRef(index),
+          componentProps
+        }, otherProps)));
+      case "custom":
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledToolbarItem, {
+          key: `${instanceUID}-ds-toolbar-item-${label}`,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM
+        }, CustomComponent && /* @__PURE__ */ import_react.default.createElement(CustomComponent, {
+          item,
+          role: "menuitem",
+          setRef: setRef(index)
+        }));
+      default:
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledToolbarItem, {
+          key: `${instanceUID}-ds-toolbar-item-${label}`,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM
+        }, /* @__PURE__ */ import_react.default.createElement(import_styles2.StyledButton, __spreadValues({
+          onClick,
+          title: label,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+          id,
+          role: "menuitem",
+          ref: setRef(index)
+        }, (0, import_ds_utilities.getGlobalAttributes)(otherProps)), Icon && /* @__PURE__ */ import_react.default.createElement(Icon, {
+          size: "m"
+        })));
+    }
+  })));
+};
+//# sourceMappingURL=GlobalHeaderToolbar.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/Toolbar/GlobalHeaderToolbar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { getGlobalAttributes } from '@elliemae/ds-utilities';\nimport { StyledList, StyledMenubarContainer, StyledToolbarItem } from './styles';\nimport { AppPicker, PopupMenu, SearchToggle } from './outOfTheBox';\nimport { StyledButton } from '../styles';\nimport { DSGlobalHeaderContext } from '../../DSGlobalHeaderContext';\nimport { DSGlobalHeaderDatatestid } from '../../exported-related';\nimport { useGlobalHeaderToolbar } from './useGlobalHeaderToolbar';\nimport type { DSGlobalHeaderInternalsT } from '../../sharedTypes';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    instanceUID,\n    globalHeaderToolbarGrid,\n  } = useContext(DSGlobalHeaderContext);\n\n  const { listRef, setRef, keyboardNavigation } = useGlobalHeaderToolbar();\n\n  return (\n    <StyledMenubarContainer data-testid={DSGlobalHeaderDatatestid.MENUBAR.CONTAINER}>\n      <StyledList\n        height=\"100%\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gutter=\"xxs\"\n        cols={globalHeaderToolbarGrid}\n        role=\"menubar\"\n        forwardedAs=\"ul\"\n        onKeyDown={keyboardNavigation}\n        listRef={listRef}\n        data-testid={DSGlobalHeaderDatatestid.MENUBAR.LIST}\n      >\n        {toolbar.map((item, index) => {\n          const {\n            Icon,\n            type,\n            onClick,\n            onKeyPress,\n            CustomComponent,\n            label,\n            id = '',\n            componentProps = {},\n            ...otherProps\n          } = item;\n\n          switch (type) {\n            case 'ds-popup-menu':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <PopupMenu\n                    title={label}\n                    Icon={Icon}\n                    onClick={onClick}\n                    onKeyPress={onKeyPress}\n                    setRef={setRef(index)}\n                    id={id}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.PopupMenuComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-app-picker':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <AppPicker\n                    label={label}\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.AppPickerComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'ds-search-toggle':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <SearchToggle\n                    id={id}\n                    setRef={setRef(index)}\n                    componentProps={componentProps as DSGlobalHeaderInternalsT.ToggleSearchComponentProps}\n                    {...otherProps}\n                  />\n                </StyledToolbarItem>\n              );\n            case 'custom':\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  {CustomComponent && <CustomComponent item={item} role=\"menuitem\" setRef={setRef(index)} />}\n                </StyledToolbarItem>\n              );\n\n            default:\n              return (\n                <StyledToolbarItem\n                  key={`${instanceUID}-ds-toolbar-item-${label}`}\n                  data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM}\n                >\n                  <StyledButton\n                    onClick={onClick}\n                    title={label}\n                    data-testid={DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON}\n                    id={id}\n                    role=\"menuitem\"\n                    ref={setRef(index)}\n                    {...getGlobalAttributes(otherProps)}\n                  >\n                    {Icon && <Icon size=\"m\" />}\n                  </StyledButton>\n                </StyledToolbarItem>\n              );\n          }\n        })}\n      </StyledList>\n    </StyledMenubarContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,0BAAoC;AACpC,oBAAsE;AACtE,yBAAmD;AACnD,qBAA6B;AAC7B,mCAAsC;AACtC,8BAAyC;AACzC,oCAAuC;AAGhC,MAAM,sBAAsB,MAAmB;AACpD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,MACE,6BAAW,kDAAqB;AAEpC,QAAM,EAAE,SAAS,QAAQ,uBAAuB,0DAAuB;AAEvE,SACE,mDAAC;AAAA,IAAuB,eAAa,iDAAyB,QAAQ;AAAA,KACpE,mDAAC;AAAA,IACC,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,QAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAK;AAAA,IACL,aAAY;AAAA,IACZ,WAAW;AAAA,IACX;AAAA,IACA,eAAa,iDAAyB,QAAQ;AAAA,KAE7C,QAAQ,IAAI,CAAC,MAAM,UAAU;AAC5B,UAUI,WATF;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,iBAAiB,CAAC;AAAA,QAEhB,IADC,uBACD,IADC;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAIF,YAAQ;AAAA,WACD;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,UACA;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC;AAAA,UACA;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC;AAAA,UACA,QAAQ,OAAO,KAAK;AAAA,UACpB;AAAA,WACI,WACN,CACF;AAAA,WAEC;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE7C,mBAAmB,mDAAC;AAAA,UAAgB;AAAA,UAAY,MAAK;AAAA,UAAW,QAAQ,OAAO,KAAK;AAAA,SAAG,CAC1F;AAAA;AAIF,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,+BAA+B;AAAA,UACvC,eAAa,iDAAyB,QAAQ;AAAA,WAE9C,mDAAC;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,eAAa,iDAAyB,QAAQ;AAAA,UAC9C;AAAA,UACA,MAAK;AAAA,UACL,KAAK,OAAO,KAAK;AAAA,WACb,6CAAoB,UAAU,IAEjC,QAAQ,mDAAC;AAAA,UAAK,MAAK;AAAA,SAAI,CAC1B,CACF;AAAA;AAAA,EAGR,CAAC,CACH,CACF;AAEJ;",
+  "names": []
+}

package/dist/cjs/{outOfTheBox → parts/Toolbar/outOfTheBox}/AppPicker/AppPicker.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,45 +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 AppPicker_exports = {};
 __export(AppPicker_exports, {
   AppPicker: () => AppPicker
 });
+module.exports = __toCommonJS(AppPicker_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_ds_app_picker = require("@elliemae/ds-app-picker");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_icons = require("@elliemae/ds-icons");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_styles = require("../../components/Toolbar/styles");
+var import_styles = require("../../../styles");
+var import_exported_related = require("../../../../exported-related");
 const AppPicker = (_a) => {
   var _b = _a, {
     label,
     id,
+    setRef,
     componentProps
   } = _b, otherProps = __objRest(_b, [
     "label",
     "id",
+    "setRef",
     "componentProps"
   ]);
   const [isOpen, setIsOpen] = (0, import_react.useState)(false);
-  const buttonRef = (0, import_react.useRef)(null);
+  const internalTriggerRef = (0, import_react.useRef)(null);
   const {
     apps,
     icon,
@@ -89,15 +85,17 @@ const AppPicker = (_a) => {
     triggerRef,
     triggerOnClick
   } = componentProps;
+  const schedule = (0, import_ds_utilities.useCallbackAfterRender)();
+  const focusTrigger = (0, import_react.useCallback)(() => internalTriggerRef.current?.focus(), []);
   const handleTriggerKeyDown = (0, import_react.useCallback)((e) => {
-    if (e.code === "Enter" || e.code === "Space") {
+    if (e.code === "Enter" || e.code === "Space" || e.code === "ArrowDown") {
       setIsOpen(true);
     }
   }, []);
   const handleAppPickerOnKeyDown = (0, import_react.useCallback)((e) => {
-    if (e.code === "Escape") {
+    if (e.key === "Escape") {
       setIsOpen(false);
-      buttonRef?.current?.focus();
+      schedule(focusTrigger);
     }
   }, []);
   const handleOnClickOutside = (0, import_react.useCallback)(() => {
@@ -106,20 +104,6 @@ const AppPicker = (_a) => {
   const handleOnClick = (0, import_react.useCallback)(() => {
     setIsOpen(true);
   }, []);
-  const renderTrigger = (0, import_react.useMemo)(() => ({ ref }) => /* @__PURE__ */ import_react.default.createElement("div", {
-    ref
-  }, /* @__PURE__ */ import_react.default.createElement(import_styles.Button, __spreadValues({
-    onClick: triggerOnClick ?? handleOnClick,
-    onKeyDown: handleTriggerKeyDown,
-    ref: (0, import_ds_utilities.mergeRefs)(buttonRef, triggerRef),
-    title: label,
-    "data-testid": "gh-toolbar-item",
-    id
-  }, (0, import_ds_props_helpers.getDataProps)(otherProps)), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MenuPicker, {
-    fill: "#FFF",
-    width: 20.73,
-    height: 20.73
-  }))), [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps]);
   return /* @__PURE__ */ import_react.default.createElement(import_ds_app_picker.DSAppPicker, {
     apps,
     customApps,
@@ -129,11 +113,26 @@ const AppPicker = (_a) => {
     onKeyDown: userOnKeyDown ?? handleAppPickerOnKeyDown,
     actionRef,
     onClickOutside: userOnClickOutside ?? handleOnClickOutside,
-    renderTrigger: userRenderTrigger ?? renderTrigger,
+    renderTrigger: userRenderTrigger || (({ ref }) => /* @__PURE__ */ import_react.default.createElement(import_styles.StyledButton, __spreadValues({
+      onClick: triggerOnClick ?? handleOnClick,
+      onKeyDown: handleTriggerKeyDown,
+      ref: (buttonRef) => {
+        setRef(buttonRef);
+        (0, import_ds_utilities.mergeRefs)(internalTriggerRef, triggerRef, ref)(buttonRef);
+      },
+      "aria-label": label,
+      "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+      role: "menuitem",
+      "aria-haspopup": true,
+      "aria-expanded": userIsOpen ?? isOpen,
+      id
+    }, (0, import_ds_utilities.getGlobalAttributes)(otherProps)), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.MenuPicker, {
+      width: 20.73,
+      height: 20.73
+    }))),
     isOpen: userIsOpen ?? isOpen,
     onClose,
     triggerRef
   });
 };
-module.exports = __toCommonJS(AppPicker_exports);
 //# sourceMappingURL=AppPicker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/AppPicker/AppPicker.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,2BAA4B;AAC5B,0BAAuE;AACvE,sBAA2B;AAC3B,oBAA6B;AAC7B,8BAAyC;AAGlC,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,2BAAkB,KAAK;AACnD,QAAM,qBAAqB,yBAA0B,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,gDAAuB;AAExC,QAAM,eAAe,8BAAY,MAAM,mBAAmB,SAAS,MAAM,GAAG,CAAC,CAAC;AAE9E,QAAM,uBAAmD,8BAAY,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,8BAAY,CAAC,MAA2B;AACvE,QAAI,EAAE,QAAQ,UAAU;AACtB,gBAAU,KAAK;AACf,eAAS,YAAY;AAAA,IACvB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,uBAAuB,8BAAY,MAAM;AAC7C,cAAU,KAAK;AAAA,EACjB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC,8BAAY,MAAM;AAC/D,cAAU,IAAI;AAAA,EAChB,GAAG,CAAC,CAAC;AAEL,SACE,mDAAC;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,mDAAC;AAAA,MACC,SAAS,kBAAkB;AAAA,MAC3B,WAAW;AAAA,MACX,KAAK,CAAC,cAAiC;AACrC,eAAO,SAAS;AAChB,2CAAU,oBAAoB,YAAY,GAAG,EAAE,SAAS;AAAA,MAC1D;AAAA,MACA,cAAY;AAAA,MACZ,eAAa,iDAAyB,QAAQ;AAAA,MAC9C,MAAK;AAAA,MACL,iBAAa;AAAA,MACb,iBAAe,cAAc;AAAA,MAC7B;AAAA,OACI,6CAAoB,UAAU,IAElC,mDAAC;AAAA,MAAW,OAAO;AAAA,MAAO,QAAQ;AAAA,KAAO,CAC3C;AAAA,IAGJ,QAAQ,cAAc;AAAA,IACtB;AAAA,IACA;AAAA,GACF;AAEJ;",
+  "names": []
+}

package/dist/cjs/{outOfTheBox → parts/Toolbar/outOfTheBox}/PopupMenu/PopupMenu.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,34 +34,44 @@ 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 PopupMenu_exports = {};
 __export(PopupMenu_exports, {
   PopupMenu: () => PopupMenu
 });
+module.exports = __toCommonJS(PopupMenu_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_popperjs = require("@elliemae/ds-popperjs");
-var import_PopupMenuContent = require("./PopupMenuContent");
-var import_styles = require("../../components/Toolbar/styles");
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_PopupMenuContent = require("./menuContent/PopupMenuContent");
+var import_styles = require("../../../styles");
+var import_exported_related = require("../../../../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] = (0, import_react.useState)(false);
   const [buttonRef, setButtonRef] = (0, import_react.useState)(null);
   const {
@@ -73,8 +82,8 @@ const PopupMenu = (_a) => {
     options,
     closeOnClick
   } = componentProps;
-  const handleKeyPress = (0, import_react.useCallback)((e) => {
-    if (e.code === "Enter" || e.code === "Space") {
+  const handleOnKeyDown = (0, import_react.useCallback)((e) => {
+    if (e.code === "ArrowDown") {
       setIsOpen(true);
     }
     if (onKeyPress)
@@ -89,34 +98,41 @@ const PopupMenu = (_a) => {
   const handleTriggerOnClick = (0, import_react.useCallback)((e) => {
     if (userIsOpen === void 0)
       setIsOpen(true);
-    onClick(e);
+    if (onClick)
+      onClick(e);
   }, [onClick, userIsOpen]);
   const handleItemClick = (0, import_react.useCallback)(() => {
     if (closeOnClick && userIsOpen === void 0)
       handleOnClose();
   }, [closeOnClick, handleOnClose, userIsOpen]);
-  const content = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(import_PopupMenuContent.PopupMenuContent, {
-    options,
-    onItemClick: handleItemClick,
-    onClose: handleOnClose,
-    popupOnKeyPress
-  }), [options, handleItemClick, handleOnClose, popupOnKeyPress]);
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_styles.Button, __spreadValues({
+  const handleRefs = (0, import_react.useCallback)((ref) => {
+    setRef(ref);
+    setButtonRef(ref);
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledButton, __spreadValues({
     onClick: handleTriggerOnClick,
-    onKeyPress: handleKeyPress,
-    title,
-    ref: setButtonRef,
-    "data-testid": "gh-toolbar-item",
+    onKeyDown: handleOnKeyDown,
+    "aria-label": title,
+    ref: handleRefs,
+    "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.ITEM_BUTTON,
+    role: "menuitem",
+    "aria-haspopup": true,
+    "aria-expanded": userIsOpen ?? isOpen,
     id
-  }, (0, import_ds_props_helpers.getDataProps)(otherProps)), Icon && /* @__PURE__ */ import_react.default.createElement(Icon, {
-    fill: "#FFF",
+  }, (0, import_ds_utilities.useGetGlobalAttributes)(otherProps)), Icon && /* @__PURE__ */ import_react.default.createElement(Icon, {
     size: "m"
   })), /* @__PURE__ */ import_react.default.createElement(import_ds_popperjs.DSPopperJS, {
     referenceElement: buttonRef,
     showPopover: userIsOpen ?? isOpen,
     closeContextMenu: handleOnClose,
-    onClickOutside
-  }, content));
+    onClickOutside,
+    withoutPortal: true
+  }, /* @__PURE__ */ import_react.default.createElement(import_PopupMenuContent.PopupMenuContent, {
+    options,
+    onItemClick: handleItemClick,
+    onClose: handleOnClose,
+    setIsOpen,
+    popupOnKeyPress
+  })));
 };
-module.exports = __toCommonJS(PopupMenu_exports);
 //# sourceMappingURL=PopupMenu.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/PopupMenu.tsx", "../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,0BAAuC;AACvC,yBAA2B;AAC3B,8BAAiC;AACjC,oBAA6B;AAC7B,8BAAyC;AAGlC,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,2BAAkB,KAAK;AACnD,QAAM,CAAC,WAAW,gBAAgB,2BAAmC,IAAI;AAEzE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,kBAAkB,8BACtB,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,8BAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU,KAAK;AAAA,IACjB;AACA,eAAW,MAAM;AAAA,EACnB,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,QAAM,uBAAuB,8BAC3B,CAAC,MAAwB;AACvB,QAAI,eAAe;AAAW,gBAAU,IAAI;AAC5C,QAAI;AAAS,cAAQ,CAAC;AAAA,EACxB,GACA,CAAC,SAAS,UAAU,CACtB;AAEA,QAAM,kBAAkB,8BAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW,oBAAc;AAAA,EAC9D,GAAG,CAAC,cAAc,eAAe,UAAU,CAAC;AAE5C,QAAM,aAAa,8BAAY,CAAC,QAAQ;AACtC,WAAO,GAAG;AACV,iBAAa,GAAG;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,SACE,wFACE,mDAAC;AAAA,IACC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,cAAY;AAAA,IACZ,KAAK;AAAA,IACL,eAAa,iDAAyB,QAAQ;AAAA,IAC9C,MAAK;AAAA,IACL,iBAAa;AAAA,IACb,iBAAe,cAAc;AAAA,IAC7B;AAAA,KACI,gDAAuB,UAAU,IAEpC,QAAQ,mDAAC;AAAA,IAAK,MAAK;AAAA,GAAI,CAC1B,GACA,mDAAC;AAAA,IACC,kBAAkB;AAAA,IAClB,aAAa,cAAc;AAAA,IAC3B,kBAAkB;AAAA,IAClB;AAAA,IACA,eAAa;AAAA,KAEb,mDAAC;AAAA,IACC;AAAA,IACA,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,IACA;AAAA,GACF,CACF,CACF;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,123 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+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 PopupMenuContent_exports = {};
+__export(PopupMenuContent_exports, {
+  PopupMenuContent: () => PopupMenuContent
+});
+module.exports = __toCommonJS(PopupMenuContent_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_styles = require("./styles");
+var import_DSGlobalHeaderContext = require("../../../../../DSGlobalHeaderContext");
+var import_exported_related = require("../../../../../exported-related");
+var import_usePopupMenuContent = require("./usePopupMenuContent");
+const PopupMenuContent = import_react.default.memo(({
+  options,
+  onItemClick,
+  onClose,
+  popupOnKeyPress,
+  setIsOpen
+}) => {
+  const { instanceUID } = (0, import_react.useContext)(import_DSGlobalHeaderContext.DSGlobalHeaderContext);
+  const { menuRef, setRef, keyboardNavigation } = (0, import_usePopupMenuContent.usePopupMenuContent)({ setIsOpen });
+  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledList, {
+    ref: menuRef,
+    role: "menu",
+    "data-testid": import_exported_related.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 = (0, import_ds_utilities.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__ */ import_react.default.createElement(import_styles.StyledSeparator, __spreadValues({
+          key: `${instanceUID}-separator-${label}`,
+          role: "none",
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.SEPARATOR
+        }, globalAttrs));
+      case "custom":
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledItemContainer, {
+          key: `${instanceUID}-popup-${label}`,
+          role: "menuitem",
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM
+        }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledItemButton, __spreadValues({
+          ref: setRef,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          id,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON
+        }, globalAttrs), Content && /* @__PURE__ */ import_react.default.createElement(Content, null)));
+      default:
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledItemContainer, {
+          key: `${instanceUID}-popup-${label}`,
+          role: "menuitem",
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM
+        }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledItemButton, __spreadValues({
+          ref: setRef,
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          id,
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON
+        }, globalAttrs), Icon && /* @__PURE__ */ import_react.default.createElement(Icon, null), label && /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, {
+          "data-testid": import_exported_related.DSGlobalHeaderDatatestid.MENUBAR.POPUP_MENU.ITEM_BUTTON_LABEL
+        }, label)));
+    }
+  }));
+});
+//# sourceMappingURL=PopupMenuContent.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/parts/Toolbar/outOfTheBox/PopupMenu/menuContent/PopupMenuContent.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,0BAAoC;AACpC,oBAAgG;AAChG,mCAAsC;AACtC,8BAAyC;AACzC,iCAAoC;AAG7B,MAAM,mBAAmB,qBAAM,KACpC,CAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACiE;AACjE,QAAM,EAAE,gBAAgB,6BAAW,kDAAqB;AAExD,QAAM,EAAE,SAAS,QAAQ,uBAAuB,oDAAoB,EAAE,UAAU,CAAC;AAEjF,SACE,mDAAC;AAAA,IAAW,KAAK;AAAA,IAAS,MAAK;AAAA,IAAO,eAAa,iDAAyB,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,6CAAoB,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,mDAAC;AAAA,UACC,KAAK,GAAG,yBAAyB;AAAA,UACjC,MAAK;AAAA,UACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,WACrD,YACN;AAAA,WAEC;AACH,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,qBAAqB;AAAA,UAC7B,MAAK;AAAA,UACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,WAEzD,mDAAC;AAAA,UACC,KAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW;AAAA,UACX;AAAA,UACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,WACrD,cAEH,WAAW,mDAAC,aAAQ,CACvB,CACF;AAAA;AAGF,eACE,mDAAC;AAAA,UACC,KAAK,GAAG,qBAAqB;AAAA,UAC7B,MAAK;AAAA,UACL,eAAa,iDAAyB,QAAQ,WAAW;AAAA,WAEzD,mDAAC;AAAA,UACC,KAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW;AAAA,UACX;AAAA,UACA,eAAa,iDAAyB,QAAQ,WAAW;AAAA,WACrD,cAEH,QAAQ,mDAAC,UAAK,GACd,SACC,mDAAC;AAAA,UAAY,eAAa,iDAAyB,QAAQ,WAAW;AAAA,WACnE,KACH,CAEJ,CACF;AAAA;AAAA,EAGR,CAAC,CACH;AAEJ,CACF;",
+  "names": []
+}