@papernote/ui 1.10.7 → 1.10.9

package/dist/components/SwipeableListItem.d.ts

@@ -27,7 +27,7 @@ export interface SwipeableListItemProps {
     rightActions?: SwipeListAction[];
     /** Width per action button in pixels (default: 72) */
     actionWidth?: number;
-    /** Enable full swipe to trigger first action (default: false) */
+    /** Enable full swipe to trigger first action (default: true) */
     fullSwipe?: boolean;
     /** Full swipe threshold as percentage of container width (default: 0.5) */
     fullSwipeThreshold?: number;

package/dist/components/SwipeableListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeableListItem.d.ts","sourceRoot":"","sources":["../../src/components/SwipeableListItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,wDAAwD;IACxD,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9E,6BAA6B;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9D;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,WAAgB,EAChB,YAAiB,EACjB,WAAgB,EAChB,SAAiB,EACjB,kBAAwB,EACxB,QAAgB,EAChB,SAAc,EACd,aAAa,GACd,EAAE,sBAAsB,2CAsZxB;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"SwipeableListItem.d.ts","sourceRoot":"","sources":["../../src/components/SwipeableListItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,wDAAwD;IACxD,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9E,6BAA6B;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CAC9D;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,WAAgB,EAChB,YAAiB,EACjB,WAAgB,EAChB,SAAgB,EAChB,kBAAwB,EACxB,QAAgB,EAChB,SAAc,EACd,aAAa,GACd,EAAE,sBAAsB,2CAgexB;AAED,eAAe,iBAAiB,CAAC"}

package/dist/index.d.ts

@@ -3032,7 +3032,7 @@ interface SwipeableListItemProps {
     rightActions?: SwipeListAction[];
     /** Width per action button in pixels (default: 72) */
     actionWidth?: number;
-    /** Enable full swipe to trigger first action (default: false) */
+    /** Enable full swipe to trigger first action (default: true) */
     fullSwipe?: boolean;
     /** Full swipe threshold as percentage of container width (default: 0.5) */
     fullSwipeThreshold?: number;

package/dist/index.esm.js

@@ -8155,17 +8155,19 @@ const getColorClasses = (color) => {
  * </SwipeableListItem>
  * ```
  */
-function SwipeableListItem({ children, leftActions = [], rightActions = [], actionWidth = 72, fullSwipe = false, fullSwipeThreshold = 0.5, disabled = false, className = '', onSwipeChange, }) {
+function SwipeableListItem({ children, leftActions = [], rightActions = [], actionWidth = 72, fullSwipe = true, fullSwipeThreshold = 0.5, disabled = false, className = '', onSwipeChange, }) {
     const containerRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
     const [offsetX, setOffsetX] = useState(0);
     const [activeDirection, setActiveDirection] = useState(null);
     const [loadingActionId, setLoadingActionId] = useState(null);
     const [focusedActionIndex, setFocusedActionIndex] = useState(-1);
+    const [isCommitted, setIsCommitted] = useState(false); // Tracks if past full-swipe threshold
     const startX = useRef(0);
     const startY = useRef(0);
     const startTime = useRef(0);
     const isHorizontalSwipe = useRef(null);
+    const wasCommitted = useRef(false); // Track previous committed state for haptic
     // Calculate total widths
     const leftActionsWidth = leftActions.length * actionWidth;
     const rightActionsWidth = rightActions.length * actionWidth;
@@ -8185,6 +8187,8 @@ function SwipeableListItem({ children, leftActions = [], rightActions = [], acti
         setOffsetX(0);
         setActiveDirection(null);
         setFocusedActionIndex(-1);
+        setIsCommitted(false);
+        wasCommitted.current = false;
         onSwipeChange?.(null);
     }, [onSwipeChange]);
     // Execute action with async support
@@ -8227,6 +8231,7 @@ function SwipeableListItem({ children, leftActions = [], rightActions = [], acti
         if (isHorizontalSwipe.current !== true)
             return;
         let newOffset = deltaX;
+        const containerWidth = containerRef.current?.offsetWidth || 300;
         // Swiping left (reveals left actions on right side)
         if (deltaX < 0) {
             if (leftActions.length === 0) {
@@ -8234,7 +8239,7 @@ function SwipeableListItem({ children, leftActions = [], rightActions = [], acti
             }
             else {
                 const maxSwipe = fullSwipe
-                    ? -(containerRef.current?.offsetWidth || 300)
+                    ? -containerWidth
                     : -leftActionsWidth;
                 newOffset = Math.max(maxSwipe, deltaX);
                 // Apply resistance past the action buttons
@@ -8255,7 +8260,7 @@ function SwipeableListItem({ children, leftActions = [], rightActions = [], acti
             }
             else {
                 const maxSwipe = fullSwipe
-                    ? (containerRef.current?.offsetWidth || 300)
+                    ? containerWidth
                     : rightActionsWidth;
                 newOffset = Math.min(maxSwipe, deltaX);
                 // Apply resistance past the action buttons
@@ -8269,8 +8274,19 @@ function SwipeableListItem({ children, leftActions = [], rightActions = [], acti
                 onSwipeChange?.('right');
             }
         }
+        // Check if we've crossed the full-swipe threshold
+        if (fullSwipe) {
+            const swipePercentage = Math.abs(newOffset) / containerWidth;
+            const nowCommitted = swipePercentage >= fullSwipeThreshold;
+            // Haptic feedback when crossing threshold (both directions)
+            if (nowCommitted !== wasCommitted.current) {
+                triggerHaptic(nowCommitted ? 'heavy' : 'light');
+                wasCommitted.current = nowCommitted;
+            }
+            setIsCommitted(nowCommitted);
+        }
         setOffsetX(newOffset);
-    }, [isDragging, disabled, loadingActionId, leftActions.length, rightActions.length, leftActionsWidth, rightActionsWidth, fullSwipe, activeDirection, onSwipeChange]);
+    }, [isDragging, disabled, loadingActionId, leftActions.length, rightActions.length, leftActionsWidth, rightActionsWidth, fullSwipe, fullSwipeThreshold, activeDirection, onSwipeChange, triggerHaptic]);
     // Handle drag end
     const handleDragEnd = useCallback(() => {
         if (!isDragging)
@@ -8278,10 +8294,21 @@ function SwipeableListItem({ children, leftActions = [], rightActions = [], acti
         setIsDragging(false);
         const velocity = Math.abs(offsetX) / (Date.now() - startTime.current);
         const containerWidth = containerRef.current?.offsetWidth || 300;
-        // Check for full swipe trigger
-        if (fullSwipe) {
+        // Check for full swipe trigger - use isCommitted state for more reliable detection
+        if (fullSwipe && isCommitted) {
+            if (offsetX < 0 && leftActions.length > 0) {
+                executeAction(leftActions[0]);
+                return;
+            }
+            else if (offsetX > 0 && rightActions.length > 0) {
+                executeAction(rightActions[0]);
+                return;
+            }
+        }
+        // Also check velocity-based trigger for quick swipes
+        if (fullSwipe && velocity > 0.5) {
             const swipePercentage = Math.abs(offsetX) / containerWidth;
-            if (swipePercentage >= fullSwipeThreshold || velocity > 0.5) {
+            if (swipePercentage >= fullSwipeThreshold * 0.5) { // Lower threshold for fast swipes
                 if (offsetX < 0 && leftActions.length > 0) {
                     executeAction(leftActions[0]);
                     return;
@@ -8292,6 +8319,9 @@ function SwipeableListItem({ children, leftActions = [], rightActions = [], acti
                 }
             }
         }
+        // Reset committed state
+        setIsCommitted(false);
+        wasCommitted.current = false;
         // Snap to open or closed position
         const threshold = actionWidth * 0.5;
         if (Math.abs(offsetX) >= threshold || velocity > 0.3) {
@@ -8313,7 +8343,7 @@ function SwipeableListItem({ children, leftActions = [], rightActions = [], acti
         else {
             resetPosition();
         }
-    }, [isDragging, offsetX, fullSwipe, fullSwipeThreshold, leftActions, rightActions, leftActionsWidth, rightActionsWidth, actionWidth, executeAction, resetPosition, onSwipeChange]);
+    }, [isDragging, offsetX, fullSwipe, fullSwipeThreshold, isCommitted, leftActions, rightActions, leftActionsWidth, rightActionsWidth, actionWidth, executeAction, resetPosition, onSwipeChange]);
     // Touch event handlers
     const handleTouchStart = (e) => {
         handleDragStart(e.touches[0].clientX, e.touches[0].clientY);
@@ -8454,7 +8484,24 @@ function SwipeableListItem({ children, leftActions = [], rightActions = [], acti
     const fullSwipeProgress = fullSwipe
         ? Math.min(1, Math.abs(offsetX) / ((containerRef.current?.offsetWidth || 300) * fullSwipeThreshold))
         : 0;
-    return (jsxs("div", { ref: containerRef, className: `relative overflow-hidden ${className}`, children: [rightActions.length > 0 && (jsx("div", { className: "absolute left-0 top-0 bottom-0 flex shadow-inner", style: { width: rightActionsWidth }, children: rightActions.map((action, index) => renderActionButton(action, index, 'right')) })), leftActions.length > 0 && (jsx("div", { className: "absolute right-0 top-0 bottom-0 flex shadow-inner", style: { width: leftActionsWidth }, children: leftActions.map((action, index) => renderActionButton(action, index, 'left')) })), fullSwipe && fullSwipeProgress > 0.3 && (jsx("div", { className: `
+    return (jsxs("div", { ref: containerRef, className: `relative overflow-hidden ${className}`, children: [rightActions.length > 0 && (jsx("div", { className: "absolute left-0 top-0 bottom-0 flex shadow-inner", style: { width: rightActionsWidth }, children: rightActions.map((action, index) => renderActionButton(action, index, 'right')) })), leftActions.length > 0 && (jsx("div", { className: "absolute right-0 top-0 bottom-0 flex shadow-inner", style: { width: leftActionsWidth }, children: leftActions.map((action, index) => renderActionButton(action, index, 'left')) })), fullSwipe && isCommitted && isDragging && (jsxs("div", { className: `
+            absolute inset-0 z-10 flex items-center
+            ${offsetX > 0 ? 'justify-start pl-6' : 'justify-end pr-6'}
+            ${offsetX > 0 && rightActions.length > 0
+                    ? getColorClasses(rightActions[0].color).bg
+                    : offsetX < 0 && leftActions.length > 0
+                        ? getColorClasses(leftActions[0].color).bg
+                        : ''}
+            transition-opacity duration-150
+          `, children: [offsetX > 0 && rightActions.length > 0 && (() => {
+                        const action = rightActions[0];
+                        const IconComponent = action.icon;
+                        return (jsxs("div", { className: "flex items-center gap-3 text-white animate-pulse", children: [jsx(IconComponent, { className: "h-8 w-8" }), jsxs("span", { className: "text-lg font-semibold uppercase tracking-wide", children: ["Release to ", action.label] })] }));
+                    })(), offsetX < 0 && leftActions.length > 0 && (() => {
+                        const action = leftActions[0];
+                        const IconComponent = action.icon;
+                        return (jsxs("div", { className: "flex items-center gap-3 text-white animate-pulse", children: [jsxs("span", { className: "text-lg font-semibold uppercase tracking-wide", children: ["Release to ", action.label] }), jsx(IconComponent, { className: "h-8 w-8" })] }));
+                    })()] })), fullSwipe && fullSwipeProgress > 0.3 && !isCommitted && (jsx("div", { className: `
             absolute inset-0 pointer-events-none
             ${offsetX > 0 ? 'bg-gradient-to-r from-success-500/20 to-transparent' : 'bg-gradient-to-l from-error-500/20 to-transparent'}
           `, style: { opacity: fullSwipeProgress } })), jsx("div", { className: `