@elliemae/ds-global-header 2.0.0-rc.9 → 2.0.2

package/cjs/outOfTheBox/PopupMenu/PopupMenu.js

@@ -2,85 +2,100 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 require('core-js/modules/web.dom-collections.iterator.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 Popover = require('@elliemae/ds-popover');
+var dsPopperjs = require('@elliemae/ds-popperjs');
 var PopupMenuContent = require('./PopupMenuContent.js');
 var styles = require('../../components/Toolbar/styles.js');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 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);
-var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
+const _excluded = ["Icon", "title", "onClick", "id", "componentProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const PopupMenu = _ref => {
   var _PopupMenuContent;
 
   let {
     Icon,
-    options,
-    closeOnClick,
     title,
-    onClick
-  } = _ref;
+    onClick,
+    id,
+    componentProps
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
   const [isOpen, setIsOpen] = React.useState(false);
-  const buttonRef = React.useRef();
+  const [buttonRef, setButtonRef] = React.useState(null);
+  const {
+    onClickOutside = () => null,
+    onKeyPress,
+    popupOnKeyPress,
+    isOpen: userIsOpen,
+    options,
+    closeOnClick
+  } = componentProps;
   const handleKeyPress = React.useCallback(e => {
     if (e.code === 'Enter' || e.code === 'Space') {
       setIsOpen(true);
     }
-  }, []);
+
+    if (onKeyPress) onKeyPress(e);
+  }, [onKeyPress]);
   const handleOnClose = React.useCallback(() => {
-    var _buttonRef$current;
+    if (userIsOpen === undefined) {
+      setIsOpen(false);
+    }
 
-    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, userIsOpen]);
   const handleTriggerOnClick = React.useCallback(e => {
-    setIsOpen(true);
+    if (userIsOpen === undefined) setIsOpen(true);
     onClick(e);
-  }, [onClick]);
+  }, [onClick, userIsOpen]);
   const handleItemClick = React.useCallback(() => {
-    if (closeOnClick) handleOnClose();
-  }, [closeOnClick, handleOnClose]);
-  const handleClickOutside = React.useCallback(() => setIsOpen(false), []);
+    if (closeOnClick && userIsOpen === undefined) handleOnClose();
+  }, [closeOnClick, handleOnClose, userIsOpen]);
   const content = React.useMemo(() => _PopupMenuContent || (_PopupMenuContent = /*#__PURE__*/_jsx__default["default"](PopupMenuContent.PopupMenuContent, {
     options: options,
     onItemClick: handleItemClick,
-    onClose: handleOnClose
-  })), [options, handleItemClick, handleOnClose]);
-  const trigger = React.useMemo(() => _ref2 => {
-    let {
-      ref
-    } = _ref2;
-    return /*#__PURE__*/jsxRuntime.jsx(styles.Button, {
-      onClick: handleTriggerOnClick,
-      onKeyPress: handleKeyPress,
-      title: title,
-      ref: buttonRef,
-      "data-testid": "gh-toolbar-item",
-      children: /*#__PURE__*/_jsx__default["default"](Icon, {
-        innerRef: ref,
-        fill: "#FFF",
-        size: "m"
-      })
-    });
-  }, [Icon, handleKeyPress, handleTriggerOnClick, title]);
-  return React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Popover__default["default"], {
-    isOpen: isOpen,
-    content: content,
-    onClickOutside: handleClickOutside,
-    placement: "bottom",
-    interactionType: "click",
-    showArrow: true,
-    style: {
-      padding: '0',
-      width: 'fit-content'
-    },
-    renderTrigger: trigger
-  }), [content, handleClickOutside, isOpen, trigger]);
+    onClose: handleOnClose,
+    popupOnKeyPress: popupOnKeyPress
+  })), [options, handleItemClick, handleOnClose, popupOnKeyPress]);
+  return /*#__PURE__*/_jsx__default["default"]("div", {}, void 0, /*#__PURE__*/jsxRuntime.jsx(styles.Button, _objectSpread(_objectSpread({
+    onClick: handleTriggerOnClick,
+    onKeyPress: handleKeyPress,
+    title: title,
+    ref: setButtonRef,
+    "data-testid": "gh-toolbar-item",
+    id: id
+  }, dsPropsHelpers.getDataProps(otherProps)), {}, {
+    children: Icon && /*#__PURE__*/_jsx__default["default"](Icon, {
+      fill: "#FFF",
+      size: "m"
+    })
+  })), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
+    referenceElement: buttonRef,
+    showPopover: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
+    closeContextMenu: handleOnClose,
+    onClickOutside: onClickOutside
+  }, void 0, content));
 };
 
 exports.PopupMenu = PopupMenu;

package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js

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

package/cjs/outOfTheBox/PopupMenu/styles.js

@@ -10,7 +10,7 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const List = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-snqcgs-0"
-})(["padding:5px 0px;"]);
+})(["padding:5px 0px;background:white;"]);
 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:", ";}"], _ref => {

