@ncdai/react-swipe-actions 0.1.1 → 0.2.0

package/dist/index.d.mts

@@ -36,6 +36,12 @@ type SwipeItemProps = UseRenderComponentProps<"div", SwipeItemState> & {
     velocityFactor?: number;
     /** @defaultValue false */
     disabled?: boolean;
+    /**
+     * Fraction of the item width the drag must pass for the side's `fullSwipe`
+     * action to arm, firing on release instead of opening the item.
+     * @defaultValue 0.5
+     */
+    fullSwipeThreshold?: number;
     /**
      * Close the item on any scroll on the page.
      * @defaultValue false
@@ -43,19 +49,25 @@ type SwipeItemProps = UseRenderComponentProps<"div", SwipeItemState> & {
     closeOnScroll?: boolean;
     onOpenChange?: (state: SwipeState) => void;
 };
-declare function SwipeItem({ render, threshold, velocityFactor, disabled, closeOnScroll, onOpenChange, ...props }: SwipeItemProps): React.JSX.Element;
+declare function SwipeItem({ render, threshold, velocityFactor, fullSwipeThreshold, disabled, closeOnScroll, onOpenChange, ...props }: SwipeItemProps): React.JSX.Element;
 type SwipeActionsProps = UseRenderComponentProps<"div"> & {
     side: SwipeSide;
 };
-declare function SwipeActions({ render, side, ...props }: SwipeActionsProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare function SwipeActions({ render, side, ...props }: SwipeActionsProps): React.JSX.Element;
 type SwipeActionProps = UseRenderComponentProps<"button"> & {
     /**
      * Close the item once the click handler has run.
      * @defaultValue true
      */
     closeOnClick?: boolean;
+    /**
+     * Run this action when the item is dragged past `fullSwipeThreshold`, the way
+     * Mail does on iOS. One action per side; it takes over the strip once armed.
+     * @defaultValue false
+     */
+    fullSwipe?: boolean;
 };
