@uva-glass/component-library 3.27.1 → 3.27.2

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.
Files changed (11) hide show
  1. package/dist/assets/MultiSelectBox.css +1 -1
  2. package/dist/assets/TextArea.css +1 -1
  3. package/dist/components/MultiSelectBox/MultiSelectBox.d.ts +3 -1
  4. package/dist/components/MultiSelectBox/MultiSelectBox.js +82 -78
  5. package/dist/components/MultiSelectBox/MultiSelectBox.js.map +1 -1
  6. package/dist/components/SelectListbox/SelectListBox.stories.js +5 -0
  7. package/dist/components/SelectListbox/SelectListBox.stories.js.map +1 -1
  8. package/dist/components/SelectListbox/SelectProvider.js +24 -33
  9. package/dist/components/SelectListbox/SelectProvider.js.map +1 -1
  10. package/dist/components/TextArea/TextArea.js +14 -14
  11. package/package.json +1 -1
package/dist/assets/MultiSelectBox.css CHANGED
@@ -1 +1 @@
1
- ._multi-select-box-wrapper_4fwo9_1{position:relative}._multi-select-box-trigger_4fwo9_5{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-500);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;height:2.75rem;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;position:relative;width:100%}._multi-select-box-trigger_4fwo9_5:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-300)}._multi-select-box-trigger_4fwo9_5:focus-visible,._multi-select-box-trigger_4fwo9_5:hover{background-color:var(--new-color-grey-300)}._multi-select-box-trigger-label_4fwo9_32{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._multi-select-box-trigger-icon_4fwo9_41{position:absolute;right:.875rem}._multi-select-box-trigger-icon--open_4fwo9_46{transform:rotate(180deg)}._multi-select-box-listbox--wrapper_4fwo9_50{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;display:flex;height:auto;margin:.25rem 0;overflow:hidden;position:fixed;width:auto;z-index:20}._multi-select-box-listbox_4fwo9_50{background-color:var(--new-color-uva-white);border-radius:var(--border-radius);display:flex;flex-direction:column;gap:.125rem;list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:.25rem;white-space:nowrap;width:fit-content}._multi-select-box-listbox-option_4fwo9_77{border-radius:.25rem;cursor:pointer;display:flex;height:2.5rem;justify-content:flex-start;position:relative;-webkit-user-select:none;user-select:none;width:100%}._multi-select-box-listbox-option--active_4fwo9_88,._multi-select-box-listbox-option_4fwo9_77:hover{background-color:var(--new-color-grey-300);box-shadow:0 0 0 1px var(--new-color-uva-white)}._multi-select-box-listbox-option_4fwo9_77:focus-visible,._multi-select-box-listbox-option_4fwo9_77:hover{background-color:var(--new-color-grey-300)}._multi-select-box-listbox-option-content_4fwo9_99{align-items:center;cursor:pointer;display:flex;gap:1rem;padding:.75rem;width:100%}._multi-select-box-listbox-option_4fwo9_77:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._multi-select-box-listbox-option--disabled_4fwo9_113{cursor:not-allowed;opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}
1
+ ._multi-select-box-wrapper_134e4_1{position:relative}._multi-select-box-trigger_134e4_5{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-500);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;height:2.75rem;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;position:relative;width:100%}._multi-select-box-trigger--darkBorder_134e4_22{border:1px solid var(--new-color-uva-black)}._multi-select-box-trigger_134e4_5:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-300)}._multi-select-box-trigger_134e4_5:focus-visible,._multi-select-box-trigger_134e4_5:hover{background-color:var(--new-color-grey-300)}._multi-select-box-trigger-label_134e4_36{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._multi-select-box-trigger-icon_134e4_45{position:absolute;right:.875rem}._multi-select-box-trigger-icon--open_134e4_50{transform:rotate(180deg)}._multi-select-box-listbox--wrapper_134e4_54{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;display:flex;height:auto;margin:.25rem 0;overflow:hidden;position:fixed;width:auto;z-index:20}._multi-select-box-listbox_134e4_54{background-color:var(--new-color-uva-white);border-radius:var(--border-radius);display:flex;flex-direction:column;gap:.125rem;list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:.25rem;white-space:nowrap;width:fit-content}._multi-select-box-listbox-option_134e4_81{border-radius:.25rem;cursor:pointer;display:flex;height:2.5rem;justify-content:flex-start;position:relative;-webkit-user-select:none;user-select:none;width:100%}._multi-select-box-listbox-option--active_134e4_92,._multi-select-box-listbox-option_134e4_81:hover{background-color:var(--new-color-grey-300);box-shadow:0 0 0 1px var(--new-color-uva-white)}._multi-select-box-listbox-option_134e4_81:focus-visible,._multi-select-box-listbox-option_134e4_81:hover{background-color:var(--new-color-grey-300)}._multi-select-box-listbox-option-content_134e4_103{align-items:center;cursor:pointer;display:flex;gap:1rem;padding:.75rem;width:100%}._multi-select-box-listbox-option_134e4_81:focus-visible{background-color:var(--new-color-grey-300);outline:1px solid var(--new-color-grey-700)}._multi-select-box-listbox-option--disabled_134e4_117{cursor:not-allowed;opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}
package/dist/assets/TextArea.css CHANGED
@@ -1 +1 @@
1
- ._text-area__wrapper_13728_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_13728_7{align-items:baseline;display:flex;justify-content:space-between}._text-area__label_13728_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold);line-height:var(--line-height-s)}._text-area__word-count_13728_20{color:var(--new-color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_13728_25{color:var(--new-color-red-600);font-weight:700}._text-area_13728_1{border-radius:.25rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}
1
+ ._text-area__wrapper_1pu93_1{display:flex;flex-direction:column;gap:.5rem}._text-area__header_1pu93_7{align-items:baseline;display:flex;justify-content:space-between}._text-area__label_1pu93_13{font-family:inherit;font-size:inherit;font-weight:var(--semibold);line-height:var(--line-height-s)}._text-area__word-count_1pu93_20{color:var(--new-color-grey-600);font-size:var(--font-size-text-non-essential)}._text-area__word-count--alert_1pu93_25{color:var(--new-color-red-600);font-weight:700}._text-area_1pu93_1{border-radius:.5rem;font-family:inherit;font-size:inherit;min-height:5.25rem;overflow:hidden;padding:.5rem;resize:none;white-space:pre-wrap;width:100%;word-wrap:break-word}
package/dist/components/MultiSelectBox/MultiSelectBox.d.ts CHANGED
@@ -16,9 +16,11 @@ export interface MultiSelectBoxProps {
16
16
  disabled?: boolean;
17
17
  /** If true sets the option dropdown min-width to the width of the select button. */
18
18
  fullWidth?: boolean;
19
+ /** Dark border. */
20
+ darkBorder?: boolean;
19
21
  /** The max height of the options. */
20
22
  maxOptionHeight?: `${number}${'px' | 'rem'}`;
21
23
  /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */
22
24
  optionPositionRight?: boolean;
23
25
  }
24
- export declare const MultiSelectBox: ({ selectData, onChange, defaultSelectedItems, labelSuffix, disabled, fullWidth, maxOptionHeight, optionPositionRight, }: MultiSelectBoxProps) => import("react/jsx-runtime").JSX.Element;
26
+ export declare const MultiSelectBox: ({ selectData, onChange, defaultSelectedItems, labelSuffix, disabled, fullWidth, darkBorder, maxOptionHeight, optionPositionRight, }: MultiSelectBoxProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/MultiSelectBox/MultiSelectBox.js CHANGED
@@ -1,41 +1,43 @@
1
1
  import { jsxs as g, jsx as u } from "react/jsx-runtime";
2
- import { useId as U, useState as b, useRef as S, useCallback as _, useEffect as y } from "react";
3
- import { c as I } from "../../clsx-OuTLNxxd.js";
4
- import { Icon as H } from "../Icon/Icon.js";
5
- import { Checkbox as q } from "../Checkbox/Checkbox.js";
6
- import { usePositionedFloaters as G } from "../hooks/usePositionedFloaters.js";
7
- import '../../assets/MultiSelectBox.css';const n = {
8
- "multi-select-box-wrapper": "_multi-select-box-wrapper_4fwo9_1",
9
- "multi-select-box-trigger": "_multi-select-box-trigger_4fwo9_5",
10
- "multi-select-box-trigger-label": "_multi-select-box-trigger-label_4fwo9_32",
11
- "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_4fwo9_41",
12
- "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_4fwo9_46",
13
- "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_4fwo9_50",
14
- "multi-select-box-listbox": "_multi-select-box-listbox_4fwo9_50",
15
- "multi-select-box-listbox-option": "_multi-select-box-listbox-option_4fwo9_77",
16
- "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_4fwo9_88",
17
- "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_4fwo9_99",
18
- "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_4fwo9_113"
19
- }, Z = ({
2
+ import { useId as H, useState as b, useRef as S, useCallback as _, useEffect as I } from "react";
3
+ import { c as h } from "../../clsx-OuTLNxxd.js";
4
+ import { Icon as q } from "../Icon/Icon.js";
5
+ import { Checkbox as G } from "../Checkbox/Checkbox.js";
6
+ import { usePositionedFloaters as J } from "../hooks/usePositionedFloaters.js";
7
+ import '../../assets/MultiSelectBox.css';const r = {
8
+ "multi-select-box-wrapper": "_multi-select-box-wrapper_134e4_1",
9
+ "multi-select-box-trigger": "_multi-select-box-trigger_134e4_5",
10
+ "multi-select-box-trigger--darkBorder": "_multi-select-box-trigger--darkBorder_134e4_22",
11
+ "multi-select-box-trigger-label": "_multi-select-box-trigger-label_134e4_36",
12
+ "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_134e4_45",
13
+ "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_134e4_50",
14
+ "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_134e4_54",
15
+ "multi-select-box-listbox": "_multi-select-box-listbox_134e4_54",
16
+ "multi-select-box-listbox-option": "_multi-select-box-listbox-option_134e4_81",
17
+ "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_134e4_92",
18
+ "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_134e4_103",
19
+ "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_134e4_117"
20
+ }, ee = ({
20
21
  selectData: c,
21
22
  onChange: m,
22
23
  defaultSelectedItems: f,
23
24
  labelSuffix: E = "geselecteerd",
24
25
  disabled: P = !1,
25
- fullWidth: C = !1,
26
+ fullWidth: B = !1,
27
+ darkBorder: C = !1,
26
28
  maxOptionHeight: L,
27
29
  optionPositionRight: O
28
30
  }) => {
29
- const w = U(), [r, h] = b(f || []), [N, v] = b((f == null ? void 0 : f.length) || 0), [i, a] = b(!1), [d, x] = b(-1), k = S(null), A = S(null), [F, K] = b(null), [R, $] = b(null), { style: D } = G(F, R, {
31
+ const v = H(), [n, k] = b(f || []), [N, w] = b((f == null ? void 0 : f.length) || 0), [s, a] = b(!1), [d, x] = b(-1), y = S(null), A = S(null), [F, K] = b(null), [R, $] = b(null), { style: D } = J(F, R, {
30
32
  mouseEvent: "click",
31
33
  offset: 4,
32
34
  maxFixedHeight: L,
33
35
  horizontalPosition: O ? "right" : "left",
34
36
  mobileBreakpoint: "28rem",
35
- fullWidth: C
37
+ fullWidth: B
36
38
  }), p = _(
37
39
  ({ target: e }) => {
38
- !e || !k.current || k.current.contains(e) || a(!1);
40
+ !e || !y.current || y.current.contains(e) || a(!1);
39
41
  },
40
42
  [a]
41
43
  ), M = _(
@@ -45,41 +47,41 @@ import '../../assets/MultiSelectBox.css';const n = {
45
47
  e.preventDefault(), a(!0);
46
48
  break;
47
49
  case "Escape":
48
- i && (e.stopPropagation(), a(!1));
50
+ s && (e.stopPropagation(), a(!1));
49
51
  break;
50
52
  }
51
53
  },
52
- [i]
54
+ [s]
53
55
  ), T = _(
54
56
  (e) => {
55
- if (i)
57
+ if (s)
56
58
  switch (e.key) {
57
59
  case "ArrowDown":
58
60
  e.preventDefault(), x((t) => {
59
- var o;
60
- let l = t;
61
+ var l;
62
+ let o = t;
61
63
  do
62
- l = l < c.length - 1 ? l + 1 : 0;
63
- while ((o = c[l]) != null && o.disabled);
64
- return l;
64
+ o = o < c.length - 1 ? o + 1 : 0;
65
+ while ((l = c[o]) != null && l.disabled);
66
+ return o;
65
67
  });
66
68
  break;
67
69
  case "ArrowUp":
68
70
  e.preventDefault(), x((t) => {
69
- var o;
70
- let l = t;
71
+ var l;
72
+ let o = t;
71
73
  do
72
- l = l <= 0 ? c.length - 1 : l - 1;
73
- while ((o = c[l]) != null && o.disabled);
74
- return l;
74
+ o = o <= 0 ? c.length - 1 : o - 1;
75
+ while ((l = c[o]) != null && l.disabled);
76
+ return o;
75
77
  });
76
78
  break;
77
79
  case "Enter": {
78
80
  e.preventDefault();
79
81
  const t = c[d];
80
82
  if (!t || t.disabled) break;
81
- const o = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
82
- h(o), v(o.length), m(o);
83
+ const l = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
84
+ k(l), w(l.length), m(l);
83
85
  break;
84
86
  }
85
87
  case "Tab":
@@ -90,62 +92,64 @@ import '../../assets/MultiSelectBox.css';const n = {
90
92
  break;
91
93
  }
92
94
  },
93
- [d, i, c, r, m]
95
+ [d, s, c, n, m]
94
96
  ), j = (e, t) => {
95
97
  if (t.disabled || e.target.tagName === "INPUT") return;
96
- const o = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
97
- h(o), v(o.length), m(o);
98
+ const l = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
99
+ k(l), w(l.length), m(l);
98
100
  }, z = _(
99
101
  (e) => {
100
- const { checked: t, value: l } = e.target;
101
- let o = [...r];
102
+ const { checked: t, value: o } = e.target;
103
+ let l = [...n];
102
104
  if (t) {
103
- const s = c.find((B) => B.value === l);
104
- s && o.push(s);
105
+ const i = c.find((U) => U.value === o);
106
+ i && l.push(i);
105
107
  } else
106
- o = o.filter((s) => s.value !== l);
107
- h(o), v(o.length), m(o);
108
+ l = l.filter((i) => i.value !== o);
109
+ k(l), w(l.length), m(l);
108
110
  },
109
- [c, r, m]
111
+ [c, n, m]
110
112
  );
111
- return y(() => {
112
- i && x(0);
113
- }, [i]), y(() => {
113
+ return I(() => {
114
+ s && x(0);
115
+ }, [s]), I(() => {
114
116
  var t;
115
117
  const e = (t = A.current) == null ? void 0 : t.children[d];
116
118
  e == null || e.focus();
117
- }, [d]), y(() => {
118
- if (i)
119
+ }, [d]), I(() => {
120
+ if (s)
119
121
  return document.addEventListener("click", p, !0), document.addEventListener("scroll", p, !0), () => {
120
122
  document.removeEventListener("click", p, !0), document.removeEventListener("scroll", p, !0);
121
123
  };
122
- }, [p, i]), /* @__PURE__ */ g("div", { className: n["multi-select-box-wrapper"], ref: k, children: [
124
+ }, [p, s]), /* @__PURE__ */ g("div", { className: r["multi-select-box-wrapper"], ref: y, children: [
123
125
  /* @__PURE__ */ g(
124
126
  "button",
125
127
  {
126
- className: n["multi-select-box-trigger"],
128
+ className: h(r["multi-select-box-trigger"], {
129
+ [r["multi-select-box-trigger--darkBorder"]]: C
130
+ }),
127
131
  type: "button",
128
132
  onClick: () => {
129
- a(!i);
133
+ a(!s);
130
134
  },
131
135
  onKeyDown: M,
132
- "aria-expanded": i,
136
+ "aria-expanded": s,
133
137
  "aria-haspopup": "listbox",
134
138
  "aria-label": `${N} ${E}`,
135
139
  disabled: P,
136
- ...i && { "aria-controls": w },
140
+ ...s && { "aria-controls": v },
137
141
  ref: $,
138
142
  children: [
139
- /* @__PURE__ */ g("span", { className: n["multi-select-box-trigger-label"], children: [
143
+ /* @__PURE__ */ g("span", { className: r["multi-select-box-trigger-label"], children: [
140
144
  N,
141
145
  " ",
142
146
  E
143
147
  ] }),
144
148
  /* @__PURE__ */ u(
145
- H,
149
+ q,
146
150
  {
147
- className: I(n["multi-select-box-trigger-icon"], {
148
- [n["multi-select-box-trigger-icon--open"]]: i
151
+ className: h(r["multi-select-box-trigger-icon"], {
152
+ [r["multi-select-box-trigger-icon--open"]]: s
149
153
  }),
150
154
  name: "CheveronDown",
151
155
  size: 16
@@ -157,35 +161,35 @@ import '../../assets/MultiSelectBox.css';const n = {
157
161
  /* @__PURE__ */ u(
158
162
  "div",
159
163
  {
160
- id: w,
161
- className: I(n["multi-select-box-listbox--wrapper"]),
162
- style: { ...D.style, visibility: i ? "visible" : "hidden" },
164
+ id: v,
165
+ className: h(r["multi-select-box-listbox--wrapper"]),
166
+ style: { ...D.style, visibility: s ? "visible" : "hidden" },
163
167
  role: "listbox",
164
168
  ref: K,
165
- children: /* @__PURE__ */ u("ul", { className: n["multi-select-box-listbox"], ref: A, children: c.map(({ label: e, value: t, disabled: l }, o) => /* @__PURE__ */ u(
169
+ children: /* @__PURE__ */ u("ul", { className: r["multi-select-box-listbox"], ref: A, children: c.map(({ label: e, value: t, disabled: o }, l) => /* @__PURE__ */ u(
166
170
  "li",
167
171
  {
168
- className: I(n["multi-select-box-listbox-option"], {
169
- [n["multi-select-box-listbox-option--active"]]: o === d,
170
- [n["multi-select-box-listbox-option--disabled"]]: l
172
+ className: h(r["multi-select-box-listbox-option"], {
173
+ [r["multi-select-box-listbox-option--active"]]: l === d,
174
+ [r["multi-select-box-listbox-option--disabled"]]: o
171
175
  }),
172
176
  role: "option",
173
177
  onKeyDown: T,
174
- onClick: (s) => j(s, { label: e, value: t, disabled: l }),
175
- onMouseOver: () => x(o),
176
- onFocus: () => x(o),
178
+ onClick: (i) => j(i, { label: e, value: t, disabled: o }),
179
+ onMouseOver: () => x(l),
180
+ onFocus: () => x(l),
177
181
  tabIndex: 0,
178
- "aria-selected": r.some((s) => s.value === t),
179
- children: /* @__PURE__ */ g("label", { htmlFor: e, className: n["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
182
+ "aria-selected": n.some((i) => i.value === t),
183
+ children: /* @__PURE__ */ g("label", { htmlFor: e, className: r["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
180
184
  /* @__PURE__ */ u(
181
- q,
185
+ G,
182
186
  {
183
- id: `${e}-${w}`,
187
+ id: `${e}-${v}`,
184
188
  onChange: z,
185
189
  value: t,
186
190
  tabIndex: -1,
187
- disabled: l,
188
- checked: r.some((s) => s.value === t)
191
+ disabled: o,
192
+ checked: n.some((i) => i.value === t)
189
193
  }
190
194
  ),
191
195
  /* @__PURE__ */ u("span", { children: e })
@@ -198,6 +202,6 @@ import '../../assets/MultiSelectBox.css';const n = {
198
202
  ] });
199
203
  };
200
204
  export {
201
- Z as MultiSelectBox
205
+ ee as MultiSelectBox
202
206
  };
203
207
  //# sourceMappingURL=MultiSelectBox.js.map
package/dist/components/MultiSelectBox/MultiSelectBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport clsx from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n label: string;\n value: string | number;\n disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n /** Array of label, values pairs */\n selectData: MultiSelectData[];\n /** Retuns selected label, values */\n onChange: (values: MultiSelectData[]) => void;\n /** Array of label, value pairs that should be check by default */\n defaultSelectedItems?: MultiSelectData[];\n /** Suffix label in the selectbutton '[count] selected' */\n labelSuffix?: string;\n /** Disables the multiselect */\n disabled?: boolean;\n /** If true sets the option dropdown min-width to the width of the select button. */\n fullWidth?: boolean;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\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}\n\nexport const MultiSelectBox = ({\n selectData,\n onChange,\n defaultSelectedItems,\n labelSuffix = 'geselecteerd',\n disabled = false,\n fullWidth = false,\n maxOptionHeight,\n optionPositionRight,\n}: MultiSelectBoxProps) => {\n const multiselectboxId = useId();\n const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const optionListRef = useRef<HTMLUListElement>(null);\n\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | 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 const onMouseEventOutside = useCallback(\n ({ target }: Event | MouseEvent) => {\n if (!target || !wrapperRef.current) return;\n\n if (!wrapperRef.current.contains(target as Node)) {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n const onTriggerKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n event.preventDefault();\n setIsOpen(true);\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n default:\n break;\n }\n },\n [isOpen]\n );\n\n const onOptionKeyDown = useCallback(\n (event: KeyboardEvent<HTMLLIElement>) => {\n if (!isOpen) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'ArrowUp':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'Enter': {\n event.preventDefault();\n const selectedItem = selectData[activeIndex];\n if (!selectedItem || selectedItem.disabled) break;\n const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== selectedItem.value)\n : [...selectedItems, selectedItem];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n break;\n }\n case 'Tab':\n event.preventDefault();\n setIsOpen(false);\n break;\n case 'Escape':\n event.stopPropagation();\n setIsOpen(false);\n break;\n default:\n break;\n }\n },\n [activeIndex, isOpen, selectData, selectedItems, onChange]\n );\n\n const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n if (option.disabled) return;\n\n // Prevent toggle if click originated from the checkbox\n if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== option.value)\n : [...selectedItems, option];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n };\n\n const handleSelect = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { checked, value } = event.target;\n let updatedSelectedItems = [...selectedItems];\n\n if (checked) {\n const selectedItem = selectData.find((item) => item.value === value);\n if (selectedItem) {\n updatedSelectedItems.push(selectedItem);\n }\n } else {\n updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n }\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n },\n [selectData, selectedItems, onChange]\n );\n\n useEffect(() => {\n if (isOpen) {\n setActiveIndex(0);\n }\n }, [isOpen]);\n\n useEffect(() => {\n const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n activeOption?.focus();\n }, [activeIndex]);\n\n useEffect(() => {\n if (!isOpen) return;\n\n document.addEventListener('click', onMouseEventOutside, true);\n document.addEventListener('scroll', onMouseEventOutside, true);\n\n return () => {\n document.removeEventListener('click', onMouseEventOutside, true);\n document.removeEventListener('scroll', onMouseEventOutside, true);\n };\n }, [onMouseEventOutside, isOpen]);\n\n return (\n <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n <button\n className={styles['multi-select-box-trigger']}\n type=\"button\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n onKeyDown={onTriggerKeyDown}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-label={`${selectedItemsCount} ${labelSuffix}`}\n disabled={disabled}\n {...(isOpen && { 'aria-controls': multiselectboxId })}\n ref={setReferenceElement}\n >\n <span className={styles['multi-select-box-trigger-label']}>\n {selectedItemsCount} {labelSuffix}\n </span>\n <Icon\n className={clsx(styles['multi-select-box-trigger-icon'], {\n [styles['multi-select-box-trigger-icon--open']]: isOpen,\n })}\n name=\"CheveronDown\"\n size={16}\n />\n </button>\n\n <div\n id={multiselectboxId}\n className={clsx(styles['multi-select-box-listbox--wrapper'])}\n style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n role=\"listbox\"\n ref={setPositionElement}\n >\n <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n {selectData.map(({ label, value, disabled }, index) => (\n <li\n className={clsx(styles['multi-select-box-listbox-option'], {\n [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n [styles['multi-select-box-listbox-option--disabled']]: disabled,\n })}\n key={value}\n role=\"option\"\n onKeyDown={onOptionKeyDown}\n onClick={(event) => onOptionClick(event, { label, value, disabled })}\n onMouseOver={() => setActiveIndex(index)}\n onFocus={() => setActiveIndex(index)}\n tabIndex={0}\n aria-selected={selectedItems.some((item) => item.value === value)}\n >\n <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n <Checkbox\n id={`${label}-${multiselectboxId}`}\n onChange={handleSelect}\n value={value}\n tabIndex={-1}\n disabled={disabled}\n checked={selectedItems.some((item) => item.value === value)}\n />\n <span>{label}</span>\n </label>\n </li>\n ))}\n </ul>\n </div>\n </div>\n );\n};\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","activeOption","styles","jsxs","jsx","Icon","clsx","label","index","Checkbox"],"mappings":"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"}
1
+ {"version":3,"file":"MultiSelectBox.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.tsx"],"sourcesContent":["import { useRef, useState, useId, useEffect, useCallback } from 'react';\nimport clsx from 'clsx';\n\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\n\nimport styles from './MultiSelectBox.module.css';\n\nimport { Icon } from 'components/Icon';\nimport { Checkbox } from 'components/Checkbox';\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport type MultiSelectData = {\n label: string;\n value: string | number;\n disabled?: boolean;\n};\n\nexport interface MultiSelectBoxProps {\n /** Array of label, values pairs */\n selectData: MultiSelectData[];\n /** Retuns selected label, values */\n onChange: (values: MultiSelectData[]) => void;\n /** Array of label, value pairs that should be check by default */\n defaultSelectedItems?: MultiSelectData[];\n /** Suffix label in the selectbutton '[count] selected' */\n labelSuffix?: string;\n /** Disables the multiselect */\n disabled?: boolean;\n /** If true sets the option dropdown min-width to the width of the select button. */\n fullWidth?: boolean;\n /** Dark border. */\n darkBorder?: boolean;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\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}\n\nexport const MultiSelectBox = ({\n selectData,\n onChange,\n defaultSelectedItems,\n labelSuffix = 'geselecteerd',\n disabled = false,\n fullWidth = false,\n darkBorder = false,\n maxOptionHeight,\n optionPositionRight,\n}: MultiSelectBoxProps) => {\n const multiselectboxId = useId();\n const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\n const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\n const [isOpen, setIsOpen] = useState(false);\n const [activeIndex, setActiveIndex] = useState(-1);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const optionListRef = useRef<HTMLUListElement>(null);\n\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | 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 const onMouseEventOutside = useCallback(\n ({ target }: Event | MouseEvent) => {\n if (!target || !wrapperRef.current) return;\n\n if (!wrapperRef.current.contains(target as Node)) {\n setIsOpen(false);\n }\n },\n [setIsOpen]\n );\n\n const onTriggerKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n switch (event.key) {\n case 'Enter':\n event.preventDefault();\n setIsOpen(true);\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n default:\n break;\n }\n },\n [isOpen]\n );\n\n const onOptionKeyDown = useCallback(\n (event: KeyboardEvent<HTMLLIElement>) => {\n if (!isOpen) return;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'ArrowUp':\n event.preventDefault();\n setActiveIndex((prev) => {\n let nextIndex = prev;\n do {\n nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\n } while (selectData[nextIndex]?.disabled);\n return nextIndex;\n });\n break;\n case 'Enter': {\n event.preventDefault();\n const selectedItem = selectData[activeIndex];\n if (!selectedItem || selectedItem.disabled) break;\n const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== selectedItem.value)\n : [...selectedItems, selectedItem];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n break;\n }\n case 'Tab':\n event.preventDefault();\n setIsOpen(false);\n break;\n case 'Escape':\n event.stopPropagation();\n setIsOpen(false);\n break;\n default:\n break;\n }\n },\n [activeIndex, isOpen, selectData, selectedItems, onChange]\n );\n\n const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\n if (option.disabled) return;\n\n // Prevent toggle if click originated from the checkbox\n if ((event.target as HTMLElement).tagName === 'INPUT') return;\n\n const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\n const updatedSelectedItems = isAlreadySelected\n ? selectedItems.filter((item) => item.value !== option.value)\n : [...selectedItems, option];\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n };\n\n const handleSelect = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { checked, value } = event.target;\n let updatedSelectedItems = [...selectedItems];\n\n if (checked) {\n const selectedItem = selectData.find((item) => item.value === value);\n if (selectedItem) {\n updatedSelectedItems.push(selectedItem);\n }\n } else {\n updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\n }\n\n setSelectedItems(updatedSelectedItems);\n setSelectedItemsCount(updatedSelectedItems.length);\n onChange(updatedSelectedItems);\n },\n [selectData, selectedItems, onChange]\n );\n\n useEffect(() => {\n if (isOpen) {\n setActiveIndex(0);\n }\n }, [isOpen]);\n\n useEffect(() => {\n const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\n activeOption?.focus();\n }, [activeIndex]);\n\n useEffect(() => {\n if (!isOpen) return;\n\n document.addEventListener('click', onMouseEventOutside, true);\n document.addEventListener('scroll', onMouseEventOutside, true);\n\n return () => {\n document.removeEventListener('click', onMouseEventOutside, true);\n document.removeEventListener('scroll', onMouseEventOutside, true);\n };\n }, [onMouseEventOutside, isOpen]);\n\n return (\n <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\n <button\n className={clsx(styles['multi-select-box-trigger'], {\n [styles['multi-select-box-trigger--darkBorder']]: darkBorder,\n })}\n type=\"button\"\n onClick={() => {\n setIsOpen(!isOpen);\n }}\n onKeyDown={onTriggerKeyDown}\n aria-expanded={isOpen}\n aria-haspopup=\"listbox\"\n aria-label={`${selectedItemsCount} ${labelSuffix}`}\n disabled={disabled}\n {...(isOpen && { 'aria-controls': multiselectboxId })}\n ref={setReferenceElement}\n >\n <span className={styles['multi-select-box-trigger-label']}>\n {selectedItemsCount} {labelSuffix}\n </span>\n <Icon\n className={clsx(styles['multi-select-box-trigger-icon'], {\n [styles['multi-select-box-trigger-icon--open']]: isOpen,\n })}\n name=\"CheveronDown\"\n size={16}\n />\n </button>\n\n <div\n id={multiselectboxId}\n className={clsx(styles['multi-select-box-listbox--wrapper'])}\n style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\n role=\"listbox\"\n ref={setPositionElement}\n >\n <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\n {selectData.map(({ label, value, disabled }, index) => (\n <li\n className={clsx(styles['multi-select-box-listbox-option'], {\n [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\n [styles['multi-select-box-listbox-option--disabled']]: disabled,\n })}\n key={value}\n role=\"option\"\n onKeyDown={onOptionKeyDown}\n onClick={(event) => onOptionClick(event, { label, value, disabled })}\n onMouseOver={() => setActiveIndex(index)}\n onFocus={() => setActiveIndex(index)}\n tabIndex={0}\n aria-selected={selectedItems.some((item) => item.value === value)}\n >\n <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\n <Checkbox\n id={`${label}-${multiselectboxId}`}\n onChange={handleSelect}\n value={value}\n tabIndex={-1}\n disabled={disabled}\n checked={selectedItems.some((item) => item.value === value)}\n />\n <span>{label}</span>\n </label>\n </li>\n ))}\n </ul>\n </div>\n </div>\n );\n};\n"],"names":["MultiSelectBox","selectData","onChange","defaultSelectedItems","labelSuffix","disabled","fullWidth","darkBorder","maxOptionHeight","optionPositionRight","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","optionListRef","positionElement","setPositionElement","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","onMouseEventOutside","useCallback","target","onTriggerKeyDown","event","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","onOptionClick","option","handleSelect","checked","value","useEffect","activeOption","styles","jsxs","clsx","jsx","Icon","label","index","Checkbox"],"mappings":"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"}
package/dist/components/SelectListbox/SelectListBox.stories.js CHANGED
@@ -73,6 +73,11 @@ const d = ({
73
73
  disable: !0
74
74
  }
75
75
  },
76
+ defaultValue: {
77
+ table: {
78
+ disable: !0
79
+ }
80
+ },
76
81
  onChange: {
77
82
  table: {
78
83
  disable: !0