@lattice-php/lattice 0.1.0 → 0.3.0

package/dist/form/components/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../resources/js/form/components/context.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\ntype FormContextValue = {\n  action: string;\n  clearErrors: (field: string) => void;\n  componentRef: string;\n  errors: Record<string, string | undefined>;\n  fieldLabels: Record<string, string>;\n  invalid: (field: string) => boolean;\n  precognitive: boolean;\n  processing: boolean;\n  touch: (field: string) => void;\n  validate: (field: string) => void;\n  validating: boolean;\n  valid: (field: string) => boolean;\n};\n\nconst FormContext = createContext<FormContextValue>({\n  action: \"#\",\n  clearErrors: () => {},\n  componentRef: \"\",\n  errors: {},\n  fieldLabels: {},\n  invalid: () => false,\n  precognitive: false,\n  processing: false,\n  touch: () => {},\n  validate: () => {},\n  validating: false,\n  valid: () => false,\n});\n\nexport function FormProvider({\n  children,\n  value,\n}: {\n  children: React.ReactNode;\n  value: FormContextValue;\n}) {\n  return <FormContext.Provider value={value}>{children}</FormContext.Provider>;\n}\n\nexport function useFormContext() {\n  return useContext(FormContext);\n}\n"],"mappings":";;;AAiBA,IAAM,cAAc,cAAgC;CAClD,QAAQ;CACR,mBAAmB,CAAC;CACpB,cAAc;CACd,QAAQ,CAAC;CACT,aAAa,CAAC;CACd,eAAe;CACf,cAAc;CACd,YAAY;CACZ,aAAa,CAAC;CACd,gBAAgB,CAAC;CACjB,YAAY;CACZ,aAAa;AACf,CAAC;AAED,SAAgB,aAAa,EAC3B,UACA,SAIC;CACD,OAAO,oBAAC,YAAY,UAAb;EAA6B;EAAQ;CAA+B,CAAA;AAC7E;AAEA,SAAgB,iBAAiB;CAC/B,OAAO,WAAW,WAAW;AAC/B"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../resources/js/form/components/context.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\ntype FormContextValue = {\n  action: string;\n  clearErrors: (field: string) => void;\n  componentId?: string;\n  componentRef: string;\n  errors: Record<string, string | undefined>;\n  fieldLabels: Record<string, string>;\n  precognitive: boolean;\n  processing: boolean;\n  validate: (field: string) => void;\n};\n\nconst FormContext = createContext<FormContextValue>({\n  action: \"#\",\n  clearErrors: () => {},\n  componentId: undefined,\n  componentRef: \"\",\n  errors: {},\n  fieldLabels: {},\n  precognitive: false,\n  processing: false,\n  validate: () => {},\n});\n\nexport function FormProvider({\n  children,\n  value,\n}: {\n  children: React.ReactNode;\n  value: FormContextValue;\n}) {\n  return <FormContext.Provider value={value}>{children}</FormContext.Provider>;\n}\n\nexport function useFormContext() {\n  return useContext(FormContext);\n}\n"],"mappings":";;;AAcA,IAAM,cAAc,cAAgC;CAClD,QAAQ;CACR,mBAAmB,CAAC;CACpB,aAAa,KAAA;CACb,cAAc;CACd,QAAQ,CAAC;CACT,aAAa,CAAC;CACd,cAAc;CACd,YAAY;CACZ,gBAAgB,CAAC;AACnB,CAAC;AAED,SAAgB,aAAa,EAC3B,UACA,SAIC;CACD,OAAO,oBAAC,YAAY,UAAb;EAA6B;EAAQ;CAA+B,CAAA;AAC7E;AAEA,SAAgB,iBAAiB;CAC/B,OAAO,WAAW,WAAW;AAC/B"}

package/dist/form/components/field-props.d.ts

@@ -0,0 +1,28 @@
+import { Node } from '../../core/types';
+import { FieldConditions } from './conditions';
+/**
+ * The props every form-field node shares (the PHP Field base). Nodes flow through
+ * the form framework loosely typed via the generic schema, so this is the typed
+ * lens the shared hooks read them through. Everything is optional because the
+ * lens is also applied to non-field nodes while walking the schema.
+ */
+export type FieldProps = {
+    conditions?: FieldConditions | null;
+    dependsOnAny?: boolean | null;
+    dependsOnKeys?: string[] | null;
+    disabled?: boolean | null;
+    helperText?: string | null;
+    hidden?: boolean | null;
+    label?: string | null;
+    name?: string;
+    editablePrefill?: boolean | null;
+    prefillRefreshOn?: string[] | null;
+    prefillResetOn?: string[] | null;
+    readOnly?: boolean | null;
+    required?: boolean | null;
+    tooltip?: string | null;
+    value?: unknown;
+};
+export declare function fieldProps(node: Node): FieldProps;
+/** The single schema traversal shared by the label/value and dependency-watch collectors. */
+export declare function walkFields(nodes: Node[] | undefined, visit: (props: FieldProps, node: Node) => void): void;

package/dist/form/components/field-props.js

@@ -0,0 +1,15 @@
+//#region resources/js/form/components/field-props.ts
+function fieldProps(node) {
+	return node.props;
+}
+/** The single schema traversal shared by the label/value and dependency-watch collectors. */
+function walkFields(nodes, visit) {
+	for (const child of nodes ?? []) {
+		visit(fieldProps(child), child);
+		walkFields(child.schema, visit);
+	}
+}
+//#endregion
+export { fieldProps, walkFields };
+
+//# sourceMappingURL=field-props.js.map

package/dist/form/components/field-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-props.js","names":[],"sources":["../../../resources/js/form/components/field-props.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { FieldConditions } from \"./conditions\";\n\n/**\n * The props every form-field node shares (the PHP Field base). Nodes flow through\n * the form framework loosely typed via the generic schema, so this is the typed\n * lens the shared hooks read them through. Everything is optional because the\n * lens is also applied to non-field nodes while walking the schema.\n */\nexport type FieldProps = {\n  conditions?: FieldConditions | null;\n  dependsOnAny?: boolean | null;\n  dependsOnKeys?: string[] | null;\n  disabled?: boolean | null;\n  helperText?: string | null;\n  hidden?: boolean | null;\n  label?: string | null;\n  name?: string;\n  editablePrefill?: boolean | null;\n  prefillRefreshOn?: string[] | null;\n  prefillResetOn?: string[] | null;\n  readOnly?: boolean | null;\n  required?: boolean | null;\n  tooltip?: string | null;\n  value?: unknown;\n};\n\nexport function fieldProps(node: Node): FieldProps {\n  return node.props as FieldProps;\n}\n\n/** The single schema traversal shared by the label/value and dependency-watch collectors. */\nexport function walkFields(\n  nodes: Node[] | undefined,\n  visit: (props: FieldProps, node: Node) => void,\n): void {\n  for (const child of nodes ?? []) {\n    visit(fieldProps(child), child);\n    walkFields(child.schema, visit);\n  }\n}\n"],"mappings":";AA2BA,SAAgB,WAAW,MAAwB;CACjD,OAAO,KAAK;AACd;;AAGA,SAAgB,WACd,OACA,OACM;CACN,KAAK,MAAM,SAAS,SAAS,CAAC,GAAG;EAC/B,MAAM,WAAW,KAAK,GAAG,KAAK;EAC9B,WAAW,MAAM,QAAQ,KAAK;CAChC;AACF"}

