@lattice-php/lattice 0.17.2 → 0.19.0

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

@@ -1,47 +1,75 @@
 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 { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { isActiveFilterValue } from "../lib/filter-values.js";
+import { VALUELESS_FILTER_OPERATORS, operatorLabel } from "../lib/query.js";
 import { TableFilterControl } from "./filter-controls.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/filter-bar.tsx
-function FilterBar({ filters, values, processing, hasActiveFilters, onChange, onReset }) {
+function FilterBar({ clauses, columnsByKey, indicators, processing, onRemoveClause, onChange, onReset }) {
 	const { t } = useT("lattice");
-	const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));
-	if (!hasActiveFilters) return null;
+	if (clauses.length === 0 && indicators.length === 0) 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",
-				children: [/* @__PURE__ */ jsxs("span", { children: [`${filter.label}: `, /* @__PURE__ */ jsx("span", {
-					className: "font-semibold",
-					children: displayValue(filter, values[filter.key])
-				})] }), /* @__PURE__ */ jsx("button", {
+			children: [
+				clauses.map((clause, index) => {
+					const label = columnsByKey.get(clause.field)?.props.label ?? clause.field;
+					const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);
+					return /* @__PURE__ */ jsx(FilterChip, {
+						label: `${label} ${operatorLabel(clause.operator)}`,
+						value: valueless ? "" : clause.value,
+						removeTestId: `filter-chip-${clause.field}-remove`,
+						removeLabel: t("table.filter.remove", "Remove {{label}} filter", { label }),
+						processing,
+						onRemove: () => onRemoveClause(index)
+					}, `${clause.field}-${clause.operator}-${index}`);
+				}),
+				indicators.map((indicator) => /* @__PURE__ */ jsx(FilterChip, {
+					label: indicator.label,
+					value: indicator.value,
+					removeTestId: `table-filter-chip-${indicator.filter}-remove`,
+					removeLabel: t("table.filter.remove", "Remove {{label}} filter", { label: indicator.label }),
+					processing,
+					onRemove: () => onChange(indicator.filter, void 0)
+				}, `${indicator.filter}:${indicator.label}:${indicator.value}`)),
+				/* @__PURE__ */ jsx("button", {
 					type: "button",
-					"data-test": `table-filter-chip-${filter.key}-remove`,
-					className: "inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-border disabled:opacity-50",
+					"data-test": "table-filters-reset",
+					className: "text-lt-muted-fg underline-offset-2 hover:underline disabled:opacity-50",
 					disabled: processing,
-					"aria-label": t("table.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)), /* @__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("table.filter.resetAll", "Reset all")
-			})]
+					onClick: onReset,
+					children: t("table.filter.resetAll", "Reset all")
+				})
+			]
 		})
 	});
 }
+function FilterChip({ label, value, removeTestId, removeLabel, processing, onRemove }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-1.5 rounded-lt-sm bg-lt-muted px-2 py-1",
+		children: [/* @__PURE__ */ jsx("span", { children: value === "" ? /* @__PURE__ */ jsx("span", {
+			className: "font-semibold",
+			children: label
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [`${label}: `, /* @__PURE__ */ jsx("span", {
+			className: "font-semibold",
+			children: value
+		})] }) }), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-test": removeTestId,
+			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": removeLabel,
+			onClick: onRemove,
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "x",
+				"aria-hidden": "true",
+				className: "size-lt-icon-sm"
+			})
+		})]
+	});
+}
 function FilterMenu({ filters, values, processing, onChange, onSearch }) {
 	const { t } = useT("lattice");
 	const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));
@@ -67,37 +95,19 @@ function FilterMenu({ filters, values, processing, onChange, onSearch }) {
 		className: "w-80 p-4",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "grid gap-3",
-			children: filters.map((filter) => /* @__PURE__ */ jsxs("div", {
+			children: filters.map((filter) => /* @__PURE__ */ jsx("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, {
+				children: /* @__PURE__ */ jsx(TableFilterControl, {
 					filter,
 					value: values[filter.key],
 					processing,
 					onChange: (value) => onChange(filter.key, value),
-					onSearch: onSearch ? (query) => onSearch(filter.key, query) : void 0
-				})]
+					onSearch: onSearch ? (field, query, signal) => onSearch(`filter:${filter.key}.${field}`, query, signal) : void 0
+				})
 			}, filter.key))
 		})
 	})] });
 }
