@elliemae/ds-dialog 2.2.0-next.4 → 2.3.0-alpha.2

package/esm/DSDialog.js

@@ -1,100 +1,69 @@
-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 _jsx from '@babel/runtime/helpers/esm/jsx';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import ReactDOM from 'react-dom';
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { describe } from 'react-desc';
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
-import { StyledDialogBackground, FixedBody, StyledDialogContainer } from './styles.js';
-import { propTypes } from './propTypes.js';
-import { defaultProps } from './defaultProps.js';
-import { getSpaceProps } from './utils.js';
-import { DSDialogDatatestid } from './DSDialogDatatestid.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-const _excluded = ["children", "isOpen", "onClickOutside", "centered", "size", "removeAutoFocus", "zIndex"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-const DSDialog = props => {
-  var _FixedBody;
-
+import * as React from "react";
+import ReactDOM from "react-dom";
+import React2, { useCallback, useRef, useEffect, useState } from "react";
+import { describe } from "react-desc";
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { FixedBody, StyledDialogBackground, StyledDialogContainer } from "./styles";
+import { propTypes } from "./propTypes";
+import { defaultProps } from "./defaultProps";
+import { getSpaceProps } from "./utils";
+import { DSDialogDatatestid } from "./DSDialogDatatestid";
+const DSDialog = (props) => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
-  const [isBodyOverflow, setIsBodyOverflow] = useState(false);
+  const [bodyInfo, setBodyInfo] = useState({ overflow: false, padding: "0px" });
   useValidateTypescriptPropTypes(propsWithDefault, propTypes);
-
-  const {
-    children,
-    isOpen,
-    onClickOutside,
-    centered,
-    size,
-    removeAutoFocus,
-    zIndex
-  } = propsWithDefault,
-        rest = _objectWithoutProperties(propsWithDefault, _excluded);
-
+  const { children, isOpen, onClickOutside, centered, size, removeAutoFocus, zIndex, ...rest } = propsWithDefault;
   const containerRef = useRef(null);
