@uva-glass/component-library 3.13.0 → 3.14.1
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/OverlayStepBar.css +1 -1
- package/dist/assets/PageOverlay.css +1 -1
- package/dist/components/OverlayStepBar/OverlayStepBar.d.ts +5 -7
- package/dist/components/OverlayStepBar/OverlayStepBar.js +19 -57
- package/dist/components/OverlayStepBar/OverlayStepBar.js.map +1 -1
- package/dist/components/OverlayStepBar/OverlayStepBar.stories.js +7 -12
- package/dist/components/OverlayStepBar/OverlayStepBar.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 +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
._overlay-step-
|
|
1
|
+
._overlay-step-bar__container_18gn9_1{align-items:center;background-color:var(--color-grey-50);display:flex;height:2.5rem;justify-content:center;overflow-y:hidden}._overlay-step-bar__step_18gn9_10{align-items:center;background-color:var(--color-grey-50);color:var(--color-grey-500);display:flex;font-family:inherit;font-size:var(--font-size-default);gap:.5rem;height:100%;padding:0 2rem;position:relative}._overlay-step-bar__step_18gn9_10:not(:last-child):after{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-grey-50);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.25rem;top:-.25rem;z-index:10}._overlay-step-bar__step_18gn9_10:not(:last-child):before{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-white);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.5rem;top:-.25rem;z-index:5}._overlay-step-bar__step--active_18gn9_45{color:var(--color-black);font-weight:var(--semibold)}
|
|
@@ -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}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
type StepType = {
|
|
2
|
-
label: string;
|
|
3
|
-
status: 'inactive' | 'active' | 'checked';
|
|
4
|
-
};
|
|
5
1
|
export interface OverlayStepBarProps {
|
|
6
|
-
|
|
2
|
+
/** Array of strings. */
|
|
3
|
+
stepLabels: string[];
|
|
4
|
+
/** activeStep number starting with 1. */
|
|
5
|
+
activeStep: number;
|
|
7
6
|
}
|
|
8
|
-
export declare const OverlayStepBar: ({
|
|
9
|
-
export {};
|
|
7
|
+
export declare const OverlayStepBar: ({ stepLabels, activeStep }: OverlayStepBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,60 +1,22 @@
|
|
|
1
|
-
import { jsx as e,
|
|
2
|
-
import { c as
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
import "../RteEditor/Providers/LanguageProvider.js";
|
|
20
|
-
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
21
|
-
import "../RteEditor/hooks/components/Flyout.js";
|
|
22
|
-
import "../../index-DllfJcv4.js";
|
|
23
|
-
import "../SelectListbox/SelectListbox.js";
|
|
24
|
-
import "../SelectListbox/SelectProvider.js";
|
|
25
|
-
import "../Sortable/components/SortableItem.js";
|
|
26
|
-
import "../../SortableProvider-DZggDO3M.js";
|
|
27
|
-
import '../../assets/OverlayStepBar.css';const r = {
|
|
28
|
-
"overlay-step-bar__container": "_overlay-step-bar__container_u2k5r_1",
|
|
29
|
-
"overlay-step-bar__separator": "_overlay-step-bar__separator_u2k5r_10",
|
|
30
|
-
"overlay-step-bar__step": "_overlay-step-bar__step_u2k5r_14",
|
|
31
|
-
"overlay-step-bar__step-bullet": "_overlay-step-bar__step-bullet_u2k5r_23",
|
|
32
|
-
"overlay-step-bar__step--inactive": "_overlay-step-bar__step--inactive_u2k5r_34",
|
|
33
|
-
"overlay-step-bar__step--active": "_overlay-step-bar__step--active_u2k5r_40",
|
|
34
|
-
"overlay-step-bar__step--checked": "_overlay-step-bar__step--checked_u2k5r_49"
|
|
35
|
-
}, t = [
|
|
36
|
-
"MiniCheck",
|
|
37
|
-
"One",
|
|
38
|
-
"Two",
|
|
39
|
-
"Three",
|
|
40
|
-
"Four",
|
|
41
|
-
"Five",
|
|
42
|
-
"Six",
|
|
43
|
-
"Seven",
|
|
44
|
-
"Eight",
|
|
45
|
-
"Nine"
|
|
46
|
-
], B = ({ steps: a }) => {
|
|
47
|
-
if (a.length > t.length - 1)
|
|
48
|
-
throw new Error("The 'steps' array must contain no more than 9 objects.");
|
|
49
|
-
return /* @__PURE__ */ e("div", { className: r["overlay-step-bar__container"], children: a.length < t.length && a.map(({ label: p, status: _ }, o) => /* @__PURE__ */ s(m, { children: [
|
|
50
|
-
o !== 0 && /* @__PURE__ */ e(i, { name: "CheveronRight", size: 16, className: r["overlay-step-bar__separator"] }),
|
|
51
|
-
/* @__PURE__ */ s("span", { className: l(r["overlay-step-bar__step"], r[`overlay-step-bar__step--${_}`]), children: [
|
|
52
|
-
/* @__PURE__ */ e("span", { className: r["overlay-step-bar__step-bullet"], children: /* @__PURE__ */ e(i, { name: _ === "checked" ? t[0] : t[o + 1], size: 24 }) }),
|
|
53
|
-
p
|
|
54
|
-
] })
|
|
55
|
-
] }, `${o}_${p}`)) });
|
|
56
|
-
};
|
|
1
|
+
import { jsx as e, Fragment as n, jsxs as o } from "react/jsx-runtime";
|
|
2
|
+
import { c as p } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import '../../assets/OverlayStepBar.css';const t = {
|
|
4
|
+
"overlay-step-bar__container": "_overlay-step-bar__container_18gn9_1",
|
|
5
|
+
"overlay-step-bar__step": "_overlay-step-bar__step_18gn9_10",
|
|
6
|
+
"overlay-step-bar__step--active": "_overlay-step-bar__step--active_18gn9_45"
|
|
7
|
+
}, i = ({ stepLabels: r, activeStep: s = 0 }) => (s > r.length && console.error("activeStep is greater than the number of steps"), /* @__PURE__ */ e("div", { className: t["overlay-step-bar__container"], children: r.length && r.map((_, a) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ o(
|
|
8
|
+
"span",
|
|
9
|
+
{
|
|
10
|
+
className: p(t["overlay-step-bar__step"], [
|
|
11
|
+
a === s - 1 && t["overlay-step-bar__step--active"]
|
|
12
|
+
]),
|
|
13
|
+
children: [
|
|
14
|
+
/* @__PURE__ */ e("span", { children: a + 1 }),
|
|
15
|
+
/* @__PURE__ */ e("span", { children: _ })
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
) }, `${a}_${_}`)) }));
|
|
57
19
|
export {
|
|
58
|
-
|
|
20
|
+
i as OverlayStepBar
|
|
59
21
|
};
|
|
60
22
|
//# sourceMappingURL=OverlayStepBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport
|
|
1
|
+
{"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Fragment } from 'react/jsx-runtime';\n\nimport styles from './OverlayStepBar.module.css';\n\nexport interface OverlayStepBarProps {\n /** Array of strings. */\n stepLabels: string[];\n /** activeStep number starting with 1. */\n activeStep: number;\n}\n\nexport const OverlayStepBar = ({ stepLabels, activeStep = 0 }: OverlayStepBarProps) => {\n if (activeStep > stepLabels.length) {\n console.error('activeStep is greater than the number of steps');\n }\n\n return (\n <div className={styles['overlay-step-bar__container']}>\n {stepLabels.length &&\n stepLabels.map((label, index) => (\n <Fragment key={`${index}_${label}`}>\n <span\n className={clsx(styles[`overlay-step-bar__step`], [\n index === activeStep - 1 && styles[`overlay-step-bar__step--active`],\n ])}\n >\n <span>{index + 1}</span>\n <span>{label}</span>\n </span>\n </Fragment>\n ))}\n </div>\n );\n};\n"],"names":["OverlayStepBar","stepLabels","activeStep","jsx","styles","label","index","Fragment","jsxs","clsx"],"mappings":";;;;;;GAYaA,IAAiB,CAAC,EAAE,YAAAC,GAAY,YAAAC,IAAa,SACpDA,IAAaD,EAAW,UAC1B,QAAQ,MAAM,gDAAgD,GAI7D,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAO,6BAA6B,GACjD,UAAAH,EAAW,UACVA,EAAW,IAAI,CAACI,GAAOC,wBACpBC,GACC,EAAA,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKL,EAAO,wBAAwB,GAAG;AAAA,MAChDE,MAAUJ,IAAa,KAAKE,EAAO,gCAAgC;AAAA,IAAA,CACpE;AAAA,IAED,UAAA;AAAA,MAAC,gBAAAD,EAAA,QAAA,EAAM,cAAQ,EAAE,CAAA;AAAA,MACjB,gBAAAA,EAAC,UAAM,UAAME,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,KAPF,GAAGC,CAAK,IAAID,CAAK,EAShC,CACD,GACL;"}
|
|
@@ -1,22 +1,17 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { OverlayStepBar as e } from "./OverlayStepBar.js";
|
|
3
|
-
const
|
|
3
|
+
const r = "<OverlayStepBar stelLabels={[string]} activeStep={number}/>", i = {
|
|
4
4
|
title: "Molecules/OverlayStepBar",
|
|
5
5
|
component: e,
|
|
6
6
|
argTypes: {},
|
|
7
7
|
parameters: {
|
|
8
8
|
inspectComponent: e,
|
|
9
|
-
codeString:
|
|
9
|
+
codeString: r
|
|
10
10
|
}
|
|
11
|
-
},
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
{ status: "active", label: "Aanvullende informatie" },
|
|
16
|
-
{ status: "inactive", label: "Docenten" },
|
|
17
|
-
{ status: "inactive", label: "Overzicht" }
|
|
18
|
-
]
|
|
19
|
-
}, n = r.bind({});
|
|
11
|
+
}, a = (t) => /* @__PURE__ */ s(e, { ...t }), l = {
|
|
12
|
+
stepLabels: ["BasicDetails", "Lecturers", "PeriodPlanning", "Assessment", "Miscellaneous", "Overview"],
|
|
13
|
+
activeStep: 2
|
|
14
|
+
}, n = a.bind({});
|
|
20
15
|
n.args = {
|
|
21
16
|
...l
|
|
22
17
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString = '<OverlayStepBar />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/OverlayStepBar',\n component: OverlayStepBar,\n argTypes: {},\n parameters: {\n inspectComponent: OverlayStepBar,\n codeString: codeString,\n },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => <OverlayStepBar {...args} />;\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n
|
|
1
|
+
{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString = '<OverlayStepBar stelLabels={[string]} activeStep={number}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/OverlayStepBar',\n component: OverlayStepBar,\n argTypes: {},\n parameters: {\n inspectComponent: OverlayStepBar,\n codeString: codeString,\n },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => <OverlayStepBar {...args} />;\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n stepLabels: ['BasicDetails', 'Lecturers', 'PeriodPlanning', 'Assessment', 'Miscellaneous', 'Overview'],\n activeStep: 2,\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n ...defaultArgs,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","jsx","defaultArgs","OverlayStepBarExample"],"mappings":";;AAKA,MAAMA,IAAa,+DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,GAAM,GAE7EE,IAA4C;AAAA,EAChD,YAAY,CAAC,gBAAgB,aAAa,kBAAkB,cAAc,iBAAiB,UAAU;AAAA,EACrG,YAAY;AACd,GAEaC,IAAwBJ,EAAS,KAAK,CAAE,CAAA;AACrDI,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AACL;"}
|
|
@@ -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.1",
|
|
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",
|
|
@@ -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.19.
|
|
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",
|
|
@@ -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
|
}
|