@elliemae/ds-global-header 2.0.0-rc.13 → 2.0.0-rc.17

package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -2,9 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var dsGrid = require('@elliemae/ds-grid');
 var styles = require('./styles.js');
@@ -14,8 +21,15 @@ var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
+const _excluded = ["label"];
+
+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 _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__default["default"](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; }
 const GlobalHeaderBreadcrumb = () => {
   const {
     props: {
@@ -54,18 +68,14 @@ const GlobalHeaderBreadcrumb = () => {
     showIconOnly: showIconOnly
   }), breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.map(item => {
     const {
-      label,
-      hasNext,
-      isSelected,
-      onClick
-    } = item;
-    return /*#__PURE__*/_jsx__default["default"](PureBreadcrumb.PureBreadcrumb, {
+      label
+    } = item,
+          rest = _objectWithoutProperties__default["default"](item, _excluded);
+
+    return /*#__PURE__*/jsxRuntime.jsx(PureBreadcrumb.PureBreadcrumb, _objectSpread({
       label: label,
-      hasNext: hasNext,
-      isSelected: isSelected,
-      onClick: onClick,
       length: breadcrumb.length
-    }, "".concat(instanceUID, "-breadcrumb-item-").concat(label));
+    }, rest), "".concat(instanceUID, "-breadcrumb-item-").concat(label));
   }), /*#__PURE__*/jsxRuntime.jsx("div", {
     id: "global-header-flex-region",
     ref: flexRegion

package/cjs/components/Breadcrumb/PureBreadcrumb.js

@@ -2,33 +2,56 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var dsIcons = require('@elliemae/ds-icons');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var styles = require('./styles.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _ChevronSmallRight;
+
+const _excluded = ["onClick", "isSelected", "length", "label", "hasNext", "id"];
+
+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 _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__default["default"](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; }
 const PureBreadcrumb = /*#__PURE__*/React__default["default"].memo(_ref => {
   let {
     onClick,
     isSelected,
     length,
     label,
-    hasNext
-  } = _ref;
-  return /*#__PURE__*/_jsx__default["default"](styles.BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.LabelButton, {
+    hasNext,
+    id
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/_jsx__default["default"](styles.BreadcrumbItem, {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styles.LabelButton, _objectSpread(_objectSpread({
     onClick: onClick,
     "aria-selected": isSelected,
-    "data-testid": "gh-breadcrumb-btn"
-  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.Label, {
-    isSelected: !!isSelected,
-    isOnlyItem: length === 1
-  }, void 0, label)), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {
+    "data-testid": "gh-breadcrumb-btn",
+    id: id
+  }, dsPropsHelpers.getDataProps(rest)), {}, {
+    children: /*#__PURE__*/_jsx__default["default"](styles.Label, {
+      isSelected: !!isSelected,
+      isOnlyItem: length === 1
+    }, void 0, label)
+  })), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {
     size: "m",
     fill: "#FFF"
   }))));

package/cjs/components/Breadcrumb/styles.js

@@ -21,40 +21,35 @@ const BreadcrumbItem = /*#__PURE__*/styled__default["default"].div.withConfig({
 })(["display:flex;align-items:center;height:100%;"]);
 const LabelButton = /*#__PURE__*/styled__default["default"].button.withConfig({
   componentId: "sc-1n5l527-2"
-})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{:after{content:'';position:absolute;top:0;left:-7px;width:calc(100% + 14px);height:100%;border:4px solid ", ";border-radius:6px;}:before{content:'';position:absolute;z-index:2;top:2px;left:-5px;width:calc(100% + 10px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref2 => {
+})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{:before{content:'';position:absolute;z-index:2;top:2px;left:-5px;width:calc(100% + 10px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref2 => {
   let {
     theme
   } = _ref2;
-  return theme.colors.brand[700];
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
   return theme.colors.neutral['000'];
 });
 const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-1n5l527-3"
-})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], _ref4 => {
+})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], _ref3 => {
   let {
     theme
-  } = _ref4;
+  } = _ref3;
   return theme.colors.neutral['000'];
-}, _ref5 => {
+}, _ref4 => {
   let {
     theme,
     isSelected
-  } = _ref5;
+  } = _ref4;
   return "-webkit-text-stroke: 0.4px  ".concat(isSelected ? theme.colors.neutral['000'] : 'transparent');
-}, _ref6 => {
+}, _ref5 => {
   let {
     isSelected,
     isOnlyItem
-  } = _ref6;
+  } = _ref5;
   return "2px solid ".concat(isSelected && !isOnlyItem ? '#FFF' : 'transparent');
-}, _ref7 => {
+}, _ref6 => {
   let {
     theme
-  } = _ref7;
+  } = _ref6;
   return "-webkit-text-stroke: 0.4px ".concat(theme.colors.neutral['000']);
 });
 

