@lattice-php/lattice 0.1.0 → 0.2.0

package/dist/table/bulk.js.map

@@ -1 +1 @@
-{"version":3,"file":"bulk.js","names":[],"sources":["../../resources/js/table/bulk.ts"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\n\nexport type BulkActionVariant =\n  | \"default\"\n  | \"destructive\"\n  | \"ghost\"\n  | \"link\"\n  | \"outline\"\n  | \"secondary\";\n\nexport type BulkActionConfirmation = {\n  cancelLabel?: string;\n  confirmLabel?: string;\n  description?: string;\n  title?: string;\n};\n\nexport type BulkAction = {\n  id: string;\n  label: string;\n  method: Method;\n  endpoint: string;\n  ref: string;\n  variant: BulkActionVariant;\n  confirmation: BulkActionConfirmation | null;\n};\n\nconst methods = [\"delete\", \"get\", \"patch\", \"post\", \"put\"] satisfies Method[];\n\nfunction asString(value: unknown, fallback = \"\"): string {\n  return typeof value === \"string\" ? value : fallback;\n}\n\nfunction asMethod(value: unknown): Method {\n  return methods.includes(value as Method) ? (value as Method) : \"post\";\n}\n\nfunction asVariant(value: unknown): BulkActionVariant {\n  return typeof value === \"string\" ? (value as BulkActionVariant) : \"default\";\n}\n\nfunction asConfirmation(value: unknown): BulkActionConfirmation | null {\n  if (typeof value !== \"object\" || value === null || Array.isArray(value)) {\n    return null;\n  }\n\n  return value as BulkActionConfirmation;\n}\n\nexport function getBulkActions(value: unknown): BulkAction[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.flatMap((item): BulkAction[] => {\n    if (typeof item !== \"object\" || item === null) {\n      return [];\n    }\n\n    const record = item as Record<string, unknown>;\n    const props =\n      typeof record.props === \"object\" && record.props !== null\n        ? (record.props as Record<string, unknown>)\n        : {};\n    const endpoint = asString(props.endpoint);\n\n    if (endpoint === \"\") {\n      return [];\n    }\n\n    return [\n      {\n        id: asString(record.id),\n        label: asString(props.label, \"Run action\"),\n        method: asMethod(props.method),\n        endpoint,\n        ref: asString(props.ref),\n        variant: asVariant(props.variant),\n        confirmation: asConfirmation(props.confirmation),\n      },\n    ];\n  });\n}\n"],"mappings":";AA2BA,IAAM,UAAU;CAAC;CAAU;CAAO;CAAS;CAAQ;AAAK;AAExD,SAAS,SAAS,OAAgB,WAAW,IAAY;CACvD,OAAO,OAAO,UAAU,WAAW,QAAQ;AAC7C;AAEA,SAAS,SAAS,OAAwB;CACxC,OAAO,QAAQ,SAAS,KAAe,IAAK,QAAmB;AACjE;AAEA,SAAS,UAAU,OAAmC;CACpD,OAAO,OAAO,UAAU,WAAY,QAA8B;AACpE;AAEA,SAAS,eAAe,OAA+C;CACrE,IAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,MAAM,QAAQ,KAAK,GACpE,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,eAAe,OAA8B;CAC3D,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,SAAS,SAAuB;EAC3C,IAAI,OAAO,SAAS,YAAY,SAAS,MACvC,OAAO,CAAC;EAGV,MAAM,SAAS;EACf,MAAM,QACJ,OAAO,OAAO,UAAU,YAAY,OAAO,UAAU,OAChD,OAAO,QACR,CAAC;EACP,MAAM,WAAW,SAAS,MAAM,QAAQ;EAExC,IAAI,aAAa,IACf,OAAO,CAAC;EAGV,OAAO,CACL;GACE,IAAI,SAAS,OAAO,EAAE;GACtB,OAAO,SAAS,MAAM,OAAO,YAAY;GACzC,QAAQ,SAAS,MAAM,MAAM;GAC7B;GACA,KAAK,SAAS,MAAM,GAAG;GACvB,SAAS,UAAU,MAAM,OAAO;GAChC,cAAc,eAAe,MAAM,YAAY;EACjD,CACF;CACF,CAAC;AACH"}
+{"version":3,"file":"bulk.js","names":[],"sources":["../../resources/js/table/bulk.ts"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\nimport type { Node } from \"@lattice/lattice/core/types\";\nimport type { Action, ActionNode, ButtonVariant } from \"@lattice/lattice/types/generated\";\n\nexport type BulkAction = {\n  id: string;\n  label: string;\n  method: Method;\n  endpoint: string;\n  ref: string;\n  variant: ButtonVariant;\n  confirmation: Action[\"confirmation\"];\n  form: Node | null;\n};\n\nexport function getBulkActions(actions: ActionNode[] | undefined): BulkAction[] {\n  return (actions ?? []).flatMap((node): BulkAction[] => {\n    if (node.type === \"action.group\") {\n      return [];\n    }\n\n    const props = node.props;\n\n    if (!props.endpoint) {\n      return [];\n    }\n\n    return [\n      {\n        id: node.id ?? \"\",\n        label: props.label ?? \"Run action\",\n        method: props.method ?? \"post\",\n        endpoint: props.endpoint,\n        ref: props.ref ?? \"\",\n        variant: props.variant ?? \"default\",\n        confirmation: props.confirmation,\n        form: (props.form as unknown as Node | null) ?? null,\n      },\n    ];\n  });\n}\n"],"mappings":";AAeA,SAAgB,eAAe,SAAiD;CAC9E,QAAQ,WAAW,CAAC,GAAG,SAAS,SAAuB;EACrD,IAAI,KAAK,SAAS,gBAChB,OAAO,CAAC;EAGV,MAAM,QAAQ,KAAK;EAEnB,IAAI,CAAC,MAAM,UACT,OAAO,CAAC;EAGV,OAAO,CACL;GACE,IAAI,KAAK,MAAM;GACf,OAAO,MAAM,SAAS;GACtB,QAAQ,MAAM,UAAU;GACxB,UAAU,MAAM;GAChB,KAAK,MAAM,OAAO;GAClB,SAAS,MAAM,WAAW;GAC1B,cAAc,MAAM;GACpB,MAAO,MAAM,QAAmC;EAClD,CACF;CACF,CAAC;AACH"}

