schummar-table 0.51.2 → 0.51.4

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { r as ExporterEntry } from "./exporter-ZZesPOOU.cjs";
-import { _ as TableTheme, a as FilterImplementation, c as InternalColumn, d as PartialTableTheme, f as Sort, g as TableRef, h as TableProps, i as CommonFilterProps, l as InternalTableState, m as TableItem, n as ColumnFactory, o as FunctionWithDeps, p as SortDirection, r as ColumnGenerator, s as Id, t as Column, u as MemoizedTableTheme, v as TableStateStorage } from "./types-DqoOnlp7.cjs";
+import { _ as TableTheme, a as FilterImplementation, c as InternalColumn, d as PartialTableTheme, f as Sort, g as TableRef, h as TableProps, i as CommonFilterProps, l as InternalTableState, m as TableItem, n as ColumnFactory, o as FunctionWithDeps, p as SortDirection, r as ColumnGenerator, s as Id, t as Column, u as MemoizedTableTheme, v as TableStateStorage } from "./types-1gz-mJJm.cjs";
 import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
 import * as react0 from "react";
 import { ComponentType, ForwardedRef, HTMLProps, ReactNode } from "react";

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 import { r as ExporterEntry } from "./exporter-zK7PhTrL.js";
-import { _ as TableTheme, a as FilterImplementation, c as InternalColumn, d as PartialTableTheme, f as Sort, g as TableRef, h as TableProps, i as CommonFilterProps, l as InternalTableState, m as TableItem, n as ColumnFactory, o as FunctionWithDeps, p as SortDirection, r as ColumnGenerator, s as Id, t as Column, u as MemoizedTableTheme, v as TableStateStorage } from "./types-BfdXNfLi.js";
+import { _ as TableTheme, a as FilterImplementation, c as InternalColumn, d as PartialTableTheme, f as Sort, g as TableRef, h as TableProps, i as CommonFilterProps, l as InternalTableState, m as TableItem, n as ColumnFactory, o as FunctionWithDeps, p as SortDirection, r as ColumnGenerator, s as Id, t as Column, u as MemoizedTableTheme, v as TableStateStorage } from "./types-CJOB-Acy.js";
 import * as react0 from "react";
 import { ComponentType, ForwardedRef, HTMLProps, ReactNode } from "react";
-import * as _emotion_react_jsx_runtime2 from "@emotion/react/jsx-runtime";
+import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
 import { Store } from "schummar-state/react";
 
 //#region src/components/autoFocusTextField.d.ts
 type Props = TableTheme['components']['TextField'] extends ComponentType<infer T> ? T : never;
-declare function AutoFocusTextField(props: Omit<Props, 'inputRef'>): _emotion_react_jsx_runtime2.JSX.Element;
+declare function AutoFocusTextField(props: Omit<Props, 'inputRef'>): _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/components/combinedFilter.d.ts
 interface CombinedFilterProps extends Pick<CommonFilterProps<any, any, any, any>, 'classNames'> {
@@ -16,7 +16,7 @@ interface CombinedFilterProps extends Pick<CommonFilterProps<any, any, any, any>
 declare function CombinedFilter({
   columnIds: inputColumnIds,
   ...props
-}: CombinedFilterProps): _emotion_react_jsx_runtime2.JSX.Element;
+}: CombinedFilterProps): _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/components/datePicker.d.ts
 type DateRange = {
@@ -68,7 +68,7 @@ declare function DatePickerProvider({
   ...props
 }: Partial<Omit<DatePickerProps, 'value' | 'onChange'>> & {
   children?: ReactNode;
-}): _emotion_react_jsx_runtime2.JSX.Element;
+}): _emotion_react_jsx_runtime1.JSX.Element;
 /** Rounds a date down to the start of the day. */
 declare const startOfDay: (d: Date) => Date;
 /** Rounds a date up to the end of the day. */
