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

package/cjs/index.js

@@ -0,0 +1,132 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PageList = require('./PageList/PageList.js');
+var PageFilter = require('./PageFilter/PageFilter.js');
+var PageForm = require('./PageForm/PageForm.js');
+var PageSummary = require('./PageSummary/PageSummary.js');
+var Page = require('./LoadingPage/Page.js');
+var PageSearch = require('./PageSearch/PageSearch.js');
+var Accordion = require('./Accordion/Accordion.js');
+var Separator = require('./MobileSeparator/Separator.js');
+var MobileListItem = require('./MobileListItem/MobileListItem.js');
+var MobileTouchable = require('./MobileTouchable/MobileTouchable.js');
+var MobileContextMenu = require('./MobileContextMenu/MobileContextMenu.js');
+var MobileContextMenuItem = require('./MobileContextMenu/MobileContextMenuItem.js');
+var MobileContextMenuGroup = require('./MobileContextMenu/MobileContextMenuGroup.js');
+var Filterbar = require('./MobileFilterbar/Filterbar.js');
+var FilterbarSort = require('./MobileFilterbar/FilterbarSort.js');
+var FilterbarItem = require('./MobileFilterbar/FilterbarItem.js');
+var MobileActionToolbar = require('./MobileActionToolbar/MobileActionToolbar.js');
+var MobileActionToolbarItem = require('./MobileActionToolbar/MobileActionToolbarItem.js');
+var Footer = require('./MobileFooter/Footer.js');
+var Text = require('./MobileFooter/Text.js');
+var Action = require('./MobileFooter/Action.js');
+var MobilePageHeader = require('./MobilePageHeader/MobilePageHeader.js');
+var MobileSelectList = require('./MobileSelectList/MobileSelectList.js');
+var MobileDatePicker = require('./MobileDatePicker/MobileDatePicker.js');
+var MobileTimePicker = require('./MobileTimePicker/MobileTimePicker.js');
+var MobileEmptyState = require('./MobileEmtpyState/MobileEmptyState.js');
+var MobileDropdownMenu = require('./MobileDropdownMenu/MobileDropdownMenu.js');
+var MobileDropdownInput = require('./MobileDropdownMenu/MobileDropdownInput.js');
+var index$1 = require('./Tabs/index.js');
+var index = require('./MobileCard/index.js');
+var CollectionBox = require('./CollectionBox/CollectionBox.js');
+var CategoryBox = require('./CategoryBox/CategoryBox.js');
+var GroupBox = require('./GroupBox/GroupBox.js');
+var SwipeToRefresh = require('./SwipeToRefresh/SwipeToRefresh.js');
+var MobileGlobalHeader = require('./GlobalHeader/MobileGlobalHeader.js');
+var Modal = require('./Modal/Modal.js');
+var SideNav = require('./SideNav/SideNav.js');
+var Infiniteloader = require('./InfiniteLoader/Infiniteloader.js');
+var VirtualizedInfiniteLoader = require('./InfiniteLoader/VirtualizedInfiniteLoader.js');
+var MobileBanner = require('./MobileBanner/MobileBanner.js');
+var bannerTypes = require('./MobileBanner/utils/bannerTypes.js');
+var Card = require('./MobileCard/Card.js');
+var Group = require('./MobileCard/Group.js');
+var CardIcons = require('./MobileCard/CardIcons.js');
+
+
+
+exports.DSMobilePageList = PageList.DSMobilePageList;
+exports.DSPageList = PageList.DSPageList;
+exports.DSPageFilter = PageFilter.DSPageFilter;
+exports.DSMobilePageForm = PageForm.DSMobilePageForm;
+exports.DSPageForm = PageForm.DSPageForm;
+exports.DSPageSummary = PageSummary.DSPageSummary;
+exports.DSMobileLoadingPage = Page.DSMobileLoadingPage;
+exports.DSMobilePageSearch = PageSearch.DSMobilePageSearch;
+exports.DSPageSearch = PageSearch.DSPageSearch;
+exports.DSMobileAccordion = Accordion.DSMobileAccordion;
+exports.DSMobileAccordionItem = Accordion.DSMobileAccordionItem;
+exports.DSMobileAccordionItemWithSchema = Accordion.DSMobileAccordionItemWithSchema;
+exports.DSMobileAccordionWithSchema = Accordion.DSMobileAccordionWithSchema;
+exports.DSMobileSeparator = Separator["default"];
+exports.MobileSeparatorWithSchema = Separator.MobileSeparatorWithSchema;
+exports.DSMobileListItem = MobileListItem.DSMobileListItem;
+exports.ListItemWithSchema = MobileListItem.ListItemWithSchema;
+exports.DSMobileTouchable = MobileTouchable.DSMobileTouchable;
+exports.DSMobileContextMenu = MobileContextMenu.DSMobileContextMenu;
+exports.DSMobileContextMenuWithSchema = MobileContextMenu.DSMobileContextMenuWithSchema;
+exports.DSMobileContextMenuItem = MobileContextMenuItem.DSMobileContextMenuItem;
+exports.DSMobileContextMenuItemWithSchema = MobileContextMenuItem.DSMobileContextMenuItemWithSchema;
+exports.DSMobileContextMenuGroup = MobileContextMenuGroup.DSMobileContextMenuGroup;
+exports.DSMobileContextMenuGroupWithSchema = MobileContextMenuGroup.DSMobileContextMenuGroupWithSchema;
+exports.DSMobileFilterbar = Filterbar.DSMobileFilterbar;
+exports.FilterbarWithSchema = Filterbar.FilterbarWithSchema;
+exports.DSMobileFilterbarSort = FilterbarSort.DSMobileFilterbarSort;
+exports.FilterbarSortWithSchema = FilterbarSort.FilterbarSortWithSchema;
+exports.DSMobileFilterbarItem = FilterbarItem.DSMobileFilterbarItem;
+exports.FilterbarItemWithSchema = FilterbarItem.FilterbarItemWithSchema;
+exports.DSMobileActionToolbar = MobileActionToolbar["default"];
+exports.DSMobileActionToolbarWithSchema = MobileActionToolbar.DSMobileActionToolbarWithSchema;
+exports.DSToolbarItemWithSchema = MobileActionToolbarItem.DSToolbarItemWithSchema;
+exports.ToolbarItem = MobileActionToolbarItem["default"];
+exports.DSMobileFooter = Footer["default"];
+exports.MobileFooterWithSchema = Footer.MobileFooterWithSchema;
+exports.DSMobileFooterText = Text.DSMobileFooterText;
+exports.DSMobileFooterTextWithSchema = Text.DSMobileFooterTextWithSchema;
+exports.DSMobileFooterAction = Action.DSMobileFooterAction;
+exports.DSMobileFooterActionWithSchema = Action.DSMobileFooterActionWithSchema;
+exports.DSMobilePageHeader = MobilePageHeader.DSMobilePageHeader;
+exports.PageHeaderWithSchema = MobilePageHeader.PageHeaderWithSchema;
+exports.DSMobileSelectList = MobileSelectList.DSMobileSelectList;
+exports.DSMobileDatePicker = MobileDatePicker.DSMobileDatePicker;
+exports.DSMobileDatePickerWithSchema = MobileDatePicker.DSMobileDatePickerWithSchema;
+exports.DSMobileTimePicker = MobileTimePicker.DSMobileTimePicker;
+exports.DSMobileTimePickerWithSchema = MobileTimePicker.DSMobileTimePickerWithSchema;
+exports.DSMobileEmptyState = MobileEmptyState.DSMobileEmptyState;
+exports.DSMobileEmptyStateWithSchema = MobileEmptyState.DSMobileEmptyStateWithSchema;
+exports.DSMobileDropdownMenu = MobileDropdownMenu.DSMobileDropdownMenu;
+exports.DSMobileDropdownMenuWithSchema = MobileDropdownMenu.DSMobileDropdownMenuWithSchema;
+exports.DSMobileDropdownTriggerInput = MobileDropdownInput.DSMobileDropdownTriggerInput;
+exports.DSMobileTab = index$1.DSMobileTab;
+exports.DSMobileTabWithSchema = index$1.DSMobileTabWithSchema;
+exports.DSMobileTabs = index$1.DSMobileTabs;
+exports.DSMobileTabsWithSchema = index$1.DSMobileTabsWithSchema;
+exports.DSMobileCard = index.DSMobileCard;
+exports.DSCollectionBox = CollectionBox.DSCollectionBox;
+exports.DSCollectionBoxWithSchema = CollectionBox.DSCollectionBoxWithSchema;
+exports.DSCategoryBox = CategoryBox.DSCategoryBox;
+exports.DSCategoryBoxWithSchema = CategoryBox.DSCategoryBoxWithSchema;
+exports.DSGroupBox = GroupBox.DSGroupBox;
+exports.DSGroupBoxWithSchema = GroupBox.DSGroupBoxWithSchema;
+exports.SwipeToRefresh = SwipeToRefresh.SwipeToRefresh;
+exports.SwipeToRefreshWithSchema = SwipeToRefresh.SwipeToRefreshWithSchema;
+exports.DSGlobalHeader = MobileGlobalHeader.DSGlobalHeader;
+exports.DSGlobalHeaderWithSchema = MobileGlobalHeader.DSGlobalHeaderWithSchema;
+exports.Modal = Modal.Modal;
+exports.ModalWithSchema = Modal.ModalWithSchema;
+exports.DSSideNav = SideNav.DSSideNav;
+exports.DSSideNavWithSchema = SideNav.DSSideNavWithSchema;
+exports.InfiniteLoader = Infiniteloader.InfiniteLoader;
+exports.InfiniteLoaderWithSchema = Infiniteloader.InfiniteLoaderWithSchema;
+exports.VirtualizedInfiniteLoader = VirtualizedInfiniteLoader.VirtualizedInfiniteLoader;
+exports.VirtualizedInfiniteLoaderWithSchema = VirtualizedInfiniteLoader.VirtualizedInfiniteLoaderWithSchema;
+exports.DSMobileBanner = MobileBanner.DSMobileBanner;
+exports.DSMobileBannerWithSchema = MobileBanner.DSMobileBannerWithSchema;
+exports.MOBILE_BANNER_TYPES = bannerTypes.MOBILE_BANNER_TYPES;
+exports.DSMobileCardWithSchema = Card.DSMobileCardWithSchema;
+exports.DSMobileCardGroupWithSchema = Group.DSMobileCardGroupWithSchema;
+exports.SubIcons = CardIcons.SubIcons;

