schummar-table 0.51.2 → 0.51.4

package/dist/index.cjs

@@ -2902,6 +2902,10 @@ function filterColumns(state) {
 		draft.activeColumns = orderBy(columns.filter((column) => !(column.hidden ?? hiddenColumns.has(column.id))), [(column) => columnOrder.indexOf(column.id)]);
 		draft.visibleColumns = draft.activeColumns.filter((column) => displaySize === void 0 || column.displaySize === void 0 || column.displaySize.includes(displaySize));
 	}, { runNow: true }), [state]);
+	(0, react.useEffect)(() => state.addReaction((state$1) => new Set(state$1.visibleColumns.map((column) => column.id)), (_, draft) => {
+		draft.rowHeights.clear();
+		draft.rowHeightsKey = Math.random();
+	}, { runNow: false }), [state]);
 }
 
 //#endregion
@@ -3008,6 +3012,7 @@ function useTableState(_props) {
 		selection: props.defaultSelection ?? /* @__PURE__ */ new Set(),
 		expanded: props.defaultExpanded ?? /* @__PURE__ */ new Set(),
 		rowHeights: /* @__PURE__ */ new Map(),
+		rowHeightsKey: Math.random(),
 		filters: /* @__PURE__ */ new Map(),
 		filterValues: /* @__PURE__ */ new Map(),
 		hiddenColumns: props.defaultHiddenColumns ?? /* @__PURE__ */ new Set(),
@@ -3568,7 +3573,9 @@ const Cell = (0, react.memo)(function Cell$1({ itemId, rowIndex }) {
 	const wrapCell = table.useState((state) => state.props.wrapCell) ?? defaultWrapCell;
 	const item = table.useState((state) => state.activeItemsById.get(itemId));
 	const columnStyleOverride = table.useState((state) => state.columnStyleOverride.get(columnId), { throttle: 16 });
-	(0, react.useLayoutEffect)(() => table.getState().props.debugRender?.("render cell", itemId, columnId));
+	(0, react.useLayoutEffect)(() => {
+		table.getState().props.debugRender?.("render cell", itemId, columnId);
+	});
 	const className$2 = useTheme((t) => cx(...calcClassNames(t.classes, item?.value, rowIndex)));
 	const styles = useTheme((t) => calcCss(t.styles, item?.value, rowIndex));
 	if (!column || !item) return null;
@@ -3694,7 +3701,7 @@ function SelectComponent({ itemId }) {
 
 //#endregion
 //#region src/components/row.tsx
-const Row = (0, react.memo)(function Row$1({ itemId, rowIndex }) {
+const Row = (0, react.memo)(function Row$1({ itemId, rowIndex, rowHeightsKey }) {
 	const table = useTableContext();
 	const divRef = (0, react.useRef)(null);
 	const detailsDivRef = (0, react.useRef)(null);
@@ -3741,9 +3748,12 @@ const Row = (0, react.memo)(function Row$1({ itemId, rowIndex }) {
 		table,
 		itemId,
 		divRef.current,
-		detailsDivRef.current
+		detailsDivRef.current,
+		rowHeightsKey
 	]);
-	(0, react.useLayoutEffect)(() => table.getState().props.debugRender?.("render row", itemId));
+	(0, react.useLayoutEffect)(() => {
+		table.getState().props.debugRender?.("render row", itemId);
+	});
 	if (!item) return null;
 	return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(__emotion_react.ClassNames, { children: ({ css: css$2, cx: cx$1 }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(__emotion_react_jsx_runtime.Fragment, { children: wrapRow({
 		className: cx$1(css$2([subgrid ? {
@@ -3862,7 +3872,9 @@ function Virtualized({ header, footer, children,...props }) {
 		};
 	}, [update, virtual]);
 	(0, react.useEffect)(() => update.cancel, [update]);
-	(0, react.useLayoutEffect)(() => table.getState().props.debugRender?.(`Virtualalized render ${from} to ${to}`));
+	(0, react.useLayoutEffect)(() => {
+		table.getState().props.debugRender?.(`Virtualized render ${from} to ${to}`);
+	});
 	return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
 		...props,
 		children: [
@@ -3895,7 +3907,9 @@ function _Table(props, ref) {
 		await clearStorage();
 		resetState();
 	}
-	(0, react.useLayoutEffect)(() => table.getState().props.debugRender?.("render table"));
+	(0, react.useLayoutEffect)(() => {
+		table.getState().props.debugRender?.("render table");
+	});
 	return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(TableContext.Provider, {
 		value: table,
 		children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(TableResetContext.Provider, {
@@ -3940,8 +3954,11 @@ const TableInner = (0, react.memo)(function TableInner$1({ hidden }) {
 	const enableColumnSelection = table.useState((state) => state.props.enableColumnSelection);
 	const enableExport = table.useState((state) => state.props.enableExport);
 	const cssVariables = useCssVariables();
+	const rowHeightsKey = table.useState((state) => state.rowHeightsKey);
 	const enableClearFiltersButton = table.useState((state) => state.props.enableClearFiltersButton);
-	(0, react.useLayoutEffect)(() => table.getState().props.debugRender?.("render table inner"));
+	(0, react.useLayoutEffect)(() => {
+		table.getState().props.debugRender?.("render table inner");
+	});
 	return /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(Virtualized, {
 		className: classes?.table,
 		css: [
@@ -4043,7 +4060,8 @@ const TableInner = (0, react.memo)(function TableInner$1({ hidden }) {
 		] })] }),
 		children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(Row, {
 			itemId,
-			rowIndex: startIndex + index
+			rowIndex: startIndex + index,
+			rowHeightsKey
 		}, itemId))
 	});
 });