/*!
 * 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, HTMLAttributes, InputHTMLAttributes } from "react";
import type { HtmlProps } from "./HtmlProps.js";
import { FieldComponentProps } from "./FieldComponentProps.js";
export declare const searchVariantValues: readonly ["outline", "filled"];
export type SearchFieldProps = {
    /**
     * This prop helps users to fill forms faster, especially on mobile devices.
     * The name can be confusing, as it's more like an autofill.
     * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
     */
    autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
    /**
     * The value of the `input` element to use when uncontrolled.
     */
    defaultValue?: string;
    /**
     * If `true`, the input receives focus automatically on mount.
     */
    hasInitialFocus?: boolean;
    /**
     * The id of the `input` element.
     */
    id?: string;
    /**
     * If `true`, the search field is disabled.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * This label won't show up visually, but it's required for accessibility.
     */
    label: string;
    /**
     * Called when the input loses focus.
     */
    onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
    /**
     * Called when the input value changes.
     */
    onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
    /**
     * Called when the clear button is pressed.
     */
    onClear?: () => void;
    /**
     * Called when the input gains focus.
     */
    onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
    /**
     * The short hint displayed in the `input` before the user enters a value.
     */
    placeholder?: string;
    /** Tab index forwarded to the underlying input element. */
    tabIndex?: HTMLAttributes<HTMLElement>["tabIndex"];
    /**
     * The value of the `input` element, to use when controlled.
     */
    value?: string;
    /**
     * Controls the background style of the search field.
     * - If `'outline'`, white background with a visible border.
     * - If `'filled'`, gray background, suitable for use on white surfaces.
     * @default "outline"
     */
    variant?: (typeof searchVariantValues)[number];
} & Pick<FieldComponentProps, "id" | "isDisabled" | "name" | "isFullWidth"> & Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
declare const MemoizedSearchField: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
    /**
     * This prop helps users to fill forms faster, especially on mobile devices.
     * The name can be confusing, as it's more like an autofill.
     * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
     */
    autoCompleteType?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
    /**
     * The value of the `input` element to use when uncontrolled.
     */
    defaultValue?: string;
    /**
     * If `true`, the input receives focus automatically on mount.
     */
    hasInitialFocus?: boolean;
    /**
     * The id of the `input` element.
     */
    id?: string;
    /**
     * If `true`, the search field is disabled.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * This label won't show up visually, but it's required for accessibility.
     */
    label: string;
    /**
     * Called when the input loses focus.
     */
    onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
    /**
     * Called when the input value changes.
     */
    onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
    /**
     * Called when the clear button is pressed.
     */
    onClear?: () => void;
    /**
     * Called when the input gains focus.
     */
    onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
    /**
     * The short hint displayed in the `input` before the user enters a value.
     */
    placeholder?: string;
    /** Tab index forwarded to the underlying input element. */
    tabIndex?: HTMLAttributes<HTMLElement>["tabIndex"];
    /**
     * The value of the `input` element, to use when controlled.
     */
    value?: string;
    /**
     * Controls the background style of the search field.
     * - If `'outline'`, white background with a visible border.
     * - If `'filled'`, gray background, suitable for use on white surfaces.
     * @default "outline"
     */
    variant?: (typeof searchVariantValues)[number];
} & Pick<FieldComponentProps, "id" | "name" | "isDisabled" | "isFullWidth"> & Pick<HtmlProps, "translate" | "ariaDescribedBy" | "testId"> & import("react").RefAttributes<HTMLInputElement>>>;
export { MemoizedSearchField as SearchField };
//# sourceMappingURL=SearchField.d.ts.map