@elliemae/ds-global-header 2.3.1 → 3.0.0-alpha.3

package/dist/cjs/defaultProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/defaultProps.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type { GlobalHeaderPropsT } from './GlobalHeaderTypes';\n\nconst emptyComp = () => null;\n\nexport const defaultProps: GlobalHeaderPropsT = {\n  breadcrumb: [],\n  toolbar: [],\n  LogoWithBrand: emptyComp,\n  Logo: emptyComp,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,MAAM,YAAY,MAAM;AAEjB,MAAM,eAAmC;AAAA,EAC9C,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,eAAe;AAAA,EACf,MAAM;AAAA;",
+  "names": []
+}

package/dist/cjs/index.js

@@ -0,0 +1,36 @@
+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 __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 });
+  }
+  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);
+};
+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 src_exports = {};
+__export(src_exports, {
+  default: () => import_GlobalHeader.GlobalHeader
+});
+var React = __toESM(require("react"));
+__reExport(src_exports, require("./GlobalHeader"));
+var import_GlobalHeader = require("./GlobalHeader");
+module.exports = __toCommonJS(src_exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './GlobalHeader';\nexport { GlobalHeader as default } from './GlobalHeader';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,0BAAwC;",
+  "names": []
+}

package/dist/cjs/outOfTheBox/AppPicker/AppPicker.js

