@x-plat/design-system 0.5.12 → 0.5.14

package/dist/components/index.cjs

@@ -2151,29 +2151,50 @@ var toSmoothPath = (points) => {
   }
   return d;
 };
+var RESIZE_SETTLE_MS = 150;
 var useChartSize = (ref) => {
   const [size, setSize] = import_react5.default.useState({ width: 0, height: 0 });
+  const isResizing = import_react5.default.useRef(false);
+  const settleTimer = import_react5.default.useRef(0);
+  const lastSize = import_react5.default.useRef({ width: 0, height: 0 });
+  const initialRef = import_react5.default.useRef(true);
   import_react5.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
-    let rafId = 0;
     const observer = new ResizeObserver((entries) => {
-      cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(() => {
-        const entry = entries[0];
-        if (!entry) return;
-        const { width, height } = entry.contentRect;
-        const w = Math.floor(width);
-        const h = Math.floor(height);
-        setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
-      });
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      const w = Math.floor(width);
+      const h = Math.floor(height);
+      if (w === lastSize.current.width && h === lastSize.current.height) return;
+      lastSize.current = { width: w, height: h };
+      if (initialRef.current) {
+        initialRef.current = false;
+        setSize({ width: w, height: h });
+        return;
+      }
+      isResizing.current = true;
+      if (el.firstElementChild) {
+        const svg = el.firstElementChild;
+        svg.style.transformOrigin = "0 0";
+        svg.style.transform = `scale(${w / (size.width || w)}, ${h / (size.height || h)})`;
+      }
+      window.clearTimeout(settleTimer.current);
+      settleTimer.current = window.setTimeout(() => {
+        isResizing.current = false;
+        if (el.firstElementChild) {
+          el.firstElementChild.style.transform = "";
+        }
+        setSize({ width: w, height: h });
+      }, RESIZE_SETTLE_MS);
     });
     observer.observe(el);
     return () => {
-      cancelAnimationFrame(rafId);
+      window.clearTimeout(settleTimer.current);
       observer.disconnect();
     };
-  }, [ref]);
+  }, [ref, size.width, size.height]);
   return size;
 };
 var useChartTooltip = (enabled) => {
@@ -2365,17 +2386,19 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, onHove
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
   const groupW = chartW / count;
-  const barW = Math.max(1, Math.min(32, groupW * 0.7 / groupCount));
+  const barGap = groupCount > 1 ? 2 : 0;
+  const barW = Math.max(1, Math.min(32, (groupW * 0.7 - barGap * (groupCount - 1)) / groupCount));
   const bars = import_react5.default.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
+        const totalBarsW = barW * groupCount + barGap * (groupCount - 1);
         const h = Math.max(0, v / maxVal * chartH);
-        const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
+        const x = PADDING.left + groupW * i + (groupW - totalBarsW) / 2 + (barW + barGap) * di;
         const y = PADDING.top + chartH - h;
         return { x, y, w: barW, h, v };
       })
     ),