package/esm/Accordion/Accordion.js

@@ -0,0 +1,45 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { describe } from 'react-desc';
+import { DSAccordion, DSAccordionItem } from '@elliemae/ds-accordion';
+import { mobileAccordionItemPropTypes, mobileAccordionPropTypes } from './propTypes.js';
+import { jsx } from 'react/jsx-runtime';
+
+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(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(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(DSAccordion, _objectSpread(_objectSpread({}, props), {}, {
+    isDSMobile: true,
+    children: children
+  }));
+};
+const DSMobileAccordionItem = _ref2 => {
+  let {
+    children
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  return /*#__PURE__*/jsx(DSAccordionItem, _objectSpread(_objectSpread({}, props), {}, {
+    children: children
+  }));
+};
+const DSMobileAccordionItemWithSchema = describe(DSMobileAccordionItem);
+DSMobileAccordionItemWithSchema.propTypes = mobileAccordionItemPropTypes;
+const DSMobileAccordionWithSchema = describe(DSMobileAccordion);
+DSMobileAccordionWithSchema.propTypes = mobileAccordionPropTypes;
+
+export { DSMobileAccordion, DSMobileAccordionItem, DSMobileAccordionItemWithSchema, DSMobileAccordionWithSchema };

package/esm/Accordion/index.js

@@ -0,0 +1 @@
+export { DSMobileAccordion, DSMobileAccordionItem, DSMobileAccordionItemWithSchema, DSMobileAccordionWithSchema } from './Accordion.js';

package/esm/Accordion/propTypes.js

@@ -0,0 +1,21 @@
+import { PropTypes } from 'react-desc';
+
+const mobileAccordionItemPropTypes = {
+  children: PropTypes.node.description('Dimsum AccordionItem content.').isRequired,
+  title: PropTypes.string.description('Set a primary title.'),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Dimsum AccordionItem value, this value should be unique.').isRequired,
+  iconClosed: PropTypes.node.description('Custom Dimsum Icon when it is closed.'),
+  iconOpened: PropTypes.node.description('Custom Dimsum Icon when it is open.'),
+  secondaryTitle: PropTypes.string.description('Set a secondary title'),
+  customActions: PropTypes.arrayOf(PropTypes.object).description('Set Dimsum AccordionItem custom actions.'),
+  renderCustomActions: 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: PropTypes.object.description('Adds props to the container.'),
+  activeValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.string, PropTypes.number]).description('Selected active value. This property makes the component a controlled one.'),
+  children: PropTypes.node.description('Dimsum AccordionItems to show.'),
+  allowMultipleOpen: PropTypes.bool.description('Allows multiple Dimsum AccordionItems to be open at the same time.'),
+  onChange: PropTypes.func.description('Callback function once the Dimsum Accordion changes.')
+};
+
+export { mobileAccordionItemPropTypes, mobileAccordionPropTypes };

