@elliemae/ds-dialog 3.33.0-next.3 → 3.33.0-next.5

package/dist/cjs/DSDialog.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(DSDialog_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_propTypes = require("./propTypes.js");
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
 var import_useDialog = require("./config/useDialog.js");
 var import_DSDialogPortal = require("./parts/DSDialogPortal.js");
 var import_DSDialogCTX = require("./DSDialogCTX.js");
@@ -45,5 +45,5 @@ const DSDialog = (props) => {
 };
 DSDialog.displayName = "DSDialog";
 const DSDialogWithSchema = (0, import_ds_props_helpers.describe)(DSDialog);
-DSDialogWithSchema.propTypes = import_propTypes.propTypes;
+DSDialogWithSchema.propTypes = import_react_desc_prop_types.propTypes;
 //# sourceMappingURL=DSDialog.js.map

package/dist/cjs/DSDialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSDialog.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { propTypes } from './propTypes.js';\nimport { useDialog } from './config/useDialog.js';\nimport { DSDialogPortal } from './parts/DSDialogPortal.js';\nimport { DSDialogContext } from './DSDialogCTX.js';\nimport type { DSDialogT } from './propTypes.js';\n\nconst DSDialog = (props: DSDialogT.Props): JSX.Element => {\n  const ctx = useDialog(props);\n\n  return (\n    <DSDialogContext.Provider value={ctx}>\n      <DSDialogPortal />\n    </DSDialogContext.Provider>\n  );\n};\nDSDialog.displayName = 'DSDialog';\nconst DSDialogWithSchema = describe(DSDialog);\nDSDialogWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSDialog, DSDialogWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAZN,8BAAyB;AACzB,uBAA0B;AAC1B,uBAA0B;AAC1B,4BAA+B;AAC/B,yBAAgC;AAGhC,MAAM,WAAW,CAAC,UAAwC;AACxD,QAAM,UAAM,4BAAU,KAAK;AAE3B,SACE,4CAAC,mCAAgB,UAAhB,EAAyB,OAAO,KAC/B,sDAAC,wCAAe,GAClB;AAEJ;AACA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
+  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { propTypes } from './react-desc-prop-types.js';\nimport { useDialog } from './config/useDialog.js';\nimport { DSDialogPortal } from './parts/DSDialogPortal.js';\nimport { DSDialogContext } from './DSDialogCTX.js';\nimport type { DSDialogT } from './react-desc-prop-types.js';\n\nconst DSDialog = (props: DSDialogT.Props): JSX.Element => {\n  const ctx = useDialog(props);\n\n  return (\n    <DSDialogContext.Provider value={ctx}>\n      <DSDialogPortal />\n    </DSDialogContext.Provider>\n  );\n};\nDSDialog.displayName = 'DSDialog';\nconst DSDialogWithSchema = describe(DSDialog);\nDSDialogWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSDialog, DSDialogWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAZN,8BAAyB;AACzB,mCAA0B;AAC1B,uBAA0B;AAC1B,4BAA+B;AAC/B,yBAAgC;AAGhC,MAAM,WAAW,CAAC,UAAwC;AACxD,QAAM,UAAM,4BAAU,KAAK;AAE3B,SACE,4CAAC,mCAAgB,UAAhB,EAAyB,OAAO,KAC/B,sDAAC,wCAAe,GAClB;AAEJ;AACA,SAAS,cAAc;AACvB,MAAM,yBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
   "names": []
 }

package/dist/cjs/config/useDialog.js

@@ -36,11 +36,11 @@ var import_react = require("react");
 var import_lodash = require("lodash");
 var import_uid = require("uid");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_propTypes = require("../propTypes.js");
+var import_react_desc_prop_types = require("../react-desc-prop-types.js");
 var import_utils = require("../utils.js");
 const useDialog = (props) => {
-  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_propTypes.propTypes, "DSDialog");
-  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_propTypes.defaultProps);
+  (0, import_ds_props_helpers.useValidateTypescriptPropTypes)(props, import_react_desc_prop_types.propTypes, "DSDialog");
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
   const { portalRef, isOpen } = propsWithDefault;
   const actualPortalRef = (0, import_react.useRef)(null);
   const containerRef = (0, import_react.useRef)(null);