package/cjs/components/Toolbar/ToolbarItems.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
@@ -14,14 +15,19 @@ require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var AppPicker = require('../../outOfTheBox/AppPicker/AppPicker.js');
 var PopupMenu = require('../../outOfTheBox/PopupMenu/PopupMenu.js');
+var SearchToggle = require('../../outOfTheBox/SearchToggle/SearchToggle.js');
 var styles = require('./styles.js');
 var GlobalHeaderContext = require('../../GlobalHeaderContext.js');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["Icon", "type", "onClick", "componentProps", "label", "onKeyPress", "id"];
 
 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; }
 
@@ -41,37 +47,49 @@ const ToolbarItems = () => {
       type,
       onClick,
       componentProps,
-      label
-    } = item;
+      label,
+      onKeyPress,
+      id
+    } = item,
+          otherProps = _objectWithoutProperties__default["default"](item, _excluded);
 
     switch (type) {
       case 'ds-popup-menu':
-        const {
-          options,
-          closeOnClick
-        } = componentProps;
-        return /*#__PURE__*/_jsx__default["default"](PopupMenu.PopupMenu, {
-          onClick: onClick,
+        return /*#__PURE__*/jsxRuntime.jsx(PopupMenu.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__*/jsxRuntime.jsx(AppPicker.AppPicker, _objectSpread({
-          label: label
-        }, componentProps), "".concat(instanceUID, "-ds-app-picker-").concat(label));
+          label: label,
+          id: id,
+          componentProps: componentProps
+        }, otherProps), "".concat(instanceUID, "-ds-app-picker-").concat(label));
+
+      case 'ds-search-toggle':
+        return /*#__PURE__*/jsxRuntime.jsx(SearchToggle.SearchToggle, _objectSpread({
+          id: id,
+          componentProps: componentProps
+        }, otherProps), "".concat(instanceUID, "-ds-search-toggle-").concat(id));
 
       default:
-        return /*#__PURE__*/_jsx__default["default"](styles.Button, {
+        return /*#__PURE__*/jsxRuntime.jsx(styles.Button, _objectSpread(_objectSpread({
           onClick: onClick,
           title: label,
-          "data-testid": "gh-toolbar-item"
-        }, "".concat(instanceUID, "-ds-toolbar-button-").concat(label), _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {
-          fill: "#FFF",
-          size: "m"
-        })));
+          "data-testid": "gh-toolbar-item",
+          id: id
+        }, dsPropsHelpers.getDataProps(otherProps)), {}, {
+          children: _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {
+            fill: "#FFF",
+            size: "m"
+          }))
+        }), "".concat(instanceUID, "-ds-toolbar-button-").concat(label));
     }
   }), [toolbar, instanceUID]);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {

package/cjs/components/Toolbar/styles.js

@@ -10,7 +10,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const Button = /*#__PURE__*/styled__default["default"].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;
@@ -19,11 +19,6 @@ const Button = /*#__PURE__*/styled__default["default"].button.withConfig({
   let {
     theme
   } = _ref2;
-  return theme.colors.brand[700];
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
   return theme.colors.neutral['000'];
 });
 

package/cjs/config/useGlobalHeader.js

@@ -17,7 +17,7 @@ const useGlobalHeader = props => {
   const globalHeaderToolbarGrid = React.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('1fr');
+    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 = React.useMemo(() => {
     var _props$breadcrumb$len, _props$breadcrumb;

package/cjs/config/useValidateProps.js

@@ -35,21 +35,6 @@ const validateAppPickerItem = componentProps => {
   }
 };
 
-const validateGenericToolbarItem = item => {
-  if (item.label && typeof item.label !== 'string') {
-    validateHelpers.throwToolbarItemGenericError('label', item.label);
-  }
-
-  if (item.onClick && typeof item.onClick !== 'function') {
-    validateHelpers.throwToolbarItemGenericError('onClick', item.onClick);
-  }
-
-  if (item.Icon && typeof item.Icon !== 'function') {
-    if (item.type === 'ds-app-picker') return;
-    validateHelpers.throwToolbarItemGenericError('Icon', item.Icon);
-  }
-};
-
 const useValidateProps = props => {
   const {
     breadcrumb,
@@ -84,8 +69,6 @@ const useValidateProps = props => {
     }
   });
   toolbar === null || toolbar === void 0 ? void 0 : toolbar.forEach(toolbarItem => {
-    validateGenericToolbarItem(toolbarItem);
-
     if (toolbarItem.type) {
       if (!validateHelpers.isValidToolbarType(toolbarItem.type)) {
         validateHelpers.throwToolbarItemGenericError('type', toolbarItem.type);

package/cjs/config/validateHelpers.js

@@ -10,7 +10,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',
@@ -28,7 +28,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';
 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/cjs/outOfTheBox/AppPicker/AppPicker.js

@@ -2,23 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var dsAppPicker = require('@elliemae/ds-app-picker');
 var dsUtilities = require('@elliemae/ds-utilities');
 var dsIcons = require('@elliemae/ds-icons');
 var styles = require('../../components/Toolbar/styles.js');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
 var _MenuPicker;
+
+const _excluded = ["label", "id", "componentProps"];
+
+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 _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__default["default"](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; }
 const AppPicker = _ref => {
   let {
     label,
+    id,
+    componentProps
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const {
     apps,
     icon,
     customApps,
@@ -32,9 +56,7 @@ const AppPicker = _ref => {
     onClose,
     triggerRef,
     triggerOnClick
-  } = _ref;
-  const [isOpen, setIsOpen] = React.useState(false);
-  const buttonRef = React.useRef(null);
+  } = componentProps;
   const handleTriggerKeyDown = React.useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
@@ -60,19 +82,22 @@ const AppPicker = _ref => {
     } = _ref2;
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: ref,
-      children: /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
+      children: /*#__PURE__*/jsxRuntime.jsx(styles.Button, _objectSpread(_objectSpread({
         onClick: triggerOnClick !== null && triggerOnClick !== void 0 ? triggerOnClick : handleOnClick,
         onKeyDown: handleTriggerKeyDown,
         ref: dsUtilities.mergeRefs(buttonRef, triggerRef),
         title: label,
         "data-testid": "gh-toolbar-item",
+        id: id
+      }, dsPropsHelpers.getDataProps(otherProps)), {}, {
         children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx__default["default"](dsIcons.MenuPicker, {
           fill: "#FFF",
-          size: "m"
+          width: 20.73,
+          height: 20.73
         }))
-      })
+      }))
     });
-  }, [triggerOnClick, handleOnClick, handleTriggerKeyDown, label]);
+  }, [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps]);
   return /*#__PURE__*/_jsx__default["default"](dsAppPicker.DSAppPicker, {
     apps: apps,
     customApps: customApps,

package/cjs/outOfTheBox/PopupMenu/PopupMenu.js

@@ -2,65 +2,99 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var dsPopperjs = require('@elliemae/ds-popperjs');
 var PopupMenuContent = require('./PopupMenuContent.js');
 var styles = require('../../components/Toolbar/styles.js');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
+const _excluded = ["Icon", "title", "onClick", "id", "componentProps"];
+
+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 _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__default["default"](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; }
 const PopupMenu = _ref => {
   var _PopupMenuContent;
 
   let {
     Icon,
-    options,
-    closeOnClick,
     title,
-    onClick
-  } = _ref;
+    onClick,
+    id,
+    componentProps
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
   const [isOpen, setIsOpen] = React.useState(false);
   const [buttonRef, setButtonRef] = React.useState(null);
+  const {
+    onClickOutside = () => null,
+    onKeyPress,
+    popupOnKeyPress,
+    isOpen: userIsOpen,
+    options,
+    closeOnClick
+  } = componentProps;
   const handleKeyPress = React.useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
-  }, []);
+
+    if (onKeyPress) onKeyPress(e);
+  }, [onKeyPress]);
   const handleOnClose = React.useCallback(() => {
-    setIsOpen(false);
+    if (userIsOpen === undefined) {
+      setIsOpen(false);
+    }
+
     buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
-  }, [buttonRef]);
+  }, [buttonRef, userIsOpen]);
   const handleTriggerOnClick = React.useCallback(e => {
-    setIsOpen(true);
+    if (userIsOpen === undefined) setIsOpen(true);
     onClick(e);
-  }, [onClick]);
+  }, [onClick, userIsOpen]);
   const handleItemClick = React.useCallback(() => {
-    if (closeOnClick) handleOnClose();
-  }, [closeOnClick, handleOnClose]);
+    if (closeOnClick && userIsOpen === undefined) handleOnClose();
+  }, [closeOnClick, handleOnClose, userIsOpen]);
   const content = React.useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx__default["default"](PopupMenuContent.PopupMenuContent, {
     options: options,
     onItemClick: handleItemClick,
-    onClose: handleOnClose
-  })), [options, handleItemClick, handleOnClose]);
-  return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
+    onClose: handleOnClose,
+    popupOnKeyPress: popupOnKeyPress
+  })), [options, handleItemClick, handleOnClose, popupOnKeyPress]);
+  return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styles.Button, _objectSpread(_objectSpread({
     onClick: handleTriggerOnClick,
     onKeyPress: handleKeyPress,
     title: title,
     ref: setButtonRef,
     "data-testid": "gh-toolbar-item",
+    id: id
+  }, dsPropsHelpers.getDataProps(otherProps)), {}, {
     children: Icon && /*#__PURE__*/_jsx__default["default"](Icon, {
       fill: "#FFF",
       size: "m"
     })
-  }), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
+  })), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
     referenceElement: buttonRef,
