239 lines
9.7 KiB
TypeScript
239 lines
9.7 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Multi Select — https://app.subframe.com/f023064a5ca0/library?component=Multi+Select_457d3920-2559-46a2-9dfe-c5b809028265
|
|
*/
|
|
|
|
import React from "react";
|
|
import { FeatherCheck } from "@subframe/core";
|
|
import { FeatherChevronDown } from "@subframe/core";
|
|
import { FeatherUsers } from "@subframe/core";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
icon?: React.ReactNode;
|
|
iconRight?: React.ReactNode;
|
|
image?: string;
|
|
children?: React.ReactNode;
|
|
selected?: boolean;
|
|
showCheckbox?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
|
|
{ icon = null, iconRight = null, image, children, selected = false, showCheckbox = false, className, ...otherProps }: ItemProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/21b24fdb hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary flex w-full cursor-pointer items-center gap-2 rounded-sm 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>
|
|
{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-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary", {
|
|
"text-icon-neutral-primary": selected,
|
|
})}
|
|
>
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
{children ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames("text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-tertiary shrink-0 grow basis-0", {
|
|
"text-text-neutral-primary": selected,
|
|
})}
|
|
>
|
|
{children}
|
|
</span>
|
|
) : null}
|
|
{iconRight ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames("text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary", {
|
|
"text-icon-neutral-primary": selected,
|
|
})}
|
|
>
|
|
{iconRight}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export interface MultiSelectRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "placeholder"> {
|
|
disabled?: boolean;
|
|
error?: boolean;
|
|
hasValue?: boolean;
|
|
open?: boolean;
|
|
variant?: "outline" | "filled";
|
|
borderless?: boolean;
|
|
noPadding?: boolean;
|
|
size?: "medium" | "small" | "large";
|
|
showLabel?: boolean;
|
|
label?: React.ReactNode;
|
|
helpText?: React.ReactNode;
|
|
value?: React.ReactNode;
|
|
placeholder?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
errorText?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const MultiSelectRoot = React.forwardRef<HTMLDivElement, MultiSelectRootProps>(function MultiSelectRoot(
|
|
{
|
|
disabled = false,
|
|
error = false,
|
|
hasValue = false,
|
|
open = false,
|
|
variant = "outline",
|
|
borderless = false,
|
|
noPadding = false,
|
|
size = "medium",
|
|
showLabel = false,
|
|
label,
|
|
helpText,
|
|
value,
|
|
placeholder,
|
|
icon = <FeatherUsers />,
|
|
children,
|
|
errorText,
|
|
className,
|
|
...otherProps
|
|
}: MultiSelectRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/457d3920 flex h-9 w-full max-w-[384px] min-w-[192px] cursor-pointer flex-col items-start gap-4",
|
|
{
|
|
"h-auto gap-3": showLabel,
|
|
"h-12": size === "large",
|
|
"h-8": size === "small",
|
|
"h-auto": noPadding,
|
|
},
|
|
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="flex w-full shrink-0 grow basis-0 flex-col items-start gap-1 rounded-sm">
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"border-border-strong bg-surface-neutral-primary group-hover/457d3920:border-brand-brand-border-solid-hover group-hover/457d3920:bg-surface-neutral-secondary group-focus-within/457d3920:bg-surface-neutral-secondary group-focus-within/457d3920:shadow-focus flex h-9 w-full flex-none flex-col items-start rounded-sm border border-solid group-hover/457d3920:border group-hover/457d3920:border-solid",
|
|
{
|
|
"h-12": size === "large",
|
|
"h-8": size === "small",
|
|
"h-auto": noPadding,
|
|
// @subframe/sync-disable -- local fix: `borderless` only dropped the hover and focus
|
|
// border, so the field showed a border at rest and lost it on hover — the opposite of
|
|
// what the prop says. The resting border goes with the other two.
|
|
"[&&]:border-none group-focus-within/457d3920:group-focus-within/457d3920:[&&]:border-none group-focus-within/457d3920:group-focus-within/457d3920:group-focus-within/457d3920:[&&]:border-none group-hover/457d3920:group-hover/457d3920:[&&]:border-none group-hover/457d3920:group-hover/457d3920:group-hover/457d3920:[&&]:border-none":
|
|
borderless,
|
|
"bg-surface-neutral-secondary": variant === "filled",
|
|
"border-border-negative-solid group-hover/457d3920:border-border-negative-solid group-focus-within/457d3920:border-border-negative-solid border border-solid group-focus-within/457d3920:border-2 group-focus-within/457d3920:border-solid group-focus-within/457d3920:shadow-none group-hover/457d3920:border group-hover/457d3920:border-solid":
|
|
error,
|
|
"border-border-disabled bg-surface-neutral-disabled group-hover/457d3920:border-border-disabled group-hover/457d3920:bg-surface-neutral-disabled group-focus-within/457d3920:bg-surface-neutral-disabled border border-solid group-focus-within/457d3920:shadow-none group-hover/457d3920:border group-hover/457d3920:border-solid":
|
|
disabled,
|
|
}
|
|
)}
|
|
>
|
|
<div className={SubframeUtils.twClassNames("flex w-full shrink-0 grow basis-0 items-center gap-2 px-3 text-left", { "px-0 py-0": noPadding })}>
|
|
{icon ? (
|
|
<SubframeCore.IconWrapper className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-subtle">
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
{value ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary hidden shrink-0 grow basis-0 whitespace-nowrap",
|
|
{
|
|
"text-body-small-regular-0 font-body-small-regular-0": size === "small",
|
|
inline: hasValue,
|
|
"text-text-neutral-disabled": disabled,
|
|
}
|
|
)}
|
|
>
|
|
{value}
|
|
</span>
|
|
) : null}
|
|
{placeholder ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-subtle shrink-0 grow basis-0 whitespace-nowrap",
|
|
{ hidden: hasValue, "text-text-neutral-disabled": disabled }
|
|
)}
|
|
>
|
|
{placeholder}
|
|
</span>
|
|
) : null}
|
|
<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": disabled,
|
|
})}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{errorText ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames("text-body-small-regular-0 font-body-small-regular-0 text-text-feedback-negative hidden", { inline: error })}
|
|
>
|
|
{errorText}
|
|
</span>
|
|
) : null}
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"border-border-default bg-surface-neutral-primary hidden w-full flex-col items-start justify-center gap-1 overflow-hidden rounded-sm border border-solid px-1 py-1 shadow-md",
|
|
{ flex: open }
|
|
)}
|
|
>
|
|
{children ? <div className="flex w-full flex-col items-start gap-0.5">{children}</div> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export const MultiSelect = Object.assign(MultiSelectRoot, {
|
|
Item,
|
|
});
|