@astryxdesign/core 0.7.8-canary.fbb81c6 → 0.7.8
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/CHANGELOG.md +132 -0
- package/dist/ClickableCard/ClickableCard.d.ts +1 -1
- package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
- package/dist/ClickableCard/ClickableCard.js +1 -5
- package/dist/DateInput/PickerWheel.d.ts.map +1 -1
- package/dist/DateInput/PickerWheel.js +1 -7
- package/dist/DropdownMenu/DropdownMenu.d.ts +1 -9
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +4 -9
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +2 -3
- package/dist/DropdownMenu/DropdownMenuItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuItem.js +2 -3
- package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuRadioItem.js +2 -3
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +2 -3
- package/dist/Item/Item.d.ts.map +1 -1
- package/dist/Item/Item.js +1 -6
- package/dist/Layer/preserveAnimations.d.ts +5 -1
- package/dist/Layer/preserveAnimations.d.ts.map +1 -1
- package/dist/Layer/preserveAnimations.js +214 -12
- package/dist/MoreMenu/MoreMenu.d.ts +3 -5
- package/dist/MoreMenu/MoreMenu.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.d.ts +1 -1
- package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
- package/dist/SelectableCard/SelectableCard.js +1 -5
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +1 -3
- package/dist/astryx.css +2 -6
- package/dist/hooks/menuPressGesture.d.ts +21 -132
- package/dist/hooks/menuPressGesture.d.ts.map +1 -1
- package/dist/hooks/menuPressGesture.js +30 -155
- package/dist/hooks/useClickableContainer.d.ts +5 -19
- package/dist/hooks/useClickableContainer.d.ts.map +1 -1
- package/dist/hooks/useClickableContainer.js +5 -28
- package/dist/hooks/useMenuPress.d.ts +1 -34
- package/dist/hooks/useMenuPress.d.ts.map +1 -1
- package/dist/hooks/useMenuPress.js +5 -93
- package/dist/motion/transientCopy.d.ts +2 -4
- package/dist/motion/transientCopy.d.ts.map +1 -1
- package/dist/motion/transientCopy.js +5 -34
- package/dist/motion/uikit/gestures.d.ts +0 -41
- package/dist/motion/uikit/gestures.d.ts.map +1 -1
- package/dist/motion/uikit/gestures.js +0 -25
- package/dist/motion/uikit/index.d.ts +1 -1
- package/dist/motion/uikit/index.d.ts.map +1 -1
- package/dist/motion/uikit/index.js +1 -1
- package/dist/utils/pressFeedback.d.ts +0 -7
- package/dist/utils/pressFeedback.d.ts.map +1 -1
- package/dist/utils/pressFeedback.js +1 -16
- package/package.json +5 -5
- package/src/ClickableCard/ClickableCard.tsx +1 -8
- package/src/DateInput/PickerWheel.tsx +2 -7
- package/src/DropdownMenu/DropdownMenu.doc.mjs +2 -1
- package/src/DropdownMenu/DropdownMenu.tsx +5 -29
- package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +1 -5
- package/src/DropdownMenu/DropdownMenuItem.tsx +4 -8
- package/src/DropdownMenu/DropdownMenuRadioItem.tsx +1 -5
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +1 -5
- package/src/Item/Item.tsx +5 -15
- package/src/Layer/preserveAnimations.ts +275 -12
- package/src/MoreMenu/MoreMenu.doc.mjs +4 -2
- package/src/MoreMenu/MoreMenu.tsx +3 -5
- package/src/SelectableCard/SelectableCard.tsx +1 -8
- package/src/TreeList/TreeListItem.tsx +6 -8
- package/src/hooks/menuPressGesture.ts +38 -243
- package/src/hooks/useClickableContainer.doc.mjs +2 -8
- package/src/hooks/useClickableContainer.ts +6 -52
- package/src/hooks/useMenuPress.ts +11 -118
- package/src/motion/MEASUREMENTS.md +0 -11
- package/src/motion/transientCopy.ts +5 -45
- package/src/motion/uikit/gestures.ts +0 -22
- package/src/motion/uikit/index.ts +0 -1
- package/src/utils/pressFeedback.ts +1 -16
- package/dist/hooks/menuPressValues.d.ts +0 -16
- package/dist/hooks/menuPressValues.d.ts.map +0 -1
- package/dist/hooks/menuPressValues.js +0 -18
- package/dist/motion/carryAnimations.d.ts +0 -58
- package/dist/motion/carryAnimations.d.ts.map +0 -1
- package/dist/motion/carryAnimations.js +0 -305
- package/dist/privateAttributes/menuPressLit.stylex.d.ts +0 -52
- package/dist/privateAttributes/menuPressLit.stylex.d.ts.map +0 -1
- package/dist/privateAttributes/menuPressLit.stylex.js +0 -99
- package/src/hooks/menuPressValues.ts +0 -18
- package/src/motion/carryAnimations.ts +0 -389
- package/src/privateAttributes/menuPressLit.stylex.ts +0 -104
|
@@ -11,23 +11,189 @@
|
|
|
11
11
|
*
|
|
12
12
|
* Taking an element out of rendering cancels every CSS animation and
|
|
13
13
|
* transition of it and its subtree. When it returns, the browser creates the
|
|
14
|
-
* animations again from the stylesheet, at their start
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
14
|
+
* animations again from the stylesheet, at their start, and the transitions
|
|
15
|
+
* not at all; script-created animations are untouched. `preserveAnimations`
|
|
16
|
+
* reads every animation's state first and, afterwards, gives each recreated
|
|
17
|
+
* CSS animation that state and resumes each cancelled transition with a
|
|
18
|
+
* script animation at the same point.
|
|
19
|
+
*
|
|
20
|
+
* The state is read generically, from what the platform exposes: every
|
|
21
|
+
* accessor with a setter on the animation's and its effect's prototype
|
|
22
|
+
* chains, every field of the effect's timing, and its keyframes. Only values
|
|
23
|
+
* that differ from the recreated animation's are written, so a value the
|
|
24
|
+
* stylesheet controls stays under its control. A few members are not plain
|
|
25
|
+
* state and are handled in their own step (`ORDERED`); the rest need no
|
|
26
|
+
* handling (`DERIVED`). What cannot be carried over is the Animation and
|
|
27
|
+
* effect objects themselves: the old ones are idle, their `addEventListener`
|
|
28
|
+
* listeners and `finished`/`ready` promises stay with them, and the browser
|
|
29
|
+
* fires `animationcancel`/`transitioncancel` for them and `animationstart`
|
|
22
30
|
* for the new ones.
|
|
23
31
|
*/
|
|
24
32
|
|
|
25
|
-
|
|
33
|
+
/**
|
|
34
|
+
* Animation members written in a fixed order rather than generically: the
|
|
35
|
+
* timeline before the range that is measured on it, the rate before the
|
|
36
|
+
* time, and the start time (or, for a paused animation, the current time)
|
|
37
|
+
* last, once the play state is set. `effect` is not
|
|
38
|
+
* replaced, because a CSS animation whose effect script replaces leaves the
|
|
39
|
+
* stylesheet's control; its state is copied onto the new effect instead.
|
|
40
|
+
*/
|
|
41
|
+
const ORDERED = new Set(['effect', 'timeline', 'rangeStart', 'rangeEnd', 'playbackRate', 'startTime', 'currentTime']);
|
|
42
|
+
/** Every accessor with a setter on `object`'s prototype chain. */
|
|
43
|
+
function writableAccessors(object) {
|
|
44
|
+
const names = new Set();
|
|
45
|
+
for (let proto = Object.getPrototypeOf(object); proto != null && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {
|
|
46
|
+
for (const [name, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(proto))) {
|
|
47
|
+
if (descriptor.set != null) {
|
|
48
|
+
names.add(name);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
return [...names];
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* A textual form of a value that is compared by content rather than by
|
|
57
|
+
* identity: a CSS numeric value (as in a timeline range offset) through its
|
|
58
|
+
* serialization, a plain object (a range) through its members. Anything else
|
|
59
|
+
* is compared by identity (`null`).
|
|
60
|
+
*/
|
|
61
|
+
function contentOf(value) {
|
|
62
|
+
if (typeof CSSNumericValue !== 'undefined' && value instanceof CSSNumericValue) {
|
|
63
|
+
return value.toString();
|
|
64
|
+
}
|
|
65
|
+
if (value != null && typeof value === 'object' && Object.getPrototypeOf(value) === Object.prototype) {
|
|
66
|
+
return Object.entries(value).map(([key, inner]) => `${key}:${contentOf(inner) ?? String(inner)}`).join(';');
|
|
67
|
+
}
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
70
|
+
function differs(a, b) {
|
|
71
|
+
if (a === b) {
|
|
72
|
+
return false;
|
|
73
|
+
}
|
|
74
|
+
const textA = contentOf(a);
|
|
75
|
+
return textA == null || textA !== contentOf(b);
|
|
76
|
+
}
|
|
77
|
+
function save(animation) {
|
|
78
|
+
const effect = animation.effect;
|
|
79
|
+
const values = {};
|
|
80
|
+
for (const name of writableAccessors(animation)) {
|
|
81
|
+
values[name] = animation[name];
|
|
82
|
+
}
|
|
83
|
+
const effectValues = {};
|
|
84
|
+
if (effect != null) {
|
|
85
|
+
for (const name of writableAccessors(effect)) {
|
|
86
|
+
effectValues[name] = effect[name];
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
return {
|
|
90
|
+
animation,
|
|
91
|
+
name: animation.animationName ?? '',
|
|
92
|
+
target: effect?.target ?? null,
|
|
93
|
+
pseudoElement: effect?.pseudoElement ?? null,
|
|
94
|
+
values,
|
|
95
|
+
effectValues,
|
|
96
|
+
timing: effect?.getTiming() ?? null,
|
|
97
|
+
keyframes: effect?.getKeyframes() ?? null,
|
|
98
|
+
playState: animation.playState,
|
|
99
|
+
replaceState: animation.replaceState
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
function write(object, name, value) {
|
|
103
|
+
object[name] = value;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/** Give `next` the effect state `saved` had: every writable member. */
|
|
107
|
+
function restoreEffect(next, saved) {
|
|
108
|
+
for (const name of writableAccessors(next)) {
|
|
109
|
+
if (name in saved.effectValues && differs(saved.effectValues[name], next[name])) {
|
|
110
|
+
write(next, name, saved.effectValues[name]);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
if (saved.timing != null) {
|
|
114
|
+
const timing = next.getTiming();
|
|
115
|
+
const changed = {};
|
|
116
|
+
for (const [field, value] of Object.entries(saved.timing)) {
|
|
117
|
+
if (differs(value, timing[field])) {
|
|
118
|
+
changed[field] = value;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
if (Object.keys(changed).length > 0) {
|
|
122
|
+
next.updateTiming(changed);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
if (saved.keyframes != null && JSON.stringify(saved.keyframes) !== JSON.stringify(next.getKeyframes())) {
|
|
126
|
+
next.setKeyframes(saved.keyframes);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/** Give `next` the state `saved` had, member by member. */
|
|
131
|
+
function restore(next, saved) {
|
|
132
|
+
const effect = next.effect;
|
|
133
|
+
if (effect != null) {
|
|
134
|
+
restoreEffect(effect, saved);
|
|
135
|
+
}
|
|
136
|
+
const current = next;
|
|
137
|
+
for (const name of ['timeline', 'rangeStart', 'rangeEnd']) {
|
|
138
|
+
if (name in saved.values && differs(saved.values[name], current[name])) {
|
|
139
|
+
write(next, name, saved.values[name]);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
for (const name of writableAccessors(next)) {
|
|
143
|
+
if (!ORDERED.has(name) && name in saved.values && differs(saved.values[name], current[name])) {
|
|
144
|
+
write(next, name, saved.values[name]);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
if (saved.replaceState === 'persisted' && next.replaceState !== 'persisted') {
|
|
148
|
+
next.persist();
|
|
149
|
+
}
|
|
150
|
+
const rate = saved.values.playbackRate;
|
|
151
|
+
if (typeof rate === 'number' && rate !== next.playbackRate) {
|
|
152
|
+
next.playbackRate = rate;
|
|
153
|
+
}
|
|
154
|
+
if (saved.playState === 'paused' && next.playState !== 'paused') {
|
|
155
|
+
next.pause();
|
|
156
|
+
} else if (saved.playState !== 'paused' && next.playState === 'paused') {
|
|
157
|
+
next.play();
|
|
158
|
+
}
|
|
159
|
+
// A running animation is anchored to its timeline by its start time, which
|
|
160
|
+
// carries its current time on exactly. A paused one has none and keeps its
|
|
161
|
+
// current time. A finished one holds its end: finishing it again holds the
|
|
162
|
+
// same time, though its start time is then counted from now, since script
|
|
163
|
+
// cannot set a start time and a held time together.
|
|
164
|
+
const start = saved.values.startTime;
|
|
165
|
+
const time = saved.values.currentTime;
|
|
166
|
+
if (saved.playState === 'finished') {
|
|
167
|
+
next.finish();
|
|
168
|
+
} else if (start != null) {
|
|
169
|
+
next.startTime = start;
|
|
170
|
+
} else if (time != null) {
|
|
171
|
+
next.currentTime = time;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/** Resume a cancelled CSS transition with a script animation in its state. */
|
|
176
|
+
function resumeTransition(saved) {
|
|
177
|
+
if (saved.target == null || saved.keyframes == null) {
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
const replacement = saved.target.animate(saved.keyframes, {
|
|
181
|
+
pseudoElement: saved.pseudoElement ?? undefined
|
|
182
|
+
});
|
|
183
|
+
restore(replacement, saved);
|
|
184
|
+
}
|
|
185
|
+
function isTransition(animation) {
|
|
186
|
+
return typeof CSSTransition !== 'undefined' && animation instanceof CSSTransition;
|
|
187
|
+
}
|
|
26
188
|
|
|
27
189
|
/**
|
|
28
190
|
* Run `reset`, which takes `root` out of rendering and back, and put every
|
|
29
191
|
* CSS animation and transition of `root` and its subtree back in the state it
|
|
30
|
-
* was in before.
|
|
192
|
+
* was in before. Recreated animations are matched to the ones they replace by
|
|
193
|
+
* element, pseudo-element and name, in order, and then by name alone (an
|
|
194
|
+
* effect script moved to another element or pseudo-element); a recreated
|
|
195
|
+
* animation with no predecessor (an entry animation that had already played
|
|
196
|
+
* and been dropped) is finished.
|
|
31
197
|
*/
|
|
32
198
|
export function preserveAnimations(root, reset) {
|
|
33
199
|
if (typeof root.getAnimations !== 'function') {
|
|
@@ -37,7 +203,43 @@ export function preserveAnimations(root, reset) {
|
|
|
37
203
|
const before = root.getAnimations({
|
|
38
204
|
subtree: true
|
|
39
205
|
});
|
|
40
|
-
const saved = before.map(
|
|
206
|
+
const saved = before.map(save);
|
|
41
207
|
reset();
|
|
42
|
-
|
|
208
|
+
const after = root.getAnimations({
|
|
209
|
+
subtree: true
|
|
210
|
+
});
|
|
211
|
+
const current = new Set(after);
|
|
212
|
+
const survivors = new Set(before);
|
|
213
|
+
const cancelled = [];
|
|
214
|
+
for (const state of saved) {
|
|
215
|
+
if (current.has(state.animation)) {
|
|
216
|
+
continue;
|
|
217
|
+
}
|
|
218
|
+
if (isTransition(state.animation)) {
|
|
219
|
+
resumeTransition(state);
|
|
220
|
+
} else {
|
|
221
|
+
cancelled.push(state);
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
const recreated = after.filter(animation => !survivors.has(animation));
|
|
225
|
+
const unmatched = [];
|
|
226
|
+
for (const animation of recreated) {
|
|
227
|
+
const effect = animation.effect;
|
|
228
|
+
const name = animation.animationName ?? '';
|
|
229
|
+
const index = cancelled.findIndex(state => state.name === name && state.target === (effect?.target ?? null) && state.pseudoElement === (effect?.pseudoElement ?? null));
|
|
230
|
+
if (index === -1) {
|
|
231
|
+
unmatched.push(animation);
|
|
232
|
+
} else {
|
|
233
|
+
restore(animation, cancelled.splice(index, 1)[0]);
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
for (const animation of unmatched) {
|
|
237
|
+
const name = animation.animationName ?? '';
|
|
238
|
+
const index = cancelled.findIndex(state => state.name === name);
|
|
239
|
+
if (index === -1) {
|
|
240
|
+
animation.finish();
|
|
241
|
+
} else {
|
|
242
|
+
restore(animation, cancelled.splice(index, 1)[0]);
|
|
243
|
+
}
|
|
244
|
+
}
|
|
43
245
|
}
|
|
@@ -65,11 +65,9 @@ export interface MoreMenuProps extends Pick<BaseProps, 'xstyle' | 'className' |
|
|
|
65
65
|
*/
|
|
66
66
|
alignment?: LayerAlignment;
|
|
67
67
|
/**
|
|
68
|
-
* Menu presentation policy
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
* opened it follows UIMenu's handoff on every device. `'popover'` pins the
|
|
72
|
-
* pointer behavior on every device.
|
|
68
|
+
* Menu presentation policy. `adaptive` uses a BottomSheet on compact
|
|
69
|
+
* coarse-pointer viewports and an anchored popover elsewhere.
|
|
70
|
+
* @default 'popover'
|
|
73
71
|
*/
|
|
74
72
|
presentation?: DropdownMenuPresentation;
|
|
75
73
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MoreMenu.d.ts","sourceRoot":"","sources":["../../src/MoreMenu/MoreMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EACV,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC7D,OAAO,KAAK,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC;AACzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;;OAGG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B
|
|
1
|
+
{"version":3,"file":"MoreMenu.d.ts","sourceRoot":"","sources":["../../src/MoreMenu/MoreMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAIrC,OAAO,KAAK,EACV,kBAAkB,EAClB,wBAAwB,EACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,UAAU,CAAC;AAC7D,OAAO,KAAK,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,WAAW,CAAC;AACzD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;;OAGG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,wBAAwB,CAAC;IAExC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EAAE,cAAc,EACrB,OAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,IAAI,EACJ,UAAkB,EAClB,SAAS,EACT,SAAS,EACT,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,aAAa,+BAmCf;yBApDe,QAAQ"}
|
|
@@ -104,7 +104,7 @@ export interface SelectableCardProps extends Omit<BaseProps, 'onChange'> {
|
|
|
104
104
|
* </SelectableCard>
|
|
105
105
|
* ```
|
|
106
106
|
*/
|
|
107
|
-
export declare function SelectableCard({ label, isSelected, onChange, onClick: onClickProp, onMouseUp: onMouseUpProp,
|
|
107
|
+
export declare function SelectableCard({ label, isSelected, onChange, onClick: onClickProp, onMouseUp: onMouseUpProp, isDisabled, children, padding, variant, elevation, width, height, maxWidth, ref, xstyle: xstyleProp, className: classNameProp, style, ...props }: SelectableCardProps): import("react").JSX.Element;
|
|
108
108
|
export declare namespace SelectableCard {
|
|
109
109
|
var displayName: string;
|
|
110
110
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableCard.d.ts","sourceRoot":"","sources":["../../src/SelectableCard/SelectableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EACL,KAAK,SAAS,EAMd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectableCard.d.ts","sourceRoot":"","sources":["../../src/SelectableCard/SelectableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EACL,KAAK,SAAS,EAMd,KAAK,GAAG,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAuN5C,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACtE,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,UAAU,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4CD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,UAAU,EACV,QAAQ,EACR,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,+BA6JrB;yBAhLe,cAAc"}
|
|
@@ -34,7 +34,6 @@ import * as stylex from '@stylexjs/stylex';
|
|
|
34
34
|
import "../theme/tokens.stylex.js";
|
|
35
35
|
import { colorVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
|
|
36
36
|
import { isImeKeyEvent, mergeProps } from "../utils/index.js";
|
|
37
|
-
import { chainEventHandlers } from "../utils/chainEventHandlers.js";
|
|
38
37
|
import { Card } from "../Card/Card.js";
|
|
39
38
|
import { useClickableContainer } from "../hooks/useClickableContainer.js";
|
|
40
39
|
import { closestLayerRoot } from "../privateAttributes/layerRoot.stylex.js";
|
|
@@ -258,7 +257,6 @@ export function SelectableCard({
|
|
|
258
257
|
onChange,
|
|
259
258
|
onClick: onClickProp,
|
|
260
259
|
onMouseUp: onMouseUpProp,
|
|
261
|
-
onPointerDown: onPointerDownProp,
|
|
262
260
|
isDisabled = false,
|
|
263
261
|
children,
|
|
264
262
|
padding,
|
|
@@ -313,8 +311,7 @@ export function SelectableCard({
|
|
|
313
311
|
}, [isDisabled, requestChange]);
|
|
314
312
|
const {
|
|
315
313
|
onClick,
|
|
316
|
-
onMouseUp
|
|
317
|
-
onPointerDown
|
|
314
|
+
onMouseUp
|
|
318
315
|
} = useClickableContainer({
|
|
319
316
|
containerRef,
|
|
320
317
|
interactiveRef,
|
|
@@ -364,7 +361,6 @@ export function SelectableCard({
|
|
|
364
361
|
!isDisabled && interactionOverlayStyles.pressedAlpha, isDisabled && styles.disabled, xstyleProp],
|
|
365
362
|
onClick: !isDisabled ? composedOnClick : undefined,
|
|
366
363
|
onMouseUp: !isDisabled ? composedOnMouseUp : undefined,
|
|
367
|
-
onPointerDown: !isDisabled ? chainEventHandlers(onPointerDown, onPointerDownProp) : onPointerDownProp,
|
|
368
364
|
...props,
|
|
369
365
|
onClickCapture: !isDisabled && handleLayerClickCapture ? e => {
|
|
370
366
|
handleLayerClickCapture(e);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqB3C,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAgStE,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AASD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+
|
|
1
|
+
{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAyB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAqB3C,OAAO,KAAK,EAAC,eAAe,EAAE,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAgStE,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;;OAQG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AASD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,SAAiB,EACjB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BAwU3B;yBApWe,YAAY"}
|
|
@@ -240,8 +240,7 @@ export function TreeListItem({
|
|
|
240
240
|
const forwardsToLink = href != null && handleClick == null;
|
|
241
241
|
const linkRowRef = useRef(null);
|
|
242
242
|
const {
|
|
243
|
-
onClick: delegateToLink
|
|
244
|
-
onPointerDown: pressOnLinkRow
|
|
243
|
+
onClick: delegateToLink
|
|
245
244
|
} = useClickableContainer({
|
|
246
245
|
containerRef: linkRowRef,
|
|
247
246
|
interactiveRef: linkRef,
|
|
@@ -476,7 +475,6 @@ export function TreeListItem({
|
|
|
476
475
|
ref: forwardsToLink ? linkRowRef : undefined,
|
|
477
476
|
onClick: forwardsToLink ? delegateToLink : handleClick,
|
|
478
477
|
onMouseUp: forwardsToLink ? openLinkOnMiddleClick : undefined,
|
|
479
|
-
onPointerDown: forwardsToLink ? pressOnLinkRow : undefined,
|
|
480
478
|
children: /*#__PURE__*/_jsx("div", {
|
|
481
479
|
...{
|
|
482
480
|
className: "x78zum5 x98rzlu xeuugli x1h91t0o x14kbac9 xw2xrtw"
|
package/dist/astryx.css
CHANGED
|
@@ -1225,7 +1225,7 @@
|
|
|
1225
1225
|
.x1l10yog:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--spacing-6)}
|
|
1226
1226
|
.x4lel18:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--x-marginInlineStart)}
|
|
1227
1227
|
.x1cytvie:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(max(var(--spacing-4), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) + max(var(--astryx-layer-inset-inline-start, 0px), var(--astryx-layer-inset-inline-end, 0px)))}
|
|
1228
|
-
.
|
|
1228
|
+
.xheapza:not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to bottom,rgb(0 0 0 / .3),rgb(0 0 0) 50%,rgb(0 0 0 / .3))}
|
|
1229
1229
|
.xkm2don:not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to bottom,transparent,black 24px)}
|
|
1230
1230
|
.xw26lqc:not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to bottom,transparent,black 36px)}
|
|
1231
1231
|
.xr5yg4x:not(#\#):not(#\#):not(#\#){mask-image:linear-gradient(to bottom,transparent,black 48px)}
|
|
@@ -1552,8 +1552,6 @@
|
|
|
1552
1552
|
.x6tapwc:not(#\#):not(#\#):not(#\#){z-index:var(--_tree-focus-z,auto)}
|
|
1553
1553
|
.x189o2zt[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#){--_indicator-press-image:var(--_press-paint-image)}
|
|
1554
1554
|
.x1dueop1[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#){--_indicator-press-image:var(--_press-paint-image)}
|
|
1555
|
-
.xcukuoe[data-astryx-menu-press-lit]:not(#\#):not(#\#):not(#\#){--_menu-row-active-paint:var(--color-overlay-pressed)}
|
|
1556
|
-
.x1ar3rj9[data-astryx-menu-press-lit]:not(#\#):not(#\#):not(#\#){--_menu-row-focus-paint:var(--color-overlay-pressed)}
|
|
1557
1555
|
.x11z29ks[data-astryx-press="on"]:not(#\#):not(#\#):not(#\#){--astryx-press-alpha:1}
|
|
1558
1556
|
.xli5ek3[data-astryx-press="fading"]:not(#\#):not(#\#):not(#\#){--astryx-press-alpha:1}
|
|
1559
1557
|
.x1v2claj.x1v2claj:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}
|
|
@@ -1687,7 +1685,6 @@
|
|
|
1687
1685
|
.x1ursdma:nth-last-child(1 of :not([popover]):not(template):not(dialog)):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
|
|
1688
1686
|
.xjl7jj:empty:not(#\#):not(#\#):not(#\#){display:none}
|
|
1689
1687
|
.x1e0d1ib:empty:not(#\#):not(#\#):not(#\#){padding-inline-start:0}
|
|
1690
|
-
.x1p2z2pi:focus:not(#\#):not(#\#):not(#\#){background-color:var(--_menu-row-focus-paint,var(--color-overlay-hover))}
|
|
1691
1688
|
.x1c52tdz:focus:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}
|
|
1692
1689
|
.x1rsz1da:focus:not(#\#):not(#\#):not(#\#){clip-path:none}
|
|
1693
1690
|
.xb52w99:focus:not(#\#):not(#\#):not(#\#){display:flex}
|
|
@@ -1813,9 +1810,9 @@
|
|
|
1813
1810
|
@media (prefers-reduced-motion: reduce){.x1a94pi7.x1a94pi7:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){animation-name:xml828b-B}}
|
|
1814
1811
|
@media (hover: hover){.xvxo0qp.xvxo0qp.xvxo0qp:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:color-mix(in srgb,var(--color-accent),var(--color-tint-hover) 15%)}}
|
|
1815
1812
|
@media (hover: hover){.x1pfkqlk.x1pfkqlk.x1pfkqlk:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:transparent}}
|
|
1816
|
-
@media (hover: hover){.x17hk9mh.x17hk9mh.x17hk9mh:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--_menu-row-active-paint,var(--color-overlay-pressed))}}
|
|
1817
1813
|
@media (hover: hover){.xcu6dpe.xcu6dpe.xcu6dpe:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-neutral)}}
|
|
1818
1814
|
@media (hover: hover){.xoevpu5.xoevpu5.xoevpu5:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}}
|
|
1815
|
+
@media (hover: hover){.xprvw0a.xprvw0a.xprvw0a:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}}
|
|
1819
1816
|
@media (hover: hover){.xmvprkv.xmvprkv.xmvprkv:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-overlay-hover),var(--color-overlay-hover))}}
|
|
1820
1817
|
@media (hover: hover){.x1bm8j9m.x1bm8j9m.x1bm8j9m:hover:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:none}}
|
|
1821
1818
|
@media (pointer: coarse){.x1xp12g4.x1xp12g4.x1xp12g4:where(.x1u3b27q[data-astryx-press="fading"] *):not(#\#):not(#\#):not(#\#){background-image:var(--_press-paint-image)}}
|
|
@@ -1844,7 +1841,6 @@
|
|
|
1844
1841
|
@media (prefers-reduced-motion: reduce){@media (pointer: coarse){.x1qzunnh.x1qzunnh.x1qzunnh:not(#\#):not(#\#):not(#\#){transition-duration:.01s,.2s}}}
|
|
1845
1842
|
@media (forced-colors: active){@media (((pointer: coarse) and (not (prefers-reduced-motion: reduce)) and (not (prefers-reduced-motion: reduce))) or ((pointer: coarse) and (not (prefers-reduced-motion: reduce)) and (not (pointer: coarse)))) or (((pointer: coarse) and (not ((not (pointer: coarse)))) and (not (prefers-reduced-motion: reduce))) or ((pointer: coarse) and (not ((not (pointer: coarse)))) and (not (pointer: coarse)))){.x11y4s09.x11y4s09.x11y4s09:not(#\#):not(#\#):not(#\#){transition-duration:0s}}}
|
|
1846
1843
|
@media (pointer: coarse){.x1s5nr2v.x1s5nr2v.x1s5nr2v:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:transparent}}
|
|
1847
|
-
@media (hover: hover){.xprvw0a.xprvw0a.xprvw0a:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-pressed)}}
|
|
1848
1844
|
@media (pointer: coarse){.xvbnuu.xvbnuu.xvbnuu:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-neutral),var(--color-neutral))}}
|
|
1849
1845
|
@media (hover: hover){.xo3fi6e.xo3fi6e.xo3fi6e:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-overlay-pressed),var(--color-overlay-pressed)),linear-gradient(var(--color-neutral),var(--color-neutral))}}
|
|
1850
1846
|
@media (hover: hover){.xetgvay.xetgvay.xetgvay:active:where(:not(:disabled,[aria-disabled="true"])):not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-overlay-pressed),var(--color-overlay-pressed))}}
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
3
|
-
*
|
|
2
|
+
* @file menuPressGesture.ts
|
|
3
|
+
* @input A menu press gesture and one pointer event, both as plain data
|
|
4
|
+
* @output The pure `menuPressStep` state machine, its state, event and effect
|
|
5
|
+
* types, and the settle constant
|
|
6
|
+
* @position Pure module under `useMenuPress`. It has no DOM and no React, so
|
|
7
|
+
* a unit test can check each transition without a browser.
|
|
8
|
+
*
|
|
9
|
+
* SYNC: When modified, update:
|
|
10
|
+
* - /packages/core/src/hooks/menuPressGesture.test.ts
|
|
11
|
+
* - /packages/core/src/hooks/useMenuPress.ts
|
|
4
12
|
*/
|
|
13
|
+
/** How long the opening press must last before its release may act. */
|
|
5
14
|
export declare const MENU_PRESS_SETTLE_MS = 300;
|
|
6
|
-
/**
|
|
7
|
-
* How far a finger that opened the menu travels, from the first sample the
|
|
8
|
-
* menu sees, before it starts picking (UIMenu's scrub handoff).
|
|
9
|
-
*/
|
|
10
|
-
export declare const MENU_PRESS_HANDOFF_PX: number;
|
|
11
15
|
export type MenuPressPointerType = 'mouse' | 'touch' | 'pen';
|
|
12
|
-
|
|
13
|
-
export type MenuPressState<T> = {
|
|
16
|
+
export type MenuPressGesture<T> = {
|
|
14
17
|
phase: 'idle';
|
|
15
18
|
} | {
|
|
16
19
|
phase: 'triggerPress';
|
|
@@ -20,15 +23,6 @@ export type MenuPressState<T> = {
|
|
|
20
23
|
phase: 'open';
|
|
21
24
|
pointerType: MenuPressPointerType;
|
|
22
25
|
openedAt: number;
|
|
23
|
-
/**
|
|
24
|
-
* A finger's handoff: the first position the menu saw after it opened,
|
|
25
|
-
* which the scrub distance is counted from. Unset until that sample.
|
|
26
|
-
* @internal Not public contract.
|
|
27
|
-
*/
|
|
28
|
-
handoffFrom?: {
|
|
29
|
-
x: number;
|
|
30
|
-
y: number;
|
|
31
|
-
};
|
|
32
26
|
} | {
|
|
33
27
|
phase: 'tracking';
|
|
34
28
|
pointerType: MenuPressPointerType;
|
|
@@ -37,8 +31,7 @@ export type MenuPressState<T> = {
|
|
|
37
31
|
/** The enabled row currently under the pointer, if any. */
|
|
38
32
|
row: T | null;
|
|
39
33
|
};
|
|
40
|
-
|
|
41
|
-
export type MenuPressInput<T> = {
|
|
34
|
+
export type MenuPressEvent<T> = {
|
|
42
35
|
type: 'down';
|
|
43
36
|
target: 'trigger' | 'menu';
|
|
44
37
|
pointerType: MenuPressPointerType;
|
|
@@ -55,33 +48,18 @@ export type MenuPressInput<T> = {
|
|
|
55
48
|
row: T | null;
|
|
56
49
|
isInMenu: boolean;
|
|
57
50
|
time: number;
|
|
58
|
-
/**
|
|
59
|
-
* Viewport position, for a finger's handoff distance.
|
|
60
|
-
* @internal Not public contract.
|
|
61
|
-
*/
|
|
62
|
-
x?: number;
|
|
63
|
-
/** @internal See `x`. */
|
|
64
|
-
y?: number;
|
|
65
51
|
} | {
|
|
66
52
|
type: 'up';
|
|
67
53
|
row: T | null;
|
|
68
54
|
isInMenu: boolean;
|
|
69
55
|
isOnTrigger: boolean;
|
|
70
56
|
time: number;
|
|
71
|
-
/**
|
|
72
|
-
* Viewport position, for a finger's handoff distance.
|
|
73
|
-
* @internal Not public contract.
|
|
74
|
-
*/
|
|
75
|
-
x?: number;
|
|
76
|
-
/** @internal See `x`. */
|
|
77
|
-
y?: number;
|
|
78
57
|
}
|
|
79
58
|
/** The browser took the gesture: pointercancel, a second pointer, a scroll. */
|
|
80
59
|
| {
|
|
81
60
|
type: 'cancel';
|
|
82
61
|
};
|
|
83
|
-
|
|
84
|
-
export type MenuPressOutcome<T> = {
|
|
62
|
+
export type MenuPressEffect<T> = {
|
|
85
63
|
type: 'none';
|
|
86
64
|
}
|
|
87
65
|
/** A mouse pressed the trigger: open the menu now, under the held pointer. */
|
|
@@ -99,19 +77,18 @@ export type MenuPressOutcome<T> = {
|
|
|
99
77
|
/**
|
|
100
78
|
* The gesture ended without a row acting. `stray` says whether the browser
|
|
101
79
|
* will still report a `click` for this gesture that must not act; `dismiss`
|
|
102
|
-
* says the menu should close
|
|
80
|
+
* says the menu should close (a mouse released outside it).
|
|
103
81
|
*/
|
|
104
82
|
| {
|
|
105
83
|
type: 'settle';
|
|
106
84
|
stray: boolean;
|
|
107
85
|
dismiss: boolean;
|
|
108
86
|
};
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
effect: MenuPressOutcome<T>;
|
|
87
|
+
export interface MenuPressStep<T> {
|
|
88
|
+
gesture: MenuPressGesture<T>;
|
|
89
|
+
effect: MenuPressEffect<T>;
|
|
113
90
|
}
|
|
114
|
-
export declare const IDLE_MENU_PRESS:
|
|
91
|
+
export declare const IDLE_MENU_PRESS: MenuPressGesture<never>;
|
|
115
92
|
/**
|
|
116
93
|
* Advance the gesture by one event. Pure: same inputs, same output.
|
|
117
94
|
*
|
|
@@ -120,15 +97,10 @@ export declare const IDLE_MENU_PRESS: MenuPressState<never>;
|
|
|
120
97
|
* - `idle`: no gesture is live.
|
|
121
98
|
* - `triggerPress`: a finger rests on the trigger, and the menu is not open
|
|
122
99
|
* yet. A mouse press on the trigger skips this state and opens at once.
|
|
123
|
-
* - `open`: the menu opened under a held pointer, and the pointer
|
|
124
|
-
*
|
|
100
|
+
* - `open`: the menu opened under a held pointer, and the pointer has not
|
|
101
|
+
* entered it yet.
|
|
125
102
|
* - `tracking`: the pointer is held, and the highlight follows it.
|
|
126
103
|
*
|
|
127
|
-
* A finger or a pen that opened the menu picks only after it travels
|
|
128
|
-
* `MENU_PRESS_HANDOFF_PX` from the first position the menu sees. UIMenu
|
|
129
|
-
* hands off the same way. Until then nothing lights, and its lift acts on
|
|
130
|
-
* nothing. A host that reports no positions keeps the settle rule.
|
|
131
|
-
*
|
|
132
104
|
* The settle rule: the release of the opening gesture acts only after the
|
|
133
105
|
* pointer entered the menu or the press lasted `MENU_PRESS_SETTLE_MS`. Else a
|
|
134
106
|
* menu that opens under the pointer would pick a row that nobody chose.
|
|
@@ -136,89 +108,6 @@ export declare const IDLE_MENU_PRESS: MenuPressState<never>;
|
|
|
136
108
|
* Rows are opaque (`T`). The hook feeds in the enabled row under the
|
|
137
109
|
* pointer, or `null` over a divider, a heading, a disabled row, or outside
|
|
138
110
|
* the menu.
|
|
139
|
-
*
|
|
140
|
-
* @internal The machine's own shape, with the finger's handoff; not public
|
|
141
|
-
* contract.
|
|
142
|
-
*/
|
|
143
|
-
export declare function menuPressTransition<T>(gesture: MenuPressState<T>, event: MenuPressInput<T>): MenuPressTransition<T>;
|
|
144
|
-
export type MenuPressGesture<T> = {
|
|
145
|
-
phase: 'idle';
|
|
146
|
-
} | {
|
|
147
|
-
phase: 'triggerPress';
|
|
148
|
-
pointerType: MenuPressPointerType;
|
|
149
|
-
startedAt: number;
|
|
150
|
-
} | {
|
|
151
|
-
phase: 'open';
|
|
152
|
-
pointerType: MenuPressPointerType;
|
|
153
|
-
openedAt: number;
|
|
154
|
-
} | {
|
|
155
|
-
phase: 'tracking';
|
|
156
|
-
pointerType: MenuPressPointerType;
|
|
157
|
-
/** Where the press began. */
|
|
158
|
-
origin: 'trigger' | 'menu';
|
|
159
|
-
/** The enabled row currently under the pointer, if any. */
|
|
160
|
-
row: T | null;
|
|
161
|
-
};
|
|
162
|
-
export type MenuPressEvent<T> = {
|
|
163
|
-
type: 'down';
|
|
164
|
-
target: 'trigger' | 'menu';
|
|
165
|
-
pointerType: MenuPressPointerType;
|
|
166
|
-
/** The enabled row under the press when it lands inside the menu. */
|
|
167
|
-
row: T | null;
|
|
168
|
-
time: number;
|
|
169
|
-
}
|
|
170
|
-
/** The menu opened while the trigger press is still held. */
|
|
171
|
-
| {
|
|
172
|
-
type: 'opened';
|
|
173
|
-
time: number;
|
|
174
|
-
} | {
|
|
175
|
-
type: 'move';
|
|
176
|
-
row: T | null;
|
|
177
|
-
isInMenu: boolean;
|
|
178
|
-
time: number;
|
|
179
|
-
} | {
|
|
180
|
-
type: 'up';
|
|
181
|
-
row: T | null;
|
|
182
|
-
isInMenu: boolean;
|
|
183
|
-
isOnTrigger: boolean;
|
|
184
|
-
time: number;
|
|
185
|
-
}
|
|
186
|
-
/** The browser took the gesture: pointercancel, a second pointer, a scroll. */
|
|
187
|
-
| {
|
|
188
|
-
type: 'cancel';
|
|
189
|
-
};
|
|
190
|
-
export type MenuPressEffect<T> = {
|
|
191
|
-
type: 'none';
|
|
192
|
-
}
|
|
193
|
-
/** A mouse pressed the trigger: open the menu now, under the held pointer. */
|
|
194
|
-
| {
|
|
195
|
-
type: 'open';
|
|
196
|
-
} | {
|
|
197
|
-
type: 'highlight';
|
|
198
|
-
row: T;
|
|
199
|
-
} | {
|
|
200
|
-
type: 'clear';
|
|
201
|
-
} | {
|
|
202
|
-
type: 'act';
|
|
203
|
-
row: T;
|
|
204
|
-
}
|
|
205
|
-
/**
|
|
206
|
-
* The gesture ended without a row acting. `stray` says whether the browser
|
|
207
|
-
* will still report a `click` for this gesture that must not act; `dismiss`
|
|
208
|
-
* says the menu should close (a mouse released outside it).
|
|
209
|
-
*/
|
|
210
|
-
| {
|
|
211
|
-
type: 'settle';
|
|
212
|
-
stray: boolean;
|
|
213
|
-
dismiss: boolean;
|
|
214
|
-
};
|
|
215
|
-
export interface MenuPressStep<T> {
|
|
216
|
-
gesture: MenuPressGesture<T>;
|
|
217
|
-
effect: MenuPressEffect<T>;
|
|
218
|
-
}
|
|
219
|
-
/**
|
|
220
|
-
* The menu press machine, as released: one step from a gesture and an event
|
|
221
|
-
* to the next gesture and the effect to apply. Pure.
|
|
222
111
|
*/
|
|
223
112
|
export declare function menuPressStep<T>(gesture: MenuPressGesture<T>, event: MenuPressEvent<T>): MenuPressStep<T>;
|
|
224
113
|
//# sourceMappingURL=menuPressGesture.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menuPressGesture.d.ts","sourceRoot":"","sources":["../../src/hooks/menuPressGesture.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"menuPressGesture.d.ts","sourceRoot":"","sources":["../../src/hooks/menuPressGesture.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,uEAAuE;AACvE,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AAE7D,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAC1B;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,GACf;IACE,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,oBAAoB,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;CACnB,GACD;IACE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,oBAAoB,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;CAClB,GACD;IACE,KAAK,EAAE,UAAU,CAAC;IAClB,WAAW,EAAE,oBAAoB,CAAC;IAClC,6BAA6B;IAC7B,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,2DAA2D;IAC3D,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC;CACf,CAAC;AAEN,MAAM,MAAM,cAAc,CAAC,CAAC,IACxB;IACE,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,WAAW,EAAE,oBAAoB,CAAC;IAClC,qEAAqE;IACrE,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AACH,6DAA6D;GAC3D;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAC9B;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAC9D;IACE,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;CACd;AACH,+EAA+E;GAC7E;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,CAAC;AAErB,MAAM,MAAM,eAAe,CAAC,CAAC,IACzB;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC;AAChB,8EAA8E;GAC5E;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GACd;IAAC,IAAI,EAAE,WAAW,CAAC;IAAC,GAAG,EAAE,CAAC,CAAA;CAAC,GAC3B;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC,GACf;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,CAAC,CAAA;CAAC;AACvB;;;;GAIG;GACD;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAC,CAAC;AAEvD,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC7B,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,EAAE,gBAAgB,CAAC,KAAK,CAAmB,CAAC;AA+BxE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAC7B,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAC5B,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GACvB,aAAa,CAAC,CAAC,CAAC,CAWlB"}
|