@uva-glass/component-library 3.11.1 → 3.12.0
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/assets/ModalDialog.css +1 -1
- package/dist/components/ModalDialog/ModalDialog.d.ts +2 -4
- package/dist/components/ModalDialog/ModalDialog.js +58 -59
- package/dist/components/ModalDialog/ModalDialog.js.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.js +12 -13
- package/dist/components/ModalDialog/ModalDialog.stories.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
._modal-
|
|
1
|
+
._modal-dialog_f080o_1{--modal-dialog-padding: 1.5rem;--modal-dialog-padding-mobile: 1.25rem;background:var(--color-white);box-shadow:0 2px 2px #0000000f,0 4px 3px #00000012;display:flex;flex-direction:column;height:100dvh;position:relative;width:100vw}._modal-dialog--padded_f080o_18{padding:0}._modal-dialog__content_f080o_22{display:flex;flex-direction:column;height:100svh;justify-content:space-between;overflow:hidden;overflow-y:auto;padding:0 var(--modal-dialog-padding-mobile);width:100%}._modal-dialog__children_f080o_33{padding-bottom:var(--modal-dialog-padding-mobile)}._modal-dialog__title_f080o_37{font-size:var(--font-size-m);line-height:var(--line-height-m);margin:0 var(--modal-dialog-padding-mobile) 0 0;padding:var(--modal-dialog-padding-mobile)}._modal-dialog--confirm_f080o_44{padding:var(--modal-dialog-padding-mobile) 0 0}._modal-dialog__buttons_f080o_48{background-color:var(--color-white);bottom:0;display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;margin:0 calc(-1 * var(--modal-dialog-padding-mobile));padding:var(--modal-dialog-padding-mobile);position:sticky;right:0}._modal-dialog__buttons--border_f080o_61{border-top:1px solid var(--color-pattens-blue)}._modal-dialog__buttons_f080o_48:before{background:linear-gradient(to top,#0000004d,#0000);bottom:100%;content:"";height:10px;left:0;opacity:0;pointer-events:none;position:absolute;right:0;transition:opacity .4s ease-out}._modal-dialog__buttons--shadow_f080o_78:before{opacity:1}._modal-dialog__close_f080o_82{position:absolute;right:var(--modal-dialog-padding-mobile);top:var(--modal-dialog-padding-mobile)}@media (min-width: 28rem) and (min-height: 28rem){._modal-dialog_f080o_1{height:unset;max-height:100svh;max-width:100vw}._modal-dialog--padded_f080o_18{width:34.25rem}._modal-dialog--small_f080o_99{width:27.5rem}._modal-dialog--regular_f080o_103{width:30rem}._modal-dialog--medium_f080o_107{width:36rem}._modal-dialog--large_f080o_111{width:65.375rem}._modal-dialog__title_f080o_37{margin-right:var(--modal-dialog-padding);padding:var(--modal-dialog-padding)}._modal-dialog__content_f080o_22{height:unset;padding:0 var(--modal-dialog-padding)}._modal-dialog--content-with-buttons_f080o_125{margin-bottom:5.75rem}._modal-dialog__children_f080o_33{padding-bottom:var(--modal-dialog-padding)}._modal-dialog--confirm_f080o_44{padding:var(--modal-dialog-padding) 0 0}._modal-dialog__buttons_f080o_48{margin:unset;padding:var(--modal-dialog-padding);position:absolute;width:inherit}._modal-dialog__close_f080o_82{position:absolute;right:var(--modal-dialog-padding);top:var(--modal-dialog-padding)}}
|
|
@@ -31,10 +31,8 @@ export interface ModalDialogProps {
|
|
|
31
31
|
variant?: 'confirm' | 'dialog';
|
|
32
32
|
/** `true` to add padding to the dialog; otherwise, `false`. The default is `false`. */
|
|
33
33
|
padded?: boolean;
|
|
34
|
-
/**
|
|
35
|
-
|
|
36
|
-
/** `true` to display the dialog in a wider form; otherwise, `false`. The default is `false`. */
|
|
37
|
-
wide?: boolean;
|
|
34
|
+
/** Size of the dialog. */
|
|
35
|
+
size?: 'small' | 'regular' | 'medium' | 'large';
|
|
38
36
|
/** `true` to show a border between the main content of the dialog and the buttons; otherwise, `false`. The default is `false`. */
|
|
39
37
|
noButtonBorder?: boolean;
|
|
40
38
|
}
|
|
@@ -1,37 +1,39 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useDialog as
|
|
3
|
-
import { FocusScope as
|
|
4
|
-
import { useModal as
|
|
5
|
-
import { c as
|
|
6
|
-
import { useRef as
|
|
7
|
-
import { Backdrop as
|
|
8
|
-
import { OverlayCloseButton as
|
|
9
|
-
import { Spinner as
|
|
1
|
+
import { jsx as a, Fragment as S, jsxs as _ } from "react/jsx-runtime";
|
|
2
|
+
import { useDialog as $ } from "@react-aria/dialog";
|
|
3
|
+
import { FocusScope as q } from "@react-aria/focus";
|
|
4
|
+
import { useModal as G, useOverlay as J, usePreventScroll as Q, OverlayContainer as W } from "@react-aria/overlays";
|
|
5
|
+
import { c as i } from "../../clsx-OuTLNxxd.js";
|
|
6
|
+
import { useRef as w, useState as T, useEffect as X } from "react";
|
|
7
|
+
import { Backdrop as Y } from "../Backdrop/Backdrop.js";
|
|
8
|
+
import { OverlayCloseButton as Z } from "../OverlayCloseButton/OverlayCloseButton.js";
|
|
9
|
+
import { Spinner as oo } from "../Spinner/Spinner.js";
|
|
10
10
|
import '../../assets/ModalDialog.css';const o = {
|
|
11
|
-
"modal-dialog": "_modal-
|
|
12
|
-
"modal-dialog--padded": "_modal-dialog--
|
|
13
|
-
"modal-dialog__content": "_modal-
|
|
14
|
-
"modal-dialog__children": "_modal-
|
|
15
|
-
"modal-dialog__title": "_modal-
|
|
16
|
-
"modal-dialog--confirm": "_modal-dialog--
|
|
17
|
-
"modal-dialog__buttons": "_modal-
|
|
18
|
-
"modal-dialog__buttons--border": "_modal-dialog__buttons--
|
|
19
|
-
"modal-dialog__buttons--shadow": "_modal-dialog__buttons--
|
|
20
|
-
"modal-dialog__close": "_modal-
|
|
21
|
-
"modal-dialog--
|
|
22
|
-
"modal-dialog--
|
|
23
|
-
"modal-dialog--
|
|
11
|
+
"modal-dialog": "_modal-dialog_f080o_1",
|
|
12
|
+
"modal-dialog--padded": "_modal-dialog--padded_f080o_18",
|
|
13
|
+
"modal-dialog__content": "_modal-dialog__content_f080o_22",
|
|
14
|
+
"modal-dialog__children": "_modal-dialog__children_f080o_33",
|
|
15
|
+
"modal-dialog__title": "_modal-dialog__title_f080o_37",
|
|
16
|
+
"modal-dialog--confirm": "_modal-dialog--confirm_f080o_44",
|
|
17
|
+
"modal-dialog__buttons": "_modal-dialog__buttons_f080o_48",
|
|
18
|
+
"modal-dialog__buttons--border": "_modal-dialog__buttons--border_f080o_61",
|
|
19
|
+
"modal-dialog__buttons--shadow": "_modal-dialog__buttons--shadow_f080o_78",
|
|
20
|
+
"modal-dialog__close": "_modal-dialog__close_f080o_82",
|
|
21
|
+
"modal-dialog--small": "_modal-dialog--small_f080o_99",
|
|
22
|
+
"modal-dialog--regular": "_modal-dialog--regular_f080o_103",
|
|
23
|
+
"modal-dialog--medium": "_modal-dialog--medium_f080o_107",
|
|
24
|
+
"modal-dialog--large": "_modal-dialog--large_f080o_111",
|
|
25
|
+
"modal-dialog--content-with-buttons": "_modal-dialog--content-with-buttons_f080o_125"
|
|
24
26
|
};
|
|
25
27
|
function _o(y) {
|
|
26
28
|
const {
|
|
27
|
-
buttons:
|
|
29
|
+
buttons: t,
|
|
28
30
|
children: x,
|
|
29
|
-
isDismissable:
|
|
30
|
-
isKeyboardDismissDisabled: B = !
|
|
31
|
+
isDismissable: c = !0,
|
|
32
|
+
isKeyboardDismissDisabled: B = !c,
|
|
31
33
|
isLoading: D,
|
|
32
34
|
spinnerAriaValueText: P = "Loading",
|
|
33
35
|
closeButtonAriaValueText: C = "Close",
|
|
34
|
-
isOpen:
|
|
36
|
+
isOpen: e,
|
|
35
37
|
noValidate: E = !1,
|
|
36
38
|
onClose: g,
|
|
37
39
|
onSubmit: L,
|
|
@@ -40,56 +42,53 @@ function _o(y) {
|
|
|
40
42
|
headerContent: s,
|
|
41
43
|
variant: n = "dialog",
|
|
42
44
|
padded: u,
|
|
43
|
-
|
|
44
|
-
wide: H,
|
|
45
|
+
size: z = "regular",
|
|
45
46
|
noButtonBorder: f = !1
|
|
46
|
-
} = y, m =
|
|
47
|
-
{ isDismissable:
|
|
47
|
+
} = y, m = w(null), p = w(null), [F, H] = T(!1), [O, V] = T(!1), { dialogProps: k, titleProps: A } = $({ role: N }, m), { modalProps: I } = G({ isDisabled: !e }), { overlayProps: M, underlayProps: R } = J(
|
|
48
|
+
{ isDismissable: c, isKeyboardDismissDisabled: B, isOpen: e, onClose: g },
|
|
48
49
|
m
|
|
49
50
|
);
|
|
50
|
-
|
|
51
|
+
Q({ isDisabled: !e }), X(() => {
|
|
51
52
|
const l = p.current;
|
|
52
53
|
function h() {
|
|
53
54
|
if (l) {
|
|
54
|
-
const
|
|
55
|
-
|
|
55
|
+
const b = l.scrollHeight, v = l.clientHeight, U = l.scrollTop;
|
|
56
|
+
H(b > v), V(U + v >= b);
|
|
56
57
|
}
|
|
57
58
|
}
|
|
58
|
-
function
|
|
59
|
+
function d() {
|
|
59
60
|
h();
|
|
60
61
|
}
|
|
61
|
-
l && (l.addEventListener("scroll",
|
|
62
|
-
const
|
|
62
|
+
l && (l.addEventListener("scroll", d), window.addEventListener("resize", d));
|
|
63
|
+
const K = setTimeout(() => {
|
|
63
64
|
h();
|
|
64
65
|
}, 0);
|
|
65
66
|
return () => {
|
|
66
|
-
l && l.removeEventListener("scroll",
|
|
67
|
+
l && l.removeEventListener("scroll", d), window.removeEventListener("resize", d), clearTimeout(K);
|
|
67
68
|
};
|
|
68
|
-
}, [
|
|
69
|
-
function
|
|
69
|
+
}, [e, s]);
|
|
70
|
+
function j(l) {
|
|
70
71
|
l.stopPropagation();
|
|
71
72
|
}
|
|
72
|
-
return
|
|
73
|
+
return e ? /* @__PURE__ */ a(W, { children: /* @__PURE__ */ a(Y, { ...R, children: D ? /* @__PURE__ */ a(oo, { ariaValueText: P }) : /* @__PURE__ */ a(S, { children: /* @__PURE__ */ a(q, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ _(
|
|
73
74
|
"div",
|
|
74
75
|
{
|
|
75
|
-
...
|
|
76
|
+
...k,
|
|
77
|
+
...I,
|
|
76
78
|
...M,
|
|
77
|
-
|
|
78
|
-
className: t(o["modal-dialog"], {
|
|
79
|
+
className: i(o["modal-dialog"], [o[`modal-dialog--${z}`]], {
|
|
79
80
|
[o["modal-dialog--confirm"]]: n === "confirm",
|
|
80
|
-
[o["modal-dialog--padded"]]: u
|
|
81
|
-
[o["modal-dialog--slim"]]: F,
|
|
82
|
-
[o["modal-dialog--wide"]]: H
|
|
81
|
+
[o["modal-dialog--padded"]]: u
|
|
83
82
|
}),
|
|
84
|
-
onKeyUp:
|
|
83
|
+
onKeyUp: j,
|
|
85
84
|
role: "presentation",
|
|
86
85
|
ref: m,
|
|
87
86
|
children: [
|
|
88
|
-
(r || s) && n === "dialog" && /* @__PURE__ */
|
|
89
|
-
r && /* @__PURE__ */
|
|
87
|
+
(r || s) && n === "dialog" && /* @__PURE__ */ _(S, { children: [
|
|
88
|
+
r && /* @__PURE__ */ a("h1", { ...A, className: o["modal-dialog__title"], children: r }),
|
|
90
89
|
s,
|
|
91
|
-
n === "dialog" && /* @__PURE__ */
|
|
92
|
-
|
|
90
|
+
n === "dialog" && /* @__PURE__ */ a("span", { className: o["modal-dialog__close"], children: /* @__PURE__ */ a(
|
|
91
|
+
Z,
|
|
93
92
|
{
|
|
94
93
|
"aria-label": C,
|
|
95
94
|
onClick: g,
|
|
@@ -97,25 +96,25 @@ function _o(y) {
|
|
|
97
96
|
}
|
|
98
97
|
) })
|
|
99
98
|
] }),
|
|
100
|
-
/* @__PURE__ */
|
|
99
|
+
/* @__PURE__ */ _(
|
|
101
100
|
"form",
|
|
102
101
|
{
|
|
103
|
-
className:
|
|
104
|
-
[o["modal-dialog--content-with-buttons"]]:
|
|
102
|
+
className: i(o["modal-dialog__content"], {
|
|
103
|
+
[o["modal-dialog--content-with-buttons"]]: t
|
|
105
104
|
}),
|
|
106
105
|
onSubmit: L,
|
|
107
106
|
noValidate: E,
|
|
108
107
|
ref: p,
|
|
109
108
|
children: [
|
|
110
|
-
/* @__PURE__ */
|
|
111
|
-
|
|
109
|
+
/* @__PURE__ */ a("div", { className: i({ [o["modal-dialog__children"]]: !f }), children: x }),
|
|
110
|
+
t && /* @__PURE__ */ a(
|
|
112
111
|
"div",
|
|
113
112
|
{
|
|
114
|
-
className:
|
|
113
|
+
className: i(o["modal-dialog__buttons"], {
|
|
115
114
|
[o["modal-dialog__buttons--border"]]: !f,
|
|
116
|
-
[o["modal-dialog__buttons--shadow"]]:
|
|
115
|
+
[o["modal-dialog__buttons--shadow"]]: F && !O
|
|
117
116
|
}),
|
|
118
|
-
children:
|
|
117
|
+
children: t
|
|
119
118
|
}
|
|
120
119
|
)
|
|
121
120
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalDialog.js","sources":["../../../src/components/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport classNames from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\nimport type { AriaDialogProps } from '@react-types/dialog';\n\nimport styles from './ModalDialog.module.css';\n\nimport { Backdrop } from 'components/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface ModalDialogProps {\n /** The buttons of the dialog. */\n buttons?: ReactNode;\n /** `true` if the dialog can be closed by clicking outside of it; otherwise, `false`. The default is `false`. */\n isDismissable?: boolean;\n /** `true` to disable closing the dialog with the keyboard; otherwise, `false`. The default is `false`. */\n isKeyboardDismissDisabled?: boolean;\n /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. The default is `false`. */\n isLoading?: boolean;\n /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. The default is `'Loading'` Used together with `isLoading`. */\n spinnerAriaValueText?: string;\n /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. The default is `'Close'` */\n closeButtonAriaValueText?: string;\n /** `true` to render the dialog opened; otherwise, `false`. The default is `false`. */\n isOpen: boolean;\n /** `true` to disable form validation; otherwise, `false`. The default is `false`. */\n noValidate?: boolean;\n /** The callback function that is invoked when the dialog is closed. */\n onClose?(): void;\n /** The callback function that is invoked when the form is submitted. */\n onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n /** The `aria-role` value of the dialog. Possible values are `'dialog'`, `'alertdialog'`. The default is `'dialog'`. */\n role?: AriaDialogProps['role'];\n /** The title of the dialog. */\n title?: string;\n /** The contents of the dialog header. */\n headerContent?: ReactNode;\n /** The variant of the dialog. */\n variant?: 'confirm' | 'dialog';\n /** `true` to add padding to the dialog; otherwise, `false`. The default is `false`. */\n padded?: boolean;\n /** `true` to display the dialog in a slimmer form; otherwise, `false`. The default is `false`. */\n slim?: boolean;\n /** `true` to display the dialog in a wider form; otherwise, `false`. The default is `false`. */\n wide?: boolean;\n /** `true` to show a border between the main content of the dialog and the buttons; otherwise, `false`. The default is `false`. */\n noButtonBorder?: boolean;\n}\n\n/** Represents a component for a modal dialog. */\nexport function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {\n const {\n buttons,\n children,\n isDismissable = true,\n isKeyboardDismissDisabled = !isDismissable,\n isLoading,\n spinnerAriaValueText = 'Loading',\n closeButtonAriaValueText = 'Close',\n isOpen,\n noValidate = false,\n onClose,\n onSubmit,\n role = 'dialog',\n title,\n headerContent,\n variant = 'dialog',\n padded,\n slim,\n wide,\n noButtonBorder = false,\n } = props;\n\n const ref = useRef<HTMLDivElement>(null);\n const formRef = useRef<HTMLFormElement>(null);\n const [isScrollable, setIsScrollable] = useState(false);\n const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n const { dialogProps, titleProps } = useDialog({ role }, ref);\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const { overlayProps, underlayProps } = useOverlay(\n { isDismissable, isKeyboardDismissDisabled, isOpen, onClose },\n ref\n );\n\n usePreventScroll({ isDisabled: !isOpen });\n\n useEffect(() => {\n const formElement = formRef.current;\n\n function checkScrollable() {\n if (formElement) {\n const scrollHeight = formElement.scrollHeight;\n const clientHeight = formElement.clientHeight;\n const scrollTop = formElement.scrollTop;\n\n setIsScrollable(scrollHeight > clientHeight);\n setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n }\n }\n\n function handleScrollAndResize() {\n checkScrollable();\n }\n\n if (formElement) {\n formElement.addEventListener('scroll', handleScrollAndResize);\n window.addEventListener('resize', handleScrollAndResize);\n }\n\n const timeoutId = setTimeout(() => {\n checkScrollable();\n }, 0);\n\n return () => {\n if (formElement) {\n formElement.removeEventListener('scroll', handleScrollAndResize);\n }\n window.removeEventListener('resize', handleScrollAndResize);\n clearTimeout(timeoutId);\n };\n }, [isOpen, headerContent]);\n\n function onKeyUp(event: KeyboardEvent) {\n event.stopPropagation();\n }\n\n if (!isOpen) return null;\n\n return (\n <OverlayContainer>\n <Backdrop {...underlayProps}>\n {isLoading ? (\n <Spinner ariaValueText={spinnerAriaValueText} />\n ) : (\n <>\n {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n <FocusScope autoFocus contain restoreFocus>\n <div\n {...dialogProps}\n {...modalProps}\n {...overlayProps}\n className={classNames(styles['modal-dialog'], {\n [styles['modal-dialog--confirm']]: variant === 'confirm',\n [styles['modal-dialog--padded']]: padded,\n [styles['modal-dialog--slim']]: slim,\n [styles['modal-dialog--wide']]: wide,\n })}\n onKeyUp={onKeyUp}\n role=\"presentation\"\n ref={ref}\n >\n {(title || headerContent) && variant === 'dialog' && (\n <>\n {title && (\n <h1 {...titleProps} className={styles['modal-dialog__title']}>\n {title}\n </h1>\n )}\n {headerContent}\n {variant === 'dialog' && (\n <span className={styles['modal-dialog__close']}>\n <OverlayCloseButton\n aria-label={closeButtonAriaValueText}\n onClick={onClose}\n paddedModal={padded}\n />\n </span>\n )}\n </>\n )}\n <form\n className={classNames(styles['modal-dialog__content'], {\n [styles['modal-dialog--content-with-buttons']]: buttons,\n })}\n onSubmit={onSubmit}\n noValidate={noValidate}\n ref={formRef}\n >\n <div className={classNames({ [styles['modal-dialog__children']]: !noButtonBorder })}>{children}</div>\n {buttons && (\n <div\n className={classNames(styles['modal-dialog__buttons'], {\n [styles['modal-dialog__buttons--border']]: !noButtonBorder,\n [styles['modal-dialog__buttons--shadow']]: isScrollable && !isScrolledToBottom,\n })}\n >\n {buttons}\n </div>\n )}\n </form>\n </div>\n </FocusScope>\n </>\n )}\n </Backdrop>\n </OverlayContainer>\n );\n}\n"],"names":["ModalDialog","props","buttons","children","isDismissable","isKeyboardDismissDisabled","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","role","title","headerContent","variant","padded","slim","wide","noButtonBorder","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","Backdrop","Spinner","Fragment","FocusScope","jsxs","classNames","styles","OverlayCloseButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModalDialog.js","sources":["../../../src/components/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\nimport type { AriaDialogProps } from '@react-types/dialog';\n\nimport styles from './ModalDialog.module.css';\n\nimport { Backdrop } from 'components/Backdrop';\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface ModalDialogProps {\n /** The buttons of the dialog. */\n buttons?: ReactNode;\n /** `true` if the dialog can be closed by clicking outside of it; otherwise, `false`. The default is `false`. */\n isDismissable?: boolean;\n /** `true` to disable closing the dialog with the keyboard; otherwise, `false`. The default is `false`. */\n isKeyboardDismissDisabled?: boolean;\n /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. The default is `false`. */\n isLoading?: boolean;\n /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. The default is `'Loading'` Used together with `isLoading`. */\n spinnerAriaValueText?: string;\n /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. The default is `'Close'` */\n closeButtonAriaValueText?: string;\n /** `true` to render the dialog opened; otherwise, `false`. The default is `false`. */\n isOpen: boolean;\n /** `true` to disable form validation; otherwise, `false`. The default is `false`. */\n noValidate?: boolean;\n /** The callback function that is invoked when the dialog is closed. */\n onClose?(): void;\n /** The callback function that is invoked when the form is submitted. */\n onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];\n /** The `aria-role` value of the dialog. Possible values are `'dialog'`, `'alertdialog'`. The default is `'dialog'`. */\n role?: AriaDialogProps['role'];\n /** The title of the dialog. */\n title?: string;\n /** The contents of the dialog header. */\n headerContent?: ReactNode;\n /** The variant of the dialog. */\n variant?: 'confirm' | 'dialog';\n /** `true` to add padding to the dialog; otherwise, `false`. The default is `false`. */\n padded?: boolean;\n /** Size of the dialog. */\n size?: 'small' | 'regular' | 'medium' | 'large';\n /** `true` to show a border between the main content of the dialog and the buttons; otherwise, `false`. The default is `false`. */\n noButtonBorder?: boolean;\n}\n\n/** Represents a component for a modal dialog. */\nexport function ModalDialog(props: PropsWithChildren<ModalDialogProps>) {\n const {\n buttons,\n children,\n isDismissable = true,\n isKeyboardDismissDisabled = !isDismissable,\n isLoading,\n spinnerAriaValueText = 'Loading',\n closeButtonAriaValueText = 'Close',\n isOpen,\n noValidate = false,\n onClose,\n onSubmit,\n role = 'dialog',\n title,\n headerContent,\n variant = 'dialog',\n padded,\n size = 'regular',\n noButtonBorder = false,\n } = props;\n\n const ref = useRef<HTMLDivElement>(null);\n const formRef = useRef<HTMLFormElement>(null);\n const [isScrollable, setIsScrollable] = useState(false);\n const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n const { dialogProps, titleProps } = useDialog({ role }, ref);\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const { overlayProps, underlayProps } = useOverlay(\n { isDismissable, isKeyboardDismissDisabled, isOpen, onClose },\n ref\n );\n\n usePreventScroll({ isDisabled: !isOpen });\n\n useEffect(() => {\n const formElement = formRef.current;\n\n function checkScrollable() {\n if (formElement) {\n const scrollHeight = formElement.scrollHeight;\n const clientHeight = formElement.clientHeight;\n const scrollTop = formElement.scrollTop;\n\n setIsScrollable(scrollHeight > clientHeight);\n setIsScrolledToBottom(scrollTop + clientHeight >= scrollHeight);\n }\n }\n\n function handleScrollAndResize() {\n checkScrollable();\n }\n\n if (formElement) {\n formElement.addEventListener('scroll', handleScrollAndResize);\n window.addEventListener('resize', handleScrollAndResize);\n }\n\n const timeoutId = setTimeout(() => {\n checkScrollable();\n }, 0);\n\n return () => {\n if (formElement) {\n formElement.removeEventListener('scroll', handleScrollAndResize);\n }\n window.removeEventListener('resize', handleScrollAndResize);\n clearTimeout(timeoutId);\n };\n }, [isOpen, headerContent]);\n\n function onKeyUp(event: KeyboardEvent) {\n event.stopPropagation();\n }\n\n if (!isOpen) return null;\n\n return (\n <OverlayContainer>\n <Backdrop {...underlayProps}>\n {isLoading ? (\n <Spinner ariaValueText={spinnerAriaValueText} />\n ) : (\n <>\n {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n <FocusScope autoFocus contain restoreFocus>\n <div\n {...dialogProps}\n {...modalProps}\n {...overlayProps}\n className={clsx(styles['modal-dialog'], [styles[`modal-dialog--${size}`]], {\n [styles['modal-dialog--confirm']]: variant === 'confirm',\n [styles['modal-dialog--padded']]: padded,\n })}\n onKeyUp={onKeyUp}\n role=\"presentation\"\n ref={ref}\n >\n {(title || headerContent) && variant === 'dialog' && (\n <>\n {title && (\n <h1 {...titleProps} className={styles['modal-dialog__title']}>\n {title}\n </h1>\n )}\n {headerContent}\n {variant === 'dialog' && (\n <span className={styles['modal-dialog__close']}>\n <OverlayCloseButton\n aria-label={closeButtonAriaValueText}\n onClick={onClose}\n paddedModal={padded}\n />\n </span>\n )}\n </>\n )}\n <form\n className={clsx(styles['modal-dialog__content'], {\n [styles['modal-dialog--content-with-buttons']]: buttons,\n })}\n onSubmit={onSubmit}\n noValidate={noValidate}\n ref={formRef}\n >\n <div className={clsx({ [styles['modal-dialog__children']]: !noButtonBorder })}>{children}</div>\n {buttons && (\n <div\n className={clsx(styles['modal-dialog__buttons'], {\n [styles['modal-dialog__buttons--border']]: !noButtonBorder,\n [styles['modal-dialog__buttons--shadow']]: isScrollable && !isScrolledToBottom,\n })}\n >\n {buttons}\n </div>\n )}\n </form>\n </div>\n </FocusScope>\n </>\n )}\n </Backdrop>\n </OverlayContainer>\n );\n}\n"],"names":["ModalDialog","props","buttons","children","isDismissable","isKeyboardDismissDisabled","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","role","title","headerContent","variant","padded","size","noButtonBorder","ref","useRef","formRef","isScrollable","setIsScrollable","useState","isScrolledToBottom","setIsScrolledToBottom","dialogProps","titleProps","useDialog","modalProps","useModal","overlayProps","underlayProps","useOverlay","usePreventScroll","useEffect","formElement","checkScrollable","scrollHeight","clientHeight","scrollTop","handleScrollAndResize","timeoutId","onKeyUp","event","jsx","OverlayContainer","Backdrop","Spinner","Fragment","FocusScope","jsxs","clsx","styles","OverlayCloseButton"],"mappings":"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"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { ModalProvider as
|
|
2
|
+
import { ModalProvider as r } from "@react-aria/overlays";
|
|
3
3
|
import { fn as i } from "../../index-BCvy9BiK.js";
|
|
4
4
|
import { ModalDialog as t } from "./ModalDialog.js";
|
|
5
|
-
import { Button as
|
|
5
|
+
import { Button as s } from "../Buttons/Button.js";
|
|
6
6
|
import "../Buttons/LinkButton.js";
|
|
7
7
|
import "@react-aria/button";
|
|
8
8
|
import { ButtonGroup as m } from "../ButtonGroup/ButtonGroup.js";
|
|
9
|
-
import { FormField as
|
|
9
|
+
import { FormField as l } from "../FormField/FormField.js";
|
|
10
10
|
import { InputField as d } from "../InputField/InputField.js";
|
|
11
11
|
import { Label as c } from "../Label/Label.js";
|
|
12
12
|
const p = `
|
|
@@ -50,13 +50,12 @@ const p = `
|
|
|
50
50
|
inspectComponent: t,
|
|
51
51
|
codeString: p
|
|
52
52
|
}
|
|
53
|
-
}, u = (o) => /* @__PURE__ */ e(
|
|
53
|
+
}, u = (o) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(t, { ...o, children: /* @__PURE__ */ a(l, { outerSpace: !0, children: [
|
|
54
54
|
/* @__PURE__ */ e(c, { htmlFor: "text-field", children: "Example Text Field" }),
|
|
55
55
|
/* @__PURE__ */ e(d, { id: "text-field" })
|
|
56
|
-
] }) }) }),
|
|
56
|
+
] }) }) }), n = {
|
|
57
57
|
padded: !1,
|
|
58
|
-
|
|
59
|
-
wide: !1,
|
|
58
|
+
size: "regular",
|
|
60
59
|
noButtonBorder: !1,
|
|
61
60
|
variant: "dialog",
|
|
62
61
|
role: "dialog",
|
|
@@ -66,26 +65,26 @@ const p = `
|
|
|
66
65
|
onSubmit: i(),
|
|
67
66
|
onClose: i(),
|
|
68
67
|
buttons: /* @__PURE__ */ a(m, { reversed: !0, children: [
|
|
69
|
-
/* @__PURE__ */ e(
|
|
70
|
-
/* @__PURE__ */ e(
|
|
68
|
+
/* @__PURE__ */ e(s, { variant: "primary", onClick: i(), children: "OK" }),
|
|
69
|
+
/* @__PURE__ */ e(s, { variant: "secondary", onClick: i(), children: "Cancel" })
|
|
71
70
|
] }),
|
|
72
71
|
isOpen: !0
|
|
73
72
|
}, b = u.bind({});
|
|
74
73
|
b.args = {
|
|
75
|
-
...
|
|
74
|
+
...n
|
|
76
75
|
};
|
|
77
76
|
const g = u.bind({});
|
|
78
77
|
g.args = {
|
|
79
|
-
...
|
|
78
|
+
...n,
|
|
80
79
|
isLoading: !0,
|
|
81
80
|
spinnerAriaValueText: "Loading"
|
|
82
81
|
};
|
|
83
|
-
const f = (o) => /* @__PURE__ */ e(
|
|
82
|
+
const f = (o) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(t, { ...o, children: /* @__PURE__ */ a(l, { outerSpace: !0, children: [
|
|
84
83
|
/* @__PURE__ */ e("div", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla. Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod. Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae ultrices erat." }),
|
|
85
84
|
/* @__PURE__ */ e("div", { children: "Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non, vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut sapien tempor, a ornare ipsum faucibus." })
|
|
86
85
|
] }) }) }), h = f.bind({});
|
|
87
86
|
h.args = {
|
|
88
|
-
...
|
|
87
|
+
...n,
|
|
89
88
|
noButtonBorder: !0
|
|
90
89
|
};
|
|
91
90
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Buttons';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\nconst codeString = `\n/* ModalDialog has more styling props (see Info-tab).\n Code example is made with the most commonly used props. **/\n <ModalDialog isOpen={isOpen} title={title} onClose={onCloseFunction}\n onSubmit={onSubmitFunction} buttons={buttons}> {children} </ModalDialog>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/ModalDialog',\n component: ModalDialog,\n argTypes: {\n isOpen: {\n table: {\n disable: true,\n },\n },\n noValidate: {\n control: 'boolean',\n },\n role: {\n control: 'radio',\n options: ['dialog', 'alertdialog'],\n },\n onSubmit: {\n table: {\n disable: true,\n },\n },\n onClose: {\n table: {\n disable: true,\n },\n },\n buttons: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: ModalDialog,\n codeString: codeString,\n },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <Label htmlFor=\"text-field\">Example Text Field</Label>\n <InputField id=\"text-field\" />\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n padded: false,\n
|
|
1
|
+
{"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Buttons';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\nconst codeString = `\n/* ModalDialog has more styling props (see Info-tab).\n Code example is made with the most commonly used props. **/\n <ModalDialog isOpen={isOpen} title={title} onClose={onCloseFunction}\n onSubmit={onSubmitFunction} buttons={buttons}> {children} </ModalDialog>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/ModalDialog',\n component: ModalDialog,\n argTypes: {\n isOpen: {\n table: {\n disable: true,\n },\n },\n noValidate: {\n control: 'boolean',\n },\n role: {\n control: 'radio',\n options: ['dialog', 'alertdialog'],\n },\n onSubmit: {\n table: {\n disable: true,\n },\n },\n onClose: {\n table: {\n disable: true,\n },\n },\n buttons: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: ModalDialog,\n codeString: codeString,\n },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <Label htmlFor=\"text-field\">Example Text Field</Label>\n <InputField id=\"text-field\" />\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n padded: false,\n size: 'regular',\n noButtonBorder: false,\n variant: 'dialog',\n role: 'dialog',\n title: 'Example Title',\n closeButtonAriaValueText: 'Close',\n noValidate: false,\n onSubmit: fn(),\n onClose: fn(),\n buttons: (\n <ButtonGroup reversed>\n <Button variant=\"primary\" onClick={fn()}>\n OK\n </Button>\n <Button variant=\"secondary\" onClick={fn()}>\n Cancel\n </Button>\n </ButtonGroup>\n ),\n isOpen: true,\n};\n\nexport const ModalDialogExample = Template.bind({});\nModalDialogExample.args = {\n ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n ...defaultArgs,\n isLoading: true,\n spinnerAriaValueText: 'Loading',\n};\n\nconst LongContentTemplate: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla.\n Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut\n fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod.\n Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet\n dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac\n molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit\n consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus\n neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae\n ultrices erat.\n </div>\n <div>\n Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam\n porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac\n diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non,\n vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut\n sapien tempor, a ornare ipsum faucibus.\n </div>\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nexport const WithLongContentAndNoBorder = LongContentTemplate.bind({});\nWithLongContentAndNoBorder.args = {\n ...defaultArgs,\n noButtonBorder: true,\n};\n"],"names":["codeString","ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading","LongContentTemplate","WithLongContentAndNoBorder"],"mappings":";;;;;;;;;;;AAcA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA,GAQJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,aAAa;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,cAAa,UAAkB,sBAAA;AAAA,EAC9C,gBAAAJ,EAACK,GAAW,EAAA,IAAG,aAAa,CAAA;AAAA,EAC9B,CAAA,EACF,CAAA,GACF,GAGIC,IAAyC;AAAA,EAC7C,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,0BAA0B;AAAA,EAC1B,YAAY;AAAA,EACZ,UAAUC,EAAG;AAAA,EACb,SAASA,EAAG;AAAA,EACZ,SACE,gBAAAL,EAACM,GAAY,EAAA,UAAQ,IACnB,UAAA;AAAA,IAAA,gBAAAR,EAACS,KAAO,SAAQ,WAAU,SAASF,KAAM,UAEzC,MAAA;AAAA,sBACCE,GAAO,EAAA,SAAQ,aAAY,SAASF,EAAA,GAAM,UAE3C,SAAA,CAAA;AAAA,EAAA,GACF;AAAA,EAEF,QAAQ;AACV,GAEaG,IAAqBZ,EAAS,KAAK,CAAE,CAAA;AAClDY,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;AAEO,MAAMK,IAAUb,EAAS,KAAK,CAAE,CAAA;AACvCa,EAAQ,OAAO;AAAA,EACb,GAAGL;AAAA,EACH,WAAW;AAAA,EACX,sBAAsB;AACxB;AAEA,MAAMM,IAAiD,CAACb,MACtD,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAA,gBAAAH,EAAC,SAAI,UAWL,88BAAA,CAAA;AAAA,EACA,gBAAAA,EAAC,SAAI,UAML,4dAAA,CAAA;AAAA,EACF,CAAA,EACF,CAAA,GACF,GAGWa,IAA6BD,EAAoB,KAAK,CAAE,CAAA;AACrEC,EAA2B,OAAO;AAAA,EAChC,GAAGP;AAAA,EACH,gBAAgB;AAClB;"}
|