-    [entries, maxVal, chartH, groupW, barW, groupCount]
+    [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
@@ -2387,22 +2410,22 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, onHove
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
-      return bars[di].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
-        "rect",
-        {
-          x: b.x,
-          y: b.y,
-          width: b.w,
-          height: b.h,
-          rx: Math.min(4, b.w / 2),
-          fill: color,
-          className: "chart-bar",
-          onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
-          onMouseMove: onMove,
-          onMouseLeave: onLeave
-        },
-        `${di}-${i}`
-      ));
+      return bars[di].map((b, i) => {
+        const r2 = Math.min(4, b.w / 2);
+        const d = b.h <= r2 ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r2} Q ${b.x} ${b.y} ${b.x + r2} ${b.y} H ${b.x + b.w - r2} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r2} V ${b.y + b.h} Z`;
+        return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+          "path",
+          {
+            d,
+            fill: color,
+            className: "chart-bar",
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseMove: onMove,
+            onMouseLeave: onLeave
+          },
+          `${di}-${i}`
+        );
+      });
     })
   ] });
 });
@@ -2489,20 +2512,22 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     }
   );
 };
-var Chart = (props) => {
+var Chart = import_react5.default.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
+  const stableData = import_react5.default.useMemo(() => data, [JSON.stringify(data)]);
+  const stableLabels = import_react5.default.useMemo(() => labels, [JSON.stringify(labels)]);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(LineChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(CurveChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(BarChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data, labels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
-};
+});
 Chart.displayName = "Chart";
 var Chart_default = Chart;
 
@@ -2764,12 +2789,8 @@ var PortalContainerContext = import_react9.default.createContext(null);
 var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(PortalContainerContext.Provider, { value: container, children });
 var Portal = ({ children }) => {
   const contextContainer = import_react9.default.useContext(PortalContainerContext);
-  const [fallback, setFallback] = import_react9.default.useState(null);
-  import_react9.default.useEffect(() => {
-    if (!contextContainer) setFallback(document.body);
-  }, [contextContainer]);
-  const container = contextContainer ?? fallback;
-  if (!container) return null;
+  if (typeof document === "undefined") return null;
+  const container = contextContainer ?? document.body;
   return import_react_dom.default.createPortal(children, container);
 };
 Portal.displayName = "Portal";
@@ -3397,15 +3418,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
+  import_react18.default.useLayoutEffect(() => {
+    if (!enabled) return;
+    calculatePosition();
+  }, [calculatePosition, enabled]);
   import_react18.default.useEffect(() => {
     if (!enabled) return;
-    const raf = requestAnimationFrame(() => {
-      calculatePosition();
-    });
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
     return () => {
-      cancelAnimationFrame(raf);
       window.removeEventListener("resize", calculatePosition);
       window.removeEventListener("scroll", calculatePosition, true);
     };

package/dist/components/index.css

@@ -1810,6 +1810,8 @@
   display: block;
   width: 100%;
   height: 100%;
+  will-change: transform;
+  contain: layout style paint;
 }
 .lib-xplat-chart .chart-grid {
   stroke: var(--semantic-border-subtle);

package/dist/components/index.js

@@ -2063,29 +2063,50 @@ var toSmoothPath = (points) => {
   }
   return d;
 };
+var RESIZE_SETTLE_MS = 150;
 var useChartSize = (ref) => {
   const [size, setSize] = React5.useState({ width: 0, height: 0 });
+  const isResizing = React5.useRef(false);
+  const settleTimer = React5.useRef(0);
+  const lastSize = React5.useRef({ width: 0, height: 0 });
+  const initialRef = React5.useRef(true);
   React5.useEffect(() => {
     const el = ref.current;
     if (!el) return;
-    let rafId = 0;
     const observer = new ResizeObserver((entries) => {
-      cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(() => {
-        const entry = entries[0];
-        if (!entry) return;
-        const { width, height } = entry.contentRect;
-        const w = Math.floor(width);
-        const h = Math.floor(height);
-        setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
-      });
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      const w = Math.floor(width);
+      const h = Math.floor(height);
+      if (w === lastSize.current.width && h === lastSize.current.height) return;
+      lastSize.current = { width: w, height: h };
+      if (initialRef.current) {
+        initialRef.current = false;
+        setSize({ width: w, height: h });
+        return;
+      }
+      isResizing.current = true;
+      if (el.firstElementChild) {
+        const svg = el.firstElementChild;
+        svg.style.transformOrigin = "0 0";
+        svg.style.transform = `scale(${w / (size.width || w)}, ${h / (size.height || h)})`;
+      }
+      window.clearTimeout(settleTimer.current);
+      settleTimer.current = window.setTimeout(() => {
+        isResizing.current = false;
+        if (el.firstElementChild) {
+          el.firstElementChild.style.transform = "";
+        }
+        setSize({ width: w, height: h });
+      }, RESIZE_SETTLE_MS);
     });
     observer.observe(el);
     return () => {
-      cancelAnimationFrame(rafId);
+      window.clearTimeout(settleTimer.current);
       observer.disconnect();
     };
-  }, [ref]);
+  }, [ref, size.width, size.height]);
   return size;
 };
 var useChartTooltip = (enabled) => {
@@ -2277,17 +2298,19 @@ var BarChart = React5.memo(({ data, labels, width, height, onHover, onMove, onLe
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
   const groupW = chartW / count;
-  const barW = Math.max(1, Math.min(32, groupW * 0.7 / groupCount));
+  const barGap = groupCount > 1 ? 2 : 0;
+  const barW = Math.max(1, Math.min(32, (groupW * 0.7 - barGap * (groupCount - 1)) / groupCount));
   const bars = React5.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
+        const totalBarsW = barW * groupCount + barGap * (groupCount - 1);
         const h = Math.max(0, v / maxVal * chartH);
-        const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
+        const x = PADDING.left + groupW * i + (groupW - totalBarsW) / 2 + (barW + barGap) * di;
         const y = PADDING.top + chartH - h;
         return { x, y, w: barW, h, v };
       })
     ),
-    [entries, maxVal, chartH, groupW, barW, groupCount]
+    [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
   return /* @__PURE__ */ jsxs196("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
@@ -2299,22 +2322,22 @@ var BarChart = React5.memo(({ data, labels, width, height, onHover, onMove, onLe
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
-      return bars[di].map((b, i) => /* @__PURE__ */ jsx305(
-        "rect",
-        {
-          x: b.x,
-          y: b.y,
-          width: b.w,
-          height: b.h,
-          rx: Math.min(4, b.w / 2),
-          fill: color,
-          className: "chart-bar",
-          onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
-          onMouseMove: onMove,
-          onMouseLeave: onLeave
-        },
-        `${di}-${i}`
-      ));
+      return bars[di].map((b, i) => {
+        const r2 = Math.min(4, b.w / 2);
+        const d = b.h <= r2 ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r2} Q ${b.x} ${b.y} ${b.x + r2} ${b.y} H ${b.x + b.w - r2} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r2} V ${b.y + b.h} Z`;
+        return /* @__PURE__ */ jsx305(
+          "path",
+          {
+            d,
+            fill: color,
+            className: "chart-bar",
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseMove: onMove,
+            onMouseLeave: onLeave
+          },
+          `${di}-${i}`
+        );
+      });
     })
   ] });
 });
