@elliemae/ds-mobile 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/MobileFooter/Text.js

@@ -1,23 +1,24 @@
-import * as React from "react";
-import React2 from "react";
-import styled from "styled-components";
-import { textStyle, truncate, color } from "@elliemae/ds-system";
-import { describe, PropTypes } from "react-desc";
-const Text = styled.p`
-  margin: auto 0;
-  ${truncate()}
-  ${textStyle("body")}
-  ${color("neutral", "800")}
-`;
-const DSMobileFooterText = ({ children }) => /* @__PURE__ */ React2.createElement(Text, null, children);
+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")
+  children: PropTypes.string.isRequired.description('Children')
 };
-DSMobileFooterText.propTypes = props;
 const DSMobileFooterTextWithSchema = describe(DSMobileFooterText);
 DSMobileFooterTextWithSchema.propTypes = props;
-export {
-  DSMobileFooterText,
-  DSMobileFooterTextWithSchema
-};
-//# sourceMappingURL=Text.js.map
+
+export { DSMobileFooterText, DSMobileFooterTextWithSchema };

package/esm/MobileFooter/index.js

@@ -1,13 +1,3 @@
-import * as React from "react";
-import DSMobileFooter, { MobileFooterWithSchema } from "./Footer";
-import { DSMobileFooterText, DSMobileFooterTextWithSchema } from "./Text";
-import { DSMobileFooterAction, DSMobileFooterActionWithSchema } from "./Action";
-export {
-  DSMobileFooter,
-  DSMobileFooterAction,
-  DSMobileFooterActionWithSchema,
-  DSMobileFooterText,
-  DSMobileFooterTextWithSchema,
-  MobileFooterWithSchema
-};
-//# sourceMappingURL=index.js.map
+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

@@ -1,64 +1,58 @@
-import * as React from "react";
-import React2 from "react";
-import { describe, PropTypes } from "react-desc";
-import styled from "styled-components";
-import { Grid } from "@elliemae/ds-grid";
-import { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-const StyledContainer = styled(Grid)`
-  background: ${(props) => props.theme.colors.neutral["000"]};
-  border-bottom: ${(props) => border(props.theme.colors.neutral["300"])};
-`;
-const StyledTitle = styled.div`
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  font-size: 13px;
-  color: ${(props) => props.theme.colors.neutral["800"]};
-  ${truncate()}
-`;
-const MobileListItem = ({
-  leftAddon = null,
-  rightAddon = null,
-  title = "",
-  value = "",
-  dataTestid = "mobile-list-item",
-  theme
-}) => {
+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__ */ React2.createElement(StyledContainer, {
-    cols,
+  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": `${dataTestid}--${value}`
-  }, leftAddon && /* @__PURE__ */ React2.createElement(Grid, {
+    "data-testid": "".concat(dataTestid, "--").concat(value)
+  }, void 0, leftAddon && /*#__PURE__*/_jsx(Grid, {
     alignItems: "center",
     justifyContent: "center"
-  }, leftAddon), /* @__PURE__ */ React2.createElement(Grid, {
+  }, void 0, leftAddon), /*#__PURE__*/_jsx(Grid, {
     alignItems: "center"
-  }, /* @__PURE__ */ React2.createElement(StyledTitle, null, title)), rightAddon && /* @__PURE__ */ React2.createElement(Grid, {
+  }, void 0, /*#__PURE__*/_jsx(StyledTitle, {}, void 0, title)), rightAddon && /*#__PURE__*/_jsx(Grid, {
     alignItems: "center",
     justifyContent: "center"
-  }, rightAddon));
+  }, 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("")
+  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('')
 };
-MobileListItem.propTypes = listItemProps;
 const ListItemWithSchema = describe(MobileListItem);
 ListItemWithSchema.propTypes = listItemProps;
-export {
-  DSMobileListItem,
-  ListItemWithSchema
-};
-//# sourceMappingURL=MobileListItem.js.map
+
+export { DSMobileListItem, ListItemWithSchema };

package/esm/MobileListItem/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "./MobileListItem";
-//# sourceMappingURL=index.js.map
+export { DSMobileListItem, ListItemWithSchema } from './MobileListItem.js';

package/esm/MobilePageHeader/MobilePageHeader.js

@@ -1,173 +1,162 @@
-import * as React from "react";
-import React2, { useMemo, useState, useCallback } from "react";
-import { describe, PropTypes } from "react-desc";
-import styled from "styled-components";
-import { TruncatedExpandableText } from "@elliemae/ds-truncated-expandable-text";
-import { Grid } from "@elliemae/ds-grid";
-import { border, truncate, withTheme, __UNSAFE_SPACE_TO_DIMSUM } from "@elliemae/ds-system";
-import { ChevronSmallDown } from "@elliemae/ds-icons";
-import DSButton from "@elliemae/ds-button";
-import MobileSeparator from "../MobileSeparator";
-const StyledTitle = styled(Grid)`
-  font-size: 22px;
-  font-weight: ${(props) => props.theme.fontWeights.regular};
-  color: ${(props) => props.theme.colors.neutral["700"]};
-  min-height: ${(props) => props.withBreadcrumb ? "auto" : "44px"};
-  padding-top: ${(props) => props.withBreadcrumb ? "0" : "6px"};
-`;
-const StyledBreadCrumb = styled.div`
-  font-size: 16px;
-  font-weight: ${(props) => props.theme.fontWeights.regular};
-  color: ${(props) => props.theme.colors.neutral["600"]};
-  ${truncate()}
-`;
-const Label = styled.div`
-  color: ${(props) => props.theme.colors.neutral["500"]};
-  ${truncate()}
-`;
-const Value = styled.div`
-  ${truncate()}
-  color: ${(props) => props.theme.colors.neutral["600"]};
-  ${(props) => props.withMarginRight ? `margin-right: 4px;` : ""}
-  margin-top: ${(props) => props.withBreadcrumb ? "12px" : "0"};
-`;
-const Wrapper = styled(Grid)`
-  border-bottom: ${(props) => border(props.theme.colors.neutral["300"])};
-`;
-const MobilePageHeader = ({
-  pageTitle = null,
-  contextMenu = null,
-  firstAction = null,
-  secondAction = null,
-  backArrow = null,
-  breadCrumb = null,
-  onOpenContextMenu = () => null,
-  value,
-  label,
-  theme
-}) => {
+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++;
+    if (firstAction) count++;
+    if (secondAction) count++;
     return count;
   }, [firstAction, secondAction]);
   const [open, setOpen] = useState();
   const handleContext = useCallback(() => {
     setOpen(!open);
   }, [open]);
