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

package/esm/components/Toolbar/ToolbarItems.js

@@ -1,97 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { useContext, useMemo } from 'react';
-import { AppPicker } from '../../outOfTheBox/AppPicker/AppPicker.js';
-import { PopupMenu } from '../../outOfTheBox/PopupMenu/PopupMenu.js';
-import { SearchToggle } from '../../outOfTheBox/SearchToggle/SearchToggle.js';
-import { Button } from './styles.js';
-import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
-import { getDataProps } from '@elliemae/ds-props-helpers';
-import { jsx, Fragment } from 'react/jsx-runtime';
-
-const _excluded = ["Icon", "type", "onClick", "componentProps", "label", "onKeyPress", "id", "CustomComponent"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const ToolbarItems = () => {
-  const {
-    props: {
-      toolbar
-    },
-    instanceUID
-  } = useContext(GlobalHeaderContext);
-  const itemsList = useMemo(() => toolbar === null || toolbar === void 0 ? void 0 : toolbar.map(item => {
-    var _Icon;
-
-    const {
-      Icon,
-      type,
-      onClick,
-      componentProps,
-      label,
-      onKeyPress,
-      id,
-      CustomComponent
-    } = item,
-          otherProps = _objectWithoutProperties(item, _excluded);
-
-    switch (type) {
-      case 'ds-popup-menu':
-        return /*#__PURE__*/jsx(PopupMenu, _objectSpread(_objectSpread({
-          title: label,
-          Icon: Icon,
-          onClick: onClick,
-          onKeyPress: onKeyPress,
-          id: id
-        }, otherProps), {}, {
-          componentProps: componentProps
-        }), "".concat(instanceUID, "-ds-popup-menu-").concat(label));
-
-      case 'ds-app-picker':
-        return /*#__PURE__*/jsx(AppPicker, _objectSpread({
-          label: label,
-          id: id,
-          componentProps: componentProps
-        }, otherProps), "".concat(instanceUID, "-ds-app-picker-").concat(label));
-
-      case 'ds-search-toggle':
-        return /*#__PURE__*/jsx(SearchToggle, _objectSpread({
-          id: id,
-          componentProps: componentProps
-        }, otherProps), "".concat(instanceUID, "-ds-search-toggle-").concat(id));
-
-      case 'custom':
-        if (CustomComponent) return /*#__PURE__*/_jsx(CustomComponent, {
-          item: item
-        });
-        return null;
-
-      default:
-        return /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
-          onClick: onClick,
-          title: label,
-          "data-testid": "gh-toolbar-item",
-          id: id
-        }, getDataProps(otherProps)), {}, {
-          children: _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
-            fill: "#FFF",
-            size: "m"
-          }))
-        }), "".concat(instanceUID, "-ds-toolbar-button-").concat(label));
-    }
-  }), [toolbar, instanceUID]);
-  return /*#__PURE__*/jsx(Fragment, {
-    children: itemsList
-  });
-};
-
-export { ToolbarItems };

package/esm/components/Toolbar/styles.js

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-const Button = /*#__PURE__*/styled.button.withConfig({
-  componentId: "sc-1gqj0i3-0"
-})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.brand[700];
-}, _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.colors.neutral['000'];
-});
-
-export { Button };

package/esm/config/useGetPropsWithDefaults.js

@@ -1,23 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { useMemo } from 'react';
-import { defaultProps } from '../defaultProps.js';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const useGetPropsWithDefaults = props => {
-  const {
-    toolbar,
-    breadcrumb,
-    Logo,
-    LogoWithBrand
-  } = props;
-  return useMemo(() => _objectSpread(_objectSpread({}, defaultProps), props), [toolbar, breadcrumb, Logo, LogoWithBrand]);
-};
-
-export { useGetPropsWithDefaults };

package/esm/config/useGlobalHeader.js

