@elliemae/ds-dialog 2.4.2-rc.3 → 2.4.3-rc.0

package/cjs/DSDialogCTX.js

@@ -3,19 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
-var defaultProps = require('./defaultProps.js');
 
-const defaultContext = {
-  props: defaultProps.defaultProps,
-  actualPortalRef: /*#__PURE__*/react.createRef(),
-  containerRef: /*#__PURE__*/react.createRef(),
-  portalClassName: '',
-  portalInfo: {
-    overflow: false,
-    paddingRight: '0px',
-    scrollbarWidth: '0px'
-  }
-};
+const defaultContext = {};
 const DSDialogContext = /*#__PURE__*/react.createContext(defaultContext);
 
 exports.DSDialogContext = DSDialogContext;

package/cjs/config/useDialog.js

@@ -2,19 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
 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 react = require('react');
 var lodash = require('lodash');
 var uid = require('uid');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var defaultProps = require('../defaultProps.js');
 var propTypes = require('../propTypes.js');
+var utils = require('../utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -34,10 +34,9 @@ const useDialog = props => {
   const containerRef = react.useRef(null);
   const [portalInfo, setPortalInfo] = react.useState({
     paddingRight: '0px',
-    scrollbarWidth: '0px',
-    overflow: false
+    scrollbarWidth: '0px'
   });
-  const portalClassName = react.useMemo(() => "ds-dialog-".concat(uid.uid(8)), []);
+  const portalClassName = react.useMemo(() => `ds-dialog-${uid.uid(8)}`, []);
   react.useEffect(() => {
     if (portalRef) actualPortalRef.current = portalRef.current;else actualPortalRef.current = document.getElementsByTagName('body')['0'];
   }, [portalRef]);
@@ -52,38 +51,28 @@ const useDialog = props => {
   }, [actualPortalRef, isOpen, portalClassName]);
   react.useEffect(() => {
     if (actualPortalRef.current) {
-      var _window$getComputedSt;
-
-      const paddingRight = (_window$getComputedSt = window.getComputedStyle(actualPortalRef.current, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
       setPortalInfo(prev => _objectSpread(_objectSpread({}, prev), {}, {
-        paddingRight
+        paddingRight: utils.getCurrentRightPadding(actualPortalRef.current)
       }));
     }
   }, []);
-  const calculateScrollbarAndOverflow = react.useCallback(() => {
-    if (actualPortalRef.current) {
-      const body = actualPortalRef.current;
-      const {
-        clientWidth,
-        clientHeight,
-        scrollHeight
-      } = body;
+  const calculateScrollbar = react.useCallback(() => {
+    if (actualPortalRef.current && !isOpen) {
       setPortalInfo(prev => _objectSpread(_objectSpread({}, prev), {}, {
-        scrollbarWidth: "".concat(window.innerWidth - clientWidth, "px"),
-        overflow: scrollHeight > clientHeight
+        scrollbarWidth: utils.getScrollbarWidth(actualPortalRef.current)
       }));
     }
-  }, [actualPortalRef]);
-  const debouncedCalculateScrollbarAndOverflow = react.useMemo(() => lodash.debounce(calculateScrollbarAndOverflow, 300), [calculateScrollbarAndOverflow]);
+  }, [isOpen]);
+  const debouncedCalculateScrollbar = react.useMemo(() => lodash.debounce(calculateScrollbar, 300), [calculateScrollbar]);
   react.useEffect(() => {
-    window.addEventListener('resize', debouncedCalculateScrollbarAndOverflow);
+    window.addEventListener('resize', debouncedCalculateScrollbar);
     return () => {
-      window.removeEventListener('resize', debouncedCalculateScrollbarAndOverflow);
+      window.removeEventListener('resize', debouncedCalculateScrollbar);
     };
-  }, [calculateScrollbarAndOverflow, debouncedCalculateScrollbarAndOverflow]);
+  }, [calculateScrollbar, debouncedCalculateScrollbar]);
   react.useEffect(() => {
-    calculateScrollbarAndOverflow();
-  }, [calculateScrollbarAndOverflow]);
+    calculateScrollbar();
+  }, [calculateScrollbar, isOpen]);
   const ctx = react.useMemo(() => ({
     props: propsWithDefault,
     actualPortalRef,

package/cjs/parts/dialogContent/useDialogContent.js

@@ -21,16 +21,12 @@ const useDialogContent = () => {
     if (e.key === 'Escape') onClose();
   }, [onClose]);
   react.useEffect(() => {
-    var _containerRef$current;
-
-    if (!removeAutoFocus) containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
+    if (!removeAutoFocus) containerRef?.current?.focus();
   }, [containerRef, removeAutoFocus]);
   const focusContainer = react.useCallback(() => {
     setTimeout(() => {
-      var _containerRef$current2, _containerRef$current3, _containerRef$current4;
-
-      const isContainerOrChildFocused = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.contains(document.activeElement);
-      if (!isContainerOrChildFocused) (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : (_containerRef$current4 = _containerRef$current3.focus) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.call(_containerRef$current3);
+      const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);
+      if (!isContainerOrChildFocused) containerRef.current?.focus?.();
     });
   }, [containerRef]);
   react.useEffect(() => {

package/cjs/propTypes.js

@@ -25,7 +25,7 @@ const propTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalAttribute
   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(() => {}),
-  size: dsPropsHelpers.PropTypes.oneOf(utils.DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(utils.DSDialogSizes.DEFAULT)
+  size: dsPropsHelpers.PropTypes.oneOf(utils.DSDialogSizesArrayValues).description(`Dialog's width size.`).defaultValue(utils.DSDialogSizes.DEFAULT)
 });
 
 exports.propTypes = propTypes;

package/cjs/styles.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var styled = require('styled-components');
 var dsSystem = require('@elliemae/ds-system');
 var styledComponents = require('@xstyled/styled-components');
@@ -10,21 +9,25 @@ var utils = require('./utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject;
-const PortalStyles = dsSystem.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  ", " {\n    overflow: hidden;\n    ", "\n  }\n"])), _ref => {
+/* eslint-disable max-lines */
+const PortalStyles = dsSystem.createGlobalStyle`
+  ${_ref => {
   let {
     portalClassName
   } = _ref;
-  return ".".concat(portalClassName);
-}, _ref2 => {
+  return `.${portalClassName}`;
+}} {
+    overflow: hidden;
+    ${_ref2 => {
   let {
     portalInfo
   } = _ref2;
-  return portalInfo.overflow ? "padding-right: calc( ".concat(portalInfo.paddingRight, " + ").concat(portalInfo.scrollbarWidth, " ) !important;") : "";
-});
+  return portalInfo.scrollbarWidth !== '0px' ? `padding-right: calc( ${portalInfo.paddingRight} + ${portalInfo.scrollbarWidth} ) !important;` : ``;
+}}
+  }
+`;
 const StyledDialogBackground = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-0"
 })(["position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref3 => {

package/cjs/utils.js

@@ -5,7 +5,6 @@ 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/web.dom-collections.iterator.js');
 
 const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_ref => {
   let [key] = _ref;
@@ -28,8 +27,12 @@ const allSizes = {
   'x-large': '1042px',
   'xx-large': '1440px'
 };
+const getScrollbarWidth = element => element.tagName === 'BODY' ? `${window.innerWidth - element.clientWidth}px` : `${element.offsetWidth - element.clientWidth}px`;
+const getCurrentRightPadding = element => window.getComputedStyle(element, null)?.getPropertyValue('padding-right');
 
 exports.DSDialogSizes = DSDialogSizes;
 exports.DSDialogSizesArrayValues = DSDialogSizesArrayValues;
 exports.allSizes = allSizes;
+exports.getCurrentRightPadding = getCurrentRightPadding;
+exports.getScrollbarWidth = getScrollbarWidth;
 exports.getSpaceProps = getSpaceProps;

package/esm/DSDialogCTX.js

@@ -1,17 +1,6 @@
-import { createContext, createRef } from 'react';
-import { defaultProps } from './defaultProps.js';
+import { createContext } from 'react';
 
-const defaultContext = {
-  props: defaultProps,
-  actualPortalRef: /*#__PURE__*/createRef(),
-  containerRef: /*#__PURE__*/createRef(),
-  portalClassName: '',
-  portalInfo: {
-    overflow: false,
-    paddingRight: '0px',
-    scrollbarWidth: '0px'
-  }
-};
+const defaultContext = {};
 const DSDialogContext = /*#__PURE__*/createContext(defaultContext);
 
 export { DSDialogContext };

package/esm/config/useDialog.js

@@ -1,16 +1,16 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
 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 { useRef, useState, useMemo, useEffect, useLayoutEffect, useCallback } from 'react';
 import { debounce } from 'lodash';
 import { uid } from 'uid';
 import { useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
 import { defaultProps } from '../defaultProps.js';
 import { propTypes } from '../propTypes.js';
+import { getCurrentRightPadding, getScrollbarWidth } 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; }
 
@@ -26,10 +26,9 @@ const useDialog = props => {
   const containerRef = useRef(null);
   const [portalInfo, setPortalInfo] = useState({
     paddingRight: '0px',
-    scrollbarWidth: '0px',
-    overflow: false
+    scrollbarWidth: '0px'
   });
-  const portalClassName = useMemo(() => "ds-dialog-".concat(uid(8)), []);
+  const portalClassName = useMemo(() => `ds-dialog-${uid(8)}`, []);
   useEffect(() => {
     if (portalRef) actualPortalRef.current = portalRef.current;else actualPortalRef.current = document.getElementsByTagName('body')['0'];
   }, [portalRef]);
@@ -44,38 +43,28 @@ const useDialog = props => {
   }, [actualPortalRef, isOpen, portalClassName]);
   useEffect(() => {
     if (actualPortalRef.current) {
-      var _window$getComputedSt;
-
-      const paddingRight = (_window$getComputedSt = window.getComputedStyle(actualPortalRef.current, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
       setPortalInfo(prev => _objectSpread(_objectSpread({}, prev), {}, {
-        paddingRight
+        paddingRight: getCurrentRightPadding(actualPortalRef.current)
       }));
     }
   }, []);
-  const calculateScrollbarAndOverflow = useCallback(() => {
-    if (actualPortalRef.current) {
-      const body = actualPortalRef.current;
-      const {
-        clientWidth,
-        clientHeight,
-        scrollHeight
-      } = body;
+  const calculateScrollbar = useCallback(() => {
+    if (actualPortalRef.current && !isOpen) {
       setPortalInfo(prev => _objectSpread(_objectSpread({}, prev), {}, {
-        scrollbarWidth: "".concat(window.innerWidth - clientWidth, "px"),
-        overflow: scrollHeight > clientHeight
+        scrollbarWidth: getScrollbarWidth(actualPortalRef.current)
       }));
     }
-  }, [actualPortalRef]);
-  const debouncedCalculateScrollbarAndOverflow = useMemo(() => debounce(calculateScrollbarAndOverflow, 300), [calculateScrollbarAndOverflow]);
+  }, [isOpen]);
+  const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);
   useEffect(() => {
-    window.addEventListener('resize', debouncedCalculateScrollbarAndOverflow);
+    window.addEventListener('resize', debouncedCalculateScrollbar);
     return () => {
-      window.removeEventListener('resize', debouncedCalculateScrollbarAndOverflow);
+      window.removeEventListener('resize', debouncedCalculateScrollbar);
     };
-  }, [calculateScrollbarAndOverflow, debouncedCalculateScrollbarAndOverflow]);
+  }, [calculateScrollbar, debouncedCalculateScrollbar]);
   useEffect(() => {
-    calculateScrollbarAndOverflow();
-  }, [calculateScrollbarAndOverflow]);
+    calculateScrollbar();
+  }, [calculateScrollbar, isOpen]);
   const ctx = useMemo(() => ({
     props: propsWithDefault,
     actualPortalRef,

package/esm/parts/dialogContent/useDialogContent.js

@@ -17,16 +17,12 @@ const useDialogContent = () => {
     if (e.key === 'Escape') onClose();
   }, [onClose]);
   useEffect(() => {
-    var _containerRef$current;
-
-    if (!removeAutoFocus) containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
+    if (!removeAutoFocus) containerRef?.current?.focus();
   }, [containerRef, removeAutoFocus]);
   const focusContainer = useCallback(() => {
     setTimeout(() => {
-      var _containerRef$current2, _containerRef$current3, _containerRef$current4;
-
-      const isContainerOrChildFocused = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.contains(document.activeElement);
-      if (!isContainerOrChildFocused) (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : (_containerRef$current4 = _containerRef$current3.focus) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.call(_containerRef$current3);
+      const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);
+      if (!isContainerOrChildFocused) containerRef.current?.focus?.();
     });
   }, [containerRef]);
   useEffect(() => {

package/esm/propTypes.js

@@ -17,7 +17,7 @@ const propTypes = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}
   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)
+  size: PropTypes.oneOf(DSDialogSizesArrayValues).description(`Dialog's width size.`).defaultValue(DSDialogSizes.DEFAULT)
 });
 
 export { propTypes };

package/esm/styles.js

@@ -1,21 +1,25 @@
-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 PortalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    overflow: hidden;\n    ", "\n  }\n"])), _ref => {
+/* eslint-disable max-lines */
+const PortalStyles = createGlobalStyle`
+  ${_ref => {
   let {
     portalClassName
   } = _ref;
-  return ".".concat(portalClassName);
-}, _ref2 => {
+  return `.${portalClassName}`;
+}} {
+    overflow: hidden;
+    ${_ref2 => {
   let {
     portalInfo
   } = _ref2;
-  return portalInfo.overflow ? "padding-right: calc( ".concat(portalInfo.paddingRight, " + ").concat(portalInfo.scrollbarWidth, " ) !important;") : "";
-});
+  return portalInfo.scrollbarWidth !== '0px' ? `padding-right: calc( ${portalInfo.paddingRight} + ${portalInfo.scrollbarWidth} ) !important;` : ``;
+}}
+  }
+`;
 const StyledDialogBackground = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-0"
 })(["position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;background:rgba(37,41,47,50%);overflow-y:auto;z-index:", ";"], _ref3 => {

package/esm/utils.js

@@ -1,7 +1,6 @@
 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;
@@ -24,5 +23,7 @@ const allSizes = {
   'x-large': '1042px',
   'xx-large': '1440px'
 };
+const getScrollbarWidth = element => element.tagName === 'BODY' ? `${window.innerWidth - element.clientWidth}px` : `${element.offsetWidth - element.clientWidth}px`;
+const getCurrentRightPadding = element => window.getComputedStyle(element, null)?.getPropertyValue('padding-right');
 
-export { DSDialogSizes, DSDialogSizesArrayValues, allSizes, getSpaceProps };
+export { DSDialogSizes, DSDialogSizesArrayValues, allSizes, getCurrentRightPadding, getScrollbarWidth, getSpaceProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "2.4.2-rc.3",
+  "version": "2.4.3-rc.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dialog",
   "module": "./esm/index.js",
@@ -80,10 +80,10 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.4.2-rc.3",
-    "@elliemae/ds-icons": "2.4.2-rc.3",
-    "@elliemae/ds-props-helpers": "2.4.2-rc.3",
-    "@elliemae/ds-system": "2.4.2-rc.3",
+    "@elliemae/ds-button": "2.4.3-rc.0",
+    "@elliemae/ds-icons": "2.4.3-rc.0",
+    "@elliemae/ds-props-helpers": "2.4.3-rc.0",
+    "@elliemae/ds-system": "2.4.3-rc.0",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {

package/types/sharedTypes.d.ts

@@ -2,7 +2,6 @@
 import type { DSDialogT } from './propTypes';
 export declare namespace DSDialogInternalsT {
     interface PortalInfo {
-        overflow: boolean;
         scrollbarWidth: string;
         paddingRight: string;
     }

package/types/utils.d.ts

@@ -18,3 +18,5 @@ export declare const allSizes: {
     'x-large': string;
     'xx-large': string;
 };
+export declare const getScrollbarWidth: (element: HTMLElement) => string;
+export declare const getCurrentRightPadding: (element: HTMLElement) => string;