@sia.soul/sia-react-ui 0.1.42 → 0.1.44

package/dist/index.js

@@ -80,7 +80,7 @@ import {
   Watermark,
   message,
   notification
-} from "./chunk-IPDCEXQO.js";
+} from "./chunk-KXPNW4E6.js";
 import {
   TextArea
 } from "./chunk-SMCYEPBL.js";
@@ -95,7 +95,7 @@ import {
   DatePicker,
   SelectDateRange,
   TimePanel
-} from "./chunk-LWVZEUGJ.js";
+} from "./chunk-QIXU7N4X.js";
 import {
   Checkbox,
   FloatingScrollbarProvider,
@@ -110,7 +110,7 @@ import {
   Tree,
   useOverlayLifecycle,
   useScrollbarProximity
-} from "./chunk-3Q3S6CDZ.js";
+} from "./chunk-NYJSSPIX.js";
 import {
   Dropdown,
   FILLED_ICON_NAMES,
@@ -4652,6 +4652,22 @@ function Treemap({
 // src/components/Table/TableCellContent.tsx
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef13, useState as useState16 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
+var pendingLayouts = /* @__PURE__ */ new Map();
+var layoutFrame;
+function scheduleLayout(element, task) {
+  pendingLayouts.set(element, task);
+  if (layoutFrame !== void 0) return;
+  layoutFrame = requestAnimationFrame(() => {
+    layoutFrame = void 0;
+    const tasks = [...pendingLayouts.values()];
+    pendingLayouts.clear();
+    const layouts = tasks.flatMap((task2) => task2.layouts());
+    layouts.forEach((layout) => {
+      if (!layout.hasAttribute("data-table-inline-layout")) layout.setAttribute("data-table-inline-layout", "");
+    });
+    tasks.forEach((task2) => task2.measure());
+  });
+}
 function TableCellContent({ children, ellipsis, title }) {
   const ref = useRef13(null);
   const [overflowing, setOverflowing] = useState16(false);
@@ -4659,29 +4675,33 @@ function TableCellContent({ children, ellipsis, title }) {
   useLayoutEffect2(() => {
     const element = ref.current;
     if (!element || !ellipsis || !customContent) return;
-    const layouts = [];
-    const normalizeLayouts = (parent) => {
+    const normalizeLayouts = (parent, layouts) => {
       for (const child of parent.children) {
         if (!(child instanceof HTMLElement)) continue;
         const component = [...child.classList].some((name) => name.startsWith("sia-") && !name.startsWith("sia-space") && name !== "sia-flex");
         if (component || child.matches("button, input, textarea, select, [contenteditable]")) continue;
         const display = getComputedStyle(child).display;
         if (["flex", "inline-flex", "grid", "inline-grid"].includes(display)) {
-          child.setAttribute("data-table-inline-layout", "");
           layouts.push(child);
         }
-        normalizeLayouts(child);
+        normalizeLayouts(child, layouts);
       }
     };
-    normalizeLayouts(element);
     const update = () => setOverflowing(element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1);
-    update();
+    scheduleLayout(element, {
+      layouts: () => {
+        const layouts = [];
+        normalizeLayouts(element, layouts);
+        return layouts;
+      },
+      measure: update
+    });
     const observer = new ResizeObserver(update);
     observer.observe(element);
     for (const child of element.children) observer.observe(child);
     return () => {
       observer.disconnect();
-      layouts.forEach((layout) => layout.removeAttribute("data-table-inline-layout"));
+      pendingLayouts.delete(element);
     };
   }, [children, ellipsis, customContent]);
   return /* @__PURE__ */ jsx20("div", { ref, className: "sia-table__cell-content", "data-custom-content": customContent || void 0, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children: title ? /* @__PURE__ */ jsx20(Tooltip, { title, className: "sia-table__cell-tooltip", children: /* @__PURE__ */ jsx20("span", { children }) }) : children });
@@ -6484,8 +6504,11 @@ function createResizePlugin(options = {}) {
     })
   };
 }
+function isTableAuxiliaryColumn(column) {
+  return column.meta?.plugin === "index" || column.meta?.plugin === "selection" || column.key === "__index__" || column.key === "__selection__";
+}
 function createColumnSettingItems(columns, visibleKeys) {
-  return flattenTableColumns(columns).map((column, order) => ({
+  return flattenTableColumns(columns).filter((column) => !isTableAuxiliaryColumn(column)).map((column, order) => ({
     key: column.key,
     width: column.width,
     fixed: normalizeFixed(column.fixed),
@@ -6496,6 +6519,7 @@ function createColumnSettingItems(columns, visibleKeys) {
 function applyColumnSettingsToTree(columns, items) {
   const itemMap = new Map(items.map((item) => [item.key, item]));
   const walk = (source) => source.flatMap((column, sourceOrder) => {
+    if (isTableAuxiliaryColumn(column)) return [{ column, order: column.meta?.plugin === "selection" || column.key === "__selection__" ? -2 : -1 }];
     if (column.children?.length) {
       const children = walk(column.children);
       if (children.length === 0) return [];
@@ -6805,11 +6829,15 @@ function ColumnSettingPanel({
 var columnSettingLoadTokens = /* @__PURE__ */ new WeakMap();
 function createColumnSettingPlugin(options = {}) {
   const baseItems = (context) => createColumnSettingItems(context.baseColumns, options.defaultVisibleKeys);
-  const currentItems = (context) => context.state.items?.length ? context.state.items : baseItems(context);
+  const editableItems = (items, context) => {
+    const keys = new Set(baseItems(context).map((item) => item.key));
+    return items.filter((item) => keys.has(item.key));
+  };
+  const currentItems = (context) => context.state.items?.length ? editableItems(context.state.items, context) : baseItems(context);
   const save = (snapshot) => options.adapter && options.scope ? options.adapter.save(options.scope, snapshot).catch(() => void 0) : Promise.resolve();
   function apply(items, context, persist = true) {
     const normalized = orderColumnSettings(
-      [...items].sort((a, b) => a.order - b.order)
+      editableItems(items, context).sort((a, b) => a.order - b.order)
     );
     context.setState((state) => ({ ...state, items: normalized, open: false }));
     const columnMap = new Map(
@@ -7216,10 +7244,9 @@ function buildHeaderRows(columns) {
 function resolveInitialState(plugin) {
   return typeof plugin.initialState === "function" ? plugin.initialState() : plugin.initialState;
 }
-function measureTableCellContentWidth(cell) {
+function prepareTableCellMeasurement(cell) {
   const content = cell.querySelector(":scope > .sia-table__cell-content");
   const target = cell.classList.contains("sia-table__header-cell") ? cell.querySelector(".sia-table__resizable-header > span:first-child, .sia-table__header-label-content") : content;
-  let contentWidth = cell.scrollWidth;
   if (target) {
     const measurement = target.cloneNode(true);
     Object.assign(measurement.style, {
@@ -7237,11 +7264,8 @@ function measureTableCellContentWidth(cell) {
     });
     measurement.setAttribute("aria-hidden", "true");
     cell.appendChild(measurement);
-    contentWidth = Math.max(measurement.scrollWidth, measurement.getBoundingClientRect().width);
-    measurement.remove();
+    return measurement;
   }
-  const style = window.getComputedStyle(cell);
-  return contentWidth + (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0) + (Number.parseFloat(style.borderLeftWidth) || 0) + (Number.parseFloat(style.borderRightWidth) || 0);
 }
 function getTableHorizontalMetrics(viewport, table) {
   const contentWidth = Math.max(viewport.clientWidth, table?.getBoundingClientRect().width ?? viewport.clientWidth);
@@ -7462,18 +7486,22 @@ function TableInner(props, ref) {
     if (element.scrollLeft > maxLeft) element.scrollLeft = maxLeft > 1 ? maxLeft : 0;
     const logicalScrollLeft = Math.min(element.scrollLeft, maxLeft);
     const maxTop = Math.max(0, element.scrollHeight - element.clientHeight);
-    root.dataset.overflowX = String(maxLeft > 1);
-    root.dataset.overflowY = String(maxTop > 1);
-    const horizontalTrack = root.querySelector(".sia-table__scrollbar--horizontal")?.clientWidth ?? 0;
-    const verticalTrack = root.querySelector(".sia-table__scrollbar--vertical")?.clientHeight ?? 0;
+    const setFlag = (key, value) => {
+      const next = String(value);
+      if (root.dataset[key] !== next) root.dataset[key] = next;
+    };
+    setFlag("overflowX", maxLeft > 1);
+    setFlag("overflowY", maxTop > 1);
+    const horizontalTrackElement = root.querySelector(".sia-table__scrollbar--horizontal");
+    const verticalTrackElement = root.querySelector(".sia-table__scrollbar--vertical");
+    const horizontalTrack = horizontalTrackElement?.clientWidth ?? 0;
+    const verticalTrack = verticalTrackElement?.clientHeight ?? 0;
     const horizontalThumb = maxLeft > 1 ? Math.min(horizontalTrack, Math.max(36, horizontalTrack * element.clientWidth / horizontalContentWidth)) : 0;
     const verticalThumb = maxTop > 1 ? Math.min(verticalTrack, Math.max(36, verticalTrack * element.clientHeight / element.scrollHeight)) : 0;
     const horizontalPosition = maxLeft > 0 ? logicalScrollLeft / maxLeft * Math.max(0, horizontalTrack - horizontalThumb) : 0;
     const verticalPosition = maxTop > 0 ? element.scrollTop / maxTop * Math.max(0, verticalTrack - verticalThumb) : 0;
-    root.dataset.scrolledLeft = String(logicalScrollLeft > 1);
-    root.dataset.scrolledRight = String(maxLeft > 1 && logicalScrollLeft < maxLeft - 1);
-    root.dataset.overflowX = String(maxLeft > 1);
-    root.dataset.overflowY = String(maxTop > 1);
+    setFlag("scrolledLeft", logicalScrollLeft > 1);
+    setFlag("scrolledRight", maxLeft > 1 && logicalScrollLeft < maxLeft - 1);
     const viewportRect = element.getBoundingClientRect();
     const leftEdge = root.querySelector(".sia-table__header-cell.sia-table__cell--fixed-left-edge");
     const rightEdge = root.querySelector(".sia-table__header-cell.sia-table__cell--fixed-right-edge");
@@ -7485,10 +7513,10 @@ function TableInner(props, ref) {
       const rightEdgeRect = rightEdge.getBoundingClientRect();
       root.style.setProperty("--sia-table-fixed-right-width", `${Math.max(0, viewportRect.right - rightEdgeRect.left)}px`);
     }
-    root.style.setProperty("--sia-table-scrollbar-x-size", `${horizontalThumb}px`);
-    root.style.setProperty("--sia-table-scrollbar-x-position", `${horizontalPosition}px`);
-    root.style.setProperty("--sia-table-scrollbar-y-size", `${verticalThumb}px`);
-    root.style.setProperty("--sia-table-scrollbar-y-position", `${verticalPosition}px`);
+    horizontalTrackElement?.style.setProperty("--sia-table-scrollbar-x-size", `${horizontalThumb}px`);
+    horizontalTrackElement?.style.setProperty("--sia-table-scrollbar-x-position", `${horizontalPosition}px`);
+    verticalTrackElement?.style.setProperty("--sia-table-scrollbar-y-size", `${verticalThumb}px`);
+    verticalTrackElement?.style.setProperty("--sia-table-scrollbar-y-position", `${verticalPosition}px`);
   }, []);
   useEffect12(() => {
     const element = scrollRef.current;
@@ -7509,19 +7537,33 @@ function TableInner(props, ref) {
   const orderedColumns = useMemo9(() => sortTableColumnsByFixed(pipeline.columns), [pipeline.columns]);
   const leafColumns = useMemo9(() => flattenTableColumns(orderedColumns), [orderedColumns]);
   const headerRows = useMemo9(() => buildHeaderRows(orderedColumns), [orderedColumns]);
+  const measuredCells = useRef15(/* @__PURE__ */ new WeakSet());
+  const autoWidthSignature = leafColumns.map((column) => `${column.key}:${column.autoWidth}:${resizedWidths[column.key] ?? ""}`).join("|");
+  useEffect12(() => {
+    measuredCells.current = /* @__PURE__ */ new WeakSet();
+    setAutoColumnWidths({});
+  }, [dataSource, baseColumns, size, autoWidthSignature]);
   useEffect12(() => {
     const autoWidthColumns = leafColumns.filter((column) => column.autoWidth && resizedWidths[column.key] === void 0);
     const root = rootRef.current;
     if (!root || autoWidthColumns.length === 0) return;
     const frame = window.requestAnimationFrame(() => {
       const measurements = {};
-      const cells = root.querySelectorAll("[data-column-key]");
+      const columnsByKey = new Map(autoWidthColumns.map((column) => [column.key, column]));
+      const cells = [...root.querySelectorAll("th[data-column-key], td[data-column-key]")].filter((cell) => columnsByKey.has(cell.dataset.columnKey) && !measuredCells.current.has(cell));
+      if (cells.length === 0) return;
+      const prepared = cells.map((cell) => ({ cell, node: prepareTableCellMeasurement(cell) }));
+      for (const { cell, node } of prepared) {
+        const key = cell.dataset.columnKey;
+        const style2 = window.getComputedStyle(cell);
+        const padding = (Number.parseFloat(style2.paddingLeft) || 0) + (Number.parseFloat(style2.paddingRight) || 0) + (Number.parseFloat(style2.borderLeftWidth) || 0) + (Number.parseFloat(style2.borderRightWidth) || 0);
+        measurements[key] = Math.max(measurements[key] ?? 0, node ? Math.max(node.scrollWidth, node.getBoundingClientRect().width) + padding : cell.scrollWidth);
+        measuredCells.current.add(cell);
+      }
+      prepared.forEach(({ node }) => node?.remove());
       for (const column of autoWidthColumns) {
-        let width = column.minWidth ?? 56;
-        for (const cell of cells) {
-          if (cell.dataset.columnKey !== column.key) continue;
-          width = Math.max(width, measureTableCellContentWidth(cell));
-        }
+        if (measurements[column.key] === void 0) continue;
+        const width = Math.max(column.minWidth ?? 56, autoColumnWidths[column.key] ?? 0, measurements[column.key]);
         measurements[column.key] = Math.ceil(Math.min(column.maxWidth ?? Number.POSITIVE_INFINITY, width));
       }
       setAutoColumnWidths((previous) => {
@@ -7577,6 +7619,21 @@ function TableInner(props, ref) {
   const renderedRows = pipeline.rows.slice(startIndex, endIndex);
   const topSpacer = shouldVirtualize ? startIndex * rowHeight : 0;
   const bottomSpacer = shouldVirtualize ? Math.max(0, (pipeline.rows.length - endIndex) * rowHeight) : 0;
+  const rowElements = useMemo9(() => /* @__PURE__ */ new Map(), [
+    dataSource,
+    baseColumns,
+    sortedPlugins,
+    pluginStates,
+    autoColumnWidths,
+    viewportWidth,
+    rowHeight,
+    striped,
+    rowClassName,
+    getRowKey,
+    onRowClick,
+    onRowDoubleClick,
+    onCellContextMenu
+  ]);
   const toolbarStart = sortedPlugins.map((plugin) => {
     const content = plugin.renderToolbarStart?.(getContext(plugin));
     return content ? /* @__PURE__ */ jsx22(Fragment8, { children: content }, `toolbar-start-${plugin.id}`) : null;
@@ -7603,9 +7660,9 @@ function TableInner(props, ref) {
   };
   const handleScroll = useCallback2((event) => {
     const element = event.currentTarget;
-    if (shouldVirtualize) setScrollTop(element.scrollTop);
+    if (shouldVirtualize) setScrollTop((previous) => Math.floor(previous / rowHeight) === Math.floor(element.scrollTop / rowHeight) ? previous : element.scrollTop);
     updateScrollMetrics();
-  }, [shouldVirtualize, updateScrollMetrics]);
+  }, [shouldVirtualize, rowHeight, updateScrollMetrics]);
   const handleScrollbarPointerDown = useCallback2((axis, event, track = event.currentTarget) => {
     const element = scrollRef.current;
     const thumb = track.firstElementChild;
@@ -7826,10 +7883,12 @@ function TableInner(props, ref) {
             /* @__PURE__ */ jsxs21("tbody", { children: [
               topSpacer > 0 ? /* @__PURE__ */ jsx22("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx22("td", { colSpan: leafColumns.length, style: { height: topSpacer, padding: 0, border: 0 } }) }) : null,
               renderedRows.map((row, offset) => {
+                const cached = rowElements.get(row.key);
+                if (cached) return cached;
                 const rowIndex = startIndex + offset;
                 const pluginClasses = sortedPlugins.map((plugin) => plugin.getRowClassName?.(row, getContext(plugin))).filter(Boolean).join(" ");
                 const customClass = typeof rowClassName === "function" ? rowClassName(row.record, row.sourceIndex) : rowClassName ?? "";
-                return /* @__PURE__ */ jsx22(
+                const element = /* @__PURE__ */ jsx22(
                   TableBodyRow,
                   {
                     row,
@@ -7875,6 +7934,8 @@ function TableInner(props, ref) {
                   },
                   row.key
                 );
+                rowElements.set(row.key, element);
+                return element;
               }),
               bottomSpacer > 0 ? /* @__PURE__ */ jsx22("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx22("td", { colSpan: leafColumns.length, style: { height: bottomSpacer, padding: 0, border: 0 } }) }) : null
             ] }),

package/dist/select-date-range.cjs

@@ -1474,7 +1474,17 @@ function FloatingScrollbarProvider({ disabled = false, targetRef }) {
     };
     const scanTargets = () => {
       scanFrame = 0;
-      const candidates = (targetRef ? [targetRef.current] : [document.scrollingElement, ...document.querySelectorAll("*")]).filter((target) => target instanceof HTMLElement);
+      const managedSelector = ".sia-table__viewport, [data-sia-native-scrollbar], .sia-scrollbar-track, .sia-floating-scrollbar-layer";
+      const discovered = [];
+      if (!targetRef) {
+        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, {
+          acceptNode: (node) => node.matches(managedSelector) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
+        });
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+          if (node instanceof HTMLElement) discovered.push(node);
+        }
+      }
+      const candidates = (targetRef ? [targetRef.current] : [document.scrollingElement, ...discovered]).filter((target) => target instanceof HTMLElement);
       const nextTargets = /* @__PURE__ */ new Set();
       candidates.forEach((target) => {
         if (canScroll(target, "horizontal") || canScroll(target, "vertical")) {
@@ -1492,9 +1502,12 @@ function FloatingScrollbarProvider({ disabled = false, targetRef }) {
       scanFrame = window.requestAnimationFrame(scanTargets);
     };
     const mutationObserver = new MutationObserver((mutations) => {
-      if (mutations.some((mutation) => !layer.contains(mutation.target))) scheduleScan();
+      if (mutations.some((mutation) => {
+        const target = mutation.target instanceof Element ? mutation.target : mutation.target.parentElement;
+        return target && !layer.contains(target) && !target.closest(".sia-table__viewport, [data-sia-native-scrollbar], .sia-scrollbar-track");
+      })) scheduleScan();
     });
-    mutationObserver.observe(document.documentElement, { subtree: true, childList: true, attributes: true });
+    mutationObserver.observe(document.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ["class", "style", "hidden"] });
     window.addEventListener("resize", scheduleScan);
     window.addEventListener("scroll", scheduleUpdateAll, true);
     scheduleScan();

package/dist/select-date-range.js

@@ -1,7 +1,7 @@
 import {
   SelectDateRange
-} from "./chunk-LWVZEUGJ.js";
-import "./chunk-3Q3S6CDZ.js";
+} from "./chunk-QIXU7N4X.js";
+import "./chunk-NYJSSPIX.js";
 import "./chunk-XCVAVCIO.js";
 import "./chunk-IKAMZNCK.js";
 import "./chunk-H7IAG72O.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",