@lattice-php/lattice 0.2.0 → 0.4.0

package/dist/form/components/fields/select.js

@@ -3,14 +3,16 @@ import { Icon } from "../../../icons/sprite.js";
 import { useT } from "../../../i18n/instance.js";
 import { useFormContext } from "../context.js";
 import { postFormAction } from "../form-transport.js";
+import { useFieldScope } from "../field-scope.js";
 import { useResolvedNode } from "../resolved-nodes.js";
-import { useFormValue } from "../values.js";
-import { useDependentField } from "../use-dependent-field.js";
+import { useFormValue, useFormValues } from "../values.js";
+import { Combobox } from "../../../core/components/combobox.js";
+import { controlSurface } from "../../../core/components/control.js";
 import { FormFieldFrame } from "../base/field.js";
+import { useDependentField } from "../use-dependent-field.js";
 import { useFieldCommit } from "../use-field-commit.js";
-import { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as Popover from "@radix-ui/react-popover";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/select.tsx
 function toValues(stored, fallback) {
 	const source = stored ?? fallback;
@@ -26,85 +28,82 @@ var SelectComponent = ({ node }) => {
 	const { change, blur } = useFieldCommit();
 	const resolvedNode = useResolvedNode(node);
 	const name = props.name;
+	const scope = useFieldScope();
+	const domName = scope ? scope.scopedName(name) : name;
+	const errorKey = scope ? scope.errorKey(name) : name;
+	const searchKey = scope ? scope.errorKey(name) : name;
 	const placeholder = props.placeholder || "Select…";
-	const multiple = props.multiple ?? false;
-	const searchable = props.searchable ?? false;
+	const multiple = props.multiple;
+	const searchable = props.searchable;
 	const staticOptions = useMemo(() => resolvedNode.props.options ?? [], [resolvedNode.props]);
-	const storedValue = useFormValue(name);
+	const globalValue = useFormValue(name);
+	const values = useFormValues();
+	const valuesRef = useRef(values);
+	valuesRef.current = values;
+	const storedValue = scope ? scope.getValue(name) : globalValue;
 	const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);
 	const [open, setOpen] = useState(false);
-	const [query, setQuery] = useState("");
-	const [results, setResults] = useState([]);
+	const [results, setResults] = useState(null);
 	const [loading, setLoading] = useState(false);
+	const searchAbort = useRef(null);
 	const labels = useMemo(() => {
 		const map = /* @__PURE__ */ new Map();
-		for (const option of [...staticOptions, ...results]) map.set(option.value, option.label);
+		for (const option of [...staticOptions, ...results ?? []]) map.set(option.value, option.label);
 		return map;
 	}, [staticOptions, results]);
 	const labelFor = (value) => labels.get(value) ?? value;
 	const locked = readOnly || disabled;
-	useEffect(() => {
-		if (!searchable) return;
+	const search = useCallback((query) => {
+		searchAbort.current?.abort();
 		if (query.trim() === "") {
-			setResults([]);
+			setResults(null);
 			setLoading(false);
 			return;
 		}
 		const controller = new AbortController();
+		searchAbort.current = controller;
 		setLoading(true);
-		const timer = window.setTimeout(() => {
-			postFormAction(action, componentRef, {
-				_search: name,
-				q: query
-			}, controller.signal).then((response) => {
-				setResults(response?.options ?? []);
-				setLoading(false);
-			}).catch(() => {});
-		}, 250);
-		return () => {
-			window.clearTimeout(timer);
-			controller.abort();
-		};
+		postFormAction(action, componentRef, {
+			...valuesRef.current,
+			_search: searchKey,
+			q: query
+		}, controller.signal).then((response) => {
+			setResults(response?.options ?? []);
+			setLoading(false);
+		}).catch(() => {});
 	}, [
-		query,
-		searchable,
 		action,
 		componentRef,
-		name
+		searchKey
 	]);
 	function commit(next) {
 		change(name, multiple ? next : next[0] ?? "");
 	}
-	function close() {
-		setOpen(false);
-		setQuery("");
-		blur(name);
-	}
-	function pick(option) {
+	function select(value) {
 		if (multiple) {
-			commit(selected.includes(option.value) ? selected.filter((value) => value !== option.value) : [...selected, option.value]);
+			commit(selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value]);
 			return;
 		}
-		commit([option.value]);
-		close();
+		commit([value]);
 	}
 	function remove(value) {
 		commit(selected.filter((item) => item !== value));
 	}
 	if (hidden) return null;
-	const visibleOptions = !searchable ? staticOptions.filter((option) => option.label.toLowerCase().includes(query.toLowerCase())) : query.trim() === "" ? staticOptions : results;
+	const options = searchable ? results ?? staticOptions : staticOptions;
 	return /* @__PURE__ */ jsxs(FormFieldFrame, {
-		error: errors[name],
+		error: errors[errorKey],
 		helperText: props.helperText ?? void 0,
+		tooltip: props.tooltip ?? void 0,
 		label: props.label ?? "",
 		name,
 		required,
 		children: [multiple ? selected.map((value) => /* @__PURE__ */ jsx("input", {
-			name: `${name}[]`,
+			name: `${domName}[]`,
 			type: "hidden",
 			value
 		}, value)) : /* @__PURE__ */ jsx("input", {
-			name,
+			name: domName,
 			type: "hidden",
 			value: selected[0] ?? ""
 		}), /* @__PURE__ */ jsxs("div", { children: [multiple && selected.length > 0 && /* @__PURE__ */ jsx("div", {
@@ -120,70 +119,36 @@ var SelectComponent = ({ node }) => {
 					children: /* @__PURE__ */ jsx(Icon, { name: "x" })
 				})]
 			}, value))
-		}), /* @__PURE__ */ jsxs(Popover.Root, {
+		}), /* @__PURE__ */ jsx(Combobox, {
+			emptyLabel: props.emptyLabel ?? void 0,
+			loading,
+			multiple,
+			onSearch: searchable ? search : void 0,
+			onSelect: select,
 			open: open && !locked,
 			onOpenChange: (next) => {
-				if (next) setOpen(true);
-				else close();
+				setOpen(next);
+				if (!next) blur(name);
 			},
-			children: [/* @__PURE__ */ jsx(Popover.Trigger, {
-				asChild: true,
-				children: /* @__PURE__ */ jsxs("button", {
-					"aria-haspopup": "listbox",
-					autoFocus: props.autoFocus ?? void 0,
-					tabIndex: props.tabIndex ?? void 0,
-					"data-test": `select-${name}`,
-					className: cn("flex min-h-9 w-full items-center justify-between gap-2 rounded-lt-sm border border-lt-input bg-transparent px-3 py-1.5 text-left text-sm shadow-xs transition-colors focus:border-lt-ring focus:outline-none focus:ring-[3px] focus:ring-lt-ring/50", locked && "cursor-not-allowed opacity-60"),
-					disabled: locked,
-					type: "button",
-					children: [!multiple && selected.length > 0 ? /* @__PURE__ */ jsx("span", { children: labelFor(selected[0]) }) : /* @__PURE__ */ jsx("span", {
-						className: "text-lt-muted-fg",
-						children: placeholder
-					}), /* @__PURE__ */ jsx(Icon, {
-						name: "chevrons-up-down",
-						className: "size-lt-icon-md shrink-0 text-lt-muted-fg"
-					})]
-				})
-			}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
-				align: "start",
-				className: "z-50 w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lt-sm border border-lt-border bg-lt-bg shadow-md",
-				sideOffset: 4,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2 border-b border-lt-border px-3 py-2",
-					children: [/* @__PURE__ */ jsx("input", {
-						"aria-label": t("a11y.searchOptions", "Search options"),
-						"data-test": `select-${name}-search`,
-						className: "w-full bg-transparent text-sm outline-none placeholder:text-lt-muted-fg",
-						onChange: (event) => setQuery(event.target.value),
-						placeholder: props.searchPlaceholder,
-						value: query
-					}), loading && /* @__PURE__ */ jsx(Icon, {
-						name: "loader-2",
-						className: "size-lt-icon-md shrink-0 animate-spin text-lt-muted-fg"
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					className: "max-h-60 overflow-y-auto p-1",
-					role: "listbox",
-					children: visibleOptions.length === 0 ? /* @__PURE__ */ jsx("p", {
-						className: "px-3 py-2 text-sm text-lt-muted-fg",
-						children: props.emptyLabel
-					}) : visibleOptions.map((option) => {
-						const isSelected = selected.includes(option.value);
-						return /* @__PURE__ */ jsxs("button", {
-							"aria-selected": isSelected,
-							"data-test": `select-${name}-option-${option.value}`,
-							className: cn("flex w-full items-center justify-between gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg", isSelected && "bg-lt-accent/60"),
-							onClick: () => pick(option),
-							role: "option",
-							type: "button",
-							children: [option.label, isSelected && /* @__PURE__ */ jsx(Icon, {
-								name: "check",
-								className: "size-lt-icon-md shrink-0"
-							})]
-						}, option.value);
-					})
-				})]
-			}) })]
+			options,
+			searchPlaceholder: props.searchPlaceholder ?? void 0,
+			selected,
+			testId: `select-${name}`,
+			trigger: /* @__PURE__ */ jsxs(Fragment$1, { children: [!multiple && selected.length > 0 ? /* @__PURE__ */ jsx("span", { children: labelFor(selected[0]) }) : /* @__PURE__ */ jsx("span", {
+				className: "text-lt-muted-fg",
+				children: placeholder
+			}), /* @__PURE__ */ jsx(Icon, {
+				name: "chevrons-up-down",
+				className: "size-lt-icon-md shrink-0 text-lt-muted-fg"
+			})] }),
+			triggerClassName: cn(controlSurface(), "flex items-center justify-between gap-2 text-left", locked && "cursor-not-allowed opacity-60"),
+			triggerProps: {
+				"aria-haspopup": "listbox",
+				autoFocus: props.autoFocus ?? void 0,
+				"data-test": `select-${name}`,
+				disabled: locked,
+				tabIndex: props.tabIndex ?? void 0
+			}
 		})] })]
 	});
 };