@@ -2401,20 +2424,22 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     }
   );
 };
-var Chart = (props) => {
+var Chart = React5.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
+  const stableData = React5.useMemo(() => data, [JSON.stringify(data)]);
+  const stableLabels = React5.useMemo(() => labels, [JSON.stringify(labels)]);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ jsxs196("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx305(LineChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx305(CurveChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx305(BarChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx305(PieDonutChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx305(PieDonutChart, { data, labels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ jsx305(LineChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ jsx305(CurveChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ jsx305(BarChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ jsx305(PieDonutChart, { data: stableData, labels: stableLabels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     tooltip.visible && /* @__PURE__ */ jsx305(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
-};
+});
 Chart.displayName = "Chart";
 var Chart_default = Chart;
 
@@ -2676,12 +2701,8 @@ var PortalContainerContext = React8.createContext(null);
 var PortalProvider = ({ container, children }) => /* @__PURE__ */ jsx311(PortalContainerContext.Provider, { value: container, children });
 var Portal = ({ children }) => {
   const contextContainer = React8.useContext(PortalContainerContext);
-  const [fallback, setFallback] = React8.useState(null);
-  React8.useEffect(() => {
-    if (!contextContainer) setFallback(document.body);
-  }, [contextContainer]);
-  const container = contextContainer ?? fallback;
-  if (!container) return null;
+  if (typeof document === "undefined") return null;
+  const container = contextContainer ?? document.body;
   return ReactDOM.createPortal(children, container);
 };
 Portal.displayName = "Portal";
