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

package/esm/MobileDropdownMenu/MobileDropdownInput.js

@@ -0,0 +1,48 @@
+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 'react';
+import styled from 'styled-components';
+import { focus } from '@elliemae/ds-system';
+import { ChevronDown } from '@elliemae/ds-icons';
+import { 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 MobileDropdownInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "sc-1rsc1yn-0"
+})(["-webkit-appearance:none;-moz-appearance:none;-webkit-tap-highlight-color:transparent;caret-color:transparent;padding-right:32px;padding-left:10px;border-radius:2px;width:100%;background:", ";height:32px;line-height:32px;border:solid 1px ", ";&:active,&:focus{", "}"], props => props.theme.colors.neutral['000'], props => props.theme.colors.neutral[200], props => focus(props.theme.colors.brand[700]));
+const MobileDropdownInputWrap = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1rsc1yn-1"
+})(["position:relative;width:100%;display:inline-block;height:32px;"]);
+const CaretWrap = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1rsc1yn-2"
+})(["width:32px;height:32px;position:absolute;right:0;top:0;display:flex;justify-content:center;align-items:center;"]);
+const Caret = _ref => {
+  let {
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_jsx(CaretWrap, {
+    onClick: onClick
+  }, void 0, /*#__PURE__*/_jsx(ChevronDown, {
+    color: ['brand-primary', '600']
+  }));
+};
+const DSMobileDropdownTriggerInput = _ref2 => {
+  let {
+    inputProps,
+    caretProps
+  } = _ref2;
+  return /*#__PURE__*/_jsx(MobileDropdownInputWrap, {
+    "data-testid": "ds-mobile-ddwn-menu"
+  }, void 0, /*#__PURE__*/jsx(MobileDropdownInput, _objectSpread(_objectSpread({}, inputProps), {}, {
+    readOnly: true
+  })), /*#__PURE__*/jsx(Caret, _objectSpread({}, caretProps)));
+};
+
+export { Caret, DSMobileDropdownTriggerInput, MobileDropdownInput, MobileDropdownInputWrap };

package/esm/MobileDropdownMenu/MobileDropdownMenu.js

@@ -0,0 +1,89 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React, { useState, useRef } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { DSMobileContextMenu } from '../MobileContextMenu/MobileContextMenu.js';
+import { DSMobileContextMenuItem } from '../MobileContextMenu/MobileContextMenuItem.js';
+import '../MobileContextMenu/MobileContextMenuGroup.js';
+import { DSMobileDropdownTriggerInput } from './MobileDropdownInput.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+const DSMobileDropdownMenu = _ref => {
+  let {
+    placeholder,
+    options = [],
+    title,
+    value,
+    itemsProps = {
+      label: undefined,
+      leftProp: undefined,
+      isGroup: false,
+      isMulti: false,
+      singleSelect: false,
+      isItemSelected: () => false,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onClick: () => {}
+    }
+  } = _ref;
+  const [menuOpen, setMenuOpen] = useState(false);
+  const inputRef = useRef(null);
+  const inputProps = React.useMemo(() => ({
+    readOnly: true,
+    value,
+    onClick: () => setMenuOpen(true),
+    ref: inputRef,
+    placeholder
+  }), [value, placeholder]);
+  const caretProps = React.useMemo(() => ({
+    onClick: () => {
+      inputRef.current.focus();
+      setMenuOpen(true);
+    }
+  }), []);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(DSMobileDropdownTriggerInput, {
+      inputProps: inputProps,
+      caretProps: caretProps
+    }), menuOpen ? /*#__PURE__*/_jsx(DSMobileContextMenu, {
+      title: title,
+      open: true,
+      onChange: (_, e) => {
+        setMenuOpen(false);
+      },
+      onClickOutside: () => setMenuOpen(false)
+    }, void 0, options.map((opt, i) => /*#__PURE__*/_jsx(DSMobileContextMenuItem, {
+      title: opt.label,
+      value: opt.value,
+      isSelected: itemsProps.isItemSelected(opt),
+      onClick: e => {
+        setMenuOpen(false);
+        itemsProps.onClick(opt, e);
+      },
+      label: itemsProps.label,
+      leftProp: itemsProps.leftProp,
+      isGroup: itemsProps.isGroup,
+      isMulti: itemsProps.isMulti,
+      singleSelect: itemsProps.singleSelect
+    }, 'ddwn'.concat("".concat(i))))) : null]
+  });
+};
+
+const props = {
+  /** dropdown menu placeholder */
+  placeholder: PropTypes.string.description('dropdown menu placeholder'),
+
+  /** context menu menu title */
+  title: PropTypes.string.description('context menu menu title'),
+
+  /** context menu options / items */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  })).description('context menu options / items')
+};
+const DSMobileDropdownMenuWithSchema = describe(DSMobileDropdownMenu);
+DSMobileDropdownMenuWithSchema.propTypes = props;
+
+export { DSMobileDropdownMenu, DSMobileDropdownMenuWithSchema };

