@react-aria/datepicker 3.4.1 → 3.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/import.mjs +33 -18
- package/dist/main.js +32 -17
- package/dist/main.js.map +1 -1
- package/dist/module.js +33 -18
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +12 -4
- package/dist/types.d.ts.map +1 -1
- package/package.json +18 -18
- package/src/useDateField.ts +26 -7
- package/src/useDatePicker.ts +5 -3
- package/src/useDateRangePicker.ts +7 -4
- package/src/useDateSegment.ts +1 -1
- package/src/useDisplayNames.ts +1 -1
package/dist/module.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {createFocusManager as $cIPI0$createFocusManager, getFocusableTreeWalker as $cIPI0$getFocusableTreeWalker} from "@react-aria/focus";
|
|
2
|
-
import {useId as $cIPI0$useId, useDescription as $cIPI0$useDescription, filterDOMProps as $cIPI0$filterDOMProps, mergeProps as $cIPI0$mergeProps, isMac as $cIPI0$isMac, scrollIntoViewport as $cIPI0$scrollIntoViewport, getScrollParent as $cIPI0$getScrollParent, useEvent as $cIPI0$useEvent, useLayoutEffect as $cIPI0$useLayoutEffect, isIOS as $cIPI0$isIOS, useLabels as $cIPI0$useLabels} from "@react-aria/utils";
|
|
2
|
+
import {useId as $cIPI0$useId, useDescription as $cIPI0$useDescription, filterDOMProps as $cIPI0$filterDOMProps, mergeProps as $cIPI0$mergeProps, useFormReset as $cIPI0$useFormReset, isMac as $cIPI0$isMac, scrollIntoViewport as $cIPI0$scrollIntoViewport, getScrollParent as $cIPI0$getScrollParent, useEvent as $cIPI0$useEvent, useLayoutEffect as $cIPI0$useLayoutEffect, isIOS as $cIPI0$isIOS, useLabels as $cIPI0$useLabels} from "@react-aria/utils";
|
|
3
3
|
import $cIPI0$react, {useMemo as $cIPI0$useMemo, useRef as $cIPI0$useRef, useEffect as $cIPI0$useEffect} from "react";
|
|
4
4
|
import {useField as $cIPI0$useField} from "@react-aria/label";
|
|
5
5
|
import {useFocusWithin as $cIPI0$useFocusWithin, usePress as $cIPI0$usePress} from "@react-aria/interactions";
|
|
@@ -34,7 +34,7 @@ function $parcel$interopDefault(a) {
|
|
|
34
34
|
* governing permissions and limitations under the License.
|
|
35
35
|
*/
|
|
36
36
|
|
|
37
|
-
var $
|
|
37
|
+
var $dfb4eba373ed9493$exports = {};
|
|
38
38
|
var $f23889fffbde9058$exports = {};
|
|
39
39
|
$f23889fffbde9058$exports = {
|
|
40
40
|
"calendar": `التقويم`,
|
|
@@ -749,7 +749,7 @@ $33fab8219207655a$exports = {
|
|
|
749
749
|
};
|
|
750
750
|
|
|
751
751
|
|
|
752
|
-
$
|
|
752
|
+
$dfb4eba373ed9493$exports = {
|
|
753
753
|
"ar-AE": $f23889fffbde9058$exports,
|
|
754
754
|
"bg-BG": $09d9badaa8903929$exports,
|
|
755
755
|
"cs-CZ": $151b77e0fd711730$exports,
|
|
@@ -886,6 +886,7 @@ const $16f0b7bb276bc17e$export$653eddfc964b0f8a = new WeakMap();
|
|
|
886
886
|
const $16f0b7bb276bc17e$export$300019f83c56d282 = "__role_" + Date.now();
|
|
887
887
|
const $16f0b7bb276bc17e$export$7b3062cd49e80452 = "__focusManager_" + Date.now();
|
|
888
888
|
function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
|
|
889
|
+
var _state_value;
|
|
889
890
|
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = (0, $cIPI0$useField)({
|
|
890
891
|
...props,
|
|
891
892
|
labelElementType: "span"
|
|
@@ -899,7 +900,7 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
|
|
|
899
900
|
onFocusWithin: props.onFocus,
|
|
900
901
|
onFocusWithinChange: props.onFocusChange
|
|
901
902
|
});
|
|
902
|
-
let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($
|
|
903
|
+
let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($dfb4eba373ed9493$exports))));
|
|
903
904
|
let message = state.maxGranularity === "hour" ? "selectedTimeDescription" : "selectedDateDescription";
|
|
904
905
|
let field = state.maxGranularity === "hour" ? "time" : "date";
|
|
905
906
|
let description = state.value ? stringFormatter.format(message, {
|
|
@@ -924,8 +925,8 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
|
|
|
924
925
|
$16f0b7bb276bc17e$export$653eddfc964b0f8a.set(state, {
|
|
925
926
|
ariaLabel: props["aria-label"],
|
|
926
927
|
ariaLabelledBy: [
|
|
927
|
-
|
|
928
|
-
|
|
928
|
+
labelProps.id,
|
|
929
|
+
props["aria-labelledby"]
|
|
929
930
|
].filter(Boolean).join(" ") || undefined,
|
|
930
931
|
ariaDescribedBy: describedBy,
|
|
931
932
|
focusManager: focusManager
|
|
@@ -950,6 +951,7 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
|
|
|
950
951
|
}, [
|
|
951
952
|
focusManager
|
|
952
953
|
]);
|
|
954
|
+
(0, $cIPI0$useFormReset)(props.inputRef, state.value, state.setValue);
|
|
953
955
|
let domProps = (0, $cIPI0$filterDOMProps)(props);
|
|
954
956
|
return {
|
|
955
957
|
labelProps: {
|
|
@@ -966,12 +968,20 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
|
|
|
966
968
|
if (props.onKeyUp) props.onKeyUp(e);
|
|
967
969
|
}
|
|
968
970
|
}),
|
|
971
|
+
inputProps: {
|
|
972
|
+
type: "hidden",
|
|
973
|
+
name: props.name,
|
|
974
|
+
value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ""
|
|
975
|
+
},
|
|
969
976
|
descriptionProps: descriptionProps,
|
|
970
977
|
errorMessageProps: errorMessageProps
|
|
971
978
|
};
|
|
972
979
|
}
|
|
973
980
|
function $16f0b7bb276bc17e$export$4c842f6a241dc825(props, state, ref) {
|
|
974
|
-
|
|
981
|
+
var _state_timeValue;
|
|
982
|
+
let res = $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref);
|
|
983
|
+
res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || "";
|
|
984
|
+
return res;
|
|
975
985
|
}
|
|
976
986
|
|
|
977
987
|
|
|
@@ -983,7 +993,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
|
|
|
983
993
|
let buttonId = (0, $cIPI0$useId)();
|
|
984
994
|
let dialogId = (0, $cIPI0$useId)();
|
|
985
995
|
let fieldId = (0, $cIPI0$useId)();
|
|
986
|
-
let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($
|
|
996
|
+
let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($dfb4eba373ed9493$exports))));
|
|
987
997
|
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = (0, $cIPI0$useField)({
|
|
988
998
|
...props,
|
|
989
999
|
labelElementType: "span"
|
|
@@ -1046,12 +1056,14 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
|
|
|
1046
1056
|
placeholderValue: props.placeholderValue,
|
|
1047
1057
|
hideTimeZone: props.hideTimeZone,
|
|
1048
1058
|
hourCycle: props.hourCycle,
|
|
1059
|
+
shouldForceLeadingZeros: props.shouldForceLeadingZeros,
|
|
1049
1060
|
granularity: props.granularity,
|
|
1050
1061
|
isDisabled: props.isDisabled,
|
|
1051
1062
|
isReadOnly: props.isReadOnly,
|
|
1052
1063
|
isRequired: props.isRequired,
|
|
1053
1064
|
validationState: state.validationState,
|
|
1054
|
-
autoFocus: props.autoFocus
|
|
1065
|
+
autoFocus: props.autoFocus,
|
|
1066
|
+
name: props.name
|
|
1055
1067
|
},
|
|
1056
1068
|
descriptionProps: descriptionProps,
|
|
1057
1069
|
errorMessageProps: errorMessageProps,
|
|
@@ -1060,14 +1072,14 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
|
|
|
1060
1072
|
id: buttonId,
|
|
1061
1073
|
"aria-haspopup": "dialog",
|
|
1062
1074
|
"aria-label": stringFormatter.format("calendar"),
|
|
1063
|
-
"aria-labelledby": `${
|
|
1075
|
+
"aria-labelledby": `${buttonId} ${labelledBy}`,
|
|
1064
1076
|
"aria-describedby": ariaDescribedBy,
|
|
1065
1077
|
"aria-expanded": state.isOpen || undefined,
|
|
1066
1078
|
onPress: ()=>state.setOpen(true)
|
|
1067
1079
|
},
|
|
1068
1080
|
dialogProps: {
|
|
1069
1081
|
id: dialogId,
|
|
1070
|
-
"aria-labelledby": `${
|
|
1082
|
+
"aria-labelledby": `${buttonId} ${labelledBy}`
|
|
1071
1083
|
},
|
|
1072
1084
|
calendarProps: {
|
|
1073
1085
|
autoFocus: true,
|
|
@@ -1140,7 +1152,7 @@ class $3aeceb3a64eb8358$var$DisplayNamesPolyfill {
|
|
|
1140
1152
|
}
|
|
1141
1153
|
constructor(locale){
|
|
1142
1154
|
this.locale = locale;
|
|
1143
|
-
this.dictionary = new (0, $cIPI0$LocalizedStringDictionary)((0, (/*@__PURE__*/$parcel$interopDefault($
|
|
1155
|
+
this.dictionary = new (0, $cIPI0$LocalizedStringDictionary)((0, (/*@__PURE__*/$parcel$interopDefault($dfb4eba373ed9493$exports))));
|
|
1144
1156
|
}
|
|
1145
1157
|
}
|
|
1146
1158
|
|
|
@@ -1418,7 +1430,7 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
|
|
|
1418
1430
|
// This is needed because VoiceOver on iOS does not announce groups.
|
|
1419
1431
|
let name = segment.type === "literal" ? "" : displayNames.of(segment.type);
|
|
1420
1432
|
let labelProps = (0, $cIPI0$useLabels)({
|
|
1421
|
-
"aria-label":
|
|
1433
|
+
"aria-label": `${name}${ariaLabel ? `, ${ariaLabel}` : ""}${ariaLabelledBy ? ", " : ""}`,
|
|
1422
1434
|
"aria-labelledby": ariaLabelledBy
|
|
1423
1435
|
});
|
|
1424
1436
|
// Literal segments should not be visible to screen readers. We don't really need any of the above,
|
|
@@ -1494,7 +1506,7 @@ function $32489daedd52963e$var$commonPrefixLength(strings) {
|
|
|
1494
1506
|
|
|
1495
1507
|
function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
1496
1508
|
var _state_value, _state_value1;
|
|
1497
|
-
let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($
|
|
1509
|
+
let stringFormatter = (0, $cIPI0$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($dfb4eba373ed9493$exports))));
|
|
1498
1510
|
let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps } = (0, $cIPI0$useField)({
|
|
1499
1511
|
...props,
|
|
1500
1512
|
labelElementType: "span"
|
|
@@ -1541,6 +1553,7 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
1541
1553
|
hideTimeZone: props.hideTimeZone,
|
|
1542
1554
|
hourCycle: props.hourCycle,
|
|
1543
1555
|
granularity: props.granularity,
|
|
1556
|
+
shouldForceLeadingZeros: props.shouldForceLeadingZeros,
|
|
1544
1557
|
isDisabled: props.isDisabled,
|
|
1545
1558
|
isReadOnly: props.isReadOnly,
|
|
1546
1559
|
isRequired: props.isRequired,
|
|
@@ -1579,27 +1592,29 @@ function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
|
|
|
1579
1592
|
id: buttonId,
|
|
1580
1593
|
"aria-haspopup": "dialog",
|
|
1581
1594
|
"aria-label": stringFormatter.format("calendar"),
|
|
1582
|
-
"aria-labelledby": `${
|
|
1595
|
+
"aria-labelledby": `${buttonId} ${labelledBy}`,
|
|
1583
1596
|
"aria-describedby": ariaDescribedBy,
|
|
1584
1597
|
"aria-expanded": state.isOpen || undefined,
|
|
1585
1598
|
onPress: ()=>state.setOpen(true)
|
|
1586
1599
|
},
|
|
1587
1600
|
dialogProps: {
|
|
1588
1601
|
id: dialogId,
|
|
1589
|
-
"aria-labelledby": `${
|
|
1602
|
+
"aria-labelledby": `${buttonId} ${labelledBy}`
|
|
1590
1603
|
},
|
|
1591
1604
|
startFieldProps: {
|
|
1592
1605
|
...startFieldProps,
|
|
1593
1606
|
...commonFieldProps,
|
|
1594
1607
|
value: (_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.start,
|
|
1595
1608
|
onChange: (start)=>state.setDateTime("start", start),
|
|
1596
|
-
autoFocus: props.autoFocus
|
|
1609
|
+
autoFocus: props.autoFocus,
|
|
1610
|
+
name: props.startName
|
|
1597
1611
|
},
|
|
1598
1612
|
endFieldProps: {
|
|
1599
1613
|
...endFieldProps,
|
|
1600
1614
|
...commonFieldProps,
|
|
1601
1615
|
value: (_state_value1 = state.value) === null || _state_value1 === void 0 ? void 0 : _state_value1.end,
|
|
1602
|
-
onChange: (end)=>state.setDateTime("end", end)
|
|
1616
|
+
onChange: (end)=>state.setDateTime("end", end),
|
|
1617
|
+
name: props.endName
|
|
1603
1618
|
},
|
|
1604
1619
|
descriptionProps: descriptionProps,
|
|
1605
1620
|
errorMessageProps: errorMessageProps,
|