@@ -3309,15 +3330,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
+  React17.useLayoutEffect(() => {
+    if (!enabled) return;
+    calculatePosition();
+  }, [calculatePosition, enabled]);
   React17.useEffect(() => {
     if (!enabled) return;
-    const raf = requestAnimationFrame(() => {
-      calculatePosition();
-    });
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
     return () => {
-      cancelAnimationFrame(raf);
       window.removeEventListener("resize", calculatePosition);
       window.removeEventListener("scroll", calculatePosition, true);
     };

package/dist/index.cjs

@@ -6562,29 +6562,50 @@ var toSmoothPath = (points) => {
   }
   return d;
 };
+var RESIZE_SETTLE_MS = 150;
 var useChartSize = (ref) => {
   const [size, setSize] = import_react5.default.useState({ width: 0, height: 0 });
+  const isResizing = import_react5.default.useRef(false);
+  const settleTimer = import_react5.default.useRef(0);
+  const lastSize = import_react5.default.useRef({ width: 0, height: 0 });
+  const initialRef = import_react5.default.useRef(true);
   import_react5.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
-    let rafId = 0;
     const observer = new ResizeObserver((entries) => {
-      cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(() => {
-        const entry = entries[0];
-        if (!entry) return;
-        const { width, height } = entry.contentRect;
-        const w = Math.floor(width);
-        const h = Math.floor(height);
-        setSize((prev) => prev.width === w && prev.height === h ? prev : { width: w, height: h });
-      });
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      const w = Math.floor(width);
+      const h = Math.floor(height);
+      if (w === lastSize.current.width && h === lastSize.current.height) return;
+      lastSize.current = { width: w, height: h };
+      if (initialRef.current) {
+        initialRef.current = false;
+        setSize({ width: w, height: h });
+        return;
+      }
+      isResizing.current = true;
+      if (el.firstElementChild) {
+        const svg = el.firstElementChild;
+        svg.style.transformOrigin = "0 0";
+        svg.style.transform = `scale(${w / (size.width || w)}, ${h / (size.height || h)})`;
+      }
+      window.clearTimeout(settleTimer.current);
+      settleTimer.current = window.setTimeout(() => {
+        isResizing.current = false;
+        if (el.firstElementChild) {
+          el.firstElementChild.style.transform = "";
+        }
+        setSize({ width: w, height: h });
+      }, RESIZE_SETTLE_MS);
     });
     observer.observe(el);
     return () => {
-      cancelAnimationFrame(rafId);
+      window.clearTimeout(settleTimer.current);
       observer.disconnect();
     };
-  }, [ref]);
+  }, [ref, size.width, size.height]);
   return size;
 };
 var useChartTooltip = (enabled) => {
@@ -6776,17 +6797,19 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, onHove
   const chartW = width - PADDING.left - PADDING.right;
   const chartH = height - PADDING.top - PADDING.bottom;
   const groupW = chartW / count;
-  const barW = Math.max(1, Math.min(32, groupW * 0.7 / groupCount));
+  const barGap = groupCount > 1 ? 2 : 0;
+  const barW = Math.max(1, Math.min(32, (groupW * 0.7 - barGap * (groupCount - 1)) / groupCount));
   const bars = import_react5.default.useMemo(
     () => entries.map(
       ([, values], di) => values.map((v, i) => {
+        const totalBarsW = barW * groupCount + barGap * (groupCount - 1);
         const h = Math.max(0, v / maxVal * chartH);
-        const x = PADDING.left + groupW * i + (groupW - barW * groupCount) / 2 + barW * di;
+        const x = PADDING.left + groupW * i + (groupW - totalBarsW) / 2 + (barW + barGap) * di;
         const y = PADDING.top + chartH - h;
         return { x, y, w: barW, h, v };
       })
     ),
-    [entries, maxVal, chartH, groupW, barW, groupCount]
+    [entries, maxVal, chartH, groupW, barW, barGap, groupCount]
   );
   const barLabelStep = getLabelStep(count, chartW);
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
@@ -6798,22 +6821,22 @@ var BarChart = import_react5.default.memo(({ data, labels, width, height, onHove
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
-      return bars[di].map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
-        "rect",
-        {
-          x: b.x,
-          y: b.y,
-          width: b.w,
-          height: b.h,
-          rx: Math.min(4, b.w / 2),
-          fill: color,
-          className: "chart-bar",
-          onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
-          onMouseMove: onMove,
-          onMouseLeave: onLeave
-        },
-        `${di}-${i}`
-      ));
+      return bars[di].map((b, i) => {
+        const r2 = Math.min(4, b.w / 2);
+        const d = b.h <= r2 ? `M ${b.x} ${b.y + b.h} V ${b.y} H ${b.x + b.w} V ${b.y + b.h} Z` : `M ${b.x} ${b.y + b.h} V ${b.y + r2} Q ${b.x} ${b.y} ${b.x + r2} ${b.y} H ${b.x + b.w - r2} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r2} V ${b.y + b.h} Z`;
+        return /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(
+          "path",
+          {
+            d,
+            fill: color,
+            className: "chart-bar",
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseMove: onMove,
+            onMouseLeave: onLeave
+          },
+          `${di}-${i}`
+        );
+      });
     })
   ] });
 });
