@aiquants/swipe-overlay 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +24 -27
package/dist/index.d.mts
CHANGED
|
@@ -35,11 +35,14 @@ type SwipeDismissHookResult = {
|
|
|
35
35
|
* Manages swipe-to-dismiss interactions on the mobile overlay panel.
|
|
36
36
|
* モバイルオーバーレイパネルのスワイプクローズ操作を管理。
|
|
37
37
|
*/
|
|
38
|
-
declare const useSwipeToDismissOverlay: ({ isOpen, onClose, isCloseBlocked, skipWhenTextSelected }: {
|
|
38
|
+
declare const useSwipeToDismissOverlay: ({ isOpen, onClose, isCloseBlocked, skipWhenTextSelected, swipeThreshold, flickVelocity, flickDistance, }: {
|
|
39
39
|
isOpen: boolean;
|
|
40
40
|
onClose: () => void;
|
|
41
41
|
isCloseBlocked: () => boolean;
|
|
42
42
|
skipWhenTextSelected?: boolean;
|
|
43
|
+
swipeThreshold?: number;
|
|
44
|
+
flickVelocity?: number;
|
|
45
|
+
flickDistance?: number;
|
|
43
46
|
}) => SwipeDismissHookResult;
|
|
44
47
|
/**
|
|
45
48
|
* Manages the blocking state for swipe-to-dismiss interactions.
|
package/dist/index.d.ts
CHANGED
|
@@ -35,11 +35,14 @@ type SwipeDismissHookResult = {
|
|
|
35
35
|
* Manages swipe-to-dismiss interactions on the mobile overlay panel.
|
|
36
36
|
* モバイルオーバーレイパネルのスワイプクローズ操作を管理。
|
|
37
37
|
*/
|
|
38
|
-
declare const useSwipeToDismissOverlay: ({ isOpen, onClose, isCloseBlocked, skipWhenTextSelected }: {
|
|
38
|
+
declare const useSwipeToDismissOverlay: ({ isOpen, onClose, isCloseBlocked, skipWhenTextSelected, swipeThreshold, flickVelocity, flickDistance, }: {
|
|
39
39
|
isOpen: boolean;
|
|
40
40
|
onClose: () => void;
|
|
41
41
|
isCloseBlocked: () => boolean;
|
|
42
42
|
skipWhenTextSelected?: boolean;
|
|
43
|
+
swipeThreshold?: number;
|
|
44
|
+
flickVelocity?: number;
|
|
45
|
+
flickDistance?: number;
|
|
43
46
|
}) => SwipeDismissHookResult;
|
|
44
47
|
/**
|
|
45
48
|
* Manages the blocking state for swipe-to-dismiss interactions.
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var E=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var G=Object.prototype.hasOwnProperty;var _=(e,n)=>{for(var t in n)E(e,t,{get:n[t],enumerable:!0})},O=(e,n,t,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of F(n))!G.call(e,l)&&l!==t&&E(e,l,{get:()=>n[l],enumerable:!(a=B(n,l))||a.enumerable});return e};var U=e=>O(E({},"__esModule",{value:!0}),e);var Q={};_(Q,{SwipeCloseGuardContext:()=>k,useOverlayEscapeStack:()=>T,useSwipeCloseGuard:()=>$,useSwipeGuardState:()=>z,useSwipeToDismissOverlay:()=>j,useTapClick:()=>J,useTransitionDisplay:()=>N});module.exports=U(Q);var s=require("react"),K=120,V=.5,q=40,k=(0,s.createContext)(null),$=()=>(0,s.useContext)(k)??{isBlocked:!1,requestBlock:()=>()=>{}},u=[],P=e=>{if(e.key!=="Escape")return;u[u.length-1]?.onEscape(e)&&(e.preventDefault(),e.stopPropagation())},T=()=>(0,s.useCallback)(e=>{let n=u.findIndex(t=>t.id===e.id);return n>=0&&u.splice(n,1),u.push(e),u.length===1&&typeof document<"u"&&document.addEventListener("keydown",P,!0),()=>{let t=u.findIndex(a=>a.id===e.id);t>=0&&u.splice(t,1),u.length===0&&typeof document<"u"&&document.removeEventListener("keydown",P,!0)}},[]),j=({isOpen:e,onClose:n,isCloseBlocked:t,skipWhenTextSelected:a=!1,swipeThreshold:l=K,flickVelocity:p=V,flickDistance:S=q})=>{let[i,X]=(0,s.useState)(null),[M,m]=(0,s.useState)(!1),h=T(),x=(0,s.useRef)(`overlay-${Math.random().toString(36).slice(2)}`).current,d=(0,s.useRef)({pointerId:null,startX:0,startY:0,isActive:!1,isClosing:!1,lastDelta:0,hasCapture:!1,history:[]}),f=(0,s.useCallback)(()=>t()?!1:(n(),!0),[t,n]);(0,s.useEffect)(()=>{if(e)return h({id:x,onEscape:f})},[e,f,h,x]),(0,s.useEffect)(()=>{if(!(i&&e))return;let v=()=>{let o=d.current;o.hasCapture&&o.pointerId!==null&&i.releasePointerCapture?.(o.pointerId),Object.assign(o,{pointerId:null,isActive:!1,isClosing:!1,hasCapture:!1,history:[]}),i.style.transform="",i.style.transition="",m(!1)};d.current={pointerId:null,startX:0,startY:0,isActive:!1,isClosing:!1,lastDelta:0,hasCapture:!1,history:[]},m(!1);let D=o=>{o.pointerType==="mouse"&&o.button!==0||o.target?.closest('[data-overlay-interactive="true"]')||a&&window.getSelection()?.toString().trim()||(i.style.transition="none",m(!0),d.current={pointerId:o.pointerId,startX:o.clientX,startY:o.clientY,isActive:!0,isClosing:!1,lastDelta:0,hasCapture:!1,history:[{x:o.clientX,time:Date.now()}]})},b=o=>{let r=d.current;if(!r.isActive||r.pointerId!==o.pointerId)return;if(a&&window.getSelection()?.toString().trim()){v();return}r.history.push({x:o.clientX,time:Date.now()});let c=o.clientX-r.startX,y=o.clientY-r.startY;if(!r.isClosing){if(Math.abs(c)<4)return;if(Math.abs(c)<Math.abs(y)*1.3||c<=0){v();return}r.isClosing=!0,r.hasCapture||(i.setPointerCapture?.(o.pointerId),r.hasCapture=!0)}r.isClosing&&(o.preventDefault(),r.lastDelta=Math.max(0,c),i.style.transform=`translateX(${Math.min(r.lastDelta,520)}px)`)},g=o=>{let r=d.current;if(r.pointerId!==o.pointerId)return;let c=Date.now(),y=c-100,w=r.history.find(C=>C.time>=y)||r.history[0]||{x:r.startX,time:c},I=c-w.time,A=o.clientX-w.x,Y=I>0?A/I:0,H=r.lastDelta>l,L=Y>p&&r.lastDelta>S;if(r.isClosing&&(H||L)){let C=L?.15:.3;i.style.transition=`transform ${C}s ease-out`,i.style.transform="translateX(100%)",r.hasCapture&&r.pointerId!==null&&i.releasePointerCapture?.(r.pointerId),Object.assign(r,{pointerId:null,isActive:!1,isClosing:!1,hasCapture:!1,history:[]}),m(!1),f()}else v()};return i.addEventListener("pointerdown",D),i.addEventListener("pointermove",b),i.addEventListener("pointerup",g),i.addEventListener("pointercancel",v),()=>{i.removeEventListener("pointerdown",D),i.removeEventListener("pointermove",b),i.removeEventListener("pointerup",g),i.removeEventListener("pointercancel",v)}},[e,i,f,a,l,p,S]);let R=(0,s.useMemo)(()=>({transform:e?"translateX(0px)":"translateX(100%)"}),[e]);return{overlayRef:X,overlayStyle:R,attemptClose:f,isSwiping:M,element:i}},z=()=>{let e=(0,s.useRef)(new Set),[n,t]=(0,s.useState)(!1),a=(0,s.useCallback)(()=>{let p=Symbol("guard");return e.current.add(p),t(!0),()=>{e.current.delete(p),t(e.current.size>0)}},[]),l=(0,s.useCallback)(()=>{e.current.clear(),t(!1)},[]);return{isBlocked:n,requestBlock:a,reset:l}};function N(e,n){let t=(0,s.useRef)(n);return e&&n!==null&&(t.current=n),e?n:t.current}var J=(e,n=10)=>{let t=(0,s.useRef)(null);return{onPointerDown:a=>{t.current={x:a.clientX,y:a.clientY}},onPointerUp:a=>{if(t.current){let l=Math.hypot(a.clientX-t.current.x,a.clientY-t.current.y);t.current=null,l<n&&(a.preventDefault(),e())}},onPointerCancel:()=>{t.current=null},onClick:a=>a.preventDefault()}};0&&(module.exports={SwipeCloseGuardContext,useOverlayEscapeStack,useSwipeCloseGuard,useSwipeGuardState,useSwipeToDismissOverlay,useTapClick,useTransitionDisplay});
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createContext as
|
|
1
|
+
import{createContext as B,useCallback as y,useContext as F,useEffect as k,useMemo as G,useRef as v,useState as S}from"react";var _=120,O=.5,U=40,K=B(null),$=()=>F(K)??{isBlocked:!1,requestBlock:()=>()=>{}},a=[],T=e=>{if(e.key!=="Escape")return;a[a.length-1]?.onEscape(e)&&(e.preventDefault(),e.stopPropagation())},V=()=>y(e=>{let i=a.findIndex(r=>r.id===e.id);return i>=0&&a.splice(i,1),a.push(e),a.length===1&&typeof document<"u"&&document.addEventListener("keydown",T,!0),()=>{let r=a.findIndex(o=>o.id===e.id);r>=0&&a.splice(r,1),a.length===0&&typeof document<"u"&&document.removeEventListener("keydown",T,!0)}},[]),j=({isOpen:e,onClose:i,isCloseBlocked:r,skipWhenTextSelected:o=!1,swipeThreshold:u=_,flickVelocity:c=O,flickDistance:h=U})=>{let[s,X]=S(null),[M,m]=S(!1),x=V(),D=v(`overlay-${Math.random().toString(36).slice(2)}`).current,p=v({pointerId:null,startX:0,startY:0,isActive:!1,isClosing:!1,lastDelta:0,hasCapture:!1,history:[]}),d=y(()=>r()?!1:(i(),!0),[r,i]);k(()=>{if(e)return x({id:D,onEscape:d})},[e,d,x,D]),k(()=>{if(!(s&&e))return;let f=()=>{let n=p.current;n.hasCapture&&n.pointerId!==null&&s.releasePointerCapture?.(n.pointerId),Object.assign(n,{pointerId:null,isActive:!1,isClosing:!1,hasCapture:!1,history:[]}),s.style.transform="",s.style.transition="",m(!1)};p.current={pointerId:null,startX:0,startY:0,isActive:!1,isClosing:!1,lastDelta:0,hasCapture:!1,history:[]},m(!1);let b=n=>{n.pointerType==="mouse"&&n.button!==0||n.target?.closest('[data-overlay-interactive="true"]')||o&&window.getSelection()?.toString().trim()||(s.style.transition="none",m(!0),p.current={pointerId:n.pointerId,startX:n.clientX,startY:n.clientY,isActive:!0,isClosing:!1,lastDelta:0,hasCapture:!1,history:[{x:n.clientX,time:Date.now()}]})},g=n=>{let t=p.current;if(!t.isActive||t.pointerId!==n.pointerId)return;if(o&&window.getSelection()?.toString().trim()){f();return}t.history.push({x:n.clientX,time:Date.now()});let l=n.clientX-t.startX,C=n.clientY-t.startY;if(!t.isClosing){if(Math.abs(l)<4)return;if(Math.abs(l)<Math.abs(C)*1.3||l<=0){f();return}t.isClosing=!0,t.hasCapture||(s.setPointerCapture?.(n.pointerId),t.hasCapture=!0)}t.isClosing&&(n.preventDefault(),t.lastDelta=Math.max(0,l),s.style.transform=`translateX(${Math.min(t.lastDelta,520)}px)`)},w=n=>{let t=p.current;if(t.pointerId!==n.pointerId)return;let l=Date.now(),C=l-100,I=t.history.find(E=>E.time>=C)||t.history[0]||{x:t.startX,time:l},L=l-I.time,A=n.clientX-I.x,Y=L>0?A/L:0,H=t.lastDelta>u,P=Y>c&&t.lastDelta>h;if(t.isClosing&&(H||P)){let E=P?.15:.3;s.style.transition=`transform ${E}s ease-out`,s.style.transform="translateX(100%)",t.hasCapture&&t.pointerId!==null&&s.releasePointerCapture?.(t.pointerId),Object.assign(t,{pointerId:null,isActive:!1,isClosing:!1,hasCapture:!1,history:[]}),m(!1),d()}else f()};return s.addEventListener("pointerdown",b),s.addEventListener("pointermove",g),s.addEventListener("pointerup",w),s.addEventListener("pointercancel",f),()=>{s.removeEventListener("pointerdown",b),s.removeEventListener("pointermove",g),s.removeEventListener("pointerup",w),s.removeEventListener("pointercancel",f)}},[e,s,d,o,u,c,h]);let R=G(()=>({transform:e?"translateX(0px)":"translateX(100%)"}),[e]);return{overlayRef:X,overlayStyle:R,attemptClose:d,isSwiping:M,element:s}},z=()=>{let e=v(new Set),[i,r]=S(!1),o=y(()=>{let c=Symbol("guard");return e.current.add(c),r(!0),()=>{e.current.delete(c),r(e.current.size>0)}},[]),u=y(()=>{e.current.clear(),r(!1)},[]);return{isBlocked:i,requestBlock:o,reset:u}};function N(e,i){let r=v(i);return e&&i!==null&&(r.current=i),e?i:r.current}var J=(e,i=10)=>{let r=v(null);return{onPointerDown:o=>{r.current={x:o.clientX,y:o.clientY}},onPointerUp:o=>{if(r.current){let u=Math.hypot(o.clientX-r.current.x,o.clientY-r.current.y);r.current=null,u<i&&(o.preventDefault(),e())}},onPointerCancel:()=>{r.current=null},onClick:o=>o.preventDefault()}};export{K as SwipeCloseGuardContext,V as useOverlayEscapeStack,$ as useSwipeCloseGuard,z as useSwipeGuardState,j as useSwipeToDismissOverlay,J as useTapClick,N as useTransitionDisplay};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aiquants/swipe-overlay",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "React hooks and context for swipe-to-dismiss overlay interactions",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -31,36 +31,11 @@
|
|
|
31
31
|
"README.md",
|
|
32
32
|
"LICENSE"
|
|
33
33
|
],
|
|
34
|
-
"scripts": {
|
|
35
|
-
"build": "tsup",
|
|
36
|
-
"prepare": "pnpm run build",
|
|
37
|
-
"build:watch": "tsup --watch",
|
|
38
|
-
"dev": "tsup --watch",
|
|
39
|
-
"watch": "tsup --watch",
|
|
40
|
-
"type-check": "tsc --noEmit",
|
|
41
|
-
"typecheck": "npm run type-check",
|
|
42
|
-
"clean": "rimraf dist",
|
|
43
|
-
"prepublishOnly": "npm run clean && npm run typecheck && npm run test --if-present && npm run build",
|
|
44
|
-
"publish:patch": "npm version patch && npm publish",
|
|
45
|
-
"publish:minor": "npm version minor && npm publish",
|
|
46
|
-
"publish:major": "npm version major && npm publish",
|
|
47
|
-
"lint": "biome lint src/",
|
|
48
|
-
"lint:fix": "biome lint --write src/",
|
|
49
|
-
"format": "biome format src/",
|
|
50
|
-
"format:fix": "biome format --write src/",
|
|
51
|
-
"check": "biome check src/",
|
|
52
|
-
"check:fix": "biome check --write src/",
|
|
53
|
-
"license-check": "pnpm dlx license-checker --production --onlyAllow \"MIT;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;Unlicense\"",
|
|
54
|
-
"license-check:json": "pnpm dlx license-checker --production --onlyAllow \"MIT;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;Unlicense\" --json",
|
|
55
|
-
"test": "vitest run --passWithNoTests",
|
|
56
|
-
"test:coverage": "vitest run --coverage --passWithNoTests"
|
|
57
|
-
},
|
|
58
34
|
"peerDependencies": {
|
|
59
35
|
"react": ">=16.8.0",
|
|
60
36
|
"react-dom": ">=16.8.0"
|
|
61
37
|
},
|
|
62
38
|
"devDependencies": {
|
|
63
|
-
"@biomejs/biome": "^2.3.8",
|
|
64
39
|
"@types/react": "^18.3.27",
|
|
65
40
|
"@types/react-dom": "^18.3.7",
|
|
66
41
|
"react": "^18.3.1",
|
|
@@ -72,5 +47,27 @@
|
|
|
72
47
|
},
|
|
73
48
|
"publishConfig": {
|
|
74
49
|
"access": "public"
|
|
50
|
+
},
|
|
51
|
+
"scripts": {
|
|
52
|
+
"build": "tsup",
|
|
53
|
+
"build:watch": "tsup --watch",
|
|
54
|
+
"dev": "tsup --watch",
|
|
55
|
+
"watch": "tsup --watch",
|
|
56
|
+
"type-check": "tsc --noEmit",
|
|
57
|
+
"typecheck": "npm run type-check",
|
|
58
|
+
"clean": "rimraf dist",
|
|
59
|
+
"publish:patch": "npm version patch && pnpm publish --no-git-checks",
|
|
60
|
+
"publish:minor": "npm version minor && pnpm publish --no-git-checks",
|
|
61
|
+
"publish:major": "npm version major && pnpm publish --no-git-checks",
|
|
62
|
+
"lint": "biome lint src/",
|
|
63
|
+
"lint:fix": "biome lint --write src/",
|
|
64
|
+
"format": "biome format src/",
|
|
65
|
+
"format:fix": "biome format --write src/",
|
|
66
|
+
"check": "biome check src/",
|
|
67
|
+
"check:fix": "biome check --write src/",
|
|
68
|
+
"license-check": "pnpm dlx license-checker --production --onlyAllow \"MIT;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;Unlicense\"",
|
|
69
|
+
"license-check:json": "pnpm dlx license-checker --production --onlyAllow \"MIT;Apache-2.0;BSD-2-Clause;BSD-3-Clause;ISC;Unlicense\" --json",
|
|
70
|
+
"test": "vitest run",
|
|
71
|
+
"test:coverage": "vitest run --coverage"
|
|
75
72
|
}
|
|
76
|
-
}
|
|
73
|
+
}
|