package/dist/form/components/fields/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport type { Option, RendererComponent } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { FORM_DEBOUNCE_MS, postFormAction } from \"../form-transport\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFormValue } from \"../values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"form.select\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { action, componentRef, errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = props.name;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple ?? false;\n  const searchable = props.searchable ?? false;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n\n  const storedValue = useFormValue(name);\n  const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [results, setResults] = useState<Option[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  const labels = useMemo(() => {\n    const map = new Map<string, string>();\n    for (const option of [...staticOptions, ...results]) {\n      map.set(option.value, option.label);\n    }\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => labels.get(value) ?? value;\n\n  const locked = readOnly || disabled;\n\n  useEffect(() => {\n    if (!searchable) {\n      return;\n    }\n\n    if (query.trim() === \"\") {\n      setResults([]);\n      setLoading(false);\n\n      return;\n    }\n\n    const controller = new AbortController();\n    setLoading(true);\n\n    const timer = window.setTimeout(() => {\n      void postFormAction<{ options?: Option[] }>(\n        action,\n        componentRef,\n        { _search: name, q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    }, FORM_DEBOUNCE_MS);\n\n    return () => {\n      window.clearTimeout(timer);\n      controller.abort();\n    };\n  }, [query, searchable, action, componentRef, name]);\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function close(): void {\n    setOpen(false);\n    setQuery(\"\");\n    blur(name);\n  }\n\n  function pick(option: Option): void {\n    if (multiple) {\n      const next = selected.includes(option.value)\n        ? selected.filter((value) => value !== option.value)\n        : [...selected, option.value];\n      commit(next);\n\n      return;\n    }\n\n    commit([option.value]);\n    close();\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const visibleOptions = !searchable\n    ? staticOptions.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()))\n    : query.trim() === \"\"\n      ? staticOptions\n      : results;\n\n  return (\n    <FormFieldFrame\n      error={errors[name]}\n      helperText={props.helperText ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      {multiple ? (\n        selected.map((value) => (\n          <input key={value} name={`${name}[]`} type=\"hidden\" value={value} />\n        ))\n      ) : (\n        <input name={name} type=\"hidden\" value={selected[0] ?? \"\"} />\n      )}\n\n      <div>\n        {multiple && selected.length > 0 && (\n          <div className=\"mb-1.5 flex flex-wrap gap-1\">\n            {selected.map((value) => (\n              <span\n                className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                key={value}\n              >\n                {labelFor(value)}\n                {!locked && (\n                  <button\n                    aria-label={t(\"a11y.removeOption\", \"Remove {{label}}\", {\n                      label: labelFor(value),\n                    })}\n                    data-test={`select-${name}-remove-${value}`}\n                    className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n                    onClick={() => remove(value)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"x\" />\n                  </button>\n                )}\n              </span>\n            ))}\n          </div>\n        )}\n\n        <Popover.Root\n          open={open && !locked}\n          onOpenChange={(next) => {\n            if (next) {\n              setOpen(true);\n            } else {\n              close();\n            }\n          }}\n        >\n          <Popover.Trigger asChild>\n            <button\n              aria-haspopup=\"listbox\"\n              autoFocus={props.autoFocus ?? undefined}\n              tabIndex={props.tabIndex ?? undefined}\n              data-test={`select-${name}`}\n              className={cn(\n                \"flex min-h-9 w-full items-center justify-between gap-2 rounded-lt-sm border border-lt-input bg-transparent px-3 py-1.5 text-left text-sm shadow-xs transition-colors focus:border-lt-ring focus:outline-none focus:ring-[3px] focus:ring-lt-ring/50\",\n                locked && \"cursor-not-allowed opacity-60\",\n              )}\n              disabled={locked}\n              type=\"button\"\n            >\n              {!multiple && selected.length > 0 ? (\n                <span>{labelFor(selected[0])}</span>\n              ) : (\n                <span className=\"text-lt-muted-fg\">{placeholder}</span>\n              )}\n              <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n            </button>\n          </Popover.Trigger>\n\n          <Popover.Portal>\n            <Popover.Content\n              align=\"start\"\n              className=\"z-50 w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lt-sm border border-lt-border bg-lt-bg shadow-md\"\n              sideOffset={4}\n            >\n              <div className=\"flex items-center gap-2 border-b border-lt-border px-3 py-2\">\n                <input\n                  aria-label={t(\"a11y.searchOptions\", \"Search options\")}\n                  data-test={`select-${name}-search`}\n                  className=\"w-full bg-transparent text-sm outline-none placeholder:text-lt-muted-fg\"\n                  onChange={(event) => setQuery(event.target.value)}\n                  placeholder={props.searchPlaceholder}\n                  value={query}\n                />\n                {loading && (\n                  <Icon\n                    name=\"loader-2\"\n                    className=\"size-lt-icon-md shrink-0 animate-spin text-lt-muted-fg\"\n                  />\n                )}\n              </div>\n              <div className=\"max-h-60 overflow-y-auto p-1\" role=\"listbox\">\n                {visibleOptions.length === 0 ? (\n                  <p className=\"px-3 py-2 text-sm text-lt-muted-fg\">{props.emptyLabel}</p>\n                ) : (\n                  visibleOptions.map((option) => {\n                    const isSelected = selected.includes(option.value);\n\n                    return (\n                      <button\n                        aria-selected={isSelected}\n                        data-test={`select-${name}-option-${option.value}`}\n                        className={cn(\n                          \"flex w-full items-center justify-between gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm transition-colors hover:bg-lt-accent hover:text-lt-accent-fg\",\n                          isSelected && \"bg-lt-accent/60\",\n                        )}\n                        key={option.value}\n                        onClick={() => pick(option)}\n                        role=\"option\"\n                        type=\"button\"\n                      >\n                        {option.label}\n                        {isSelected && <Icon name=\"check\" className=\"size-lt-icon-md shrink-0\" />}\n                      </button>\n                    );\n                  })\n                )}\n              </div>\n            </Popover.Content>\n          </Popover.Portal>\n        </Popover.Root>\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":[],"sources":["../../../../resources/js/form/components/fields/select.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/core/components/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/core/components/control\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { postFormAction } from \"../form-transport\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useFormValue, useFormValues } from \"../values\";\n\nfunction toValues(stored: unknown, fallback: unknown): string[] {\n  const source = stored ?? fallback;\n\n  if (Array.isArray(source)) {\n    return source.map(String);\n  }\n\n  if (source === undefined || source === null || source === \"\") {\n    return [];\n  }\n\n  return [String(source)];\n}\n\nexport const SelectComponent: RendererComponent<\"field.select\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { action, componentRef, errors } = useFormContext();\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { change, blur } = useFieldCommit();\n  const resolvedNode = useResolvedNode(node);\n  const name = props.name;\n  const scope = useFieldScope();\n  const domName = scope ? scope.scopedName(name) : name;\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const searchKey = scope ? scope.errorKey(name) : name;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple;\n  const searchable = props.searchable;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n\n  const globalValue = useFormValue(name);\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const storedValue = scope ? scope.getValue(name) : globalValue;\n  const selected = useMemo(() => toValues(storedValue, props.value), [storedValue, props.value]);\n\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[] | null>(null);\n  const [loading, setLoading] = useState(false);\n  const searchAbort = useRef<AbortController | null>(null);\n\n  const labels = useMemo(() => {\n    const map = new Map<string, string>();\n    for (const option of [...staticOptions, ...(results ?? [])]) {\n      map.set(option.value, option.label);\n    }\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => labels.get(value) ?? value;\n\n  const locked = readOnly || disabled;\n\n  const search = useCallback(\n    (query: string) => {\n      searchAbort.current?.abort();\n\n      if (query.trim() === \"\") {\n        setResults(null);\n        setLoading(false);\n\n        return;\n      }\n\n      const controller = new AbortController();\n      searchAbort.current = controller;\n      setLoading(true);\n\n      void postFormAction<{ options?: Option[] }>(\n        action,\n        componentRef,\n        { ...valuesRef.current, _search: searchKey, q: query },\n        controller.signal,\n      )\n        .then((response) => {\n          setResults(response?.options ?? []);\n          setLoading(false);\n        })\n        .catch(() => {});\n    },\n    [action, componentRef, searchKey],\n  );\n\n  function commit(next: string[]): void {\n    change(name, multiple ? next : (next[0] ?? \"\"));\n  }\n\n  function select(value: string): void {\n    if (multiple) {\n      commit(\n        selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value],\n      );\n\n      return;\n    }\n\n    commit([value]);\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n  return (\n    <FormFieldFrame\n      error={errors[errorKey]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      {multiple ? (\n        selected.map((value) => (\n          <input key={value} name={`${domName}[]`} type=\"hidden\" value={value} />\n        ))\n      ) : (\n        <input name={domName} type=\"hidden\" value={selected[0] ?? \"\"} />\n      )}\n\n      <div>\n        {multiple && selected.length > 0 && (\n          <div className=\"mb-1.5 flex flex-wrap gap-1\">\n            {selected.map((value) => (\n              <span\n                className=\"inline-flex items-center gap-1 rounded-lt-sm bg-lt-muted px-2 py-0.5 text-xs\"\n                key={value}\n              >\n                {labelFor(value)}\n                {!locked && (\n                  <button\n                    aria-label={t(\"a11y.removeOption\", \"Remove {{label}}\", {\n                      label: labelFor(value),\n                    })}\n                    data-test={`select-${name}-remove-${value}`}\n                    className=\"text-lt-muted-fg hover:text-lt-fg [&_svg]:size-lt-icon-xs\"\n                    onClick={() => remove(value)}\n                    type=\"button\"\n                  >\n                    <Icon name=\"x\" />\n                  </button>\n                )}\n              </span>\n            ))}\n          </div>\n        )}\n\n        <Combobox\n          emptyLabel={props.emptyLabel ?? undefined}\n          loading={loading}\n          multiple={multiple}\n          onSearch={searchable ? search : undefined}\n          onSelect={select}\n          open={open && !locked}\n          onOpenChange={(next) => {\n            setOpen(next);\n\n            if (!next) {\n              blur(name);\n            }\n          }}\n          options={options}\n          searchPlaceholder={props.searchPlaceholder ?? undefined}\n          selected={selected}\n          testId={`select-${name}`}\n          trigger={\n            <>\n              {!multiple && selected.length > 0 ? (\n                <span>{labelFor(selected[0])}</span>\n              ) : (\n                <span className=\"text-lt-muted-fg\">{placeholder}</span>\n              )}\n              <Icon name=\"chevrons-up-down\" className=\"size-lt-icon-md shrink-0 text-lt-muted-fg\" />\n            </>\n          }\n          triggerClassName={cn(\n            controlSurface(),\n            \"flex items-center justify-between gap-2 text-left\",\n            locked && \"cursor-not-allowed opacity-60\",\n          )}\n          triggerProps={{\n            \"aria-haspopup\": \"listbox\",\n            autoFocus: props.autoFocus ?? undefined,\n            \"data-test\": `select-${name}`,\n            disabled: locked,\n            tabIndex: props.tabIndex ?? undefined,\n          }}\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

package/dist/form/components/fields/simple-field.js

@@ -10,6 +10,7 @@ function SimpleField({ node, label, children }) {
 	return /* @__PURE__ */ jsx(FormFieldFrame, {
 		error: field.error,
 		helperText: fieldProps(node).helperText ?? void 0,
+		tooltip: fieldProps(node).tooltip ?? void 0,
 		label,
 		name: field.name,
 		required: field.required,

package/dist/form/components/fields/simple-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/simple-field.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { Node } from \"@lattice/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { fieldProps } from \"../field-props\";\nimport { type ControlledField, useControlledField } from \"../use-controlled-field\";\n\n/** The shared shell for single-input fields; the control is a render prop receiving the resolved field state. */\nexport function SimpleField({\n  node,\n  label,\n  children,\n}: {\n  node: Node;\n  label: string;\n  children: (field: ControlledField) => ReactNode;\n}) {\n  const field = useControlledField(node);\n\n  if (field.hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={field.error}\n      helperText={fieldProps(node).helperText ?? undefined}\n      label={label}\n      name={field.name}\n      required={field.required}\n    >\n      {children(field)}\n    </FormFieldFrame>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAgB,YAAY,EAC1B,MACA,OACA,YAKC;CACD,MAAM,QAAQ,mBAAmB,IAAI;CAErC,IAAI,MAAM,QACR,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,OAAO,MAAM;EACb,YAAY,WAAW,IAAI,EAAE,cAAc,KAAA;EACpC;EACP,MAAM,MAAM;EACZ,UAAU,MAAM;YAEf,SAAS,KAAK;CACD,CAAA;AAEpB"}
+{"version":3,"file":"simple-field.js","names":[],"sources":["../../../../resources/js/form/components/fields/simple-field.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { fieldProps } from \"../field-props\";\nimport { type ControlledField, useControlledField } from \"../use-controlled-field\";\n\n/** The shared shell for single-input fields; the control is a render prop receiving the resolved field state. */\nexport function SimpleField({\n  node,\n  label,\n  children,\n}: {\n  node: Node;\n  label: string;\n  children: (field: ControlledField) => ReactNode;\n}) {\n  const field = useControlledField(node);\n\n  if (field.hidden) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={field.error}\n      helperText={fieldProps(node).helperText ?? undefined}\n      tooltip={fieldProps(node).tooltip ?? undefined}\n      label={label}\n      name={field.name}\n      required={field.required}\n    >\n      {children(field)}\n    </FormFieldFrame>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAgB,YAAY,EAC1B,MACA,OACA,YAKC;CACD,MAAM,QAAQ,mBAAmB,IAAI;CAErC,IAAI,MAAM,QACR,OAAO;CAGT,OACE,oBAAC,gBAAD;EACE,OAAO,MAAM;EACb,YAAY,WAAW,IAAI,EAAE,cAAc,KAAA;EAC3C,SAAS,WAAW,IAAI,EAAE,WAAW,KAAA;EAC9B;EACP,MAAM,MAAM;EACZ,UAAU,MAAM;YAEf,SAAS,KAAK;CACD,CAAA;AAEpB"}

package/dist/form/components/fields/table-rows.d.ts

@@ -0,0 +1,32 @@
+import { Node } from '../../../core/types';
+import { ColumnWidth, RowAction as WireRowAction } from '../../../types/generated';
+import { RepeaterRow } from './repeater-rows';
+export type TableColumn = {
+    name: string;
+    label: string;
+    columnWidth: ColumnWidth;
+};
+export type TableRowModel = {
+    key: string;
+    index: number;
+    row: RepeaterRow;
+    template: Node[];
+    span: boolean;
+    heading?: string;
+};
+export declare function columnsFromSchema(nodes: Node[]): TableColumn[];
+export declare function TableRows({ base, columns, rows, reorderable, removable, rowActions, onField, onMove, onRemove, onDuplicate, registerRow, resizableColumns, resizeIndicator, }: {
+    base: string;
+    columns: TableColumn[];
+    rows: TableRowModel[];
+    reorderable: boolean;
+    removable: (index: number) => boolean;
+    rowActions: WireRowAction[] | null;
+    onField: (index: number, field: string, value: unknown) => void;
+    onMove: (index: number, delta: number) => void;
+    onRemove: (index: number) => void;
+    onDuplicate: (index: number) => void;
+    registerRow?: (key: string, el: HTMLElement | null) => void;
+    resizableColumns?: boolean;
+    resizeIndicator?: boolean;
+}): import("react").JSX.Element;

package/dist/form/components/fields/table-rows.js

@@ -0,0 +1,188 @@
+import { Icon } from "../../../icons/sprite.js";
+import { useT } from "../../../i18n/instance.js";
+import { RenderNode } from "../../../core/renderer.js";
+import { FieldScopeProvider } from "../field-scope.js";
+import "../../../core/column-sizing.js";
+import { useColumnResizing } from "../../../core/use-column-resizing.js";
+import { TableCellProvider } from "../row-layout-context.js";
+import { buildRowActions } from "./row-action-menu.js";
+import { RowActions } from "./row-actions.js";
+import { RowButton, RowItem } from "./row-item.js";
+import { memo, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/table-rows.tsx
+var rowControlTrack = "3rem";
+var rowActionTrack = "3rem";
+var rowControlTracks = [rowControlTrack];
+var rowActionTracks = [rowActionTrack];
+var tableViewportQuery = "(min-width: 768px)";
+function tableViewportMatches() {
+	if (typeof window === "undefined" || typeof window.matchMedia !== "function") return true;
+	return window.matchMedia(tableViewportQuery).matches;
+}
+function useTableViewport() {
+	const [matches, setMatches] = useState(tableViewportMatches);
+	useEffect(() => {
+		if (typeof window.matchMedia !== "function") return;
+		const query = window.matchMedia(tableViewportQuery);
+		const update = () => setMatches(query.matches);
+		update();
+		query.addEventListener("change", update);
+		return () => query.removeEventListener("change", update);
+	}, []);
+	return matches;
+}
+function columnsFromSchema(nodes) {
+	return nodes.map((node) => {
+		const props = node.props;
+		return {
+			name: String(props.name),
+			label: String(props.label ?? props.name),
+			columnWidth: props.columnWidth ?? "md"
+		};
+	});
+}
+var TableRowItem = memo(function TableRowItem({ base, index, row, template, span, isFirst, isLast, columnCount, gridTemplateColumns, flipKey, reorderable, removable, rowActions, onField, onMove, onRemove, onDuplicate, registerRow }) {
+	const { t } = useT("lattice");
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (el) => registerRow?.(flipKey, el),
+		"data-flip-key": flipKey,
+		"data-test": `table-row-${base}-${index}`,
+		className: "grid items-start gap-x-3",
+		style: { gridTemplateColumns },
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1 [&_svg]:size-lt-icon-sm",
+				children: [reorderable && !isFirst && /* @__PURE__ */ jsx(RowButton, {
+					label: "Move up",
+					testId: `table-${base}-up-${index}`,
+					onClick: () => onMove(index, -1),
+					children: /* @__PURE__ */ jsx(Icon, { name: "arrow-up" })
+				}), reorderable && !isLast && /* @__PURE__ */ jsx(RowButton, {
+					label: "Move down",
+					testId: `table-${base}-down-${index}`,
+					onClick: () => onMove(index, 1),
+					children: /* @__PURE__ */ jsx(Icon, { name: "arrow-down" })
+				})]
+			}),
+			/* @__PURE__ */ jsx(FieldScopeProvider, {
+				base,
+				index,
+				row,
+				onChange: (field, value) => onField(index, field, value),
+				children: /* @__PURE__ */ jsx(TableCellProvider, { children: span ? /* @__PURE__ */ jsx("div", {
+					"data-test": `table-row-${base}-${index}-span`,
+					className: "flex flex-col gap-2",
+					style: { gridColumn: `span ${columnCount}` },
+					children: template.map((child) => /* @__PURE__ */ jsx(RenderNode, { node: child }, child.key ?? child.id))
+				}) : template.map((child) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(RenderNode, { node: child }) }, child.key ?? child.id)) })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center",
+				children: /* @__PURE__ */ jsx(RowActions, { actions: buildRowActions(rowActions, {
+					index,
+					removable,
+					onRemove,
+					onDuplicate,
+					t
+				}) })
+			})
+		]
+	});
+});
+function TableRows({ base, columns, rows, reorderable, removable, rowActions, onField, onMove, onRemove, onDuplicate, registerRow, resizableColumns = false, resizeIndicator = false }) {
+	const { t } = useT("lattice");
+	const isTableViewport = useTableViewport();
+	const sizingColumns = useMemo(() => columns.map((column) => ({
+		key: column.name,
+		label: column.label,
+		width: column.columnWidth
+	})), [columns]);
+	const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resetColumns } = useColumnResizing({
+		columns: sizingColumns,
+		enabled: resizableColumns,
+		columnGapPx: 12,
+		leadingTracks: rowControlTracks,
+		showIndicator: resizeIndicator,
+		storageKey: resizableColumns ? `lattice:table-columns:form:${base}` : void 0,
+		trailingTracks: rowActionTracks
+	});
+	if (!isTableViewport) return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-3",
+		children: rows.map((row) => /* @__PURE__ */ jsx("div", {
+			ref: (el) => registerRow?.(row.key, el),
+			"data-flip-key": row.key,
+			children: /* @__PURE__ */ jsx(RowItem, {
+				base,
+				index: row.index,
+				row: row.row,
+				template: row.template,
+				heading: row.heading ?? `#${row.index + 1}`,
+				reorderable,
+				isFirst: row.index === 0,
+				isLast: row.index === rows.length - 1,
+				removable: removable(row.index),
+				rowActions,
+				onField,
+				onRemove,
+				onMove,
+				onDuplicate
+			})
+		}, row.key))
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [hasOverrides && /* @__PURE__ */ jsx("button", {
+			"aria-label": t("a11y.resetColumnWidths", "Reset column widths"),
+			className: "absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex",
+			"data-test": "table-reset-columns",
+			onClick: resetColumns,
+			title: t("a11y.resetColumnWidths", "Reset column widths"),
+			type: "button",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "rotate-ccw",
+				className: "size-lt-icon-sm"
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "overflow-x-auto",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-max flex-col gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "grid items-center gap-x-3",
+					style: { gridTemplateColumns },
+					children: [
+						/* @__PURE__ */ jsx("div", {}),
+						columns.map((column, index) => /* @__PURE__ */ jsxs("div", {
+							className: "relative min-w-0 pr-3 text-xs font-medium text-lt-muted-fg",
+							children: [column.label, resizableColumns && /* @__PURE__ */ jsx("div", { ...getResizeHandleProps(sizingColumns[index]) })]
+						}, column.name)),
+						/* @__PURE__ */ jsx("div", {})
+					]
+				}), rows.map((row) => /* @__PURE__ */ jsx(TableRowItem, {
+					base,
+					index: row.index,
+					row: row.row,
+					template: row.template,
+					span: row.span,
+					isFirst: row.index === 0,
+					isLast: row.index === rows.length - 1,
+					columnCount: columns.length,
+					gridTemplateColumns,
+					flipKey: row.key,
+					reorderable,
+					removable: removable(row.index),
+					rowActions,
+					onField,
+					onMove,
+					onRemove,
+					onDuplicate,
+					registerRow
+				}, row.key))]
+			})
+		})]
+	});
+}
+//#endregion
+export { TableRows, columnsFromSchema };
+
+//# sourceMappingURL=table-rows.js.map

