@elliemae/ds-dialog 2.0.0-rc.5 → 2.0.0-rc.6

package/cjs/DSDialog.js

@@ -18,6 +18,7 @@ var styles = require('./styles.js');
 var propTypes = require('./propTypes.js');
 var defaultProps = require('./defaultProps.js');
 var utils = require('./utils.js');
+var DSDialogDatatestid = require('./DSDialogDatatestid.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -37,7 +38,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const DSDialog = props => {
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps.defaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, DSDialogWithSchema.toTypescript());
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
 
   const {
     children,
@@ -65,7 +66,8 @@ const DSDialog = props => {
   if (isOpen) {
     return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/_jsx__default["default"](styles.StyledDialogBackground, {
       onClick: handleOutsideClick,
-      "data-portalbg": true
+      "data-portalbg": true,
+      "data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND
     }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {})), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
       role: "dialog",
       "aria-modal": true,
@@ -75,6 +77,7 @@ const DSDialog = props => {
     }, utils.getSpaceProps(rest)), {}, {
       size: size,
       centered: centered,
+      "data-testid": DSDialogDatatestid.DSDialogDatatestid.CONTAINER,
       children: children
     }))), document.getElementsByTagName('body')[0]);
   }

package/cjs/DSDialogDatatestid.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const DSDialogDatatestid = {
+  CONTAINER: 'ds-dialog-container',
+  BACKGROUND: 'ds-dialog-background'
+};
+
+exports.DSDialogDatatestid = DSDialogDatatestid;

package/cjs/DSDialogTypes.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/defaultProps.js

@@ -2,12 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var utils = require('./utils.js');
+
+const noop = () => {};
+
 const defaultProps = {
   isOpen: false,
   centered: false,
-  size: 'default',
+  size: utils.DSDialogSizes.DEFAULT,
   removeAutoFocus: false,
-  onClickOutside: () => {}
+  onClickOutside: noop
 };
 
 exports.defaultProps = defaultProps;

package/cjs/index.js

@@ -3,12 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DSDialog = require('./DSDialog.js');
+var DSDialogDatatestid = require('./DSDialogDatatestid.js');
+var utils = require('./utils.js');
 var styles = require('./styles.js');
 
 
 
 exports.DSDialog = DSDialog.DSDialog;
 exports.DSDialogWithSchema = DSDialog.DSDialogWithSchema;
+exports.DSDialogDatatestid = DSDialogDatatestid.DSDialogDatatestid;
+exports.DSDialogSizes = utils.DSDialogSizes;
 exports.DSDialogAddon = styles.DSDialogAddon;
 exports.DSDialogBody = styles.DSDialogBody;
 exports.DSDialogDefaultLayout = styles.DSDialogDefaultLayout;

package/cjs/propTypes.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var reactDesc = require('react-desc');
+var utils = require('./utils.js');
 
 /* eslint-disable max-len */
 const propTypes = {
   isOpen: reactDesc.PropTypes.bool.description('Wether the Dialog is open or not.').defaultValue(false),
   children: reactDesc.PropTypes.node.description('Nested components.').isRequired,
   centered: reactDesc.PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
+  size: reactDesc.PropTypes.oneOf(utils.DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(utils.DSDialogSizes.DEFAULT),
   removeAutoFocus: reactDesc.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: reactDesc.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(() => {})
 };

package/cjs/styles.js

@@ -6,6 +6,7 @@ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiter
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 var styledSystem = require('styled-system');
+var utils = require('./utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,21 +14,13 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_tagged
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _templateObject;
-const allSizes = {
-  default: '576px',
-  small: '320px',
-  medium: '656px',
-  large: '848px',
-  'x-large': '1042px',
-  'xx-large': '1440px'
-};
 const FixedBody = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  body {\n    overflow: hidden;\n  }\n"])));
 const StyledDialogBackground = /*#__PURE__*/styled__default["default"].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;"]);
 const StyledDialogContainer = /*#__PURE__*/styled__default["default"].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:scroll;", " &:focus{outline:none;}"], _ref => {
+})(["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;}"], _ref => {
   let {
     centered
   } = _ref;
@@ -36,7 +29,7 @@ const StyledDialogContainer = /*#__PURE__*/styled__default["default"].div.withCo
   let {
     size
   } = _ref2;
-  return allSizes[size];
+  return utils.allSizes[size];
 }, _ref3 => {
   let {
     theme

package/cjs/utils.js

@@ -11,5 +11,25 @@ const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_
   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

@@ -14,6 +14,7 @@ import { StyledDialogBackground, FixedBody, StyledDialogContainer } from './styl
 import { propTypes } from './propTypes.js';
 import { defaultProps } from './defaultProps.js';
 import { getSpaceProps } from './utils.js';
+import { DSDialogDatatestid } from './DSDialogDatatestid.js';
 import { jsx } from 'react/jsx-runtime';
 
 var _FixedBody;
@@ -26,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 const DSDialog = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  useValidateTypescriptPropTypes(propsWithDefault, DSDialogWithSchema.toTypescript());
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
 
   const {
     children,
@@ -54,7 +55,8 @@ const DSDialog = props => {
   if (isOpen) {
     return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(StyledDialogBackground, {
       onClick: handleOutsideClick,
-      "data-portalbg": true
+      "data-portalbg": true,
+      "data-testid": DSDialogDatatestid.BACKGROUND
     }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {})), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
       role: "dialog",
       "aria-modal": true,
@@ -64,6 +66,7 @@ const DSDialog = props => {
     }, getSpaceProps(rest)), {}, {
       size: size,
       centered: centered,
+      "data-testid": DSDialogDatatestid.CONTAINER,
       children: children
     }))), document.getElementsByTagName('body')[0]);
   }