package/cjs/outOfTheBox/SearchToggle/SearchToggle.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.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 dsIcons = require('@elliemae/ds-icons');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var dsIcon = require('@elliemae/ds-icon');
+var dsForm = require('@elliemae/ds-form');
+var styles = require('./styles.js');
+var styles$1 = 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 _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["id", "componentProps"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const SearchToggle = _ref => {
+  let {
+    id,
+    componentProps
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const {
+    onNext,
+    onPrevious,
+    currentResultIndex,
+    totalResults,
+    placeholder,
+    value,
+    onChange,
+    onBlur,
+    onClear,
+    isOpen: userIsOpen,
+    onKeyDown,
+    onClick
+  } = componentProps;
+  const handleOnClick = React.useCallback(e => {
+    if (userIsOpen === undefined) setIsOpen(true);
+    if (onClick) onClick(e);
+  }, [onClick, userIsOpen]);
+  const handleOnKeyDown = React.useCallback(e => {
+    if (userIsOpen === undefined) {
+      if (e.code === 'Escape') {
+        setIsOpen(false);
+        setTimeout(() => {
+          var _triggerRef$current;
+
+          return (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
+        });
+      }
+    }
+
+    if (onKeyDown) onKeyDown(e);
+  }, [onKeyDown, userIsOpen]);
+  const handleOnBlur = React.useCallback(() => {
+    setTimeout(() => {
+      var _containerRef$current;
+
+      const contains = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.contains(document.activeElement);
+      if (value === '' && !contains) setIsOpen(false);
+    });
+  }, [value]);
+  return userIsOpen || isOpen ? /*#__PURE__*/jsxRuntime.jsx(styles.StyledNavSearchBoxContainer, {
+    onKeyDown: handleOnKeyDown,
+    ref: containerRef,
+    onBlur: handleOnBlur,
+    children: /*#__PURE__*/_jsx__default["default"](dsForm.DSNavSearchBox, {
+      onNext: onNext,
+      onPrevious: onPrevious,
+      currentResultIndex: currentResultIndex,
+      totalResults: totalResults,
+      onClear: onClear,
+      placeholder: placeholder,
+      onChange: onChange,
+      value: value,
+      onBlur: onBlur,
+      innerRef: inputRef,
+      autoFocus: true
+    })
+  }) : /*#__PURE__*/jsxRuntime.jsx(styles$1.Button, _objectSpread(_objectSpread({
+    onClick: handleOnClick,
+    ref: triggerRef,
+    id: id
+  }, dsPropsHelpers.getDataProps(otherProps)), {}, {
+    children: /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+      color: dsIcon.DSIconColors.WHITE
+    })
+  }));
+};
+
+exports.SearchToggle = SearchToggle;

package/cjs/outOfTheBox/SearchToggle/styles.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledNavSearchBoxContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1dlcqwh-0"
+})(["background:white;position:relative;min-width:260px;& .em-ds-button{margin-right:2px;height:24px;width:24px;}& .em-ds-input{border:none;outline:none;box-shadow:none;}& .em-ds-input:focus{border:none;box-shadow:none;}& .em-ds-input.em-ds-input--clearable:hover{border:none;outline:none;box-shadow:none;}& .em-ds-input-addon-wrapper{box-shadow:none;}& .em-ds-input-addon-wrapper:hover{outline:none;}& .em-ds-input-addon-wrapper__addon:hover{outline:none;}& .em-ds-input:not(.floating-label-input-controller):hover:active{border:none;outline:none;box-shadow:none;}"]);
+
+exports.StyledNavSearchBoxContainer = StyledNavSearchBoxContainer;

package/cjs/outOfTheBox/index.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var AppPicker = require('./AppPicker/AppPicker.js');
 var PopupMenu = require('./PopupMenu/PopupMenu.js');
+var SearchToggle = require('./SearchToggle/SearchToggle.js');
 
 
 
 exports.AppPicker = AppPicker.AppPicker;
 exports.PopupMenu = PopupMenu.PopupMenu;
+exports.SearchToggle = SearchToggle.SearchToggle;

package/cjs/propTypes.js

@@ -12,7 +12,7 @@ const breadcrumbItem = 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'),
+  type: reactDesc.PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).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')

package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -1,6 +1,13 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useContext, useRef, useEffect } from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { Pipe } from './styles.js';
@@ -8,6 +15,11 @@ import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
 import { PureBreadcrumb } from './PureBreadcrumb.js';
 import { jsx } from 'react/jsx-runtime';
 