@@ -6900,20 +6923,22 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     }
   );
 };
-var Chart = (props) => {
+var Chart = import_react5.default.memo((props) => {
   const { type, data, labels, tooltip: showTooltip = true } = props;
   const { tooltip, show, hide, move, containerRef } = useChartTooltip(showTooltip);
   const { width, height } = useChartSize(containerRef);
+  const stableData = import_react5.default.useMemo(() => data, [JSON.stringify(data)]);
+  const stableLabels = import_react5.default.useMemo(() => labels, [JSON.stringify(labels)]);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime305.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(LineChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(CurveChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(BarChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data, labels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime305.jsx)(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
-};
+});
 Chart.displayName = "Chart";
 var Chart_default = Chart;
 
@@ -7188,12 +7213,8 @@ var PortalContainerContext = import_react9.default.createContext(null);
 var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(PortalContainerContext.Provider, { value: container, children });
 var Portal = ({ children }) => {
   const contextContainer = import_react9.default.useContext(PortalContainerContext);
-  const [fallback, setFallback] = import_react9.default.useState(null);
-  import_react9.default.useEffect(() => {
-    if (!contextContainer) setFallback(document.body);
-  }, [contextContainer]);
-  const container = contextContainer ?? fallback;
-  if (!container) return null;
+  if (typeof document === "undefined") return null;
+  const container = contextContainer ?? document.body;
   return import_react_dom.default.createPortal(children, container);
 };
 Portal.displayName = "Portal";
@@ -7821,15 +7842,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
+  import_react18.default.useLayoutEffect(() => {
+    if (!enabled) return;
+    calculatePosition();
+  }, [calculatePosition, enabled]);
   import_react18.default.useEffect(() => {
     if (!enabled) return;
-    const raf = requestAnimationFrame(() => {
-      calculatePosition();
-    });
     window.addEventListener("resize", calculatePosition);
     window.addEventListener("scroll", calculatePosition, true);
     return () => {
-      cancelAnimationFrame(raf);
       window.removeEventListener("resize", calculatePosition);
       window.removeEventListener("scroll", calculatePosition, true);
     };

package/dist/index.css

@@ -1810,6 +1810,8 @@
   display: block;
   width: 100%;
   height: 100%;
+  will-change: transform;
+  contain: layout style paint;
 }
 .lib-xplat-chart .chart-grid {
   stroke: var(--semantic-border-subtle);