@payfit/unity-components
Version:
64 lines (63 loc) • 2.23 kB
JavaScript
import e from "../../../hooks/use-id.js";
import { CheckboxIndicator as t } from "../../checkbox/parts/CheckboxIndicator.js";
import { forwardRef as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
import { ListBoxItem as s } from "react-aria-components/ListBox";
//#region src/components/multi-select/parts/MultiSelectOption.tsx
var c = r({
slots: {
base: [
"uy:flex uy:flex-col uy:transition",
"uy:w-full uy:px-150 uy:py-100",
"uy:rounded-50 uy:cursor-pointer",
"uy:outline-none",
"uy:data-[hovered=true]:bg-surface-neutral-hover",
"uy:data-[pressed=true]:bg-surface-neutral-pressed",
"uy:data-[focus-visible=true]:outline uy:data-[focus-visible=true]:outline-2 uy:data-[focus-visible=true]:outline-solid uy:data-[focus-visible=true]:outline-utility-focus-ring uy:data-[focus-visible=true]:-outline-offset-2"
],
label: "uy:inline-flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
helperText: "uy:inline-block uy:typography-body uy:text-content-neutral-low uy:pl-3.5"
},
variants: { isDisabled: {
true: {
base: "uy:cursor-not-allowed!",
label: "uy:text-content-neutral-disabled",
helperText: "uy:text-content-neutral-disabled"
},
false: { base: "" }
} }
});
function l(e, t) {
if (t !== void 0) return t;
if (typeof e == "string") return e;
}
function u({ value: n, children: r, isDisabled: u, helperText: d, textValue: f, ...p }, m) {
let h = e(), { base: g, label: _, helperText: v } = c({ isDisabled: u });
return /* @__PURE__ */ a(s, {
"data-dd-privacy": "mask",
...p,
ref: m,
id: n,
isDisabled: u,
textValue: l(r, f),
className: g(),
"aria-describedby": d ? `${h}-helper-text` : void 0,
children: ({ isSelected: e }) => /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("div", {
className: _(),
children: [/* @__PURE__ */ a(t, {
isSelected: e,
isDisabled: u,
"data-dd-privacy": "hidden"
}), r]
}), d && /* @__PURE__ */ a("span", {
id: `${h}-helper-text`,
className: v(),
children: d
})] })
});
}
u.displayName = "MultiSelectOption";
var d = n(u);
//#endregion
export { d as MultiSelectOption };