Socket
Socket
Sign inDemoInstall

@react-aria/calendar

Package Overview
Dependencies
Maintainers
2
Versions
562
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-aria/calendar - npm Package Compare versions

Comparing version 3.0.0-nightly.1505 to 3.0.0-nightly.1508

131

dist/main.js
var $jzHdg$reactarialiveannouncer = require("@react-aria/live-announcer");
var $jzHdg$reactariautils = require("@react-aria/utils");
var $jzHdg$react = require("react");
var $jzHdg$reactariai18n = require("@react-aria/i18n");
var $jzHdg$react = require("react");
var $jzHdg$internationalizeddate = require("@internationalized/date");
var $jzHdg$reactariainteractions = require("@react-aria/interactions");
function $parcel$exportWildcard(dest, source) {
Object.keys(source).forEach(function(key) {
if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
return;
}
Object.defineProperty(dest, key, {
enumerable: true,
get: function get() {
return source[key];
}
});
});
return dest;
}
function $parcel$export(e, n, v, s) {

@@ -30,8 +14,11 @@ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});

}
var $20e845123e697a89$exports = {};
$parcel$export($20e845123e697a89$exports, "useCalendar", () => $20e845123e697a89$export$3ee915f8151bd4f1);
$parcel$export(module.exports, "useCalendar", () => $20e845123e697a89$export$3ee915f8151bd4f1);
$parcel$export(module.exports, "useRangeCalendar", () => $c49ada48cbc48220$export$87e0539f600c24e5);
$parcel$export(module.exports, "useCalendarGrid", () => $a07388a797d86b95$export$cb95147730a423f5);
$parcel$export(module.exports, "useCalendarCell", () => $4d833327a32c9193$export$136073280381448e);
var $f87cd00fb2ba0f23$exports = {};

@@ -213,3 +200,3 @@ var $1fedb39dedbf7c51$exports = {};

const $df1d8e967e73ec8e$export$3ddff89c59628ee7 = new WeakMap();
const $df1d8e967e73ec8e$export$653eddfc964b0f8a = new WeakMap();
function $df1d8e967e73ec8e$export$b6df97c887c38e1a(state) {

@@ -312,6 +299,5 @@ let formatMessage = $jzHdg$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($f87cd00fb2ba0f23$exports)));

function $02ef492a56b91cb2$export$d652b3ea2d672d5b(props, state) {
let formatMessage = $jzHdg$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($f87cd00fb2ba0f23$exports)));
let calendarId = $jzHdg$reactariautils.useId(props.id);
let domProps = $jzHdg$reactariautils.filterDOMProps(props);
let title = $df1d8e967e73ec8e$export$31afe65d91ef6e8(state.visibleRange.start, state.visibleRange.end, state.timeZone, false);

