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

package/esm/MobileSelectList/MobileSelectList.js

@@ -0,0 +1,135 @@
+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 '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.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import React, { useState, useEffect } from 'react';
+import { noop } from 'lodash';
+import { Grid } from '@elliemae/ds-grid';
+import { DSTextBox } from '@elliemae/ds-form';
+import { withTheme, op, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import { DSMobileTouchable } from '../MobileTouchable/MobileTouchable.js';
+import { StyledContainer, HeaderContainer, ListContainer, Footer, checked, checkbox, selectedMark } from './styled.js';
+import { jsx, Fragment } 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 MobileSelectList = _ref => {
+  let {
+    open = false,
+    header = null,
+    multiple = false,
+    onChange = noop,
+    children,
+    theme,
+    zIndex = 1,
+    useSearch,
+    onSearch = noop,
+    dataTestid = 'mobile-select-list',
+    buttonFooter = null,
+    onApply = noop,
+    selecteds: initSelecteds = []
+  } = _ref;
+  const rows = ['auto', 1];
+  const [selecteds, setSelected] = useState(initSelecteds);
+  const [filter, setFilter] = useState('');
+  useEffect(() => {
+    setSelected(initSelecteds);
+  }, [initSelecteds]);
+
+  const handleSelection = value => {
+    if (multiple) {
+      const index = selecteds.findIndex(s => s === value);
+      if (index > -1) setSelected(selecteds.filter(s => s !== value));else setSelected([...selecteds, value]);
+    } else setSelected([value]);
+  };
+
+  const handleChange = function (event) {
+    onChange(event, this);
+    handleSelection(this.value);
+  };
+
+  const handleOnSearch = e => {
+    setFilter(e.target.value);
+    onSearch(e);
+  };
+
+  const handleApply = function (e) {
+    if (this.onClick) this.onClick(e);
+    onApply(e, selecteds);
+  };
+
+  if (buttonFooter) rows.push(op('*', __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl), 1.16666));
+  if (!open) return null;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx(StyledContainer, {
+      "data-testid": dataTestid,
+      rows: rows,
+      zIndex: zIndex
+    }, void 0, /*#__PURE__*/_jsx(HeaderContainer, {}, void 0, header, useSearch && /*#__PURE__*/_jsx(Grid, {
+      alignItems: "center",
+      height: __UNSAFE_SPACE_TO_DIMSUM(theme.space.xl),
+      pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+      pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+    }, void 0, /*#__PURE__*/_jsx(DSTextBox, {
+      onChange: handleOnSearch,
+      placeholder: "Filter by name",
+      value: filter
+    }))), /*#__PURE__*/_jsx(Grid, {
+      style: {
+        overflow: 'hidden'
+      }
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      style: {
+        overflow: 'auto'
+      }
+    }, void 0, /*#__PURE__*/_jsx(ListContainer, {
+      "data-testid": "".concat(dataTestid, "--list-container")
+    }, void 0, React.Children.map(children, child => {
+      let leftAddon = null;
+      let rightAddon = null;
+      const {
+        value,
+        title
+      } = child.props;
+      const found = selecteds.findIndex(s => String(s) === String(value));
+      if (filter && !String(value).toLocaleLowerCase().includes(filter.toLocaleLowerCase()) && !String(title).toLocaleLowerCase().includes(filter.toLocaleLowerCase())) return null;
+
+      if (multiple) {
+        if (found > -1) leftAddon = checked;else leftAddon = checkbox;
+      } else if (found > -1) {
+        rightAddon = selectedMark;
+      }
+
+      return /*#__PURE__*/_jsx(DSMobileTouchable, {
+        onClick: handleChange.bind(child.props)
+      }, void 0, /*#__PURE__*/React.cloneElement(child, {
+        leftAddon,
+        rightAddon
+      }));
+    })))), buttonFooter && /*#__PURE__*/_jsx(Footer, {
+      alignItems: "center" // eslint-disable-next-line max-lines
+      ,
+      pl: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s),
+      pr: __UNSAFE_SPACE_TO_DIMSUM(theme.space.s)
+    }, void 0, /*#__PURE__*/React.cloneElement(buttonFooter, _objectSpread(_objectSpread({}, buttonFooter.props), {}, {
+      containerProps: {
+        'data-testid': "".concat(dataTestid, "--btn")
+      },
+      buttonType: 'primary',
+      size: 'l',
+      onClick: handleApply.bind(buttonFooter.props)
+    }))))
+  });
+};
+
+const DSMobileSelectList = withTheme(MobileSelectList);
+
+export { DSMobileSelectList };

