@skygraph/react 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -2465,6 +2465,7 @@ function Checkbox({
         onChange: (e) => onChange?.(e.target.checked)
       }
     ),
+    !unstyled && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sg-checkbox-box", "aria-hidden": true }),
     children && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: unstyled ? "" : "sg-checkbox-label", children }),
     loading && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Spin, { size: "small", unstyled })
   ] });
@@ -2999,7 +3000,7 @@ function AdvancedFilterPanel({ col, t, state, actions, filterRef }) {
             value: draftOp,
             onChange: (v) => setDraftOp(v),
             options: ops.map((op) => ({ label: operatorLabel(op, t), value: op })),
-            "aria-label": "Filter operator"
+            "aria-label": t.filterOperatorAriaLabel
           }
         ) }),
         showValueInput && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "sg-table-filter-advanced-row", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -3255,7 +3256,7 @@ function TableHeader(props) {
                       className: ["sg-table-th-content", sCls.headerCellContent].filter(Boolean).join(" "),
                       style: sSty.headerCellContent,
                       children: [
-                        cell.col.title,
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sg-table-th-title", children: cell.col.title }),
                         isLeaf && cell.col.tooltip && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ColumnTooltip, { content: cell.col.tooltip }),
                         isLeaf && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SortIndicator, { col: cell.col, ...sortProps })
                       ]
@@ -3324,7 +3325,7 @@ function TableHeader(props) {
                   className: ["sg-table-th-content", sCls.headerCellContent].filter(Boolean).join(" "),
                   style: sSty.headerCellContent,
                   children: [
-                    col.title,
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sg-table-th-title", children: col.title }),
                     col.tooltip && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ColumnTooltip, { content: col.tooltip }),
                     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SortIndicator, { col, ...sortProps })
                   ]
@@ -3829,7 +3830,9 @@ function VirtualTableBody(props) {
     if (!el) return;
     setViewportHeight(el.clientHeight);
     setScrollTop(el.scrollTop);
-    const onScroll = () => setScrollTop(el.scrollTop);
+    const onScroll = () => {
+      setScrollTop(el.scrollTop);
+    };
     el.addEventListener("scroll", onScroll, { passive: true });
     let ro = null;
     if (typeof ResizeObserver !== "undefined") {
@@ -4520,7 +4523,8 @@ var DEFAULT_LOCALE = {
   filterOpStartsWith: "starts with",
   filterOpEndsWith: "ends with",
   filterOpIsEmpty: "is empty",
-  filterOpIsNotEmpty: "is not empty"
+  filterOpIsNotEmpty: "is not empty",
+  filterOperatorAriaLabel: "Filter operator"
 };
 var DEFAULT_COL_WIDTH = 150;
 var MIN_COL_WIDTH = 50;
@@ -8919,9 +8923,7 @@ function RadioGroup({
 }) {
   const config = useConfig();
   const disabled = disabledProp ?? config.disabled ?? false;
-  const [internalValue, setInternalValue] = import_react33.default.useState(
-    value ?? defaultValue
-  );
+  const [internalValue, setInternalValue] = import_react33.default.useState(value ?? defaultValue);
   const currentValue = value ?? internalValue;
   const groupClass = unstyled ? className ?? "" : [
     "sg-radio-group",
@@ -8953,6 +8955,7 @@ function RadioGroup({
             }
           }
         ),
+        !unstyled && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sg-radio-box", "aria-hidden": "true" }),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: unstyled ? "" : "sg-radio-label", children: opt.label }),
         loading && currentValue === opt.value && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Spin, { size: "small", unstyled })
       ]
@@ -15685,47 +15688,26 @@ function selectionsEqual(a, b) {
 
 // src/components/complex/Diagram/Diagram.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
-function resolveAnchor(graph, nodeId, ref) {
-  const anchors = graph.anchorsOf(nodeId);
-  let anchor;
-  if (typeof ref === "string") {
-    anchor = anchors.find((a) => a.id === ref);
-  } else {
-    let best;
-    let bestDiff = Infinity;
-    for (const a of anchors) {
-      const diff = Math.abs(a.s - ref.s);
-      if (diff < bestDiff) {
-        bestDiff = diff;
-        best = a;
-      }
-    }
-    anchor = best;
-  }
-  if (!anchor) return null;
-  return { point: anchor.point };
-}
-function endpointWorldPoint(graph, ep) {
-  const node = graph.getNode(ep.node);
-  if (!node) return null;
-  const local = resolveAnchor(graph, ep.node, ep.anchor);
-  if (!local) return null;
-  const bounds = graph.boundsOf(ep.node);
-  return [
-    bounds.x + (local.point[0] - localOriginOffset(node).x),
-    bounds.y + (local.point[1] - localOriginOffset(node).y)
-  ];
-}
-function localOriginOffset(node) {
-  const o = node.outline;
-  if (o.kind === "ellipse") return { x: -o.rx, y: -o.ry };
-  return { x: 0, y: 0 };
-}
 function defaultRenderNode(node) {
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "sg-diagram-node-label", children: node.id });
 }
 var ORTHOGONAL_CORNER_RADIUS = 8;
