@elliemae/ds-global-header 2.4.2-rc.9 → 2.4.2

package/cjs/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -2,16 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var dsGrid = require('@elliemae/ds-grid');
 var styles = require('./styles.js');
@@ -44,7 +42,7 @@ const GlobalHeaderBreadcrumb = () => {
   const flexRegion = React.useRef(null);
   React.useEffect(() => {
     const evaluateShowIconOnly = () => {
-      if (flexRegion && flexRegion.current && (flexRegion === null || flexRegion === void 0 ? void 0 : flexRegion.current.offsetWidth) <= 0 && !breakpoint.current) {
+      if (flexRegion && flexRegion.current && flexRegion?.current.offsetWidth <= 0 && !breakpoint.current) {
         setShowIconOnly(true);
         breakpoint.current = window.innerWidth;
       } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {
@@ -66,7 +64,7 @@ const GlobalHeaderBreadcrumb = () => {
     role: "navigation"
   }, void 0, /*#__PURE__*/_jsx__default["default"](styles.Pipe, {
     showIconOnly: showIconOnly
-  }), breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.map(item => {
+  }), breadcrumb?.map(item => {
     const {
       label
     } = item,
@@ -75,7 +73,7 @@ const GlobalHeaderBreadcrumb = () => {
     return /*#__PURE__*/jsxRuntime.jsx(PureBreadcrumb.PureBreadcrumb, _objectSpread({
       label: label,
       length: breadcrumb.length
-    }, rest), "".concat(instanceUID, "-breadcrumb-item-").concat(label));
+    }, rest), `${instanceUID}-breadcrumb-item-${label}`);
   }), /*#__PURE__*/jsxRuntime.jsx("div", {
     id: "global-header-flex-region",
     ref: flexRegion

package/cjs/components/Breadcrumb/styles.js

@@ -39,18 +39,18 @@ const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
     theme,
     isSelected
   } = _ref4;
-  return "-webkit-text-stroke: 0.4px  ".concat(isSelected ? theme.colors.neutral['000'] : 'transparent');
+  return `-webkit-text-stroke: 0.4px  ${isSelected ? theme.colors.neutral['000'] : 'transparent'}`;
 }, _ref5 => {
   let {
     isSelected,
     isOnlyItem
   } = _ref5;
-  return "2px solid ".concat(isSelected && !isOnlyItem ? '#FFF' : 'transparent');
+  return `2px solid ${isSelected && !isOnlyItem ? '#FFF' : 'transparent'}`;
 }, _ref6 => {
   let {
     theme
   } = _ref6;
-  return "-webkit-text-stroke: 0.4px ".concat(theme.colors.neutral['000']);
+  return `-webkit-text-stroke: 0.4px ${theme.colors.neutral['000']}`;
 });
 
 exports.BreadcrumbItem = BreadcrumbItem;

package/cjs/components/Toolbar/ToolbarItems.js

@@ -2,16 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-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 _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var AppPicker = require('../../outOfTheBox/AppPicker/AppPicker.js');
 var PopupMenu = require('../../outOfTheBox/PopupMenu/PopupMenu.js');
@@ -39,7 +37,7 @@ const ToolbarItems = () => {
     },
     instanceUID
   } = React.useContext(GlobalHeaderContext.GlobalHeaderContext);
-  const itemsList = React.useMemo(() => toolbar === null || toolbar === void 0 ? void 0 : toolbar.map(item => {
+  const itemsList = React.useMemo(() => toolbar?.map(item => {
     var _Icon;
 
     const {
@@ -64,20 +62,20 @@ const ToolbarItems = () => {
           id: id
         }, otherProps), {}, {
           componentProps: componentProps
-        }), "".concat(instanceUID, "-ds-popup-menu-").concat(label));
+        }), `${instanceUID}-ds-popup-menu-${label}`);
 
       case 'ds-app-picker':
         return /*#__PURE__*/jsxRuntime.jsx(AppPicker.AppPicker, _objectSpread({
           label: label,
           id: id,
           componentProps: componentProps
-        }, otherProps), "".concat(instanceUID, "-ds-app-picker-").concat(label));
+        }, otherProps), `${instanceUID}-ds-app-picker-${label}`);
 
       case 'ds-search-toggle':
         return /*#__PURE__*/jsxRuntime.jsx(SearchToggle.SearchToggle, _objectSpread({
           id: id,
           componentProps: componentProps
-        }, otherProps), "".concat(instanceUID, "-ds-search-toggle-").concat(id));
+        }, otherProps), `${instanceUID}-ds-search-toggle-${id}`);
 
       case 'custom':
         if (CustomComponent) return /*#__PURE__*/_jsx__default["default"](CustomComponent, {
@@ -96,7 +94,7 @@ const ToolbarItems = () => {
             fill: "#FFF",
             size: "m"
           }))
