@elliemae/ds-global-header 2.0.0-rc.9 → 2.0.2

package/esm/components/Toolbar/ToolbarItems.js

@@ -1,5 +1,6 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 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';
@@ -7,16 +8,20 @@ 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, createElement } from 'react';
+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';
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+const _excluded = ["Icon", "type", "onClick", "componentProps", "label", "onKeyPress", "id", "CustomComponent"];
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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: {
@@ -24,7 +29,7 @@ const ToolbarItems = () => {
     },
     instanceUID
   } = useContext(GlobalHeaderContext);
-  const itemsList = useMemo(() => toolbar.map(item => {
+  const itemsList = useMemo(() => toolbar === null || toolbar === void 0 ? void 0 : toolbar.map(item => {
     var _Icon;
 
     const {
@@ -32,39 +37,56 @@ const ToolbarItems = () => {
       type,
       onClick,
       componentProps,
-      label
-    } = item;
+      label,
+      onKeyPress,
+      id,
+      CustomComponent
+    } = item,
+          otherProps = _objectWithoutProperties(item, _excluded);
 
     switch (type) {
       case 'ds-popup-menu':
-        const {
-          options,
-          closeOnClick
-        } = componentProps;
-        return /*#__PURE__*/_jsx(PopupMenu, {
-          onClick: onClick,
+        return /*#__PURE__*/jsx(PopupMenu, _objectSpread(_objectSpread({
           title: label,
           Icon: Icon,
-          options: options,
-          closeOnClick: closeOnClick
-        }, "".concat(instanceUID, "-ds-popup-menu-").concat(label));
+          onClick: onClick,
+          onKeyPress: onKeyPress,
+          id: id
+        }, otherProps), {}, {
+          componentProps: componentProps
+        }), "".concat(instanceUID, "-ds-popup-menu-").concat(label));
 
       case 'ds-app-picker':
-        return /*#__PURE__*/createElement(AppPicker, _objectSpread(_objectSpread({}, componentProps), {}, {
-          onClick: onClick,
+        return /*#__PURE__*/jsx(AppPicker, _objectSpread({
           label: label,
-          key: "".concat(instanceUID, "-ds-app-picker-").concat(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, {
+        return /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
           onClick: onClick,
           title: label,
-          "data-testid": "gh-toolbar-item"
-        }, "".concat(instanceUID, "-ds-toolbar-button-").concat(label), _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
-          fill: "#FFF",
-          size: "m"
-        })));
+          "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, {

package/esm/components/Toolbar/styles.js

@@ -2,7 +2,7 @@ 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{:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid ", ";border-radius:4px;}: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 => {
+})(["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;
@@ -11,11 +11,6 @@ const Button = /*#__PURE__*/styled.button.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.colors.brand[700];
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
   return theme.colors.neutral['000'];
 });
 

package/esm/config/useGetPropsWithDefaults.js

@@ -7,9 +7,9 @@ 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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,

package/esm/config/useGlobalHeader.js

@@ -1,6 +1,4 @@
 import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
 import React, { useState, useMemo } from 'react';
 import { uid } from 'uid';
 import { useGetPropsWithDefaults } from './useGetPropsWithDefaults.js';
@@ -8,8 +6,16 @@ import { useGetPropsWithDefaults } from './useGetPropsWithDefaults.js';
 const useGlobalHeader = props => {
   const [showIconOnly, setShowIconOnly] = useState(false);
   const instanceUID = useMemo(() => uid(5), []);
-  const globalHeaderToolbarGrid = useMemo(() => props.toolbar.map(() => '1fr'), [props.toolbar]);
-  const globalHeaderBreadcrumbGrid = useMemo(() => ['auto', ...props.breadcrumb.map(() => 'auto'), '1fr'], [props.breadcrumb]);
+  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,

package/esm/config/useValidateProps.js

@@ -31,21 +31,6 @@ const validateAppPickerItem = componentProps => {
   }
 };
 
-const validateGenericToolbarItem = item => {
-  if (item.label && typeof item.label !== 'string') {
-    throwToolbarItemGenericError('label', item.label);
-  }
-
-  if (item.onClick && typeof item.onClick !== 'function') {
-    throwToolbarItemGenericError('onClick', item.onClick);
-  }
-
-  if (item.Icon && typeof item.Icon !== 'function') {
-    if (item.type === 'ds-app-picker') return;
-    throwToolbarItemGenericError('Icon', item.Icon);
-  }
-};
-
 const useValidateProps = props => {
   const {
     breadcrumb,
@@ -62,7 +47,7 @@ const useValidateProps = props => {
     throwLogoError('LogoWithBrand', LogoWithBrand);
   }
 
-  breadcrumb.forEach(breadcrumbItem => {
+  breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.forEach(breadcrumbItem => {
     if (breadcrumbItem.label && typeof breadcrumbItem.label !== 'string') {
       throwBreadcrumbItemError('label', breadcrumbItem.label);
     }
@@ -79,9 +64,7 @@ const useValidateProps = props => {
       throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);
     }
   });
-  toolbar.forEach(toolbarItem => {
-    validateGenericToolbarItem(toolbarItem);
-
+  toolbar === null || toolbar === void 0 ? void 0 : toolbar.forEach(toolbarItem => {
     if (toolbarItem.type) {
       if (!isValidToolbarType(toolbarItem.type)) {
         throwToolbarItemGenericError('type', toolbarItem.type);
@@ -93,7 +76,9 @@ const useValidateProps = props => {
 
       if (toolbarItem.type === 'ds-popup-menu') {
         validatePopupItem(toolbarItem.componentProps);
-      } else {
+      }
+
+      if (toolbarItem.type === 'ds-app-picker') {
         validateAppPickerItem(toolbarItem.componentProps);
       }
     }

package/esm/config/validateHelpers.js

@@ -6,7 +6,7 @@ const breadcrumbProps = {
 };
 const toolbarProps = {
   label: 'string',
-  type: '"ds-app-picker" or "ds-popup-menu"',
+  type: '"ds-app-picker" or "ds-popup-menu" or "ds-search-toggle"',
   componentProps: 'object',
   Icon: 'react component',
   onClick: 'function',
@@ -24,7 +24,7 @@ const getVariableType = arg => {
   if (arg === undefined) return 'undefined';
   return typeof arg;
 };
-const isValidToolbarType = string => string === 'ds-app-picker' || string === 'ds-popup-menu';
+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  "));
 };

package/esm/defaultProps.js

@@ -1,8 +1,10 @@
+const emptyComp = () => null;
+
 const defaultProps = {
   breadcrumb: [],
   toolbar: [],
-  LogoWithBrand: null,
-  Logo: null
+  LogoWithBrand: emptyComp,
+  Logo: emptyComp
 };
 
 export { defaultProps };

package/esm/outOfTheBox/AppPicker/AppPicker.js

@@ -1,77 +1,107 @@
+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 AppPicker = _ref => {
-  var _DSAppPicker;
 
+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,
-    onClick = () => null,
     actionRef,
-    onKeyDown: customHandleOnKeyDown = () => null
-  } = _ref;
-  const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef();
+    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 => {
-    customHandleOnKeyDown(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();
     }
-  }, [customHandleOnKeyDown]);
+  }, []);
   const handleOnClickOutside = useCallback(() => {
     setIsOpen(false);
   }, []);
-  const handleOnClick = useCallback(e => {
+  const handleOnClick = useCallback(() => {
     setIsOpen(true);
-    onClick(e);
-  }, [onClick]);
-  const trigger = useMemo(() => _ref2 => {
+  }, []);
+  const renderTrigger = useMemo(() => _ref2 => {
     let {
       ref
     } = _ref2;
     return /*#__PURE__*/jsx("div", {
       ref: ref,
-      children: /*#__PURE__*/jsx(Button, {
-        onClick: handleOnClick,
+      children: /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
+        onClick: triggerOnClick !== null && triggerOnClick !== void 0 ? triggerOnClick : handleOnClick,
         onKeyDown: handleTriggerKeyDown,
-        ref: buttonRef,
+        ref: mergeRefs(buttonRef, triggerRef),
         title: label,
         "data-testid": "gh-toolbar-item",
+        id: id
+      }, getDataProps(otherProps)), {}, {
         children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx(MenuPicker, {
           fill: "#FFF",
-          size: "m"
+          width: 20.73,
+          height: 20.73
         }))
-      })
+      }))
     });
-  }, [handleOnClick, handleTriggerKeyDown, label]);
-  return useMemo(() => _DSAppPicker || (_DSAppPicker = /*#__PURE__*/_jsx(DSAppPicker, {
-    isOpen: isOpen,
+  }, [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps]);
+  return /*#__PURE__*/_jsx(DSAppPicker, {
     apps: apps,
     customApps: customApps,
     sectionTitle: sectionTitle,
     customSectionTitle: customSectionTitle,
-    onClickOutside: handleOnClickOutside,
-    renderTrigger: trigger,
-    triggerRef: buttonRef,
+    icon: icon,
+    onKeyDown: userOnKeyDown !== null && userOnKeyDown !== void 0 ? userOnKeyDown : handleAppPickerOnKeyDown,
     actionRef: actionRef,
-    onKeyDown: handleAppPickerOnKeyDown
-  })), [actionRef, apps, customApps, customSectionTitle, handleAppPickerOnKeyDown, handleOnClickOutside, isOpen, sectionTitle, trigger]);
+    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,77 +1,91 @@
+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 { useState, useRef, useCallback, useMemo } from 'react';
-import Popover from '@elliemae/ds-popover';
+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,
-    options,
-    closeOnClick,
     title,
-    onClick
-  } = _ref;
+    onClick,
+    id,
+    componentProps
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
   const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef();
+  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(() => {
-    var _buttonRef$current;
+    if (userIsOpen === undefined) {
+      setIsOpen(false);
+    }
 
-    setIsOpen(false);
-    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-  }, []);
+    buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
+  }, [buttonRef, userIsOpen]);
   const handleTriggerOnClick = useCallback(e => {
-    setIsOpen(true);
+    if (userIsOpen === undefined) setIsOpen(true);
     onClick(e);
-  }, [onClick]);
+  }, [onClick, userIsOpen]);
   const handleItemClick = useCallback(() => {
-    if (closeOnClick) handleOnClose();
-  }, [closeOnClick, handleOnClose]);
-  const handleClickOutside = useCallback(() => setIsOpen(false), []);
+    if (closeOnClick && userIsOpen === undefined) handleOnClose();
+  }, [closeOnClick, handleOnClose, userIsOpen]);
   const content = useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx(PopupMenuContent, {
     options: options,
     onItemClick: handleItemClick,
-    onClose: handleOnClose
-  })), [options, handleItemClick, handleOnClose]);
-  const trigger = useMemo(() => _ref2 => {
-    let {
-      ref
-    } = _ref2;
-    return /*#__PURE__*/jsx(Button, {
-      onClick: handleTriggerOnClick,
-      onKeyPress: handleKeyPress,
-      title: title,
-      ref: buttonRef,
-      "data-testid": "gh-toolbar-item",
-      children: /*#__PURE__*/_jsx(Icon, {
-        innerRef: ref,
-        fill: "#FFF",
-        size: "m"
-      })
-    });
-  }, [Icon, handleKeyPress, handleTriggerOnClick, title]);
-  return useMemo(() => /*#__PURE__*/_jsx(Popover, {
-    isOpen: isOpen,
-    content: content,
-    onClickOutside: handleClickOutside,
-    placement: "bottom",
-    interactionType: "click",
-    showArrow: true,
-    style: {
-      padding: '0',
-      width: 'fit-content'
-    },
-    renderTrigger: trigger
-  }), [content, handleClickOutside, isOpen, trigger]);
+    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,63 +1,82 @@
 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 { ItemWrapper, Label, Separator, List } from './styles.js';
+import { getDataProps, getAriaProps } from '@elliemae/ds-props-helpers';
+import { ItemWrapper, Separator, List, Label } from './styles.js';
 import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
-import { jsx } from 'react/jsx-runtime';
+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
+    onClose,
+    popupOnKeyPress
   } = _ref;
   const {
     instanceUID
   } = useContext(GlobalHeaderContext);
-  const menuRef = useRef();
+  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 => {
-    var _Content;
-
     const {
       type,
-      icon,
-      label,
+      Icon,
+      label = '',
       onClick,
-      Content
+      Content,
+      id
     } = option;
 
+    const ariaAndDataProps = _objectSpread(_objectSpread({}, getAriaProps(option)), getDataProps(option));
+
     const handleClick = e => {
       onItemClick(e);
-      onClick(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, {}, "".concat(instanceUID, "-separator-").concat(label));
+        return /*#__PURE__*/jsx(Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
 
       case 'custom':
-        return /*#__PURE__*/_jsx(ItemWrapper, {
+        return /*#__PURE__*/jsx(ItemWrapper, _objectSpread(_objectSpread({
           onClick: handleClick,
-          onKeyDown: handleKeyDown
-        }, "".concat(instanceUID, "-popup-").concat(label), _Content || (_Content = /*#__PURE__*/_jsx(Content, {})));
+          onKeyDown: handleKeyDown,
+          id: id
+        }, ariaAndDataProps), {}, {
+          children: Content && /*#__PURE__*/_jsx(Content, {})
+        }), "".concat(instanceUID, "-popup-").concat(label));
 
       default:
-        return /*#__PURE__*/_jsx(ItemWrapper, {
+        return /*#__PURE__*/jsxs(ItemWrapper, _objectSpread(_objectSpread({
           onClick: handleClick,
-          onKeyDown: handleKeyDown
-        }, "".concat(instanceUID, "-popup-").concat(label), icon, Label && /*#__PURE__*/_jsx(Label, {}, void 0, label));
+          onKeyDown: handleKeyDown,
+          id: id
+        }, ariaAndDataProps), {}, {
+          children: [Icon && /*#__PURE__*/_jsx(Icon, {}), Label && /*#__PURE__*/_jsx(Label, {}, void 0, label)]
+        }), "".concat(instanceUID, "-popup-").concat(label));
     }
-  }), [onClose, onItemClick, options, instanceUID]);
+  }), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
   return /*#__PURE__*/jsx(List, {
     ref: menuRef,
     children: content