package/esm/MobileSelectList/index.js

@@ -0,0 +1 @@
+export { DSMobileSelectList } from './MobileSelectList.js';

package/esm/MobileSelectList/styled.js

@@ -0,0 +1,42 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { noop } from 'lodash';
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+import { DSCheckbox } from '@elliemae/ds-form';
+import { Checkmark } from '@elliemae/ds-icons';
+import { border } from '@elliemae/ds-system';
+import { DSMobileTouchable } from '../MobileTouchable/MobileTouchable.js';
+import { DSMobileListItem } from '../MobileListItem/MobileListItem.js';
+
+const StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1dckxve-0"
+})(["background:", ";z-index:", ";position:fixed;width:100%;top:0;left:0;right:0;height:100%;"], props => props.theme.colors.neutral['000'], props => props.zIndex);
+const HeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1dckxve-1"
+})(["border-bottom:", ";"], props => border(props.theme.colors.neutral['300']));
+const Footer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1dckxve-2"
+})(["border-top:", ";"], props => border(props.theme.colors.neutral['300']));
+const ListContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1dckxve-3"
+})(["& ", ":last-child ", "{border:none;}"], DSMobileTouchable, DSMobileListItem);
+const checkbox = /*#__PURE__*/_jsx(DSCheckbox, {
+  checked: false,
+  onChange: noop,
+  style: {
+    pointerEvents: 'none'
+  }
+});
+const checked = /*#__PURE__*/_jsx(DSCheckbox, {
+  checked: true,
+  onChange: noop,
+  style: {
+    pointerEvents: 'none'
+  }
+});
+const selectedMark = /*#__PURE__*/_jsx(Checkmark, {
+  color: ['brand-primary', 600]
+});
+
+export { Footer, HeaderContainer, ListContainer, StyledContainer, checkbox, checked, selectedMark };

package/esm/MobileSeparator/Separator.js

@@ -0,0 +1,63 @@
+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 'react';
+import { PropTypes, describe } from 'react-desc';
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+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 Separator = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-lje3kq-0"
+})(["border-top:", ";border-left:", ";"], _ref => {
+  let {
+    theme,
+    color,
+    borderType
+  } = _ref;
+  return "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType);
+}, _ref2 => {
+  let {
+    theme,
+    color,
+    borderType
+  } = _ref2;
+  return "".concat(theme.colors[color[0]][color[1]], " 1px ").concat(borderType);
+});
+
+const MobileSeparator = _ref3 => {
+  let {
+    color = ['neutral', '800'],
+    direction = 'horizontal',
+    type = 'solid',
+    margin = 'xs'
+  } = _ref3;
+  const orientation = direction === 'vertical' ? 'height' : 'width';
+  const xORy = direction === 'vertical' ? 'mx' : 'my';
+  const styles = {
+    width: 0,
+    height: 0,
+    [orientation]: '100%',
+    [xORy]: margin,
+    borderType: type,
+    color
+  };
+  return /*#__PURE__*/jsx(Separator, _objectSpread({}, styles));
+};
+
+const mobileSeparatorProps = {
+  type: PropTypes.oneOf(['solid', 'dashed']).description('Style type of separator').defaultValue('solid'),
+  direction: PropTypes.oneOf(['vertical', 'horizontal']).description('Direction of the separator').defaultValue('horizontal'),
+  color: PropTypes.array.description('Color of the separator').defaultValue(['neutral', '800']),
+  margin: PropTypes.oneOf(['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl']).description('Margin of the separator').defaultValue('xs')
+};
+const MobileSeparatorWithSchema = describe(MobileSeparator);
+MobileSeparatorWithSchema.propTypes = mobileSeparatorProps;
+
+export { MobileSeparatorWithSchema, MobileSeparator as default };

package/esm/MobileSeparator/index.js

@@ -0,0 +1,2 @@
+import MobileSeparator from './Separator.js';
+export { MobileSeparatorWithSchema, default } from './Separator.js';

package/esm/MobileTimePicker/Input.js

