@lattice-php/lattice 0.2.0 → 0.4.0

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

@@ -2,11 +2,10 @@ 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;
+var IconCell = ({ props, value }) => {
+	const icon = props.icons?.[String(value)] ?? props.icon ?? void 0;
 	if (!icon) return null;
-	const color = props?.colors?.[String(value)];
+	const color = props.colors?.[String(value)];
 	return /* @__PURE__ */ jsx("span", {
 		"aria-label": String(value),
 		className: cn("lt-cell-icon", color && `lt-cell-tone-${color}`),
@@ -15,7 +14,7 @@ function IconCell({ column, value }) {
 			icon
 		})
 	});
-}
+};
 //#endregion
 export { IconCell };
 

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

@@ -1 +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"}
+{"version":3,"file":"icon-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/icon-cell.tsx"],"sourcesContent":["import { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { ColumnCellComponent } from \"../../registry\";\n\nexport const IconCell: ColumnCellComponent<\"column.icon\"> = ({ props, value }) => {\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":";;;;AAIA,IAAa,YAAgD,EAAE,OAAO,YAAY;CAChF,MAAM,OAAO,MAAM,QAAQ,OAAO,KAAK,MAAM,MAAM,QAAQ,KAAA;CAE3D,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,QAAQ,MAAM,SAAS,OAAO,KAAK;CAEzC,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

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

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

@@ -1,23 +1,22 @@
 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 }) {
+var ImageCell = ({ column, props, value }) => {
 	const url = typeof value === "string" ? value : "";
 	if (url === "") return null;
-	const props = column.props;
-	const size = props?.size ?? 32;
+	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"),
+		className: cn("object-cover", props.circular ? "rounded-full" : "rounded-lt-sm"),
 		style: {
 			width: size,
 			height: size
 		}
 	});
-}
+};
 //#endregion
 export { ImageCell };
 

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

@@ -1 +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"}
+{"version":3,"file":"image-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/image-cell.tsx"],"sourcesContent":["import { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { ColumnCellComponent } from \"../../registry\";\n\nexport const ImageCell: ColumnCellComponent<\"column.image\"> = ({ column, props, value }) => {\n  const url = typeof value === \"string\" ? value : \"\";\n\n  if (url === \"\") {\n    return null;\n  }\n\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":";;;AAGA,IAAa,aAAkD,EAAE,QAAQ,OAAO,YAAY;CAC1F,MAAM,MAAM,OAAO,UAAU,WAAW,QAAQ;CAEhD,IAAI,QAAQ,IACV,OAAO;CAGT,MAAM,OAAO,MAAM,QAAQ;CAE3B,OACE,oBAAC,OAAD;EACE,KAAK,OAAO;EACZ,KAAK;EACL,OAAO;EACP,QAAQ;EACR,WAAW,GAAG,gBAAgB,MAAM,WAAW,iBAAiB,eAAe;EAC/E,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;CACpC,CAAA;AAEL"}

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

@@ -0,0 +1,2 @@
+import { ColumnCellComponent } from '../../registry';
+export declare const MoneyCell: ColumnCellComponent<"column.money">;

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