package/dist/table/column-registry.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { TableColumn, TableRow } from './types';
+export type ColumnCellArgs = {
+    column: TableColumn;
+    row: TableRow;
+    value: unknown;
+};
+export type ColumnCellComponent = (args: ColumnCellArgs) => ReactNode;
+export type ColumnRegistry = Record<string, ColumnCellComponent>;

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

@@ -1,15 +1,23 @@
 import { withRefHeader } from "../../core/component-ref.js";
 import { Button } from "../../core/components/button.js";
+import { useT } from "../../i18n/instance.js";
 import { Spinner } from "../../core/components/spinner.js";
 import { ConfirmDialog } from "../../core/components/confirm-dialog.js";
 import { dispatchActionEffects, dispatchActionError, getActionEffects } from "../../action/effects.js";
+import { ActionForm } from "../../action/components/action-form.js";
 import { useState } from "react";
 import { useHttp } from "@inertiajs/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/bulk-bar.tsx
 function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAllMatching, onSelectAllMatching, onCompleted }) {
+	const { t } = useT("lattice");
 	const http = useHttp({});
 	const [confirming, setConfirming] = useState(null);
+	const [filling, setFilling] = useState(null);
+	const selectionPayload = () => allMatching ? {
+		allMatching: true,
+		...query
+	} : { selected: selectedKeys };
 	async function submit(action) {
 		try {
 			http.transform((data) => ({
@@ -27,6 +35,10 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 		}
 	}
 	function run(action) {
+		if (action.form) {
+			setFilling(action);
+			return;
+		}
 		if (action.confirmation) {
 			setConfirming(action);
 			return;
@@ -39,18 +51,20 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				className: "font-medium",
-				children: allMatching ? `All ${count} selected` : `${count} selected`
+				children: allMatching ? t("bulk.allSelected", "All {{count}} selected", { count }) : t("bulk.selected", "{{count}} selected", { count })
 			}),
 			canSelectAllMatching && /* @__PURE__ */ jsx("button", {
 				type: "button",
+				"data-test": "bulk-select-all-matching",
 				className: "font-medium text-lt-primary underline underline-offset-2",
 				onClick: onSelectAllMatching,
-				children: `Select all ${total} matching`
+				children: t("bulk.selectAllMatching", "Select all {{total}} matching", { total })
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-wrap items-center gap-2",
 				children: actions.map((action) => /* @__PURE__ */ jsxs(Button, {
 					type: "button",
+					"data-test": `bulk-action-${action.label.toLowerCase().replace(/\s+/g, "-")}`,
 					variant: action.variant,
 					disabled: http.processing,
 					onClick: () => run(action),
@@ -59,13 +73,30 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 			}),
 			confirming?.confirmation && /* @__PURE__ */ jsx(ConfirmDialog, {
 				title: confirming.confirmation.title ?? confirming.label,
-				description: confirming.confirmation.description,
+				description: confirming.confirmation.description ?? void 0,
 				confirmLabel: confirming.confirmation.confirmLabel ?? confirming.label,
 				cancelLabel: confirming.confirmation.cancelLabel ?? "Cancel",
 				confirmVariant: confirming.variant,
 				processing: http.processing,
 				onConfirm: () => void submit(confirming),
 				onCancel: () => setConfirming(null)
+			}),
+			filling?.form && /* @__PURE__ */ jsx(ActionForm, {
+				cancelLabel: filling.confirmation?.cancelLabel ?? "Cancel",
+				componentRef: filling.ref,
+				description: filling.confirmation?.description ?? void 0,
+				endpoint: filling.endpoint,
+				extraData: selectionPayload(),
+				formNode: filling.form,
+				method: filling.method,
+				onClose: () => setFilling(null),
+				onSuccess: (response) => {
+					dispatchActionEffects(getActionEffects(response.effects));
+					setFilling(null);
+					onCompleted();
+				},
+				submitLabel: filling.confirmation?.confirmLabel ?? filling.label,
+				title: filling.confirmation?.title ?? filling.label
 			})
 		]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useHttp } from \"@inertiajs/react\";\nimport { useState } from \"react\";\nimport {\n  dispatchActionEffects,\n  dispatchActionError,\n  getActionEffects,\n} from \"@lattice/lattice/action/effects\";\nimport type { ActionEffect } from \"@lattice/lattice/action/effects\";\nimport { withRefHeader } from \"@lattice/lattice/core/component-ref\";\nimport { Button } from \"@lattice/lattice/core/components/button\";\nimport { ConfirmDialog } from \"@lattice/lattice/core/components/confirm-dialog\";\nimport { Spinner } from \"@lattice/lattice/core/components/spinner\";\nimport type { BulkAction } from \"../bulk\";\n\ntype BulkResponse = {\n  data?: Record<string, unknown>;\n  effects?: ActionEffect[];\n  ok?: boolean;\n};\n\ntype BulkData = {\n  allMatching?: boolean;\n  selected?: string[];\n};\n\nexport function BulkBar({\n  actions,\n  selectedKeys,\n  allMatching,\n  total,\n  query,\n  canSelectAllMatching,\n  onSelectAllMatching,\n  onCompleted,\n}: {\n  actions: BulkAction[];\n  selectedKeys: string[];\n  allMatching: boolean;\n  total?: number;\n  query: Record<string, unknown>;\n  canSelectAllMatching: boolean;\n  onSelectAllMatching: () => void;\n  onCompleted: () => void;\n}) {\n  const http = useHttp<BulkData, BulkResponse>({});\n  const [confirming, setConfirming] = useState<BulkAction | null>(null);\n\n  async function submit(action: BulkAction): Promise<void> {\n    try {\n      http.transform((data) => ({\n        ...data,\n        ...(allMatching ? { allMatching: true, ...query } : { selected: selectedKeys }),\n      }));\n\n      const response = await http[action.method](action.endpoint, {\n        headers: withRefHeader(action.ref ?? \"\"),\n      });\n\n      dispatchActionEffects(getActionEffects(response.effects));\n      setConfirming(null);\n      onCompleted();\n    } catch (error) {\n      dispatchActionError(error);\n    }\n  }\n\n  function run(action: BulkAction): void {\n    if (action.confirmation) {\n      setConfirming(action);\n\n      return;\n    }\n\n    void submit(action);\n  }\n\n  const count = allMatching ? (total ?? selectedKeys.length) : selectedKeys.length;\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm\">\n      <span className=\"font-medium\">\n        {allMatching ? `All ${count} selected` : `${count} selected`}\n      </span>\n      {canSelectAllMatching && (\n        <button\n          type=\"button\"\n          className=\"font-medium text-lt-primary underline underline-offset-2\"\n          onClick={onSelectAllMatching}\n        >\n          {`Select all ${total} matching`}\n        </button>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {actions.map((action) => (\n          <Button\n            key={action.id}\n            type=\"button\"\n            variant={action.variant}\n            disabled={http.processing}\n            onClick={() => run(action)}\n          >\n            {http.processing && <Spinner />}\n            {action.label}\n          </Button>\n        ))}\n      </div>\n\n      {confirming?.confirmation && (\n        <ConfirmDialog\n          title={confirming.confirmation.title ?? confirming.label}\n          description={confirming.confirmation.description}\n          confirmLabel={confirming.confirmation.confirmLabel ?? confirming.label}\n          cancelLabel={confirming.confirmation.cancelLabel ?? \"Cancel\"}\n          confirmVariant={confirming.variant}\n          processing={http.processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,OAAO,QAAgC,CAAC,CAAC;CAC/C,MAAM,CAAC,YAAY,iBAAiB,SAA4B,IAAI;CAEpE,eAAe,OAAO,QAAmC;EACvD,IAAI;GACF,KAAK,WAAW,UAAU;IACxB,GAAG;IACH,GAAI,cAAc;KAAE,aAAa;KAAM,GAAG;IAAM,IAAI,EAAE,UAAU,aAAa;GAC/E,EAAE;GAMF,sBAAsB,kBAAiB,MAJhB,KAAK,OAAO,QAAQ,OAAO,UAAU,EAC1D,SAAS,cAAc,OAAO,OAAO,EAAE,EACzC,CAAC,GAE+C,OAAO,CAAC;GACxD,cAAc,IAAI;GAClB,YAAY;EACd,SAAS,OAAO;GACd,oBAAoB,KAAK;EAC3B;CACF;CAEA,SAAS,IAAI,QAA0B;EACrC,IAAI,OAAO,cAAc;GACvB,cAAc,MAAM;GAEpB;EACF;EAEA,OAAY,MAAM;CACpB;CAEA,MAAM,QAAQ,cAAe,SAAS,aAAa,SAAU,aAAa;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,QAAD;IAAM,WAAU;cACb,cAAc,OAAO,MAAM,aAAa,GAAG,MAAM;GAC9C,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS;cAER,cAAc,MAAM;GACf,CAAA;GAEV,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,qBAAC,QAAD;KAEE,MAAK;KACL,SAAS,OAAO;KAChB,UAAU,KAAK;KACf,eAAe,IAAI,MAAM;eAL3B,CAOG,KAAK,cAAc,oBAAC,SAAD,CAAU,CAAA,GAC7B,OAAO,KACF;OARD,OAAO,EAQN,CACT;GACE,CAAA;GAEJ,YAAY,gBACX,oBAAC,eAAD;IACE,OAAO,WAAW,aAAa,SAAS,WAAW;IACnD,aAAa,WAAW,aAAa;IACrC,cAAc,WAAW,aAAa,gBAAgB,WAAW;IACjE,aAAa,WAAW,aAAa,eAAe;IACpD,gBAAgB,WAAW;IAC3B,YAAY,KAAK;IACjB,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;EAEA;;AAET"}
+{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useHttp } from \"@inertiajs/react\";\nimport { useState } from \"react\";\nimport { ActionForm } from \"@lattice/lattice/action/components/action-form\";\nimport {\n  dispatchActionEffects,\n  dispatchActionError,\n  getActionEffects,\n} from \"@lattice/lattice/action/effects\";\nimport type { ActionResponse } from \"@lattice/lattice/action/effects\";\nimport { withRefHeader } from \"@lattice/lattice/core/component-ref\";\nimport { Button } from \"@lattice/lattice/core/components/button\";\nimport { ConfirmDialog } from \"@lattice/lattice/core/components/confirm-dialog\";\nimport { Spinner } from \"@lattice/lattice/core/components/spinner\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport type { BulkAction } from \"../bulk\";\n\ntype BulkData = {\n  allMatching?: boolean;\n  selected?: string[];\n};\n\nexport function BulkBar({\n  actions,\n  selectedKeys,\n  allMatching,\n  total,\n  query,\n  canSelectAllMatching,\n  onSelectAllMatching,\n  onCompleted,\n}: {\n  actions: BulkAction[];\n  selectedKeys: string[];\n  allMatching: boolean;\n  total?: number;\n  query: Record<string, unknown>;\n  canSelectAllMatching: boolean;\n  onSelectAllMatching: () => void;\n  onCompleted: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const http = useHttp<BulkData, ActionResponse>({});\n  const [confirming, setConfirming] = useState<BulkAction | null>(null);\n  const [filling, setFilling] = useState<BulkAction | null>(null);\n\n  const selectionPayload = (): Record<string, unknown> =>\n    allMatching ? { allMatching: true, ...query } : { selected: selectedKeys };\n\n  async function submit(action: BulkAction): Promise<void> {\n    try {\n      http.transform((data) => ({\n        ...data,\n        ...(allMatching ? { allMatching: true, ...query } : { selected: selectedKeys }),\n      }));\n\n      const response = await http[action.method](action.endpoint, {\n        headers: withRefHeader(action.ref ?? \"\"),\n      });\n\n      dispatchActionEffects(getActionEffects(response.effects));\n      setConfirming(null);\n      onCompleted();\n    } catch (error) {\n      dispatchActionError(error);\n    }\n  }\n\n  function run(action: BulkAction): void {\n    if (action.form) {\n      setFilling(action);\n\n      return;\n    }\n\n    if (action.confirmation) {\n      setConfirming(action);\n\n      return;\n    }\n\n    void submit(action);\n  }\n\n  const count = allMatching ? (total ?? selectedKeys.length) : selectedKeys.length;\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm\">\n      <span className=\"font-medium\">\n        {allMatching\n          ? t(\"bulk.allSelected\", \"All {{count}} selected\", { count })\n          : t(\"bulk.selected\", \"{{count}} selected\", { count })}\n      </span>\n      {canSelectAllMatching && (\n        <button\n          type=\"button\"\n          data-test=\"bulk-select-all-matching\"\n          className=\"font-medium text-lt-primary underline underline-offset-2\"\n          onClick={onSelectAllMatching}\n        >\n          {t(\"bulk.selectAllMatching\", \"Select all {{total}} matching\", { total })}\n        </button>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {actions.map((action) => (\n          <Button\n            key={action.id}\n            type=\"button\"\n            data-test={`bulk-action-${action.label.toLowerCase().replace(/\\s+/g, \"-\")}`}\n            variant={action.variant}\n            disabled={http.processing}\n            onClick={() => run(action)}\n          >\n            {http.processing && <Spinner />}\n            {action.label}\n          </Button>\n        ))}\n      </div>\n\n      {confirming?.confirmation && (\n        <ConfirmDialog\n          title={confirming.confirmation.title ?? confirming.label}\n          description={confirming.confirmation.description ?? undefined}\n          confirmLabel={confirming.confirmation.confirmLabel ?? confirming.label}\n          cancelLabel={confirming.confirmation.cancelLabel ?? \"Cancel\"}\n          confirmVariant={confirming.variant}\n          processing={http.processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n\n      {filling?.form && (\n        <ActionForm\n          cancelLabel={filling.confirmation?.cancelLabel ?? \"Cancel\"}\n          componentRef={filling.ref}\n          description={filling.confirmation?.description ?? undefined}\n          endpoint={filling.endpoint}\n          extraData={selectionPayload()}\n          formNode={filling.form}\n          method={filling.method}\n          onClose={() => setFilling(null)}\n          onSuccess={(response) => {\n            dispatchActionEffects(getActionEffects(response.effects));\n            setFilling(null);\n            onCompleted();\n          }}\n          submitLabel={filling.confirmation?.confirmLabel ?? filling.label}\n          title={filling.confirmation?.title ?? filling.label}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAqBA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,OAAO,QAAkC,CAAC,CAAC;CACjD,MAAM,CAAC,YAAY,iBAAiB,SAA4B,IAAI;CACpE,MAAM,CAAC,SAAS,cAAc,SAA4B,IAAI;CAE9D,MAAM,yBACJ,cAAc;EAAE,aAAa;EAAM,GAAG;CAAM,IAAI,EAAE,UAAU,aAAa;CAE3E,eAAe,OAAO,QAAmC;EACvD,IAAI;GACF,KAAK,WAAW,UAAU;IACxB,GAAG;IACH,GAAI,cAAc;KAAE,aAAa;KAAM,GAAG;IAAM,IAAI,EAAE,UAAU,aAAa;GAC/E,EAAE;GAMF,sBAAsB,kBAAiB,MAJhB,KAAK,OAAO,QAAQ,OAAO,UAAU,EAC1D,SAAS,cAAc,OAAO,OAAO,EAAE,EACzC,CAAC,GAE+C,OAAO,CAAC;GACxD,cAAc,IAAI;GAClB,YAAY;EACd,SAAS,OAAO;GACd,oBAAoB,KAAK;EAC3B;CACF;CAEA,SAAS,IAAI,QAA0B;EACrC,IAAI,OAAO,MAAM;GACf,WAAW,MAAM;GAEjB;EACF;EAEA,IAAI,OAAO,cAAc;GACvB,cAAc,MAAM;GAEpB;EACF;EAEA,OAAY,MAAM;CACpB;CAEA,MAAM,QAAQ,cAAe,SAAS,aAAa,SAAU,aAAa;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,QAAD;IAAM,WAAU;cACb,cACG,EAAE,oBAAoB,0BAA0B,EAAE,MAAM,CAAC,IACzD,EAAE,iBAAiB,sBAAsB,EAAE,MAAM,CAAC;GAClD,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,0BAA0B,iCAAiC,EAAE,MAAM,CAAC;GACjE,CAAA;GAEV,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,qBAAC,QAAD;KAEE,MAAK;KACL,aAAW,eAAe,OAAO,MAAM,YAAY,EAAE,QAAQ,QAAQ,GAAG;KACxE,SAAS,OAAO;KAChB,UAAU,KAAK;KACf,eAAe,IAAI,MAAM;eAN3B,CAQG,KAAK,cAAc,oBAAC,SAAD,CAAU,CAAA,GAC7B,OAAO,KACF;OATD,OAAO,EASN,CACT;GACE,CAAA;GAEJ,YAAY,gBACX,oBAAC,eAAD;IACE,OAAO,WAAW,aAAa,SAAS,WAAW;IACnD,aAAa,WAAW,aAAa,eAAe,KAAA;IACpD,cAAc,WAAW,aAAa,gBAAgB,WAAW;IACjE,aAAa,WAAW,aAAa,eAAe;IACpD,gBAAgB,WAAW;IAC3B,YAAY,KAAK;IACjB,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;GAGF,SAAS,QACR,oBAAC,YAAD;IACE,aAAa,QAAQ,cAAc,eAAe;IAClD,cAAc,QAAQ;IACtB,aAAa,QAAQ,cAAc,eAAe,KAAA;IAClD,UAAU,QAAQ;IAClB,WAAW,iBAAiB;IAC5B,UAAU,QAAQ;IAClB,QAAQ,QAAQ;IAChB,eAAe,WAAW,IAAI;IAC9B,YAAY,aAAa;KACvB,sBAAsB,iBAAiB,SAAS,OAAO,CAAC;KACxD,WAAW,IAAI;KACf,YAAY;IACd;IACA,aAAa,QAAQ,cAAc,gBAAgB,QAAQ;IAC3D,OAAO,QAAQ,cAAc,SAAS,QAAQ;GAC/C,CAAA;EAEA;;AAET"}

package/dist/table/components/cells/badge-cell.d.ts

@@ -0,0 +1,5 @@
+import { TableColumn } from '../../types';
+export declare function BadgeCell({ column, value }: {
+    column: TableColumn;
+    value: unknown;
+}): import("react").JSX.Element | null;

package/dist/table/components/cells/badge-cell.js

@@ -0,0 +1,16 @@
+import { cn } from "../../../lib/utils.js";
+import { formatCell } from "../../format.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/badge-cell.tsx
+function BadgeCell({ column, value }) {
+	const label = formatCell(value, column);
+	if (label === "") return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("lt-cell-badge", `lt-cell-tone-${column.props?.colors?.[String(value)] ?? "gray"}`),
+		children: label
+	});
+}
+//#endregion
+export { BadgeCell };
+
+//# sourceMappingURL=badge-cell.js.map

package/dist/table/components/cells/badge-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/badge-cell.tsx"],"sourcesContent":["import { cn } from \"@lattice/lattice/lib/utils\";\nimport type { BadgeColumnProps } from \"@lattice/lattice/types/generated\";\nimport { formatCell } from \"../../format\";\nimport type { TableColumn } from \"../../types\";\n\nexport function BadgeCell({ column, value }: { column: TableColumn; value: unknown }) {\n  const label = formatCell(value, column);\n\n  if (label === \"\") {\n    return null;\n  }\n\n  const props = column.props as BadgeColumnProps | null;\n  const color = props?.colors?.[String(value)] ?? \"gray\";\n\n  return <span className={cn(\"lt-cell-badge\", `lt-cell-tone-${color}`)}>{label}</span>;\n}\n"],"mappings":";;;;AAKA,SAAgB,UAAU,EAAE,QAAQ,SAAkD;CACpF,MAAM,QAAQ,WAAW,OAAO,MAAM;CAEtC,IAAI,UAAU,IACZ,OAAO;CAMT,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,iBAAiB,gBAH9B,OAAO,OACA,SAAS,OAAO,KAAK,MAAM,QAEmB;YAAI;CAAY,CAAA;AACrF"}