package/esm/CategoryBox/CategoryBox.js

@@ -0,0 +1,72 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { times } from 'lodash';
+import { PropTypes, describe } from 'react-desc';
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+import { truncate } from '@elliemae/ds-system';
+
+const Title = /*#__PURE__*/styled.h3.withConfig({
+  componentId: "sc-iv6vo1-0"
+})(["font-size:18px;margin:0;color:", ";line-height:inherit;", " font-weight:", ";"], props => props.theme.colors.neutral['700'], truncate(), props => props.theme.fontWeights.semibold);
+const CategoryBox = /*#__PURE__*/styled(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(Grid, {
+    rows: ['40px', 'auto']
+  }, void 0, /*#__PURE__*/_jsx(CategoryBox, {
+    cols: rows,
+    borderTop: borderTop,
+    alignItems: "center",
+    pl: "xs",
+    pr: actionsRight.length > 0 ? 'xxs' : 'xs'
+  }, void 0, /*#__PURE__*/_jsx(Title, {
+    as: "h".concat(headerLevel)
+  }, void 0, title), hasActions && /*#__PURE__*/_jsx(Grid, {
+    cols: times(actionsRight.length, () => 'auto'),
+    justifySelf: "end"
+  }, void 0, actionsRight)), children);
+};
+
+const props = {
+  /**
+   * Category Box title
+   */
+  title: PropTypes.string.isRequired.description('Category Box title'),
+
+  /**
+   * Toggle border top of category box
+   */
+  borderTop: PropTypes.bool.description('Toggle border top of category box'),
+
+  /**
+   * Array of button icons
+   */
+  actionsRight: PropTypes.arrayOf(PropTypes.element).description('Array of button icons'),
+
+  /**
+   * semantic level of header tag for the title
+   */
+  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('semantic level of header tag for the title'),
+
+  /**
+   * In-box children
+   */
+  children: PropTypes.element.description('In-box children')
+};
+const DSCategoryBoxWithSchema = describe(DSCategoryBox);
+DSCategoryBoxWithSchema.propTypes = props;
+
+export { DSCategoryBox, DSCategoryBoxWithSchema };