package/dist/form/components/field-scope.d.ts

@@ -0,0 +1,21 @@
+export type FieldScopeValue = {
+    row: Record<string, unknown>;
+    rowId: string | null;
+    path: string;
+    values: Record<string, unknown>;
+    identityPath: string;
+    getValue: (name: string) => unknown;
+    setValue: (name: string, value: unknown) => void;
+    scopedName: (name: string) => string;
+    errorKey: (name: string) => string;
+    overrideKey: (name: string) => string;
+};
+export declare function FieldScopeProvider({ base, index, row, onChange, children, }: {
+    base: string;
+    index: number;
+    row: Record<string, unknown>;
+    onChange: (name: string, value: unknown) => void;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+/** Null outside a row so callers can preserve top-level behavior without a wrapper. */
+export declare function useFieldScope(): FieldScopeValue | null;

package/dist/form/components/field-scope.js

@@ -0,0 +1,54 @@
+import { appendPath, getPath, toHtmlName } from "./form-path.js";
+import { buildOverrideKey, rowIdFrom } from "./override-keys.js";
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/form/components/field-scope.tsx
+var FieldScopeContext = createContext(null);
+function childCollectionIdentity(base, parent) {
+	if (!parent) return base;
+	const local = base.startsWith(`${parent.path}.`) ? base.slice(parent.path.length + 1) : base;
+	return appendPath(parent.identityPath, local);
+}
+function FieldScopeProvider({ base, index, row, onChange, children }) {
+	const parent = useContext(FieldScopeContext);
+	const value = useMemo(() => {
+		const scopedRow = row ?? {};
+		const rowId = rowIdFrom(scopedRow);
+		const path = appendPath(base, index);
+		const identityCollection = childCollectionIdentity(base, parent);
+		const identityPath = appendPath(identityCollection, rowId ?? index);
+		return {
+			row: scopedRow,
+			rowId,
+			path,
+			values: parent ? {
+				...parent.values,
+				...scopedRow
+			} : scopedRow,
+			identityPath,
+			getValue: (name) => getPath(scopedRow, name),
+			setValue: onChange,
+			scopedName: (name) => toHtmlName(appendPath(path, name)),
+			errorKey: (name) => appendPath(path, name),
+			overrideKey: (name) => buildOverrideKey(identityCollection, rowId, index, name)
+		};
+	}, [
+		base,
+		index,
+		row,
+		onChange,
+		parent
+	]);
+	return /* @__PURE__ */ jsx(FieldScopeContext.Provider, {
+		value,
+		children
+	});
+}
+/** Null outside a row so callers can preserve top-level behavior without a wrapper. */
+function useFieldScope() {
+	return useContext(FieldScopeContext);
+}
+//#endregion
+export { FieldScopeProvider, useFieldScope };
+
+//# sourceMappingURL=field-scope.js.map

package/dist/form/components/field-scope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-scope.js","names":[],"sources":["../../../resources/js/form/components/field-scope.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\nimport { appendPath, getPath, toHtmlName } from \"./form-path\";\nimport { buildOverrideKey, rowIdFrom } from \"./override-keys\";\n\nexport type FieldScopeValue = {\n  row: Record<string, unknown>;\n  rowId: string | null;\n  path: string;\n  values: Record<string, unknown>;\n  identityPath: string;\n  getValue: (name: string) => unknown;\n  setValue: (name: string, value: unknown) => void;\n  scopedName: (name: string) => string;\n  errorKey: (name: string) => string;\n  overrideKey: (name: string) => string;\n};\n\nconst FieldScopeContext = createContext<FieldScopeValue | null>(null);\n\nfunction childCollectionIdentity(base: string, parent: FieldScopeValue | null): string {\n  if (!parent) {\n    return base;\n  }\n\n  const local = base.startsWith(`${parent.path}.`) ? base.slice(parent.path.length + 1) : base;\n\n  return appendPath(parent.identityPath, local);\n}\n\nexport function FieldScopeProvider({\n  base,\n  index,\n  row,\n  onChange,\n  children,\n}: {\n  base: string;\n  index: number;\n  row: Record<string, unknown>;\n  onChange: (name: string, value: unknown) => void;\n  children: React.ReactNode;\n}) {\n  const parent = useContext(FieldScopeContext);\n\n  const value = useMemo<FieldScopeValue>(() => {\n    const scopedRow = row ?? {};\n    const rowId = rowIdFrom(scopedRow);\n    const path = appendPath(base, index);\n    const identityCollection = childCollectionIdentity(base, parent);\n    const identityPath = appendPath(identityCollection, rowId ?? index);\n\n    return {\n      row: scopedRow,\n      rowId,\n      path,\n      values: parent ? { ...parent.values, ...scopedRow } : scopedRow,\n      identityPath,\n      getValue: (name) => getPath(scopedRow, name),\n      setValue: onChange,\n      scopedName: (name) => toHtmlName(appendPath(path, name)),\n      errorKey: (name) => appendPath(path, name),\n      overrideKey: (name) => buildOverrideKey(identityCollection, rowId, index, name),\n    };\n  }, [base, index, row, onChange, parent]);\n\n  return <FieldScopeContext.Provider value={value}>{children}</FieldScopeContext.Provider>;\n}\n\n/** Null outside a row so callers can preserve top-level behavior without a wrapper. */\nexport function useFieldScope(): FieldScopeValue | null {\n  return useContext(FieldScopeContext);\n}\n"],"mappings":";;;;;AAiBA,IAAM,oBAAoB,cAAsC,IAAI;AAEpE,SAAS,wBAAwB,MAAc,QAAwC;CACrF,IAAI,CAAC,QACH,OAAO;CAGT,MAAM,QAAQ,KAAK,WAAW,GAAG,OAAO,KAAK,EAAE,IAAI,KAAK,MAAM,OAAO,KAAK,SAAS,CAAC,IAAI;CAExF,OAAO,WAAW,OAAO,cAAc,KAAK;AAC9C;AAEA,SAAgB,mBAAmB,EACjC,MACA,OACA,KACA,UACA,YAOC;CACD,MAAM,SAAS,WAAW,iBAAiB;CAE3C,MAAM,QAAQ,cAA+B;EAC3C,MAAM,YAAY,OAAO,CAAC;EAC1B,MAAM,QAAQ,UAAU,SAAS;EACjC,MAAM,OAAO,WAAW,MAAM,KAAK;EACnC,MAAM,qBAAqB,wBAAwB,MAAM,MAAM;EAC/D,MAAM,eAAe,WAAW,oBAAoB,SAAS,KAAK;EAElE,OAAO;GACL,KAAK;GACL;GACA;GACA,QAAQ,SAAS;IAAE,GAAG,OAAO;IAAQ,GAAG;GAAU,IAAI;GACtD;GACA,WAAW,SAAS,QAAQ,WAAW,IAAI;GAC3C,UAAU;GACV,aAAa,SAAS,WAAW,WAAW,MAAM,IAAI,CAAC;GACvD,WAAW,SAAS,WAAW,MAAM,IAAI;GACzC,cAAc,SAAS,iBAAiB,oBAAoB,OAAO,OAAO,IAAI;EAChF;CACF,GAAG;EAAC;EAAM;EAAO;EAAK;EAAU;CAAM,CAAC;CAEvC,OAAO,oBAAC,kBAAkB,UAAnB;EAAmC;EAAQ;CAAqC,CAAA;AACzF;;AAGA,SAAgB,gBAAwC;CACtD,OAAO,WAAW,iBAAiB;AACrC"}

