silver-ui 0.4.0 → 0.6.0

package/dist/{chunk-YYNWZRXZ.js → chunk-HKGFMJFK.js}

@@ -1,257 +1,31 @@
-import { TagsInput } from './chunk-J5IRFGUP.js';
-import { Select } from './chunk-LQIZSE3O.js';
-import { MultiSelect } from './chunk-HNZWPIJE.js';
-import { NumberInput } from './chunk-DWUEPOYH.js';
-import { Pagination } from './chunk-W3C6QQF7.js';
-import { TextInput } from './chunk-G2U2W422.js';
-import { EmptyState } from './chunk-DXPQRAGI.js';
-import { CheckboxInput } from './chunk-K3XHXWBW.js';
-import { TimeInput } from './chunk-S7INL5NI.js';
-import { DateInput } from './chunk-BSAZRW6T.js';
-import { plainDateToUnixSeconds } from './chunk-QSEDH7T2.js';
-import { createStaticSearchSource } from './chunk-SBOXHIES.js';
-import { Popover } from './chunk-ZAX2UJBC.js';
+import { TagsInput } from './chunk-M64WMYYV.js';
+import { Select } from './chunk-UYZQGHFI.js';
+import { MultiSelect } from './chunk-LF6I2B7G.js';
+import { NumberInput } from './chunk-WM7NEOME.js';
+import { Pagination } from './chunk-LLSWAAFH.js';
+import { TextInput } from './chunk-JR353MN5.js';
+import { EmptyState } from './chunk-TQDJVPHP.js';
+import { CheckboxInput } from './chunk-GUUCIG7U.js';
+import { TimeInput } from './chunk-FQN22DO5.js';
+import { DateInput } from './chunk-UT45YVPI.js';
+import { plainDateToUnixSeconds } from './chunk-5HPXUDX6.js';
 import { getBrowserTimezoneID } from './chunk-OX4ZMUF4.js';
-import { Button } from './chunk-2LABTS4P.js';
-import { Text } from './chunk-QRFDPG34.js';
+import { createStaticSearchSource } from './chunk-KCI4I42U.js';
+import { Popover } from './chunk-JHMUMJF3.js';
+import { Button } from './chunk-HMJINNXZ.js';
+import { Text } from './chunk-NXTDP6AX.js';
+import { useLatest_default } from './chunk-KEPCKSDE.js';
 import { mergeRefs } from './chunk-SGLIDI6R.js';
 import { isReactNode } from './chunk-2PSZAWLC.js';
-import { Icon } from './chunk-7T3SWOY7.js';
+import { Icon } from './chunk-IUW777WZ.js';
+import { sva } from './chunk-IAVZKGZS.js';
 import { css } from './chunk-OD4DHHZH.js';
 import { cx } from './chunk-PPNETWIP.js';
-import { createContext, memo, useRef, useMemo, useEffect, useCallback, useState, use, useSyncExternalStore } from 'react';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Temporal } from '@js-temporal/polyfill';
+import { createContext, memo, useMemo, useRef, useEffect, useCallback, useState, use, useSyncExternalStore } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Filter, ArrowUp, ArrowDown, ChevronsUpDown } from 'lucide-react';
 