@@ -0,0 +1,139 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+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 __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 });
+  }
+  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);
+};
+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 AppPicker_exports = {};
+__export(AppPicker_exports, {
+  AppPicker: () => AppPicker
+});
+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");
+const AppPicker = (_a) => {
+  var _b = _a, {
+    label,
+    id,
+    componentProps
+  } = _b, otherProps = __objRest(_b, [
+    "label",
+    "id",
+    "componentProps"
+  ]);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const buttonRef = (0, import_react.useRef)(null);
+  const {
+    apps,
+    icon,
+    customApps,
+    sectionTitle,
+    customSectionTitle,
+    actionRef,
+    isOpen: userIsOpen,
+    onKeyDown: userOnKeyDown,
+    onClickOutside: userOnClickOutside,
+    renderTrigger: userRenderTrigger,
+    onClose,
+    triggerRef,
+    triggerOnClick
+  } = componentProps;
+  const handleTriggerKeyDown = (0, import_react.useCallback)((e) => {
+    if (e.code === "Enter" || e.code === "Space") {
+      setIsOpen(true);
+    }
+  }, []);
+  const handleAppPickerOnKeyDown = (0, import_react.useCallback)((e) => {
+    if (e.code === "Escape") {
+      setIsOpen(false);
+      buttonRef?.current?.focus();
+    }
+  }, []);
+  const handleOnClickOutside = (0, import_react.useCallback)(() => {
+    setIsOpen(false);
+  }, []);
+  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,
+    sectionTitle,
+    customSectionTitle,
+    icon,
+    onKeyDown: userOnKeyDown ?? handleAppPickerOnKeyDown,
+    actionRef,
+    onClickOutside: userOnClickOutside ?? handleOnClickOutside,
+    renderTrigger: userRenderTrigger ?? renderTrigger,
+    isOpen: userIsOpen ?? isOpen,
+    onClose,
+    triggerRef
+  });
+};
+module.exports = __toCommonJS(AppPicker_exports);
+//# sourceMappingURL=AppPicker.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/AppPicker/AppPicker.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSAppPicker } from '@elliemae/ds-app-picker';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { MenuPicker } from '@elliemae/ds-icons';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport { Button } from '../../components/Toolbar/styles';\n\ntype AppPickerProps = React.ComponentProps<typeof DSAppPicker>;\n\nexport const AppPicker = ({\n  label,\n  id,\n  componentProps,\n  ...otherProps\n}: AppPickerProps & {\n  label: string;\n  triggerOnClick?: React.MouseEventHandler;\n}): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const buttonRef = 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 handleTriggerKeyDown: React.KeyboardEventHandler = useCallback((e) => {\n    if (e.code === 'Enter' || e.code === 'Space') {\n      setIsOpen(true);\n    }\n  }, []);\n\n  const handleAppPickerOnKeyDown: AppPickerProps['onKeyDown'] = useCallback((e) => {\n    if (e.code === 'Escape') {\n      setIsOpen(false);\n      buttonRef?.current?.focus();\n    }\n  }, []);\n\n  const handleOnClickOutside: AppPickerProps['onClickOutside'] = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(() => {\n    setIsOpen(true);\n  }, []);\n\n  const renderTrigger: AppPickerProps['renderTrigger'] = useMemo(\n    () =>\n      ({ ref }) =>\n        (\n          <div ref={ref}>\n            <Button\n              onClick={triggerOnClick ?? handleOnClick}\n              onKeyDown={handleTriggerKeyDown}\n              ref={mergeRefs(buttonRef, triggerRef)}\n              title={label}\n              data-testid=\"gh-toolbar-item\"\n              id={id}\n              {...getDataProps(otherProps)}\n            >\n              <MenuPicker fill=\"#FFF\" width={20.73} height={20.73} />\n            </Button>\n          </div>\n        ),\n    [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps],\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={userRenderTrigger ?? renderTrigger}\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;ACAA,YAAuB;ADAvB,mBAA8D;AAC9D,2BAA4B;AAC5B,0BAA0B;AAC1B,sBAA2B;AAC3B,8BAA6B;AAC7B,oBAAuB;AAIhB,MAAM,YAAY,CAAC,OAQP;AARO,eACxB;AAAA;AAAA,IACA;AAAA,IACA;AAAA,MAHwB,IAIrB,uBAJqB,IAIrB;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAMA,QAAM,CAAC,QAAQ,aAAa,2BAAkB;AAC9C,QAAM,YAAY,yBAA0B;AAE5C,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,uBAAmD,8BAAY,CAAC,MAAM;AAC1E,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,SAAS;AAC5C,gBAAU;AAAA;AAAA,KAEX;AAEH,QAAM,2BAAwD,8BAAY,CAAC,MAAM;AAC/E,QAAI,EAAE,SAAS,UAAU;AACvB,gBAAU;AACV,iBAAW,SAAS;AAAA;AAAA,KAErB;AAEH,QAAM,uBAAyD,8BAAY,MAAM;AAC/E,cAAU;AAAA,KACT;AAEH,QAAM,gBAAyC,8BAAY,MAAM;AAC/D,cAAU;AAAA,KACT;AAEH,QAAM,gBAAiD,0BACrD,MACE,CAAC,EAAE,UAEC,mDAAC,OAAD;AAAA,IAAK;AAAA,KACH,mDAAC,sBAAD;AAAA,IACE,SAAS,kBAAkB;AAAA,IAC3B,WAAW;AAAA,IACX,KAAK,mCAAU,WAAW;AAAA,IAC1B,OAAO;AAAA,IACP,eAAY;AAAA,IACZ;AAAA,KACI,0CAAa,cAEjB,mDAAC,4BAAD;AAAA,IAAY,MAAK;AAAA,IAAO,OAAO;AAAA,IAAO,QAAQ;AAAA,QAIxD,CAAC,gBAAgB,eAAe,sBAAsB,YAAY,OAAO,IAAI;AAG/E,SACE,mDAAC,kCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,iBAAiB;AAAA,IAC5B;AAAA,IACA,gBAAgB,sBAAsB;AAAA,IACtC,eAAe,qBAAqB;AAAA,IACpC,QAAQ,cAAc;AAAA,IACtB;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/outOfTheBox/PopupMenu/PopupMenu.js

