@elliemae/ds-mobile 2.3.0-alpha.9 → 2.3.0-next.3

package/cjs/Accordion/Accordion.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var reactDesc = require('react-desc');
+var dsAccordion = require('@elliemae/ds-accordion');
+var propTypes = require('./propTypes.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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["children"],
+      _excluded2 = ["children"];
+
+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 DSMobileAccordion = _ref => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(dsAccordion.DSAccordion, _objectSpread(_objectSpread({}, props), {}, {
+    isDSMobile: true,
+    children: children
+  }));
+};
+const DSMobileAccordionItem = _ref2 => {
+  let {
+    children
+  } = _ref2,
+      props = _objectWithoutProperties__default["default"](_ref2, _excluded2);
+
+  return /*#__PURE__*/jsxRuntime.jsx(dsAccordion.DSAccordionItem, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
+};
+const DSMobileAccordionItemWithSchema = reactDesc.describe(DSMobileAccordionItem);
+DSMobileAccordionItemWithSchema.propTypes = propTypes.mobileAccordionItemPropTypes;
+const DSMobileAccordionWithSchema = reactDesc.describe(DSMobileAccordion);
+DSMobileAccordionWithSchema.propTypes = propTypes.mobileAccordionPropTypes;
+
+exports.DSMobileAccordion = DSMobileAccordion;
+exports.DSMobileAccordionItem = DSMobileAccordionItem;
+exports.DSMobileAccordionItemWithSchema = DSMobileAccordionItemWithSchema;
+exports.DSMobileAccordionWithSchema = DSMobileAccordionWithSchema;

package/cjs/Accordion/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Accordion = require('./Accordion.js');
+
+
+
+exports.DSMobileAccordion = Accordion.DSMobileAccordion;
+exports.DSMobileAccordionItem = Accordion.DSMobileAccordionItem;
+exports.DSMobileAccordionItemWithSchema = Accordion.DSMobileAccordionItemWithSchema;
+exports.DSMobileAccordionWithSchema = Accordion.DSMobileAccordionWithSchema;

package/cjs/Accordion/propTypes.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const mobileAccordionItemPropTypes = {
+  children: reactDesc.PropTypes.node.description('Dimsum AccordionItem content.').isRequired,
+  title: reactDesc.PropTypes.string.description('Set a primary title.'),
+  value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Dimsum AccordionItem value, this value should be unique.').isRequired,
+  iconClosed: reactDesc.PropTypes.node.description('Custom Dimsum Icon when it is closed.'),
+  iconOpened: reactDesc.PropTypes.node.description('Custom Dimsum Icon when it is open.'),
+  secondaryTitle: reactDesc.PropTypes.string.description('Set a secondary title'),
+  customActions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object).description('Set Dimsum AccordionItem custom actions.'),
+  renderCustomActions: reactDesc.PropTypes.func.description('This property will render any JSX in the custom actions area. You can access to all references and active values within the props.')
+};
+const mobileAccordionPropTypes = {
+  containerProps: reactDesc.PropTypes.object.description('Adds props to the container.'),
+  activeValue: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number])), reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Selected active value. This property makes the component a controlled one.'),
+  children: reactDesc.PropTypes.node.description('Dimsum AccordionItems to show.'),
+  allowMultipleOpen: reactDesc.PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),
+  onChange: reactDesc.PropTypes.func.description('Callback function once the Dimsum Accordion changes.')
+};
+
+exports.mobileAccordionItemPropTypes = mobileAccordionItemPropTypes;
+exports.mobileAccordionPropTypes = mobileAccordionPropTypes;

