@bug-on/m3-expressive 1.2.5 → 1.2.7
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 +12 -0
- package/dist/buttons.js +260 -98
- package/dist/buttons.js.map +1 -1
- package/dist/buttons.mjs +261 -99
- package/dist/buttons.mjs.map +1 -1
- package/dist/core.js +338 -176
- package/dist/core.js.map +1 -1
- package/dist/core.mjs +321 -159
- package/dist/core.mjs.map +1 -1
- package/dist/feedback.d.mts +32 -0
- package/dist/feedback.d.ts +32 -0
- package/dist/feedback.js +348 -186
- package/dist/feedback.js.map +1 -1
- package/dist/feedback.mjs +326 -164
- package/dist/feedback.mjs.map +1 -1
- package/dist/index.js +261 -99
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +262 -100
- package/dist/index.mjs.map +1 -1
- package/dist/layout.js +261 -99
- package/dist/layout.js.map +1 -1
- package/dist/layout.mjs +262 -100
- package/dist/layout.mjs.map +1 -1
- package/dist/navigation.js +260 -98
- package/dist/navigation.js.map +1 -1
- package/dist/navigation.mjs +261 -99
- package/dist/navigation.mjs.map +1 -1
- package/dist/overlays.js +391 -229
- package/dist/overlays.js.map +1 -1
- package/dist/overlays.mjs +354 -192
- package/dist/overlays.mjs.map +1 -1
- package/dist/pickers.js +399 -237
- package/dist/pickers.js.map +1 -1
- package/dist/pickers.mjs +367 -205
- package/dist/pickers.mjs.map +1 -1
- package/package.json +1 -1
package/dist/overlays.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
var RadixDialog = require('@radix-ui/react-dialog');
|
|
5
5
|
var react = require('motion/react');
|
|
6
|
-
var
|
|
6
|
+
var React2 = require('react');
|
|
7
7
|
var clsx = require('clsx');
|
|
8
8
|
var tailwindMerge = require('tailwind-merge');
|
|
9
9
|
var reactSlot = require('@radix-ui/react-slot');
|
|
@@ -30,7 +30,7 @@ function _interopNamespace(e) {
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
|
|
33
|
-
var
|
|
33
|
+
var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
|
|
34
34
|
var RadixScrollArea__namespace = /*#__PURE__*/_interopNamespace(RadixScrollArea);
|
|
35
35
|
|
|
36
36
|
var __defProp = Object.defineProperty;
|
|
@@ -112,11 +112,11 @@ var ROTATE_KEY_SPLINES = [
|
|
|
112
112
|
var ROTATE_VALUES = "0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24";
|
|
113
113
|
var DETERMINATE_CIRCLE = "M24 7 C34.49 7 41 13.51 41 24 C41 34.49 34.49 41 24 41 C13.51 41 7 34.49 7 24 C7 13.51 13.51 7 24 7 Z";
|
|
114
114
|
var DETERMINATE_SOFT_BURST = "M20.9 10.4 21.4 9.5 21.9 8.7 22.5 7.8 23.2 7.2 24.2 7 25.1 7.4 25.7 8.1 26.2 9 26.8 9.8 27.3 10.6 28.1 11.2 29 11.3 30 11 30.9 10.6 31.8 10.3 32.8 9.9 33.7 10 34.5 10.6 34.9 11.5 34.8 12.5 34.8 13.5 34.7 14.5 34.7 15.5 35.2 16.3 36 16.8 37 17.1 37.9 17.3 38.9 17.5 39.8 17.9 40.4 18.7 40.5 19.7 40 20.5 39.4 21.3 38.7 22 38.1 22.8 37.6 23.7 37.7 24.6 38.3 25.5 38.9 26.2 39.6 27 40.2 27.7 40.5 28.7 40.3 29.6 39.5 30.3 38.6 30.6 37.6 30.8 36.7 31 35.7 31.3 35 31.9 34.6 32.8 34.7 33.8 34.8 34.8 34.9 35.8 34.8 36.8 34.3 37.6 33.4 38.1 32.4 38 31.5 37.6 30.6 37.2 29.7 36.9 28.7 36.6 27.8 36.9 27.1 37.6 26.6 38.5 26.1 39.3 25.5 40.2 24.8 40.8 23.8 41 22.9 40.6 22.3 39.9 21.8 39 21.2 38.2 20.7 37.4 19.9 36.8 19 36.7 18 37 17.1 37.4 16.2 37.7 15.2 38.1 14.3 38 13.5 37.4 13.1 36.5 13.2 35.5 13.2 34.5 13.3 33.5 13.3 32.5 12.8 31.7 12 31.2 11 31 10.1 30.7 9.1 30.5 8.2 30.1 7.6 29.3 7.5 28.3 8 27.5 8.7 26.7 9.3 26 9.9 25.2 10.4 24.3 10.3 23.4 9.7 22.5 9.1 21.8 8.4 21 7.8 20.3 7.5 19.3 7.7 18.4 8.5 17.7 9.4 17.4 10.4 17.2 11.3 17 12.3 16.7 13 16.1 13.4 15.2 13.3 14.2 13.2 13.2 13.1 12.2 13.2 11.2 13.7 10.4 14.6 9.9 15.6 10 16.5 10.4 17.4 10.8 18.3 11.1 19.3 11.4 20.2 11.1Z";
|
|
115
|
-
var IndeterminateSvg =
|
|
115
|
+
var IndeterminateSvg = React2__namespace.memo(function IndeterminateSvg2({
|
|
116
116
|
size
|
|
117
117
|
}) {
|
|
118
|
-
const [ready, setReady] =
|
|
119
|
-
|
|
118
|
+
const [ready, setReady] = React2__namespace.useState(false);
|
|
119
|
+
React2__namespace.useEffect(() => {
|
|
120
120
|
const raf = requestAnimationFrame(() => setReady(true));
|
|
121
121
|
return () => cancelAnimationFrame(raf);
|
|
122
122
|
}, []);
|
|
@@ -161,7 +161,7 @@ var IndeterminateSvg = React9__namespace.memo(function IndeterminateSvg2({
|
|
|
161
161
|
}
|
|
162
162
|
);
|
|
163
163
|
});
|
|
164
|
-
var DeterminateSvg =
|
|
164
|
+
var DeterminateSvg = React2__namespace.memo(function DeterminateSvg2({
|
|
165
165
|
size,
|
|
166
166
|
progress
|
|
167
167
|
}) {
|
|
@@ -186,7 +186,7 @@ var DeterminateSvg = React9__namespace.memo(function DeterminateSvg2({
|
|
|
186
186
|
}
|
|
187
187
|
);
|
|
188
188
|
});
|
|
189
|
-
var LoadingIndicator =
|
|
189
|
+
var LoadingIndicator = React2__namespace.forwardRef(
|
|
190
190
|
(_a, ref) => {
|
|
191
191
|
var _b = _a, {
|
|
192
192
|
variant = "uncontained",
|
|
@@ -281,27 +281,47 @@ function generateWavyCircularPath(center, radius, amplitude, wavelength) {
|
|
|
281
281
|
if (i === 0) d += `M ${xAt(t0).toFixed(2)} ${yAt(t0).toFixed(2)}`;
|
|
282
282
|
d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${xAt(t1).toFixed(2)} ${yAt(t1).toFixed(2)}`;
|
|
283
283
|
}
|
|
284
|
-
d
|
|
285
|
-
return d;
|
|
284
|
+
return `${d} Z`;
|
|
286
285
|
}
|
|
287
286
|
function getSinePath(startX, endX, phase, wl, amp) {
|
|
288
287
|
if (startX >= endX) return "";
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
288
|
+
if (amp <= 0.01) {
|
|
289
|
+
return `M ${startX.toFixed(2)} 0 L ${endX.toFixed(2)} 0`;
|
|
290
|
+
}
|
|
291
|
+
const safeWl = Math.max(1, wl);
|
|
292
|
+
const k = 2 * Math.PI / safeWl;
|
|
293
|
+
const phi = phase / safeWl * 2 * Math.PI;
|
|
294
|
+
const yAt = (x) => amp * Math.sin(k * x + phi);
|
|
295
|
+
const dyAt = (x) => amp * k * Math.cos(k * x + phi);
|
|
296
|
+
const step = safeWl / 4;
|
|
297
|
+
let d = `M ${startX.toFixed(2)} ${yAt(startX).toFixed(2)}`;
|
|
298
|
+
let currentX = startX;
|
|
299
|
+
while (currentX < endX) {
|
|
300
|
+
const nextX = Math.min(endX, currentX + step);
|
|
301
|
+
const dx = nextX - currentX;
|
|
302
|
+
const scale = dx / 3;
|
|
303
|
+
const y0 = yAt(currentX);
|
|
304
|
+
const dy0 = dyAt(currentX);
|
|
305
|
+
const y1 = yAt(nextX);
|
|
306
|
+
const dy1 = dyAt(nextX);
|
|
307
|
+
const cp1x = currentX + scale;
|
|
308
|
+
const cp1y = y0 + scale * dy0;
|
|
309
|
+
const cp2x = nextX - scale;
|
|
310
|
+
const cp2y = y1 - scale * dy1;
|
|
311
|
+
d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${nextX.toFixed(2)} ${y1.toFixed(2)}`;
|
|
312
|
+
currentX = nextX;
|
|
299
313
|
}
|
|
300
|
-
const yEnd = Math.sin((endX + phase) / wl * 2 * Math.PI) * amp;
|
|
301
|
-
d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
|
|
302
314
|
return d;
|
|
303
315
|
}
|
|
304
|
-
var
|
|
316
|
+
var GLOBAL_ROTATION_DURATION = 6e3;
|
|
317
|
+
var GLOBAL_ROTATION_TARGET = 1080;
|
|
318
|
+
var ADDITIONAL_ROTATION_CYCLE = 1500;
|
|
319
|
+
var ADDITIONAL_ROTATION_STEP = 90;
|
|
320
|
+
var ADDITIONAL_ROTATION_EASE_DURATION = 500;
|
|
321
|
+
var DEFAULT_MIN_PROGRESS = 0.1;
|
|
322
|
+
var DEFAULT_MAX_PROGRESS = 0.8;
|
|
323
|
+
var PROGRESS_CYCLE_DURATION = 1500;
|
|
324
|
+
var CircularProgress = React2__namespace.forwardRef(
|
|
305
325
|
(_a, ref) => {
|
|
306
326
|
var _b = _a, {
|
|
307
327
|
value,
|
|
@@ -314,6 +334,10 @@ var CircularProgress = React9__namespace.forwardRef(
|
|
|
314
334
|
crawlerSpeed = 1,
|
|
315
335
|
color,
|
|
316
336
|
trackColor,
|
|
337
|
+
showTrack = "auto",
|
|
338
|
+
minProgress = DEFAULT_MIN_PROGRESS,
|
|
339
|
+
maxProgress = DEFAULT_MAX_PROGRESS,
|
|
340
|
+
amplitudeRange,
|
|
317
341
|
className,
|
|
318
342
|
"aria-label": ariaLabel
|
|
319
343
|
} = _b, restProps = __objRest(_b, [
|
|
@@ -327,6 +351,10 @@ var CircularProgress = React9__namespace.forwardRef(
|
|
|
327
351
|
"crawlerSpeed",
|
|
328
352
|
"color",
|
|
329
353
|
"trackColor",
|
|
354
|
+
"showTrack",
|
|
355
|
+
"minProgress",
|
|
356
|
+
"maxProgress",
|
|
357
|
+
"amplitudeRange",
|
|
330
358
|
"className",
|
|
331
359
|
"aria-label"
|
|
332
360
|
]);
|
|
@@ -337,17 +365,22 @@ var CircularProgress = React9__namespace.forwardRef(
|
|
|
337
365
|
const activeColor = color || "var(--md-sys-color-indicator-active)";
|
|
338
366
|
const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
|
|
339
367
|
const isWavy = shape === "wavy";
|
|
368
|
+
const shouldShowIndeterminateTrack = showTrack === "auto" ? isWavy : showTrack;
|
|
340
369
|
const BASELINE_SIZE = 48;
|
|
341
370
|
const scaleFactor = size / BASELINE_SIZE;
|
|
342
|
-
const effectiveAmplitude =
|
|
371
|
+
const effectiveAmplitude = React2__namespace.useMemo(
|
|
343
372
|
() => amplitude != null ? amplitude : 1.6 * scaleFactor,
|
|
344
373
|
[amplitude, scaleFactor]
|
|
345
374
|
);
|
|
346
|
-
const effectiveWavelength =
|
|
375
|
+
const effectiveWavelength = React2__namespace.useMemo(
|
|
347
376
|
() => wavelength != null ? wavelength : 15 * scaleFactor,
|
|
348
377
|
[wavelength, scaleFactor]
|
|
349
378
|
);
|
|
350
|
-
const
|
|
379
|
+
const resolvedAmplitudeRange = React2__namespace.useMemo(
|
|
380
|
+
() => amplitudeRange != null ? amplitudeRange : [0, effectiveAmplitude],
|
|
381
|
+
[amplitudeRange, effectiveAmplitude]
|
|
382
|
+
);
|
|
383
|
+
const wavyActivePath = React2__namespace.useMemo(
|
|
351
384
|
() => isWavy ? generateWavyCircularPath(
|
|
352
385
|
center,
|
|
353
386
|
radius,
|
|
@@ -356,8 +389,8 @@ var CircularProgress = React9__namespace.forwardRef(
|
|
|
356
389
|
) : null,
|
|
357
390
|
[isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
|
|
358
391
|
);
|
|
359
|
-
const circumference =
|
|
360
|
-
const gapForTrack =
|
|
392
|
+
const circumference = React2__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
|
|
393
|
+
const gapForTrack = React2__namespace.useMemo(
|
|
361
394
|
() => (gapSize + trackHeight) / circumference,
|
|
362
395
|
[gapSize, trackHeight, circumference]
|
|
363
396
|
);
|
|
@@ -366,6 +399,145 @@ var CircularProgress = React9__namespace.forwardRef(
|
|
|
366
399
|
const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
|
|
367
400
|
const ActiveCircleElem = react.m.circle;
|
|
368
401
|
const ActivePathElem = react.m.path;
|
|
402
|
+
const indeterminateSvgRef = React2__namespace.useRef(null);
|
|
403
|
+
const indeterminateTrackRef = React2__namespace.useRef(null);
|
|
404
|
+
const indeterminateActiveRef = React2__namespace.useRef(null);
|
|
405
|
+
const indeterminateWavyTrackPathRef = React2__namespace.useRef(null);
|
|
406
|
+
const indeterminateWavyActivePathRef = React2__namespace.useRef(null);
|
|
407
|
+
const cachedPathLengthRef = React2__namespace.useRef(0);
|
|
408
|
+
React2__namespace.useLayoutEffect(() => {
|
|
409
|
+
if (!isWavy || !wavyActivePath) {
|
|
410
|
+
cachedPathLengthRef.current = circumference;
|
|
411
|
+
return;
|
|
412
|
+
}
|
|
413
|
+
const el = indeterminateActiveRef.current;
|
|
414
|
+
if (el && "getTotalLength" in el) {
|
|
415
|
+
try {
|
|
416
|
+
const len = el.getTotalLength();
|
|
417
|
+
if (len > 0) {
|
|
418
|
+
cachedPathLengthRef.current = len;
|
|
419
|
+
return;
|
|
420
|
+
}
|
|
421
|
+
} catch (e) {
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
cachedPathLengthRef.current = circumference;
|
|
425
|
+
}, [isWavy, circumference, wavyActivePath]);
|
|
426
|
+
react.useAnimationFrame((time) => {
|
|
427
|
+
if (isDeterminate) return;
|
|
428
|
+
const safeCrawlerSpeed = Math.max(0.1, crawlerSpeed);
|
|
429
|
+
const scaledTime = time * safeCrawlerSpeed;
|
|
430
|
+
const globalCycle = scaledTime % GLOBAL_ROTATION_DURATION;
|
|
431
|
+
const globalAngle = globalCycle / GLOBAL_ROTATION_DURATION * GLOBAL_ROTATION_TARGET;
|
|
432
|
+
const additionalFullCycles = Math.floor(
|
|
433
|
+
scaledTime / ADDITIONAL_ROTATION_CYCLE
|
|
434
|
+
);
|
|
435
|
+
const additionalCycleTime = scaledTime % ADDITIONAL_ROTATION_CYCLE;
|
|
436
|
+
const additionalEaseT = Math.min(
|
|
437
|
+
1,
|
|
438
|
+
additionalCycleTime / ADDITIONAL_ROTATION_EASE_DURATION
|
|
439
|
+
);
|
|
440
|
+
const additionalAngle = (additionalFullCycles + easeInOutCubic(additionalEaseT)) * ADDITIONAL_ROTATION_STEP;
|
|
441
|
+
const totalRotation = globalAngle + additionalAngle;
|
|
442
|
+
if (indeterminateSvgRef.current) {
|
|
443
|
+
indeterminateSvgRef.current.style.transform = `rotate(${totalRotation - 90}deg)`;
|
|
444
|
+
}
|
|
445
|
+
const progressFullCycle = PROGRESS_CYCLE_DURATION * 2;
|
|
446
|
+
const progressCycleTime = scaledTime % progressFullCycle;
|
|
447
|
+
let progress;
|
|
448
|
+
if (progressCycleTime < PROGRESS_CYCLE_DURATION) {
|
|
449
|
+
const t = progressCycleTime / PROGRESS_CYCLE_DURATION;
|
|
450
|
+
progress = minProgress + (maxProgress - minProgress) * easeInOutCubic(t);
|
|
451
|
+
} else {
|
|
452
|
+
const t = (progressCycleTime - PROGRESS_CYCLE_DURATION) / PROGRESS_CYCLE_DURATION;
|
|
453
|
+
progress = maxProgress - (maxProgress - minProgress) * easeInOutCubic(t);
|
|
454
|
+
}
|
|
455
|
+
if (isWavy) {
|
|
456
|
+
const amplitudeT = (progress - minProgress) / (maxProgress - minProgress);
|
|
457
|
+
const currentAmplitude = resolvedAmplitudeRange[0] + (resolvedAmplitudeRange[1] - resolvedAmplitudeRange[0]) * amplitudeT;
|
|
458
|
+
const dynamicPath = generateWavyCircularPath(
|
|
459
|
+
center,
|
|
460
|
+
radius,
|
|
461
|
+
currentAmplitude,
|
|
462
|
+
effectiveWavelength
|
|
463
|
+
);
|
|
464
|
+
if (indeterminateWavyActivePathRef.current) {
|
|
465
|
+
indeterminateWavyActivePathRef.current.setAttribute("d", dynamicPath);
|
|
466
|
+
}
|
|
467
|
+
if (indeterminateWavyTrackPathRef.current) {
|
|
468
|
+
indeterminateWavyTrackPathRef.current.setAttribute("d", dynamicPath);
|
|
469
|
+
}
|
|
470
|
+
const pathEl = indeterminateWavyActivePathRef.current;
|
|
471
|
+
let totalLen = cachedPathLengthRef.current || circumference;
|
|
472
|
+
if (pathEl) {
|
|
473
|
+
try {
|
|
474
|
+
const len = pathEl.getTotalLength();
|
|
475
|
+
if (len > 0) totalLen = len;
|
|
476
|
+
} catch (e) {
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
const gapFrac = (gapSize + trackHeight) / totalLen;
|
|
480
|
+
const activeLen = totalLen * progress;
|
|
481
|
+
const activeOff = 0;
|
|
482
|
+
if (indeterminateWavyActivePathRef.current) {
|
|
483
|
+
indeterminateWavyActivePathRef.current.setAttribute(
|
|
484
|
+
"stroke-dasharray",
|
|
485
|
+
`${activeLen} ${totalLen}`
|
|
486
|
+
);
|
|
487
|
+
indeterminateWavyActivePathRef.current.setAttribute(
|
|
488
|
+
"stroke-dashoffset",
|
|
489
|
+
`${activeOff}`
|
|
490
|
+
);
|
|
491
|
+
}
|
|
492
|
+
if (shouldShowIndeterminateTrack && indeterminateWavyTrackPathRef.current) {
|
|
493
|
+
const trackStartFrac = progress + gapFrac;
|
|
494
|
+
const trackLen = Math.max(
|
|
495
|
+
1e-3,
|
|
496
|
+
totalLen * (1 - progress - 2 * gapFrac)
|
|
497
|
+
);
|
|
498
|
+
const trackOff = -totalLen * trackStartFrac;
|
|
499
|
+
indeterminateWavyTrackPathRef.current.setAttribute(
|
|
500
|
+
"stroke-dasharray",
|
|
501
|
+
`${trackLen} ${totalLen}`
|
|
502
|
+
);
|
|
503
|
+
indeterminateWavyTrackPathRef.current.setAttribute(
|
|
504
|
+
"stroke-dashoffset",
|
|
505
|
+
`${trackOff}`
|
|
506
|
+
);
|
|
507
|
+
}
|
|
508
|
+
} else {
|
|
509
|
+
const totalLen = circumference;
|
|
510
|
+
const activeLen = totalLen * progress;
|
|
511
|
+
const activeOff = 0;
|
|
512
|
+
if (indeterminateActiveRef.current) {
|
|
513
|
+
indeterminateActiveRef.current.setAttribute(
|
|
514
|
+
"stroke-dasharray",
|
|
515
|
+
`${activeLen} ${totalLen}`
|
|
516
|
+
);
|
|
517
|
+
indeterminateActiveRef.current.setAttribute(
|
|
518
|
+
"stroke-dashoffset",
|
|
519
|
+
`${activeOff}`
|
|
520
|
+
);
|
|
521
|
+
}
|
|
522
|
+
if (shouldShowIndeterminateTrack && indeterminateTrackRef.current) {
|
|
523
|
+
const gapFrac = (gapSize + trackHeight) / totalLen;
|
|
524
|
+
const trackStartFrac = progress + gapFrac;
|
|
525
|
+
const trackLen = Math.max(
|
|
526
|
+
1e-3,
|
|
527
|
+
totalLen * (1 - progress - 2 * gapFrac)
|
|
528
|
+
);
|
|
529
|
+
const trackOff = -totalLen * trackStartFrac;
|
|
530
|
+
indeterminateTrackRef.current.setAttribute(
|
|
531
|
+
"stroke-dasharray",
|
|
532
|
+
`${trackLen} ${totalLen}`
|
|
533
|
+
);
|
|
534
|
+
indeterminateTrackRef.current.setAttribute(
|
|
535
|
+
"stroke-dashoffset",
|
|
536
|
+
`${trackOff}`
|
|
537
|
+
);
|
|
538
|
+
}
|
|
539
|
+
}
|
|
540
|
+
});
|
|
369
541
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
370
542
|
"div",
|
|
371
543
|
__spreadProps(__spreadValues({
|
|
@@ -442,9 +614,10 @@ var CircularProgress = React9__namespace.forwardRef(
|
|
|
442
614
|
]
|
|
443
615
|
}
|
|
444
616
|
),
|
|
445
|
-
!isDeterminate && /* @__PURE__ */ jsxRuntime.
|
|
446
|
-
|
|
617
|
+
!isDeterminate && /* @__PURE__ */ jsxRuntime.jsx(
|
|
618
|
+
"svg",
|
|
447
619
|
{
|
|
620
|
+
ref: indeterminateSvgRef,
|
|
448
621
|
width: size,
|
|
449
622
|
height: size,
|
|
450
623
|
viewBox: `0 0 ${size} ${size}`,
|
|
@@ -453,90 +626,60 @@ var CircularProgress = React9__namespace.forwardRef(
|
|
|
453
626
|
position: "absolute",
|
|
454
627
|
inset: 0,
|
|
455
628
|
overflow: "visible",
|
|
456
|
-
|
|
457
|
-
|
|
629
|
+
transformOrigin: "center",
|
|
630
|
+
transform: "rotate(-90deg)"
|
|
458
631
|
},
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
463
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
464
|
-
ease: "linear"
|
|
465
|
-
}
|
|
466
|
-
},
|
|
467
|
-
children: [
|
|
468
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
469
|
-
react.m.circle,
|
|
632
|
+
children: isWavy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
633
|
+
shouldShowIndeterminateTrack && /* @__PURE__ */ jsxRuntime.jsx(
|
|
634
|
+
"path",
|
|
470
635
|
{
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
r: radius,
|
|
636
|
+
ref: indeterminateWavyTrackPathRef,
|
|
637
|
+
d: wavyActivePath != null ? wavyActivePath : "",
|
|
474
638
|
fill: "none",
|
|
475
639
|
stroke: bgTrackColor,
|
|
476
640
|
strokeWidth: trackHeight,
|
|
477
|
-
strokeLinecap: "round"
|
|
478
|
-
style: { originX: "50%", originY: "50%" },
|
|
479
|
-
animate: {
|
|
480
|
-
pathLength: [
|
|
481
|
-
Math.max(1e-3, 1 - 0.1 - 2 * gapForTrack),
|
|
482
|
-
Math.max(1e-3, 1 - 0.75 - 2 * gapForTrack),
|
|
483
|
-
Math.max(1e-3, 1 - 0.1 - 2 * gapForTrack)
|
|
484
|
-
],
|
|
485
|
-
rotate: [
|
|
486
|
-
`${(0.1 + gapForTrack) * 360}deg`,
|
|
487
|
-
`${(1 + gapForTrack) * 360}deg`,
|
|
488
|
-
`${(1.1 + gapForTrack) * 360}deg`
|
|
489
|
-
]
|
|
490
|
-
},
|
|
491
|
-
transition: {
|
|
492
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
493
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
494
|
-
ease: [0.4, 0, 0.2, 1]
|
|
495
|
-
}
|
|
641
|
+
strokeLinecap: "round"
|
|
496
642
|
}
|
|
497
643
|
),
|
|
498
|
-
|
|
499
|
-
|
|
644
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
645
|
+
"path",
|
|
500
646
|
{
|
|
647
|
+
ref: indeterminateWavyActivePathRef,
|
|
501
648
|
d: wavyActivePath != null ? wavyActivePath : "",
|
|
502
649
|
fill: "none",
|
|
503
650
|
stroke: activeColor,
|
|
504
651
|
strokeWidth: trackHeight,
|
|
505
|
-
strokeLinecap: "round"
|
|
506
|
-
style: { originX: "50%", originY: "50%" },
|
|
507
|
-
animate: {
|
|
508
|
-
pathLength: [0.1, 0.75, 0.1],
|
|
509
|
-
rotate: ["0deg", "90deg", "360deg"]
|
|
510
|
-
},
|
|
511
|
-
transition: {
|
|
512
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
513
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
514
|
-
ease: [0.4, 0, 0.2, 1]
|
|
515
|
-
}
|
|
652
|
+
strokeLinecap: "round"
|
|
516
653
|
}
|
|
517
|
-
)
|
|
518
|
-
|
|
654
|
+
)
|
|
655
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
656
|
+
shouldShowIndeterminateTrack && /* @__PURE__ */ jsxRuntime.jsx(
|
|
657
|
+
"circle",
|
|
658
|
+
{
|
|
659
|
+
ref: indeterminateTrackRef,
|
|
660
|
+
cx: center,
|
|
661
|
+
cy: center,
|
|
662
|
+
r: radius,
|
|
663
|
+
fill: "none",
|
|
664
|
+
stroke: bgTrackColor,
|
|
665
|
+
strokeWidth: trackHeight,
|
|
666
|
+
strokeLinecap: "round"
|
|
667
|
+
}
|
|
668
|
+
),
|
|
669
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
670
|
+
"circle",
|
|
519
671
|
{
|
|
672
|
+
ref: indeterminateActiveRef,
|
|
520
673
|
cx: center,
|
|
521
674
|
cy: center,
|
|
522
675
|
r: radius,
|
|
523
676
|
fill: "none",
|
|
524
677
|
stroke: activeColor,
|
|
525
678
|
strokeWidth: trackHeight,
|
|
526
|
-
strokeLinecap: "round"
|
|
527
|
-
style: { originX: "50%", originY: "50%" },
|
|
528
|
-
animate: {
|
|
529
|
-
pathLength: [0.1, 0.75, 0.1],
|
|
530
|
-
rotate: ["0deg", "90deg", "360deg"]
|
|
531
|
-
},
|
|
532
|
-
transition: {
|
|
533
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
534
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
535
|
-
ease: [0.4, 0, 0.2, 1]
|
|
536
|
-
}
|
|
679
|
+
strokeLinecap: "round"
|
|
537
680
|
}
|
|
538
681
|
)
|
|
539
|
-
]
|
|
682
|
+
] })
|
|
540
683
|
}
|
|
541
684
|
)
|
|
542
685
|
] })
|
|
@@ -546,9 +689,9 @@ var CircularProgress = React9__namespace.forwardRef(
|
|
|
546
689
|
);
|
|
547
690
|
CircularProgress.displayName = "CircularProgress";
|
|
548
691
|
function useContainerWidth() {
|
|
549
|
-
const [width, setWidth] =
|
|
550
|
-
const observerRef =
|
|
551
|
-
const ref =
|
|
692
|
+
const [width, setWidth] = React2__namespace.useState(0);
|
|
693
|
+
const observerRef = React2__namespace.useRef(null);
|
|
694
|
+
const ref = React2__namespace.useCallback((node) => {
|
|
552
695
|
if (observerRef.current) {
|
|
553
696
|
observerRef.current.disconnect();
|
|
554
697
|
observerRef.current = null;
|
|
@@ -562,7 +705,7 @@ function useContainerWidth() {
|
|
|
562
705
|
observerRef.current = obs;
|
|
563
706
|
}
|
|
564
707
|
}, []);
|
|
565
|
-
|
|
708
|
+
React2__namespace.useEffect(() => {
|
|
566
709
|
return () => {
|
|
567
710
|
if (observerRef.current) {
|
|
568
711
|
observerRef.current.disconnect();
|
|
@@ -572,7 +715,7 @@ function useContainerWidth() {
|
|
|
572
715
|
return [ref, width];
|
|
573
716
|
}
|
|
574
717
|
function useMergedRef(...refs) {
|
|
575
|
-
return
|
|
718
|
+
return React2__namespace.useCallback(
|
|
576
719
|
(node) => {
|
|
577
720
|
for (const ref of refs) {
|
|
578
721
|
if (typeof ref === "function") {
|
|
@@ -586,7 +729,7 @@ function useMergedRef(...refs) {
|
|
|
586
729
|
[refs]
|
|
587
730
|
);
|
|
588
731
|
}
|
|
589
|
-
var FlatLinearTrack =
|
|
732
|
+
var FlatLinearTrack = React2__namespace.memo(function FlatLinearTrack2({
|
|
590
733
|
trackHeight,
|
|
591
734
|
activeColor,
|
|
592
735
|
trackColor,
|
|
@@ -662,7 +805,7 @@ var FlatLinearTrack = React9__namespace.memo(function FlatLinearTrack2({
|
|
|
662
805
|
}
|
|
663
806
|
);
|
|
664
807
|
});
|
|
665
|
-
var WavyLinearTrack =
|
|
808
|
+
var WavyLinearTrack = React2__namespace.memo(function WavyLinearTrack2({
|
|
666
809
|
trackHeight,
|
|
667
810
|
svgHeight,
|
|
668
811
|
amplitude,
|
|
@@ -681,13 +824,13 @@ var WavyLinearTrack = React9__namespace.memo(function WavyLinearTrack2({
|
|
|
681
824
|
}) {
|
|
682
825
|
const isDeterminate = typeof value === "number";
|
|
683
826
|
const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
|
|
684
|
-
const titleId =
|
|
827
|
+
const titleId = React2__namespace.useId();
|
|
685
828
|
const [containerRef, width] = useContainerWidth();
|
|
686
|
-
const activePathRef =
|
|
687
|
-
const trackPathRef =
|
|
829
|
+
const activePathRef = React2__namespace.useRef(null);
|
|
830
|
+
const trackPathRef = React2__namespace.useRef(null);
|
|
688
831
|
const amplitudeMV = react.useMotionValue(amplitude);
|
|
689
832
|
const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 1);
|
|
690
|
-
|
|
833
|
+
React2__namespace.useEffect(() => {
|
|
691
834
|
if (isDeterminate) {
|
|
692
835
|
const fraction = clampedValue / 100;
|
|
693
836
|
let targetAmp = amplitude;
|
|
@@ -700,6 +843,12 @@ var WavyLinearTrack = React9__namespace.memo(function WavyLinearTrack2({
|
|
|
700
843
|
duration: 0.5
|
|
701
844
|
});
|
|
702
845
|
react.animate(fractionMV, fraction, { duration: 0.4, ease: [0.2, 0, 0, 1] });
|
|
846
|
+
} else {
|
|
847
|
+
react.animate(amplitudeMV, amplitude, {
|
|
848
|
+
type: "spring",
|
|
849
|
+
bounce: 0,
|
|
850
|
+
duration: 0.5
|
|
851
|
+
});
|
|
703
852
|
}
|
|
704
853
|
}, [
|
|
705
854
|
clampedValue,
|
|
@@ -713,10 +862,10 @@ var WavyLinearTrack = React9__namespace.memo(function WavyLinearTrack2({
|
|
|
713
862
|
1,
|
|
714
863
|
isDeterminate ? wavelength : indeterminateWavelength
|
|
715
864
|
);
|
|
716
|
-
const trackAmp = trackShape === "wavy" ? amplitude : 0;
|
|
717
865
|
react.useAnimationFrame((time) => {
|
|
718
866
|
if (width === 0) return;
|
|
719
867
|
const currentAmp = amplitudeMV.get();
|
|
868
|
+
const trackAmp = trackShape === "wavy" ? amplitude : 0;
|
|
720
869
|
const phase = time / 1e3 * waveSpeed * activeWavelength;
|
|
721
870
|
const capWidth = trackHeight / 2;
|
|
722
871
|
let activePathD = "";
|
|
@@ -736,7 +885,7 @@ var WavyLinearTrack = React9__namespace.memo(function WavyLinearTrack2({
|
|
|
736
885
|
currentAmp
|
|
737
886
|
);
|
|
738
887
|
} else if (fraction === 0) {
|
|
739
|
-
activePathD =
|
|
888
|
+
activePathD = "";
|
|
740
889
|
}
|
|
741
890
|
const trackStart = adjHead + totalGap;
|
|
742
891
|
if (trackStart < width - capWidth) {
|
|
@@ -768,20 +917,20 @@ var WavyLinearTrack = React9__namespace.memo(function WavyLinearTrack2({
|
|
|
768
917
|
activeLines.push({ tail: l1T, head: l1H });
|
|
769
918
|
activeLines.push({ tail: l2T, head: l2H });
|
|
770
919
|
}
|
|
771
|
-
const
|
|
772
|
-
const
|
|
773
|
-
const
|
|
920
|
+
const activeSegments = activeLines.map((line) => {
|
|
921
|
+
const rawTail = line.tail * width;
|
|
922
|
+
const rawHead = line.head * width;
|
|
774
923
|
const adjTail = Math.max(
|
|
775
924
|
capWidth,
|
|
776
|
-
Math.min(width - capWidth,
|
|
925
|
+
Math.min(width - capWidth, rawTail)
|
|
777
926
|
);
|
|
778
927
|
const adjHead = Math.max(
|
|
779
928
|
capWidth,
|
|
780
|
-
Math.min(width - capWidth,
|
|
929
|
+
Math.min(width - capWidth, rawHead)
|
|
781
930
|
);
|
|
782
931
|
return { adjTail, adjHead };
|
|
783
932
|
}).filter((seg) => seg.adjHead - seg.adjTail > 0.1);
|
|
784
|
-
activePathD =
|
|
933
|
+
activePathD = activeSegments.map(
|
|
785
934
|
(seg) => getSinePath(
|
|
786
935
|
seg.adjTail,
|
|
787
936
|
seg.adjHead,
|
|
@@ -790,13 +939,24 @@ var WavyLinearTrack = React9__namespace.memo(function WavyLinearTrack2({
|
|
|
790
939
|
currentAmp
|
|
791
940
|
)
|
|
792
941
|
).join(" ");
|
|
942
|
+
const validActiveLines = activeLines.filter(
|
|
943
|
+
(line) => line.head > line.tail && line.head * width > 0 && line.tail * width < width
|
|
944
|
+
).sort((a, b) => a.tail - b.tail);
|
|
793
945
|
let currentTrackX = capWidth;
|
|
794
|
-
for (const
|
|
795
|
-
const
|
|
946
|
+
for (const line of validActiveLines) {
|
|
947
|
+
const blockStart = line.tail * width - totalGap;
|
|
948
|
+
const blockEnd = line.head * width + totalGap;
|
|
949
|
+
const trackEnd = Math.min(width - capWidth, blockStart);
|
|
796
950
|
if (trackEnd > currentTrackX) {
|
|
797
|
-
trackD += `${getSinePath(
|
|
951
|
+
trackD += `${getSinePath(
|
|
952
|
+
currentTrackX,
|
|
953
|
+
trackEnd,
|
|
954
|
+
phase,
|
|
955
|
+
activeWavelength,
|
|
956
|
+
trackAmp
|
|
957
|
+
)} `;
|
|
798
958
|
}
|
|
799
|
-
currentTrackX = Math.max(currentTrackX,
|
|
959
|
+
currentTrackX = Math.max(currentTrackX, blockEnd);
|
|
800
960
|
}
|
|
801
961
|
if (currentTrackX < width - capWidth) {
|
|
802
962
|
trackD += getSinePath(
|
|
@@ -809,15 +969,15 @@ var WavyLinearTrack = React9__namespace.memo(function WavyLinearTrack2({
|
|
|
809
969
|
}
|
|
810
970
|
}
|
|
811
971
|
if (activePathRef.current)
|
|
812
|
-
activePathRef.current.setAttribute("d", activePathD);
|
|
972
|
+
activePathRef.current.setAttribute("d", activePathD || "");
|
|
813
973
|
if (trackPathRef.current)
|
|
814
|
-
trackPathRef.current.setAttribute("d", trackD.trim());
|
|
974
|
+
trackPathRef.current.setAttribute("d", trackD.trim() || "");
|
|
815
975
|
});
|
|
816
976
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
817
977
|
"div",
|
|
818
978
|
{
|
|
819
979
|
ref: containerRef,
|
|
820
|
-
className: "relative w-full
|
|
980
|
+
className: "relative w-full",
|
|
821
981
|
style: { height: svgHeight },
|
|
822
982
|
children: width > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
823
983
|
"svg",
|
|
@@ -858,7 +1018,7 @@ var WavyLinearTrack = React9__namespace.memo(function WavyLinearTrack2({
|
|
|
858
1018
|
}
|
|
859
1019
|
);
|
|
860
1020
|
});
|
|
861
|
-
var LinearProgress =
|
|
1021
|
+
var LinearProgress = React2__namespace.forwardRef(
|
|
862
1022
|
(_a, ref) => {
|
|
863
1023
|
var _b = _a, {
|
|
864
1024
|
value,
|
|
@@ -871,7 +1031,7 @@ var LinearProgress = React9__namespace.forwardRef(
|
|
|
871
1031
|
waveSpeed = 1,
|
|
872
1032
|
crawlerSpeed = 1,
|
|
873
1033
|
determinateAnimation = "md3",
|
|
874
|
-
indeterminateAnimation = "
|
|
1034
|
+
indeterminateAnimation = "md3",
|
|
875
1035
|
gapSize = 4,
|
|
876
1036
|
showStopIndicator = "auto",
|
|
877
1037
|
color,
|
|
@@ -899,33 +1059,35 @@ var LinearProgress = React9__namespace.forwardRef(
|
|
|
899
1059
|
]);
|
|
900
1060
|
const isDeterminate = value !== void 0;
|
|
901
1061
|
const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
|
|
902
|
-
const containerRef =
|
|
1062
|
+
const containerRef = React2__namespace.useRef(null);
|
|
903
1063
|
const mergedRef = useMergedRef(ref, containerRef);
|
|
904
|
-
const [isRtl, setIsRtl] =
|
|
905
|
-
|
|
1064
|
+
const [isRtl, setIsRtl] = React2__namespace.useState(false);
|
|
1065
|
+
React2__namespace.useEffect(() => {
|
|
906
1066
|
if (containerRef.current) {
|
|
907
1067
|
const dir = getComputedStyle(containerRef.current).direction;
|
|
908
1068
|
setIsRtl(dir === "rtl");
|
|
909
1069
|
}
|
|
910
1070
|
}, []);
|
|
911
|
-
const isWavy = shape === "wavy";
|
|
912
1071
|
const resolvedTrackShape = trackShape != null ? trackShape : shape;
|
|
913
|
-
const
|
|
914
|
-
const
|
|
1072
|
+
const isWavy = shape === "wavy" || resolvedTrackShape === "wavy";
|
|
1073
|
+
const effectiveAmplitude = React2__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
|
|
1074
|
+
const svgHeight = React2__namespace.useMemo(
|
|
915
1075
|
() => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
|
|
916
1076
|
[isWavy, trackHeight, effectiveAmplitude]
|
|
917
1077
|
);
|
|
918
|
-
const shouldShowStop =
|
|
919
|
-
() => isDeterminate && resolvedTrackShape === "flat" &&
|
|
1078
|
+
const shouldShowStop = React2__namespace.useMemo(
|
|
1079
|
+
() => isDeterminate && resolvedTrackShape === "flat" && showStopIndicator !== false,
|
|
920
1080
|
[isDeterminate, resolvedTrackShape, showStopIndicator]
|
|
921
1081
|
);
|
|
922
|
-
const stopSize =
|
|
1082
|
+
const stopSize = React2__namespace.useMemo(
|
|
923
1083
|
() => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
|
|
924
1084
|
[trackHeight]
|
|
925
1085
|
);
|
|
926
1086
|
const stopOffset = (trackHeight - stopSize) / 2;
|
|
927
1087
|
const activeColor = color || "var(--md-sys-color-indicator-active)";
|
|
928
1088
|
const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
|
|
1089
|
+
const useWavyTrack = isWavy || !isDeterminate;
|
|
1090
|
+
const trackAmp = isWavy ? effectiveAmplitude : 0;
|
|
929
1091
|
return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
930
1092
|
"div",
|
|
931
1093
|
__spreadProps(__spreadValues({
|
|
@@ -942,12 +1104,12 @@ var LinearProgress = React9__namespace.forwardRef(
|
|
|
942
1104
|
style: { height: svgHeight }
|
|
943
1105
|
}, restProps), {
|
|
944
1106
|
children: [
|
|
945
|
-
|
|
1107
|
+
useWavyTrack ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
946
1108
|
WavyLinearTrack,
|
|
947
1109
|
{
|
|
948
1110
|
trackHeight,
|
|
949
1111
|
svgHeight,
|
|
950
|
-
amplitude:
|
|
1112
|
+
amplitude: trackAmp,
|
|
951
1113
|
wavelength,
|
|
952
1114
|
indeterminateWavelength,
|
|
953
1115
|
activeColor,
|
|
@@ -992,14 +1154,14 @@ var LinearProgress = React9__namespace.forwardRef(
|
|
|
992
1154
|
}
|
|
993
1155
|
);
|
|
994
1156
|
LinearProgress.displayName = "LinearProgress";
|
|
995
|
-
var ProgressIndicator =
|
|
1157
|
+
var ProgressIndicator = React2__namespace.forwardRef((props, ref) => {
|
|
996
1158
|
if (props.variant === "circular") {
|
|
997
1159
|
return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, __spreadValues({ ref }, props));
|
|
998
1160
|
}
|
|
999
1161
|
return /* @__PURE__ */ jsxRuntime.jsx(LinearProgress, __spreadValues({ ref }, props));
|
|
1000
1162
|
});
|
|
1001
1163
|
ProgressIndicator.displayName = "ProgressIndicator";
|
|
1002
|
-
var RippleItem =
|
|
1164
|
+
var RippleItem = React2__namespace.memo(function RippleItem2({
|
|
1003
1165
|
ripple,
|
|
1004
1166
|
onDone
|
|
1005
1167
|
}) {
|
|
@@ -1043,8 +1205,8 @@ function Ripple({
|
|
|
1043
1205
|
}
|
|
1044
1206
|
function useRippleState(options = {}) {
|
|
1045
1207
|
const { disabled = false } = options;
|
|
1046
|
-
const [ripples, setRipples] =
|
|
1047
|
-
const onPointerDown =
|
|
1208
|
+
const [ripples, setRipples] = React2__namespace.useState([]);
|
|
1209
|
+
const onPointerDown = React2__namespace.useCallback(
|
|
1048
1210
|
(e) => {
|
|
1049
1211
|
if (disabled) return;
|
|
1050
1212
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
@@ -1061,7 +1223,7 @@ function useRippleState(options = {}) {
|
|
|
1061
1223
|
},
|
|
1062
1224
|
[disabled]
|
|
1063
1225
|
);
|
|
1064
|
-
const removeRipple =
|
|
1226
|
+
const removeRipple = React2__namespace.useCallback((id) => {
|
|
1065
1227
|
setRipples((prev) => prev.filter((r) => r.id !== id));
|
|
1066
1228
|
}, []);
|
|
1067
1229
|
return { ripples, onPointerDown, removeRipple };
|
|
@@ -1296,7 +1458,7 @@ function resolveDisabledBgClass(colorStyle) {
|
|
|
1296
1458
|
}
|
|
1297
1459
|
return "disabled:text-m3-on-surface/[0.38]";
|
|
1298
1460
|
}
|
|
1299
|
-
var IconButtonComponent =
|
|
1461
|
+
var IconButtonComponent = React2__namespace.forwardRef(
|
|
1300
1462
|
(_a, ref) => {
|
|
1301
1463
|
var _b = _a, {
|
|
1302
1464
|
className,
|
|
@@ -1338,18 +1500,18 @@ var IconButtonComponent = React9__namespace.forwardRef(
|
|
|
1338
1500
|
var _a2, _b2, _c, _d, _e;
|
|
1339
1501
|
const isToggle = variant === "toggle";
|
|
1340
1502
|
const isSelected = isToggle && !!selected;
|
|
1341
|
-
const resolvedColorClass =
|
|
1503
|
+
const resolvedColorClass = React2__namespace.useMemo(
|
|
1342
1504
|
() => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
|
|
1343
1505
|
[isSelected, colorStyle]
|
|
1344
1506
|
);
|
|
1345
|
-
const outlineWidthClass =
|
|
1507
|
+
const outlineWidthClass = React2__namespace.useMemo(
|
|
1346
1508
|
() => {
|
|
1347
1509
|
var _a3;
|
|
1348
1510
|
return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
|
|
1349
1511
|
},
|
|
1350
1512
|
[colorStyle, isSelected, size]
|
|
1351
1513
|
);
|
|
1352
|
-
const disabledBgClass =
|
|
1514
|
+
const disabledBgClass = React2__namespace.useMemo(
|
|
1353
1515
|
() => resolveDisabledBgClass(colorStyle),
|
|
1354
1516
|
[colorStyle]
|
|
1355
1517
|
);
|
|
@@ -1372,7 +1534,7 @@ var IconButtonComponent = React9__namespace.forwardRef(
|
|
|
1372
1534
|
const { ripples, onPointerDown, removeRipple } = useRippleState({
|
|
1373
1535
|
disabled: loading
|
|
1374
1536
|
});
|
|
1375
|
-
const handleClick =
|
|
1537
|
+
const handleClick = React2__namespace.useCallback(
|
|
1376
1538
|
(e) => {
|
|
1377
1539
|
if (loading) {
|
|
1378
1540
|
e.preventDefault();
|
|
@@ -1382,7 +1544,7 @@ var IconButtonComponent = React9__namespace.forwardRef(
|
|
|
1382
1544
|
},
|
|
1383
1545
|
[loading, onClick]
|
|
1384
1546
|
);
|
|
1385
|
-
const handleKeyDown =
|
|
1547
|
+
const handleKeyDown = React2__namespace.useCallback(
|
|
1386
1548
|
(e) => {
|
|
1387
1549
|
if (loading) return;
|
|
1388
1550
|
if ((e.key === "Enter" || e.key === " ") && onClick) {
|
|
@@ -1438,7 +1600,7 @@ var IconButtonComponent = React9__namespace.forwardRef(
|
|
|
1438
1600
|
width: isCustomSize ? `${iconSize}px` : void 0,
|
|
1439
1601
|
height: isCustomSize ? `${iconSize}px` : void 0
|
|
1440
1602
|
},
|
|
1441
|
-
children: isSelected && selectedIcon ? selectedIcon : asChild ?
|
|
1603
|
+
children: isSelected && selectedIcon ? selectedIcon : asChild ? React2__namespace.Children.only(children).props.children : children
|
|
1442
1604
|
}),
|
|
1443
1605
|
isSelected && selectedIcon ? "selected-content" : "content"
|
|
1444
1606
|
) })
|
|
@@ -1455,7 +1617,7 @@ var IconButtonComponent = React9__namespace.forwardRef(
|
|
|
1455
1617
|
className
|
|
1456
1618
|
);
|
|
1457
1619
|
if (asChild) {
|
|
1458
|
-
const child =
|
|
1620
|
+
const child = React2__namespace.Children.only(children);
|
|
1459
1621
|
return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1460
1622
|
reactSlot.Slot,
|
|
1461
1623
|
__spreadProps(__spreadValues({
|
|
@@ -1472,7 +1634,7 @@ var IconButtonComponent = React9__namespace.forwardRef(
|
|
|
1472
1634
|
}),
|
|
1473
1635
|
className: containerClassName
|
|
1474
1636
|
}, restProps), {
|
|
1475
|
-
children:
|
|
1637
|
+
children: React2__namespace.cloneElement(child, { children: innerContent })
|
|
1476
1638
|
})
|
|
1477
1639
|
) });
|
|
1478
1640
|
}
|
|
@@ -1500,13 +1662,13 @@ var IconButtonComponent = React9__namespace.forwardRef(
|
|
|
1500
1662
|
}
|
|
1501
1663
|
);
|
|
1502
1664
|
IconButtonComponent.displayName = "IconButton";
|
|
1503
|
-
var IconButton =
|
|
1665
|
+
var IconButton = React2__namespace.memo(IconButtonComponent);
|
|
1504
1666
|
var VARIANT_FONT = {
|
|
1505
1667
|
outlined: "'Material Symbols Outlined'",
|
|
1506
1668
|
rounded: "'Material Symbols Rounded'",
|
|
1507
1669
|
sharp: "'Material Symbols Sharp'"
|
|
1508
1670
|
};
|
|
1509
|
-
var IconComponent =
|
|
1671
|
+
var IconComponent = React2__namespace.forwardRef(
|
|
1510
1672
|
(_a, ref) => {
|
|
1511
1673
|
var _b = _a, {
|
|
1512
1674
|
name,
|
|
@@ -1572,8 +1734,8 @@ var IconComponent = React9__namespace.forwardRef(
|
|
|
1572
1734
|
}
|
|
1573
1735
|
);
|
|
1574
1736
|
IconComponent.displayName = "Icon";
|
|
1575
|
-
var Icon =
|
|
1576
|
-
var ScrollArea =
|
|
1737
|
+
var Icon = React2__namespace.memo(IconComponent);
|
|
1738
|
+
var ScrollArea = React2__namespace.forwardRef(
|
|
1577
1739
|
(_a, ref) => {
|
|
1578
1740
|
var _b = _a, {
|
|
1579
1741
|
className,
|
|
@@ -1594,15 +1756,15 @@ var ScrollArea = React9__namespace.forwardRef(
|
|
|
1594
1756
|
"viewportRef",
|
|
1595
1757
|
"viewportProps"
|
|
1596
1758
|
]);
|
|
1597
|
-
const [isTouchDevice, setIsTouchDevice] =
|
|
1598
|
-
|
|
1759
|
+
const [isTouchDevice, setIsTouchDevice] = React2__namespace.useState(false);
|
|
1760
|
+
React2__namespace.useEffect(() => {
|
|
1599
1761
|
if (typeof window !== "undefined") {
|
|
1600
1762
|
setIsTouchDevice(
|
|
1601
1763
|
"ontouchstart" in window || navigator.maxTouchPoints > 0
|
|
1602
1764
|
);
|
|
1603
1765
|
}
|
|
1604
1766
|
}, []);
|
|
1605
|
-
const resolvedType =
|
|
1767
|
+
const resolvedType = React2__namespace.useMemo(() => {
|
|
1606
1768
|
if (type === "hover" && isTouchDevice) {
|
|
1607
1769
|
return "scroll";
|
|
1608
1770
|
}
|
|
@@ -1653,7 +1815,7 @@ var ScrollArea = React9__namespace.forwardRef(
|
|
|
1653
1815
|
}
|
|
1654
1816
|
);
|
|
1655
1817
|
ScrollArea.displayName = "ScrollArea";
|
|
1656
|
-
var ScrollAreaScrollbar =
|
|
1818
|
+
var ScrollAreaScrollbar = React2__namespace.forwardRef((_a, ref) => {
|
|
1657
1819
|
var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
|
|
1658
1820
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1659
1821
|
RadixScrollArea__namespace.Scrollbar,
|
|
@@ -1683,7 +1845,7 @@ var ScrollAreaScrollbar = React9__namespace.forwardRef((_a, ref) => {
|
|
|
1683
1845
|
);
|
|
1684
1846
|
});
|
|
1685
1847
|
ScrollAreaScrollbar.displayName = RadixScrollArea__namespace.Scrollbar.displayName;
|
|
1686
|
-
var ScrollAreaCorner =
|
|
1848
|
+
var ScrollAreaCorner = React2__namespace.forwardRef((_a, ref) => {
|
|
1687
1849
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1688
1850
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1689
1851
|
RadixScrollArea__namespace.Corner,
|
|
@@ -1725,9 +1887,9 @@ DialogTrigger.displayName = "DialogTrigger";
|
|
|
1725
1887
|
var DialogPortal = ({
|
|
1726
1888
|
open,
|
|
1727
1889
|
children
|
|
1728
|
-
}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ?
|
|
1890
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ? React2__namespace.Children.toArray(children) : null }) });
|
|
1729
1891
|
DialogPortal.displayName = "DialogPortal";
|
|
1730
|
-
var DialogOverlay =
|
|
1892
|
+
var DialogOverlay = React2__namespace.forwardRef((_a, ref) => {
|
|
1731
1893
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1732
1894
|
return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1733
1895
|
react.m.div,
|
|
@@ -1738,7 +1900,7 @@ var DialogOverlay = React9__namespace.forwardRef((_a, ref) => {
|
|
|
1738
1900
|
) }));
|
|
1739
1901
|
});
|
|
1740
1902
|
DialogOverlay.displayName = "DialogOverlay";
|
|
1741
|
-
var DialogContent =
|
|
1903
|
+
var DialogContent = React2__namespace.forwardRef((_a, ref) => {
|
|
1742
1904
|
var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
|
|
1743
1905
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1744
1906
|
RadixDialog__namespace.Content,
|
|
@@ -1778,7 +1940,7 @@ var DialogContent = React9__namespace.forwardRef((_a, ref) => {
|
|
|
1778
1940
|
);
|
|
1779
1941
|
});
|
|
1780
1942
|
DialogContent.displayName = "DialogContent";
|
|
1781
|
-
var DialogIcon =
|
|
1943
|
+
var DialogIcon = React2__namespace.forwardRef((_a, ref) => {
|
|
1782
1944
|
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
1783
1945
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1784
1946
|
"div",
|
|
@@ -1801,7 +1963,7 @@ var DialogHeader = (_a) => {
|
|
|
1801
1963
|
return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mb-4", className) }, props));
|
|
1802
1964
|
};
|
|
1803
1965
|
DialogHeader.displayName = "DialogHeader";
|
|
1804
|
-
var DialogTitle =
|
|
1966
|
+
var DialogTitle = React2__namespace.forwardRef((_a, ref) => {
|
|
1805
1967
|
var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
|
|
1806
1968
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1807
1969
|
RadixDialog__namespace.Title,
|
|
@@ -1816,7 +1978,7 @@ var DialogTitle = React9__namespace.forwardRef((_a, ref) => {
|
|
|
1816
1978
|
);
|
|
1817
1979
|
});
|
|
1818
1980
|
DialogTitle.displayName = "DialogTitle";
|
|
1819
|
-
var DialogDescription =
|
|
1981
|
+
var DialogDescription = React2__namespace.forwardRef((_a, ref) => {
|
|
1820
1982
|
var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
|
|
1821
1983
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1822
1984
|
RadixDialog__namespace.Description,
|
|
@@ -1828,7 +1990,7 @@ var DialogDescription = React9__namespace.forwardRef((_a, ref) => {
|
|
|
1828
1990
|
);
|
|
1829
1991
|
});
|
|
1830
1992
|
DialogDescription.displayName = "DialogDescription";
|
|
1831
|
-
var DialogBody =
|
|
1993
|
+
var DialogBody = React2__namespace.forwardRef((_a, ref) => {
|
|
1832
1994
|
var _b = _a, { className, children, dir } = _b, props = __objRest(_b, ["className", "children", "dir"]);
|
|
1833
1995
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1834
1996
|
ScrollArea,
|
|
@@ -1859,7 +2021,7 @@ var DialogFooter = (_a) => {
|
|
|
1859
2021
|
};
|
|
1860
2022
|
DialogFooter.displayName = "DialogFooter";
|
|
1861
2023
|
var DialogClose = RadixDialog__namespace.Close;
|
|
1862
|
-
var DialogFullScreenContent =
|
|
2024
|
+
var DialogFullScreenContent = React2__namespace.forwardRef(
|
|
1863
2025
|
(_a, ref) => {
|
|
1864
2026
|
var _b = _a, {
|
|
1865
2027
|
className,
|
|
@@ -1956,7 +2118,7 @@ var DrawerPortal = ({
|
|
|
1956
2118
|
open,
|
|
1957
2119
|
children
|
|
1958
2120
|
}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { mode: "wait", children: open && children }) });
|
|
1959
|
-
var DrawerOverlay =
|
|
2121
|
+
var DrawerOverlay = React2__namespace.forwardRef((_a, ref) => {
|
|
1960
2122
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
1961
2123
|
return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1962
2124
|
react.m.div,
|
|
@@ -1967,7 +2129,7 @@ var DrawerOverlay = React9__namespace.forwardRef((_a, ref) => {
|
|
|
1967
2129
|
) }));
|
|
1968
2130
|
});
|
|
1969
2131
|
DrawerOverlay.displayName = "DrawerOverlay";
|
|
1970
|
-
var DrawerContent =
|
|
2132
|
+
var DrawerContent = React2__namespace.forwardRef(
|
|
1971
2133
|
(_a, ref) => {
|
|
1972
2134
|
var _b = _a, {
|
|
1973
2135
|
className,
|
|
@@ -2046,7 +2208,7 @@ var DrawerFooter = (_a) => {
|
|
|
2046
2208
|
return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ className: cn("flex flex-col gap-2 mt-4", className) }, props));
|
|
2047
2209
|
};
|
|
2048
2210
|
DrawerFooter.displayName = "DrawerFooter";
|
|
2049
|
-
var DrawerTitle =
|
|
2211
|
+
var DrawerTitle = React2__namespace.forwardRef((_a, ref) => {
|
|
2050
2212
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
2051
2213
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2052
2214
|
RadixDialog__namespace.Title,
|
|
@@ -2060,7 +2222,7 @@ var DrawerTitle = React9__namespace.forwardRef((_a, ref) => {
|
|
|
2060
2222
|
);
|
|
2061
2223
|
});
|
|
2062
2224
|
DrawerTitle.displayName = "DrawerTitle";
|
|
2063
|
-
var DrawerDescription =
|
|
2225
|
+
var DrawerDescription = React2__namespace.forwardRef((_a, ref) => {
|
|
2064
2226
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
2065
2227
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2066
2228
|
RadixDialog__namespace.Description,
|
|
@@ -2072,7 +2234,7 @@ var DrawerDescription = React9__namespace.forwardRef((_a, ref) => {
|
|
|
2072
2234
|
});
|
|
2073
2235
|
DrawerDescription.displayName = "DrawerDescription";
|
|
2074
2236
|
var INDICATOR = "h-1 w-8 rounded-full bg-m3-on-surface-variant/40";
|
|
2075
|
-
var DragHandle =
|
|
2237
|
+
var DragHandle = React2__namespace.forwardRef(
|
|
2076
2238
|
({ className, onCycle, "aria-label": ariaLabel }, ref) => {
|
|
2077
2239
|
const isInteractive = Boolean(onCycle);
|
|
2078
2240
|
if (isInteractive) {
|
|
@@ -2133,7 +2295,7 @@ function buildSideSheetAnim(edge) {
|
|
|
2133
2295
|
};
|
|
2134
2296
|
}
|
|
2135
2297
|
var DEFAULT_SHEET_BG = "bg-m3-surface-container-low";
|
|
2136
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
2298
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React2.useLayoutEffect : React2.useEffect;
|
|
2137
2299
|
var DISMISS_THRESHOLD = 0.4;
|
|
2138
2300
|
var DISMISS_VELOCITY_THRESHOLD = 600;
|
|
2139
2301
|
var DEFAULT_SAFE_AREA_OFFSET = 56;
|
|
@@ -2182,9 +2344,9 @@ function useBottomSheet({
|
|
|
2182
2344
|
isModal = false,
|
|
2183
2345
|
maxHeight
|
|
2184
2346
|
}) {
|
|
2185
|
-
const [scopeNode, setScopeNode] =
|
|
2186
|
-
const scopeNodeRef =
|
|
2187
|
-
const scope =
|
|
2347
|
+
const [scopeNode, setScopeNode] = React2.useState(null);
|
|
2348
|
+
const scopeNodeRef = React2.useRef(null);
|
|
2349
|
+
const scope = React2.useCallback((node) => {
|
|
2188
2350
|
scopeNodeRef.current = node;
|
|
2189
2351
|
setScopeNode(node);
|
|
2190
2352
|
}, []);
|
|
@@ -2198,13 +2360,13 @@ function useBottomSheet({
|
|
|
2198
2360
|
const y = react.useMotionValue(
|
|
2199
2361
|
typeof window !== "undefined" ? window.visualViewport ? window.visualViewport.height : window.innerHeight : 800
|
|
2200
2362
|
);
|
|
2201
|
-
const [dimensions, setDimensions] =
|
|
2363
|
+
const [dimensions, setDimensions] = React2.useState({
|
|
2202
2364
|
viewportHeight: typeof window !== "undefined" ? window.visualViewport ? window.visualViewport.height : window.innerHeight : 800,
|
|
2203
2365
|
naturalHeight: 0,
|
|
2204
2366
|
safeAreaOffset: DEFAULT_SAFE_AREA_OFFSET
|
|
2205
2367
|
});
|
|
2206
|
-
const hasMeasuredAfterOpen =
|
|
2207
|
-
const measureDimensions =
|
|
2368
|
+
const hasMeasuredAfterOpen = React2.useRef(false);
|
|
2369
|
+
const measureDimensions = React2.useCallback(() => {
|
|
2208
2370
|
const node = scopeNodeRef.current;
|
|
2209
2371
|
if (!node) return;
|
|
2210
2372
|
const viewportHeight2 = window.visualViewport ? window.visualViewport.height : window.innerHeight;
|
|
@@ -2264,7 +2426,7 @@ function useBottomSheet({
|
|
|
2264
2426
|
return () => vv.removeEventListener("resize", handleResize);
|
|
2265
2427
|
}, [isOpen, measureDimensions]);
|
|
2266
2428
|
const { viewportHeight, naturalHeight, safeAreaOffset } = dimensions;
|
|
2267
|
-
const parsedMaxHeight =
|
|
2429
|
+
const parsedMaxHeight = React2.useMemo(() => {
|
|
2268
2430
|
if (!maxHeight) return viewportHeight - safeAreaOffset;
|
|
2269
2431
|
if (maxHeight.endsWith("px")) return parseFloat(maxHeight);
|
|
2270
2432
|
if (maxHeight.endsWith("dvh") || maxHeight.endsWith("vh")) {
|
|
@@ -2275,13 +2437,13 @@ function useBottomSheet({
|
|
|
2275
2437
|
}
|
|
2276
2438
|
return parseFloat(maxHeight) || viewportHeight - safeAreaOffset;
|
|
2277
2439
|
}, [maxHeight, viewportHeight, safeAreaOffset]);
|
|
2278
|
-
const snaps =
|
|
2440
|
+
const snaps = React2.useMemo(() => {
|
|
2279
2441
|
if (snapPoints) return snapPoints;
|
|
2280
2442
|
if (isModal) return ["partiallyExpanded", "full"];
|
|
2281
2443
|
return ["fit"];
|
|
2282
2444
|
}, [snapPoints, isModal]);
|
|
2283
2445
|
const allowsViewportSnapExpansion = snapPoints !== void 0 || snaps.length > 1;
|
|
2284
|
-
const snapHeights =
|
|
2446
|
+
const snapHeights = React2.useMemo(
|
|
2285
2447
|
() => snaps.map(
|
|
2286
2448
|
(snap) => parseSnapPoint(
|
|
2287
2449
|
snap,
|
|
@@ -2301,15 +2463,15 @@ function useBottomSheet({
|
|
|
2301
2463
|
allowsViewportSnapExpansion
|
|
2302
2464
|
]
|
|
2303
2465
|
);
|
|
2304
|
-
const maxSheetHeight =
|
|
2466
|
+
const maxSheetHeight = React2.useMemo(
|
|
2305
2467
|
() => viewportHeight - safeAreaOffset,
|
|
2306
2468
|
[viewportHeight, safeAreaOffset]
|
|
2307
2469
|
);
|
|
2308
|
-
const snapYValues =
|
|
2470
|
+
const snapYValues = React2.useMemo(
|
|
2309
2471
|
() => snapHeights.map((h) => Math.max(0, maxSheetHeight - h)),
|
|
2310
2472
|
[snapHeights, maxSheetHeight]
|
|
2311
2473
|
);
|
|
2312
|
-
const sortedSnaps =
|
|
2474
|
+
const sortedSnaps = React2.useMemo(() => {
|
|
2313
2475
|
const combined = snaps.map((point, idx) => ({
|
|
2314
2476
|
point,
|
|
2315
2477
|
height: snapHeights[idx],
|
|
@@ -2317,31 +2479,31 @@ function useBottomSheet({
|
|
|
2317
2479
|
}));
|
|
2318
2480
|
return combined.sort((a, b) => b.y - a.y);
|
|
2319
2481
|
}, [snaps, snapHeights, snapYValues]);
|
|
2320
|
-
const [activeSnapIndex, setActiveSnapIndex] =
|
|
2321
|
-
const activeSnapPoint =
|
|
2482
|
+
const [activeSnapIndex, setActiveSnapIndex] = React2.useState(0);
|
|
2483
|
+
const activeSnapPoint = React2.useMemo(
|
|
2322
2484
|
() => {
|
|
2323
2485
|
var _a, _b;
|
|
2324
2486
|
return (_b = (_a = sortedSnaps[activeSnapIndex]) == null ? void 0 : _a.point) != null ? _b : "fit";
|
|
2325
2487
|
},
|
|
2326
2488
|
[sortedSnaps, activeSnapIndex]
|
|
2327
2489
|
);
|
|
2328
|
-
const isContentScrollable =
|
|
2490
|
+
const isContentScrollable = React2.useMemo(
|
|
2329
2491
|
() => sortedSnaps.length <= 1 || activeSnapIndex === sortedSnaps.length - 1,
|
|
2330
2492
|
[sortedSnaps, activeSnapIndex]
|
|
2331
2493
|
);
|
|
2332
|
-
const lowestSnapY =
|
|
2494
|
+
const lowestSnapY = React2.useMemo(() => {
|
|
2333
2495
|
var _a, _b;
|
|
2334
2496
|
return (_b = (_a = sortedSnaps[0]) == null ? void 0 : _a.y) != null ? _b : 300;
|
|
2335
2497
|
}, [sortedSnaps]);
|
|
2336
2498
|
const scrimOpacity = react.useTransform(y, [lowestSnapY, maxSheetHeight], [1, 0]);
|
|
2337
|
-
const defaultSnap =
|
|
2499
|
+
const defaultSnap = React2.useMemo(
|
|
2338
2500
|
() => {
|
|
2339
2501
|
var _a;
|
|
2340
2502
|
return (_a = defaultSnapPoint != null ? defaultSnapPoint : snaps[0]) != null ? _a : "fit";
|
|
2341
2503
|
},
|
|
2342
2504
|
[defaultSnapPoint, snaps]
|
|
2343
2505
|
);
|
|
2344
|
-
const prevIsOpen =
|
|
2506
|
+
const prevIsOpen = React2.useRef(isOpen);
|
|
2345
2507
|
useIsomorphicLayoutEffect(() => {
|
|
2346
2508
|
if (isOpen && !prevIsOpen.current) {
|
|
2347
2509
|
y.set(viewportHeight);
|
|
@@ -2358,7 +2520,7 @@ function useBottomSheet({
|
|
|
2358
2520
|
}
|
|
2359
2521
|
prevIsOpen.current = isOpen;
|
|
2360
2522
|
}, [isOpen, y, viewportHeight, sortedSnaps, defaultSnap]);
|
|
2361
|
-
|
|
2523
|
+
React2.useEffect(() => {
|
|
2362
2524
|
var _a;
|
|
2363
2525
|
if (!isOpen || sortedSnaps.length === 0 || naturalHeight === 0) return;
|
|
2364
2526
|
if (!hasMeasuredAfterOpen.current) return;
|
|
@@ -2366,7 +2528,7 @@ function useBottomSheet({
|
|
|
2366
2528
|
if (targetY === void 0) return;
|
|
2367
2529
|
void react.animate(y, targetY, { type: "spring", stiffness: 300, damping: 30 });
|
|
2368
2530
|
}, [isOpen, sortedSnaps, activeSnapIndex, y, naturalHeight]);
|
|
2369
|
-
const snapTo =
|
|
2531
|
+
const snapTo = React2.useCallback(
|
|
2370
2532
|
(snapPoint) => {
|
|
2371
2533
|
const idx = sortedSnaps.findIndex((s) => s.point === snapPoint);
|
|
2372
2534
|
if (idx === -1) return;
|
|
@@ -2380,7 +2542,7 @@ function useBottomSheet({
|
|
|
2380
2542
|
},
|
|
2381
2543
|
[sortedSnaps, y, onSnapChange]
|
|
2382
2544
|
);
|
|
2383
|
-
const cycleSnapPoint =
|
|
2545
|
+
const cycleSnapPoint = React2.useCallback(() => {
|
|
2384
2546
|
const nextIdx = activeSnapIndex + 1;
|
|
2385
2547
|
if (nextIdx >= sortedSnaps.length) {
|
|
2386
2548
|
onClose();
|
|
@@ -2394,7 +2556,7 @@ function useBottomSheet({
|
|
|
2394
2556
|
onSnapChange == null ? void 0 : onSnapChange(sortedSnaps[nextIdx].point);
|
|
2395
2557
|
}
|
|
2396
2558
|
}, [activeSnapIndex, sortedSnaps, y, onClose, onSnapChange]);
|
|
2397
|
-
const dragConstraints =
|
|
2559
|
+
const dragConstraints = React2.useMemo(
|
|
2398
2560
|
() => {
|
|
2399
2561
|
var _a, _b;
|
|
2400
2562
|
return {
|
|
@@ -2404,7 +2566,7 @@ function useBottomSheet({
|
|
|
2404
2566
|
},
|
|
2405
2567
|
[sortedSnaps, viewportHeight]
|
|
2406
2568
|
);
|
|
2407
|
-
|
|
2569
|
+
React2.useEffect(() => {
|
|
2408
2570
|
if (!isOpen || !gesturesEnabled || !scopeNode) return;
|
|
2409
2571
|
const node = scopeNode;
|
|
2410
2572
|
const viewport = node.querySelector(
|
|
@@ -2625,7 +2787,7 @@ function resolveMaxHeight(maxHeight, snapPoints) {
|
|
|
2625
2787
|
return ABSOLUTE_MAX_HEIGHT;
|
|
2626
2788
|
return maxHeight;
|
|
2627
2789
|
}
|
|
2628
|
-
var BottomSheet =
|
|
2790
|
+
var BottomSheet = React2__namespace.forwardRef(
|
|
2629
2791
|
({
|
|
2630
2792
|
isOpen,
|
|
2631
2793
|
onClose,
|
|
@@ -2658,27 +2820,27 @@ var BottomSheet = React9__namespace.forwardRef(
|
|
|
2658
2820
|
isModal: false,
|
|
2659
2821
|
maxHeight: resolveMaxHeight(maxHeight, snapPoints)
|
|
2660
2822
|
});
|
|
2661
|
-
|
|
2823
|
+
React2__namespace.useEffect(() => {
|
|
2662
2824
|
const node = scope.current;
|
|
2663
2825
|
if (node) {
|
|
2664
2826
|
node.snapTo = snapTo;
|
|
2665
2827
|
}
|
|
2666
2828
|
}, [snapTo, scope]);
|
|
2667
|
-
const [mounted, setMounted] =
|
|
2668
|
-
|
|
2829
|
+
const [mounted, setMounted] = React2__namespace.useState(false);
|
|
2830
|
+
React2__namespace.useEffect(() => {
|
|
2669
2831
|
setMounted(true);
|
|
2670
2832
|
}, []);
|
|
2671
|
-
const resolvedDividers =
|
|
2833
|
+
const resolvedDividers = React2__namespace.useMemo(
|
|
2672
2834
|
() => resolveDividers(divider),
|
|
2673
2835
|
[divider]
|
|
2674
2836
|
);
|
|
2675
|
-
const resolvedSheetMaxWidth =
|
|
2837
|
+
const resolvedSheetMaxWidth = React2__namespace.useMemo(() => {
|
|
2676
2838
|
if (sheetMaxWidth === void 0)
|
|
2677
2839
|
return "var(--m3-bottom-sheet-max-width, 640px)";
|
|
2678
2840
|
if (typeof sheetMaxWidth === "number") return `${sheetMaxWidth}px`;
|
|
2679
2841
|
return sheetMaxWidth;
|
|
2680
2842
|
}, [sheetMaxWidth]);
|
|
2681
|
-
const mergedRef =
|
|
2843
|
+
const mergedRef = React2__namespace.useCallback(
|
|
2682
2844
|
(node) => {
|
|
2683
2845
|
scope(node);
|
|
2684
2846
|
if (typeof ref === "function") ref(node);
|
|
@@ -2762,7 +2924,7 @@ var SCRIM_ANIM = {
|
|
|
2762
2924
|
},
|
|
2763
2925
|
exit: { opacity: 0, transition: { duration: 0.18, ease: "easeIn" } }
|
|
2764
2926
|
};
|
|
2765
|
-
var Scrim =
|
|
2927
|
+
var Scrim = React2__namespace.forwardRef(
|
|
2766
2928
|
({ onClick, className, style }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2767
2929
|
react.m.div,
|
|
2768
2930
|
__spreadValues({
|
|
@@ -2794,7 +2956,7 @@ function resolveSheetMaxWidth(value) {
|
|
|
2794
2956
|
if (typeof value === "number") return `${value}px`;
|
|
2795
2957
|
return value;
|
|
2796
2958
|
}
|
|
2797
|
-
var BottomSheetModal =
|
|
2959
|
+
var BottomSheetModal = React2__namespace.forwardRef(
|
|
2798
2960
|
({
|
|
2799
2961
|
isOpen,
|
|
2800
2962
|
onClose,
|
|
@@ -2833,21 +2995,21 @@ var BottomSheetModal = React9__namespace.forwardRef(
|
|
|
2833
2995
|
isModal: true,
|
|
2834
2996
|
maxHeight: resolveMaxHeight2(maxHeight, snapPoints)
|
|
2835
2997
|
});
|
|
2836
|
-
|
|
2998
|
+
React2__namespace.useEffect(() => {
|
|
2837
2999
|
const node = scope.current;
|
|
2838
3000
|
if (node) {
|
|
2839
3001
|
node.snapTo = snapTo;
|
|
2840
3002
|
}
|
|
2841
3003
|
}, [snapTo, scope]);
|
|
2842
|
-
const resolvedDividers =
|
|
3004
|
+
const resolvedDividers = React2__namespace.useMemo(
|
|
2843
3005
|
() => resolveDividers(divider),
|
|
2844
3006
|
[divider]
|
|
2845
3007
|
);
|
|
2846
|
-
const resolvedSheetMaxWidth =
|
|
3008
|
+
const resolvedSheetMaxWidth = React2__namespace.useMemo(
|
|
2847
3009
|
() => resolveSheetMaxWidth(sheetMaxWidth),
|
|
2848
3010
|
[sheetMaxWidth]
|
|
2849
3011
|
);
|
|
2850
|
-
const mergedRef =
|
|
3012
|
+
const mergedRef = React2__namespace.useCallback(
|
|
2851
3013
|
(node) => {
|
|
2852
3014
|
scope(node);
|
|
2853
3015
|
if (typeof ref === "function") ref(node);
|
|
@@ -2946,17 +3108,17 @@ function useBottomSheetScaffold({
|
|
|
2946
3108
|
onStateChange,
|
|
2947
3109
|
initialState = "partiallyExpanded"
|
|
2948
3110
|
} = {}) {
|
|
2949
|
-
const [containerHeight, setContainerHeight] =
|
|
3111
|
+
const [containerHeight, setContainerHeight] = React2.useState(
|
|
2950
3112
|
typeof window !== "undefined" ? window.innerHeight : 800
|
|
2951
3113
|
);
|
|
2952
|
-
const containerNodeRef =
|
|
2953
|
-
const containerRef =
|
|
3114
|
+
const containerNodeRef = React2.useRef(null);
|
|
3115
|
+
const containerRef = React2.useCallback((node) => {
|
|
2954
3116
|
containerNodeRef.current = node;
|
|
2955
3117
|
if (node) {
|
|
2956
3118
|
setContainerHeight(node.offsetHeight || window.innerHeight);
|
|
2957
3119
|
}
|
|
2958
3120
|
}, []);
|
|
2959
|
-
|
|
3121
|
+
React2.useEffect(() => {
|
|
2960
3122
|
const node = containerNodeRef.current;
|
|
2961
3123
|
if (!node) return;
|
|
2962
3124
|
const observer = new ResizeObserver(() => {
|
|
@@ -2968,34 +3130,34 @@ function useBottomSheetScaffold({
|
|
|
2968
3130
|
const expandedY = 0;
|
|
2969
3131
|
const partialY = containerHeight - peekHeight;
|
|
2970
3132
|
const y = react.useMotionValue(initialState === "expanded" ? expandedY : partialY);
|
|
2971
|
-
const [sheetState, setSheetState] =
|
|
3133
|
+
const [sheetState, setSheetState] = React2.useState(
|
|
2972
3134
|
initialState
|
|
2973
3135
|
);
|
|
2974
|
-
const [isScrollDisablingDrag, setIsScrollDisablingDrag] =
|
|
3136
|
+
const [isScrollDisablingDrag, setIsScrollDisablingDrag] = React2.useState(false);
|
|
2975
3137
|
const isDragEnabled = swipeEnabled && !isScrollDisablingDrag;
|
|
2976
|
-
const dragConstraints =
|
|
3138
|
+
const dragConstraints = React2.useMemo(
|
|
2977
3139
|
() => ({ top: 0, bottom: partialY }),
|
|
2978
3140
|
[partialY]
|
|
2979
3141
|
);
|
|
2980
|
-
|
|
3142
|
+
React2.useEffect(() => {
|
|
2981
3143
|
const targetY = sheetState === "expanded" ? 0 : partialY;
|
|
2982
3144
|
void react.animate(y, targetY, SPRING);
|
|
2983
3145
|
}, [partialY, sheetState, y]);
|
|
2984
|
-
const expand =
|
|
3146
|
+
const expand = React2.useCallback(() => {
|
|
2985
3147
|
setSheetState("expanded");
|
|
2986
3148
|
void react.animate(y, 0, SPRING);
|
|
2987
3149
|
onStateChange == null ? void 0 : onStateChange("expanded");
|
|
2988
3150
|
}, [y, onStateChange]);
|
|
2989
|
-
const partialExpand =
|
|
3151
|
+
const partialExpand = React2.useCallback(() => {
|
|
2990
3152
|
setSheetState("partiallyExpanded");
|
|
2991
3153
|
void react.animate(y, partialY, SPRING);
|
|
2992
3154
|
onStateChange == null ? void 0 : onStateChange("partiallyExpanded");
|
|
2993
3155
|
}, [y, partialY, onStateChange]);
|
|
2994
|
-
const toggle =
|
|
3156
|
+
const toggle = React2.useCallback(() => {
|
|
2995
3157
|
if (sheetState === "expanded") partialExpand();
|
|
2996
3158
|
else expand();
|
|
2997
3159
|
}, [sheetState, expand, partialExpand]);
|
|
2998
|
-
const handleDragEnd =
|
|
3160
|
+
const handleDragEnd = React2.useCallback(
|
|
2999
3161
|
(_event, info) => {
|
|
3000
3162
|
const rawY = y.get();
|
|
3001
3163
|
let velocity = info.velocity.y;
|
|
@@ -3020,7 +3182,7 @@ function useBottomSheetScaffold({
|
|
|
3020
3182
|
},
|
|
3021
3183
|
[y, partialY, expand, partialExpand]
|
|
3022
3184
|
);
|
|
3023
|
-
const handleContentScroll =
|
|
3185
|
+
const handleContentScroll = React2.useCallback(
|
|
3024
3186
|
(e) => {
|
|
3025
3187
|
if (sheetState !== "expanded") {
|
|
3026
3188
|
e.currentTarget.scrollTop = 0;
|
|
@@ -3046,7 +3208,7 @@ function useBottomSheetScaffold({
|
|
|
3046
3208
|
containerRef
|
|
3047
3209
|
};
|
|
3048
3210
|
}
|
|
3049
|
-
var BottomSheetScaffold =
|
|
3211
|
+
var BottomSheetScaffold = React2__namespace.forwardRef(
|
|
3050
3212
|
({
|
|
3051
3213
|
sheetContent,
|
|
3052
3214
|
children,
|
|
@@ -3075,13 +3237,13 @@ var BottomSheetScaffold = React9__namespace.forwardRef(
|
|
|
3075
3237
|
onStateChange: onSheetStateChange,
|
|
3076
3238
|
initialState: initialSheetState
|
|
3077
3239
|
});
|
|
3078
|
-
const resolvedSheetMaxWidth =
|
|
3240
|
+
const resolvedSheetMaxWidth = React2__namespace.useMemo(() => {
|
|
3079
3241
|
if (sheetMaxWidth === void 0)
|
|
3080
3242
|
return "var(--m3-bottom-sheet-max-width, 640px)";
|
|
3081
3243
|
if (typeof sheetMaxWidth === "number") return `${sheetMaxWidth}px`;
|
|
3082
3244
|
return sheetMaxWidth;
|
|
3083
3245
|
}, [sheetMaxWidth]);
|
|
3084
|
-
const mergedRef =
|
|
3246
|
+
const mergedRef = React2__namespace.useCallback(
|
|
3085
3247
|
(node) => {
|
|
3086
3248
|
containerRef(node);
|
|
3087
3249
|
if (typeof ref === "function") ref(node);
|
|
@@ -3089,7 +3251,7 @@ var BottomSheetScaffold = React9__namespace.forwardRef(
|
|
|
3089
3251
|
},
|
|
3090
3252
|
[containerRef, ref]
|
|
3091
3253
|
);
|
|
3092
|
-
const resolvedDragHandle =
|
|
3254
|
+
const resolvedDragHandle = React2__namespace.useMemo(() => {
|
|
3093
3255
|
if (sheetDragHandle === null) return null;
|
|
3094
3256
|
if (sheetDragHandle !== void 0) return sheetDragHandle;
|
|
3095
3257
|
return /* @__PURE__ */ jsxRuntime.jsx(DragHandle, { onCycle: toggle });
|
|
@@ -3152,7 +3314,7 @@ var BottomSheetScaffold = React9__namespace.forwardRef(
|
|
|
3152
3314
|
);
|
|
3153
3315
|
BottomSheetScaffold.displayName = "BottomSheetScaffold";
|
|
3154
3316
|
var COPLANAR_TRANSITION = `margin ${getMotionTransitionCSS("default", "spatial")}`;
|
|
3155
|
-
var SideSheet =
|
|
3317
|
+
var SideSheet = React2__namespace.forwardRef(
|
|
3156
3318
|
({
|
|
3157
3319
|
isOpen,
|
|
3158
3320
|
children,
|
|
@@ -3168,16 +3330,16 @@ var SideSheet = React9__namespace.forwardRef(
|
|
|
3168
3330
|
divider,
|
|
3169
3331
|
scrollAreaProps
|
|
3170
3332
|
}, ref) => {
|
|
3171
|
-
const sheetAnim =
|
|
3172
|
-
const [mounted, setMounted] =
|
|
3173
|
-
|
|
3333
|
+
const sheetAnim = React2__namespace.useMemo(() => buildSideSheetAnim(edge), [edge]);
|
|
3334
|
+
const [mounted, setMounted] = React2__namespace.useState(false);
|
|
3335
|
+
React2__namespace.useEffect(() => {
|
|
3174
3336
|
setMounted(true);
|
|
3175
3337
|
}, []);
|
|
3176
|
-
const resolvedDividers =
|
|
3338
|
+
const resolvedDividers = React2__namespace.useMemo(
|
|
3177
3339
|
() => resolveDividers(divider),
|
|
3178
3340
|
[divider]
|
|
3179
3341
|
);
|
|
3180
|
-
|
|
3342
|
+
React2__namespace.useEffect(() => {
|
|
3181
3343
|
const sibling = coplanarSiblingRef == null ? void 0 : coplanarSiblingRef.current;
|
|
3182
3344
|
if (!sibling) return;
|
|
3183
3345
|
sibling.style.transition = COPLANAR_TRANSITION;
|
|
@@ -3241,7 +3403,7 @@ var SideSheet = React9__namespace.forwardRef(
|
|
|
3241
3403
|
}
|
|
3242
3404
|
);
|
|
3243
3405
|
SideSheet.displayName = "SideSheet";
|
|
3244
|
-
var SideSheetModal =
|
|
3406
|
+
var SideSheetModal = React2__namespace.forwardRef(
|
|
3245
3407
|
({
|
|
3246
3408
|
isOpen,
|
|
3247
3409
|
onClose,
|
|
@@ -3256,8 +3418,8 @@ var SideSheetModal = React9__namespace.forwardRef(
|
|
|
3256
3418
|
divider,
|
|
3257
3419
|
scrollAreaProps
|
|
3258
3420
|
}, ref) => {
|
|
3259
|
-
const sheetAnim =
|
|
3260
|
-
const resolvedDividers =
|
|
3421
|
+
const sheetAnim = React2__namespace.useMemo(() => buildSideSheetAnim(edge), [edge]);
|
|
3422
|
+
const resolvedDividers = React2__namespace.useMemo(
|
|
3261
3423
|
() => resolveDividers(divider),
|
|
3262
3424
|
[divider]
|
|
3263
3425
|
);
|