@@ -0,0 +1,122 @@
+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 __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+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 __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 });
+  }
+  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);
+};
+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 PopupMenu_exports = {};
+__export(PopupMenu_exports, {
+  PopupMenu: () => PopupMenu
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+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");
+const PopupMenu = (_a) => {
+  var _b = _a, { Icon, title, onClick, id, componentProps } = _b, otherProps = __objRest(_b, ["Icon", "title", "onClick", "id", "componentProps"]);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [buttonRef, setButtonRef] = (0, import_react.useState)(null);
+  const {
+    onClickOutside = () => null,
+    onKeyPress,
+    popupOnKeyPress,
+    isOpen: userIsOpen,
+    options,
+    closeOnClick
+  } = componentProps;
+  const handleKeyPress = (0, import_react.useCallback)((e) => {
+    if (e.code === "Enter" || e.code === "Space") {
+      setIsOpen(true);
+    }
+    if (onKeyPress)
+      onKeyPress(e);
+  }, [onKeyPress]);
+  const handleOnClose = (0, import_react.useCallback)(() => {
+    if (userIsOpen === void 0) {
+      setIsOpen(false);
+    }
+    buttonRef?.focus();
+  }, [buttonRef, userIsOpen]);
+  const handleTriggerOnClick = (0, import_react.useCallback)((e) => {
+    if (userIsOpen === void 0)
+      setIsOpen(true);
+    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({
+    onClick: handleTriggerOnClick,
+    onKeyPress: handleKeyPress,
+    title,
+    ref: setButtonRef,
+    "data-testid": "gh-toolbar-item",
+    id
+  }, (0, import_ds_props_helpers.getDataProps)(otherProps)), Icon && /* @__PURE__ */ import_react.default.createElement(Icon, {
+    fill: "#FFF",
+    size: "m"
+  })), /* @__PURE__ */ import_react.default.createElement(import_ds_popperjs.DSPopperJS, {
+    referenceElement: buttonRef,
+    showPopover: userIsOpen ?? isOpen,
+    closeContextMenu: handleOnClose,
+    onClickOutside
+  }, content));
+};
+module.exports = __toCommonJS(PopupMenu_exports);
+//# sourceMappingURL=PopupMenu.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/PopupMenu/PopupMenu.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useState, useCallback, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './PopupMenuContent';\nimport { Button } from '../../components/Toolbar/styles';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport type { PopupPropsT as Props } from '../../GlobalHeaderTypes';\n\nexport const PopupMenu = ({ Icon, title, onClick, id, componentProps, ...otherProps }: Props): 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 handleKeyPress = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Enter' || e.code === 'Space') {\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) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      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 content = useMemo(\n    () => (\n      <PopupMenuContent\n        options={options}\n        onItemClick={handleItemClick}\n        onClose={handleOnClose}\n        popupOnKeyPress={popupOnKeyPress}\n      />\n    ),\n    [options, handleItemClick, handleOnClose, popupOnKeyPress],\n  );\n\n  return (\n    <div>\n      <Button\n        onClick={handleTriggerOnClick}\n        onKeyPress={handleKeyPress}\n        title={title}\n        ref={setButtonRef}\n        data-testid=\"gh-toolbar-item\"\n        id={id}\n        {...getDataProps(otherProps)}\n      >\n        {Icon && <Icon fill=\"#FFF\" size=\"m\" />}\n      </Button>\n      <DSPopperJS\n        referenceElement={buttonRef}\n        showPopover={userIsOpen ?? isOpen}\n        closeContextMenu={handleOnClose}\n        onClickOutside={onClickOutside}\n      >\n        {content}\n      </DSPopperJS>\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAsD;AACtD,yBAA2B;AAC3B,8BAAiC;AACjC,oBAAuB;AACvB,8BAA6B;AAGtB,MAAM,YAAY,CAAC,OAAoF;AAApF,eAAE,QAAM,OAAO,SAAS,IAAI,mBAA5B,IAA+C,uBAA/C,IAA+C,CAA7C,QAAM,SAAO,WAAS,MAAI;AACpD,QAAM,CAAC,QAAQ,aAAa,2BAAkB;AAC9C,QAAM,CAAC,WAAW,gBAAgB,2BAAmC;AAErE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,iBAAiB,8BACrB,CAAC,MAA2B;AAC1B,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,SAAS;AAC5C,gBAAU;AAAA;AAEZ,QAAI;AAAY,iBAAW;AAAA,KAE7B,CAAC;AAGH,QAAM,gBAAgB,8BAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU;AAAA;AAEZ,eAAW;AAAA,KACV,CAAC,WAAW;AAEf,QAAM,uBAAuB,8BAC3B,CAAC,MAAM;AACL,QAAI,eAAe;AAAW,gBAAU;AACxC,YAAQ;AAAA,KAEV,CAAC,SAAS;AAGZ,QAAM,kBAAkB,8BAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW;AAAA,KAC7C,CAAC,cAAc,eAAe;AAEjC,QAAM,UAAU,0BACd,MACE,mDAAC,0CAAD;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,MAGJ,CAAC,SAAS,iBAAiB,eAAe;AAG5C,SACE,mDAAC,OAAD,MACE,mDAAC,sBAAD;AAAA,IACE,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA,KAAK;AAAA,IACL,eAAY;AAAA,IACZ;AAAA,KACI,0CAAa,cAEhB,QAAQ,mDAAC,MAAD;AAAA,IAAM,MAAK;AAAA,IAAO,MAAK;AAAA,OAElC,mDAAC,+BAAD;AAAA,IACE,kBAAkB;AAAA,IAClB,aAAa,cAAc;AAAA,IAC3B,kBAAkB;AAAA,IAClB;AAAA,KAEC;AAAA;",
+  "names": []
+}

package/dist/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -0,0 +1,97 @@
+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 __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 });
+  }
+  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);
+};
+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 PopupMenuContent_exports = {};
+__export(PopupMenuContent_exports, {
+  PopupMenuContent: () => PopupMenuContent
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_styles = require("./styles");
+var import_GlobalHeaderContext = require("../../GlobalHeaderContext");
+const PopupMenuContent = import_react.default.memo(({ options, onItemClick, onClose, popupOnKeyPress }) => {
+  const { instanceUID } = (0, import_react.useContext)(import_GlobalHeaderContext.GlobalHeaderContext);
+  const menuRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    menuRef.current?.firstChild?.focus();
+  }, []);
+  const content = (0, import_react.useMemo)(() => options.map((option) => {
+    const { type, Icon, label = "", onClick, Content, id } = option;
+    const ariaAndDataProps = __spreadValues(__spreadValues({}, (0, import_ds_props_helpers.getAriaProps)(option)), (0, import_ds_props_helpers.getDataProps)(option));
+    const handleClick = (e) => {
+      onItemClick(e);
+      if (onClick)
+        onClick(e);
+    };
+    const handleKeyDown = (e) => {
+      if (e.code === "Escape")
+        onClose();
+      if (popupOnKeyPress)
+        popupOnKeyPress(e);
+    };
+    switch (type) {
+      case "separator":
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.Separator, __spreadValues({
+          key: `${instanceUID}-separator-${label}`
+        }, ariaAndDataProps));
+      case "custom":
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.ItemWrapper, __spreadValues({
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          key: `${instanceUID}-popup-${label}`,
+          id
+        }, ariaAndDataProps), Content && /* @__PURE__ */ import_react.default.createElement(Content, null));
+      default:
+        return /* @__PURE__ */ import_react.default.createElement(import_styles.ItemWrapper, __spreadValues({
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          key: `${instanceUID}-popup-${label}`,
+          id
+        }, ariaAndDataProps), Icon && /* @__PURE__ */ import_react.default.createElement(Icon, null), import_styles.Label && /* @__PURE__ */ import_react.default.createElement(import_styles.Label, null, label));
+    }
+  }), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
+  return /* @__PURE__ */ import_react.default.createElement(import_styles.List, {
+    ref: menuRef
+  }, content);
+});
+module.exports = __toCommonJS(PopupMenuContent_exports);
+//# sourceMappingURL=PopupMenuContent.js.map

