@react-aria/calendar - npm Package Compare versions

Comparing version 3.0.0-nightly.1519 to 3.0.0-nightly.1522

dist/main.js

@@ -325,3 +325,4 @@ var $jzHdg$reactarialiveannouncer = require("@react-aria/live-announcer");
         ariaLabelledBy: props['aria-labelledby'],
-        errorMessageId: errorMessageId
+        errorMessageId: errorMessageId,
+        selectedDateDescription: selectedDateDescription
     });
@@ -412,3 +413,3 @@ // If the next or previous buttons become disabled while they are focused, move focus to the calendar body.
         let body = document.getElementById(res.calendarProps.id);
-        if (body.contains(document.activeElement) && (!body.contains(target) || !target.closest('button, [role="button"]'))) state.selectFocusedDate();
+        if (body && body.contains(document.activeElement) && (!body.contains(target) || !target.closest('button, [role="button"]'))) state.selectFocusedDate();
     };
@@ -490,6 +491,4 @@ $jzHdg$reactariautils.useEvent(windowRef, 'pointerup', endDragging);
     };
-    let selectedDateDescription = $df1d8e967e73ec8e$export$b6df97c887c38e1a(state);
-    let descriptionProps = $jzHdg$reactariautils.useDescription(selectedDateDescription);
     let visibleRangeDescription = $df1d8e967e73ec8e$export$31afe65d91ef6e8(startDate, endDate, state.timeZone, true);
