@x-plat/design-system 0.5.12 → 0.5.14

package/dist/components/Chart/index.cjs

@@ -80,29 +80,50 @@ var toSmoothPath = (points) => {
   }
   return d;
 };
+var RESIZE_SETTLE_MS = 150;
 var useChartSize = (ref) => {
   const [size, setSize] = import_react.default.useState({ width: 0, height: 0 });
+  const isResizing = import_react.default.useRef(false);
+  const settleTimer = import_react.default.useRef(0);
+  const lastSize = import_react.default.useRef({ width: 0, height: 0 });
+  const initialRef = import_react.default.useRef(true);
   import_react.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) => {
@@ -294,17 +315,19 @@ var BarChart = import_react.default.memo(({ data, labels, width, height, onHover
   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_react.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_runtime.jsxs)("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
@@ -316,22 +339,22 @@ var BarChart = import_react.default.memo(({ data, labels, width, height, onHover
     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_runtime.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 r = Math.min(4, b.w / 2);
+        const d = b.h <= r ? `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 + r} Q ${b.x} ${b.y} ${b.x + r} ${b.y} H ${b.x + b.w - r} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r} V ${b.y + b.h} Z`;
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d,
+            fill: color,
+            className: "chart-bar",
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseMove: onMove,
+            onMouseLeave: onLeave
+          },
+          `${di}-${i}`
+        );
+      });
     })
   ] });
 });
@@ -418,20 +441,22 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     }
   );
 };
-var Chart = (props) => {
+var Chart = import_react.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_react.default.useMemo(() => data, [JSON.stringify(data)]);
+  const stableLabels = import_react.default.useMemo(() => labels, [JSON.stringify(labels)]);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LineChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurveChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data, labels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LineChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurveChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BarChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PieDonutChart, { data: stableData, labels: stableLabels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     tooltip.visible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
-};
+});
 Chart.displayName = "Chart";
 var Chart_default = Chart;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/components/Chart/index.css

@@ -9,6 +9,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/Chart/index.d.cts

@@ -6,6 +6,6 @@ interface ChartProps {
     labels: string[];
     tooltip?: boolean;
 }
-declare const Chart: React.FC<ChartProps>;
+declare const Chart: React.NamedExoticComponent<ChartProps>;
 
 export { Chart };

package/dist/components/Chart/index.d.ts

@@ -6,6 +6,6 @@ interface ChartProps {
     labels: string[];
     tooltip?: boolean;
 }
-declare const Chart: React.FC<ChartProps>;
+declare const Chart: React.NamedExoticComponent<ChartProps>;
 
 export { Chart };

package/dist/components/Chart/index.js

@@ -44,29 +44,50 @@ var toSmoothPath = (points) => {
   }
   return d;
 };