package/dist/cjs/config/useDialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/config/useDialog.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useEffect, useMemo, useState, useCallback, useRef, useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { propTypes, defaultProps } from '../propTypes.js';\nimport { getScrollbarWidth, getCurrentRightPadding } from '../utils.js';\nimport type { DSDialogT } from '../propTypes.js';\nimport type { DSDialogInternalsT } from '../sharedTypes.js';\n\nexport const useDialog = (props: DSDialogT.Props): DSDialogInternalsT.DSDialogContext => {\n  useValidateTypescriptPropTypes<DSDialogT.Props>(props, propTypes, 'DSDialog');\n  const propsWithDefault = useMemoMergePropsWithDefault<DSDialogT.InternalProps>(props, defaultProps);\n  const { portalRef, isOpen } = propsWithDefault;\n\n  const actualPortalRef = useRef<HTMLElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const [portalInfo, setPortalInfo] = useState<DSDialogInternalsT.PortalInfo>({\n    paddingRight: '0px',\n    scrollbarWidth: '0px',\n  });\n\n  const portalClassName = useMemo(() => `ds-dialog-${uid(8)}`, []);\n\n  useEffect(() => {\n    if (portalRef) actualPortalRef.current = portalRef.current;\n    else actualPortalRef.current = document.getElementsByTagName('body')['0'];\n  }, [portalRef]);\n\n  useLayoutEffect(() => {\n    if (actualPortalRef.current) {\n      if (isOpen) {\n        actualPortalRef.current.classList.add(portalClassName);\n      } else {\n        actualPortalRef.current.classList.remove(portalClassName);\n      }\n    }\n  }, [actualPortalRef, isOpen, portalClassName]);\n\n  useEffect(() => {\n    if (actualPortalRef.current) {\n      setPortalInfo((prev) => ({\n        ...prev,\n        paddingRight: getCurrentRightPadding(actualPortalRef.current as HTMLElement),\n      }));\n    }\n  }, []);\n\n  const calculateScrollbar = useCallback(() => {\n    if (actualPortalRef.current && !isOpen) {\n      setPortalInfo((prev) => ({\n        ...prev,\n        scrollbarWidth: getScrollbarWidth(actualPortalRef.current as HTMLElement),\n      }));\n    }\n  }, [isOpen]);\n\n  const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);\n\n  useEffect(() => {\n    window.addEventListener('resize', debouncedCalculateScrollbar);\n    return () => {\n      window.removeEventListener('resize', debouncedCalculateScrollbar);\n    };\n  }, [calculateScrollbar, debouncedCalculateScrollbar]);\n\n  useEffect(() => {\n    calculateScrollbar();\n  }, [calculateScrollbar, isOpen]);\n\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefault,\n      actualPortalRef,\n      containerRef,\n      portalInfo,\n      portalClassName,\n    }),\n    [portalClassName, portalInfo, propsWithDefault],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmF;AACnF,oBAAyB;AACzB,iBAAoB;AACpB,8BAA6E;AAC7E,uBAAwC;AACxC,mBAA0D;AAInD,MAAM,YAAY,CAAC,UAA+D;AACvF,8DAAgD,OAAO,4BAAW,UAAU;AAC5E,QAAM,uBAAmB,sDAAsD,OAAO,6BAAY;AAClG,QAAM,EAAE,WAAW,OAAO,IAAI;AAE9B,QAAM,sBAAkB,qBAA2B,IAAI;AACvD,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAwC;AAAA,IAC1E,cAAc;AAAA,IACd,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,sBAAkB,sBAAQ,MAAM,iBAAa,gBAAI,CAAC,KAAK,CAAC,CAAC;AAE/D,8BAAU,MAAM;AACd,QAAI;AAAW,sBAAgB,UAAU,UAAU;AAAA;AAC9C,sBAAgB,UAAU,SAAS,qBAAqB,MAAM,EAAE,GAAG;AAAA,EAC1E,GAAG,CAAC,SAAS,CAAC;AAEd,oCAAgB,MAAM;AACpB,QAAI,gBAAgB,SAAS;AAC3B,UAAI,QAAQ;AACV,wBAAgB,QAAQ,UAAU,IAAI,eAAe;AAAA,MACvD,OAAO;AACL,wBAAgB,QAAQ,UAAU,OAAO,eAAe;AAAA,MAC1D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,QAAQ,eAAe,CAAC;AAE7C,8BAAU,MAAM;AACd,QAAI,gBAAgB,SAAS;AAC3B,oBAAc,CAAC,UAAU;AAAA,QACvB,GAAG;AAAA,QACH,kBAAc,qCAAuB,gBAAgB,OAAsB;AAAA,MAC7E,EAAE;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,gBAAgB,WAAW,CAAC,QAAQ;AACtC,oBAAc,CAAC,UAAU;AAAA,QACvB,GAAG;AAAA,QACH,oBAAgB,gCAAkB,gBAAgB,OAAsB;AAAA,MAC1E,EAAE;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,kCAA8B,sBAAQ,UAAM,wBAAS,oBAAoB,GAAG,GAAG,CAAC,kBAAkB,CAAC;AAEzG,8BAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,2BAA2B;AAC7D,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,2BAA2B;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,oBAAoB,2BAA2B,CAAC;AAEpD,8BAAU,MAAM;AACd,uBAAmB;AAAA,EACrB,GAAG,CAAC,oBAAoB,MAAM,CAAC;AAE/B,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,YAAY,gBAAgB;AAAA,EAChD;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { useEffect, useMemo, useState, useCallback, useRef, useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps, propTypes } from '../react-desc-prop-types.js';\nimport { getScrollbarWidth, getCurrentRightPadding } from '../utils.js';\nimport type { DSDialogT } from '../react-desc-prop-types.js';\nimport type { DSDialogInternalsT } from '../sharedTypes.js';\n\nexport const useDialog = (props: DSDialogT.Props): DSDialogInternalsT.DSDialogContext => {\n  useValidateTypescriptPropTypes<DSDialogT.Props>(props, propTypes, 'DSDialog');\n  const propsWithDefault = useMemoMergePropsWithDefault<DSDialogT.InternalProps>(props, defaultProps);\n  const { portalRef, isOpen } = propsWithDefault;\n\n  const actualPortalRef = useRef<HTMLElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const [portalInfo, setPortalInfo] = useState<DSDialogInternalsT.PortalInfo>({\n    paddingRight: '0px',\n    scrollbarWidth: '0px',\n  });\n\n  const portalClassName = useMemo(() => `ds-dialog-${uid(8)}`, []);\n\n  useEffect(() => {\n    if (portalRef) actualPortalRef.current = portalRef.current;\n    else actualPortalRef.current = document.getElementsByTagName('body')['0'];\n  }, [portalRef]);\n\n  useLayoutEffect(() => {\n    if (actualPortalRef.current) {\n      if (isOpen) {\n        actualPortalRef.current.classList.add(portalClassName);\n      } else {\n        actualPortalRef.current.classList.remove(portalClassName);\n      }\n    }\n  }, [actualPortalRef, isOpen, portalClassName]);\n\n  useEffect(() => {\n    if (actualPortalRef.current) {\n      setPortalInfo((prev) => ({\n        ...prev,\n        paddingRight: getCurrentRightPadding(actualPortalRef.current as HTMLElement),\n      }));\n    }\n  }, []);\n\n  const calculateScrollbar = useCallback(() => {\n    if (actualPortalRef.current && !isOpen) {\n      setPortalInfo((prev) => ({\n        ...prev,\n        scrollbarWidth: getScrollbarWidth(actualPortalRef.current as HTMLElement),\n      }));\n    }\n  }, [isOpen]);\n\n  const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);\n\n  useEffect(() => {\n    window.addEventListener('resize', debouncedCalculateScrollbar);\n    return () => {\n      window.removeEventListener('resize', debouncedCalculateScrollbar);\n    };\n  }, [calculateScrollbar, debouncedCalculateScrollbar]);\n\n  useEffect(() => {\n    calculateScrollbar();\n  }, [calculateScrollbar, isOpen]);\n\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefault,\n      actualPortalRef,\n      containerRef,\n      portalInfo,\n      portalClassName,\n    }),\n    [portalClassName, portalInfo, propsWithDefault],\n  );\n\n  return ctx;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmF;AACnF,oBAAyB;AACzB,iBAAoB;AACpB,8BAA6E;AAC7E,mCAAwC;AACxC,mBAA0D;AAInD,MAAM,YAAY,CAAC,UAA+D;AACvF,8DAAgD,OAAO,wCAAW,UAAU;AAC5E,QAAM,uBAAmB,sDAAsD,OAAO,yCAAY;AAClG,QAAM,EAAE,WAAW,OAAO,IAAI;AAE9B,QAAM,sBAAkB,qBAA2B,IAAI;AACvD,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAwC;AAAA,IAC1E,cAAc;AAAA,IACd,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,sBAAkB,sBAAQ,MAAM,iBAAa,gBAAI,CAAC,KAAK,CAAC,CAAC;AAE/D,8BAAU,MAAM;AACd,QAAI;AAAW,sBAAgB,UAAU,UAAU;AAAA;AAC9C,sBAAgB,UAAU,SAAS,qBAAqB,MAAM,EAAE,GAAG;AAAA,EAC1E,GAAG,CAAC,SAAS,CAAC;AAEd,oCAAgB,MAAM;AACpB,QAAI,gBAAgB,SAAS;AAC3B,UAAI,QAAQ;AACV,wBAAgB,QAAQ,UAAU,IAAI,eAAe;AAAA,MACvD,OAAO;AACL,wBAAgB,QAAQ,UAAU,OAAO,eAAe;AAAA,MAC1D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,QAAQ,eAAe,CAAC;AAE7C,8BAAU,MAAM;AACd,QAAI,gBAAgB,SAAS;AAC3B,oBAAc,CAAC,UAAU;AAAA,QACvB,GAAG;AAAA,QACH,kBAAc,qCAAuB,gBAAgB,OAAsB;AAAA,MAC7E,EAAE;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,gBAAgB,WAAW,CAAC,QAAQ;AACtC,oBAAc,CAAC,UAAU;AAAA,QACvB,GAAG;AAAA,QACH,oBAAgB,gCAAkB,gBAAgB,OAAsB;AAAA,MAC1E,EAAE;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,kCAA8B,sBAAQ,UAAM,wBAAS,oBAAoB,GAAG,GAAG,CAAC,kBAAkB,CAAC;AAEzG,8BAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,2BAA2B;AAC7D,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,2BAA2B;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,oBAAoB,2BAA2B,CAAC;AAEpD,8BAAU,MAAM;AACd,uBAAmB;AAAA,EACrB,GAAG,CAAC,oBAAoB,MAAM,CAAC;AAE/B,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,YAAY,gBAAgB;AAAA,EAChD;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { describe, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  DSDialogBody,\n  DSDialogHeader,\n  DSDialogFooter,\n  DSDialogSeparator,\n  DSDialogTitle,\n  DSDialogAddon,\n  DSDialogDefaultLayout,\n  DSDialogPrimaryMessage,\n  DSDialogSecondaryMessage,\n} from './styles.js';\nimport type { WeakValidationMap } from 'react';\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\n\nDSDialogBody.displayName = 'DSDialogBody';\nDSDialogHeader.displayName = 'DSDialogHeader';\nDSDialogFooter.displayName = 'DSDialogFooter';\nDSDialogSeparator.displayName = 'DSDialogSeparator';\nDSDialogTitle.displayName = 'DSDialogTitle';\nDSDialogAddon.displayName = 'DSDialogAddon';\nDSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';\nDSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';\nDSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';\n\nconst DSDialogBodyWithSchema = describe(DSDialogBody as React.FC);\nconst DSDialogHeaderWithSchema = describe(DSDialogHeader as React.FC);\nconst DSDialogFooterWithSchema = describe(DSDialogFooter as React.FC);\nconst DSDialogSeparatorWithSchema = describe(DSDialogSeparator as React.FC);\nconst DSDialogTitleWithSchema = describe(DSDialogTitle as React.FC);\nconst DSDialogAddonWithSchema = describe(DSDialogAddon as React.FC);\nconst DSDialogDefaultLayoutWithSchema = describe(DSDialogDefaultLayout as React.FC);\nconst DSDialogPrimaryMessageWithSchema = describe(DSDialogPrimaryMessage as React.FC);\nconst DSDialogSecondaryMessageWithSchema = describe(DSDialogSecondaryMessage as React.FC);\n\nDSDialogBodyWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogHeaderWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogFooterWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogSeparatorWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogTitleWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogAddonWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\n\nexport * from './DSDialog.js';\nexport * from './DSDialogDatatestid.js';\nexport { DSDialogSizes } from './utils.js';\nexport {\n  DSDialogBody,\n  DSDialogHeader,\n  DSDialogFooter,\n  DSDialogSeparator,\n  DSDialogTitle,\n  DSDialogAddon,\n  DSDialogDefaultLayout,\n  DSDialogPrimaryMessage,\n  DSDialogSecondaryMessage,\n  DSDialogBodyWithSchema,\n  DSDialogHeaderWithSchema,\n  DSDialogFooterWithSchema,\n  DSDialogSeparatorWithSchema,\n  DSDialogTitleWithSchema,\n  DSDialogAddonWithSchema,\n  DSDialogDefaultLayoutWithSchema,\n  DSDialogPrimaryMessageWithSchema,\n  DSDialogSecondaryMessageWithSchema,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import { describe, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  DSDialogBody,\n  DSDialogHeader,\n  DSDialogFooter,\n  DSDialogSeparator,\n  DSDialogTitle,\n  DSDialogAddon,\n  DSDialogDefaultLayout,\n  DSDialogPrimaryMessage,\n  DSDialogSecondaryMessage,\n} from './styles.js';\nimport type { WeakValidationMap } from 'react';\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\n\nDSDialogBody.displayName = 'DSDialogBody';\nDSDialogHeader.displayName = 'DSDialogHeader';\nDSDialogFooter.displayName = 'DSDialogFooter';\nDSDialogSeparator.displayName = 'DSDialogSeparator';\nDSDialogTitle.displayName = 'DSDialogTitle';\nDSDialogAddon.displayName = 'DSDialogAddon';\nDSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';\nDSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';\nDSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';\n\nconst DSDialogBodyWithSchema = describe(DSDialogBody as React.FC);\nconst DSDialogHeaderWithSchema = describe(DSDialogHeader as React.FC);\nconst DSDialogFooterWithSchema = describe(DSDialogFooter as React.FC);\nconst DSDialogSeparatorWithSchema = describe(DSDialogSeparator as React.FC);\nconst DSDialogTitleWithSchema = describe(DSDialogTitle as React.FC);\nconst DSDialogAddonWithSchema = describe(DSDialogAddon as React.FC);\nconst DSDialogDefaultLayoutWithSchema = describe(DSDialogDefaultLayout as React.FC);\nconst DSDialogPrimaryMessageWithSchema = describe(DSDialogPrimaryMessage as React.FC);\nconst DSDialogSecondaryMessageWithSchema = describe(DSDialogSecondaryMessage as React.FC);\n\nDSDialogBodyWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogHeaderWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogFooterWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogSeparatorWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogTitleWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogAddonWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\n\nexport * from './DSDialog.js';\nexport * from './DSDialogDatatestid.js';\nexport { DSDialogSizes } from './utils.js';\nexport {\n  DSDialogBody,\n  DSDialogHeader,\n  DSDialogFooter,\n  DSDialogSeparator,\n  DSDialogTitle,\n  DSDialogAddon,\n  DSDialogDefaultLayout,\n  DSDialogPrimaryMessage,\n  DSDialogSecondaryMessage,\n  DSDialogBodyWithSchema,\n  DSDialogHeaderWithSchema,\n  DSDialogFooterWithSchema,\n  DSDialogSeparatorWithSchema,\n  DSDialogTitleWithSchema,\n  DSDialogAddonWithSchema,\n  DSDialogDefaultLayoutWithSchema,\n  DSDialogPrimaryMessageWithSchema,\n  DSDialogSecondaryMessageWithSchema,\n};\nexport type { DSDialogT } from './react-desc-prop-types.js';\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAoD;AACpD,oBAUO;AAmCP,wBAAc,0BA9Cd;AA+CA,wBAAc,oCA/Cd;AAgDA,mBAA8B;AAhC9B,2BAAa,cAAc;AAC3B,6BAAe,cAAc;AAC7B,6BAAe,cAAc;AAC7B,gCAAkB,cAAc;AAChC,4BAAc,cAAc;AAC5B,4BAAc,cAAc;AAC5B,oCAAsB,cAAc;AACpC,qCAAuB,cAAc;AACrC,uCAAyB,cAAc;AAEvC,MAAM,6BAAyB,kCAAS,0BAAwB;AAChE,MAAM,+BAA2B,kCAAS,4BAA0B;AACpE,MAAM,+BAA2B,kCAAS,4BAA0B;AACpE,MAAM,kCAA8B,kCAAS,+BAA6B;AAC1E,MAAM,8BAA0B,kCAAS,2BAAyB;AAClE,MAAM,8BAA0B,kCAAS,2BAAyB;AAClE,MAAM,sCAAkC,kCAAS,mCAAiC;AAClF,MAAM,uCAAmC,kCAAS,oCAAkC;AACpF,MAAM,yCAAqC,kCAAS,sCAAoC;AAExF,uBAAuB,YAAY;AACnC,yBAAyB,YAAY;AACrC,yBAAyB,YAAY;AACrC,4BAA4B,YAAY;AACxC,wBAAwB,YAAY;AACpC,wBAAwB,YAAY;AACpC,gCAAgC,YAAY;AAC5C,iCAAiC,YAAY;AAC7C,mCAAmC,YAAY;",
   "names": []
 }

