@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 "../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, IconProps } from "../icon/icon.types.js";
import "../icon/index.js";
import { PProps } from "../p/p.types.js";
import "../p/index.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