@tamagui/floating 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/cjs/interactions/useListNavigation.cjs

@@ -0,0 +1,418 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var useListNavigation_exports = {};
+__export(useListNavigation_exports, {
+  useListNavigation: () => useListNavigation
+});
+module.exports = __toCommonJS(useListNavigation_exports);
+var import_react = require("react");
+var import_use_event = require("@tamagui/use-event");
+var import_utils = require("./utils.cjs");
+const ARROW_UP = "ArrowUp";
+const ARROW_DOWN = "ArrowDown";
+const ARROW_LEFT = "ArrowLeft";
+const ARROW_RIGHT = "ArrowRight";
+function doSwitch(orientation, vertical, horizontal) {
+  switch (orientation) {
+    case "vertical":
+      return vertical;
+    case "horizontal":
+      return horizontal;
+    default:
+      return vertical || horizontal;
+  }
+}
+function isMainOrientationKey(key, orientation) {
+  const vertical = key === ARROW_UP || key === ARROW_DOWN;
+  const horizontal = key === ARROW_LEFT || key === ARROW_RIGHT;
+  return doSwitch(orientation, vertical, horizontal);
+}
+function isMainOrientationToEndKey(key, orientation, rtl) {
+  const vertical = key === ARROW_DOWN;
+  const horizontal = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
+  return doSwitch(orientation, vertical, horizontal) || key === "Enter" || key === " " || key === "";
+}
+function isCrossOrientationOpenKey(key, orientation, rtl) {
+  const vertical = rtl ? key === ARROW_LEFT : key === ARROW_RIGHT;
+  const horizontal = key === ARROW_DOWN;
+  return doSwitch(orientation, vertical, horizontal);
+}
+function isCrossOrientationCloseKey(key, orientation, rtl) {
+  const vertical = rtl ? key === ARROW_RIGHT : key === ARROW_LEFT;
+  const horizontal = key === ARROW_UP;
+  return doSwitch(orientation, vertical, horizontal);
+}
+function useListNavigation(context, props) {
+  const {
+    open,
+    onOpenChange,
+    elements
+  } = context;
+  const {
+    listRef,
+    activeIndex,
+    onNavigate: unstable_onNavigate = () => {},
+    enabled = true,
+    selectedIndex = null,
+    allowEscape = false,
+    loop = false,
+    nested = false,
+    rtl = false,
+    virtual = false,
+    focusItemOnOpen = "auto",
+    focusItemOnHover = true,
+    openOnArrowKeyDown = true,
+    disabledIndices = void 0,
+    orientation = "vertical",
+    scrollItemIntoView = true
+  } = props;
+  const typeableComboboxReference = (0, import_utils.isTypeableCombobox)(elements.domReference);
+  const focusItemOnOpenRef = (0, import_react.useRef)(focusItemOnOpen);
+  const indexRef = (0, import_react.useRef)(selectedIndex ?? -1);
+  const keyRef = (0, import_react.useRef)(null);
+  const isPointerModalityRef = (0, import_react.useRef)(true);
+  const previousMountedRef = (0, import_react.useRef)(!!elements.floating);
+  const previousOpenRef = (0, import_react.useRef)(open);
+  const forceSyncFocusRef = (0, import_react.useRef)(false);
+  const forceScrollIntoViewRef = (0, import_react.useRef)(false);
+  const disabledIndicesRef = (0, import_react.useRef)(disabledIndices);
+  disabledIndicesRef.current = disabledIndices;
+  const latestOpenRef = (0, import_react.useRef)(open);
+  latestOpenRef.current = open;
+  const scrollItemIntoViewRef = (0, import_react.useRef)(scrollItemIntoView);
+  scrollItemIntoViewRef.current = scrollItemIntoView;
+  const selectedIndexRef = (0, import_react.useRef)(selectedIndex);
+  selectedIndexRef.current = selectedIndex;
+  const stableOnNavigate = (0, import_use_event.useEvent)(unstable_onNavigate);
+  const [activeId, setActiveId] = (0, import_react.useState)();
+  const onNavigate = (0, import_use_event.useEvent)(() => {
+    stableOnNavigate(indexRef.current === -1 ? null : indexRef.current);
+  });
+  const previousOnNavigateRef = (0, import_react.useRef)(onNavigate);
+  const focusItem = (0, import_use_event.useEvent)(() => {
+    function runFocus(item2) {
+      if (virtual) {
+        setActiveId(item2.id);
+      } else {
+        (0, import_utils.enqueueFocus)(item2, {
+          sync: forceSyncFocusRef.current,
+          preventScroll: true
+        });
+      }
+    }
+    const initialItem = listRef.current[indexRef.current];
+    const forceScrollIntoView = forceScrollIntoViewRef.current;
+    if (initialItem) {
+      runFocus(initialItem);
+    }
+    const scheduler = forceSyncFocusRef.current ? v => v() : requestAnimationFrame;
+    scheduler(() => {
+      const waitedItem = listRef.current[indexRef.current] || initialItem;
+      if (!waitedItem) return;
+      if (!initialItem) {
+        runFocus(waitedItem);
+      }
+      const scrollIntoViewOptions = scrollItemIntoViewRef.current;
+      const shouldScrollIntoView = scrollIntoViewOptions && waitedItem && (forceScrollIntoView || !isPointerModalityRef.current);
+      if (shouldScrollIntoView) {
+        waitedItem.scrollIntoView?.(typeof scrollIntoViewOptions === "boolean" ? {
+          block: "nearest",
+          inline: "nearest"
+        } : scrollIntoViewOptions);
+      }
+    });
+  });
+  (0, import_react.useLayoutEffect)(() => {
+    if (!enabled) return;
+    if (open && elements.floating) {
+      if (focusItemOnOpenRef.current && selectedIndex != null) {
+        forceScrollIntoViewRef.current = true;
+        indexRef.current = selectedIndex;
+        onNavigate();
+      }
+    } else if (previousMountedRef.current) {
+      indexRef.current = -1;
+      previousOnNavigateRef.current();
+    }
+  }, [enabled, open, elements.floating, selectedIndex, onNavigate]);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!enabled) return;
+    if (!open) return;
+    if (!elements.floating) return;
+    if (activeIndex == null) {
+      forceSyncFocusRef.current = false;
+      if (selectedIndexRef.current != null) {
+        return;
+      }
+      if (previousMountedRef.current) {
+        indexRef.current = -1;
+        focusItem();
+      }
+      if ((!previousOpenRef.current || !previousMountedRef.current) && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {
+        let runs = 0;
+        const waitForListPopulated = () => {
+          if (listRef.current[0] == null) {
+            if (runs < 2) {
+              const scheduler = runs ? requestAnimationFrame : queueMicrotask;
+              scheduler(waitForListPopulated);
+            }
+            runs++;
+          } else {
+            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? (0, import_utils.getMinListIndex)(listRef, disabledIndicesRef.current) : (0, import_utils.getMaxListIndex)(listRef, disabledIndicesRef.current);
+            keyRef.current = null;
+            onNavigate();
+          }
+        };
+        waitForListPopulated();
+      }
+    } else if (!(0, import_utils.isIndexOutOfListBounds)(listRef, activeIndex)) {
+      indexRef.current = activeIndex;
+      focusItem();
+      forceScrollIntoViewRef.current = false;
+    }
+  }, [enabled, open, elements.floating, activeIndex, selectedIndexRef, nested, listRef, orientation, rtl, onNavigate, focusItem, disabledIndicesRef]);
+  (0, import_react.useLayoutEffect)(() => {
+    previousOnNavigateRef.current = onNavigate;
+    previousOpenRef.current = open;
+    previousMountedRef.current = !!elements.floating;
+  });
+  (0, import_react.useLayoutEffect)(() => {
+    if (!open) {
+      keyRef.current = null;
+      focusItemOnOpenRef.current = focusItemOnOpen;
+    }
+  }, [open, focusItemOnOpen]);
+  const hasActiveIndex = activeIndex != null;
+  const commonOnKeyDown = (0, import_use_event.useEvent)(event => {
+    isPointerModalityRef.current = false;
+    forceSyncFocusRef.current = true;
+    if (event.which === 229) {
+      return;
+    }
+    if (!latestOpenRef.current && event.currentTarget === elements.floating) {
+      return;
+    }
+    if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl)) {
+      (0, import_utils.stopEvent)(event);
+      onOpenChange(false, event.nativeEvent, "list-navigation");
+      if ((0, import_utils.isHTMLElement)(elements.domReference)) {
+        elements.domReference.focus();
+      }
+      return;
+    }
+    const currentIndex = indexRef.current;
+    const minIndex = (0, import_utils.getMinListIndex)(listRef, disabledIndices);
+    const maxIndex = (0, import_utils.getMaxListIndex)(listRef, disabledIndices);
+    if (!typeableComboboxReference) {
+      if (event.key === "Home") {
+        (0, import_utils.stopEvent)(event);
+        indexRef.current = minIndex;
+        onNavigate();
+      }
+      if (event.key === "End") {
+        (0, import_utils.stopEvent)(event);
+        indexRef.current = maxIndex;
+        onNavigate();
+      }
+    }
+    if (isMainOrientationKey(event.key, orientation)) {
+      (0, import_utils.stopEvent)(event);
+      if (open && !virtual && (0, import_utils.activeElement)(event.currentTarget.ownerDocument) === event.currentTarget) {
+        indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
+        onNavigate();
+        return;
+      }
+      if (isMainOrientationToEndKey(event.key, orientation, rtl)) {
+        if (loop) {
+          indexRef.current = currentIndex >= maxIndex ? allowEscape && currentIndex !== listRef.current.length ? -1 : minIndex : (0, import_utils.findNonDisabledListIndex)(listRef, {
+            startingIndex: currentIndex,
+            disabledIndices
+          });
+        } else {
+          indexRef.current = Math.min(maxIndex, (0, import_utils.findNonDisabledListIndex)(listRef, {
+            startingIndex: currentIndex,
+            disabledIndices
+          }));
+        }
+      } else {
+        if (loop) {
+          indexRef.current = currentIndex <= minIndex ? allowEscape && currentIndex !== -1 ? listRef.current.length : maxIndex : (0, import_utils.findNonDisabledListIndex)(listRef, {
+            startingIndex: currentIndex,
+            decrement: true,
+            disabledIndices
+          });
+        } else {
+          indexRef.current = Math.max(minIndex, (0, import_utils.findNonDisabledListIndex)(listRef, {
+            startingIndex: currentIndex,
+            decrement: true,
+            disabledIndices
+          }));
+        }
+      }
+      if ((0, import_utils.isIndexOutOfListBounds)(listRef, indexRef.current)) {
+        indexRef.current = -1;
+      }
+      onNavigate();
+    }
+  });
+  const ariaActiveDescendantProp = (0, import_react.useMemo)(() => {
+    return virtual && open && hasActiveIndex && {
+      "aria-activedescendant": activeId
+    };
+  }, [virtual, open, hasActiveIndex, activeId]);
+  const floating = (0, import_react.useMemo)(() => {
+    return {
+      "aria-orientation": orientation === "both" ? void 0 : orientation,
+      ...(!typeableComboboxReference ? ariaActiveDescendantProp : {}),
+      onKeyDown: commonOnKeyDown,
+      onPointerMove() {
+        isPointerModalityRef.current = true;
+      }
+    };
+  }, [ariaActiveDescendantProp, commonOnKeyDown, orientation, typeableComboboxReference]);
+  const reference = (0, import_react.useMemo)(() => {
+    function checkVirtualMouse(event) {
+      if (focusItemOnOpen === "auto" && (0, import_utils.isVirtualClick)(event.nativeEvent)) {
+        focusItemOnOpenRef.current = true;
+      }
+    }
+    function checkVirtualPointer(event) {
+      focusItemOnOpenRef.current = focusItemOnOpen;
+      if (focusItemOnOpen === "auto" && (0, import_utils.isVirtualPointerEvent)(event.nativeEvent)) {
+        focusItemOnOpenRef.current = true;
+      }
+    }
+    return {
+      ...ariaActiveDescendantProp,
+      onKeyDown(event) {
+        isPointerModalityRef.current = false;
+        const isArrowKey = event.key.startsWith("Arrow");
+        const isCrossOpenKey = isCrossOrientationOpenKey(event.key, orientation, rtl);
+        const isMainKey = isMainOrientationKey(event.key, orientation);
+        const isNavigationKey = (nested ? isCrossOpenKey : isMainKey) || event.key === "Enter" || event.key.trim() === "";
+        if (virtual && open) {
+          return commonOnKeyDown(event);
+        }
+        if (!open && !openOnArrowKeyDown && isArrowKey) {
+          return;
+        }
+        if (isNavigationKey) {
+          keyRef.current = event.key;
+        }
+        if (nested) {
+          if (isCrossOpenKey) {
+            (0, import_utils.stopEvent)(event);
+            if (open) {
+              indexRef.current = (0, import_utils.getMinListIndex)(listRef, disabledIndicesRef.current);
+              onNavigate();
+            } else {
+              onOpenChange(true, event.nativeEvent, "list-navigation");
+            }
+          }
+          return;
+        }
+        if (isMainKey) {
+          if (selectedIndex != null) {
+            indexRef.current = selectedIndex;
+          }
+          (0, import_utils.stopEvent)(event);
+          if (!open && openOnArrowKeyDown) {
+            onOpenChange(true, event.nativeEvent, "list-navigation");
+          } else {
+            commonOnKeyDown(event);
+          }
+          if (open) {
+            onNavigate();
+          }
+        }
+      },
+      onFocus() {
+        if (open && !virtual) {
+          indexRef.current = -1;
+          onNavigate();
+        }
+      },
+      onPointerDown: checkVirtualPointer,
+      onPointerEnter: checkVirtualPointer,
+      onMouseDown: checkVirtualMouse,
+      onClick: checkVirtualMouse
+    };
+  }, [ariaActiveDescendantProp, commonOnKeyDown, disabledIndicesRef, focusItemOnOpen, listRef, nested, onNavigate, onOpenChange, open, openOnArrowKeyDown, orientation, rtl, selectedIndex, virtual]);
+  const item = (0, import_react.useMemo)(() => {
+    function syncCurrentTarget(currentTarget) {
+      if (!latestOpenRef.current) return;
+      const index = listRef.current.indexOf(currentTarget);
+      if (index !== -1 && indexRef.current !== index) {
+        indexRef.current = index;
+        onNavigate();
+      }
+    }
+    const itemProps = {
+      onFocus({
+        currentTarget
+      }) {
+        forceSyncFocusRef.current = true;
+        syncCurrentTarget(currentTarget);
+      },
+      onClick: ({
+        currentTarget
+      }) => currentTarget.focus({
+        preventScroll: true
+      }),
+      // safari
+      onMouseMove({
+        currentTarget
+      }) {
+        forceSyncFocusRef.current = true;
+        forceScrollIntoViewRef.current = false;
+        if (focusItemOnHover) {
+          syncCurrentTarget(currentTarget);
+        }
+      },
+      onPointerLeave({
+        pointerType
+      }) {
+        if (!isPointerModalityRef.current || pointerType === "touch") {
+          return;
+        }
+        forceSyncFocusRef.current = true;
+        if (!focusItemOnHover) {
+          return;
+        }
+        indexRef.current = -1;
+        onNavigate();
+        if (!virtual) {
+          elements.floating?.focus({
+            preventScroll: true
+          });
+        }
+      }
+    };
+    return itemProps;
+  }, [latestOpenRef, focusItemOnHover, listRef, onNavigate, virtual, elements.floating]);
+  return (0, import_react.useMemo)(() => enabled ? {
+    reference,
+    floating,
+    item
+  } : {}, [enabled, reference, floating, item]);
+}