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

package/cjs/GlobalHeader.js

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

package/cjs/GlobalHeaderContainer.js

@@ -10,12 +10,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const GlobalHeaderContainer = ({
-  children
-}) => /*#__PURE__*/_jsx__default['default']("header", {
-  "data-testid": "ds-global-header"
-}, void 0, /*#__PURE__*/_jsx__default['default'](styles.Wrapper, {
-  cols: ['auto', '1fr', 'auto']
-}, void 0, children));
+const GlobalHeaderContainer = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"]("header", {
+    "data-testid": "ds-global-header"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.Wrapper, {
+    cols: ['auto', '1fr', 'auto']
+  }, void 0, children));
+};
 
 exports.GlobalHeaderContainer = GlobalHeaderContainer;

package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var dsGrid = require('@elliemae/ds-grid');
 var styles = require('./styles.js');
@@ -24,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;
       }
@@ -41,29 +43,29 @@ const GlobalHeaderBreadcrumb = () => {
     window.addEventListener('resize', evaluateShowIconOnly);
     return () => window.removeEventListener('resize', evaluateShowIconOnly);
   }, [breakpoint, flexRegion, setShowIconOnly]);
-  return /*#__PURE__*/_jsx__default['default'](dsGrid.Grid, {
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
     height: "100%",
     alignItems: "center",
-    justifyContent: "left",
-    role: "navigation",
+    justifyContent: "flex-start",
     "aria-label": "breadcrumbs",
-    cols: globalHeaderBreadcrumbGrid
-  }, void 0, /*#__PURE__*/_jsx__default['default'](styles.Pipe, {
+    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,
       isSelected,
       onClick
     } = item;
-    return /*#__PURE__*/_jsx__default['default'](PureBreadcrumb.PureBreadcrumb, {
+    return /*#__PURE__*/_jsx__default["default"](PureBreadcrumb.PureBreadcrumb, {
       label: label,
       hasNext: hasNext,
       isSelected: isSelected,
       onClick: onClick,
       length: breadcrumb.length
-    }, `${instanceUID}-breadcrumb-item-${label}`);
+    }, "".concat(instanceUID, "-breadcrumb-item-").concat(label));
   }), /*#__PURE__*/jsxRuntime.jsx("div", {
     id: "global-header-flex-region",
     ref: flexRegion

package/cjs/components/Breadcrumb/PureBreadcrumb.js

@@ -4,32 +4,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var Chevron = require('@elliemae/ds-icons/ChevronSmallRight');
+var dsIcons = require('@elliemae/ds-icons');
 var styles = require('./styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Chevron__default = /*#__PURE__*/_interopDefaultLegacy(Chevron);
 
-var _Chevron;
-const PureBreadcrumb = /*#__PURE__*/React__default['default'].memo(({
-  onClick,
-  isSelected,
-  length,
-  label,
-  hasNext
-}) => /*#__PURE__*/_jsx__default['default'](styles.BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx__default['default'](styles.LabelButton, {
-  onClick: onClick,
-  "aria-selected": isSelected,
-  "data-testid": "gh-breadcrumb-btn"
-}, void 0, /*#__PURE__*/_jsx__default['default'](styles.Label, {
-  isSelected: isSelected,
-  isOnlyItem: length === 1
-}, void 0, label)), hasNext && (_Chevron || (_Chevron = /*#__PURE__*/_jsx__default['default'](Chevron__default['default'], {
-  size: "m",
-  fill: "#FFF"
-})))));
+var _ChevronSmallRight;
+const PureBreadcrumb = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    onClick,
+    isSelected,
+    length,
+    label,
+    hasNext
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](styles.BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.LabelButton, {
+    onClick: onClick,
+    "aria-selected": isSelected,
+    "data-testid": "gh-breadcrumb-btn"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styles.Label, {
+    isSelected: !!isSelected,
+    isOnlyItem: length === 1
+  }, void 0, label)), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {
+    size: "m",
+    fill: "#FFF"
+  }))));
+});
 
 exports.PureBreadcrumb = PureBreadcrumb;

package/cjs/components/Breadcrumb/styles.js

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

package/cjs/components/Title/GlobalHeaderTitle.js

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

package/cjs/components/Toolbar/GlobalHeaderToolbar.js

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

package/cjs/components/Toolbar/ToolbarItems.js