package/dist/table/components/cells/icon-cell.d.ts

@@ -0,0 +1,5 @@
+import { TableColumn } from '../../types';
+export declare function IconCell({ column, value }: {
+    column: TableColumn;
+    value: unknown;
+}): import("react").JSX.Element | null;

package/dist/table/components/cells/icon-cell.js

@@ -0,0 +1,22 @@
+import { cn } from "../../../lib/utils.js";
+import { IconRenderer } from "../../../icons/icon-renderer.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/icon-cell.tsx
+function IconCell({ column, value }) {
+	const props = column.props;
+	const icon = props?.icons?.[String(value)] ?? props?.icon ?? void 0;
+	if (!icon) return null;
+	const color = props?.colors?.[String(value)];
+	return /* @__PURE__ */ jsx("span", {
+		"aria-label": String(value),
+		className: cn("lt-cell-icon", color && `lt-cell-tone-${color}`),
+		children: /* @__PURE__ */ jsx(IconRenderer, {
+			className: "size-lt-icon-md",
+			icon
+		})
+	});
+}
+//#endregion
+export { IconCell };
+
+//# sourceMappingURL=icon-cell.js.map

package/dist/table/components/cells/icon-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/icon-cell.tsx"],"sourcesContent":["import { IconRenderer } from \"@lattice/lattice/icons\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport type { IconColumnProps } from \"@lattice/lattice/types/generated\";\nimport type { TableColumn } from \"../../types\";\n\nexport function IconCell({ column, value }: { column: TableColumn; value: unknown }) {\n  const props = column.props as IconColumnProps | null;\n  const icon = props?.icons?.[String(value)] ?? props?.icon ?? undefined;\n\n  if (!icon) {\n    return null;\n  }\n\n  const color = props?.colors?.[String(value)];\n\n  return (\n    <span\n      aria-label={String(value)}\n      className={cn(\"lt-cell-icon\", color && `lt-cell-tone-${color}`)}\n    >\n      <IconRenderer className=\"size-lt-icon-md\" icon={icon} />\n    </span>\n  );\n}\n"],"mappings":";;;;AAKA,SAAgB,SAAS,EAAE,QAAQ,SAAkD;CACnF,MAAM,QAAQ,OAAO;CACrB,MAAM,OAAO,OAAO,QAAQ,OAAO,KAAK,MAAM,OAAO,QAAQ,KAAA;CAE7D,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,QAAQ,OAAO,SAAS,OAAO,KAAK;CAE1C,OACE,oBAAC,QAAD;EACE,cAAY,OAAO,KAAK;EACxB,WAAW,GAAG,gBAAgB,SAAS,gBAAgB,OAAO;YAE9D,oBAAC,cAAD;GAAc,WAAU;GAAwB;EAAO,CAAA;CACnD,CAAA;AAEV"}