package/dist/cjs/{propTypes.js → react-desc-prop-types.js}

@@ -26,12 +26,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var propTypes_exports = {};
-__export(propTypes_exports, {
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
   defaultProps: () => defaultProps,
   propTypes: () => propTypes
 });
-module.exports = __toCommonJS(propTypes_exports);
+module.exports = __toCommonJS(react_desc_prop_types_exports);
 var React = __toESM(require("react"));
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
 var import_utils = require("./utils.js");
@@ -44,8 +44,7 @@ const defaultProps = {
   onClickOutside: () => {
   },
   onClose: () => {
-  },
-  portalRef: null
+  }
 };
 const propTypes = {
   ...import_ds_props_helpers.globalAttributesPropTypes,
@@ -62,4 +61,4 @@ const propTypes = {
   size: import_ds_props_helpers.PropTypes.oneOf(import_utils.DSDialogSizesArrayValues).description(`Dialog's width size.`).defaultValue(import_utils.DSDialogSizes.DEFAULT),
   width: import_ds_props_helpers.PropTypes.string.description("Dialog width.")
 };
-//# sourceMappingURL=propTypes.js.map
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSDialogSizes, DSDialogSizesArrayValues } from './utils.js';\n\nexport declare namespace DSDialogT {\n  export type Sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';\n\n  export interface DefaultProps {\n    isOpen: boolean;\n    centered: boolean;\n    size: Sizes;\n    removeAutoFocus: boolean;\n    onClickOutside: () => void;\n    onClose: () => void;\n    width: string | number;\n  }\n\n  export interface RequiredProps {\n    children: TypescriptHelpersT.ReactChildrenComplete;\n  }\n\n  export interface OptionalProps {\n    zIndex?: number;\n    portalRef?: React.MutableRefObject<HTMLElement | null> | null;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, 'size' | 'width' | 'children'> {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps, OptionalProps {}\n}\n\nexport const defaultProps: DSDialogT.DefaultProps = {\n  isOpen: false,\n  centered: false,\n  size: DSDialogSizes.DEFAULT,\n  width: '',\n  removeAutoFocus: false,\n  onClickOutside: () => {},\n  onClose: () => {},\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  width: PropTypes.string.description('Dialog width.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAqD;AAErD,mBAAwD;AAiCjD,MAAM,eAAuC;AAAA,EAClD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM,2BAAc;AAAA,EACpB,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,SAAS,MAAM;AAAA,EAAC;AAClB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,kCAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAAA,EAC3F,UAAU,kCAAU,KAAK,YAAY,oBAAoB,EAAE;AAAA,EAC3D,UAAU,kCAAU,KAAK,YAAY,qBAAqB,EAAE,aAAa,KAAK;AAAA,EAC9E,iBAAiB,kCAAU,KACxB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,kCAAU,KACvB,YAAY,+EAA+E,EAC3F,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,SAAS,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC7F,MAAM,kCAAU,MAAM,qCAAwB,EAC3C,YAAY,sBAAsB,EAClC,aAAa,2BAAc,OAAO;AAAA,EACrC,OAAO,kCAAU,OAAO,YAAY,eAAe;AACrD;",
+  "names": []
+}

package/dist/cjs/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { DSDialogT } from './propTypes.js';\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"],
+  "sourcesContent": ["import type { DSDialogT } from './react-desc-prop-types.js';\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.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, createGlobalStyle, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { allSizes } from './utils.js';\nimport type { DSDialogT } from './propTypes.js';\nimport type { DSDialogInternalsT } from './sharedTypes.js';\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  width: number | string;\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: 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, theme }) => zIndex ?? theme.zIndex.dialog};\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, width }) => (width === '' ? allSizes[size] : width)};\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  &:focus {\n    outline: none;\n  }\n  max-height: 100vh;\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')<React.PropsWithChildren & XstyledProps>`\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  ${xStyledCommonProps}\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  ${xStyledCommonProps}\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')<React.PropsWithChildren>`\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  ${xStyledCommonProps}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, createGlobalStyle, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { allSizes } from './utils.js';\nimport type { DSDialogT } from './react-desc-prop-types.js';\nimport type { DSDialogInternalsT } from './sharedTypes.js';\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  width: number | string;\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: 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, theme }) => zIndex ?? theme.zIndex.dialog};\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, width }) => (width === '' ? allSizes[size] : width)};\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  &:focus {\n    outline: none;\n  }\n  max-height: 100vh;\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')<React.PropsWithChildren & XstyledProps>`\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  ${xStyledCommonProps}\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  ${xStyledCommonProps}\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')<React.PropsWithChildren>`\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  ${xStyledCommonProps}\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,uBAA8D;AAE9D,mBAAyB;AAmBlB,MAAM,eAAe;AAAA,IACxB,CAAC,EAAE,gBAAgB,MAAM,IAAI;AAAA;AAAA,MAE3B,CAAC,EAAE,WAAW,MACd,WAAW,mBAAmB,QAC1B,wBAAwB,WAAW,kBAAkB,WAAW,iCAChE;AAAA;AAAA;AAIH,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,QAAQ,MAAM,MAAM,UAAU,MAAM,OAAO;AAAA;AAGpD,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,MAAM,MAAM,MAAO,UAAU,KAAK,sBAAS,IAAI,IAAI;AAAA;AAAA,8BAEnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACrD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlD,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShD,MAAM,gBAAgB,wBAAO;AAE7B,MAAM,qBAAiB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA,gBAI1B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA,IAGF;AAAA;AAGG,MAAM,oBAAoB,wBAAO,GAAG,MAAM,OAAO,EAAE,eAAe,KAAK,EAAE;AAAA;AAAA,0BAEtD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG5D,MAAM,mBAAe,yBAAO,KAAK;AAAA,aAC3B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA,IAEpC;AAAA;AAGG,MAAM,yBAAyB,wBAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,wBAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG3C,MAAM,4BAAwB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,cAKnC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,qBAAiB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACtC;AAAA;",
   "names": []
 }

