@elliemae/ds-dialog 3.0.0-next.9 → 3.0.0-rc.0

package/dist/cjs/parts/DSDialogPortal.js

@@ -0,0 +1,42 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSDialogPortal_exports = {};
+__export(DSDialogPortal_exports, {
+  DSDialogPortal: () => DSDialogPortal
+});
+module.exports = __toCommonJS(DSDialogPortal_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+var import_react2 = require("react");
+var import_DSDialogCTX = require("../DSDialogCTX");
+var import_DSDialogContent = require("./dialogContent/DSDialogContent");
+const DSDialogPortal = () => {
+  const {
+    props: { isOpen },
+    actualPortalRef
+  } = (0, import_react2.useContext)(import_DSDialogCTX.DSDialogContext);
+  if (isOpen && actualPortalRef.current) {
+    return import_react_dom.default.createPortal(/* @__PURE__ */ import_react.default.createElement(import_DSDialogContent.DSDialogContent, null), actualPortalRef.current);
+  }
+  return null;
+};
+//# sourceMappingURL=DSDialogPortal.js.map

package/dist/cjs/parts/DSDialogPortal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/parts/DSDialogPortal.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { useContext } from 'react';\nimport { DSDialogContext } from '../DSDialogCTX';\nimport { DSDialogContent } from './dialogContent/DSDialogContent';\n\nexport const DSDialogPortal = (): JSX.Element | null => {\n  const {\n    props: { isOpen },\n    actualPortalRef,\n  } = useContext(DSDialogContext);\n\n  if (isOpen && actualPortalRef.current) {\n    return ReactDOM.createPortal(<DSDialogContent />, actualPortalRef.current);\n  }\n\n  return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAqB;AACrB,oBAA2B;AAC3B,yBAAgC;AAChC,6BAAgC;AAEzB,MAAM,iBAAiB,MAA0B;AACtD,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT;AAAA,MACE,8BAAW,kCAAe;AAE9B,MAAI,UAAU,gBAAgB,SAAS;AACrC,WAAO,yBAAS,aAAa,mDAAC,4CAAgB,GAAI,gBAAgB,OAAO;AAAA,EAC3E;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/cjs/parts/dialogContent/DSDialogContent.js

@@ -0,0 +1,93 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DSDialogContent_exports = {};
+__export(DSDialogContent_exports, {
+  DSDialogContent: () => DSDialogContent
+});
+module.exports = __toCommonJS(DSDialogContent_exports);
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_styles = require("../../styles");
+var import_utils = require("../../utils");
+var import_DSDialogDatatestid = require("../../DSDialogDatatestid");
+var import_DSDialogCTX = require("../../DSDialogCTX");
+var import_useDialogContent = require("./useDialogContent");
+const DSDialogContent = () => {
+  const { handleOutsideClick, handleOnKeyDown } = (0, import_useDialogContent.useDialogContent)();
+  const { props, containerRef, portalInfo, portalClassName } = (0, import_react.useContext)(import_DSDialogCTX.DSDialogContext);
+  const _a = props, { removeAutoFocus, zIndex, centered, size, children } = _a, rest = __objRest(_a, ["removeAutoFocus", "zIndex", "centered", "size", "children"]);
+  const _b = (0, import_ds_utilities.useGetGlobalAttributes)(props, {
+    onClick: handleOutsideClick,
+    onKeyDown: handleOnKeyDown
+  }), { className } = _b, restOfGlobalAttributes = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledDialogBackground, {
+    className,
+    onClick: handleOutsideClick,
+    "data-portalbg": true,
+    "data-testid": import_DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
+    zIndex
+  }, /* @__PURE__ */ import_react.default.createElement(import_styles.PortalStyles, {
+    portalInfo,
+    portalClassName
+  }), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledDialogContainer, __spreadProps(__spreadValues(__spreadProps(__spreadValues({
+    role: "dialog",
+    "aria-modal": true,
+    ref: containerRef,
+    tabIndex: !removeAutoFocus ? 0 : void 0,
+    onKeyDown: handleOnKeyDown
+  }, (0, import_utils.getSpaceProps)(rest)), {
+    centered,
+    "data-testid": import_DSDialogDatatestid.DSDialogDatatestid.CONTAINER
+  }), restOfGlobalAttributes), {
+    size
+  }), children));
+};
+//# sourceMappingURL=DSDialogContent.js.map