package/dist/table/components/cells/image-cell.d.ts

@@ -0,0 +1,5 @@
+import { TableColumn } from '../../types';
+export declare function ImageCell({ column, value }: {
+    column: TableColumn;
+    value: unknown;
+}): import("react").JSX.Element | null;

package/dist/table/components/cells/image-cell.js

@@ -0,0 +1,24 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/image-cell.tsx
+function ImageCell({ column, value }) {
+	const url = typeof value === "string" ? value : "";
+	if (url === "") return null;
+	const props = column.props;
+	const size = props?.size ?? 32;
+	return /* @__PURE__ */ jsx("img", {
+		alt: column.label,
+		src: url,
+		width: size,
+		height: size,
+		className: cn("object-cover", props?.circular ? "rounded-full" : "rounded-lt-sm"),
+		style: {
+			width: size,
+			height: size
+		}
+	});
+}
+//#endregion
+export { ImageCell };
+
+//# sourceMappingURL=image-cell.js.map

package/dist/table/components/cells/image-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/image-cell.tsx"],"sourcesContent":["import { cn } from \"@lattice/lattice/lib/utils\";\nimport type { ImageColumnProps } from \"@lattice/lattice/types/generated\";\nimport type { TableColumn } from \"../../types\";\n\nexport function ImageCell({ column, value }: { column: TableColumn; value: unknown }) {\n  const url = typeof value === \"string\" ? value : \"\";\n\n  if (url === \"\") {\n    return null;\n  }\n\n  const props = column.props as ImageColumnProps | null;\n  const size = props?.size ?? 32;\n\n  return (\n    <img\n      alt={column.label}\n      src={url}\n      width={size}\n      height={size}\n      className={cn(\"object-cover\", props?.circular ? \"rounded-full\" : \"rounded-lt-sm\")}\n      style={{ width: size, height: size }}\n    />\n  );\n}\n"],"mappings":";;;AAIA,SAAgB,UAAU,EAAE,QAAQ,SAAkD;CACpF,MAAM,MAAM,OAAO,UAAU,WAAW,QAAQ;CAEhD,IAAI,QAAQ,IACV,OAAO;CAGT,MAAM,QAAQ,OAAO;CACrB,MAAM,OAAO,OAAO,QAAQ;CAE5B,OACE,oBAAC,OAAD;EACE,KAAK,OAAO;EACZ,KAAK;EACL,OAAO;EACP,QAAQ;EACR,WAAW,GAAG,gBAAgB,OAAO,WAAW,iBAAiB,eAAe;EAChF,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;CACpC,CAAA;AAEL"}