@@ -1,31 +0,0 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-import React, { useState, useMemo } from 'react';
-import { uid } from 'uid';
-import { useGetPropsWithDefaults } from './useGetPropsWithDefaults.js';
-
-const useGlobalHeader = props => {
-  const [showIconOnly, setShowIconOnly] = useState(false);
-  const instanceUID = useMemo(() => uid(5), []);
-  const globalHeaderToolbarGrid = useMemo(() => {
-    var _props$toolbar$length, _props$toolbar;
-
-    return new Array((_props$toolbar$length = props === null || props === void 0 ? void 0 : (_props$toolbar = props.toolbar) === null || _props$toolbar === void 0 ? void 0 : _props$toolbar.length) !== null && _props$toolbar$length !== void 0 ? _props$toolbar$length : 0).fill('auto');
-  }, [props.toolbar]);
-  const globalHeaderBreadcrumbGrid = useMemo(() => {
-    var _props$breadcrumb$len, _props$breadcrumb;
-
-    return ['auto', ...new Array((_props$breadcrumb$len = props === null || props === void 0 ? void 0 : (_props$breadcrumb = props.breadcrumb) === null || _props$breadcrumb === void 0 ? void 0 : _props$breadcrumb.length) !== null && _props$breadcrumb$len !== void 0 ? _props$breadcrumb$len : 0).fill('auto'), '1fr'];
-  }, [props.breadcrumb]);
-  const propsWithDefaults = useGetPropsWithDefaults(props);
-  const ctx = React.useMemo(() => ({
-    props: propsWithDefaults,
-    showIconOnly,
-    setShowIconOnly,
-    instanceUID,
-    globalHeaderToolbarGrid,
-    globalHeaderBreadcrumbGrid
-  }), [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid, globalHeaderBreadcrumbGrid]);
-  return ctx;
-};
-
-export { useGlobalHeader };

package/esm/config/useValidateProps.js

@@ -1,88 +0,0 @@
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { throwLogoError, throwBreadcrumbItemError, isValidToolbarType, throwToolbarItemGenericError, isObject, throwToolbarPopupItemError, throwToolbarAppPickerItemError } from './validateHelpers.js';
-
-const validatePopupItem = componentProps => {
-  if (componentProps.options && !Array.isArray(componentProps.options)) {
-    throwToolbarPopupItemError('options', componentProps.options);
-  }
-
-  if (componentProps.closeOnClick && typeof componentProps.closeOnClick !== 'boolean') {
-    throwToolbarPopupItemError('closeOnClick', componentProps.closeOnClick);
-  }
-};
-
-const validateAppPickerItem = componentProps => {
-  if (componentProps.apps && !Array.isArray(componentProps.apps)) {
-    throwToolbarAppPickerItemError('apps', componentProps.apps);
-  }
-
-  if (componentProps.customApps && !Array.isArray(componentProps.customApps)) {
-    throwToolbarAppPickerItemError('customApps', componentProps.customApps);
-  }
-
-  if (componentProps.sectionTitle && typeof componentProps.sectionTitle !== 'string') {
-    throwToolbarAppPickerItemError('sectionTitle', componentProps.sectionTitle);
-  }
-
-  if (componentProps.customSectionTitle && typeof componentProps.customSectionTitle !== 'string') {
-    throwToolbarAppPickerItemError('customSectionTitle', componentProps.customSectionTitle);
-  }
-};
-
-const useValidateProps = props => {
-  const {
-    breadcrumb,
-    toolbar,
-    Logo,
-    LogoWithBrand
-  } = props;
-
-  if (Logo && typeof Logo !== 'function') {
-    throwLogoError('Logo', Logo);
-  }
-
-  if (LogoWithBrand && typeof LogoWithBrand !== 'function') {
-    throwLogoError('LogoWithBrand', LogoWithBrand);
-  }
-
-  breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.forEach(breadcrumbItem => {
-    if (breadcrumbItem.label && typeof breadcrumbItem.label !== 'string') {
-      throwBreadcrumbItemError('label', breadcrumbItem.label);
-    }
-
-    if (breadcrumbItem.onClick && typeof breadcrumbItem.onClick !== 'function') {
-      throwBreadcrumbItemError('onClick', breadcrumbItem.onClick);
-    }
-
-    if (breadcrumbItem.hasNext && typeof breadcrumbItem.hasNext !== 'boolean') {
-      throwBreadcrumbItemError('hasNext', breadcrumbItem.hasNext);
-    }
-
-    if (breadcrumbItem.isSelected && typeof breadcrumbItem.isSelected !== 'boolean') {
-      throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);
-    }
-  });
-  toolbar === null || toolbar === void 0 ? void 0 : toolbar.forEach(toolbarItem => {
-    if (toolbarItem.type) {
-      if (!isValidToolbarType(toolbarItem.type)) {
-        throwToolbarItemGenericError('type', toolbarItem.type);
-      }
-
-      if (toolbarItem.componentProps && !isObject(toolbarItem.componentProps)) {
-        throwToolbarItemGenericError('componentProps', toolbarItem.componentProps);
-      }
-
-      if (toolbarItem.type === 'ds-popup-menu') {
-        validatePopupItem(toolbarItem.componentProps);
-      }
-
-      if (toolbarItem.type === 'ds-app-picker') {
-        validateAppPickerItem(toolbarItem.componentProps);
-      }
-    }
-  });
-};
-
-export { useValidateProps };

