@frontify/fondue
Version:
Design system of Frontify
167 lines (166 loc) • 6.87 kB
JavaScript
import { jsxs as c, jsx as s } from "react/jsx-runtime";
import { useRef as d, useEffect as I, createElement as tt } from "react";
import { useButton as et } from "@react-aria/button";
import { useFocusRing as ot, FocusScope as rt } from "@react-aria/focus";
import { useOverlay as st, DismissButton as M } from "@react-aria/overlays";
import { useSelect as lt, HiddenSelect as nt } from "@react-aria/select";
import { mergeProps as it } from "@react-aria/utils";
import { useSelectState as at } from "@react-stately/select";
import { usePopper as mt } from "react-popper";
import { mapToAriaProps as pt, getDisabledItemIds as A, getMenuItems as K } from "../ActionMenu/Aria/helper.es.js";
import { SelectMenu as ut } from "./SelectMenu/SelectMenu.es.js";
import { Trigger as ft, TriggerEmphasis as ct, TriggerSize as N } from "../Trigger/Trigger.es.js";
import { useDropdownAutoHeight as dt, DEFAULT_DROPDOWN_MAX_HEIGHT as wt } from "../../hooks/useDropdownAutoHeight.es.js";
import { useMemoizedId as gt } from "../../hooks/useMemoizedId.es.js";
import { EnablePortalWrapper as St } from "../../utilities/dialogs/EnablePortalWrapper.es.js";
import { merge as ht } from "../../utilities/merge.es.js";
import { Validation as F } from "../../utilities/validation.es.js";
import { MenuItemTextColorState as w, menuItemTextColorRecord as yt } from "../MenuItem/MenuItem.es.js";
import { MenuItemStyle as bt, MenuItemContentSize as L } from "../MenuItem/types.es.js";
import { MenuItemContent as xt } from "../MenuItem/MenuItemContent.es.js";
import { LoadingCircle as Dt, LoadingCircleSize as Ct } from "../LoadingCircle/LoadingCircle.es.js";
const Zt = 36;
var Pt = /* @__PURE__ */ ((t) => (t.Small = "Small", t.Large = "Large", t))(Pt || {}), Tt = /* @__PURE__ */ ((t) => (t.Start = "Start", t.End = "End", t))(Tt || {}), Et = /* @__PURE__ */ ((t) => (t.Top = "Top", t.Bottom = "Bottom", t))(Et || {});
const Mt = (t, l) => A(K(t)).has(l) ? null : t.map(({ menuItems: o }) => o).flat().find(({ id: o }) => o.toString() === (l == null ? void 0 : l.toString())) || null, Nt = ({
id: t,
menuBlocks: l,
onChange: g,
activeItemId: o,
placeholder: O = "Select item",
size: p = "Small",
disabled: i = !1,
clearable: H = !1,
ariaLabel: _ = "Dropdown",
decorator: B,
autoResize: u = !0,
validation: S = F.Default,
alignment: R = "Start",
position: W = "Bottom",
emphasis: $ = ct.Default,
flip: z = !1,
"data-test-id": f = "dropdown",
enablePortal: V = !0
}) => {
var E;
const e = o ? Mt(l, o) : null, h = pt(_, l), r = at({
...h,
defaultSelectedKey: o,
onSelectionChange: (m) => g(m),
disabledKeys: A(K(l))
}), n = d(null), { triggerProps: j, valueProps: G, menuProps: U } = lt({ ...h, isDisabled: i }, r, n), { buttonProps: y } = et({ ...j, isDisabled: i }, n), { isOpen: a } = r, { isFocusVisible: X, focusProps: q } = ot(), b = d(null), { overlayProps: J } = st(
{ isOpen: a, onClose: () => r.close(), shouldCloseOnBlur: !0, isDismissable: !0 },
b
);
I(() => {
r.disabledKeys.has(o) || o !== r.selectedKey && r.setSelectedKey(o);
}, [o]);
const { maxHeight: x } = dt(n, { isOpen: a, autoResize: u }), Q = !u || x !== wt, Y = e ? w.Active : w.Default, Z = i ? w.Disabled : Y, k = e ? yt[e.style || bt.Primary][Z] : "tw-text-text-x-weak", D = H ? () => {
r.setSelectedKey("");
const m = r.collection.getFirstKey();
m && r.selectionManager.setFocusedKey(m);
} : void 0, C = !!e && !!D, P = d(null), v = {
"Top-Start": "top-start",
"Top-End": "top-end",
"Bottom-Start": "bottom-start",
"Bottom-End": "bottom-end"
}, T = mt(n == null ? void 0 : n.current, P.current, {
placement: v[`${W}-${R}`],
strategy: "fixed",
modifiers: [
{
name: "offset",
options: {
offset: [0, 8]
}
},
{
name: "flip",
enabled: z
}
]
});
return /* @__PURE__ */ c("div", { className: "tw-relative tw-w-full tw-font-sans tw-text-s", "data-test-id": f, children: [
/* @__PURE__ */ c(
ft,
{
disabled: i,
buttonProps: y,
isFocusVisible: !i && X,
isOpen: a,
size: p === "Large" ? N.Large : N.Small,
emphasis: $,
onClear: D,
showClear: C,
validation: S,
children: [
/* @__PURE__ */ s(nt, { state: r, triggerRef: n }),
/* @__PURE__ */ s(
"button",
{
...it(y, q),
id: gt(t),
ref: n,
"data-test-id": `${f}-trigger`,
className: ht([
"tw-overflow-hidden tw-flex-auto tw-h-full tw-rounded tw-text-left tw-outline-none",
p === "Small" ? "tw-py-2 tw-pl-3 tw-min-h-[34px]" : "tw-pl-5 tw-py-4 tw-min-h-[60px]",
C ? "tw-pr-12" : "tw-pr-8",
k
]),
children: /* @__PURE__ */ s(
xt,
{
ariaProps: G,
title: (e == null ? void 0 : e.title) || O,
decorator: B ?? (e == null ? void 0 : e.decorator),
subtitle: e == null ? void 0 : e.subtitle,
size: p === "Small" ? L.Small : L.Large
}
)
}
)
]
}
),
!i && a && Q && /* @__PURE__ */ s(St, { enablePortal: V, children: /* @__PURE__ */ tt(
"div",
{
ref: P,
style: {
...T.styles.popper,
width: (E = n.current) == null ? void 0 : E.getBoundingClientRect().width,
minWidth: "fit-content"
},
...T.attributes.popper,
className: "tw-absolute tw-p-0 tw-shadow tw-list-none tw-m-0 tw-z-[120000] tw-min-w-full tw-overflow-hidden",
key: "content"
},
/* @__PURE__ */ s(rt, { restoreFocus: !0, children: /* @__PURE__ */ c(
"div",
{
...J,
ref: b,
style: u ? { maxHeight: x } : {},
className: "tw-flex tw-flex-col",
"data-test-id": `${f}-menu`,
role: "dialog",
children: [
/* @__PURE__ */ s(M, { onDismiss: () => close() }),
/* @__PURE__ */ s(ut, { ariaProps: U, state: r, menuBlocks: l, scrollable: !0 }),
/* @__PURE__ */ s(M, { onDismiss: () => close() })
]
}
) })
) }),
S === F.Loading && /* @__PURE__ */ s("span", { className: "tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-base tw-rounded-full tw-p-[2px] tw-border tw-border-line-weak", children: /* @__PURE__ */ s(Dt, { size: Ct.ExtraSmall }) })
] });
};
Nt.displayName = "FonduesDropdown";
export {
Zt as DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT,
Nt as Dropdown,
Tt as DropdownAlignment,
Et as DropdownPosition,
Pt as DropdownSize
};
//# sourceMappingURL=Dropdown.es.js.map