@react-aria/calendar - npm Package Compare versions

Comparing version 3.0.0-nightly-c904e066c-240917 to 3.0.0-nightly-cc08a8dbc-250208

dist/types.d.ts

@@ -47,2 +47,6 @@ import { AriaButtonProps } from "@react-types/button";
     weekdayStyle?: 'narrow' | 'short' | 'long';
+    /**
+     * The day that starts the week.
+     */
+    firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
 }
@@ -49,0 +53,0 @@ export interface CalendarGridAria {

dist/useCalendarCell.main.js

@@ -53,3 +53,3 @@ var $df1d8e967e73ec8e$exports = require("./utils.main.js");
     let isSelectable = !isDisabled && !isUnavailable;
-    let isInvalid = state.isValueInvalid && ('highlightedRange' in state ? !state.anchorDate && state.highlightedRange && date.compare(state.highlightedRange.start) >= 0 && date.compare(state.highlightedRange.end) <= 0 : state.value && (0, $cuS6T$internationalizeddate.isSameDay)(state.value, date));
+    let isInvalid = state.isValueInvalid && Boolean('highlightedRange' in state ? !state.anchorDate && state.highlightedRange && date.compare(state.highlightedRange.start) >= 0 && date.compare(state.highlightedRange.end) <= 0 : state.value && (0, $cuS6T$internationalizeddate.isSameDay)(state.value, date));
     if (isInvalid) isSelected = true;
@@ -103,3 +103,3 @@ // For performance, reuse the same date object as before if the new date prop is the same.
     let isRangeBoundaryPressed = (0, $cuS6T$react.useRef)(false);
-    let touchDragTimerRef = (0, $cuS6T$react.useRef)(null);
+    let touchDragTimerRef = (0, $cuS6T$react.useRef)(undefined);
     let { pressProps: pressProps, isPressed: isPressed } = (0, $cuS6T$reactariainteractions.usePress)({
@@ -138,3 +138,3 @@ // When dragging to select a range, we don't want dragging over the original anchor
                     state.setDragging(true);
-                    touchDragTimerRef.current = null;
+                    touchDragTimerRef.current = undefined;
                     state.selectDate(date);
@@ -154,3 +154,3 @@ state.setFocusedDate(date);
             clearTimeout(touchDragTimerRef.current);
-            touchDragTimerRef.current = null;
+            touchDragTimerRef.current = undefined;
         },
@@ -203,3 +203,3 @@ onPress () {
     });
-    let tabIndex = null;
+    let tabIndex = undefined;
     if (!isDisabled) tabIndex = (0, $cuS6T$internationalizeddate.isSameDay)(date, state.focusedDate) ? 0 : -1;
@@ -237,5 +237,5 @@ // Focus the button in the DOM when the state updates.
             role: 'gridcell',
-            'aria-disabled': !isSelectable || null,
-            'aria-selected': isSelected || null,
-            'aria-invalid': isInvalid || null
+            'aria-disabled': !isSelectable || undefined,
+            'aria-selected': isSelected || undefined,
+            'aria-invalid': isInvalid || undefined
         },
