@elliemae/ds-global-header 2.3.0-alpha.8 → 2.3.0-next.2

package/cjs/config/validateHelpers.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const breadcrumbProps = {
+  label: 'string',
+  onClick: 'function',
+  hasNext: 'boolean',
+  isSelected: 'boolean'
+};
+const toolbarProps = {
+  label: 'string',
+  type: '"ds-app-picker" or "ds-popup-menu" or "ds-search-toggle"',
+  componentProps: 'object',
+  Icon: 'react component',
+  onClick: 'function',
+  options: 'array',
+  closeOnClick: 'boolean',
+  apps: 'array',
+  customApps: 'array',
+  sectionTitle: 'string',
+  customSectionTitle: 'string'
+};
+const isObject = obj => typeof obj === 'object' && !!obj && !Array.isArray(obj);
+const getVariableType = arg => {
+  if (Array.isArray(arg)) return 'array';
+  if (arg === null) return 'null';
+  if (arg === undefined) return 'undefined';
+  return typeof 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  "));
+};
+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  "));
+};
+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  "));
+};
+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  "));
+};
+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  "));
+};
+
+exports.breadcrumbProps = breadcrumbProps;
+exports.getVariableType = getVariableType;
+exports.isObject = isObject;
+exports.isValidToolbarType = isValidToolbarType;
+exports.throwBreadcrumbItemError = throwBreadcrumbItemError;
+exports.throwLogoError = throwLogoError;
+exports.throwToolbarAppPickerItemError = throwToolbarAppPickerItemError;
+exports.throwToolbarItemGenericError = throwToolbarItemGenericError;
+exports.throwToolbarPopupItemError = throwToolbarPopupItemError;
+exports.toolbarProps = toolbarProps;

package/cjs/defaultProps.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const emptyComp = () => null;
+
+const defaultProps = {
+  breadcrumb: [],
+  toolbar: [],
+  LogoWithBrand: emptyComp,
+  Logo: emptyComp
+};
+
+exports.defaultProps = defaultProps;

package/cjs/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var GlobalHeader = require('./GlobalHeader.js');
+
+
+
+exports.GlobalHeader = GlobalHeader.GlobalHeader;
+exports.GlobalHeaderWithSchema = GlobalHeader.GlobalHeaderWithSchema;
+exports["default"] = GlobalHeader.GlobalHeader;

package/cjs/outOfTheBox/AppPicker/AppPicker.js

@@ -0,0 +1,117 @@
+'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 dsAppPicker = require('@elliemae/ds-app-picker');
+var dsUtilities = require('@elliemae/ds-utilities');
+var dsIcons = require('@elliemae/ds-icons');
+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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+var _MenuPicker;
+
+const _excluded = ["label", "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 AppPicker = _ref => {
+  let {
+    label,
+    id,
+    componentProps
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const {
+    apps,
+    icon,
+    customApps,
+    sectionTitle,
+    customSectionTitle,
+    actionRef,
+    isOpen: userIsOpen,
+    onKeyDown: userOnKeyDown,
+    onClickOutside: userOnClickOutside,
+    renderTrigger: userRenderTrigger,
+    onClose,
+    triggerRef,
+    triggerOnClick
+  } = componentProps;
+  const handleTriggerKeyDown = React.useCallback(e => {
+    if (e.code === 'Enter' || e.code === 'Space') {
+      setIsOpen(true);
+    }
+  }, []);
+  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();
+    }
+  }, []);
+  const handleOnClickOutside = React.useCallback(() => {
+    setIsOpen(false);
+  }, []);
+  const handleOnClick = React.useCallback(() => {
+    setIsOpen(true);
+  }, []);
+  const renderTrigger = React.useMemo(() => _ref2 => {
+    let {
+      ref
+    } = _ref2;
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: ref,
+      children: /*#__PURE__*/jsxRuntime.jsx(styles.Button, _objectSpread(_objectSpread({
+        onClick: triggerOnClick !== null && triggerOnClick !== void 0 ? triggerOnClick : handleOnClick,
+        onKeyDown: handleTriggerKeyDown,
+        ref: dsUtilities.mergeRefs(buttonRef, triggerRef),
+        title: label,
+        "data-testid": "gh-toolbar-item",
+        id: id
+      }, dsPropsHelpers.getDataProps(otherProps)), {}, {
+        children: _MenuPicker || (_MenuPicker = /*#__PURE__*/_jsx__default["default"](dsIcons.MenuPicker, {
+          fill: "#FFF",
+          width: 20.73,
+          height: 20.73
+        }))
+      }))
+    });
+  }, [triggerOnClick, handleOnClick, handleTriggerKeyDown, triggerRef, label, id, otherProps]);
+  return /*#__PURE__*/_jsx__default["default"](dsAppPicker.DSAppPicker, {
+    apps: apps,
+    customApps: customApps,
+    sectionTitle: sectionTitle,
+    customSectionTitle: customSectionTitle,
+    icon: icon,
+    onKeyDown: userOnKeyDown !== null && userOnKeyDown !== void 0 ? 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,
+    onClose: onClose,
+    triggerRef: triggerRef
+  });
+};
+
+exports.AppPicker = AppPicker;

package/cjs/outOfTheBox/PopupMenu/PopupMenu.js