@@ -0,0 +1,32 @@
+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 { __UNSAFE_SPACE_TO_DIMSUM, focus } from '@elliemae/ds-system';
+import styled from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["innerRef"];
+
+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 StyledInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "sc-ra7fth-0"
+})(["input[type=time]&{-webkit-appearance:none;-moz-appearance:none;-webkit-tap-highlight-color:transparent;appearance:none;color:transparent;white-space:nowrap;position:relative;height:", ";width:100%;max-width:calc(100% - 32px);outline:none;box-sizing:border-box;display:flex;background:", ";padding:0 ", ";z-index:1;border-radius:2px;border:solid 1px ", ";}input[type=time]&:active,input[type=time]&:focus{", "}&:before{color:", ";content:'", "';}input[type=time]&::-webkit-datetime-edit,input[type=time]&::-webkit-inner-spin-button,input[type=time]&::-webkit-clear-button{-webkit-appearance:none;display:none;}"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.l), props => props.theme.colors.neutral['000'], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs), props => props.theme.colors.neutral[200], props => focus(props.theme.colors.brand[700]), props => props.value === '' ? props.theme.colors.neutral['500'] : props.theme.colors.neutral['800'], props => props.value === '' ? props.placeholder : props['data-displayvalue']);
+const Input = _ref => {
+  let {
+    innerRef
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(StyledInput, _objectSpread({
+    ref: innerRef
+  }, props));
+};
+
+export { Input };

package/esm/MobileTimePicker/MobileTimePicker.js

@@ -0,0 +1,112 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef, useEffect, useMemo } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { RecentDocuments } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { DSInputGroup } from '@elliemae/ds-form';
+import { Input } from './Input.js';
+
+var _RecentDocuments;
+
+const DSMobileTimePicker = _ref => {
+  let {
+    disabled,
+    value,
+    tabIndex,
+    placeholder,
+    onChange
+  } = _ref;
+  const inputRef = useRef(null);
+  const valueArr = value.split(':');
+  useEffect(() => {
+    /*
+      necessary if value is being set in mount, 
+      otherwise the clear won't work on the first click
+      [SEE input onChange comment]
+    */
+    if (inputRef.current) {
+      inputRef.current.defaultValue = '';
+    }
+  }, [inputRef.current]);
+  const displayValue = useMemo(() => {
+    if (!value || !valueArr[0] || !valueArr[1]) return '';
+    const ampm = valueArr[0] >= 12 ? 'pm' : 'am';
+    const h = valueArr[0] > 12 ? valueArr[0] - 12 : valueArr[0];
+    return "".concat(h, " : ").concat(valueArr[1], " ").concat(ampm);
+  }, [value]);
+  return /*#__PURE__*/_jsx(DSInputGroup, {
+    rightAddon: /*#__PURE__*/_jsx(DSButton, {
+      "aria-label": "Time Picker Button",
+      color: !disabled ? DSIconColors.PRIMARY : DSIconColors.NEUTRAL,
+      disabled: disabled,
+      icon: _RecentDocuments || (_RecentDocuments = /*#__PURE__*/_jsx(RecentDocuments, {})),
+      type: "button",
+      buttonType: "secondary",
+      onClick: () => {
+        inputRef.current.focus();
+        inputRef.current.click();
+      }
+    })
+  }, void 0, /*#__PURE__*/_jsx(Input, {
+    innerRef: inputRef,
+    type: "time",
+    "data-testid": "ds-mobile-time-picker",
+    "aria-label": "Time Picker Input Mask",
+    disabled: disabled,
+    placeholder: placeholder,
+    tabIndex: tabIndex,
+    value: value,
+    "data-displayvalue": displayValue,
+    onChange: e => {
+      // https://github.com/facebook/react/issues/8938#issuecomment-360573204
+      const {
+        target
+      } = e.nativeEvent;
+
+      function iosClearDefault() {
+        target.defaultValue = '';
+      }
+
+      window.setTimeout(iosClearDefault, 0);
+      onChange(e);
+    }
+  }));
+};
+
+DSMobileTimePicker.defaultProps = {
+  disabled: false,
+  tabIndex: 0,
+  placeholder: 'HH : MM am',
+  value: ''
+};
+const pickerProps = {
+  /**
+   * defaults to false
+   */
+  disabled: PropTypes.bool.description('disabled prop, defaults to false'),
+
+  /**
+   * 0 as default
+   */
+  tabIndex: PropTypes.number.description('focus order HTML property, 0 as default'),
+
+  /**
+   * HH : MM am as default
+   */
+  placeholder: PropTypes.string.description('HH : MM am as default'),
+
+  /**
+   * onChange handler, receives change event as first argument
+   */
+  onChange: PropTypes.func.description('onChange handler, receives change event as first argument'),
+
+  /**
+   * HH:MM string representing the time or empty string
+   */
+  value: PropTypes.string.description('HH:MM string representing the time or empty string')
+};
+const DSMobileTimePickerWithSchema = describe(DSMobileTimePicker).description('Time picker for mobile & tablet');
+DSMobileTimePickerWithSchema.propTypes = pickerProps;
+
+export { DSMobileTimePicker, DSMobileTimePickerWithSchema };