package/esm/MobileDropdownMenu/index.js

@@ -0,0 +1,2 @@
+export { DSMobileDropdownMenu, DSMobileDropdownMenuWithSchema } from './MobileDropdownMenu.js';
+export { DSMobileDropdownTriggerInput } from './MobileDropdownInput.js';

package/esm/MobileEmtpyState/MobileEmptyState.js

@@ -0,0 +1,31 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { PropTypes, describe } from 'react-desc';
+import { Search } from '@elliemae/ds-icons';
+
+const Wrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1v2x6kj-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;"]);
+const Label = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-1v2x6kj-1"
+})(["color:", ";font-size:", ";font-weight:", ";min-width:132px;"], props => props.theme.colors.neutral['600'], props => props.theme.space.xs, props => props.theme.fontWeights.semibold);
+
+const DSMobileEmptyState = _ref => {
+  let {
+    label = 'No search results found.'
+  } = _ref;
+  return /*#__PURE__*/_jsx(Wrapper, {}, void 0, /*#__PURE__*/_jsx(Search, {
+    size: "xxl",
+    color: ['neutral', 400]
+  }), /*#__PURE__*/_jsx(Label, {}, void 0, label));
+};
+
+const props = {
+  /** empty state label */
+  label: PropTypes.string.description('empty state label')
+};
+const DSMobileEmptyStateWithSchema = describe(DSMobileEmptyState);
+DSMobileEmptyStateWithSchema.propTypes = props;
+
+export { DSMobileEmptyState, DSMobileEmptyStateWithSchema };

package/esm/MobileEmtpyState/index.js

@@ -0,0 +1,2 @@
+import { DSMobileEmptyState } from './MobileEmptyState.js';
+export { DSMobileEmptyState, DSMobileEmptyStateWithSchema, DSMobileEmptyState as default } from './MobileEmptyState.js';

package/esm/MobileFilterbar/Filterbar.js

@@ -0,0 +1,35 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { PropTypes, describe } from 'react-desc';
+import { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import { Grid } from '@elliemae/ds-grid';
+import MobileSeparator from '../MobileSeparator/Separator.js';
+
+const Bar = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-14ysw84-0"
+})(["display:flex;overflow:auto;background-color:", ";padding-left:", ";& > *{flex-shrink:0;}&::-webkit-scrollbar{display:none;}"], props => props.theme.colors.neutral['000'], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs));
+const Separator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-14ysw84-1"
+})(["& > *{margin:0;}"]);
+
+const DSMobileFilterbar = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Grid, {
+    rows: ['auto', 'auto'],
+    "data-testid": "filter-bar-wrapper"
+  }, void 0, /*#__PURE__*/_jsx(Bar, {}, void 0, children), /*#__PURE__*/_jsx(Separator, {}, void 0, /*#__PURE__*/_jsx(MobileSeparator, {
+    margin: "xxs",
+    color: ['neutral', '300']
+  })));
+};
+
+const filterbarProps = {
+  children: PropTypes.element.description('FilterBar Items').isRequired
+};
+const FilterbarWithSchema = describe(DSMobileFilterbar);
+FilterbarWithSchema.propTypes = filterbarProps;
+
+export { DSMobileFilterbar, FilterbarWithSchema };

package/esm/MobileFilterbar/FilterbarItem.js

