@lattice-php/lattice 0.1.0 → 0.3.0

package/dist/table/components/column-filter-control.js

@@ -1,44 +1,26 @@
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/components/popover.js";
 import { VALUELESS_FILTER_OPERATORS, operatorLabel } from "../query.js";
-import { FilterValueInput } from "./filter-value-input.js";
-import { useEffect, useRef, useState } from "react";
+import { FilterValueInput, fieldClass } from "./filter-value-input.js";
+import { TableFilterControl } from "./filter-controls.js";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Filter, Plus, Trash2 } from "lucide-react";
-import { createPortal } from "react-dom";
 //#region resources/js/table/components/column-filter-control.tsx
-function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove }) {
+function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, onSearch }) {
+	const { t } = useT("lattice");
 	const filter = column.filter;
-	const buttonRef = useRef(null);
-	const panelRef = useRef(null);
-	const [open, setOpen] = useState(false);
-	const [position, setPosition] = useState({
-		top: 0,
-		left: 0
-	});
-	useEffect(() => {
-		if (!open) return;
-		function close(event) {
-			const target = event.target;
-			if (buttonRef.current?.contains(target) || panelRef.current?.contains(target)) return;
-			setOpen(false);
-		}
-		function handleKey(event) {
-			if (event.key === "Escape") setOpen(false);
-		}
-		function dismiss() {
-			setOpen(false);
-		}
-		document.addEventListener("mousedown", close);
-		document.addEventListener("keydown", handleKey);
-		window.addEventListener("scroll", dismiss, true);
-		window.addEventListener("resize", dismiss);
-		return () => {
-			document.removeEventListener("mousedown", close);
-			document.removeEventListener("keydown", handleKey);
-			window.removeEventListener("scroll", dismiss, true);
-			window.removeEventListener("resize", dismiss);
-		};
-	}, [open]);
 	if (!filter) return null;
+	if (filter.control === "select") return /* @__PURE__ */ jsx(ColumnSelectFilter, {
+		column,
+		clauses,
+		processing,
+		onAdd,
+		onUpdate,
+		onRemove,
+		onSearch
+	});
 	const type = filter.type ?? "text";
 	const operators = filter.operators ?? [];
 	const defaultOperator = filter.defaultOperator ?? operators[0] ?? "eq";
@@ -58,71 +40,108 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 			value
 		});
 	}
-	function toggle() {
-		if (open) {
-			setOpen(false);
-			return;
-		}
-		const rect = buttonRef.current?.getBoundingClientRect();
-		if (rect) setPosition({
-			top: rect.bottom + 4,
-			left: rect.left
-		});
-		setOpen(true);
-	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-1",
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "flex-1",
-				children: /* @__PURE__ */ jsx(FilterValueInput, {
-					type,
-					label: column.label,
-					value: primary?.clause.value ?? "",
-					processing,
-					withSearchIcon: type === "text" || type === "number",
-					onCommit: commitPrimary,
-					onClear: primary ? () => onRemove(primary.index) : void 0
-				})
-			}),
-			/* @__PURE__ */ jsxs("button", {
-				ref: buttonRef,
+		className: "flex min-w-0 max-w-80 items-stretch",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children: /* @__PURE__ */ jsx(FilterValueInput, {
+				type,
+				label: column.label,
+				value: primary?.clause.value ?? "",
+				processing,
+				withSearchIcon: type === "text" || type === "number",
+				grouped: true,
+				testId: `filter-${column.key}-value`,
+				onCommit: commitPrimary,
+				onClear: primary ? () => onRemove(primary.index) : void 0
+			})
+		}), /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
 				type: "button",
-				"aria-label": `${column.label} filters`,
-				className: "relative inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border disabled:opacity-50 data-[open=true]:border-lt-primary",
-				"data-open": open,
+				"aria-label": t("filter.columnFilters", "{{label}} filters", { label: column.label }),
+				"data-test": `filter-${column.key}`,
+				className: "relative -ml-px inline-flex size-9 shrink-0 items-center justify-center rounded-r-lt-sm border border-lt-input disabled:opacity-50 data-[state=open]:z-10 data-[state=open]:border-lt-primary",
 				disabled: processing,