package/dist/table/components/cells/text-cell.d.ts

@@ -0,0 +1,6 @@
+import { TableColumn, TableRow } from '../../types';
+export declare function TextCell({ column, row, value, }: {
+    column: TableColumn;
+    row: TableRow;
+    value: unknown;
+}): string | import("react").JSX.Element;

package/dist/table/components/cells/text-cell.js

@@ -0,0 +1,50 @@
+import { Icon } from "../../../icons/sprite.js";
+import { copyToClipboard } from "../../../clipboard/index.js";
+import { formatCell, resolveLink } from "../../format.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/text-cell.tsx
+function TextCell({ column, row, value }) {
+	const props = column.props;
+	const text = formatCell(value, column);
+	const [copied, setCopied] = useState(false);
+	const href = resolveLink(column, row, value);
+	const content = href ? /* @__PURE__ */ jsx("a", {
+		className: "underline underline-offset-2",
+		href,
+		rel: props?.link?.external ? "noreferrer" : void 0,
+		target: props?.link?.external ? "_blank" : void 0,
+		children: text
+	}) : text;
+	useEffect(() => {
+		if (!copied) return;
+		const timeout = window.setTimeout(() => setCopied(false), 1500);
+		return () => window.clearTimeout(timeout);
+	}, [copied]);
+	function handleCopy() {
+		copyToClipboard(text);
+		setCopied(true);
+	}
+	if (!props?.copyable) return content;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("span", { children: content }), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-test": `copy-${column.key}`,
+			className: "inline-flex items-center gap-1 rounded border border-lt-border px-2 py-1 text-xs",
+			"aria-label": `${copied ? "Copied" : "Copy"} ${column.label}`,
+			onClick: handleCopy,
+			children: [copied ? /* @__PURE__ */ jsx(Icon, {
+				name: "check",
+				className: "size-lt-icon-xs"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				name: "copy",
+				className: "size-lt-icon-xs"
+			}), copied ? "Copied" : "Copy"]
+		})]
+	});
+}
+//#endregion
+export { TextCell };
+
+//# sourceMappingURL=text-cell.js.map