package/cjs/CategoryBox/CategoryBox.js

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var lodash = require('lodash');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Title = /*#__PURE__*/styled__default["default"].h3.withConfig({
+  componentId: "sc-iv6vo1-0"
+})(["font-size:18px;margin:0;color:", ";line-height:inherit;", " font-weight:", ";"], props => props.theme.colors.neutral['700'], dsSystem.truncate(), props => props.theme.fontWeights.semibold);
+const CategoryBox = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-iv6vo1-1"
+})(["background:", ";border-top:", ";"], props => props.theme.colors.neutral['0'], props => props.borderTop ? "1px solid ".concat(props.theme.colors.neutral['100']) : 'none');
+
+const DSCategoryBox = _ref => {
+  let {
+    borderTop = true,
+    actionsRight = [],
+    title,
+    headerLevel = 3,
+    children
+  } = _ref;
+  const rows = ['auto'];
+  const hasActions = actionsRight.length > 0;
+  if (hasActions) rows.push('auto');
+  return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    rows: ['40px', 'auto']
+  }, void 0, /*#__PURE__*/_jsx__default["default"](CategoryBox, {
+    cols: rows,
+    borderTop: borderTop,
+    alignItems: "center",
+    pl: "xs",
+    pr: actionsRight.length > 0 ? 'xxs' : 'xs'
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Title, {
+    as: "h".concat(headerLevel)
+  }, void 0, title), hasActions && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    cols: lodash.times(actionsRight.length, () => 'auto'),
+    justifySelf: "end"
+  }, void 0, actionsRight)), children);
+};
+
+const props = {
+  /**
+   * Category Box title
+   */
+  title: reactDesc.PropTypes.string.isRequired.description('Category Box title'),
+
+  /**
+   * Toggle border top of category box
+   */
+  borderTop: reactDesc.PropTypes.bool.description('Toggle border top of category box'),
+
+  /**
+   * Array of button icons
+   */
+  actionsRight: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.element).description('Array of button icons'),
+
+  /**
+   * semantic level of header tag for the title
+   */
+  headerLevel: reactDesc.PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('semantic level of header tag for the title'),
+
+  /**
+   * In-box children
+   */
+  children: reactDesc.PropTypes.element.description('In-box children')
+};
+const DSCategoryBoxWithSchema = reactDesc.describe(DSCategoryBox);
+DSCategoryBoxWithSchema.propTypes = props;
+
+exports.DSCategoryBox = DSCategoryBox;
+exports.DSCategoryBoxWithSchema = DSCategoryBoxWithSchema;

package/cjs/CategoryBox/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var CategoryBox = require('./CategoryBox.js');
+
+
+
+exports.DSCategoryBox = CategoryBox.DSCategoryBox;
+exports.DSCategoryBoxWithSchema = CategoryBox.DSCategoryBoxWithSchema;

package/cjs/CollectionBox/CollectionBox.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var dsGrid = require('@elliemae/ds-grid');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const CollectionBox = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-z729w4-0"
+})(["background:", ";font-size:13px;color:", ";font-weight:", ";border-top:1px solid ", ";"], props => props.theme.colors.neutral['000'], props => props.theme.colors.neutral['700'], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['100']);
+const Footer = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-z729w4-1"
+})(["border-top:1px dashed ", ";"], props => props.theme.colors.neutral['100']);
+const Body = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-z729w4-2"
+})(["min-height:92px;font-weight:", ";"], props => props.theme.fontWeights.regular);
+const Header = /*#__PURE__*/styled__default["default"].h3.withConfig({
+  componentId: "sc-z729w4-3"
+})(["line-height:unset;font-size:inherit;font-weight:inherit;margin:0;", "}"], dsSystem.truncate());
+const ActionWrap = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
+  componentId: "sc-z729w4-4"
+})(["& .em-ds-button{padding:0;min-width:unset;}"]);
+
+const DSCollectionBox = _ref => {
+  let {
+    body,
+    title,
+    headerAction,
+    footerAction,
+    headerLevel = 3
+  } = _ref;
+  const headerCols = [];
+  const footerCols = [];
+  const rows = [];
+  if (headerAction || title) rows.push('40px');
+  rows.push('auto');
+  if (footerAction) rows.push('40px');
+  if (headerAction) headerCols.push('auto');
+  if (title) headerCols.push('auto');
+  if (footerAction) footerCols.push('auto');
+  return /*#__PURE__*/_jsx__default["default"](CollectionBox, {
+    rows: rows
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    alignItems: "center",
+    cols: headerCols
+  }, void 0, title && /*#__PURE__*/_jsx__default["default"](Header, {
+    as: "h".concat(headerLevel)
+  }, void 0, title), headerAction && /*#__PURE__*/_jsx__default["default"](ActionWrap, {
+    justifySelf: "end"
+  }, void 0, headerAction)), /*#__PURE__*/_jsx__default["default"](Body, {}, void 0, body), footerAction && /*#__PURE__*/_jsx__default["default"](Footer, {
+    alignItems: "center",
+    cols: footerCols
+  }, void 0, /*#__PURE__*/_jsx__default["default"](ActionWrap, {
+    justifySelf: "end"
+  }, void 0, footerAction)));
+};
+
+const props = {
+  /**
+   * body inside collection box
+   */
+  body: reactDesc.PropTypes.element.isRequired.description('body inside collection box'),
+
+  /**
+   * Collection box header
+   */
+  title: reactDesc.PropTypes.string.description('Collection box header'),
+
+  /**
+   * Collection box header action, expects a button with size s
+   */
+  headerAction: reactDesc.PropTypes.element.description('Collection box header action, expects a button with size s'),
+
+  /**
+   * Collection box footer action, expects a button with size s
+   */
+  footerAction: reactDesc.PropTypes.element.description('Collection box footer action, expects a button with size s'),
+
+  /**
+   * Semantic header tag used for the header title
+   */
+  headerLevel: reactDesc.PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('Semantic header tag used for the header title')
+};
+const DSCollectionBoxWithSchema = reactDesc.describe(DSCollectionBox);
+DSCollectionBoxWithSchema.propTypes = props;
+
+exports.DSCollectionBox = DSCollectionBox;
+exports.DSCollectionBoxWithSchema = DSCollectionBoxWithSchema;

