@elliemae/ds-global-header 2.0.0-alpha.3 → 2.0.0-alpha.7

package/cjs/GlobalHeader.js

@@ -24,9 +24,9 @@ var _GlobalHeaderTitle, _GlobalHeaderBreadcru, _GlobalHeaderToolbar;
 const GlobalHeader = props => {
   useValidateProps.useValidateProps(props);
   const ctx = useGlobalHeader.useGlobalHeader(props);
-  return /*#__PURE__*/_jsx__default['default'](GlobalHeaderContainer.GlobalHeaderContainer, {}, void 0, /*#__PURE__*/_jsx__default['default'](GlobalHeaderContext.GlobalHeaderContext.Provider, {
+  return /*#__PURE__*/_jsx__default["default"](GlobalHeaderContainer.GlobalHeaderContainer, {}, void 0, /*#__PURE__*/_jsx__default["default"](GlobalHeaderContext.GlobalHeaderContext.Provider, {
     value: ctx
-  }, void 0, _GlobalHeaderTitle || (_GlobalHeaderTitle = /*#__PURE__*/_jsx__default['default'](GlobalHeaderTitle.GlobalHeaderTitle, {})), _GlobalHeaderBreadcru || (_GlobalHeaderBreadcru = /*#__PURE__*/_jsx__default['default'](GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, {})), _GlobalHeaderToolbar || (_GlobalHeaderToolbar = /*#__PURE__*/_jsx__default['default'](GlobalHeaderToolbar.GlobalHeaderToolbar, {}))));
+  }, void 0, _GlobalHeaderTitle || (_GlobalHeaderTitle = /*#__PURE__*/_jsx__default["default"](GlobalHeaderTitle.GlobalHeaderTitle, {})), _GlobalHeaderBreadcru || (_GlobalHeaderBreadcru = /*#__PURE__*/_jsx__default["default"](GlobalHeaderBreadcrumb.GlobalHeaderBreadcrumb, {})), _GlobalHeaderToolbar || (_GlobalHeaderToolbar = /*#__PURE__*/_jsx__default["default"](GlobalHeaderToolbar.GlobalHeaderToolbar, {}))));
 };
 
 GlobalHeader.defaultProps = defaultProps.defaultProps;

package/cjs/GlobalHeaderContainer.js

@@ -12,9 +12,9 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 const GlobalHeaderContainer = ({
   children
-}) => /*#__PURE__*/_jsx__default['default']("header", {
+}) => /*#__PURE__*/_jsx__default["default"]("header", {
   "data-testid": "ds-global-header"
-}, void 0, /*#__PURE__*/_jsx__default['default'](styles.Wrapper, {
+}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Wrapper, {
   cols: ['auto', '1fr', 'auto']
 }, void 0, children));
 

package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -41,14 +41,14 @@ const GlobalHeaderBreadcrumb = () => {
     window.addEventListener('resize', evaluateShowIconOnly);
     return () => window.removeEventListener('resize', evaluateShowIconOnly);
   }, [breakpoint, flexRegion, setShowIconOnly]);
