@papernote/ui 1.10.7 → 1.10.8

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,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,2CAgexB;AAED,eAAe,iBAAiB,CAAC"}

package/dist/index.esm.js

@@ -8162,10 +8162,12 @@ function SwipeableListItem({ children, leftActions = [], rightActions = [], acti
     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: `
@@ -12254,44 +12301,52 @@ function getAugmentedNamespace(n) {
  * (A1, A1:C5, ...)
  */
 
-let Collection$3 = class Collection {
+var collection;
+var hasRequiredCollection;
+
+function requireCollection () {
+	if (hasRequiredCollection) return collection;
+	hasRequiredCollection = 1;
+	class Collection {
 
-    constructor(data, refs) {
-        if (data == null && refs == null) {
-            this._data = [];
-            this._refs = [];
-        } else {
-            if (data.length !== refs.length)
-                throw Error('Collection: data length should match references length.');
-            this._data = data;
-            this._refs = refs;
-        }
-    }
+	    constructor(data, refs) {
+	        if (data == null && refs == null) {
+	            this._data = [];
+	            this._refs = [];
+	        } else {
+	            if (data.length !== refs.length)
+	                throw Error('Collection: data length should match references length.');
+	            this._data = data;
+	            this._refs = refs;
+	        }
+	    }
 
-    get data() {
-        return this._data;
-    }
+	    get data() {
+	        return this._data;
+	    }
 
-    get refs() {
-        return this._refs;
-    }
+	    get refs() {
+	        return this._refs;
+	    }
 
-    get length() {
-        return this._data.length;
-    }
+	    get length() {
+	        return this._data.length;
+	    }
 
-    /**
-     * Add data and references to this collection.
-     * @param {{}} obj - data
-     * @param {{}} ref - reference
-     */
-    add(obj, ref) {
-        this._data.push(obj);
-        this._refs.push(ref);
-    }
-};
+	    /**
+	     * Add data and references to this collection.
+	     * @param {{}} obj - data
+	     * @param {{}} ref - reference
+	     */
+	    add(obj, ref) {
+	        this._data.push(obj);
+	        this._refs.push(ref);
+	    }
+	}
 
-var collection = Collection$3;
+	collection = Collection;
+	return collection;
+}
 
 var helpers;
 var hasRequiredHelpers;
@@ -12300,7 +12355,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = collection;
+	const Collection = requireCollection();
 
 	const Types = {
 	    NUMBER: 0,
@@ -21954,7 +22009,7 @@ var engineering = EngineeringFunctions;
 
 const FormulaError$b = requireError();
 const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
-const Collection$2 = collection;
+const Collection$2 = requireCollection();
 const H$5 = FormulaHelpers$8;
 
 const ReferenceFunctions$1 = {
@@ -33582,7 +33637,7 @@ var parsing = {
 const FormulaError$4 = requireError();
 const {Address: Address$1} = requireHelpers();
 const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
-const Collection$1 = collection;
+const Collection$1 = requireCollection();
 const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
 const {NotAllInputParsedException} = require$$4;
 
@@ -34344,7 +34399,7 @@ var hooks$1 = {
 const FormulaError$2 = requireError();
 const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
 const {Prefix, Postfix, Infix, Operators} = operators;
-const Collection = collection;
+const Collection = requireCollection();
 const MAX_ROW = 1048576, MAX_COLUMN = 16384;
 
 let Utils$1 = class Utils {