@elliemae/ds-dialog 3.12.0-rc.2 → 3.12.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/cjs/DSDialog.js +1 -4
  2. package/dist/cjs/DSDialog.js.map +1 -1
  3. package/dist/cjs/config/useDialog.js +1 -1
  4. package/dist/cjs/config/useDialog.js.map +2 -2
  5. package/dist/cjs/parts/dialogContent/DSDialogContent.js +29 -26
  6. package/dist/cjs/parts/dialogContent/DSDialogContent.js.map +1 -1
  7. package/dist/esm/DSDialog.js +1 -4
  8. package/dist/esm/DSDialog.js.map +1 -1
  9. package/dist/esm/config/useDialog.js +1 -1
  10. package/dist/esm/config/useDialog.js.map +2 -2
  11. package/dist/esm/parts/dialogContent/DSDialogContent.js +29 -26
  12. package/dist/esm/parts/dialogContent/DSDialogContent.js.map +1 -1
  13. package/package.json +5 -5
package/dist/cjs/DSDialog.js CHANGED
@@ -37,10 +37,7 @@ var import_DSDialogPortal = require("./parts/DSDialogPortal");
37
37
  var import_DSDialogCTX = require("./DSDialogCTX");
38
38
  const DSDialog = (props) => {
39
39
  const ctx = (0, import_useDialog.useDialog)(props);
40
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSDialogCTX.DSDialogContext.Provider, {
41
- value: ctx,
42
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSDialogPortal.DSDialogPortal, {})
43
- });
40
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSDialogCTX.DSDialogContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DSDialogPortal.DSDialogPortal, {}) });
44
41
  };
45
42
  DSDialog.displayName = "DSDialog";
46
43
  const DSDialogWithSchema = (0, import_ds_utilities.describe)(DSDialog);
package/dist/cjs/DSDialog.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/DSDialog.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes } from './propTypes';\nimport { useDialog } from './config/useDialog';\nimport { DSDialogPortal } from './parts/DSDialogPortal';\nimport { DSDialogContext } from './DSDialogCTX';\nimport type { DSDialogT } from './propTypes';\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAZN,0BAAyB;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;AAAA,IAAyB,OAAO;AAAA,IAC/B,sDAAC,wCAAe;AAAA,GAClB;AAEJ;AACA,SAAS,cAAc;AACvB,MAAM,yBAAqB,8BAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcjB;AAZN,0BAAyB;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,8BAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
6
6
  "names": []
7
7
  }
package/dist/cjs/config/useDialog.js CHANGED
@@ -36,7 +36,7 @@ var import_defaultProps = require("../defaultProps");
36
36
  var import_propTypes = require("../propTypes");
37
37
  var import_utils = require("../utils");
38
38
  const useDialog = (props) => {
39
- (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_propTypes.propTypes);
39
+ (0, import_ds_utilities.useValidateTypescriptPropTypes)(props, import_propTypes.propTypes, "DSDialog");
40
40
  const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_defaultProps.defaultProps);
41
41
  const { portalRef, isOpen } = propsWithDefault;
42
42
  const actualPortalRef = (0, import_react.useRef)(null);
package/dist/cjs/config/useDialog.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/config/useDialog.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useEffect, useMemo, useState, useCallback, useRef, useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../defaultProps';\nimport { propTypes } from '../propTypes';\nimport { getScrollbarWidth, getCurrentRightPadding } from '../utils';\nimport type { DSDialogT } from '../propTypes';\nimport type { DSDialogInternalsT } from '../sharedTypes';\n\nexport const useDialog = (props: DSDialogT.Props): DSDialogInternalsT.DSDialogContext => {\n useValidateTypescriptPropTypes<DSDialogT.Props>(props, propTypes);\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0F;AAC1F,oBAAyB;AACzB,iBAAoB;AACpB,0BAA6E;AAC7E,0BAA6B;AAC7B,uBAA0B;AAC1B,mBAA0D;AAInD,MAAM,YAAY,CAAC,UAA+D;AACvF,0DAAgD,OAAO,0BAAS;AAChE,QAAM,uBAAmB,kDAAsD,OAAO,gCAAY;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;AAAA,EACvE,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;",
4
+ "sourcesContent": ["import React, { useEffect, useMemo, useState, useCallback, useRef, useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../defaultProps';\nimport { propTypes } from '../propTypes';\nimport { getScrollbarWidth, getCurrentRightPadding } from '../utils';\nimport type { DSDialogT } from '../propTypes';\nimport type { DSDialogInternalsT } from '../sharedTypes';\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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA0F;AAC1F,oBAAyB;AACzB,iBAAoB;AACpB,0BAA6E;AAC7E,0BAA6B;AAC7B,uBAA0B;AAC1B,mBAA0D;AAInD,MAAM,YAAY,CAAC,UAA+D;AACvF,0DAAgD,OAAO,4BAAW,UAAU;AAC5E,QAAM,uBAAmB,kDAAsD,OAAO,gCAAY;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;AAAA,EACvE,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;",
6
6
  "names": []
7
7
  }