package/esm/MobileTimePicker/index.js

@@ -0,0 +1 @@
+export { DSMobileTimePicker, DSMobileTimePickerWithSchema } from './MobileTimePicker.js';

package/esm/MobileTouchable/MobileTouchable.js

@@ -0,0 +1,50 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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 { useState, useCallback } from 'react';
+import { noop } from 'lodash';
+import styled from 'styled-components';
+import { Grid } from '@elliemae/ds-grid';
+import { withTheme } from '@elliemae/ds-system';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["children", "onClick", "theme", "dataTestid", "render"];
+
+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 StyledContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-6cxve6-0"
+})(["cursor:pointer;background:", ";"], props => props.touching ? props.theme.colors.brand['100'] : props.theme.colors.neutral['000']);
+
+const MobileTouchable = _ref => {
+  let {
+    children,
+    onClick = noop,
+    theme,
+    dataTestid = 'mobile-touchable',
+    render
+  } = _ref,
+      gridProps = _objectWithoutProperties(_ref, _excluded);
+
+  const [touching, setTouching] = useState(false);
+  const handleStart = useCallback(() => setTouching(true));
+  const handleEnd = useCallback(() => setTouching(false));
+  return /*#__PURE__*/jsx(StyledContainer, _objectSpread(_objectSpread({}, gridProps), {}, {
+    touching: touching,
+    onClick: onClick,
+    onTouchStart: handleStart,
+    onTouchEnd: handleEnd,
+    "data-testid": dataTestid,
+    children: children || render(gridProps)
+  }));
+};
+
+const DSMobileTouchable = withTheme(MobileTouchable);
+
+export { DSMobileTouchable };

package/esm/MobileTouchable/index.js

@@ -0,0 +1 @@
+export { DSMobileTouchable } from './MobileTouchable.js';

package/esm/Modal/Modal.js