package/esm/config/validateHelpers.js

@@ -1,44 +0,0 @@
-const breadcrumbProps = {
-  label: 'string',
-  onClick: 'function',
-  hasNext: 'boolean',
-  isSelected: 'boolean'
-};
-const toolbarProps = {
-  label: 'string',
-  type: '"ds-app-picker" or "ds-popup-menu" or "ds-search-toggle"',
-  componentProps: 'object',
-  Icon: 'react component',
-  onClick: 'function',
-  options: 'array',
-  closeOnClick: 'boolean',
-  apps: 'array',
-  customApps: 'array',
-  sectionTitle: 'string',
-  customSectionTitle: 'string'
-};
-const isObject = obj => typeof obj === 'object' && !!obj && !Array.isArray(obj);
-const getVariableType = arg => {
-  if (Array.isArray(arg)) return 'array';
-  if (arg === null) return 'null';
-  if (arg === undefined) return 'undefined';
-  return typeof arg;
-};
-const isValidToolbarType = string => string === 'ds-app-picker' || string === 'ds-popup-menu' || string === 'ds-search-toggle' || string === 'custom';
-const throwBreadcrumbItemError = (validPropKey, invalidProp) => {
-  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a breadcrumb item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(typeof invalidProp, ")\n  Expected: (").concat(breadcrumbProps[validPropKey], ")\n  "));
-};
-const throwToolbarPopupItemError = (validPropKey, invalidProp) => {
-  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property inside componentProps for a ds-popup-menu \n    toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
-};
-const throwToolbarAppPickerItemError = (validPropKey, invalidProp) => {
-  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property inside componentProps for a ds-app-picker \n    toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
-};
-const throwToolbarItemGenericError = (validPropKey, invalidProp) => {
-  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
-};
-const throwLogoError = (validPropKey, invalidProp) => {
-  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a global header, \n    remember to provide both Logo and LogoWithBrand properties with a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ").\n  Expected: (react component).\n  "));
-};
-
-export { breadcrumbProps, getVariableType, isObject, isValidToolbarType, throwBreadcrumbItemError, throwLogoError, throwToolbarAppPickerItemError, throwToolbarItemGenericError, throwToolbarPopupItemError, toolbarProps };

package/esm/index.js

@@ -1 +0,0 @@
-export { GlobalHeader, GlobalHeaderWithSchema, GlobalHeader as default } from './GlobalHeader.js';

package/esm/outOfTheBox/AppPicker/AppPicker.js