package/esm/CategoryBox/index.js

@@ -0,0 +1 @@
+export { DSCategoryBox, DSCategoryBoxWithSchema } from './CategoryBox.js';

package/esm/CollectionBox/CollectionBox.js

@@ -0,0 +1,87 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+import { truncate } from '@elliemae/ds-system';
+
+const CollectionBox = /*#__PURE__*/styled(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(Grid).withConfig({
+  componentId: "sc-z729w4-1"
+})(["border-top:1px dashed ", ";"], props => props.theme.colors.neutral['100']);
+const Body = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-z729w4-2"
+})(["min-height:92px;font-weight:", ";"], props => props.theme.fontWeights.regular);
+const Header = /*#__PURE__*/styled.h3.withConfig({
+  componentId: "sc-z729w4-3"
+})(["line-height:unset;font-size:inherit;font-weight:inherit;margin:0;", "}"], truncate());
+const ActionWrap = /*#__PURE__*/styled(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(CollectionBox, {
+    rows: rows
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    alignItems: "center",
+    cols: headerCols
+  }, void 0, title && /*#__PURE__*/_jsx(Header, {
+    as: "h".concat(headerLevel)
+  }, void 0, title), headerAction && /*#__PURE__*/_jsx(ActionWrap, {
+    justifySelf: "end"
+  }, void 0, headerAction)), /*#__PURE__*/_jsx(Body, {}, void 0, body), footerAction && /*#__PURE__*/_jsx(Footer, {
+    alignItems: "center",
+    cols: footerCols
+  }, void 0, /*#__PURE__*/_jsx(ActionWrap, {
+    justifySelf: "end"
+  }, void 0, footerAction)));
+};
+
+const props = {
+  /**
+   * body inside collection box
+   */
+  body: PropTypes.element.isRequired.description('body inside collection box'),
+
+  /**
+   * Collection box header
+   */
+  title: PropTypes.string.description('Collection box header'),
+
+  /**
+   * Collection box header action, expects a button with size s
+   */
+  headerAction: PropTypes.element.description('Collection box header action, expects a button with size s'),
+
+  /**
+   * Collection box footer action, expects a button with size s
+   */
+  footerAction: PropTypes.element.description('Collection box footer action, expects a button with size s'),
+
+  /**
+   * Semantic header tag used for the header title
+   */
+  headerLevel: PropTypes.oneOf([1, 2, 3, 4, 5, 6]).description('Semantic header tag used for the header title')
+};
+const DSCollectionBoxWithSchema = describe(DSCollectionBox);
+DSCollectionBoxWithSchema.propTypes = props;
+
+export { DSCollectionBox, DSCollectionBoxWithSchema };

