@page-speed/forms 0.4.7 → 0.4.8
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/inputs.cjs +44 -10
- package/dist/inputs.cjs.map +1 -1
- package/dist/inputs.js +44 -10
- package/dist/inputs.js.map +1 -1
- package/package.json +1 -1
package/dist/inputs.cjs
CHANGED
|
@@ -642,6 +642,7 @@ function Select({
|
|
|
642
642
|
const [isOpen, setIsOpen] = React9__namespace.useState(false);
|
|
643
643
|
const [searchQuery, setSearchQuery] = React9__namespace.useState("");
|
|
644
644
|
const [focusedIndex, setFocusedIndex] = React9__namespace.useState(-1);
|
|
645
|
+
const [hasInteracted, setHasInteracted] = React9__namespace.useState(false);
|
|
645
646
|
const triggerRef = React9__namespace.useRef(null);
|
|
646
647
|
const dropdownRef = React9__namespace.useRef(null);
|
|
647
648
|
const searchInputRef = React9__namespace.useRef(null);
|
|
@@ -682,6 +683,9 @@ function Select({
|
|
|
682
683
|
if (disabled) return;
|
|
683
684
|
const newIsOpen = !isOpen;
|
|
684
685
|
setIsOpen(newIsOpen);
|
|
686
|
+
if (newIsOpen && !hasInteracted) {
|
|
687
|
+
setHasInteracted(true);
|
|
688
|
+
}
|
|
685
689
|
if (newIsOpen && searchable && searchInputRef.current) {
|
|
686
690
|
setTimeout(() => searchInputRef.current?.focus(), 0);
|
|
687
691
|
}
|
|
@@ -768,11 +772,14 @@ function Select({
|
|
|
768
772
|
}
|
|
769
773
|
};
|
|
770
774
|
const closeDropdown = React9__namespace.useCallback(() => {
|
|
775
|
+
if (!isOpen) return;
|
|
771
776
|
setIsOpen(false);
|
|
772
777
|
setSearchQuery("");
|
|
773
778
|
setFocusedIndex(-1);
|
|
774
|
-
|
|
775
|
-
|
|
779
|
+
if (hasInteracted) {
|
|
780
|
+
onBlur?.();
|
|
781
|
+
}
|
|
782
|
+
}, [isOpen, hasInteracted, onBlur]);
|
|
776
783
|
useOnClickOutside.useOnClickOutside([triggerRef, dropdownRef], closeDropdown, void 0, {
|
|
777
784
|
capture: true
|
|
778
785
|
});
|
|
@@ -933,6 +940,7 @@ function MultiSelect({
|
|
|
933
940
|
const [isOpen, setIsOpen] = React9__namespace.useState(false);
|
|
934
941
|
const [searchQuery, setSearchQuery] = React9__namespace.useState("");
|
|
935
942
|
const [focusedIndex, setFocusedIndex] = React9__namespace.useState(-1);
|
|
943
|
+
const [hasInteracted, setHasInteracted] = React9__namespace.useState(false);
|
|
936
944
|
const triggerRef = React9__namespace.useRef(null);
|
|
937
945
|
const dropdownRef = React9__namespace.useRef(null);
|
|
938
946
|
const searchInputRef = React9__namespace.useRef(null);
|
|
@@ -991,6 +999,9 @@ function MultiSelect({
|
|
|
991
999
|
if (disabled) return;
|
|
992
1000
|
const newIsOpen = !isOpen;
|
|
993
1001
|
setIsOpen(newIsOpen);
|
|
1002
|
+
if (newIsOpen && !hasInteracted) {
|
|
1003
|
+
setHasInteracted(true);
|
|
1004
|
+
}
|
|
994
1005
|
if (newIsOpen && searchable && searchInputRef.current) {
|
|
995
1006
|
setTimeout(() => searchInputRef.current?.focus(), 0);
|
|
996
1007
|
}
|
|
@@ -1071,11 +1082,14 @@ function MultiSelect({
|
|
|
1071
1082
|
}
|
|
1072
1083
|
};
|
|
1073
1084
|
const closeDropdown = React9__namespace.useCallback(() => {
|
|
1085
|
+
if (!isOpen) return;
|
|
1074
1086
|
setIsOpen(false);
|
|
1075
1087
|
setSearchQuery("");
|
|
1076
1088
|
setFocusedIndex(-1);
|
|
1077
|
-
|
|
1078
|
-
|
|
1089
|
+
if (hasInteracted) {
|
|
1090
|
+
onBlur?.();
|
|
1091
|
+
}
|
|
1092
|
+
}, [isOpen, hasInteracted, onBlur]);
|
|
1079
1093
|
useOnClickOutside.useOnClickOutside([triggerRef, dropdownRef], closeDropdown, void 0, {
|
|
1080
1094
|
capture: true
|
|
1081
1095
|
});
|
|
@@ -1849,6 +1863,7 @@ function DatePicker({
|
|
|
1849
1863
|
...props
|
|
1850
1864
|
}) {
|
|
1851
1865
|
const [isOpen, setIsOpen] = React9__namespace.useState(false);
|
|
1866
|
+
const [hasInteracted, setHasInteracted] = React9__namespace.useState(false);
|
|
1852
1867
|
const [selectedMonth, setSelectedMonth] = React9__namespace.useState(
|
|
1853
1868
|
value || /* @__PURE__ */ new Date()
|
|
1854
1869
|
);
|
|
@@ -1871,7 +1886,13 @@ function DatePicker({
|
|
|
1871
1886
|
};
|
|
1872
1887
|
const handleToggle = () => {
|
|
1873
1888
|
if (disabled) return;
|
|
1874
|
-
setIsOpen((prev) =>
|
|
1889
|
+
setIsOpen((prev) => {
|
|
1890
|
+
const newIsOpen = !prev;
|
|
1891
|
+
if (newIsOpen && !hasInteracted) {
|
|
1892
|
+
setHasInteracted(true);
|
|
1893
|
+
}
|
|
1894
|
+
return newIsOpen;
|
|
1895
|
+
});
|
|
1875
1896
|
};
|
|
1876
1897
|
const isDisabled = (date) => {
|
|
1877
1898
|
if (minDate && date < minDate) return true;
|
|
@@ -1881,9 +1902,12 @@ function DatePicker({
|
|
|
1881
1902
|
return false;
|
|
1882
1903
|
};
|
|
1883
1904
|
const closeCalendar = React9__namespace.useCallback(() => {
|
|
1905
|
+
if (!isOpen) return;
|
|
1884
1906
|
setIsOpen(false);
|
|
1885
|
-
|
|
1886
|
-
|
|
1907
|
+
if (hasInteracted) {
|
|
1908
|
+
onBlur?.();
|
|
1909
|
+
}
|
|
1910
|
+
}, [isOpen, hasInteracted, onBlur]);
|
|
1887
1911
|
useOnClickOutside.useOnClickOutside([inputRef, dropdownRef], closeCalendar, void 0, {
|
|
1888
1912
|
capture: true
|
|
1889
1913
|
});
|
|
@@ -2245,6 +2269,7 @@ function DateRangePicker({
|
|
|
2245
2269
|
...props
|
|
2246
2270
|
}) {
|
|
2247
2271
|
const [isOpen, setIsOpen] = React9__namespace.useState(false);
|
|
2272
|
+
const [hasInteracted, setHasInteracted] = React9__namespace.useState(false);
|
|
2248
2273
|
const [selectedMonth, setSelectedMonth] = React9__namespace.useState(
|
|
2249
2274
|
value.start || /* @__PURE__ */ new Date()
|
|
2250
2275
|
);
|
|
@@ -2287,7 +2312,13 @@ function DateRangePicker({
|
|
|
2287
2312
|
};
|
|
2288
2313
|
const handleToggle = () => {
|
|
2289
2314
|
if (disabled) return;
|
|
2290
|
-
setIsOpen((prev) =>
|
|
2315
|
+
setIsOpen((prev) => {
|
|
2316
|
+
const newIsOpen = !prev;
|
|
2317
|
+
if (newIsOpen && !hasInteracted) {
|
|
2318
|
+
setHasInteracted(true);
|
|
2319
|
+
}
|
|
2320
|
+
return newIsOpen;
|
|
2321
|
+
});
|
|
2291
2322
|
};
|
|
2292
2323
|
const isDisabled = (date) => {
|
|
2293
2324
|
if (minDate && date < minDate) return true;
|
|
@@ -2297,9 +2328,12 @@ function DateRangePicker({
|
|
|
2297
2328
|
return false;
|
|
2298
2329
|
};
|
|
2299
2330
|
const closeCalendar = React9__namespace.useCallback(() => {
|
|
2331
|
+
if (!isOpen) return;
|
|
2300
2332
|
setIsOpen(false);
|
|
2301
|
-
|
|
2302
|
-
|
|
2333
|
+
if (hasInteracted) {
|
|
2334
|
+
onBlur?.();
|
|
2335
|
+
}
|
|
2336
|
+
}, [isOpen, hasInteracted, onBlur]);
|
|
2303
2337
|
useOnClickOutside.useOnClickOutside([triggerRef, dropdownRef], closeCalendar, void 0, {
|
|
2304
2338
|
capture: true
|
|
2305
2339
|
});
|