@@ -0,0 +1,28 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import { Grid } from '@elliemae/ds-grid';
+
+const DSMobileFilterbarItem = _ref => {
+  let {
+    children,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_jsx(Grid, {
+    "data-testid": "filter-bar-item-wrapper",
+    cols: ['min-content'],
+    pr: "xxs",
+    pt: "xxs",
+    role: "button",
+    onClick: onClick
+  }, void 0, children);
+};
+
+const filterbarItemProps = {
+  children: PropTypes.element.description('FilterBar Items').isRequired,
+  onClick: PropTypes.func.description('Function executed when clicking filterbar item')
+};
+const FilterbarItemWithSchema = describe(DSMobileFilterbarItem);
+FilterbarItemWithSchema.propTypes = filterbarItemProps;
+
+export { DSMobileFilterbarItem, FilterbarItemWithSchema };

package/esm/MobileFilterbar/FilterbarSort.js

@@ -0,0 +1,36 @@
+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 MobileSeparator from '../MobileSeparator/Separator.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+const Separator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-103uq0b-0"
+})(["& > *{margin-left:0;}"]);
+
+const DSMobileFilterbarSort = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [children, /*#__PURE__*/_jsx(Grid, {
+      pb: "xxs",
+      pt: "xxs",
+      cols: ['min-content']
+    }, void 0, /*#__PURE__*/_jsx(Separator, {}, void 0, /*#__PURE__*/_jsx(MobileSeparator, {
+      margin: "xxs",
+      direction: "vertical",
+      color: ['neutral', '300']
+    })))]
+  });
+};
+
+const filterbarSortProps = {
+  children: PropTypes.element.description('FilterBar Sort Item').isRequired
+};
+const FilterbarSortWithSchema = describe(DSMobileFilterbarSort);
+FilterbarSortWithSchema.propTypes = filterbarSortProps;
+
+export { DSMobileFilterbarSort, FilterbarSortWithSchema };

package/esm/MobileFilterbar/index.js

@@ -0,0 +1,3 @@
+export { DSMobileFilterbar, FilterbarWithSchema } from './Filterbar.js';
+export { DSMobileFilterbarSort, FilterbarSortWithSchema } from './FilterbarSort.js';
+export { DSMobileFilterbarItem, FilterbarItemWithSchema } from './FilterbarItem.js';

package/esm/MobileFooter/Action.js

@@ -0,0 +1,51 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React from 'react';
+import styled from 'styled-components';
+import { typography } from '@xstyled/styled-components';
+import { color, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import { Grid } from '@elliemae/ds-grid';
+import { PropTypes, describe } from 'react-desc';
+
+const Label = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1op229o-0"
+})(["", " ", " padding-bottom:", ";padding-top:calc(", " / 2);"], typography, color('neutral', '800'), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs));
+
+const DSMobileFooterAction = _ref => {
+  let {
+    label,
+    icon,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_jsx(Grid, {
+    "data-testid": "ds-mobile-footer-action",
+    rows: ['auto'].concat(label ? 'min-content' : 'none'),
+    justifyContent: "center",
+    role: "button",
+    onClick: onClick
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    justifyContent: "center",
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/React.cloneElement(icon, {
+    'data-testid': 'ds-mobile-footer-action-icon',
+    size: !label ? 'l' : 'm'
+  })), label && /*#__PURE__*/_jsx(Grid, {
+    justifyContent: "center"
+  }, void 0, /*#__PURE__*/_jsx(Label, {
+    fontSize: "11px"
+  }, void 0, label)));
+};
+
+const actionProps = {
+  /** Action label */
+  label: PropTypes.string.description('Action label'),
+
+  /** Action icon */
+  icon: PropTypes.element.description('Action icon'),
+
+  /** onClick callback */
+  onClick: PropTypes.func.description('onClick callback')
+};
+const DSMobileFooterActionWithSchema = describe(DSMobileFooterAction).description('Mobile footer action');
+DSMobileFooterActionWithSchema.propTypes = actionProps;
+
+export { DSMobileFooterAction, DSMobileFooterActionWithSchema };

package/esm/MobileFooter/Footer.js

@@ -0,0 +1,55 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.constructor.js';
+import 'core-js/modules/esnext.async-iterator.to-array.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.to-array.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React from 'react';
+import styled from 'styled-components';
+import { border, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import { Grid } from '@elliemae/ds-grid';
+import DSButton from '@elliemae/ds-button';
+import { PropTypes, describe } from 'react-desc';
+import { DSMobileFooterText } from './Text.js';
+
+const FooterWrap = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-ls5vfg-0"
+})(["background-color:", ";border-top:", ";height:", ";"], props => props.theme.colors.neutral['000'], props => border(props.theme.colors.neutral[100]), props => "calc(".concat(__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), " * 7)"));
+
+const MobileFooter = _ref => {
+  let {
+    children
+  } = _ref;
+  const childArr = React.Children.toArray(children);
+  const isButtonType = childArr[0].type === DSMobileFooterText || childArr[0].type === DSButton;
+
+  const setCols = () => {
+    if (isButtonType) {
+      return childArr.length === 1 ? ['90%'] : ['45%', '45%'];
+    }
+
+    return childArr.map(() => "".concat(100 / childArr.length, "%"));
+  };
+
+  return /*#__PURE__*/_jsx(FooterWrap, {}, void 0, /*#__PURE__*/_jsx(Grid, {
+    cols: setCols(),
+    gutter: isButtonType ? 'xs' : undefined,
+    justifyContent: "center",
+    alignItems: isButtonType ? 'center' : undefined
+  }, void 0, childArr.map((c, i) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _jsx(Grid, {}, i, c))));
+};
+
+const footerProps = {
+  /**
+   * Instance of DSButton, DSMobileFooterText or DSMobileFooterAction
+   */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired.description('Instance of DSButton, DSMobileFooterText or DSMobileFooterAction')
+};
+const MobileFooterWithSchema = describe(MobileFooter);
+MobileFooterWithSchema.propTypes = footerProps;
+
+export { MobileFooterWithSchema, MobileFooter as default };

package/esm/MobileFooter/Text.js

@@ -0,0 +1,24 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { truncate, textStyle, color } from '@elliemae/ds-system';
+import { PropTypes, describe } from 'react-desc';
+
+const Text = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-1v0cqsw-0"
+})(["margin:auto 0;", " ", " ", ""], truncate(), textStyle('body'), color('neutral', '800'));
+
+const DSMobileFooterText = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Text, {}, void 0, children);
+};
+
+const props = {
+  children: PropTypes.string.isRequired.description('Children')
+};
+const DSMobileFooterTextWithSchema = describe(DSMobileFooterText);
+DSMobileFooterTextWithSchema.propTypes = props;
+
+export { DSMobileFooterText, DSMobileFooterTextWithSchema };

package/esm/MobileFooter/index.js

@@ -0,0 +1,3 @@
+export { default as DSMobileFooter, MobileFooterWithSchema } from './Footer.js';
+export { DSMobileFooterText, DSMobileFooterTextWithSchema } from './Text.js';
+export { DSMobileFooterAction, DSMobileFooterActionWithSchema } from './Action.js';

package/esm/MobileListItem/MobileListItem.js

@@ -0,0 +1,58 @@
+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, withTheme, __UNSAFE_SPACE_TO_DIMSUM, border } from '@elliemae/ds-system';
+
+const StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-n7r3qn-0"
+})(["background:", ";border-bottom:", ";"], props => props.theme.colors.neutral['000'], props => border(props.theme.colors.neutral['300']));
+const StyledTitle = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-n7r3qn-1"
+})(["font-weight:", ";font-size:13px;color:", ";", ""], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral['800'], truncate());
+
+const MobileListItem = _ref => {
+  let {
+    leftAddon = null,
+    rightAddon = null,
+    title = '',
+    value = '',
+    dataTestid = 'mobile-list-item',
+    theme
+  } = _ref;
+  const cols = [1];
+  if (leftAddon) cols.unshift(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));
+  if (rightAddon) cols.push(__UNSAFE_SPACE_TO_DIMSUM(theme.space.m));
+  return /*#__PURE__*/_jsx(StyledContainer, {
+    cols: cols,
+    height: theme.space.m,
+    width: "100%",
+    pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+    pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+    gutter: "xs",
+    "data-testid": "".concat(dataTestid, "--").concat(value)
+  }, void 0, leftAddon && /*#__PURE__*/_jsx(Grid, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, void 0, leftAddon), /*#__PURE__*/_jsx(Grid, {
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/_jsx(StyledTitle, {}, void 0, title)), rightAddon && /*#__PURE__*/_jsx(Grid, {
+    alignItems: "center",
+    justifyContent: "center"
+  }, void 0, rightAddon));
+};
+
+const DSMobileListItem = withTheme(MobileListItem);
+const listItemProps = {
+  leftAddon: PropTypes.element.description('Element placed at the left'),
+  rightAddon: PropTypes.element.description('Element placed at the right'),
+  title: PropTypes.string.description('Item s title').isRequired,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Item s value, used for data-testid attr'),
+  dataTestid: PropTypes.string.description('ID used for testing').defaultValue('mobile-list-item'),
+  theme: PropTypes.object.description('')
+};
+const ListItemWithSchema = describe(MobileListItem);
+ListItemWithSchema.propTypes = listItemProps;
+
+export { DSMobileListItem, ListItemWithSchema };

