@react-aria/datepicker 3.4.0 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/datepicker",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,22 +22,22 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.2.0",
-    "@internationalized/number": "^3.2.0",
-    "@internationalized/string": "^3.1.0",
-    "@react-aria/focus": "^3.12.0",
-    "@react-aria/i18n": "^3.7.1",
-    "@react-aria/interactions": "^3.15.0",
-    "@react-aria/label": "^3.5.1",
-    "@react-aria/spinbutton": "^3.4.0",
-    "@react-aria/utils": "^3.16.0",
-    "@react-stately/datepicker": "^3.4.0",
-    "@react-types/button": "^3.7.2",
-    "@react-types/calendar": "^3.2.0",
-    "@react-types/datepicker": "^3.3.0",
-    "@react-types/dialog": "^3.5.1",
-    "@react-types/shared": "^3.18.0",
-    "@swc/helpers": "^0.4.14"
+    "@internationalized/date": "^3.3.0",
+    "@internationalized/number": "^3.2.1",
+    "@internationalized/string": "^3.1.1",
+    "@react-aria/focus": "^3.13.0",
+    "@react-aria/i18n": "^3.8.0",
+    "@react-aria/interactions": "^3.16.0",
+    "@react-aria/label": "^3.6.0",
+    "@react-aria/spinbutton": "^3.5.0",
+    "@react-aria/utils": "^3.18.0",
+    "@react-stately/datepicker": "^3.5.0",
+    "@react-types/button": "^3.7.3",
+    "@react-types/calendar": "^3.3.0",
+    "@react-types/datepicker": "^3.4.0",
+    "@react-types/dialog": "^3.5.3",
+    "@react-types/shared": "^3.18.1",
+    "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9d1ba9bd8ebcd63bf3495ade16d349bcb71795ce"
+  "gitHead": "504e40e0a50c1b20ed0fb3ba9561a263b6d5565e"
 }

package/src/useDateField.ts

@@ -94,7 +94,7 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
   // Pass labels and other information to segments.
   hookData.set(state, {
     ariaLabel: props['aria-label'],
-    ariaLabelledBy: [props['aria-labelledby'], labelProps.id].filter(Boolean).join(' ') || undefined,
+    ariaLabelledBy: [labelProps.id, props['aria-labelledby']].filter(Boolean).join(' ') || undefined,
     ariaDescribedBy: describedBy,
     focusManager
   });

package/src/useDatePicker.ts

@@ -124,6 +124,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       placeholderValue: props.placeholderValue,
       hideTimeZone: props.hideTimeZone,
       hourCycle: props.hourCycle,
+      shouldForceLeadingZeros: props.shouldForceLeadingZeros,
       granularity: props.granularity,
       isDisabled: props.isDisabled,
       isReadOnly: props.isReadOnly,
@@ -138,14 +139,14 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       id: buttonId,
       'aria-haspopup': 'dialog',
       'aria-label': stringFormatter.format('calendar'),
-      'aria-labelledby': `${labelledBy} ${buttonId}`,
+      'aria-labelledby': `${buttonId} ${labelledBy}`,
       'aria-describedby': ariaDescribedBy,
       'aria-expanded': state.isOpen || undefined,
       onPress: () => state.setOpen(true)
     },
     dialogProps: {
       id: dialogId,
-      'aria-labelledby': `${labelledBy} ${buttonId}`
+      'aria-labelledby': `${buttonId} ${labelledBy}`
     },
     calendarProps: {
       autoFocus: true,

package/src/useDateRangePicker.ts

@@ -98,6 +98,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     hideTimeZone: props.hideTimeZone,
     hourCycle: props.hourCycle,
     granularity: props.granularity,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
     isRequired: props.isRequired,
@@ -149,14 +150,14 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       id: buttonId,
       'aria-haspopup': 'dialog',
       'aria-label': stringFormatter.format('calendar'),
-      'aria-labelledby': `${labelledBy} ${buttonId}`,
+      'aria-labelledby': `${buttonId} ${labelledBy}`,
       'aria-describedby': ariaDescribedBy,
       'aria-expanded': state.isOpen || undefined,
       onPress: () => state.setOpen(true)
     },
     dialogProps: {
       id: dialogId,
-      'aria-labelledby': `${labelledBy} ${buttonId}`
+      'aria-labelledby': `${buttonId} ${labelledBy}`
     },
     startFieldProps: {
       ...startFieldProps,

package/src/useDateSegment.ts

@@ -346,7 +346,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
   // This is needed because VoiceOver on iOS does not announce groups.
   let name = segment.type === 'literal' ? '' : displayNames.of(segment.type);
   let labelProps = useLabels({
-    'aria-label': (ariaLabel ? ariaLabel + ' ' : '') + name,
+    'aria-label': `${name}${ariaLabel ? `, ${ariaLabel}` : ''}${ariaLabelledBy ? ', ' : ''}`,
     'aria-labelledby': ariaLabelledBy
   });
 

package/src/useDisplayNames.ts

@@ -16,7 +16,7 @@ import {LocalizedStringDictionary} from '@internationalized/string';
 import {useLocale} from '@react-aria/i18n';
 import {useMemo} from 'react';
 
-type Field = 'era' | 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod' | 'timeZoneName' | 'weekday';
+type Field = Intl.DateTimeFormatPartTypes;
 interface DisplayNames {
   of(field: Field): string
 }