package/esm/CollectionBox/index.js

@@ -0,0 +1 @@
+export { DSCollectionBox, DSCollectionBoxWithSchema } from './CollectionBox.js';

package/esm/FullPageContainer/FullPageContainer.js

@@ -0,0 +1,34 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { useMobileHeight } from './useMobileHeight.js';
+import { jsx } from 'react/jsx-runtime';
+
+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(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(_ref, _excluded);
+
+  const height = useMobileHeight();
+  return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({
+    height: height,
+    width: "100%"
+  }, props), {}, {
+    children: children
+  }));
+};
+
+export { DSFullPageContainer };

package/esm/FullPageContainer/FullPageContainerScroll.js

@@ -0,0 +1,35 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { jsx } from 'react/jsx-runtime';
+
+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(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(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({
+    maxHeight: "100%",
+    style: _objectSpread({
+      overflow: 'auto'
+    }, style)
+  }, props), {}, {
+    children: children
+  }));
+};
+
+export { DSFullPageContainerScroll };

package/esm/FullPageContainer/index.js

@@ -0,0 +1,2 @@
+export { DSFullPageContainer } from './FullPageContainer.js';
+export { DSFullPageContainerScroll } from './FullPageContainerScroll.js';

package/esm/FullPageContainer/useMobileHeight.js

@@ -0,0 +1,20 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect } from 'react';
+
+function useMobileHeight() {
+  const [height, setHeight] = useState(window.innerHeight);
+
+  const handleHeight = () => {
+    setHeight(window.innerHeight);
+  };
+
+  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;
+}
+
+export { useMobileHeight };

package/esm/GlobalHeader/MobileGlobalHeader.js

