Dashboard/ui/components/MultiSelect/MultiSelect.tsx

"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/2e138f3f 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;
  variant?: "outline" | "filled";
  borderless?: boolean;
  noPadding?: boolean;
  fillContainer?: 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;
  message?: React.ReactNode;
  dropdown?: React.ReactNode;
  className?: string;
}

const MultiSelectRoot = React.forwardRef<HTMLDivElement, MultiSelectRootProps>(
  function MultiSelectRoot(
    {
      disabled = false,
      error = false,
      hasValue = false,
      variant = "outline",
      borderless = false,
      noPadding = false,
      fillContainer = false,
      size = "medium",
      showLabel = false,
      label,
      helpText,
      value,
      placeholder,
      icon = <FeatherUsers />,
      children,
      message,
      dropdown,
      className,
      ...otherProps
    }: MultiSelectRootProps,
    ref
  ) {
    return (
      <SubframeCore.DropdownMenu.Root>
        <SubframeCore.DropdownMenu.Trigger asChild={true}>
          <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-0": showLabel,
                "h-12": size === "large",
                "h-8": size === "small",
                "max-w-none": fillContainer,
                "h-auto": noPadding,
              },
              className
            )}
            ref={ref}
            {...otherProps}
          >
            <div
              className={SubframeUtils.twClassNames(
                "hidden flex-col items-start gap-2",
                { flex: showLabel }
              )}
            >
              {label ? (
                <span
                  className={SubframeUtils.twClassNames(
                    "hidden text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-primary",
                    { inline: showLabel, "text-text-feedback-negative": error }
                  )}
                >
                  {label}
                </span>
              ) : null}
              {helpText ? (
                <span
                  className={SubframeUtils.twClassNames(
                    "hidden text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
                    { inline: showLabel, "text-text-feedback-negative": error }
                  )}
                >
                  {helpText}
                </span>
              ) : null}
            </div>
            <div
              className={SubframeUtils.twClassNames(
                "flex w-full flex-col items-start gap-1 rounded-sm",
                { "px-0 pt-1.5 pb-0": showLabel }
              )}
            >
              <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",
                  {
                    "border border-solid border-border-default": showLabel,
                    "h-12": size === "large",
                    "h-8": size === "small",
                    "h-auto": noPadding,
                    "rounded-none border-none bg-transparent group-hover/457d3920:border-none group-hover/457d3920:bg-transparent group-focus-within/457d3920:bg-transparent group-focus-within/457d3920:shadow-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={SubframeUtils.twClassNames(
                        "text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-subtle",
                        { "text-icon-feedback-negative": error }
                      )}
                    >
                      {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",
                        {
                          "text-body-small-regular-0 font-body-small-regular-0":
                            size === "small",
                          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 flex-none",
                      {
                        "text-body-small-medium-0 font-body-small-medium-0":
                          size === "small",
                        "text-icon-feedback-negative": error,
                        "text-icon-neutral-disabled": disabled,
                      }
                    )}
                  />
                </div>
              </div>
              {message ? (
                <span
                  className={SubframeUtils.twClassNames(
                    "hidden text-body-extra-small-regular-0 font-body-extra-small-regular-0 text-text-neutral-tertiary",
                    {
                      inline: showLabel,
                      "inline text-text-feedback-negative": error,
                    }
                  )}
                >
                  {message}
                </span>
              ) : null}
              {children ? (
                <div className="hidden w-full flex-col items-start gap-0.5 overflow-hidden rounded-sm border border-solid border-border-default bg-surface-neutral-primary px-1 py-1 shadow-md">
                  {children}
                </div>
              ) : null}
            </div>
          </div>
        </SubframeCore.DropdownMenu.Trigger>
        <SubframeCore.DropdownMenu.Portal>
          <SubframeCore.DropdownMenu.Content
            side="bottom"
            align="start"
            sideOffset={4}
            asChild={true}
          >
            {dropdown ? (
              <div className="flex items-start justify-between">{dropdown}</div>
            ) : null}
          </SubframeCore.DropdownMenu.Content>
        </SubframeCore.DropdownMenu.Portal>
      </SubframeCore.DropdownMenu.Root>
    );
  }
);

export const MultiSelect = Object.assign(MultiSelectRoot, {
  Item,
});