@elliemae/ds-global-header 2.1.0 → 2.2.0-alpha.3

package/esm/outOfTheBox/PopupMenu/PopupMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/PopupMenu/PopupMenu.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useCallback, useMemo } from 'react';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport { PopupMenuContent } from './PopupMenuContent';\nimport { Button } from '../../components/Toolbar/styles';\nimport { getDataProps } from '@elliemae/ds-props-helpers';\nimport type { PopupPropsT as Props } from '../../GlobalHeaderTypes';\n\nexport const PopupMenu = ({ Icon, title, onClick, id, componentProps, ...otherProps }: Props): JSX.Element => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);\n\n  const {\n    onClickOutside = () => null,\n    onKeyPress,\n    popupOnKeyPress,\n    isOpen: userIsOpen,\n    options,\n    closeOnClick,\n  } = componentProps;\n\n  const handleKeyPress = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.code === 'Enter' || e.code === 'Space') {\n        setIsOpen(true);\n      }\n      if (onKeyPress) onKeyPress(e);\n    },\n    [onKeyPress],\n  );\n\n  const handleOnClose = useCallback(() => {\n    if (userIsOpen === undefined) {\n      setIsOpen(false);\n    }\n    buttonRef?.focus();\n  }, [buttonRef, userIsOpen]);\n\n  const handleTriggerOnClick = useCallback(\n    (e) => {\n      if (userIsOpen === undefined) setIsOpen(true);\n      onClick(e);\n    },\n    [onClick, userIsOpen],\n  );\n\n  const handleItemClick = useCallback(() => {\n    if (closeOnClick && userIsOpen === undefined) handleOnClose();\n  }, [closeOnClick, handleOnClose, userIsOpen]);\n\n  const content = useMemo(\n    () => (\n      <PopupMenuContent\n        options={options}\n        onItemClick={handleItemClick}\n        onClose={handleOnClose}\n        popupOnKeyPress={popupOnKeyPress}\n      />\n    ),\n    [options, handleItemClick, handleOnClose, popupOnKeyPress],\n  );\n\n  return (\n    <div>\n      <Button\n        onClick={handleTriggerOnClick}\n        onKeyPress={handleKeyPress}\n        title={title}\n        ref={setButtonRef}\n        data-testid=\"gh-toolbar-item\"\n        id={id}\n        {...getDataProps(otherProps)}\n      >\n        {Icon && <Icon fill=\"#FFF\" size=\"m\" />}\n      </Button>\n      <DSPopperJS\n        referenceElement={buttonRef}\n        showPopover={userIsOpen ?? isOpen}\n        closeContextMenu={handleOnClose}\n        onClickOutside={onClickOutside}\n      >\n        {content}\n      </DSPopperJS>\n    </div>\n  );\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AAGO,MAAM,YAAY,CAAC,EAAE,MAAM,OAAO,SAAS,IAAI,mBAAmB,iBAAqC;AAC5G,QAAM,CAAC,QAAQ,aAAa,SAAkB;AAC9C,QAAM,CAAC,WAAW,gBAAgB,SAAmC;AAErE,QAAM;AAAA,IACJ,iBAAiB,MAAM;AAAA,IACvB;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,iBAAiB,YACrB,CAAC,MAA2B;AAC1B,QAAI,EAAE,SAAS,WAAW,EAAE,SAAS,SAAS;AAC5C,gBAAU;AAAA;AAEZ,QAAI;AAAY,iBAAW;AAAA,KAE7B,CAAC;AAGH,QAAM,gBAAgB,YAAY,MAAM;AACtC,QAAI,eAAe,QAAW;AAC5B,gBAAU;AAAA;AAEZ,eAAW;AAAA,KACV,CAAC,WAAW;AAEf,QAAM,uBAAuB,YAC3B,CAAC,MAAM;AACL,QAAI,eAAe;AAAW,gBAAU;AACxC,YAAQ;AAAA,KAEV,CAAC,SAAS;AAGZ,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,gBAAgB,eAAe;AAAW;AAAA,KAC7C,CAAC,cAAc,eAAe;AAEjC,QAAM,UAAU,QACd,MACE,qCAAC,kBAAD;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,SAAS;AAAA,IACT;AAAA,MAGJ,CAAC,SAAS,iBAAiB,eAAe;AAG5C,SACE,qCAAC,OAAD,MACE,qCAAC,QAAD;AAAA,IACE,SAAS;AAAA,IACT,YAAY;AAAA,IACZ;AAAA,IACA,KAAK;AAAA,IACL,eAAY;AAAA,IACZ;AAAA,OACI,aAAa;AAAA,KAEhB,QAAQ,qCAAC,MAAD;AAAA,IAAM,MAAK;AAAA,IAAO,MAAK;AAAA,OAElC,qCAAC,YAAD;AAAA,IACE,kBAAkB;AAAA,IAClB,aAAa,cAAc;AAAA,IAC3B,kBAAkB;AAAA,IAClB;AAAA,KAEC;AAAA;",
+  "names": []
+}

