@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/pickers.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
var react = require('motion/react');
|
|
5
|
-
var
|
|
5
|
+
var React6 = require('react');
|
|
6
6
|
var clsx = require('clsx');
|
|
7
7
|
var tailwindMerge = require('tailwind-merge');
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
|
|
|
28
28
|
return Object.freeze(n);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
var
|
|
31
|
+
var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
|
|
32
32
|
var RadixDialog__namespace = /*#__PURE__*/_interopNamespace(RadixDialog);
|
|
33
33
|
var RadixScrollArea__namespace = /*#__PURE__*/_interopNamespace(RadixScrollArea);
|
|
34
34
|
|
|
@@ -284,13 +284,13 @@ var DatePickerInput = ({
|
|
|
284
284
|
locale,
|
|
285
285
|
className
|
|
286
286
|
}) => {
|
|
287
|
-
const inputId =
|
|
287
|
+
const inputId = React6__namespace.useId();
|
|
288
288
|
const errorId = `${inputId}-error`;
|
|
289
|
-
const placeholder =
|
|
289
|
+
const placeholder = React6__namespace.useMemo(() => {
|
|
290
290
|
if (locale == null ? void 0 : locale.startsWith("vi")) return "DD/MM/YYYY";
|
|
291
291
|
return "MM/DD/YYYY";
|
|
292
292
|
}, [locale]);
|
|
293
|
-
const handleKeyDown =
|
|
293
|
+
const handleKeyDown = React6__namespace.useCallback(
|
|
294
294
|
(e) => {
|
|
295
295
|
if (e.key === "Enter") {
|
|
296
296
|
const parsed = parseDateInput(value);
|
|
@@ -299,11 +299,11 @@ var DatePickerInput = ({
|
|
|
299
299
|
},
|
|
300
300
|
[value, onCommit]
|
|
301
301
|
);
|
|
302
|
-
const handleBlur =
|
|
302
|
+
const handleBlur = React6__namespace.useCallback(() => {
|
|
303
303
|
const parsed = parseDateInput(value);
|
|
304
304
|
onCommit(parsed);
|
|
305
305
|
}, [value, onCommit]);
|
|
306
|
-
const handleChange =
|
|
306
|
+
const handleChange = React6__namespace.useCallback(
|
|
307
307
|
(e) => {
|
|
308
308
|
let raw = e.target.value.replace(/\D/g, "");
|
|
309
309
|
if (raw.length > 8) raw = raw.slice(0, 8);
|
|
@@ -397,11 +397,11 @@ var DayCell = ({
|
|
|
397
397
|
// Disabled
|
|
398
398
|
isDisabled && "opacity-[0.38]"
|
|
399
399
|
);
|
|
400
|
-
const handleClick =
|
|
400
|
+
const handleClick = React6__namespace.useCallback(() => {
|
|
401
401
|
if (isDisabled) return;
|
|
402
402
|
onSelect(utcMs);
|
|
403
403
|
}, [isDisabled, utcMs, onSelect]);
|
|
404
|
-
const handleKeyDown =
|
|
404
|
+
const handleKeyDown = React6__namespace.useCallback(
|
|
405
405
|
(e) => {
|
|
406
406
|
if (e.key === "Enter" || e.key === " ") {
|
|
407
407
|
e.preventDefault();
|
|
@@ -437,7 +437,7 @@ var DayCell = ({
|
|
|
437
437
|
};
|
|
438
438
|
DayCell.displayName = "DayCell";
|
|
439
439
|
var WeekdayRow = ({ locale }) => {
|
|
440
|
-
const names =
|
|
440
|
+
const names = React6__namespace.useMemo(() => getWeekdayNames(locale), [locale]);
|
|
441
441
|
return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "grid grid-cols-7 mb-1", children: names.map((name, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
442
442
|
"th",
|
|
443
443
|
{
|
|
@@ -464,7 +464,7 @@ var CalendarGrid = ({
|
|
|
464
464
|
const d = new Date(displayedMonthMs);
|
|
465
465
|
const year = d.getUTCFullYear();
|
|
466
466
|
const month = d.getUTCMonth();
|
|
467
|
-
const weeks =
|
|
467
|
+
const weeks = React6__namespace.useMemo(
|
|
468
468
|
() => getWeeksInMonth(year, month, locale.weekStartsOn),
|
|
469
469
|
[year, month, locale.weekStartsOn]
|
|
470
470
|
);
|
|
@@ -566,11 +566,11 @@ var ROTATE_KEY_SPLINES = [
|
|
|
566
566
|
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";
|
|
567
567
|
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";
|
|
568
568
|
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";
|
|
569
|
-
var IndeterminateSvg =
|
|
569
|
+
var IndeterminateSvg = React6__namespace.memo(function IndeterminateSvg2({
|
|
570
570
|
size
|
|
571
571
|
}) {
|
|
572
|
-
const [ready, setReady] =
|
|
573
|
-
|
|
572
|
+
const [ready, setReady] = React6__namespace.useState(false);
|
|
573
|
+
React6__namespace.useEffect(() => {
|
|
574
574
|
const raf = requestAnimationFrame(() => setReady(true));
|
|
575
575
|
return () => cancelAnimationFrame(raf);
|
|
576
576
|
}, []);
|
|
@@ -615,7 +615,7 @@ var IndeterminateSvg = React13__namespace.memo(function IndeterminateSvg2({
|
|
|
615
615
|
}
|
|
616
616
|
);
|
|
617
617
|
});
|
|
618
|
-
var DeterminateSvg =
|
|
618
|
+
var DeterminateSvg = React6__namespace.memo(function DeterminateSvg2({
|
|
619
619
|
size,
|
|
620
620
|
progress
|
|
621
621
|
}) {
|
|
@@ -640,7 +640,7 @@ var DeterminateSvg = React13__namespace.memo(function DeterminateSvg2({
|
|
|
640
640
|
}
|
|
641
641
|
);
|
|
642
642
|
});
|
|
643
|
-
var LoadingIndicator =
|
|
643
|
+
var LoadingIndicator = React6__namespace.forwardRef(
|
|
644
644
|
(_a, ref) => {
|
|
645
645
|
var _b = _a, {
|
|
646
646
|
variant = "uncontained",
|
|
@@ -735,27 +735,47 @@ function generateWavyCircularPath(center, radius, amplitude, wavelength) {
|
|
|
735
735
|
if (i === 0) d += `M ${xAt(t0).toFixed(2)} ${yAt(t0).toFixed(2)}`;
|
|
736
736
|
d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${xAt(t1).toFixed(2)} ${yAt(t1).toFixed(2)}`;
|
|
737
737
|
}
|
|
738
|
-
d
|
|
739
|
-
return d;
|
|
738
|
+
return `${d} Z`;
|
|
740
739
|
}
|
|
741
740
|
function getSinePath(startX, endX, phase, wl, amp) {
|
|
742
741
|
if (startX >= endX) return "";
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
742
|
+
if (amp <= 0.01) {
|
|
743
|
+
return `M ${startX.toFixed(2)} 0 L ${endX.toFixed(2)} 0`;
|
|
744
|
+
}
|
|
745
|
+
const safeWl = Math.max(1, wl);
|
|
746
|
+
const k = 2 * Math.PI / safeWl;
|
|
747
|
+
const phi = phase / safeWl * 2 * Math.PI;
|
|
748
|
+
const yAt = (x) => amp * Math.sin(k * x + phi);
|
|
749
|
+
const dyAt = (x) => amp * k * Math.cos(k * x + phi);
|
|
750
|
+
const step = safeWl / 4;
|
|
751
|
+
let d = `M ${startX.toFixed(2)} ${yAt(startX).toFixed(2)}`;
|
|
752
|
+
let currentX = startX;
|
|
753
|
+
while (currentX < endX) {
|
|
754
|
+
const nextX = Math.min(endX, currentX + step);
|
|
755
|
+
const dx = nextX - currentX;
|
|
756
|
+
const scale = dx / 3;
|
|
757
|
+
const y0 = yAt(currentX);
|
|
758
|
+
const dy0 = dyAt(currentX);
|
|
759
|
+
const y1 = yAt(nextX);
|
|
760
|
+
const dy1 = dyAt(nextX);
|
|
761
|
+
const cp1x = currentX + scale;
|
|
762
|
+
const cp1y = y0 + scale * dy0;
|
|
763
|
+
const cp2x = nextX - scale;
|
|
764
|
+
const cp2y = y1 - scale * dy1;
|
|
765
|
+
d += ` C ${cp1x.toFixed(2)} ${cp1y.toFixed(2)}, ${cp2x.toFixed(2)} ${cp2y.toFixed(2)}, ${nextX.toFixed(2)} ${y1.toFixed(2)}`;
|
|
766
|
+
currentX = nextX;
|
|
753
767
|
}
|
|
754
|
-
const yEnd = Math.sin((endX + phase) / wl * 2 * Math.PI) * amp;
|
|
755
|
-
d += ` L ${endX.toFixed(2)} ${yEnd.toFixed(2)}`;
|
|
756
768
|
return d;
|
|
757
769
|
}
|
|
758
|
-
var
|
|
770
|
+
var GLOBAL_ROTATION_DURATION = 6e3;
|
|
771
|
+
var GLOBAL_ROTATION_TARGET = 1080;
|
|
772
|
+
var ADDITIONAL_ROTATION_CYCLE = 1500;
|
|
773
|
+
var ADDITIONAL_ROTATION_STEP = 90;
|
|
774
|
+
var ADDITIONAL_ROTATION_EASE_DURATION = 500;
|
|
775
|
+
var DEFAULT_MIN_PROGRESS = 0.1;
|
|
776
|
+
var DEFAULT_MAX_PROGRESS = 0.8;
|
|
777
|
+
var PROGRESS_CYCLE_DURATION = 1500;
|
|
778
|
+
var CircularProgress = React6__namespace.forwardRef(
|
|
759
779
|
(_a, ref) => {
|
|
760
780
|
var _b = _a, {
|
|
761
781
|
value,
|
|
@@ -768,6 +788,10 @@ var CircularProgress = React13__namespace.forwardRef(
|
|
|
768
788
|
crawlerSpeed = 1,
|
|
769
789
|
color,
|
|
770
790
|
trackColor,
|
|
791
|
+
showTrack = "auto",
|
|
792
|
+
minProgress = DEFAULT_MIN_PROGRESS,
|
|
793
|
+
maxProgress = DEFAULT_MAX_PROGRESS,
|
|
794
|
+
amplitudeRange,
|
|
771
795
|
className,
|
|
772
796
|
"aria-label": ariaLabel
|
|
773
797
|
} = _b, restProps = __objRest(_b, [
|
|
@@ -781,6 +805,10 @@ var CircularProgress = React13__namespace.forwardRef(
|
|
|
781
805
|
"crawlerSpeed",
|
|
782
806
|
"color",
|
|
783
807
|
"trackColor",
|
|
808
|
+
"showTrack",
|
|
809
|
+
"minProgress",
|
|
810
|
+
"maxProgress",
|
|
811
|
+
"amplitudeRange",
|
|
784
812
|
"className",
|
|
785
813
|
"aria-label"
|
|
786
814
|
]);
|
|
@@ -791,17 +819,22 @@ var CircularProgress = React13__namespace.forwardRef(
|
|
|
791
819
|
const activeColor = color || "var(--md-sys-color-indicator-active)";
|
|
792
820
|
const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
|
|
793
821
|
const isWavy = shape === "wavy";
|
|
822
|
+
const shouldShowIndeterminateTrack = showTrack === "auto" ? isWavy : showTrack;
|
|
794
823
|
const BASELINE_SIZE = 48;
|
|
795
824
|
const scaleFactor = size / BASELINE_SIZE;
|
|
796
|
-
const effectiveAmplitude =
|
|
825
|
+
const effectiveAmplitude = React6__namespace.useMemo(
|
|
797
826
|
() => amplitude != null ? amplitude : 1.6 * scaleFactor,
|
|
798
827
|
[amplitude, scaleFactor]
|
|
799
828
|
);
|
|
800
|
-
const effectiveWavelength =
|
|
829
|
+
const effectiveWavelength = React6__namespace.useMemo(
|
|
801
830
|
() => wavelength != null ? wavelength : 15 * scaleFactor,
|
|
802
831
|
[wavelength, scaleFactor]
|
|
803
832
|
);
|
|
804
|
-
const
|
|
833
|
+
const resolvedAmplitudeRange = React6__namespace.useMemo(
|
|
834
|
+
() => amplitudeRange != null ? amplitudeRange : [0, effectiveAmplitude],
|
|
835
|
+
[amplitudeRange, effectiveAmplitude]
|
|
836
|
+
);
|
|
837
|
+
const wavyActivePath = React6__namespace.useMemo(
|
|
805
838
|
() => isWavy ? generateWavyCircularPath(
|
|
806
839
|
center,
|
|
807
840
|
radius,
|
|
@@ -810,8 +843,8 @@ var CircularProgress = React13__namespace.forwardRef(
|
|
|
810
843
|
) : null,
|
|
811
844
|
[isWavy, center, radius, effectiveAmplitude, effectiveWavelength]
|
|
812
845
|
);
|
|
813
|
-
const circumference =
|
|
814
|
-
const gapForTrack =
|
|
846
|
+
const circumference = React6__namespace.useMemo(() => 2 * Math.PI * radius, [radius]);
|
|
847
|
+
const gapForTrack = React6__namespace.useMemo(
|
|
815
848
|
() => (gapSize + trackHeight) / circumference,
|
|
816
849
|
[gapSize, trackHeight, circumference]
|
|
817
850
|
);
|
|
@@ -820,6 +853,145 @@ var CircularProgress = React13__namespace.forwardRef(
|
|
|
820
853
|
const trackLength = isDeterminate ? Math.max(1e-3, 1 - activeAngularFraction - 2 * gapForTrack) : 1;
|
|
821
854
|
const ActiveCircleElem = react.m.circle;
|
|
822
855
|
const ActivePathElem = react.m.path;
|
|
856
|
+
const indeterminateSvgRef = React6__namespace.useRef(null);
|
|
857
|
+
const indeterminateTrackRef = React6__namespace.useRef(null);
|
|
858
|
+
const indeterminateActiveRef = React6__namespace.useRef(null);
|
|
859
|
+
const indeterminateWavyTrackPathRef = React6__namespace.useRef(null);
|
|
860
|
+
const indeterminateWavyActivePathRef = React6__namespace.useRef(null);
|
|
861
|
+
const cachedPathLengthRef = React6__namespace.useRef(0);
|
|
862
|
+
React6__namespace.useLayoutEffect(() => {
|
|
863
|
+
if (!isWavy || !wavyActivePath) {
|
|
864
|
+
cachedPathLengthRef.current = circumference;
|
|
865
|
+
return;
|
|
866
|
+
}
|
|
867
|
+
const el = indeterminateActiveRef.current;
|
|
868
|
+
if (el && "getTotalLength" in el) {
|
|
869
|
+
try {
|
|
870
|
+
const len = el.getTotalLength();
|
|
871
|
+
if (len > 0) {
|
|
872
|
+
cachedPathLengthRef.current = len;
|
|
873
|
+
return;
|
|
874
|
+
}
|
|
875
|
+
} catch (e) {
|
|
876
|
+
}
|
|
877
|
+
}
|
|
878
|
+
cachedPathLengthRef.current = circumference;
|
|
879
|
+
}, [isWavy, circumference, wavyActivePath]);
|
|
880
|
+
react.useAnimationFrame((time) => {
|
|
881
|
+
if (isDeterminate) return;
|
|
882
|
+
const safeCrawlerSpeed = Math.max(0.1, crawlerSpeed);
|
|
883
|
+
const scaledTime = time * safeCrawlerSpeed;
|
|
884
|
+
const globalCycle = scaledTime % GLOBAL_ROTATION_DURATION;
|
|
885
|
+
const globalAngle = globalCycle / GLOBAL_ROTATION_DURATION * GLOBAL_ROTATION_TARGET;
|
|
886
|
+
const additionalFullCycles = Math.floor(
|
|
887
|
+
scaledTime / ADDITIONAL_ROTATION_CYCLE
|
|
888
|
+
);
|
|
889
|
+
const additionalCycleTime = scaledTime % ADDITIONAL_ROTATION_CYCLE;
|
|
890
|
+
const additionalEaseT = Math.min(
|
|
891
|
+
1,
|
|
892
|
+
additionalCycleTime / ADDITIONAL_ROTATION_EASE_DURATION
|
|
893
|
+
);
|
|
894
|
+
const additionalAngle = (additionalFullCycles + easeInOutCubic(additionalEaseT)) * ADDITIONAL_ROTATION_STEP;
|
|
895
|
+
const totalRotation = globalAngle + additionalAngle;
|
|
896
|
+
if (indeterminateSvgRef.current) {
|
|
897
|
+
indeterminateSvgRef.current.style.transform = `rotate(${totalRotation - 90}deg)`;
|
|
898
|
+
}
|
|
899
|
+
const progressFullCycle = PROGRESS_CYCLE_DURATION * 2;
|
|
900
|
+
const progressCycleTime = scaledTime % progressFullCycle;
|
|
901
|
+
let progress;
|
|
902
|
+
if (progressCycleTime < PROGRESS_CYCLE_DURATION) {
|
|
903
|
+
const t = progressCycleTime / PROGRESS_CYCLE_DURATION;
|
|
904
|
+
progress = minProgress + (maxProgress - minProgress) * easeInOutCubic(t);
|
|
905
|
+
} else {
|
|
906
|
+
const t = (progressCycleTime - PROGRESS_CYCLE_DURATION) / PROGRESS_CYCLE_DURATION;
|
|
907
|
+
progress = maxProgress - (maxProgress - minProgress) * easeInOutCubic(t);
|
|
908
|
+
}
|
|
909
|
+
if (isWavy) {
|
|
910
|
+
const amplitudeT = (progress - minProgress) / (maxProgress - minProgress);
|
|
911
|
+
const currentAmplitude = resolvedAmplitudeRange[0] + (resolvedAmplitudeRange[1] - resolvedAmplitudeRange[0]) * amplitudeT;
|
|
912
|
+
const dynamicPath = generateWavyCircularPath(
|
|
913
|
+
center,
|
|
914
|
+
radius,
|
|
915
|
+
currentAmplitude,
|
|
916
|
+
effectiveWavelength
|
|
917
|
+
);
|
|
918
|
+
if (indeterminateWavyActivePathRef.current) {
|
|
919
|
+
indeterminateWavyActivePathRef.current.setAttribute("d", dynamicPath);
|
|
920
|
+
}
|
|
921
|
+
if (indeterminateWavyTrackPathRef.current) {
|
|
922
|
+
indeterminateWavyTrackPathRef.current.setAttribute("d", dynamicPath);
|
|
923
|
+
}
|
|
924
|
+
const pathEl = indeterminateWavyActivePathRef.current;
|
|
925
|
+
let totalLen = cachedPathLengthRef.current || circumference;
|
|
926
|
+
if (pathEl) {
|
|
927
|
+
try {
|
|
928
|
+
const len = pathEl.getTotalLength();
|
|
929
|
+
if (len > 0) totalLen = len;
|
|
930
|
+
} catch (e) {
|
|
931
|
+
}
|
|
932
|
+
}
|
|
933
|
+
const gapFrac = (gapSize + trackHeight) / totalLen;
|
|
934
|
+
const activeLen = totalLen * progress;
|
|
935
|
+
const activeOff = 0;
|
|
936
|
+
if (indeterminateWavyActivePathRef.current) {
|
|
937
|
+
indeterminateWavyActivePathRef.current.setAttribute(
|
|
938
|
+
"stroke-dasharray",
|
|
939
|
+
`${activeLen} ${totalLen}`
|
|
940
|
+
);
|
|
941
|
+
indeterminateWavyActivePathRef.current.setAttribute(
|
|
942
|
+
"stroke-dashoffset",
|
|
943
|
+
`${activeOff}`
|
|
944
|
+
);
|
|
945
|
+
}
|
|
946
|
+
if (shouldShowIndeterminateTrack && indeterminateWavyTrackPathRef.current) {
|
|
947
|
+
const trackStartFrac = progress + gapFrac;
|
|
948
|
+
const trackLen = Math.max(
|
|
949
|
+
1e-3,
|
|
950
|
+
totalLen * (1 - progress - 2 * gapFrac)
|
|
951
|
+
);
|
|
952
|
+
const trackOff = -totalLen * trackStartFrac;
|
|
953
|
+
indeterminateWavyTrackPathRef.current.setAttribute(
|
|
954
|
+
"stroke-dasharray",
|
|
955
|
+
`${trackLen} ${totalLen}`
|
|
956
|
+
);
|
|
957
|
+
indeterminateWavyTrackPathRef.current.setAttribute(
|
|
958
|
+
"stroke-dashoffset",
|
|
959
|
+
`${trackOff}`
|
|
960
|
+
);
|
|
961
|
+
}
|
|
962
|
+
} else {
|
|
963
|
+
const totalLen = circumference;
|
|
964
|
+
const activeLen = totalLen * progress;
|
|
965
|
+
const activeOff = 0;
|
|
966
|
+
if (indeterminateActiveRef.current) {
|
|
967
|
+
indeterminateActiveRef.current.setAttribute(
|
|
968
|
+
"stroke-dasharray",
|
|
969
|
+
`${activeLen} ${totalLen}`
|
|
970
|
+
);
|
|
971
|
+
indeterminateActiveRef.current.setAttribute(
|
|
972
|
+
"stroke-dashoffset",
|
|
973
|
+
`${activeOff}`
|
|
974
|
+
);
|
|
975
|
+
}
|
|
976
|
+
if (shouldShowIndeterminateTrack && indeterminateTrackRef.current) {
|
|
977
|
+
const gapFrac = (gapSize + trackHeight) / totalLen;
|
|
978
|
+
const trackStartFrac = progress + gapFrac;
|
|
979
|
+
const trackLen = Math.max(
|
|
980
|
+
1e-3,
|
|
981
|
+
totalLen * (1 - progress - 2 * gapFrac)
|
|
982
|
+
);
|
|
983
|
+
const trackOff = -totalLen * trackStartFrac;
|
|
984
|
+
indeterminateTrackRef.current.setAttribute(
|
|
985
|
+
"stroke-dasharray",
|
|
986
|
+
`${trackLen} ${totalLen}`
|
|
987
|
+
);
|
|
988
|
+
indeterminateTrackRef.current.setAttribute(
|
|
989
|
+
"stroke-dashoffset",
|
|
990
|
+
`${trackOff}`
|
|
991
|
+
);
|
|
992
|
+
}
|
|
993
|
+
}
|
|
994
|
+
});
|
|
823
995
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
824
996
|
"div",
|
|
825
997
|
__spreadProps(__spreadValues({
|
|
@@ -896,9 +1068,10 @@ var CircularProgress = React13__namespace.forwardRef(
|
|
|
896
1068
|
]
|
|
897
1069
|
}
|
|
898
1070
|
),
|
|
899
|
-
!isDeterminate && /* @__PURE__ */ jsxRuntime.
|
|
900
|
-
|
|
1071
|
+
!isDeterminate && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1072
|
+
"svg",
|
|
901
1073
|
{
|
|
1074
|
+
ref: indeterminateSvgRef,
|
|
902
1075
|
width: size,
|
|
903
1076
|
height: size,
|
|
904
1077
|
viewBox: `0 0 ${size} ${size}`,
|
|
@@ -907,90 +1080,60 @@ var CircularProgress = React13__namespace.forwardRef(
|
|
|
907
1080
|
position: "absolute",
|
|
908
1081
|
inset: 0,
|
|
909
1082
|
overflow: "visible",
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
},
|
|
913
|
-
animate: { rotate: ["-90deg", "270deg"] },
|
|
914
|
-
transition: {
|
|
915
|
-
rotate: {
|
|
916
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
917
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
918
|
-
ease: "linear"
|
|
919
|
-
}
|
|
1083
|
+
transformOrigin: "center",
|
|
1084
|
+
transform: "rotate(-90deg)"
|
|
920
1085
|
},
|
|
921
|
-
children: [
|
|
922
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
923
|
-
|
|
1086
|
+
children: isWavy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1087
|
+
shouldShowIndeterminateTrack && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1088
|
+
"path",
|
|
924
1089
|
{
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
r: radius,
|
|
1090
|
+
ref: indeterminateWavyTrackPathRef,
|
|
1091
|
+
d: wavyActivePath != null ? wavyActivePath : "",
|
|
928
1092
|
fill: "none",
|
|
929
1093
|
stroke: bgTrackColor,
|
|
930
1094
|
strokeWidth: trackHeight,
|
|
931
|
-
strokeLinecap: "round"
|
|
932
|
-
style: { originX: "50%", originY: "50%" },
|
|
933
|
-
animate: {
|
|
934
|
-
pathLength: [
|
|
935
|
-
Math.max(1e-3, 1 - 0.1 - 2 * gapForTrack),
|
|
936
|
-
Math.max(1e-3, 1 - 0.75 - 2 * gapForTrack),
|
|
937
|
-
Math.max(1e-3, 1 - 0.1 - 2 * gapForTrack)
|
|
938
|
-
],
|
|
939
|
-
rotate: [
|
|
940
|
-
`${(0.1 + gapForTrack) * 360}deg`,
|
|
941
|
-
`${(1 + gapForTrack) * 360}deg`,
|
|
942
|
-
`${(1.1 + gapForTrack) * 360}deg`
|
|
943
|
-
]
|
|
944
|
-
},
|
|
945
|
-
transition: {
|
|
946
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
947
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
948
|
-
ease: [0.4, 0, 0.2, 1]
|
|
949
|
-
}
|
|
1095
|
+
strokeLinecap: "round"
|
|
950
1096
|
}
|
|
951
1097
|
),
|
|
952
|
-
|
|
953
|
-
|
|
1098
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1099
|
+
"path",
|
|
954
1100
|
{
|
|
1101
|
+
ref: indeterminateWavyActivePathRef,
|
|
955
1102
|
d: wavyActivePath != null ? wavyActivePath : "",
|
|
956
1103
|
fill: "none",
|
|
957
1104
|
stroke: activeColor,
|
|
958
1105
|
strokeWidth: trackHeight,
|
|
959
|
-
strokeLinecap: "round"
|
|
960
|
-
style: { originX: "50%", originY: "50%" },
|
|
961
|
-
animate: {
|
|
962
|
-
pathLength: [0.1, 0.75, 0.1],
|
|
963
|
-
rotate: ["0deg", "90deg", "360deg"]
|
|
964
|
-
},
|
|
965
|
-
transition: {
|
|
966
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
967
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
968
|
-
ease: [0.4, 0, 0.2, 1]
|
|
969
|
-
}
|
|
1106
|
+
strokeLinecap: "round"
|
|
970
1107
|
}
|
|
971
|
-
)
|
|
972
|
-
|
|
1108
|
+
)
|
|
1109
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1110
|
+
shouldShowIndeterminateTrack && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1111
|
+
"circle",
|
|
1112
|
+
{
|
|
1113
|
+
ref: indeterminateTrackRef,
|
|
1114
|
+
cx: center,
|
|
1115
|
+
cy: center,
|
|
1116
|
+
r: radius,
|
|
1117
|
+
fill: "none",
|
|
1118
|
+
stroke: bgTrackColor,
|
|
1119
|
+
strokeWidth: trackHeight,
|
|
1120
|
+
strokeLinecap: "round"
|
|
1121
|
+
}
|
|
1122
|
+
),
|
|
1123
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1124
|
+
"circle",
|
|
973
1125
|
{
|
|
1126
|
+
ref: indeterminateActiveRef,
|
|
974
1127
|
cx: center,
|
|
975
1128
|
cy: center,
|
|
976
1129
|
r: radius,
|
|
977
1130
|
fill: "none",
|
|
978
1131
|
stroke: activeColor,
|
|
979
1132
|
strokeWidth: trackHeight,
|
|
980
|
-
strokeLinecap: "round"
|
|
981
|
-
style: { originX: "50%", originY: "50%" },
|
|
982
|
-
animate: {
|
|
983
|
-
pathLength: [0.1, 0.75, 0.1],
|
|
984
|
-
rotate: ["0deg", "90deg", "360deg"]
|
|
985
|
-
},
|
|
986
|
-
transition: {
|
|
987
|
-
duration: 2 / Math.max(0.1, crawlerSpeed),
|
|
988
|
-
repeat: Number.POSITIVE_INFINITY,
|
|
989
|
-
ease: [0.4, 0, 0.2, 1]
|
|
990
|
-
}
|
|
1133
|
+
strokeLinecap: "round"
|
|
991
1134
|
}
|
|
992
1135
|
)
|
|
993
|
-
]
|
|
1136
|
+
] })
|
|
994
1137
|
}
|
|
995
1138
|
)
|
|
996
1139
|
] })
|
|
@@ -1000,9 +1143,9 @@ var CircularProgress = React13__namespace.forwardRef(
|
|
|
1000
1143
|
);
|
|
1001
1144
|
CircularProgress.displayName = "CircularProgress";
|
|
1002
1145
|
function useContainerWidth() {
|
|
1003
|
-
const [width, setWidth] =
|
|
1004
|
-
const observerRef =
|
|
1005
|
-
const ref =
|
|
1146
|
+
const [width, setWidth] = React6__namespace.useState(0);
|
|
1147
|
+
const observerRef = React6__namespace.useRef(null);
|
|
1148
|
+
const ref = React6__namespace.useCallback((node) => {
|
|
1006
1149
|
if (observerRef.current) {
|
|
1007
1150
|
observerRef.current.disconnect();
|
|
1008
1151
|
observerRef.current = null;
|
|
@@ -1016,7 +1159,7 @@ function useContainerWidth() {
|
|
|
1016
1159
|
observerRef.current = obs;
|
|
1017
1160
|
}
|
|
1018
1161
|
}, []);
|
|
1019
|
-
|
|
1162
|
+
React6__namespace.useEffect(() => {
|
|
1020
1163
|
return () => {
|
|
1021
1164
|
if (observerRef.current) {
|
|
1022
1165
|
observerRef.current.disconnect();
|
|
@@ -1026,7 +1169,7 @@ function useContainerWidth() {
|
|
|
1026
1169
|
return [ref, width];
|
|
1027
1170
|
}
|
|
1028
1171
|
function useMergedRef(...refs) {
|
|
1029
|
-
return
|
|
1172
|
+
return React6__namespace.useCallback(
|
|
1030
1173
|
(node) => {
|
|
1031
1174
|
for (const ref of refs) {
|
|
1032
1175
|
if (typeof ref === "function") {
|
|
@@ -1040,7 +1183,7 @@ function useMergedRef(...refs) {
|
|
|
1040
1183
|
[refs]
|
|
1041
1184
|
);
|
|
1042
1185
|
}
|
|
1043
|
-
var FlatLinearTrack =
|
|
1186
|
+
var FlatLinearTrack = React6__namespace.memo(function FlatLinearTrack2({
|
|
1044
1187
|
trackHeight,
|
|
1045
1188
|
activeColor,
|
|
1046
1189
|
trackColor,
|
|
@@ -1116,7 +1259,7 @@ var FlatLinearTrack = React13__namespace.memo(function FlatLinearTrack2({
|
|
|
1116
1259
|
}
|
|
1117
1260
|
);
|
|
1118
1261
|
});
|
|
1119
|
-
var WavyLinearTrack =
|
|
1262
|
+
var WavyLinearTrack = React6__namespace.memo(function WavyLinearTrack2({
|
|
1120
1263
|
trackHeight,
|
|
1121
1264
|
svgHeight,
|
|
1122
1265
|
amplitude,
|
|
@@ -1135,13 +1278,13 @@ var WavyLinearTrack = React13__namespace.memo(function WavyLinearTrack2({
|
|
|
1135
1278
|
}) {
|
|
1136
1279
|
const isDeterminate = typeof value === "number";
|
|
1137
1280
|
const clampedValue = isDeterminate ? Math.max(0, Math.min(100, value)) : 100;
|
|
1138
|
-
const titleId =
|
|
1281
|
+
const titleId = React6__namespace.useId();
|
|
1139
1282
|
const [containerRef, width] = useContainerWidth();
|
|
1140
|
-
const activePathRef =
|
|
1141
|
-
const trackPathRef =
|
|
1283
|
+
const activePathRef = React6__namespace.useRef(null);
|
|
1284
|
+
const trackPathRef = React6__namespace.useRef(null);
|
|
1142
1285
|
const amplitudeMV = react.useMotionValue(amplitude);
|
|
1143
1286
|
const fractionMV = react.useMotionValue(isDeterminate ? clampedValue / 100 : 1);
|
|
1144
|
-
|
|
1287
|
+
React6__namespace.useEffect(() => {
|
|
1145
1288
|
if (isDeterminate) {
|
|
1146
1289
|
const fraction = clampedValue / 100;
|
|
1147
1290
|
let targetAmp = amplitude;
|
|
@@ -1154,6 +1297,12 @@ var WavyLinearTrack = React13__namespace.memo(function WavyLinearTrack2({
|
|
|
1154
1297
|
duration: 0.5
|
|
1155
1298
|
});
|
|
1156
1299
|
react.animate(fractionMV, fraction, { duration: 0.4, ease: [0.2, 0, 0, 1] });
|
|
1300
|
+
} else {
|
|
1301
|
+
react.animate(amplitudeMV, amplitude, {
|
|
1302
|
+
type: "spring",
|
|
1303
|
+
bounce: 0,
|
|
1304
|
+
duration: 0.5
|
|
1305
|
+
});
|
|
1157
1306
|
}
|
|
1158
1307
|
}, [
|
|
1159
1308
|
clampedValue,
|
|
@@ -1167,10 +1316,10 @@ var WavyLinearTrack = React13__namespace.memo(function WavyLinearTrack2({
|
|
|
1167
1316
|
1,
|
|
1168
1317
|
isDeterminate ? wavelength : indeterminateWavelength
|
|
1169
1318
|
);
|
|
1170
|
-
const trackAmp = trackShape === "wavy" ? amplitude : 0;
|
|
1171
1319
|
react.useAnimationFrame((time) => {
|
|
1172
1320
|
if (width === 0) return;
|
|
1173
1321
|
const currentAmp = amplitudeMV.get();
|
|
1322
|
+
const trackAmp = trackShape === "wavy" ? amplitude : 0;
|
|
1174
1323
|
const phase = time / 1e3 * waveSpeed * activeWavelength;
|
|
1175
1324
|
const capWidth = trackHeight / 2;
|
|
1176
1325
|
let activePathD = "";
|
|
@@ -1190,7 +1339,7 @@ var WavyLinearTrack = React13__namespace.memo(function WavyLinearTrack2({
|
|
|
1190
1339
|
currentAmp
|
|
1191
1340
|
);
|
|
1192
1341
|
} else if (fraction === 0) {
|
|
1193
|
-
activePathD =
|
|
1342
|
+
activePathD = "";
|
|
1194
1343
|
}
|
|
1195
1344
|
const trackStart = adjHead + totalGap;
|
|
1196
1345
|
if (trackStart < width - capWidth) {
|
|
@@ -1222,20 +1371,20 @@ var WavyLinearTrack = React13__namespace.memo(function WavyLinearTrack2({
|
|
|
1222
1371
|
activeLines.push({ tail: l1T, head: l1H });
|
|
1223
1372
|
activeLines.push({ tail: l2T, head: l2H });
|
|
1224
1373
|
}
|
|
1225
|
-
const
|
|
1226
|
-
const
|
|
1227
|
-
const
|
|
1374
|
+
const activeSegments = activeLines.map((line) => {
|
|
1375
|
+
const rawTail = line.tail * width;
|
|
1376
|
+
const rawHead = line.head * width;
|
|
1228
1377
|
const adjTail = Math.max(
|
|
1229
1378
|
capWidth,
|
|
1230
|
-
Math.min(width - capWidth,
|
|
1379
|
+
Math.min(width - capWidth, rawTail)
|
|
1231
1380
|
);
|
|
1232
1381
|
const adjHead = Math.max(
|
|
1233
1382
|
capWidth,
|
|
1234
|
-
Math.min(width - capWidth,
|
|
1383
|
+
Math.min(width - capWidth, rawHead)
|
|
1235
1384
|
);
|
|
1236
1385
|
return { adjTail, adjHead };
|
|
1237
1386
|
}).filter((seg) => seg.adjHead - seg.adjTail > 0.1);
|
|
1238
|
-
activePathD =
|
|
1387
|
+
activePathD = activeSegments.map(
|
|
1239
1388
|
(seg) => getSinePath(
|
|
1240
1389
|
seg.adjTail,
|
|
1241
1390
|
seg.adjHead,
|
|
@@ -1244,13 +1393,24 @@ var WavyLinearTrack = React13__namespace.memo(function WavyLinearTrack2({
|
|
|
1244
1393
|
currentAmp
|
|
1245
1394
|
)
|
|
1246
1395
|
).join(" ");
|
|
1396
|
+
const validActiveLines = activeLines.filter(
|
|
1397
|
+
(line) => line.head > line.tail && line.head * width > 0 && line.tail * width < width
|
|
1398
|
+
).sort((a, b) => a.tail - b.tail);
|
|
1247
1399
|
let currentTrackX = capWidth;
|
|
1248
|
-
for (const
|
|
1249
|
-
const
|
|
1400
|
+
for (const line of validActiveLines) {
|
|
1401
|
+
const blockStart = line.tail * width - totalGap;
|
|
1402
|
+
const blockEnd = line.head * width + totalGap;
|
|
1403
|
+
const trackEnd = Math.min(width - capWidth, blockStart);
|
|
1250
1404
|
if (trackEnd > currentTrackX) {
|
|
1251
|
-
trackD += `${getSinePath(
|
|
1405
|
+
trackD += `${getSinePath(
|
|
1406
|
+
currentTrackX,
|
|
1407
|
+
trackEnd,
|
|
1408
|
+
phase,
|
|
1409
|
+
activeWavelength,
|
|
1410
|
+
trackAmp
|
|
1411
|
+
)} `;
|
|
1252
1412
|
}
|
|
1253
|
-
currentTrackX = Math.max(currentTrackX,
|
|
1413
|
+
currentTrackX = Math.max(currentTrackX, blockEnd);
|
|
1254
1414
|
}
|
|
1255
1415
|
if (currentTrackX < width - capWidth) {
|
|
1256
1416
|
trackD += getSinePath(
|
|
@@ -1263,15 +1423,15 @@ var WavyLinearTrack = React13__namespace.memo(function WavyLinearTrack2({
|
|
|
1263
1423
|
}
|
|
1264
1424
|
}
|
|
1265
1425
|
if (activePathRef.current)
|
|
1266
|
-
activePathRef.current.setAttribute("d", activePathD);
|
|
1426
|
+
activePathRef.current.setAttribute("d", activePathD || "");
|
|
1267
1427
|
if (trackPathRef.current)
|
|
1268
|
-
trackPathRef.current.setAttribute("d", trackD.trim());
|
|
1428
|
+
trackPathRef.current.setAttribute("d", trackD.trim() || "");
|
|
1269
1429
|
});
|
|
1270
1430
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1271
1431
|
"div",
|
|
1272
1432
|
{
|
|
1273
1433
|
ref: containerRef,
|
|
1274
|
-
className: "relative w-full
|
|
1434
|
+
className: "relative w-full",
|
|
1275
1435
|
style: { height: svgHeight },
|
|
1276
1436
|
children: width > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1277
1437
|
"svg",
|
|
@@ -1312,7 +1472,7 @@ var WavyLinearTrack = React13__namespace.memo(function WavyLinearTrack2({
|
|
|
1312
1472
|
}
|
|
1313
1473
|
);
|
|
1314
1474
|
});
|
|
1315
|
-
var LinearProgress =
|
|
1475
|
+
var LinearProgress = React6__namespace.forwardRef(
|
|
1316
1476
|
(_a, ref) => {
|
|
1317
1477
|
var _b = _a, {
|
|
1318
1478
|
value,
|
|
@@ -1325,7 +1485,7 @@ var LinearProgress = React13__namespace.forwardRef(
|
|
|
1325
1485
|
waveSpeed = 1,
|
|
1326
1486
|
crawlerSpeed = 1,
|
|
1327
1487
|
determinateAnimation = "md3",
|
|
1328
|
-
indeterminateAnimation = "
|
|
1488
|
+
indeterminateAnimation = "md3",
|
|
1329
1489
|
gapSize = 4,
|
|
1330
1490
|
showStopIndicator = "auto",
|
|
1331
1491
|
color,
|
|
@@ -1353,33 +1513,35 @@ var LinearProgress = React13__namespace.forwardRef(
|
|
|
1353
1513
|
]);
|
|
1354
1514
|
const isDeterminate = value !== void 0;
|
|
1355
1515
|
const clampedValue = isDeterminate ? Math.min(100, Math.max(0, value)) : 0;
|
|
1356
|
-
const containerRef =
|
|
1516
|
+
const containerRef = React6__namespace.useRef(null);
|
|
1357
1517
|
const mergedRef = useMergedRef(ref, containerRef);
|
|
1358
|
-
const [isRtl, setIsRtl] =
|
|
1359
|
-
|
|
1518
|
+
const [isRtl, setIsRtl] = React6__namespace.useState(false);
|
|
1519
|
+
React6__namespace.useEffect(() => {
|
|
1360
1520
|
if (containerRef.current) {
|
|
1361
1521
|
const dir = getComputedStyle(containerRef.current).direction;
|
|
1362
1522
|
setIsRtl(dir === "rtl");
|
|
1363
1523
|
}
|
|
1364
1524
|
}, []);
|
|
1365
|
-
const isWavy = shape === "wavy";
|
|
1366
1525
|
const resolvedTrackShape = trackShape != null ? trackShape : shape;
|
|
1367
|
-
const
|
|
1368
|
-
const
|
|
1526
|
+
const isWavy = shape === "wavy" || resolvedTrackShape === "wavy";
|
|
1527
|
+
const effectiveAmplitude = React6__namespace.useMemo(() => amplitude != null ? amplitude : 3, [amplitude]);
|
|
1528
|
+
const svgHeight = React6__namespace.useMemo(
|
|
1369
1529
|
() => isWavy ? trackHeight + effectiveAmplitude * 2 : trackHeight,
|
|
1370
1530
|
[isWavy, trackHeight, effectiveAmplitude]
|
|
1371
1531
|
);
|
|
1372
|
-
const shouldShowStop =
|
|
1373
|
-
() => isDeterminate && resolvedTrackShape === "flat" &&
|
|
1532
|
+
const shouldShowStop = React6__namespace.useMemo(
|
|
1533
|
+
() => isDeterminate && resolvedTrackShape === "flat" && showStopIndicator !== false,
|
|
1374
1534
|
[isDeterminate, resolvedTrackShape, showStopIndicator]
|
|
1375
1535
|
);
|
|
1376
|
-
const stopSize =
|
|
1536
|
+
const stopSize = React6__namespace.useMemo(
|
|
1377
1537
|
() => Math.max(2, trackHeight > 4 ? 4 : trackHeight / 2),
|
|
1378
1538
|
[trackHeight]
|
|
1379
1539
|
);
|
|
1380
1540
|
const stopOffset = (trackHeight - stopSize) / 2;
|
|
1381
1541
|
const activeColor = color || "var(--md-sys-color-indicator-active)";
|
|
1382
1542
|
const bgTrackColor = trackColor || "var(--md-sys-color-indicator-track)";
|
|
1543
|
+
const useWavyTrack = isWavy || !isDeterminate;
|
|
1544
|
+
const trackAmp = isWavy ? effectiveAmplitude : 0;
|
|
1383
1545
|
return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1384
1546
|
"div",
|
|
1385
1547
|
__spreadProps(__spreadValues({
|
|
@@ -1396,12 +1558,12 @@ var LinearProgress = React13__namespace.forwardRef(
|
|
|
1396
1558
|
style: { height: svgHeight }
|
|
1397
1559
|
}, restProps), {
|
|
1398
1560
|
children: [
|
|
1399
|
-
|
|
1561
|
+
useWavyTrack ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1400
1562
|
WavyLinearTrack,
|
|
1401
1563
|
{
|
|
1402
1564
|
trackHeight,
|
|
1403
1565
|
svgHeight,
|
|
1404
|
-
amplitude:
|
|
1566
|
+
amplitude: trackAmp,
|
|
1405
1567
|
wavelength,
|
|
1406
1568
|
indeterminateWavelength,
|
|
1407
1569
|
activeColor,
|
|
@@ -1446,14 +1608,14 @@ var LinearProgress = React13__namespace.forwardRef(
|
|
|
1446
1608
|
}
|
|
1447
1609
|
);
|
|
1448
1610
|
LinearProgress.displayName = "LinearProgress";
|
|
1449
|
-
var ProgressIndicator =
|
|
1611
|
+
var ProgressIndicator = React6__namespace.forwardRef((props, ref) => {
|
|
1450
1612
|
if (props.variant === "circular") {
|
|
1451
1613
|
return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, __spreadValues({ ref }, props));
|
|
1452
1614
|
}
|
|
1453
1615
|
return /* @__PURE__ */ jsxRuntime.jsx(LinearProgress, __spreadValues({ ref }, props));
|
|
1454
1616
|
});
|
|
1455
1617
|
ProgressIndicator.displayName = "ProgressIndicator";
|
|
1456
|
-
var RippleItem =
|
|
1618
|
+
var RippleItem = React6__namespace.memo(function RippleItem2({
|
|
1457
1619
|
ripple,
|
|
1458
1620
|
onDone
|
|
1459
1621
|
}) {
|
|
@@ -1497,8 +1659,8 @@ function Ripple({
|
|
|
1497
1659
|
}
|
|
1498
1660
|
function useRippleState(options = {}) {
|
|
1499
1661
|
const { disabled = false } = options;
|
|
1500
|
-
const [ripples, setRipples] =
|
|
1501
|
-
const onPointerDown =
|
|
1662
|
+
const [ripples, setRipples] = React6__namespace.useState([]);
|
|
1663
|
+
const onPointerDown = React6__namespace.useCallback(
|
|
1502
1664
|
(e) => {
|
|
1503
1665
|
if (disabled) return;
|
|
1504
1666
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
@@ -1515,7 +1677,7 @@ function useRippleState(options = {}) {
|
|
|
1515
1677
|
},
|
|
1516
1678
|
[disabled]
|
|
1517
1679
|
);
|
|
1518
|
-
const removeRipple =
|
|
1680
|
+
const removeRipple = React6__namespace.useCallback((id) => {
|
|
1519
1681
|
setRipples((prev) => prev.filter((r) => r.id !== id));
|
|
1520
1682
|
}, []);
|
|
1521
1683
|
return { ripples, onPointerDown, removeRipple };
|
|
@@ -1663,7 +1825,7 @@ function resolveDisabledBgClass(colorStyle) {
|
|
|
1663
1825
|
}
|
|
1664
1826
|
return "disabled:text-m3-on-surface/[0.38]";
|
|
1665
1827
|
}
|
|
1666
|
-
var IconButtonComponent =
|
|
1828
|
+
var IconButtonComponent = React6__namespace.forwardRef(
|
|
1667
1829
|
(_a, ref) => {
|
|
1668
1830
|
var _b = _a, {
|
|
1669
1831
|
className,
|
|
@@ -1705,18 +1867,18 @@ var IconButtonComponent = React13__namespace.forwardRef(
|
|
|
1705
1867
|
var _a2, _b2, _c, _d, _e;
|
|
1706
1868
|
const isToggle = variant === "toggle";
|
|
1707
1869
|
const isSelected = isToggle && !!selected;
|
|
1708
|
-
const resolvedColorClass =
|
|
1870
|
+
const resolvedColorClass = React6__namespace.useMemo(
|
|
1709
1871
|
() => isSelected ? colorStyles[colorStyle].selected : colorStyles[colorStyle].default,
|
|
1710
1872
|
[isSelected, colorStyle]
|
|
1711
1873
|
);
|
|
1712
|
-
const outlineWidthClass =
|
|
1874
|
+
const outlineWidthClass = React6__namespace.useMemo(
|
|
1713
1875
|
() => {
|
|
1714
1876
|
var _a3;
|
|
1715
1877
|
return colorStyle === "outlined" && !isSelected ? (_a3 = SIZE_OUTLINE_WIDTH[size]) != null ? _a3 : "border" : "";
|
|
1716
1878
|
},
|
|
1717
1879
|
[colorStyle, isSelected, size]
|
|
1718
1880
|
);
|
|
1719
|
-
const disabledBgClass =
|
|
1881
|
+
const disabledBgClass = React6__namespace.useMemo(
|
|
1720
1882
|
() => resolveDisabledBgClass(colorStyle),
|
|
1721
1883
|
[colorStyle]
|
|
1722
1884
|
);
|
|
@@ -1739,7 +1901,7 @@ var IconButtonComponent = React13__namespace.forwardRef(
|
|
|
1739
1901
|
const { ripples, onPointerDown, removeRipple } = useRippleState({
|
|
1740
1902
|
disabled: loading
|
|
1741
1903
|
});
|
|
1742
|
-
const handleClick =
|
|
1904
|
+
const handleClick = React6__namespace.useCallback(
|
|
1743
1905
|
(e) => {
|
|
1744
1906
|
if (loading) {
|
|
1745
1907
|
e.preventDefault();
|
|
@@ -1749,7 +1911,7 @@ var IconButtonComponent = React13__namespace.forwardRef(
|
|
|
1749
1911
|
},
|
|
1750
1912
|
[loading, onClick]
|
|
1751
1913
|
);
|
|
1752
|
-
const handleKeyDown =
|
|
1914
|
+
const handleKeyDown = React6__namespace.useCallback(
|
|
1753
1915
|
(e) => {
|
|
1754
1916
|
if (loading) return;
|
|
1755
1917
|
if ((e.key === "Enter" || e.key === " ") && onClick) {
|
|
@@ -1805,7 +1967,7 @@ var IconButtonComponent = React13__namespace.forwardRef(
|
|
|
1805
1967
|
width: isCustomSize ? `${iconSize}px` : void 0,
|
|
1806
1968
|
height: isCustomSize ? `${iconSize}px` : void 0
|
|
1807
1969
|
},
|
|
1808
|
-
children: isSelected && selectedIcon ? selectedIcon : asChild ?
|
|
1970
|
+
children: isSelected && selectedIcon ? selectedIcon : asChild ? React6__namespace.Children.only(children).props.children : children
|
|
1809
1971
|
}),
|
|
1810
1972
|
isSelected && selectedIcon ? "selected-content" : "content"
|
|
1811
1973
|
) })
|
|
@@ -1822,7 +1984,7 @@ var IconButtonComponent = React13__namespace.forwardRef(
|
|
|
1822
1984
|
className
|
|
1823
1985
|
);
|
|
1824
1986
|
if (asChild) {
|
|
1825
|
-
const child =
|
|
1987
|
+
const child = React6__namespace.Children.only(children);
|
|
1826
1988
|
return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1827
1989
|
reactSlot.Slot,
|
|
1828
1990
|
__spreadProps(__spreadValues({
|
|
@@ -1839,7 +2001,7 @@ var IconButtonComponent = React13__namespace.forwardRef(
|
|
|
1839
2001
|
}),
|
|
1840
2002
|
className: containerClassName
|
|
1841
2003
|
}, restProps), {
|
|
1842
|
-
children:
|
|
2004
|
+
children: React6__namespace.cloneElement(child, { children: innerContent })
|
|
1843
2005
|
})
|
|
1844
2006
|
) });
|
|
1845
2007
|
}
|
|
@@ -1867,13 +2029,13 @@ var IconButtonComponent = React13__namespace.forwardRef(
|
|
|
1867
2029
|
}
|
|
1868
2030
|
);
|
|
1869
2031
|
IconButtonComponent.displayName = "IconButton";
|
|
1870
|
-
var IconButton =
|
|
2032
|
+
var IconButton = React6__namespace.memo(IconButtonComponent);
|
|
1871
2033
|
var VARIANT_FONT = {
|
|
1872
2034
|
outlined: "'Material Symbols Outlined'",
|
|
1873
2035
|
rounded: "'Material Symbols Rounded'",
|
|
1874
2036
|
sharp: "'Material Symbols Sharp'"
|
|
1875
2037
|
};
|
|
1876
|
-
var IconComponent =
|
|
2038
|
+
var IconComponent = React6__namespace.forwardRef(
|
|
1877
2039
|
(_a, ref) => {
|
|
1878
2040
|
var _b = _a, {
|
|
1879
2041
|
name,
|
|
@@ -1939,7 +2101,7 @@ var IconComponent = React13__namespace.forwardRef(
|
|
|
1939
2101
|
}
|
|
1940
2102
|
);
|
|
1941
2103
|
IconComponent.displayName = "Icon";
|
|
1942
|
-
var Icon =
|
|
2104
|
+
var Icon = React6__namespace.memo(IconComponent);
|
|
1943
2105
|
var selectorClassName = "flex items-center gap-1 rounded-m3-full px-2 py-1 text-[length:var(--md-typescale-title-small-size,14px)] font-[number:var(--md-typescale-title-small-weight,500)] text-m3-on-surface transition-m3-fast-effects hover:bg-m3-on-surface/8 focus-visible:outline-2 focus-visible:outline-m3-primary";
|
|
1944
2106
|
var CalendarHeader = ({
|
|
1945
2107
|
displayedMonthMs,
|
|
@@ -2097,15 +2259,15 @@ var MonthPickerList = ({
|
|
|
2097
2259
|
locale,
|
|
2098
2260
|
onMonthSelect
|
|
2099
2261
|
}) => {
|
|
2100
|
-
const selectedRef =
|
|
2101
|
-
|
|
2262
|
+
const selectedRef = React6__namespace.useRef(null);
|
|
2263
|
+
React6__namespace.useEffect(() => {
|
|
2102
2264
|
var _a, _b;
|
|
2103
2265
|
(_b = (_a = selectedRef.current) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, {
|
|
2104
2266
|
block: "center",
|
|
2105
2267
|
behavior: "instant"
|
|
2106
2268
|
});
|
|
2107
2269
|
}, []);
|
|
2108
|
-
const months =
|
|
2270
|
+
const months = React6__namespace.useMemo(
|
|
2109
2271
|
() => Array.from({ length: 12 }, (_, month) => month),
|
|
2110
2272
|
[]
|
|
2111
2273
|
);
|
|
@@ -2150,12 +2312,12 @@ var YearPickerList = ({
|
|
|
2150
2312
|
selectableDates,
|
|
2151
2313
|
onYearSelect
|
|
2152
2314
|
}) => {
|
|
2153
|
-
const selectedRef =
|
|
2154
|
-
const years =
|
|
2315
|
+
const selectedRef = React6__namespace.useRef(null);
|
|
2316
|
+
const years = React6__namespace.useMemo(() => {
|
|
2155
2317
|
const [min, max] = yearRange;
|
|
2156
2318
|
return Array.from({ length: max - min + 1 }, (_, index) => min + index);
|
|
2157
2319
|
}, [yearRange]);
|
|
2158
|
-
|
|
2320
|
+
React6__namespace.useEffect(() => {
|
|
2159
2321
|
var _a, _b;
|
|
2160
2322
|
(_b = (_a = selectedRef.current) == null ? void 0 : _a.scrollIntoView) == null ? void 0 : _b.call(_a, {
|
|
2161
2323
|
block: "center",
|
|
@@ -2226,17 +2388,17 @@ var DatePicker = ({
|
|
|
2226
2388
|
navigateToMonth,
|
|
2227
2389
|
setDisplayMode
|
|
2228
2390
|
} = state;
|
|
2229
|
-
const [activeSelector, setActiveSelector] =
|
|
2230
|
-
const [slideDirection, setSlideDirection] =
|
|
2231
|
-
const handlePrev =
|
|
2391
|
+
const [activeSelector, setActiveSelector] = React6__namespace.useState(null);
|
|
2392
|
+
const [slideDirection, setSlideDirection] = React6__namespace.useState(null);
|
|
2393
|
+
const handlePrev = React6__namespace.useCallback(() => {
|
|
2232
2394
|
setSlideDirection("prev");
|
|
2233
2395
|
navigateMonth2("prev");
|
|
2234
2396
|
}, [navigateMonth2]);
|
|
2235
|
-
const handleNext =
|
|
2397
|
+
const handleNext = React6__namespace.useCallback(() => {
|
|
2236
2398
|
setSlideDirection("next");
|
|
2237
2399
|
navigateMonth2("next");
|
|
2238
2400
|
}, [navigateMonth2]);
|
|
2239
|
-
const handleYearSelect =
|
|
2401
|
+
const handleYearSelect = React6__namespace.useCallback(
|
|
2240
2402
|
(year) => {
|
|
2241
2403
|
const d = new Date(displayedMonthMs);
|
|
2242
2404
|
navigateToMonth(year, d.getUTCMonth());
|
|
@@ -2244,7 +2406,7 @@ var DatePicker = ({
|
|
|
2244
2406
|
},
|
|
2245
2407
|
[displayedMonthMs, navigateToMonth]
|
|
2246
2408
|
);
|
|
2247
|
-
const handleMonthSelect =
|
|
2409
|
+
const handleMonthSelect = React6__namespace.useCallback(
|
|
2248
2410
|
(month) => {
|
|
2249
2411
|
const d = new Date(displayedMonthMs);
|
|
2250
2412
|
navigateToMonth(d.getUTCFullYear(), month);
|
|
@@ -2252,11 +2414,11 @@ var DatePicker = ({
|
|
|
2252
2414
|
},
|
|
2253
2415
|
[displayedMonthMs, navigateToMonth]
|
|
2254
2416
|
);
|
|
2255
|
-
const [inputValue, setInputValue] =
|
|
2417
|
+
const [inputValue, setInputValue] = React6__namespace.useState(
|
|
2256
2418
|
() => selectedDateMs !== null ? formatInputDate(selectedDateMs) : ""
|
|
2257
2419
|
);
|
|
2258
|
-
const [inputError, setInputError] =
|
|
2259
|
-
const handleInputCommit =
|
|
2420
|
+
const [inputError, setInputError] = React6__namespace.useState();
|
|
2421
|
+
const handleInputCommit = React6__namespace.useCallback(
|
|
2260
2422
|
(ms) => {
|
|
2261
2423
|
if (ms === null && inputValue.length > 0) {
|
|
2262
2424
|
setInputError("Invalid date");
|
|
@@ -2496,7 +2658,7 @@ var DP_CLASSES = {
|
|
|
2496
2658
|
/** Weekday header row */
|
|
2497
2659
|
weekdayRow: "text-[length:var(--md-typescale-body-large-size,14px)] text-m3-on-surface"
|
|
2498
2660
|
};
|
|
2499
|
-
var ScrollArea =
|
|
2661
|
+
var ScrollArea = React6__namespace.forwardRef(
|
|
2500
2662
|
(_a, ref) => {
|
|
2501
2663
|
var _b = _a, {
|
|
2502
2664
|
className,
|
|
@@ -2517,15 +2679,15 @@ var ScrollArea = React13__namespace.forwardRef(
|
|
|
2517
2679
|
"viewportRef",
|
|
2518
2680
|
"viewportProps"
|
|
2519
2681
|
]);
|
|
2520
|
-
const [isTouchDevice, setIsTouchDevice] =
|
|
2521
|
-
|
|
2682
|
+
const [isTouchDevice, setIsTouchDevice] = React6__namespace.useState(false);
|
|
2683
|
+
React6__namespace.useEffect(() => {
|
|
2522
2684
|
if (typeof window !== "undefined") {
|
|
2523
2685
|
setIsTouchDevice(
|
|
2524
2686
|
"ontouchstart" in window || navigator.maxTouchPoints > 0
|
|
2525
2687
|
);
|
|
2526
2688
|
}
|
|
2527
2689
|
}, []);
|
|
2528
|
-
const resolvedType =
|
|
2690
|
+
const resolvedType = React6__namespace.useMemo(() => {
|
|
2529
2691
|
if (type === "hover" && isTouchDevice) {
|
|
2530
2692
|
return "scroll";
|
|
2531
2693
|
}
|
|
@@ -2576,7 +2738,7 @@ var ScrollArea = React13__namespace.forwardRef(
|
|
|
2576
2738
|
}
|
|
2577
2739
|
);
|
|
2578
2740
|
ScrollArea.displayName = "ScrollArea";
|
|
2579
|
-
var ScrollAreaScrollbar =
|
|
2741
|
+
var ScrollAreaScrollbar = React6__namespace.forwardRef((_a, ref) => {
|
|
2580
2742
|
var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
|
|
2581
2743
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2582
2744
|
RadixScrollArea__namespace.Scrollbar,
|
|
@@ -2606,7 +2768,7 @@ var ScrollAreaScrollbar = React13__namespace.forwardRef((_a, ref) => {
|
|
|
2606
2768
|
);
|
|
2607
2769
|
});
|
|
2608
2770
|
ScrollAreaScrollbar.displayName = RadixScrollArea__namespace.Scrollbar.displayName;
|
|
2609
|
-
var ScrollAreaCorner =
|
|
2771
|
+
var ScrollAreaCorner = React6__namespace.forwardRef((_a, ref) => {
|
|
2610
2772
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
2611
2773
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2612
2774
|
RadixScrollArea__namespace.Corner,
|
|
@@ -2648,9 +2810,9 @@ DialogTrigger.displayName = "DialogTrigger";
|
|
|
2648
2810
|
var DialogPortal = ({
|
|
2649
2811
|
open,
|
|
2650
2812
|
children
|
|
2651
|
-
}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ?
|
|
2813
|
+
}) => /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Portal, { forceMount: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.AnimatePresence, { children: open ? React6__namespace.Children.toArray(children) : null }) });
|
|
2652
2814
|
DialogPortal.displayName = "DialogPortal";
|
|
2653
|
-
var DialogOverlay =
|
|
2815
|
+
var DialogOverlay = React6__namespace.forwardRef((_a, ref) => {
|
|
2654
2816
|
var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
|
|
2655
2817
|
return /* @__PURE__ */ jsxRuntime.jsx(RadixDialog__namespace.Overlay, __spreadProps(__spreadValues({ ref, asChild: true }, props), { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2656
2818
|
react.m.div,
|
|
@@ -2661,7 +2823,7 @@ var DialogOverlay = React13__namespace.forwardRef((_a, ref) => {
|
|
|
2661
2823
|
) }));
|
|
2662
2824
|
});
|
|
2663
2825
|
DialogOverlay.displayName = "DialogOverlay";
|
|
2664
|
-
var DialogContent =
|
|
2826
|
+
var DialogContent = React6__namespace.forwardRef((_a, ref) => {
|
|
2665
2827
|
var _b = _a, { className, children, hideCloseButton = false } = _b, props = __objRest(_b, ["className", "children", "hideCloseButton"]);
|
|
2666
2828
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2667
2829
|
RadixDialog__namespace.Content,
|
|
@@ -2701,7 +2863,7 @@ var DialogContent = React13__namespace.forwardRef((_a, ref) => {
|
|
|
2701
2863
|
);
|
|
2702
2864
|
});
|
|
2703
2865
|
DialogContent.displayName = "DialogContent";
|
|
2704
|
-
var DialogIcon =
|
|
2866
|
+
var DialogIcon = React6__namespace.forwardRef((_a, ref) => {
|
|
2705
2867
|
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
2706
2868
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2707
2869
|
"div",
|
|
@@ -2715,7 +2877,7 @@ var DialogIcon = React13__namespace.forwardRef((_a, ref) => {
|
|
|
2715
2877
|
);
|
|
2716
2878
|
});
|
|
2717
2879
|
DialogIcon.displayName = "DialogIcon";
|
|
2718
|
-
var DialogTitle =
|
|
2880
|
+
var DialogTitle = React6__namespace.forwardRef((_a, ref) => {
|
|
2719
2881
|
var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
|
|
2720
2882
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2721
2883
|
RadixDialog__namespace.Title,
|
|
@@ -2730,7 +2892,7 @@ var DialogTitle = React13__namespace.forwardRef((_a, ref) => {
|
|
|
2730
2892
|
);
|
|
2731
2893
|
});
|
|
2732
2894
|
DialogTitle.displayName = "DialogTitle";
|
|
2733
|
-
var DialogDescription =
|
|
2895
|
+
var DialogDescription = React6__namespace.forwardRef((_a, ref) => {
|
|
2734
2896
|
var _b = _a, { className, asChild } = _b, props = __objRest(_b, ["className", "asChild"]);
|
|
2735
2897
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2736
2898
|
RadixDialog__namespace.Description,
|
|
@@ -2742,7 +2904,7 @@ var DialogDescription = React13__namespace.forwardRef((_a, ref) => {
|
|
|
2742
2904
|
);
|
|
2743
2905
|
});
|
|
2744
2906
|
DialogDescription.displayName = "DialogDescription";
|
|
2745
|
-
var DialogBody =
|
|
2907
|
+
var DialogBody = React6__namespace.forwardRef((_a, ref) => {
|
|
2746
2908
|
var _b = _a, { className, children, dir } = _b, props = __objRest(_b, ["className", "children", "dir"]);
|
|
2747
2909
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2748
2910
|
ScrollArea,
|
|
@@ -2758,7 +2920,7 @@ var DialogBody = React13__namespace.forwardRef((_a, ref) => {
|
|
|
2758
2920
|
);
|
|
2759
2921
|
});
|
|
2760
2922
|
DialogBody.displayName = "DialogBody";
|
|
2761
|
-
var DialogFullScreenContent =
|
|
2923
|
+
var DialogFullScreenContent = React6__namespace.forwardRef(
|
|
2762
2924
|
(_a, ref) => {
|
|
2763
2925
|
var _b = _a, {
|
|
2764
2926
|
className,
|
|
@@ -2906,17 +3068,17 @@ var DateRangePicker = ({
|
|
|
2906
3068
|
navigateToMonth,
|
|
2907
3069
|
setDisplayMode
|
|
2908
3070
|
} = state;
|
|
2909
|
-
const [activeSelector, setActiveSelector] =
|
|
2910
|
-
const [slideDirection, setSlideDirection] =
|
|
2911
|
-
const handlePrev =
|
|
3071
|
+
const [activeSelector, setActiveSelector] = React6__namespace.useState(null);
|
|
3072
|
+
const [slideDirection, setSlideDirection] = React6__namespace.useState(null);
|
|
3073
|
+
const handlePrev = React6__namespace.useCallback(() => {
|
|
2912
3074
|
setSlideDirection("prev");
|
|
2913
3075
|
navigateMonth2("prev");
|
|
2914
3076
|
}, [navigateMonth2]);
|
|
2915
|
-
const handleNext =
|
|
3077
|
+
const handleNext = React6__namespace.useCallback(() => {
|
|
2916
3078
|
setSlideDirection("next");
|
|
2917
3079
|
navigateMonth2("next");
|
|
2918
3080
|
}, [navigateMonth2]);
|
|
2919
|
-
const handleYearSelect =
|
|
3081
|
+
const handleYearSelect = React6__namespace.useCallback(
|
|
2920
3082
|
(year) => {
|
|
2921
3083
|
const d = new Date(displayedMonthMs);
|
|
2922
3084
|
navigateToMonth(year, d.getUTCMonth());
|
|
@@ -2924,7 +3086,7 @@ var DateRangePicker = ({
|
|
|
2924
3086
|
},
|
|
2925
3087
|
[displayedMonthMs, navigateToMonth]
|
|
2926
3088
|
);
|
|
2927
|
-
const handleMonthSelect =
|
|
3089
|
+
const handleMonthSelect = React6__namespace.useCallback(
|
|
2928
3090
|
(month) => {
|
|
2929
3091
|
const d = new Date(displayedMonthMs);
|
|
2930
3092
|
navigateToMonth(d.getUTCFullYear(), month);
|
|
@@ -2932,7 +3094,7 @@ var DateRangePicker = ({
|
|
|
2932
3094
|
},
|
|
2933
3095
|
[displayedMonthMs, navigateToMonth]
|
|
2934
3096
|
);
|
|
2935
|
-
const formatShort =
|
|
3097
|
+
const formatShort = React6__namespace.useCallback(
|
|
2936
3098
|
(ms) => {
|
|
2937
3099
|
if (ms === null) return "\u2014";
|
|
2938
3100
|
return formatDate(ms, locale, {
|
|
@@ -3076,12 +3238,12 @@ var useDatePickerState = (options) => {
|
|
|
3076
3238
|
const selectableDates = (_d = options == null ? void 0 : options.selectableDates) != null ? _d : ALL_DATES_SELECTABLE;
|
|
3077
3239
|
const initialDisplayMode = (_e = options == null ? void 0 : options.initialDisplayMode) != null ? _e : DEFAULT_DISPLAY_MODE;
|
|
3078
3240
|
const locale = resolveLocale(options == null ? void 0 : options.locale);
|
|
3079
|
-
const [selectedDateMs, setSelectedDateMs] =
|
|
3241
|
+
const [selectedDateMs, setSelectedDateMs] = React6.useState(
|
|
3080
3242
|
initialSelectedMs !== null ? startOfDayUTC(initialSelectedMs) : null
|
|
3081
3243
|
);
|
|
3082
|
-
const [displayedMonthMs, setDisplayedMonthMs] =
|
|
3083
|
-
const [displayMode, setDisplayModeState] =
|
|
3084
|
-
const selectDate =
|
|
3244
|
+
const [displayedMonthMs, setDisplayedMonthMs] = React6.useState(initialMonthMs);
|
|
3245
|
+
const [displayMode, setDisplayModeState] = React6.useState(initialDisplayMode);
|
|
3246
|
+
const selectDate = React6.useCallback(
|
|
3085
3247
|
(ms) => {
|
|
3086
3248
|
if (ms === null) {
|
|
3087
3249
|
setSelectedDateMs(null);
|
|
@@ -3094,7 +3256,7 @@ var useDatePickerState = (options) => {
|
|
|
3094
3256
|
},
|
|
3095
3257
|
[selectableDates]
|
|
3096
3258
|
);
|
|
3097
|
-
const navigateMonthAction =
|
|
3259
|
+
const navigateMonthAction = React6.useCallback(
|
|
3098
3260
|
(direction) => {
|
|
3099
3261
|
setDisplayedMonthMs(
|
|
3100
3262
|
(prev) => {
|
|
@@ -3105,24 +3267,24 @@ var useDatePickerState = (options) => {
|
|
|
3105
3267
|
},
|
|
3106
3268
|
[yearRange, selectableDates]
|
|
3107
3269
|
);
|
|
3108
|
-
const navigateToMonth =
|
|
3270
|
+
const navigateToMonth = React6.useCallback(
|
|
3109
3271
|
(year, month) => {
|
|
3110
3272
|
if (!isMonthNavigable(year, yearRange, selectableDates)) return;
|
|
3111
3273
|
setDisplayedMonthMs(Date.UTC(year, month, 1));
|
|
3112
3274
|
},
|
|
3113
3275
|
[yearRange, selectableDates]
|
|
3114
3276
|
);
|
|
3115
|
-
const setDisplayMode =
|
|
3277
|
+
const setDisplayMode = React6.useCallback((mode) => {
|
|
3116
3278
|
setDisplayModeState(mode);
|
|
3117
3279
|
}, []);
|
|
3118
|
-
const reset =
|
|
3280
|
+
const reset = React6.useCallback(() => {
|
|
3119
3281
|
setSelectedDateMs(
|
|
3120
3282
|
initialSelectedMs !== null ? startOfDayUTC(initialSelectedMs) : null
|
|
3121
3283
|
);
|
|
3122
3284
|
setDisplayedMonthMs(initialMonthMs);
|
|
3123
3285
|
setDisplayModeState(initialDisplayMode);
|
|
3124
3286
|
}, [initialSelectedMs, initialMonthMs, initialDisplayMode]);
|
|
3125
|
-
return
|
|
3287
|
+
return React6.useMemo(
|
|
3126
3288
|
() => ({
|
|
3127
3289
|
selectedDateMs,
|
|
3128
3290
|
displayedMonthMs,
|
|
@@ -3181,13 +3343,13 @@ var useDateRangePickerState = (options) => {
|
|
|
3181
3343
|
const selectableDates = (_c = options == null ? void 0 : options.selectableDates) != null ? _c : ALL_DATES_SELECTABLE;
|
|
3182
3344
|
const initialDisplayMode = (_d = options == null ? void 0 : options.initialDisplayMode) != null ? _d : "picker";
|
|
3183
3345
|
const locale = resolveLocale(options == null ? void 0 : options.locale);
|
|
3184
|
-
const [{ startMs: selectedStartMs, endMs: selectedEndMs }, dispatch] =
|
|
3346
|
+
const [{ startMs: selectedStartMs, endMs: selectedEndMs }, dispatch] = React6.useReducer(rangeReducer, {
|
|
3185
3347
|
startMs: initialStartMs,
|
|
3186
3348
|
endMs: initialEndMs
|
|
3187
3349
|
});
|
|
3188
|
-
const [displayedMonthMs, setDisplayedMonthMs] =
|
|
3189
|
-
const [displayMode, setDisplayModeState] =
|
|
3190
|
-
const selectDate =
|
|
3350
|
+
const [displayedMonthMs, setDisplayedMonthMs] = React6.useState(initialMonthMs);
|
|
3351
|
+
const [displayMode, setDisplayModeState] = React6.useState(initialDisplayMode);
|
|
3352
|
+
const selectDate = React6.useCallback(
|
|
3191
3353
|
(ms) => {
|
|
3192
3354
|
const normalized = startOfDayUTC(ms);
|
|
3193
3355
|
if (!selectableDates.isSelectableDate(normalized)) return;
|
|
@@ -3195,10 +3357,10 @@ var useDateRangePickerState = (options) => {
|
|
|
3195
3357
|
},
|
|
3196
3358
|
[selectableDates]
|
|
3197
3359
|
);
|
|
3198
|
-
const clearRange =
|
|
3360
|
+
const clearRange = React6.useCallback(() => {
|
|
3199
3361
|
dispatch({ type: "CLEAR" });
|
|
3200
3362
|
}, []);
|
|
3201
|
-
const navigateMonthAction =
|
|
3363
|
+
const navigateMonthAction = React6.useCallback(
|
|
3202
3364
|
(direction) => {
|
|
3203
3365
|
setDisplayedMonthMs(
|
|
3204
3366
|
(prev) => {
|
|
@@ -3209,22 +3371,22 @@ var useDateRangePickerState = (options) => {
|
|
|
3209
3371
|
},
|
|
3210
3372
|
[yearRange, selectableDates]
|
|
3211
3373
|
);
|
|
3212
|
-
const navigateToMonth =
|
|
3374
|
+
const navigateToMonth = React6.useCallback(
|
|
3213
3375
|
(year, month) => {
|
|
3214
3376
|
if (!isMonthNavigable(year, yearRange, selectableDates)) return;
|
|
3215
3377
|
setDisplayedMonthMs(Date.UTC(year, month, 1));
|
|
3216
3378
|
},
|
|
3217
3379
|
[yearRange, selectableDates]
|
|
3218
3380
|
);
|
|
3219
|
-
const setDisplayMode =
|
|
3381
|
+
const setDisplayMode = React6.useCallback((mode) => {
|
|
3220
3382
|
setDisplayModeState(mode);
|
|
3221
3383
|
}, []);
|
|
3222
|
-
const reset =
|
|
3384
|
+
const reset = React6.useCallback(() => {
|
|
3223
3385
|
dispatch({ type: "RESET", startMs: initialStartMs, endMs: initialEndMs });
|
|
3224
3386
|
setDisplayedMonthMs(initialMonthMs);
|
|
3225
3387
|
setDisplayModeState(initialDisplayMode);
|
|
3226
3388
|
}, [initialStartMs, initialEndMs, initialMonthMs, initialDisplayMode]);
|
|
3227
|
-
return
|
|
3389
|
+
return React6.useMemo(
|
|
3228
3390
|
() => ({
|
|
3229
3391
|
selectedStartMs,
|
|
3230
3392
|
selectedEndMs,
|
|
@@ -3543,16 +3705,16 @@ var InputField = ({
|
|
|
3543
3705
|
onBlur,
|
|
3544
3706
|
className
|
|
3545
3707
|
}) => {
|
|
3546
|
-
const [inputText, setInputText] =
|
|
3708
|
+
const [inputText, setInputText] = React6__namespace.useState(
|
|
3547
3709
|
String(value).padStart(2, "0")
|
|
3548
3710
|
);
|
|
3549
|
-
const inputRef =
|
|
3550
|
-
|
|
3711
|
+
const inputRef = React6__namespace.useRef(null);
|
|
3712
|
+
React6__namespace.useEffect(() => {
|
|
3551
3713
|
if (!isFocused) {
|
|
3552
3714
|
setInputText(String(value).padStart(2, "0"));
|
|
3553
3715
|
}
|
|
3554
3716
|
}, [value, isFocused]);
|
|
3555
|
-
|
|
3717
|
+
React6__namespace.useEffect(() => {
|
|
3556
3718
|
var _a, _b;
|
|
3557
3719
|
if (isFocused) {
|
|
3558
3720
|
(_a = inputRef.current) == null ? void 0 : _a.focus();
|
|
@@ -3642,7 +3804,7 @@ var InputField = ({
|
|
|
3642
3804
|
};
|
|
3643
3805
|
var TimeInput = ({ state, className }) => {
|
|
3644
3806
|
const { is24hour, setHourInput, setMinuteInput, setSelection } = state;
|
|
3645
|
-
const [focusedField, setFocusedField] =
|
|
3807
|
+
const [focusedField, setFocusedField] = React6__namespace.useState(null);
|
|
3646
3808
|
const handleHourAutoAdvance = () => {
|
|
3647
3809
|
setFocusedField("minute");
|
|
3648
3810
|
setSelection("minute");
|
|
@@ -3836,17 +3998,17 @@ var ClockDial = ({
|
|
|
3836
3998
|
setMinute,
|
|
3837
3999
|
setSelection
|
|
3838
4000
|
} = state;
|
|
3839
|
-
const displayAngle =
|
|
4001
|
+
const displayAngle = React6__namespace.useMemo(() => {
|
|
3840
4002
|
if (selection === "hour") {
|
|
3841
4003
|
return valueToAngle(hour, "hour");
|
|
3842
4004
|
}
|
|
3843
4005
|
return valueToAngle(minute, "minute");
|
|
3844
4006
|
}, [selection, hour, minute]);
|
|
3845
|
-
const selectorPos =
|
|
4007
|
+
const selectorPos = React6__namespace.useMemo(
|
|
3846
4008
|
() => getSelectorPosition(displayAngle, selection, is24hour, isPm),
|
|
3847
4009
|
[displayAngle, selection, is24hour, isPm]
|
|
3848
4010
|
);
|
|
3849
|
-
const trackEnd =
|
|
4011
|
+
const trackEnd = React6__namespace.useMemo(() => {
|
|
3850
4012
|
const dx = selectorPos.x - CENTER;
|
|
3851
4013
|
const dy = selectorPos.y - CENTER;
|
|
3852
4014
|
const length = Math.hypot(dx, dy);
|
|
@@ -3856,13 +4018,13 @@ var ClockDial = ({
|
|
|
3856
4018
|
y: selectorPos.y - dy / length * HANDLE_RADIUS
|
|
3857
4019
|
};
|
|
3858
4020
|
}, [selectorPos]);
|
|
3859
|
-
const numbers =
|
|
4021
|
+
const numbers = React6__namespace.useMemo(() => {
|
|
3860
4022
|
if (selection === "minute") return buildMinuteNumbers();
|
|
3861
4023
|
if (is24hour) return buildHour24Numbers();
|
|
3862
4024
|
return buildHour12Numbers();
|
|
3863
4025
|
}, [selection, is24hour]);
|
|
3864
|
-
const isDragging =
|
|
3865
|
-
const svgRef =
|
|
4026
|
+
const isDragging = React6__namespace.useRef(false);
|
|
4027
|
+
const svgRef = React6__namespace.useRef(null);
|
|
3866
4028
|
const getSVGPoint = (e) => {
|
|
3867
4029
|
const svg = svgRef.current;
|
|
3868
4030
|
if (!svg) return { x: e.clientX, y: e.clientY };
|
|
@@ -4012,8 +4174,8 @@ var getAutoLayout = () => {
|
|
|
4012
4174
|
return innerWidth >= 600 && innerHeight >= 300 && innerWidth >= innerHeight ? "horizontal" : "vertical";
|
|
4013
4175
|
};
|
|
4014
4176
|
var useResolvedLayout = (layout) => {
|
|
4015
|
-
const [autoLayout, setAutoLayout] =
|
|
4016
|
-
|
|
4177
|
+
const [autoLayout, setAutoLayout] = React6__namespace.useState("vertical");
|
|
4178
|
+
React6__namespace.useEffect(() => {
|
|
4017
4179
|
if (layout !== "auto") return;
|
|
4018
4180
|
const updateLayout = () => setAutoLayout(getAutoLayout());
|
|
4019
4181
|
updateLayout();
|
|
@@ -4207,18 +4369,18 @@ var useTimePickerState = (options) => {
|
|
|
4207
4369
|
const initialHour = clamp((_a = options == null ? void 0 : options.initialHour) != null ? _a : 0, 0, 23);
|
|
4208
4370
|
const initialMinute = clamp((_b = options == null ? void 0 : options.initialMinute) != null ? _b : 0, 0, 59);
|
|
4209
4371
|
const is24hour = (_c = options == null ? void 0 : options.is24hour) != null ? _c : false;
|
|
4210
|
-
const [hour, setHourState] =
|
|
4211
|
-
const [minute, setMinuteState] =
|
|
4212
|
-
const [hourInput, setHourInputState] =
|
|
4372
|
+
const [hour, setHourState] = React6.useState(initialHour);
|
|
4373
|
+
const [minute, setMinuteState] = React6.useState(initialMinute);
|
|
4374
|
+
const [hourInput, setHourInputState] = React6.useState(
|
|
4213
4375
|
is24hour ? initialHour : to12Hour(initialHour)
|
|
4214
4376
|
);
|
|
4215
|
-
const [minuteInput, setMinuteInputState] =
|
|
4216
|
-
const [selection, setSelectionState] =
|
|
4377
|
+
const [minuteInput, setMinuteInputState] = React6.useState(initialMinute);
|
|
4378
|
+
const [selection, setSelectionState] = React6.useState("hour");
|
|
4217
4379
|
const isPm = hour >= 12;
|
|
4218
4380
|
const isHourInputValid = isValidHourInput(hourInput, is24hour);
|
|
4219
4381
|
const isMinuteInputValid = isValidMinuteInput(minuteInput);
|
|
4220
4382
|
const isInputValid = isHourInputValid && isMinuteInputValid;
|
|
4221
|
-
const setHour =
|
|
4383
|
+
const setHour = React6.useCallback(
|
|
4222
4384
|
(h) => {
|
|
4223
4385
|
const clamped = clamp(h, 0, 23);
|
|
4224
4386
|
setHourState(clamped);
|
|
@@ -4226,12 +4388,12 @@ var useTimePickerState = (options) => {
|
|
|
4226
4388
|
},
|
|
4227
4389
|
[is24hour]
|
|
4228
4390
|
);
|
|
4229
|
-
const setMinute =
|
|
4391
|
+
const setMinute = React6.useCallback((m13) => {
|
|
4230
4392
|
const clamped = clamp(m13, 0, 59);
|
|
4231
4393
|
setMinuteState(clamped);
|
|
4232
4394
|
setMinuteInputState(clamped);
|
|
4233
4395
|
}, []);
|
|
4234
|
-
const setHourInput =
|
|
4396
|
+
const setHourInput = React6.useCallback(
|
|
4235
4397
|
(h) => {
|
|
4236
4398
|
setHourInputState(h);
|
|
4237
4399
|
if (isValidHourInput(h, is24hour)) {
|
|
@@ -4241,16 +4403,16 @@ var useTimePickerState = (options) => {
|
|
|
4241
4403
|
},
|
|
4242
4404
|
[is24hour, isPm]
|
|
4243
4405
|
);
|
|
4244
|
-
const setMinuteInput =
|
|
4406
|
+
const setMinuteInput = React6.useCallback((m13) => {
|
|
4245
4407
|
setMinuteInputState(m13);
|
|
4246
4408
|
if (isValidMinuteInput(m13)) {
|
|
4247
4409
|
setMinuteState(m13);
|
|
4248
4410
|
}
|
|
4249
4411
|
}, []);
|
|
4250
|
-
const setSelection =
|
|
4412
|
+
const setSelection = React6.useCallback((mode) => {
|
|
4251
4413
|
setSelectionState(mode);
|
|
4252
4414
|
}, []);
|
|
4253
|
-
const setIsPm =
|
|
4415
|
+
const setIsPm = React6.useCallback((pm) => {
|
|
4254
4416
|
setHourState((prev) => {
|
|
4255
4417
|
const wasAlreadyPm = prev >= 12;
|
|
4256
4418
|
if (pm === wasAlreadyPm) return prev;
|
|
@@ -4260,14 +4422,14 @@ var useTimePickerState = (options) => {
|
|
|
4260
4422
|
return clamped;
|
|
4261
4423
|
});
|
|
4262
4424
|
}, []);
|
|
4263
|
-
const reset =
|
|
4425
|
+
const reset = React6.useCallback(() => {
|
|
4264
4426
|
setHourState(initialHour);
|
|
4265
4427
|
setMinuteState(initialMinute);
|
|
4266
4428
|
setHourInputState(is24hour ? initialHour : to12Hour(initialHour));
|
|
4267
4429
|
setMinuteInputState(initialMinute);
|
|
4268
4430
|
setSelectionState("hour");
|
|
4269
4431
|
}, [initialHour, initialMinute, is24hour]);
|
|
4270
|
-
return
|
|
4432
|
+
return React6.useMemo(
|
|
4271
4433
|
() => ({
|
|
4272
4434
|
hour,
|
|
4273
4435
|
minute,
|