-function buildEdgePath(edge, start, end, obstacles, sourceBounds, targetBounds, routerOpts) {
+var ENDPOINT_PADDING = 8;
+function resolveEdgeEndpoints(sourceBox, targetBox) {
+  const source = (0, import_core9.resolveEdgeEndpoint)(sourceBox, targetBox, ENDPOINT_PADDING);
+  const target = (0, import_core9.resolveEdgeEndpoint)(targetBox, sourceBox, ENDPOINT_PADDING);
+  return { source, target };
+}
+function edgeMidpoint(graph, ep) {
+  const sb = graph.boundsOf(ep.from.node);
+  const tb = graph.boundsOf(ep.to.node);
+  if (sb.w === 0 || tb.w === 0) return null;
+  const { source, target } = resolveEdgeEndpoints(sb, tb);
+  return [(source.point[0] + target.point[0]) / 2, (source.point[1] + target.point[1]) / 2];
+}
+function buildEdgePath(edge, source, target, obstacles, sourceBounds, targetBounds, routerOpts) {
+  const start = source.point;
+  const end = target.point;
   switch (edge.routing) {
     case "orthogonal": {
       const points = (0, import_core9.routeOrthogonal)(start, end, {
@@ -15734,18 +15716,18 @@ function buildEdgePath(edge, start, end, obstacles, sourceBounds, targetBounds,
         inflate: routerOpts?.inflate,
         maxNodes: routerOpts?.maxNodes,
         sourceBounds,
-        targetBounds
+        targetBounds,
+        stepPosition: routerOpts?.stepPosition,
+        stubLength: routerOpts?.stubLength
       });
       return (0, import_core9.pointsToRoundedPath)(points, routerOpts?.cornerRadius ?? ORTHOGONAL_CORNER_RADIUS);
     }
     case "bezier": {
-      const sourceSide = sourceBounds ? (0, import_core9.nearestSide)(sourceBounds, end) : "right";
-      const targetSide = targetBounds ? (0, import_core9.nearestSide)(targetBounds, start) : "left";
       return (0, import_core9.getBezierPath)({
         source: start,
-        sourceSide,
+        sourceSide: source.side,
         target: end,
-        targetSide,
+        targetSide: target.side,
         curvature: routerOpts?.curvature
       });
     }
@@ -16214,10 +16196,9 @@ function DiagramInner({
   const hoveredEdgeRecord = hoveredEdge != null ? state.edges.get(hoveredEdge) ?? null : null;
   const hoveredEdgeMid = (0, import_react66.useMemo)(() => {
     if (!hoveredEdgeRecord) return null;
-    const a = endpointWorldPoint(graph, hoveredEdgeRecord.from);
-    const b = endpointWorldPoint(graph, hoveredEdgeRecord.to);
-    if (!a || !b) return null;
-    return { x: (a[0] + b[0]) / 2, y: (a[1] + b[1]) / 2 };
+    const mid = edgeMidpoint(graph, hoveredEdgeRecord);
+    if (!mid) return null;
+    return { x: mid[0], y: mid[1] };
   }, [graph, hoveredEdgeRecord]);
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
     "div",
@@ -16263,53 +16244,33 @@ function DiagramInner({
                   },
                   "aria-hidden": "true",
                   children: [
-                    edgeArrows && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("defs", { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                        "marker",
-                        {
-                          id: "sg-diagram-arrow",
-                          viewBox: "0 0 10 10",
-                          refX: "9",
-                          refY: "5",
-                          markerWidth: "7",
-                          markerHeight: "7",
-                          orient: "auto-start-reverse",
-                          markerUnits: "userSpaceOnUse",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                            "path",
-                            {
-                              d: "M 0 0 L 10 5 L 0 10 Z",
-                              fill: "context-stroke",
-                              className: "sg-diagram-arrow-fill"
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                        "marker",
-                        {
-                          id: "sg-diagram-arrow-hover",
-                          viewBox: "0 0 10 10",
-                          refX: "9",
-                          refY: "5",
-                          markerWidth: "8",
-                          markerHeight: "8",
-                          orient: "auto-start-reverse",
-                          markerUnits: "userSpaceOnUse",
-                          children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                            "path",
-                            {
-                              d: "M 0 0 L 10 5 L 0 10 Z",
-                              fill: "context-stroke",
-                              className: "sg-diagram-arrow-fill"
-                            }
-                          )
-                        }
-                      )
-                    ] }),
+                    edgeArrows && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                      "marker",
+                      {
+                        id: "sg-diagram-arrow",
+                        viewBox: "-10 -10 20 20",
+                        refX: "0",
+                        refY: "0",
+                        markerWidth: "12",
+                        markerHeight: "12",
+                        orient: "auto-start-reverse",
+                        markerUnits: "strokeWidth",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                          "path",
+                          {
+                            d: "M -7 -5 L 0 0 L -7 5",
+                            fill: "none",
+                            stroke: "context-stroke",
+                            strokeWidth: "1.5",
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            className: "sg-diagram-arrow-fill"
+                          }
+                        )
+                      }
+                    ) }),
                     edges.map(
                       (edge) => renderEdge(
-                        graph,
                         edge,
                         boundsById,
                         routeAroundNodes,
@@ -16409,10 +16370,11 @@ function DiagramInner({
     }
   );
 }
-function renderEdge(graph, edge, boundsById, routeAroundNodes, routerOpts, interactive, arrows, onContextMenu, onMouseEnter, onMouseLeave) {
-  const a = endpointWorldPoint(graph, edge.from);
-  const b = endpointWorldPoint(graph, edge.to);
-  if (!a || !b) return null;
+function renderEdge(edge, boundsById, routeAroundNodes, routerOpts, interactive, arrows, onContextMenu, onMouseEnter, onMouseLeave) {
+  const sBox = boundsById.get(edge.from.node);
+  const tBox = boundsById.get(edge.to.node);
+  if (!sBox || !tBox) return null;
+  const { source, target } = resolveEdgeEndpoints(sBox, tBox);
   let obstacles;
   if (routeAroundNodes && edge.routing === "orthogonal") {
     const skip = /* @__PURE__ */ new Set([edge.from.node, edge.to.node]);
@@ -16421,10 +16383,7 @@ function renderEdge(graph, edge, boundsById, routeAroundNodes, routerOpts, inter
       if (!skip.has(id)) obstacles.push(bb);
     }
   }
-  const needsBounds = edge.routing === "orthogonal" || edge.routing === "bezier";
-  const sourceBounds = needsBounds ? boundsById.get(edge.from.node) : void 0;
-  const targetBounds = needsBounds ? boundsById.get(edge.to.node) : void 0;
-  const d = buildEdgePath(edge, a, b, obstacles, sourceBounds, targetBounds, routerOpts);
+  const d = buildEdgePath(edge, source, target, obstacles, void 0, void 0, routerOpts);
   const markerEnd = arrows ? "url(#sg-diagram-arrow)" : void 0;
   if (!interactive) {
     return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
@@ -16950,11 +16909,18 @@ function alignUp(t, step) {
 function clamp2(v, lo, hi) {
   return Math.max(lo, Math.min(hi, v));
 }
-function formatTick(timeMs, scale) {
+function formatTick(timeMs, scale, columnWidth) {
   const d = new Date(timeMs);
   switch (scale) {
     case "day": {
       const dd = String(d.getUTCDate()).padStart(2, "0");
+      if (columnWidth < 32) {
+        if (d.getUTCDate() === 1) {
+          const mm2 = String(d.getUTCMonth() + 1).padStart(2, "0");
+          return `${dd}.${mm2}`;
+        }
+        return dd;
+      }
       const mm = String(d.getUTCMonth() + 1).padStart(2, "0");
       return `${dd}.${mm}`;
     }
@@ -17034,12 +17000,12 @@ function Gantt({
     for (let t = resolved.rangeStart; t < resolved.rangeEnd; t += resolved.step) {
       out.push({
         x: (t - resolved.rangeStart) * resolved.pxPerMs,
-        label: formatTick(t, scale),
+        label: formatTick(t, scale, columnWidth),
         time: t
       });
     }
     return out;
-  }, [resolved, scale]);
+  }, [resolved, scale, columnWidth]);
   const taskRects = (0, import_react69.useMemo)(() => {
     return tasks.map((task) => {
       const startMs = toMs(task.start);
@@ -17058,17 +17024,38 @@ function Gantt({
   }, [taskRects]);
   const dependencyPaths = (0, import_react69.useMemo)(() => {
     const out = [];
+    const STUB = 8;
+    const APPROACH = 18;
     for (const r of taskRects) {
       const deps = r.task.dependencies;
       if (!deps || deps.length === 0) continue;
       for (const depId of deps) {
         const src = taskRectById.get(depId);
         if (!src) continue;
-        const startPt = [src.x + src.w, src.y + src.h / 2];
-        const endPt = [r.x, r.y + r.h / 2];
-        const points = (0, import_core10.routeOrthogonal)(startPt, endPt, {
-          preferred: "hv"
-        });
+        const sx = src.x + src.w;
+        const sy = src.y + src.h / 2;
+        const tx = r.x;
+        const ey = r.y + r.h / 2;
+        let points;
+        if (tx >= sx + STUB + APPROACH) {
+          const bendX = sx + STUB;
+          points = [
+            [sx, sy],
+            [bendX, sy],
+            [bendX, ey],
+            [tx, ey]
+          ];
+        } else {
+          const detourY = src.y + src.h;
+          points = [
+            [sx, sy],
+            [sx + STUB, sy],
+            [sx + STUB, detourY],
+            [tx - APPROACH, detourY],
+            [tx - APPROACH, ey],
+            [tx, ey]
+          ];
+        }
         out.push({ id: `${depId}->${r.task.id}`, d: (0, import_core10.pointsToPath)(points) });
       }
     }
@@ -17135,12 +17122,13 @@ function Gantt({
   const wrapperClass = unstyled ? className : ["sg-gantt", className].filter(Boolean).join(" ");
   const headerHeight = rowHeight;
   const gridHeight = resolved.rows.length * rowHeight;
-  const totalHeight = gridHeight + headerHeight;
+  const SCROLLBAR_RESERVE = 14;
+  const totalHeight = gridHeight + headerHeight + SCROLLBAR_RESERVE;
   const wrapperStyle = {
     display: "grid",
-    gridTemplateColumns: `${sidebarWidth}px 1fr`,
+    gridTemplateColumns: `${sidebarWidth}px minmax(0, 1fr)`,
     width: "100%",
-    overflow: "auto",
+    overflow: "hidden",
     height: totalHeight,
     ...style
   };
@@ -17173,12 +17161,12 @@ function Gantt({
             row.key
           ))
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           "div",
           {
             className: unstyled ? void 0 : "sg-gantt-main",
-            style: { position: "relative", width: resolved.totalWidth, minWidth: "100%" },
-            children: [
+            style: { position: "relative", overflowX: "auto", overflowY: "hidden", minWidth: 0 },
+            children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { style: { position: "relative", width: resolved.totalWidth, minWidth: "100%" }, children: [
               /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                 "div",
                 {
@@ -17227,44 +17215,6 @@ function Gantt({
                       },
                       row.key
                     )),
-                    dependencyPaths.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
-                      "svg",
-                      {
-                        className: unstyled ? void 0 : "sg-gantt-deps",
-                        width: resolved.totalWidth,
-                        height: gridHeight,
-                        style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "visible" },
-                        "aria-hidden": "true",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-                            "marker",
-                            {
-                              id: "sg-gantt-arrow",
-                              viewBox: "0 0 10 10",
-                              refX: "8",
-                              refY: "5",
-                              markerWidth: "6",
-                              markerHeight: "6",
-                              orient: "auto",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "currentColor" })
-                            }
-                          ) }),
-                          dependencyPaths.map((p) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
-                            "path",
-                            {
-                              d: p.d,
-                              className: unstyled ? void 0 : "sg-gantt-dep",
-                              fill: "none",
-                              stroke: "currentColor",
-                              strokeWidth: 1.5,
-                              markerEnd: "url(#sg-gantt-arrow)",
-                              "data-dep-id": p.id
-                            },
-                            p.id
-                          ))
-                        ]
-                      }
-                    ),
                     taskRects.map(({ task, x, y, w, h }) => {
                       const barClass = unstyled ? void 0 : [
                         "sg-gantt-bar",
@@ -17338,11 +17288,54 @@ function Gantt({
                         },
                         task.id
                       );
-                    })
+                    }),
+                    dependencyPaths.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+                      "svg",
+                      {
+                        className: unstyled ? void 0 : "sg-gantt-deps",
+                        width: resolved.totalWidth,
+                        height: gridHeight,
+                        style: {
+                          position: "absolute",
+                          inset: 0,
+                          pointerEvents: "none",
+                          overflow: "visible"
+                        },
+                        "aria-hidden": "true",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                            "marker",
+                            {
+                              id: "sg-gantt-arrow",
+                              viewBox: "0 0 10 10",
+                              refX: "10",
+                              refY: "5",
+                              markerWidth: "6",
+                              markerHeight: "6",
+                              orient: "auto",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "currentColor" })
+                            }
+                          ) }),
+                          dependencyPaths.map((p) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                            "path",
+                            {
+                              d: p.d,
+                              className: unstyled ? void 0 : "sg-gantt-dep",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: 1.5,
+                              markerEnd: "url(#sg-gantt-arrow)",
+                              "data-dep-id": p.id
+                            },
+                            p.id
+                          ))
+                        ]
+                      }
+                    )
                   ]
                 }
               )