package/dist/cjs/typescript-testing/typescript-dialog-valid.js

@@ -0,0 +1,128 @@
+"use strict";
+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 __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(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import__ = require("../index.js");
+const ref = import_react.default.createRef();
+const noop = () => {
+};
+const testRequiredProps = {
+  children: "Content"
+};
+const testOptionalProps = {
+  portalRef: ref,
+  zIndex: 10
+};
+const testPartialDefaults = {
+  onClose: noop,
+  isOpen: true,
+  size: "medium"
+};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  centered: true,
+  isOpen: true,
+  onClickOutside: noop,
+  onClose: noop,
+  removeAutoFocus: false,
+  size: "default",
+  width: 300
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  centered: true,
+  isOpen: true,
+  onClickOutside: noop,
+  onClose: noop,
+  removeAutoFocus: false,
+  size: "default",
+  width: 300,
+  children: "Content",
+  portalRef: ref,
+  zIndex: 10
+};
+const testInferedTypeCompatibility = {
+  centered: true,
+  isOpen: true,
+  onClickOutside: noop,
+  onClose: noop,
+  removeAutoFocus: false,
+  size: "default",
+  width: 300,
+  children: "Content",
+  portalRef: ref,
+  zIndex: 10
+};
+const testDefinitionAsConst = {
+  centered: true,
+  isOpen: true,
+  onClickOutside: noop,
+  onClose: noop,
+  removeAutoFocus: false,
+  size: "default",
+  width: 300,
+  children: "Content",
+  portalRef: ref,
+  zIndex: 10
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSDialog, { ...testExplicitDefinition }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSDialog, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSDialog, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import__.DSDialog,
+    {
+      centered: true,
+      isOpen: true,
+      onClickOutside: noop,
+      onClose: noop,
+      removeAutoFocus: false,
+      size: "default",
+      width: 300,
+      children: "Content",
+      portalRef: ref,
+      zIndex: 10
+    }
+  )
+] });
+//# sourceMappingURL=typescript-dialog-valid.js.map

package/dist/cjs/typescript-testing/typescript-dialog-valid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-dialog-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React, { type MutableRefObject } from 'react';\nimport { DSDialog } from '../index.js';\nimport type { DSDialogT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSDialogT.Props;\ntype ComponentPropsInternals = DSDialogT.InternalProps;\ntype ComponentPropsDefaultProps = DSDialogT.DefaultProps;\ntype ComponentPropsOptionalProps = DSDialogT.OptionalProps;\ntype ComponentPropsRequiredProps = DSDialogT.RequiredProps;\n\nconst ref = React.createRef() as MutableRefObject<HTMLElement>;\nconst noop = () => {};\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: 'Content',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  portalRef: ref,\n  zIndex: 10,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  onClose: noop,\n  isOpen: true,\n  size: 'medium',\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  centered: true,\n  isOpen: true,\n  onClickOutside: noop,\n  onClose: noop,\n  removeAutoFocus: false,\n  size: 'default',\n  width: 300,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  centered: true,\n  isOpen: true,\n  onClickOutside: noop,\n  onClose: noop,\n  removeAutoFocus: false,\n  size: 'default',\n  width: 300,\n  children: 'Content',\n  portalRef: ref,\n  zIndex: 10,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  centered: true,\n  isOpen: true,\n  onClickOutside: noop,\n  onClose: noop,\n  removeAutoFocus: false,\n  size: 'default',\n  width: 300,\n  children: 'Content',\n  portalRef: ref,\n  zIndex: 10,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  centered: true,\n  isOpen: true,\n  onClickOutside: noop,\n  onClose: noop,\n  removeAutoFocus: false,\n  size: 'default',\n  width: 300,\n  children: 'Content',\n  portalRef: ref,\n  zIndex: 10,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSDialog {...testExplicitDefinition} />\n    <DSDialog {...testInferedTypeCompatibility} />\n    <DSDialog {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSDialog\n      centered\n      isOpen\n      onClickOutside={noop}\n      onClose={noop}\n      removeAutoFocus={false}\n      size={'default'}\n      width={300}\n      children=\"Content\"\n      portalRef={ref}\n      zIndex={10}\n    />\n  </>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;AC6GrB;AA5GF,mBAA6C;AAC7C,eAAyB;AAUzB,MAAM,MAAM,aAAAA,QAAM,UAAU;AAC5B,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AAEA,MAAM,oBAAiD;AAAA,EACrD,WAAW;AAAA,EACX,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AACV;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AACV;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AACV;AAEA,MAAM,wBAAwB,MAC5B,4EAEE;AAAA,8CAAC,qBAAU,GAAG,wBAAwB;AAAA,EACtC,4CAAC,qBAAU,GAAG,8BAA8B;AAAA,EAC5C,4CAAC,qBAAU,GAAG,uBAAuB;AAAA,EAErC;AAAA,IAAC;AAAA;AAAA,MACC,UAAQ;AAAA,MACR,QAAM;AAAA,MACN,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,UAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA;AAAA,EACV;AAAA,GACF;",
+  "names": ["React"]
+}

package/dist/esm/DSDialog.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { describe } from "@elliemae/ds-props-helpers";
-import { propTypes } from "./propTypes.js";
+import { propTypes } from "./react-desc-prop-types.js";
 import { useDialog } from "./config/useDialog.js";
 import { DSDialogPortal } from "./parts/DSDialogPortal.js";
 import { DSDialogContext } from "./DSDialogCTX.js";

package/dist/esm/DSDialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSDialog.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { propTypes } from './propTypes.js';\nimport { useDialog } from './config/useDialog.js';\nimport { DSDialogPortal } from './parts/DSDialogPortal.js';\nimport { DSDialogContext } from './DSDialogCTX.js';\nimport type { DSDialogT } from './propTypes.js';\n\nconst DSDialog = (props: DSDialogT.Props): JSX.Element => {\n  const ctx = useDialog(props);\n\n  return (\n    <DSDialogContext.Provider value={ctx}>\n      <DSDialogPortal />\n    </DSDialogContext.Provider>\n  );\n};\nDSDialog.displayName = 'DSDialog';\nconst DSDialogWithSchema = describe(DSDialog);\nDSDialogWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSDialog, DSDialogWithSchema };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { propTypes } from './react-desc-prop-types.js';\nimport { useDialog } from './config/useDialog.js';\nimport { DSDialogPortal } from './parts/DSDialogPortal.js';\nimport { DSDialogContext } from './DSDialogCTX.js';\nimport type { DSDialogT } from './react-desc-prop-types.js';\n\nconst DSDialog = (props: DSDialogT.Props): JSX.Element => {\n  const ctx = useDialog(props);\n\n  return (\n    <DSDialogContext.Provider value={ctx}>\n      <DSDialogPortal />\n    </DSDialogContext.Provider>\n  );\n};\nDSDialog.displayName = 'DSDialog';\nconst DSDialogWithSchema = describe(DSDialog);\nDSDialogWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSDialog, DSDialogWithSchema };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACcjB;AAZN,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAGhC,MAAM,WAAW,CAAC,UAAwC;AACxD,QAAM,MAAM,UAAU,KAAK;AAE3B,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,KAC/B,8BAAC,kBAAe,GAClB;AAEJ;AACA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
   "names": []
 }

