@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/feedback.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
var react = require('motion/react');
|
|
5
|
-
var
|
|
5
|
+
var React3 = require('react');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var tailwindMerge = require('tailwind-merge');
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -27,7 +27,7 @@ function _interopNamespace(e) {
|
|
|
27
27
|
return Object.freeze(n);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
var
|
|
30
|
+
var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
|
|
31
31
|
|
|
32
32
|
var __defProp = Object.defineProperty;
|
|
33
33
|
var __defProps = Object.defineProperties;
|
|
@@ -99,9 +99,9 @@ function formatBadgeLabel(children, max) {
|
|
|
99
99
|
return "";
|
|
100
100
|
}
|
|
101
101
|
function detectBadgeHasContent(badge) {
|
|
102
|
-
return
|
|
102
|
+
return React3__namespace.isValidElement(badge) && badge.props.children != null;
|
|
103
103
|
}
|
|
104
|
-
var BadgeImpl =
|
|
104
|
+
var BadgeImpl = React3__namespace.forwardRef(
|
|
105
105
|
(_a, ref) => {
|
|
106
106
|
var _b = _a, {
|
|
107
107
|
children,
|
|
@@ -155,7 +155,7 @@ var BadgeImpl = React12__namespace.forwardRef(
|
|
|
155
155
|
}
|
|
156
156
|
);
|
|
157
157
|
BadgeImpl.displayName = "Badge";
|
|
158
|
-
var Badge =
|
|
158
|
+
var Badge = React3__namespace.memo(BadgeImpl);
|
|
159
159
|
function BadgedBox({
|
|
160
160
|
badge,
|
|
161
161
|
children,
|
|
@@ -221,11 +221,11 @@ var ROTATE_KEY_SPLINES = [
|
|
|
221
221
|
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";
|
|
222
222
|
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";
|
|
223
223
|
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";
|
|
224
|
-
var IndeterminateSvg =
|
|
224
|
+
var IndeterminateSvg = React3__namespace.memo(function IndeterminateSvg2({
|
|
225
225
|
size
|
|
226
226
|
}) {
|
|
227
|
-
const [ready, setReady] =
|
|
228
|
-
|
|
227
|
+
const [ready, setReady] = React3__namespace.useState(false);
|
|
228
|
+
React3__namespace.useEffect(() => {
|
|
229
229
|
const raf = requestAnimationFrame(() => setReady(true));
|
|
230
230
|
return () => cancelAnimationFrame(raf);
|
|
231
231
|
}, []);
|
|
@@ -270,7 +270,7 @@ var IndeterminateSvg = React12__namespace.memo(function IndeterminateSvg2({
|
|
|
270
270
|
}
|
|
271
271
|
);
|
|
272
272
|
});
|
|
273
|
-
var DeterminateSvg =
|
|
273
|
+
var DeterminateSvg = React3__namespace.memo(function DeterminateSvg2({
|
|
274
274
|
size,
|
|
275
275
|
progress
|
|
276
276
|
}) {
|
|
@@ -295,7 +295,7 @@ var DeterminateSvg = React12__namespace.memo(function DeterminateSvg2({
|
|
|
295
295
|
}
|
|
296
296
|
);
|
|
297
297
|
});
|
|
298
|
-
var LoadingIndicator =
|
|
298
|
+
var LoadingIndicator = React3__namespace.forwardRef(
|
|
299
299
|
(_a, ref) => {
|
|
300
300
|
var _b = _a, {
|
|
301
301
|
variant = "uncontained",
|
|
@@ -390,27 +390,47 @@ function generateWavyCircularPath(center, radius, amplitude, wavelength) {
|
|
|
390
390
|
if (i === 0) d += `M ${xAt(t0).toFixed(2)} ${yAt(t0).toFixed(2)}`;
|
|
391
391
|
d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${xAt(t1).toFixed(2)} ${yAt(t1).toFixed(2)}`;
|
|
392
392
|
}
|
|
393
|
-
d
|
|
394
|
-
return d;
|
|
393
|
+
return `${d} Z`;
|
|
395
394
|
}
|
|
396
395
|
function getSinePath(startX, endX, phase, wl, amp) {
|
|
397
396
|
if (startX >= endX) return "";
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
397
|
+
if (amp <= 0.01) {
|
|
398
|
+
return `M ${startX.toFixed(2)} 0 L ${endX.toFixed(2)} 0`;
|
|
399
|
+
}
|
|
400
|
+
const safeWl = Math.max(1, wl);
|
|
401
|
+
const k = 2 * Math.PI / safeWl;
|
|
402
|
+
const phi = phase / safeWl * 2 * Math.PI;
|
|
403
|
+
const yAt = (x) => amp * Math.sin(k * x + phi);
|
|
404
|
+
const dyAt = (x) => amp * k * Math.cos(k * x + phi);
|
|
405
|
+
const step = safeWl / 4;
|
|
406
|
+
let d = `M ${startX.toFixed(2)} ${yAt(startX).toFixed(2)}`;
|
|
407
|
+
let currentX = startX;
|
|
408
|
+
while (currentX < endX) {
|
|
409
|
+
const nextX = Math.min(endX, currentX + step);
|
|
410
|
+
const dx = nextX - currentX;
|
|
411
|
+
const scale = dx / 3;
|
|
412
|
+
const y0 = yAt(currentX);
|
|
413
|
+
const dy0 = dyAt(currentX);
|
|
414
|
+
const y1 = yAt(nextX);
|
|
415
|
+
const dy1 = dyAt(nextX);
|
|
416
|
+
const cp1x = currentX + scale;
|
|
417
|
+
const cp1y = y0 + scale * dy0;
|
|
418
|
+
const cp2x = nextX - scale;
|
|
419
|
+
const cp2y = y1 - scale * dy1;
|
|
420
|
+
d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${nextX.toFixed(2)} ${y1.toFixed(2)}`;
|
|
421
|
+
currentX = nextX;
|
|
408
422
|
}
|
|
409
|
-
const yEnd = Math.sin((endX + phase) / wl * 2 * Math.PI) * amp;
|
|
410
|
-
d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
|
|
411
423
|
return d;
|
|
412
424
|
}
|
|
413
|
-
var
|
|
425
|
+
var GLOBAL_ROTATION_DURATION = 6e3;
|
|
426
|
+
var GLOBAL_ROTATION_TARGET = 1080;
|
|
427
|
+
var ADDITIONAL_ROTATION_CYCLE = 1500;
|
|
428
|
+
var ADDITIONAL_ROTATION_STEP = 90;
|
|
429
|
+
var ADDITIONAL_ROTATION_EASE_DURATION = 500;
|
|
430
|
+
var DEFAULT_MIN_PROGRESS = 0.1;
|
|
431
|
+
var DEFAULT_MAX_PROGRESS = 0.8;
|
|
432
|
+
var PROGRESS_CYCLE_DURATION = 1500;
|
|
433
|
+
var CircularProgress = React3__namespace.forwardRef(
|
|
414
434
|
(_a, ref) => {
|
|
415
435
|
var _b = _a, {
|
|
416
436
|
value,
|
|
@@ -423,6 +443,10 @@ var CircularProgress = React12__namespace.forwardRef(
|
|
|
423
443
|
crawlerSpeed = 1,
|
|
424
444
|
color,
|
|
425
445
|
trackColor,
|
|
446
|
+
showTrack = "auto",
|
|
447
|
+
minProgress = DEFAULT_MIN_PROGRESS,
|
|
448
|
+
maxProgress = DEFAULT_MAX_PROGRESS,
|
|
449
|
+
amplitudeRange,
|
|
426
450
|
className,
|
|
427
451
|
"aria-label": ariaLabel
|
|
428
452
|
} = _b, restProps = __objRest(_b, [
|
|
@@ -436,6 +460,10 @@ var CircularProgress = React12__namespace.forwardRef(
|
|
|
436
460
|
"crawlerSpeed",
|
|
437
461
|
"color",
|
|
438
462
|
"trackColor",
|
|
463
|
+
"showTrack",
|
|
464
|
+
"minProgress",
|
|
465
|
+
"maxProgress",
|
|
466
|
+
"amplitudeRange",
|
|
439
467
|
"className",
|
|
440
468
|
"aria-label"
|
|
441
469
|
]);
|
|
@@ -446,17 +474,22 @@ var CircularProgress = React12__namespace.forwardRef(
|
|
|
446
474
|
const activeColor = color || "var(--md-sys-color-indicator-active)";
|
|
447
475
|
const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
|
|
448
476
|
const isWavy = shape === "wavy";
|
|
477
|
+
const shouldShowIndeterminateTrack = showTrack === "auto" ? isWavy : showTrack;
|
|
449
478
|
const BASELINE_SIZE = 48;
|
|
450
479
|
const scaleFactor = size / BASELINE_SIZE;
|
|
451
|
-
const effectiveAmplitude =
|
|
480
|
+
const effectiveAmplitude = React3__namespace.useMemo(
|
|
452
481
|
() => amplitude != null ? amplitude : 1.6 * scaleFactor,
|
|
453
482
|
[amplitude, scaleFactor]
|
|
454
483
|
);
|
|
455
|
-
const effectiveWavelength =
|
|
484
|
+
const effectiveWavelength = React3__namespace.useMemo(
|
|
456
485
|
() => wavelength != null ? wavelength : 15 * scaleFactor,
|
|
457
486
|
[wavelength, scaleFactor]
|
|
458
487
|
);
|
|
459
|
-
const
|
|
488
|
+
const resolvedAmplitudeRange = React3__namespace.useMemo(
|
|
489
|
+
() => amplitudeRange != null ? amplitudeRange : [0, effectiveAmplitude],
|
|
490
|
+
[amplitudeRange, effectiveAmplitude]
|
|
491
|
+
);
|
|
492
|
+
const wavyActivePath = React3__namespace.useMemo(
|
|
460
493
|
() => isWavy ? generateWavyCircularPath(
|
|
461
494
|
center,
|
|
462
495
|
radius,
|
|
@@ -465,8 +498,8 @@ var CircularProgress = React12__namespace.forwardRef(
|
|
|
465
498
|
) : null,
|
|
466
499
|
[isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
|
|
467
500
|
);
|
|
468
|
-
const circumference =
|
|
469
|
-
const gapForTrack =
|
|
501
|
+
const circumference = React3__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
|
|
502
|
+
const gapForTrack = React3__namespace.useMemo(
|
|
470
503
|
() => (gapSize + trackHeight) / circumference,
|
|
471
504
|
[gapSize, trackHeight, circumference]
|
|
472
505
|
);
|
|
@@ -475,6 +508,145 @@ var CircularProgress = React12__namespace.forwardRef(
|
|
|
475
508
|
const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
|
|
476
509
|
const ActiveCircleElem = react.m.circle;
|
|
477
510
|
const ActivePathElem = react.m.path;
|
|
511
|
+
const indeterminateSvgRef = React3__namespace.useRef(null);
|
|
512
|
+
const indeterminateTrackRef = React3__namespace.useRef(null);
|
|
513
|
+
const indeterminateActiveRef = React3__namespace.useRef(null);
|
|
514
|
+
const indeterminateWavyTrackPathRef = React3__namespace.useRef(null);
|
|
515
|
+
const indeterminateWavyActivePathRef = React3__namespace.useRef(null);
|
|
516
|
+
const cachedPathLengthRef = React3__namespace.useRef(0);
|
|
517
|
+
React3__namespace.useLayoutEffect(() => {
|
|
518
|
+
if (!isWavy || !wavyActivePath) {
|
|
519
|
+
cachedPathLengthRef.current = circumference;
|
|
520
|
+
return;
|
|
521
|
+
}
|
|
522
|
+
const el = indeterminateActiveRef.current;
|
|
523
|
+
if (el && "getTotalLength" in el) {
|
|
524
|
+
try {
|
|
525
|
+
const len = el.getTotalLength();
|
|
526
|
+
if (len > 0) {
|
|
527
|
+
cachedPathLengthRef.current = len;
|
|
528
|
+
return;
|
|
529
|
+
}
|
|
530
|
+
} catch (e) {
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
cachedPathLengthRef.current = circumference;
|
|
534
|
+
}, [isWavy, circumference, wavyActivePath]);
|
|
535
|
+
react.useAnimationFrame((time) => {
|
|
536
|
+
if (isDeterminate) return;
|
|
537
|
+
const safeCrawlerSpeed = Math.max(0.1, crawlerSpeed);
|
|
538
|
+
const scaledTime = time * safeCrawlerSpeed;
|
|
539
|
+
const globalCycle = scaledTime % GLOBAL_ROTATION_DURATION;
|
|
540
|
+
const globalAngle = globalCycle / GLOBAL_ROTATION_DURATION * GLOBAL_ROTATION_TARGET;
|
|
541
|
+
const additionalFullCycles = Math.floor(
|
|
542
|
+
scaledTime / ADDITIONAL_ROTATION_CYCLE
|
|
543
|
+
);
|
|
544
|
+
const additionalCycleTime = scaledTime % ADDITIONAL_ROTATION_CYCLE;
|
|
545
|
+
const additionalEaseT = Math.min(
|
|
546
|
+
1,
|
|
547
|
+
additionalCycleTime / ADDITIONAL_ROTATION_EASE_DURATION
|
|
548
|
+
);
|
|
549
|
+
const additionalAngle = (additionalFullCycles + easeInOutCubic(additionalEaseT)) * ADDITIONAL_ROTATION_STEP;
|
|
550
|
+
const totalRotation = globalAngle + additionalAngle;
|
|
551
|
+
if (indeterminateSvgRef.current) {
|
|
552
|
+
indeterminateSvgRef.current.style.transform = `rotate(${totalRotation - 90}deg)`;
|
|
553
|
+
}
|
|
554
|
+
const progressFullCycle = PROGRESS_CYCLE_DURATION * 2;
|
|
555
|
+
const progressCycleTime = scaledTime % progressFullCycle;
|
|
556
|
+
let progress;
|
|
557
|
+
if (progressCycleTime < PROGRESS_CYCLE_DURATION) {
|
|
558
|
+
const t = progressCycleTime / PROGRESS_CYCLE_DURATION;
|
|
559
|
+
progress = minProgress + (maxProgress - minProgress) * easeInOutCubic(t);
|
|
560
|
+
} else {
|
|
561
|
+
const t = (progressCycleTime - PROGRESS_CYCLE_DURATION) / PROGRESS_CYCLE_DURATION;
|
|
562
|
+
progress = maxProgress - (maxProgress - minProgress) * easeInOutCubic(t);
|
|
563
|
+
}
|
|
564
|
+
if (isWavy) {
|
|
565
|
+
const amplitudeT = (progress - minProgress) / (maxProgress - minProgress);
|
|
566
|
+
const currentAmplitude = resolvedAmplitudeRange[0] + (resolvedAmplitudeRange[1] - resolvedAmplitudeRange[0]) * amplitudeT;
|
|
567
|
+
const dynamicPath = generateWavyCircularPath(
|
|
568
|
+
center,
|
|
569
|
+
radius,
|
|
570
|
+
currentAmplitude,
|
|
571
|
+
effectiveWavelength
|
|
572
|
+
);
|
|
573
|
+
if (indeterminateWavyActivePathRef.current) {
|
|
574
|
+
indeterminateWavyActivePathRef.current.setAttribute("d", dynamicPath);
|
|
575
|
+
}
|
|
576
|
+
if (indeterminateWavyTrackPathRef.current) {
|
|
577
|
+
indeterminateWavyTrackPathRef.current.setAttribute("d", dynamicPath);
|
|
578
|
+
}
|
|
579
|
+
const pathEl = indeterminateWavyActivePathRef.current;
|
|
580
|
+
let totalLen = cachedPathLengthRef.current || circumference;
|
|
581
|
+
if (pathEl) {
|
|
582
|
+
try {
|
|
583
|
+
const len = pathEl.getTotalLength();
|
|
584
|
+
if (len > 0) totalLen = len;
|
|
585
|
+
} catch (e) {
|
|
586
|
+
}
|
|
587
|
+
}
|
|
588
|
+
const gapFrac = (gapSize + trackHeight) / totalLen;
|
|
589
|
+
const activeLen = totalLen * progress;
|
|
590
|
+
const activeOff = 0;
|
|
591
|
+
if (indeterminateWavyActivePathRef.current) {
|
|
592
|
+
indeterminateWavyActivePathRef.current.setAttribute(
|
|
593
|
+
"stroke-dasharray",
|
|
594
|
+
`${activeLen} ${totalLen}`
|
|
595
|
+
);
|
|
596
|
+
indeterminateWavyActivePathRef.current.setAttribute(
|
|
597
|
+
"stroke-dashoffset",
|
|
598
|
+
`${activeOff}`
|
|
599
|
+
);
|
|
600
|
+
}
|
|
601
|
+
if (shouldShowIndeterminateTrack && indeterminateWavyTrackPathRef.current) {
|
|
602
|
+
const trackStartFrac = progress + gapFrac;
|
|
603
|
+
const trackLen = Math.max(
|
|
604
|
+
1e-3,
|
|
605
|
+
totalLen * (1 - progress - 2 * gapFrac)
|
|
606
|
+
);
|
|
607
|
+
const trackOff = -totalLen * trackStartFrac;
|
|
608
|
+
indeterminateWavyTrackPathRef.current.setAttribute(
|
|
609
|
+
"stroke-dasharray",
|
|
610
|
+
`${trackLen} ${totalLen}`
|
|
611
|
+
);
|
|
612
|
+
indeterminateWavyTrackPathRef.current.setAttribute(
|
|
613
|
+
"stroke-dashoffset",
|
|
614
|
+
`${trackOff}`
|
|
615
|
+
);
|
|
616
|
+
}
|
|
617
|
+
} else {
|
|
618
|
+
const totalLen = circumference;
|
|
619
|
+
const activeLen = totalLen * progress;
|
|
620
|
+
const activeOff = 0;
|
|
621
|
+
if (indeterminateActiveRef.current) {
|
|
622
|
+
indeterminateActiveRef.current.setAttribute(
|
|
623
|
+
"stroke-dasharray",
|
|
624
|
+
`${activeLen} ${totalLen}`
|
|
625
|
+
);
|
|
626
|
+
indeterminateActiveRef.current.setAttribute(
|
|
627
|
+
"stroke-dashoffset",
|
|
628
|
+
`${activeOff}`
|
|
629
|
+
);
|
|
630
|
+
}
|
|
631
|
+
if (shouldShowIndeterminateTrack && indeterminateTrackRef.current) {
|
|
632
|
+
const gapFrac = (gapSize + trackHeight) / totalLen;
|
|
633
|
+
const trackStartFrac = progress + gapFrac;
|
|
634
|
+
const trackLen = Math.max(
|
|
635
|
+
1e-3,
|
|
636
|
+
totalLen * (1 - progress - 2 * gapFrac)
|
|
637
|
+
);
|
|
638
|
+
const trackOff = -totalLen * trackStartFrac;
|
|
639
|
+
indeterminateTrackRef.current.setAttribute(
|
|
640
|
+
"stroke-dasharray",
|
|
641
|
+
`${trackLen} ${totalLen}`
|
|
642
|
+
);
|
|
643
|
+
indeterminateTrackRef.current.setAttribute(
|
|
644
|
+
"stroke-dashoffset",
|
|
645
|
+
`${trackOff}`
|
|
646
|
+
);
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
});
|
|
478
650
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
479
651
|
"div",
|
|
480
652
|
__spreadProps(__spreadValues({
|
|
@@ -551,9 +723,10 @@ var CircularProgress = React12__namespace.forwardRef(
|
|
|
551
723
|
]
|
|
552
724
|
}
|
|
553
725
|
),
|
|
554
|
-
!isDeterminate && /* @__PURE__ */ jsxRuntime.
|
|
555
|
-
|
|
726
|
+
!isDeterminate && /* @__PURE__ */ jsxRuntime.jsx(
|
|
727
|
+
"svg",
|
|
556
728
|
{
|
|
729
|
+
ref: indeterminateSvgRef,
|
|
557
730
|
width: size,
|
|
558
731
|
height: size,
|
|
559
732
|
viewBox: `0 0 ${size} ${size}`,
|
|
@@ -562,90 +735,60 @@ var CircularProgress = React12__namespace.forwardRef(
|
|
|
562
735
|
position: "absolute",
|
|
563
736
|
inset: 0,
|
|
564
737
|
overflow: "visible",
|
|
565
|
-
|
|
566
|
-
|
|
738
|
+
transformOrigin: "center",
|
|
739
|
+
transform: "rotate(-90deg)"
|
|
567
740
|
},
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
572
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
573
|
-
ease: "linear"
|
|
574
|
-
}
|
|
575
|
-
},
|
|
576
|
-
children: [
|
|
577
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
578
|
-
react.m.circle,
|
|
741
|
+
children: isWavy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
742
|
+
shouldShowIndeterminateTrack && /* @__PURE__ */ jsxRuntime.jsx(
|
|
743
|
+
"path",
|
|
579
744
|
{
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
r: radius,
|
|
745
|
+
ref: indeterminateWavyTrackPathRef,
|
|
746
|
+
d: wavyActivePath != null ? wavyActivePath : "",
|
|
583
747
|
fill: "none",
|
|
584
748
|
stroke: bgTrackColor,
|
|
585
749
|
strokeWidth: trackHeight,
|
|
586
|
-
strokeLinecap: "round"
|
|
587
|
-
style: { originX: "50%", originY: "50%" },
|
|
588
|
-
animate: {
|
|
589
|
-
pathLength: [
|
|
590
|
-
Math.max(1e-3, 1 - 0.1 - 2 * gapForTrack),
|
|
591
|
-
Math.max(1e-3, 1 - 0.75 - 2 * gapForTrack),
|
|
592
|
-
Math.max(1e-3, 1 - 0.1 - 2 * gapForTrack)
|
|
593
|
-
],
|
|
594
|
-
rotate: [
|
|
595
|
-
`${(0.1 + gapForTrack) * 360}deg`,
|
|
596
|
-
`${(1 + gapForTrack) * 360}deg`,
|
|
597
|
-
`${(1.1 + gapForTrack) * 360}deg`
|
|
598
|
-
]
|
|
599
|
-
},
|
|
600
|
-
transition: {
|
|
601
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
602
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
603
|
-
ease: [0.4, 0, 0.2, 1]
|
|
604
|
-
}
|
|
750
|
+
strokeLinecap: "round"
|
|
605
751
|
}
|
|
606
752
|
),
|
|
607
|
-
|
|
608
|
-
|
|
753
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
754
|
+
"path",
|
|
609
755
|
{
|
|
756
|
+
ref: indeterminateWavyActivePathRef,
|
|
610
757
|
d: wavyActivePath != null ? wavyActivePath : "",
|
|
611
758
|
fill: "none",
|
|
612
759
|
stroke: activeColor,
|
|
613
760
|
strokeWidth: trackHeight,
|
|
614
|
-
strokeLinecap: "round"
|
|
615
|
-
style: { originX: "50%", originY: "50%" },
|
|
616
|
-
animate: {
|
|
617
|
-
pathLength: [0.1, 0.75, 0.1],
|
|
618
|
-
rotate: ["0deg", "90deg", "360deg"]
|
|
619
|
-
},
|
|
620
|
-
transition: {
|
|
621
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
622
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
623
|
-
ease: [0.4, 0, 0.2, 1]
|
|
624
|
-
}
|
|
761
|
+
strokeLinecap: "round"
|
|
625
762
|
}
|
|
626
|
-
)
|
|
627
|
-
|
|
763
|
+
)
|
|
764
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
765
|
+
shouldShowIndeterminateTrack && /* @__PURE__ */ jsxRuntime.jsx(
|
|
766
|
+
"circle",
|
|
767
|
+
{
|
|
768
|
+
ref: indeterminateTrackRef,
|
|
769
|
+
cx: center,
|
|
770
|
+
cy: center,
|
|
771
|
+
r: radius,
|
|
772
|
+
fill: "none",
|
|
773
|
+
stroke: bgTrackColor,
|
|
774
|
+
strokeWidth: trackHeight,
|
|
775
|
+
strokeLinecap: "round"
|
|
776
|
+
}
|
|
777
|
+
),
|
|
778
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
779
|
+
"circle",
|
|
628
780
|
{
|
|
781
|
+
ref: indeterminateActiveRef,
|
|
629
782
|
cx: center,
|
|
630
783
|
cy: center,
|
|
631
784
|
r: radius,
|
|
632
785
|
fill: "none",
|
|
633
786
|
stroke: activeColor,
|
|
634
787
|
strokeWidth: trackHeight,
|
|
635
|
-
strokeLinecap: "round"
|
|
636
|
-
style: { originX: "50%", originY: "50%" },
|
|
637
|
-
animate: {
|
|
638
|
-
pathLength: [0.1, 0.75, 0.1],
|
|
639
|
-
rotate: ["0deg", "90deg", "360deg"]
|
|
640
|
-
},
|
|
641
|
-
transition: {
|
|
642
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
643
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
644
|
-
ease: [0.4, 0, 0.2, 1]
|
|
645
|
-
}
|
|
788
|
+
strokeLinecap: "round"
|
|
646
789
|
}
|
|
647
790
|
)
|
|
648
|
-
]
|
|
791
|
+
] })
|
|
649
792
|
}
|
|
650
793
|
)
|
|
651
794
|
] })
|
|
@@ -655,9 +798,9 @@ var CircularProgress = React12__namespace.forwardRef(
|
|
|
655
798
|
);
|
|
656
799
|
CircularProgress.displayName = "CircularProgress";
|
|
657
800
|
function useContainerWidth() {
|
|
658
|
-
const [width, setWidth] =
|
|
659
|
-
const observerRef =
|
|
660
|
-
const ref =
|
|
801
|
+
const [width, setWidth] = React3__namespace.useState(0);
|
|
802
|
+
const observerRef = React3__namespace.useRef(null);
|
|
803
|
+
const ref = React3__namespace.useCallback((node) => {
|
|
661
804
|
if (observerRef.current) {
|
|
662
805
|
observerRef.current.disconnect();
|
|
663
806
|
observerRef.current = null;
|
|
@@ -671,7 +814,7 @@ function useContainerWidth() {
|
|
|
671
814
|
observerRef.current = obs;
|
|
672
815
|
}
|
|
673
816
|
}, []);
|
|
674
|
-
|
|
817
|
+
React3__namespace.useEffect(() => {
|
|
675
818
|
return () => {
|
|
676
819
|
if (observerRef.current) {
|
|
677
820
|
observerRef.current.disconnect();
|
|
@@ -681,7 +824,7 @@ function useContainerWidth() {
|
|
|
681
824
|
return [ref, width];
|
|
682
825
|
}
|
|
683
826
|
function useMergedRef(...refs) {
|
|
684
|
-
return
|
|
827
|
+
return React3__namespace.useCallback(
|
|
685
828
|
(node) => {
|
|
686
829
|
for (const ref of refs) {
|
|
687
830
|
if (typeof ref === "function") {
|
|
@@ -695,7 +838,7 @@ function useMergedRef(...refs) {
|
|
|
695
838
|
[refs]
|
|
696
839
|
);
|
|
697
840
|
}
|
|
698
|
-
var FlatLinearTrack =
|
|
841
|
+
var FlatLinearTrack = React3__namespace.memo(function FlatLinearTrack2({
|
|
699
842
|
trackHeight,
|
|
700
843
|
activeColor,
|
|
701
844
|
trackColor,
|
|
@@ -771,7 +914,7 @@ var FlatLinearTrack = React12__namespace.memo(function FlatLinearTrack2({
|
|
|
771
914
|
}
|
|
772
915
|
);
|
|
773
916
|
});
|
|
774
|
-
var WavyLinearTrack =
|
|
917
|
+
var WavyLinearTrack = React3__namespace.memo(function WavyLinearTrack2({
|
|
775
918
|
trackHeight,
|
|
776
919
|
svgHeight,
|
|
777
920
|
amplitude,
|
|
@@ -790,13 +933,13 @@ var WavyLinearTrack = React12__namespace.memo(function WavyLinearTrack2({
|
|
|
790
933
|
}) {
|
|
791
934
|
const isDeterminate = typeof value === "number";
|
|
792
935
|
const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
|
|
793
|
-
const titleId =
|
|
936
|
+
const titleId = React3__namespace.useId();
|
|
794
937
|
const [containerRef, width] = useContainerWidth();
|
|
795
|
-
const activePathRef =
|
|
796
|
-
const trackPathRef =
|
|
938
|
+
const activePathRef = React3__namespace.useRef(null);
|
|
939
|
+
const trackPathRef = React3__namespace.useRef(null);
|
|
797
940
|
const amplitudeMV = react.useMotionValue(amplitude);
|
|
798
941
|
const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 1);
|
|
799
|
-
|
|
942
|
+
React3__namespace.useEffect(() => {
|
|
800
943
|
if (isDeterminate) {
|
|
801
944
|
const fraction = clampedValue / 100;
|
|
802
945
|
let targetAmp = amplitude;
|
|
@@ -809,6 +952,12 @@ var WavyLinearTrack = React12__namespace.memo(function WavyLinearTrack2({
|
|
|
809
952
|
duration: 0.5
|
|
810
953
|
});
|
|
811
954
|
react.animate(fractionMV, fraction, { duration: 0.4, ease: [0.2, 0, 0, 1] });
|
|
955
|
+
} else {
|
|
956
|
+
react.animate(amplitudeMV, amplitude, {
|
|
957
|
+
type: "spring",
|
|
958
|
+
bounce: 0,
|
|
959
|
+
duration: 0.5
|
|
960
|
+
});
|
|
812
961
|
}
|
|
813
962
|
}, [
|
|
814
963
|
clampedValue,
|
|
@@ -822,10 +971,10 @@ var WavyLinearTrack = React12__namespace.memo(function WavyLinearTrack2({
|
|
|
822
971
|
1,
|
|
823
972
|
isDeterminate ? wavelength : indeterminateWavelength
|
|
824
973
|
);
|
|
825
|
-
const trackAmp = trackShape === "wavy" ? amplitude : 0;
|
|
826
974
|
react.useAnimationFrame((time) => {
|
|
827
975
|
if (width === 0) return;
|
|
828
976
|
const currentAmp = amplitudeMV.get();
|
|
977
|
+
const trackAmp = trackShape === "wavy" ? amplitude : 0;
|
|
829
978
|
const phase = time / 1e3 * waveSpeed * activeWavelength;
|
|
830
979
|
const capWidth = trackHeight / 2;
|
|
831
980
|
let activePathD = "";
|
|
@@ -845,7 +994,7 @@ var WavyLinearTrack = React12__namespace.memo(function WavyLinearTrack2({
|
|
|
845
994
|
currentAmp
|
|
846
995
|
);
|
|
847
996
|
} else if (fraction === 0) {
|
|
848
|
-
activePathD =
|
|
997
|
+
activePathD = "";
|
|
849
998
|
}
|
|
850
999
|
const trackStart = adjHead + totalGap;
|
|
851
1000
|
if (trackStart < width - capWidth) {
|
|
@@ -877,20 +1026,20 @@ var WavyLinearTrack = React12__namespace.memo(function WavyLinearTrack2({
|
|
|
877
1026
|
activeLines.push({ tail: l1T, head: l1H });
|
|
878
1027
|
activeLines.push({ tail: l2T, head: l2H });
|
|
879
1028
|
}
|
|
880
|
-
const
|
|
881
|
-
const
|
|
882
|
-
const
|
|
1029
|
+
const activeSegments = activeLines.map((line) => {
|
|
1030
|
+
const rawTail = line.tail * width;
|
|
1031
|
+
const rawHead = line.head * width;
|
|
883
1032
|
const adjTail = Math.max(
|
|
884
1033
|
capWidth,
|
|
885
|
-
Math.min(width - capWidth,
|
|
1034
|
+
Math.min(width - capWidth, rawTail)
|
|
886
1035
|
);
|
|
887
1036
|
const adjHead = Math.max(
|
|
888
1037
|
capWidth,
|
|
889
|
-
Math.min(width - capWidth,
|
|
1038
|
+
Math.min(width - capWidth, rawHead)
|
|
890
1039
|
);
|
|
891
1040
|
return { adjTail, adjHead };
|
|
892
1041
|
}).filter((seg) => seg.adjHead - seg.adjTail > 0.1);
|
|
893
|
-
activePathD =
|
|
1042
|
+
activePathD = activeSegments.map(
|
|
894
1043
|
(seg) => getSinePath(
|
|
895
1044
|
seg.adjTail,
|
|
896
1045
|
seg.adjHead,
|
|
@@ -899,13 +1048,24 @@ var WavyLinearTrack = React12__namespace.memo(function WavyLinearTrack2({
|
|
|
899
1048
|
currentAmp
|
|
900
1049
|
)
|
|
901
1050
|
).join(" ");
|
|
1051
|
+
const validActiveLines = activeLines.filter(
|
|
1052
|
+
(line) => line.head > line.tail && line.head * width > 0 && line.tail * width < width
|
|
1053
|
+
).sort((a, b) => a.tail - b.tail);
|
|
902
1054
|
let currentTrackX = capWidth;
|
|
903
|
-
for (const
|
|
904
|
-
const
|
|
1055
|
+
for (const line of validActiveLines) {
|
|
1056
|
+
const blockStart = line.tail * width - totalGap;
|
|
1057
|
+
const blockEnd = line.head * width + totalGap;
|
|
1058
|
+
const trackEnd = Math.min(width - capWidth, blockStart);
|
|
905
1059
|
if (trackEnd > currentTrackX) {
|
|
906
|
-
trackD += `${getSinePath(
|
|
1060
|
+
trackD += `${getSinePath(
|
|
1061
|
+
currentTrackX,
|
|
1062
|
+
trackEnd,
|
|
1063
|
+
phase,
|
|
1064
|
+
activeWavelength,
|
|
1065
|
+
trackAmp
|
|
1066
|
+
)} `;
|
|
907
1067
|
}
|
|
908
|
-
currentTrackX = Math.max(currentTrackX,
|
|
1068
|
+
currentTrackX = Math.max(currentTrackX, blockEnd);
|
|
909
1069
|
}
|
|
910
1070
|
if (currentTrackX < width - capWidth) {
|
|
911
1071
|
trackD += getSinePath(
|
|
@@ -918,15 +1078,15 @@ var WavyLinearTrack = React12__namespace.memo(function WavyLinearTrack2({
|
|
|
918
1078
|
}
|
|
919
1079
|
}
|
|
920
1080
|
if (activePathRef.current)
|
|
921
|
-
activePathRef.current.setAttribute("d", activePathD);
|
|
1081
|
+
activePathRef.current.setAttribute("d", activePathD || "");
|
|
922
1082
|
if (trackPathRef.current)
|
|
923
|
-
trackPathRef.current.setAttribute("d", trackD.trim());
|
|
1083
|
+
trackPathRef.current.setAttribute("d", trackD.trim() || "");
|
|
924
1084
|
});
|
|
925
1085
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
926
1086
|
"div",
|
|
927
1087
|
{
|
|
928
1088
|
ref: containerRef,
|
|
929
|
-
className: "relative w-full
|
|
1089
|
+
className: "relative w-full",
|
|
930
1090
|
style: { height: svgHeight },
|
|
931
1091
|
children: width > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
932
1092
|
"svg",
|
|
@@ -967,7 +1127,7 @@ var WavyLinearTrack = React12__namespace.memo(function WavyLinearTrack2({
|
|
|
967
1127
|
}
|
|
968
1128
|
);
|
|
969
1129
|
});
|
|
970
|
-
var LinearProgress =
|
|
1130
|
+
var LinearProgress = React3__namespace.forwardRef(
|
|
971
1131
|
(_a, ref) => {
|
|
972
1132
|
var _b = _a, {
|
|
973
1133
|
value,
|
|
@@ -980,7 +1140,7 @@ var LinearProgress = React12__namespace.forwardRef(
|
|
|
980
1140
|
waveSpeed = 1,
|
|
981
1141
|
crawlerSpeed = 1,
|
|
982
1142
|
determinateAnimation = "md3",
|
|
983
|
-
indeterminateAnimation = "
|
|
1143
|
+
indeterminateAnimation = "md3",
|
|
984
1144
|
gapSize = 4,
|
|
985
1145
|
showStopIndicator = "auto",
|
|
986
1146
|
color,
|
|
@@ -1008,33 +1168,35 @@ var LinearProgress = React12__namespace.forwardRef(
|
|
|
1008
1168
|
]);
|
|
1009
1169
|
const isDeterminate = value !== void 0;
|
|
1010
1170
|
const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
|
|
1011
|
-
const containerRef =
|
|
1171
|
+
const containerRef = React3__namespace.useRef(null);
|
|
1012
1172
|
const mergedRef = useMergedRef(ref, containerRef);
|
|
1013
|
-
const [isRtl, setIsRtl] =
|
|
1014
|
-
|
|
1173
|
+
const [isRtl, setIsRtl] = React3__namespace.useState(false);
|
|
1174
|
+
React3__namespace.useEffect(() => {
|
|
1015
1175
|
if (containerRef.current) {
|
|
1016
1176
|
const dir = getComputedStyle(containerRef.current).direction;
|
|
1017
1177
|
setIsRtl(dir === "rtl");
|
|
1018
1178
|
}
|
|
1019
1179
|
}, []);
|
|
1020
|
-
const isWavy = shape === "wavy";
|
|
1021
1180
|
const resolvedTrackShape = trackShape != null ? trackShape : shape;
|
|
1022
|
-
const
|
|
1023
|
-
const
|
|
1181
|
+
const isWavy = shape === "wavy" || resolvedTrackShape === "wavy";
|
|
1182
|
+
const effectiveAmplitude = React3__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
|
|
1183
|
+
const svgHeight = React3__namespace.useMemo(
|
|
1024
1184
|
() => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
|
|
1025
1185
|
[isWavy, trackHeight, effectiveAmplitude]
|
|
1026
1186
|
);
|
|
1027
|
-
const shouldShowStop =
|
|
1028
|
-
() => isDeterminate && resolvedTrackShape === "flat" &&
|
|
1187
|
+
const shouldShowStop = React3__namespace.useMemo(
|
|
1188
|
+
() => isDeterminate && resolvedTrackShape === "flat" && showStopIndicator !== false,
|
|
1029
1189
|
[isDeterminate, resolvedTrackShape, showStopIndicator]
|
|
1030
1190
|
);
|
|
1031
|
-
const stopSize =
|
|
1191
|
+
const stopSize = React3__namespace.useMemo(
|
|
1032
1192
|
() => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
|
|
1033
1193
|
[trackHeight]
|
|
1034
1194
|
);
|
|
1035
1195
|
const stopOffset = (trackHeight - stopSize) / 2;
|
|
1036
1196
|
const activeColor = color || "var(--md-sys-color-indicator-active)";
|
|
1037
1197
|
const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
|
|
1198
|
+
const useWavyTrack = isWavy || !isDeterminate;
|
|
1199
|
+
const trackAmp = isWavy ? effectiveAmplitude : 0;
|
|
1038
1200
|
return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1039
1201
|
"div",
|
|
1040
1202
|
__spreadProps(__spreadValues({
|
|
@@ -1051,12 +1213,12 @@ var LinearProgress = React12__namespace.forwardRef(
|
|
|
1051
1213
|
style: { height: svgHeight }
|
|
1052
1214
|
}, restProps), {
|
|
1053
1215
|
children: [
|
|
1054
|
-
|
|
1216
|
+
useWavyTrack ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1055
1217
|
WavyLinearTrack,
|
|
1056
1218
|
{
|
|
1057
1219
|
trackHeight,
|
|
1058
1220
|
svgHeight,
|
|
1059
|
-
amplitude:
|
|
1221
|
+
amplitude: trackAmp,
|
|
1060
1222
|
wavelength,
|
|
1061
1223
|
indeterminateWavelength,
|
|
1062
1224
|
activeColor,
|
|
@@ -1101,14 +1263,14 @@ var LinearProgress = React12__namespace.forwardRef(
|
|
|
1101
1263
|
}
|
|
1102
1264
|
);
|
|
1103
1265
|
LinearProgress.displayName = "LinearProgress";
|
|
1104
|
-
var ProgressIndicator =
|
|
1266
|
+
var ProgressIndicator = React3__namespace.forwardRef((props, ref) => {
|
|
1105
1267
|
if (props.variant === "circular") {
|
|
1106
1268
|
return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, __spreadValues({ ref }, props));
|
|
1107
1269
|
}
|
|
1108
1270
|
return /* @__PURE__ */ jsxRuntime.jsx(LinearProgress, __spreadValues({ ref }, props));
|
|
1109
1271
|
});
|
|
1110
1272
|
ProgressIndicator.displayName = "ProgressIndicator";
|
|
1111
|
-
var RippleItem =
|
|
1273
|
+
var RippleItem = React3__namespace.memo(function RippleItem2({
|
|
1112
1274
|
ripple,
|
|
1113
1275
|
onDone
|
|
1114
1276
|
}) {
|
|
@@ -1152,8 +1314,8 @@ function Ripple({
|
|
|
1152
1314
|
}
|
|
1153
1315
|
function useRippleState(options = {}) {
|
|
1154
1316
|
const { disabled = false } = options;
|
|
1155
|
-
const [ripples, setRipples] =
|
|
1156
|
-
const onPointerDown =
|
|
1317
|
+
const [ripples, setRipples] = React3__namespace.useState([]);
|
|
1318
|
+
const onPointerDown = React3__namespace.useCallback(
|
|
1157
1319
|
(e) => {
|
|
1158
1320
|
if (disabled) return;
|
|
1159
1321
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
@@ -1170,7 +1332,7 @@ function useRippleState(options = {}) {
|
|
|
1170
1332
|
},
|
|
1171
1333
|
[disabled]
|
|
1172
1334
|
);
|
|
1173
|
-
const removeRipple =
|
|
1335
|
+
const removeRipple = React3__namespace.useCallback((id) => {
|
|
1174
1336
|
setRipples((prev) => prev.filter((r) => r.id !== id));
|
|
1175
1337
|
}, []);
|
|
1176
1338
|
return { ripples, onPointerDown, removeRipple };
|
|
@@ -1318,7 +1480,7 @@ function resolveDisabledBgClass(colorStyle) {
|
|
|
1318
1480
|
}
|
|
1319
1481
|
return "disabled:text-m3-on-surface/[0.38]";
|
|
1320
1482
|
}
|
|
1321
|
-
var IconButtonComponent =
|
|
1483
|
+
var IconButtonComponent = React3__namespace.forwardRef(
|
|
1322
1484
|
(_a, ref) => {
|
|
1323
1485
|
var _b = _a, {
|
|
1324
1486
|
className,
|
|
@@ -1360,18 +1522,18 @@ var IconButtonComponent = React12__namespace.forwardRef(
|
|
|
1360
1522
|
var _a2, _b2, _c, _d, _e;
|
|
1361
1523
|
const isToggle = variant === "toggle";
|
|
1362
1524
|
const isSelected = isToggle && !!selected;
|
|
1363
|
-
const resolvedColorClass =
|
|
1525
|
+
const resolvedColorClass = React3__namespace.useMemo(
|
|
1364
1526
|
() => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
|
|
1365
1527
|
[isSelected, colorStyle]
|
|
1366
1528
|
);
|
|
1367
|
-
const outlineWidthClass =
|
|
1529
|
+
const outlineWidthClass = React3__namespace.useMemo(
|
|
1368
1530
|
() => {
|
|
1369
1531
|
var _a3;
|
|
1370
1532
|
return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
|
|
1371
1533
|
},
|
|
1372
1534
|
[colorStyle, isSelected, size]
|
|
1373
1535
|
);
|
|
1374
|
-
const disabledBgClass =
|
|
1536
|
+
const disabledBgClass = React3__namespace.useMemo(
|
|
1375
1537
|
() => resolveDisabledBgClass(colorStyle),
|
|
1376
1538
|
[colorStyle]
|
|
1377
1539
|
);
|
|
@@ -1394,7 +1556,7 @@ var IconButtonComponent = React12__namespace.forwardRef(
|
|
|
1394
1556
|
const { ripples, onPointerDown, removeRipple } = useRippleState({
|
|
1395
1557
|
disabled: loading
|
|
1396
1558
|
});
|
|
1397
|
-
const handleClick =
|
|
1559
|
+
const handleClick = React3__namespace.useCallback(
|
|
1398
1560
|
(e) => {
|
|
1399
1561
|
if (loading) {
|
|
1400
1562
|
e.preventDefault();
|
|
@@ -1404,7 +1566,7 @@ var IconButtonComponent = React12__namespace.forwardRef(
|
|
|
1404
1566
|
},
|
|
1405
1567
|
[loading, onClick]
|
|
1406
1568
|
);
|
|
1407
|
-
const handleKeyDown =
|
|
1569
|
+
const handleKeyDown = React3__namespace.useCallback(
|
|
1408
1570
|
(e) => {
|
|
1409
1571
|
if (loading) return;
|
|
1410
1572
|
if ((e.key === "Enter" || e.key === " ") && onClick) {
|
|
@@ -1460,7 +1622,7 @@ var IconButtonComponent = React12__namespace.forwardRef(
|
|
|
1460
1622
|
width: isCustomSize ? `${iconSize}px` : void 0,
|
|
1461
1623
|
height: isCustomSize ? `${iconSize}px` : void 0
|
|
1462
1624
|
},
|
|
1463
|
-
children: isSelected && selectedIcon ? selectedIcon : asChild ?
|
|
1625
|
+
children: isSelected && selectedIcon ? selectedIcon : asChild ? React3__namespace.Children.only(children).props.children : children
|
|
1464
1626
|
}),
|
|
1465
1627
|
isSelected && selectedIcon ? "selected-content" : "content"
|
|
1466
1628
|
) })
|
|
@@ -1477,7 +1639,7 @@ var IconButtonComponent = React12__namespace.forwardRef(
|
|
|
1477
1639
|
className
|
|
1478
1640
|
);
|
|
1479
1641
|
if (asChild) {
|
|
1480
|
-
const child =
|
|
1642
|
+
const child = React3__namespace.Children.only(children);
|
|
1481
1643
|
return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1482
1644
|
reactSlot.Slot,
|
|
1483
1645
|
__spreadProps(__spreadValues({
|
|
@@ -1494,7 +1656,7 @@ var IconButtonComponent = React12__namespace.forwardRef(
|
|
|
1494
1656
|
}),
|
|
1495
1657
|
className: containerClassName
|
|
1496
1658
|
}, restProps), {
|
|
1497
|
-
children:
|
|
1659
|
+
children: React3__namespace.cloneElement(child, { children: innerContent })
|
|
1498
1660
|
})
|
|
1499
1661
|
) });
|
|
1500
1662
|
}
|
|
@@ -1522,13 +1684,13 @@ var IconButtonComponent = React12__namespace.forwardRef(
|
|
|
1522
1684
|
}
|
|
1523
1685
|
);
|
|
1524
1686
|
IconButtonComponent.displayName = "IconButton";
|
|
1525
|
-
var IconButton =
|
|
1687
|
+
var IconButton = React3__namespace.memo(IconButtonComponent);
|
|
1526
1688
|
var VARIANT_FONT = {
|
|
1527
1689
|
outlined: "'Material Symbols Outlined'",
|
|
1528
1690
|
rounded: "'Material Symbols Rounded'",
|
|
1529
1691
|
sharp: "'Material Symbols Sharp'"
|
|
1530
1692
|
};
|
|
1531
|
-
var IconComponent =
|
|
1693
|
+
var IconComponent = React3__namespace.forwardRef(
|
|
1532
1694
|
(_a, ref) => {
|
|
1533
1695
|
var _b = _a, {
|
|
1534
1696
|
name,
|
|
@@ -1594,7 +1756,7 @@ var IconComponent = React12__namespace.forwardRef(
|
|
|
1594
1756
|
}
|
|
1595
1757
|
);
|
|
1596
1758
|
IconComponent.displayName = "Icon";
|
|
1597
|
-
var Icon =
|
|
1759
|
+
var Icon = React3__namespace.memo(IconComponent);
|
|
1598
1760
|
var DURATION_MAP = {
|
|
1599
1761
|
short: 4e3,
|
|
1600
1762
|
long: 7e3
|
|
@@ -1636,9 +1798,9 @@ function toSnackbarData(item) {
|
|
|
1636
1798
|
return { id: generateId(), visuals: item.visuals, resolve: item.resolve };
|
|
1637
1799
|
}
|
|
1638
1800
|
function useSnackbarState() {
|
|
1639
|
-
const [current, setCurrent] =
|
|
1640
|
-
const queueRef =
|
|
1641
|
-
const showSnackbar =
|
|
1801
|
+
const [current, setCurrent] = React3__namespace.useState(null);
|
|
1802
|
+
const queueRef = React3__namespace.useRef([]);
|
|
1803
|
+
const showSnackbar = React3__namespace.useCallback(
|
|
1642
1804
|
(visuals) => {
|
|
1643
1805
|
return new Promise((resolve) => {
|
|
1644
1806
|
const item = { visuals, resolve };
|
|
@@ -1651,14 +1813,14 @@ function useSnackbarState() {
|
|
|
1651
1813
|
},
|
|
1652
1814
|
[]
|
|
1653
1815
|
);
|
|
1654
|
-
const _dismiss =
|
|
1816
|
+
const _dismiss = React3__namespace.useCallback((result) => {
|
|
1655
1817
|
setCurrent((prev) => {
|
|
1656
1818
|
if (prev) prev.resolve(result);
|
|
1657
1819
|
const next = queueRef.current.shift();
|
|
1658
1820
|
return next ? toSnackbarData(next) : null;
|
|
1659
1821
|
});
|
|
1660
1822
|
}, []);
|
|
1661
|
-
|
|
1823
|
+
React3__namespace.useEffect(() => {
|
|
1662
1824
|
return () => {
|
|
1663
1825
|
for (const item of queueRef.current) {
|
|
1664
1826
|
item.resolve(RESULT.DISMISSED);
|
|
@@ -1668,7 +1830,7 @@ function useSnackbarState() {
|
|
|
1668
1830
|
}, []);
|
|
1669
1831
|
return { current, showSnackbar, _dismiss };
|
|
1670
1832
|
}
|
|
1671
|
-
var Snackbar =
|
|
1833
|
+
var Snackbar = React3__namespace.memo(function Snackbar2({
|
|
1672
1834
|
data,
|
|
1673
1835
|
className
|
|
1674
1836
|
}) {
|
|
@@ -1682,15 +1844,15 @@ var Snackbar = React12__namespace.memo(function Snackbar2({
|
|
|
1682
1844
|
} = visuals;
|
|
1683
1845
|
const reducedMotion = react.useReducedMotion();
|
|
1684
1846
|
const durationMs = resolveDuration(duration);
|
|
1685
|
-
|
|
1847
|
+
React3__namespace.useEffect(() => {
|
|
1686
1848
|
const timer = setTimeout(() => resolve(RESULT.DISMISSED), durationMs);
|
|
1687
1849
|
return () => clearTimeout(timer);
|
|
1688
1850
|
}, [resolve, durationMs]);
|
|
1689
|
-
const handleAction =
|
|
1851
|
+
const handleAction = React3__namespace.useCallback(
|
|
1690
1852
|
() => resolve(RESULT.ACTION),
|
|
1691
1853
|
[resolve]
|
|
1692
1854
|
);
|
|
1693
|
-
const handleDismiss =
|
|
1855
|
+
const handleDismiss = React3__namespace.useCallback(
|
|
1694
1856
|
() => resolve(RESULT.DISMISSED),
|
|
1695
1857
|
[resolve]
|
|
1696
1858
|
);
|
|
@@ -1758,7 +1920,7 @@ var Snackbar = React12__namespace.memo(function Snackbar2({
|
|
|
1758
1920
|
Snackbar.displayName = "Snackbar";
|
|
1759
1921
|
function SnackbarHost({ state, className }) {
|
|
1760
1922
|
const { current, _dismiss } = state;
|
|
1761
|
-
const wrappedData =
|
|
1923
|
+
const wrappedData = React3__namespace.useMemo(() => {
|
|
1762
1924
|
if (!current) return null;
|
|
1763
1925
|
return __spreadProps(__spreadValues({}, current), { resolve: _dismiss });
|
|
1764
1926
|
}, [current, _dismiss]);
|
|
@@ -1776,12 +1938,12 @@ function SnackbarHost({ state, className }) {
|
|
|
1776
1938
|
) });
|
|
1777
1939
|
}
|
|
1778
1940
|
SnackbarHost.displayName = "SnackbarHost";
|
|
1779
|
-
var SnackbarContext =
|
|
1941
|
+
var SnackbarContext = React3__namespace.createContext(
|
|
1780
1942
|
null
|
|
1781
1943
|
);
|
|
1782
1944
|
function SnackbarProvider({ children }) {
|
|
1783
1945
|
const state = useSnackbarState();
|
|
1784
|
-
const contextValue =
|
|
1946
|
+
const contextValue = React3__namespace.useMemo(
|
|
1785
1947
|
() => ({ showSnackbar: state.showSnackbar }),
|
|
1786
1948
|
[state.showSnackbar]
|
|
1787
1949
|
);
|
|
@@ -1792,7 +1954,7 @@ function SnackbarProvider({ children }) {
|
|
|
1792
1954
|
}
|
|
1793
1955
|
SnackbarProvider.displayName = "SnackbarProvider";
|
|
1794
1956
|
function useSnackbar() {
|
|
1795
|
-
const ctx =
|
|
1957
|
+
const ctx = React3__namespace.useContext(SnackbarContext);
|
|
1796
1958
|
if (!ctx) {
|
|
1797
1959
|
throw new Error("useSnackbar must be used within a <SnackbarProvider>.");
|
|
1798
1960
|
}
|
|
@@ -1894,7 +2056,7 @@ function TooltipCaretShape({
|
|
|
1894
2056
|
}
|
|
1895
2057
|
);
|
|
1896
2058
|
}
|
|
1897
|
-
var PlainTooltip =
|
|
2059
|
+
var PlainTooltip = React3.forwardRef(
|
|
1898
2060
|
(_a, ref) => {
|
|
1899
2061
|
var _b = _a, {
|
|
1900
2062
|
children,
|
|
@@ -1951,7 +2113,7 @@ var PlainTooltip = React12.forwardRef(
|
|
|
1951
2113
|
}
|
|
1952
2114
|
);
|
|
1953
2115
|
PlainTooltip.displayName = "PlainTooltip";
|
|
1954
|
-
var RichTooltip =
|
|
2116
|
+
var RichTooltip = React3.forwardRef(
|
|
1955
2117
|
(_a, ref) => {
|
|
1956
2118
|
var _b = _a, {
|
|
1957
2119
|
children,
|
|
@@ -2035,7 +2197,7 @@ var RichTooltip = React12.forwardRef(
|
|
|
2035
2197
|
);
|
|
2036
2198
|
RichTooltip.displayName = "RichTooltip";
|
|
2037
2199
|
var VIEWPORT_PADDING = 8;
|
|
2038
|
-
var useIsomorphicLayoutEffect = typeof window !== "undefined" ?
|
|
2200
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React3.useLayoutEffect : React3.useEffect;
|
|
2039
2201
|
function resolveAutoPlacement(spaceTop, spaceBottom, spaceLeft, spaceRight, tooltipWidth, tooltipHeight, spacing) {
|
|
2040
2202
|
if (spaceTop >= tooltipHeight + spacing) return "top";
|
|
2041
2203
|
if (spaceBottom >= tooltipHeight + spacing) return "bottom";
|
|
@@ -2095,7 +2257,7 @@ function clampToViewport(side, top, left, tooltipWidth, tooltipHeight) {
|
|
|
2095
2257
|
return { top, left };
|
|
2096
2258
|
}
|
|
2097
2259
|
function useTooltipPosition(anchorRef, tooltipRef, placement, spacing, isVisible) {
|
|
2098
|
-
const [position, setPosition] =
|
|
2260
|
+
const [position, setPosition] = React3.useState({
|
|
2099
2261
|
top: -9999,
|
|
2100
2262
|
left: -9999,
|
|
2101
2263
|
actualSide: placement === "auto" ? "top" : placement
|
|
@@ -2170,24 +2332,24 @@ function useTooltipState(config) {
|
|
|
2170
2332
|
isPersistent = false,
|
|
2171
2333
|
duration = 1500
|
|
2172
2334
|
} = config != null ? config : {};
|
|
2173
|
-
const [isVisible, setIsVisible] =
|
|
2174
|
-
const dismiss =
|
|
2335
|
+
const [isVisible, setIsVisible] = React3.useState(initialVisible);
|
|
2336
|
+
const dismiss = React3.useCallback(() => {
|
|
2175
2337
|
setIsVisible(false);
|
|
2176
2338
|
activeTooltipDismissals.delete(dismiss);
|
|
2177
2339
|
}, []);
|
|
2178
|
-
const show =
|
|
2340
|
+
const show = React3.useCallback(() => {
|
|
2179
2341
|
for (const otherDismiss of activeTooltipDismissals) {
|
|
2180
2342
|
if (otherDismiss !== dismiss) otherDismiss();
|
|
2181
2343
|
}
|
|
2182
2344
|
setIsVisible(true);
|
|
2183
2345
|
activeTooltipDismissals.add(dismiss);
|
|
2184
2346
|
}, [dismiss]);
|
|
2185
|
-
|
|
2347
|
+
React3.useEffect(() => {
|
|
2186
2348
|
if (!isVisible || isPersistent) return;
|
|
2187
2349
|
const timeoutId = setTimeout(dismiss, duration);
|
|
2188
2350
|
return () => clearTimeout(timeoutId);
|
|
2189
2351
|
}, [isVisible, isPersistent, duration, dismiss]);
|
|
2190
|
-
|
|
2352
|
+
React3.useEffect(() => {
|
|
2191
2353
|
return () => {
|
|
2192
2354
|
activeTooltipDismissals.delete(dismiss);
|
|
2193
2355
|
};
|
|
@@ -2244,20 +2406,20 @@ function TooltipBox({
|
|
|
2244
2406
|
}) {
|
|
2245
2407
|
const internalState = useTooltipState();
|
|
2246
2408
|
const state = controlledState != null ? controlledState : internalState;
|
|
2247
|
-
const anchorRef =
|
|
2248
|
-
const tooltipRef =
|
|
2249
|
-
const hoverTimeoutRef =
|
|
2250
|
-
const hideTimeoutRef =
|
|
2251
|
-
const pressTimeoutRef =
|
|
2409
|
+
const anchorRef = React3.useRef(null);
|
|
2410
|
+
const tooltipRef = React3.useRef(null);
|
|
2411
|
+
const hoverTimeoutRef = React3.useRef(null);
|
|
2412
|
+
const hideTimeoutRef = React3.useRef(null);
|
|
2413
|
+
const pressTimeoutRef = React3.useRef(null);
|
|
2252
2414
|
const triggers = Array.isArray(trigger) ? trigger : [trigger];
|
|
2253
|
-
const [mounted, setMounted] =
|
|
2254
|
-
const [hasHoverSupport, setHasHoverSupport] =
|
|
2255
|
-
const [prefersReducedMotion, setPrefersReducedMotion] =
|
|
2256
|
-
|
|
2415
|
+
const [mounted, setMounted] = React3.useState(false);
|
|
2416
|
+
const [hasHoverSupport, setHasHoverSupport] = React3.useState(true);
|
|
2417
|
+
const [prefersReducedMotion, setPrefersReducedMotion] = React3.useState(false);
|
|
2418
|
+
React3.useEffect(() => {
|
|
2257
2419
|
setMounted(true);
|
|
2258
2420
|
setHasHoverSupport(!window.matchMedia("(hover: none)").matches);
|
|
2259
2421
|
}, []);
|
|
2260
|
-
|
|
2422
|
+
React3.useEffect(() => {
|
|
2261
2423
|
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
2262
2424
|
setPrefersReducedMotion(mediaQuery.matches);
|
|
2263
2425
|
const onChange = (e) => setPrefersReducedMotion(e.matches);
|
|
@@ -2329,7 +2491,7 @@ function TooltipBox({
|
|
|
2329
2491
|
hideDelay
|
|
2330
2492
|
);
|
|
2331
2493
|
};
|
|
2332
|
-
|
|
2494
|
+
React3.useEffect(() => {
|
|
2333
2495
|
if (!state.isVisible) return;
|
|
2334
2496
|
const onKeyDown = (e) => {
|
|
2335
2497
|
var _a;
|
|
@@ -2341,8 +2503,8 @@ function TooltipBox({
|
|
|
2341
2503
|
document.addEventListener("keydown", onKeyDown);
|
|
2342
2504
|
return () => document.removeEventListener("keydown", onKeyDown);
|
|
2343
2505
|
}, [state.isVisible, state]);
|
|
2344
|
-
const tooltipId =
|
|
2345
|
-
const tooltipWithProps =
|
|
2506
|
+
const tooltipId = React3.useId();
|
|
2507
|
+
const tooltipWithProps = React3.cloneElement(
|
|
2346
2508
|
tooltip,
|
|
2347
2509
|
{
|
|
2348
2510
|
"data-side": position.actualSide,
|
|
@@ -2370,7 +2532,7 @@ function TooltipBox({
|
|
|
2370
2532
|
onKeyDown: handleKeyDown,
|
|
2371
2533
|
"aria-label": ariaLabel,
|
|
2372
2534
|
"aria-describedby": state.isVisible ? tooltipId : void 0,
|
|
2373
|
-
children:
|
|
2535
|
+
children: React3__namespace.isValidElement(children) ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children })
|
|
2374
2536
|
}
|
|
2375
2537
|
),
|
|
2376
2538
|
mounted && reactDom.createPortal(
|