-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, FilterMenu };
 

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 {\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(\"table.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(\"table.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(\"table.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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"}
+{"version":3,"file":"filter-bar.js","names":[],"sources":["../../../resources/js/table/components/filter-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option } from \"@lattice-php/lattice/types/generated\";\nimport { isActiveFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"@lattice-php/lattice/table/lib/query\";\nimport type {\n  FilterClause,\n  FilterNode,\n  TableColumn,\n  TableFilterIndicator,\n} from \"@lattice-php/lattice/table/types\";\nimport { TableFilterControl } from \"./filter-controls\";\n\nexport function FilterBar({\n  clauses,\n  columnsByKey,\n  indicators,\n  processing,\n  onRemoveClause,\n  onChange,\n  onReset,\n}: {\n  clauses: FilterClause[];\n  columnsByKey: Map<string, TableColumn>;\n  indicators: TableFilterIndicator[];\n  processing: boolean;\n  onRemoveClause: (index: number) => void;\n  onChange: (key: string, value: unknown) => void;\n  onReset: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  if (clauses.length === 0 && indicators.length === 0) {\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        {clauses.map((clause, index) => {\n          const label = columnsByKey.get(clause.field)?.props.label ?? clause.field;\n          const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n          return (\n            <FilterChip\n              key={`${clause.field}-${clause.operator}-${index}`}\n              label={`${label} ${operatorLabel(clause.operator)}`}\n              value={valueless ? \"\" : clause.value}\n              removeTestId={`filter-chip-${clause.field}-remove`}\n              removeLabel={t(\"table.filter.remove\", \"Remove {{label}} filter\", { label })}\n              processing={processing}\n              onRemove={() => onRemoveClause(index)}\n            />\n          );\n        })}\n        {indicators.map((indicator) => (\n          <FilterChip\n            key={`${indicator.filter}:${indicator.label}:${indicator.value}`}\n            label={indicator.label}\n            value={indicator.value}\n            removeTestId={`table-filter-chip-${indicator.filter}-remove`}\n            removeLabel={t(\"table.filter.remove\", \"Remove {{label}} filter\", {\n              label: indicator.label,\n            })}\n            processing={processing}\n            onRemove={() => onChange(indicator.filter, undefined)}\n          />\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(\"table.filter.resetAll\", \"Reset all\")}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterChip({\n  label,\n  value,\n  removeTestId,\n  removeLabel,\n  processing,\n  onRemove,\n}: {\n  label: string;\n  value: string;\n  removeTestId: string;\n  removeLabel: string;\n  processing: boolean;\n  onRemove: () => void;\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5 rounded-lt-sm bg-lt-muted px-2 py-1\">\n      <span>\n        {value === \"\" ? (\n          <span className=\"font-semibold\">{label}</span>\n        ) : (\n          <>\n            {`${label}: `}\n            <span className=\"font-semibold\">{value}</span>\n          </>\n        )}\n      </span>\n      <button\n        type=\"button\"\n        data-test={removeTestId}\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={removeLabel}\n        onClick={onRemove}\n      >\n        <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n      </button>\n    </span>\n  );\n}\n\nexport function FilterMenu({\n  filters,\n  values,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filters: FilterNode[];\n  values: Record<string, unknown>;\n  processing: boolean;\n  onChange: (key: string, value: unknown) => void;\n  onSearch?: (searchKey: string, query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { t } = useT(\"lattice\");\n  const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));\n  const filtersLabel = t(\"table.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              <TableFilterControl\n                filter={filter}\n                value={values[filter.key]}\n                processing={processing}\n                onChange={(value) => onChange(filter.key, value)}\n                onSearch={\n                  onSearch\n                    ? (field, query, signal) =>\n                        onSearch(`filter:${filter.key}.${field}`, query, signal)\n                    : undefined\n                }\n              />\n            </div>\n          ))}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,14 +1,10 @@
-import { FilterData, Option } from '../../types/generated';
-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).
- */
+import { Option } from '../../core/types.js';
+import { FilterNode } from '../types.js';
+export type FilterOptionSearch = (field: string, query: string, signal: AbortSignal) => Promise<Option[]>;
 export declare function TableFilterControl({ filter, value, processing, onChange, onSearch, }: {
-    filter: FilterData;
+    filter: FilterNode;
     value: unknown;
     processing: boolean;
     onChange: (value: unknown) => void;
     onSearch?: FilterOptionSearch;
-}): import("react").JSX.Element | null;
+}): import("react").JSX.Element;

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