package/esm/MobileListItem/index.js

@@ -0,0 +1 @@
+export { DSMobileListItem, ListItemWithSchema } from './MobileListItem.js';

package/esm/MobilePageHeader/MobilePageHeader.js

@@ -0,0 +1,162 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { useMemo, useState, useCallback } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import styled from 'styled-components';
+import { TruncatedExpandableText } from '@elliemae/ds-truncated-expandable-text';
+import { Grid } from '@elliemae/ds-grid';
+import { truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM, border } from '@elliemae/ds-system';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import MobileSeparator from '../MobileSeparator/Separator.js';
+
+var _ChevronSmallDown;
+const StyledTitle = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1tfu1y9-0"
+})(["font-size:22px;font-weight:", ";color:", ";min-height:", ";padding-top:", ";"], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['700'], props => props.withBreadcrumb ? 'auto' : '44px', props => props.withBreadcrumb ? '0' : '6px');
+const StyledBreadCrumb = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1tfu1y9-1"
+})(["font-size:16px;font-weight:", ";color:", ";", ""], props => props.theme.fontWeights.regular, props => props.theme.colors.neutral['600'], truncate());
+const Label = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1tfu1y9-2"
+})(["color:", ";", ""], props => props.theme.colors.neutral['500'], truncate());
+const Value = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1tfu1y9-3"
+})(["", " color:", ";", " margin-top:", ";"], truncate(), props => props.theme.colors.neutral['600'], props => props.withMarginRight ? "margin-right: 4px;" : '', props => props.withBreadcrumb ? '12px' : '0');
+const Wrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1tfu1y9-4"
+})(["border-bottom:", ";"], props => border(props.theme.colors.neutral['300']));
+
+const MobilePageHeader = _ref => {
+  let {
+    pageTitle = null,
+    contextMenu = null,
+    firstAction = null,
+    secondAction = null,
+    backArrow = null,
+    breadCrumb = null,
+    onOpenContextMenu = () => null,
+    value,
+    label,
+    theme
+  } = _ref;
+  const hasValue = value === 0 || value;
+  const countActions = useMemo(() => {
+    let count = 0;
+    if (firstAction) count++;
+    if (secondAction) count++;
+    return count;
+  }, [firstAction, secondAction]);
+  const [open, setOpen] = useState();
+  const handleContext = useCallback(() => {
+    setOpen(!open);
+  }, [open]);
+
+  const separator = /*#__PURE__*/_jsx(Grid, {
+    height: "32px",
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    height: "24px"
+  }, void 0, /*#__PURE__*/_jsx(MobileSeparator, {
+    direction: "vertical",
+    margin: "xxs",
+    color: ['neutral', '300']
+  })));
+
+  const cols = [1, 'auto'];
+  const cols2 = ['auto'];
+  if (countActions) cols.push('auto');
+  if (hasValue) cols2.push('auto');
+  if (label) cols2.push('auto');
+  return /*#__PURE__*/_jsx(Wrapper, {
+    cols: cols,
+    pl: theme.space.xs,
+    pr: theme.space.xs,
+    alignItems: "flex-start",
+    width: "100%",
+    "data-testid": "page-header-wrapper"
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    alignItems: "flex-start",
+    justifyContent: "flex-start",
+    cols: cols2
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    cols: backArrow ? ['auto', 1] : [1],
+    alignItems: "flex-start",
+    pr: countActions === 0 && !hasValue && !label ? __UNSAFE_SPACE_TO_DIMSUM(theme.space.s) : 0
+  }, void 0, backArrow && /*#__PURE__*/_jsx(Grid, {
+    height: breadCrumb ? '56px' : '44px',
+    alignItems: "center"
+  }, void 0, backArrow), /*#__PURE__*/_jsx(Grid, {
+    flexGrow: 0,
+    pt: !breadCrumb ? 0 : theme.space.xxs
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    cols: ['auto', 'auto'],
+    alignItems: "flex-start"
+  }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, breadCrumb && /*#__PURE__*/_jsx(StyledBreadCrumb, {
+    "data-testid": "page-header-breadcrum"
+  }, void 0, breadCrumb), /*#__PURE__*/_jsx(StyledTitle, {
+    maxWidth: "100%",
+    alignItems: "flex-start",
+    withBreadcrumb: !!breadCrumb,
+    "data-testid": "page-header-title"
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    pt: breadCrumb ? 0 : theme.space.xxxs
+  }, void 0, /*#__PURE__*/_jsx(TruncatedExpandableText, {
+    value: pageTitle
+  })))), contextMenu && /*#__PURE__*/_jsx(Grid, {
+    alignItems: "center",
+    mt: breadCrumb ? '20px' : '8px'
+  }, void 0, /*#__PURE__*/_jsx(DSButton, {
+    buttonType: "text",
+    icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
+    size: "s",
+    onClick: () => {
+      handleContext();
+      onOpenContextMenu();
+    },
+    containerProps: {
+      'data-testid': 'trigger-context-menu'
+    }
+  }), /*#__PURE__*/React.cloneElement(contextMenu, {
+    open: contextMenu.props.open !== undefined ? contextMenu.props.open : open,
+    onChange: (event, item) => {
+      if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);
+      handleContext();
+    }
+  }))))), hasValue && /*#__PURE__*/_jsx(Grid, {
+    height: breadCrumb ? '56px' : '44px',
+    alignItems: "center",
+    cols: ['auto', 'auto']
+  }, void 0, separator, /*#__PURE__*/_jsx(Value, {
+    withMarginRight: !!label,
+    "data-testid": "page-header-value"
+  }, void 0, value)), label && /*#__PURE__*/_jsx(Grid, {
+    height: breadCrumb ? '56px' : '44px',
+    alignItems: "center"
+  }, void 0, /*#__PURE__*/_jsx(Label, {
+    withBreadcrumb: !!breadCrumb,
+    "data-testid": "page-header-label"
+  }, void 0, label))), countActions > 0 && /*#__PURE__*/_jsx(Grid, {
+    height: breadCrumb ? '56px' : '44px',
+    alignItems: "center",
+    cols: countActions === 1 ? ['auto'] : ['auto', 'auto', 'auto']
+  }, void 0, firstAction && /*#__PURE__*/_jsx(Grid, {}, void 0, firstAction), countActions === 2 && separator, secondAction && /*#__PURE__*/_jsx(Grid, {}, void 0, secondAction)));
+};
+
+const pageHeaderProps = {
+  pageTitle: PropTypes.string.description('Page title').isRequired,
+  contextMenu: PropTypes.element.description('Context Menu to open'),
+  onOpenContextMenu: PropTypes.func.description('function called when context menu opens'),
+  firstAction: PropTypes.element.description('Action Button'),
+  secondAction: PropTypes.element.description('Action Button'),
+  backArrow: PropTypes.element.description('Back Arrow Button'),
+  breadCrumb: PropTypes.string.description('BreadCrumbs title'),
+  value: PropTypes.number.description('Page summary value'),
+  label: PropTypes.string.description('Page summary label'),
+  theme: PropTypes.object.description('dimsum theme')
+};
+const PageHeaderWithSchema = describe(MobilePageHeader);
+PageHeaderWithSchema.propTypes = pageHeaderProps;
+const DSMobilePageHeader = withTheme(MobilePageHeader);
+
+export { DSMobilePageHeader, PageHeaderWithSchema };

package/esm/MobilePageHeader/index.js

@@ -0,0 +1 @@
+export { DSMobilePageHeader, PageHeaderWithSchema } from './MobilePageHeader.js';