package/dist/cjs/parts/dialogContent/DSDialogContent.js CHANGED
@@ -54,31 +54,34 @@ const DSDialogContent = () => {
54
54
  },
55
55
  [containerRef, removeAutoFocus]
56
56
  );
57
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledDialogBackground, {
58
- className,
59
- onClick: handleOutsideClick,
60
- "data-portalbg": true,
61
- "data-testid": import_DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
62
- zIndex,
63
- children: [
64
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.PortalStyles, {
65
- portalInfo,
66
- portalClassName
67
- }),
68
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledDialogContainer, {
69
- role: "dialog",
70
- "aria-modal": true,
71
- ref: refCallback,
72
- tabIndex: !removeAutoFocus ? 0 : void 0,
73
- onKeyDown: handleOnKeyDown,
74
- ...(0, import_utils.getSpaceProps)(rest),
75
- centered,
76
- "data-testid": import_DSDialogDatatestid.DSDialogDatatestid.CONTAINER,
77
- ...restOfGlobalAttributes,
78
- size,
79
- children
80
- })
81
- ]
82
- });
57
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
58
+ import_styles.StyledDialogBackground,
59
+ {
60
+ className,
61
+ onClick: handleOutsideClick,
62
+ "data-portalbg": true,
63
+ "data-testid": import_DSDialogDatatestid.DSDialogDatatestid.BACKGROUND,
64
+ zIndex,
65
+ children: [
66
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.PortalStyles, { portalInfo, portalClassName }),
67
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
68
+ import_styles.StyledDialogContainer,
69
+ {
70
+ role: "dialog",
71
+ "aria-modal": true,
72
+ ref: refCallback,
73
+ tabIndex: !removeAutoFocus ? 0 : void 0,
74
+ onKeyDown: handleOnKeyDown,
75
+ ...(0, import_utils.getSpaceProps)(rest),
76
+ centered,
77
+ "data-testid": import_DSDialogDatatestid.DSDialogDatatestid.CONTAINER,
78
+ ...restOfGlobalAttributes,
79
+ size,
80
+ children
81
+ }
82
+ )
83
+ ]
84
+ }
85
+ );
83
86
  };
84
87
  //# sourceMappingURL=DSDialogContent.js.map
