@jsenv/navi 0.26.34 → 0.26.36

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.
@@ -31553,11 +31553,11 @@ const SelectWithPopover = props => {
31553
31553
  anchor: ref.current
31554
31554
  });
31555
31555
  };
31556
- const [shouldIgnoreThatClick, disableClickFor] = useIgnoreClickForMousedown();
31556
+ const disableClickFor = useIgnoreClickForMousedown();
31557
31557
  const requestClose = (e = new CustomEvent("programmatic")) => {
31558
31558
  if (e.type === "mousedown") {
31559
31559
  debugPopup(formatEventSideEffect(e, `disable click`));
31560
- disableClickFor(e);
31560
+ disableClickFor();
31561
31561
  }
31562
31562
  return requestPopoverClose(popoverRef.current, {
31563
31563
  event: e
@@ -31601,10 +31601,6 @@ const SelectWithPopover = props => {
31601
31601
  // click triggered by enter won't open the popover
31602
31602
  return;
31603
31603
  }
31604
- if (shouldIgnoreThatClick) {
31605
- debugPopup(formatEventSideEffect(e, `ignore click`));
31606
- return;
31607
- }
31608
31604
  // When a label is clicked it transfers focus to the select
31609
31605
  // in that case we want to open it (otherwise we have already opened on mousedown interaction)
31610
31606
  requestOpen(e);
@@ -31739,11 +31735,11 @@ const SelectWithDialog = props => {
31739
31735
  event: e
31740
31736
  });
31741
31737
  };
31742
- const [shouldIgnore, disableClickFor] = useIgnoreClickForMousedown();
31738
+ const disableClickFor = useIgnoreClickForMousedown();
31743
31739
  const requestClose = (e = new CustomEvent("programmatic")) => {
31744
31740
  if (e.type === "mousedown") {
31745
31741
  debugPopup(formatEventSideEffect(e, `disable click`));
31746
- disableClickFor(e);
31742
+ disableClickFor();
31747
31743
  }
31748
31744
  return requestDialogClose(dialogRef.current, {
31749
31745
  event: e
@@ -31786,12 +31782,6 @@ const SelectWithDialog = props => {
31786
31782
  // click triggered by enter won't open the dialog
31787
31783
  return;
31788
31784
  }
31789
- if (shouldIgnore) {
31790
- debugPopup(formatEventSideEffect(e, `ignore click`));
31791
- // mousedown on the select already handled open/close; ignore this click
31792
- // to avoid toggling the dialog again on mouseup
31793
- return;
31794
- }
31795
31785
  // When a label is clicked it transfers focus to the select, in that case we want to open it
31796
31786
  requestOpen(e);
31797
31787
  },
@@ -31863,8 +31853,8 @@ const useSelectRequestClose = () => {
31863
31853
  };
31864
31854
 
31865
31855
  /**
31866
- * Hook to prevent a `click` event from firing after a `mousedown` that already
31867
- * handled an open/close action.
31856
+ * Returns a `disableClickFor` function that suppresses the `click` event that
31857
+ * the browser fires after a `mousedown` which already handled an open/close action.
31868
31858
  *
31869
31859
  * Problem: when the user clicks a dialog's backdrop to close it, the browser
31870
31860
  * fires `mousedown` on the backdrop (which closes the dialog), then fires
@@ -31872,47 +31862,27 @@ const useSelectRequestClose = () => {
31872
31862
  * element is the trigger button that originally opened the dialog, the `click`
31873
31863
  * would immediately re-open it.
31874
31864
  *
31875
- * This problem only occurs when the dialog is closed on `mousedown`. If the
31876
- * dialog were closed on `click` instead, the dialog would still be open when
31877
- * the `click` fires on the backdrop, so the trigger button underneath would
31878
- * never receive that `click`.
31879
- *
31880
31865
  * Calling `stopPropagation()` or `preventDefault()` on the backdrop `mousedown`
31881
31866
  * does not help: the browser dispatches the subsequent `click` regardless,
31882
31867
  * targeting whichever element ends up under the pointer after the dialog closes.
31883
31868
  *
31884
- * Usage:
31885
- * const [shouldIgnoreThatClick, disableClickFor] = useIgnoreClickForMousedown();
31886
- * // In onMouseDown (e.g. on the dialog backdrop): disableClickFor(e)
31887
- * // In onClick (on the trigger): if (shouldIgnoreThatClick) return;
31888
- *
31889
- * `disableClickFor` arms the guard until the next `mouseup` on the document
31890
- * (with a 1 s safety-net fallback), using `requestAnimationFrame` so the
31891
- * `click` event — which fires synchronously after `mouseup` — is still blocked.
31869
+ * Solution: register a self-removing capture-phase `click` listener on `document`
31870
+ * so the click is intercepted before it reaches any element handler.
31892
31871
  */
31893
31872
  const useIgnoreClickForMousedown = () => {
31894
- const pendingMousedownRef = useRef(false);
31895
- const shouldIgnore = pendingMousedownRef.current;
31896
31873
  const disableClickFor = () => {
31897
- pendingMousedownRef.current = true;
31898
- const restoreClick = () => {
31899
- clearTimeout(safetyTimeout);
31900
- pendingMousedownRef.current = false;
31901
- };
31902
- const safetyTimeout = setTimeout(() => {
31903
- pendingMousedownRef.current = false;
31904
- restoreClick();
31905
- }, 1000);
31906
- document.addEventListener("mouseup", () => {
31907
- requestAnimationFrame(() => {
31908
- restoreClick();
31874
+ const suppressClick = clickEvent => {
31875
+ clickEvent.stopPropagation();
31876
+ clickEvent.preventDefault();
31877
+ document.removeEventListener("click", suppressClick, {
31878
+ capture: true
31909
31879
  });
31910
- }, {
31911
- once: true,
31880
+ };
31881
+ document.addEventListener("click", suppressClick, {
31912
31882
  capture: true
31913
31883
  });
31914
31884
  };
31915
- return [shouldIgnore, disableClickFor];
31885
+ return disableClickFor;
31916
31886
  };
31917
31887
 
31918
31888
  /**