@elliemae/ds-dialog 3.0.0-next.2 → 3.0.0-next.6

package/cjs/styles.js

@@ -1,121 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var styled = require('@xstyled/styled-components');
-var utils = require('./utils.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-const FixedBody = styled.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  body {\n    overflow: hidden;\n    \n    ", "\n  }\n"])), _ref => {
-  let {
-    isBodyOverflow
-  } = _ref;
-  return isBodyOverflow ? "padding-right: 15px !important;" : "";
-});
-const StyledDialogBackground = styled__default["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(37, 41, 47, 50%);\n  overflow-y: auto;\n  z-index: ", ";\n"])), _ref2 => {
-  let {
-    zIndex
-  } = _ref2;
-  return zIndex;
-});
-const StyledDialogContainer = styled__default["default"].div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  height: fit-content;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: ", ";\n  width: ", ";\n  min-width: 300px;\n  box-shadow: 0 10px 20px 0 ", ";\n  background: ", ";\n  overflow-y: auto;\n  ", "\n  &:focus {\n    outline: none;\n  }\n"])), _ref3 => {
-  let {
-    centered
-  } = _ref3;
-  return centered ? 'auto' : '20vh auto auto auto';
-}, _ref4 => {
-  let {
-    size
-  } = _ref4;
-  return utils.allSizes[size];
-}, _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral[500];
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral['000'];
-}, styled.space);
-const DSDialogTitle = styled__default["default"].h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  font-size: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin: 0;\n"])), _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.fontSizes.title[700];
-});
-const DSDialogAddon = styled__default["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"]([""])));
-const DSDialogHeader = styled__default["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  display: grid;\n  align-items: center;\n  grid-auto-flow: column;\n  min-height: ", ";\n  padding: 10px ", ";\n  & ", " + ", " {\n    align-self: flex-start;\n    justify-self: flex-end;\n  }\n  & ", ":only-child {\n    justify-self: flex-end;\n  }\n  ", "\n"])), _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.space.m;
-}, _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.space.xs;
-}, DSDialogTitle, DSDialogAddon, DSDialogAddon, styled.space);
-const DSDialogSeparator = styled__default["default"].hr.attrs(() => ({
-  'aria-hidden': true
-}))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n  margin: 0;\n  border-top: 1px solid ", ";\n"])), _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.colors.neutral['080'];
-});
-const DSDialogBody = styled__default["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.space.xs;
-}, styled.layout, styled.space, styled.flexboxes, styled.sizing);
-const DSDialogPrimaryMessage = styled__default["default"].h3(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default["default"](["\n  margin: 0;\n"])));
-const DSDialogSecondaryMessage = styled__default["default"].p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default["default"](["\n  margin: 0;\n  color: ", ";\n"])), _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.colors.neutral[500];
-});
-const DSDialogDefaultLayout = styled__default["default"].div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default["default"](["\n  display: grid;\n  grid-auto-flow: row;\n  justify-items: center;\n  align-items: center;\n  grid-gap: ", ";\n\n  ", " {\n    text-align: center;\n  }\n"])), _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.space.xxs;
-}, DSDialogSecondaryMessage);
-const DSDialogFooter = styled__default["default"].div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default["default"](["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  justify-content: flex-end;\n  grid-gap: ", ";\n  min-height: ", ";\n  padding: 0 ", ";\n  ", "\n  ", "\n  ", "\n"])), _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.space.xxs;
-}, _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.space.m;
-}, _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.space.xs;
-}, styled.space, styled.flexboxes, styled.sizing);
-
-exports.DSDialogAddon = DSDialogAddon;
-exports.DSDialogBody = DSDialogBody;
-exports.DSDialogDefaultLayout = DSDialogDefaultLayout;
-exports.DSDialogFooter = DSDialogFooter;
-exports.DSDialogHeader = DSDialogHeader;
-exports.DSDialogPrimaryMessage = DSDialogPrimaryMessage;
-exports.DSDialogSecondaryMessage = DSDialogSecondaryMessage;
-exports.DSDialogSeparator = DSDialogSeparator;
-exports.DSDialogTitle = DSDialogTitle;
-exports.FixedBody = FixedBody;
-exports.StyledDialogBackground = StyledDialogBackground;
-exports.StyledDialogContainer = StyledDialogContainer;

package/cjs/utils.js

