/*! * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved. * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") * * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * * See the License for the specific language governing permissions and limitations under the License. */ import { ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, ReactElement } from "react"; import { FieldComponentProps } from "./FieldComponentProps.js"; import { HtmlProps } from "./HtmlProps.js"; import { FocusHandle } from "./inputUtils.js"; export declare const textFieldTypeValues: readonly ["email", "number", "tel", "text", "url"]; export type TextFieldProps = { /** * This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill */ autoCompleteType?: InputHTMLAttributes["autoComplete"]; /** * The default value. Use when the component is not controlled. */ defaultValue?: string; /** * End `InputAdornment` for this component. */ endAdornment?: string | ReactElement; /** * If `true`, the input receives focus automatically on mount. */ hasInitialFocus?: boolean; /** * Hints at the type of data that might be entered by the user while editing the element or its contents. * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute */ inputMode?: InputHTMLAttributes["inputMode"]; /** * Ref attached to the underlying element. */ inputRef?: React.RefObject; /** * If `true`, the input renders as a multiline textarea. */ isMultiline?: boolean; /** * The label for the `input` element. */ label: string; /** * The maximum value for a `number` input. */ max?: number; /** * The minimum value for a `number` input. */ min?: number; /** * Called when the input loses focus. */ onBlur?: FocusEventHandler; /** * Called when the input value changes. */ onChange?: ChangeEventHandler; /** * Called when the input gains focus. */ onFocus?: FocusEventHandler; /** * The short hint displayed in the `input` before the user enters a value. */ placeholder?: string; /** * Start `InputAdornment` for this component. */ startAdornment?: string | ReactElement; /** * The step interval for a `number` input. */ step?: number; /** * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). * @default "text" */ type?: (typeof textFieldTypeValues)[number]; /** * The value of the `input` element, required for a controlled component. */ value?: string; } & FieldComponentProps & Pick; declare const MemoizedTextField: import("react").MemoExoticComponent["autoComplete"]; /** * The default value. Use when the component is not controlled. */ defaultValue?: string; /** * End `InputAdornment` for this component. */ endAdornment?: string | ReactElement; /** * If `true`, the input receives focus automatically on mount. */ hasInitialFocus?: boolean; /** * Hints at the type of data that might be entered by the user while editing the element or its contents. * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute */ inputMode?: InputHTMLAttributes["inputMode"]; /** * Ref attached to the underlying element. */ inputRef?: React.RefObject; /** * If `true`, the input renders as a multiline textarea. */ isMultiline?: boolean; /** * The label for the `input` element. */ label: string; /** * The maximum value for a `number` input. */ max?: number; /** * The minimum value for a `number` input. */ min?: number; /** * Called when the input loses focus. */ onBlur?: FocusEventHandler; /** * Called when the input value changes. */ onChange?: ChangeEventHandler; /** * Called when the input gains focus. */ onFocus?: FocusEventHandler; /** * The short hint displayed in the `input` before the user enters a value. */ placeholder?: string; /** * Start `InputAdornment` for this component. */ startAdornment?: string | ReactElement; /** * The step interval for a `number` input. */ step?: number; /** * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). * @default "text" */ type?: (typeof textFieldTypeValues)[number]; /** * The value of the `input` element, required for a controlled component. */ value?: string; } & FieldComponentProps & Pick & import("react").RefAttributes>>; export { MemoizedTextField as TextField }; //# sourceMappingURL=TextField.d.ts.map