@elliemae/ds-mobile 1.60.0 → 2.0.0-alpha.12

package/cjs/MobileCard/ExpandableRegion.js

@@ -2,76 +2,55 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-var PropTypes = require('prop-types');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var RegionWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+const RegionWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-mduzz9-0"
 })(["width:100%;height:100%;"]);
-var Region = /*#__PURE__*/styled__default['default'].div.withConfig({
+const Region = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-mduzz9-1"
-})(["display:flex;", " transition:max-height ", " linear;max-height:0;", " align-items:center;", ";border-top:", ";font-weight:", ";"], function (props) {
-  return props.hide ? 'visibility: hidden;' : '';
-}, function (props) {
-  return props.animate ? '0.25s' : '0.20s';
-}, function (props) {
-  return props.animate ? "\n      max-height: ".concat(props.refHeight, "px;\n    ") : '';
-}, dsSystem.truncate(), function (props) {
-  return dsSystem.border(props.theme.colors.neutral['300']);
-}, function (props) {
-  return props.theme.fontWeights.regular;
-});
-var ExpandableRegion = function ExpandableRegion(_ref) {
+})(["display:flex;", " transition:max-height ", " linear;max-height:0;", " align-items:center;", ";border-top:", ";font-weight:", ";"], props => props.hide ? 'visibility: hidden;' : '', props => props.animate ? '0.25s' : '0.20s', props => props.animate ? "\n      max-height: ".concat(props.refHeight, "px;\n    ") : '', dsSystem.truncate(), props => dsSystem.border(props.theme.colors.neutral['300']), props => props.theme.fontWeights.regular);
+const ExpandableRegion = _ref => {
   var _ref$current;
 
-  var show = _ref.show,
-      content = _ref.content;
-  var ref = React.useRef(null); // triggers transition
+  let {
+    show,
+    content
+  } = _ref;
+  const ref = React.useRef(null); // triggers transition
 
-  var _useState = React.useState(show),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      animate = _useState2[0],
-      setAnimate = _useState2[1]; // needed to properly handle the transition. Hide after transition ends
+  const [animate, setAnimate] = React.useState(show); // needed to properly handle the transition. Hide after transition ends
 
-
-  var _useState3 = React.useState(!show),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      hide = _useState4[0],
-      setHide = _useState4[1];
-
-  React.useEffect(function () {
+  const [hide, setHide] = React.useState(!show);
+  React.useEffect(() => {
     setAnimate(show);
     if (show) setHide(false);
   }, [show]);
 
-  var hideOnAnimationEnd = function hideOnAnimationEnd() {
+  const hideOnAnimationEnd = () => {
     if (!show) setHide(true);
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Region, {
+  return /*#__PURE__*/_jsx__default["default"](Region, {
     hide: hide // needed to handle transition, `auto` max-height isn't supported
     ,
     refHeight: (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 9999,
     onTransitionEnd: hideOnAnimationEnd,
     animate: animate
-  }, /*#__PURE__*/React__default['default'].createElement(RegionWrapper, {
-    ref: ref
-  }, content));
-};
-ExpandableRegion.propTypes = {
-  show: PropTypes__default['default'].bool,
-  content: PropTypes__default['default'].element
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(RegionWrapper, {
+    ref: ref,
+    children: content
+  }));
 };
 
 exports.ExpandableRegion = ExpandableRegion;
-//# sourceMappingURL=ExpandableRegion.js.map

package/cjs/MobileCard/Group.js

@@ -2,83 +2,68 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
 var Group = require('@elliemae/ds-shared/GroupContext/Group');
 var dsGrid = require('@elliemae/ds-grid');
 var dsSystem = require('@elliemae/ds-system');
-var MobileCard_StyledCard = require('./StyledCard.js');
+var StyledCard = require('./StyledCard.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Group__default = /*#__PURE__*/_interopDefaultLegacy(Group);
 
-/* eslint-disable react/no-array-index-key */
-var GroupGrid = /*#__PURE__*/styled__default['default'](dsGrid.Grid).withConfig({
+const GroupGrid = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
   componentId: "sc-17xukaf-0"
-})(["", "{border-top:none;}", ""], MobileCard_StyledCard.StyledCard, function (_ref) {
-  var theme = _ref.theme,
-      withTopBorder = _ref.withTopBorder;
+})(["", "{border-top:none;}", ""], StyledCard.StyledCard, _ref => {
+  let {
+    theme,
+    withTopBorder
+  } = _ref;
   return withTopBorder ? "border-top: ".concat(dsSystem.border(theme.colors.neutral['100'])) : '';
 });
-var GroupTitle = /*#__PURE__*/styled__default['default'].span.withConfig({
+const GroupTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-17xukaf-1"
 })(["", ""], dsSystem.truncate());
-var GroupTitleGrid = /*#__PURE__*/styled__default['default'].div.withConfig({
+const GroupTitleGrid = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-17xukaf-2"
-})(["display:flex;justify-content:space-between;padding:0 ", ";font-size:", ";", " font-weight:", ";background-color:", ";border-top:", ";line-height:", ";@media (min-width:1024px){background-color:", ";border-top:", ";}"], function (props) {
-  return props.theme.space.xs;
-}, function (props) {
-  return "calc(".concat(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), " / 2)");
-}, dsSystem.color('neutral', '700'), function (props) {
-  return props.theme.fontWeights.semibold;
-}, function (props) {
-  return props.theme.colors.brand['200'];
-}, function (props) {
-  return dsSystem.border(props.theme.colors.brand['300']);
-}, function (props) {
-  return dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m);
-}, function (props) {
-  return props.theme.colors.neutral['080'];
-}, function (props) {
-  return dsSystem.border(props.theme.colors.neutral['080']);
-});
+})(["display:flex;justify-content:space-between;padding:0 ", ";font-size:", ";", " font-weight:", ";background-color:", ";border-top:", ";line-height:", ";@media (min-width:1024px){background-color:", ";border-top:", ";}"], props => props.theme.space.xs, props => "calc(".concat(dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), " / 2)"), dsSystem.color('neutral', '700'), props => props.theme.fontWeights.semibold, props => props.theme.colors.brand['200'], props => dsSystem.border(props.theme.colors.brand['300']), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m), props => props.theme.colors.neutral['080'], props => dsSystem.border(props.theme.colors.neutral['080']));
 
