@payfit/unity-components
Version:
69 lines (68 loc) • 3.03 kB
JavaScript
import { forwardRef as e, useLayoutEffect as t, useRef as n } from "react";
import { uyTv as r } from "@payfit/unity-themes";
import { jsx as i, jsxs as a } from "react/jsx-runtime";
import { Icon as o } from "@payfit/unity-icons";
import { ListBoxItem as s } from "react-aria-components/ListBox";
//#region src/components/list-view/parts/RawListViewItem.tsx
var c = r({ slots: {
root: ["uy:group uy:focus-visible:outline-0"],
wrapper: [
"uy:p-200",
"uy:flex uy:gap-150",
"uy:transition-colors",
"uy:bg-surface-neutral",
"uy:text-content-neutral",
"uy:border-b uy:border-b-solid uy:border-b-border-neutral",
"uy:group-hover:bg-surface-neutral-hover uy:group-hover:cursor-pointer",
"uy:group-data-[hovered=true]:bg-surface-neutral-hover uy:group-data-[hovered=true]:cursor-pointer",
"uy:group-data-[pressed=true]:bg-surface-neutral-pressed",
"uy:group-data-[focus-visible=true]:bg-surface-neutral-focus uy:group-data-[focus-visible=true]:outline uy:group-data-[focus-visible=true]:-outline-offset-4 uy:group-data-[focus-visible=true]:outline-utility-focus-ring",
"uy:group-data-[disabled=true]:bg-surface-neutral-disabled uy:group-data-[disabled=true]:text-content-neutral-disabled uy:group-data-[disabled=true]:cursor-not-allowed",
"uy:group-data-[status=\"active\"]:bg-surface-neutral-selected"
],
prefix: ["uy:grow-0"],
content: ["uy:flex-1 uy:typography-body-small"],
suffix: ["uy:grow-0 uy:flex uy:gap-100"]
} }), l = e((e, r) => {
let l = n(), { children: u, prefix: d, suffix: f, hideDisclosureIndicator: p, ...m } = e, { root: h, wrapper: g, prefix: _, suffix: v, content: y } = c(), b = !!f || !p;
return t(() => {
let e = l.current;
e && (e.querySelector("[data-unity-slot=\"ListViewItemLabel\"]") || !("aria-label" in m) && !("aria-labelledby" in m) && !("textValue" in m) && console.error("ListViewItem: Either a ListViewItemLabel component, an aria-label, aria-labelledby, or textValue prop is required for accessibility. Provide one to ensure screen reader users can identify the item."));
}, [m, l]), /* @__PURE__ */ i(s, {
...m,
className: h(),
"data-dd-privacy": "mask",
children: /* @__PURE__ */ a("div", {
ref: (e) => {
l.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
},
"data-unity-slot": "ListViewItem",
className: g(),
children: [
d && /* @__PURE__ */ i("div", {
"data-unity-slot": "ListViewItem.prefix",
className: _(),
children: d
}),
/* @__PURE__ */ i("div", {
"data-unity-slot": "ListViewItem.content",
className: y(),
children: u
}),
b && /* @__PURE__ */ a("div", {
"data-unity-slot": "ListViewItem.suffix",
className: v(),
children: [f, !p && /* @__PURE__ */ i(o, {
src: "CaretRightOutlined",
role: "presentation",
size: 20,
color: m.isDisabled ? "content.neutral.disabled" : "content.neutral.low"
})]
})
]
})
});
});
l.displayName = "RawListViewItem";
//#endregion
export { l as RawListViewItem, c as listViewItem };