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

package/cjs/DSDialog.js

@@ -74,27 +74,32 @@ const DSDialog = props => {
 
     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 = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault, {
+    onClick: handleOutsideClick
+  });
 
   if (isOpen) {
-    return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/_jsx__default["default"](styles.StyledDialogBackground, {
+    return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/jsxRuntime.jsxs(styles.StyledDialogBackground, _objectSpread(_objectSpread({
       onClick: handleOutsideClick,
       "data-portalbg": true,
       "data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
       zIndex: zIndex
-    }, void 0, _FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {
-      isBodyOverflow: isBodyOverflow
-    })), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
-      role: "dialog",
-      "aria-modal": true,
-      ref: containerRef,
-      tabIndex: !removeAutoFocus ? 0 : undefined,
-      onKeyDown: handleOnKeyDown
-    }, utils.getSpaceProps(rest)), {}, {
-      size: size,
-      centered: centered,
-      "data-testid": DSDialogDatatestid.DSDialogDatatestid.CONTAINER,
-      children: children
-    }))), document.getElementsByTagName('body')[0]);
+    }, globalAttributes), {}, {
+      children: [_FixedBody || (_FixedBody = /*#__PURE__*/_jsx__default["default"](styles.FixedBody, {
+        isBodyOverflow: isBodyOverflow
+      })), /*#__PURE__*/jsxRuntime.jsx(styles.StyledDialogContainer, _objectSpread(_objectSpread({
+        role: "dialog",
+        "aria-modal": true,
+        ref: containerRef,
+        tabIndex: !removeAutoFocus ? 0 : undefined,
+        onKeyDown: handleOnKeyDown
+      }, utils.getSpaceProps(rest)), {}, {
+        size: size,
+        centered: centered,
+        "data-testid": DSDialogDatatestid.DSDialogDatatestid.CONTAINER,
+        children: children
+      }))]
+    })), document.getElementsByTagName('body')[0]);
   }
 
   return null;

package/cjs/index.js

@@ -2,17 +2,50 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var styles = require('./styles.js');
 var DSDialog = require('./DSDialog.js');
 var DSDialogDatatestid = require('./DSDialogDatatestid.js');
 var utils = require('./utils.js');
-var styles = require('./styles.js');
-
 
+styles.DSDialogBody.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogHeader.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogFooter.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogSeparator.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogTitle.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogAddon.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogDefaultLayout.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogPrimaryMessage.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogSecondaryMessage.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+styles.DSDialogBody.displayName = 'DSDialogBody';
+styles.DSDialogHeader.displayName = 'DSDialogHeader';
+styles.DSDialogFooter.displayName = 'DSDialogFooter';
+styles.DSDialogSeparator.displayName = 'DSDialogSeparator';
+styles.DSDialogTitle.displayName = 'DSDialogTitle';
+styles.DSDialogAddon.displayName = 'DSDialogAddon';
+styles.DSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';
+styles.DSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';
+styles.DSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';
+const DSDialogBodyWithSchema = reactDesc.describe(styles.DSDialogBody);
+const DSDialogHeaderWithSchema = reactDesc.describe(styles.DSDialogHeader);
+const DSDialogFooterWithSchema = reactDesc.describe(styles.DSDialogFooter);
+const DSDialogSeparatorWithSchema = reactDesc.describe(styles.DSDialogSeparator);
+const DSDialogTitleWithSchema = reactDesc.describe(styles.DSDialogTitle);
+const DSDialogAddonWithSchema = reactDesc.describe(styles.DSDialogAddon);
+const DSDialogDefaultLayoutWithSchema = reactDesc.describe(styles.DSDialogDefaultLayout);
+const DSDialogPrimaryMessageWithSchema = reactDesc.describe(styles.DSDialogPrimaryMessage);
+const DSDialogSecondaryMessageWithSchema = reactDesc.describe(styles.DSDialogSecondaryMessage);
+DSDialogBodyWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogHeaderWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogFooterWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogSeparatorWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogTitleWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogAddonWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogDefaultLayoutWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogPrimaryMessageWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
+DSDialogSecondaryMessageWithSchema.propTypes = dsPropsHelpers.globalAttributesPropTypes;
 
