@lattice-php/lattice 0.3.0 → 0.5.0

package/dist/table/components/column-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-header.js","names":[],"sources":["../../../resources/js/table/components/column-header.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { HTMLAttributes } from \"react\";\nimport { alignJustify, alignText } from \"../align\";\nimport { getColumnAriaSort, getColumnSort } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nfunction SortIndicator({ sort }: { sort: TableSort | undefined }) {\n  if (sort?.direction === \"asc\") {\n    return <Icon name=\"arrow-up\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  if (sort?.direction === \"desc\") {\n    return <Icon name=\"arrow-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  return (\n    <Icon\n      name=\"chevrons-up-down\"\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-sm shrink-0 opacity-50\"\n    />\n  );\n}\n\nexport function ColumnHeader({\n  column,\n  processing,\n  resizeHandleProps,\n  sort,\n  state,\n}: {\n  column: TableColumn;\n  processing: boolean;\n  resizeHandleProps?: HTMLAttributes<HTMLDivElement>;\n  sort: (column: TableColumn) => void;\n  state: TableState;\n}) {\n  const columnSort = getColumnSort(state, column);\n  const align = column.align;\n\n  return (\n    <div\n      aria-sort={getColumnAriaSort(columnSort)}\n      className={cn(\n        \"relative min-w-0 px-4 py-3 pr-5 align-middle font-medium text-lt-muted-fg\",\n        alignText(align),\n      )}\n      role=\"columnheader\"\n    >\n      {column.sortable ? (\n        <button\n          type=\"button\"\n          aria-label={`Sort ${column.label}`}\n          className={cn(\"flex w-full items-center gap-1.5 font-medium\", alignJustify(align))}\n          data-test={`sort-${column.key}`}\n          disabled={processing}\n          onClick={() => sort(column)}\n        >\n          <span className={cn(\"min-w-0 flex-1 truncate\", alignText(align))}>{column.label}</span>\n          <SortIndicator sort={columnSort} />\n        </button>\n      ) : (\n        <span className={cn(\"block truncate\", alignText(align))}>{column.label}</span>\n      )}\n      {resizeHandleProps && <div {...resizeHandleProps} />}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAS,cAAc,EAAE,QAAyC;CAChE,IAAI,MAAM,cAAc,OACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAW,eAAY;EAAO,WAAU;CAA4B,CAAA;CAGxF,IAAI,MAAM,cAAc,QACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAa,eAAY;EAAO,WAAU;CAA4B,CAAA;CAG1F,OACE,oBAAC,MAAD;EACE,MAAK;EACL,eAAY;EACZ,WAAU;CACX,CAAA;AAEL;AAEA,SAAgB,aAAa,EAC3B,QACA,YACA,mBACA,MACA,SAOC;CACD,MAAM,aAAa,cAAc,OAAO,MAAM;CAC9C,MAAM,QAAQ,OAAO;CAErB,OACE,qBAAC,OAAD;EACE,aAAW,kBAAkB,UAAU;EACvC,WAAW,GACT,6EACA,UAAU,KAAK,CACjB;EACA,MAAK;YANP,CAQG,OAAO,WACN,qBAAC,UAAD;GACE,MAAK;GACL,cAAY,QAAQ,OAAO;GAC3B,WAAW,GAAG,gDAAgD,aAAa,KAAK,CAAC;GACjF,aAAW,QAAQ,OAAO;GAC1B,UAAU;GACV,eAAe,KAAK,MAAM;aAN5B,CAQE,oBAAC,QAAD;IAAM,WAAW,GAAG,2BAA2B,UAAU,KAAK,CAAC;cAAI,OAAO;GAAY,CAAA,GACtF,oBAAC,eAAD,EAAe,MAAM,WAAa,CAAA,CAC5B;OAER,oBAAC,QAAD;GAAM,WAAW,GAAG,kBAAkB,UAAU,KAAK,CAAC;aAAI,OAAO;EAAY,CAAA,GAE9E,qBAAqB,oBAAC,OAAD,EAAK,GAAI,kBAAoB,CAAA,CAChD;;AAET"}
+{"version":3,"file":"column-header.js","names":[],"sources":["../../../resources/js/table/components/column-header.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { HTMLAttributes } from \"react\";\nimport { alignJustify, alignText } from \"../align\";\nimport { getColumnAriaSort, getColumnSort } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nfunction SortIndicator({ sort }: { sort: TableSort | undefined }) {\n  if (sort?.direction === \"asc\") {\n    return <Icon name=\"arrow-up\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  if (sort?.direction === \"desc\") {\n    return <Icon name=\"arrow-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  return (\n    <Icon\n      name=\"chevrons-up-down\"\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-sm shrink-0 opacity-50\"\n    />\n  );\n}\n\nexport function ColumnHeader({\n  column,\n  processing,\n  resizeHandleProps,\n  sort,\n  state,\n}: {\n  column: TableColumn;\n  processing: boolean;\n  resizeHandleProps?: HTMLAttributes<HTMLDivElement>;\n  sort: (column: TableColumn) => void;\n  state: TableState;\n}) {\n  const columnSort = getColumnSort(state, column);\n  const align = column.align;\n\n  return (\n    <div\n      aria-sort={getColumnAriaSort(columnSort)}\n      className={cn(\n        \"relative min-w-0 px-4 py-3 pr-5 align-middle font-semibold text-lt-fg\",\n        alignText(align),\n      )}\n      role=\"columnheader\"\n    >\n      {column.sortable ? (\n        <button\n          type=\"button\"\n          aria-label={`Sort ${column.label}`}\n          className={cn(\"flex w-full items-center gap-1.5 font-semibold\", alignJustify(align))}\n          data-test={`sort-${column.key}`}\n          disabled={processing}\n          onClick={() => sort(column)}\n        >\n          <span className={cn(\"min-w-0 flex-1 truncate\", alignText(align))}>{column.label}</span>\n          <SortIndicator sort={columnSort} />\n        </button>\n      ) : (\n        <span className={cn(\"block truncate\", alignText(align))}>{column.label}</span>\n      )}\n      {resizeHandleProps && <div {...resizeHandleProps} />}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAS,cAAc,EAAE,QAAyC;CAChE,IAAI,MAAM,cAAc,OACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAW,eAAY;EAAO,WAAU;CAA4B,CAAA;CAGxF,IAAI,MAAM,cAAc,QACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAa,eAAY;EAAO,WAAU;CAA4B,CAAA;CAG1F,OACE,oBAAC,MAAD;EACE,MAAK;EACL,eAAY;EACZ,WAAU;CACX,CAAA;AAEL;AAEA,SAAgB,aAAa,EAC3B,QACA,YACA,mBACA,MACA,SAOC;CACD,MAAM,aAAa,cAAc,OAAO,MAAM;CAC9C,MAAM,QAAQ,OAAO;CAErB,OACE,qBAAC,OAAD;EACE,aAAW,kBAAkB,UAAU;EACvC,WAAW,GACT,yEACA,UAAU,KAAK,CACjB;EACA,MAAK;YANP,CAQG,OAAO,WACN,qBAAC,UAAD;GACE,MAAK;GACL,cAAY,QAAQ,OAAO;GAC3B,WAAW,GAAG,kDAAkD,aAAa,KAAK,CAAC;GACnF,aAAW,QAAQ,OAAO;GAC1B,UAAU;GACV,eAAe,KAAK,MAAM;aAN5B,CAQE,oBAAC,QAAD;IAAM,WAAW,GAAG,2BAA2B,UAAU,KAAK,CAAC;cAAI,OAAO;GAAY,CAAA,GACtF,oBAAC,eAAD,EAAe,MAAM,WAAa,CAAA,CAC5B;OAER,oBAAC,QAAD;GAAM,WAAW,GAAG,kBAAkB,UAAU,KAAK,CAAC;aAAI,OAAO;EAAY,CAAA,GAE9E,qBAAqB,oBAAC,OAAD,EAAK,GAAI,kBAAoB,CAAA,CAChD;;AAET"}

package/dist/table/components/filter-bar.d.ts

@@ -1,15 +1,16 @@
 import { FilterData, Option } from '../../types/generated';
-/**
- * The dedicated-filter toolbar above the table: a control per declared filter
- * plus a row of active-value indicator chips with individual remove and a
- * "Reset all" that clears every filter (column and dedicated alike).
- */
-export declare function FilterBar({ filters, values, processing, hasActiveFilters, onChange, onReset, onSearch, }: {
+export declare function FilterBar({ filters, values, processing, hasActiveFilters, onChange, onReset, }: {
     filters: FilterData[];
     values: Record<string, unknown>;
     processing: boolean;
     hasActiveFilters: boolean;
     onChange: (key: string, value: unknown) => void;
     onReset: () => void;
+}): import("react").JSX.Element | null;
+export declare function FilterMenu({ filters, values, processing, onChange, onSearch, }: {
+    filters: FilterData[];
+    values: Record<string, unknown>;
+    processing: boolean;
+    onChange: (key: string, value: unknown) => void;
     onSearch?: (filterKey: string, query: string) => Promise<Option[]>;
 }): import("react").JSX.Element;

package/dist/table/components/filter-bar.js

@@ -1,35 +1,17 @@
 import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/components/popover.js";
 import { filterOptions, isActiveFilterValue, stringProp } from "../filter-values.js";
 import { TableFilterControl } from "./filter-controls.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/filter-bar.tsx
-/**
-* The dedicated-filter toolbar above the table: a control per declared filter
-* plus a row of active-value indicator chips with individual remove and a
-* "Reset all" that clears every filter (column and dedicated alike).
-*/
-function FilterBar({ filters, values, processing, hasActiveFilters, onChange, onReset, onSearch }) {
+function FilterBar({ filters, values, processing, hasActiveFilters, onChange, onReset }) {
 	const { t } = useT("lattice");
 	const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col gap-2 border-b border-lt-border px-4 py-3",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex flex-wrap items-end gap-3",
-			children: filters.map((filter) => /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-1",
-				children: [filter.type !== "toggle" && /* @__PURE__ */ jsx("span", {
-					className: "text-xs font-medium text-lt-muted-fg",
-					children: filter.label
-				}), /* @__PURE__ */ jsx(TableFilterControl, {
-					filter,
-					value: values[filter.key],
-					processing,
-					onChange: (value) => onChange(filter.key, value),
-					onSearch: onSearch ? (query) => onSearch(filter.key, query) : void 0
-				})]
-			}, filter.key))
-		}), hasActiveFilters && /* @__PURE__ */ jsxs("div", {
+	if (!hasActiveFilters) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "border-b border-lt-border px-4 py-3",
+		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap items-center gap-2 text-sm",
 			children: [active.map((filter) => /* @__PURE__ */ jsxs("span", {
 				className: "inline-flex items-center gap-1.5 rounded-lt-sm bg-lt-muted px-2 py-1",
@@ -39,7 +21,7 @@ function FilterBar({ filters, values, processing, hasActiveFilters, onChange, on
 				})] }), /* @__PURE__ */ jsx("button", {
 					type: "button",
 					"data-test": `table-filter-chip-${filter.key}-remove`,
-					className: "inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-border disabled:opacity-50",
+					className: "inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-border disabled:opacity-50",
 					disabled: processing,
 					"aria-label": t("filter.remove", "Remove {{label}} filter", { label: filter.label }),
 					onClick: () => onChange(filter.key, void 0),
@@ -49,7 +31,7 @@ function FilterBar({ filters, values, processing, hasActiveFilters, onChange, on
 						className: "size-lt-icon-sm"
 					})
 				})]
-			}, filter.key)), hasActiveFilters && /* @__PURE__ */ jsx("button", {
+			}, filter.key)), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				"data-test": "table-filters-reset",
 				className: "text-lt-muted-fg underline-offset-2 hover:underline disabled:opacity-50",
