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

package/cjs/outOfTheBox/PopupMenu/PopupMenu.js

@@ -2,95 +2,66 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-var Popover = require('@elliemae/ds-popover');
-var outOfTheBox_PopupMenu_PopupMenuContent = require('./PopupMenuContent.js');
-var components_Toolbar_styles = require('../../components/Toolbar/styles.js');
-require('./styles.js');
-require('styled-components');
-require('../../GlobalHeaderContext.js');
-require('../../defaultProps.js');
+var dsPopperjs = require('@elliemae/ds-popperjs');
+var PopupMenuContent = require('./PopupMenuContent.js');
+var styles = require('../../components/Toolbar/styles.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-var PopupMenu = function PopupMenu(_ref) {
-  var Icon = _ref.Icon,
-      options = _ref.options,
-      closeOnClick = _ref.closeOnClick,
-      title = _ref.title,
-      onClick = _ref.onClick;
+const PopupMenu = _ref => {
+  var _PopupMenuContent;
 
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
-  var buttonRef = React.useRef();
-  var handleKeyPress = React.useCallback(function (e) {
+  let {
+    Icon,
+    options,
+    closeOnClick,
+    title,
+    onClick
+  } = _ref;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [buttonRef, setButtonRef] = React.useState(null);
+  const handleKeyPress = React.useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
   }, []);
-  var handleOnClose = React.useCallback(function () {
-    var _buttonRef$current;
-
+  const handleOnClose = React.useCallback(() => {
     setIsOpen(false);
-    (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-  }, []);
-  var handleTriggerOnClick = React.useCallback(function (e) {
+    buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
+  }, [buttonRef]);
+  const handleTriggerOnClick = React.useCallback(e => {
     setIsOpen(true);
     onClick(e);
   }, [onClick]);
-  var handleItemClick = React.useCallback(function () {
+  const handleItemClick = React.useCallback(() => {
     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,
-      onItemClick: handleItemClick,
-      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]);
+  const content = React.useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx__default["default"](PopupMenuContent.PopupMenuContent, {
+    options: options,
+    onItemClick: handleItemClick,
+    onClose: handleOnClose
+  })), [options, handleItemClick, handleOnClose]);
+  return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
+    onClick: handleTriggerOnClick,
+    onKeyPress: handleKeyPress,
+    title: title,
+    ref: setButtonRef,
+    "data-testid": "gh-toolbar-item",
+    children: Icon && /*#__PURE__*/_jsx__default["default"](Icon, {
+      fill: "#FFF",
+      size: "m"
+    })
+  }), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
+    referenceElement: buttonRef,
+    showPopover: isOpen,
+    closeContextMenu: handleOnClose
+  }, void 0, content));
 };
 
 exports.PopupMenu = PopupMenu;
-//# sourceMappingURL=PopupMenu.js.map

package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -2,73 +2,90 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
-var outOfTheBox_PopupMenu_styles = require('./styles.js');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var styles = require('./styles.js');
 var GlobalHeaderContext = require('../../GlobalHeaderContext.js');
-require('styled-components');
-require('../../defaultProps.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var PopupMenuContent = /*#__PURE__*/React__default['default'].memo(function (_ref) {
-  var options = _ref.options,
-      onItemClick = _ref.onItemClick,
-      onClose = _ref.onClose;
+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; }
 