@@ -1,107 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { useState, useRef, useCallback, useMemo } from 'react';
-import { DSAppPicker } from '@elliemae/ds-app-picker';
-import { mergeRefs } from '@elliemae/ds-utilities';
-import { MenuPicker } from '@elliemae/ds-icons';
-import { Button } from '../../components/Toolbar/styles.js';
-import { getDataProps } from '@elliemae/ds-props-helpers';
-import { jsx } from 'react/jsx-runtime';
-
-var _MenuPicker;
-
-const _excluded = ["label", "id", "componentProps"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const AppPicker = _ref => {
-  let {
-    label,
-    id,
-    componentProps
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-
-  const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef(null);
-  const {
-    apps,
-    icon,
-    customApps,
-    sectionTitle,
-    customSectionTitle,
-    actionRef,
-    isOpen: userIsOpen,
-    onKeyDown: userOnKeyDown,
-    onClickOutside: userOnClickOutside,
-    renderTrigger: userRenderTrigger,
-    onClose,
-    triggerRef,
-    triggerOnClick
-  } = componentProps;
-  const handleTriggerKeyDown = useCallback(e => {
-    if (e.code === 'Enter' || e.code === 'Space') {
-      setIsOpen(true);
-    }
-  }, []);
-  const handleAppPickerOnKeyDown = useCallback(e => {
-    if (e.code === 'Escape') {
-      var _buttonRef$current;
-
-      setIsOpen(false);
-      buttonRef === null || buttonRef === void 0 ? void 0 : (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-    }
-  }, []);
-  const handleOnClickOutside = useCallback(() => {
-    setIsOpen(false);
-  }, []);
-  const handleOnClick = useCallback(() => {
-    setIsOpen(true);
-  }, []);
-  const renderTrigger = useMemo(() => _ref2 => {
-    let {
-      ref
-    } = _ref2;
-    return /*#__PURE__*/jsx("div", {
-      ref: ref,
-      children: /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
-        onClick: triggerOnClick !== null && triggerOnClick !== void 0 ? triggerOnClick : handleOnClick,
-        onKeyDown: handleTriggerKeyDown,
-        ref: mergeRefs(buttonRef, triggerRef),
-        title: label,
-        "data-testid": "gh-toolbar-item",
-        id: id
-      }, getDataProps(otherProps)), {}, {
-        children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx(MenuPicker, {
-          fill: "#FFF",
-          width: 20.73,
-          height: 20.73
-        }))
-      }))
-    });
-  }, [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps]);
-  return /*#__PURE__*/_jsx(DSAppPicker, {
-    apps: apps,
-    customApps: customApps,
-    sectionTitle: sectionTitle,
-    customSectionTitle: customSectionTitle,
-    icon: icon,
-    onKeyDown: userOnKeyDown !== null && userOnKeyDown !== void 0 ? userOnKeyDown : handleAppPickerOnKeyDown,
-    actionRef: actionRef,
-    onClickOutside: userOnClickOutside !== null && userOnClickOutside !== void 0 ? userOnClickOutside : handleOnClickOutside,
-    renderTrigger: userRenderTrigger !== null && userRenderTrigger !== void 0 ? userRenderTrigger : renderTrigger,
-    isOpen: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
-    onClose: onClose,
-    triggerRef: triggerRef
-  });
-};
-
-export { AppPicker };

package/esm/outOfTheBox/PopupMenu/PopupMenu.js

@@ -1,91 +0,0 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { useState, useCallback, useMemo } from 'react';
-import { DSPopperJS } from '@elliemae/ds-popperjs';
-import { PopupMenuContent } from './PopupMenuContent.js';
-import { Button } from '../../components/Toolbar/styles.js';
-import { getDataProps } from '@elliemae/ds-props-helpers';
-import { jsx } from 'react/jsx-runtime';
-
-const _excluded = ["Icon", "title", "onClick", "id", "componentProps"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const PopupMenu = _ref => {
-  var _PopupMenuContent;
-
-  let {
-    Icon,
-    title,
-    onClick,
-    id,
-    componentProps
-  } = _ref,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [buttonRef, setButtonRef] = useState(null);
-  const {
-    onClickOutside = () => null,
-    onKeyPress,
-    popupOnKeyPress,
-    isOpen: userIsOpen,
-    options,
-    closeOnClick
-  } = componentProps;
-  const handleKeyPress = useCallback(e => {
-    if (e.code === 'Enter' || e.code === 'Space') {
-      setIsOpen(true);
-    }
-
-    if (onKeyPress) onKeyPress(e);
-  }, [onKeyPress]);
-  const handleOnClose = useCallback(() => {
-    if (userIsOpen === undefined) {
-      setIsOpen(false);
-    }
-
-    buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
-  }, [buttonRef, userIsOpen]);
-  const handleTriggerOnClick = useCallback(e => {
-    if (userIsOpen === undefined) setIsOpen(true);
-    onClick(e);
-  }, [onClick, userIsOpen]);
-  const handleItemClick = useCallback(() => {
-    if (closeOnClick && userIsOpen === undefined) handleOnClose();
-  }, [closeOnClick, handleOnClose, userIsOpen]);
-  const content = useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx(PopupMenuContent, {
-    options: options,
-    onItemClick: handleItemClick,
-    onClose: handleOnClose,
-    popupOnKeyPress: popupOnKeyPress
-  })), [options, handleItemClick, handleOnClose, popupOnKeyPress]);
-  return /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
-    onClick: handleTriggerOnClick,
-    onKeyPress: handleKeyPress,
-    title: title,
-    ref: setButtonRef,
-    "data-testid": "gh-toolbar-item",
-    id: id
-  }, getDataProps(otherProps)), {}, {
-    children: Icon && /*#__PURE__*/_jsx(Icon, {
-      fill: "#FFF",
-      size: "m"
-    })
-  })), /*#__PURE__*/_jsx(DSPopperJS, {
-    referenceElement: buttonRef,
-    showPopover: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
-    closeContextMenu: handleOnClose,
-    onClickOutside: onClickOutside
-  }, void 0, content));
-};
-
-export { PopupMenu };