-  const handleOutsideClick = useCallback(e => {
-    if (e.target.dataset.portalbg) onClickOutside();
+  const handleOutsideClick = useCallback((e) => {
+    if (e.target.dataset.portalbg)
+      onClickOutside();
   }, [onClickOutside]);
-  const handleOnKeyDown = useCallback(e => {
-    if (e.key === 'Escape') onClickOutside();
+  const handleOnKeyDown = useCallback((e) => {
+    if (e.key === "Escape")
+      onClickOutside();
   }, [onClickOutside]);
   useEffect(() => {
-    const body = document.getElementsByTagName('body')[0];
-    const {
-      offsetHeight,
-      scrollHeight
-    } = body;
-    if (!isOpen) return setIsBodyOverflow(false);
-    return setIsBodyOverflow(offsetHeight < scrollHeight);
+    const body = document.getElementsByTagName("body")[0];
+    const { offsetHeight, scrollHeight } = body;
+    const padding = window.getComputedStyle(body, null)?.getPropertyValue("padding-right");
+    if (!isOpen)
+      return setBodyInfo({ overflow: false, padding: "0px" });
+    return setBodyInfo({
+      overflow: offsetHeight < scrollHeight,
+      padding
+    });
   }, [isOpen]);
   useEffect(() => {
-    var _containerRef$current;
-
-    if (isOpen && !removeAutoFocus) containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
+    if (isOpen && !removeAutoFocus)
+      containerRef?.current?.focus();
   }, [isOpen, removeAutoFocus]);
-  const globalAttributes = useGetGlobalAttributes(propsWithDefault, {
-    onClick: handleOutsideClick
-  });
-
   if (isOpen) {
-    return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/jsxs(StyledDialogBackground, _objectSpread(_objectSpread({
+    return ReactDOM.createPortal(/* @__PURE__ */ React2.createElement(StyledDialogBackground, {
       onClick: handleOutsideClick,
       "data-portalbg": true,
       "data-testid": DSDialogDatatestid.BACKGROUND,
-      zIndex: zIndex
-    }, globalAttributes), {}, {
-      children: [_FixedBody || (_FixedBody = /*#__PURE__*/_jsx(FixedBody, {
-        isBodyOverflow: isBodyOverflow
-      })), /*#__PURE__*/jsx(StyledDialogContainer, _objectSpread(_objectSpread({
-        role: "dialog",
-        "aria-modal": true,
-        ref: containerRef,
-        tabIndex: !removeAutoFocus ? 0 : undefined,
-        onKeyDown: handleOnKeyDown
-      }, getSpaceProps(rest)), {}, {
-        size: size,
-        centered: centered,
-        "data-testid": DSDialogDatatestid.CONTAINER,
-        children: children
-      }))]
-    })), document.getElementsByTagName('body')[0]);
+      zIndex
+    }, /* @__PURE__ */ React2.createElement(FixedBody, {
+      bodyInfo
+    }), /* @__PURE__ */ React2.createElement(StyledDialogContainer, {
+      role: "dialog",
+      "aria-modal": true,
+      ref: containerRef,
+      tabIndex: !removeAutoFocus ? 0 : void 0,
+      onKeyDown: handleOnKeyDown,
+      ...getSpaceProps(rest),
+      size,
+      centered,
+      "data-testid": DSDialogDatatestid.CONTAINER
+    }, children)), document.getElementsByTagName("body")[0]);
   }
-
   return null;
 };
-
+DSDialog.propTypes = propTypes;
 const DSDialogWithSchema = describe(DSDialog);
 DSDialogWithSchema.propTypes = propTypes;
-
-export { DSDialog, DSDialogWithSchema };
+export {
+  DSDialog,
+  DSDialogWithSchema
+};
+//# sourceMappingURL=DSDialog.js.map

package/esm/DSDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSDialog.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import ReactDOM from 'react-dom';\nimport React, { useCallback, useRef, useEffect, useState } from 'react';\nimport { describe } from 'react-desc';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { FixedBody, StyledDialogBackground, StyledDialogContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport { getSpaceProps } from './utils';\nimport { DSDialogDatatestid } from './DSDialogDatatestid';\nimport type { BodyInfoT, DSDialogPropsWithDefaultT } from './DSDialogInternalTypes';\nimport type { DSDialogPropsT } from './DSDialogTypes';\n\nconst DSDialog = (props: DSDialogPropsT): React.ReactNode => {\n  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps) as DSDialogPropsWithDefaultT;\n  const [bodyInfo, setBodyInfo] = useState<BodyInfoT>({ overflow: false, padding: '0px' });\n\n  useValidateTypescriptPropTypes(propsWithDefault, propTypes);\n\n  const { children, isOpen, onClickOutside, centered, size, removeAutoFocus, zIndex, ...rest } = propsWithDefault;\n\n  const containerRef = useRef<HTMLDivElement | null>(null);\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') onClickOutside();\n    },\n    [onClickOutside],\n  );\n\n  useEffect(() => {\n    const body = document.getElementsByTagName('body')[0];\n    const { offsetHeight, scrollHeight } = body;\n    const padding = window.getComputedStyle(body, null)?.getPropertyValue('padding-right');\n\n    if (!isOpen) return setBodyInfo({ overflow: false, padding: '0px' });\n\n    return setBodyInfo({\n      overflow: offsetHeight < scrollHeight,\n      padding,\n    });\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (isOpen && !removeAutoFocus) containerRef?.current?.focus();\n  }, [isOpen, removeAutoFocus]);\n\n  if (isOpen) {\n    return ReactDOM.createPortal(\n      <StyledDialogBackground\n        onClick={handleOutsideClick}\n        data-portalbg\n        data-testid={DSDialogDatatestid.BACKGROUND}\n        zIndex={zIndex}\n      >\n        <FixedBody bodyInfo={bodyInfo} />\n        <StyledDialogContainer\n          role=\"dialog\"\n          aria-modal\n          ref={containerRef}\n          tabIndex={!removeAutoFocus ? 0 : undefined}\n          onKeyDown={handleOnKeyDown}\n          {...getSpaceProps(rest)}\n          size={size}\n          centered={centered}\n          data-testid={DSDialogDatatestid.CONTAINER}\n        >\n          {children}\n        </StyledDialogContainer>\n      </StyledDialogBackground>,\n      document.getElementsByTagName('body')[0],\n    );\n  }\n\n  return null;\n};\n\nDSDialog.propTypes = propTypes;\n\nconst DSDialogWithSchema = describe(DSDialog);\nDSDialogWithSchema.propTypes = propTypes;\n\nexport { DSDialog, DSDialogWithSchema };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA,MAAM,WAAW,CAAC,UAA2C;AAC3D,QAAM,mBAAmB,6BAA6B,OAAO;AAC7D,QAAM,CAAC,UAAU,eAAe,SAAoB,EAAE,UAAU,OAAO,SAAS;AAEhF,iCAA+B,kBAAkB;AAEjD,QAAM,EAAE,UAAU,QAAQ,gBAAgB,UAAU,MAAM,iBAAiB,WAAW,SAAS;AAE/F,QAAM,eAAe,OAA8B;AAEnD,QAAM,qBAAqB,YACzB,CAAC,MAAwB;AACvB,QAAK,EAAE,OAA0B,QAAQ;AAAU;AAAA,KAErD,CAAC;AAGH,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ;AAAU;AAAA,KAE1B,CAAC;AAGH,YAAU,MAAM;AACd,UAAM,OAAO,SAAS,qBAAqB,QAAQ;AACnD,UAAM,EAAE,cAAc,iBAAiB;AACvC,UAAM,UAAU,OAAO,iBAAiB,MAAM,OAAO,iBAAiB;AAEtE,QAAI,CAAC;AAAQ,aAAO,YAAY,EAAE,UAAU,OAAO,SAAS;AAE5D,WAAO,YAAY;AAAA,MACjB,UAAU,eAAe;AAAA,MACzB;AAAA;AAAA,KAED,CAAC;AAEJ,YAAU,MAAM;AACd,QAAI,UAAU,CAAC;AAAiB,oBAAc,SAAS;AAAA,KACtD,CAAC,QAAQ;AAEZ,MAAI,QAAQ;AACV,WAAO,SAAS,aACd,qCAAC,wBAAD;AAAA,MACE,SAAS;AAAA,MACT,iBAAa;AAAA,MACb,eAAa,mBAAmB;AAAA,MAChC;AAAA,OAEA,qCAAC,WAAD;AAAA,MAAW;AAAA,QACX,qCAAC,uBAAD;AAAA,MACE,MAAK;AAAA,MACL,cAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,MACjC,WAAW;AAAA,SACP,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA,eAAa,mBAAmB;AAAA,OAE/B,YAGL,SAAS,qBAAqB,QAAQ;AAAA;AAI1C,SAAO;AAAA;AAGT,SAAS,YAAY;AAErB,MAAM,qBAAqB,SAAS;AACpC,mBAAmB,YAAY;",
+  "names": []
+}

package/esm/DSDialogDatatestid.js

@@ -1,6 +1,9 @@
+import * as React from "react";
 const DSDialogDatatestid = {
-  CONTAINER: 'ds-dialog-container',
-  BACKGROUND: 'ds-dialog-background'
+  CONTAINER: "ds-dialog-container",
+  BACKGROUND: "ds-dialog-background"
 };
-
-export { DSDialogDatatestid };
+export {
+  DSDialogDatatestid
+};
+//# sourceMappingURL=DSDialogDatatestid.js.map

package/esm/DSDialogDatatestid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSDialogDatatestid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSDialogDatatestid = {\n  CONTAINER: 'ds-dialog-container',\n  BACKGROUND: 'ds-dialog-background',\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,qBAAqB;AAAA,EAChC,WAAW;AAAA,EACX,YAAY;AAAA;",
+  "names": []
+}

package/esm/DSDialogInternalTypes.js

@@ -0,0 +1,2 @@
+import * as React from "react";
+//# sourceMappingURL=DSDialogInternalTypes.js.map

package/esm/DSDialogInternalTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/esm/DSDialogTypes.js

@@ -1 +1,2 @@
-
+import * as React from "react";
+//# sourceMappingURL=DSDialogTypes.js.map

package/esm/DSDialogTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/esm/defaultProps.js

@@ -1,7 +1,7 @@
-import { DSDialogSizes } from './utils.js';
-
-const noop = () => {};
-
+import * as React from "react";
+import { DSDialogSizes } from "./utils";
+const noop = () => {
+};
 const defaultProps = {
   isOpen: false,
   centered: false,
@@ -10,5 +10,7 @@ const defaultProps = {
   onClickOutside: noop,
   zIndex: 10
 };
-
-export { defaultProps };
+export {
+  defaultProps
+};
+//# sourceMappingURL=defaultProps.js.map

package/esm/defaultProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/defaultProps.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSDialogSizes } from './utils';\nimport type { DSDialogDefaultPropsT } from './DSDialogInternalTypes';\n\nconst noop = () => {};\n\nexport const defaultProps: DSDialogDefaultPropsT = {\n  isOpen: false,\n  centered: false,\n  size: DSDialogSizes.DEFAULT,\n  removeAutoFocus: false,\n  onClickOutside: noop,\n  zIndex: 10,\n};\n"],
+  "mappings": "AAAA;ACAA;AAGA,MAAM,OAAO,MAAM;AAAA;AAEZ,MAAM,eAAsC;AAAA,EACjD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM,cAAc;AAAA,EACpB,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,QAAQ;AAAA;",
+  "names": []
+}

package/esm/index.js

@@ -1,46 +1,28 @@
-import { describe } from 'react-desc';
-import { globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
-import { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage } from './styles.js';
-export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle } from './styles.js';
-export { DSDialog, DSDialogWithSchema } from './DSDialog.js';
-export { DSDialogDatatestid } from './DSDialogDatatestid.js';
-export { DSDialogSizes } from './utils.js';
-
-DSDialogBody.propTypes = globalAttributesPropTypes;
-DSDialogHeader.propTypes = globalAttributesPropTypes;
-DSDialogFooter.propTypes = globalAttributesPropTypes;
-DSDialogSeparator.propTypes = globalAttributesPropTypes;
-DSDialogTitle.propTypes = globalAttributesPropTypes;
-DSDialogAddon.propTypes = globalAttributesPropTypes;
-DSDialogDefaultLayout.propTypes = globalAttributesPropTypes;
-DSDialogPrimaryMessage.propTypes = globalAttributesPropTypes;
-DSDialogSecondaryMessage.propTypes = globalAttributesPropTypes;
-DSDialogBody.displayName = 'DSDialogBody';
-DSDialogHeader.displayName = 'DSDialogHeader';
-DSDialogFooter.displayName = 'DSDialogFooter';
-DSDialogSeparator.displayName = 'DSDialogSeparator';
-DSDialogTitle.displayName = 'DSDialogTitle';
-DSDialogAddon.displayName = 'DSDialogAddon';
-DSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';
-DSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';
-DSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';
-const DSDialogBodyWithSchema = describe(DSDialogBody);
-const DSDialogHeaderWithSchema = describe(DSDialogHeader);
-const DSDialogFooterWithSchema = describe(DSDialogFooter);
-const DSDialogSeparatorWithSchema = describe(DSDialogSeparator);
-const DSDialogTitleWithSchema = describe(DSDialogTitle);
-const DSDialogAddonWithSchema = describe(DSDialogAddon);
-const DSDialogDefaultLayoutWithSchema = describe(DSDialogDefaultLayout);
-const DSDialogPrimaryMessageWithSchema = describe(DSDialogPrimaryMessage);
-const DSDialogSecondaryMessageWithSchema = describe(DSDialogSecondaryMessage);
-DSDialogBodyWithSchema.propTypes = globalAttributesPropTypes;
-DSDialogHeaderWithSchema.propTypes = globalAttributesPropTypes;
-DSDialogFooterWithSchema.propTypes = globalAttributesPropTypes;
-DSDialogSeparatorWithSchema.propTypes = globalAttributesPropTypes;
-DSDialogTitleWithSchema.propTypes = globalAttributesPropTypes;
-DSDialogAddonWithSchema.propTypes = globalAttributesPropTypes;
-DSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes;
-DSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes;
-DSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes;
-
-export { DSDialogAddonWithSchema, DSDialogBodyWithSchema, DSDialogDefaultLayoutWithSchema, DSDialogFooterWithSchema, DSDialogHeaderWithSchema, DSDialogPrimaryMessageWithSchema, DSDialogSecondaryMessageWithSchema, DSDialogSeparatorWithSchema, DSDialogTitleWithSchema };
+import * as React from "react";
+export * from "./DSDialog";
+export * from "./DSDialogDatatestid";
+import { DSDialogSizes } from "./utils";
+import {
+  DSDialogBody,
+  DSDialogHeader,
+  DSDialogFooter,
+  DSDialogSeparator,
+  DSDialogTitle,
+  DSDialogAddon,
+  DSDialogDefaultLayout,
+  DSDialogPrimaryMessage,
+  DSDialogSecondaryMessage
+} from "./styles";
+export {
+  DSDialogAddon,
+  DSDialogBody,
+  DSDialogDefaultLayout,
+  DSDialogFooter,
+  DSDialogHeader,
+  DSDialogPrimaryMessage,
+  DSDialogSecondaryMessage,
+  DSDialogSeparator,
+  DSDialogSizes,
+  DSDialogTitle
+};
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSDialog';\nexport * from './DSDialogDatatestid';\nexport { DSDialogSizes } from './utils';\n\nexport {\n  DSDialogBody,\n  DSDialogHeader,\n  DSDialogFooter,\n  DSDialogSeparator,\n  DSDialogTitle,\n  DSDialogAddon,\n  DSDialogDefaultLayout,\n  DSDialogPrimaryMessage,\n  DSDialogSecondaryMessage,\n} from './styles';\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/esm/propTypes.js

@@ -1,23 +1,16 @@
-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 { PropTypes } from 'react-desc';
-import { globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
-import { DSDialogSizesArrayValues, DSDialogSizes } from './utils.js';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const propTypes = _objectSpread({
-  isOpen: PropTypes.bool.description('Whether the Dialog is open or not.').defaultValue(false),
-  children: PropTypes.node.description('Nested components.').isRequired,
-  centered: PropTypes.bool.description('Centers the Dialog.').defaultValue(false),
-  size: PropTypes.oneOf(DSDialogSizesArrayValues).description("Dialog's width size.").defaultValue(DSDialogSizes.DEFAULT),
-  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. Cb also triggers when the user press ESC key for accessibility purposes.').defaultValue(() => {})
-}, globalAttributesPropTypes);
-
-export { propTypes };
+import * as React from "react";
+import { PropTypes } from "react-desc";
+import { DSDialogSizes, DSDialogSizesArrayValues } from "./utils";
+const propTypes = {
+  isOpen: PropTypes.bool.description("Wether the Dialog is open or not.").defaultValue(false),
+  children: PropTypes.node.description("Nested components.").isRequired,
+  centered: PropTypes.bool.description("Centers the Dialog.").defaultValue(false),
+  size: PropTypes.oneOf(DSDialogSizesArrayValues).description(`Dialog's width size.`).defaultValue(DSDialogSizes.DEFAULT),
+  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. Cb also triggers when the user press ESC key for accessibility purposes.").defaultValue(() => {
+  })
+};
+export {
+  propTypes
+};
+//# sourceMappingURL=propTypes.js.map

