@frontify/fondue
Version:
Design system of Frontify
179 lines (178 loc) • 6.4 kB
JavaScript
import { jsxs as P, jsx as t } from "react/jsx-runtime";
import { useButton as Y } from "@react-aria/button";
import { useFocusRing as Z, FocusScope as $ } from "@react-aria/focus";
import { useState as p, useRef as O, useId as I, useEffect as h, useLayoutEffect as K } from "react";
import { usePopper as ee } from "react-popper";
import { CheckboxState as te } from "../Checkbox/Checkbox.es.js";
import { Checklist as oe, ChecklistDirection as re } from "../Checklist/Checklist.es.js";
import { useDropdownAutoHeight as le, DEFAULT_DROPDOWN_MAX_HEIGHT as se } from "../../hooks/useDropdownAutoHeight.es.js";
import { EnablePortalWrapper as ne } from "../../utilities/dialogs/EnablePortalWrapper.es.js";
import { merge as ae } from "../../utilities/merge.es.js";
import { Validation as ie } from "../../utilities/validation.es.js";
import { useClickOutside as ce, getPaddingClasses as ue } from "./helpers.es.js";
import { Trigger as pe, TriggerEmphasis as de } from "../Trigger/Trigger.es.js";
import { Text as z } from "../../typography/Text/Text.es.js";
import { Tag as F, TagSize as d, TagType as R } from "../Tag/Tag.es.js";
var fe = /* @__PURE__ */ ((o) => (o.Default = "Default", o.Summarized = "Summarized", o))(fe || {}), we = /* @__PURE__ */ ((o) => (o.Small = "Small", o.Medium = "Medium", o))(we || {});
const me = ({
items: o,
activeItemKeys: l,
onSelectionChange: f,
ariaLabel: g = "Select list",
disabled: x = !1,
placeholder: S,
label: b,
type: v = "Default",
size: w = "Medium",
validation: A = ie.Default,
summarizedLabel: D,
indeterminateItemKeys: s,
flip: V = !1,
emphasis: H = de.Default,
enablePortal: L = !0
}) => {
const [a, c] = p(!1), [j, B] = p([]), n = O(null), [k, T] = p(null), [i, W] = p(null), _ = O(null), { isFocusVisible: y, focusProps: G } = Z(), { maxHeight: C } = le({ current: i }, { isOpen: a, autoResize: !0 }), E = l.length > 0, U = D ?? [l.length, "selected"].join(" ");
ce(null, () => c(!1), [n == null ? void 0 : n.current, k]);
const X = C !== se, M = I(), m = () => c((e) => !e), { buttonProps: q } = Y(
{
onPress: m,
onKeyDown: (e) => {
e.key === "Escape" && c(!1);
},
elementType: "div"
},
{ current: i }
), J = (e) => {
const r = new Set(l);
r.has(e) ? r.delete(e) : r.add(e), f(Array.from(r));
}, Q = (e) => {
(e.code === "Space" || e.code === "Enter") && m();
}, N = () => a ? R.SelectedWithFocus : R.Selected;
h(() => {
T(n == null ? void 0 : n.current);
}, []), h(() => {
B(
o.map((e) => {
const r = { ...e, label: e.value };
return s != null && s.includes(e.value) ? { ...r, state: te.Mixed } : r;
})
);
}, [o, s]);
const u = ee(i, k, {
placement: "bottom-start",
strategy: "fixed",
modifiers: [
{
name: "offset",
options: {
offset: [0, 8]
}
},
{
name: "flip",
enabled: V
}
]
});
return h(() => {
(async () => {
u.update && await u.update();
})().catch(console.error);
}, [l]), K(() => {
const e = (r) => {
r.key === "Escape" && c(!1);
};
return window.addEventListener("keyup", e), () => {
window.removeEventListener("keyup", e);
};
}, []), /* @__PURE__ */ P("div", { className: "tw-relative", ref: n, children: [
/* @__PURE__ */ t(
pe,
{
disabled: x,
buttonProps: q,
isFocusVisible: y,
isOpen: a,
validation: A,
emphasis: H,
children: /* @__PURE__ */ t("div", { className: ae(["tw-flex tw-flex-1 tw-gap-2", ue(w)]), ref: W, children: /* @__PURE__ */ t(
"div",
{
className: "tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0",
onClick: (e) => {
e.target === _.current && a || m();
},
role: "combobox",
"aria-expanded": a,
"aria-controls": M,
"aria-label": g,
...G,
tabIndex: 0,
onKeyDown: Q,
children: /* @__PURE__ */ P("div", { className: "tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]", children: [
b && E && /* @__PURE__ */ t(z, { weight: "strong", children: b }),
v === "Default" && l.map((e) => /* @__PURE__ */ t(
F,
{
type: N(),
label: e.toString(),
size: w === "Small" ? d.Small : d.Medium,
onClick: x ? void 0 : () => J(e)
},
e
)),
v === "Summarized" && (E || D) && /* @__PURE__ */ t(
F,
{
type: N(),
label: U,
size: w === "Small" ? d.Small : d.Medium,
onClick: (s == null ? void 0 : s.length) === 0 ? () => f([]) : void 0
}
),
l.length === 0 && S && /* @__PURE__ */ t(z, { color: "weak", children: S })
] })
}
) })
}
),
a && X && /* @__PURE__ */ t(ne, { enablePortal: L, children: /* @__PURE__ */ t(
"div",
{
id: M,
ref: T,
className: "tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-[120000] tw-bg-base tw-min-w-[18rem]",
style: {
...u.styles.popper,
width: i == null ? void 0 : i.getBoundingClientRect().width
},
...u.attributes.popper,
children: /* @__PURE__ */ t($, { restoreFocus: !0, children: /* @__PURE__ */ t(
"div",
{
className: "tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative",
style: { maxHeight: C },
children: /* @__PURE__ */ t(
oe,
{
activeValues: l.map((e) => e.toString()),
setActiveValues: f,
checkboxes: j.filter((e) => !e.isDivider && !e.isCategory),
direction: re.Vertical,
ariaLabel: g
}
)
}
) })
},
"content"
) })
] });
};
me.displayName = "FondueMultiSelect";
export {
me as MultiSelect,
we as MultiSelectSize,
fe as MultiSelectType
};
//# sourceMappingURL=MultiSelect.es.js.map