[pull] main from adobe:main

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}}>

starters/docs/src/InputGroup.tsx

@@ -14,9 +14,9 @@ export function InputGroup(props: InputGroupProps) {
       {props.label && <span id={id}>{props.label}</span>}
       <Group {...props} aria-labelledby={id}>
         {composeRenderProps(props.children, (children, renderProps) => (
-          <InputContext value={{disabled: renderProps.isDisabled}}>
+          <InputContext.Provider value={{disabled: renderProps.isDisabled}}>
             {children}
-          </InputContext>
+          </InputContext.Provider>
         ))}
       </Group>
     </div>

starters/docs/src/Toolbar.tsx

@@ -4,8 +4,8 @@ import './Toolbar.css';
 
 export function Toolbar(props: ToolbarProps) {
   return (
-    <ToggleButtonGroupContext value={{orientation: props.orientation}}>
+    <ToggleButtonGroupContext.Provider value={{orientation: props.orientation}}>
       <RACToolbar {...props} />
-    </ToggleButtonGroupContext>
+    </ToggleButtonGroupContext.Provider>
   );
 }

starters/docs/stories/DisclosureGroup.stories.tsx

@@ -1,5 +1,5 @@
 import {DisclosureGroup} from '../src/DisclosureGroup';
-import {Disclosure} from '../src/Disclosure';
+import {Disclosure, DisclosureHeader, DisclosurePanel} from '../src/Disclosure';
 
 import type {Meta, StoryFn} from '@storybook/react';
 
@@ -16,11 +16,17 @@ type Story = StoryFn<typeof DisclosureGroup>;
 
 export const Example: Story = (args) => (
   <DisclosureGroup {...args} style={{width: '400px'}}>
-    <Disclosure id="personal" title="Personal Information">
-      <p>Personal information form here.</p>
+    <Disclosure id="personal">
+      <DisclosureHeader>Personal Information</DisclosureHeader>
+      <DisclosurePanel>
+        <p>Personal information form here.</p>
+      </DisclosurePanel>
     </Disclosure>
-    <Disclosure id="billing" title="Billing Address">
-      <p>Billing address form here.</p>
+    <Disclosure id="billing">
+      <DisclosureHeader>Billing Address</DisclosureHeader>
+      <DisclosurePanel>
+        <p>Billing address form here.</p>
+      </DisclosurePanel>
     </Disclosure>
   </DisclosureGroup>
 );