Dashboard/ui/components/Combobox/Combobox.tsx

// @subframe/sync-disable
// @ts-nocheck
"use client";
/*
 * Documentation:
 * Combobox — https://app.subframe.com/f023064a5ca0/library?component=Combobox_8a1be2ee-c1b7-4407-9c21-6448306d2700
 * Loader — https://app.subframe.com/f023064a5ca0/library?component=Loader_f2e570c8-e463-45c2-aae9-a960146bc5d5
 */

import React from "react";
import { FeatherCheck } from "@subframe/core";
import { FeatherChevronDown } from "@subframe/core";
import { FeatherLoader } from "@subframe/core";
import { FeatherPlus } from "@subframe/core";
import { FeatherSearch } from "@subframe/core";
import { FeatherSearchX } from "@subframe/core";
import { FeatherX } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { Loader } from "../Loader";

export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  className?: string;
}

const Chip = React.forwardRef<HTMLDivElement, ChipProps>(function Chip(
  { children, className, ...otherProps }: ChipProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "flex items-center gap-1 rounded-sm border border-solid border-border-default bg-surface-feedback-subtle-neutral pl-2 pr-1 py-0.5",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {children ? (
        <span className="whitespace-nowrap text-body-small-medium-0 font-body-small-medium-0 text-text-neutral-on-subtle">
          {children}
        </span>
      ) : null}
      <div className="flex h-4 w-4 flex-none flex-col items-center justify-center rounded-sm cursor-pointer hover:bg-surface-feedback-subtle-neutral-hover active:bg-surface-feedback-subtle-neutral-active">
        <FeatherX className="text-body-small-medium-0 font-body-small-medium-0 text-icon-neutral-tertiary" />
      </div>
    </div>
  );
});

export interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  selected?: boolean;
  showCheckbox?: boolean;
  className?: string;
}

const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
  {
    children,
    selected = false,
    showCheckbox = false,
    className,
    ...otherProps
  }: ItemProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/7b9d6745 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-0 font-body-extra-small-semibold-0 text-icon-neutral-on-solid",
            { "inline-flex": selected }
          )}
        />
      </div>
      {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}
      <FeatherCheck
        className={SubframeUtils.twClassNames(
          "hidden text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary",
          { "inline-flex": selected }
        )}
      />
    </div>
  );
});

export interface AddItemProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  className?: string;
}

const AddItem = React.forwardRef<HTMLDivElement, AddItemProps>(function AddItem(
  { children, className, ...otherProps }: AddItemProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/4458d273 flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-2 group/add-item hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <FeatherPlus className="text-body-default-regular-0 font-body-default-regular-0 text-icon-feedback-information" />
      {children ? (
        <span className="grow shrink-0 basis-0 text-body-default-medium-0 font-body-default-medium-0 text-text-feedback-information">
          {children}
        </span>
      ) : null}
    </div>
  );
});

export interface ComboboxRootProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "placeholder"> {
  disabled?: boolean;
  error?: boolean;
  state?: "default" | "typing" | "no-results" | "loading" | "create-new";
  hasValue?: boolean;
  open?: boolean;
  showLabel?: boolean;
  label?: React.ReactNode;
  helpText?: React.ReactNode;
  searchValue?: React.ReactNode;
  placeholder?: React.ReactNode;
  createLabel?: React.ReactNode;
  emptyText?: React.ReactNode;
  loadingText?: React.ReactNode;
  message?: React.ReactNode;
  icon?: React.ReactNode;
  chipChildren?: React.ReactNode;
  children?: React.ReactNode;
  size?: "small" | "medium" | "large";
  className?: string;
}

