@elliemae/ds-global-header 1.60.0 → 2.0.0-alpha.12

package/cjs/components/Toolbar/styles.js

@@ -8,18 +8,23 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Button = /*#__PURE__*/styled__default['default'].button.withConfig({
+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;}}"], function (_ref) {
-  var theme = _ref.theme;
+})(["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 => {
+  let {
+    theme
+  } = _ref;
   return theme.colors.brand[700];
-}, function (_ref2) {
-  var theme = _ref2.theme;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
   return theme.colors.brand[700];
-}, function (_ref3) {
-  var theme = _ref3.theme;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
   return theme.colors.neutral['000'];
 });
 
 exports.Button = Button;
-//# sourceMappingURL=styles.js.map

package/cjs/config/useGetPropsWithDefaults.js

@@ -2,6 +2,11 @@
 
 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 React = require('react');
 var defaultProps = require('../defaultProps.js');
@@ -12,16 +17,15 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 
 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; }
-var useGetPropsWithDefaults = function useGetPropsWithDefaults(props) {
-  var toolbar = props.toolbar,
-      breadcrumb = props.breadcrumb,
-      Logo = props.Logo,
-      LogoWithBrand = props.LogoWithBrand;
-  return React.useMemo(function () {
-    return _objectSpread(_objectSpread({}, defaultProps.defaultProps), props);
-  }, [toolbar, breadcrumb, Logo, LogoWithBrand]);
+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 useGetPropsWithDefaults = props => {
+  const {
+    toolbar,
+    breadcrumb,
+    Logo,
+    LogoWithBrand
+  } = props;
+  return React.useMemo(() => _objectSpread(_objectSpread({}, defaultProps.defaultProps), props), [toolbar, breadcrumb, Logo, LogoWithBrand]);
 };
 
 exports.useGetPropsWithDefaults = useGetPropsWithDefaults;
-//# sourceMappingURL=useGetPropsWithDefaults.js.map

package/cjs/config/useGlobalHeader.js

@@ -2,52 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var uid = require('uid');
-var config_useGetPropsWithDefaults = require('./useGetPropsWithDefaults.js');
-require('@babel/runtime/helpers/defineProperty');
-require('../defaultProps.js');
+var useGetPropsWithDefaults = require('./useGetPropsWithDefaults.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var useGlobalHeader = function useGlobalHeader(props) {
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      showIconOnly = _useState2[0],
-      setShowIconOnly = _useState2[1];
-
-  var instanceUID = React.useMemo(function () {
-    return uid.uid(5);
-  }, []);
-  var globalHeaderToolbarGrid = React.useMemo(function () {
-    return props.toolbar.map(function () {
-      return '1fr';
-    });
+const useGlobalHeader = props => {
+  const [showIconOnly, setShowIconOnly] = React.useState(false);
+  const instanceUID = React.useMemo(() => uid.uid(5), []);
+  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');
   }, [props.toolbar]);
-  var globalHeaderBreadcrumbGrid = React.useMemo(function () {
-    return ['auto'].concat(_toConsumableArray__default['default'](props.breadcrumb.map(function () {
-      return 'auto';
-    })), ['1fr']);
+  const globalHeaderBreadcrumbGrid = React.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]);
-  var propsWithDefaults = config_useGetPropsWithDefaults.useGetPropsWithDefaults(props);
-  var ctx = React__default['default'].useMemo(function () {
-    return {
-      props: propsWithDefaults,
-      showIconOnly: showIconOnly,
-      setShowIconOnly: setShowIconOnly,
-      instanceUID: instanceUID,
-      globalHeaderToolbarGrid: globalHeaderToolbarGrid,
-      globalHeaderBreadcrumbGrid: globalHeaderBreadcrumbGrid
-    };
-  }, [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid, globalHeaderBreadcrumbGrid]);
+  const propsWithDefaults = useGetPropsWithDefaults.useGetPropsWithDefaults(props);
+  const ctx = React__default["default"].useMemo(() => ({
+    props: propsWithDefaults,
+    showIconOnly,
+    setShowIconOnly,
+    instanceUID,
+    globalHeaderToolbarGrid,
+    globalHeaderBreadcrumbGrid
+  }), [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid, globalHeaderBreadcrumbGrid]);
   return ctx;
 };
 
 exports.useGlobalHeader = useGlobalHeader;
-//# sourceMappingURL=useGlobalHeader.js.map

package/cjs/config/useValidateProps.js

@@ -2,93 +2,97 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var config_validateHelpers = require('./validateHelpers.js');
-require('@babel/runtime/helpers/typeof');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var validateHelpers = require('./validateHelpers.js');
 
-var validatePopupItem = function validatePopupItem(componentProps) {
+const validatePopupItem = componentProps => {
   if (componentProps.options && !Array.isArray(componentProps.options)) {
-    config_validateHelpers.throwToolbarPopupItemError('options', componentProps.options);
+    validateHelpers.throwToolbarPopupItemError('options', componentProps.options);
   }
 
   if (componentProps.closeOnClick && typeof componentProps.closeOnClick !== 'boolean') {
-    config_validateHelpers.throwToolbarPopupItemError('closeOnClick', componentProps.closeOnClick);
+    validateHelpers.throwToolbarPopupItemError('closeOnClick', componentProps.closeOnClick);
   }
 };
 
-var validateAppPickerItem = function validateAppPickerItem(componentProps) {
+const validateAppPickerItem = componentProps => {
   if (componentProps.apps && !Array.isArray(componentProps.apps)) {
-    config_validateHelpers.throwToolbarAppPickerItemError('apps', componentProps.apps);
+    validateHelpers.throwToolbarAppPickerItemError('apps', componentProps.apps);
   }
 
   if (componentProps.customApps && !Array.isArray(componentProps.customApps)) {
-    config_validateHelpers.throwToolbarAppPickerItemError('customApps', componentProps.customApps);
+    validateHelpers.throwToolbarAppPickerItemError('customApps', componentProps.customApps);
   }
 
   if (componentProps.sectionTitle && typeof componentProps.sectionTitle !== 'string') {
-    config_validateHelpers.throwToolbarAppPickerItemError('sectionTitle', componentProps.sectionTitle);
+    validateHelpers.throwToolbarAppPickerItemError('sectionTitle', componentProps.sectionTitle);
   }
 
   if (componentProps.customSectionTitle && typeof componentProps.customSectionTitle !== 'string') {
-    config_validateHelpers.throwToolbarAppPickerItemError('customSectionTitle', componentProps.customSectionTitle);
+    validateHelpers.throwToolbarAppPickerItemError('customSectionTitle', componentProps.customSectionTitle);
   }
 };
 
-var validateGenericToolbarItem = function validateGenericToolbarItem(item) {
+const validateGenericToolbarItem = item => {
   if (item.label && typeof item.label !== 'string') {
-    config_validateHelpers.throwToolbarItemGenericError('label', item.label);
+    validateHelpers.throwToolbarItemGenericError('label', item.label);
   }
 
   if (item.onClick && typeof item.onClick !== 'function') {
-    config_validateHelpers.throwToolbarItemGenericError('onClick', item.onClick);
+    validateHelpers.throwToolbarItemGenericError('onClick', item.onClick);
   }
 
   if (item.Icon && typeof item.Icon !== 'function') {
     if (item.type === 'ds-app-picker') return;
-    config_validateHelpers.throwToolbarItemGenericError('Icon', item.Icon);
+    validateHelpers.throwToolbarItemGenericError('Icon', item.Icon);
   }
 };
 
-var useValidateProps = function useValidateProps(props) {
-  var breadcrumb = props.breadcrumb,
-      toolbar = props.toolbar,
-      Logo = props.Logo,
-      LogoWithBrand = props.LogoWithBrand;
+const useValidateProps = props => {
+  const {
+    breadcrumb,
+    toolbar,
+    Logo,
+    LogoWithBrand
+  } = props;
 
   if (Logo && typeof Logo !== 'function') {
-    config_validateHelpers.throwLogoError('Logo', Logo);
+    validateHelpers.throwLogoError('Logo', Logo);
   }
 
   if (LogoWithBrand && typeof LogoWithBrand !== 'function') {
-    config_validateHelpers.throwLogoError('LogoWithBrand', LogoWithBrand);
+    validateHelpers.throwLogoError('LogoWithBrand', LogoWithBrand);
   }
 
-  breadcrumb.forEach(function (breadcrumbItem) {
+  breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.forEach(breadcrumbItem => {
     if (breadcrumbItem.label && typeof breadcrumbItem.label !== 'string') {
-      config_validateHelpers.throwBreadcrumbItemError('label', breadcrumbItem.label);
+      validateHelpers.throwBreadcrumbItemError('label', breadcrumbItem.label);
     }
 
     if (breadcrumbItem.onClick && typeof breadcrumbItem.onClick !== 'function') {
-      config_validateHelpers.throwBreadcrumbItemError('onClick', breadcrumbItem.onClick);
+      validateHelpers.throwBreadcrumbItemError('onClick', breadcrumbItem.onClick);
     }
 
     if (breadcrumbItem.hasNext && typeof breadcrumbItem.hasNext !== 'boolean') {
-      config_validateHelpers.throwBreadcrumbItemError('hasNext', breadcrumbItem.hasNext);
+      validateHelpers.throwBreadcrumbItemError('hasNext', breadcrumbItem.hasNext);
     }
 
     if (breadcrumbItem.isSelected && typeof breadcrumbItem.isSelected !== 'boolean') {
-      config_validateHelpers.throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);
+      validateHelpers.throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);
     }
   });
-  toolbar.forEach(function (toolbarItem) {
+  toolbar === null || toolbar === void 0 ? void 0 : toolbar.forEach(toolbarItem => {
     validateGenericToolbarItem(toolbarItem);
 
     if (toolbarItem.type) {
-      if (!config_validateHelpers.isValidToolbarType(toolbarItem.type)) {
-        config_validateHelpers.throwToolbarItemGenericError('type', toolbarItem.type);
+      if (!validateHelpers.isValidToolbarType(toolbarItem.type)) {
+        validateHelpers.throwToolbarItemGenericError('type', toolbarItem.type);
       }
 
-      if (toolbarItem.componentProps && !config_validateHelpers.isObject(toolbarItem.componentProps)) {
-        config_validateHelpers.throwToolbarItemGenericError('componentProps', toolbarItem.componentProps);
+      if (toolbarItem.componentProps && !validateHelpers.isObject(toolbarItem.componentProps)) {
+        validateHelpers.throwToolbarItemGenericError('componentProps', toolbarItem.componentProps);
       }
 
       if (toolbarItem.type === 'ds-popup-menu') {
@@ -101,4 +105,3 @@ var useValidateProps = function useValidateProps(props) {
 };
 
 exports.useValidateProps = useValidateProps;
-//# sourceMappingURL=useValidateProps.js.map

package/cjs/config/validateHelpers.js

@@ -2,19 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _typeof = require('@babel/runtime/helpers/typeof');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
-
-var breadcrumbProps = {
+const breadcrumbProps = {
   label: 'string',
   onClick: 'function',
   hasNext: 'boolean',
   isSelected: 'boolean'
 };
-var toolbarProps = {
+const toolbarProps = {
   label: 'string',
   type: '"ds-app-picker" or "ds-popup-menu"',
   componentProps: 'object',
@@ -27,31 +21,27 @@ var toolbarProps = {
   sectionTitle: 'string',
   customSectionTitle: 'string'
 };
-var isObject = function isObject(obj) {
-  return _typeof__default['default'](obj) === 'object' && !!obj && !Array.isArray(obj);
-};
-var getVariableType = function getVariableType(arg) {
+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__default['default'](arg);
-};
-var isValidToolbarType = function isValidToolbarType(string) {
-  return string === 'ds-app-picker' || string === 'ds-popup-menu';
+  return typeof arg;
 };
-var throwBreadcrumbItemError = function 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__default['default'](invalidProp), ")\n  Expected: (").concat(breadcrumbProps[validPropKey], ")\n  "));
+const isValidToolbarType = string => string === 'ds-app-picker' || string === 'ds-popup-menu';
+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  "));
 };
-var throwToolbarPopupItemError = function throwToolbarPopupItemError(validPropKey, invalidProp) {
+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  "));
 };
-var throwToolbarAppPickerItemError = function throwToolbarAppPickerItemError(validPropKey, invalidProp) {
+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  "));
 };
-var throwToolbarItemGenericError = function throwToolbarItemGenericError(validPropKey, invalidProp) {
+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  "));
 };
-var throwLogoError = function throwLogoError(validPropKey, invalidProp) {
+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  "));
 };
 
@@ -65,4 +55,3 @@ exports.throwToolbarAppPickerItemError = throwToolbarAppPickerItemError;
 exports.throwToolbarItemGenericError = throwToolbarItemGenericError;
 exports.throwToolbarPopupItemError = throwToolbarPopupItemError;
 exports.toolbarProps = toolbarProps;
-//# sourceMappingURL=validateHelpers.js.map

package/cjs/defaultProps.js

@@ -2,12 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var defaultProps = {
+const emptyComp = () => null;
+
+const defaultProps = {
   breadcrumb: [],
   toolbar: [],
-  LogoWithBrand: null,
-  Logo: null
+  LogoWithBrand: emptyComp,
+  Logo: emptyComp
 };
 
 exports.defaultProps = defaultProps;
-//# sourceMappingURL=defaultProps.js.map

package/cjs/index.d.js

@@ -1,3 +1,2 @@
 'use strict';
 
-//# sourceMappingURL=index.d.js.map

package/cjs/index.js

@@ -3,42 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var GlobalHeader = require('./GlobalHeader.js');
-require('react');
-require('react-desc');
-require('./propTypes.js');
-require('./components/Title/GlobalHeaderTitle.js');
-require('@elliemae/ds-grid');
-require('./GlobalHeaderContext.js');
-require('./defaultProps.js');
-require('./components/Breadcrumb/GlobalHeaderBreadcrumb.js');
-require('./components/Breadcrumb/styles.js');
-require('styled-components');
-require('./components/Breadcrumb/PureBreadcrumb.js');
-require('@elliemae/ds-icons');
-require('./components/Toolbar/GlobalHeaderToolbar.js');
-require('./components/Toolbar/ToolbarItems.js');
-require('./outOfTheBox/AppPicker/AppPicker.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('@elliemae/ds-app-picker');
-require('./components/Toolbar/styles.js');
-require('./outOfTheBox/PopupMenu/PopupMenu.js');
-require('@elliemae/ds-popover');
-require('./outOfTheBox/PopupMenu/PopupMenuContent.js');
-require('./outOfTheBox/PopupMenu/styles.js');
-require('./config/useGlobalHeader.js');
-require('@babel/runtime/helpers/toConsumableArray');
-require('uid');
-require('./config/useGetPropsWithDefaults.js');
-require('@babel/runtime/helpers/defineProperty');
-require('./GlobalHeaderContainer.js');
-require('./styles.js');
-require('./config/useValidateProps.js');
-require('./config/validateHelpers.js');
-require('@babel/runtime/helpers/typeof');
 
 
 
 exports.GlobalHeader = GlobalHeader.GlobalHeader;
 exports.GlobalHeaderWithSchema = GlobalHeader.GlobalHeaderWithSchema;
-exports.default = GlobalHeader.GlobalHeader;
-//# sourceMappingURL=index.js.map
+exports["default"] = GlobalHeader.GlobalHeader;

package/cjs/outOfTheBox/AppPicker/AppPicker.js

@@ -2,91 +2,92 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.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 components_Toolbar_styles = require('../../components/Toolbar/styles.js');
-require('styled-components');
+var styles = require('../../components/Toolbar/styles.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var AppPicker = function AppPicker(_ref) {
-  var label = _ref.label,
-      apps = _ref.apps,
-      customApps = _ref.customApps,
-      sectionTitle = _ref.sectionTitle,
-      customSectionTitle = _ref.customSectionTitle,
-      _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? function () {
-    return null;
-  } : _ref$onClick,
-      actionRef = _ref.actionRef,
-      _ref$onKeyDown = _ref.onKeyDown,
-      customHandleOnKeyDown = _ref$onKeyDown === void 0 ? function () {
-    return null;
-  } : _ref$onKeyDown;
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var buttonRef = React.useRef();
-  var handleTriggerKeyDown = React.useCallback(function (e) {
+var _MenuPicker;
+const AppPicker = _ref => {
+  let {
+    label,
+    apps,
+    icon,
+    customApps,
+    sectionTitle,
+    customSectionTitle,
+    actionRef,
+    isOpen: userIsOpen,
+    onKeyDown: userOnKeyDown,
+    onClickOutside: userOnClickOutside,
+    renderTrigger: userRenderTrigger,
+    onClose,
+    triggerRef,
+    triggerOnClick
+  } = _ref;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const handleTriggerKeyDown = React.useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
-  var handleAppPickerOnKeyDown = React.useCallback(function (e) {
-    customHandleOnKeyDown(e);
-
+  const handleAppPickerOnKeyDown = React.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();
     }
-  }, [customHandleOnKeyDown]);
-  var handleOnClickOutside = React.useCallback(function () {
+  }, []);
+  const handleOnClickOutside = React.useCallback(() => {
     setIsOpen(false);
   }, []);
-  var handleOnClick = React.useCallback(function (e) {
+  const handleOnClick = React.useCallback(() => {
     setIsOpen(true);
-    onClick(e);
-  }, [onClick]);
-  var trigger = React.useMemo(function () {
-    return function (_ref2) {
-      var ref = _ref2.ref;
-      return /*#__PURE__*/React__default['default'].createElement("div", {
-        ref: ref
-      }, /*#__PURE__*/React__default['default'].createElement(components_Toolbar_styles.Button, {
-        onClick: handleOnClick,
+  }, []);
+  const renderTrigger = React.useMemo(() => _ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: ref,
+      children: /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
+        onClick: triggerOnClick !== null && triggerOnClick !== void 0 ? triggerOnClick : handleOnClick,
         onKeyDown: handleTriggerKeyDown,
-        ref: buttonRef,
+        ref: dsUtilities.mergeRefs(buttonRef, triggerRef),
         title: label,
-        "data-testid": "gh-toolbar-item"
-      }, /*#__PURE__*/React__default['default'].createElement(dsIcons.MenuPicker, {
-        fill: "#FFF",
-        size: "m"
-      })));
-    };
-  }, [handleOnClick, handleTriggerKeyDown, label]);
-  return React.useMemo(function () {
-    return /*#__PURE__*/React__default['default'].createElement(dsAppPicker.DSAppPicker, {
-      isOpen: isOpen,
-      apps: apps,
-      customApps: customApps,
-      sectionTitle: sectionTitle,
-      customSectionTitle: customSectionTitle,
-      onClickOutside: handleOnClickOutside,
-      renderTrigger: trigger,
-      triggerRef: buttonRef,
-      actionRef: actionRef,
-      onKeyDown: handleAppPickerOnKeyDown
+        "data-testid": "gh-toolbar-item",
+        children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx__default["default"](dsIcons.MenuPicker, {
+          fill: "#FFF",
+          width: 20.73,
+          height: 20.73
+        }))
+      })
     });
-  }, [actionRef, apps, customApps, customSectionTitle, handleAppPickerOnKeyDown, handleOnClickOutside, isOpen, sectionTitle, trigger]);
+  }, [triggerOnClick, handleOnClick, handleTriggerKeyDown, label]);
+  return /*#__PURE__*/_jsx__default["default"](dsAppPicker.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
+  });
 };
 
 exports.AppPicker = AppPicker;
-//# sourceMappingURL=AppPicker.js.map