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