feat(RAC): SearchField: add readonly/required render props (#9025)

* feat(RAC): SearchField: add readonly/required render props

* Update packages/react-aria-components/src/SearchField.tsx

---------

Co-authored-by: Reid Barber <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

packages/react-aria-components/src/SearchField.tsx

@@ -54,6 +54,16 @@ export interface SearchFieldRenderProps {
    * @selector [data-invalid]
    */
   isInvalid: boolean,
+  /**
+   * Whether the search field is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
+  /**
+   * Whether the search field is required.
+   * @selector [data-required]
+   */
+  isRequired: boolean,
   /**
    * State of the search field.
    */
@@ -99,6 +109,8 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search
       isEmpty: state.value === '',
       isDisabled: props.isDisabled || false,
       isInvalid: validation.isInvalid || false,
+      isReadOnly: props.isReadOnly || false,
+      isRequired: props.isRequired || false,
       state
     },
     defaultClassName: 'react-aria-SearchField'
@@ -115,7 +127,9 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search
       slot={props.slot || undefined}
       data-empty={state.value === '' || undefined}
       data-disabled={props.isDisabled || undefined}
-      data-invalid={validation.isInvalid || undefined}>
+      data-invalid={validation.isInvalid || undefined}
+      data-readonly={props.isReadOnly || undefined}
+      data-required={props.isRequired || undefined}>
       <Provider
         values={[
           [LabelContext, {...labelProps, ref: labelRef}],