package/dist/form/components/fields/table-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-rows.js","names":[],"sources":["../../../../resources/js/form/components/fields/table-rows.tsx"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport { DEFAULT_COLUMN_WIDTH, type SizableColumn } from \"@lattice-php/lattice/core/column-sizing\";\nimport { useColumnResizing } from \"@lattice-php/lattice/core/use-column-resizing\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { memo, useEffect, useMemo, useState } from \"react\";\nimport type { ColumnWidth, RowAction as WireRowAction } from \"@lattice-php/lattice/types/generated\";\nimport { FieldScopeProvider } from \"../field-scope\";\nimport { TableCellProvider } from \"../row-layout-context\";\nimport { buildRowActions } from \"./row-action-menu\";\nimport { RowActions } from \"./row-actions\";\nimport { RowButton, RowItem } from \"./row-item\";\nimport type { RepeaterRow } from \"./repeater-rows\";\n\nconst rowControlTrack = \"3rem\";\nconst rowActionTrack = \"3rem\";\nconst rowControlTracks = [rowControlTrack];\nconst rowActionTracks = [rowActionTrack];\nconst tableViewportQuery = \"(min-width: 768px)\";\n\nexport type TableColumn = { name: string; label: string; columnWidth: ColumnWidth };\n\nexport type TableRowModel = {\n  key: string;\n  index: number;\n  row: RepeaterRow;\n  template: Node[];\n  span: boolean;\n  heading?: string;\n};\n\nfunction tableViewportMatches(): boolean {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return true;\n  }\n\n  return window.matchMedia(tableViewportQuery).matches;\n}\n\nfunction useTableViewport(): boolean {\n  const [matches, setMatches] = useState(tableViewportMatches);\n\n  useEffect(() => {\n    if (typeof window.matchMedia !== \"function\") {\n      return;\n    }\n\n    const query = window.matchMedia(tableViewportQuery);\n    const update = () => setMatches(query.matches);\n\n    update();\n    query.addEventListener(\"change\", update);\n\n    return () => query.removeEventListener(\"change\", update);\n  }, []);\n\n  return matches;\n}\n\nexport function columnsFromSchema(nodes: Node[]): TableColumn[] {\n  return nodes.map((node) => {\n    const props = node.props as {\n      name: unknown;\n      label?: unknown;\n      columnWidth?: ColumnWidth | null;\n    };\n    return {\n      name: String(props.name),\n      label: String(props.label ?? props.name),\n      columnWidth: props.columnWidth ?? DEFAULT_COLUMN_WIDTH,\n    };\n  });\n}\n\ntype TableRowItemProps = {\n  base: string;\n  index: number;\n  row: RepeaterRow;\n  template: Node[];\n  span: boolean;\n  isFirst: boolean;\n  isLast: boolean;\n  columnCount: number;\n  gridTemplateColumns: string;\n  flipKey: string;\n  reorderable: boolean;\n  removable: boolean;\n  rowActions: WireRowAction[] | null;\n  onField: (index: number, field: string, value: unknown) => void;\n  onMove: (index: number, delta: number) => void;\n  onRemove: (index: number) => void;\n  onDuplicate: (index: number) => void;\n  registerRow?: (key: string, el: HTMLElement | null) => void;\n};\n\nconst TableRowItem = memo(function TableRowItem({\n  base,\n  index,\n  row,\n  template,\n  span,\n  isFirst,\n  isLast,\n  columnCount,\n  gridTemplateColumns,\n  flipKey,\n  reorderable,\n  removable,\n  rowActions,\n  onField,\n  onMove,\n  onRemove,\n  onDuplicate,\n  registerRow,\n}: TableRowItemProps) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div\n      ref={(el) => registerRow?.(flipKey, el)}\n      data-flip-key={flipKey}\n      data-test={`table-row-${base}-${index}`}\n      className=\"grid items-start gap-x-3\"\n      style={{ gridTemplateColumns }}\n    >\n      <div className=\"flex items-center gap-1 [&_svg]:size-lt-icon-sm\">\n        {reorderable && !isFirst && (\n          <RowButton\n            label=\"Move up\"\n            testId={`table-${base}-up-${index}`}\n            onClick={() => onMove(index, -1)}\n          >\n            <Icon name=\"arrow-up\" />\n          </RowButton>\n        )}\n        {reorderable && !isLast && (\n          <RowButton\n            label=\"Move down\"\n            testId={`table-${base}-down-${index}`}\n            onClick={() => onMove(index, 1)}\n          >\n            <Icon name=\"arrow-down\" />\n          </RowButton>\n        )}\n      </div>\n\n      <FieldScopeProvider\n        base={base}\n        index={index}\n        row={row}\n        onChange={(field, value) => onField(index, field, value)}\n      >\n        <TableCellProvider>\n          {span ? (\n            <div\n              data-test={`table-row-${base}-${index}-span`}\n              className=\"flex flex-col gap-2\"\n              style={{ gridColumn: `span ${columnCount}` }}\n            >\n              {template.map((child) => (\n                <RenderNode key={child.key ?? child.id} node={child} />\n              ))}\n            </div>\n          ) : (\n            template.map((child) => (\n              <div key={child.key ?? child.id}>\n                <RenderNode node={child} />\n              </div>\n            ))\n          )}\n        </TableCellProvider>\n      </FieldScopeProvider>\n\n      <div className=\"flex items-center\">\n        <RowActions\n          actions={buildRowActions(rowActions, { index, removable, onRemove, onDuplicate, t })}\n        />\n      </div>\n    </div>\n  );\n});\n\nexport function TableRows({\n  base,\n  columns,\n  rows,\n  reorderable,\n  removable,\n  rowActions,\n  onField,\n  onMove,\n  onRemove,\n  onDuplicate,\n  registerRow,\n  resizableColumns = false,\n  resizeIndicator = false,\n}: {\n  base: string;\n  columns: TableColumn[];\n  rows: TableRowModel[];\n  reorderable: boolean;\n  removable: (index: number) => boolean;\n  rowActions: WireRowAction[] | null;\n  onField: (index: number, field: string, value: unknown) => void;\n  onMove: (index: number, delta: number) => void;\n  onRemove: (index: number) => void;\n  onDuplicate: (index: number) => void;\n  registerRow?: (key: string, el: HTMLElement | null) => void;\n  resizableColumns?: boolean;\n  resizeIndicator?: boolean;\n}) {\n  const { t } = useT(\"lattice\");\n  const isTableViewport = useTableViewport();\n  const sizingColumns = useMemo<SizableColumn[]>(\n    () =>\n      columns.map((column) => ({\n        key: column.name,\n        label: column.label,\n        width: column.columnWidth,\n      })),\n    [columns],\n  );\n  const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resetColumns } =\n    useColumnResizing({\n      columns: sizingColumns,\n      enabled: resizableColumns,\n      columnGapPx: 12,\n      leadingTracks: rowControlTracks,\n      showIndicator: resizeIndicator,\n      storageKey: resizableColumns ? `lattice:table-columns:form:${base}` : undefined,\n      trailingTracks: rowActionTracks,\n    });\n\n  if (!isTableViewport) {\n    return (\n      <div className=\"flex flex-col gap-3\">\n        {rows.map((row) => (\n          <div key={row.key} ref={(el) => registerRow?.(row.key, el)} data-flip-key={row.key}>\n            <RowItem\n              base={base}\n              index={row.index}\n              row={row.row}\n              template={row.template}\n              heading={row.heading ?? `#${row.index + 1}`}\n              reorderable={reorderable}\n              isFirst={row.index === 0}\n              isLast={row.index === rows.length - 1}\n              removable={removable(row.index)}\n              rowActions={rowActions}\n              onField={onField}\n              onRemove={onRemove}\n              onMove={onMove}\n              onDuplicate={onDuplicate}\n            />\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative\">\n      {hasOverrides && (\n        <button\n          aria-label={t(\"a11y.resetColumnWidths\", \"Reset column widths\")}\n          className=\"absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex\"\n          data-test=\"table-reset-columns\"\n          onClick={resetColumns}\n          title={t(\"a11y.resetColumnWidths\", \"Reset column widths\")}\n          type=\"button\"\n        >\n          <Icon name=\"rotate-ccw\" className=\"size-lt-icon-sm\" />\n        </button>\n      )}\n      <div className=\"overflow-x-auto\">\n        <div className=\"flex min-w-max flex-col gap-2\">\n          <div className=\"grid items-center gap-x-3\" style={{ gridTemplateColumns }}>\n            <div />\n            {columns.map((column, index) => (\n              <div\n                key={column.name}\n                className=\"relative min-w-0 pr-3 text-xs font-medium text-lt-muted-fg\"\n              >\n                {column.label}\n                {resizableColumns && <div {...getResizeHandleProps(sizingColumns[index])} />}\n              </div>\n            ))}\n            <div />\n          </div>\n\n          {rows.map((row) => (\n            <TableRowItem\n              key={row.key}\n              base={base}\n              index={row.index}\n              row={row.row}\n              template={row.template}\n              span={row.span}\n              isFirst={row.index === 0}\n              isLast={row.index === rows.length - 1}\n              columnCount={columns.length}\n              gridTemplateColumns={gridTemplateColumns}\n              flipKey={row.key}\n              reorderable={reorderable}\n              removable={removable(row.index)}\n              rowActions={rowActions}\n              onField={onField}\n              onMove={onMove}\n              onRemove={onRemove}\n              onDuplicate={onDuplicate}\n              registerRow={registerRow}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/form/components/fields/text-input.d.ts

