@uva-glass/component-library 1.47.8 → 1.48.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/CheckboxTree.css +1 -0
- package/dist/components/Button/Button.stories.js +9 -9
- package/dist/components/Checkbox/Checkbox.stories.js +13 -13
- package/dist/components/Checkbox/Checkbox.stories.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.d.ts +20 -0
- package/dist/components/CheckboxTree/CheckboxTree.js +120 -0
- package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -0
- package/dist/components/CheckboxTree/CheckboxTree.stories.d.ts +5 -0
- package/dist/components/CheckboxTree/CheckboxTree.stories.js +74 -0
- package/dist/components/CheckboxTree/CheckboxTree.stories.js.map +1 -0
- package/dist/components/CheckboxTree/index.d.ts +1 -0
- package/dist/components/CheckboxTree/index.js +5 -0
- package/dist/components/CheckboxTree/index.js.map +1 -0
- package/dist/components/Drawer/Drawer.stories.js +1 -1
- package/dist/components/FeedbackBox/FeedbackBox.stories.js +10 -7
- package/dist/components/FeedbackBox/FeedbackBox.stories.js.map +1 -1
- package/dist/components/IconButton/IconButton.stories.js +1 -1
- package/dist/components/InputField/InputField.stories.js +1 -1
- package/dist/components/MenuButton/MenuButton.stories.js +10 -10
- package/dist/components/ModalDialog/ModalDialog.stories.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.js +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +65 -63
- package/dist/components/index.js.map +1 -1
- package/dist/index-2mUSc_Ki.js +8 -0
- package/dist/index-2mUSc_Ki.js.map +1 -0
- package/dist/{index-CuON43Qx.js → index-MQ0yPLdl.js} +89 -12
- package/dist/{index-CuON43Qx.js.map → index-MQ0yPLdl.js.map} +1 -1
- package/dist/index.js +65 -63
- package/dist/index.js.map +1 -1
- package/dist/react-18-m8Z-Ep7B.js +52 -0
- package/dist/react-18-m8Z-Ep7B.js.map +1 -0
- package/dist/storybook__react.d-fgYZl9aD.js +21053 -0
- package/dist/storybook__react.d-fgYZl9aD.js.map +1 -0
- package/dist/storybook__react.d.js +2 -0
- package/dist/storybook__react.d.js.map +1 -0
- package/package.json +14 -14
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._checkbox-tree__header_12b1f_1{display:block;font-weight:var(--semibold);margin-bottom:.75rem;text-align:left}._checkbox-tree__branch_12b1f_8{list-style:none;-webkit-user-select:none;user-select:none}._checkbox-tree__branch_12b1f_8 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}._checkbox-tree__branch--icon_12b1f_17{pointer-events:none;transform:rotate(0);transition:transform .3s ease-out}._checkbox-tree__branch--icon--expanded_12b1f_23{transform:rotate(90deg);transition:transform .3s ease-in}._checkbox-tree__branch--formfield_12b1f_28{align-items:center;display:flex;flex-direction:row;gap:.5rem}._checkbox-tree__leaves_12b1f_35{display:none;flex-direction:column;gap:1rem;list-style:none;margin:1rem 0 1rem 1rem;-webkit-user-select:none;user-select:none}._checkbox-tree__leaves--expanded_12b1f_44{display:flex}._checkbox-tree__leaf_12b1f_48{align-items:center;display:flex;flex-direction:row;gap:0 .5rem;margin-left:1.5rem;-webkit-user-select:none;user-select:none}._checkbox-tree__leaf_12b1f_48 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs as a, Fragment as s, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { Button as
|
|
2
|
+
import { fn as l } from "../../index-MQ0yPLdl.js";
|
|
3
|
+
import { Button as r } from "./Button.js";
|
|
4
4
|
const d = "<Button variant={variant} onClick={onClictFunction}>{children}</Button>", h = {
|
|
5
5
|
title: "Atoms/Button",
|
|
6
|
-
component:
|
|
6
|
+
component: r,
|
|
7
7
|
argTypes: {
|
|
8
8
|
variant: {
|
|
9
9
|
options: ["primary", "secondary", "destructive-primary", "destructive-secondary", "blank"],
|
|
@@ -13,7 +13,7 @@ const d = "<Button variant={variant} onClick={onClictFunction}>{children}</Butto
|
|
|
13
13
|
parameters: {
|
|
14
14
|
codeString: d
|
|
15
15
|
}
|
|
16
|
-
}, i = (o) => /* @__PURE__ */ t(
|
|
16
|
+
}, i = (o) => /* @__PURE__ */ t(r, { ...o }), e = {
|
|
17
17
|
variant: "primary",
|
|
18
18
|
disabled: !1,
|
|
19
19
|
displayColumn: !1,
|
|
@@ -23,16 +23,16 @@ c.args = {
|
|
|
23
23
|
children: "Click me!",
|
|
24
24
|
...e
|
|
25
25
|
};
|
|
26
|
-
const
|
|
27
|
-
|
|
26
|
+
const n = i.bind({});
|
|
27
|
+
n.args = {
|
|
28
28
|
...e,
|
|
29
29
|
children: /* @__PURE__ */ a(s, { children: [
|
|
30
30
|
/* @__PURE__ */ t("div", { children: "Child 1" }),
|
|
31
31
|
/* @__PURE__ */ t("div", { children: "Child 2" })
|
|
32
32
|
] })
|
|
33
33
|
};
|
|
34
|
-
|
|
35
|
-
...
|
|
34
|
+
n.argTypes = {
|
|
35
|
+
...n.argTypes,
|
|
36
36
|
children: {
|
|
37
37
|
table: {
|
|
38
38
|
disable: !0
|
|
@@ -42,7 +42,7 @@ r.argTypes = {
|
|
|
42
42
|
};
|
|
43
43
|
export {
|
|
44
44
|
c as ButtonExample,
|
|
45
|
-
|
|
45
|
+
n as WithMultipleChildren,
|
|
46
46
|
h as default
|
|
47
47
|
};
|
|
48
48
|
//# sourceMappingURL=Button.stories.js.map
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsxs as g, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { fn as e } from "../../index-MQ0yPLdl.js";
|
|
3
3
|
import { Checkbox as l } from "./Checkbox.js";
|
|
4
4
|
import { FormField as t } from "../FormField/FormField.js";
|
|
5
|
-
import { Label as
|
|
6
|
-
const
|
|
5
|
+
import { Label as r } from "../Label/Label.js";
|
|
6
|
+
const i = "<Checkbox checked={} id={} onChange={} />", f = {
|
|
7
7
|
title: "Atoms/Checkbox",
|
|
8
8
|
component: l,
|
|
9
9
|
parameters: {
|
|
10
|
-
codeString:
|
|
10
|
+
codeString: i
|
|
11
11
|
}
|
|
12
|
-
},
|
|
12
|
+
}, m = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
|
|
13
13
|
/* @__PURE__ */ o(l, { id: "72103b4d", ...n }),
|
|
14
|
-
/* @__PURE__ */ o(
|
|
15
|
-
] }), a =
|
|
14
|
+
/* @__PURE__ */ o(r, { htmlFor: "72103b4d", children: "Example Checkbox" })
|
|
15
|
+
] }), a = m.bind({});
|
|
16
16
|
a.args = {
|
|
17
17
|
onChange: e()
|
|
18
18
|
};
|
|
19
|
-
const
|
|
19
|
+
const c = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
|
|
20
20
|
/* @__PURE__ */ o(
|
|
21
21
|
"div",
|
|
22
22
|
{
|
|
@@ -27,14 +27,14 @@ const h = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
|
|
|
27
27
|
children: /* @__PURE__ */ o(l, { id: "72103b4e", ...n })
|
|
28
28
|
}
|
|
29
29
|
),
|
|
30
|
-
/* @__PURE__ */ o(
|
|
31
|
-
] }),
|
|
32
|
-
|
|
30
|
+
/* @__PURE__ */ o(r, { htmlFor: "72103b4e", children: "Example Checkbox with long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long label" })
|
|
31
|
+
] }), h = c.bind({});
|
|
32
|
+
h.args = {
|
|
33
33
|
onChange: e()
|
|
34
34
|
};
|
|
35
35
|
export {
|
|
36
36
|
a as CheckboxExample,
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
h as WithLongLabel,
|
|
38
|
+
f as default
|
|
39
39
|
};
|
|
40
40
|
//# sourceMappingURL=Checkbox.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.stories.js","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxProps } from './Checkbox';\n\nimport { Checkbox } from './Checkbox';\n\nimport { FormField } from 'components/FormField';\nimport { Label } from 'components/Label';\n\nconst codeString = '<Checkbox checked={
|
|
1
|
+
{"version":3,"file":"Checkbox.stories.js","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxProps } from './Checkbox';\n\nimport { Checkbox } from './Checkbox';\n\nimport { FormField } from 'components/FormField';\nimport { Label } from 'components/Label';\n\nconst codeString = '<Checkbox checked={} id={} onChange={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Checkbox',\n component: Checkbox,\n parameters: {\n codeString: codeString,\n },\n} as Meta<CheckboxProps>;\n\nconst Template: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <Checkbox id=\"72103b4d\" {...args} />\n <Label htmlFor=\"72103b4d\">Example Checkbox</Label>\n </FormField>\n);\n\nexport const CheckboxExample = Template.bind({});\nCheckboxExample.args = {\n onChange: fn(),\n};\n\n// Extra story created for UX to see how we can solve placement of checkbox when paired with long content\n// TODO: should this component be refactored to always include a label? (see RadioButton)\nconst WithLongLabelTemplate: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <div\n style={{\n alignSelf: 'flex-start',\n marginTop: '0.18rem',\n }}\n >\n <Checkbox id=\"72103b4e\" {...args} />\n </div>\n <Label htmlFor=\"72103b4e\">\n Example Checkbox with long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long label\n </Label>\n </FormField>\n);\n\nexport const WithLongLabel = WithLongLabelTemplate.bind({});\nWithLongLabel.args = {\n onChange: fn(),\n};\n"],"names":["codeString","Checkbox_stories","Checkbox","Template","args","jsxs","FormField","jsx","Label","CheckboxExample","fn","WithLongLabelTemplate","WithLongLabel"],"mappings":";;;;;AAUA,MAAMA,IAAa,6CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAmC,CAACC,MACvC,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC,EAACL,GAAS,EAAA,IAAG,YAAY,GAAGE,EAAM,CAAA;AAAA,EACjC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAgB,oBAAA;AAAA,EAC5C,CAAA,GAGWC,IAAkBN,EAAS,KAAK,EAAE;AAC/CM,EAAgB,OAAO;AAAA,EACrB,UAAUC,EAAG;AACf;AAIA,MAAMC,IAAgD,CAACP,MACpD,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,MAEA,UAAC,gBAAAA,EAAAL,GAAA,EAAS,IAAG,YAAY,GAAGE,GAAM;AAAA,IAAA;AAAA,EACpC;AAAA,EACC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAK1B,sZAAA;AAAA,EACF,CAAA,GAGWI,IAAgBD,EAAsB,KAAK,EAAE;AAC1DC,EAAc,OAAO;AAAA,EACnB,UAAUF,EAAG;AACf;"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
type CheckboxLeaf = {
|
|
2
|
+
itemName: string;
|
|
3
|
+
itemValue: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
};
|
|
6
|
+
type CheckboxBranch = {
|
|
7
|
+
itemName: string;
|
|
8
|
+
children: CheckboxLeaf[];
|
|
9
|
+
};
|
|
10
|
+
export interface CheckboxTreeProps {
|
|
11
|
+
title?: string;
|
|
12
|
+
/** array of checkbox groups with a label and array of children (itemname, itemvalue and disabled boolean)*/
|
|
13
|
+
checkboxTree: CheckboxBranch[];
|
|
14
|
+
/** array of selected values */
|
|
15
|
+
defaultValue?: string[];
|
|
16
|
+
/** returns array of selected values*/
|
|
17
|
+
onChange?: (value: string[]) => void;
|
|
18
|
+
}
|
|
19
|
+
export declare const CheckboxTree: ({ title, checkboxTree, defaultValue, onChange }: CheckboxTreeProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { jsxs as l, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as T, useEffect as N } from "react";
|
|
3
|
+
import { c as g } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { Icon as L } from "../Icon/Icon.js";
|
|
5
|
+
import "@react-aria/button";
|
|
6
|
+
import { Button as R } from "../Button/Button.js";
|
|
7
|
+
import { Checkbox as y } from "../Checkbox/Checkbox.js";
|
|
8
|
+
import "@react-aria/dialog";
|
|
9
|
+
import "@react-aria/focus";
|
|
10
|
+
import "@react-aria/overlays";
|
|
11
|
+
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
12
|
+
import { FormField as S } from "../FormField/FormField.js";
|
|
13
|
+
import "../GridRow/GridRow.js";
|
|
14
|
+
import "../IconButton/IconButton.js";
|
|
15
|
+
import "../Input/Input.js";
|
|
16
|
+
import "../InputField/InputField.js";
|
|
17
|
+
import { Label as C } from "../Label/Label.js";
|
|
18
|
+
import "react-router-dom";
|
|
19
|
+
import "../../MultiSelect-Ckf3uGw5.js";
|
|
20
|
+
import "../SelectListbox/SelectListbox.js";
|
|
21
|
+
import "../SelectListbox/SelectProvider.js";
|
|
22
|
+
import { useResponsive as j } from "../hooks/useResponsive.js";
|
|
23
|
+
import '../../assets/CheckboxTree.css';const o = {
|
|
24
|
+
"checkbox-tree__header": "_checkbox-tree__header_12b1f_1",
|
|
25
|
+
"checkbox-tree__branch": "_checkbox-tree__branch_12b1f_8",
|
|
26
|
+
"checkbox-tree__branch--icon": "_checkbox-tree__branch--icon_12b1f_17",
|
|
27
|
+
"checkbox-tree__branch--icon--expanded": "_checkbox-tree__branch--icon--expanded_12b1f_23",
|
|
28
|
+
"checkbox-tree__branch--formfield": "_checkbox-tree__branch--formfield_12b1f_28",
|
|
29
|
+
"checkbox-tree__leaves": "_checkbox-tree__leaves_12b1f_35",
|
|
30
|
+
"checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_12b1f_44",
|
|
31
|
+
"checkbox-tree__leaf": "_checkbox-tree__leaf_12b1f_48"
|
|
32
|
+
}, ce = ({ title: p, checkboxTree: A, defaultValue: i, onChange: u }) => {
|
|
33
|
+
const s = T([]), { lessThan: n } = j(), _ = (r, e = document) => [].slice.call(e.querySelectorAll(r)), E = () => {
|
|
34
|
+
const r = s.current.reduce((e, t) => (t.name && t.checked && e.push(t.value), e), []);
|
|
35
|
+
u && u(r);
|
|
36
|
+
}, f = (r) => {
|
|
37
|
+
var e, t, d;
|
|
38
|
+
for (; r; ) {
|
|
39
|
+
const c = (t = (e = r.closest("[data-ul]")) == null ? void 0 : e.parentNode) == null ? void 0 : t.querySelector("input"), x = _(
|
|
40
|
+
"input",
|
|
41
|
+
(d = c == null ? void 0 : c.closest("[data-li]")) == null ? void 0 : d.querySelector("[data-ul]")
|
|
42
|
+
).reduce((k, v) => (v.disabled || k.push(v.checked), k), []), b = x.every(Boolean), F = x.some(Boolean);
|
|
43
|
+
if (c && (c.checked = b, c.indeterminate = !b && b !== F), !c || r === c)
|
|
44
|
+
break;
|
|
45
|
+
r = c;
|
|
46
|
+
}
|
|
47
|
+
}, m = (r, e) => {
|
|
48
|
+
var d, c;
|
|
49
|
+
const t = e == null ? void 0 : e.querySelector("[data-ul]");
|
|
50
|
+
r.childNodes[0].classList.toggle(o["checkbox-tree__branch--icon--expanded"]), (c = e == null ? void 0 : e.closest("[data-li]")) == null || c.setAttribute(
|
|
51
|
+
"aria-expanded",
|
|
52
|
+
((d = e == null ? void 0 : e.closest("[data-li]")) == null ? void 0 : d.getAttribute("aria-expanded")) === "false" ? "true" : "false"
|
|
53
|
+
), t && t.classList.toggle(o["checkbox-tree__leaves--expanded"]);
|
|
54
|
+
}, q = (r) => {
|
|
55
|
+
var c;
|
|
56
|
+
const e = r.target;
|
|
57
|
+
if (!e || !e.parentNode || !e.parentNode.parentNode) return;
|
|
58
|
+
const t = e.parentNode.parentNode;
|
|
59
|
+
if (n.md && ((c = e.previousElementSibling) == null ? void 0 : c.tagName) === "BUTTON" && t.getAttribute("aria-expanded") === "false") {
|
|
60
|
+
r.preventDefault(), m(t.querySelector("button"), t);
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
if (s.current.indexOf(e) === -1) return;
|
|
64
|
+
(e.parentNode.parentNode ? _("input", e.parentNode.parentNode) : []).forEach((h) => h.checked = h.disabled ? !1 : e.checked), f(e), E();
|
|
65
|
+
}, B = (r) => {
|
|
66
|
+
const e = r.target, t = e.closest("[data-li]");
|
|
67
|
+
m(e, t);
|
|
68
|
+
};
|
|
69
|
+
return N(() => {
|
|
70
|
+
s.current = _("input") || [];
|
|
71
|
+
}, []), N(() => {
|
|
72
|
+
i && s.current.forEach((r) => {
|
|
73
|
+
i.includes(r.value) && (r.checked = !0, f(r));
|
|
74
|
+
});
|
|
75
|
+
}, [i]), /* @__PURE__ */ l("div", { children: [
|
|
76
|
+
p && /* @__PURE__ */ a("span", { className: o["checkbox-tree__header"], children: p }),
|
|
77
|
+
/* @__PURE__ */ a("div", { onClick: q, "data-ul": !0, role: "tree", tabIndex: 0, children: A.map(({ itemName: r, children: e }) => /* @__PURE__ */ l(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
className: o["checkbox-tree__branch"],
|
|
81
|
+
"data-li": !0,
|
|
82
|
+
"aria-expanded": n.md ? "false" : "true",
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ l(S, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
|
|
85
|
+
/* @__PURE__ */ a(R, { variant: "blank", onClick: B, children: /* @__PURE__ */ a(
|
|
86
|
+
L,
|
|
87
|
+
{
|
|
88
|
+
name: "CheveronRight",
|
|
89
|
+
size: 16,
|
|
90
|
+
className: g(o["checkbox-tree__branch--icon"], {
|
|
91
|
+
[o["checkbox-tree__branch--icon--expanded"]]: !n.md
|
|
92
|
+
})
|
|
93
|
+
}
|
|
94
|
+
) }),
|
|
95
|
+
/* @__PURE__ */ a(y, { id: r, disabled: e.every((t) => t.disabled) }),
|
|
96
|
+
/* @__PURE__ */ a(C, { htmlFor: r, children: r })
|
|
97
|
+
] }),
|
|
98
|
+
/* @__PURE__ */ a(
|
|
99
|
+
"div",
|
|
100
|
+
{
|
|
101
|
+
className: g(o["checkbox-tree__leaves"], {
|
|
102
|
+
[o["checkbox-tree__leaves--expanded"]]: !n.md
|
|
103
|
+
}),
|
|
104
|
+
"data-ul": !0,
|
|
105
|
+
children: e.map(({ itemName: t, itemValue: d, disabled: c }) => /* @__PURE__ */ a("div", { className: o["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ l(S, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
|
|
106
|
+
/* @__PURE__ */ a(y, { id: t, name: t, value: d, disabled: c }),
|
|
107
|
+
/* @__PURE__ */ a(C, { htmlFor: t, children: t })
|
|
108
|
+
] }) }, t))
|
|
109
|
+
}
|
|
110
|
+
)
|
|
111
|
+
]
|
|
112
|
+
},
|
|
113
|
+
r
|
|
114
|
+
)) })
|
|
115
|
+
] });
|
|
116
|
+
};
|
|
117
|
+
export {
|
|
118
|
+
ce as CheckboxTree
|
|
119
|
+
};
|
|
120
|
+
//# sourceMappingURL=CheckboxTree.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { MouseEventHandler } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Checkbox, Label, FormField, Icon, Button } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\ntype CheckboxLeaf = {\n itemName: string;\n itemValue: string;\n disabled?: boolean;\n};\n\ntype CheckboxBranch = {\n itemName: string;\n children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n title?: string;\n /** array of checkbox groups with a label and array of children (itemname, itemvalue and disabled boolean)*/\n checkboxTree: CheckboxBranch[];\n /** array of selected values */\n defaultValue?: string[];\n /** returns array of selected values*/\n onChange?: (value: string[]) => void;\n}\n\nexport const CheckboxTree = ({ title, checkboxTree, defaultValue, onChange }: CheckboxTreeProps) => {\n const checkboxNodes = useRef<HTMLInputElement[]>([]);\n const { lessThan } = useResponsive();\n\n const nodeArray = (selector: string, parent = document) => [].slice.call(parent.querySelectorAll(selector));\n\n const setValue = () => {\n const values = checkboxNodes.current.reduce((values, checkbox) => {\n if (checkbox.name && checkbox.checked) {\n values.push(checkbox.value);\n }\n return values;\n }, [] as string[]);\n\n if (onChange) onChange(values);\n };\n\n const setCheckboxesState = (check: HTMLInputElement) => {\n while (check) {\n const parent = check.closest('[data-ul]')?.parentNode?.querySelector('input');\n const siblings: HTMLInputElement[] = nodeArray(\n 'input',\n parent?.closest('[data-li]')?.querySelector('[data-ul]') as Document | undefined\n );\n\n const checkStatus = siblings.reduce((status, check) => {\n if (!check.disabled) status.push(check.checked);\n return status;\n }, [] as boolean[]);\n\n const every = checkStatus.every(Boolean);\n const some = checkStatus.some(Boolean);\n\n if (parent) {\n parent.checked = every;\n parent.indeterminate = !every && every !== some;\n }\n\n if (!parent || check === parent) {\n break;\n }\n\n check = parent;\n }\n };\n\n const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element | null) => {\n const children = container?.querySelector('[data-ul]');\n\n (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n container\n ?.closest('[data-li]')\n ?.setAttribute(\n 'aria-expanded',\n container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n );\n\n if (children) {\n children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n }\n };\n\n const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n const check = event.target as HTMLInputElement;\n\n if (!check || !check.parentNode || !check.parentNode.parentNode) return;\n const parentCheckbox = check.parentNode.parentNode as HTMLElement;\n\n if (\n lessThan.md &&\n check.previousElementSibling?.tagName === 'BUTTON' &&\n parentCheckbox.getAttribute('aria-expanded') === 'false'\n ) {\n event.preventDefault();\n setExpandedAttributes(parentCheckbox.querySelector('button') as HTMLButtonElement, parentCheckbox);\n return;\n }\n\n if (checkboxNodes.current.indexOf(check) === -1) return;\n\n const children: HTMLInputElement[] = (check.parentNode.parentNode as Document)\n ? nodeArray('input', check.parentNode.parentNode as Document)\n : [];\n\n children.forEach((child) => {\n return (child.checked = child.disabled ? false : check.checked);\n });\n\n setCheckboxesState(check);\n setValue();\n };\n\n const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n const target = event.target as HTMLButtonElement;\n const parent = target.closest('[data-li]');\n setExpandedAttributes(target, parent);\n };\n\n useEffect(() => {\n checkboxNodes.current = nodeArray('input') || [];\n }, []);\n\n useEffect(() => {\n if (defaultValue) {\n checkboxNodes.current.forEach((checkbox) => {\n if (defaultValue.includes(checkbox.value)) {\n checkbox.checked = true;\n setCheckboxesState(checkbox);\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [defaultValue]);\n\n return (\n <div>\n {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n {checkboxTree.map(({ itemName, children }) => (\n <div\n key={itemName}\n className={styles['checkbox-tree__branch']}\n data-li\n aria-expanded={lessThan.md ? 'false' : 'true'}\n >\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Button variant=\"blank\" onClick={handleExpanded}>\n <Icon\n name=\"CheveronRight\"\n size={16}\n className={clsx(styles['checkbox-tree__branch--icon'], {\n [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n })}\n />\n </Button>\n <Checkbox id={itemName} disabled={children.every((checkbox) => checkbox.disabled)} />\n <Label htmlFor={itemName}>{itemName}</Label>\n </FormField>\n <div\n className={clsx(styles['checkbox-tree__leaves'], {\n [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n })}\n data-ul\n >\n {children.map(({ itemName, itemValue, disabled }) => (\n <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Checkbox id={itemName} name={itemName} value={itemValue} disabled={disabled} />\n <Label htmlFor={itemName}>{itemName}</Label>\n </FormField>\n </div>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxTree","title","checkboxTree","defaultValue","onChange","checkboxNodes","useRef","lessThan","useResponsive","nodeArray","selector","parent","setValue","values","checkbox","setCheckboxesState","check","_b","_a","checkStatus","_c","status","every","some","setExpandedAttributes","trigger","container","children","styles","handleChange","event","parentCheckbox","child","handleExpanded","target","useEffect","itemName","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","Label","itemValue","disabled"],"mappings":"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"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react';
|
|
2
|
+
import { CheckboxTreeProps } from './CheckboxTree';
|
|
3
|
+
declare const _default: Meta<CheckboxTreeProps>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const CheckboxTreeExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxTreeProps>;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { fn as m } from "../../index-MQ0yPLdl.js";
|
|
3
|
+
import { CheckboxTree as e } from "./CheckboxTree.js";
|
|
4
|
+
const i = [
|
|
5
|
+
{
|
|
6
|
+
itemName: "Semester 1",
|
|
7
|
+
children: [
|
|
8
|
+
{
|
|
9
|
+
itemName: "1.1",
|
|
10
|
+
itemValue: "1",
|
|
11
|
+
disabled: !0
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
itemName: "1.2",
|
|
15
|
+
itemValue: "2",
|
|
16
|
+
disabled: !1
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
itemName: "1.3",
|
|
20
|
+
itemValue: "3",
|
|
21
|
+
disabled: !1
|
|
22
|
+
}
|
|
23
|
+
]
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
itemName: "Semester 2",
|
|
27
|
+
children: [
|
|
28
|
+
{
|
|
29
|
+
itemName: "2.1",
|
|
30
|
+
itemValue: "4",
|
|
31
|
+
disabled: !1
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
itemName: "2.2",
|
|
35
|
+
itemValue: "5",
|
|
36
|
+
disabled: !0
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
itemName: "2.3",
|
|
40
|
+
itemValue: "6",
|
|
41
|
+
disabled: !1
|
|
42
|
+
}
|
|
43
|
+
]
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
itemName: "Semester 3",
|
|
47
|
+
children: [
|
|
48
|
+
{
|
|
49
|
+
itemName: "3",
|
|
50
|
+
itemValue: "7",
|
|
51
|
+
disabled: !1
|
|
52
|
+
}
|
|
53
|
+
]
|
|
54
|
+
}
|
|
55
|
+
], l = "<CheckboxTree title={} checkboxTree={} defaultValue={} onChange={} />", c = {
|
|
56
|
+
title: "Organisms/CheckboxTree",
|
|
57
|
+
component: e,
|
|
58
|
+
parameters: {
|
|
59
|
+
inspectComponent: e,
|
|
60
|
+
codeString: l
|
|
61
|
+
}
|
|
62
|
+
}, s = (t) => /* @__PURE__ */ a(e, { ...t }), r = s.bind({});
|
|
63
|
+
r.args = {
|
|
64
|
+
title: "Periode",
|
|
65
|
+
checkboxTree: i,
|
|
66
|
+
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
|
|
67
|
+
defaultValue: ["3", "5"],
|
|
68
|
+
onChange: m()
|
|
69
|
+
};
|
|
70
|
+
export {
|
|
71
|
+
r as CheckboxTreeExample,
|
|
72
|
+
c as default
|
|
73
|
+
};
|
|
74
|
+
//# sourceMappingURL=CheckboxTree.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxTree.stories.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxTreeProps } from './CheckboxTree';\n\nimport { CheckboxTree } from './CheckboxTree';\n\nconst MOCK_CHECKBOX_TREE = [\n {\n itemName: 'Semester 1',\n children: [\n {\n itemName: '1.1',\n itemValue: '1',\n disabled: true,\n },\n {\n itemName: '1.2',\n itemValue: '2',\n disabled: false,\n },\n {\n itemName: '1.3',\n itemValue: '3',\n disabled: false,\n },\n ],\n },\n {\n itemName: 'Semester 2',\n children: [\n {\n itemName: '2.1',\n itemValue: '4',\n disabled: false,\n },\n {\n itemName: '2.2',\n itemValue: '5',\n disabled: true,\n },\n {\n itemName: '2.3',\n itemValue: '6',\n disabled: false,\n },\n ],\n },\n {\n itemName: 'Semester 3',\n children: [\n {\n itemName: '3',\n itemValue: '7',\n disabled: false,\n },\n ],\n },\n];\n\nconst codeString = '<CheckboxTree title={} checkboxTree={} defaultValue={} onChange={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Organisms/CheckboxTree',\n component: CheckboxTree,\n parameters: {\n inspectComponent: CheckboxTree,\n codeString: codeString,\n },\n} as Meta<CheckboxTreeProps>;\n\nconst Template: StoryFn<CheckboxTreeProps> = (args) => <CheckboxTree {...args} />;\n\nexport const CheckboxTreeExample = Template.bind({});\nCheckboxTreeExample.args = {\n title: 'Periode',\n checkboxTree: MOCK_CHECKBOX_TREE,\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n defaultValue: ['3', '5'],\n onChange: fn(),\n};\n"],"names":["MOCK_CHECKBOX_TREE","codeString","CheckboxTree_stories","CheckboxTree","Template","args","jsx","CheckboxTreeExample","fn"],"mappings":";;;AAOA,MAAMA,IAAqB;AAAA,EACzB;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,MACR;AAAA,QACE,UAAU;AAAA,QACV,WAAW;AAAA,QACX,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAa,0EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAuC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAc,GAAGE,EAAM,CAAA,GAElEE,IAAsBH,EAAS,KAAK,EAAE;AACnDG,EAAoB,OAAO;AAAA,EACzB,OAAO;AAAA,EACP,cAAcP;AAAA;AAAA,EAEd,cAAc,CAAC,KAAK,GAAG;AAAA,EACvB,UAAUQ,EAAG;AACf;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './CheckboxTree';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as n, jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { OverlayProvider as p } from "@react-aria/overlays";
|
|
3
|
-
import {
|
|
3
|
+
import { fn as m } from "../../index-MQ0yPLdl.js";
|
|
4
4
|
import { useState as u } from "react";
|
|
5
5
|
import { Drawer as a } from "./Drawer.js";
|
|
6
6
|
import { Button as r } from "../Button/Button.js";
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { FeedbackBox as o } from "./FeedbackBox.js";
|
|
3
|
-
import { Container as
|
|
4
|
-
const
|
|
3
|
+
import { Container as c } from "../../storyComponents/Container/Container.js";
|
|
4
|
+
const t = "<FeedbackBox id={id} level={level} feedback={feedback} />", b = {
|
|
5
5
|
title: "Molecules/FeedbackBox",
|
|
6
|
-
component: o
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
component: o,
|
|
7
|
+
parameters: {
|
|
8
|
+
codeString: t
|
|
9
|
+
}
|
|
10
|
+
}, d = (a) => /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(o, { ...a }) }), l = d.bind({});
|
|
11
|
+
l.args = {
|
|
9
12
|
id: "gba0d2d4",
|
|
10
13
|
level: "success",
|
|
11
14
|
feedback: "Example FeedbackBox text"
|
|
12
15
|
};
|
|
13
16
|
export {
|
|
14
|
-
|
|
15
|
-
|
|
17
|
+
l as FeedbackBoxExample,
|
|
18
|
+
b as default
|
|
16
19
|
};
|
|
17
20
|
//# sourceMappingURL=FeedbackBox.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FeedbackBox.stories.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FeedbackBoxProps } from './FeedbackBox';\n\nimport { FeedbackBox } from './FeedbackBox';\n\nimport { Container } from 'storyComponents/Container';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/FeedbackBox',\n component: FeedbackBox,\n} as Meta<FeedbackBoxProps>;\n\nconst Template: StoryFn<FeedbackBoxProps> = (args) => (\n <Container>\n <FeedbackBox {...args} />\n </Container>\n);\n\nexport const FeedbackBoxExample = Template.bind({});\nFeedbackBoxExample.args = {\n id: 'gba0d2d4',\n level: 'success',\n feedback: 'Example FeedbackBox text',\n};\n"],"names":["FeedbackBox_stories","FeedbackBox","Template","args","jsx","Container","FeedbackBoxExample"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"FeedbackBox.stories.js","sources":["../../../src/components/FeedbackBox/FeedbackBox.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FeedbackBoxProps } from './FeedbackBox';\n\nimport { FeedbackBox } from './FeedbackBox';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<FeedbackBox id={id} level={level} feedback={feedback} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/FeedbackBox',\n component: FeedbackBox,\n parameters: {\n codeString,\n },\n} as Meta<FeedbackBoxProps>;\n\nconst Template: StoryFn<FeedbackBoxProps> = (args) => (\n <Container>\n <FeedbackBox {...args} />\n </Container>\n);\n\nexport const FeedbackBoxExample = Template.bind({});\nFeedbackBoxExample.args = {\n id: 'gba0d2d4',\n level: 'success',\n feedback: 'Example FeedbackBox text',\n};\n"],"names":["codeString","FeedbackBox_stories","FeedbackBox","Template","args","jsx","Container","FeedbackBoxExample"],"mappings":";;;AAOA,MAAMA,IAAa,6DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAa,GAAGE,EAAM,CAAA,EACzB,CAAA,GAGWG,IAAqBJ,EAAS,KAAK,EAAE;AAClDI,EAAmB,OAAO;AAAA,EACxB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,UAAU;AACZ;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { fn as r } from "../../index-MQ0yPLdl.js";
|
|
3
3
|
import { IconButton as n } from "./IconButton.js";
|
|
4
4
|
import { Icon as i } from "../Icon/Icon.js";
|
|
5
5
|
const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { useState as d, useRef as g } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { fn as i } from "../../index-MQ0yPLdl.js";
|
|
4
4
|
import { InputField as l } from "./InputField.js";
|
|
5
5
|
import { Container as u } from "../../storyComponents/Container/Container.js";
|
|
6
6
|
import { Icon as f } from "../Icon/Icon.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsxs as l, Fragment as s, jsx as
|
|
2
|
-
import {
|
|
1
|
+
import { jsxs as l, Fragment as s, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { fn as c } from "../../index-MQ0yPLdl.js";
|
|
3
3
|
import { MenuButton as a } from "./MenuButton.js";
|
|
4
4
|
const d = `
|
|
5
5
|
// Has all LabelHTMLAttributes props available except "className" and "style"
|
|
@@ -16,7 +16,7 @@ const d = `
|
|
|
16
16
|
parameters: {
|
|
17
17
|
codeString: d
|
|
18
18
|
}
|
|
19
|
-
}, r = (o) => /* @__PURE__ */
|
|
19
|
+
}, r = (o) => /* @__PURE__ */ n(a, { ...o }), i = {
|
|
20
20
|
variant: "primary",
|
|
21
21
|
onClick: c()
|
|
22
22
|
}, p = r.bind({});
|
|
@@ -24,13 +24,13 @@ p.args = {
|
|
|
24
24
|
children: "Click me!",
|
|
25
25
|
...i
|
|
26
26
|
};
|
|
27
|
-
const
|
|
28
|
-
|
|
27
|
+
const e = r.bind({});
|
|
28
|
+
e.args = {
|
|
29
29
|
...i,
|
|
30
30
|
iconName: "EllipsisVertical"
|
|
31
31
|
};
|
|
32
|
-
|
|
33
|
-
...
|
|
32
|
+
e.argTypes = {
|
|
33
|
+
...e.argTypes,
|
|
34
34
|
children: {
|
|
35
35
|
table: {
|
|
36
36
|
disable: !0
|
|
@@ -42,8 +42,8 @@ const t = r.bind({});
|
|
|
42
42
|
t.args = {
|
|
43
43
|
...i,
|
|
44
44
|
children: /* @__PURE__ */ l(s, { children: [
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
/* @__PURE__ */
|
|
45
|
+
/* @__PURE__ */ n("div", { children: "Child 1" }),
|
|
46
|
+
/* @__PURE__ */ n("div", { children: "Child 2" })
|
|
47
47
|
] })
|
|
48
48
|
};
|
|
49
49
|
t.argTypes = {
|
|
@@ -57,7 +57,7 @@ t.argTypes = {
|
|
|
57
57
|
};
|
|
58
58
|
export {
|
|
59
59
|
p as MenuButtonExample,
|
|
60
|
-
|
|
60
|
+
e as WithIconChildren,
|
|
61
61
|
t as WithMultipleChildren,
|
|
62
62
|
b as default
|
|
63
63
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { ModalProvider as n } from "@react-aria/overlays";
|
|
3
|
-
import {
|
|
3
|
+
import { fn as i } from "../../index-MQ0yPLdl.js";
|
|
4
4
|
import { ModalDialog as o } from "./ModalDialog.js";
|
|
5
5
|
import { Button as l } from "../Button/Button.js";
|
|
6
6
|
import { ButtonGroup as m } from "../ButtonGroup/ButtonGroup.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as S, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { fn as d } from "../../index-MQ0yPLdl.js";
|
|
3
3
|
import { useState as M } from "react";
|
|
4
4
|
import { M as a } from "../../MultiSelect-Ckf3uGw5.js";
|
|
5
5
|
import { Container as p } from "../../storyComponents/Container/Container.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { fn as l } from "../../index-MQ0yPLdl.js";
|
|
3
3
|
import { OverlayCloseButton as e } from "./OverlayCloseButton.js";
|
|
4
4
|
import { Container as t } from "../../storyComponents/Container/Container.js";
|
|
5
5
|
const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", p = {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as e, jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { fn as a } from "../../index-MQ0yPLdl.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";
|