-  return /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: "100%",
     alignItems: "center",
     justifyContent: "left",
     role: "navigation",
     "aria-label": "breadcrumbs",
     cols: globalHeaderBreadcrumbGrid
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styles.Pipe, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.Pipe, {
     showIconOnly: showIconOnly
   }), breadcrumb.map(item => {
     const {
@@ -57,7 +57,7 @@ const GlobalHeaderBreadcrumb = () => {
       isSelected,
       onClick
     } = item;
-    return /*#__PURE__*/_jsx__default['default'](PureBreadcrumb.PureBreadcrumb, {
+    return /*#__PURE__*/_jsx__default["default"](PureBreadcrumb.PureBreadcrumb, {
       label: label,
       hasNext: hasNext,
       isSelected: isSelected,

package/cjs/components/Breadcrumb/PureBreadcrumb.js

@@ -14,20 +14,20 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Chevron__default = /*#__PURE__*/_interopDefaultLegacy(Chevron);
 
 var _Chevron;
-const PureBreadcrumb = /*#__PURE__*/React__default['default'].memo(({
+const PureBreadcrumb = /*#__PURE__*/React__default["default"].memo(({
   onClick,
   isSelected,
   length,
   label,
   hasNext
-}) => /*#__PURE__*/_jsx__default['default'](styles.BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx__default['default'](styles.LabelButton, {
+}) => /*#__PURE__*/_jsx__default["default"](styles.BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.LabelButton, {
   onClick: onClick,
   "aria-selected": isSelected,
   "data-testid": "gh-breadcrumb-btn"
-}, void 0, /*#__PURE__*/_jsx__default['default'](styles.Label, {
+}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Label, {
   isSelected: isSelected,
   isOnlyItem: length === 1
-}, void 0, label)), hasNext && (_Chevron || (_Chevron = /*#__PURE__*/_jsx__default['default'](Chevron__default['default'], {
+}, void 0, label)), hasNext && (_Chevron || (_Chevron = /*#__PURE__*/_jsx__default["default"](Chevron__default["default"], {
   size: "m",
   fill: "#FFF"
 })))));

package/cjs/components/Breadcrumb/styles.js

@@ -8,22 +8,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const Pipe = /*#__PURE__*/styled__default['default'].span.withConfig({
+const Pipe = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1n5l527-0"
 })(["margin:0 7px 0 0;border-left:", ";height:20px;"], ({
   showIconOnly
 }) => showIconOnly ? 'none' : '1px solid #fff');
-const BreadcrumbItem = /*#__PURE__*/styled__default['default'].div.withConfig({
+const BreadcrumbItem = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1n5l527-1"
 })(["display:flex;align-items:center;height:100%;"]);
-const LabelButton = /*#__PURE__*/styled__default['default'].button.withConfig({
+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;}}"], ({
   theme
 }) => theme.colors.brand[700], ({
   theme
 }) => theme.colors.neutral['000']);
-const Label = /*#__PURE__*/styled__default['default'].p.withConfig({
+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{", ";}"], ({
   theme

package/cjs/components/Title/GlobalHeaderTitle.js

@@ -19,11 +19,11 @@ const GlobalHeaderTitle = () => {
     },
     showIconOnly
   } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
-  return /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     alignItems: "center",
     pr: showIconOnly ? '0px' : '36px',
     cols: showIconOnly ? ['auto'] : ['auto', '1fr']
-  }, void 0, Logo && showIconOnly && /*#__PURE__*/_jsx__default['default'](Logo, {}), LogoWithBrand && !showIconOnly && /*#__PURE__*/_jsx__default['default'](LogoWithBrand, {}));
+  }, void 0, Logo && showIconOnly && /*#__PURE__*/_jsx__default["default"](Logo, {}), LogoWithBrand && !showIconOnly && /*#__PURE__*/_jsx__default["default"](LogoWithBrand, {}));
 };
 
 exports.GlobalHeaderTitle = GlobalHeaderTitle;

package/cjs/components/Toolbar/GlobalHeaderToolbar.js

@@ -17,14 +17,14 @@ const GlobalHeaderToolbar = () => {
   const {
     globalHeaderToolbarGrid
   } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
-  return /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: "100%",
     alignItems: "center",
     justifyContent: "center",
     gutter: "xxs",
     cols: globalHeaderToolbarGrid,
     role: "toolbar"
-  }, void 0, _ToolbarItems || (_ToolbarItems = /*#__PURE__*/_jsx__default['default'](ToolbarItems.ToolbarItems, {})));
+  }, void 0, _ToolbarItems || (_ToolbarItems = /*#__PURE__*/_jsx__default["default"](ToolbarItems.ToolbarItems, {})));
 };
 
 exports.GlobalHeaderToolbar = GlobalHeaderToolbar;

package/cjs/components/Toolbar/ToolbarItems.js

@@ -38,7 +38,7 @@ const ToolbarItems = () => {
           options,
           closeOnClick
         } = componentProps;