-    showPopover: isOpen,
-    closeContextMenu: handleOnClose
+    showPopover: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
+    closeContextMenu: handleOnClose,
+    onClickOutside: onClickOutside
   }, void 0, content));
 };
 

package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -30,7 +30,8 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
   let {
     options,
     onItemClick,
-    onClose
+    onClose,
+    popupOnKeyPress
   } = _ref;
   const {
     instanceUID
@@ -47,7 +48,8 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
       Icon,
       label = '',
       onClick,
-      Content
+      Content,
+      id
     } = option;
 
     const ariaAndDataProps = _objectSpread(_objectSpread({}, dsPropsHelpers.getAriaProps(option)), dsPropsHelpers.getDataProps(option));
@@ -59,6 +61,7 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
 
     const handleKeyDown = e => {
       if (e.code === 'Escape') onClose();
+      if (popupOnKeyPress) popupOnKeyPress(e);
     };
 
     switch (type) {
@@ -68,7 +71,8 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
       case 'custom':
         return /*#__PURE__*/jsxRuntime.jsx(styles.ItemWrapper, _objectSpread(_objectSpread({
           onClick: handleClick,
-          onKeyDown: handleKeyDown
+          onKeyDown: handleKeyDown,
+          id: id
         }, ariaAndDataProps), {}, {
           children: Content && /*#__PURE__*/_jsx__default["default"](Content, {})
         }), "".concat(instanceUID, "-popup-").concat(label));
@@ -76,12 +80,13 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
       default:
         return /*#__PURE__*/jsxRuntime.jsxs(styles.ItemWrapper, _objectSpread(_objectSpread({
           onClick: handleClick,
-          onKeyDown: handleKeyDown
+          onKeyDown: handleKeyDown,
+          id: id
         }, ariaAndDataProps), {}, {
           children: [Icon && /*#__PURE__*/_jsx__default["default"](Icon, {}), styles.Label && /*#__PURE__*/_jsx__default["default"](styles.Label, {}, void 0, label)]
         }), "".concat(instanceUID, "-popup-").concat(label));
     }
-  }), [onClose, onItemClick, options, instanceUID]);
+  }), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
   return /*#__PURE__*/jsxRuntime.jsx(styles.List, {
     ref: menuRef,
     children: content

package/cjs/outOfTheBox/PopupMenu/styles.js

@@ -10,7 +10,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const List = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-snqcgs-0"
-})(["padding:5px 0px;"]);
+})(["padding:5px 0px;background:white;"]);
 const ItemWrapper = /*#__PURE__*/styled__default["default"].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 => {