package/dist/cjs/parts/dialogContent/DSDialogContent.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/dialogContent/DSDialogContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { PortalStyles, StyledDialogBackground, StyledDialogContainer } from '../../styles';\nimport { getSpaceProps } from '../../utils';\nimport { DSDialogDatatestid } from '../../DSDialogDatatestid';\nimport { DSDialogContext } from '../../DSDialogCTX';\nimport { useDialogContent } from './useDialogContent';\n\nexport const DSDialogContent = () => {\n const { handleOutsideClick, handleOnKeyDown } = useDialogContent();\n const { props, containerRef, portalInfo, portalClassName } = useContext(DSDialogContext);\n\n const { removeAutoFocus, zIndex, centered, size, children, ...rest } = props;\n\n const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(props, {\n onClick: handleOutsideClick,\n onKeyDown: handleOnKeyDown,\n });\n\n const refCallback = useCallback(\n (_ref: HTMLDivElement | null) => {\n if (_ref) {\n containerRef.current = _ref;\n if (!removeAutoFocus) _ref.focus();\n }\n },\n [containerRef, removeAutoFocus],\n );\n\n return (\n <StyledDialogBackground\n className={className}\n onClick={handleOutsideClick}\n data-portalbg\n data-testid={DSDialogDatatestid.BACKGROUND}\n zIndex={zIndex}\n >\n <PortalStyles portalInfo={portalInfo} portalClassName={portalClassName} />\n <StyledDialogContainer\n role=\"dialog\"\n aria-modal\n ref={refCallback}\n tabIndex={!removeAutoFocus ? 0 : undefined}\n onKeyDown={handleOnKeyDown}\n {...getSpaceProps(rest as unknown as Record<string, unknown>)}\n centered={centered}\n data-testid={DSDialogDatatestid.CONTAINER}\n {...restOfGlobalAttributes}\n size={size}\n >\n {children}\n </StyledDialogContainer>\n </StyledDialogBackground>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BnB;AA9BJ,mBAA+C;AAC/C,0BAAuC;AACvC,oBAA4E;AAC5E,mBAA8B;AAC9B,gCAAmC;AACnC,yBAAgC;AAChC,8BAAiC;AAE1B,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,oBAAoB,gBAAgB,QAAI,0CAAiB;AACjE,QAAM,EAAE,OAAO,cAAc,YAAY,gBAAgB,QAAI,yBAAW,kCAAe;AAEvF,QAAM,EAAE,iBAAiB,QAAQ,UAAU,MAAM,aAAa,KAAK,IAAI;AAEvE,QAAM,EAAE,cAAc,uBAAuB,QAAI,4CAAuB,OAAO;AAAA,IAC7E,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC;AAED,QAAM,kBAAc;AAAA,IAClB,CAAC,SAAgC;AAC/B,UAAI,MAAM;AACR,qBAAa,UAAU;AACvB,YAAI,CAAC;AAAiB,eAAK,MAAM;AAAA,MACnC;AAAA,IACF;AAAA,IACA,CAAC,cAAc,eAAe;AAAA,EAChC;AAEA,SACE,6CAAC;AAAA,IACC;AAAA,IACA,SAAS;AAAA,IACT,iBAAa;AAAA,IACb,eAAa,6CAAmB;AAAA,IAChC;AAAA,IAEA;AAAA,kDAAC;AAAA,QAAa;AAAA,QAAwB;AAAA,OAAkC;AAAA,MACxE,4CAAC;AAAA,QACC,MAAK;AAAA,QACL,cAAU;AAAA,QACV,KAAK;AAAA,QACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,QACjC,WAAW;AAAA,QACV,OAAG,4BAAc,IAA0C;AAAA,QAC5D;AAAA,QACA,eAAa,6CAAmB;AAAA,QAC/B,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,OACH;AAAA;AAAA,GACF;AAEJ;",
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BnB;AA9BJ,mBAA+C;AAC/C,0BAAuC;AACvC,oBAA4E;AAC5E,mBAA8B;AAC9B,gCAAmC;AACnC,yBAAgC;AAChC,8BAAiC;AAE1B,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,oBAAoB,gBAAgB,QAAI,0CAAiB;AACjE,QAAM,EAAE,OAAO,cAAc,YAAY,gBAAgB,QAAI,yBAAW,kCAAe;AAEvF,QAAM,EAAE,iBAAiB,QAAQ,UAAU,MAAM,aAAa,KAAK,IAAI;AAEvE,QAAM,EAAE,cAAc,uBAAuB,QAAI,4CAAuB,OAAO;AAAA,IAC7E,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC;AAED,QAAM,kBAAc;AAAA,IAClB,CAAC,SAAgC;AAC/B,UAAI,MAAM;AACR,qBAAa,UAAU;AACvB,YAAI,CAAC;AAAiB,eAAK,MAAM;AAAA,MACnC;AAAA,IACF;AAAA,IACA,CAAC,cAAc,eAAe;AAAA,EAChC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,iBAAa;AAAA,MACb,eAAa,6CAAmB;AAAA,MAChC;AAAA,MAEA;AAAA,oDAAC,8BAAa,YAAwB,iBAAkC;AAAA,QACxE;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAU;AAAA,YACV,KAAK;AAAA,YACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,YACjC,WAAW;AAAA,YACV,OAAG,4BAAc,IAA0C;AAAA,YAC5D;AAAA,YACA,eAAa,6CAAmB;AAAA,YAC/B,GAAG;AAAA,YACJ;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/dist/esm/DSDialog.js CHANGED
@@ -7,10 +7,7 @@ import { DSDialogPortal } from "./parts/DSDialogPortal";
7
7
  import { DSDialogContext } from "./DSDialogCTX";
8
8
  const DSDialog = (props) => {
9
9
  const ctx = useDialog(props);
10
- return /* @__PURE__ */ jsx(DSDialogContext.Provider, {
11
- value: ctx,
12
- children: /* @__PURE__ */ jsx(DSDialogPortal, {})
13
- });
10
+ return /* @__PURE__ */ jsx(DSDialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(DSDialogPortal, {}) });
14
11
  };
15
12
  DSDialog.displayName = "DSDialog";
16
13
  const DSDialogWithSchema = describe(DSDialog);
package/dist/esm/DSDialog.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSDialog.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { propTypes } from './propTypes';\nimport { useDialog } from './config/useDialog';\nimport { DSDialogPortal } from './parts/DSDialogPortal';\nimport { DSDialogContext } from './DSDialogCTX';\nimport type { DSDialogT } from './propTypes';\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"],
5
- "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;AAAA,IAAyB,OAAO;AAAA,IAC/B,8BAAC,kBAAe;AAAA,GAClB;AAEJ;AACA,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;",
5
+ "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;",
6
6
  "names": []
7
7
  }
