@elliemae/ds-dialog 2.4.2-rc.3 → 2.4.2-rc.9

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

@@ -15,6 +15,7 @@ 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,8 +35,7 @@ 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)), []);
   react.useEffect(() => {
@@ -52,38 +52,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/styles.js

@@ -23,7 +23,7 @@ const PortalStyles = dsSystem.createGlobalStyle(_templateObject || (_templateObj
   let {
     portalInfo
   } = _ref2;
-  return portalInfo.overflow ? "padding-right: calc( ".concat(portalInfo.paddingRight, " + ").concat(portalInfo.scrollbarWidth, " ) !important;") : "";
+  return portalInfo.scrollbarWidth !== '0px' ? "padding-right: calc( ".concat(portalInfo.paddingRight, " + ").concat(portalInfo.scrollbarWidth, " ) !important;") : "";
 });
 const StyledDialogBackground = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-106vqwv-0"

package/cjs/utils.js

@@ -28,8 +28,16 @@ const allSizes = {
   'x-large': '1042px',
   'xx-large': '1440px'
 };
+const getScrollbarWidth = element => element.tagName === 'BODY' ? "".concat(window.innerWidth - element.clientWidth, "px") : "".concat(element.offsetWidth - element.clientWidth, "px");
+const getCurrentRightPadding = element => {
+  var _window$getComputedSt;
+
+  return (_window$getComputedSt = window.getComputedStyle(element, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.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,17 @@
-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 'core-js/modules/web.dom-collections.iterator.js';
 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,8 +27,7 @@ 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)), []);
   useEffect(() => {
@@ -44,38 +44,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/styles.js

@@ -14,7 +14,7 @@ const PortalStyles = createGlobalStyle(_templateObject || (_templateObject = _ta
   let {
     portalInfo
   } = _ref2;
-  return portalInfo.overflow ? "padding-right: calc( ".concat(portalInfo.paddingRight, " + ").concat(portalInfo.scrollbarWidth, " ) !important;") : "";
+  return portalInfo.scrollbarWidth !== '0px' ? "padding-right: calc( ".concat(portalInfo.paddingRight, " + ").concat(portalInfo.scrollbarWidth, " ) !important;") : "";
 });
 const StyledDialogBackground = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-106vqwv-0"

package/esm/utils.js

@@ -24,5 +24,11 @@ const allSizes = {
   'x-large': '1042px',
   'xx-large': '1440px'
 };
+const getScrollbarWidth = element => element.tagName === 'BODY' ? "".concat(window.innerWidth - element.clientWidth, "px") : "".concat(element.offsetWidth - element.clientWidth, "px");
+const getCurrentRightPadding = element => {
+  var _window$getComputedSt;
 
-export { DSDialogSizes, DSDialogSizesArrayValues, allSizes, getSpaceProps };
+  return (_window$getComputedSt = window.getComputedStyle(element, null)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.getPropertyValue('padding-right');
+};
+
+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.2-rc.9",
   "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.2-rc.9",
+    "@elliemae/ds-icons": "2.4.2-rc.9",
+    "@elliemae/ds-props-helpers": "2.4.2-rc.9",
+    "@elliemae/ds-system": "2.4.2-rc.9",
     "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;