@octanejs/base-ui 0.1.31 → 0.1.33

package/dist/cjs/utils/floating/useDismiss.cjs

@@ -0,0 +1,506 @@
+"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 useDismiss_exports = {};
+__export(useDismiss_exports, {
+  normalizeProp: () => normalizeProp,
+  useDismiss: () => useDismiss
+});
+module.exports = __toCommonJS(useDismiss_exports);
+var import_octane = require("octane");
+var import_dom = require("@floating-ui/utils/dom");
+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_useTimeout = require("../useTimeout.cjs");
+var import_platform = require("../platform.cjs");
+var import_FloatingTree = require("./FloatingTree.cjs");
+var import_createChangeEventDetails = require("../createChangeEventDetails.cjs");
+var import_createAttribute = require("./createAttribute.cjs");
+var import_element = require("./element.cjs");
+var import_event = require("./event.cjs");
+var import_nodes = require("./nodes.cjs");
+function alwaysFalse() {
+  return false;
+}
+function normalizeProp(normalizable) {
+  return {
+    escapeKey: typeof normalizable === "boolean" ? normalizable : normalizable?.escapeKey ?? false,
+    outsidePress: typeof normalizable === "boolean" ? normalizable : normalizable?.outsidePress ?? true
+  };
+}
+function useDismiss(context, props, slot) {
+  const {
+    enabled = true,
+    escapeKey = true,
+    outsidePress: outsidePressProp = true,
+    outsidePressEvent = "sloppy",
+    referencePress = alwaysFalse,
+    bubbles,
+    externalTree
+  } = props;
+  const store = context && "rootStore" in context ? context.rootStore : context;
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "open"));
+  const floatingElement = store.useState("floatingElement", (0, import_internal.subSlot)(slot, "fel"));
+  const { dataRef } = store.context;
+  const tree = (0, import_FloatingTree.useFloatingTree)(externalTree);
+  const outsidePressFn = (0, import_useStableCallback.useStableCallback)(
+    typeof outsidePressProp === "function" ? outsidePressProp : () => false,
+    (0, import_internal.subSlot)(slot, "opf")
+  );
+  const outsidePress = typeof outsidePressProp === "function" ? outsidePressFn : outsidePressProp;
+  const outsidePressEnabled = outsidePress !== false;
+  const getOutsidePressEventProp = (0, import_useStableCallback.useStableCallback)(
+    () => outsidePressEvent,
+    (0, import_internal.subSlot)(slot, "gope")
+  );
+  const { escapeKey: escapeKeyBubbles, outsidePress: outsidePressBubbles } = normalizeProp(bubbles);
+  const pressStartedInsideRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "psi"));
+  const pressStartPreventedRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "psp"));
+  const suppressNextOutsideClickRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "snoc"));
+  const isComposingRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "ic"));
+  const currentPointerTypeRef = (0, import_octane.useRef)("", (0, import_internal.subSlot)(slot, "cpt"));
+  const touchStateRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ts"));
+  const cancelDismissOnEndTimeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "cdet"));
+  const clearInsideReactTreeTimeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "cirt"));
+  const clearInsideReactTree = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      clearInsideReactTreeTimeout.clear();
+      dataRef.current.insideReactTree = false;
+    },
+    (0, import_internal.subSlot)(slot, "cir")
+  );
+  const hasBlockingChild = (0, import_useStableCallback.useStableCallback)(
+    (bubbleKey) => {
+      const nodeId = dataRef.current.floatingContext?.nodeId;
+      const children = tree ? (0, import_nodes.getNodeChildren)(tree.nodesRef.current, nodeId) : [];
+      return children.some(
+        (child) => child.context?.open && !child.context.dataRef.current[bubbleKey]
+      );
+    },
+    (0, import_internal.subSlot)(slot, "hbc")
+  );
+  const isEventWithinOwnElements = (0, import_useStableCallback.useStableCallback)(
+    (event) => {
+      return (0, import_element.isEventTargetWithin)(event, store.select("floatingElement")) || (0, import_element.isEventTargetWithin)(event, store.select("domReferenceElement"));
+    },
+    (0, import_internal.subSlot)(slot, "iewoe")
+  );
+  const closeOnReferencePress = (0, import_useStableCallback.useStableCallback)(
+    (event) => {
+      if (!referencePress()) {
+        return;
+      }
+      store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.triggerPress, event));
+    },
+    (0, import_internal.subSlot)(slot, "corp")
+  );
+  const closeOnEscapeKeyDown = (0, import_useStableCallback.useStableCallback)(
+    (event) => {
+      if (!open || !enabled || !escapeKey || event.key !== "Escape") {
+        return;
+      }
+      if (isComposingRef.current) {
+        return;
+      }
+      if (!escapeKeyBubbles && hasBlockingChild("__escapeKeyBubbles")) {
+        return;
+      }
+      const native = (0, import_event.isReactEvent)(event) ? event.nativeEvent : event;
+      const eventDetails = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.escapeKey, native);
+      store.setOpen(false, eventDetails);
+      if (!eventDetails.isCanceled) {
+        event.preventDefault();
+      }
+      if (!escapeKeyBubbles && !eventDetails.isPropagationAllowed) {
+        event.stopPropagation();
+      }
+    },
+    (0, import_internal.subSlot)(slot, "coekd")
+  );
+  const markInsideReactTree = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      dataRef.current.insideReactTree = true;
+      clearInsideReactTreeTimeout.start(0, clearInsideReactTree);
+    },
+    (0, import_internal.subSlot)(slot, "mirt")
+  );
+  const markPressStartedInsideReactTree = (0, import_useStableCallback.useStableCallback)(
+    (event) => {
+      if (!open || !enabled || event.button !== 0) {
+        return;
+      }
+      const target = (0, import_element.getTarget)(event);
+      if (!(0, import_element.contains)(store.select("floatingElement"), target)) {
+        return;
+      }
+      if (!pressStartedInsideRef.current) {
+        pressStartedInsideRef.current = true;
+        pressStartPreventedRef.current = false;
+      }
+    },
+    (0, import_internal.subSlot)(slot, "mpsirt")
+  );
+  const markInsidePressStartPrevented = (0, import_useStableCallback.useStableCallback)(
+    (event) => {
+      if (!open || !enabled) {
+        return;
+      }
+      if (!event.defaultPrevented) {
+        return;
+      }
+      if (pressStartedInsideRef.current) {
+        pressStartPreventedRef.current = true;
+      }
+    },
+    (0, import_internal.subSlot)(slot, "mipsp")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (!open || !enabled) {
+        return void 0;
+      }
+      dataRef.current.__escapeKeyBubbles = escapeKeyBubbles;
+      dataRef.current.__outsidePressBubbles = outsidePressBubbles;
+      const compositionTimeout = new import_useTimeout.Timeout();
+      const preventedPressSuppressionTimeout = new import_useTimeout.Timeout();
+      function handleCompositionStart() {
+        compositionTimeout.clear();
+        isComposingRef.current = true;
+      }
+      function handleCompositionEnd() {
+        compositionTimeout.start(import_platform.platform.engine.webkit ? 5 : 0, () => {
+          isComposingRef.current = false;
+        });
+      }
+      function suppressImmediateOutsideClickAfterPreventedStart() {
+        suppressNextOutsideClickRef.current = true;
+        preventedPressSuppressionTimeout.start(0, () => {
+          suppressNextOutsideClickRef.current = false;
+        });
+      }
+      function resetPressStartState() {
+        pressStartedInsideRef.current = false;
+        pressStartPreventedRef.current = false;
+      }
+      function getOutsidePressEvent() {
+        const type = currentPointerTypeRef.current;
+        const computedType = type === "pen" || !type ? "mouse" : type;
+        const outsidePressEventValue = getOutsidePressEventProp();
+        const resolved = typeof outsidePressEventValue === "function" ? outsidePressEventValue() : outsidePressEventValue;
+        if (typeof resolved === "string") {
+          return resolved;
+        }
+        return resolved[computedType];
+      }
+      function shouldIgnoreEvent(event) {
+        const computedOutsidePressEvent = getOutsidePressEvent();
+        return computedOutsidePressEvent === "intentional" && event.type !== "click" || computedOutsidePressEvent === "sloppy" && event.type === "click";
+      }
+      function isEventWithinFloatingTree(event) {
+        const nodeId = dataRef.current.floatingContext?.nodeId;
+        const targetIsInsideChildren = tree && (0, import_nodes.getNodeChildren)(tree.nodesRef.current, nodeId).some(
+          (node) => (0, import_element.isEventTargetWithin)(event, node.context?.elements.floating)
+        );
+        return isEventWithinOwnElements(event) || targetIsInsideChildren;
+      }
+      function closeOnPressOutside(event) {
+        if (shouldIgnoreEvent(event)) {
+          if (event.type !== "click" && !isEventWithinOwnElements(event)) {
+            preventedPressSuppressionTimeout.clear();
+            suppressNextOutsideClickRef.current = false;
+          }
+          clearInsideReactTree();
+          return;
+        }
+        if (dataRef.current.insideReactTree) {
+          clearInsideReactTree();
+          return;
+        }
+        const target = (0, import_element.getTarget)(event);
+        const inertSelector = `[${(0, import_createAttribute.createAttribute)("inert")}]`;
+        const targetRoot = (0, import_dom.isElement)(target) ? target.getRootNode() : null;
+        const markers = Array.from(
+          ((0, import_dom.isShadowRoot)(targetRoot) ? targetRoot : (0, import_owner.ownerDocument)(store.select("floatingElement"))).querySelectorAll(inertSelector)
+        );
+        const triggers = store.context.triggerElements;
+        if (target && (triggers.hasElement(target) || triggers.hasMatchingElement((trigger) => (0, import_element.contains)(trigger, target)))) {
+          return;
+        }
+        let targetRootAncestor = (0, import_dom.isElement)(target) ? target : null;
+        while (targetRootAncestor && !(0, import_dom.isLastTraversableNode)(targetRootAncestor)) {
+          const nextParent = (0, import_dom.getParentNode)(targetRootAncestor);
+          if ((0, import_dom.isLastTraversableNode)(nextParent) || !(0, import_dom.isElement)(nextParent)) {
+            break;
+          }
+          targetRootAncestor = nextParent;
+        }
+        if (markers.length && (0, import_dom.isElement)(target) && !(0, import_element.isRootElement)(target) && !(0, import_element.contains)(target, store.select("floatingElement")) && markers.every((marker) => !(0, import_element.contains)(targetRootAncestor, marker))) {
+          return;
+        }
+        if ((0, import_dom.isHTMLElement)(target) && !("touches" in event)) {
+          const lastTraversableNode = (0, import_dom.isLastTraversableNode)(target);
+          const style = (0, import_dom.getComputedStyle)(target);
+          const scrollRe = /auto|scroll/;
+          const isScrollableX = lastTraversableNode || scrollRe.test(style.overflowX);
+          const isScrollableY = lastTraversableNode || scrollRe.test(style.overflowY);
+          const canScrollX = isScrollableX && target.clientWidth > 0 && target.scrollWidth > target.clientWidth;
+          const canScrollY = isScrollableY && target.clientHeight > 0 && target.scrollHeight > target.clientHeight;
+          const isRTL = style.direction === "rtl";
+          const pressedVerticalScrollbar = canScrollY && (isRTL ? event.offsetX <= target.offsetWidth - target.clientWidth : event.offsetX > target.clientWidth);
+          const pressedHorizontalScrollbar = canScrollX && event.offsetY > target.clientHeight;
+          if (pressedVerticalScrollbar || pressedHorizontalScrollbar) {
+            return;
+          }
+        }
+        if (isEventWithinFloatingTree(event)) {
+          return;
+        }
+        if (getOutsidePressEvent() === "intentional" && suppressNextOutsideClickRef.current) {
+          preventedPressSuppressionTimeout.clear();
+          suppressNextOutsideClickRef.current = false;
+          return;
+        }
+        if (typeof outsidePress === "function" && !outsidePress(event)) {
+          return;
+        }
+        if (hasBlockingChild("__outsidePressBubbles")) {
+          return;
+        }
+        store.setOpen(false, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.outsidePress, event));
+        clearInsideReactTree();
+      }
+      function handlePointerDown(event) {
+        if (getOutsidePressEvent() !== "sloppy" || event.pointerType === "touch" || !store.select("open") || !enabled || isEventWithinOwnElements(event)) {
+          return;
+        }
+        closeOnPressOutside(event);
+      }
+      function handleTouchStart(event) {
+        if (getOutsidePressEvent() !== "sloppy" || !store.select("open") || !enabled || isEventWithinOwnElements(event)) {
+          return;
+        }
+        const touch = event.touches[0];
+        if (touch) {
+          touchStateRef.current = {
+            startTime: Date.now(),
+            startX: touch.clientX,
+            startY: touch.clientY,
+            dismissOnTouchEnd: false,
+            dismissOnMouseDown: true
+          };
+          cancelDismissOnEndTimeout.start(1e3, () => {
+            if (touchStateRef.current) {
+              touchStateRef.current.dismissOnTouchEnd = false;
+              touchStateRef.current.dismissOnMouseDown = false;
+            }
+          });
+        }
+      }
+      function addTargetEventListenerOnce(event, listener) {
+        const target = (0, import_element.getTarget)(event);
+        if (!target) {
+          return;
+        }
+        const unsubscribe2 = (0, import_addEventListener.addEventListener)(target, event.type, () => {
+          listener(event);
+          unsubscribe2();
+        });
+      }
+      function handleTouchStartCapture(event) {
+        currentPointerTypeRef.current = "touch";
+        addTargetEventListenerOnce(event, handleTouchStart);
+      }
+      function closeOnPressOutsideCapture(event) {
+        cancelDismissOnEndTimeout.clear();
+        if (event.type === "pointerdown") {
+          currentPointerTypeRef.current = event.pointerType;
+        }
+        if (event.type === "mousedown" && touchStateRef.current && !touchStateRef.current.dismissOnMouseDown) {
+          return;
+        }
+        addTargetEventListenerOnce(event, (targetEvent) => {
+          if (targetEvent.type === "pointerdown") {
+            handlePointerDown(targetEvent);
+          } else {
+            closeOnPressOutside(targetEvent);
+          }
+        });
+      }
+      function handlePressEndCapture(event) {
+        if (!pressStartedInsideRef.current) {
+          return;
+        }
+        const pressStartedInsideDefaultPrevented = pressStartPreventedRef.current;
+        resetPressStartState();
+        if (getOutsidePressEvent() !== "intentional") {
+          return;
+        }
+        if (event.type === "pointercancel") {
+          if (pressStartedInsideDefaultPrevented) {
+            suppressImmediateOutsideClickAfterPreventedStart();
+          }
+          return;
+        }
+        if (isEventWithinFloatingTree(event)) {
+          return;
+        }
+        if (pressStartedInsideDefaultPrevented) {
+          suppressImmediateOutsideClickAfterPreventedStart();
+          return;
+        }
+        if (typeof outsidePress === "function" && !outsidePress(event)) {
+          return;
+        }
+        preventedPressSuppressionTimeout.clear();
+        suppressNextOutsideClickRef.current = true;
+        clearInsideReactTree();
+      }
+      function handleTouchMove(event) {
+        if (getOutsidePressEvent() !== "sloppy" || !touchStateRef.current || isEventWithinOwnElements(event)) {
+          return;
+        }
+        const touch = event.touches[0];
+        if (!touch) {
+          return;
+        }
+        const deltaX = Math.abs(touch.clientX - touchStateRef.current.startX);
+        const deltaY = Math.abs(touch.clientY - touchStateRef.current.startY);
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        if (distance > 5) {
+          touchStateRef.current.dismissOnTouchEnd = true;
+        }
+        if (distance > 10) {
+          closeOnPressOutside(event);
+          cancelDismissOnEndTimeout.clear();
+          touchStateRef.current = null;
+        }
+      }
+      function handleTouchMoveCapture(event) {
+        addTargetEventListenerOnce(event, handleTouchMove);
+      }
+      function handleTouchEnd(event) {
+        if (getOutsidePressEvent() !== "sloppy" || !touchStateRef.current || isEventWithinOwnElements(event)) {
+          return;
+        }
+        if (touchStateRef.current.dismissOnTouchEnd) {
+          closeOnPressOutside(event);
+        }
+        cancelDismissOnEndTimeout.clear();
+        touchStateRef.current = null;
+      }
+      function handleTouchEndCapture(event) {
+        addTargetEventListenerOnce(event, handleTouchEnd);
+      }
+      const doc = (0, import_owner.ownerDocument)(floatingElement);
+      const unsubscribe = (0, import_mergeCleanups.mergeCleanups)(
+        escapeKey && (0, import_mergeCleanups.mergeCleanups)(
+          (0, import_addEventListener.addEventListener)(doc, "keydown", closeOnEscapeKeyDown),
+          (0, import_addEventListener.addEventListener)(doc, "compositionstart", handleCompositionStart),
+          (0, import_addEventListener.addEventListener)(doc, "compositionend", handleCompositionEnd)
+        ),
+        outsidePressEnabled && (0, import_mergeCleanups.mergeCleanups)(
+          (0, import_addEventListener.addEventListener)(doc, "click", closeOnPressOutsideCapture, true),
+          (0, import_addEventListener.addEventListener)(doc, "pointerdown", closeOnPressOutsideCapture, true),
+          (0, import_addEventListener.addEventListener)(doc, "pointerup", handlePressEndCapture, true),
+          (0, import_addEventListener.addEventListener)(doc, "pointercancel", handlePressEndCapture, true),
+          (0, import_addEventListener.addEventListener)(doc, "mousedown", closeOnPressOutsideCapture, true),
+          (0, import_addEventListener.addEventListener)(doc, "mouseup", handlePressEndCapture, true),
+          (0, import_addEventListener.addEventListener)(doc, "touchstart", handleTouchStartCapture, true),
+          (0, import_addEventListener.addEventListener)(doc, "touchmove", handleTouchMoveCapture, true),
+          (0, import_addEventListener.addEventListener)(doc, "touchend", handleTouchEndCapture, true)
+        )
+      );
+      return () => {
+        unsubscribe();
+        compositionTimeout.clear();
+        preventedPressSuppressionTimeout.clear();
+        resetPressStartState();
+        suppressNextOutsideClickRef.current = false;
+      };
+    },
+    [
+      dataRef,
+      floatingElement,
+      escapeKey,
+      outsidePressEnabled,
+      outsidePress,
+      open,
+      enabled,
+      escapeKeyBubbles,
+      outsidePressBubbles,
+      closeOnEscapeKeyDown,
+      clearInsideReactTree,
+      getOutsidePressEventProp,
+      hasBlockingChild,
+      isEventWithinOwnElements,
+      tree,
+      store,
+      cancelDismissOnEndTimeout
+    ],
+    (0, import_internal.subSlot)(slot, "e:main")
+  );
+  (0, import_octane.useEffect)(clearInsideReactTree, [outsidePress, clearInsideReactTree], (0, import_internal.subSlot)(slot, "e:cir"));
+  const reference = (0, import_octane.useMemo)(
+    () => ({
+      onKeyDown: closeOnEscapeKeyDown,
+      onPointerDown: closeOnReferencePress,
+      onClick: closeOnReferencePress
+    }),
+    [closeOnEscapeKeyDown, closeOnReferencePress],
+    (0, import_internal.subSlot)(slot, "ref")
+  );
+  const floating = (0, import_octane.useMemo)(
+    () => ({
+      onKeyDown: closeOnEscapeKeyDown,
+      onPointerDown: markInsidePressStartPrevented,
+      onMouseDown: markInsidePressStartPrevented,
+      onClickCapture: markInsideReactTree,
+      onMouseDownCapture(event) {
+        markInsideReactTree();
+        markPressStartedInsideReactTree(event);
+      },
+      onPointerDownCapture(event) {
+        markInsideReactTree();
+        markPressStartedInsideReactTree(event);
+      },
+      onMouseUpCapture: markInsideReactTree,
+      onTouchEndCapture: markInsideReactTree,
+      onTouchMoveCapture: markInsideReactTree
+    }),
+    [
+      closeOnEscapeKeyDown,
+      markInsideReactTree,
+      markPressStartedInsideReactTree,
+      markInsidePressStartPrevented
+    ],
+    (0, import_internal.subSlot)(slot, "floating")
+  );
+  return (0, import_octane.useMemo)(
+    () => enabled ? { reference, floating, trigger: reference } : {},
+    [enabled, reference, floating],
+    (0, import_internal.subSlot)(slot, "out")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  normalizeProp,
+  useDismiss
+});

