@hanzogui/floating 8.3.0 → 8.3.2

package/dist/cjs/interactions/useListNavigation.cjs

@@ -1,418 +0,0 @@
-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("@hanzogui/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]);
-}