package/dist/esm/config/useDialog.js CHANGED
@@ -7,7 +7,7 @@ import { defaultProps } from "../defaultProps";
7
7
  import { propTypes } from "../propTypes";
8
8
  import { getScrollbarWidth, getCurrentRightPadding } from "../utils";
9
9
  const useDialog = (props) => {
10
- useValidateTypescriptPropTypes(props, propTypes);
10
+ useValidateTypescriptPropTypes(props, propTypes, "DSDialog");
11
11
  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
12
12
  const { portalRef, isOpen } = propsWithDefault;
13
13
  const actualPortalRef = useRef(null);
package/dist/esm/config/useDialog.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDialog.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useMemo, useState, useCallback, useRef, useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../defaultProps';\nimport { propTypes } from '../propTypes';\nimport { getScrollbarWidth, getCurrentRightPadding } from '../utils';\nimport type { DSDialogT } from '../propTypes';\nimport type { DSDialogInternalsT } from '../sharedTypes';\n\nexport const useDialog = (props: DSDialogT.Props): DSDialogInternalsT.DSDialogContext => {\n useValidateTypescriptPropTypes<DSDialogT.Props>(props, propTypes);\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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,WAAW,SAAS,UAAU,aAAa,QAAQ,uBAAuB;AAC1F,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB,8BAA8B;AAInD,MAAM,YAAY,CAAC,UAA+D;AACvF,iCAAgD,OAAO,SAAS;AAChE,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;AAAA,EACvE,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;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect, useMemo, useState, useCallback, useRef, useLayoutEffect } from 'react';\nimport { debounce } from 'lodash';\nimport { uid } from 'uid';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-utilities';\nimport { defaultProps } from '../defaultProps';\nimport { propTypes } from '../propTypes';\nimport { getScrollbarWidth, getCurrentRightPadding } from '../utils';\nimport type { DSDialogT } from '../propTypes';\nimport type { DSDialogInternalsT } from '../sharedTypes';\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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,WAAW,SAAS,UAAU,aAAa,QAAQ,uBAAuB;AAC1F,SAAS,gBAAgB;AACzB,SAAS,WAAW;AACpB,SAAS,8BAA8B,sCAAsC;AAC7E,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,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;AAAA,EACvE,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;",
6
6
  "names": []
7
7
  }
package/dist/esm/parts/dialogContent/DSDialogContent.js CHANGED
@@ -25,32 +25,35 @@ const DSDialogContent = () => {
25
25
  },
26
26
  [containerRef, removeAutoFocus]
27
27
  );