@@ -248,7 +248,7 @@ buttonProps: (0, $cuS6T$reactariautils.mergeProps)(pressProps, {
             role: 'button',
-            'aria-disabled': !isSelectable || null,
+            'aria-disabled': !isSelectable || undefined,
             'aria-label': label,
-            'aria-invalid': isInvalid || null,
+            'aria-invalid': isInvalid || undefined,
             'aria-describedby': [
-                isInvalid ? errorMessageId : null,
+                isInvalid ? errorMessageId : undefined,
                 descriptionProps['aria-describedby']
@@ -255,0 +255,0 @@ ].filter(Boolean).join(' ') || undefined,

dist/useCalendarCell.module.js

@@ -47,3 +47,3 @@ import {getEraFormat as $a074e1e2d0f0a665$export$134cbb7fb09a9522, hookData as $a074e1e2d0f0a665$export$653eddfc964b0f8a} from "./utils.module.js";
     let isSelectable = !isDisabled && !isUnavailable;
-    let isInvalid = state.isValueInvalid && ('highlightedRange' in state ? !state.anchorDate && state.highlightedRange && date.compare(state.highlightedRange.start) >= 0 && date.compare(state.highlightedRange.end) <= 0 : state.value && (0, $dm6hl$isSameDay)(state.value, date));
+    let isInvalid = state.isValueInvalid && Boolean('highlightedRange' in state ? !state.anchorDate && state.highlightedRange && date.compare(state.highlightedRange.start) >= 0 && date.compare(state.highlightedRange.end) <= 0 : state.value && (0, $dm6hl$isSameDay)(state.value, date));
     if (isInvalid) isSelected = true;
@@ -97,3 +97,3 @@ // For performance, reuse the same date object as before if the new date prop is the same.
     let isRangeBoundaryPressed = (0, $dm6hl$useRef)(false);
-    let touchDragTimerRef = (0, $dm6hl$useRef)(null);
+    let touchDragTimerRef = (0, $dm6hl$useRef)(undefined);
     let { pressProps: pressProps, isPressed: isPressed } = (0, $dm6hl$usePress)({
@@ -132,3 +132,3 @@ // When dragging to select a range, we don't want dragging over the original anchor
                     state.setDragging(true);
-                    touchDragTimerRef.current = null;
+                    touchDragTimerRef.current = undefined;
                     state.selectDate(date);
@@ -148,3 +148,3 @@ state.setFocusedDate(date);
             clearTimeout(touchDragTimerRef.current);
-            touchDragTimerRef.current = null;
+            touchDragTimerRef.current = undefined;
         },
@@ -197,3 +197,3 @@ onPress () {
     });
-    let tabIndex = null;
+    let tabIndex = undefined;
     if (!isDisabled) tabIndex = (0, $dm6hl$isSameDay)(date, state.focusedDate) ? 0 : -1;
@@ -231,5 +231,5 @@ // Focus the button in the DOM when the state updates.
             role: 'gridcell',
-            'aria-disabled': !isSelectable || null,
-            'aria-selected': isSelected || null,
-            'aria-invalid': isInvalid || null
+            'aria-disabled': !isSelectable || undefined,
+            'aria-selected': isSelected || undefined,
+            'aria-invalid': isInvalid || undefined
         },
@@ -242,7 +242,7 @@ buttonProps: (0, $dm6hl$mergeProps)(pressProps, {
             role: 'button',
-            'aria-disabled': !isSelectable || null,
+            'aria-disabled': !isSelectable || undefined,
             'aria-label': label,
-            'aria-invalid': isInvalid || null,
+            'aria-invalid': isInvalid || undefined,
             'aria-describedby': [
-                isInvalid ? errorMessageId : null,
+                isInvalid ? errorMessageId : undefined,
                 descriptionProps['aria-describedby']
@@ -249,0 +249,0 @@ ].filter(Boolean).join(' ') || undefined,

dist/useCalendarGrid.main.js

@@ -29,3 +29,3 @@ var $df1d8e967e73ec8e$exports = require("./utils.main.js");
 function $a07388a797d86b95$export$cb95147730a423f5(props, state) {
-    let { startDate: startDate = state.visibleRange.start, endDate: endDate = state.visibleRange.end } = props;
+    let { startDate: startDate = state.visibleRange.start, endDate: endDate = state.visibleRange.end, firstDayOfWeek: firstDayOfWeek } = props;
     let { direction: direction } = (0, $iASLq$reactariai18n.useLocale)();
@@ -105,3 +105,3 @@ let onKeyDown = (e)=>{
     let weekDays = (0, $iASLq$react.useMemo)(()=>{
-        let weekStart = (0, $iASLq$internationalizeddate.startOfWeek)((0, $iASLq$internationalizeddate.today)(state.timeZone), locale);
+        let weekStart = (0, $iASLq$internationalizeddate.startOfWeek)((0, $iASLq$internationalizeddate.today)(state.timeZone), locale, firstDayOfWeek);
         return [
@@ -119,3 +119,4 @@ ...new Array(7).keys()
         state.timeZone,
-        dayFormatter
+        dayFormatter,
+        firstDayOfWeek
     ]);
@@ -125,4 +126,4 @@ return {
             role: 'grid',
-            'aria-readonly': state.isReadOnly || null,
-            'aria-disabled': state.isDisabled || null,
+            'aria-readonly': state.isReadOnly || undefined,
+            'aria-disabled': state.isDisabled || undefined,
             'aria-multiselectable': 'highlightedRange' in state || undefined,
@@ -129,0 +130,0 @@ onKeyDown: onKeyDown,

dist/useCalendarGrid.module.js

@@ -23,3 +23,3 @@ import {hookData as $a074e1e2d0f0a665$export$653eddfc964b0f8a, useVisibleRangeDescription as $a074e1e2d0f0a665$export$31afe65d91ef6e8} from "./utils.module.js";
 function $e3031d1f8c9d64eb$export$cb95147730a423f5(props, state) {
-    let { startDate: startDate = state.visibleRange.start, endDate: endDate = state.visibleRange.end } = props;
+    let { startDate: startDate = state.visibleRange.start, endDate: endDate = state.visibleRange.end, firstDayOfWeek: firstDayOfWeek } = props;
     let { direction: direction } = (0, $NQfxu$useLocale)();
@@ -99,3 +99,3 @@ let onKeyDown = (e)=>{
     let weekDays = (0, $NQfxu$useMemo)(()=>{
-        let weekStart = (0, $NQfxu$startOfWeek)((0, $NQfxu$today)(state.timeZone), locale);
+        let weekStart = (0, $NQfxu$startOfWeek)((0, $NQfxu$today)(state.timeZone), locale, firstDayOfWeek);
         return [
@@ -113,3 +113,4 @@ ...new Array(7).keys()
         state.timeZone,
-        dayFormatter
+        dayFormatter,
+        firstDayOfWeek
     ]);
@@ -119,4 +120,4 @@ return {
             role: 'grid',
-            'aria-readonly': state.isReadOnly || null,
-            'aria-disabled': state.isDisabled || null,
+            'aria-readonly': state.isReadOnly || undefined,
+            'aria-disabled': state.isDisabled || undefined,
             'aria-multiselectable': 'highlightedRange' in state || undefined,
@@ -123,0 +124,0 @@ onKeyDown: onKeyDown,

dist/utils.main.js

@@ -40,4 +40,5 @@ var $bd6dc95a3c5ee5cd$exports = require("./intlStrings.main.js");
     let start, end;
+    var _state_value;
     if ('highlightedRange' in state) ({ start: start, end: end } = state.highlightedRange || {});
-    else start = end = state.value;
+    else start = end = (_state_value = state.value) !== null && _state_value !== void 0 ? _state_value : undefined;
     let dateFormatter = (0, $idq92$reactariai18n.useDateFormatter)({
@@ -44,0 +45,0 @@ weekday: 'long',

dist/utils.module.js

@@ -31,4 +31,5 @@ import $3HATx$intlStringsmodulejs from "./intlStrings.module.js";
     let start, end;
+    var _state_value;
     if ('highlightedRange' in state) ({ start: start, end: end } = state.highlightedRange || {});
-    else start = end = state.value;
+    else start = end = (_state_value = state.value) !== null && _state_value !== void 0 ? _state_value : undefined;
     let dateFormatter = (0, $3HATx$useDateFormatter)({
@@ -35,0 +36,0 @@ weekday: 'long',

package.json

 {
   "name": "@react-aria/calendar",
-  "version": "3.0.0-nightly-c904e066c-240917",
+  "version": "3.0.0-nightly-cc08a8dbc-250208",
   "description": "Spectrum UI components in React",
@@ -25,21 +25,20 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@internationalized/date": "^3.0.0-nightly-c904e066c-240917",
-    "@react-aria/i18n": "^3.0.0-nightly-c904e066c-240917",
-    "@react-aria/interactions": "^3.0.0-nightly-c904e066c-240917",
-    "@react-aria/live-announcer": "^3.0.0-nightly-c904e066c-240917",
-    "@react-aria/utils": "^3.0.0-nightly-c904e066c-240917",
-    "@react-stately/calendar": "^3.0.0-nightly-c904e066c-240917",
-    "@react-types/button": "^3.0.0-nightly-c904e066c-240917",
-    "@react-types/calendar": "^3.0.0-nightly-c904e066c-240917",
-    "@react-types/shared": "^3.0.0-nightly-c904e066c-240917",
+    "@internationalized/date": "3.0.0-nightly-cc08a8dbc-250208",
+    "@react-aria/i18n": "3.0.0-nightly-cc08a8dbc-250208",
+    "@react-aria/interactions": "3.0.0-nightly-cc08a8dbc-250208",
+    "@react-aria/live-announcer": "3.0.0-nightly-cc08a8dbc-250208",
+    "@react-aria/utils": "3.0.0-nightly-cc08a8dbc-250208",
+    "@react-stately/calendar": "3.0.0-nightly-cc08a8dbc-250208",
+    "@react-types/button": "3.0.0-nightly-cc08a8dbc-250208",
+    "@react-types/calendar": "3.0.0-nightly-cc08a8dbc-250208",
+    "@react-types/shared": "3.0.0-nightly-cc08a8dbc-250208",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "stableVersion": "3.5.11"
+  }
 }

src/useCalendarCell.ts

@@ -77,3 +77,3 @@ /*
   let {date, isDisabled} = props;
-  let {errorMessageId, selectedDateDescription} = hookData.get(state);
+  let {errorMessageId, selectedDateDescription} = hookData.get(state)!;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/calendar');
@@ -93,3 +93,3 @@ let dateFormatter = useDateFormatter({
   let isSelectable = !isDisabled && !isUnavailable;
-  let isInvalid = state.isValueInvalid && (
+  let isInvalid = state.isValueInvalid && Boolean(
     'highlightedRange' in state
@@ -164,3 +164,3 @@ ? !state.anchorDate && state.highlightedRange && date.compare(state.highlightedRange.start) >= 0 && date.compare(state.highlightedRange.end) <= 0
   let isRangeBoundaryPressed = useRef(false);
-  let touchDragTimerRef = useRef(null);
+  let touchDragTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   let {pressProps, isPressed} = usePress({
@@ -201,3 +201,3 @@ // When dragging to select a range, we don't want dragging over the original anchor
           state.setDragging(true);
-          touchDragTimerRef.current = null;
+          touchDragTimerRef.current = undefined;
 
@@ -222,3 +222,3 @@ state.selectDate(date);
       clearTimeout(touchDragTimerRef.current);
-      touchDragTimerRef.current = null;
+      touchDragTimerRef.current = undefined;
     },
@@ -277,3 +277,3 @@ onPress() {
 
-  let tabIndex = null;
+  let tabIndex: number | undefined = undefined;
   if (!isDisabled) {
@@ -307,3 +307,3 @@ tabIndex = isSameDay(date, state.focusedDate) ? 0 : -1;
 
-  let formattedDate = useMemo(() => cellDateFormatter.formatToParts(nativeDate).find(part => part.type === 'day').value, [cellDateFormatter, nativeDate]);
+  let formattedDate = useMemo(() => cellDateFormatter.formatToParts(nativeDate).find(part => part.type === 'day')!.value, [cellDateFormatter, nativeDate]);
 
@@ -313,5 +313,5 @@ return {
       role: 'gridcell',
-      'aria-disabled': !isSelectable || null,
-      'aria-selected': isSelected || null,
-      'aria-invalid': isInvalid || null
+      'aria-disabled': !isSelectable || undefined,
+      'aria-selected': isSelected || undefined,
+      'aria-invalid': isInvalid || undefined
     },
@@ -326,7 +326,7 @@ buttonProps: mergeProps(pressProps, {
       role: 'button',
-      'aria-disabled': !isSelectable || null,
+      'aria-disabled': !isSelectable || undefined,
       'aria-label': label,
-      'aria-invalid': isInvalid || null,
+      'aria-invalid': isInvalid || undefined,
       'aria-describedby': [
-        isInvalid ? errorMessageId : null,
+        isInvalid ? errorMessageId : undefined,
         descriptionProps['aria-describedby']
@@ -333,0 +333,0 @@ ].filter(Boolean).join(' ') || undefined,

src/useCalendarGrid.ts

@@ -39,3 +39,7 @@ /*
    */
-  weekdayStyle?: 'narrow' | 'short' | 'long'
+  weekdayStyle?: 'narrow' | 'short' | 'long',
+  /**
+   * The day that starts the week.
+   */
+  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
 }
@@ -60,3 +64,4 @@
     startDate = state.visibleRange.start,
-    endDate = state.visibleRange.end
+    endDate = state.visibleRange.end,
+    firstDayOfWeek
   } = props;
@@ -133,3 +138,3 @@
 
-  let {ariaLabel, ariaLabelledBy} = hookData.get(state);
+  let {ariaLabel, ariaLabelledBy} = hookData.get(state)!;
   let labelProps = useLabels({
@@ -143,3 +148,3 @@ 'aria-label': [ariaLabel, visibleRangeDescription].filter(Boolean).join(', '),
   let weekDays = useMemo(() => {
-    let weekStart = startOfWeek(today(state.timeZone), locale);
+    let weekStart = startOfWeek(today(state.timeZone), locale, firstDayOfWeek);
     return [...new Array(7).keys()].map((index) => {
@@ -150,3 +155,3 @@ let date = weekStart.add({days: index});
     });
-  }, [locale, state.timeZone, dayFormatter]);
+  }, [locale, state.timeZone, dayFormatter, firstDayOfWeek]);
 
@@ -156,4 +161,4 @@ return {
       role: 'grid',
-      'aria-readonly': state.isReadOnly || null,
-      'aria-disabled': state.isDisabled || null,
+      'aria-readonly': state.isReadOnly || undefined,
+      'aria-disabled': state.isDisabled || undefined,
       'aria-multiselectable': ('highlightedRange' in state) || undefined,
@@ -160,0 +165,0 @@ onKeyDown,

src/utils.ts

@@ -22,4 +22,4 @@ /*
 interface HookData {
-  ariaLabel: string,
-  ariaLabelledBy: string,
+  ariaLabel?: string,
+  ariaLabelledBy?: string,
   errorMessageId: string,
@@ -31,3 +31,3 @@ selectedDateDescription: string
 
-export function getEraFormat(date: CalendarDate): 'short' | undefined {
+export function getEraFormat(date: CalendarDate | undefined): 'short' | undefined {
   return date?.calendar.identifier === 'gregory' && date.era === 'BC' ? 'short' : undefined;
@@ -39,7 +39,7 @@ }
 
-  let start: CalendarDate, end: CalendarDate;
+  let start: CalendarDate | undefined, end: CalendarDate | undefined;
   if ('highlightedRange' in state) {
     ({start, end} = state.highlightedRange || {});
   } else {
-    start = end = state.value;
+    start = end = state.value ?? undefined;
   }
@@ -46,0 +46,0 @@

No alert changes

Improved metrics

Total package byte prevSize

478574

Lines of code

4981

increased by0.3%

Dependency changes

• + Added@internationalized/date@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@internationalized/message@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@internationalized/number@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@internationalized/string@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@react-aria/i18n@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@react-aria/interactions@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@react-aria/live-announcer@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@react-aria/ssr@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@react-aria/utils@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@react-stately/calendar@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@react-stately/flags@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@react-stately/utils@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@react-types/button@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@react-types/calendar@3.0.0-nightly-cc08a8dbc-250208(transitive)

• + Added@react-types/shared@3.0.0-nightly-cc08a8dbc-250208(transitive)

• - Removed@internationalized/date@3.7.0(transitive)

• - Removed@internationalized/message@3.1.6(transitive)

• - Removed@internationalized/number@3.6.0(transitive)

• - Removed@internationalized/string@3.2.5(transitive)

• - Removed@react-aria/i18n@3.12.5(transitive)

• - Removed@react-aria/interactions@3.23.0(transitive)

• - Removed@react-aria/live-announcer@3.4.1(transitive)

• - Removed@react-aria/ssr@3.9.7(transitive)

• - Removed@react-aria/utils@3.27.0(transitive)

• - Removed@react-stately/calendar@3.7.0(transitive)

• - Removed@react-stately/utils@3.10.5(transitive)

• - Removed@react-types/button@3.10.2(transitive)

• - Removed@react-types/calendar@3.6.0(transitive)

• - Removed@react-types/shared@3.27.0(transitive)

• Updated@internationalized/date@3.0.0-nightly-cc08a8dbc-250208

• Updated@react-aria/i18n@3.0.0-nightly-cc08a8dbc-250208

• Updated@react-aria/interactions@3.0.0-nightly-cc08a8dbc-250208

• Updated@react-aria/live-announcer@3.0.0-nightly-cc08a8dbc-250208

• Updated@react-aria/utils@3.0.0-nightly-cc08a8dbc-250208

• Updated@react-stately/calendar@3.0.0-nightly-cc08a8dbc-250208

• Updated@react-types/button@3.0.0-nightly-cc08a8dbc-250208

• Updated@react-types/calendar@3.0.0-nightly-cc08a8dbc-250208

• Updated@react-types/shared@3.0.0-nightly-cc08a8dbc-250208