@@ -0,0 +1,122 @@
+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 { PropTypes, describe } from 'react-desc';
+import { noop } from 'lodash';
+import { Grid } from '@elliemae/ds-grid';
+import { WarningTriangle } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import { useTheme } from '@elliemae/ds-system';
+import { BodyFix, BackShadow, ModalPosition, ModalBox, ModalIcon, ModalTitle, ModalDescription } from './styled.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var _ModalIcon;
+
+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 Modal = _ref => {
+  let {
+    zIndex = 1,
+    title = '',
+    description = '',
+    onClose = noop,
+    showSecondaryAction = true,
+    secondaryActionProps = {
+      onClick: noop,
+      labelText: 'Cancel'
+    },
+    primaryActionProps = {
+      onClick: noop,
+      labelText: 'Accept'
+    },
+    isOpen = false
+  } = _ref;
+  const theme = useTheme();
+  if (!isOpen) return null;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(BodyFix, {
+      isOpen: isOpen
+    }), /*#__PURE__*/_jsx(BackShadow, {
+      onClick: onClose,
+      zIndex: zIndex
+    }), /*#__PURE__*/_jsx(ModalPosition, {
+      zIndex: zIndex,
+      cols: ['auto']
+    }, void 0, /*#__PURE__*/_jsx(ModalBox, {
+      maxHeight: "".concat(window.innerHeight * 0.75, "px"),
+      rows: [1, '80px'],
+      style: {
+        overflow: 'hidden'
+      }
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      pl: "xs",
+      pr: "xs",
+      style: {
+        overflow: 'hidden'
+      }
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      rows: ['auto', 'auto', 1],
+      style: {
+        overflow: 'hidden'
+      }
+    }, void 0, _ModalIcon || (_ModalIcon = /*#__PURE__*/_jsx(ModalIcon, {}, void 0, /*#__PURE__*/_jsx(WarningTriangle, {
+      size: "xxl"
+    }))), /*#__PURE__*/_jsx(ModalTitle, {
+      "data-testid": "modal-title"
+    }, void 0, title), /*#__PURE__*/_jsx(ModalDescription, {
+      "data-testid": "modal-desc",
+      style: {
+        overflow: 'auto'
+      }
+    }, void 0, description))), /*#__PURE__*/_jsx(Grid, {
+      pt: "24px"
+    }, void 0, /*#__PURE__*/_jsx(Grid, {
+      pl: "xs",
+      pr: "xs",
+      cols: showSecondaryAction ? [1, 1] : [1],
+      gutter: "xs",
+      justifyContent: "center",
+      alignItems: "center",
+      style: {
+        borderTop: "1px solid ".concat(theme.colors.neutral[100])
+      }
+    }, void 0, showSecondaryAction && /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({}, secondaryActionProps), {}, {
+      labelText: secondaryActionProps.labelText || ' Cancel',
+      buttonType: "secondary",
+      "data-testid": "modal-secondary-btn"
+    })), /*#__PURE__*/jsx(DSButton, _objectSpread(_objectSpread({
+      labelText: primaryActionProps.labelText || ' Accept'
+    }, primaryActionProps), {}, {
+      buttonType: "primary",
+      "data-testid": "modal-primary-btn"
+    }))))))]
+  });
+};
+
+const modalProps = {
+  isOpen: PropTypes.bool.description('Wheter the modal is open or closed').defaultValue(false),
+  zIndex: PropTypes.number.description('z-index value').defaultValue(1),
+  title: PropTypes.string.description('Modal s title').isRequired,
+  description: PropTypes.string.description('Modal s content').isRequired,
+  onClose: PropTypes.func.description('Function executed when the modal closes'),
+  showSecondaryAction: PropTypes.bool.description('Wheter to show secondary action button or not').defaultValue(true),
+  secondaryActionProps: PropTypes.shape({
+    onClick: PropTypes.func,
+    labelText: PropTypes.string
+  }).description('Secondary action props'),
+  primaryActionProps: PropTypes.shape({
+    onClick: PropTypes.func,
+    labelText: PropTypes.string
+  }).description('Primary action props')
+};
+const ModalWithSchema = describe(Modal);
+ModalWithSchema.propTypes = modalProps;
+
+export { Modal, ModalWithSchema };

package/esm/Modal/index.js

@@ -0,0 +1 @@
+export { Modal, ModalWithSchema } from './Modal.js';

package/esm/Modal/styled.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { Grid } from '@elliemae/ds-grid';
+import styled from 'styled-components';
+import { createGlobalStyle } from '@elliemae/ds-system';
+
+var _templateObject;
+const BodyFix = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    body{\n        ", ";\n    }\n"])), props => props.isOpen ? 'overflow: hidden;' : '');
+const ModalBox = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-0"
+})(["width:100%;background:", ";max-height:", ";box-shadow:0 2px 4px 0 rgba(0,0,0,0.5);"], props => props.theme.colors.neutral['000'], props => props.maxHeight);
+const ModalPosition = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-1"
+})(["z-index:", ";background:", ";position:absolute;top:12.5%;width:80%;left:10%;"], props => props.zIndex, props => props.theme.colors.neutral['000']);
+const BackShadow = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-2"
+})(["z-index:", ";position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);overflow:hidden;"], props => props.zIndex);
+const ModalIcon = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-3"
+})(["padding-top:24px;justify-content:center;span.em-ds-icon svg,svg:not([fill]){fill:", ";}"], props => props.theme.colors.warning[600]);
+const ModalTitle = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-4"
+})(["padding-top:24px;font-size:22px;font-weight:600;color:", ";text-align:center;"], props => props.theme.colors.neutral[600]);
+const ModalDescription = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-cke90o-5"
+})(["padding-top:", ";font-size:16px;font-weight:400;color:", ";text-align:center;"], props => props.theme.space.xxs, props => props.theme.colors.neutral[500]);
+
+export { BackShadow, BodyFix, ModalBox, ModalDescription, ModalIcon, ModalPosition, ModalTitle };