@expcat/tigercat-react 1.5.0 → 2.0.0-preview.1

package/dist/{chunk-4MREOFVE.mjs → chunk-MMWF2OPA.mjs}

@@ -38,11 +38,14 @@ var CASCADER_KEYS = /* @__PURE__ */ new Set([
   "size",
   "disabled",
   "clearable",
-  "showSearch",
+  "searchable",
+  "searchValue",
+  "defaultSearchValue",
+  "onSearchChange",
   "expandTrigger",
   "changeOnSelect",
   "separator",
-  "notFoundText",
+  "emptyText",
   "className",
   "locale"
 ]);
@@ -56,11 +59,14 @@ var Cascader = (props) => {
     size = "md",
     disabled = false,
     clearable = true,
-    showSearch = false,
+    searchable = false,
+    searchValue,
+    defaultSearchValue = "",
+    onSearchChange,
     expandTrigger = "click",
     changeOnSelect = false,
     separator = " / ",
-    notFoundText,
+    emptyText,
     className,
     locale
   } = props;
@@ -76,7 +82,8 @@ var Cascader = (props) => {
   const instanceId = useId();
   const listboxId = `tiger-cascader-listbox-${instanceId}`;
   const [isOpen, setIsOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
+  const [uncontrolledSearchValue, setUncontrolledSearchValue] = useState(defaultSearchValue);
+  const searchQuery = searchValue ?? uncontrolledSearchValue;
   const [activePath, setActivePath] = useState([]);
   const triggerRef = useRef(null);
   const dropdownRef = useRef(null);
@@ -85,15 +92,15 @@ var Cascader = (props) => {
     [options, value, separator]
   );
   const columns = useMemo(() => getCascaderColumns(options, activePath), [options, activePath]);
-  const isSearchMode = showSearch && searchQuery.length > 0;
+  const isSearchMode = searchable && searchQuery.length > 0;
   const flattenedOptions = useMemo(() => {
-    if (!showSearch) return [];
+    if (!searchable) return [];
     return flattenCascaderOptions(options, [], [], changeOnSelect);
-  }, [showSearch, options, changeOnSelect]);
+  }, [searchable, options, changeOnSelect]);
   const searchResults = useMemo(() => {
     if (!isSearchMode) return [];
-    return filterCascaderOptions(flattenedOptions, searchQuery, showSearch);
-  }, [isSearchMode, flattenedOptions, searchQuery, showSearch]);
+    return filterCascaderOptions(flattenedOptions, searchQuery, searchable);
+  }, [isSearchMode, flattenedOptions, searchQuery, searchable]);
   const triggerClasses = useMemo(
     () => classNames(getCascaderTriggerClasses(size, disabled, isOpen), className),
     [size, disabled, isOpen, className]
@@ -101,9 +108,15 @@ var Cascader = (props) => {
   useEffect(() => {
     if (isOpen) {
       setActivePath(value ? [...value] : []);
-      setSearchQuery("");
+      updateSearchValue("");
     }
   }, [isOpen, value]);
+  function updateSearchValue(value2) {
+    if (searchValue === void 0) {
+      setUncontrolledSearchValue(value2);
+    }
+    onSearchChange?.(value2);
+  }
   useEffect(() => {
     if (!isOpen) return;
     function handleClick(e) {
@@ -241,24 +254,20 @@ var Cascader = (props) => {
         ref: dropdownRef,
         className: classNames(cascaderDropdownClasses, isSearchMode && "flex-col"),
         children: [
-          showSearch && /* @__PURE__ */ jsx(
+          searchable && /* @__PURE__ */ jsx(
             "input",
             {
               type: "text",
               className: cascaderSearchInputClasses,
               placeholder: resolveLocaleText("Search...", mergedLocale?.common?.searchPlaceholder),
               value: searchQuery,
-              onChange: (e) => setSearchQuery(e.target.value),
+              onChange: (e) => updateSearchValue(e.target.value),
               "aria-label": "Search options"
             }
           ),
           isSearchMode ? (
             // Search results
-            searchResults.length === 0 ? /* @__PURE__ */ jsx("div", { className: cascaderEmptyStateClasses, children: resolveLocaleText(
-              "No results found",
-              notFoundText,
-              mergedLocale?.common?.emptyText
-            ) }) : /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-auto", ...getPickerListboxAria({ id: listboxId }), children: searchResults.map((item) => /* @__PURE__ */ jsx(
+            searchResults.length === 0 ? /* @__PURE__ */ jsx("div", { className: cascaderEmptyStateClasses, children: resolveLocaleText("No results found", emptyText, mergedLocale?.common?.emptyText) }) : /* @__PURE__ */ jsx("div", { className: "max-h-64 overflow-auto", ...getPickerListboxAria({ id: listboxId }), children: searchResults.map((item) => /* @__PURE__ */ jsx(
               "div",
               {
                 className: classNames(
@@ -270,7 +279,7 @@ var Cascader = (props) => {
                   disabled: item.disabled
                 }),
                 onClick: () => handleSearchResultClick(item.valuePath, item.disabled),
-                children: typeof showSearch === "object" && showSearch.render ? showSearch.render(searchQuery, item.path) : item.label
+                children: typeof searchable === "object" && searchable.render ? searchable.render(searchQuery, item.path) : item.label
               },
               item.valuePath.join(",")
             )) })

package/dist/{chunk-S4NGDDAM.mjs → chunk-MQ34GFHN.mjs}

@@ -1,15 +1,15 @@
 import {
   Select
-} from "./chunk-LUABLBKS.mjs";
+} from "./chunk-JSBWEK6D.mjs";
 import {
   Radio
-} from "./chunk-3RBRWBUG.mjs";
+} from "./chunk-IIWUQK2P.mjs";
 import {
   Empty
 } from "./chunk-NJHZQBA7.mjs";
 import {
   Checkbox
-} from "./chunk-6BOSSZM3.mjs";
+} from "./chunk-EPWAROC2.mjs";
 import {
   useTigerConfig
 } from "./chunk-QAIBQHIO.mjs";
@@ -1077,7 +1077,6 @@ function Table({
   autoVirtual = true,
   virtualHeight = 400,
   virtualItemHeight = 40,
-  autoVirtualThreshold = 1e4,
   virtualThreshold = 1e3,
   editable = false,
   editableCells,
@@ -1223,10 +1222,9 @@ function Table({
       virtual,
       autoVirtual,
       dataLength: dataSource.length,
-      threshold: virtualThreshold,
-      autoThreshold: autoVirtualThreshold
+      threshold: virtualThreshold
     }),
-    [autoVirtual, autoVirtualThreshold, dataSource.length, virtual, virtualThreshold]
+    [autoVirtual, dataSource.length, virtual, virtualThreshold]
   );
   const effectiveVirtual = virtualRecommendation.enabled;
   const [virtualScrollTop, setVirtualScrollTop] = useState2(0);
@@ -1279,7 +1277,6 @@ function Table({
       style: wrapperStyle,
       onScroll: effectiveVirtual ? (e) => setVirtualScrollTop(e.target.scrollTop) : void 0,
       "data-tiger-virtual": virtualRecommendation.enabled ? "enabled" : void 0,
-      "data-tiger-virtual-auto": virtualRecommendation.autoEnabled ? "true" : void 0,
       "data-tiger-virtual-recommended": virtualRecommendation.recommended ? "true" : void 0,
       "data-tiger-virtual-threshold": virtualRecommendation.recommended ? virtualRecommendation.threshold : void 0,
       "data-tiger-measured-row-height": measuredRowHeights[0] || void 0,

package/dist/{chunk-DEQZZKY5.mjs → chunk-NRWH5IWZ.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-34VGG7AK.mjs";
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/Input.tsx
 import { useState, useEffect, useRef, useCallback, useId } from "react";

package/dist/{chunk-FUE7IBTJ.mjs → chunk-OGG2TQDG.mjs}

@@ -29,7 +29,7 @@ var ScrollSpy = ({
   getContainer = getWindowContainer,
   className,
   style,
-  onChange,
+  onActiveKeyChange,
   onClick,
   ...rest
 }) => {
@@ -42,15 +42,15 @@ var ScrollSpy = ({
   const activeKeyString = currentActiveKey === void 0 ? "" : getScrollSpyKeyString(currentActiveKey);
   const getContainerRef = useRef(getContainer);
   getContainerRef.current = getContainer;
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
+  const onActiveKeyChangeRef = useRef(onActiveKeyChange);
+  onActiveKeyChangeRef.current = onActiveKeyChange;
   const emitActive = useCallback(
     (item, source) => {
       const nextKeyString = getScrollSpyKeyString(item.key);
       if (nextKeyString === activeKeyString) return;
       const payload = createScrollSpyPayload(item, source);
       if (!isControlled) setInnerActiveKey(item.key);
-      onChangeRef.current?.(item.key, item, payload);
+      onActiveKeyChangeRef.current?.(item.key, item, payload);
     },
     [activeKeyString, isControlled]
   );

package/dist/{chunk-MV2JQ6XQ.mjs → chunk-OL3RXYMG.mjs}

@@ -1,6 +1,6 @@
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/CheckboxGroup.tsx
 import { createContext, useContext } from "react";

package/dist/{chunk-D7UR526A.mjs → chunk-Q327ESD2.mjs}

@@ -43,9 +43,11 @@ function useMenuRootState(props) {
     popupPortal = false,
     className,
     style,
+    onSelectedKeysChange,
+    onOpenKeysChange,
     onSelect,
     onOpenChange,
-    onSearch,
+    onSearchChange,
     searchable = false,
     searchValue: controlledSearchValue,
     defaultSearchValue = "",
@@ -67,9 +69,10 @@ function useMenuRootState(props) {
       if (controlledSelectedKeys === void 0) {
         setInternalSelectedKeys(newSelectedKeys);
       }
+      onSelectedKeysChange?.(newSelectedKeys);
       onSelect?.(key, { selectedKeys: newSelectedKeys });
     },
-    [controlledSelectedKeys, selectedKeys, onSelect]
+    [controlledSelectedKeys, selectedKeys, onSelectedKeysChange, onSelect]
   );
   const handleOpenChange = useCallback(
     (key) => {
@@ -78,9 +81,10 @@ function useMenuRootState(props) {
       if (controlledOpenKeys === void 0) {
         setInternalOpenKeys(newOpenKeys);
       }
+      onOpenKeysChange?.(newOpenKeys);
       onOpenChange?.(key, { openKeys: newOpenKeys });
     },
-    [openKeys, multiple, controlledOpenKeys, onOpenChange]
+    [openKeys, multiple, controlledOpenKeys, onOpenKeysChange, onOpenChange]
   );
   const handleSearchInput = useCallback(
     (event) => {
@@ -88,9 +92,9 @@ function useMenuRootState(props) {
       if (controlledSearchValue === void 0) {
         setInternalSearchValue(value);
       }
-      onSearch?.(value);
+      onSearchChange?.(value);
     },
-    [controlledSearchValue, onSearch]
+    [controlledSearchValue, onSearchChange]
   );
   const menuClasses = useMemo(() => {
     return classNames(getMenuClasses(resolvedMode, theme, collapsed), className);

package/dist/{chunk-4V5RL25M.mjs → chunk-Q5JTIICP.mjs}

@@ -4,12 +4,16 @@ import {
   classNames,
   createBackTopVisibilityController,
   scrollToTop,
+  backTopBaseClasses,
   backTopButtonClasses,
   backTopContainerClasses,
   backTopHiddenClasses,
   backTopVisibleClasses,
   backTopIconPath,
-  isBrowser
+  getViewportOffsetStyle,
+  isBrowser,
+  viewportFloatingBaseClasses,
+  viewportPlacementClasses
 } from "@expcat/tigercat-core";
 import { jsx } from "react/jsx-runtime";
 var DefaultIcon = () => /* @__PURE__ */ jsx(
@@ -30,9 +34,13 @@ var BackTop = ({
   visibilityHeight = 400,
   target = getDefaultTarget,
   duration = 450,
+  position = "auto",
+  placement = "bottom-right",
+  offset,
   onClick,
   children,
   className,
+  style,
   "aria-label": ariaLabel = "Back to top",
   ...props
 }) => {
@@ -64,18 +72,27 @@ var BackTop = ({
     [target, duration, onClick]
   );
   const buttonClasses = useMemo(() => {
-    const positionClasses = !targetElement || targetElement === window ? backTopButtonClasses : backTopContainerClasses;
+    const positionClasses = position === "fixed" ? classNames(
+      viewportFloatingBaseClasses,
+      viewportPlacementClasses[placement],
+      backTopBaseClasses
+    ) : position === "sticky" ? backTopContainerClasses : !targetElement || targetElement === window ? backTopButtonClasses : backTopContainerClasses;
     return classNames(
       positionClasses,
       visible ? backTopVisibleClasses : backTopHiddenClasses,
       className
     );
-  }, [targetElement, visible, className]);
+  }, [position, placement, targetElement, visible, className]);
+  const buttonStyle = useMemo(
+    () => position === "fixed" ? { ...getViewportOffsetStyle(placement, offset), ...style } : style,
+    [position, placement, offset, style]
+  );
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       className: buttonClasses,
+      style: buttonStyle,
       "aria-label": ariaLabel,
       onClick: handleClick,
       ...props,

package/dist/{chunk-RYHM75MP.mjs → chunk-QWUDJC6K.mjs}

@@ -1,6 +1,6 @@
 import {
   usePopup
-} from "./chunk-C44WSDEY.mjs";
+} from "./chunk-S7IB6YST.mjs";
 import {
   renderBodyPortal
 } from "./chunk-SEWNVIHH.mjs";

package/dist/{chunk-IXAPFTTD.mjs → chunk-R67HTROL.mjs}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-Y5X3G2LD.mjs";
 import {
   Input
-} from "./chunk-DEQZZKY5.mjs";
+} from "./chunk-NRWH5IWZ.mjs";
 import {
   Empty
 } from "./chunk-NJHZQBA7.mjs";
 import {
   Textarea
-} from "./chunk-D4X3NBAI.mjs";
+} from "./chunk-UYJJLHVA.mjs";
 import {
   Button
 } from "./chunk-5TE7KLE5.mjs";

package/dist/{chunk-ATSI3UKS.mjs → chunk-RCUL6RZU.mjs}

@@ -1,6 +1,6 @@
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/MarkdownEditor.tsx
 import { useCallback, useMemo, useRef } from "react";

package/dist/{chunk-C44WSDEY.mjs → chunk-S7IB6YST.mjs}

@@ -111,7 +111,8 @@ function usePopup(options) {
     y,
     actualPlacement,
     floatingStyles,
-    triggerHandlers
+    triggerHandlers,
+    closeAndRestoreFocus
   };
 }
 

package/dist/{chunk-WYPTAUCX.mjs → chunk-SHJNDDYK.mjs}

@@ -1,6 +1,6 @@
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/RichTextEditor.tsx
 import { useRef, useState, useCallback, useEffect, useMemo } from "react";

package/dist/{chunk-WOEX4S6J.mjs → chunk-SNE3E22Q.mjs}

@@ -1,15 +1,9 @@
 import {
   useChartInteraction
-} from "./chunk-6QML6T3Y.mjs";
-import {
-  ChartLegend
-} from "./chunk-ZG2W4HS5.mjs";
-import {
-  ChartSeries
-} from "./chunk-SDLMB34Y.mjs";
+} from "./chunk-DNOPEJ5I.mjs";
 import {
   ChartTooltip
-} from "./chunk-O6YIPNXX.mjs";
+} from "./chunk-YORCCCQX.mjs";
 import {
   ChartAxis
 } from "./chunk-RQSQXQN6.mjs";
@@ -19,6 +13,12 @@ import {
 import {
   ChartGrid
 } from "./chunk-677VSTPW.mjs";
+import {
+  ChartLegend
+} from "./chunk-ZG2W4HS5.mjs";
+import {
+  ChartSeries
+} from "./chunk-SDLMB34Y.mjs";
 
 // src/components/BarChart.tsx
 import { useId, useMemo } from "react";
@@ -339,7 +339,7 @@ var BarChart = ({
     ChartTooltip,
     {
       content: tooltipContent,
-      visible: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
+      open: hoverable && resolvedHoveredIndex !== null && tooltipContent !== "",
       x: tooltipPosition.x,
       y: tooltipPosition.y
     }

package/dist/{chunk-SI3P3V75.mjs → chunk-TJDZFN2Z.mjs}

@@ -14,6 +14,7 @@ import {
 // src/components/Modal.tsx
 import React, { useEffect, useMemo, useCallback, useRef, useId } from "react";
 import {
+  ANIMATION_DURATION_MS,
   captureActiveElement,
   classNames,
   focusFirst,
@@ -58,6 +59,7 @@ var Modal = ({
   footer,
   onOpenChange,
   onClose,
+  onAfterClose,
   onCancel,
   onOk,
   closeAriaLabel,
@@ -78,7 +80,6 @@ var Modal = ({
   const [hasBeenOpened, setHasBeenOpened] = React.useState(open);
   const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
   const prevOpenRef = useRef(open);
-  const suppressNextCloseRef = useRef(false);
   useEffect(() => {
     if (open) {
       setHasBeenOpened(true);
@@ -109,25 +110,23 @@ var Modal = ({
   );
   useEffect(() => {
     if (prevOpenRef.current && !open) {
-      if (suppressNextCloseRef.current) {
-        suppressNextCloseRef.current = false;
-      } else {
-        onClose?.();
-      }
+      const timer = window.setTimeout(() => {
+        onAfterClose?.();
+      }, ANIMATION_DURATION_MS);
+      prevOpenRef.current = open;
+      return () => window.clearTimeout(timer);
     }
     prevOpenRef.current = open;
-  }, [open, onClose]);
+  }, [open, onAfterClose]);
   const shouldRender = destroyOnClose ? open : hasBeenOpened;
   const handleClose = useCallback(() => {
     onCancel?.();
     onOpenChange?.(false);
-    suppressNextCloseRef.current = true;
     onClose?.();
   }, [onCancel, onOpenChange, onClose]);
   const handleOk = useCallback(() => {
     onOk?.();
     onOpenChange?.(false);
-    suppressNextCloseRef.current = true;
     onClose?.();
   }, [onOk, onOpenChange, onClose]);
   const handleMaskClick = useCallback(

package/dist/{chunk-D4X3NBAI.mjs → chunk-UYJJLHVA.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-34VGG7AK.mjs";
 import {
   useControlledState
-} from "./chunk-WHYHLUXG.mjs";
+} from "./chunk-MEFARVQI.mjs";
 
 // src/components/Textarea.tsx
 import { forwardRef, useLayoutEffect, useMemo, useRef } from "react";

package/dist/{chunk-4HMMH4XS.mjs → chunk-VBGJQPPI.mjs}

@@ -1,6 +1,6 @@
 import {
   Modal
-} from "./chunk-SI3P3V75.mjs";
+} from "./chunk-TJDZFN2Z.mjs";
 import {
   ImageCropper
 } from "./chunk-T6HNFCOW.mjs";

package/dist/{chunk-WTSG7QXK.mjs → chunk-VKIGZWRK.mjs}

@@ -71,14 +71,14 @@ var Drawer = ({
   bodyClassName,
   bodyPadding,
   destroyOnClose = false,
-  destroyOnCloseAfterLeave = false,
+  deferDestroyOnClose = false,
   fullscreenOnMobile = true,
   panelClassName,
   panelStyle,
   onClose,
   onOpenChange,
   onAfterEnter,
-  onAfterLeave,
+  onAfterClose,
   closeAriaLabel,
   locale,
   labels,
@@ -100,11 +100,11 @@ var Drawer = ({
       setDeferredRendered(true);
       return;
     }
-    if (destroyOnClose && !destroyOnCloseAfterLeave) {
+    if (destroyOnClose && !deferDestroyOnClose) {
       setDeferredRendered(false);
     }
-  }, [destroyOnClose, destroyOnCloseAfterLeave, open]);
-  const shouldRender = destroyOnClose ? destroyOnCloseAfterLeave ? deferredRendered : open : hasBeenOpened;
+  }, [destroyOnClose, deferDestroyOnClose, open]);
+  const shouldRender = destroyOnClose ? deferDestroyOnClose ? deferredRendered : open : hasBeenOpened;
   const handleClose = useCallback(() => {
     onOpenChange?.(false);
     onClose?.();
@@ -127,14 +127,14 @@ var Drawer = ({
       if (open) {
         onAfterEnter?.();
       } else {
-        onAfterLeave?.();
-        if (destroyOnClose && destroyOnCloseAfterLeave) {
+        onAfterClose?.();
+        if (destroyOnClose && deferDestroyOnClose) {
           setDeferredRendered(false);
         }
       }
     }, ANIMATION_DURATION_MS);
     return () => window.clearTimeout(timer);
-  }, [destroyOnClose, destroyOnCloseAfterLeave, open, onAfterEnter, onAfterLeave]);
+  }, [destroyOnClose, deferDestroyOnClose, open, onAfterEnter, onAfterClose]);
   const reactId = useId();
   const drawerId = useMemo(() => `tiger-drawer-${reactId}`, [reactId]);
   const titleId = `${drawerId}-title`;
@@ -231,13 +231,13 @@ var Drawer = ({
   if (!shouldRender) {
     return null;
   }
-  const isLeavingBeforeDestroy = destroyOnClose && destroyOnCloseAfterLeave && !open;
+  const isClosingBeforeDestroy = destroyOnClose && deferDestroyOnClose && !open;
   const drawerContent = /* @__PURE__ */ jsxs(
     "div",
     {
       className: containerClasses,
       style: { zIndex },
-      hidden: !open && !isLeavingBeforeDestroy,
+      hidden: !open && !isClosingBeforeDestroy,
       "aria-hidden": !open ? "true" : void 0,
       "data-tiger-drawer-root": "",
       children: [

package/dist/{chunk-P2WQIVXD.mjs → chunk-WKTIDYPD.mjs}

@@ -59,6 +59,8 @@ var ImagePreview = ({
   scaleStep = 0.5,
   minScale = 0.25,
   maxScale = 5,
+  touchSwipeable = true,
+  touchSwipeThreshold = 48,
   locale,
   onOpenChange,
   onCurrentIndexChange,
@@ -80,6 +82,13 @@ var ImagePreview = ({
   const dragStartRef = useRef({ x: 0, y: 0, ox: 0, oy: 0 });
   const panRef = useRef(createPanState());
   const pinchRef = useRef(createPinchState());
+  const touchSwipeRef = useRef({
+    isTracking: false,
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0
+  });
   const resetTransform = useCallback(() => {
     setScale(1);
     setRotation(0);
@@ -87,6 +96,7 @@ var ImagePreview = ({
     setOffsetY(0);
     panRef.current = createPanState();
     pinchRef.current = createPinchState();
+    touchSwipeRef.current.isTracking = false;
   }, []);
   useEffect(() => {
     setIndex(currentIndex);
@@ -191,14 +201,28 @@ var ImagePreview = ({
     (e) => {
       if (e.touches.length === 2) {
         e.preventDefault();
+        touchSwipeRef.current.isTracking = false;
         pinchRef.current = startPinch(e.touches[0], e.touches[1], scale);
         return;
       }
       if (e.touches.length === 1) {
-        panRef.current = startPan(e.touches[0].clientX, e.touches[0].clientY, offsetX, offsetY);
+        const touch = e.touches[0];
+        if (touchSwipeable && images.length > 1 && scale === 1) {
+          touchSwipeRef.current = {
+            isTracking: true,
+            startX: touch.clientX,
+            startY: touch.clientY,
+            currentX: touch.clientX,
+            currentY: touch.clientY
+          };
+          panRef.current = createPanState();
+          return;
+        }
+        touchSwipeRef.current.isTracking = false;
+        panRef.current = startPan(touch.clientX, touch.clientY, offsetX, offsetY);
       }
     },
-    [offsetX, offsetY, scale]
+    [images.length, offsetX, offsetY, scale, touchSwipeable]
   );
   const handleTouchMove = useCallback(
     (e) => {
@@ -213,14 +237,44 @@ var ImagePreview = ({
         const next = movePan(panRef.current, e.touches[0].clientX, e.touches[0].clientY);
         setOffsetX(next.translateX);
         setOffsetY(next.translateY);
+        return;
+      }
+      if (e.touches.length === 1 && touchSwipeRef.current.isTracking) {
+        const touch = e.touches[0];
+        touchSwipeRef.current.currentX = touch.clientX;
+        touchSwipeRef.current.currentY = touch.clientY;
+        const deltaX = touch.clientX - touchSwipeRef.current.startX;
+        const deltaY = touch.clientY - touchSwipeRef.current.startY;
+        if (Math.abs(deltaX) > 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
+          e.preventDefault();
+        }
       }
     },
     [maxScale, minScale, onScaleChange]
   );
-  const handleTouchEnd = useCallback(() => {
-    panRef.current = createPanState();
-    pinchRef.current = createPinchState();
-  }, []);
+  const handleTouchEnd = useCallback(
+    (e) => {
+      if (touchSwipeRef.current.isTracking) {
+        const endedTouch = e?.changedTouches?.[0];
+        const currentX = endedTouch?.clientX ?? touchSwipeRef.current.currentX;
+        const currentY = endedTouch?.clientY ?? touchSwipeRef.current.currentY;
+        const deltaX = currentX - touchSwipeRef.current.startX;
+        const deltaY = currentY - touchSwipeRef.current.startY;
+        const threshold = Math.max(0, touchSwipeThreshold);
+        if (Math.abs(deltaX) >= threshold && Math.abs(deltaX) > Math.abs(deltaY) * 1.2) {
+          if (deltaX < 0) {
+            handleNext();
+          } else {
+            handlePrev();
+          }
+        }
+      }
+      touchSwipeRef.current.isTracking = false;
+      panRef.current = createPanState();
+      pinchRef.current = createPinchState();
+    },
+    [handleNext, handlePrev, touchSwipeThreshold]
+  );
   const handleMaskClick = useCallback(
     (e) => {
       if (maskClosable && e.target === e.currentTarget) {