286 lines
10 KiB
TypeScript
286 lines
10 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 flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-2 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 h-4 w-4 flex-none flex-col items-center justify-center rounded-sm border-2 border-solid border-border-strong bg-surface-neutral-secondary",
|
|
{
|
|
flex: showCheckbox,
|
|
"border-2 border-solid border-brand-brand-border-solid-default bg-brand-brand-surface-solid-default":
|
|
selected,
|
|
}
|
|
)}
|
|
>
|
|
<FeatherCheck
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid",
|
|
{ "inline-flex": selected }
|
|
)}
|
|
/>
|
|
</div>
|
|
{image ? (
|
|
<img
|
|
className="h-6 w-6 flex-none rounded-round object-cover"
|
|
src={image}
|
|
/>
|
|
) : 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(
|
|
"grow shrink-0 basis-0 text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-tertiary",
|
|
{ "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 min-w-[192px] max-w-[384px] 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 grow shrink-0 basis-0 flex-col items-start gap-1 rounded-sm">
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex h-9 w-full flex-none flex-col items-start rounded-sm border border-solid border-border-strong bg-surface-neutral-primary group-hover/457d3920:border group-hover/457d3920:border-solid 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",
|
|
{
|
|
"h-12": size === "large",
|
|
"h-8": size === "small",
|
|
"h-auto": noPadding,
|
|
"group-hover/457d3920:group-hover/457d3920:[&&]:border-none group-hover/457d3920:group-hover/457d3920:group-hover/457d3920:[&&]: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":
|
|
borderless,
|
|
"bg-surface-neutral-secondary": variant === "filled",
|
|
"border border-solid border-border-negative-solid group-hover/457d3920:border group-hover/457d3920:border-solid group-hover/457d3920:border-border-negative-solid group-focus-within/457d3920:border-2 group-focus-within/457d3920:border-solid group-focus-within/457d3920:border-border-negative-solid group-focus-within/457d3920:shadow-none":
|
|
error,
|
|
"border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/457d3920:border group-hover/457d3920:border-solid group-hover/457d3920:border-border-disabled group-hover/457d3920:bg-surface-neutral-disabled group-focus-within/457d3920:bg-surface-neutral-disabled group-focus-within/457d3920:shadow-none":
|
|
disabled,
|
|
}
|
|
)}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full grow shrink-0 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(
|
|
"hidden grow shrink-0 basis-0 whitespace-nowrap text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary",
|
|
{
|
|
"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(
|
|
"grow shrink-0 basis-0 whitespace-nowrap text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-subtle",
|
|
{ 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(
|
|
"hidden text-body-small-regular-0 font-body-small-regular-0 text-text-feedback-negative",
|
|
{ inline: error }
|
|
)}
|
|
>
|
|
{errorText}
|
|
</span>
|
|
) : null}
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden w-full flex-col items-start justify-center gap-1 overflow-hidden rounded-sm border border-solid border-border-default bg-surface-neutral-primary 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,
|
|
});
|