package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -1,86 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import React, { useContext, useRef, useEffect, useMemo } from 'react';
-import { getDataProps, getAriaProps } from '@elliemae/ds-props-helpers';
-import { ItemWrapper, Separator, List, Label } from './styles.js';
-import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
-  let {
-    options,
-    onItemClick,
-    onClose,
-    popupOnKeyPress
-  } = _ref;
-  const {
-    instanceUID
-  } = useContext(GlobalHeaderContext);
-  const menuRef = useRef(null);
-  useEffect(() => {
-    var _menuRef$current, _menuRef$current$firs;
-
-    (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : (_menuRef$current$firs = _menuRef$current.firstChild) === null || _menuRef$current$firs === void 0 ? void 0 : _menuRef$current$firs.focus();
-  }, []);
-  const content = useMemo(() => options.map(option => {
-    const {
-      type,
-      Icon,
-      label = '',
-      onClick,
-      Content,
-      id
-    } = option;
-
-    const ariaAndDataProps = _objectSpread(_objectSpread({}, getAriaProps(option)), 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__*/jsx(Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
-
-      case 'custom':
-        return /*#__PURE__*/jsx(ItemWrapper, _objectSpread(_objectSpread({
-          onClick: handleClick,
-          onKeyDown: handleKeyDown,
-          id: id
-        }, ariaAndDataProps), {}, {
-          children: Content && /*#__PURE__*/_jsx(Content, {})
-        }), "".concat(instanceUID, "-popup-").concat(label));
-
-      default:
-        return /*#__PURE__*/jsxs(ItemWrapper, _objectSpread(_objectSpread({
-          onClick: handleClick,
-          onKeyDown: handleKeyDown,
-          id: id
-        }, ariaAndDataProps), {}, {
-          children: [Icon && /*#__PURE__*/_jsx(Icon, {}), Label && /*#__PURE__*/_jsx(Label, {}, void 0, label)]
-        }), "".concat(instanceUID, "-popup-").concat(label));
-    }
-  }), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
-  return /*#__PURE__*/jsx(List, {
-    ref: menuRef,
-    children: content
-  });
-});
-
-export { PopupMenuContent };

package/esm/outOfTheBox/PopupMenu/styles.js

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-
-const List = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-snqcgs-0"
-})(["padding:5px 0px;background:white;"]);
-const ItemWrapper = /*#__PURE__*/styled.button.withConfig({
-  componentId: "sc-snqcgs-1"
-})(["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:", ";}"], _ref => {
-  let {
-    theme
-  } = _ref;
-  return "1px solid ".concat(theme.colors.brand[600]);
-});
-const Label = /*#__PURE__*/styled.p.withConfig({
-  componentId: "sc-snqcgs-2"
-})(["width:100%;font-size:14px;margin:10px;"]);
-const Separator = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-snqcgs-3"
-})(["width:100%;border:none;border-bottom:1px solid #ccc;"]);
-
-export { ItemWrapper, Label, List, Separator };