package/dist/cjs/parts/dialogContent/DSDialogContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/dialogContent/DSDialogContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { PortalStyles, StyledDialogBackground, StyledDialogContainer } from '../../styles';\nimport { getSpaceProps } from '../../utils';\nimport { DSDialogDatatestid } from '../../DSDialogDatatestid';\nimport { DSDialogContext } from '../../DSDialogCTX';\nimport { useDialogContent } from './useDialogContent';\n\nexport const DSDialogContent = () => {\n  const { handleOutsideClick, handleOnKeyDown } = useDialogContent();\n  const { props, containerRef, portalInfo, portalClassName } = useContext(DSDialogContext);\n\n  const { removeAutoFocus, zIndex, centered, size, children, ...rest } = props;\n\n  const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(props, {\n    onClick: handleOutsideClick,\n    onKeyDown: handleOnKeyDown,\n  });\n\n  return (\n    <StyledDialogBackground\n      className={className}\n      onClick={handleOutsideClick}\n      data-portalbg\n      data-testid={DSDialogDatatestid.BACKGROUND}\n      zIndex={zIndex}\n    >\n      <PortalStyles portalInfo={portalInfo} portalClassName={portalClassName} />\n      <StyledDialogContainer\n        role=\"dialog\"\n        aria-modal\n        ref={containerRef}\n        tabIndex={!removeAutoFocus ? 0 : undefined}\n        onKeyDown={handleOnKeyDown}\n        {...getSpaceProps(rest as unknown as Record<string, unknown>)}\n        centered={centered}\n        data-testid={DSDialogDatatestid.CONTAINER}\n        {...restOfGlobalAttributes}\n        size={size}\n      >\n        {children}\n      </StyledDialogContainer>\n    </StyledDialogBackground>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,0BAAuC;AACvC,oBAA4E;AAC5E,mBAA8B;AAC9B,gCAAmC;AACnC,yBAAgC;AAChC,8BAAiC;AAE1B,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,oBAAoB,oBAAoB,8CAAiB;AACjE,QAAM,EAAE,OAAO,cAAc,YAAY,oBAAoB,6BAAW,kCAAe;AAEvF,QAAuE,YAA/D,mBAAiB,QAAQ,UAAU,MAAM,aAAsB,IAAT,iBAAS,IAAT,CAAtD,mBAAiB,UAAQ,YAAU,QAAM;AAEjD,QAAiD,qDAAuB,OAAO;AAAA,IAC7E,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC,GAHO,gBAAyC,IAA3B,mCAA2B,IAA3B,CAAd;AAKR,SACE,mDAAC;AAAA,IACC;AAAA,IACA,SAAS;AAAA,IACT,iBAAa;AAAA,IACb,eAAa,6CAAmB;AAAA,IAChC;AAAA,KAEA,mDAAC;AAAA,IAAa;AAAA,IAAwB;AAAA,GAAkC,GACxE,mDAAC;AAAA,IACC,MAAK;AAAA,IACL,cAAU;AAAA,IACV,KAAK;AAAA,IACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,IACjC,WAAW;AAAA,KACP,gCAAc,IAA0C,IAN7D;AAAA,IAOC;AAAA,IACA,eAAa,6CAAmB;AAAA,MAC5B,yBATL;AAAA,IAUC;AAAA,MAEC,QACH,CACF;AAEJ;",
+  "names": []
+}

package/dist/cjs/parts/dialogContent/useDialogContent.js

@@ -0,0 +1,62 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useDialogContent_exports = {};
+__export(useDialogContent_exports, {
+  useDialogContent: () => useDialogContent
+});
+module.exports = __toCommonJS(useDialogContent_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_DSDialogCTX = require("../../DSDialogCTX");
+const useDialogContent = () => {
+  const {
+    props: { onClickOutside, onClose, removeAutoFocus },
+    containerRef
+  } = (0, import_react.useContext)(import_DSDialogCTX.DSDialogContext);
+  const handleOutsideClick = (0, import_react.useCallback)((e) => {
+    if (e.target.dataset.portalbg)
+      onClickOutside();
+  }, [onClickOutside]);
+  const handleOnKeyDown = (0, import_react.useCallback)((e) => {
+    if (e.key === "Escape")
+      onClose();
+  }, [onClose]);
+  (0, import_react.useEffect)(() => {
+    if (!removeAutoFocus)
+      containerRef?.current?.focus();
+  }, [containerRef, removeAutoFocus]);
+  const focusContainer = (0, import_react.useCallback)(() => {
+    setTimeout(() => {
+      const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);
+      if (!isContainerOrChildFocused)
+        containerRef.current?.focus?.();
+    });
+  }, [containerRef]);
+  (0, import_react.useEffect)(() => {
+    document.addEventListener("focusin", focusContainer);
+    return () => document.removeEventListener("focusin", focusContainer);
+  }, [focusContainer]);
+  return {
+    handleOutsideClick,
+    handleOnKeyDown
+  };
+};
+//# sourceMappingURL=useDialogContent.js.map

package/dist/cjs/parts/dialogContent/useDialogContent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/dialogContent/useDialogContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React, { useCallback, useEffect, useContext } from 'react';\nimport { DSDialogContext } from '../../DSDialogCTX';\n\nexport const useDialogContent = () => {\n  const {\n    props: { onClickOutside, onClose, removeAutoFocus },\n    containerRef,\n  } = useContext(DSDialogContext);\n\n  const handleOutsideClick = useCallback(\n    (e: React.MouseEvent) => {\n      if ((e.target as HTMLDivElement).dataset.portalbg) onClickOutside();\n    },\n    [onClickOutside],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    },\n    [onClose],\n  );\n\n  useEffect(() => {\n    if (!removeAutoFocus) containerRef?.current?.focus();\n  }, [containerRef, removeAutoFocus]);\n\n  const focusContainer = useCallback(() => {\n    setTimeout(() => {\n      const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);\n      if (!isContainerOrChildFocused) containerRef.current?.focus?.();\n    });\n  }, [containerRef]);\n\n  useEffect(() => {\n    document.addEventListener('focusin', focusContainer);\n    return () => document.removeEventListener('focusin', focusContainer);\n  }, [focusContainer]);\n\n  return {\n    handleOutsideClick,\n    handleOnKeyDown,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0D;AAC1D,yBAAgC;AAEzB,MAAM,mBAAmB,MAAM;AACpC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,SAAS;AAAA,IAClC;AAAA,MACE,6BAAW,kCAAe;AAE9B,QAAM,qBAAqB,8BACzB,CAAC,MAAwB;AACvB,QAAK,EAAE,OAA0B,QAAQ;AAAU,qBAAe;AAAA,EACpE,GACA,CAAC,cAAc,CACjB;AAEA,QAAM,kBAAkB,8BACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ;AAAU,cAAQ;AAAA,EAClC,GACA,CAAC,OAAO,CACV;AAEA,8BAAU,MAAM;AACd,QAAI,CAAC;AAAiB,oBAAc,SAAS,MAAM;AAAA,EACrD,GAAG,CAAC,cAAc,eAAe,CAAC;AAElC,QAAM,iBAAiB,8BAAY,MAAM;AACvC,eAAW,MAAM;AACf,YAAM,4BAA4B,aAAa,SAAS,SAAS,SAAS,aAAa;AACvF,UAAI,CAAC;AAA2B,qBAAa,SAAS,QAAQ;AAAA,IAChE,CAAC;AAAA,EACH,GAAG,CAAC,YAAY,CAAC;AAEjB,8BAAU,MAAM;AACd,aAAS,iBAAiB,WAAW,cAAc;AACnD,WAAO,MAAM,SAAS,oBAAoB,WAAW,cAAc;AAAA,EACrE,GAAG,CAAC,cAAc,CAAC;AAEnB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/cjs/propTypes.js

@@ -21,44 +21,37 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var propTypes_exports = {};
 __export(propTypes_exports, {
   propTypes: () => propTypes
 });
+module.exports = __toCommonJS(propTypes_exports);
 var React = __toESM(require("react"));
-var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_utils = require("./utils");
-const propTypes = __spreadProps(__spreadValues({}, import_ds_props_helpers.globalAttributesPropTypes), {
-  isOpen: import_ds_props_helpers.PropTypes.bool.description("Whether the Dialog is open or not.").defaultValue(false),
-  children: import_ds_props_helpers.PropTypes.node.description("Nested components.").isRequired,
-  centered: import_ds_props_helpers.PropTypes.bool.description("Centers the Dialog.").defaultValue(false),
-  removeAutoFocus: import_ds_props_helpers.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: import_ds_props_helpers.PropTypes.func.description("Callback that should be used to close the modal when the user clicks outside.").defaultValue(() => {
+const propTypes = __spreadProps(__spreadValues({}, import_ds_utilities.globalAttributesPropTypes), {
+  isOpen: import_ds_utilities.PropTypes.bool.description("Whether the Dialog is open or not.").defaultValue(false),
+  children: import_ds_utilities.PropTypes.node.description("Nested components.").isRequired,
+  centered: import_ds_utilities.PropTypes.bool.description("Centers the Dialog.").defaultValue(false),
+  removeAutoFocus: import_ds_utilities.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: import_ds_utilities.PropTypes.func.description("Callback that should be used to close the modal when the user clicks outside.").defaultValue(() => {
   }),
-  onClose: import_ds_props_helpers.PropTypes.func.description("Callback triggered with ESC key.").defaultValue(() => {
+  onClose: import_ds_utilities.PropTypes.func.description("Callback triggered with ESC key.").defaultValue(() => {
   }),
-  size: import_ds_props_helpers.PropTypes.oneOf(import_utils.DSDialogSizesArrayValues).description(`Dialog's width size.`).defaultValue(import_utils.DSDialogSizes.DEFAULT)
+  size: import_ds_utilities.PropTypes.oneOf(import_utils.DSDialogSizesArrayValues).description(`Dialog's width size.`).defaultValue(import_utils.DSDialogSizes.DEFAULT)
 });
-module.exports = __toCommonJS(propTypes_exports);
 //# sourceMappingURL=propTypes.js.map

package/dist/cjs/propTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-len */\nimport { globalAttributesPropTypes, GlobalAttributesT, PropTypes } from '@elliemae/ds-props-helpers';\nimport { DSDialogSizes, DSDialogSizesArrayValues } from './utils';\n\nexport declare namespace DSDialogT {\n  export type Sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';\n  export interface DefaultProps {\n    isOpen: boolean;\n    centered: boolean;\n    size: Sizes;\n    removeAutoFocus: boolean;\n    zIndex: number;\n    onClickOutside: () => void;\n    onClose: () => void;\n  }\n\n  export interface PropsRequired {\n    children: React.ReactNode;\n  }\n\n  export interface Props\n    extends DefaultProps,\n      PropsRequired,\n      Omit<GlobalAttributesT<HTMLDivElement>, 'size' | 'children'> {}\n}\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  isOpen: PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),\n  children: PropTypes.node.description('Nested components.').isRequired,\n  centered: PropTypes.bool.description('Centers the Dialog.').defaultValue(false),\n  removeAutoFocus: PropTypes.bool\n    .description(\n      '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.',\n    )\n    .defaultValue(false),\n  onClickOutside: PropTypes.func\n    .description('Callback that should be used to close the modal when the user clicks outside.')\n    .defaultValue(() => {}),\n  onClose: PropTypes.func.description('Callback triggered with ESC key.').defaultValue(() => {}),\n  size: PropTypes.oneOf(DSDialogSizesArrayValues)\n    .description(`Dialog's width size.`)\n    .defaultValue(DSDialogSizes.DEFAULT),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAwE;AACxE,mBAAwD;AAwBjD,MAAM,YAAY,iCACpB,oDADoB;AAAA,EAEvB,QAAQ,kCAAU,KAAK,YAAY,sCAAsC,aAAa;AAAA,EACtF,UAAU,kCAAU,KAAK,YAAY,sBAAsB;AAAA,EAC3D,UAAU,kCAAU,KAAK,YAAY,uBAAuB,aAAa;AAAA,EACzE,iBAAiB,kCAAU,KACxB,YACC,yIAED,aAAa;AAAA,EAChB,gBAAgB,kCAAU,KACvB,YAAY,iFACZ,aAAa,MAAM;AAAA;AAAA,EACtB,SAAS,kCAAU,KAAK,YAAY,oCAAoC,aAAa,MAAM;AAAA;AAAA,EAC3F,MAAM,kCAAU,MAAM,uCACnB,YAAY,wBACZ,aAAa,2BAAc;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-len */\nimport { globalAttributesPropTypes, GlobalAttributesT, PropTypes } from '@elliemae/ds-utilities';\nimport { DSDialogSizes, DSDialogSizesArrayValues } from './utils';\n\nexport declare namespace DSDialogT {\n  export type Sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';\n  export interface DefaultProps {\n    [key: string]: unknown;\n    isOpen: boolean;\n    centered: boolean;\n    size: Sizes;\n    removeAutoFocus: boolean;\n    zIndex: number;\n    onClickOutside: () => void;\n    onClose: () => void;\n    portalRef: null;\n    children: React.ReactNode[] | [];\n  }\n\n  export interface PropsRequired {\n    children: React.ReactNode[] | [];\n  }\n\n  export interface PropsOptional {\n    portalRef: React.MutableRefObject<HTMLElement | null> | null;\n  }\n\n  export interface InternalProps extends Omit<DefaultProps, 'portalRef'>, PropsRequired, PropsOptional {}\n\n  export interface Props\n    extends Omit<DefaultProps, 'portalRef'>,\n      PropsRequired,\n      PropsOptional,\n      Omit<GlobalAttributesT<HTMLDivElement>, 'size' | 'children'> {}\n}\n\nexport const propTypes = {\n  ...globalAttributesPropTypes,\n  isOpen: PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),\n  children: PropTypes.node.description('Nested components.').isRequired,\n  centered: PropTypes.bool.description('Centers the Dialog.').defaultValue(false),\n  removeAutoFocus: PropTypes.bool\n    .description(\n      '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.',\n    )\n    .defaultValue(false),\n  onClickOutside: PropTypes.func\n    .description('Callback that should be used to close the modal when the user clicks outside.')\n    .defaultValue(() => {}),\n  onClose: PropTypes.func.description('Callback triggered with ESC key.').defaultValue(() => {}),\n  size: PropTypes.oneOf(DSDialogSizesArrayValues)\n    .description(`Dialog's width size.`)\n    .defaultValue(DSDialogSizes.DEFAULT),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,0BAAwE;AACxE,mBAAwD;AAkCjD,MAAM,YAAY,iCACpB,gDADoB;AAAA,EAEvB,QAAQ,8BAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAAA,EAC3F,UAAU,8BAAU,KAAK,YAAY,oBAAoB,EAAE;AAAA,EAC3D,UAAU,8BAAU,KAAK,YAAY,qBAAqB,EAAE,aAAa,KAAK;AAAA,EAC9E,iBAAiB,8BAAU,KACxB,YACC,uIACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,8BAAU,KACvB,YAAY,+EAA+E,EAC3F,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,SAAS,8BAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC7F,MAAM,8BAAU,MAAM,qCAAwB,EAC3C,YAAY,sBAAsB,EAClC,aAAa,2BAAc,OAAO;AACvC;",
   "names": []
 }

package/dist/cjs/sharedTypes.js

@@ -4,24 +4,17 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var sharedTypes_exports = {};
-var React = __toESM(require("react"));
 module.exports = __toCommonJS(sharedTypes_exports);
+var React = __toESM(require("react"));
 //# sourceMappingURL=sharedTypes.js.map

package/dist/cjs/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export namespace DSDialogInternalsT {\n  export interface BodyInfoT {\n    overflow: boolean;\n    scrollbarWidth: string;\n    paddingRight: string;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
+  "sourcesContent": ["import type { DSDialogT } from './propTypes';\nexport namespace DSDialogInternalsT {\n  export interface PortalInfo {\n    scrollbarWidth: string;\n    paddingRight: string;\n  }\n\n  export interface DSDialogContext {\n    props: DSDialogT.InternalProps;\n    actualPortalRef: React.MutableRefObject<HTMLElement | null>;\n    containerRef: React.MutableRefObject<HTMLDivElement | null>;\n    portalInfo: DSDialogInternalsT.PortalInfo;\n    portalClassName: string;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/cjs/styles.js

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
   DSDialogAddon: () => DSDialogAddon,
@@ -36,23 +29,24 @@ __export(styles_exports, {
   DSDialogSecondaryMessage: () => DSDialogSecondaryMessage,
   DSDialogSeparator: () => DSDialogSeparator,
   DSDialogTitle: () => DSDialogTitle,
-  FixedBody: () => FixedBody,
+  PortalStyles: () => PortalStyles,
   StyledDialogBackground: () => StyledDialogBackground,
   StyledDialogContainer: () => StyledDialogContainer
 });
+module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_styled_components2 = require("@xstyled/styled-components");
 var import_utils = require("./utils");
-const FixedBody = import_ds_system.createGlobalStyle`
-  body {
+const PortalStyles = import_ds_system.createGlobalStyle`
+  ${({ portalClassName }) => `.${portalClassName}`} {
     overflow: hidden;
-    ${({ bodyInfo }) => bodyInfo.overflow ? `padding-right: calc( ${bodyInfo.paddingRight} + ${bodyInfo.scrollbarWidth} ) !important;` : ``}
+    ${({ portalInfo }) => portalInfo.scrollbarWidth !== "0px" ? `padding-right: calc( ${portalInfo.paddingRight} + ${portalInfo.scrollbarWidth} ) !important;` : ``}
   }
 `;
 const StyledDialogBackground = import_styled_components.default.div`
-  position: fixed;
+  position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
@@ -149,5 +143,4 @@ const DSDialogFooter = import_styled_components.default.div`
   ${import_styled_components2.flexboxes}
   ${import_styled_components2.sizing}
 `;
-module.exports = __toCommonJS(styles_exports);
 //# sourceMappingURL=styles.js.map

package/dist/cjs/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { createGlobalStyle } from '@elliemae/ds-system';\nimport { space, flexboxes, layout, sizing } from '@xstyled/styled-components';\nimport { allSizes } from './utils';\nimport { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface FixedBodyT {\n  bodyInfo: DSDialogInternalsT.BodyInfoT;\n}\n\ninterface StyledDialogBackgroundT {\n  zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n  size: DSDialogT.Sizes;\n  centered: boolean;\n}\n\nexport const FixedBody = createGlobalStyle<FixedBodyT>`\n  body {\n    overflow: hidden;\n    ${({ bodyInfo }) =>\n      bodyInfo.overflow\n        ? `padding-right: calc( ${bodyInfo.paddingRight} + ${bodyInfo.scrollbarWidth} ) !important;`\n        : ``}\n  }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundT>`\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(37, 41, 47, 50%);\n  overflow-y: auto;\n  z-index: ${({ zIndex }) => zIndex};\n`;\n\nexport const StyledDialogContainer = styled.div<StyledDialogContainerT>`\n  height: fit-content;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: ${({ centered }) => (centered ? 'auto' : '20vh auto auto auto')};\n  width: ${({ size }) => allSizes[size]};\n  min-width: 300px;\n  box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  overflow-y: auto;\n  ${space}\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const DSDialogTitle = styled.h3`\n  font-size: ${({ theme }) => theme.fontSizes.title[700]};\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  line-height: 28px;\n  margin: 0;\n`;\n\nexport const DSDialogAddon = styled.div``;\n\nexport const DSDialogHeader = styled.div`\n  display: grid;\n  align-items: center;\n  grid-auto-flow: column;\n  min-height: ${({ theme }) => theme.space.m};\n  padding: 10px ${({ theme }) => theme.space.xs};\n  & ${DSDialogTitle} + ${DSDialogAddon} {\n    align-self: flex-start;\n    justify-self: flex-end;\n  }\n  & ${DSDialogAddon}:only-child {\n    justify-self: flex-end;\n  }\n  ${space}\n  ${sizing}\n`;\n\nexport const DSDialogSeparator = styled.hr.attrs(() => ({ 'aria-hidden': true }))`\n  margin: 0;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n`;\n\nexport const DSDialogBody = styled.div`\n  padding: ${({ theme }) => theme.space.xs};\n  overflow-y: auto;\n\n  ${layout}\n  ${space}\n  ${flexboxes}\n  ${sizing}\n`;\n\nexport const DSDialogPrimaryMessage = styled.h3`\n  margin: 0;\n`;\n\nexport const DSDialogSecondaryMessage = styled.p`\n  margin: 0;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const DSDialogDefaultLayout = styled.div`\n  display: grid;\n  grid-auto-flow: row;\n  justify-items: center;\n  align-items: center;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n\n  ${DSDialogSecondaryMessage} {\n    text-align: center;\n  }\n`;\n\nexport const DSDialogFooter = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  justify-content: flex-end;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n  min-height: ${({ theme }) => theme.space.m};\n  padding: 0 ${({ theme }) => theme.space.xs};\n  ${space}\n  ${flexboxes}\n  ${sizing}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAkC;AAClC,gCAAiD;AACjD,mBAAyB;AAiBlB,MAAM,YAAY;AAAA;AAAA;AAAA,MAGnB,CAAC,EAAE,eACH,SAAS,WACL,wBAAwB,SAAS,kBAAkB,SAAS,iCAC5D;AAAA;AAAA;AAIH,MAAM,yBAAyB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,eAAgB,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,WAAW,sBAAS;AAAA;AAAA,8BAEJ,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,gBAClD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,IAEhD;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,gBAAgB,iCAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,iCAAO;AAE7B,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA,IAGF;AAAA,IACA;AAAA;AAGG,MAAM,oBAAoB,iCAAO,GAAG,MAAM,MAAO,GAAE,eAAe;AAAA;AAAA,0BAE/C,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,eAAe,iCAAO;AAAA,aACtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,IAGpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,yBAAyB,iCAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,iCAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKvB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { createGlobalStyle } from '@elliemae/ds-system';\nimport { space, flexboxes, layout, sizing } from '@xstyled/styled-components';\nimport { allSizes } from './utils';\nimport { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface PortalStylesT {\n  portalInfo: DSDialogInternalsT.PortalInfo;\n  portalClassName: string;\n}\n\ninterface StyledDialogBackgroundT {\n  zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n  size: DSDialogT.Sizes;\n  centered: boolean;\n}\n\nexport const PortalStyles = createGlobalStyle<PortalStylesT>`\n  ${({ portalClassName }) => `.${portalClassName}`} {\n    overflow: hidden;\n    ${({ portalInfo }) =>\n      portalInfo.scrollbarWidth !== '0px'\n        ? `padding-right: calc( ${portalInfo.paddingRight} + ${portalInfo.scrollbarWidth} ) !important;`\n        : ``}\n  }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundT>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(37, 41, 47, 50%);\n  overflow-y: auto;\n  z-index: ${({ zIndex }) => zIndex};\n`;\n\nexport const StyledDialogContainer = styled.div<StyledDialogContainerT>`\n  height: fit-content;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: ${({ centered }) => (centered ? 'auto' : '20vh auto auto auto')};\n  width: ${({ size }) => allSizes[size]};\n  min-width: 300px;\n  box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  overflow-y: auto;\n  ${space}\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const DSDialogTitle = styled.h3`\n  font-size: ${({ theme }) => theme.fontSizes.title[700]};\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  line-height: 28px;\n  margin: 0;\n`;\n\nexport const DSDialogAddon = styled.div``;\n\nexport const DSDialogHeader = styled.div`\n  display: grid;\n  align-items: center;\n  grid-auto-flow: column;\n  min-height: ${({ theme }) => theme.space.m};\n  padding: 10px ${({ theme }) => theme.space.xs};\n  & ${DSDialogTitle} + ${DSDialogAddon} {\n    align-self: flex-start;\n    justify-self: flex-end;\n  }\n  & ${DSDialogAddon}:only-child {\n    justify-self: flex-end;\n  }\n  ${space}\n  ${sizing}\n`;\n\nexport const DSDialogSeparator = styled.hr.attrs(() => ({ 'aria-hidden': true }))`\n  margin: 0;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n`;\n\nexport const DSDialogBody = styled.div`\n  padding: ${({ theme }) => theme.space.xs};\n  overflow-y: auto;\n\n  ${layout}\n  ${space}\n  ${flexboxes}\n  ${sizing}\n`;\n\nexport const DSDialogPrimaryMessage = styled.h3`\n  margin: 0;\n`;\n\nexport const DSDialogSecondaryMessage = styled.p`\n  margin: 0;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const DSDialogDefaultLayout = styled.div`\n  display: grid;\n  grid-auto-flow: row;\n  justify-items: center;\n  align-items: center;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n\n  ${DSDialogSecondaryMessage} {\n    text-align: center;\n  }\n`;\n\nexport const DSDialogFooter = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  justify-content: flex-end;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n  min-height: ${({ theme }) => theme.space.m};\n  padding: 0 ${({ theme }) => theme.space.xs};\n  ${space}\n  ${flexboxes}\n  ${sizing}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAkC;AAClC,gCAAiD;AACjD,mBAAyB;AAkBlB,MAAM,eAAe;AAAA,IACxB,CAAC,EAAE,sBAAsB,IAAI;AAAA;AAAA,MAE3B,CAAC,EAAE,iBACH,WAAW,mBAAmB,QAC1B,wBAAwB,WAAW,kBAAkB,WAAW,iCAChE;AAAA;AAAA;AAIH,MAAM,yBAAyB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,eAAgB,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,WAAW,sBAAS;AAAA;AAAA,8BAEJ,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,gBAClD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,IAEhD;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,gBAAgB,iCAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,iCAAO;AAE7B,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA,IAGF;AAAA,IACA;AAAA;AAGG,MAAM,oBAAoB,iCAAO,GAAG,MAAM,MAAO,GAAE,eAAe,KAAK,EAAE;AAAA;AAAA,0BAEtD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,eAAe,iCAAO;AAAA,aACtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,IAGpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,yBAAyB,iCAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,iCAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKvB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA;",
   "names": []
 }

package/dist/cjs/utils.js

@@ -4,34 +4,30 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
   DSDialogSizes: () => DSDialogSizes,
   DSDialogSizesArrayValues: () => DSDialogSizesArrayValues,
   allSizes: () => allSizes,
+  getCurrentRightPadding: () => getCurrentRightPadding,
+  getScrollbarWidth: () => getScrollbarWidth,
   getSpaceProps: () => getSpaceProps
 });
+module.exports = __toCommonJS(utils_exports);
 var React = __toESM(require("react"));
 const getSpaceProps = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => /^[pm][xytblr]?$/.exec(key)));
 const DSDialogSizes = {
@@ -51,5 +47,6 @@ const allSizes = {
   "x-large": "1042px",
   "xx-large": "1440px"
 };
-module.exports = __toCommonJS(utils_exports);
+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");
 //# sourceMappingURL=utils.js.map

package/dist/cjs/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["type GetSpaceArgsT = Partial<Record<string, string | number>>;\n\nexport const getSpaceProps = (props: GetSpaceArgsT): GetSpaceArgsT =>\n  Object.fromEntries(Object.entries(props).filter(([key]) => /^[pm][xytblr]?$/.exec(key)));\n\nexport const DSDialogSizes = {\n  DEFAULT: 'default' as const,\n  SMALL: 'small' as const,\n  MEDIUM: 'medium' as const,\n  LARGE: 'large' as const,\n  XLARGE: 'x-large' as const,\n  XXLARGE: 'xx-large' as const,\n};\n\nexport const DSDialogSizesArrayValues = Object.values(DSDialogSizes);\n\nexport const allSizes = {\n  default: '576px',\n  small: '320px',\n  medium: '656px',\n  large: '848px',\n  'x-large': '1042px',\n  'xx-large': '1440px',\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEhB,MAAM,gBAAgB,CAAC,UAC5B,OAAO,YAAY,OAAO,QAAQ,OAAO,OAAO,CAAC,CAAC,SAAS,kBAAkB,KAAK;AAE7E,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA;AAGJ,MAAM,2BAA2B,OAAO,OAAO;AAE/C,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA;",
+  "sourcesContent": ["export const getSpaceProps = (props: Record<string, unknown>) =>\n  Object.fromEntries(Object.entries(props).filter(([key]) => /^[pm][xytblr]?$/.exec(key)));\n\nexport const DSDialogSizes = {\n  DEFAULT: 'default' as const,\n  SMALL: 'small' as const,\n  MEDIUM: 'medium' as const,\n  LARGE: 'large' as const,\n  XLARGE: 'x-large' as const,\n  XXLARGE: 'xx-large' as const,\n};\n\nexport const DSDialogSizesArrayValues = Object.values(DSDialogSizes);\n\nexport const allSizes = {\n  default: '576px',\n  small: '320px',\n  medium: '656px',\n  large: '848px',\n  'x-large': '1042px',\n  'xx-large': '1440px',\n};\n\nexport const getScrollbarWidth = (element: HTMLElement) =>\n  element.tagName === 'BODY'\n    ? `${window.innerWidth - element.clientWidth}px`\n    : `${element.offsetWidth - element.clientWidth}px`;\n\nexport const getCurrentRightPadding = (element: HTMLElement) =>\n  window.getComputedStyle(element, null)?.getPropertyValue('padding-right');\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,gBAAgB,CAAC,UAC5B,OAAO,YAAY,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,SAAS,kBAAkB,KAAK,GAAG,CAAC,CAAC;AAElF,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,MAAM,2BAA2B,OAAO,OAAO,aAAa;AAE5D,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AACd;AAEO,MAAM,oBAAoB,CAAC,YAChC,QAAQ,YAAY,SAChB,GAAG,OAAO,aAAa,QAAQ,kBAC/B,GAAG,QAAQ,cAAc,QAAQ;AAEhC,MAAM,yBAAyB,CAAC,YACrC,OAAO,iBAAiB,SAAS,IAAI,GAAG,iBAAiB,eAAe;",
   "names": []
 }