-var MobileCardGroup = function MobileCardGroup(_ref2) {
-  var children = _ref2.children,
-      theme = _ref2.theme,
-      title = _ref2.title,
-      action = _ref2.action,
-      activeValue = _ref2.activeValue,
-      _ref2$allowMultipleOp = _ref2.allowMultipleOpen,
-      allowMultipleOpen = _ref2$allowMultipleOp === void 0 ? false : _ref2$allowMultipleOp,
-      _ref2$onChange = _ref2.onChange,
-      onChange = _ref2$onChange === void 0 ? function () {
-    return null;
-  } : _ref2$onChange;
-  var rows = !title ? ['auto'] : [dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
-  return /*#__PURE__*/React__default['default'].createElement(Group__default['default'], {
+const MobileCardGroup = _ref2 => {
+  let {
+    children,
+    theme,
+    title,
+    action,
+    activeValue,
+    allowMultipleOpen = false,
+    onChange = () => null
+  } = _ref2;
+  const rows = !title ? ['auto'] : [dsSystem.__UNSAFE_SPACE_TO_DIMSUM(theme.space.m), 'auto'];
+  return /*#__PURE__*/_jsx__default["default"](Group__default["default"], {
     activeValue: activeValue,
     multiple: allowMultipleOpen,
     onChange: onChange
-  }, /*#__PURE__*/React__default['default'].createElement(GroupGrid, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](GroupGrid, {
     withTopBorder: !title,
     rows: rows
-  }, !!title && /*#__PURE__*/React__default['default'].createElement(GroupTitleGrid, {
+  }, void 0, !!title && /*#__PURE__*/_jsx__default["default"](GroupTitleGrid, {
     pl: "xxs"
-  }, /*#__PURE__*/React__default['default'].createElement(GroupTitle, null, title), action), /*#__PURE__*/React__default['default'].createElement(dsGrid.Grid, null, React__default['default'].Children.map(children, function (child, idx) {
-    return /*#__PURE__*/React__default['default'].cloneElement(child, {
-      key: idx,
-      value: idx,
-      idx: idx
-    });
-  }, null))));
+  }, void 0, /*#__PURE__*/_jsx__default["default"](GroupTitle, {}, void 0, title), action), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {}, void 0, React__default["default"].Children.map(children, (child, idx) => /*#__PURE__*/React__default["default"].cloneElement(child, {
+    key: idx,
+    value: idx,
+    idx
+  }), null))));
 };
 