package/dist/esm/config/useDialog.js

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState, useCallback, useRef, useLayoutEffect } fr
 import { debounce } from "lodash";
 import { uid } from "uid";
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { propTypes, defaultProps } from "../propTypes.js";
+import { defaultProps, propTypes } from "../react-desc-prop-types.js";
 import { getScrollbarWidth, getCurrentRightPadding } from "../utils.js";
 const useDialog = (props) => {
   useValidateTypescriptPropTypes(props, propTypes, "DSDialog");

package/dist/esm/config/useDialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDialog.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState, useCallback, useRef, useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { propTypes, defaultProps } from '../propTypes.js';\nimport { getScrollbarWidth, getCurrentRightPadding } from '../utils.js';\nimport type { DSDialogT } from '../propTypes.js';\nimport type { DSDialogInternalsT } from '../sharedTypes.js';\n\nexport const useDialog = (props: DSDialogT.Props): DSDialogInternalsT.DSDialogContext => {\n  useValidateTypescriptPropTypes<DSDialogT.Props>(props, propTypes, 'DSDialog');\n  const propsWithDefault = useMemoMergePropsWithDefault<DSDialogT.InternalProps>(props, defaultProps);\n  const { portalRef, isOpen } = propsWithDefault;\n\n  const actualPortalRef = useRef<HTMLElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const [portalInfo, setPortalInfo] = useState<DSDialogInternalsT.PortalInfo>({\n    paddingRight: '0px',\n    scrollbarWidth: '0px',\n  });\n\n  const portalClassName = useMemo(() => `ds-dialog-${uid(8)}`, []);\n\n  useEffect(() => {\n    if (portalRef) actualPortalRef.current = portalRef.current;\n    else actualPortalRef.current = document.getElementsByTagName('body')['0'];\n  }, [portalRef]);\n\n  useLayoutEffect(() => {\n    if (actualPortalRef.current) {\n      if (isOpen) {\n        actualPortalRef.current.classList.add(portalClassName);\n      } else {\n        actualPortalRef.current.classList.remove(portalClassName);\n      }\n    }\n  }, [actualPortalRef, isOpen, portalClassName]);\n\n  useEffect(() => {\n    if (actualPortalRef.current) {\n      setPortalInfo((prev) => ({\n        ...prev,\n        paddingRight: getCurrentRightPadding(actualPortalRef.current as HTMLElement),\n      }));\n    }\n  }, []);\n\n  const calculateScrollbar = useCallback(() => {\n    if (actualPortalRef.current && !isOpen) {\n      setPortalInfo((prev) => ({\n        ...prev,\n        scrollbarWidth: getScrollbarWidth(actualPortalRef.current as HTMLElement),\n      }));\n    }\n  }, [isOpen]);\n\n  const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);\n\n  useEffect(() => {\n    window.addEventListener('resize', debouncedCalculateScrollbar);\n    return () => {\n      window.removeEventListener('resize', debouncedCalculateScrollbar);\n    };\n  }, [calculateScrollbar, debouncedCalculateScrollbar]);\n\n  useEffect(() => {\n    calculateScrollbar();\n  }, [calculateScrollbar, isOpen]);\n\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefault,\n      actualPortalRef,\n      containerRef,\n      portalInfo,\n      portalClassName,\n    }),\n    [portalClassName, portalInfo, propsWithDefault],\n  );\n\n  return ctx;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,UAAU,aAAa,QAAQ,uBAAuB;AACnF,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,WAAW,oBAAoB;AACxC,SAAS,mBAAmB,8BAA8B;AAInD,MAAM,YAAY,CAAC,UAA+D;AACvF,iCAAgD,OAAO,WAAW,UAAU;AAC5E,QAAM,mBAAmB,6BAAsD,OAAO,YAAY;AAClG,QAAM,EAAE,WAAW,OAAO,IAAI;AAE9B,QAAM,kBAAkB,OAA2B,IAAI;AACvD,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAwC;AAAA,IAC1E,cAAc;AAAA,IACd,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,kBAAkB,QAAQ,MAAM,aAAa,IAAI,CAAC,KAAK,CAAC,CAAC;AAE/D,YAAU,MAAM;AACd,QAAI;AAAW,sBAAgB,UAAU,UAAU;AAAA;AAC9C,sBAAgB,UAAU,SAAS,qBAAqB,MAAM,EAAE,GAAG;AAAA,EAC1E,GAAG,CAAC,SAAS,CAAC;AAEd,kBAAgB,MAAM;AACpB,QAAI,gBAAgB,SAAS;AAC3B,UAAI,QAAQ;AACV,wBAAgB,QAAQ,UAAU,IAAI,eAAe;AAAA,MACvD,OAAO;AACL,wBAAgB,QAAQ,UAAU,OAAO,eAAe;AAAA,MAC1D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,QAAQ,eAAe,CAAC;AAE7C,YAAU,MAAM;AACd,QAAI,gBAAgB,SAAS;AAC3B,oBAAc,CAAC,UAAU;AAAA,QACvB,GAAG;AAAA,QACH,cAAc,uBAAuB,gBAAgB,OAAsB;AAAA,MAC7E,EAAE;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,gBAAgB,WAAW,CAAC,QAAQ;AACtC,oBAAc,CAAC,UAAU;AAAA,QACvB,GAAG;AAAA,QACH,gBAAgB,kBAAkB,gBAAgB,OAAsB;AAAA,MAC1E,EAAE;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,8BAA8B,QAAQ,MAAM,SAAS,oBAAoB,GAAG,GAAG,CAAC,kBAAkB,CAAC;AAEzG,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,2BAA2B;AAC7D,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,2BAA2B;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,oBAAoB,2BAA2B,CAAC;AAEpD,YAAU,MAAM;AACd,uBAAmB;AAAA,EACrB,GAAG,CAAC,oBAAoB,MAAM,CAAC;AAE/B,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,YAAY,gBAAgB;AAAA,EAChD;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState, useCallback, useRef, useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport { defaultProps, propTypes } from '../react-desc-prop-types.js';\nimport { getScrollbarWidth, getCurrentRightPadding } from '../utils.js';\nimport type { DSDialogT } from '../react-desc-prop-types.js';\nimport type { DSDialogInternalsT } from '../sharedTypes.js';\n\nexport const useDialog = (props: DSDialogT.Props): DSDialogInternalsT.DSDialogContext => {\n  useValidateTypescriptPropTypes<DSDialogT.Props>(props, propTypes, 'DSDialog');\n  const propsWithDefault = useMemoMergePropsWithDefault<DSDialogT.InternalProps>(props, defaultProps);\n  const { portalRef, isOpen } = propsWithDefault;\n\n  const actualPortalRef = useRef<HTMLElement | null>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const [portalInfo, setPortalInfo] = useState<DSDialogInternalsT.PortalInfo>({\n    paddingRight: '0px',\n    scrollbarWidth: '0px',\n  });\n\n  const portalClassName = useMemo(() => `ds-dialog-${uid(8)}`, []);\n\n  useEffect(() => {\n    if (portalRef) actualPortalRef.current = portalRef.current;\n    else actualPortalRef.current = document.getElementsByTagName('body')['0'];\n  }, [portalRef]);\n\n  useLayoutEffect(() => {\n    if (actualPortalRef.current) {\n      if (isOpen) {\n        actualPortalRef.current.classList.add(portalClassName);\n      } else {\n        actualPortalRef.current.classList.remove(portalClassName);\n      }\n    }\n  }, [actualPortalRef, isOpen, portalClassName]);\n\n  useEffect(() => {\n    if (actualPortalRef.current) {\n      setPortalInfo((prev) => ({\n        ...prev,\n        paddingRight: getCurrentRightPadding(actualPortalRef.current as HTMLElement),\n      }));\n    }\n  }, []);\n\n  const calculateScrollbar = useCallback(() => {\n    if (actualPortalRef.current && !isOpen) {\n      setPortalInfo((prev) => ({\n        ...prev,\n        scrollbarWidth: getScrollbarWidth(actualPortalRef.current as HTMLElement),\n      }));\n    }\n  }, [isOpen]);\n\n  const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);\n\n  useEffect(() => {\n    window.addEventListener('resize', debouncedCalculateScrollbar);\n    return () => {\n      window.removeEventListener('resize', debouncedCalculateScrollbar);\n    };\n  }, [calculateScrollbar, debouncedCalculateScrollbar]);\n\n  useEffect(() => {\n    calculateScrollbar();\n  }, [calculateScrollbar, isOpen]);\n\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefault,\n      actualPortalRef,\n      containerRef,\n      portalInfo,\n      portalClassName,\n    }),\n    [portalClassName, portalInfo, propsWithDefault],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,UAAU,aAAa,QAAQ,uBAAuB;AACnF,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,cAAc,iBAAiB;AACxC,SAAS,mBAAmB,8BAA8B;AAInD,MAAM,YAAY,CAAC,UAA+D;AACvF,iCAAgD,OAAO,WAAW,UAAU;AAC5E,QAAM,mBAAmB,6BAAsD,OAAO,YAAY;AAClG,QAAM,EAAE,WAAW,OAAO,IAAI;AAE9B,QAAM,kBAAkB,OAA2B,IAAI;AACvD,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAwC;AAAA,IAC1E,cAAc;AAAA,IACd,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,kBAAkB,QAAQ,MAAM,aAAa,IAAI,CAAC,KAAK,CAAC,CAAC;AAE/D,YAAU,MAAM;AACd,QAAI;AAAW,sBAAgB,UAAU,UAAU;AAAA;AAC9C,sBAAgB,UAAU,SAAS,qBAAqB,MAAM,EAAE,GAAG;AAAA,EAC1E,GAAG,CAAC,SAAS,CAAC;AAEd,kBAAgB,MAAM;AACpB,QAAI,gBAAgB,SAAS;AAC3B,UAAI,QAAQ;AACV,wBAAgB,QAAQ,UAAU,IAAI,eAAe;AAAA,MACvD,OAAO;AACL,wBAAgB,QAAQ,UAAU,OAAO,eAAe;AAAA,MAC1D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,QAAQ,eAAe,CAAC;AAE7C,YAAU,MAAM;AACd,QAAI,gBAAgB,SAAS;AAC3B,oBAAc,CAAC,UAAU;AAAA,QACvB,GAAG;AAAA,QACH,cAAc,uBAAuB,gBAAgB,OAAsB;AAAA,MAC7E,EAAE;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,gBAAgB,WAAW,CAAC,QAAQ;AACtC,oBAAc,CAAC,UAAU;AAAA,QACvB,GAAG;AAAA,QACH,gBAAgB,kBAAkB,gBAAgB,OAAsB;AAAA,MAC1E,EAAE;AAAA,IACJ;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,8BAA8B,QAAQ,MAAM,SAAS,oBAAoB,GAAG,GAAG,CAAC,kBAAkB,CAAC;AAEzG,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,2BAA2B;AAC7D,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,2BAA2B;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,oBAAoB,2BAA2B,CAAC;AAEpD,YAAU,MAAM;AACd,uBAAmB;AAAA,EACrB,GAAG,CAAC,oBAAoB,MAAM,CAAC;AAE/B,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,YAAY,gBAAgB;AAAA,EAChD;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  DSDialogBody,\n  DSDialogHeader,\n  DSDialogFooter,\n  DSDialogSeparator,\n  DSDialogTitle,\n  DSDialogAddon,\n  DSDialogDefaultLayout,\n  DSDialogPrimaryMessage,\n  DSDialogSecondaryMessage,\n} from './styles.js';\nimport type { WeakValidationMap } from 'react';\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\n\nDSDialogBody.displayName = 'DSDialogBody';\nDSDialogHeader.displayName = 'DSDialogHeader';\nDSDialogFooter.displayName = 'DSDialogFooter';\nDSDialogSeparator.displayName = 'DSDialogSeparator';\nDSDialogTitle.displayName = 'DSDialogTitle';\nDSDialogAddon.displayName = 'DSDialogAddon';\nDSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';\nDSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';\nDSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';\n\nconst DSDialogBodyWithSchema = describe(DSDialogBody as React.FC);\nconst DSDialogHeaderWithSchema = describe(DSDialogHeader as React.FC);\nconst DSDialogFooterWithSchema = describe(DSDialogFooter as React.FC);\nconst DSDialogSeparatorWithSchema = describe(DSDialogSeparator as React.FC);\nconst DSDialogTitleWithSchema = describe(DSDialogTitle as React.FC);\nconst DSDialogAddonWithSchema = describe(DSDialogAddon as React.FC);\nconst DSDialogDefaultLayoutWithSchema = describe(DSDialogDefaultLayout as React.FC);\nconst DSDialogPrimaryMessageWithSchema = describe(DSDialogPrimaryMessage as React.FC);\nconst DSDialogSecondaryMessageWithSchema = describe(DSDialogSecondaryMessage as React.FC);\n\nDSDialogBodyWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogHeaderWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogFooterWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogSeparatorWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogTitleWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogAddonWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\n\nexport * from './DSDialog.js';\nexport * from './DSDialogDatatestid.js';\nexport { DSDialogSizes } from './utils.js';\nexport {\n  DSDialogBody,\n  DSDialogHeader,\n  DSDialogFooter,\n  DSDialogSeparator,\n  DSDialogTitle,\n  DSDialogAddon,\n  DSDialogDefaultLayout,\n  DSDialogPrimaryMessage,\n  DSDialogSecondaryMessage,\n  DSDialogBodyWithSchema,\n  DSDialogHeaderWithSchema,\n  DSDialogFooterWithSchema,\n  DSDialogSeparatorWithSchema,\n  DSDialogTitleWithSchema,\n  DSDialogAddonWithSchema,\n  DSDialogDefaultLayoutWithSchema,\n  DSDialogPrimaryMessageWithSchema,\n  DSDialogSecondaryMessageWithSchema,\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport {\n  DSDialogBody,\n  DSDialogHeader,\n  DSDialogFooter,\n  DSDialogSeparator,\n  DSDialogTitle,\n  DSDialogAddon,\n  DSDialogDefaultLayout,\n  DSDialogPrimaryMessage,\n  DSDialogSecondaryMessage,\n} from './styles.js';\nimport type { WeakValidationMap } from 'react';\nimport type {} from '@xstyled/system';\nimport type {} from '@xstyled/util';\n\nDSDialogBody.displayName = 'DSDialogBody';\nDSDialogHeader.displayName = 'DSDialogHeader';\nDSDialogFooter.displayName = 'DSDialogFooter';\nDSDialogSeparator.displayName = 'DSDialogSeparator';\nDSDialogTitle.displayName = 'DSDialogTitle';\nDSDialogAddon.displayName = 'DSDialogAddon';\nDSDialogDefaultLayout.displayName = 'DSDialogDefaultLayout';\nDSDialogPrimaryMessage.displayName = 'DSDialogPrimaryMessage';\nDSDialogSecondaryMessage.displayName = 'DSDialogSecondaryMessage';\n\nconst DSDialogBodyWithSchema = describe(DSDialogBody as React.FC);\nconst DSDialogHeaderWithSchema = describe(DSDialogHeader as React.FC);\nconst DSDialogFooterWithSchema = describe(DSDialogFooter as React.FC);\nconst DSDialogSeparatorWithSchema = describe(DSDialogSeparator as React.FC);\nconst DSDialogTitleWithSchema = describe(DSDialogTitle as React.FC);\nconst DSDialogAddonWithSchema = describe(DSDialogAddon as React.FC);\nconst DSDialogDefaultLayoutWithSchema = describe(DSDialogDefaultLayout as React.FC);\nconst DSDialogPrimaryMessageWithSchema = describe(DSDialogPrimaryMessage as React.FC);\nconst DSDialogSecondaryMessageWithSchema = describe(DSDialogSecondaryMessage as React.FC);\n\nDSDialogBodyWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogHeaderWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogFooterWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogSeparatorWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogTitleWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogAddonWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogDefaultLayoutWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogPrimaryMessageWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\nDSDialogSecondaryMessageWithSchema.propTypes = globalAttributesPropTypes as WeakValidationMap<unknown>;\n\nexport * from './DSDialog.js';\nexport * from './DSDialogDatatestid.js';\nexport { DSDialogSizes } from './utils.js';\nexport {\n  DSDialogBody,\n  DSDialogHeader,\n  DSDialogFooter,\n  DSDialogSeparator,\n  DSDialogTitle,\n  DSDialogAddon,\n  DSDialogDefaultLayout,\n  DSDialogPrimaryMessage,\n  DSDialogSecondaryMessage,\n  DSDialogBodyWithSchema,\n  DSDialogHeaderWithSchema,\n  DSDialogFooterWithSchema,\n  DSDialogSeparatorWithSchema,\n  DSDialogTitleWithSchema,\n  DSDialogAddonWithSchema,\n  DSDialogDefaultLayoutWithSchema,\n  DSDialogPrimaryMessageWithSchema,\n  DSDialogSecondaryMessageWithSchema,\n};\nexport type { DSDialogT } from './react-desc-prop-types.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAAU,iCAAiC;AACpD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKP,aAAa,cAAc;AAC3B,eAAe,cAAc;AAC7B,eAAe,cAAc;AAC7B,kBAAkB,cAAc;AAChC,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,sBAAsB,cAAc;AACpC,uBAAuB,cAAc;AACrC,yBAAyB,cAAc;AAEvC,MAAM,yBAAyB,SAAS,YAAwB;AAChE,MAAM,2BAA2B,SAAS,cAA0B;AACpE,MAAM,2BAA2B,SAAS,cAA0B;AACpE,MAAM,8BAA8B,SAAS,iBAA6B;AAC1E,MAAM,0BAA0B,SAAS,aAAyB;AAClE,MAAM,0BAA0B,SAAS,aAAyB;AAClE,MAAM,kCAAkC,SAAS,qBAAiC;AAClF,MAAM,mCAAmC,SAAS,sBAAkC;AACpF,MAAM,qCAAqC,SAAS,wBAAoC;AAExF,uBAAuB,YAAY;AACnC,yBAAyB,YAAY;AACrC,yBAAyB,YAAY;AACrC,4BAA4B,YAAY;AACxC,wBAAwB,YAAY;AACpC,wBAAwB,YAAY;AACpC,gCAAgC,YAAY;AAC5C,iCAAiC,YAAY;AAC7C,mCAAmC,YAAY;AAE/C,cAAc;AACd,cAAc;AACd,SAAS,qBAAqB;",
   "names": []
 }