-function TableBody({
-  children,
-  className,
-  "data-testid": dataTestId,
-  ref,
-  style
-}) {
-  return /* @__PURE__ */ jsx(
-    "tbody",
-    {
-      className,
-      "data-testid": dataTestId,
-      ref,
-      style,
-      children
-    }
-  );
-}
-TableBody.displayName = "TableBody";
-var TableContext = createContext(null);
-TableContext.displayName = "TableContext";
-function useTableContext() {
-  return use(TableContext);
-}
-var styles = {
-  base: css({
-    maxWidth: 0
-  }),
-  density: {
-    balanced: css({ fontSize: "md", px: "3", py: "2" }),
-    compact: css({ fontSize: "md", px: "2", py: "1" }),
-    spacious: css({ fontSize: "md", px: "4", py: "3" })
-  },
-  dividerColumns: css({
-    borderInlineEndWidth: "default",
-    borderInlineEndStyle: "solid",
-    borderInlineEndColor: "border",
-    _last: {
-      borderInlineEndWidth: 0
-    }
-  }),
-  dividerRows: css({
-    borderBottomWidth: "default",
-    borderBottomStyle: "solid",
-    borderBottomColor: "border",
-    "tbody > tr:last-child > &": {
-      borderBottomWidth: 0
-    }
-  }),
-  truncate: css({
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  }),
-  verticalAlign: {
-    bottom: css({ verticalAlign: "bottom" }),
-    middle: css({ verticalAlign: "middle" }),
-    top: css({ verticalAlign: "top" })
-  },
-  wrap: css({
-    overflow: "hidden",
-    overflowWrap: "break-word",
-    whiteSpace: "normal",
-    wordBreak: "break-word"
-  })
-};
-function TableCell({
-  children,
-  className,
-  colSpan,
-  "data-testid": dataTestId,
-  headers,
-  ref,
-  rowSpan,
-  style
-}) {
-  const context = useTableContext();
-  return /* @__PURE__ */ jsx(
-    "td",
-    {
-      className: cx(
-        "silver-table-cell",
-        styles.base,
-        context == null ? void 0 : styles.density[context.density],
-        context == null ? void 0 : styles.verticalAlign[context.verticalAlign],
-        context?.textOverflow === "truncate" ? styles.truncate : styles.wrap,
-        context?.dividers === "rows" || context?.dividers === "grid" ? styles.dividerRows : void 0,
-        context?.dividers === "columns" || context?.dividers === "grid" ? styles.dividerColumns : void 0,
-        className
-      ),
-      colSpan,
-      "data-testid": dataTestId,
-      headers,
-      ref,
-      rowSpan,
-      style,
-      children
-    }
-  );
-}
-TableCell.displayName = "TableCell";
-function TableHeader({
-  children,
-  className,
-  "data-testid": dataTestId,
-  ref,
-  style
-}) {
-  return /* @__PURE__ */ jsx(
-    "thead",
-    {
-      className,
-      "data-testid": dataTestId,
-      ref,
-      style,
-      children
-    }
-  );
-}
-TableHeader.displayName = "TableHeader";
-var styles2 = {
-  base: css({
-    color: "fg.muted",
-    fontWeight: "semibold",
-    maxWidth: 0,
-    overflow: "hidden",
-    textAlign: "start",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap"
-  }),
-  density: {
-    balanced: css({ fontSize: "md", px: "3", py: "2" }),
-    compact: css({ fontSize: "md", px: "2", py: "1" }),
-    spacious: css({ fontSize: "md", px: "4", py: "3" })
-  },
-  dividerBottom: css({
-    borderBottomWidth: "default",
-    borderBottomStyle: "solid",
-    borderBottomColor: "border"
-  }),
-  dividerColumns: css({
-    borderInlineEndWidth: "default",
-    borderInlineEndStyle: "solid",
-    borderInlineEndColor: "border",
-    _last: {
-      borderInlineEndWidth: 0
-    }
-  })
-};
-function TableHeaderCell({
-  children,
-  className,
-  "data-testid": dataTestId,
-  ref,
-  scope = "col",
-  style
-}) {
-  const context = useTableContext();
-  return /* @__PURE__ */ jsx(
-    "th",
-    {
-      className: cx(
-        "silver-table-header-cell",
-        styles2.base,
-        styles2.dividerBottom,
-        context == null ? void 0 : styles2.density[context.density],
-        context?.dividers === "columns" || context?.dividers === "grid" ? styles2.dividerColumns : void 0,
-        className
-      ),
-      "data-testid": dataTestId,
-      ref,
-      scope,
-      style,
-      children
-    }
-  );
-}
-TableHeaderCell.displayName = "TableHeaderCell";
-var styles3 = {
-  base: css({
-    transitionDuration: "fast",
-    transitionProperty: "background-color",
-    transitionTimingFunction: "default"
-  }),
-  hover: css({
-    _hover: {
-      "@media (hover: hover)": {
-        bg: "bg.subtle"
-      }
-    }
-  }),
-  striped: css({
-    _even: {
-      bg: "bg.subtle"
-    }
-  }),
-  stripedHover: css({
-    _even: {
-      bg: "bg.subtle"
-    },
-    _hover: {
-      "@media (hover: hover)": {
-        bg: "bg.hover"
-      }
-    }
-  })
-};
-function TableRow({
-  children,
-  className,
-  "data-testid": dataTestId,
-  ref,
-  style
-}) {
-  const context = useTableContext();
-  const rowClassName = context == null ? void 0 : context.isStriped && context.hasHover ? styles3.stripedHover : context.isStriped ? styles3.striped : context.hasHover ? styles3.hover : void 0;
-  return /* @__PURE__ */ jsx(
-    "tr",
-    {
-      className: cx("silver-table-row", styles3.base, rowClassName, className),
-      "data-testid": dataTestId,
-      ref,
-      style,
-      children
-    }
-  );
-}
-TableRow.displayName = "TableRow";
 var DEFAULT_MIN_COLUMN_WIDTH = 120;
 function proportional(value = 1, options) {
   return {
@@ -313,6 +87,7 @@ function resolveColumnWidths(columns) {
 function capitalize(value) {
   return value.length === 0 ? value : value.charAt(0).toUpperCase() + value.slice(1);
 }
+var warnedUnsupportedCellKeys = /* @__PURE__ */ new Set();
 function defaultCellRenderer(item, key) {
   const value = item[key];
   if (value == null) {
@@ -324,6 +99,13 @@ function defaultCellRenderer(item, key) {
   if (typeof value === "bigint" || typeof value === "boolean" || typeof value === "number" || typeof value === "string") {
     return String(value);
   }
+  if (process.env.NODE_ENV !== "production" && !warnedUnsupportedCellKeys.has(key)) {
+    warnedUnsupportedCellKeys.add(key);
+    const typeName = typeof value === "object" ? Object.prototype.toString.call(value).slice(8, -1) : typeof value;
+    console.warn(
+      `[Table] Column "${key}" has a value of unsupported type ${typeName} and rendered as an empty cell. Provide a \`renderCell\` for this column.`
+    );
+  }
   return "";
 }
 function estimateContentLength(value) {
@@ -366,38 +148,396 @@ function generateColumns(data) {
     };
   });
 }
-var styles4 = {
-  headerLabelRow: css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "1",
-    minW: 0
-  }),
-  table: css({
-    w: "full",
-    borderCollapse: "collapse",
-    borderSpacing: 0,
-    tableLayout: "fixed"
-  }),
-  tableAutoLayout: css({
-    tableLayout: "auto"
-  })
-};
-var EMPTY_PLUGINS = [];
-function areArraysShallowEqual(previous, next) {
-  if (previous === next) {
+
+// src/components/Table/Table.recipe.ts
+var tableRecipe = sva({
+  slots: ["wrapper", "table", "headerLabelRow", "row", "cell", "headerCell"],
+  base: {
+    wrapper: {
+      overflowX: "auto",
+      WebkitOverflowScrolling: "touch"
+    },
+    table: {
+      color: "fg",
+      fontFamily: "body",
+      w: "full",
+      borderCollapse: "collapse",
+      borderSpacing: 0,
+      tableLayout: "fixed"
+    },
+    headerLabelRow: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "1",
+      minW: 0
+    },
+    row: {
+      transitionDuration: "fast",
+      transitionProperty: "background-color",
+      transitionTimingFunction: "default"
+    },
+    cell: {
+      maxWidth: 0
+    },
+    headerCell: {
+      color: "fg.muted",
+      fontWeight: "semibold",
+      maxWidth: 0,
+      overflow: "hidden",
+      textAlign: "start",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      borderBottomWidth: "default",
+      borderBottomStyle: "solid",
+      borderBottomColor: "border"
+    }
+  },
+  variants: {
+    density: {
+      balanced: {
+        cell: { fontSize: "md", px: "3", py: "2" },
+        headerCell: { fontSize: "md", px: "3", py: "2" }
+      },
+      compact: {
+        cell: { fontSize: "md", px: "2", py: "1" },
+        headerCell: { fontSize: "md", px: "2", py: "1" }
+      },
+      spacious: {
+        cell: { fontSize: "md", px: "4", py: "3" },
+        headerCell: { fontSize: "md", px: "4", py: "3" }
+      }
+    },
+    dividers: {
+      none: {},
+      rows: {
+        cell: {
+          borderBottomWidth: "default",
+          borderBottomStyle: "solid",
+          borderBottomColor: "border",
+          "tbody > tr:last-child > &": {
+            borderBottomWidth: 0
+          }
+        }
+      },
+      columns: {
+        cell: {
+          borderInlineEndWidth: "default",
+          borderInlineEndStyle: "solid",
+          borderInlineEndColor: "border",
+          _last: {
+            borderInlineEndWidth: 0
+          }
+        },
+        headerCell: {
+          borderInlineEndWidth: "default",
+          borderInlineEndStyle: "solid",
+          borderInlineEndColor: "border",
+          _last: {
+            borderInlineEndWidth: 0
+          }
+        }
+      },
+      grid: {
+        cell: {
+          borderBottomWidth: "default",
+          borderBottomStyle: "solid",
+          borderBottomColor: "border",
+          "tbody > tr:last-child > &": {
+            borderBottomWidth: 0
+          },
+          borderInlineEndWidth: "default",
+          borderInlineEndStyle: "solid",
+          borderInlineEndColor: "border",
+          _last: {
+            borderInlineEndWidth: 0
+          }
+        },
+        headerCell: {
+          borderInlineEndWidth: "default",
+          borderInlineEndStyle: "solid",
+          borderInlineEndColor: "border",
+          _last: {
+            borderInlineEndWidth: 0
+          }
+        }
+      }
+    },
+    verticalAlign: {
+      middle: { cell: { verticalAlign: "middle" } },
+      top: { cell: { verticalAlign: "top" } },
+      bottom: { cell: { verticalAlign: "bottom" } }
+    },
+    textOverflow: {
+      truncate: {
+        cell: {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        }
+      },
+      wrap: {
+        cell: {
+          overflow: "hidden",
+          overflowWrap: "break-word",
+          whiteSpace: "normal",
+          wordBreak: "break-word"
+        }
+      }
+    },
+    // Row background variants. Striping and hover combine, so the combined
+    // presentation lives in compoundVariants below.
+    isStriped: {
+      true: {},
+      false: {}
+    },
+    hasHover: {
+      true: {},
+      false: {}
+    },
+    // Auto layout when the table renders consumer-provided children; the
+    // default fixed layout lives in the base `table` slot.
+    isAutoLayout: {
+      true: { table: { tableLayout: "auto" } },
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      isStriped: false,
+      hasHover: true,
+      css: {
+        row: {
+          _hover: {
+            "@media (hover: hover)": {
+              bg: "bg.subtle"
+            }
+          }
+        }
+      }
+    },
+    {
+      isStriped: true,
+      hasHover: false,
+      css: {
+        row: {
+          _even: {
+            bg: "bg.subtle"
+          }
+        }
+      }
+    },
+    {
+      isStriped: true,
+      hasHover: true,
+      css: {
+        row: {
+          _even: {
+            bg: "bg.subtle"
+          },
+          _hover: {
+            "@media (hover: hover)": {
+              bg: "bg.hover"
+            }
+          }
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    density: "balanced",
+    dividers: "rows",
+    verticalAlign: "middle",
+    textOverflow: "wrap",
+    isStriped: false,
+    hasHover: false,
+    isAutoLayout: false
+  }
+});
+function TableBody({
+  children,
+  className,
+  "data-testid": dataTestId,
+  ref,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      className,
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children
+    }
+  );
+}
+TableBody.displayName = "TableBody";
+var TableContext = createContext(null);
+TableContext.displayName = "TableContext";
+function useTableContext() {
+  return use(TableContext);
+}
+function TableCell({
+  children,
+  className,
+  colSpan,
+  "data-testid": dataTestId,
+  headers,
+  ref,
+  rowSpan,
+  style
+}) {
+  const context = useTableContext();
+  const classes = tableRecipe({
+    density: context?.density,
+    dividers: context?.dividers,
+    textOverflow: context?.textOverflow,
+    verticalAlign: context?.verticalAlign
+  });
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: cx(classes.cell, className),
+      colSpan,
+      "data-part": "cell",
+      "data-testid": dataTestId,
+      headers,
+      ref,
+      rowSpan,
+      style,
+      children
+    }
+  );
+}
+TableCell.displayName = "TableCell";
+function TableHeader({
+  children,
+  className,
+  "data-testid": dataTestId,
+  ref,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      className,
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children
+    }
+  );
+}
+TableHeader.displayName = "TableHeader";
+function TableHeaderCell({
+  children,
+  className,
+  "data-testid": dataTestId,
+  ref,
+  scope = "col",
+  style
+}) {
+  const context = useTableContext();
+  const classes = tableRecipe({
+    density: context?.density,
+    dividers: context?.dividers
+  });
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cx(classes.headerCell, className),
+      "data-part": "header-cell",
+      "data-testid": dataTestId,
+      ref,
+      scope,
+      style,
+      children
+    }
+  );
+}
+TableHeaderCell.displayName = "TableHeaderCell";
+function TableRow({
+  children,
+  className,
+  "data-testid": dataTestId,
+  ref,
+  style
+}) {
+  const context = useTableContext();
+  const classes = tableRecipe({
+    isStriped: context?.isStriped,
+    hasHover: context?.hasHover
+  });
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cx(classes.row, className),
+      "data-part": "row",
+      "data-testid": dataTestId,
+      ref,
+      style,
+      children
+    }
+  );
+}
+TableRow.displayName = "TableRow";
+var CANONICAL_PLUGIN_ORDER = [
+  "columnSettings",
+  "sort",
+  "selection",
+  "filtering",
+  "columnResize",
+  "pagination"
+];
+var CANONICAL_PLUGIN_KEYS = new Set(CANONICAL_PLUGIN_ORDER);
+function orderNamedPlugins(userPlugins) {
+  const entries = Object.entries(userPlugins);
+  const pluginsByName = new Map(entries);
+  const orderedPlugins = CANONICAL_PLUGIN_ORDER.filter(
+    (key) => pluginsByName.has(key)
+  ).map((key) => pluginsByName.get(key));
+  const customPlugins = entries.filter(([key]) => !CANONICAL_PLUGIN_KEYS.has(key)).map(([, plugin]) => plugin);
+  return [...orderedPlugins, ...customPlugins];
+}
+function useBaseTablePlugins(userPlugins) {
+  return useMemo(
+    () => Array.isArray(userPlugins) ? userPlugins : orderNamedPlugins(userPlugins ?? {}),
+    [userPlugins]
+  );
+}
+
+// src/internal/shallowEqual.ts
+function shallowEqual(a, b) {
+  if (Object.is(a, b)) {
     return true;
   }
-  if (previous.length !== next.length) {
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
+    return false;
+  }
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) {
     return false;
   }
