@helpwave/hightide 0.12.2 → 0.12.3

package/dist/index.mjs

@@ -14709,7 +14709,7 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
   const toNavigationItems = useCallback28((items) => {
     return items?.map((item) => ({
       id: item.id,
-      label: /* @__PURE__ */ jsxs24("span", { className: clsx15("flex-row-2 items-center", { "text-primary": item.isActive }), children: [
+      label: /* @__PURE__ */ jsxs24("span", { className: "app-page-navigation-item-label", "data-acitve": item.isActive ? "" : void 0, children: [
         item.icon && /* @__PURE__ */ jsx43("span", { className: "size-5", children: item.icon }),
         item.label
       ] }),
@@ -14719,8 +14719,8 @@ var AppPage = ({ children, headerActions, sidebarProps, ...props }) => {
     })) ?? void 0;
   }, []);
   const navigationItems = useMemo22(() => toNavigationItems(
-    sidebarProps.items
-  ), [sidebarProps.items, toNavigationItems]);
+    sidebarProps.navigationItems
+  ), [sidebarProps.navigationItems, toNavigationItems]);
   return /* @__PURE__ */ jsxs24(
     "div",
     {
@@ -23441,8 +23441,203 @@ var useRerender = () => {
   return useReducer2(() => ({}), {})[1];
 };
 
+// src/hooks/useSwipeGesture.ts
+import { useEffect as useEffect61, useRef as useRef48 } from "react";
+var useSwipeGesture = ({
+  elementRef,
+  inputMode = "touch",
+  onSwipe,
+  startRegion,
+  threshold = 50,
+  crossAxisThreshold = 100,
+  maxSwipeTime = 100
+}) => {
+  const onSwipeRef = useRef48(onSwipe);
+  const startRegionRef = useRef48(startRegion);
+  const thresholdRef = useRef48(threshold);
+  const crossAxisThresholdRef = useRef48(crossAxisThreshold);
+  const maxSwipeTimeRef = useRef48(maxSwipeTime);
+  const gestureStartRef = useRef48(null);
+  const gestureEndRef = useRef48(null);
+  const isScrollingRef = useRef48(false);
+  const isMouseDownRef = useRef48(false);
+  useEffect61(() => {
+    onSwipeRef.current = onSwipe;
+    startRegionRef.current = startRegion;
+    thresholdRef.current = threshold;
+    crossAxisThresholdRef.current = crossAxisThreshold;
+    maxSwipeTimeRef.current = maxSwipeTime;
+  }, [onSwipe, startRegion, threshold, crossAxisThreshold, maxSwipeTime]);
+  const isWithinStartRegion = (x, y) => {
+    const region = startRegionRef.current;
+    if (!region) return true;
+    if (region.minX !== void 0 && x < region.minX) return false;
+    if (region.maxX !== void 0 && x > region.maxX) return false;
+    if (region.minY !== void 0 && y < region.minY) return false;
+    if (region.maxY !== void 0 && y > region.maxY) return false;
+    return true;
+  };
+  const findScrollableParent = (element) => {
+    if (!element) return null;
+    const table = element.closest("table") || element.closest('[role="table"]');
+    if (table) {
+      let parent = table.parentElement;
+      while (parent) {
+        const style = window.getComputedStyle(parent);
+        if (style.overflow === "auto" || style.overflow === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll" || style.overflowX === "auto" || style.overflowX === "scroll") {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+      return table;
+    }
+    let current = element;
+    while (current) {
+      const style = window.getComputedStyle(current);
+      if (style.overflow === "auto" || style.overflow === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll" || style.overflowX === "auto" || style.overflowX === "scroll") {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  };
+  useEffect61(() => {
+    const element = elementRef?.current ?? null;
+    const target = element ?? window;
+    const listenTouch = inputMode === "touch" || inputMode === "both";
+    const listenMouse = inputMode === "mouse" || inputMode === "both";
+    const onGestureStart = (x, y, eventTarget) => {
+      console.log("onGestureStart", x, y);
+      if (!isWithinStartRegion(x, y)) return;
+      const scrollableParent = findScrollableParent(eventTarget);
+      gestureEndRef.current = null;
+      gestureStartRef.current = {
+        x,
+        y,
+        scrollY: scrollableParent?.scrollTop ?? window.scrollY,
+        time: performance.now()
+      };
+      isScrollingRef.current = !!scrollableParent;
+    };
+    const onGestureMove = (x, y, eventTarget) => {
+      console.log("onGestureMove", x, y);
+      const scrollableParent = findScrollableParent(eventTarget);
+      const currentScrollY = scrollableParent?.scrollTop ?? window.scrollY;
+      gestureEndRef.current = {
+        x,
+        y,
+        scrollY: currentScrollY,
+        time: performance.now()
+      };
+      if (gestureStartRef.current && Math.abs(currentScrollY - gestureStartRef.current.scrollY) > 5) {
+        isScrollingRef.current = true;
+      }
+    };
+    const resolveSwipeDirection = (start, end) => {
+      const deltaX = end.x - start.x;
+      const deltaY = end.y - start.y;
+      const absX = Math.abs(deltaX);
+      const absY = Math.abs(deltaY);
+      const minDistance = thresholdRef.current;
+      const maxCrossAxis = crossAxisThresholdRef.current;
+      if (absX < minDistance && absY < minDistance) {
+        return null;
+      }
+      if (absX >= absY && absX >= minDistance && absY <= maxCrossAxis) {
+        return deltaX > 0 ? "leftToRight" : "rightToLeft";
+      }
+      if (absY > absX && absY >= minDistance && absX <= maxCrossAxis) {
+        return deltaY > 0 ? "topToBottom" : "bottomToTop";
+      }
+      return null;
+    };
+    const onGestureEnd = () => {
+      const start = gestureStartRef.current;
+      const end = gestureEndRef.current;
+      if (!start || !end) {
+        gestureStartRef.current = null;
+        gestureEndRef.current = null;
+        isScrollingRef.current = false;
+        return;
+      }
+      if (isScrollingRef.current || Math.abs(start.scrollY - end.scrollY) > 5) {
+        gestureStartRef.current = null;
+        gestureEndRef.current = null;
+        isScrollingRef.current = false;
+        return;
+      }
+      const maxSwipeTime2 = maxSwipeTimeRef.current;
+      if (maxSwipeTime2 !== void 0 && end.time - start.time > maxSwipeTime2) {
+        gestureStartRef.current = null;
+        gestureEndRef.current = null;
+        isScrollingRef.current = false;
+        return;
+      }
+      const direction = resolveSwipeDirection(start, end);
+      if (direction && onSwipeRef.current) {
+        onSwipeRef.current({ direction });
+      }
+      gestureStartRef.current = null;
+      gestureEndRef.current = null;
+      isScrollingRef.current = false;
+    };
+    const onTouchStart = (e) => {
+      if (!e.touches[0]) return;
+      onGestureStart(e.touches[0].clientX, e.touches[0].clientY, e.target);
+    };
+    const onTouchMove = (e) => {
+      if (!e.touches[0]) return;
+      onGestureMove(e.touches[0].clientX, e.touches[0].clientY, e.target);
+    };
+    const onTouchEnd = () => {
+      onGestureEnd();
+    };
+    const onMouseMove = (e) => {
+      if (!isMouseDownRef.current) return;
+      onGestureMove(e.clientX, e.clientY, e.target);
+    };
+    const onMouseUp = () => {
+      if (!isMouseDownRef.current) return;
+      isMouseDownRef.current = false;
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+      onGestureEnd();
+    };
+    const onMouseDown = (e) => {
+      if (e.button !== 0) return;
+      if (!isWithinStartRegion(e.clientX, e.clientY)) return;
+      isMouseDownRef.current = true;
+      onGestureStart(e.clientX, e.clientY, e.target);
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+    };
+    const passiveOptions = { passive: true };
+    if (listenTouch) {
+      target.addEventListener("touchstart", onTouchStart, passiveOptions);
+      target.addEventListener("touchmove", onTouchMove, passiveOptions);
+      target.addEventListener("touchend", onTouchEnd, passiveOptions);
+    }
+    if (listenMouse) {
+      target.addEventListener("mousedown", onMouseDown);
+    }
+    return () => {
+      if (listenTouch) {
+        target.removeEventListener("touchstart", onTouchStart);
+        target.removeEventListener("touchmove", onTouchMove);
+        target.removeEventListener("touchend", onTouchEnd);
+      }
+      if (listenMouse) {
+        target.removeEventListener("mousedown", onMouseDown);
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+      }
+    };
+  }, [elementRef, inputMode]);
+  return elementRef;
+};
+
 // src/hooks/useUpdatingDateString.ts
-import { useEffect as useEffect61, useState as useState51 } from "react";
+import { useEffect as useEffect62, useState as useState51 } from "react";
 var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, is24HourFormat: is24HourFormatOverride, timeZone: timeZoneOverride, date }) => {
   const { locale: contextLocale, is24HourFormat: contextIs24HourFormat, timeZone: contextTimeZone } = useLocale();
   const locale = localeOverride ?? contextLocale;
@@ -23453,14 +23648,14 @@ var useUpdatingDateString = ({ absoluteFormat = "dateTime", localeOverride, is24
     absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
     relative: DateUtils.formatRelative(date, locale)
   });
-  useEffect61(() => {
+  useEffect62(() => {
     setDateAndTimeStrings({
       compareDate: date,
       absolute: DateUtils.formatAbsolute(date, locale, absoluteFormat, { is24HourFormat, timeZone }),
       relative: DateUtils.formatRelative(date, locale)
     });
   }, [date, absoluteFormat, locale, is24HourFormat, timeZone]);
-  useEffect61(() => {
+  useEffect62(() => {
     let timeoutId;
     const startTimer = () => {
       const now = /* @__PURE__ */ new Date();
@@ -24102,6 +24297,7 @@ export {
   useSelectOptionDisplayLocation,
   useSingleSelection,
   useStorage,
+  useSwipeGesture,
   useTabContext,
   useTableColumnDefinitionContext,
   useTableContainerContext,