@fluentui/react-northstar
Version:
A themable React component library.
101 lines (100 loc) • 4.32 kB
TypeScript
import { Accessibility, InputBehaviorProps } from '@fluentui/accessibility';
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { UIComponentProps, ChildrenComponentProps, ShorthandFactory } from '../../utils';
import { SupportedIntrinsicInputProps } from '../../utils/htmlPropsUtils';
import { ShorthandValue, ComponentEventHandler } from '../../types';
import { BoxProps } from '../Box/Box';
import { InputLabel, InputLabelProps, LabelPosition } from './InputLabel';
export interface InputProps extends UIComponentProps, ChildrenComponentProps, SupportedIntrinsicInputProps {
/**
* Accessibility behavior if overridden by the user.
*/
accessibility?: Accessibility<InputBehaviorProps>;
/** A property that will change the icon on the input and clear the input on click on Cancel. */
clearable?: boolean;
/** The default value of the input. */
defaultValue?: string | string[];
/** An Input can be disabled. */
disabled?: boolean;
/** An input can take the width of its container. */
fluid?: boolean;
/** Optional Icon to display inside the Input. */
icon?: ShorthandValue<BoxProps>;
/** An Input with icon can format the icon to appear at the start or at the end of the input field. */
iconPosition?: 'start' | 'end';
/** An input can be used inline with text. */
inline?: boolean;
/** Shorthand for the input component. */
input?: ShorthandValue<BoxProps>;
/** An input can have inverted colors. */
inverted?: boolean;
/**
* Called on change.
*
* @param event - React's original SyntheticEvent.
* @param data - All props and proposed value.
*/
onChange?: ComponentEventHandler<InputProps & {
value: string;
}>;
/** The HTML input type. */
type?: string;
/** (DEPRECATED) Ref for input DOM node. */
inputRef?: React.Ref<HTMLElement>;
/** The value of the input. */
value?: string | number;
/** A label for the input. */
label?: ShorthandValue<InputLabelProps>;
/** Poisition for the label */
labelPosition?: LabelPosition;
/** Shorthand for the wrapper component. */
wrapper?: ShorthandValue<BoxProps>;
/** Input can be required to be valid. */
required?: boolean;
/** Input can have error state */
error?: boolean;
/** Input can have error indicator when error is true */
errorIndicator?: ShorthandValue<BoxProps>;
/** Optional Icon to display inside the Input if required and fulfilled. */
successIndicator?: ShorthandValue<BoxProps>;
/** Indicates whether the successIndicator should be visible. */
showSuccessIndicator?: boolean;
}
export interface InputSlotClassNames {
input: string;
icon: string;
}
export declare const inputClassName = "ui-input";
export declare type InputStylesProps = Required<Pick<InputProps, 'fluid' | 'inverted' | 'inline' | 'disabled' | 'clearable' | 'iconPosition' | 'error' | 'labelPosition'> & {
hasIcon: boolean;
hasValue: boolean;
requiredAndSuccessful: boolean;
}>;
export declare const inputSlotClassNames: InputSlotClassNames;
/**
* An Input is a field used to elicit an input from a user.
*
* @accessibility
* For good screen reader experience set `aria-label` or `aria-labelledby` attribute for input.
*/
export declare const Input: (<TExtendedElementType extends React.ElementType<any> = "input">(props: Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof InputProps> & {
as?: TExtendedElementType;
} & InputProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<InputProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>;
defaultProps?: Partial<InputProps & {
as: "input";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: Omit<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
ref?: React.Ref<HTMLInputElement>;
}, "as" | keyof InputProps> & {
as?: "input";
} & InputProps;
} & {
create: ShorthandFactory<InputProps>;
Label: typeof InputLabel;
};