253 lines
9.7 KiB
TypeScript
253 lines
9.7 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Accordion — https://app.subframe.com/f023064a5ca0/library?component=Accordion_d2e81e20-863a-4027-826a-991d8910efd9
|
|
* Avatar — https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
|
|
* Dropdown Menu — https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu_99951515-459b-4286-919e-a89e7549b43b
|
|
*/
|
|
|
|
import React from "react";
|
|
import { FeatherCheck } from "@subframe/core";
|
|
import { FeatherLayers } from "@subframe/core";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
import { Accordion } from "../Accordion";
|
|
import { Avatar } from "../Avatar";
|
|
|
|
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="bg-border-default flex h-px shrink-0 grow basis-0 flex-col items-center gap-2" />
|
|
</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, ...otherProps }: DropdownItemProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<SubframeCore.DropdownMenu.Item asChild={true} {...otherProps}>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/adcae8d6 group/dropdown-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2",
|
|
{
|
|
"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(
|
|
"border-border-strong bg-surface-neutral-secondary hidden h-4 w-4 flex-none flex-col items-center justify-center rounded-sm border-2 border-solid",
|
|
{
|
|
flex: showCheckbox,
|
|
"border-brand-brand-border-solid-default bg-brand-brand-surface-solid-default border-2 border-solid": selected,
|
|
}
|
|
)}
|
|
>
|
|
<FeatherCheck
|
|
className={SubframeUtils.twClassNames("text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid hidden", {
|
|
"inline-flex": selected,
|
|
})}
|
|
/>
|
|
</div>
|
|
{image ? <img className="rounded-round h-6 w-6 flex-none object-cover" src={image} 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(
|
|
"text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-tertiary line-clamp-1 shrink-0 grow basis-0",
|
|
{ "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;
|
|
/** Avatar fallback shown when no image is set. */
|
|
initials?: React.ReactNode;
|
|
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/0d3c57ad group/user-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2",
|
|
{
|
|
"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(
|
|
"border-border-strong bg-surface-neutral-secondary hidden h-4 w-4 flex-none flex-col items-center justify-center rounded-sm border-2 border-solid",
|
|
{
|
|
flex: showCheckbox,
|
|
"border-brand-brand-border-solid-default bg-brand-brand-surface-solid-default border-2 border-solid": selected,
|
|
}
|
|
)}
|
|
>
|
|
<FeatherCheck
|
|
className={SubframeUtils.twClassNames("text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid hidden", {
|
|
"inline-flex": selected,
|
|
})}
|
|
/>
|
|
</div>
|
|
<Avatar size="small" image={image}>
|
|
{initials}
|
|
</Avatar>
|
|
<div className="flex shrink-0 grow basis-0 flex-col items-start">
|
|
{title ? <span className="text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary line-clamp-1 w-full">{title}</span> : null}
|
|
{subtitle ? (
|
|
<span className="text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary line-clamp-1 w-full">{subtitle}</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export interface DropdownCustomItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownCustomItem = React.forwardRef<HTMLDivElement, DropdownCustomItemProps>(function DropdownCustomItem(
|
|
{ children, className, ...otherProps }: DropdownCustomItemProps,
|
|
ref
|
|
) {
|
|
return children ? (
|
|
<div className={SubframeUtils.twClassNames("flex w-full flex-col items-start gap-2 rounded-md px-3 py-2", className)} ref={ref} {...otherProps}>
|
|
{children}
|
|
</div>
|
|
) : null;
|
|
});
|
|
|
|
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/ca3b20a3 group/nested-item cursor-pointer", className)}
|
|
variant="ghost"
|
|
role="none"
|
|
triggerRole="menuitem"
|
|
// @subframe/sync-disable -- local fix: group-hover/ca3b20a3 -> hover on the
|
|
// trigger row. The group is the whole accordion, so hovering an item in the
|
|
// expanded submenu also lit up the trigger above it — two highlighted rows at
|
|
// once. Only the trigger itself should react to its own hover.
|
|
trigger={
|
|
<div className="hover:bg-surface-neutral-tertiary flex h-8 w-full flex-none items-center gap-2 rounded-md px-3">
|
|
{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="text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary line-clamp-1 shrink-0 grow basis-0">{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 DropdownMenuRootProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const DropdownMenuRoot = React.forwardRef<HTMLDivElement, DropdownMenuRootProps>(function DropdownMenuRoot(
|
|
{ children, className, ...otherProps }: DropdownMenuRootProps,
|
|
ref
|
|
) {
|
|
return children ? (
|
|
<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.
|
|
"border-border-default bg-surface-neutral-secondary relative z-50 flex min-w-[192px] flex-col items-start rounded-md border border-solid px-1 py-1 shadow-lg",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{children}
|
|
</div>
|
|
) : null;
|
|
});
|
|
|
|
export const DropdownMenu = Object.assign(DropdownMenuRoot, {
|
|
DropdownDivider,
|
|
DropdownItem,
|
|
DropdownUserItem,
|
|
DropdownCustomItem,
|
|
DropdownNestedItem,
|
|
});
|