Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-aria/datepicker
Advanced tools
@react-aria/datepicker - npm Package Compare versions
Comparing version 3.0.0-nightly.3091 to 3.0.0-nightly.3094
781
dist/main.js
@@ -1,772 +0,35 @@ | ||
| var $38jq8$reactariafocus = require("@react-aria/focus"); | ||
| var $38jq8$reactariautils = require("@react-aria/utils"); | ||
| var $38jq8$reactarialabel = require("@react-aria/label"); | ||
| var $38jq8$reactariai18n = require("@react-aria/i18n"); | ||
| var $38jq8$reactariainteractions = require("@react-aria/interactions"); | ||
| var $38jq8$internationalizednumber = require("@internationalized/number"); | ||
| var $38jq8$react = require("react"); | ||
| var $38jq8$reactariaspinbutton = require("@react-aria/spinbutton"); | ||
| var $38jq8$internationalizedmessage = require("@internationalized/message"); | ||
| var $e90ae7c26a69c6b1$exports = require("./useDatePicker.main.js"); | ||
| var $5c015c6316d1904d$exports = require("./useDateSegment.main.js"); | ||
| var $4acc2f407c169e55$exports = require("./useDateField.main.js"); | ||
| var $20f695b1b69e6b9e$exports = require("./useDateRangePicker.main.js"); | ||
| var $934ac650a0aceb4b$exports = require("./useDisplayNames.main.js"); | ||
| 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$interopDefault(a) { | ||
| return a && a.__esModule ? a.default : a; | ||
| } | ||
| function $parcel$export(e, n, v, s) { | ||
| Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
| } | ||
| var $45cbb87b2f427873$exports = {}; | ||
| $parcel$export($45cbb87b2f427873$exports, "useDatePicker", () => $45cbb87b2f427873$export$42df105a73306d51); | ||
| $parcel$export(module.exports, "useDatePicker", () => $e90ae7c26a69c6b1$exports.useDatePicker); | ||
| $parcel$export(module.exports, "useDateSegment", () => $5c015c6316d1904d$exports.useDateSegment); | ||
| $parcel$export(module.exports, "useDateField", () => $4acc2f407c169e55$exports.useDateField); | ||
| $parcel$export(module.exports, "useTimeField", () => $4acc2f407c169e55$exports.useTimeField); | ||
| $parcel$export(module.exports, "useDateRangePicker", () => $20f695b1b69e6b9e$exports.useDateRangePicker); | ||
| $parcel$export(module.exports, "useDisplayNames", () => $934ac650a0aceb4b$exports.useDisplayNames); | ||
| /* | ||
| * Copyright 2020 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
| var $4c3c9b804e8a0c68$exports = {}; | ||
| var $6e5c6ed0c6d0cf53$exports = {}; | ||
| $6e5c6ed0c6d0cf53$exports = JSON.parse("{\"calendar\":\"التقويم\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} إلى {end, date, long}\",\"date\":\"التاريخ\",\"dateRange\":\"نطاق التاريخ\",\"day\":\"يوم\",\"dayPeriod\":\"ص/م\",\"endDate\":\"تاريخ الانتهاء\",\"era\":\"العصر\",\"hour\":\"الساعات\",\"minute\":\"الدقائق\",\"month\":\"الشهر\",\"second\":\"الثواني\",\"startDate\":\"تاريخ البدء\",\"year\":\"السنة\",\"weekday\":\"اليوم\",\"timeZoneName\":\"التوقيت\"}"); | ||
| var $d98a93fc9bec28b6$exports = {}; | ||
| $d98a93fc9bec28b6$exports = JSON.parse("{\"calendar\":\"Календар\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} до {end, date, long}\",\"date\":\"Дата\",\"dateRange\":\"Времеви интервал\",\"day\":\"ден\",\"dayPeriod\":\"пр.об./сл.об.\",\"endDate\":\"Крайна дата\",\"era\":\"ера\",\"hour\":\"час\",\"minute\":\"минута\",\"month\":\"месец\",\"second\":\"секунда\",\"startDate\":\"Начална дата\",\"year\":\"година\",\"weekday\":\"ден от седмицата\",\"timeZoneName\":\"часова зона\"}"); | ||
| var $d5d47d2867f7c1bd$exports = {}; | ||
| $d5d47d2867f7c1bd$exports = JSON.parse("{\"calendar\":\"Kalendář\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} až {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Rozsah dat\",\"day\":\"den\",\"dayPeriod\":\"část dne\",\"endDate\":\"Konečné datum\",\"era\":\"letopočet\",\"hour\":\"hodina\",\"minute\":\"minuta\",\"month\":\"měsíc\",\"second\":\"sekunda\",\"startDate\":\"Počáteční datum\",\"year\":\"rok\",\"weekday\":\"den v týdnu\",\"timeZoneName\":\"časové pásmo\"}"); | ||
| var $9f5243668e7aa09e$exports = {}; | ||
| $9f5243668e7aa09e$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} til {end, date, long}\",\"date\":\"Dato\",\"dateRange\":\"Datointerval\",\"day\":\"dag\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Slutdato\",\"era\":\"æra\",\"hour\":\"time\",\"minute\":\"minut\",\"month\":\"måned\",\"second\":\"sekund\",\"startDate\":\"Startdato\",\"year\":\"år\",\"weekday\":\"ugedag\",\"timeZoneName\":\"tidszone\"}"); | ||
| var $dd0db059c73b3efa$exports = {}; | ||
| $dd0db059c73b3efa$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} bis {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Datumsbereich\",\"day\":\"Tag\",\"dayPeriod\":\"Tageshälfte\",\"endDate\":\"Enddatum\",\"era\":\"Epoche\",\"hour\":\"Stunde\",\"minute\":\"Minute\",\"month\":\"Monat\",\"second\":\"Sekunde\",\"startDate\":\"Anfangsdatum\",\"year\":\"Jahr\",\"weekday\":\"Wochentag\",\"timeZoneName\":\"Zeitzone\"}"); | ||
| var $e45055be77f2dc98$exports = {}; | ||
| $e45055be77f2dc98$exports = JSON.parse("{\"calendar\":\"Ημερολόγιο\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} ως {end, date, long}\",\"date\":\"Ημερομηνία\",\"dateRange\":\"Εύρος ημερομηνιών\",\"day\":\"ημέρα\",\"dayPeriod\":\"π.μ./μ.μ.\",\"endDate\":\"Ημερομηνία λήξης\",\"era\":\"περίοδος\",\"hour\":\"ώρα\",\"minute\":\"λεπτό\",\"month\":\"μήνας\",\"second\":\"δευτερόλεπτο\",\"startDate\":\"Ημερομηνία έναρξης\",\"year\":\"έτος\",\"weekday\":\"καθημερινή\",\"timeZoneName\":\"ζώνη ώρας\"}"); | ||
| var $7b73c1382219c3e5$exports = {}; | ||
| $7b73c1382219c3e5$exports = JSON.parse("{\"era\":\"era\",\"year\":\"year\",\"month\":\"month\",\"day\":\"day\",\"hour\":\"hour\",\"minute\":\"minute\",\"second\":\"second\",\"dayPeriod\":\"AM/PM\",\"calendar\":\"Calendar\",\"date\":\"Date\",\"dateRange\":\"Date Range\",\"startDate\":\"Start Date\",\"endDate\":\"End Date\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} to {end, date, long}\",\"weekday\":\"day of the week\",\"timeZoneName\":\"time zone\"}"); | ||
| var $88ad5054e6cbd3b8$exports = {}; | ||
| $88ad5054e6cbd3b8$exports = JSON.parse("{\"calendar\":\"Calendario\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} a {end, date, long}\",\"date\":\"Fecha\",\"dateRange\":\"Intervalo de fecha\",\"day\":\"día\",\"dayPeriod\":\"a. m./p. m.\",\"endDate\":\"Fecha final\",\"era\":\"era\",\"hour\":\"hora\",\"minute\":\"minuto\",\"month\":\"mes\",\"second\":\"segundo\",\"startDate\":\"Fecha de inicio\",\"year\":\"año\",\"weekday\":\"día de la semana\",\"timeZoneName\":\"zona horaria\"}"); | ||
| var $6e60a874d6c8f7d4$exports = {}; | ||
| $6e60a874d6c8f7d4$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} kuni {end, date, long}\",\"date\":\"Kuupäev\",\"dateRange\":\"Kuupäevavahemik\",\"day\":\"päev\",\"dayPeriod\":\"enne/pärast lõunat\",\"endDate\":\"Lõppkuupäev\",\"era\":\"ajastu\",\"hour\":\"tund\",\"minute\":\"minut\",\"month\":\"kuu\",\"second\":\"sekund\",\"startDate\":\"Alguskuupäev\",\"year\":\"aasta\",\"weekday\":\"nädalapäev\",\"timeZoneName\":\"ajavöönd\"}"); | ||
| var $cefbba0f94e2a923$exports = {}; | ||
| $cefbba0f94e2a923$exports = JSON.parse("{\"calendar\":\"Kalenteri\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long}–{end, date, long}\",\"date\":\"Päivämäärä\",\"dateRange\":\"Päivämääräalue\",\"day\":\"päivä\",\"dayPeriod\":\"vuorokaudenaika\",\"endDate\":\"Päättymispäivä\",\"era\":\"aikakausi\",\"hour\":\"tunti\",\"minute\":\"minuutti\",\"month\":\"kuukausi\",\"second\":\"sekunti\",\"startDate\":\"Alkamispäivä\",\"year\":\"vuosi\",\"weekday\":\"viikonpäivä\",\"timeZoneName\":\"aikavyöhyke\"}"); | ||
| var $d28136fcca1c0bce$exports = {}; | ||
| $d28136fcca1c0bce$exports = JSON.parse("{\"calendar\":\"Calendrier\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} au {end, date, long}\",\"date\":\"Date\",\"dateRange\":\"Plage de dates\",\"day\":\"jour\",\"dayPeriod\":\"cadran\",\"endDate\":\"Date de fin\",\"era\":\"ère\",\"hour\":\"heure\",\"minute\":\"minute\",\"month\":\"mois\",\"second\":\"seconde\",\"startDate\":\"Date de début\",\"year\":\"année\",\"weekday\":\"jour de la semaine\",\"timeZoneName\":\"fuseau horaire\"}"); | ||
| var $56a5db202f754538$exports = {}; | ||
| $56a5db202f754538$exports = JSON.parse("{\"calendar\":\"לוח שנה\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"מ-{start, date, long} ועד {end, date, long}\",\"date\":\"תאריך\",\"dateRange\":\"טווח תאריכים\",\"day\":\"יום\",\"dayPeriod\":\"לפנה״צ/אחה״צ\",\"endDate\":\"תאריך סיום\",\"era\":\"תקופה\",\"hour\":\"שעה\",\"minute\":\"דקה\",\"month\":\"חודש\",\"second\":\"שנייה\",\"startDate\":\"תאריך התחלה\",\"year\":\"שנה\",\"weekday\":\"יום בשבוע\",\"timeZoneName\":\"אזור זמן\"}"); | ||
| var $ba6b4158cd8674bd$exports = {}; | ||
| $ba6b4158cd8674bd$exports = JSON.parse("{\"calendar\":\"Kalendar\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} do {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Raspon datuma\",\"day\":\"dan\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Datum završetka\",\"era\":\"era\",\"hour\":\"sat\",\"minute\":\"minuta\",\"month\":\"mjesec\",\"second\":\"sekunda\",\"startDate\":\"Datum početka\",\"year\":\"godina\",\"weekday\":\"dan u tjednu\",\"timeZoneName\":\"vremenska zona\"}"); | ||
| var $03dacd0629430097$exports = {}; | ||
| $03dacd0629430097$exports = JSON.parse("{\"calendar\":\"Naptár\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} – {end, date, long}\",\"date\":\"Dátum\",\"dateRange\":\"Dátumtartomány\",\"day\":\"nap\",\"dayPeriod\":\"napszak\",\"endDate\":\"Befejező dátum\",\"era\":\"éra\",\"hour\":\"óra\",\"minute\":\"perc\",\"month\":\"hónap\",\"second\":\"másodperc\",\"startDate\":\"Kezdő dátum\",\"year\":\"év\",\"weekday\":\"hét napja\",\"timeZoneName\":\"időzóna\"}"); | ||
| var $8bcb449c3158f1c9$exports = {}; | ||
| $8bcb449c3158f1c9$exports = JSON.parse("{\"calendar\":\"Calendario\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"Da {start, date, long} a {end, date, long}\",\"date\":\"Data\",\"dateRange\":\"Intervallo date\",\"day\":\"giorno\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Data finale\",\"era\":\"era\",\"hour\":\"ora\",\"minute\":\"minuto\",\"month\":\"mese\",\"second\":\"secondo\",\"startDate\":\"Data iniziale\",\"year\":\"anno\",\"weekday\":\"giorno della settimana\",\"timeZoneName\":\"fuso orario\"}"); | ||
| var $41343b48452e5797$exports = {}; | ||
| $41343b48452e5797$exports = JSON.parse("{\"calendar\":\"カレンダー\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} ～ {end, date, long}\",\"date\":\"日付\",\"dateRange\":\"日付範囲\",\"day\":\"日\",\"dayPeriod\":\"午前/午後\",\"endDate\":\"終了日\",\"era\":\"時代\",\"hour\":\"時\",\"minute\":\"分\",\"month\":\"月\",\"second\":\"秒\",\"startDate\":\"開始日\",\"year\":\"年\",\"weekday\":\"曜日\",\"timeZoneName\":\"タイムゾーン\"}"); | ||
| var $4e9d0754f39a8598$exports = {}; | ||
| $4e9d0754f39a8598$exports = JSON.parse("{\"calendar\":\"달력\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} ~ {end, date, long}\",\"date\":\"날짜\",\"dateRange\":\"날짜 범위\",\"day\":\"일\",\"dayPeriod\":\"오전/오후\",\"endDate\":\"종료 날짜\",\"era\":\"연호\",\"hour\":\"시\",\"minute\":\"분\",\"month\":\"월\",\"second\":\"초\",\"startDate\":\"시작 날짜\",\"year\":\"년\",\"weekday\":\"요일\",\"timeZoneName\":\"시간대\"}"); | ||
| var $12658256f1706061$exports = {}; | ||
| $12658256f1706061$exports = JSON.parse("{\"calendar\":\"Kalendorius\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"Nuo {start, date, long} iki {end, date, long}\",\"date\":\"Data\",\"dateRange\":\"Datų intervalas\",\"day\":\"diena\",\"dayPeriod\":\"iki pietų / po pietų\",\"endDate\":\"Pabaigos data\",\"era\":\"era\",\"hour\":\"valanda\",\"minute\":\"minutė\",\"month\":\"mėnuo\",\"second\":\"sekundė\",\"startDate\":\"Pradžios data\",\"year\":\"metai\",\"weekday\":\"savaitės diena\",\"timeZoneName\":\"laiko juosta\"}"); | ||
| var $b1d8a01eaf0d2fe0$exports = {}; | ||
| $b1d8a01eaf0d2fe0$exports = JSON.parse("{\"calendar\":\"Kalendārs\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} līdz {end, date, long}\",\"date\":\"Datums\",\"dateRange\":\"Datumu diapazons\",\"day\":\"diena\",\"dayPeriod\":\"priekšpusdienā/pēcpusdienā\",\"endDate\":\"Beigu datums\",\"era\":\"ēra\",\"hour\":\"stundas\",\"minute\":\"minūtes\",\"month\":\"mēnesis\",\"second\":\"sekundes\",\"startDate\":\"Sākuma datums\",\"year\":\"gads\",\"weekday\":\"nedēļas diena\",\"timeZoneName\":\"laika josla\"}"); | ||
| var $0215911d568a5e84$exports = {}; | ||
| $0215911d568a5e84$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} til {end, date, long}\",\"date\":\"Dato\",\"dateRange\":\"Datoområde\",\"day\":\"dag\",\"dayPeriod\":\"a.m./p.m.\",\"endDate\":\"Sluttdato\",\"era\":\"tidsalder\",\"hour\":\"time\",\"minute\":\"minutt\",\"month\":\"måned\",\"second\":\"sekund\",\"startDate\":\"Startdato\",\"year\":\"år\",\"weekday\":\"ukedag\",\"timeZoneName\":\"tidssone\"}"); | ||
| var $6c8ba76d61a809c5$exports = {}; | ||
| $6c8ba76d61a809c5$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} t/m {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Datumbereik\",\"day\":\"dag\",\"dayPeriod\":\"a.m./p.m.\",\"endDate\":\"Einddatum\",\"era\":\"tijdperk\",\"hour\":\"uur\",\"minute\":\"minuut\",\"month\":\"maand\",\"second\":\"seconde\",\"startDate\":\"Startdatum\",\"year\":\"jaar\",\"weekday\":\"dag van de week\",\"timeZoneName\":\"tijdzone\"}"); | ||
| var $c2471b9b8a82870a$exports = {}; | ||
| $c2471b9b8a82870a$exports = JSON.parse("{\"calendar\":\"Kalendarz\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} do {end, date, long}\",\"date\":\"Data\",\"dateRange\":\"Zakres dat\",\"day\":\"dzień\",\"dayPeriod\":\"rano / po południu / wieczorem\",\"endDate\":\"Data końcowa\",\"era\":\"era\",\"hour\":\"godzina\",\"minute\":\"minuta\",\"month\":\"miesiąc\",\"second\":\"sekunda\",\"startDate\":\"Data początkowa\",\"year\":\"rok\",\"weekday\":\"dzień tygodnia\",\"timeZoneName\":\"strefa czasowa\"}"); | ||
| var $1b0c2c5988d20254$exports = {}; | ||
| $1b0c2c5988d20254$exports = JSON.parse("{\"calendar\":\"Calendário\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} a {end, date, long}\",\"date\":\"Data\",\"dateRange\":\"Intervalo de datas\",\"day\":\"dia\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Data final\",\"era\":\"era\",\"hour\":\"hora\",\"minute\":\"minuto\",\"month\":\"mês\",\"second\":\"segundo\",\"startDate\":\"Data inicial\",\"year\":\"ano\",\"weekday\":\"dia da semana\",\"timeZoneName\":\"fuso horário\"}"); | ||
| var $7619ed2dd27d45d3$exports = {}; | ||
| $7619ed2dd27d45d3$exports = JSON.parse("{\"calendar\":\"Calendário\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} a {end, date, long}\",\"date\":\"Data\",\"dateRange\":\"Intervalo de datas\",\"day\":\"dia\",\"dayPeriod\":\"am/pm\",\"endDate\":\"Data de Término\",\"era\":\"era\",\"hour\":\"hora\",\"minute\":\"minuto\",\"month\":\"mês\",\"second\":\"segundo\",\"startDate\":\"Data de Início\",\"year\":\"ano\",\"weekday\":\"dia da semana\",\"timeZoneName\":\"fuso horário\"}"); | ||
| var $5958af824a24f3b9$exports = {}; | ||
| $5958af824a24f3b9$exports = JSON.parse("{\"calendar\":\"Calendar\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} - {end, date, long}\",\"date\":\"Dată\",\"dateRange\":\"Raza datei\",\"day\":\"zi\",\"dayPeriod\":\"a.m/p.m.\",\"endDate\":\"Dată final\",\"era\":\"eră\",\"hour\":\"oră\",\"minute\":\"minut\",\"month\":\"lună\",\"second\":\"secundă\",\"startDate\":\"Dată început\",\"year\":\"an\",\"weekday\":\"ziua din săptămână\",\"timeZoneName\":\"fus orar\"}"); | ||
| var $e71ad02edcf77959$exports = {}; | ||
| $e71ad02edcf77959$exports = JSON.parse("{\"calendar\":\"Календарь\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} – {end, date, long}\",\"date\":\"Дата\",\"dateRange\":\"Диапазон дат\",\"day\":\"день\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Дата окончания\",\"era\":\"эра\",\"hour\":\"час\",\"minute\":\"минута\",\"month\":\"месяц\",\"second\":\"секунда\",\"startDate\":\"Дата начала\",\"year\":\"год\",\"weekday\":\"день недели\",\"timeZoneName\":\"часовой пояс\"}"); | ||
| var $7da403f1f7ed8cdd$exports = {}; | ||
| $7da403f1f7ed8cdd$exports = JSON.parse("{\"calendar\":\"Kalendár\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} do {end, date, long}\",\"date\":\"Dátum\",\"dateRange\":\"Rozsah dátumov\",\"day\":\"deň\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Dátum ukončenia\",\"era\":\"letopočet\",\"hour\":\"hodina\",\"minute\":\"minúta\",\"month\":\"mesiac\",\"second\":\"sekunda\",\"startDate\":\"Dátum začatia\",\"year\":\"rok\",\"weekday\":\"deň týždňa\",\"timeZoneName\":\"časové pásmo\"}"); | ||
| var $705bcb8a710d1d66$exports = {}; | ||
| $705bcb8a710d1d66$exports = JSON.parse("{\"calendar\":\"Koledar\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} do {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Datumski obseg\",\"day\":\"dan\",\"dayPeriod\":\"dop/pop\",\"endDate\":\"Datum konca\",\"era\":\"doba\",\"hour\":\"ura\",\"minute\":\"minuta\",\"month\":\"mesec\",\"second\":\"sekunda\",\"startDate\":\"Datum začetka\",\"year\":\"leto\",\"weekday\":\"dan v tednu\",\"timeZoneName\":\"časovni pas\"}"); | ||
| var $56c197b917ca564e$exports = {}; | ||
| $56c197b917ca564e$exports = JSON.parse("{\"calendar\":\"Kalendar\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} do {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Opseg datuma\",\"day\":\"дан\",\"dayPeriod\":\"пре подне/по подне\",\"endDate\":\"Datum završetka\",\"era\":\"ера\",\"hour\":\"сат\",\"minute\":\"минут\",\"month\":\"месец\",\"second\":\"секунд\",\"startDate\":\"Datum početka\",\"year\":\"година\",\"weekday\":\"дан у недељи\",\"timeZoneName\":\"временска зона\"}"); | ||
| var $a5183c9dd90e5de2$exports = {}; | ||
| $a5183c9dd90e5de2$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} till {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Datumintervall\",\"day\":\"dag\",\"dayPeriod\":\"fm/em\",\"endDate\":\"Slutdatum\",\"era\":\"era\",\"hour\":\"timme\",\"minute\":\"minut\",\"month\":\"månad\",\"second\":\"sekund\",\"startDate\":\"Startdatum\",\"year\":\"år\",\"weekday\":\"veckodag\",\"timeZoneName\":\"tidszon\"}"); | ||
| var $805eab9eccaf7759$exports = {}; | ||
| $805eab9eccaf7759$exports = JSON.parse("{\"calendar\":\"Takvim\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} - {end, date, long}\",\"date\":\"Tarih\",\"dateRange\":\"Tarih Aralığı\",\"day\":\"gün\",\"dayPeriod\":\"ÖÖ/ÖS\",\"endDate\":\"Bitiş Tarihi\",\"era\":\"çağ\",\"hour\":\"saat\",\"minute\":\"dakika\",\"month\":\"ay\",\"second\":\"saniye\",\"startDate\":\"Başlangıç Tarihi\",\"year\":\"yıl\",\"weekday\":\"haftanın günü\",\"timeZoneName\":\"saat dilimi\"}"); | ||
| var $312aecbde16b5bc0$exports = {}; | ||
| $312aecbde16b5bc0$exports = JSON.parse("{\"calendar\":\"Календар\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"Від {start, date, long} до {end, date, long}\",\"date\":\"Дата\",\"dateRange\":\"Діапазон дат\",\"day\":\"день\",\"dayPeriod\":\"дп/пп\",\"endDate\":\"Дата завершення\",\"era\":\"ера\",\"hour\":\"година\",\"minute\":\"хвилина\",\"month\":\"місяць\",\"second\":\"секунда\",\"startDate\":\"Дата початку\",\"year\":\"рік\",\"weekday\":\"день тижня\",\"timeZoneName\":\"часовий пояс\"}"); | ||
| var $3f44747e629e865e$exports = {}; | ||
| $3f44747e629e865e$exports = JSON.parse("{\"calendar\":\"日历\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} 至 {end, date, long}\",\"date\":\"日期\",\"dateRange\":\"日期范围\",\"day\":\"日\",\"dayPeriod\":\"上午/下午\",\"endDate\":\"结束日期\",\"era\":\"纪元\",\"hour\":\"小时\",\"minute\":\"分钟\",\"month\":\"月\",\"second\":\"秒\",\"startDate\":\"开始日期\",\"year\":\"年\",\"weekday\":\"工作日\",\"timeZoneName\":\"时区\"}"); | ||
| var $bf1fec649ac2f8cb$exports = {}; | ||
| $bf1fec649ac2f8cb$exports = JSON.parse("{\"calendar\":\"日曆\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long}至 {end, date, long}\",\"date\":\"日期\",\"dateRange\":\"日期範圍\",\"day\":\"日\",\"dayPeriod\":\"上午/下午\",\"endDate\":\"結束日期\",\"era\":\"纪元\",\"hour\":\"小时\",\"minute\":\"分钟\",\"month\":\"月\",\"second\":\"秒\",\"startDate\":\"開始日期\",\"year\":\"年\",\"weekday\":\"工作日\",\"timeZoneName\":\"时区\"}"); | ||
| $4c3c9b804e8a0c68$exports = { | ||
| "ar-AE": $6e5c6ed0c6d0cf53$exports, | ||
| "bg-BG": $d98a93fc9bec28b6$exports, | ||
| "cs-CZ": $d5d47d2867f7c1bd$exports, | ||
| "da-DK": $9f5243668e7aa09e$exports, | ||
| "de-DE": $dd0db059c73b3efa$exports, | ||
| "el-GR": $e45055be77f2dc98$exports, | ||
| "en-US": $7b73c1382219c3e5$exports, | ||
| "es-ES": $88ad5054e6cbd3b8$exports, | ||
| "et-EE": $6e60a874d6c8f7d4$exports, | ||
| "fi-FI": $cefbba0f94e2a923$exports, | ||
| "fr-FR": $d28136fcca1c0bce$exports, | ||
| "he-IL": $56a5db202f754538$exports, | ||
| "hr-HR": $ba6b4158cd8674bd$exports, | ||
| "hu-HU": $03dacd0629430097$exports, | ||
| "it-IT": $8bcb449c3158f1c9$exports, | ||
| "ja-JP": $41343b48452e5797$exports, | ||
| "ko-KR": $4e9d0754f39a8598$exports, | ||
| "lt-LT": $12658256f1706061$exports, | ||
| "lv-LV": $b1d8a01eaf0d2fe0$exports, | ||
| "nb-NO": $0215911d568a5e84$exports, | ||
| "nl-NL": $6c8ba76d61a809c5$exports, | ||
| "pl-PL": $c2471b9b8a82870a$exports, | ||
| "pt-BR": $1b0c2c5988d20254$exports, | ||
| "pt-PT": $7619ed2dd27d45d3$exports, | ||
| "ro-RO": $5958af824a24f3b9$exports, | ||
| "ru-RU": $e71ad02edcf77959$exports, | ||
| "sk-SK": $7da403f1f7ed8cdd$exports, | ||
| "sl-SI": $705bcb8a710d1d66$exports, | ||
| "sr-SP": $56c197b917ca564e$exports, | ||
| "sv-SE": $a5183c9dd90e5de2$exports, | ||
| "tr-TR": $805eab9eccaf7759$exports, | ||
| "uk-UA": $312aecbde16b5bc0$exports, | ||
| "zh-CN": $3f44747e629e865e$exports, | ||
| "zh-TW": $bf1fec649ac2f8cb$exports | ||
| }; | ||
| function $cd76659b30974e82$export$4a931266a3838b86(state, ref) { | ||
| // Open the popover on alt + arrow down | ||
| let onKeyDown = (e)=>{ | ||
| if (e.altKey && e.key === 'ArrowDown' && 'setOpen' in state) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| state.setOpen(true); | ||
| } | ||
| }; | ||
| // Focus the first placeholder segment from the end on mouse down/touch up in the field. | ||
| let focusLast = ()=>{ | ||
| let elements = ref.current.querySelectorAll('[tabindex="0"]'); | ||
| let index = elements.length - 1; | ||
| while(index >= 0 && elements[index].getAttribute('aria-placeholder'))index--; | ||
| index = Math.min(index + 1, elements.length - 1); | ||
| let element = elements[index]; | ||
| if (element) element.focus(); | ||
| }; | ||
| let { pressProps: pressProps } = $38jq8$reactariainteractions.usePress({ | ||
| onPressStart (e) { | ||
| if (e.pointerType === 'mouse') focusLast(); | ||
| }, | ||
| onPress (e) { | ||
| if (e.pointerType !== 'mouse') focusLast(); | ||
| } | ||
| }); | ||
| return $38jq8$reactariautils.mergeProps(pressProps, { | ||
| onKeyDown: onKeyDown | ||
| }); | ||
| } | ||
| function $45cbb87b2f427873$export$42df105a73306d51(props, state, ref) { | ||
| let buttonId = $38jq8$reactariautils.useId(); | ||
| let dialogId = $38jq8$reactariautils.useId(); | ||
| let formatMessage = $38jq8$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($4c3c9b804e8a0c68$exports))); | ||
| let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $38jq8$reactarialabel.useField({ | ||
| ...props, | ||
| labelElementType: 'span' | ||
| }); | ||
| let groupProps = $cd76659b30974e82$export$4a931266a3838b86(state, ref); | ||
| let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id; | ||
| let { locale: locale } = $38jq8$reactariai18n.useLocale(); | ||
| let descProps = $38jq8$reactariautils.useDescription(state.formatValue(locale, { | ||
| month: 'long' | ||
| })); | ||
| let ariaDescribedBy = [ | ||
| descProps['aria-describedby'], | ||
| fieldProps['aria-describedby'] | ||
| ].filter(Boolean).join(' ') || undefined; | ||
| return { | ||
| groupProps: $38jq8$reactariautils.mergeProps(groupProps, descProps, { | ||
| role: 'group', | ||
| 'aria-disabled': props.isDisabled || null, | ||
| 'aria-labelledby': labelledBy, | ||
| 'aria-describedby': ariaDescribedBy | ||
| }), | ||
| labelProps: { | ||
| ...labelProps, | ||
| onClick: ()=>{ | ||
| let focusManager = $38jq8$reactariafocus.createFocusManager(ref); | ||
| focusManager.focusFirst(); | ||
| } | ||
| }, | ||
| fieldProps: fieldProps, | ||
| descriptionProps: descriptionProps, | ||
| errorMessageProps: errorMessageProps, | ||
| buttonProps: { | ||
| ...descProps, | ||
| id: buttonId, | ||
| excludeFromTabOrder: true, | ||
| 'aria-haspopup': 'dialog', | ||
| 'aria-label': formatMessage('calendar'), | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}`, | ||
| 'aria-describedby': ariaDescribedBy | ||
| }, | ||
| dialogProps: { | ||
| id: dialogId, | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}` | ||
| } | ||
| }; | ||
| } | ||
| var $cee99b4c3478620e$exports = {}; | ||
| $parcel$export($cee99b4c3478620e$exports, "useDateSegment", () => $cee99b4c3478620e$export$1315d136e6f7581); | ||
| var $85ef40942f370366$exports = {}; | ||
| $parcel$export($85ef40942f370366$exports, "labelIds", () => $85ef40942f370366$export$beb2340c1222c6d); | ||
| $parcel$export($85ef40942f370366$exports, "useDateField", () => $85ef40942f370366$export$5591b0b878c1a989); | ||
| const $85ef40942f370366$export$beb2340c1222c6d = new WeakMap(); | ||
| function $85ef40942f370366$export$5591b0b878c1a989(props, state, ref) { | ||
| let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $38jq8$reactarialabel.useField({ | ||
| ...props, | ||
| labelElementType: 'span' | ||
| }); | ||
| let groupProps = $cd76659b30974e82$export$4a931266a3838b86(state, ref); | ||
| let { focusWithinProps: focusWithinProps } = $38jq8$reactariainteractions.useFocusWithin({ | ||
| onBlurWithin () { | ||
| state.confirmPlaceholder(); | ||
| } | ||
| }); | ||
| let formatter = $38jq8$reactariai18n.useDateFormatter(state.getFormatOptions({ | ||
| month: 'long' | ||
| })); | ||
| let descProps = $38jq8$reactariautils.useDescription(state.value ? formatter.format(state.dateValue) : null); | ||
| let segmentLabelledBy = fieldProps['aria-labelledby'] || fieldProps.id; | ||
| let describedBy = [ | ||
| descProps['aria-describedby'], | ||
| fieldProps['aria-describedby'] | ||
| ].filter(Boolean).join(' ') || undefined; | ||
| $85ef40942f370366$export$beb2340c1222c6d.set(state, { | ||
| ariaLabelledBy: segmentLabelledBy, | ||
| ariaDescribedBy: describedBy | ||
| }); | ||
| return { | ||
| labelProps: { | ||
| ...labelProps, | ||
| onClick: ()=>{ | ||
| let focusManager = $38jq8$reactariafocus.createFocusManager(ref); | ||
| focusManager.focusFirst(); | ||
| } | ||
| }, | ||
| fieldProps: $38jq8$reactariautils.mergeProps(fieldProps, descProps, groupProps, focusWithinProps, { | ||
| role: 'group', | ||
| 'aria-disabled': props.isDisabled || undefined, | ||
| 'aria-describedby': describedBy | ||
| }), | ||
| descriptionProps: descriptionProps, | ||
| errorMessageProps: errorMessageProps | ||
| }; | ||
| } | ||
| var $211a707292290dba$exports = {}; | ||
| $parcel$export($211a707292290dba$exports, "useDisplayNames", () => $211a707292290dba$export$d42c60378c8168f8); | ||
| function $211a707292290dba$export$d42c60378c8168f8() { | ||
| let { locale: locale } = $38jq8$reactariai18n.useLocale(); | ||
| return $38jq8$react.useMemo(()=>{ | ||
| // Try to use Intl.DisplayNames if possible. It may be supported in browsers, but not support the dateTimeField | ||
| // type as that was only added in v2. https://github.com/tc39/intl-displaynames-v2 | ||
| try { | ||
| // @ts-ignore | ||
| return new Intl.DisplayNames(locale, { | ||
| type: 'dateTimeField' | ||
| }); | ||
| } catch (err) { | ||
| return new $211a707292290dba$var$DisplayNamesPolyfill(locale); | ||
| } | ||
| }, [ | ||
| locale | ||
| ]); | ||
| } | ||
| class $211a707292290dba$var$DisplayNamesPolyfill { | ||
| constructor(locale){ | ||
| this.locale = locale; | ||
| this.dictionary = new $38jq8$internationalizedmessage.MessageDictionary((/*@__PURE__*/$parcel$interopDefault($4c3c9b804e8a0c68$exports))); | ||
| } | ||
| of(field) { | ||
| return this.dictionary.getStringForLocale(field, this.locale); | ||
| } | ||
| } | ||
| function $cee99b4c3478620e$export$1315d136e6f7581(props, segment, state, ref) { | ||
| let enteredKeys = $38jq8$react.useRef(''); | ||
| let { locale: locale , direction: direction } = $38jq8$reactariai18n.useLocale(); | ||
| let displayNames = $211a707292290dba$export$d42c60378c8168f8(); | ||
| let focusManager = $38jq8$reactariafocus.useFocusManager(); | ||
| let textValue = segment.text; | ||
| let options = $38jq8$react.useMemo(()=>state.dateFormatter.resolvedOptions() | ||
| , [ | ||
| state.dateFormatter | ||
| ]); | ||
| let monthDateFormatter = $38jq8$reactariai18n.useDateFormatter({ | ||
| month: 'long', | ||
| timeZone: options.timeZone | ||
| }); | ||
| let hourDateFormatter = $38jq8$reactariai18n.useDateFormatter({ | ||
| hour: 'numeric', | ||
| hour12: options.hour12, | ||
| timeZone: options.timeZone | ||
| }); | ||
| if (segment.type === 'month') { | ||
| let monthTextValue = monthDateFormatter.format(state.dateValue); | ||
| textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue; | ||
| } else if (segment.type === 'hour' || segment.type === 'dayPeriod') textValue = hourDateFormatter.format(state.dateValue); | ||
| let { spinButtonProps: spinButtonProps } = $38jq8$reactariaspinbutton.useSpinButton({ | ||
| value: segment.value, | ||
| textValue: textValue, | ||
| minValue: segment.minValue, | ||
| maxValue: segment.maxValue, | ||
| isDisabled: props.isDisabled, | ||
| isReadOnly: props.isReadOnly || !segment.isEditable, | ||
| isRequired: props.isRequired, | ||
| onIncrement: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.increment(segment.type); | ||
| }, | ||
| onDecrement: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.decrement(segment.type); | ||
| }, | ||
| onIncrementPage: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.incrementPage(segment.type); | ||
| }, | ||
| onDecrementPage: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.decrementPage(segment.type); | ||
| }, | ||
| onIncrementToMax: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.setSegment(segment.type, segment.maxValue); | ||
| }, | ||
| onDecrementToMin: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.setSegment(segment.type, segment.minValue); | ||
| } | ||
| }); | ||
| let parser = $38jq8$react.useMemo(()=>new $38jq8$internationalizednumber.NumberParser(locale, { | ||
| maximumFractionDigits: 0 | ||
| }) | ||
| , [ | ||
| locale | ||
| ]); | ||
| let backspace = ()=>{ | ||
| if (parser.isValidPartialNumber(segment.text) && !props.isReadOnly && !segment.isPlaceholder) { | ||
| let newValue = segment.text.slice(0, -1); | ||
| let parsed = parser.parse(newValue); | ||
| if (newValue.length === 0 || parsed === 0) state.clearSegment(segment.type); | ||
| else state.setSegment(segment.type, parsed); | ||
| enteredKeys.current = newValue; | ||
| } else if (segment.type === 'dayPeriod') state.clearSegment(segment.type); | ||
| }; | ||
| let onKeyDown = (e)=>{ | ||
| // Firefox does not fire selectstart for Ctrl/Cmd + A | ||
| // https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 | ||
| if (e.key === 'a' && ($38jq8$reactariautils.isMac() ? e.metaKey : e.ctrlKey)) e.preventDefault(); | ||
| if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return; | ||
| switch(e.key){ | ||
| case 'ArrowLeft': | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (direction === 'rtl') focusManager.focusNext(); | ||
| else focusManager.focusPrevious(); | ||
| break; | ||
| case 'ArrowRight': | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (direction === 'rtl') focusManager.focusPrevious(); | ||
| else focusManager.focusNext(); | ||
| break; | ||
| case 'Enter': | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (segment.isPlaceholder && !props.isReadOnly) state.confirmPlaceholder(segment.type); | ||
| focusManager.focusNext(); | ||
| break; | ||
| case 'Tab': | ||
| break; | ||
| case 'Backspace': | ||
| case 'Delete': | ||
| // Safari on iOS does not fire beforeinput for the backspace key because the cursor is at the start. | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| backspace(); | ||
| break; | ||
| } | ||
| }; | ||
| // Safari dayPeriod option doesn't work... | ||
| let { startsWith: startsWith } = $38jq8$reactariai18n.useFilter({ | ||
| sensitivity: 'base' | ||
| }); | ||
| let amPmFormatter = $38jq8$reactariai18n.useDateFormatter({ | ||
| hour: 'numeric', | ||
| hour12: true | ||
| }); | ||
| let am = $38jq8$react.useMemo(()=>{ | ||
| let date = new Date(); | ||
| date.setHours(0); | ||
| return amPmFormatter.formatToParts(date).find((part)=>part.type === 'dayPeriod' | ||
| ).value; | ||
| }, [ | ||
| amPmFormatter | ||
| ]); | ||
| let pm = $38jq8$react.useMemo(()=>{ | ||
| let date = new Date(); | ||
| date.setHours(12); | ||
| return amPmFormatter.formatToParts(date).find((part)=>part.type === 'dayPeriod' | ||
| ).value; | ||
| }, [ | ||
| amPmFormatter | ||
| ]); | ||
| let onInput = (key)=>{ | ||
| if (props.isDisabled || props.isReadOnly) return; | ||
| let newValue = enteredKeys.current + key; | ||
| switch(segment.type){ | ||
| case 'dayPeriod': | ||
| if (startsWith(am, key)) state.setSegment('dayPeriod', 0); | ||
| else if (startsWith(pm, key)) state.setSegment('dayPeriod', 12); | ||
| else break; | ||
| focusManager.focusNext(); | ||
| break; | ||
| case 'day': | ||
| case 'hour': | ||
| case 'minute': | ||
| case 'second': | ||
| case 'month': | ||
| case 'year': | ||
| { | ||
| if (!parser.isValidPartialNumber(newValue)) return; | ||
| let numberValue = parser.parse(newValue); | ||
| let segmentValue = numberValue; | ||
| let allowsZero = segment.minValue === 0; | ||
| if (segment.type === 'hour' && state.dateFormatter.resolvedOptions().hour12) { | ||
| switch(state.dateFormatter.resolvedOptions().hourCycle){ | ||
| case 'h11': | ||
| if (numberValue > 11) segmentValue = parser.parse(key); | ||
| break; | ||
| case 'h12': | ||
| allowsZero = false; | ||
| if (numberValue > 12) segmentValue = parser.parse(key); | ||
| break; | ||
| } | ||
| if (segment.value >= 12 && numberValue > 1) numberValue += 12; | ||
| } else if (numberValue > segment.maxValue) segmentValue = parser.parse(key); | ||
| if (isNaN(numberValue)) return; | ||
| let shouldSetValue = segmentValue !== 0 || allowsZero; | ||
| if (shouldSetValue) state.setSegment(segment.type, segmentValue); | ||
| if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) { | ||
| enteredKeys.current = ''; | ||
| if (shouldSetValue) focusManager.focusNext(); | ||
| } else enteredKeys.current = newValue; | ||
| break; | ||
| } | ||
| } | ||
| }; | ||
| let onFocus = ()=>{ | ||
| enteredKeys.current = ''; | ||
| $38jq8$reactariautils.scrollIntoView($38jq8$reactariautils.getScrollParent(ref.current), ref.current); | ||
| // Safari requires that a selection is set or it won't fire input events. | ||
| // Since usePress disables text selection, this won't happen by default. | ||
| ref.current.style.webkitUserSelect = 'text'; | ||
| let selection = window.getSelection(); | ||
| selection.collapse(ref.current); | ||
| ref.current.style.webkitUserSelect = ''; | ||
| }; | ||
| let compositionRef = $38jq8$react.useRef(''); | ||
| // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor... | ||
| $38jq8$reactariautils.useEvent(ref, 'beforeinput', (e)=>{ | ||
| e.preventDefault(); | ||
| switch(e.inputType){ | ||
| case 'deleteContentBackward': | ||
| case 'deleteContentForward': | ||
| if (parser.isValidPartialNumber(segment.text) && !props.isReadOnly) backspace(); | ||
| break; | ||
| case 'insertCompositionText': | ||
| // insertCompositionText cannot be canceled. | ||
| // Record the current state of the element so we can restore it in the `input` event below. | ||
| compositionRef.current = ref.current.textContent; | ||
| // Safari gets stuck in a composition state unless we also assign to the value here. | ||
| // eslint-disable-next-line no-self-assign | ||
| ref.current.textContent = ref.current.textContent; | ||
| break; | ||
| default: | ||
| if (e.data != null) onInput(e.data); | ||
| break; | ||
| } | ||
| }); | ||
| $38jq8$reactariautils.useEvent(ref, 'input', (e)=>{ | ||
| let { inputType: inputType , data: data } = e; | ||
| switch(inputType){ | ||
| case 'insertCompositionText': | ||
| // Reset the DOM to how it was in the beforeinput event. | ||
| ref.current.textContent = compositionRef.current; | ||
| // Android sometimes fires key presses of letters as composition events. Need to handle am/pm keys here too. | ||
| // Can also happen e.g. with Pinyin keyboard on iOS. | ||
| if (startsWith(am, data) || startsWith(pm, data)) onInput(data); | ||
| break; | ||
| } | ||
| }); | ||
| // Focus on mouse down/touch up to match native textfield behavior. | ||
| // usePress handles canceling text selection. | ||
| let { pressProps: pressProps } = $38jq8$reactariainteractions.usePress({ | ||
| preventFocusOnPress: true, | ||
| onPressStart: (e)=>{ | ||
| if (e.pointerType === 'mouse') e.target.focus(); | ||
| }, | ||
| onPress (e) { | ||
| if (e.pointerType !== 'mouse') e.target.focus(); | ||
| } | ||
| }); | ||
| // For Android: prevent selection on long press. | ||
| $38jq8$reactariautils.useEvent(ref, 'selectstart', (e)=>{ | ||
| e.preventDefault(); | ||
| }); | ||
| // spinbuttons cannot be focused with VoiceOver on iOS. | ||
| let touchPropOverrides = $38jq8$reactariautils.isIOS() || segment.type === 'timeZoneName' ? { | ||
| role: 'textbox', | ||
| 'aria-valuemax': null, | ||
| 'aria-valuemin': null, | ||
| 'aria-valuetext': null, | ||
| 'aria-valuenow': null | ||
| } : { | ||
| }; | ||
| let { ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy } = $85ef40942f370366$export$beb2340c1222c6d.get(state); | ||
| // Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being | ||
| // read every time the user navigates to a new segment. | ||
| let firstSegment = $38jq8$react.useMemo(()=>state.segments.find((s)=>s.isEditable | ||
| ) | ||
| , [ | ||
| state.segments | ||
| ]); | ||
| if (segment !== firstSegment && state.validationState !== 'invalid') ariaDescribedBy = undefined; | ||
| let id = $38jq8$reactariautils.useId(props.id); | ||
| let isEditable = !props.isDisabled && !props.isReadOnly && segment.isEditable; | ||
| return { | ||
| segmentProps: $38jq8$reactariautils.mergeProps(spinButtonProps, pressProps, { | ||
| id: id, | ||
| ...touchPropOverrides, | ||
| 'aria-controls': props['aria-controls'], | ||
| // 'aria-haspopup': props['aria-haspopup'], // deprecated in ARIA 1.2 | ||
| 'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined, | ||
| 'aria-label': segment.type !== 'literal' ? displayNames.of(segment.type) : undefined, | ||
| 'aria-labelledby': `${ariaLabelledBy} ${id}`, | ||
| 'aria-describedby': ariaDescribedBy, | ||
| 'aria-placeholder': segment.isPlaceholder ? segment.text : undefined, | ||
| 'aria-readonly': props.isReadOnly || !segment.isEditable ? 'true' : undefined, | ||
| contentEditable: isEditable, | ||
| suppressContentEditableWarning: isEditable, | ||
| spellCheck: isEditable ? 'false' : undefined, | ||
| autoCapitalize: isEditable ? 'off' : undefined, | ||
| autoCorrect: isEditable ? 'off' : undefined, | ||
| // Capitalization was changed in React 17... | ||
| [parseInt(($parcel$interopDefault($38jq8$react)).version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined, | ||
| inputMode: props.isDisabled || segment.type === 'dayPeriod' || !isEditable ? undefined : 'numeric', | ||
| tabIndex: props.isDisabled ? undefined : 0, | ||
| onKeyDown: onKeyDown, | ||
| onFocus: onFocus | ||
| }) | ||
| }; | ||
| } | ||
| var $bb51e48eb9b2f559$exports = {}; | ||
| $parcel$export($bb51e48eb9b2f559$exports, "useDateRangePicker", () => $bb51e48eb9b2f559$export$12fd5f0e9f4bb192); | ||
| function $bb51e48eb9b2f559$export$12fd5f0e9f4bb192(props, state, ref) { | ||
| let formatMessage = $38jq8$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($4c3c9b804e8a0c68$exports))); | ||
| let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $38jq8$reactarialabel.useField({ | ||
| ...props, | ||
| labelElementType: 'span' | ||
| }); | ||
| let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id; | ||
| let { locale: locale } = $38jq8$reactariai18n.useLocale(); | ||
| let description = state.formatValue(locale, { | ||
| month: 'long' | ||
| }); | ||
| let descProps = $38jq8$reactariautils.useDescription(description); | ||
| let startFieldProps = $38jq8$reactariautils.useLabels({ | ||
| 'aria-label': formatMessage('startDate'), | ||
| 'aria-labelledby': labelledBy | ||
| }); | ||
| let endFieldProps = $38jq8$reactariautils.useLabels({ | ||
| 'aria-label': formatMessage('endDate'), | ||
| 'aria-labelledby': labelledBy | ||
| }); | ||
| let buttonId = $38jq8$reactariautils.useId(); | ||
| let dialogId = $38jq8$reactariautils.useId(); | ||
| let groupProps = $cd76659b30974e82$export$4a931266a3838b86(state, ref); | ||
| let { focusWithinProps: focusWithinProps } = $38jq8$reactariainteractions.useFocusWithin({ | ||
| onBlurWithin () { | ||
| state.confirmPlaceholder(); | ||
| } | ||
| }); | ||
| let ariaDescribedBy = [ | ||
| descProps['aria-describedby'], | ||
| fieldProps['aria-describedby'] | ||
| ].filter(Boolean).join(' ') || undefined; | ||
| return { | ||
| groupProps: $38jq8$reactariautils.mergeProps(groupProps, fieldProps, descProps, focusWithinProps, { | ||
| role: 'group', | ||
| 'aria-disabled': props.isDisabled || null, | ||
| 'aria-describedby': ariaDescribedBy | ||
| }), | ||
| labelProps: { | ||
| ...labelProps, | ||
| onClick: ()=>{ | ||
| let focusManager = $38jq8$reactariafocus.createFocusManager(ref); | ||
| focusManager.focusFirst(); | ||
| } | ||
| }, | ||
| buttonProps: { | ||
| ...descProps, | ||
| id: buttonId, | ||
| excludeFromTabOrder: true, | ||
| 'aria-haspopup': 'dialog', | ||
| 'aria-label': formatMessage('calendar'), | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}`, | ||
| 'aria-describedby': ariaDescribedBy | ||
| }, | ||
| dialogProps: { | ||
| id: dialogId, | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}` | ||
| }, | ||
| startFieldProps: { | ||
| ...startFieldProps, | ||
| 'aria-describedby': fieldProps['aria-describedby'] | ||
| }, | ||
| endFieldProps: { | ||
| ...endFieldProps, | ||
| 'aria-describedby': fieldProps['aria-describedby'] | ||
| }, | ||
| descriptionProps: descriptionProps, | ||
| errorMessageProps: errorMessageProps | ||
| }; | ||
| } | ||
| $parcel$exportWildcard(module.exports, $45cbb87b2f427873$exports); | ||
| $parcel$exportWildcard(module.exports, $cee99b4c3478620e$exports); | ||
| $parcel$exportWildcard(module.exports, $85ef40942f370366$exports); | ||
| $parcel$exportWildcard(module.exports, $bb51e48eb9b2f559$exports); | ||
| $parcel$exportWildcard(module.exports, $211a707292290dba$exports); | ||
| //# sourceMappingURL=main.js.map |
@@ -1,752 +0,25 @@ | ||
| import {createFocusManager as $iP6I8$createFocusManager, useFocusManager as $iP6I8$useFocusManager} from "@react-aria/focus"; | ||
| import {useId as $iP6I8$useId, useDescription as $iP6I8$useDescription, mergeProps as $iP6I8$mergeProps, isMac as $iP6I8$isMac, scrollIntoView as $iP6I8$scrollIntoView, getScrollParent as $iP6I8$getScrollParent, useEvent as $iP6I8$useEvent, isIOS as $iP6I8$isIOS, useLabels as $iP6I8$useLabels} from "@react-aria/utils"; | ||
| import {useField as $iP6I8$useField} from "@react-aria/label"; | ||
| import {useMessageFormatter as $iP6I8$useMessageFormatter, useLocale as $iP6I8$useLocale, useDateFormatter as $iP6I8$useDateFormatter, useFilter as $iP6I8$useFilter} from "@react-aria/i18n"; | ||
| import {usePress as $iP6I8$usePress, useFocusWithin as $iP6I8$useFocusWithin} from "@react-aria/interactions"; | ||
| import {NumberParser as $iP6I8$NumberParser} from "@internationalized/number"; | ||
| import $iP6I8$react, {useRef as $iP6I8$useRef, useMemo as $iP6I8$useMemo} from "react"; | ||
| import {useSpinButton as $iP6I8$useSpinButton} from "@react-aria/spinbutton"; | ||
| import {MessageDictionary as $iP6I8$MessageDictionary} from "@internationalized/message"; | ||
| import {useDatePicker as $6057a3d2a53a12fd$export$42df105a73306d51} from "./useDatePicker.module.js"; | ||
| import {useDateSegment as $32489daedd52963e$export$1315d136e6f7581} from "./useDateSegment.module.js"; | ||
| import {useDateField as $16f0b7bb276bc17e$export$5591b0b878c1a989, useTimeField as $16f0b7bb276bc17e$export$4c842f6a241dc825} from "./useDateField.module.js"; | ||
| import {useDateRangePicker as $887cac91b7cc8801$export$12fd5f0e9f4bb192} from "./useDateRangePicker.module.js"; | ||
| import {useDisplayNames as $3aeceb3a64eb8358$export$d42c60378c8168f8} from "./useDisplayNames.module.js"; | ||
| function $parcel$interopDefault(a) { | ||
| return a && a.__esModule ? a.default : a; | ||
| } | ||
| function $parcel$export(e, n, v, s) { | ||
| Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
| } | ||
| var $6eb27d0439f489ec$exports = {}; | ||
| /* | ||
| * Copyright 2020 Adobe. All rights reserved. | ||
| * This file is licensed to you under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. You may obtain a copy | ||
| * of the License at http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software distributed under | ||
| * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS | ||
| * OF ANY KIND, either express or implied. See the License for the specific language | ||
| * governing permissions and limitations under the License. | ||
| */ | ||
| $parcel$export($6eb27d0439f489ec$exports, "useDatePicker", () => $6eb27d0439f489ec$export$42df105a73306d51); | ||
| var $75a23f15f254844f$exports = {}; | ||
| var $f09d7c0081de083c$exports = {}; | ||
| $f09d7c0081de083c$exports = JSON.parse("{\"calendar\":\"التقويم\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} إلى {end, date, long}\",\"date\":\"التاريخ\",\"dateRange\":\"نطاق التاريخ\",\"day\":\"يوم\",\"dayPeriod\":\"ص/م\",\"endDate\":\"تاريخ الانتهاء\",\"era\":\"العصر\",\"hour\":\"الساعات\",\"minute\":\"الدقائق\",\"month\":\"الشهر\",\"second\":\"الثواني\",\"startDate\":\"تاريخ البدء\",\"year\":\"السنة\",\"weekday\":\"اليوم\",\"timeZoneName\":\"التوقيت\"}"); | ||
| var $7621a208fe529abd$exports = {}; | ||
| $7621a208fe529abd$exports = JSON.parse("{\"calendar\":\"Календар\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} до {end, date, long}\",\"date\":\"Дата\",\"dateRange\":\"Времеви интервал\",\"day\":\"ден\",\"dayPeriod\":\"пр.об./сл.об.\",\"endDate\":\"Крайна дата\",\"era\":\"ера\",\"hour\":\"час\",\"minute\":\"минута\",\"month\":\"месец\",\"second\":\"секунда\",\"startDate\":\"Начална дата\",\"year\":\"година\",\"weekday\":\"ден от седмицата\",\"timeZoneName\":\"часова зона\"}"); | ||
| var $88b38a4e61fc93ef$exports = {}; | ||
| $88b38a4e61fc93ef$exports = JSON.parse("{\"calendar\":\"Kalendář\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} až {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Rozsah dat\",\"day\":\"den\",\"dayPeriod\":\"část dne\",\"endDate\":\"Konečné datum\",\"era\":\"letopočet\",\"hour\":\"hodina\",\"minute\":\"minuta\",\"month\":\"měsíc\",\"second\":\"sekunda\",\"startDate\":\"Počáteční datum\",\"year\":\"rok\",\"weekday\":\"den v týdnu\",\"timeZoneName\":\"časové pásmo\"}"); | ||
| var $822fcb14afe698cb$exports = {}; | ||
| $822fcb14afe698cb$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} til {end, date, long}\",\"date\":\"Dato\",\"dateRange\":\"Datointerval\",\"day\":\"dag\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Slutdato\",\"era\":\"æra\",\"hour\":\"time\",\"minute\":\"minut\",\"month\":\"måned\",\"second\":\"sekund\",\"startDate\":\"Startdato\",\"year\":\"år\",\"weekday\":\"ugedag\",\"timeZoneName\":\"tidszone\"}"); | ||
| var $e40e7634f3f844cf$exports = {}; | ||
| $e40e7634f3f844cf$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} bis {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Datumsbereich\",\"day\":\"Tag\",\"dayPeriod\":\"Tageshälfte\",\"endDate\":\"Enddatum\",\"era\":\"Epoche\",\"hour\":\"Stunde\",\"minute\":\"Minute\",\"month\":\"Monat\",\"second\":\"Sekunde\",\"startDate\":\"Anfangsdatum\",\"year\":\"Jahr\",\"weekday\":\"Wochentag\",\"timeZoneName\":\"Zeitzone\"}"); | ||
| var $8a2672f12e8370bc$exports = {}; | ||
| $8a2672f12e8370bc$exports = JSON.parse("{\"calendar\":\"Ημερολόγιο\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} ως {end, date, long}\",\"date\":\"Ημερομηνία\",\"dateRange\":\"Εύρος ημερομηνιών\",\"day\":\"ημέρα\",\"dayPeriod\":\"π.μ./μ.μ.\",\"endDate\":\"Ημερομηνία λήξης\",\"era\":\"περίοδος\",\"hour\":\"ώρα\",\"minute\":\"λεπτό\",\"month\":\"μήνας\",\"second\":\"δευτερόλεπτο\",\"startDate\":\"Ημερομηνία έναρξης\",\"year\":\"έτος\",\"weekday\":\"καθημερινή\",\"timeZoneName\":\"ζώνη ώρας\"}"); | ||
| var $4c18050d100f2ca1$exports = {}; | ||
| $4c18050d100f2ca1$exports = JSON.parse("{\"era\":\"era\",\"year\":\"year\",\"month\":\"month\",\"day\":\"day\",\"hour\":\"hour\",\"minute\":\"minute\",\"second\":\"second\",\"dayPeriod\":\"AM/PM\",\"calendar\":\"Calendar\",\"date\":\"Date\",\"dateRange\":\"Date Range\",\"startDate\":\"Start Date\",\"endDate\":\"End Date\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} to {end, date, long}\",\"weekday\":\"day of the week\",\"timeZoneName\":\"time zone\"}"); | ||
| var $76219e149224e0df$exports = {}; | ||
| $76219e149224e0df$exports = JSON.parse("{\"calendar\":\"Calendario\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} a {end, date, long}\",\"date\":\"Fecha\",\"dateRange\":\"Intervalo de fecha\",\"day\":\"día\",\"dayPeriod\":\"a. m./p. m.\",\"endDate\":\"Fecha final\",\"era\":\"era\",\"hour\":\"hora\",\"minute\":\"minuto\",\"month\":\"mes\",\"second\":\"segundo\",\"startDate\":\"Fecha de inicio\",\"year\":\"año\",\"weekday\":\"día de la semana\",\"timeZoneName\":\"zona horaria\"}"); | ||
| var $cf20089fe488aff3$exports = {}; | ||
| $cf20089fe488aff3$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} kuni {end, date, long}\",\"date\":\"Kuupäev\",\"dateRange\":\"Kuupäevavahemik\",\"day\":\"päev\",\"dayPeriod\":\"enne/pärast lõunat\",\"endDate\":\"Lõppkuupäev\",\"era\":\"ajastu\",\"hour\":\"tund\",\"minute\":\"minut\",\"month\":\"kuu\",\"second\":\"sekund\",\"startDate\":\"Alguskuupäev\",\"year\":\"aasta\",\"weekday\":\"nädalapäev\",\"timeZoneName\":\"ajavöönd\"}"); | ||
| var $7c00b2602a3cb374$exports = {}; | ||
| $7c00b2602a3cb374$exports = JSON.parse("{\"calendar\":\"Kalenteri\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long}–{end, date, long}\",\"date\":\"Päivämäärä\",\"dateRange\":\"Päivämääräalue\",\"day\":\"päivä\",\"dayPeriod\":\"vuorokaudenaika\",\"endDate\":\"Päättymispäivä\",\"era\":\"aikakausi\",\"hour\":\"tunti\",\"minute\":\"minuutti\",\"month\":\"kuukausi\",\"second\":\"sekunti\",\"startDate\":\"Alkamispäivä\",\"year\":\"vuosi\",\"weekday\":\"viikonpäivä\",\"timeZoneName\":\"aikavyöhyke\"}"); | ||
| var $9b2668724d59aad4$exports = {}; | ||
| $9b2668724d59aad4$exports = JSON.parse("{\"calendar\":\"Calendrier\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} au {end, date, long}\",\"date\":\"Date\",\"dateRange\":\"Plage de dates\",\"day\":\"jour\",\"dayPeriod\":\"cadran\",\"endDate\":\"Date de fin\",\"era\":\"ère\",\"hour\":\"heure\",\"minute\":\"minute\",\"month\":\"mois\",\"second\":\"seconde\",\"startDate\":\"Date de début\",\"year\":\"année\",\"weekday\":\"jour de la semaine\",\"timeZoneName\":\"fuseau horaire\"}"); | ||
| var $4ea60d3e56f08652$exports = {}; | ||
| $4ea60d3e56f08652$exports = JSON.parse("{\"calendar\":\"לוח שנה\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"מ-{start, date, long} ועד {end, date, long}\",\"date\":\"תאריך\",\"dateRange\":\"טווח תאריכים\",\"day\":\"יום\",\"dayPeriod\":\"לפנה״צ/אחה״צ\",\"endDate\":\"תאריך סיום\",\"era\":\"תקופה\",\"hour\":\"שעה\",\"minute\":\"דקה\",\"month\":\"חודש\",\"second\":\"שנייה\",\"startDate\":\"תאריך התחלה\",\"year\":\"שנה\",\"weekday\":\"יום בשבוע\",\"timeZoneName\":\"אזור זמן\"}"); | ||
| var $25e91565a502fb0d$exports = {}; | ||
| $25e91565a502fb0d$exports = JSON.parse("{\"calendar\":\"Kalendar\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} do {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Raspon datuma\",\"day\":\"dan\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Datum završetka\",\"era\":\"era\",\"hour\":\"sat\",\"minute\":\"minuta\",\"month\":\"mjesec\",\"second\":\"sekunda\",\"startDate\":\"Datum početka\",\"year\":\"godina\",\"weekday\":\"dan u tjednu\",\"timeZoneName\":\"vremenska zona\"}"); | ||
| var $5584dd5b8e9309c8$exports = {}; | ||
| $5584dd5b8e9309c8$exports = JSON.parse("{\"calendar\":\"Naptár\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} – {end, date, long}\",\"date\":\"Dátum\",\"dateRange\":\"Dátumtartomány\",\"day\":\"nap\",\"dayPeriod\":\"napszak\",\"endDate\":\"Befejező dátum\",\"era\":\"éra\",\"hour\":\"óra\",\"minute\":\"perc\",\"month\":\"hónap\",\"second\":\"másodperc\",\"startDate\":\"Kezdő dátum\",\"year\":\"év\",\"weekday\":\"hét napja\",\"timeZoneName\":\"időzóna\"}"); | ||
| var $a53673f22bd7418e$exports = {}; | ||
| $a53673f22bd7418e$exports = JSON.parse("{\"calendar\":\"Calendario\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"Da {start, date, long} a {end, date, long}\",\"date\":\"Data\",\"dateRange\":\"Intervallo date\",\"day\":\"giorno\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Data finale\",\"era\":\"era\",\"hour\":\"ora\",\"minute\":\"minuto\",\"month\":\"mese\",\"second\":\"secondo\",\"startDate\":\"Data iniziale\",\"year\":\"anno\",\"weekday\":\"giorno della settimana\",\"timeZoneName\":\"fuso orario\"}"); | ||
| var $d5004e6030acb838$exports = {}; | ||
| $d5004e6030acb838$exports = JSON.parse("{\"calendar\":\"カレンダー\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} ～ {end, date, long}\",\"date\":\"日付\",\"dateRange\":\"日付範囲\",\"day\":\"日\",\"dayPeriod\":\"午前/午後\",\"endDate\":\"終了日\",\"era\":\"時代\",\"hour\":\"時\",\"minute\":\"分\",\"month\":\"月\",\"second\":\"秒\",\"startDate\":\"開始日\",\"year\":\"年\",\"weekday\":\"曜日\",\"timeZoneName\":\"タイムゾーン\"}"); | ||
| var $d9f0a3f93e273286$exports = {}; | ||
| $d9f0a3f93e273286$exports = JSON.parse("{\"calendar\":\"달력\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} ~ {end, date, long}\",\"date\":\"날짜\",\"dateRange\":\"날짜 범위\",\"day\":\"일\",\"dayPeriod\":\"오전/오후\",\"endDate\":\"종료 날짜\",\"era\":\"연호\",\"hour\":\"시\",\"minute\":\"분\",\"month\":\"월\",\"second\":\"초\",\"startDate\":\"시작 날짜\",\"year\":\"년\",\"weekday\":\"요일\",\"timeZoneName\":\"시간대\"}"); | ||
| var $fee53881ef782ee4$exports = {}; | ||
| $fee53881ef782ee4$exports = JSON.parse("{\"calendar\":\"Kalendorius\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"Nuo {start, date, long} iki {end, date, long}\",\"date\":\"Data\",\"dateRange\":\"Datų intervalas\",\"day\":\"diena\",\"dayPeriod\":\"iki pietų / po pietų\",\"endDate\":\"Pabaigos data\",\"era\":\"era\",\"hour\":\"valanda\",\"minute\":\"minutė\",\"month\":\"mėnuo\",\"second\":\"sekundė\",\"startDate\":\"Pradžios data\",\"year\":\"metai\",\"weekday\":\"savaitės diena\",\"timeZoneName\":\"laiko juosta\"}"); | ||
| var $95910baade79f56c$exports = {}; | ||
| $95910baade79f56c$exports = JSON.parse("{\"calendar\":\"Kalendārs\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} līdz {end, date, long}\",\"date\":\"Datums\",\"dateRange\":\"Datumu diapazons\",\"day\":\"diena\",\"dayPeriod\":\"priekšpusdienā/pēcpusdienā\",\"endDate\":\"Beigu datums\",\"era\":\"ēra\",\"hour\":\"stundas\",\"minute\":\"minūtes\",\"month\":\"mēnesis\",\"second\":\"sekundes\",\"startDate\":\"Sākuma datums\",\"year\":\"gads\",\"weekday\":\"nedēļas diena\",\"timeZoneName\":\"laika josla\"}"); | ||
| var $034e3c43e8246ffd$exports = {}; | ||
| $034e3c43e8246ffd$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} til {end, date, long}\",\"date\":\"Dato\",\"dateRange\":\"Datoområde\",\"day\":\"dag\",\"dayPeriod\":\"a.m./p.m.\",\"endDate\":\"Sluttdato\",\"era\":\"tidsalder\",\"hour\":\"time\",\"minute\":\"minutt\",\"month\":\"måned\",\"second\":\"sekund\",\"startDate\":\"Startdato\",\"year\":\"år\",\"weekday\":\"ukedag\",\"timeZoneName\":\"tidssone\"}"); | ||
| var $63f35326923d8587$exports = {}; | ||
| $63f35326923d8587$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} t/m {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Datumbereik\",\"day\":\"dag\",\"dayPeriod\":\"a.m./p.m.\",\"endDate\":\"Einddatum\",\"era\":\"tijdperk\",\"hour\":\"uur\",\"minute\":\"minuut\",\"month\":\"maand\",\"second\":\"seconde\",\"startDate\":\"Startdatum\",\"year\":\"jaar\",\"weekday\":\"dag van de week\",\"timeZoneName\":\"tijdzone\"}"); | ||
| var $579971aea5d27825$exports = {}; | ||
| $579971aea5d27825$exports = JSON.parse("{\"calendar\":\"Kalendarz\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} do {end, date, long}\",\"date\":\"Data\",\"dateRange\":\"Zakres dat\",\"day\":\"dzień\",\"dayPeriod\":\"rano / po południu / wieczorem\",\"endDate\":\"Data końcowa\",\"era\":\"era\",\"hour\":\"godzina\",\"minute\":\"minuta\",\"month\":\"miesiąc\",\"second\":\"sekunda\",\"startDate\":\"Data początkowa\",\"year\":\"rok\",\"weekday\":\"dzień tygodnia\",\"timeZoneName\":\"strefa czasowa\"}"); | ||
| var $0a92d2d0d8f7db3b$exports = {}; | ||
| $0a92d2d0d8f7db3b$exports = JSON.parse("{\"calendar\":\"Calendário\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} a {end, date, long}\",\"date\":\"Data\",\"dateRange\":\"Intervalo de datas\",\"day\":\"dia\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Data final\",\"era\":\"era\",\"hour\":\"hora\",\"minute\":\"minuto\",\"month\":\"mês\",\"second\":\"segundo\",\"startDate\":\"Data inicial\",\"year\":\"ano\",\"weekday\":\"dia da semana\",\"timeZoneName\":\"fuso horário\"}"); | ||
| var $6895624b717c6ac1$exports = {}; | ||
| $6895624b717c6ac1$exports = JSON.parse("{\"calendar\":\"Calendário\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} a {end, date, long}\",\"date\":\"Data\",\"dateRange\":\"Intervalo de datas\",\"day\":\"dia\",\"dayPeriod\":\"am/pm\",\"endDate\":\"Data de Término\",\"era\":\"era\",\"hour\":\"hora\",\"minute\":\"minuto\",\"month\":\"mês\",\"second\":\"segundo\",\"startDate\":\"Data de Início\",\"year\":\"ano\",\"weekday\":\"dia da semana\",\"timeZoneName\":\"fuso horário\"}"); | ||
| var $ef84d1dd876690ec$exports = {}; | ||
| $ef84d1dd876690ec$exports = JSON.parse("{\"calendar\":\"Calendar\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} - {end, date, long}\",\"date\":\"Dată\",\"dateRange\":\"Raza datei\",\"day\":\"zi\",\"dayPeriod\":\"a.m/p.m.\",\"endDate\":\"Dată final\",\"era\":\"eră\",\"hour\":\"oră\",\"minute\":\"minut\",\"month\":\"lună\",\"second\":\"secundă\",\"startDate\":\"Dată început\",\"year\":\"an\",\"weekday\":\"ziua din săptămână\",\"timeZoneName\":\"fus orar\"}"); | ||
| var $396e0415ed55b2ae$exports = {}; | ||
| $396e0415ed55b2ae$exports = JSON.parse("{\"calendar\":\"Календарь\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} – {end, date, long}\",\"date\":\"Дата\",\"dateRange\":\"Диапазон дат\",\"day\":\"день\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Дата окончания\",\"era\":\"эра\",\"hour\":\"час\",\"minute\":\"минута\",\"month\":\"месяц\",\"second\":\"секунда\",\"startDate\":\"Дата начала\",\"year\":\"год\",\"weekday\":\"день недели\",\"timeZoneName\":\"часовой пояс\"}"); | ||
| var $61b32b8d3af060ec$exports = {}; | ||
| $61b32b8d3af060ec$exports = JSON.parse("{\"calendar\":\"Kalendár\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} do {end, date, long}\",\"date\":\"Dátum\",\"dateRange\":\"Rozsah dátumov\",\"day\":\"deň\",\"dayPeriod\":\"AM/PM\",\"endDate\":\"Dátum ukončenia\",\"era\":\"letopočet\",\"hour\":\"hodina\",\"minute\":\"minúta\",\"month\":\"mesiac\",\"second\":\"sekunda\",\"startDate\":\"Dátum začatia\",\"year\":\"rok\",\"weekday\":\"deň týždňa\",\"timeZoneName\":\"časové pásmo\"}"); | ||
| var $1cbee191814bd7cf$exports = {}; | ||
| $1cbee191814bd7cf$exports = JSON.parse("{\"calendar\":\"Koledar\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} do {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Datumski obseg\",\"day\":\"dan\",\"dayPeriod\":\"dop/pop\",\"endDate\":\"Datum konca\",\"era\":\"doba\",\"hour\":\"ura\",\"minute\":\"minuta\",\"month\":\"mesec\",\"second\":\"sekunda\",\"startDate\":\"Datum začetka\",\"year\":\"leto\",\"weekday\":\"dan v tednu\",\"timeZoneName\":\"časovni pas\"}"); | ||
| var $812820c6361c3bf5$exports = {}; | ||
| $812820c6361c3bf5$exports = JSON.parse("{\"calendar\":\"Kalendar\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} do {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Opseg datuma\",\"day\":\"дан\",\"dayPeriod\":\"пре подне/по подне\",\"endDate\":\"Datum završetka\",\"era\":\"ера\",\"hour\":\"сат\",\"minute\":\"минут\",\"month\":\"месец\",\"second\":\"секунд\",\"startDate\":\"Datum početka\",\"year\":\"година\",\"weekday\":\"дан у недељи\",\"timeZoneName\":\"временска зона\"}"); | ||
| var $8941452035a06f2f$exports = {}; | ||
| $8941452035a06f2f$exports = JSON.parse("{\"calendar\":\"Kalender\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} till {end, date, long}\",\"date\":\"Datum\",\"dateRange\":\"Datumintervall\",\"day\":\"dag\",\"dayPeriod\":\"fm/em\",\"endDate\":\"Slutdatum\",\"era\":\"era\",\"hour\":\"timme\",\"minute\":\"minut\",\"month\":\"månad\",\"second\":\"sekund\",\"startDate\":\"Startdatum\",\"year\":\"år\",\"weekday\":\"veckodag\",\"timeZoneName\":\"tidszon\"}"); | ||
| var $ac7e157f3e958d07$exports = {}; | ||
| $ac7e157f3e958d07$exports = JSON.parse("{\"calendar\":\"Takvim\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} - {end, date, long}\",\"date\":\"Tarih\",\"dateRange\":\"Tarih Aralığı\",\"day\":\"gün\",\"dayPeriod\":\"ÖÖ/ÖS\",\"endDate\":\"Bitiş Tarihi\",\"era\":\"çağ\",\"hour\":\"saat\",\"minute\":\"dakika\",\"month\":\"ay\",\"second\":\"saniye\",\"startDate\":\"Başlangıç Tarihi\",\"year\":\"yıl\",\"weekday\":\"haftanın günü\",\"timeZoneName\":\"saat dilimi\"}"); | ||
| var $807ebb4a78e130c6$exports = {}; | ||
| $807ebb4a78e130c6$exports = JSON.parse("{\"calendar\":\"Календар\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"Від {start, date, long} до {end, date, long}\",\"date\":\"Дата\",\"dateRange\":\"Діапазон дат\",\"day\":\"день\",\"dayPeriod\":\"дп/пп\",\"endDate\":\"Дата завершення\",\"era\":\"ера\",\"hour\":\"година\",\"minute\":\"хвилина\",\"month\":\"місяць\",\"second\":\"секунда\",\"startDate\":\"Дата початку\",\"year\":\"рік\",\"weekday\":\"день тижня\",\"timeZoneName\":\"часовий пояс\"}"); | ||
| var $467bfa1864b252fe$exports = {}; | ||
| $467bfa1864b252fe$exports = JSON.parse("{\"calendar\":\"日历\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long} 至 {end, date, long}\",\"date\":\"日期\",\"dateRange\":\"日期范围\",\"day\":\"日\",\"dayPeriod\":\"上午/下午\",\"endDate\":\"结束日期\",\"era\":\"纪元\",\"hour\":\"小时\",\"minute\":\"分钟\",\"month\":\"月\",\"second\":\"秒\",\"startDate\":\"开始日期\",\"year\":\"年\",\"weekday\":\"工作日\",\"timeZoneName\":\"时区\"}"); | ||
| var $1ebd58d94f508a29$exports = {}; | ||
| $1ebd58d94f508a29$exports = JSON.parse("{\"calendar\":\"日曆\",\"currentDate\":\"{date, date, full}\",\"currentDateRange\":\"{start, date, long}至 {end, date, long}\",\"date\":\"日期\",\"dateRange\":\"日期範圍\",\"day\":\"日\",\"dayPeriod\":\"上午/下午\",\"endDate\":\"結束日期\",\"era\":\"纪元\",\"hour\":\"小时\",\"minute\":\"分钟\",\"month\":\"月\",\"second\":\"秒\",\"startDate\":\"開始日期\",\"year\":\"年\",\"weekday\":\"工作日\",\"timeZoneName\":\"时区\"}"); | ||
| $75a23f15f254844f$exports = { | ||
| "ar-AE": $f09d7c0081de083c$exports, | ||
| "bg-BG": $7621a208fe529abd$exports, | ||
| "cs-CZ": $88b38a4e61fc93ef$exports, | ||
| "da-DK": $822fcb14afe698cb$exports, | ||
| "de-DE": $e40e7634f3f844cf$exports, | ||
| "el-GR": $8a2672f12e8370bc$exports, | ||
| "en-US": $4c18050d100f2ca1$exports, | ||
| "es-ES": $76219e149224e0df$exports, | ||
| "et-EE": $cf20089fe488aff3$exports, | ||
| "fi-FI": $7c00b2602a3cb374$exports, | ||
| "fr-FR": $9b2668724d59aad4$exports, | ||
| "he-IL": $4ea60d3e56f08652$exports, | ||
| "hr-HR": $25e91565a502fb0d$exports, | ||
| "hu-HU": $5584dd5b8e9309c8$exports, | ||
| "it-IT": $a53673f22bd7418e$exports, | ||
| "ja-JP": $d5004e6030acb838$exports, | ||
| "ko-KR": $d9f0a3f93e273286$exports, | ||
| "lt-LT": $fee53881ef782ee4$exports, | ||
| "lv-LV": $95910baade79f56c$exports, | ||
| "nb-NO": $034e3c43e8246ffd$exports, | ||
| "nl-NL": $63f35326923d8587$exports, | ||
| "pl-PL": $579971aea5d27825$exports, | ||
| "pt-BR": $0a92d2d0d8f7db3b$exports, | ||
| "pt-PT": $6895624b717c6ac1$exports, | ||
| "ro-RO": $ef84d1dd876690ec$exports, | ||
| "ru-RU": $396e0415ed55b2ae$exports, | ||
| "sk-SK": $61b32b8d3af060ec$exports, | ||
| "sl-SI": $1cbee191814bd7cf$exports, | ||
| "sr-SP": $812820c6361c3bf5$exports, | ||
| "sv-SE": $8941452035a06f2f$exports, | ||
| "tr-TR": $ac7e157f3e958d07$exports, | ||
| "uk-UA": $807ebb4a78e130c6$exports, | ||
| "zh-CN": $467bfa1864b252fe$exports, | ||
| "zh-TW": $1ebd58d94f508a29$exports | ||
| }; | ||
| function $408c6888a82cd6f4$export$4a931266a3838b86(state, ref) { | ||
| // Open the popover on alt + arrow down | ||
| let onKeyDown = (e)=>{ | ||
| if (e.altKey && e.key === 'ArrowDown' && 'setOpen' in state) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| state.setOpen(true); | ||
| } | ||
| }; | ||
| // Focus the first placeholder segment from the end on mouse down/touch up in the field. | ||
| let focusLast = ()=>{ | ||
| let elements = ref.current.querySelectorAll('[tabindex="0"]'); | ||
| let index = elements.length - 1; | ||
| while(index >= 0 && elements[index].getAttribute('aria-placeholder'))index--; | ||
| index = Math.min(index + 1, elements.length - 1); | ||
| let element = elements[index]; | ||
| if (element) element.focus(); | ||
| }; | ||
| let { pressProps: pressProps } = $iP6I8$usePress({ | ||
| onPressStart (e) { | ||
| if (e.pointerType === 'mouse') focusLast(); | ||
| }, | ||
| onPress (e) { | ||
| if (e.pointerType !== 'mouse') focusLast(); | ||
| } | ||
| }); | ||
| return $iP6I8$mergeProps(pressProps, { | ||
| onKeyDown: onKeyDown | ||
| }); | ||
| } | ||
| function $6eb27d0439f489ec$export$42df105a73306d51(props, state, ref) { | ||
| let buttonId = $iP6I8$useId(); | ||
| let dialogId = $iP6I8$useId(); | ||
| let formatMessage = $iP6I8$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($75a23f15f254844f$exports))); | ||
| let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $iP6I8$useField({ | ||
| ...props, | ||
| labelElementType: 'span' | ||
| }); | ||
| let groupProps = $408c6888a82cd6f4$export$4a931266a3838b86(state, ref); | ||
| let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id; | ||
| let { locale: locale } = $iP6I8$useLocale(); | ||
| let descProps = $iP6I8$useDescription(state.formatValue(locale, { | ||
| month: 'long' | ||
| })); | ||
| let ariaDescribedBy = [ | ||
| descProps['aria-describedby'], | ||
| fieldProps['aria-describedby'] | ||
| ].filter(Boolean).join(' ') || undefined; | ||
| return { | ||
| groupProps: $iP6I8$mergeProps(groupProps, descProps, { | ||
| role: 'group', | ||
| 'aria-disabled': props.isDisabled || null, | ||
| 'aria-labelledby': labelledBy, | ||
| 'aria-describedby': ariaDescribedBy | ||
| }), | ||
| labelProps: { | ||
| ...labelProps, | ||
| onClick: ()=>{ | ||
| let focusManager = $iP6I8$createFocusManager(ref); | ||
| focusManager.focusFirst(); | ||
| } | ||
| }, | ||
| fieldProps: fieldProps, | ||
| descriptionProps: descriptionProps, | ||
| errorMessageProps: errorMessageProps, | ||
| buttonProps: { | ||
| ...descProps, | ||
| id: buttonId, | ||
| excludeFromTabOrder: true, | ||
| 'aria-haspopup': 'dialog', | ||
| 'aria-label': formatMessage('calendar'), | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}`, | ||
| 'aria-describedby': ariaDescribedBy | ||
| }, | ||
| dialogProps: { | ||
| id: dialogId, | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}` | ||
| } | ||
| }; | ||
| } | ||
| var $9dc42289682a7afc$exports = {}; | ||
| $parcel$export($9dc42289682a7afc$exports, "useDateSegment", () => $9dc42289682a7afc$export$1315d136e6f7581); | ||
| var $7318864da75784bc$exports = {}; | ||
| $parcel$export($7318864da75784bc$exports, "labelIds", () => $7318864da75784bc$export$beb2340c1222c6d); | ||
| $parcel$export($7318864da75784bc$exports, "useDateField", () => $7318864da75784bc$export$5591b0b878c1a989); | ||
| const $7318864da75784bc$export$beb2340c1222c6d = new WeakMap(); | ||
| function $7318864da75784bc$export$5591b0b878c1a989(props, state, ref) { | ||
| let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $iP6I8$useField({ | ||
| ...props, | ||
| labelElementType: 'span' | ||
| }); | ||
| let groupProps = $408c6888a82cd6f4$export$4a931266a3838b86(state, ref); | ||
| let { focusWithinProps: focusWithinProps } = $iP6I8$useFocusWithin({ | ||
| onBlurWithin () { | ||
| state.confirmPlaceholder(); | ||
| } | ||
| }); | ||
| let formatter = $iP6I8$useDateFormatter(state.getFormatOptions({ | ||
| month: 'long' | ||
| })); | ||
| let descProps = $iP6I8$useDescription(state.value ? formatter.format(state.dateValue) : null); | ||
| let segmentLabelledBy = fieldProps['aria-labelledby'] || fieldProps.id; | ||
| let describedBy = [ | ||
| descProps['aria-describedby'], | ||
| fieldProps['aria-describedby'] | ||
| ].filter(Boolean).join(' ') || undefined; | ||
| $7318864da75784bc$export$beb2340c1222c6d.set(state, { | ||
| ariaLabelledBy: segmentLabelledBy, | ||
| ariaDescribedBy: describedBy | ||
| }); | ||
| return { | ||
| labelProps: { | ||
| ...labelProps, | ||
| onClick: ()=>{ | ||
| let focusManager = $iP6I8$createFocusManager(ref); | ||
| focusManager.focusFirst(); | ||
| } | ||
| }, | ||
| fieldProps: $iP6I8$mergeProps(fieldProps, descProps, groupProps, focusWithinProps, { | ||
| role: 'group', | ||
| 'aria-disabled': props.isDisabled || undefined, | ||
| 'aria-describedby': describedBy | ||
| }), | ||
| descriptionProps: descriptionProps, | ||
| errorMessageProps: errorMessageProps | ||
| }; | ||
| } | ||
| var $41b00f58ca931360$exports = {}; | ||
| $parcel$export($41b00f58ca931360$exports, "useDisplayNames", () => $41b00f58ca931360$export$d42c60378c8168f8); | ||
| function $41b00f58ca931360$export$d42c60378c8168f8() { | ||
| let { locale: locale } = $iP6I8$useLocale(); | ||
| return $iP6I8$useMemo(()=>{ | ||
| // Try to use Intl.DisplayNames if possible. It may be supported in browsers, but not support the dateTimeField | ||
| // type as that was only added in v2. https://github.com/tc39/intl-displaynames-v2 | ||
| try { | ||
| // @ts-ignore | ||
| return new Intl.DisplayNames(locale, { | ||
| type: 'dateTimeField' | ||
| }); | ||
| } catch (err) { | ||
| return new $41b00f58ca931360$var$DisplayNamesPolyfill(locale); | ||
| } | ||
| }, [ | ||
| locale | ||
| ]); | ||
| } | ||
| class $41b00f58ca931360$var$DisplayNamesPolyfill { | ||
| constructor(locale){ | ||
| this.locale = locale; | ||
| this.dictionary = new $iP6I8$MessageDictionary((/*@__PURE__*/$parcel$interopDefault($75a23f15f254844f$exports))); | ||
| } | ||
| of(field) { | ||
| return this.dictionary.getStringForLocale(field, this.locale); | ||
| } | ||
| } | ||
| function $9dc42289682a7afc$export$1315d136e6f7581(props, segment, state, ref) { | ||
| let enteredKeys = $iP6I8$useRef(''); | ||
| let { locale: locale , direction: direction } = $iP6I8$useLocale(); | ||
| let displayNames = $41b00f58ca931360$export$d42c60378c8168f8(); | ||
| let focusManager = $iP6I8$useFocusManager(); | ||
| let textValue = segment.text; | ||
| let options = $iP6I8$useMemo(()=>state.dateFormatter.resolvedOptions() | ||
| , [ | ||
| state.dateFormatter | ||
| ]); | ||
| let monthDateFormatter = $iP6I8$useDateFormatter({ | ||
| month: 'long', | ||
| timeZone: options.timeZone | ||
| }); | ||
| let hourDateFormatter = $iP6I8$useDateFormatter({ | ||
| hour: 'numeric', | ||
| hour12: options.hour12, | ||
| timeZone: options.timeZone | ||
| }); | ||
| if (segment.type === 'month') { | ||
| let monthTextValue = monthDateFormatter.format(state.dateValue); | ||
| textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue; | ||
| } else if (segment.type === 'hour' || segment.type === 'dayPeriod') textValue = hourDateFormatter.format(state.dateValue); | ||
| let { spinButtonProps: spinButtonProps } = $iP6I8$useSpinButton({ | ||
| value: segment.value, | ||
| textValue: textValue, | ||
| minValue: segment.minValue, | ||
| maxValue: segment.maxValue, | ||
| isDisabled: props.isDisabled, | ||
| isReadOnly: props.isReadOnly || !segment.isEditable, | ||
| isRequired: props.isRequired, | ||
| onIncrement: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.increment(segment.type); | ||
| }, | ||
| onDecrement: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.decrement(segment.type); | ||
| }, | ||
| onIncrementPage: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.incrementPage(segment.type); | ||
| }, | ||
| onDecrementPage: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.decrementPage(segment.type); | ||
| }, | ||
| onIncrementToMax: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.setSegment(segment.type, segment.maxValue); | ||
| }, | ||
| onDecrementToMin: ()=>{ | ||
| enteredKeys.current = ''; | ||
| state.setSegment(segment.type, segment.minValue); | ||
| } | ||
| }); | ||
| let parser = $iP6I8$useMemo(()=>new $iP6I8$NumberParser(locale, { | ||
| maximumFractionDigits: 0 | ||
| }) | ||
| , [ | ||
| locale | ||
| ]); | ||
| let backspace = ()=>{ | ||
| if (parser.isValidPartialNumber(segment.text) && !props.isReadOnly && !segment.isPlaceholder) { | ||
| let newValue = segment.text.slice(0, -1); | ||
| let parsed = parser.parse(newValue); | ||
| if (newValue.length === 0 || parsed === 0) state.clearSegment(segment.type); | ||
| else state.setSegment(segment.type, parsed); | ||
| enteredKeys.current = newValue; | ||
| } else if (segment.type === 'dayPeriod') state.clearSegment(segment.type); | ||
| }; | ||
| let onKeyDown = (e)=>{ | ||
| // Firefox does not fire selectstart for Ctrl/Cmd + A | ||
| // https://bugzilla.mozilla.org/show_bug.cgi?id=1742153 | ||
| if (e.key === 'a' && ($iP6I8$isMac() ? e.metaKey : e.ctrlKey)) e.preventDefault(); | ||
| if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return; | ||
| switch(e.key){ | ||
| case 'ArrowLeft': | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (direction === 'rtl') focusManager.focusNext(); | ||
| else focusManager.focusPrevious(); | ||
| break; | ||
| case 'ArrowRight': | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (direction === 'rtl') focusManager.focusPrevious(); | ||
| else focusManager.focusNext(); | ||
| break; | ||
| case 'Enter': | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (segment.isPlaceholder && !props.isReadOnly) state.confirmPlaceholder(segment.type); | ||
| focusManager.focusNext(); | ||
| break; | ||
| case 'Tab': | ||
| break; | ||
| case 'Backspace': | ||
| case 'Delete': | ||
| // Safari on iOS does not fire beforeinput for the backspace key because the cursor is at the start. | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| backspace(); | ||
| break; | ||
| } | ||
| }; | ||
| // Safari dayPeriod option doesn't work... | ||
| let { startsWith: startsWith } = $iP6I8$useFilter({ | ||
| sensitivity: 'base' | ||
| }); | ||
| let amPmFormatter = $iP6I8$useDateFormatter({ | ||
| hour: 'numeric', | ||
| hour12: true | ||
| }); | ||
| let am = $iP6I8$useMemo(()=>{ | ||
| let date = new Date(); | ||
| date.setHours(0); | ||
| return amPmFormatter.formatToParts(date).find((part)=>part.type === 'dayPeriod' | ||
| ).value; | ||
| }, [ | ||
| amPmFormatter | ||
| ]); | ||
| let pm = $iP6I8$useMemo(()=>{ | ||
| let date = new Date(); | ||
| date.setHours(12); | ||
| return amPmFormatter.formatToParts(date).find((part)=>part.type === 'dayPeriod' | ||
| ).value; | ||
| }, [ | ||
| amPmFormatter | ||
| ]); | ||
| let onInput = (key)=>{ | ||
| if (props.isDisabled || props.isReadOnly) return; | ||
| let newValue = enteredKeys.current + key; | ||
| switch(segment.type){ | ||
| case 'dayPeriod': | ||
| if (startsWith(am, key)) state.setSegment('dayPeriod', 0); | ||
| else if (startsWith(pm, key)) state.setSegment('dayPeriod', 12); | ||
| else break; | ||
| focusManager.focusNext(); | ||
| break; | ||
| case 'day': | ||
| case 'hour': | ||
| case 'minute': | ||
| case 'second': | ||
| case 'month': | ||
| case 'year': | ||
| { | ||
| if (!parser.isValidPartialNumber(newValue)) return; | ||
| let numberValue = parser.parse(newValue); | ||
| let segmentValue = numberValue; | ||
| let allowsZero = segment.minValue === 0; | ||
| if (segment.type === 'hour' && state.dateFormatter.resolvedOptions().hour12) { | ||
| switch(state.dateFormatter.resolvedOptions().hourCycle){ | ||
| case 'h11': | ||
| if (numberValue > 11) segmentValue = parser.parse(key); | ||
| break; | ||
| case 'h12': | ||
| allowsZero = false; | ||
| if (numberValue > 12) segmentValue = parser.parse(key); | ||
| break; | ||
| } | ||
| if (segment.value >= 12 && numberValue > 1) numberValue += 12; | ||
| } else if (numberValue > segment.maxValue) segmentValue = parser.parse(key); | ||
| if (isNaN(numberValue)) return; | ||
| let shouldSetValue = segmentValue !== 0 || allowsZero; | ||
| if (shouldSetValue) state.setSegment(segment.type, segmentValue); | ||
| if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) { | ||
| enteredKeys.current = ''; | ||
| if (shouldSetValue) focusManager.focusNext(); | ||
| } else enteredKeys.current = newValue; | ||
| break; | ||
| } | ||
| } | ||
| }; | ||
| let onFocus = ()=>{ | ||
| enteredKeys.current = ''; | ||
| $iP6I8$scrollIntoView($iP6I8$getScrollParent(ref.current), ref.current); | ||
| // Safari requires that a selection is set or it won't fire input events. | ||
| // Since usePress disables text selection, this won't happen by default. | ||
| ref.current.style.webkitUserSelect = 'text'; | ||
| let selection = window.getSelection(); | ||
| selection.collapse(ref.current); | ||
| ref.current.style.webkitUserSelect = ''; | ||
| }; | ||
| let compositionRef = $iP6I8$useRef(''); | ||
| // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor... | ||
| $iP6I8$useEvent(ref, 'beforeinput', (e)=>{ | ||
| e.preventDefault(); | ||
| switch(e.inputType){ | ||
| case 'deleteContentBackward': | ||
| case 'deleteContentForward': | ||
| if (parser.isValidPartialNumber(segment.text) && !props.isReadOnly) backspace(); | ||
| break; | ||
| case 'insertCompositionText': | ||
| // insertCompositionText cannot be canceled. | ||
| // Record the current state of the element so we can restore it in the `input` event below. | ||
| compositionRef.current = ref.current.textContent; | ||
| // Safari gets stuck in a composition state unless we also assign to the value here. | ||
| // eslint-disable-next-line no-self-assign | ||
| ref.current.textContent = ref.current.textContent; | ||
| break; | ||
| default: | ||
| if (e.data != null) onInput(e.data); | ||
| break; | ||
| } | ||
| }); | ||
| $iP6I8$useEvent(ref, 'input', (e)=>{ | ||
| let { inputType: inputType , data: data } = e; | ||
| switch(inputType){ | ||
| case 'insertCompositionText': | ||
| // Reset the DOM to how it was in the beforeinput event. | ||
| ref.current.textContent = compositionRef.current; | ||
| // Android sometimes fires key presses of letters as composition events. Need to handle am/pm keys here too. | ||
| // Can also happen e.g. with Pinyin keyboard on iOS. | ||
| if (startsWith(am, data) || startsWith(pm, data)) onInput(data); | ||
| break; | ||
| } | ||
| }); | ||
| // Focus on mouse down/touch up to match native textfield behavior. | ||
| // usePress handles canceling text selection. | ||
| let { pressProps: pressProps } = $iP6I8$usePress({ | ||
| preventFocusOnPress: true, | ||
| onPressStart: (e)=>{ | ||
| if (e.pointerType === 'mouse') e.target.focus(); | ||
| }, | ||
| onPress (e) { | ||
| if (e.pointerType !== 'mouse') e.target.focus(); | ||
| } | ||
| }); | ||
| // For Android: prevent selection on long press. | ||
| $iP6I8$useEvent(ref, 'selectstart', (e)=>{ | ||
| e.preventDefault(); | ||
| }); | ||
| // spinbuttons cannot be focused with VoiceOver on iOS. | ||
| let touchPropOverrides = $iP6I8$isIOS() || segment.type === 'timeZoneName' ? { | ||
| role: 'textbox', | ||
| 'aria-valuemax': null, | ||
| 'aria-valuemin': null, | ||
| 'aria-valuetext': null, | ||
| 'aria-valuenow': null | ||
| } : { | ||
| }; | ||
| let { ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy } = $7318864da75784bc$export$beb2340c1222c6d.get(state); | ||
| // Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being | ||
| // read every time the user navigates to a new segment. | ||
| let firstSegment = $iP6I8$useMemo(()=>state.segments.find((s)=>s.isEditable | ||
| ) | ||
| , [ | ||
| state.segments | ||
| ]); | ||
| if (segment !== firstSegment && state.validationState !== 'invalid') ariaDescribedBy = undefined; | ||
| let id = $iP6I8$useId(props.id); | ||
| let isEditable = !props.isDisabled && !props.isReadOnly && segment.isEditable; | ||
| return { | ||
| segmentProps: $iP6I8$mergeProps(spinButtonProps, pressProps, { | ||
| id: id, | ||
| ...touchPropOverrides, | ||
| 'aria-controls': props['aria-controls'], | ||
| // 'aria-haspopup': props['aria-haspopup'], // deprecated in ARIA 1.2 | ||
| 'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined, | ||
| 'aria-label': segment.type !== 'literal' ? displayNames.of(segment.type) : undefined, | ||
| 'aria-labelledby': `${ariaLabelledBy} ${id}`, | ||
| 'aria-describedby': ariaDescribedBy, | ||
| 'aria-placeholder': segment.isPlaceholder ? segment.text : undefined, | ||
| 'aria-readonly': props.isReadOnly || !segment.isEditable ? 'true' : undefined, | ||
| contentEditable: isEditable, | ||
| suppressContentEditableWarning: isEditable, | ||
| spellCheck: isEditable ? 'false' : undefined, | ||
| autoCapitalize: isEditable ? 'off' : undefined, | ||
| autoCorrect: isEditable ? 'off' : undefined, | ||
| // Capitalization was changed in React 17... | ||
| [parseInt($iP6I8$react.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined, | ||
| inputMode: props.isDisabled || segment.type === 'dayPeriod' || !isEditable ? undefined : 'numeric', | ||
| tabIndex: props.isDisabled ? undefined : 0, | ||
| onKeyDown: onKeyDown, | ||
| onFocus: onFocus | ||
| }) | ||
| }; | ||
| } | ||
| var $240bab663f5dfe2c$exports = {}; | ||
| $parcel$export($240bab663f5dfe2c$exports, "useDateRangePicker", () => $240bab663f5dfe2c$export$12fd5f0e9f4bb192); | ||
| function $240bab663f5dfe2c$export$12fd5f0e9f4bb192(props, state, ref) { | ||
| let formatMessage = $iP6I8$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($75a23f15f254844f$exports))); | ||
| let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = $iP6I8$useField({ | ||
| ...props, | ||
| labelElementType: 'span' | ||
| }); | ||
| let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id; | ||
| let { locale: locale } = $iP6I8$useLocale(); | ||
| let description = state.formatValue(locale, { | ||
| month: 'long' | ||
| }); | ||
| let descProps = $iP6I8$useDescription(description); | ||
| let startFieldProps = $iP6I8$useLabels({ | ||
| 'aria-label': formatMessage('startDate'), | ||
| 'aria-labelledby': labelledBy | ||
| }); | ||
| let endFieldProps = $iP6I8$useLabels({ | ||
| 'aria-label': formatMessage('endDate'), | ||
| 'aria-labelledby': labelledBy | ||
| }); | ||
| let buttonId = $iP6I8$useId(); | ||
| let dialogId = $iP6I8$useId(); | ||
| let groupProps = $408c6888a82cd6f4$export$4a931266a3838b86(state, ref); | ||
| let { focusWithinProps: focusWithinProps } = $iP6I8$useFocusWithin({ | ||
| onBlurWithin () { | ||
| state.confirmPlaceholder(); | ||
| } | ||
| }); | ||
| let ariaDescribedBy = [ | ||
| descProps['aria-describedby'], | ||
| fieldProps['aria-describedby'] | ||
| ].filter(Boolean).join(' ') || undefined; | ||
| return { | ||
| groupProps: $iP6I8$mergeProps(groupProps, fieldProps, descProps, focusWithinProps, { | ||
| role: 'group', | ||
| 'aria-disabled': props.isDisabled || null, | ||
| 'aria-describedby': ariaDescribedBy | ||
| }), | ||
| labelProps: { | ||
| ...labelProps, | ||
| onClick: ()=>{ | ||
| let focusManager = $iP6I8$createFocusManager(ref); | ||
| focusManager.focusFirst(); | ||
| } | ||
| }, | ||
| buttonProps: { | ||
| ...descProps, | ||
| id: buttonId, | ||
| excludeFromTabOrder: true, | ||
| 'aria-haspopup': 'dialog', | ||
| 'aria-label': formatMessage('calendar'), | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}`, | ||
| 'aria-describedby': ariaDescribedBy | ||
| }, | ||
| dialogProps: { | ||
| id: dialogId, | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}` | ||
| }, | ||
| startFieldProps: { | ||
| ...startFieldProps, | ||
| 'aria-describedby': fieldProps['aria-describedby'] | ||
| }, | ||
| endFieldProps: { | ||
| ...endFieldProps, | ||
| 'aria-describedby': fieldProps['aria-describedby'] | ||
| }, | ||
| descriptionProps: descriptionProps, | ||
| errorMessageProps: errorMessageProps | ||
| }; | ||
| } | ||
| export {$6eb27d0439f489ec$export$42df105a73306d51 as useDatePicker, $9dc42289682a7afc$export$1315d136e6f7581 as useDateSegment, $7318864da75784bc$export$beb2340c1222c6d as labelIds, $7318864da75784bc$export$5591b0b878c1a989 as useDateField, $240bab663f5dfe2c$export$12fd5f0e9f4bb192 as useDateRangePicker, $41b00f58ca931360$export$d42c60378c8168f8 as useDisplayNames}; | ||
| export {$6057a3d2a53a12fd$export$42df105a73306d51 as useDatePicker, $32489daedd52963e$export$1315d136e6f7581 as useDateSegment, $16f0b7bb276bc17e$export$5591b0b878c1a989 as useDateField, $16f0b7bb276bc17e$export$4c842f6a241dc825 as useTimeField, $887cac91b7cc8801$export$12fd5f0e9f4bb192 as useDateRangePicker, $3aeceb3a64eb8358$export$d42c60378c8168f8 as useDisplayNames}; | ||
| //# sourceMappingURL=module.js.map |
@@ -0,57 +1,108 @@ | ||
| import { AriaDateFieldProps, AriaTimeFieldProps, DateValue, TimeValue, AriaDatePickerProps, AriaDateRangePickerProps } from "@react-types/datepicker"; | ||
| import { DateFieldState, TimeFieldState, DatePickerState, DateSegment, DateRangePickerState } from "@react-stately/datepicker"; | ||
| import { DOMAttributes, GroupDOMAttributes, RefObject, ValidationResult } from "@react-types/shared"; | ||
| import React, { InputHTMLAttributes } from "react"; | ||
| import { AriaButtonProps } from "@react-types/button"; | ||
| import { AriaDatePickerProps, DateValue, DatePickerProps, AriaDateRangePickerProps } from "@react-types/datepicker"; | ||
| import { AriaDialogProps } from "@react-types/dialog"; | ||
| import { DatePickerState, DatePickerFieldState, DateSegment, DateRangePickerState } from "@react-stately/datepicker"; | ||
| import { HTMLAttributes, LabelHTMLAttributes, RefObject } from "react"; | ||
| import { DOMProps } from "@react-types/shared"; | ||
| interface DatePickerAria<T extends DateValue> { | ||
| groupProps: HTMLAttributes<HTMLElement>; | ||
| labelProps: LabelHTMLAttributes<HTMLLabelElement>; | ||
| fieldProps: AriaDatePickerProps<T>; | ||
| import { CalendarProps, RangeCalendarProps } from "@react-types/calendar"; | ||
| export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> { | ||
| /** A ref for the hidden input element for HTML form submission. */ | ||
| inputRef?: RefObject<HTMLInputElement | null>; | ||
| } | ||
| export interface DateFieldAria extends ValidationResult { | ||
| /** Props for the field's visible label element, if any. */ | ||
| labelProps: DOMAttributes; | ||
| /** Props for the field grouping element. */ | ||
| fieldProps: GroupDOMAttributes; | ||
| /** Props for the hidden input element for HTML form submission. */ | ||
| inputProps: InputHTMLAttributes<HTMLInputElement>; | ||
| /** Props for the description element, if any. */ | ||
| descriptionProps: HTMLAttributes<HTMLElement>; | ||
| descriptionProps: DOMAttributes; | ||
| /** Props for the error message element, if any. */ | ||
| errorMessageProps: HTMLAttributes<HTMLElement>; | ||
| buttonProps: AriaButtonProps; | ||
| dialogProps: AriaDialogProps; | ||
| errorMessageProps: DOMAttributes; | ||
| } | ||
| export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<HTMLElement>): DatePickerAria<T>; | ||
| interface DateFieldProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> { | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a date field component. | ||
| * A date field allows users to enter and edit date and time values using a keyboard. | ||
| * Each part of a date value is displayed in an individually editable segment. | ||
| */ | ||
| export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element | null>): DateFieldAria; | ||
| interface AriaTimeFieldOptions<T extends TimeValue> extends AriaTimeFieldProps<T> { | ||
| /** A ref for the hidden input element for HTML form submission. */ | ||
| inputRef?: RefObject<HTMLInputElement | null>; | ||
| } | ||
| interface DateFieldAria { | ||
| labelProps: LabelHTMLAttributes<HTMLLabelElement>; | ||
| fieldProps: HTMLAttributes<HTMLElement>; | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a time field component. | ||
| * A time field allows users to enter and edit time values using a keyboard. | ||
| * Each part of a time value is displayed in an individually editable segment. | ||
| */ | ||
| export function useTimeField<T extends TimeValue>(props: AriaTimeFieldOptions<T>, state: TimeFieldState, ref: RefObject<Element | null>): DateFieldAria; | ||
| export interface DatePickerAria extends ValidationResult { | ||
| /** Props for the date picker's visible label element, if any. */ | ||
| labelProps: DOMAttributes; | ||
| /** Props for the grouping element containing the date field and button. */ | ||
| groupProps: GroupDOMAttributes; | ||
| /** Props for the date field. */ | ||
| fieldProps: AriaDatePickerProps<DateValue>; | ||
| /** Props for the popover trigger button. */ | ||
| buttonProps: AriaButtonProps; | ||
| /** Props for the description element, if any. */ | ||
| descriptionProps: HTMLAttributes<HTMLElement>; | ||
| descriptionProps: DOMAttributes; | ||
| /** Props for the error message element, if any. */ | ||
| errorMessageProps: HTMLAttributes<HTMLElement>; | ||
| errorMessageProps: DOMAttributes; | ||
| /** Props for the popover dialog. */ | ||
| dialogProps: AriaDialogProps; | ||
| /** Props for the calendar within the popover dialog. */ | ||
| calendarProps: CalendarProps<DateValue>; | ||
| } | ||
| export const labelIds: WeakMap<DatePickerFieldState, { | ||
| ariaLabelledBy: string; | ||
| ariaDescribedBy: string; | ||
| }>; | ||
| export function useDateField<T extends DateValue>(props: DateFieldProps<T>, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateFieldAria; | ||
| type Field = 'era' | 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod' | 'timeZoneName' | 'weekday'; | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a date picker component. | ||
| * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value. | ||
| */ | ||
| export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<Element | null>): DatePickerAria; | ||
| type Field = Intl.DateTimeFormatPartTypes; | ||
| interface DisplayNames { | ||
| of(field: Field): string; | ||
| } | ||
| /** @private */ | ||
| export function useDisplayNames(): DisplayNames; | ||
| interface DateSegmentAria { | ||
| segmentProps: HTMLAttributes<HTMLDivElement>; | ||
| export interface DateSegmentAria { | ||
| /** Props for the segment element. */ | ||
| segmentProps: React.HTMLAttributes<HTMLDivElement>; | ||
| } | ||
| export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> & DOMProps, segment: DateSegment, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateSegmentAria; | ||
| interface DateRangePickerAria<T extends DateValue> { | ||
| labelProps: LabelHTMLAttributes<HTMLLabelElement>; | ||
| groupProps: HTMLAttributes<HTMLElement>; | ||
| startFieldProps: AriaDatePickerProps<T>; | ||
| endFieldProps: AriaDatePickerProps<T>; | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a segment in a date field. | ||
| * A date segment displays an individual unit of a date and time, and allows users to edit | ||
| * the value by typing or using the arrow keys to increment and decrement. | ||
| */ | ||
| export function useDateSegment(segment: DateSegment, state: DateFieldState, ref: RefObject<HTMLElement | null>): DateSegmentAria; | ||
| export interface DateRangePickerAria extends ValidationResult { | ||
| /** Props for the date range picker's visible label element, if any. */ | ||
| labelProps: DOMAttributes; | ||
| /** Props for the grouping element containing the date fields and button. */ | ||
| groupProps: GroupDOMAttributes; | ||
| /** Props for the start date field. */ | ||
| startFieldProps: AriaDatePickerProps<DateValue>; | ||
| /** Props for the end date field. */ | ||
| endFieldProps: AriaDatePickerProps<DateValue>; | ||
| /** Props for the popover trigger button. */ | ||
| buttonProps: AriaButtonProps; | ||
| /** Props for the description element, if any. */ | ||
| descriptionProps: HTMLAttributes<HTMLElement>; | ||
| descriptionProps: DOMAttributes; | ||
| /** Props for the error message element, if any. */ | ||
| errorMessageProps: HTMLAttributes<HTMLElement>; | ||
| buttonProps: AriaButtonProps; | ||
| errorMessageProps: DOMAttributes; | ||
| /** Props for the popover dialog. */ | ||
| dialogProps: AriaDialogProps; | ||
| /** Props for the range calendar within the popover dialog. */ | ||
| calendarProps: RangeCalendarProps<DateValue>; | ||
| } | ||
| export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<HTMLElement>): DateRangePickerAria<T>; | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a date picker component. | ||
| * A date range picker combines two DateFields and a RangeCalendar popover to allow | ||
| * users to enter or select a date and time range. | ||
| */ | ||
| export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<Element | null>): DateRangePickerAria; | ||
| export type { AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, DateRange, DateValue, TimeValue } from '@react-types/datepicker'; | ||
| export type { AriaTimeFieldProps } from '@react-types/datepicker'; | ||
| //# sourceMappingURL=types.d.ts.map |
| { | ||
| "name": "@react-aria/datepicker", | ||
| "version": "3.0.0-nightly.3091+2815eea07", | ||
| "version": "3.0.0-nightly.3094+b4093dfef", | ||
| "description": "Spectrum UI components in React", | ||
@@ -8,2 +8,7 @@ "license": "Apache-2.0", | ||
| "module": "dist/module.js", | ||
| "exports": { | ||
| "types": "./dist/types.d.ts", | ||
| "import": "./dist/import.mjs", | ||
| "require": "./dist/main.js" | ||
| }, | ||
| "types": "dist/types.d.ts", | ||
@@ -21,20 +26,24 @@ "source": "src/index.ts", | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.6.2", | ||
| "@internationalized/message": "3.0.4-nightly.3091+2815eea07", | ||
| "@internationalized/number": "3.0.4-nightly.3091+2815eea07", | ||
| "@react-aria/focus": "3.0.0-nightly.1400+2815eea07", | ||
| "@react-aria/i18n": "3.0.0-nightly.1400+2815eea07", | ||
| "@react-aria/interactions": "3.0.0-nightly.1400+2815eea07", | ||
| "@react-aria/label": "3.0.0-nightly.1400+2815eea07", | ||
| "@react-aria/spinbutton": "3.0.0-nightly.1400+2815eea07", | ||
| "@react-aria/utils": "3.0.0-nightly.1400+2815eea07", | ||
| "@react-stately/datepicker": "3.0.0-nightly.1400+2815eea07", | ||
| "@react-types/button": "3.4.2-nightly.3091+2815eea07", | ||
| "@react-types/datepicker": "3.0.0-nightly.1400+2815eea07", | ||
| "@react-types/dialog": "3.3.2-nightly.3091+2815eea07", | ||
| "@react-types/shared": "3.0.0-nightly.1400+2815eea07" | ||
| "@internationalized/date": "3.5.6-nightly.5022+b4093dfef", | ||
| "@internationalized/number": "3.5.4-nightly.5022+b4093dfef", | ||
| "@internationalized/string": "3.2.4-nightly.5022+b4093dfef", | ||
| "@react-aria/focus": "3.0.0-nightly.3094+b4093dfef", | ||
| "@react-aria/form": "3.0.9-nightly.5022+b4093dfef", | ||
| "@react-aria/i18n": "3.0.0-nightly.3094+b4093dfef", | ||
| "@react-aria/interactions": "3.0.0-nightly.3094+b4093dfef", | ||
| "@react-aria/label": "3.0.0-nightly.3094+b4093dfef", | ||
| "@react-aria/spinbutton": "3.0.0-nightly.3094+b4093dfef", | ||
| "@react-aria/utils": "3.0.0-nightly.3094+b4093dfef", | ||
| "@react-stately/datepicker": "3.0.0-nightly.3094+b4093dfef", | ||
| "@react-stately/form": "3.0.6-nightly.5022+b4093dfef", | ||
| "@react-types/button": "3.9.7-nightly.5022+b4093dfef", | ||
| "@react-types/calendar": "3.0.0-nightly.3094+b4093dfef", | ||
| "@react-types/datepicker": "3.0.0-nightly.3094+b4093dfef", | ||
| "@react-types/dialog": "3.5.13-nightly.5022+b4093dfef", | ||
| "@react-types/shared": "3.0.0-nightly.3094+b4093dfef", | ||
| "@swc/helpers": "^0.5.0" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^16.8.0 || ^17.0.0-rc.1", | ||
| "react-dom": "^16.8.0 || ^17.0.0-rc.1" | ||
| "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", | ||
| "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" | ||
| }, | ||
@@ -44,3 +53,3 @@ "publishConfig": { | ||
| }, | ||
| "gitHead": "2815eea077010e5490ff9df3c5d79fa1588ca689" | ||
| "gitHead": "b4093dfef3eff0e5fe60d00c53fe2478b96e662f" | ||
| } |
@@ -13,6 +13,13 @@ /* | ||
| export * from './useDatePicker'; | ||
| export * from './useDateSegment'; | ||
| export * from './useDateField'; | ||
| export * from './useDateRangePicker'; | ||
| export * from './useDisplayNames'; | ||
| export {useDatePicker} from './useDatePicker'; | ||
| export {useDateSegment} from './useDateSegment'; | ||
| export {useDateField, useTimeField} from './useDateField'; | ||
| export {useDateRangePicker} from './useDateRangePicker'; | ||
| export {useDisplayNames} from './useDisplayNames'; | ||
| export type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, DateRange, DateValue, TimeValue} from '@react-types/datepicker'; | ||
| export type {AriaDateFieldOptions, DateFieldAria} from './useDateField'; | ||
| export type {DatePickerAria} from './useDatePicker'; | ||
| export type {DateRangePickerAria} from './useDateRangePicker'; | ||
| export type {DateSegmentAria} from './useDateSegment'; | ||
| export type {AriaTimeFieldProps} from '@react-types/datepicker'; |
@@ -13,51 +13,156 @@ /* | ||
| import {AriaDatePickerProps, DateValue} from '@react-types/datepicker'; | ||
| import {createFocusManager} from '@react-aria/focus'; | ||
| import {DatePickerFieldState} from '@react-stately/datepicker'; | ||
| import {HTMLAttributes, LabelHTMLAttributes, RefObject} from 'react'; | ||
| import {mergeProps, useDescription} from '@react-aria/utils'; | ||
| import {useDateFormatter} from '@react-aria/i18n'; | ||
| import {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker'; | ||
| import {createFocusManager, FocusManager} from '@react-aria/focus'; | ||
| import {DateFieldState, TimeFieldState} from '@react-stately/datepicker'; | ||
| import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; | ||
| import {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils'; | ||
| import {InputHTMLAttributes, useEffect, useMemo, useRef} from 'react'; | ||
| // @ts-ignore | ||
| import intlMessages from '../intl/*.json'; | ||
| import {useDatePickerGroup} from './useDatePickerGroup'; | ||
| import {useField} from '@react-aria/label'; | ||
| import {useFocusWithin} from '@react-aria/interactions'; | ||
| import {useFormValidation} from '@react-aria/form'; | ||
| import {useLocalizedStringFormatter} from '@react-aria/i18n'; | ||
| // Allows this hook to also be used with TimeField | ||
| interface DateFieldProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {} | ||
| export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> { | ||
| /** A ref for the hidden input element for HTML form submission. */ | ||
| inputRef?: RefObject<HTMLInputElement | null> | ||
| } | ||
| interface DateFieldAria { | ||
| labelProps: LabelHTMLAttributes<HTMLLabelElement>, | ||
| fieldProps: HTMLAttributes<HTMLElement>, | ||
| export interface DateFieldAria extends ValidationResult { | ||
| /** Props for the field's visible label element, if any. */ | ||
| labelProps: DOMAttributes, | ||
| /** Props for the field grouping element. */ | ||
| fieldProps: GroupDOMAttributes, | ||
| /** Props for the hidden input element for HTML form submission. */ | ||
| inputProps: InputHTMLAttributes<HTMLInputElement>, | ||
| /** Props for the description element, if any. */ | ||
| descriptionProps: HTMLAttributes<HTMLElement>, | ||
| descriptionProps: DOMAttributes, | ||
| /** Props for the error message element, if any. */ | ||
| errorMessageProps: HTMLAttributes<HTMLElement> | ||
| errorMessageProps: DOMAttributes | ||
| } | ||
| export const labelIds = new WeakMap<DatePickerFieldState, {ariaLabelledBy: string, ariaDescribedBy: string}>(); | ||
| // Data that is passed between useDateField and useDateSegment. | ||
| interface HookData { | ||
| ariaLabel: string, | ||
| ariaLabelledBy: string, | ||
| ariaDescribedBy: string, | ||
| focusManager: FocusManager | ||
| } | ||
| export function useDateField<T extends DateValue>(props: DateFieldProps<T>, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateFieldAria { | ||
| export const hookData = new WeakMap<DateFieldState, HookData>(); | ||
| // Private props that we pass from useDatePicker/useDateRangePicker. | ||
| // Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552 | ||
| export const roleSymbol = '__role_' + Date.now(); | ||
| export const focusManagerSymbol = '__focusManager_' + Date.now(); | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a date field component. | ||
| * A date field allows users to enter and edit date and time values using a keyboard. | ||
| * Each part of a date value is displayed in an individually editable segment. | ||
| */ | ||
| export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element | null>): DateFieldAria { | ||
| let {isInvalid, validationErrors, validationDetails} = state.displayValidation; | ||
| let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({ | ||
| ...props, | ||
| labelElementType: 'span' | ||
| labelElementType: 'span', | ||
| isInvalid, | ||
| errorMessage: props.errorMessage || validationErrors | ||
| }); | ||
| let groupProps = useDatePickerGroup(state, ref); | ||
| let valueOnFocus = useRef<DateValue | null>(null); | ||
| let {focusWithinProps} = useFocusWithin({ | ||
| onBlurWithin() { | ||
| ...props, | ||
| onFocusWithin(e) { | ||
| valueOnFocus.current = state.value; | ||
| props.onFocus?.(e); | ||
| }, | ||
| onBlurWithin: (e) => { | ||
| state.confirmPlaceholder(); | ||
| } | ||
| if (state.value !== valueOnFocus.current) { | ||
| state.commitValidation(); | ||
| } | ||
| props.onBlur?.(e); | ||
| }, | ||
| onFocusWithinChange: props.onFocusChange | ||
| }); | ||
| let formatter = useDateFormatter(state.getFormatOptions({month: 'long'})); | ||
| let descProps = useDescription(state.value ? formatter.format(state.dateValue) : null); | ||
| let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker'); | ||
| let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription'; | ||
| let field = state.maxGranularity === 'hour' ? 'time' : 'date'; | ||
| let description = state.value ? stringFormatter.format(message, {[field]: state.formatValue({month: 'long'})}) : ''; | ||
| let descProps = useDescription(description); | ||
| let segmentLabelledBy = fieldProps['aria-labelledby'] || fieldProps.id; | ||
| let describedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined; | ||
| // If within a date picker or date range picker, the date field will have role="presentation" and an aria-describedby | ||
| // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description. | ||
| let describedBy = props[roleSymbol] === 'presentation' | ||
| ? fieldProps['aria-describedby'] | ||
| : [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined; | ||
| let propsFocusManager = props[focusManagerSymbol]; | ||
| let focusManager = useMemo(() => propsFocusManager || createFocusManager(ref), [propsFocusManager, ref]); | ||
| let groupProps = useDatePickerGroup(state, ref, props[roleSymbol] === 'presentation'); | ||
| labelIds.set(state, { | ||
| ariaLabelledBy: segmentLabelledBy, | ||
| ariaDescribedBy: describedBy | ||
| // Pass labels and other information to segments. | ||
| hookData.set(state, { | ||
| ariaLabel: props['aria-label'], | ||
| ariaLabelledBy: [labelProps.id, props['aria-labelledby']].filter(Boolean).join(' ') || undefined, | ||
| ariaDescribedBy: describedBy, | ||
| focusManager | ||
| }); | ||
| let autoFocusRef = useRef(props.autoFocus); | ||
| // When used within a date picker or date range picker, the field gets role="presentation" | ||
| // rather than role="group". Since the date picker/date range picker already has a role="group" | ||
| // with a label and description, and the segments are already labeled by this as well, this | ||
| // avoids very verbose duplicate announcements. | ||
| let fieldDOMProps: GroupDOMAttributes; | ||
| if (props[roleSymbol] === 'presentation') { | ||
| fieldDOMProps = { | ||
| role: 'presentation' | ||
| }; | ||
| } else { | ||
| fieldDOMProps = mergeProps(fieldProps, { | ||
| role: 'group' as const, | ||
| 'aria-disabled': props.isDisabled || undefined, | ||
| 'aria-describedby': describedBy | ||
| }); | ||
| } | ||
| useEffect(() => { | ||
| if (autoFocusRef.current) { | ||
| focusManager.focusFirst(); | ||
| } | ||
| autoFocusRef.current = false; | ||
| }, [focusManager]); | ||
| useFormReset(props.inputRef, state.value, state.setValue); | ||
| useFormValidation({ | ||
| ...props, | ||
| focus() { | ||
| focusManager.focusFirst(); | ||
| } | ||
| }, state, props.inputRef); | ||
| let inputProps: InputHTMLAttributes<HTMLInputElement> = { | ||
| type: 'hidden', | ||
| name: props.name, | ||
| value: state.value?.toString() || '', | ||
| disabled: props.isDisabled | ||
| }; | ||
| if (props.validationBehavior === 'native') { | ||
| // Use a hidden <input type="text"> rather than <input type="hidden"> | ||
| // so that an empty value blocks HTML form submission when the field is required. | ||
| inputProps.type = 'text'; | ||
| inputProps.hidden = true; | ||
| inputProps.required = props.isRequired; | ||
| // Ignore react warning. | ||
| inputProps.onChange = () => {}; | ||
| } | ||
| let domProps = filterDOMProps(props); | ||
| return { | ||
@@ -67,14 +172,40 @@ labelProps: { | ||
| onClick: () => { | ||
| let focusManager = createFocusManager(ref); | ||
| focusManager.focusFirst(); | ||
| } | ||
| }, | ||
| fieldProps: mergeProps(fieldProps, descProps, groupProps, focusWithinProps, { | ||
| role: 'group', | ||
| 'aria-disabled': props.isDisabled || undefined, | ||
| 'aria-describedby': describedBy | ||
| fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, { | ||
| onKeyDown(e: KeyboardEvent) { | ||
| if (props.onKeyDown) { | ||
| props.onKeyDown(e); | ||
| } | ||
| }, | ||
| onKeyUp(e: KeyboardEvent) { | ||
| if (props.onKeyUp) { | ||
| props.onKeyUp(e); | ||
| } | ||
| } | ||
| }), | ||
| inputProps, | ||
| descriptionProps, | ||
| errorMessageProps | ||
| errorMessageProps, | ||
| isInvalid, | ||
| validationErrors, | ||
| validationDetails | ||
| }; | ||
| } | ||
| export interface AriaTimeFieldOptions<T extends TimeValue> extends AriaTimeFieldProps<T> { | ||
| /** A ref for the hidden input element for HTML form submission. */ | ||
| inputRef?: RefObject<HTMLInputElement | null> | ||
| } | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a time field component. | ||
| * A time field allows users to enter and edit time values using a keyboard. | ||
| * Each part of a time value is displayed in an individually editable segment. | ||
| */ | ||
| export function useTimeField<T extends TimeValue>(props: AriaTimeFieldOptions<T>, state: TimeFieldState, ref: RefObject<Element | null>): DateFieldAria { | ||
| let res = useDateField(props, state, ref); | ||
| res.inputProps.value = state.timeValue?.toString() || ''; | ||
| return res; | ||
| } |
@@ -16,32 +16,52 @@ /* | ||
| import {AriaDialogProps} from '@react-types/dialog'; | ||
| import {CalendarProps} from '@react-types/calendar'; | ||
| import {createFocusManager} from '@react-aria/focus'; | ||
| import {DatePickerState} from '@react-stately/datepicker'; | ||
| import {HTMLAttributes, LabelHTMLAttributes, RefObject} from 'react'; | ||
| import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; | ||
| import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils'; | ||
| // @ts-ignore | ||
| import intlMessages from '../intl/*.json'; | ||
| import {mergeProps, useDescription, useId} from '@react-aria/utils'; | ||
| import {privateValidationStateProp} from '@react-stately/form'; | ||
| import {roleSymbol} from './useDateField'; | ||
| import {useDatePickerGroup} from './useDatePickerGroup'; | ||
| import {useField} from '@react-aria/label'; | ||
| import {useLocale, useMessageFormatter} from '@react-aria/i18n'; | ||
| import {useFocusWithin} from '@react-aria/interactions'; | ||
| import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; | ||
| import {useMemo} from 'react'; | ||
| interface DatePickerAria<T extends DateValue> { | ||
| groupProps: HTMLAttributes<HTMLElement>, | ||
| labelProps: LabelHTMLAttributes<HTMLLabelElement>, | ||
| fieldProps: AriaDatePickerProps<T>, | ||
| export interface DatePickerAria extends ValidationResult { | ||
| /** Props for the date picker's visible label element, if any. */ | ||
| labelProps: DOMAttributes, | ||
| /** Props for the grouping element containing the date field and button. */ | ||
| groupProps: GroupDOMAttributes, | ||
| /** Props for the date field. */ | ||
| fieldProps: AriaDatePickerProps<DateValue>, | ||
| /** Props for the popover trigger button. */ | ||
| buttonProps: AriaButtonProps, | ||
| /** Props for the description element, if any. */ | ||
| descriptionProps: HTMLAttributes<HTMLElement>, | ||
| descriptionProps: DOMAttributes, | ||
| /** Props for the error message element, if any. */ | ||
| errorMessageProps: HTMLAttributes<HTMLElement>, | ||
| buttonProps: AriaButtonProps, | ||
| dialogProps: AriaDialogProps | ||
| errorMessageProps: DOMAttributes, | ||
| /** Props for the popover dialog. */ | ||
| dialogProps: AriaDialogProps, | ||
| /** Props for the calendar within the popover dialog. */ | ||
| calendarProps: CalendarProps<DateValue> | ||
| } | ||
| export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<HTMLElement>): DatePickerAria<T> { | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a date picker component. | ||
| * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value. | ||
| */ | ||
| export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<Element | null>): DatePickerAria { | ||
| let buttonId = useId(); | ||
| let dialogId = useId(); | ||
| let formatMessage = useMessageFormatter(intlMessages); | ||
| let fieldId = useId(); | ||
| let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker'); | ||
| let {isInvalid, validationErrors, validationDetails} = state.displayValidation; | ||
| let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({ | ||
| ...props, | ||
| labelElementType: 'span' | ||
| labelElementType: 'span', | ||
| isInvalid, | ||
| errorMessage: props.errorMessage || validationErrors | ||
| }); | ||
@@ -54,11 +74,41 @@ | ||
| let {locale} = useLocale(); | ||
| let descProps = useDescription(state.formatValue(locale, {month: 'long'})); | ||
| let date = state.formatValue(locale, {month: 'long'}); | ||
| let description = date ? stringFormatter.format('selectedDateDescription', {date}) : ''; | ||
| let descProps = useDescription(description); | ||
| let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined; | ||
| let domProps = filterDOMProps(props); | ||
| let focusManager = useMemo(() => createFocusManager(ref), [ref]); | ||
| let {focusWithinProps} = useFocusWithin({ | ||
| ...props, | ||
| isDisabled: state.isOpen, | ||
| onBlurWithin: props.onBlur, | ||
| onFocusWithin: props.onFocus, | ||
| onFocusWithinChange: props.onFocusChange | ||
| }); | ||
| return { | ||
| groupProps: mergeProps(groupProps, descProps, { | ||
| role: 'group', | ||
| groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, { | ||
| role: 'group' as const, | ||
| 'aria-disabled': props.isDisabled || null, | ||
| 'aria-labelledby': labelledBy, | ||
| 'aria-describedby': ariaDescribedBy | ||
| 'aria-describedby': ariaDescribedBy, | ||
| onKeyDown(e: KeyboardEvent) { | ||
| if (state.isOpen) { | ||
| return; | ||
| } | ||
| if (props.onKeyDown) { | ||
| props.onKeyDown(e); | ||
| } | ||
| }, | ||
| onKeyUp(e: KeyboardEvent) { | ||
| if (state.isOpen) { | ||
| return; | ||
| } | ||
| if (props.onKeyUp) { | ||
| props.onKeyUp(e); | ||
| } | ||
| } | ||
| }), | ||
@@ -68,7 +118,26 @@ labelProps: { | ||
| onClick: () => { | ||
| let focusManager = createFocusManager(ref); | ||
| focusManager.focusFirst(); | ||
| } | ||
| }, | ||
| fieldProps, | ||
| fieldProps: { | ||
| ...fieldProps, | ||
| id: fieldId, | ||
| [roleSymbol]: 'presentation', | ||
| 'aria-describedby': ariaDescribedBy, | ||
| value: state.value, | ||
| onChange: state.setValue, | ||
| placeholderValue: props.placeholderValue, | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle, | ||
| shouldForceLeadingZeros: props.shouldForceLeadingZeros, | ||
| granularity: props.granularity, | ||
| isDisabled: props.isDisabled, | ||
| isReadOnly: props.isReadOnly, | ||
| isRequired: props.isRequired, | ||
| validationBehavior: props.validationBehavior, | ||
| // DatePicker owns the validation state for the date field. | ||
| [privateValidationStateProp]: state, | ||
| autoFocus: props.autoFocus, | ||
| name: props.name | ||
| }, | ||
| descriptionProps, | ||
@@ -79,13 +148,31 @@ errorMessageProps, | ||
| id: buttonId, | ||
| excludeFromTabOrder: true, | ||
| 'aria-haspopup': 'dialog', | ||
| 'aria-label': formatMessage('calendar'), | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}`, | ||
| 'aria-describedby': ariaDescribedBy | ||
| 'aria-label': stringFormatter.format('calendar'), | ||
| 'aria-labelledby': `${buttonId} ${labelledBy}`, | ||
| 'aria-describedby': ariaDescribedBy, | ||
| 'aria-expanded': state.isOpen, | ||
| isDisabled: props.isDisabled || props.isReadOnly, | ||
| onPress: () => state.setOpen(true) | ||
| }, | ||
| dialogProps: { | ||
| id: dialogId, | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}` | ||
| } | ||
| 'aria-labelledby': `${buttonId} ${labelledBy}` | ||
| }, | ||
| calendarProps: { | ||
| autoFocus: true, | ||
| value: state.dateValue, | ||
| onChange: state.setDateValue, | ||
| minValue: props.minValue, | ||
| maxValue: props.maxValue, | ||
| isDisabled: props.isDisabled, | ||
| isReadOnly: props.isReadOnly, | ||
| isDateUnavailable: props.isDateUnavailable, | ||
| defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue, | ||
| isInvalid: state.isInvalid, | ||
| errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' ')) | ||
| }, | ||
| isInvalid, | ||
| validationErrors, | ||
| validationDetails | ||
| }; | ||
| } |
@@ -1,11 +0,20 @@ | ||
| import {DatePickerFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker'; | ||
| import {KeyboardEvent} from '@react-types/shared'; | ||
| import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus'; | ||
| import {DateFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker'; | ||
| import {FocusableElement, KeyboardEvent, RefObject} from '@react-types/shared'; | ||
| import {mergeProps} from '@react-aria/utils'; | ||
| import {RefObject} from 'react'; | ||
| import {useLocale} from '@react-aria/i18n'; | ||
| import {useMemo} from 'react'; | ||
| import {usePress} from '@react-aria/interactions'; | ||
| export function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DatePickerFieldState, ref: RefObject<HTMLElement>) { | ||
| export function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DateFieldState, ref: RefObject<Element | null>, disableArrowNavigation?: boolean) { | ||
| let {direction} = useLocale(); | ||
| let focusManager = useMemo(() => createFocusManager(ref), [ref]); | ||
| // Open the popover on alt + arrow down | ||
| let onKeyDown = (e: KeyboardEvent) => { | ||
| if (e.altKey && e.key === 'ArrowDown' && 'setOpen' in state) { | ||
| if (!e.currentTarget.contains(e.target)) { | ||
| return; | ||
| } | ||
| if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) { | ||
| e.preventDefault(); | ||
@@ -15,2 +24,27 @@ e.stopPropagation(); | ||
| } | ||
| if (disableArrowNavigation) { | ||
| return; | ||
| } | ||
| switch (e.key) { | ||
| case 'ArrowLeft': | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (direction === 'rtl') { | ||
| focusManager.focusNext(); | ||
| } else { | ||
| focusManager.focusPrevious(); | ||
| } | ||
| break; | ||
| case 'ArrowRight': | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (direction === 'rtl') { | ||
| focusManager.focusPrevious(); | ||
| } else { | ||
| focusManager.focusNext(); | ||
| } | ||
| break; | ||
| } | ||
| }; | ||
@@ -20,15 +54,39 @@ | ||
| let focusLast = () => { | ||
| let elements = ref.current.querySelectorAll('[tabindex="0"]'); | ||
| let index = elements.length - 1; | ||
| while (index >= 0 && elements[index].getAttribute('aria-placeholder')) { | ||
| index--; | ||
| // Try to find the segment prior to the element that was clicked on. | ||
| let target = window.event?.target as FocusableElement; | ||
| let walker = getFocusableTreeWalker(ref.current, {tabbable: true}); | ||
| if (target) { | ||
| walker.currentNode = target; | ||
| target = walker.previousNode() as FocusableElement; | ||
| } | ||
| index = Math.min(index + 1, elements.length - 1); | ||
| let element = elements[index] as HTMLElement; | ||
| if (element) { | ||
| element.focus(); | ||
| // If no target found, find the last element from the end. | ||
| if (!target) { | ||
| let last: FocusableElement; | ||
| do { | ||
| last = walker.lastChild() as FocusableElement; | ||
| if (last) { | ||
| target = last; | ||
| } | ||
| } while (last); | ||
| } | ||
| // Now go backwards until we find an element that is not a placeholder. | ||
| while (target?.hasAttribute('data-placeholder')) { | ||
| let prev = walker.previousNode() as FocusableElement; | ||
| if (prev && prev.hasAttribute('data-placeholder')) { | ||
| target = prev; | ||
| } else { | ||
| break; | ||
| } | ||
| } | ||
| if (target) { | ||
| target.focus(); | ||
| } | ||
| }; | ||
| let {pressProps} = usePress({ | ||
| preventFocusOnPress: true, | ||
| allowTextSelectionOnPress: true, | ||
| onPressStart(e) { | ||
@@ -35,0 +93,0 @@ if (e.pointerType === 'mouse') { |
@@ -18,29 +18,49 @@ /* | ||
| import {DateRangePickerState} from '@react-stately/datepicker'; | ||
| import {HTMLAttributes, LabelHTMLAttributes, RefObject} from 'react'; | ||
| import {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form'; | ||
| import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared'; | ||
| import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils'; | ||
| import {focusManagerSymbol, roleSymbol} from './useDateField'; | ||
| // @ts-ignore | ||
| import intlMessages from '../intl/*.json'; | ||
| import {mergeProps, useDescription, useId, useLabels} from '@react-aria/utils'; | ||
| import {RangeCalendarProps} from '@react-types/calendar'; | ||
| import {useDatePickerGroup} from './useDatePickerGroup'; | ||
| import {useField} from '@react-aria/label'; | ||
| import {useFocusWithin} from '@react-aria/interactions'; | ||
| import {useLocale, useMessageFormatter} from '@react-aria/i18n'; | ||
| import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; | ||
| import {useMemo, useRef} from 'react'; | ||
| interface DateRangePickerAria<T extends DateValue> { | ||
| labelProps: LabelHTMLAttributes<HTMLLabelElement>, | ||
| groupProps: HTMLAttributes<HTMLElement>, | ||
| startFieldProps: AriaDatePickerProps<T>, | ||
| endFieldProps: AriaDatePickerProps<T>, | ||
| export interface DateRangePickerAria extends ValidationResult { | ||
| /** Props for the date range picker's visible label element, if any. */ | ||
| labelProps: DOMAttributes, | ||
| /** Props for the grouping element containing the date fields and button. */ | ||
| groupProps: GroupDOMAttributes, | ||
| /** Props for the start date field. */ | ||
| startFieldProps: AriaDatePickerProps<DateValue>, | ||
| /** Props for the end date field. */ | ||
| endFieldProps: AriaDatePickerProps<DateValue>, | ||
| /** Props for the popover trigger button. */ | ||
| buttonProps: AriaButtonProps, | ||
| /** Props for the description element, if any. */ | ||
| descriptionProps: HTMLAttributes<HTMLElement>, | ||
| descriptionProps: DOMAttributes, | ||
| /** Props for the error message element, if any. */ | ||
| errorMessageProps: HTMLAttributes<HTMLElement>, | ||
| buttonProps: AriaButtonProps, | ||
| dialogProps: AriaDialogProps | ||
| errorMessageProps: DOMAttributes, | ||
| /** Props for the popover dialog. */ | ||
| dialogProps: AriaDialogProps, | ||
| /** Props for the range calendar within the popover dialog. */ | ||
| calendarProps: RangeCalendarProps<DateValue> | ||
| } | ||
| export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<HTMLElement>): DateRangePickerAria<T> { | ||
| let formatMessage = useMessageFormatter(intlMessages); | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a date picker component. | ||
| * A date range picker combines two DateFields and a RangeCalendar popover to allow | ||
| * users to enter or select a date and time range. | ||
| */ | ||
| export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<Element | null>): DateRangePickerAria { | ||
| let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker'); | ||
| let {isInvalid, validationErrors, validationDetails} = state.displayValidation; | ||
| let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({ | ||
| ...props, | ||
| labelElementType: 'span' | ||
| labelElementType: 'span', | ||
| isInvalid, | ||
| errorMessage: props.errorMessage || validationErrors | ||
| }); | ||
@@ -51,14 +71,15 @@ | ||
| let {locale} = useLocale(); | ||
| let description = state.formatValue(locale, {month: 'long'}); | ||
| let range = state.formatValue(locale, {month: 'long'}); | ||
| let description = range ? stringFormatter.format('selectedRangeDescription', {startDate: range.start, endDate: range.end}) : ''; | ||
| let descProps = useDescription(description); | ||
| let startFieldProps = useLabels({ | ||
| 'aria-label': formatMessage('startDate'), | ||
| let startFieldProps = { | ||
| 'aria-label': stringFormatter.format('startDate'), | ||
| 'aria-labelledby': labelledBy | ||
| }); | ||
| }; | ||
| let endFieldProps = useLabels({ | ||
| 'aria-label': formatMessage('endDate'), | ||
| let endFieldProps = { | ||
| 'aria-label': stringFormatter.format('endDate'), | ||
| 'aria-labelledby': labelledBy | ||
| }); | ||
| }; | ||
@@ -69,15 +90,60 @@ let buttonId = useId(); | ||
| let groupProps = useDatePickerGroup(state, ref); | ||
| let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined; | ||
| let focusManager = useMemo(() => createFocusManager(ref, { | ||
| // Exclude the button from the focus manager. | ||
| accept: element => element.id !== buttonId | ||
| }), [ref, buttonId]); | ||
| let commonFieldProps = { | ||
| [focusManagerSymbol]: focusManager, | ||
| [roleSymbol]: 'presentation', | ||
| 'aria-describedby': ariaDescribedBy, | ||
| placeholderValue: props.placeholderValue, | ||
| hideTimeZone: props.hideTimeZone, | ||
| hourCycle: props.hourCycle, | ||
| granularity: props.granularity, | ||
| shouldForceLeadingZeros: props.shouldForceLeadingZeros, | ||
| isDisabled: props.isDisabled, | ||
| isReadOnly: props.isReadOnly, | ||
| isRequired: props.isRequired, | ||
| validationBehavior: props.validationBehavior | ||
| }; | ||
| let domProps = filterDOMProps(props); | ||
| let {focusWithinProps} = useFocusWithin({ | ||
| onBlurWithin() { | ||
| state.confirmPlaceholder(); | ||
| } | ||
| ...props, | ||
| isDisabled: state.isOpen, | ||
| onBlurWithin: props.onBlur, | ||
| onFocusWithin: props.onFocus, | ||
| onFocusWithinChange: props.onFocusChange | ||
| }); | ||
| let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined; | ||
| let startFieldValidation = useRef(DEFAULT_VALIDATION_RESULT); | ||
| let endFieldValidation = useRef(DEFAULT_VALIDATION_RESULT); | ||
| return { | ||
| groupProps: mergeProps(groupProps, fieldProps, descProps, focusWithinProps, { | ||
| role: 'group', | ||
| groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, { | ||
| role: 'group' as const, | ||
| 'aria-disabled': props.isDisabled || null, | ||
| 'aria-describedby': ariaDescribedBy | ||
| 'aria-describedby': ariaDescribedBy, | ||
| onKeyDown(e: KeyboardEvent) { | ||
| if (state.isOpen) { | ||
| return; | ||
| } | ||
| if (props.onKeyDown) { | ||
| props.onKeyDown(e); | ||
| } | ||
| }, | ||
| onKeyUp(e: KeyboardEvent) { | ||
| if (state.isOpen) { | ||
| return; | ||
| } | ||
| if (props.onKeyUp) { | ||
| props.onKeyUp(e); | ||
| } | ||
| } | ||
| }), | ||
@@ -87,3 +153,2 @@ labelProps: { | ||
| onClick: () => { | ||
| let focusManager = createFocusManager(ref); | ||
| focusManager.focusFirst(); | ||
@@ -95,23 +160,69 @@ } | ||
| id: buttonId, | ||
| excludeFromTabOrder: true, | ||
| 'aria-haspopup': 'dialog', | ||
| 'aria-label': formatMessage('calendar'), | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}`, | ||
| 'aria-describedby': ariaDescribedBy | ||
| 'aria-label': stringFormatter.format('calendar'), | ||
| 'aria-labelledby': `${buttonId} ${labelledBy}`, | ||
| 'aria-describedby': ariaDescribedBy, | ||
| 'aria-expanded': state.isOpen, | ||
| isDisabled: props.isDisabled || props.isReadOnly, | ||
| onPress: () => state.setOpen(true) | ||
| }, | ||
| dialogProps: { | ||
| id: dialogId, | ||
| 'aria-labelledby': `${labelledBy} ${buttonId}` | ||
| 'aria-labelledby': `${buttonId} ${labelledBy}` | ||
| }, | ||
| startFieldProps: { | ||
| ...startFieldProps, | ||
| 'aria-describedby': fieldProps['aria-describedby'] | ||
| ...commonFieldProps, | ||
| value: state.value?.start, | ||
| onChange: start => state.setDateTime('start', start), | ||
| autoFocus: props.autoFocus, | ||
| name: props.startName, | ||
| [privateValidationStateProp]: { | ||
| realtimeValidation: state.realtimeValidation, | ||
| displayValidation: state.displayValidation, | ||
| updateValidation(e) { | ||
| startFieldValidation.current = e; | ||
| state.updateValidation(mergeValidation(e, endFieldValidation.current)); | ||
| }, | ||
| resetValidation: state.resetValidation, | ||
| commitValidation: state.commitValidation | ||
| } | ||
| }, | ||
| endFieldProps: { | ||
| ...endFieldProps, | ||
| 'aria-describedby': fieldProps['aria-describedby'] | ||
| ...commonFieldProps, | ||
| value: state.value?.end, | ||
| onChange: end => state.setDateTime('end', end), | ||
| name: props.endName, | ||
| [privateValidationStateProp]: { | ||
| realtimeValidation: state.realtimeValidation, | ||
| displayValidation: state.displayValidation, | ||
| updateValidation(e) { | ||
| endFieldValidation.current = e; | ||
| state.updateValidation(mergeValidation(startFieldValidation.current, e)); | ||
| }, | ||
| resetValidation: state.resetValidation, | ||
| commitValidation: state.commitValidation | ||
| } | ||
| }, | ||
| descriptionProps, | ||
| errorMessageProps | ||
| errorMessageProps, | ||
| calendarProps: { | ||
| autoFocus: true, | ||
| value: state.dateRange, | ||
| onChange: state.setDateRange, | ||
| minValue: props.minValue, | ||
| maxValue: props.maxValue, | ||
| isDisabled: props.isDisabled, | ||
| isReadOnly: props.isReadOnly, | ||
| isDateUnavailable: props.isDateUnavailable, | ||
| allowsNonContiguousRanges: props.allowsNonContiguousRanges, | ||
| defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue, | ||
| isInvalid: state.isInvalid, | ||
| errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' ')) | ||
| }, | ||
| isInvalid, | ||
| validationErrors, | ||
| validationDetails | ||
| }; | ||
| } |
@@ -13,26 +13,30 @@ /* | ||
| import {DatePickerFieldState, DateSegment} from '@react-stately/datepicker'; | ||
| import {DatePickerProps, DateValue} from '@react-types/datepicker'; | ||
| import {DOMProps} from '@react-types/shared'; | ||
| import {getScrollParent, isIOS, isMac, mergeProps, scrollIntoView, useEvent, useId} from '@react-aria/utils'; | ||
| import {labelIds} from './useDateField'; | ||
| import {CalendarDate, toCalendar} from '@internationalized/date'; | ||
| import {DateFieldState, DateSegment} from '@react-stately/datepicker'; | ||
| import {getScrollParent, isIOS, isMac, mergeProps, scrollIntoViewport, useEvent, useId, useLabels, useLayoutEffect} from '@react-aria/utils'; | ||
| import {hookData} from './useDateField'; | ||
| import {NumberParser} from '@internationalized/number'; | ||
| import React, {HTMLAttributes, RefObject, useMemo, useRef} from 'react'; | ||
| import React, {useMemo, useRef} from 'react'; | ||
| import {RefObject} from '@react-types/shared'; | ||
| import {useDateFormatter, useFilter, useLocale} from '@react-aria/i18n'; | ||
| import {useDisplayNames} from './useDisplayNames'; | ||
| import {useFocusManager} from '@react-aria/focus'; | ||
| import {usePress} from '@react-aria/interactions'; | ||
| import {useSpinButton} from '@react-aria/spinbutton'; | ||
| interface DateSegmentAria { | ||
| segmentProps: HTMLAttributes<HTMLDivElement> | ||
| export interface DateSegmentAria { | ||
| /** Props for the segment element. */ | ||
| segmentProps: React.HTMLAttributes<HTMLDivElement> | ||
| } | ||
| export function useDateSegment<T extends DateValue>(props: DatePickerProps<T> & DOMProps, segment: DateSegment, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateSegmentAria { | ||
| /** | ||
| * Provides the behavior and accessibility implementation for a segment in a date field. | ||
| * A date segment displays an individual unit of a date and time, and allows users to edit | ||
| * the value by typing or using the arrow keys to increment and decrement. | ||
| */ | ||
| export function useDateSegment(segment: DateSegment, state: DateFieldState, ref: RefObject<HTMLElement | null>): DateSegmentAria { | ||
| let enteredKeys = useRef(''); | ||
| let {locale, direction} = useLocale(); | ||
| let {locale} = useLocale(); | ||
| let displayNames = useDisplayNames(); | ||
| let focusManager = useFocusManager(); | ||
| let {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state); | ||
| let textValue = segment.text; | ||
| let textValue = segment.isPlaceholder ? '' : segment.text; | ||
| let options = useMemo(() => state.dateFormatter.resolvedOptions(), [state.dateFormatter]); | ||
@@ -46,6 +50,6 @@ let monthDateFormatter = useDateFormatter({month: 'long', timeZone: options.timeZone}); | ||
| if (segment.type === 'month') { | ||
| if (segment.type === 'month' && !segment.isPlaceholder) { | ||
| let monthTextValue = monthDateFormatter.format(state.dateValue); | ||
| textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue; | ||
| } else if (segment.type === 'hour' || segment.type === 'dayPeriod') { | ||
| } else if (segment.type === 'hour' && !segment.isPlaceholder) { | ||
| textValue = hourDateFormatter.format(state.dateValue); | ||
@@ -55,2 +59,5 @@ } | ||
| let {spinButtonProps} = useSpinButton({ | ||
| // The ARIA spec says aria-valuenow is optional if there's no value, but aXe seems to require it. | ||
| // This doesn't seem to have any negative effects with real AT since we also use aria-valuetext. | ||
| // https://github.com/dequelabs/axe-core/issues/3505 | ||
| value: segment.value, | ||
@@ -60,5 +67,5 @@ textValue, | ||
| maxValue: segment.maxValue, | ||
| isDisabled: props.isDisabled, | ||
| isReadOnly: props.isReadOnly || !segment.isEditable, | ||
| isRequired: props.isRequired, | ||
| isDisabled: state.isDisabled, | ||
| isReadOnly: state.isReadOnly || !segment.isEditable, | ||
| isRequired: state.isRequired, | ||
| onIncrement: () => { | ||
@@ -93,5 +100,9 @@ enteredKeys.current = ''; | ||
| let backspace = () => { | ||
| if (parser.isValidPartialNumber(segment.text) && !props.isReadOnly && !segment.isPlaceholder) { | ||
| if (segment.text === segment.placeholder) { | ||
| focusManager.focusPrevious(); | ||
| } | ||
| if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly && !segment.isPlaceholder) { | ||
| let newValue = segment.text.slice(0, -1); | ||
| let parsed = parser.parse(newValue); | ||
| newValue = parsed === 0 ? '' : newValue; | ||
| if (newValue.length === 0 || parsed === 0) { | ||
@@ -120,30 +131,2 @@ state.clearSegment(segment.type); | ||
| switch (e.key) { | ||
| case 'ArrowLeft': | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (direction === 'rtl') { | ||
| focusManager.focusNext(); | ||
| } else { | ||
| focusManager.focusPrevious(); | ||
| } | ||
| break; | ||
| case 'ArrowRight': | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (direction === 'rtl') { | ||
| focusManager.focusPrevious(); | ||
| } else { | ||
| focusManager.focusNext(); | ||
| } | ||
| break; | ||
| case 'Enter': | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| if (segment.isPlaceholder && !props.isReadOnly) { | ||
| state.confirmPlaceholder(segment.type); | ||
| } | ||
| focusManager.focusNext(); | ||
| break; | ||
| case 'Tab': | ||
| break; | ||
| case 'Backspace': | ||
@@ -175,4 +158,32 @@ case 'Delete': { | ||
| // Get a list of formatted era names so users can type the first character to choose one. | ||
| let eraFormatter = useDateFormatter({year: 'numeric', era: 'narrow', timeZone: 'UTC'}); | ||
| let eras = useMemo(() => { | ||
| if (segment.type !== 'era') { | ||
| return []; | ||
| } | ||
| let date = toCalendar(new CalendarDate(1, 1, 1), state.calendar); | ||
| let eras = state.calendar.getEras().map(era => { | ||
| let eraDate = date.set({year: 1, month: 1, day: 1, era}).toDate('UTC'); | ||
| let parts = eraFormatter.formatToParts(eraDate); | ||
| let formatted = parts.find(p => p.type === 'era').value; | ||
| return {era, formatted}; | ||
| }); | ||
| // Remove the common prefix from formatted values. This is so that in calendars with eras like | ||
| // ERA0 and ERA1 (e.g. Ethiopic), users can press "0" and "1" to select an era. In other cases, | ||
| // the first letter is used. | ||
| let prefixLength = commonPrefixLength(eras.map(era => era.formatted)); | ||
| if (prefixLength) { | ||
| for (let era of eras) { | ||
| era.formatted = era.formatted.slice(prefixLength); | ||
| } | ||
| } | ||
| return eras; | ||
| }, [eraFormatter, state.calendar, segment.type]); | ||
| let onInput = (key: string) => { | ||
| if (props.isDisabled || props.isReadOnly) { | ||
| if (state.isDisabled || state.isReadOnly) { | ||
| return; | ||
@@ -194,2 +205,10 @@ } | ||
| break; | ||
| case 'era': { | ||
| let matched = eras.find(e => startsWith(e.formatted, key)); | ||
| if (matched) { | ||
| state.setSegment('era', matched.era); | ||
| focusManager.focusNext(); | ||
| } | ||
| break; | ||
| } | ||
| case 'day': | ||
@@ -254,12 +273,20 @@ case 'hour': | ||
| enteredKeys.current = ''; | ||
| scrollIntoView(getScrollParent(ref.current) as HTMLElement, ref.current); | ||
| scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)}); | ||
| // Safari requires that a selection is set or it won't fire input events. | ||
| // Since usePress disables text selection, this won't happen by default. | ||
| ref.current.style.webkitUserSelect = 'text'; | ||
| // Collapse selection to start or Chrome won't fire input events. | ||
| let selection = window.getSelection(); | ||
| selection.collapse(ref.current); | ||
| ref.current.style.webkitUserSelect = ''; | ||
| }; | ||
| let documentRef = useRef(typeof document !== 'undefined' ? document : null); | ||
| useEvent(documentRef, 'selectionchange', () => { | ||
| // Enforce that the selection is collapsed when inside a date segment. | ||
| // Otherwise, when tapping on a segment in Android Chrome and then entering text, | ||
| // composition events will be fired that break the DOM structure and crash the page. | ||
| let selection = window.getSelection(); | ||
| if (ref.current.contains(selection.anchorNode)) { | ||
| selection.collapse(ref.current); | ||
| } | ||
| }); | ||
| let compositionRef = useRef(''); | ||
@@ -273,3 +300,3 @@ // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor... | ||
| case 'deleteContentForward': | ||
| if (parser.isValidPartialNumber(segment.text) && !props.isReadOnly) { | ||
| if (parser.isValidPartialNumber(segment.text) && !state.isReadOnly) { | ||
| backspace(); | ||
@@ -311,23 +338,15 @@ } | ||
| // Focus on mouse down/touch up to match native textfield behavior. | ||
| // usePress handles canceling text selection. | ||
| let {pressProps} = usePress({ | ||
| preventFocusOnPress: true, | ||
| onPressStart: (e) => { | ||
| if (e.pointerType === 'mouse') { | ||
| e.target.focus(); | ||
| useLayoutEffect(() => { | ||
| let element = ref.current; | ||
| return () => { | ||
| // If the focused segment is removed, focus the previous one, or the next one if there was no previous one. | ||
| if (document.activeElement === element) { | ||
| let prev = focusManager.focusPrevious(); | ||
| if (!prev) { | ||
| focusManager.focusNext(); | ||
| } | ||
| } | ||
| }, | ||
| onPress(e) { | ||
| if (e.pointerType !== 'mouse') { | ||
| e.target.focus(); | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
| }, [ref, focusManager]); | ||
| // For Android: prevent selection on long press. | ||
| useEvent(ref, 'selectstart', e => { | ||
| e.preventDefault(); | ||
| }); | ||
| // spinbuttons cannot be focused with VoiceOver on iOS. | ||
@@ -342,38 +361,73 @@ let touchPropOverrides = isIOS() || segment.type === 'timeZoneName' ? { | ||
| let {ariaLabelledBy, ariaDescribedBy} = labelIds.get(state); | ||
| // Only apply aria-describedby to the first segment, unless the field is invalid. This avoids it being | ||
| // read every time the user navigates to a new segment. | ||
| let firstSegment = useMemo(() => state.segments.find(s => s.isEditable), [state.segments]); | ||
| if (segment !== firstSegment && state.validationState !== 'invalid') { | ||
| if (segment !== firstSegment && !state.isInvalid) { | ||
| ariaDescribedBy = undefined; | ||
| } | ||
| let id = useId(props.id); | ||
| let isEditable = !props.isDisabled && !props.isReadOnly && segment.isEditable; | ||
| let id = useId(); | ||
| let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable; | ||
| // Prepend the label passed from the field to each segment name. | ||
| // This is needed because VoiceOver on iOS does not announce groups. | ||
| let name = segment.type === 'literal' ? '' : displayNames.of(segment.type); | ||
| let labelProps = useLabels({ | ||
| 'aria-label': `${name}${ariaLabel ? `, ${ariaLabel}` : ''}${ariaLabelledBy ? ', ' : ''}`, | ||
| 'aria-labelledby': ariaLabelledBy | ||
| }); | ||
| // Literal segments should not be visible to screen readers. We don't really need any of the above, | ||
| // but the rules of hooks mean hooks cannot be conditional so we have to put this condition here. | ||
| if (segment.type === 'literal') { | ||
| return { | ||
| segmentProps: { | ||
| 'aria-hidden': true | ||
| } | ||
| }; | ||
| } | ||
| return { | ||
| segmentProps: mergeProps(spinButtonProps, pressProps, { | ||
| segmentProps: mergeProps(spinButtonProps, labelProps, { | ||
| id, | ||
| ...touchPropOverrides, | ||
| 'aria-controls': props['aria-controls'], | ||
| // 'aria-haspopup': props['aria-haspopup'], // deprecated in ARIA 1.2 | ||
| 'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined, | ||
| 'aria-label': segment.type !== 'literal' ? displayNames.of(segment.type) : undefined, | ||
| 'aria-labelledby': `${ariaLabelledBy} ${id}`, | ||
| 'aria-invalid': state.isInvalid ? 'true' : undefined, | ||
| 'aria-describedby': ariaDescribedBy, | ||
| 'aria-placeholder': segment.isPlaceholder ? segment.text : undefined, | ||
| 'aria-readonly': props.isReadOnly || !segment.isEditable ? 'true' : undefined, | ||
| 'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined, | ||
| 'data-placeholder': segment.isPlaceholder || undefined, | ||
| contentEditable: isEditable, | ||
| suppressContentEditableWarning: isEditable, | ||
| spellCheck: isEditable ? 'false' : undefined, | ||
| autoCapitalize: isEditable ? 'off' : undefined, | ||
| autoCorrect: isEditable ? 'off' : undefined, | ||
| // Capitalization was changed in React 17... | ||
| [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined, | ||
| inputMode: props.isDisabled || segment.type === 'dayPeriod' || !isEditable ? undefined : 'numeric', | ||
| tabIndex: props.isDisabled ? undefined : 0, | ||
| inputMode: state.isDisabled || segment.type === 'dayPeriod' || segment.type === 'era' || !isEditable ? undefined : 'numeric', | ||
| tabIndex: state.isDisabled ? undefined : 0, | ||
| onKeyDown, | ||
| onFocus | ||
| onFocus, | ||
| style: { | ||
| caretColor: 'transparent' | ||
| }, | ||
| // Prevent pointer events from reaching useDatePickerGroup, and allow native browser behavior to focus the segment. | ||
| onPointerDown(e) { | ||
| e.stopPropagation(); | ||
| }, | ||
| onMouseDown(e) { | ||
| e.stopPropagation(); | ||
| } | ||
| }) | ||
| }; | ||
| } | ||
| function commonPrefixLength(strings: string[]): number { | ||
| // Sort the strings, and compare the characters in the first and last to find the common prefix. | ||
| strings.sort(); | ||
| let first = strings[0]; | ||
| let last = strings[strings.length - 1]; | ||
| for (let i = 0; i < first.length; i++) { | ||
| if (first[i] !== last[i]) { | ||
| return i; | ||
| } | ||
| } | ||
| return 0; | ||
| } |
@@ -15,7 +15,7 @@ /* | ||
| import intlMessages from '../intl/*.json'; | ||
| import {MessageDictionary} from '@internationalized/message'; | ||
| import {useLocale} from '@react-aria/i18n'; | ||
| import {LocalizedStringDictionary} from '@internationalized/string'; | ||
| import {useLocale, useLocalizedStringDictionary} from '@react-aria/i18n'; | ||
| import {useMemo} from 'react'; | ||
| type Field = 'era' | 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod' | 'timeZoneName' | 'weekday'; | ||
| type Field = Intl.DateTimeFormatPartTypes; | ||
| interface DisplayNames { | ||
@@ -25,4 +25,6 @@ of(field: Field): string | ||
| /** @private */ | ||
| export function useDisplayNames(): DisplayNames { | ||
| let {locale} = useLocale(); | ||
| let dictionary = useLocalizedStringDictionary(intlMessages, '@react-aria/datepicker'); | ||
| return useMemo(() => { | ||
@@ -35,5 +37,5 @@ // Try to use Intl.DisplayNames if possible. It may be supported in browsers, but not support the dateTimeField | ||
| } catch (err) { | ||
| return new DisplayNamesPolyfill(locale); | ||
| return new DisplayNamesPolyfill(locale, dictionary); | ||
| } | ||
| }, [locale]); | ||
| }, [locale, dictionary]); | ||
| } | ||
@@ -43,7 +45,7 @@ | ||
| private locale: string; | ||
| private dictionary: MessageDictionary; | ||
| private dictionary: LocalizedStringDictionary<Field, string>; | ||
| constructor(locale: string) { | ||
| constructor(locale: string, dictionary: LocalizedStringDictionary<Field, string>) { | ||
| this.locale = locale; | ||
| this.dictionary = new MessageDictionary(intlMessages); | ||
| this.dictionary = dictionary; | ||
| } | ||
@@ -50,0 +52,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 4 instances in 1 package
Fixed alerts
License Policy Violation
LicenseThis 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 riskThis 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
- increased by95.94%
544743
- Number of package files
- increased by1287.5%
222
- Lines of code
- increased by205.87%
6463
Worsened metrics
- Dependency count
- increased by25%
20
- Number of low license alerts
- increased byInfinity%
4
- License quality
- decreased by-20%
80
- Number of medium supply chain risk alerts
- increased by100%
2
Dependency changes
+ Added@internationalized/string@3.2.4-nightly.5022+b4093dfef
+ Added@swc/helpers@^0.5.0
+ Added@swc/helpers@0.5.13(transitive)
+ Addedreact@18.3.1(transitive)
+ Addedreact-dom@18.3.1(transitive)
+ Addedscheduler@0.23.2(transitive)
+ Addedtslib@2.8.1(transitive)
- Removed@babel/runtime@^7.6.2
- Removed@internationalized/message@3.0.4-nightly.3091+2815eea07
- Removed@babel/runtime@7.26.0(transitive)
- Removedobject-assign@4.1.1(transitive)
- Removedreact@17.0.2(transitive)
- Removedreact-dom@17.0.2(transitive)
- Removedregenerator-runtime@0.14.1(transitive)
- Removedscheduler@0.20.2(transitive)
Updated@internationalized/number@3.5.4-nightly.5022+b4093dfef
Updated@react-aria/interactions@3.0.0-nightly.3094+b4093dfef
Updated@react-stately/datepicker@3.0.0-nightly.3094+b4093dfef