@@ -0,0 +1,28 @@
+import { useLocale } from "../../../i18n/locale.js";
+import { formatCell } from "../../format.js";
+import { numericValue } from "./numeric.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/money-cell.tsx
+var MoneyCell = ({ column, props, row, value }) => {
+	const { locale } = useLocale();
+	const number = numericValue(value);
+	if (number === null) return /* @__PURE__ */ jsx("span", { children: formatCell(value, column) });
+	const rawCode = props.currencyField ? row[props.currencyField] : void 0;
+	const code = props.currency ?? (typeof rawCode === "string" ? rawCode : "");
+	const fractionDigits = {
+		minimumFractionDigits: props.minimumFractionDigits ?? void 0,
+		maximumFractionDigits: props.maximumFractionDigits ?? void 0
+	};
+	return /* @__PURE__ */ jsx("span", {
+		className: "tabular-nums",
+		children: code ? new Intl.NumberFormat(locale, {
+			style: "currency",
+			currency: code,
+			...fractionDigits
+		}).format(number) : new Intl.NumberFormat(locale, fractionDigits).format(number)
+	});
+};
+//#endregion
+export { MoneyCell };
+
+//# sourceMappingURL=money-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"money-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/money-cell.tsx"],"sourcesContent":["import { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { formatCell } from \"../../format\";\nimport type { ColumnCellComponent } from \"../../registry\";\nimport { numericValue } from \"./numeric\";\n\nexport const MoneyCell: ColumnCellComponent<\"column.money\"> = ({ column, props, row, value }) => {\n  const { locale } = useLocale();\n  const number = numericValue(value);\n\n  if (number === null) {\n    return <span>{formatCell(value, column)}</span>;\n  }\n\n  const rawCode = props.currencyField ? row[props.currencyField] : undefined;\n  const code = props.currency ?? (typeof rawCode === \"string\" ? rawCode : \"\");\n  const fractionDigits = {\n    minimumFractionDigits: props.minimumFractionDigits ?? undefined,\n    maximumFractionDigits: props.maximumFractionDigits ?? undefined,\n  };\n\n  const text = code\n    ? new Intl.NumberFormat(locale, {\n        style: \"currency\",\n        currency: code,\n        ...fractionDigits,\n      }).format(number)\n    : new Intl.NumberFormat(locale, fractionDigits).format(number);\n\n  return <span className=\"tabular-nums\">{text}</span>;\n};\n"],"mappings":";;;;;AAKA,IAAa,aAAkD,EAAE,QAAQ,OAAO,KAAK,YAAY;CAC/F,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,SAAS,aAAa,KAAK;CAEjC,IAAI,WAAW,MACb,OAAO,oBAAC,QAAD,EAAA,UAAO,WAAW,OAAO,MAAM,EAAQ,CAAA;CAGhD,MAAM,UAAU,MAAM,gBAAgB,IAAI,MAAM,iBAAiB,KAAA;CACjE,MAAM,OAAO,MAAM,aAAa,OAAO,YAAY,WAAW,UAAU;CACxE,MAAM,iBAAiB;EACrB,uBAAuB,MAAM,yBAAyB,KAAA;EACtD,uBAAuB,MAAM,yBAAyB,KAAA;CACxD;CAUA,OAAO,oBAAC,QAAD;EAAM,WAAU;YARV,OACT,IAAI,KAAK,aAAa,QAAQ;GAC5B,OAAO;GACP,UAAU;GACV,GAAG;EACL,CAAC,EAAE,OAAO,MAAM,IAChB,IAAI,KAAK,aAAa,QAAQ,cAAc,EAAE,OAAO,MAAM;CAEb,CAAA;AACpD"}

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

@@ -0,0 +1,2 @@
+import { ColumnCellComponent } from '../../registry';
+export declare const NumberCell: ColumnCellComponent<"column.number">;

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