-				onClick: toggle,
-				children: [/* @__PURE__ */ jsx(Filter, {
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "filter",
 					"aria-hidden": "true",
-					className: "size-4"
+					className: "size-lt-icon-md"
 				}), clauses.length > 0 && /* @__PURE__ */ jsx("span", {
-					className: "absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium text-lt-primary-fg",
+					className: "absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-xs font-medium text-lt-primary-fg",
 					children: clauses.length
 				})]
-			}),
-			open && createPortal(/* @__PURE__ */ jsx("div", {
-				ref: panelRef,
-				className: "fixed z-50 w-80 rounded-lt border border-lt-border bg-lt-bg p-4 shadow-lg",
-				style: {
-					top: position.top,
-					left: position.left
-				},
-				children: /* @__PURE__ */ jsx(FilterClauseList, {
-					column,
-					clauses,
-					operators,
-					defaultOperator,
-					processing,
-					onAdd,
-					onUpdate,
-					onRemove
-				})
-			}), document.body)
-		]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			className: "w-80 p-4",
+			children: /* @__PURE__ */ jsx(FilterClauseList, {
+				column,
+				clauses,
+				operators,
+				defaultOperator,
+				processing,
+				onAdd,
+				onUpdate,
+				onRemove
+			})
+		})] })]
+	});
+}
+function serializeColumnValue(value) {
+	if (Array.isArray(value)) return value.join(",");
+	return typeof value === "string" ? value : "";
+}
+/**
+* Renders a column's option dropdown by reusing the shared table-filter select
+* control, mapping its value to/from a single `eq` clause (or an `in` clause
+* carrying a comma-joined value when the column is `multiple`).
+*/
+function ColumnSelectFilter({ column, clauses, processing, onAdd, onUpdate, onRemove, onSearch }) {
+	const filter = column.filter;
+	if (!filter) return null;
+	const multiple = filter.multiple;
+	const operator = filter.defaultOperator;
+	const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];
+	const value = multiple ? active?.clause.value ? active.clause.value.split(",") : [] : active?.clause.value ?? "";
+	const data = {
+		key: column.key,
+		label: column.label,
+		type: "select",
+		props: {
+			options: filter.options,
+			multiple,
+			searchable: filter.searchable,
+			placeholder: null
+		}
+	};
+	function change(next) {
+		const serialized = serializeColumnValue(next);
+		if (serialized === "") {
+			if (active) onRemove(active.index);
+			return;
+		}
+		if (active) onUpdate(active.index, {
+			...active.clause,
+			operator,
+			value: serialized
+		});
+		else onAdd({
+			field: column.key,
+			operator,
+			value: serialized
+		});
+	}
+	return /* @__PURE__ */ jsx(TableFilterControl, {
+		filter: data,
+		value,
+		processing,
+		onChange: change,
+		onSearch
 	});
 }
 function FilterClauseList({ column, clauses, operators, defaultOperator, processing, onAdd, onUpdate, onRemove }) {
+	const { t } = useT("lattice");
 	const type = column.filter?.type ?? "text";
 	const [draftOperator, setDraftOperator] = useState(defaultOperator);
 	const [adding, setAdding] = useState(clauses.length === 0);
@@ -185,27 +204,31 @@ function FilterClauseList({ column, clauses, operators, defaultOperator, process
 				className: "border-t border-lt-border pt-3",
 				children: /* @__PURE__ */ jsxs("button", {
 					type: "button",
+					"data-test": `filter-${column.key}-add`,
 					className: "inline-flex w-full items-center justify-center gap-2 rounded-lt-sm bg-lt-muted px-3 py-2 text-sm font-medium hover:bg-lt-muted/70 disabled:opacity-50",
 					disabled: processing,
 					onClick: () => setAdding(true),
-					children: [/* @__PURE__ */ jsx(Plus, {
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: "plus",
 						"aria-hidden": "true",
-						className: "size-4"
-					}), "Add filter"]
+						className: "size-lt-icon-md"
+					}), t("filter.add", "Add filter")]
 				})
 			})
 		]
 	});
 }
 function FilterClauseRow({ column, type, operators, clause, processing, onOperator, onValue, onRemove }) {
+	const { t } = useT("lattice");
 	const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "grid gap-2",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [operators.length > 1 ? /* @__PURE__ */ jsx("select", {
-				"aria-label": `${column.label} operator`,
-				className: "h-9 flex-1 rounded-lt-sm border border-lt-input bg-lt-bg px-2 text-sm font-normal",
+				"aria-label": t("filter.operator", "{{label}} operator", { label: column.label }),
+				"data-test": `filter-${column.key}-operator`,
+				className: cn(fieldClass, "flex-1"),
 				disabled: processing,
 				value: clause.operator,
 				onChange: (event) => onOperator(event.target.value),
@@ -218,19 +241,21 @@ function FilterClauseRow({ column, type, operators, clause, processing, onOperat
 				children: operatorLabel(clause.operator)
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": `Remove ${column.label} filter`,
+				"aria-label": t("filter.remove", "Remove {{label}} filter", { label: column.label }),
+				"data-test": `filter-${column.key}-remove`,
 				className: "inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border hover:bg-lt-muted disabled:opacity-50",
 				disabled: processing,
 				onClick: onRemove,
-				children: /* @__PURE__ */ jsx(Trash2, {
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "trash-2",
 					"aria-hidden": "true",
-					className: "size-4"
+					className: "size-lt-icon-md"
 				})
 			})]
 		}), !valueless && /* @__PURE__ */ jsx(FilterValueInput, {
 			type,
 			label: column.label,
-			ariaLabel: `${column.label} filter value`,
+			ariaLabel: t("filter.value", "{{label}} filter value", { label: column.label }),
 			value: clause.value,
 			processing,
 			onCommit: onValue,

package/dist/table/components/column-filter-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-filter-control.js","names":[],"sources":["../../../resources/js/table/components/column-filter-control.tsx"],"sourcesContent":["import { Filter, Plus, Trash2 } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ControlType, FilterOperator } from \"@lattice/lattice/generated/types\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"../query\";\nimport type { FilterClause, TableColumn } from \"../types\";\nimport { FilterValueInput } from \"./filter-value-input\";\n\ntype ColumnClause = { clause: FilterClause; index: number };\n\nexport function ColumnFilterControl({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const filter = column.filter;\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    function close(event: MouseEvent): void {\n      const target = event.target as Node;\n\n      if (buttonRef.current?.contains(target) || panelRef.current?.contains(target)) {\n        return;\n      }\n\n      setOpen(false);\n    }\n\n    function handleKey(event: KeyboardEvent): void {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n      }\n    }\n\n    function dismiss(): void {\n      setOpen(false);\n    }\n\n    document.addEventListener(\"mousedown\", close);\n    document.addEventListener(\"keydown\", handleKey);\n    window.addEventListener(\"scroll\", dismiss, true);\n    window.addEventListener(\"resize\", dismiss);\n\n    return () => {\n      document.removeEventListener(\"mousedown\", close);\n      document.removeEventListener(\"keydown\", handleKey);\n      window.removeEventListener(\"scroll\", dismiss, true);\n      window.removeEventListener(\"resize\", dismiss);\n    };\n  }, [open]);\n\n  if (!filter) {\n    return null;\n  }\n\n  const type = filter.type ?? \"text\";\n  const operators = filter.operators ?? [];\n  const defaultOperator = filter.defaultOperator ?? operators[0] ?? \"eq\";\n  const primary = clauses.find((entry) => entry.clause.operator === defaultOperator) ?? clauses[0];\n\n  function commitPrimary(value: string): void {\n    if (value === \"\") {\n      if (primary) {\n        onRemove(primary.index);\n      }\n\n      return;\n    }\n\n    if (primary) {\n      onUpdate(primary.index, { ...primary.clause, value });\n    } else {\n      onAdd({ field: column.key, operator: defaultOperator, value });\n    }\n  }\n\n  function toggle(): void {\n    if (open) {\n      setOpen(false);\n\n      return;\n    }\n\n    const rect = buttonRef.current?.getBoundingClientRect();\n\n    if (rect) {\n      setPosition({ top: rect.bottom + 4, left: rect.left });\n    }\n\n    setOpen(true);\n  }\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      <div className=\"flex-1\">\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          value={primary?.clause.value ?? \"\"}\n          processing={processing}\n          withSearchIcon={type === \"text\" || type === \"number\"}\n          onCommit={commitPrimary}\n          onClear={primary ? () => onRemove(primary.index) : undefined}\n        />\n      </div>\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        aria-label={`${column.label} filters`}\n        className=\"relative inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border disabled:opacity-50 data-[open=true]:border-lt-primary\"\n        data-open={open}\n        disabled={processing}\n        onClick={toggle}\n      >\n        <Filter aria-hidden=\"true\" className=\"size-4\" />\n        {clauses.length > 0 && (\n          <span className=\"absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium text-lt-primary-fg\">\n            {clauses.length}\n          </span>\n        )}\n      </button>\n\n      {open &&\n        createPortal(\n          <div\n            ref={panelRef}\n            className=\"fixed z-50 w-80 rounded-lt border border-lt-border bg-lt-bg p-4 shadow-lg\"\n            style={{ top: position.top, left: position.left }}\n          >\n            <FilterClauseList\n              column={column}\n              clauses={clauses}\n              operators={operators}\n              defaultOperator={defaultOperator}\n              processing={processing}\n              onAdd={onAdd}\n              onUpdate={onUpdate}\n              onRemove={onRemove}\n            />\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n\nfunction FilterClauseList({\n  column,\n  clauses,\n  operators,\n  defaultOperator,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  operators: FilterOperator[];\n  defaultOperator: FilterOperator;\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const type = column.filter?.type ?? \"text\";\n  const [draftOperator, setDraftOperator] = useState(defaultOperator);\n  const [adding, setAdding] = useState(clauses.length === 0);\n\n  return (\n    <div className=\"grid gap-3\">\n      {clauses.map((entry) => (\n        <FilterClauseRow\n          key={entry.index}\n          column={column}\n          type={type}\n          operators={operators}\n          clause={entry.clause}\n          processing={processing}\n          onOperator={(operator) => onUpdate(entry.index, { ...entry.clause, operator })}\n          onValue={(value) =>\n            value === \"\" ? onRemove(entry.index) : onUpdate(entry.index, { ...entry.clause, value })\n          }\n          onRemove={() => onRemove(entry.index)}\n        />\n      ))}\n\n      {adding && (\n        <FilterClauseRow\n          column={column}\n          type={type}\n          operators={operators}\n          clause={{ field: column.key, operator: draftOperator, value: \"\" }}\n          processing={processing}\n          onOperator={(operator) => {\n            if (VALUELESS_FILTER_OPERATORS.has(operator)) {\n              onAdd({ field: column.key, operator, value: \"\" });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n              return;\n            }\n            setDraftOperator(operator);\n          }}\n          onValue={(value) => {\n            if (value !== \"\") {\n              onAdd({ field: column.key, operator: draftOperator, value });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n            }\n          }}\n          onRemove={() => setAdding(false)}\n        />\n      )}\n\n      <div className=\"border-t border-lt-border pt-3\">\n        <button\n          type=\"button\"\n          className=\"inline-flex w-full items-center justify-center gap-2 rounded-lt-sm bg-lt-muted px-3 py-2 text-sm font-medium hover:bg-lt-muted/70 disabled:opacity-50\"\n          disabled={processing}\n          onClick={() => setAdding(true)}\n        >\n          <Plus aria-hidden=\"true\" className=\"size-4\" />\n          Add filter\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterClauseRow({\n  column,\n  type,\n  operators,\n  clause,\n  processing,\n  onOperator,\n  onValue,\n  onRemove,\n}: {\n  column: TableColumn;\n  type: ControlType;\n  operators: FilterOperator[];\n  clause: FilterClause;\n  processing: boolean;\n  onOperator: (operator: FilterOperator) => void;\n  onValue: (value: string) => void;\n  onRemove: () => void;\n}) {\n  const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center gap-2\">\n        {operators.length > 1 ? (\n          <select\n            aria-label={`${column.label} operator`}\n            className=\"h-9 flex-1 rounded-lt-sm border border-lt-input bg-lt-bg px-2 text-sm font-normal\"\n            disabled={processing}\n            value={clause.operator}\n            onChange={(event) => onOperator(event.target.value as FilterOperator)}\n          >\n            {operators.map((operator) => (\n              <option key={operator} value={operator}>\n                {operatorLabel(operator)}\n              </option>\n            ))}\n          </select>\n        ) : (\n          <span className=\"flex-1 text-sm font-medium\">{operatorLabel(clause.operator)}</span>\n        )}\n        <button\n          type=\"button\"\n          aria-label={`Remove ${column.label} filter`}\n          className=\"inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onRemove}\n        >\n          <Trash2 aria-hidden=\"true\" className=\"size-4\" />\n        </button>\n      </div>\n      {!valueless && (\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          ariaLabel={`${column.label} filter value`}\n          value={clause.value}\n          processing={processing}\n          onCommit={onValue}\n          onClear={() => onValue(\"\")}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"column-filter-control.js","names":[],"sources":["../../../resources/js/table/components/column-filter-control.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useState } from \"react\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/core/components/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { FilterData, FilterType, Op } from \"@lattice-php/lattice/types/generated\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"../query\";\nimport type { FilterClause, TableColumn } from \"../types\";\nimport { type FilterOptionSearch, TableFilterControl } from \"./filter-controls\";\nimport { fieldClass, FilterValueInput } from \"./filter-value-input\";\n\ntype ColumnClause = { clause: FilterClause; index: number };\n\nexport function ColumnFilterControl({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const { t } = useT(\"lattice\");\n  const filter = column.filter;\n\n  if (!filter) {\n    return null;\n  }\n\n  if (filter.control === \"select\") {\n    return (\n      <ColumnSelectFilter\n        column={column}\n        clauses={clauses}\n        processing={processing}\n        onAdd={onAdd}\n        onUpdate={onUpdate}\n        onRemove={onRemove}\n        onSearch={onSearch}\n      />\n    );\n  }\n\n  const type = filter.type ?? \"text\";\n  const operators = filter.operators ?? [];\n  const defaultOperator = filter.defaultOperator ?? operators[0] ?? \"eq\";\n  const primary = clauses.find((entry) => entry.clause.operator === defaultOperator) ?? clauses[0];\n\n  function commitPrimary(value: string): void {\n    if (value === \"\") {\n      if (primary) {\n        onRemove(primary.index);\n      }\n\n      return;\n    }\n\n    if (primary) {\n      onUpdate(primary.index, { ...primary.clause, value });\n    } else {\n      onAdd({ field: column.key, operator: defaultOperator, value });\n    }\n  }\n\n  return (\n    <div className=\"flex min-w-0 max-w-80 items-stretch\">\n      <div className=\"min-w-0 flex-1\">\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          value={primary?.clause.value ?? \"\"}\n          processing={processing}\n          withSearchIcon={type === \"text\" || type === \"number\"}\n          grouped\n          testId={`filter-${column.key}-value`}\n          onCommit={commitPrimary}\n          onClear={primary ? () => onRemove(primary.index) : undefined}\n        />\n      </div>\n      <Popover>\n        <PopoverTrigger asChild>\n          <button\n            type=\"button\"\n            aria-label={t(\"filter.columnFilters\", \"{{label}} filters\", { label: column.label })}\n            data-test={`filter-${column.key}`}\n            className=\"relative -ml-px inline-flex size-9 shrink-0 items-center justify-center rounded-r-lt-sm border border-lt-input disabled:opacity-50 data-[state=open]:z-10 data-[state=open]:border-lt-primary\"\n            disabled={processing}\n          >\n            <Icon name=\"filter\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n            {clauses.length > 0 && (\n              <span className=\"absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-xs font-medium text-lt-primary-fg\">\n                {clauses.length}\n              </span>\n            )}\n          </button>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" className=\"w-80 p-4\">\n          <FilterClauseList\n            column={column}\n            clauses={clauses}\n            operators={operators}\n            defaultOperator={defaultOperator}\n            processing={processing}\n            onAdd={onAdd}\n            onUpdate={onUpdate}\n            onRemove={onRemove}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nfunction serializeColumnValue(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.join(\",\");\n  }\n\n  return typeof value === \"string\" ? value : \"\";\n}\n\n/**\n * Renders a column's option dropdown by reusing the shared table-filter select\n * control, mapping its value to/from a single `eq` clause (or an `in` clause\n * carrying a comma-joined value when the column is `multiple`).\n */\nfunction ColumnSelectFilter({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const filter = column.filter;\n\n  if (!filter) {\n    return null;\n  }\n\n  const multiple = filter.multiple;\n  const operator = filter.defaultOperator;\n  const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];\n  const value: unknown = multiple\n    ? active?.clause.value\n      ? active.clause.value.split(\",\")\n      : []\n    : (active?.clause.value ?? \"\");\n\n  const data: FilterData = {\n    key: column.key,\n    label: column.label,\n    type: \"select\",\n    props: { options: filter.options, multiple, searchable: filter.searchable, placeholder: null },\n  };\n\n  function change(next: unknown): void {\n    const serialized = serializeColumnValue(next);\n\n    if (serialized === \"\") {\n      if (active) {\n        onRemove(active.index);\n      }\n\n      return;\n    }\n\n    if (active) {\n      onUpdate(active.index, { ...active.clause, operator, value: serialized });\n    } else {\n      onAdd({ field: column.key, operator, value: serialized });\n    }\n  }\n\n  return (\n    <TableFilterControl\n      filter={data}\n      value={value}\n      processing={processing}\n      onChange={change}\n      onSearch={onSearch}\n    />\n  );\n}\n\nfunction FilterClauseList({\n  column,\n  clauses,\n  operators,\n  defaultOperator,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  operators: Op[];\n  defaultOperator: Op;\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const type = column.filter?.type ?? \"text\";\n  const [draftOperator, setDraftOperator] = useState(defaultOperator);\n  const [adding, setAdding] = useState(clauses.length === 0);\n\n  return (\n    <div className=\"grid gap-3\">\n      {clauses.map((entry) => (\n        <FilterClauseRow\n          key={entry.index}\n          column={column}\n          type={type}\n          operators={operators}\n          clause={entry.clause}\n          processing={processing}\n          onOperator={(operator) => onUpdate(entry.index, { ...entry.clause, operator })}\n          onValue={(value) =>\n            value === \"\" ? onRemove(entry.index) : onUpdate(entry.index, { ...entry.clause, value })\n          }\n          onRemove={() => onRemove(entry.index)}\n        />\n      ))}\n\n      {adding && (\n        <FilterClauseRow\n          column={column}\n          type={type}\n          operators={operators}\n          clause={{ field: column.key, operator: draftOperator, value: \"\" }}\n          processing={processing}\n          onOperator={(operator) => {\n            if (VALUELESS_FILTER_OPERATORS.has(operator)) {\n              onAdd({ field: column.key, operator, value: \"\" });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n              return;\n            }\n            setDraftOperator(operator);\n          }}\n          onValue={(value) => {\n            if (value !== \"\") {\n              onAdd({ field: column.key, operator: draftOperator, value });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n            }\n          }}\n          onRemove={() => setAdding(false)}\n        />\n      )}\n\n      <div className=\"border-t border-lt-border pt-3\">\n        <button\n          type=\"button\"\n          data-test={`filter-${column.key}-add`}\n          className=\"inline-flex w-full items-center justify-center gap-2 rounded-lt-sm bg-lt-muted px-3 py-2 text-sm font-medium hover:bg-lt-muted/70 disabled:opacity-50\"\n          disabled={processing}\n          onClick={() => setAdding(true)}\n        >\n          <Icon name=\"plus\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n          {t(\"filter.add\", \"Add filter\")}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterClauseRow({\n  column,\n  type,\n  operators,\n  clause,\n  processing,\n  onOperator,\n  onValue,\n  onRemove,\n}: {\n  column: TableColumn;\n  type: FilterType;\n  operators: Op[];\n  clause: FilterClause;\n  processing: boolean;\n  onOperator: (operator: Op) => void;\n  onValue: (value: string) => void;\n  onRemove: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center gap-2\">\n        {operators.length > 1 ? (\n          <select\n            aria-label={t(\"filter.operator\", \"{{label}} operator\", { label: column.label })}\n            data-test={`filter-${column.key}-operator`}\n            className={cn(fieldClass, \"flex-1\")}\n            disabled={processing}\n            value={clause.operator}\n            onChange={(event) => onOperator(event.target.value as Op)}\n          >\n            {operators.map((operator) => (\n              <option key={operator} value={operator}>\n                {operatorLabel(operator)}\n              </option>\n            ))}\n          </select>\n        ) : (\n          <span className=\"flex-1 text-sm font-medium\">{operatorLabel(clause.operator)}</span>\n        )}\n        <button\n          type=\"button\"\n          aria-label={t(\"filter.remove\", \"Remove {{label}} filter\", { label: column.label })}\n          data-test={`filter-${column.key}-remove`}\n          className=\"inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onRemove}\n        >\n          <Icon name=\"trash-2\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </button>\n      </div>\n      {!valueless && (\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          ariaLabel={t(\"filter.value\", \"{{label}} filter value\", { label: column.label })}\n          value={clause.value}\n          processing={processing}\n          onCommit={onValue}\n          onClear={() => onValue(\"\")}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/table/components/column-header.d.ts

@@ -1,7 +1,9 @@
+import { HTMLAttributes } from 'react';
 import { TableColumn, TableState } from '../types';
-export declare function ColumnHeader({ column, processing, sort, state, }: {
+export declare function ColumnHeader({ column, processing, resizeHandleProps, sort, state, }: {
     column: TableColumn;
     processing: boolean;
+    resizeHandleProps?: HTMLAttributes<HTMLDivElement>;
     sort: (column: TableColumn) => void;
     state: TableState;
 }): import("react").JSX.Element;

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

@@ -1,34 +1,48 @@
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../icons/sprite.js";
+import { alignJustify, alignText } from "../align.js";
 import { getColumnAriaSort, getColumnSort } from "../query.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
 //#region resources/js/table/components/column-header.tsx
 function SortIndicator({ sort }) {
-	if (sort?.direction === "asc") return /* @__PURE__ */ jsx(ArrowUp, {
+	if (sort?.direction === "asc") return /* @__PURE__ */ jsx(Icon, {
+		name: "arrow-up",
 		"aria-hidden": "true",
-		className: "size-3.5"
+		className: "size-lt-icon-sm shrink-0"
 	});
-	if (sort?.direction === "desc") return /* @__PURE__ */ jsx(ArrowDown, {
+	if (sort?.direction === "desc") return /* @__PURE__ */ jsx(Icon, {
+		name: "arrow-down",
 		"aria-hidden": "true",
-		className: "size-3.5"
+		className: "size-lt-icon-sm shrink-0"
 	});
-	return /* @__PURE__ */ jsx(ChevronsUpDown, {
+	return /* @__PURE__ */ jsx(Icon, {
+		name: "chevrons-up-down",
 		"aria-hidden": "true",
-		className: "size-3.5 opacity-50"
+		className: "size-lt-icon-sm shrink-0 opacity-50"
 	});
 }
-function ColumnHeader({ column, processing, sort, state }) {
+function ColumnHeader({ column, processing, resizeHandleProps, sort, state }) {
 	const columnSort = getColumnSort(state, column);
-	return /* @__PURE__ */ jsx("div", {
+	const align = column.align;
+	return /* @__PURE__ */ jsxs("div", {
 		"aria-sort": getColumnAriaSort(columnSort),
-		className: "px-4 py-3 text-left align-middle font-medium text-lt-muted-fg",
+		className: cn("relative min-w-0 px-4 py-3 pr-5 align-middle font-medium text-lt-muted-fg", alignText(align)),
 		role: "columnheader",
-		children: column.sortable ? /* @__PURE__ */ jsxs("button", {
+		children: [column.sortable ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			className: "inline-flex items-center gap-1.5 font-medium",
+			"aria-label": `Sort ${column.label}`,
+			className: cn("flex w-full items-center gap-1.5 font-medium", alignJustify(align)),
+			"data-test": `sort-${column.key}`,
 			disabled: processing,
 			onClick: () => sort(column),
-			children: [`Sort ${column.label}`, /* @__PURE__ */ jsx(SortIndicator, { sort: columnSort })]
-		}) : /* @__PURE__ */ jsx("span", { children: column.label })
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 flex-1 truncate", alignText(align)),
+				children: column.label
+			}), /* @__PURE__ */ jsx(SortIndicator, { sort: columnSort })]
+		}) : /* @__PURE__ */ jsx("span", {
+			className: cn("block truncate", alignText(align)),
+			children: column.label
+		}), resizeHandleProps && /* @__PURE__ */ jsx("div", { ...resizeHandleProps })]
 	});
 }
 //#endregion

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 { ArrowDown, ArrowUp, ChevronsUpDown } from \"lucide-react\";\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 <ArrowUp aria-hidden=\"true\" className=\"size-3.5\" />;\n  }\n\n  if (sort?.direction === \"desc\") {\n    return <ArrowDown aria-hidden=\"true\" className=\"size-3.5\" />;\n  }\n\n  return <ChevronsUpDown aria-hidden=\"true\" className=\"size-3.5 opacity-50\" />;\n}\n\nexport function ColumnHeader({\n  column,\n  processing,\n  sort,\n  state,\n}: {\n  column: TableColumn;\n  processing: boolean;\n  sort: (column: TableColumn) => void;\n  state: TableState;\n}) {\n  const columnSort = getColumnSort(state, column);\n\n  return (\n    <div\n      aria-sort={getColumnAriaSort(columnSort)}\n      className=\"px-4 py-3 text-left align-middle font-medium text-lt-muted-fg\"\n      role=\"columnheader\"\n    >\n      {column.sortable ? (\n        <button\n          type=\"button\"\n          className=\"inline-flex items-center gap-1.5 font-medium\"\n          disabled={processing}\n          onClick={() => sort(column)}\n        >\n          {`Sort ${column.label}`}\n          <SortIndicator sort={columnSort} />\n        </button>\n      ) : (\n        <span>{column.label}</span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,cAAc,EAAE,QAAyC;CAChE,IAAI,MAAM,cAAc,OACtB,OAAO,oBAAC,SAAD;EAAS,eAAY;EAAO,WAAU;CAAY,CAAA;CAG3D,IAAI,MAAM,cAAc,QACtB,OAAO,oBAAC,WAAD;EAAW,eAAY;EAAO,WAAU;CAAY,CAAA;CAG7D,OAAO,oBAAC,gBAAD;EAAgB,eAAY;EAAO,WAAU;CAAuB,CAAA;AAC7E;AAEA,SAAgB,aAAa,EAC3B,QACA,YACA,MACA,SAMC;CACD,MAAM,aAAa,cAAc,OAAO,MAAM;CAE9C,OACE,oBAAC,OAAD;EACE,aAAW,kBAAkB,UAAU;EACvC,WAAU;EACV,MAAK;YAEJ,OAAO,WACN,qBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,UAAU;GACV,eAAe,KAAK,MAAM;aAJ5B,CAMG,QAAQ,OAAO,SAChB,oBAAC,eAAD,EAAe,MAAM,WAAa,CAAA,CAC5B;OAER,oBAAC,QAAD,EAAA,UAAO,OAAO,MAAY,CAAA;CAEzB,CAAA;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-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"}

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

@@ -0,0 +1,15 @@
+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, }: {
+    filters: FilterData[];
+    values: Record<string, unknown>;
+    processing: boolean;
+    hasActiveFilters: boolean;
+    onChange: (key: string, value: unknown) => void;
+    onReset: () => void;
+    onSearch?: (filterKey: string, query: string) => Promise<Option[]>;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,81 @@
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.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 }) {
+	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", {
+			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",
+				children: [/* @__PURE__ */ jsxs("span", { children: [`${filter.label}: `, /* @__PURE__ */ jsx("span", {
+					className: "font-semibold",
+					children: displayValue(filter, values[filter.key])
+				})] }), /* @__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",
+					disabled: processing,
+					"aria-label": t("filter.remove", "Remove {{label}} filter", { label: filter.label }),
+					onClick: () => onChange(filter.key, void 0),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "x",
+						"aria-hidden": "true",
+						className: "size-lt-icon-sm"
+					})
+				})]
+			}, filter.key)), hasActiveFilters && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-test": "table-filters-reset",
+				className: "text-lt-muted-fg underline-offset-2 hover:underline disabled:opacity-50",
+				disabled: processing,
+				onClick: onReset,
+				children: t("filter.resetAll", "Reset all")
+			})]
+		})]
+	});
+}
+function optionLabel(filter, value) {
+	return filterOptions(filter).find((option) => option.value === value)?.label ?? value;
+}
+function displayValue(filter, value) {
+	if (filter.type === "select") {
+		if (Array.isArray(value)) return value.map((item) => optionLabel(filter, String(item))).join(", ");
+		return optionLabel(filter, String(value));
+	}
+	if (filter.type === "ternary") return value === "true" ? stringProp(filter, "trueLabel", "True") : stringProp(filter, "falseLabel", "False");
+	if (filter.type === "date-range" && value && typeof value === "object") {
+		const range = value;
+		return [range.from, range.until].filter((part) => part).join(" – ");
+	}
+	return String(value);
+}
+//#endregion
+export { FilterBar };
+
+//# sourceMappingURL=filter-bar.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,18 @@
+import { FilterData, Option } from '../../types/generated';
+export type DateRangeValue = {
+    from?: string;
+    until?: string;
+};
+export type FilterOptionSearch = (query: string) => Promise<Option[]>;
+/**
+ * Renders the control for a single dedicated table filter, dispatching on the
+ * filter's `type`. The current value comes from the table state; `onChange`
+ * pushes a new value (an empty value clears the filter).
+ */
+export declare function TableFilterControl({ filter, value, processing, onChange, onSearch, }: {
+    filter: FilterData;
+    value: unknown;
+    processing: boolean;
+    onChange: (value: unknown) => void;
+    onSearch?: FilterOptionSearch;
+}): import("react").JSX.Element | null;