@doist/reactist 22.0.1-beta → 22.0.3-beta
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/reactist.cjs.development.js +6 -217
- package/dist/reactist.cjs.development.js.map +1 -1
- package/dist/reactist.cjs.production.min.js +1 -1
- package/dist/reactist.cjs.production.min.js.map +1 -1
- package/es/index.js +0 -1
- package/es/index.js.map +1 -1
- package/es/text-area/text-area.module.css.js +1 -1
- package/es/toast/use-toasts.js +5 -3
- package/es/toast/use-toasts.js.map +1 -1
- package/lib/index.d.ts +0 -1
- package/lib/index.js +1 -1
- package/lib/text-area/text-area.module.css.js +1 -1
- package/lib/toast/use-toasts.d.ts +5 -1
- package/lib/toast/use-toasts.js +1 -1
- package/lib/toast/use-toasts.js.map +1 -1
- package/package.json +4 -5
- package/styles/reactist.css +2 -3
- package/styles/text-area.css +1 -1
- package/styles/text-area.module.css.css +1 -1
- package/es/deprecated-modal/modal.js +0 -219
- package/es/deprecated-modal/modal.js.map +0 -1
- package/es/deprecated-modal/modal.module.css.js +0 -4
- package/es/deprecated-modal/modal.module.css.js.map +0 -1
- package/lib/deprecated-modal/index.d.ts +0 -1
- package/lib/deprecated-modal/modal.d.ts +0 -157
- package/lib/deprecated-modal/modal.js +0 -2
- package/lib/deprecated-modal/modal.js.map +0 -1
- package/lib/deprecated-modal/modal.module.css.js +0 -2
- package/lib/deprecated-modal/modal.module.css.js.map +0 -1
- package/lib/deprecated-modal/modal.test.d.ts +0 -1
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { useMemo, createElement, useContext, useState, useEffect, Fragment, createContext } from 'react';
|
|
3
|
-
import classNames from 'classnames';
|
|
4
|
-
import { Box } from '../box/box.js';
|
|
5
|
-
import { Columns, Column } from '../columns/columns.js';
|
|
6
|
-
import { Divider } from '../divider/divider.js';
|
|
7
|
-
import { Inline } from '../inline/inline.js';
|
|
8
|
-
import { Button } from '../button/button.js';
|
|
9
|
-
import { CloseIcon } from '../icons/close-icon.js';
|
|
10
|
-
import FocusLock from 'react-focus-lock';
|
|
11
|
-
import { DialogOverlay, DialogContent } from '@reach/dialog';
|
|
12
|
-
import styles from './modal.module.css.js';
|
|
13
|
-
|
|
14
|
-
const _excluded = ["isOpen", "onDismiss", "height", "width", "exceptionallySetClassName", "autoFocus", "children"],
|
|
15
|
-
_excluded2 = ["children", "button", "withDivider", "exceptionallySetClassName"],
|
|
16
|
-
_excluded3 = ["exceptionallySetClassName", "children"],
|
|
17
|
-
_excluded4 = ["exceptionallySetClassName", "withDivider"],
|
|
18
|
-
_excluded5 = ["children"];
|
|
19
|
-
const ModalContext = /*#__PURE__*/createContext({
|
|
20
|
-
onDismiss: undefined,
|
|
21
|
-
height: 'fitContent'
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
function isNotInternalFrame(element) {
|
|
25
|
-
return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe');
|
|
26
|
-
}
|
|
27
|
-
/**
|
|
28
|
-
* Renders a modal that sits on top of the rest of the content in the entire page.
|
|
29
|
-
*
|
|
30
|
-
* Follows the WAI-ARIA Dialog (Modal) Pattern.
|
|
31
|
-
*
|
|
32
|
-
* @see DeprecatedModalHeader
|
|
33
|
-
* @see DeprecatedModalFooter
|
|
34
|
-
* @see DeprecatedModalBody
|
|
35
|
-
* @deprecated
|
|
36
|
-
*/
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
function DeprecatedModal(_ref) {
|
|
40
|
-
let {
|
|
41
|
-
isOpen,
|
|
42
|
-
onDismiss,
|
|
43
|
-
height = 'fitContent',
|
|
44
|
-
width = 'medium',
|
|
45
|
-
exceptionallySetClassName,
|
|
46
|
-
autoFocus = true,
|
|
47
|
-
children
|
|
48
|
-
} = _ref,
|
|
49
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
50
|
-
|
|
51
|
-
const contextValue = useMemo(() => ({
|
|
52
|
-
onDismiss,
|
|
53
|
-
height
|
|
54
|
-
}), [onDismiss, height]);
|
|
55
|
-
return /*#__PURE__*/createElement(DialogOverlay, {
|
|
56
|
-
isOpen: isOpen,
|
|
57
|
-
onDismiss: onDismiss,
|
|
58
|
-
dangerouslyBypassFocusLock // We're setting up our own focus lock below
|
|
59
|
-
: true,
|
|
60
|
-
className: classNames(styles.overlay, styles[height], styles[width]),
|
|
61
|
-
"data-testid": "modal-overlay"
|
|
62
|
-
}, /*#__PURE__*/createElement(FocusLock, {
|
|
63
|
-
autoFocus: autoFocus,
|
|
64
|
-
whiteList: isNotInternalFrame,
|
|
65
|
-
returnFocus: true
|
|
66
|
-
}, /*#__PURE__*/createElement(DialogContent, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
67
|
-
as: Box,
|
|
68
|
-
borderRadius: "full",
|
|
69
|
-
background: "default",
|
|
70
|
-
display: "flex",
|
|
71
|
-
flexDirection: "column",
|
|
72
|
-
overflow: "hidden",
|
|
73
|
-
height: height === 'expand' ? 'full' : undefined,
|
|
74
|
-
flexGrow: height === 'expand' ? 1 : 0,
|
|
75
|
-
className: [exceptionallySetClassName, styles.container]
|
|
76
|
-
}), /*#__PURE__*/createElement(ModalContext.Provider, {
|
|
77
|
-
value: contextValue
|
|
78
|
-
}, children))));
|
|
79
|
-
}
|
|
80
|
-
/**
|
|
81
|
-
* The close button rendered by ModalHeader. Provided independently so that consumers can customize
|
|
82
|
-
* the button's label.
|
|
83
|
-
*
|
|
84
|
-
* @see DeprecatedModalHeader
|
|
85
|
-
*/
|
|
86
|
-
|
|
87
|
-
function DeprecatedModalCloseButton(props) {
|
|
88
|
-
const {
|
|
89
|
-
onDismiss
|
|
90
|
-
} = useContext(ModalContext);
|
|
91
|
-
const [includeInTabOrder, setIncludeInTabOrder] = useState(false);
|
|
92
|
-
const [isMounted, setIsMounted] = useState(false);
|
|
93
|
-
useEffect(function skipAutoFocus() {
|
|
94
|
-
if (isMounted) {
|
|
95
|
-
setIncludeInTabOrder(true);
|
|
96
|
-
} else {
|
|
97
|
-
setIsMounted(true);
|
|
98
|
-
}
|
|
99
|
-
}, [isMounted]);
|
|
100
|
-
return /*#__PURE__*/createElement(Button, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
101
|
-
variant: "quaternary",
|
|
102
|
-
onClick: onDismiss,
|
|
103
|
-
icon: /*#__PURE__*/createElement(CloseIcon, null),
|
|
104
|
-
tabIndex: includeInTabOrder ? 0 : -1
|
|
105
|
-
}));
|
|
106
|
-
}
|
|
107
|
-
/**
|
|
108
|
-
* Renders a standard modal header area with an optional close button.
|
|
109
|
-
*
|
|
110
|
-
* @see DeprecatedModal
|
|
111
|
-
* @see DeprecatedModalFooter
|
|
112
|
-
* @see DeprecatedModalBody
|
|
113
|
-
*/
|
|
114
|
-
|
|
115
|
-
function DeprecatedModalHeader(_ref2) {
|
|
116
|
-
let {
|
|
117
|
-
children,
|
|
118
|
-
button = true,
|
|
119
|
-
withDivider = false,
|
|
120
|
-
exceptionallySetClassName
|
|
121
|
-
} = _ref2,
|
|
122
|
-
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
123
|
-
|
|
124
|
-
return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
125
|
-
as: "header",
|
|
126
|
-
paddingLeft: "large",
|
|
127
|
-
paddingRight: button === false || button === null ? 'large' : 'small',
|
|
128
|
-
paddingY: "small",
|
|
129
|
-
className: exceptionallySetClassName
|
|
130
|
-
}), /*#__PURE__*/createElement(Columns, {
|
|
131
|
-
space: "large",
|
|
132
|
-
alignY: "center"
|
|
133
|
-
}, /*#__PURE__*/createElement(Column, {
|
|
134
|
-
width: "auto"
|
|
135
|
-
}, children), button === false || button === null ? /*#__PURE__*/createElement("div", {
|
|
136
|
-
className: styles.headerContent
|
|
137
|
-
}) : /*#__PURE__*/createElement(Column, {
|
|
138
|
-
width: "content",
|
|
139
|
-
exceptionallySetClassName: styles.buttonContainer,
|
|
140
|
-
"data-testid": "button-container"
|
|
141
|
-
}, typeof button === 'boolean' ? /*#__PURE__*/createElement(DeprecatedModalCloseButton, {
|
|
142
|
-
"aria-label": "Close modal",
|
|
143
|
-
autoFocus: false
|
|
144
|
-
}) : button))), withDivider ? /*#__PURE__*/createElement(Divider, null) : null);
|
|
145
|
-
}
|
|
146
|
-
/**
|
|
147
|
-
* Renders the body of a modal.
|
|
148
|
-
*
|
|
149
|
-
* Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
|
|
150
|
-
* things, that the contet of the modal body expands or contracts depending on the modal height
|
|
151
|
-
* setting or the size of the content. The body content also automatically scrolls when it's too
|
|
152
|
-
* large to fit the available space.
|
|
153
|
-
*
|
|
154
|
-
* @see DeprecatedModal
|
|
155
|
-
* @see DeprecatedModalHeader
|
|
156
|
-
* @see DeprecatedModalFooter
|
|
157
|
-
*/
|
|
158
|
-
|
|
159
|
-
function DeprecatedModalBody(_ref3) {
|
|
160
|
-
let {
|
|
161
|
-
exceptionallySetClassName,
|
|
162
|
-
children
|
|
163
|
-
} = _ref3,
|
|
164
|
-
props = _objectWithoutProperties(_ref3, _excluded3);
|
|
165
|
-
|
|
166
|
-
const {
|
|
167
|
-
height
|
|
168
|
-
} = useContext(ModalContext);
|
|
169
|
-
return /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
170
|
-
className: exceptionallySetClassName,
|
|
171
|
-
flexGrow: height === 'expand' ? 1 : 0,
|
|
172
|
-
height: height === 'expand' ? 'full' : undefined,
|
|
173
|
-
overflow: "auto"
|
|
174
|
-
}), /*#__PURE__*/createElement(Box, {
|
|
175
|
-
padding: "large",
|
|
176
|
-
paddingBottom: "xxlarge"
|
|
177
|
-
}, children));
|
|
178
|
-
}
|
|
179
|
-
/**
|
|
180
|
-
* Renders a standard modal footer area.
|
|
181
|
-
*
|
|
182
|
-
* @see DeprecatedModal
|
|
183
|
-
* @see DeprecatedModalHeader
|
|
184
|
-
* @see DeprecatedModalBody
|
|
185
|
-
*/
|
|
186
|
-
|
|
187
|
-
function DeprecatedModalFooter(_ref4) {
|
|
188
|
-
let {
|
|
189
|
-
exceptionallySetClassName,
|
|
190
|
-
withDivider = false
|
|
191
|
-
} = _ref4,
|
|
192
|
-
props = _objectWithoutProperties(_ref4, _excluded4);
|
|
193
|
-
|
|
194
|
-
return /*#__PURE__*/createElement(Fragment, null, withDivider ? /*#__PURE__*/createElement(Divider, null) : null, /*#__PURE__*/createElement(Box, _objectSpread2(_objectSpread2({
|
|
195
|
-
as: "footer"
|
|
196
|
-
}, props), {}, {
|
|
197
|
-
className: exceptionallySetClassName,
|
|
198
|
-
padding: "large"
|
|
199
|
-
})));
|
|
200
|
-
}
|
|
201
|
-
/**
|
|
202
|
-
* A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
|
|
203
|
-
* @see DeprecatedModalFooter
|
|
204
|
-
*/
|
|
205
|
-
|
|
206
|
-
function DeprecatedModalActions(_ref5) {
|
|
207
|
-
let {
|
|
208
|
-
children
|
|
209
|
-
} = _ref5,
|
|
210
|
-
props = _objectWithoutProperties(_ref5, _excluded5);
|
|
211
|
-
|
|
212
|
-
return /*#__PURE__*/createElement(DeprecatedModalFooter, _objectSpread2({}, props), /*#__PURE__*/createElement(Inline, {
|
|
213
|
-
align: "right",
|
|
214
|
-
space: "large"
|
|
215
|
-
}, children));
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
export { DeprecatedModal, DeprecatedModalActions, DeprecatedModalBody, DeprecatedModalCloseButton, DeprecatedModalFooter, DeprecatedModalHeader };
|
|
219
|
-
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../src/deprecated-modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n onDismiss?(this: void): void\n height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n onDismiss: undefined,\n height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n 'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type DeprecatedModalProps = DivProps & {\n /**\n * The content of the modal.\n */\n children: React.ReactNode\n /**\n * Whether the modal is open and visible or not.\n */\n isOpen: boolean\n /**\n * Called when the user triggers closing the modal.\n */\n onDismiss?(): void\n /**\n * A descriptive setting for how wide the modal should aim to be, depending on how much space\n * it has on screen.\n * @default 'medium'\n */\n width?: ModalWidth\n /**\n * A descriptive setting for how tall the modal should aim to be.\n *\n * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n * padding above and below.\n * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n *\n * In either case, if content does not fit, the content of the main body is set to scroll\n * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n * viewport boundaries.\n *\n * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n * the inner layout to ensure scroll, or whatever other strategy you may want.\n */\n height?: ModalHeightMode\n /**\n * Whether to set or not the focus initially to the first focusable element inside the modal.\n */\n autoFocus?: boolean\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n /** Defines a string value that labels the current modal for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n 'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n * @deprecated\n */\nexport function DeprecatedModal({\n isOpen,\n onDismiss,\n height = 'fitContent',\n width = 'medium',\n exceptionallySetClassName,\n autoFocus = true,\n children,\n ...props\n}: DeprecatedModalProps) {\n const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n onDismiss,\n height,\n ])\n\n return (\n <DialogOverlay\n isOpen={isOpen}\n onDismiss={onDismiss}\n dangerouslyBypassFocusLock // We're setting up our own focus lock below\n className={classNames(styles.overlay, styles[height], styles[width])}\n data-testid=\"modal-overlay\"\n >\n <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n <DialogContent\n {...props}\n as={Box}\n borderRadius=\"full\"\n background=\"default\"\n display=\"flex\"\n flexDirection=\"column\"\n overflow=\"hidden\"\n height={height === 'expand' ? 'full' : undefined}\n flexGrow={height === 'expand' ? 1 : 0}\n className={[exceptionallySetClassName, styles.container]}\n >\n <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n </DialogContent>\n </FocusLock>\n </DialogOverlay>\n )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type DeprecatedModalCloseButtonProps = Omit<\n ButtonProps,\n | 'type'\n | 'children'\n | 'variant'\n | 'icon'\n | 'startIcon'\n | 'endIcon'\n | 'disabled'\n | 'loading'\n | 'tabIndex'\n | 'width'\n | 'align'\n> & {\n /**\n * The descriptive label of the button.\n */\n 'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see DeprecatedModalHeader\n */\nexport function DeprecatedModalCloseButton(props: DeprecatedModalCloseButtonProps) {\n const { onDismiss } = React.useContext(ModalContext)\n const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n const [isMounted, setIsMounted] = React.useState(false)\n\n React.useEffect(\n function skipAutoFocus() {\n if (isMounted) {\n setIncludeInTabOrder(true)\n } else {\n setIsMounted(true)\n }\n },\n [isMounted],\n )\n\n return (\n <Button\n {...props}\n variant=\"quaternary\"\n onClick={onDismiss}\n icon={<CloseIcon />}\n tabIndex={includeInTabOrder ? 0 : -1}\n />\n )\n}\n\n//\n// ModalHeader\n//\n\nexport type DeprecatedModalHeaderProps = DivProps & {\n /**\n * The content of the header.\n */\n children: React.ReactNode\n /**\n * Allows to provide a custom button element, or to omit the close button if set to false.\n * @see DeprecatedModalCloseButton\n */\n button?: React.ReactNode | boolean\n /**\n * Whether to render a divider line below the header.\n * @default false\n */\n withDivider?: boolean\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalHeader({\n children,\n button = true,\n withDivider = false,\n exceptionallySetClassName,\n ...props\n}: DeprecatedModalHeaderProps) {\n return (\n <>\n <Box\n {...props}\n as=\"header\"\n paddingLeft=\"large\"\n paddingRight={button === false || button === null ? 'large' : 'small'}\n paddingY=\"small\"\n className={exceptionallySetClassName}\n >\n <Columns space=\"large\" alignY=\"center\">\n <Column width=\"auto\">{children}</Column>\n {button === false || button === null ? (\n <div className={styles.headerContent} />\n ) : (\n <Column\n width=\"content\"\n exceptionallySetClassName={styles.buttonContainer}\n data-testid=\"button-container\"\n >\n {typeof button === 'boolean' ? (\n <DeprecatedModalCloseButton\n aria-label=\"Close modal\"\n autoFocus={false}\n />\n ) : (\n button\n )}\n </Column>\n )}\n </Columns>\n </Box>\n {withDivider ? <Divider /> : null}\n </>\n )\n}\n\n//\n// ModalBody\n//\n\nexport type DeprecatedModalBodyProps = DivProps & {\n /**\n * The content of the modal body.\n */\n children: React.ReactNode\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalBody({\n exceptionallySetClassName,\n children,\n ...props\n}: DeprecatedModalBodyProps) {\n const { height } = React.useContext(ModalContext)\n return (\n <Box\n {...props}\n className={exceptionallySetClassName}\n flexGrow={height === 'expand' ? 1 : 0}\n height={height === 'expand' ? 'full' : undefined}\n overflow=\"auto\"\n >\n <Box padding=\"large\" paddingBottom=\"xxlarge\">\n {children}\n </Box>\n </Box>\n )\n}\n\n//\n// ModalFooter\n//\n\nexport type DeprecatedModalFooterProps = DivProps & {\n /**\n * The contant of the modal footer.\n */\n children: React.ReactNode\n /**\n * Whether to render a divider line below the footer.\n * @default false\n */\n withDivider?: boolean\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalFooter({\n exceptionallySetClassName,\n withDivider = false,\n ...props\n}: DeprecatedModalFooterProps) {\n return (\n <>\n {withDivider ? <Divider /> : null}\n <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n </>\n )\n}\n\n//\n// ModalActions\n//\n\nexport type DeprecatedModalActionsProps = DeprecatedModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalActions({ children, ...props }: DeprecatedModalActionsProps) {\n return (\n <DeprecatedModalFooter {...props}>\n <Inline align=\"right\" space=\"large\">\n {children}\n </Inline>\n </DeprecatedModalFooter>\n )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","DeprecatedModal","isOpen","width","exceptionallySetClassName","autoFocus","children","props","contextValue","DialogOverlay","dangerouslyBypassFocusLock","className","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","as","Box","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","DeprecatedModalCloseButton","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","skipAutoFocus","Button","variant","onClick","icon","CloseIcon","tabIndex","DeprecatedModalHeader","button","withDivider","paddingLeft","paddingRight","paddingY","Columns","space","alignY","Column","headerContent","buttonContainer","Divider","DeprecatedModalBody","padding","paddingBottom","DeprecatedModalFooter","DeprecatedModalActions","Inline","align"],"mappings":"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"}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
var modules_8f59d13b = {"reach-portal":"ad18b0a0","fadein":"f7a1b219","fitContent":"_8ed9bb5c","container":"f67e892e","full":"_4139421e","large":"_649eb5fe","medium":"_5323e676","small":"_56ca7ae6","xlarge":"a7be0fce","overlay":"_88a7a680","expand":"b29456b8","buttonContainer":"_09ef1f4f","headerContent":"_0e5b530a"};
|
|
2
|
-
|
|
3
|
-
export default modules_8f59d13b;
|
|
4
|
-
//# sourceMappingURL=modal.module.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"modal.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './modal';
|
|
@@ -1,157 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { ButtonProps } from '../button';
|
|
3
|
-
declare type ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full';
|
|
4
|
-
declare type ModalHeightMode = 'expand' | 'fitContent';
|
|
5
|
-
declare type DivProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'className' | 'children' | `aria-label` | `aria-labelledby`>;
|
|
6
|
-
export declare type DeprecatedModalProps = DivProps & {
|
|
7
|
-
/**
|
|
8
|
-
* The content of the modal.
|
|
9
|
-
*/
|
|
10
|
-
children: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Whether the modal is open and visible or not.
|
|
13
|
-
*/
|
|
14
|
-
isOpen: boolean;
|
|
15
|
-
/**
|
|
16
|
-
* Called when the user triggers closing the modal.
|
|
17
|
-
*/
|
|
18
|
-
onDismiss?(): void;
|
|
19
|
-
/**
|
|
20
|
-
* A descriptive setting for how wide the modal should aim to be, depending on how much space
|
|
21
|
-
* it has on screen.
|
|
22
|
-
* @default 'medium'
|
|
23
|
-
*/
|
|
24
|
-
width?: ModalWidth;
|
|
25
|
-
/**
|
|
26
|
-
* A descriptive setting for how tall the modal should aim to be.
|
|
27
|
-
*
|
|
28
|
-
* - 'expand': the modal aims to fill most of the available screen height, leaving only a small
|
|
29
|
-
* padding above and below.
|
|
30
|
-
* - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.
|
|
31
|
-
*
|
|
32
|
-
* In either case, if content does not fit, the content of the main body is set to scroll
|
|
33
|
-
* (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the
|
|
34
|
-
* viewport boundaries.
|
|
35
|
-
*
|
|
36
|
-
* If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of
|
|
37
|
-
* the inner layout to ensure scroll, or whatever other strategy you may want.
|
|
38
|
-
*/
|
|
39
|
-
height?: ModalHeightMode;
|
|
40
|
-
/**
|
|
41
|
-
* Whether to set or not the focus initially to the first focusable element inside the modal.
|
|
42
|
-
*/
|
|
43
|
-
autoFocus?: boolean;
|
|
44
|
-
/**
|
|
45
|
-
* A escape hatch in case you need to provide a custom class name to the container element.
|
|
46
|
-
*/
|
|
47
|
-
exceptionallySetClassName?: string;
|
|
48
|
-
/** Defines a string value that labels the current modal for assistive technologies. */
|
|
49
|
-
'aria-label'?: string;
|
|
50
|
-
/** Identifies the element (or elements) that labels the current modal for assistive technologies. */
|
|
51
|
-
'aria-labelledby'?: string;
|
|
52
|
-
};
|
|
53
|
-
/**
|
|
54
|
-
* Renders a modal that sits on top of the rest of the content in the entire page.
|
|
55
|
-
*
|
|
56
|
-
* Follows the WAI-ARIA Dialog (Modal) Pattern.
|
|
57
|
-
*
|
|
58
|
-
* @see DeprecatedModalHeader
|
|
59
|
-
* @see DeprecatedModalFooter
|
|
60
|
-
* @see DeprecatedModalBody
|
|
61
|
-
* @deprecated
|
|
62
|
-
*/
|
|
63
|
-
export declare function DeprecatedModal({ isOpen, onDismiss, height, width, exceptionallySetClassName, autoFocus, children, ...props }: DeprecatedModalProps): JSX.Element;
|
|
64
|
-
export declare type DeprecatedModalCloseButtonProps = Omit<ButtonProps, 'type' | 'children' | 'variant' | 'icon' | 'startIcon' | 'endIcon' | 'disabled' | 'loading' | 'tabIndex' | 'width' | 'align'> & {
|
|
65
|
-
/**
|
|
66
|
-
* The descriptive label of the button.
|
|
67
|
-
*/
|
|
68
|
-
'aria-label': string;
|
|
69
|
-
};
|
|
70
|
-
/**
|
|
71
|
-
* The close button rendered by ModalHeader. Provided independently so that consumers can customize
|
|
72
|
-
* the button's label.
|
|
73
|
-
*
|
|
74
|
-
* @see DeprecatedModalHeader
|
|
75
|
-
*/
|
|
76
|
-
export declare function DeprecatedModalCloseButton(props: DeprecatedModalCloseButtonProps): JSX.Element;
|
|
77
|
-
export declare type DeprecatedModalHeaderProps = DivProps & {
|
|
78
|
-
/**
|
|
79
|
-
* The content of the header.
|
|
80
|
-
*/
|
|
81
|
-
children: React.ReactNode;
|
|
82
|
-
/**
|
|
83
|
-
* Allows to provide a custom button element, or to omit the close button if set to false.
|
|
84
|
-
* @see DeprecatedModalCloseButton
|
|
85
|
-
*/
|
|
86
|
-
button?: React.ReactNode | boolean;
|
|
87
|
-
/**
|
|
88
|
-
* Whether to render a divider line below the header.
|
|
89
|
-
* @default false
|
|
90
|
-
*/
|
|
91
|
-
withDivider?: boolean;
|
|
92
|
-
/**
|
|
93
|
-
* A escape hatch in case you need to provide a custom class name to the container element.
|
|
94
|
-
*/
|
|
95
|
-
exceptionallySetClassName?: string;
|
|
96
|
-
};
|
|
97
|
-
/**
|
|
98
|
-
* Renders a standard modal header area with an optional close button.
|
|
99
|
-
*
|
|
100
|
-
* @see DeprecatedModal
|
|
101
|
-
* @see DeprecatedModalFooter
|
|
102
|
-
* @see DeprecatedModalBody
|
|
103
|
-
*/
|
|
104
|
-
export declare function DeprecatedModalHeader({ children, button, withDivider, exceptionallySetClassName, ...props }: DeprecatedModalHeaderProps): JSX.Element;
|
|
105
|
-
export declare type DeprecatedModalBodyProps = DivProps & {
|
|
106
|
-
/**
|
|
107
|
-
* The content of the modal body.
|
|
108
|
-
*/
|
|
109
|
-
children: React.ReactNode;
|
|
110
|
-
/**
|
|
111
|
-
* A escape hatch in case you need to provide a custom class name to the container element.
|
|
112
|
-
*/
|
|
113
|
-
exceptionallySetClassName?: string;
|
|
114
|
-
};
|
|
115
|
-
/**
|
|
116
|
-
* Renders the body of a modal.
|
|
117
|
-
*
|
|
118
|
-
* Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other
|
|
119
|
-
* things, that the contet of the modal body expands or contracts depending on the modal height
|
|
120
|
-
* setting or the size of the content. The body content also automatically scrolls when it's too
|
|
121
|
-
* large to fit the available space.
|
|
122
|
-
*
|
|
123
|
-
* @see DeprecatedModal
|
|
124
|
-
* @see DeprecatedModalHeader
|
|
125
|
-
* @see DeprecatedModalFooter
|
|
126
|
-
*/
|
|
127
|
-
export declare function DeprecatedModalBody({ exceptionallySetClassName, children, ...props }: DeprecatedModalBodyProps): JSX.Element;
|
|
128
|
-
export declare type DeprecatedModalFooterProps = DivProps & {
|
|
129
|
-
/**
|
|
130
|
-
* The contant of the modal footer.
|
|
131
|
-
*/
|
|
132
|
-
children: React.ReactNode;
|
|
133
|
-
/**
|
|
134
|
-
* Whether to render a divider line below the footer.
|
|
135
|
-
* @default false
|
|
136
|
-
*/
|
|
137
|
-
withDivider?: boolean;
|
|
138
|
-
/**
|
|
139
|
-
* A escape hatch in case you need to provide a custom class name to the container element.
|
|
140
|
-
*/
|
|
141
|
-
exceptionallySetClassName?: string;
|
|
142
|
-
};
|
|
143
|
-
/**
|
|
144
|
-
* Renders a standard modal footer area.
|
|
145
|
-
*
|
|
146
|
-
* @see DeprecatedModal
|
|
147
|
-
* @see DeprecatedModalHeader
|
|
148
|
-
* @see DeprecatedModalBody
|
|
149
|
-
*/
|
|
150
|
-
export declare function DeprecatedModalFooter({ exceptionallySetClassName, withDivider, ...props }: DeprecatedModalFooterProps): JSX.Element;
|
|
151
|
-
export declare type DeprecatedModalActionsProps = DeprecatedModalFooterProps;
|
|
152
|
-
/**
|
|
153
|
-
* A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).
|
|
154
|
-
* @see DeprecatedModalFooter
|
|
155
|
-
*/
|
|
156
|
-
export declare function DeprecatedModalActions({ children, ...props }: DeprecatedModalActionsProps): JSX.Element;
|
|
157
|
-
export {};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),a=require("react"),o=(e(a),e(require("classnames"))),l=require("../box/box.js"),r=require("../columns/columns.js"),n=require("../divider/divider.js"),i=require("../inline/inline.js"),s=require("../button/button.js"),c=require("../icons/close-icon.js"),u=e(require("react-focus-lock")),d=require("@reach/dialog"),m=require("./modal.module.css.js");const p=["isOpen","onDismiss","height","width","exceptionallySetClassName","autoFocus","children"],h=["children","button","withDivider","exceptionallySetClassName"],f=["exceptionallySetClassName","children"],x=["exceptionallySetClassName","withDivider"],g=["children"],b=a.createContext({onDismiss:void 0,height:"fitContent"});function j(e){return!(e.ownerDocument===document&&"iframe"===e.tagName.toLowerCase())}function C(e){const{onDismiss:o}=a.useContext(b),[l,r]=a.useState(!1),[n,i]=a.useState(!1);return a.useEffect((function(){n?r(!0):i(!0)}),[n]),a.createElement(s.Button,t.objectSpread2(t.objectSpread2({},e),{},{variant:"quaternary",onClick:o,icon:a.createElement(c.CloseIcon,null),tabIndex:l?0:-1}))}function v(e){let{exceptionallySetClassName:o,withDivider:r=!1}=e,i=t.objectWithoutProperties(e,x);return a.createElement(a.Fragment,null,r?a.createElement(n.Divider,null):null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({as:"footer"},i),{},{className:o,padding:"large"})))}exports.DeprecatedModal=function(e){let{isOpen:r,onDismiss:n,height:i="fitContent",width:s="medium",exceptionallySetClassName:c,autoFocus:h=!0,children:f}=e,x=t.objectWithoutProperties(e,p);const g=a.useMemo(()=>({onDismiss:n,height:i}),[n,i]);return a.createElement(d.DialogOverlay,{isOpen:r,onDismiss:n,dangerouslyBypassFocusLock:!0,className:o(m.default.overlay,m.default[i],m.default[s]),"data-testid":"modal-overlay"},a.createElement(u,{autoFocus:h,whiteList:j,returnFocus:!0},a.createElement(d.DialogContent,t.objectSpread2(t.objectSpread2({},x),{},{as:l.Box,borderRadius:"full",background:"default",display:"flex",flexDirection:"column",overflow:"hidden",height:"expand"===i?"full":void 0,flexGrow:"expand"===i?1:0,className:[c,m.default.container]}),a.createElement(b.Provider,{value:g},f))))},exports.DeprecatedModalActions=function(e){let{children:o}=e,l=t.objectWithoutProperties(e,g);return a.createElement(v,t.objectSpread2({},l),a.createElement(i.Inline,{align:"right",space:"large"},o))},exports.DeprecatedModalBody=function(e){let{exceptionallySetClassName:o,children:r}=e,n=t.objectWithoutProperties(e,f);const{height:i}=a.useContext(b);return a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},n),{},{className:o,flexGrow:"expand"===i?1:0,height:"expand"===i?"full":void 0,overflow:"auto"}),a.createElement(l.Box,{padding:"large",paddingBottom:"xxlarge"},r))},exports.DeprecatedModalCloseButton=C,exports.DeprecatedModalFooter=v,exports.DeprecatedModalHeader=function(e){let{children:o,button:i=!0,withDivider:s=!1,exceptionallySetClassName:c}=e,u=t.objectWithoutProperties(e,h);return a.createElement(a.Fragment,null,a.createElement(l.Box,t.objectSpread2(t.objectSpread2({},u),{},{as:"header",paddingLeft:"large",paddingRight:!1===i||null===i?"large":"small",paddingY:"small",className:c}),a.createElement(r.Columns,{space:"large",alignY:"center"},a.createElement(r.Column,{width:"auto"},o),!1===i||null===i?a.createElement("div",{className:m.default.headerContent}):a.createElement(r.Column,{width:"content",exceptionallySetClassName:m.default.buttonContainer,"data-testid":"button-container"},"boolean"==typeof i?a.createElement(C,{"aria-label":"Close modal",autoFocus:!1}):i))),s?a.createElement(n.Divider,null):null)};
|
|
2
|
-
//# sourceMappingURL=modal.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"modal.js","sources":["../../src/deprecated-modal/modal.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\nimport { DialogOverlay, DialogContent } from '@reach/dialog'\nimport FocusLock from 'react-focus-lock'\n\nimport { CloseIcon } from '../icons/close-icon'\nimport { Column, Columns } from '../columns'\nimport { Inline } from '../inline'\nimport { Divider } from '../divider'\nimport { Box } from '../box'\nimport { Button, ButtonProps } from '../button'\n\nimport styles from './modal.module.css'\n\ntype ModalWidth = 'small' | 'medium' | 'large' | 'xlarge' | 'full'\ntype ModalHeightMode = 'expand' | 'fitContent'\n\n//\n// ModalContext\n//\n\ntype ModalContextValue = {\n onDismiss?(this: void): void\n height: ModalHeightMode\n}\n\nconst ModalContext = React.createContext<ModalContextValue>({\n onDismiss: undefined,\n height: 'fitContent',\n})\n\n//\n// Modal container\n//\n\ntype DivProps = Omit<\n React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLDivElement>, HTMLDivElement>,\n 'className' | 'children' | `aria-label` | `aria-labelledby`\n>\n\nexport type DeprecatedModalProps = DivProps & {\n /**\n * The content of the modal.\n */\n children: React.ReactNode\n /**\n * Whether the modal is open and visible or not.\n */\n isOpen: boolean\n /**\n * Called when the user triggers closing the modal.\n */\n onDismiss?(): void\n /**\n * A descriptive setting for how wide the modal should aim to be, depending on how much space\n * it has on screen.\n * @default 'medium'\n */\n width?: ModalWidth\n /**\n * A descriptive setting for how tall the modal should aim to be.\n *\n * - 'expand': the modal aims to fill most of the available screen height, leaving only a small\n * padding above and below.\n * - 'fitContent': the modal shrinks to the smallest size that allow it to fit its content.\n *\n * In either case, if content does not fit, the content of the main body is set to scroll\n * (provided you use `ModalBody`) so that the modal never has to strech vertically beyond the\n * viewport boundaries.\n *\n * If you do not use `ModalBody`, the modal still prevents overflow, and you are in charge of\n * the inner layout to ensure scroll, or whatever other strategy you may want.\n */\n height?: ModalHeightMode\n /**\n * Whether to set or not the focus initially to the first focusable element inside the modal.\n */\n autoFocus?: boolean\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n /** Defines a string value that labels the current modal for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current modal for assistive technologies. */\n 'aria-labelledby'?: string\n}\n\nfunction isNotInternalFrame(element: HTMLElement) {\n return !(element.ownerDocument === document && element.tagName.toLowerCase() === 'iframe')\n}\n\n/**\n * Renders a modal that sits on top of the rest of the content in the entire page.\n *\n * Follows the WAI-ARIA Dialog (Modal) Pattern.\n *\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n * @deprecated\n */\nexport function DeprecatedModal({\n isOpen,\n onDismiss,\n height = 'fitContent',\n width = 'medium',\n exceptionallySetClassName,\n autoFocus = true,\n children,\n ...props\n}: DeprecatedModalProps) {\n const contextValue: ModalContextValue = React.useMemo(() => ({ onDismiss, height }), [\n onDismiss,\n height,\n ])\n\n return (\n <DialogOverlay\n isOpen={isOpen}\n onDismiss={onDismiss}\n dangerouslyBypassFocusLock // We're setting up our own focus lock below\n className={classNames(styles.overlay, styles[height], styles[width])}\n data-testid=\"modal-overlay\"\n >\n <FocusLock autoFocus={autoFocus} whiteList={isNotInternalFrame} returnFocus={true}>\n <DialogContent\n {...props}\n as={Box}\n borderRadius=\"full\"\n background=\"default\"\n display=\"flex\"\n flexDirection=\"column\"\n overflow=\"hidden\"\n height={height === 'expand' ? 'full' : undefined}\n flexGrow={height === 'expand' ? 1 : 0}\n className={[exceptionallySetClassName, styles.container]}\n >\n <ModalContext.Provider value={contextValue}>{children}</ModalContext.Provider>\n </DialogContent>\n </FocusLock>\n </DialogOverlay>\n )\n}\n\n//\n// ModalCloseButton\n//\n\nexport type DeprecatedModalCloseButtonProps = Omit<\n ButtonProps,\n | 'type'\n | 'children'\n | 'variant'\n | 'icon'\n | 'startIcon'\n | 'endIcon'\n | 'disabled'\n | 'loading'\n | 'tabIndex'\n | 'width'\n | 'align'\n> & {\n /**\n * The descriptive label of the button.\n */\n 'aria-label': string\n}\n\n/**\n * The close button rendered by ModalHeader. Provided independently so that consumers can customize\n * the button's label.\n *\n * @see DeprecatedModalHeader\n */\nexport function DeprecatedModalCloseButton(props: DeprecatedModalCloseButtonProps) {\n const { onDismiss } = React.useContext(ModalContext)\n const [includeInTabOrder, setIncludeInTabOrder] = React.useState(false)\n const [isMounted, setIsMounted] = React.useState(false)\n\n React.useEffect(\n function skipAutoFocus() {\n if (isMounted) {\n setIncludeInTabOrder(true)\n } else {\n setIsMounted(true)\n }\n },\n [isMounted],\n )\n\n return (\n <Button\n {...props}\n variant=\"quaternary\"\n onClick={onDismiss}\n icon={<CloseIcon />}\n tabIndex={includeInTabOrder ? 0 : -1}\n />\n )\n}\n\n//\n// ModalHeader\n//\n\nexport type DeprecatedModalHeaderProps = DivProps & {\n /**\n * The content of the header.\n */\n children: React.ReactNode\n /**\n * Allows to provide a custom button element, or to omit the close button if set to false.\n * @see DeprecatedModalCloseButton\n */\n button?: React.ReactNode | boolean\n /**\n * Whether to render a divider line below the header.\n * @default false\n */\n withDivider?: boolean\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal header area with an optional close button.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalFooter\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalHeader({\n children,\n button = true,\n withDivider = false,\n exceptionallySetClassName,\n ...props\n}: DeprecatedModalHeaderProps) {\n return (\n <>\n <Box\n {...props}\n as=\"header\"\n paddingLeft=\"large\"\n paddingRight={button === false || button === null ? 'large' : 'small'}\n paddingY=\"small\"\n className={exceptionallySetClassName}\n >\n <Columns space=\"large\" alignY=\"center\">\n <Column width=\"auto\">{children}</Column>\n {button === false || button === null ? (\n <div className={styles.headerContent} />\n ) : (\n <Column\n width=\"content\"\n exceptionallySetClassName={styles.buttonContainer}\n data-testid=\"button-container\"\n >\n {typeof button === 'boolean' ? (\n <DeprecatedModalCloseButton\n aria-label=\"Close modal\"\n autoFocus={false}\n />\n ) : (\n button\n )}\n </Column>\n )}\n </Columns>\n </Box>\n {withDivider ? <Divider /> : null}\n </>\n )\n}\n\n//\n// ModalBody\n//\n\nexport type DeprecatedModalBodyProps = DivProps & {\n /**\n * The content of the modal body.\n */\n children: React.ReactNode\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n}\n\n/**\n * Renders the body of a modal.\n *\n * Convenient to use alongside ModalHeader and/or ModalFooter as needed. It ensures, among other\n * things, that the contet of the modal body expands or contracts depending on the modal height\n * setting or the size of the content. The body content also automatically scrolls when it's too\n * large to fit the available space.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalBody({\n exceptionallySetClassName,\n children,\n ...props\n}: DeprecatedModalBodyProps) {\n const { height } = React.useContext(ModalContext)\n return (\n <Box\n {...props}\n className={exceptionallySetClassName}\n flexGrow={height === 'expand' ? 1 : 0}\n height={height === 'expand' ? 'full' : undefined}\n overflow=\"auto\"\n >\n <Box padding=\"large\" paddingBottom=\"xxlarge\">\n {children}\n </Box>\n </Box>\n )\n}\n\n//\n// ModalFooter\n//\n\nexport type DeprecatedModalFooterProps = DivProps & {\n /**\n * The contant of the modal footer.\n */\n children: React.ReactNode\n /**\n * Whether to render a divider line below the footer.\n * @default false\n */\n withDivider?: boolean\n /**\n * A escape hatch in case you need to provide a custom class name to the container element.\n */\n exceptionallySetClassName?: string\n}\n\n/**\n * Renders a standard modal footer area.\n *\n * @see DeprecatedModal\n * @see DeprecatedModalHeader\n * @see DeprecatedModalBody\n */\nexport function DeprecatedModalFooter({\n exceptionallySetClassName,\n withDivider = false,\n ...props\n}: DeprecatedModalFooterProps) {\n return (\n <>\n {withDivider ? <Divider /> : null}\n <Box as=\"footer\" {...props} className={exceptionallySetClassName} padding=\"large\" />\n </>\n )\n}\n\n//\n// ModalActions\n//\n\nexport type DeprecatedModalActionsProps = DeprecatedModalFooterProps\n\n/**\n * A specific version of the ModalFooter, tailored to showing an inline list of actions (buttons).\n * @see DeprecatedModalFooter\n */\nexport function DeprecatedModalActions({ children, ...props }: DeprecatedModalActionsProps) {\n return (\n <DeprecatedModalFooter {...props}>\n <Inline align=\"right\" space=\"large\">\n {children}\n </Inline>\n </DeprecatedModalFooter>\n )\n}\n"],"names":["ModalContext","React","onDismiss","undefined","height","isNotInternalFrame","element","ownerDocument","document","tagName","toLowerCase","DeprecatedModalCloseButton","props","includeInTabOrder","setIncludeInTabOrder","isMounted","setIsMounted","Button","variant","onClick","icon","CloseIcon","tabIndex","DeprecatedModalFooter","exceptionallySetClassName","withDivider","Divider","Box","as","className","padding","isOpen","width","autoFocus","children","contextValue","DialogOverlay","dangerouslyBypassFocusLock","classNames","styles","overlay","FocusLock","whiteList","returnFocus","DialogContent","borderRadius","background","display","flexDirection","overflow","flexGrow","container","Provider","value","Inline","align","space","paddingBottom","button","paddingLeft","paddingRight","paddingY","Columns","alignY","Column","headerContent","buttonContainer"],"mappings":"4yBA0BMA,EAAeC,gBAAuC,CACxDC,eAAWC,EACXC,OAAQ,eA4DZ,SAASC,EAAmBC,GACxB,QAASA,EAAQC,gBAAkBC,UAA8C,WAAlCF,EAAQG,QAAQC,wBAsFnDC,EAA2BC,GACvC,MAAMV,UAAEA,GAAcD,aAAiBD,IAChCa,EAAmBC,GAAwBb,YAAe,IAC1Dc,EAAWC,GAAgBf,YAAe,GAajD,OAXAA,aACI,WACQc,EACAD,GAAqB,GAErBE,GAAa,KAGrB,CAACD,IAIDd,gBAACgB,4CACOL,OACJM,QAAQ,aACRC,QAASjB,EACTkB,KAAMnB,gBAACoB,kBACPC,SAAUT,EAAoB,GAAK,cA4J/BU,SAAsBC,0BAClCA,EADkCC,YAElCA,GAAc,KACXb,iCAEH,OACIX,gCACKwB,EAAcxB,gBAACyB,gBAAa,KAC7BzB,gBAAC0B,uCAAIC,GAAG,UAAahB,OAAOiB,UAAWL,EAA2BM,QAAQ,oDAnQtDC,OAC5BA,EAD4B7B,UAE5BA,EAF4BE,OAG5BA,EAAS,aAHmB4B,MAI5BA,EAAQ,SAJoBR,0BAK5BA,EAL4BS,UAM5BA,GAAY,EANgBC,SAO5BA,KACGtB,iCAEH,MAAMuB,EAAkClC,UAAc,MAASC,UAAAA,EAAWE,OAAAA,IAAW,CACjFF,EACAE,IAGJ,OACIH,gBAACmC,iBACGL,OAAQA,EACR7B,UAAWA,EACXmC,8BACAR,UAAWS,EAAWC,UAAOC,QAASD,UAAOnC,GAASmC,UAAOP,kBACjD,iBAEZ/B,gBAACwC,GAAUR,UAAWA,EAAWS,UAAWrC,EAAoBsC,aAAa,GACzE1C,gBAAC2C,mDACOhC,OACJgB,GAAID,MACJkB,aAAa,OACbC,WAAW,UACXC,QAAQ,OACRC,cAAc,SACdC,SAAS,SACT7C,OAAmB,WAAXA,EAAsB,YAASD,EACvC+C,SAAqB,WAAX9C,EAAsB,EAAI,EACpCyB,UAAW,CAACL,EAA2Be,UAAOY,aAE9ClD,gBAACD,EAAaoD,UAASC,MAAOlB,GAAeD,sDA8O1BA,SAAEA,KAAatB,iCAClD,OACIX,gBAACsB,qBAA0BX,GACvBX,gBAACqD,UAAOC,MAAM,QAAQC,MAAM,SACvBtB,iDA3EmBV,0BAChCA,EADgCU,SAEhCA,KACGtB,iCAEH,MAAMR,OAAEA,GAAWH,aAAiBD,GACpC,OACIC,gBAAC0B,yCACOf,OACJiB,UAAWL,EACX0B,SAAqB,WAAX9C,EAAsB,EAAI,EACpCA,OAAmB,WAAXA,EAAsB,YAASD,EACvC8C,SAAS,SAEThD,gBAAC0B,OAAIG,QAAQ,QAAQ2B,cAAc,WAC9BvB,wHAtFqBA,SAClCA,EADkCwB,OAElCA,GAAS,EAFyBjC,YAGlCA,GAAc,EAHoBD,0BAIlCA,KACGZ,iCAEH,OACIX,gCACIA,gBAAC0B,yCACOf,OACJgB,GAAG,SACH+B,YAAY,QACZC,cAAyB,IAAXF,GAA+B,OAAXA,EAAkB,QAAU,QAC9DG,SAAS,QACThC,UAAWL,IAEXvB,gBAAC6D,WAAQN,MAAM,QAAQO,OAAO,UAC1B9D,gBAAC+D,UAAOhC,MAAM,QAAQE,IACV,IAAXwB,GAA+B,OAAXA,EACjBzD,uBAAK4B,UAAWU,UAAO0B,gBAEvBhE,gBAAC+D,UACGhC,MAAM,UACNR,0BAA2Be,UAAO2B,8BACtB,oBAEO,kBAAXR,EACJzD,gBAACU,gBACc,cACXsB,WAAW,IAGfyB,KAMnBjC,EAAcxB,gBAACyB,gBAAa"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={"reach-portal":"ad18b0a0",fadein:"f7a1b219",fitContent:"_8ed9bb5c",container:"f67e892e",full:"_4139421e",large:"_649eb5fe",medium:"_5323e676",small:"_56ca7ae6",xlarge:"a7be0fce",overlay:"_88a7a680",expand:"b29456b8",buttonContainer:"_09ef1f4f",headerContent:"_0e5b530a"};
|
|
2
|
-
//# sourceMappingURL=modal.module.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"modal.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|