-            ]
+            ] })
           }
         )
       ]
@@ -17388,14 +17381,7 @@ function formatTick2(timeMs, scale) {
     }
   }
 }
-function deriveRange2(assignments, step) {
-  if (assignments.length === 0) {
-    const now = Date.now();
-    return {
-      from: new Date(alignDown2(now, step)),
-      to: new Date(alignUp2(now + step * 4, step))
-    };
-  }
+function resolveRange(assignments, step, range) {
   let lo = Infinity;
   let hi = -Infinity;
   for (const a of assignments) {
@@ -17404,6 +17390,22 @@ function deriveRange2(assignments, step) {
     if (s < lo) lo = s;
     if (e > hi) hi = e;
   }
+  if (range) {
+    const rangeFrom = range.from.getTime();
+    const rangeTo = range.to.getTime();
+    if (assignments.length === 0) return { from: new Date(rangeFrom), to: new Date(rangeTo) };
+    return {
+      from: new Date(alignDown2(Math.min(rangeFrom, lo), step)),
+      to: new Date(alignUp2(Math.max(rangeTo, hi), step))
+    };
+  }
+  if (assignments.length === 0) {
+    const now = Date.now();
+    return {
+      from: new Date(alignDown2(now, step)),
+      to: new Date(alignUp2(now + step * 4, step))
+    };
+  }
   return {
     from: new Date(alignDown2(lo - step, step)),
     to: new Date(alignUp2(hi + step, step))
@@ -17434,7 +17436,7 @@ function ResourceCalendar({
   const [ghost, setGhost] = (0, import_react70.useState)(null);
   const step = STEP_MS2[scale];
   const resolvedRange = (0, import_react70.useMemo)(
-    () => range ?? deriveRange2(assignments, step),
+    () => resolveRange(assignments, step, range),
     [range, assignments, step]
   );
   const rangeStart = resolvedRange.from.getTime();
@@ -18053,6 +18055,33 @@ function normalizePadding(p) {
   if (typeof p === "number") return [p, p, p, p];
   return [...p];
 }
+function defaultYTickFormatter(value) {
+  if (Number.isInteger(value)) return String(value);
+  if (Math.abs(value) >= 1e3) return value.toFixed(0);
+  if (Math.abs(value) >= 1) return value.toFixed(2).replace(/\.?0+$/, "");
+  return value.toFixed(2);
+}
+function estimateYAxisLabelWidth(min, max, tickCount, formatter) {
+  const fmt = formatter ?? defaultYTickFormatter;
+  const count = Math.max(2, tickCount ?? 5);
+  let maxLen = 0;
+  for (let i = 0; i < count; i++) {
+    const t = i / (count - 1);
+    const value = min + t * (max - min);
+    const s = fmt(value);
+    if (s.length > maxLen) maxLen = s.length;
+  }
+  return maxLen * 7;
+}
+function resolveChartPadding(userPadding, yAxis, yMin, yMax) {
+  const base = normalizePadding(userPadding);
+  if (userPadding !== void 0 || !yAxis) return base;
+  const labelW = estimateYAxisLabelWidth(yMin, yMax, yAxis.tickCount, yAxis.tickFormatter);
+  const need = Math.ceil(labelW + 18);
+  if (need > base[3]) base[3] = need;
+  if (yAxis.label) base[3] += 16;
+  return base;
+}
 function chartBounds(values) {
   let min = Infinity;
   let max = -Infinity;
@@ -19006,7 +19035,11 @@ function LineChartInner({
   const chartsLocale = useConfig().locale?.charts;
   const { rootRef } = useChartPrint(forwardedRef, printable);
   const svgRef = (0, import_react77.useRef)(null);
-  const [pt, pr, pb, pl] = normalizePadding(padding);
+  const { min, max } = (0, import_react77.useMemo)(() => chartBounds(series.map((s) => s.values)), [series]);
+  const [pt, pr, pb, pl] = (0, import_react77.useMemo)(
+    () => resolveChartPadding(padding, yAxis, min, max),
+    [padding, yAxis, min, max]
+  );
   const fallbackW = typeof width === "number" && Number.isFinite(width) ? width : 600;
   const fallbackH = typeof height === "number" && Number.isFinite(height) ? height : 200;
   const measured = useChartSize(svgRef, { width: fallbackW, height: fallbackH });
@@ -19014,7 +19047,6 @@ function LineChartInner({
   const viewH = measured.height;
   const plotW = Math.max(0, viewW - pl - pr);
   const plotH = Math.max(0, viewH - pt - pb);
-  const { min, max } = (0, import_react77.useMemo)(() => chartBounds(series.map((s) => s.values)), [series]);
   const range = max - min || 1;
   const xStep = categories.length > 1 ? plotW / (categories.length - 1) : 0;
   function xFor(i) {
@@ -19283,7 +19315,14 @@ function BarChartInner({
   const chartsLocale = useConfig().locale?.charts;
   const { rootRef } = useChartPrint(forwardedRef, printable);
   const svgRef = (0, import_react78.useRef)(null);
-  const [pt, pr, pb, pl] = normalizePadding(padding);
+  const { min, max } = (0, import_react78.useMemo)(() => chartBounds(series.map((s) => s.values)), [series]);
+  const baseline = Math.min(0, min);
+  const top = Math.max(0, max);
+  const span = top - baseline || 1;
+  const [pt, pr, pb, pl] = (0, import_react78.useMemo)(
+    () => resolveChartPadding(padding, yAxis, baseline, top),
+    [padding, yAxis, baseline, top]
+  );
   const fallbackW = typeof width === "number" && Number.isFinite(width) ? width : 600;
   const fallbackH = typeof height === "number" && Number.isFinite(height) ? height : 200;
   const measured = useChartSize(svgRef, { width: fallbackW, height: fallbackH });
@@ -19291,10 +19330,6 @@ function BarChartInner({
   const viewH = measured.height;
   const plotW = Math.max(0, viewW - pl - pr);
   const plotH = Math.max(0, viewH - pt - pb);
-  const { min, max } = (0, import_react78.useMemo)(() => chartBounds(series.map((s) => s.values)), [series]);
-  const baseline = Math.min(0, min);
-  const top = Math.max(0, max);
-  const span = top - baseline || 1;
   const yZero = pt + top / span * plotH;
   const groupCount = categories.length;
   const groupWidth = groupCount > 0 ? plotW / groupCount : 0;
@@ -19489,14 +19524,6 @@ function AreaChartInner({
   const chartsLocale = useConfig().locale?.charts;
   const { rootRef } = useChartPrint(forwardedRef, printable);
   const svgRef = (0, import_react79.useRef)(null);
-  const [pt, pr, pb, pl] = normalizePadding(padding);
-  const fallbackW = typeof width === "number" && Number.isFinite(width) ? width : 600;
-  const fallbackH = typeof height === "number" && Number.isFinite(height) ? height : 200;
-  const measured = useChartSize(svgRef, { width: fallbackW, height: fallbackH });
-  const viewW = measured.width;
-  const viewH = measured.height;
-  const plotW = Math.max(0, viewW - pl - pr);
-  const plotH = Math.max(0, viewH - pt - pb);
   const stackedValues = (0, import_react79.useMemo)(() => {
     if (!stacked) return series.map((s) => [...s.values]);
     const totals = new Array(categories.length).fill(0);
@@ -19517,6 +19544,17 @@ function AreaChartInner({
   const baseline = Math.min(0, min);
   const top = Math.max(0, max);
   const span = top - baseline || 1;
+  const [pt, pr, pb, pl] = (0, import_react79.useMemo)(
+    () => resolveChartPadding(padding, yAxis, baseline, top),
+    [padding, yAxis, baseline, top]
+  );
+  const fallbackW = typeof width === "number" && Number.isFinite(width) ? width : 600;
+  const fallbackH = typeof height === "number" && Number.isFinite(height) ? height : 200;
+  const measured = useChartSize(svgRef, { width: fallbackW, height: fallbackH });
+  const viewW = measured.width;
+  const viewH = measured.height;
+  const plotW = Math.max(0, viewW - pl - pr);
+  const plotH = Math.max(0, viewH - pt - pb);
   const xStep = categories.length > 1 ? plotW / (categories.length - 1) : 0;
   function xFor(i) {
     return pl + i * xStep;
@@ -20812,10 +20850,20 @@ function ListInner({
     setDragIndex(null);
     setDropIndex(null);
   }, []);
+  const scrollRafRef = import_react83.default.useRef(null);
   const handleVirtualScroll = import_react83.default.useCallback(() => {
-    if (virtualRef.current) {
-      setScrollTop(virtualRef.current.scrollTop);
-    }
+    if (scrollRafRef.current != null) return;
+    scrollRafRef.current = requestAnimationFrame(() => {
+      scrollRafRef.current = null;
+      if (virtualRef.current) {
+        setScrollTop(virtualRef.current.scrollTop);
+      }
+    });
+  }, []);
+  import_react83.default.useEffect(() => {
+    return () => {
+      if (scrollRafRef.current != null) cancelAnimationFrame(scrollRafRef.current);
+    };
   }, []);
   const emptyText = locale?.emptyText ?? "No Data";
   const gridStyle = import_react83.default.useMemo(() => {