@react-aria/calendar 3.6.0 → 3.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/types.d.ts +4 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/useCalendarGrid.main.js +4 -3
- package/dist/useCalendarGrid.main.js.map +1 -1
- package/dist/useCalendarGrid.mjs +4 -3
- package/dist/useCalendarGrid.module.js +4 -3
- package/dist/useCalendarGrid.module.js.map +1 -1
- package/package.json +10 -10
- package/src/useCalendarGrid.ts +9 -4
package/dist/types.d.ts
CHANGED
|
@@ -44,6 +44,10 @@ export interface AriaCalendarGridProps {
|
|
|
44
44
|
* @default "narrow"
|
|
45
45
|
*/
|
|
46
46
|
weekdayStyle?: 'narrow' | 'short' | 'long';
|
|
47
|
+
/**
|
|
48
|
+
* The day that starts the week.
|
|
49
|
+
*/
|
|
50
|
+
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
|
|
47
51
|
}
|
|
48
52
|
export interface CalendarGridAria {
|
|
49
53
|
/** Props for the date grid element (e.g. `<table>`). */
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;ACwBA;IACE,+CAA+C;IAC/C,aAAa,EAAE,aAAa,CAAC;IAC7B,iCAAiC;IACjC,eAAe,EAAE,eAAe,CAAC;IACjC,qCAAqC;IACrC,eAAe,EAAE,eAAe,CAAC;IACjC,mDAAmD;IACnD,iBAAiB,EAAE,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;CACd;ACnBD;;;GAGG;AACH,4BAA4B,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,GAAG,YAAY,CAEhH;ACHD;;;GAGG;AACH,iCAAiC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,YAAY,CA0DxK;AC7DD;IACE;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;
|
|
1
|
+
{"mappings":";;;;;ACwBA;IACE,+CAA+C;IAC/C,aAAa,EAAE,aAAa,CAAC;IAC7B,iCAAiC;IACjC,eAAe,EAAE,eAAe,CAAC;IACjC,qCAAqC;IACrC,eAAe,EAAE,eAAe,CAAC;IACjC,mDAAmD;IACnD,iBAAiB,EAAE,aAAa,CAAC;IACjC,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;CACd;ACnBD;;;GAGG;AACH,4BAA4B,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,GAAG,YAAY,CAEhH;ACHD;;;GAGG;AACH,iCAAiC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAE,UAAU,gBAAgB,GAAG,IAAI,CAAC,GAAG,YAAY,CA0DxK;AC7DD;IACE;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;CACvE;AAED;IACE,wDAAwD;IACxD,SAAS,EAAE,aAAa,CAAC;IACzB,0DAA0D;IAC1D,WAAW,EAAE,aAAa,CAAC;IAC3B,2GAA2G;IAC3G,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB;AAED;;;;GAIG;AACH,gCAAgC,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,aAAa,GAAG,kBAAkB,GAAG,gBAAgB,CA8GzH;AClJD;IACE,0CAA0C;IAC1C,IAAI,EAAE,YAAY,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;IACE,qDAAqD;IACrD,SAAS,EAAE,aAAa,CAAC;IACzB,oDAAoD;IACpD,WAAW,EAAE,aAAa,CAAC;IAC3B,mDAAmD;IACnD,SAAS,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,qBAAqB,EAAE,OAAO,CAAC;IAC/B,wDAAwD;IACxD,SAAS,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,aAAa,EAAE,MAAM,CAAA;CACtB;AAED;;;GAGG;AACH,gCAAgC,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,aAAa,GAAG,kBAAkB,EAAE,GAAG,EAAE,UAAU,WAAW,GAAG,IAAI,CAAC,GAAG,gBAAgB,CAsR7J;AC/UD,YAAY,EAAC,iBAAiB,EAAE,sBAAsB,EAAE,aAAa,EAAE,SAAS,EAAE,kBAAkB,EAAC,MAAM,uBAAuB,CAAC","sources":["packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/utils.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendarBase.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendar.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useRangeCalendar.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendarGrid.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendarCell.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/index.ts","packages/@react-aria/calendar/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useCalendar} from './useCalendar';\nexport {useRangeCalendar} from './useRangeCalendar';\nexport {useCalendarGrid} from './useCalendarGrid';\nexport {useCalendarCell} from './useCalendarCell';\n\nexport type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, DateValue, RangeCalendarProps} from '@react-types/calendar';\nexport type {CalendarAria} from './useCalendarBase';\nexport type {AriaCalendarGridProps, CalendarGridAria} from './useCalendarGrid';\nexport type {AriaCalendarCellProps, CalendarCellAria} from './useCalendarCell';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
|
@@ -26,7 +26,7 @@ $parcel$export(module.exports, "useCalendarGrid", () => $a07388a797d86b95$export
|
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
function $a07388a797d86b95$export$cb95147730a423f5(props, state) {
|
|
29
|
-
let { startDate: startDate = state.visibleRange.start, endDate: endDate = state.visibleRange.end } = props;
|
|
29
|
+
let { startDate: startDate = state.visibleRange.start, endDate: endDate = state.visibleRange.end, firstDayOfWeek: firstDayOfWeek } = props;
|
|
30
30
|
let { direction: direction } = (0, $iASLq$reactariai18n.useLocale)();
|
|
31
31
|
let onKeyDown = (e)=>{
|
|
32
32
|
switch(e.key){
|
|
@@ -101,7 +101,7 @@ function $a07388a797d86b95$export$cb95147730a423f5(props, state) {
|
|
|
101
101
|
});
|
|
102
102
|
let { locale: locale } = (0, $iASLq$reactariai18n.useLocale)();
|
|
103
103
|
let weekDays = (0, $iASLq$react.useMemo)(()=>{
|
|
104
|
-
let weekStart = (0, $iASLq$internationalizeddate.startOfWeek)((0, $iASLq$internationalizeddate.today)(state.timeZone), locale);
|
|
104
|
+
let weekStart = (0, $iASLq$internationalizeddate.startOfWeek)((0, $iASLq$internationalizeddate.today)(state.timeZone), locale, firstDayOfWeek);
|
|
105
105
|
return [
|
|
106
106
|
...new Array(7).keys()
|
|
107
107
|
].map((index)=>{
|
|
@@ -114,7 +114,8 @@ function $a07388a797d86b95$export$cb95147730a423f5(props, state) {
|
|
|
114
114
|
}, [
|
|
115
115
|
locale,
|
|
116
116
|
state.timeZone,
|
|
117
|
-
dayFormatter
|
|
117
|
+
dayFormatter,
|
|
118
|
+
firstDayOfWeek
|
|
118
119
|
]);
|
|
119
120
|
return {
|
|
120
121
|
gridProps: (0, $iASLq$reactariautils.mergeProps)(labelProps, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/calendar/src/useCalendarGrid.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CalendarDate, startOfWeek, today} from '@internationalized/date';\nimport {CalendarState, RangeCalendarState} from '@react-stately/calendar';\nimport {DOMAttributes} from '@react-types/shared';\nimport {hookData, useVisibleRangeDescription} from './utils';\nimport {KeyboardEvent, useMemo} from 'react';\nimport {mergeProps, useLabels} from '@react-aria/utils';\nimport {useDateFormatter, useLocale} from '@react-aria/i18n';\n\nexport interface AriaCalendarGridProps {\n /**\n * The first date displayed in the calendar grid.\n * Defaults to the first visible date in the calendar.\n * Override this to display multiple date grids in a calendar.\n */\n startDate?: CalendarDate,\n /**\n * The last date displayed in the calendar grid.\n * Defaults to the last visible date in the calendar.\n * Override this to display multiple date grids in a calendar.\n */\n endDate?: CalendarDate,\n /**\n * The style of weekday names to display in the calendar grid header,\n * e.g. single letter, abbreviation, or full day name.\n * @default \"narrow\"\n */\n weekdayStyle?: 'narrow' | 'short' | 'long',\n /**\n * The day that starts the week.\n */\n firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n}\n\nexport interface CalendarGridAria {\n /** Props for the date grid element (e.g. `<table>`). */\n gridProps: DOMAttributes,\n /** Props for the grid header element (e.g. `<thead>`). */\n headerProps: DOMAttributes,\n /** A list of week day abbreviations formatted for the current locale, typically used in column headers. */\n weekDays: string[]\n}\n\n/**\n * Provides the behavior and accessibility implementation for a calendar grid component.\n * A calendar grid displays a single grid of days within a calendar or range calendar which\n * can be keyboard navigated and selected by the user.\n */\nexport function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria {\n let {\n startDate = state.visibleRange.start,\n endDate = state.visibleRange.end,\n firstDayOfWeek\n } = props;\n\n let {direction} = useLocale();\n\n let onKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n state.selectFocusedDate();\n break;\n case 'PageUp':\n e.preventDefault();\n e.stopPropagation();\n state.focusPreviousSection(e.shiftKey);\n break;\n case 'PageDown':\n e.preventDefault();\n e.stopPropagation();\n state.focusNextSection(e.shiftKey);\n break;\n case 'End':\n e.preventDefault();\n e.stopPropagation();\n state.focusSectionEnd();\n break;\n case 'Home':\n e.preventDefault();\n e.stopPropagation();\n state.focusSectionStart();\n break;\n case 'ArrowLeft':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n state.focusNextDay();\n } else {\n state.focusPreviousDay();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n e.stopPropagation();\n state.focusPreviousRow();\n break;\n case 'ArrowRight':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n state.focusPreviousDay();\n } else {\n state.focusNextDay();\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n e.stopPropagation();\n state.focusNextRow();\n break;\n case 'Escape':\n // Cancel the selection.\n if ('setAnchorDate' in state) {\n e.preventDefault();\n state.setAnchorDate(null);\n }\n break;\n }\n };\n\n let visibleRangeDescription = useVisibleRangeDescription(startDate, endDate, state.timeZone, true);\n\n let {ariaLabel, ariaLabelledBy} = hookData.get(state)!;\n let labelProps = useLabels({\n 'aria-label': [ariaLabel, visibleRangeDescription].filter(Boolean).join(', '),\n 'aria-labelledby': ariaLabelledBy\n });\n\n let dayFormatter = useDateFormatter({weekday: props.weekdayStyle || 'narrow', timeZone: state.timeZone});\n let {locale} = useLocale();\n let weekDays = useMemo(() => {\n let weekStart = startOfWeek(today(state.timeZone), locale, firstDayOfWeek);\n return [...new Array(7).keys()].map((index) => {\n let date = weekStart.add({days: index});\n let dateDay = date.toDate(state.timeZone);\n return dayFormatter.format(dateDay);\n });\n }, [locale, state.timeZone, dayFormatter, firstDayOfWeek]);\n\n return {\n gridProps: mergeProps(labelProps, {\n role: 'grid',\n 'aria-readonly': state.isReadOnly || undefined,\n 'aria-disabled': state.isDisabled || undefined,\n 'aria-multiselectable': ('highlightedRange' in state) || undefined,\n onKeyDown,\n onFocus: () => state.setFocused(true),\n onBlur: () => state.setFocused(false)\n }),\n headerProps: {\n // Column headers are hidden to screen readers to make navigating with a touch screen reader easier.\n // The day names are already included in the label of each cell, so there's no need to announce them twice.\n 'aria-hidden': true\n },\n weekDays\n };\n}\n"],"names":[],"version":3,"file":"useCalendarGrid.main.js.map"}
|
package/dist/useCalendarGrid.mjs
CHANGED
|
@@ -20,7 +20,7 @@ import {useLocale as $NQfxu$useLocale, useDateFormatter as $NQfxu$useDateFormatt
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
function $e3031d1f8c9d64eb$export$cb95147730a423f5(props, state) {
|
|
23
|
-
let { startDate: startDate = state.visibleRange.start, endDate: endDate = state.visibleRange.end } = props;
|
|
23
|
+
let { startDate: startDate = state.visibleRange.start, endDate: endDate = state.visibleRange.end, firstDayOfWeek: firstDayOfWeek } = props;
|
|
24
24
|
let { direction: direction } = (0, $NQfxu$useLocale)();
|
|
25
25
|
let onKeyDown = (e)=>{
|
|
26
26
|
switch(e.key){
|
|
@@ -95,7 +95,7 @@ function $e3031d1f8c9d64eb$export$cb95147730a423f5(props, state) {
|
|
|
95
95
|
});
|
|
96
96
|
let { locale: locale } = (0, $NQfxu$useLocale)();
|
|
97
97
|
let weekDays = (0, $NQfxu$useMemo)(()=>{
|
|
98
|
-
let weekStart = (0, $NQfxu$startOfWeek)((0, $NQfxu$today)(state.timeZone), locale);
|
|
98
|
+
let weekStart = (0, $NQfxu$startOfWeek)((0, $NQfxu$today)(state.timeZone), locale, firstDayOfWeek);
|
|
99
99
|
return [
|
|
100
100
|
...new Array(7).keys()
|
|
101
101
|
].map((index)=>{
|
|
@@ -108,7 +108,8 @@ function $e3031d1f8c9d64eb$export$cb95147730a423f5(props, state) {
|
|
|
108
108
|
}, [
|
|
109
109
|
locale,
|
|
110
110
|
state.timeZone,
|
|
111
|
-
dayFormatter
|
|
111
|
+
dayFormatter,
|
|
112
|
+
firstDayOfWeek
|
|
112
113
|
]);
|
|
113
114
|
return {
|
|
114
115
|
gridProps: (0, $NQfxu$mergeProps)(labelProps, {
|
|
@@ -20,7 +20,7 @@ import {useLocale as $NQfxu$useLocale, useDateFormatter as $NQfxu$useDateFormatt
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
function $e3031d1f8c9d64eb$export$cb95147730a423f5(props, state) {
|
|
23
|
-
let { startDate: startDate = state.visibleRange.start, endDate: endDate = state.visibleRange.end } = props;
|
|
23
|
+
let { startDate: startDate = state.visibleRange.start, endDate: endDate = state.visibleRange.end, firstDayOfWeek: firstDayOfWeek } = props;
|
|
24
24
|
let { direction: direction } = (0, $NQfxu$useLocale)();
|
|
25
25
|
let onKeyDown = (e)=>{
|
|
26
26
|
switch(e.key){
|
|
@@ -95,7 +95,7 @@ function $e3031d1f8c9d64eb$export$cb95147730a423f5(props, state) {
|
|
|
95
95
|
});
|
|
96
96
|
let { locale: locale } = (0, $NQfxu$useLocale)();
|
|
97
97
|
let weekDays = (0, $NQfxu$useMemo)(()=>{
|
|
98
|
-
let weekStart = (0, $NQfxu$startOfWeek)((0, $NQfxu$today)(state.timeZone), locale);
|
|
98
|
+
let weekStart = (0, $NQfxu$startOfWeek)((0, $NQfxu$today)(state.timeZone), locale, firstDayOfWeek);
|
|
99
99
|
return [
|
|
100
100
|
...new Array(7).keys()
|
|
101
101
|
].map((index)=>{
|
|
@@ -108,7 +108,8 @@ function $e3031d1f8c9d64eb$export$cb95147730a423f5(props, state) {
|
|
|
108
108
|
}, [
|
|
109
109
|
locale,
|
|
110
110
|
state.timeZone,
|
|
111
|
-
dayFormatter
|
|
111
|
+
dayFormatter,
|
|
112
|
+
firstDayOfWeek
|
|
112
113
|
]);
|
|
113
114
|
return {
|
|
114
115
|
gridProps: (0, $NQfxu$mergeProps)(labelProps, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;;
|
|
1
|
+
{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAiDM,SAAS,0CAAgB,KAA4B,EAAE,KAAyC;IACrG,IAAI,aACF,YAAY,MAAM,YAAY,CAAC,KAAK,WACpC,UAAU,MAAM,YAAY,CAAC,GAAG,kBAChC,cAAc,EACf,GAAG;IAEJ,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAE1B,IAAI,YAAY,CAAC;QACf,OAAQ,EAAE,GAAG;YACX,KAAK;YACL,KAAK;gBACH,EAAE,cAAc;gBAChB,MAAM,iBAAiB;gBACvB;YACF,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,MAAM,oBAAoB,CAAC,EAAE,QAAQ;gBACrC;YACF,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,MAAM,gBAAgB,CAAC,EAAE,QAAQ;gBACjC;YACF,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,MAAM,eAAe;gBACrB;YACF,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,MAAM,iBAAiB;gBACvB;YACF,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,IAAI,cAAc,OAChB,MAAM,YAAY;qBAElB,MAAM,gBAAgB;gBAExB;YACF,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,MAAM,gBAAgB;gBACtB;YACF,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,IAAI,cAAc,OAChB,MAAM,gBAAgB;qBAEtB,MAAM,YAAY;gBAEpB;YACF,KAAK;gBACH,EAAE,cAAc;gBAChB,EAAE,eAAe;gBACjB,MAAM,YAAY;gBAClB;YACF,KAAK;gBACH,wBAAwB;gBACxB,IAAI,mBAAmB,OAAO;oBAC5B,EAAE,cAAc;oBAChB,MAAM,aAAa,CAAC;gBACtB;gBACA;QACJ;IACF;IAEA,IAAI,0BAA0B,CAAA,GAAA,wCAAyB,EAAE,WAAW,SAAS,MAAM,QAAQ,EAAE;IAE7F,IAAI,aAAC,SAAS,kBAAE,cAAc,EAAC,GAAG,CAAA,GAAA,yCAAO,EAAE,GAAG,CAAC;IAC/C,IAAI,aAAa,CAAA,GAAA,gBAAQ,EAAE;QACzB,cAAc;YAAC;YAAW;SAAwB,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC;QACxE,mBAAmB;IACrB;IAEA,IAAI,eAAe,CAAA,GAAA,uBAAe,EAAE;QAAC,SAAS,MAAM,YAAY,IAAI;QAAU,UAAU,MAAM,QAAQ;IAAA;IACtG,IAAI,UAAC,MAAM,EAAC,GAAG,CAAA,GAAA,gBAAQ;IACvB,IAAI,WAAW,CAAA,GAAA,cAAM,EAAE;QACrB,IAAI,YAAY,CAAA,GAAA,kBAAU,EAAE,CAAA,GAAA,YAAI,EAAE,MAAM,QAAQ,GAAG,QAAQ;QAC3D,OAAO;eAAI,IAAI,MAAM,GAAG,IAAI;SAAG,CAAC,GAAG,CAAC,CAAC;YACnC,IAAI,OAAO,UAAU,GAAG,CAAC;gBAAC,MAAM;YAAK;YACrC,IAAI,UAAU,KAAK,MAAM,CAAC,MAAM,QAAQ;YACxC,OAAO,aAAa,MAAM,CAAC;QAC7B;IACF,GAAG;QAAC;QAAQ,MAAM,QAAQ;QAAE;QAAc;KAAe;IAEzD,OAAO;QACL,WAAW,CAAA,GAAA,iBAAS,EAAE,YAAY;YAChC,MAAM;YACN,iBAAiB,MAAM,UAAU,IAAI;YACrC,iBAAiB,MAAM,UAAU,IAAI;YACrC,wBAAwB,AAAC,sBAAsB,SAAU;uBACzD;YACA,SAAS,IAAM,MAAM,UAAU,CAAC;YAChC,QAAQ,IAAM,MAAM,UAAU,CAAC;QACjC;QACA,aAAa;YACX,oGAAoG;YACpG,2GAA2G;YAC3G,eAAe;QACjB;kBACA;IACF;AACF","sources":["packages/@react-aria/calendar/src/useCalendarGrid.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {CalendarDate, startOfWeek, today} from '@internationalized/date';\nimport {CalendarState, RangeCalendarState} from '@react-stately/calendar';\nimport {DOMAttributes} from '@react-types/shared';\nimport {hookData, useVisibleRangeDescription} from './utils';\nimport {KeyboardEvent, useMemo} from 'react';\nimport {mergeProps, useLabels} from '@react-aria/utils';\nimport {useDateFormatter, useLocale} from '@react-aria/i18n';\n\nexport interface AriaCalendarGridProps {\n /**\n * The first date displayed in the calendar grid.\n * Defaults to the first visible date in the calendar.\n * Override this to display multiple date grids in a calendar.\n */\n startDate?: CalendarDate,\n /**\n * The last date displayed in the calendar grid.\n * Defaults to the last visible date in the calendar.\n * Override this to display multiple date grids in a calendar.\n */\n endDate?: CalendarDate,\n /**\n * The style of weekday names to display in the calendar grid header,\n * e.g. single letter, abbreviation, or full day name.\n * @default \"narrow\"\n */\n weekdayStyle?: 'narrow' | 'short' | 'long',\n /**\n * The day that starts the week.\n */\n firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'\n}\n\nexport interface CalendarGridAria {\n /** Props for the date grid element (e.g. `<table>`). */\n gridProps: DOMAttributes,\n /** Props for the grid header element (e.g. `<thead>`). */\n headerProps: DOMAttributes,\n /** A list of week day abbreviations formatted for the current locale, typically used in column headers. */\n weekDays: string[]\n}\n\n/**\n * Provides the behavior and accessibility implementation for a calendar grid component.\n * A calendar grid displays a single grid of days within a calendar or range calendar which\n * can be keyboard navigated and selected by the user.\n */\nexport function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria {\n let {\n startDate = state.visibleRange.start,\n endDate = state.visibleRange.end,\n firstDayOfWeek\n } = props;\n\n let {direction} = useLocale();\n\n let onKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n state.selectFocusedDate();\n break;\n case 'PageUp':\n e.preventDefault();\n e.stopPropagation();\n state.focusPreviousSection(e.shiftKey);\n break;\n case 'PageDown':\n e.preventDefault();\n e.stopPropagation();\n state.focusNextSection(e.shiftKey);\n break;\n case 'End':\n e.preventDefault();\n e.stopPropagation();\n state.focusSectionEnd();\n break;\n case 'Home':\n e.preventDefault();\n e.stopPropagation();\n state.focusSectionStart();\n break;\n case 'ArrowLeft':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n state.focusNextDay();\n } else {\n state.focusPreviousDay();\n }\n break;\n case 'ArrowUp':\n e.preventDefault();\n e.stopPropagation();\n state.focusPreviousRow();\n break;\n case 'ArrowRight':\n e.preventDefault();\n e.stopPropagation();\n if (direction === 'rtl') {\n state.focusPreviousDay();\n } else {\n state.focusNextDay();\n }\n break;\n case 'ArrowDown':\n e.preventDefault();\n e.stopPropagation();\n state.focusNextRow();\n break;\n case 'Escape':\n // Cancel the selection.\n if ('setAnchorDate' in state) {\n e.preventDefault();\n state.setAnchorDate(null);\n }\n break;\n }\n };\n\n let visibleRangeDescription = useVisibleRangeDescription(startDate, endDate, state.timeZone, true);\n\n let {ariaLabel, ariaLabelledBy} = hookData.get(state)!;\n let labelProps = useLabels({\n 'aria-label': [ariaLabel, visibleRangeDescription].filter(Boolean).join(', '),\n 'aria-labelledby': ariaLabelledBy\n });\n\n let dayFormatter = useDateFormatter({weekday: props.weekdayStyle || 'narrow', timeZone: state.timeZone});\n let {locale} = useLocale();\n let weekDays = useMemo(() => {\n let weekStart = startOfWeek(today(state.timeZone), locale, firstDayOfWeek);\n return [...new Array(7).keys()].map((index) => {\n let date = weekStart.add({days: index});\n let dateDay = date.toDate(state.timeZone);\n return dayFormatter.format(dateDay);\n });\n }, [locale, state.timeZone, dayFormatter, firstDayOfWeek]);\n\n return {\n gridProps: mergeProps(labelProps, {\n role: 'grid',\n 'aria-readonly': state.isReadOnly || undefined,\n 'aria-disabled': state.isDisabled || undefined,\n 'aria-multiselectable': ('highlightedRange' in state) || undefined,\n onKeyDown,\n onFocus: () => state.setFocused(true),\n onBlur: () => state.setFocused(false)\n }),\n headerProps: {\n // Column headers are hidden to screen readers to make navigating with a touch screen reader easier.\n // The day names are already included in the label of each cell, so there's no need to announce them twice.\n 'aria-hidden': true\n },\n weekDays\n };\n}\n"],"names":[],"version":3,"file":"useCalendarGrid.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/calendar",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.7.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,15 +22,15 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@internationalized/date": "^3.
|
|
26
|
-
"@react-aria/i18n": "^3.12.
|
|
27
|
-
"@react-aria/interactions": "^3.
|
|
25
|
+
"@internationalized/date": "^3.7.0",
|
|
26
|
+
"@react-aria/i18n": "^3.12.5",
|
|
27
|
+
"@react-aria/interactions": "^3.23.0",
|
|
28
28
|
"@react-aria/live-announcer": "^3.4.1",
|
|
29
|
-
"@react-aria/utils": "^3.
|
|
30
|
-
"@react-stately/calendar": "^3.
|
|
31
|
-
"@react-types/button": "^3.10.
|
|
32
|
-
"@react-types/calendar": "^3.
|
|
33
|
-
"@react-types/shared": "^3.
|
|
29
|
+
"@react-aria/utils": "^3.27.0",
|
|
30
|
+
"@react-stately/calendar": "^3.7.0",
|
|
31
|
+
"@react-types/button": "^3.10.2",
|
|
32
|
+
"@react-types/calendar": "^3.6.0",
|
|
33
|
+
"@react-types/shared": "^3.27.0",
|
|
34
34
|
"@swc/helpers": "^0.5.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
@@ -40,5 +40,5 @@
|
|
|
40
40
|
"publishConfig": {
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
|
|
44
44
|
}
|
package/src/useCalendarGrid.ts
CHANGED
|
@@ -36,7 +36,11 @@ export interface AriaCalendarGridProps {
|
|
|
36
36
|
* e.g. single letter, abbreviation, or full day name.
|
|
37
37
|
* @default "narrow"
|
|
38
38
|
*/
|
|
39
|
-
weekdayStyle?: 'narrow' | 'short' | 'long'
|
|
39
|
+
weekdayStyle?: 'narrow' | 'short' | 'long',
|
|
40
|
+
/**
|
|
41
|
+
* The day that starts the week.
|
|
42
|
+
*/
|
|
43
|
+
firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
|
|
40
44
|
}
|
|
41
45
|
|
|
42
46
|
export interface CalendarGridAria {
|
|
@@ -56,7 +60,8 @@ export interface CalendarGridAria {
|
|
|
56
60
|
export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria {
|
|
57
61
|
let {
|
|
58
62
|
startDate = state.visibleRange.start,
|
|
59
|
-
endDate = state.visibleRange.end
|
|
63
|
+
endDate = state.visibleRange.end,
|
|
64
|
+
firstDayOfWeek
|
|
60
65
|
} = props;
|
|
61
66
|
|
|
62
67
|
let {direction} = useLocale();
|
|
@@ -137,13 +142,13 @@ export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarSta
|
|
|
137
142
|
let dayFormatter = useDateFormatter({weekday: props.weekdayStyle || 'narrow', timeZone: state.timeZone});
|
|
138
143
|
let {locale} = useLocale();
|
|
139
144
|
let weekDays = useMemo(() => {
|
|
140
|
-
let weekStart = startOfWeek(today(state.timeZone), locale);
|
|
145
|
+
let weekStart = startOfWeek(today(state.timeZone), locale, firstDayOfWeek);
|
|
141
146
|
return [...new Array(7).keys()].map((index) => {
|
|
142
147
|
let date = weekStart.add({days: index});
|
|
143
148
|
let dateDay = date.toDate(state.timeZone);
|
|
144
149
|
return dayFormatter.format(dateDay);
|
|
145
150
|
});
|
|
146
|
-
}, [locale, state.timeZone, dayFormatter]);
|
|
151
|
+
}, [locale, state.timeZone, dayFormatter, firstDayOfWeek]);
|
|
147
152
|
|
|
148
153
|
return {
|
|
149
154
|
gridProps: mergeProps(labelProps, {
|