package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js

@@ -1,86 +1,60 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-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 React, { useContext, useRef, useEffect, useMemo } from 'react';
-import { getDataProps, getAriaProps } from '@elliemae/ds-props-helpers';
-import { ItemWrapper, Separator, List, Label } from './styles.js';
-import { GlobalHeaderContext } from '../../GlobalHeaderContext.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const PopupMenuContent = /*#__PURE__*/React.memo(_ref => {
-  let {
-    options,
-    onItemClick,
-    onClose,
-    popupOnKeyPress
-  } = _ref;
-  const {
-    instanceUID
-  } = useContext(GlobalHeaderContext);
+import * as React from "react";
+import React2, { useRef, useEffect, useMemo, useContext } from "react";
+import { getAriaProps, getDataProps } from "@elliemae/ds-props-helpers";
+import { Separator, ItemWrapper, Label, List } from "./styles";
+import { GlobalHeaderContext } from "../../GlobalHeaderContext";
+const PopupMenuContent = React2.memo(({ options, onItemClick, onClose, popupOnKeyPress }) => {
+  const { instanceUID } = 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 {
-      type,
-      Icon,
-      label = '',
-      onClick,
-      Content,
-      id
-    } = option;
-
-    const ariaAndDataProps = _objectSpread(_objectSpread({}, getAriaProps(option)), getDataProps(option));
-
-    const handleClick = e => {
+  const content = useMemo(() => options.map((option) => {
+    const { type, Icon, label = "", onClick, Content, id } = option;
+    const ariaAndDataProps = {
+      ...getAriaProps(option),
+      ...getDataProps(option)
+    };
+    const handleClick = (e) => {
       onItemClick(e);
-      if (onClick) onClick(e);
+      if (onClick)
+        onClick(e);
     };
-
-    const handleKeyDown = e => {
-      if (e.code === 'Escape') onClose();
-      if (popupOnKeyPress) popupOnKeyPress(e);
+    const handleKeyDown = (e) => {
+      if (e.code === "Escape")
+        onClose();
+      if (popupOnKeyPress)
+        popupOnKeyPress(e);
     };
-
     switch (type) {
-      case 'separator':
-        return /*#__PURE__*/jsx(Separator, _objectSpread({}, ariaAndDataProps), "".concat(instanceUID, "-separator-").concat(label));
-
-      case 'custom':
-        return /*#__PURE__*/jsx(ItemWrapper, _objectSpread(_objectSpread({
+      case "separator":
+        return /* @__PURE__ */ React2.createElement(Separator, {
+          key: `${instanceUID}-separator-${label}`,
+          ...ariaAndDataProps
+        });
+      case "custom":
+        return /* @__PURE__ */ React2.createElement(ItemWrapper, {
           onClick: handleClick,
           onKeyDown: handleKeyDown,
-          id: id
-        }, ariaAndDataProps), {}, {
-          children: Content && /*#__PURE__*/_jsx(Content, {})
-        }), "".concat(instanceUID, "-popup-").concat(label));
-
+          key: `${instanceUID}-popup-${label}`,
+          id,
+          ...ariaAndDataProps
+        }, Content && /* @__PURE__ */ React2.createElement(Content, null));
       default:
-        return /*#__PURE__*/jsxs(ItemWrapper, _objectSpread(_objectSpread({
+        return /* @__PURE__ */ React2.createElement(ItemWrapper, {
           onClick: handleClick,
           onKeyDown: handleKeyDown,
-          id: id
-        }, ariaAndDataProps), {}, {
-          children: [Icon && /*#__PURE__*/_jsx(Icon, {}), Label && /*#__PURE__*/_jsx(Label, {}, void 0, label)]
-        }), "".concat(instanceUID, "-popup-").concat(label));
+          key: `${instanceUID}-popup-${label}`,
+          id,
+          ...ariaAndDataProps
+        }, Icon && /* @__PURE__ */ React2.createElement(Icon, null), Label && /* @__PURE__ */ React2.createElement(Label, null, label));
     }
   }), [options, onItemClick, onClose, popupOnKeyPress, instanceUID]);
-  return /*#__PURE__*/jsx(List, {
-    ref: menuRef,
-    children: content
-  });
+  return /* @__PURE__ */ React2.createElement(List, {
+    ref: menuRef
+  }, content);
 });
-
-export { PopupMenuContent };
+export {
+  PopupMenuContent
+};
+//# sourceMappingURL=PopupMenuContent.js.map

package/esm/outOfTheBox/PopupMenu/PopupMenuContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/PopupMenu/PopupMenuContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useEffect, useMemo, useContext } from 'react';\nimport { getAriaProps, getDataProps } from '@elliemae/ds-props-helpers';\nimport { Separator, ItemWrapper, Label, List } from './styles';\nimport type { PopupMenuContentPropsT as Props } from '../../GlobalHeaderTypes';\nimport { GlobalHeaderContext } from '../../GlobalHeaderContext';\n\nexport const PopupMenuContent = React.memo(({ options, onItemClick, onClose, popupOnKeyPress }: Props): JSX.Element => {\n  const { instanceUID } = useContext(GlobalHeaderContext);\n\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    (menuRef.current?.firstChild as HTMLButtonElement)?.focus();\n  }, []);\n\n  const content = useMemo(\n    () =>\n      options.map((option) => {\n        const { type, Icon, label = '', onClick, Content, id } = option;\n\n        const ariaAndDataProps = {\n          ...getAriaProps(option),\n          ...getDataProps(option),\n        };\n\n        const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {\n          onItemClick(e);\n          if (onClick) onClick(e);\n        };\n\n        const handleKeyDown = (e: React.KeyboardEvent) => {\n          if (e.code === 'Escape') onClose();\n          if (popupOnKeyPress) popupOnKeyPress(e);\n        };\n\n        switch (type) {\n          case 'separator':\n            return <Separator key={`${instanceUID}-separator-${label}`} {...ariaAndDataProps} />;\n          case 'custom':\n            return (\n              <ItemWrapper\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                key={`${instanceUID}-popup-${label}`}\n                id={id}\n                {...ariaAndDataProps}\n              >\n                {Content && <Content />}\n              </ItemWrapper>\n            );\n          default:\n            return (\n              <ItemWrapper\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                key={`${instanceUID}-popup-${label}`}\n                id={id}\n                {...ariaAndDataProps}\n              >\n                {Icon && <Icon />}\n                {Label && <Label>{label}</Label>}\n              </ItemWrapper>\n            );\n        }\n      }),\n    [options, onItemClick, onClose, popupOnKeyPress, instanceUID],\n  );\n  return <List ref={menuRef}>{content}</List>;\n});\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAEO,MAAM,mBAAmB,OAAM,KAAK,CAAC,EAAE,SAAS,aAAa,SAAS,sBAA0C;AACrH,QAAM,EAAE,gBAAgB,WAAW;AAEnC,QAAM,UAAU,OAAuB;AAEvC,YAAU,MAAM;AACd,IAAC,QAAQ,SAAS,YAAkC;AAAA,KACnD;AAEH,QAAM,UAAU,QACd,MACE,QAAQ,IAAI,CAAC,WAAW;AACtB,UAAM,EAAE,MAAM,MAAM,QAAQ,IAAI,SAAS,SAAS,OAAO;AAEzD,UAAM,mBAAmB;AAAA,SACpB,aAAa;AAAA,SACb,aAAa;AAAA;AAGlB,UAAM,cAAc,CAAC,MAAiD;AACpE,kBAAY;AACZ,UAAI;AAAS,gBAAQ;AAAA;AAGvB,UAAM,gBAAgB,CAAC,MAA2B;AAChD,UAAI,EAAE,SAAS;AAAU;AACzB,UAAI;AAAiB,wBAAgB;AAAA;AAGvC,YAAQ;AAAA,WACD;AACH,eAAO,qCAAC,WAAD;AAAA,UAAW,KAAK,GAAG,yBAAyB;AAAA,aAAa;AAAA;AAAA,WAC7D;AACH,eACE,qCAAC,aAAD;AAAA,UACE,SAAS;AAAA,UACT,WAAW;AAAA,UACX,KAAK,GAAG,qBAAqB;AAAA,UAC7B;AAAA,aACI;AAAA,WAEH,WAAW,qCAAC,SAAD;AAAA;AAIhB,eACE,qCAAC,aAAD;AAAA,UACE,SAAS;AAAA,UACT,WAAW;AAAA,UACX,KAAK,GAAG,qBAAqB;AAAA,UAC7B;AAAA,aACI;AAAA,WAEH,QAAQ,qCAAC,MAAD,OACR,SAAS,qCAAC,OAAD,MAAQ;AAAA;AAAA,MAK9B,CAAC,SAAS,aAAa,SAAS,iBAAiB;AAEnD,SAAO,qCAAC,MAAD;AAAA,IAAM,KAAK;AAAA,KAAU;AAAA;",
+  "names": []
+}

