@elliemae/ds-global-header 1.60.0 → 1.61.1

package/cjs/outOfTheBox/PopupMenu/PopupMenu.js

@@ -4,9 +4,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
-var Popover = require('@elliemae/ds-popover');
+var dsPopperjs = require('@elliemae/ds-popperjs');
 var outOfTheBox_PopupMenu_PopupMenuContent = require('./PopupMenuContent.js');
 var components_Toolbar_styles = require('../../components/Toolbar/styles.js');
+require('@babel/runtime/helpers/extends');
+require('@babel/runtime/helpers/defineProperty');
+require('@elliemae/ds-props-helpers');
 require('./styles.js');
 require('styled-components');
 require('../../GlobalHeaderContext.js');
@@ -16,7 +19,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 
 var PopupMenu = function PopupMenu(_ref) {
   var Icon = _ref.Icon,
@@ -30,18 +32,20 @@ var PopupMenu = function PopupMenu(_ref) {
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
-  var buttonRef = React.useRef();
+  var _useState3 = React.useState(null),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      buttonRef = _useState4[0],
+      setButtonRef = _useState4[1];
+
   var handleKeyPress = React.useCallback(function (e) {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
   var handleOnClose = React.useCallback(function () {
-    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]);
   var handleTriggerOnClick = React.useCallback(function (e) {
     setIsOpen(true);
     onClick(e);
@@ -49,9 +53,6 @@ var PopupMenu = function PopupMenu(_ref) {
   var handleItemClick = React.useCallback(function () {
     if (closeOnClick) handleOnClose();
   }, [closeOnClick, handleOnClose]);
-  var handleClickOutside = React.useCallback(function () {
-    return setIsOpen(false);
-  }, []);
   var content = React.useMemo(function () {
     return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_PopupMenuContent.PopupMenuContent, {
       options: options,
@@ -59,37 +60,20 @@ var PopupMenu = function PopupMenu(_ref) {
       onClose: handleOnClose
     });
   }, [options, handleItemClick, handleOnClose]);
-  var trigger = React.useMemo(function () {
-    return function (_ref2) {
-      var ref = _ref2.ref;
-      return /*#__PURE__*/React__default['default'].createElement(components_Toolbar_styles.Button, {
-        onClick: handleTriggerOnClick,
-        onKeyPress: handleKeyPress,
-        title: title,
-        ref: buttonRef,
-        "data-testid": "gh-toolbar-item"
-      }, /*#__PURE__*/React__default['default'].createElement(Icon, {
-        innerRef: ref,
-        fill: "#FFF",
-        size: "m"
-      }));
-    };
-  }, [Icon, handleKeyPress, handleTriggerOnClick, title]);
-  return React.useMemo(function () {
-    return /*#__PURE__*/React__default['default'].createElement(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__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(components_Toolbar_styles.Button, {
+    onClick: handleTriggerOnClick,
+    onKeyPress: handleKeyPress,
+    title: title,
+    ref: setButtonRef,
+    "data-testid": "gh-toolbar-item"
+  }, Icon && /*#__PURE__*/React__default['default'].createElement(Icon, {
+    fill: "#FFF",
+    size: "m"
+  })), /*#__PURE__*/React__default['default'].createElement(dsPopperjs.DSPopperJS, {
+    referenceElement: buttonRef,
+    showPopover: isOpen,
+    closeContextMenu: handleOnClose
+  }, content));
 };
 
 exports.PopupMenu = PopupMenu;

package/cjs/outOfTheBox/PopupMenu/PopupMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupMenu.js","sources":["../../../../src/outOfTheBox/PopupMenu/PopupMenu.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport Popover from '@elliemae/ds-popover';\nimport { PopupMenuContent } from './PopupMenuContent';\nimport { Button } from '../../components/Toolbar/styles';\nimport type { PopupPropsT as Props } from '../../index.d';\n\nexport const PopupMenu = ({ Icon, options, closeOnClick, title, onClick }: Props): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const buttonRef = useRef<HTMLButtonElement>();\n\n  const handleKeyPress = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Enter' || e.code === 'Space') {\n      setIsOpen(true);\n    }\n  }, []);\n\n  const handleOnClose = useCallback(() => {\n    setIsOpen(false);\n    buttonRef.current?.focus();\n  }, []);\n\n  const handleTriggerOnClick = useCallback(\n    (e) => {\n      setIsOpen(true);\n      onClick(e);\n    },\n    [onClick],\n  );\n\n  const handleItemClick = useCallback(() => {\n    if (closeOnClick) handleOnClose();\n  }, [closeOnClick, handleOnClose]);\n\n  const handleClickOutside = useCallback(() => setIsOpen(false), []);\n\n  const content = useMemo(\n    () => <PopupMenuContent options={options} onItemClick={handleItemClick} onClose={handleOnClose} />,\n    [options, handleItemClick, handleOnClose],\n  );\n\n  const trigger = useMemo(\n    () =>\n      ({ ref }: { ref: React.MutableRefObject<HTMLButtonElement> }) =>\n        (\n          <Button\n            onClick={handleTriggerOnClick}\n            onKeyPress={handleKeyPress}\n            title={title}\n            ref={buttonRef}\n            data-testid=\"gh-toolbar-item\"\n          >\n            <Icon innerRef={ref} fill=\"#FFF\" size=\"m\" />\n          </Button>\n        ),\n    [Icon, handleKeyPress, handleTriggerOnClick, title],\n  );\n\n  return useMemo(\n    () => (\n      <Popover\n        isOpen={isOpen}\n        content={content}\n        onClickOutside={handleClickOutside}\n        placement=\"bottom\"\n        interactionType=\"click\"\n        showArrow\n        style={{\n          padding: '0',\n          width: 'fit-content',\n        }}\n        renderTrigger={trigger}\n      />\n    ),\n    [content, handleClickOutside, isOpen, trigger],\n  );\n};\n"],"names":["PopupMenu","Icon","options","closeOnClick","title","onClick","useState","isOpen","setIsOpen","buttonRef","useRef","handleKeyPress","useCallback","e","code","handleOnClose","current","focus","handleTriggerOnClick","handleItemClick","handleClickOutside","content","useMemo","React","PopupMenuContent","trigger","ref","Button","Popover","padding","width"],"mappings":";;;;;;;;;;;;;;;;;;;;IAMaA,SAAS,GAAG,SAAZA,SAAY,OAAyE;AAAA,MAAtEC,IAAsE,QAAtEA,IAAsE;AAAA,MAAhEC,OAAgE,QAAhEA,OAAgE;AAAA,MAAvDC,YAAuD,QAAvDA,YAAuD;AAAA,MAAzCC,KAAyC,QAAzCA,KAAyC;AAAA,MAAlCC,OAAkC,QAAlCA,OAAkC;;AAChG,kBAA4BC,cAAQ,CAAU,KAAV,CAApC;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,SAAS,GAAGC,YAAM,EAAxB;AAEA,MAAMC,cAAc,GAAGC,iBAAW,CAAC,UAACC,CAAD,EAA4B;AAC7D,QAAIA,CAAC,CAACC,IAAF,KAAW,OAAX,IAAsBD,CAAC,CAACC,IAAF,KAAW,OAArC,EAA8C;AAC5CN,MAAAA,SAAS,CAAC,IAAD,CAAT;AACD;AACF,GAJiC,EAI/B,EAJ+B,CAAlC;AAMA,MAAMO,aAAa,GAAGH,iBAAW,CAAC,YAAM;AAAA;;AACtCJ,IAAAA,SAAS,CAAC,KAAD,CAAT;AACA,0BAAAC,SAAS,CAACO,OAAV,0EAAmBC,KAAnB;AACD,GAHgC,EAG9B,EAH8B,CAAjC;AAKA,MAAMC,oBAAoB,GAAGN,iBAAW,CACtC,UAACC,CAAD,EAAO;AACLL,IAAAA,SAAS,CAAC,IAAD,CAAT;AACAH,IAAAA,OAAO,CAACQ,CAAD,CAAP;AACD,GAJqC,EAKtC,CAACR,OAAD,CALsC,CAAxC;AAQA,MAAMc,eAAe,GAAGP,iBAAW,CAAC,YAAM;AACxC,QAAIT,YAAJ,EAAkBY,aAAa;AAChC,GAFkC,EAEhC,CAACZ,YAAD,EAAeY,aAAf,CAFgC,CAAnC;AAIA,MAAMK,kBAAkB,GAAGR,iBAAW,CAAC;AAAA,WAAMJ,SAAS,CAAC,KAAD,CAAf;AAAA,GAAD,EAAyB,EAAzB,CAAtC;AAEA,MAAMa,OAAO,GAAGC,aAAO,CACrB;AAAA,wBAAMC,wCAACC,uDAAD;AAAkB,MAAA,OAAO,EAAEtB,OAA3B;AAAoC,MAAA,WAAW,EAAEiB,eAAjD;AAAkE,MAAA,OAAO,EAAEJ;AAA3E,MAAN;AAAA,GADqB,EAErB,CAACb,OAAD,EAAUiB,eAAV,EAA2BJ,aAA3B,CAFqB,CAAvB;AAKA,MAAMU,OAAO,GAAGH,aAAO,CACrB;AAAA,WACE;AAAA,UAAGI,GAAH,SAAGA,GAAH;AAAA,0BAEIH,wCAACI,gCAAD;AACE,QAAA,OAAO,EAAET,oBADX;AAEE,QAAA,UAAU,EAAEP,cAFd;AAGE,QAAA,KAAK,EAAEP,KAHT;AAIE,QAAA,GAAG,EAAEK,SAJP;AAKE,uBAAY;AALd,sBAOEc,wCAAC,IAAD;AAAM,QAAA,QAAQ,EAAEG,GAAhB;AAAqB,QAAA,IAAI,EAAC,MAA1B;AAAiC,QAAA,IAAI,EAAC;AAAtC,QAPF,CAFJ;AAAA,KADF;AAAA,GADqB,EAcrB,CAACzB,IAAD,EAAOU,cAAP,EAAuBO,oBAAvB,EAA6Cd,KAA7C,CAdqB,CAAvB;AAiBA,SAAOkB,aAAO,CACZ;AAAA,wBACEC,wCAACK,2BAAD;AACE,MAAA,MAAM,EAAErB,MADV;AAEE,MAAA,OAAO,EAAEc,OAFX;AAGE,MAAA,cAAc,EAAED,kBAHlB;AAIE,MAAA,SAAS,EAAC,QAJZ;AAKE,MAAA,eAAe,EAAC,OALlB;AAME,MAAA,SAAS,MANX;AAOE,MAAA,KAAK,EAAE;AACLS,QAAAA,OAAO,EAAE,GADJ;AAELC,QAAAA,KAAK,EAAE;AAFF,OAPT;AAWE,MAAA,aAAa,EAAEL;AAXjB,MADF;AAAA,GADY,EAgBZ,CAACJ,OAAD,EAAUD,kBAAV,EAA8Bb,MAA9B,EAAsCkB,OAAtC,CAhBY,CAAd;AAkBD;;;;"}
+{"version":3,"file":"PopupMenu.js","sources":["../../../../src/outOfTheBox/PopupMenu/PopupMenu.tsx"],"sourcesContent":["import React, { useState, useRef, useCallback, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './PopupMenuContent';\nimport { Button } from '../../components/Toolbar/styles';\nimport type { PopupPropsT as Props } from '../../index.d';\n\nexport const PopupMenu = ({ Icon, options, closeOnClick, title, onClick }: Props): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n\n  const handleKeyPress = useCallback((e: React.KeyboardEvent) => {\n    if (e.code === 'Enter' || e.code === 'Space') {\n      setIsOpen(true);\n    }\n  }, []);\n\n  const handleOnClose = useCallback(() => {\n    setIsOpen(false);\n    buttonRef?.focus();\n  }, [buttonRef]);\n\n  const handleTriggerOnClick = useCallback(\n    (e) => {\n      setIsOpen(true);\n      onClick(e);\n    },\n    [onClick],\n  );\n\n  const handleItemClick = useCallback(() => {\n    if (closeOnClick) handleOnClose();\n  }, [closeOnClick, handleOnClose]);\n\n  const content = useMemo(\n    () => <PopupMenuContent options={options} onItemClick={handleItemClick} onClose={handleOnClose} />,\n    [options, handleItemClick, handleOnClose],\n  );\n\n  return (\n    <div>\n      <Button\n        onClick={handleTriggerOnClick}\n        onKeyPress={handleKeyPress}\n        title={title}\n        ref={setButtonRef}\n        data-testid=\"gh-toolbar-item\"\n      >\n        {Icon && <Icon fill=\"#FFF\" size=\"m\" />}\n      </Button>\n      <DSPopperJS referenceElement={buttonRef} showPopover={isOpen} closeContextMenu={handleOnClose}>\n        {content}\n      </DSPopperJS>\n    </div>\n  );\n};\n"],"names":["PopupMenu","Icon","options","closeOnClick","title","onClick","useState","isOpen","setIsOpen","buttonRef","setButtonRef","handleKeyPress","useCallback","e","code","handleOnClose","focus","handleTriggerOnClick","handleItemClick","content","useMemo","React","PopupMenuContent","Button","DSPopperJS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;IAMaA,SAAS,GAAG,SAAZA,SAAY,OAAyE;AAAA,MAAtEC,IAAsE,QAAtEA,IAAsE;AAAA,MAAhEC,OAAgE,QAAhEA,OAAgE;AAAA,MAAvDC,YAAuD,QAAvDA,YAAuD;AAAA,MAAzCC,KAAyC,QAAzCA,KAAyC;AAAA,MAAlCC,OAAkC,QAAlCA,OAAkC;;AAChG,kBAA4BC,cAAQ,CAAU,KAAV,CAApC;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,mBAAkCF,cAAQ,CAA2B,IAA3B,CAA1C;AAAA;AAAA,MAAOG,SAAP;AAAA,MAAkBC,YAAlB;;AAEA,MAAMC,cAAc,GAAGC,iBAAW,CAAC,UAACC,CAAD,EAA4B;AAC7D,QAAIA,CAAC,CAACC,IAAF,KAAW,OAAX,IAAsBD,CAAC,CAACC,IAAF,KAAW,OAArC,EAA8C;AAC5CN,MAAAA,SAAS,CAAC,IAAD,CAAT;AACD;AACF,GAJiC,EAI/B,EAJ+B,CAAlC;AAMA,MAAMO,aAAa,GAAGH,iBAAW,CAAC,YAAM;AACtCJ,IAAAA,SAAS,CAAC,KAAD,CAAT;AACAC,IAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEO,KAAX;AACD,GAHgC,EAG9B,CAACP,SAAD,CAH8B,CAAjC;AAKA,MAAMQ,oBAAoB,GAAGL,iBAAW,CACtC,UAACC,CAAD,EAAO;AACLL,IAAAA,SAAS,CAAC,IAAD,CAAT;AACAH,IAAAA,OAAO,CAACQ,CAAD,CAAP;AACD,GAJqC,EAKtC,CAACR,OAAD,CALsC,CAAxC;AAQA,MAAMa,eAAe,GAAGN,iBAAW,CAAC,YAAM;AACxC,QAAIT,YAAJ,EAAkBY,aAAa;AAChC,GAFkC,EAEhC,CAACZ,YAAD,EAAeY,aAAf,CAFgC,CAAnC;AAIA,MAAMI,OAAO,GAAGC,aAAO,CACrB;AAAA,wBAAMC,wCAACC,uDAAD;AAAkB,MAAA,OAAO,EAAEpB,OAA3B;AAAoC,MAAA,WAAW,EAAEgB,eAAjD;AAAkE,MAAA,OAAO,EAAEH;AAA3E,MAAN;AAAA,GADqB,EAErB,CAACb,OAAD,EAAUgB,eAAV,EAA2BH,aAA3B,CAFqB,CAAvB;AAKA,sBACEM,kEACEA,wCAACE,gCAAD;AACE,IAAA,OAAO,EAAEN,oBADX;AAEE,IAAA,UAAU,EAAEN,cAFd;AAGE,IAAA,KAAK,EAAEP,KAHT;AAIE,IAAA,GAAG,EAAEM,YAJP;AAKE,mBAAY;AALd,KAOGT,IAAI,iBAAIoB,wCAAC,IAAD;AAAM,IAAA,IAAI,EAAC,MAAX;AAAkB,IAAA,IAAI,EAAC;AAAvB,IAPX,CADF,eAUEA,wCAACG,qBAAD;AAAY,IAAA,gBAAgB,EAAEf,SAA9B;AAAyC,IAAA,WAAW,EAAEF,MAAtD;AAA8D,IAAA,gBAAgB,EAAEQ;AAAhF,KACGI,OADH,CAVF,CADF;AAgBD;;;;"}

package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -2,7 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _extends = require('@babel/runtime/helpers/extends');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var outOfTheBox_PopupMenu_styles = require('./styles.js');
 var GlobalHeaderContext = require('../../GlobalHeaderContext.js');
 require('styled-components');
@@ -10,8 +13,13 @@ require('../../defaultProps.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+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; }
 var PopupMenuContent = /*#__PURE__*/React__default['default'].memo(function (_ref) {
   var options = _ref.options,
       onItemClick = _ref.onItemClick,
@@ -20,7 +28,7 @@ var PopupMenuContent = /*#__PURE__*/React__default['default'].memo(function (_re
   var _useContext = React.useContext(GlobalHeaderContext.GlobalHeaderContext),
       instanceUID = _useContext.instanceUID;
 
-  var menuRef = React.useRef();
+  var menuRef = React.useRef(null);
   React.useEffect(function () {
     var _menuRef$current, _menuRef$current$firs;
 
@@ -29,14 +37,17 @@ var PopupMenuContent = /*#__PURE__*/React__default['default'].memo(function (_re
   var content = React.useMemo(function () {
     return options.map(function (option) {
       var type = option.type,
-          icon = option.icon,
-          label = option.label,
+          Icon = option.Icon,
+          _option$label = option.label,
+          label = _option$label === void 0 ? '' : _option$label,
           onClick = option.onClick,
           Content = option.Content;
 
+      var ariaAndDataProps = _objectSpread(_objectSpread({}, dsPropsHelpers.getAriaProps(option)), dsPropsHelpers.getDataProps(option));
+
       var handleClick = function handleClick(e) {
         onItemClick(e);
-        onClick(e);
+        if (onClick) onClick(e);
       };
 
       var handleKeyDown = function handleKeyDown(e) {
@@ -45,23 +56,23 @@ var PopupMenuContent = /*#__PURE__*/React__default['default'].memo(function (_re
 
       switch (type) {
         case 'separator':
-          return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.Separator, {
+          return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.Separator, _extends__default['default']({
             key: "".concat(instanceUID, "-separator-").concat(label)
-          });
+          }, ariaAndDataProps));
 
         case 'custom':
-          return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.ItemWrapper, {
+          return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.ItemWrapper, _extends__default['default']({
             onClick: handleClick,
             onKeyDown: handleKeyDown,
             key: "".concat(instanceUID, "-popup-").concat(label)
-          }, /*#__PURE__*/React__default['default'].createElement(Content, null));
+          }, ariaAndDataProps), Content && /*#__PURE__*/React__default['default'].createElement(Content, null));
 
         default:
-          return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.ItemWrapper, {
+          return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.ItemWrapper, _extends__default['default']({
             onClick: handleClick,
             onKeyDown: handleKeyDown,
             key: "".concat(instanceUID, "-popup-").concat(label)
-          }, icon, outOfTheBox_PopupMenu_styles.Label && /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.Label, null, label));
+          }, ariaAndDataProps), Icon && /*#__PURE__*/React__default['default'].createElement(Icon, null), outOfTheBox_PopupMenu_styles.Label && /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.Label, null, label));
       }
     });
   }, [onClose, onItemClick, options, instanceUID]);

package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupMenuContent.js","sources":["../../../../src/outOfTheBox/PopupMenu/PopupMenuContent.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo, useContext } from 'react';\nimport { Separator, ItemWrapper, Label, List } from './styles';\nimport type { PopupMenuContentPropsT as Props } from '../../index.d';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const PopupMenuContent = React.memo(({ options, onItemClick, onClose }: Props): JSX.Element => {\n  const { instanceUID } = useContext(GlobalHeaderContext);\n\n  const menuRef = useRef<HTMLDivElement>();\n\n  useEffect(() => {\n    (menuRef.current?.firstChild as HTMLButtonElement)?.focus();\n  }, []);\n\n  const content = useMemo(\n    () =>\n      options.map((option) => {\n        const { type, icon, label, onClick, Content } = option;\n\n        const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {\n          onItemClick(e);\n          onClick(e);\n        };\n\n        const handleKeyDown = (e: React.KeyboardEvent) => {\n          if (e.code === 'Escape') onClose();\n        };\n\n        switch (type) {\n          case 'separator':\n            return <Separator key={`${instanceUID}-separator-${label}`} />;\n          case 'custom':\n            return (\n              <ItemWrapper onClick={handleClick} onKeyDown={handleKeyDown} key={`${instanceUID}-popup-${label}`}>\n                <Content />\n              </ItemWrapper>\n            );\n          default:\n            return (\n              <ItemWrapper onClick={handleClick} onKeyDown={handleKeyDown} key={`${instanceUID}-popup-${label}`}>\n                {icon}\n                {Label && <Label>{label}</Label>}\n              </ItemWrapper>\n            );\n        }\n      }),\n    [onClose, onItemClick, options, instanceUID],\n  );\n  return <List ref={menuRef}>{content}</List>;\n});\n"],"names":["PopupMenuContent","React","memo","options","onItemClick","onClose","useContext","GlobalHeaderContext","instanceUID","menuRef","useRef","useEffect","current","firstChild","focus","content","useMemo","map","option","type","icon","label","onClick","Content","handleClick","e","handleKeyDown","code","Separator","ItemWrapper","Label","List"],"mappings":";;;;;;;;;;;;;;IAKaA,gBAAgB,gBAAGC,yBAAK,CAACC,IAAN,CAAW,gBAA2D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,WAA+C,QAA/CA,WAA+C;AAAA,MAAlCC,OAAkC,QAAlCA,OAAkC;;AACpG,oBAAwBC,gBAAU,CAACC,uCAAD,CAAlC;AAAA,MAAQC,WAAR,eAAQA,WAAR;;AAEA,MAAMC,OAAO,GAAGC,YAAM,EAAtB;AAEAC,EAAAA,eAAS,CAAC,YAAM;AAAA;;AACd,wBAACF,OAAO,CAACG,OAAT,8EAAC,iBAAiBC,UAAlB,gFAAoDC,KAApD;AACD,GAFQ,EAEN,EAFM,CAAT;AAIA,MAAMC,OAAO,GAAGC,aAAO,CACrB;AAAA,WACEb,OAAO,CAACc,GAAR,CAAY,UAACC,MAAD,EAAY;AACtB,UAAQC,IAAR,GAAgDD,MAAhD,CAAQC,IAAR;AAAA,UAAcC,IAAd,GAAgDF,MAAhD,CAAcE,IAAd;AAAA,UAAoBC,KAApB,GAAgDH,MAAhD,CAAoBG,KAApB;AAAA,UAA2BC,OAA3B,GAAgDJ,MAAhD,CAA2BI,OAA3B;AAAA,UAAoCC,OAApC,GAAgDL,MAAhD,CAAoCK,OAApC;;AAEA,UAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAAkD;AACpErB,QAAAA,WAAW,CAACqB,CAAD,CAAX;AACAH,QAAAA,OAAO,CAACG,CAAD,CAAP;AACD,OAHD;;AAKA,UAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACD,CAAD,EAA4B;AAChD,YAAIA,CAAC,CAACE,IAAF,KAAW,QAAf,EAAyBtB,OAAO;AACjC,OAFD;;AAIA,cAAQc,IAAR;AACE,aAAK,WAAL;AACE,8BAAOlB,wCAAC2B,sCAAD;AAAW,YAAA,GAAG,YAAKpB,WAAL,wBAA8Ba,KAA9B;AAAd,YAAP;;AACF,aAAK,QAAL;AACE,8BACEpB,wCAAC4B,wCAAD;AAAa,YAAA,OAAO,EAAEL,WAAtB;AAAmC,YAAA,SAAS,EAAEE,aAA9C;AAA6D,YAAA,GAAG,YAAKlB,WAAL,oBAA0Ba,KAA1B;AAAhE,0BACEpB,wCAAC,OAAD,OADF,CADF;;AAKF;AACE,8BACEA,wCAAC4B,wCAAD;AAAa,YAAA,OAAO,EAAEL,WAAtB;AAAmC,YAAA,SAAS,EAAEE,aAA9C;AAA6D,YAAA,GAAG,YAAKlB,WAAL,oBAA0Ba,KAA1B;AAAhE,aACGD,IADH,EAEGU,kCAAK,iBAAI7B,wCAAC6B,kCAAD,QAAQT,KAAR,CAFZ,CADF;AAVJ;AAiBD,KA7BD,CADF;AAAA,GADqB,EAgCrB,CAAChB,OAAD,EAAUD,WAAV,EAAuBD,OAAvB,EAAgCK,WAAhC,CAhCqB,CAAvB;AAkCA,sBAAOP,wCAAC8B,iCAAD;AAAM,IAAA,GAAG,EAAEtB;AAAX,KAAqBM,OAArB,CAAP;AACD,CA5C+B;;;;"}
+{"version":3,"file":"PopupMenuContent.js","sources":["../../../../src/outOfTheBox/PopupMenu/PopupMenuContent.tsx"],"sourcesContent":["import React, { useRef, useEffect, useMemo, useContext } from 'react';\nimport { getAriaProps, getDataProps } from '@elliemae/ds-props-helpers';\nimport { Separator, ItemWrapper, Label, List } from './styles';\nimport type { PopupMenuContentPropsT as Props } from '../../index.d';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const PopupMenuContent = React.memo(({ options, onItemClick, onClose }: Props): JSX.Element => {\n  const { instanceUID } = useContext(GlobalHeaderContext);\n\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    (menuRef.current?.firstChild as HTMLButtonElement)?.focus();\n  }, []);\n\n  const content = useMemo(\n    () =>\n      options.map((option) => {\n        const { type, Icon, label = '', onClick, Content } = option;\n\n        const ariaAndDataProps = {\n          ...getAriaProps(option),\n          ...getDataProps(option),\n        };\n\n        const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {\n          onItemClick(e);\n          if (onClick) onClick(e);\n        };\n\n        const handleKeyDown = (e: React.KeyboardEvent) => {\n          if (e.code === 'Escape') onClose();\n        };\n\n        switch (type) {\n          case 'separator':\n            return <Separator key={`${instanceUID}-separator-${label}`} {...ariaAndDataProps} />;\n          case 'custom':\n            return (\n              <ItemWrapper\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                key={`${instanceUID}-popup-${label}`}\n                {...ariaAndDataProps}\n              >\n                {Content && <Content />}\n              </ItemWrapper>\n            );\n          default:\n            return (\n              <ItemWrapper\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                key={`${instanceUID}-popup-${label}`}\n                {...ariaAndDataProps}\n              >\n                {Icon && <Icon />}\n                {Label && <Label>{label}</Label>}\n              </ItemWrapper>\n            );\n        }\n      }),\n    [onClose, onItemClick, options, instanceUID],\n  );\n  return <List ref={menuRef}>{content}</List>;\n});\n"],"names":["PopupMenuContent","React","memo","options","onItemClick","onClose","useContext","GlobalHeaderContext","instanceUID","menuRef","useRef","useEffect","current","firstChild","focus","content","useMemo","map","option","type","Icon","label","onClick","Content","ariaAndDataProps","getAriaProps","getDataProps","handleClick","e","handleKeyDown","code","Separator","ItemWrapper","Label","List"],"mappings":";;;;;;;;;;;;;;;;;;;;;;IAMaA,gBAAgB,gBAAGC,yBAAK,CAACC,IAAN,CAAW,gBAA2D;AAAA,MAAxDC,OAAwD,QAAxDA,OAAwD;AAAA,MAA/CC,WAA+C,QAA/CA,WAA+C;AAAA,MAAlCC,OAAkC,QAAlCA,OAAkC;;AACpG,oBAAwBC,gBAAU,CAACC,uCAAD,CAAlC;AAAA,MAAQC,WAAR,eAAQA,WAAR;;AAEA,MAAMC,OAAO,GAAGC,YAAM,CAAiB,IAAjB,CAAtB;AAEAC,EAAAA,eAAS,CAAC,YAAM;AAAA;;AACd,wBAACF,OAAO,CAACG,OAAT,8EAAC,iBAAiBC,UAAlB,gFAAoDC,KAApD;AACD,GAFQ,EAEN,EAFM,CAAT;AAIA,MAAMC,OAAO,GAAGC,aAAO,CACrB;AAAA,WACEb,OAAO,CAACc,GAAR,CAAY,UAACC,MAAD,EAAY;AACtB,UAAQC,IAAR,GAAqDD,MAArD,CAAQC,IAAR;AAAA,UAAcC,IAAd,GAAqDF,MAArD,CAAcE,IAAd;AAAA,0BAAqDF,MAArD,CAAoBG,KAApB;AAAA,UAAoBA,KAApB,8BAA4B,EAA5B;AAAA,UAAgCC,OAAhC,GAAqDJ,MAArD,CAAgCI,OAAhC;AAAA,UAAyCC,OAAzC,GAAqDL,MAArD,CAAyCK,OAAzC;;AAEA,UAAMC,gBAAgB,mCACjBC,2BAAY,CAACP,MAAD,CADK,GAEjBQ,2BAAY,CAACR,MAAD,CAFK,CAAtB;;AAKA,UAAMS,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAAkD;AACpExB,QAAAA,WAAW,CAACwB,CAAD,CAAX;AACA,YAAIN,OAAJ,EAAaA,OAAO,CAACM,CAAD,CAAP;AACd,OAHD;;AAKA,UAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACD,CAAD,EAA4B;AAChD,YAAIA,CAAC,CAACE,IAAF,KAAW,QAAf,EAAyBzB,OAAO;AACjC,OAFD;;AAIA,cAAQc,IAAR;AACE,aAAK,WAAL;AACE,8BAAOlB,wCAAC8B,sCAAD;AAAW,YAAA,GAAG,YAAKvB,WAAL,wBAA8Ba,KAA9B;AAAd,aAAyDG,gBAAzD,EAAP;;AACF,aAAK,QAAL;AACE,8BACEvB,wCAAC+B,wCAAD;AACE,YAAA,OAAO,EAAEL,WADX;AAEE,YAAA,SAAS,EAAEE,aAFb;AAGE,YAAA,GAAG,YAAKrB,WAAL,oBAA0Ba,KAA1B;AAHL,aAIMG,gBAJN,GAMGD,OAAO,iBAAItB,wCAAC,OAAD,OANd,CADF;;AAUF;AACE,8BACEA,wCAAC+B,wCAAD;AACE,YAAA,OAAO,EAAEL,WADX;AAEE,YAAA,SAAS,EAAEE,aAFb;AAGE,YAAA,GAAG,YAAKrB,WAAL,oBAA0Ba,KAA1B;AAHL,aAIMG,gBAJN,GAMGJ,IAAI,iBAAInB,wCAAC,IAAD,OANX,EAOGgC,kCAAK,iBAAIhC,wCAACgC,kCAAD,QAAQZ,KAAR,CAPZ,CADF;AAfJ;AA2BD,KA5CD,CADF;AAAA,GADqB,EA+CrB,CAAChB,OAAD,EAAUD,WAAV,EAAuBD,OAAvB,EAAgCK,WAAhC,CA/CqB,CAAvB;AAiDA,sBAAOP,wCAACiC,iCAAD;AAAM,IAAA,GAAG,EAAEzB;AAAX,KAAqBM,OAArB,CAAP;AACD,CA3D+B;;;;"}

package/cjs/outOfTheBox/index.js

@@ -7,11 +7,15 @@ var outOfTheBox_PopupMenu_PopupMenu = require('./PopupMenu/PopupMenu.js');
 require('@babel/runtime/helpers/slicedToArray');
 require('react');
 require('@elliemae/ds-app-picker');
+require('@elliemae/ds-utilities');
 require('@elliemae/ds-icons');
 require('../components/Toolbar/styles.js');
 require('styled-components');
-require('@elliemae/ds-popover');
+require('@elliemae/ds-popperjs');
 require('./PopupMenu/PopupMenuContent.js');
+require('@babel/runtime/helpers/extends');
+require('@babel/runtime/helpers/defineProperty');
+require('@elliemae/ds-props-helpers');
 require('./PopupMenu/styles.js');
 require('../GlobalHeaderContext.js');
 require('../defaultProps.js');

package/cjs/outOfTheBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/GlobalHeader.js

@@ -15,18 +15,21 @@ import 'styled-components';
 import './components/Breadcrumb/PureBreadcrumb.js';
 import '@elliemae/ds-icons';
 import './components/Toolbar/ToolbarItems.js';
+import '@babel/runtime/helpers/esm/extends';
 import './outOfTheBox/AppPicker/AppPicker.js';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import '@elliemae/ds-app-picker';
+import '@elliemae/ds-utilities';
 import './components/Toolbar/styles.js';
 import './outOfTheBox/PopupMenu/PopupMenu.js';
-import '@elliemae/ds-popover';
+import '@elliemae/ds-popperjs';
 import './outOfTheBox/PopupMenu/PopupMenuContent.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+import '@elliemae/ds-props-helpers';
 import './outOfTheBox/PopupMenu/styles.js';
 import '@babel/runtime/helpers/esm/toConsumableArray';
 import 'uid';
 import './config/useGetPropsWithDefaults.js';
-import '@babel/runtime/helpers/esm/defineProperty';
 import './styles.js';
 import './config/validateHelpers.js';
 import '@babel/runtime/helpers/esm/typeof';

package/esm/GlobalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalHeader.js","sources":["../../src/GlobalHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { describe } from 'react-desc';\nimport { globalHeaderProps } from './propTypes';\nimport type { GlobalHeaderPropsT as Props } from './index.d';\nimport { GlobalHeaderTitle } from './components/Title/GlobalHeaderTitle';\nimport { GlobalHeaderBreadcrumb } from './components/Breadcrumb/GlobalHeaderBreadcrumb';\nimport { GlobalHeaderToolbar } from './components/Toolbar/GlobalHeaderToolbar';\nimport { GlobalHeaderContext } from './GlobalHeaderContext';\nimport { useGlobalHeader } from './config/useGlobalHeader';\nimport { defaultProps } from './defaultProps';\nimport { GlobalHeaderContainer } from './GlobalHeaderContainer';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst GlobalHeader = (props: Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n  return (\n    <GlobalHeaderContainer>\n      <GlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderTitle />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </GlobalHeaderContext.Provider>\n    </GlobalHeaderContainer>\n  );\n};\n\nGlobalHeader.defaultProps = defaultProps;\n\nGlobalHeader.propTypes = globalHeaderProps;\nconst GlobalHeaderWithSchema = describe(GlobalHeader);\nGlobalHeaderWithSchema.propTypes = globalHeaderProps;\n\nexport { GlobalHeader, GlobalHeaderWithSchema };\n"],"names":["GlobalHeader","props","useValidateProps","ctx","useGlobalHeader","defaultProps","propTypes","globalHeaderProps","GlobalHeaderWithSchema","describe"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA+B;AAClDC,EAAAA,gBAAgB,CAACD,KAAD,CAAhB;AACA,MAAME,GAAG,GAAGC,eAAe,CAACH,KAAD,CAA3B;AACA,sBACE,oBAAC,qBAAD,qBACE,oBAAC,mBAAD,CAAqB,QAArB;AAA8B,IAAA,KAAK,EAAEE;AAArC,kBACE,oBAAC,iBAAD,OADF,eAEE,oBAAC,sBAAD,OAFF,eAGE,oBAAC,mBAAD,OAHF,CADF,CADF;AASD;;AAEDH,YAAY,CAACK,YAAb,GAA4BA,YAA5B;AAEAL,YAAY,CAACM,SAAb,GAAyBC,iBAAzB;IACMC,sBAAsB,GAAGC,QAAQ,CAACT,YAAD;AACvCQ,sBAAsB,CAACF,SAAvB,GAAmCC,iBAAnC;;;;"}
+{"version":3,"file":"GlobalHeader.js","sources":["../../src/GlobalHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { describe } from 'react-desc';\nimport { globalHeaderProps } from './propTypes';\nimport type { GlobalHeaderPropsT as Props } from './index.d';\nimport { GlobalHeaderTitle } from './components/Title/GlobalHeaderTitle';\nimport { GlobalHeaderBreadcrumb } from './components/Breadcrumb/GlobalHeaderBreadcrumb';\nimport { GlobalHeaderToolbar } from './components/Toolbar/GlobalHeaderToolbar';\nimport { GlobalHeaderContext } from './GlobalHeaderContext';\nimport { useGlobalHeader } from './config/useGlobalHeader';\nimport { defaultProps } from './defaultProps';\nimport { GlobalHeaderContainer } from './GlobalHeaderContainer';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst GlobalHeader = (props: Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n  return (\n    <GlobalHeaderContainer>\n      <GlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderTitle />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </GlobalHeaderContext.Provider>\n    </GlobalHeaderContainer>\n  );\n};\n\nGlobalHeader.defaultProps = defaultProps;\n\nGlobalHeader.propTypes = globalHeaderProps;\nconst GlobalHeaderWithSchema = describe(GlobalHeader);\nGlobalHeaderWithSchema.propTypes = globalHeaderProps;\n\nexport { GlobalHeader, GlobalHeaderWithSchema };\n"],"names":["GlobalHeader","props","useValidateProps","ctx","useGlobalHeader","defaultProps","propTypes","globalHeaderProps","GlobalHeaderWithSchema","describe"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAaMA,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA+B;AAClDC,EAAAA,gBAAgB,CAACD,KAAD,CAAhB;AACA,MAAME,GAAG,GAAGC,eAAe,CAACH,KAAD,CAA3B;AACA,sBACE,oBAAC,qBAAD,qBACE,oBAAC,mBAAD,CAAqB,QAArB;AAA8B,IAAA,KAAK,EAAEE;AAArC,kBACE,oBAAC,iBAAD,OADF,eAEE,oBAAC,sBAAD,OAFF,eAGE,oBAAC,mBAAD,OAHF,CADF,CADF;AASD;;AAEDH,YAAY,CAACK,YAAb,GAA4BA,YAA5B;AAEAL,YAAY,CAACM,SAAb,GAAyBC,iBAAzB;IACMC,sBAAsB,GAAGC,QAAQ,CAACT,YAAD;AACvCQ,sBAAsB,CAACF,SAAvB,GAAmCC,iBAAnC;;;;"}

package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -15,14 +15,14 @@ var GlobalHeaderBreadcrumb = function GlobalHeaderBreadcrumb() {
       setShowIconOnly = _useContext.setShowIconOnly,
       globalHeaderBreadcrumbGrid = _useContext.globalHeaderBreadcrumbGrid;
 
-  var breakpoint = useRef();
-  var flexRegion = useRef();
+  var breakpoint = useRef(null);
+  var flexRegion = useRef(null);
   useEffect(function () {
     var evaluateShowIconOnly = function 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;
       }
@@ -37,13 +37,13 @@ var GlobalHeaderBreadcrumb = function GlobalHeaderBreadcrumb() {
   return /*#__PURE__*/React.createElement(Grid, {
     height: "100%",
     alignItems: "center",
-    justifyContent: "left",
-    role: "navigation",
+    justifyContent: "flex-start",
     "aria-label": "breadcrumbs",
-    cols: globalHeaderBreadcrumbGrid
+    cols: globalHeaderBreadcrumbGrid,
+    role: "navigation"
   }, /*#__PURE__*/React.createElement(Pipe, {
     showIconOnly: showIconOnly
-  }), breadcrumb.map(function (item) {
+  }), breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.map(function (item) {
     var label = item.label,
         hasNext = item.hasNext,
         isSelected = item.isSelected,

package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalHeaderBreadcrumb.js","sources":["../../../../src/components/Breadcrumb/GlobalHeaderBreadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useContext, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Pipe } from './styles';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\nimport { PureBreadcrumb } from './PureBreadcrumb';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n  const {\n    props: { breadcrumb },\n    instanceUID,\n    showIconOnly,\n    setShowIconOnly,\n    globalHeaderBreadcrumbGrid,\n  } = useContext(GlobalHeaderContext);\n  const breakpoint = useRef<number>();\n  const flexRegion = useRef<HTMLDivElement>();\n\n  useEffect(() => {\n    const evaluateShowIconOnly = () => {\n      if (flexRegion?.current.offsetWidth <= 0 && !breakpoint.current) {\n        setShowIconOnly(true);\n        breakpoint.current = window.innerWidth;\n      } else if (window.innerWidth >= breakpoint.current) {\n        setShowIconOnly(false);\n        breakpoint.current = null;\n      }\n    };\n\n    evaluateShowIconOnly();\n\n    window.addEventListener('resize', evaluateShowIconOnly);\n    return () => window.removeEventListener('resize', evaluateShowIconOnly);\n  }, [breakpoint, flexRegion, setShowIconOnly]);\n\n  return (\n    <Grid\n      height=\"100%\"\n      alignItems=\"center\"\n      justifyContent=\"left\"\n      role=\"navigation\"\n      aria-label=\"breadcrumbs\"\n      cols={globalHeaderBreadcrumbGrid}\n    >\n      <Pipe showIconOnly={showIconOnly} />\n      {breadcrumb.map((item) => {\n        const { label, hasNext, isSelected, onClick } = item;\n        return (\n          <PureBreadcrumb\n            label={label}\n            hasNext={hasNext}\n            isSelected={isSelected}\n            onClick={onClick}\n            length={breadcrumb.length}\n            key={`${instanceUID}-breadcrumb-item-${label}`}\n          />\n        );\n      })}\n      <div id=\"global-header-flex-region\" ref={flexRegion}></div>\n    </Grid>\n  );\n};\n"],"names":["GlobalHeaderBreadcrumb","useContext","GlobalHeaderContext","breadcrumb","props","instanceUID","showIconOnly","setShowIconOnly","globalHeaderBreadcrumbGrid","breakpoint","useRef","flexRegion","useEffect","evaluateShowIconOnly","current","offsetWidth","window","innerWidth","addEventListener","removeEventListener","map","item","label","hasNext","isSelected","onClick","length"],"mappings":";;;;;;;;;IAMaA,sBAAsB,GAAG,SAAzBA,sBAAyB,GAAmB;AACvD,oBAMIC,UAAU,CAACC,mBAAD,CANd;AAAA,MACWC,UADX,eACEC,KADF,CACWD,UADX;AAAA,MAEEE,WAFF,eAEEA,WAFF;AAAA,MAGEC,YAHF,eAGEA,YAHF;AAAA,MAIEC,eAJF,eAIEA,eAJF;AAAA,MAKEC,0BALF,eAKEA,0BALF;;AAOA,MAAMC,UAAU,GAAGC,MAAM,EAAzB;AACA,MAAMC,UAAU,GAAGD,MAAM,EAAzB;AAEAE,EAAAA,SAAS,CAAC,YAAM;AACd,QAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACjC,UAAI,CAAAF,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEG,OAAZ,CAAoBC,WAApB,KAAmC,CAAnC,IAAwC,CAACN,UAAU,CAACK,OAAxD,EAAiE;AAC/DP,QAAAA,eAAe,CAAC,IAAD,CAAf;AACAE,QAAAA,UAAU,CAACK,OAAX,GAAqBE,MAAM,CAACC,UAA5B;AACD,OAHD,MAGO,IAAID,MAAM,CAACC,UAAP,IAAqBR,UAAU,CAACK,OAApC,EAA6C;AAClDP,QAAAA,eAAe,CAAC,KAAD,CAAf;AACAE,QAAAA,UAAU,CAACK,OAAX,GAAqB,IAArB;AACD;AACF,KARD;;AAUAD,IAAAA,oBAAoB;AAEpBG,IAAAA,MAAM,CAACE,gBAAP,CAAwB,QAAxB,EAAkCL,oBAAlC;AACA,WAAO;AAAA,aAAMG,MAAM,CAACG,mBAAP,CAA2B,QAA3B,EAAqCN,oBAArC,CAAN;AAAA,KAAP;AACD,GAfQ,EAeN,CAACJ,UAAD,EAAaE,UAAb,EAAyBJ,eAAzB,CAfM,CAAT;AAiBA,sBACE,oBAAC,IAAD;AACE,IAAA,MAAM,EAAC,MADT;AAEE,IAAA,UAAU,EAAC,QAFb;AAGE,IAAA,cAAc,EAAC,MAHjB;AAIE,IAAA,IAAI,EAAC,YAJP;AAKE,kBAAW,aALb;AAME,IAAA,IAAI,EAAEC;AANR,kBAQE,oBAAC,IAAD;AAAM,IAAA,YAAY,EAAEF;AAApB,IARF,EASGH,UAAU,CAACiB,GAAX,CAAe,UAACC,IAAD,EAAU;AACxB,QAAQC,KAAR,GAAgDD,IAAhD,CAAQC,KAAR;AAAA,QAAeC,OAAf,GAAgDF,IAAhD,CAAeE,OAAf;AAAA,QAAwBC,UAAxB,GAAgDH,IAAhD,CAAwBG,UAAxB;AAAA,QAAoCC,OAApC,GAAgDJ,IAAhD,CAAoCI,OAApC;AACA,wBACE,oBAAC,cAAD;AACE,MAAA,KAAK,EAAEH,KADT;AAEE,MAAA,OAAO,EAAEC,OAFX;AAGE,MAAA,UAAU,EAAEC,UAHd;AAIE,MAAA,OAAO,EAAEC,OAJX;AAKE,MAAA,MAAM,EAAEtB,UAAU,CAACuB,MALrB;AAME,MAAA,GAAG,YAAKrB,WAAL,8BAAoCiB,KAApC;AANL,MADF;AAUD,GAZA,CATH,eAsBE;AAAK,IAAA,EAAE,EAAC,2BAAR;AAAoC,IAAA,GAAG,EAAEX;AAAzC,IAtBF,CADF;AA0BD;;;;"}
+{"version":3,"file":"GlobalHeaderBreadcrumb.js","sources":["../../../../src/components/Breadcrumb/GlobalHeaderBreadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useContext, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Pipe } from './styles';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\nimport { PureBreadcrumb } from './PureBreadcrumb';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n  const {\n    props: { breadcrumb },\n    instanceUID,\n    showIconOnly,\n    setShowIconOnly,\n    globalHeaderBreadcrumbGrid,\n  } = useContext(GlobalHeaderContext);\n  const breakpoint = useRef<number | null>(null);\n  const flexRegion = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const evaluateShowIconOnly = () => {\n      if (flexRegion && flexRegion.current && flexRegion?.current.offsetWidth <= 0 && !breakpoint.current) {\n        setShowIconOnly(true);\n        breakpoint.current = window.innerWidth;\n      } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {\n        setShowIconOnly(false);\n        breakpoint.current = null;\n      }\n    };\n\n    evaluateShowIconOnly();\n\n    window.addEventListener('resize', evaluateShowIconOnly);\n    return () => window.removeEventListener('resize', evaluateShowIconOnly);\n  }, [breakpoint, flexRegion, setShowIconOnly]);\n\n  return (\n    <Grid\n      height=\"100%\"\n      alignItems=\"center\"\n      justifyContent=\"flex-start\"\n      aria-label=\"breadcrumbs\"\n      cols={globalHeaderBreadcrumbGrid}\n      role=\"navigation\"\n    >\n      <Pipe showIconOnly={showIconOnly} />\n      {breadcrumb?.map((item) => {\n        const { label, hasNext, isSelected, onClick } = item;\n        return (\n          <PureBreadcrumb\n            label={label}\n            hasNext={hasNext}\n            isSelected={isSelected}\n            onClick={onClick}\n            length={breadcrumb.length}\n            key={`${instanceUID}-breadcrumb-item-${label}`}\n          />\n        );\n      })}\n      <div id=\"global-header-flex-region\" ref={flexRegion}></div>\n    </Grid>\n  );\n};\n"],"names":["GlobalHeaderBreadcrumb","useContext","GlobalHeaderContext","breadcrumb","props","instanceUID","showIconOnly","setShowIconOnly","globalHeaderBreadcrumbGrid","breakpoint","useRef","flexRegion","useEffect","evaluateShowIconOnly","current","offsetWidth","window","innerWidth","addEventListener","removeEventListener","map","item","label","hasNext","isSelected","onClick","length"],"mappings":";;;;;;;;;IAMaA,sBAAsB,GAAG,SAAzBA,sBAAyB,GAAmB;AACvD,oBAMIC,UAAU,CAACC,mBAAD,CANd;AAAA,MACWC,UADX,eACEC,KADF,CACWD,UADX;AAAA,MAEEE,WAFF,eAEEA,WAFF;AAAA,MAGEC,YAHF,eAGEA,YAHF;AAAA,MAIEC,eAJF,eAIEA,eAJF;AAAA,MAKEC,0BALF,eAKEA,0BALF;;AAOA,MAAMC,UAAU,GAAGC,MAAM,CAAgB,IAAhB,CAAzB;AACA,MAAMC,UAAU,GAAGD,MAAM,CAAiB,IAAjB,CAAzB;AAEAE,EAAAA,SAAS,CAAC,YAAM;AACd,QAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACjC,UAAIF,UAAU,IAAIA,UAAU,CAACG,OAAzB,IAAoC,CAAAH,UAAU,SAAV,IAAAA,UAAU,WAAV,YAAAA,UAAU,CAAEG,OAAZ,CAAoBC,WAApB,KAAmC,CAAvE,IAA4E,CAACN,UAAU,CAACK,OAA5F,EAAqG;AACnGP,QAAAA,eAAe,CAAC,IAAD,CAAf;AACAE,QAAAA,UAAU,CAACK,OAAX,GAAqBE,MAAM,CAACC,UAA5B;AACD,OAHD,MAGO,IAAIR,UAAU,IAAIA,UAAU,CAACK,OAAX,KAAuB,IAArC,IAA6CE,MAAM,CAACC,UAAP,IAAqBR,UAAU,CAACK,OAAjF,EAA0F;AAC/FP,QAAAA,eAAe,CAAC,KAAD,CAAf;AACAE,QAAAA,UAAU,CAACK,OAAX,GAAqB,IAArB;AACD;AACF,KARD;;AAUAD,IAAAA,oBAAoB;AAEpBG,IAAAA,MAAM,CAACE,gBAAP,CAAwB,QAAxB,EAAkCL,oBAAlC;AACA,WAAO;AAAA,aAAMG,MAAM,CAACG,mBAAP,CAA2B,QAA3B,EAAqCN,oBAArC,CAAN;AAAA,KAAP;AACD,GAfQ,EAeN,CAACJ,UAAD,EAAaE,UAAb,EAAyBJ,eAAzB,CAfM,CAAT;AAiBA,sBACE,oBAAC,IAAD;AACE,IAAA,MAAM,EAAC,MADT;AAEE,IAAA,UAAU,EAAC,QAFb;AAGE,IAAA,cAAc,EAAC,YAHjB;AAIE,kBAAW,aAJb;AAKE,IAAA,IAAI,EAAEC,0BALR;AAME,IAAA,IAAI,EAAC;AANP,kBAQE,oBAAC,IAAD;AAAM,IAAA,YAAY,EAAEF;AAApB,IARF,EASGH,UATH,aASGA,UATH,uBASGA,UAAU,CAAEiB,GAAZ,CAAgB,UAACC,IAAD,EAAU;AACzB,QAAQC,KAAR,GAAgDD,IAAhD,CAAQC,KAAR;AAAA,QAAeC,OAAf,GAAgDF,IAAhD,CAAeE,OAAf;AAAA,QAAwBC,UAAxB,GAAgDH,IAAhD,CAAwBG,UAAxB;AAAA,QAAoCC,OAApC,GAAgDJ,IAAhD,CAAoCI,OAApC;AACA,wBACE,oBAAC,cAAD;AACE,MAAA,KAAK,EAAEH,KADT;AAEE,MAAA,OAAO,EAAEC,OAFX;AAGE,MAAA,UAAU,EAAEC,UAHd;AAIE,MAAA,OAAO,EAAEC,OAJX;AAKE,MAAA,MAAM,EAAEtB,UAAU,CAACuB,MALrB;AAME,MAAA,GAAG,YAAKrB,WAAL,8BAAoCiB,KAApC;AANL,MADF;AAUD,GAZA,CATH,eAsBE;AAAK,IAAA,EAAE,EAAC,2BAAR;AAAoC,IAAA,GAAG,EAAEX;AAAzC,IAtBF,CADF;AA0BD;;;;"}

package/esm/components/Breadcrumb/PureBreadcrumb.js

@@ -14,7 +14,7 @@ var PureBreadcrumb = /*#__PURE__*/React.memo(function (_ref) {
     "aria-selected": isSelected,
     "data-testid": "gh-breadcrumb-btn"
   }, /*#__PURE__*/React.createElement(Label, {
-    isSelected: isSelected,
+    isSelected: !!isSelected,
     isOnlyItem: length === 1
   }, label)), hasNext && /*#__PURE__*/React.createElement(ChevronSmallRight, {
     size: "m",

package/esm/components/Breadcrumb/PureBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"PureBreadcrumb.js","sources":["../../../../src/components/Breadcrumb/PureBreadcrumb.tsx"],"sourcesContent":["import React from 'react';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { BreadcrumbItem, LabelButton, Label } from './styles';\nimport type { BreadcrumbItemT as Props } from '../../index.d';\n\nexport const PureBreadcrumb = React.memo(({ onClick, isSelected, length, label, hasNext }: Props) => (\n  <BreadcrumbItem>\n    <LabelButton onClick={onClick} aria-selected={isSelected} data-testid=\"gh-breadcrumb-btn\">\n      <Label isSelected={isSelected} isOnlyItem={length === 1}>\n        {label}\n      </Label>\n    </LabelButton>\n    {hasNext && <ChevronSmallRight size=\"m\" fill=\"#FFF\" />}\n  </BreadcrumbItem>\n));\n"],"names":["PureBreadcrumb","React","memo","onClick","isSelected","length","label","hasNext"],"mappings":";;;;;IAKaA,cAAc,gBAAGC,KAAK,CAACC,IAAN,CAAW;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,UAAZ,QAAYA,UAAZ;AAAA,MAAwBC,MAAxB,QAAwBA,MAAxB;AAAA,MAAgCC,KAAhC,QAAgCA,KAAhC;AAAA,MAAuCC,OAAvC,QAAuCA,OAAvC;AAAA,sBACvC,oBAAC,cAAD,qBACE,oBAAC,WAAD;AAAa,IAAA,OAAO,EAAEJ,OAAtB;AAA+B,qBAAeC,UAA9C;AAA0D,mBAAY;AAAtE,kBACE,oBAAC,KAAD;AAAO,IAAA,UAAU,EAAEA,UAAnB;AAA+B,IAAA,UAAU,EAAEC,MAAM,KAAK;AAAtD,KACGC,KADH,CADF,CADF,EAMGC,OAAO,iBAAI,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAC,GAAxB;AAA4B,IAAA,IAAI,EAAC;AAAjC,IANd,CADuC;AAAA,CAAX;;;;"}
+{"version":3,"file":"PureBreadcrumb.js","sources":["../../../../src/components/Breadcrumb/PureBreadcrumb.tsx"],"sourcesContent":["import React from 'react';\nimport { ChevronSmallRight } from '@elliemae/ds-icons';\nimport { BreadcrumbItem, LabelButton, Label } from './styles';\nimport type { BreadcrumbItemT as Props } from '../../index.d';\n\nexport const PureBreadcrumb = React.memo(({ onClick, isSelected, length, label, hasNext }: Props) => (\n  <BreadcrumbItem>\n    <LabelButton onClick={onClick} aria-selected={isSelected} data-testid=\"gh-breadcrumb-btn\">\n      <Label isSelected={!!isSelected} isOnlyItem={length === 1}>\n        {label}\n      </Label>\n    </LabelButton>\n    {hasNext && <ChevronSmallRight size=\"m\" fill=\"#FFF\" />}\n  </BreadcrumbItem>\n));\n"],"names":["PureBreadcrumb","React","memo","onClick","isSelected","length","label","hasNext"],"mappings":";;;;;IAKaA,cAAc,gBAAGC,KAAK,CAACC,IAAN,CAAW;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,UAAZ,QAAYA,UAAZ;AAAA,MAAwBC,MAAxB,QAAwBA,MAAxB;AAAA,MAAgCC,KAAhC,QAAgCA,KAAhC;AAAA,MAAuCC,OAAvC,QAAuCA,OAAvC;AAAA,sBACvC,oBAAC,cAAD,qBACE,oBAAC,WAAD;AAAa,IAAA,OAAO,EAAEJ,OAAtB;AAA+B,qBAAeC,UAA9C;AAA0D,mBAAY;AAAtE,kBACE,oBAAC,KAAD;AAAO,IAAA,UAAU,EAAE,CAAC,CAACA,UAArB;AAAiC,IAAA,UAAU,EAAEC,MAAM,KAAK;AAAxD,KACGC,KADH,CADF,CADF,EAMGC,OAAO,iBAAI,oBAAC,iBAAD;AAAmB,IAAA,IAAI,EAAC,GAAxB;AAA4B,IAAA,IAAI,EAAC;AAAjC,IANd,CADuC;AAAA,CAAX;;;;"}

package/esm/components/Toolbar/GlobalHeaderToolbar.js

@@ -2,15 +2,19 @@ import React, { useContext } from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { ToolbarItems } from './ToolbarItems.js';
 import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
+import '@babel/runtime/helpers/esm/extends';
 import '../../outOfTheBox/AppPicker/AppPicker.js';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import '@elliemae/ds-app-picker';
+import '@elliemae/ds-utilities';
 import '@elliemae/ds-icons';
 import './styles.js';
 import 'styled-components';
 import '../../outOfTheBox/PopupMenu/PopupMenu.js';
-import '@elliemae/ds-popover';
+import '@elliemae/ds-popperjs';
 import '../../outOfTheBox/PopupMenu/PopupMenuContent.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+import '@elliemae/ds-props-helpers';
 import '../../outOfTheBox/PopupMenu/styles.js';
 import '../../defaultProps.js';
 

package/esm/components/Toolbar/GlobalHeaderToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalHeaderToolbar.js","sources":["../../../../src/components/Toolbar/GlobalHeaderToolbar.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ToolbarItems } from './ToolbarItems';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const { globalHeaderToolbarGrid } = useContext(GlobalHeaderContext);\n  return (\n    <Grid\n      height=\"100%\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gutter=\"xxs\"\n      cols={globalHeaderToolbarGrid}\n      role=\"toolbar\"\n    >\n      <ToolbarItems />\n    </Grid>\n  );\n};\n"],"names":["GlobalHeaderToolbar","useContext","GlobalHeaderContext","globalHeaderToolbarGrid"],"mappings":";;;;;;;;;;;;;;;;IAKaA,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAmB;AACpD,oBAAoCC,UAAU,CAACC,mBAAD,CAA9C;AAAA,MAAQC,uBAAR,eAAQA,uBAAR;;AACA,sBACE,oBAAC,IAAD;AACE,IAAA,MAAM,EAAC,MADT;AAEE,IAAA,UAAU,EAAC,QAFb;AAGE,IAAA,cAAc,EAAC,QAHjB;AAIE,IAAA,MAAM,EAAC,KAJT;AAKE,IAAA,IAAI,EAAEA,uBALR;AAME,IAAA,IAAI,EAAC;AANP,kBAQE,oBAAC,YAAD,OARF,CADF;AAYD;;;;"}
+{"version":3,"file":"GlobalHeaderToolbar.js","sources":["../../../../src/components/Toolbar/GlobalHeaderToolbar.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ToolbarItems } from './ToolbarItems';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const GlobalHeaderToolbar = (): JSX.Element => {\n  const { globalHeaderToolbarGrid } = useContext(GlobalHeaderContext);\n  return (\n    <Grid\n      height=\"100%\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      gutter=\"xxs\"\n      cols={globalHeaderToolbarGrid}\n      role=\"toolbar\"\n    >\n      <ToolbarItems />\n    </Grid>\n  );\n};\n"],"names":["GlobalHeaderToolbar","useContext","GlobalHeaderContext","globalHeaderToolbarGrid"],"mappings":";;;;;;;;;;;;;;;;;;;;IAKaA,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAmB;AACpD,oBAAoCC,UAAU,CAACC,mBAAD,CAA9C;AAAA,MAAQC,uBAAR,eAAQA,uBAAR;;AACA,sBACE,oBAAC,IAAD;AACE,IAAA,MAAM,EAAC,MADT;AAEE,IAAA,UAAU,EAAC,QAFb;AAGE,IAAA,cAAc,EAAC,QAHjB;AAIE,IAAA,MAAM,EAAC,KAJT;AAKE,IAAA,IAAI,EAAEA,uBALR;AAME,IAAA,IAAI,EAAC;AANP,kBAQE,oBAAC,YAAD,OARF,CADF;AAYD;;;;"}

package/esm/components/Toolbar/ToolbarItems.js

@@ -1,3 +1,4 @@
+import _extends from '@babel/runtime/helpers/esm/extends';
 import React, { useContext, useMemo } from 'react';
 import { AppPicker } from '../../outOfTheBox/AppPicker/AppPicker.js';
 import { PopupMenu } from '../../outOfTheBox/PopupMenu/PopupMenu.js';
@@ -5,21 +6,23 @@ import { Button } from './styles.js';
 import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import '@elliemae/ds-app-picker';
+import '@elliemae/ds-utilities';
 import '@elliemae/ds-icons';
 import 'styled-components';
-import '@elliemae/ds-popover';
+import '@elliemae/ds-popperjs';
 import '../../outOfTheBox/PopupMenu/PopupMenuContent.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+import '@elliemae/ds-props-helpers';
 import '../../outOfTheBox/PopupMenu/styles.js';
 import '../../defaultProps.js';
 
-/* eslint-disable no-case-declarations */
 var ToolbarItems = function ToolbarItems() {
   var _useContext = useContext(GlobalHeaderContext),
       toolbar = _useContext.props.toolbar,
       instanceUID = _useContext.instanceUID;
 
   var itemsList = useMemo(function () {
-    return toolbar.map(function (item) {
+    return toolbar === null || toolbar === void 0 ? void 0 : toolbar.map(function (item) {
       var Icon = item.Icon,
           type = item.type,
           onClick = item.onClick,
@@ -41,24 +44,10 @@ var ToolbarItems = function ToolbarItems() {
           });
 
         case 'ds-app-picker':
-          var _ref2 = componentProps,
-              apps = _ref2.apps,
-              customApps = _ref2.customApps,
-              sectionTitle = _ref2.sectionTitle,
-              customSectionTitle = _ref2.customSectionTitle,
-              actionRef = _ref2.actionRef,
-              onKeyDown = _ref2.onKeyDown;
-          return /*#__PURE__*/React.createElement(AppPicker, {
-            onClick: onClick,
+          return /*#__PURE__*/React.createElement(AppPicker, _extends({
             label: label,
-            apps: apps,
-            customApps: customApps,
-            sectionTitle: sectionTitle,
-            customSectionTitle: customSectionTitle,
-            actionRef: actionRef,
-            key: "".concat(instanceUID, "-ds-app-picker-").concat(label),
-            onKeyDown: onKeyDown
-          });
+            key: "".concat(instanceUID, "-ds-app-picker-").concat(label)
+          }, componentProps));
 
         default:
           return /*#__PURE__*/React.createElement(Button, {

package/esm/components/Toolbar/ToolbarItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarItems.js","sources":["../../../../src/components/Toolbar/ToolbarItems.tsx"],"sourcesContent":["/* eslint-disable no-case-declarations */\nimport React, { useContext, useMemo } from 'react';\nimport { AppPicker, PopupMenu } from '../../outOfTheBox';\nimport { Button } from './styles';\nimport type { AppPickerPropsT, PopupPropsT } from '../../index.d';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const ToolbarItems = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    instanceUID,\n  } = useContext(GlobalHeaderContext);\n\n  const itemsList = useMemo(\n    () =>\n      toolbar.map((item) => {\n        const { Icon, type, onClick, componentProps, label } = item;\n\n        switch (type) {\n          case 'ds-popup-menu':\n            const { options, closeOnClick } = componentProps as PopupPropsT;\n            return (\n              <PopupMenu\n                onClick={onClick}\n                title={label}\n                Icon={Icon}\n                options={options}\n                closeOnClick={closeOnClick}\n                key={`${instanceUID}-ds-popup-menu-${label}`}\n              />\n            );\n          case 'ds-app-picker':\n            const { apps, customApps, sectionTitle, customSectionTitle, actionRef, onKeyDown } =\n              componentProps as AppPickerPropsT;\n            return (\n              <AppPicker\n                onClick={onClick}\n                label={label}\n                apps={apps}\n                customApps={customApps}\n                sectionTitle={sectionTitle}\n                customSectionTitle={customSectionTitle}\n                actionRef={actionRef}\n                key={`${instanceUID}-ds-app-picker-${label}`}\n                onKeyDown={onKeyDown}\n              />\n            );\n          default:\n            return (\n              <Button\n                onClick={onClick}\n                key={`${instanceUID}-ds-toolbar-button-${label}`}\n                title={label}\n                data-testid=\"gh-toolbar-item\"\n              >\n                <Icon fill=\"#FFF\" size=\"m\" />\n              </Button>\n            );\n        }\n      }),\n    [toolbar, instanceUID],\n  );\n\n  return <>{itemsList}</>;\n};\n"],"names":["ToolbarItems","useContext","GlobalHeaderContext","toolbar","props","instanceUID","itemsList","useMemo","map","item","Icon","type","onClick","componentProps","label","options","closeOnClick","apps","customApps","sectionTitle","customSectionTitle","actionRef","onKeyDown"],"mappings":";;;;;;;;;;;;;;AAAA;IAOaA,YAAY,GAAG,SAAfA,YAAe,GAAmB;AAC7C,oBAGIC,UAAU,CAACC,mBAAD,CAHd;AAAA,MACWC,OADX,eACEC,KADF,CACWD,OADX;AAAA,MAEEE,WAFF,eAEEA,WAFF;;AAKA,MAAMC,SAAS,GAAGC,OAAO,CACvB;AAAA,WACEJ,OAAO,CAACK,GAAR,CAAY,UAACC,IAAD,EAAU;AACpB,UAAQC,IAAR,GAAuDD,IAAvD,CAAQC,IAAR;AAAA,UAAcC,IAAd,GAAuDF,IAAvD,CAAcE,IAAd;AAAA,UAAoBC,OAApB,GAAuDH,IAAvD,CAAoBG,OAApB;AAAA,UAA6BC,cAA7B,GAAuDJ,IAAvD,CAA6BI,cAA7B;AAAA,UAA6CC,KAA7C,GAAuDL,IAAvD,CAA6CK,KAA7C;;AAEA,cAAQH,IAAR;AACE,aAAK,eAAL;AACE,qBAAkCE,cAAlC;AAAA,cAAQE,OAAR,QAAQA,OAAR;AAAA,cAAiBC,YAAjB,QAAiBA,YAAjB;AACA,8BACE,oBAAC,SAAD;AACE,YAAA,OAAO,EAAEJ,OADX;AAEE,YAAA,KAAK,EAAEE,KAFT;AAGE,YAAA,IAAI,EAAEJ,IAHR;AAIE,YAAA,OAAO,EAAEK,OAJX;AAKE,YAAA,YAAY,EAAEC,YALhB;AAME,YAAA,GAAG,YAAKX,WAAL,4BAAkCS,KAAlC;AANL,YADF;;AAUF,aAAK,eAAL;AACE,sBACED,cADF;AAAA,cAAQI,IAAR,SAAQA,IAAR;AAAA,cAAcC,UAAd,SAAcA,UAAd;AAAA,cAA0BC,YAA1B,SAA0BA,YAA1B;AAAA,cAAwCC,kBAAxC,SAAwCA,kBAAxC;AAAA,cAA4DC,SAA5D,SAA4DA,SAA5D;AAAA,cAAuEC,SAAvE,SAAuEA,SAAvE;AAEA,8BACE,oBAAC,SAAD;AACE,YAAA,OAAO,EAAEV,OADX;AAEE,YAAA,KAAK,EAAEE,KAFT;AAGE,YAAA,IAAI,EAAEG,IAHR;AAIE,YAAA,UAAU,EAAEC,UAJd;AAKE,YAAA,YAAY,EAAEC,YALhB;AAME,YAAA,kBAAkB,EAAEC,kBANtB;AAOE,YAAA,SAAS,EAAEC,SAPb;AAQE,YAAA,GAAG,YAAKhB,WAAL,4BAAkCS,KAAlC,CARL;AASE,YAAA,SAAS,EAAEQ;AATb,YADF;;AAaF;AACE,8BACE,oBAAC,MAAD;AACE,YAAA,OAAO,EAAEV,OADX;AAEE,YAAA,GAAG,YAAKP,WAAL,gCAAsCS,KAAtC,CAFL;AAGE,YAAA,KAAK,EAAEA,KAHT;AAIE,2BAAY;AAJd,0BAME,oBAAC,IAAD;AAAM,YAAA,IAAI,EAAC,MAAX;AAAkB,YAAA,IAAI,EAAC;AAAvB,YANF,CADF;AA9BJ;AAyCD,KA5CD,CADF;AAAA,GADuB,EA+CvB,CAACX,OAAD,EAAUE,WAAV,CA/CuB,CAAzB;AAkDA,sBAAO,0CAAGC,SAAH,CAAP;AACD;;;;"}
+{"version":3,"file":"ToolbarItems.js","sources":["../../../../src/components/Toolbar/ToolbarItems.tsx"],"sourcesContent":["/* eslint-disable no-case-declarations */\nimport React, { useContext, useMemo } from 'react';\nimport { AppPicker, PopupMenu } from '../../outOfTheBox';\nimport { Button } from './styles';\nimport type { AppPickerProps, PopupPropsT } from '../../index.d';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const ToolbarItems = (): JSX.Element => {\n  const {\n    props: { toolbar },\n    instanceUID,\n  } = useContext(GlobalHeaderContext);\n\n  const itemsList = useMemo(\n    () =>\n      toolbar?.map((item) => {\n        const { Icon, type, onClick, componentProps, label } = item;\n\n        switch (type) {\n          case 'ds-popup-menu':\n            const { options, closeOnClick } = componentProps as PopupPropsT;\n            return (\n              <PopupMenu\n                onClick={onClick}\n                title={label}\n                Icon={Icon}\n                options={options}\n                closeOnClick={closeOnClick}\n                key={`${instanceUID}-ds-popup-menu-${label}`}\n              />\n            );\n          case 'ds-app-picker':\n            return (\n              <AppPicker\n                label={label}\n                key={`${instanceUID}-ds-app-picker-${label}`}\n                {...(componentProps as AppPickerProps)}\n              />\n            );\n          default:\n            return (\n              <Button\n                onClick={onClick}\n                key={`${instanceUID}-ds-toolbar-button-${label}`}\n                title={label}\n                data-testid=\"gh-toolbar-item\"\n              >\n                <Icon fill=\"#FFF\" size=\"m\" />\n              </Button>\n            );\n        }\n      }),\n    [toolbar, instanceUID],\n  );\n\n  return <>{itemsList}</>;\n};\n"],"names":["ToolbarItems","useContext","GlobalHeaderContext","toolbar","props","instanceUID","itemsList","useMemo","map","item","Icon","type","onClick","componentProps","label","options","closeOnClick"],"mappings":";;;;;;;;;;;;;;;;;;IAOaA,YAAY,GAAG,SAAfA,YAAe,GAAmB;AAC7C,oBAGIC,UAAU,CAACC,mBAAD,CAHd;AAAA,MACWC,OADX,eACEC,KADF,CACWD,OADX;AAAA,MAEEE,WAFF,eAEEA,WAFF;;AAKA,MAAMC,SAAS,GAAGC,OAAO,CACvB;AAAA,WACEJ,OADF,aACEA,OADF,uBACEA,OAAO,CAAEK,GAAT,CAAa,UAACC,IAAD,EAAU;AACrB,UAAQC,IAAR,GAAuDD,IAAvD,CAAQC,IAAR;AAAA,UAAcC,IAAd,GAAuDF,IAAvD,CAAcE,IAAd;AAAA,UAAoBC,OAApB,GAAuDH,IAAvD,CAAoBG,OAApB;AAAA,UAA6BC,cAA7B,GAAuDJ,IAAvD,CAA6BI,cAA7B;AAAA,UAA6CC,KAA7C,GAAuDL,IAAvD,CAA6CK,KAA7C;;AAEA,cAAQH,IAAR;AACE,aAAK,eAAL;AACE,qBAAkCE,cAAlC;AAAA,cAAQE,OAAR,QAAQA,OAAR;AAAA,cAAiBC,YAAjB,QAAiBA,YAAjB;AACA,8BACE,oBAAC,SAAD;AACE,YAAA,OAAO,EAAEJ,OADX;AAEE,YAAA,KAAK,EAAEE,KAFT;AAGE,YAAA,IAAI,EAAEJ,IAHR;AAIE,YAAA,OAAO,EAAEK,OAJX;AAKE,YAAA,YAAY,EAAEC,YALhB;AAME,YAAA,GAAG,YAAKX,WAAL,4BAAkCS,KAAlC;AANL,YADF;;AAUF,aAAK,eAAL;AACE,8BACE,oBAAC,SAAD;AACE,YAAA,KAAK,EAAEA,KADT;AAEE,YAAA,GAAG,YAAKT,WAAL,4BAAkCS,KAAlC;AAFL,aAGOD,cAHP,EADF;;AAOF;AACE,8BACE,oBAAC,MAAD;AACE,YAAA,OAAO,EAAED,OADX;AAEE,YAAA,GAAG,YAAKP,WAAL,gCAAsCS,KAAtC,CAFL;AAGE,YAAA,KAAK,EAAEA,KAHT;AAIE,2BAAY;AAJd,0BAME,oBAAC,IAAD;AAAM,YAAA,IAAI,EAAC,MAAX;AAAkB,YAAA,IAAI,EAAC;AAAvB,YANF,CADF;AAtBJ;AAiCD,KApCD,CADF;AAAA,GADuB,EAuCvB,CAACX,OAAD,EAAUE,WAAV,CAvCuB,CAAzB;AA0CA,sBAAO,0CAAGC,SAAH,CAAP;AACD;;;;"}

package/esm/config/useGlobalHeader.js

@@ -16,14 +16,14 @@ var useGlobalHeader = function useGlobalHeader(props) {
     return uid(5);
   }, []);
   var globalHeaderToolbarGrid = useMemo(function () {
-    return props.toolbar.map(function () {
-      return '1fr';
-    });
+    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 = useMemo(function () {
-    return ['auto'].concat(_toConsumableArray(props.breadcrumb.map(function () {
-      return 'auto';
-    })), ['1fr']);
+    var _props$breadcrumb$len, _props$breadcrumb;
+
+    return ['auto'].concat(_toConsumableArray(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 = useGetPropsWithDefaults(props);
   var ctx = React.useMemo(function () {

package/esm/config/useGlobalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGlobalHeader.js","sources":["../../../src/config/useGlobalHeader.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { ContextT, GlobalHeaderPropsT } from '../index.d';\nimport { useGetPropsWithDefaults } from './useGetPropsWithDefaults';\n\nexport const useGlobalHeader = (props: GlobalHeaderPropsT): ContextT => {\n  const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n  const instanceUID = useMemo(() => uid(5), []);\n\n  const globalHeaderToolbarGrid = useMemo(() => props.toolbar.map(() => '1fr'), [props.toolbar]);\n  const globalHeaderBreadcrumbGrid = useMemo(\n    () => ['auto', ...props.breadcrumb.map(() => 'auto'), '1fr'],\n    [props.breadcrumb],\n  );\n\n  const propsWithDefaults = useGetPropsWithDefaults(props);\n\n  const ctx = React.useMemo(\n    () => ({\n      props: propsWithDefaults,\n      showIconOnly,\n      setShowIconOnly,\n      instanceUID,\n      globalHeaderToolbarGrid,\n      globalHeaderBreadcrumbGrid,\n    }),\n    [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid, globalHeaderBreadcrumbGrid],\n  );\n\n  return ctx;\n};\n"],"names":["useGlobalHeader","props","useState","showIconOnly","setShowIconOnly","instanceUID","useMemo","uid","globalHeaderToolbarGrid","toolbar","map","globalHeaderBreadcrumbGrid","breadcrumb","propsWithDefaults","useGetPropsWithDefaults","ctx","React"],"mappings":";;;;;;;;IAKaA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAyC;AACtE,kBAAwCC,QAAQ,CAAU,KAAV,CAAhD;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEA,MAAMC,WAAW,GAAGC,OAAO,CAAC;AAAA,WAAMC,GAAG,CAAC,CAAD,CAAT;AAAA,GAAD,EAAe,EAAf,CAA3B;AAEA,MAAMC,uBAAuB,GAAGF,OAAO,CAAC;AAAA,WAAML,KAAK,CAACQ,OAAN,CAAcC,GAAd,CAAkB;AAAA,aAAM,KAAN;AAAA,KAAlB,CAAN;AAAA,GAAD,EAAuC,CAACT,KAAK,CAACQ,OAAP,CAAvC,CAAvC;AACA,MAAME,0BAA0B,GAAGL,OAAO,CACxC;AAAA,YAAO,MAAP,4BAAkBL,KAAK,CAACW,UAAN,CAAiBF,GAAjB,CAAqB;AAAA,aAAM,MAAN;AAAA,KAArB,CAAlB,IAAsD,KAAtD;AAAA,GADwC,EAExC,CAACT,KAAK,CAACW,UAAP,CAFwC,CAA1C;AAKA,MAAMC,iBAAiB,GAAGC,uBAAuB,CAACb,KAAD,CAAjD;AAEA,MAAMc,GAAG,GAAGC,KAAK,CAACV,OAAN,CACV;AAAA,WAAO;AACLL,MAAAA,KAAK,EAAEY,iBADF;AAELV,MAAAA,YAAY,EAAZA,YAFK;AAGLC,MAAAA,eAAe,EAAfA,eAHK;AAILC,MAAAA,WAAW,EAAXA,WAJK;AAKLG,MAAAA,uBAAuB,EAAvBA,uBALK;AAMLG,MAAAA,0BAA0B,EAA1BA;AANK,KAAP;AAAA,GADU,EASV,CAACE,iBAAD,EAAoBV,YAApB,EAAkCE,WAAlC,EAA+CG,uBAA/C,EAAwEG,0BAAxE,CATU,CAAZ;AAYA,SAAOI,GAAP;AACD;;;;"}
+{"version":3,"file":"useGlobalHeader.js","sources":["../../../src/config/useGlobalHeader.tsx"],"sourcesContent":["import React, { useState, useMemo } from 'react';\nimport { uid } from 'uid';\nimport type { ContextT, GlobalHeaderPropsT } from '../index.d';\nimport { useGetPropsWithDefaults } from './useGetPropsWithDefaults';\n\nexport const useGlobalHeader = (props: GlobalHeaderPropsT): ContextT => {\n  const [showIconOnly, setShowIconOnly] = useState<boolean>(false);\n\n  const instanceUID = useMemo(() => uid(5), []);\n\n  const globalHeaderToolbarGrid = useMemo(() => new Array(props?.toolbar?.length ?? 0).fill('1fr'), [props.toolbar]);\n  const globalHeaderBreadcrumbGrid = useMemo(\n    () => ['auto', ...new Array(props?.breadcrumb?.length ?? 0).fill('auto'), '1fr'],\n    [props.breadcrumb],\n  );\n\n  const propsWithDefaults = useGetPropsWithDefaults(props);\n\n  const ctx = React.useMemo(\n    () => ({\n      props: propsWithDefaults,\n      showIconOnly,\n      setShowIconOnly,\n      instanceUID,\n      globalHeaderToolbarGrid,\n      globalHeaderBreadcrumbGrid,\n    }),\n    [propsWithDefaults, showIconOnly, instanceUID, globalHeaderToolbarGrid, globalHeaderBreadcrumbGrid],\n  );\n\n  return ctx;\n};\n"],"names":["useGlobalHeader","props","useState","showIconOnly","setShowIconOnly","instanceUID","useMemo","uid","globalHeaderToolbarGrid","Array","toolbar","length","fill","globalHeaderBreadcrumbGrid","breadcrumb","propsWithDefaults","useGetPropsWithDefaults","ctx","React"],"mappings":";;;;;;;;IAKaA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAyC;AACtE,kBAAwCC,QAAQ,CAAU,KAAV,CAAhD;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEA,MAAMC,WAAW,GAAGC,OAAO,CAAC;AAAA,WAAMC,GAAG,CAAC,CAAD,CAAT;AAAA,GAAD,EAAe,EAAf,CAA3B;AAEA,MAAMC,uBAAuB,GAAGF,OAAO,CAAC;AAAA;;AAAA,WAAM,IAAIG,KAAJ,0BAAUR,KAAV,aAAUA,KAAV,yCAAUA,KAAK,CAAES,OAAjB,mDAAU,eAAgBC,MAA1B,yEAAoC,CAApC,EAAuCC,IAAvC,CAA4C,KAA5C,CAAN;AAAA,GAAD,EAA2D,CAACX,KAAK,CAACS,OAAP,CAA3D,CAAvC;AACA,MAAMG,0BAA0B,GAAGP,OAAO,CACxC;AAAA;;AAAA,YAAO,MAAP,4BAAkB,IAAIG,KAAJ,0BAAUR,KAAV,aAAUA,KAAV,4CAAUA,KAAK,CAAEa,UAAjB,sDAAU,kBAAmBH,MAA7B,yEAAuC,CAAvC,EAA0CC,IAA1C,CAA+C,MAA/C,CAAlB,IAA0E,KAA1E;AAAA,GADwC,EAExC,CAACX,KAAK,CAACa,UAAP,CAFwC,CAA1C;AAKA,MAAMC,iBAAiB,GAAGC,uBAAuB,CAACf,KAAD,CAAjD;AAEA,MAAMgB,GAAG,GAAGC,KAAK,CAACZ,OAAN,CACV;AAAA,WAAO;AACLL,MAAAA,KAAK,EAAEc,iBADF;AAELZ,MAAAA,YAAY,EAAZA,YAFK;AAGLC,MAAAA,eAAe,EAAfA,eAHK;AAILC,MAAAA,WAAW,EAAXA,WAJK;AAKLG,MAAAA,uBAAuB,EAAvBA,uBALK;AAMLK,MAAAA,0BAA0B,EAA1BA;AANK,KAAP;AAAA,GADU,EASV,CAACE,iBAAD,EAAoBZ,YAApB,EAAkCE,WAAlC,EAA+CG,uBAA/C,EAAwEK,0BAAxE,CATU,CAAZ;AAYA,SAAOI,GAAP;AACD;;;;"}

package/esm/config/useValidateProps.js

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