package/dist/cjs/utils/floating/useFloating.cjs

@@ -0,0 +1,186 @@
+"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 useFloating_exports = {};
+__export(useFloating_exports, {
+  useFloating: () => useFloating
+});
+module.exports = __toCommonJS(useFloating_exports);
+var import_octane = require("octane");
+var import_floating_ui = require("@octanejs/floating-ui");
+var import_internal = require("../../internal.cjs");
+var import_dom = require("../dom.cjs");
+var import_FloatingTree = require("./FloatingTree.cjs");
+var import_useFloatingRootContext = require("./useFloatingRootContext.cjs");
+function useFloating(options = {}, slot) {
+  const localSlot = slot ?? (0, import_internal.S)("useFloating");
+  const { nodeId, externalTree } = options;
+  const internalStore = (0, import_useFloatingRootContext.useFloatingRootContext)(options, (0, import_internal.subSlot)(localSlot, "internal"));
+  const store = options.rootContext || internalStore;
+  const referenceElement = store.useState("referenceElement", (0, import_internal.subSlot)(localSlot, "ref"));
+  const floatingElement = store.useState("floatingElement", (0, import_internal.subSlot)(localSlot, "flo"));
+  const domReferenceElement = store.useState("domReferenceElement", (0, import_internal.subSlot)(localSlot, "dref"));
+  const open = store.useState("open", (0, import_internal.subSlot)(localSlot, "open"));
+  const floatingId = store.useState("floatingId", (0, import_internal.subSlot)(localSlot, "fid"));
+  const [positionReference, setPositionReferenceRaw] = (0, import_octane.useState)(
+    null,
+    (0, import_internal.subSlot)(localSlot, "posref")
+  );
+  const [localDomReference, setLocalDomReference] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(localSlot, "ldref")
+  );
+  const [localFloatingElement, setLocalFloatingElement] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(localSlot, "lflo")
+  );
+  const domReferenceRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(localSlot, "drefref"));
+  const tree = (0, import_FloatingTree.useFloatingTree)(externalTree);
+  const storeElements = (0, import_octane.useMemo)(
+    () => ({
+      reference: referenceElement,
+      floating: floatingElement,
+      domReference: domReferenceElement
+    }),
+    [referenceElement, floatingElement, domReferenceElement],
+    (0, import_internal.subSlot)(localSlot, "m:se")
+  );
+  const position = (0, import_floating_ui.usePositionFloating)([
+    {
+      ...options,
+      elements: {
+        ...storeElements,
+        ...positionReference && { reference: positionReference }
+      }
+    },
+    (0, import_internal.subSlot)(localSlot, "pos")
+  ]);
+  const localDomReferenceElement = (0, import_dom.isElement)(localDomReference) ? localDomReference : null;
+  const syncedFloatingElement = localFloatingElement === void 0 ? store.state.floatingElement : localFloatingElement;
+  store.useSyncedValue("referenceElement", localDomReference ?? null, (0, import_internal.subSlot)(localSlot, "s:ref"));
+  store.useSyncedValue(
+    "domReferenceElement",
+    localDomReference === void 0 ? domReferenceElement : localDomReferenceElement,
+    (0, import_internal.subSlot)(localSlot, "s:dref")
+  );
+  store.useSyncedValue("floatingElement", syncedFloatingElement, (0, import_internal.subSlot)(localSlot, "s:flo"));
+  const setPositionReference = (0, import_octane.useCallback)(
+    (node) => {
+      const computedPositionReference = (0, import_dom.isElement)(node) ? {
+        getBoundingClientRect: () => node.getBoundingClientRect(),
+        getClientRects: () => node.getClientRects(),
+        contextElement: node
+      } : node;
+      setPositionReferenceRaw(computedPositionReference);
+      position.refs.setReference(computedPositionReference);
+    },
+    [position.refs],
+    (0, import_internal.subSlot)(localSlot, "spr")
+  );
+  const setReference = (0, import_octane.useCallback)(
+    (node) => {
+      if ((0, import_dom.isElement)(node) || node === null) {
+        domReferenceRef.current = node;
+        setLocalDomReference(node);
+      }
+      if ((0, import_dom.isElement)(position.refs.reference.current) || position.refs.reference.current === null || node !== null && !(0, import_dom.isElement)(node)) {
+        position.refs.setReference(node);
+      }
+    },
+    [position.refs],
+    (0, import_internal.subSlot)(localSlot, "sr")
+  );
+  const setFloating = (0, import_octane.useCallback)(
+    (node) => {
+      setLocalFloatingElement(node);
+      position.refs.setFloating(node);
+    },
+    [position.refs],
+    (0, import_internal.subSlot)(localSlot, "sf")
+  );
+  const refs = (0, import_octane.useMemo)(
+    () => ({
+      ...position.refs,
+      setReference,
+      setFloating,
+      setPositionReference,
+      domReference: domReferenceRef
+    }),
+    [position.refs, setReference, setFloating, setPositionReference],
+    (0, import_internal.subSlot)(localSlot, "m:refs")
+  );
+  const elements = (0, import_octane.useMemo)(
+    () => ({
+      ...position.elements,
+      domReference: domReferenceElement
+    }),
+    [position.elements, domReferenceElement],
+    (0, import_internal.subSlot)(localSlot, "m:el")
+  );
+  const context = (0, import_octane.useMemo)(
+    () => ({
+      ...position,
+      dataRef: store.context.dataRef,
+      open,
+      onOpenChange: store.setOpen,
+      events: store.context.events,
+      floatingId,
+      refs,
+      elements,
+      nodeId,
+      rootStore: store
+    }),
+    [position, refs, elements, nodeId, store, open, floatingId],
+    (0, import_internal.subSlot)(localSlot, "m:ctx")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (domReferenceElement) {
+        domReferenceRef.current = domReferenceElement;
+      }
+    },
+    [domReferenceElement],
+    (0, import_internal.subSlot)(localSlot, "e:dref")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      store.context.dataRef.current.floatingContext = context;
+      const node = tree?.nodesRef.current.find((n) => n.id === nodeId);
+      if (node) {
+        node.context = context;
+      }
+    },
+    void 0,
+    (0, import_internal.subSlot)(localSlot, "e:ctx")
+  );
+  return (0, import_octane.useMemo)(
+    () => ({
+      ...position,
+      context,
+      refs,
+      elements,
+      rootStore: store
+    }),
+    [position, refs, elements, context, store],
+    (0, import_internal.subSlot)(localSlot, "m:ret")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFloating
+});