package/esm/outOfTheBox/PopupMenu/styles.js

@@ -1,21 +1,38 @@
-import styled from 'styled-components';
-
-const List = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-snqcgs-0"
-})(["padding:5px 0px;background:white;"]);
-const ItemWrapper = /*#__PURE__*/styled.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.p.withConfig({
-  componentId: "sc-snqcgs-2"
-})(["width:100%;font-size:14px;margin:10px;"]);
-const Separator = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-snqcgs-3"
-})(["width:100%;border:none;border-bottom:1px solid #ccc;"]);
-
-export { ItemWrapper, Label, List, Separator };
+import * as React from "react";
+import styled from "styled-components";
+const List = styled.div`
+  padding: 5px 0px;
+  background: white;
+`;
+const ItemWrapper = styled.button`
+  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: ${({ theme }) => `1px solid ${theme.colors.brand[600]}`};
+  }
+`;
+const Label = styled.p`
+  width: 100%;
+  font-size: 14px;
+  margin: 10px;
+`;
+const Separator = styled.div`
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #ccc;
+`;
+export {
+  ItemWrapper,
+  Label,
+  List,
+  Separator
+};
+//# sourceMappingURL=styles.js.map

package/esm/outOfTheBox/PopupMenu/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/PopupMenu/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import styled from 'styled-components';\n\nexport const List = styled.div`\n  padding: 5px 0px;\n  background: white;\n`;\n\nexport const ItemWrapper = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  padding: 0 20px;\n  cursor: pointer;\n  border: 1px solid transparent;\n  background-color: transparent;\n  outline: none;\n  :hover,\n  :focus {\n    border: ${({ theme }) => `1px solid ${theme.colors.brand[600]}`};\n  }\n`;\n\nexport const Label = styled.p`\n  width: 100%;\n  font-size: 14px;\n  margin: 10px;\n`;\n\nexport const Separator = styled.div`\n  width: 100%;\n  border: none;\n  border-bottom: 1px solid #ccc;\n`;\n"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAKpB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAYpB,CAAC,EAAE,YAAY,aAAa,MAAM,OAAO,MAAM;AAAA;AAAA;AAItD,MAAM,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrB,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/esm/outOfTheBox/SearchToggle/SearchToggle.js