@@ -1,35 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-
-const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_ref => {
-  let [key] = _ref;
-  return /^[pm][xytblr]?$/.exec(key);
-}));
-const DSDialogSizes = {
-  DEFAULT: 'default',
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large',
-  XLARGE: 'x-large',
-  XXLARGE: 'xx-large'
-};
-const DSDialogSizesArrayValues = Object.values(DSDialogSizes);
-const allSizes = {
-  default: '576px',
-  small: '320px',
-  medium: '656px',
-  large: '848px',
-  'x-large': '1042px',
-  'xx-large': '1440px'
-};
-
-exports.DSDialogSizes = DSDialogSizes;
-exports.DSDialogSizesArrayValues = DSDialogSizesArrayValues;
-exports.allSizes = allSizes;
-exports.getSpaceProps = getSpaceProps;

package/esm/DSDialog.js

@@ -1,100 +0,0 @@
-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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import ReactDOM from 'react-dom';
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { describe } from 'react-desc';
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
-import { StyledDialogBackground, FixedBody, StyledDialogContainer } from './styles.js';
-import { propTypes } from './propTypes.js';
-import { defaultProps } from './defaultProps.js';
-import { getSpaceProps } from './utils.js';
-import { DSDialogDatatestid } from './DSDialogDatatestid.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus", "zIndex"];
-
-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 DSDialog = props => {
-  var _FixedBody;
-
-  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  const [isBodyOverflow, setIsBodyOverflow] = useState(false);
-  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
-
-  const {
-    children,
-    isOpen,
-    onClickOutside,
-    centered,
-    size,
-    removeAutoFocus,
-    zIndex
-  } = propsWithDefault,
-        rest = _objectWithoutProperties(propsWithDefault, _excluded);
-
-  const containerRef = useRef(null);
-  const handleOutsideClick = useCallback(e => {
-    if (e.target.dataset.portalbg) onClickOutside();
-  }, [onClickOutside]);
-  const handleOnKeyDown = useCallback(e => {
-    if (e.key === 'Escape') onClickOutside();
-  }, [onClickOutside]);
-  useEffect(() => {
-    const body = document.getElementsByTagName('body')[0];
-    const {
-      offsetHeight,
-      scrollHeight
-    } = body;
-    if (!isOpen) return setIsBodyOverflow(false);
-    return setIsBodyOverflow(offsetHeight < scrollHeight);
-  }, [isOpen]);
-  useEffect(() => {
-    var _containerRef$current;
-
-    if (isOpen && !removeAutoFocus) containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
-  }, [isOpen, removeAutoFocus]);
-  const globalAttributes = useGetGlobalAttributes(propsWithDefault, {
-    onClick: handleOutsideClick
-  });
-
-  if (isOpen) {
-    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/jsxs(StyledDialogBackground, _objectSpread(_objectSpread({
-      onClick: handleOutsideClick,
-      "data-portalbg": true,
-      "data-testid": DSDialogDatatestid.BACKGROUND,
-      zIndex: zIndex
-    }, globalAttributes), {}, {
-      children: [_FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {
-        isBodyOverflow: isBodyOverflow
-      })), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
-        role: "dialog",
-        "aria-modal": true,
-        ref: containerRef,
-        tabIndex: !removeAutoFocus ? 0 : undefined,
-        onKeyDown: handleOnKeyDown
-      }, getSpaceProps(rest)), {}, {
-        size: size,
-        centered: centered,
-        "data-testid": DSDialogDatatestid.CONTAINER,
-        children: children
-      }))]
-    })), document.getElementsByTagName('body')[0]);
-  }
-
-  return null;
-};
-
-const DSDialogWithSchema = describe(DSDialog);
-DSDialogWithSchema.propTypes = propTypes;
-
-export { DSDialog, DSDialogWithSchema };

package/esm/DSDialogDatatestid.js

@@ -1,6 +0,0 @@
-const DSDialogDatatestid = {
-  CONTAINER: 'ds-dialog-container',
-  BACKGROUND: 'ds-dialog-background'
-};
-
-export { DSDialogDatatestid };

package/esm/DSDialogInternalTypes.d.js

@@ -1 +0,0 @@
-

package/esm/DSDialogTypes.js

@@ -1 +0,0 @@
-

package/esm/defaultProps.js

@@ -1,14 +0,0 @@
-import { DSDialogSizes } from './utils.js';
-
-const noop = () => {};
-
-const defaultProps = {
-  isOpen: false,
-  centered: false,
-  size: DSDialogSizes.DEFAULT,
-  removeAutoFocus: false,
-  onClickOutside: noop,
-  zIndex: 10
-};
-
-export { defaultProps };

package/esm/propTypes.js

@@ -1,23 +0,0 @@
-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 { PropTypes } from 'react-desc';
-import { globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
-import { DSDialogSizesArrayValues, DSDialogSizes } from './utils.js';
-
-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 propTypes = _objectSpread({
-  isOpen: PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),
-  children: PropTypes.node.description('Nested components.').isRequired,
-  centered: PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
-  size: PropTypes.oneOf(DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(DSDialogSizes.DEFAULT),
-  removeAutoFocus: PropTypes.bool.description('Removes focus in the Dialog container when is open. If you want to focus an specific element in the Dialog, it should be set to true.').defaultValue(false),
-  onClickOutside: PropTypes.func.description('Callback that should be used to close the modal when the user clicks outside. Cb also triggers when the user press ESC key for accessibility purposes.').defaultValue(() => {})
-}, globalAttributesPropTypes);
-
-export { propTypes };

package/esm/styles.js

@@ -1,101 +0,0 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import styled, { createGlobalStyle, space, layout, flexboxes, sizing } from '@xstyled/styled-components';
-import { allSizes } from './utils.js';
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-const FixedBody = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    overflow: hidden;\n    \n    ", "\n  }\n"])), _ref => {
-  let {
-    isBodyOverflow
-  } = _ref;
-  return isBodyOverflow ? "padding-right: 15px !important;" : "";
-});
-const StyledDialogBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(37, 41, 47, 50%);\n  overflow-y: auto;\n  z-index: ", ";\n"])), _ref2 => {
-  let {
-    zIndex
-  } = _ref2;
-  return zIndex;
-});
-const StyledDialogContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: fit-content;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: ", ";\n  width: ", ";\n  min-width: 300px;\n  box-shadow: 0 10px 20px 0 ", ";\n  background: ", ";\n  overflow-y: auto;\n  ", "\n  &:focus {\n    outline: none;\n  }\n"])), _ref3 => {
-  let {
-    centered
-  } = _ref3;
-  return centered ? 'auto' : '20vh auto auto auto';
-}, _ref4 => {
-  let {
-    size
-  } = _ref4;
-  return allSizes[size];
-}, _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral[500];
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral['000'];
-}, space);
-const DSDialogTitle = styled.h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin: 0;\n"])), _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.fontSizes.title[700];
-});
-const DSDialogAddon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
-const DSDialogHeader = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: grid;\n  align-items: center;\n  grid-auto-flow: column;\n  min-height: ", ";\n  padding: 10px ", ";\n  & ", " + ", " {\n    align-self: flex-start;\n    justify-self: flex-end;\n  }\n  & ", ":only-child {\n    justify-self: flex-end;\n  }\n  ", "\n"])), _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.space.m;
-}, _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.space.xs;
-}, DSDialogTitle, DSDialogAddon, DSDialogAddon, space);
-const DSDialogSeparator = styled.hr.attrs(() => ({
-  'aria-hidden': true
-}))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  border-top: 1px solid ", ";\n"])), _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.colors.neutral['080'];
-});
-const DSDialogBody = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.space.xs;
-}, layout, space, flexboxes, sizing);
-const DSDialogPrimaryMessage = styled.h3(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: 0;\n"])));
-const DSDialogSecondaryMessage = styled.p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin: 0;\n  color: ", ";\n"])), _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.colors.neutral[500];
-});
-const DSDialogDefaultLayout = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: row;\n  justify-items: center;\n  align-items: center;\n  grid-gap: ", ";\n\n  ", " {\n    text-align: center;\n  }\n"])), _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.space.xxs;
-}, DSDialogSecondaryMessage);
-const DSDialogFooter = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  justify-content: flex-end;\n  grid-gap: ", ";\n  min-height: ", ";\n  padding: 0 ", ";\n  ", "\n  ", "\n  ", "\n"])), _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.space.xxs;
-}, _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.space.m;
-}, _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.space.xs;
-}, space, flexboxes, sizing);
-
-export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle, FixedBody, StyledDialogBackground, StyledDialogContainer };

package/esm/utils.js

@@ -1,28 +0,0 @@
-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/web.dom-collections.iterator.js';
-
-const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_ref => {
-  let [key] = _ref;
-  return /^[pm][xytblr]?$/.exec(key);
-}));
-const DSDialogSizes = {
-  DEFAULT: 'default',
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large',
-  XLARGE: 'x-large',
-  XXLARGE: 'xx-large'
-};
-const DSDialogSizesArrayValues = Object.values(DSDialogSizes);
-const allSizes = {
-  default: '576px',
-  small: '320px',
-  medium: '656px',
-  large: '848px',
-  'x-large': '1042px',
-  'xx-large': '1440px'
-};
-
-export { DSDialogSizes, DSDialogSizesArrayValues, allSizes, getSpaceProps };