@elliemae/ds-dialog 2.3.0-next.1 → 2.3.0-next.14

package/cjs/DSDialog.js

@@ -28,7 +28,8 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
-const _excluded = ["children", "isOpen", "onClickOutside", "onClose", "centered", "size", "removeAutoFocus", "zIndex"];
+const _excluded = ["children", "isOpen", "onClickOutside", "onClose", "centered", "size", "removeAutoFocus", "zIndex"],
+      _excluded2 = ["className"];
 
 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; }
 
@@ -60,19 +61,25 @@ const DSDialog = props => {
   const handleOutsideClick = react.useCallback(e => {
     if (e.target.dataset.portalbg) onClickOutside();
   }, [onClickOutside]);
-  const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault, {
-    onClick: handleOutsideClick
-  });
   const handleOnKeyDown = react.useCallback(e => {
     if (e.key === 'Escape') onClose();
-    if (globalAttributes.onKeyDown) globalAttributes.onKeyDown(e);
-  }, [globalAttributes, onClose]);
+  }, [onClose]);
+
+  const _useGetGlobalAttribut = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault, {
+    onClick: handleOutsideClick,
+    onKeyDown: handleOnKeyDown
+  }),
+        {
+    className
+  } = _useGetGlobalAttribut,
+        restOfGlobalAttributes = _objectWithoutProperties__default["default"](_useGetGlobalAttribut, _excluded2);
+
   react.useEffect(() => {
     var _window$getComputedSt;
 
     const body = document.getElementsByTagName('body')[0];
     const {
-      offsetHeight,
+      clientHeight,
       scrollHeight
     } = body;
     const padding = (_window$getComputedSt = window.getComputedStyle(body, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
@@ -81,7 +88,7 @@ const DSDialog = props => {
       padding: '0px'
     });
     return setBodyInfo({
-      overflow: offsetHeight < scrollHeight,
+      overflow: scrollHeight > clientHeight,
       padding
     });
   }, [isOpen]);
@@ -93,6 +100,7 @@ const DSDialog = props => {
 
   if (isOpen) {
     return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/_jsx__default["default"](styles.StyledDialogBackground, {
+      className: className,
       onClick: handleOutsideClick,
       "data-portalbg": true,
       "data-testid": DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
@@ -108,8 +116,7 @@ const DSDialog = props => {
       size: size,
       centered: centered,
       "data-testid": DSDialogDatatestid.DSDialogDatatestid.CONTAINER
-    }, globalAttributes), {}, {
-      onKeyDown: handleOnKeyDown,
+    }, restOfGlobalAttributes), {}, {
       children: children
     }))), document.getElementsByTagName('body')[0]);
   }

package/cjs/propTypes.js

@@ -18,14 +18,13 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 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(_objectSpread({
+const propTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), {}, {
   isOpen: dsPropsHelpers.PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),
   children: dsPropsHelpers.PropTypes.node.description('Nested components.').isRequired,
   centered: dsPropsHelpers.PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
   removeAutoFocus: dsPropsHelpers.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: dsPropsHelpers.PropTypes.func.description('Callback that should be used to close the modal when the user clicks outside.').defaultValue(() => {}),
-  onClose: dsPropsHelpers.PropTypes.func.description('Callback triggered with ESC key.').defaultValue(() => {})
-}, dsPropsHelpers.globalAttributesPropTypes), {}, {
+  onClose: dsPropsHelpers.PropTypes.func.description('Callback triggered with ESC key.').defaultValue(() => {}),
   size: dsPropsHelpers.PropTypes.oneOf(utils.DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(utils.DSDialogSizes.DEFAULT)
 });
 

package/esm/DSDialog.js

@@ -17,7 +17,8 @@ import { getSpaceProps } from './utils.js';
 import { DSDialogDatatestid } from './DSDialogDatatestid.js';
 import { jsx } from 'react/jsx-runtime';
 
-const _excluded = ["children", "isOpen", "onClickOutside", "onClose", "centered", "size", "removeAutoFocus", "zIndex"];
+const _excluded = ["children", "isOpen", "onClickOutside", "onClose", "centered", "size", "removeAutoFocus", "zIndex"],
+      _excluded2 = ["className"];
 
 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; }
 
@@ -49,19 +50,25 @@ const DSDialog = props => {
   const handleOutsideClick = useCallback(e => {
     if (e.target.dataset.portalbg) onClickOutside();
   }, [onClickOutside]);
-  const globalAttributes = useGetGlobalAttributes(propsWithDefault, {
-    onClick: handleOutsideClick
-  });
   const handleOnKeyDown = useCallback(e => {
     if (e.key === 'Escape') onClose();
-    if (globalAttributes.onKeyDown) globalAttributes.onKeyDown(e);
-  }, [globalAttributes, onClose]);
+  }, [onClose]);
+
+  const _useGetGlobalAttribut = useGetGlobalAttributes(propsWithDefault, {
+    onClick: handleOutsideClick,
+    onKeyDown: handleOnKeyDown
+  }),
+        {
+    className
+  } = _useGetGlobalAttribut,
+        restOfGlobalAttributes = _objectWithoutProperties(_useGetGlobalAttribut, _excluded2);
+
   useEffect(() => {
     var _window$getComputedSt;
 
     const body = document.getElementsByTagName('body')[0];
     const {
-      offsetHeight,
+      clientHeight,
       scrollHeight
     } = body;
     const padding = (_window$getComputedSt = window.getComputedStyle(body, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
@@ -70,7 +77,7 @@ const DSDialog = props => {
       padding: '0px'
     });
     return setBodyInfo({
-      overflow: offsetHeight < scrollHeight,
+      overflow: scrollHeight > clientHeight,
       padding
     });
   }, [isOpen]);
@@ -82,6 +89,7 @@ const DSDialog = props => {
 
   if (isOpen) {
     return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(StyledDialogBackground, {
+      className: className,
       onClick: handleOutsideClick,
       "data-portalbg": true,
       "data-testid": DSDialogDatatestid.BACKGROUND,
@@ -97,8 +105,7 @@ const DSDialog = props => {
       size: size,
       centered: centered,
       "data-testid": DSDialogDatatestid.CONTAINER
-    }, globalAttributes), {}, {
-      onKeyDown: handleOnKeyDown,
+    }, restOfGlobalAttributes), {}, {
       children: children
     }))), document.getElementsByTagName('body')[0]);
   }

package/esm/propTypes.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "2.3.0-next.1",
+  "version": "2.3.0-next.14",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dialog",
   "module": "./esm/index.js",
@@ -60,8 +60,10 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.3.0-next.1",
-    "@elliemae/ds-system": "2.3.0-next.1",
+    "@elliemae/ds-button": "2.3.0-next.14",
+    "@elliemae/ds-icons": "2.3.0-next.14",
+    "@elliemae/ds-props-helpers": "2.3.0-next.14",
+    "@elliemae/ds-system": "2.3.0-next.14",
     "@xstyled/styled-components": "~3.1.1",
     "react-desc": "~4.1.3"
   },