@elliemae/ds-global-header 2.3.1 → 3.0.0-alpha.3

package/dist/cjs/outOfTheBox/SearchToggle/SearchToggle.js

@@ -0,0 +1,134 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var SearchToggle_exports = {};
+__export(SearchToggle_exports, {
+  SearchToggle: () => SearchToggle
+});
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_icon = require("@elliemae/ds-icon");
+var import_ds_form = require("@elliemae/ds-form");
+var import_styles = require("./styles");
+var import_styles2 = require("../../components/Toolbar/styles");
+const SearchToggle = (_a) => {
+  var _b = _a, { id, componentProps } = _b, otherProps = __objRest(_b, ["id", "componentProps"]);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const inputRef = (0, import_react.useRef)(null);
+  const triggerRef = (0, import_react.useRef)(null);
+  const containerRef = (0, import_react.useRef)(null);
+  const {
+    onNext,
+    onPrevious,
+    currentResultIndex,
+    totalResults,
+    placeholder,
+    value,
+    onChange,
+    onBlur,
+    onClear,
+    isOpen: userIsOpen,
+    onKeyDown,
+    onClick
+  } = componentProps;
+  const handleOnClick = (0, import_react.useCallback)((e) => {
+    if (userIsOpen === void 0)
+      setIsOpen(true);
+    if (onClick)
+      onClick(e);
+  }, [onClick, userIsOpen]);
+  const handleOnKeyDown = (0, import_react.useCallback)((e) => {
+    if (userIsOpen === void 0) {
+      if (e.code === "Escape") {
+        setIsOpen(false);
+        setTimeout(() => triggerRef.current?.focus());
+      }
+    }
+    if (onKeyDown)
+      onKeyDown(e);
+  }, [onKeyDown, userIsOpen]);
+  const handleOnBlur = (0, import_react.useCallback)(() => {
+    setTimeout(() => {
+      const contains = containerRef.current?.contains(document.activeElement);
+      if (value === "" && !contains)
+        setIsOpen(false);
+    });
+  }, [value]);
+  return userIsOpen || isOpen ? /* @__PURE__ */ import_react.default.createElement(import_styles.StyledNavSearchBoxContainer, {
+    onKeyDown: handleOnKeyDown,
+    ref: containerRef,
+    onBlur: handleOnBlur
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSNavSearchBox, {
+    onNext,
+    onPrevious,
+    currentResultIndex,
+    totalResults,
+    onClear,
+    placeholder,
+    onChange,
+    value,
+    onBlur,
+    innerRef: inputRef,
+    autoFocus: true
+  })) : /* @__PURE__ */ import_react.default.createElement(import_styles2.Button, __spreadValues({
+    onClick: handleOnClick,
+    ref: triggerRef,
+    id
+  }, (0, import_ds_props_helpers.getDataProps)(otherProps)), /* @__PURE__ */ import_react.default.createElement(import_ds_icons.Search, {
+    color: import_ds_icon.DSIconColors.WHITE
+  }));
+};
+module.exports = __toCommonJS(SearchToggle_exports);
+//# sourceMappingURL=SearchToggle.js.map