@@ -57,9 +39,50 @@ function FilterBar({ filters, values, processing, hasActiveFilters, onChange, on
 				onClick: onReset,
 				children: t("filter.resetAll", "Reset all")
 			})]
-		})]
+		})
 	});
 }
+function FilterMenu({ filters, values, processing, onChange, onSearch }) {
+	const { t } = useT("lattice");
+	const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-label": t("filter.filters", "Filters"),
+			"data-test": "table-filters-menu",
+			className: "relative inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted hover:text-lt-fg disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lt-ring/50 data-[state=open]:bg-lt-muted data-[state=open]:text-lt-fg",
+			disabled: processing,
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: "filter",
+				"aria-hidden": "true",
+				className: "size-lt-icon-md"
+			}), active.length > 0 && /* @__PURE__ */ jsx("span", {
+				className: "absolute -right-1 -top-1 inline-flex size-3.5 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium leading-none text-lt-primary-fg",
+				children: active.length
+			})]
+		})
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		align: "end",
+		className: "w-80 p-4",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "grid gap-3",
+			children: filters.map((filter) => /* @__PURE__ */ jsxs("div", {
+				className: "grid gap-1",
+				children: [filter.type !== "toggle" && /* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium text-lt-muted-fg",
+					children: filter.label
+				}), /* @__PURE__ */ jsx(TableFilterControl, {
+					filter,
+					value: values[filter.key],
+					processing,
+					onChange: (value) => onChange(filter.key, value),
+					onSearch: onSearch ? (query) => onSearch(filter.key, query) : void 0
+				})]
+			}, filter.key))
+		})
+	})] });
+}
 function optionLabel(filter, value) {
 	return filterOptions(filter).find((option) => option.value === value)?.label ?? value;
 }
@@ -76,6 +99,6 @@ function displayValue(filter, value) {
 	return String(value);
 }
 //#endregion
-export { FilterBar };
+export { FilterBar, FilterMenu };
 
 //# sourceMappingURL=filter-bar.js.map

package/dist/table/components/filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-bar.js","names":[],"sources":["../../../resources/js/table/components/filter-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { FilterData, Option } from \"@lattice-php/lattice/types/generated\";\nimport { filterOptions, isActiveFilterValue, stringProp } from \"../filter-values\";\nimport { TableFilterControl } from \"./filter-controls\";\n\n/**\n * The dedicated-filter toolbar above the table: a control per declared filter\n * plus a row of active-value indicator chips with individual remove and a\n * \"Reset all\" that clears every filter (column and dedicated alike).\n */\nexport function FilterBar({\n  filters,\n  values,\n  processing,\n  hasActiveFilters,\n  onChange,\n  onReset,\n  onSearch,\n}: {\n  filters: FilterData[];\n  values: Record<string, unknown>;\n  processing: boolean;\n  hasActiveFilters: boolean;\n  onChange: (key: string, value: unknown) => void;\n  onReset: () => void;\n  onSearch?: (filterKey: string, query: string) => Promise<Option[]>;\n}) {\n  const { t } = useT(\"lattice\");\n  const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));\n\n  return (\n    <div className=\"flex flex-col gap-2 border-b border-lt-border px-4 py-3\">\n      <div className=\"flex flex-wrap items-end gap-3\">\n        {filters.map((filter) => (\n          <div key={filter.key} className=\"flex flex-col gap-1\">\n            {filter.type !== \"toggle\" && (\n              <span className=\"text-xs font-medium text-lt-muted-fg\">{filter.label}</span>\n            )}\n            <TableFilterControl\n              filter={filter}\n              value={values[filter.key]}\n              processing={processing}\n              onChange={(value) => onChange(filter.key, value)}\n              onSearch={onSearch ? (query) => onSearch(filter.key, query) : undefined}\n            />\n          </div>\n        ))}\n      </div>\n      {hasActiveFilters && (\n        <div className=\"flex flex-wrap items-center gap-2 text-sm\">\n          {active.map((filter) => (\n            <span\n              key={filter.key}\n              className=\"inline-flex items-center gap-1.5 rounded-lt-sm bg-lt-muted px-2 py-1\"\n            >\n              <span>\n                {`${filter.label}: `}\n                <span className=\"font-semibold\">{displayValue(filter, values[filter.key])}</span>\n              </span>\n              <button\n                type=\"button\"\n                data-test={`table-filter-chip-${filter.key}-remove`}\n                className=\"inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-border disabled:opacity-50\"\n                disabled={processing}\n                aria-label={t(\"filter.remove\", \"Remove {{label}} filter\", { label: filter.label })}\n                onClick={() => onChange(filter.key, undefined)}\n              >\n                <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n              </button>\n            </span>\n          ))}\n          {hasActiveFilters && (\n            <button\n              type=\"button\"\n              data-test=\"table-filters-reset\"\n              className=\"text-lt-muted-fg underline-offset-2 hover:underline disabled:opacity-50\"\n              disabled={processing}\n              onClick={onReset}\n            >\n              {t(\"filter.resetAll\", \"Reset all\")}\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction optionLabel(filter: FilterData, value: string): string {\n  return filterOptions(filter).find((option) => option.value === value)?.label ?? value;\n}\n\nfunction displayValue(filter: FilterData, value: unknown): string {\n  if (filter.type === \"select\") {\n    if (Array.isArray(value)) {\n      return value.map((item) => optionLabel(filter, String(item))).join(\", \");\n    }\n\n    return optionLabel(filter, String(value));\n  }\n\n  if (filter.type === \"ternary\") {\n    return value === \"true\"\n      ? stringProp(filter, \"trueLabel\", \"True\")\n      : stringProp(filter, \"falseLabel\", \"False\");\n  }\n\n  if (filter.type === \"date-range\" && value && typeof value === \"object\") {\n    const range = value as { from?: string; until?: string };\n\n    return [range.from, range.until].filter((part) => part).join(\" – \");\n  }\n\n  return String(value);\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAgB,UAAU,EACxB,SACA,QACA,YACA,kBACA,UACA,SACA,YASC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,SAAS,QAAQ,QAAQ,WAAW,oBAAoB,OAAO,OAAO,IAAI,CAAC;CAEjF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GAAK,WAAU;aACZ,QAAQ,KAAK,WACZ,qBAAC,OAAD;IAAsB,WAAU;cAAhC,CACG,OAAO,SAAS,YACf,oBAAC,QAAD;KAAM,WAAU;eAAwC,OAAO;IAAY,CAAA,GAE7E,oBAAC,oBAAD;KACU;KACR,OAAO,OAAO,OAAO;KACT;KACZ,WAAW,UAAU,SAAS,OAAO,KAAK,KAAK;KAC/C,UAAU,YAAY,UAAU,SAAS,OAAO,KAAK,KAAK,IAAI,KAAA;IAC/D,CAAA,CACE;MAXK,OAAO,GAWZ,CACN;EACE,CAAA,GACJ,oBACC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,OAAO,KAAK,WACX,qBAAC,QAAD;IAEE,WAAU;cAFZ,CAIE,qBAAC,QAAD,EAAA,UAAA,CACG,GAAG,OAAO,MAAM,KACjB,oBAAC,QAAD;KAAM,WAAU;eAAiB,aAAa,QAAQ,OAAO,OAAO,IAAI;IAAQ,CAAA,CAC5E,EAAA,CAAA,GACN,oBAAC,UAAD;KACE,MAAK;KACL,aAAW,qBAAqB,OAAO,IAAI;KAC3C,WAAU;KACV,UAAU;KACV,cAAY,EAAE,iBAAiB,2BAA2B,EAAE,OAAO,OAAO,MAAM,CAAC;KACjF,eAAe,SAAS,OAAO,KAAK,KAAA,CAAS;eAE7C,oBAAC,MAAD;MAAM,MAAK;MAAI,eAAY;MAAO,WAAU;KAAmB,CAAA;IACzD,CAAA,CACJ;MAjBC,OAAO,GAiBR,CACP,GACA,oBACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,UAAU;IACV,SAAS;cAER,EAAE,mBAAmB,WAAW;GAC3B,CAAA,CAEP;IAEJ;;AAET;AAEA,SAAS,YAAY,QAAoB,OAAuB;CAC9D,OAAO,cAAc,MAAM,EAAE,MAAM,WAAW,OAAO,UAAU,KAAK,GAAG,SAAS;AAClF;AAEA,SAAS,aAAa,QAAoB,OAAwB;CAChE,IAAI,OAAO,SAAS,UAAU;EAC5B,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO,MAAM,KAAK,SAAS,YAAY,QAAQ,OAAO,IAAI,CAAC,CAAC,EAAE,KAAK,IAAI;EAGzE,OAAO,YAAY,QAAQ,OAAO,KAAK,CAAC;CAC1C;CAEA,IAAI,OAAO,SAAS,WAClB,OAAO,UAAU,SACb,WAAW,QAAQ,aAAa,MAAM,IACtC,WAAW,QAAQ,cAAc,OAAO;CAG9C,IAAI,OAAO,SAAS,gBAAgB,SAAS,OAAO,UAAU,UAAU;EACtE,MAAM,QAAQ;EAEd,OAAO,CAAC,MAAM,MAAM,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,EAAE,KAAK,KAAK;CACpE;CAEA,OAAO,OAAO,KAAK;AACrB"}
+{"version":3,"file":"filter-bar.js","names":[],"sources":["../../../resources/js/table/components/filter-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/core/components/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { FilterData, Option } from \"@lattice-php/lattice/types/generated\";\nimport { filterOptions, isActiveFilterValue, stringProp } from \"../filter-values\";\nimport { TableFilterControl } from \"./filter-controls\";\n\nexport function FilterBar({\n  filters,\n  values,\n  processing,\n  hasActiveFilters,\n  onChange,\n  onReset,\n}: {\n  filters: FilterData[];\n  values: Record<string, unknown>;\n  processing: boolean;\n  hasActiveFilters: boolean;\n  onChange: (key: string, value: unknown) => void;\n  onReset: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));\n\n  if (!hasActiveFilters) {\n    return null;\n  }\n\n  return (\n    <div className=\"border-b border-lt-border px-4 py-3\">\n      <div className=\"flex flex-wrap items-center gap-2 text-sm\">\n        {active.map((filter) => (\n          <span\n            key={filter.key}\n            className=\"inline-flex items-center gap-1.5 rounded-lt-sm bg-lt-muted px-2 py-1\"\n          >\n            <span>\n              {`${filter.label}: `}\n              <span className=\"font-semibold\">{displayValue(filter, values[filter.key])}</span>\n            </span>\n            <button\n              type=\"button\"\n              data-test={`table-filter-chip-${filter.key}-remove`}\n              className=\"inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-border disabled:opacity-50\"\n              disabled={processing}\n              aria-label={t(\"filter.remove\", \"Remove {{label}} filter\", {\n                label: filter.label,\n              })}\n              onClick={() => onChange(filter.key, undefined)}\n            >\n              <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        ))}\n        <button\n          type=\"button\"\n          data-test=\"table-filters-reset\"\n          className=\"text-lt-muted-fg underline-offset-2 hover:underline disabled:opacity-50\"\n          disabled={processing}\n          onClick={onReset}\n        >\n          {t(\"filter.resetAll\", \"Reset all\")}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nexport function FilterMenu({\n  filters,\n  values,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filters: FilterData[];\n  values: Record<string, unknown>;\n  processing: boolean;\n  onChange: (key: string, value: unknown) => void;\n  onSearch?: (filterKey: string, query: string) => Promise<Option[]>;\n}) {\n  const { t } = useT(\"lattice\");\n  const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));\n  const filtersLabel = t(\"filter.filters\", \"Filters\");\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={filtersLabel}\n          data-test=\"table-filters-menu\"\n          className=\"relative inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted hover:text-lt-fg disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lt-ring/50 data-[state=open]:bg-lt-muted data-[state=open]:text-lt-fg\"\n          disabled={processing}\n        >\n          <Icon name=\"filter\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n          {active.length > 0 && (\n            <span className=\"absolute -right-1 -top-1 inline-flex size-3.5 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium leading-none text-lt-primary-fg\">\n              {active.length}\n            </span>\n          )}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-80 p-4\">\n        <div className=\"grid gap-3\">\n          {filters.map((filter) => (\n            <div key={filter.key} className=\"grid gap-1\">\n              {filter.type !== \"toggle\" && (\n                <span className=\"text-xs font-medium text-lt-muted-fg\">{filter.label}</span>\n              )}\n              <TableFilterControl\n                filter={filter}\n                value={values[filter.key]}\n                processing={processing}\n                onChange={(value) => onChange(filter.key, value)}\n                onSearch={onSearch ? (query) => onSearch(filter.key, query) : undefined}\n              />\n            </div>\n          ))}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nfunction optionLabel(filter: FilterData, value: string): string {\n  return filterOptions(filter).find((option) => option.value === value)?.label ?? value;\n}\n\nfunction displayValue(filter: FilterData, value: unknown): string {\n  if (filter.type === \"select\") {\n    if (Array.isArray(value)) {\n      return value.map((item) => optionLabel(filter, String(item))).join(\", \");\n    }\n\n    return optionLabel(filter, String(value));\n  }\n\n  if (filter.type === \"ternary\") {\n    return value === \"true\"\n      ? stringProp(filter, \"trueLabel\", \"True\")\n      : stringProp(filter, \"falseLabel\", \"False\");\n  }\n\n  if (filter.type === \"date-range\" && value && typeof value === \"object\") {\n    const range = value as { from?: string; until?: string };\n\n    return [range.from, range.until].filter((part) => part).join(\" – \");\n  }\n\n  return String(value);\n}\n"],"mappings":"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"}