package/dist/esm/{propTypes.js → react-desc-prop-types.js}

@@ -10,8 +10,7 @@ const defaultProps = {
   onClickOutside: () => {
   },
   onClose: () => {
-  },
-  portalRef: null
+  }
 };
 const propTypes = {
   ...globalAttributesPropTypes,
@@ -32,4 +31,4 @@ export {
   defaultProps,
   propTypes
 };
-//# sourceMappingURL=propTypes.js.map
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSDialogSizes, DSDialogSizesArrayValues } from './utils.js';\n\nexport declare namespace DSDialogT {\n  export type Sizes = 'default' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';\n\n  export interface DefaultProps {\n    isOpen: boolean;\n    centered: boolean;\n    size: Sizes;\n    removeAutoFocus: boolean;\n    onClickOutside: () => void;\n    onClose: () => void;\n    width: string | number;\n  }\n\n  export interface RequiredProps {\n    children: TypescriptHelpersT.ReactChildrenComplete;\n  }\n\n  export interface OptionalProps {\n    zIndex?: number;\n    portalRef?: React.MutableRefObject<HTMLElement | null> | null;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLDivElement>, 'size' | 'width' | 'children'> {}\n\n  export interface InternalProps extends DefaultProps, RequiredProps, OptionalProps {}\n}\n\nexport const defaultProps: DSDialogT.DefaultProps = {\n  isOpen: false,\n  centered: false,\n  size: DSDialogSizes.DEFAULT,\n  width: '',\n  removeAutoFocus: false,\n  onClickOutside: () => {},\n  onClose: () => {},\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  width: PropTypes.string.description('Dialog width.'),\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,2BAA2B,iBAAiB;AAErD,SAAS,eAAe,gCAAgC;AAiCjD,MAAM,eAAuC;AAAA,EAClD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM,cAAc;AAAA,EACpB,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,SAAS,MAAM;AAAA,EAAC;AAClB;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,UAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAAA,EAC3F,UAAU,UAAU,KAAK,YAAY,oBAAoB,EAAE;AAAA,EAC3D,UAAU,UAAU,KAAK,YAAY,qBAAqB,EAAE,aAAa,KAAK;AAAA,EAC9E,iBAAiB,UAAU,KACxB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,UAAU,KACvB,YAAY,+EAA+E,EAC3F,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,SAAS,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC7F,MAAM,UAAU,MAAM,wBAAwB,EAC3C,YAAY,sBAAsB,EAClC,aAAa,cAAc,OAAO;AAAA,EACrC,OAAO,UAAU,OAAO,YAAY,eAAe;AACrD;",
+  "names": []
+}