@@ -0,0 +1,139 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useCallback } from 'react';
+import { Search } from '@elliemae/ds-icons';
+import { DSInput } from '@elliemae/ds-form';
+import { PropTypes, describe } from 'react-desc';
+import DSButton from '@elliemae/ds-button';
+import { DSIconSizes, DSIconColors } from '@elliemae/ds-icon';
+import { debounce, noop } from 'lodash';
+import { Grid } from '@elliemae/ds-grid';
+import SvgIcon from '../Icons/EM_logo.js';
+import { Container, MainSection, Icon, Label, RightSection, SearchWrapper } from './styles.js';
+import { DSSideNav } from '../SideNav/SideNav.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+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(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 = noop,
+    topMenuItems,
+    bottomMenuItems
+  } = _ref;
+  const [searchBarVisible, setSearchBarVisible] = useState(false);
+  const [searchValue, setSearchValue] = useState();
+  const [showMenu, setShowMenu] = useState(false);
+
+  const searchClicked = () => {
+    setSearchBarVisible(true);
+  };
+
+  const onSearchChangeDebounced = useCallback(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__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Container, _objectSpread(_objectSpread({
+      "data-testid": containerProps['data-testid'] || 'global-header-wrapper'
+    }, containerProps), {}, {
+      children: !searchBarVisible ? /*#__PURE__*/jsx(Fragment, {
+        children: /*#__PURE__*/_jsx(MainSection, {}, void 0, /*#__PURE__*/_jsx(Icon, {
+          onClick: menuToggle.bind(null, true)
+        }, void 0, SvgIcon()), /*#__PURE__*/_jsx(Label, {}, void 0, title), _span || (_span = /*#__PURE__*/_jsx("span", {})), /*#__PURE__*/_jsx(RightSection, {}, void 0, /*#__PURE__*/_jsx(Grid, {
+          cols: lastIcon ? [1 / 2, 1 / 2] : [1],
+          gutter: "xs"
+        }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(Search, {
+          "data-testid": "mobile-global-header-search",
+          size: DSIconSizes.M,
+          color: DSIconColors.WHITE,
+          onClick: searchClicked
+        })), lastIcon && /*#__PURE__*/_jsx(Grid, {}, void 0, lastIcon))))
+      }) : /*#__PURE__*/_jsx(SearchWrapper, {}, void 0, /*#__PURE__*/_jsx(DSInput, {
+        clearable: true,
+        className: "dsInput",
+        placeholder: "Search here",
+        onChange: searchValueChanged,
+        rightComponent: /*#__PURE__*/_jsx(DSButton, {
+          buttonType: "primary",
+          className: "dsButton",
+          icon: /*#__PURE__*/_jsx(Search, {
+            size: DSIconSizes.M,
+            color: DSIconColors.WHITE,
+            onClick: searchCloseClicked
+          })
+        }),
+        value: searchValue,
+        variant: "variant-active"
+      }))
+    })), showMenu ? /*#__PURE__*/_jsx(DSSideNav, {
+      title: title,
+      menuItems: topMenuItems,
+      bottomMenuItems: bottomMenuItems,
+      onClose: menuToggle.bind(null, false)
+    }) : null]
+  });
+};
+
+const menuProps = PropTypes.arrayOf(PropTypes.shape({
+  icon: PropTypes.element,
+  text: PropTypes.string
+})).description('menu item array');
+const props = {
+  /** props to inject to wrapper */
+  containerProps: PropTypes.object.description('props to inject to wrapper'),
+
+  /**
+   * Heading Title
+   */
+  title: PropTypes.string.isRequired.description('Heading Title'),
+
+  /**
+   * Dimsum icon Element
+   */
+  lastIcon: PropTypes.element.description('Dimsum icon Element'),
+
+  /**
+   * Callback function for search change
+   */
+  onSearchChange: PropTypes.func.description('Callback function for search change'),
+
+  /**
+   * Top Menu items array
+   */
+  topMenuItems: menuProps,
+
+  /**
+   * Bottom Menu items array
+   */
+  bottomMenuItems: menuProps
+};
+const DSGlobalHeaderWithSchema = describe(DSGlobalHeader);
+DSGlobalHeaderWithSchema.propTypes = props;
+
+export { DSGlobalHeader, DSGlobalHeaderWithSchema };

package/esm/GlobalHeader/index.js

@@ -0,0 +1 @@
+export { DSGlobalHeader, DSGlobalHeaderWithSchema } from './MobileGlobalHeader.js';

package/esm/GlobalHeader/styles.js

@@ -0,0 +1,26 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { kfrm, css } from '@elliemae/ds-system';
+
+var _templateObject, _templateObject2;
+const Container = /*#__PURE__*/styled.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 = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    width: 0;\n  }\n  100% {\n    width: 100%;\n  }\n"])));
+const SearchWrapper = /*#__PURE__*/styled.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], css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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.div.withConfig({
+  componentId: "sc-1nzpklc-2"
+})(["margin-right:", ";"], props => props.theme.space.xs);
+const Label = /*#__PURE__*/styled.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.div.withConfig({
+  componentId: "sc-1nzpklc-4"
+})(["padding-top:5px;"]);
+const MainSection = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1nzpklc-5"
+})(["display:flex;flex-direction:row;height:32px;span{flex-grow:1;}"]);
+
+export { Container, Icon, Label, MainSection, RightSection, SearchWrapper };