package/dist/form/components/fields/block-add-menu.d.ts

@@ -0,0 +1,9 @@
+export type BlockOption = {
+    type: string;
+    label: string;
+};
+export declare function BlockAddMenu({ addLabel, blocks, onSelect, }: {
+    addLabel: string;
+    blocks: BlockOption[];
+    onSelect: (type: string) => void;
+}): import("react").JSX.Element;

package/dist/form/components/fields/block-add-menu.js

@@ -0,0 +1,27 @@
+import { Icon } from "../../../icons/sprite.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../core/components/dropdown-menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/block-add-menu.tsx
+function BlockAddMenu({ addLabel, blocks, onSelect }) {
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-test": "builder-add",
+			className: "inline-flex items-center gap-1.5 self-start rounded-lt-sm border border-lt-border px-3 py-1.5 text-sm hover:bg-lt-accent [&_svg]:size-lt-icon-sm",
+			children: [/* @__PURE__ */ jsx(Icon, { name: "plus" }), addLabel]
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "start",
+		className: "min-w-[12rem]",
+		children: blocks.map((block) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+			"data-test": `builder-add-${block.type}`,
+			onClick: () => onSelect(block.type),
+			children: block.label
+		}, block.type))
+	})] });
+}
+//#endregion
+export { BlockAddMenu };
+
+//# sourceMappingURL=block-add-menu.js.map

package/dist/form/components/fields/block-add-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-add-menu.js","names":[],"sources":["../../../../resources/js/form/components/fields/block-add-menu.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@lattice-php/lattice/core/components/dropdown-menu\";\n\nexport type BlockOption = { type: string; label: string };\n\nexport function BlockAddMenu({\n  addLabel,\n  blocks,\n  onSelect,\n}: {\n  addLabel: string;\n  blocks: BlockOption[];\n  onSelect: (type: string) => void;\n}) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          type=\"button\"\n          data-test=\"builder-add\"\n          className=\"inline-flex items-center gap-1.5 self-start rounded-lt-sm border border-lt-border px-3 py-1.5 text-sm hover:bg-lt-accent [&_svg]:size-lt-icon-sm\"\n        >\n          <Icon name=\"plus\" />\n          {addLabel}\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"start\" className=\"min-w-[12rem]\">\n        {blocks.map((block) => (\n          <DropdownMenuItem\n            key={block.type}\n            data-test={`builder-add-${block.type}`}\n            onClick={() => onSelect(block.type)}\n          >\n            {block.label}\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;;AAUA,SAAgB,aAAa,EAC3B,UACA,QACA,YAKC;CACD,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD;EAAqB,SAAA;YACnB,qBAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,WAAU;aAHZ,CAKE,oBAAC,MAAD,EAAM,MAAK,OAAQ,CAAA,GAClB,QACK;;CACW,CAAA,GACrB,oBAAC,qBAAD;EAAqB,OAAM;EAAQ,WAAU;YAC1C,OAAO,KAAK,UACX,oBAAC,kBAAD;GAEE,aAAW,eAAe,MAAM;GAChC,eAAe,SAAS,MAAM,IAAI;aAEjC,MAAM;EACS,GALX,MAAM,IAKK,CACnB;CACkB,CAAA,CACT,EAAA,CAAA;AAElB"}

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

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

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

