@uva-glass/component-library 1.43.0 → 1.44.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/{MultiSelect-DFMb82q4.js → MultiSelect-B9JaIPXs.js} +17 -12
- package/dist/{MultiSelect-DFMb82q4.js.map → MultiSelect-B9JaIPXs.js.map} +1 -1
- package/dist/assets/MenuLink.css +1 -1
- package/dist/assets/MenuLink2.css +1 -1
- package/dist/assets/Spinner.css +1 -1
- package/dist/components/Drawer/Drawer.js +39 -37
- package/dist/components/Drawer/Drawer.js.map +1 -1
- package/dist/components/Drawer/Drawer.stories.js +18 -18
- package/dist/components/InputField/InputField.stories.js +24 -19
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/MenuButton/MenuButton.d.ts +2 -3
- package/dist/components/MenuButton/MenuButton.js +11 -605
- package/dist/components/MenuButton/MenuButton.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.js +14 -4
- package/dist/components/MenuLink/MenuLink.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.stories.js +5 -4
- package/dist/components/MenuLink/MenuLink.stories.js.map +1 -1
- package/dist/components/MenuLink/index.js +1 -1
- package/dist/components/ModalDialog/ModalDialog.js +62 -60
- package/dist/components/ModalDialog/ModalDialog.js.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.js +12 -12
- package/dist/components/MultiSelect/MultiSelect.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
- package/dist/components/MultiSelect/components/MultiSelectHeader.js +7 -2
- package/dist/components/MultiSelect/components/MultiSelectHeader.js.map +1 -1
- package/dist/components/MultiSelect/index.js +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +28 -23
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
- package/dist/components/Spinner/Spinner.js +13 -12
- package/dist/components/Spinner/Spinner.js.map +1 -1
- package/dist/components/index.js +6 -6
- package/dist/index.js +6 -6
- package/package.json +10 -12
- package/dist/MenuLink-yPEEfABB.js +0 -859
- package/dist/MenuLink-yPEEfABB.js.map +0 -1
- package/dist/focusSafely-b94Glb9J.js +0 -402
- package/dist/focusSafely-b94Glb9J.js.map +0 -1
- package/dist/index-HuvfQN5H.js +0 -19071
- package/dist/index-HuvfQN5H.js.map +0 -1
- package/dist/useDialog-DZhIlo2a.js +0 -785
- package/dist/useDialog-DZhIlo2a.js.map +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { ModalProvider as o } from "@react-aria/overlays";
|
|
3
3
|
import { f as i } from "../../index-C7tAT8j7.js";
|
|
4
4
|
import { ModalDialog as r } from "./ModalDialog.js";
|
|
5
|
-
import { Button as
|
|
5
|
+
import { Button as s } from "../Button/Button.js";
|
|
6
6
|
import { ButtonGroup as m } from "../ButtonGroup/ButtonGroup.js";
|
|
7
7
|
import { FormField as n } from "../FormField/FormField.js";
|
|
8
8
|
import { InputField as d } from "../InputField/InputField.js";
|
|
@@ -42,7 +42,7 @@ const S = {
|
|
|
42
42
|
}, u = (t) => /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(r, { ...t, children: /* @__PURE__ */ a(n, { outerSpace: !0, children: [
|
|
43
43
|
/* @__PURE__ */ e(c, { htmlFor: "text-field", children: "Example Text Field" }),
|
|
44
44
|
/* @__PURE__ */ e(d, { id: "text-field" })
|
|
45
|
-
] }) }) }),
|
|
45
|
+
] }) }) }), l = {
|
|
46
46
|
padded: !1,
|
|
47
47
|
slim: !1,
|
|
48
48
|
wide: !1,
|
|
@@ -55,32 +55,32 @@ const S = {
|
|
|
55
55
|
onSubmit: i(),
|
|
56
56
|
onClose: i(),
|
|
57
57
|
buttons: /* @__PURE__ */ a(m, { reversed: !0, children: [
|
|
58
|
-
/* @__PURE__ */ e(
|
|
59
|
-
/* @__PURE__ */ e(
|
|
58
|
+
/* @__PURE__ */ e(s, { variant: "primary", onClick: i(), children: "OK" }),
|
|
59
|
+
/* @__PURE__ */ e(s, { variant: "secondary", onClick: i(), children: "Cancel" })
|
|
60
60
|
] }),
|
|
61
61
|
isOpen: !0
|
|
62
62
|
}, p = u.bind({});
|
|
63
63
|
p.args = {
|
|
64
|
-
...
|
|
64
|
+
...l
|
|
65
65
|
};
|
|
66
66
|
const b = u.bind({});
|
|
67
67
|
b.args = {
|
|
68
|
-
...
|
|
68
|
+
...l,
|
|
69
69
|
isLoading: !0,
|
|
70
70
|
spinnerAriaValueText: "Loading"
|
|
71
71
|
};
|
|
72
|
-
const
|
|
72
|
+
const g = (t) => /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(r, { ...t, children: /* @__PURE__ */ a(n, { outerSpace: !0, children: [
|
|
73
73
|
/* @__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." }),
|
|
74
74
|
/* @__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." })
|
|
75
|
-
] }) }) }),
|
|
76
|
-
|
|
77
|
-
...
|
|
75
|
+
] }) }) }), f = g.bind({});
|
|
76
|
+
f.args = {
|
|
77
|
+
...l,
|
|
78
78
|
noButtonBorder: !0
|
|
79
79
|
};
|
|
80
80
|
export {
|
|
81
81
|
b as Loading,
|
|
82
82
|
p as ModalDialogExample,
|
|
83
|
-
|
|
83
|
+
f as WithLongContentAndNoBorder,
|
|
84
84
|
S as default
|
|
85
85
|
};
|
|
86
86
|
//# sourceMappingURL=ModalDialog.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as b, jsx as m } from "react/jsx-runtime";
|
|
2
2
|
import { f as d } from "../../index-C7tAT8j7.js";
|
|
3
3
|
import { useState as p } from "react";
|
|
4
|
-
import { M as r } from "../../MultiSelect-
|
|
4
|
+
import { M as r } from "../../MultiSelect-B9JaIPXs.js";
|
|
5
5
|
import { Container as S } from "../storyComponents/Container/Container.js";
|
|
6
6
|
const T = {
|
|
7
7
|
title: "Organisms/MultiSelect",
|
|
@@ -2,16 +2,21 @@ import "react/jsx-runtime";
|
|
|
2
2
|
import "../../../MultiSelectItem-CsSIAJRX.js";
|
|
3
3
|
import "../../Label/Label.js";
|
|
4
4
|
import "react";
|
|
5
|
+
import "@react-aria/button";
|
|
5
6
|
import "../../Button/Button.js";
|
|
7
|
+
import "@react-aria/dialog";
|
|
8
|
+
import "@react-aria/focus";
|
|
9
|
+
import "@react-aria/overlays";
|
|
6
10
|
import "../../OverlayCloseButton/OverlayCloseButton.js";
|
|
7
11
|
import "../../GridRow/GridRow.js";
|
|
8
12
|
import "../../IconButton/IconButton.js";
|
|
9
13
|
import "../../Input/Input.js";
|
|
10
14
|
import "../../InputField/InputField.js";
|
|
11
|
-
import
|
|
15
|
+
import "react-router-dom";
|
|
16
|
+
import { a as g } from "../../../MultiSelect-B9JaIPXs.js";
|
|
12
17
|
import "../../SelectListbox/SelectListbox.js";
|
|
13
18
|
import "../../SelectListbox/SelectProvider.js";
|
|
14
19
|
export {
|
|
15
|
-
|
|
20
|
+
g as MultiSelectHeader
|
|
16
21
|
};
|
|
17
22
|
//# sourceMappingURL=MultiSelectHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MultiSelectHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,55 +1,60 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as e, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { f as a } from "../../index-C7tAT8j7.js";
|
|
3
3
|
import { ProgrammeCard as t } from "./ProgrammeCard.js";
|
|
4
4
|
import { Container as n } from "../storyComponents/Container/Container.js";
|
|
5
5
|
import "react";
|
|
6
6
|
import { Icon as m } from "../Icon/Icon.js";
|
|
7
|
+
import "@react-aria/button";
|
|
7
8
|
import "../Button/Button.js";
|
|
9
|
+
import "@react-aria/dialog";
|
|
10
|
+
import "@react-aria/focus";
|
|
11
|
+
import "@react-aria/overlays";
|
|
8
12
|
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
9
13
|
import "../GridRow/GridRow.js";
|
|
10
14
|
import "../IconButton/IconButton.js";
|
|
11
15
|
import "../Input/Input.js";
|
|
12
16
|
import "../InputField/InputField.js";
|
|
13
|
-
import "
|
|
17
|
+
import "react-router-dom";
|
|
18
|
+
import "../../MultiSelect-B9JaIPXs.js";
|
|
14
19
|
import { Repeater as i } from "../Repeater/Repeater.js";
|
|
15
20
|
import "../SelectListbox/SelectListbox.js";
|
|
16
21
|
import "../SelectListbox/SelectProvider.js";
|
|
17
|
-
const
|
|
22
|
+
const I = {
|
|
18
23
|
title: "Atoms/ProgrammeCard",
|
|
19
24
|
component: t
|
|
20
|
-
}, s = (o) => /* @__PURE__ */
|
|
25
|
+
}, s = (o) => /* @__PURE__ */ r(n, { size: "large", children: /* @__PURE__ */ r(t, { ...o }) }), l = s.bind({});
|
|
21
26
|
l.args = {
|
|
22
27
|
header: "This is my header",
|
|
23
28
|
details: "This is my details",
|
|
24
29
|
onClick: a()
|
|
25
30
|
};
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
header: /* @__PURE__ */
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
/* @__PURE__ */
|
|
31
|
+
const p = s.bind({});
|
|
32
|
+
p.args = {
|
|
33
|
+
header: /* @__PURE__ */ e(i, { flexDirection: "row", gap: "150", children: [
|
|
34
|
+
/* @__PURE__ */ r(m, { name: "Envelope", size: 32 }),
|
|
35
|
+
/* @__PURE__ */ r("h2", { style: { margin: 0 }, children: "This is my header" })
|
|
31
36
|
] }),
|
|
32
|
-
details: /* @__PURE__ */
|
|
33
|
-
/* @__PURE__ */
|
|
34
|
-
/* @__PURE__ */
|
|
37
|
+
details: /* @__PURE__ */ e(i, { flexDirection: "row", gap: "150", children: [
|
|
38
|
+
/* @__PURE__ */ e(i, { flexDirection: "row", children: [
|
|
39
|
+
/* @__PURE__ */ r(m, { name: "FaceFrown" }),
|
|
35
40
|
"Details 1"
|
|
36
41
|
] }),
|
|
37
|
-
/* @__PURE__ */
|
|
38
|
-
/* @__PURE__ */
|
|
42
|
+
/* @__PURE__ */ e(i, { flexDirection: "row", children: [
|
|
43
|
+
/* @__PURE__ */ r(m, { name: "Heart" }),
|
|
39
44
|
"Details 2"
|
|
40
45
|
] }),
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
/* @__PURE__ */
|
|
46
|
+
/* @__PURE__ */ e(i, { flexDirection: "row", children: [
|
|
47
|
+
/* @__PURE__ */ r(m, { name: "Sparkles" }),
|
|
43
48
|
"Details 3"
|
|
44
49
|
] })
|
|
45
50
|
] }),
|
|
46
51
|
onClick: a()
|
|
47
52
|
};
|
|
48
|
-
const
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
/* @__PURE__ */
|
|
51
|
-
/* @__PURE__ */
|
|
52
|
-
] }) }), c =
|
|
53
|
+
const d = (o) => /* @__PURE__ */ r(n, { size: "large", children: /* @__PURE__ */ e(i, { children: [
|
|
54
|
+
/* @__PURE__ */ r(t, { ...o }),
|
|
55
|
+
/* @__PURE__ */ r(t, { ...o }),
|
|
56
|
+
/* @__PURE__ */ r(t, { ...o })
|
|
57
|
+
] }) }), c = d.bind({});
|
|
53
58
|
c.args = {
|
|
54
59
|
header: "This is my header",
|
|
55
60
|
details: "This is my details",
|
|
@@ -58,7 +63,7 @@ c.args = {
|
|
|
58
63
|
export {
|
|
59
64
|
c as MultiProgrammeCards,
|
|
60
65
|
l as ProgrammeCardExample,
|
|
61
|
-
|
|
62
|
-
|
|
66
|
+
p as WithComplexContent,
|
|
67
|
+
I as default
|
|
63
68
|
};
|
|
64
69
|
//# sourceMappingURL=ProgrammeCard.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from 'components/storyComponents/Container';\nimport { Icon, Repeater } from 'components';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ProgrammeCard',\n component: ProgrammeCard,\n} as Meta<ProgrammeCardProps>;\n\nconst Template: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <ProgrammeCard {...args} />\n </Container>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n header: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Icon name=\"Envelope\" size={32} />\n <h2 style={{ margin: 0 }}>This is my header</h2>\n </Repeater>\n ),\n details: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Repeater flexDirection=\"row\">\n <Icon name=\"FaceFrown\" />\n Details 1\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Heart\" />\n Details 2\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Sparkles\" />\n Details 3\n </Repeater>\n </Repeater>\n ),\n onClick: fn(),\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <Repeater>\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n </Repeater>\n </Container>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n"],"names":["ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","Container","ProgrammeCardExample","fn","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from 'components/storyComponents/Container';\nimport { Icon, Repeater } from 'components';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ProgrammeCard',\n component: ProgrammeCard,\n} as Meta<ProgrammeCardProps>;\n\nconst Template: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <ProgrammeCard {...args} />\n </Container>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n header: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Icon name=\"Envelope\" size={32} />\n <h2 style={{ margin: 0 }}>This is my header</h2>\n </Repeater>\n ),\n details: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Repeater flexDirection=\"row\">\n <Icon name=\"FaceFrown\" />\n Details 1\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Heart\" />\n Details 2\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Sparkles\" />\n Details 3\n </Repeater>\n </Repeater>\n ),\n onClick: fn(),\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <Repeater>\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n </Repeater>\n </Container>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n"],"names":["ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","Container","ProgrammeCardExample","fn","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAWA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AACb,GAEMC,IAAwC,CAACC,MAC5C,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAC,gBAAAD,EAAAH,GAAA,EAAe,GAAGE,EAAM,CAAA,EAC3B,CAAA,GAGWG,IAAuBJ,EAAS,KAAK,EAAE;AACpDI,EAAqB,OAAO;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASC,EAAG;AACd;AAEO,MAAMC,IAAqBN,EAAS,KAAK,EAAE;AAClDM,EAAmB,OAAO;AAAA,EACxB,QACG,gBAAAC,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAA,gBAAAN,EAACO,GAAK,EAAA,MAAK,YAAW,MAAM,IAAI;AAAA,sBAC/B,MAAG,EAAA,OAAO,EAAE,QAAQ,KAAK,UAAiB,qBAAA;AAAA,EAAA,GAC7C;AAAA,EAEF,SACG,gBAAAF,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAC,gBAAAD,EAAAC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,YAAY,CAAA;AAAA,MAAE;AAAA,IAAA,GAE3B;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,QAAQ,CAAA;AAAA,MAAE;AAAA,IAAA,GAEvB;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,WAAW,CAAA;AAAA,MAAE;AAAA,IAAA,GAE1B;AAAA,EAAA,GACF;AAAA,EAEF,SAASJ,EAAG;AACd;AAEA,MAAMK,IAA2D,CAACT,MAChE,gBAAAC,EAACC,KAAU,MAAK,SACd,4BAACK,GACC,EAAA,UAAA;AAAA,EAAC,gBAAAN,EAAAH,GAAA,EAAe,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EAC3B,CAAA,EACF,CAAA,GAGWU,IAAsBD,EAA4B,KAAK,EAAE;AACtEC,EAAoB,OAAO;AAAA,EACzB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASN,EAAG;AACd;"}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import '../../assets/Spinner.css';const
|
|
4
|
-
spinner:
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useState as a, useEffect as p } from "react";
|
|
3
|
+
import '../../assets/Spinner.css';const c = "_spinner_jd5vi_11", l = "_spin_jd5vi_11", i = {
|
|
4
|
+
"spinner-container": "_spinner-container_jd5vi_11",
|
|
5
|
+
spinner: c,
|
|
5
6
|
spin: l
|
|
6
|
-
},
|
|
7
|
-
const [
|
|
7
|
+
}, u = 250, m = ({ ariaValueText: r, showAfterMs: n = u }) => {
|
|
8
|
+
const [s, t] = a(() => n === 0);
|
|
8
9
|
return p(() => {
|
|
9
|
-
if (
|
|
10
|
+
if (n === 0)
|
|
10
11
|
return;
|
|
11
|
-
const
|
|
12
|
+
const o = window.setTimeout(() => {
|
|
12
13
|
t(!0);
|
|
13
|
-
},
|
|
14
|
+
}, n);
|
|
14
15
|
return () => {
|
|
15
|
-
window.clearTimeout(
|
|
16
|
+
window.clearTimeout(o);
|
|
16
17
|
};
|
|
17
|
-
}),
|
|
18
|
+
}), s ? /* @__PURE__ */ e("div", { className: i["spinner-container"], children: /* @__PURE__ */ e("div", { className: i.spinner, role: "progressbar", "aria-label": "Spinner", "aria-valuetext": r }) }) : null;
|
|
18
19
|
};
|
|
19
20
|
export {
|
|
20
|
-
|
|
21
|
+
m as Spinner
|
|
21
22
|
};
|
|
22
23
|
//# sourceMappingURL=Spinner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport styles from './Spinner.module.css';\n\nconst DEFAULT_DELAY_IN_MS = 250;\n\nexport interface SpinnerProps {\n ariaValueText: string;\n /** Delay in milliseconds after which the spinner becomes visible. The default is 250. */\n showAfterMs?: number;\n}\n\nexport const Spinner = ({ ariaValueText, showAfterMs = DEFAULT_DELAY_IN_MS }: SpinnerProps) => {\n const [visible, setVisible] = useState(() => (showAfterMs === 0 ? true : false));\n\n useEffect(() => {\n if (showAfterMs === 0) {\n return;\n }\n const t = window.setTimeout(() => {\n setVisible(true);\n }, showAfterMs);\n\n return () => {\n window.clearTimeout(t);\n };\n });\n\n if (!visible) {\n return null;\n }\n\n return (\n <div className={styles['spinner']} role=\"progressbar\" aria-label=\"Spinner\" aria-valuetext={ariaValueText}></div>\n );\n};\n"],"names":["DEFAULT_DELAY_IN_MS","Spinner","ariaValueText","showAfterMs","visible","setVisible","useState","useEffect","t","
|
|
1
|
+
{"version":3,"file":"Spinner.js","sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport styles from './Spinner.module.css';\n\nconst DEFAULT_DELAY_IN_MS = 250;\n\nexport interface SpinnerProps {\n ariaValueText: string;\n /** Delay in milliseconds after which the spinner becomes visible. The default is 250. */\n showAfterMs?: number;\n}\n\nexport const Spinner = ({ ariaValueText, showAfterMs = DEFAULT_DELAY_IN_MS }: SpinnerProps) => {\n const [visible, setVisible] = useState(() => (showAfterMs === 0 ? true : false));\n\n useEffect(() => {\n if (showAfterMs === 0) {\n return;\n }\n const t = window.setTimeout(() => {\n setVisible(true);\n }, showAfterMs);\n\n return () => {\n window.clearTimeout(t);\n };\n });\n\n if (!visible) {\n return null;\n }\n\n return (\n <div className={styles['spinner-container']}>\n <div className={styles['spinner']} role=\"progressbar\" aria-label=\"Spinner\" aria-valuetext={ariaValueText}></div>\n </div>\n );\n};\n"],"names":["DEFAULT_DELAY_IN_MS","Spinner","ariaValueText","showAfterMs","visible","setVisible","useState","useEffect","t","styles"],"mappings":";;;;;;GAIMA,IAAsB,KAQfC,IAAU,CAAC,EAAE,eAAAC,GAAe,aAAAC,IAAcH,QAAwC;AACvF,QAAA,CAACI,GAASC,CAAU,IAAIC,EAAS,MAAOH,MAAgB,CAAiB;AAe/E,SAbAI,EAAU,MAAM;AACd,QAAIJ,MAAgB;AAClB;AAEI,UAAAK,IAAI,OAAO,WAAW,MAAM;AAChC,MAAAH,EAAW,EAAI;AAAA,OACdF,CAAW;AAEd,WAAO,MAAM;AACX,aAAO,aAAaK,CAAC;AAAA,IAAA;AAAA,EACvB,CACD,GAEIJ,sBAKF,OAAI,EAAA,WAAWK,EAAO,mBAAmB,GACxC,4BAAC,OAAI,EAAA,WAAWA,EAAO,SAAY,MAAK,eAAc,cAAW,WAAU,kBAAgBP,GAAe,EAC5G,CAAA,IANO;AAQX;"}
|
package/dist/components/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { ActionList as p } from "./ActionList/ActionList.js";
|
|
|
3
3
|
import { AppStatusBar as f } from "./AppStatusBar/AppStatusBar.js";
|
|
4
4
|
import { Attention as i } from "./Attention/Attention.js";
|
|
5
5
|
import { Backdrop as n } from "./Backdrop/Backdrop.js";
|
|
6
|
-
import { Button as
|
|
6
|
+
import { Button as u } from "./Button/Button.js";
|
|
7
7
|
import { ButtonGroup as c } from "./ButtonGroup/ButtonGroup.js";
|
|
8
8
|
import { Card as S } from "./Card/Card.js";
|
|
9
9
|
import { Checkbox as M } from "./Checkbox/Checkbox.js";
|
|
@@ -21,16 +21,16 @@ import { Input as T } from "./Input/Input.js";
|
|
|
21
21
|
import { InputField as q } from "./InputField/InputField.js";
|
|
22
22
|
import { Label as K } from "./Label/Label.js";
|
|
23
23
|
import { MenuButton as U } from "./MenuButton/MenuButton.js";
|
|
24
|
-
import {
|
|
24
|
+
import { MenuLink as W } from "./MenuLink/MenuLink.js";
|
|
25
25
|
import { MetaDataList as Y } from "./MetaDataList/MetaDataList.js";
|
|
26
26
|
import { ModalDialog as _ } from "./ModalDialog/ModalDialog.js";
|
|
27
|
-
import { M as oo } from "../MultiSelect-
|
|
27
|
+
import { M as oo } from "../MultiSelect-B9JaIPXs.js";
|
|
28
28
|
import { OverlayCloseButton as to } from "./OverlayCloseButton/OverlayCloseButton.js";
|
|
29
29
|
import { Periods as po } from "./Periods/Periods.js";
|
|
30
30
|
import { ProgrammeCard as fo } from "./ProgrammeCard/ProgrammeCard.js";
|
|
31
31
|
import { RadioButton as io } from "./RadioButton/RadioButton.js";
|
|
32
32
|
import { Repeater as no } from "./Repeater/Repeater.js";
|
|
33
|
-
import { SectionNotification as
|
|
33
|
+
import { SectionNotification as uo } from "./SectionNotification/SectionNotification.js";
|
|
34
34
|
import { SelectListbox as co } from "./SelectListbox/SelectListbox.js";
|
|
35
35
|
import { SelectProvider as Bo, useSelect as Mo } from "./SelectListbox/SelectProvider.js";
|
|
36
36
|
import { Spinner as Do } from "./Spinner/Spinner.js";
|
|
@@ -42,7 +42,7 @@ export {
|
|
|
42
42
|
f as AppStatusBar,
|
|
43
43
|
i as Attention,
|
|
44
44
|
n as Backdrop,
|
|
45
|
-
|
|
45
|
+
u as Button,
|
|
46
46
|
c as ButtonGroup,
|
|
47
47
|
S as Card,
|
|
48
48
|
M as Checkbox,
|
|
@@ -69,7 +69,7 @@ export {
|
|
|
69
69
|
fo as ProgrammeCard,
|
|
70
70
|
io as RadioButton,
|
|
71
71
|
no as Repeater,
|
|
72
|
-
|
|
72
|
+
uo as SectionNotification,
|
|
73
73
|
co as SelectListbox,
|
|
74
74
|
Bo as SelectProvider,
|
|
75
75
|
Do as Spinner,
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { ActionList as p } from "./components/ActionList/ActionList.js";
|
|
|
3
3
|
import { AppStatusBar as f } from "./components/AppStatusBar/AppStatusBar.js";
|
|
4
4
|
import { Attention as i } from "./components/Attention/Attention.js";
|
|
5
5
|
import { Backdrop as n } from "./components/Backdrop/Backdrop.js";
|
|
6
|
-
import { Button as
|
|
6
|
+
import { Button as u } from "./components/Button/Button.js";
|
|
7
7
|
import { ButtonGroup as c } from "./components/ButtonGroup/ButtonGroup.js";
|
|
8
8
|
import { Card as S } from "./components/Card/Card.js";
|
|
9
9
|
import { Checkbox as M } from "./components/Checkbox/Checkbox.js";
|
|
@@ -21,16 +21,16 @@ import { Input as T } from "./components/Input/Input.js";
|
|
|
21
21
|
import { InputField as q } from "./components/InputField/InputField.js";
|
|
22
22
|
import { Label as K } from "./components/Label/Label.js";
|
|
23
23
|
import { MenuButton as U } from "./components/MenuButton/MenuButton.js";
|
|
24
|
-
import {
|
|
24
|
+
import { MenuLink as W } from "./components/MenuLink/MenuLink.js";
|
|
25
25
|
import { MetaDataList as Y } from "./components/MetaDataList/MetaDataList.js";
|
|
26
26
|
import { ModalDialog as _ } from "./components/ModalDialog/ModalDialog.js";
|
|
27
|
-
import { M as oo } from "./MultiSelect-
|
|
27
|
+
import { M as oo } from "./MultiSelect-B9JaIPXs.js";
|
|
28
28
|
import { OverlayCloseButton as to } from "./components/OverlayCloseButton/OverlayCloseButton.js";
|
|
29
29
|
import { Periods as po } from "./components/Periods/Periods.js";
|
|
30
30
|
import { ProgrammeCard as fo } from "./components/ProgrammeCard/ProgrammeCard.js";
|
|
31
31
|
import { RadioButton as io } from "./components/RadioButton/RadioButton.js";
|
|
32
32
|
import { Repeater as no } from "./components/Repeater/Repeater.js";
|
|
33
|
-
import { SectionNotification as
|
|
33
|
+
import { SectionNotification as uo } from "./components/SectionNotification/SectionNotification.js";
|
|
34
34
|
import { SelectListbox as co } from "./components/SelectListbox/SelectListbox.js";
|
|
35
35
|
import { SelectProvider as Bo, useSelect as Mo } from "./components/SelectListbox/SelectProvider.js";
|
|
36
36
|
import { Spinner as Do } from "./components/Spinner/Spinner.js";
|
|
@@ -42,7 +42,7 @@ export {
|
|
|
42
42
|
f as AppStatusBar,
|
|
43
43
|
i as Attention,
|
|
44
44
|
n as Backdrop,
|
|
45
|
-
|
|
45
|
+
u as Button,
|
|
46
46
|
c as ButtonGroup,
|
|
47
47
|
S as Card,
|
|
48
48
|
M as Checkbox,
|
|
@@ -69,7 +69,7 @@ export {
|
|
|
69
69
|
fo as ProgrammeCard,
|
|
70
70
|
io as RadioButton,
|
|
71
71
|
no as Repeater,
|
|
72
|
-
|
|
72
|
+
uo as SectionNotification,
|
|
73
73
|
co as SelectListbox,
|
|
74
74
|
Bo as SelectProvider,
|
|
75
75
|
Do as Spinner,
|
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": "1.
|
|
5
|
+
"version": "1.44.0",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -41,8 +41,9 @@
|
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@commitlint/cli": "^19.4.0",
|
|
43
43
|
"@commitlint/config-conventional": "^19.2.2",
|
|
44
|
-
"@react-aria/
|
|
45
|
-
"@react-aria/
|
|
44
|
+
"@react-aria/button": "^3.9.8",
|
|
45
|
+
"@react-aria/dialog": "^3.5.17",
|
|
46
|
+
"@react-aria/overlays": "^3.23.2",
|
|
46
47
|
"@react-types/dialog": "^3.5.12",
|
|
47
48
|
"@semantic-release/git": "^10.0.1",
|
|
48
49
|
"@semantic-release/gitlab": "^13.2.1",
|
|
@@ -55,7 +56,7 @@
|
|
|
55
56
|
"@storybook/react": "^8.2.9",
|
|
56
57
|
"@storybook/react-vite": "^8.2.9",
|
|
57
58
|
"@storybook/test": "^8.2.9",
|
|
58
|
-
"@types/node": "^20.
|
|
59
|
+
"@types/node": "^20.16.1",
|
|
59
60
|
"@types/react": "^18.3.3",
|
|
60
61
|
"@types/react-dom": "^18.3.0",
|
|
61
62
|
"@uva-glass/eslint-config": "^1.3.1",
|
|
@@ -77,22 +78,19 @@
|
|
|
77
78
|
"npm-run-all2": "^6.2.2",
|
|
78
79
|
"react": "^18.3.1",
|
|
79
80
|
"react-dom": "^18.3.1",
|
|
80
|
-
"react-router-dom": "^6.26.
|
|
81
|
-
"semantic-release": "^24.
|
|
81
|
+
"react-router-dom": "^6.26.1",
|
|
82
|
+
"semantic-release": "^24.1.0",
|
|
82
83
|
"storybook": "^8.2.9",
|
|
83
84
|
"style-dictionary": "^4.0.1",
|
|
84
|
-
"stylelint": "^16.8.
|
|
85
|
+
"stylelint": "^16.8.2",
|
|
85
86
|
"stylelint-config-recommended": "^14.0.1",
|
|
86
87
|
"stylelint-config-standard": "^36.0.1",
|
|
87
88
|
"stylelint-order": "^6.0.4",
|
|
88
89
|
"typescript": "^5.5.4",
|
|
89
|
-
"vite": "^5.4.
|
|
90
|
-
"vite-plugin-dts": "^4.0.
|
|
90
|
+
"vite": "^5.4.1",
|
|
91
|
+
"vite-plugin-dts": "^4.0.3",
|
|
91
92
|
"vite-plugin-lib-inject-css": "^2.1.1",
|
|
92
93
|
"vite-plugin-svgr": "^4.2.0",
|
|
93
94
|
"vite-tsconfig-paths": "^5.0.1"
|
|
94
|
-
},
|
|
95
|
-
"dependencies": {
|
|
96
|
-
"react-aria": "^3.34.1"
|
|
97
95
|
}
|
|
98
96
|
}
|