@elliemae/ds-dialog 2.3.0-alpha.8 → 2.3.0-next.10

package/{dist/esm → esm}/index.js

@@ -1,17 +1,11 @@
-import * as React from "react";
-import { describe } from "react-desc";
-import { globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
-import {
-  DSDialogBody,
-  DSDialogHeader,
-  DSDialogFooter,
-  DSDialogSeparator,
-  DSDialogTitle,
-  DSDialogAddon,
-  DSDialogDefaultLayout,
-  DSDialogPrimaryMessage,
-  DSDialogSecondaryMessage
-} from "./styles";
+import { describe } from 'react-desc';
+import { globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
+import { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage } from './styles.js';
+export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle } from './styles.js';
+export { DSDialog, DSDialogWithSchema } from './DSDialog.js';
+export { DSDialogDatatestid } from './DSDialogDatatestid.js';
+export { DSDialogSizes } from './utils.js';
+
 DSDialogBody.propTypes = globalAttributesPropTypes;
 DSDialogHeader.propTypes = globalAttributesPropTypes;
 DSDialogFooter.propTypes = globalAttributesPropTypes;
@@ -21,15 +15,15 @@ DSDialogAddon.propTypes = globalAttributesPropTypes;
 DSDialogDefaultLayout.propTypes = globalAttributesPropTypes;
 DSDialogPrimaryMessage.propTypes = globalAttributesPropTypes;
 DSDialogSecondaryMessage.propTypes = globalAttributesPropTypes;
-DSDialogBody.displayName = "DSDialogBody";
-DSDialogHeader.displayName = "DSDialogHeader";
-DSDialogFooter.displayName = "DSDialogFooter";
-DSDialogSeparator.displayName = "DSDialogSeparator";
-DSDialogTitle.displayName = "DSDialogTitle";
-DSDialogAddon.displayName = "DSDialogAddon";
-DSDialogDefaultLayout.displayName = "DSDialogDefaultLayout";
-DSDialogPrimaryMessage.displayName = "DSDialogPrimaryMessage";
-DSDialogSecondaryMessage.displayName = "DSDialogSecondaryMessage";
+DSDialogBody.displayName = 'DSDialogBody';
+DSDialogHeader.displayName = 'DSDialogHeader';
+DSDialogFooter.displayName = 'DSDialogFooter';
+DSDialogSeparator.displayName = 'DSDialogSeparator';
+DSDialogTitle.displayName = 'DSDialogTitle';
+DSDialogAddon.displayName = 'DSDialogAddon';
+DSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';
+DSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';
+DSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';
 const DSDialogBodyWithSchema = describe(DSDialogBody);
 const DSDialogHeaderWithSchema = describe(DSDialogHeader);
 const DSDialogFooterWithSchema = describe(DSDialogFooter);
@@ -48,28 +42,5 @@ DSDialogAddonWithSchema.propTypes = globalAttributesPropTypes;
 DSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes;
 DSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes;
 DSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes;
-export * from "./DSDialog";
-export * from "./DSDialogDatatestid";
-import { DSDialogSizes } from "./utils";
-export {
-  DSDialogAddon,
-  DSDialogAddonWithSchema,
-  DSDialogBody,
-  DSDialogBodyWithSchema,
-  DSDialogDefaultLayout,
-  DSDialogDefaultLayoutWithSchema,
-  DSDialogFooter,
-  DSDialogFooterWithSchema,
-  DSDialogHeader,
-  DSDialogHeaderWithSchema,
-  DSDialogPrimaryMessage,
-  DSDialogPrimaryMessageWithSchema,
-  DSDialogSecondaryMessage,
-  DSDialogSecondaryMessageWithSchema,
-  DSDialogSeparator,
-  DSDialogSeparatorWithSchema,
-  DSDialogSizes,
-  DSDialogTitle,
-  DSDialogTitleWithSchema
-};
-//# sourceMappingURL=index.js.map
+
+export { DSDialogAddonWithSchema, DSDialogBodyWithSchema, DSDialogDefaultLayoutWithSchema, DSDialogFooterWithSchema, DSDialogHeaderWithSchema, DSDialogPrimaryMessageWithSchema, DSDialogSecondaryMessageWithSchema, DSDialogSeparatorWithSchema, DSDialogTitleWithSchema };

package/esm/propTypes.js

@@ -0,0 +1,23 @@
+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, 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(_objectSpread({}, globalAttributesPropTypes), {}, {
+  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),
+  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.').defaultValue(() => {}),
+  onClose: PropTypes.func.description('Callback triggered with ESC key.').defaultValue(() => {}),
+  size: PropTypes.oneOf(DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(DSDialogSizes.DEFAULT)
+});
+
+export { propTypes };

package/esm/sharedTypes.js

@@ -0,0 +1,5 @@
+let DSDialogInternalsT;
+
+(function (_DSDialogInternalsT) {})(DSDialogInternalsT || (DSDialogInternalsT = {}));
+
+export { DSDialogInternalsT };

package/esm/styles.js

@@ -0,0 +1,125 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import styled from 'styled-components';
+import { createGlobalStyle } from '@elliemae/ds-system';
+import { space, sizing, layout, flexboxes } from '@xstyled/styled-components';
+import { allSizes } from './utils.js';
+
+var _templateObject;
+const FixedBody = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    overflow: hidden;\n    \n    ", "\n  }\n"])), _ref => {
+  let {
+    bodyInfo
+  } = _ref;
+  return bodyInfo.overflow ? "padding-right: calc( ".concat(bodyInfo.padding, " + 15px ) !important;") : "";
+});
+const StyledDialogBackground = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-106vqwv-0"
+})(["position:fixed;top:0;bottom:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref2 => {
+  let {
+    zIndex
+  } = _ref2;
+  return zIndex;
+});
+const StyledDialogContainer = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-106vqwv-1"
+})(["height:fit-content;position:absolute;top:0;bottom:0;left:0;right:0;margin:", ";width:", ";min-width:300px;box-shadow:0 10px 20px 0 ", ";background:", ";overflow-y:auto;", " &:focus{outline:none;}"], _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 = /*#__PURE__*/styled.h3.withConfig({
+  componentId: "sc-106vqwv-2"
+})(["font-size:", ";display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:28px;margin:0;"], _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.fontSizes.title[700];
+});
+const DSDialogAddon = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-106vqwv-3"
+})([""]);
+const DSDialogHeader = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-106vqwv-4"
+})(["display:grid;align-items:center;grid-auto-flow:column;min-height:", ";padding:10px ", ";& ", " + ", "{align-self:flex-start;justify-self:flex-end;}& ", ":only-child{justify-self:flex-end;}", " ", ""], _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.space.m;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.space.xs;
+}, DSDialogTitle, DSDialogAddon, DSDialogAddon, space, sizing);
+const DSDialogSeparator = /*#__PURE__*/styled.hr.attrs(() => ({
+  'aria-hidden': true
+})).withConfig({
+  componentId: "sc-106vqwv-5"
+})(["margin:0;border-top:1px solid ", ";"], _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.neutral['080'];
+});
+const DSDialogBody = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-106vqwv-6"
+})(["padding:", ";overflow-y:auto;", " ", " ", " ", ""], _ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.space.xs;
+}, layout, space, flexboxes, sizing);
+const DSDialogPrimaryMessage = /*#__PURE__*/styled.h3.withConfig({
+  componentId: "sc-106vqwv-7"
+})(["margin:0;"]);
+const DSDialogSecondaryMessage = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-106vqwv-8"
+})(["margin:0;color:", ";"], _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.colors.neutral[500];
+});
+const DSDialogDefaultLayout = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-106vqwv-9"
+})(["display:grid;grid-auto-flow:row;justify-items:center;align-items:center;grid-gap:", ";", "{text-align:center;}"], _ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.space.xxs;
+}, DSDialogSecondaryMessage);
+const DSDialogFooter = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-106vqwv-10"
+})(["display:grid;grid-auto-flow:column;align-items:center;justify-content:flex-end;grid-gap:", ";min-height:", ";padding:0 ", ";", " ", " ", ""], _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

@@ -0,0 +1,28 @@
+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 };