package/cjs/CollectionBox/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var CollectionBox = require('./CollectionBox.js');
+
+
+
+exports.DSCollectionBox = CollectionBox.DSCollectionBox;
+exports.DSCollectionBoxWithSchema = CollectionBox.DSCollectionBoxWithSchema;

package/cjs/FullPageContainer/FullPageContainer.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var dsGrid = require('@elliemae/ds-grid');
+var useMobileHeight = require('./useMobileHeight.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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["children"];
+
+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 DSFullPageContainer = _ref => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const height = useMobileHeight.useMobileHeight();
+  return /*#__PURE__*/jsxRuntime.jsx(dsGrid.Grid, _objectSpread(_objectSpread({
+    height: height,
+    width: "100%"
+  }, props), {}, {
+    children: children
+  }));
+};
+
+exports.DSFullPageContainer = DSFullPageContainer;

package/cjs/FullPageContainer/FullPageContainerScroll.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('react');
+var dsGrid = require('@elliemae/ds-grid');
+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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["style", "children"];
+
+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 DSFullPageContainerScroll = _ref => {
+  let {
+    style = {},
+    children
+  } = _ref,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  return /*#__PURE__*/jsxRuntime.jsx(dsGrid.Grid, _objectSpread(_objectSpread({
+    maxHeight: "100%",
+    style: _objectSpread({
+      overflow: 'auto'
+    }, style)
+  }, props), {}, {
+    children: children
+  }));
+};
+
+exports.DSFullPageContainerScroll = DSFullPageContainerScroll;

package/cjs/FullPageContainer/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FullPageContainer = require('./FullPageContainer.js');
+var FullPageContainerScroll = require('./FullPageContainerScroll.js');
+
+
+
+exports.DSFullPageContainer = FullPageContainer.DSFullPageContainer;
+exports.DSFullPageContainerScroll = FullPageContainerScroll.DSFullPageContainerScroll;

package/cjs/FullPageContainer/useMobileHeight.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+
+function useMobileHeight() {
+  const [height, setHeight] = React.useState(window.innerHeight);
+
+  const handleHeight = () => {
+    setHeight(window.innerHeight);
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('resize', handleHeight); // Remove event listener on cleanup
+
+    return () => window.removeEventListener('resize', handleHeight);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return height;
+}
+
+exports.useMobileHeight = useMobileHeight;

package/cjs/GlobalHeader/MobileGlobalHeader.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+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 dsForm = require('@elliemae/ds-form');
+var reactDesc = require('react-desc');
+var DSButton = require('@elliemae/ds-button');
+var dsIcon = require('@elliemae/ds-icon');
+var lodash = require('lodash');
+var dsGrid = require('@elliemae/ds-grid');
+var EM_logo = require('../Icons/EM_logo.js');
+var styles = require('./styles.js');
+var SideNav = require('../SideNav/SideNav.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 DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _span;
+
+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 DSGlobalHeader = _ref => {
+  let {
+    containerProps = {},
+    title,
+    lastIcon,
+    onSearchChange = lodash.noop,
+    topMenuItems,
+    bottomMenuItems
+  } = _ref;
+  const [searchBarVisible, setSearchBarVisible] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState();
+  const [showMenu, setShowMenu] = React.useState(false);
+
+  const searchClicked = () => {
+    setSearchBarVisible(true);
+  };
+
+  const onSearchChangeDebounced = React.useCallback(lodash.debounce(onSearchChange, 250), []);
+
+  const searchValueChanged = e => {
+    const val = e.target.value;
+    onSearchChangeDebounced(val);
+    setSearchValue(val);
+  };
+
+  const searchCloseClicked = () => {
+    setSearchBarVisible(false);
+  };
+
+  const menuToggle = flag => {
+    setShowMenu(flag);
+  };
+
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(styles.Container, _objectSpread(_objectSpread({
+      "data-testid": containerProps['data-testid'] || 'global-header-wrapper'
+    }, containerProps), {}, {
+      children: !searchBarVisible ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/_jsx__default["default"](styles.MainSection, {}, void 0, /*#__PURE__*/_jsx__default["default"](styles.Icon, {
+          onClick: menuToggle.bind(null, true)
+        }, void 0, EM_logo()), /*#__PURE__*/_jsx__default["default"](styles.Label, {}, void 0, title), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {})), /*#__PURE__*/_jsx__default["default"](styles.RightSection, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+          cols: lastIcon ? [1 / 2, 1 / 2] : [1],
+          gutter: "xs"
+        }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+          "data-testid": "mobile-global-header-search",
+          size: dsIcon.DSIconSizes.M,
+          color: dsIcon.DSIconColors.WHITE,
+          onClick: searchClicked
+        })), lastIcon && /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, lastIcon))))
+      }) : /*#__PURE__*/_jsx__default["default"](styles.SearchWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInput, {
+        clearable: true,
+        className: "dsInput",
+        placeholder: "Search here",
+        onChange: searchValueChanged,
+        rightComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+          buttonType: "primary",
+          className: "dsButton",
+          icon: /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+            size: dsIcon.DSIconSizes.M,
+            color: dsIcon.DSIconColors.WHITE,
+            onClick: searchCloseClicked
+          })
+        }),
+        value: searchValue,
+        variant: "variant-active"
+      }))
+    })), showMenu ? /*#__PURE__*/_jsx__default["default"](SideNav.DSSideNav, {
+      title: title,
+      menuItems: topMenuItems,
+      bottomMenuItems: bottomMenuItems,
+      onClose: menuToggle.bind(null, false)
+    }) : null]
+  });
+};
+
+const menuProps = reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
+  icon: reactDesc.PropTypes.element,
+  text: reactDesc.PropTypes.string
+})).description('menu item array');
+const props = {
+  /** props to inject to wrapper */
+  containerProps: reactDesc.PropTypes.object.description('props to inject to wrapper'),
+
+  /**
+   * Heading Title
+   */
+  title: reactDesc.PropTypes.string.isRequired.description('Heading Title'),
+
+  /**
+   * Dimsum icon Element
+   */
+  lastIcon: reactDesc.PropTypes.element.description('Dimsum icon Element'),
+
+  /**
+   * Callback function for search change
+   */
+  onSearchChange: reactDesc.PropTypes.func.description('Callback function for search change'),
+
+  /**
+   * Top Menu items array
+   */
+  topMenuItems: menuProps,
+
+  /**
+   * Bottom Menu items array
+   */
+  bottomMenuItems: menuProps
+};
+const DSGlobalHeaderWithSchema = reactDesc.describe(DSGlobalHeader);
+DSGlobalHeaderWithSchema.propTypes = props;
+
+exports.DSGlobalHeader = DSGlobalHeader;
+exports.DSGlobalHeaderWithSchema = DSGlobalHeaderWithSchema;