@@ -0,0 +1,25 @@
+import { useLocale } from "../../../i18n/locale.js";
+import { formatCell } from "../../format.js";
+import { numericValue } from "./numeric.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/number-cell.tsx
+var NumberCell = ({ column, props, value }) => {
+	const { locale } = useLocale();
+	const number = numericValue(value);
+	if (number === null) return /* @__PURE__ */ jsx("span", { children: formatCell(value, column) });
+	return /* @__PURE__ */ jsx("span", {
+		className: "tabular-nums",
+		children: new Intl.NumberFormat(locale, {
+			minimumFractionDigits: props.minimumFractionDigits ?? void 0,
+			maximumFractionDigits: props.maximumFractionDigits ?? void 0,
+			...props.unit ? {
+				style: "unit",
+				unit: props.unit
+			} : {}
+		}).format(number)
+	});
+};
+//#endregion
+export { NumberCell };
+
+//# sourceMappingURL=number-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/number-cell.tsx"],"sourcesContent":["import { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { formatCell } from \"../../format\";\nimport type { ColumnCellComponent } from \"../../registry\";\nimport { numericValue } from \"./numeric\";\n\nexport const NumberCell: ColumnCellComponent<\"column.number\"> = ({ column, props, value }) => {\n  const { locale } = useLocale();\n  const number = numericValue(value);\n\n  if (number === null) {\n    return <span>{formatCell(value, column)}</span>;\n  }\n\n  const text = new Intl.NumberFormat(locale, {\n    minimumFractionDigits: props.minimumFractionDigits ?? undefined,\n    maximumFractionDigits: props.maximumFractionDigits ?? undefined,\n    ...(props.unit ? { style: \"unit\" as const, unit: props.unit } : {}),\n  }).format(number);\n\n  return <span className=\"tabular-nums\">{text}</span>;\n};\n"],"mappings":";;;;;AAKA,IAAa,cAAoD,EAAE,QAAQ,OAAO,YAAY;CAC5F,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,SAAS,aAAa,KAAK;CAEjC,IAAI,WAAW,MACb,OAAO,oBAAC,QAAD,EAAA,UAAO,WAAW,OAAO,MAAM,EAAQ,CAAA;CAShD,OAAO,oBAAC,QAAD;EAAM,WAAU;YANV,IAAI,KAAK,aAAa,QAAQ;GACzC,uBAAuB,MAAM,yBAAyB,KAAA;GACtD,uBAAuB,MAAM,yBAAyB,KAAA;GACtD,GAAI,MAAM,OAAO;IAAE,OAAO;IAAiB,MAAM,MAAM;GAAK,IAAI,CAAC;EACnE,CAAC,EAAE,OAAO,MAE6B;CAAW,CAAA;AACpD"}

package/dist/table/components/cells/numeric.d.ts

@@ -0,0 +1,2 @@
+/** Parses a cell value to a finite number, or null when it isn't numeric. */
+export declare function numericValue(value: unknown): number | null;

package/dist/table/components/cells/numeric.js

@@ -0,0 +1,10 @@
+//#region resources/js/table/components/cells/numeric.ts
+/** Parses a cell value to a finite number, or null when it isn't numeric. */
+function numericValue(value) {
+	const number = typeof value === "number" ? value : Number(value);
+	return value !== null && value !== void 0 && value !== "" && !Number.isNaN(number) ? number : null;
+}
+//#endregion
+export { numericValue };
+
+//# sourceMappingURL=numeric.js.map

package/dist/table/components/cells/numeric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numeric.js","names":[],"sources":["../../../../resources/js/table/components/cells/numeric.ts"],"sourcesContent":["/** Parses a cell value to a finite number, or null when it isn't numeric. */\nexport function numericValue(value: unknown): number | null {\n  const number = typeof value === \"number\" ? value : Number(value);\n\n  return value !== null && value !== undefined && value !== \"\" && !Number.isNaN(number)\n    ? number\n    : null;\n}\n"],"mappings":";;AACA,SAAgB,aAAa,OAA+B;CAC1D,MAAM,SAAS,OAAO,UAAU,WAAW,QAAQ,OAAO,KAAK;CAE/D,OAAO,UAAU,QAAQ,UAAU,KAAA,KAAa,UAAU,MAAM,CAAC,OAAO,MAAM,MAAM,IAChF,SACA;AACN"}

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

@@ -0,0 +1,3 @@
+import { ColumnCellComponent } from '../../registry';
+/** Renders a stack column's nested columns as stacked text rows. */
+export declare const StackCell: ColumnCellComponent<"column.stack">;

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

