feat: Add isReadOnly render prop to ComboBox and NumberField (adobe#9892)

Author: devongovett

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

@@ -68,7 +68,12 @@ export interface ComboBoxRenderProps {
    * Whether the combobox is required.
    * @selector [data-required]
    */
-  isRequired: boolean
+  isRequired: boolean,
+  /**
+   * Whether the combobox is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean
 }
 
 export interface ComboBoxProps<T extends object, M extends SelectionMode = 'single'> extends Omit<AriaComboBoxProps<T, M>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
@@ -97,7 +102,7 @@ export const ComboBoxStateContext = createContext<ComboBoxState<any, SelectionMo
  */
 export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object, M extends SelectionMode = 'single'>(props: ComboBoxProps<T, M>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ComboBoxContext);
-  let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;
+  let {children, isDisabled = false, isInvalid = false, isRequired = false, isReadOnly = false} = props;
   let content = useMemo(() => (
     <ListBoxContext.Provider value={{items: props.items ?? props.defaultItems}}>
       {typeof children === 'function'
@@ -106,11 +111,12 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
           isDisabled,
           isInvalid,
           isRequired,
-          defaultChildren: null
+          defaultChildren: null,
+          isReadOnly
         })
         : children}
     </ListBoxContext.Provider>
-  ), [children, isDisabled, isInvalid, isRequired, props.items, props.defaultItems]);
+  ), [children, isDisabled, isInvalid, isRequired, isReadOnly, props.items, props.defaultItems]);
 
   return (
     <CollectionBuilder content={content}>
@@ -200,8 +206,9 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
     isOpen: state.isOpen,
     isDisabled: props.isDisabled || false,
     isInvalid: validation.isInvalid || false,
-    isRequired: props.isRequired || false
-  }), [state.isOpen, props.isDisabled, validation.isInvalid, props.isRequired]);
+    isRequired: props.isRequired || false,
+    isReadOnly: props.isReadOnly || false
+  }), [state.isOpen, props.isDisabled, validation.isInvalid, props.isRequired, props.isReadOnly]);
 
   let renderProps = useRenderProps({
     ...props,
@@ -262,6 +269,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
         data-focused={state.isFocused || undefined}
         data-open={state.isOpen || undefined}
         data-disabled={props.isDisabled || undefined}
+        data-readonly={props.isReadOnly || undefined}
         data-invalid={validation.isInvalid || undefined}
         data-required={props.isRequired || undefined}>
         {renderProps.children}

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

@@ -50,6 +50,11 @@ export interface NumberFieldRenderProps {
    * @selector [data-invalid]
    */
   isInvalid: boolean,
+  /**
+   * Whether the number field is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
   /**
    * Whether the number field is required.
    * @selector [data-required]
@@ -111,7 +116,8 @@ export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function
       state,
       isDisabled: props.isDisabled || false,
       isInvalid: validation.isInvalid || false,
-      isRequired: props.isRequired || false
+      isRequired: props.isRequired || false,
+      isReadOnly: props.isReadOnly || false
     },
     defaultClassName: 'react-aria-NumberField'
   });
@@ -146,6 +152,7 @@ export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         ref={ref}
         slot={props.slot || undefined}
         data-disabled={props.isDisabled || undefined}
+        data-readonly={props.isReadOnly || undefined}
         data-required={props.isRequired || undefined}
         data-invalid={validation.isInvalid || undefined} />
       {props.name && <input type="hidden" name={props.name} form={props.form} value={isNaN(state.numberValue) ? '' : state.numberValue} disabled={props.isDisabled || undefined} />}

packages/react-aria-components/test/ComboBox.test.js

@@ -937,4 +937,16 @@ describe('ComboBox', () => {
     expect(comboboxTester.combobox).toHaveFocus();
     expect(onOpenChange).toHaveBeenCalledTimes(1);
   });
+
+  it('should support read-only state', async () => {
+    let {getByRole, rerender} = render(
+      <TestComboBox />
+    );
+
+    let input = getByRole('combobox');
+
+    expect(input.closest('.react-aria-ComboBox')).not.toHaveAttribute('data-readonly');
+    rerender(<TestComboBox isReadOnly />);
+    expect(input.closest('.react-aria-ComboBox')).toHaveAttribute('data-readonly');
+  });
 });

packages/react-aria-components/test/NumberField.test.js

@@ -120,6 +120,18 @@ describe('NumberField', () => {
     expect(group).not.toHaveClass('focus');
   });
 
+  it('should support read-only state', async () => {
+    let {getByRole, rerender} = render(
+      <TestNumberField />
+    );
+
+    let input = getByRole('textbox');
+
+    expect(input.closest('.react-aria-NumberField')).not.toHaveAttribute('data-readonly');
+    rerender(<TestNumberField isReadOnly />);
+    expect(input.closest('.react-aria-NumberField')).toHaveAttribute('data-readonly');
+  });
+
   it('should support render props', () => {
     let {getByRole} = render(
       <NumberField defaultValue={1024} minValue={300} maxValue={1400}>