@@ -0,0 +1,124 @@
+import { useT } from "../../../i18n/instance.js";
+import { useFormContext } from "../context.js";
+import "./repeater-rows.js";
+import { appendPath, toHtmlName } from "../form-path.js";
+import { FormFieldFrame } from "../base/field.js";
+import { useDependentField } from "../use-dependent-field.js";
+import { BlockAddMenu } from "./block-add-menu.js";
+import { buildRowActions } from "./row-action-menu.js";
+import { RowActions } from "./row-actions.js";
+import { RowItem } from "./row-item.js";
+import { TableRows, columnsFromSchema } from "./table-rows.js";
+import { useFlipReorder } from "./use-flip-reorder.js";
+import { useRowCollection } from "./use-row-collection.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/form/components/fields/builder.tsx
+var EMPTY_TEMPLATE = [];
+var BuilderComponent = ({ node }) => {
+	const props = node.props;
+	const name = props.name;
+	const blocks = node.blocks ?? [];
+	const { errors } = useFormContext();
+	const { hidden, required } = useDependentField(node);
+	const { path, rows, onField, onRemove, onMove, onDuplicate, append } = useRowCollection(name, props.defaultItems ?? 0);
+	const { t } = useT("lattice");
+	const registerRow = useFlipReorder(rows.map((r) => String(r["__rowId"] ?? "")).join(","));
+	const atMax = props.maxItems != null && rows.length >= props.maxItems;
+	const atMin = props.minItems != null && rows.length <= props.minItems;
+	const isTable = props.layout === "table";
+	const blockFor = (type) => blocks.find((b) => b.type === type);
+	const options = blocks.map((b) => ({
+		type: b.type,
+		label: b.label
+	}));
+	if (hidden) return null;
+	const hiddenTypeInputs = rows.map((row, index) => /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name: toHtmlName(appendPath(path, index, "type")),
+		value: String(row.type ?? "")
+	}, String(row["__rowId"] ?? index)));
+	const primary = blocks[0];
+	const tableRows = rows.map((row, index) => {
+		const block = blockFor(row.type);
+		const isPrimary = !!block && !!primary && block.type === primary.type;
+		return {
+			key: String(row["__rowId"] ?? index),
+			index,
+			row,
+			template: block?.schema ?? EMPTY_TEMPLATE,
+			span: !isPrimary,
+			heading: block?.label ?? `Unknown block: ${String(row.type)}`
+		};
+	});
+	return /* @__PURE__ */ jsx(FormFieldFrame, {
+		error: errors[path],
+		helperText: props.helperText ?? void 0,
+		tooltip: props.tooltip ?? void 0,
+		label: props.label ?? "",
+		name: path,
+		required,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [isTable ? /* @__PURE__ */ jsxs(Fragment, { children: [hiddenTypeInputs, /* @__PURE__ */ jsx(TableRows, {
+				base: path,
+				columns: columnsFromSchema(primary?.schema ?? []),
+				rows: tableRows,
+				reorderable: props.reorderable ?? false,
+				removable: () => !atMin,
+				rowActions: props.rowActions,
+				onField,
+				onMove,
+				onRemove,
+				onDuplicate,
+				registerRow,
+				resizableColumns: props.resizableColumns === true,
+				resizeIndicator: props.resizeIndicator === true
+			})] }) : rows.map((row, index) => {
+				const block = blockFor(row.type);
+				const key = String(row["__rowId"] ?? index);
+				return /* @__PURE__ */ jsxs("div", {
+					ref: (el) => registerRow(key, el),
+					"data-flip-key": key,
+					children: [/* @__PURE__ */ jsx("input", {
+						type: "hidden",
+						name: toHtmlName(appendPath(path, index, "type")),
+						value: String(row.type ?? "")
+					}), block ? /* @__PURE__ */ jsx(RowItem, {
+						base: path,
+						index,
+						row,
+						template: block.schema ?? EMPTY_TEMPLATE,
+						heading: block.label,
+						reorderable: props.reorderable ?? false,
+						isFirst: index === 0,
+						isLast: index === rows.length - 1,
+						removable: !atMin,
+						rowActions: props.rowActions,
+						onField,
+						onRemove,
+						onMove,
+						onDuplicate
+					}) : /* @__PURE__ */ jsxs("div", {
+						"data-test": `repeater-${name}-row-${index}`,
+						className: "flex items-center justify-between rounded-lt border border-dashed border-lt-border p-4 text-sm text-lt-muted-fg",
+						children: [/* @__PURE__ */ jsxs("span", { children: ["Unknown block: ", String(row.type)] }), /* @__PURE__ */ jsx(RowActions, { actions: buildRowActions(props.rowActions, {
+							index,
+							removable: !atMin,
+							onRemove,
+							onDuplicate,
+							t
+						}) })]
+					})]
+				}, key);
+			}), !atMax && /* @__PURE__ */ jsx(BlockAddMenu, {
+				addLabel: props.addLabel ?? "Add",
+				blocks: options,
+				onSelect: (type) => append({ type })
+			})]
+		})
+	});
+};
+//#endregion
+export { BuilderComponent };
+
+//# sourceMappingURL=builder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"builder.js","names":[],"sources":["../../../../resources/js/form/components/fields/builder.tsx"],"sourcesContent":["import type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useFormContext } from \"../context\";\nimport { appendPath, toHtmlName } from \"../form-path\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { BlockAddMenu, type BlockOption } from \"./block-add-menu\";\nimport { ROW_ID_KEY } from \"./repeater-rows\";\nimport { buildRowActions } from \"./row-action-menu\";\nimport { RowActions } from \"./row-actions\";\nimport { RowItem } from \"./row-item\";\nimport { columnsFromSchema, TableRows } from \"./table-rows\";\nimport { useFlipReorder } from \"./use-flip-reorder\";\nimport { useRowCollection } from \"./use-row-collection\";\n\ntype Block = { type: string; label: string; schema: Node[] };\n\nconst EMPTY_TEMPLATE: Node[] = [];\n\nexport const BuilderComponent: RendererComponent<\"field.builder\"> = ({ node }) => {\n  const props = node.props;\n  const name = props.name;\n  const blocks = ((node as unknown as { blocks?: Block[] }).blocks ?? []) as Block[];\n  const { errors } = useFormContext();\n  const { hidden, required } = useDependentField(node);\n  const { path, rows, onField, onRemove, onMove, onDuplicate, append } = useRowCollection(\n    name,\n    props.defaultItems ?? 0,\n  );\n  const { t } = useT(\"lattice\");\n  const orderSignature = rows.map((r) => String(r[ROW_ID_KEY] ?? \"\")).join(\",\");\n  const registerRow = useFlipReorder(orderSignature);\n  const atMax = props.maxItems != null && rows.length >= props.maxItems;\n  const atMin = props.minItems != null && rows.length <= props.minItems;\n  const isTable = props.layout === \"table\";\n\n  const blockFor = (type: unknown): Block | undefined => blocks.find((b) => b.type === type);\n  const options: BlockOption[] = blocks.map((b) => ({\n    type: b.type,\n    label: b.label,\n  }));\n\n  if (hidden) {\n    return null;\n  }\n\n  const hiddenTypeInputs = rows.map((row, index) => (\n    <input\n      key={String(row[ROW_ID_KEY] ?? index)}\n      type=\"hidden\"\n      name={toHtmlName(appendPath(path, index, \"type\"))}\n      value={String(row.type ?? \"\")}\n    />\n  ));\n\n  const primary = blocks[0];\n  const tableRows = rows.map((row, index) => {\n    const block = blockFor(row.type);\n    const isPrimary = !!block && !!primary && block.type === primary.type;\n    return {\n      key: String(row[ROW_ID_KEY] ?? index),\n      index,\n      row,\n      template: block?.schema ?? EMPTY_TEMPLATE,\n      span: !isPrimary,\n      heading: block?.label ?? `Unknown block: ${String(row.type)}`,\n    };\n  });\n\n  return (\n    <FormFieldFrame\n      error={errors[path]}\n      helperText={props.helperText ?? undefined}\n      tooltip={props.tooltip ?? undefined}\n      label={props.label ?? \"\"}\n      name={path}\n      required={required}\n    >\n      <div className=\"flex flex-col gap-3\">\n        {isTable ? (\n          <>\n            {hiddenTypeInputs}\n            <TableRows\n              base={path}\n              columns={columnsFromSchema(primary?.schema ?? [])}\n              rows={tableRows}\n              reorderable={props.reorderable ?? false}\n              removable={() => !atMin}\n              rowActions={props.rowActions}\n              onField={onField}\n              onMove={onMove}\n              onRemove={onRemove}\n              onDuplicate={onDuplicate}\n              registerRow={registerRow}\n              resizableColumns={props.resizableColumns === true}\n              resizeIndicator={props.resizeIndicator === true}\n            />\n          </>\n        ) : (\n          rows.map((row, index) => {\n            const block = blockFor(row.type);\n            const key = String(row[ROW_ID_KEY] ?? index);\n\n            return (\n              <div key={key} ref={(el) => registerRow(key, el)} data-flip-key={key}>\n                <input\n                  type=\"hidden\"\n                  name={toHtmlName(appendPath(path, index, \"type\"))}\n                  value={String(row.type ?? \"\")}\n                />\n                {block ? (\n                  <RowItem\n                    base={path}\n                    index={index}\n                    row={row}\n                    template={block.schema ?? EMPTY_TEMPLATE}\n                    heading={block.label}\n                    reorderable={props.reorderable ?? false}\n                    isFirst={index === 0}\n                    isLast={index === rows.length - 1}\n                    removable={!atMin}\n                    rowActions={props.rowActions}\n                    onField={onField}\n                    onRemove={onRemove}\n                    onMove={onMove}\n                    onDuplicate={onDuplicate}\n                  />\n                ) : (\n                  <div\n                    data-test={`repeater-${name}-row-${index}`}\n                    className=\"flex items-center justify-between rounded-lt border border-dashed border-lt-border p-4 text-sm text-lt-muted-fg\"\n                  >\n                    <span>Unknown block: {String(row.type)}</span>\n                    <RowActions\n                      actions={buildRowActions(props.rowActions, {\n                        index,\n                        removable: !atMin,\n                        onRemove,\n                        onDuplicate,\n                        t,\n                      })}\n                    />\n                  </div>\n                )}\n              </div>\n            );\n          })\n        )}\n\n        {!atMax && (\n          <BlockAddMenu\n            addLabel={props.addLabel ?? \"Add\"}\n            blocks={options}\n            onSelect={(type) => append({ type })}\n          />\n        )}\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,IAAM,iBAAyB,CAAC;AAEhC,IAAa,oBAAwD,EAAE,WAAW;CAChF,MAAM,QAAQ,KAAK;CACnB,MAAM,OAAO,MAAM;CACnB,MAAM,SAAW,KAAyC,UAAU,CAAC;CACrE,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,EAAE,QAAQ,aAAa,kBAAkB,IAAI;CACnD,MAAM,EAAE,MAAM,MAAM,SAAS,UAAU,QAAQ,aAAa,WAAW,iBACrE,MACA,MAAM,gBAAgB,CACxB;CACA,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,MAAM,cAAc,eADG,KAAK,KAAK,MAAM,OAAO,EAAA,cAAiB,EAAE,CAAC,EAAE,KAAK,GACtC,CAAc;CACjD,MAAM,QAAQ,MAAM,YAAY,QAAQ,KAAK,UAAU,MAAM;CAC7D,MAAM,QAAQ,MAAM,YAAY,QAAQ,KAAK,UAAU,MAAM;CAC7D,MAAM,UAAU,MAAM,WAAW;CAEjC,MAAM,YAAY,SAAqC,OAAO,MAAM,MAAM,EAAE,SAAS,IAAI;CACzF,MAAM,UAAyB,OAAO,KAAK,OAAO;EAChD,MAAM,EAAE;EACR,OAAO,EAAE;CACX,EAAE;CAEF,IAAI,QACF,OAAO;CAGT,MAAM,mBAAmB,KAAK,KAAK,KAAK,UACtC,oBAAC,SAAD;EAEE,MAAK;EACL,MAAM,WAAW,WAAW,MAAM,OAAO,MAAM,CAAC;EAChD,OAAO,OAAO,IAAI,QAAQ,EAAE;CAC7B,GAJM,OAAO,IAAA,cAAmB,KAAK,CAIrC,CACF;CAED,MAAM,UAAU,OAAO;CACvB,MAAM,YAAY,KAAK,KAAK,KAAK,UAAU;EACzC,MAAM,QAAQ,SAAS,IAAI,IAAI;EAC/B,MAAM,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,WAAW,MAAM,SAAS,QAAQ;EACjE,OAAO;GACL,KAAK,OAAO,IAAA,cAAmB,KAAK;GACpC;GACA;GACA,UAAU,OAAO,UAAU;GAC3B,MAAM,CAAC;GACP,SAAS,OAAO,SAAS,kBAAkB,OAAO,IAAI,IAAI;EAC5D;CACF,CAAC;CAED,OACE,oBAAC,gBAAD;EACE,OAAO,OAAO;EACd,YAAY,MAAM,cAAc,KAAA;EAChC,SAAS,MAAM,WAAW,KAAA;EAC1B,OAAO,MAAM,SAAS;EACtB,MAAM;EACI;YAEV,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,UACC,qBAAA,UAAA,EAAA,UAAA,CACG,kBACD,oBAAC,WAAD;IACE,MAAM;IACN,SAAS,kBAAkB,SAAS,UAAU,CAAC,CAAC;IAChD,MAAM;IACN,aAAa,MAAM,eAAe;IAClC,iBAAiB,CAAC;IAClB,YAAY,MAAM;IACT;IACD;IACE;IACG;IACA;IACb,kBAAkB,MAAM,qBAAqB;IAC7C,iBAAiB,MAAM,oBAAoB;GAC5C,CAAA,CACD,EAAA,CAAA,IAEF,KAAK,KAAK,KAAK,UAAU;IACvB,MAAM,QAAQ,SAAS,IAAI,IAAI;IAC/B,MAAM,MAAM,OAAO,IAAA,cAAmB,KAAK;IAE3C,OACE,qBAAC,OAAD;KAAe,MAAM,OAAO,YAAY,KAAK,EAAE;KAAG,iBAAe;eAAjE,CACE,oBAAC,SAAD;MACE,MAAK;MACL,MAAM,WAAW,WAAW,MAAM,OAAO,MAAM,CAAC;MAChD,OAAO,OAAO,IAAI,QAAQ,EAAE;KAC7B,CAAA,GACA,QACC,oBAAC,SAAD;MACE,MAAM;MACC;MACF;MACL,UAAU,MAAM,UAAU;MAC1B,SAAS,MAAM;MACf,aAAa,MAAM,eAAe;MAClC,SAAS,UAAU;MACnB,QAAQ,UAAU,KAAK,SAAS;MAChC,WAAW,CAAC;MACZ,YAAY,MAAM;MACT;MACC;MACF;MACK;KACd,CAAA,IAED,qBAAC,OAAD;MACE,aAAW,YAAY,KAAK,OAAO;MACnC,WAAU;gBAFZ,CAIE,qBAAC,QAAD,EAAA,UAAA,CAAM,mBAAgB,OAAO,IAAI,IAAI,CAAQ,EAAA,CAAA,GAC7C,oBAAC,YAAD,EACE,SAAS,gBAAgB,MAAM,YAAY;OACzC;OACA,WAAW,CAAC;OACZ;OACA;OACA;MACF,CAAC,EACF,CAAA,CACE;OAEJ;OAxCK,GAwCL;GAET,CAAC,GAGF,CAAC,SACA,oBAAC,cAAD;IACE,UAAU,MAAM,YAAY;IAC5B,QAAQ;IACR,WAAW,SAAS,OAAO,EAAE,KAAK,CAAC;GACpC,CAAA,CAEA;;CACS,CAAA;AAEpB"}

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

