@react-aria/calendar - npm Package Compare versions

Comparing version 3.0.0-nightly.3168 to 3.0.0-nightly.3173

dist/main.js

 var $jzHdg$reactarialiveannouncer = require("@react-aria/live-announcer");
 var $jzHdg$reactariautils = require("@react-aria/utils");
 var $jzHdg$reactariai18n = require("@react-aria/i18n");
+var $jzHdg$react = require("react");
 var $jzHdg$internationalizeddate = require("@internationalized/date");
-var $jzHdg$react = require("react");
 var $jzHdg$reactariainteractions = require("@react-aria/interactions");
@@ -274,2 +274,3 @@
 
+
 function $02ef492a56b91cb2$export$d652b3ea2d672d5b(props, state) {
@@ -297,2 +298,15 @@ let formatMessage = $jzHdg$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($f87cd00fb2ba0f23$exports)));
     $df1d8e967e73ec8e$export$3ddff89c59628ee7.set(state, props['aria-label'] || props['aria-labelledby'] ? calendarId : null);
+    // If the next or previous buttons become disabled while they are focused, move focus to the calendar body.
+    let nextFocused = $jzHdg$react.useRef(false);
+    let nextDisabled = props.isDisabled || state.isNextVisibleRangeInvalid();
+    if (nextDisabled && nextFocused.current) {
+        nextFocused.current = false;
+        state.setFocused(true);
+    }
+    let previousFocused = $jzHdg$react.useRef(false);
+    let previousDisabled = props.isDisabled || state.isPreviousVisibleRangeInvalid();
+    if (previousDisabled && previousFocused.current) {
+        previousFocused.current = false;
+        state.setFocused(true);
+    }
     return {
@@ -309,3 +323,6 @@ calendarProps: $jzHdg$reactariautils.mergeProps(descriptionProps, {
             'aria-label': formatMessage('next'),
-            isDisabled: props.isDisabled || state.isNextVisibleRangeInvalid()
+            isDisabled: nextDisabled,
+            onFocus: ()=>nextFocused.current = true
+            ,
+            onBlur: ()=>nextFocused.current = false
         },
@@ -316,3 +333,6 @@ prevButtonProps: {
             'aria-label': formatMessage('previous'),
-            isDisabled: props.isDisabled || state.isPreviousVisibleRangeInvalid()
+            isDisabled: previousDisabled,
+            onFocus: ()=>previousFocused.current = true
+            ,
+            onBlur: ()=>previousFocused.current = false
         },
@@ -507,2 +527,4 @@ title: visibleRangeDescription
     isDisabled = isDisabled || state.isCellDisabled(date);
+    let isUnavailable = state.isCellUnavailable(date);
+    let isSelectable = !isDisabled && !isUnavailable;
     // For performance, reuse the same date object as before if the new date prop is the same.
@@ -539,3 +561,3 @@ // This allows subsequent useMemo results to be reused.
     // screenreader users know that they are in a range selection mode.
-    if ('anchorDate' in state && isFocused && !state.isReadOnly) {
+    if ('anchorDate' in state && isFocused && !state.isReadOnly && isSelectable) {
         let rangeSelectionPrompt = '';
@@ -556,3 +578,3 @@ // If selection has started add "click to finish selecting range"
         preventFocusOnPress: true,
-        isDisabled: isDisabled,
+        isDisabled: !isSelectable,
         onPressStart (e) {
@@ -634,3 +656,6 @@ if (state.isReadOnly) {
                     });
-                    if ($jzHdg$internationalizeddate.isSameMonth(date, nextDay)) state.setFocusedDate(nextDay);
+                    if (state.isInvalid(nextDay)) nextDay = date.subtract({
+                        days: 1
+                    });
+                    if (!state.isInvalid(nextDay)) state.setFocusedDate(nextDay);
                 } else if (e.pointerType === 'virtual') {
@@ -666,4 +691,4 @@ // For screen readers, just select the date on click.
             role: 'gridcell',
-            'aria-disabled': isDisabled || null,
-            'aria-selected': isSelected
+            'aria-disabled': !isSelectable || null,
+            'aria-selected': isSelectable ? isSelected : null
         },
@@ -676,7 +701,7 @@ buttonProps: $jzHdg$reactariautils.mergeProps(pressProps, {
             role: 'button',
-            'aria-disabled': isDisabled || null,
+            'aria-disabled': !isSelectable || null,
             'aria-label': label,
             onPointerEnter (e) {
                 // Highlight the date on hover or drag over a date when selecting a range.
-                if ('highlightDate' in state && (e.pointerType !== 'touch' || state.isDragging)) state.highlightDate(date);
+                if ('highlightDate' in state && (e.pointerType !== 'touch' || state.isDragging) && isSelectable) state.highlightDate(date);
             },
@@ -698,2 +723,3 @@ onPointerDown (e) {
         isDisabled: isDisabled,
+        isUnavailable: isUnavailable,
         isOutsideVisibleRange: date.compare(state.visibleRange.start) < 0 || date.compare(state.visibleRange.end) > 0,
@@ -700,0 +726,0 @@ formattedDate: formattedDate

dist/module.js

 import {announce as $amWdn$announce} from "@react-aria/live-announcer";
 import {useId as $amWdn$useId, useUpdateEffect as $amWdn$useUpdateEffect, useDescription as $amWdn$useDescription, mergeProps as $amWdn$mergeProps, useEvent as $amWdn$useEvent, useLabels as $amWdn$useLabels, focusWithoutScrolling as $amWdn$focusWithoutScrolling} from "@react-aria/utils";
 import {useMessageFormatter as $amWdn$useMessageFormatter, useDateFormatter as $amWdn$useDateFormatter, useLocale as $amWdn$useLocale} from "@react-aria/i18n";
-import {isSameDay as $amWdn$isSameDay, startOfMonth as $amWdn$startOfMonth, endOfMonth as $amWdn$endOfMonth, startOfWeek as $amWdn$startOfWeek, isEqualDay as $amWdn$isEqualDay, isToday as $amWdn$isToday, isSameMonth as $amWdn$isSameMonth} from "@internationalized/date";
-import {useMemo as $amWdn$useMemo, useRef as $amWdn$useRef, useEffect as $amWdn$useEffect} from "react";
+import {useRef as $amWdn$useRef, useMemo as $amWdn$useMemo, useEffect as $amWdn$useEffect} from "react";
+import {isSameDay as $amWdn$isSameDay, startOfMonth as $amWdn$startOfMonth, endOfMonth as $amWdn$endOfMonth, startOfWeek as $amWdn$startOfWeek, isEqualDay as $amWdn$isEqualDay, isToday as $amWdn$isToday} from "@internationalized/date";
 import {usePress as $amWdn$usePress} from "@react-aria/interactions";
@@ -258,2 +258,3 @@
 
+
 function $c4acc1de3ab169cf$export$d652b3ea2d672d5b(props, state) {
@@ -281,2 +282,15 @@ let formatMessage = $amWdn$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($0fbdc3429b133a50$exports)));
     $a074e1e2d0f0a665$export$3ddff89c59628ee7.set(state, props['aria-label'] || props['aria-labelledby'] ? calendarId : null);
+    // If the next or previous buttons become disabled while they are focused, move focus to the calendar body.
+    let nextFocused = $amWdn$useRef(false);
+    let nextDisabled = props.isDisabled || state.isNextVisibleRangeInvalid();
+    if (nextDisabled && nextFocused.current) {
+        nextFocused.current = false;
+        state.setFocused(true);
+    }
+    let previousFocused = $amWdn$useRef(false);
+    let previousDisabled = props.isDisabled || state.isPreviousVisibleRangeInvalid();
+    if (previousDisabled && previousFocused.current) {
+        previousFocused.current = false;
+        state.setFocused(true);
+    }
     return {
@@ -293,3 +307,6 @@ calendarProps: $amWdn$mergeProps(descriptionProps, {
             'aria-label': formatMessage('next'),
-            isDisabled: props.isDisabled || state.isNextVisibleRangeInvalid()
+            isDisabled: nextDisabled,
+            onFocus: ()=>nextFocused.current = true
+            ,
+            onBlur: ()=>nextFocused.current = false
         },
@@ -300,3 +317,6 @@ prevButtonProps: {
             'aria-label': formatMessage('previous'),
-            isDisabled: props.isDisabled || state.isPreviousVisibleRangeInvalid()
+            isDisabled: previousDisabled,
+            onFocus: ()=>previousFocused.current = true
+            ,
+            onBlur: ()=>previousFocused.current = false
         },
@@ -491,2 +511,4 @@ title: visibleRangeDescription
     isDisabled = isDisabled || state.isCellDisabled(date);
+    let isUnavailable = state.isCellUnavailable(date);
+    let isSelectable = !isDisabled && !isUnavailable;
     // For performance, reuse the same date object as before if the new date prop is the same.
@@ -523,3 +545,3 @@ // This allows subsequent useMemo results to be reused.
     // screenreader users know that they are in a range selection mode.
-    if ('anchorDate' in state && isFocused && !state.isReadOnly) {
+    if ('anchorDate' in state && isFocused && !state.isReadOnly && isSelectable) {
         let rangeSelectionPrompt = '';
@@ -540,3 +562,3 @@ // If selection has started add "click to finish selecting range"
         preventFocusOnPress: true,
-        isDisabled: isDisabled,
+        isDisabled: !isSelectable,
         onPressStart (e) {
@@ -618,3 +640,6 @@ if (state.isReadOnly) {
                     });
-                    if ($amWdn$isSameMonth(date, nextDay)) state.setFocusedDate(nextDay);
+                    if (state.isInvalid(nextDay)) nextDay = date.subtract({
+                        days: 1
+                    });
+                    if (!state.isInvalid(nextDay)) state.setFocusedDate(nextDay);
                 } else if (e.pointerType === 'virtual') {
@@ -650,4 +675,4 @@ // For screen readers, just select the date on click.
             role: 'gridcell',
-            'aria-disabled': isDisabled || null,
-            'aria-selected': isSelected
+            'aria-disabled': !isSelectable || null,
+            'aria-selected': isSelectable ? isSelected : null
         },
@@ -660,7 +685,7 @@ buttonProps: $amWdn$mergeProps(pressProps, {
             role: 'button',
-            'aria-disabled': isDisabled || null,
+            'aria-disabled': !isSelectable || null,
             'aria-label': label,
             onPointerEnter (e) {
                 // Highlight the date on hover or drag over a date when selecting a range.
-                if ('highlightDate' in state && (e.pointerType !== 'touch' || state.isDragging)) state.highlightDate(date);
+                if ('highlightDate' in state && (e.pointerType !== 'touch' || state.isDragging) && isSelectable) state.highlightDate(date);
             },
@@ -682,2 +707,3 @@ onPointerDown (e) {
         isDisabled: isDisabled,
+        isUnavailable: isUnavailable,
         isOutsideVisibleRange: date.compare(state.visibleRange.start) < 0 || date.compare(state.visibleRange.end) > 0,
@@ -684,0 +710,0 @@ formattedDate: formattedDate

dist/types.d.ts

@@ -78,5 +78,18 @@ import { AriaButtonProps } from "@react-types/button";
     isFocused: boolean;
-    /** Whether the cell is disabled. */
+    /**
+     * Whether the cell is disabled, according to the calendar's `minValue`, `maxValue`, and `isDisabled` props.
+     * Disabled dates are not focusable, and cannot be selected by the user. They are typically
+     * displayed with a dimmed appearance.
+     */
     isDisabled: boolean;
     /**
+     * Whether the cell is unavailable, according to the calendar's `isDateUnavailable` prop. Unavailable dates remain
+     * focusable, but cannot be selected by the user. They should be displayed with a visual affordance to indicate they
+     * are unavailable, such as a different color or a strikethrough.
+     *
+     * Note that because they are focusable, unavailable dates must meet a 4.5:1 color contrast ratio,
+     * [as defined by WCAG](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
+     */
+    isUnavailable: boolean;
+    /**
      * Whether the cell is outside the visible range of the calendar.
@@ -83,0 +96,0 @@ * For example, dates before the first day of a month in the same week.

package.json

 {
   "name": "@react-aria/calendar",
-  "version": "3.0.0-nightly.3168+2fabc1ac0",
+  "version": "3.0.0-nightly.3173+fe4148bea",
   "description": "Spectrum UI components in React",
@@ -21,11 +21,11 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@internationalized/date": "3.0.0-nightly.3168+2fabc1ac0",
-    "@react-aria/i18n": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/interactions": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/live-announcer": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/utils": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-stately/calendar": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-types/button": "3.4.5-nightly.3168+2fabc1ac0",
-    "@react-types/calendar": "3.0.0-nightly.3168+2fabc1ac0",
-    "@react-types/shared": "3.0.0-nightly.1469+2fabc1ac0",
+    "@internationalized/date": "3.0.0-nightly.3173+fe4148bea",
+    "@react-aria/i18n": "3.0.0-nightly.1474+fe4148bea",
+    "@react-aria/interactions": "3.0.0-nightly.1474+fe4148bea",
+    "@react-aria/live-announcer": "3.0.0-nightly.1474+fe4148bea",
+    "@react-aria/utils": "3.0.0-nightly.1474+fe4148bea",
+    "@react-stately/calendar": "3.0.0-nightly.1474+fe4148bea",
+    "@react-types/button": "3.4.5-nightly.3173+fe4148bea",
+    "@react-types/calendar": "3.0.0-nightly.3173+fe4148bea",
+    "@react-types/shared": "3.0.0-nightly.1474+fe4148bea",
     "date-fns": "^1.30.1"
@@ -40,3 +40,3 @@ },
   },
-  "gitHead": "2fabc1ac07aa6fd75e7111e571e27787d8a44314"
+  "gitHead": "fe4148beaf7f63a1ea486aecc139747a666f8c3a"
 }

src/useCalendarBase.ts

@@ -23,2 +23,3 @@ /*
 import {useMessageFormatter} from '@react-aria/i18n';
+import {useRef} from 'react';
 
@@ -53,2 +54,17 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: CalendarState | RangeCalendarState): CalendarAria {
 
+  // If the next or previous buttons become disabled while they are focused, move focus to the calendar body.
+  let nextFocused = useRef(false);
+  let nextDisabled = props.isDisabled || state.isNextVisibleRangeInvalid();
+  if (nextDisabled && nextFocused.current) {
+    nextFocused.current = false;
+    state.setFocused(true);
+  }
+
+  let previousFocused = useRef(false);
+  let previousDisabled = props.isDisabled || state.isPreviousVisibleRangeInvalid();
+  if (previousDisabled && previousFocused.current) {
+    previousFocused.current = false;
+    state.setFocused(true);
+  }
+
   return {
@@ -64,3 +80,5 @@ calendarProps: mergeProps(descriptionProps, {
       'aria-label': formatMessage('next'),
-      isDisabled: props.isDisabled || state.isNextVisibleRangeInvalid()
+      isDisabled: nextDisabled,
+      onFocus: () => nextFocused.current = true,
+      onBlur: () => nextFocused.current = false
     },
@@ -70,3 +88,5 @@ prevButtonProps: {
       'aria-label': formatMessage('previous'),
-      isDisabled: props.isDisabled || state.isPreviousVisibleRangeInvalid()
+      isDisabled: previousDisabled,
+      onFocus: () => previousFocused.current = true,
+      onBlur: () => previousFocused.current = false
     },
@@ -73,0 +93,0 @@ title: visibleRangeDescription

src/useCalendarCell.ts

@@ -13,3 +13,3 @@ /*
 
-import {CalendarDate, isEqualDay, isSameDay, isSameMonth, isToday} from '@internationalized/date';
+import {CalendarDate, isEqualDay, isSameDay, isToday} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
@@ -45,5 +45,18 @@ import {focusWithoutScrolling} from '@react-aria/utils';
   isFocused: boolean,
-  /** Whether the cell is disabled. */
+  /**
+   * Whether the cell is disabled, according to the calendar's `minValue`, `maxValue`, and `isDisabled` props.
+   * Disabled dates are not focusable, and cannot be selected by the user. They are typically
+   * displayed with a dimmed appearance.
+   */
   isDisabled: boolean,
   /**
+   * Whether the cell is unavailable, according to the calendar's `isDateUnavailable` prop. Unavailable dates remain
+   * focusable, but cannot be selected by the user. They should be displayed with a visual affordance to indicate they
+   * are unavailable, such as a different color or a strikethrough.
+   *
+   * Note that because they are focusable, unavailable dates must meet a 4.5:1 color contrast ratio,
+   * [as defined by WCAG](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
+   */
+  isUnavailable: boolean,
+  /**
    * Whether the cell is outside the visible range of the calendar.
@@ -75,2 +88,4 @@ * For example, dates before the first day of a month in the same week.
   isDisabled = isDisabled || state.isCellDisabled(date);
+  let isUnavailable = state.isCellUnavailable(date);
+  let isSelectable = !isDisabled && !isUnavailable;
 
@@ -108,3 +123,3 @@ // For performance, reuse the same date object as before if the new date prop is the same.
   // screenreader users know that they are in a range selection mode.
-  if ('anchorDate' in state && isFocused && !state.isReadOnly) {
+  if ('anchorDate' in state && isFocused && !state.isReadOnly && isSelectable) {
     let rangeSelectionPrompt = '';
@@ -134,3 +149,3 @@
     preventFocusOnPress: true,
-    isDisabled,
+    isDisabled: !isSelectable,
     onPressStart(e) {
@@ -222,3 +237,6 @@ if (state.isReadOnly) {
           let nextDay = date.add({days: 1});
-          if (isSameMonth(date, nextDay)) {
+          if (state.isInvalid(nextDay)) {
+            nextDay = date.subtract({days: 1});
+          }
+          if (!state.isInvalid(nextDay)) {
             state.setFocusedDate(nextDay);
@@ -258,4 +276,4 @@ }
       role: 'gridcell',
-      'aria-disabled': isDisabled || null,
-      'aria-selected': isSelected
+      'aria-disabled': !isSelectable || null,
+      'aria-selected': isSelectable ? isSelected : null
     },
@@ -270,7 +288,7 @@ buttonProps: mergeProps(pressProps, {
       role: 'button',
-      'aria-disabled': isDisabled || null,
+      'aria-disabled': !isSelectable || null,
       'aria-label': label,
       onPointerEnter(e) {
         // Highlight the date on hover or drag over a date when selecting a range.
-        if ('highlightDate' in state && (e.pointerType !== 'touch' || state.isDragging)) {
+        if ('highlightDate' in state && (e.pointerType !== 'touch' || state.isDragging) && isSelectable) {
           state.highlightDate(date);
@@ -296,2 +314,3 @@ }
     isDisabled,
+    isUnavailable,
     isOutsideVisibleRange: date.compare(state.visibleRange.start) < 0 || date.compare(state.visibleRange.end) > 0,
@@ -298,0 +317,0 @@ formattedDate

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

292644

increased by3.6%

Lines of code

2163

increased by4.85%

Dependency changes

• Updated@internationalized/date@3.0.0-nightly.3173+fe4148bea

• Updated@react-aria/i18n@3.0.0-nightly.1474+fe4148bea

• Updated@react-aria/interactions@3.0.0-nightly.1474+fe4148bea

• Updated@react-aria/live-announcer@3.0.0-nightly.1474+fe4148bea

• Updated@react-aria/utils@3.0.0-nightly.1474+fe4148bea

• Updated@react-stately/calendar@3.0.0-nightly.1474+fe4148bea

• Updated@react-types/button@3.4.5-nightly.3173+fe4148bea

• Updated@react-types/calendar@3.0.0-nightly.3173+fe4148bea

• Updated@react-types/shared@3.0.0-nightly.1474+fe4148bea