@octanejs/base-ui 0.1.31 → 0.1.32

package/dist/cjs/utils/floating/useHoverReferenceInteraction.cjs

@@ -0,0 +1,380 @@
+"use strict";
+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 useHoverReferenceInteraction_exports = {};
+__export(useHoverReferenceInteraction_exports, {
+  safePolygon: () => import_safePolygon.safePolygon,
+  useHoverReferenceInteraction: () => useHoverReferenceInteraction
+});
+module.exports = __toCommonJS(useHoverReferenceInteraction_exports);
+var import_octane = require("octane");
+var import_internal = require("../../internal.cjs");
+var import_addEventListener = require("../addEventListener.cjs");
+var import_mergeCleanups = require("../mergeCleanups.cjs");
+var import_owner = require("../owner.cjs");
+var import_useStableCallback = require("../useStableCallback.cjs");
+var import_useValueAsRef = require("../useValueAsRef.cjs");
+var import_dom = require("../dom.cjs");
+var import_createChangeEventDetails = require("../createChangeEventDetails.cjs");
+var import_FloatingTree = require("./FloatingTree.cjs");
+var import_element = require("./element.cjs");
+var import_event = require("./event.cjs");
+var import_useHoverInteractionSharedState = require("./useHoverInteractionSharedState.cjs");
+var import_useHoverShared = require("./useHoverShared.cjs");
+var import_safePolygon = require("./safePolygon.cjs");
+const EMPTY_REF = { current: null };
+function useHoverReferenceInteraction(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useHoverReferenceInteraction");
+  const context = user[0];
+  const props = user[1] ?? {};
+  const {
+    enabled = true,
+    delay = 0,
+    handleClose = null,
+    mouseOnly = false,
+    restMs = 0,
+    move = true,
+    triggerElementRef = EMPTY_REF,
+    externalTree,
+    isActiveTrigger = true,
+    getHandleCloseContext,
+    isClosing,
+    shouldOpen: shouldOpenProp
+  } = props;
+  const store = context != null && "rootStore" in context ? context.rootStore : context;
+  const dataRef = store?.context.dataRef;
+  const events = store?.context.events;
+  const tree = (0, import_FloatingTree.useFloatingTree)(externalTree);
+  const instance = (0, import_useHoverInteractionSharedState.useHoverInteractionSharedState)(store, (0, import_internal.subSlot)(slot, "shared"));
+  const isHoverCloseActiveRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "hca"));
+  const handleCloseRef = (0, import_useValueAsRef.useValueAsRef)(handleClose, (0, import_internal.subSlot)(slot, "hc"));
+  const delayRef = (0, import_useValueAsRef.useValueAsRef)(delay, (0, import_internal.subSlot)(slot, "delay"));
+  const restMsRef = (0, import_useValueAsRef.useValueAsRef)(restMs, (0, import_internal.subSlot)(slot, "rest"));
+  const enabledRef = (0, import_useValueAsRef.useValueAsRef)(enabled, (0, import_internal.subSlot)(slot, "en"));
+  const shouldOpenRef = (0, import_useValueAsRef.useValueAsRef)(
+    shouldOpenProp,
+    (0, import_internal.subSlot)(slot, "so")
+  );
+  const isClosingRef = (0, import_useValueAsRef.useValueAsRef)(isClosing, (0, import_internal.subSlot)(slot, "cl"));
+  const isClickLikeOpenEvent = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      return (0, import_useHoverShared.isClickLikeOpenEvent)(dataRef.current.openEvent?.type, instance.interactedInside);
+    },
+    (0, import_internal.subSlot)(slot, "iclo")
+  );
+  const checkShouldOpen = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      return shouldOpenRef.current?.() !== false;
+    },
+    (0, import_internal.subSlot)(slot, "cso")
+  );
+  const isOverInactiveTrigger = (0, import_useStableCallback.useStableCallback)(
+    (currentDomReference, currentTarget, target) => {
+      const allTriggers = store.context.triggerElements;
+      if (allTriggers.hasElement(currentTarget)) {
+        return !currentDomReference || !(0, import_element.contains)(currentDomReference, currentTarget);
+      }
+      if (!(0, import_dom.isElement)(target)) {
+        return false;
+      }
+      const targetElement = target;
+      return allTriggers.hasMatchingElement((trigger) => (0, import_element.contains)(trigger, targetElement)) && (!currentDomReference || !(0, import_element.contains)(currentDomReference, targetElement));
+    },
+    (0, import_internal.subSlot)(slot, "ooit")
+  );
+  const cleanupMouseMoveHandler = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      if (!instance.handler) {
+        return;
+      }
+      const doc = (0, import_owner.ownerDocument)(store.select("domReferenceElement"));
+      doc.removeEventListener("mousemove", instance.handler);
+      instance.handler = void 0;
+    },
+    (0, import_internal.subSlot)(slot, "cmmh")
+  );
+  const clearPointerEvents = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      (0, import_useHoverInteractionSharedState.clearSafePolygonPointerEventsMutation)(instance);
+    },
+    (0, import_internal.subSlot)(slot, "cpe")
+  );
+  if (isActiveTrigger) {
+    instance.handleCloseOptions = handleCloseRef.current?.__options;
+  }
+  (0, import_octane.useEffect)(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler], (0, import_internal.subSlot)(slot, "e:cleanup"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (!enabled) {
+        return void 0;
+      }
+      function onOpenChangeLocal(details) {
+        if (!details.open) {
+          isHoverCloseActiveRef.current = details.reason === import_createChangeEventDetails.REASONS.triggerHover;
+          cleanupMouseMoveHandler();
+          instance.openChangeTimeout.clear();
+          instance.restTimeout.clear();
+          instance.blockMouseMove = true;
+          instance.restTimeoutPending = false;
+        } else {
+          isHoverCloseActiveRef.current = false;
+        }
+      }
+      events.on("openchange", onOpenChangeLocal);
+      return () => {
+        events.off("openchange", onOpenChangeLocal);
+      };
+    },
+    [enabled, events, instance, cleanupMouseMoveHandler],
+    (0, import_internal.subSlot)(slot, "e:openchange")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (!enabled) {
+        return void 0;
+      }
+      function closeWithDelay(event, runElseBranch = true) {
+        const closeDelay = (0, import_useHoverShared.getDelay)(delayRef.current, "close", instance.pointerType);
+        if (closeDelay) {
+          instance.openChangeTimeout.start(closeDelay, () => {
+            store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.triggerHover, event));
+            tree?.events.emit("floating.closed", event);
+          });
+        } else if (runElseBranch) {
+          instance.openChangeTimeout.clear();
+          store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.triggerHover, event));
+          tree?.events.emit("floating.closed", event);
+        }
+      }
+      const trigger = triggerElementRef.current ?? (isActiveTrigger ? store.select("domReferenceElement") : null);
+      if (!(0, import_dom.isElement)(trigger)) {
+        return void 0;
+      }
+      function onMouseEnter(event) {
+        instance.openChangeTimeout.clear();
+        instance.blockMouseMove = false;
+        if (mouseOnly && !(0, import_event.isMouseLikePointerType)(instance.pointerType)) {
+          return;
+        }
+        const restMsValue = (0, import_useHoverShared.getRestMs)(restMsRef.current);
+        const openDelay = (0, import_useHoverShared.getDelay)(delayRef.current, "open", instance.pointerType);
+        const eventTarget = (0, import_element.getTarget)(event);
+        const currentTarget = event.currentTarget ?? null;
+        const currentDomReference = store.select("domReferenceElement");
+        let triggerNode = currentTarget;
+        if ((0, import_dom.isElement)(eventTarget) && !store.context.triggerElements.hasElement(eventTarget)) {
+          for (const triggerElement of store.context.triggerElements.elements()) {
+            if ((0, import_element.contains)(triggerElement, eventTarget)) {
+              triggerNode = triggerElement;
+              break;
+            }
+          }
+        }
+        if ((0, import_dom.isElement)(currentTarget) && (0, import_dom.isElement)(currentDomReference) && !store.context.triggerElements.hasElement(currentTarget) && (0, import_element.contains)(currentTarget, currentDomReference)) {
+          triggerNode = currentDomReference;
+        }
+        const isOverInactive = triggerNode == null ? false : isOverInactiveTrigger(currentDomReference, triggerNode, eventTarget);
+        const isOpen = store.select("open");
+        const isInClosingTransition = isClosingRef.current?.() ?? store.select("transitionStatus") === "ending";
+        const isHoverCloseTransition = !isOpen && isInClosingTransition && isHoverCloseActiveRef.current;
+        const isReenteringSameTriggerDuringCloseTransition = !isOverInactive && (0, import_dom.isElement)(triggerNode) && (0, import_dom.isElement)(currentDomReference) && (0, import_element.contains)(currentDomReference, triggerNode) && isHoverCloseTransition;
+        const isRestOnlyDelay = restMsValue > 0 && !openDelay;
+        const shouldOpenImmediately = isOverInactive && (isOpen || isHoverCloseTransition) || isReenteringSameTriggerDuringCloseTransition;
+        const shouldOpen = !isOpen || isOverInactive;
+        if (shouldOpenImmediately) {
+          if (checkShouldOpen()) {
+            store.setOpen(true, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.triggerHover, event, triggerNode));
+          }
+          return;
+        }
+        if (isRestOnlyDelay) {
+          return;
+        }
+        if (openDelay) {
+          instance.openChangeTimeout.start(openDelay, () => {
+            if (shouldOpen && checkShouldOpen()) {
+              store.setOpen(
+                true,
+                (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.triggerHover, event, triggerNode)
+              );
+            }
+          });
+        } else if (shouldOpen) {
+          if (checkShouldOpen()) {
+            store.setOpen(true, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.triggerHover, event, triggerNode));
+          }
+        }
+      }
+      function onMouseLeave(event) {
+        if (isClickLikeOpenEvent()) {
+          clearPointerEvents();
+          return;
+        }
+        cleanupMouseMoveHandler();
+        const domReferenceElement = store.select("domReferenceElement");
+        const doc = (0, import_owner.ownerDocument)(domReferenceElement);
+        instance.restTimeout.clear();
+        instance.restTimeoutPending = false;
+        const handleCloseContextBase = dataRef.current.floatingContext ?? getHandleCloseContext?.();
+        if ((0, import_useHoverShared.isInsideEnabledTrigger)(event.relatedTarget, store.context.triggerElements)) {
+          return;
+        }
+        if (handleCloseRef.current && handleCloseContextBase) {
+          if (!store.select("open")) {
+            instance.openChangeTimeout.clear();
+          }
+          const currentTrigger = triggerElementRef.current;
+          instance.handler = handleCloseRef.current({
+            ...handleCloseContextBase,
+            tree,
+            x: event.clientX,
+            y: event.clientY,
+            onClose() {
+              clearPointerEvents();
+              cleanupMouseMoveHandler();
+              if (enabledRef.current && !isClickLikeOpenEvent() && currentTrigger === store.select("domReferenceElement")) {
+                closeWithDelay(event, true);
+              }
+            }
+          });
+          const activeHandler = instance.handler;
+          doc.addEventListener("mousemove", activeHandler);
+          activeHandler(event);
+          return;
+        }
+        const shouldClose = instance.pointerType === "touch" ? !(0, import_element.contains)(store.select("floatingElement"), event.relatedTarget) : true;
+        if (shouldClose) {
+          closeWithDelay(event);
+        }
+      }
+      if (move) {
+        return (0, import_mergeCleanups.mergeCleanups)(
+          (0, import_addEventListener.addEventListener)(trigger, "mousemove", onMouseEnter, { once: true }),
+          (0, import_addEventListener.addEventListener)(trigger, "mouseenter", onMouseEnter),
+          (0, import_addEventListener.addEventListener)(trigger, "mouseleave", onMouseLeave)
+        );
+      }
+      return (0, import_mergeCleanups.mergeCleanups)(
+        (0, import_addEventListener.addEventListener)(trigger, "mouseenter", onMouseEnter),
+        (0, import_addEventListener.addEventListener)(trigger, "mouseleave", onMouseLeave)
+      );
+    },
+    [
+      cleanupMouseMoveHandler,
+      clearPointerEvents,
+      dataRef,
+      delayRef,
+      store,
+      enabled,
+      handleCloseRef,
+      instance,
+      isActiveTrigger,
+      isOverInactiveTrigger,
+      isClickLikeOpenEvent,
+      mouseOnly,
+      move,
+      restMsRef,
+      triggerElementRef,
+      tree,
+      enabledRef,
+      getHandleCloseContext,
+      isClosingRef,
+      checkShouldOpen
+    ],
+    (0, import_internal.subSlot)(slot, "e:listeners")
+  );
+  return (0, import_octane.useMemo)(
+    () => {
+      if (!enabled) {
+        return void 0;
+      }
+      function setPointerRef(event) {
+        instance.pointerType = event.pointerType;
+      }
+      return {
+        onPointerDown: setPointerRef,
+        onPointerEnter: setPointerRef,
+        onMouseMove(event) {
+          const trigger = event.currentTarget;
+          const currentDomReference = store.select("domReferenceElement");
+          const currentOpen = store.select("open");
+          const isOverInactive = isOverInactiveTrigger(currentDomReference, trigger, event.target);
+          if (mouseOnly && !(0, import_event.isMouseLikePointerType)(instance.pointerType)) {
+            return;
+          }
+          if (currentOpen && isOverInactive && instance.handleCloseOptions?.blockPointerEvents) {
+            const floatingElement = store.select("floatingElement");
+            if (floatingElement) {
+              const scopeElement = instance.handleCloseOptions?.getScope?.() ?? trigger.ownerDocument.body;
+              (0, import_useHoverInteractionSharedState.applySafePolygonPointerEventsMutation)(instance, {
+                scopeElement,
+                referenceElement: trigger,
+                floatingElement
+              });
+            }
+          }
+          const restMsValue = (0, import_useHoverShared.getRestMs)(restMsRef.current);
+          if (currentOpen && !isOverInactive || restMsValue === 0) {
+            return;
+          }
+          if (!isOverInactive && instance.restTimeoutPending && event.movementX ** 2 + event.movementY ** 2 < 2) {
+            return;
+          }
+          instance.restTimeout.clear();
+          function handleMouseMove() {
+            instance.restTimeoutPending = false;
+            if (isClickLikeOpenEvent()) {
+              return;
+            }
+            const latestOpen = store.select("open");
+            if (!instance.blockMouseMove && (!latestOpen || isOverInactive) && checkShouldOpen()) {
+              store.setOpen(true, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.triggerHover, event, trigger));
+            }
+          }
+          if (instance.pointerType === "touch") {
+            (0, import_octane.flushSync)(() => {
+              handleMouseMove();
+            });
+          } else if (isOverInactive && currentOpen) {
+            handleMouseMove();
+          } else {
+            instance.restTimeoutPending = true;
+            instance.restTimeout.start(restMsValue, handleMouseMove);
+          }
+        }
+      };
+    },
+    [
+      enabled,
+      instance,
+      isClickLikeOpenEvent,
+      isOverInactiveTrigger,
+      mouseOnly,
+      store,
+      restMsRef,
+      checkShouldOpen
+    ],
+    (0, import_internal.subSlot)(slot, "props")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  safePolygon,
+  useHoverReferenceInteraction
+});