@@ -1,16 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.checkbox": {
-            checked?: boolean;
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            name?: string;
-            required?: boolean;
-            tabIndex?: number;
-        };
-    }
-}
-export declare const CheckboxComponent: RendererComponent<"form.checkbox">;
+import { RendererComponent } from '../../../core/types';
+export declare const CheckboxComponent: RendererComponent<"field.checkbox">;

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

@@ -1,49 +1,47 @@
-import { getOptionalNumberProp, getStringProp } from "../../../core/props.js";
-import { useFormContext } from "../context.js";
-import { useFormValue, useSetFormValue } from "../values.js";
-import { Checkbox } from "../base/checkbox.js";
+import { testIdentity } from "../../../core/test-id.js";
+import { useFieldScope } from "../field-scope.js";
+import { useFormValue } from "../values.js";
+import { Checkbox } from "../../../core/components/checkbox.js";
+import { toBoolean } from "../conditions.js";
 import { Label } from "../base/label.js";
 import { useDependentField } from "../use-dependent-field.js";
-import { useEffect } from "react";
+import { useFieldCommit } from "../use-field-commit.js";
+import { useSeedDefault } from "../use-seed-default.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/checkbox.tsx
-function isTruthy(value) {
-	return value === true || value === "true" || value === "1" || value === 1;
-}
 var CheckboxComponent = ({ node }) => {
-	const { clearErrors, precognitive, validate } = useFormContext();
-	const { hidden, readonly, disabled } = useDependentField(node);
-	const name = getStringProp(node.props, "name");
-	const setValue = useSetFormValue();
-	const storedValue = useFormValue(name);
-	const checked = storedValue !== void 0 ? isTruthy(storedValue) : Boolean(node.props?.checked);
-	useEffect(() => {
-		if (storedValue === void 0) setValue(name, Boolean(node.props?.checked));
-	}, [
-		name,
-		node.props?.checked,
-		setValue,
-		storedValue
-	]);
+	const { hidden, readOnly, disabled } = useDependentField(node);
+	const localName = node.props.name;
+	const scope = useFieldScope();
+	const name = scope ? scope.scopedName(localName) : localName;
+	const globalValue = useFormValue(localName);
+	const storedValue = scope ? scope.getValue(localName) : globalValue;
+	const { commit } = useFieldCommit();
+	const defaultChecked = toBoolean(node.props.value);
+	const checked = storedValue !== void 0 ? toBoolean(storedValue) : defaultChecked;
+	useSeedDefault(localName, defaultChecked);
 	if (hidden) return null;
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 		className: "flex items-center space-x-3",
 		children: [/* @__PURE__ */ jsx(Checkbox, {
+			autoFocus: node.props.autoFocus ?? void 0,
 			checked,
-			disabled: readonly || disabled,
+			"data-test": testIdentity(localName),
+			disabled: readOnly || disabled,
 			id: name,
 			name,
 			onCheckedChange: (next) => {
-				setValue(name, next === true);
-				if (precognitive) window.requestAnimationFrame(() => validate(name));
-				else clearErrors(name);
+				commit(localName, next === true);
 			},
-			tabIndex: getOptionalNumberProp(node.props, "tabIndex")
+			tabIndex: node.props.tabIndex ?? void 0
 		}), /* @__PURE__ */ jsx(Label, {
 			htmlFor: name,
-			children: getStringProp(node.props, "label")
+			children: node.props.label
 		})]
-	});
+	}), node.props.helperText && /* @__PURE__ */ jsx("p", {
+		className: "mt-1 pl-7 text-sm text-lt-muted-fg",
+		children: node.props.helperText
+	})] });
 };
 //#endregion
 export { CheckboxComponent };

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../resources/js/form/components/fields/checkbox.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { getOptionalNumberProp, getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { Checkbox } from \"../base/checkbox\";\nimport { Label } from \"../base/label\";\nimport { useFormContext } from \"../context\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFormValue, useSetFormValue } from \"../values\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.checkbox\": {\n      checked?: boolean;\n      conditions?: unknown;\n      disabled?: boolean;\n      hidden?: boolean;\n      label?: string;\n      name?: string;\n      required?: boolean;\n      tabIndex?: number;\n    };\n  }\n}\n\nfunction isTruthy(value: unknown): boolean {\n  return value === true || value === \"true\" || value === \"1\" || value === 1;\n}\n\nexport const CheckboxComponent: RendererComponent<\"form.checkbox\"> = ({ node }) => {\n  const { clearErrors, precognitive, validate } = useFormContext();\n  const { hidden, readonly, disabled } = useDependentField(node);\n  const name = getStringProp(node.props, \"name\");\n  const setValue = useSetFormValue();\n  const storedValue = useFormValue(name);\n  const checked = storedValue !== undefined ? isTruthy(storedValue) : Boolean(node.props?.checked);\n\n  useEffect(() => {\n    if (storedValue === undefined) {\n      setValue(name, Boolean(node.props?.checked));\n    }\n  }, [name, node.props?.checked, setValue, storedValue]);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <div className=\"flex items-center space-x-3\">\n      <Checkbox\n        checked={checked}\n        disabled={readonly || disabled}\n        id={name}\n        name={name}\n        onCheckedChange={(next) => {\n          const value = next === true;\n          setValue(name, value);\n          if (precognitive) {\n            window.requestAnimationFrame(() => validate(name));\n          } else {\n            clearErrors(name);\n          }\n        }}\n        tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n      />\n      <Label htmlFor={name}>{getStringProp(node.props, \"label\")}</Label>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAwBA,SAAS,SAAS,OAAyB;CACzC,OAAO,UAAU,QAAQ,UAAU,UAAU,UAAU,OAAO,UAAU;AAC1E;AAEA,IAAa,qBAAyD,EAAE,WAAW;CACjF,MAAM,EAAE,aAAa,cAAc,aAAa,eAAe;CAC/D,MAAM,EAAE,QAAQ,UAAU,aAAa,kBAAkB,IAAI;CAC7D,MAAM,OAAO,cAAc,KAAK,OAAO,MAAM;CAC7C,MAAM,WAAW,gBAAgB;CACjC,MAAM,cAAc,aAAa,IAAI;CACrC,MAAM,UAAU,gBAAgB,KAAA,IAAY,SAAS,WAAW,IAAI,QAAQ,KAAK,OAAO,OAAO;CAE/F,gBAAgB;EACd,IAAI,gBAAgB,KAAA,GAClB,SAAS,MAAM,QAAQ,KAAK,OAAO,OAAO,CAAC;CAE/C,GAAG;EAAC;EAAM,KAAK,OAAO;EAAS;EAAU;CAAW,CAAC;CAErD,IAAI,QACF,OAAO;CAGT,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,UAAD;GACW;GACT,UAAU,YAAY;GACtB,IAAI;GACE;GACN,kBAAkB,SAAS;IAEzB,SAAS,MADK,SAAS,IACH;IACpB,IAAI,cACF,OAAO,4BAA4B,SAAS,IAAI,CAAC;SAEjD,YAAY,IAAI;GAEpB;GACA,UAAU,sBAAsB,KAAK,OAAO,UAAU;EACvD,CAAA,GACD,oBAAC,OAAD;GAAO,SAAS;aAAO,cAAc,KAAK,OAAO,OAAO;EAAS,CAAA,CAC9D;;AAET"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../../resources/js/form/components/fields/checkbox.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { Checkbox } from \"@lattice-php/lattice/core/components/checkbox\";\nimport { Label } from \"../base/label\";\nimport { toBoolean } from \"../conditions\";\nimport { useFieldScope } from \"../field-scope\";\nimport { useDependentField } from \"../use-dependent-field\";\nimport { useFieldCommit } from \"../use-field-commit\";\nimport { useSeedDefault } from \"../use-seed-default\";\nimport { useFormValue } from \"../values\";\n\nexport const CheckboxComponent: RendererComponent<\"field.checkbox\"> = ({ node }) => {\n  const { hidden, readOnly, disabled } = useDependentField(node);\n  const localName = node.props.name;\n  const scope = useFieldScope();\n  const name = scope ? scope.scopedName(localName) : localName;\n  const globalValue = useFormValue(localName);\n  const storedValue = scope ? scope.getValue(localName) : globalValue;\n  const { commit } = useFieldCommit();\n  const defaultChecked = toBoolean(node.props.value);\n  const checked = storedValue !== undefined ? toBoolean(storedValue) : defaultChecked;\n\n  useSeedDefault(localName, defaultChecked);\n\n  if (hidden) {\n    return null;\n  }\n\n  return (\n    <div>\n      <div className=\"flex items-center space-x-3\">\n        <Checkbox\n          autoFocus={node.props.autoFocus ?? undefined}\n          checked={checked}\n          data-test={testIdentity(localName)}\n          disabled={readOnly || disabled}\n          id={name}\n          name={name}\n          onCheckedChange={(next) => {\n            commit(localName, next === true);\n          }}\n          tabIndex={node.props.tabIndex ?? undefined}\n        />\n        <Label htmlFor={name}>{node.props.label}</Label>\n      </div>\n      {node.props.helperText && (\n        <p className=\"mt-1 pl-7 text-sm text-lt-muted-fg\">{node.props.helperText}</p>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAWA,IAAa,qBAA0D,EAAE,WAAW;CAClF,MAAM,EAAE,QAAQ,UAAU,aAAa,kBAAkB,IAAI;CAC7D,MAAM,YAAY,KAAK,MAAM;CAC7B,MAAM,QAAQ,cAAc;CAC5B,MAAM,OAAO,QAAQ,MAAM,WAAW,SAAS,IAAI;CACnD,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,cAAc,QAAQ,MAAM,SAAS,SAAS,IAAI;CACxD,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,iBAAiB,UAAU,KAAK,MAAM,KAAK;CACjD,MAAM,UAAU,gBAAgB,KAAA,IAAY,UAAU,WAAW,IAAI;CAErE,eAAe,WAAW,cAAc;CAExC,IAAI,QACF,OAAO;CAGT,OACE,qBAAC,OAAD,EAAA,UAAA,CACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,UAAD;GACE,WAAW,KAAK,MAAM,aAAa,KAAA;GAC1B;GACT,aAAW,aAAa,SAAS;GACjC,UAAU,YAAY;GACtB,IAAI;GACE;GACN,kBAAkB,SAAS;IACzB,OAAO,WAAW,SAAS,IAAI;GACjC;GACA,UAAU,KAAK,MAAM,YAAY,KAAA;EAClC,CAAA,GACD,oBAAC,OAAD;GAAO,SAAS;aAAO,KAAK,MAAM;EAAa,CAAA,CAC5C;KACJ,KAAK,MAAM,cACV,oBAAC,KAAD;EAAG,WAAU;YAAsC,KAAK,MAAM;CAAc,CAAA,CAE3E,EAAA,CAAA;AAET"}

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