-var props = {
+const props = {
   theme: reactDesc.PropTypes.object.isRequired.description(''),
 
   /**
@@ -105,11 +90,9 @@ var props = {
   /**  */
   onChange: reactDesc.PropTypes.func.description('')
 };
-MobileCardGroup.propTypes = props;
-var DSMobileCardGroupWithSchema = reactDesc.describe(MobileCardGroup);
+const DSMobileCardGroupWithSchema = reactDesc.describe(MobileCardGroup);
 DSMobileCardGroupWithSchema.propTypes = props;
 var MobileGroup = dsSystem.withTheme(MobileCardGroup);
 
 exports.DSMobileCardGroupWithSchema = DSMobileCardGroupWithSchema;
-exports['default'] = MobileGroup;
-//# sourceMappingURL=Group.js.map
+exports["default"] = MobileGroup;

package/cjs/MobileCard/StyledCard.js

@@ -9,15 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var StyledCard = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledCard = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-28g2t3-0"
-})(["display:flex;align-items:center;height:fit-content;min-height:", ";border:", ";border-bottom:", ";"], function (props) {
-  return props.minHeight;
-}, function (props) {
-  return dsSystem.border(props.theme.colors.neutral['100']);
-}, function (props) {
-  return dsSystem.border('.5px', props.theme.colors.neutral['500']);
-});
+})(["display:flex;align-items:center;height:fit-content;min-height:", ";border:", ";border-bottom:", ";"], props => props.minHeight, props => dsSystem.border(props.theme.colors.neutral['100']), props => dsSystem.border('.5px', props.theme.colors.neutral['500']));
 
 exports.StyledCard = StyledCard;
-//# sourceMappingURL=StyledCard.js.map

package/cjs/MobileCard/index.js