package/dist/cjs/utils/floating/useHoverShared.cjs

@@ -0,0 +1,65 @@
+"use strict";
+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 useHoverShared_exports = {};
+__export(useHoverShared_exports, {
+  getDelay: () => getDelay,
+  getRestMs: () => getRestMs,
+  isClickLikeOpenEvent: () => isClickLikeOpenEvent,
+  isHoverOpenEvent: () => isHoverOpenEvent,
+  isInsideEnabledTrigger: () => import_element.isTargetInsideEnabledTrigger
+});
+module.exports = __toCommonJS(useHoverShared_exports);
+var import_event = require("./event.cjs");
+var import_element = require("./element.cjs");
+function resolveValue(value, pointerType) {
+  if (pointerType != null && !(0, import_event.isMouseLikePointerType)(pointerType)) {
+    return 0;
+  }
+  if (typeof value === "function") {
+    return value();
+  }
+  return value;
+}
+function getDelay(value, prop, pointerType) {
+  const result = resolveValue(value, pointerType);
+  if (typeof result === "number") {
+    return result;
+  }
+  return result?.[prop];
+}
+function getRestMs(value) {
+  if (typeof value === "function") {
+    return value();
+  }
+  return value;
+}
+function isClickLikeOpenEvent(openEventType, interactedInside) {
+  return interactedInside || openEventType === "click" || openEventType === "mousedown";
+}
+function isHoverOpenEvent(openEventType) {
+  return Boolean(openEventType?.includes("mouse")) && openEventType !== "mousedown";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getDelay,
+  getRestMs,
+  isClickLikeOpenEvent,
+  isHoverOpenEvent,
+  isInsideEnabledTrigger
+});