28
- return /* @__PURE__ */ jsxs(StyledDialogBackground, {
29
- className,
30
- onClick: handleOutsideClick,
31
- "data-portalbg": true,
32
- "data-testid": DSDialogDatatestid.BACKGROUND,
33
- zIndex,
34
- children: [
35
- /* @__PURE__ */ jsx(PortalStyles, {
36
- portalInfo,
37
- portalClassName
38
- }),
39
- /* @__PURE__ */ jsx(StyledDialogContainer, {
40
- role: "dialog",
41
- "aria-modal": true,
42
- ref: refCallback,
43
- tabIndex: !removeAutoFocus ? 0 : void 0,
44
- onKeyDown: handleOnKeyDown,
45
- ...getSpaceProps(rest),
46
- centered,
47
- "data-testid": DSDialogDatatestid.CONTAINER,
48
- ...restOfGlobalAttributes,
49
- size,
50
- children
51
- })
52
- ]
53
- });
28
+ return /* @__PURE__ */ jsxs(
29
+ StyledDialogBackground,
30
+ {
31
+ className,
32
+ onClick: handleOutsideClick,
33
+ "data-portalbg": true,
34
+ "data-testid": DSDialogDatatestid.BACKGROUND,
35
+ zIndex,
36
+ children: [
37
+ /* @__PURE__ */ jsx(PortalStyles, { portalInfo, portalClassName }),
38
+ /* @__PURE__ */ jsx(
39
+ StyledDialogContainer,
40
+ {
41
+ role: "dialog",
42
+ "aria-modal": true,
43
+ ref: refCallback,
44
+ tabIndex: !removeAutoFocus ? 0 : void 0,
45
+ onKeyDown: handleOnKeyDown,
46
+ ...getSpaceProps(rest),
47
+ centered,
48
+ "data-testid": DSDialogDatatestid.CONTAINER,
49
+ ...restOfGlobalAttributes,
50
+ size,
51
+ children
52
+ }
53
+ )
54
+ ]
55
+ }
56
+ );
54
57
  };