@@ -0,0 +1,101 @@
+'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 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 _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,
+    title,
+    onClick,
+    id,
+    componentProps
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const [isOpen, setIsOpen] = React.useState(false);
+  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(() => {
+    if (userIsOpen === undefined) {
+      setIsOpen(false);
+    }
+
+    buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.focus();
+  }, [buttonRef, userIsOpen]);
+  const handleTriggerOnClick = React.useCallback(e => {
+    if (userIsOpen === undefined) setIsOpen(true);
+    onClick(e);
+  }, [onClick, userIsOpen]);
+  const handleItemClick = React.useCallback(() => {
+    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,
+    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

@@ -0,0 +1,96 @@
+'use strict';
+
+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');
+
+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,
+    popupOnKeyPress
+  } = _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();
+  }, []);
+  const content = React.useMemo(() => options.map(option => {
+    const {
+      type,
+      Icon,
+      label = '',
+      onClick,
+      Content,
+      id
+    } = option;
+
+    const ariaAndDataProps = _objectSpread(_objectSpread({}, dsPropsHelpers.getAriaProps(option)), dsPropsHelpers.getDataProps(option));
+
+    const handleClick = e => {
+      onItemClick(e);
+      if (onClick) onClick(e);
+    };
+
+    const handleKeyDown = e => {
+      if (e.code === 'Escape') onClose();
+      if (popupOnKeyPress) popupOnKeyPress(e);
+    };
+
+    switch (type) {
+      case 'separator':
+        return /*#__PURE__*/jsxRuntime.jsx(styles.Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
+
+      case 'custom':
+        return /*#__PURE__*/jsxRuntime.jsx(styles.ItemWrapper, _objectSpread(_objectSpread({
+          onClick: handleClick,
+          onKeyDown: handleKeyDown,
+          id: id
+        }, ariaAndDataProps), {}, {
+          children: Content && /*#__PURE__*/_jsx__default["default"](Content, {})
+        }), "".concat(instanceUID, "-popup-").concat(label));
+
+      default:
+        return /*#__PURE__*/jsxRuntime.jsxs(styles.ItemWrapper, _objectSpread(_objectSpread({
+          onClick: handleClick,
+          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));
+    }
+  }), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
+  return /*#__PURE__*/jsxRuntime.jsx(styles.List, {
+    ref: menuRef,
+    children: content
+  });
+});
+
+exports.PopupMenuContent = PopupMenuContent;

package/cjs/outOfTheBox/PopupMenu/styles.js

@@ -0,0 +1,32 @@
+'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 List = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-snqcgs-0"
+})(["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 => {
+  let {
+    theme
+  } = _ref;
+  return "1px solid ".concat(theme.colors.brand[600]);
+});
+const Label = /*#__PURE__*/styled__default["default"].p.withConfig({
+  componentId: "sc-snqcgs-2"
+})(["width:100%;font-size:14px;margin:10px;"]);
+const Separator = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-snqcgs-3"
+})(["width:100%;border:none;border-bottom:1px solid #ccc;"]);
+
+exports.ItemWrapper = ItemWrapper;
+exports.Label = Label;
+exports.List = List;
+exports.Separator = Separator;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+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')
+});
+const toolbarItem = reactDesc.PropTypes.shape({
+  label: reactDesc.PropTypes.string.description('title tag description'),
+  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')
+});
+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'),
+  toolbar: reactDesc.PropTypes.arrayOf(toolbarItem).description('Toolbar items')
+};
+
+exports.breadcrumbItem = breadcrumbItem;
+exports.globalHeaderProps = globalHeaderProps;
+exports.toolbarItem = toolbarItem;

package/cjs/styles.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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;"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['000'];
+});
+
+exports.Wrapper = Wrapper;

package/esm/GlobalHeader.js

@@ -0,0 +1,28 @@
+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';
+import { GlobalHeaderBreadcrumb } from './components/Breadcrumb/GlobalHeaderBreadcrumb.js';
+import { GlobalHeaderToolbar } from './components/Toolbar/GlobalHeaderToolbar.js';
+import { GlobalHeaderContext } from './GlobalHeaderContext.js';
+import { useGlobalHeader } from './config/useGlobalHeader.js';
+import { defaultProps } from './defaultProps.js';
+import { GlobalHeaderContainer } from './GlobalHeaderContainer.js';
+import { useValidateProps } from './config/useValidateProps.js';
+
+var _GlobalHeaderTitle, _GlobalHeaderBreadcru, _GlobalHeaderToolbar;
+
+const GlobalHeader = props => {
+  useValidateProps(props);
+  const ctx = useGlobalHeader(props);
+  return /*#__PURE__*/_jsx(GlobalHeaderContainer, {}, void 0, /*#__PURE__*/_jsx(GlobalHeaderContext.Provider, {
+    value: ctx
+  }, void 0, _GlobalHeaderTitle || (_GlobalHeaderTitle = /*#__PURE__*/_jsx(GlobalHeaderTitle, {})), _GlobalHeaderBreadcru || (_GlobalHeaderBreadcru = /*#__PURE__*/_jsx(GlobalHeaderBreadcrumb, {})), _GlobalHeaderToolbar || (_GlobalHeaderToolbar = /*#__PURE__*/_jsx(GlobalHeaderToolbar, {}))));
+};
+
+GlobalHeader.defaultProps = defaultProps;
+const GlobalHeaderWithSchema = describe(GlobalHeader);
+GlobalHeaderWithSchema.propTypes = globalHeaderProps;
+
+export { GlobalHeader, GlobalHeaderWithSchema };