@achs/webkit
Version:
Conjunto de componentes de UI con el estilo del Sistema de Diseño ACHS (Asociación Chilena de Seguridad), para reutilizar de forma transversal en las aplicaciones web de ACHS. Construido con **React 19**, **TypeScript** y **Vite**, con soporte para las
109 lines (108 loc) • 4.18 kB
JavaScript
import { jsxs as n, jsx as a } from "react/jsx-runtime";
import { forwardRef as M, useState as k, useRef as A, useId as K, useEffect as V } from "react";
import t from "./MultiSelect.module.scss.mjs";
import { Checkbox as S } from "../../atoms/Checkbox/index.mjs";
import '../../../assets/node_modules/.pnpm/bootstrap-icons@1.13.1/node_modules/bootstrap-icons/font/bootstrap-icons.css';/* empty css */
const q = M(({
options: o,
value: p,
defaultValue: $ = [],
onChange: d,
placeholder: w = "Seleccionar…",
status: x = "default",
disabled: u = !1,
selectAll: E = !1,
label: b,
className: L
}, i) => {
const v = p !== void 0, [I, O] = k($), l = v ? p : I, [c, m] = k(!1), f = A(null), R = K();
V(() => {
const e = (h) => {
f.current && !f.current.contains(h.target) && m(!1);
}, s = (h) => {
h.key === "Escape" && m(!1);
};
return document.addEventListener("mousedown", e), document.addEventListener("keydown", s), () => {
document.removeEventListener("mousedown", e), document.removeEventListener("keydown", s);
};
}, []);
const y = (e) => {
v || O(e), d == null || d(e);
}, j = (e) => {
y(l.includes(e) ? l.filter((s) => s !== e) : [...l, e]);
}, r = o.filter((e) => !e.disabled).map((e) => e.value), N = r.length > 0 && r.every((e) => l.includes(e)), z = () => {
y(N ? l.filter((e) => !r.includes(e)) : [.../* @__PURE__ */ new Set([...l, ...r])]);
}, C = () => {
var e;
return l.length === 0 ? w : l.length === 1 ? ((e = o.find((s) => s.value === l[0])) == null ? void 0 : e.label) ?? `${l.length} seleccionado` : `${l.length} seleccionados`;
}, g = `${R}-list`;
return /* @__PURE__ */ n(
"div",
{
ref: (e) => {
f.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
},
className: `${t.root} ${L ?? ""}`.trim(),
"data-disabled": u || void 0,
children: [
/* @__PURE__ */ n(
"button",
{
type: "button",
className: t.trigger,
"data-open": c,
"data-status": x,
"data-empty": l.length === 0,
disabled: u,
"aria-haspopup": "listbox",
"aria-expanded": c,
"aria-controls": g,
"aria-label": b,
onClick: () => !u && m((e) => !e),
children: [
/* @__PURE__ */ a("span", { className: t.summary, children: C() }),
/* @__PURE__ */ a("i", { className: `bi bi-chevron-down ${t.chevron}`, "aria-hidden": "true" })
]
}
),
/* @__PURE__ */ n(
"ul",
{
id: g,
role: "listbox",
"aria-multiselectable": "true",
"aria-label": b,
className: `${t.menu} ${c ? t.menuOpen : ""}`,
hidden: !c,
children: [
E && /* @__PURE__ */ a("li", { className: t.item, children: /* @__PURE__ */ n("label", { className: t.option, children: [
/* @__PURE__ */ a(S, { checked: N, onChange: z, size: "small" }),
/* @__PURE__ */ a("span", { className: t.optionLabel, children: "Seleccionar todo" })
] }) }),
o.map((e) => {
const s = l.includes(e.value);
return /* @__PURE__ */ a("li", { className: t.item, role: "option", "aria-selected": s, children: /* @__PURE__ */ n("label", { className: t.option, "data-disabled": e.disabled || void 0, children: [
/* @__PURE__ */ a(
S,
{
checked: s,
onChange: () => j(e.value),
size: "small",
disabled: e.disabled
}
),
/* @__PURE__ */ a("span", { className: t.optionLabel, children: e.label })
] }) }, e.value);
})
]
}
)
]
}
);
});
q.displayName = "MultiSelect";
export {
q as MultiSelect,
q as default
};