55
58
  export {
56
59
  DSDialogContent
package/dist/esm/parts/dialogContent/DSDialogContent.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/dialogContent/DSDialogContent.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { useGetGlobalAttributes } from '@elliemae/ds-utilities';\nimport { PortalStyles, StyledDialogBackground, StyledDialogContainer } from '../../styles';\nimport { getSpaceProps } from '../../utils';\nimport { DSDialogDatatestid } from '../../DSDialogDatatestid';\nimport { DSDialogContext } from '../../DSDialogCTX';\nimport { useDialogContent } from './useDialogContent';\n\nexport const DSDialogContent = () => {\n const { handleOutsideClick, handleOnKeyDown } = useDialogContent();\n const { props, containerRef, portalInfo, portalClassName } = useContext(DSDialogContext);\n\n const { removeAutoFocus, zIndex, centered, size, children, ...rest } = props;\n\n const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(props, {\n onClick: handleOutsideClick,\n onKeyDown: handleOnKeyDown,\n });\n\n const refCallback = useCallback(\n (_ref: HTMLDivElement | null) => {\n if (_ref) {\n containerRef.current = _ref;\n if (!removeAutoFocus) _ref.focus();\n }\n },\n [containerRef, removeAutoFocus],\n );\n\n return (\n <StyledDialogBackground\n className={className}\n onClick={handleOutsideClick}\n data-portalbg\n data-testid={DSDialogDatatestid.BACKGROUND}\n zIndex={zIndex}\n >\n <PortalStyles portalInfo={portalInfo} portalClassName={portalClassName} />\n <StyledDialogContainer\n role=\"dialog\"\n aria-modal\n ref={refCallback}\n tabIndex={!removeAutoFocus ? 0 : undefined}\n onKeyDown={handleOnKeyDown}\n {...getSpaceProps(rest as unknown as Record<string, unknown>)}\n centered={centered}\n data-testid={DSDialogDatatestid.CONTAINER}\n {...restOfGlobalAttributes}\n size={size}\n >\n {children}\n </StyledDialogContainer>\n </StyledDialogBackground>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;AC8BnB,SAOE,KAPF;AA9BJ,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,8BAA8B;AACvC,SAAS,cAAc,wBAAwB,6BAA6B;AAC5E,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAE1B,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,oBAAoB,gBAAgB,IAAI,iBAAiB;AACjE,QAAM,EAAE,OAAO,cAAc,YAAY,gBAAgB,IAAI,WAAW,eAAe;AAEvF,QAAM,EAAE,iBAAiB,QAAQ,UAAU,MAAM,aAAa,KAAK,IAAI;AAEvE,QAAM,EAAE,cAAc,uBAAuB,IAAI,uBAAuB,OAAO;AAAA,IAC7E,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC;AAED,QAAM,cAAc;AAAA,IAClB,CAAC,SAAgC;AAC/B,UAAI,MAAM;AACR,qBAAa,UAAU;AACvB,YAAI,CAAC;AAAiB,eAAK,MAAM;AAAA,MACnC;AAAA,IACF;AAAA,IACA,CAAC,cAAc,eAAe;AAAA,EAChC;AAEA,SACE,qBAAC;AAAA,IACC;AAAA,IACA,SAAS;AAAA,IACT,iBAAa;AAAA,IACb,eAAa,mBAAmB;AAAA,IAChC;AAAA,IAEA;AAAA,0BAAC;AAAA,QAAa;AAAA,QAAwB;AAAA,OAAkC;AAAA,MACxE,oBAAC;AAAA,QACC,MAAK;AAAA,QACL,cAAU;AAAA,QACV,KAAK;AAAA,QACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,QACjC,WAAW;AAAA,QACV,GAAG,cAAc,IAA0C;AAAA,QAC5D;AAAA,QACA,eAAa,mBAAmB;AAAA,QAC/B,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,OACH;AAAA;AAAA,GACF;AAEJ;",
5
+ "mappings": "AAAA,YAAY,WAAW;AC8BnB,SAOE,KAPF;AA9BJ,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,8BAA8B;AACvC,SAAS,cAAc,wBAAwB,6BAA6B;AAC5E,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAE1B,MAAM,kBAAkB,MAAM;AACnC,QAAM,EAAE,oBAAoB,gBAAgB,IAAI,iBAAiB;AACjE,QAAM,EAAE,OAAO,cAAc,YAAY,gBAAgB,IAAI,WAAW,eAAe;AAEvF,QAAM,EAAE,iBAAiB,QAAQ,UAAU,MAAM,aAAa,KAAK,IAAI;AAEvE,QAAM,EAAE,cAAc,uBAAuB,IAAI,uBAAuB,OAAO;AAAA,IAC7E,SAAS;AAAA,IACT,WAAW;AAAA,EACb,CAAC;AAED,QAAM,cAAc;AAAA,IAClB,CAAC,SAAgC;AAC/B,UAAI,MAAM;AACR,qBAAa,UAAU;AACvB,YAAI,CAAC;AAAiB,eAAK,MAAM;AAAA,MACnC;AAAA,IACF;AAAA,IACA,CAAC,cAAc,eAAe;AAAA,EAChC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACT,iBAAa;AAAA,MACb,eAAa,mBAAmB;AAAA,MAChC;AAAA,MAEA;AAAA,4BAAC,gBAAa,YAAwB,iBAAkC;AAAA,QACxE;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAU;AAAA,YACV,KAAK;AAAA,YACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,YACjC,WAAW;AAAA,YACV,GAAG,cAAc,IAA0C;AAAA,YAC5D;AAAA,YACA,eAAa,mBAAmB;AAAA,YAC/B,GAAG;AAAA,YACJ;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-dialog",
3
- "version": "3.12.0-rc.2",
3
+ "version": "3.12.0-rc.3",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Dialog",
6
6
  "files": [
@@ -67,10 +67,10 @@
67
67
  "indent": 4
68
68
  },
69
69
  "dependencies": {
70
- "@elliemae/ds-button": "3.12.0-rc.2",
71
- "@elliemae/ds-icons": "3.12.0-rc.2",
72
- "@elliemae/ds-system": "3.12.0-rc.2",
73
- "@elliemae/ds-utilities": "3.12.0-rc.2",
70
+ "@elliemae/ds-button": "3.12.0-rc.3",
71
+ "@elliemae/ds-icons": "3.12.0-rc.3",
72
+ "@elliemae/ds-system": "3.12.0-rc.3",
73
+ "@elliemae/ds-utilities": "3.12.0-rc.3",
74
74
  "lodash": "~4.17.21",
75
75
  "uid": "~2.0.0"
76
76
  },