package/dist/cjs/outOfTheBox/SearchToggle/SearchToggle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/SearchToggle/SearchToggle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useState, useCallback, useRef } from 'react';\nimport { Search } from '@elliemae/ds-icons';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport { DSIconColors } from '@elliemae/ds-icon';\nimport { DSNavSearchBox } from '@elliemae/ds-form';\nimport { StyledNavSearchBoxContainer } from './styles';\nimport { Button } from '../../components/Toolbar/styles';\nimport type { SearchTogglePropsT } from '../../GlobalHeaderTypes';\n\nexport const SearchToggle = ({ id, componentProps, ...otherProps }: SearchTogglePropsT): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const {\n    onNext,\n    onPrevious,\n    currentResultIndex,\n    totalResults,\n    placeholder,\n    value,\n    onChange,\n    onBlur,\n    onClear,\n    isOpen: userIsOpen,\n    onKeyDown,\n    onClick,\n  } = componentProps;\n\n  const handleOnClick = useCallback(\n    (e) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      if (onClick) onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (userIsOpen === undefined) {\n        if (e.code === 'Escape') {\n          setIsOpen(false);\n          setTimeout(() => triggerRef.current?.focus());\n        }\n      }\n      if (onKeyDown) onKeyDown(e);\n    },\n    [onKeyDown, userIsOpen],\n  );\n\n  const handleOnBlur = useCallback(() => {\n    setTimeout(() => {\n      const contains = containerRef.current?.contains(document.activeElement);\n      if (value === '' && !contains) setIsOpen(false);\n    });\n  }, [value]);\n\n  return userIsOpen || isOpen ? (\n    <StyledNavSearchBoxContainer onKeyDown={handleOnKeyDown} ref={containerRef} onBlur={handleOnBlur}>\n      <DSNavSearchBox\n        onNext={onNext}\n        onPrevious={onPrevious}\n        currentResultIndex={currentResultIndex}\n        totalResults={totalResults}\n        onClear={onClear}\n        placeholder={placeholder}\n        onChange={onChange}\n        value={value}\n        onBlur={onBlur}\n        innerRef={inputRef}\n        autoFocus\n      />\n    </StyledNavSearchBoxContainer>\n  ) : (\n    <Button onClick={handleOnClick} ref={triggerRef} id={id} {...getDataProps(otherProps)}>\n      <Search color={DSIconColors.WHITE} />\n    </Button>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAqD;AACrD,sBAAuB;AACvB,8BAA6B;AAC7B,qBAA6B;AAC7B,qBAA+B;AAC/B,oBAA4C;AAC5C,qBAAuB;AAGhB,MAAM,eAAe,CAAC,OAA2E;AAA3E,eAAE,MAAI,mBAAN,IAAyB,uBAAzB,IAAyB,CAAvB,MAAI;AACjC,QAAM,CAAC,QAAQ,aAAa,2BAAkB;AAC9C,QAAM,WAAW,yBAAgC;AACjD,QAAM,aAAa,yBAAiC;AACpD,QAAM,eAAe,yBAA8B;AAEnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,gBAAgB,8BACpB,CAAC,MAAM;AACL,QAAI,eAAe;AAAW,gBAAU;AACxC,QAAI;AAAS,cAAQ;AAAA,KAEvB,CAAC,SAAS;AAGZ,QAAM,kBAAkB,8BACtB,CAAC,MAA2B;AAC1B,QAAI,eAAe,QAAW;AAC5B,UAAI,EAAE,SAAS,UAAU;AACvB,kBAAU;AACV,mBAAW,MAAM,WAAW,SAAS;AAAA;AAAA;AAGzC,QAAI;AAAW,gBAAU;AAAA,KAE3B,CAAC,WAAW;AAGd,QAAM,eAAe,8BAAY,MAAM;AACrC,eAAW,MAAM;AACf,YAAM,WAAW,aAAa,SAAS,SAAS,SAAS;AACzD,UAAI,UAAU,MAAM,CAAC;AAAU,kBAAU;AAAA;AAAA,KAE1C,CAAC;AAEJ,SAAO,cAAc,SACnB,mDAAC,2CAAD;AAAA,IAA6B,WAAW;AAAA,IAAiB,KAAK;AAAA,IAAc,QAAQ;AAAA,KAClF,mDAAC,+BAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAS;AAAA,QAIb,mDAAC,uBAAD;AAAA,IAAQ,SAAS;AAAA,IAAe,KAAK;AAAA,IAAY;AAAA,KAAY,0CAAa,cACxE,mDAAC,wBAAD;AAAA,IAAQ,OAAO,4BAAa;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/outOfTheBox/SearchToggle/styles.js

@@ -0,0 +1,82 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styles_exports = {};
+__export(styles_exports, {
+  StyledNavSearchBoxContainer: () => StyledNavSearchBoxContainer
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+const StyledNavSearchBoxContainer = import_styled_components.default.div`
+  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;
+  }
+`;
+module.exports = __toCommonJS(styles_exports);
+//# sourceMappingURL=styles.js.map

package/dist/cjs/outOfTheBox/SearchToggle/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/outOfTheBox/SearchToggle/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import styled from 'styled-components';\n\nexport const StyledNavSearchBoxContainer = styled.div`\n  background: white;\n  position: relative;\n\n  min-width: 260px;\n\n  & .em-ds-button {\n    margin-right: 2px;\n    height: 24px;\n    width: 24px;\n  }\n\n  & .em-ds-input {\n    border: none;\n    outline: none;\n    box-shadow: none;\n  }\n\n  & .em-ds-input:focus {\n    border: none;\n    box-shadow: none;\n  }\n\n  & .em-ds-input.em-ds-input--clearable:hover {\n    border: none;\n    outline: none;\n    box-shadow: none;\n  }\n\n  & .em-ds-input-addon-wrapper {\n    box-shadow: none;\n  }\n\n  & .em-ds-input-addon-wrapper:hover {\n    outline: none;\n  }\n\n  & .em-ds-input-addon-wrapper__addon:hover {\n    outline: none;\n  }\n\n  & .em-ds-input:not(.floating-label-input-controller):hover:active {\n    border: none;\n    outline: none;\n    box-shadow: none;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AAEZ,MAAM,8BAA8B,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/cjs/outOfTheBox/index.js

@@ -0,0 +1,30 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var outOfTheBox_exports = {};
+var React = __toESM(require("react"));
+__reExport(outOfTheBox_exports, require("./AppPicker/AppPicker"));
+__reExport(outOfTheBox_exports, require("./PopupMenu/PopupMenu"));
+__reExport(outOfTheBox_exports, require("./SearchToggle/SearchToggle"));
+module.exports = __toCommonJS(outOfTheBox_exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/outOfTheBox/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/outOfTheBox/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './AppPicker/AppPicker';\nexport * from './PopupMenu/PopupMenu';\nexport * from './SearchToggle/SearchToggle';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;ADAvB,gCAAc;AACd,gCAAc;AACd,gCAAc;",
+  "names": []
+}

package/dist/cjs/propTypes.js

@@ -0,0 +1,56 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var propTypes_exports = {};
+__export(propTypes_exports, {
+  breadcrumbItem: () => breadcrumbItem,
+  globalHeaderProps: () => globalHeaderProps,
+  toolbarItem: () => toolbarItem
+});
+var React = __toESM(require("react"));
+var import_react_desc = require("react-desc");
+const breadcrumbItem = import_react_desc.PropTypes.shape({
+  label: import_react_desc.PropTypes.string.description("breadrcrumb item label"),
+  hasNext: import_react_desc.PropTypes.bool.description("whether the item has a child or not"),
+  isSelected: import_react_desc.PropTypes.bool.description("whether the item is selected or not"),
+  onClick: import_react_desc.PropTypes.func.description("Callback executed on click")
+});
+const toolbarItem = import_react_desc.PropTypes.shape({
+  label: import_react_desc.PropTypes.string.description("title tag description"),
+  type: import_react_desc.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: import_react_desc.PropTypes.object.description("props of out-of-the-box component"),
+  Icon: import_react_desc.PropTypes.func.description("Icon to display"),
+  onClick: import_react_desc.PropTypes.func.description("Callback executed on click")
+});
+const globalHeaderProps = {
+  Logo: import_react_desc.PropTypes.func.description("Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing."),
+  LogoWithBrand: import_react_desc.PropTypes.func.description("Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing."),
+  breadcrumb: import_react_desc.PropTypes.arrayOf(breadcrumbItem).description("Breadcrumb items to display. max 3 levels"),
+  toolbar: import_react_desc.PropTypes.arrayOf(toolbarItem).description("Toolbar items")
+};
+module.exports = __toCommonJS(propTypes_exports);
+//# sourceMappingURL=propTypes.js.map

package/dist/cjs/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { PropTypes } from 'react-desc';\n\nexport const breadcrumbItem = PropTypes.shape({\n  label: PropTypes.string.description('breadrcrumb item label'),\n  hasNext: PropTypes.bool.description('whether the item has a child or not'),\n  isSelected: PropTypes.bool.description('whether the item is selected or not'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const toolbarItem = PropTypes.shape({\n  label: PropTypes.string.description('title tag description'),\n  type: PropTypes.oneOf(['ds-app-picker', 'ds-popup-menu', 'ds-search-toggle', 'custom']).description(\n    'use to select one of the out-of-the-box types of items',\n  ),\n  componentProps: PropTypes.object.description('props of out-of-the-box component'),\n  Icon: PropTypes.func.description('Icon to display'),\n  onClick: PropTypes.func.description('Callback executed on click'),\n});\n\nexport const globalHeaderProps = {\n  Logo: PropTypes.func.description(\n    'Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.',\n  ),\n  LogoWithBrand: PropTypes.func.description(\n    'Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.',\n  ),\n  breadcrumb: PropTypes.arrayOf(breadcrumbItem).description('Breadcrumb items to display. max 3 levels'),\n  toolbar: PropTypes.arrayOf(toolbarItem).description('Toolbar items'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAA0B;AAEnB,MAAM,iBAAiB,4BAAU,MAAM;AAAA,EAC5C,OAAO,4BAAU,OAAO,YAAY;AAAA,EACpC,SAAS,4BAAU,KAAK,YAAY;AAAA,EACpC,YAAY,4BAAU,KAAK,YAAY;AAAA,EACvC,SAAS,4BAAU,KAAK,YAAY;AAAA;AAG/B,MAAM,cAAc,4BAAU,MAAM;AAAA,EACzC,OAAO,4BAAU,OAAO,YAAY;AAAA,EACpC,MAAM,4BAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,WAAW,YACtF;AAAA,EAEF,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAC7C,MAAM,4BAAU,KAAK,YAAY;AAAA,EACjC,SAAS,4BAAU,KAAK,YAAY;AAAA;AAG/B,MAAM,oBAAoB;AAAA,EAC/B,MAAM,4BAAU,KAAK,YACnB;AAAA,EAEF,eAAe,4BAAU,KAAK,YAC5B;AAAA,EAEF,YAAY,4BAAU,QAAQ,gBAAgB,YAAY;AAAA,EAC1D,SAAS,4BAAU,QAAQ,aAAa,YAAY;AAAA;",
+  "names": []
+}

package/dist/cjs/styles.js

@@ -0,0 +1,43 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var styles_exports = {};
+__export(styles_exports, {
+  Wrapper: () => Wrapper
+});
+var React = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_grid = require("@elliemae/ds-grid");
+const Wrapper = (0, import_styled_components.default)(import_ds_grid.GridContainer)`
+  background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);
+  color: ${({ theme }) => theme.colors.neutral["000"]};
+  width: 100%;
+  height: 40px;
+  padding: 0 24px 0 12px;
+`;
+module.exports = __toCommonJS(styles_exports);
+//# sourceMappingURL=styles.js.map

package/dist/cjs/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import styled from 'styled-components';\nimport { GridContainer } from '@elliemae/ds-grid';\n\nexport const Wrapper = styled(GridContainer)`\n  background-image: linear-gradient(45deg, #0f364a 0%, #1b6392 54%, #164566 100%);\n  color: ${({ theme }) => theme.colors.neutral['000']};\n  width: 100%;\n  height: 40px;\n  padding: 0 24px 0 12px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,qBAA8B;AAEvB,MAAM,UAAU,sCAAO;AAAA;AAAA,WAEnB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/GlobalHeader.js

@@ -0,0 +1,28 @@
+import * as React from "react";
+import React2 from "react";
+import { describe } from "react-desc";
+import { globalHeaderProps } from "./propTypes";
+import { GlobalHeaderTitle } from "./components/Title/GlobalHeaderTitle";
+import { GlobalHeaderBreadcrumb } from "./components/Breadcrumb/GlobalHeaderBreadcrumb";
+import { GlobalHeaderToolbar } from "./components/Toolbar/GlobalHeaderToolbar";
+import { GlobalHeaderContext } from "./GlobalHeaderContext";
+import { useGlobalHeader } from "./config/useGlobalHeader";
+import { defaultProps } from "./defaultProps";
+import { GlobalHeaderContainer } from "./GlobalHeaderContainer";
+import { useValidateProps } from "./config/useValidateProps";
+const GlobalHeader = (props) => {
+  useValidateProps(props);
+  const ctx = useGlobalHeader(props);
+  return /* @__PURE__ */ React2.createElement(GlobalHeaderContainer, null, /* @__PURE__ */ React2.createElement(GlobalHeaderContext.Provider, {
+    value: ctx
+  }, /* @__PURE__ */ React2.createElement(GlobalHeaderTitle, null), /* @__PURE__ */ React2.createElement(GlobalHeaderBreadcrumb, null), /* @__PURE__ */ React2.createElement(GlobalHeaderToolbar, null)));
+};
+GlobalHeader.defaultProps = defaultProps;
+GlobalHeader.propTypes = globalHeaderProps;
+const GlobalHeaderWithSchema = describe(GlobalHeader);
+GlobalHeaderWithSchema.propTypes = globalHeaderProps;
+export {
+  GlobalHeader,
+  GlobalHeaderWithSchema
+};
+//# sourceMappingURL=GlobalHeader.js.map

package/dist/esm/GlobalHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/GlobalHeader.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from 'react-desc';\nimport { globalHeaderProps } from './propTypes';\nimport type { GlobalHeaderPropsT as Props } from './GlobalHeaderTypes';\nimport { GlobalHeaderTitle } from './components/Title/GlobalHeaderTitle';\nimport { GlobalHeaderBreadcrumb } from './components/Breadcrumb/GlobalHeaderBreadcrumb';\nimport { GlobalHeaderToolbar } from './components/Toolbar/GlobalHeaderToolbar';\nimport { GlobalHeaderContext } from './GlobalHeaderContext';\nimport { useGlobalHeader } from './config/useGlobalHeader';\nimport { defaultProps } from './defaultProps';\nimport { GlobalHeaderContainer } from './GlobalHeaderContainer';\nimport { useValidateProps } from './config/useValidateProps';\n\nconst GlobalHeader = (props: Props): JSX.Element => {\n  useValidateProps(props);\n  const ctx = useGlobalHeader(props);\n  return (\n    <GlobalHeaderContainer>\n      <GlobalHeaderContext.Provider value={ctx}>\n        <GlobalHeaderTitle />\n        <GlobalHeaderBreadcrumb />\n        <GlobalHeaderToolbar />\n      </GlobalHeaderContext.Provider>\n    </GlobalHeaderContainer>\n  );\n};\n\nGlobalHeader.defaultProps = defaultProps;\n\nGlobalHeader.propTypes = globalHeaderProps;\nconst GlobalHeaderWithSchema = describe(GlobalHeader);\nGlobalHeaderWithSchema.propTypes = globalHeaderProps;\n\nexport { GlobalHeader, GlobalHeaderWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,eAAe,CAAC,UAA8B;AAClD,mBAAiB;AACjB,QAAM,MAAM,gBAAgB;AAC5B,SACE,qCAAC,uBAAD,MACE,qCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KACnC,qCAAC,mBAAD,OACA,qCAAC,wBAAD,OACA,qCAAC,qBAAD;AAAA;AAMR,aAAa,eAAe;AAE5B,aAAa,YAAY;AACzB,MAAM,yBAAyB,SAAS;AACxC,uBAAuB,YAAY;",
+  "names": []
+}

package/dist/esm/GlobalHeaderContainer.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import React2 from "react";
+import { Wrapper } from "./styles";
+const GlobalHeaderContainer = ({ children }) => /* @__PURE__ */ React2.createElement("header", {
+  "data-testid": "ds-global-header"
+}, /* @__PURE__ */ React2.createElement(Wrapper, {
+  cols: ["auto", "1fr", "auto"]
+}, children));
+export {
+  GlobalHeaderContainer
+};
+//# sourceMappingURL=GlobalHeaderContainer.js.map

package/dist/esm/GlobalHeaderContainer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/GlobalHeaderContainer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { GlobalHeaderContainerT } from './GlobalHeaderTypes';\nimport { Wrapper } from './styles';\n\nexport const GlobalHeaderContainer = ({ children }: GlobalHeaderContainerT): JSX.Element => (\n  <header data-testid=\"ds-global-header\">\n    <Wrapper cols={['auto', '1fr', 'auto']}>{children}</Wrapper>\n  </header>\n);\n"],
+  "mappings": "AAAA;ACAA;AAEA;AAEO,MAAM,wBAAwB,CAAC,EAAE,eACtC,qCAAC,UAAD;AAAA,EAAQ,eAAY;AAAA,GAClB,qCAAC,SAAD;AAAA,EAAS,MAAM,CAAC,QAAQ,OAAO;AAAA,GAAU;",
+  "names": []
+}

package/dist/esm/GlobalHeaderContext.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { createContext } from "react";
+import { defaultProps } from "./defaultProps";
+const noop = () => null;
+const defaultContext = {
+  props: defaultProps,
+  showIconOnly: false,
+  setShowIconOnly: noop,
+  instanceUID: "",
+  globalHeaderToolbarGrid: [],
+  globalHeaderBreadcrumbGrid: []
+};
+const GlobalHeaderContext = createContext(defaultContext);
+export {
+  GlobalHeaderContext
+};
+//# sourceMappingURL=GlobalHeaderContext.js.map

package/dist/esm/GlobalHeaderContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/GlobalHeaderContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport { defaultProps } from './defaultProps';\nimport type { ContextT } from './GlobalHeaderTypes';\n\nconst noop = () => null;\n\nconst defaultContext = {\n  props: defaultProps,\n  showIconOnly: false,\n  setShowIconOnly: noop,\n  instanceUID: '',\n  globalHeaderToolbarGrid: [],\n  globalHeaderBreadcrumbGrid: [],\n};\n\nexport const GlobalHeaderContext = createContext<ContextT>(defaultContext);\n"],
+  "mappings": "AAAA;ACAA;AACA;AAGA,MAAM,OAAO,MAAM;AAEnB,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,yBAAyB;AAAA,EACzB,4BAA4B;AAAA;AAGvB,MAAM,sBAAsB,cAAwB;",
+  "names": []
+}

package/dist/esm/GlobalHeaderTypes.js

@@ -0,0 +1,2 @@
+import * as React from "react";
+//# sourceMappingURL=GlobalHeaderTypes.js.map

package/dist/esm/GlobalHeaderTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/dist/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js

@@ -0,0 +1,83 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import * as React from "react";
+import React2, { useEffect, useContext, useRef } from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { Pipe } from "./styles";
+import { GlobalHeaderContext } from "../../GlobalHeaderContext";
+import { PureBreadcrumb } from "./PureBreadcrumb";
+const GlobalHeaderBreadcrumb = () => {
+  const {
+    props: { breadcrumb },
+    instanceUID,
+    showIconOnly,
+    setShowIconOnly,
+    globalHeaderBreadcrumbGrid
+  } = useContext(GlobalHeaderContext);
+  const breakpoint = useRef(null);
+  const flexRegion = useRef(null);
+  useEffect(() => {
+    const evaluateShowIconOnly = () => {
+      if (flexRegion && flexRegion.current && flexRegion?.current.offsetWidth <= 0 && !breakpoint.current) {
+        setShowIconOnly(true);
+        breakpoint.current = window.innerWidth;
+      } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {
+        setShowIconOnly(false);
+        breakpoint.current = null;
+      }
+    };
+    evaluateShowIconOnly();
+    window.addEventListener("resize", evaluateShowIconOnly);
+    return () => window.removeEventListener("resize", evaluateShowIconOnly);
+  }, [breakpoint, flexRegion, setShowIconOnly]);
+  return /* @__PURE__ */ React2.createElement(Grid, {
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    "aria-label": "breadcrumbs",
+    cols: globalHeaderBreadcrumbGrid,
+    role: "navigation"
+  }, /* @__PURE__ */ React2.createElement(Pipe, {
+    showIconOnly
+  }), breadcrumb?.map((item) => {
+    const _a = item, { label } = _a, rest = __objRest(_a, ["label"]);
+    return /* @__PURE__ */ React2.createElement(PureBreadcrumb, __spreadValues({
+      label,
+      length: breadcrumb.length,
+      key: `${instanceUID}-breadcrumb-item-${label}`
+    }, rest));
+  }), /* @__PURE__ */ React2.createElement("div", {
+    id: "global-header-flex-region",
+    ref: flexRegion
+  }));
+};
+export {
+  GlobalHeaderBreadcrumb
+};
+//# sourceMappingURL=GlobalHeaderBreadcrumb.js.map

package/dist/esm/components/Breadcrumb/GlobalHeaderBreadcrumb.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/Breadcrumb/GlobalHeaderBreadcrumb.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useContext, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { Pipe } from './styles';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\nimport { PureBreadcrumb } from './PureBreadcrumb';\n\nexport const GlobalHeaderBreadcrumb = (): JSX.Element => {\n  const {\n    props: { breadcrumb },\n    instanceUID,\n    showIconOnly,\n    setShowIconOnly,\n    globalHeaderBreadcrumbGrid,\n  } = useContext(GlobalHeaderContext);\n  const breakpoint = useRef<number | null>(null);\n  const flexRegion = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const evaluateShowIconOnly = () => {\n      if (flexRegion && flexRegion.current && flexRegion?.current.offsetWidth <= 0 && !breakpoint.current) {\n        setShowIconOnly(true);\n        breakpoint.current = window.innerWidth;\n      } else if (breakpoint && breakpoint.current !== null && window.innerWidth >= breakpoint.current) {\n        setShowIconOnly(false);\n        breakpoint.current = null;\n      }\n    };\n\n    evaluateShowIconOnly();\n\n    window.addEventListener('resize', evaluateShowIconOnly);\n    return () => window.removeEventListener('resize', evaluateShowIconOnly);\n  }, [breakpoint, flexRegion, setShowIconOnly]);\n\n  return (\n    <Grid\n      height=\"100%\"\n      alignItems=\"center\"\n      justifyContent=\"flex-start\"\n      aria-label=\"breadcrumbs\"\n      cols={globalHeaderBreadcrumbGrid}\n      role=\"navigation\"\n    >\n      <Pipe showIconOnly={showIconOnly} />\n      {breadcrumb?.map((item) => {\n        const { label, ...rest } = item;\n        return (\n          <PureBreadcrumb\n            label={label}\n            length={breadcrumb.length}\n            key={`${instanceUID}-breadcrumb-item-${label}`}\n            {...rest}\n          />\n        );\n      })}\n      <div id=\"global-header-flex-region\" ref={flexRegion}></div>\n    </Grid>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AACA;AAEO,MAAM,yBAAyB,MAAmB;AACvD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,WAAW;AACf,QAAM,aAAa,OAAsB;AACzC,QAAM,aAAa,OAAuB;AAE1C,YAAU,MAAM;AACd,UAAM,uBAAuB,MAAM;AACjC,UAAI,cAAc,WAAW,WAAW,YAAY,QAAQ,eAAe,KAAK,CAAC,WAAW,SAAS;AACnG,wBAAgB;AAChB,mBAAW,UAAU,OAAO;AAAA,iBACnB,cAAc,WAAW,YAAY,QAAQ,OAAO,cAAc,WAAW,SAAS;AAC/F,wBAAgB;AAChB,mBAAW,UAAU;AAAA;AAAA;AAIzB;AAEA,WAAO,iBAAiB,UAAU;AAClC,WAAO,MAAM,OAAO,oBAAoB,UAAU;AAAA,KACjD,CAAC,YAAY,YAAY;AAE5B,SACE,qCAAC,MAAD;AAAA,IACE,QAAO;AAAA,IACP,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,cAAW;AAAA,IACX,MAAM;AAAA,IACN,MAAK;AAAA,KAEL,qCAAC,MAAD;AAAA,IAAM;AAAA,MACL,YAAY,IAAI,CAAC,SAAS;AACzB,UAA2B,WAAnB,YAAmB,IAAT,iBAAS,IAAT,CAAV;AACR,WACE,qCAAC,gBAAD;AAAA,MACE;AAAA,MACA,QAAQ,WAAW;AAAA,MACnB,KAAK,GAAG,+BAA+B;AAAA,OACnC;AAAA,MAIV,qCAAC,OAAD;AAAA,IAAK,IAAG;AAAA,IAA4B,KAAK;AAAA;AAAA;",
+  "names": []
+}