@veracity/vui/dist/textField/textField.types.d.ts

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { ChangeEventHandler, FocusEventHandler, PropsOf } from "../utils/types.js";
import "../utils/index.js";
import { ThemingProps } from "../theme/types.js";
import "../theme/index.js";
import { SystemProps } from "../system/system.js";
import "../system/index.js";
import { IconProp } from "../icon/icon.types.js";
import "../icon/index.js";
import { PProps } from "../p/p.types.js";
import "../p/index.js";
import { JSX, ReactNode, RefObject } from "react";
//#region src/textField/textField.types.d.ts
type AutoCompleteProps = {
  /** List of autocomplete options. */
  autoCompleteOptions?: string[];
  /** Maximum autoComplete container height in px. */
  autoCompleteMaxHeight?: number;
  /** The input children. */
  children: JSX.Element;
  /** Filter helper function. */
  filterAutoCompleteOptions: (value: string, index: number, array: string[]) => boolean;
  onAutoCompleteSelect: (value: string) => void;
};
type TextFieldHelpTextProps = PProps & {
  isError?: boolean;
};
type TextFieldType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
type TextFieldProps = Omit<SystemProps, 'resize'> & ThemingProps<'Input'> & {
  /** Allow to remove field content with clear icon. Ignored when `rows > 1`. */
  allowClear?: boolean;
  /** Passed to the inner field. */
  autoComplete?: string;
  /** List of autocomplete options. Ignored when `rows > 1`. */
  autoCompleteOptions?: string[];
  /** Maximum autoComplete container height in px. Ignored when `rows > 1`. */
  autoCompleteMaxHeight?: number;
  /** Passed to the inner field. */
  autoFocus?: boolean;
  /** ARIA label for the field element. */
  ariaLabel?: string;
  /** Children are disabled for this component; use `field` to render custom content. */
  children?: never;
  /** Passed to the inner field when `rows > 1`. */
  cols?: number;
  /** Passed to the inner field. */
  defaultValue?: number | string;
  /** Passed to the inner field. */
  disabled?: boolean;
  /** Socket displaying error text below the field. */
  errorText?: ReactNode;
  /** Socket displaying help text below the field. */
  helpText?: ReactNode;
  /** Icon displayed on the leading (left) side of the field. Ignored when `rows > 1`. */
  startIcon?: IconProp | JSX.Element;
  /** Icon displayed on the trailing (right) side of the field. Ignored when `rows > 1`. */
  endIcon?: IconProp | JSX.Element;
  /** Socket rendering a custom field element, replacing the default input/textarea. */
  field?: ReactNode;
  /** Props object passed to the inner field. */
  fieldProps?: PropsOf<'input', SystemProps> | PropsOf<'textarea', SystemProps>;
  /** Ref passed to the inner field. */
  fieldRef?: RefObject<HTMLInputElement | HTMLTextAreaElement | null> | null;
  /** Socket displaying a custom element on the left. Ignored when `rows > 1`. */
  itemLeft?: ReactNode;
  /** Socket displaying a custom element on the right. Ignored when `rows > 1`. */
  itemRight?: ReactNode;
  /** The label. */
  label?: ReactNode;
  /** Should the label indicates that the field is optional */
  labelMarkOptional?: boolean;
  /** Adds a tooltip with the text inside the label */
  labelTooltipText?: ReactNode;
  /** Passed to the inner field. */
  max?: number | string;
  /** Passed to the inner field. */
  maxLength?: number;
  /** Passed to the inner field. */
  min?: number | string;
  /** Passed to the inner field. */
  minLength?: number;
  /** Passed to the inner field. */
  name?: string;
  /** Passed to the inner field. */
  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
  /** Passed to the inner field. */
  onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
  /** Passed to the inner field. */
  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
  /** Passed to the inner field. Ignored when `rows > 1`. */
  pattern?: string;
  /** Passed to the inner field. */
  placeholder?: string;
  /** Passed to the inner field. */
  readOnly?: boolean;
  /** Passed to the inner field. */
  required?: boolean;
  /** Lets the user drag the field to a custom height, down to its initial `rows`-driven height. Only applies when `rows > 1`. */
  resize?: boolean;
  /** Number of visible text lines. `rows > 1` renders a `<textarea>` instead of an `<input>`. */
  rows?: number;
  /** Displays length of the field's value if also using maxLength. */
  showCount?: boolean;
  /** Displays the provided value as plain text with no input element. */
  displayValueOnly?: boolean;
  /** Displays a loading spinner inside the field. Ignored when `rows > 1`. */
  loading?: boolean;
  /** Passed to the inner field. Ignored when `rows > 1`. */
  step?: number;
  /** Passed to the inner field. Ignored when `rows > 1`. */
  type?: TextFieldType;
  /** Passed to the inner field. */
  value?: number | string;
};
//#endregion
export { AutoCompleteProps, TextFieldHelpTextProps, TextFieldProps, TextFieldType };

//# sourceMappingURL=textField.types.d.ts.map