tesseract-design
/
tesseract


			
				
					
						
						
							
							import * as React from 'react';
import * as TextControlBase from '@tesseract-design/web-base-textcontrol';

export type PhoneNumberInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' | 'style'> & {
  /**
   * 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?: TextControlBase.TextControlSize,
  /**
   * 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,
  /**
   * Style of the component.
   */
  style?: TextControlBase.TextControlStyle,
  /**
   * Is the label hidden?
   */
  hiddenLabel?: boolean,
}

/**
 * Component for inputting phone number values.
 */
export const PhoneNumberInput = React.forwardRef<HTMLInputElement, PhoneNumberInputProps>(
  (
    {
      label = '',
      hint = '',
      indicator = null,
      size = TextControlBase.TextControlSize.MEDIUM,
      border = false,
      block = false,
      style = TextControlBase.TextControlStyle.DEFAULT,
      hiddenLabel = false,
      type: _type,
      className: _className,
      placeholder: _placeholder,
      as: _as,
      ...etcProps
    }: PhoneNumberInputProps,
    ref,
  ) => {
    const styleArgs = React.useMemo<TextControlBase.TextControlBaseArgs>(() => ({
      block,
      border,
      size,
      indicator: Boolean(indicator),
      style,
      resizable: false,
      predefinedValues: false,
    }), [block, border, size, indicator, style]);

    return (
      <div
        className={TextControlBase.Root(styleArgs)}
      >
        <input
          {...etcProps}
          className={TextControlBase.Input(styleArgs)}
          ref={ref}
          aria-label={label}
          type="tel"
          data-testid="input"
        />
        {
          border && (
            <span
              data-testid="border"
            />
          )
        }
        {
          label && !hiddenLabel && (
            <div
              data-testid="label"
              className={TextControlBase.LabelWrapper(styleArgs)}
            >
              {label}
            </div>
          )
        }
        {hint && (
          <div
            className={TextControlBase.HintWrapper(styleArgs)}
            data-testid="hint"
          >
            <div
              className={TextControlBase.Hint()}
            >
              {hint}
            </div>
          </div>
        )}
        {indicator && (
          <div
            className={TextControlBase.IndicatorWrapper(styleArgs)}
          >
            {indicator}
          </div>
        )}
      </div>
    );
  }
);

PhoneNumberInput.displayName = 'PhoneNumberInput';