@trail-ui/react
Version:
195 lines (193 loc) • 6.53 kB
JavaScript
import {
Text
} from "../chunk-VIVC5TFC.mjs";
import "../chunk-LW564FSP.mjs";
import "../chunk-QD7CZFZ3.mjs";
import {
composeTailwindRenderProps
} from "../chunk-E45U7QEE.mjs";
import {
InternalListBoxContext
} from "../chunk-O34YT5G7.mjs";
import {
ListBoxSelectedIcon
} from "../chunk-DVXK43TK.mjs";
// src/multiselect/tw-listbox.tsx
import React, { useContext, useMemo } from "react";
import {
ListBox as RACListBox,
ListBoxItem as RACListBoxItem,
Collection,
Header,
Section,
composeRenderProps
} from "react-aria-components";
import { twMerge } from "tailwind-merge";
import { clsx } from "@trail-ui/shared-utils";
import { selectComboboxItem } from "@trail-ui/theme";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function ListBox({ children, ...props }) {
const ref = React.useRef(null);
return /* @__PURE__ */ jsx(
RACListBox,
{
...props,
className: composeTailwindRenderProps(props.className, "outline-none"),
ref,
children
}
);
}
function ListBoxItem(props) {
const context = useContext(InternalListBoxContext);
const {
children,
description,
startContent,
endContent,
selectedIcon,
className,
classNames = context.itemClasses,
...otherProps
} = props;
const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
const slots = useMemo(() => selectComboboxItem(), []);
const textValue = props.textValue || (typeof props.children === "string" ? props.children : void 0);
return /* @__PURE__ */ jsx(
RACListBoxItem,
{
...otherProps,
textValue,
className: slots.base({ class: baseStyles }),
children: ({ isSelected, isDisabled, selectionMode }) => {
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("div", { "aria-selected": isSelected, className: "flex flex-1", 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 }) }),
selectionMode !== "none" && /* @__PURE__ */ jsx(
"span",
{
"aria-hidden": "true",
className: slots.selectedIcon({ class: classNames == null ? void 0 : classNames.selectedIcon }),
children: selectedContent()
}
),
endContent
] });
}
}
);
}
function DropdownItem({ destructive, ...props }) {
const textValue = props.textValue || (typeof props.children === "string" ? props.children : void 0);
return /* @__PURE__ */ jsx(
RACListBoxItem,
{
...props,
textValue,
className: composeRenderProps(props.className, (className, { isDisabled, isFocused }) => {
return twMerge([
"group flex cursor-default select-none items-center gap-x-1 outline-none",
"has-submenu:pe-0 px-1.5 py-2.5 sm:py-1.5",
"text-base/6 sm:text-sm/6 [&:has(_[slot=description])_[slot=label]]:leading-5",
"[&:not(:has([slot=description]))_[role=img]]:size-5",
"[&:has([slot=description])_[role=img]]:size-7",
"[&:has([slot=description])_[role=img]]:self-start",
"[&:has([slot=description])_[role=img]]:mt-0.5",
"[&:has([slot=description])_[role=img]]:me-0.5",
isDisabled && "opacity-50",
isFocused && "bg-hover",
destructive && "text-destructive",
className
]);
}),
children: composeRenderProps(props.children, (children, { isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { className: twMerge("flex w-4 shrink-0 self-start", isSelected && "mt-[5px]"), children: isSelected && /* @__PURE__ */ jsx(Check, { className: "size-4" }) }),
/* @__PURE__ */ jsx(
"span",
{
className: twMerge(
"flex min-w-0 flex-1 items-center gap-x-2",
"[&>svg:not([class^=text-])]:text-muted",
"[&>svg:not([class^=size-])]:size-4"
),
children
}
)
] }))
}
);
}
function DropdownSection({
className,
...props
}) {
return /* @__PURE__ */ jsxs(
Section,
{
className: twMerge(
"[&:first-child]:-mt-[1px]",
"[&:not(:first-child)]:my-1.5",
"[&:not(:first-child)]:border-t-border/40 [&:not(:first-child)]:border-t",
className
),
children: [
/* @__PURE__ */ jsx(
Header,
{
className: twMerge(
"bg-background text-muted sticky z-10 truncate px-2 pt-2 text-xs/4",
"top-[0px] -mx-[1px] rounded-md backdrop-blur-md"
),
children: props.title
}
),
/* @__PURE__ */ jsx(Collection, { items: props.items, children: props.children })
]
}
);
}
function Check(props) {
return /* @__PURE__ */ jsx(
"svg",
{
"data-slot": "icon-internal",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 16 16",
fill: "currentColor",
...props,
children: /* @__PURE__ */ jsx(
"path",
{
fillRule: "evenodd",
d: "M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z",
clipRule: "evenodd"
}
)
}
);
}
export {
DropdownItem,
DropdownSection,
ListBox,
ListBoxItem
};