@@ -81,34 +81,34 @@ declare const thisYear: (delta?: number) => DateRange;
 declare const getCalendarWeek: (date: Date) => number;
 declare const commonQuickOptions: {
   today: {
-    label: _emotion_react_jsx_runtime2.JSX.Element;
+    label: _emotion_react_jsx_runtime1.JSX.Element;
     value: () => DateRange;
   };
   thisWeek: {
-    label: _emotion_react_jsx_runtime2.JSX.Element;
+    label: _emotion_react_jsx_runtime1.JSX.Element;
     value: (props: DatePickerProps) => DateRange;
   };
   thisMonth: {
-    label: _emotion_react_jsx_runtime2.JSX.Element;
+    label: _emotion_react_jsx_runtime1.JSX.Element;
     value: () => DateRange;
   };
   thisYear: {
-    label: _emotion_react_jsx_runtime2.JSX.Element;
+    label: _emotion_react_jsx_runtime1.JSX.Element;
     value: () => DateRange;
   };
   lastSevenDays: {
-    label: _emotion_react_jsx_runtime2.JSX.Element;
+    label: _emotion_react_jsx_runtime1.JSX.Element;
     value: () => DateRange;
   };
   lastThirtyDays: {
-    label: _emotion_react_jsx_runtime2.JSX.Element;
+    label: _emotion_react_jsx_runtime1.JSX.Element;
     value: () => DateRange;
   };
 };
 /** Returns whether two dates and/or date ranges intersect. Intersection is considered per day. */
 declare function dateIntersect(a: Date | DateRange | null | undefined, b: Date | DateRange | null | undefined): boolean;
 declare function dateClamp(date: Date, min?: Date, max?: Date): Date;
-declare function DatePicker(props: DatePickerProps): _emotion_react_jsx_runtime2.JSX.Element;
+declare function DatePicker(props: DatePickerProps): _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/components/dateFilter.d.ts
 declare function DateFilter<TItem, TColumnValue>({
@@ -259,7 +259,7 @@ declare function TableSettingsProvider({
 }: Partial<TableSettingsContextType> & {
   additionalExporters?: ExporterEntry[];
   children?: ReactNode;
-}): _emotion_react_jsx_runtime2.JSX.Element;
+}): _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/misc/textMatch.d.ts
 declare const textMatch: (text: string, query: string) => boolean;

package/dist/index.js

@@ -2895,6 +2895,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]);
+	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
@@ -3001,6 +3005,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(),
@@ -3561,7 +3566,9 @@ const Cell = 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 });
-	useLayoutEffect(() => table.getState().props.debugRender?.("render cell", itemId, columnId));
+	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;
@@ -3687,7 +3694,7 @@ function SelectComponent({ itemId }) {
 
 //#endregion
 //#region src/components/row.tsx
-const Row = memo(function Row$1({ itemId, rowIndex }) {
+const Row = memo(function Row$1({ itemId, rowIndex, rowHeightsKey }) {
 	const table = useTableContext();
 	const divRef = useRef(null);
 	const detailsDivRef = useRef(null);
@@ -3734,9 +3741,12 @@ const Row = memo(function Row$1({ itemId, rowIndex }) {
 		table,
 		itemId,
 		divRef.current,
-		detailsDivRef.current
+		detailsDivRef.current,
+		rowHeightsKey
 	]);
-	useLayoutEffect(() => table.getState().props.debugRender?.("render row", itemId));
+	useLayoutEffect(() => {
+		table.getState().props.debugRender?.("render row", itemId);
+	});
 	if (!item) return null;
 	return /* @__PURE__ */ jsx(ClassNames, { children: ({ css: css$1, cx: cx$1 }) => /* @__PURE__ */ jsx(Fragment$1, { children: wrapRow({
 		className: cx$1(css$1([subgrid ? {
@@ -3855,7 +3865,9 @@ function Virtualized({ header, footer, children,...props }) {
 		};
 	}, [update, virtual]);
 	useEffect(() => update.cancel, [update]);
-	useLayoutEffect(() => table.getState().props.debugRender?.(`Virtualalized render ${from} to ${to}`));
+	useLayoutEffect(() => {
+		table.getState().props.debugRender?.(`Virtualized render ${from} to ${to}`);
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		children: [
@@ -3888,7 +3900,9 @@ function _Table(props, ref) {
 		await clearStorage();
 		resetState();
 	}
-	useLayoutEffect(() => table.getState().props.debugRender?.("render table"));
+	useLayoutEffect(() => {
+		table.getState().props.debugRender?.("render table");
+	});
 	return /* @__PURE__ */ jsx(TableContext.Provider, {
 		value: table,
 		children: /* @__PURE__ */ jsx(TableResetContext.Provider, {
@@ -3933,8 +3947,11 @@ const TableInner = 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);
-	useLayoutEffect(() => table.getState().props.debugRender?.("render table inner"));
+	useLayoutEffect(() => {
+		table.getState().props.debugRender?.("render table inner");
+	});
 	return /* @__PURE__ */ jsx(Virtualized, {
 		className: classes?.table,
 		css: [
@@ -4036,7 +4053,8 @@ const TableInner = memo(function TableInner$1({ hidden }) {
 		] })] }),
 		children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ jsx(Row, {
 			itemId,
-			rowIndex: startIndex + index
+			rowIndex: startIndex + index,
+			rowHeightsKey
 		}, itemId))
 	});
 });