-declare function SwipeAction({ render, closeOnClick, ...props }: SwipeActionProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare function SwipeAction({ render, closeOnClick, fullSwipe, ...props }: SwipeActionProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 type SwipeContentProps = HTMLMotionProps<"div">;
 declare function SwipeContent({ style, ...props }: SwipeContentProps): React.JSX.Element;
 

package/dist/index.d.ts

@@ -36,6 +36,12 @@ type SwipeItemProps = UseRenderComponentProps<"div", SwipeItemState> & {
     velocityFactor?: number;
     /** @defaultValue false */
     disabled?: boolean;
+    /**
+     * Fraction of the item width the drag must pass for the side's `fullSwipe`
+     * action to arm, firing on release instead of opening the item.
+     * @defaultValue 0.5
+     */
+    fullSwipeThreshold?: number;
     /**
      * Close the item on any scroll on the page.
      * @defaultValue false
@@ -43,19 +49,25 @@ type SwipeItemProps = UseRenderComponentProps<"div", SwipeItemState> & {
     closeOnScroll?: boolean;
     onOpenChange?: (state: SwipeState) => void;
 };
-declare function SwipeItem({ render, threshold, velocityFactor, disabled, closeOnScroll, onOpenChange, ...props }: SwipeItemProps): React.JSX.Element;
+declare function SwipeItem({ render, threshold, velocityFactor, fullSwipeThreshold, disabled, closeOnScroll, onOpenChange, ...props }: SwipeItemProps): React.JSX.Element;
 type SwipeActionsProps = UseRenderComponentProps<"div"> & {
     side: SwipeSide;
 };
-declare function SwipeActions({ render, side, ...props }: SwipeActionsProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare function SwipeActions({ render, side, ...props }: SwipeActionsProps): React.JSX.Element;
 type SwipeActionProps = UseRenderComponentProps<"button"> & {
     /**
      * Close the item once the click handler has run.
      * @defaultValue true
      */
     closeOnClick?: boolean;
+    /**
+     * Run this action when the item is dragged past `fullSwipeThreshold`, the way
+     * Mail does on iOS. One action per side; it takes over the strip once armed.
+     * @defaultValue false
+     */
+    fullSwipe?: boolean;
 };
-declare function SwipeAction({ render, closeOnClick, ...props }: SwipeActionProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+declare function SwipeAction({ render, closeOnClick, fullSwipe, ...props }: SwipeActionProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 type SwipeContentProps = HTMLMotionProps<"div">;
 declare function SwipeContent({ style, ...props }: SwipeContentProps): React.JSX.Element;
 

package/dist/index.js

@@ -1 +1 @@
-"use strict";"use client";var pe=Object.create;var D=Object.defineProperty,ue=Object.defineProperties,fe=Object.getOwnPropertyDescriptor,Se=Object.getOwnPropertyDescriptors,Re=Object.getOwnPropertyNames,M=Object.getOwnPropertySymbols,we=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable;var B=(t,e,n)=>e in t?D(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,w=(t,e)=>{for(var n in e||(e={}))W.call(e,n)&&B(t,n,e[n]);if(M)for(var n of M(e))F.call(e,n)&&B(t,n,e[n]);return t},y=(t,e)=>ue(t,Se(e));var E=(t,e)=>{var n={};for(var o in t)W.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(t!=null&&M)for(var o of M(t))e.indexOf(o)<0&&F.call(t,o)&&(n[o]=t[o]);return n};var me=(t,e)=>{for(var n in e)D(t,n,{get:e[n],enumerable:!0})},Z=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of Re(e))!W.call(t,r)&&r!==n&&D(t,r,{get:()=>e[r],enumerable:!(o=fe(e,r))||o.enumerable});return t};var $=(t,e,n)=>(n=t!=null?pe(we(t)):{},Z(e||!t||!t.__esModule?D(n,"default",{value:t,enumerable:!0}):n,t)),ge=t=>Z(D({},"__esModule",{value:!0}),t);var xe={};me(xe,{SwipeAction:()=>oe,SwipeActions:()=>ne,SwipeContent:()=>re,SwipeItem:()=>te,SwipeRoot:()=>X});module.exports=ge(xe);var s=$(require("react")),v=require("motion/react");var h=$(require("react"));function A({defaultTagName:t,props:e,render:n,state:o={},stateAttributesMapping:r}){let i=P(ye(o,r),e);if(!n)return h.createElement(t,i);if(typeof n=="function")return n(i,o);if(!h.isValidElement(n))return null;let c=n.props,f=P(i,c),l=y(w({},f),{ref:q(i.ref,c.ref)});return h.cloneElement(n,l)}function P(...t){let e={};for(let n of t){if(!n)continue;let o=n;for(let r of Object.keys(o)){let i=o[r];if(i===void 0)continue;let c=e[r];r==="className"?e[r]=[c,i].filter(Boolean).join(" "):r==="style"?e[r]=w(w({},c),i):r==="ref"?e[r]=q(c,i):Ee(r)&&typeof c=="function"&&typeof i=="function"?e[r]=ve(i,c):e[r]=i}}return e}function ye(t,e){var o;let n={};for(let r of Object.keys(t)){let i=t[r],c=(o=e==null?void 0:e[r])==null?void 0:o.call(e,i);if(c){Object.assign(n,c);continue}if(r==="slot"){n["data-slot"]=i;continue}let f=`data-${String(r).replace(/[A-Z]/g,l=>`-${l.toLowerCase()}`)}`;typeof i=="boolean"?n[f]=i?"":void 0:i!=null&&(n[f]=String(i))}return n}function ve(t,e){return function(o){t(o),o.defaultPrevented||e(o)}}function Ee(t){return/^on[A-Z]/.test(t)}function q(...t){let e=t.filter(Boolean);if(e.length!==0)return n=>{for(let o of e)typeof o=="function"?o(n):o&&(o.current=n)}}var L=require("react/jsx-runtime"),Pe={position:"relative",isolation:"isolate",overflow:"clip"},Te={position:"absolute",top:0,bottom:0,zIndex:0,display:"flex"},Ce={position:"relative",zIndex:1},J={type:"spring",stiffness:500,damping:45,mass:.8},be=y(w({},J),{damping:36}),he=4,Q=s.createContext(null);function X(n){var o=n,{render:t}=o,e=E(o,["render"]);let r=s.useRef(new Map),i=s.useMemo(()=>({register(f,l){return r.current.set(f,l),()=>{r.current.delete(f)}},notifyOpen(f){for(let[l,p]of r.current)l!==f&&p()}}),[]),c=A({defaultTagName:"div",render:t,props:P({"data-slot":"swipe-root"},e)});return(0,L.jsx)(Q.Provider,{value:i,children:c})}var ee=s.createContext(null);function N(){let t=s.useContext(ee);if(!t)throw new Error("Swipe parts must be used within SwipeItem");return t}function te(f){var l=f,{render:t,threshold:e=.5,velocityFactor:n=.2,disabled:o=!1,closeOnScroll:r=!1,onOpenChange:i}=l,c=E(l,["render","threshold","velocityFactor","disabled","closeOnScroll","onOpenChange"]);let p=s.useId(),S=s.useContext(Q),U=(0,v.useReducedMotion)(),O=s.useRef(null),[u,se]=s.useState({left:0,right:0}),[T,ie]=s.useState("closed"),[I,V]=s.useState(!1),C=s.useRef("closed"),x=s.useRef(!1),m=(0,v.useMotionValue)(0),_=s.useCallback((a,d)=>{se(R=>R[a]===d?R:y(w({},R),{[a]:d}))},[]),g=s.useCallback((a,d)=>{let R=a==="left"?u.left:a==="right"?-u.right:0;(0,v.animate)(m,R,U?{duration:0}:d===void 0?J:y(w({},be),{velocity:d})),a!=="closed"&&(S==null||S.notifyOpen(p)),C.current!==a&&(C.current=a,ie(a),i==null||i(a))},[u,m,U,S,p,i]),b=s.useCallback(()=>g("closed"),[g]),k=s.useRef(()=>{});s.useEffect(()=>{k.current=b},[b]),s.useEffect(()=>S==null?void 0:S.register(p,()=>k.current()),[S,p]),s.useEffect(()=>{C.current==="left"&&m.set(u.left),C.current==="right"&&m.set(-u.right)},[u,m]);let K=s.useCallback(()=>{x.current=!1,V(!0),S==null||S.notifyOpen(p)},[S,p]),j=s.useCallback((a,d)=>{Math.abs(d.offset.x)>he&&(x.current=!0)},[]),G=s.useCallback((a,d)=>{V(!1);let R=m.get()+d.velocity.x*n;u.right>0&&R<=-u.right*e?g("right",d.velocity.x):u.left>0&&R>=u.left*e?g("left",d.velocity.x):g("closed",d.velocity.x)},[m,n,u,e,g]),z=s.useCallback(a=>{if(!(!x.current&&C.current==="closed")){if(a.preventDefault(),a.stopPropagation(),x.current){x.current=!1;return}b()}},[b]);s.useEffect(()=>{if(T==="closed")return;let a=H=>{var Y;(Y=O.current)!=null&&Y.contains(H.target)||k.current()},d=H=>{H.key==="Escape"&&k.current()},R=()=>k.current();return document.addEventListener("pointerdown",a,!0),document.addEventListener("keydown",d),r&&window.addEventListener("scroll",R,!0),()=>{document.removeEventListener("pointerdown",a,!0),document.removeEventListener("keydown",d),r&&window.removeEventListener("scroll",R,!0)}},[T,r]);let ae=s.useCallback(a=>{if(o||a.key!=="ArrowLeft"&&a.key!=="ArrowRight")return;let[d,R]=a.key==="ArrowLeft"?["left","right"]:["right","left"];if(C.current===d)g("closed");else if(u[R]>0)g(R);else return;a.preventDefault()},[o,u,g]),ce=s.useMemo(()=>({state:T,disabled:o,dragging:I}),[T,o,I]),de=s.useMemo(()=>({state:T,disabled:o,dragging:I,x:m,leftWidth:u.left,rightWidth:u.right,setStripWidth:_,close:b,onDragStart:K,onDrag:j,onDragEnd:G,onClickCapture:z}),[T,o,I,m,u,_,b,K,j,G,z]),le=A({defaultTagName:"div",render:t,state:ce,props:P({"data-slot":"swipe-item",ref:O,style:Pe,onKeyDown:ae},c)});return(0,L.jsx)(ee.Provider,{value:de,children:le})}function ne(o){var r=o,{render:t,side:e}=r,n=E(r,["render","side"]);let{state:i,setStripWidth:c}=N(),f=s.useRef(null);return s.useEffect(()=>{let l=f.current;if(!l)return;let p=new ResizeObserver(()=>c(e,l.offsetWidth));return p.observe(l),()=>{p.disconnect(),c(e,0)}},[e,c]),A({defaultTagName:"div",render:t,props:P({"data-slot":"swipe-actions","data-side":e,ref:f,style:y(w({},Te),{[e]:0}),inert:i!==e},n)})}function oe(o){var r=o,{render:t,closeOnClick:e=!0}=r,n=E(r,["render","closeOnClick"]);let{close:i}=N();return A({defaultTagName:"button",render:t,props:P({"data-slot":"swipe-action",type:"button",onClick:()=>{e&&i()}},n)})}function re(n){var o=n,{style:t}=o,e=E(o,["style"]);let S=N(),{x:r,disabled:i,dragging:c,leftWidth:f,rightWidth:l}=S,p=E(S,["x","disabled","dragging","leftWidth","rightWidth"]);return(0,L.jsx)(v.motion.div,y(w({"data-slot":"swipe-content"},e),{"data-dragging":c||void 0,style:y(w(w({},Ce),t),{x:r}),drag:i?!1:"x",dragConstraints:{left:-l,right:f},dragElastic:.2,dragMomentum:!1,onDragStart:p.onDragStart,onDrag:p.onDrag,onDragEnd:p.onDragEnd,onClickCapture:p.onClickCapture}))}0&&(module.exports={SwipeAction,SwipeActions,SwipeContent,SwipeItem,SwipeRoot});
+"use strict";"use client";var Pe=Object.create;var F=Object.defineProperty,Te=Object.defineProperties,xe=Object.getOwnPropertyDescriptor,ke=Object.getOwnPropertyDescriptors,Ae=Object.getOwnPropertyNames,B=Object.getOwnPropertySymbols,De=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty,se=Object.prototype.propertyIsEnumerable;var ie=(t,e,n)=>e in t?F(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,g=(t,e)=>{for(var n in e||(e={}))Y.call(e,n)&&ie(t,n,e[n]);if(B)for(var n of B(e))se.call(e,n)&&ie(t,n,e[n]);return t},C=(t,e)=>Te(t,ke(e));var A=(t,e)=>{var n={};for(var r in t)Y.call(t,r)&&e.indexOf(r)<0&&(n[r]=t[r]);if(t!=null&&B)for(var r of B(t))e.indexOf(r)<0&&se.call(t,r)&&(n[r]=t[r]);return n};var Me=(t,e)=>{for(var n in e)F(t,n,{get:e[n],enumerable:!0})},ae=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Ae(e))!Y.call(t,i)&&i!==n&&F(t,i,{get:()=>e[i],enumerable:!(r=xe(e,i))||r.enumerable});return t};var ce=(t,e,n)=>(n=t!=null?Pe(De(t)):{},ae(e||!t||!t.__esModule?F(n,"default",{value:t,enumerable:!0}):n,t)),We=t=>ae(F({},"__esModule",{value:!0}),t);var Ke={};Me(Ke,{SwipeAction:()=>ge,SwipeActions:()=>me,SwipeContent:()=>ye,SwipeItem:()=>we,SwipeRoot:()=>fe});module.exports=We(Ke);var o=ce(require("react")),E=require("motion/react");var O=ce(require("react"));function K({defaultTagName:t,props:e,render:n,state:r={},stateAttributesMapping:i}){let a=D(Ie(r,i),e);if(!n)return O.createElement(t,a);if(typeof n=="function")return n(a,r);if(!O.isValidElement(n))return null;let l=n.props,S=D(a,l),R=C(g({},S),{ref:le(a.ref,l.ref)});return O.cloneElement(n,R)}function D(...t){let e={};for(let n of t){if(!n)continue;let r=n;for(let i of Object.keys(r)){let a=r[i];if(a===void 0)continue;let l=e[i];i==="className"?e[i]=[l,a].filter(Boolean).join(" "):i==="style"?e[i]=g(g({},l),a):i==="ref"?e[i]=le(l,a):He(i)&&typeof l=="function"&&typeof a=="function"?e[i]=Le(a,l):e[i]=a}}return e}function Ie(t,e){var r;let n={};for(let i of Object.keys(t)){let a=t[i],l=(r=e==null?void 0:e[i])==null?void 0:r.call(e,a);if(l){Object.assign(n,l);continue}if(i==="slot"){n["data-slot"]=a;continue}let S=`data-${String(i).replace(/[A-Z]/g,R=>`-${R.toLowerCase()}`)}`;typeof a=="boolean"?n[S]=a?"":void 0:a!=null&&(n[S]=String(a))}return n}function Le(t,e){return function(r){t(r),r.defaultPrevented||e(r)}}function He(t){return/^on[A-Z]/.test(t)}function le(...t){let e=t.filter(Boolean);if(e.length!==0)return n=>{for(let r of e)typeof r=="function"?r(n):r&&(r.current=n)}}var z=require("react/jsx-runtime"),Ne={position:"relative",isolation:"isolate",overflow:"clip"},Oe={position:"absolute",top:0,bottom:0,zIndex:0,display:"flex"},Ve={position:"relative",zIndex:1},de={type:"spring",stiffness:500,damping:45,mass:.8},Ue=C(g({},de),{damping:36}),_e=4,ue={duration:.18,ease:[.32,.72,0,1]},pe=o.createContext(null);function fe(n){var r=n,{render:t}=r,e=A(r,["render"]);let i=o.useRef(new Map),a=o.useMemo(()=>({register(S,R){return i.current.set(S,R),()=>{i.current.delete(S)}},notifyOpen(S){for(let[R,y]of i.current)R!==S&&y()}}),[]),l=K({defaultTagName:"div",render:t,props:D({"data-slot":"swipe-root"},e)});return(0,z.jsx)(pe.Provider,{value:a,children:l})}var Se=o.createContext(null),Re=o.createContext(null);function Fe(){let t=o.useContext(Re);if(!t)throw new Error("SwipeAction must be used within SwipeActions");return t}function $(){let t=o.useContext(Se);if(!t)throw new Error("Swipe parts must be used within SwipeItem");return t}function we(R){var y=R,{render:t,threshold:e=.5,velocityFactor:n=.2,fullSwipeThreshold:r=.5,disabled:i=!1,closeOnScroll:a=!1,onOpenChange:l}=y,S=A(y,["render","threshold","velocityFactor","fullSwipeThreshold","disabled","closeOnScroll","onOpenChange"]);let w=o.useId(),c=o.useContext(pe),v=(0,E.useReducedMotion)(),x=o.useRef(null),[f,d]=o.useState({left:0,right:0}),[m,h]=o.useState(0),[k,G]=o.useState(null),M=o.useRef(null),V=o.useRef({}),[Z,q]=o.useState({left:!1,right:!1}),[W,ve]=o.useState("closed"),[j,J]=o.useState(!1),I=o.useRef("closed"),L=o.useRef(!1),b=(0,E.useMotionValue)(0),Q=o.useCallback((s,u)=>{d(p=>p[s]===u?p:C(g({},p),{[s]:u}))},[]),X=o.useCallback((s,u)=>(V.current[s]=u,q(p=>C(g({},p),{[s]:!0})),()=>{delete V.current[s],q(p=>C(g({},p),{[s]:!1}))}),[]),H=o.useCallback(s=>{M.current!==s&&(M.current=s,G(s))},[]);o.useEffect(()=>{let s=x.current;if(!s)return;let u=new ResizeObserver(()=>h(s.offsetWidth));return u.observe(s),()=>u.disconnect()},[]);let P=o.useCallback((s,u)=>{let p=s==="left"?f.left:s==="right"?-f.right:0;(0,E.animate)(b,p,v?{duration:0}:u===void 0?de:C(g({},Ue),{velocity:u})),s!=="closed"&&(c==null||c.notifyOpen(w)),I.current!==s&&(I.current=s,ve(s),l==null||l(s))},[f,b,v,c,w,l]),N=o.useCallback(()=>P("closed"),[P]),U=o.useRef(()=>{});o.useEffect(()=>{U.current=N},[N]),o.useEffect(()=>c==null?void 0:c.register(w,()=>U.current()),[c,w]),o.useEffect(()=>{I.current==="left"&&b.set(f.left),I.current==="right"&&b.set(-f.right)},[f,b]);let ee=o.useCallback(()=>{L.current=!1,J(!0),c==null||c.notifyOpen(w)},[c,w]),te=o.useCallback((s,u)=>{Math.abs(u.offset.x)>_e&&(L.current=!0);let p=r*m,T=b.get();p<=0||(T<=-p&&V.current.right?H("right"):T>=p&&V.current.left?H("left"):H(null))},[b,r,m,H]),ne=o.useCallback((s,u)=>{var _,re;J(!1);let p=M.current;if(p){H(null),L.current=!1,(re=(_=V.current)[p])==null||re.call(_),P("closed",u.velocity.x);return}let T=b.get()+u.velocity.x*n;f.right>0&&T<=-f.right*e?P("right",u.velocity.x):f.left>0&&T>=f.left*e?P("left",u.velocity.x):P("closed",u.velocity.x)},[b,n,f,e,P,H]),oe=o.useCallback(s=>{if(!(!L.current&&I.current==="closed")){if(s.preventDefault(),s.stopPropagation(),L.current){L.current=!1;return}N()}},[N]);o.useEffect(()=>{if(W==="closed")return;let s=T=>{var _;(_=x.current)!=null&&_.contains(T.target)||U.current()},u=T=>{T.key==="Escape"&&U.current()},p=()=>U.current();return document.addEventListener("pointerdown",s,!0),document.addEventListener("keydown",u),a&&window.addEventListener("scroll",p,!0),()=>{document.removeEventListener("pointerdown",s,!0),document.removeEventListener("keydown",u),a&&window.removeEventListener("scroll",p,!0)}},[W,a]);let he=o.useCallback(s=>{if(i||s.key!=="ArrowLeft"&&s.key!=="ArrowRight")return;let[u,p]=s.key==="ArrowLeft"?["left","right"]:["right","left"];if(I.current===u)P("closed");else if(f[p]>0)P(p);else return;s.preventDefault()},[i,f,P]),Ee=o.useMemo(()=>({state:W,disabled:i,dragging:j}),[W,i,j]),be=o.useMemo(()=>({state:W,disabled:i,dragging:j,x:b,leftWidth:f.left,rightWidth:f.right,itemWidth:m,armed:k,fullSwipeSides:Z,setStripWidth:Q,registerFullSwipe:X,close:N,onDragStart:ee,onDrag:te,onDragEnd:ne,onClickCapture:oe}),[W,i,j,b,f,m,k,Z,Q,X,N,ee,te,ne,oe]),Ce=K({defaultTagName:"div",render:t,state:Ee,props:D({"data-slot":"swipe-item",ref:x,style:Ne,onKeyDown:he},S)});return(0,z.jsx)(Se.Provider,{value:be,children:Ce})}function me(r){var i=r,{render:t,side:e}=i,n=A(i,["render","side"]);let{state:a,armed:l,x:S,leftWidth:R,rightWidth:y,fullSwipeSides:w,setStripWidth:c}=$(),v=o.useRef(null),x=w[e],f=e==="left"?R:y;o.useEffect(()=>{let m=v.current;if(!m)return;let h=new ResizeObserver(()=>{m.style.width||c(e,m.offsetWidth)});return h.observe(m),()=>{h.disconnect(),c(e,0)}},[e,c]),(0,E.useMotionValueEvent)(S,"change",m=>{let h=v.current;if(!h)return;let k=e==="left"?m:-m,G=k>0?"":"hidden";if(h.style.visibility!==G&&(h.style.visibility=G),!x)return;let M=k>f?`${Math.round(k)}px`:"";h.style.width!==M&&(h.style.width=M)});let d=K({defaultTagName:"div",render:t,props:D({"data-slot":"swipe-actions","data-side":e,"data-armed":l===e?"":void 0,ref:v,style:C(g({},Oe),{[e]:0}),inert:a!==e},n)});return(0,z.jsx)(Re.Provider,{value:e,children:d})}function ge(i){var a=i,{render:t,closeOnClick:e=!0,fullSwipe:n=!1}=a,r=A(a,["render","closeOnClick","fullSwipe"]);let{close:l,armed:S,registerFullSwipe:R}=$(),y=Fe(),w=(0,E.useReducedMotion)(),c=o.useRef(null),v=o.useRef(0);o.useEffect(()=>{if(n)return R(y,()=>{var d;(d=c.current)==null||d.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0}))})},[n,y,R]);let x=S===y,f=x&&!n;return o.useEffect(()=>{let d=c.current;if(!d||n)return;if(f){let h=d.offsetWidth;d.style.width||(v.current=h),d.style.boxSizing="border-box",d.style.overflow="clip",d.style.minWidth="0",d.style.paddingInline="0";let k=(0,E.animate)(d,{width:[h,0]},w?{duration:0}:ue);return()=>k.stop()}if(v.current===0)return;let m=(0,E.animate)(d,{width:[d.offsetWidth,v.current]},w?{duration:0}:ue);return m.then(()=>{d.style.width="",d.style.boxSizing="",d.style.overflow="",d.style.minWidth="",d.style.paddingInline=""}),()=>m.stop()},[f,n,w]),K({defaultTagName:"button",render:t,props:D({"data-slot":"swipe-action","data-armed":x&&n?"":void 0,ref:c,type:"button",style:n?{flexGrow:1}:void 0,onClick:()=>{e&&l()}},r)})}function ye(n){var r=n,{style:t}=r,e=A(r,["style"]);let v=$(),{x:i,disabled:a,dragging:l,leftWidth:S,rightWidth:R,itemWidth:y,fullSwipeSides:w}=v,c=A(v,["x","disabled","dragging","leftWidth","rightWidth","itemWidth","fullSwipeSides"]);return(0,z.jsx)(E.motion.div,C(g({"data-slot":"swipe-content"},e),{"data-dragging":l||void 0,style:C(g(g({},Ve),t),{x:i}),drag:a?!1:"x",dragConstraints:{left:-(w.right?y:R),right:w.left?y:S},dragElastic:.2,dragMomentum:!1,onDragStart:c.onDragStart,onDrag:c.onDrag,onDragEnd:c.onDragEnd,onClickCapture:c.onClickCapture}))}0&&(module.exports={SwipeAction,SwipeActions,SwipeContent,SwipeItem,SwipeRoot});