package/dist/table/components/cells/text-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { copyToClipboard } from \"@lattice/lattice/clipboard\";\nimport { Icon } from \"@lattice/lattice/icons\";\nimport type { TextColumnProps } from \"@lattice/lattice/types/generated\";\nimport { useEffect, useState } from \"react\";\nimport { formatCell, resolveLink } from \"../../format\";\nimport type { TableColumn, TableRow } from \"../../types\";\n\nexport function TextCell({\n  column,\n  row,\n  value,\n}: {\n  column: TableColumn;\n  row: TableRow;\n  value: unknown;\n}) {\n  const props = column.props as TextColumnProps | null;\n  const text = formatCell(value, column);\n  const [copied, setCopied] = useState(false);\n  const href = resolveLink(column, row, value);\n  const content = href ? (\n    <a\n      className=\"underline underline-offset-2\"\n      href={href}\n      rel={props?.link?.external ? \"noreferrer\" : undefined}\n      target={props?.link?.external ? \"_blank\" : undefined}\n    >\n      {text}\n    </a>\n  ) : (\n    text\n  );\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  function handleCopy(): void {\n    void copyToClipboard(text);\n    setCopied(true);\n  }\n\n  if (!props?.copyable) {\n    return content;\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span>{content}</span>\n      <button\n        type=\"button\"\n        data-test={`copy-${column.key}`}\n        className=\"inline-flex items-center gap-1 rounded border border-lt-border px-2 py-1 text-xs\"\n        aria-label={`${copied ? \"Copied\" : \"Copy\"} ${column.label}`}\n        onClick={handleCopy}\n      >\n        {copied ? (\n          <Icon name=\"check\" className=\"size-lt-icon-xs\" />\n        ) : (\n          <Icon name=\"copy\" className=\"size-lt-icon-xs\" />\n        )}\n        {copied ? \"Copied\" : \"Copy\"}\n      </button>\n    </span>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAgB,SAAS,EACvB,QACA,KACA,SAKC;CACD,MAAM,QAAQ,OAAO;CACrB,MAAM,OAAO,WAAW,OAAO,MAAM;CACrC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,UAAU,OACd,oBAAC,KAAD;EACE,WAAU;EACJ;EACN,KAAK,OAAO,MAAM,WAAW,eAAe,KAAA;EAC5C,QAAQ,OAAO,MAAM,WAAW,WAAW,KAAA;YAE1C;CACA,CAAA,IAEH;CAGF,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,SAAS,aAAmB;EAC1B,gBAAqB,IAAI;EACzB,UAAU,IAAI;CAChB;CAEA,IAAI,CAAC,OAAO,UACV,OAAO;CAGT,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,QAAD,EAAA,UAAO,QAAc,CAAA,GACrB,qBAAC,UAAD;GACE,MAAK;GACL,aAAW,QAAQ,OAAO;GAC1B,WAAU;GACV,cAAY,GAAG,SAAS,WAAW,OAAO,GAAG,OAAO;GACpD,SAAS;aALX,CAOG,SACC,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAmB,CAAA,IAEhD,oBAAC,MAAD;IAAM,MAAK;IAAO,WAAU;GAAmB,CAAA,GAEhD,SAAS,WAAW,MACf;IACJ;;AAEV"}

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