@@ -2,7 +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');
@@ -12,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: {
@@ -21,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 {
@@ -38,36 +50,25 @@ const ToolbarItems = () => {
           options,
           closeOnClick
         } = componentProps;
-        return /*#__PURE__*/_jsx__default['default'](PopupMenu.PopupMenu, {
+        return /*#__PURE__*/_jsx__default["default"](PopupMenu.PopupMenu, {
           onClick: onClick,
           title: label,
           Icon: Icon,
           options: options,
           closeOnClick: closeOnClick
-        }, `${instanceUID}-ds-popup-menu-${label}`);
+        }, "".concat(instanceUID, "-ds-popup-menu-").concat(label));
 
       case 'ds-app-picker':
-        const {
-          apps,
-          customApps,
-          sectionTitle,
-          customSectionTitle
-        } = componentProps;
-        return /*#__PURE__*/_jsx__default['default'](AppPicker.AppPicker, {
-          onClick: onClick,
-          label: label,
-          apps: apps,
-          customApps: customApps,
-          sectionTitle: sectionTitle,
-          customSectionTitle: customSectionTitle
-        }, `${instanceUID}-ds-app-picker-${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, {
+        return /*#__PURE__*/_jsx__default["default"](styles.Button, {
           onClick: onClick,
           title: label,
           "data-testid": "gh-toolbar-item"
-        }, `${instanceUID}-ds-toolbar-button-${label}`, _Icon || (_Icon = /*#__PURE__*/_jsx__default['default'](Icon, {
+        }, "".concat(instanceUID, "-ds-toolbar-button-").concat(label), _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {
           fill: "#FFF",
           size: "m"
         })));

package/cjs/components/Toolbar/styles.js

@@ -8,14 +8,23 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const Button = /*#__PURE__*/styled__default['default'].button.withConfig({
+const Button = /*#__PURE__*/styled__default["default"].button.withConfig({
   componentId: "sc-1gqj0i3-0"
-})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid ", ";border-radius:4px;}:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.brand[700], ({
-  theme
-}) => theme.colors.neutral['000']);
+})(["height:40px;width:40px;border:none;background-color:transparent;cursor:pointer;position:relative;outline:none;&:hover:not(:focus){background-color:", ";outline:none;}&:focus{:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid ", ";border-radius:4px;}:before{content:'';position:absolute;z-index:2;top:2px;left:2px;width:calc(100% - 4px);height:calc(100% - 4px);border:2px solid ", ";border-radius:4px;}}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.brand[700];
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.brand[700];
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colors.neutral['000'];
+});
 
 exports.Button = Button;

package/cjs/config/useGetPropsWithDefaults.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var defaultProps = require('../defaultProps.js');
@@ -12,7 +17,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const useGetPropsWithDefaults = props => {
   const {
     toolbar,

package/cjs/config/useGlobalHeader.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var uid = require('uid');
 var useGetPropsWithDefaults = require('./useGetPropsWithDefaults.js');
@@ -13,10 +14,18 @@ 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(() => ({
+  const ctx = React__default["default"].useMemo(() => ({
     props: propsWithDefaults,
     showIconOnly,
     setShowIconOnly,

package/cjs/config/useValidateProps.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var validateHelpers = require('./validateHelpers.js');
 
 const validatePopupItem = componentProps => {
@@ -63,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);
     }
@@ -80,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/config/validateHelpers.js

@@ -30,42 +30,19 @@ const getVariableType = arg => {
 };
 const isValidToolbarType = string => string === 'ds-app-picker' || string === 'ds-popup-menu';
 const throwBreadcrumbItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a breadcrumb item, please provide a valid type.
-
-  Received: ${invalidProp} (${typeof invalidProp})
-  Expected: (${breadcrumbProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a breadcrumb item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(typeof invalidProp, ")\n  Expected: (").concat(breadcrumbProps[validPropKey], ")\n  "));
 };
 const throwToolbarPopupItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property inside componentProps for a ds-popup-menu 
-    toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property inside componentProps for a ds-popup-menu \n    toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwToolbarAppPickerItemError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property inside componentProps for a ds-app-picker 
-    toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property inside componentProps for a ds-app-picker \n    toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwToolbarItemGenericError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a toolbar item, please provide a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)})
-  Expected: (${toolbarProps[validPropKey]})
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a toolbar item, please provide a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ")\n  Expected: (").concat(toolbarProps[validPropKey], ")\n  "));
 };
 const throwLogoError = (validPropKey, invalidProp) => {
-  throw new Error(`You are trying to pass a not valid "${validPropKey}" property for a global header, 
-    remember to provide both Logo and LogoWithBrand properties with a valid type.
-
-  Received: ${invalidProp} (${getVariableType(invalidProp)}).
-  Expected: (react component).
-  `);
+  throw new Error("You are trying to pass a not valid \"".concat(validPropKey, "\" property for a global header, \n    remember to provide both Logo and LogoWithBrand properties with a valid type.\n\n  Received: ").concat(invalidProp, " (").concat(getVariableType(invalidProp), ").\n  Expected: (react component).\n  "));
 };
 
 exports.breadcrumbProps = breadcrumbProps;

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/index.js

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