@frontify/fondue
Version:
Design system of Frontify
73 lines (72 loc) • 2.47 kB
JavaScript
import { jsx as r } from "react/jsx-runtime";
import { useFocusRing as C } from "@react-aria/focus";
import { useMenuItem as A } from "@react-aria/menu";
import { mergeProps as x } from "@react-aria/utils";
import { useRef as F, useState as d, useEffect as j } from "react";
import { MenuItem as E } from "../../MenuItem/MenuItem.es.js";
import { Switch as N } from "../../Switch/Switch.es.js";
import { FOCUS_STYLE_INSET as O } from "../../../utilities/focusStyle.es.js";
import { merge as P } from "../../../utilities/merge.es.js";
const z = (t) => typeof t.onClick < "u" && typeof t.type > "u", n = (t) => typeof t.onClick < "u" && t.type === "switch", R = (t, e) => {
const [o, l] = d(e ?? !1), [i, s] = d({
switchComponent: void 0,
switchValue: null,
toggleSwitch: null
});
return j(() => {
t && s({
switchComponent: /* @__PURE__ */ r(N, { size: "small", mode: o ? "on" : "off" }),
switchValue: o,
toggleSwitch: () => l(!o)
});
}, [t, o]), i;
}, T = ({ menuItem: t, node: e, state: o, isSelected: l, onClick: i }) => {
const s = F(null), a = n(t) ? t.initialValue : !1, {
switchComponent: f = void 0,
switchValue: w = null,
toggleSwitch: c = null
} = R(n(t), a), { menuItemProps: h } = A(
{
...e,
onAction: () => {
z(t) && t.onClick(), n(t) && (c == null || c(), t.onClick(!w));
},
isDisabled: (t == null ? void 0 : t.disabled) || !1,
"aria-label": typeof (t == null ? void 0 : t.title) == "string" ? t == null ? void 0 : t.title : "Menu item"
},
o,
s
), { title: u, decorator: b, subtitle: S, size: g, style: y, disabled: p, selectionIndicator: v } = t, { isFocusVisible: M, focusProps: V } = C();
return /* @__PURE__ */ r(
"li",
{
...x(h, V, { onClick: () => i == null ? void 0 : i() }),
"data-test-id": "menu-item",
className: P([
"tw-relative hover:tw-bg-box-neutral-hover tw-list-none tw-outline-none",
p && "tw-pointer-events-none tw-top-px",
M && O
]),
ref: s,
children: /* @__PURE__ */ r(
E,
{
title: u,
decorator: b,
subtitle: S,
size: g,
style: y,
disabled: p,
active: l,
selectionIndicator: v,
switchComponent: f
}
)
}
);
};
T.displayName = "FondueAriaMenuItem";
export {
T as AriaMenuItem
};
//# sourceMappingURL=AriaMenuItem.es.js.map