package/esm/propTypes.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport { PropTypes } from 'react-desc';\nimport { DSDialogSizes, DSDialogSizesArrayValues } from './utils';\n\nexport const propTypes = {\n  isOpen: PropTypes.bool.description('Wether 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  size: PropTypes.oneOf(DSDialogSizesArrayValues)\n    .description(`Dialog's width size.`)\n    .defaultValue(DSDialogSizes.DEFAULT),\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(\n      'Callback that should be used to close the modal when the user clicks outside. Cb also triggers when the user press ESC key for accessibility purposes.',\n    )\n    .defaultValue(() => {}),\n};\n"],
+  "mappings": "AAAA;ACCA;AACA;AAEO,MAAM,YAAY;AAAA,EACvB,QAAQ,UAAU,KAAK,YAAY,qCAAqC,aAAa;AAAA,EACrF,UAAU,UAAU,KAAK,YAAY,sBAAsB;AAAA,EAC3D,UAAU,UAAU,KAAK,YAAY,uBAAuB,aAAa;AAAA,EACzE,MAAM,UAAU,MAAM,0BACnB,YAAY,wBACZ,aAAa,cAAc;AAAA,EAC9B,iBAAiB,UAAU,KACxB,YACC,yIAED,aAAa;AAAA,EAChB,gBAAgB,UAAU,KACvB,YACC,0JAED,aAAa,MAAM;AAAA;AAAA;",
+  "names": []
+}

package/esm/styles.js

@@ -1,101 +1,122 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import styled, { createGlobalStyle, space, layout, flexboxes, sizing } from '@xstyled/styled-components';
-import { allSizes } from './utils.js';
+import * as React from "react";
+import styled from "styled-components";
+import { createGlobalStyle } from "@elliemae/ds-system";
+import { space, flexboxes, layout, sizing } from "@xstyled/styled-components";
+import { allSizes } from "./utils";
+const FixedBody = createGlobalStyle`
+  body {
+    overflow: hidden;
+    
+    ${({ bodyInfo }) => bodyInfo.overflow ? `padding-right: calc( ${bodyInfo.padding} + 15px ) !important;` : ``}
+  }
+`;
+const StyledDialogBackground = styled.div`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(37, 41, 47, 50%);
+  overflow-y: auto;
+  z-index: ${({ zIndex }) => zIndex};
+`;
+const StyledDialogContainer = styled.div`
+  height: fit-content;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: ${({ centered }) => centered ? "auto" : "20vh auto auto auto"};
+  width: ${({ size }) => allSizes[size]};
+  min-width: 300px;
+  box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};
+  background: ${({ theme }) => theme.colors.neutral["000"]};
+  overflow-y: auto;
+  ${space}
+  &:focus {
+    outline: none;
+  }
+`;
+const DSDialogTitle = styled.h3`
+  font-size: ${({ theme }) => theme.fontSizes.title[700]};
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  margin: 0;
+`;
+const DSDialogAddon = styled.div``;
+const DSDialogHeader = styled.div`
+  display: grid;
+  align-items: center;
+  grid-auto-flow: column;
+  min-height: ${({ theme }) => theme.space.m};
+  padding: 10px ${({ theme }) => theme.space.xs};
+  & ${DSDialogTitle} + ${DSDialogAddon} {
+    align-self: flex-start;
+    justify-self: flex-end;
+  }
+  & ${DSDialogAddon}:only-child {
+    justify-self: flex-end;
+  }
+  ${space}
+`;
+const DSDialogSeparator = styled.hr.attrs(() => ({ "aria-hidden": true }))`
+  margin: 0;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral["080"]};
+`;
+const DSDialogBody = styled.div`
+  padding: ${({ theme }) => theme.space.xs};
+  overflow-y: auto;
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-const FixedBody = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  body {\n    overflow: hidden;\n    \n    ", "\n  }\n"])), _ref => {
-  let {
-    isBodyOverflow
-  } = _ref;
-  return isBodyOverflow ? "padding-right: 15px !important;" : "";
-});
-const StyledDialogBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(37, 41, 47, 50%);\n  overflow-y: auto;\n  z-index: ", ";\n"])), _ref2 => {
-  let {
-    zIndex
-  } = _ref2;
-  return zIndex;
-});
-const StyledDialogContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: fit-content;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: ", ";\n  width: ", ";\n  min-width: 300px;\n  box-shadow: 0 10px 20px 0 ", ";\n  background: ", ";\n  overflow-y: auto;\n  ", "\n  &:focus {\n    outline: none;\n  }\n"])), _ref3 => {
-  let {
-    centered
-  } = _ref3;
-  return centered ? 'auto' : '20vh auto auto auto';
-}, _ref4 => {
-  let {
-    size
-  } = _ref4;
-  return allSizes[size];
-}, _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.colors.neutral[500];
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.colors.neutral['000'];
-}, space);
-const DSDialogTitle = styled.h3(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin: 0;\n"])), _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.fontSizes.title[700];
-});
-const DSDialogAddon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
-const DSDialogHeader = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: grid;\n  align-items: center;\n  grid-auto-flow: column;\n  min-height: ", ";\n  padding: 10px ", ";\n  & ", " + ", " {\n    align-self: flex-start;\n    justify-self: flex-end;\n  }\n  & ", ":only-child {\n    justify-self: flex-end;\n  }\n  ", "\n"])), _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.space.m;
-}, _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.space.xs;
-}, DSDialogTitle, DSDialogAddon, DSDialogAddon, space);
-const DSDialogSeparator = styled.hr.attrs(() => ({
-  'aria-hidden': true
-}))(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin: 0;\n  border-top: 1px solid ", ";\n"])), _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.colors.neutral['080'];
-});
-const DSDialogBody = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: ", ";\n  overflow-y: auto;\n  ", "\n  ", "\n  ", "\n  ", "\n"])), _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.space.xs;
-}, layout, space, flexboxes, sizing);
-const DSDialogPrimaryMessage = styled.h3(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: 0;\n"])));
-const DSDialogSecondaryMessage = styled.p(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin: 0;\n  color: ", ";\n"])), _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.colors.neutral[500];
-});
-const DSDialogDefaultLayout = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: row;\n  justify-items: center;\n  align-items: center;\n  grid-gap: ", ";\n\n  ", " {\n    text-align: center;\n  }\n"])), _ref13 => {
-  let {
-    theme
-  } = _ref13;
-  return theme.space.xxs;
-}, DSDialogSecondaryMessage);
-const DSDialogFooter = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  justify-content: flex-end;\n  grid-gap: ", ";\n  min-height: ", ";\n  padding: 0 ", ";\n  ", "\n  ", "\n  ", "\n"])), _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.space.xxs;
-}, _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.space.m;
-}, _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.space.xs;
-}, space, flexboxes, sizing);
+  ${layout}
+  ${space}
+  ${flexboxes}
+  ${sizing}
+`;
+const DSDialogPrimaryMessage = styled.h3`
+  margin: 0;
+`;
+const DSDialogSecondaryMessage = styled.p`
+  margin: 0;
+  color: ${({ theme }) => theme.colors.neutral[500]};
+`;
+const DSDialogDefaultLayout = styled.div`
+  display: grid;
+  grid-auto-flow: row;
+  justify-items: center;
+  align-items: center;
+  grid-gap: ${({ theme }) => theme.space.xxs};
 
