@elliemae/ds-dialog 3.0.0-alpha.2 → 3.0.0-next.10
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.
- package/dist/cjs/DSDialog.js +41 -14
- package/dist/cjs/DSDialog.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +1 -1
- package/dist/cjs/styles.js +2 -2
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/DSDialog.js +42 -15
- package/dist/esm/DSDialog.js.map +2 -2
- package/dist/esm/styles.js +2 -2
- package/dist/esm/styles.js.map +2 -2
- package/package.json +4 -4
package/dist/cjs/DSDialog.js
CHANGED
|
@@ -62,6 +62,7 @@ __export(DSDialog_exports, {
|
|
|
62
62
|
var React = __toESM(require("react"));
|
|
63
63
|
var import_react_dom = __toESM(require("react-dom"));
|
|
64
64
|
var import_react = __toESM(require("react"));
|
|
65
|
+
var import_lodash = require("lodash");
|
|
65
66
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
66
67
|
var import_styles = require("./styles");
|
|
67
68
|
var import_propTypes = require("./propTypes");
|
|
@@ -70,10 +71,23 @@ var import_utils = require("./utils");
|
|
|
70
71
|
var import_DSDialogDatatestid = require("./DSDialogDatatestid");
|
|
71
72
|
const DSDialog = (props) => {
|
|
72
73
|
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_defaultProps.defaultProps);
|
|
73
|
-
const [bodyInfo, setBodyInfo] = (0, import_react.useState)({
|
|
74
|
+
const [bodyInfo, setBodyInfo] = (0, import_react.useState)({
|
|
75
|
+
overflow: false,
|
|
76
|
+
paddingRight: "0px",
|
|
77
|
+
scrollbarWidth: "0px"
|
|
78
|
+
});
|
|
74
79
|
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefault, import_propTypes.propTypes);
|
|
75
80
|
const _a = propsWithDefault, { children, isOpen, onClickOutside, onClose, centered, size, removeAutoFocus, zIndex } = _a, rest = __objRest(_a, ["children", "isOpen", "onClickOutside", "onClose", "centered", "size", "removeAutoFocus", "zIndex"]);
|
|
76
81
|
const containerRef = (0, import_react.useRef)(null);
|
|
82
|
+
const focusContainer = (0, import_react.useCallback)(() => {
|
|
83
|
+
const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);
|
|
84
|
+
if (!isContainerOrChildFocused)
|
|
85
|
+
containerRef.current?.focus?.();
|
|
86
|
+
}, []);
|
|
87
|
+
(0, import_react.useEffect)(() => {
|
|
88
|
+
document.addEventListener("focusin", focusContainer);
|
|
89
|
+
return () => document.removeEventListener("focusin", focusContainer);
|
|
90
|
+
}, [focusContainer]);
|
|
77
91
|
const handleOutsideClick = (0, import_react.useCallback)((e) => {
|
|
78
92
|
if (e.target.dataset.portalbg)
|
|
79
93
|
onClickOutside();
|
|
@@ -86,16 +100,29 @@ const DSDialog = (props) => {
|
|
|
86
100
|
onClick: handleOutsideClick,
|
|
87
101
|
onKeyDown: handleOnKeyDown
|
|
88
102
|
}), { className } = _b, restOfGlobalAttributes = __objRest(_b, ["className"]);
|
|
89
|
-
(0, import_react.
|
|
103
|
+
const calculateScrollbar = (0, import_react.useCallback)(() => {
|
|
90
104
|
const body = document.getElementsByTagName("body")[0];
|
|
91
|
-
const {
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
105
|
+
const { clientWidth } = body;
|
|
106
|
+
setBodyInfo((prev) => __spreadProps(__spreadValues({}, prev), { scrollbarWidth: `${window.innerWidth - clientWidth}px` }));
|
|
107
|
+
}, []);
|
|
108
|
+
const debouncedCalculateScrollbar = (0, import_react.useMemo)(() => (0, import_lodash.debounce)(calculateScrollbar, 300), [calculateScrollbar]);
|
|
109
|
+
(0, import_react.useEffect)(() => {
|
|
110
|
+
calculateScrollbar();
|
|
111
|
+
}, [calculateScrollbar]);
|
|
112
|
+
(0, import_react.useEffect)(() => {
|
|
113
|
+
window.addEventListener("resize", debouncedCalculateScrollbar);
|
|
114
|
+
return () => {
|
|
115
|
+
window.removeEventListener("resize", debouncedCalculateScrollbar);
|
|
116
|
+
};
|
|
117
|
+
}, [calculateScrollbar, debouncedCalculateScrollbar]);
|
|
118
|
+
(0, import_react.useEffect)(() => {
|
|
119
|
+
if (isOpen) {
|
|
120
|
+
const body = document.getElementsByTagName("body")[0];
|
|
121
|
+
const { clientHeight, scrollHeight } = body;
|
|
122
|
+
const paddingRight = window.getComputedStyle(body, null)?.getPropertyValue("padding-right");
|
|
123
|
+
setBodyInfo((prev) => __spreadProps(__spreadValues({}, prev), { overflow: scrollHeight > clientHeight, paddingRight }));
|
|
124
|
+
} else
|
|
125
|
+
setBodyInfo((prev) => __spreadProps(__spreadValues({}, prev), { overflow: false, paddingRight: "0px" }));
|
|
99
126
|
}, [isOpen]);
|
|
100
127
|
(0, import_react.useEffect)(() => {
|
|
101
128
|
if (isOpen && !removeAutoFocus)
|
|
@@ -110,20 +137,20 @@ const DSDialog = (props) => {
|
|
|
110
137
|
zIndex
|
|
111
138
|
}, /* @__PURE__ */ import_react.default.createElement(import_styles.FixedBody, {
|
|
112
139
|
bodyInfo
|
|
113
|
-
}), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledDialogContainer, __spreadValues(__spreadProps(__spreadValues({
|
|
140
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledDialogContainer, __spreadProps(__spreadValues(__spreadProps(__spreadValues({
|
|
114
141
|
role: "dialog",
|
|
115
142
|
"aria-modal": true,
|
|
116
143
|
ref: containerRef,
|
|
117
144
|
tabIndex: !removeAutoFocus ? 0 : void 0
|
|
118
145
|
}, (0, import_utils.getSpaceProps)(rest)), {
|
|
119
|
-
size,
|
|
120
146
|
centered,
|
|
121
147
|
"data-testid": import_DSDialogDatatestid.DSDialogDatatestid.CONTAINER
|
|
122
|
-
}), restOfGlobalAttributes),
|
|
148
|
+
}), restOfGlobalAttributes), {
|
|
149
|
+
size
|
|
150
|
+
}), children)), document.getElementsByTagName("body")[0]);
|
|
123
151
|
}
|
|
124
152
|
return null;
|
|
125
153
|
};
|
|
126
|
-
DSDialog.propTypes = import_propTypes.propTypes;
|
|
127
154
|
const DSDialogWithSchema = (0, import_ds_props_helpers.describe)(DSDialog);
|
|
128
155
|
DSDialogWithSchema.propTypes = import_propTypes.propTypes;
|
|
129
156
|
module.exports = __toCommonJS(DSDialog_exports);
|
package/dist/cjs/DSDialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSDialog.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import ReactDOM from 'react-dom';\nimport React, { useCallback, useRef, useEffect, useState } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { FixedBody, StyledDialogBackground, StyledDialogContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport { getSpaceProps } from './utils';\nimport { DSDialogDatatestid } from './DSDialogDatatestid';\nimport type { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\nconst DSDialog = (props: DSDialogT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSDialogT.Props>(props, defaultProps);\n const [bodyInfo, setBodyInfo] = useState<DSDialogInternalsT.BodyInfoT>({
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAqB;AACrB,
|
|
4
|
+
"sourcesContent": ["import ReactDOM from 'react-dom';\nimport React, { useCallback, useRef, useEffect, useState, WeakValidationMap, useMemo } from 'react';\nimport { debounce } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { FixedBody, StyledDialogBackground, StyledDialogContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport { getSpaceProps } from './utils';\nimport { DSDialogDatatestid } from './DSDialogDatatestid';\nimport type { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\nconst DSDialog = (props: DSDialogT.Props): JSX.Element | null => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSDialogT.Props>(props, defaultProps);\n const [bodyInfo, setBodyInfo] = useState<DSDialogInternalsT.BodyInfoT>({\n overflow: false,\n paddingRight: '0px',\n scrollbarWidth: '0px',\n });\n\n useValidateTypescriptPropTypes<DSDialogT.Props>(propsWithDefault, propTypes);\n\n const { children, isOpen, onClickOutside, onClose, centered, size, removeAutoFocus, zIndex, ...rest } =\n propsWithDefault;\n\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const focusContainer = useCallback(() => {\n const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);\n if (!isContainerOrChildFocused) containerRef.current?.focus?.();\n }, []);\n\n useEffect(() => {\n document.addEventListener('focusin', focusContainer);\n return () => document.removeEventListener('focusin', focusContainer);\n }, [focusContainer]);\n\n const handleOutsideClick = useCallback(\n (e: React.MouseEvent) => {\n if ((e.target as HTMLDivElement).dataset.portalbg) onClickOutside();\n },\n [onClickOutside],\n );\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') onClose();\n },\n [onClose],\n );\n\n const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(propsWithDefault, {\n onClick: handleOutsideClick,\n onKeyDown: handleOnKeyDown,\n });\n\n const calculateScrollbar = useCallback(() => {\n const body = document.getElementsByTagName('body')[0];\n const { clientWidth } = body;\n setBodyInfo((prev) => ({ ...prev, scrollbarWidth: `${window.innerWidth - clientWidth}px` }));\n }, []);\n\n const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);\n\n useEffect(() => {\n calculateScrollbar();\n }, [calculateScrollbar]);\n\n useEffect(() => {\n window.addEventListener('resize', debouncedCalculateScrollbar);\n return () => {\n window.removeEventListener('resize', debouncedCalculateScrollbar);\n };\n }, [calculateScrollbar, debouncedCalculateScrollbar]);\n\n useEffect(() => {\n if (isOpen) {\n const body = document.getElementsByTagName('body')[0];\n const { clientHeight, scrollHeight } = body;\n const paddingRight = window.getComputedStyle(body, null)?.getPropertyValue('padding-right');\n\n setBodyInfo((prev) => ({ ...prev, overflow: scrollHeight > clientHeight, paddingRight }));\n } else setBodyInfo((prev) => ({ ...prev, overflow: false, paddingRight: '0px' }));\n }, [isOpen]);\n\n useEffect(() => {\n if (isOpen && !removeAutoFocus) containerRef?.current?.focus();\n }, [isOpen, removeAutoFocus]);\n\n if (isOpen) {\n return ReactDOM.createPortal(\n <StyledDialogBackground\n className={className}\n onClick={handleOutsideClick}\n data-portalbg\n data-testid={DSDialogDatatestid.BACKGROUND}\n zIndex={zIndex}\n >\n <FixedBody bodyInfo={bodyInfo} />\n <StyledDialogContainer\n role=\"dialog\"\n aria-modal\n ref={containerRef}\n tabIndex={!removeAutoFocus ? 0 : undefined}\n {...getSpaceProps(rest as Record<string, string | number>)}\n centered={centered}\n data-testid={DSDialogDatatestid.CONTAINER}\n {...restOfGlobalAttributes}\n size={size}\n >\n {children}\n </StyledDialogContainer>\n </StyledDialogBackground>,\n document.getElementsByTagName('body')[0],\n );\n }\n\n return null;\n};\n\nconst DSDialogWithSchema = describe<DSDialogT.Props>(DSDialog);\nDSDialogWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSDialog, DSDialogWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/sharedTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export namespace DSDialogInternalsT {\n export interface BodyInfoT {\n overflow: boolean;\n
|
|
4
|
+
"sourcesContent": ["export namespace DSDialogInternalsT {\n export interface BodyInfoT {\n overflow: boolean;\n scrollbarWidth: string;\n paddingRight: string;\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -48,14 +48,14 @@ var import_utils = require("./utils");
|
|
|
48
48
|
const FixedBody = import_ds_system.createGlobalStyle`
|
|
49
49
|
body {
|
|
50
50
|
overflow: hidden;
|
|
51
|
-
|
|
52
|
-
${({ bodyInfo }) => bodyInfo.overflow ? `padding-right: calc( ${bodyInfo.padding} + 15px ) !important;` : ``}
|
|
51
|
+
${({ bodyInfo }) => bodyInfo.overflow ? `padding-right: calc( ${bodyInfo.paddingRight} + ${bodyInfo.scrollbarWidth} ) !important;` : ``}
|
|
53
52
|
}
|
|
54
53
|
`;
|
|
55
54
|
const StyledDialogBackground = import_styled_components.default.div`
|
|
56
55
|
position: fixed;
|
|
57
56
|
top: 0;
|
|
58
57
|
bottom: 0;
|
|
58
|
+
left: 0;
|
|
59
59
|
width: 100%;
|
|
60
60
|
height: 100%;
|
|
61
61
|
background: rgba(37, 41, 47, 50%);
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { createGlobalStyle } from '@elliemae/ds-system';\nimport { space, flexboxes, layout, sizing } from '@xstyled/styled-components';\nimport { allSizes } from './utils';\nimport { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface FixedBodyT {\n bodyInfo: DSDialogInternalsT.BodyInfoT;\n}\n\ninterface StyledDialogBackgroundT {\n zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n size: DSDialogT.Sizes;\n centered: boolean;\n}\n\nexport const FixedBody = createGlobalStyle<FixedBodyT>`\n body {\n overflow: hidden;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAkC;AAClC,gCAAiD;AACjD,mBAAyB;AAiBlB,MAAM,YAAY;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { createGlobalStyle } from '@elliemae/ds-system';\nimport { space, flexboxes, layout, sizing } from '@xstyled/styled-components';\nimport { allSizes } from './utils';\nimport { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface FixedBodyT {\n bodyInfo: DSDialogInternalsT.BodyInfoT;\n}\n\ninterface StyledDialogBackgroundT {\n zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n size: DSDialogT.Sizes;\n centered: boolean;\n}\n\nexport const FixedBody = createGlobalStyle<FixedBodyT>`\n body {\n overflow: hidden;\n ${({ bodyInfo }) =>\n bodyInfo.overflow\n ? `padding-right: calc( ${bodyInfo.paddingRight} + ${bodyInfo.scrollbarWidth} ) !important;`\n : ``}\n }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundT>`\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(37, 41, 47, 50%);\n overflow-y: auto;\n z-index: ${({ zIndex }) => zIndex};\n`;\n\nexport const StyledDialogContainer = styled.div<StyledDialogContainerT>`\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: ${({ centered }) => (centered ? 'auto' : '20vh auto auto auto')};\n width: ${({ size }) => allSizes[size]};\n min-width: 300px;\n box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};\n background: ${({ theme }) => theme.colors.neutral['000']};\n overflow-y: auto;\n ${space}\n &:focus {\n outline: none;\n }\n`;\n\nexport const DSDialogTitle = styled.h3`\n font-size: ${({ theme }) => theme.fontSizes.title[700]};\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 28px;\n margin: 0;\n`;\n\nexport const DSDialogAddon = styled.div``;\n\nexport const DSDialogHeader = styled.div`\n display: grid;\n align-items: center;\n grid-auto-flow: column;\n min-height: ${({ theme }) => theme.space.m};\n padding: 10px ${({ theme }) => theme.space.xs};\n & ${DSDialogTitle} + ${DSDialogAddon} {\n align-self: flex-start;\n justify-self: flex-end;\n }\n & ${DSDialogAddon}:only-child {\n justify-self: flex-end;\n }\n ${space}\n ${sizing}\n`;\n\nexport const DSDialogSeparator = styled.hr.attrs(() => ({ 'aria-hidden': true }))`\n margin: 0;\n border-top: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n`;\n\nexport const DSDialogBody = styled.div`\n padding: ${({ theme }) => theme.space.xs};\n overflow-y: auto;\n\n ${layout}\n ${space}\n ${flexboxes}\n ${sizing}\n`;\n\nexport const DSDialogPrimaryMessage = styled.h3`\n margin: 0;\n`;\n\nexport const DSDialogSecondaryMessage = styled.p`\n margin: 0;\n color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const DSDialogDefaultLayout = styled.div`\n display: grid;\n grid-auto-flow: row;\n justify-items: center;\n align-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n\n ${DSDialogSecondaryMessage} {\n text-align: center;\n }\n`;\n\nexport const DSDialogFooter = styled.div`\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n justify-content: flex-end;\n grid-gap: ${({ theme }) => theme.space.xxs};\n min-height: ${({ theme }) => theme.space.m};\n padding: 0 ${({ theme }) => theme.space.xs};\n ${space}\n ${flexboxes}\n ${sizing}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,+BAAmB;AACnB,uBAAkC;AAClC,gCAAiD;AACjD,mBAAyB;AAiBlB,MAAM,YAAY;AAAA;AAAA;AAAA,MAGnB,CAAC,EAAE,eACH,SAAS,WACL,wBAAwB,SAAS,kBAAkB,SAAS,iCAC5D;AAAA;AAAA;AAIH,MAAM,yBAAyB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,eAAgB,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,WAAW,sBAAS;AAAA;AAAA,8BAEJ,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,gBAClD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,IAEhD;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,gBAAgB,iCAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,iCAAO;AAE7B,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA,IAGF;AAAA,IACA;AAAA;AAGG,MAAM,oBAAoB,iCAAO,GAAG,MAAM,MAAO,GAAE,eAAe;AAAA;AAAA,0BAE/C,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,eAAe,iCAAO;AAAA,aACtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,IAGpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,yBAAyB,iCAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,iCAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,iCAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKvB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSDialog.js
CHANGED
|
@@ -31,7 +31,8 @@ var __objRest = (source, exclude) => {
|
|
|
31
31
|
};
|
|
32
32
|
import * as React from "react";
|
|
33
33
|
import ReactDOM from "react-dom";
|
|
34
|
-
import React2, { useCallback, useRef, useEffect, useState } from "react";
|
|
34
|
+
import React2, { useCallback, useRef, useEffect, useState, useMemo } from "react";
|
|
35
|
+
import { debounce } from "lodash";
|
|
35
36
|
import {
|
|
36
37
|
useMemoMergePropsWithDefault,
|
|
37
38
|
useGetGlobalAttributes,
|
|
@@ -45,10 +46,23 @@ import { getSpaceProps } from "./utils";
|
|
|
45
46
|
import { DSDialogDatatestid } from "./DSDialogDatatestid";
|
|
46
47
|
const DSDialog = (props) => {
|
|
47
48
|
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
|
|
48
|
-
const [bodyInfo, setBodyInfo] = useState({
|
|
49
|
+
const [bodyInfo, setBodyInfo] = useState({
|
|
50
|
+
overflow: false,
|
|
51
|
+
paddingRight: "0px",
|
|
52
|
+
scrollbarWidth: "0px"
|
|
53
|
+
});
|
|
49
54
|
useValidateTypescriptPropTypes(propsWithDefault, propTypes);
|
|
50
55
|
const _a = propsWithDefault, { children, isOpen, onClickOutside, onClose, centered, size, removeAutoFocus, zIndex } = _a, rest = __objRest(_a, ["children", "isOpen", "onClickOutside", "onClose", "centered", "size", "removeAutoFocus", "zIndex"]);
|
|
51
56
|
const containerRef = useRef(null);
|
|
57
|
+
const focusContainer = useCallback(() => {
|
|
58
|
+
const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);
|
|
59
|
+
if (!isContainerOrChildFocused)
|
|
60
|
+
containerRef.current?.focus?.();
|
|
61
|
+
}, []);
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
document.addEventListener("focusin", focusContainer);
|
|
64
|
+
return () => document.removeEventListener("focusin", focusContainer);
|
|
65
|
+
}, [focusContainer]);
|
|
52
66
|
const handleOutsideClick = useCallback((e) => {
|
|
53
67
|
if (e.target.dataset.portalbg)
|
|
54
68
|
onClickOutside();
|
|
@@ -61,16 +75,29 @@ const DSDialog = (props) => {
|
|
|
61
75
|
onClick: handleOutsideClick,
|
|
62
76
|
onKeyDown: handleOnKeyDown
|
|
63
77
|
}), { className } = _b, restOfGlobalAttributes = __objRest(_b, ["className"]);
|
|
64
|
-
|
|
78
|
+
const calculateScrollbar = useCallback(() => {
|
|
65
79
|
const body = document.getElementsByTagName("body")[0];
|
|
66
|
-
const {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
80
|
+
const { clientWidth } = body;
|
|
81
|
+
setBodyInfo((prev) => __spreadProps(__spreadValues({}, prev), { scrollbarWidth: `${window.innerWidth - clientWidth}px` }));
|
|
82
|
+
}, []);
|
|
83
|
+
const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);
|
|
84
|
+
useEffect(() => {
|
|
85
|
+
calculateScrollbar();
|
|
86
|
+
}, [calculateScrollbar]);
|
|
87
|
+
useEffect(() => {
|
|
88
|
+
window.addEventListener("resize", debouncedCalculateScrollbar);
|
|
89
|
+
return () => {
|
|
90
|
+
window.removeEventListener("resize", debouncedCalculateScrollbar);
|
|
91
|
+
};
|
|
92
|
+
}, [calculateScrollbar, debouncedCalculateScrollbar]);
|
|
93
|
+
useEffect(() => {
|
|
94
|
+
if (isOpen) {
|
|
95
|
+
const body = document.getElementsByTagName("body")[0];
|
|
96
|
+
const { clientHeight, scrollHeight } = body;
|
|
97
|
+
const paddingRight = window.getComputedStyle(body, null)?.getPropertyValue("padding-right");
|
|
98
|
+
setBodyInfo((prev) => __spreadProps(__spreadValues({}, prev), { overflow: scrollHeight > clientHeight, paddingRight }));
|
|
99
|
+
} else
|
|
100
|
+
setBodyInfo((prev) => __spreadProps(__spreadValues({}, prev), { overflow: false, paddingRight: "0px" }));
|
|
74
101
|
}, [isOpen]);
|
|
75
102
|
useEffect(() => {
|
|
76
103
|
if (isOpen && !removeAutoFocus)
|
|
@@ -85,20 +112,20 @@ const DSDialog = (props) => {
|
|
|
85
112
|
zIndex
|
|
86
113
|
}, /* @__PURE__ */ React2.createElement(FixedBody, {
|
|
87
114
|
bodyInfo
|
|
88
|
-
}), /* @__PURE__ */ React2.createElement(StyledDialogContainer, __spreadValues(__spreadProps(__spreadValues({
|
|
115
|
+
}), /* @__PURE__ */ React2.createElement(StyledDialogContainer, __spreadProps(__spreadValues(__spreadProps(__spreadValues({
|
|
89
116
|
role: "dialog",
|
|
90
117
|
"aria-modal": true,
|
|
91
118
|
ref: containerRef,
|
|
92
119
|
tabIndex: !removeAutoFocus ? 0 : void 0
|
|
93
120
|
}, getSpaceProps(rest)), {
|
|
94
|
-
size,
|
|
95
121
|
centered,
|
|
96
122
|
"data-testid": DSDialogDatatestid.CONTAINER
|
|
97
|
-
}), restOfGlobalAttributes),
|
|
123
|
+
}), restOfGlobalAttributes), {
|
|
124
|
+
size
|
|
125
|
+
}), children)), document.getElementsByTagName("body")[0]);
|
|
98
126
|
}
|
|
99
127
|
return null;
|
|
100
128
|
};
|
|
101
|
-
DSDialog.propTypes = propTypes;
|
|
102
129
|
const DSDialogWithSchema = describe(DSDialog);
|
|
103
130
|
DSDialogWithSchema.propTypes = propTypes;
|
|
104
131
|
export {
|
package/dist/esm/DSDialog.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSDialog.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import ReactDOM from 'react-dom';\nimport React, { useCallback, useRef, useEffect, useState } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { FixedBody, StyledDialogBackground, StyledDialogContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport { getSpaceProps } from './utils';\nimport { DSDialogDatatestid } from './DSDialogDatatestid';\nimport type { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\nconst DSDialog = (props: DSDialogT.Props) => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSDialogT.Props>(props, defaultProps);\n const [bodyInfo, setBodyInfo] = useState<DSDialogInternalsT.BodyInfoT>({
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AAIA,MAAM,WAAW,CAAC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import ReactDOM from 'react-dom';\nimport React, { useCallback, useRef, useEffect, useState, WeakValidationMap, useMemo } from 'react';\nimport { debounce } from 'lodash';\nimport {\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n describe,\n} from '@elliemae/ds-props-helpers';\nimport { FixedBody, StyledDialogBackground, StyledDialogContainer } from './styles';\nimport { propTypes } from './propTypes';\nimport { defaultProps } from './defaultProps';\nimport { getSpaceProps } from './utils';\nimport { DSDialogDatatestid } from './DSDialogDatatestid';\nimport type { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\nconst DSDialog = (props: DSDialogT.Props): JSX.Element | null => {\n const propsWithDefault = useMemoMergePropsWithDefault<DSDialogT.Props>(props, defaultProps);\n const [bodyInfo, setBodyInfo] = useState<DSDialogInternalsT.BodyInfoT>({\n overflow: false,\n paddingRight: '0px',\n scrollbarWidth: '0px',\n });\n\n useValidateTypescriptPropTypes<DSDialogT.Props>(propsWithDefault, propTypes);\n\n const { children, isOpen, onClickOutside, onClose, centered, size, removeAutoFocus, zIndex, ...rest } =\n propsWithDefault;\n\n const containerRef = useRef<HTMLDivElement | null>(null);\n\n const focusContainer = useCallback(() => {\n const isContainerOrChildFocused = containerRef.current?.contains(document.activeElement);\n if (!isContainerOrChildFocused) containerRef.current?.focus?.();\n }, []);\n\n useEffect(() => {\n document.addEventListener('focusin', focusContainer);\n return () => document.removeEventListener('focusin', focusContainer);\n }, [focusContainer]);\n\n const handleOutsideClick = useCallback(\n (e: React.MouseEvent) => {\n if ((e.target as HTMLDivElement).dataset.portalbg) onClickOutside();\n },\n [onClickOutside],\n );\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') onClose();\n },\n [onClose],\n );\n\n const { className, ...restOfGlobalAttributes } = useGetGlobalAttributes(propsWithDefault, {\n onClick: handleOutsideClick,\n onKeyDown: handleOnKeyDown,\n });\n\n const calculateScrollbar = useCallback(() => {\n const body = document.getElementsByTagName('body')[0];\n const { clientWidth } = body;\n setBodyInfo((prev) => ({ ...prev, scrollbarWidth: `${window.innerWidth - clientWidth}px` }));\n }, []);\n\n const debouncedCalculateScrollbar = useMemo(() => debounce(calculateScrollbar, 300), [calculateScrollbar]);\n\n useEffect(() => {\n calculateScrollbar();\n }, [calculateScrollbar]);\n\n useEffect(() => {\n window.addEventListener('resize', debouncedCalculateScrollbar);\n return () => {\n window.removeEventListener('resize', debouncedCalculateScrollbar);\n };\n }, [calculateScrollbar, debouncedCalculateScrollbar]);\n\n useEffect(() => {\n if (isOpen) {\n const body = document.getElementsByTagName('body')[0];\n const { clientHeight, scrollHeight } = body;\n const paddingRight = window.getComputedStyle(body, null)?.getPropertyValue('padding-right');\n\n setBodyInfo((prev) => ({ ...prev, overflow: scrollHeight > clientHeight, paddingRight }));\n } else setBodyInfo((prev) => ({ ...prev, overflow: false, paddingRight: '0px' }));\n }, [isOpen]);\n\n useEffect(() => {\n if (isOpen && !removeAutoFocus) containerRef?.current?.focus();\n }, [isOpen, removeAutoFocus]);\n\n if (isOpen) {\n return ReactDOM.createPortal(\n <StyledDialogBackground\n className={className}\n onClick={handleOutsideClick}\n data-portalbg\n data-testid={DSDialogDatatestid.BACKGROUND}\n zIndex={zIndex}\n >\n <FixedBody bodyInfo={bodyInfo} />\n <StyledDialogContainer\n role=\"dialog\"\n aria-modal\n ref={containerRef}\n tabIndex={!removeAutoFocus ? 0 : undefined}\n {...getSpaceProps(rest as Record<string, string | number>)}\n centered={centered}\n data-testid={DSDialogDatatestid.CONTAINER}\n {...restOfGlobalAttributes}\n size={size}\n >\n {children}\n </StyledDialogContainer>\n </StyledDialogBackground>,\n document.getElementsByTagName('body')[0],\n );\n }\n\n return null;\n};\n\nconst DSDialogWithSchema = describe<DSDialogT.Props>(DSDialog);\nDSDialogWithSchema.propTypes = propTypes as WeakValidationMap<unknown>;\n\nexport { DSDialog, DSDialogWithSchema };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACA;AACA;AACA;AACA;AAIA,MAAM,WAAW,CAAC,UAA+C;AAC/D,QAAM,mBAAmB,6BAA8C,OAAO;AAC9E,QAAM,CAAC,UAAU,eAAe,SAAuC;AAAA,IACrE,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA;AAGlB,iCAAgD,kBAAkB;AAElE,QACE,uBADM,YAAU,QAAQ,gBAAgB,SAAS,UAAU,MAAM,iBAAiB,WAClF,IAD6F,iBAC7F,IAD6F,CAAvF,YAAU,UAAQ,kBAAgB,WAAS,YAAU,QAAM,mBAAiB;AAGpF,QAAM,eAAe,OAA8B;AAEnD,QAAM,iBAAiB,YAAY,MAAM;AACvC,UAAM,4BAA4B,aAAa,SAAS,SAAS,SAAS;AAC1E,QAAI,CAAC;AAA2B,mBAAa,SAAS;AAAA,KACrD;AAEH,YAAU,MAAM;AACd,aAAS,iBAAiB,WAAW;AACrC,WAAO,MAAM,SAAS,oBAAoB,WAAW;AAAA,KACpD,CAAC;AAEJ,QAAM,qBAAqB,YACzB,CAAC,MAAwB;AACvB,QAAK,EAAE,OAA0B,QAAQ;AAAU;AAAA,KAErD,CAAC;AAGH,QAAM,kBAAkB,YACtB,CAAC,MAA2B;AAC1B,QAAI,EAAE,QAAQ;AAAU;AAAA,KAE1B,CAAC;AAGH,QAAiD,4BAAuB,kBAAkB;AAAA,IACxF,SAAS;AAAA,IACT,WAAW;AAAA,MAFL,gBAAyC,IAA3B,mCAA2B,IAA3B,CAAd;AAKR,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,OAAO,SAAS,qBAAqB,QAAQ;AACnD,UAAM,EAAE,gBAAgB;AACxB,gBAAY,CAAC,SAAU,iCAAK,OAAL,EAAW,gBAAgB,GAAG,OAAO,aAAa;AAAA,KACxE;AAEH,QAAM,8BAA8B,QAAQ,MAAM,SAAS,oBAAoB,MAAM,CAAC;AAEtF,YAAU,MAAM;AACd;AAAA,KACC,CAAC;AAEJ,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU;AAClC,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU;AAAA;AAAA,KAEtC,CAAC,oBAAoB;AAExB,YAAU,MAAM;AACd,QAAI,QAAQ;AACV,YAAM,OAAO,SAAS,qBAAqB,QAAQ;AACnD,YAAM,EAAE,cAAc,iBAAiB;AACvC,YAAM,eAAe,OAAO,iBAAiB,MAAM,OAAO,iBAAiB;AAE3E,kBAAY,CAAC,SAAU,iCAAK,OAAL,EAAW,UAAU,eAAe,cAAc;AAAA;AACpE,kBAAY,CAAC,SAAU,iCAAK,OAAL,EAAW,UAAU,OAAO,cAAc;AAAA,KACvE,CAAC;AAEJ,YAAU,MAAM;AACd,QAAI,UAAU,CAAC;AAAiB,oBAAc,SAAS;AAAA,KACtD,CAAC,QAAQ;AAEZ,MAAI,QAAQ;AACV,WAAO,SAAS,aACd,qCAAC,wBAAD;AAAA,MACE;AAAA,MACA,SAAS;AAAA,MACT,iBAAa;AAAA,MACb,eAAa,mBAAmB;AAAA,MAChC;AAAA,OAEA,qCAAC,WAAD;AAAA,MAAW;AAAA,QACX,qCAAC,uBAAD;AAAA,MACE,MAAK;AAAA,MACL,cAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU,CAAC,kBAAkB,IAAI;AAAA,OAC7B,cAAc,QALpB;AAAA,MAME;AAAA,MACA,eAAa,mBAAmB;AAAA,QAC5B,yBARN;AAAA,MASE;AAAA,QAEC,YAGL,SAAS,qBAAqB,QAAQ;AAAA;AAI1C,SAAO;AAAA;AAGT,MAAM,qBAAqB,SAA0B;AACrD,mBAAmB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -6,14 +6,14 @@ import { allSizes } from "./utils";
|
|
|
6
6
|
const FixedBody = createGlobalStyle`
|
|
7
7
|
body {
|
|
8
8
|
overflow: hidden;
|
|
9
|
-
|
|
10
|
-
${({ bodyInfo }) => bodyInfo.overflow ? `padding-right: calc( ${bodyInfo.padding} + 15px ) !important;` : ``}
|
|
9
|
+
${({ bodyInfo }) => bodyInfo.overflow ? `padding-right: calc( ${bodyInfo.paddingRight} + ${bodyInfo.scrollbarWidth} ) !important;` : ``}
|
|
11
10
|
}
|
|
12
11
|
`;
|
|
13
12
|
const StyledDialogBackground = styled.div`
|
|
14
13
|
position: fixed;
|
|
15
14
|
top: 0;
|
|
16
15
|
bottom: 0;
|
|
16
|
+
left: 0;
|
|
17
17
|
width: 100%;
|
|
18
18
|
height: 100%;
|
|
19
19
|
background: rgba(37, 41, 47, 50%);
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { createGlobalStyle } from '@elliemae/ds-system';\nimport { space, flexboxes, layout, sizing } from '@xstyled/styled-components';\nimport { allSizes } from './utils';\nimport { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface FixedBodyT {\n bodyInfo: DSDialogInternalsT.BodyInfoT;\n}\n\ninterface StyledDialogBackgroundT {\n zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n size: DSDialogT.Sizes;\n centered: boolean;\n}\n\nexport const FixedBody = createGlobalStyle<FixedBodyT>`\n body {\n overflow: hidden;\n
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAiBO,MAAM,YAAY;AAAA;AAAA;AAAA
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { createGlobalStyle } from '@elliemae/ds-system';\nimport { space, flexboxes, layout, sizing } from '@xstyled/styled-components';\nimport { allSizes } from './utils';\nimport { DSDialogT } from './propTypes';\nimport type { DSDialogInternalsT } from './sharedTypes';\n\ninterface FixedBodyT {\n bodyInfo: DSDialogInternalsT.BodyInfoT;\n}\n\ninterface StyledDialogBackgroundT {\n zIndex: number;\n}\n\ninterface StyledDialogContainerT {\n size: DSDialogT.Sizes;\n centered: boolean;\n}\n\nexport const FixedBody = createGlobalStyle<FixedBodyT>`\n body {\n overflow: hidden;\n ${({ bodyInfo }) =>\n bodyInfo.overflow\n ? `padding-right: calc( ${bodyInfo.paddingRight} + ${bodyInfo.scrollbarWidth} ) !important;`\n : ``}\n }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundT>`\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(37, 41, 47, 50%);\n overflow-y: auto;\n z-index: ${({ zIndex }) => zIndex};\n`;\n\nexport const StyledDialogContainer = styled.div<StyledDialogContainerT>`\n height: fit-content;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n margin: ${({ centered }) => (centered ? 'auto' : '20vh auto auto auto')};\n width: ${({ size }) => allSizes[size]};\n min-width: 300px;\n box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};\n background: ${({ theme }) => theme.colors.neutral['000']};\n overflow-y: auto;\n ${space}\n &:focus {\n outline: none;\n }\n`;\n\nexport const DSDialogTitle = styled.h3`\n font-size: ${({ theme }) => theme.fontSizes.title[700]};\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 28px;\n margin: 0;\n`;\n\nexport const DSDialogAddon = styled.div``;\n\nexport const DSDialogHeader = styled.div`\n display: grid;\n align-items: center;\n grid-auto-flow: column;\n min-height: ${({ theme }) => theme.space.m};\n padding: 10px ${({ theme }) => theme.space.xs};\n & ${DSDialogTitle} + ${DSDialogAddon} {\n align-self: flex-start;\n justify-self: flex-end;\n }\n & ${DSDialogAddon}:only-child {\n justify-self: flex-end;\n }\n ${space}\n ${sizing}\n`;\n\nexport const DSDialogSeparator = styled.hr.attrs(() => ({ 'aria-hidden': true }))`\n margin: 0;\n border-top: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n`;\n\nexport const DSDialogBody = styled.div`\n padding: ${({ theme }) => theme.space.xs};\n overflow-y: auto;\n\n ${layout}\n ${space}\n ${flexboxes}\n ${sizing}\n`;\n\nexport const DSDialogPrimaryMessage = styled.h3`\n margin: 0;\n`;\n\nexport const DSDialogSecondaryMessage = styled.p`\n margin: 0;\n color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const DSDialogDefaultLayout = styled.div`\n display: grid;\n grid-auto-flow: row;\n justify-items: center;\n align-items: center;\n grid-gap: ${({ theme }) => theme.space.xxs};\n\n ${DSDialogSecondaryMessage} {\n text-align: center;\n }\n`;\n\nexport const DSDialogFooter = styled.div`\n display: grid;\n grid-auto-flow: column;\n align-items: center;\n justify-content: flex-end;\n grid-gap: ${({ theme }) => theme.space.xxs};\n min-height: ${({ theme }) => theme.space.m};\n padding: 0 ${({ theme }) => theme.space.xs};\n ${space}\n ${flexboxes}\n ${sizing}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AAiBO,MAAM,YAAY;AAAA;AAAA;AAAA,MAGnB,CAAC,EAAE,eACH,SAAS,WACL,wBAAwB,SAAS,kBAAkB,SAAS,iCAC5D;AAAA;AAAA;AAIH,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAShC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,eAAgB,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,WAAW,SAAS;AAAA;AAAA,8BAEJ,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,gBAClD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,IAEhD;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7C,MAAM,gBAAgB,OAAO;AAE7B,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA,IAGF;AAAA,IACA;AAAA;AAGG,MAAM,oBAAoB,OAAO,GAAG,MAAM,MAAO,GAAE,eAAe;AAAA;AAAA,0BAE/C,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,eAAe,OAAO;AAAA,aACtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,IAGpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,OAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKvB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-dialog",
|
|
3
|
-
"version": "3.0.0-
|
|
3
|
+
"version": "3.0.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Dialog",
|
|
6
6
|
"files": [
|
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
"indent": 4
|
|
68
68
|
},
|
|
69
69
|
"dependencies": {
|
|
70
|
-
"@elliemae/ds-button": "3.0.0-
|
|
71
|
-
"@elliemae/ds-props-helpers": "3.0.0-
|
|
72
|
-
"@elliemae/ds-system": "3.0.0-
|
|
70
|
+
"@elliemae/ds-button": "3.0.0-next.10",
|
|
71
|
+
"@elliemae/ds-props-helpers": "3.0.0-next.10",
|
|
72
|
+
"@elliemae/ds-system": "3.0.0-next.10",
|
|
73
73
|
"@xstyled/styled-components": "~3.1.2",
|
|
74
74
|
"react-desc": "~4.1.3"
|
|
75
75
|
},
|