Dashboard/ui/components/DropdownMenuMultiSelect/DropdownMenuMultiSelect.tsx

// @subframe/sync-disable
"use client";
/*
 * Documentation:
 * Accordion — https://app.subframe.com/f023064a5ca0/library?component=Accordion_d2e81e20-863a-4027-826a-991d8910efd9
 * Avatar — https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
 * Checkbox — https://app.subframe.com/f023064a5ca0/library?component=Checkbox_3816e3b5-c48c-499b-b45e-0777c6972523
 * Dropdown Menu multi select — https://app.subframe.com/f023064a5ca0/library?component=Dropdown+Menu+multi+select_8c9fd450-3912-4c8a-abae-4f24e3022a64
 */

import React from "react";
import { FeatherLayers } from "@subframe/core";
import { FeatherSearch } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { Accordion } from "../Accordion";
import { Avatar } from "../Avatar";
import { Checkbox } from "../Checkbox";

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

const DropdownDivider = React.forwardRef<HTMLDivElement, DropdownDividerProps>(
  function DropdownDivider(
    { className, ...otherProps }: DropdownDividerProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full items-start gap-2 px-1 py-1",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
      </div>
    );
  }
);

export interface DropdownItemProps
  extends React.ComponentProps<typeof SubframeCore.DropdownMenu.Item> {
  children?: React.ReactNode;
  icon?: React.ReactNode;
  iconRight?: React.ReactNode;
  image?: string;
  selected?: boolean;
  showCheckbox?: boolean;
  className?: string;
}

const DropdownItem = React.forwardRef<HTMLDivElement, DropdownItemProps>(
  function DropdownItem(
    {
      children,
      icon = null,
      iconRight = null,
      image,
      selected = false,
      showCheckbox = false,
      className,
      ...otherProps
    }: DropdownItemProps,
    ref
  ) {
    return (
      <SubframeCore.DropdownMenu.Item asChild={true} {...otherProps}>
        <div
          className={SubframeUtils.twClassNames(
            "group/744235d7 flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 group/dropdown-item 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}
        >
          <div
            className={SubframeUtils.twClassNames("hidden items-start", {
              flex: showCheckbox,
            })}
          >
            <Checkbox
              checked={selected}
              className="h-auto w-auto flex-none self-stretch"
              label="label"
              description="Description"
              helpText=""
              hideLabel={true}
            />
          </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-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
                { "text-icon-neutral-primary": selected }
              )}
            >
              {icon}
            </SubframeCore.IconWrapper>
          ) : null}
          {children ? (
            <span
              className={SubframeUtils.twClassNames(
                "line-clamp-1 grow shrink-0 basis-0 text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
                { "text-text-neutral-primary": selected }
              )}
            >
              {children}
            </span>
          ) : null}
          {iconRight ? (
            <SubframeCore.IconWrapper
              className={SubframeUtils.twClassNames(
                "text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary",
                { "text-icon-neutral-primary": selected }
              )}
            >
              {iconRight}
            </SubframeCore.IconWrapper>
          ) : null}
        </div>
      </SubframeCore.DropdownMenu.Item>
    );
  }
);

export interface DropdownUserItemProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  image?: string;
  selected?: boolean;
  showCheckbox?: boolean;
  className?: string;
}

const DropdownUserItem = React.forwardRef<
  HTMLDivElement,
  DropdownUserItemProps
>(function DropdownUserItem(
  {
    title,
    subtitle,
    image,
    selected = false,
    showCheckbox = false,
    className,
    ...otherProps
  }: DropdownUserItemProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/ad6eaaaf flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 group/user-item 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 items-start", {
          flex: showCheckbox,
        })}
      >
        <Checkbox
          checked={selected}
          label="label"
          description="Description"
          helpText=""
          hideLabel={true}
        />
      </div>
      <Avatar size="small" image={image}>
        OR
      </Avatar>
      <div className="flex grow shrink-0 basis-0 flex-col items-start">
        {title ? (
          <span className="line-clamp-1 w-full text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
            {title}
          </span>
        ) : null}
        {subtitle ? (
          <span className="line-clamp-1 w-full text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary">
            {subtitle}
          </span>
        ) : null}
      </div>
    </div>
  );
});

