@page-speed/forms 0.4.6 → 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.
Files changed (9) hide show
  1. package/dist/inputs.cjs +44 -10
  2. package/dist/inputs.cjs.map +1 -1
  3. package/dist/inputs.js +44 -10
  4. package/dist/inputs.js.map +1 -1
  5. package/dist/integration.cjs +8 -2
  6. package/dist/integration.cjs.map +1 -1
  7. package/dist/integration.js +8 -2
  8. package/dist/integration.js.map +1 -1
  9. package/package.json +2 -2
package/dist/inputs.js CHANGED
@@ -620,6 +620,7 @@ function Select({
620
620
  const [isOpen, setIsOpen] = React9.useState(false);
621
621
  const [searchQuery, setSearchQuery] = React9.useState("");
622
622
  const [focusedIndex, setFocusedIndex] = React9.useState(-1);
623
+ const [hasInteracted, setHasInteracted] = React9.useState(false);
623
624
  const triggerRef = React9.useRef(null);
624
625
  const dropdownRef = React9.useRef(null);
625
626
  const searchInputRef = React9.useRef(null);
@@ -660,6 +661,9 @@ function Select({
660
661
  if (disabled) return;
661
662
  const newIsOpen = !isOpen;
662
663
  setIsOpen(newIsOpen);
664
+ if (newIsOpen && !hasInteracted) {
665
+ setHasInteracted(true);
666
+ }
663
667
  if (newIsOpen && searchable && searchInputRef.current) {
664
668
  setTimeout(() => searchInputRef.current?.focus(), 0);
665
669
  }
@@ -746,11 +750,14 @@ function Select({
746
750
  }
747
751
  };
748
752
  const closeDropdown = React9.useCallback(() => {
753
+ if (!isOpen) return;
749
754
  setIsOpen(false);
750
755
  setSearchQuery("");
751
756
  setFocusedIndex(-1);
752
- onBlur?.();
753
- }, [onBlur]);
757
+ if (hasInteracted) {
758
+ onBlur?.();
759
+ }
760
+ }, [isOpen, hasInteracted, onBlur]);
754
761
  useOnClickOutside([triggerRef, dropdownRef], closeDropdown, void 0, {
755
762
  capture: true
756
763
  });
@@ -911,6 +918,7 @@ function MultiSelect({
911
918
  const [isOpen, setIsOpen] = React9.useState(false);
912
919
  const [searchQuery, setSearchQuery] = React9.useState("");
913
920
  const [focusedIndex, setFocusedIndex] = React9.useState(-1);
921
+ const [hasInteracted, setHasInteracted] = React9.useState(false);
914
922
  const triggerRef = React9.useRef(null);
915
923
  const dropdownRef = React9.useRef(null);
916
924
  const searchInputRef = React9.useRef(null);
@@ -969,6 +977,9 @@ function MultiSelect({
969
977
  if (disabled) return;
970
978
  const newIsOpen = !isOpen;
971
979
  setIsOpen(newIsOpen);
980
+ if (newIsOpen && !hasInteracted) {
981
+ setHasInteracted(true);
982
+ }
972
983
  if (newIsOpen && searchable && searchInputRef.current) {
973
984
  setTimeout(() => searchInputRef.current?.focus(), 0);
974
985
  }
@@ -1049,11 +1060,14 @@ function MultiSelect({
1049
1060
  }
1050
1061
  };
1051
1062
  const closeDropdown = React9.useCallback(() => {
1063
+ if (!isOpen) return;
1052
1064
  setIsOpen(false);
1053
1065
  setSearchQuery("");
1054
1066
  setFocusedIndex(-1);
1055
- onBlur?.();
1056
- }, [onBlur]);
1067
+ if (hasInteracted) {
1068
+ onBlur?.();
1069
+ }
1070
+ }, [isOpen, hasInteracted, onBlur]);
1057
1071
  useOnClickOutside([triggerRef, dropdownRef], closeDropdown, void 0, {
1058
1072
  capture: true
1059
1073
  });
@@ -1827,6 +1841,7 @@ function DatePicker({
1827
1841
  ...props
1828
1842
  }) {
1829
1843
  const [isOpen, setIsOpen] = React9.useState(false);
1844
+ const [hasInteracted, setHasInteracted] = React9.useState(false);
1830
1845
  const [selectedMonth, setSelectedMonth] = React9.useState(
1831
1846
  value || /* @__PURE__ */ new Date()
1832
1847
  );
@@ -1849,7 +1864,13 @@ function DatePicker({
1849
1864
  };
1850
1865
  const handleToggle = () => {
1851
1866
  if (disabled) return;
1852
- setIsOpen((prev) => !prev);
1867
+ setIsOpen((prev) => {
1868
+ const newIsOpen = !prev;
1869
+ if (newIsOpen && !hasInteracted) {
1870
+ setHasInteracted(true);
1871
+ }
1872
+ return newIsOpen;
1873
+ });
1853
1874
  };
1854
1875
  const isDisabled = (date) => {
1855
1876
  if (minDate && date < minDate) return true;
@@ -1859,9 +1880,12 @@ function DatePicker({
1859
1880
  return false;
1860
1881
  };
1861
1882
  const closeCalendar = React9.useCallback(() => {
1883
+ if (!isOpen) return;
1862
1884
  setIsOpen(false);
1863
- onBlur?.();
1864
- }, [onBlur]);
1885
+ if (hasInteracted) {
1886
+ onBlur?.();
1887
+ }
1888
+ }, [isOpen, hasInteracted, onBlur]);
1865
1889
  useOnClickOutside([inputRef, dropdownRef], closeCalendar, void 0, {
1866
1890
  capture: true
1867
1891
  });
@@ -2223,6 +2247,7 @@ function DateRangePicker({
2223
2247
  ...props
2224
2248
  }) {
2225
2249
  const [isOpen, setIsOpen] = React9.useState(false);
2250
+ const [hasInteracted, setHasInteracted] = React9.useState(false);
2226
2251
  const [selectedMonth, setSelectedMonth] = React9.useState(
2227
2252
  value.start || /* @__PURE__ */ new Date()
2228
2253
  );
@@ -2265,7 +2290,13 @@ function DateRangePicker({
2265
2290
  };
2266
2291
  const handleToggle = () => {
2267
2292
  if (disabled) return;
2268
- setIsOpen((prev) => !prev);
2293
+ setIsOpen((prev) => {
2294
+ const newIsOpen = !prev;
2295
+ if (newIsOpen && !hasInteracted) {
2296
+ setHasInteracted(true);
2297
+ }
2298
+ return newIsOpen;
2299
+ });
2269
2300
  };
2270
2301
  const isDisabled = (date) => {
2271
2302
  if (minDate && date < minDate) return true;
@@ -2275,9 +2306,12 @@ function DateRangePicker({
2275
2306
  return false;
2276
2307
  };
2277
2308
  const closeCalendar = React9.useCallback(() => {
2309
+ if (!isOpen) return;
2278
2310
  setIsOpen(false);
2279
- onBlur?.();
2280
- }, [onBlur]);
2311
+ if (hasInteracted) {
2312
+ onBlur?.();
2313
+ }
2314
+ }, [isOpen, hasInteracted, onBlur]);
2281
2315
  useOnClickOutside([triggerRef, dropdownRef], closeCalendar, void 0, {
2282
2316
  capture: true
2283
2317
  });