From 1c073813447ec5605e219c89e057bd02a7cadb69 Mon Sep 17 00:00:00 2001 From: Mr-Heidari <154089233+Mr-Heidari@users.noreply.github.com> Date: Mon, 8 Sep 2025 23:30:26 +0330 Subject: [PATCH 1/2] 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 <44729383+yihuiliao@users.noreply.github.com> --- .../react-aria-components/src/DateField.tsx | 19 ++++++-- .../react-aria-components/src/DatePicker.tsx | 13 +++++- .../stories/DatePicker.stories.tsx | 46 +++++++++++++++---- 3 files changed, 62 insertions(+), 16 deletions(-) diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx index 863c4d6df2a..3d144a1dc5b 100644 --- a/packages/react-aria-components/src/DateField.tsx +++ b/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 extends Omit, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes {} export interface TimeFieldProps extends Omit, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps, SlotProps, GlobalDOMAttributes {} @@ -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} /> + data-disabled={state.isDisabled || undefined} + data-readonly={state.isReadOnly || undefined} /> ); }); diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx index 436321e0a60..ba214b10d07 100644 --- a/packages/react-aria-components/src/DatePicker.tsx +++ b/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} /> ); diff --git a/packages/react-aria-components/stories/DatePicker.stories.tsx b/packages/react-aria-components/stories/DatePicker.stories.tsx index 52c84614be4..4838bcffe59 100644 --- a/packages/react-aria-components/stories/DatePicker.stories.tsx +++ b/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; export type DatePickerStory = StoryFn; +export type DateRangePickerStory = StoryFn; -export const DatePickerExample: DatePickerStory = () => ( - +export const DatePickerExample: DatePickerStory = (args) => ( + @@ -58,8 +86,8 @@ export const DatePickerExample: DatePickerStory = () => ( ); -export const DatePickerTriggerWidthExample: DatePickerStory = () => ( - +export const DatePickerTriggerWidthExample: DatePickerStory = (args) => ( + @@ -93,8 +121,8 @@ export const DatePickerTriggerWidthExample: DatePickerStory = () => ( ); -export const DateRangePickerExample: DatePickerStory = () => ( - +export const DateRangePickerExample: DateRangePickerStory = (args) => ( +
@@ -132,8 +160,8 @@ export const DateRangePickerExample: DatePickerStory = () => ( ); -export const DateRangePickerTriggerWidthExample: DatePickerStory = () => ( - +export const DateRangePickerTriggerWidthExample: DateRangePickerStory = (args) => ( +
From ecb05e28d55ccbd37b9aa775cf5afc12d9015bc0 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Mon, 8 Sep 2025 15:04:05 -0500 Subject: [PATCH 2/2] fix verdaccio docs build failures (#8832) --- starters/docs/src/InputGroup.tsx | 4 ++-- starters/docs/src/Toolbar.tsx | 4 ++-- .../docs/stories/DisclosureGroup.stories.tsx | 16 +++++++++++----- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/starters/docs/src/InputGroup.tsx b/starters/docs/src/InputGroup.tsx index e6cb88d102a..80bcbb1dd46 100644 --- a/starters/docs/src/InputGroup.tsx +++ b/starters/docs/src/InputGroup.tsx @@ -14,9 +14,9 @@ export function InputGroup(props: InputGroupProps) { {props.label && {props.label}} {composeRenderProps(props.children, (children, renderProps) => ( - + {children} - + ))}
diff --git a/starters/docs/src/Toolbar.tsx b/starters/docs/src/Toolbar.tsx index 35413a78131..46c4b4819ba 100644 --- a/starters/docs/src/Toolbar.tsx +++ b/starters/docs/src/Toolbar.tsx @@ -4,8 +4,8 @@ import './Toolbar.css'; export function Toolbar(props: ToolbarProps) { return ( - + - + ); } diff --git a/starters/docs/stories/DisclosureGroup.stories.tsx b/starters/docs/stories/DisclosureGroup.stories.tsx index 899d6e61f76..585bac97546 100644 --- a/starters/docs/stories/DisclosureGroup.stories.tsx +++ b/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; export const Example: Story = (args) => ( - -

Personal information form here.

+ + Personal Information + +

Personal information form here.

+ - -

Billing address form here.

+ + Billing Address + +

Billing address form here.

+ );