@veracity/vui/dist/input/input.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 { ThemingProps } from "../theme/types.js";
import { SystemProps } from "../system/system.js";
import { IconProp, IconProps } from "../icon/icon.types.js";
import { PProps } from "../p/p.types.js";
import { JSX, ReactNode } from "react";

//#region src/input/input.types.d.ts
type InputInputProps = PropsOf<'input', SystemProps>;
type InputProps = SystemProps & ThemingProps<'Input'> & {
  /** Allow to remove input content with clear icon. */allowClear?: boolean; /** Passed to the inner input. */
  autoComplete?: string; /** List of autocomplete options. */
  autoCompleteOptions?: string[]; /** Maximum autoComplete container height in px. */
  autoCompleteMaxHeight?: number; /** Passed to the inner input. */
  autoFocus?: boolean; /** ARIA label for the input element. */
  ariaLabel?: string; /** Deprecated. Please use variant instead. @deprecated  */
  colorScheme?: 'green' | 'grey' | 'red'; /** Passed to the inner input. */
  defaultValue?: number | string; /** Passed to the inner input. */
  disabled?: boolean; /** Socket displaying error text below an input. */
  errorText?: string | React.ReactNode; /** Socket displaying help text below an input. */
  helpText?: React.ReactNode | string; /** Icon displayed on the leading (left) side of the input. */
  startIcon?: IconProp | JSX.Element; /** Icon displayed on the trailing (right) side of the input. */
  endIcon?: IconProp | JSX.Element; /** Deprecated alias for `startIcon`. @deprecated */
  iconLeft?: IconProp | JSX.Element; /** Deprecated alias for `endIcon`. @deprecated */
  iconRight?: IconProp | JSX.Element; /** Socket rendering a custom input element. */
  input?: React.ReactNode; /** Props object passed to the inner input. */
  inputProps?: InputInputProps; /** Ref passed to the inner input. */
  inputRef?: React.MutableRefObject<HTMLInputElement | null> | null; /** Deprecated. Please use variant="red" and/or state="error" instead. @deprecated*/
  isInvalid?: boolean; /** Socket displaying a custom element on the left. */
  itemLeft?: React.ReactNode; /** Socket displaying a custom element on the right. */
  itemRight?: React.ReactNode; /** The label. */
  label?: string | React.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 input. */
  max?: number | string; /** Passed to the inner input. */
  maxLength?: number; /** Passed to the inner input. */
  min?: number | string; /** Passed to the inner input. */
  minLength?: number; /** Passed to the inner input. */
  name?: string; /** Passed to the inner input. */
  onBlur?: FocusEventHandler; /** Passed to the inner input. */
  onChange?: ChangeEventHandler; /** Passed to the inner input. */
  onFocus?: FocusEventHandler; /** Passed to the inner input. */
  pattern?: string; /** Passed to the inner input. */
  placeholder?: string; /** Passed to the inner input. */
  readOnly?: boolean; /** Passed to the inner input. */
  required?: boolean; /** Displays length of input value if also using maxLength. */
  showCount?: boolean; /** Displays the provided value. */
  displayValueOnly?: boolean; /** Modifies Input style and content based on the given state. */
  state?: InputState; /** Object definition of styles and content for each state. */
  stateMapping?: InputStateMapping; /** Passed to the inner input. */
  step?: number; /** Passed to the inner input. */
  type?: InputType; /** Passed to the inner input. */
  value?: number | string;
};
type AutoCompletePopoverProps = {
  /** 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 HelpTextProps = PProps & {
  isError?: boolean;
};
type InputState = 'default' | 'error' | 'loading' | 'success';
type InputStateMapping = Record<string, {
  variant?: InputProps['variant'];
  iconProps: IconProps;
}>;
type InputType = 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
//#endregion
export { AutoCompletePopoverProps, HelpTextProps, InputInputProps, InputProps, InputState, InputStateMapping, InputType };

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