package/cjs/GlobalHeader/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MobileGlobalHeader = require('./MobileGlobalHeader.js');
+
+
+
+exports.DSGlobalHeader = MobileGlobalHeader.DSGlobalHeader;
+exports.DSGlobalHeaderWithSchema = MobileGlobalHeader.DSGlobalHeaderWithSchema;

package/cjs/GlobalHeader/styles.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var styled = require('styled-components');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _templateObject, _templateObject2;
+const Container = /*#__PURE__*/styled__default["default"].header.withConfig({
+  componentId: "sc-1nzpklc-0"
+})(["width:auto;height:64px;position:fixed;width:100%;background-color:", ";padding:", ";color:", ";"], props => props.theme.colors.brand[700], props => props.theme.space.xs, props => props.theme.colors.neutral['000']);
+const growLeft = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  0% {\n    width: 0;\n  }\n  100% {\n    width: 100%;\n  }\n"])));
+const SearchWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1nzpklc-1"
+})(["background-color:", ";", " float:right;width:100%;border-radius:4px;.dsInput{input{border-radius:2px 0 0 2px;color:", ";border:calc(0.30769rem * 0.25) solid ", " !important;&:focus{border-right:none !important;}&::placeholder{color:", ";}}.em-ds-input__clearable{border:calc(0.30769rem * 0.25) solid ", " !important;}}.dsButton{border-color:", " !important;border-radius:0 2px 2px 0;border-left:none;}svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.brand[600], dsSystem.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n    animation: ", " 1s;\n  "])), growLeft), props => props.theme.colors.neutral['000'], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['000'], props => props.theme.colors.brand[800], props => props.theme.colors.brand[800], props => props.theme.colors.neutral['000']);
+const Icon = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1nzpklc-2"
+})(["margin-right:", ";"], props => props.theme.space.xs);
+const Label = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1nzpklc-3"
+})(["font-family:", ";font-weight:", ";font-size:25px;line-height:32px;"], props => props.theme.fonts.default, props => props.theme.fontWeights.regular);
+const RightSection = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1nzpklc-4"
+})(["padding-top:5px;"]);
+const MainSection = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-1nzpklc-5"
+})(["display:flex;flex-direction:row;height:32px;span{flex-grow:1;}"]);
+
+exports.Container = Container;
+exports.Icon = Icon;
+exports.Label = Label;
+exports.MainSection = MainSection;
+exports.RightSection = RightSection;
+exports.SearchWrapper = SearchWrapper;