package/dist/table/components/filter-controls.js

@@ -101,9 +101,9 @@ function MultiSelectControl({ filter, value, processing, onChange }) {
 				className: "size-lt-icon-sm shrink-0"
 			})]
 		}), open && /* @__PURE__ */ jsx("div", {
-			className: "absolute z-10 mt-1 min-w-full rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-md",
+			className: "absolute z-10 mt-1 min-w-full rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md",
 			children: filterOptions(filter).map((option) => /* @__PURE__ */ jsxs("label", {
-				className: "flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-lt-muted",
+				className: "flex cursor-pointer items-center gap-2 rounded-lt-sm px-2 py-1.5 text-sm hover:bg-lt-muted",
 				children: [/* @__PURE__ */ jsx(Checkbox, {
 					"aria-label": option.label,
 					"data-test": `table-filter-${filter.key}-${option.value}`,

package/dist/table/components/filter-controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-controls.js","names":[],"sources":["../../../resources/js/table/components/filter-controls.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useState } from \"react\";\nimport { Checkbox } from \"@lattice-php/lattice/core/components/checkbox\";\nimport { Combobox } from \"@lattice-php/lattice/core/components/combobox\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { FilterData, Option } from \"@lattice-php/lattice/types/generated\";\nimport { filterOptions, stringProp } from \"../filter-values\";\nimport { fieldClass } from \"./filter-value-input\";\n\nexport type DateRangeValue = { from?: string; until?: string };\n\nexport type FilterOptionSearch = (query: string) => Promise<Option[]>;\n\n/**\n * Renders the control for a single dedicated table filter, dispatching on the\n * filter's `type`. The current value comes from the table state; `onChange`\n * pushes a new value (an empty value clears the filter).\n */\nexport function TableFilterControl({\n  filter,\n  value,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  switch (filter.type) {\n    case \"select\":\n      if (filter.props.searchable === true && onSearch) {\n        return (\n          <SearchableSelectControl\n            filter={filter}\n            value={value}\n            processing={processing}\n            onChange={onChange}\n            onSearch={onSearch}\n          />\n        );\n      }\n\n      return filter.props.multiple === true ? (\n        <MultiSelectControl\n          filter={filter}\n          value={value}\n          processing={processing}\n          onChange={onChange}\n        />\n      ) : (\n        <SelectControl filter={filter} value={value} processing={processing} onChange={onChange} />\n      );\n    case \"ternary\":\n      return (\n        <TernaryControl filter={filter} value={value} processing={processing} onChange={onChange} />\n      );\n    case \"date-range\":\n      return (\n        <DateRangeControl\n          filter={filter}\n          value={value}\n          processing={processing}\n          onChange={onChange}\n        />\n      );\n    case \"toggle\":\n      return (\n        <ToggleControl filter={filter} value={value} processing={processing} onChange={onChange} />\n      );\n    default:\n      return null;\n  }\n}\n\nfunction SelectControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const placeholder = stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"));\n\n  return (\n    <select\n      aria-label={filter.label}\n      data-test={`table-filter-${filter.key}`}\n      className={fieldClass}\n      disabled={processing}\n      value={typeof value === \"string\" ? value : \"\"}\n      onChange={(event) => onChange(event.target.value)}\n    >\n      <option value=\"\">{placeholder}</option>\n      {filterOptions(filter).map((option) => (\n        <option key={option.value} value={option.value}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nfunction MultiSelectControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n  const selected = Array.isArray(value) ? (value as string[]) : [];\n\n  function toggle(optionValue: string): void {\n    const next = selected.includes(optionValue)\n      ? selected.filter((item) => item !== optionValue)\n      : [...selected, optionValue];\n\n    onChange(next);\n  }\n\n  const summary =\n    selected.length === 0\n      ? stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"))\n      : t(\"filter.selectedCount\", \"{{amount}} selected\", { amount: selected.length });\n\n  return (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        aria-label={filter.label}\n        aria-expanded={open}\n        data-test={`table-filter-${filter.key}`}\n        className={`${fieldClass} flex items-center justify-between gap-2`}\n        disabled={processing}\n        onClick={() => setOpen((current) => !current)}\n      >\n        <span className=\"truncate\">{summary}</span>\n        <Icon name=\"chevron-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-10 mt-1 min-w-full rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-md\">\n          {filterOptions(filter).map((option) => (\n            <label\n              key={option.value}\n              className=\"flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-lt-muted\"\n            >\n              <Checkbox\n                aria-label={option.label}\n                data-test={`table-filter-${filter.key}-${option.value}`}\n                checked={selected.includes(option.value)}\n                disabled={processing}\n                onCheckedChange={() => toggle(option.value)}\n              />\n              <span className=\"truncate\">{option.label}</span>\n            </label>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SearchableSelectControl({\n  filter,\n  value,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n  onSearch: FilterOptionSearch;\n}) {\n  const { t } = useT(\"lattice\");\n  const multiple = filter.props.multiple === true;\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[]>(() => filterOptions(filter));\n  const [loading, setLoading] = useState(false);\n\n  const selected = multiple\n    ? Array.isArray(value)\n      ? (value as string[])\n      : []\n    : typeof value === \"string\" && value !== \"\"\n      ? [value]\n      : [];\n\n  const labels = new Map(\n    [...filterOptions(filter), ...results].map((option) => [option.value, option.label]),\n  );\n  const summary =\n    selected.length === 0\n      ? stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"))\n      : multiple\n        ? t(\"filter.selectedCount\", \"{{amount}} selected\", { amount: selected.length })\n        : (labels.get(selected[0]) ?? selected[0]);\n\n  function search(query: string): void {\n    setLoading(true);\n    void onSearch(query).then((options) => {\n      setResults(options);\n      setLoading(false);\n    });\n  }\n\n  function choose(optionValue: string): void {\n    onChange(\n      multiple\n        ? selected.includes(optionValue)\n          ? selected.filter((item) => item !== optionValue)\n          : [...selected, optionValue]\n        : optionValue,\n    );\n  }\n\n  return (\n    <Combobox\n      contentClassName=\"w-60\"\n      loading={loading}\n      multiple={multiple}\n      onSearch={search}\n      onSelect={choose}\n      open={open}\n      onOpenChange={setOpen}\n      options={results}\n      searchLabel={t(\"filter.search\", \"Search\")}\n      selected={selected}\n      testId={`table-filter-${filter.key}`}\n      trigger={\n        <>\n          <span className=\"truncate\">{summary}</span>\n          <Icon name=\"chevron-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />\n        </>\n      }\n      triggerClassName={cn(fieldClass, \"flex items-center justify-between gap-2\")}\n      triggerProps={{\n        \"aria-label\": filter.label,\n        \"data-test\": `table-filter-${filter.key}`,\n        disabled: processing,\n      }}\n    />\n  );\n}\n\nfunction TernaryControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const placeholder = stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"));\n  const trueLabel = stringProp(filter, \"trueLabel\", t(\"filter.true\", \"True\"));\n  const falseLabel = stringProp(filter, \"falseLabel\", t(\"filter.false\", \"False\"));\n\n  return (\n    <select\n      aria-label={filter.label}\n      data-test={`table-filter-${filter.key}`}\n      className={fieldClass}\n      disabled={processing}\n      value={typeof value === \"string\" ? value : \"\"}\n      onChange={(event) => onChange(event.target.value)}\n    >\n      <option value=\"\">{placeholder}</option>\n      <option value=\"true\">{trueLabel}</option>\n      <option value=\"false\">{falseLabel}</option>\n    </select>\n  );\n}\n\nfunction DateRangeControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const range: DateRangeValue = value && typeof value === \"object\" ? (value as DateRangeValue) : {};\n\n  function commit(next: DateRangeValue): void {\n    onChange({ from: next.from ?? \"\", until: next.until ?? \"\" });\n  }\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      <input\n        type=\"date\"\n        aria-label={t(\"filter.from\", \"{{label}} from\", { label: filter.label })}\n        data-test={`table-filter-${filter.key}-from`}\n        className={fieldClass}\n        disabled={processing}\n        value={range.from ?? \"\"}\n        onChange={(event) => commit({ ...range, from: event.target.value })}\n      />\n      <span className=\"text-lt-muted-fg\" aria-hidden=\"true\">\n        –\n      </span>\n      <input\n        type=\"date\"\n        aria-label={t(\"filter.until\", \"{{label}} until\", { label: filter.label })}\n        data-test={`table-filter-${filter.key}-until`}\n        className={fieldClass}\n        disabled={processing}\n        value={range.until ?? \"\"}\n        onChange={(event) => commit({ ...range, until: event.target.value })}\n      />\n    </div>\n  );\n}\n\nfunction ToggleControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const checked = value === \"1\" || value === true || value === \"true\";\n\n  return (\n    <label className=\"flex h-9 cursor-pointer items-center gap-2 text-sm\">\n      <Checkbox\n        aria-label={filter.label}\n        data-test={`table-filter-${filter.key}`}\n        checked={checked}\n        disabled={processing}\n        onCheckedChange={(next) => onChange(next === true ? \"1\" : \"\")}\n      />\n      <span>{filter.label}</span>\n    </label>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,SAAgB,mBAAmB,EACjC,QACA,OACA,YACA,UACA,YAOC;CACD,QAAQ,OAAO,MAAf;EACE,KAAK;GACH,IAAI,OAAO,MAAM,eAAe,QAAQ,UACtC,OACE,oBAAC,yBAAD;IACU;IACD;IACK;IACF;IACA;GACX,CAAA;GAIL,OAAO,OAAO,MAAM,aAAa,OAC/B,oBAAC,oBAAD;IACU;IACD;IACK;IACF;GACX,CAAA,IAED,oBAAC,eAAD;IAAuB;IAAe;IAAmB;IAAsB;GAAW,CAAA;EAE9F,KAAK,WACH,OACE,oBAAC,gBAAD;GAAwB;GAAe;GAAmB;GAAsB;EAAW,CAAA;EAE/F,KAAK,cACH,OACE,oBAAC,kBAAD;GACU;GACD;GACK;GACF;EACX,CAAA;EAEL,KAAK,UACH,OACE,oBAAC,eAAD;GAAuB;GAAe;GAAmB;GAAsB;EAAW,CAAA;EAE9F,SACE,OAAO;CACX;AACF;AAEA,SAAS,cAAc,EACrB,QACA,OACA,YACA,YAMC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,cAAc,WAAW,QAAQ,eAAe,EAAE,cAAc,KAAK,CAAC;CAE5E,OACE,qBAAC,UAAD;EACE,cAAY,OAAO;EACnB,aAAW,gBAAgB,OAAO;EAClC,WAAW;EACX,UAAU;EACV,OAAO,OAAO,UAAU,WAAW,QAAQ;EAC3C,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;YANlD,CAQE,oBAAC,UAAD;GAAQ,OAAM;aAAI;EAAoB,CAAA,GACrC,cAAc,MAAM,EAAE,KAAK,WAC1B,oBAAC,UAAD;GAA2B,OAAO,OAAO;aACtC,OAAO;EACF,GAFK,OAAO,KAEZ,CACT,CACK;;AAEZ;AAEA,SAAS,mBAAmB,EAC1B,QACA,OACA,YACA,YAMC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,WAAW,MAAM,QAAQ,KAAK,IAAK,QAAqB,CAAC;CAE/D,SAAS,OAAO,aAA2B;EAKzC,SAJa,SAAS,SAAS,WAAW,IACtC,SAAS,QAAQ,SAAS,SAAS,WAAW,IAC9C,CAAC,GAAG,UAAU,WAAW,CAEhB;CACf;CAEA,MAAM,UACJ,SAAS,WAAW,IAChB,WAAW,QAAQ,eAAe,EAAE,cAAc,KAAK,CAAC,IACxD,EAAE,wBAAwB,uBAAuB,EAAE,QAAQ,SAAS,OAAO,CAAC;CAElF,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,UAAD;GACE,MAAK;GACL,cAAY,OAAO;GACnB,iBAAe;GACf,aAAW,gBAAgB,OAAO;GAClC,WAAW,GAAG,WAAW;GACzB,UAAU;GACV,eAAe,SAAS,YAAY,CAAC,OAAO;aAP9C,CASE,oBAAC,QAAD;IAAM,WAAU;cAAY;GAAc,CAAA,GAC1C,oBAAC,MAAD;IAAM,MAAK;IAAe,eAAY;IAAO,WAAU;GAA4B,CAAA,CAC7E;MACP,QACC,oBAAC,OAAD;GAAK,WAAU;aACZ,cAAc,MAAM,EAAE,KAAK,WAC1B,qBAAC,SAAD;IAEE,WAAU;cAFZ,CAIE,oBAAC,UAAD;KACE,cAAY,OAAO;KACnB,aAAW,gBAAgB,OAAO,IAAI,GAAG,OAAO;KAChD,SAAS,SAAS,SAAS,OAAO,KAAK;KACvC,UAAU;KACV,uBAAuB,OAAO,OAAO,KAAK;IAC3C,CAAA,GACD,oBAAC,QAAD;KAAM,WAAU;eAAY,OAAO;IAAY,CAAA,CAC1C;MAXA,OAAO,KAWP,CACR;EACE,CAAA,CAEJ;;AAET;AAEA,SAAS,wBAAwB,EAC/B,QACA,OACA,YACA,UACA,YAOC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,WAAW,OAAO,MAAM,aAAa;CAC3C,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,SAAS,cAAc,eAAyB,cAAc,MAAM,CAAC;CAC5E,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,MAAM,WAAW,WACb,MAAM,QAAQ,KAAK,IAChB,QACD,CAAC,IACH,OAAO,UAAU,YAAY,UAAU,KACrC,CAAC,KAAK,IACN,CAAC;CAEP,MAAM,SAAS,IAAI,IACjB,CAAC,GAAG,cAAc,MAAM,GAAG,GAAG,OAAO,EAAE,KAAK,WAAW,CAAC,OAAO,OAAO,OAAO,KAAK,CAAC,CACrF;CACA,MAAM,UACJ,SAAS,WAAW,IAChB,WAAW,QAAQ,eAAe,EAAE,cAAc,KAAK,CAAC,IACxD,WACE,EAAE,wBAAwB,uBAAuB,EAAE,QAAQ,SAAS,OAAO,CAAC,IAC3E,OAAO,IAAI,SAAS,EAAE,KAAK,SAAS;CAE7C,SAAS,OAAO,OAAqB;EACnC,WAAW,IAAI;EACf,SAAc,KAAK,EAAE,MAAM,YAAY;GACrC,WAAW,OAAO;GAClB,WAAW,KAAK;EAClB,CAAC;CACH;CAEA,SAAS,OAAO,aAA2B;EACzC,SACE,WACI,SAAS,SAAS,WAAW,IAC3B,SAAS,QAAQ,SAAS,SAAS,WAAW,IAC9C,CAAC,GAAG,UAAU,WAAW,IAC3B,WACN;CACF;CAEA,OACE,oBAAC,UAAD;EACE,kBAAiB;EACR;EACC;EACV,UAAU;EACV,UAAU;EACJ;EACN,cAAc;EACd,SAAS;EACT,aAAa,EAAE,iBAAiB,QAAQ;EAC9B;EACV,QAAQ,gBAAgB,OAAO;EAC/B,SACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;aAAY;EAAc,CAAA,GAC1C,oBAAC,MAAD;GAAM,MAAK;GAAe,eAAY;GAAO,WAAU;EAA4B,CAAA,CACnF,EAAA,CAAA;EAEJ,kBAAkB,GAAG,YAAY,yCAAyC;EAC1E,cAAc;GACZ,cAAc,OAAO;GACrB,aAAa,gBAAgB,OAAO;GACpC,UAAU;EACZ;CACD,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,QACA,OACA,YACA,YAMC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,cAAc,WAAW,QAAQ,eAAe,EAAE,cAAc,KAAK,CAAC;CAC5E,MAAM,YAAY,WAAW,QAAQ,aAAa,EAAE,eAAe,MAAM,CAAC;CAC1E,MAAM,aAAa,WAAW,QAAQ,cAAc,EAAE,gBAAgB,OAAO,CAAC;CAE9E,OACE,qBAAC,UAAD;EACE,cAAY,OAAO;EACnB,aAAW,gBAAgB,OAAO;EAClC,WAAW;EACX,UAAU;EACV,OAAO,OAAO,UAAU,WAAW,QAAQ;EAC3C,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;YANlD;GAQE,oBAAC,UAAD;IAAQ,OAAM;cAAI;GAAoB,CAAA;GACtC,oBAAC,UAAD;IAAQ,OAAM;cAAQ;GAAkB,CAAA;GACxC,oBAAC,UAAD;IAAQ,OAAM;cAAS;GAAmB,CAAA;EACpC;;AAEZ;AAEA,SAAS,iBAAiB,EACxB,QACA,OACA,YACA,YAMC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,QAAwB,SAAS,OAAO,UAAU,WAAY,QAA2B,CAAC;CAEhG,SAAS,OAAO,MAA4B;EAC1C,SAAS;GAAE,MAAM,KAAK,QAAQ;GAAI,OAAO,KAAK,SAAS;EAAG,CAAC;CAC7D;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,SAAD;IACE,MAAK;IACL,cAAY,EAAE,eAAe,kBAAkB,EAAE,OAAO,OAAO,MAAM,CAAC;IACtE,aAAW,gBAAgB,OAAO,IAAI;IACtC,WAAW;IACX,UAAU;IACV,OAAO,MAAM,QAAQ;IACrB,WAAW,UAAU,OAAO;KAAE,GAAG;KAAO,MAAM,MAAM,OAAO;IAAM,CAAC;GACnE,CAAA;GACD,oBAAC,QAAD;IAAM,WAAU;IAAmB,eAAY;cAAO;GAEhD,CAAA;GACN,oBAAC,SAAD;IACE,MAAK;IACL,cAAY,EAAE,gBAAgB,mBAAmB,EAAE,OAAO,OAAO,MAAM,CAAC;IACxE,aAAW,gBAAgB,OAAO,IAAI;IACtC,WAAW;IACX,UAAU;IACV,OAAO,MAAM,SAAS;IACtB,WAAW,UAAU,OAAO;KAAE,GAAG;KAAO,OAAO,MAAM,OAAO;IAAM,CAAC;GACpE,CAAA;EACE;;AAET;AAEA,SAAS,cAAc,EACrB,QACA,OACA,YACA,YAMC;CACD,MAAM,UAAU,UAAU,OAAO,UAAU,QAAQ,UAAU;CAE7D,OACE,qBAAC,SAAD;EAAO,WAAU;YAAjB,CACE,oBAAC,UAAD;GACE,cAAY,OAAO;GACnB,aAAW,gBAAgB,OAAO;GACzB;GACT,UAAU;GACV,kBAAkB,SAAS,SAAS,SAAS,OAAO,MAAM,EAAE;EAC7D,CAAA,GACD,oBAAC,QAAD,EAAA,UAAO,OAAO,MAAY,CAAA,CACrB;;AAEX"}
+{"version":3,"file":"filter-controls.js","names":[],"sources":["../../../resources/js/table/components/filter-controls.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useState } from \"react\";\nimport { Checkbox } from \"@lattice-php/lattice/core/components/checkbox\";\nimport { Combobox } from \"@lattice-php/lattice/core/components/combobox\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { FilterData, Option } from \"@lattice-php/lattice/types/generated\";\nimport { filterOptions, stringProp } from \"../filter-values\";\nimport { fieldClass } from \"./filter-value-input\";\n\nexport type DateRangeValue = { from?: string; until?: string };\n\nexport type FilterOptionSearch = (query: string) => Promise<Option[]>;\n\n/**\n * Renders the control for a single dedicated table filter, dispatching on the\n * filter's `type`. The current value comes from the table state; `onChange`\n * pushes a new value (an empty value clears the filter).\n */\nexport function TableFilterControl({\n  filter,\n  value,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  switch (filter.type) {\n    case \"select\":\n      if (filter.props.searchable === true && onSearch) {\n        return (\n          <SearchableSelectControl\n            filter={filter}\n            value={value}\n            processing={processing}\n            onChange={onChange}\n            onSearch={onSearch}\n          />\n        );\n      }\n\n      return filter.props.multiple === true ? (\n        <MultiSelectControl\n          filter={filter}\n          value={value}\n          processing={processing}\n          onChange={onChange}\n        />\n      ) : (\n        <SelectControl filter={filter} value={value} processing={processing} onChange={onChange} />\n      );\n    case \"ternary\":\n      return (\n        <TernaryControl filter={filter} value={value} processing={processing} onChange={onChange} />\n      );\n    case \"date-range\":\n      return (\n        <DateRangeControl\n          filter={filter}\n          value={value}\n          processing={processing}\n          onChange={onChange}\n        />\n      );\n    case \"toggle\":\n      return (\n        <ToggleControl filter={filter} value={value} processing={processing} onChange={onChange} />\n      );\n    default:\n      return null;\n  }\n}\n\nfunction SelectControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const placeholder = stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"));\n\n  return (\n    <select\n      aria-label={filter.label}\n      data-test={`table-filter-${filter.key}`}\n      className={fieldClass}\n      disabled={processing}\n      value={typeof value === \"string\" ? value : \"\"}\n      onChange={(event) => onChange(event.target.value)}\n    >\n      <option value=\"\">{placeholder}</option>\n      {filterOptions(filter).map((option) => (\n        <option key={option.value} value={option.value}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nfunction MultiSelectControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n  const selected = Array.isArray(value) ? (value as string[]) : [];\n\n  function toggle(optionValue: string): void {\n    const next = selected.includes(optionValue)\n      ? selected.filter((item) => item !== optionValue)\n      : [...selected, optionValue];\n\n    onChange(next);\n  }\n\n  const summary =\n    selected.length === 0\n      ? stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"))\n      : t(\"filter.selectedCount\", \"{{amount}} selected\", { amount: selected.length });\n\n  return (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        aria-label={filter.label}\n        aria-expanded={open}\n        data-test={`table-filter-${filter.key}`}\n        className={`${fieldClass} flex items-center justify-between gap-2`}\n        disabled={processing}\n        onClick={() => setOpen((current) => !current)}\n      >\n        <span className=\"truncate\">{summary}</span>\n        <Icon name=\"chevron-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-10 mt-1 min-w-full rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-lt-md\">\n          {filterOptions(filter).map((option) => (\n            <label\n              key={option.value}\n              className=\"flex cursor-pointer items-center gap-2 rounded-lt-sm px-2 py-1.5 text-sm hover:bg-lt-muted\"\n            >\n              <Checkbox\n                aria-label={option.label}\n                data-test={`table-filter-${filter.key}-${option.value}`}\n                checked={selected.includes(option.value)}\n                disabled={processing}\n                onCheckedChange={() => toggle(option.value)}\n              />\n              <span className=\"truncate\">{option.label}</span>\n            </label>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SearchableSelectControl({\n  filter,\n  value,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n  onSearch: FilterOptionSearch;\n}) {\n  const { t } = useT(\"lattice\");\n  const multiple = filter.props.multiple === true;\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[]>(() => filterOptions(filter));\n  const [loading, setLoading] = useState(false);\n\n  const selected = multiple\n    ? Array.isArray(value)\n      ? (value as string[])\n      : []\n    : typeof value === \"string\" && value !== \"\"\n      ? [value]\n      : [];\n\n  const labels = new Map(\n    [...filterOptions(filter), ...results].map((option) => [option.value, option.label]),\n  );\n  const summary =\n    selected.length === 0\n      ? stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"))\n      : multiple\n        ? t(\"filter.selectedCount\", \"{{amount}} selected\", { amount: selected.length })\n        : (labels.get(selected[0]) ?? selected[0]);\n\n  function search(query: string): void {\n    setLoading(true);\n    void onSearch(query).then((options) => {\n      setResults(options);\n      setLoading(false);\n    });\n  }\n\n  function choose(optionValue: string): void {\n    onChange(\n      multiple\n        ? selected.includes(optionValue)\n          ? selected.filter((item) => item !== optionValue)\n          : [...selected, optionValue]\n        : optionValue,\n    );\n  }\n\n  return (\n    <Combobox\n      contentClassName=\"w-60\"\n      loading={loading}\n      multiple={multiple}\n      onSearch={search}\n      onSelect={choose}\n      open={open}\n      onOpenChange={setOpen}\n      options={results}\n      searchLabel={t(\"filter.search\", \"Search\")}\n      selected={selected}\n      testId={`table-filter-${filter.key}`}\n      trigger={\n        <>\n          <span className=\"truncate\">{summary}</span>\n          <Icon name=\"chevron-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />\n        </>\n      }\n      triggerClassName={cn(fieldClass, \"flex items-center justify-between gap-2\")}\n      triggerProps={{\n        \"aria-label\": filter.label,\n        \"data-test\": `table-filter-${filter.key}`,\n        disabled: processing,\n      }}\n    />\n  );\n}\n\nfunction TernaryControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const placeholder = stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"));\n  const trueLabel = stringProp(filter, \"trueLabel\", t(\"filter.true\", \"True\"));\n  const falseLabel = stringProp(filter, \"falseLabel\", t(\"filter.false\", \"False\"));\n\n  return (\n    <select\n      aria-label={filter.label}\n      data-test={`table-filter-${filter.key}`}\n      className={fieldClass}\n      disabled={processing}\n      value={typeof value === \"string\" ? value : \"\"}\n      onChange={(event) => onChange(event.target.value)}\n    >\n      <option value=\"\">{placeholder}</option>\n      <option value=\"true\">{trueLabel}</option>\n      <option value=\"false\">{falseLabel}</option>\n    </select>\n  );\n}\n\nfunction DateRangeControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const range: DateRangeValue = value && typeof value === \"object\" ? (value as DateRangeValue) : {};\n\n  function commit(next: DateRangeValue): void {\n    onChange({ from: next.from ?? \"\", until: next.until ?? \"\" });\n  }\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      <input\n        type=\"date\"\n        aria-label={t(\"filter.from\", \"{{label}} from\", { label: filter.label })}\n        data-test={`table-filter-${filter.key}-from`}\n        className={fieldClass}\n        disabled={processing}\n        value={range.from ?? \"\"}\n        onChange={(event) => commit({ ...range, from: event.target.value })}\n      />\n      <span className=\"text-lt-muted-fg\" aria-hidden=\"true\">\n        –\n      </span>\n      <input\n        type=\"date\"\n        aria-label={t(\"filter.until\", \"{{label}} until\", { label: filter.label })}\n        data-test={`table-filter-${filter.key}-until`}\n        className={fieldClass}\n        disabled={processing}\n        value={range.until ?? \"\"}\n        onChange={(event) => commit({ ...range, until: event.target.value })}\n      />\n    </div>\n  );\n}\n\nfunction ToggleControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const checked = value === \"1\" || value === true || value === \"true\";\n\n  return (\n    <label className=\"flex h-9 cursor-pointer items-center gap-2 text-sm\">\n      <Checkbox\n        aria-label={filter.label}\n        data-test={`table-filter-${filter.key}`}\n        checked={checked}\n        disabled={processing}\n        onCheckedChange={(next) => onChange(next === true ? \"1\" : \"\")}\n      />\n      <span>{filter.label}</span>\n    </label>\n  );\n}\n"],"mappings":"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"}

