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

package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -26,14 +26,14 @@ const GlobalHeaderBreadcrumb = () => {
     setShowIconOnly,
     globalHeaderBreadcrumbGrid
   } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
-  const breakpoint = React.useRef();
-  const flexRegion = React.useRef();
+  const breakpoint = React.useRef(null);
+  const flexRegion = React.useRef(null);
   React.useEffect(() => {
     const evaluateShowIconOnly = () => {
-      if ((flexRegion === null || flexRegion === void 0 ? void 0 : flexRegion.current.offsetWidth) <= 0 && !breakpoint.current) {
+      if (flexRegion && flexRegion.current && (flexRegion === null || flexRegion === void 0 ? void 0 : flexRegion.current.offsetWidth) <= 0 && !breakpoint.current) {
         setShowIconOnly(true);
         breakpoint.current = window.innerWidth;
-      } else if (window.innerWidth >= breakpoint.current) {
+      } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {
         setShowIconOnly(false);
         breakpoint.current = null;
       }
@@ -46,13 +46,13 @@ const GlobalHeaderBreadcrumb = () => {
   return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: "100%",
     alignItems: "center",
-    justifyContent: "left",
-    role: "navigation",
+    justifyContent: "flex-start",
     "aria-label": "breadcrumbs",
-    cols: globalHeaderBreadcrumbGrid
+    cols: globalHeaderBreadcrumbGrid,
+    role: "navigation"
   }, void 0, /*#__PURE__*/_jsx__default["default"](styles.Pipe, {
     showIconOnly: showIconOnly
-  }), breadcrumb.map(item => {
+  }), breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.map(item => {
     const {
       label,
       hasNext,

package/cjs/components/Breadcrumb/PureBreadcrumb.js

@@ -26,7 +26,7 @@ const PureBreadcrumb = /*#__PURE__*/React__default["default"].memo(_ref => {
     "aria-selected": isSelected,
     "data-testid": "gh-breadcrumb-btn"
   }, void 0, /*#__PURE__*/_jsx__default["default"](styles.Label, {
-    isSelected: isSelected,
+    isSelected: !!isSelected,
     isOnlyItem: length === 1
   }, void 0, label)), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {
     size: "m",

package/cjs/components/Toolbar/ToolbarItems.js

@@ -2,9 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 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 AppPicker = require('../../outOfTheBox/AppPicker/AppPicker.js');
 var PopupMenu = require('../../outOfTheBox/PopupMenu/PopupMenu.js');
@@ -14,8 +20,12 @@ 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);
 
+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 ToolbarItems = () => {
   const {
     props: {
@@ -23,7 +33,7 @@ const ToolbarItems = () => {
     },
     instanceUID
   } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
-  const itemsList = React.useMemo(() => toolbar.map(item => {
+  const itemsList = React.useMemo(() => toolbar === null || toolbar === void 0 ? void 0 : toolbar.map(item => {
     var _Icon;
 
     const {
@@ -49,24 +59,9 @@ const ToolbarItems = () => {
         }, "".concat(instanceUID, "-ds-popup-menu-").concat(label));
 
       case 'ds-app-picker':
-        const {
-          apps,
-          customApps,
-          sectionTitle,
-          customSectionTitle,
-          actionRef,
-          onKeyDown
-        } = componentProps;
-        return /*#__PURE__*/_jsx__default["default"](AppPicker.AppPicker, {
-          onClick: onClick,
-          label: label,
-          apps: apps,
-          customApps: customApps,
-          sectionTitle: sectionTitle,
-          customSectionTitle: customSectionTitle,
-          actionRef: actionRef,
-          onKeyDown: onKeyDown
-        }, "".concat(instanceUID, "-ds-app-picker-").concat(label));
+        return /*#__PURE__*/jsxRuntime.jsx(AppPicker.AppPicker, _objectSpread({
+          label: label
+        }, componentProps), "".concat(instanceUID, "-ds-app-picker-").concat(label));
 
       default:
         return /*#__PURE__*/_jsx__default["default"](styles.Button, {

package/cjs/config/useGlobalHeader.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var uid = require('uid');
 var useGetPropsWithDefaults = require('./useGetPropsWithDefaults.js');
@@ -16,8 +14,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const useGlobalHeader = props => {
   const [showIconOnly, setShowIconOnly] = React.useState(false);
   const instanceUID = React.useMemo(() => uid.uid(5), []);
-  const globalHeaderToolbarGrid = React.useMemo(() => props.toolbar.map(() => '1fr'), [props.toolbar]);
-  const globalHeaderBreadcrumbGrid = React.useMemo(() => ['auto', ...props.breadcrumb.map(() => 'auto'), '1fr'], [props.breadcrumb]);
+  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]);
+  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]);
   const propsWithDefaults = useGetPropsWithDefaults.useGetPropsWithDefaults(props);
   const ctx = React__default["default"].useMemo(() => ({
     props: propsWithDefaults,

package/cjs/config/useValidateProps.js

@@ -66,7 +66,7 @@ const useValidateProps = props => {
     validateHelpers.throwLogoError('LogoWithBrand', LogoWithBrand);
   }
 
-  breadcrumb.forEach(breadcrumbItem => {
+  breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.forEach(breadcrumbItem => {
     if (breadcrumbItem.label && typeof breadcrumbItem.label !== 'string') {
       validateHelpers.throwBreadcrumbItemError('label', breadcrumbItem.label);
     }
@@ -83,7 +83,7 @@ const useValidateProps = props => {
       validateHelpers.throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);
     }
   });
-  toolbar.forEach(toolbarItem => {
+  toolbar === null || toolbar === void 0 ? void 0 : toolbar.forEach(toolbarItem => {
     validateGenericToolbarItem(toolbarItem);
 
     if (toolbarItem.type) {

package/cjs/defaultProps.js

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

package/cjs/outOfTheBox/AppPicker/AppPicker.js

@@ -6,6 +6,7 @@ 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 styles = require('../../components/Toolbar/styles.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -16,49 +17,53 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 var _MenuPicker;
 const AppPicker = _ref => {
-  var _DSAppPicker;
-
   let {
     label,
     apps,
+    icon,
     customApps,
     sectionTitle,
     customSectionTitle,
-    onClick = () => null,
     actionRef,
-    onKeyDown: customHandleOnKeyDown = () => null
+    isOpen: userIsOpen,
+    onKeyDown: userOnKeyDown,
+    onClickOutside: userOnClickOutside,
+    renderTrigger: userRenderTrigger,
+    onClose,
+    triggerRef,
+    triggerOnClick
   } = _ref;
   const [isOpen, setIsOpen] = React.useState(false);
-  const buttonRef = React.useRef();
+  const buttonRef = React.useRef(null);
   const handleTriggerKeyDown = React.useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
   const handleAppPickerOnKeyDown = React.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 = React.useCallback(() => {
     setIsOpen(false);
   }, []);
-  const handleOnClick = React.useCallback(e => {
+  const handleOnClick = React.useCallback(() => {
     setIsOpen(true);
-    onClick(e);
-  }, [onClick]);
-  const trigger = React.useMemo(() => _ref2 => {
+  }, []);
+  const renderTrigger = React.useMemo(() => _ref2 => {
     let {
       ref
     } = _ref2;
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: ref,
       children: /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
-        onClick: handleOnClick,
+        onClick: triggerOnClick !== null && triggerOnClick !== void 0 ? triggerOnClick : handleOnClick,
         onKeyDown: handleTriggerKeyDown,
-        ref: buttonRef,
+        ref: dsUtilities.mergeRefs(buttonRef, triggerRef),
         title: label,
         "data-testid": "gh-toolbar-item",
         children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx__default["default"](dsIcons.MenuPicker, {
@@ -67,19 +72,21 @@ const AppPicker = _ref => {
         }))
       })
     });
-  }, [handleOnClick, handleTriggerKeyDown, label]);
-  return React.useMemo(() => _DSAppPicker || (_DSAppPicker = /*#__PURE__*/_jsx__default["default"](dsAppPicker.DSAppPicker, {
-    isOpen: isOpen,
+  }, [triggerOnClick, handleOnClick, handleTriggerKeyDown, label]);
+  return /*#__PURE__*/_jsx__default["default"](dsAppPicker.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
+  });
 };
 
 exports.AppPicker = AppPicker;

package/cjs/outOfTheBox/PopupMenu/PopupMenu.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-var Popover = require('@elliemae/ds-popover');
+var dsPopperjs = require('@elliemae/ds-popperjs');
 var PopupMenuContent = require('./PopupMenuContent.js');
 var styles = require('../../components/Toolbar/styles.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -13,7 +13,6 @@ var jsxRuntime = require('react/jsx-runtime');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 
 const PopupMenu = _ref => {
   var _PopupMenuContent;
@@ -26,18 +25,16 @@ const PopupMenu = _ref => {
     onClick
   } = _ref;
   const [isOpen, setIsOpen] = React.useState(false);
-  const buttonRef = React.useRef();
+  const [buttonRef, setButtonRef] = React.useState(null);
   const handleKeyPress = React.useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
   const handleOnClose = React.useCallback(() => {
-    var _buttonRef$current;
-
     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]);
   const handleTriggerOnClick = React.useCallback(e => {
     setIsOpen(true);
     onClick(e);
@@ -45,42 +42,26 @@ const PopupMenu = _ref => {
   const handleItemClick = React.useCallback(() => {
     if (closeOnClick) handleOnClose();
   }, [closeOnClick, handleOnClose]);
-  const handleClickOutside = React.useCallback(() => setIsOpen(false), []);
   const content = React.useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx__default["default"](PopupMenuContent.PopupMenuContent, {
     options: options,
     onItemClick: handleItemClick,
     onClose: handleOnClose
   })), [options, handleItemClick, handleOnClose]);
-  const trigger = React.useMemo(() => _ref2 => {
-    let {
-      ref
-    } = _ref2;
-    return /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
-      onClick: handleTriggerOnClick,
-      onKeyPress: handleKeyPress,
-      title: title,
-      ref: buttonRef,
-      "data-testid": "gh-toolbar-item",
-      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"], {
-    isOpen: isOpen,
-    content: content,
-    onClickOutside: handleClickOutside,
-    placement: "bottom",
-    interactionType: "click",
-    showArrow: true,
-    style: {
-      padding: '0',
-      width: 'fit-content'
-    },
-    renderTrigger: trigger
-  }), [content, handleClickOutside, isOpen, trigger]);
+  return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
+    onClick: handleTriggerOnClick,
+    onKeyPress: handleKeyPress,
+    title: title,
+    ref: setButtonRef,
+    "data-testid": "gh-toolbar-item",
+    children: Icon && /*#__PURE__*/_jsx__default["default"](Icon, {
+      fill: "#FFF",
+      size: "m"
+    })
+  }), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
+    referenceElement: buttonRef,
+    showPopover: isOpen,
+    closeContextMenu: handleOnClose
+  }, void 0, content));
 };
 
 exports.PopupMenu = PopupMenu;

package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -3,9 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 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 dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var styles = require('./styles.js');
 var GlobalHeaderContext = require('../../GlobalHeaderContext.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -13,8 +20,12 @@ var jsxRuntime = require('react/jsx-runtime');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+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 PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
   let {
     options,
@@ -24,26 +35,26 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
   const {
     instanceUID
   } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
-  const menuRef = React.useRef();
+  const menuRef = React.useRef(null);
   React.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 = React.useMemo(() => options.map(option => {
-    var _Content;
-
     const {
       type,
-      icon,
-      label,
+      Icon,
+      label = '',
       onClick,
       Content
     } = option;
 
+    const ariaAndDataProps = _objectSpread(_objectSpread({}, dsPropsHelpers.getAriaProps(option)), dsPropsHelpers.getDataProps(option));
+
     const handleClick = e => {
       onItemClick(e);
-      onClick(e);
+      if (onClick) onClick(e);
     };
 
     const handleKeyDown = e => {
@@ -52,19 +63,23 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
 
     switch (type) {
       case 'separator':
-        return /*#__PURE__*/_jsx__default["default"](styles.Separator, {}, "".concat(instanceUID, "-separator-").concat(label));
+        return /*#__PURE__*/jsxRuntime.jsx(styles.Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
 
       case 'custom':
-        return /*#__PURE__*/_jsx__default["default"](styles.ItemWrapper, {
+        return /*#__PURE__*/jsxRuntime.jsx(styles.ItemWrapper, _objectSpread(_objectSpread({
           onClick: handleClick,
           onKeyDown: handleKeyDown
-        }, "".concat(instanceUID, "-popup-").concat(label), _Content || (_Content = /*#__PURE__*/_jsx__default["default"](Content, {})));
+        }, ariaAndDataProps), {}, {
+          children: Content && /*#__PURE__*/_jsx__default["default"](Content, {})
+        }), "".concat(instanceUID, "-popup-").concat(label));
 
       default:
-        return /*#__PURE__*/_jsx__default["default"](styles.ItemWrapper, {
+        return /*#__PURE__*/jsxRuntime.jsxs(styles.ItemWrapper, _objectSpread(_objectSpread({
           onClick: handleClick,
           onKeyDown: handleKeyDown
-        }, "".concat(instanceUID, "-popup-").concat(label), icon, styles.Label && /*#__PURE__*/_jsx__default["default"](styles.Label, {}, void 0, label));
+        }, 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]);
   return /*#__PURE__*/jsxRuntime.jsx(styles.List, {

package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -18,14 +18,14 @@ const GlobalHeaderBreadcrumb = () => {
     setShowIconOnly,
     globalHeaderBreadcrumbGrid
   } = useContext(GlobalHeaderContext);
-  const breakpoint = useRef();
-  const flexRegion = useRef();
+  const breakpoint = useRef(null);
+  const flexRegion = useRef(null);
   useEffect(() => {
     const evaluateShowIconOnly = () => {
-      if ((flexRegion === null || flexRegion === void 0 ? void 0 : flexRegion.current.offsetWidth) <= 0 && !breakpoint.current) {
+      if (flexRegion && flexRegion.current && (flexRegion === null || flexRegion === void 0 ? void 0 : flexRegion.current.offsetWidth) <= 0 && !breakpoint.current) {
         setShowIconOnly(true);
         breakpoint.current = window.innerWidth;
-      } else if (window.innerWidth >= breakpoint.current) {
+      } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {
         setShowIconOnly(false);
         breakpoint.current = null;
       }
@@ -38,13 +38,13 @@ const GlobalHeaderBreadcrumb = () => {
   return /*#__PURE__*/_jsx(Grid, {
     height: "100%",
     alignItems: "center",
-    justifyContent: "left",
-    role: "navigation",
+    justifyContent: "flex-start",
     "aria-label": "breadcrumbs",
-    cols: globalHeaderBreadcrumbGrid
+    cols: globalHeaderBreadcrumbGrid,
+    role: "navigation"
   }, void 0, /*#__PURE__*/_jsx(Pipe, {
     showIconOnly: showIconOnly
-  }), breadcrumb.map(item => {
+  }), breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.map(item => {
     const {
       label,
       hasNext,

package/esm/components/Breadcrumb/PureBreadcrumb.js

@@ -17,7 +17,7 @@ const PureBreadcrumb = /*#__PURE__*/React.memo(_ref => {
     "aria-selected": isSelected,
     "data-testid": "gh-breadcrumb-btn"
   }, void 0, /*#__PURE__*/_jsx(Label, {
-    isSelected: isSelected,
+    isSelected: !!isSelected,
     isOnlyItem: length === 1
   }, void 0, label)), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx(ChevronSmallRight, {
     size: "m",

package/esm/components/Toolbar/ToolbarItems.js

@@ -1,6 +1,12 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useContext, useMemo } from 'react';
 import { AppPicker } from '../../outOfTheBox/AppPicker/AppPicker.js';
 import { PopupMenu } from '../../outOfTheBox/PopupMenu/PopupMenu.js';
@@ -8,6 +14,9 @@ import { Button } from './styles.js';
 import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
 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; }
+
+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; }
 const ToolbarItems = () => {
   const {
     props: {
@@ -15,7 +24,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 {
@@ -41,24 +50,9 @@ const ToolbarItems = () => {
         }, "".concat(instanceUID, "-ds-popup-menu-").concat(label));
 
       case 'ds-app-picker':
-        const {
-          apps,
-          customApps,
-          sectionTitle,
-          customSectionTitle,
-          actionRef,
-          onKeyDown
-        } = componentProps;
-        return /*#__PURE__*/_jsx(AppPicker, {
-          onClick: onClick,
-          label: label,
-          apps: apps,
-          customApps: customApps,
-          sectionTitle: sectionTitle,
-          customSectionTitle: customSectionTitle,
-          actionRef: actionRef,
-          onKeyDown: onKeyDown
-        }, "".concat(instanceUID, "-ds-app-picker-").concat(label));
+        return /*#__PURE__*/jsx(AppPicker, _objectSpread({
+          label: label
+        }, componentProps), "".concat(instanceUID, "-ds-app-picker-").concat(label));
 
       default:
         return /*#__PURE__*/_jsx(Button, {

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('1fr');
+  }, [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

@@ -62,7 +62,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,7 +79,7 @@ const useValidateProps = props => {
       throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);
     }
   });
-  toolbar.forEach(toolbarItem => {
+  toolbar === null || toolbar === void 0 ? void 0 : toolbar.forEach(toolbarItem => {
     validateGenericToolbarItem(toolbarItem);
 
     if (toolbarItem.type) {

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

@@ -2,55 +2,60 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.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 { jsx } from 'react/jsx-runtime';
 
 var _MenuPicker;
 const AppPicker = _ref => {
-  var _DSAppPicker;
-
   let {
     label,
     apps,
+    icon,
     customApps,
     sectionTitle,
     customSectionTitle,
-    onClick = () => null,
     actionRef,
-    onKeyDown: customHandleOnKeyDown = () => null
+    isOpen: userIsOpen,
+    onKeyDown: userOnKeyDown,
+    onClickOutside: userOnClickOutside,
+    renderTrigger: userRenderTrigger,
+    onClose,
+    triggerRef,
+    triggerOnClick
   } = _ref;
   const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef();
+  const buttonRef = useRef(null);
   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,
+        onClick: triggerOnClick !== null && triggerOnClick !== void 0 ? triggerOnClick : handleOnClick,
         onKeyDown: handleTriggerKeyDown,
-        ref: buttonRef,
+        ref: mergeRefs(buttonRef, triggerRef),
         title: label,
         "data-testid": "gh-toolbar-item",
         children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx(MenuPicker, {
@@ -59,19 +64,21 @@ const AppPicker = _ref => {
         }))
       })
     });
-  }, [handleOnClick, handleTriggerKeyDown, label]);
-  return useMemo(() => _DSAppPicker || (_DSAppPicker = /*#__PURE__*/_jsx(DSAppPicker, {
-    isOpen: isOpen,
+  }, [triggerOnClick, handleOnClick, handleTriggerKeyDown, label]);
+  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,7 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState, useRef, useCallback, useMemo } from 'react';
-import Popover from '@elliemae/ds-popover';
+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 { jsx } from 'react/jsx-runtime';
@@ -17,18 +17,16 @@ const PopupMenu = _ref => {
     onClick
   } = _ref;
   const [isOpen, setIsOpen] = useState(false);
-  const buttonRef = useRef();
+  const [buttonRef, setButtonRef] = useState(null);
   const handleKeyPress = useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
   const handleOnClose = useCallback(() => {
-    var _buttonRef$current;
-
     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]);
   const handleTriggerOnClick = useCallback(e => {
     setIsOpen(true);
     onClick(e);
@@ -36,42 +34,26 @@ const PopupMenu = _ref => {
   const handleItemClick = useCallback(() => {
     if (closeOnClick) handleOnClose();
   }, [closeOnClick, handleOnClose]);
-  const handleClickOutside = useCallback(() => setIsOpen(false), []);
   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]);
+  return /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/jsx(Button, {
+    onClick: handleTriggerOnClick,
+    onKeyPress: handleKeyPress,
+    title: title,
+    ref: setButtonRef,
+    "data-testid": "gh-toolbar-item",
+    children: Icon && /*#__PURE__*/_jsx(Icon, {
+      fill: "#FFF",
+      size: "m"
+    })
+  }), /*#__PURE__*/_jsx(DSPopperJS, {
+    referenceElement: buttonRef,
+    showPopover: isOpen,
+    closeContextMenu: handleOnClose
+  }, void 0, content));
 };
 
 export { PopupMenu };

package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -1,11 +1,21 @@
 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); 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(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 PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
   let {
     options,
@@ -15,26 +25,26 @@ const PopupMenuContent = /*#__PURE__*/React.memo(_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
     } = option;
 
+    const ariaAndDataProps = _objectSpread(_objectSpread({}, getAriaProps(option)), getDataProps(option));
+
     const handleClick = e => {
       onItemClick(e);
-      onClick(e);
+      if (onClick) onClick(e);
     };
 
     const handleKeyDown = e => {
@@ -43,19 +53,23 @@ const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
 
     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, {})));
+        }, 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));
+        }, ariaAndDataProps), {}, {
+          children: [Icon && /*#__PURE__*/_jsx(Icon, {}), Label && /*#__PURE__*/_jsx(Label, {}, void 0, label)]
+        }), "".concat(instanceUID, "-popup-").concat(label));
     }
   }), [onClose, onItemClick, options, instanceUID]);
   return /*#__PURE__*/jsx(List, {

package/package.json

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

package/types/GlobalHeader.d.ts

@@ -1,14 +1,39 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
 import type { GlobalHeaderPropsT as Props } from './index.d';
 declare const GlobalHeader: {
     (props: Props): JSX.Element;
     defaultProps: Props;
     propTypes: {
-        Logo: any;
-        LogoWithBrand: any;
-        breadcrumb: any;
-        toolbar: any;
+        Logo: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        LogoWithBrand: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        breadcrumb: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
+        toolbar: {
+            defaultValue<T = unknown>(arg: T): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValidator;
+        };
     };
 };
-declare const GlobalHeaderWithSchema: any;
+declare const GlobalHeaderWithSchema: {
+    (props?: Props | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export { GlobalHeader, GlobalHeaderWithSchema };

package/types/components/Breadcrumb/styles.d.ts

@@ -1,5 +1,5 @@
 import type { LabelT, PipeT } from '../../index.d';
-export declare const Pipe: import("styled-components").StyledComponent<"span", any, PipeT, never>;
-export declare const BreadcrumbItem: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LabelButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const Label: import("styled-components").StyledComponent<"p", any, LabelT, never>;
+export declare const Pipe: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, PipeT, never>;
+export declare const BreadcrumbItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const LabelButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, LabelT, never>;

package/types/components/Toolbar/styles.d.ts

@@ -1 +1 @@
-export declare const Button: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const Button: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;

package/types/config/validateHelpers.d.ts

@@ -20,8 +20,8 @@ export declare const toolbarProps: {
 export declare const isObject: (obj: unknown) => boolean;
 export declare const getVariableType: (arg: unknown) => string;
 export declare const isValidToolbarType: (string: unknown) => boolean;
-export declare const throwBreadcrumbItemError: (validPropKey: string, invalidProp: unknown) => void;
-export declare const throwToolbarPopupItemError: (validPropKey: string, invalidProp: unknown) => void;
-export declare const throwToolbarAppPickerItemError: (validPropKey: string, invalidProp: unknown) => void;
-export declare const throwToolbarItemGenericError: (validPropKey: string, invalidProp: unknown) => void;
+export declare const throwBreadcrumbItemError: (validPropKey: keyof typeof breadcrumbProps, invalidProp: unknown) => void;
+export declare const throwToolbarPopupItemError: (validPropKey: keyof typeof toolbarProps, invalidProp: unknown) => void;
+export declare const throwToolbarAppPickerItemError: (validPropKey: keyof typeof toolbarProps, invalidProp: unknown) => void;
+export declare const throwToolbarItemGenericError: (validPropKey: keyof typeof toolbarProps, invalidProp: unknown) => void;
 export declare const throwLogoError: (validPropKey: string, invalidProp: unknown) => void;

package/types/index.d.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import { DSAppPicker } from '@elliemae/ds-app-picker';
+export declare type AppPickerProps = React.ComponentProps<typeof DSAppPicker>;
 export interface ContextT {
     showIconOnly: boolean;
     setShowIconOnly: React.Dispatch<React.SetStateAction<boolean>>;
@@ -11,11 +13,11 @@ export interface GlobalHeaderContainerT {
     children: React.ReactNode;
 }
 export interface GlobalHeaderPropsT {
-    Logo?: () => JSX.Element;
-    LogoWithBrand?: () => JSX.Element;
+    Logo?: React.ComponentType;
+    LogoWithBrand?: React.ComponentType;
     breadcrumb?: BreadcrumbItemT[];
     toolbar?: ToolbarItemT[];
-    appPickerProps?: AppPickerPropsT;
+    appPickerProps?: AppPickerProps;
 }
 export interface BreadcrumbItemT {
     label: string;
@@ -29,15 +31,7 @@ export interface ToolbarItemT {
     label: string;
     Icon: React.ComponentType<Record<string, unknown>>;
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
-    componentProps?: PopupPropsT | AppPickerPropsT;
-}
-export interface AppPickerPropsT {
-    label?: string;
-    apps: AppPickerMenuItemT[];
-    customApps?: AppPickerMenuItemT[];
-    sectionTitle?: string;
-    customSectionTitle?: string;
-    onClick: (event: React.MouseEvent<HTMLElement>) => void;
+    componentProps?: PopupPropsT | AppPickerProps;
 }
 export interface PopupPropsT {
     Icon?: React.ComponentType<Record<string, unknown>>;
@@ -48,17 +42,17 @@ export interface PopupPropsT {
 }
 export interface AppPickerMenuItemT {
     label: string;
-    icon: () => JSX.Element;
+    icon: React.ComponentType;
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
     disabled?: boolean;
 }
-export interface PopupMenuItemT {
+export interface PopupMenuItemT extends Record<string, unknown> {
     type?: string;
-    icon?: () => JSX.Element;
+    Icon?: React.ComponentType;
     label?: string;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     closeOnClick?: boolean;
-    Content?: () => JSX.Element;
+    Content?: React.ComponentType;
 }
 export interface PopupMenuContentPropsT {
     options: PopupMenuItemT[];

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

@@ -1,3 +1,8 @@
-/// <reference types="react" />
-import type { AppPickerPropsT as Props } from '../../index.d';
-export declare const AppPicker: ({ label, apps, customApps, sectionTitle, customSectionTitle, onClick, actionRef, onKeyDown: customHandleOnKeyDown, }: Props) => JSX.Element;
+import React from 'react';
+import { DSAppPicker } from '@elliemae/ds-app-picker';
+declare type AppPickerProps = React.ComponentProps<typeof DSAppPicker>;
+export declare const AppPicker: ({ label, apps, icon, customApps, sectionTitle, customSectionTitle, actionRef, isOpen: userIsOpen, onKeyDown: userOnKeyDown, onClickOutside: userOnClickOutside, renderTrigger: userRenderTrigger, onClose, triggerRef, triggerOnClick, }: AppPickerProps & {
+    label: string;
+    triggerOnClick?: React.MouseEventHandler<Element> | undefined;
+}) => JSX.Element;
+export {};

package/types/outOfTheBox/PopupMenu/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const List: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ItemWrapper: import("styled-components").StyledComponent<"button", any, {}, never>;
-export declare const Label: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ItemWrapper: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const Separator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/types/propTypes.d.ts

@@ -1,8 +1,29 @@
-export declare const breadcrumbItem: any;
-export declare const toolbarItem: any;
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+export declare const breadcrumbItem: import("react-desc").PropTypesDescValue;
+export declare const toolbarItem: import("react-desc").PropTypesDescValue;
 export declare const globalHeaderProps: {
-    Logo: any;
-    LogoWithBrand: any;
-    breadcrumb: any;
-    toolbar: any;
+    Logo: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    LogoWithBrand: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    breadcrumb: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
+    toolbar: {
+        defaultValue<T = unknown>(arg: T): {
+            deprecated: import("react-desc").PropTypesDescValidator;
+        };
+        isRequired: import("react-desc").PropTypesDescValidator;
+    };
 };

package/types/styles.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;