@octanejs/base-ui 0.1.31 → 0.1.32

package/dist/cjs/utils/floating/useClick.cjs

@@ -0,0 +1,153 @@
+"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 useClick_exports = {};
+__export(useClick_exports, {
+  useClick: () => useClick
+});
+module.exports = __toCommonJS(useClick_exports);
+var import_octane = require("octane");
+var import_internal = require("../../internal.cjs");
+var import_useAnimationFrame = require("../useAnimationFrame.cjs");
+var import_useTimeout = require("../useTimeout.cjs");
+var import_empty = require("../empty.cjs");
+var import_element = require("./element.cjs");
+var import_event = require("./event.cjs");
+var import_createChangeEventDetails = require("../createChangeEventDetails.cjs");
+function useClick(context, props, slot) {
+  const {
+    enabled = true,
+    event: eventOption = "click",
+    toggle = true,
+    ignoreMouse = false,
+    stickIfOpen = true,
+    touchOpenDelay = 0,
+    reason = import_createChangeEventDetails.REASONS.triggerPress
+  } = props;
+  const store = context && "rootStore" in context ? context.rootStore : context;
+  const dataRef = store.context.dataRef;
+  const pointerTypeRef = (0, import_octane.useRef)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "pt")
+  );
+  const frame = (0, import_useAnimationFrame.useAnimationFrame)((0, import_internal.subSlot)(slot, "frame"));
+  const touchOpenTimeout = (0, import_useTimeout.useTimeout)((0, import_internal.subSlot)(slot, "to"));
+  const reference = (0, import_octane.useMemo)(
+    () => {
+      function setOpenWithTouchDelay(nextOpen, nativeEvent, target, pointerType) {
+        const details = (0, import_createChangeEventDetails.createChangeEventDetails)(reason, nativeEvent, target);
+        if (nextOpen && pointerType === "touch" && touchOpenDelay > 0) {
+          touchOpenTimeout.start(touchOpenDelay, () => {
+            store.setOpen(true, details);
+          });
+        } else {
+          store.setOpen(nextOpen, details);
+        }
+      }
+      function getNextOpen(open, currentTarget, isClickLikeOpenEvent) {
+        const openEvent = dataRef.current.openEvent;
+        const hasClickedOnInactiveTrigger = store.select("domReferenceElement") !== currentTarget;
+        if (open && hasClickedOnInactiveTrigger) {
+          return true;
+        }
+        if (!open) {
+          return true;
+        }
+        if (!toggle) {
+          return true;
+        }
+        if (openEvent && stickIfOpen) {
+          return !isClickLikeOpenEvent(openEvent.type);
+        }
+        return false;
+      }
+      return {
+        onPointerDown(event) {
+          pointerTypeRef.current = event.pointerType;
+        },
+        onMouseDown(event) {
+          const pointerType = pointerTypeRef.current;
+          const nativeEvent = event;
+          const open = store.select("open");
+          if (event.button !== 0 || eventOption === "click" || (0, import_event.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
+            return;
+          }
+          const nextOpen = getNextOpen(
+            open,
+            event.currentTarget,
+            (openEventType) => openEventType === "click" || openEventType === "mousedown"
+          );
+          const target = (0, import_element.getTarget)(nativeEvent);
+          if ((0, import_element.isTypeableElement)(target)) {
+            setOpenWithTouchDelay(nextOpen, nativeEvent, target, pointerType);
+            return;
+          }
+          const eventCurrentTarget = event.currentTarget;
+          frame.request(() => {
+            setOpenWithTouchDelay(nextOpen, nativeEvent, eventCurrentTarget, pointerType);
+          });
+        },
+        onClick(event) {
+          if (eventOption === "mousedown-only") {
+            return;
+          }
+          const pointerType = pointerTypeRef.current;
+          if (eventOption === "mousedown" && pointerType) {
+            pointerTypeRef.current = void 0;
+            return;
+          }
+          if ((0, import_event.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
+            return;
+          }
+          const open = store.select("open");
+          const nextOpen = getNextOpen(
+            open,
+            event.currentTarget,
+            (openEventType) => openEventType === "click" || openEventType === "mousedown" || openEventType === "keydown" || openEventType === "keyup"
+          );
+          setOpenWithTouchDelay(nextOpen, event, event.currentTarget, pointerType);
+        },
+        onKeyDown() {
+          pointerTypeRef.current = void 0;
+        }
+      };
+    },
+    [
+      dataRef,
+      eventOption,
+      ignoreMouse,
+      reason,
+      store,
+      stickIfOpen,
+      toggle,
+      frame,
+      touchOpenTimeout,
+      touchOpenDelay
+    ],
+    (0, import_internal.subSlot)(slot, "ref")
+  );
+  return (0, import_octane.useMemo)(
+    () => enabled ? { reference } : import_empty.EMPTY_OBJECT,
+    [enabled, reference],
+    (0, import_internal.subSlot)(slot, "out")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useClick
+});

package/dist/cjs/utils/floating/useClientPoint.cjs

@@ -0,0 +1,225 @@
+"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 useClientPoint_exports = {};
+__export(useClientPoint_exports, {
+  useClientPoint: () => useClientPoint
+});
+module.exports = __toCommonJS(useClientPoint_exports);
+var import_octane = require("octane");
+var import_internal = require("../../internal.cjs");
+var import_addEventListener = require("../addEventListener.cjs");
+var import_owner = require("../owner.cjs");
+var import_useStableCallback = require("../useStableCallback.cjs");
+var import_element = require("./element.cjs");
+var import_event = require("./event.cjs");
+function createVirtualElement(domElement, data) {
+  let offsetX = null;
+  let offsetY = null;
+  let isAutoUpdateEvent = false;
+  return {
+    contextElement: domElement || void 0,
+    getBoundingClientRect() {
+      const domRect = domElement?.getBoundingClientRect() || { width: 0, height: 0, x: 0, y: 0 };
+      const isXAxis = data.axis === "x" || data.axis === "both";
+      const isYAxis = data.axis === "y" || data.axis === "both";
+      const canTrackCursorOnAutoUpdate = ["mouseenter", "mousemove"].includes(data.dataRef.current.openEvent?.type || "") && data.pointerType !== "touch";
+      let width = domRect.width;
+      let height = domRect.height;
+      let x = domRect.x;
+      let y = domRect.y;
+      if (offsetX == null && data.x && isXAxis) {
+        offsetX = domRect.x - data.x;
+      }
+      if (offsetY == null && data.y && isYAxis) {
+        offsetY = domRect.y - data.y;
+      }
+      x -= offsetX || 0;
+      y -= offsetY || 0;
+      width = 0;
+      height = 0;
+      if (!isAutoUpdateEvent || canTrackCursorOnAutoUpdate) {
+        width = data.axis === "y" ? domRect.width : 0;
+        height = data.axis === "x" ? domRect.height : 0;
+        x = isXAxis && data.x != null ? data.x : x;
+        y = isYAxis && data.y != null ? data.y : y;
+      } else if (isAutoUpdateEvent && !canTrackCursorOnAutoUpdate) {
+        height = data.axis === "x" ? domRect.height : height;
+        width = data.axis === "y" ? domRect.width : width;
+      }
+      isAutoUpdateEvent = true;
+      return { width, height, x, y, top: y, right: x + width, bottom: y + height, left: x };
+    }
+  };
+}
+function isMouseBasedEvent(event) {
+  return event != null && event.clientX != null;
+}
+function useClientPoint(...args) {
+  const [user, slotArg] = (0, import_internal.splitSlot)(args);
+  const slot = slotArg ?? (0, import_internal.S)("useClientPoint");
+  const context = user[0];
+  const props = user[1] ?? {};
+  const { enabled = true, axis = "both" } = props;
+  const store = context != null && "rootStore" in context ? context.rootStore : context;
+  const open = store.useState("open", (0, import_internal.subSlot)(slot, "s:open"));
+  const floating = store.useState("floatingElement", (0, import_internal.subSlot)(slot, "s:floating"));
+  const domReference = store.useState("domReferenceElement", (0, import_internal.subSlot)(slot, "s:ref"));
+  const dataRef = store.context.dataRef;
+  const initialRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "initial"));
+  const cleanupListenerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "cleanup"));
+  const [pointerType, setPointerType] = (0, import_octane.useState)(
+    void 0,
+    (0, import_internal.subSlot)(slot, "ptype")
+  );
+  const [reactive, setReactive] = (0, import_octane.useState)([], (0, import_internal.subSlot)(slot, "reactive"));
+  const resetReference = (0, import_useStableCallback.useStableCallback)(
+    (reference2) => {
+      store.set("positionReference", reference2);
+    },
+    (0, import_internal.subSlot)(slot, "reset")
+  );
+  const setReference = (0, import_useStableCallback.useStableCallback)(
+    (newX, newY, referenceElement) => {
+      if (initialRef.current) {
+        return;
+      }
+      if (dataRef.current.openEvent && !isMouseBasedEvent(dataRef.current.openEvent)) {
+        return;
+      }
+      store.set(
+        "positionReference",
+        createVirtualElement(referenceElement ?? domReference, {
+          x: newX,
+          y: newY,
+          axis,
+          dataRef,
+          pointerType
+        })
+      );
+    },
+    (0, import_internal.subSlot)(slot, "setRef")
+  );
+  const handleReferenceEnterOrMove = (0, import_useStableCallback.useStableCallback)(
+    (event) => {
+      if (!open) {
+        setReference(event.clientX, event.clientY, event.currentTarget);
+      } else if (!cleanupListenerRef.current) {
+        setReference(event.clientX, event.clientY, event.currentTarget);
+        setReactive([]);
+      }
+    },
+    (0, import_internal.subSlot)(slot, "enterMove")
+  );
+  const openCheck = (0, import_event.isMouseLikePointerType)(pointerType) ? floating : open;
+  (0, import_octane.useEffect)(
+    () => {
+      if (!enabled) {
+        resetReference(domReference);
+        return void 0;
+      }
+      if (!openCheck) {
+        return void 0;
+      }
+      function cleanupListener() {
+        cleanupListenerRef.current?.();
+        cleanupListenerRef.current = null;
+      }
+      const win = (0, import_owner.ownerWindow)(floating);
+      function handleMouseMove(event) {
+        const target = (0, import_element.getTarget)(event);
+        if (!(0, import_element.contains)(floating, target)) {
+          setReference(event.clientX, event.clientY);
+        } else {
+          cleanupListener();
+        }
+      }
+      if (!dataRef.current.openEvent || isMouseBasedEvent(dataRef.current.openEvent)) {
+        cleanupListenerRef.current = (0, import_addEventListener.addEventListener)(
+          win,
+          "mousemove",
+          handleMouseMove
+        );
+      } else {
+        resetReference(domReference);
+      }
+      return cleanupListener;
+    },
+    [
+      openCheck,
+      enabled,
+      floating,
+      dataRef,
+      domReference,
+      store,
+      setReference,
+      resetReference,
+      reactive
+    ],
+    (0, import_internal.subSlot)(slot, "e:track")
+  );
+  (0, import_octane.useEffect)(
+    () => () => {
+      store.set("positionReference", null);
+    },
+    [store],
+    (0, import_internal.subSlot)(slot, "e:unmount")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (enabled && !floating) {
+        initialRef.current = false;
+      }
+    },
+    [enabled, floating],
+    (0, import_internal.subSlot)(slot, "e:reset")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      if (!enabled && open) {
+        initialRef.current = true;
+      }
+    },
+    [enabled, open],
+    (0, import_internal.subSlot)(slot, "e:freeze")
+  );
+  const reference = (0, import_octane.useMemo)(
+    () => {
+      function setPointerTypeRef(event) {
+        setPointerType(event.pointerType);
+      }
+      return {
+        onPointerDown: setPointerTypeRef,
+        onPointerEnter: setPointerTypeRef,
+        onMouseMove: handleReferenceEnterOrMove,
+        onMouseEnter: handleReferenceEnterOrMove
+      };
+    },
+    [handleReferenceEnterOrMove],
+    (0, import_internal.subSlot)(slot, "ref")
+  );
+  return (0, import_octane.useMemo)(
+    () => enabled ? { reference, trigger: reference } : {},
+    [enabled, reference],
+    (0, import_internal.subSlot)(slot, "out")
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useClientPoint
+});