@@ -2,35 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var MobileCard_Card = require('./Card.js');
-var MobileCard_Group = require('./Group.js');
-var MobileCard_ActionAddon = require('./ActionAddon.js');
-var MobileCard_CardIcons = require('./CardIcons.js');
-require('react');
-require('react-desc');
-require('styled-components');
-require('styled-system');
-require('@elliemae/ds-system');
-require('@elliemae/ds-shared/GroupContext/GroupItem');
-require('@elliemae/ds-grid');
-require('./StyledCard.js');
-require('./ExpandChevron.js');
-require('prop-types');
-require('@elliemae/ds-icons');
-require('./useHeight.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('polished');
-require('./ExpandableRegion.js');
-require('@elliemae/ds-shared/GroupContext/Group');
-require('@elliemae/ds-button');
+var Card = require('./Card.js');
+var Group = require('./Group.js');
+var ActionAddon = require('./ActionAddon.js');
+var CardIcons = require('./CardIcons.js');
 
-MobileCard_Card['default'].Group = MobileCard_Group['default'];
-var DSMobileCard = MobileCard_Card['default'];
+Card["default"].Group = Group["default"];
+const DSMobileCard = Card["default"];
 
-exports.DSMobileCardWithSchema = MobileCard_Card.DSMobileCardWithSchema;
-exports.default = MobileCard_Card['default'];
-exports.DSMobileCardGroupWithSchema = MobileCard_Group.DSMobileCardGroupWithSchema;
-exports.ActionAddon = MobileCard_ActionAddon.ActionAddon;
-exports.SubIcons = MobileCard_CardIcons.SubIcons;
+exports.DSMobileCardWithSchema = Card.DSMobileCardWithSchema;
+exports["default"] = Card["default"];
+exports.DSMobileCardGroupWithSchema = Group.DSMobileCardGroupWithSchema;
+exports.ActionAddon = ActionAddon.ActionAddon;
+exports.SubIcons = CardIcons.SubIcons;
 exports.DSMobileCard = DSMobileCard;
-//# sourceMappingURL=index.js.map

package/cjs/MobileCard/props.js

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+
+const cardPropsTypes = {
+  /**
+   * card height
+   */
+  height: reactDesc.PropTypes.oneOf(['s', 'm']).description('card height'),
+
+  /**
+   * Defines mobile card title
+   */
+  children: reactDesc.PropTypes.string.description('Defines mobile card title').isRequired,
+
+  /**
+   * Wheter if the card is expandable or not
+   */
+  expandable: reactDesc.PropTypes.bool.description('Wheter if the card is expandable or not'),
+
+  /**
+   * content to display in expand card section
+   */
+  expandedContent: reactDesc.PropTypes.element.description('content to display in expand card section'),
+
+  /**
+   * Icon to the left of the card. Size is adjusted automatically.
+   */
+  leftAddOn: reactDesc.PropTypes.element.description('Icon to the left of the card. Size is adjusted automatically.'),
+
+  /**
+   * Pass an element to render left. For example a Button with an icon
+   */
+  leftProp: reactDesc.PropTypes.element.description('Pass an element to render left. For example a Button with an icon'),
+
+  /**
+   * Pass an array of 1 or 2 elements to render right. For example a Button with an icon
+   */
+  rightProp: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.element).description('Pass an array of 1 or 2 elements to render right. For example a Button with an icon'),
+
+  /**
+   * Pass an array of 1 or 2 strings
+   */
+  subText: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Pass an array of 1 or 2 strings'),
+
+  /**
+   * SubIcons component
+   */
+  subIcons: reactDesc.PropTypes.element.description('SubIcons component'),
+
+  /**
+   * Pass an array of 1, 2 or 3 strings
+   */
+  details: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Pass an array of 1, 2 or 3 strings'),
+  theme: reactDesc.PropTypes.object.description('').isRequired,
+  value: reactDesc.PropTypes.number.description(''),
+  cardContent: reactDesc.PropTypes.node.description('JSX content for the card')
+};
+
+exports.cardPropsTypes = cardPropsTypes;

package/cjs/MobileCard/useHeight.js

@@ -2,33 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var polished = require('polished');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-
 function getCurrentFont() {
   return Number(window.getComputedStyle(document.querySelector(':root')).getPropertyValue('font-size').match(/\d+/)[0]);
 }
 
 function useHeight(ref) {
-  var _useState = React.useState('0rem'),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      height = _useState2[0],
-      setHeight = _useState2[1];
-
-  var _useState3 = React.useState(13),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      currentFont = _useState4[0],
-      setCurrentFont = _useState4[1];
-
-  React.useEffect(function () {
+  const [height, setHeight] = React.useState('0rem');
+  const [currentFont, setCurrentFont] = React.useState(13);
+  React.useEffect(() => {
     setCurrentFont(getCurrentFont());
   }, []);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (ref.current && height !== polished.rem(ref.current.clientHeight, currentFont)) {
       setHeight(polished.rem(ref.current.clientHeight, currentFont));
     }
@@ -37,4 +25,3 @@ function useHeight(ref) {
 }
 
 exports.useHeight = useHeight;
-//# sourceMappingURL=useHeight.js.map