package/dist/esm/styles.js.map

@@ -1,7 +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, createGlobalStyle, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { allSizes } from './utils.js';\nimport type { DSDialogT } from './propTypes.js';\nimport type { DSDialogInternalsT } from './sharedTypes.js';\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  width: number | string;\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: 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, theme }) => zIndex ?? theme.zIndex.dialog};\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, width }) => (width === '' ? allSizes[size] : width)};\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  &:focus {\n    outline: none;\n  }\n  max-height: 100vh;\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')<React.PropsWithChildren & XstyledProps>`\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  ${xStyledCommonProps}\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  ${xStyledCommonProps}\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')<React.PropsWithChildren>`\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  ${xStyledCommonProps}\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, createGlobalStyle, xStyledCommonProps } from '@elliemae/ds-system';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { allSizes } from './utils.js';\nimport type { DSDialogT } from './react-desc-prop-types.js';\nimport type { DSDialogInternalsT } from './sharedTypes.js';\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  width: number | string;\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: 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, theme }) => zIndex ?? theme.zIndex.dialog};\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, width }) => (width === '' ? allSizes[size] : width)};\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  &:focus {\n    outline: none;\n  }\n  max-height: 100vh;\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')<React.PropsWithChildren & XstyledProps>`\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  ${xStyledCommonProps}\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  ${xStyledCommonProps}\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')<React.PropsWithChildren>`\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  ${xStyledCommonProps}\n`;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,mBAAmB,0BAA0B;AAE9D,SAAS,gBAAgB;AAmBlB,MAAM,eAAe;AAAA,IACxB,CAAC,EAAE,gBAAgB,MAAM,IAAI;AAAA;AAAA,MAE3B,CAAC,EAAE,WAAW,MACd,WAAW,mBAAmB,QAC1B,wBAAwB,WAAW,kBAAkB,WAAW,iCAChE;AAAA;AAAA;AAIH,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,QAAQ,MAAM,MAAM,UAAU,MAAM,OAAO;AAAA;AAGpD,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,SAAS,MAAO,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,MAAM,MAAM,MAAO,UAAU,KAAK,SAAS,IAAI,IAAI;AAAA;AAAA,8BAEnC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,gBACrD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlD,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShD,MAAM,gBAAgB,OAAO;AAE7B,MAAM,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,gBAI1B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA,IAGF;AAAA;AAGG,MAAM,oBAAoB,OAAO,GAAG,MAAM,OAAO,EAAE,eAAe,KAAK,EAAE;AAAA;AAAA,0BAEtD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAG5D,MAAM,eAAe,OAAO,KAAK;AAAA,aAC3B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA,IAEpC;AAAA;AAGG,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,OAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG3C,MAAM,wBAAwB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,cAKnC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,IACtC;AAAA;",
   "names": []
 }

package/dist/esm/typescript-testing/typescript-dialog-valid.js

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2 from "react";
+import { DSDialog } from "../index.js";
+const ref = React2.createRef();
+const noop = () => {
+};
+const testRequiredProps = {
+  children: "Content"
+};
+const testOptionalProps = {
+  portalRef: ref,
+  zIndex: 10
+};
+const testPartialDefaults = {
+  onClose: noop,
+  isOpen: true,
+  size: "medium"
+};
+const testProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testPartialDefaults
+};
+const testCompleteDefaults = {
+  centered: true,
+  isOpen: true,
+  onClickOutside: noop,
+  onClose: noop,
+  removeAutoFocus: false,
+  size: "default",
+  width: 300
+};
+const testInternalProps = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testInternalPropsAsSyntax = {
+  ...testRequiredProps,
+  ...testOptionalProps,
+  ...testCompleteDefaults
+};
+const testExplicitDefinition = {
+  centered: true,
+  isOpen: true,
+  onClickOutside: noop,
+  onClose: noop,
+  removeAutoFocus: false,
+  size: "default",
+  width: 300,
+  children: "Content",
+  portalRef: ref,
+  zIndex: 10
+};
+const testInferedTypeCompatibility = {
+  centered: true,
+  isOpen: true,
+  onClickOutside: noop,
+  onClose: noop,
+  removeAutoFocus: false,
+  size: "default",
+  width: 300,
+  children: "Content",
+  portalRef: ref,
+  zIndex: 10
+};
+const testDefinitionAsConst = {
+  centered: true,
+  isOpen: true,
+  onClickOutside: noop,
+  onClose: noop,
+  removeAutoFocus: false,
+  size: "default",
+  width: 300,
+  children: "Content",
+  portalRef: ref,
+  zIndex: 10
+};
+const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(DSDialog, { ...testExplicitDefinition }),
+  /* @__PURE__ */ jsx(DSDialog, { ...testInferedTypeCompatibility }),
+  /* @__PURE__ */ jsx(DSDialog, { ...testDefinitionAsConst }),
+  /* @__PURE__ */ jsx(
+    DSDialog,
+    {
+      centered: true,
+      isOpen: true,
+      onClickOutside: noop,
+      onClose: noop,
+      removeAutoFocus: false,
+      size: "default",
+      width: 300,
+      children: "Content",
+      portalRef: ref,
+      zIndex: 10
+    }
+  )
+] });
+//# sourceMappingURL=typescript-dialog-valid.js.map

package/dist/esm/typescript-testing/typescript-dialog-valid.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-dialog-valid.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport React, { type MutableRefObject } from 'react';\nimport { DSDialog } from '../index.js';\nimport type { DSDialogT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSDialogT.Props;\ntype ComponentPropsInternals = DSDialogT.InternalProps;\ntype ComponentPropsDefaultProps = DSDialogT.DefaultProps;\ntype ComponentPropsOptionalProps = DSDialogT.OptionalProps;\ntype ComponentPropsRequiredProps = DSDialogT.RequiredProps;\n\nconst ref = React.createRef() as MutableRefObject<HTMLElement>;\nconst noop = () => {};\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: 'Content',\n};\n\nconst testOptionalProps: ComponentPropsOptionalProps = {\n  portalRef: ref,\n  zIndex: 10,\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n// Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  onClose: noop,\n  isOpen: true,\n  size: 'medium',\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n};\n\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  centered: true,\n  isOpen: true,\n  onClickOutside: noop,\n  onClose: noop,\n  removeAutoFocus: false,\n  size: 'default',\n  width: 300,\n};\n\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n};\n\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testOptionalProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  centered: true,\n  isOpen: true,\n  onClickOutside: noop,\n  onClose: noop,\n  removeAutoFocus: false,\n  size: 'default',\n  width: 300,\n  children: 'Content',\n  portalRef: ref,\n  zIndex: 10,\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  centered: true,\n  isOpen: true,\n  onClickOutside: noop,\n  onClose: noop,\n  removeAutoFocus: false,\n  size: 'default',\n  width: 300,\n  children: 'Content',\n  portalRef: ref,\n  zIndex: 10,\n} as ComponentPropsForApp;\n\nconst testDefinitionAsConst = {\n  centered: true,\n  isOpen: true,\n  onClickOutside: noop,\n  onClose: noop,\n  removeAutoFocus: false,\n  size: 'default',\n  width: 300,\n  children: 'Content',\n  portalRef: ref,\n  zIndex: 10,\n} as const;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSDialog {...testExplicitDefinition} />\n    <DSDialog {...testInferedTypeCompatibility} />\n    <DSDialog {...testDefinitionAsConst} />\n    {/* works with inline values */}\n    <DSDialog\n      centered\n      isOpen\n      onClickOutside={noop}\n      onClose={noop}\n      removeAutoFocus={false}\n      size={'default'}\n      width={300}\n      children=\"Content\"\n      portalRef={ref}\n      zIndex={10}\n    />\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6GrB,mBAEE,KAFF;AA5GF,OAAOA,YAAsC;AAC7C,SAAS,gBAAgB;AAUzB,MAAM,MAAMA,OAAM,UAAU;AAC5B,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,oBAAiD;AAAA,EACrD,UAAU;AACZ;AAEA,MAAM,oBAAiD;AAAA,EACrD,WAAW;AAAA,EACX,QAAQ;AACV;AAIA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,uBAA6D;AAAA,EACjE,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AACV;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AACV;AAEA,MAAM,wBAAwB;AAAA,EAC5B,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AACV;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,YAAU,GAAG,wBAAwB;AAAA,EACtC,oBAAC,YAAU,GAAG,8BAA8B;AAAA,EAC5C,oBAAC,YAAU,GAAG,uBAAuB;AAAA,EAErC;AAAA,IAAC;AAAA;AAAA,MACC,UAAQ;AAAA,MACR,QAAM;AAAA,MACN,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,UAAS;AAAA,MACT,WAAW;AAAA,MACX,QAAQ;AAAA;AAAA,EACV;AAAA,GACF;",
+  "names": ["React"]
+}

