@uva-glass/component-library
Version:
React components UvA
205 lines (204 loc) • 7.03 kB
JavaScript
import { jsxs as f, jsx as u } from "react/jsx-runtime";
import { useId as q, useState as d, useRef as A, useCallback as g, useEffect as I } from "react";
import { c as h } from "../../clsx-OuTLNxxd.js";
import { Icon as G } from "../Icon/Icon.js";
import { Checkbox as J } from "../Checkbox/Checkbox.js";
import { usePositionedFloaters as Q } from "../hooks/usePositionedFloaters.js";
import '../../assets/MultiSelectBox.css';const r = {
"multi-select-box-wrapper": "_multi-select-box-wrapper_24h2w_1",
"multi-select-box-trigger": "_multi-select-box-trigger_24h2w_5",
"multi-select-box-trigger--darkBorder": "_multi-select-box-trigger--darkBorder_24h2w_22",
"multi-select-box-trigger-label": "_multi-select-box-trigger-label_24h2w_36",
"multi-select-box-trigger-icon": "_multi-select-box-trigger-icon_24h2w_50",
"multi-select-box-trigger-icon--open": "_multi-select-box-trigger-icon--open_24h2w_55",
"multi-select-box-listbox--wrapper": "_multi-select-box-listbox--wrapper_24h2w_59",
"multi-select-box-listbox": "_multi-select-box-listbox_24h2w_59",
"multi-select-box-listbox-option": "_multi-select-box-listbox-option_24h2w_86",
"multi-select-box-listbox-option--active": "_multi-select-box-listbox-option--active_24h2w_97",
"multi-select-box-listbox-option-content": "_multi-select-box-listbox-option-content_24h2w_108",
"multi-select-box-listbox-option--disabled": "_multi-select-box-listbox-option--disabled_24h2w_122"
}, te = ({
selectData: c,
onChange: m,
defaultSelectedItems: y,
labelSuffix: E = "geselecteerd",
disabled: P = !1,
fullWidth: B = !1,
darkBorder: C = !1,
maxOptionHeight: L,
optionPositionRight: F
}) => {
const _ = q(), [n, w] = d(y || []), [S, v] = d(y?.length || 0), [s, a] = d(!1), [b, x] = d(-1), k = A(null), N = A(null), [K, R] = d(null), [$, D] = d(null), { style: M, updatePosition: O } = Q(K, $, {
mouseEvent: "click",
offset: 4,
maxFixedHeight: L,
horizontalPosition: F ? "right" : "left",
mobileBreakpoint: "28rem",
fullWidth: B
}), p = g(
({ target: e }) => {
!e || !k.current || k.current.contains(e) || a(!1);
},
[a]
), T = g(
(e) => {
switch (e.key) {
case "Enter":
e.preventDefault(), a(!0);
break;
case "Escape":
s && (e.stopPropagation(), a(!1));
break;
}
},
[s]
), j = g(
(e) => {
if (s)
switch (e.key) {
case "ArrowDown":
e.preventDefault(), x((t) => {
let l = t;
do
l = l < c.length - 1 ? l + 1 : 0;
while (c[l]?.disabled);
return l;
});
break;
case "ArrowUp":
e.preventDefault(), x((t) => {
let l = t;
do
l = l <= 0 ? c.length - 1 : l - 1;
while (c[l]?.disabled);
return l;
});
break;
case "Enter": {
e.preventDefault();
const t = c[b];
if (!t || t.disabled) break;
const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
w(o), v(o.length), m(o);
break;
}
case "Tab":
e.preventDefault(), a(!1);
break;
case "Escape":
e.stopPropagation(), a(!1);
break;
}
},
[b, s, c, n, m]
), z = (e, t) => {
if (t.disabled || e.target.tagName === "INPUT") return;
const o = n.some((i) => i.value === t.value) ? n.filter((i) => i.value !== t.value) : [...n, t];
w(o), v(o.length), m(o), O();
}, U = g(
(e) => {
const { checked: t, value: l } = e.target;
let o = [...n];
if (t) {
const i = c.find((H) => H.value === l);
i && o.push(i);
} else
o = o.filter((i) => i.value !== l);
w(o), v(o.length), m(o), O();
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[c, n, m]
);
return I(() => {
s && x(0);
}, [s]), I(() => {
N.current?.children[b]?.focus();
}, [b]), I(() => {
if (s)
return document.addEventListener("click", p, !0), document.addEventListener("scroll", p, !0), () => {
document.removeEventListener("click", p, !0), document.removeEventListener("scroll", p, !0);
};
}, [p, s]), /* @__PURE__ */ f("div", { className: r["multi-select-box-wrapper"], ref: k, children: [
/* @__PURE__ */ f(
"button",
{
className: h(r["multi-select-box-trigger"], {
[r["multi-select-box-trigger--darkBorder"]]: C
}),
type: "button",
onClick: () => {
a(!s);
},
onKeyDown: T,
"aria-expanded": s,
"aria-haspopup": "listbox",
"aria-label": `${S} ${E}`,
disabled: P,
...s && { "aria-controls": _ },
ref: D,
children: [
/* @__PURE__ */ f("span", { className: r["multi-select-box-trigger-label"], children: [
S,
" ",
E
] }),
/* @__PURE__ */ u(
G,
{
className: h(r["multi-select-box-trigger-icon"], {
[r["multi-select-box-trigger-icon--open"]]: s
}),
name: "CheveronDown",
size: 16
}
)
]
}
),
/* @__PURE__ */ u(
"div",
{
id: _,
className: h(r["multi-select-box-listbox--wrapper"]),
style: { ...M.style, visibility: s ? "visible" : "hidden" },
role: "listbox",
ref: R,
children: /* @__PURE__ */ u("ul", { className: r["multi-select-box-listbox"], ref: N, children: c.map(({ label: e, value: t, disabled: l }, o) => /* @__PURE__ */ u(
"li",
{
className: h(r["multi-select-box-listbox-option"], {
[r["multi-select-box-listbox-option--active"]]: o === b,
[r["multi-select-box-listbox-option--disabled"]]: l
}),
role: "option",
onKeyDown: j,
onClick: (i) => z(i, { label: e, value: t, disabled: l }),
onMouseOver: () => x(o),
onFocus: () => x(o),
tabIndex: 0,
"aria-selected": n.some((i) => i.value === t),
children: /* @__PURE__ */ f("label", { htmlFor: e, className: r["multi-select-box-listbox-option-content"], tabIndex: -1, children: [
/* @__PURE__ */ u(
J,
{
id: `${e}-${_}`,
onChange: U,
value: t,
tabIndex: -1,
disabled: l,
checked: n.some((i) => i.value === t)
}
),
/* @__PURE__ */ u("span", { children: e })
] })
},
t
)) })
}
)
] });
};
export {
te as MultiSelectBox
};
//# sourceMappingURL=MultiSelectBox.js.map