export interface DropdownCustomItemProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  selected?: boolean;
  showCheckbox?: boolean;
  size?: "medium" | "small" | "large";
  className?: string;
}

const DropdownCustomItem = React.forwardRef<
  HTMLDivElement,
  DropdownCustomItemProps
>(function DropdownCustomItem(
  {
    children,
    selected = false,
    showCheckbox = false,
    size = "medium",
    className,
    ...otherProps
  }: DropdownCustomItemProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/e2891f3f flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
        {
          "px-2.5 py-3": size === "large",
          "px-1 py-1": size === "small",
          "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}
    >
      <Checkbox
        className={SubframeUtils.twClassNames("hidden", { flex: showCheckbox })}
        label="label"
        description="Description"
        helpText=""
        hideLabel={true}
      />
      {children ? (
        <div className="flex grow shrink-0 basis-0 flex-col items-start">
          {children}
        </div>
      ) : null}
    </div>
  );
});

export interface DropdownNestedItemProps
  extends React.ComponentProps<typeof Accordion> {
  children?: React.ReactNode;
  label?: React.ReactNode;
  icon?: React.ReactNode;
  className?: string;
}

const DropdownNestedItem = React.forwardRef<
  React.ElementRef<typeof Accordion>,
  DropdownNestedItemProps
>(function DropdownNestedItem(
  {
    children,
    label,
    icon = <FeatherLayers />,
    className,
    ...otherProps
  }: DropdownNestedItemProps,
  ref
) {
  return (
    <Accordion
      className={SubframeUtils.twClassNames(
        "group/e3a3cd0a cursor-pointer group/nested-item",
        className
      )}
      variant="ghost"
      trigger={
        <div className="flex h-8 w-full flex-none items-center gap-2 rounded-md px-3 group-hover/e3a3cd0a:bg-surface-neutral-tertiary">
          {icon ? (
            <SubframeCore.IconWrapper className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-primary">
              {icon}
            </SubframeCore.IconWrapper>
          ) : null}
          {label ? (
            <span className="line-clamp-1 grow shrink-0 basis-0 text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
              {label}
            </span>
          ) : null}
          <Accordion.Chevron />
        </div>
      }
      ref={ref}
      {...otherProps}
    >
      {children ? (
        <div className="flex w-full flex-col items-start gap-1">{children}</div>
      ) : null}
    </Accordion>
  );
});

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

const DropdownMenuMultiSelectRoot = React.forwardRef<
  HTMLDivElement,
  DropdownMenuMultiSelectRootProps
>(function DropdownMenuMultiSelectRoot(
  {
    children,
    showSearch = false,
    className,
    ...otherProps
  }: DropdownMenuMultiSelectRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/8c9fd450 flex min-w-[192px] flex-col items-start rounded-md border border-solid border-border-default bg-surface-neutral-secondary px-1 py-1 shadow-lg",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames(
          "hidden w-full flex-col items-start gap-1 pb-1",
          { flex: showSearch }
        )}
      >
        <div className="flex w-full items-center gap-2 rounded-sm bg-surface-neutral-tertiary px-2 py-1.5">
          <FeatherSearch className="text-body-small-regular-150 font-body-small-regular-150 text-icon-neutral-tertiary" />
          <input
            className="min-w-[0px] grow shrink-0 basis-0 self-stretch text-body-small-regular-150 font-body-small-regular-150 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle"
            placeholder="Suchen…"
            value=""
            type="search"
          />
        </div>
        <div className="flex h-px w-full flex-none flex-col items-center gap-2 bg-border-default" />
      </div>
      {children ? (
        <div className="flex w-full flex-col items-start gap-0.5">
          {children}
        </div>
      ) : null}
    </div>
  );
});

export const DropdownMenuMultiSelect = Object.assign(
  DropdownMenuMultiSelectRoot,
  {
    DropdownDivider,
    DropdownItem,
    DropdownUserItem,
    DropdownCustomItem,
    DropdownNestedItem,
  }
);