-  for (let index = 0; index < previous.length; index++) {
-    if (previous[index] !== next[index]) {
+  const aRecord = a;
+  const bRecord = b;
+  for (const key of aKeys) {
+    if (!Object.prototype.hasOwnProperty.call(b, key) || !Object.is(aRecord[key], bRecord[key])) {
       return false;
     }
   }
   return true;
 }
+
+// src/internal/useShallowEqualMemo.ts
+var useShallowEqualMemo = (value) => {
+  const ref = useRef(value);
+  if (!shallowEqual(ref.current, value)) {
+    ref.current = value;
+  }
+  return ref.current;
+};
+var useShallowEqualMemo_default = useShallowEqualMemo;
 function applyPlugins(plugins, getter, initial, ...args) {
   return plugins.reduce((accumulator, plugin, index) => {
     const transform = getter(plugin);
@@ -407,6 +547,9 @@ function applyPlugins(plugins, getter, initial, ...args) {
     try {
       return transform(accumulator, ...args);
     } catch (error) {
+      if (process.env.NODE_ENV !== "production") {
+        throw error;
+      }
       console.error(`[Table] Plugin at index ${index} threw:`, error);
       return accumulator;
     }
@@ -480,22 +623,38 @@ function areRowPropsEqual(previous, next) {
   );
 }
 var MemoizedDataRow = memo(DataRowInner, areRowPropsEqual);
-function BaseTableInner({
+function TableInner({
   children,
   className,
   columns: columnsProp,
   data,
   "data-testid": dataTestId,
+  density = "balanced",
+  dividers = "rows",
   emptyState,
+  hasHover = false,
   idKey,
-  plugins: pluginsProp,
+  isStriped = false,
+  plugins: userPlugins,
   ref,
-  scrollWrapper: ScrollWrapper,
   style,
   tableProps,
-  textOverflow = "wrap"
+  textOverflow = "wrap",
+  verticalAlign = "middle"
 }) {
-  const plugins = pluginsProp ?? EMPTY_PLUGINS;
+  const plugins = useBaseTablePlugins(userPlugins);
+  const contextValue = useMemo(
+    () => ({
+      density,
+      dividers,
+      hasHover,
+      isStriped,
+      textOverflow,
+      verticalAlign
+    }),
+    [density, dividers, hasHover, isStriped, textOverflow, verticalAlign]
+  );
+  const classes = tableRecipe({ isAutoLayout: isReactNode(children) });
   const RowComponent = TableRow;
   const CellComponent = TableCell;
   const HeaderCellComponent = TableHeaderCell;
@@ -505,15 +664,7 @@ function BaseTableInner({
     (plugin) => plugin.transformColumns,
     baseColumns
   );
-  const columnsRef = useRef(transformedColumns);
-  const areColumnsStable = areArraysShallowEqual(
-    columnsRef.current,
-    transformedColumns
-  );
-  if (!areColumnsStable) {
-    columnsRef.current = transformedColumns;
-  }
-  const columns = columnsRef.current;
+  const columns = useShallowEqualMemo_default(transformedColumns);
   const widths = resolveColumnWidths(columns);
   const tableRenderProps = applyPlugins(
     plugins,
@@ -570,10 +721,17 @@ function BaseTableInner({
         title,
         children: hasSlots ? /* @__PURE__ */ jsxs(Fragment, { children: [
           headerCellProps.before,
-          !isReactNode(headerCellProps.after) ? renderedContent : /* @__PURE__ */ jsxs("div", { className: styles4.headerLabelRow, children: [
-            renderedContent,
-            headerCellProps.after
-          ] }),
+          !isReactNode(headerCellProps.after) ? renderedContent : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: classes.headerLabelRow,
+              "data-part": "header-label-row",
+              children: [
+                renderedContent,
+                headerCellProps.after
+              ]
+            }
+          ),
           headerCellProps.overlay,
           headerCellProps.below
         ] }) : renderedContent
@@ -596,18 +754,17 @@ function BaseTableInner({
   };
   const hasData = data != null && data.length > 0;
   const hasColumns = columns.length > 0;
-  let tableElement = /* @__PURE__ */ jsx(
+  let tableElement = /* @__PURE__ */ jsx("div", { className: classes.wrapper, "data-part": "wrapper", children: /* @__PURE__ */ jsx(
     "table",
     {
       ...tableRenderProps.htmlProps,
       className: cx(
-        "silver-base-table",
-        styles4.table,
-        isReactNode(children) ? styles4.tableAutoLayout : void 0,
+        classes.table,
         tableRenderProps.htmlProps.className,
         tableRenderProps.className,
         className
       ),
+      "data-part": "table",
       "data-testid": dataTestId,
       ref,
       style: tableStyle,
@@ -639,127 +796,24 @@ function BaseTableInner({
             },
             rowKey
           );
-        }) : data != null && emptyState !== false && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: Math.max(columns.length, 1), children: emptyState ?? /* @__PURE__ */ jsx(EmptyState, { isCompact: true, title: "No data" }) }) }) })
+        }) : data != null && (emptyState === void 0 || isReactNode(emptyState)) && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: Math.max(columns.length, 1), children: emptyState ?? /* @__PURE__ */ jsx(EmptyState, { isCompact: true, title: "No data" }) }) }) })
       ] })
     }
-  );
-  if (ScrollWrapper != null) {
-    tableElement = /* @__PURE__ */ jsx(ScrollWrapper, { children: tableElement });
-  }
+  ) });
   for (let index = plugins.length - 1; index >= 0; index--) {
     const plugin = plugins[index];
     if (plugin.transformTableContext != null) {
       try {
         tableElement = plugin.transformTableContext(tableElement);
       } catch (error) {
+        if (process.env.NODE_ENV !== "production") {
+          throw error;
+        }
         console.error("[Table] Plugin threw in transformTableContext:", error);
       }
     }
   }
-  return tableElement;
-}
-var BaseTable = BaseTableInner;
-BaseTable.displayName = "BaseTable";
-var CANONICAL_PLUGIN_ORDER = [
-  "columnSettings",
-  "sort",
-  "selection",
-  "filtering",
-  "columnResize",
-  "pagination"
-];
-var CANONICAL_PLUGIN_KEYS = new Set(CANONICAL_PLUGIN_ORDER);
-function orderNamedPlugins(userPlugins) {
-  const entries = Object.entries(userPlugins);
-  const pluginsByName = new Map(entries);
-  const orderedPlugins = CANONICAL_PLUGIN_ORDER.filter(
-    (key) => pluginsByName.has(key)
-  ).map((key) => pluginsByName.get(key));
-  const customPlugins = entries.filter(([key]) => !CANONICAL_PLUGIN_KEYS.has(key)).map(([, plugin]) => plugin);
-  return [...orderedPlugins, ...customPlugins];
-}
-function useBaseTablePlugins(basePlugins, userPlugins) {
-  return useMemo(() => {
-    const plugins = Array.isArray(userPlugins) ? userPlugins : orderNamedPlugins(userPlugins ?? {});
-    return [...basePlugins, ...plugins];
-  }, [basePlugins, userPlugins]);
-}
-var styles5 = {
-  scrollWrapper: css({
-    overflowX: "auto",
-    WebkitOverflowScrolling: "touch"
-  }),
-  table: css({
-    color: "fg",
-    fontFamily: "body"
-  })
-};
-function TableScrollWrapper({
-  children
-}) {
-  return /* @__PURE__ */ jsx("div", { className: styles5.scrollWrapper, children });
-}
-function buildTableStylePlugin() {
-  return {
-    transformTable(props) {
-      return {
-        ...props,
-        className: cx(props.className, styles5.table, "silver-table")
-      };
-    }
-  };
-}
-function TableInner({
-  children,
-  className,
-  columns,
-  data,
-  "data-testid": dataTestId,
-  density = "balanced",
-  dividers = "rows",
-  emptyState,
-  hasHover = false,
-  idKey,
-  isStriped = false,
-  plugins: userPlugins,
-  ref,
-  style,
-  tableProps,
-  textOverflow = "wrap",
-  verticalAlign = "middle"
-}) {
-  const tablePlugin = useMemo(() => buildTableStylePlugin(), []);
-  const basePlugins = useMemo(() => [tablePlugin], [tablePlugin]);
-  const plugins = useBaseTablePlugins(basePlugins, userPlugins);
-  const contextValue = useMemo(
-    () => ({
-      density,
-      dividers,
-      hasHover,
-      isStriped,
-      textOverflow,
-      verticalAlign
-    }),
-    [density, dividers, hasHover, isStriped, textOverflow, verticalAlign]
-  );
-  return /* @__PURE__ */ jsx(TableContext, { value: contextValue, children: /* @__PURE__ */ jsx(
-    BaseTable,
-    {
-      className,
-      columns,
-      data,
-      "data-testid": dataTestId,
-      emptyState,
-      idKey,
-      plugins,
-      ref,
-      scrollWrapper: TableScrollWrapper,
-      style,
-      tableProps,
-      textOverflow,
-      children
-    }
-  ) });
+  return /* @__PURE__ */ jsx(TableContext, { value: contextValue, children: tableElement });
 }
 var Table = TableInner;
 Table.displayName = "Table";
@@ -784,7 +838,7 @@ function TableFooter({
 TableFooter.displayName = "TableFooter";
 var KEYBOARD_STEP = 10;
 var KEYBOARD_LARGE_STEP = 50;
-var styles6 = {
+var styles = {
   handle: css({
     position: "absolute",
     insetInlineEnd: 0,
@@ -1101,7 +1155,7 @@ function ResizeHandle({
       "aria-valuemax": Number.isFinite(maxWidth) ? maxWidth : void 0,
       "aria-valuemin": minWidth,
       "aria-valuenow": currentWidth,
-      className: styles6.handle,
+      className: styles.handle,
       "data-column-key": columnKey,
       onKeyDown: handleKeyDown,
       onPointerDown: handlePointerDown,
@@ -1153,7 +1207,7 @@ function useTableColumnResize(config) {
         );
         return {
           ...props,
-          className: styles6.headerCell,
+          className: styles.headerCell,
           htmlProps: {
             ...props.htmlProps,
             style: widthStyle == null ? props.htmlProps.style : { ...props.htmlProps.style, ...widthStyle }
@@ -1262,7 +1316,7 @@ function useTableColumnSettingsState(config) {
 }
 var FilterStoreContext = createContext(null);
 FilterStoreContext.displayName = "TableFilterStoreContext";
-var styles7 = {
+var styles2 = {
   afterPopover: css({
     display: "inline-flex",
     alignItems: "center",
@@ -1526,7 +1580,7 @@ function DateFilterControl({
       },
       placeholder: `Filter ${header}`,
       size,
-      value: value instanceof Temporal.PlainDate ? value : void 0
+      value: value instanceof Temporal.PlainDate ? value : null
     }
   );
 }
@@ -1549,7 +1603,7 @@ function TimeFilterControl({
       },
       placeholder: `Filter ${header}`,
       size,
-      value: value instanceof Temporal.PlainTime ? value : void 0
+      value: value instanceof Temporal.PlainTime ? value : null
     }
   );
 }
@@ -1728,7 +1782,7 @@ function PopoverFilterTrigger({
   return /* @__PURE__ */ jsx(
     Popover,
     {
-      content: /* @__PURE__ */ jsx(FilterStoreContext, { value: draftStore, children: /* @__PURE__ */ jsxs("div", { className: styles7.popoverContent, children: [
+      content: /* @__PURE__ */ jsx(FilterStoreContext, { value: draftStore, children: /* @__PURE__ */ jsxs("div", { className: styles2.popoverContent, children: [
         /* @__PURE__ */ jsx(
           FilterControl,
           {
@@ -1738,7 +1792,7 @@ function PopoverFilterTrigger({
             size: "sm"
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: styles7.popoverActions, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles2.popoverActions, children: [
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -1748,7 +1802,7 @@ function PopoverFilterTrigger({
               variant: "ghost"
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: styles7.popoverActionsSpacer }),
+          /* @__PURE__ */ jsx("div", { className: styles2.popoverActionsSpacer }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -1820,7 +1874,7 @@ function useTableFiltering(config) {
         if (variant === "popover") {
           return {
             ...props,
-            after: /* @__PURE__ */ jsx("span", { className: styles7.afterPopover, children: /* @__PURE__ */ jsx(
+            after: /* @__PURE__ */ jsx("span", { className: styles2.afterPopover, children: /* @__PURE__ */ jsx(
               PopoverFilterTrigger,
               {
                 column,
@@ -1833,7 +1887,7 @@ function useTableFiltering(config) {
           ...props,
           below: /* @__PURE__ */ jsxs(Fragment, { children: [
             props.below,
-            /* @__PURE__ */ jsx("div", { className: styles7.inlineWrapper, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: styles2.inlineWrapper, children: /* @__PURE__ */ jsx(
               FilterControl,
               {
                 column,
@@ -1877,7 +1931,7 @@ function paginateData(data, { page, pageSize }) {
   const start = (safePage - 1) * safePageSize;
   return data.slice(start, start + safePageSize);
 }
-var styles8 = {
+var styles3 = {
   align: {
     center: css({ justifyContent: "center" }),
     end: css({ justifyContent: "flex-end" }),
@@ -1937,7 +1991,7 @@ function useTablePagination({
         const makePagination = (side) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: `${styles8.root} ${styles8.align[current.align]} ${side === "above" ? styles8.above : styles8.below}`,
+            className: `${styles3.root} ${styles3.align[current.align]} ${side === "above" ? styles3.above : styles3.below}`,
             children: /* @__PURE__ */ jsx(Pagination, { ...current.paginationProps })
           }
         );
@@ -1951,7 +2005,16 @@ function useTablePagination({
     [align, computedTotalPages, hasMore, paginationProps, position]
   );
 }
-var styles9 = {
+var UNSET = /* @__PURE__ */ Symbol("useConstant.unset");
+var useConstant = (init) => {
+  const ref = useRef(UNSET);
+  if (ref.current === UNSET) {
+    ref.current = init();
+  }
+  return ref.current;
+};
+var useConstant_default = useConstant;
+var styles4 = {
   center: css({
     display: "flex",
     alignItems: "center",
@@ -1980,7 +2043,7 @@ function createSelectionStore(configRef) {
   };
 }
 function applyRowSelectionStyle(element, isSelected) {
-  element.classList.toggle(styles9.selectedRow, isSelected);
+  element.classList.toggle(styles4.selectedRow, isSelected);
   if (isSelected) {
     element.setAttribute("aria-selected", "true");
   } else {
@@ -2074,19 +2137,16 @@ function SelectionCellContentInner({
   );
 }
 function useTableSelection(config) {
-  const configRef = useRef(config);
-  configRef.current = config;
-  const storeRef = useRef(null);
-  storeRef.current ?? (storeRef.current = createSelectionStore(configRef));
-  const store = storeRef.current;
+  const configRef = useLatest_default(config);
+  const store = useConstant_default(() => createSelectionStore(configRef));
   useEffect(() => {
     store.notify();
-  });
+  }, [config, store]);
   const selectionColumn = useMemo(
     () => ({
-      header: /* @__PURE__ */ jsx("div", { className: styles9.center, children: /* @__PURE__ */ jsx(SelectAllCheckbox, {}) }),
+      header: /* @__PURE__ */ jsx("div", { className: styles4.center, children: /* @__PURE__ */ jsx(SelectAllCheckbox, {}) }),
       key: SELECTION_COLUMN_KEY,
-      renderCell: (item) => /* @__PURE__ */ jsx("div", { className: styles9.center, children: /* @__PURE__ */ jsx(SelectionCellContent, { item }) }),
+      renderCell: (item) => /* @__PURE__ */ jsx("div", { className: styles4.center, children: /* @__PURE__ */ jsx(SelectionCellContent, { item }) }),
       resizable: false,
       width: pixel(36)
     }),
@@ -2227,7 +2287,7 @@ function useTableSelectionState({
   );
   return { selectionConfig };
 }
-var styles10 = {
+var styles5 = {
   button: css({
     display: "flex",
     alignItems: "center",
@@ -2345,21 +2405,21 @@ function SortHeaderButton({
     "button",
     {
       "aria-label": ariaLabel,
-      className: styles10.button,
+      className: styles5.button,
       onClick: handleClick,
       type: "button",
       children: [
-        /* @__PURE__ */ jsx("span", { className: styles10.label, children }),
+        /* @__PURE__ */ jsx("span", { className: styles5.label, children }),
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: `${styles10.icon} ${direction == null ? styles10.iconInactive : styles10.iconActive}`,
+            className: `${styles5.icon} ${direction == null ? styles5.iconInactive : styles5.iconActive}`,
             "data-table-sort-icon-state": direction == null ? "inactive" : "active",
             "data-testid": `table-sort-icon-${sortKey}`,
             children: /* @__PURE__ */ jsx(Icon, { icon: SortIcon, size: "sm" })
           }
         ),
-        rank == null ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles10.rank, children: rank })
+        rank == null ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles5.rank, children: rank })
       ]
     }
   );
@@ -2472,6 +2532,6 @@ function useTableSortableState({
   return { applySort, sort, sortConfig, sortedData };
 }
 
-export { BaseTable, DEFAULT_MIN_COLUMN_WIDTH, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, capitalize, defaultCellRenderer, generateColumns, paginateData, pixel, proportional, resolveColumnWidths, toSearchFilters, useBaseTablePlugins, useTableColumnResize, useTableColumnSettings, useTableColumnSettingsState, useTableFilterState, useTableFiltering, useTablePagination, useTableSelection, useTableSelectionState, useTableSortable, useTableSortableState };
-//# sourceMappingURL=chunk-YYNWZRXZ.js.map
-//# sourceMappingURL=chunk-YYNWZRXZ.js.map
+export { DEFAULT_MIN_COLUMN_WIDTH, Table, TableBody, TableCell, TableFooter, TableHeader, TableHeaderCell, TableRow, capitalize, defaultCellRenderer, generateColumns, paginateData, pixel, proportional, resolveColumnWidths, toSearchFilters, useTableColumnResize, useTableColumnSettings, useTableColumnSettingsState, useTableFilterState, useTableFiltering, useTablePagination, useTableSelection, useTableSelectionState, useTableSortable, useTableSortableState };
+//# sourceMappingURL=chunk-HKGFMJFK.js.map
+//# sourceMappingURL=chunk-HKGFMJFK.js.map