/*! * 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 { SelectProps as MuiSelectProps } from "@mui/material"; import React, { InputHTMLAttributes, ReactElement } from "react"; import type { HtmlProps } from "./HtmlProps.js"; import { FieldComponentProps } from "./FieldComponentProps.js"; import { FocusHandle } from "./inputUtils.js"; export type NativeSelectOption = { text: string; type?: "heading" | "option"; value?: string; }; export type NativeSelectValueType = HasMultipleChoices extends true ? string[] : string; export type NativeSelectProps, HasMultipleChoices extends boolean> = { /** * 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 options or optgroup elements within the NativeSelect */ children?: ReactElement<"option"> | ReactElement<"optgroup">; /** * The default value of the NativeSelect. Use when component is uncontrolled */ defaultValue?: Value; /** * If `true`, the select allows multiple options to be selected simultaneously. */ hasMultipleChoices?: HasMultipleChoices; /** * Ref attached to the underlying element. */ inputRef?: React.RefObject; /** * @deprecated Use `hasMultipleChoices` instead. */ isMultiSelect?: boolean | undefined; /** * The label text for the NativeSelect */ label: string; /** * Called when the NativeSelect loses focus. */ onBlur?: MuiSelectProps["onBlur"]; /** * Called when the selected value of the NativeSelect changes. */ onChange?: ((event: import("@mui/material").SelectChangeEvent, child: React.ReactNode) => void) | undefined; /** * Called when the NativeSelect gains focus. */ onFocus?: MuiSelectProps["onFocus"]; /** * @deprecated Pass `