@sinchsmb/ui-kit/src/form/types.ts

UI kit for SinchSMB frontend

import { AriaAttributes } from 'react';

import { CommonProps } from '../types';

/** General props that should be supported by ANY form control */
export interface GeneralFormControlProps<Value, OnChangeValue = Value> extends CommonProps {
  ariaLabel?: AriaAttributes['aria-label'];
  ariaErrorMessage?: AriaAttributes['aria-errormessage'];
  ariaDescribedBy?: AriaAttributes['aria-errormessage'];
  ariaInvalid?: AriaAttributes['aria-invalid'];
  ariaRequired?: AriaAttributes['aria-required'];
  /**
   * The id global attribute defines an identifier (ID) which must be unique in
   * the whole document. Its purpose is to identify the element when linking
   * (using a fragment identifier), scripting, or styling (with CSS).
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
   */
  id?: string;
  /**
   * The input control's value.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#value
   */
  value?: Value;
  /**
   * The Boolean required attribute, if present, indicates that the user must specify a value
   * for the input before the owning form can be submitted.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
   */
  required?: boolean;
  /**
   * The Boolean `disabled` attribute, when present, makes the element not mutable, focusable, or even
   * submitted with the form. The user can neither edit nor focus on the control, nor its form control
   * descendants.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled
   */
  disabled?: boolean;
  /**
   * The change event is fired for `<input>` elements when
   * an alteration to the element's value is committed by the user. Unlike the input
   * event, the change event is not necessarily fired for each alteration to an element's value.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
   */
  onChange?: (value: OnChangeValue) => void;
  /**
   * The onblur property of the GlobalEventHandlers mixin is the event handler for processing
   * blur events.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur
   */
  onBlur?: () => void;
}

/**
 * List of attributes and events that allows to elements based on `<input>` and `<textarea>`.
 */
export interface SupportedInputProps<Value = string> extends GeneralFormControlProps<Value> {
  /**
   * The placeholder attribute is a string that provides a brief hint to the user as to
   * what kind of information is expected in the field. It should be a word or
   * short phrase that provides a hint as to the expected type of data,
   * rather than an explanation or prompt. The text must not include carriage returns
   * or line feeds. So for example if a field is expected to capture a user's
   * first name, and its label is "First Name", a suitable placeholder might be "e.g. Mustafa".
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#placeholder
   */
  placeholder?: string;
}