@uva-glass/component-library 2.5.2 → 2.6.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/{SelectListbox.module-BWavTmq8.js → SelectListbox.module-DX1IVM9E.js} +23 -22
- package/dist/SelectListbox.module-DX1IVM9E.js.map +1 -0
- package/dist/assets/CheckboxTree.css +1 -1
- package/dist/assets/SelectListbox.css +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.js +41 -41
- package/dist/components/PeriodSelector/PeriodSelector.d.ts +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
- package/dist/components/SelectListbox/SelectListbox.d.ts +4 -2
- package/dist/components/SelectListbox/SelectListbox.js +28 -21
- package/dist/components/SelectListbox/SelectListbox.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js +1 -1
- package/dist/components/SelectListbox/components/SelectContainer.js +1 -1
- package/dist/components/SelectListbox/components/SelectOption.d.ts +2 -1
- package/dist/components/SelectListbox/components/SelectOption.js +37 -33
- package/dist/components/SelectListbox/components/SelectOption.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectOptionBox.js +1 -1
- package/package.json +3 -3
- package/dist/SelectListbox.module-BWavTmq8.js.map +0 -1
|
@@ -1,25 +1,26 @@
|
|
|
1
|
-
import './assets/SelectListbox.css';const
|
|
2
|
-
"select-listbox-container": "_select-listbox-
|
|
3
|
-
"select-listbox__wrapper": "_select-
|
|
4
|
-
"select-listbox-trigger": "_select-listbox-
|
|
5
|
-
"select-listbox-trigger--default": "_select-listbox-trigger--
|
|
6
|
-
"select-listbox-trigger--small": "_select-listbox-trigger--
|
|
7
|
-
"select-listbox-trigger--medium": "_select-listbox-trigger--
|
|
8
|
-
"select-listbox-trigger-label": "_select-listbox-trigger-
|
|
9
|
-
"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-
|
|
10
|
-
"select-listbox-trigger--bold": "_select-listbox-trigger--
|
|
11
|
-
"select-listbox-trigger--pill": "_select-listbox-trigger--
|
|
12
|
-
"select-listbox-trigger--pillLeft": "_select-listbox-trigger--
|
|
13
|
-
"select-listbox-trigger--pillRight": "_select-listbox-trigger--
|
|
14
|
-
"select-listbox-trigger--darkBorder": "_select-listbox-trigger--
|
|
15
|
-
"select-listbox-trigger--noborder": "_select-listbox-trigger--
|
|
16
|
-
"select-listbox-trigger-icon": "_select-listbox-trigger-
|
|
17
|
-
"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--
|
|
18
|
-
"select-listbox": "_select-
|
|
19
|
-
"select-listbox-option": "_select-listbox-
|
|
20
|
-
"select-listbox-option--active": "_select-listbox-option--
|
|
1
|
+
import './assets/SelectListbox.css';const e = {
|
|
2
|
+
"select-listbox-container": "_select-listbox-container_w4hvm_1",
|
|
3
|
+
"select-listbox__wrapper": "_select-listbox__wrapper_w4hvm_5",
|
|
4
|
+
"select-listbox-trigger": "_select-listbox-trigger_w4hvm_15",
|
|
5
|
+
"select-listbox-trigger--default": "_select-listbox-trigger--default_w4hvm_30",
|
|
6
|
+
"select-listbox-trigger--small": "_select-listbox-trigger--small_w4hvm_34",
|
|
7
|
+
"select-listbox-trigger--medium": "_select-listbox-trigger--medium_w4hvm_38",
|
|
8
|
+
"select-listbox-trigger-label": "_select-listbox-trigger-label_w4hvm_43",
|
|
9
|
+
"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_w4hvm_52",
|
|
10
|
+
"select-listbox-trigger--bold": "_select-listbox-trigger--bold_w4hvm_56",
|
|
11
|
+
"select-listbox-trigger--pill": "_select-listbox-trigger--pill_w4hvm_60",
|
|
12
|
+
"select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_w4hvm_65",
|
|
13
|
+
"select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_w4hvm_70",
|
|
14
|
+
"select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_w4hvm_75",
|
|
15
|
+
"select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_w4hvm_89",
|
|
16
|
+
"select-listbox-trigger-icon": "_select-listbox-trigger-icon_w4hvm_101",
|
|
17
|
+
"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_w4hvm_106",
|
|
18
|
+
"select-listbox": "_select-listbox_w4hvm_1",
|
|
19
|
+
"select-listbox-option": "_select-listbox-option_w4hvm_120",
|
|
20
|
+
"select-listbox-option--active": "_select-listbox-option--active_w4hvm_133",
|
|
21
|
+
"select-listbox-divider": "_select-listbox-divider_w4hvm_143"
|
|
21
22
|
};
|
|
22
23
|
export {
|
|
23
|
-
|
|
24
|
+
e as s
|
|
24
25
|
};
|
|
25
|
-
//# sourceMappingURL=SelectListbox.module-
|
|
26
|
+
//# sourceMappingURL=SelectListbox.module-DX1IVM9E.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectListbox.module-DX1IVM9E.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._checkbox-
|
|
1
|
+
._checkbox-tree__header_3w3rj_1{display:block;font-weight:var(--semibold);margin-bottom:.25rem;text-align:left}._checkbox-tree__branch_3w3rj_8{list-style:none;-webkit-user-select:none;user-select:none}._checkbox-tree__branch_3w3rj_8[aria-expanded=false]{margin-bottom:.5rem}._checkbox-tree__branch_3w3rj_8 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}._checkbox-tree__branch--icon_3w3rj_21{pointer-events:none;transform:rotate(0);transition:transform .3s ease-out}._checkbox-tree__branch--icon--expanded_3w3rj_27{transform:rotate(90deg);transition:transform .3s ease-in}._checkbox-tree__branch--formfield_3w3rj_32{align-items:center;display:flex;flex-direction:row;gap:.5rem}._checkbox-tree__leaves_3w3rj_39{display:none;flex-direction:column;gap:.5rem;list-style:none;margin:.5rem 0 .5rem 1rem;-webkit-user-select:none;user-select:none}._checkbox-tree__leaves--expanded_3w3rj_48{display:flex}._checkbox-tree__leaf_3w3rj_52{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_3w3rj_52 input[type=checkbox]:disabled+label{color:var(--color-grey-300)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._select-listbox-
|
|
1
|
+
._select-listbox-container_w4hvm_1{position:relative}._select-listbox__wrapper_w4hvm_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_w4hvm_15{align-items:center;background-color:var(--color-white);border:1px solid var(--color-silver);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_w4hvm_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_w4hvm_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_w4hvm_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_w4hvm_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_w4hvm_52{right:0}._select-listbox-trigger--bold_w4hvm_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_w4hvm_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_w4hvm_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_w4hvm_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_w4hvm_75{border-color:var(--color-dark)}._select-listbox-trigger_w4hvm_15:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._select-listbox-trigger_w4hvm_15:focus-visible,._select-listbox-trigger_w4hvm_15:hover{background-color:var(--color-lavender)}._select-listbox-trigger--noborder_w4hvm_89{border:none}._select-listbox-trigger--pillLeft_w4hvm_65+._select-listbox__wrapper_w4hvm_5{left:1rem}._select-listbox-trigger--pillRight_w4hvm_70+._select-listbox__wrapper--align-right_w4hvm_52{right:1rem}._select-listbox-trigger-icon_w4hvm_101{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_w4hvm_106{transform:rotate(180deg)}._select-listbox_w4hvm_1{background-color:var(--color-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_w4hvm_120{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_w4hvm_133,._select-listbox-option_w4hvm_120:hover{background-color:var(--color-grey-100);box-shadow:0 0 0 1px var(--color-white)}._select-listbox-option_w4hvm_120[aria-selected=true]{font-weight:var(--semibold)}._select-listbox-divider_w4hvm_143{height:1px;background-color:var(--color-grey-200);margin:1px -.25rem}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { jsxs as i, jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { c as
|
|
4
|
-
import { Icon as
|
|
5
|
-
import { Button as
|
|
2
|
+
import { useRef as B, useEffect as N } from "react";
|
|
3
|
+
import { c as j } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { Icon as T } from "../Icon/Icon.js";
|
|
5
|
+
import { Button as R } from "../Buttons/Button.js";
|
|
6
6
|
import "../Buttons/LinkButton.js";
|
|
7
7
|
import "@react-aria/button";
|
|
8
|
-
import { Checkbox as
|
|
9
|
-
import { Label as
|
|
8
|
+
import { Checkbox as y } from "../Checkbox/Checkbox.js";
|
|
9
|
+
import { Label as w } from "../Label/Label.js";
|
|
10
10
|
import "@react-aria/dialog";
|
|
11
11
|
import "@react-aria/focus";
|
|
12
12
|
import "@react-aria/overlays";
|
|
13
13
|
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
14
|
-
import { FormField as
|
|
14
|
+
import { FormField as S } from "../FormField/FormField.js";
|
|
15
15
|
import "../GridRow/GridRow.js";
|
|
16
16
|
import "../IconButton/IconButton.js";
|
|
17
17
|
import "../Input/Input.js";
|
|
@@ -26,34 +26,34 @@ import "../SelectListbox/SelectListbox.js";
|
|
|
26
26
|
import "../SelectListbox/SelectProvider.js";
|
|
27
27
|
import "../Sortable/components/SortableItem.js";
|
|
28
28
|
import "../../SortableProvider-BUsvniX7.js";
|
|
29
|
-
import { useResponsive as
|
|
29
|
+
import { useResponsive as I } from "../hooks/useResponsive.js";
|
|
30
30
|
import '../../assets/CheckboxTree.css';const o = {
|
|
31
|
-
"checkbox-tree__header": "_checkbox-
|
|
32
|
-
"checkbox-tree__branch": "_checkbox-
|
|
33
|
-
"checkbox-tree__branch--icon": "_checkbox-tree__branch--
|
|
34
|
-
"checkbox-tree__branch--icon--expanded": "_checkbox-tree__branch--icon--
|
|
35
|
-
"checkbox-tree__branch--formfield": "_checkbox-tree__branch--
|
|
36
|
-
"checkbox-tree__leaves": "_checkbox-
|
|
37
|
-
"checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--
|
|
38
|
-
"checkbox-tree__leaf": "_checkbox-
|
|
31
|
+
"checkbox-tree__header": "_checkbox-tree__header_3w3rj_1",
|
|
32
|
+
"checkbox-tree__branch": "_checkbox-tree__branch_3w3rj_8",
|
|
33
|
+
"checkbox-tree__branch--icon": "_checkbox-tree__branch--icon_3w3rj_21",
|
|
34
|
+
"checkbox-tree__branch--icon--expanded": "_checkbox-tree__branch--icon--expanded_3w3rj_27",
|
|
35
|
+
"checkbox-tree__branch--formfield": "_checkbox-tree__branch--formfield_3w3rj_32",
|
|
36
|
+
"checkbox-tree__leaves": "_checkbox-tree__leaves_3w3rj_39",
|
|
37
|
+
"checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_3w3rj_48",
|
|
38
|
+
"checkbox-tree__leaf": "_checkbox-tree__leaf_3w3rj_52"
|
|
39
39
|
}, _e = ({
|
|
40
40
|
title: b,
|
|
41
|
-
checkboxTree:
|
|
41
|
+
checkboxTree: C,
|
|
42
42
|
defaultValue: l,
|
|
43
|
-
noLabelFrontWeight:
|
|
44
|
-
onChange:
|
|
43
|
+
noLabelFrontWeight: m = !1,
|
|
44
|
+
onChange: u
|
|
45
45
|
}) => {
|
|
46
|
-
const s =
|
|
46
|
+
const s = B([]), { lessThan: n } = I(), _ = (r, e = document) => [].slice.call(e.querySelectorAll(r)), A = () => {
|
|
47
47
|
const r = s.current.reduce((e, t) => (t.name && t.checked && e.push(t.value), e), []);
|
|
48
|
-
|
|
49
|
-
},
|
|
48
|
+
u && u(r);
|
|
49
|
+
}, x = (r) => {
|
|
50
50
|
var e, t, d;
|
|
51
51
|
for (; r; ) {
|
|
52
52
|
const c = (t = (e = r.closest("[data-ul]")) == null ? void 0 : e.parentNode) == null ? void 0 : t.querySelector("input"), k = _(
|
|
53
53
|
"input",
|
|
54
54
|
(d = c == null ? void 0 : c.closest("[data-li]")) == null ? void 0 : d.querySelector("[data-ul]")
|
|
55
|
-
).reduce((
|
|
56
|
-
if (c && (c.checked = p, c.indeterminate = !p && p !==
|
|
55
|
+
).reduce((v, g) => (g.disabled || v.push(g.checked), v), []), p = k.every(Boolean), F = k.some(Boolean);
|
|
56
|
+
if (c && (c.checked = p, c.indeterminate = !p && p !== F), !c || r === c)
|
|
57
57
|
break;
|
|
58
58
|
r = c;
|
|
59
59
|
}
|
|
@@ -64,7 +64,7 @@ import '../../assets/CheckboxTree.css';const o = {
|
|
|
64
64
|
"aria-expanded",
|
|
65
65
|
((d = e == null ? void 0 : e.closest("[data-li]")) == null ? void 0 : d.getAttribute("aria-expanded")) === "false" ? "true" : "false"
|
|
66
66
|
), t && t.classList.toggle(o["checkbox-tree__leaves--expanded"]);
|
|
67
|
-
},
|
|
67
|
+
}, E = (r) => {
|
|
68
68
|
var c;
|
|
69
69
|
const e = r.target;
|
|
70
70
|
if (!e || !e.parentNode || !e.parentNode.parentNode) return;
|
|
@@ -74,50 +74,50 @@ import '../../assets/CheckboxTree.css';const o = {
|
|
|
74
74
|
return;
|
|
75
75
|
}
|
|
76
76
|
if (s.current.indexOf(e) === -1) return;
|
|
77
|
-
(e.parentNode.parentNode ? _("input", e.parentNode.parentNode) : []).forEach((h) => h.checked = h.disabled ? !1 : e.checked),
|
|
78
|
-
},
|
|
77
|
+
(e.parentNode.parentNode ? _("input", e.parentNode.parentNode) : []).forEach((h) => h.checked = h.disabled ? !1 : e.checked), x(e), A();
|
|
78
|
+
}, q = (r) => {
|
|
79
79
|
const e = r.target, t = e.closest("[data-li]");
|
|
80
80
|
f(e, t);
|
|
81
81
|
};
|
|
82
|
-
return
|
|
82
|
+
return N(() => {
|
|
83
83
|
s.current = _("input") || [];
|
|
84
|
-
}, []),
|
|
84
|
+
}, []), N(() => {
|
|
85
85
|
l && s.current.forEach((r) => {
|
|
86
|
-
l.includes(r.value) && (r.checked = !0,
|
|
86
|
+
l.includes(r.value) && (r.checked = !0, x(r));
|
|
87
87
|
});
|
|
88
88
|
}, [l]), /* @__PURE__ */ i("div", { children: [
|
|
89
89
|
b && /* @__PURE__ */ a("span", { className: o["checkbox-tree__header"], children: b }),
|
|
90
|
-
/* @__PURE__ */ a("div", { onClick:
|
|
90
|
+
/* @__PURE__ */ a("div", { onClick: E, "data-ul": !0, role: "tree", tabIndex: 0, children: C.map(({ itemName: r, children: e }) => /* @__PURE__ */ i(
|
|
91
91
|
"div",
|
|
92
92
|
{
|
|
93
93
|
className: o["checkbox-tree__branch"],
|
|
94
94
|
"data-li": !0,
|
|
95
95
|
"aria-expanded": n.md ? "false" : "true",
|
|
96
96
|
children: [
|
|
97
|
-
/* @__PURE__ */ i(
|
|
98
|
-
/* @__PURE__ */ a(
|
|
99
|
-
|
|
97
|
+
/* @__PURE__ */ i(S, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
|
|
98
|
+
/* @__PURE__ */ a(R, { variant: "blank", onClick: q, children: /* @__PURE__ */ a(
|
|
99
|
+
T,
|
|
100
100
|
{
|
|
101
101
|
name: "CheveronRight",
|
|
102
102
|
size: 16,
|
|
103
|
-
className:
|
|
103
|
+
className: j(o["checkbox-tree__branch--icon"], {
|
|
104
104
|
[o["checkbox-tree__branch--icon--expanded"]]: !n.md
|
|
105
105
|
})
|
|
106
106
|
}
|
|
107
107
|
) }),
|
|
108
|
-
/* @__PURE__ */ a(
|
|
109
|
-
/* @__PURE__ */ a(
|
|
108
|
+
/* @__PURE__ */ a(y, { id: r, disabled: e.every((t) => t.disabled) }),
|
|
109
|
+
/* @__PURE__ */ a(w, { htmlFor: r, noFontWeight: m, children: r })
|
|
110
110
|
] }),
|
|
111
111
|
/* @__PURE__ */ a(
|
|
112
112
|
"div",
|
|
113
113
|
{
|
|
114
|
-
className:
|
|
114
|
+
className: j(o["checkbox-tree__leaves"], {
|
|
115
115
|
[o["checkbox-tree__leaves--expanded"]]: !n.md
|
|
116
116
|
}),
|
|
117
117
|
"data-ul": !0,
|
|
118
|
-
children: e.map(({ itemName: t, itemValue: d, disabled: c }) => /* @__PURE__ */ a("div", { className: o["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ i(
|
|
119
|
-
/* @__PURE__ */ a(
|
|
120
|
-
/* @__PURE__ */ a(
|
|
118
|
+
children: e.map(({ itemName: t, itemValue: d, disabled: c }) => /* @__PURE__ */ a("div", { className: o["checkbox-tree__leaf"], "data-li": !0, children: /* @__PURE__ */ i(S, { inline: !0, className: o["checkbox-tree__branch--formfield"], children: [
|
|
119
|
+
/* @__PURE__ */ a(y, { id: t, name: t, value: d, disabled: c }),
|
|
120
|
+
/* @__PURE__ */ a(w, { htmlFor: t, noFontWeight: m, children: t })
|
|
121
121
|
] }) }, t))
|
|
122
122
|
}
|
|
123
123
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label
|
|
1
|
+
{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label?: string;\n labelPosition?: 'top' | 'left';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods, semester) => {\n return periods.map((period) => ({\n label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n value: period.toString(),\n }));\n });\n\n const returnValues = useRef<number[][]>(\n chunkedPeriods.map((semester) =>\n semester.reduce((periods, period) => {\n if (defaultValues?.includes(period)) periods.push(period);\n return periods;\n }, [] as number[])\n )\n );\n const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n const disableGroups = (selects: number[][]) => {\n if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n return [];\n };\n\n const handleChange = (values: string[], index: number) => {\n returnValues.current[index] = values.map((num) => Number(num));\n setDisableSemesters(disableGroups(returnValues.current));\n onChange([...returnValues.current.flat()].sort());\n };\n\n useEffect(() => {\n setDisableSemesters(disableGroups(returnValues.current));\n }, []);\n\n return (\n <div\n className={clsx(\n styles['period-selector__container'],\n styles[`period-selector__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['period-selector__selector-container']}>\n <div className={styles['period-selector__selector-row']}>\n {checkboxItems.map((checkboxes, semester) => (\n <CheckboxButtonBar\n key={`group_${semester}`}\n checkboxes={checkboxes}\n defaultValues={returnValues.current[semester].map((num) => num.toString())}\n disableGroup={disableSemesters.includes(semester)}\n required={required}\n onSetValues={(event) => handleChange(event, semester)}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"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"}
|
|
@@ -25,9 +25,11 @@ export interface SelectListboxProps {
|
|
|
25
25
|
mobileBreakpoint?: `${number}${'px' | 'rem'}`;
|
|
26
26
|
/** The callback function that is invoked when an option is selected. */
|
|
27
27
|
onChange?: (option: OptionValue) => void;
|
|
28
|
+
/** Option to add a devider after a given amout of ouptions in the select option box. */
|
|
29
|
+
dividerAfter?: number;
|
|
28
30
|
}
|
|
29
31
|
/** Represents a component to render a select list box. */
|
|
30
32
|
export declare const SelectListbox: {
|
|
31
|
-
({ options, variant, fullWidth, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
|
|
32
|
-
SelectOption: ({ option, index, children }: import('./components/SelectOption').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
({ options, variant, fullWidth, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, dividerAfter, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
SelectOption: ({ option, index, dividerAfter, children }: import('./components/SelectOption').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
33
35
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { useState as t } from "react";
|
|
3
|
-
import { SelectProvider as
|
|
4
|
-
import { SelectButton as
|
|
5
|
-
import { SelectContainer as
|
|
6
|
-
import { SelectOptionBox as
|
|
7
|
-
import { SelectOption as
|
|
8
|
-
import { usePositionedFloaters as
|
|
9
|
-
const
|
|
1
|
+
import { jsx as e, jsxs as y } from "react/jsx-runtime";
|
|
2
|
+
import { useState as t, Children as B, cloneElement as O } from "react";
|
|
3
|
+
import { SelectProvider as g } from "./SelectProvider.js";
|
|
4
|
+
import { SelectButton as j } from "./components/SelectButton.js";
|
|
5
|
+
import { SelectContainer as v } from "./components/SelectContainer.js";
|
|
6
|
+
import { SelectOptionBox as C } from "./components/SelectOptionBox.js";
|
|
7
|
+
import { SelectOption as F } from "./components/SelectOption.js";
|
|
8
|
+
import { usePositionedFloaters as L } from "../hooks/usePositionedFloaters.js";
|
|
9
|
+
const z = ({
|
|
10
10
|
options: o,
|
|
11
11
|
variant: i,
|
|
12
12
|
fullWidth: r = !1,
|
|
@@ -14,13 +14,14 @@ const v = ({
|
|
|
14
14
|
optionPositionRight: l,
|
|
15
15
|
defaultValue: m = -1,
|
|
16
16
|
maxOptionHeight: s,
|
|
17
|
-
disabled:
|
|
18
|
-
buttonLabelProp:
|
|
17
|
+
disabled: c,
|
|
18
|
+
buttonLabelProp: f = "label",
|
|
19
19
|
buttonLabelBold: p,
|
|
20
20
|
onChange: a,
|
|
21
|
-
|
|
21
|
+
dividerAfter: S,
|
|
22
|
+
children: d
|
|
22
23
|
}) => {
|
|
23
|
-
const [u,
|
|
24
|
+
const [u, h] = t(null), [x, E] = t(null), { style: b } = L(u, x, {
|
|
24
25
|
mouseEvent: "click",
|
|
25
26
|
position: "bottomLeft",
|
|
26
27
|
offset: 4,
|
|
@@ -29,24 +30,30 @@ const v = ({
|
|
|
29
30
|
mobileBreakpoint: "28rem",
|
|
30
31
|
fullWidth: r
|
|
31
32
|
});
|
|
32
|
-
return /* @__PURE__ */ e(
|
|
33
|
+
return /* @__PURE__ */ e(g, { options: o, defaultValue: m, children: /* @__PURE__ */ y(v, { children: [
|
|
33
34
|
/* @__PURE__ */ e(
|
|
34
|
-
|
|
35
|
+
j,
|
|
35
36
|
{
|
|
36
|
-
disabled:
|
|
37
|
-
buttonLabelProp:
|
|
37
|
+
disabled: c,
|
|
38
|
+
buttonLabelProp: f,
|
|
38
39
|
buttonLabelBold: p,
|
|
39
40
|
variant: i,
|
|
40
41
|
size: n,
|
|
41
42
|
onChange: a,
|
|
42
|
-
ref:
|
|
43
|
+
ref: E
|
|
43
44
|
}
|
|
44
45
|
),
|
|
45
|
-
/* @__PURE__ */ e(
|
|
46
|
+
/* @__PURE__ */ e(C, { ref: h, ...b, children: B.map(
|
|
47
|
+
d,
|
|
48
|
+
(P, k) => O(P, {
|
|
49
|
+
dividerAfter: S,
|
|
50
|
+
key: k
|
|
51
|
+
})
|
|
52
|
+
) })
|
|
46
53
|
] }) });
|
|
47
54
|
};
|
|
48
|
-
|
|
55
|
+
z.SelectOption = F;
|
|
49
56
|
export {
|
|
50
|
-
|
|
57
|
+
z as SelectListbox
|
|
51
58
|
};
|
|
52
59
|
//# sourceMappingURL=SelectListbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n /** The possible options to select. */\n options: OptionValue[];\n /** The selected value by default. */\n defaultValue?: SelectValue;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\n /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n disabled?: boolean;\n /** The name of the property in the options structure that contains the label of the options. */\n buttonLabelProp?: string;\n /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n buttonLabelBold?: boolean;\n /** The variant of the select box. */\n variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n /** If true sets the option dropdown min-width to the width of the select button. */\n fullWidth?: boolean;\n /** The size of the select box. */\n size?: 'small' | 'medium' | 'default';\n /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n optionPositionRight?: boolean;\n /** The breakpoint at which to switch to the mobile view. */\n mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n /** The callback function that is invoked when an option is selected. */\n onChange?: (option: OptionValue) => void;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n options,\n variant,\n fullWidth = false,\n size = 'default',\n optionPositionRight,\n defaultValue = -1,\n maxOptionHeight,\n disabled,\n buttonLabelProp = 'label',\n buttonLabelBold,\n onChange,\n children,\n}: PropsWithChildren<SelectListboxProps>) => {\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n fullWidth,\n });\n\n return (\n <SelectProvider options={options} defaultValue={defaultValue}>\n <SelectContainer>\n <SelectButton\n disabled={disabled}\n buttonLabelProp={buttonLabelProp}\n buttonLabelBold={buttonLabelBold}\n variant={variant}\n size={size}\n onChange={onChange}\n ref={setReferenceElement}\n />\n\n <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n {children}\n </SelectOptionBox>\n </SelectContainer>\n </SelectProvider>\n );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { Children, cloneElement, useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n /** The possible options to select. */\n options: OptionValue[];\n /** The selected value by default. */\n defaultValue?: SelectValue;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\n /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n disabled?: boolean;\n /** The name of the property in the options structure that contains the label of the options. */\n buttonLabelProp?: string;\n /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n buttonLabelBold?: boolean;\n /** The variant of the select box. */\n variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n /** If true sets the option dropdown min-width to the width of the select button. */\n fullWidth?: boolean;\n /** The size of the select box. */\n size?: 'small' | 'medium' | 'default';\n /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n optionPositionRight?: boolean;\n /** The breakpoint at which to switch to the mobile view. */\n mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n /** The callback function that is invoked when an option is selected. */\n onChange?: (option: OptionValue) => void;\n /** Option to add a devider after a given amout of ouptions in the select option box. */\n dividerAfter?: number;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n options,\n variant,\n fullWidth = false,\n size = 'default',\n optionPositionRight,\n defaultValue = -1,\n maxOptionHeight,\n disabled,\n buttonLabelProp = 'label',\n buttonLabelBold,\n onChange,\n dividerAfter,\n children,\n}: PropsWithChildren<SelectListboxProps>) => {\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n fullWidth,\n });\n\n return (\n <SelectProvider options={options} defaultValue={defaultValue}>\n <SelectContainer>\n <SelectButton\n disabled={disabled}\n buttonLabelProp={buttonLabelProp}\n buttonLabelBold={buttonLabelBold}\n variant={variant}\n size={size}\n onChange={onChange}\n ref={setReferenceElement}\n />\n\n <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n {Children.map(children, (child, index) =>\n cloneElement(child as React.ReactElement, {\n dividerAfter,\n key: index,\n })\n )}\n </SelectOptionBox>\n </SelectContainer>\n </SelectProvider>\n );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","dividerAfter","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","Children","child","index","cloneElement","SelectOption"],"mappings":";;;;;;;;AA2CO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBV;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,IAClB,WAAAF;AAAA,EAAA,CACD;AAED,SACG,gBAAAkB,EAAAC,GAAA,EAAe,SAAArB,GAAkB,cAAAK,GAChC,4BAACiB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAhB;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAR;AAAA,QACA,MAAAE;AAAA,QACA,UAAAO;AAAA,QACA,KAAKO;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAASO,EAAA;AAAA,MAAIb;AAAA,MAAU,CAACc,GAAOC,MAC9BC,EAAaF,GAA6B;AAAA,QACxC,cAAAf;AAAA,QACA,KAAKgB;AAAA,MACN,CAAA;AAAA,IAAA,EAEL,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEA5B,EAAc,eAAe8B;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as a, jsxs as C } from "react/jsx-runtime";
|
|
2
2
|
import { c as f } from "../../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { forwardRef as E, useRef as g, useEffect as c } from "react";
|
|
4
|
-
import { s as t } from "../../../SelectListbox.module-
|
|
4
|
+
import { s as t } from "../../../SelectListbox.module-DX1IVM9E.js";
|
|
5
5
|
import { Icon as L } from "../../Icon/Icon.js";
|
|
6
6
|
import { useSelect as N } from "../SelectProvider.js";
|
|
7
7
|
const O = E((d, u) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as c } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as i, useCallback as u, useEffect as l } from "react";
|
|
3
3
|
import { useSelect as m } from "../SelectProvider.js";
|
|
4
|
-
import { s as f } from "../../../SelectListbox.module-
|
|
4
|
+
import { s as f } from "../../../SelectListbox.module-DX1IVM9E.js";
|
|
5
5
|
const E = ({ children: o }) => {
|
|
6
6
|
const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
|
|
7
7
|
({ target: s }) => {
|
|
@@ -4,6 +4,7 @@ export interface SelectOptionProps {
|
|
|
4
4
|
option: OptionValue;
|
|
5
5
|
index: number;
|
|
6
6
|
key: string;
|
|
7
|
+
dividerAfter?: number;
|
|
7
8
|
children: ReactNode;
|
|
8
9
|
}
|
|
9
|
-
export declare const SelectOption: ({ option, index, children }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const SelectOption: ({ option, index, dividerAfter, children }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { c as
|
|
3
|
-
import { useRef as
|
|
4
|
-
import { useSelect as
|
|
5
|
-
import { s as
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
|
|
1
|
+
import { jsxs as D, Fragment as h, jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { c as y } from "../../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { useRef as O, useEffect as d } from "react";
|
|
4
|
+
import { useSelect as x } from "../SelectProvider.js";
|
|
5
|
+
import { s as o } from "../../../SelectListbox.module-DX1IVM9E.js";
|
|
6
|
+
const j = ({ option: l, index: t, dividerAfter: u, children: v }) => {
|
|
7
|
+
const i = O(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: p, setIsOpen: n, options: a } = x(), w = (e) => {
|
|
8
|
+
p(a[e]), n(!1);
|
|
9
9
|
}, k = (e) => {
|
|
10
10
|
switch (e.key) {
|
|
11
11
|
case "Tab":
|
|
12
|
-
e.preventDefault(), r &&
|
|
12
|
+
e.preventDefault(), r && n(!1);
|
|
13
13
|
break;
|
|
14
14
|
case "ArrowDown":
|
|
15
15
|
case "ArrowUp":
|
|
@@ -21,35 +21,39 @@ const S = ({ option: t, index: l, children: m }) => {
|
|
|
21
21
|
e.preventDefault(), a != null && a.length && s > -1 && !a[s].disabled && w(s);
|
|
22
22
|
break;
|
|
23
23
|
case "Escape":
|
|
24
|
-
r && (e.stopPropagation(),
|
|
24
|
+
r && (e.stopPropagation(), n(!1));
|
|
25
25
|
break;
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
|
-
return
|
|
29
|
-
var e,
|
|
30
|
-
|
|
31
|
-
}, [s,
|
|
32
|
-
f.value ===
|
|
33
|
-
}, [
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
[
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
28
|
+
return d(() => {
|
|
29
|
+
var e, b;
|
|
30
|
+
t === s && (r ? (e = i.current) == null || e.focus() : (b = i.current) == null || b.blur());
|
|
31
|
+
}, [s, t, r]), d(() => {
|
|
32
|
+
f.value === l.value && c(t);
|
|
33
|
+
}, [t, l.value, f.value, c]), /* @__PURE__ */ D(h, { children: [
|
|
34
|
+
/* @__PURE__ */ m(
|
|
35
|
+
"li",
|
|
36
|
+
{
|
|
37
|
+
className: y(o["select-listbox-option"], {
|
|
38
|
+
[o["select-listbox-option--active"]]: t === s,
|
|
39
|
+
[o["select-listbox-option--divider"]]: t + 1 === u
|
|
40
|
+
}),
|
|
41
|
+
...!l.disabled && {
|
|
42
|
+
onClick: () => p(l),
|
|
43
|
+
onKeyDown: k,
|
|
44
|
+
tabIndex: 0,
|
|
45
|
+
role: "option",
|
|
46
|
+
"aria-selected": f.value === l.value
|
|
47
|
+
},
|
|
48
|
+
ref: i,
|
|
49
|
+
children: v
|
|
45
50
|
},
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
);
|
|
51
|
+
`${l.value}`
|
|
52
|
+
),
|
|
53
|
+
t + 1 === u && /* @__PURE__ */ m("div", { className: o["select-listbox-divider"], "aria-hidden": "true" })
|
|
54
|
+
] });
|
|
51
55
|
};
|
|
52
56
|
export {
|
|
53
|
-
|
|
57
|
+
j as SelectOption
|
|
54
58
|
};
|
|
55
59
|
//# sourceMappingURL=SelectOption.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n option: OptionValue;\n index: number;\n key: string;\n children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, children }: SelectOptionProps) => {\n const selectOptionRef = useRef<HTMLLIElement>(null);\n const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n const handleSelectOption = (aIndex: number) => {\n setSelectedValue(options[aIndex]);\n setIsOpen(false);\n };\n\n const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n switch (event.key) {\n case 'Tab':\n event.preventDefault();\n if (isOpen) {\n setIsOpen(false);\n }\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n event.preventDefault();\n if (!isOpen) {\n return;\n }\n if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n setActiveIndex(activeIndex + 1);\n }\n if (event.key === 'ArrowUp' && activeIndex > 0) {\n setActiveIndex(activeIndex - 1);\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n handleSelectOption(activeIndex);\n }\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n }\n };\n\n useEffect(() => {\n if (index === activeIndex) {\n isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n }\n }, [activeIndex, index, isOpen]);\n\n useEffect(() => {\n if (selectedValue.value === option.value) {\n setActiveIndex(index);\n }\n }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n return (\n <li\n
|
|
1
|
+
{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n option: OptionValue;\n index: number;\n key: string;\n dividerAfter?: number;\n children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n const selectOptionRef = useRef<HTMLLIElement>(null);\n const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n const handleSelectOption = (aIndex: number) => {\n setSelectedValue(options[aIndex]);\n setIsOpen(false);\n };\n\n const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n switch (event.key) {\n case 'Tab':\n event.preventDefault();\n if (isOpen) {\n setIsOpen(false);\n }\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n event.preventDefault();\n if (!isOpen) {\n return;\n }\n if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n setActiveIndex(activeIndex + 1);\n }\n if (event.key === 'ArrowUp' && activeIndex > 0) {\n setActiveIndex(activeIndex - 1);\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n handleSelectOption(activeIndex);\n }\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n }\n };\n\n useEffect(() => {\n if (index === activeIndex) {\n isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n }\n }, [activeIndex, index, isOpen]);\n\n useEffect(() => {\n if (selectedValue.value === option.value) {\n setActiveIndex(index);\n }\n }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n return (\n <>\n <li\n className={clsx(styles['select-listbox-option'], {\n [styles['select-listbox-option--active']]: index === activeIndex,\n [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n })}\n key={`${option.value}`}\n {...(!option.disabled && {\n onClick: () => setSelectedValue(option),\n onKeyDown: onOptionKeyDown,\n tabIndex: 0,\n role: 'option',\n 'aria-selected': selectedValue.value === option.value,\n })}\n ref={selectOptionRef}\n >\n {children}\n </li>\n {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n </>\n );\n};\n"],"names":["SelectOption","option","index","dividerAfter","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","_a","_b","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,UAAAC,QAAkC;AACtF,QAAAC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAQ,IAAIC,EAAU,GAEzGC,IAAqB,CAACC,MAAmB;AAC5B,IAAAL,EAAAE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EACjB,GAEMK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AACH,QAAAA,EAAM,eAAe,GACjBX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAe,GACjB,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAe,GACjBL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAgB,GACtBN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAIjB,MAAUM,MACZD,KAASa,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,WAAUC,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EAEtE,GAAA,CAACb,GAAaN,GAAOK,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACV,IAAAT,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOS,EAAc,OAAOD,CAAc,CAAC,GAIzD,gBAAAa,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,UAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGxB,MAAUM;AAAA,UACrD,CAACkB,EAAO,gCAAgC,CAAC,GAAGxB,IAAQ,MAAMC;AAAA,QAAA,CAC3D;AAAA,QAEA,GAAI,CAACF,EAAO,YAAY;AAAA,UACvB,SAAS,MAAMU,EAAiBV,CAAM;AAAA,UACtC,WAAWgB;AAAA,UACX,UAAU;AAAA,UACV,MAAM;AAAA,UACN,iBAAiBP,EAAc,UAAUT,EAAO;AAAA,QAClD;AAAA,QACA,KAAKI;AAAA,QAEJ,UAAAD;AAAA,MAAA;AAAA,MAVI,GAAGH,EAAO,KAAK;AAAA,IAWtB;AAAA,IACCC,IAAQ,MAAMC,KAAiB,gBAAAqB,EAAA,OAAA,EAAI,WAAWE,EAAO,wBAAwB,GAAG,eAAY,OAAO,CAAA;AAAA,EAAA,GACtG;AAEJ;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as m, useRef as x } from "react";
|
|
3
|
-
import { s as i } from "../../../SelectListbox.module-
|
|
3
|
+
import { s as i } from "../../../SelectListbox.module-DX1IVM9E.js";
|
|
4
4
|
import { useSelect as a } from "../SelectProvider.js";
|
|
5
5
|
const h = m((l, e) => {
|
|
6
6
|
const { style: t, children: o } = l, { listboxId: r, isOpen: c } = a(), n = x(null);
|
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": "2.
|
|
5
|
+
"version": "2.6.1",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"react-dom": "^18.3.1"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@commitlint/cli": "^19.6.
|
|
43
|
+
"@commitlint/cli": "^19.6.1",
|
|
44
44
|
"@commitlint/config-conventional": "^19.6.0",
|
|
45
45
|
"@react-aria/button": "^3.11.0",
|
|
46
46
|
"@react-aria/dialog": "^3.5.20",
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
"stylelint-config-recommended": "^14.0.1",
|
|
86
86
|
"stylelint-config-standard": "^36.0.1",
|
|
87
87
|
"stylelint-order": "^6.0.4",
|
|
88
|
-
"stylelint": "^16.
|
|
88
|
+
"stylelint": "^16.12.0",
|
|
89
89
|
"typescript": "^5.7.2",
|
|
90
90
|
"vite-plugin-dts": "^4.3.0",
|
|
91
91
|
"vite-plugin-lib-inject-css": "^2.1.1",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectListbox.module-BWavTmq8.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|