-  var _useContext = React.useContext(GlobalHeaderContext.GlobalHeaderContext),
-      instanceUID = _useContext.instanceUID;
-
-  var menuRef = React.useRef();
-  React.useEffect(function () {
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    options,
+    onItemClick,
+    onClose
+  } = _ref;
+  const {
+    instanceUID
+  } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
+  const menuRef = React.useRef(null);
+  React.useEffect(() => {
     var _menuRef$current, _menuRef$current$firs;
 
     (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : (_menuRef$current$firs = _menuRef$current.firstChild) === null || _menuRef$current$firs === void 0 ? void 0 : _menuRef$current$firs.focus();
   }, []);
-  var content = React.useMemo(function () {
-    return options.map(function (option) {
-      var type = option.type,
-          icon = option.icon,
-          label = option.label,
-          onClick = option.onClick,
-          Content = option.Content;
+  const content = React.useMemo(() => options.map(option => {
+    const {
+      type,
+      Icon,
+      label = '',
+      onClick,
+      Content
+    } = option;
+
+    const ariaAndDataProps = _objectSpread(_objectSpread({}, dsPropsHelpers.getAriaProps(option)), dsPropsHelpers.getDataProps(option));
 
-      var handleClick = function handleClick(e) {
-        onItemClick(e);
-        onClick(e);
-      };
+    const handleClick = e => {
+      onItemClick(e);
+      if (onClick) onClick(e);
+    };
 
-      var handleKeyDown = function handleKeyDown(e) {
-        if (e.code === 'Escape') onClose();
-      };
+    const handleKeyDown = e => {
+      if (e.code === 'Escape') onClose();
+    };
 
-      switch (type) {
-        case 'separator':
-          return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.Separator, {
-            key: "".concat(instanceUID, "-separator-").concat(label)
-          });
+    switch (type) {
+      case 'separator':
+        return /*#__PURE__*/jsxRuntime.jsx(styles.Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
 
-        case 'custom':
-          return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.ItemWrapper, {
-            onClick: handleClick,
-            onKeyDown: handleKeyDown,
-            key: "".concat(instanceUID, "-popup-").concat(label)
-          }, /*#__PURE__*/React__default['default'].createElement(Content, null));
+      case 'custom':
+        return /*#__PURE__*/jsxRuntime.jsx(styles.ItemWrapper, _objectSpread(_objectSpread({
+          onClick: handleClick,
+          onKeyDown: handleKeyDown
+        }, ariaAndDataProps), {}, {
+          children: Content && /*#__PURE__*/_jsx__default["default"](Content, {})
+        }), "".concat(instanceUID, "-popup-").concat(label));
 
-        default:
-          return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.ItemWrapper, {
-            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));
-      }
-    });
-  }, [onClose, onItemClick, options, instanceUID]);
-  return /*#__PURE__*/React__default['default'].createElement(outOfTheBox_PopupMenu_styles.List, {
-    ref: menuRef
-  }, content);
+      default:
+        return /*#__PURE__*/jsxRuntime.jsxs(styles.ItemWrapper, _objectSpread(_objectSpread({
+          onClick: handleClick,
+          onKeyDown: handleKeyDown
+        }, ariaAndDataProps), {}, {
+          children: [Icon && /*#__PURE__*/_jsx__default["default"](Icon, {}), styles.Label && /*#__PURE__*/_jsx__default["default"](styles.Label, {}, void 0, label)]
+        }), "".concat(instanceUID, "-popup-").concat(label));
+    }
+  }), [onClose, onItemClick, options, instanceUID]);
+  return /*#__PURE__*/jsxRuntime.jsx(styles.List, {
+    ref: menuRef,
+    children: content
+  });
 });
 
 exports.PopupMenuContent = PopupMenuContent;
-//# sourceMappingURL=PopupMenuContent.js.map

package/cjs/outOfTheBox/PopupMenu/styles.js

@@ -8,19 +8,21 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var List = /*#__PURE__*/styled__default['default'].div.withConfig({
+const List = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-snqcgs-0"
 })(["padding:5px 0px;"]);
-var ItemWrapper = /*#__PURE__*/styled__default['default'].button.withConfig({
+const ItemWrapper = /*#__PURE__*/styled__default["default"].button.withConfig({
   componentId: "sc-snqcgs-1"
-})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"], function (_ref) {
-  var theme = _ref.theme;
+})(["display:flex;align-items:center;justify-content:center;width:100%;padding:0 20px;cursor:pointer;border:1px solid transparent;background-color:transparent;outline:none;:hover,:focus{border:", ";}"], _ref => {
+  let {
+    theme
+  } = _ref;
   return "1px solid ".concat(theme.colors.brand[600]);
 });