@@ -0,0 +1,17 @@
+import { TextCell } from "./text-cell.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/stack-cell.tsx
+/** Renders a stack column's nested columns as stacked text rows. */
+var StackCell = ({ column, row }) => /* @__PURE__ */ jsx("div", {
+	className: "grid gap-1",
+	children: (column.columns ?? []).map((stackedColumn) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(TextCell, {
+		column: stackedColumn,
+		props: stackedColumn.props ?? {},
+		row,
+		value: row[stackedColumn.key]
+	}) }, stackedColumn.key))
+});
+//#endregion
+export { StackCell };
+
+//# sourceMappingURL=stack-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stack-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/stack-cell.tsx"],"sourcesContent":["import type { ColumnCellComponent } from \"../../registry\";\nimport type { ColumnPropsOf } from \"../../types\";\nimport { TextCell } from \"./text-cell\";\n\n/** Renders a stack column's nested columns as stacked text rows. */\nexport const StackCell: ColumnCellComponent<\"column.stack\"> = ({ column, row }) => (\n  <div className=\"grid gap-1\">\n    {(column.columns ?? []).map((stackedColumn) => (\n      <span key={stackedColumn.key}>\n        <TextCell\n          column={stackedColumn}\n          props={(stackedColumn.props ?? {}) as ColumnPropsOf<\"column.text\">}\n          row={row}\n          value={row[stackedColumn.key]}\n        />\n      </span>\n    ))}\n  </div>\n);\n"],"mappings":";;;;AAKA,IAAa,aAAkD,EAAE,QAAQ,UACvE,oBAAC,OAAD;CAAK,WAAU;YACX,OAAO,WAAW,CAAC,GAAG,KAAK,kBAC3B,oBAAC,QAAD,EAAA,UACE,oBAAC,UAAD;EACE,QAAQ;EACR,OAAQ,cAAc,SAAS,CAAC;EAC3B;EACL,OAAO,IAAI,cAAc;CAC1B,CAAA,EACG,GAPK,cAAc,GAOnB,CACP;AACE,CAAA"}

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

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

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

@@ -4,16 +4,15 @@ 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;
+var TextCell = ({ column, props, row, value }) => {
 	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,
+		rel: props.link?.external ? "noreferrer" : void 0,
+		target: props.link?.external ? "_blank" : void 0,
 		children: text
 	}) : text;
 	useEffect(() => {
@@ -25,13 +24,13 @@ function TextCell({ column, row, value }) {
 		copyToClipboard(text);
 		setCopied(true);
 	}
-	if (!props?.copyable) return content;
+	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",
+			className: "inline-flex items-center gap-1 rounded-lt-sm border border-lt-border px-2 py-1 text-xs",
 			"aria-label": `${copied ? "Copied" : "Copy"} ${column.label}`,
 			onClick: handleCopy,
 			children: [copied ? /* @__PURE__ */ jsx(Icon, {
@@ -43,7 +42,7 @@ function TextCell({ column, row, value }) {
 			}), copied ? "Copied" : "Copy"]
 		})]
 	});
-}
+};
 //#endregion
 export { TextCell };
 

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

@@ -1 +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"}
+{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { copyToClipboard } from \"@lattice-php/lattice/clipboard\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { formatCell, resolveLink } from \"../../format\";\nimport type { ColumnCellComponent } from \"../../registry\";\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = ({ column, props, row, value }) => {\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-lt-sm 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":";;;;;;AAMA,IAAa,YAAgD,EAAE,QAAQ,OAAO,KAAK,YAAY;CAC7F,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,MAAM,MAAM,WAAW,eAAe,KAAA;EAC3C,QAAQ,MAAM,MAAM,WAAW,WAAW,KAAA;YAEzC;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,MAAM,UACT,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.d.ts

@@ -1,14 +1,17 @@
 import { FilterClause, TableColumn } from '../types';
+import { FilterOptionSearch } from './filter-controls';
 type ColumnClause = {
     clause: FilterClause;
     index: number;
 };
-export declare function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, }: {
+export declare function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, onReplace, onSearch, }: {
     column: TableColumn;
     clauses: ColumnClause[];
     processing: boolean;
     onAdd: (clause: FilterClause) => void;
     onUpdate: (index: number, clause: FilterClause) => void;
     onRemove: (index: number) => void;
+    onReplace: (field: string, clauses: FilterClause[]) => void;
+    onSearch?: FilterOptionSearch;
 }): import("react").JSX.Element | null;
 export {};

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