package/dist/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/PopupMenu/PopupMenuContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useRef, useEffect, useMemo, useContext } from 'react';\nimport { getAriaProps, getDataProps } from '@elliemae/ds-props-helpers';\nimport { Separator, ItemWrapper, Label, List } from './styles';\nimport type { PopupMenuContentPropsT as Props } from '../../GlobalHeaderTypes';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const PopupMenuContent = React.memo(({ options, onItemClick, onClose, popupOnKeyPress }: Props): JSX.Element => {\n  const { instanceUID } = useContext(GlobalHeaderContext);\n\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    (menuRef.current?.firstChild as HTMLButtonElement)?.focus();\n  }, []);\n\n  const content = useMemo(\n    () =>\n      options.map((option) => {\n        const { type, Icon, label = '', onClick, Content, id } = option;\n\n        const ariaAndDataProps = {\n          ...getAriaProps(option),\n          ...getDataProps(option),\n        };\n\n        const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {\n          onItemClick(e);\n          if (onClick) onClick(e);\n        };\n\n        const handleKeyDown = (e: React.KeyboardEvent) => {\n          if (e.code === 'Escape') onClose();\n          if (popupOnKeyPress) popupOnKeyPress(e);\n        };\n\n        switch (type) {\n          case 'separator':\n            return <Separator key={`${instanceUID}-separator-${label}`} {...ariaAndDataProps} />;\n          case 'custom':\n            return (\n              <ItemWrapper\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                key={`${instanceUID}-popup-${label}`}\n                id={id}\n                {...ariaAndDataProps}\n              >\n                {Content && <Content />}\n              </ItemWrapper>\n            );\n          default:\n            return (\n              <ItemWrapper\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                key={`${instanceUID}-popup-${label}`}\n                id={id}\n                {...ariaAndDataProps}\n              >\n                {Icon && <Icon />}\n                {Label && <Label>{label}</Label>}\n              </ItemWrapper>\n            );\n        }\n      }),\n    [options, onItemClick, onClose, popupOnKeyPress, instanceUID],\n  );\n  return <List ref={menuRef}>{content}</List>;\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8D;AAC9D,8BAA2C;AAC3C,oBAAoD;AAEpD,iCAAoC;AAE7B,MAAM,mBAAmB,qBAAM,KAAK,CAAC,EAAE,SAAS,aAAa,SAAS,sBAA0C;AACrH,QAAM,EAAE,gBAAgB,6BAAW;AAEnC,QAAM,UAAU,yBAAuB;AAEvC,8BAAU,MAAM;AACd,IAAC,QAAQ,SAAS,YAAkC;AAAA,KACnD;AAEH,QAAM,UAAU,0BACd,MACE,QAAQ,IAAI,CAAC,WAAW;AACtB,UAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,OAAO;AAEzD,UAAM,mBAAmB,kCACpB,0CAAa,UACb,0CAAa;AAGlB,UAAM,cAAc,CAAC,MAAiD;AACpE,kBAAY;AACZ,UAAI;AAAS,gBAAQ;AAAA;AAGvB,UAAM,gBAAgB,CAAC,MAA2B;AAChD,UAAI,EAAE,SAAS;AAAU;AACzB,UAAI;AAAiB,wBAAgB;AAAA;AAGvC,YAAQ;AAAA,WACD;AACH,eAAO,mDAAC,yBAAD;AAAA,UAAW,KAAK,GAAG,yBAAyB;AAAA,WAAa;AAAA,WAC7D;AACH,eACE,mDAAC,2BAAD;AAAA,UACE,SAAS;AAAA,UACT,WAAW;AAAA,UACX,KAAK,GAAG,qBAAqB;AAAA,UAC7B;AAAA,WACI,mBAEH,WAAW,mDAAC,SAAD;AAAA;AAIhB,eACE,mDAAC,2BAAD;AAAA,UACE,SAAS;AAAA,UACT,WAAW;AAAA,UACX,KAAK,GAAG,qBAAqB;AAAA,UAC7B;AAAA,WACI,mBAEH,QAAQ,mDAAC,MAAD,OACR,uBAAS,mDAAC,qBAAD,MAAQ;AAAA;AAAA,MAK9B,CAAC,SAAS,aAAa,SAAS,iBAAiB;AAEnD,SAAO,mDAAC,oBAAD;AAAA,IAAM,KAAK;AAAA,KAAU;AAAA;",
+  "names": []
+}

