@povio/ui 3.2.4-rc.4 → 3.3.0-rc.2

package/dist/components/inputs/Selection/Select/QuerySelect.js

@@ -8,10 +8,9 @@ import { useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/QuerySelect.tsx
-var LoadedQuerySelectContent = (t0) => {
+var QuerySelectContent = (t0) => {
 	const $ = c(31);
-	const { query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially: t1, ...props } = t0;
-	const isQueryEnabledInitially = t1 === void 0 ? false : t1;
+	const { query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, ...props } = t0;
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
 	const isSearchable = props.isSearchable ?? ui.select.isSearchable;
@@ -22,44 +21,44 @@ var LoadedQuerySelectContent = (t0) => {
 		mapInitialToSelectItem: props.mapInitialToSelectItem
 	});
 	const shouldEnableInitialQuery = selectedIdsToResolve.count > 0;
-	let t2;
+	let t1;
 	if ($[0] !== queryMap) {
-		t2 = (data) => getQueryItems(data, queryMap);
+		t1 = (data) => getQueryItems(data, queryMap);
 		$[0] = queryMap;
-		$[1] = t2;
-	} else t2 = $[1];
-	const t3 = resolveSelectedItemsWithIds ?? ui.querySelect?.resolveSelectedItemsWithIds;
-	const t4 = isSearchable ? search : void 0;
-	const t5 = isQueryEnabledInitially || shouldEnableInitialQuery ? false : selectedIdsToResolve.isResolvedByInitialSelection || (props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled);
-	let t6;
-	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== selectedIdsToResolve.items || $[6] !== t2 || $[7] !== t3 || $[8] !== t4 || $[9] !== t5) {
-		t6 = {
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = resolveSelectedItemsWithIds ?? ui.querySelect?.resolveSelectedItemsWithIds;
+	const t3 = isSearchable ? search : void 0;
+	const t4 = shouldEnableInitialQuery ? false : props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
+	let t5;
+	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== selectedIdsToResolve.items || $[6] !== t1 || $[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
+		t5 = {
 			query,
 			queryParams,
 			queryOptions,
-			mapItems: t2,
-			resolveSelectedItemsWithIds: t3,
-			search: t4,
-			initialQueryState: t5,
+			mapItems: t1,
+			resolveSelectedItemsWithIds: t2,
+			search: t3,
+			initialQueryState: t4,
 			selectedIdsToResolve: selectedIdsToResolve.items
 		};
 		$[2] = query;
 		$[3] = queryOptions;
 		$[4] = queryParams;
 		$[5] = selectedIdsToResolve.items;
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = t4;
-		$[9] = t5;
-		$[10] = t6;
-	} else t6 = $[10];
-	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete(t6);
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete(t5);
 	let onSearchChange;
 	let selectProps;
 	if ($[11] !== props) {
-		const { isInitialQueryDisabled: _, onSearchChange: t7, ...t8 } = props;
-		onSearchChange = t7;
-		selectProps = t8;
+		const { isInitialQueryDisabled: _, onSearchChange: t6, ...t7 } = props;
+		onSearchChange = t6;
+		selectProps = t7;
 		$[11] = props;
 		$[12] = onSearchChange;
 		$[13] = selectProps;
@@ -67,9 +66,9 @@ var LoadedQuerySelectContent = (t0) => {
 		onSearchChange = $[12];
 		selectProps = $[13];
 	}
-	let t7;
+	let t6;
 	if ($[14] !== handleEnableQuery || $[15] !== onSearchChange || $[16] !== setSearch) {
-		t7 = (value_0) => {
+		t6 = (value_0) => {
 			setSearch(value_0);
 			handleEnableQuery();
 			onSearchChange?.(value_0);
@@ -77,33 +76,33 @@ var LoadedQuerySelectContent = (t0) => {
 		$[14] = handleEnableQuery;
 		$[15] = onSearchChange;
 		$[16] = setSearch;
-		$[17] = t7;
-	} else t7 = $[17];
-	const handleSearchChange = t7;
-	const t8 = props.searchDebounceDelay ?? ui.querySelect?.searchDebounceDelay;
-	let t9;
+		$[17] = t6;
+	} else t6 = $[17];
+	const handleSearchChange = t6;
+	const t7 = props.searchDebounceDelay ?? ui.querySelect?.searchDebounceDelay;
+	let t8;
 	if ($[18] !== handleSearchChange || $[19] !== isSearchable) {
-		t9 = isSearchable && {
+		t8 = isSearchable && {
 			isClientSearchDisabled: true,
 			onSearchChange: handleSearchChange
 		};
 		$[18] = handleSearchChange;
 		$[19] = isSearchable;
-		$[20] = t9;
-	} else t9 = $[20];
-	let t10;
-	if ($[21] !== fetchNextPage || $[22] !== handleEnableQuery || $[23] !== hasNextPage || $[24] !== isLoading || $[25] !== items || $[26] !== selectProps || $[27] !== t8 || $[28] !== t9 || $[29] !== totalItems) {
-		t10 = /* @__PURE__ */ jsx(Select, {
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== fetchNextPage || $[22] !== handleEnableQuery || $[23] !== hasNextPage || $[24] !== isLoading || $[25] !== items || $[26] !== selectProps || $[27] !== t7 || $[28] !== t8 || $[29] !== totalItems) {
+		t9 = /* @__PURE__ */ jsx(Select, {
 			...selectProps,
 			items,
 			isLoading,
 			totalItems,
 			hasLoadMore: hasNextPage,
 			onLoadMore: fetchNextPage,
-			searchDebounceDelay: t8,
+			searchDebounceDelay: t7,
 			onMouseEnter: handleEnableQuery,
 			onFocusCapture: handleEnableQuery,
-			...t9
+			...t8
 		});
 		$[21] = fetchNextPage;
 		$[22] = handleEnableQuery;
@@ -111,64 +110,12 @@ var LoadedQuerySelectContent = (t0) => {
 		$[24] = isLoading;
 		$[25] = items;
 		$[26] = selectProps;
-		$[27] = t8;
-		$[28] = t9;
+		$[27] = t7;
+		$[28] = t8;
 		$[29] = totalItems;
-		$[30] = t10;
-	} else t10 = $[30];
-	return t10;
-};
-var QuerySelectContent = (props) => {
-	const $ = c(9);
-	const [isQueryMounted, setIsQueryMounted] = useState(false);
-	const value = "value" in props ? props.value : void 0;
-	if (!getSelectionIdsToResolve({
-		initialSelection: props.initialSelection,
-		value,
-		mapInitialToSelectItem: props.mapInitialToSelectItem
-	}).isResolvedByInitialSelection || isQueryMounted) {
-		let t0;
-		if ($[0] !== isQueryMounted || $[1] !== props) {
-			t0 = /* @__PURE__ */ jsx(LoadedQuerySelectContent, {
-				...props,
-				isQueryEnabledInitially: isQueryMounted
-			});
-			$[0] = isQueryMounted;
-			$[1] = props;
-			$[2] = t0;
-		} else t0 = $[2];
-		return t0;
-	}
-	let selectProps;
-	if ($[3] !== props) {
-		const { query: _, queryParams: _queryParams, queryOptions: _queryOptions, queryMap: _queryMap, resolveSelectedItemsWithIds: _resolveSelectedItemsWithIds, isInitialQueryDisabled: _isInitialQueryDisabled, ...t0 } = props;
-		selectProps = t0;
-		$[3] = props;
-		$[4] = selectProps;
-	} else selectProps = $[4];
-	let t0;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = () => setIsQueryMounted(true);
-		$[5] = t0;
-	} else t0 = $[5];
-	const mountQuery = t0;
-	let t1;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = [];
-		$[6] = t1;
-	} else t1 = $[6];
-	let t2;
-	if ($[7] !== selectProps) {
-		t2 = /* @__PURE__ */ jsx(Select, {
-			...selectProps,
-			items: t1,
-			onMouseEnter: mountQuery,
-			onFocusCapture: mountQuery
-		});
-		$[7] = selectProps;
-		$[8] = t2;
-	} else t2 = $[8];
-	return t2;
+		$[30] = t9;
+	} else t9 = $[30];
+	return t9;
 };
 var QuerySelect = (props) => {
 	const $ = c(16);

package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts

@@ -9,7 +9,6 @@ export declare const getSelectionIdsToResolve: <TInitialSelectItem, TKey extends
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
 }) => {
     count: number;
-    isResolvedByInitialSelection: boolean;
     items: TKey[];
 };
 export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];

package/dist/components/inputs/Selection/shared/querySelect.utils.js

@@ -26,7 +26,6 @@ var getSelectionIdsToResolve = ({ initialSelection, value, mapInitialToSelectIte
 	const items = Array.from(new Set([...missingLabelInitialSelectionIds, ...values.filter((id) => !labeledInitialSelectionIds.has(id))]));
 	return {
 		count: items.length,
-		isResolvedByInitialSelection: values.length > 0 && values.every((id) => labeledInitialSelectionIds.has(id)),
 		items
 	};
 };

package/dist/components/inputs/Selection/shared/select.context.js

@@ -135,26 +135,16 @@ var SelectContext;
 			triggerBlurOnChange
 		]);
 		const onClear = useCallback(() => {
-			if (selectedIds.length === 0) {
-				const newFieldState_2 = {
-					...fieldState,
-					inputValue: "",
-					searchValue: ""
-				};
-				setFieldState(newFieldState_2);
-				emitStateChanges(newFieldState_2, true);
-				setShowAll(true);
+			if (!valueRef.current || Array.isArray(valueRef.current) && valueRef.current.length === 0) {
+				setFieldState((prev) => ({
+					...prev,
+					inputValue: ""
+				}));
 				return;
 			}
 			if (isMultiple) onChange([]);
 			else onChange(null);
-		}, [
-			emitStateChanges,
-			fieldState,
-			isMultiple,
-			onChange,
-			selectedIds.length
-		]);
+		}, [isMultiple, onChange]);
 		const onSelectAll = useCallback(() => {
 			onChange(selectableListItems.map(({ id: id_4 }) => id_4));
 		}, [selectableListItems, onChange]);
@@ -167,13 +157,13 @@ var SelectContext;
 		]);
 		const onBlur = useCallback(() => {
 			if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
-				const newFieldState_3 = {
+				const newFieldState_2 = {
 					...fieldState,
 					inputValue: "",
 					searchValue: ""
 				};
-				setFieldState(newFieldState_3);
-				emitStateChanges(newFieldState_3);
+				setFieldState(newFieldState_2);
+				emitStateChanges(newFieldState_2);
 				setShowAll(true);
 			}
 			fieldOnBlur?.({});

package/dist/components/inputs/shared/InputClear.js

@@ -1,5 +1,7 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
+import { buttonIconSizeDefinition } from "../../buttons/Button/button.cva.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import "../../../config/i18n.js";
 import { c } from "react/compiler-runtime";
@@ -8,56 +10,70 @@ import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
 var InputClear = (t0) => {
-	const $ = c(12);
+	const $ = c(16);
 	const { onClear, className, style, show, renderStatic } = t0;
-	const alwaysShowClear = UIConfig.useConfig().input.alwaysShowClear;
+	const ui = UIConfig.useConfig();
+	const buttonIconSizeCva = UIOverrides.useCva("button.iconSize", buttonIconSizeDefinition);
+	const alwaysShowClear = ui.input.alwaysShowClear;
 	let clearClassName;
 	let t1;
-	if ($[0] !== alwaysShowClear || $[1] !== className || $[2] !== renderStatic || $[3] !== show || $[4] !== style) {
+	if ($[0] !== alwaysShowClear || $[1] !== buttonIconSizeCva || $[2] !== className || $[3] !== renderStatic || $[4] !== show || $[5] !== style) {
 		t1 = Symbol.for("react.early_return_sentinel");
 		bb0: {
 			clearClassName = clsx("relative z-raised flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className);
 			if (renderStatic) {
-				let t2;
-				if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-					t2 = /* @__PURE__ */ jsx(CloseIcon, { className: "h-6 w-6 shrink-0" });
-					$[7] = t2;
-				} else t2 = $[7];
+				const t2 = clsx("group inline-flex items-center justify-center border border-solid border-support-transparent-outline", "rounded-button-rounding-s p-0 text-interactive-text-secondary-idle", clearClassName);
+				let t3;
+				if ($[8] !== buttonIconSizeCva) {
+					t3 = buttonIconSizeCva({
+						size: "none",
+						className: "shrink-0"
+					});
+					$[8] = buttonIconSizeCva;
+					$[9] = t3;
+				} else t3 = $[9];
+				let t4;
+				if ($[10] !== t3) {
+					t4 = /* @__PURE__ */ jsx(CloseIcon, { className: t3 });
+					$[10] = t3;
+					$[11] = t4;
+				} else t4 = $[11];
 				t1 = /* @__PURE__ */ jsx("button", {
 					type: "button",
 					"aria-hidden": "true",
 					tabIndex: -1,
-					className: clsx("group inline-flex items-center justify-center border border-solid border-support-transparent-outline", "rounded-button-rounding-s p-0 text-interactive-text-secondary-idle", clearClassName),
+					className: t2,
 					style,
-					children: t2
+					children: t4
 				});
 				break bb0;
 			}
 		}
 		$[0] = alwaysShowClear;
-		$[1] = className;
-		$[2] = renderStatic;
-		$[3] = show;
-		$[4] = style;
-		$[5] = clearClassName;
-		$[6] = t1;
+		$[1] = buttonIconSizeCva;
+		$[2] = className;
+		$[3] = renderStatic;
+		$[4] = show;
+		$[5] = style;
+		$[6] = clearClassName;
+		$[7] = t1;
 	} else {
-		clearClassName = $[5];
-		t1 = $[6];
+		clearClassName = $[6];
+		t1 = $[7];
 	}
 	if (t1 !== Symbol.for("react.early_return_sentinel")) return t1;
 	let t2;
-	if ($[8] !== clearClassName || $[9] !== onClear || $[10] !== style) {
+	if ($[12] !== clearClassName || $[13] !== onClear || $[14] !== style) {
 		t2 = /* @__PURE__ */ jsx(InputClearButton, {
 			onClear,
 			className: clearClassName,
 			style
 		});
-		$[8] = clearClassName;
-		$[9] = onClear;
-		$[10] = style;
-		$[11] = t2;
-	} else t2 = $[11];
+		$[12] = clearClassName;
+		$[13] = onClear;
+		$[14] = style;
+		$[15] = t2;
+	} else t2 = $[15];
 	return t2;
 };
 var InputClearButton = (t0) => {

package/dist/components/inputs/shared/input.cva.js

@@ -210,7 +210,7 @@ var inputSizeDefinition = UIOverrides.defineConfig({
 	}
 });
 var inputContentWrapperDefinition = UIOverrides.defineConfig({
-	base: ["flex min-w-0 w-full"],
+	base: ["flex w-full"],
 	config: {
 		variants: { as: {
 			default: "",

package/dist/components/shared/pagination/minWidth.cva.d.ts

@@ -1,3 +1,3 @@
 export declare const minWidth: (props?: ({
-    size?: "xs" | "s" | "m" | "l" | "xxs" | null | undefined;
+    size?: "s" | "xs" | "m" | "l" | "xxs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/table/Table.d.ts

@@ -1,7 +1,9 @@
 import { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core';
 import { ColumnDef, ColumnOrderState, OnChangeFn, Table as ReactTable, Row, RowSelectionState, SortingState, VisibilityState } from '@tanstack/react-table';
 import { TFunction } from 'i18next';
-import { ComponentType, Dispatch, SetStateAction } from 'react';
+import { ComponentType, Dispatch, ReactNode, SetStateAction } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { InputDef } from '../inputs/Inputs/InputItem';
 import { TableRowVariantProps } from './table.cva';
 export type BulkSelectionActionsComponent<T> = ComponentType<{
     table: ReactTable<T>;
@@ -30,8 +32,12 @@ export interface TableProps<T> extends TableRowVariantProps {
     enableMultiRowSelection?: boolean | ((row: Row<T>) => boolean);
     defaultSelectedRows?: RowSelectionState;
     onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    filterForm?: UseFormReturn<Record<string, any>>;
+    filterDefs?: InputDef<any>[];
+    headerFilterCellClassName?: string;
+    emptyContent?: ReactNode;
 }
 export declare const RowDragHandleCell: ({ rowId }: {
     rowId: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const Table: <T>({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection, defaultSelectedRows, onRowSelectionChange, ...props }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <T>({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection, defaultSelectedRows, onRowSelectionChange, filterForm, filterDefs, headerFilterCellClassName, emptyContent, ...props }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/table/Table.js

@@ -8,6 +8,7 @@ import { tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, t
 import { CellText } from "./CellText.js";
 import { DragIndicatorIcon } from "../../assets/icons/DragIndicator.js";
 import { HeaderText } from "./HeaderText.js";
+import { TableColumnFilterRow } from "./TableColumnFilterRow.js";
 import { useTableNav } from "../../hooks/useTableNav.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -74,7 +75,7 @@ var DraggableRow = ({ row, showCellBorder, onRowClick, onDoubleClick, tableRowCv
 		})
 	});
 };
-var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, ...props }) => {
+var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, className, sorting, setSorting, columnOrder, setColumnOrder, columnVisibility, setColumnVisibility, bulkSelectionActions: ActionHeader, enableDragDrop = false, onDragEnd, onReorder, getRowId, enableRowSelection, enableMultiRowSelection = false, defaultSelectedRows, onRowSelectionChange, filterForm, filterDefs, headerFilterCellClassName, emptyContent, ...props }) => {
 	const tableRowCva = UIOverrides.useCva("table.rowCva", tableRowDefinition);
 	const theadCva = UIOverrides.useCva("table.theadCva", theadDefinition);
 	const tableHeadRowCva = UIOverrides.useCva("table.headRowCva", tableHeadRowDefinition);
@@ -172,50 +173,71 @@ var Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, classN
 	const selectedRows = table.getSelectedRowModel().rows;
 	const columnCount = table.getHeaderGroups()[0].headers.length;
 	const isAnyRowSelected = selectedRows.length > 0 && !!ActionHeader;
+	const showFilterRow = !!filterForm && !!filterDefs?.length && !isAnyRowSelected;
 	const hasOnClick = !!onRowClick || !!onDoubleClick;
 	const tableElement = /* @__PURE__ */ jsxs("table", {
-		className: clsx("w-full", className),
+		className: clsx("w-full", showFilterRow && "table-fixed", className),
 		...listeners,
 		children: [/* @__PURE__ */ jsxs("thead", {
 			className: clsx(theadCva({})),
 			"data-is-sticky": isSticky || void 0,
-			children: [/* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", {
-				ref: stickyRef,
-				className: "-mt-px block"
-			}) }), table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("tr", {
-				className: clsx(tableHeadRowCva({})),
-				children: headerGroup.headers.filter((header) => {
-					if (isAnyRowSelected && header.index > 0) return false;
-					return header.column.getIsVisible();
-				}).map((header_0, index) => {
-					const columnMeta = header_0.column.columnDef.meta ?? {};
-					return /* @__PURE__ */ jsx("th", {
-						colSpan: isAnyRowSelected ? columnCount : header_0.colSpan,
-						tabIndex: -1,
-						className: clsx(tableHeadDataCva({ hasRightBorder: index > 0 && showCellBorder }), columnMeta.headerClass, columnMeta.width),
-						children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs("button", {
-							type: "button",
-							"aria-label": "Sort column",
-							className: clsx("flex select-none items-center gap-1 text-text-default-1", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
-							onClick: header_0.column.getToggleSortingHandler(),
-							children: [typeof header_0.column.columnDef.header === "function" ? flexRender(header_0.column.columnDef.header, header_0.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header_0.column.columnDef.header }), {
-								asc: /* @__PURE__ */ jsx(ChevronUpIcon, {
-									width: 18,
-									height: 18
-								}),
-								desc: /* @__PURE__ */ jsx(ChevronDownIcon, {
-									width: 18,
-									height: 18
+			children: [
+				/* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("th", {
+					ref: stickyRef,
+					className: "-mt-px block"
+				}) }),
+				table.getHeaderGroups().map((headerGroup) => {
+					const visibleHeaders = headerGroup.headers.filter((header) => {
+						if (isAnyRowSelected && header.index > 0) return false;
+						return header.column.getIsVisible();
+					});
+					return /* @__PURE__ */ jsx("tr", {
+						className: clsx(tableHeadRowCva({})),
+						children: visibleHeaders.map((header_0, index) => {
+							const columnMeta = header_0.column.columnDef.meta ?? {};
+							return /* @__PURE__ */ jsx("th", {
+								colSpan: isAnyRowSelected ? columnCount : header_0.colSpan,
+								tabIndex: -1,
+								className: clsx(tableHeadDataCva({ hasRightBorder: index > 0 && showCellBorder }), columnMeta.headerClass, columnMeta.width),
+								children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									"aria-label": "Sort column",
+									className: clsx("flex select-none items-center gap-1 text-text-default-1", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
+									onClick: header_0.column.getToggleSortingHandler(),
+									children: [typeof header_0.column.columnDef.header === "function" ? flexRender(header_0.column.columnDef.header, header_0.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header_0.column.columnDef.header }), {
+										asc: /* @__PURE__ */ jsx(ChevronUpIcon, {
+											width: 18,
+											height: 18
+										}),
+										desc: /* @__PURE__ */ jsx(ChevronDownIcon, {
+											width: 18,
+											height: 18
+										})
+									}[header_0.column.getIsSorted()] ?? null]
 								})
-							}[header_0.column.getIsSorted()] ?? null]
+							}, header_0.id);
 						})
-					}, header_0.id);
+					}, headerGroup.id);
+				}),
+				showFilterRow && table.getHeaderGroups().map((headerGroup_0) => {
+					return /* @__PURE__ */ jsx(TableColumnFilterRow, {
+						headers: headerGroup_0.headers.filter((header_1) => header_1.column.getIsVisible()),
+						filterForm,
+						filterDefs,
+						tableHeadDataCva,
+						rowClassName: clsx(tableHeadRowCva({})),
+						cellClassName: headerFilterCellClassName,
+						showCellBorder
+					}, `${headerGroup_0.id}-filters`);
 				})
-			}, headerGroup.id))]
+			]
 		}), /* @__PURE__ */ jsx("tbody", {
 			ref,
 			className: "relative",
-			children: enableDragDrop ? /* @__PURE__ */ jsx(SortableContext, {
+			children: table.getRowModel().rows.length === 0 && emptyContent ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+				colSpan: columnCount,
+				children: emptyContent
+			}) }) : enableDragDrop ? /* @__PURE__ */ jsx(SortableContext, {
 				items: dataIds,
 				strategy: verticalListSortingStrategy,
 				children: table.getRowModel().rows.map((row_0) => /* @__PURE__ */ jsx(DraggableRow, {

package/dist/components/table/TableColumnFilterInput.d.ts

@@ -0,0 +1,9 @@
+import { InputDef } from '../inputs/Inputs/InputItem';
+import { UseFormReturn } from 'react-hook-form';
+interface TableColumnFilterInputProps<TFilterData extends Record<string, any>> {
+    form: UseFormReturn<TFilterData>;
+    inputDef: InputDef<TFilterData>;
+    className?: string;
+}
+export declare const TableColumnFilterInput: <TFilterData extends Record<string, any>>({ form, inputDef, className, }: TableColumnFilterInputProps<TFilterData>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/table/TableColumnFilterInput.js

@@ -0,0 +1,108 @@
+import { Inputs } from "../inputs/Inputs/Inputs.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/table/TableColumnFilterInput.tsx
+var TableColumnFilterInput = (t0) => {
+	const $ = c(28);
+	const { form, inputDef, className } = t0;
+	const filterKey = String(inputDef.name);
+	const inputProps = inputDef.props;
+	const t1 = inputProps?.className;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = clsx("w-full min-w-0 max-w-full", t1, "[&_label]:sr-only");
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = inputProps?.containerClassName;
+	let t4;
+	if ($[2] !== t3) {
+		t4 = clsx("w-full min-w-0 max-w-full", t3);
+		$[2] = t3;
+		$[3] = t4;
+	} else t4 = $[3];
+	const t5 = inputProps?.inputClassName;
+	let t6;
+	if ($[4] !== t5) {
+		t6 = clsx("min-w-0 max-w-full truncate", t5);
+		$[4] = t5;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== inputProps || $[7] !== t2 || $[8] !== t4 || $[9] !== t6) {
+		t7 = {
+			...inputProps,
+			as: "filter",
+			className: t2,
+			containerClassName: t4,
+			inputClassName: t6,
+			hideLabel: true,
+			isClearable: true,
+			placeholder: "",
+			size: "extra-small"
+		};
+		$[6] = inputProps;
+		$[7] = t2;
+		$[8] = t4;
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	const props = t7;
+	let t8;
+	if ($[11] !== filterKey || $[12] !== inputDef.label) {
+		t8 = typeof inputDef.label === "string" && inputDef.label.trim() ? inputDef.label : filterKey;
+		$[11] = filterKey;
+		$[12] = inputDef.label;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== inputDef || $[15] !== props || $[16] !== t8) {
+		t9 = {
+			...inputDef,
+			label: t8,
+			placeholder: "",
+			props
+		};
+		$[14] = inputDef;
+		$[15] = props;
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	const inlineInputDef = t9;
+	let t10;
+	if ($[18] !== className) {
+		t10 = clsx("w-full min-w-0 max-w-full [&>*]:w-full [&_*]:min-w-0", className);
+		$[18] = className;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== inlineInputDef) {
+		t11 = [inlineInputDef];
+		$[20] = inlineInputDef;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== form || $[23] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Inputs, {
+			form,
+			inputDefs: t11
+		});
+		$[22] = form;
+		$[23] = t11;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t10 || $[26] !== t12) {
+		t13 = /* @__PURE__ */ jsx("div", {
+			className: t10,
+			children: t12
+		});
+		$[25] = t10;
+		$[26] = t12;
+		$[27] = t13;
+	} else t13 = $[27];
+	return t13;
+};
+//#endregion
+export { TableColumnFilterInput };