-        return /*#__PURE__*/_jsx__default['default'](PopupMenu.PopupMenu, {
+        return /*#__PURE__*/_jsx__default["default"](PopupMenu.PopupMenu, {
           onClick: onClick,
           title: label,
           Icon: Icon,
@@ -51,23 +51,27 @@ const ToolbarItems = () => {
           apps,
           customApps,
           sectionTitle,
-          customSectionTitle
+          customSectionTitle,
+          actionRef,
+          onKeyDown
         } = componentProps;
-        return /*#__PURE__*/_jsx__default['default'](AppPicker.AppPicker, {
+        return /*#__PURE__*/_jsx__default["default"](AppPicker.AppPicker, {
           onClick: onClick,
           label: label,
           apps: apps,
           customApps: customApps,
           sectionTitle: sectionTitle,
-          customSectionTitle: customSectionTitle
+          customSectionTitle: customSectionTitle,
+          actionRef: actionRef,
+          onKeyDown: onKeyDown
         }, `${instanceUID}-ds-app-picker-${label}`);
 
       default:
-        return /*#__PURE__*/_jsx__default['default'](styles.Button, {
+        return /*#__PURE__*/_jsx__default["default"](styles.Button, {
           onClick: onClick,
           title: label,
           "data-testid": "gh-toolbar-item"
-        }, `${instanceUID}-ds-toolbar-button-${label}`, _Icon || (_Icon = /*#__PURE__*/_jsx__default['default'](Icon, {
+        }, `${instanceUID}-ds-toolbar-button-${label}`, _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {
           fill: "#FFF",
           size: "m"
         })));

package/cjs/components/Toolbar/styles.js

@@ -8,7 +8,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const 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;}}"], ({
   theme

package/cjs/config/useGetPropsWithDefaults.js

@@ -12,7 +12,7 @@ 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; }
+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,

package/cjs/config/useGlobalHeader.js

@@ -16,7 +16,7 @@ const useGlobalHeader = props => {
   const globalHeaderToolbarGrid = React.useMemo(() => props.toolbar.map(() => '1fr'), [props.toolbar]);
   const globalHeaderBreadcrumbGrid = React.useMemo(() => ['auto', ...props.breadcrumb.map(() => 'auto'), '1fr'], [props.breadcrumb]);
   const propsWithDefaults = useGetPropsWithDefaults.useGetPropsWithDefaults(props);
-  const ctx = React__default['default'].useMemo(() => ({
+  const ctx = React__default["default"].useMemo(() => ({
     props: propsWithDefaults,
     showIconOnly,
     setShowIconOnly,

package/cjs/index.js

@@ -8,4 +8,4 @@ var GlobalHeader = require('./GlobalHeader.js');
 
 exports.GlobalHeader = GlobalHeader.GlobalHeader;
 exports.GlobalHeaderWithSchema = GlobalHeader.GlobalHeaderWithSchema;
-exports.default = GlobalHeader.GlobalHeader;
+exports["default"] = GlobalHeader.GlobalHeader;

package/cjs/outOfTheBox/AppPicker/AppPicker.js

@@ -21,22 +21,28 @@ const AppPicker = ({
   customApps,
   sectionTitle,
   customSectionTitle,
-  onClick
+  onClick = () => null,
+  actionRef,
+  onKeyDown: customHandleOnKeyDown = () => null
 }) => {
   var _DSAppPicker;
 
   const [isOpen, setIsOpen] = React.useState(false);
   const buttonRef = React.useRef();
-  const handleKeyDown = React.useCallback(e => {
+  const handleTriggerKeyDown = React.useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
-  const handleOnClose = React.useCallback(() => {
-    var _buttonRef$current;
+  const handleAppPickerOnKeyDown = React.useCallback(e => {
+    customHandleOnKeyDown(e);
 
+    if (e.code === 'Escape') {
+      setIsOpen(false);
+    }
+  }, [customHandleOnKeyDown]);
+  const handleOnClickOutside = React.useCallback(() => {
     setIsOpen(false);
-    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
   }, []);
   const handleOnClick = React.useCallback(e => {
     setIsOpen(true);
@@ -48,25 +54,28 @@ const AppPicker = ({
     ref: ref,
     children: /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
       onClick: handleOnClick,
-      onKeyDown: handleKeyDown,
+      onKeyDown: handleTriggerKeyDown,
       ref: buttonRef,
       title: label,
       "data-testid": "gh-toolbar-item",
-      children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx__default['default'](MenuPicker__default['default'], {
+      children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx__default["default"](MenuPicker__default["default"], {
         fill: "#FFF",
         size: "m"
       }))
     })
-  }), [handleKeyDown, handleOnClick, label]);
-  return React.useMemo(() => _DSAppPicker || (_DSAppPicker = /*#__PURE__*/_jsx__default['default'](dsAppPicker.DSAppPicker, {
+  }), [handleOnClick, handleTriggerKeyDown, label]);
+  return React.useMemo(() => _DSAppPicker || (_DSAppPicker = /*#__PURE__*/_jsx__default["default"](dsAppPicker.DSAppPicker, {
     isOpen: isOpen,
     apps: apps,
     customApps: customApps,
     sectionTitle: sectionTitle,
     customSectionTitle: customSectionTitle,
-    onClose: handleOnClose,
-    renderTrigger: trigger
-  })), [apps, customApps, customSectionTitle, handleOnClose, isOpen, sectionTitle, trigger]);
+    onClickOutside: handleOnClickOutside,
+    renderTrigger: trigger,
+    triggerRef: buttonRef,
+    actionRef: actionRef,
+    onKeyDown: handleAppPickerOnKeyDown
+  })), [actionRef, apps, customApps, customSectionTitle, handleAppPickerOnKeyDown, handleOnClickOutside, isOpen, sectionTitle, trigger]);
 };
 
 exports.AppPicker = AppPicker;

package/cjs/outOfTheBox/PopupMenu/PopupMenu.js

@@ -44,7 +44,7 @@ const PopupMenu = ({
     if (closeOnClick) handleOnClose();
   }, [closeOnClick, handleOnClose]);
   const handleClickOutside = React.useCallback(() => setIsOpen(false), []);
-  const content = React.useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx__default['default'](PopupMenuContent.PopupMenuContent, {
+  const content = React.useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx__default["default"](PopupMenuContent.PopupMenuContent, {
     options: options,
     onItemClick: handleItemClick,
     onClose: handleOnClose
@@ -57,13 +57,13 @@ const PopupMenu = ({
     title: title,
     ref: buttonRef,
     "data-testid": "gh-toolbar-item",
-    children: /*#__PURE__*/_jsx__default['default'](Icon, {
+    children: /*#__PURE__*/_jsx__default["default"](Icon, {
       innerRef: ref,
       fill: "#FFF",
       size: "m"
     })
   }), [Icon, handleKeyPress, handleTriggerOnClick, title]);
-  return React.useMemo(() => /*#__PURE__*/_jsx__default['default'](Popover__default['default'], {
+  return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Popover__default["default"], {
     isOpen: isOpen,
     content: content,
     onClickOutside: handleClickOutside,

package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const PopupMenuContent = /*#__PURE__*/React__default['default'].memo(({
+const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(({
   options,
   onItemClick,
   onClose
@@ -49,19 +49,19 @@ const PopupMenuContent = /*#__PURE__*/React__default['default'].memo(({
 
     switch (type) {
       case 'separator':
-        return /*#__PURE__*/_jsx__default['default'](styles.Separator, {}, `${instanceUID}-separator-${label}`);
+        return /*#__PURE__*/_jsx__default["default"](styles.Separator, {}, `${instanceUID}-separator-${label}`);
 
       case 'custom':
-        return /*#__PURE__*/_jsx__default['default'](styles.ItemWrapper, {
+        return /*#__PURE__*/_jsx__default["default"](styles.ItemWrapper, {
           onClick: handleClick,
           onKeyDown: handleKeyDown
-        }, `${instanceUID}-popup-${label}`, _Content || (_Content = /*#__PURE__*/_jsx__default['default'](Content, {})));
+        }, `${instanceUID}-popup-${label}`, _Content || (_Content = /*#__PURE__*/_jsx__default["default"](Content, {})));
 
       default:
-        return /*#__PURE__*/_jsx__default['default'](styles.ItemWrapper, {
+        return /*#__PURE__*/_jsx__default["default"](styles.ItemWrapper, {
           onClick: handleClick,
           onKeyDown: handleKeyDown
-        }, `${instanceUID}-popup-${label}`, icon, styles.Label && /*#__PURE__*/_jsx__default['default'](styles.Label, {}, void 0, label));
+        }, `${instanceUID}-popup-${label}`, icon, styles.Label && /*#__PURE__*/_jsx__default["default"](styles.Label, {}, void 0, label));
     }
   }), [onClose, onItemClick, options, instanceUID]);
   return /*#__PURE__*/jsxRuntime.jsx(styles.List, {

package/cjs/outOfTheBox/PopupMenu/styles.js

@@ -8,18 +8,18 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const List = /*#__PURE__*/styled__default['default'].div.withConfig({
+const List = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-snqcgs-0"
 })(["padding:5px 0px;"]);
-const ItemWrapper = /*#__PURE__*/styled__default['default'].button.withConfig({
+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:", ";}"], ({
   theme
 }) => `1px solid ${theme.colors.brand[600]}`);
-const Label = /*#__PURE__*/styled__default['default'].p.withConfig({
+const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-snqcgs-2"
 })(["width:100%;font-size:14px;margin:10px;"]);
-const Separator = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-snqcgs-3"
 })(["width:100%;border:none;border-bottom:1px solid #ccc;"]);
 

package/cjs/styles.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const Wrapper = /*#__PURE__*/styled__default['default'](dsGrid.GridContainer).withConfig({
+const Wrapper = /*#__PURE__*/styled__default["default"](dsGrid.GridContainer).withConfig({
   componentId: "sc-1v5zxxm-0"
 })(["background-image:linear-gradient(45deg,#0f364a 0%,#1b6392 54%,#164566 100%);color:", ";width:100%;height:40px;padding:0 24px 0 12px;"], ({
   theme

package/esm/components/Toolbar/ToolbarItems.js

@@ -43,7 +43,9 @@ const ToolbarItems = () => {
           apps,
           customApps,
           sectionTitle,
-          customSectionTitle
+          customSectionTitle,
+          actionRef,
+          onKeyDown
         } = componentProps;
         return /*#__PURE__*/_jsx(AppPicker, {
           onClick: onClick,
@@ -51,7 +53,9 @@ const ToolbarItems = () => {
           apps: apps,
           customApps: customApps,
           sectionTitle: sectionTitle,
-          customSectionTitle: customSectionTitle
+          customSectionTitle: customSectionTitle,
+          actionRef: actionRef,
+          onKeyDown: onKeyDown
         }, `${instanceUID}-ds-app-picker-${label}`);
 
       default:

package/esm/outOfTheBox/AppPicker/AppPicker.js

@@ -12,22 +12,28 @@ const AppPicker = ({
   customApps,
   sectionTitle,
   customSectionTitle,
-  onClick
+  onClick = () => null,
+  actionRef,
+  onKeyDown: customHandleOnKeyDown = () => null
 }) => {
   var _DSAppPicker;
 
   const [isOpen, setIsOpen] = useState(false);
   const buttonRef = useRef();
-  const handleKeyDown = useCallback(e => {
+  const handleTriggerKeyDown = useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
-  const handleOnClose = useCallback(() => {
-    var _buttonRef$current;
+  const handleAppPickerOnKeyDown = useCallback(e => {
+    customHandleOnKeyDown(e);
 
+    if (e.code === 'Escape') {
+      setIsOpen(false);
+    }
+  }, [customHandleOnKeyDown]);
+  const handleOnClickOutside = useCallback(() => {
     setIsOpen(false);
-    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
   }, []);
   const handleOnClick = useCallback(e => {
     setIsOpen(true);
@@ -39,7 +45,7 @@ const AppPicker = ({
     ref: ref,
     children: /*#__PURE__*/jsx(Button, {
       onClick: handleOnClick,
-      onKeyDown: handleKeyDown,
+      onKeyDown: handleTriggerKeyDown,
       ref: buttonRef,
       title: label,
       "data-testid": "gh-toolbar-item",
@@ -48,16 +54,19 @@ const AppPicker = ({
         size: "m"
       }))
     })
-  }), [handleKeyDown, handleOnClick, label]);
+  }), [handleOnClick, handleTriggerKeyDown, label]);
   return useMemo(() => _DSAppPicker || (_DSAppPicker = /*#__PURE__*/_jsx(DSAppPicker, {
     isOpen: isOpen,
     apps: apps,
     customApps: customApps,
     sectionTitle: sectionTitle,
     customSectionTitle: customSectionTitle,
-    onClose: handleOnClose,
-    renderTrigger: trigger
-  })), [apps, customApps, customSectionTitle, handleOnClose, isOpen, sectionTitle, trigger]);
+    onClickOutside: handleOnClickOutside,
+    renderTrigger: trigger,
+    triggerRef: buttonRef,
+    actionRef: actionRef,
+    onKeyDown: handleAppPickerOnKeyDown
+  })), [actionRef, apps, customApps, customSectionTitle, handleAppPickerOnKeyDown, handleOnClickOutside, isOpen, sectionTitle, trigger]);
 };
 
 export { AppPicker };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-global-header",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.7",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Global Header",
   "module": "./esm/index.js",
@@ -120,12 +120,12 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-app-picker": "2.0.0-alpha.3",
-    "@elliemae/ds-classnames": "2.0.0-alpha.3",
-    "@elliemae/ds-grid": "2.0.0-alpha.3",
-    "@elliemae/ds-icons": "2.0.0-alpha.3",
-    "@elliemae/ds-popover": "2.0.0-alpha.3",
-    "@elliemae/ds-utilities": "2.0.0-alpha.3",
+    "@elliemae/ds-app-picker": "2.0.0-alpha.7",
+    "@elliemae/ds-classnames": "2.0.0-alpha.7",
+    "@elliemae/ds-grid": "2.0.0-alpha.7",
+    "@elliemae/ds-icons": "2.0.0-alpha.7",
+    "@elliemae/ds-popover": "2.0.0-alpha.7",
+    "@elliemae/ds-utilities": "2.0.0-alpha.7",
     "react-desc": "~4.1.3",
     "uid": "~2.0.0"
   },

package/types/outOfTheBox/AppPicker/AppPicker.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { AppPickerPropsT as Props } from '../../index.d';
-export declare const AppPicker: ({ label, apps, customApps, sectionTitle, customSectionTitle, onClick, }: Props) => JSX.Element;
+export declare const AppPicker: ({ label, apps, customApps, sectionTitle, customSectionTitle, onClick, actionRef, onKeyDown: customHandleOnKeyDown, }: Props) => JSX.Element;