-    let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , errorMessageId: errorMessageId  } = $df1d8e967e73ec8e$export$653eddfc964b0f8a.get(state);
+    let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy  } = $df1d8e967e73ec8e$export$653eddfc964b0f8a.get(state);
     let labelProps = $jzHdg$reactariautils.useLabels({
@@ -530,6 +529,2 @@ 'aria-label': [
             'aria-multiselectable': 'highlightedRange' in state || undefined,
-            'aria-describedby': [
-                descriptionProps['aria-describedby'],
-                state.validationState === 'invalid' ? errorMessageId : null
-            ].filter(Boolean).join(' ') || undefined,
             onKeyDown: onKeyDown,
@@ -560,2 +555,3 @@ onFocus: ()=>state.setFocused(true)
     let { date: date , isDisabled: isDisabled  } = props;
+    let { errorMessageId: errorMessageId , selectedDateDescription: selectedDateDescription  } = $df1d8e967e73ec8e$export$653eddfc964b0f8a.get(state);
     let formatMessage = $jzHdg$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($f87cd00fb2ba0f23$exports)));
@@ -590,3 +586,7 @@ let dateFormatter = $jzHdg$reactariai18n.useDateFormatter({
     let label1 = $jzHdg$react.useMemo(()=>{
-        let label = dateFormatter.format(nativeDate);
+        let label = '';
+        // If this is a range calendar, add a description of the full selected range
+        // to the first and last selected date.
+        if ('highlightedRange' in state && state.value && !state.anchorDate && ($jzHdg$internationalizeddate.isSameDay(date, state.value.start) || $jzHdg$internationalizeddate.isSameDay(date, state.value.end))) label = selectedDateDescription + ', ';
+        label += dateFormatter.format(nativeDate);
         if (isDateToday) // If date is today, set appropriate string depending on selected state:
@@ -610,4 +610,4 @@ label = formatMessage(isSelected ? 'todayDateSelected' : 'todayDate', {
         date,
-        state.minValue,
-        state.maxValue
+        state,
+        selectedDateDescription
     ]);
@@ -746,3 +746,2 @@ // When a cell is focused and this is a range calendar, add a prompt to help
     ]);
-    let { errorMessageId: errorMessageId  } = $df1d8e967e73ec8e$export$653eddfc964b0f8a.get(state);
     return {
@@ -749,0 +748,0 @@ cellProps: {

dist/module.js

@@ -317,3 +317,4 @@ import {announce as $amWdn$announce} from "@react-aria/live-announcer";
         ariaLabelledBy: props['aria-labelledby'],
-        errorMessageId: errorMessageId
+        errorMessageId: errorMessageId,
+        selectedDateDescription: selectedDateDescription
     });
@@ -404,3 +405,3 @@ // If the next or previous buttons become disabled while they are focused, move focus to the calendar body.
         let body = document.getElementById(res.calendarProps.id);
-        if (body.contains(document.activeElement) && (!body.contains(target) || !target.closest('button, [role="button"]'))) state.selectFocusedDate();
+        if (body && body.contains(document.activeElement) && (!body.contains(target) || !target.closest('button, [role="button"]'))) state.selectFocusedDate();
     };
@@ -482,6 +483,4 @@ $amWdn$useEvent(windowRef, 'pointerup', endDragging);
     };
-    let selectedDateDescription = $a074e1e2d0f0a665$export$b6df97c887c38e1a(state);
-    let descriptionProps = $amWdn$useDescription(selectedDateDescription);
     let visibleRangeDescription = $a074e1e2d0f0a665$export$31afe65d91ef6e8(startDate, endDate, state.timeZone, true);
-    let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , errorMessageId: errorMessageId  } = $a074e1e2d0f0a665$export$653eddfc964b0f8a.get(state);
+    let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy  } = $a074e1e2d0f0a665$export$653eddfc964b0f8a.get(state);
     let labelProps = $amWdn$useLabels({
@@ -522,6 +521,2 @@ 'aria-label': [
             'aria-multiselectable': 'highlightedRange' in state || undefined,
-            'aria-describedby': [
-                descriptionProps['aria-describedby'],
-                state.validationState === 'invalid' ? errorMessageId : null
-            ].filter(Boolean).join(' ') || undefined,
             onKeyDown: onKeyDown,
@@ -552,2 +547,3 @@ onFocus: ()=>state.setFocused(true)
     let { date: date , isDisabled: isDisabled  } = props;
+    let { errorMessageId: errorMessageId , selectedDateDescription: selectedDateDescription  } = $a074e1e2d0f0a665$export$653eddfc964b0f8a.get(state);
     let formatMessage = $amWdn$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($0fbdc3429b133a50$exports)));
@@ -582,3 +578,7 @@ let dateFormatter = $amWdn$useDateFormatter({
     let label1 = $amWdn$useMemo(()=>{
-        let label = dateFormatter.format(nativeDate);
+        let label = '';
+        // If this is a range calendar, add a description of the full selected range
+        // to the first and last selected date.
+        if ('highlightedRange' in state && state.value && !state.anchorDate && ($amWdn$isSameDay(date, state.value.start) || $amWdn$isSameDay(date, state.value.end))) label = selectedDateDescription + ', ';
+        label += dateFormatter.format(nativeDate);
         if (isDateToday) // If date is today, set appropriate string depending on selected state:
@@ -602,4 +602,4 @@ label = formatMessage(isSelected ? 'todayDateSelected' : 'todayDate', {
         date,
-        state.minValue,
-        state.maxValue
+        state,
+        selectedDateDescription
     ]);
@@ -738,3 +738,2 @@ // When a cell is focused and this is a range calendar, add a prompt to help
     ]);
-    let { errorMessageId: errorMessageId  } = $a074e1e2d0f0a665$export$653eddfc964b0f8a.get(state);
     return {
@@ -741,0 +740,0 @@ cellProps: {

package.json

 {
   "name": "@react-aria/calendar",
-  "version": "3.0.0-nightly.1519+4ac7b35f2",
+  "version": "3.0.0-nightly.1522+3c4f8c954",
   "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.3218+4ac7b35f2",
-    "@react-aria/i18n": "3.0.0-nightly.1519+4ac7b35f2",
-    "@react-aria/interactions": "3.0.0-nightly.1519+4ac7b35f2",
-    "@react-aria/live-announcer": "3.0.0-nightly.1519+4ac7b35f2",
-    "@react-aria/utils": "3.0.0-nightly.1519+4ac7b35f2",
-    "@react-stately/calendar": "3.0.0-nightly.1519+4ac7b35f2",
-    "@react-types/button": "3.4.5-nightly.3218+4ac7b35f2",
-    "@react-types/calendar": "3.0.0-nightly.1519+4ac7b35f2",
-    "@react-types/shared": "3.0.0-nightly.1519+4ac7b35f2"
+    "@internationalized/date": "3.0.0-nightly.3221+3c4f8c954",
+    "@react-aria/i18n": "3.0.0-nightly.1522+3c4f8c954",
+    "@react-aria/interactions": "3.0.0-nightly.1522+3c4f8c954",
+    "@react-aria/live-announcer": "3.0.0-nightly.1522+3c4f8c954",
+    "@react-aria/utils": "3.0.0-nightly.1522+3c4f8c954",
+    "@react-stately/calendar": "3.0.0-nightly.1522+3c4f8c954",
+    "@react-types/button": "3.4.5-nightly.3221+3c4f8c954",
+    "@react-types/calendar": "3.0.0-nightly.1522+3c4f8c954",
+    "@react-types/shared": "3.0.0-nightly.1522+3c4f8c954"
   },
@@ -39,3 +39,3 @@ "peerDependencies": {
   },
-  "gitHead": "4ac7b35f2f39c1054de83959c479e7e68e1ab66a"
+  "gitHead": "3c4f8c9542912ef9bb8274b0bf87c976d9a0baae"
 }

src/useCalendarBase.ts

@@ -68,3 +68,4 @@ /*
     ariaLabelledBy: props['aria-labelledby'],
-    errorMessageId
+    errorMessageId,
+    selectedDateDescription
   });
@@ -71,0 +72,0 @@

src/useCalendarCell.ts

@@ -77,2 +77,3 @@ /*
   let {date, isDisabled} = props;
+  let {errorMessageId, selectedDateDescription} = hookData.get(state);
   let formatMessage = useMessageFormatter(intlMessages);
@@ -116,3 +117,16 @@ let dateFormatter = useDateFormatter({
   let label = useMemo(() => {
-    let label = dateFormatter.format(nativeDate);
+    let label = '';
+
+    // If this is a range calendar, add a description of the full selected range
+    // to the first and last selected date.
+    if (
+      'highlightedRange' in state &&
+      state.value &&
+      !state.anchorDate &&
+      (isSameDay(date, state.value.start) || isSameDay(date, state.value.end))
+    ) {
+      label = selectedDateDescription + ', ';
+    }
+
+    label += dateFormatter.format(nativeDate);
     if (isDateToday) {
@@ -137,3 +151,3 @@ // If date is today, set appropriate string depending on selected state:
     return label;
-  }, [dateFormatter, nativeDate, formatMessage, isSelected, isDateToday, date, state.minValue, state.maxValue]);
+  }, [dateFormatter, nativeDate, formatMessage, isSelected, isDateToday, date, state, selectedDateDescription]);
 
@@ -292,3 +306,2 @@ // When a cell is focused and this is a range calendar, add a prompt to help
   let formattedDate = useMemo(() => cellDateFormatter.format(nativeDate), [cellDateFormatter, nativeDate]);
-  let {errorMessageId} = hookData.get(state);
 
@@ -295,0 +308,0 @@ return {

src/useCalendarGrid.ts

@@ -15,5 +15,5 @@ /*
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
-import {hookData, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
+import {hookData, useVisibleRangeDescription} from './utils';
 import {HTMLAttributes, KeyboardEvent, useMemo} from 'react';
-import {mergeProps, useDescription, useLabels} from '@react-aria/utils';
+import {mergeProps, useLabels} from '@react-aria/utils';
 import {useDateFormatter, useLocale} from '@react-aria/i18n';
@@ -115,7 +115,5 @@
 
-  let selectedDateDescription = useSelectedDateDescription(state);
-  let descriptionProps = useDescription(selectedDateDescription);
   let visibleRangeDescription = useVisibleRangeDescription(startDate, endDate, state.timeZone, true);
 
-  let {ariaLabel, ariaLabelledBy, errorMessageId} = hookData.get(state);
+  let {ariaLabel, ariaLabelledBy} = hookData.get(state);
   let labelProps = useLabels({
@@ -143,6 +141,2 @@ 'aria-label': [ariaLabel, visibleRangeDescription].filter(Boolean).join(', '),
       'aria-multiselectable': ('highlightedRange' in state) || undefined,
-      'aria-describedby': [
-        descriptionProps['aria-describedby'],
-        state.validationState === 'invalid' ? errorMessageId : null
-      ].filter(Boolean).join(' ') || undefined,
       onKeyDown,
@@ -149,0 +143,0 @@ onFocus: () => state.setFocused(true),

src/useRangeCalendar.ts

@@ -54,2 +54,3 @@ /*
     if (
+      body &&
       body.contains(document.activeElement) &&
@@ -56,0 +57,0 @@ (!body.contains(target) || !target.closest('button, [role="button"]'))

src/utils.ts

@@ -20,4 +20,11 @@ /*
 
-export const hookData = new WeakMap<CalendarState | RangeCalendarState, {ariaLabel: string, ariaLabelledBy: string, errorMessageId: string}>();
+interface HookData {
+  ariaLabel: string,
+  ariaLabelledBy: string,
+  errorMessageId: string,
+  selectedDateDescription: string
+}
 
+export const hookData = new WeakMap<CalendarState | RangeCalendarState, HookData>();
+
 export function useSelectedDateDescription(state: CalendarState | RangeCalendarState) {
@@ -24,0 +31,0 @@ let formatMessage = useMessageFormatter(intlMessages);

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

313828

increased by0.21%

Lines of code

2368

increased by0.47%

Dependency changes

• Updated@internationalized/date@3.0.0-nightly.3221+3c4f8c954

• Updated@react-aria/i18n@3.0.0-nightly.1522+3c4f8c954

• Updated@react-aria/interactions@3.0.0-nightly.1522+3c4f8c954

• Updated@react-aria/live-announcer@3.0.0-nightly.1522+3c4f8c954

• Updated@react-aria/utils@3.0.0-nightly.1522+3c4f8c954

• Updated@react-stately/calendar@3.0.0-nightly.1522+3c4f8c954

• Updated@react-types/button@3.4.5-nightly.3221+3c4f8c954

• Updated@react-types/calendar@3.0.0-nightly.1522+3c4f8c954

• Updated@react-types/shared@3.0.0-nightly.1522+3c4f8c954