const ComboboxRoot = React.forwardRef<HTMLDivElement, ComboboxRootProps>(
  function ComboboxRoot(
    {
      disabled = false,
      error = false,
      state = "default",
      hasValue = false,
      open = false,
      showLabel = false,
      label,
      helpText,
      searchValue,
      placeholder,
      createLabel,
      emptyText,
      loadingText,
      message,
      icon = <FeatherSearch />,
      chipChildren,
      children,
      size = "medium",
      className,
      ...otherProps
    }: ComboboxRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/8a1be2ee flex min-w-[192px] max-w-[576px] cursor-pointer flex-col items-start gap-3",
          { "gap-0": showLabel },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "hidden w-full flex-col items-start",
            { flex: showLabel }
          )}
        >
          {label ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-primary",
                { "text-text-feedback-negative": error }
              )}
            >
              {label}
            </span>
          ) : null}
          {helpText ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary mt-2",
                { "text-text-feedback-negative": error }
              )}
            >
              {helpText}
            </span>
          ) : null}
        </div>
        <div
          className={SubframeUtils.twClassNames(
            "flex w-full grow shrink-0 basis-0 flex-col items-start gap-1 rounded-sm relative",
            { "mt-2": 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/8a1be2ee:border group-hover/8a1be2ee:border-solid group-hover/8a1be2ee:border-brand-brand-border-solid-hover group-hover/8a1be2ee:bg-surface-neutral-secondary group-focus-within/8a1be2ee:bg-surface-neutral-secondary group-focus-within/8a1be2ee:shadow-focus",
              {
                "h-12": size === "large",
                "h-8": size === "small",
                "border border-solid border-border-negative-solid group-hover/8a1be2ee:border group-hover/8a1be2ee:border-solid group-hover/8a1be2ee:border-border-negative-solid group-focus-within/8a1be2ee:border-2 group-focus-within/8a1be2ee:border-solid group-focus-within/8a1be2ee:border-border-negative-solid group-focus-within/8a1be2ee:shadow-none":
                  error,
                "border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/8a1be2ee:border group-hover/8a1be2ee:border-solid group-hover/8a1be2ee:border-border-disabled group-hover/8a1be2ee:bg-surface-neutral-disabled group-focus-within/8a1be2ee:bg-surface-neutral-disabled group-focus-within/8a1be2ee:shadow-none":
                  disabled,
              }
            )}
          >
            <div className="flex w-full grow shrink-0 basis-0 flex-wrap items-center gap-2 px-3">
              {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}
              {chipChildren ? (
                <div
                  className={SubframeUtils.twClassNames(
                    "hidden flex-wrap items-center gap-1.5",
                    { flex: hasValue }
                  )}
                >
                  {chipChildren}
                </div>
              ) : null}
              <div
                className={SubframeUtils.twClassNames(
                  "flex grow shrink-0 basis-0 items-center gap-1",
                  { hidden: hasValue }
                )}
              >
                <input
                  className={SubframeUtils.twClassNames(
                    "h-6 min-w-[64px] grow shrink-0 basis-0 text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle",
                    { hidden: hasValue, "text-text-neutral-disabled": disabled }
                  )}
                  placeholder={placeholder}
                  value=""
                  type="text"
                />
              </div>
              <FeatherChevronDown
                className={SubframeUtils.twClassNames(
                  "text-body-default-medium-0 font-body-default-medium-0 text-icon-neutral-tertiary",
                  {
                    "text-icon-feedback-negative": error,
                    "hidden text-icon-neutral-disabled": disabled,
                  }
                )}
              />
              <Loader
                className={SubframeUtils.twClassNames("hidden", {
                  flex: state === "loading",
                })}
              />
            </div>
          </div>
          {message ? (
            <span
              className={SubframeUtils.twClassNames(
                "hidden text-body-extra-small-regular-0 font-body-extra-small-regular-0 text-text-feedback-negative mt-1",
                { inline: error }
              )}
            >
              {message}
            </span>
          ) : null}
          <div
            className={SubframeUtils.twClassNames(
              "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 absolute left-0 right-0 top-full z-50 mt-1",
              { flex: open }
            )}
          >
            {children ? (
              <div
                className={SubframeUtils.twClassNames(
                  "flex w-full flex-col items-start gap-0.5",
                  {
                    hidden:
                      state === "create-new" ||
                      state === "loading" ||
                      state === "no-results",
                  }
                )}
              >
                {children}
              </div>
            ) : null}
            <div
              className={SubframeUtils.twClassNames(
                "hidden w-full items-center gap-2 px-2 py-3",
                { flex: state === "no-results" }
              )}
            >
              <FeatherSearchX className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary" />
              {emptyText ? (
                <span className="text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-tertiary">
                  {emptyText}
                </span>
              ) : null}
            </div>
            <div
              className={SubframeUtils.twClassNames(
                "hidden w-full items-center gap-2 px-2 py-3",
                { flex: state === "loading" }
              )}
            >
              <FeatherLoader className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary animate-spin" />
              {loadingText ? (
                <span className="text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-tertiary">
                  {loadingText}
                </span>
              ) : null}
            </div>
            <div
              className={SubframeUtils.twClassNames(
                "hidden w-full items-center gap-2 rounded-sm px-2 py-2 cursor-pointer hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
                { flex: state === "create-new" }
              )}
            >
              <FeatherPlus className="text-body-default-regular-0 font-body-default-regular-0 text-icon-feedback-information" />
              {createLabel ? (
                <span className="grow shrink-0 basis-0 text-body-default-medium-0 font-body-default-medium-0 text-text-feedback-information">
                  {createLabel}
                </span>
              ) : null}
            </div>
          </div>
        </div>
      </div>
    );
  }
);

export const Combobox = Object.assign(ComboboxRoot, {
  Chip,
  Item,
  AddItem,
});