-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;
@@ -22,3 +55,16 @@ exports.DSDialogPrimaryMessage = styles.DSDialogPrimaryMessage;
 exports.DSDialogSecondaryMessage = styles.DSDialogSecondaryMessage;
 exports.DSDialogSeparator = styles.DSDialogSeparator;
 exports.DSDialogTitle = styles.DSDialogTitle;
+exports.DSDialog = DSDialog.DSDialog;
+exports.DSDialogWithSchema = DSDialog.DSDialogWithSchema;
+exports.DSDialogDatatestid = DSDialogDatatestid.DSDialogDatatestid;
+exports.DSDialogSizes = utils.DSDialogSizes;
+exports.DSDialogAddonWithSchema = DSDialogAddonWithSchema;
+exports.DSDialogBodyWithSchema = DSDialogBodyWithSchema;
+exports.DSDialogDefaultLayoutWithSchema = DSDialogDefaultLayoutWithSchema;
+exports.DSDialogFooterWithSchema = DSDialogFooterWithSchema;
+exports.DSDialogHeaderWithSchema = DSDialogHeaderWithSchema;
+exports.DSDialogPrimaryMessageWithSchema = DSDialogPrimaryMessageWithSchema;
+exports.DSDialogSecondaryMessageWithSchema = DSDialogSecondaryMessageWithSchema;
+exports.DSDialogSeparatorWithSchema = DSDialogSeparatorWithSchema;
+exports.DSDialogTitleWithSchema = DSDialogTitleWithSchema;

package/cjs/propTypes.js

@@ -2,17 +2,30 @@
 
 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/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var reactDesc = require('react-desc');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 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),
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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: reactDesc.PropTypes.bool.description('Whether 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(() => {})
-};
+}, dsPropsHelpers.globalAttributesPropTypes);
 
 exports.propTypes = propTypes;

package/esm/DSDialog.js

@@ -10,13 +10,13 @@ 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 } from '@elliemae/ds-props-helpers';
+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 { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus", "zIndex"];
 
@@ -63,27 +63,32 @@ const DSDialog = props => {
 
     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__*/_jsx(StyledDialogBackground, {
+    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/jsxs(StyledDialogBackground, _objectSpread(_objectSpread({
       onClick: handleOutsideClick,
       "data-portalbg": true,
       "data-testid": DSDialogDatatestid.BACKGROUND,
       zIndex: zIndex
-    }, void 0, _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]);
+    }, 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;

package/esm/index.js

@@ -1,4 +1,46 @@
+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';
-export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle } from './styles.js';
+
+DSDialogBody.propTypes = globalAttributesPropTypes;
+DSDialogHeader.propTypes = globalAttributesPropTypes;
+DSDialogFooter.propTypes = globalAttributesPropTypes;
+DSDialogSeparator.propTypes = globalAttributesPropTypes;
+DSDialogTitle.propTypes = globalAttributesPropTypes;
+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';
+const DSDialogBodyWithSchema = describe(DSDialogBody);
+const DSDialogHeaderWithSchema = describe(DSDialogHeader);
+const DSDialogFooterWithSchema = describe(DSDialogFooter);
+const DSDialogSeparatorWithSchema = describe(DSDialogSeparator);
+const DSDialogTitleWithSchema = describe(DSDialogTitle);
+const DSDialogAddonWithSchema = describe(DSDialogAddon);
+const DSDialogDefaultLayoutWithSchema = describe(DSDialogDefaultLayout);
+const DSDialogPrimaryMessageWithSchema = describe(DSDialogPrimaryMessage);
+const DSDialogSecondaryMessageWithSchema = describe(DSDialogSecondaryMessage);
+DSDialogBodyWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogHeaderWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogFooterWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogSeparatorWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogTitleWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogAddonWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes;
+DSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes;
+
+export { DSDialogAddonWithSchema, DSDialogBodyWithSchema, DSDialogDefaultLayoutWithSchema, DSDialogFooterWithSchema, DSDialogHeaderWithSchema, DSDialogPrimaryMessageWithSchema, DSDialogSecondaryMessageWithSchema, DSDialogSeparatorWithSchema, DSDialogTitleWithSchema };

package/esm/propTypes.js

@@ -1,14 +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 } from 'react-desc';
+import { globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
 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),
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "3.0.0-next.1",
+  "version": "3.0.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dialog",
   "module": "./esm/index.js",
@@ -64,8 +64,8 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "3.0.0-next.1",
-    "@elliemae/ds-system": "3.0.0-next.1",
+    "@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"
   },