+const _excluded = ["label"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const GlobalHeaderBreadcrumb = () => {
   const {
     props: {
@@ -18,14 +30,14 @@ const GlobalHeaderBreadcrumb = () => {
     setShowIconOnly,
     globalHeaderBreadcrumbGrid
   } = useContext(GlobalHeaderContext);
-  const breakpoint = useRef();
-  const flexRegion = useRef();
+  const breakpoint = useRef(null);
+  const flexRegion = useRef(null);
   useEffect(() => {
     const evaluateShowIconOnly = () => {
-      if ((flexRegion === null || flexRegion === void 0 ? void 0 : flexRegion.current.offsetWidth) <= 0 && !breakpoint.current) {
+      if (flexRegion && flexRegion.current && (flexRegion === null || flexRegion === void 0 ? void 0 : flexRegion.current.offsetWidth) <= 0 && !breakpoint.current) {
         setShowIconOnly(true);
         breakpoint.current = window.innerWidth;
-      } else if (window.innerWidth >= breakpoint.current) {
+      } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {
         setShowIconOnly(false);
         breakpoint.current = null;
       }
@@ -38,26 +50,22 @@ const GlobalHeaderBreadcrumb = () => {
   return /*#__PURE__*/_jsx(Grid, {
     height: "100%",
     alignItems: "center",
-    justifyContent: "left",
-    role: "navigation",
+    justifyContent: "flex-start",
     "aria-label": "breadcrumbs",
-    cols: globalHeaderBreadcrumbGrid
+    cols: globalHeaderBreadcrumbGrid,
+    role: "navigation"
   }, void 0, /*#__PURE__*/_jsx(Pipe, {
     showIconOnly: showIconOnly
-  }), breadcrumb.map(item => {
+  }), breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.map(item => {
     const {
-      label,
-      hasNext,
-      isSelected,
-      onClick
-    } = item;
-    return /*#__PURE__*/_jsx(PureBreadcrumb, {
+      label
+    } = item,
+          rest = _objectWithoutProperties(item, _excluded);
+
+    return /*#__PURE__*/jsx(PureBreadcrumb, _objectSpread({
       label: label,
-      hasNext: hasNext,
-      isSelected: isSelected,
-      onClick: onClick,
       length: breadcrumb.length
-    }, "".concat(instanceUID, "-breadcrumb-item-").concat(label));
+    }, rest), "".concat(instanceUID, "-breadcrumb-item-").concat(label));
   }), /*#__PURE__*/jsx("div", {
     id: "global-header-flex-region",
     ref: flexRegion

package/esm/components/Breadcrumb/PureBreadcrumb.js

@@ -1,25 +1,46 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import React from 'react';
 import { ChevronSmallRight } from '@elliemae/ds-icons';
+import { getDataProps } from '@elliemae/ds-props-helpers';
 import { BreadcrumbItem, LabelButton, Label } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
 
 var _ChevronSmallRight;
+
+const _excluded = ["onClick", "isSelected", "length", "label", "hasNext", "id"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 const PureBreadcrumb = /*#__PURE__*/React.memo(_ref => {
   let {
     onClick,
     isSelected,
     length,
     label,
-    hasNext
-  } = _ref;
-  return /*#__PURE__*/_jsx(BreadcrumbItem, {}, void 0, /*#__PURE__*/_jsx(LabelButton, {
+    hasNext,
+    id
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_jsx(BreadcrumbItem, {}, void 0, /*#__PURE__*/jsx(LabelButton, _objectSpread(_objectSpread({
     onClick: onClick,
     "aria-selected": isSelected,
-    "data-testid": "gh-breadcrumb-btn"
-  }, void 0, /*#__PURE__*/_jsx(Label, {
-    isSelected: isSelected,
-    isOnlyItem: length === 1
-  }, void 0, label)), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx(ChevronSmallRight, {
+    "data-testid": "gh-breadcrumb-btn",
+    id: id
+  }, getDataProps(rest)), {}, {
+    children: /*#__PURE__*/_jsx(Label, {
+      isSelected: !!isSelected,
+      isOnlyItem: length === 1
+    }, void 0, label)
+  })), hasNext && (_ChevronSmallRight || (_ChevronSmallRight = /*#__PURE__*/_jsx(ChevronSmallRight, {
     size: "m",
     fill: "#FFF"
   }))));

package/esm/components/Breadcrumb/styles.js

@@ -13,40 +13,35 @@ const BreadcrumbItem = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;align-items:center;height:100%;"]);
 const LabelButton = /*#__PURE__*/styled.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;}}"], _ref2 => {
+})(["width:fit-content;height:100%;margin:0;padding:0;border:1px solid transparent;background-color:transparent;outline:none;cursor:pointer;position:relative;&:focus{: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.p.withConfig({
   componentId: "sc-1n5l527-3"
-})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], _ref4 => {
+})(["color:", ";", ";font-size:16px;text-transform:uppercase;border-bottom:", ";margin:3px 5px 0 5px;:hover{", ";}"], _ref3 => {
   let {
     theme
-  } = _ref4;
+  } = _ref3;
   return theme.colors.neutral['000'];
-}, _ref5 => {
+}, _ref4 => {
   let {
     theme,
     isSelected
-  } = _ref5;
+  } = _ref4;
   return "-webkit-text-stroke: 0.4px  ".concat(isSelected ? theme.colors.neutral['000'] : 'transparent');
-}, _ref6 => {
+}, _ref5 => {
   let {
     isSelected,
     isOnlyItem
-  } = _ref6;
+  } = _ref5;
   return "2px solid ".concat(isSelected && !isOnlyItem ? '#FFF' : 'transparent');
-}, _ref7 => {
+}, _ref6 => {
   let {
     theme
-  } = _ref7;
+  } = _ref6;
   return "-webkit-text-stroke: 0.4px ".concat(theme.colors.neutral['000']);
 });