@mlw-packages/react-components 1.8.13 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +36 -5
- package/dist/index.d.mts +7 -75
- package/dist/index.d.ts +7 -75
- package/dist/index.js +257 -1359
- package/dist/index.mjs +258 -1359
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -584,7 +584,7 @@ var AlertDialogContentBase = React33__namespace.forwardRef(({ className, testid
|
|
|
584
584
|
{
|
|
585
585
|
ref,
|
|
586
586
|
className: cn(
|
|
587
|
-
"fixed left-[50%] top-[50%] z-50 grid w-
|
|
587
|
+
"fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-3 sm:gap-4 border bg-background p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md sm:rounded-lg max-h-[calc(100dvh-2rem)] sm:max-h-[90dvh] overflow-auto border-border",
|
|
588
588
|
className
|
|
589
589
|
),
|
|
590
590
|
"data-testid": testid,
|
|
@@ -600,7 +600,7 @@ var AlertDialogHeaderBase = ({
|
|
|
600
600
|
"div",
|
|
601
601
|
{
|
|
602
602
|
className: cn(
|
|
603
|
-
"flex flex-col space-y-2 text-center sm:text-left",
|
|
603
|
+
"flex flex-col space-y-1 sm:space-y-2 text-center sm:text-left",
|
|
604
604
|
className
|
|
605
605
|
),
|
|
606
606
|
...props
|
|
@@ -614,7 +614,7 @@ var AlertDialogFooterBase = ({
|
|
|
614
614
|
"div",
|
|
615
615
|
{
|
|
616
616
|
className: cn(
|
|
617
|
-
"flex flex-col-reverse sm:flex-row sm:justify-end",
|
|
617
|
+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2 sm:gap-0",
|
|
618
618
|
className
|
|
619
619
|
),
|
|
620
620
|
...props
|
|
@@ -670,7 +670,7 @@ var DialogOverlayBase = React33__namespace.forwardRef(({ className, testid: data
|
|
|
670
670
|
{
|
|
671
671
|
ref,
|
|
672
672
|
className: cn(
|
|
673
|
-
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
673
|
+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 border-border",
|
|
674
674
|
className
|
|
675
675
|
),
|
|
676
676
|
"data-testid": dataTestId,
|
|
@@ -688,7 +688,7 @@ var DialogContentBase = React33__namespace.forwardRef(
|
|
|
688
688
|
{
|
|
689
689
|
ref,
|
|
690
690
|
className: cn(
|
|
691
|
-
"fixed left-[50%] top-[50%] z-50 w-lg grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[100dvh] overflow-auto
|
|
691
|
+
"fixed left-[50%] top-[50%] z-50 w-[calc(100%-2rem)] max-w-lg grid translate-x-[-50%] translate-y-[-50%] gap-3 sm:gap-4 border bg-background p-4 sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md sm:rounded-lg max-h-[calc(100dvh-2rem)] sm:max-h-[90dvh] overflow-auto border-border",
|
|
692
692
|
className
|
|
693
693
|
),
|
|
694
694
|
"data-testid": dataTestId,
|
|
@@ -696,8 +696,8 @@ var DialogContentBase = React33__namespace.forwardRef(
|
|
|
696
696
|
onWheel: userOnWheel,
|
|
697
697
|
children: [
|
|
698
698
|
children,
|
|
699
|
-
/* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-
|
|
700
|
-
/* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "h-
|
|
699
|
+
/* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-2 top-2 sm:right-4 sm:top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground z-10 touch-manipulation p-1", children: [
|
|
700
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "h-5 w-5 sm:h-4 sm:w-4 hover:text-red-500 font-extrabold" }),
|
|
701
701
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
|
|
702
702
|
] })
|
|
703
703
|
]
|
|
@@ -712,7 +712,7 @@ var DialogHeaderBase = React33__namespace.forwardRef(({ className, testid: dataT
|
|
|
712
712
|
{
|
|
713
713
|
ref,
|
|
714
714
|
className: cn(
|
|
715
|
-
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
715
|
+
"flex flex-col space-y-1 sm:space-y-1.5 text-center sm:text-left pr-8 sm:pr-0",
|
|
716
716
|
className
|
|
717
717
|
),
|
|
718
718
|
"data-testid": dataTestId,
|
|
@@ -725,7 +725,7 @@ var DialogFooterBase = React33__namespace.forwardRef(({ className, testid: dataT
|
|
|
725
725
|
{
|
|
726
726
|
ref,
|
|
727
727
|
className: cn(
|
|
728
|
-
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
728
|
+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2 sm:gap-0",
|
|
729
729
|
className
|
|
730
730
|
),
|
|
731
731
|
"data-testid": dataTestId,
|
|
@@ -1327,19 +1327,21 @@ function useIsMobile() {
|
|
|
1327
1327
|
}, []);
|
|
1328
1328
|
return !!isMobile;
|
|
1329
1329
|
}
|
|
1330
|
+
var isTouchDevice = () => {
|
|
1331
|
+
return "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints !== void 0;
|
|
1332
|
+
};
|
|
1330
1333
|
var useDrag = (options = {}) => {
|
|
1331
1334
|
const [isDragging, setIsDragging] = React33.useState(null);
|
|
1332
1335
|
const [positions, setPositions] = React33.useState({});
|
|
1333
1336
|
const dragStartPos = React33.useRef(null);
|
|
1334
1337
|
const dragId = React33.useRef(null);
|
|
1338
|
+
const isTouch = React33.useRef(isTouchDevice());
|
|
1335
1339
|
const handleDragStart = React33.useCallback(
|
|
1336
1340
|
(id, e) => {
|
|
1337
1341
|
const isTouchEvent = "touches" in e;
|
|
1338
1342
|
const clientX = isTouchEvent ? e.touches[0].clientX : e.clientX;
|
|
1339
1343
|
const clientY = isTouchEvent ? e.touches[0].clientY : e.clientY;
|
|
1340
|
-
|
|
1341
|
-
e.preventDefault();
|
|
1342
|
-
}
|
|
1344
|
+
e.preventDefault();
|
|
1343
1345
|
const currentPosition = positions[id] || { top: 0, left: 0 };
|
|
1344
1346
|
dragStartPos.current = {
|
|
1345
1347
|
x: clientX,
|
|
@@ -1357,6 +1359,9 @@ var useDrag = (options = {}) => {
|
|
|
1357
1359
|
(e) => {
|
|
1358
1360
|
if (!isDragging || !dragStartPos.current || !dragId.current) return;
|
|
1359
1361
|
const isTouchEvent = "touches" in e;
|
|
1362
|
+
if (isTouchEvent) {
|
|
1363
|
+
e.preventDefault();
|
|
1364
|
+
}
|
|
1360
1365
|
const clientX = isTouchEvent ? e.touches[0].clientX : e.clientX;
|
|
1361
1366
|
const clientY = isTouchEvent ? e.touches[0].clientY : e.clientY;
|
|
1362
1367
|
const deltaX = clientX - dragStartPos.current.x;
|
|
@@ -1391,18 +1396,25 @@ var useDrag = (options = {}) => {
|
|
|
1391
1396
|
}, [options]);
|
|
1392
1397
|
React33.useEffect(() => {
|
|
1393
1398
|
if (isDragging) {
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1399
|
+
const isTouchDev = isTouch.current;
|
|
1400
|
+
if (isTouchDev) {
|
|
1401
|
+
document.addEventListener("touchmove", handleMouseMove, {
|
|
1402
|
+
passive: false
|
|
1403
|
+
});
|
|
1404
|
+
document.addEventListener("touchend", handleMouseUp);
|
|
1405
|
+
} else {
|
|
1406
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
1407
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
1408
|
+
}
|
|
1400
1409
|
document.body.style.userSelect = "none";
|
|
1401
1410
|
return () => {
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1411
|
+
if (isTouchDev) {
|
|
1412
|
+
document.removeEventListener("touchmove", handleMouseMove);
|
|
1413
|
+
document.removeEventListener("touchend", handleMouseUp);
|
|
1414
|
+
} else {
|
|
1415
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
1416
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
1417
|
+
}
|
|
1406
1418
|
document.body.style.userSelect = "";
|
|
1407
1419
|
};
|
|
1408
1420
|
}
|
|
@@ -1662,7 +1674,7 @@ var ModalContentBase = React33__namespace.forwardRef(
|
|
|
1662
1674
|
{
|
|
1663
1675
|
ref,
|
|
1664
1676
|
className: cn(
|
|
1665
|
-
"fixed z-50 grid w-
|
|
1677
|
+
"fixed z-50 grid w-[calc(100%-2rem)] gap-3 sm:gap-4 border bg-background p-4 sm:p-6 shadow-lg rounded-md sm:rounded-lg max-h-[calc(100dvh-2rem)] sm:max-h-[90dvh] overflow-auto",
|
|
1666
1678
|
"data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out border-border",
|
|
1667
1679
|
positionClass,
|
|
1668
1680
|
sizeClass,
|
|
@@ -1672,7 +1684,7 @@ var ModalContentBase = React33__namespace.forwardRef(
|
|
|
1672
1684
|
...props,
|
|
1673
1685
|
children: [
|
|
1674
1686
|
children,
|
|
1675
|
-
/* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-
|
|
1687
|
+
/* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-2 top-2 sm:right-4 sm:top-4 rounded-md bg-muted/10 p-1.5 sm:p-1.5 opacity-80 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none z-10 hover:bg-muted/20 transition-colors", children: [
|
|
1676
1688
|
/* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "h-5 w-5 sm:h-4 sm:w-4 text-foreground" }),
|
|
1677
1689
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
|
|
1678
1690
|
] })
|
|
@@ -1688,7 +1700,7 @@ var ModalHeaderBase = React33__namespace.forwardRef(({ className, testid: dataTe
|
|
|
1688
1700
|
{
|
|
1689
1701
|
ref,
|
|
1690
1702
|
className: cn(
|
|
1691
|
-
"flex flex-col space-y-1.5 text-center sm:text-left",
|
|
1703
|
+
"flex flex-col space-y-1 sm:space-y-1.5 text-center sm:text-left pr-8 sm:pr-0",
|
|
1692
1704
|
className
|
|
1693
1705
|
),
|
|
1694
1706
|
"data-testid": dataTestId,
|
|
@@ -1701,7 +1713,7 @@ var ModalFooterBase = React33__namespace.forwardRef(({ className, testid: dataTe
|
|
|
1701
1713
|
{
|
|
1702
1714
|
ref,
|
|
1703
1715
|
className: cn(
|
|
1704
|
-
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
|
1716
|
+
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2 sm:gap-0",
|
|
1705
1717
|
className
|
|
1706
1718
|
),
|
|
1707
1719
|
"data-testid": dataTestId,
|
|
@@ -1902,7 +1914,7 @@ var CommandBase = React33__namespace.forwardRef(({ className, testid: dataTestId
|
|
|
1902
1914
|
{
|
|
1903
1915
|
ref,
|
|
1904
1916
|
className: cn(
|
|
1905
|
-
"flex h-full w-full flex-col overflow-hidden rounded-md bg-background text-popover-foreground",
|
|
1917
|
+
"flex h-full w-full flex-col overflow-hidden rounded-md bg-background text-popover-foreground border-border",
|
|
1906
1918
|
className
|
|
1907
1919
|
),
|
|
1908
1920
|
"data-testid": dataTestId,
|
|
@@ -1924,13 +1936,13 @@ var CommandDialogBase = ({ children, open, ...props }) => {
|
|
|
1924
1936
|
exit: "exit",
|
|
1925
1937
|
variants: dialogVariants,
|
|
1926
1938
|
transition: { duration: 0.2, ease: "easeOut" },
|
|
1927
|
-
className: "overflow-hidden p-0",
|
|
1939
|
+
className: "overflow-hidden p-0 ",
|
|
1928
1940
|
children: /* @__PURE__ */ jsxRuntime.jsx(CommandBase, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
|
|
1929
1941
|
},
|
|
1930
1942
|
"command-dialog"
|
|
1931
1943
|
) }) }) });
|
|
1932
1944
|
};
|
|
1933
|
-
var CommandInputBase = React33__namespace.forwardRef(({ className, testid: dataTestId = "command-input", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
|
|
1945
|
+
var CommandInputBase = React33__namespace.forwardRef(({ className, testid: dataTestId = "command-input", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b px-3 border-border", "cmdk-input-wrapper": "", children: [
|
|
1934
1946
|
/* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 text-primary" }),
|
|
1935
1947
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1936
1948
|
cmdk.Command.Input,
|
|
@@ -2127,6 +2139,7 @@ function ComboboxBase({
|
|
|
2127
2139
|
hideClear = false
|
|
2128
2140
|
}) {
|
|
2129
2141
|
const [open, setOpen] = React33.useState(false);
|
|
2142
|
+
const isMobile = useIsMobile();
|
|
2130
2143
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2131
2144
|
"div",
|
|
2132
2145
|
{
|
|
@@ -2138,7 +2151,7 @@ function ComboboxBase({
|
|
|
2138
2151
|
{
|
|
2139
2152
|
open,
|
|
2140
2153
|
onOpenChange: (v) => !disabled && setOpen(v),
|
|
2141
|
-
modal:
|
|
2154
|
+
modal: isMobile,
|
|
2142
2155
|
children: [
|
|
2143
2156
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2144
2157
|
PopoverTriggerBase,
|
|
@@ -2588,7 +2601,7 @@ function MultiSelectValueBase({
|
|
|
2588
2601
|
{
|
|
2589
2602
|
"data-selected-item": true,
|
|
2590
2603
|
size: "sm",
|
|
2591
|
-
className: "group flex items-center gap-1",
|
|
2604
|
+
className: "group flex items-center gap-1 border-border",
|
|
2592
2605
|
onClick: clickToRemove ? (e) => {
|
|
2593
2606
|
e.stopPropagation();
|
|
2594
2607
|
toggleValue(value);
|
|
@@ -2628,7 +2641,7 @@ function MultiSelectContentBase({
|
|
|
2628
2641
|
PopoverContentBase,
|
|
2629
2642
|
{
|
|
2630
2643
|
forceMount: true,
|
|
2631
|
-
className: "w-[--radix-popover-trigger-width] relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md p-0",
|
|
2644
|
+
className: "w-[--radix-popover-trigger-width] relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md p-0 border-border",
|
|
2632
2645
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2633
2646
|
framerMotion.motion.div,
|
|
2634
2647
|
{
|
|
@@ -2653,8 +2666,8 @@ function MultiSelectContentBase({
|
|
|
2653
2666
|
{
|
|
2654
2667
|
placeholder: typeof search === "object" ? search.placeholder : void 0
|
|
2655
2668
|
}
|
|
2656
|
-
) : /* @__PURE__ */ jsxRuntime.jsx("button", { autoFocus: true, className: "sr-only" }),
|
|
2657
|
-
/* @__PURE__ */ jsxRuntime.jsxs(CommandListBase, { children: [
|
|
2669
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("button", { autoFocus: true, className: "sr-only " }),
|
|
2670
|
+
/* @__PURE__ */ jsxRuntime.jsxs(CommandListBase, { className: "border-border", children: [
|
|
2658
2671
|
canSearch && /* @__PURE__ */ jsxRuntime.jsx(CommandEmptyBase, { children: typeof search === "object" ? search.emptyMessage ?? emptyMessage : emptyMessage }),
|
|
2659
2672
|
children
|
|
2660
2673
|
] })
|
|
@@ -2711,7 +2724,7 @@ function useMultiSelectContext() {
|
|
|
2711
2724
|
const context = React33.useContext(MultiSelectContext);
|
|
2712
2725
|
if (context == null) {
|
|
2713
2726
|
throw new Error(
|
|
2714
|
-
"useMultiSelectContext must be used within a MultiSelectContext"
|
|
2727
|
+
"useMultiSelectContext must be used within a MultiSelectContext "
|
|
2715
2728
|
);
|
|
2716
2729
|
}
|
|
2717
2730
|
return context;
|
|
@@ -2896,7 +2909,7 @@ var SelectContentBase = React33__namespace.forwardRef(
|
|
|
2896
2909
|
{
|
|
2897
2910
|
className: cn(
|
|
2898
2911
|
"p-1",
|
|
2899
|
-
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
|
|
2912
|
+
position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] max-w-[var(--radix-select-trigger-width)]"
|
|
2900
2913
|
),
|
|
2901
2914
|
children
|
|
2902
2915
|
}
|
|
@@ -2960,6 +2973,20 @@ var SelectSeparatorBase = React33__namespace.forwardRef(({ className, ...props }
|
|
|
2960
2973
|
}
|
|
2961
2974
|
));
|
|
2962
2975
|
SelectSeparatorBase.displayName = SelectPrimitive__namespace.Separator.displayName;
|
|
2976
|
+
var SelectEmpty = React33__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2977
|
+
"div",
|
|
2978
|
+
{
|
|
2979
|
+
ref,
|
|
2980
|
+
className: cn(
|
|
2981
|
+
"w-full min-h-[3rem] flex items-center justify-center px-4 py-3 text-sm text-center",
|
|
2982
|
+
className
|
|
2983
|
+
),
|
|
2984
|
+
...props,
|
|
2985
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block w-full break-words hyphens-auto", children })
|
|
2986
|
+
}
|
|
2987
|
+
));
|
|
2988
|
+
SelectEmpty.displayName = "SelectEmpty";
|
|
2989
|
+
SelectItemBase.displayName = SelectPrimitive__namespace.Item.displayName;
|
|
2963
2990
|
var DropDownMenuBase = DropdownMenuPrimitive__namespace.Root;
|
|
2964
2991
|
var DropDownMenuTriggerBase = DropdownMenuPrimitive__namespace.Trigger;
|
|
2965
2992
|
var DropDownMenuGroupBase = DropdownMenuPrimitive__namespace.Group;
|
|
@@ -3220,36 +3247,45 @@ function ModeToggleBase({
|
|
|
3220
3247
|
}, []);
|
|
3221
3248
|
const isDark = mounted && (currentTheme?.includes("dark") || currentTheme === "system" && typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches);
|
|
3222
3249
|
const toggleTheme = async (newTheme) => {
|
|
3223
|
-
if (!buttonRef.current
|
|
3250
|
+
if (!buttonRef.current) {
|
|
3224
3251
|
setTheme(newTheme);
|
|
3225
3252
|
return;
|
|
3226
3253
|
}
|
|
3227
|
-
const
|
|
3228
|
-
|
|
3229
|
-
const y = rect.top + rect.height / 2;
|
|
3230
|
-
const endRadius = Math.hypot(
|
|
3231
|
-
Math.max(x, window.innerWidth - x),
|
|
3232
|
-
Math.max(y, window.innerHeight - y)
|
|
3233
|
-
);
|
|
3234
|
-
const transition = document.startViewTransition(async () => {
|
|
3254
|
+
const supportsViewTransition = typeof document !== "undefined" && "startViewTransition" in document && typeof document.startViewTransition === "function";
|
|
3255
|
+
if (!supportsViewTransition) {
|
|
3235
3256
|
setTheme(newTheme);
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3257
|
+
return;
|
|
3258
|
+
}
|
|
3259
|
+
try {
|
|
3260
|
+
const rect = buttonRef.current.getBoundingClientRect();
|
|
3261
|
+
const x = rect.left + rect.width / 2;
|
|
3262
|
+
const y = rect.top + rect.height / 2;
|
|
3263
|
+
const endRadius = Math.hypot(
|
|
3264
|
+
Math.max(x, window.innerWidth - x),
|
|
3265
|
+
Math.max(y, window.innerHeight - y)
|
|
3266
|
+
);
|
|
3267
|
+
const transition = document.startViewTransition(async () => {
|
|
3268
|
+
setTheme(newTheme);
|
|
3269
|
+
});
|
|
3270
|
+
await transition.ready;
|
|
3271
|
+
document.documentElement.animate(
|
|
3272
|
+
[
|
|
3273
|
+
{
|
|
3274
|
+
clipPath: `circle(0px at ${x}px ${y}px)`
|
|
3275
|
+
},
|
|
3276
|
+
{
|
|
3277
|
+
clipPath: `circle(${Math.ceil(endRadius)}px at ${x}px ${y}px)`
|
|
3278
|
+
}
|
|
3279
|
+
],
|
|
3243
3280
|
{
|
|
3244
|
-
|
|
3281
|
+
duration: 400,
|
|
3282
|
+
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
3283
|
+
pseudoElement: "::view-transition-new(root)"
|
|
3245
3284
|
}
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
pseudoElement: "::view-transition-new(root)"
|
|
3251
|
-
}
|
|
3252
|
-
);
|
|
3285
|
+
);
|
|
3286
|
+
} catch {
|
|
3287
|
+
setTheme(newTheme);
|
|
3288
|
+
}
|
|
3253
3289
|
};
|
|
3254
3290
|
return /* @__PURE__ */ jsxRuntime.jsxs(DropDownMenuBase, { children: [
|
|
3255
3291
|
/* @__PURE__ */ jsxRuntime.jsx(DropDownMenuTriggerBase, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -3258,10 +3294,7 @@ function ModeToggleBase({
|
|
|
3258
3294
|
ref: buttonRef,
|
|
3259
3295
|
variant,
|
|
3260
3296
|
size: "icon",
|
|
3261
|
-
className: cn(
|
|
3262
|
-
"relative overflow-hidden group",
|
|
3263
|
-
className
|
|
3264
|
-
),
|
|
3297
|
+
className: cn("relative overflow-hidden group", className),
|
|
3265
3298
|
children: [
|
|
3266
3299
|
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
3267
3300
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -7651,6 +7684,10 @@ function useScrollColumn({
|
|
|
7651
7684
|
const [scrollTop, setScrollTop] = React33.useState(0);
|
|
7652
7685
|
const scrollTimeoutRef = React33.useRef(null);
|
|
7653
7686
|
const isTouchRef = React33.useRef(false);
|
|
7687
|
+
const velocityRef = React33.useRef(0);
|
|
7688
|
+
const lastTouchY = React33.useRef(0);
|
|
7689
|
+
const lastTouchTime = React33.useRef(0);
|
|
7690
|
+
const momentumAnimationRef = React33.useRef(null);
|
|
7654
7691
|
const itemHeight = ITEM_HEIGHT;
|
|
7655
7692
|
const centerIndex = CENTER_INDEX;
|
|
7656
7693
|
const visibleItems = VISIBLE_ITEMS;
|
|
@@ -7668,8 +7705,12 @@ function useScrollColumn({
|
|
|
7668
7705
|
}
|
|
7669
7706
|
}, [value, isDragging, itemHeight, step, items.length]);
|
|
7670
7707
|
React33.useEffect(() => {
|
|
7708
|
+
const animationRef = momentumAnimationRef.current;
|
|
7671
7709
|
return () => {
|
|
7672
7710
|
if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
|
|
7711
|
+
if (animationRef) {
|
|
7712
|
+
cancelAnimationFrame(animationRef);
|
|
7713
|
+
}
|
|
7673
7714
|
};
|
|
7674
7715
|
}, []);
|
|
7675
7716
|
const handleScroll = (e) => {
|
|
@@ -7689,27 +7730,77 @@ function useScrollColumn({
|
|
|
7689
7730
|
};
|
|
7690
7731
|
const handleStart = (pageY) => {
|
|
7691
7732
|
if (!containerRef.current) return;
|
|
7733
|
+
if (momentumAnimationRef.current) {
|
|
7734
|
+
cancelAnimationFrame(momentumAnimationRef.current);
|
|
7735
|
+
momentumAnimationRef.current = null;
|
|
7736
|
+
}
|
|
7692
7737
|
setIsDragging(true);
|
|
7693
7738
|
setStartY(pageY);
|
|
7694
7739
|
setScrollTop(containerRef.current.scrollTop);
|
|
7740
|
+
velocityRef.current = 0;
|
|
7741
|
+
lastTouchY.current = pageY;
|
|
7742
|
+
lastTouchTime.current = Date.now();
|
|
7695
7743
|
};
|
|
7696
7744
|
const handleMove = (pageY) => {
|
|
7697
7745
|
if (!isDragging || !containerRef.current) return;
|
|
7698
|
-
const
|
|
7746
|
+
const now = Date.now();
|
|
7747
|
+
const timeDelta = now - lastTouchTime.current;
|
|
7748
|
+
if (timeDelta > 0) {
|
|
7749
|
+
const delta = pageY - lastTouchY.current;
|
|
7750
|
+
velocityRef.current = delta / timeDelta;
|
|
7751
|
+
}
|
|
7752
|
+
lastTouchY.current = pageY;
|
|
7753
|
+
lastTouchTime.current = now;
|
|
7754
|
+
const multiplier = isTouchRef.current ? 1 : 1;
|
|
7699
7755
|
containerRef.current.scrollTop = scrollTop + (startY - pageY) * multiplier;
|
|
7700
7756
|
};
|
|
7701
7757
|
const handleEnd = () => {
|
|
7702
7758
|
if (!containerRef.current) return;
|
|
7703
7759
|
setIsDragging(false);
|
|
7704
|
-
|
|
7705
|
-
|
|
7706
|
-
const
|
|
7707
|
-
const
|
|
7708
|
-
|
|
7709
|
-
containerRef.current
|
|
7710
|
-
|
|
7711
|
-
|
|
7712
|
-
|
|
7760
|
+
if (isTouchRef.current && Math.abs(velocityRef.current) > 0.1) {
|
|
7761
|
+
let velocity = velocityRef.current * -30;
|
|
7762
|
+
const friction = 0.92;
|
|
7763
|
+
const minVelocity = 0.5;
|
|
7764
|
+
const animate = () => {
|
|
7765
|
+
if (!containerRef.current) return;
|
|
7766
|
+
velocity *= friction;
|
|
7767
|
+
if (Math.abs(velocity) < minVelocity) {
|
|
7768
|
+
const newIndex = Math.round(
|
|
7769
|
+
containerRef.current.scrollTop / itemHeight
|
|
7770
|
+
);
|
|
7771
|
+
const newValue = items[newIndex];
|
|
7772
|
+
if (newValue !== void 0) {
|
|
7773
|
+
const targetScroll = newIndex * itemHeight;
|
|
7774
|
+
const currentScroll = containerRef.current.scrollTop;
|
|
7775
|
+
const diff = targetScroll - currentScroll;
|
|
7776
|
+
if (Math.abs(diff) > 0.5) {
|
|
7777
|
+
containerRef.current.scrollTop += diff * 0.3;
|
|
7778
|
+
momentumAnimationRef.current = requestAnimationFrame(animate);
|
|
7779
|
+
} else {
|
|
7780
|
+
containerRef.current.scrollTop = targetScroll;
|
|
7781
|
+
onChange(newValue);
|
|
7782
|
+
momentumAnimationRef.current = null;
|
|
7783
|
+
}
|
|
7784
|
+
}
|
|
7785
|
+
return;
|
|
7786
|
+
}
|
|
7787
|
+
containerRef.current.scrollTop += velocity;
|
|
7788
|
+
momentumAnimationRef.current = requestAnimationFrame(animate);
|
|
7789
|
+
};
|
|
7790
|
+
momentumAnimationRef.current = requestAnimationFrame(animate);
|
|
7791
|
+
} else {
|
|
7792
|
+
requestAnimationFrame(() => {
|
|
7793
|
+
if (!containerRef.current) return;
|
|
7794
|
+
const newIndex = Math.round(
|
|
7795
|
+
containerRef.current.scrollTop / itemHeight
|
|
7796
|
+
);
|
|
7797
|
+
const newValue = items[newIndex];
|
|
7798
|
+
if (newValue !== void 0) {
|
|
7799
|
+
containerRef.current.scrollTop = newIndex * itemHeight;
|
|
7800
|
+
onChange(newValue);
|
|
7801
|
+
}
|
|
7802
|
+
});
|
|
7803
|
+
}
|
|
7713
7804
|
};
|
|
7714
7805
|
const handlers = {
|
|
7715
7806
|
onScroll: handleScroll,
|
|
@@ -8172,7 +8263,7 @@ function DateTimePicker({
|
|
|
8172
8263
|
}
|
|
8173
8264
|
),
|
|
8174
8265
|
/* @__PURE__ */ jsxRuntime.jsx(ErrorMessage_default, { error }),
|
|
8175
|
-
/* @__PURE__ */ jsxRuntime.jsx(DialogContentBase, { className: "p-0 max-h-[65vh] w-[calc(100vw-24px)] sm:w-[calc(100vw-32px)] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1", children: renderPickerContent() }) })
|
|
8266
|
+
/* @__PURE__ */ jsxRuntime.jsx(DialogContentBase, { className: "p-0 max-h-[65vh] w-[calc(100vw-24px)] sm:w-[calc(100vw-32px)] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1 ", children: renderPickerContent() }) })
|
|
8176
8267
|
] }) : /* @__PURE__ */ jsxRuntime.jsxs(PopoverBase, { open, onOpenChange: setOpen, children: [
|
|
8177
8268
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
8178
8269
|
PopoverTriggerBase,
|
|
@@ -9897,7 +9988,7 @@ function Select({
|
|
|
9897
9988
|
]
|
|
9898
9989
|
}
|
|
9899
9990
|
),
|
|
9900
|
-
/* @__PURE__ */ jsxRuntime.jsx(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ jsxRuntime.jsx(SelectContentBase, { "data-testid": testIds.content ?? "select-content", children:
|
|
9991
|
+
/* @__PURE__ */ jsxRuntime.jsx(ScrollAreaBase, { "data-testid": testIds.scrollarea ?? "select-scrollarea", children: /* @__PURE__ */ jsxRuntime.jsx(SelectContentBase, { "data-testid": testIds.content ?? "select-content", children: pagination && pagination > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
9901
9992
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
9902
9993
|
"div",
|
|
9903
9994
|
{
|
|
@@ -9972,7 +10063,7 @@ function Select({
|
|
|
9972
10063
|
}
|
|
9973
10064
|
)
|
|
9974
10065
|
] })
|
|
9975
|
-
] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: groupItems ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.keys(groupItems).map((key) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10066
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: groupItems ? Object.keys(groupItems).length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.keys(groupItems).map((key) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
9976
10067
|
SelectGroupBase,
|
|
9977
10068
|
{
|
|
9978
10069
|
"data-testid": testIds.group ?? "select-group",
|
|
@@ -9996,7 +10087,7 @@ function Select({
|
|
|
9996
10087
|
]
|
|
9997
10088
|
},
|
|
9998
10089
|
key
|
|
9999
|
-
)) }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
10090
|
+
)) }) : /* @__PURE__ */ jsxRuntime.jsx(SelectEmpty, { "data-testid": testIds.empty ?? "select-empty", children: empty ?? "Nenhum item dispon\xEDvel" }) : items && items.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
10000
10091
|
SelectGroupBase,
|
|
10001
10092
|
{
|
|
10002
10093
|
"data-testid": testIds.group ?? "select-group",
|
|
@@ -10010,7 +10101,7 @@ function Select({
|
|
|
10010
10101
|
item.value
|
|
10011
10102
|
))
|
|
10012
10103
|
}
|
|
10013
|
-
) }) }) }) })
|
|
10104
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(SelectEmpty, { "data-testid": testIds.empty ?? "select-empty", children: empty ?? "Nenhum item dispon\xEDvel" }) }) }) })
|
|
10014
10105
|
]
|
|
10015
10106
|
}
|
|
10016
10107
|
),
|
|
@@ -13822,7 +13913,7 @@ function MultiSelect({
|
|
|
13822
13913
|
MultiSelectTriggerBase,
|
|
13823
13914
|
{
|
|
13824
13915
|
className: cn(
|
|
13825
|
-
"flex items-center gap-2 justify-between",
|
|
13916
|
+
"flex items-center gap-2 justify-between hover:bg-muted transition-all duration-150",
|
|
13826
13917
|
error && "border-red-500",
|
|
13827
13918
|
className
|
|
13828
13919
|
),
|
|
@@ -14848,6 +14939,24 @@ var DraggableTooltipComponent = ({
|
|
|
14848
14939
|
if (onPositionChange) onPositionChange(id, snapped);
|
|
14849
14940
|
});
|
|
14850
14941
|
};
|
|
14942
|
+
const handleTouchMove = (e) => {
|
|
14943
|
+
if (!dragging || !e.touches[0]) return;
|
|
14944
|
+
e.preventDefault();
|
|
14945
|
+
lastMouse.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
|
|
14946
|
+
if (rafId) cancelAnimationFrame(rafId);
|
|
14947
|
+
rafId = requestAnimationFrame(() => {
|
|
14948
|
+
const newLeft = lastMouse.current.x - offsetRef.current.x;
|
|
14949
|
+
const newTop = lastMouse.current.y - offsetRef.current.y;
|
|
14950
|
+
const rawPosition = {
|
|
14951
|
+
top: Math.max(0, Math.min(newTop, window.innerHeight - 200)),
|
|
14952
|
+
left: Math.max(0, Math.min(newLeft, window.innerWidth - 250))
|
|
14953
|
+
};
|
|
14954
|
+
updateAlignmentGuides(rawPosition);
|
|
14955
|
+
const snapped = snapToGuides(rawPosition);
|
|
14956
|
+
setLocalPos(snapped);
|
|
14957
|
+
if (onPositionChange) onPositionChange(id, snapped);
|
|
14958
|
+
});
|
|
14959
|
+
};
|
|
14851
14960
|
const handleMouseUp = () => {
|
|
14852
14961
|
if (dragging) {
|
|
14853
14962
|
setDragging(false);
|
|
@@ -14855,11 +14964,23 @@ var DraggableTooltipComponent = ({
|
|
|
14855
14964
|
if (rafId) cancelAnimationFrame(rafId);
|
|
14856
14965
|
}
|
|
14857
14966
|
};
|
|
14967
|
+
const handleTouchEnd = () => {
|
|
14968
|
+
if (dragging) {
|
|
14969
|
+
setDragging(false);
|
|
14970
|
+
setAlignmentGuides([]);
|
|
14971
|
+
if (rafId) cancelAnimationFrame(rafId);
|
|
14972
|
+
}
|
|
14973
|
+
};
|
|
14858
14974
|
if (dragging) {
|
|
14859
14975
|
document.addEventListener("mousemove", handleMouseMove, {
|
|
14860
14976
|
passive: true
|
|
14861
14977
|
});
|
|
14862
14978
|
document.addEventListener("mouseup", handleMouseUp);
|
|
14979
|
+
document.addEventListener("touchmove", handleTouchMove, {
|
|
14980
|
+
passive: false
|
|
14981
|
+
// Permite preventDefault para evitar scroll
|
|
14982
|
+
});
|
|
14983
|
+
document.addEventListener("touchend", handleTouchEnd);
|
|
14863
14984
|
document.body.style.cursor = "grabbing";
|
|
14864
14985
|
document.body.style.userSelect = "none";
|
|
14865
14986
|
}
|
|
@@ -14867,6 +14988,8 @@ var DraggableTooltipComponent = ({
|
|
|
14867
14988
|
if (rafId) cancelAnimationFrame(rafId);
|
|
14868
14989
|
document.removeEventListener("mousemove", handleMouseMove);
|
|
14869
14990
|
document.removeEventListener("mouseup", handleMouseUp);
|
|
14991
|
+
document.removeEventListener("touchmove", handleTouchMove);
|
|
14992
|
+
document.removeEventListener("touchend", handleTouchEnd);
|
|
14870
14993
|
document.body.style.cursor = "";
|
|
14871
14994
|
document.body.style.userSelect = "";
|
|
14872
14995
|
};
|
|
@@ -14951,6 +15074,7 @@ var DraggableTooltipComponent = ({
|
|
|
14951
15074
|
);
|
|
14952
15075
|
const handleTouchStartLocal = React33.useCallback(
|
|
14953
15076
|
(e) => {
|
|
15077
|
+
e.preventDefault();
|
|
14954
15078
|
e.stopPropagation();
|
|
14955
15079
|
const touch = e.touches[0];
|
|
14956
15080
|
if (!touch) return;
|
|
@@ -17023,13 +17147,13 @@ var Chart = ({
|
|
|
17023
17147
|
"div",
|
|
17024
17148
|
{
|
|
17025
17149
|
ref: wrapperRef,
|
|
17026
|
-
className: cn("w-full overflow-hidden min-w-0 rounded-lg", className),
|
|
17027
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0", children: [
|
|
17150
|
+
className: cn("w-full overflow-hidden min-w-0 rounded-lg border-border", className),
|
|
17151
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1", children: [
|
|
17028
17152
|
title && /* @__PURE__ */ jsxRuntime.jsx(
|
|
17029
17153
|
"div",
|
|
17030
17154
|
{
|
|
17031
17155
|
className: cn(
|
|
17032
|
-
"w-full flex items-center mt-
|
|
17156
|
+
"w-full flex items-center mt-3 mb-2",
|
|
17033
17157
|
HORIZONTAL_PADDING_CLASS,
|
|
17034
17158
|
titlePosition === "center" && "justify-center",
|
|
17035
17159
|
titlePosition === "right" && "justify-end",
|
|
@@ -17479,1284 +17603,59 @@ var Chart = ({
|
|
|
17479
17603
|
);
|
|
17480
17604
|
};
|
|
17481
17605
|
var Chart_default = Chart;
|
|
17482
|
-
var
|
|
17483
|
-
|
|
17484
|
-
|
|
17485
|
-
|
|
17486
|
-
|
|
17487
|
-
|
|
17488
|
-
|
|
17489
|
-
|
|
17490
|
-
|
|
17491
|
-
|
|
17492
|
-
|
|
17493
|
-
|
|
17494
|
-
|
|
17495
|
-
|
|
17496
|
-
|
|
17497
|
-
|
|
17498
|
-
|
|
17499
|
-
|
|
17500
|
-
|
|
17501
|
-
|
|
17502
|
-
|
|
17503
|
-
|
|
17504
|
-
|
|
17606
|
+
var defaultData = [
|
|
17607
|
+
{ name: "Vendas", value: 4e3 },
|
|
17608
|
+
{ name: "Marketing", value: 3e3 },
|
|
17609
|
+
{ name: "Desenvolvimento", value: 2e3 },
|
|
17610
|
+
{ name: "Suporte", value: 1e3 },
|
|
17611
|
+
{ name: "Outros", value: 800 }
|
|
17612
|
+
];
|
|
17613
|
+
var DEFAULT_COLORS3 = [
|
|
17614
|
+
"#55af7d",
|
|
17615
|
+
// verde do projeto
|
|
17616
|
+
"#8e68ff",
|
|
17617
|
+
// roxo do projeto
|
|
17618
|
+
"#2273e1",
|
|
17619
|
+
// azul do projeto
|
|
17620
|
+
"#f59e0b",
|
|
17621
|
+
// amarelo complementar
|
|
17622
|
+
"#ef4444",
|
|
17623
|
+
// vermelho complementar
|
|
17624
|
+
"#8b5cf6",
|
|
17625
|
+
// roxo claro
|
|
17626
|
+
"#06b6d4",
|
|
17627
|
+
// ciano
|
|
17628
|
+
"#84cc16"
|
|
17629
|
+
// verde lima
|
|
17630
|
+
];
|
|
17631
|
+
var RADIAN = Math.PI / 180;
|
|
17632
|
+
var renderCustomizedLabel = ({
|
|
17633
|
+
cx = 0,
|
|
17634
|
+
cy = 0,
|
|
17635
|
+
midAngle = 0,
|
|
17636
|
+
innerRadius = 0,
|
|
17637
|
+
outerRadius = 0,
|
|
17638
|
+
percent = 0
|
|
17505
17639
|
}) => {
|
|
17506
|
-
const
|
|
17507
|
-
|
|
17508
|
-
|
|
17509
|
-
|
|
17510
|
-
|
|
17511
|
-
|
|
17512
|
-
|
|
17513
|
-
|
|
17514
|
-
|
|
17515
|
-
|
|
17516
|
-
|
|
17517
|
-
|
|
17518
|
-
|
|
17519
|
-
|
|
17520
|
-
autoLabel: true
|
|
17521
|
-
},
|
|
17522
|
-
mapperConfig: detectedFields.reduce((acc, field) => {
|
|
17523
|
-
acc[field] = {
|
|
17524
|
-
label: labelMap?.[field] ?? formatFieldName(field),
|
|
17525
|
-
type: "number",
|
|
17526
|
-
visible: true
|
|
17527
|
-
};
|
|
17528
|
-
return acc;
|
|
17529
|
-
}, {})
|
|
17530
|
-
};
|
|
17531
|
-
}
|
|
17532
|
-
const xAxisConfig2 = typeof xAxis === "string" ? { dataKey: xAxis, label: formatFieldName(xAxis), autoLabel: true } : xAxis;
|
|
17533
|
-
let mapperConfig2;
|
|
17534
|
-
if (Array.isArray(providedMapper)) {
|
|
17535
|
-
mapperConfig2 = providedMapper.reduce((acc, field) => {
|
|
17536
|
-
acc[field] = {
|
|
17537
|
-
label: labelMap?.[field] ?? formatFieldName(field),
|
|
17538
|
-
type: "auto",
|
|
17539
|
-
visible: true
|
|
17540
|
-
};
|
|
17541
|
-
return acc;
|
|
17542
|
-
}, {});
|
|
17543
|
-
} else {
|
|
17544
|
-
mapperConfig2 = Object.keys(providedMapper).reduce(
|
|
17545
|
-
(acc, key) => {
|
|
17546
|
-
acc[key] = {
|
|
17547
|
-
label: providedMapper[key]?.label ?? labelMap?.[key] ?? formatFieldName(key),
|
|
17548
|
-
type: "auto",
|
|
17549
|
-
visible: true,
|
|
17550
|
-
...providedMapper[key]
|
|
17551
|
-
// Sobrescreve com configurações do usuário
|
|
17552
|
-
};
|
|
17553
|
-
return acc;
|
|
17554
|
-
},
|
|
17555
|
-
{}
|
|
17556
|
-
);
|
|
17557
|
-
}
|
|
17558
|
-
return { xAxisConfig: xAxisConfig2, mapperConfig: mapperConfig2 };
|
|
17559
|
-
}, [data, xAxis, mapper, yAxis, autoDetect, labelMap]);
|
|
17560
|
-
const { xAxisConfig, mapperConfig } = smartConfig;
|
|
17561
|
-
const [activeTooltips, setActiveTooltips] = React33.useState([]);
|
|
17562
|
-
const [isDragging, setIsDragging] = React33.useState(null);
|
|
17563
|
-
const [dragOffset, setDragOffset] = React33.useState({
|
|
17564
|
-
x: 0,
|
|
17565
|
-
y: 0
|
|
17566
|
-
});
|
|
17567
|
-
const [globalTooltipCount, setGlobalTooltipCount] = React33.useState(0);
|
|
17568
|
-
const [alignmentGuides, setAlignmentGuides] = React33.useState([]);
|
|
17569
|
-
const processedData = data.map((item) => ({
|
|
17570
|
-
...item,
|
|
17571
|
-
name: String(item[xAxisConfig.dataKey] || "N/A")
|
|
17572
|
-
// Garantir propriedade 'name' para tooltip
|
|
17573
|
-
}));
|
|
17574
|
-
const generateColors = (dataKeys2) => {
|
|
17575
|
-
const colorMap = {};
|
|
17576
|
-
const allColors = generateAdditionalColors(colors2, dataKeys2.length);
|
|
17577
|
-
dataKeys2.forEach((key, index) => {
|
|
17578
|
-
colorMap[key] = allColors[index] || colors2[index % colors2.length];
|
|
17579
|
-
});
|
|
17580
|
-
return colorMap;
|
|
17581
|
-
};
|
|
17582
|
-
const dataKeys = Object.keys(mapperConfig);
|
|
17583
|
-
const finalColors = generateColors(dataKeys);
|
|
17584
|
-
const adaptDataForTooltip2 = (universalData) => {
|
|
17585
|
-
return {
|
|
17586
|
-
...universalData,
|
|
17587
|
-
name: String(universalData[xAxisConfig.dataKey] || "N/A")
|
|
17588
|
-
// Garantir que tem a propriedade 'name'
|
|
17589
|
-
};
|
|
17590
|
-
};
|
|
17591
|
-
const maxDataValue = React33.useMemo(() => {
|
|
17592
|
-
let max = 0;
|
|
17593
|
-
const keys = Object.keys(mapperConfig);
|
|
17594
|
-
for (const row of processedData) {
|
|
17595
|
-
const r = row;
|
|
17596
|
-
for (const key of keys) {
|
|
17597
|
-
const v = r[key];
|
|
17598
|
-
if (typeof v === "number" && Number.isFinite(v) && v > max)
|
|
17599
|
-
max = v;
|
|
17600
|
-
}
|
|
17601
|
-
}
|
|
17602
|
-
return max;
|
|
17603
|
-
}, [processedData, mapperConfig]);
|
|
17604
|
-
const niceMax = React33.useMemo(() => {
|
|
17605
|
-
let padding2 = 0.08;
|
|
17606
|
-
if (maxDataValue > 1e6) padding2 = 0.05;
|
|
17607
|
-
if (maxDataValue > 1e7) padding2 = 0.03;
|
|
17608
|
-
if (maxDataValue === 0) padding2 = 0.12;
|
|
17609
|
-
const padded = maxDataValue * (1 + padding2);
|
|
17610
|
-
return niceCeil(padded);
|
|
17611
|
-
}, [maxDataValue]);
|
|
17612
|
-
const handleBarClick = (data2, index, event) => {
|
|
17613
|
-
event.stopPropagation();
|
|
17614
|
-
const xAxisValue = data2[xAxisConfig.dataKey] || "N/A";
|
|
17615
|
-
const tooltipId = `${xAxisValue}`;
|
|
17616
|
-
const rect = event.target.getBoundingClientRect();
|
|
17617
|
-
const existingIndex = activeTooltips.findIndex(
|
|
17618
|
-
(tooltip) => tooltip.id === tooltipId
|
|
17619
|
-
);
|
|
17620
|
-
if (existingIndex !== -1) {
|
|
17621
|
-
setActiveTooltips(
|
|
17622
|
-
(prev) => prev.filter((tooltip) => tooltip.id !== tooltipId)
|
|
17623
|
-
);
|
|
17624
|
-
} else {
|
|
17625
|
-
const newTooltip = {
|
|
17626
|
-
id: tooltipId,
|
|
17627
|
-
data: data2,
|
|
17628
|
-
position: {
|
|
17629
|
-
top: rect.top - 10,
|
|
17630
|
-
// Posição fixa da viewport
|
|
17631
|
-
left: rect.right + 10
|
|
17632
|
-
// À direita da barra clicada
|
|
17633
|
-
}
|
|
17634
|
-
};
|
|
17635
|
-
setActiveTooltips((prev) => [...prev, newTooltip]);
|
|
17636
|
-
}
|
|
17637
|
-
};
|
|
17638
|
-
const handleChartClick = () => {
|
|
17639
|
-
setActiveTooltips([]);
|
|
17640
|
-
};
|
|
17641
|
-
const ALIGNMENT_THRESHOLD2 = 25;
|
|
17642
|
-
const GUIDE_THRESHOLD2 = 60;
|
|
17643
|
-
const STRONG_SNAP_THRESHOLD2 = 35;
|
|
17644
|
-
const PRECISION_SNAP_THRESHOLD2 = 8;
|
|
17645
|
-
const updateAlignmentGuides = React33.useCallback(
|
|
17646
|
-
(draggedTooltipId, currentPosition) => {
|
|
17647
|
-
if (!isDragging) return;
|
|
17648
|
-
const getAllTooltips = () => {
|
|
17649
|
-
const allTooltips2 = [];
|
|
17650
|
-
allTooltips2.push(...activeTooltips);
|
|
17651
|
-
const globalEvent = new CustomEvent("requestGlobalTooltips", {
|
|
17652
|
-
detail: { requesterId: draggedTooltipId, response: allTooltips2 }
|
|
17653
|
-
});
|
|
17654
|
-
window.dispatchEvent(globalEvent);
|
|
17655
|
-
return allTooltips2;
|
|
17656
|
-
};
|
|
17657
|
-
const allTooltips = getAllTooltips();
|
|
17658
|
-
const otherTooltips = allTooltips.filter(
|
|
17659
|
-
(t) => t.id !== draggedTooltipId
|
|
17660
|
-
);
|
|
17661
|
-
const guides = [];
|
|
17662
|
-
const tooltipDimensions = { width: 224, height: 120 };
|
|
17663
|
-
otherTooltips.forEach((tooltip) => {
|
|
17664
|
-
const topDiff = Math.abs(currentPosition.top - tooltip.position.top);
|
|
17665
|
-
if (topDiff <= GUIDE_THRESHOLD2) {
|
|
17666
|
-
guides.push({
|
|
17667
|
-
type: "horizontal",
|
|
17668
|
-
position: tooltip.position.top,
|
|
17669
|
-
visible: true,
|
|
17670
|
-
sourceTooltip: {
|
|
17671
|
-
top: currentPosition.top,
|
|
17672
|
-
left: currentPosition.left,
|
|
17673
|
-
width: tooltipDimensions.width,
|
|
17674
|
-
height: tooltipDimensions.height
|
|
17675
|
-
},
|
|
17676
|
-
targetTooltip: {
|
|
17677
|
-
top: tooltip.position.top,
|
|
17678
|
-
left: tooltip.position.left,
|
|
17679
|
-
width: tooltipDimensions.width,
|
|
17680
|
-
height: tooltipDimensions.height
|
|
17681
|
-
}
|
|
17682
|
-
});
|
|
17683
|
-
}
|
|
17684
|
-
const leftDiff = Math.abs(currentPosition.left - tooltip.position.left);
|
|
17685
|
-
if (leftDiff <= GUIDE_THRESHOLD2) {
|
|
17686
|
-
guides.push({
|
|
17687
|
-
type: "vertical",
|
|
17688
|
-
position: tooltip.position.left,
|
|
17689
|
-
visible: true,
|
|
17690
|
-
sourceTooltip: {
|
|
17691
|
-
top: currentPosition.top,
|
|
17692
|
-
left: currentPosition.left,
|
|
17693
|
-
width: tooltipDimensions.width,
|
|
17694
|
-
height: tooltipDimensions.height
|
|
17695
|
-
},
|
|
17696
|
-
targetTooltip: {
|
|
17697
|
-
top: tooltip.position.top,
|
|
17698
|
-
left: tooltip.position.left,
|
|
17699
|
-
width: tooltipDimensions.width,
|
|
17700
|
-
height: tooltipDimensions.height
|
|
17701
|
-
}
|
|
17702
|
-
});
|
|
17703
|
-
}
|
|
17704
|
-
});
|
|
17705
|
-
setAlignmentGuides(guides);
|
|
17706
|
-
},
|
|
17707
|
-
[isDragging, activeTooltips]
|
|
17708
|
-
);
|
|
17709
|
-
const snapToGuides = React33.useCallback(
|
|
17710
|
-
(position) => {
|
|
17711
|
-
const snappedPosition = { ...position };
|
|
17712
|
-
let hasSnapped = false;
|
|
17713
|
-
alignmentGuides.forEach((guide) => {
|
|
17714
|
-
if (guide.type === "horizontal") {
|
|
17715
|
-
const diff = Math.abs(position.top - guide.position);
|
|
17716
|
-
if (diff <= PRECISION_SNAP_THRESHOLD2) {
|
|
17717
|
-
snappedPosition.top = guide.position;
|
|
17718
|
-
hasSnapped = true;
|
|
17719
|
-
}
|
|
17720
|
-
} else if (guide.type === "vertical") {
|
|
17721
|
-
const diff = Math.abs(position.left - guide.position);
|
|
17722
|
-
if (diff <= PRECISION_SNAP_THRESHOLD2) {
|
|
17723
|
-
snappedPosition.left = guide.position;
|
|
17724
|
-
hasSnapped = true;
|
|
17725
|
-
}
|
|
17726
|
-
}
|
|
17727
|
-
});
|
|
17728
|
-
if (!hasSnapped) {
|
|
17729
|
-
alignmentGuides.forEach((guide) => {
|
|
17730
|
-
if (guide.type === "horizontal") {
|
|
17731
|
-
const diff = Math.abs(position.top - guide.position);
|
|
17732
|
-
if (diff <= STRONG_SNAP_THRESHOLD2) {
|
|
17733
|
-
snappedPosition.top = guide.position;
|
|
17734
|
-
}
|
|
17735
|
-
} else if (guide.type === "vertical") {
|
|
17736
|
-
const diff = Math.abs(position.left - guide.position);
|
|
17737
|
-
if (diff <= STRONG_SNAP_THRESHOLD2) {
|
|
17738
|
-
snappedPosition.left = guide.position;
|
|
17739
|
-
}
|
|
17740
|
-
}
|
|
17741
|
-
});
|
|
17742
|
-
}
|
|
17743
|
-
alignmentGuides.forEach((guide) => {
|
|
17744
|
-
if (guide.type === "horizontal") {
|
|
17745
|
-
const diff = Math.abs(position.top - guide.position);
|
|
17746
|
-
if (diff <= ALIGNMENT_THRESHOLD2 && snappedPosition.top === position.top) {
|
|
17747
|
-
snappedPosition.top = guide.position;
|
|
17748
|
-
}
|
|
17749
|
-
} else if (guide.type === "vertical") {
|
|
17750
|
-
const diff = Math.abs(position.left - guide.position);
|
|
17751
|
-
if (diff <= ALIGNMENT_THRESHOLD2 && snappedPosition.left === position.left) {
|
|
17752
|
-
snappedPosition.left = guide.position;
|
|
17753
|
-
}
|
|
17754
|
-
}
|
|
17755
|
-
});
|
|
17756
|
-
return snappedPosition;
|
|
17757
|
-
},
|
|
17758
|
-
[alignmentGuides]
|
|
17759
|
-
);
|
|
17760
|
-
const handleMouseDown = (e, tooltipId) => {
|
|
17761
|
-
e.preventDefault();
|
|
17762
|
-
e.stopPropagation();
|
|
17763
|
-
const tooltip = activeTooltips.find((t) => t.id === tooltipId);
|
|
17764
|
-
if (!tooltip) return;
|
|
17765
|
-
const rect = e.currentTarget.getBoundingClientRect();
|
|
17766
|
-
const offsetX = e.clientX - rect.left;
|
|
17767
|
-
const offsetY = e.clientY - rect.top;
|
|
17768
|
-
setIsDragging(tooltipId);
|
|
17769
|
-
setDragOffset({ x: offsetX, y: offsetY });
|
|
17770
|
-
};
|
|
17771
|
-
React33.useEffect(() => {
|
|
17772
|
-
let rafId;
|
|
17773
|
-
let lastMousePosition = { x: 0, y: 0 };
|
|
17774
|
-
const handleGlobalMouseMove = (e) => {
|
|
17775
|
-
if (!isDragging) return;
|
|
17776
|
-
lastMousePosition = { x: e.clientX, y: e.clientY };
|
|
17777
|
-
if (rafId) cancelAnimationFrame(rafId);
|
|
17778
|
-
rafId = requestAnimationFrame(() => {
|
|
17779
|
-
const newLeft = lastMousePosition.x - dragOffset.x;
|
|
17780
|
-
const newTop = lastMousePosition.y - dragOffset.y;
|
|
17781
|
-
const rawPosition = {
|
|
17782
|
-
top: Math.max(0, Math.min(newTop, window.innerHeight - 200)),
|
|
17783
|
-
left: Math.max(0, Math.min(newLeft, window.innerWidth - 250))
|
|
17784
|
-
};
|
|
17785
|
-
updateAlignmentGuides(isDragging, rawPosition);
|
|
17786
|
-
const snappedPosition = snapToGuides(rawPosition);
|
|
17787
|
-
setActiveTooltips(
|
|
17788
|
-
(prev) => prev.map((tooltip) => {
|
|
17789
|
-
if (tooltip.id === isDragging) {
|
|
17790
|
-
return {
|
|
17791
|
-
...tooltip,
|
|
17792
|
-
position: snappedPosition
|
|
17793
|
-
};
|
|
17794
|
-
}
|
|
17795
|
-
return tooltip;
|
|
17796
|
-
})
|
|
17797
|
-
);
|
|
17798
|
-
});
|
|
17799
|
-
};
|
|
17800
|
-
const handleGlobalMouseUp = () => {
|
|
17801
|
-
if (isDragging) {
|
|
17802
|
-
setIsDragging(null);
|
|
17803
|
-
setAlignmentGuides([]);
|
|
17804
|
-
if (rafId) cancelAnimationFrame(rafId);
|
|
17805
|
-
}
|
|
17806
|
-
};
|
|
17807
|
-
if (isDragging) {
|
|
17808
|
-
document.addEventListener("mousemove", handleGlobalMouseMove, {
|
|
17809
|
-
passive: true
|
|
17810
|
-
});
|
|
17811
|
-
document.addEventListener("mouseup", handleGlobalMouseUp);
|
|
17812
|
-
document.body.style.cursor = "grabbing";
|
|
17813
|
-
document.body.style.userSelect = "none";
|
|
17814
|
-
}
|
|
17815
|
-
return () => {
|
|
17816
|
-
if (rafId) cancelAnimationFrame(rafId);
|
|
17817
|
-
document.removeEventListener("mousemove", handleGlobalMouseMove);
|
|
17818
|
-
document.removeEventListener("mouseup", handleGlobalMouseUp);
|
|
17819
|
-
document.body.style.cursor = "";
|
|
17820
|
-
document.body.style.userSelect = "";
|
|
17821
|
-
};
|
|
17822
|
-
}, [
|
|
17823
|
-
isDragging,
|
|
17824
|
-
dragOffset,
|
|
17825
|
-
alignmentGuides,
|
|
17826
|
-
updateAlignmentGuides,
|
|
17827
|
-
snapToGuides
|
|
17828
|
-
]);
|
|
17829
|
-
React33.useEffect(() => {
|
|
17830
|
-
const handleCloseAllTooltips = () => {
|
|
17831
|
-
setActiveTooltips([]);
|
|
17832
|
-
setGlobalTooltipCount(0);
|
|
17833
|
-
};
|
|
17834
|
-
window.addEventListener("closeAllTooltips", handleCloseAllTooltips);
|
|
17835
|
-
return () => {
|
|
17836
|
-
window.removeEventListener("closeAllTooltips", handleCloseAllTooltips);
|
|
17837
|
-
};
|
|
17838
|
-
}, []);
|
|
17839
|
-
React33.useEffect(() => {
|
|
17840
|
-
const handleTooltipCountRequest = () => {
|
|
17841
|
-
window.dispatchEvent(
|
|
17842
|
-
new CustomEvent("tooltipCountResponse", {
|
|
17843
|
-
detail: { count: activeTooltips.length }
|
|
17844
|
-
})
|
|
17845
|
-
);
|
|
17846
|
-
};
|
|
17847
|
-
const handleGlobalTooltipsRequest = (event) => {
|
|
17848
|
-
const { detail } = event;
|
|
17849
|
-
if (detail && detail.response && detail.requesterId) {
|
|
17850
|
-
activeTooltips.forEach((tooltip) => {
|
|
17851
|
-
if (!detail.response.find(
|
|
17852
|
-
(t) => t.id === tooltip.id
|
|
17853
|
-
)) {
|
|
17854
|
-
detail.response.push({
|
|
17855
|
-
id: tooltip.id,
|
|
17856
|
-
position: tooltip.position
|
|
17857
|
-
});
|
|
17858
|
-
}
|
|
17859
|
-
});
|
|
17860
|
-
}
|
|
17861
|
-
};
|
|
17862
|
-
window.addEventListener("requestTooltipCount", handleTooltipCountRequest);
|
|
17863
|
-
window.addEventListener(
|
|
17864
|
-
"requestGlobalTooltips",
|
|
17865
|
-
handleGlobalTooltipsRequest
|
|
17866
|
-
);
|
|
17867
|
-
return () => {
|
|
17868
|
-
window.removeEventListener(
|
|
17869
|
-
"requestTooltipCount",
|
|
17870
|
-
handleTooltipCountRequest
|
|
17871
|
-
);
|
|
17872
|
-
window.removeEventListener(
|
|
17873
|
-
"requestGlobalTooltips",
|
|
17874
|
-
handleGlobalTooltipsRequest
|
|
17875
|
-
);
|
|
17876
|
-
};
|
|
17877
|
-
}, [activeTooltips]);
|
|
17878
|
-
React33.useEffect(() => {
|
|
17879
|
-
if (isDragging) return;
|
|
17880
|
-
let totalCount = 0;
|
|
17881
|
-
const handleCountResponse = (event) => {
|
|
17882
|
-
const customEvent = event;
|
|
17883
|
-
totalCount += customEvent.detail.count;
|
|
17884
|
-
};
|
|
17885
|
-
window.addEventListener("tooltipCountResponse", handleCountResponse);
|
|
17886
|
-
window.dispatchEvent(new CustomEvent("requestTooltipCount"));
|
|
17887
|
-
const timeoutId = setTimeout(() => {
|
|
17888
|
-
window.removeEventListener("tooltipCountResponse", handleCountResponse);
|
|
17889
|
-
setGlobalTooltipCount(totalCount);
|
|
17890
|
-
}, 5);
|
|
17891
|
-
return () => {
|
|
17892
|
-
clearTimeout(timeoutId);
|
|
17893
|
-
window.removeEventListener("tooltipCountResponse", handleCountResponse);
|
|
17894
|
-
};
|
|
17895
|
-
}, [activeTooltips.length, isDragging]);
|
|
17896
|
-
const CustomTooltip = ({
|
|
17897
|
-
active,
|
|
17898
|
-
payload,
|
|
17899
|
-
label
|
|
17900
|
-
}) => {
|
|
17901
|
-
if (!active || !payload) return null;
|
|
17902
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card border border-border rounded-lg p-3 shadow-lg", children: [
|
|
17903
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-foreground mb-2", children: label }),
|
|
17904
|
-
payload.map(
|
|
17905
|
-
(entry, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
|
|
17906
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17907
|
-
"div",
|
|
17908
|
-
{
|
|
17909
|
-
className: "w-3 h-3 rounded-sm",
|
|
17910
|
-
style: { backgroundColor: entry.color }
|
|
17911
|
-
}
|
|
17912
|
-
),
|
|
17913
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
|
|
17914
|
-
entry.name,
|
|
17915
|
-
":"
|
|
17916
|
-
] }),
|
|
17917
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground font-medium", children: entry.value?.toLocaleString("pt-BR") })
|
|
17918
|
-
] }, index)
|
|
17919
|
-
),
|
|
17920
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Clique para fixar este tooltip" })
|
|
17921
|
-
] });
|
|
17922
|
-
};
|
|
17923
|
-
const getTitleClassName = (position) => {
|
|
17924
|
-
const baseClasses = "text-xl font-semibold text-foreground mb-3";
|
|
17925
|
-
switch (position) {
|
|
17926
|
-
case "center":
|
|
17927
|
-
return `${baseClasses} text-center`;
|
|
17928
|
-
case "right":
|
|
17929
|
-
return `${baseClasses} text-right`;
|
|
17930
|
-
default:
|
|
17931
|
-
return `${baseClasses} text-left`;
|
|
17932
|
-
}
|
|
17933
|
-
};
|
|
17934
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
17935
|
-
"div",
|
|
17936
|
-
{
|
|
17937
|
-
className: cn("rounded-lg bg-card p-4 relative", className),
|
|
17938
|
-
style: {
|
|
17939
|
-
width: typeof width === "number" ? `${width + 32}px` : "fit-content",
|
|
17940
|
-
maxWidth: "100%"
|
|
17941
|
-
},
|
|
17942
|
-
children: [
|
|
17943
|
-
title && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: getTitleClassName(titlePosition), children: title }) }),
|
|
17944
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
17945
|
-
recharts.BarChart,
|
|
17946
|
-
{
|
|
17947
|
-
data: processedData,
|
|
17948
|
-
width: typeof width === "number" ? width : 900,
|
|
17949
|
-
height,
|
|
17950
|
-
margin: resolveChartMargins(margins, chartMargins, showLabels),
|
|
17951
|
-
onClick: handleChartClick,
|
|
17952
|
-
children: [
|
|
17953
|
-
showGrid && /* @__PURE__ */ jsxRuntime.jsx(
|
|
17954
|
-
recharts.CartesianGrid,
|
|
17955
|
-
{
|
|
17956
|
-
strokeDasharray: "3 3",
|
|
17957
|
-
stroke: gridColor || "hsl(var(--muted-foreground))",
|
|
17958
|
-
opacity: 0.5
|
|
17959
|
-
}
|
|
17960
|
-
),
|
|
17961
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17962
|
-
recharts.XAxis,
|
|
17963
|
-
{
|
|
17964
|
-
dataKey: xAxisConfig.dataKey,
|
|
17965
|
-
stroke: "hsl(var(--muted-foreground))",
|
|
17966
|
-
fontSize: 12,
|
|
17967
|
-
tickLine: false,
|
|
17968
|
-
axisLine: false,
|
|
17969
|
-
tickFormatter: xAxisConfig.valueFormatter
|
|
17970
|
-
}
|
|
17971
|
-
),
|
|
17972
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
17973
|
-
recharts.YAxis,
|
|
17974
|
-
{
|
|
17975
|
-
stroke: "hsl(var(--muted-foreground))",
|
|
17976
|
-
fontSize: 12,
|
|
17977
|
-
tickLine: false,
|
|
17978
|
-
axisLine: false,
|
|
17979
|
-
tickFormatter: (value) => value.toLocaleString("pt-BR"),
|
|
17980
|
-
domain: [0, niceMax],
|
|
17981
|
-
tickCount: 6
|
|
17982
|
-
}
|
|
17983
|
-
),
|
|
17984
|
-
showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
|
|
17985
|
-
recharts.Tooltip,
|
|
17986
|
-
{
|
|
17987
|
-
content: /* @__PURE__ */ jsxRuntime.jsx(CustomTooltip, {}),
|
|
17988
|
-
cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
|
|
17989
|
-
}
|
|
17990
|
-
),
|
|
17991
|
-
showLegend && /* @__PURE__ */ jsxRuntime.jsx(
|
|
17992
|
-
recharts.Legend,
|
|
17993
|
-
{
|
|
17994
|
-
wrapperStyle: {
|
|
17995
|
-
color: "hsl(var(--foreground))",
|
|
17996
|
-
fontSize: "14px"
|
|
17997
|
-
}
|
|
17998
|
-
}
|
|
17999
|
-
),
|
|
18000
|
-
dataKeys.map((key) => {
|
|
18001
|
-
const fieldConfig = mapperConfig[key];
|
|
18002
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
18003
|
-
recharts.Bar,
|
|
18004
|
-
{
|
|
18005
|
-
dataKey: key,
|
|
18006
|
-
name: fieldConfig?.label || key,
|
|
18007
|
-
fill: fieldConfig?.color || finalColors[key],
|
|
18008
|
-
radius: [4, 4, 0, 0],
|
|
18009
|
-
onClick: handleBarClick,
|
|
18010
|
-
style: { cursor: "pointer" },
|
|
18011
|
-
activeBar: /* @__PURE__ */ jsxRuntime.jsx(
|
|
18012
|
-
recharts.Rectangle,
|
|
18013
|
-
{
|
|
18014
|
-
fill: finalColors[key],
|
|
18015
|
-
stroke: finalColors[key],
|
|
18016
|
-
strokeWidth: 2,
|
|
18017
|
-
opacity: 0.8
|
|
18018
|
-
}
|
|
18019
|
-
),
|
|
18020
|
-
children: showLabels && /* @__PURE__ */ jsxRuntime.jsx(
|
|
18021
|
-
recharts.LabelList,
|
|
18022
|
-
{
|
|
18023
|
-
dataKey: key,
|
|
18024
|
-
position: "top",
|
|
18025
|
-
content: pillLabelRenderer_default(
|
|
18026
|
-
finalColors[key] || "#000",
|
|
18027
|
-
"filled"
|
|
18028
|
-
)
|
|
18029
|
-
}
|
|
18030
|
-
)
|
|
18031
|
-
},
|
|
18032
|
-
key
|
|
18033
|
-
);
|
|
18034
|
-
})
|
|
18035
|
-
]
|
|
18036
|
-
}
|
|
18037
|
-
),
|
|
18038
|
-
alignmentGuides.map((guide, index) => {
|
|
18039
|
-
const isHorizontal = guide.type === "horizontal";
|
|
18040
|
-
const color = isHorizontal ? "#3b82f6" : "#ef4444";
|
|
18041
|
-
const startX = isHorizontal ? Math.min(
|
|
18042
|
-
guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
|
|
18043
|
-
guide.targetTooltip.left + guide.targetTooltip.width / 2
|
|
18044
|
-
) : guide.sourceTooltip.left + (isHorizontal ? 0 : guide.sourceTooltip.width / 2);
|
|
18045
|
-
const endX = isHorizontal ? Math.max(
|
|
18046
|
-
guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
|
|
18047
|
-
guide.targetTooltip.left + guide.targetTooltip.width / 2
|
|
18048
|
-
) : guide.targetTooltip.left + (isHorizontal ? 0 : guide.targetTooltip.width / 2);
|
|
18049
|
-
const startY = isHorizontal ? guide.sourceTooltip.top + (isHorizontal ? guide.sourceTooltip.height / 2 : 0) : Math.min(
|
|
18050
|
-
guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
|
|
18051
|
-
guide.targetTooltip.top + guide.targetTooltip.height / 2
|
|
18052
|
-
);
|
|
18053
|
-
const endY = isHorizontal ? guide.targetTooltip.top + (isHorizontal ? guide.targetTooltip.height / 2 : 0) : Math.max(
|
|
18054
|
-
guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
|
|
18055
|
-
guide.targetTooltip.top + guide.targetTooltip.height / 2
|
|
18056
|
-
);
|
|
18057
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
18058
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18059
|
-
"div",
|
|
18060
|
-
{
|
|
18061
|
-
className: "fixed pointer-events-none z-30",
|
|
18062
|
-
style: {
|
|
18063
|
-
left: startX,
|
|
18064
|
-
top: startY,
|
|
18065
|
-
width: isHorizontal ? endX - startX : "2px",
|
|
18066
|
-
height: isHorizontal ? "2px" : endY - startY,
|
|
18067
|
-
backgroundColor: color,
|
|
18068
|
-
boxShadow: `0 0 8px ${color}60`,
|
|
18069
|
-
opacity: 0.9,
|
|
18070
|
-
borderStyle: "dashed",
|
|
18071
|
-
borderWidth: "1px",
|
|
18072
|
-
borderColor: color,
|
|
18073
|
-
transform: "translateZ(0)"
|
|
18074
|
-
}
|
|
18075
|
-
}
|
|
18076
|
-
),
|
|
18077
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18078
|
-
"div",
|
|
18079
|
-
{
|
|
18080
|
-
className: "fixed pointer-events-none z-31",
|
|
18081
|
-
style: {
|
|
18082
|
-
left: guide.sourceTooltip.left + guide.sourceTooltip.width / 2 - 4,
|
|
18083
|
-
top: guide.sourceTooltip.top + guide.sourceTooltip.height / 2 - 4,
|
|
18084
|
-
width: "8px",
|
|
18085
|
-
height: "8px",
|
|
18086
|
-
backgroundColor: color,
|
|
18087
|
-
borderRadius: "50%",
|
|
18088
|
-
boxShadow: `0 0 4px ${color}80`,
|
|
18089
|
-
opacity: 0.8
|
|
18090
|
-
}
|
|
18091
|
-
}
|
|
18092
|
-
),
|
|
18093
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18094
|
-
"div",
|
|
18095
|
-
{
|
|
18096
|
-
className: "fixed pointer-events-none z-31",
|
|
18097
|
-
style: {
|
|
18098
|
-
left: guide.targetTooltip.left + guide.targetTooltip.width / 2 - 4,
|
|
18099
|
-
top: guide.targetTooltip.top + guide.targetTooltip.height / 2 - 4,
|
|
18100
|
-
width: "8px",
|
|
18101
|
-
height: "8px",
|
|
18102
|
-
backgroundColor: color,
|
|
18103
|
-
borderRadius: "50%",
|
|
18104
|
-
boxShadow: `0 0 4px ${color}80`,
|
|
18105
|
-
opacity: 0.8
|
|
18106
|
-
}
|
|
18107
|
-
}
|
|
18108
|
-
)
|
|
18109
|
-
] }, index);
|
|
18110
|
-
}),
|
|
18111
|
-
activeTooltips.map((tooltip, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
18112
|
-
DraggableTooltip_default,
|
|
18113
|
-
{
|
|
18114
|
-
id: tooltip.id,
|
|
18115
|
-
data: adaptDataForTooltip2(tooltip.data),
|
|
18116
|
-
position: tooltip.position,
|
|
18117
|
-
isDragging: isDragging === tooltip.id,
|
|
18118
|
-
title,
|
|
18119
|
-
dataKeys,
|
|
18120
|
-
finalColors,
|
|
18121
|
-
onMouseDown: (id, e) => handleMouseDown(e, id),
|
|
18122
|
-
onClose: (id) => {
|
|
18123
|
-
setActiveTooltips((prev) => prev.filter((t) => t.id !== id));
|
|
18124
|
-
},
|
|
18125
|
-
periodLabel: "Per\xEDodo Selecionado",
|
|
18126
|
-
dataLabel: "Dados do Per\xEDodo",
|
|
18127
|
-
showCloseAllButton: index === 0,
|
|
18128
|
-
globalTooltipCount,
|
|
18129
|
-
onCloseAll: () => {
|
|
18130
|
-
window.dispatchEvent(new Event("closeAllTooltips"));
|
|
18131
|
-
},
|
|
18132
|
-
closeAllButtonPosition: "top-center",
|
|
18133
|
-
closeAllButtonVariant: "floating"
|
|
18134
|
-
},
|
|
18135
|
-
tooltip.id
|
|
18136
|
-
))
|
|
18137
|
-
]
|
|
18138
|
-
}
|
|
18139
|
-
);
|
|
18140
|
-
};
|
|
18141
|
-
var BarChart_default = BarChart;
|
|
18142
|
-
var defaultData = [
|
|
18143
|
-
{ name: "A", value: 100 },
|
|
18144
|
-
{ name: "B", value: 200 },
|
|
18145
|
-
{ name: "C", value: 150 }
|
|
18146
|
-
];
|
|
18147
|
-
var DEFAULT_COLORS4 = ["#55af7d", "#8e68ff", "#2273e1"];
|
|
18148
|
-
var CustomLineChart = ({
|
|
18149
|
-
data = defaultData,
|
|
18150
|
-
className,
|
|
18151
|
-
height = 300,
|
|
18152
|
-
width = "100%",
|
|
18153
|
-
colors: colors2 = DEFAULT_COLORS4,
|
|
18154
|
-
gridColor,
|
|
18155
|
-
showGrid = true,
|
|
18156
|
-
showTooltip = true,
|
|
18157
|
-
showLegend = true,
|
|
18158
|
-
title,
|
|
18159
|
-
titlePosition = "left",
|
|
18160
|
-
strokeWidth = 2,
|
|
18161
|
-
showDots = true,
|
|
18162
|
-
showLabels = false,
|
|
18163
|
-
padding,
|
|
18164
|
-
margins,
|
|
18165
|
-
containerPaddingLeft,
|
|
18166
|
-
chartMargins
|
|
18167
|
-
}) => {
|
|
18168
|
-
const resolvedContainerPaddingLeft = resolveContainerPaddingLeft(
|
|
18169
|
-
padding,
|
|
18170
|
-
containerPaddingLeft,
|
|
18171
|
-
16
|
|
18172
|
-
);
|
|
18173
|
-
const [activeTooltips, setActiveTooltips] = React33.useState([]);
|
|
18174
|
-
const [isDragging, setIsDragging] = React33.useState(null);
|
|
18175
|
-
const [dragOffset, setDragOffset] = React33.useState({
|
|
18176
|
-
x: 0,
|
|
18177
|
-
y: 0
|
|
18178
|
-
});
|
|
18179
|
-
const [globalTooltipCount, setGlobalTooltipCount] = React33.useState(0);
|
|
18180
|
-
const [alignmentGuides, setAlignmentGuides] = React33.useState([]);
|
|
18181
|
-
const generateColors = (dataKeys2) => {
|
|
18182
|
-
const colorMap = {};
|
|
18183
|
-
const allColors = generateAdditionalColors(colors2, dataKeys2.length);
|
|
18184
|
-
dataKeys2.forEach((key, index) => {
|
|
18185
|
-
colorMap[key] = allColors[index] || colors2[index % colors2.length];
|
|
18186
|
-
});
|
|
18187
|
-
return colorMap;
|
|
18188
|
-
};
|
|
18189
|
-
const dataKeys = React33.useMemo(
|
|
18190
|
-
() => data.length > 0 ? Object.keys(data[0]).filter((key) => key !== "name") : [],
|
|
18191
|
-
[data]
|
|
18192
|
-
);
|
|
18193
|
-
const finalColors = generateColors(dataKeys);
|
|
18194
|
-
const maxDataValue = React33.useMemo(() => {
|
|
18195
|
-
let max = 0;
|
|
18196
|
-
for (const row of data) {
|
|
18197
|
-
const r = row;
|
|
18198
|
-
for (const key of dataKeys) {
|
|
18199
|
-
const v = r[key];
|
|
18200
|
-
if (typeof v === "number" && Number.isFinite(v) && v > max)
|
|
18201
|
-
max = v;
|
|
18202
|
-
}
|
|
18203
|
-
}
|
|
18204
|
-
return max;
|
|
18205
|
-
}, [data, dataKeys]);
|
|
18206
|
-
const niceMax = React33.useMemo(() => {
|
|
18207
|
-
let padding2 = 0.08;
|
|
18208
|
-
if (maxDataValue > 1e6) padding2 = 0.05;
|
|
18209
|
-
if (maxDataValue > 1e7) padding2 = 0.03;
|
|
18210
|
-
if (maxDataValue === 0) padding2 = 0.12;
|
|
18211
|
-
const padded = maxDataValue * (1 + padding2);
|
|
18212
|
-
return niceCeil(padded);
|
|
18213
|
-
}, [maxDataValue]);
|
|
18214
|
-
const ClickableDot = (props) => {
|
|
18215
|
-
const { cx, cy, payload, dataKey } = props;
|
|
18216
|
-
const handleDotClick = (e) => {
|
|
18217
|
-
e.stopPropagation();
|
|
18218
|
-
if (!payload || !cx || !cy) return;
|
|
18219
|
-
const tooltipId = `${payload.name}`;
|
|
18220
|
-
const existingIndex = activeTooltips.findIndex(
|
|
18221
|
-
(tooltip) => tooltip.id === tooltipId
|
|
18222
|
-
);
|
|
18223
|
-
if (existingIndex !== -1) {
|
|
18224
|
-
setActiveTooltips(
|
|
18225
|
-
(prev) => prev.filter((tooltip) => tooltip.id !== tooltipId)
|
|
18226
|
-
);
|
|
18227
|
-
} else {
|
|
18228
|
-
const newTooltip = {
|
|
18229
|
-
id: tooltipId,
|
|
18230
|
-
data: payload,
|
|
18231
|
-
position: {
|
|
18232
|
-
top: cy - 50,
|
|
18233
|
-
// Posição relativa ao SVG
|
|
18234
|
-
left: cx - 100
|
|
18235
|
-
}
|
|
18236
|
-
};
|
|
18237
|
-
setActiveTooltips((prev) => [...prev, newTooltip]);
|
|
18238
|
-
}
|
|
18239
|
-
};
|
|
18240
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
18241
|
-
"circle",
|
|
18242
|
-
{
|
|
18243
|
-
cx,
|
|
18244
|
-
cy,
|
|
18245
|
-
r: 6,
|
|
18246
|
-
fill: finalColors[dataKey || ""] || colors2[0],
|
|
18247
|
-
stroke: finalColors[dataKey || ""] || colors2[0],
|
|
18248
|
-
strokeWidth: 2,
|
|
18249
|
-
style: { cursor: "pointer" },
|
|
18250
|
-
onClick: handleDotClick
|
|
18251
|
-
}
|
|
18252
|
-
);
|
|
18253
|
-
};
|
|
18254
|
-
const handleChartClick = (e) => {
|
|
18255
|
-
if (e && e.activePayload && e.activePayload.length > 0) {
|
|
18256
|
-
const clickedData = e.activePayload[0].payload;
|
|
18257
|
-
const tooltipId = `${clickedData.name}`;
|
|
18258
|
-
const existingIndex = activeTooltips.findIndex(
|
|
18259
|
-
(tooltip) => tooltip.id === tooltipId
|
|
18260
|
-
);
|
|
18261
|
-
if (existingIndex !== -1) {
|
|
18262
|
-
setActiveTooltips(
|
|
18263
|
-
(prev) => prev.filter((tooltip) => tooltip.id !== tooltipId)
|
|
18264
|
-
);
|
|
18265
|
-
} else {
|
|
18266
|
-
const newTooltip = {
|
|
18267
|
-
id: tooltipId,
|
|
18268
|
-
data: clickedData,
|
|
18269
|
-
position: {
|
|
18270
|
-
top: (e.chartY || 100) - 10,
|
|
18271
|
-
left: (e.chartX || 100) - 100
|
|
18272
|
-
}
|
|
18273
|
-
};
|
|
18274
|
-
setActiveTooltips((prev) => [...prev, newTooltip]);
|
|
18275
|
-
}
|
|
18276
|
-
}
|
|
18277
|
-
};
|
|
18278
|
-
const handleChartBackgroundClick = () => {
|
|
18279
|
-
setActiveTooltips([]);
|
|
18280
|
-
};
|
|
18281
|
-
const handleCloseAllTooltips = React33.useCallback(() => {
|
|
18282
|
-
window.dispatchEvent(new CustomEvent("closeAllTooltips"));
|
|
18283
|
-
}, []);
|
|
18284
|
-
const updateAlignmentGuides = React33.useCallback(
|
|
18285
|
-
(draggedTooltipId, draggedPosition) => {
|
|
18286
|
-
const SNAP_THRESHOLD = 15;
|
|
18287
|
-
const draggedTooltip = activeTooltips.find(
|
|
18288
|
-
(t) => t.id === draggedTooltipId
|
|
18289
|
-
);
|
|
18290
|
-
if (!draggedTooltip) return;
|
|
18291
|
-
const tooltipWidth = 200;
|
|
18292
|
-
const tooltipHeight = 80;
|
|
18293
|
-
const globalTooltips = [];
|
|
18294
|
-
window.dispatchEvent(
|
|
18295
|
-
new CustomEvent("requestGlobalTooltips", {
|
|
18296
|
-
detail: { requesterId: draggedTooltipId }
|
|
18297
|
-
})
|
|
18298
|
-
);
|
|
18299
|
-
activeTooltips.forEach((tooltip) => {
|
|
18300
|
-
if (tooltip.id !== draggedTooltipId) {
|
|
18301
|
-
globalTooltips.push({
|
|
18302
|
-
top: tooltip.position.top,
|
|
18303
|
-
left: tooltip.position.left,
|
|
18304
|
-
width: tooltipWidth,
|
|
18305
|
-
height: tooltipHeight,
|
|
18306
|
-
id: tooltip.id
|
|
18307
|
-
});
|
|
18308
|
-
}
|
|
18309
|
-
});
|
|
18310
|
-
const newGuides = [];
|
|
18311
|
-
globalTooltips.forEach((otherTooltip) => {
|
|
18312
|
-
const draggedCenter = {
|
|
18313
|
-
x: draggedPosition.left + tooltipWidth / 2,
|
|
18314
|
-
y: draggedPosition.top + tooltipHeight / 2
|
|
18315
|
-
};
|
|
18316
|
-
const otherCenter = {
|
|
18317
|
-
x: otherTooltip.left + otherTooltip.width / 2,
|
|
18318
|
-
y: otherTooltip.top + otherTooltip.height / 2
|
|
18319
|
-
};
|
|
18320
|
-
const horizontalDistance = Math.abs(draggedCenter.y - otherCenter.y);
|
|
18321
|
-
if (horizontalDistance <= SNAP_THRESHOLD) {
|
|
18322
|
-
newGuides.push({
|
|
18323
|
-
type: "horizontal",
|
|
18324
|
-
position: otherCenter.y,
|
|
18325
|
-
visible: true,
|
|
18326
|
-
sourceTooltip: {
|
|
18327
|
-
top: draggedPosition.top,
|
|
18328
|
-
left: draggedPosition.left,
|
|
18329
|
-
width: tooltipWidth,
|
|
18330
|
-
height: tooltipHeight
|
|
18331
|
-
},
|
|
18332
|
-
targetTooltip: {
|
|
18333
|
-
top: otherTooltip.top,
|
|
18334
|
-
left: otherTooltip.left,
|
|
18335
|
-
width: otherTooltip.width,
|
|
18336
|
-
height: otherTooltip.height
|
|
18337
|
-
}
|
|
18338
|
-
});
|
|
18339
|
-
}
|
|
18340
|
-
const verticalDistance = Math.abs(draggedCenter.x - otherCenter.x);
|
|
18341
|
-
if (verticalDistance <= SNAP_THRESHOLD) {
|
|
18342
|
-
newGuides.push({
|
|
18343
|
-
type: "vertical",
|
|
18344
|
-
position: otherCenter.x,
|
|
18345
|
-
visible: true,
|
|
18346
|
-
sourceTooltip: {
|
|
18347
|
-
top: draggedPosition.top,
|
|
18348
|
-
left: draggedPosition.left,
|
|
18349
|
-
width: tooltipWidth,
|
|
18350
|
-
height: tooltipHeight
|
|
18351
|
-
},
|
|
18352
|
-
targetTooltip: {
|
|
18353
|
-
top: otherTooltip.top,
|
|
18354
|
-
left: otherTooltip.left,
|
|
18355
|
-
width: otherTooltip.width,
|
|
18356
|
-
height: otherTooltip.height
|
|
18357
|
-
}
|
|
18358
|
-
});
|
|
18359
|
-
}
|
|
18360
|
-
});
|
|
18361
|
-
setAlignmentGuides(newGuides);
|
|
18362
|
-
},
|
|
18363
|
-
[activeTooltips]
|
|
18364
|
-
);
|
|
18365
|
-
const snapToGuides = React33.useCallback(
|
|
18366
|
-
(position) => {
|
|
18367
|
-
const SNAP_DISTANCE = 10;
|
|
18368
|
-
const snappedPosition = { ...position };
|
|
18369
|
-
alignmentGuides.forEach((guide) => {
|
|
18370
|
-
if (guide.type === "horizontal") {
|
|
18371
|
-
const tooltipCenter = position.top + 40;
|
|
18372
|
-
if (Math.abs(tooltipCenter - guide.position) <= SNAP_DISTANCE) {
|
|
18373
|
-
snappedPosition.top = guide.position - 40;
|
|
18374
|
-
}
|
|
18375
|
-
} else if (guide.type === "vertical") {
|
|
18376
|
-
const tooltipCenter = position.left + 100;
|
|
18377
|
-
if (Math.abs(tooltipCenter - guide.position) <= SNAP_DISTANCE) {
|
|
18378
|
-
snappedPosition.left = guide.position - 100;
|
|
18379
|
-
}
|
|
18380
|
-
}
|
|
18381
|
-
});
|
|
18382
|
-
return snappedPosition;
|
|
18383
|
-
},
|
|
18384
|
-
[alignmentGuides]
|
|
18385
|
-
);
|
|
18386
|
-
const handleMouseDown = (tooltipId, e) => {
|
|
18387
|
-
const rect = e.target.getBoundingClientRect();
|
|
18388
|
-
const offsetX = e.clientX - rect.left;
|
|
18389
|
-
const offsetY = e.clientY - rect.top;
|
|
18390
|
-
setIsDragging(tooltipId);
|
|
18391
|
-
setDragOffset({ x: offsetX, y: offsetY });
|
|
18392
|
-
};
|
|
18393
|
-
React33.useEffect(() => {
|
|
18394
|
-
let rafId;
|
|
18395
|
-
let lastMousePosition = { x: 0, y: 0 };
|
|
18396
|
-
const handleGlobalMouseMove = (e) => {
|
|
18397
|
-
if (!isDragging) return;
|
|
18398
|
-
lastMousePosition = { x: e.clientX, y: e.clientY };
|
|
18399
|
-
if (rafId) cancelAnimationFrame(rafId);
|
|
18400
|
-
rafId = requestAnimationFrame(() => {
|
|
18401
|
-
const newLeft = lastMousePosition.x - dragOffset.x;
|
|
18402
|
-
const newTop = lastMousePosition.y - dragOffset.y;
|
|
18403
|
-
let finalPosition = { top: newTop, left: newLeft };
|
|
18404
|
-
finalPosition = snapToGuides(finalPosition);
|
|
18405
|
-
setActiveTooltips(
|
|
18406
|
-
(prev) => prev.map(
|
|
18407
|
-
(tooltip) => tooltip.id === isDragging ? { ...tooltip, position: finalPosition } : tooltip
|
|
18408
|
-
)
|
|
18409
|
-
);
|
|
18410
|
-
updateAlignmentGuides(isDragging, finalPosition);
|
|
18411
|
-
});
|
|
18412
|
-
};
|
|
18413
|
-
const handleGlobalMouseUp = () => {
|
|
18414
|
-
if (rafId) cancelAnimationFrame(rafId);
|
|
18415
|
-
setIsDragging(null);
|
|
18416
|
-
setAlignmentGuides([]);
|
|
18417
|
-
document.body.style.cursor = "";
|
|
18418
|
-
document.body.style.userSelect = "";
|
|
18419
|
-
};
|
|
18420
|
-
if (isDragging) {
|
|
18421
|
-
document.body.style.cursor = "grabbing";
|
|
18422
|
-
document.body.style.userSelect = "none";
|
|
18423
|
-
window.addEventListener("mousemove", handleGlobalMouseMove);
|
|
18424
|
-
window.addEventListener("mouseup", handleGlobalMouseUp);
|
|
18425
|
-
}
|
|
18426
|
-
return () => {
|
|
18427
|
-
if (rafId) cancelAnimationFrame(rafId);
|
|
18428
|
-
window.removeEventListener("mousemove", handleGlobalMouseMove);
|
|
18429
|
-
window.removeEventListener("mouseup", handleGlobalMouseUp);
|
|
18430
|
-
document.body.style.cursor = "";
|
|
18431
|
-
document.body.style.userSelect = "";
|
|
18432
|
-
};
|
|
18433
|
-
}, [
|
|
18434
|
-
isDragging,
|
|
18435
|
-
dragOffset,
|
|
18436
|
-
alignmentGuides,
|
|
18437
|
-
updateAlignmentGuides,
|
|
18438
|
-
snapToGuides
|
|
18439
|
-
]);
|
|
18440
|
-
React33.useEffect(() => {
|
|
18441
|
-
const handleCloseAllTooltips2 = () => {
|
|
18442
|
-
setActiveTooltips([]);
|
|
18443
|
-
setGlobalTooltipCount(0);
|
|
18444
|
-
};
|
|
18445
|
-
window.addEventListener("closeAllTooltips", handleCloseAllTooltips2);
|
|
18446
|
-
return () => {
|
|
18447
|
-
window.removeEventListener("closeAllTooltips", handleCloseAllTooltips2);
|
|
18448
|
-
};
|
|
18449
|
-
}, []);
|
|
18450
|
-
React33.useEffect(() => {
|
|
18451
|
-
const handleTooltipCountRequest = () => {
|
|
18452
|
-
window.dispatchEvent(
|
|
18453
|
-
new CustomEvent("tooltipCountResponse", {
|
|
18454
|
-
detail: { count: activeTooltips.length }
|
|
18455
|
-
})
|
|
18456
|
-
);
|
|
18457
|
-
};
|
|
18458
|
-
const handleGlobalTooltipsRequest = (event) => {
|
|
18459
|
-
const requesterId = event.detail?.requesterId;
|
|
18460
|
-
activeTooltips.forEach((tooltip) => {
|
|
18461
|
-
if (tooltip.id !== requesterId) {
|
|
18462
|
-
window.dispatchEvent(
|
|
18463
|
-
new CustomEvent("globalTooltipResponse", {
|
|
18464
|
-
detail: {
|
|
18465
|
-
tooltip: {
|
|
18466
|
-
top: tooltip.position.top,
|
|
18467
|
-
left: tooltip.position.left,
|
|
18468
|
-
width: 200,
|
|
18469
|
-
height: 80,
|
|
18470
|
-
id: tooltip.id
|
|
18471
|
-
}
|
|
18472
|
-
}
|
|
18473
|
-
})
|
|
18474
|
-
);
|
|
18475
|
-
}
|
|
18476
|
-
});
|
|
18477
|
-
};
|
|
18478
|
-
window.addEventListener("requestTooltipCount", handleTooltipCountRequest);
|
|
18479
|
-
window.addEventListener(
|
|
18480
|
-
"requestGlobalTooltips",
|
|
18481
|
-
handleGlobalTooltipsRequest
|
|
18482
|
-
);
|
|
18483
|
-
return () => {
|
|
18484
|
-
window.removeEventListener(
|
|
18485
|
-
"requestTooltipCount",
|
|
18486
|
-
handleTooltipCountRequest
|
|
18487
|
-
);
|
|
18488
|
-
window.removeEventListener(
|
|
18489
|
-
"requestGlobalTooltips",
|
|
18490
|
-
handleGlobalTooltipsRequest
|
|
18491
|
-
);
|
|
18492
|
-
};
|
|
18493
|
-
}, [activeTooltips]);
|
|
18494
|
-
React33.useEffect(() => {
|
|
18495
|
-
if (isDragging) return;
|
|
18496
|
-
let totalCount = 0;
|
|
18497
|
-
const handleCountResponse = (event) => {
|
|
18498
|
-
const customEvent = event;
|
|
18499
|
-
totalCount += customEvent.detail.count;
|
|
18500
|
-
};
|
|
18501
|
-
window.addEventListener("tooltipCountResponse", handleCountResponse);
|
|
18502
|
-
window.dispatchEvent(new CustomEvent("requestTooltipCount"));
|
|
18503
|
-
const timeoutId = setTimeout(() => {
|
|
18504
|
-
window.removeEventListener("tooltipCountResponse", handleCountResponse);
|
|
18505
|
-
setGlobalTooltipCount(totalCount);
|
|
18506
|
-
}, 5);
|
|
18507
|
-
return () => {
|
|
18508
|
-
clearTimeout(timeoutId);
|
|
18509
|
-
window.removeEventListener("tooltipCountResponse", handleCountResponse);
|
|
18510
|
-
};
|
|
18511
|
-
}, [activeTooltips.length, isDragging]);
|
|
18512
|
-
const getTitleClass = () => {
|
|
18513
|
-
switch (titlePosition) {
|
|
18514
|
-
case "center":
|
|
18515
|
-
return "text-center";
|
|
18516
|
-
case "right":
|
|
18517
|
-
return "text-right";
|
|
18518
|
-
default:
|
|
18519
|
-
return "text-left";
|
|
18520
|
-
}
|
|
18521
|
-
};
|
|
18522
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", className), children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
18523
|
-
"div",
|
|
18524
|
-
{
|
|
18525
|
-
className: "rounded-lg bg-card p-4 relative border border-border",
|
|
18526
|
-
style: {
|
|
18527
|
-
width: typeof width === "number" ? `${width + 32}px` : "fit-content",
|
|
18528
|
-
maxWidth: "100%"
|
|
18529
|
-
},
|
|
18530
|
-
onClick: handleChartBackgroundClick,
|
|
18531
|
-
children: [
|
|
18532
|
-
title && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingLeft: `${resolvedContainerPaddingLeft}px` }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4", getTitleClass()), children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-foreground", children: title }) }) }),
|
|
18533
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
18534
|
-
recharts.LineChart,
|
|
18535
|
-
{
|
|
18536
|
-
data,
|
|
18537
|
-
width: typeof width === "number" ? width : 900,
|
|
18538
|
-
height,
|
|
18539
|
-
margin: resolveChartMargins(margins, chartMargins, showLabels),
|
|
18540
|
-
onClick: handleChartClick,
|
|
18541
|
-
children: [
|
|
18542
|
-
showGrid && /* @__PURE__ */ jsxRuntime.jsx(
|
|
18543
|
-
recharts.CartesianGrid,
|
|
18544
|
-
{
|
|
18545
|
-
strokeDasharray: "3 3",
|
|
18546
|
-
stroke: gridColor || "hsl(var(--muted-foreground))",
|
|
18547
|
-
opacity: 0.3
|
|
18548
|
-
}
|
|
18549
|
-
),
|
|
18550
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18551
|
-
recharts.XAxis,
|
|
18552
|
-
{
|
|
18553
|
-
dataKey: "name",
|
|
18554
|
-
className: "fill-muted-foreground text-xs",
|
|
18555
|
-
fontSize: 12
|
|
18556
|
-
}
|
|
18557
|
-
),
|
|
18558
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18559
|
-
recharts.YAxis,
|
|
18560
|
-
{
|
|
18561
|
-
className: "fill-muted-foreground text-xs",
|
|
18562
|
-
fontSize: 12,
|
|
18563
|
-
tickFormatter: (value) => compactTick(Number(value)),
|
|
18564
|
-
domain: [0, niceMax],
|
|
18565
|
-
tickCount: 6
|
|
18566
|
-
}
|
|
18567
|
-
),
|
|
18568
|
-
showTooltip && /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: () => null }),
|
|
18569
|
-
showLegend && /* @__PURE__ */ jsxRuntime.jsx(
|
|
18570
|
-
recharts.Legend,
|
|
18571
|
-
{
|
|
18572
|
-
wrapperStyle: {
|
|
18573
|
-
fontSize: "12px",
|
|
18574
|
-
color: "hsl(var(--muted-foreground))"
|
|
18575
|
-
}
|
|
18576
|
-
}
|
|
18577
|
-
),
|
|
18578
|
-
dataKeys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
18579
|
-
recharts.Line,
|
|
18580
|
-
{
|
|
18581
|
-
type: "monotone",
|
|
18582
|
-
dataKey: key,
|
|
18583
|
-
stroke: finalColors[key],
|
|
18584
|
-
strokeWidth,
|
|
18585
|
-
dot: showDots ? { r: 4, cursor: "pointer" } : false,
|
|
18586
|
-
activeDot: (props) => /* @__PURE__ */ jsxRuntime.jsx(ClickableDot, { ...props, dataKey: key }),
|
|
18587
|
-
children: showLabels && /* @__PURE__ */ jsxRuntime.jsx(
|
|
18588
|
-
recharts.LabelList,
|
|
18589
|
-
{
|
|
18590
|
-
dataKey: key,
|
|
18591
|
-
position: "top",
|
|
18592
|
-
content: pillLabelRenderer_default(
|
|
18593
|
-
finalColors[key] || "#000",
|
|
18594
|
-
"filled"
|
|
18595
|
-
),
|
|
18596
|
-
offset: 14
|
|
18597
|
-
}
|
|
18598
|
-
)
|
|
18599
|
-
},
|
|
18600
|
-
key
|
|
18601
|
-
))
|
|
18602
|
-
]
|
|
18603
|
-
}
|
|
18604
|
-
),
|
|
18605
|
-
alignmentGuides.map((guide, index) => {
|
|
18606
|
-
const isHorizontal = guide.type === "horizontal";
|
|
18607
|
-
const color = isHorizontal ? "#3b82f6" : "#ef4444";
|
|
18608
|
-
const startX = isHorizontal ? Math.min(
|
|
18609
|
-
guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
|
|
18610
|
-
guide.targetTooltip.left + guide.targetTooltip.width / 2
|
|
18611
|
-
) : guide.sourceTooltip.left + (isHorizontal ? 0 : guide.sourceTooltip.width / 2);
|
|
18612
|
-
const endX = isHorizontal ? Math.max(
|
|
18613
|
-
guide.sourceTooltip.left + guide.sourceTooltip.width / 2,
|
|
18614
|
-
guide.targetTooltip.left + guide.targetTooltip.width / 2
|
|
18615
|
-
) : guide.targetTooltip.left + (isHorizontal ? 0 : guide.targetTooltip.width / 2);
|
|
18616
|
-
const startY = isHorizontal ? guide.sourceTooltip.top + (isHorizontal ? guide.sourceTooltip.height / 2 : 0) : Math.min(
|
|
18617
|
-
guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
|
|
18618
|
-
guide.targetTooltip.top + guide.targetTooltip.height / 2
|
|
18619
|
-
);
|
|
18620
|
-
const endY = isHorizontal ? guide.targetTooltip.top + (isHorizontal ? guide.targetTooltip.height / 2 : 0) : Math.max(
|
|
18621
|
-
guide.sourceTooltip.top + guide.sourceTooltip.height / 2,
|
|
18622
|
-
guide.targetTooltip.top + guide.targetTooltip.height / 2
|
|
18623
|
-
);
|
|
18624
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
18625
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18626
|
-
"div",
|
|
18627
|
-
{
|
|
18628
|
-
className: "fixed pointer-events-none z-30",
|
|
18629
|
-
style: {
|
|
18630
|
-
left: startX,
|
|
18631
|
-
top: startY,
|
|
18632
|
-
width: isHorizontal ? endX - startX : "2px",
|
|
18633
|
-
height: isHorizontal ? "2px" : endY - startY,
|
|
18634
|
-
backgroundColor: color,
|
|
18635
|
-
boxShadow: `0 0 8px ${color}60`,
|
|
18636
|
-
opacity: 0.9,
|
|
18637
|
-
borderStyle: "dashed",
|
|
18638
|
-
borderWidth: "1px",
|
|
18639
|
-
borderColor: color,
|
|
18640
|
-
transform: "translateZ(0)"
|
|
18641
|
-
}
|
|
18642
|
-
}
|
|
18643
|
-
),
|
|
18644
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18645
|
-
"div",
|
|
18646
|
-
{
|
|
18647
|
-
className: "fixed pointer-events-none z-31",
|
|
18648
|
-
style: {
|
|
18649
|
-
left: guide.sourceTooltip.left + guide.sourceTooltip.width / 2 - 4,
|
|
18650
|
-
top: guide.sourceTooltip.top + guide.sourceTooltip.height / 2 - 4,
|
|
18651
|
-
width: "8px",
|
|
18652
|
-
height: "8px",
|
|
18653
|
-
backgroundColor: color,
|
|
18654
|
-
borderRadius: "50%",
|
|
18655
|
-
boxShadow: `0 0 4px ${color}80`,
|
|
18656
|
-
opacity: 0.8
|
|
18657
|
-
}
|
|
18658
|
-
}
|
|
18659
|
-
),
|
|
18660
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18661
|
-
"div",
|
|
18662
|
-
{
|
|
18663
|
-
className: "fixed pointer-events-none z-31",
|
|
18664
|
-
style: {
|
|
18665
|
-
left: guide.targetTooltip.left + guide.targetTooltip.width / 2 - 4,
|
|
18666
|
-
top: guide.targetTooltip.top + guide.targetTooltip.height / 2 - 4,
|
|
18667
|
-
width: "8px",
|
|
18668
|
-
height: "8px",
|
|
18669
|
-
backgroundColor: color,
|
|
18670
|
-
borderRadius: "50%",
|
|
18671
|
-
boxShadow: `0 0 4px ${color}80`,
|
|
18672
|
-
opacity: 0.8
|
|
18673
|
-
}
|
|
18674
|
-
}
|
|
18675
|
-
)
|
|
18676
|
-
] }, index);
|
|
18677
|
-
}),
|
|
18678
|
-
activeTooltips.map((tooltip, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
18679
|
-
DraggableTooltip_default,
|
|
18680
|
-
{
|
|
18681
|
-
id: tooltip.id,
|
|
18682
|
-
data: tooltip.data,
|
|
18683
|
-
position: tooltip.position,
|
|
18684
|
-
isDragging: isDragging === tooltip.id,
|
|
18685
|
-
title,
|
|
18686
|
-
dataKeys,
|
|
18687
|
-
finalColors,
|
|
18688
|
-
onMouseDown: (id, e) => handleMouseDown(id, e),
|
|
18689
|
-
onClose: (id) => {
|
|
18690
|
-
setActiveTooltips((prev) => prev.filter((t) => t.id !== id));
|
|
18691
|
-
},
|
|
18692
|
-
periodLabel: "Ponto Selecionado",
|
|
18693
|
-
dataLabel: "Dados do Ponto",
|
|
18694
|
-
showCloseAllButton: index === 0,
|
|
18695
|
-
globalTooltipCount,
|
|
18696
|
-
onCloseAll: handleCloseAllTooltips,
|
|
18697
|
-
closeAllButtonPosition: "top-center",
|
|
18698
|
-
closeAllButtonVariant: "floating"
|
|
18699
|
-
},
|
|
18700
|
-
tooltip.id
|
|
18701
|
-
))
|
|
18702
|
-
]
|
|
18703
|
-
}
|
|
18704
|
-
) });
|
|
18705
|
-
};
|
|
18706
|
-
var LineChart_default = CustomLineChart;
|
|
18707
|
-
var defaultData2 = [
|
|
18708
|
-
{ name: "Vendas", value: 4e3 },
|
|
18709
|
-
{ name: "Marketing", value: 3e3 },
|
|
18710
|
-
{ name: "Desenvolvimento", value: 2e3 },
|
|
18711
|
-
{ name: "Suporte", value: 1e3 },
|
|
18712
|
-
{ name: "Outros", value: 800 }
|
|
18713
|
-
];
|
|
18714
|
-
var DEFAULT_COLORS5 = [
|
|
18715
|
-
"#55af7d",
|
|
18716
|
-
// verde do projeto
|
|
18717
|
-
"#8e68ff",
|
|
18718
|
-
// roxo do projeto
|
|
18719
|
-
"#2273e1",
|
|
18720
|
-
// azul do projeto
|
|
18721
|
-
"#f59e0b",
|
|
18722
|
-
// amarelo complementar
|
|
18723
|
-
"#ef4444",
|
|
18724
|
-
// vermelho complementar
|
|
18725
|
-
"#8b5cf6",
|
|
18726
|
-
// roxo claro
|
|
18727
|
-
"#06b6d4",
|
|
18728
|
-
// ciano
|
|
18729
|
-
"#84cc16"
|
|
18730
|
-
// verde lima
|
|
18731
|
-
];
|
|
18732
|
-
var RADIAN = Math.PI / 180;
|
|
18733
|
-
var renderCustomizedLabel = ({
|
|
18734
|
-
cx = 0,
|
|
18735
|
-
cy = 0,
|
|
18736
|
-
midAngle = 0,
|
|
18737
|
-
innerRadius = 0,
|
|
18738
|
-
outerRadius = 0,
|
|
18739
|
-
percent = 0
|
|
18740
|
-
}) => {
|
|
18741
|
-
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
|
|
18742
|
-
const x = cx + radius * Math.cos(-midAngle * RADIAN);
|
|
18743
|
-
const y = cy + radius * Math.sin(-midAngle * RADIAN);
|
|
18744
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
18745
|
-
"text",
|
|
18746
|
-
{
|
|
18747
|
-
x,
|
|
18748
|
-
y,
|
|
18749
|
-
fill: "white",
|
|
18750
|
-
textAnchor: x > cx ? "start" : "end",
|
|
18751
|
-
dominantBaseline: "central",
|
|
18752
|
-
fontSize: 12,
|
|
18753
|
-
fontWeight: "600",
|
|
18754
|
-
children: `${(percent * 100).toFixed(0)}%`
|
|
17640
|
+
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
|
|
17641
|
+
const x = cx + radius * Math.cos(-midAngle * RADIAN);
|
|
17642
|
+
const y = cy + radius * Math.sin(-midAngle * RADIAN);
|
|
17643
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
17644
|
+
"text",
|
|
17645
|
+
{
|
|
17646
|
+
x,
|
|
17647
|
+
y,
|
|
17648
|
+
fill: "white",
|
|
17649
|
+
textAnchor: x > cx ? "start" : "end",
|
|
17650
|
+
dominantBaseline: "central",
|
|
17651
|
+
fontSize: 12,
|
|
17652
|
+
fontWeight: "600",
|
|
17653
|
+
children: `${(percent * 100).toFixed(0)}%`
|
|
18755
17654
|
}
|
|
18756
17655
|
);
|
|
18757
17656
|
};
|
|
18758
17657
|
var CustomPieChart = ({
|
|
18759
|
-
data =
|
|
17658
|
+
data = defaultData,
|
|
18760
17659
|
className,
|
|
18761
17660
|
height = 400,
|
|
18762
17661
|
width = "100%",
|
|
@@ -18769,7 +17668,7 @@ var CustomPieChart = ({
|
|
|
18769
17668
|
centerX = "50%",
|
|
18770
17669
|
centerY = "50%"
|
|
18771
17670
|
}) => {
|
|
18772
|
-
const finalColors = colors2 ||
|
|
17671
|
+
const finalColors = colors2 || DEFAULT_COLORS3;
|
|
18773
17672
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
|
|
18774
17673
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
18775
17674
|
recharts.Pie,
|
|
@@ -19088,7 +17987,6 @@ exports.AvatarFallbackBase = AvatarFallbackBase;
|
|
|
19088
17987
|
exports.AvatarImageBase = AvatarImageBase;
|
|
19089
17988
|
exports.BackButton = BackButton;
|
|
19090
17989
|
exports.Badge = Badge;
|
|
19091
|
-
exports.BarChart = BarChart_default;
|
|
19092
17990
|
exports.BreadcrumbBase = BreadcrumbBase;
|
|
19093
17991
|
exports.BreadcrumbEllipsisBase = BreadcrumbEllipsisBase;
|
|
19094
17992
|
exports.BreadcrumbItemBase = BreadcrumbItemBase;
|
|
@@ -19232,7 +18130,6 @@ exports.InputOTPSlotBase = InputOTPSlotBase;
|
|
|
19232
18130
|
exports.LabelBase = LabelBase_default;
|
|
19233
18131
|
exports.Leaderboard = Leaderboard;
|
|
19234
18132
|
exports.LikeButton = LikeButton;
|
|
19235
|
-
exports.LineChart = LineChart_default;
|
|
19236
18133
|
exports.LoadingBase = LoadingBase;
|
|
19237
18134
|
exports.LockButton = LockButton;
|
|
19238
18135
|
exports.ModalBase = ModalBase;
|
|
@@ -19288,6 +18185,7 @@ exports.SearchButton = SearchButton;
|
|
|
19288
18185
|
exports.Select = Select;
|
|
19289
18186
|
exports.SelectBase = SelectBase;
|
|
19290
18187
|
exports.SelectContentBase = SelectContentBase;
|
|
18188
|
+
exports.SelectEmpty = SelectEmpty;
|
|
19291
18189
|
exports.SelectGroupBase = SelectGroupBase;
|
|
19292
18190
|
exports.SelectItemBase = SelectItemBase;
|
|
19293
18191
|
exports.SelectLabelBase = SelectLabelBase;
|