@elliemae/ds-dialog 2.4.2-rc.12 → 2.4.2-rc.15

package/cjs/config/useDialog.js

@@ -2,13 +2,12 @@
 
 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');
@@ -37,7 +36,7 @@ const useDialog = props => {
     paddingRight: '0px',
     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]);

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.scrollbarWidth !== '0px' ? "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,12 +27,8 @@ 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');
-};
+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;

package/esm/config/useDialog.js

@@ -4,7 +4,6 @@ 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';
@@ -29,7 +28,7 @@ const useDialog = props => {
     paddingRight: '0px',
     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]);

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.scrollbarWidth !== '0px' ? "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,11 +23,7 @@ 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');
-};
+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, getCurrentRightPadding, getScrollbarWidth, getSpaceProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "2.4.2-rc.12",
+  "version": "2.4.2-rc.15",
   "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.12",
-    "@elliemae/ds-icons": "2.4.2-rc.12",
-    "@elliemae/ds-props-helpers": "2.4.2-rc.12",
-    "@elliemae/ds-system": "2.4.2-rc.12",
+    "@elliemae/ds-button": "2.4.2-rc.15",
+    "@elliemae/ds-icons": "2.4.2-rc.15",
+    "@elliemae/ds-props-helpers": "2.4.2-rc.15",
+    "@elliemae/ds-system": "2.4.2-rc.15",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {