schummar-table 0.42.0 → 0.43.0

package/dist/index.d.cts

@@ -1,8 +1,8 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React from 'react';
 import { ComponentType, ReactNode, HTMLProps } from 'react';
-import { T as TableTheme, C as CommonFilterProps, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-xTAreHv_.cjs';
-export { e as Column, f as FunctionWithDeps, g as InternalColumn, S as Sort, h as SortDirection, d as TableStateStorage } from './types-xTAreHv_.cjs';
+import { T as TableTheme, C as CommonFilterProps, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-B8KLTUz2.cjs';
+export { e as Column, f as FunctionWithDeps, g as InternalColumn, S as Sort, h as SortDirection, d as TableStateStorage } from './types-B8KLTUz2.cjs';
 import { Store } from 'schummar-state/react';
 import { E as ExporterEntry } from './exporter-u6SatTo6.cjs';
 import '@emotion/react';

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React from 'react';
 import { ComponentType, ReactNode, HTMLProps } from 'react';
-import { T as TableTheme, C as CommonFilterProps, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-DcnzwYBU.js';
-export { e as Column, f as FunctionWithDeps, g as InternalColumn, S as Sort, h as SortDirection, d as TableStateStorage } from './types-DcnzwYBU.js';
+import { T as TableTheme, C as CommonFilterProps, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-C_rX6bDQ.js';
+export { e as Column, f as FunctionWithDeps, g as InternalColumn, S as Sort, h as SortDirection, d as TableStateStorage } from './types-C_rX6bDQ.js';
 import { Store } from 'schummar-state/react';
 import { E as ExporterEntry } from './exporter-u6SatTo6.js';
 import '@emotion/react';

package/dist/index.js

@@ -8,7 +8,7 @@ import {
   defaultClasses,
   globalTableTheme,
   mergeThemes
-} from "./chunk-E2DUBLYQ.js";
+} from "./chunk-FTCKJOPQ.js";
 import "./chunk-WFCJ3D3G.js";
 import {
   __async,
@@ -606,17 +606,21 @@ function useTheme(selector) {
   const memo4 = useTableMemo();
   const _globalTableTheme = globalTableTheme.useState();
   const process = (t) => {
-    var _a2, _b2, _c, _d;
-    const cellClass = (_a2 = t.classes) == null ? void 0 : _a2.cell;
-    const cellStyles = (_b2 = t.styles) == null ? void 0 : _b2.cell;
-    const detailsClass = (_c = t.classes) == null ? void 0 : _c.details;
-    const detailsStyles = (_d = t.styles) == null ? void 0 : _d.details;
+    var _a2, _b2, _c, _d, _e, _f;
+    const rowClass = (_a2 = t.classes) == null ? void 0 : _a2.row;
+    const rowStyles = (_b2 = t.styles) == null ? void 0 : _b2.row;
+    const cellClass = (_c = t.classes) == null ? void 0 : _c.cell;
+    const cellStyles = (_d = t.styles) == null ? void 0 : _d.cell;
+    const detailsClass = (_e = t.classes) == null ? void 0 : _e.details;
+    const detailsStyles = (_f = t.styles) == null ? void 0 : _f.details;
     return __spreadProps(__spreadValues({}, t), {
       classes: __spreadProps(__spreadValues({}, t.classes), {
+        row: rowClass instanceof Function || Array.isArray(rowClass) ? memo4("theme.classes.row", rowClass) : rowClass,
         cell: cellClass instanceof Function || Array.isArray(cellClass) ? memo4("theme.classes.cell", cellClass) : cellClass,
         details: detailsClass instanceof Function || Array.isArray(detailsClass) ? memo4("theme.classes.details", detailsClass) : detailsClass
       }),
       styles: __spreadProps(__spreadValues({}, t.styles), {
+        row: rowStyles instanceof Function || Array.isArray(rowStyles) ? memo4("theme.styles.row", rowStyles) : rowStyles,
         cell: cellStyles instanceof Function || Array.isArray(cellStyles) ? memo4("theme.styles.cell", cellStyles) : cellStyles,
         details: detailsStyles instanceof Function || Array.isArray(detailsStyles) ? memo4("theme.styles.details", detailsStyles) : detailsStyles
       }),
@@ -2205,7 +2209,7 @@ function SelectFilter(_a) {
 }
 
 // src/components/table.tsx
-import { memo as memo3, useEffect as useEffect15, useLayoutEffect as useLayoutEffect6, useState as useState14 } from "react";
+import { memo as memo3, useEffect as useEffect14, useLayoutEffect as useLayoutEffect6, useState as useState14 } from "react";
 
 // src/internalState/tableStateStorage.ts
 import { useEffect as useEffect5, useState as useState9 } from "react";
@@ -2625,6 +2629,7 @@ function calcProps(props) {
       };
     };
     const columns = inputColumns.map(mapColumn);
+    const wrapRow = props.wrapRow && cache("wrapRow", props.wrapRow);
     const wrapCell = props.wrapCell && cache("wrapCell", props.wrapCell);
     const rowAction = props.rowAction instanceof Function || Array.isArray(props.rowAction) ? cache("rowAction", props.rowAction) : props.rowAction;
     const rowDetails = props.rowDetails instanceof Function || Array.isArray(props.rowDetails) ? cache("rowDetails", props.rowDetails) : props.rowDetails;
@@ -2633,6 +2638,7 @@ function calcProps(props) {
       parentId,
       columns,
       columnProps,
+      wrapRow,
       wrapCell,
       rowAction,
       rowDetails,
@@ -3662,18 +3668,27 @@ function SelectComponent({ itemId }) {
 }
 
 // src/components/row.tsx
-import { jsx as jsx31, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+var defaultWrapRow = (content) => {
+  return content;
+};
 var Row = memo2(function Row2({
   itemId,
   rowIndex
 }) {
+  var _a;
   const table = useTableContext();
   const divRef = useRef5(null);
   const detailsDivRef = useRef5(null);
   const classes = useTheme((t) => t.classes);
   const styles = useTheme((t) => t.styles);
+  const item = table.useState((state) => state.activeItemsById.get(itemId));
+  const wrapRow = (_a = table.useState((state) => state.props.wrapRow)) != null ? _a : defaultWrapRow;
+  const rowClassName = (classes == null ? void 0 : classes.row) instanceof Function ? classes.row(item == null ? void 0 : item.value, rowIndex) : classes == null ? void 0 : classes.row;
+  const rowStyles = (styles == null ? void 0 : styles.row) instanceof Function ? styles.row(item == null ? void 0 : item.value, rowIndex) : styles == null ? void 0 : styles.row;
+  const subgrid = table.useState((state) => state.props.subgrid);
   const {
-    className: className2,
+    cellClassName,
     css_,
     indent,
     hasChildren,
@@ -3683,18 +3698,18 @@ var Row = memo2(function Row2({
     rowAction,
     hasDetails
   } = table.useState((state) => {
-    var _a, _b;
-    const item = state.activeItemsById.get(itemId);
+    var _a2, _b;
+    const item2 = state.activeItemsById.get(itemId);
     return {
-      className: cx(...calcClassNames(classes, item == null ? void 0 : item.value, rowIndex)),
-      css_: calcCss(styles, item == null ? void 0 : item.value, rowIndex),
-      indent: item ? getAncestors(state.activeItemsById, item).size : 0,
-      hasChildren: !!(item == null ? void 0 : item.children.length),
-      hasDeferredChildren: item && ((_b = (_a = state.props).hasDeferredChildren) == null ? void 0 : _b.call(_a, item.value)),
+      cellClassName: cx(...calcClassNames(classes, item2 == null ? void 0 : item2.value, rowIndex)),
+      css_: calcCss(styles, item2 == null ? void 0 : item2.value, rowIndex),
+      indent: item2 ? getAncestors(state.activeItemsById, item2).size : 0,
+      hasChildren: !!(item2 == null ? void 0 : item2.children.length),
+      hasDeferredChildren: item2 && ((_b = (_a2 = state.props).hasDeferredChildren) == null ? void 0 : _b.call(_a2, item2.value)),
       columnIds: state.activeColumns.map((column) => column.id),
       enableSelection: state.props.enableSelection,
-      rowAction: state.props.rowAction instanceof Function ? item ? state.props.rowAction(item.value, rowIndex) : null : state.props.rowAction,
-      hasDetails: state.props.rowDetails instanceof Function ? item ? !!state.props.rowDetails(item.value, rowIndex) : null : !!state.props.rowDetails
+      rowAction: state.props.rowAction instanceof Function ? item2 ? state.props.rowAction(item2.value, rowIndex) : null : state.props.rowAction,
+      hasDetails: state.props.rowDetails instanceof Function ? item2 ? !!state.props.rowDetails(item2.value, rowIndex) : null : !!state.props.rowDetails
     };
   });
   useLayoutEffect4(() => {
@@ -3719,25 +3734,56 @@ var Row = memo2(function Row2({
     };
   }, [table, itemId, divRef.current, detailsDivRef.current]);
   useLayoutEffect4(() => {
-    var _a, _b;
-    return (_b = (_a = table.getState().props).debugRender) == null ? void 0 : _b.call(_a, "render row", itemId);
+    var _a2, _b;
+    return (_b = (_a2 = table.getState().props).debugRender) == null ? void 0 : _b.call(_a2, "render row", itemId);
   });
-  return /* @__PURE__ */ jsxs17("div", { css: { display: "contents" }, children: [
-    /* @__PURE__ */ jsx31("div", { className: className2, css: [defaultClasses.cellFill, css_], ref: divRef }),
-    /* @__PURE__ */ jsxs17("div", { className: className2, css: [defaultClasses.cell, defaultClasses.firstCell, css_], children: [
-      indent > 0 && /* @__PURE__ */ jsx31("div", { css: { width: indent * 20 } }),
-      enableSelection && /* @__PURE__ */ jsx31(SelectComponent, { itemId }),
-      (hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ jsx31(ExpandControl, { itemId, hasDeferredChildren }),
-      rowAction
-    ] }),
-    columnIds.map((columnId) => /* @__PURE__ */ jsx31(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ jsx31(Cell, { itemId, rowIndex }) }, columnId)),
-    /* @__PURE__ */ jsx31("div", { className: className2, css: [defaultClasses.cellFill, css_] }),
-    /* @__PURE__ */ jsx31(Details, { ref: detailsDivRef, itemId, rowIndex })
-  ] });
+  if (!item) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx31(
+    "div",
+    {
+      css: [
+        {
+          display: "contents"
+        },
+        subgrid && {
+          gridColumn: "1 / -1",
+          display: "grid",
+          gridTemplateColumns: "subgrid"
+        },
+        rowStyles
+      ],
+      className: rowClassName,
+      children: wrapRow(
+        /* @__PURE__ */ jsxs17(Fragment7, { children: [
+          /* @__PURE__ */ jsx31("div", { className: cellClassName, css: [defaultClasses.cellFill, css_], ref: divRef }),
+          /* @__PURE__ */ jsxs17(
+            "div",
+            {
+              className: cellClassName,
+              css: [defaultClasses.cell, defaultClasses.firstCell, css_],
+              children: [
+                indent > 0 && /* @__PURE__ */ jsx31("div", { css: { width: indent * 20 } }),
+                enableSelection && /* @__PURE__ */ jsx31(SelectComponent, { itemId }),
+                (hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ jsx31(ExpandControl, { itemId, hasDeferredChildren }),
+                rowAction
+              ]
+            }
+          ),
+          columnIds.map((columnId) => /* @__PURE__ */ jsx31(ColumnContext.Provider, { value: columnId, children: /* @__PURE__ */ jsx31(Cell, { itemId, rowIndex }) }, columnId)),
+          /* @__PURE__ */ jsx31("div", { className: cellClassName, css: [defaultClasses.cellFill, css_] }),
+          /* @__PURE__ */ jsx31(Details, { ref: detailsDivRef, itemId, rowIndex })
+        ] }),
+        item.value,
+        rowIndex
+      )
+    }
+  );
 });
 
 // src/components/virtualized.tsx
-import { useEffect as useEffect14, useLayoutEffect as useLayoutEffect5, useMemo as useMemo10, useRef as useRef6, useState as useState13 } from "react";
+import { useEffect as useEffect13, useLayoutEffect as useLayoutEffect5, useMemo as useMemo10, useRef as useRef6, useState as useState13 } from "react";
 import { jsx as jsx32, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
 var findScrollRoot = (x) => {
   const parent = x.parentElement;
@@ -3817,7 +3863,7 @@ function Virtualized(_a) {
   );
   const throttleScroll = (_b2 = (_a2 = typeof virtual === "boolean" ? void 0 : virtual) == null ? void 0 : _a2.throttleScroll) != null ? _b2 : 16;
   const update = useMemo10(() => throttle(() => setId({}), throttleScroll), [throttleScroll]);
-  useEffect14(() => {
+  useEffect13(() => {
     if (!virtual || !probeRef.current) return;
     window.addEventListener("scroll", update, true);
     window.addEventListener("resize", update, true);
@@ -3826,7 +3872,7 @@ function Virtualized(_a) {
       window.removeEventListener("resize", update, true);
     };
   }, [update, virtual]);
-  useEffect14(() => update.cancel, [update]);
+  useEffect13(() => update.cancel, [update]);
   useLayoutEffect5(
     () => {
       var _a3, _b3;
@@ -3843,7 +3889,7 @@ function Virtualized(_a) {
 }
 
 // src/components/table.tsx
-import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx33, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function Table(props) {
   const [table, resetState] = useTableState(props);
   const [isHydrated, clearStorage] = useTableStateStorage(table);
@@ -3862,11 +3908,11 @@ function Table(props) {
 function TableLoadingState({ isHydrated }) {
   const loadingText = useTheme((t) => t.text.loading);
   const [showLoading, setShowLoading] = useState14(false);
-  useEffect15(() => {
+  useEffect14(() => {
     const handle = setTimeout(() => setShowLoading(true), 500);
     return () => clearTimeout(handle);
   });
-  return /* @__PURE__ */ jsxs19(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment8, { children: [
     !isHydrated && showLoading && /* @__PURE__ */ jsx33("div", { children: loadingText }),
     /* @__PURE__ */ jsx33(TableInner, { hidden: !isHydrated })
   ] });
@@ -3923,7 +3969,7 @@ var TableInner = memo3(function TableInner2({ hidden }) {
           fullWidth === "left" || fullWidth === true ? "auto" : "0"
         ].join(" ")
       },
-      header: /* @__PURE__ */ jsxs19(Fragment7, { children: [
+      header: /* @__PURE__ */ jsxs19(Fragment8, { children: [
         /* @__PURE__ */ jsx33(
           "div",
           {
@@ -3950,7 +3996,7 @@ var TableInner = memo3(function TableInner2({ hidden }) {
               enableSelection && /* @__PURE__ */ jsx33(SelectComponent, {}),
               enableColumnSelection && /* @__PURE__ */ jsx33(ColumnSelection, {}),
               enableExport && /* @__PURE__ */ jsx33(Export2, {}),
-              (enableSelection || enableColumnSelection || enableExport) && /* @__PURE__ */ jsxs19(Fragment7, { children: [
+              (enableSelection || enableColumnSelection || enableExport) && /* @__PURE__ */ jsxs19(Fragment8, { children: [
                 /* @__PURE__ */ jsx33("div", { css: { flex: 1 } }),
                 /* @__PURE__ */ jsx33(ResizeHandleView, {})
               ] })
@@ -3971,9 +4017,9 @@ var TableInner = memo3(function TableInner2({ hidden }) {
           }
         )
       ] }),
-      footer: /* @__PURE__ */ jsxs19(Fragment7, { children: [
+      footer: /* @__PURE__ */ jsxs19(Fragment8, { children: [
         enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */ jsx33(ClearFiltersButton, {}),
-        hasFooter && /* @__PURE__ */ jsxs19(Fragment7, { children: [
+        hasFooter && /* @__PURE__ */ jsxs19(Fragment8, { children: [
           /* @__PURE__ */ jsx33(
             "div",
             {