package/dist/cjs/outOfTheBox/PopupMenu/styles.js

@@ -0,0 +1,67 @@
+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 __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 });
+  }
+  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);
+};
+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 styles_exports = {};
+__export(styles_exports, {
+  ItemWrapper: () => ItemWrapper,
+  Label: () => Label,
+  List: () => List,
+  Separator: () => Separator
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+const List = import_styled_components.default.div`
+  padding: 5px 0px;
+  background: white;
+`;
+const ItemWrapper = import_styled_components.default.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 Label = import_styled_components.default.p`
+  width: 100%;
+  font-size: 14px;
+  margin: 10px;
+`;
+const Separator = import_styled_components.default.div`
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #ccc;
+`;
+module.exports = __toCommonJS(styles_exports);
+//# sourceMappingURL=styles.js.map

package/dist/cjs/outOfTheBox/PopupMenu/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/PopupMenu/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import styled from 'styled-components';\n\nexport const List = styled.div`\n  padding: 5px 0px;\n  background: white;\n`;\n\nexport const ItemWrapper = styled.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 Label = styled.p`\n  width: 100%;\n  font-size: 14px;\n  margin: 10px;\n`;\n\nexport const Separator = styled.div`\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;ACAA,YAAuB;ADAvB,+BAAmB;AAEZ,MAAM,OAAO,iCAAO;AAAA;AAAA;AAAA;AAKpB,MAAM,cAAc,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAYpB,CAAC,EAAE,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA;AAAA;AAItD,MAAM,QAAQ,iCAAO;AAAA;AAAA;AAAA;AAAA;AAMrB,MAAM,YAAY,iCAAO;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}