-var Label = /*#__PURE__*/styled__default['default'].p.withConfig({
+const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-snqcgs-2"
 })(["width:100%;font-size:14px;margin:10px;"]);
-var Separator = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-snqcgs-3"
 })(["width:100%;border:none;border-bottom:1px solid #ccc;"]);
 
@@ -28,4 +30,3 @@ exports.ItemWrapper = ItemWrapper;
 exports.Label = Label;
 exports.List = List;
 exports.Separator = Separator;
-//# sourceMappingURL=styles.js.map

package/cjs/outOfTheBox/index.js

@@ -2,22 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var outOfTheBox_AppPicker_AppPicker = require('./AppPicker/AppPicker.js');
-var outOfTheBox_PopupMenu_PopupMenu = require('./PopupMenu/PopupMenu.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('react');
-require('@elliemae/ds-app-picker');
-require('@elliemae/ds-icons');
-require('../components/Toolbar/styles.js');
-require('styled-components');
-require('@elliemae/ds-popover');
-require('./PopupMenu/PopupMenuContent.js');
-require('./PopupMenu/styles.js');
-require('../GlobalHeaderContext.js');
-require('../defaultProps.js');
+var AppPicker = require('./AppPicker/AppPicker.js');
+var PopupMenu = require('./PopupMenu/PopupMenu.js');
 
 
 
-exports.AppPicker = outOfTheBox_AppPicker_AppPicker.AppPicker;
-exports.PopupMenu = outOfTheBox_PopupMenu_PopupMenu.PopupMenu;
-//# sourceMappingURL=index.js.map
+exports.AppPicker = AppPicker.AppPicker;
+exports.PopupMenu = PopupMenu.PopupMenu;

package/cjs/propTypes.js

@@ -4,20 +4,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
 
-var breadcrumbItem = reactDesc.PropTypes.shape({
+const breadcrumbItem = reactDesc.PropTypes.shape({
   label: reactDesc.PropTypes.string.description('breadrcrumb item label'),
   hasNext: reactDesc.PropTypes.bool.description('whether the item has a child or not'),
   isSelected: reactDesc.PropTypes.bool.description('whether the item is selected or not'),
   onClick: reactDesc.PropTypes.func.description('Callback executed on click')
 });
-var toolbarItem = reactDesc.PropTypes.shape({
+const toolbarItem = reactDesc.PropTypes.shape({
   label: reactDesc.PropTypes.string.description('title tag description'),
   type: reactDesc.PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu']).description('use to select one of the out-of-the-box types of items'),
   componentProps: reactDesc.PropTypes.object.description('props of out-of-the-box component'),
   Icon: reactDesc.PropTypes.func.description('Icon to display'),
   onClick: reactDesc.PropTypes.func.description('Callback executed on click')
 });
-var globalHeaderProps = {
+const globalHeaderProps = {
   Logo: reactDesc.PropTypes.func.description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.'),
   LogoWithBrand: reactDesc.PropTypes.func.description('Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.'),
   breadcrumb: reactDesc.PropTypes.arrayOf(breadcrumbItem).description('Breadcrumb items to display. max 3 levels'),
@@ -27,4 +27,3 @@ var globalHeaderProps = {
 exports.breadcrumbItem = breadcrumbItem;
 exports.globalHeaderProps = globalHeaderProps;
 exports.toolbarItem = toolbarItem;
-//# sourceMappingURL=propTypes.js.map

package/cjs/styles.js

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

package/esm/GlobalHeader.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import { describe } from 'react-desc';
 import { globalHeaderProps } from './propTypes.js';
 import { GlobalHeaderTitle } from './components/Title/GlobalHeaderTitle.js';
@@ -9,40 +10,19 @@ import { useGlobalHeader } from './config/useGlobalHeader.js';
 import { defaultProps } from './defaultProps.js';
 import { GlobalHeaderContainer } from './GlobalHeaderContainer.js';
 import { useValidateProps } from './config/useValidateProps.js';
-import '@elliemae/ds-grid';
-import './components/Breadcrumb/styles.js';
-import 'styled-components';
-import './components/Breadcrumb/PureBreadcrumb.js';
-import '@elliemae/ds-icons';
-import './components/Toolbar/ToolbarItems.js';
-import './outOfTheBox/AppPicker/AppPicker.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import '@elliemae/ds-app-picker';
-import './components/Toolbar/styles.js';
-import './outOfTheBox/PopupMenu/PopupMenu.js';
-import '@elliemae/ds-popover';
-import './outOfTheBox/PopupMenu/PopupMenuContent.js';
-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';
 
-var GlobalHeader = function GlobalHeader(props) {
+var _GlobalHeaderTitle, _GlobalHeaderBreadcru, _GlobalHeaderToolbar;
+
+const GlobalHeader = props => {
   useValidateProps(props);
-  var ctx = useGlobalHeader(props);
-  return /*#__PURE__*/React.createElement(GlobalHeaderContainer, null, /*#__PURE__*/React.createElement(GlobalHeaderContext.Provider, {
+  const ctx = useGlobalHeader(props);
+  return /*#__PURE__*/_jsx(GlobalHeaderContainer, {}, void 0, /*#__PURE__*/_jsx(GlobalHeaderContext.Provider, {
     value: ctx
-  }, /*#__PURE__*/React.createElement(GlobalHeaderTitle, null), /*#__PURE__*/React.createElement(GlobalHeaderBreadcrumb, null), /*#__PURE__*/React.createElement(GlobalHeaderToolbar, null)));
+  }, void 0, _GlobalHeaderTitle || (_GlobalHeaderTitle = /*#__PURE__*/_jsx(GlobalHeaderTitle, {})), _GlobalHeaderBreadcru || (_GlobalHeaderBreadcru = /*#__PURE__*/_jsx(GlobalHeaderBreadcrumb, {})), _GlobalHeaderToolbar || (_GlobalHeaderToolbar = /*#__PURE__*/_jsx(GlobalHeaderToolbar, {}))));
 };
 
 GlobalHeader.defaultProps = defaultProps;
-GlobalHeader.propTypes = globalHeaderProps;
-var GlobalHeaderWithSchema = describe(GlobalHeader);
+const GlobalHeaderWithSchema = describe(GlobalHeader);
 GlobalHeaderWithSchema.propTypes = globalHeaderProps;
 
 export { GlobalHeader, GlobalHeaderWithSchema };
-//# sourceMappingURL=GlobalHeader.js.map

package/esm/GlobalHeaderContainer.js

@@ -1,16 +1,16 @@
-import React from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import { Wrapper } from './styles.js';
-import 'styled-components';
-import '@elliemae/ds-grid';
 
-var GlobalHeaderContainer = function GlobalHeaderContainer(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("header", {
+const GlobalHeaderContainer = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("header", {
     "data-testid": "ds-global-header"
-  }, /*#__PURE__*/React.createElement(Wrapper, {
+  }, void 0, /*#__PURE__*/_jsx(Wrapper, {
     cols: ['auto', '1fr', 'auto']
-  }, children));
+  }, void 0, children));
 };
 
 export { GlobalHeaderContainer };
-//# sourceMappingURL=GlobalHeaderContainer.js.map

package/esm/GlobalHeaderContext.js

@@ -1,11 +1,9 @@
 import { createContext } from 'react';
 import { defaultProps } from './defaultProps.js';
 
-var noop = function noop() {
-  return null;
-};
+const noop = () => null;
 
-var defaultContext = {
+const defaultContext = {
   props: defaultProps,
   showIconOnly: false,
   setShowIconOnly: noop,
@@ -13,7 +11,6 @@ var defaultContext = {
   globalHeaderToolbarGrid: [],
   globalHeaderBreadcrumbGrid: []
 };
-var GlobalHeaderContext = /*#__PURE__*/createContext(defaultContext);
+const GlobalHeaderContext = /*#__PURE__*/createContext(defaultContext);
 
 export { GlobalHeaderContext };
-//# sourceMappingURL=GlobalHeaderContext.js.map

package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -1,28 +1,31 @@
-import React, { useContext, useRef, useEffect } from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useContext, useRef, useEffect } from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { Pipe } from './styles.js';
 import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
 import { PureBreadcrumb } from './PureBreadcrumb.js';
-import 'styled-components';
-import '../../defaultProps.js';
-import '@elliemae/ds-icons';
+import { jsx } from 'react/jsx-runtime';
 
-var GlobalHeaderBreadcrumb = function GlobalHeaderBreadcrumb() {
-  var _useContext = useContext(GlobalHeaderContext),
-      breadcrumb = _useContext.props.breadcrumb,
-      instanceUID = _useContext.instanceUID,
-      showIconOnly = _useContext.showIconOnly,
-      setShowIconOnly = _useContext.setShowIconOnly,
-      globalHeaderBreadcrumbGrid = _useContext.globalHeaderBreadcrumbGrid;
-
-  var breakpoint = useRef();
-  var flexRegion = useRef();
-  useEffect(function () {
-    var evaluateShowIconOnly = function evaluateShowIconOnly() {
-      if ((flexRegion === null || flexRegion === void 0 ? void 0 : flexRegion.current.offsetWidth) <= 0 && !breakpoint.current) {
+const GlobalHeaderBreadcrumb = () => {
+  const {
+    props: {
+      breadcrumb
+    },
+    instanceUID,
+    showIconOnly,
+    setShowIconOnly,
+    globalHeaderBreadcrumbGrid
+  } = useContext(GlobalHeaderContext);
+  const breakpoint = useRef(null);
+  const flexRegion = useRef(null);
+  useEffect(() => {
+    const evaluateShowIconOnly = () => {
+      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;
       }
@@ -30,37 +33,35 @@ var GlobalHeaderBreadcrumb = function GlobalHeaderBreadcrumb() {
 
     evaluateShowIconOnly();
     window.addEventListener('resize', evaluateShowIconOnly);
-    return function () {
-      return window.removeEventListener('resize', evaluateShowIconOnly);
-    };
+    return () => window.removeEventListener('resize', evaluateShowIconOnly);
   }, [breakpoint, flexRegion, setShowIconOnly]);
-  return /*#__PURE__*/React.createElement(Grid, {
+  return /*#__PURE__*/_jsx(Grid, {
     height: "100%",
     alignItems: "center",
-    justifyContent: "left",
-    role: "navigation",
+    justifyContent: "flex-start",
     "aria-label": "breadcrumbs",
-    cols: globalHeaderBreadcrumbGrid
-  }, /*#__PURE__*/React.createElement(Pipe, {
+    cols: globalHeaderBreadcrumbGrid,
+    role: "navigation"
+  }, void 0, /*#__PURE__*/_jsx(Pipe, {
     showIconOnly: showIconOnly
-  }), breadcrumb.map(function (item) {
-    var label = item.label,
-        hasNext = item.hasNext,
-        isSelected = item.isSelected,
-        onClick = item.onClick;
-    return /*#__PURE__*/React.createElement(PureBreadcrumb, {
+  }), breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.map(item => {
+    const {
+      label,
+      hasNext,
+      isSelected,
+      onClick
+    } = item;
+    return /*#__PURE__*/_jsx(PureBreadcrumb, {
       label: label,
       hasNext: hasNext,
       isSelected: isSelected,
       onClick: onClick,
-      length: breadcrumb.length,
-      key: "".concat(instanceUID, "-breadcrumb-item-").concat(label)
-    });
-  }), /*#__PURE__*/React.createElement("div", {
+      length: breadcrumb.length
+    }, "".concat(instanceUID, "-breadcrumb-item-").concat(label));
+  }), /*#__PURE__*/jsx("div", {
     id: "global-header-flex-region",
     ref: flexRegion
   }));
 };
 
 export { GlobalHeaderBreadcrumb };
-//# sourceMappingURL=GlobalHeaderBreadcrumb.js.map