@@ -1,33 +1,12 @@
-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 { useState, useRef, useCallback } from 'react';
-import { Search } from '@elliemae/ds-icons';
-import { getDataProps } from '@elliemae/ds-props-helpers';
-import { DSIconColors } from '@elliemae/ds-icon';
-import { DSNavSearchBox } from '@elliemae/ds-form';
-import { StyledNavSearchBoxContainer } from './styles.js';
-import { Button } from '../../components/Toolbar/styles.js';
-import { jsx } from 'react/jsx-runtime';
-
-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(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(_ref, _excluded);
-
+import * as React from "react";
+import React2, { useState, useCallback, useRef } from "react";
+import { Search } from "@elliemae/ds-icons";
+import { getDataProps } from "@elliemae/ds-props-helpers";
+import { DSIconColors } from "@elliemae/ds-icon";
+import { DSNavSearchBox } from "@elliemae/ds-form";
+import { StyledNavSearchBoxContainer } from "./styles";
+import { Button } from "../../components/Toolbar/styles";
+const SearchToggle = ({ id, componentProps, ...otherProps }) => {
   const [isOpen, setIsOpen] = useState(false);
   const inputRef = useRef(null);
   const triggerRef = useRef(null);
@@ -46,58 +25,55 @@ const SearchToggle = _ref => {
     onKeyDown,
     onClick
   } = componentProps;
-  const handleOnClick = useCallback(e => {
-    if (userIsOpen === undefined) setIsOpen(true);
-    if (onClick) onClick(e);
+  const handleOnClick = useCallback((e) => {
+    if (userIsOpen === void 0)
+      setIsOpen(true);
+    if (onClick)
+      onClick(e);
   }, [onClick, userIsOpen]);
-  const handleOnKeyDown = useCallback(e => {
-    if (userIsOpen === undefined) {
-      if (e.code === 'Escape') {
+  const handleOnKeyDown = useCallback((e) => {
+    if (userIsOpen === void 0) {
+      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());
       }
     }
-
-    if (onKeyDown) onKeyDown(e);
+    if (onKeyDown)
+      onKeyDown(e);
   }, [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);
-      if (value === '' && !contains) setIsOpen(false);
+      const contains = containerRef.current?.contains(document.activeElement);
+      if (value === "" && !contains)
+        setIsOpen(false);
     });
   }, [value]);
-  return userIsOpen || isOpen ? /*#__PURE__*/jsx(StyledNavSearchBoxContainer, {
+  return userIsOpen || isOpen ? /* @__PURE__ */ React2.createElement(StyledNavSearchBoxContainer, {
     onKeyDown: handleOnKeyDown,
     ref: containerRef,
-    onBlur: handleOnBlur,
-    children: /*#__PURE__*/_jsx(DSNavSearchBox, {
-      onNext: onNext,
-      onPrevious: onPrevious,
-      currentResultIndex: currentResultIndex,
-      totalResults: totalResults,
-      onClear: onClear,
-      placeholder: placeholder,
-      onChange: onChange,
-      value: value,
-      onBlur: onBlur,
-      innerRef: inputRef,
-      autoFocus: true
-    })
-  }) : /*#__PURE__*/jsx(Button, _objectSpread(_objectSpread({
+    onBlur: handleOnBlur
+  }, /* @__PURE__ */ React2.createElement(DSNavSearchBox, {
+    onNext,
+    onPrevious,
+    currentResultIndex,
+    totalResults,
+    onClear,
+    placeholder,
+    onChange,
+    value,
+    onBlur,
+    innerRef: inputRef,
+    autoFocus: true
+  })) : /* @__PURE__ */ React2.createElement(Button, {
     onClick: handleOnClick,
     ref: triggerRef,
-    id: id
-  }, getDataProps(otherProps)), {}, {
-    children: /*#__PURE__*/_jsx(Search, {
-      color: DSIconColors.WHITE
-    })
+    id,
+    ...getDataProps(otherProps)
+  }, /* @__PURE__ */ React2.createElement(Search, {
+    color: DSIconColors.WHITE
   }));
 };
-
-export { SearchToggle };
+export {
+  SearchToggle
+};
+//# sourceMappingURL=SearchToggle.js.map

package/esm/outOfTheBox/SearchToggle/SearchToggle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/SearchToggle/SearchToggle.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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 'index.d';\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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AAGO,MAAM,eAAe,CAAC,EAAE,IAAI,mBAAmB,iBAAkD;AACtG,QAAM,CAAC,QAAQ,aAAa,SAAkB;AAC9C,QAAM,WAAW,OAAgC;AACjD,QAAM,aAAa,OAAiC;AACpD,QAAM,eAAe,OAA8B;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,YACpB,CAAC,MAAM;AACL,QAAI,eAAe;AAAW,gBAAU;AACxC,QAAI;AAAS,cAAQ;AAAA,KAEvB,CAAC,SAAS;AAGZ,QAAM,kBAAkB,YACtB,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,YAAY,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,qCAAC,6BAAD;AAAA,IAA6B,WAAW;AAAA,IAAiB,KAAK;AAAA,IAAc,QAAQ;AAAA,KAClF,qCAAC,gBAAD;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,qCAAC,QAAD;AAAA,IAAQ,SAAS;AAAA,IAAe,KAAK;AAAA,IAAY;AAAA,OAAY,aAAa;AAAA,KACxE,qCAAC,QAAD;AAAA,IAAQ,OAAO,aAAa;AAAA;AAAA;",
+  "names": []
+}

package/esm/outOfTheBox/SearchToggle/styles.js

@@ -1,7 +1,53 @@
-import styled from 'styled-components';
+import * as React from "react";
+import styled from "styled-components";
+const StyledNavSearchBoxContainer = styled.div`
+  background: white;
+  position: relative;
 
-const StyledNavSearchBoxContainer = /*#__PURE__*/styled.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;}"]);
+  min-width: 260px;
 
-export { StyledNavSearchBoxContainer };
+  & .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;
+  }
+`;
+export {
+  StyledNavSearchBoxContainer
+};
+//# sourceMappingURL=styles.js.map

package/esm/outOfTheBox/SearchToggle/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/outOfTheBox/SearchToggle/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,8BAA8B,OAAO;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/esm/outOfTheBox/index.js

@@ -1,3 +1,5 @@
-export { AppPicker } from './AppPicker/AppPicker.js';
-export { PopupMenu } from './PopupMenu/PopupMenu.js';
-export { SearchToggle } from './SearchToggle/SearchToggle.js';
+import * as React from "react";
+export * from "./AppPicker/AppPicker";
+export * from "./PopupMenu/PopupMenu";
+export * from "./SearchToggle/SearchToggle";
+//# sourceMappingURL=index.js.map

package/esm/outOfTheBox/index.js.map

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

package/esm/propTypes.js

@@ -1,23 +1,27 @@
-import { PropTypes } from 'react-desc';
-
+import * as React from "react";
+import { PropTypes } from "react-desc";
 const breadcrumbItem = PropTypes.shape({
-  label: PropTypes.string.description('breadrcrumb item label'),
-  hasNext: PropTypes.bool.description('whether the item has a child or not'),
-  isSelected: PropTypes.bool.description('whether the item is selected or not'),
-  onClick: PropTypes.func.description('Callback executed on click')
+  label: PropTypes.string.description("breadrcrumb item label"),
+  hasNext: PropTypes.bool.description("whether the item has a child or not"),
+  isSelected: PropTypes.bool.description("whether the item is selected or not"),
+  onClick: PropTypes.func.description("Callback executed on click")
 });
 const toolbarItem = PropTypes.shape({
-  label: PropTypes.string.description('title tag description'),
-  type: 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: PropTypes.object.description('props of out-of-the-box component'),
-  Icon: PropTypes.func.description('Icon to display'),
-  onClick: PropTypes.func.description('Callback executed on click')
+  label: PropTypes.string.description("title tag description"),
+  type: 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: PropTypes.object.description("props of out-of-the-box component"),
+  Icon: PropTypes.func.description("Icon to display"),
+  onClick: PropTypes.func.description("Callback executed on click")
 });
 const globalHeaderProps = {
-  Logo: PropTypes.func.description('Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing.'),
-  LogoWithBrand: PropTypes.func.description('Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing.'),
-  breadcrumb: PropTypes.arrayOf(breadcrumbItem).description('Breadcrumb items to display. max 3 levels'),
-  toolbar: PropTypes.arrayOf(toolbarItem).description('Toolbar items')
+  Logo: PropTypes.func.description("Global Header Logo to render. Logo and LogoWithBrand are going to swap during window resizing."),
+  LogoWithBrand: PropTypes.func.description("Global Header Logo With Brand title to render. Logo and LogoWithBrand are going to swap during window resizing."),
+  breadcrumb: PropTypes.arrayOf(breadcrumbItem).description("Breadcrumb items to display. max 3 levels"),
+  toolbar: PropTypes.arrayOf(toolbarItem).description("Toolbar items")
 };
-
-export { breadcrumbItem, globalHeaderProps, toolbarItem };
+export {
+  breadcrumbItem,
+  globalHeaderProps,
+  toolbarItem
+};
+//# sourceMappingURL=propTypes.js.map

package/esm/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AAEO,MAAM,iBAAiB,UAAU,MAAM;AAAA,EAC5C,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,SAAS,UAAU,KAAK,YAAY;AAAA,EACpC,YAAY,UAAU,KAAK,YAAY;AAAA,EACvC,SAAS,UAAU,KAAK,YAAY;AAAA;AAG/B,MAAM,cAAc,UAAU,MAAM;AAAA,EACzC,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,MAAM,UAAU,MAAM,CAAC,iBAAiB,iBAAiB,oBAAoB,WAAW,YACtF;AAAA,EAEF,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,MAAM,UAAU,KAAK,YAAY;AAAA,EACjC,SAAS,UAAU,KAAK,YAAY;AAAA;AAG/B,MAAM,oBAAoB;AAAA,EAC/B,MAAM,UAAU,KAAK,YACnB;AAAA,EAEF,eAAe,UAAU,KAAK,YAC5B;AAAA,EAEF,YAAY,UAAU,QAAQ,gBAAgB,YAAY;AAAA,EAC1D,SAAS,UAAU,QAAQ,aAAa,YAAY;AAAA;",
+  "names": []
+}

package/esm/styles.js

@@ -1,13 +1,14 @@
-import styled from 'styled-components';
-import { GridContainer } from '@elliemae/ds-grid';
-
-const Wrapper = /*#__PURE__*/styled(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'];
-});
-
-export { Wrapper };
+import * as React from "react";
+import styled from "styled-components";
+import { GridContainer } from "@elliemae/ds-grid";
+const Wrapper = styled(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;
+`;
+export {
+  Wrapper
+};
+//# sourceMappingURL=styles.js.map

package/esm/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
+  "mappings": "AAAA;ACAA;AACA;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA,WAEnB,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/package.json

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