@@ -1,255 +1,127 @@
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
-import { useT } from "../../i18n/instance.js";
-import { Checkbox } from "../../core/components/checkbox.js";
-import { Combobox } from "../../core/components/combobox.js";
-import { filterOptions, stringProp } from "../filter-values.js";
-import { fieldClass } from "./filter-value-input.js";
-import { useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Renderer } from "../../core/renderer.js";
+import { FormProvider } from "../../form/hooks/context.js";
+import { PrefillProvider } from "../../form/hooks/prefill-context.js";
+import { getPath, setPath } from "../../form/lib/form-path.js";
+import { ResolvedNodesProvider } from "../../form/hooks/resolved-nodes.js";
+import { FormValuesProvider, useFormValues, useSetFormValue } from "../../form/hooks/values.js";
+import { FieldCommitOverrideProvider } from "../../form/hooks/use-field-commit.js";
+import { Checkbox } from "../../ui/checkbox.js";
+import { filterValue, isActiveFilterValue } from "../lib/filter-values.js";
+import { useCallback, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/filter-controls.tsx
-/**
-* 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).
-*/
 function TableFilterControl({ filter, value, processing, onChange, onSearch }) {
-	switch (filter.type) {
-		case "select":
-			if (filter.props.searchable === true && onSearch) return /* @__PURE__ */ jsx(SearchableSelectControl, {
+	const schema = filter.schema ?? [];
+	if (schema.length === 0) return /* @__PURE__ */ jsx(ToggleControl, {
+		filter,
+		value,
+		processing,
+		onChange
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-end gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children: /* @__PURE__ */ jsx(SchemaControl, {
 				filter,
+				schema,
 				value,
 				processing,
 				onChange,
 				onSearch
-			});
-			return filter.props.multiple === true ? /* @__PURE__ */ jsx(MultiSelectControl, {
-				filter,
-				value,
-				processing,
-				onChange
-			}) : /* @__PURE__ */ jsx(SelectControl, {
-				filter,
-				value,
-				processing,
-				onChange
-			});
-		case "ternary": return /* @__PURE__ */ jsx(TernaryControl, {
-			filter,
-			value,
-			processing,
-			onChange
-		});
-		case "date-range": return /* @__PURE__ */ jsx(DateRangeControl, {
-			filter,
-			value,
-			processing,
-			onChange
-		});
-		case "toggle": return /* @__PURE__ */ jsx(ToggleControl, {
-			filter,
-			value,
-			processing,
-			onChange
-		});
-		default: return null;
-	}
-}
-function SelectControl({ filter, value, processing, onChange }) {
-	const { t } = useT("lattice");
-	const placeholder = stringProp(filter, "placeholder", t("table.filter.all", "All"));
-	return /* @__PURE__ */ jsxs("select", {
-		"aria-label": filter.label,
-		"data-test": `table-filter-${filter.key}`,
-		className: fieldClass,
-		disabled: processing,
-		value: typeof value === "string" ? value : "",
-		onChange: (event) => onChange(event.target.value),
-		children: [/* @__PURE__ */ jsx("option", {
-			value: "",
-			children: placeholder
-		}), filterOptions(filter).map((option) => /* @__PURE__ */ jsx("option", {
-			value: option.value,
-			children: option.label
-		}, option.value))]
-	});
-}
-function MultiSelectControl({ filter, value, processing, onChange }) {
-	const { t } = useT("lattice");
-	const [open, setOpen] = useState(false);
-	const selected = Array.isArray(value) ? value : [];
-	function toggle(optionValue) {
-		onChange(selected.includes(optionValue) ? selected.filter((item) => item !== optionValue) : [...selected, optionValue]);
-	}
-	const summary = selected.length === 0 ? stringProp(filter, "placeholder", t("table.filter.all", "All")) : t("table.filter.selectedCount", "{{amount}} selected", { amount: selected.length });
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-label": filter.label,
-			"aria-expanded": open,
-			"data-test": `table-filter-${filter.key}`,
-			className: `${fieldClass} flex items-center justify-between gap-2`,
+			})
+		}), isActiveFilterValue(value) && /* @__PURE__ */ jsx("button", {
+			"aria-label": `Clear ${filter.props.label} filter`,
+			className: "inline-flex size-lt-control-md shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted hover:text-lt-fg disabled:opacity-50",
 			disabled: processing,
-			onClick: () => setOpen((current) => !current),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: summary
-			}), /* @__PURE__ */ jsx(Icon, {
-				name: "chevron-down",
+			onClick: () => onChange(void 0),
+			type: "button",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "x",
 				"aria-hidden": "true",
-				className: "size-lt-icon-sm shrink-0"
-			})]
-		}), open && /* @__PURE__ */ jsx("div", {
-			className: "absolute z-lt-dropdown 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-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}`,
-					checked: selected.includes(option.value),
-					disabled: processing,
-					onCheckedChange: () => toggle(option.value)
-				}), /* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children: option.label
-				})]
-			}, option.value))
+				className: "size-lt-icon-md"
+			})
 		})]
 	});
 }
-function SearchableSelectControl({ filter, value, processing, onChange, onSearch }) {
-	const { t } = useT("lattice");
-	const multiple = filter.props.multiple === true;
-	const [open, setOpen] = useState(false);
-	const [results, setResults] = useState(() => filterOptions(filter));
-	const [loading, setLoading] = useState(false);
-	const selected = multiple ? Array.isArray(value) ? value : [] : typeof value === "string" && value !== "" ? [value] : [];
-	const labels = new Map([...filterOptions(filter), ...results].map((option) => [option.value, option.label]));
-	const summary = selected.length === 0 ? stringProp(filter, "placeholder", t("table.filter.all", "All")) : multiple ? t("table.filter.selectedCount", "{{amount}} selected", { amount: selected.length }) : labels.get(selected[0]) ?? selected[0];
-	function search(query) {
-		setLoading(true);
-		onSearch(query).then((options) => {
-			setResults(options);
-			setLoading(false);
-		});
-	}
-	function choose(optionValue) {
-		onChange(multiple ? selected.includes(optionValue) ? selected.filter((item) => item !== optionValue) : [...selected, optionValue] : optionValue);
-	}
-	return /* @__PURE__ */ jsx(Combobox, {
-		contentClassName: "w-60",
-		loading,
-		multiple,
-		onSearch: search,
-		onSelect: choose,
-		open,
-		onOpenChange: setOpen,
-		options: results,
-		searchLabel: t("table.filter.search", "Search"),
-		selected,
-		testId: `table-filter-${filter.key}`,
-		trigger: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-			className: "truncate",
-			children: summary
-		}), /* @__PURE__ */ jsx(Icon, {
-			name: "chevron-down",
-			"aria-hidden": "true",
-			className: "size-lt-icon-sm shrink-0"
-		})] }),
-		triggerClassName: cn(fieldClass, "flex items-center justify-between gap-2"),
-		triggerProps: {
-			"aria-label": filter.label,
-			"data-test": `table-filter-${filter.key}`,
-			disabled: processing
-		}
-	});
-}
-function TernaryControl({ filter, value, processing, onChange }) {
-	const { t } = useT("lattice");
-	const placeholder = stringProp(filter, "placeholder", t("table.filter.all", "All"));
-	const trueLabel = stringProp(filter, "trueLabel", t("table.filter.true", "True"));
-	const falseLabel = stringProp(filter, "falseLabel", t("table.filter.false", "False"));
-	return /* @__PURE__ */ jsxs("select", {
-		"aria-label": filter.label,
-		"data-test": `table-filter-${filter.key}`,
-		className: fieldClass,
-		disabled: processing,
-		value: typeof value === "string" ? value : "",
-		onChange: (event) => onChange(event.target.value),
-		children: [
-			/* @__PURE__ */ jsx("option", {
-				value: "",
-				children: placeholder
-			}),
-			/* @__PURE__ */ jsx("option", {
-				value: "true",
-				children: trueLabel
-			}),
-			/* @__PURE__ */ jsx("option", {
-				value: "false",
-				children: falseLabel
+function SchemaControl({ filter, schema, value, processing, onChange, onSearch }) {
+	const initial = useMemo(() => filterValue(value), [value]);
+	return /* @__PURE__ */ jsx(FormProvider, {
+		value: useMemo(() => ({
+			action: "#",
+			clearErrors: () => {},
+			componentId: `table-filter-${filter.key}`,
+			componentRef: "",
+			errors: {},
+			fieldIdPrefix: `table-filter-${filter.key}`,
+			fieldLabels: {},
+			precognitive: false,
+			processing,
+			searchOptions: (field, query, _values, signal) => onSearch ? onSearch(field, query, signal) : Promise.resolve([]),
+			validate: () => {}
+		}), [
+			filter.key,
+			onSearch,
+			processing
+		]),
+		children: /* @__PURE__ */ jsx(PrefillProvider, {
+			value: { markUserEdit: () => {} },
+			children: /* @__PURE__ */ jsx(ResolvedNodesProvider, {
+				nodes: {},
+				children: /* @__PURE__ */ jsx(FormValuesProvider, {
+					initial,
+					children: /* @__PURE__ */ jsx(TableFilterCommitBridge, {
+						onChange,
+						children: /* @__PURE__ */ jsx("div", {
+							"aria-disabled": processing,
+							className: cn("grid gap-3", processing && "pointer-events-none opacity-60"),
+							children: /* @__PURE__ */ jsx(Renderer, { nodes: schema })
+						})
+					})
+				})
 			})
-		]
+		})
 	});
 }
-function DateRangeControl({ filter, value, processing, onChange }) {
-	const { t } = useT("lattice");
-	const range = value && typeof value === "object" ? value : {};
-	function commit(next) {
-		onChange({
-			from: next.from ?? "",
-			until: next.until ?? ""
-		});
-	}
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-1",
-		children: [
-			/* @__PURE__ */ jsx("input", {
-				type: "date",
-				"aria-label": t("table.filter.from", "{{label}} from", { label: filter.label }),
-				"data-test": `table-filter-${filter.key}-from`,
-				className: fieldClass,
-				disabled: processing,
-				value: range.from ?? "",
-				onChange: (event) => commit({
-					...range,
-					from: event.target.value
-				})
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "text-lt-muted-fg",
-				"aria-hidden": "true",
-				children: "–"
-			}),
-			/* @__PURE__ */ jsx("input", {
-				type: "date",
-				"aria-label": t("table.filter.until", "{{label}} until", { label: filter.label }),
-				"data-test": `table-filter-${filter.key}-until`,
-				className: fieldClass,
-				disabled: processing,
-				value: range.until ?? "",
-				onChange: (event) => commit({
-					...range,
-					until: event.target.value
-				})
-			})
-		]
+function TableFilterCommitBridge({ children, onChange }) {
+	const values = useFormValues();
+	const setValue = useSetFormValue();
+	const valuesRef = useRef(values);
+	valuesRef.current = values;
+	const write = useCallback((name, value) => {
+		const nextValue = typeof value === "function" ? value(getPath(valuesRef.current, name)) : value;
+		const next = setPath(valuesRef.current, name, nextValue);
+		valuesRef.current = next;
+		setValue(name, nextValue);
+		onChange(next);
+	}, [onChange, setValue]);
+	return /* @__PURE__ */ jsx(FieldCommitOverrideProvider, {
+		value: useMemo(() => ({
+			blur: () => {},
+			change: write,
+			commit: write
+		}), [write]),
+		children
 	});
 }
 function ToggleControl({ filter, value, processing, onChange }) {
-	const checked = value === "1" || value === true || value === "true";
+	const checked = isTruthy(filterValue(value).value);
 	return /* @__PURE__ */ jsxs("label", {
 		className: "flex h-lt-control-md cursor-pointer items-center gap-2 text-sm",
 		children: [/* @__PURE__ */ jsx(Checkbox, {
-			"aria-label": filter.label,
+			"aria-label": filter.props.label ?? void 0,
 			"data-test": `table-filter-${filter.key}`,
 			checked,
 			disabled: processing,
-			onCheckedChange: (next) => onChange(next === true ? "1" : "")
-		}), /* @__PURE__ */ jsx("span", { children: filter.label })]
+			onCheckedChange: (next) => onChange(next === true ? { value: "1" } : void 0)
+		}), /* @__PURE__ */ jsx("span", { children: filter.props.label })]
 	});
 }
+function isTruthy(value) {
+	return value === true || value === "1" || value === 1 || value === "true";
+}
 //#endregion
 export { TableFilterControl };
 

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\ntype 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(\"table.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(\"table.filter.all\", \"All\"))\n      : t(\"table.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-lt-dropdown 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(\"table.filter.all\", \"All\"))\n      : multiple\n        ? t(\"table.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(\"table.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(\"table.filter.all\", \"All\"));\n  const trueLabel = stringProp(filter, \"trueLabel\", t(\"table.filter.true\", \"True\"));\n  const falseLabel = stringProp(filter, \"falseLabel\", t(\"table.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(\"table.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(\"table.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-lt-control-md 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,oBAAoB,KAAK,CAAC;CAElF,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,oBAAoB,KAAK,CAAC,IAC9D,EAAE,8BAA8B,uBAAuB,EAAE,QAAQ,SAAS,OAAO,CAAC;CAExF,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,oBAAoB,KAAK,CAAC,IAC9D,WACE,EAAE,8BAA8B,uBAAuB,EAAE,QAAQ,SAAS,OAAO,CAAC,IACjF,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,uBAAuB,QAAQ;EACpC;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,oBAAoB,KAAK,CAAC;CAClF,MAAM,YAAY,WAAW,QAAQ,aAAa,EAAE,qBAAqB,MAAM,CAAC;CAChF,MAAM,aAAa,WAAW,QAAQ,cAAc,EAAE,sBAAsB,OAAO,CAAC;CAEpF,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,qBAAqB,kBAAkB,EAAE,OAAO,OAAO,MAAM,CAAC;IAC5E,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,sBAAsB,mBAAmB,EAAE,OAAO,OAAO,MAAM,CAAC;IAC9E,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 { useCallback, useMemo, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Checkbox } from \"@lattice-php/lattice/ui/checkbox\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport type { Node, Option } from \"@lattice-php/lattice/core/types\";\nimport {\n  FieldCommitOverrideProvider,\n  FormProvider,\n  FormValuesProvider,\n  getPath,\n  PrefillProvider,\n  ResolvedNodesProvider,\n  setPath,\n  useFormValues,\n  useSetFormValue,\n} from \"@lattice-php/lattice/form/embed\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { filterValue, isActiveFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport type { FilterNode } from \"@lattice-php/lattice/table/types\";\n\nexport type FilterOptionSearch = (\n  field: string,\n  query: string,\n  signal: AbortSignal,\n) => Promise<Option[]>;\n\ntype FilterValue = Record<string, unknown>;\n\nexport function TableFilterControl({\n  filter,\n  value,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterNode;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const schema = filter.schema ?? [];\n\n  if (schema.length === 0) {\n    return (\n      <ToggleControl filter={filter} value={value} processing={processing} onChange={onChange} />\n    );\n  }\n\n  return (\n    <div className=\"flex items-end gap-2\">\n      <div className=\"min-w-0 flex-1\">\n        <SchemaControl\n          filter={filter}\n          schema={schema}\n          value={value}\n          processing={processing}\n          onChange={onChange}\n          onSearch={onSearch}\n        />\n      </div>\n      {isActiveFilterValue(value) && (\n        <button\n          aria-label={`Clear ${filter.props.label} filter`}\n          className=\"inline-flex size-lt-control-md shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted hover:text-lt-fg disabled:opacity-50\"\n          disabled={processing}\n          onClick={() => onChange(undefined)}\n          type=\"button\"\n        >\n          <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nfunction SchemaControl({\n  filter,\n  schema,\n  value,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterNode;\n  schema: Node[];\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const initial = useMemo(() => filterValue(value), [value]);\n  const form = useMemo(\n    () => ({\n      action: \"#\",\n      clearErrors: () => {},\n      componentId: `table-filter-${filter.key}`,\n      componentRef: \"\",\n      errors: {},\n      fieldIdPrefix: `table-filter-${filter.key}`,\n      fieldLabels: {},\n      precognitive: false,\n      processing,\n      searchOptions: (\n        field: string,\n        query: string,\n        _values: Record<string, unknown>,\n        signal: AbortSignal,\n      ) => (onSearch ? onSearch(field, query, signal) : Promise.resolve([])),\n      validate: () => {},\n    }),\n    [filter.key, onSearch, processing],\n  );\n\n  return (\n    <FormProvider value={form}>\n      <PrefillProvider value={{ markUserEdit: () => {} }}>\n        <ResolvedNodesProvider nodes={{}}>\n          <FormValuesProvider initial={initial}>\n            <TableFilterCommitBridge onChange={onChange}>\n              <div\n                aria-disabled={processing}\n                className={cn(\"grid gap-3\", processing && \"pointer-events-none opacity-60\")}\n              >\n                <Renderer nodes={schema} />\n              </div>\n            </TableFilterCommitBridge>\n          </FormValuesProvider>\n        </ResolvedNodesProvider>\n      </PrefillProvider>\n    </FormProvider>\n  );\n}\n\nfunction TableFilterCommitBridge({\n  children,\n  onChange,\n}: {\n  children: ReactNode;\n  onChange: (value: FilterValue) => void;\n}) {\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n\n  const write = useCallback(\n    (name: string, value: unknown) => {\n      const nextValue =\n        typeof value === \"function\"\n          ? (value as (previous: unknown) => unknown)(getPath(valuesRef.current, name))\n          : value;\n      const next = setPath(valuesRef.current, name, nextValue);\n\n      valuesRef.current = next;\n      setValue(name, nextValue);\n      onChange(next);\n    },\n    [onChange, setValue],\n  );\n\n  const commit = useMemo(\n    () => ({\n      blur: () => {},\n      change: write,\n      commit: write,\n    }),\n    [write],\n  );\n\n  return <FieldCommitOverrideProvider value={commit}>{children}</FieldCommitOverrideProvider>;\n}\n\nfunction ToggleControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterNode;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const checked = isTruthy(filterValue(value).value);\n\n  return (\n    <label className=\"flex h-lt-control-md cursor-pointer items-center gap-2 text-sm\">\n      <Checkbox\n        aria-label={filter.props.label ?? undefined}\n        data-test={`table-filter-${filter.key}`}\n        checked={checked}\n        disabled={processing}\n        onCheckedChange={(next) => onChange(next === true ? { value: \"1\" } : undefined)}\n      />\n      <span>{filter.props.label}</span>\n    </label>\n  );\n}\n\nfunction isTruthy(value: unknown): boolean {\n  return value === true || value === \"1\" || value === 1 || value === \"true\";\n}\n"],"mappings":"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"}