-        }), "".concat(instanceUID, "-ds-toolbar-button-").concat(label));
+        }), `${instanceUID}-ds-toolbar-button-${label}`);
     }
   }), [toolbar, instanceUID]);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {

package/cjs/config/useGlobalHeader.js

@@ -2,7 +2,6 @@
 
 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');
@@ -14,16 +13,8 @@ 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(() => {
-    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('auto');
-  }, [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 globalHeaderToolbarGrid = React.useMemo(() => new Array(props?.toolbar?.length ?? 0).fill('auto'), [props.toolbar]);
+  const globalHeaderBreadcrumbGrid = React.useMemo(() => ['auto', ...new Array(props?.breadcrumb?.length ?? 0).fill('auto'), '1fr'], [props.breadcrumb]);
   const propsWithDefaults = useGetPropsWithDefaults.useGetPropsWithDefaults(props);
   const ctx = React__default["default"].useMemo(() => ({
     props: propsWithDefaults,

package/cjs/config/useValidateProps.js

@@ -2,9 +2,6 @@
 
 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 => {
@@ -51,7 +48,7 @@ const useValidateProps = props => {
     validateHelpers.throwLogoError('LogoWithBrand', LogoWithBrand);
   }
 
-  breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.forEach(breadcrumbItem => {
+  breadcrumb?.forEach(breadcrumbItem => {
     if (breadcrumbItem.label && typeof breadcrumbItem.label !== 'string') {
       validateHelpers.throwBreadcrumbItemError('label', breadcrumbItem.label);
     }
@@ -68,7 +65,7 @@ const useValidateProps = props => {
       validateHelpers.throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);
     }
   });
-  toolbar === null || toolbar === void 0 ? void 0 : toolbar.forEach(toolbarItem => {
+  toolbar?.forEach(toolbarItem => {
     if (toolbarItem.type) {
       if (!validateHelpers.isValidToolbarType(toolbarItem.type)) {
         validateHelpers.throwToolbarItemGenericError('type', toolbarItem.type);

package/cjs/config/validateHelpers.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/es.error.cause.js');
+
 const breadcrumbProps = {
   label: 'string',
   onClick: 'function',
@@ -30,19 +32,42 @@ const getVariableType = arg => {
 };
 const isValidToolbarType = string => string === 'ds-app-picker' || string === 'ds-popup-menu' || string === 'ds-search-toggle' || string === 'custom';
 const throwBreadcrumbItemError = (validPropKey, invalidProp) => {
-  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  "));
+  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]})
+  `);
 };
 const throwToolbarPopupItemError = (validPropKey, invalidProp) => {
-  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  "));
+  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]})
+  `);
 };
 const throwToolbarAppPickerItemError = (validPropKey, invalidProp) => {
-  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  "));
+  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]})
+  `);
 };
 const throwToolbarItemGenericError = (validPropKey, invalidProp) => {
-  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  "));
+  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]})
+  `);
 };
 const throwLogoError = (validPropKey, invalidProp) => {
-  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  "));
+  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).
+  `);
 };
 
 exports.breadcrumbProps = breadcrumbProps;

package/cjs/outOfTheBox/AppPicker/AppPicker.js

@@ -2,15 +2,14 @@
 
 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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var dsAppPicker = require('@elliemae/ds-app-picker');
 var dsUtilities = require('@elliemae/ds-utilities');
@@ -64,10 +63,8 @@ const AppPicker = _ref => {
   }, []);
   const handleAppPickerOnKeyDown = React.useCallback(e => {
     if (e.code === 'Escape') {
-      var _buttonRef$current;
-
       setIsOpen(false);
-      buttonRef === null || buttonRef === void 0 ? void 0 : (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+      buttonRef?.current?.focus();
     }
   }, []);
   const handleOnClickOutside = React.useCallback(() => {
@@ -83,7 +80,7 @@ const AppPicker = _ref => {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: ref,
       children: /*#__PURE__*/jsxRuntime.jsx(styles.Button, _objectSpread(_objectSpread({
-        onClick: triggerOnClick !== null && triggerOnClick !== void 0 ? triggerOnClick : handleOnClick,
+        onClick: triggerOnClick ?? handleOnClick,
         onKeyDown: handleTriggerKeyDown,
         ref: dsUtilities.mergeRefs(buttonRef, triggerRef),
         title: label,
@@ -104,11 +101,11 @@ const AppPicker = _ref => {
     sectionTitle: sectionTitle,
     customSectionTitle: customSectionTitle,
     icon: icon,
-    onKeyDown: userOnKeyDown !== null && userOnKeyDown !== void 0 ? userOnKeyDown : handleAppPickerOnKeyDown,
+    onKeyDown: userOnKeyDown ?? handleAppPickerOnKeyDown,
     actionRef: actionRef,
-    onClickOutside: userOnClickOutside !== null && userOnClickOutside !== void 0 ? userOnClickOutside : handleOnClickOutside,
-    renderTrigger: userRenderTrigger !== null && userRenderTrigger !== void 0 ? userRenderTrigger : renderTrigger,
-    isOpen: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
+    onClickOutside: userOnClickOutside ?? handleOnClickOutside,
+    renderTrigger: userRenderTrigger ?? renderTrigger,
+    isOpen: userIsOpen ?? isOpen,
     onClose: onClose,
     triggerRef: triggerRef
   });

package/cjs/outOfTheBox/PopupMenu/PopupMenu.js

@@ -2,15 +2,14 @@
 
 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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var dsPopperjs = require('@elliemae/ds-popperjs');
 var PopupMenuContent = require('./PopupMenuContent.js');
@@ -63,7 +62,7 @@ const PopupMenu = _ref => {
       setIsOpen(false);
     }
 
-    buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
+    buttonRef?.focus();
   }, [buttonRef, userIsOpen]);
   const handleTriggerOnClick = React.useCallback(e => {
     if (userIsOpen === undefined) setIsOpen(true);
@@ -92,7 +91,7 @@ const PopupMenu = _ref => {
     })
   })), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
     referenceElement: buttonRef,
-    showPopover: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
+    showPopover: userIsOpen ?? isOpen,
     closeContextMenu: handleOnClose,
     onClickOutside: onClickOutside
   }, void 0, content));

package/cjs/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -38,9 +38,7 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
   } = 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();
+    menuRef.current?.firstChild?.focus();
   }, []);
   const content = React.useMemo(() => options.map(option => {
     const {
@@ -66,7 +64,7 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
 
     switch (type) {
       case 'separator':
-        return /*#__PURE__*/jsxRuntime.jsx(styles.Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
+        return /*#__PURE__*/jsxRuntime.jsx(styles.Separator, _objectSpread({}, ariaAndDataProps), `${instanceUID}-separator-${label}`);
 
       case 'custom':
         return /*#__PURE__*/jsxRuntime.jsx(styles.ItemWrapper, _objectSpread(_objectSpread({
@@ -75,7 +73,7 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
           id: id
         }, ariaAndDataProps), {}, {
           children: Content && /*#__PURE__*/_jsx__default["default"](Content, {})
-        }), "".concat(instanceUID, "-popup-").concat(label));
+        }), `${instanceUID}-popup-${label}`);
 
       default:
         return /*#__PURE__*/jsxRuntime.jsxs(styles.ItemWrapper, _objectSpread(_objectSpread({
@@ -84,7 +82,7 @@ const PopupMenuContent = /*#__PURE__*/React__default["default"].memo(_ref => {
           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));
+        }), `${instanceUID}-popup-${label}`);
     }
   }), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
   return /*#__PURE__*/jsxRuntime.jsx(styles.List, {

package/cjs/outOfTheBox/PopupMenu/styles.js

@@ -17,7 +17,7 @@ const ItemWrapper = /*#__PURE__*/styled__default["default"].button.withConfig({
   let {
     theme
   } = _ref;
-  return "1px solid ".concat(theme.colors.brand[600]);
+  return `1px solid ${theme.colors.brand[600]}`;
 });
 const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-snqcgs-2"

package/cjs/outOfTheBox/SearchToggle/SearchToggle.js

@@ -2,15 +2,14 @@
 
 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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var dsIcons = require('@elliemae/ds-icons');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
@@ -64,11 +63,7 @@ const SearchToggle = _ref => {
     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();
-        });
+        setTimeout(() => triggerRef.current?.focus());
       }
     }
 
@@ -76,9 +71,7 @@ const SearchToggle = _ref => {
   }, [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);
+      const contains = containerRef.current?.contains(document.activeElement);
       if (value === '' && !contains) setIsOpen(false);
     });
   }, [value]);

package/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -1,13 +1,11 @@
-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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useRef, useEffect } from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { Pipe } from './styles.js';
@@ -34,7 +32,7 @@ const GlobalHeaderBreadcrumb = () => {
   const flexRegion = useRef(null);
   useEffect(() => {
     const evaluateShowIconOnly = () => {
-      if (flexRegion && flexRegion.current && (flexRegion === null || flexRegion === void 0 ? void 0 : flexRegion.current.offsetWidth) <= 0 && !breakpoint.current) {
+      if (flexRegion && flexRegion.current && flexRegion?.current.offsetWidth <= 0 && !breakpoint.current) {
         setShowIconOnly(true);
         breakpoint.current = window.innerWidth;
       } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {
@@ -56,7 +54,7 @@ const GlobalHeaderBreadcrumb = () => {
     role: "navigation"
   }, void 0, /*#__PURE__*/_jsx(Pipe, {
     showIconOnly: showIconOnly
-  }), breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.map(item => {
+  }), breadcrumb?.map(item => {
     const {
       label
     } = item,
@@ -65,7 +63,7 @@ const GlobalHeaderBreadcrumb = () => {
     return /*#__PURE__*/jsx(PureBreadcrumb, _objectSpread({
       label: label,
       length: breadcrumb.length
-    }, rest), "".concat(instanceUID, "-breadcrumb-item-").concat(label));
+    }, rest), `${instanceUID}-breadcrumb-item-${label}`);
   }), /*#__PURE__*/jsx("div", {
     id: "global-header-flex-region",
     ref: flexRegion

package/esm/components/Breadcrumb/styles.js

@@ -31,18 +31,18 @@ const Label = /*#__PURE__*/styled.p.withConfig({
     theme,
     isSelected
   } = _ref4;
-  return "-webkit-text-stroke: 0.4px  ".concat(isSelected ? theme.colors.neutral['000'] : 'transparent');
+  return `-webkit-text-stroke: 0.4px  ${isSelected ? theme.colors.neutral['000'] : 'transparent'}`;
 }, _ref5 => {
   let {
     isSelected,
     isOnlyItem
   } = _ref5;
-  return "2px solid ".concat(isSelected && !isOnlyItem ? '#FFF' : 'transparent');
+  return `2px solid ${isSelected && !isOnlyItem ? '#FFF' : 'transparent'}`;
 }, _ref6 => {
   let {
     theme
   } = _ref6;
-  return "-webkit-text-stroke: 0.4px ".concat(theme.colors.neutral['000']);
+  return `-webkit-text-stroke: 0.4px ${theme.colors.neutral['000']}`;
 });
 
 export { BreadcrumbItem, Label, LabelButton, Pipe };

package/esm/components/Toolbar/ToolbarItems.js

@@ -1,13 +1,11 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { useContext, useMemo } from 'react';
 import { AppPicker } from '../../outOfTheBox/AppPicker/AppPicker.js';
 import { PopupMenu } from '../../outOfTheBox/PopupMenu/PopupMenu.js';
@@ -29,7 +27,7 @@ const ToolbarItems = () => {
     },
     instanceUID
   } = useContext(GlobalHeaderContext);
-  const itemsList = useMemo(() => toolbar === null || toolbar === void 0 ? void 0 : toolbar.map(item => {
+  const itemsList = useMemo(() => toolbar?.map(item => {
     var _Icon;
 
     const {
@@ -54,20 +52,20 @@ const ToolbarItems = () => {
           id: id
         }, otherProps), {}, {
           componentProps: componentProps
-        }), "".concat(instanceUID, "-ds-popup-menu-").concat(label));
+        }), `${instanceUID}-ds-popup-menu-${label}`);
 
       case 'ds-app-picker':
         return /*#__PURE__*/jsx(AppPicker, _objectSpread({
           label: label,
           id: id,
           componentProps: componentProps
-        }, otherProps), "".concat(instanceUID, "-ds-app-picker-").concat(label));
+        }, otherProps), `${instanceUID}-ds-app-picker-${label}`);
 
       case 'ds-search-toggle':
         return /*#__PURE__*/jsx(SearchToggle, _objectSpread({
           id: id,
           componentProps: componentProps
-        }, otherProps), "".concat(instanceUID, "-ds-search-toggle-").concat(id));
+        }, otherProps), `${instanceUID}-ds-search-toggle-${id}`);
 
       case 'custom':
         if (CustomComponent) return /*#__PURE__*/_jsx(CustomComponent, {
@@ -86,7 +84,7 @@ const ToolbarItems = () => {
             fill: "#FFF",
             size: "m"
           }))
-        }), "".concat(instanceUID, "-ds-toolbar-button-").concat(label));
+        }), `${instanceUID}-ds-toolbar-button-${label}`);
     }
   }), [toolbar, instanceUID]);
   return /*#__PURE__*/jsx(Fragment, {

package/esm/config/useGlobalHeader.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useState, useMemo } from 'react';
 import { uid } from 'uid';
 import { useGetPropsWithDefaults } from './useGetPropsWithDefaults.js';
@@ -6,16 +5,8 @@ import { useGetPropsWithDefaults } from './useGetPropsWithDefaults.js';
 const useGlobalHeader = props => {
   const [showIconOnly, setShowIconOnly] = useState(false);
   const instanceUID = useMemo(() => uid(5), []);
-  const globalHeaderToolbarGrid = useMemo(() => {
-    var _props$toolbar$length, _props$toolbar;
-
-    return new Array((_props$toolbar$length = props === null || props === void 0 ? void 0 : (_props$toolbar = props.toolbar) === null || _props$toolbar === void 0 ? void 0 : _props$toolbar.length) !== null && _props$toolbar$length !== void 0 ? _props$toolbar$length : 0).fill('auto');
-  }, [props.toolbar]);
-  const globalHeaderBreadcrumbGrid = useMemo(() => {
-    var _props$breadcrumb$len, _props$breadcrumb;
-
-    return ['auto', ...new Array((_props$breadcrumb$len = props === null || props === void 0 ? void 0 : (_props$breadcrumb = props.breadcrumb) === null || _props$breadcrumb === void 0 ? void 0 : _props$breadcrumb.length) !== null && _props$breadcrumb$len !== void 0 ? _props$breadcrumb$len : 0).fill('auto'), '1fr'];
-  }, [props.breadcrumb]);
+  const globalHeaderToolbarGrid = useMemo(() => new Array(props?.toolbar?.length ?? 0).fill('auto'), [props.toolbar]);
+  const globalHeaderBreadcrumbGrid = useMemo(() => ['auto', ...new Array(props?.breadcrumb?.length ?? 0).fill('auto'), '1fr'], [props.breadcrumb]);
   const propsWithDefaults = useGetPropsWithDefaults(props);
   const ctx = React.useMemo(() => ({
     props: propsWithDefaults,

package/esm/config/useValidateProps.js

@@ -1,6 +1,3 @@
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
 import { throwLogoError, throwBreadcrumbItemError, isValidToolbarType, throwToolbarItemGenericError, isObject, throwToolbarPopupItemError, throwToolbarAppPickerItemError } from './validateHelpers.js';
 
 const validatePopupItem = componentProps => {
@@ -47,7 +44,7 @@ const useValidateProps = props => {
     throwLogoError('LogoWithBrand', LogoWithBrand);
   }
 
-  breadcrumb === null || breadcrumb === void 0 ? void 0 : breadcrumb.forEach(breadcrumbItem => {
+  breadcrumb?.forEach(breadcrumbItem => {
     if (breadcrumbItem.label && typeof breadcrumbItem.label !== 'string') {
       throwBreadcrumbItemError('label', breadcrumbItem.label);
     }
@@ -64,7 +61,7 @@ const useValidateProps = props => {
       throwBreadcrumbItemError('isSelected', breadcrumbItem.isSelected);
     }
   });
-  toolbar === null || toolbar === void 0 ? void 0 : toolbar.forEach(toolbarItem => {
+  toolbar?.forEach(toolbarItem => {
     if (toolbarItem.type) {
       if (!isValidToolbarType(toolbarItem.type)) {
         throwToolbarItemGenericError('type', toolbarItem.type);

package/esm/config/validateHelpers.js

@@ -1,3 +1,5 @@
+import 'core-js/modules/es.error.cause.js';
+
 const breadcrumbProps = {
   label: 'string',
   onClick: 'function',
@@ -26,19 +28,42 @@ const getVariableType = arg => {
 };
 const isValidToolbarType = string => string === 'ds-app-picker' || string === 'ds-popup-menu' || string === 'ds-search-toggle' || string === 'custom';
 const throwBreadcrumbItemError = (validPropKey, invalidProp) => {
-  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  "));
+  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]})
+  `);
 };
 const throwToolbarPopupItemError = (validPropKey, invalidProp) => {
-  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  "));
+  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]})
+  `);
 };
 const throwToolbarAppPickerItemError = (validPropKey, invalidProp) => {
-  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  "));
+  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]})
+  `);
 };
 const throwToolbarItemGenericError = (validPropKey, invalidProp) => {
-  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  "));
+  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]})
+  `);
 };
 const throwLogoError = (validPropKey, invalidProp) => {
-  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  "));
+  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).
+  `);
 };
 
 export { breadcrumbProps, getVariableType, isObject, isValidToolbarType, throwBreadcrumbItemError, throwLogoError, throwToolbarAppPickerItemError, throwToolbarItemGenericError, throwToolbarPopupItemError, toolbarProps };

