tesseract/categories/web/choice/react/src/components/ComboBox/index.tsx

import * as React from 'react';
import { TextControl, tailwind } from '@tesseract-design/web-base';
import { useFallbackId } from '@modal-sh/react-utils';

const { tw } = tailwind;

const ComboBoxDerivedElementComponent = 'input' as const;

/**
 * Derived HTML element of the {@link ComboBox} component.
 */
export type ComboBoxDerivedElement = HTMLElementTagNameMap[
  typeof ComboBoxDerivedElementComponent
];

/**
 * Props of the {@link ComboBox} component.
 */
export interface ComboBoxProps extends Omit<React.HTMLProps<ComboBoxDerivedElement>, 'size' | 'type' | 'label' | 'list' | 'inputMode'> {
  /**
   * Short textual description indicating the nature of the component's value.
   */
  label?: React.ReactNode,
  /**
   * Short textual description as guidelines for valid input values.
   */
  hint?: React.ReactNode,
  /**
   * Size of the component.
   */
  size?: TextControl.Size,
  /**
   * Additional description, usually graphical, indicating the nature of the component's value.
   */
  indicator?: React.ReactNode,
  /**
   * Should the component display a border?
   */
  border?: boolean,
  /**
   * Should the component occupy the whole width of its parent?
   */
  block?: boolean,
  /**
   * Type of the component value.
   */
  type?: TextControl.InputType,
  /**
   * Style of the component.
   */
  variant?: TextControl.Variant,
  /**
   * Is the label hidden?
   */
  hiddenLabel?: boolean,
  /**
   * Input mode of the component.
   */
  inputMode?: TextControl.InputMode,
  /**
   * Visual length of the input.
   */
  length?: number,
}

/**
 * Component for inputting textual values.
 *
 * This component supports multiline input and adjusts its layout accordingly.
 */
export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>((
  {
    label,
    hint,
    indicator,
    size = 'medium' as const,
    border = false as const,
    block = false as const,
    type = 'text' as const,
    variant = 'default' as const,
    hiddenLabel = false as const,
    className,
    children,
    inputMode = 'text' as const,
    id: idProp,
    style,
    length,
    ...etcProps
  }: ComboBoxProps,
  forwardedRef,
) => {
  const labelId = React.useId();
  const datalistId = React.useId();
  const id = useFallbackId(idProp);

  let resultInputMode = inputMode as React.HTMLProps<ComboBoxDerivedElement>['inputMode'];
  if (type === 'text' && resultInputMode === 'search') {
    resultInputMode = 'text';
  } else if (type === 'search' && resultInputMode === 'text') {
    resultInputMode = 'search';
  }

  return (
    <>
      <datalist
        id={datalistId}
      >
        {children}
      </datalist>
      <div
        className={tw(
          'relative rounded ring-secondary/50 overflow-hidden group has-[:disabled]:opacity-50',
          'focus-within:ring-4',
          {
            'block': block,
            'inline-block align-middle': !block,
          },
          className,
        )}
        style={style}
        data-testid="base"
      >
        {label && (
          <>
            <label
              data-testid="label"
              id={labelId}
              htmlFor={id}
              className={tw(
                'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold group-focus-within:text-secondary text-primary leading-none bg-negative select-none',
                {
                  'sr-only': hiddenLabel,
                },
                {
                  'pr-1': !indicator,
                },
                {
                  'pr-10': indicator && size === 'small',
                  'pr-12': indicator && size === 'medium',
                  'pr-16': indicator && size === 'large',
                },
              )}
            >
              <span className="w-full whitespace-nowrap h-[1.1em] overflow-hidden text-ellipsis">
                {label}
              </span>
            </label>
            {' '}
          </>
        )}
        <ComboBoxDerivedElementComponent
          {...etcProps}
          size={length}
          ref={forwardedRef}
          id={id}
          aria-labelledby={labelId}
          type={type}
          inputMode={resultInputMode}
          list={datalistId}
          data-testid="input"
          className={tw(
            'bg-negative rounded-inherit w-full peer block font-inherit',
            'focus:outline-0',
            'disabled:opacity-50 disabled:cursor-not-allowed',
            {
              'text-xxs': size === 'small',
              'text-xs': size === 'medium',
            },
            {
              'pl-4': variant === 'default',
              'pl-1.5': variant === 'alternate',
            },
            {
              'pt-4': variant === 'alternate',
            },
            {
              'pr-4': variant === 'default' && !indicator,
              'pr-1.5': variant === 'alternate' && !indicator,
            },
            {
              'pr-10': indicator && size === 'small',
              'pr-12': indicator && size === 'medium',
              'pr-16': indicator && size === 'large',
            },
            {
              'h-10': size === 'small',
              'h-12': size === 'medium',
              'h-16': size === 'large',
            },
          )}
        />
        {hint && (
          <div
            data-testid="hint"
            className={tw(
              'absolute left-0 px-1 pointer-events-none text-xxs leading-none w-full bg-negative select-none',
              {
                'bottom-0 pl-4 pb-1': variant === 'default',
                'top-0.5': variant === 'alternate',
              },
              {
                'pt-2': variant === 'alternate' && size === 'small',
                'pt-3': variant === 'alternate' && size !== 'small',
              },
              {
                'pr-4': !indicator && variant === 'default',
                'pr-1': !indicator && variant === 'alternate',
              },
              {
                'pr-10': indicator && size === 'small',
                'pr-12': indicator && size === 'medium',
                'pr-16': indicator && size === 'large',
              },
            )}
          >
            <div
              className="opacity-50 whitespace-nowrap w-full h-[1.1em] overflow-hidden text-ellipsis"
            >
              {hint}
            </div>
          </div>
        )}
        {indicator && (
          <div
            data-testid="indicator"
            className={tw(
              'text-center flex items-center justify-center aspect-square absolute bottom-0 right-0 pointer-events-none select-none',
              {
                'w-10': size === 'small',
                'w-12': size === 'medium',
                'w-16': size === 'large',
              },
            )}
          >
            {indicator}
          </div>
        )}
        {border && (
          <span
            data-testid="border"
            className="absolute z-[1] inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
          />
        )}
      </div>
    </>
  );
});

ComboBox.displayName = 'ComboBox' as const;

ComboBox.defaultProps = {
  label: undefined,
  hint: undefined,
  indicator: undefined,
  size: 'medium' as const,
  border: false as const,
  block: false as const,
  type: 'text' as const,
  variant: 'default' as const,
  hiddenLabel: false as const,
  inputMode: 'text' as const,
  length: undefined,
};