Skip to content

Commit d38382c

Browse files
atomiksatomiks
committed
New swipe handling
1 parent 20da40a commit d38382c

File tree

32 files changed

+1617
-347
lines changed

32 files changed

+1617
-347
lines changed

‎docs/reference/generated/drawer-popup.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"description": "The height of the drawer popup.",
4343
"type": "CSS"
4444
},
45-
"--drawer-nested-dialogs": {
45+
"--nested-drawers": {
4646
"description": "The number of nested drawers that are currently open.",
4747
"type": "number"
4848
},

‎docs/src/app/(docs)/react/components/dialog/demos/hero/css-modules/index.module.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
background-color: black;
4141
opacity: 0.2;
4242
transition: opacity 150ms cubic-bezier(0.45, 1.005, 0, 1.005);
43+
touch-action: none;
4344

4445
/* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
4546
@supports (-webkit-touch-callout: none) {
@@ -71,6 +72,7 @@
7172
background-color: var(--color-gray-50);
7273
color: var(--color-gray-900);
7374
transition: all 150ms;
75+
touch-action: none;
7476

7577
@media (prefers-color-scheme: dark) {
7678
outline: 1px solid var(--color-gray-300);

‎docs/src/app/(docs)/react/components/drawer/demos/hero/css-modules/index.module.css‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,18 +69,20 @@
6969
}
7070

7171
&[data-ending-style][data-swipe-dismiss] {
72-
transition-duration: calc(var(--drawer-swipe-release-duration, 1) * 400ms);
72+
transition-duration: calc(var(--drawer-swipe-release-strength, 1) * 400ms);
7373
}
7474
}
7575

7676
.Viewport {
77+
--drawer-viewport-padding: 0px;
7778
position: fixed;
7879
inset: 0;
7980
display: flex;
8081
justify-content: flex-end;
82+
padding: var(--drawer-viewport-padding);
8183

8284
@supports (-webkit-touch-callout: none) {
83-
padding: 10px;
85+
--drawer-viewport-padding: 10px;
8486
}
8587
}
8688

@@ -97,6 +99,8 @@
9799
background-color: var(--color-gray-50);
98100
color: var(--color-gray-900);
99101
overflow-y: auto;
102+
overscroll-behavior: contain;
103+
touch-action: auto;
100104
transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
101105
transform: translateX(calc(var(--drawer-swipe-movement-x, 0)));
102106

@@ -110,11 +114,11 @@
110114

111115
&[data-starting-style],
112116
&[data-ending-style] {
113-
transform: translateX(calc(100% - var(--drawer-bleed)));
117+
transform: translateX(calc(100% - var(--drawer-bleed) + var(--drawer-viewport-padding)));
114118
}
115119

116120
&[data-ending-style][data-swipe-dismiss] {
117-
transition-duration: calc(var(--drawer-swipe-release-duration, 1) * 400ms);
121+
transition-duration: calc(var(--drawer-swipe-release-strength, 1) * 400ms);
118122
}
119123

120124
@supports (-webkit-touch-callout: none) {

‎docs/src/app/(docs)/react/components/drawer/demos/hero/tailwind/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ export default function ExampleDrawer() {
77
Open drawer
88
</Drawer.Trigger>
99
<Drawer.Portal>
10-
<Drawer.Backdrop className="fixed inset-0 min-h-dvh bg-black [--drawer-backdrop-opacity:0.2] opacity-[calc(var(--drawer-backdrop-opacity)*(1-clamp(0,calc(var(--drawer-swipe-progress,0)*var(--drawer-swipe-progress-scale,1)),1)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-duration,1)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--drawer-backdrop-opacity:0.7]" />
11-
<Drawer.Viewport className="fixed inset-0 flex items-stretch justify-end supports-[-webkit-touch-callout:none]:p-[10px]">
12-
<Drawer.Popup className="h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-gray-50 p-6 pr-[calc(1.5rem+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto [transform:translateX(var(--drawer-swipe-movement-x,0px))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-3rem))] data-[starting-style]:[transform:translateX(calc(100%-3rem))] data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-duration,1)*400ms)] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-gray-300">
10+
<Drawer.Backdrop className="fixed inset-0 min-h-dvh bg-black [--drawer-backdrop-opacity:0.2] opacity-[calc(var(--drawer-backdrop-opacity)*(1-clamp(0,calc(var(--drawer-swipe-progress,0)*var(--drawer-swipe-progress-scale,1)),1)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-strength,1)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--drawer-backdrop-opacity:0.7]" />
11+
<Drawer.Viewport className="fixed inset-0 flex items-stretch justify-end [--drawer-viewport-padding:0px] p-[var(--drawer-viewport-padding)] supports-[-webkit-touch-callout:none]:[--drawer-viewport-padding:10px]">
12+
<Drawer.Popup className="[--drawer-bleed:3rem] h-full w-[calc(20rem+3rem)] max-w-[calc(100vw-3rem+3rem)] -mr-[3rem] bg-gray-50 p-6 pr-[calc(1.5rem+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto overscroll-contain touch-auto [transform:translateX(var(--drawer-swipe-movement-x,0px))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateX(calc(100%-var(--drawer-bleed)+var(--drawer-viewport-padding)))] data-[starting-style]:[transform:translateX(calc(100%-var(--drawer-bleed)+var(--drawer-viewport-padding)))] data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-strength,1)*400ms)] supports-[-webkit-touch-callout:none]:[--drawer-bleed:0px] supports-[-webkit-touch-callout:none]:mr-0 supports-[-webkit-touch-callout:none]:w-[20rem] supports-[-webkit-touch-callout:none]:max-w-[calc(100vw-20px)] supports-[-webkit-touch-callout:none]:rounded-[10px] supports-[-webkit-touch-callout:none]:pr-6 dark:outline-gray-300">
1313
<Drawer.Content className="mx-auto w-full max-w-[32rem]">
1414
<Drawer.Title className="-mt-1.5 mb-1 text-lg font-medium">Drawer</Drawer.Title>
1515
<Drawer.Description className="mb-6 text-base text-gray-600">

‎docs/src/app/(docs)/react/components/drawer/demos/indent-provider/css-modules/index.module.css‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,6 @@
105105
transition-property: opacity;
106106
transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
107107

108-
@supports (-webkit-touch-callout: none) {
109-
position: absolute;
110-
}
111-
112108
@media (prefers-color-scheme: dark) {
113109
--drawer-backdrop-opacity: 0.7;
114110
}
@@ -123,7 +119,7 @@
123119
}
124120

125121
&[data-ending-style][data-swipe-dismiss] {
126-
transition-duration: calc(var(--drawer-swipe-release-duration, 1) * 400ms);
122+
transition-duration: calc(var(--drawer-swipe-release-strength, 1) * 400ms);
127123
}
128124
}
129125

@@ -147,7 +143,7 @@
147143
background-color: var(--color-gray-50);
148144
color: var(--color-gray-900);
149145
overflow-y: auto;
150-
touch-action: none;
146+
overscroll-behavior: contain;
151147
transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
152148
transform: translateY(var(--drawer-swipe-movement-y, 0));
153149

@@ -165,7 +161,7 @@
165161
}
166162

167163
&[data-ending-style][data-swipe-dismiss] {
168-
transition-duration: calc(var(--drawer-swipe-release-duration, 1) * 400ms);
164+
transition-duration: calc(var(--drawer-swipe-release-strength, 1) * 400ms);
169165
}
170166
}
171167

‎docs/src/app/(docs)/react/components/drawer/demos/indent-provider/tailwind/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ export default function ExampleDrawer() {
1919
Open drawer
2020
</Drawer.Trigger>
2121
<Drawer.Portal container={portalContainer}>
22-
<Drawer.Backdrop className="absolute inset-0 min-h-dvh bg-black [--drawer-backdrop-opacity:0.2] opacity-[calc(var(--drawer-backdrop-opacity)*(1-clamp(0,calc(var(--drawer-swipe-progress,0)*var(--drawer-swipe-progress-scale,1)),1)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-duration,1)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--drawer-backdrop-opacity:0.7]" />
22+
<Drawer.Backdrop className="absolute inset-0 min-h-dvh bg-black [--drawer-backdrop-opacity:0.2] opacity-[calc(var(--drawer-backdrop-opacity)*(1-clamp(0,calc(var(--drawer-swipe-progress,0)*var(--drawer-swipe-progress-scale,1)),1)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-strength,1)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--drawer-backdrop-opacity:0.7]" />
2323
<Drawer.Viewport className="absolute inset-0 flex items-end justify-center">
24-
<Drawer.Popup className="box-border w-full max-h-[calc(80vh+var(--drawer-bleed))] -mb-[var(--drawer-bleed)] rounded-t-2xl outline outline-1 outline-gray-200 bg-gray-50 px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--drawer-bleed))] text-gray-900 overflow-y-auto transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y,0))] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-var(--drawer-bleed)))] data-[starting-style]:[transform:translateY(calc(100%-var(--drawer-bleed)))] data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-duration,1)*400ms)] dark:outline-gray-300">
24+
<Drawer.Popup className="box-border w-full max-h-[calc(80vh+var(--drawer-bleed))] -mb-[var(--drawer-bleed)] rounded-t-2xl outline outline-1 outline-gray-200 bg-gray-50 px-6 py-4 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+var(--drawer-bleed))] text-gray-900 overflow-y-auto overscroll-contain transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] [transform:translateY(var(--drawer-swipe-movement-y,0))] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-var(--drawer-bleed)))] data-[starting-style]:[transform:translateY(calc(100%-var(--drawer-bleed)))] data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-strength,1)*400ms)] dark:outline-gray-300">
2525
<div className="mx-auto mb-4 h-1 w-12 rounded-full bg-gray-300" />
2626
<Drawer.Content className="mx-auto w-full max-w-[32rem]">
2727
<Drawer.Title className="mt-0 mb-1 text-lg leading-7 font-medium tracking-[-0.0025em] text-center">

‎docs/src/app/(docs)/react/components/drawer/demos/keyboard/css-modules/index.module.css‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,6 @@
5050
transition-property: opacity;
5151
transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
5252

53-
@supports (-webkit-touch-callout: none) {
54-
position: absolute;
55-
}
56-
5753
@media (prefers-color-scheme: dark) {
5854
--drawer-backdrop-opacity: 0.7;
5955
}
@@ -68,7 +64,7 @@
6864
}
6965

7066
&[data-ending-style][data-swipe-dismiss] {
71-
transition-duration: calc(var(--drawer-swipe-release-duration, 1) * 400ms);
67+
transition-duration: calc(var(--drawer-swipe-release-strength, 1) * 400ms);
7268
}
7369
}
7470

@@ -93,6 +89,8 @@
9389
background-color: var(--color-gray-50);
9490
color: var(--color-gray-900);
9591
overflow-y: auto;
92+
overscroll-behavior: contain;
93+
touch-action: auto;
9694
transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1);
9795
transform: translateY(var(--drawer-swipe-movement-y, 0));
9896

@@ -110,7 +108,7 @@
110108
}
111109

112110
&[data-ending-style][data-swipe-dismiss] {
113-
transition-duration: calc(var(--drawer-swipe-release-duration, 1) * 400ms);
111+
transition-duration: calc(var(--drawer-swipe-release-strength, 1) * 400ms);
114112
}
115113
}
116114

‎docs/src/app/(docs)/react/components/drawer/demos/keyboard/tailwind/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ export default function ExampleDrawer() {
77
Open drawer with form fields
88
</Drawer.Trigger>
99
<Drawer.Portal>
10-
<Drawer.Backdrop className="fixed inset-0 min-h-dvh bg-black [--drawer-backdrop-opacity:0.2] opacity-[calc(var(--drawer-backdrop-opacity)*(1-clamp(0,calc(var(--drawer-swipe-progress,0)*var(--drawer-swipe-progress-scale,1)),1)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-duration,1)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--drawer-backdrop-opacity:0.7]" />
10+
<Drawer.Backdrop className="fixed inset-0 min-h-dvh bg-black [--drawer-backdrop-opacity:0.2] opacity-[calc(var(--drawer-backdrop-opacity)*(1-clamp(0,calc(var(--drawer-swipe-progress,0)*var(--drawer-swipe-progress-scale,1)),1)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:duration-0 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-strength,1)*400ms)] supports-[-webkit-touch-callout:none]:absolute dark:[--drawer-backdrop-opacity:0.7]" />
1111
<Drawer.Viewport className="fixed inset-0 flex items-end justify-center">
12-
<Drawer.Popup className="-mb-[3rem] w-full rounded-t-2xl bg-gray-50 p-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto max-h-[calc(100dvh+3rem)] [transform:translateY(var(--drawer-swipe-movement-y,0px))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-3rem))] data-[starting-style]:[transform:translateY(calc(100%-3rem))] data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-duration,1)*400ms)] dark:outline-gray-300">
12+
<Drawer.Popup className="-mb-[3rem] w-full rounded-t-2xl bg-gray-50 p-6 pb-[calc(1.5rem+env(safe-area-inset-bottom,0px)+3rem)] text-gray-900 outline outline-1 outline-gray-200 overflow-y-auto overscroll-contain touch-auto max-h-[calc(100dvh+3rem)] [transform:translateY(var(--drawer-swipe-movement-y,0px))] transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[swiping]:select-none data-[ending-style]:[transform:translateY(calc(100%-3rem))] data-[starting-style]:[transform:translateY(calc(100%-3rem))] data-[ending-style]:data-[swipe-dismiss]:duration-[calc(var(--drawer-swipe-release-strength,1)*400ms)] dark:outline-gray-300">
1313
<div className="mx-auto mb-4 h-1 w-12 rounded-full bg-gray-300" />
1414
<Drawer.Content className="mx-auto w-full max-w-[32rem]">
1515
<Drawer.Title className="mb-1 text-center text-lg font-medium">

‎docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/css-modules/index.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@
9595
box-sizing: border-box;
9696
height: 100%;
9797
overscroll-behavior: contain;
98+
touch-action: auto;
9899
}
99100

100101
.ScrollContent {

‎docs/src/app/(docs)/react/components/drawer/demos/mobile-nav/tailwind/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default function ExampleDrawerMobileNav() {
2929
style={{ position: undefined }}
3030
className="box-border h-full overscroll-contain transition-[transform,translate] duration-[600ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] group-data-[starting-style]:translate-y-[100dvh] group-data-[ending-style]:pointer-events-none"
3131
>
32-
<ScrollArea.Viewport className="box-border h-full overscroll-contain">
32+
<ScrollArea.Viewport className="box-border h-full overscroll-contain touch-auto">
3333
<ScrollArea.Content className="flex min-h-full items-end justify-center pt-8 md:py-16 md:px-16">
3434
<Drawer.Popup className="group box-border w-full max-w-[42rem] outline-none transition-transform duration-[800ms] ease-[cubic-bezier(0.45,1.005,0,1.005)] [transform:translateY(var(--drawer-swipe-movement-y,0px))] data-[swiping]:select-none data-[ending-style]:[transform:translateY(max(100dvh,100%))] data-[ending-style]:duration-[350ms] data-[ending-style]:ease-[cubic-bezier(0.375,0.015,0.545,0.455)]">
3535
<nav

0 commit comments

Comments
 (0)