@astryxdesign/core 0.7.7-canary.f88f5dc → 0.7.7-canary.fc68123
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/BottomSheet/BottomSheetPanel.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheetPanel.js +1 -1
- package/dist/Resizable/ResizeHandle.d.ts +2 -1
- package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
- package/dist/Resizable/ResizeHandle.js +99 -77
- package/dist/astryx.css +18 -4
- package/dist/gestures/PressTracker.d.ts.map +1 -1
- package/dist/gestures/PressTracker.js +4 -3
- package/dist/motion/animatedLayout.d.ts.map +1 -1
- package/dist/motion/animatedLayout.js +5 -6
- package/dist/motion/progress.d.ts +88 -0
- package/dist/motion/progress.d.ts.map +1 -0
- package/dist/motion/progress.js +128 -0
- package/package.json +4 -4
- package/src/BottomSheet/BottomSheetPanel.tsx +4 -0
- package/src/Resizable/Resizable.doc.mjs +5 -4
- package/src/Resizable/ResizeHandle.tsx +167 -109
- package/src/gestures/PressTracker.ts +4 -3
- package/src/gestures/README.md +7 -1
- package/src/motion/README.md +1 -0
- package/src/motion/animatedLayout.ts +5 -4
- package/src/motion/progress.ts +155 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AA+M3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AAyJD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,cAAsB,EACtB,cAAc,EACd,eAAe,EACf,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAyZvB;yBAjbe,gBAAgB"}
|
|
@@ -613,7 +613,7 @@ export function BottomSheetPanel({
|
|
|
613
613
|
}),
|
|
614
614
|
children: [/*#__PURE__*/_jsx("div", {
|
|
615
615
|
...{
|
|
616
|
-
className: "x10l6tqk x13vifvy x1o0tod xtijo5x x1vjfegm x78zum5 x6s0dn4 xl56j7k xvpftlf xafqdz2 x1j4r261 x1jm3nie x16khyan x1cpjm7i x1oke5ut x34npju xmwhqxd x1hw15nc"
|
|
616
|
+
className: "x10l6tqk x13vifvy x1o0tod xtijo5x x1vjfegm x78zum5 x6s0dn4 xl56j7k xvpftlf xafqdz2 x1so62im x1j4r261 x1jm3nie x16khyan x1cpjm7i x1oke5ut x34npju xmwhqxd x1hw15nc"
|
|
617
617
|
},
|
|
618
618
|
...handleProps,
|
|
619
619
|
"aria-hidden": "true"
|
|
@@ -43,7 +43,8 @@ export interface ResizeHandleProps extends Omit<BaseProps<HTMLDivElement>, 'styl
|
|
|
43
43
|
*/
|
|
44
44
|
isAlwaysVisible?: boolean;
|
|
45
45
|
/**
|
|
46
|
-
* Which side of the divider line the pill sits on.
|
|
46
|
+
* Which side of the divider line the pill sits on. It moves only the pill:
|
|
47
|
+
* the grab zone stays centred on the divider.
|
|
47
48
|
* - `'auto'` — panel side by default, flips when panel is collapsed to 0px
|
|
48
49
|
* - `'start'` — left (horizontal) or top (vertical)
|
|
49
50
|
* - `'end'` — right (horizontal) or bottom (vertical)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/Resizable/ResizeHandle.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAiB,SAAS,EAAC,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAC;AAkBxB,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AA8PzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,SAAS,CAAC,cAAc,CAAC,EACzB,OAAO,CACR;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAEhC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,YAAY,CAAC,EAC3B,SAAwB,EACxB,QAAQ,EAAE,YAAuB,EACjC,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAsB,EACtB,aAAsB,EACtB,KAAK,EAAE,cAAc,EACrB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,iBAAiB,+BA6SnB;yBA5Te,YAAY"}
|
|
@@ -8,25 +8,8 @@
|
|
|
8
8
|
* @output Styled drag handle with WAI-ARIA separator role and keyboard support
|
|
9
9
|
* @position Between resizable panels; consumed directly by builders
|
|
10
10
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* Pill grip indicator can sit on either side of the divider (or centered)
|
|
14
|
-
* via pillPlacement. Default 'auto' places the pill on the panel side and
|
|
15
|
-
* flips when the panel collapses to 0px so it stays accessible.
|
|
16
|
-
*
|
|
17
|
-
* Pill placement uses a single stylex dynamic style that accepts a direction
|
|
18
|
-
* multiplier (-1 or 1). The pill element has its own themeProps
|
|
19
|
-
* ('resize-handle-pill') so themes can target size/shape directly.
|
|
20
|
-
*
|
|
21
|
-
* While the panel is collapsed, aria-valuenow is clamped to aria-valuemin
|
|
22
|
-
* (a value below the minimum is invalid per WCAG 4.1.2) and a localized
|
|
23
|
-
* "Collapsed" aria-valuetext announces the real state.
|
|
24
|
-
*
|
|
25
|
-
* The handle's input (the pointer drag, the keys, the double-click) is
|
|
26
|
-
* resizeGesture.ts. ResizeHandle forwards its React events to it, over the
|
|
27
|
-
* region its `resizable` prop describes. A drag takes pointer capture on the grab zone.
|
|
28
|
-
* The gesture's move, up and cancel events then go there, as in Slider, even
|
|
29
|
-
* over an embedded frame.
|
|
11
|
+
* A drag takes pointer capture on the element it starts on, so moves over an
|
|
12
|
+
* embedded frame still arrive.
|
|
30
13
|
*/
|
|
31
14
|
import { useEffect, useRef, useState } from 'react';
|
|
32
15
|
import * as stylex from '@stylexjs/stylex';
|
|
@@ -53,28 +36,6 @@ function resolveEffectiveSide(pillPlacement, isReversed, isCollapsed) {
|
|
|
53
36
|
}
|
|
54
37
|
return panelSide;
|
|
55
38
|
}
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* Hit-area inline bias, expressed as a fraction of the pill's per-side offset.
|
|
59
|
-
*
|
|
60
|
-
* The visible pill is placed by `pillOffsetX`/`pillOffsetY`: anchored at the
|
|
61
|
-
* divider's inline-start edge and pushed one grip-width-plus-gap toward the
|
|
62
|
-
* panel side via a PHYSICAL translate (dir −1 = start, +1 = end). Because that
|
|
63
|
-
* offset is physical, the pill sits on the same physical side of the divider in
|
|
64
|
-
* both LTR and RTL. The grab zone must sit OVER that pill, so it has to use the
|
|
65
|
-
* exact same anchor + physical-offset construction as the pill (just wider) —
|
|
66
|
-
* anchoring the hit area at the divider centre (`insetInlineStart: 50%`) and
|
|
67
|
-
* biasing with a percentage translate mixes a logical anchor (which flips under
|
|
68
|
-
* RTL) with a physical translate (which doesn't), leaving the grab zone stranded
|
|
69
|
-
* to one side under RTL. Returning the pill's `dir` here lets the hit area reuse
|
|
70
|
-
* `pillOffsetX`/`pillOffsetY` so the two elements are positioned identically.
|
|
71
|
-
*/
|
|
72
|
-
function hitAreaBiasDir(effectiveSide) {
|
|
73
|
-
if (effectiveSide === 'center') {
|
|
74
|
-
return null;
|
|
75
|
-
}
|
|
76
|
-
return effectiveSide === 'start' ? -1 : 1;
|
|
77
|
-
}
|
|
78
39
|
const styles = {
|
|
79
40
|
handle: {
|
|
80
41
|
kVAEAm: "x1n2onr6",
|
|
@@ -108,6 +69,14 @@ const styles = {
|
|
|
108
69
|
kZKoxP: "x5kfih4",
|
|
109
70
|
$$css: true
|
|
110
71
|
},
|
|
72
|
+
overlayHorizontalOnShortPane: {
|
|
73
|
+
kzqmXN: "x1a4a7d3",
|
|
74
|
+
$$css: true
|
|
75
|
+
},
|
|
76
|
+
overlayVerticalOnShortPane: {
|
|
77
|
+
kZKoxP: "xcuarzx",
|
|
78
|
+
$$css: true
|
|
79
|
+
},
|
|
111
80
|
horizontal: {
|
|
112
81
|
kzqmXN: "x1i1rx1s",
|
|
113
82
|
kZKoxP: "x5yr21d",
|
|
@@ -169,10 +138,19 @@ const styles = {
|
|
|
169
138
|
k3aq6I: "x1cb1t30",
|
|
170
139
|
$$css: true
|
|
171
140
|
},
|
|
141
|
+
hitAreaWithinHandleX: {
|
|
142
|
+
kzqmXN: "x5wh7xo",
|
|
143
|
+
$$css: true
|
|
144
|
+
},
|
|
145
|
+
hitAreaWithinHandleY: {
|
|
146
|
+
kZKoxP: "x1tvnn7s",
|
|
147
|
+
$$css: true
|
|
148
|
+
},
|
|
172
149
|
pill: {
|
|
173
150
|
kVAEAm: "x10l6tqk",
|
|
174
151
|
kY2c9j: "xhtitgo",
|
|
175
|
-
|
|
152
|
+
kFalU9: "x5ve5x3",
|
|
153
|
+
kfSwDN: "x87ps6o",
|
|
176
154
|
kaIpWk: "xjspbzw",
|
|
177
155
|
kWkggS: "x1m4xfpy",
|
|
178
156
|
k1ekBW: "x1wbls7o",
|
|
@@ -181,6 +159,14 @@ const styles = {
|
|
|
181
159
|
k87sOh: "xwa60dl",
|
|
182
160
|
$$css: true
|
|
183
161
|
},
|
|
162
|
+
pillGrabHorizontal: {
|
|
163
|
+
kkrTdU: "xicojor x16khyan",
|
|
164
|
+
$$css: true
|
|
165
|
+
},
|
|
166
|
+
pillGrabVertical: {
|
|
167
|
+
kkrTdU: "xyozgr7 x16khyan",
|
|
168
|
+
$$css: true
|
|
169
|
+
},
|
|
184
170
|
pillHorizontal: {
|
|
185
171
|
kzqmXN: "x1g8rjiy",
|
|
186
172
|
kZKoxP: "x18to7ep",
|
|
@@ -193,6 +179,7 @@ const styles = {
|
|
|
193
179
|
},
|
|
194
180
|
pillHidden: {
|
|
195
181
|
kSiTet: "xg01cxk",
|
|
182
|
+
kfzvcC: "x47corl",
|
|
196
183
|
$$css: true
|
|
197
184
|
},
|
|
198
185
|
pillVisible: {
|
|
@@ -201,26 +188,58 @@ const styles = {
|
|
|
201
188
|
},
|
|
202
189
|
pillHover: {
|
|
203
190
|
kSiTet: "x1hc1fzr",
|
|
191
|
+
kfzvcC: "x67bb7w",
|
|
204
192
|
kWkggS: "x1m4xfpy",
|
|
205
193
|
$$css: true
|
|
206
194
|
},
|
|
207
195
|
pillActive: {
|
|
208
196
|
kSiTet: "x1hc1fzr",
|
|
197
|
+
kfzvcC: "x67bb7w",
|
|
209
198
|
kWkggS: "x7njt3n",
|
|
210
199
|
$$css: true
|
|
200
|
+
},
|
|
201
|
+
pillBridgeRight: {
|
|
202
|
+
kgeoSG: "x1cpjm7i",
|
|
203
|
+
kEoFBp: "x1hmns74",
|
|
204
|
+
kGOzcv: "x1nc033x",
|
|
205
|
+
kSJ0CW: "x1682cnc x7my30s",
|
|
206
|
+
koaPKo: "x5ig7ga x3k25x4",
|
|
207
|
+
$$css: true
|
|
208
|
+
},
|
|
209
|
+
pillBridgeLeft: {
|
|
210
|
+
kgeoSG: "x1cpjm7i",
|
|
211
|
+
kEoFBp: "x1hmns74",
|
|
212
|
+
kGOzcv: "x1nc033x",
|
|
213
|
+
kSJ0CW: "x1vl71nl xnx00js",
|
|
214
|
+
koaPKo: "xtyp5od x17kcdp5",
|
|
215
|
+
$$css: true
|
|
216
|
+
},
|
|
217
|
+
pillBridgeDown: {
|
|
218
|
+
kgeoSG: "x1cpjm7i",
|
|
219
|
+
kEoFBp: "x1hmns74",
|
|
220
|
+
kpsdNU: "xm4btww",
|
|
221
|
+
k96MEf: "x1y3wzot",
|
|
222
|
+
k5Ofw7: "xxgnp13",
|
|
223
|
+
$$css: true
|
|
224
|
+
},
|
|
225
|
+
pillBridgeUp: {
|
|
226
|
+
kgeoSG: "x1cpjm7i",
|
|
227
|
+
kEoFBp: "x1hmns74",
|
|
228
|
+
kpsdNU: "xm4btww",
|
|
229
|
+
k96MEf: "x1phjwh8",
|
|
230
|
+
k5Ofw7: "xhq5o37",
|
|
231
|
+
$$css: true
|
|
211
232
|
}
|
|
212
233
|
};
|
|
213
234
|
|
|
214
235
|
// Dynamic styles — avoids inline style overrides.
|
|
215
236
|
// Each axis gets its own function since StyleX requires static structure.
|
|
216
237
|
const _temp = {
|
|
217
|
-
|
|
218
|
-
k3aq6I: "x11wx31z " + "x75qhwu",
|
|
238
|
+
kzqmXN: "x5lhr3w",
|
|
219
239
|
"$$css": true
|
|
220
240
|
};
|
|
221
241
|
const _temp2 = {
|
|
222
|
-
|
|
223
|
-
k3aq6I: "xsqj5wx",
|
|
242
|
+
kZKoxP: "x16ye13r",
|
|
224
243
|
"$$css": true
|
|
225
244
|
};
|
|
226
245
|
const _temp3 = {
|
|
@@ -234,12 +253,11 @@ const _temp4 = {
|
|
|
234
253
|
"$$css": true
|
|
235
254
|
};
|
|
236
255
|
const dynamicStyles = {
|
|
237
|
-
|
|
238
|
-
"--x-
|
|
239
|
-
"--x-sj6hyi": `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px))` != null ? `translateX(calc(${dir} * (3px + ${spacingVars['--spacing-1']}) + 6.5px))` : undefined
|
|
256
|
+
hitAreaLengthX: pane => [_temp, {
|
|
257
|
+
"--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`min(${spacingVars['--spacing-4']}, ${pane}px)`)
|
|
240
258
|
}],
|
|
241
|
-
|
|
242
|
-
"--x-
|
|
259
|
+
hitAreaLengthY: pane => [_temp2, {
|
|
260
|
+
"--x-height": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`min(${spacingVars['--spacing-4']}, ${pane}px)`)
|
|
243
261
|
}],
|
|
244
262
|
pillOffsetX: dir => [_temp3, {
|
|
245
263
|
"--x-transform": `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)` != null ? `translate(calc(${dir} * (100% + ${spacingVars['--spacing-1']})), -50%)` : undefined
|
|
@@ -358,9 +376,11 @@ export function ResizeHandle({
|
|
|
358
376
|
const gesture = resizable != null ? regionGesture : null;
|
|
359
377
|
const isCollapsed = resizable?._isCollapsed ?? false;
|
|
360
378
|
const effectiveSide = resolveEffectiveSide(pillPlacement, isReversed, isCollapsed);
|
|
361
|
-
//
|
|
362
|
-
//
|
|
363
|
-
|
|
379
|
+
// An inline zone reaches at most half of the pane the Handle resizes. An
|
|
380
|
+
// overlay Handle takes at most half of it. A collapsed pane, or one at 0px,
|
|
381
|
+
// has nothing to protect and keeps the whole zone.
|
|
382
|
+
const paneSize = resizable?._size;
|
|
383
|
+
const paneLength = isCollapsed || paneSize == null || paneSize <= 0 ? undefined : paneSize;
|
|
364
384
|
const isInteracting = isHovered || isFocused;
|
|
365
385
|
|
|
366
386
|
// A handle whose axis disagrees with its region drags along one axis while
|
|
@@ -402,6 +422,26 @@ export function ResizeHandle({
|
|
|
402
422
|
const effectiveMax = resizable ? getEffectiveMaxPx(resizable) ?? (resizable._maxSizePx !== Infinity ? resizable._maxSizePx : undefined) : undefined;
|
|
403
423
|
const ariaValueMax = effectiveMax != null && Number.isFinite(effectiveMax) ? effectiveMax : undefined;
|
|
404
424
|
const ariaValueText = resizable != null && isCollapsed ? t('@astryx.resizable.collapsed') : undefined;
|
|
425
|
+
|
|
426
|
+
// The Grip pill takes the pointer as the Grab zone does, so a pill drawn
|
|
427
|
+
// outside the zone still resizes.
|
|
428
|
+
const grabHandlers = {
|
|
429
|
+
onPointerDown: e => {
|
|
430
|
+
if (!isDisabled) {
|
|
431
|
+
gesture?.pointerDown(e);
|
|
432
|
+
}
|
|
433
|
+
},
|
|
434
|
+
onPointerMove: e => gesture?.pointerMove(e),
|
|
435
|
+
onPointerUp: e => gesture?.pointerUp(e),
|
|
436
|
+
onPointerCancel: e => gesture?.pointerCancel(e),
|
|
437
|
+
onLostPointerCapture: e => gesture?.pointerCancel(e),
|
|
438
|
+
onPointerEnter: () => setIsHovered(true),
|
|
439
|
+
onPointerLeave: () => {
|
|
440
|
+
if (!isDragging) {
|
|
441
|
+
setIsHovered(false);
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
};
|
|
405
445
|
return /*#__PURE__*/_jsxs("div", {
|
|
406
446
|
ref: useMergedRefs(ref, handleRef),
|
|
407
447
|
role: "separator",
|
|
@@ -421,7 +461,7 @@ export function ResizeHandle({
|
|
|
421
461
|
onFocus: () => setIsFocused(true),
|
|
422
462
|
onBlur: () => setIsFocused(false),
|
|
423
463
|
"data-resizing": isDragging || undefined,
|
|
424
|
-
...mergeProps(themeProps('resize-handle'), focusOutlineProps.focusVisible(styles.handle, isOverlay && styles.overlay, isOverlay && (isHorizontal ? styles.overlayHorizontal : styles.overlayVertical), !isOverlay && (isHorizontal ? styles.horizontal : styles.vertical), !isOverlay && !hasDivider && (isHorizontal ? styles.noDividerHorizontal : styles.noDividerVertical), !isOverlay && hasDivider && isInteracting && !isDragging && styles.handleHover, !isOverlay && hasDivider && isDragging && styles.handleActive, isDisabled && styles.disabled, xstyle), className),
|
|
464
|
+
...mergeProps(themeProps('resize-handle'), focusOutlineProps.focusVisible(styles.handle, isOverlay && styles.overlay, isOverlay && (isHorizontal ? styles.overlayHorizontal : styles.overlayVertical), isOverlay && paneLength != null && (isHorizontal ? styles.overlayHorizontalOnShortPane : styles.overlayVerticalOnShortPane), !isOverlay && (isHorizontal ? styles.horizontal : styles.vertical), !isOverlay && !hasDivider && (isHorizontal ? styles.noDividerHorizontal : styles.noDividerVertical), !isOverlay && hasDivider && isInteracting && !isDragging && styles.handleHover, !isOverlay && hasDivider && isDragging && styles.handleActive, isDisabled && styles.disabled, xstyle), className),
|
|
425
465
|
...props,
|
|
426
466
|
// Keyboard resizing must fire from the focusable separator, not a child:
|
|
427
467
|
// keydown fires on the focused element and bubbles up, so a handler on a
|
|
@@ -435,29 +475,11 @@ export function ResizeHandle({
|
|
|
435
475
|
}
|
|
436
476
|
},
|
|
437
477
|
children: [/*#__PURE__*/_jsx("div", {
|
|
438
|
-
...stylex.props(styles.hitArea, isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical,
|
|
439
|
-
|
|
440
|
-
// centered (no bias) just center the hit area on the divider; when
|
|
441
|
-
// it's offset to a panel side, reuse the pill's physical-offset
|
|
442
|
-
// construction so the two stay aligned in LTR and RTL alike.
|
|
443
|
-
hitBiasDir == null ? isHorizontal ? rtlStyles.centerInline('0px') : styles.hitAreaCenteredY : isHorizontal ? dynamicStyles.hitAreaOffsetX(hitBiasDir) : dynamicStyles.hitAreaOffsetY(hitBiasDir), isDisabled && styles.disabled),
|
|
444
|
-
onPointerDown: e => {
|
|
445
|
-
if (!isDisabled) {
|
|
446
|
-
gesture?.pointerDown(e);
|
|
447
|
-
}
|
|
448
|
-
},
|
|
449
|
-
onPointerMove: e => gesture?.pointerMove(e),
|
|
450
|
-
onPointerUp: e => gesture?.pointerUp(e),
|
|
451
|
-
onPointerCancel: e => gesture?.pointerCancel(e),
|
|
452
|
-
onLostPointerCapture: e => gesture?.pointerCancel(e),
|
|
453
|
-
onPointerEnter: () => setIsHovered(true),
|
|
454
|
-
onPointerLeave: () => {
|
|
455
|
-
if (!isDragging) {
|
|
456
|
-
setIsHovered(false);
|
|
457
|
-
}
|
|
458
|
-
}
|
|
478
|
+
...stylex.props(styles.hitArea, isHorizontal ? styles.hitAreaHorizontal : styles.hitAreaVertical, isHorizontal ? rtlStyles.centerInline('0px') : styles.hitAreaCenteredY, isOverlay && (isHorizontal ? styles.hitAreaWithinHandleX : styles.hitAreaWithinHandleY), !isOverlay && paneLength != null && (isHorizontal ? dynamicStyles.hitAreaLengthX(paneLength) : dynamicStyles.hitAreaLengthY(paneLength)), isDisabled && styles.disabled),
|
|
479
|
+
...grabHandlers
|
|
459
480
|
}), children ?? /*#__PURE__*/_jsx("div", {
|
|
460
|
-
...mergeProps(themeProps('resize-handle-pill'), stylex.props(styles.pill, isHorizontal ? styles.pillHorizontal : styles.pillVertical, effectiveSide === 'center' ? rtlStyles.centerInline('-50%') : isHorizontal ? dynamicStyles.pillOffsetX(effectiveSide === 'start' ? -1 : 1) : dynamicStyles.pillOffsetY(effectiveSide === 'start' ? -1 : 1), isAlwaysVisible ? styles.pillVisible : styles.pillHidden, isInteracting && !isDragging && styles.pillHover, isDragging && styles.pillActive))
|
|
481
|
+
...mergeProps(themeProps('resize-handle-pill'), stylex.props(styles.pill, isHorizontal ? styles.pillHorizontal : styles.pillVertical, effectiveSide === 'center' ? rtlStyles.centerInline('-50%') : isHorizontal ? dynamicStyles.pillOffsetX(effectiveSide === 'start' ? -1 : 1) : dynamicStyles.pillOffsetY(effectiveSide === 'start' ? -1 : 1), isHorizontal ? styles.pillGrabHorizontal : styles.pillGrabVertical, isAlwaysVisible ? styles.pillVisible : styles.pillHidden, !isAlwaysVisible && effectiveSide !== 'center' && (isHorizontal ? effectiveSide === 'start' ? styles.pillBridgeRight : styles.pillBridgeLeft : effectiveSide === 'start' ? styles.pillBridgeDown : styles.pillBridgeUp), isInteracting && !isDragging && styles.pillHover, isDragging && styles.pillActive, isDisabled && styles.disabled)),
|
|
482
|
+
...grabHandlers
|
|
461
483
|
})]
|
|
462
484
|
});
|
|
463
485
|
}
|
package/dist/astryx.css
CHANGED
|
@@ -47,8 +47,6 @@
|
|
|
47
47
|
@property --x-paddingInline { syntax: "*"; inherits: false;}
|
|
48
48
|
@property --x-paddingInlineEnd { syntax: "*"; inherits: false;}
|
|
49
49
|
@property --x-paddingInlineStart { syntax: "*"; inherits: false;}
|
|
50
|
-
@property --x-qthpiu { syntax: "*"; inherits: false;}
|
|
51
|
-
@property --x-sj6hyi { syntax: "*"; inherits: false;}
|
|
52
50
|
@property --x-top { syntax: "*"; inherits: false;}
|
|
53
51
|
@property --x-transform { syntax: "*"; inherits: false;}
|
|
54
52
|
@property --x-WebkitLineClamp { syntax: "*"; inherits: false;}
|
|
@@ -1435,7 +1433,6 @@
|
|
|
1435
1433
|
.xdo3dbm:not(#\#):not(#\#):not(#\#){transform:translateY(calc(-2 * var(--spacing-2))) scale(.92)}
|
|
1436
1434
|
.x149p1fo:not(#\#):not(#\#):not(#\#){transform:translateY(var(--_toast-swipe-exit-y,var(--_toast-swipe-y,var(--_toast-slide-y,var(--spacing-2))))) scale(var(--_toast-swipe-scale,1))}
|
|
1437
1435
|
.x1qk3xlt:not(#\#):not(#\#):not(#\#){transform:translateY(var(--_toast-swipe-y,0px)) scale(var(--_toast-swipe-scale,1))}
|
|
1438
|
-
.x11wx31z:not(#\#):not(#\#):not(#\#){transform:var(--x-qthpiu)}
|
|
1439
1436
|
.xsqj5wx:not(#\#):not(#\#):not(#\#){transform:var(--x-transform)}
|
|
1440
1437
|
.xd00j3c:not(#\#):not(#\#):not(#\#){transition-behavior:allow-discrete}
|
|
1441
1438
|
.x5h36tt:not(#\#):not(#\#):not(#\#){transition-delay:.15s}
|
|
@@ -1625,7 +1622,6 @@
|
|
|
1625
1622
|
.xttggg:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}
|
|
1626
1623
|
.x1nyx83j:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translateX(50%)}
|
|
1627
1624
|
.x9cjr8z:popover-open:not(#\#):not(#\#):not(#\#){transform:translateY(0)}
|
|
1628
|
-
.x75qhwu:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:var(--x-sj6hyi)}
|
|
1629
1625
|
.x1rm9qnc:focus-within:not(#\#):not(#\#):not(#\#){z-index:1}
|
|
1630
1626
|
.xf5goe6.xf5goe6:where(.astryx-input-group > [data-astryx-input-group-item]):focus-visible:not(#\#):not(#\#):not(#\#){z-index:2}
|
|
1631
1627
|
.x151j4nw:has(input[aria-disabled="true"]:focus-visible):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 2px var(--color-accent-muted)}
|
|
@@ -1914,6 +1910,8 @@
|
|
|
1914
1910
|
.x14o5nre:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--text-supporting-size) * var(--text-supporting-leading))}
|
|
1915
1911
|
.xw1wawg:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(44px - 8px)}
|
|
1916
1912
|
.xg7h5cd:not(#\#):not(#\#):not(#\#):not(#\#){height:fit-content}
|
|
1913
|
+
.xcuarzx:not(#\#):not(#\#):not(#\#):not(#\#){height:min(var(--resize-handle-hit-area,16px),50%)}
|
|
1914
|
+
.x1tvnn7s:not(#\#):not(#\#):not(#\#):not(#\#){height:min(var(--spacing-4),100%)}
|
|
1917
1915
|
.xsbjeu0:not(#\#):not(#\#):not(#\#):not(#\#){height:min(var(--spacing-6),40px)}
|
|
1918
1916
|
.x89eeu2:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_icon-height,.75rem)}
|
|
1919
1917
|
.x1jxzzob:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_icon-height,1.25rem)}
|
|
@@ -2194,6 +2192,8 @@
|
|
|
2194
2192
|
.xezivpi:not(#\#):not(#\#):not(#\#):not(#\#){width:max-content}
|
|
2195
2193
|
.x1qwjaml:not(#\#):not(#\#):not(#\#):not(#\#){width:max(0px,calc(-1 * calc(var(--_item-swipe-travel,0px) * var(--_item-swipe-dir,1))))}
|
|
2196
2194
|
.x96shys:not(#\#):not(#\#):not(#\#):not(#\#){width:max(0px,calc(var(--_item-swipe-travel,0px) * var(--_item-swipe-dir,1)))}
|
|
2195
|
+
.x1a4a7d3:not(#\#):not(#\#):not(#\#):not(#\#){width:min(var(--resize-handle-hit-area,16px),50%)}
|
|
2196
|
+
.x5wh7xo:not(#\#):not(#\#):not(#\#):not(#\#){width:min(var(--spacing-4),100%)}
|
|
2197
2197
|
.x17cz0of:not(#\#):not(#\#):not(#\#):not(#\#){width:min(var(--spacing-6),40px)}
|
|
2198
2198
|
.x13u0t82:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_icon-width,.75rem)}
|
|
2199
2199
|
.x1vvatio:not(#\#):not(#\#):not(#\#):not(#\#){width:var(--_icon-width,1.25rem)}
|
|
@@ -2313,7 +2313,9 @@
|
|
|
2313
2313
|
.xq94oqs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:var(--radius-full)}
|
|
2314
2314
|
.xtb6wbx:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-radius:var(--radius-inner)}
|
|
2315
2315
|
.x17gn2l9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{grid-column:1}
|
|
2316
|
+
.x1nc033x:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-block:0}
|
|
2316
2317
|
.xd54j2p:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-block:0}
|
|
2318
|
+
.xm4btww:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline:0}
|
|
2317
2319
|
.xpsyfx0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{margin-block:0}
|
|
2318
2320
|
.x1qqcexc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{margin-inline:0}
|
|
2319
2321
|
.x1xb3ux:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{overflow:hidden}
|
|
@@ -2390,9 +2392,13 @@
|
|
|
2390
2392
|
.xwnwc82:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{forced-color-adjust:none}
|
|
2391
2393
|
.xekda60:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:-2px}
|
|
2392
2394
|
.x1unh1gc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-end:0}
|
|
2395
|
+
.xtyp5od:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:0}
|
|
2396
|
+
.x5ig7ga:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:calc(-1 * var(--spacing-1) - 1px)}
|
|
2393
2397
|
.x1s13ptm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:var(--_slider-hit-end)}
|
|
2394
2398
|
.xvw6utc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:-2px}
|
|
2399
|
+
.x1682cnc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:0}
|
|
2395
2400
|
.x1iygr5g:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-start:0}
|
|
2401
|
+
.x1vl71nl:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:calc(-1 * var(--spacing-1) - 1px)}
|
|
2396
2402
|
.x1km86hw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-start:calc(var(--spacing-4) + var(--_codeblock-gutter-width) + var(--spacing-3))}
|
|
2397
2403
|
.xu2wnl0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:var(--_slider-hit-start)}
|
|
2398
2404
|
.x15bqym3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-datetime-edit{line-height:inherit}
|
|
@@ -2454,6 +2460,10 @@
|
|
|
2454
2460
|
.xk7vujl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to left,var(--color-shadow),transparent)}
|
|
2455
2461
|
.xlptwl5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-image:linear-gradient(to right,var(--color-shadow),transparent)}
|
|
2456
2462
|
.xf7ekc6.xf7ekc6:where(:has(.x1lrrceh:is(*))):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{content:none}
|
|
2463
|
+
.x3k25x4:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:0}
|
|
2464
|
+
.x17kcdp5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:calc(-1 * var(--spacing-1) - 1px)}
|
|
2465
|
+
.xnx00js:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:0}
|
|
2466
|
+
.x7my30s:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:calc(-1 * var(--spacing-1) - 1px)}
|
|
2457
2467
|
.xdq8fwl:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transform-origin:right center}
|
|
2458
2468
|
.x1c108yo:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translateX(-100%)}
|
|
2459
2469
|
.x12ayhd5:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translateX(100%)}
|
|
@@ -2513,6 +2523,8 @@
|
|
|
2513
2523
|
.x267z7u:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-top-width:var(--_segmented-lens-border-top-width,0px)}
|
|
2514
2524
|
.xe80sof:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:-2px}
|
|
2515
2525
|
.x1xrz1ek:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{bottom:0}
|
|
2526
|
+
.xhq5o37:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:0}
|
|
2527
|
+
.xxgnp13:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:calc(-1 * var(--spacing-1) - 1px)}
|
|
2516
2528
|
.x17wid7s:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:var(--_slider-hit-bottom)}
|
|
2517
2529
|
.x1fv2pxm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{height:var(--_segmented-after-height,0px)}
|
|
2518
2530
|
.xlxjeq7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:var(--_segmented-lens-height,0px)}
|
|
@@ -2524,6 +2536,8 @@
|
|
|
2524
2536
|
.xec4aax:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-date-and-time-value{min-height:0}
|
|
2525
2537
|
.x51xajf:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:-2px}
|
|
2526
2538
|
.x1m1drc7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{top:0}
|
|
2539
|
+
.x1y3wzot:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:0}
|
|
2540
|
+
.x1phjwh8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:calc(-1 * var(--spacing-1) - 1px)}
|
|
2527
2541
|
.x3g43gi:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{top:var(--_segmented-after-top,0px)}
|
|
2528
2542
|
.x319kzk:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:var(--_segmented-lens-top,0px)}
|
|
2529
2543
|
.xw5uirw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:var(--_slider-hit-top)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PressTracker.d.ts","sourceRoot":"","sources":["../../src/gestures/PressTracker.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PressTracker.d.ts","sourceRoot":"","sources":["../../src/gestures/PressTracker.ts"],"names":[],"mappings":"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"}
|
|
@@ -47,7 +47,8 @@
|
|
|
47
47
|
*/
|
|
48
48
|
|
|
49
49
|
import { UIKIT_CONTROL, UIKIT_PAN, UIKIT_PRESS } from "../motion/uikit/gestures.js";
|
|
50
|
-
|
|
50
|
+
// Importing the whole table bundles its curves into each press-tracking control.
|
|
51
|
+
import { press as pressClocks } from "../motion/uikit/timing.js";
|
|
51
52
|
import { travel } from "./geometry.js";
|
|
52
53
|
const PRESS = UIKIT_PRESS;
|
|
53
54
|
|
|
@@ -63,7 +64,7 @@ export const PRESS_PROFILES = {
|
|
|
63
64
|
// The shared press styles release every surface on the deselect clock
|
|
64
65
|
// until a control runs its own release (UIButton's 250 ms), so a
|
|
65
66
|
// painter's `fading` never outlasts the fade it shows.
|
|
66
|
-
releaseMs:
|
|
67
|
+
releaseMs: pressClocks.highlightOutMs
|
|
67
68
|
},
|
|
68
69
|
/**
|
|
69
70
|
* A table or collection cell: inside a scroll view it highlights after the
|
|
@@ -74,7 +75,7 @@ export const PRESS_PROFILES = {
|
|
|
74
75
|
highlightDelay: 'inScrollers',
|
|
75
76
|
cancelTravel: UIKIT_PAN.hysteresis.value,
|
|
76
77
|
quickTapFlash: 0,
|
|
77
|
-
releaseMs:
|
|
78
|
+
releaseMs: pressClocks.highlightOutMs
|
|
78
79
|
}
|
|
79
80
|
};
|
|
80
81
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animatedLayout.d.ts","sourceRoot":"","sources":["../../src/motion/animatedLayout.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"animatedLayout.d.ts","sourceRoot":"","sources":["../../src/motion/animatedLayout.ts"],"names":[],"mappings":"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"}
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
import { motionRole } from "./roles.js";
|
|
83
83
|
import { inertCopy, isCopyable, paintedBackground, placeOver, visiblePartCopy, wrapText } from "./transientCopy.js";
|
|
84
84
|
import { isSpring } from "./roleValue.js";
|
|
85
|
-
import {
|
|
85
|
+
import { progressCurve } from "./progress.js";
|
|
86
86
|
import { registerSpringsTable, SETTLE_SPRING } from "./uikit/springs.js";
|
|
87
87
|
import { reducedMotionCrossFade } from "./uikit/timing.js";
|
|
88
88
|
|
|
@@ -119,14 +119,13 @@ function settleSpring() {
|
|
|
119
119
|
return isSpring(value) ? value : SETTLE_SPRING;
|
|
120
120
|
}
|
|
121
121
|
function springProgress(description) {
|
|
122
|
-
const curve =
|
|
123
|
-
|
|
124
|
-
to: 0
|
|
122
|
+
const curve = progressCurve(description, {
|
|
123
|
+
epsilon: 0.001
|
|
125
124
|
});
|
|
126
|
-
const durationMs = Math.max(1, curve.
|
|
125
|
+
const durationMs = Math.max(1, curve.duration * 1000);
|
|
127
126
|
return {
|
|
128
127
|
durationMs,
|
|
129
|
-
remaining: t => t >= durationMs ? 0 : curve.
|
|
128
|
+
remaining: t => t >= durationMs ? 0 : 1 - curve.at(t / 1000)
|
|
130
129
|
};
|
|
131
130
|
}
|
|
132
131
|
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file progress.ts
|
|
3
|
+
* @input A spring, a normalized progress, an animator's presented velocities
|
|
4
|
+
* @output Exports `progressCurve` (a spring's progress from 0 to 1 as a
|
|
5
|
+
* MotionCurve), `mapProgress` (one curve as a function of another),
|
|
6
|
+
* `mapRange` (the clamped linear map most companions use) and
|
|
7
|
+
* `presentedProgressVelocity` (the progress velocity that continues what
|
|
8
|
+
* an animator shows)
|
|
9
|
+
* @position Shared by the motion building blocks that move several channels
|
|
10
|
+
* along one path and by companion motion (a
|
|
11
|
+
* scrim's dim following a sheet): one velocity unit, one curve mapping and
|
|
12
|
+
* one way to continue an interrupted motion
|
|
13
|
+
*
|
|
14
|
+
* A path is described by a normalized progress: 0 where it starts, 1 where
|
|
15
|
+
* it rests, beyond either end on a spring's overshoot. Its velocity is in
|
|
16
|
+
* progress per second; each channel's own velocity stays in the channel's
|
|
17
|
+
* units per second.
|
|
18
|
+
*
|
|
19
|
+
* An interrupted motion continues from what is on screen: the
|
|
20
|
+
* block reads the presented values and velocities from the animator at one
|
|
21
|
+
* `now` (`get`, `getVelocity`), restarts a path from those values, and starts
|
|
22
|
+
* its progress with the presented velocity projected on the path's tangent
|
|
23
|
+
* at its start, v·t / (t·t), where t = d(values)/dp. Channels are weighted
|
|
24
|
+
* into one unit first (px per unit of scale, say), so a scale and a
|
|
25
|
+
* translation count alike.
|
|
26
|
+
*
|
|
27
|
+
* A companion follows a driving curve through `mapProgress`, most often
|
|
28
|
+
* with `mapRange`: `mapProgress(sheetY, mapRange([closedY, openY], [0, dim]))`
|
|
29
|
+
* dims a scrim as a sheet rises. Played on another animator, it stays in
|
|
30
|
+
* lockstep only when it starts with its driver: pass the driver's start,
|
|
31
|
+
* `scrim.play({opacity}, {at: start})` with `start = await handle.started`
|
|
32
|
+
* (or one shared `at` for both calls); two calls from rest otherwise each
|
|
33
|
+
* start at their own commit.
|
|
34
|
+
*
|
|
35
|
+
* SYNC: When modified, update /packages/core/src/motion/progress.test.ts and
|
|
36
|
+
* /packages/core/src/motion/README.md.
|
|
37
|
+
*/
|
|
38
|
+
import type { Animator, MotionCurve, MotionProperty } from './animator.js';
|
|
39
|
+
import { type SpringDescription } from './spring.js';
|
|
40
|
+
/**
|
|
41
|
+
* The progress of `spring` from 0 to 1, starting with `velocity` (progress
|
|
42
|
+
* per second): exactly 1 once it settles within `epsilon`.
|
|
43
|
+
*/
|
|
44
|
+
export declare function progressCurve(spring: SpringDescription, { velocity, epsilon, }?: {
|
|
45
|
+
velocity?: number;
|
|
46
|
+
epsilon?: number;
|
|
47
|
+
}): MotionCurve;
|
|
48
|
+
/**
|
|
49
|
+
* The curve of `f(driver(t))`, its velocity by the chain rule: a channel
|
|
50
|
+
* following a path as its progress moves, or a companion following any
|
|
51
|
+
* driving curve (a sheet's `y` mapped onto its scrim's opacity). The driver
|
|
52
|
+
* is any MotionCurve, not only a progress from 0 to 1. A companion played on
|
|
53
|
+
* another animator starts with its driver (`{at: start}`; see the file
|
|
54
|
+
* header).
|
|
55
|
+
*/
|
|
56
|
+
export declare function mapProgress(driver: MotionCurve, f: (value: number) => number): MotionCurve;
|
|
57
|
+
/**
|
|
58
|
+
* The linear map from `input` to `output`, held at `output`'s ends outside
|
|
59
|
+
* `input` unless `clamp` is false: what most companions are (a scrim's dim
|
|
60
|
+
* along a sheet's travel, a parallax, a dismissal's fade). Either range may
|
|
61
|
+
* run backward (`[openY, closedY]`).
|
|
62
|
+
*/
|
|
63
|
+
export declare function mapRange(input: readonly [number, number], output: readonly [number, number], { clamp }?: {
|
|
64
|
+
clamp?: boolean;
|
|
65
|
+
}): (x: number) => number;
|
|
66
|
+
/**
|
|
67
|
+
* One channel of a path: an animator property and its value at each
|
|
68
|
+
* progress.
|
|
69
|
+
*/
|
|
70
|
+
export interface ProgressChannel {
|
|
71
|
+
readonly property: MotionProperty;
|
|
72
|
+
/** The property's value at progress `p`. */
|
|
73
|
+
at(p: number): number;
|
|
74
|
+
/**
|
|
75
|
+
* What one unit of the property weighs in the projection, in a unit the
|
|
76
|
+
* channels share (px per unit of scale for a box `weight` px wide). 1 by
|
|
77
|
+
* default.
|
|
78
|
+
*/
|
|
79
|
+
readonly weight?: number;
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* The progress velocity, per second, that continues what `animator`
|
|
83
|
+
* presents at `now` along a path that starts there: the presented velocity
|
|
84
|
+
* projected on the path's tangent at progress 0, v·t / (t·t). 0 when the
|
|
85
|
+
* path does not move any of its channels.
|
|
86
|
+
*/
|
|
87
|
+
export declare function presentedProgressVelocity(animator: Pick<Animator, 'getVelocity'>, channels: ReadonlyArray<ProgressChannel>, now?: number): number;
|
|
88
|
+
//# sourceMappingURL=progress.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/motion/progress.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,KAAK,EAAC,QAAQ,EAAE,WAAW,EAAE,cAAc,EAAC,MAAM,YAAY,CAAC;AACtE,OAAO,EAIL,KAAK,iBAAiB,EACvB,MAAM,UAAU,CAAC;AAKlB;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,iBAAiB,EACzB,EACE,QAAY,EACZ,OAA0B,GAC3B,GAAE;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAM,GAC5C,WAAW,CAQb;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CACzB,MAAM,EAAE,WAAW,EACnB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAC3B,WAAW,CAWb;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,EAChC,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,EACjC,EAAC,KAAY,EAAC,GAAE;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAM,GACrC,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAWvB;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,4CAA4C;IAC5C,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,aAAa,CAAC,EACvC,QAAQ,EAAE,aAAa,CAAC,eAAe,CAAC,EACxC,GAAG,CAAC,EAAE,MAAM,GACX,MAAM,CAUR"}
|