package/esm/outOfTheBox/AppPicker/AppPicker.js

@@ -1,12 +1,11 @@
-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 'core-js/modules/web.dom-collections.iterator.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { useState, useRef, useCallback, useMemo } from 'react';
 import { DSAppPicker } from '@elliemae/ds-app-picker';
 import { mergeRefs } from '@elliemae/ds-utilities';
@@ -54,10 +53,8 @@ const AppPicker = _ref => {
   }, []);
   const handleAppPickerOnKeyDown = useCallback(e => {
     if (e.code === 'Escape') {
-      var _buttonRef$current;
-
       setIsOpen(false);
-      buttonRef === null || buttonRef === void 0 ? void 0 : (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
+      buttonRef?.current?.focus();
     }
   }, []);
   const handleOnClickOutside = useCallback(() => {
@@ -73,7 +70,7 @@ const AppPicker = _ref => {
     return /*#__PURE__*/jsx("div", {
       ref: ref,
       children: /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
-        onClick: triggerOnClick !== null && triggerOnClick !== void 0 ? triggerOnClick : handleOnClick,
+        onClick: triggerOnClick ?? handleOnClick,
         onKeyDown: handleTriggerKeyDown,
         ref: mergeRefs(buttonRef, triggerRef),
         title: label,
@@ -94,11 +91,11 @@ const AppPicker = _ref => {
     sectionTitle: sectionTitle,
     customSectionTitle: customSectionTitle,
     icon: icon,
-    onKeyDown: userOnKeyDown !== null && userOnKeyDown !== void 0 ? userOnKeyDown : handleAppPickerOnKeyDown,
+    onKeyDown: userOnKeyDown ?? handleAppPickerOnKeyDown,
     actionRef: actionRef,
-    onClickOutside: userOnClickOutside !== null && userOnClickOutside !== void 0 ? userOnClickOutside : handleOnClickOutside,
-    renderTrigger: userRenderTrigger !== null && userRenderTrigger !== void 0 ? userRenderTrigger : renderTrigger,
-    isOpen: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
+    onClickOutside: userOnClickOutside ?? handleOnClickOutside,
+    renderTrigger: userRenderTrigger ?? renderTrigger,
+    isOpen: userIsOpen ?? isOpen,
     onClose: onClose,
     triggerRef: triggerRef
   });

package/esm/outOfTheBox/PopupMenu/PopupMenu.js

@@ -1,12 +1,11 @@
-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 'core-js/modules/web.dom-collections.iterator.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { useState, useCallback, useMemo } from 'react';
 import { DSPopperJS } from '@elliemae/ds-popperjs';
 import { PopupMenuContent } from './PopupMenuContent.js';
@@ -53,7 +52,7 @@ const PopupMenu = _ref => {
       setIsOpen(false);
     }
 
-    buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
+    buttonRef?.focus();
   }, [buttonRef, userIsOpen]);
   const handleTriggerOnClick = useCallback(e => {
     if (userIsOpen === undefined) setIsOpen(true);
@@ -82,7 +81,7 @@ const PopupMenu = _ref => {
     })
   })), /*#__PURE__*/_jsx(DSPopperJS, {
     referenceElement: buttonRef,
-    showPopover: userIsOpen !== null && userIsOpen !== void 0 ? userIsOpen : isOpen,
+    showPopover: userIsOpen ?? isOpen,
     closeContextMenu: handleOnClose,
     onClickOutside: onClickOutside
   }, void 0, content));

