{"version":3,"file":"SearchField.cjs","names":["_styled","_interopRequireDefault","require","_react","_Field","_i18n","_index","_inputUtils","_OdysseyThemeProvider","_jsxRuntime","e","__esModule","default","searchVariantValues","exports","StyledContainerToEnsureThemeProviderDivIsFullWidth","styled","width","SearchField","forwardRef","ariaDescribedBy","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","tabIndex","testId","translate","value","variant","ref","t","useTranslation","useCallback","event","controlledStateRef","useRef","getControlState","controlledValue","uncontrolledValue","inputValues","useInputValues","controlState","current","renderFieldComponent","jsx","_InputBase2","autoComplete","autoFocus","endAdornment","_InputAdornment2","position","children","_IconButton2","disabled","onClick","size","CloseCircleFilledIcon","inputProps","startAdornment","SearchIcon","type","OdysseyThemeProvider","Field","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","memo","displayName"],"sources":["../../src/SearchField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { IconButton, InputAdornment, InputBase } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport { useTranslation } from \"./i18n.generated/i18n.js\";\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated/index.js\";\nimport { getControlState, useInputValues } from \"./inputUtils.js\";\nimport { OdysseyThemeProvider } from \"./OdysseyThemeProvider.js\";\n\nexport const searchVariantValues = [\"outline\", \"filled\"] as const;\n\nconst StyledContainerToEnsureThemeProviderDivIsFullWidth = styled(\"div\")({\n  width: \"100%\",\n});\n\nexport type SearchFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The value of the `input` element to use when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the input receives focus automatically on mount.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the search field is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\n   */\n  label: string;\n  /**\n   * Called when the input loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Called when the input value changes.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Called when the clear button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Called when the input gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n\n  /** Tab index forwarded to the underlying input element. */\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The value of the `input` element, to use when controlled.\n   */\n  value?: string;\n  /**\n   * Controls the background style of the search field.\n   * - If `'outline'`, white background with a visible border.\n   * - If `'filled'`, gray background, suitable for use on white surfaces.\n   * @default \"outline\"\n   */\n  variant?: (typeof searchVariantValues)[number];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<Pick<HtmlProps, \"ariaDescribedBy\">> &\n  Pick<FieldComponentRenderProps, \"id\">;\n\n/**\n * A search input field with a built-in search icon and a clear button. Supports both controlled and uncontrolled usage, and renders an accessible label visually hidden by default.\n */\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      ariaDescribedBy,\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      tabIndex,\n      testId,\n      translate,\n      value,\n      variant = \"outline\",\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          onChangeProp?.(event);\n        },\n        [onChangeProp],\n      );\n\n    const onClear = useCallback(() => {\n      onClearProp?.();\n    }, [onClearProp]);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      }),\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }: FieldRenderProps) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-ods-type=\"search\"\n          data-ods-variant={variant}\n          data-se={testId}\n          endAdornment={\n            (inputValues?.defaultValue || inputValues?.value) && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label={t(\"clear.text\")}\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{\n            tabIndex,\n          }}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          translate={translate}\n          type=\"search\"\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        t,\n        tabIndex,\n        testId,\n        translate,\n        variant,\n      ],\n    );\n\n    return (\n      <StyledContainerToEnsureThemeProviderDivIsFullWidth>\n        {/* Required for `contrastMode`. */}\n        <OdysseyThemeProvider>\n          <Field\n            ariaDescribedBy={ariaDescribedBy}\n            fieldType=\"single\"\n            hasVisibleLabel={false}\n            id={idOverride}\n            isDisabled={isDisabled}\n            isFullWidth={isFullWidth}\n            isOptional={true}\n            label={label}\n            renderFieldComponent={renderFieldComponent}\n          />\n        </OdysseyThemeProvider>\n      </StyledContainerToEnsureThemeProviderDivIsFullWidth>\n    );\n  },\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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","ignoreList":[]}