package/dist/table/components/filter-stack-bar.js

@@ -1,6 +1,6 @@
 import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
-import { operatorLabel } from "../query.js";
+import { VALUELESS_FILTER_OPERATORS, operatorLabel } from "../query.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/filter-stack-bar.tsx
 function FilterStackBar({ filters, columnsByKey, processing, onRemove }) {
@@ -9,15 +9,16 @@ function FilterStackBar({ filters, columnsByKey, processing, onRemove }) {
 		className: "flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm",
 		children: filters.map((clause, index) => {
 			const label = columnsByKey.get(clause.field)?.label ?? clause.field;
+			const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);
 			return /* @__PURE__ */ jsxs("span", {
 				className: "inline-flex items-center gap-1.5",
-				children: [/* @__PURE__ */ jsxs("span", { children: [`${label} ${operatorLabel(clause.operator)}: `, /* @__PURE__ */ jsx("span", {
+				children: [/* @__PURE__ */ jsxs("span", { children: [valueless ? `${label} ${operatorLabel(clause.operator)}` : `${label} ${operatorLabel(clause.operator)}: `, !valueless && /* @__PURE__ */ jsx("span", {
 					className: "font-semibold",
 					children: clause.value
 				})] }), /* @__PURE__ */ jsx("button", {
 					type: "button",
 					"data-test": `filter-chip-${clause.field}-remove`,
-					className: "inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50",
+					className: "inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50",
 					disabled: processing,
 					"aria-label": t("filter.remove", "Remove {{label}} filter", { label }),
 					onClick: () => onRemove(index),

package/dist/table/components/filter-stack-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-stack-bar.js","names":[],"sources":["../../../resources/js/table/components/filter-stack-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { operatorLabel } from \"../query\";\nimport type { FilterClause, TableColumn } from \"../types\";\n\nexport function FilterStackBar({\n  filters,\n  columnsByKey,\n  processing,\n  onRemove,\n}: {\n  filters: FilterClause[];\n  columnsByKey: Map<string, TableColumn>;\n  processing: boolean;\n  onRemove: (index: number) => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {filters.map((clause, index) => {\n        const label = columnsByKey.get(clause.field)?.label ?? clause.field;\n\n        return (\n          <span\n            key={`${clause.field}-${clause.operator}-${index}`}\n            className=\"inline-flex items-center gap-1.5\"\n          >\n            <span>\n              {`${label} ${operatorLabel(clause.operator)}: `}\n              <span className=\"font-semibold\">{clause.value}</span>\n            </span>\n            <button\n              type=\"button\"\n              data-test={`filter-chip-${clause.field}-remove`}\n              className=\"inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50\"\n              disabled={processing}\n              aria-label={t(\"filter.remove\", \"Remove {{label}} filter\", { label })}\n              onClick={() => onRemove(index)}\n            >\n              <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,eAAe,EAC7B,SACA,cACA,YACA,YAMC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,QAAQ,aAAa,IAAI,OAAO,KAAK,GAAG,SAAS,OAAO;GAE9D,OACE,qBAAC,QAAD;IAEE,WAAU;cAFZ,CAIE,qBAAC,QAAD,EAAA,UAAA,CACG,GAAG,MAAM,GAAG,cAAc,OAAO,QAAQ,EAAE,KAC5C,oBAAC,QAAD;KAAM,WAAU;eAAiB,OAAO;IAAY,CAAA,CAChD,EAAA,CAAA,GACN,oBAAC,UAAD;KACE,MAAK;KACL,aAAW,eAAe,OAAO,MAAM;KACvC,WAAU;KACV,UAAU;KACV,cAAY,EAAE,iBAAiB,2BAA2B,EAAE,MAAM,CAAC;KACnE,eAAe,SAAS,KAAK;eAE7B,oBAAC,MAAD;MAAM,MAAK;MAAI,eAAY;MAAO,WAAU;KAAmB,CAAA;IACzD,CAAA,CACJ;MAjBC,GAAG,OAAO,MAAM,GAAG,OAAO,SAAS,GAAG,OAiBvC;EAEV,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"filter-stack-bar.js","names":[],"sources":["../../../resources/js/table/components/filter-stack-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"../query\";\nimport type { FilterClause, TableColumn } from \"../types\";\n\nexport function FilterStackBar({\n  filters,\n  columnsByKey,\n  processing,\n  onRemove,\n}: {\n  filters: FilterClause[];\n  columnsByKey: Map<string, TableColumn>;\n  processing: boolean;\n  onRemove: (index: number) => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {filters.map((clause, index) => {\n        const label = columnsByKey.get(clause.field)?.label ?? clause.field;\n        const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n        return (\n          <span\n            key={`${clause.field}-${clause.operator}-${index}`}\n            className=\"inline-flex items-center gap-1.5\"\n          >\n            <span>\n              {valueless\n                ? `${label} ${operatorLabel(clause.operator)}`\n                : `${label} ${operatorLabel(clause.operator)}: `}\n              {!valueless && <span className=\"font-semibold\">{clause.value}</span>}\n            </span>\n            <button\n              type=\"button\"\n              data-test={`filter-chip-${clause.field}-remove`}\n              className=\"inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50\"\n              disabled={processing}\n              aria-label={t(\"filter.remove\", \"Remove {{label}} filter\", { label })}\n              onClick={() => onRemove(index)}\n            >\n              <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,eAAe,EAC7B,SACA,cACA,YACA,YAMC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,QAAQ,aAAa,IAAI,OAAO,KAAK,GAAG,SAAS,OAAO;GAC9D,MAAM,YAAY,2BAA2B,IAAI,OAAO,QAAQ;GAEhE,OACE,qBAAC,QAAD;IAEE,WAAU;cAFZ,CAIE,qBAAC,QAAD,EAAA,UAAA,CACG,YACG,GAAG,MAAM,GAAG,cAAc,OAAO,QAAQ,MACzC,GAAG,MAAM,GAAG,cAAc,OAAO,QAAQ,EAAE,KAC9C,CAAC,aAAa,oBAAC,QAAD;KAAM,WAAU;eAAiB,OAAO;IAAY,CAAA,CAC/D,EAAA,CAAA,GACN,oBAAC,UAAD;KACE,MAAK;KACL,aAAW,eAAe,OAAO,MAAM;KACvC,WAAU;KACV,UAAU;KACV,cAAY,EAAE,iBAAiB,2BAA2B,EAAE,MAAM,CAAC;KACnE,eAAe,SAAS,KAAK;eAE7B,oBAAC,MAAD;MAAM,MAAK;MAAI,eAAY;MAAO,WAAU;KAAmB,CAAA;IACzD,CAAA,CACJ;MAnBC,GAAG,OAAO,MAAM,GAAG,OAAO,SAAS,GAAG,OAmBvC;EAEV,CAAC;CACE,CAAA;AAET"}

package/dist/table/components/filter-value-input.js

@@ -74,7 +74,7 @@ function FilterValueInput({ type, label, value, processing, withSearchIcon = fal
 				type: "button",
 				"aria-label": t("filter.clear", "Clear {{label}} filter", { label }),
 				"data-test": testId ? `${testId}-clear` : void 0,
-				className: "absolute right-1 inline-flex size-6 items-center justify-center rounded hover:bg-lt-muted disabled:opacity-50",
+				className: "absolute right-1 inline-flex size-6 items-center justify-center rounded-lt-sm hover:bg-lt-muted disabled:opacity-50",
 				disabled: processing,
 				onClick: onClear,
 				children: /* @__PURE__ */ jsx(Icon, {

package/dist/table/components/filter-value-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-value-input.js","names":[],"sources":["../../../resources/js/table/components/filter-value-input.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { controlSurface } from \"@lattice-php/lattice/core/components/control\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { FilterType } from \"@lattice-php/lattice/types/generated\";\n\nexport const fieldClass = controlSurface({ density: \"compact\" });\n\nexport function FilterValueInput({\n  type,\n  label,\n  value,\n  processing,\n  withSearchIcon = false,\n  grouped = false,\n  ariaLabel,\n  testId,\n  onCommit,\n  onClear,\n}: {\n  type: FilterType;\n  label: string;\n  value: string;\n  processing: boolean;\n  withSearchIcon?: boolean;\n  grouped?: boolean;\n  ariaLabel?: string;\n  testId?: string;\n  onCommit: (value: string) => void;\n  onClear?: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [draft, setDraft] = useState(value);\n  const inputLabel = ariaLabel ?? t(\"filter.filterBy\", \"Filter {{label}}\", { label });\n  const groupedClass = grouped ? \"rounded-r-none\" : \"\";\n\n  useEffect(() => {\n    setDraft(value);\n  }, [value]);\n\n  if (type === \"boolean\") {\n    return (\n      <select\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${fieldClass} ${groupedClass}`}\n        disabled={processing}\n        value={value}\n        onChange={(event) => onCommit(event.target.value)}\n      >\n        <option value=\"\">{t(\"filter.all\", \"All\")}</option>\n        <option value=\"true\">{t(\"filter.true\", \"True\")}</option>\n        <option value=\"false\">{t(\"filter.false\", \"False\")}</option>\n      </select>\n    );\n  }\n\n  if (type === \"date\") {\n    return (\n      <input\n        type=\"date\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${fieldClass} ${groupedClass}`}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => {\n          setDraft(event.target.value);\n          onCommit(event.target.value);\n        }}\n      />\n    );\n  }\n\n  return (\n    <div className=\"relative flex w-full min-w-0 items-center\">\n      {withSearchIcon && (\n        <Icon\n          name=\"search\"\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-2 size-lt-icon-md text-lt-muted-fg\"\n        />\n      )}\n      <input\n        type={type === \"number\" ? \"number\" : \"text\"}\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${fieldClass} ${groupedClass} ${withSearchIcon ? \"pl-8\" : \"\"} ${onClear ? \"pr-8\" : \"\"}`}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            onCommit(draft);\n          }\n        }}\n        onBlur={() => {\n          if (draft !== value) {\n            onCommit(draft);\n          }\n        }}\n      />\n      {onClear && draft !== \"\" && (\n        <button\n          type=\"button\"\n          aria-label={t(\"filter.clear\", \"Clear {{label}} filter\", { label })}\n          data-test={testId ? `${testId}-clear` : undefined}\n          className=\"absolute right-1 inline-flex size-6 items-center justify-center rounded hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onClear}\n        >\n          <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,IAAa,aAAa,eAAe,EAAE,SAAS,UAAU,CAAC;AAE/D,SAAgB,iBAAiB,EAC/B,MACA,OACA,OACA,YACA,iBAAiB,OACjB,UAAU,OACV,WACA,QACA,UACA,WAYC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,aAAa,aAAa,EAAE,mBAAmB,oBAAoB,EAAE,MAAM,CAAC;CAClF,MAAM,eAAe,UAAU,mBAAmB;CAElD,gBAAgB;EACd,SAAS,KAAK;CAChB,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,SAAS,WACX,OACE,qBAAC,UAAD;EACE,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,WAAW,GAAG;EAC5B,UAAU;EACH;EACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;YANlD;GAQE,oBAAC,UAAD;IAAQ,OAAM;cAAI,EAAE,cAAc,KAAK;GAAU,CAAA;GACjD,oBAAC,UAAD;IAAQ,OAAM;cAAQ,EAAE,eAAe,MAAM;GAAU,CAAA;GACvD,oBAAC,UAAD;IAAQ,OAAM;cAAS,EAAE,gBAAgB,OAAO;GAAU,CAAA;EACpD;;CAIZ,IAAI,SAAS,QACX,OACE,oBAAC,SAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,WAAW,GAAG;EAC5B,UAAU;EACV,OAAO;EACP,WAAW,UAAU;GACnB,SAAS,MAAM,OAAO,KAAK;GAC3B,SAAS,MAAM,OAAO,KAAK;EAC7B;CACD,CAAA;CAIL,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,kBACC,oBAAC,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GAEH,oBAAC,SAAD;IACE,MAAM,SAAS,WAAW,WAAW;IACrC,cAAY;IACZ,aAAW;IACX,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,iBAAiB,SAAS,GAAG,GAAG,UAAU,SAAS;IAC/F,UAAU;IACV,OAAO;IACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;IAChD,YAAY,UAAU;KACpB,IAAI,MAAM,QAAQ,SAChB,SAAS,KAAK;IAElB;IACA,cAAc;KACZ,IAAI,UAAU,OACZ,SAAS,KAAK;IAElB;GACD,CAAA;GACA,WAAW,UAAU,MACpB,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,EAAE,gBAAgB,0BAA0B,EAAE,MAAM,CAAC;IACjE,aAAW,SAAS,GAAG,OAAO,UAAU,KAAA;IACxC,WAAU;IACV,UAAU;IACV,SAAS;cAET,oBAAC,MAAD;KAAM,MAAK;KAAI,eAAY;KAAO,WAAU;IAAmB,CAAA;GACzD,CAAA;EAEP;;AAET"}
+{"version":3,"file":"filter-value-input.js","names":[],"sources":["../../../resources/js/table/components/filter-value-input.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { controlSurface } from \"@lattice-php/lattice/core/components/control\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { FilterType } from \"@lattice-php/lattice/types/generated\";\n\nexport const fieldClass = controlSurface({ density: \"compact\" });\n\nexport function FilterValueInput({\n  type,\n  label,\n  value,\n  processing,\n  withSearchIcon = false,\n  grouped = false,\n  ariaLabel,\n  testId,\n  onCommit,\n  onClear,\n}: {\n  type: FilterType;\n  label: string;\n  value: string;\n  processing: boolean;\n  withSearchIcon?: boolean;\n  grouped?: boolean;\n  ariaLabel?: string;\n  testId?: string;\n  onCommit: (value: string) => void;\n  onClear?: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [draft, setDraft] = useState(value);\n  const inputLabel = ariaLabel ?? t(\"filter.filterBy\", \"Filter {{label}}\", { label });\n  const groupedClass = grouped ? \"rounded-r-none\" : \"\";\n\n  useEffect(() => {\n    setDraft(value);\n  }, [value]);\n\n  if (type === \"boolean\") {\n    return (\n      <select\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${fieldClass} ${groupedClass}`}\n        disabled={processing}\n        value={value}\n        onChange={(event) => onCommit(event.target.value)}\n      >\n        <option value=\"\">{t(\"filter.all\", \"All\")}</option>\n        <option value=\"true\">{t(\"filter.true\", \"True\")}</option>\n        <option value=\"false\">{t(\"filter.false\", \"False\")}</option>\n      </select>\n    );\n  }\n\n  if (type === \"date\") {\n    return (\n      <input\n        type=\"date\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${fieldClass} ${groupedClass}`}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => {\n          setDraft(event.target.value);\n          onCommit(event.target.value);\n        }}\n      />\n    );\n  }\n\n  return (\n    <div className=\"relative flex w-full min-w-0 items-center\">\n      {withSearchIcon && (\n        <Icon\n          name=\"search\"\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-2 size-lt-icon-md text-lt-muted-fg\"\n        />\n      )}\n      <input\n        type={type === \"number\" ? \"number\" : \"text\"}\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${fieldClass} ${groupedClass} ${withSearchIcon ? \"pl-8\" : \"\"} ${onClear ? \"pr-8\" : \"\"}`}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            onCommit(draft);\n          }\n        }}\n        onBlur={() => {\n          if (draft !== value) {\n            onCommit(draft);\n          }\n        }}\n      />\n      {onClear && draft !== \"\" && (\n        <button\n          type=\"button\"\n          aria-label={t(\"filter.clear\", \"Clear {{label}} filter\", { label })}\n          data-test={testId ? `${testId}-clear` : undefined}\n          className=\"absolute right-1 inline-flex size-6 items-center justify-center rounded-lt-sm hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onClear}\n        >\n          <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,IAAa,aAAa,eAAe,EAAE,SAAS,UAAU,CAAC;AAE/D,SAAgB,iBAAiB,EAC/B,MACA,OACA,OACA,YACA,iBAAiB,OACjB,UAAU,OACV,WACA,QACA,UACA,WAYC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,aAAa,aAAa,EAAE,mBAAmB,oBAAoB,EAAE,MAAM,CAAC;CAClF,MAAM,eAAe,UAAU,mBAAmB;CAElD,gBAAgB;EACd,SAAS,KAAK;CAChB,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,SAAS,WACX,OACE,qBAAC,UAAD;EACE,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,WAAW,GAAG;EAC5B,UAAU;EACH;EACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;YANlD;GAQE,oBAAC,UAAD;IAAQ,OAAM;cAAI,EAAE,cAAc,KAAK;GAAU,CAAA;GACjD,oBAAC,UAAD;IAAQ,OAAM;cAAQ,EAAE,eAAe,MAAM;GAAU,CAAA;GACvD,oBAAC,UAAD;IAAQ,OAAM;cAAS,EAAE,gBAAgB,OAAO;GAAU,CAAA;EACpD;;CAIZ,IAAI,SAAS,QACX,OACE,oBAAC,SAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,WAAW,GAAG;EAC5B,UAAU;EACV,OAAO;EACP,WAAW,UAAU;GACnB,SAAS,MAAM,OAAO,KAAK;GAC3B,SAAS,MAAM,OAAO,KAAK;EAC7B;CACD,CAAA;CAIL,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,kBACC,oBAAC,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GAEH,oBAAC,SAAD;IACE,MAAM,SAAS,WAAW,WAAW;IACrC,cAAY;IACZ,aAAW;IACX,WAAW,GAAG,WAAW,GAAG,aAAa,GAAG,iBAAiB,SAAS,GAAG,GAAG,UAAU,SAAS;IAC/F,UAAU;IACV,OAAO;IACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;IAChD,YAAY,UAAU;KACpB,IAAI,MAAM,QAAQ,SAChB,SAAS,KAAK;IAElB;IACA,cAAc;KACZ,IAAI,UAAU,OACZ,SAAS,KAAK;IAElB;GACD,CAAA;GACA,WAAW,UAAU,MACpB,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,EAAE,gBAAgB,0BAA0B,EAAE,MAAM,CAAC;IACjE,aAAW,SAAS,GAAG,OAAO,UAAU,KAAA;IACxC,WAAU;IACV,UAAU;IACV,SAAS;cAET,oBAAC,MAAD;KAAM,MAAK;KAAI,eAAY;KAAO,WAAU;IAAmB,CAAA;GACzD,CAAA;EAEP;;AAET"}

package/dist/table/components/sort-bar.js

@@ -24,7 +24,7 @@ function SortBar({ columnsByKey, state, processing, onClear }) {
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: "inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50",
+						className: "inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50",
 						disabled: processing,
 						"aria-label": `Clear ${label} sort`,
 						"data-test": `clear-${sort.key}-sort`,

package/dist/table/components/sort-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-bar.js","names":[],"sources":["../../../resources/js/table/components/sort-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { getSortDirectionLabel } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nexport function SortBar({\n  columnsByKey,\n  state,\n  processing,\n  onClear,\n}: {\n  columnsByKey: Map<string, TableColumn>;\n  state: TableState;\n  processing: boolean;\n  onClear: (sort: TableSort) => void;\n}) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {state.sorts.map((sort, index) => {\n        const column = columnsByKey.get(sort.key);\n        const label = column?.label ?? sort.key;\n        const arrow = sort.direction === \"desc\" ? \"arrow-down\" : \"arrow-up\";\n\n        return (\n          <span key={sort.key} className=\"inline-flex items-center gap-1.5\">\n            <span className=\"font-medium\">{`${index + 1}. ${label}`}</span>\n            <Icon\n              name={arrow}\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={getSortDirectionLabel(sort.direction)}\n              className=\"size-lt-icon-sm text-lt-muted-fg\"\n            />\n            <button\n              type=\"button\"\n              className=\"inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50\"\n              disabled={processing}\n              aria-label={`Clear ${label} sort`}\n              data-test={`clear-${sort.key}-sort`}\n              onClick={() => onClear(sort)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,QAAQ,EACtB,cACA,OACA,YACA,WAMC;CACD,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,aAAa,IAAI,KAAK,GACvB,GAAQ,SAAS,KAAK;GACpC,MAAM,QAAQ,KAAK,cAAc,SAAS,eAAe;GAEzD,OACE,qBAAC,QAAD;IAAqB,WAAU;cAA/B;KACE,oBAAC,QAAD;MAAM,WAAU;gBAAe,GAAG,QAAQ,EAAE,IAAI;KAAc,CAAA;KAC9D,oBAAC,MAAD;MACE,MAAM;MACN,MAAK;MACL,eAAa;MACb,cAAY,sBAAsB,KAAK,SAAS;MAChD,WAAU;KACX,CAAA;KACD,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,UAAU;MACV,cAAY,SAAS,MAAM;MAC3B,aAAW,SAAS,KAAK,IAAI;MAC7B,eAAe,QAAQ,IAAI;gBAE3B,oBAAC,MAAD;OAAM,MAAK;OAAI,WAAU;MAAmB,CAAA;KACtC,CAAA;IACJ;MAnBK,KAAK,GAmBV;EAEV,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"sort-bar.js","names":[],"sources":["../../../resources/js/table/components/sort-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { getSortDirectionLabel } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nexport function SortBar({\n  columnsByKey,\n  state,\n  processing,\n  onClear,\n}: {\n  columnsByKey: Map<string, TableColumn>;\n  state: TableState;\n  processing: boolean;\n  onClear: (sort: TableSort) => void;\n}) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {state.sorts.map((sort, index) => {\n        const column = columnsByKey.get(sort.key);\n        const label = column?.label ?? sort.key;\n        const arrow = sort.direction === \"desc\" ? \"arrow-down\" : \"arrow-up\";\n\n        return (\n          <span key={sort.key} className=\"inline-flex items-center gap-1.5\">\n            <span className=\"font-medium\">{`${index + 1}. ${label}`}</span>\n            <Icon\n              name={arrow}\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={getSortDirectionLabel(sort.direction)}\n              className=\"size-lt-icon-sm text-lt-muted-fg\"\n            />\n            <button\n              type=\"button\"\n              className=\"inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50\"\n              disabled={processing}\n              aria-label={`Clear ${label} sort`}\n              data-test={`clear-${sort.key}-sort`}\n              onClick={() => onClear(sort)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,QAAQ,EACtB,cACA,OACA,YACA,WAMC;CACD,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,aAAa,IAAI,KAAK,GACvB,GAAQ,SAAS,KAAK;GACpC,MAAM,QAAQ,KAAK,cAAc,SAAS,eAAe;GAEzD,OACE,qBAAC,QAAD;IAAqB,WAAU;cAA/B;KACE,oBAAC,QAAD;MAAM,WAAU;gBAAe,GAAG,QAAQ,EAAE,IAAI;KAAc,CAAA;KAC9D,oBAAC,MAAD;MACE,MAAM;MACN,MAAK;MACL,eAAa;MACb,cAAY,sBAAsB,KAAK,SAAS;MAChD,WAAU;KACX,CAAA;KACD,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,UAAU;MACV,cAAY,SAAS,MAAM;MAC3B,aAAW,SAAS,KAAK,IAAI;MAC7B,eAAe,QAAQ,IAAI;gBAE3B,oBAAC,MAAD;OAAM,MAAK;OAAI,WAAU;MAAmB,CAAA;KACtC,CAAA;IACJ;MAnBK,KAAK,GAmBV;EAEV,CAAC;CACE,CAAA;AAET"}

package/dist/table/components/table.js

@@ -1,7 +1,7 @@
 import { cn } from "../../lib/utils.js";
-import { nodeIdentity } from "../../core/test-id.js";
 import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
+import { nodeIdentity } from "../../core/test-id.js";
 import { useColumnResizing } from "../../core/use-column-resizing.js";
 import { alignJustifyItems, alignText } from "../align.js";
 import { getBulkActions } from "../bulk.js";
@@ -13,7 +13,7 @@ import { Checkbox } from "../../core/components/checkbox.js";
 import { BulkBar } from "./bulk-bar.js";
 import { ColumnFilterControl } from "./column-filter-control.js";
 import { ColumnHeader } from "./column-header.js";
-import { FilterBar } from "./filter-bar.js";
+import { FilterBar, FilterMenu } from "./filter-bar.js";
 import { FilterStackBar } from "./filter-stack-bar.js";
 import { TablePagination } from "./pagination.js";
 import { SortBar } from "./sort-bar.js";
@@ -24,7 +24,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/table.tsx
 var TableComponent = ({ node }) => {
 	const { t } = useT("lattice");
-	const { columns, rows, pagination, state, filters, tableFilters, addFilter, updateFilter, removeFilter, setTableFilter, resetFilters, searchFilterOptions, processing, hasLoaded, infiniteLoaderRef, sort, clearSort, goToPage, loadMore } = useTable(node);
+	const { columns, rows, pagination, state, filters, tableFilters, addFilter, updateFilter, removeFilter, replaceColumnFilters, setTableFilter, resetFilters, searchFilterOptions, processing, hasLoaded, infiniteLoaderRef, sort, clearSort, goToPage, loadMore } = useTable(node);
 	const bulkActions = useMemo(() => getBulkActions(node.props?.bulkActions), [node.props?.bulkActions]);
 	const hasBulkActions = bulkActions.length > 0;
 	const rowEntries = useMemo(() => rows.map((row, index) => ({
@@ -47,9 +47,11 @@ var TableComponent = ({ node }) => {
 		index
 	}));
 	const filterDefinitions = useMemo(() => Array.isArray(node.props?.filters) ? node.props.filters : [], [node.props?.filters]);
+	const hasDedicatedFilters = filterDefinitions.length > 0;
 	const hasActiveFilters = filters.length > 0 || Object.keys(tableFilters).length > 0;
+	const hasTrailingUtility = hasActions || hasDedicatedFilters;
 	const sizingColumns = useMemo(() => getTableSizingColumns(columns), [columns]);
-	const utilityTracks = useMemo(() => getTableUtilityTracks(hasActions, hasBulkActions), [hasActions, hasBulkActions]);
+	const utilityTracks = useMemo(() => getTableUtilityTracks(hasTrailingUtility, hasBulkActions), [hasTrailingUtility, hasBulkActions]);
 	const resizingEnabled = node.props?.resizableColumns === true;
 	const resizeStorageIdentity = nodeIdentity(node);
 	const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resetColumns } = useColumnResizing({
@@ -77,14 +79,13 @@ var TableComponent = ({ node }) => {
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "overflow-x-auto rounded-lt-sm border border-lt-border",
 			children: [
-				filterDefinitions.length > 0 && /* @__PURE__ */ jsx(FilterBar, {
+				hasDedicatedFilters && hasActiveFilters && /* @__PURE__ */ jsx(FilterBar, {
 					filters: filterDefinitions,
 					values: tableFilters,
 					processing,
 					hasActiveFilters,
 					onChange: setTableFilter,
-					onReset: resetFilters,
-					onSearch: searchFilterOptions
+					onReset: resetFilters
 				}),
 				hasBulkActions && selection.active && /* @__PURE__ */ jsx(BulkBar, {
 					actions: bulkActions,
@@ -109,7 +110,7 @@ var TableComponent = ({ node }) => {
 					onClear: clearSort
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "min-w-full text-sm",
+					className: "min-w-full text-base",
 					role: "table",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "border-b border-lt-border bg-lt-muted/50",
@@ -136,13 +137,19 @@ var TableComponent = ({ node }) => {
 									sort,
 									state
 								}, column.key)),
-								hasActions && /* @__PURE__ */ jsx("div", {
-									className: "px-4 py-3 text-right align-middle font-medium text-lt-muted-fg",
+								hasTrailingUtility && /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center justify-end gap-2 px-4 py-2 align-middle font-semibold text-lt-fg",
 									role: "columnheader",
-									children: /* @__PURE__ */ jsx("span", {
+									children: [hasDedicatedFilters && /* @__PURE__ */ jsx(FilterMenu, {
+										filters: filterDefinitions,
+										values: tableFilters,
+										processing,
+										onChange: setTableFilter,
+										onSearch: searchFilterOptions
+									}), hasActions && /* @__PURE__ */ jsx("span", {
 										className: "sr-only",
 										children: node.props?.actionsLabel
-									})
+									})]
 								})
 							]
 						}), hasFilters && /* @__PURE__ */ jsxs("div", {
@@ -164,10 +171,11 @@ var TableComponent = ({ node }) => {
 										onAdd: addFilter,
 										onUpdate: updateFilter,
 										onRemove: removeFilter,
+										onReplace: replaceColumnFilters,
 										onSearch: (query) => searchFilterOptions(column.key, query)
 									})
 								}, column.key)),
-								hasActions && /* @__PURE__ */ jsx("div", {
+								hasTrailingUtility && /* @__PURE__ */ jsx("div", {
 									className: "px-4 py-2",
 									role: "cell"
 								})
@@ -206,22 +214,23 @@ var TableComponent = ({ node }) => {
 										})
 									}),
 									columns.map((column) => /* @__PURE__ */ jsxs("div", {
-										className: cn("grid min-w-0 gap-1 p-4 align-middle", alignText(column.align), alignJustifyItems(column.align)),
+										className: cn("grid min-w-0 gap-1 overflow-hidden p-4 align-middle", alignText(column.align), alignJustifyItems(column.align)),
 										role: "cell",
 										children: [/* @__PURE__ */ jsx("span", {
 											"aria-hidden": "true",
 											className: "text-xs font-medium text-lt-muted-fg md:hidden",
 											children: column.label
 										}), /* @__PURE__ */ jsx("div", {
-											className: "min-w-0 truncate",
+											"data-slot": "table-cell-content",
+											className: "min-w-0 max-w-full overflow-hidden truncate",
 											children: /* @__PURE__ */ jsx(ColumnCell, {
 												column,
 												row
 											})
 										})]
 									}, column.key)),
-									actions.length > 0 && /* @__PURE__ */ jsx("div", {
-										className: "flex items-center justify-start gap-2 p-4 md:justify-end",
+									hasTrailingUtility && /* @__PURE__ */ jsx("div", {
+										className: cn("items-center justify-start gap-2 p-4 md:justify-end", actions.length > 0 ? "flex" : "hidden md:flex"),
 										role: "cell",
 										children: actions.map((action, actionIndex) => /* @__PURE__ */ jsx(TableActionNode, { node: action }, action.key ?? action.id ?? actionIndex))
 									})