package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -28,9 +28,7 @@ const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
   } = useContext(GlobalHeaderContext);
   const menuRef = useRef(null);
   useEffect(() => {
-    var _menuRef$current, _menuRef$current$firs;
-
-    (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 ? void 0 : (_menuRef$current$firs = _menuRef$current.firstChild) === null || _menuRef$current$firs === void 0 ? void 0 : _menuRef$current$firs.focus();
+    menuRef.current?.firstChild?.focus();
   }, []);
   const content = useMemo(() => options.map(option => {
     const {
@@ -56,7 +54,7 @@ const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
 
     switch (type) {
       case 'separator':
-        return /*#__PURE__*/jsx(Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
+        return /*#__PURE__*/jsx(Separator, _objectSpread({}, ariaAndDataProps), `${instanceUID}-separator-${label}`);
 
       case 'custom':
         return /*#__PURE__*/jsx(ItemWrapper, _objectSpread(_objectSpread({
@@ -65,7 +63,7 @@ const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
           id: id
         }, ariaAndDataProps), {}, {
           children: Content && /*#__PURE__*/_jsx(Content, {})
-        }), "".concat(instanceUID, "-popup-").concat(label));
+        }), `${instanceUID}-popup-${label}`);
 
       default:
         return /*#__PURE__*/jsxs(ItemWrapper, _objectSpread(_objectSpread({
@@ -74,7 +72,7 @@ const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
           id: id
         }, ariaAndDataProps), {}, {
           children: [Icon && /*#__PURE__*/_jsx(Icon, {}), Label && /*#__PURE__*/_jsx(Label, {}, void 0, label)]
-        }), "".concat(instanceUID, "-popup-").concat(label));
+        }), `${instanceUID}-popup-${label}`);
     }
   }), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
   return /*#__PURE__*/jsx(List, {

package/esm/outOfTheBox/PopupMenu/styles.js

@@ -9,7 +9,7 @@ const ItemWrapper = /*#__PURE__*/styled.button.withConfig({
   let {
     theme
   } = _ref;
-  return "1px solid ".concat(theme.colors.brand[600]);
+  return `1px solid ${theme.colors.brand[600]}`;
 });
 const Label = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-snqcgs-2"

package/esm/outOfTheBox/SearchToggle/SearchToggle.js

@@ -1,12 +1,11 @@
-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 'core-js/modules/web.dom-collections.iterator.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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { useState, useRef, useCallback } from 'react';
 import { Search } from '@elliemae/ds-icons';
 import { getDataProps } from '@elliemae/ds-props-helpers';
@@ -54,11 +53,7 @@ const SearchToggle = _ref => {
     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();
-        });
+        setTimeout(() => triggerRef.current?.focus());
       }
     }
 
@@ -66,9 +61,7 @@ const SearchToggle = _ref => {
   }, [onKeyDown, userIsOpen]);
   const handleOnBlur = useCallback(() => {
     setTimeout(() => {
-      var _containerRef$current;
-
-      const contains = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.contains(document.activeElement);
+      const contains = containerRef.current?.contains(document.activeElement);
       if (value === '' && !contains) setIsOpen(false);
     });
   }, [value]);

package/package.json

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