@wordrhyme/auto-crud 1.1.3 → 1.1.4

package/dist/index.cjs

@@ -2774,32 +2774,65 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	const [expanded, setExpanded] = react.useState(false);
 	const [visibleCount, setVisibleCount] = react.useState(null);
 	const containerRef = react.useRef(null);
+	const hasLeading = leading != null;
+	const filterMeasureKey = react.useMemo(() => filters.map((filter) => [
+		filter.id,
+		filter.operator,
+		Array.isArray(filter.value) ? filter.value.join(",") : String(filter.value ?? "")
+	].join(":")).join("|"), [filters]);
 	const calcVisibleCount = react.useCallback(() => {
 		const el = containerRef.current;
 		if (!el) return;
-		const items = el.querySelectorAll("[data-filter-item]");
-		if (items.length === 0) return;
+		const items = Array.from(el.querySelectorAll("[data-filter-item]"));
+		if (items.length === 0) {
+			setVisibleCount(null);
+			return;
+		}
 		const restoreList = [];
-		el.querySelectorAll(".hidden").forEach((node) => {
-			const htmlNode = node;
-			htmlNode.classList.remove("hidden");
-			restoreList.push(htmlNode);
+		el.querySelectorAll("[data-filter-item].hidden, [data-filter-toggle].hidden").forEach((node) => {
+			node.classList.remove("hidden");
+			restoreList.push(node);
 		});
-		el.style.flex = "1 1 0%";
-		el.offsetHeight;
-		const firstTop = items[0].offsetTop;
+		const availableWidth = el.getBoundingClientRect().width;
+		const previousFlex = el.style.flex;
+		const previousWidth = el.style.width;
+		el.style.flex = `0 0 ${availableWidth}px`;
+		el.style.width = `${availableWidth}px`;
+		el.getBoundingClientRect();
+		const computedStyle = window.getComputedStyle(el);
+		const gap = Number.parseFloat(computedStyle.columnGap) || Number.parseFloat(computedStyle.gap) || 0;
+		const leadingEl = el.querySelector("[data-filter-leading]");
+		const toggle = el.querySelector("[data-filter-toggle]");
+		const reset = el.querySelector("[data-filter-reset]");
+		const addWidth = (current, next) => {
+			if (next <= 0) return current;
+			if (current === 0) return next;
+			return current + gap + next;
+		};
+		const leadingWidth = leadingEl?.offsetWidth ?? 0;
+		const itemWidths = items.map((item) => item.offsetWidth);
+		const toggleWidth = toggle?.offsetWidth ?? 0;
+		const resetWidth = reset?.offsetWidth ?? 0;
+		if (itemWidths.reduce((width, itemWidth) => addWidth(width, itemWidth), addWidth(leadingWidth, resetWidth)) <= availableWidth) {
+			el.style.flex = previousFlex;
+			el.style.width = previousWidth;
+			restoreList.forEach((node) => node.classList.add("hidden"));
+			setVisibleCount(null);
+			return;
+		}
+		const trailingWidth = addWidth(addWidth(0, toggleWidth), resetWidth);
+		let usedWidth = leadingWidth;
 		let count = 0;
-		for (const item of Array.from(items)) {
-			if (item.offsetTop > firstTop) break;
+		for (const itemWidth of itemWidths) {
+			const nextWidth = addWidth(usedWidth, itemWidth);
+			if (addWidth(nextWidth, trailingWidth) > availableWidth) break;
+			usedWidth = nextWidth;
 			count++;
 		}
-		const btn = el.querySelector("[data-filter-toggle]");
-		if (btn && count < items.length && count > 0) {
-			if (btn.offsetTop > firstTop) count--;
-		}
-		el.style.flex = "";
+		el.style.flex = previousFlex;
+		el.style.width = previousWidth;
 		restoreList.forEach((node) => node.classList.add("hidden"));
-		setVisibleCount(count >= items.length ? null : count);
+		setVisibleCount(count);
 	}, []);
 	react.useLayoutEffect(() => {
 		if (!mounted) return;
@@ -2807,6 +2840,9 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	}, [
 		mounted,
 		filterColumns.length,
+		hasLeading,
+		hasFilters,
+		filterMeasureKey,
 		calcVisibleCount
 	]);
 	react.useEffect(() => {
@@ -2829,6 +2865,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	}, [
 		mounted,
 		filterColumns.length,
+		hasLeading,
 		calcVisibleCount
 	]);
 	if (!mounted) return null;
@@ -2836,7 +2873,11 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 		ref: containerRef,
 		className: "flex flex-1 flex-wrap items-center gap-2 min-w-0",
 		children: [
-			leading,
+			leading != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "shrink-0",
+				"data-filter-leading": true,
+				children: leading
+			}) : null,
 			filterColumns.map((column, index) => {
 				const meta = column.columnDef.meta;
 				const value = getFilterValue(column.id);
@@ -2900,6 +2941,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 				children: expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, { className: "size-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "size-4" })
 			}),
 			hasFilters && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Button, {
+				"data-filter-reset": true,
 				variant: "outline",
 				size: "sm",
 				className: "h-8 border-dashed shrink-0",
@@ -4814,7 +4856,7 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex w-full items-start justify-between gap-2 p-1",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex flex-1 items-start gap-2 min-h-[40px]",
+					className: "flex min-h-[40px] min-w-0 flex-1 items-start gap-2",
 					"data-filter-parent": true,
 					children: [
 						currentMode !== "simple" && searchInput,

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { z } from "zod";
 import * as _tanstack_react_table0 from "@tanstack/react-table";
 import { Column, ColumnDef, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
@@ -361,7 +361,7 @@ declare function AutoTableActionBar<TData>({
   enableDelete,
   extraActions,
   actions
-}: AutoTableActionBarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -529,7 +529,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   showDefaultExport,
   onSelectedCountChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime3.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -874,7 +874,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   toolbarActions,
   locale: localeProp,
   onCreate
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime3.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -906,7 +906,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime3.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime0.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1207,7 +1207,7 @@ declare function AutoTableSimpleFilters<TData>({
   filters: externalFilters,
   onFiltersChange,
   leading
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime3.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = "dialog" | "sheet";
@@ -1249,7 +1249,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime3.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1271,7 +1271,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime3.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = "selected" | "filtered";
@@ -1291,7 +1291,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime3.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1304,7 +1304,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1315,7 +1315,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1327,7 +1327,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1341,7 +1341,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime3.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> {
@@ -1353,7 +1353,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1364,7 +1364,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1375,7 +1375,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime3.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/hooks/use-data-table.d.ts
 interface UseDataTableProps<TData> extends Omit<TableOptions<TData>, "state" | "pageCount" | "getCoreRowModel" | "manualFiltering" | "manualPagination" | "manualSorting">, Required<Pick<TableOptions<TData>, "pageCount">> {

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as _tanstack_react_table0 from "@tanstack/react-table";
 import { Column, ColumnDef, ColumnSort, Row, RowData, Table, TableOptions, TableState } from "@tanstack/react-table";
 import { DropdownMenuTrigger, PopoverContent } from "@pixpilot/shadcn";
 import { ClassValue } from "clsx";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { z } from "zod";
 import { ISchema } from "@formily/json-schema";
 
@@ -361,7 +361,7 @@ declare function AutoTableActionBar<TData>({
   enableDelete,
   extraActions,
   actions
-}: AutoTableActionBarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: AutoTableActionBarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/lib/schema-bridge/types.d.ts
 /**
@@ -529,7 +529,7 @@ declare function AutoTable<T extends z.ZodObject<z.ZodRawShape>>({
   showDefaultExport,
   onSelectedCountChange,
   getSelectedRows
-}: AutoTableProps<T>): react_jsx_runtime2.JSX.Element;
+}: AutoTableProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/i18n/locale.d.ts
 /**
@@ -874,7 +874,7 @@ declare function AutoCrudTable<TSchema extends z.ZodObject<z.ZodRawShape>>({
   toolbarActions,
   locale: localeProp,
   onCreate
-}: AutoCrudTableProps<TSchema>): react_jsx_runtime2.JSX.Element;
+}: AutoCrudTableProps<TSchema>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/auto-form.d.ts
 interface AutoFormProps<T extends z.ZodObject<z.ZodRawShape>> {
@@ -906,7 +906,7 @@ declare function AutoFormInner<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   showSubmitButton
-}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime2.JSX.Element;
+}: AutoFormProps<T>, ref: React.Ref<AutoFormRef>): react_jsx_runtime0.JSX.Element;
 declare const AutoForm: <T extends z.ZodObject<z.ZodRawShape>>(props: AutoFormProps<T> & {
   ref?: React.Ref<AutoFormRef>;
 }) => ReturnType<typeof AutoFormInner>;
@@ -1207,7 +1207,7 @@ declare function AutoTableSimpleFilters<TData>({
   filters: externalFilters,
   onFiltersChange,
   leading
-}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime2.JSX.Element | null;
+}: AutoTableSimpleFiltersProps<TData>): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 //#region src/components/auto-crud/form-modal.d.ts
 type ModalVariant = "dialog" | "sheet";
@@ -1249,7 +1249,7 @@ declare function CrudFormModal<T extends z.ZodObject<z.ZodRawShape>>({
   labelAlign,
   labelWidth,
   className
-}: CrudFormModalProps<T>): react_jsx_runtime2.JSX.Element;
+}: CrudFormModalProps<T>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/import-dialog.d.ts
 interface ImportDialogProps {
@@ -1271,7 +1271,7 @@ declare function ImportDialog({
   columns,
   title,
   locale
-}: ImportDialogProps): react_jsx_runtime2.JSX.Element;
+}: ImportDialogProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/auto-crud/export-dialog.d.ts
 type ExportMode = "selected" | "filtered";
@@ -1291,7 +1291,7 @@ declare function ExportDialog({
   selectedCount,
   onExport,
   canExportFiltered
-}: ExportDialogProps): react_jsx_runtime2.JSX.Element;
+}: ExportDialogProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table.d.ts
 interface DataTableProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1304,7 +1304,7 @@ declare function DataTable<TData>({
   children,
   className,
   ...props
-}: DataTableProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-advanced-toolbar.d.ts
 interface DataTableAdvancedToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1315,7 +1315,7 @@ declare function DataTableAdvancedToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableAdvancedToolbarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-column-header.d.ts
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ComponentProps<typeof DropdownMenuTrigger> {
@@ -1327,7 +1327,7 @@ declare function DataTableColumnHeader<TData, TValue>({
   label,
   className,
   ...props
-}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
+}: DataTableColumnHeaderProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-faceted-filter.d.ts
 interface DataTableFacetedFilterProps<TData, TValue> {
@@ -1341,7 +1341,7 @@ declare function DataTableFacetedFilter<TData, TValue>({
   title,
   options,
   multiple
-}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime2.JSX.Element;
+}: DataTableFacetedFilterProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-pagination.d.ts
 interface DataTablePaginationProps<TData> extends React.ComponentProps<"div"> {
@@ -1353,7 +1353,7 @@ declare function DataTablePagination<TData>({
   pageSizeOptions,
   className,
   ...props
-}: DataTablePaginationProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTablePaginationProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-toolbar.d.ts
 interface DataTableToolbarProps<TData> extends React$1.ComponentProps<"div"> {
@@ -1364,7 +1364,7 @@ declare function DataTableToolbar<TData>({
   children,
   className,
   ...props
-}: DataTableToolbarProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableToolbarProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/data-table/data-table-view-options.d.ts
 interface DataTableViewOptionsProps<TData> extends React$1.ComponentProps<typeof PopoverContent> {
@@ -1375,7 +1375,7 @@ declare function DataTableViewOptions<TData>({
   table,
   disabled,
   ...props
-}: DataTableViewOptionsProps<TData>): react_jsx_runtime2.JSX.Element;
+}: DataTableViewOptionsProps<TData>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/hooks/use-data-table.d.ts
 interface UseDataTableProps<TData> extends Omit<TableOptions<TData>, "state" | "pageCount" | "getCoreRowModel" | "manualFiltering" | "manualPagination" | "manualSorting">, Required<Pick<TableOptions<TData>, "pageCount">> {

package/dist/index.js

@@ -2731,32 +2731,65 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	const [expanded, setExpanded] = React.useState(false);
 	const [visibleCount, setVisibleCount] = React.useState(null);
 	const containerRef = React.useRef(null);
+	const hasLeading = leading != null;
+	const filterMeasureKey = React.useMemo(() => filters.map((filter) => [
+		filter.id,
+		filter.operator,
+		Array.isArray(filter.value) ? filter.value.join(",") : String(filter.value ?? "")
+	].join(":")).join("|"), [filters]);
 	const calcVisibleCount = React.useCallback(() => {
 		const el = containerRef.current;
 		if (!el) return;
-		const items = el.querySelectorAll("[data-filter-item]");
-		if (items.length === 0) return;
+		const items = Array.from(el.querySelectorAll("[data-filter-item]"));
+		if (items.length === 0) {
+			setVisibleCount(null);
+			return;
+		}
 		const restoreList = [];
-		el.querySelectorAll(".hidden").forEach((node) => {
-			const htmlNode = node;
-			htmlNode.classList.remove("hidden");
-			restoreList.push(htmlNode);
+		el.querySelectorAll("[data-filter-item].hidden, [data-filter-toggle].hidden").forEach((node) => {
+			node.classList.remove("hidden");
+			restoreList.push(node);
 		});
-		el.style.flex = "1 1 0%";
-		el.offsetHeight;
-		const firstTop = items[0].offsetTop;
+		const availableWidth = el.getBoundingClientRect().width;
+		const previousFlex = el.style.flex;
+		const previousWidth = el.style.width;
+		el.style.flex = `0 0 ${availableWidth}px`;
+		el.style.width = `${availableWidth}px`;
+		el.getBoundingClientRect();
+		const computedStyle = window.getComputedStyle(el);
+		const gap = Number.parseFloat(computedStyle.columnGap) || Number.parseFloat(computedStyle.gap) || 0;
+		const leadingEl = el.querySelector("[data-filter-leading]");
+		const toggle = el.querySelector("[data-filter-toggle]");
+		const reset = el.querySelector("[data-filter-reset]");
+		const addWidth = (current, next) => {
+			if (next <= 0) return current;
+			if (current === 0) return next;
+			return current + gap + next;
+		};
+		const leadingWidth = leadingEl?.offsetWidth ?? 0;
+		const itemWidths = items.map((item) => item.offsetWidth);
+		const toggleWidth = toggle?.offsetWidth ?? 0;
+		const resetWidth = reset?.offsetWidth ?? 0;
+		if (itemWidths.reduce((width, itemWidth) => addWidth(width, itemWidth), addWidth(leadingWidth, resetWidth)) <= availableWidth) {
+			el.style.flex = previousFlex;
+			el.style.width = previousWidth;
+			restoreList.forEach((node) => node.classList.add("hidden"));
+			setVisibleCount(null);
+			return;
+		}
+		const trailingWidth = addWidth(addWidth(0, toggleWidth), resetWidth);
+		let usedWidth = leadingWidth;
 		let count = 0;
-		for (const item of Array.from(items)) {
-			if (item.offsetTop > firstTop) break;
+		for (const itemWidth of itemWidths) {
+			const nextWidth = addWidth(usedWidth, itemWidth);
+			if (addWidth(nextWidth, trailingWidth) > availableWidth) break;
+			usedWidth = nextWidth;
 			count++;
 		}
-		const btn = el.querySelector("[data-filter-toggle]");
-		if (btn && count < items.length && count > 0) {
-			if (btn.offsetTop > firstTop) count--;
-		}
-		el.style.flex = "";
+		el.style.flex = previousFlex;
+		el.style.width = previousWidth;
 		restoreList.forEach((node) => node.classList.add("hidden"));
-		setVisibleCount(count >= items.length ? null : count);
+		setVisibleCount(count);
 	}, []);
 	React.useLayoutEffect(() => {
 		if (!mounted) return;
@@ -2764,6 +2797,9 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	}, [
 		mounted,
 		filterColumns.length,
+		hasLeading,
+		hasFilters,
+		filterMeasureKey,
 		calcVisibleCount
 	]);
 	React.useEffect(() => {
@@ -2786,6 +2822,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 	}, [
 		mounted,
 		filterColumns.length,
+		hasLeading,
 		calcVisibleCount
 	]);
 	if (!mounted) return null;
@@ -2793,7 +2830,11 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 		ref: containerRef,
 		className: "flex flex-1 flex-wrap items-center gap-2 min-w-0",
 		children: [
-			leading,
+			leading != null ? /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				"data-filter-leading": true,
+				children: leading
+			}) : null,
 			filterColumns.map((column, index) => {
 				const meta = column.columnDef.meta;
 				const value = getFilterValue(column.id);
@@ -2857,6 +2898,7 @@ function AutoTableSimpleFilters({ table, shallow = false, filters: externalFilte
 				children: expanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
 			}),
 			hasFilters && /* @__PURE__ */ jsxs(Button, {
+				"data-filter-reset": true,
 				variant: "outline",
 				size: "sm",
 				className: "h-8 border-dashed shrink-0",
@@ -4771,7 +4813,7 @@ function AutoTable({ schema, data, pageCount = 1, overrides, enableRowSelection
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex w-full items-start justify-between gap-2 p-1",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-1 items-start gap-2 min-h-[40px]",
+					className: "flex min-h-[40px] min-w-0 flex-1 items-start gap-2",
 					"data-filter-parent": true,
 					children: [
 						currentMode !== "simple" && searchInput,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordrhyme/auto-crud",
   "type": "module",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Schema-first CRUD components with auto-generated tables and forms",
   "author": "wordrhyme",
   "license": "MIT",
@@ -66,8 +66,8 @@
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
     "@pixpilot/formily-shadcn": "1.11.20",
-    "@pixpilot/shadcn-ui": "1.21.1",
-    "@pixpilot/shadcn": "1.2.7"
+    "@pixpilot/shadcn": "1.2.7",
+    "@pixpilot/shadcn-ui": "1.21.1"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.90.15",
@@ -82,10 +82,10 @@
     "react-dom": "19.2.4",
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
+    "@internal/prettier-config": "0.0.1",
     "@internal/eslint-config": "0.3.0",
     "@internal/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
-    "@internal/prettier-config": "0.0.1",
     "@internal/vitest-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",