@deepnoid/ui 0.1.180 → 0.1.182

package/dist/index.js

@@ -12364,6 +12364,7 @@ function FileUpload({
   const [message, setMessage] = (0, import_react38.useState)(errorMessage);
   const [displayFileName, setDisplayFileName] = (0, import_react38.useState)(() => (defaultFile == null ? void 0 : defaultFile.name) || "");
   const [hasUploadedFile, setHasUploadedFile] = (0, import_react38.useState)(false);
+  const [isUploading, setIsUploading] = (0, import_react38.useState)(false);
   const slots = fileUploadStyle();
   const handleButtonClick = () => {
     var _a;
@@ -12382,11 +12383,13 @@ function FileUpload({
   const startUploadSimulation = (file) => {
     let progress = 0;
     setUploadProgress(0);
+    setIsUploading(true);
     uploadIntervalRef.current = window.setInterval(() => {
       progress += 10;
       setUploadProgress(progress);
       if (progress >= 100) {
         clearInterval(uploadIntervalRef.current);
+        setIsUploading(false);
         onFileUpload == null ? void 0 : onFileUpload(file);
       }
     }, 100);
@@ -12401,6 +12404,7 @@ function FileUpload({
       setCurrentFile(null);
       setDisplayFileName((defaultFile == null ? void 0 : defaultFile.name) || "");
       setHasUploadedFile(false);
+      setIsUploading(false);
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
@@ -12421,6 +12425,7 @@ function FileUpload({
     setMessage("");
     setDisplayFileName((defaultFile == null ? void 0 : defaultFile.name) || "");
     setHasUploadedFile(false);
+    setIsUploading(false);
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
@@ -12474,6 +12479,7 @@ function FileUpload({
           variant: "outline",
           onClick: handleButtonClick,
           disabled: !!(currentFile && hasUploadedFile),
+          isLoading: isUploading,
           children: buttonText
         }
       ),
@@ -12928,8 +12934,8 @@ var BarChartComponent = (0, import_react41.forwardRef)((originalProps, ref) => {
     const { payload, x, y } = e;
     if (!payload || !payload[dataKey]) return;
     setTooltipState({
-      x,
-      y,
+      barX: x,
+      barY: y - 10,
       value: payload[dataKey],
       dataKey,
       label: payload.title
@@ -13000,7 +13006,7 @@ var BarChartComponent = (0, import_react41.forwardRef)((originalProps, ref) => {
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const chartWidth = chartRect.width;
     const tooltipWidth = tooltipRect.width;
-    let left = tooltipState.x - tooltipWidth / 2;
+    let left = tooltipState.barX - tooltipWidth / 2;
     const padding2 = 8;
     if (left < padding2) {
       left = padding2;
@@ -13009,114 +13015,128 @@ var BarChartComponent = (0, import_react41.forwardRef)((originalProps, ref) => {
     }
     setTooltipLeft(left);
   }, [tooltipState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-      import_recharts3.BarChart,
-      {
-        data,
-        margin: { left: -20 },
-        barSize: 20,
-        barGap,
-        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("defs", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#C2E59C" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#64B3F4" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#DDD6F3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#FAACA8" })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "4 4",
-              className: "stroke-neutral-light",
-              verticalPoints: tickPositions
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.XAxis,
-            {
-              dataKey: "title",
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomTick,
-              padding: { left: 0, right: 0 }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.YAxis,
-            {
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomYAxisTick,
-              ticks: yAxisTicks,
-              domain: yAxisDomain
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.Bar,
-            {
-              dataKey: "blue",
-              fill: "url(#blueGradient)",
-              shape: CustomBarShape,
-              onMouseEnter: (e) => handleMouseEnter(e, "blue"),
-              onMouseLeave: handleMouseLeave
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.Bar,
-            {
-              dataKey: "green",
-              fill: "url(#greenGradient)",
-              shape: CustomBarShape,
-              onMouseEnter: (e) => handleMouseEnter(e, "green"),
-              onMouseLeave: handleMouseLeave
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_recharts3.Bar,
-            {
-              dataKey: "pink",
-              fill: "url(#pinkGradient)",
-              shape: CustomBarShape,
-              onMouseEnter: (e) => handleMouseEnter(e, "pink"),
-              onMouseLeave: handleMouseLeave
-            }
-          )
-        ]
-      }
-    ) }),
-    tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      "div",
-      {
-        ref: tooltipRef,
-        style: {
-          position: "absolute",
-          left: tooltipLeft + 10,
-          top: (tooltipState == null ? void 0 : tooltipState.y) ? tooltipState.y - 40 : 0,
-          pointerEvents: "none",
-          zIndex: 10,
-          opacity: tooltipState ? 1 : 0,
-          transition: "opacity 0.1s ease-out",
-          visibility: tooltipState ? "visible" : "hidden",
-          width: "fit-content",
-          whiteSpace: "nowrap"
-        },
-        children: tooltipState && tooltipFormatter(tooltipState)
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "div",
+    {
+      ref: chartRef,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: (e) => {
+        const target = e.target;
+        if (!target.closest('[data-testid="recharts-bar-rectangle"]') && !target.closest(".recharts-bar-rectangle") && target.tagName !== "path") {
+          setTooltipState(null);
+        }
+      },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          import_recharts3.BarChart,
+          {
+            data,
+            margin: { left: -20 },
+            barSize: 20,
+            barGap,
+            className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("defs", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#C2E59C" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#64B3F4" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "0%", stopColor: "#DDD6F3" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("stop", { offset: "100%", stopColor: "#FAACA8" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "4 4",
+                  className: "stroke-neutral-light",
+                  verticalPoints: tickPositions
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.XAxis,
+                {
+                  dataKey: "title",
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomTick,
+                  padding: { left: 0, right: 0 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.YAxis,
+                {
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomYAxisTick,
+                  ticks: yAxisTicks,
+                  domain: yAxisDomain
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.Bar,
+                {
+                  dataKey: "blue",
+                  fill: "url(#blueGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "blue"),
+                  onMouseLeave: handleMouseLeave
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.Bar,
+                {
+                  dataKey: "green",
+                  fill: "url(#greenGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "green"),
+                  onMouseLeave: handleMouseLeave
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_recharts3.Bar,
+                {
+                  dataKey: "pink",
+                  fill: "url(#pinkGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "pink"),
+                  onMouseLeave: handleMouseLeave
+                }
+              )
+            ]
+          }
+        ) }),
+        tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          "div",
+          {
+            ref: tooltipRef,
+            style: {
+              position: "absolute",
+              left: tooltipLeft + 10,
+              top: (tooltipState == null ? void 0 : tooltipState.barY) || 0,
+              pointerEvents: "none",
+              zIndex: 10,
+              opacity: tooltipState ? 1 : 0,
+              transition: "opacity 0.1s ease-out",
+              visibility: tooltipState ? "visible" : "hidden",
+              width: "fit-content",
+              whiteSpace: "nowrap"
+            },
+            children: tooltipState && tooltipFormatter(tooltipState)
+          }
+        )
+      ]
+    }
+  );
 });
 BarChartComponent.displayName = "barChart";
 var barChart_default = BarChartComponent;
@@ -13299,8 +13319,8 @@ var SimpleBarChartComponent = (0, import_react43.forwardRef)((originalProps, ref
     const { payload, x, y } = e;
     if (!payload) return;
     setTooltipState({
-      x,
-      y,
+      barX: x,
+      barY: y - 20,
       value: payload.value,
       label: payload.title
     });
@@ -13343,7 +13363,7 @@ var SimpleBarChartComponent = (0, import_react43.forwardRef)((originalProps, ref
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const chartWidth = chartRect.width;
     const tooltipWidth = tooltipRect.width;
-    let left = tooltipState.x - tooltipWidth / 2;
+    let left = tooltipState.barX - tooltipWidth / 2;
     const padding2 = 8;
     if (left < padding2) {
       left = padding2;
@@ -13352,82 +13372,96 @@ var SimpleBarChartComponent = (0, import_react43.forwardRef)((originalProps, ref
     }
     setTooltipLeft(left);
   }, [tooltipState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts5.ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-      import_recharts5.BarChart,
-      {
-        data,
-        margin: { left: 0, right: 0, top: 0, bottom: 0 },
-        barSize: 10,
-        barGap,
-        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_recharts5.CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "4 4",
-              className: "stroke-neutral-light",
-              verticalPoints: tickPositions
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_recharts5.CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "0",
-              strokeWidth: 2,
-              className: "stroke-neutral-light",
-              verticalPoints: [0]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_recharts5.XAxis,
-            {
-              dataKey: "title",
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomTick,
-              padding: { left: 0, right: 0 }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts5.YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_recharts5.Bar,
-            {
-              dataKey: "value",
-              fill: "#C7E5FA",
-              shape: CustomBarShape,
-              onMouseEnter: handleMouseEnter,
-              onMouseLeave: handleMouseLeave
-            }
-          )
-        ]
-      }
-    ) }),
-    tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      "div",
-      {
-        ref: tooltipRef,
-        style: {
-          position: "absolute",
-          left: tooltipLeft + 5,
-          top: (tooltipState == null ? void 0 : tooltipState.y) ? tooltipState.y - 20 : 0,
-          pointerEvents: "none",
-          zIndex: 10,
-          opacity: tooltipState ? 1 : 0,
-          transition: "opacity 0.1s ease-out",
-          visibility: tooltipState ? "visible" : "hidden",
-          width: "fit-content",
-          whiteSpace: "nowrap"
-        },
-        children: tooltipState && tooltipFormatter(tooltipState)
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      ref: chartRef,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: (e) => {
+        const target = e.target;
+        if (!target.closest('[data-testid="recharts-bar-rectangle"]') && !target.closest(".recharts-bar-rectangle") && target.tagName !== "path") {
+          setTooltipState(null);
+        }
+      },
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts5.ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          import_recharts5.BarChart,
+          {
+            data,
+            margin: { left: 0, right: 0, top: 0, bottom: 0 },
+            barSize: 10,
+            barGap,
+            className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_recharts5.CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "4 4",
+                  className: "stroke-neutral-light",
+                  verticalPoints: tickPositions
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_recharts5.CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "0",
+                  strokeWidth: 2,
+                  className: "stroke-neutral-light",
+                  verticalPoints: [0]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_recharts5.XAxis,
+                {
+                  dataKey: "title",
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomTick,
+                  padding: { left: 0, right: 0 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_recharts5.YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_recharts5.Bar,
+                {
+                  dataKey: "value",
+                  fill: "#C7E5FA",
+                  shape: CustomBarShape,
+                  onMouseEnter: handleMouseEnter,
+                  onMouseLeave: handleMouseLeave
+                }
+              )
+            ]
+          }
+        ) }),
+        tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "div",
+          {
+            ref: tooltipRef,
+            style: {
+              position: "absolute",
+              left: tooltipLeft + 5,
+              top: (tooltipState == null ? void 0 : tooltipState.barY) || 0,
+              pointerEvents: "none",
+              zIndex: 10,
+              opacity: tooltipState ? 1 : 0,
+              transition: "opacity 0.1s ease-out",
+              visibility: tooltipState ? "visible" : "hidden",
+              width: "fit-content",
+              whiteSpace: "nowrap"
+            },
+            children: tooltipState && tooltipFormatter(tooltipState)
+          }
+        )
+      ]
+    }
+  );
 });
 SimpleBarChartComponent.displayName = "simpleBarChart";
 var simpleBarChart_default = SimpleBarChartComponent;