@@ -1,43 +1,14 @@
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
 import { VALUELESS_FILTER_OPERATORS, operatorLabel } from "../query.js";
 import { FilterValueInput } from "./filter-value-input.js";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Filter, Plus, Trash2 } from "lucide-react";
-import { createPortal } from "react-dom";
+import * as Popover from "@radix-ui/react-popover";
 //#region resources/js/table/components/column-filter-control.tsx
 function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove }) {
+	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;
 	const type = filter.type ?? "text";
 	const operators = filter.operators ?? [];
@@ -58,71 +29,57 @@ 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-44 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.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			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",
 					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(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+			align: "start",
+			className: "z-50 w-80 rounded-lt border border-lt-border bg-lt-bg p-4 shadow-lg",
+			sideOffset: 4,
+			children: /* @__PURE__ */ jsx(FilterClauseList, {
+				column,
+				clauses,
+				operators,
+				defaultOperator,
+				processing,
+				onAdd,
+				onUpdate,
+				onRemove
+			})
+		}) })] })]
 	});
 }
 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,26 +142,30 @@ 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`,
+				"aria-label": t("filter.operator", "{{label}} operator", { label: column.label }),
+				"data-test": `filter-${column.key}-operator`,
 				className: "h-9 flex-1 rounded-lt-sm border border-lt-input bg-lt-bg px-2 text-sm font-normal",
 				disabled: processing,
 				value: clause.operator,
@@ -218,19 +179,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/lattice/icons\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { useState } from \"react\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport type { FilterType, Op } from \"@lattice/lattice/types/generated\";\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 { t } = useT(\"lattice\");\n  const filter = column.filter;\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  return (\n    <div className=\"flex min-w-0 max-w-44 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.Root>\n        <Popover.Trigger 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-[10px] font-medium text-lt-primary-fg\">\n                {clauses.length}\n              </span>\n            )}\n          </button>\n        </Popover.Trigger>\n\n        <Popover.Portal>\n          <Popover.Content\n            align=\"start\"\n            className=\"z-50 w-80 rounded-lt border border-lt-border bg-lt-bg p-4 shadow-lg\"\n            sideOffset={4}\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          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\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: 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=\"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 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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"}