@trail-ui/react
Version:
78 lines (75 loc) • 2.89 kB
JavaScript
import {
InternalListBoxContext
} from "./chunk-O34YT5G7.mjs";
import {
ListBoxSelectedIcon
} from "./chunk-DVXK43TK.mjs";
// src/listbox/listbox-item.tsx
import { clsx } from "@trail-ui/shared-utils";
import { menuItem } from "@trail-ui/theme";
import { useContext, useMemo } from "react";
import { ListBoxItem as AriaListBoxItem, Text } from "react-aria-components";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function ListBoxItem(props) {
const context = useContext(InternalListBoxContext);
const {
children,
description,
startContent,
endContent,
selectedIcon,
className,
classNames = context.itemClasses,
...otherProps
} = props;
const slots = useMemo(() => menuItem(), []);
const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ jsx(
AriaListBoxItem,
{
...otherProps,
textValue: "ListBoxItem",
className: slots.base({ class: baseStyles }),
children: ({ isSelected, isDisabled, selectionMode, isFocused }) => {
if (isFocused && props.textValue && props.onFocusChange) {
props.onFocusChange(props.textValue);
}
const selectedContent = () => {
const defaultIcon = /* @__PURE__ */ jsx(ListBoxSelectedIcon, { isSelected });
if (typeof selectedIcon === "function") {
return selectedIcon({ icon: defaultIcon, isSelected, isDisabled });
}
if (selectedIcon)
return selectedIcon;
return defaultIcon;
};
return /* @__PURE__ */ jsxs(Fragment, { children: [
startContent,
description ? /* @__PURE__ */ jsxs("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
/* @__PURE__ */ jsx(Text, { slot: "label", className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: /* @__PURE__ */ jsx(Fragment, { children }) }),
/* @__PURE__ */ jsx(
Text,
{
slot: "description",
className: slots.description({ class: classNames == null ? void 0 : classNames.description }),
children: description
}
)
] }) : /* @__PURE__ */ jsx(Text, { slot: "label", className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: /* @__PURE__ */ jsx(Fragment, { children }) }),
isSelected && selectionMode !== "none" && /* @__PURE__ */ jsx(
"span",
{
"aria-hidden": "true",
className: slots.selectedIcon({ class: classNames == null ? void 0 : classNames.selectedIcon }),
children: selectedContent()
}
),
endContent
] });
}
}
);
}
export {
ListBoxItem
};