package/dist/types/DSDialog.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { DSDialogT } from './propTypes.js';
+import type { DSDialogT } from './react-desc-prop-types.js';
 declare const DSDialog: {
     (props: DSDialogT.Props): JSX.Element;
     displayName: string;

package/dist/types/config/useDialog.d.ts

@@ -1,3 +1,3 @@
-import type { DSDialogT } from '../propTypes.js';
+import type { DSDialogT } from '../react-desc-prop-types.js';
 import type { DSDialogInternalsT } from '../sharedTypes.js';
 export declare const useDialog: (props: DSDialogT.Props) => DSDialogInternalsT.DSDialogContext;

package/dist/types/index.d.ts

@@ -12,3 +12,4 @@ export * from './DSDialog.js';
 export * from './DSDialogDatatestid.js';
 export { DSDialogSizes } from './utils.js';
 export { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogBodyWithSchema, DSDialogHeaderWithSchema, DSDialogFooterWithSchema, DSDialogSeparatorWithSchema, DSDialogTitleWithSchema, DSDialogAddonWithSchema, DSDialogDefaultLayoutWithSchema, DSDialogPrimaryMessageWithSchema, DSDialogSecondaryMessageWithSchema, };
+export type { DSDialogT } from './react-desc-prop-types.js';

package/dist/types/parts/DSDialogPortal.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const DSDialogPortal: () => JSX.Element | null;

package/dist/types/{propTypes.d.ts → react-desc-prop-types.d.ts}

@@ -10,18 +10,18 @@ export declare namespace DSDialogT {
         removeAutoFocus: boolean;
         onClickOutside: () => void;
         onClose: () => void;
-        portalRef: React.MutableRefObject<HTMLElement | null> | null;
         width: string | number;
     }
-    interface PropsRequired {
+    interface RequiredProps {
         children: TypescriptHelpersT.ReactChildrenComplete;
     }
-    interface PropsOptional {
+    interface OptionalProps {
         zIndex?: number;
+        portalRef?: React.MutableRefObject<HTMLElement | null> | null;
     }
-    interface InternalProps extends DefaultProps, PropsRequired, PropsOptional {
+    interface Props extends Partial<DefaultProps>, RequiredProps, OptionalProps, Omit<GlobalAttributesT<HTMLDivElement>, 'size' | 'width' | 'children'> {
     }
-    interface Props extends Partial<DefaultProps>, PropsRequired, PropsOptional, Omit<GlobalAttributesT<HTMLDivElement>, 'size' | 'width' | 'children'> {
+    interface InternalProps extends DefaultProps, RequiredProps, OptionalProps {
     }
 }
 export declare const defaultProps: DSDialogT.DefaultProps;

package/dist/types/sharedTypes.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { DSDialogT } from './propTypes.js';
+import type { DSDialogT } from './react-desc-prop-types.js';
 export declare namespace DSDialogInternalsT {
     interface PortalInfo {
         scrollbarWidth: string;

package/dist/types/styles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { XstyledProps } from '@elliemae/ds-props-helpers';
-import type { DSDialogT } from './propTypes.js';
+import type { DSDialogT } from './react-desc-prop-types.js';
 import type { DSDialogInternalsT } from './sharedTypes.js';
 interface PortalStylesT {
     portalInfo: DSDialogInternalsT.PortalInfo;

package/dist/types/typescript-testing/typescript-dialog-valid.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "3.33.0-next.3",
+  "version": "3.33.0-next.5",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dialog",
   "files": [
@@ -69,17 +69,17 @@
   "dependencies": {
     "lodash": "~4.17.21",
     "uid": "~2.0.1",
-    "@elliemae/ds-button": "3.33.0-next.3",
-    "@elliemae/ds-icons": "3.33.0-next.3",
-    "@elliemae/ds-props-helpers": "3.33.0-next.3",
-    "@elliemae/ds-system": "3.33.0-next.3",
-    "@elliemae/ds-typescript-helpers": "3.33.0-next.3",
-    "@elliemae/ds-utilities": "3.33.0-next.3"
+    "@elliemae/ds-utilities": "3.33.0-next.5",
+    "@elliemae/ds-typescript-helpers": "3.33.0-next.5",
+    "@elliemae/ds-props-helpers": "3.33.0-next.5",
+    "@elliemae/ds-button": "3.33.0-next.5",
+    "@elliemae/ds-icons": "3.33.0-next.5",
+    "@elliemae/ds-system": "3.33.0-next.5"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "~9.0.0-next.31",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.33.0-next.3"
+    "@elliemae/ds-monorepo-devops": "3.33.0-next.5"
   },
   "peerDependencies": {
     "react": "^17.0.2",

package/dist/cjs/propTypes.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/propTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSDialogSizes, DSDialogSizesArrayValues } from './utils.js';\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    onClickOutside: () => void;\n    onClose: () => void;\n    portalRef: React.MutableRefObject<HTMLElement | null> | null;\n    width: string | number;\n  }\n\n  export interface PropsRequired {\n    children: TypescriptHelpersT.ReactChildrenComplete;\n  }\n\n  export interface PropsOptional {\n    zIndex?: number;\n  }\n\n  export interface InternalProps extends DefaultProps, PropsRequired, PropsOptional {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      PropsRequired,\n      PropsOptional,\n      Omit<GlobalAttributesT<HTMLDivElement>, 'size' | 'width' | 'children'> {}\n}\n\nexport const defaultProps: DSDialogT.DefaultProps = {\n  isOpen: false,\n  centered: false,\n  size: DSDialogSizes.DEFAULT,\n  width: '',\n  removeAutoFocus: false,\n  onClickOutside: () => {},\n  onClose: () => {},\n  portalRef: null,\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  width: PropTypes.string.description('Dialog width.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAqD;AAErD,mBAAwD;AAgCjD,MAAM,eAAuC;AAAA,EAClD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM,2BAAc;AAAA,EACpB,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW;AACb;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,kCAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAAA,EAC3F,UAAU,kCAAU,KAAK,YAAY,oBAAoB,EAAE;AAAA,EAC3D,UAAU,kCAAU,KAAK,YAAY,qBAAqB,EAAE,aAAa,KAAK;AAAA,EAC9E,iBAAiB,kCAAU,KACxB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,kCAAU,KACvB,YAAY,+EAA+E,EAC3F,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,SAAS,kCAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC7F,MAAM,kCAAU,MAAM,qCAAwB,EAC3C,YAAY,sBAAsB,EAClC,aAAa,2BAAc,OAAO;AAAA,EACrC,OAAO,kCAAU,OAAO,YAAY,eAAe;AACrD;",
-  "names": []
-}

package/dist/esm/propTypes.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type {} from '@elliemae/ds-utilities';\nimport type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { globalAttributesPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSDialogSizes, DSDialogSizesArrayValues } from './utils.js';\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    onClickOutside: () => void;\n    onClose: () => void;\n    portalRef: React.MutableRefObject<HTMLElement | null> | null;\n    width: string | number;\n  }\n\n  export interface PropsRequired {\n    children: TypescriptHelpersT.ReactChildrenComplete;\n  }\n\n  export interface PropsOptional {\n    zIndex?: number;\n  }\n\n  export interface InternalProps extends DefaultProps, PropsRequired, PropsOptional {}\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      PropsRequired,\n      PropsOptional,\n      Omit<GlobalAttributesT<HTMLDivElement>, 'size' | 'width' | 'children'> {}\n}\n\nexport const defaultProps: DSDialogT.DefaultProps = {\n  isOpen: false,\n  centered: false,\n  size: DSDialogSizes.DEFAULT,\n  width: '',\n  removeAutoFocus: false,\n  onClickOutside: () => {},\n  onClose: () => {},\n  portalRef: null,\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  width: PropTypes.string.description('Dialog width.'),\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,2BAA2B,iBAAiB;AAErD,SAAS,eAAe,gCAAgC;AAgCjD,MAAM,eAAuC;AAAA,EAClD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM,cAAc;AAAA,EACpB,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,gBAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,SAAS,MAAM;AAAA,EAAC;AAAA,EAChB,WAAW;AACb;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,QAAQ,UAAU,KAAK,YAAY,oCAAoC,EAAE,aAAa,KAAK;AAAA,EAC3F,UAAU,UAAU,KAAK,YAAY,oBAAoB,EAAE;AAAA,EAC3D,UAAU,UAAU,KAAK,YAAY,qBAAqB,EAAE,aAAa,KAAK;AAAA,EAC9E,iBAAiB,UAAU,KACxB;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,UAAU,KACvB,YAAY,+EAA+E,EAC3F,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EACxB,SAAS,UAAU,KAAK,YAAY,kCAAkC,EAAE,aAAa,MAAM;AAAA,EAAC,CAAC;AAAA,EAC7F,MAAM,UAAU,MAAM,wBAAwB,EAC3C,YAAY,sBAAsB,EAClC,aAAa,cAAc,OAAO;AAAA,EACrC,OAAO,UAAU,OAAO,YAAY,eAAe;AACrD;",
-  "names": []
-}