384 lines
12 KiB
TypeScript
384 lines
12 KiB
TypeScript
"use client";
|
|
// @subframe/sync-disable -- local fix: generator emitted undefined `checked`/`highlighted` references in Select.Item; selection styling is handled by data-state classes (Phase 0 Subframe migration)
|
|
/*
|
|
* Documentation:
|
|
* Select — https://app.subframe.com/f023064a5ca0/library?component=Select_bb88f90b-8c43-4b73-9c2f-3558ce7838f3
|
|
*/
|
|
|
|
import React from "react";
|
|
import { FeatherCheck } from "@subframe/core";
|
|
import { FeatherChevronDown } from "@subframe/core";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export interface ContentProps
|
|
extends React.ComponentProps<typeof SubframeCore.Select.Content> {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const Content = React.forwardRef<HTMLDivElement, ContentProps>(function Content(
|
|
{ children, className, ...otherProps }: ContentProps,
|
|
ref
|
|
) {
|
|
return children ? (
|
|
<SubframeCore.Select.Content asChild={true} {...otherProps}>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full flex-col items-start gap-1 overflow-hidden rounded-sm border border-solid border-[#e5e5e5] bg-[#ffffff] px-1 py-1 shadow-sm",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
>
|
|
{children}
|
|
</div>
|
|
</SubframeCore.Select.Content>
|
|
) : null;
|
|
});
|
|
|
|
export interface ItemProps
|
|
extends Omit<React.ComponentProps<typeof SubframeCore.Select.Item>, "value"> {
|
|
value: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
|
|
{ value, children, className, ...otherProps }: ItemProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<SubframeCore.Select.Item
|
|
value={value as string}
|
|
asChild={true}
|
|
{...otherProps}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/969e345b flex w-full cursor-pointer items-center gap-1 rounded-sm px-2 py-2 hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary active:shadow-focus data-[state=checked]:bg-brand-brand-surface-subtle-default hover:data-[state=checked]:bg-brand-subtle-hover active:data-[state=checked]:bg-brand-subtle-active data-[highlighted]:bg-brand-subtle-default hover:data-[highlighted]:bg-brand-subtle-hover active:data-[highlighted]:bg-brand-subtle-active",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
>
|
|
<Select.ItemText
|
|
className="h-auto grow shrink-0 basis-0"
|
|
variant={undefined}
|
|
>
|
|
{children || value}
|
|
</Select.ItemText>
|
|
<FeatherCheck className="hidden text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary group-data-[state=checked]/969e345b:inline-flex" />
|
|
</div>
|
|
</SubframeCore.Select.Item>
|
|
);
|
|
});
|
|
|
|
export interface ItemTextProps
|
|
extends React.ComponentProps<typeof SubframeCore.Select.ItemText> {
|
|
children?: React.ReactNode;
|
|
variant?: "option-1" | "selected";
|
|
className?: string;
|
|
}
|
|
|
|
const ItemText = React.forwardRef<HTMLSpanElement, ItemTextProps>(
|
|
function ItemText(
|
|
{ children, variant = "option-1", className, ...otherProps }: ItemTextProps,
|
|
ref
|
|
) {
|
|
return children ? (
|
|
<SubframeCore.Select.ItemText {...otherProps}>
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"group/c3085a74 text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-tertiary",
|
|
{ "text-text-neutral-secondary": variant === "selected" },
|
|
className
|
|
)}
|
|
ref={ref}
|
|
>
|
|
{children}
|
|
</span>
|
|
</SubframeCore.Select.ItemText>
|
|
) : null;
|
|
}
|
|
);
|
|
|
|
export interface TriggerProps
|
|
extends Omit<
|
|
React.ComponentProps<typeof SubframeCore.Select.Trigger>,
|
|
"placeholder"
|
|
> {
|
|
placeholder?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
variant?: "not-filled" | "disabled" | "filled";
|
|
size?: "medium" | "small" | "large";
|
|
noPadding?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(
|
|
function Trigger(
|
|
{
|
|
placeholder,
|
|
icon = null,
|
|
variant = "not-filled",
|
|
size = "medium",
|
|
noPadding = false,
|
|
className,
|
|
...otherProps
|
|
}: TriggerProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<SubframeCore.Select.Trigger asChild={true} {...otherProps}>
|
|
<button
|
|
className={SubframeUtils.twClassNames(
|
|
"group/7ce1d396 flex h-9 w-full items-center justify-between px-3 py-3 text-left",
|
|
{
|
|
"px-0 py-0": noPadding,
|
|
"h-12": size === "large",
|
|
"h-8": size === "small",
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
>
|
|
{icon ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-subtle",
|
|
{
|
|
"text-body-small-regular-0 font-body-small-regular-0":
|
|
size === "small",
|
|
}
|
|
)}
|
|
>
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
<Select.TriggerValue
|
|
placeholder={placeholder as string}
|
|
variant={variant === "filled" ? "filled" : undefined}
|
|
size={size === "large" ? "l" : size === "small" ? "s" : undefined}
|
|
/>
|
|
<FeatherChevronDown
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-medium-0 font-body-default-medium-0 text-icon-neutral-tertiary",
|
|
{
|
|
"text-body-small-medium-0 font-body-small-medium-0":
|
|
size === "small",
|
|
"text-icon-neutral-disabled": variant === "disabled",
|
|
}
|
|
)}
|
|
/>
|
|
</button>
|
|
</SubframeCore.Select.Trigger>
|
|
);
|
|
}
|
|
);
|
|
|
|
export interface TriggerValueProps
|
|
extends React.ComponentProps<typeof SubframeCore.Select.Value> {
|
|
placeholder?: React.ReactNode;
|
|
variant?: "not-filled" | "disabled" | "filled";
|
|
size?: "m" | "s" | "l";
|
|
className?: string;
|
|
}
|
|
|
|
const TriggerValue = React.forwardRef<
|
|
React.ElementRef<typeof SubframeCore.Select.Value>,
|
|
TriggerValueProps
|
|
>(function TriggerValue(
|
|
{
|
|
placeholder,
|
|
variant = "not-filled",
|
|
size = "m",
|
|
className,
|
|
...otherProps
|
|
}: TriggerValueProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<SubframeCore.Select.Value
|
|
className={SubframeUtils.twClassNames(
|
|
"group/21c51472 whitespace-nowrap text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-subtle",
|
|
{
|
|
"text-text-neutral-secondary": variant === "filled",
|
|
"text-text-neutral-disabled": variant === "disabled",
|
|
},
|
|
className
|
|
)}
|
|
ref={ref}
|
|
placeholder={placeholder}
|
|
{...otherProps}
|
|
>
|
|
Value
|
|
</SubframeCore.Select.Value>
|
|
);
|
|
});
|
|
|
|
export interface SelectRootProps
|
|
extends React.ComponentProps<typeof SubframeCore.Select.Root> {
|
|
disabled?: boolean;
|
|
error?: boolean;
|
|
variant?: "outline" | "filled";
|
|
borderless?: boolean;
|
|
noPadding?: boolean;
|
|
size?: "medium" | "small" | "large";
|
|
showLabel?: boolean;
|
|
label?: React.ReactNode;
|
|
placeholder?: React.ReactNode;
|
|
helpText?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
errorText?: React.ReactNode;
|
|
value?: string;
|
|
onValueChange?: (value: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(
|
|
function SelectRoot(
|
|
{
|
|
disabled = false,
|
|
error = false,
|
|
variant = "outline",
|
|
borderless = false,
|
|
noPadding = false,
|
|
size = "medium",
|
|
showLabel = false,
|
|
label,
|
|
placeholder,
|
|
helpText,
|
|
icon = null,
|
|
children,
|
|
errorText,
|
|
className,
|
|
value,
|
|
defaultValue,
|
|
onValueChange,
|
|
open,
|
|
defaultOpen,
|
|
onOpenChange,
|
|
dir,
|
|
name,
|
|
autoComplete,
|
|
required,
|
|
form,
|
|
...otherProps
|
|
}: SelectRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<SubframeCore.Select.Root
|
|
disabled={disabled}
|
|
value={value}
|
|
defaultValue={defaultValue}
|
|
onValueChange={onValueChange}
|
|
open={open}
|
|
defaultOpen={defaultOpen}
|
|
onOpenChange={onOpenChange}
|
|
dir={dir}
|
|
name={name}
|
|
autoComplete={autoComplete}
|
|
required={required}
|
|
form={form}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/bb88f90b flex w-full min-w-[192px] max-w-[320px] cursor-pointer flex-col items-start gap-4",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden flex-col items-start gap-3",
|
|
{ flex: showLabel }
|
|
)}
|
|
>
|
|
{label ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-secondary",
|
|
{ "text-text-feedback-negative": error }
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
) : null}
|
|
{helpText ? (
|
|
<span className="text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary">
|
|
{helpText}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full flex-col items-start gap-4 rounded-[4px]",
|
|
{ "gap-1": error }
|
|
)}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full flex-col items-start rounded-sm border border-solid border-border-strong bg-surface-neutral-primary group-hover/bb88f90b:border group-hover/bb88f90b:border-solid group-hover/bb88f90b:border-brand-brand-border-solid-hover group-hover/bb88f90b:bg-surface-neutral-secondary group-focus-within/bb88f90b:bg-surface-neutral-secondary group-focus-within/bb88f90b:shadow-focus",
|
|
{
|
|
"border-none group-hover/bb88f90b:border-none": borderless,
|
|
"bg-surface-neutral-secondary": variant === "filled",
|
|
"border border-solid border-border-negative-solid group-hover/bb88f90b:border group-hover/bb88f90b:border-solid group-hover/bb88f90b:border-border-negative-solid group-focus-within/bb88f90b:border-2 group-focus-within/bb88f90b:border-solid group-focus-within/bb88f90b:border-border-negative-solid group-focus-within/bb88f90b:shadow-none":
|
|
error,
|
|
"border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/bb88f90b:border group-hover/bb88f90b:border-solid group-hover/bb88f90b:border-border-disabled group-hover/bb88f90b:bg-surface-neutral-disabled group-focus-within/bb88f90b:bg-surface-neutral-disabled group-focus-within/bb88f90b:shadow-none":
|
|
disabled,
|
|
}
|
|
)}
|
|
>
|
|
<Trigger
|
|
placeholder={placeholder}
|
|
icon={icon}
|
|
variant={
|
|
variant === "filled"
|
|
? "filled"
|
|
: disabled
|
|
? "disabled"
|
|
: undefined
|
|
}
|
|
size={
|
|
size === "large"
|
|
? "large"
|
|
: size === "small"
|
|
? "small"
|
|
: undefined
|
|
}
|
|
/>
|
|
</div>
|
|
{errorText ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden text-body-small-regular-0 font-body-small-regular-0 text-text-feedback-negative",
|
|
{ inline: error }
|
|
)}
|
|
>
|
|
{errorText}
|
|
</span>
|
|
) : null}
|
|
<Content>
|
|
{children ? (
|
|
<div className="flex w-full grow shrink-0 basis-0 flex-col items-start">
|
|
{children}
|
|
</div>
|
|
) : null}
|
|
</Content>
|
|
</div>
|
|
</div>
|
|
</SubframeCore.Select.Root>
|
|
);
|
|
}
|
|
);
|
|
|
|
export const Select = Object.assign(SelectRoot, {
|
|
Content,
|
|
Item,
|
|
ItemText,
|
|
Trigger,
|
|
TriggerValue,
|
|
});
|