package/package.json

@@ -1,50 +1,43 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "2.3.0-alpha.8",
+  "version": "2.3.0-next.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dialog",
-  "files": [
-    "dist"
-  ],
-  "module": "./dist/esm/index.js",
-  "main": "./dist/cjs/index.js",
-  "types": "./dist/types/index.d.ts",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
     },
     "./utils": {
-      "import": "./dist/esm/utils.js",
-      "require": "./dist/cjs/utils.js"
+      "import": "./esm/utils.js",
+      "require": "./cjs/utils.js"
     },
     "./styles": {
-      "import": "./dist/esm/styles.js",
-      "require": "./dist/cjs/styles.js"
-    },
-    "./propTypes": {
-      "import": "./dist/esm/propTypes.js",
-      "require": "./dist/cjs/propTypes.js"
+      "import": "./esm/styles.js",
+      "require": "./cjs/styles.js"
     },
-    "./DSDialogTypes": {
-      "import": "./dist/esm/DSDialogTypes.js",
-      "require": "./dist/cjs/DSDialogTypes.js"
+    "./sharedTypes": {
+      "import": "./esm/sharedTypes.js",
+      "require": "./cjs/sharedTypes.js"
     },
-    "./DSDialogInternalTypes": {
-      "import": "./dist/esm/DSDialogInternalTypes.js",
-      "require": "./dist/cjs/DSDialogInternalTypes.js"
+    "./propTypes": {
+      "import": "./esm/propTypes.js",
+      "require": "./cjs/propTypes.js"
     },
     "./DSDialogDatatestid": {
-      "import": "./dist/esm/DSDialogDatatestid.js",
-      "require": "./dist/cjs/DSDialogDatatestid.js"
+      "import": "./esm/DSDialogDatatestid.js",
+      "require": "./cjs/DSDialogDatatestid.js"
     },
     "./DSDialog": {
-      "import": "./dist/esm/DSDialog.js",
-      "require": "./dist/cjs/DSDialog.js"
+      "import": "./esm/DSDialog.js",
+      "require": "./cjs/DSDialog.js"
     },
     "./defaultProps": {
-      "import": "./dist/esm/defaultProps.js",
-      "require": "./dist/cjs/defaultProps.js"
+      "import": "./esm/defaultProps.js",
+      "require": "./cjs/defaultProps.js"
     }
   },
   "sideEffects": [
@@ -56,14 +49,20 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "npm": ">=7",
+    "node": ">=14"
   },
   "author": "ICE MT",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
+  },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.3.0-alpha.8",
-    "@elliemae/ds-system": "2.3.0-alpha.8",
-    "@xstyled/styled-components": "~3.1.2",
+    "@elliemae/ds-props-helpers": "2.3.0-next.10",
+    "@elliemae/ds-system": "2.3.0-next.10",
+    "@xstyled/styled-components": "~3.1.1",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
@@ -76,12 +75,7 @@
   },
   "publishConfig": {
     "access": "public",
-    "typeSafety": false
-  },
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }