@elliemae/ds-dialog 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/propTypes.js

@@ -1,16 +1,23 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
-import { DSDialogSizes, DSDialogSizesArrayValues } from "./utils";
-const propTypes = {
-  isOpen: PropTypes.bool.description("Wether 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(() => {
-  })
-};
-export {
-  propTypes
-};
-//# sourceMappingURL=propTypes.js.map
+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,121 +1,101 @@
-import * as React from "react";
-import styled from "styled-components";
-import { createGlobalStyle } from "@elliemae/ds-system";
-import { space, flexboxes, layout, sizing } from "@xstyled/styled-components";
-import { allSizes } from "./utils";
-const FixedBody = createGlobalStyle`
-  body {
-    overflow: hidden;
-    
-    ${({ isBodyOverflow }) => isBodyOverflow ? `padding-right: 15px !important;` : ``}
-  }
-`;
-const StyledDialogBackground = styled.div`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(37, 41, 47, 50%);
-  overflow-y: auto;
-  z-index: ${({ zIndex }) => zIndex};
-`;
-const StyledDialogContainer = styled.div`
-  height: fit-content;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  margin: ${({ centered }) => centered ? "auto" : "20vh auto auto auto"};
-  width: ${({ size }) => allSizes[size]};
-  min-width: 300px;
-  box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};
-  background: ${({ theme }) => theme.colors.neutral["000"]};
-  overflow-y: auto;
-  ${space}
-  &:focus {
-    outline: none;
-  }
-`;
-const DSDialogTitle = styled.h3`
-  font-size: ${({ theme }) => theme.fontSizes.title[700]};
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  margin: 0;
-`;
-const DSDialogAddon = styled.div``;
-const DSDialogHeader = styled.div`
-  display: grid;
-  align-items: center;
-  grid-auto-flow: column;
-  min-height: ${({ theme }) => theme.space.m};
-  padding: 10px ${({ theme }) => theme.space.xs};
-  & ${DSDialogTitle} + ${DSDialogAddon} {
-    align-self: flex-start;
-    justify-self: flex-end;
-  }
-  & ${DSDialogAddon}:only-child {
-    justify-self: flex-end;
-  }
-  ${space}
-`;
-const DSDialogSeparator = styled.hr.attrs(() => ({ "aria-hidden": true }))`
-  margin: 0;
-  border-top: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
-`;
-const DSDialogBody = styled.div`
-  padding: ${({ theme }) => theme.space.xs};
-  overflow-y: auto;
-  ${layout}
-  ${space}
-  ${flexboxes}
-  ${sizing}
-`;
-const DSDialogPrimaryMessage = styled.h3`
-  margin: 0;
-`;
-const DSDialogSecondaryMessage = styled.p`
-  margin: 0;
-  color: ${({ theme }) => theme.colors.neutral[500]};
-`;
-const DSDialogDefaultLayout = styled.div`
-  display: grid;
-  grid-auto-flow: row;
-  justify-items: center;
-  align-items: center;
-  grid-gap: ${({ theme }) => theme.space.xxs};
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled, { createGlobalStyle, space, layout, flexboxes, sizing } from '@xstyled/styled-components';
+import { allSizes } from './utils.js';
 
-  ${DSDialogSecondaryMessage} {
-    text-align: center;
-  }
-`;
-const DSDialogFooter = styled.div`
-  display: grid;
-  grid-auto-flow: column;
-  align-items: center;
-  justify-content: flex-end;
-  grid-gap: ${({ theme }) => theme.space.xxs};
-  min-height: ${({ theme }) => theme.space.m};
-  padding: 0 ${({ theme }) => theme.space.xs};
-  ${space}
-  ${flexboxes}
-  ${sizing}
-`;
-export {
-  DSDialogAddon,
-  DSDialogBody,
-  DSDialogDefaultLayout,
-  DSDialogFooter,
-  DSDialogHeader,
-  DSDialogPrimaryMessage,
-  DSDialogSecondaryMessage,
-  DSDialogSeparator,
-  DSDialogTitle,
-  FixedBody,
-  StyledDialogBackground,
-  StyledDialogContainer
-};
-//# sourceMappingURL=styles.js.map
+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,26 +1,28 @@
-import * as React from "react";
-const getSpaceProps = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => /^[pm][xytblr]?$/.exec(key)));
+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"
+  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"
+  default: '576px',
+  small: '320px',
+  medium: '656px',
+  large: '848px',
+  'x-large': '1042px',
+  'xx-large': '1440px'
 };
-export {
-  DSDialogSizes,
-  DSDialogSizesArrayValues,
-  allSizes,
-  getSpaceProps
-};
-//# sourceMappingURL=utils.js.map
+
+export { DSDialogSizes, DSDialogSizesArrayValues, allSizes, getSpaceProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "2.2.0-alpha.4",
+  "version": "3.0.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dialog",
   "module": "./esm/index.js",
@@ -64,12 +64,9 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.2.0-alpha.4",
-    "@elliemae/ds-system": "2.2.0-alpha.4",
-    "@xstyled/core": "~3.1.2",
-    "@xstyled/styled-components": "~3.1.2",
-    "@xstyled/system": "~3.1.2",
-    "@xstyled/util": "~3.1.0",
+    "@elliemae/ds-props-helpers": "3.0.0-next.2",
+    "@elliemae/ds-system": "3.0.0-next.2",
+    "@xstyled/styled-components": "~3.1.1",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {