fix: add isReadOnly props and useRenderProps (#8818)

* add isReadOnly props and useRenderProps

* update

* update

* fix lint, update stories for testing

---------

Co-authored-by: Yihui Liao <[email protected]>

Author: Mr-Heidari

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

@@ -38,7 +38,12 @@ export interface DateFieldRenderProps {
    * Whether the date field is disabled.
    * @selector [data-disabled]
    */
-  isDisabled: boolean
+  isDisabled: boolean,
+  /**
+   * Whether the date field is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean
 }
 export interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 export interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
@@ -81,7 +86,8 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
     values: {
       state,
       isInvalid: state.isInvalid,
-      isDisabled: state.isDisabled
+      isDisabled: state.isDisabled,
+      isReadOnly: state.isReadOnly
     },
     defaultClassName: 'react-aria-DateField'
   });
@@ -110,7 +116,8 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
         ref={ref}
         slot={props.slot || undefined}
         data-invalid={state.isInvalid || undefined}
-        data-disabled={state.isDisabled || undefined} />
+        data-disabled={state.isDisabled || undefined}
+        data-readonly={state.isReadOnly || undefined} />
       <HiddenDateInput
         autoComplete={props.autoComplete}
         name={props.name}
@@ -152,7 +159,8 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
     values: {
       state,
       isInvalid: state.isInvalid,
-      isDisabled: state.isDisabled
+      isDisabled: state.isDisabled,
+      isReadOnly: state.isReadOnly
     },
     defaultClassName: 'react-aria-TimeField'
   });
@@ -181,7 +189,8 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
         ref={ref}
         slot={props.slot || undefined}
         data-invalid={state.isInvalid || undefined}
-        data-disabled={state.isDisabled || undefined} />
+        data-disabled={state.isDisabled || undefined} 
+        data-readonly={state.isReadOnly || undefined} />
     </Provider>
   );
 });

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

@@ -43,6 +43,11 @@ export interface DatePickerRenderProps {
    * @selector [data-disabled]
    */
   isDisabled: boolean,
+  /**
+   * Whether the date picker is read only.
+   * @selector [data-readonly]
+   */
+  isReadOnly: boolean,
   /**
    * Whether the date picker is invalid.
    * @selector [data-invalid]
@@ -130,7 +135,8 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
       isFocusVisible,
       isDisabled: props.isDisabled || false,
       isInvalid: state.isInvalid,
-      isOpen: state.isOpen
+      isOpen: state.isOpen,
+      isReadOnly: props.isReadOnly || false
     },
     defaultClassName: 'react-aria-DatePicker'
   });
@@ -172,6 +178,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         data-invalid={state.isInvalid || undefined}
         data-focus-visible={isFocusVisible || undefined}
         data-disabled={props.isDisabled || undefined}
+        data-readonly={props.isReadOnly || undefined}
         data-open={state.isOpen || undefined} />
       <HiddenDateInput
         autoComplete={props.autoComplete}
@@ -238,7 +245,8 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
       isFocusVisible,
       isDisabled: props.isDisabled || false,
       isInvalid: state.isInvalid,
-      isOpen: state.isOpen
+      isOpen: state.isOpen,
+      isReadOnly: props.isReadOnly || false
     },
     defaultClassName: 'react-aria-DateRangePicker'
   });
@@ -285,6 +293,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
         data-invalid={state.isInvalid || undefined}
         data-focus-visible={isFocusVisible || undefined}
         data-disabled={props.isDisabled || undefined}
+        data-readonly={props.isReadOnly || undefined}
         data-open={state.isOpen || undefined} />
     </Provider>
   );

packages/react-aria-components/stories/DatePicker.stories.tsx

@@ -20,13 +20,41 @@ import './styles.css';
 
 export default {
   title: 'React Aria Components/DatePicker',
-  component: DatePicker
+  component: DatePicker,
+  argTypes: {
+    onChange: {
+      table: {
+        disable: true
+      }
+    },
+    granularity: {
+      control: 'select',
+      options: ['day', 'hour', 'minute', 'second']
+    },
+    isRequired: {
+      control: 'boolean'
+    },
+    isInvalid: {
+      control: 'boolean'
+    },
+    isDisabled: {
+      control: 'boolean'
+    },
+    isReadOnly: {
+      control: 'boolean'
+    },
+    validationBehavior: {
+      control: 'select',
+      options: ['native', 'aria']
+    }
+  }
 } as Meta<typeof DatePicker>;
 
 export type DatePickerStory = StoryFn<typeof DatePicker>;
+export type DateRangePickerStory = StoryFn<typeof DateRangePicker>;
 
-export const DatePickerExample: DatePickerStory = () => (
-  <DatePicker data-testid="date-picker-example">
+export const DatePickerExample: DatePickerStory = (args) => (
+  <DatePicker data-testid="date-picker-example" {...args}>
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex'}}>
       <DateInput className={styles.field}>
@@ -58,8 +86,8 @@ export const DatePickerExample: DatePickerStory = () => (
   </DatePicker>
 );
 
-export const DatePickerTriggerWidthExample: DatePickerStory = () => (
-  <DatePicker data-testid="date-picker-example">
+export const DatePickerTriggerWidthExample: DatePickerStory = (args) => (
+  <DatePicker data-testid="date-picker-example" {...args}>
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex', width: 300}}>
       <DateInput className={styles.field} style={{flex: 1}}>
@@ -93,8 +121,8 @@ export const DatePickerTriggerWidthExample: DatePickerStory = () => (
   </DatePicker>
 );
 
-export const DateRangePickerExample: DatePickerStory = () => (
-  <DateRangePicker data-testid="date-range-picker-example">
+export const DateRangePickerExample: DateRangePickerStory = (args) => (
+  <DateRangePicker data-testid="date-range-picker-example" {...args}>
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex'}}>
       <div className={styles.field}>
@@ -132,8 +160,8 @@ export const DateRangePickerExample: DatePickerStory = () => (
   </DateRangePicker>
 );
 
-export const DateRangePickerTriggerWidthExample: DatePickerStory = () => (
-  <DateRangePicker data-testid="date-range-picker-example">
+export const DateRangePickerTriggerWidthExample: DateRangePickerStory = (args) => (
+  <DateRangePicker data-testid="date-range-picker-example" {...args}>
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex', width: 300}}>
       <div className={styles.field} style={{flex: 1}}>