@povio/ui 3.2.4-rc.3 → 3.3.0-rc.1

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/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 };

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

@@ -0,0 +1,5 @@
+interface TableColumnFilterPlaceholderProps {
+    label?: string;
+}
+export declare const TableColumnFilterPlaceholder: ({ label }: TableColumnFilterPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/table/TableColumnFilterPlaceholder.js

@@ -0,0 +1,41 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/table/TableColumnFilterPlaceholder.tsx
+var columnFilterPlaceholderClassName = clsx("h-[calc(var(--spacing-input-height-xs)*2+var(--text-label-2)*var(--text-label-2--line-height)+2px)]", "flex w-full min-w-0 items-center overflow-hidden", "rounded-input-rounding-default border border-solid border-input-outlined-outline-disabled/50", "bg-input-filled-idle px-input-side-xs text-label-2");
+var TableColumnFilterPlaceholder = (t0) => {
+	const $ = c(8);
+	const { label } = t0;
+	const t1 = label ? void 0 : true;
+	const t2 = label && "text-text-default-2";
+	let t3;
+	if ($[0] !== t2) {
+		t3 = clsx(columnFilterPlaceholderClassName, t2);
+		$[0] = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== label) {
+		t4 = label ? /* @__PURE__ */ jsx("span", {
+			className: "min-w-0 truncate",
+			children: label
+		}) : null;
+		$[2] = label;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== t1 || $[5] !== t3 || $[6] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			"aria-hidden": t1,
+			className: t3,
+			children: t4
+		});
+		$[4] = t1;
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	return t5;
+};
+//#endregion
+export { TableColumnFilterPlaceholder };

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

@@ -0,0 +1,16 @@
+import { Header } from '@tanstack/react-table';
+import { UseFormReturn } from 'react-hook-form';
+import { InputDef } from '../inputs/Inputs/InputItem';
+import { UIOverrides } from '../../config/uiOverrides.context';
+import { TableHeadDataVariantProps } from './table.cva';
+interface TableColumnFilterRowProps<T> {
+    headers: Header<T, unknown>[];
+    filterForm: UseFormReturn<Record<string, any>>;
+    filterDefs: InputDef<any>[];
+    tableHeadDataCva: UIOverrides.Cva<TableHeadDataVariantProps>;
+    rowClassName?: string;
+    cellClassName?: string;
+    showCellBorder?: boolean;
+}
+export declare const TableColumnFilterRow: <T>({ headers, filterForm, filterDefs, tableHeadDataCva, rowClassName, cellClassName, showCellBorder, }: TableColumnFilterRowProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/table/TableColumnFilterRow.js

@@ -0,0 +1,68 @@
+import { TableColumnFilterInput } from "./TableColumnFilterInput.js";
+import { TableColumnFilterPlaceholder } from "./TableColumnFilterPlaceholder.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/table/TableColumnFilterRow.tsx
+var getColumnMeta = (header) => header.column.columnDef.meta ?? {};
+var TableColumnFilterRow = (t0) => {
+	const $ = c(18);
+	const { headers, filterForm, filterDefs, tableHeadDataCva, rowClassName, cellClassName, showCellBorder } = t0;
+	let t1;
+	if ($[0] !== filterDefs) {
+		t1 = new Map((filterDefs ?? []).map(_temp));
+		$[0] = filterDefs;
+		$[1] = t1;
+	} else t1 = $[1];
+	const inputDefsByName = t1;
+	let t2;
+	if ($[2] !== cellClassName || $[3] !== filterForm || $[4] !== headers || $[5] !== inputDefsByName || $[6] !== showCellBorder || $[7] !== tableHeadDataCva) {
+		let t3;
+		if ($[9] !== cellClassName || $[10] !== filterForm || $[11] !== inputDefsByName || $[12] !== showCellBorder || $[13] !== tableHeadDataCva) {
+			t3 = (header, index) => {
+				const columnMeta = getColumnMeta(header);
+				const filterKey = columnMeta.filterKey ?? header.column.id;
+				const filterDef_0 = inputDefsByName.get(filterKey);
+				return /* @__PURE__ */ jsx("th", {
+					colSpan: header.colSpan,
+					tabIndex: -1,
+					className: clsx(tableHeadDataCva({ hasRightBorder: index > 0 && showCellBorder }), "min-w-0 max-w-full overflow-hidden", cellClassName, columnMeta.width),
+					children: filterDef_0 ? /* @__PURE__ */ jsx(TableColumnFilterInput, {
+						form: filterForm,
+						inputDef: filterDef_0
+					}) : /* @__PURE__ */ jsx(TableColumnFilterPlaceholder, {})
+				}, `${header.id}-filter`);
+			};
+			$[9] = cellClassName;
+			$[10] = filterForm;
+			$[11] = inputDefsByName;
+			$[12] = showCellBorder;
+			$[13] = tableHeadDataCva;
+			$[14] = t3;
+		} else t3 = $[14];
+		t2 = headers.map(t3);
+		$[2] = cellClassName;
+		$[3] = filterForm;
+		$[4] = headers;
+		$[5] = inputDefsByName;
+		$[6] = showCellBorder;
+		$[7] = tableHeadDataCva;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[15] !== rowClassName || $[16] !== t2) {
+		t3 = /* @__PURE__ */ jsx("tr", {
+			className: rowClassName,
+			children: t2
+		});
+		$[15] = rowClassName;
+		$[16] = t2;
+		$[17] = t3;
+	} else t3 = $[17];
+	return t3;
+};
+function _temp(filterDef) {
+	return [String(filterDef.name), filterDef];
+}
+//#endregion
+export { TableColumnFilterRow };

package/dist/config/uiConfig.context.d.ts

@@ -48,7 +48,6 @@ export declare namespace UIConfig {
             setDateValueOnDateSelection?: boolean;
             timeZone?: string;
             todayIconButtonComponent?: DatePickerProps["todayIconButtonComponent"];
-            allowPartialRange?: boolean;
         };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;