-  const separator = /* @__PURE__ */ React2.createElement(Grid, {
+
+  const separator = /*#__PURE__*/_jsx(Grid, {
     height: "32px",
     alignItems: "center"
-  }, /* @__PURE__ */ React2.createElement(Grid, {
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
     height: "24px"
-  }, /* @__PURE__ */ React2.createElement(MobileSeparator, {
+  }, void 0, /*#__PURE__*/_jsx(MobileSeparator, {
     direction: "vertical",
     margin: "xxs",
-    color: ["neutral", "300"]
+    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__ */ React2.createElement(Wrapper, {
-    cols,
+
+  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"
-  }, /* @__PURE__ */ React2.createElement(Grid, {
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
     alignItems: "flex-start",
     justifyContent: "flex-start",
     cols: cols2
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    cols: backArrow ? ["auto", 1] : [1],
+  }, 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
-  }, backArrow && /* @__PURE__ */ React2.createElement(Grid, {
-    height: breadCrumb ? "56px" : "44px",
+  }, void 0, backArrow && /*#__PURE__*/_jsx(Grid, {
+    height: breadCrumb ? '56px' : '44px',
     alignItems: "center"
-  }, backArrow), /* @__PURE__ */ React2.createElement(Grid, {
+  }, void 0, backArrow), /*#__PURE__*/_jsx(Grid, {
     flexGrow: 0,
     pt: !breadCrumb ? 0 : theme.space.xxs
-  }, /* @__PURE__ */ React2.createElement(Grid, {
-    cols: ["auto", "auto"],
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    cols: ['auto', 'auto'],
     alignItems: "flex-start"
-  }, /* @__PURE__ */ React2.createElement(Grid, null, breadCrumb && /* @__PURE__ */ React2.createElement(StyledBreadCrumb, {
+  }, void 0, /*#__PURE__*/_jsx(Grid, {}, void 0, breadCrumb && /*#__PURE__*/_jsx(StyledBreadCrumb, {
     "data-testid": "page-header-breadcrum"
-  }, breadCrumb), /* @__PURE__ */ React2.createElement(StyledTitle, {
+  }, void 0, breadCrumb), /*#__PURE__*/_jsx(StyledTitle, {
     maxWidth: "100%",
     alignItems: "flex-start",
     withBreadcrumb: !!breadCrumb,
     "data-testid": "page-header-title"
-  }, /* @__PURE__ */ React2.createElement(Grid, {
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
     pt: breadCrumb ? 0 : theme.space.xxxs
-  }, /* @__PURE__ */ React2.createElement(TruncatedExpandableText, {
+  }, void 0, /*#__PURE__*/_jsx(TruncatedExpandableText, {
     value: pageTitle
-  })))), contextMenu && /* @__PURE__ */ React2.createElement(Grid, {
+  })))), contextMenu && /*#__PURE__*/_jsx(Grid, {
     alignItems: "center",
-    mt: breadCrumb ? "20px" : "8px"
-  }, /* @__PURE__ */ React2.createElement(DSButton, {
+    mt: breadCrumb ? '20px' : '8px'
+  }, void 0, /*#__PURE__*/_jsx(DSButton, {
     buttonType: "text",
-    icon: /* @__PURE__ */ React2.createElement(ChevronSmallDown, null),
+    icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
     size: "s",
     onClick: () => {
       handleContext();
       onOpenContextMenu();
     },
-    containerProps: { "data-testid": "trigger-context-menu" }
-  }), React2.cloneElement(contextMenu, {
-    open: contextMenu.props.open !== void 0 ? contextMenu.props.open : open,
+    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);
+      if (contextMenu.props.onChange) contextMenu.props.onChange(event, item);
       handleContext();
     }
-  }))))), hasValue && /* @__PURE__ */ React2.createElement(Grid, {
-    height: breadCrumb ? "56px" : "44px",
+  }))))), hasValue && /*#__PURE__*/_jsx(Grid, {
+    height: breadCrumb ? '56px' : '44px',
     alignItems: "center",
-    cols: ["auto", "auto"]
-  }, separator, /* @__PURE__ */ React2.createElement(Value, {
+    cols: ['auto', 'auto']
+  }, void 0, separator, /*#__PURE__*/_jsx(Value, {
     withMarginRight: !!label,
     "data-testid": "page-header-value"
-  }, value)), label && /* @__PURE__ */ React2.createElement(Grid, {
-    height: breadCrumb ? "56px" : "44px",
+  }, void 0, value)), label && /*#__PURE__*/_jsx(Grid, {
+    height: breadCrumb ? '56px' : '44px',
     alignItems: "center"
-  }, /* @__PURE__ */ React2.createElement(Label, {
+  }, void 0, /*#__PURE__*/_jsx(Label, {
     withBreadcrumb: !!breadCrumb,
     "data-testid": "page-header-label"
-  }, label))), countActions > 0 && /* @__PURE__ */ React2.createElement(Grid, {
-    height: breadCrumb ? "56px" : "44px",
+  }, void 0, label))), countActions > 0 && /*#__PURE__*/_jsx(Grid, {
+    height: breadCrumb ? '56px' : '44px',
     alignItems: "center",
-    cols: countActions === 1 ? ["auto"] : ["auto", "auto", "auto"]
-  }, firstAction && /* @__PURE__ */ React2.createElement(Grid, null, firstAction), countActions === 2 && separator, secondAction && /* @__PURE__ */ React2.createElement(Grid, null, secondAction)));
+    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")
+  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')
 };
-MobilePageHeader.propTypes = pageHeaderProps;
 const PageHeaderWithSchema = describe(MobilePageHeader);
 PageHeaderWithSchema.propTypes = pageHeaderProps;
 const DSMobilePageHeader = withTheme(MobilePageHeader);
-export {
-  DSMobilePageHeader,
-  PageHeaderWithSchema
-};
-//# sourceMappingURL=MobilePageHeader.js.map
+
+export { DSMobilePageHeader, PageHeaderWithSchema };

package/esm/MobilePageHeader/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "./MobilePageHeader";
-//# sourceMappingURL=index.js.map
+export { DSMobilePageHeader, PageHeaderWithSchema } from './MobilePageHeader.js';