-export { DSDialogAddon, DSDialogBody, DSDialogDefaultLayout, DSDialogFooter, DSDialogHeader, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogSeparator, DSDialogTitle, FixedBody, StyledDialogBackground, StyledDialogContainer };
+  ${DSDialogSecondaryMessage} {
+    text-align: center;
+  }
+`;
+const DSDialogFooter = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: flex-end;
+  grid-gap: ${({ theme }) => theme.space.xxs};
+  min-height: ${({ theme }) => theme.space.m};
+  padding: 0 ${({ theme }) => theme.space.xs};
+  ${space}
+  ${flexboxes}
+  ${sizing}
+`;
+export {
+  DSDialogAddon,
+  DSDialogBody,
+  DSDialogDefaultLayout,
+  DSDialogFooter,
+  DSDialogHeader,
+  DSDialogPrimaryMessage,
+  DSDialogSecondaryMessage,
+  DSDialogSeparator,
+  DSDialogTitle,
+  FixedBody,
+  StyledDialogBackground,
+  StyledDialogContainer
+};
+//# sourceMappingURL=styles.js.map

package/esm/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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 type {\n  StyledDialogContainerPropsT,\n  StyledDialogFixedBodyPropsT,\n  StyledDialogBackgroundPropsT,\n} from './DSDialogInternalTypes';\n\nexport const FixedBody = createGlobalStyle<StyledDialogFixedBodyPropsT>`\n  body {\n    overflow: hidden;\n    \n    ${({ bodyInfo }) => (bodyInfo.overflow ? `padding-right: calc( ${bodyInfo.padding} + 15px ) !important;` : ``)}\n  }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundPropsT>`\n  position: fixed;\n  top: 0;\n  bottom: 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<StyledDialogContainerPropsT>`\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  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`;\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"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAOO,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,MAInB,CAAC,EAAE,eAAgB,SAAS,WAAW,wBAAwB,SAAS,iCAAiC;AAAA;AAAA;AAIxG,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQhC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,eAAgB,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,WAAW,SAAS;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,OAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7C,MAAM,gBAAgB,OAAO;AAE7B,MAAM,iBAAiB,OAAO;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;AAGG,MAAM,oBAAoB,OAAO,GAAG,MAAM,MAAO,GAAE,eAAe;AAAA;AAAA,0BAE/C,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,eAAe,OAAO;AAAA,aACtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,IAGpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,OAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,OAAO;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": []
+}