408 lines
12 KiB
TypeScript
408 lines
12 KiB
TypeScript
"use client";
|
|
|
|
// Synced from Subframe ("Dropdown Menu multi select", 2026-07-21) for WF-P8 S01.
|
|
//
|
|
// Two deliberate local deviations, both reported to David — the export renders
|
|
// a multi-select that cannot express selection or survive a click:
|
|
// 1. The item checkboxes are hardcoded unselected. Here they follow the
|
|
// `selected` prop, so a checked facet option actually reads as checked.
|
|
// 2. `DropdownItem` wraps a Radix `DropdownMenu.Item`, which closes the menu
|
|
// on select. A multi-select must stay open, so the default `onSelect`
|
|
// preventsDefault; a caller that wants the closing behaviour back passes
|
|
// its own `onSelect`.
|
|
|
|
import React from "react";
|
|
import { FeatherLayers } from "@subframe/core";
|
|
import { FeatherSearch } from "@subframe/core";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
import { Accordion } from "../Accordion";
|
|
import { Avatar } from "../Avatar";
|
|
import { Checkbox } from "../Checkbox";
|
|
|
|
export interface DropdownDividerProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownDivider = React.forwardRef<HTMLDivElement, DropdownDividerProps>(
|
|
function DropdownDivider(
|
|
{ className, ...otherProps }: DropdownDividerProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full items-start gap-2 px-1 py-1",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
export interface DropdownItemProps
|
|
extends React.ComponentProps<typeof SubframeCore.DropdownMenu.Item> {
|
|
children?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
iconRight?: React.ReactNode;
|
|
image?: string;
|
|
selected?: boolean;
|
|
showCheckbox?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownItem = React.forwardRef<HTMLDivElement, DropdownItemProps>(
|
|
function DropdownItem(
|
|
{
|
|
children,
|
|
icon = null,
|
|
iconRight = null,
|
|
image,
|
|
selected = false,
|
|
showCheckbox = false,
|
|
className,
|
|
onSelect,
|
|
...otherProps
|
|
}: DropdownItemProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<SubframeCore.DropdownMenu.Item
|
|
asChild={true}
|
|
// Keep the menu open across selections — see the file header.
|
|
onSelect={onSelect ?? ((event) => event.preventDefault())}
|
|
{...otherProps}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/744235d7 flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 group/dropdown-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
|
|
{
|
|
"bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
|
|
selected,
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames("hidden items-start", {
|
|
flex: showCheckbox,
|
|
})}
|
|
>
|
|
<Checkbox
|
|
className="h-auto w-auto flex-none self-stretch"
|
|
label="label"
|
|
description="Description"
|
|
helpText=""
|
|
hideLabel={true}
|
|
checked={selected}
|
|
/>
|
|
</div>
|
|
{image ? (
|
|
<img
|
|
className="h-6 w-6 flex-none rounded-round object-cover"
|
|
src={image}
|
|
// Decorative: the item's own text already names the option.
|
|
alt=""
|
|
/>
|
|
) : null}
|
|
{icon ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
|
|
{ "text-icon-neutral-primary": selected }
|
|
)}
|
|
>
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
{children ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"line-clamp-1 grow shrink-0 basis-0 text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
|
|
{ "text-text-neutral-primary": selected }
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
) : null}
|
|
{iconRight ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
|
|
{ "text-icon-neutral-primary": selected }
|
|
)}
|
|
>
|
|
{iconRight}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
</div>
|
|
</SubframeCore.DropdownMenu.Item>
|
|
);
|
|
}
|
|
);
|
|
|
|
export interface DropdownUserItemProps
|
|
extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
title?: React.ReactNode;
|
|
subtitle?: React.ReactNode;
|
|
image?: string;
|
|
/** Initials fallback when there is no photo — the export hardcoded "OR". */
|
|
initials?: string;
|
|
selected?: boolean;
|
|
showCheckbox?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownUserItem = React.forwardRef<
|
|
HTMLDivElement,
|
|
DropdownUserItemProps
|
|
>(function DropdownUserItem(
|
|
{
|
|
title,
|
|
subtitle,
|
|
image,
|
|
initials,
|
|
selected = false,
|
|
showCheckbox = false,
|
|
className,
|
|
...otherProps
|
|
}: DropdownUserItemProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/ad6eaaaf flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 group/user-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
|
|
{
|
|
"bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
|
|
selected,
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames("hidden items-start", {
|
|
flex: showCheckbox,
|
|
})}
|
|
>
|
|
<Checkbox
|
|
label="label"
|
|
description="Description"
|
|
helpText=""
|
|
hideLabel={true}
|
|
checked={selected}
|
|
/>
|
|
</div>
|
|
<Avatar size="small" image={image}>
|
|
{initials ?? ""}
|
|
</Avatar>
|
|
<div className="flex grow shrink-0 basis-0 flex-col items-start">
|
|
{title ? (
|
|
<span className="line-clamp-1 w-full text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
|
|
{title}
|
|
</span>
|
|
) : null}
|
|
{subtitle ? (
|
|
<span className="line-clamp-1 w-full text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary">
|
|
{subtitle}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export interface DropdownCustomItemProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
children?: React.ReactNode;
|
|
selected?: boolean;
|
|
showCheckbox?: boolean;
|
|
size?: "medium" | "small" | "large";
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownCustomItem = React.forwardRef<
|
|
HTMLDivElement,
|
|
DropdownCustomItemProps
|
|
>(function DropdownCustomItem(
|
|
{
|
|
children,
|
|
selected = false,
|
|
showCheckbox = false,
|
|
size = "medium",
|
|
className,
|
|
...otherProps
|
|
}: DropdownCustomItemProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/e2891f3f flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
|
|
{
|
|
"px-2.5 py-3": size === "large",
|
|
"px-1 py-1": size === "small",
|
|
"bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
|
|
selected,
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<Checkbox
|
|
className={SubframeUtils.twClassNames("hidden", { flex: showCheckbox })}
|
|
label="label"
|
|
description="Description"
|
|
helpText=""
|
|
hideLabel={true}
|
|
checked={selected}
|
|
/>
|
|
{children ? (
|
|
<div className="flex grow shrink-0 basis-0 flex-col items-start">
|
|
{children}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export interface DropdownNestedItemProps
|
|
extends React.ComponentProps<typeof Accordion> {
|
|
children?: React.ReactNode;
|
|
label?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownNestedItem = React.forwardRef<
|
|
React.ElementRef<typeof Accordion>,
|
|
DropdownNestedItemProps
|
|
>(function DropdownNestedItem(
|
|
{
|
|
children,
|
|
label,
|
|
icon = <FeatherLayers />,
|
|
className,
|
|
...otherProps
|
|
}: DropdownNestedItemProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<Accordion
|
|
className={SubframeUtils.twClassNames(
|
|
"group/e3a3cd0a cursor-pointer group/nested-item",
|
|
className
|
|
)}
|
|
variant="ghost"
|
|
trigger={
|
|
<div className="flex h-8 w-full flex-none items-center gap-2 rounded-md px-3 group-hover/e3a3cd0a:bg-surface-neutral-tertiary">
|
|
{icon ? (
|
|
<SubframeCore.IconWrapper className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-primary">
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
{label ? (
|
|
<span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
|
|
{label}
|
|
</span>
|
|
) : null}
|
|
<Accordion.Chevron />
|
|
</div>
|
|
}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{children ? (
|
|
<div className="flex w-full flex-col items-start gap-1">{children}</div>
|
|
) : null}
|
|
</Accordion>
|
|
);
|
|
});
|
|
|
|
export interface DropdownMenuMultiSelectRootProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
children?: React.ReactNode;
|
|
showSearch?: boolean;
|
|
/** Controlled search term — the export shipped a dead, hardcoded input. */
|
|
searchValue?: string;
|
|
searchPlaceholder?: string;
|
|
onSearchChange?: (value: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownMenuMultiSelectRoot = React.forwardRef<
|
|
HTMLDivElement,
|
|
DropdownMenuMultiSelectRootProps
|
|
>(function DropdownMenuMultiSelectRoot(
|
|
{
|
|
children,
|
|
showSearch = false,
|
|
searchValue,
|
|
searchPlaceholder,
|
|
onSearchChange,
|
|
className,
|
|
...otherProps
|
|
}: DropdownMenuMultiSelectRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
// Local adjustment: `relative z-50`. The panel opens in a portal whose
|
|
// wrapper has no z-index, so any positioned `z-10` in the page (e.g. the
|
|
// ProjectCard price row) paints over the open menu.
|
|
"group/8c9fd450 relative z-50 flex min-w-[192px] flex-col items-start rounded-md border border-solid border-border-default bg-surface-neutral-secondary px-1 py-1 shadow-lg",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden w-full flex-col items-start gap-1 pb-1",
|
|
{ flex: showSearch }
|
|
)}
|
|
>
|
|
<div className="flex w-full items-center gap-2 rounded-sm bg-surface-neutral-tertiary px-2 py-1.5">
|
|
<FeatherSearch className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary" />
|
|
<input
|
|
// Reset against @tailwindcss/forms, which would otherwise draw a
|
|
// border and a white fill inside the tinted search row.
|
|
className="subframe-text-input-control min-w-[0px] grow shrink-0 basis-0 self-stretch border-none bg-transparent px-0 py-0 text-body-small-regular-150 font-body-small-regular-150 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle"
|
|
placeholder={searchPlaceholder}
|
|
value={searchValue ?? ""}
|
|
onChange={(event) => onSearchChange?.(event.target.value)}
|
|
type="search"
|
|
/>
|
|
</div>
|
|
<div className="flex h-px w-full flex-none flex-col items-center gap-2 bg-border-default" />
|
|
</div>
|
|
{children ? (
|
|
<div className="flex w-full flex-col items-start gap-0.5">
|
|
{children}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export const DropdownMenuMultiSelect = Object.assign(
|
|
DropdownMenuMultiSelectRoot,
|
|
{
|
|
DropdownDivider,
|
|
DropdownItem,
|
|
DropdownUserItem,
|
|
DropdownCustomItem,
|
|
DropdownNestedItem,
|
|
}
|
|
);
|