import type * as React from 'react'; import type { Properties } from 'csstype'; import type { Override } from '../helpers/overrides'; import type { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constants'; export type Adjoined = keyof typeof ADJOINED; export type Size = keyof typeof SIZE; export type StateType = keyof typeof STATE_CHANGE_TYPE; export type InternalState = { /** Renders UI in 'focus' state */ isFocused?: boolean; /** Renders input in 'masked' state if type equals "password" */ isMasked?: boolean; /** Tracks if focus should be visible on the clear button. */ isFocusVisibleForClear?: boolean; /** Tracks if focus should be visible on the mask toggle button. */ isFocusVisibleForMaskToggle?: boolean; }; export type State = { value?: string | number; }; export type StateReducer = (stateType: StateType, nextState: State, currentState: State) => State; export type SharedProps = { /** Renders UI in 'focus' state */ $isFocused?: boolean; /** Renders UI in 'readOnly' state */ $isReadOnly?: boolean; /** Renders UI in 'disabled' state */ $disabled?: boolean; /** Renders UI in 'error' state */ $error?: boolean; /** Renders UI in 'positive' state */ $positive?: boolean; /** Defines styles for inputs that are grouped with other controls. */ $adjoined: Adjoined; /** Renders UI in provided size. */ $size: Size; /** Renders UI in 'required' state */ $required?: boolean; $resize?: Properties['resize']; $position?: keyof typeof ENHANCER_POSITION; /** Defines if has a clearable or MaskToggleButton at the end */ $hasIconTrailing?: boolean; }; export type BaseInputOverrides = { InputContainer?: Override; Input?: Override; Before?: Override; After?: Override; ClearIcon?: Override; ClearIconContainer?: Override; MaskToggleButton?: Override; MaskToggleShowIcon?: Override; MaskToggleHideIcon?: Override; }; export type InputOverrides = { Root?: Override; StartEnhancer?: Override; EndEnhancer?: Override; } & BaseInputOverrides; export type BaseInputProps = { 'aria-activedescendant'?: string; 'aria-autocomplete'?: string; 'aria-controls'?: string; /** Id of element which contains a related error message */ 'aria-errormessage'?: string; /** Sets aria-haspopup attribute. */ 'aria-haspopup'?: string; /** Sets aria-label attribute. */ 'aria-label'?: string; /** Sets aria-labelledby attribute. */ 'aria-labelledby'?: string; /** Sets aria-describedby attribute. */ 'aria-describedby'?: string; /** Defines styles for inputs that are grouped with other controls. */ adjoined?: Adjoined; /** Determines if browser should provide value suggestions. */ autoComplete?: string; /** If true the input will be focused on the first mount. */ autoFocus?: boolean; /** Renders component in 'disabled' state. */ disabled?: boolean; /** Renders component in 'error' state. */ error?: boolean; /** Renders component in 'positive' state. */ positive?: boolean; /** A regex that is used to validate the value of the input on form submission. The Input component must be wrapped in a form element */ pattern?: string; /** Id attribute value to be added to the input element and as a label's for attribute value. */ id?: string; 'data-baseweb'?: string; /** A hint as to the type of data that might be entered by the user while editing the element or its contents. */ inputMode?: string; /** A ref to access an input element. */ inputRef?: React.RefObject; name?: string; onBlur?: (e: React.FocusEvent) => void; onChange?: (e: React.ChangeEvent) => void; onKeyDown?: (e: React.KeyboardEvent) => void; onKeyPress?: (e: React.KeyboardEvent) => void; onKeyUp?: (e: React.KeyboardEvent) => void; onFocus?: (e: React.FocusEvent) => void; /** If true, adds a clear value icon button to the end of the input container. */ clearable?: boolean; /** If undefined or true, clears the input when the Escape button is pressed with the input focused. True by default. */ clearOnEscape?: boolean; maxLength?: number; onClear?: (e: React.SyntheticEvent) => void; overrides?: BaseInputOverrides; placeholder?: string; /** Renders component in 'required' state. */ required?: boolean; resize?: Properties['resize']; /** Input role attribute. */ role?: string; /** Renders component in provided size. */ size?: Size; /** Input type attribute. */ type?: string; /** Input value attribute. */ value?: string | number; rows?: number; /** min value when used as input type=number */ min?: number; /** max value when used as input type=number */ max?: number; /** step value when used as input type=number */ step?: number | 'any'; /** Renders component in 'readOnly' state. */ readOnly?: boolean; }; export type InputProps = { overrides?: InputOverrides; /** An input helper rendered before and attached to the input field. */ startEnhancer?: React.ReactNode | ((props: SharedProps) => React.ReactNode); /** An input helper rendered after and attached to the input field. */ endEnhancer?: React.ReactNode | ((props: SharedProps) => React.ReactNode); /** Handler for the `focus` event. */ onFocus?: (e: React.FocusEvent) => void; /** Handler for the `blur` event. */ onBlur?: (e: React.FocusEvent) => void; } & BaseInputProps; export type MaskedInputProps = Partial<{ /** See mask examples here: https://github.com/sanniassin/react-input-mask */ mask?: string; /** Character to render for unfilled mask element. */ maskChar?: string; } & InputProps>; export type StatefulContainerChildrenProps = { onChange: (e: React.ChangeEvent) => void; /** If true, adds a clear value icon button to the end of the input container. */ clearable?: boolean; } & StatefulInputProps; export type StatefulContainerProps = { children: (props: StatefulContainerChildrenProps) => React.ReactNode; /** Initial state of an uncontrolled input component. */ initialState?: State; /** A state change handler. Used to override default state transitions. */ stateReducer?: StateReducer; onChange?: (e: React.ChangeEvent) => void; /** If true, adds a clear value icon button to the end of the input container. */ clearable?: boolean; } & { overrides?: InputOverrides; } & Omit; type FullStProps = InputProps & StatefulContainerProps; export type StInputPropsDiff = Omit; export type StatefulInputProps = { overrides?: InputOverrides; } & StInputPropsDiff; export {};