@@ -1,15 +1,24 @@
+import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/components/popover.js";
 import { VALUELESS_FILTER_OPERATORS, operatorLabel } from "../query.js";
-import { FilterValueInput } from "./filter-value-input.js";
+import { FilterValueInput, fieldClass } from "./filter-value-input.js";
+import { TableFilterControl } from "./filter-controls.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as Popover from "@radix-ui/react-popover";
 //#region resources/js/table/components/column-filter-control.tsx
-function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove }) {
+function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, onReplace, onSearch }) {
 	const { t } = useT("lattice");
 	const filter = column.filter;
 	if (!filter) return null;
+	if (filter.control === "select") return /* @__PURE__ */ jsx(ColumnSelectFilter, {
+		column,
+		clauses,
+		processing,
+		onReplace,
+		onSearch
+	});
 	const type = filter.type ?? "text";
 	const operators = filter.operators ?? [];
 	const defaultOperator = filter.defaultOperator ?? operators[0] ?? "eq";
@@ -30,7 +39,7 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 max-w-44 items-stretch",
+		className: "flex min-w-0 max-w-80 items-stretch",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "min-w-0 flex-1",
 			children: /* @__PURE__ */ jsx(FilterValueInput, {
@@ -44,7 +53,7 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 				onCommit: commitPrimary,
 				onClear: primary ? () => onRemove(primary.index) : void 0
 			})
-		}), /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		}), /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs("button", {
 				type: "button",
@@ -57,14 +66,13 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 					"aria-hidden": "true",
 					className: "size-lt-icon-md"
 				}), clauses.length > 0 && /* @__PURE__ */ jsx("span", {
-					className: "absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium text-lt-primary-fg",
+					className: "absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-xs font-medium text-lt-primary-fg",
 					children: clauses.length
 				})]
 			})
-		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+		}), /* @__PURE__ */ jsx(PopoverContent, {
 			align: "start",
-			className: "z-50 w-80 rounded-lt border border-lt-border bg-lt-bg p-4 shadow-lg",
-			sideOffset: 4,
+			className: "w-80 p-4",
 			children: /* @__PURE__ */ jsx(FilterClauseList, {
 				column,
 				clauses,
@@ -75,9 +83,72 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 				onUpdate,
 				onRemove
 			})
-		}) })] })]
+		})] })]
+	});
+}
+function serializeColumnValue(value) {
+	if (Array.isArray(value)) return value.join(",");
+	return typeof value === "string" ? value : "";
+}
+function ColumnSelectFilter({ column, clauses, processing, onReplace, onSearch }) {
+	const filter = column.filter;
+	if (!filter) return null;
+	const multiple = filter.multiple;
+	const operator = filter.defaultOperator;
+	const clauseOptions = filter.clauseOptions ?? [];
+	const activeClauseOption = findActiveClauseOption(clauses.map((entry) => entry.clause), clauseOptions);
+	const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];
+	const value = activeClauseOption ? activeClauseOption.value : multiple ? active?.clause.value ? active.clause.value.split(",") : [] : active?.clause.value ?? "";
+	const data = {
+		key: column.key,
+		label: column.label,
+		type: "select",
+		props: {
+			options: filter.options,
+			multiple,
+			searchable: filter.searchable,
+			placeholder: null
+		}
+	};
+	function change(next) {
+		const serialized = serializeColumnValue(next);
+		if (serialized === "") {
+			onReplace(column.key, []);
+			return;
+		}
+		const clauseOption = clauseOptions.find((option) => option.value === serialized);
+		if (clauseOption) {
+			onReplace(column.key, clausesForOption(column.key, clauseOption));
+			return;
+		}
+		onReplace(column.key, [{
+			field: column.key,
+			operator,
+			value: serialized
+		}]);
+	}
+	return /* @__PURE__ */ jsx(TableFilterControl, {
+		filter: data,
+		value,
+		processing,
+		onChange: change,
+		onSearch
 	});
 }