package/esm/DSDialogDatatestid.js

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

package/esm/DSDialogTypes.js

@@ -0,0 +1 @@
+

package/esm/defaultProps.js

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

package/esm/index.js

@@ -1,2 +1,4 @@
 export { DSDialog, DSDialogWithSchema } from './DSDialog.js';
+export { DSDialogDatatestid } from './DSDialogDatatestid.js';
+export { DSDialogSizes } from './utils.js';
 export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle } from './styles.js';

package/esm/propTypes.js

@@ -1,10 +1,12 @@
 import { PropTypes } from 'react-desc';
+import { DSDialogSizesArrayValues, DSDialogSizes } from './utils.js';
 
 /* eslint-disable max-len */
 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(() => {})
 };

package/esm/styles.js

@@ -2,23 +2,16 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLit
 import styled from 'styled-components';
 import { createGlobalStyle } from '@elliemae/ds-system';
 import { space, layout, flexbox } from 'styled-system';
+import { allSizes } from './utils.js';
 
 var _templateObject;
-const allSizes = {
-  default: '576px',
-  small: '320px',
-  medium: '656px',
-  large: '848px',
-  'x-large': '1042px',
-  'xx-large': '1440px'
-};
 const FixedBody = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    overflow: hidden;\n  }\n"])));
 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;"]);
 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:scroll;", " &:focus{outline:none;}"], _ref => {
