@uva-glass/component-library 3.12.0 → 3.14.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/InputField.css +1 -1
- package/dist/assets/PageOverlay.css +1 -1
- package/dist/assets/variables.css +3 -3
- package/dist/components/InputField/InputField.d.ts +5 -3
- package/dist/components/InputField/InputField.js +41 -37
- package/dist/components/InputField/InputField.js.map +1 -1
- package/dist/components/InputField/InputField.stories.js +25 -17
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/PageOverlay/PageOverlay.d.ts +3 -1
- package/dist/components/PageOverlay/PageOverlay.js +61 -55
- package/dist/components/PageOverlay/PageOverlay.js.map +1 -1
- package/package.json +10 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
._input-field-
|
|
1
|
+
._input-field-wrapper_z4v9l_1{align-items:center;display:flex;position:relative}._input-field_z4v9l_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:1px solid;border-radius:.5rem;color:var(--color-black);flex:1;font-family:inherit;font-size:inherit;height:2.75rem;margin:0;padding:0 1rem;text-align:inherit}._input-field--large_z4v9l_22{height:3rem}._input-field--small_z4v9l_26{max-width:5.25rem}._input-field--compact_z4v9l_30{max-width:6.25rem}._input-field--white_z4v9l_34{background-color:var(--color-white)}._input-field_z4v9l_1:disabled{color:var(--color-scarpa-flow)}._input-field__clear-button_z4v9l_42{align-items:center;background:none;border:none;cursor:pointer;display:flex;height:100%;padding:0 1rem 0 .5rem;position:absolute;right:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._page-
|
|
1
|
+
._page-overlay__container_mxs4k_1{bottom:0;left:0;position:fixed;right:0;top:0;z-index:50}._page-overlay_mxs4k_1{background:var(--color-white);display:flex;flex-direction:column;height:100dvh}._page-overlay--full-screen_mxs4k_19{width:100vw}._page-overlay--with-gutters_mxs4k_23{margin:0 .75rem;max-width:87.5rem;width:100%}._page-overlay__content_mxs4k_29{background-color:var(--color-grey-100);display:flex;flex-direction:column;height:100svh;justify-content:space-between;overflow:hidden;overflow-y:auto;padding:0 1.5rem;width:100%}._page-overlay__children_mxs4k_41{padding-bottom:1rem}._page-overlay__title_mxs4k_45{font-size:var(--font-size-s);line-height:var(--line-height-m);margin:0 1.5rem 0 0;padding:1rem 1.5rem}._page-overlay__buttons-bar_mxs4k_52{background-color:var(--color-white);bottom:0;display:flex;flex-direction:column;gap:.75rem;justify-content:flex-start;margin:0 -1.5rem;padding:.5rem 1rem;position:sticky;right:0}._page-overlay__buttons-bar_mxs4k_52: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}._page-overlay__buttons-bar--shadow_mxs4k_78:before{opacity:1}._page-overlay__close_mxs4k_82{position:relative;right:1rem;bottom:2.625rem}
|
|
@@ -41,9 +41,9 @@
|
|
|
41
41
|
--color-amour: #ffe5ec;
|
|
42
42
|
--color-dandelion: #ffde66;
|
|
43
43
|
--color-natural-wood: #fff6d6;
|
|
44
|
-
--color-uva-black: #
|
|
44
|
+
--color-uva-black: #1F1D20;
|
|
45
45
|
--color-uva-red-transparent: rgba(189 0 50 / 10%);
|
|
46
|
-
--color-electric-violet: #
|
|
46
|
+
--color-electric-violet: #9747FF;
|
|
47
47
|
--color-lemon-grass: #99998a;
|
|
48
48
|
--color-vista-blue: #8feabb;
|
|
49
49
|
--color-medium-aquamarine: #62df9f;
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
--color-columbia-blue: #a1e7fc;
|
|
54
54
|
--color-light-cyan: #e1f8ff;
|
|
55
55
|
--color-lavender-transparent: rgba(235 235 236 / 50%);
|
|
56
|
-
--color-natural-wool: #
|
|
56
|
+
--color-natural-wool: #FFF6D6;
|
|
57
57
|
}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
export interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
|
|
3
|
-
/** The variant to render.
|
|
3
|
+
/** The variant to render. */
|
|
4
4
|
variant?: 'large';
|
|
5
|
-
/** The width to render.
|
|
6
|
-
width?: 'compact';
|
|
5
|
+
/** The width to render. */
|
|
6
|
+
width?: 'small' | 'compact';
|
|
7
7
|
/** The type of the input element. */
|
|
8
8
|
type?: 'text' | 'password' | 'email';
|
|
9
|
+
/** The background color of the input. InputField is by default transparent. */
|
|
10
|
+
background?: 'white';
|
|
9
11
|
/** The id of the input element. */
|
|
10
12
|
id: string;
|
|
11
13
|
/** An element that represents a clear button. */
|
|
@@ -1,57 +1,61 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { forwardRef as
|
|
1
|
+
import { jsxs as z, jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as v, useState as b, useRef as g, useEffect as x } from "react";
|
|
3
3
|
import { c as y } from "../../clsx-OuTLNxxd.js";
|
|
4
|
-
import '../../assets/InputField.css';const
|
|
5
|
-
"input-field-wrapper": "_input-field-
|
|
6
|
-
"input-field": "_input-
|
|
7
|
-
"input-field--large": "_input-field--
|
|
8
|
-
"input-field--
|
|
9
|
-
"input-
|
|
10
|
-
|
|
4
|
+
import '../../assets/InputField.css';const t = {
|
|
5
|
+
"input-field-wrapper": "_input-field-wrapper_z4v9l_1",
|
|
6
|
+
"input-field": "_input-field_z4v9l_1",
|
|
7
|
+
"input-field--large": "_input-field--large_z4v9l_22",
|
|
8
|
+
"input-field--small": "_input-field--small_z4v9l_26",
|
|
9
|
+
"input-field--compact": "_input-field--compact_z4v9l_30",
|
|
10
|
+
"input-field--white": "_input-field--white_z4v9l_34",
|
|
11
|
+
"input-field__clear-button": "_input-field__clear-button_z4v9l_42"
|
|
12
|
+
}, W = v(
|
|
11
13
|
({
|
|
12
|
-
autoComplete:
|
|
13
|
-
id:
|
|
14
|
+
autoComplete: s = "off",
|
|
15
|
+
id: u,
|
|
14
16
|
value: e,
|
|
15
|
-
variant:
|
|
16
|
-
width:
|
|
17
|
-
type:
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
variant: _,
|
|
18
|
+
width: p,
|
|
19
|
+
type: o = "text",
|
|
20
|
+
background: r,
|
|
21
|
+
clearTrigger: l,
|
|
22
|
+
onClear: f,
|
|
20
23
|
...a
|
|
21
|
-
},
|
|
22
|
-
const [
|
|
24
|
+
}, i) => {
|
|
25
|
+
const [d, m] = b(0), n = g(null);
|
|
23
26
|
x(() => {
|
|
24
|
-
|
|
27
|
+
n.current && m(n.current.offsetWidth);
|
|
25
28
|
}, [e]);
|
|
26
|
-
const
|
|
27
|
-
|
|
29
|
+
const h = () => {
|
|
30
|
+
f && i && "current" in i && i.current && (f(), i.current.focus());
|
|
28
31
|
};
|
|
29
|
-
return /* @__PURE__ */
|
|
30
|
-
/* @__PURE__ */
|
|
32
|
+
return /* @__PURE__ */ z("div", { className: t["input-field-wrapper"], children: [
|
|
33
|
+
/* @__PURE__ */ c(
|
|
31
34
|
"input",
|
|
32
35
|
{
|
|
33
36
|
...a,
|
|
34
|
-
autoComplete:
|
|
35
|
-
ref:
|
|
36
|
-
id:
|
|
37
|
-
className: y(
|
|
38
|
-
[
|
|
39
|
-
[
|
|
37
|
+
autoComplete: s,
|
|
38
|
+
ref: i,
|
|
39
|
+
id: u,
|
|
40
|
+
className: y(t["input-field"], {
|
|
41
|
+
[t["input-field--large"]]: _ === "large",
|
|
42
|
+
[t[`input-field--${p}`]]: p,
|
|
43
|
+
[t[`input-field--${r}`]]: r
|
|
40
44
|
}),
|
|
41
|
-
type:
|
|
45
|
+
type: o,
|
|
42
46
|
value: e,
|
|
43
|
-
style: { paddingRight: e &&
|
|
47
|
+
style: { paddingRight: e && l ? d : void 0 }
|
|
44
48
|
}
|
|
45
49
|
),
|
|
46
|
-
e &&
|
|
50
|
+
e && l && /* @__PURE__ */ c(
|
|
47
51
|
"button",
|
|
48
52
|
{
|
|
49
53
|
type: "button",
|
|
50
|
-
className:
|
|
51
|
-
onClick:
|
|
52
|
-
ref:
|
|
53
|
-
"aria-label": `clear trigger for ${
|
|
54
|
-
children:
|
|
54
|
+
className: t["input-field__clear-button"],
|
|
55
|
+
onClick: h,
|
|
56
|
+
ref: n,
|
|
57
|
+
"aria-label": `clear trigger for ${u}`,
|
|
58
|
+
children: l
|
|
55
59
|
}
|
|
56
60
|
)
|
|
57
61
|
] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The variant to render.
|
|
1
|
+
{"version":3,"file":"InputField.js","sources":["../../../src/components/InputField/InputField.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { InputHTMLAttributes, ReactNode } from 'react';\n\nimport styles from './InputField.module.css';\n\nexport interface InputFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {\n /** The variant to render. */\n variant?: 'large';\n /** The width to render. */\n width?: 'small' | 'compact';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email';\n /** The background color of the input. InputField is by default transparent. */\n background?: 'white';\n /** The id of the input element. */\n id: string;\n /** An element that represents a clear button. */\n clearTrigger?: ReactNode;\n /** The callback that is invoked when the clear button is triggered. */\n onClear?: () => void;\n}\n\n/** Represents a component that renders an input field which can have a clear button. */\nexport const InputField = forwardRef<HTMLInputElement, InputFieldProps>(\n (\n {\n autoComplete = 'off',\n id,\n value,\n variant,\n width,\n type = 'text',\n background,\n clearTrigger,\n onClear,\n ...restProps\n }: InputFieldProps,\n forwardedRef\n ) => {\n const [clearButtonWidth, setClearButtonWidth] = useState<number>(0);\n const clearButtonRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (clearButtonRef.current) {\n setClearButtonWidth(clearButtonRef.current.offsetWidth);\n }\n }, [value]);\n\n const handleClearTriggerClick = () => {\n if (onClear && forwardedRef && 'current' in forwardedRef && forwardedRef.current) {\n onClear();\n forwardedRef.current.focus();\n }\n };\n\n return (\n <div className={styles['input-field-wrapper']}>\n <input\n {...restProps}\n autoComplete={autoComplete}\n ref={forwardedRef}\n id={id}\n className={clsx(styles['input-field'], {\n [styles['input-field--large']]: variant === 'large',\n [styles[`input-field--${width}`]]: width,\n [styles[`input-field--${background}`]]: background,\n })}\n type={type}\n value={value}\n style={{ paddingRight: value && clearTrigger ? clearButtonWidth : undefined }}\n />\n {value && clearTrigger && (\n <button\n type=\"button\"\n className={styles['input-field__clear-button']}\n onClick={handleClearTriggerClick}\n ref={clearButtonRef}\n aria-label={`clear trigger for ${id}`}\n >\n {clearTrigger}\n </button>\n )}\n </div>\n );\n }\n);\n"],"names":["InputField","forwardRef","autoComplete","id","value","variant","width","type","background","clearTrigger","onClear","restProps","forwardedRef","clearButtonWidth","setClearButtonWidth","useState","clearButtonRef","useRef","useEffect","handleClearTriggerClick","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAyBaA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,cAAAC,IAAe;AAAA,IACf,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAiB,CAAC,GAC5DC,IAAiBC,EAA0B,IAAI;AAErD,IAAAC,EAAU,MAAM;AACd,MAAIF,EAAe,WACGF,EAAAE,EAAe,QAAQ,WAAW;AAAA,IACxD,GACC,CAACZ,CAAK,CAAC;AAEV,UAAMe,IAA0B,MAAM;AACpC,MAAIT,KAAWE,KAAgB,aAAaA,KAAgBA,EAAa,YAC/DF,EAAA,GACRE,EAAa,QAAQ,MAAM;AAAA,IAE/B;AAEA,WACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,qBAAqB,GAC1C,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAGX;AAAA,UACJ,cAAAT;AAAA,UACA,KAAKU;AAAA,UACL,IAAAT;AAAA,UACA,WAAWoB,EAAKF,EAAO,aAAa,GAAG;AAAA,YACrC,CAACA,EAAO,oBAAoB,CAAC,GAAGhB,MAAY;AAAA,YAC5C,CAACgB,EAAO,gBAAgBf,CAAK,EAAE,CAAC,GAAGA;AAAA,YACnC,CAACe,EAAO,gBAAgBb,CAAU,EAAE,CAAC,GAAGA;AAAA,UAAA,CACzC;AAAA,UACD,MAAAD;AAAA,UACA,OAAAH;AAAA,UACA,OAAO,EAAE,cAAcA,KAASK,IAAeI,IAAmB,OAAU;AAAA,QAAA;AAAA,MAC9E;AAAA,MACCT,KAASK,KACR,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAWD,EAAO,2BAA2B;AAAA,UAC7C,SAASF;AAAA,UACT,KAAKH;AAAA,UACL,cAAY,qBAAqBb,CAAE;AAAA,UAElC,UAAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAAA;AAGN;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { useState as d, useRef as g } from "react";
|
|
3
|
-
import { fn as
|
|
4
|
-
import { InputField as
|
|
3
|
+
import { fn as l } from "../../index-BCvy9BiK.js";
|
|
4
|
+
import { InputField as e } from "./InputField.js";
|
|
5
5
|
import { Container as u } from "../../storyComponents/Container/Container.js";
|
|
6
|
-
import { Icon as
|
|
6
|
+
import { Icon as h } from "../Icon/Icon.js";
|
|
7
7
|
import "../Buttons/Button.js";
|
|
8
8
|
import "../Buttons/LinkButton.js";
|
|
9
9
|
import "@react-aria/button";
|
|
@@ -25,25 +25,33 @@ import "../SelectListbox/SelectListbox.js";
|
|
|
25
25
|
import "../SelectListbox/SelectProvider.js";
|
|
26
26
|
import "../Sortable/components/SortableItem.js";
|
|
27
27
|
import "../../SortableProvider-DZggDO3M.js";
|
|
28
|
-
const
|
|
28
|
+
const f = `
|
|
29
29
|
// Has all HTMLInputElement props available except "className" and "style"
|
|
30
30
|
<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}
|
|
31
31
|
value={value} type={type} clearTrigger={clearTrigger} />
|
|
32
|
-
`,
|
|
32
|
+
`, C = (t) => {
|
|
33
33
|
const r = t.variant ?? [];
|
|
34
34
|
return { ...t, variant: r.toString() };
|
|
35
35
|
}, Q = {
|
|
36
36
|
title: "Atoms/InputField",
|
|
37
|
-
component:
|
|
37
|
+
component: e,
|
|
38
38
|
argTypes: {
|
|
39
39
|
variant: {
|
|
40
40
|
options: ["large"],
|
|
41
41
|
control: "check"
|
|
42
42
|
},
|
|
43
|
+
width: {
|
|
44
|
+
control: "radio",
|
|
45
|
+
options: [void 0, "small", "compact"]
|
|
46
|
+
},
|
|
43
47
|
type: {
|
|
44
48
|
control: "radio",
|
|
45
49
|
options: ["text", "password", "email"]
|
|
46
50
|
},
|
|
51
|
+
background: {
|
|
52
|
+
control: "check",
|
|
53
|
+
options: ["white"]
|
|
54
|
+
},
|
|
47
55
|
id: {
|
|
48
56
|
control: "text"
|
|
49
57
|
},
|
|
@@ -54,23 +62,23 @@ const C = `
|
|
|
54
62
|
}
|
|
55
63
|
},
|
|
56
64
|
parameters: {
|
|
57
|
-
inspectComponent:
|
|
58
|
-
codeString:
|
|
65
|
+
inspectComponent: e,
|
|
66
|
+
codeString: f
|
|
59
67
|
}
|
|
60
68
|
}, a = (t) => {
|
|
61
|
-
const [r, n] = d(""),
|
|
62
|
-
n(c.target.value),
|
|
69
|
+
const [r, n] = d(""), p = g(null), m = (c) => {
|
|
70
|
+
n(c.target.value), l()("handleChange");
|
|
63
71
|
}, s = () => {
|
|
64
|
-
n(""),
|
|
72
|
+
n(""), l()("handleClear");
|
|
65
73
|
};
|
|
66
|
-
return /* @__PURE__ */
|
|
67
|
-
|
|
74
|
+
return /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(
|
|
75
|
+
e,
|
|
68
76
|
{
|
|
69
|
-
...
|
|
77
|
+
...C(t),
|
|
70
78
|
value: r,
|
|
71
79
|
onChange: m,
|
|
72
80
|
onClear: s,
|
|
73
|
-
ref:
|
|
81
|
+
ref: p
|
|
74
82
|
}
|
|
75
83
|
) });
|
|
76
84
|
}, i = {
|
|
@@ -89,7 +97,7 @@ b.args = {
|
|
|
89
97
|
const y = a.bind({});
|
|
90
98
|
y.args = {
|
|
91
99
|
...i,
|
|
92
|
-
clearTrigger: /* @__PURE__ */
|
|
100
|
+
clearTrigger: /* @__PURE__ */ o(h, { name: "Cross" })
|
|
93
101
|
};
|
|
94
102
|
export {
|
|
95
103
|
v as InputFieldExample,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: InputField,\n codeString: codeString,\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC,CAAC;AACxD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS,EAAI;AAC5D,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EAAA;AAEJ,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EACrB,GAEMC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EACpB;AAEA,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAAA,GAET;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,CAAE,CAAA;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,CAAE,CAAA;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,CAAE,CAAA;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}
|
|
1
|
+
{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from '@storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n width: {\n control: 'radio',\n options: [undefined, 'small', 'compact'],\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n background: {\n control: 'check',\n options: ['white'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: InputField,\n codeString: codeString,\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAEzC,QAAAC,IAAgBD,EAAK,WAAmC,CAAC;AACxD,SAAA,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAS,EAAI;AAC5D,GAGeC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS,CAAC,QAAW,SAAS,SAAS;AAAA,IACzC;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IACvC;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,OAAO;AAAA,IACnB;AAAA,IACA,IAAI;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EAAA;AAEJ,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC/C,IAAAL,EAAAK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EACrB,GAEMC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EACpB;AAEA,2BACGE,GACC,EAAA,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAAA,GAET;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,CAAE,CAAA;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,CAAE,CAAA;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,CAAE,CAAA;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAK,EAAA,MAAK,QAAQ,CAAA;AACnC;"}
|
|
@@ -20,6 +20,8 @@ export interface PageOverlayProps {
|
|
|
20
20
|
title?: string;
|
|
21
21
|
/** The contents of the dialog header. */
|
|
22
22
|
headerContent?: ReactNode;
|
|
23
|
+
/** The variant styling of the dialog. */
|
|
24
|
+
variant?: 'full-screen' | 'with-gutters';
|
|
23
25
|
}
|
|
24
26
|
/** Represents a component for a modal dialog. */
|
|
25
|
-
export declare function PageOverlay({ buttons, children, isLoading, spinnerAriaValueText, closeButtonAriaValueText, isOpen, noValidate, onClose, onSubmit, title, headerContent, }: PropsWithChildren<PageOverlayProps>): import("react/jsx-runtime").JSX.Element | null;
|
|
27
|
+
export declare function PageOverlay({ buttons, children, isLoading, spinnerAriaValueText, closeButtonAriaValueText, isOpen, noValidate, onClose, onSubmit, title, headerContent, variant, }: PropsWithChildren<PageOverlayProps>): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,88 +1,94 @@
|
|
|
1
|
-
import { jsx as e, Fragment as
|
|
2
|
-
import { useDialog as
|
|
3
|
-
import { FocusScope as
|
|
4
|
-
import { useModal as
|
|
5
|
-
import { c as
|
|
6
|
-
import { useRef as
|
|
7
|
-
import { OverlayCloseButton as
|
|
8
|
-
import { Spinner as
|
|
1
|
+
import { jsx as e, Fragment as d, jsxs as _ } from "react/jsx-runtime";
|
|
2
|
+
import { useDialog as A } from "@react-aria/dialog";
|
|
3
|
+
import { FocusScope as C } from "@react-aria/focus";
|
|
4
|
+
import { useModal as K, useOverlay as M, usePreventScroll as U, OverlayContainer as V } from "@react-aria/overlays";
|
|
5
|
+
import { c as i } from "../../clsx-OuTLNxxd.js";
|
|
6
|
+
import { useRef as f, useState as h, useEffect as $ } from "react";
|
|
7
|
+
import { OverlayCloseButton as q } from "../OverlayCloseButton/OverlayCloseButton.js";
|
|
8
|
+
import { Spinner as G } from "../Spinner/Spinner.js";
|
|
9
|
+
import { Backdrop as J } from "../Backdrop/Backdrop.js";
|
|
9
10
|
import '../../assets/PageOverlay.css';const o = {
|
|
10
|
-
"page-overlay__container": "_page-
|
|
11
|
-
"page-overlay": "_page-
|
|
12
|
-
"page-
|
|
13
|
-
"page-
|
|
14
|
-
"page-
|
|
15
|
-
"page-
|
|
16
|
-
"page-
|
|
17
|
-
"page-
|
|
11
|
+
"page-overlay__container": "_page-overlay__container_mxs4k_1",
|
|
12
|
+
"page-overlay": "_page-overlay_mxs4k_1",
|
|
13
|
+
"page-overlay--full-screen": "_page-overlay--full-screen_mxs4k_19",
|
|
14
|
+
"page-overlay--with-gutters": "_page-overlay--with-gutters_mxs4k_23",
|
|
15
|
+
"page-overlay__content": "_page-overlay__content_mxs4k_29",
|
|
16
|
+
"page-overlay__children": "_page-overlay__children_mxs4k_41",
|
|
17
|
+
"page-overlay__title": "_page-overlay__title_mxs4k_45",
|
|
18
|
+
"page-overlay__buttons-bar": "_page-overlay__buttons-bar_mxs4k_52",
|
|
19
|
+
"page-overlay__buttons-bar--shadow": "_page-overlay__buttons-bar--shadow_mxs4k_78",
|
|
20
|
+
"page-overlay__close": "_page-overlay__close_mxs4k_82"
|
|
18
21
|
};
|
|
19
|
-
function
|
|
22
|
+
function le({
|
|
20
23
|
buttons: t,
|
|
21
|
-
children:
|
|
22
|
-
isLoading:
|
|
23
|
-
spinnerAriaValueText:
|
|
24
|
+
children: b,
|
|
25
|
+
isLoading: x,
|
|
26
|
+
spinnerAriaValueText: k = "Loading",
|
|
24
27
|
closeButtonAriaValueText: w = "Close",
|
|
25
|
-
isOpen:
|
|
26
|
-
noValidate:
|
|
27
|
-
onClose:
|
|
28
|
+
isOpen: l,
|
|
29
|
+
noValidate: S = !1,
|
|
30
|
+
onClose: p,
|
|
28
31
|
onSubmit: P,
|
|
29
32
|
title: s,
|
|
30
|
-
headerContent: n
|
|
33
|
+
headerContent: n,
|
|
34
|
+
variant: m = "full-screen"
|
|
31
35
|
}) {
|
|
32
|
-
const c =
|
|
33
|
-
|
|
34
|
-
const r =
|
|
36
|
+
const c = f(null), v = f(null), [N, T] = h(!1), [E, L] = h(!1), { dialogProps: B, titleProps: F } = A({ role: "dialog" }, c), { modalProps: H } = K({ isDisabled: !l }), { overlayProps: z, underlayProps: D } = M({ isOpen: l, onClose: p }, c);
|
|
37
|
+
U({ isDisabled: !l }), $(() => {
|
|
38
|
+
const r = v.current;
|
|
35
39
|
if (!r) return;
|
|
36
|
-
function
|
|
37
|
-
const
|
|
38
|
-
|
|
40
|
+
function g() {
|
|
41
|
+
const u = r.scrollHeight, y = r.clientHeight, j = r.scrollTop;
|
|
42
|
+
T(u > y), L(j + y >= u);
|
|
39
43
|
}
|
|
40
|
-
function
|
|
41
|
-
|
|
44
|
+
function a() {
|
|
45
|
+
g();
|
|
42
46
|
}
|
|
43
|
-
r.addEventListener("scroll",
|
|
44
|
-
const
|
|
45
|
-
|
|
47
|
+
r.addEventListener("scroll", a), window.addEventListener("resize", a);
|
|
48
|
+
const R = setTimeout(() => {
|
|
49
|
+
g();
|
|
46
50
|
}, 0);
|
|
47
51
|
return () => {
|
|
48
|
-
r.removeEventListener("scroll",
|
|
52
|
+
r.removeEventListener("scroll", a), window.removeEventListener("resize", a), clearTimeout(R);
|
|
49
53
|
};
|
|
50
|
-
}, [
|
|
51
|
-
function
|
|
54
|
+
}, [l, n]);
|
|
55
|
+
function I(r) {
|
|
52
56
|
r.stopPropagation();
|
|
53
57
|
}
|
|
54
|
-
return
|
|
58
|
+
return l ? /* @__PURE__ */ e(V, { className: o["page-overlay__container"], children: /* @__PURE__ */ e(J, { ...D, children: x ? /* @__PURE__ */ e(G, { ariaValueText: k }) : /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(C, { autoFocus: !0, contain: !0, restoreFocus: !0, children: /* @__PURE__ */ _(
|
|
55
59
|
"div",
|
|
56
60
|
{
|
|
57
|
-
...F,
|
|
58
|
-
...z,
|
|
59
61
|
...B,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
+
...H,
|
|
63
|
+
...z,
|
|
64
|
+
className: i(o["page-overlay"], {
|
|
65
|
+
[o[`page-overlay--${m}`]]: m
|
|
66
|
+
}),
|
|
67
|
+
onKeyUp: I,
|
|
62
68
|
role: "presentation",
|
|
63
69
|
ref: c,
|
|
64
70
|
children: [
|
|
65
|
-
(s || n) && /* @__PURE__ */
|
|
66
|
-
s && /* @__PURE__ */ e("h1", { ...
|
|
71
|
+
(s || n) && /* @__PURE__ */ _(d, { children: [
|
|
72
|
+
s && /* @__PURE__ */ e("h1", { ...F, className: o["page-overlay__title"], children: s }),
|
|
67
73
|
n,
|
|
68
|
-
/* @__PURE__ */ e("span", { className: o["page-overlay__close"], children: /* @__PURE__ */ e(
|
|
74
|
+
/* @__PURE__ */ e("span", { className: o["page-overlay__close"], children: /* @__PURE__ */ e(q, { "aria-label": w, onClick: p }) })
|
|
69
75
|
] }),
|
|
70
|
-
/* @__PURE__ */
|
|
76
|
+
/* @__PURE__ */ _(
|
|
71
77
|
"form",
|
|
72
78
|
{
|
|
73
|
-
className:
|
|
79
|
+
className: i(o["page-overlay__content"], {
|
|
74
80
|
[o["page-overlay--content-with-buttons"]]: t
|
|
75
81
|
}),
|
|
76
82
|
onSubmit: P,
|
|
77
|
-
noValidate:
|
|
78
|
-
ref:
|
|
83
|
+
noValidate: S,
|
|
84
|
+
ref: v,
|
|
79
85
|
children: [
|
|
80
|
-
/* @__PURE__ */ e("div", { className: o["page-overlay__children"], children:
|
|
86
|
+
/* @__PURE__ */ e("div", { className: o["page-overlay__children"], children: b }),
|
|
81
87
|
t && /* @__PURE__ */ e(
|
|
82
88
|
"div",
|
|
83
89
|
{
|
|
84
|
-
className:
|
|
85
|
-
[o["page-overlay__buttons-bar--shadow"]]:
|
|
90
|
+
className: i(o["page-overlay__buttons-bar"], {
|
|
91
|
+
[o["page-overlay__buttons-bar--shadow"]]: N && !E
|
|
86
92
|
}),
|
|
87
93
|
children: t
|
|
88
94
|
}
|
|
@@ -92,9 +98,9 @@ function $({
|
|
|
92
98
|
)
|
|
93
99
|
]
|
|
94
100
|
}
|
|
95
|
-
) }) }) }) : null;
|
|
101
|
+
) }) }) }) }) : null;
|
|
96
102
|
}
|
|
97
103
|
export {
|
|
98
|
-
|
|
104
|
+
le as PageOverlay
|
|
99
105
|
};
|
|
100
106
|
//# sourceMappingURL=PageOverlay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageOverlay.js","sources":["../../../src/components/PageOverlay/PageOverlay.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';\n\nimport styles from './PageOverlay.module.css';\n\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\n\nexport interface PageOverlayProps {\n /** The buttons of the dialog. */\n buttons?: ReactNode;\n /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. */\n isLoading?: boolean;\n /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. Used together with `isLoading`. */\n spinnerAriaValueText?: string;\n /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. */\n closeButtonAriaValueText?: string;\n /** `true` to render the dialog opened; otherwise, `false`. */\n isOpen: boolean;\n /** `true` to disable form validation; otherwise, `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 title of the dialog. */\n title?: string;\n /** The contents of the dialog header. */\n headerContent?: ReactNode;\n}\n\n/** Represents a component for a modal dialog. */\nexport function PageOverlay({\n buttons,\n children,\n isLoading,\n spinnerAriaValueText = 'Loading',\n closeButtonAriaValueText = 'Close',\n isOpen,\n noValidate = false,\n onClose,\n onSubmit,\n title,\n headerContent,\n}: PropsWithChildren<PageOverlayProps>) {\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: 'dialog' }, ref);\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const { overlayProps } = useOverlay({ isOpen, onClose }, ref);\n\n usePreventScroll({ isDisabled: !isOpen });\n\n useEffect(() => {\n const formElement = formRef.current;\n\n if (!formElement) return;\n\n function checkScrollable() {\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 function handleScrollAndResize() {\n checkScrollable();\n }\n\n formElement.addEventListener('scroll', handleScrollAndResize);\n window.addEventListener('resize', handleScrollAndResize);\n\n const timeoutId = setTimeout(() => {\n checkScrollable();\n }, 0);\n\n return () => {\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 className={styles['page-overlay__container']}>\n {isLoading ? (\n
|
|
1
|
+
{"version":3,"file":"PageOverlay.js","sources":["../../../src/components/PageOverlay/PageOverlay.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, { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FormHTMLAttributes, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './PageOverlay.module.css';\n\nimport { OverlayCloseButton } from 'components/OverlayCloseButton';\nimport { Spinner } from 'components/Spinner';\nimport { Backdrop } from 'components/Backdrop';\n\nexport interface PageOverlayProps {\n /** The buttons of the dialog. */\n buttons?: ReactNode;\n /** `true` to show a spinner, if the contents of the dialog is lazy loaded; otherwise, `false`. */\n isLoading?: boolean;\n /** The `aria-valuetext` value of the [Spinner](/story/atoms-spinner--spinner-example) component. Used together with `isLoading`. */\n spinnerAriaValueText?: string;\n /** The `aria-label` value of the [OverlayCloseButton](/story/atoms-overlayclosebutton--overlay-close-button-example) component. */\n closeButtonAriaValueText?: string;\n /** `true` to render the dialog opened; otherwise, `false`. */\n isOpen: boolean;\n /** `true` to disable form validation; otherwise, `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 title of the dialog. */\n title?: string;\n /** The contents of the dialog header. */\n headerContent?: ReactNode;\n /** The variant styling of the dialog. */\n variant?: 'full-screen' | 'with-gutters';\n}\n\n/** Represents a component for a modal dialog. */\nexport function PageOverlay({\n buttons,\n children,\n isLoading,\n spinnerAriaValueText = 'Loading',\n closeButtonAriaValueText = 'Close',\n isOpen,\n noValidate = false,\n onClose,\n onSubmit,\n title,\n headerContent,\n variant = 'full-screen',\n}: PropsWithChildren<PageOverlayProps>) {\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: 'dialog' }, ref);\n const { modalProps } = useModal({ isDisabled: !isOpen });\n const { overlayProps, underlayProps } = useOverlay({ isOpen, onClose }, ref);\n\n usePreventScroll({ isDisabled: !isOpen });\n\n useEffect(() => {\n const formElement = formRef.current;\n\n if (!formElement) return;\n\n function checkScrollable() {\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 function handleScrollAndResize() {\n checkScrollable();\n }\n\n formElement.addEventListener('scroll', handleScrollAndResize);\n window.addEventListener('resize', handleScrollAndResize);\n\n const timeoutId = setTimeout(() => {\n checkScrollable();\n }, 0);\n\n return () => {\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 className={styles['page-overlay__container']}>\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['page-overlay'], {\n [styles[`page-overlay--${variant}`]]: variant,\n })}\n onKeyUp={onKeyUp}\n role=\"presentation\"\n ref={ref}\n >\n {(title || headerContent) && (\n <>\n {title && (\n <h1 {...titleProps} className={styles['page-overlay__title']}>\n {title}\n </h1>\n )}\n {headerContent}\n {\n <span className={styles['page-overlay__close']}>\n <OverlayCloseButton aria-label={closeButtonAriaValueText} onClick={onClose} />\n </span>\n }\n </>\n )}\n <form\n className={classNames(styles['page-overlay__content'], {\n [styles['page-overlay--content-with-buttons']]: buttons,\n })}\n onSubmit={onSubmit}\n noValidate={noValidate}\n ref={formRef}\n >\n <div className={styles['page-overlay__children']}>{children}</div>\n {buttons && (\n <div\n className={classNames(styles['page-overlay__buttons-bar'], {\n [styles['page-overlay__buttons-bar--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":["PageOverlay","buttons","children","isLoading","spinnerAriaValueText","closeButtonAriaValueText","isOpen","noValidate","onClose","onSubmit","title","headerContent","variant","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","styles","Backdrop","Spinner","Fragment","FocusScope","jsxs","clsx","OverlayCloseButton","classNames"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@uva-glass/component-library",
|
|
3
3
|
"author": "Team Glass - Frontend vrienden",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "3.
|
|
5
|
+
"version": "3.14.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"@testing-library/jest-dom": "^6.6.3",
|
|
65
65
|
"@testing-library/react": "^16.3.0",
|
|
66
66
|
"@types/jest": "^29.5.14",
|
|
67
|
-
"@types/node": "^22.
|
|
67
|
+
"@types/node": "^22.15.3",
|
|
68
68
|
"@types/react-dom": "^19.1.2",
|
|
69
69
|
"@types/react": "^19.1.2",
|
|
70
70
|
"@uva-glass/eslint-config": "^1.3.10",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"babel-plugin-transform-vite-meta-env": "^1.0.3",
|
|
75
75
|
"clsx": "^2.1.1",
|
|
76
76
|
"eslint-plugin-react-hooks": "^6.0.0",
|
|
77
|
-
"glob": "^11.0.
|
|
77
|
+
"glob": "^11.0.2",
|
|
78
78
|
"husky": "^9.1.7",
|
|
79
79
|
"identity-obj-proxy": "^3.0.0",
|
|
80
80
|
"jest": "^29.7.0",
|
|
@@ -84,11 +84,11 @@
|
|
|
84
84
|
"npm-run-all2": "^7.0.2",
|
|
85
85
|
"react": "^19.1.0",
|
|
86
86
|
"react-dom": "^19.1.0",
|
|
87
|
-
"react-router": "^7.5.
|
|
87
|
+
"react-router": "^7.5.3",
|
|
88
88
|
"semantic-release": "^24.2.3",
|
|
89
89
|
"storybook": "^8.6.12",
|
|
90
|
-
"style-dictionary": "^4.
|
|
91
|
-
"stylelint": "^16.
|
|
90
|
+
"style-dictionary": "^4.4.0",
|
|
91
|
+
"stylelint": "^16.19.1",
|
|
92
92
|
"stylelint-config-recommended": "^16.0.0",
|
|
93
93
|
"stylelint-config-standard": "^38.0.0",
|
|
94
94
|
"stylelint-order": "^7.0.0",
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
"vite-plugin-static-copy": "^2.3.1",
|
|
100
100
|
"vite-plugin-svgr": "^4.3.0",
|
|
101
101
|
"vite-tsconfig-paths": "^5.1.4",
|
|
102
|
-
"vite": "^6.3.
|
|
102
|
+
"vite": "^6.3.3"
|
|
103
103
|
},
|
|
104
104
|
"dependencies": {
|
|
105
105
|
"@babel/preset-env": "^7.26.9",
|
|
@@ -112,9 +112,9 @@
|
|
|
112
112
|
"lexical": "^0.30.0"
|
|
113
113
|
},
|
|
114
114
|
"optionalDependencies": {
|
|
115
|
-
"@rollup/rollup-linux-x64-gnu": "^4.40.
|
|
116
|
-
"@rspack/binding-darwin-arm64": "1.3.
|
|
117
|
-
"@rspack/binding-linux-x64-gnu": "1.3.
|
|
115
|
+
"@rollup/rollup-linux-x64-gnu": "^4.40.1",
|
|
116
|
+
"@rspack/binding-darwin-arm64": "1.3.8",
|
|
117
|
+
"@rspack/binding-linux-x64-gnu": "1.3.8",
|
|
118
118
|
"@ast-grep/napi-linux-x64-gnu": "0.37.0"
|
|
119
119
|
}
|
|
120
120
|
}
|