+function clausesForOption(field, option) {
+	return option.clauses.map((clause) => ({
+		field,
+		operator: clause.operator,
+		value: clause.value
+	}));
+}
+function findActiveClauseOption(clauses, options) {
+	return options.find((option) => clausesMatch(clauses, clausesForOption("", option)));
+}
+function clausesMatch(active, expected) {
+	if (active.length !== expected.length) return false;
+	return expected.every((clause) => active.some((current) => current.operator === clause.operator && current.value === clause.value));
+}
 function FilterClauseList({ column, clauses, operators, defaultOperator, processing, onAdd, onUpdate, onRemove }) {
 	const { t } = useT("lattice");
 	const type = column.filter?.type ?? "text";
@@ -166,7 +237,7 @@ function FilterClauseRow({ column, type, operators, clause, processing, onOperat
 			children: [operators.length > 1 ? /* @__PURE__ */ jsx("select", {
 				"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",
+				className: cn(fieldClass, "flex-1"),
 				disabled: processing,
 				value: clause.operator,
 				onChange: (event) => onOperator(event.target.value),

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 { 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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"}
+{"version":3,"file":"column-filter-control.js","names":[],"sources":["../../../resources/js/table/components/column-filter-control.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useState } from \"react\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@lattice-php/lattice/core/components/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type {\n  ColumnFilterOption,\n  FilterData,\n  FilterType,\n  Op,\n} from \"@lattice-php/lattice/types/generated\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"../query\";\nimport type { FilterClause, TableColumn } from \"../types\";\nimport { type FilterOptionSearch, TableFilterControl } from \"./filter-controls\";\nimport { fieldClass, FilterValueInput } from \"./filter-value-input\";\n\ntype ColumnClause = { clause: FilterClause; index: number };\n\nexport function ColumnFilterControl({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const { t } = useT(\"lattice\");\n  const filter = column.filter;\n\n  if (!filter) {\n    return null;\n  }\n\n  if (filter.control === \"select\") {\n    return (\n      <ColumnSelectFilter\n        column={column}\n        clauses={clauses}\n        processing={processing}\n        onReplace={onReplace}\n        onSearch={onSearch}\n      />\n    );\n  }\n\n  const type = filter.type ?? \"text\";\n  const operators = filter.operators ?? [];\n  const defaultOperator = filter.defaultOperator ?? operators[0] ?? \"eq\";\n  const primary = clauses.find((entry) => entry.clause.operator === defaultOperator) ?? clauses[0];\n\n  function commitPrimary(value: string): void {\n    if (value === \"\") {\n      if (primary) {\n        onRemove(primary.index);\n      }\n\n      return;\n    }\n\n    if (primary) {\n      onUpdate(primary.index, { ...primary.clause, value });\n    } else {\n      onAdd({ field: column.key, operator: defaultOperator, value });\n    }\n  }\n\n  return (\n    <div className=\"flex min-w-0 max-w-80 items-stretch\">\n      <div className=\"min-w-0 flex-1\">\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          value={primary?.clause.value ?? \"\"}\n          processing={processing}\n          withSearchIcon={type === \"text\" || type === \"number\"}\n          grouped\n          testId={`filter-${column.key}-value`}\n          onCommit={commitPrimary}\n          onClear={primary ? () => onRemove(primary.index) : undefined}\n        />\n      </div>\n      <Popover>\n        <PopoverTrigger asChild>\n          <button\n            type=\"button\"\n            aria-label={t(\"filter.columnFilters\", \"{{label}} filters\", { label: column.label })}\n            data-test={`filter-${column.key}`}\n            className=\"relative -ml-px inline-flex size-9 shrink-0 items-center justify-center rounded-r-lt-sm border border-lt-input disabled:opacity-50 data-[state=open]:z-10 data-[state=open]:border-lt-primary\"\n            disabled={processing}\n          >\n            <Icon name=\"filter\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n            {clauses.length > 0 && (\n              <span className=\"absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-xs font-medium text-lt-primary-fg\">\n                {clauses.length}\n              </span>\n            )}\n          </button>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" className=\"w-80 p-4\">\n          <FilterClauseList\n            column={column}\n            clauses={clauses}\n            operators={operators}\n            defaultOperator={defaultOperator}\n            processing={processing}\n            onAdd={onAdd}\n            onUpdate={onUpdate}\n            onRemove={onRemove}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nfunction serializeColumnValue(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.join(\",\");\n  }\n\n  return typeof value === \"string\" ? value : \"\";\n}\n\nfunction ColumnSelectFilter({\n  column,\n  clauses,\n  processing,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  const filter = column.filter;\n\n  if (!filter) {\n    return null;\n  }\n\n  const multiple = filter.multiple;\n  const operator = filter.defaultOperator;\n  const clauseOptions = filter.clauseOptions ?? [];\n  const activeClauseOption = findActiveClauseOption(\n    clauses.map((entry) => entry.clause),\n    clauseOptions,\n  );\n  const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];\n  const value: unknown = activeClauseOption\n    ? activeClauseOption.value\n    : multiple\n      ? active?.clause.value\n        ? active.clause.value.split(\",\")\n        : []\n      : (active?.clause.value ?? \"\");\n\n  const data: FilterData = {\n    key: column.key,\n    label: column.label,\n    type: \"select\",\n    props: { options: filter.options, multiple, searchable: filter.searchable, placeholder: null },\n  };\n\n  function change(next: unknown): void {\n    const serialized = serializeColumnValue(next);\n\n    if (serialized === \"\") {\n      onReplace(column.key, []);\n\n      return;\n    }\n\n    const clauseOption = clauseOptions.find((option) => option.value === serialized);\n\n    if (clauseOption) {\n      onReplace(column.key, clausesForOption(column.key, clauseOption));\n\n      return;\n    }\n\n    onReplace(column.key, [{ field: column.key, operator, value: serialized }]);\n  }\n\n  return (\n    <TableFilterControl\n      filter={data}\n      value={value}\n      processing={processing}\n      onChange={change}\n      onSearch={onSearch}\n    />\n  );\n}\n\nfunction clausesForOption(field: string, option: ColumnFilterOption): FilterClause[] {\n  return option.clauses.map((clause) => ({\n    field,\n    operator: clause.operator,\n    value: clause.value,\n  }));\n}\n\nfunction findActiveClauseOption(\n  clauses: FilterClause[],\n  options: ColumnFilterOption[],\n): ColumnFilterOption | undefined {\n  return options.find((option) => clausesMatch(clauses, clausesForOption(\"\", option)));\n}\n\nfunction clausesMatch(active: FilterClause[], expected: FilterClause[]): boolean {\n  if (active.length !== expected.length) {\n    return false;\n  }\n\n  return expected.every((clause) =>\n    active.some(\n      (current) => current.operator === clause.operator && current.value === clause.value,\n    ),\n  );\n}\n\nfunction FilterClauseList({\n  column,\n  clauses,\n  operators,\n  defaultOperator,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  operators: Op[];\n  defaultOperator: Op;\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const type = column.filter?.type ?? \"text\";\n  const [draftOperator, setDraftOperator] = useState(defaultOperator);\n  const [adding, setAdding] = useState(clauses.length === 0);\n\n  return (\n    <div className=\"grid gap-3\">\n      {clauses.map((entry) => (\n        <FilterClauseRow\n          key={entry.index}\n          column={column}\n          type={type}\n          operators={operators}\n          clause={entry.clause}\n          processing={processing}\n          onOperator={(operator) => onUpdate(entry.index, { ...entry.clause, operator })}\n          onValue={(value) =>\n            value === \"\" ? onRemove(entry.index) : onUpdate(entry.index, { ...entry.clause, value })\n          }\n          onRemove={() => onRemove(entry.index)}\n        />\n      ))}\n\n      {adding && (\n        <FilterClauseRow\n          column={column}\n          type={type}\n          operators={operators}\n          clause={{ field: column.key, operator: draftOperator, value: \"\" }}\n          processing={processing}\n          onOperator={(operator) => {\n            if (VALUELESS_FILTER_OPERATORS.has(operator)) {\n              onAdd({ field: column.key, operator, value: \"\" });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n              return;\n            }\n            setDraftOperator(operator);\n          }}\n          onValue={(value) => {\n            if (value !== \"\") {\n              onAdd({ field: column.key, operator: draftOperator, value });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n            }\n          }}\n          onRemove={() => setAdding(false)}\n        />\n      )}\n\n      <div className=\"border-t border-lt-border pt-3\">\n        <button\n          type=\"button\"\n          data-test={`filter-${column.key}-add`}\n          className=\"inline-flex w-full items-center justify-center gap-2 rounded-lt-sm bg-lt-muted px-3 py-2 text-sm font-medium hover:bg-lt-muted/70 disabled:opacity-50\"\n          disabled={processing}\n          onClick={() => setAdding(true)}\n        >\n          <Icon name=\"plus\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n          {t(\"filter.add\", \"Add filter\")}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterClauseRow({\n  column,\n  type,\n  operators,\n  clause,\n  processing,\n  onOperator,\n  onValue,\n  onRemove,\n}: {\n  column: TableColumn;\n  type: FilterType;\n  operators: Op[];\n  clause: FilterClause;\n  processing: boolean;\n  onOperator: (operator: Op) => void;\n  onValue: (value: string) => void;\n  onRemove: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center gap-2\">\n        {operators.length > 1 ? (\n          <select\n            aria-label={t(\"filter.operator\", \"{{label}} operator\", { label: column.label })}\n            data-test={`filter-${column.key}-operator`}\n            className={cn(fieldClass, \"flex-1\")}\n            disabled={processing}\n            value={clause.operator}\n            onChange={(event) => onOperator(event.target.value as Op)}\n          >\n            {operators.map((operator) => (\n              <option key={operator} value={operator}>\n                {operatorLabel(operator)}\n              </option>\n            ))}\n          </select>\n        ) : (\n          <span className=\"flex-1 text-sm font-medium\">{operatorLabel(clause.operator)}</span>\n        )}\n        <button\n          type=\"button\"\n          aria-label={t(\"filter.remove\", \"Remove {{label}} filter\", { label: column.label })}\n          data-test={`filter-${column.key}-remove`}\n          className=\"inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onRemove}\n        >\n          <Icon name=\"trash-2\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </button>\n      </div>\n      {!valueless && (\n        <FilterValueInput\n          type={type}\n          label={column.label}\n          ariaLabel={t(\"filter.value\", \"{{label}} filter value\", { label: column.label })}\n          value={clause.value}\n          processing={processing}\n          onCommit={onValue}\n          onClear={() => onValue(\"\")}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { FilterData, Option } from '../../types/generated';
+export declare function FilterBar({ filters, values, processing, hasActiveFilters, onChange, onReset, }: {
+    filters: FilterData[];
+    values: Record<string, unknown>;
+    processing: boolean;
+    hasActiveFilters: boolean;
+    onChange: (key: string, value: unknown) => void;
+    onReset: () => void;
+}): import("react").JSX.Element | null;
+export declare function FilterMenu({ filters, values, processing, onChange, onSearch, }: {
+    filters: FilterData[];
+    values: Record<string, unknown>;
+    processing: boolean;
+    onChange: (key: string, value: unknown) => void;
+    onSearch?: (filterKey: string, query: string) => Promise<Option[]>;
+}): import("react").JSX.Element;