@@ -1,14 +1,2 @@
-import { Option } from '../../../../../core/props';
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.choice": {
-            label?: string;
-            name?: string;
-            options?: Option[];
-            tabIndex?: number;
-            value?: string;
-        };
-    }
-}
-export declare const ChoiceComponent: RendererComponent<"form.choice">;
+import { RendererComponent } from '../../../core/types';
+export declare const ChoiceComponent: RendererComponent<"field.choice">;

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

@@ -1,32 +1,24 @@
-import { getOptionalNumberProp, getOptions, getStringProp } from "../../../core/props.js";
-import { SegmentedPills } from "../../../core/components/segmented-pills.js";
 import { useResolvedNode } from "../resolved-nodes.js";
-import { useFormValue, useSetFormValue } from "../values.js";
+import { SegmentedPills } from "../../../core/components/segmented-pills.js";
 import { FormFieldFrame } from "../base/field.js";
+import { useSeedDefault } from "../use-seed-default.js";
 import { useControlledField } from "../use-controlled-field.js";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/choice.tsx
 var ChoiceComponent = ({ node }) => {
 	const resolvedNode = useResolvedNode(node);
-	const { name, value, error, hidden, required, readonly, disabled, commit } = useControlledField(node);
-	const storedValue = useFormValue(name);
-	const setValue = useSetFormValue();
-	const options = useMemo(() => getOptions(resolvedNode.props), [resolvedNode.props]);
+	const { localName, name, testId, value, error, hidden, required, readOnly, disabled, commit } = useControlledField(node);
+	const options = useMemo(() => resolvedNode.props.options ?? [], [resolvedNode.props]);
 	const fallbackValue = options[0]?.value ?? "";
 	const selected = value || fallbackValue;
-	useEffect(() => {
-		if (storedValue === void 0 && selected) setValue(name, selected);
-	}, [
-		name,
-		storedValue,
-		selected,
-		setValue
-	]);
+	useSeedDefault(localName, selected || void 0);
 	if (hidden || options.length === 0) return null;
 	return /* @__PURE__ */ jsxs(FormFieldFrame, {
 		error,
-		label: getStringProp(node.props, "label"),
+		helperText: node.props.helperText ?? void 0,
+		tooltip: node.props.tooltip ?? void 0,
+		label: node.props.label ?? "",
 		name,
 		required,
 		children: [/* @__PURE__ */ jsx("input", {
@@ -34,11 +26,13 @@ var ChoiceComponent = ({ node }) => {
 			type: "hidden",
 			value: selected
 		}), /* @__PURE__ */ jsx(SegmentedPills, {
-			ariaLabel: getStringProp(node.props, "label"),
-			disabled: readonly || disabled,
+			ariaLabel: node.props.label ?? void 0,
+			autoFocus: node.props.autoFocus ?? void 0,
+			disabled: readOnly || disabled,
+			name: testId,
 			onSelect: commit,
 			options,
-			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
+			tabIndex: node.props.tabIndex ?? void 0,
 			value: selected
 		})]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"choice.js","names":[],"sources":["../../../../resources/js/form/components/fields/choice.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport {\n  type Option,\n  getOptionalNumberProp,\n  getOptions,\n  getStringProp,\n} from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { SegmentedPills } from \"@lattice/lattice/core/components/segmented-pills\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useControlledField } from \"../use-controlled-field\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useFormValue, useSetFormValue } from \"../values\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"form.choice\": {\n      label?: string;\n      name?: string;\n      options?: Option[];\n      tabIndex?: number;\n      value?: string;\n    };\n  }\n}\n\nexport const ChoiceComponent: RendererComponent<\"form.choice\"> = ({ node }) => {\n  const resolvedNode = useResolvedNode(node);\n  const { name, value, error, hidden, required, readonly, disabled, commit } =\n    useControlledField(node);\n  const storedValue = useFormValue(name);\n  const setValue = useSetFormValue();\n  const options = useMemo(() => getOptions(resolvedNode.props), [resolvedNode.props]);\n  const fallbackValue = options[0]?.value ?? \"\";\n  const selected = value || fallbackValue;\n\n  // Seed the store with the default selection so dependent fields and the\n  // submitted payload reflect it before the user interacts.\n  useEffect(() => {\n    if (storedValue === undefined && selected) {\n      setValue(name, selected);\n    }\n  }, [name, storedValue, selected, setValue]);\n\n  if (hidden || options.length === 0) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      label={getStringProp(node.props, \"label\")}\n      name={name}\n      required={required}\n    >\n      <input name={name} type=\"hidden\" value={selected} />\n      <SegmentedPills\n        ariaLabel={getStringProp(node.props, \"label\")}\n        disabled={readonly || disabled}\n        onSelect={commit}\n        options={options}\n        tabIndex={getOptionalNumberProp(node.props, \"tabIndex\")}\n        value={selected}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;;AA0BA,IAAa,mBAAqD,EAAE,WAAW;CAC7E,MAAM,eAAe,gBAAgB,IAAI;CACzC,MAAM,EAAE,MAAM,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WAChE,mBAAmB,IAAI;CACzB,MAAM,cAAc,aAAa,IAAI;CACrC,MAAM,WAAW,gBAAgB;CACjC,MAAM,UAAU,cAAc,WAAW,aAAa,KAAK,GAAG,CAAC,aAAa,KAAK,CAAC;CAClF,MAAM,gBAAgB,QAAQ,IAAI,SAAS;CAC3C,MAAM,WAAW,SAAS;CAI1B,gBAAgB;EACd,IAAI,gBAAgB,KAAA,KAAa,UAC/B,SAAS,MAAM,QAAQ;CAE3B,GAAG;EAAC;EAAM;EAAa;EAAU;CAAQ,CAAC;CAE1C,IAAI,UAAU,QAAQ,WAAW,GAC/B,OAAO;CAGT,OACE,qBAAC,gBAAD;EACS;EACP,OAAO,cAAc,KAAK,OAAO,OAAO;EAClC;EACI;YAJZ,CAME,oBAAC,SAAD;GAAa;GAAM,MAAK;GAAS,OAAO;EAAW,CAAA,GACnD,oBAAC,gBAAD;GACE,WAAW,cAAc,KAAK,OAAO,OAAO;GAC5C,UAAU,YAAY;GACtB,UAAU;GACD;GACT,UAAU,sBAAsB,KAAK,OAAO,UAAU;GACtD,OAAO;EACR,CAAA,CACa;;AAEpB"}
+{"version":3,"file":"choice.js","names":[],"sources":["../../../../resources/js/form/components/fields/choice.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type { Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { SegmentedPills } from \"@lattice-php/lattice/core/components/segmented-pills\";\nimport { FormFieldFrame } from \"../base/field\";\nimport { useControlledField } from \"../use-controlled-field\";\nimport { useResolvedNode } from \"../resolved-nodes\";\nimport { useSeedDefault } from \"../use-seed-default\";\n\nexport const ChoiceComponent: RendererComponent<\"field.choice\"> = ({ node }) => {\n  const resolvedNode = useResolvedNode(node);\n  const { localName, name, testId, value, error, hidden, required, readOnly, disabled, commit } =\n    useControlledField(node);\n  const options = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n  const fallbackValue = options[0]?.value ?? \"\";\n  const selected = value || fallbackValue;\n\n  useSeedDefault(localName, selected || undefined);\n\n  if (hidden || options.length === 0) {\n    return null;\n  }\n\n  return (\n    <FormFieldFrame\n      error={error}\n      helperText={node.props.helperText ?? undefined}\n      tooltip={node.props.tooltip ?? undefined}\n      label={node.props.label ?? \"\"}\n      name={name}\n      required={required}\n    >\n      <input name={name} type=\"hidden\" value={selected} />\n      <SegmentedPills\n        ariaLabel={node.props.label ?? undefined}\n        autoFocus={node.props.autoFocus ?? undefined}\n        disabled={readOnly || disabled}\n        name={testId}\n        onSelect={commit}\n        options={options}\n        tabIndex={node.props.tabIndex ?? undefined}\n        value={selected}\n      />\n    </FormFieldFrame>\n  );\n};\n"],"mappings":";;;;;;;;AAQA,IAAa,mBAAsD,EAAE,WAAW;CAC9E,MAAM,eAAe,gBAAgB,IAAI;CACzC,MAAM,EAAE,WAAW,MAAM,QAAQ,OAAO,OAAO,QAAQ,UAAU,UAAU,UAAU,WACnF,mBAAmB,IAAI;CACzB,MAAM,UAAU,cACP,aAAa,MAAiC,WAAW,CAAC,GACjE,CAAC,aAAa,KAAK,CACrB;CACA,MAAM,gBAAgB,QAAQ,IAAI,SAAS;CAC3C,MAAM,WAAW,SAAS;CAE1B,eAAe,WAAW,YAAY,KAAA,CAAS;CAE/C,IAAI,UAAU,QAAQ,WAAW,GAC/B,OAAO;CAGT,OACE,qBAAC,gBAAD;EACS;EACP,YAAY,KAAK,MAAM,cAAc,KAAA;EACrC,SAAS,KAAK,MAAM,WAAW,KAAA;EAC/B,OAAO,KAAK,MAAM,SAAS;EACrB;EACI;YANZ,CAQE,oBAAC,SAAD;GAAa;GAAM,MAAK;GAAS,OAAO;EAAW,CAAA,GACnD,oBAAC,gBAAD;GACE,WAAW,KAAK,MAAM,SAAS,KAAA;GAC/B,WAAW,KAAK,MAAM,aAAa,KAAA;GACnC,UAAU,YAAY;GACtB,MAAM;GACN,UAAU;GACD;GACT,UAAU,KAAK,MAAM,YAAY,KAAA;GACjC,OAAO;EACR,CAAA,CACa;;AAEpB"}

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

@@ -1,20 +1,2 @@
-import { RendererComponent } from '../../../../../core/types';
-declare module '../../../../../core/types' {
-    interface ComponentProps {
-        "form.date-input": {
-            autoFocus?: boolean;
-            conditions?: unknown;
-            disabled?: boolean;
-            hidden?: boolean;
-            label?: string;
-            max?: string;
-            min?: string;
-            name?: string;
-            readonly?: boolean;
-            required?: boolean;
-            tabIndex?: number;
-            value?: string;
-        };
-    }
-}
-export declare const DateInputComponent: RendererComponent<"form.date-input">;
+import { RendererComponent } from '../../../core/types';
+export declare const DateInputComponent: RendererComponent<"field.date-input">;

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

@@ -1,27 +1,23 @@
-import { getBooleanProp, getOptionalNumberProp, getStringProp } from "../../../core/props.js";
-import { FormFieldFrame } from "../base/field.js";
-import { useControlledField } from "../use-controlled-field.js";
 import { Input } from "../base/input.js";
+import { SimpleField } from "./simple-field.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/date-input.tsx
 var DateInputComponent = ({ node }) => {
-	const { name, value, error, hidden, required, readonly, disabled, commit } = useControlledField(node);
-	if (hidden) return null;
-	return /* @__PURE__ */ jsx(FormFieldFrame, {
-		error,
-		label: getStringProp(node.props, "label"),
-		name,
-		required,
-		children: /* @__PURE__ */ jsx(Input, {
-			autoFocus: getBooleanProp(node.props, "autoFocus"),
+	const props = node.props;
+	return /* @__PURE__ */ jsx(SimpleField, {
+		node,
+		label: props.label ?? "",
+		children: ({ name, testId, value, readOnly, disabled, commit }) => /* @__PURE__ */ jsx(Input, {
+			autoFocus: props.autoFocus ?? false,
+			"data-test": testId,
 			disabled,
 			id: name,
-			max: getStringProp(node.props, "max") || void 0,
-			min: getStringProp(node.props, "min") || void 0,
+			max: props.max || void 0,
+			min: props.min || void 0,
 			name,
 			onChange: (event) => commit(event.target.value),
-			readOnly: readonly,
-			tabIndex: getOptionalNumberProp(node.props, "tabIndex"),
+			readOnly,
+			tabIndex: props.tabIndex ?? void 0,
 			type: "date",
 			value
 		})