@uva-glass/component-library 3.17.3 → 3.18.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.
Files changed (12) hide show
  1. package/dist/assets/MultiSelectBox.css +1 -1
  2. package/dist/components/MultiSelectBox/MultiSelectBox.d.ts +9 -1
  3. package/dist/components/MultiSelectBox/MultiSelectBox.js +115 -103
  4. package/dist/components/MultiSelectBox/MultiSelectBox.js.map +1 -1
  5. package/dist/components/MultiSelectBox/MultiSelectBox.stories.d.ts +1 -0
  6. package/dist/components/MultiSelectBox/MultiSelectBox.stories.js +36 -12
  7. package/dist/components/MultiSelectBox/MultiSelectBox.stories.js.map +1 -1
  8. package/dist/components/MultiSelectBox/MultiSelectBox.test.js +17 -11
  9. package/dist/components/MultiSelectBox/MultiSelectBox.test.js.map +1 -1
  10. package/dist/setupTests.js +152 -139
  11. package/dist/setupTests.js.map +1 -1
  12. package/package.json +8 -8
package/dist/assets/MultiSelectBox.css CHANGED
@@ -1 +1 @@
1
- ._multi-select-box-wrapper_r576s_1{position:relative}._multi-select-box-trigger_r576s_5{align-items:center;background-color:var(--color-white);border:1px solid var(--color-silver);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_r576s_5:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._multi-select-box-trigger_r576s_5:focus-visible,._multi-select-box-trigger_r576s_5:hover{background-color:var(--color-lavender)}._multi-select-box-trigger-label_r576s_32{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._multi-select-box-trigger-icon_r576s_41{position:absolute;right:.875rem}._multi-select-box-trigger-icon--open_r576s_46{transform:rotate(180deg)}._multi-select-box-listbox--wrapper_r576s_50{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;display:flex;height:auto;overflow:hidden;position:absolute;top:100%;visibility:hidden;width:auto;z-index:20}._multi-select-box-listbox--wrapper-above_r576s_63{bottom:100%;top:auto}._multi-select-box-listbox--wrapper-open_r576s_68{visibility:visible}._multi-select-box-listbox_r576s_50{background-color:var(--color-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_r576s_87{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_r576s_98,._multi-select-box-listbox-option_r576s_87:hover{background-color:var(--color-grey-100);box-shadow:0 0 0 1px var(--color-white)}._multi-select-box-listbox-option_r576s_87:focus-visible,._multi-select-box-listbox-option_r576s_87:hover{background-color:var(--color-grey-100)}._multi-select-box-listbox-option-content_r576s_109{align-items:center;cursor:pointer;display:flex;gap:1rem;padding:0 .75rem;width:100%}._multi-select-box-listbox-option_r576s_87:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._multi-select-box-listbox-option--disabled_r576s_123{cursor:not-allowed;opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}
1
+ ._multi-select-box-wrapper_17783_1{position:relative}._multi-select-box-trigger_17783_5{align-items:center;background-color:var(--color-white);border:1px solid var(--color-silver);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_17783_5:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._multi-select-box-trigger_17783_5:focus-visible,._multi-select-box-trigger_17783_5:hover{background-color:var(--color-lavender)}._multi-select-box-trigger-label_17783_32{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._multi-select-box-trigger-icon_17783_41{position:absolute;right:.875rem}._multi-select-box-trigger-icon--open_17783_46{transform:rotate(180deg)}._multi-select-box-listbox--wrapper_17783_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_17783_50{background-color:var(--color-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_17783_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_17783_88,._multi-select-box-listbox-option_17783_77:hover{background-color:var(--color-grey-100);box-shadow:0 0 0 1px var(--color-white)}._multi-select-box-listbox-option_17783_77:focus-visible,._multi-select-box-listbox-option_17783_77:hover{background-color:var(--color-grey-100)}._multi-select-box-listbox-option-content_17783_99{align-items:center;cursor:pointer;display:flex;gap:1rem;padding:.75rem;width:100%}._multi-select-box-listbox-option_17783_77:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._multi-select-box-listbox-option--disabled_17783_113{cursor:not-allowed;opacity:.5;pointer-events:none;-webkit-user-select:none;user-select:none}
package/dist/components/MultiSelectBox/MultiSelectBox.d.ts CHANGED
@@ -8,9 +8,17 @@ export interface MultiSelectBoxProps {
8
8
  selectData: MultiSelectData[];
9
9
  /** Retuns selected label, values */
10
10
  onChange: (values: MultiSelectData[]) => void;
11
+ /** Array of label, value pairs that should be check by default */
12
+ defaultSelectedItems?: MultiSelectData[];
11
13
  /** Suffix label in the selectbutton '[count] selected' */
12
14
  labelSuffix?: string;
13
15
  /** Disables the multiselect */
14
16
  disabled?: boolean;
17
+ /** If true sets the option dropdown min-width to the width of the select button. */
18
+ fullWidth?: boolean;
19
+ /** The max height of the options. */
20
+ maxOptionHeight?: `${number}${'px' | 'rem'}`;
21
+ /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */
22
+ optionPositionRight?: boolean;
15
23
  }
16
- export declare const MultiSelectBox: ({ selectData, onChange, labelSuffix, disabled, }: MultiSelectBoxProps) => import("react/jsx-runtime").JSX.Element;
24
+ export declare const MultiSelectBox: ({ selectData, onChange, defaultSelectedItems, labelSuffix, disabled, fullWidth, maxOptionHeight, optionPositionRight, }: MultiSelectBoxProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/MultiSelectBox/MultiSelectBox.js CHANGED
@@ -1,73 +1,85 @@
1
- import { jsxs as f, jsx as b } from "react/jsx-runtime";
2
- import { useRef as h, useId as P, useState as g, useCallback as w, useLayoutEffect as R, useEffect as v } from "react";
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
3
  import { c as I } from "../../clsx-OuTLNxxd.js";
4
4
  import { Icon as H } from "../Icon/Icon.js";
5
- import { Checkbox as M } from "../Checkbox/Checkbox.js";
6
- import '../../assets/MultiSelectBox.css';const r = {
7
- "multi-select-box-wrapper": "_multi-select-box-wrapper_r576s_1",
8
- "multi-select-box-trigger": "_multi-select-box-trigger_r576s_5",
9
- "multi-select-box-trigger-label": "_multi-select-box-trigger-label_r576s_32",
10
- "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_r576s_41",
11
- "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_r576s_46",
12
- "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_r576s_50",
13
- "multi-select-box-listbox--wrapper-above": "_multi-select-box-listbox--wrapper-above_r576s_63",
14
- "multi-select-box-listbox--wrapper-open": "_multi-select-box-listbox--wrapper-open_r576s_68",
15
- "multi-select-box-listbox": "_multi-select-box-listbox_r576s_50",
16
- "multi-select-box-listbox-option": "_multi-select-box-listbox-option_r576s_87",
17
- "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_r576s_98",
18
- "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_r576s_109",
19
- "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_r576s_123"
20
- }, U = ({
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_17783_1",
9
+ "multi-select-box-trigger": "_multi-select-box-trigger_17783_5",
10
+ "multi-select-box-trigger-label": "_multi-select-box-trigger-label_17783_32",
11
+ "multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_17783_41",
12
+ "multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_17783_46",
13
+ "multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_17783_50",
14
+ "multi-select-box-listbox": "_multi-select-box-listbox_17783_50",
15
+ "multi-select-box-listbox-option": "_multi-select-box-listbox-option_17783_77",
16
+ "multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_17783_88",
17
+ "multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_17783_99",
18
+ "multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_17783_113"
19
+ }, Z = ({
21
20
  selectData: c,
22
- onChange: _,
23
- labelSuffix: k = "geselecteerd",
24
- disabled: A = !1
21
+ onChange: m,
22
+ defaultSelectedItems: f,
23
+ labelSuffix: E = "geselecteerd",
24
+ disabled: P = !1,
25
+ fullWidth: C = !1,
26
+ maxOptionHeight: L,
27
+ optionPositionRight: O
25
28
  }) => {
26
- const p = h(null), y = h(P()), [n, E] = g([]), [N, S] = g(0), [l, a] = g(!1), [m, x] = g(-1), u = h(null), [B, L] = g("below"), d = w((e) => {
27
- const t = e.target;
28
- !t || !u.current || !p.current || u.current.contains(t) || p.current.contains(t) || a(!1);
29
- }, []), C = w(
29
+ const h = U(), [r, v] = b(f || []), [N, k] = b((f == null ? void 0 : f.length) || 0), [i, a] = b(!1), [d, x] = b(-1), w = S(null), A = S(null), [F, K] = b(null), [R, $] = b(null), { style: D } = G(F, R, {
30
+ mouseEvent: "click",
31
+ offset: 4,
32
+ maxFixedHeight: L,
33
+ horizontalPosition: O ? "right" : "left",
34
+ mobileBreakpoint: "28rem",
35
+ fullWidth: C
36
+ }), p = _(
37
+ ({ target: e }) => {
38
+ !e || !w.current || w.current.contains(e) || a(!1);
39
+ },
40
+ [a]
41
+ ), M = _(
30
42
  (e) => {
31
43
  switch (e.key) {
32
44
  case "Enter":
33
45
  e.preventDefault(), a(!0);
34
46
  break;
35
47
  case "Escape":
36
- l && (e.stopPropagation(), a(!1));
48
+ i && (e.stopPropagation(), a(!1));
37
49
  break;
38
50
  }
39
51
  },
40
- [l]
41
- ), D = w(
52
+ [i]
53
+ ), T = _(
42
54
  (e) => {
43
- if (l)
55
+ if (i)
44
56
  switch (e.key) {
45
57
  case "ArrowDown":
46
58
  e.preventDefault(), x((t) => {
47
- var o;
48
- let s = t;
59
+ var l;
60
+ let o = t;
49
61
  do
50
- s = s < c.length - 1 ? s + 1 : 0;
51
- while ((o = c[s]) != null && o.disabled);
52
- return s;
62
+ o = o < c.length - 1 ? o + 1 : 0;
63
+ while ((l = c[o]) != null && l.disabled);
64
+ return o;
53
65
  });
54
66
  break;
55
67
  case "ArrowUp":
56
68
  e.preventDefault(), x((t) => {
57
- var o;
58
- let s = t;
69
+ var l;
70
+ let o = t;
59
71
  do
60
- s = s <= 0 ? c.length - 1 : s - 1;
61
- while ((o = c[s]) != null && o.disabled);
62
- return s;
72
+ o = o <= 0 ? c.length - 1 : o - 1;
73
+ while ((l = c[o]) != null && l.disabled);
74
+ return o;
63
75
  });
64
76
  break;
65
77
  case "Enter": {
66
78
  e.preventDefault();
67
- const t = c[m];
79
+ const t = c[d];
68
80
  if (!t || t.disabled) break;
69
- const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
70
- E(o), S(o.length), _(o);
81
+ const l = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
82
+ v(l), k(l.length), m(l);
71
83
  break;
72
84
  }
73
85
  case "Tab":
@@ -78,61 +90,62 @@ import '../../assets/MultiSelectBox.css';const r = {
78
90
  break;
79
91
  }
80
92
  },
81
- [m, l, c, n, _]
82
- ), K = w(
93
+ [d, i, c, r, m]
94
+ ), j = (e, t) => {
95
+ if (t.disabled || e.target.tagName === "INPUT") return;
96
+ const l = r.some((s) => s.value === t.value) ? r.filter((s) => s.value !== t.value) : [...r, t];
97
+ v(l), k(l.length), m(l);
98
+ }, z = _(
83
99
  (e) => {
84
- const { checked: t, value: s } = e.target;
85
- let o = [...n];
100
+ const { checked: t, value: o } = e.target;
101
+ let l = [...r];
86
102
  if (t) {
87
- const i = c.find((O) => O.value === s);
88
- i && o.push(i);
103
+ const s = c.find((B) => B.value === o);
104
+ s && l.push(s);
89
105
  } else
90
- o = o.filter((i) => i.value !== s);
91
- E(o), S(o.length), _(o);
106
+ l = l.filter((s) => s.value !== o);
107
+ v(l), k(l.length), m(l);
92
108
  },
93
- [c, n, _]
109
+ [c, r, m]
94
110
  );
95
- return R(() => {
96
- if (l && p.current && u.current) {
97
- const e = p.current.getBoundingClientRect(), t = u.current.offsetHeight;
98
- window.innerHeight - e.bottom < t ? L("above") : L("below");
99
- }
100
- }, [l]), v(() => {
101
- l && x(0);
102
- }, [l]), v(() => {
111
+ return y(() => {
112
+ i && x(0);
113
+ }, [i]), y(() => {
103
114
  var t;
104
- const e = (t = u.current) == null ? void 0 : t.children[m];
115
+ const e = (t = A.current) == null ? void 0 : t.children[d];
105
116
  e == null || e.focus();
106
- }, [m]), v(() => {
107
- if (l)
108
- return document.addEventListener("click", d, !0), document.addEventListener("scroll", d, !0), () => {
109
- document.removeEventListener("click", d, !0), document.removeEventListener("scroll", d, !0);
117
+ }, [d]), y(() => {
118
+ if (i)
119
+ return document.addEventListener("click", p, !0), document.addEventListener("scroll", p, !0), () => {
120
+ document.removeEventListener("click", p, !0), document.removeEventListener("scroll", p, !0);
110
121
  };
111
- }, [d, l]), /* @__PURE__ */ f("div", { className: r["multi-select-box-wrapper"], children: [
112
- /* @__PURE__ */ f(
122
+ }, [p, i]), /* @__PURE__ */ g("div", { className: n["multi-select-box-wrapper"], ref: w, children: [
123
+ /* @__PURE__ */ g(
113
124
  "button",
114
125
  {
115
- className: r["multi-select-box-trigger"],
126
+ className: n["multi-select-box-trigger"],
116
127
  type: "button",
117
- onClick: () => a((e) => !e),
118
- onKeyDown: C,
119
- "aria-expanded": l,
128
+ onClick: () => {
129
+ a(!i);
130
+ },
131
+ onKeyDown: M,
132
+ "aria-expanded": i,
120
133
  "aria-haspopup": "listbox",
121
- "aria-label": `${N} ${k}`,
122
- disabled: A,
123
- ...l && { "aria-controls": y.current },
124
- ref: p,
134
+ "aria-label": `${N} ${E}`,
135
+ disabled: P,
136
+ ...i && { "aria-controls": h },
137
+ ref: $,
125
138
  children: [
126
- /* @__PURE__ */ f("span", { className: r["multi-select-box-trigger-label"], children: [
139
+ /* @__PURE__ */ g("span", { className: n["multi-select-box-trigger-label"], children: [
127
140
  N,
128
141
  " ",
129
- k
142
+ E
130
143
  ] }),
131
- /* @__PURE__ */ b(
144
+ /* @__PURE__ */ u(
132
145
  H,
133
146
  {
134
- className: I(r["multi-select-box-trigger-icon"], {
135
- [r["multi-select-box-trigger-icon--open"]]: l
147
+ className: I(n["multi-select-box-trigger-icon"], {
148
+ [n["multi-select-box-trigger-icon--open"]]: i
136
149
  }),
137
150
  name: "CheveronDown",
138
151
  size: 16
@@ -141,42 +154,41 @@ import '../../assets/MultiSelectBox.css';const r = {
141
154
  ]
142
155
  }
143
156
  ),
144
- /* @__PURE__ */ b(
157
+ /* @__PURE__ */ u(
145
158
  "div",
146
159
  {
147
- id: y.current,
148
- className: I(
149
- r["multi-select-box-listbox--wrapper"],
150
- l && r["multi-select-box-listbox--wrapper-open"],
151
- B === "above" && r["multi-select-box-listbox--wrapper-above"]
152
- ),
160
+ id: h,
161
+ className: I(n["multi-select-box-listbox--wrapper"]),
162
+ style: { ...D.style, visibility: i ? "visible" : "hidden" },
153
163
  role: "listbox",
154
- children: /* @__PURE__ */ b("ul", { className: r["multi-select-box-listbox"], ref: u, children: c.map(({ label: e, value: t, disabled: s }, o) => /* @__PURE__ */ b(
164
+ ref: K,
165
+ children: /* @__PURE__ */ u("ul", { className: n["multi-select-box-listbox"], ref: A, children: c.map(({ label: e, value: t, disabled: o }, l) => /* @__PURE__ */ u(
155
166
  "li",
156
167
  {
157
- className: I(r["multi-select-box-listbox-option"], {
158
- [r["multi-select-box-listbox-option--active"]]: o === m,
159
- [r["multi-select-box-listbox-option--disabled"]]: s
168
+ className: I(n["multi-select-box-listbox-option"], {
169
+ [n["multi-select-box-listbox-option--active"]]: l === d,
170
+ [n["multi-select-box-listbox-option--disabled"]]: o
160
171
  }),
161
172
  role: "option",
162
- onKeyDown: D,
163
- onMouseOver: () => x(o),
164
- onFocus: () => x(o),
173
+ onKeyDown: T,
174
+ onClick: (s) => j(s, { label: e, value: t, disabled: o }),
175
+ onMouseOver: () => x(l),
176
+ onFocus: () => x(l),
165
177
  tabIndex: 0,
166
- "aria-selected": n.some((i) => i.value === t),
167
- children: /* @__PURE__ */ f("label", { htmlFor: e, className: r["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
168
- /* @__PURE__ */ b(
169
- M,
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: [
180
+ /* @__PURE__ */ u(
181
+ q,
170
182
  {
171
- id: e,
172
- onChange: K,
183
+ id: `${e}-${h}`,
184
+ onChange: z,
173
185
  value: t,
174
186
  tabIndex: -1,
175
- disabled: s,
176
- checked: n.some((i) => i.value === t)
187
+ disabled: o,
188
+ checked: r.some((s) => s.value === t)
177
189
  }
178
190
  ),
179
- /* @__PURE__ */ b("span", { children: e })
191
+ /* @__PURE__ */ u("span", { children: e })
180
192
  ] })
181
193
  },
182
194
  t
@@ -186,6 +198,6 @@ import '../../assets/MultiSelectBox.css';const r = {
186
198
  ] });
187
199
  };
188
200
  export {
189
- U as MultiSelectBox
201
+ Z as MultiSelectBox
190
202
  };
191
203
  //# 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, useLayoutEffect } from 'react';\r\nimport clsx from 'clsx';\r\n\r\nimport type { KeyboardEvent, ChangeEvent } from 'react';\r\n\r\nimport styles from './MultiSelectBox.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\nimport { Checkbox } from 'components/Checkbox';\r\n\r\nexport type MultiSelectData = {\r\n label: string;\r\n value: string | number;\r\n disabled?: boolean;\r\n};\r\n\r\nexport interface MultiSelectBoxProps {\r\n /** Array of label, values pairs */\r\n selectData: MultiSelectData[];\r\n /** Retuns selected label, values */\r\n onChange: (values: MultiSelectData[]) => void;\r\n /** Suffix label in the selectbutton '[count] selected' */\r\n labelSuffix?: string;\r\n /** Disables the multiselect */\r\n disabled?: boolean;\r\n}\r\n\r\nexport const MultiSelectBox = ({\r\n selectData,\r\n onChange,\r\n labelSuffix = 'geselecteerd',\r\n disabled = false,\r\n}: MultiSelectBoxProps) => {\r\n const selectButton = useRef<HTMLButtonElement>(null);\r\n const multiselectboxId = useRef<string>(useId());\r\n const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>([]);\r\n const [selectedItemsCount, setSelectedItemsCount] = useState(0);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [activeIndex, setActiveIndex] = useState(-1);\r\n const optionListRef = useRef<HTMLUListElement>(null);\r\n const [dropdownPosition, setDropdownPosition] = useState<'above' | 'below'>('below');\r\n\r\n const onMouseEventOutside = useCallback((event: Event | MouseEvent) => {\r\n const target = event.target as Node;\r\n if (\r\n !target ||\r\n !optionListRef.current ||\r\n !selectButton.current ||\r\n optionListRef.current.contains(target) ||\r\n selectButton.current.contains(target)\r\n ) {\r\n return;\r\n }\r\n setIsOpen(false);\r\n }, []);\r\n\r\n const onTriggerKeyDown = useCallback(\r\n (event: KeyboardEvent<HTMLButtonElement>) => {\r\n switch (event.key) {\r\n case 'Enter':\r\n event.preventDefault();\r\n setIsOpen(true);\r\n break;\r\n case 'Escape':\r\n if (isOpen) {\r\n event.stopPropagation();\r\n setIsOpen(false);\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n },\r\n [isOpen]\r\n );\r\n\r\n const onOptionKeyDown = useCallback(\r\n (event: KeyboardEvent<HTMLLIElement>) => {\r\n if (!isOpen) return;\r\n\r\n switch (event.key) {\r\n case 'ArrowDown':\r\n event.preventDefault();\r\n setActiveIndex((prev) => {\r\n let nextIndex = prev;\r\n do {\r\n nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\r\n } while (selectData[nextIndex]?.disabled);\r\n return nextIndex;\r\n });\r\n break;\r\n case 'ArrowUp':\r\n event.preventDefault();\r\n setActiveIndex((prev) => {\r\n let nextIndex = prev;\r\n do {\r\n nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\r\n } while (selectData[nextIndex]?.disabled);\r\n return nextIndex;\r\n });\r\n break;\r\n case 'Enter': {\r\n event.preventDefault();\r\n const selectedItem = selectData[activeIndex];\r\n if (!selectedItem || selectedItem.disabled) break;\r\n const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\r\n const updatedSelectedItems = isAlreadySelected\r\n ? selectedItems.filter((item) => item.value !== selectedItem.value)\r\n : [...selectedItems, selectedItem];\r\n\r\n setSelectedItems(updatedSelectedItems);\r\n setSelectedItemsCount(updatedSelectedItems.length);\r\n onChange(updatedSelectedItems);\r\n break;\r\n }\r\n case 'Tab':\r\n event.preventDefault();\r\n setIsOpen(false);\r\n break;\r\n case 'Escape':\r\n event.stopPropagation();\r\n setIsOpen(false);\r\n break;\r\n default:\r\n break;\r\n }\r\n },\r\n [activeIndex, isOpen, selectData, selectedItems, onChange]\r\n );\r\n\r\n const handleSelect = useCallback(\r\n (event: ChangeEvent<HTMLInputElement>) => {\r\n const { checked, value } = event.target;\r\n let updatedSelectedItems = [...selectedItems];\r\n\r\n if (checked) {\r\n const selectedItem = selectData.find((item) => item.value === value);\r\n if (selectedItem) {\r\n updatedSelectedItems.push(selectedItem);\r\n }\r\n } else {\r\n updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\r\n }\r\n\r\n setSelectedItems(updatedSelectedItems);\r\n setSelectedItemsCount(updatedSelectedItems.length);\r\n onChange(updatedSelectedItems);\r\n },\r\n [selectData, selectedItems, onChange]\r\n );\r\n\r\n useLayoutEffect(() => {\r\n if (isOpen && selectButton.current && optionListRef.current) {\r\n const buttonRect = selectButton.current.getBoundingClientRect();\r\n const dropdownHeight = optionListRef.current.offsetHeight;\r\n const spaceBelow = window.innerHeight - buttonRect.bottom;\r\n if (spaceBelow < dropdownHeight) {\r\n setDropdownPosition('above');\r\n } else {\r\n setDropdownPosition('below');\r\n }\r\n }\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n if (isOpen) {\r\n setActiveIndex(0);\r\n }\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\r\n activeOption?.focus();\r\n }, [activeIndex]);\r\n\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n\r\n document.addEventListener('click', onMouseEventOutside, true);\r\n document.addEventListener('scroll', onMouseEventOutside, true);\r\n\r\n return () => {\r\n document.removeEventListener('click', onMouseEventOutside, true);\r\n document.removeEventListener('scroll', onMouseEventOutside, true);\r\n };\r\n }, [onMouseEventOutside, isOpen]);\r\n\r\n return (\r\n <div className={styles['multi-select-box-wrapper']}>\r\n <button\r\n className={styles['multi-select-box-trigger']}\r\n type=\"button\"\r\n onClick={() => setIsOpen((prev) => !prev)}\r\n onKeyDown={onTriggerKeyDown}\r\n aria-expanded={isOpen}\r\n aria-haspopup=\"listbox\"\r\n aria-label={`${selectedItemsCount} ${labelSuffix}`}\r\n disabled={disabled}\r\n {...(isOpen && { 'aria-controls': multiselectboxId.current })}\r\n ref={selectButton}\r\n >\r\n <span className={styles['multi-select-box-trigger-label']}>\r\n {selectedItemsCount} {labelSuffix}\r\n </span>\r\n <Icon\r\n className={clsx(styles['multi-select-box-trigger-icon'], {\r\n [styles['multi-select-box-trigger-icon--open']]: isOpen,\r\n })}\r\n name=\"CheveronDown\"\r\n size={16}\r\n />\r\n </button>\r\n\r\n <div\r\n id={multiselectboxId.current}\r\n className={clsx(\r\n styles['multi-select-box-listbox--wrapper'],\r\n isOpen && styles['multi-select-box-listbox--wrapper-open'],\r\n dropdownPosition === 'above' && styles['multi-select-box-listbox--wrapper-above']\r\n )}\r\n role=\"listbox\"\r\n >\r\n <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\r\n {selectData.map(({ label, value, disabled }, index) => (\r\n <li\r\n className={clsx(styles['multi-select-box-listbox-option'], {\r\n [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\r\n [styles['multi-select-box-listbox-option--disabled']]: disabled,\r\n })}\r\n key={value}\r\n role=\"option\"\r\n onKeyDown={onOptionKeyDown}\r\n onMouseOver={() => setActiveIndex(index)}\r\n onFocus={() => setActiveIndex(index)}\r\n tabIndex={0}\r\n aria-selected={selectedItems.some((item) => item.value === value)}\r\n >\r\n <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\r\n <Checkbox\r\n id={label}\r\n onChange={handleSelect}\r\n value={value}\r\n tabIndex={-1}\r\n disabled={disabled}\r\n checked={selectedItems.some((item) => item.value === value)}\r\n />\r\n <span>{label}</span>\r\n </label>\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n </div>\r\n );\r\n};\r\n"],"names":["MultiSelectBox","selectData","onChange","labelSuffix","disabled","selectButton","useRef","multiselectboxId","useId","selectedItems","setSelectedItems","useState","selectedItemsCount","setSelectedItemsCount","isOpen","setIsOpen","activeIndex","setActiveIndex","optionListRef","dropdownPosition","setDropdownPosition","onMouseEventOutside","useCallback","event","target","onTriggerKeyDown","onOptionKeyDown","prev","nextIndex","_a","selectedItem","updatedSelectedItems","item","handleSelect","checked","value","useLayoutEffect","buttonRect","dropdownHeight","useEffect","activeOption","jsxs","styles","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';\r\nimport clsx from 'clsx';\r\n\r\nimport type { KeyboardEvent, ChangeEvent, MouseEvent } from 'react';\r\n\r\nimport styles from './MultiSelectBox.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\nimport { Checkbox } from 'components/Checkbox';\r\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\r\n\r\nexport type MultiSelectData = {\r\n label: string;\r\n value: string | number;\r\n disabled?: boolean;\r\n};\r\n\r\nexport interface MultiSelectBoxProps {\r\n /** Array of label, values pairs */\r\n selectData: MultiSelectData[];\r\n /** Retuns selected label, values */\r\n onChange: (values: MultiSelectData[]) => void;\r\n /** Array of label, value pairs that should be check by default */\r\n defaultSelectedItems?: MultiSelectData[];\r\n /** Suffix label in the selectbutton '[count] selected' */\r\n labelSuffix?: string;\r\n /** Disables the multiselect */\r\n disabled?: boolean;\r\n /** If true sets the option dropdown min-width to the width of the select button. */\r\n fullWidth?: boolean;\r\n /** The max height of the options. */\r\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\r\n /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\r\n optionPositionRight?: boolean;\r\n}\r\n\r\nexport const MultiSelectBox = ({\r\n selectData,\r\n onChange,\r\n defaultSelectedItems,\r\n labelSuffix = 'geselecteerd',\r\n disabled = false,\r\n fullWidth = false,\r\n maxOptionHeight,\r\n optionPositionRight,\r\n}: MultiSelectBoxProps) => {\r\n const multiselectboxId = useId();\r\n const [selectedItems, setSelectedItems] = useState<MultiSelectData[]>(defaultSelectedItems || []);\r\n const [selectedItemsCount, setSelectedItemsCount] = useState(defaultSelectedItems?.length || 0);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [activeIndex, setActiveIndex] = useState(-1);\r\n const wrapperRef = useRef<HTMLDivElement>(null);\r\n const optionListRef = useRef<HTMLUListElement>(null);\r\n\r\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\r\n const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\r\n const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\r\n mouseEvent: 'click',\r\n position: 'bottomLeft',\r\n offset: 4,\r\n maxFixedHeight: maxOptionHeight,\r\n horizontalPosition: optionPositionRight ? 'right' : 'left',\r\n mobileBreakpoint: '28rem',\r\n fullWidth,\r\n });\r\n\r\n const onMouseEventOutside = useCallback(\r\n ({ target }: Event | MouseEvent) => {\r\n if (!target || !wrapperRef.current) return;\r\n\r\n if (!wrapperRef.current.contains(target as Node)) {\r\n setIsOpen(false);\r\n }\r\n },\r\n [setIsOpen]\r\n );\r\n\r\n const onTriggerKeyDown = useCallback(\r\n (event: KeyboardEvent<HTMLButtonElement>) => {\r\n switch (event.key) {\r\n case 'Enter':\r\n event.preventDefault();\r\n setIsOpen(true);\r\n break;\r\n case 'Escape':\r\n if (isOpen) {\r\n event.stopPropagation();\r\n setIsOpen(false);\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n },\r\n [isOpen]\r\n );\r\n\r\n const onOptionKeyDown = useCallback(\r\n (event: KeyboardEvent<HTMLLIElement>) => {\r\n if (!isOpen) return;\r\n\r\n switch (event.key) {\r\n case 'ArrowDown':\r\n event.preventDefault();\r\n setActiveIndex((prev) => {\r\n let nextIndex = prev;\r\n do {\r\n nextIndex = nextIndex < selectData.length - 1 ? nextIndex + 1 : 0;\r\n } while (selectData[nextIndex]?.disabled);\r\n return nextIndex;\r\n });\r\n break;\r\n case 'ArrowUp':\r\n event.preventDefault();\r\n setActiveIndex((prev) => {\r\n let nextIndex = prev;\r\n do {\r\n nextIndex = nextIndex <= 0 ? selectData.length - 1 : nextIndex - 1;\r\n } while (selectData[nextIndex]?.disabled);\r\n return nextIndex;\r\n });\r\n break;\r\n case 'Enter': {\r\n event.preventDefault();\r\n const selectedItem = selectData[activeIndex];\r\n if (!selectedItem || selectedItem.disabled) break;\r\n const isAlreadySelected = selectedItems.some((item) => item.value === selectedItem.value);\r\n const updatedSelectedItems = isAlreadySelected\r\n ? selectedItems.filter((item) => item.value !== selectedItem.value)\r\n : [...selectedItems, selectedItem];\r\n\r\n setSelectedItems(updatedSelectedItems);\r\n setSelectedItemsCount(updatedSelectedItems.length);\r\n onChange(updatedSelectedItems);\r\n break;\r\n }\r\n case 'Tab':\r\n event.preventDefault();\r\n setIsOpen(false);\r\n break;\r\n case 'Escape':\r\n event.stopPropagation();\r\n setIsOpen(false);\r\n break;\r\n default:\r\n break;\r\n }\r\n },\r\n [activeIndex, isOpen, selectData, selectedItems, onChange]\r\n );\r\n\r\n const onOptionClick = (event: MouseEvent<HTMLLIElement>, option: MultiSelectData) => {\r\n if (option.disabled) return;\r\n\r\n // Prevent toggle if click originated from the checkbox\r\n if ((event.target as HTMLElement).tagName === 'INPUT') return;\r\n\r\n const isAlreadySelected = selectedItems.some((item) => item.value === option.value);\r\n const updatedSelectedItems = isAlreadySelected\r\n ? selectedItems.filter((item) => item.value !== option.value)\r\n : [...selectedItems, option];\r\n\r\n setSelectedItems(updatedSelectedItems);\r\n setSelectedItemsCount(updatedSelectedItems.length);\r\n onChange(updatedSelectedItems);\r\n };\r\n\r\n const handleSelect = useCallback(\r\n (event: ChangeEvent<HTMLInputElement>) => {\r\n const { checked, value } = event.target;\r\n let updatedSelectedItems = [...selectedItems];\r\n\r\n if (checked) {\r\n const selectedItem = selectData.find((item) => item.value === value);\r\n if (selectedItem) {\r\n updatedSelectedItems.push(selectedItem);\r\n }\r\n } else {\r\n updatedSelectedItems = updatedSelectedItems.filter((item) => item.value !== value);\r\n }\r\n\r\n setSelectedItems(updatedSelectedItems);\r\n setSelectedItemsCount(updatedSelectedItems.length);\r\n onChange(updatedSelectedItems);\r\n },\r\n [selectData, selectedItems, onChange]\r\n );\r\n\r\n useEffect(() => {\r\n if (isOpen) {\r\n setActiveIndex(0);\r\n }\r\n }, [isOpen]);\r\n\r\n useEffect(() => {\r\n const activeOption = optionListRef.current?.children[activeIndex] as HTMLElement;\r\n activeOption?.focus();\r\n }, [activeIndex]);\r\n\r\n useEffect(() => {\r\n if (!isOpen) return;\r\n\r\n document.addEventListener('click', onMouseEventOutside, true);\r\n document.addEventListener('scroll', onMouseEventOutside, true);\r\n\r\n return () => {\r\n document.removeEventListener('click', onMouseEventOutside, true);\r\n document.removeEventListener('scroll', onMouseEventOutside, true);\r\n };\r\n }, [onMouseEventOutside, isOpen]);\r\n\r\n return (\r\n <div className={styles['multi-select-box-wrapper']} ref={wrapperRef}>\r\n <button\r\n className={styles['multi-select-box-trigger']}\r\n type=\"button\"\r\n onClick={() => {\r\n setIsOpen(!isOpen);\r\n }}\r\n onKeyDown={onTriggerKeyDown}\r\n aria-expanded={isOpen}\r\n aria-haspopup=\"listbox\"\r\n aria-label={`${selectedItemsCount} ${labelSuffix}`}\r\n disabled={disabled}\r\n {...(isOpen && { 'aria-controls': multiselectboxId })}\r\n ref={setReferenceElement}\r\n >\r\n <span className={styles['multi-select-box-trigger-label']}>\r\n {selectedItemsCount} {labelSuffix}\r\n </span>\r\n <Icon\r\n className={clsx(styles['multi-select-box-trigger-icon'], {\r\n [styles['multi-select-box-trigger-icon--open']]: isOpen,\r\n })}\r\n name=\"CheveronDown\"\r\n size={16}\r\n />\r\n </button>\r\n\r\n <div\r\n id={multiselectboxId}\r\n className={clsx(styles['multi-select-box-listbox--wrapper'])}\r\n style={{ ...positionStyle.style, visibility: isOpen ? 'visible' : 'hidden' }}\r\n role=\"listbox\"\r\n ref={setPositionElement}\r\n >\r\n <ul className={styles['multi-select-box-listbox']} ref={optionListRef}>\r\n {selectData.map(({ label, value, disabled }, index) => (\r\n <li\r\n className={clsx(styles['multi-select-box-listbox-option'], {\r\n [styles['multi-select-box-listbox-option--active']]: index === activeIndex,\r\n [styles['multi-select-box-listbox-option--disabled']]: disabled,\r\n })}\r\n key={value}\r\n role=\"option\"\r\n onKeyDown={onOptionKeyDown}\r\n onClick={(event) => onOptionClick(event, { label, value, disabled })}\r\n onMouseOver={() => setActiveIndex(index)}\r\n onFocus={() => setActiveIndex(index)}\r\n tabIndex={0}\r\n aria-selected={selectedItems.some((item) => item.value === value)}\r\n >\r\n <label htmlFor={label} className={styles['multi-select-box-listbox-option-content']} tabIndex={-1}>\r\n <Checkbox\r\n id={`${label}-${multiselectboxId}`}\r\n onChange={handleSelect}\r\n value={value}\r\n tabIndex={-1}\r\n disabled={disabled}\r\n checked={selectedItems.some((item) => item.value === value)}\r\n />\r\n <span>{label}</span>\r\n </label>\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n </div>\r\n );\r\n};\r\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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"}
package/dist/components/MultiSelectBox/MultiSelectBox.stories.d.ts CHANGED
@@ -3,3 +3,4 @@ import { MultiSelectBoxProps } from './MultiSelectBox';
3
3
  declare const _default: Meta<MultiSelectBoxProps>;
4
4
  export default _default;
5
5
  export declare const MultiSelectBoxExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, MultiSelectBoxProps>;
6
+ export declare const WithDefaultSelectedItems: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, MultiSelectBoxProps>;
package/dist/components/MultiSelectBox/MultiSelectBox.stories.js CHANGED
@@ -1,15 +1,15 @@
1
- import { jsx as t } from "react/jsx-runtime";
2
- import { fn as a } from "../../index-BCvy9BiK.js";
1
+ import { jsx as l } from "react/jsx-runtime";
2
+ import { fn as o } from "../../index-BCvy9BiK.js";
3
3
  import { MultiSelectBox as e } from "./MultiSelectBox.js";
4
- const o = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", u = {
4
+ const c = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />", b = {
5
5
  title: "Organisms/MultiSelectBox",
6
6
  component: e,
7
7
  argTypes: {},
8
8
  parameters: {
9
9
  inspectComponent: e,
10
- codeString: o
10
+ codeString: c
11
11
  }
12
- }, n = [
12
+ }, s = [
13
13
  { label: "A.B. Docent", value: "1" },
14
14
  { label: "B.C. Docent met lange achternaam", value: "2" },
15
15
  {
@@ -17,15 +17,39 @@ const o = "<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuff
17
17
  value: "3"
18
18
  },
19
19
  { label: "H.I. Docent", value: "4" },
20
- { label: "K.L. Docent ", value: "5" }
21
- ], c = (l) => /* @__PURE__ */ t("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ t(e, { ...l }) }), r = c.bind({});
20
+ { label: "K.L. Docent ", value: "5" },
21
+ { label: "A.B. Docent", value: "6" },
22
+ { label: "B.C. Docent met lange achternaam", value: "7" },
23
+ {
24
+ label: "prof. F.G. Docent met lang achternaam",
25
+ value: "8"
26
+ },
27
+ { label: "H.I. Docent", value: "9" },
28
+ { label: "K.L. Docent ", value: "10" }
29
+ ], t = (n) => /* @__PURE__ */ l("div", { style: { width: "30rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ l(e, { ...n }) }), a = {
30
+ fullWidth: !1,
31
+ labelSuffix: "geselecteerd",
32
+ maxOptionHeight: "20rem",
33
+ optionPositionRight: !1,
34
+ disabled: !1,
35
+ selectData: s,
36
+ onChange: o()
37
+ }, i = t.bind({});
38
+ i.args = {
39
+ ...a
40
+ };
41
+ const r = t.bind({});
22
42
  r.args = {
23
- selectData: n,
24
- onChange: a(),
25
- labelSuffix: "geselecteerd"
43
+ ...a,
44
+ defaultSelectedItems: [
45
+ { label: "A.B. Docent", value: "1" },
46
+ { label: "H.I. Docent", value: "4" },
47
+ { label: "A.B. Docent", value: "6" }
48
+ ]
26
49
  };
27
50
  export {
28
- r as MultiSelectBoxExample,
29
- u as default
51
+ i as MultiSelectBoxExample,
52
+ r as WithDefaultSelectedItems,
53
+ b as default
30
54
  };
31
55
  //# sourceMappingURL=MultiSelectBox.stories.js.map
package/dist/components/MultiSelectBox/MultiSelectBox.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelectBox.stories.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { MultiSelectBoxProps } from './MultiSelectBox';\r\n\r\nimport { MultiSelectBox } from './MultiSelectBox';\r\n\r\nconst codeString = `<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Organisms/MultiSelectBox',\r\n component: MultiSelectBox,\r\n argTypes: {},\r\n parameters: {\r\n inspectComponent: MultiSelectBox,\r\n codeString: codeString,\r\n },\r\n} as Meta<MultiSelectBoxProps>;\r\n\r\nconst mockItems = [\r\n { label: 'A.B. Docent', value: '1' },\r\n { label: 'B.C. Docent met lange achternaam', value: '2' },\r\n {\r\n label: 'prof. F.G. Docent met lang achternaam',\r\n value: '3',\r\n },\r\n { label: 'H.I. Docent', value: '4' },\r\n { label: 'K.L. Docent ', value: '5' },\r\n];\r\n\r\nconst Template: StoryFn<MultiSelectBoxProps> = (args) => {\r\n return (\r\n <div style={{ width: '30rem', margin: '0rem auto 0 auto' }}>\r\n <MultiSelectBox {...args} />\r\n </div>\r\n );\r\n};\r\n\r\nexport const MultiSelectBoxExample = Template.bind({});\r\nMultiSelectBoxExample.args = {\r\n selectData: mockItems,\r\n onChange: fn(),\r\n labelSuffix: 'geselecteerd',\r\n};\r\n"],"names":["codeString","MultiSelectBox_stories","MultiSelectBox","mockItems","Template","args","jsx","MultiSelectBoxExample","fn"],"mappings":";;;AAOA,MAAMA,IAAa,uFAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,IAAI;AACtC,GAEMC,IAAyC,CAACC,MAE3C,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,QAAQ,mBAAA,GACpC,UAAA,gBAAAA,EAACJ,GAAgB,EAAA,GAAGG,EAAM,CAAA,GAC5B,GAISE,IAAwBH,EAAS,KAAK,CAAE,CAAA;AACrDG,EAAsB,OAAO;AAAA,EAC3B,YAAYJ;AAAA,EACZ,UAAUK,EAAG;AAAA,EACb,aAAa;AACf;"}
1
+ {"version":3,"file":"MultiSelectBox.stories.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { MultiSelectBoxProps } from './MultiSelectBox';\r\n\r\nimport { MultiSelectBox } from './MultiSelectBox';\r\n\r\nconst codeString = `<MultiSelectBox selectData={[{label, value}]} onChange={fn} labelSuffix={string} />`;\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Organisms/MultiSelectBox',\r\n component: MultiSelectBox,\r\n argTypes: {},\r\n parameters: {\r\n inspectComponent: MultiSelectBox,\r\n codeString: codeString,\r\n },\r\n} as Meta<MultiSelectBoxProps>;\r\n\r\nconst mockItems = [\r\n { label: 'A.B. Docent', value: '1' },\r\n { label: 'B.C. Docent met lange achternaam', value: '2' },\r\n {\r\n label: 'prof. F.G. Docent met lang achternaam',\r\n value: '3',\r\n },\r\n { label: 'H.I. Docent', value: '4' },\r\n { label: 'K.L. Docent ', value: '5' },\r\n { label: 'A.B. Docent', value: '6' },\r\n { label: 'B.C. Docent met lange achternaam', value: '7' },\r\n {\r\n label: 'prof. F.G. Docent met lang achternaam',\r\n value: '8',\r\n },\r\n { label: 'H.I. Docent', value: '9' },\r\n { label: 'K.L. Docent ', value: '10' },\r\n];\r\n\r\nconst Template: StoryFn<MultiSelectBoxProps> = (args) => {\r\n return (\r\n <div style={{ width: '30rem', margin: '0rem auto 0 auto' }}>\r\n <MultiSelectBox {...args} />\r\n </div>\r\n );\r\n};\r\n\r\nconst defaultArgs: Partial<MultiSelectBoxProps> = {\r\n fullWidth: false,\r\n labelSuffix: 'geselecteerd',\r\n maxOptionHeight: '20rem',\r\n optionPositionRight: false,\r\n disabled: false,\r\n selectData: mockItems,\r\n onChange: fn(),\r\n};\r\n\r\nexport const MultiSelectBoxExample = Template.bind({});\r\nMultiSelectBoxExample.args = {\r\n ...defaultArgs,\r\n};\r\n\r\nexport const WithDefaultSelectedItems = Template.bind({});\r\nWithDefaultSelectedItems.args = {\r\n ...defaultArgs,\r\n defaultSelectedItems: [\r\n { label: 'A.B. Docent', value: '1' },\r\n { label: 'H.I. Docent', value: '4' },\r\n { label: 'A.B. Docent', value: '6' },\r\n ],\r\n};\r\n"],"names":["codeString","MultiSelectBox_stories","MultiSelectBox","mockItems","Template","args","jsx","defaultArgs","fn","MultiSelectBoxExample","WithDefaultSelectedItems"],"mappings":";;;AAOA,MAAMA,IAAa,uFAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAY;AAAA,EAChB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,IAAI;AAAA,EACpC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,oCAAoC,OAAO,IAAI;AAAA,EACxD;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EACnC,EAAE,OAAO,gBAAgB,OAAO,KAAK;AACvC,GAEMC,IAAyC,CAACC,MAE3C,gBAAAC,EAAA,OAAA,EAAI,OAAO,EAAE,OAAO,SAAS,QAAQ,mBAAA,GACpC,UAAA,gBAAAA,EAACJ,GAAgB,EAAA,GAAGG,EAAM,CAAA,GAC5B,GAIEE,IAA4C;AAAA,EAChD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,UAAU;AAAA,EACV,YAAYJ;AAAA,EACZ,UAAUK,EAAG;AACf,GAEaC,IAAwBL,EAAS,KAAK,CAAE,CAAA;AACrDK,EAAsB,OAAO;AAAA,EAC3B,GAAGF;AACL;AAEO,MAAMG,IAA2BN,EAAS,KAAK,CAAE,CAAA;AACxDM,EAAyB,OAAO;AAAA,EAC9B,GAAGH;AAAA,EACH,sBAAsB;AAAA,IACpB,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,IACnC,EAAE,OAAO,eAAe,OAAO,IAAI;AAAA,EAAA;AAEvC;"}
package/dist/components/MultiSelectBox/MultiSelectBox.test.js CHANGED
@@ -1,26 +1,32 @@
1
- import { jsx as n } from "react/jsx-runtime";
1
+ import { jsx as o, jsxs as d, Fragment as r } from "react/jsx-runtime";
2
2
  import "../../index-BqLi4tOb.js";
3
- import { r as a, s as t, f as l } from "../../react.esm-CsMDid07.js";
4
- import { MultiSelectBox as c } from "./MultiSelectBox.js";
5
- const i = jest.fn(), s = [
3
+ import { r as n, s as t, f as a } from "../../react.esm-CsMDid07.js";
4
+ import { MultiSelectBox as l } from "./MultiSelectBox.js";
5
+ const i = jest.fn(), c = [
6
6
  { label: "Option 1", value: "1" },
7
7
  { label: "Option 2", value: "2" },
8
8
  { label: "Option 3", value: "3" }
9
9
  ];
10
10
  describe("MultiSelectBox", () => {
11
11
  it("renders the component with default props", () => {
12
- a(/* @__PURE__ */ n(c, { selectData: s, onChange: i, labelSuffix: "selected" }));
12
+ n(/* @__PURE__ */ o(l, { selectData: c, onChange: i, labelSuffix: "selected" }));
13
13
  const e = t.getByRole("button");
14
14
  expect(e).toBeInTheDocument(), expect(e).toHaveAttribute("aria-expanded", "false");
15
15
  }), it("opens the dropdown when the button is clicked", () => {
16
- a(/* @__PURE__ */ n(c, { selectData: s, onChange: i, labelSuffix: "selected" }));
16
+ n(/* @__PURE__ */ o(l, { selectData: c, onChange: i, labelSuffix: "selected" }));
17
17
  const e = t.getByRole("button");
18
- l.click(e), expect(e).toHaveAttribute("aria-expanded", "true"), expect(t.getByRole("listbox")).toBeInTheDocument();
18
+ a.click(e), expect(e).toHaveAttribute("aria-expanded", "true"), expect(t.getByRole("listbox")).toBeInTheDocument();
19
19
  }), it("closes the dropdown when clicking outside", () => {
20
- const { container: e } = a(
21
- /* @__PURE__ */ n(c, { selectData: s, onChange: i, labelSuffix: "selected" })
22
- ), o = t.getByRole("button");
23
- l.click(o), expect(o).toHaveAttribute("aria-expanded", "true"), l.click(e), expect(o).toHaveAttribute("aria-expanded", "false");
20
+ n(
21
+ /* @__PURE__ */ d(r, { children: [
22
+ /* @__PURE__ */ o(l, { selectData: c, onChange: i, labelSuffix: "selected" }),
23
+ /* @__PURE__ */ o("div", { "data-testid": "outside-element", children: "Outside" })
24
+ ] })
25
+ );
26
+ const e = t.getByRole("button");
27
+ a.click(e), expect(e).toHaveAttribute("aria-expanded", "true");
28
+ const s = t.getByTestId("outside-element");
29
+ a.click(s), expect(e).toHaveAttribute("aria-expanded", "false");
24
30
  });
25
31
  });
26
32
  //# sourceMappingURL=MultiSelectBox.test.js.map
package/dist/components/MultiSelectBox/MultiSelectBox.test.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelectBox.test.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\r\nimport { render, screen, fireEvent } from '@testing-library/react';\r\n\r\nimport { MultiSelectBox } from './MultiSelectBox';\r\n\r\nconst onChangeSpy = jest.fn();\r\n\r\nconst mockSelectData = [\r\n { label: 'Option 1', value: '1' },\r\n { label: 'Option 2', value: '2' },\r\n { label: 'Option 3', value: '3' },\r\n];\r\n\r\ndescribe('MultiSelectBox', () => {\r\n it('renders the component with default props', () => {\r\n render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\r\n const button = screen.getByRole('button');\r\n expect(button).toBeInTheDocument();\r\n expect(button).toHaveAttribute('aria-expanded', 'false');\r\n });\r\n\r\n it('opens the dropdown when the button is clicked', () => {\r\n render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\r\n const button = screen.getByRole('button');\r\n fireEvent.click(button);\r\n expect(button).toHaveAttribute('aria-expanded', 'true');\r\n expect(screen.getByRole('listbox')).toBeInTheDocument();\r\n });\r\n\r\n it('closes the dropdown when clicking outside', () => {\r\n const { container } = render(\r\n <MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />\r\n );\r\n const button = screen.getByRole('button');\r\n fireEvent.click(button);\r\n expect(button).toHaveAttribute('aria-expanded', 'true');\r\n fireEvent.click(container);\r\n expect(button).toHaveAttribute('aria-expanded', 'false');\r\n });\r\n});\r\n"],"names":["onChangeSpy","mockSelectData","render","jsx","MultiSelectBox","button","screen","fireEvent","container"],"mappings":";;;;AAKA,MAAMA,IAAc,KAAK,GAAG,GAEtBC,IAAiB;AAAA,EACrB,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAClC;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,4CAA4C,MAAM;AAC5C,IAAAC,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACjC,WAAAD,CAAM,EAAE,kBAAkB,GACjC,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD,GAED,GAAG,iDAAiD,MAAM;AACjD,IAAAH,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM,GACtD,OAAOC,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACvD,GAED,GAAG,6CAA6C,MAAM;AAC9C,UAAA,EAAE,WAAAE,MAAcN;AAAA,wBACnBE,GAAe,EAAA,YAAYH,GAAgB,UAAUD,GAAa,aAAY,WAAW,CAAA;AAAA,IAC5F,GACMK,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM,GACtDE,EAAU,MAAMC,CAAS,GACzB,OAAOH,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD;AACH,CAAC;"}
1
+ {"version":3,"file":"MultiSelectBox.test.js","sources":["../../../src/components/MultiSelectBox/MultiSelectBox.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\r\nimport { render, screen, fireEvent } from '@testing-library/react';\r\n\r\nimport { MultiSelectBox } from './MultiSelectBox';\r\n\r\nconst onChangeSpy = jest.fn();\r\n\r\nconst mockSelectData = [\r\n { label: 'Option 1', value: '1' },\r\n { label: 'Option 2', value: '2' },\r\n { label: 'Option 3', value: '3' },\r\n];\r\n\r\ndescribe('MultiSelectBox', () => {\r\n it('renders the component with default props', () => {\r\n render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\r\n const button = screen.getByRole('button');\r\n expect(button).toBeInTheDocument();\r\n expect(button).toHaveAttribute('aria-expanded', 'false');\r\n });\r\n\r\n it('opens the dropdown when the button is clicked', () => {\r\n render(<MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />);\r\n const button = screen.getByRole('button');\r\n fireEvent.click(button);\r\n expect(button).toHaveAttribute('aria-expanded', 'true');\r\n expect(screen.getByRole('listbox')).toBeInTheDocument();\r\n });\r\n\r\n it('closes the dropdown when clicking outside', () => {\r\n render(\r\n <>\r\n <MultiSelectBox selectData={mockSelectData} onChange={onChangeSpy} labelSuffix=\"selected\" />\r\n <div data-testid=\"outside-element\">Outside</div>\r\n </>\r\n );\r\n\r\n const button = screen.getByRole('button');\r\n fireEvent.click(button);\r\n expect(button).toHaveAttribute('aria-expanded', 'true');\r\n const outsideElement = screen.getByTestId('outside-element');\r\n fireEvent.click(outsideElement);\r\n expect(button).toHaveAttribute('aria-expanded', 'false');\r\n });\r\n});\r\n"],"names":["onChangeSpy","mockSelectData","render","jsx","MultiSelectBox","button","screen","fireEvent","jsxs","Fragment","outsideElement"],"mappings":";;;;AAKA,MAAMA,IAAc,KAAK,GAAG,GAEtBC,IAAiB;AAAA,EACrB,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAAA,EAChC,EAAE,OAAO,YAAY,OAAO,IAAI;AAClC;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,4CAA4C,MAAM;AAC5C,IAAAC,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACjC,WAAAD,CAAM,EAAE,kBAAkB,GACjC,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD,GAED,GAAG,iDAAiD,MAAM;AACjD,IAAAH,EAAA,gBAAAC,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW,CAAE;AAC7F,UAAAK,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM,GACtD,OAAOC,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACvD,GAED,GAAG,6CAA6C,MAAM;AACpD,IAAAJ;AAAA,MAEI,gBAAAM,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAN,EAACC,KAAe,YAAYH,GAAgB,UAAUD,GAAa,aAAY,YAAW;AAAA,QACzF,gBAAAG,EAAA,OAAA,EAAI,eAAY,mBAAkB,UAAO,UAAA,CAAA;AAAA,MAAA,EAC5C,CAAA;AAAA,IACF;AAEM,UAAAE,IAASC,EAAO,UAAU,QAAQ;AACxC,IAAAC,EAAU,MAAMF,CAAM,GACtB,OAAOA,CAAM,EAAE,gBAAgB,iBAAiB,MAAM;AAChD,UAAAK,IAAiBJ,EAAO,YAAY,iBAAiB;AAC3D,IAAAC,EAAU,MAAMG,CAAc,GAC9B,OAAOL,CAAM,EAAE,gBAAgB,iBAAiB,OAAO;AAAA,EAAA,CACxD;AACH,CAAC;"}