-
+
{showTimeField && (
{Array.from({length: visibleMonths}).map((_, i) => (
@@ -103,7 +104,7 @@ export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
{isInvalid && (
- {errorMessage || stringFormatter.format('invalidSelection', {selectedCount: 2})}
+ {errorMessage || stringFormatter.format('calendar.invalidSelection', {selectedCount: 2})}
)}
diff --git a/packages/@react-spectrum/s2/src/TimeField.tsx b/packages/@react-spectrum/s2/src/TimeField.tsx
index 31b6e7797a3..e294b4ab2df 100644
--- a/packages/@react-spectrum/s2/src/TimeField.tsx
+++ b/packages/@react-spectrum/s2/src/TimeField.tsx
@@ -21,13 +21,13 @@ import {createContext, forwardRef, ReactElement, Ref, useContext} from 'react';
import {DateInput, DateInputContainer, InvalidIndicator} from './DateField';
import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
import {FieldGroup, FieldLabel, HelpText} from './Field';
-import {forwardRefType, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
import {style} from '../style' with {type: 'macro'};
import {useSpectrumContextProps} from './useSpectrumContextProps';
export interface TimeFieldProps extends
- Omit, 'children' | 'className' | 'style'>,
+ Omit, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
StyleProps,
SpectrumLabelableProps,
HelpTextProps {
diff --git a/packages/@react-spectrum/s2/stories/DateField.stories.tsx b/packages/@react-spectrum/s2/stories/DateField.stories.tsx
index da912c31554..09beb399505 100644
--- a/packages/@react-spectrum/s2/stories/DateField.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/DateField.stories.tsx
@@ -13,6 +13,7 @@
import {Button, Content, ContextualHelp, DateField, Footer, Form, Heading, Link, Text} from '../src';
import {CalendarSwitcher, categorizeArgTypes} from './utils';
import type {Meta, StoryObj} from '@storybook/react';
+import {parseDate, toZoned} from '@internationalized/date';
import {style} from '../style' with {type: 'macro'};
const meta: Meta = {
@@ -47,6 +48,13 @@ export const Example: Story = {
}
};
+export const Zoned: Story = {
+ args: {
+ label: 'Birthday',
+ defaultValue: toZoned(parseDate('2020-02-03'), 'America/New_York')
+ }
+};
+
export const AriaLabel: Story = {
args: {
'aria-label': 'Birthday'
diff --git a/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx b/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
index 6d9faab4b4d..5db96543498 100644
--- a/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/DatePicker.stories.tsx
@@ -14,6 +14,7 @@ import {Button, Content, ContextualHelp, DatePicker, Footer, Form, Heading, Link
import {CalendarSwitcher, categorizeArgTypes} from './utils';
import {fn} from '@storybook/test';
import type {Meta, StoryObj} from '@storybook/react';
+import {parseDate, toZoned} from '@internationalized/date';
import {style} from '../style' with {type: 'macro'};
const meta: Meta = {
@@ -58,6 +59,13 @@ export const Example: Story = {
}
};
+export const Zoned: Story = {
+ args: {
+ label: 'Birthday',
+ defaultValue: toZoned(parseDate('2020-02-03'), 'America/New_York')
+ }
+};
+
export const AriaLabel: Story = {
args: {
'aria-label': 'Birthday'
diff --git a/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx b/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
index 4e025518f41..9773d42e941 100644
--- a/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/DateRangePicker.stories.tsx
@@ -14,6 +14,7 @@ import {Button, Content, ContextualHelp, DateRangePicker, Footer, Form, Heading,
import {CalendarSwitcher, categorizeArgTypes} from './utils';
import {fn} from '@storybook/test';
import type {Meta, StoryObj} from '@storybook/react';
+import {parseDate, toZoned} from '@internationalized/date';
import {style} from '../style' with {type: 'macro'};
const meta: Meta = {
@@ -58,6 +59,13 @@ export const Example: Story = {
}
};
+export const Zoned: Story = {
+ args: {
+ label: 'Reservation dates',
+ defaultValue: {start: toZoned(parseDate('2020-02-03'), 'America/New_York'), end: toZoned(parseDate('2020-02-05'), 'America/Los_Angeles')}
+ }
+};
+
export const AriaLabel: Story = {
args: {
'aria-label': 'Reservation dates'
diff --git a/packages/react-aria-components/src/Calendar.tsx b/packages/react-aria-components/src/Calendar.tsx
index ffe9c1f4234..4867ae9ce80 100644
--- a/packages/react-aria-components/src/Calendar.tsx
+++ b/packages/react-aria-components/src/Calendar.tsx
@@ -387,6 +387,7 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
{...mergeProps(DOMProps, gridProps)}
ref={ref}
style={props.style}
+ cellPadding={0}
className={props.className ?? 'react-aria-CalendarGrid'}>
{typeof props.children !== 'function'
? props.children
@@ -507,7 +508,6 @@ export const CalendarCell = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
let state = calendarState ?? rangeCalendarState!;
let {startDate: currentMonth} = useContext(InternalCalendarGridContext) ?? {startDate: state.visibleRange.start};
let isOutsideMonth = !isSameMonth(currentMonth, date);
- // TODO: check api with team, this seemed useful though
let istoday = isToday(date, state.timeZone);
let buttonRef = useRef(null);
diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx
index 740929cb9b0..436321e0a60 100644
--- a/packages/react-aria-components/src/DatePicker.tsx
+++ b/packages/react-aria-components/src/DatePicker.tsx
@@ -74,7 +74,7 @@ export const DatePickerStateContext = createContext(null
export const DateRangePickerStateContext = createContext(null);
// Contexts to clear inside the popover.
-const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext, OverlayTriggerStateContext];
+const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext];
/**
* A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
@@ -173,7 +173,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
data-focus-visible={isFocusVisible || undefined}
data-disabled={props.isDisabled || undefined}
data-open={state.isOpen || undefined} />
- = {
title: 'React Aria Components/TagGroup',
diff --git a/packages/react-aria-components/stories/TextField.stories.tsx b/packages/react-aria-components/stories/TextField.stories.tsx
index b725932ddf4..3d56f10e81e 100644
--- a/packages/react-aria-components/stories/TextField.stories.tsx
+++ b/packages/react-aria-components/stories/TextField.stories.tsx
@@ -15,6 +15,7 @@ import {classNames} from '@react-spectrum/utils';
import {Meta, StoryFn} from '@storybook/react';
import React from 'react';
import styles from '../example/index.css';
+import './styles.css';
export default {
title: 'React Aria Components/TextField',
diff --git a/packages/react-aria-components/stories/TimeField.stories.tsx b/packages/react-aria-components/stories/TimeField.stories.tsx
index 456d68999a0..593f94660ff 100644
--- a/packages/react-aria-components/stories/TimeField.stories.tsx
+++ b/packages/react-aria-components/stories/TimeField.stories.tsx
@@ -15,6 +15,7 @@ import {DateInput, DateSegment, Label, TimeField} from 'react-aria-components';
import {Meta, StoryFn} from '@storybook/react';
import React from 'react';
import styles from '../example/index.css';
+import './styles.css';
export default {
title: 'React Aria Components/TimeField',
diff --git a/packages/react-aria-components/stories/ToggleButton.stories.tsx b/packages/react-aria-components/stories/ToggleButton.stories.tsx
index da80442b3fa..874285887d1 100644
--- a/packages/react-aria-components/stories/ToggleButton.stories.tsx
+++ b/packages/react-aria-components/stories/ToggleButton.stories.tsx
@@ -16,6 +16,7 @@ import {Meta, StoryFn} from '@storybook/react';
import React, {useState} from 'react';
import styles from '../example/index.css';
import {ToggleButton} from 'react-aria-components';
+import './styles.css';
export default {
title: 'React Aria Components/ToggleButton',
diff --git a/packages/react-aria-components/stories/Toolbar.stories.tsx b/packages/react-aria-components/stories/Toolbar.stories.tsx
index 557db3a0119..dbd3abbd2d1 100644
--- a/packages/react-aria-components/stories/Toolbar.stories.tsx
+++ b/packages/react-aria-components/stories/Toolbar.stories.tsx
@@ -16,6 +16,7 @@ import {Meta, StoryObj} from '@storybook/react';
import {Orientation} from 'react-stately';
import React from 'react';
import styles from '../example/index.css';
+import './styles.css';
export default {
title: 'React Aria Components/Toolbar',
diff --git a/packages/react-aria-components/stories/Tooltip.stories.tsx b/packages/react-aria-components/stories/Tooltip.stories.tsx
index dc45108d691..8acfc5cc616 100644
--- a/packages/react-aria-components/stories/Tooltip.stories.tsx
+++ b/packages/react-aria-components/stories/Tooltip.stories.tsx
@@ -13,6 +13,7 @@
import {Button, OverlayArrow, Tooltip, TooltipTrigger} from 'react-aria-components';
import {Meta, StoryFn, StoryObj} from '@storybook/react';
import React, {JSX} from 'react';
+import './styles.css';
export default {
title: 'React Aria Components/Tooltip',
diff --git a/packages/react-aria-components/stories/Tree.stories.tsx b/packages/react-aria-components/stories/Tree.stories.tsx
index 57d857b079d..4a5369ed429 100644
--- a/packages/react-aria-components/stories/Tree.stories.tsx
+++ b/packages/react-aria-components/stories/Tree.stories.tsx
@@ -19,6 +19,7 @@ import React, {JSX, ReactNode, useCallback, useState} from 'react';
import styles from '../example/index.css';
import {TreeLoadMoreItem} from '../src/Tree';
import {useAsyncList, useListData, useTreeData} from '@react-stately/data';
+import './styles.css';
export default {
title: 'React Aria Components/Tree',
diff --git a/starters/docs/.yarn/install-state.gz b/starters/docs/.yarn/install-state.gz
index b665a798028..3d135806621 100644
Binary files a/starters/docs/.yarn/install-state.gz and b/starters/docs/.yarn/install-state.gz differ
diff --git a/starters/docs/src/ColorPicker.tsx b/starters/docs/src/ColorPicker.tsx
index 4b05eb47a69..6e6c83f6715 100644
--- a/starters/docs/src/ColorPicker.tsx
+++ b/starters/docs/src/ColorPicker.tsx
@@ -27,7 +27,7 @@ export function ColorPicker({ label, children, ...props }: ColorPickerProps) {
{label}
-
+
{children || (
<>
(