package/dist/index.mjs

@@ -1 +1 @@
-"use client";var ne=Object.defineProperty,oe=Object.defineProperties;var re=Object.getOwnPropertyDescriptors;var A=Object.getOwnPropertySymbols;var z=Object.prototype.hasOwnProperty,Y=Object.prototype.propertyIsEnumerable;var G=(t,e,n)=>e in t?ne(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,w=(t,e)=>{for(var n in e||(e={}))z.call(e,n)&&G(t,n,e[n]);if(A)for(var n of A(e))Y.call(e,n)&&G(t,n,e[n]);return t},y=(t,e)=>oe(t,re(e));var v=(t,e)=>{var n={};for(var o in t)z.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(t!=null&&A)for(var o of A(t))e.indexOf(o)<0&&Y.call(t,o)&&(n[o]=t[o]);return n};import*as r from"react";import{animate as ce,motion as de,useMotionValue as le,useReducedMotion as pe}from"motion/react";import*as b from"react";function k({defaultTagName:t,props:e,render:n,state:o={},stateAttributesMapping:s}){let i=E(se(o,s),e);if(!n)return b.createElement(t,i);if(typeof n=="function")return n(i,o);if(!b.isValidElement(n))return null;let c=n.props,f=E(i,c),l=y(w({},f),{ref:B(i.ref,c.ref)});return b.cloneElement(n,l)}function E(...t){let e={};for(let n of t){if(!n)continue;let o=n;for(let s of Object.keys(o)){let i=o[s];if(i===void 0)continue;let c=e[s];s==="className"?e[s]=[c,i].filter(Boolean).join(" "):s==="style"?e[s]=w(w({},c),i):s==="ref"?e[s]=B(c,i):ae(s)&&typeof c=="function"&&typeof i=="function"?e[s]=ie(i,c):e[s]=i}}return e}function se(t,e){var o;let n={};for(let s of Object.keys(t)){let i=t[s],c=(o=e==null?void 0:e[s])==null?void 0:o.call(e,i);if(c){Object.assign(n,c);continue}if(s==="slot"){n["data-slot"]=i;continue}let f=`data-${String(s).replace(/[A-Z]/g,l=>`-${l.toLowerCase()}`)}`;typeof i=="boolean"?n[f]=i?"":void 0:i!=null&&(n[f]=String(i))}return n}function ie(t,e){return function(o){t(o),o.defaultPrevented||e(o)}}function ae(t){return/^on[A-Z]/.test(t)}function B(...t){let e=t.filter(Boolean);if(e.length!==0)return n=>{for(let o of e)typeof o=="function"?o(n):o&&(o.current=n)}}import{jsx as L}from"react/jsx-runtime";var ue={position:"relative",isolation:"isolate",overflow:"clip"},fe={position:"absolute",top:0,bottom:0,zIndex:0,display:"flex"},Se={position:"relative",zIndex:1},F={type:"spring",stiffness:500,damping:45,mass:.8},Re=y(w({},F),{damping:36}),we=4,Z=r.createContext(null);function me(n){var o=n,{render:t}=o,e=v(o,["render"]);let s=r.useRef(new Map),i=r.useMemo(()=>({register(f,l){return s.current.set(f,l),()=>{s.current.delete(f)}},notifyOpen(f){for(let[l,p]of s.current)l!==f&&p()}}),[]),c=k({defaultTagName:"div",render:t,props:E({"data-slot":"swipe-root"},e)});return L(Z.Provider,{value:i,children:c})}var $=r.createContext(null);function M(){let t=r.useContext($);if(!t)throw new Error("Swipe parts must be used within SwipeItem");return t}function ge(f){var l=f,{render:t,threshold:e=.5,velocityFactor:n=.2,disabled:o=!1,closeOnScroll:s=!1,onOpenChange:i}=l,c=v(l,["render","threshold","velocityFactor","disabled","closeOnScroll","onOpenChange"]);let p=r.useId(),S=r.useContext(Z),H=pe(),W=r.useRef(null),[u,q]=r.useState({left:0,right:0}),[P,J]=r.useState("closed"),[D,N]=r.useState(!1),T=r.useRef("closed"),h=r.useRef(!1),m=le(0),U=r.useCallback((a,d)=>{q(R=>R[a]===d?R:y(w({},R),{[a]:d}))},[]),g=r.useCallback((a,d)=>{let R=a==="left"?u.left:a==="right"?-u.right:0;ce(m,R,H?{duration:0}:d===void 0?F:y(w({},Re),{velocity:d})),a!=="closed"&&(S==null||S.notifyOpen(p)),T.current!==a&&(T.current=a,J(a),i==null||i(a))},[u,m,H,S,p,i]),C=r.useCallback(()=>g("closed"),[g]),x=r.useRef(()=>{});r.useEffect(()=>{x.current=C},[C]),r.useEffect(()=>S==null?void 0:S.register(p,()=>x.current()),[S,p]),r.useEffect(()=>{T.current==="left"&&m.set(u.left),T.current==="right"&&m.set(-u.right)},[u,m]);let O=r.useCallback(()=>{h.current=!1,N(!0),S==null||S.notifyOpen(p)},[S,p]),V=r.useCallback((a,d)=>{Math.abs(d.offset.x)>we&&(h.current=!0)},[]),_=r.useCallback((a,d)=>{N(!1);let R=m.get()+d.velocity.x*n;u.right>0&&R<=-u.right*e?g("right",d.velocity.x):u.left>0&&R>=u.left*e?g("left",d.velocity.x):g("closed",d.velocity.x)},[m,n,u,e,g]),K=r.useCallback(a=>{if(!(!h.current&&T.current==="closed")){if(a.preventDefault(),a.stopPropagation(),h.current){h.current=!1;return}C()}},[C]);r.useEffect(()=>{if(P==="closed")return;let a=I=>{var j;(j=W.current)!=null&&j.contains(I.target)||x.current()},d=I=>{I.key==="Escape"&&x.current()},R=()=>x.current();return document.addEventListener("pointerdown",a,!0),document.addEventListener("keydown",d),s&&window.addEventListener("scroll",R,!0),()=>{document.removeEventListener("pointerdown",a,!0),document.removeEventListener("keydown",d),s&&window.removeEventListener("scroll",R,!0)}},[P,s]);let Q=r.useCallback(a=>{if(o||a.key!=="ArrowLeft"&&a.key!=="ArrowRight")return;let[d,R]=a.key==="ArrowLeft"?["left","right"]:["right","left"];if(T.current===d)g("closed");else if(u[R]>0)g(R);else return;a.preventDefault()},[o,u,g]),X=r.useMemo(()=>({state:P,disabled:o,dragging:D}),[P,o,D]),ee=r.useMemo(()=>({state:P,disabled:o,dragging:D,x:m,leftWidth:u.left,rightWidth:u.right,setStripWidth:U,close:C,onDragStart:O,onDrag:V,onDragEnd:_,onClickCapture:K}),[P,o,D,m,u,U,C,O,V,_,K]),te=k({defaultTagName:"div",render:t,state:X,props:E({"data-slot":"swipe-item",ref:W,style:ue,onKeyDown:Q},c)});return L($.Provider,{value:ee,children:te})}function ye(o){var s=o,{render:t,side:e}=s,n=v(s,["render","side"]);let{state:i,setStripWidth:c}=M(),f=r.useRef(null);return r.useEffect(()=>{let l=f.current;if(!l)return;let p=new ResizeObserver(()=>c(e,l.offsetWidth));return p.observe(l),()=>{p.disconnect(),c(e,0)}},[e,c]),k({defaultTagName:"div",render:t,props:E({"data-slot":"swipe-actions","data-side":e,ref:f,style:y(w({},fe),{[e]:0}),inert:i!==e},n)})}function ve(o){var s=o,{render:t,closeOnClick:e=!0}=s,n=v(s,["render","closeOnClick"]);let{close:i}=M();return k({defaultTagName:"button",render:t,props:E({"data-slot":"swipe-action",type:"button",onClick:()=>{e&&i()}},n)})}function Ee(n){var o=n,{style:t}=o,e=v(o,["style"]);let S=M(),{x:s,disabled:i,dragging:c,leftWidth:f,rightWidth:l}=S,p=v(S,["x","disabled","dragging","leftWidth","rightWidth"]);return L(de.div,y(w({"data-slot":"swipe-content"},e),{"data-dragging":c||void 0,style:y(w(w({},Se),t),{x:s}),drag:i?!1:"x",dragConstraints:{left:-l,right:f},dragElastic:.2,dragMomentum:!1,onDragStart:p.onDragStart,onDrag:p.onDrag,onDragEnd:p.onDragEnd,onClickCapture:p.onClickCapture}))}export{ve as SwipeAction,ye as SwipeActions,Ee as SwipeContent,ge as SwipeItem,me as SwipeRoot};
+"use client";var ge=Object.defineProperty,ye=Object.defineProperties;var ve=Object.getOwnPropertyDescriptors;var z=Object.getOwnPropertySymbols;var re=Object.prototype.hasOwnProperty,ie=Object.prototype.propertyIsEnumerable;var oe=(o,e,n)=>e in o?ge(o,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):o[e]=n,g=(o,e)=>{for(var n in e||(e={}))re.call(e,n)&&oe(o,n,e[n]);if(z)for(var n of z(e))ie.call(e,n)&&oe(o,n,e[n]);return o},b=(o,e)=>ye(o,ve(e));var k=(o,e)=>{var n={};for(var r in o)re.call(o,r)&&e.indexOf(r)<0&&(n[r]=o[r]);if(o!=null&&z)for(var r of z(o))e.indexOf(r)<0&&ie.call(o,r)&&(n[r]=o[r]);return n};import*as t from"react";import{animate as j,motion as Ce,useMotionValue as Pe,useMotionValueEvent as Te,useReducedMotion as ce}from"motion/react";import*as N from"react";function _({defaultTagName:o,props:e,render:n,state:r={},stateAttributesMapping:s}){let a=A(he(r,s),e);if(!n)return N.createElement(o,a);if(typeof n=="function")return n(a,r);if(!N.isValidElement(n))return null;let l=n.props,S=A(a,l),R=b(g({},S),{ref:se(a.ref,l.ref)});return N.cloneElement(n,R)}function A(...o){let e={};for(let n of o){if(!n)continue;let r=n;for(let s of Object.keys(r)){let a=r[s];if(a===void 0)continue;let l=e[s];s==="className"?e[s]=[l,a].filter(Boolean).join(" "):s==="style"?e[s]=g(g({},l),a):s==="ref"?e[s]=se(l,a):be(s)&&typeof l=="function"&&typeof a=="function"?e[s]=Ee(a,l):e[s]=a}}return e}function he(o,e){var r;let n={};for(let s of Object.keys(o)){let a=o[s],l=(r=e==null?void 0:e[s])==null?void 0:r.call(e,a);if(l){Object.assign(n,l);continue}if(s==="slot"){n["data-slot"]=a;continue}let S=`data-${String(s).replace(/[A-Z]/g,R=>`-${R.toLowerCase()}`)}`;typeof a=="boolean"?n[S]=a?"":void 0:a!=null&&(n[S]=String(a))}return n}function Ee(o,e){return function(r){o(r),r.defaultPrevented||e(r)}}function be(o){return/^on[A-Z]/.test(o)}function se(...o){let e=o.filter(Boolean);if(e.length!==0)return n=>{for(let r of e)typeof r=="function"?r(n):r&&(r.current=n)}}import{jsx as G}from"react/jsx-runtime";var xe={position:"relative",isolation:"isolate",overflow:"clip"},ke={position:"absolute",top:0,bottom:0,zIndex:0,display:"flex"},Ae={position:"relative",zIndex:1},le={type:"spring",stiffness:500,damping:45,mass:.8},De=b(g({},le),{damping:36}),Me=4,ae={duration:.18,ease:[.32,.72,0,1]},ue=t.createContext(null);function We(n){var r=n,{render:o}=r,e=k(r,["render"]);let s=t.useRef(new Map),a=t.useMemo(()=>({register(S,R){return s.current.set(S,R),()=>{s.current.delete(S)}},notifyOpen(S){for(let[R,y]of s.current)R!==S&&y()}}),[]),l=_({defaultTagName:"div",render:o,props:A({"data-slot":"swipe-root"},e)});return G(ue.Provider,{value:a,children:l})}var de=t.createContext(null),pe=t.createContext(null);function Ie(){let o=t.useContext(pe);if(!o)throw new Error("SwipeAction must be used within SwipeActions");return o}function B(){let o=t.useContext(de);if(!o)throw new Error("Swipe parts must be used within SwipeItem");return o}function Le(R){var y=R,{render:o,threshold:e=.5,velocityFactor:n=.2,fullSwipeThreshold:r=.5,disabled:s=!1,closeOnScroll:a=!1,onOpenChange:l}=y,S=k(y,["render","threshold","velocityFactor","fullSwipeThreshold","disabled","closeOnScroll","onOpenChange"]);let w=t.useId(),c=t.useContext(ue),v=ce(),T=t.useRef(null),[f,d]=t.useState({left:0,right:0}),[m,h]=t.useState(0),[x,F]=t.useState(null),D=t.useRef(null),O=t.useRef({}),[Y,$]=t.useState({left:!1,right:!1}),[M,fe]=t.useState("closed"),[K,Z]=t.useState(!1),W=t.useRef("closed"),I=t.useRef(!1),E=Pe(0),q=t.useCallback((i,u)=>{d(p=>p[i]===u?p:b(g({},p),{[i]:u}))},[]),J=t.useCallback((i,u)=>(O.current[i]=u,$(p=>b(g({},p),{[i]:!0})),()=>{delete O.current[i],$(p=>b(g({},p),{[i]:!1}))}),[]),L=t.useCallback(i=>{D.current!==i&&(D.current=i,F(i))},[]);t.useEffect(()=>{let i=T.current;if(!i)return;let u=new ResizeObserver(()=>h(i.offsetWidth));return u.observe(i),()=>u.disconnect()},[]);let C=t.useCallback((i,u)=>{let p=i==="left"?f.left:i==="right"?-f.right:0;j(E,p,v?{duration:0}:u===void 0?le:b(g({},De),{velocity:u})),i!=="closed"&&(c==null||c.notifyOpen(w)),W.current!==i&&(W.current=i,fe(i),l==null||l(i))},[f,E,v,c,w,l]),H=t.useCallback(()=>C("closed"),[C]),V=t.useRef(()=>{});t.useEffect(()=>{V.current=H},[H]),t.useEffect(()=>c==null?void 0:c.register(w,()=>V.current()),[c,w]),t.useEffect(()=>{W.current==="left"&&E.set(f.left),W.current==="right"&&E.set(-f.right)},[f,E]);let Q=t.useCallback(()=>{I.current=!1,Z(!0),c==null||c.notifyOpen(w)},[c,w]),X=t.useCallback((i,u)=>{Math.abs(u.offset.x)>Me&&(I.current=!0);let p=r*m,P=E.get();p<=0||(P<=-p&&O.current.right?L("right"):P>=p&&O.current.left?L("left"):L(null))},[E,r,m,L]),ee=t.useCallback((i,u)=>{var U,ne;Z(!1);let p=D.current;if(p){L(null),I.current=!1,(ne=(U=O.current)[p])==null||ne.call(U),C("closed",u.velocity.x);return}let P=E.get()+u.velocity.x*n;f.right>0&&P<=-f.right*e?C("right",u.velocity.x):f.left>0&&P>=f.left*e?C("left",u.velocity.x):C("closed",u.velocity.x)},[E,n,f,e,C,L]),te=t.useCallback(i=>{if(!(!I.current&&W.current==="closed")){if(i.preventDefault(),i.stopPropagation(),I.current){I.current=!1;return}H()}},[H]);t.useEffect(()=>{if(M==="closed")return;let i=P=>{var U;(U=T.current)!=null&&U.contains(P.target)||V.current()},u=P=>{P.key==="Escape"&&V.current()},p=()=>V.current();return document.addEventListener("pointerdown",i,!0),document.addEventListener("keydown",u),a&&window.addEventListener("scroll",p,!0),()=>{document.removeEventListener("pointerdown",i,!0),document.removeEventListener("keydown",u),a&&window.removeEventListener("scroll",p,!0)}},[M,a]);let Se=t.useCallback(i=>{if(s||i.key!=="ArrowLeft"&&i.key!=="ArrowRight")return;let[u,p]=i.key==="ArrowLeft"?["left","right"]:["right","left"];if(W.current===u)C("closed");else if(f[p]>0)C(p);else return;i.preventDefault()},[s,f,C]),Re=t.useMemo(()=>({state:M,disabled:s,dragging:K}),[M,s,K]),we=t.useMemo(()=>({state:M,disabled:s,dragging:K,x:E,leftWidth:f.left,rightWidth:f.right,itemWidth:m,armed:x,fullSwipeSides:Y,setStripWidth:q,registerFullSwipe:J,close:H,onDragStart:Q,onDrag:X,onDragEnd:ee,onClickCapture:te}),[M,s,K,E,f,m,x,Y,q,J,H,Q,X,ee,te]),me=_({defaultTagName:"div",render:o,state:Re,props:A({"data-slot":"swipe-item",ref:T,style:xe,onKeyDown:Se},S)});return G(de.Provider,{value:we,children:me})}function He(r){var s=r,{render:o,side:e}=s,n=k(s,["render","side"]);let{state:a,armed:l,x:S,leftWidth:R,rightWidth:y,fullSwipeSides:w,setStripWidth:c}=B(),v=t.useRef(null),T=w[e],f=e==="left"?R:y;t.useEffect(()=>{let m=v.current;if(!m)return;let h=new ResizeObserver(()=>{m.style.width||c(e,m.offsetWidth)});return h.observe(m),()=>{h.disconnect(),c(e,0)}},[e,c]),Te(S,"change",m=>{let h=v.current;if(!h)return;let x=e==="left"?m:-m,F=x>0?"":"hidden";if(h.style.visibility!==F&&(h.style.visibility=F),!T)return;let D=x>f?`${Math.round(x)}px`:"";h.style.width!==D&&(h.style.width=D)});let d=_({defaultTagName:"div",render:o,props:A({"data-slot":"swipe-actions","data-side":e,"data-armed":l===e?"":void 0,ref:v,style:b(g({},ke),{[e]:0}),inert:a!==e},n)});return G(pe.Provider,{value:e,children:d})}function Ne(s){var a=s,{render:o,closeOnClick:e=!0,fullSwipe:n=!1}=a,r=k(a,["render","closeOnClick","fullSwipe"]);let{close:l,armed:S,registerFullSwipe:R}=B(),y=Ie(),w=ce(),c=t.useRef(null),v=t.useRef(0);t.useEffect(()=>{if(n)return R(y,()=>{var d;(d=c.current)==null||d.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0}))})},[n,y,R]);let T=S===y,f=T&&!n;return t.useEffect(()=>{let d=c.current;if(!d||n)return;if(f){let h=d.offsetWidth;d.style.width||(v.current=h),d.style.boxSizing="border-box",d.style.overflow="clip",d.style.minWidth="0",d.style.paddingInline="0";let x=j(d,{width:[h,0]},w?{duration:0}:ae);return()=>x.stop()}if(v.current===0)return;let m=j(d,{width:[d.offsetWidth,v.current]},w?{duration:0}:ae);return m.then(()=>{d.style.width="",d.style.boxSizing="",d.style.overflow="",d.style.minWidth="",d.style.paddingInline=""}),()=>m.stop()},[f,n,w]),_({defaultTagName:"button",render:o,props:A({"data-slot":"swipe-action","data-armed":T&&n?"":void 0,ref:c,type:"button",style:n?{flexGrow:1}:void 0,onClick:()=>{e&&l()}},r)})}function Oe(n){var r=n,{style:o}=r,e=k(r,["style"]);let v=B(),{x:s,disabled:a,dragging:l,leftWidth:S,rightWidth:R,itemWidth:y,fullSwipeSides:w}=v,c=k(v,["x","disabled","dragging","leftWidth","rightWidth","itemWidth","fullSwipeSides"]);return G(Ce.div,b(g({"data-slot":"swipe-content"},e),{"data-dragging":l||void 0,style:b(g(g({},Ae),o),{x:s}),drag:a?!1:"x",dragConstraints:{left:-(w.right?y:R),right:w.left?y:S},dragElastic:.2,dragMomentum:!1,onDragStart:c.onDragStart,onDrag:c.onDrag,onDragEnd:c.onDragEnd,onClickCapture:c.onClickCapture}))}export{Ne as SwipeAction,He as SwipeActions,Oe as SwipeContent,Le as SwipeItem,We as SwipeRoot};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncdai/react-swipe-actions",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Unstyled swipe actions for React. Swipe a row in a list to reveal actions on the left or right.",
   "publishConfig": {
     "access": "public",