+})(["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;}"], _ref => {
   let {
     centered
   } = _ref;

package/esm/utils.js

@@ -7,5 +7,22 @@ const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_
   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 { getSpaceProps };
+export { DSDialogSizes, DSDialogSizesArrayValues, allSizes, getSpaceProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "2.0.0-rc.5",
+  "version": "2.0.0-rc.6",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dialog",
   "module": "./esm/index.js",
@@ -15,10 +15,6 @@
       "import": "./esm/utils.js",
       "require": "./cjs/utils.js"
     },
-    "./types": {
-      "import": "./esm/types/index.d.js",
-      "require": "./cjs/types/index.d.js"
-    },
     "./styles": {
       "import": "./esm/styles.js",
       "require": "./cjs/styles.js"
@@ -27,6 +23,18 @@
       "import": "./esm/propTypes.js",
       "require": "./cjs/propTypes.js"
     },
+    "./DSDialogTypes": {
+      "import": "./esm/DSDialogTypes.js",
+      "require": "./cjs/DSDialogTypes.js"
+    },
+    "./DSDialogInternalTypes.d": {
+      "import": "./esm/DSDialogInternalTypes.d.js",
+      "require": "./cjs/DSDialogInternalTypes.d.js"
+    },
+    "./DSDialogDatatestid": {
+      "import": "./esm/DSDialogDatatestid.js",
+      "require": "./cjs/DSDialogDatatestid.js"
+    },
     "./DSDialog": {
       "import": "./esm/DSDialog.js",
       "require": "./cjs/DSDialog.js"
@@ -56,8 +64,8 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.0.0-rc.5",
-    "@elliemae/ds-system": "2.0.0-rc.5",
+    "@elliemae/ds-props-helpers": "2.0.0-rc.6",
+    "@elliemae/ds-system": "2.0.0-rc.6",
     "react-desc": "~4.1.3",
     "styled-system": "~5.1.5"
   },

package/types/DSDialog.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import type { DSDialogPropsT } from './types/index.d';
+import type { DSDialogPropsT } from './DSDialogTypes';
 declare const DSDialog: {
     (props: DSDialogPropsT): React.ReactNode;
     propTypes: {
         isOpen: any;
         children: any;
         centered: any;
+        size: any;
         removeAutoFocus: any;
         onClickOutside: any;
     };

package/types/DSDialogDatatestid.d.ts

@@ -0,0 +1,4 @@
+export declare const DSDialogDatatestid: {
+    CONTAINER: string;
+    BACKGROUND: string;
+};

package/types/DSDialogTypes.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type Sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+export interface DSDialogPropsT {
+    isOpen?: boolean;
+    children: React.ReactNode;
+    onClickOutside?: () => void;
+    size?: Sizes;
+    centered?: boolean;
+    removeAutoFocus?: boolean;
+}

package/types/defaultProps.d.ts

@@ -1,2 +1,2 @@
-import type { DSDialogPropsT } from './types/index.d';
-export declare const defaultProps: Partial<DSDialogPropsT>;
+import type { DSDialogDefaultPropsT } from './DSDialogInternalTypes';
+export declare const defaultProps: DSDialogDefaultPropsT;

package/types/index.d.ts

@@ -1,2 +1,4 @@
 export * from './DSDialog';
+export * from './DSDialogDatatestid';
+export { DSDialogSizes } from './utils';
 export { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage, } from './styles';

package/types/propTypes.d.ts

@@ -2,6 +2,7 @@ export declare const propTypes: {
     isOpen: any;
     children: any;
     centered: any;
+    size: any;
     removeAutoFocus: any;
     onClickOutside: any;
 };

package/types/styles.d.ts

@@ -1,15 +1,15 @@
-import type { StyledDialogContainerT } from './types/index.d';
+import type { StyledDialogContainerT } from './DSDialogInternalTypes';
 export declare const FixedBody: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
-export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", any, StyledDialogContainerT, never>;
-export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const DSDialogAddon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DSDialogHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DSDialogSeparator: import("styled-components").StyledComponent<"hr", any, {
+export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledDialogContainerT, never>;
+export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogAddon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogSeparator: import("styled-components").StyledComponent<"hr", import("styled-components").DefaultTheme, {
     'aria-hidden': true;
 }, "aria-hidden">;
-export declare const DSDialogBody: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DSDialogPrimaryMessage: import("styled-components").StyledComponent<"h3", any, {}, never>;
-export declare const DSDialogSecondaryMessage: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const DSDialogDefaultLayout: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DSDialogFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DSDialogBody: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogPrimaryMessage: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogSecondaryMessage: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogDefaultLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DSDialogFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/types/utils.d.ts

@@ -1,2 +1,19 @@
-import type { GetSpaceArgsT } from './types/index.d';
+import type { GetSpaceArgsT } from './DSDialogInternalTypes';
 export declare const getSpaceProps: (props: GetSpaceArgsT) => GetSpaceArgsT;
+export declare const DSDialogSizes: {
+    readonly DEFAULT: "default";
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+    readonly XLARGE: "x-large";
+    readonly XXLARGE: "xx-large";
+};
+export declare const DSDialogSizesArrayValues: ("default" | "small" | "medium" | "large" | "x-large" | "xx-large")[];
+export declare const allSizes: {
+    default: string;
+    small: string;
+    medium: string;
+    large: string;
+    'x-large': string;
+    'xx-large': string;
+};

package/types/types/index.d.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-export declare type sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
-export interface DSDialogPropsT {
-    isOpen?: boolean;
-    children: React.ReactNode;
-    onClickOutside?: () => void;
-    size?: sizes;
-    centered?: boolean;
-    removeAutoFocus?: boolean;
-}
-export interface StyledDialogContainerT {
-    size?: sizes;
-    centered?: boolean;
-}
-export declare type DSDialogPropsWithDefaultT = Required<DSDialogPropsT>;
-export declare type GetSpaceArgsT = Partial<Record<string, string | number>>;