+var RESIZE_SETTLE_MS = 150;
 var useChartSize = (ref) => {
   const [size, setSize] = React.useState({ width: 0, height: 0 });
+  const isResizing = React.useRef(false);
+  const settleTimer = React.useRef(0);
+  const lastSize = React.useRef({ width: 0, height: 0 });
+  const initialRef = React.useRef(true);
   React.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) => {
@@ -258,17 +279,19 @@ var BarChart = React.memo(({ data, labels, width, height, onHover, onMove, onLea
   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 = React.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__ */ jsxs("svg", { viewBox: `0 0 ${width} ${height}`, className: "chart-svg", children: [
@@ -280,22 +303,22 @@ var BarChart = React.memo(({ data, labels, width, height, onHover, onMove, onLea
     entries.map(([key], di) => {
       const palette = getPalette(LINE_BAR_PALETTES, di, key);
       const color = palette[2];
-      return bars[di].map((b, i) => /* @__PURE__ */ 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 r = Math.min(4, b.w / 2);
+        const d = b.h <= r ? `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 + r} Q ${b.x} ${b.y} ${b.x + r} ${b.y} H ${b.x + b.w - r} Q ${b.x + b.w} ${b.y} ${b.x + b.w} ${b.y + r} V ${b.y + b.h} Z`;
+        return /* @__PURE__ */ jsx(
+          "path",
+          {
+            d,
+            fill: color,
+            className: "chart-bar",
+            onMouseEnter: (e) => onHover(e, `${key}: ${labels[i]} \u2014 ${b.v}`),
+            onMouseMove: onMove,
+            onMouseLeave: onLeave
+          },
+          `${di}-${i}`
+        );
+      });
     })
   ] });
 });
@@ -382,20 +405,22 @@ var TooltipBubble = ({ x, y, containerWidth, children }) => {
     }
   );
 };
-var Chart = (props) => {
+var Chart = React.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 = React.useMemo(() => data, [JSON.stringify(data)]);
+  const stableLabels = React.useMemo(() => labels, [JSON.stringify(labels)]);
   const ready = width > 0 && height > 0;
   return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-chart", ref: containerRef, children: [
-    ready && type === "line" && /* @__PURE__ */ jsx(LineChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "curve" && /* @__PURE__ */ jsx(CurveChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "bar" && /* @__PURE__ */ jsx(BarChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "pie" && /* @__PURE__ */ jsx(PieDonutChart, { data, labels, width, height, onHover: show, onMove: move, onLeave: hide }),
-    ready && type === "doughnut" && /* @__PURE__ */ jsx(PieDonutChart, { data, labels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "line" && /* @__PURE__ */ jsx(LineChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "curve" && /* @__PURE__ */ jsx(CurveChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "bar" && /* @__PURE__ */ jsx(BarChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "pie" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, onHover: show, onMove: move, onLeave: hide }),
+    ready && type === "doughnut" && /* @__PURE__ */ jsx(PieDonutChart, { data: stableData, labels: stableLabels, width, height, isDoughnut: true, onHover: show, onMove: move, onLeave: hide }),
     tooltip.visible && /* @__PURE__ */ jsx(TooltipBubble, { x: tooltip.x, y: tooltip.y, containerWidth: width, children: tooltip.content })
   ] });
-};
+});
 Chart.displayName = "Chart";
 var Chart_default = Chart;
 export {

package/dist/components/DatePicker/index.cjs

@@ -443,12 +443,8 @@ var PortalContainerContext = import_react4.default.createContext(null);
 var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PortalContainerContext.Provider, { value: container, children });
 var Portal = ({ children }) => {
   const contextContainer = import_react4.default.useContext(PortalContainerContext);
-  const [fallback, setFallback] = import_react4.default.useState(null);
-  import_react4.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";

package/dist/components/DatePicker/index.js

@@ -404,12 +404,8 @@ var PortalContainerContext = React3.createContext(null);
 var PortalProvider = ({ container, children }) => /* @__PURE__ */ jsx10(PortalContainerContext.Provider, { value: container, children });
 var Portal = ({ children }) => {
   const contextContainer = React3.useContext(PortalContainerContext);
-  const [fallback, setFallback] = React3.useState(null);
-  React3.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";

package/dist/components/Dropdown/index.cjs

@@ -68,15 +68,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
+  import_react.default.useLayoutEffect(() => {
+    if (!enabled) return;
+    calculatePosition();
+  }, [calculatePosition, enabled]);
   import_react.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);
     };
@@ -117,12 +117,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var PortalContainerContext = import_react3.default.createContext(null);
 var Portal = ({ children }) => {
   const contextContainer = import_react3.default.useContext(PortalContainerContext);
-  const [fallback, setFallback] = import_react3.default.useState(null);
-  import_react3.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";

package/dist/components/Dropdown/index.js

@@ -32,15 +32,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
+  React.useLayoutEffect(() => {
+    if (!enabled) return;
+    calculatePosition();
+  }, [calculatePosition, enabled]);
   React.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);
     };
@@ -81,12 +81,8 @@ import { jsx } from "react/jsx-runtime";
 var PortalContainerContext = React3.createContext(null);
 var Portal = ({ children }) => {
   const contextContainer = React3.useContext(PortalContainerContext);
-  const [fallback, setFallback] = React3.useState(null);
-  React3.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";

package/dist/components/Modal/index.cjs

@@ -46,12 +46,8 @@ var PortalContainerContext = import_react.default.createContext(null);
 var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalContainerContext.Provider, { value: container, children });
 var Portal = ({ children }) => {
   const contextContainer = import_react.default.useContext(PortalContainerContext);
-  const [fallback, setFallback] = import_react.default.useState(null);
-  import_react.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";

package/dist/components/Modal/index.js

@@ -10,12 +10,8 @@ var PortalContainerContext = React.createContext(null);
 var PortalProvider = ({ container, children }) => /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: container, children });
 var Portal = ({ children }) => {
   const contextContainer = React.useContext(PortalContainerContext);
-  const [fallback, setFallback] = React.useState(null);
-  React.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";

package/dist/components/PopOver/index.cjs

@@ -68,15 +68,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
+  import_react.default.useLayoutEffect(() => {
+    if (!enabled) return;
+    calculatePosition();
+  }, [calculatePosition, enabled]);
   import_react.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);
     };
@@ -117,12 +117,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var PortalContainerContext = import_react3.default.createContext(null);
 var Portal = ({ children }) => {
   const contextContainer = import_react3.default.useContext(PortalContainerContext);
-  const [fallback, setFallback] = import_react3.default.useState(null);
-  import_react3.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";

package/dist/components/PopOver/index.js

@@ -32,15 +32,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
+  React.useLayoutEffect(() => {
+    if (!enabled) return;
+    calculatePosition();
+  }, [calculatePosition, enabled]);
   React.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);
     };
@@ -81,12 +81,8 @@ import { jsx } from "react/jsx-runtime";
 var PortalContainerContext = React3.createContext(null);
 var Portal = ({ children }) => {
   const contextContainer = React3.useContext(PortalContainerContext);
-  const [fallback, setFallback] = React3.useState(null);
-  React3.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";

package/dist/components/Select/index.cjs

@@ -69,15 +69,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
+  import_react.default.useLayoutEffect(() => {
+    if (!enabled) return;
+    calculatePosition();
+  }, [calculatePosition, enabled]);
   import_react.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);
     };
@@ -118,12 +118,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var PortalContainerContext = import_react3.default.createContext(null);
 var Portal = ({ children }) => {
   const contextContainer = import_react3.default.useContext(PortalContainerContext);
-  const [fallback, setFallback] = import_react3.default.useState(null);
-  import_react3.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";

package/dist/components/Select/index.js

@@ -32,15 +32,15 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
       direction
     });
   }, [triggerRef, popRef]);
+  React.useLayoutEffect(() => {
+    if (!enabled) return;
+    calculatePosition();
+  }, [calculatePosition, enabled]);
   React.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);
     };
@@ -81,12 +81,8 @@ import { jsx } from "react/jsx-runtime";
 var PortalContainerContext = React3.createContext(null);
 var Portal = ({ children }) => {
   const contextContainer = React3.useContext(PortalContainerContext);
-  const [fallback, setFallback] = React3.useState(null);
-  React3.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";