@@ -1,2 +1,2 @@
 import { RendererComponent } from '../../../core/types';
-export declare const TextInputComponent: RendererComponent<"form.text-input">;
+export declare const TextInputComponent: RendererComponent<"field.text-input">;

package/dist/form/components/fields/text-input.js

@@ -1,5 +1,6 @@
 import { Input } from "../base/input.js";
 import { SimpleField } from "./simple-field.js";
+import { AffixGroup } from "../base/affix-group.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/text-input.tsx
 var TextInputComponent = ({ node }) => {
@@ -7,18 +8,24 @@ var TextInputComponent = ({ node }) => {
 	return /* @__PURE__ */ jsx(SimpleField, {
 		node,
 		label: props.label ?? "",
-		children: ({ name, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Input, {
-			autoComplete: props.autoComplete ?? "",
-			autoFocus: props.autoFocus ?? false,
-			disabled,
-			id: name,
-			name,
-			onChange: (event) => commit(event.target.value),
-			placeholder: props.placeholder ?? "",
-			readOnly,
-			tabIndex: props.tabIndex ?? void 0,
-			type: props.type ?? "text",
-			value
+		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(AffixGroup, {
+			prefix: props.prefix,
+			suffix: props.suffix,
+			children: (controlClassName) => /* @__PURE__ */ jsx(Input, {
+				autoComplete: props.autoComplete ?? "",
+				autoFocus: props.autoFocus ?? false,
+				className: controlClassName,
+				"data-test": testId,
+				disabled,
+				id: name,
+				name,
+				onChange: (event) => commit(event.target.value),
+				placeholder: props.placeholder ?? "",
+				readOnly,
+				tabIndex: props.tabIndex ?? void 0,
+				type: props.type ?? "text",
+				value
+			})
 		})
 	});
 };

package/dist/form/components/fields/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextInputComponent: RendererComponent<\"form.text-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, value, readOnly, disabled, commit }) => (\n        <Input\n          autoComplete={props.autoComplete ?? \"\"}\n          autoFocus={props.autoFocus ?? false}\n          disabled={disabled}\n          id={name}\n          name={name}\n          onChange={(event) => commit(event.target.value)}\n          placeholder={props.placeholder ?? \"\"}\n          readOnly={readOnly}\n          tabIndex={props.tabIndex ?? undefined}\n          type={props.type ?? \"text\"}\n          value={value}\n        />\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,sBAA4D,EAAE,WAAW;CACpF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,OAAO,UAAU,UAAU,aACnC,oBAAC,OAAD;GACE,cAAc,MAAM,gBAAgB;GACpC,WAAW,MAAM,aAAa;GACpB;GACV,IAAI;GACE;GACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;GAC9C,aAAa,MAAM,eAAe;GACxB;GACV,UAAU,MAAM,YAAY,KAAA;GAC5B,MAAM,MAAM,QAAQ;GACb;EACR,CAAA;CAEQ,CAAA;AAEjB"}
+{"version":3,"file":"text-input.js","names":[],"sources":["../../../../resources/js/form/components/fields/text-input.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { AffixGroup } from \"../base/affix-group\";\nimport { Input } from \"../base/input\";\nimport { SimpleField } from \"./simple-field\";\n\nexport const TextInputComponent: RendererComponent<\"field.text-input\"> = ({ node }) => {\n  const props = node.props;\n\n  return (\n    <SimpleField node={node} label={props.label ?? \"\"}>\n      {({ name, testId, value, readOnly, disabled, commit }) => (\n        <AffixGroup prefix={props.prefix} suffix={props.suffix}>\n          {(controlClassName) => (\n            <Input\n              autoComplete={props.autoComplete ?? \"\"}\n              autoFocus={props.autoFocus ?? false}\n              className={controlClassName}\n              data-test={testId}\n              disabled={disabled}\n              id={name}\n              name={name}\n              onChange={(event) => commit(event.target.value)}\n              placeholder={props.placeholder ?? \"\"}\n              readOnly={readOnly}\n              tabIndex={props.tabIndex ?? undefined}\n              type={props.type ?? \"text\"}\n              value={value}\n            />\n          )}\n        </AffixGroup>\n      )}\n    </SimpleField>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,sBAA6D,EAAE,WAAW;CACrF,MAAM,QAAQ,KAAK;CAEnB,OACE,oBAAC,aAAD;EAAmB;EAAM,OAAO,MAAM,SAAS;aAC3C,EAAE,MAAM,QAAQ,OAAO,UAAU,UAAU,aAC3C,oBAAC,YAAD;GAAY,QAAQ,MAAM;GAAQ,QAAQ,MAAM;cAC5C,qBACA,oBAAC,OAAD;IACE,cAAc,MAAM,gBAAgB;IACpC,WAAW,MAAM,aAAa;IAC9B,WAAW;IACX,aAAW;IACD;IACV,IAAI;IACE;IACN,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,aAAa,MAAM,eAAe;IACxB;IACV,UAAU,MAAM,YAAY,KAAA;IAC5B,MAAM,MAAM,QAAQ;IACb;GACR,CAAA;EAEO,CAAA;CAEH,CAAA;AAEjB"}

package/dist/form/components/fields/textarea.d.ts

@@ -1,2 +1,2 @@
 import { RendererComponent } from '../../../core/types';
-export declare const TextareaComponent: RendererComponent<"form.textarea">;
+export declare const TextareaComponent: RendererComponent<"field.textarea">;