@@ -334,3 +320,2 @@ let visibleRangeDescription = $df1d8e967e73ec8e$export$31afe65d91ef6e8(state.visibleRange.start, state.visibleRange.end, state.timeZone, true);

]);
let descriptionProps = $jzHdg$reactariautils.useDescription(visibleRangeDescription);
let errorMessageId = $jzHdg$reactariautils.useSlotId([

@@ -340,5 +325,6 @@ Boolean(props.errorMessage),

]);
// Label the child grid elements by the group element if it is labelled.
$df1d8e967e73ec8e$export$3ddff89c59628ee7.set(state, {
calendarId: props['aria-label'] || props['aria-labelledby'] ? calendarId : null,
// Pass the label to the child grid elements.
$df1d8e967e73ec8e$export$653eddfc964b0f8a.set(state, {
ariaLabel: props['aria-label'],
ariaLabelledBy: props['aria-labelledby'],
errorMessageId: errorMessageId

@@ -359,12 +345,14 @@ });

}
let labelProps = $jzHdg$reactariautils.useLabels({
id: props['id'],
'aria-label': [
props['aria-label'],
visibleRangeDescription
].filter(Boolean).join(', '),
'aria-labelledby': props['aria-labelledby']
});
return {
calendarProps: $jzHdg$reactariautils.mergeProps({
calendarProps: $jzHdg$reactariautils.mergeProps(domProps, labelProps, {
role: 'group',
id: calendarId,
'aria-label': props['aria-label'],
'aria-labelledby': props['aria-labelledby'],
'aria-describedby': [
props['aria-describedby'],
descriptionProps['aria-describedby']
].filter(Boolean).join(' ') || undefined
'aria-describedby': props['aria-describedby'] || undefined
}),

@@ -402,12 +390,7 @@ nextButtonProps: {

var $c49ada48cbc48220$exports = {};
$parcel$export($c49ada48cbc48220$exports, "useRangeCalendar", () => $c49ada48cbc48220$export$87e0539f600c24e5);
function $c49ada48cbc48220$export$87e0539f600c24e5(props, state, ref2) {
function $c49ada48cbc48220$export$87e0539f600c24e5(props, state, ref) {
let res = $02ef492a56b91cb2$export$d652b3ea2d672d5b(props, state);
res.nextButtonProps.id = $jzHdg$reactariautils.useId();
res.prevButtonProps.id = $jzHdg$reactariautils.useId();
// We need to ignore virtual pointer events from VoiceOver due to these bugs.

@@ -420,3 +403,4 @@ // https://bugs.webkit.org/show_bug.cgi?id=222627

let isVirtualClick = $jzHdg$react.useRef(false);
$jzHdg$reactariautils.useEvent($jzHdg$react.useRef(window), 'pointerdown', (e)=>{
let windowRef = $jzHdg$react.useRef(typeof window !== 'undefined' ? window : null);
$jzHdg$reactariautils.useEvent(windowRef, 'pointerdown', (e)=>{
isVirtualClick.current = e.width === 0 && e.height === 0;

@@ -427,3 +411,2 @@ });

let endDragging = (e)=>{
var ref, ref1;
if (isVirtualClick.current) {

@@ -437,12 +420,12 @@ isVirtualClick.current = false;

let body = document.getElementById(res.calendarProps.id);
if (body.contains(document.activeElement) && (!body.contains(target) || !target.closest('[role="button"]')) && !((ref = document.getElementById(res.nextButtonProps.id)) === null || ref === void 0 ? void 0 : ref.contains(target)) && !((ref1 = document.getElementById(res.prevButtonProps.id)) === null || ref1 === void 0 ? void 0 : ref1.contains(target))) state.selectFocusedDate();
if (body.contains(document.activeElement) && (!body.contains(target) || !target.closest('button, [role="button"]'))) state.selectFocusedDate();
};
$jzHdg$reactariautils.useEvent($jzHdg$react.useRef(window), 'pointerup', endDragging);
$jzHdg$reactariautils.useEvent($jzHdg$react.useRef(window), 'pointercancel', endDragging);
$jzHdg$reactariautils.useEvent(windowRef, 'pointerup', endDragging);
$jzHdg$reactariautils.useEvent(windowRef, 'pointercancel', endDragging);
// Also stop range selection on blur, e.g. tabbing away from the calendar.
res.calendarProps.onBlur = (e)=>{
if ((!e.relatedTarget || !ref2.current.contains(e.relatedTarget)) && state.anchorDate) state.selectFocusedDate();
if ((!e.relatedTarget || !ref.current.contains(e.relatedTarget)) && state.anchorDate) state.selectFocusedDate();
};
// Prevent touch scrolling while dragging
$jzHdg$reactariautils.useEvent(ref2, 'touchmove', (e)=>{
$jzHdg$reactariautils.useEvent(ref, 'touchmove', (e)=>{
if (state.isDragging) e.preventDefault();

@@ -457,5 +440,3 @@ }, {

var $a07388a797d86b95$exports = {};
$parcel$export($a07388a797d86b95$exports, "useCalendarGrid", () => $a07388a797d86b95$export$cb95147730a423f5);

@@ -465,3 +446,2 @@

function $a07388a797d86b95$export$cb95147730a423f5(props, state) {

@@ -479,17 +459,15 @@ let { startDate: startDate = state.visibleRange.start , endDate: endDate = state.visibleRange.end } = props;

e.preventDefault();
if (e.shiftKey) state.focusPreviousSection();
else state.focusPreviousPage();
state.focusPreviousSection(e.shiftKey);
break;
case 'PageDown':
e.preventDefault();
if (e.shiftKey) state.focusNextSection();
else state.focusNextPage();
state.focusNextSection(e.shiftKey);
break;
case 'End':
e.preventDefault();
state.focusPageEnd();
state.focusSectionEnd();
break;
case 'Home':
e.preventDefault();
state.focusPageStart();
state.focusSectionStart();
break;

@@ -526,6 +504,9 @@ case 'ArrowLeft':

let visibleRangeDescription = $df1d8e967e73ec8e$export$31afe65d91ef6e8(startDate, endDate, state.timeZone, true);
let { calendarId: calendarId , errorMessageId: errorMessageId } = $df1d8e967e73ec8e$export$3ddff89c59628ee7.get(state);
let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , errorMessageId: errorMessageId } = $df1d8e967e73ec8e$export$653eddfc964b0f8a.get(state);
let labelProps = $jzHdg$reactariautils.useLabels({
'aria-label': visibleRangeDescription,
'aria-labelledby': calendarId
'aria-label': [
ariaLabel,
visibleRangeDescription
].filter(Boolean).join(', '),
'aria-labelledby': ariaLabelledBy
});

@@ -536,6 +517,2 @@ let dayFormatter = $jzHdg$reactariai18n.useDateFormatter({

});
let dayFormatterLong = $jzHdg$reactariai18n.useDateFormatter({
weekday: 'long',
timeZone: state.timeZone
});
let { locale: locale } = $jzHdg$reactariai18n.useLocale();

@@ -551,8 +528,3 @@ let weekDays = $jzHdg$react.useMemo(()=>{

let dateDay = date.toDate(state.timeZone);
let narrow = dayFormatter.format(dateDay);
let long = dayFormatterLong.format(dateDay);
return {
narrow: narrow,
long: long
};
return dayFormatter.format(dateDay);
});

@@ -563,4 +535,3 @@ }, [

state.timeZone,
dayFormatter,
dayFormatterLong
dayFormatter
]);

@@ -582,2 +553,7 @@ return {

}),
headerProps: {
// Column headers are hidden to screen readers to make navigating with a touch screen reader easier.
// The day names are already included in the label of each cell, so there's no need to announce them twice.
'aria-hidden': true
},
weekDays: weekDays

@@ -588,5 +564,3 @@ };

var $4d833327a32c9193$exports = {};
$parcel$export($4d833327a32c9193$exports, "useCalendarCell", () => $4d833327a32c9193$export$136073280381448e);

@@ -599,3 +573,2 @@

function $4d833327a32c9193$export$136073280381448e(props, state, ref) {

@@ -786,3 +759,3 @@ let { date: date , isDisabled: isDisabled } = props;

]);
let { errorMessageId: errorMessageId } = $df1d8e967e73ec8e$export$3ddff89c59628ee7.get(state);
let { errorMessageId: errorMessageId } = $df1d8e967e73ec8e$export$653eddfc964b0f8a.get(state);
return {

@@ -835,12 +808,4 @@ cellProps: {

var $c22e9cfd2d8c9e8e$exports = {};
$parcel$exportWildcard(module.exports, $20e845123e697a89$exports);
$parcel$exportWildcard(module.exports, $c49ada48cbc48220$exports);
$parcel$exportWildcard(module.exports, $a07388a797d86b95$exports);
$parcel$exportWildcard(module.exports, $4d833327a32c9193$exports);
$parcel$exportWildcard(module.exports, $c22e9cfd2d8c9e8e$exports);
//# sourceMappingURL=main.js.map

110

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, useSlotId as $amWdn$useSlotId, mergeProps as $amWdn$mergeProps, useEvent as $amWdn$useEvent, useLabels as $amWdn$useLabels, focusWithoutScrolling as $amWdn$focusWithoutScrolling} from "@react-aria/utils";
import {filterDOMProps as $amWdn$filterDOMProps, useUpdateEffect as $amWdn$useUpdateEffect, useSlotId as $amWdn$useSlotId, useLabels as $amWdn$useLabels, mergeProps as $amWdn$mergeProps, useEvent as $amWdn$useEvent, useDescription as $amWdn$useDescription, focusWithoutScrolling as $amWdn$focusWithoutScrolling} from "@react-aria/utils";
import {useRef as $amWdn$useRef, useMemo as $amWdn$useMemo, useEffect as $amWdn$useEffect} from "react";
import {useMessageFormatter as $amWdn$useMessageFormatter, useDateFormatter as $amWdn$useDateFormatter, useLocale as $amWdn$useLocale} from "@react-aria/i18n";
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, getInteractionModality as $amWdn$getInteractionModality} from "@react-aria/interactions";
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
function $parcel$interopDefault(a) {
return a && a.__esModule ? a.default : a;
}
var $9942cad8a072a530$exports = {};
$parcel$export($9942cad8a072a530$exports, "useCalendar", () => $9942cad8a072a530$export$3ee915f8151bd4f1);

@@ -196,3 +191,3 @@

const $a074e1e2d0f0a665$export$3ddff89c59628ee7 = new WeakMap();
const $a074e1e2d0f0a665$export$653eddfc964b0f8a = new WeakMap();
function $a074e1e2d0f0a665$export$b6df97c887c38e1a(state) {

@@ -295,6 +290,5 @@ let formatMessage = $amWdn$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($0fbdc3429b133a50$exports)));

function $c4acc1de3ab169cf$export$d652b3ea2d672d5b(props, state) {
let formatMessage = $amWdn$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($0fbdc3429b133a50$exports)));
let calendarId = $amWdn$useId(props.id);
let domProps = $amWdn$filterDOMProps(props);
let title = $a074e1e2d0f0a665$export$31afe65d91ef6e8(state.visibleRange.start, state.visibleRange.end, state.timeZone, false);

@@ -317,3 +311,2 @@ let visibleRangeDescription = $a074e1e2d0f0a665$export$31afe65d91ef6e8(state.visibleRange.start, state.visibleRange.end, state.timeZone, true);

]);
let descriptionProps = $amWdn$useDescription(visibleRangeDescription);
let errorMessageId = $amWdn$useSlotId([

@@ -323,5 +316,6 @@ Boolean(props.errorMessage),

]);
// Label the child grid elements by the group element if it is labelled.
$a074e1e2d0f0a665$export$3ddff89c59628ee7.set(state, {
calendarId: props['aria-label'] || props['aria-labelledby'] ? calendarId : null,
// Pass the label to the child grid elements.
$a074e1e2d0f0a665$export$653eddfc964b0f8a.set(state, {
ariaLabel: props['aria-label'],
ariaLabelledBy: props['aria-labelledby'],
errorMessageId: errorMessageId

@@ -342,12 +336,14 @@ });

}
let labelProps = $amWdn$useLabels({
id: props['id'],
'aria-label': [
props['aria-label'],
visibleRangeDescription
].filter(Boolean).join(', '),
'aria-labelledby': props['aria-labelledby']
});
return {
calendarProps: $amWdn$mergeProps({
calendarProps: $amWdn$mergeProps(domProps, labelProps, {
role: 'group',
id: calendarId,
'aria-label': props['aria-label'],
'aria-labelledby': props['aria-labelledby'],
'aria-describedby': [
props['aria-describedby'],
descriptionProps['aria-describedby']
].filter(Boolean).join(' ') || undefined
'aria-describedby': props['aria-describedby'] || undefined
}),

@@ -385,12 +381,7 @@ nextButtonProps: {

var $46a4342aab3d8076$exports = {};
$parcel$export($46a4342aab3d8076$exports, "useRangeCalendar", () => $46a4342aab3d8076$export$87e0539f600c24e5);
function $46a4342aab3d8076$export$87e0539f600c24e5(props, state, ref2) {
function $46a4342aab3d8076$export$87e0539f600c24e5(props, state, ref) {
let res = $c4acc1de3ab169cf$export$d652b3ea2d672d5b(props, state);
res.nextButtonProps.id = $amWdn$useId();
res.prevButtonProps.id = $amWdn$useId();
// We need to ignore virtual pointer events from VoiceOver due to these bugs.

@@ -403,3 +394,4 @@ // https://bugs.webkit.org/show_bug.cgi?id=222627

let isVirtualClick = $amWdn$useRef(false);
$amWdn$useEvent($amWdn$useRef(window), 'pointerdown', (e)=>{
let windowRef = $amWdn$useRef(typeof window !== 'undefined' ? window : null);
$amWdn$useEvent(windowRef, 'pointerdown', (e)=>{
isVirtualClick.current = e.width === 0 && e.height === 0;

@@ -410,3 +402,2 @@ });

let endDragging = (e)=>{
var ref, ref1;
if (isVirtualClick.current) {

@@ -420,12 +411,12 @@ isVirtualClick.current = false;

let body = document.getElementById(res.calendarProps.id);
if (body.contains(document.activeElement) && (!body.contains(target) || !target.closest('[role="button"]')) && !((ref = document.getElementById(res.nextButtonProps.id)) === null || ref === void 0 ? void 0 : ref.contains(target)) && !((ref1 = document.getElementById(res.prevButtonProps.id)) === null || ref1 === void 0 ? void 0 : ref1.contains(target))) state.selectFocusedDate();
if (body.contains(document.activeElement) && (!body.contains(target) || !target.closest('button, [role="button"]'))) state.selectFocusedDate();
};
$amWdn$useEvent($amWdn$useRef(window), 'pointerup', endDragging);
$amWdn$useEvent($amWdn$useRef(window), 'pointercancel', endDragging);
$amWdn$useEvent(windowRef, 'pointerup', endDragging);
$amWdn$useEvent(windowRef, 'pointercancel', endDragging);
// Also stop range selection on blur, e.g. tabbing away from the calendar.
res.calendarProps.onBlur = (e)=>{
if ((!e.relatedTarget || !ref2.current.contains(e.relatedTarget)) && state.anchorDate) state.selectFocusedDate();
if ((!e.relatedTarget || !ref.current.contains(e.relatedTarget)) && state.anchorDate) state.selectFocusedDate();
};
// Prevent touch scrolling while dragging
$amWdn$useEvent(ref2, 'touchmove', (e)=>{
$amWdn$useEvent(ref, 'touchmove', (e)=>{
if (state.isDragging) e.preventDefault();

@@ -440,5 +431,3 @@ }, {

var $e3031d1f8c9d64eb$exports = {};
$parcel$export($e3031d1f8c9d64eb$exports, "useCalendarGrid", () => $e3031d1f8c9d64eb$export$cb95147730a423f5);

@@ -448,3 +437,2 @@

function $e3031d1f8c9d64eb$export$cb95147730a423f5(props, state) {

@@ -462,17 +450,15 @@ let { startDate: startDate = state.visibleRange.start , endDate: endDate = state.visibleRange.end } = props;

e.preventDefault();
if (e.shiftKey) state.focusPreviousSection();
else state.focusPreviousPage();
state.focusPreviousSection(e.shiftKey);
break;
case 'PageDown':
e.preventDefault();
if (e.shiftKey) state.focusNextSection();
else state.focusNextPage();
state.focusNextSection(e.shiftKey);
break;
case 'End':
e.preventDefault();
state.focusPageEnd();
state.focusSectionEnd();
break;
case 'Home':
e.preventDefault();
state.focusPageStart();
state.focusSectionStart();
break;

@@ -509,6 +495,9 @@ case 'ArrowLeft':

let visibleRangeDescription = $a074e1e2d0f0a665$export$31afe65d91ef6e8(startDate, endDate, state.timeZone, true);
let { calendarId: calendarId , errorMessageId: errorMessageId } = $a074e1e2d0f0a665$export$3ddff89c59628ee7.get(state);
let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , errorMessageId: errorMessageId } = $a074e1e2d0f0a665$export$653eddfc964b0f8a.get(state);
let labelProps = $amWdn$useLabels({
'aria-label': visibleRangeDescription,
'aria-labelledby': calendarId
'aria-label': [
ariaLabel,
visibleRangeDescription
].filter(Boolean).join(', '),
'aria-labelledby': ariaLabelledBy
});

@@ -519,6 +508,2 @@ let dayFormatter = $amWdn$useDateFormatter({

});
let dayFormatterLong = $amWdn$useDateFormatter({
weekday: 'long',
timeZone: state.timeZone
});
let { locale: locale } = $amWdn$useLocale();

@@ -534,8 +519,3 @@ let weekDays = $amWdn$useMemo(()=>{

let dateDay = date.toDate(state.timeZone);
let narrow = dayFormatter.format(dateDay);
let long = dayFormatterLong.format(dateDay);
return {
narrow: narrow,
long: long
};
return dayFormatter.format(dateDay);
});

@@ -546,4 +526,3 @@ }, [

state.timeZone,
dayFormatter,
dayFormatterLong
dayFormatter
]);

@@ -565,2 +544,7 @@ return {

}),
headerProps: {
// Column headers are hidden to screen readers to make navigating with a touch screen reader easier.
// The day names are already included in the label of each cell, so there's no need to announce them twice.
'aria-hidden': true
},
weekDays: weekDays

@@ -571,5 +555,3 @@ };

var $36a0ac60f04457c5$exports = {};
$parcel$export($36a0ac60f04457c5$exports, "useCalendarCell", () => $36a0ac60f04457c5$export$136073280381448e);

@@ -582,3 +564,2 @@

function $36a0ac60f04457c5$export$136073280381448e(props, state, ref) {

@@ -769,3 +750,3 @@ let { date: date , isDisabled: isDisabled } = props;

]);
let { errorMessageId: errorMessageId } = $a074e1e2d0f0a665$export$3ddff89c59628ee7.get(state);
let { errorMessageId: errorMessageId } = $a074e1e2d0f0a665$export$653eddfc964b0f8a.get(state);
return {

@@ -818,8 +799,5 @@ cellProps: {

var $34109fd41c960533$exports = {};
export {$9942cad8a072a530$export$3ee915f8151bd4f1 as useCalendar, $46a4342aab3d8076$export$87e0539f600c24e5 as useRangeCalendar, $e3031d1f8c9d64eb$export$cb95147730a423f5 as useCalendarGrid, $36a0ac60f04457c5$export$136073280381448e as useCalendarCell};
//# sourceMappingURL=module.js.map

27

dist/types.d.ts

@@ -18,14 +18,2 @@ import { AriaButtonProps } from "@react-types/button";

}
export interface CalendarGridAria {
/** Props for the date grid element (e.g. `<table>`). */
gridProps: HTMLAttributes<HTMLElement>;
/** A list of week days formatted for the current locale, typically used in column headers. */
weekDays: WeekDay[];
}
interface WeekDay {
/** A short name (e.g. single letter) for the day. */
narrow: string;
/** The full day name. If not displayed visually, it should be used as the accessiblity name. */
long: string;
}
/**

@@ -41,3 +29,3 @@ * Provides the behavior and accessibility implementation for a calendar component.

export function useRangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, state: RangeCalendarState, ref: RefObject<HTMLElement>): CalendarAria;
interface CalendarGridProps {
export interface AriaCalendarGridProps {
/**

@@ -56,2 +44,10 @@ * The first date displayed in the calendar grid.

}
export interface CalendarGridAria {
/** Props for the date grid element (e.g. `<table>`). */
gridProps: HTMLAttributes<HTMLElement>;
/** Props for the grid header element (e.g. `<thead>`). */
headerProps: HTMLAttributes<HTMLElement>;
/** A list of week day abbreviations formatted for the current locale, typically used in column headers. */
weekDays: string[];
}
/**

@@ -62,3 +58,3 @@ * Provides the behavior and accessibility implementation for a calendar grid component.

*/
export function useCalendarGrid(props: CalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria;
export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria;
export interface AriaCalendarCellProps {

@@ -73,3 +69,3 @@ /** The date that this cell represents. */

}
interface CalendarCellAria {
export interface CalendarCellAria {
/** Props for the grid cell element (e.g. `<td>`). */

@@ -115,3 +111,4 @@ cellProps: HTMLAttributes<HTMLElement>;

export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarState | RangeCalendarState, ref: RefObject<HTMLElement>): CalendarCellAria;
export type { CalendarProps, RangeCalendarProps } from '@react-types/calendar';
//# sourceMappingURL=types.d.ts.map

23

package.json
{
"name": "@react-aria/calendar",
"version": "3.0.0-nightly.1505+378582d60",
"version": "3.0.0-nightly.1508+cc158b410",
"description": "Spectrum UI components in React",

@@ -21,12 +21,11 @@ "license": "Apache-2.0",

"@babel/runtime": "^7.6.2",
"@internationalized/date": "3.0.0-nightly.3204+378582d60",
"@react-aria/i18n": "3.0.0-nightly.1505+378582d60",
"@react-aria/interactions": "3.0.0-nightly.1505+378582d60",
"@react-aria/live-announcer": "3.0.0-nightly.1505+378582d60",
"@react-aria/utils": "3.0.0-nightly.1505+378582d60",
"@react-stately/calendar": "3.0.0-nightly.1505+378582d60",
"@react-types/button": "3.4.5-nightly.3204+378582d60",
"@react-types/calendar": "3.0.0-nightly.1505+378582d60",
"@react-types/shared": "3.0.0-nightly.1505+378582d60",
"date-fns": "^1.30.1"
"@internationalized/date": "3.0.0-nightly.3207+cc158b410",
"@react-aria/i18n": "3.0.0-nightly.1508+cc158b410",
"@react-aria/interactions": "3.0.0-nightly.1508+cc158b410",
"@react-aria/live-announcer": "3.0.0-nightly.1508+cc158b410",
"@react-aria/utils": "3.0.0-nightly.1508+cc158b410",
"@react-stately/calendar": "3.0.0-nightly.1508+cc158b410",
"@react-types/button": "3.4.5-nightly.3207+cc158b410",
"@react-types/calendar": "3.0.0-nightly.1508+cc158b410",
"@react-types/shared": "3.0.0-nightly.1508+cc158b410"
},

@@ -40,3 +39,3 @@ "peerDependencies": {

},
"gitHead": "378582d606bf55c9937d74c82eb5a9f4fcb82018"
"gitHead": "cc158b410d11894fb2f14cc2732165dd91786036"
}

14

src/index.ts

@@ -13,6 +13,10 @@ /*

export * from './useCalendar';
export * from './useRangeCalendar';
export * from './useCalendarGrid';
export * from './useCalendarCell';
export * from './types';
export {useCalendar} from './useCalendar';
export {useRangeCalendar} from './useRangeCalendar';
export {useCalendarGrid} from './useCalendarGrid';
export {useCalendarCell} from './useCalendarCell';
export type {CalendarProps, RangeCalendarProps} from '@react-types/calendar';
export type {CalendarAria} from './useCalendarBase';
export type {AriaCalendarGridProps, CalendarGridAria} from './useCalendarGrid';
export type {AriaCalendarCellProps, CalendarCellAria} from './useCalendarCell';

3

src/useCalendar.ts

@@ -13,6 +13,5 @@ /*

import {CalendarAria} from './types';
import {CalendarAria, useCalendarBase} from './useCalendarBase';
import {CalendarProps, DateValue} from '@react-types/calendar';
import {CalendarState} from '@react-stately/calendar';
import {useCalendarBase} from './useCalendarBase';

@@ -19,0 +18,0 @@ /**

47

src/useCalendarBase.ts

@@ -14,16 +14,29 @@ /*

import {announce} from '@react-aria/live-announcer';
import {CalendarAria} from './types';
import {calendarIds, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
import {AriaButtonProps} from '@react-types/button';
import {CalendarPropsBase} from '@react-types/calendar';
import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
import {DOMProps} from '@react-types/shared';
import {filterDOMProps, mergeProps, useLabels, useSlotId, useUpdateEffect} from '@react-aria/utils';
import {hookData, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
import {HTMLAttributes, useRef} from 'react';
// @ts-ignore
import intlMessages from '../intl/*.json';
import {mergeProps, useDescription, useId, useSlotId, useUpdateEffect} from '@react-aria/utils';
import {useMessageFormatter} from '@react-aria/i18n';
import {useRef} from 'react';
export interface CalendarAria {
/** Props for the calendar grouping element. */
calendarProps: HTMLAttributes<HTMLElement>,
/** Props for the next button. */
nextButtonProps: AriaButtonProps,
/** Props for the previous button. */
prevButtonProps: AriaButtonProps,
/** Props for the error message element, if any. */
errorMessageProps: HTMLAttributes<HTMLElement>,
/** A description of the visible date range, for use in the calendar title. */
title: string
}
export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: CalendarState | RangeCalendarState): CalendarAria {
let formatMessage = useMessageFormatter(intlMessages);
let calendarId = useId(props.id);
let domProps = filterDOMProps(props);

@@ -50,8 +63,8 @@ let title = useVisibleRangeDescription(state.visibleRange.start, state.visibleRange.end, state.timeZone, false);

let descriptionProps = useDescription(visibleRangeDescription);
let errorMessageId = useSlotId([Boolean(props.errorMessage), props.validationState]);
// Label the child grid elements by the group element if it is labelled.
calendarIds.set(state, {
calendarId: props['aria-label'] || props['aria-labelledby'] ? calendarId : null,
// Pass the label to the child grid elements.
hookData.set(state, {
ariaLabel: props['aria-label'],
ariaLabelledBy: props['aria-labelledby'],
errorMessageId

@@ -75,12 +88,12 @@ });

let labelProps = useLabels({
id: props['id'],
'aria-label': [props['aria-label'], visibleRangeDescription].filter(Boolean).join(', '),
'aria-labelledby': props['aria-labelledby']
});
return {
calendarProps: mergeProps({
calendarProps: mergeProps(domProps, labelProps, {
role: 'group',
id: calendarId,
'aria-label': props['aria-label'],
'aria-labelledby': props['aria-labelledby'],
'aria-describedby': [
props['aria-describedby'],
descriptionProps['aria-describedby']
].filter(Boolean).join(' ') || undefined
'aria-describedby': props['aria-describedby'] || undefined
}),

@@ -87,0 +100,0 @@ nextButtonProps: {

6

src/useCalendarCell.ts

@@ -14,6 +14,6 @@ /*

import {CalendarDate, isEqualDay, isSameDay, isToday} from '@internationalized/date';
import {calendarIds} from './utils';
import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
import {focusWithoutScrolling, useDescription} from '@react-aria/utils';
import {getInteractionModality, usePress} from '@react-aria/interactions';
import {hookData} from './utils';
import {HTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';

@@ -35,3 +35,3 @@ // @ts-ignore

interface CalendarCellAria {
export interface CalendarCellAria {
/** Props for the grid cell element (e.g. `<td>`). */

@@ -291,3 +291,3 @@ cellProps: HTMLAttributes<HTMLElement>,

let formattedDate = useMemo(() => cellDateFormatter.format(nativeDate), [cellDateFormatter, nativeDate]);
let {errorMessageId} = calendarIds.get(state);
let {errorMessageId} = hookData.get(state);

@@ -294,0 +294,0 @@ return {

55

src/useCalendarGrid.ts

@@ -14,10 +14,9 @@ /*

import {CalendarDate, startOfWeek} from '@internationalized/date';
import {CalendarGridAria} from './types';
import {calendarIds, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
import {KeyboardEvent, useMemo} from 'react';
import {hookData, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
import {HTMLAttributes, KeyboardEvent, useMemo} from 'react';
import {mergeProps, useDescription, useLabels} from '@react-aria/utils';
import {useDateFormatter, useLocale} from '@react-aria/i18n';
interface CalendarGridProps {
export interface AriaCalendarGridProps {
/**

@@ -37,2 +36,11 @@ * The first date displayed in the calendar grid.

export interface CalendarGridAria {
/** Props for the date grid element (e.g. `<table>`). */
gridProps: HTMLAttributes<HTMLElement>,
/** Props for the grid header element (e.g. `<thead>`). */
headerProps: HTMLAttributes<HTMLElement>,
/** A list of week day abbreviations formatted for the current locale, typically used in column headers. */
weekDays: string[]
}
/**

@@ -43,3 +51,3 @@ * Provides the behavior and accessibility implementation for a calendar grid component.

*/
export function useCalendarGrid(props: CalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria {
export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria {
let {

@@ -61,23 +69,15 @@ startDate = state.visibleRange.start,

e.preventDefault();
if (e.shiftKey) {
state.focusPreviousSection();
} else {
state.focusPreviousPage();
}
state.focusPreviousSection(e.shiftKey);
break;
case 'PageDown':
e.preventDefault();
if (e.shiftKey) {
state.focusNextSection();
} else {
state.focusNextPage();
}
state.focusNextSection(e.shiftKey);
break;
case 'End':
e.preventDefault();
state.focusPageEnd();
state.focusSectionEnd();
break;
case 'Home':
e.preventDefault();
state.focusPageStart();
state.focusSectionStart();
break;

@@ -122,10 +122,9 @@ case 'ArrowLeft':

let {calendarId, errorMessageId} = calendarIds.get(state);
let {ariaLabel, ariaLabelledBy, errorMessageId} = hookData.get(state);
let labelProps = useLabels({
'aria-label': visibleRangeDescription,
'aria-labelledby': calendarId
'aria-label': [ariaLabel, visibleRangeDescription].filter(Boolean).join(', '),
'aria-labelledby': ariaLabelledBy
});
let dayFormatter = useDateFormatter({weekday: 'narrow', timeZone: state.timeZone});
let dayFormatterLong = useDateFormatter({weekday: 'long', timeZone: state.timeZone});
let {locale} = useLocale();

@@ -137,10 +136,5 @@ let weekDays = useMemo(() => {

let dateDay = date.toDate(state.timeZone);
let narrow = dayFormatter.format(dateDay);
let long = dayFormatterLong.format(dateDay);
return {
narrow,
long
};
return dayFormatter.format(dateDay);
});
}, [state.visibleRange.start, locale, state.timeZone, dayFormatter, dayFormatterLong]);
}, [state.visibleRange.start, locale, state.timeZone, dayFormatter]);

@@ -161,4 +155,9 @@ return {

}),
headerProps: {
// Column headers are hidden to screen readers to make navigating with a touch screen reader easier.
// The day names are already included in the label of each cell, so there's no need to announce them twice.
'aria-hidden': true
},
weekDays
};
}

18

src/useRangeCalendar.ts

@@ -13,8 +13,7 @@ /*

import {CalendarAria} from './types';
import {CalendarAria, useCalendarBase} from './useCalendarBase';
import {DateValue, RangeCalendarProps} from '@react-types/calendar';
import {RangeCalendarState} from '@react-stately/calendar';
import {RefObject, useRef} from 'react';
import {useCalendarBase} from './useCalendarBase';
import {useEvent, useId} from '@react-aria/utils';
import {useEvent} from '@react-aria/utils';

@@ -27,4 +26,2 @@ /**

let res = useCalendarBase(props, state);
res.nextButtonProps.id = useId();
res.prevButtonProps.id = useId();

@@ -38,3 +35,4 @@ // We need to ignore virtual pointer events from VoiceOver due to these bugs.

let isVirtualClick = useRef(false);
useEvent(useRef(window), 'pointerdown', e => {
let windowRef = useRef(typeof window !== 'undefined' ? window : null);
useEvent(windowRef, 'pointerdown', e => {
isVirtualClick.current = e.width === 0 && e.height === 0;

@@ -60,5 +58,3 @@ });

body.contains(document.activeElement) &&
(!body.contains(target) || !target.closest('[role="button"]')) &&
!document.getElementById(res.nextButtonProps.id)?.contains(target) &&
!document.getElementById(res.prevButtonProps.id)?.contains(target)
(!body.contains(target) || !target.closest('button, [role="button"]'))
) {

@@ -69,4 +65,4 @@ state.selectFocusedDate();

useEvent(useRef(window), 'pointerup', endDragging);
useEvent(useRef(window), 'pointercancel', endDragging);
useEvent(windowRef, 'pointerup', endDragging);
useEvent(windowRef, 'pointercancel', endDragging);

@@ -73,0 +69,0 @@ // Also stop range selection on blur, e.g. tabbing away from the calendar.

2

src/utils.ts

@@ -20,3 +20,3 @@ /*

export const calendarIds = new WeakMap<CalendarState | RangeCalendarState, {calendarId: string, errorMessageId: string}>();
export const hookData = new WeakMap<CalendarState | RangeCalendarState, {ariaLabel: string, ariaLabelledBy: string, errorMessageId: string}>();

@@ -23,0 +23,0 @@ export function useSelectedDateDescription(state: CalendarState | RangeCalendarState) {

src/types.ts
dist/main.js.map

Sorry, the diff of this file is not supported yet

dist/module.js.map

Sorry, the diff of this file is not supported yet

dist/types.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc