@elliemae/ds-dialog 3.0.0-alpha.3 → 3.0.0-next.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.
- package/dist/cjs/DSDialog.js +32 -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 +33 -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,7 +71,11 @@ 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);
|
|
@@ -95,16 +100,29 @@ const DSDialog = (props) => {
|
|
|
95
100
|
onClick: handleOutsideClick,
|
|
96
101
|
onKeyDown: handleOnKeyDown
|
|
97
102
|
}), { className } = _b, restOfGlobalAttributes = __objRest(_b, ["className"]);
|
|
98
|
-
(0, import_react.
|
|
103
|
+
const calculateScrollbar = (0, import_react.useCallback)(() => {
|
|
99
104
|
const body = document.getElementsByTagName("body")[0];
|
|
100
|
-
const {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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" }));
|
|
108
126
|
}, [isOpen]);
|
|
109
127
|
(0, import_react.useEffect)(() => {
|
|
110
128
|
if (isOpen && !removeAutoFocus)
|
|
@@ -119,20 +137,20 @@ const DSDialog = (props) => {
|
|
|
119
137
|
zIndex
|
|
120
138
|
}, /* @__PURE__ */ import_react.default.createElement(import_styles.FixedBody, {
|
|
121
139
|
bodyInfo
|
|
122
|
-
}), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledDialogContainer, __spreadValues(__spreadProps(__spreadValues({
|
|
140
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledDialogContainer, __spreadProps(__spreadValues(__spreadProps(__spreadValues({
|
|
123
141
|
role: "dialog",
|
|
124
142
|
"aria-modal": true,
|
|
125
143
|
ref: containerRef,
|
|
126
144
|
tabIndex: !removeAutoFocus ? 0 : void 0
|
|
127
145
|
}, (0, import_utils.getSpaceProps)(rest)), {
|
|
128
|
-
size,
|
|
129
146
|
centered,
|
|
130
147
|
"data-testid": import_DSDialogDatatestid.DSDialogDatatestid.CONTAINER
|
|
131
|
-
}), restOfGlobalAttributes),
|
|
148
|
+
}), restOfGlobalAttributes), {
|
|
149
|
+
size
|
|
150
|
+
}), children)), document.getElementsByTagName("body")[0]);
|
|
132
151
|
}
|
|
133
152
|
return null;
|
|
134
153
|
};
|
|
135
|
-
DSDialog.propTypes = import_propTypes.propTypes;
|
|
136
154
|
const DSDialogWithSchema = (0, import_ds_props_helpers.describe)(DSDialog);
|
|
137
155
|
DSDialogWithSchema.propTypes = import_propTypes.propTypes;
|
|
138
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,7 +46,11 @@ 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);
|
|
@@ -70,16 +75,29 @@ const DSDialog = (props) => {
|
|
|
70
75
|
onClick: handleOutsideClick,
|
|
71
76
|
onKeyDown: handleOnKeyDown
|
|
72
77
|
}), { className } = _b, restOfGlobalAttributes = __objRest(_b, ["className"]);
|
|
73
|
-
|
|
78
|
+
const calculateScrollbar = useCallback(() => {
|
|
74
79
|
const body = document.getElementsByTagName("body")[0];
|
|
75
|
-
const {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
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" }));
|
|
83
101
|
}, [isOpen]);
|
|
84
102
|
useEffect(() => {
|
|
85
103
|
if (isOpen && !removeAutoFocus)
|
|
@@ -94,20 +112,20 @@ const DSDialog = (props) => {
|
|
|
94
112
|
zIndex
|
|
95
113
|
}, /* @__PURE__ */ React2.createElement(FixedBody, {
|
|
96
114
|
bodyInfo
|
|
97
|
-
}), /* @__PURE__ */ React2.createElement(StyledDialogContainer, __spreadValues(__spreadProps(__spreadValues({
|
|
115
|
+
}), /* @__PURE__ */ React2.createElement(StyledDialogContainer, __spreadProps(__spreadValues(__spreadProps(__spreadValues({
|
|
98
116
|
role: "dialog",
|
|
99
117
|
"aria-modal": true,
|
|
100
118
|
ref: containerRef,
|
|
101
119
|
tabIndex: !removeAutoFocus ? 0 : void 0
|
|
102
120
|
}, getSpaceProps(rest)), {
|
|
103
|
-
size,
|
|
104
121
|
centered,
|
|
105
122
|
"data-testid": DSDialogDatatestid.CONTAINER
|
|
106
|
-
}), restOfGlobalAttributes),
|
|
123
|
+
}), restOfGlobalAttributes), {
|
|
124
|
+
size
|
|
125
|
+
}), children)), document.getElementsByTagName("body")[0]);
|
|
107
126
|
}
|
|
108
127
|
return null;
|
|
109
128
|
};
|
|
110
|
-
DSDialog.propTypes = propTypes;
|
|
111
129
|
const DSDialogWithSchema = describe(DSDialog);
|
|
112
130
|
DSDialogWithSchema.propTypes = propTypes;
|
|
113
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.3",
|
|
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.3",
|
|
71
|
+
"@elliemae/ds-props-helpers": "3.0.0-next.3",
|
|
72
|
+
"@elliemae/ds-system": "3.0.0-next.3",
|
|
73
73
|
"@xstyled/styled-components": "~3.1.2",
|
|
74
74
|
"react-desc": "~4.1.3"
|
|
75
75
|
},
|