@lattice-php/lattice 0.20.0 → 0.21.0

package/dist/effects/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/effects/registry.ts"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport type { ResolveProps } from \"@lattice-php/lattice/core/types\";\nimport type { Effect, EffectPropsMap } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport { setLocale } from \"@lattice-php/lattice/i18n/locale\";\n\n/**\n * Consumer apps augment this via `declare module \"@lattice-php/lattice\"` to type\n * their custom effects' payloads; built-ins resolve through `EffectPropsMap`. The\n * effect counterpart of `ComponentProps`.\n */\nexport interface EffectProps {}\n\nexport type EffectPropsOf<TType extends string> = ResolveProps<\n  EffectProps,\n  EffectPropsMap,\n  TType,\n  Record<string, unknown>\n>;\n\nexport type EffectOf<TType extends string> = string extends TType\n  ? Effect\n  : { type: TType; props: EffectPropsOf<TType> };\n\nexport type EffectHandler<TType extends string = string> = (effect: EffectOf<TType>) => void;\n\nexport type EffectHandlerRegistry = Record<string, EffectHandler>;\n\nexport type EffectHandlerRegistryFor<TTypes extends keyof EffectPropsMap & string> = Record<\n  TTypes,\n  EffectHandler\n>;\n\n/**\n * Author a handler against `EffectHandler<\"my.type\">` for a typed payload, then\n * register it through this — it erases the type parameter for the loose registry.\n */\nexport function effectHandler<TType extends string>(\n  _type: TType,\n  fn: EffectHandler<TType>,\n): EffectHandler {\n  return fn as unknown as EffectHandler;\n}\n\nfunction triggerDownload(url: string): void {\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.rel = \"noopener\";\n  document.body.appendChild(link);\n  link.click();\n  link.remove();\n}\n\nfunction bridge(event: string): EffectHandler {\n  return (effect) => window.dispatchEvent(new CustomEvent(event, { detail: effect.props }));\n}\n\n/**\n * Imperative effects act directly; the rest bridge to the `lattice:*` DOM events\n * that toast/callout/modal/fragment/form subscribe to.\n */\nexport const builtinEffectHandlers: EffectHandlerRegistryFor<keyof EffectPropsMap & string> = {\n  \"reload-page\": () => router.reload(),\n  redirect: effectHandler(\"redirect\", (effect) => router.visit(effect.props.url)),\n  download: effectHandler(\"download\", (effect) => triggerDownload(effect.props.url)),\n  \"locale-change\": effectHandler(\"locale-change\", (effect) => setLocale(effect.props.locale)),\n  toast: bridge(LATTICE_EVENT.toast),\n  callout: bridge(LATTICE_EVENT.callout),\n  \"reload-component\": bridge(LATTICE_EVENT.reloadComponent),\n  \"open-modal\": bridge(LATTICE_EVENT.openModal),\n  \"close-modal\": bridge(LATTICE_EVENT.closeModal),\n  \"reset-form\": bridge(LATTICE_EVENT.resetForm),\n  \"toggle-sidebar\": bridge(LATTICE_EVENT.toggleSidebar),\n};\n\nexport function mergeEffectHandlers(\n  ...registries: Array<EffectHandlerRegistry | undefined>\n): EffectHandlerRegistry {\n  return registries.reduce<EffectHandlerRegistry>(\n    (merged, registry) => ({ ...merged, ...registry }),\n    {},\n  );\n}\n"],"mappings":";;;;;;;;AAqCA,SAAgB,cACd,OACA,IACe;CACf,OAAO;AACT;AAEA,SAAS,gBAAgB,KAAmB;CAC1C,MAAM,OAAO,SAAS,cAAc,GAAG;CACvC,KAAK,OAAO;CACZ,KAAK,MAAM;CACX,SAAS,KAAK,YAAY,IAAI;CAC9B,KAAK,MAAM;CACX,KAAK,OAAO;AACd;AAEA,SAAS,OAAO,OAA8B;CAC5C,QAAQ,WAAW,OAAO,cAAc,IAAI,YAAY,OAAO,EAAE,QAAQ,OAAO,MAAM,CAAC,CAAC;AAC1F;;;;;AAMA,IAAa,wBAAiF;CAC5F,qBAAqB,OAAO,OAAO;CACnC,UAAU,cAAc,aAAa,WAAW,OAAO,MAAM,OAAO,MAAM,GAAG,CAAC;CAC9E,UAAU,cAAc,aAAa,WAAW,gBAAgB,OAAO,MAAM,GAAG,CAAC;CACjF,iBAAiB,cAAc,kBAAkB,WAAW,UAAU,OAAO,MAAM,MAAM,CAAC;CAC1F,OAAO,OAAO,cAAc,KAAK;CACjC,SAAS,OAAO,cAAc,OAAO;CACrC,oBAAoB,OAAO,cAAc,eAAe;CACxD,cAAc,OAAO,cAAc,SAAS;CAC5C,eAAe,OAAO,cAAc,UAAU;CAC9C,cAAc,OAAO,cAAc,SAAS;CAC5C,kBAAkB,OAAO,cAAc,aAAa;AACtD;AAEA,SAAgB,oBACd,GAAG,YACoB;CACvB,OAAO,WAAW,QACf,QAAQ,cAAc;EAAE,GAAG;EAAQ,GAAG;CAAS,IAChD,CAAC,CACH;AACF"}
+{"version":3,"file":"registry.js","names":[],"sources":["../../resources/js/effects/registry.ts"],"sourcesContent":["import { router } from \"@inertiajs/react\";\nimport type {\n  EffectOf,\n  EffectProps,\n  EffectPropsMap,\n  EffectPropsOf,\n} from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/core/event-names\";\nimport { setLocale } from \"@lattice-php/lattice/i18n/locale\";\n\nexport type { EffectOf, EffectProps, EffectPropsOf };\n\nexport type EffectHandler<TType extends string = string> = (effect: EffectOf<TType>) => void;\n\nexport type EffectHandlerRegistry = Record<string, EffectHandler>;\n\nexport type EffectHandlerRegistryFor<TTypes extends keyof EffectPropsMap & string> = Record<\n  TTypes,\n  EffectHandler\n>;\n\n/**\n * Author a handler against `EffectHandler<\"my.type\">` for a typed payload, then\n * register it through this — it erases the type parameter for the loose registry.\n */\nexport function effectHandler<TType extends string>(\n  _type: TType,\n  fn: EffectHandler<TType>,\n): EffectHandler {\n  return fn as unknown as EffectHandler;\n}\n\nfunction triggerDownload(url: string): void {\n  const link = document.createElement(\"a\");\n  link.href = url;\n  link.rel = \"noopener\";\n  document.body.appendChild(link);\n  link.click();\n  link.remove();\n}\n\nfunction bridge<TType extends keyof EffectPropsMap & string>(event: string): EffectHandler<TType> {\n  return (effect) => window.dispatchEvent(new CustomEvent(event, { detail: effect.props }));\n}\n\n/**\n * Imperative effects act directly; the rest bridge to the `lattice:*` DOM events\n * that toast/callout/modal/fragment/form subscribe to. The export cast erases\n * the mapped type to the loose registry shape — the same variance erasure\n * effectHandler performs.\n */\nconst typedBuiltinHandlers: { [K in keyof EffectPropsMap]: EffectHandler<K> } = {\n  \"reload-page\": () => router.reload(),\n  redirect: (effect) => router.visit(effect.props.url),\n  download: (effect) => triggerDownload(effect.props.url),\n  \"locale-change\": (effect) => setLocale(effect.props.locale),\n  toast: bridge<\"toast\">(LATTICE_EVENT.toast),\n  callout: bridge<\"callout\">(LATTICE_EVENT.callout),\n  \"reload-component\": bridge<\"reload-component\">(LATTICE_EVENT.reloadComponent),\n  \"open-modal\": bridge<\"open-modal\">(LATTICE_EVENT.openModal),\n  \"close-modal\": bridge<\"close-modal\">(LATTICE_EVENT.closeModal),\n  \"reset-form\": bridge<\"reset-form\">(LATTICE_EVENT.resetForm),\n  \"toggle-sidebar\": bridge<\"toggle-sidebar\">(LATTICE_EVENT.toggleSidebar),\n};\n\nexport const builtinEffectHandlers: EffectHandlerRegistryFor<keyof EffectPropsMap & string> =\n  typedBuiltinHandlers as EffectHandlerRegistryFor<keyof EffectPropsMap & string>;\n\nexport function mergeEffectHandlers(\n  ...registries: Array<EffectHandlerRegistry | undefined>\n): EffectHandlerRegistry {\n  return registries.reduce<EffectHandlerRegistry>(\n    (merged, registry) => ({ ...merged, ...registry }),\n    {},\n  );\n}\n"],"mappings":";;;;;;;;AAyBA,SAAgB,cACd,OACA,IACe;CACf,OAAO;AACT;AAEA,SAAS,gBAAgB,KAAmB;CAC1C,MAAM,OAAO,SAAS,cAAc,GAAG;CACvC,KAAK,OAAO;CACZ,KAAK,MAAM;CACX,SAAS,KAAK,YAAY,IAAI;CAC9B,KAAK,MAAM;CACX,KAAK,OAAO;AACd;AAEA,SAAS,OAAoD,OAAqC;CAChG,QAAQ,WAAW,OAAO,cAAc,IAAI,YAAY,OAAO,EAAE,QAAQ,OAAO,MAAM,CAAC,CAAC;AAC1F;AAsBA,IAAa,wBACX;CAdA,qBAAqB,OAAO,OAAO;CACnC,WAAW,WAAW,OAAO,MAAM,OAAO,MAAM,GAAG;CACnD,WAAW,WAAW,gBAAgB,OAAO,MAAM,GAAG;CACtD,kBAAkB,WAAW,UAAU,OAAO,MAAM,MAAM;CAC1D,OAAO,OAAgB,cAAc,KAAK;CAC1C,SAAS,OAAkB,cAAc,OAAO;CAChD,oBAAoB,OAA2B,cAAc,eAAe;CAC5E,cAAc,OAAqB,cAAc,SAAS;CAC1D,eAAe,OAAsB,cAAc,UAAU;CAC7D,cAAc,OAAqB,cAAc,SAAS;CAC1D,kBAAkB,OAAyB,cAAc,aAAa;AAItE;AAEF,SAAgB,oBACd,GAAG,YACoB;CACvB,OAAO,WAAW,QACf,QAAQ,cAAc;EAAE,GAAG;EAAQ,GAAG;CAAS,IAChD,CAAC,CACH;AACF"}

package/dist/event-bridge.js

@@ -1,5 +1,6 @@
 import { isAppearance } from "./appearance/index.js";
-import { LATTICE_EVENT } from "./events/event-names.js";
+import { LATTICE_EVENT } from "./core/event-names.js";
+import { useWindowEvent } from "./core/hooks/use-window-event.js";
 import { onToast } from "./toast/toast.js";
 import { useEffect } from "react";
 //#region resources/js/event-bridge.tsx
@@ -8,28 +9,14 @@ function EventBridge({ onAppearanceChange, onLocaleChange, onToast: onToast$1 })
 		if (!onToast$1) return;
 		return onToast(onToast$1);
 	}, [onToast$1]);
-	useEffect(() => {
-		if (!onAppearanceChange) return;
-		const listener = (event) => {
-			const value = event.detail?.value;
-			if (isAppearance(value)) onAppearanceChange(value);
-		};
-		window.addEventListener(LATTICE_EVENT.appearanceChange, listener);
-		return () => {
-			window.removeEventListener(LATTICE_EVENT.appearanceChange, listener);
-		};
-	}, [onAppearanceChange]);
-	useEffect(() => {
-		if (!onLocaleChange) return;
-		const listener = (event) => {
-			const locale = event.detail?.locale;
-			if (typeof locale === "string" && locale !== "") onLocaleChange(locale);
-		};
-		window.addEventListener(LATTICE_EVENT.localeChange, listener);
-		return () => {
-			window.removeEventListener(LATTICE_EVENT.localeChange, listener);
-		};
-	}, [onLocaleChange]);
+	useWindowEvent(LATTICE_EVENT.appearanceChange, (event) => {
+		const value = event.detail?.value;
+		if (isAppearance(value)) onAppearanceChange?.(value);
+	}, { enabled: Boolean(onAppearanceChange) });
+	useWindowEvent(LATTICE_EVENT.localeChange, (event) => {
+		const locale = event.detail?.locale;
+		if (typeof locale === "string" && locale !== "") onLocaleChange?.(locale);
+	}, { enabled: Boolean(onLocaleChange) });
 	return null;
 }
 //#endregion

package/dist/event-bridge.js.map

@@ -1 +1 @@
-{"version":3,"file":"event-bridge.js","names":[],"sources":["../resources/js/event-bridge.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { onToast as subscribeToToasts } from \"@lattice-php/lattice/toast\";\nimport type { ToastMessage } from \"@lattice-php/lattice/toast\";\nimport { isAppearance, type Appearance } from \"./appearance\";\nimport { LATTICE_EVENT } from \"./events/event-names\";\n\ntype EventBridgeProps = {\n  onAppearanceChange?: (appearance: Appearance) => void;\n  onLocaleChange?: (locale: string) => void;\n  onToast?: (toast: ToastMessage) => void;\n};\n\ntype AppearanceEvent = CustomEvent<{\n  value?: unknown;\n}>;\n\ntype LocaleEvent = CustomEvent<{\n  locale?: unknown;\n}>;\n\nexport function EventBridge({ onAppearanceChange, onLocaleChange, onToast }: EventBridgeProps) {\n  useEffect(() => {\n    if (!onToast) {\n      return;\n    }\n\n    return subscribeToToasts(onToast);\n  }, [onToast]);\n\n  useEffect(() => {\n    if (!onAppearanceChange) {\n      return;\n    }\n\n    const listener = (event: Event): void => {\n      const value = (event as AppearanceEvent).detail?.value;\n\n      if (isAppearance(value)) {\n        onAppearanceChange(value);\n      }\n    };\n\n    window.addEventListener(LATTICE_EVENT.appearanceChange, listener);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.appearanceChange, listener);\n    };\n  }, [onAppearanceChange]);\n\n  useEffect(() => {\n    if (!onLocaleChange) {\n      return;\n    }\n\n    const listener = (event: Event): void => {\n      const locale = (event as LocaleEvent).detail?.locale;\n\n      if (typeof locale === \"string\" && locale !== \"\") {\n        onLocaleChange(locale);\n      }\n    };\n\n    window.addEventListener(LATTICE_EVENT.localeChange, listener);\n\n    return () => {\n      window.removeEventListener(LATTICE_EVENT.localeChange, listener);\n    };\n  }, [onLocaleChange]);\n\n  return null;\n}\n"],"mappings":";;;;;AAoBA,SAAgB,YAAY,EAAE,oBAAoB,gBAAgB,SAAA,aAA6B;CAC7F,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,OAAO,QAAkB,SAAO;CAClC,GAAG,CAAC,SAAO,CAAC;CAEZ,gBAAgB;EACd,IAAI,CAAC,oBACH;EAGF,MAAM,YAAY,UAAuB;GACvC,MAAM,QAAS,MAA0B,QAAQ;GAEjD,IAAI,aAAa,KAAK,GACpB,mBAAmB,KAAK;EAE5B;EAEA,OAAO,iBAAiB,cAAc,kBAAkB,QAAQ;EAEhE,aAAa;GACX,OAAO,oBAAoB,cAAc,kBAAkB,QAAQ;EACrE;CACF,GAAG,CAAC,kBAAkB,CAAC;CAEvB,gBAAgB;EACd,IAAI,CAAC,gBACH;EAGF,MAAM,YAAY,UAAuB;GACvC,MAAM,SAAU,MAAsB,QAAQ;GAE9C,IAAI,OAAO,WAAW,YAAY,WAAW,IAC3C,eAAe,MAAM;EAEzB;EAEA,OAAO,iBAAiB,cAAc,cAAc,QAAQ;EAE5D,aAAa;GACX,OAAO,oBAAoB,cAAc,cAAc,QAAQ;EACjE;CACF,GAAG,CAAC,cAAc,CAAC;CAEnB,OAAO;AACT"}
+{"version":3,"file":"event-bridge.js","names":[],"sources":["../resources/js/event-bridge.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { onToast as subscribeToToasts } from \"@lattice-php/lattice/toast\";\nimport type { ToastMessage } from \"@lattice-php/lattice/toast\";\nimport { useWindowEvent } from \"@lattice-php/lattice/core/hooks/use-window-event\";\nimport { isAppearance, type Appearance } from \"./appearance\";\nimport { LATTICE_EVENT } from \"./core/event-names\";\n\ntype EventBridgeProps = {\n  onAppearanceChange?: (appearance: Appearance) => void;\n  onLocaleChange?: (locale: string) => void;\n  onToast?: (toast: ToastMessage) => void;\n};\n\ntype AppearanceEvent = CustomEvent<{\n  value?: unknown;\n}>;\n\ntype LocaleEvent = CustomEvent<{\n  locale?: unknown;\n}>;\n\nexport function EventBridge({ onAppearanceChange, onLocaleChange, onToast }: EventBridgeProps) {\n  useEffect(() => {\n    if (!onToast) {\n      return;\n    }\n\n    return subscribeToToasts(onToast);\n  }, [onToast]);\n\n  useWindowEvent(\n    LATTICE_EVENT.appearanceChange,\n    (event) => {\n      const value = (event as AppearanceEvent).detail?.value;\n\n      if (isAppearance(value)) {\n        onAppearanceChange?.(value);\n      }\n    },\n    { enabled: Boolean(onAppearanceChange) },\n  );\n\n  useWindowEvent(\n    LATTICE_EVENT.localeChange,\n    (event) => {\n      const locale = (event as LocaleEvent).detail?.locale;\n\n      if (typeof locale === \"string\" && locale !== \"\") {\n        onLocaleChange?.(locale);\n      }\n    },\n    { enabled: Boolean(onLocaleChange) },\n  );\n\n  return null;\n}\n"],"mappings":";;;;;;AAqBA,SAAgB,YAAY,EAAE,oBAAoB,gBAAgB,SAAA,aAA6B;CAC7F,gBAAgB;EACd,IAAI,CAAC,WACH;EAGF,OAAO,QAAkB,SAAO;CAClC,GAAG,CAAC,SAAO,CAAC;CAEZ,eACE,cAAc,mBACb,UAAU;EACT,MAAM,QAAS,MAA0B,QAAQ;EAEjD,IAAI,aAAa,KAAK,GACpB,qBAAqB,KAAK;CAE9B,GACA,EAAE,SAAS,QAAQ,kBAAkB,EAAE,CACzC;CAEA,eACE,cAAc,eACb,UAAU;EACT,MAAM,SAAU,MAAsB,QAAQ;EAE9C,IAAI,OAAO,WAAW,YAAY,WAAW,IAC3C,iBAAiB,MAAM;CAE3B,GACA,EAAE,SAAS,QAAQ,cAAc,EAAE,CACrC;CAEA,OAAO;AACT"}

package/dist/form/components/fields/date-picker-field.js

@@ -1,6 +1,6 @@
+import { useLocale } from "../../../i18n/locale.js";
 import { cn } from "../../../lib/utils.js";
 import { Icon } from "../../../icons/sprite.js";
-import { useLocale } from "../../../i18n/locale.js";
 import { Button } from "../../../ui/button.js";
 import { Input } from "../../../ui/input.js";
 import { parseTimeString } from "./time-picker-columns.js";

package/dist/form/components/fields/file-upload.js

@@ -76,13 +76,13 @@ var FileUploadComponent = ({ node }) => {
 		previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
 		previewUrlsRef.current.clear();
 	}, []);
-	const multipartFiles = items.filter((item) => item.file && !item.existing).map((item) => item.file);
+	const multipartFiles = useMemo(() => items.filter((item) => item.file && !item.existing).map((item) => item.file), [items]);
 	useEffect(() => {
 		if (signed || !fileInputRef.current) return;
 		const transfer = new DataTransfer();
 		multipartFiles.forEach((file) => transfer.items.add(file));
 		fileInputRef.current.files = transfer.files;
-	});
+	}, [multipartFiles, signed]);
 	function createPreviewUrl(file) {
 		if (!props.image) return;
 		const url = URL.createObjectURL(file);
@@ -172,10 +172,8 @@ var FileUploadComponent = ({ node }) => {
 	function removeItem(id) {
 		const target = items.find((item) => item.id === id);
 		if (target) revokePreviewUrl(target);
-		setItems((prev) => {
-			if (target?.existing && target.token && !scope) setRemovedTokens((tokens) => [...tokens, target.token]);
-			return prev.filter((i) => i.id !== id);
-		});
+		if (target?.existing && target.token && !scope) setRemovedTokens((tokens) => [...tokens, target.token]);
+		setItems((prev) => prev.filter((i) => i.id !== id));
 	}
 	if (hidden) return null;
 	return /* @__PURE__ */ jsx(FormFieldFrame, {

package/dist/form/components/fields/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","names":[],"sources":["../../../../resources/js/form/components/fields/file-upload.tsx"],"sourcesContent":["import { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { SignedUpload } from \"@lattice-php/lattice/types/generated\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValues, useSetFormValue } from \"@lattice-php/lattice/form/hooks/values\";\n\ntype Item = {\n  id: string;\n  name: string;\n  size: number | null;\n  status: \"ready\" | \"uploading\" | \"error\";\n  progress: number;\n  file?: File;\n  key?: string;\n  url?: string | null;\n  token?: string;\n  existing: boolean;\n};\n\nfunction uploadValueEquals(current: unknown, next: string[] | string): boolean {\n  if (Array.isArray(next)) {\n    return (\n      Array.isArray(current) &&\n      current.length === next.length &&\n      current.every((value, index) => value === next[index])\n    );\n  }\n\n  return current === next;\n}\n\nexport const FileUploadComponent: RendererComponent<\"field.file-upload\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { action, componentRef, errors } = useFormContext();\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 uploadKey = errorKey;\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const inputId = useId();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const previewUrlsRef = useRef<Set<string>>(new Set());\n  const locked = readOnly || disabled;\n  const signed = props.signed;\n  const multiple = props.multiple;\n  const fieldName = multiple ? `${domName}[]` : domName;\n\n  const initial = useMemo<Item[]>(\n    () =>\n      (props.files ?? []).map((file) => ({\n        id: crypto.randomUUID(),\n        name: file.name,\n        size: file.size,\n        status: \"ready\" as const,\n        progress: 100,\n        key: file.key,\n        url: file.url,\n        token: file.token,\n        existing: true,\n      })),\n    [props.files],\n  );\n  const [items, setItems] = useState<Item[]>(initial);\n  const [removedTokens, setRemovedTokens] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (!signed) {\n      return;\n    }\n\n    const keys = items\n      .filter((item) => !item.existing && item.key && item.status === \"ready\")\n      .map((item) => item.key as string);\n    const next = multiple ? keys : (keys[0] ?? \"\");\n\n    if (scope) {\n      if (!uploadValueEquals(scope.getValue(name), next)) {\n        scope.setValue(name, next);\n      }\n\n      return;\n    }\n\n    setValue(name, next);\n  }, [items, multiple, name, scope, setValue, signed]);\n\n  useEffect(() => {\n    if (!signed || scope) {\n      return;\n    }\n\n    setValue(`${name}__removed`, removedTokens);\n  }, [name, removedTokens, scope, setValue, signed]);\n\n  useEffect(\n    () => () => {\n      previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));\n      previewUrlsRef.current.clear();\n    },\n    [],\n  );\n\n  const multipartFiles = items\n    .filter((item) => item.file && !item.existing)\n    .map((item) => item.file as File);\n  useEffect(() => {\n    if (signed || !fileInputRef.current) {\n      return;\n    }\n\n    const transfer = new DataTransfer();\n    multipartFiles.forEach((file) => transfer.items.add(file));\n    fileInputRef.current.files = transfer.files;\n  });\n\n  function createPreviewUrl(file: File): string | undefined {\n    if (!props.image) {\n      return undefined;\n    }\n\n    const url = URL.createObjectURL(file);\n    previewUrlsRef.current.add(url);\n\n    return url;\n  }\n\n  function revokePreviewUrl(item: Item): void {\n    if (!item.url || !previewUrlsRef.current.has(item.url)) {\n      return;\n    }\n\n    URL.revokeObjectURL(item.url);\n    previewUrlsRef.current.delete(item.url);\n  }\n\n  async function signAndUpload(item: Item, file: File): Promise<void> {\n    const response = await apiFetch(action, {\n      method: \"POST\",\n      ref: componentRef,\n      body: JSON.stringify({\n        ...values,\n        _upload: uploadKey,\n        filename: file.name,\n        contentType: file.type,\n      }),\n      throwOnError: false,\n    });\n\n    if (!response.ok) {\n      setItems((prev) =>\n        prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n      );\n\n      return;\n    }\n\n    const sign = (await response.json()) as SignedUpload;\n\n    await new Promise<void>((resolve) => {\n      const request = new XMLHttpRequest();\n      request.open(sign.method.toUpperCase(), sign.url, true);\n      Object.entries(sign.headers).forEach(([key, value]) =>\n        request.setRequestHeader(key, String(value)),\n      );\n      request.upload.onprogress = (event) => {\n        if (event.lengthComputable) {\n          const progress = Math.round((event.loaded / event.total) * 100);\n          setItems((prev) =>\n            prev.map((entry) => (entry.id === item.id ? { ...entry, progress } : entry)),\n          );\n        }\n      };\n      request.onload = () => {\n        setItems((prev) =>\n          prev.map((entry) =>\n            entry.id === item.id\n              ? {\n                  ...entry,\n                  status: request.status < 300 ? \"ready\" : \"error\",\n                  key: sign.key,\n                  progress: 100,\n                }\n              : entry,\n          ),\n        );\n        resolve();\n      };\n      request.onerror = () => {\n        setItems((prev) =>\n          prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n        );\n        resolve();\n      };\n      request.send(file);\n    });\n  }\n\n  function addFiles(fileList: FileList | null): void {\n    if (!fileList || locked) {\n      return;\n    }\n\n    const incoming = Array.from(fileList);\n    const next = incoming.map<Item>((file) => ({\n      id: crypto.randomUUID(),\n      name: file.name,\n      size: file.size,\n      status: signed ? \"uploading\" : \"ready\",\n      progress: 0,\n      file,\n      url: createPreviewUrl(file),\n      existing: false,\n    }));\n\n    if (!multiple) {\n      items.forEach(revokePreviewUrl);\n\n      if (!scope) {\n        const replacedTokens = items\n          .filter((item) => item.existing && item.token)\n          .map((item) => item.token as string);\n\n        if (replacedTokens.length > 0) {\n          setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);\n        }\n      }\n    }\n\n    setItems((prev) => (multiple ? [...prev, ...next] : next));\n\n    if (signed) {\n      next.forEach((item, index) => void signAndUpload(item, incoming[index]));\n    }\n  }\n\n  function removeItem(id: string): void {\n    const target = items.find((item) => item.id === id);\n\n    if (target) {\n      revokePreviewUrl(target);\n    }\n\n    setItems((prev) => {\n      if (target?.existing && target.token && !scope) {\n        setRemovedTokens((tokens) => [...tokens, target.token as string]);\n      }\n      return prev.filter((i) => i.id !== id);\n    });\n  }\n\n  if (hidden) {\n    return null;\n  }\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      <div\n        className=\"flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6\"\n        data-test={testIdentity(name)}\n        onDragOver={(event) => event.preventDefault()}\n        onDrop={(event) => {\n          event.preventDefault();\n          addFiles(event.dataTransfer.files);\n        }}\n      >\n        <button\n          className=\"text-sm text-lt-muted-fg\"\n          disabled={locked}\n          onClick={() => fileInputRef.current?.click()}\n          type=\"button\"\n        >\n          {t(\"form.file-upload.dropzone\", \"Drop files here or click to browse\")}\n        </button>\n\n        <ul\n          className={props.image ? \"grid grid-cols-1 gap-3 sm:grid-cols-2\" : \"flex flex-col gap-2\"}\n        >\n          {items.map((item) => (\n            <li\n              className={\n                props.image\n                  ? \"flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm\"\n                  : \"flex items-center justify-between gap-3 text-sm\"\n              }\n              key={item.id}\n            >\n              {props.image && item.url ? (\n                <img\n                  alt={item.name}\n                  className=\"size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover\"\n                  data-test={testIdentity(`${name}-preview`)}\n                  src={item.url}\n                />\n              ) : null}\n              <div className=\"min-w-0 flex-1\">\n                <span className=\"block truncate\" data-test={testIdentity(`${name}-item`)}>\n                  {item.name}\n                </span>\n                {item.status === \"uploading\" && (\n                  <span className=\"text-xs text-lt-muted-fg\">{item.progress}%</span>\n                )}\n                {item.status === \"error\" && (\n                  <span className=\"text-xs text-lt-danger\">\n                    {t(\"form.file-upload.failed\", \"Failed\")}\n                  </span>\n                )}\n              </div>\n              {(!item.existing || !scope) && (\n                <IconButton\n                  size=\"sm\"\n                  icon=\"x\"\n                  label={t(\"form.file-upload.remove\", \"Remove {{name}}\", { name: item.name })}\n                  data-test={testIdentity(\n                    item.existing ? `${name}-remove-existing` : `${name}-remove`,\n                  )}\n                  disabled={locked}\n                  onClick={() => removeItem(item.id)}\n                />\n              )}\n              {signed && !item.existing && item.key && item.status === \"ready\" && (\n                <input\n                  data-test={testIdentity(`${name}-uploaded`)}\n                  name={fieldName}\n                  type=\"hidden\"\n                  value={item.key}\n                />\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {!scope &&\n          removedTokens.map((token) => (\n            <input key={token} name={`${name}__removed[]`} type=\"hidden\" value={token} />\n          ))}\n\n        <input\n          accept={props.accept ?? undefined}\n          aria-label={props.label ?? name}\n          className=\"sr-only\"\n          data-test={testIdentity(`${name}-input`)}\n          id={inputId}\n          multiple={multiple}\n          name={signed ? undefined : fieldName}\n          onChange={(event) => {\n            addFiles(event.target.files);\n            if (signed) {\n              event.target.value = \"\";\n            }\n          }}\n          ref={fileInputRef}\n          type=\"file\"\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../../resources/js/form/components/fields/file-upload.tsx"],"sourcesContent":["import { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { testIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport type { SignedUpload } from \"@lattice-php/lattice/types/generated\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValues, useSetFormValue } from \"@lattice-php/lattice/form/hooks/values\";\n\ntype Item = {\n  id: string;\n  name: string;\n  size: number | null;\n  status: \"ready\" | \"uploading\" | \"error\";\n  progress: number;\n  file?: File;\n  key?: string;\n  url?: string | null;\n  token?: string;\n  existing: boolean;\n};\n\nfunction uploadValueEquals(current: unknown, next: string[] | string): boolean {\n  if (Array.isArray(next)) {\n    return (\n      Array.isArray(current) &&\n      current.length === next.length &&\n      current.every((value, index) => value === next[index])\n    );\n  }\n\n  return current === next;\n}\n\nexport const FileUploadComponent: RendererComponent<\"field.file-upload\"> = ({ node }) => {\n  const { t } = useT(\"lattice\");\n  const props = node.props;\n  const { hidden, required, readOnly, disabled } = useDependentField(node);\n  const { action, componentRef, errors } = useFormContext();\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 uploadKey = errorKey;\n  const values = useFormValues();\n  const setValue = useSetFormValue();\n  const inputId = useId();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const previewUrlsRef = useRef<Set<string>>(new Set());\n  const locked = readOnly || disabled;\n  const signed = props.signed;\n  const multiple = props.multiple;\n  const fieldName = multiple ? `${domName}[]` : domName;\n\n  const initial = useMemo<Item[]>(\n    () =>\n      (props.files ?? []).map((file) => ({\n        id: crypto.randomUUID(),\n        name: file.name,\n        size: file.size,\n        status: \"ready\" as const,\n        progress: 100,\n        key: file.key,\n        url: file.url,\n        token: file.token,\n        existing: true,\n      })),\n    [props.files],\n  );\n  const [items, setItems] = useState<Item[]>(initial);\n  const [removedTokens, setRemovedTokens] = useState<string[]>([]);\n\n  useEffect(() => {\n    if (!signed) {\n      return;\n    }\n\n    const keys = items\n      .filter((item) => !item.existing && item.key && item.status === \"ready\")\n      .map((item) => item.key as string);\n    const next = multiple ? keys : (keys[0] ?? \"\");\n\n    if (scope) {\n      if (!uploadValueEquals(scope.getValue(name), next)) {\n        scope.setValue(name, next);\n      }\n\n      return;\n    }\n\n    setValue(name, next);\n  }, [items, multiple, name, scope, setValue, signed]);\n\n  useEffect(() => {\n    if (!signed || scope) {\n      return;\n    }\n\n    setValue(`${name}__removed`, removedTokens);\n  }, [name, removedTokens, scope, setValue, signed]);\n\n  useEffect(\n    () => () => {\n      previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));\n      previewUrlsRef.current.clear();\n    },\n    [],\n  );\n\n  const multipartFiles = useMemo(\n    () => items.filter((item) => item.file && !item.existing).map((item) => item.file as File),\n    [items],\n  );\n  useEffect(() => {\n    if (signed || !fileInputRef.current) {\n      return;\n    }\n\n    const transfer = new DataTransfer();\n    multipartFiles.forEach((file) => transfer.items.add(file));\n    fileInputRef.current.files = transfer.files;\n  }, [multipartFiles, signed]);\n\n  function createPreviewUrl(file: File): string | undefined {\n    if (!props.image) {\n      return undefined;\n    }\n\n    const url = URL.createObjectURL(file);\n    previewUrlsRef.current.add(url);\n\n    return url;\n  }\n\n  function revokePreviewUrl(item: Item): void {\n    if (!item.url || !previewUrlsRef.current.has(item.url)) {\n      return;\n    }\n\n    URL.revokeObjectURL(item.url);\n    previewUrlsRef.current.delete(item.url);\n  }\n\n  async function signAndUpload(item: Item, file: File): Promise<void> {\n    const response = await apiFetch(action, {\n      method: \"POST\",\n      ref: componentRef,\n      body: JSON.stringify({\n        ...values,\n        _upload: uploadKey,\n        filename: file.name,\n        contentType: file.type,\n      }),\n      throwOnError: false,\n    });\n\n    if (!response.ok) {\n      setItems((prev) =>\n        prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n      );\n\n      return;\n    }\n\n    const sign = (await response.json()) as SignedUpload;\n\n    await new Promise<void>((resolve) => {\n      const request = new XMLHttpRequest();\n      request.open(sign.method.toUpperCase(), sign.url, true);\n      Object.entries(sign.headers).forEach(([key, value]) =>\n        request.setRequestHeader(key, String(value)),\n      );\n      request.upload.onprogress = (event) => {\n        if (event.lengthComputable) {\n          const progress = Math.round((event.loaded / event.total) * 100);\n          setItems((prev) =>\n            prev.map((entry) => (entry.id === item.id ? { ...entry, progress } : entry)),\n          );\n        }\n      };\n      request.onload = () => {\n        setItems((prev) =>\n          prev.map((entry) =>\n            entry.id === item.id\n              ? {\n                  ...entry,\n                  status: request.status < 300 ? \"ready\" : \"error\",\n                  key: sign.key,\n                  progress: 100,\n                }\n              : entry,\n          ),\n        );\n        resolve();\n      };\n      request.onerror = () => {\n        setItems((prev) =>\n          prev.map((entry) => (entry.id === item.id ? { ...entry, status: \"error\" } : entry)),\n        );\n        resolve();\n      };\n      request.send(file);\n    });\n  }\n\n  function addFiles(fileList: FileList | null): void {\n    if (!fileList || locked) {\n      return;\n    }\n\n    const incoming = Array.from(fileList);\n    const next = incoming.map<Item>((file) => ({\n      id: crypto.randomUUID(),\n      name: file.name,\n      size: file.size,\n      status: signed ? \"uploading\" : \"ready\",\n      progress: 0,\n      file,\n      url: createPreviewUrl(file),\n      existing: false,\n    }));\n\n    if (!multiple) {\n      items.forEach(revokePreviewUrl);\n\n      if (!scope) {\n        const replacedTokens = items\n          .filter((item) => item.existing && item.token)\n          .map((item) => item.token as string);\n\n        if (replacedTokens.length > 0) {\n          setRemovedTokens((tokens) => [...tokens, ...replacedTokens]);\n        }\n      }\n    }\n\n    setItems((prev) => (multiple ? [...prev, ...next] : next));\n\n    if (signed) {\n      next.forEach((item, index) => void signAndUpload(item, incoming[index]));\n    }\n  }\n\n  function removeItem(id: string): void {\n    const target = items.find((item) => item.id === id);\n\n    if (target) {\n      revokePreviewUrl(target);\n    }\n\n    if (target?.existing && target.token && !scope) {\n      setRemovedTokens((tokens) => [...tokens, target.token as string]);\n    }\n\n    setItems((prev) => prev.filter((i) => i.id !== id));\n  }\n\n  if (hidden) {\n    return null;\n  }\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      <div\n        className=\"flex flex-col gap-3 rounded-lt-sm border border-dashed border-lt-border bg-lt-surface px-4 py-6\"\n        data-test={testIdentity(name)}\n        onDragOver={(event) => event.preventDefault()}\n        onDrop={(event) => {\n          event.preventDefault();\n          addFiles(event.dataTransfer.files);\n        }}\n      >\n        <button\n          className=\"text-sm text-lt-muted-fg\"\n          disabled={locked}\n          onClick={() => fileInputRef.current?.click()}\n          type=\"button\"\n        >\n          {t(\"form.file-upload.dropzone\", \"Drop files here or click to browse\")}\n        </button>\n\n        <ul\n          className={props.image ? \"grid grid-cols-1 gap-3 sm:grid-cols-2\" : \"flex flex-col gap-2\"}\n        >\n          {items.map((item) => (\n            <li\n              className={\n                props.image\n                  ? \"flex min-w-0 items-center gap-3 rounded-lt-sm border border-lt-border bg-lt-bg p-2 text-sm\"\n                  : \"flex items-center justify-between gap-3 text-sm\"\n              }\n              key={item.id}\n            >\n              {props.image && item.url ? (\n                <img\n                  alt={item.name}\n                  className=\"size-16 shrink-0 rounded-lt-sm border border-lt-border object-cover\"\n                  data-test={testIdentity(`${name}-preview`)}\n                  src={item.url}\n                />\n              ) : null}\n              <div className=\"min-w-0 flex-1\">\n                <span className=\"block truncate\" data-test={testIdentity(`${name}-item`)}>\n                  {item.name}\n                </span>\n                {item.status === \"uploading\" && (\n                  <span className=\"text-xs text-lt-muted-fg\">{item.progress}%</span>\n                )}\n                {item.status === \"error\" && (\n                  <span className=\"text-xs text-lt-danger\">\n                    {t(\"form.file-upload.failed\", \"Failed\")}\n                  </span>\n                )}\n              </div>\n              {(!item.existing || !scope) && (\n                <IconButton\n                  size=\"sm\"\n                  icon=\"x\"\n                  label={t(\"form.file-upload.remove\", \"Remove {{name}}\", { name: item.name })}\n                  data-test={testIdentity(\n                    item.existing ? `${name}-remove-existing` : `${name}-remove`,\n                  )}\n                  disabled={locked}\n                  onClick={() => removeItem(item.id)}\n                />\n              )}\n              {signed && !item.existing && item.key && item.status === \"ready\" && (\n                <input\n                  data-test={testIdentity(`${name}-uploaded`)}\n                  name={fieldName}\n                  type=\"hidden\"\n                  value={item.key}\n                />\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {!scope &&\n          removedTokens.map((token) => (\n            <input key={token} name={`${name}__removed[]`} type=\"hidden\" value={token} />\n          ))}\n\n        <input\n          accept={props.accept ?? undefined}\n          aria-label={props.label ?? name}\n          className=\"sr-only\"\n          data-test={testIdentity(`${name}-input`)}\n          id={inputId}\n          multiple={multiple}\n          name={signed ? undefined : fieldName}\n          onChange={(event) => {\n            addFiles(event.target.files);\n            if (signed) {\n              event.target.value = \"\";\n            }\n          }}\n          ref={fileInputRef}\n          type=\"file\"\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { materializeSchema } from "../../../core/materialize.js";
 import { cn } from "../../../lib/utils.js";
 import { Icon } from "../../../icons/sprite.js";
 import { Renderer } from "../../../core/renderer.js";
@@ -14,7 +15,6 @@ import { useDependentField } from "../../hooks/use-dependent-field.js";
 import { fieldDomName } from "../../lib/field-dom-name.js";
 import { controlSurface } from "../../../ui/control.js";
 import { Combobox } from "../../../ui/combobox.js";
-import { materializeSchema } from "../../../core/materialize.js";
 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
@@ -35,7 +35,7 @@ var SelectComponent = ({ node }) => {
 	const scope = useFieldScope();
 	const domName = fieldDomName(scope ? scope.scopedName(name) : name, fieldIdPrefix);
 	const errorKey = scope ? scope.errorKey(name) : name;
-	const searchKey = scope ? scope.errorKey(name) : name;
+	const searchKey = errorKey;
 	const placeholder = props.placeholder || "Select…";
 	const multiple = props.multiple;
 	const searchable = props.searchable;

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-php/lattice/icons\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"@lattice-php/lattice/ui/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { coerceColor, colorValue } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { materializeSchema } from \"@lattice-php/lattice/core/materialize\";\nimport type { Node, Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { fieldDomName } from \"@lattice-php/lattice/form/lib/field-dom-name\";\nimport { postFormAction } from \"@lattice-php/lattice/form/lib/form-transport\";\nimport { useResolvedNode } from \"@lattice-php/lattice/form/hooks/resolved-nodes\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValue, useFormValues } from \"@lattice-php/lattice/form/hooks/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, fieldIdPrefix, searchOptions } = 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 = fieldDomName(scope ? scope.scopedName(name) : name, fieldIdPrefix);\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 creatable = props.creatable;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n  const optionSchema = (resolvedNode.props as { optionSchema?: Node[] }).optionSchema;\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  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\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 optionsByValue = useMemo(() => {\n    const map = new Map<string, Option>();\n\n    for (const option of [...staticOptions, ...(results ?? [])]) {\n      map.set(option.value, option);\n    }\n\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => optionsByValue.get(value)?.label ?? value;\n  const colorFor = (value: string) =>\n    coerceColor((optionsByValue.get(value)?.data as { color?: unknown } | undefined)?.color);\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      if (searchOptions) {\n        void searchOptions(searchKey, query, valuesRef.current, controller.signal)\n          .then((options) => {\n            setResults(options);\n            setLoading(false);\n          })\n          .catch(() => {});\n\n        return;\n      }\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, searchOptions],\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      const next = selectedRef.current.includes(value)\n        ? selectedRef.current.filter((item) => item !== value)\n        : [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n\n      return;\n    }\n\n    selectedRef.current = [value];\n    commit([value]);\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  function applyCreated(value: string): void {\n    if (!multiple) {\n      selectedRef.current = [value];\n      commit([value]);\n\n      return;\n    }\n\n    if (!selectedRef.current.includes(value)) {\n      const next = [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n    }\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n  const renderOption = optionSchema?.length\n    ? (option: Option) => (\n        <Renderer\n          nodes={materializeSchema(optionSchema, {\n            ...option.data,\n            label: option.label,\n            value: option.value,\n          })}\n        />\n      )\n    : undefined;\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={domName}\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              const color = colorFor(value);\n\n              return (\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                  {color && (\n                    <span\n                      aria-hidden=\"true\"\n                      className=\"size-2 shrink-0 rounded-full\"\n                      style={{ background: colorValue(color) }}\n                    />\n                  )}\n                  {labelFor(value)}\n                  {!locked && (\n                    <button\n                      aria-label={t(\"form.remove-option\", \"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            })}\n          </div>\n        )}\n\n        <Combobox\n          creatable={creatable}\n          emptyLabel={props.emptyLabel ?? undefined}\n          loading={loading}\n          multiple={multiple}\n          onCommit={applyCreated}\n          onCreate={applyCreated}\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          renderOption={renderOption}\n          searchPlaceholder={props.searchPlaceholder ?? undefined}\n          showSearch={Boolean(searchable || creatable)}\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            id: domName,\n            tabIndex: props.tabIndex ?? undefined,\n          }}\n        />\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/ui/combobox\";\nimport { controlSurface } from \"@lattice-php/lattice/ui/control\";\nimport { coerceColor, colorValue } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { materializeSchema } from \"@lattice-php/lattice/core/materialize\";\nimport type { Node, Option, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { FormFieldFrame } from \"@lattice-php/lattice/form/components/base/field\";\nimport { useFormContext } from \"@lattice-php/lattice/form/hooks/context\";\nimport { fieldDomName } from \"@lattice-php/lattice/form/lib/field-dom-name\";\nimport { postFormAction } from \"@lattice-php/lattice/form/lib/form-transport\";\nimport { useResolvedNode } from \"@lattice-php/lattice/form/hooks/resolved-nodes\";\nimport { useDependentField } from \"@lattice-php/lattice/form/hooks/use-dependent-field\";\nimport { useFieldCommit } from \"@lattice-php/lattice/form/hooks/use-field-commit\";\nimport { useFieldScope } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { useFormValue, useFormValues } from \"@lattice-php/lattice/form/hooks/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, fieldIdPrefix, searchOptions } = 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 = fieldDomName(scope ? scope.scopedName(name) : name, fieldIdPrefix);\n  const errorKey = scope ? scope.errorKey(name) : name;\n  const searchKey = errorKey;\n  const placeholder = props.placeholder || \"Select…\";\n  const multiple = props.multiple;\n  const searchable = props.searchable;\n  const creatable = props.creatable;\n  const staticOptions = useMemo(\n    () => (resolvedNode.props as { options?: Option[] }).options ?? [],\n    [resolvedNode.props],\n  );\n  const optionSchema = (resolvedNode.props as { optionSchema?: Node[] }).optionSchema;\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  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\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 optionsByValue = useMemo(() => {\n    const map = new Map<string, Option>();\n\n    for (const option of [...staticOptions, ...(results ?? [])]) {\n      map.set(option.value, option);\n    }\n\n    return map;\n  }, [staticOptions, results]);\n  const labelFor = (value: string) => optionsByValue.get(value)?.label ?? value;\n  const colorFor = (value: string) =>\n    coerceColor((optionsByValue.get(value)?.data as { color?: unknown } | undefined)?.color);\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      if (searchOptions) {\n        void searchOptions(searchKey, query, valuesRef.current, controller.signal)\n          .then((options) => {\n            setResults(options);\n            setLoading(false);\n          })\n          .catch(() => {});\n\n        return;\n      }\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, searchOptions],\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      const next = selectedRef.current.includes(value)\n        ? selectedRef.current.filter((item) => item !== value)\n        : [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n\n      return;\n    }\n\n    selectedRef.current = [value];\n    commit([value]);\n  }\n\n  function remove(value: string): void {\n    commit(selected.filter((item) => item !== value));\n  }\n\n  function applyCreated(value: string): void {\n    if (!multiple) {\n      selectedRef.current = [value];\n      commit([value]);\n\n      return;\n    }\n\n    if (!selectedRef.current.includes(value)) {\n      const next = [...selectedRef.current, value];\n      selectedRef.current = next;\n      commit(next);\n    }\n  }\n\n  if (hidden) {\n    return null;\n  }\n\n  const options = searchable ? (results ?? staticOptions) : staticOptions;\n\n  const renderOption = optionSchema?.length\n    ? (option: Option) => (\n        <Renderer\n          nodes={materializeSchema(optionSchema, {\n            ...option.data,\n            label: option.label,\n            value: option.value,\n          })}\n        />\n      )\n    : undefined;\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={domName}\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              const color = colorFor(value);\n\n              return (\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                  {color && (\n                    <span\n                      aria-hidden=\"true\"\n                      className=\"size-2 shrink-0 rounded-full\"\n                      style={{ background: colorValue(color) }}\n                    />\n                  )}\n                  {labelFor(value)}\n                  {!locked && (\n                    <button\n                      aria-label={t(\"form.remove-option\", \"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            })}\n          </div>\n        )}\n\n        <Combobox\n          creatable={creatable}\n          emptyLabel={props.emptyLabel ?? undefined}\n          loading={loading}\n          multiple={multiple}\n          onCommit={applyCreated}\n          onCreate={applyCreated}\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          renderOption={renderOption}\n          searchPlaceholder={props.searchPlaceholder ?? undefined}\n          showSearch={Boolean(searchable || creatable)}\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            id: domName,\n            tabIndex: props.tabIndex ?? undefined,\n          }}\n        />\n      </div>\n    </FormFieldFrame>\n  );\n};\n"],"mappings":"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"}

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

@@ -2,6 +2,7 @@ import { Icon } from "../../../icons/sprite.js";
 import { nodeKey } from "../../../core/nodes.js";
 import { RenderNode } from "../../../core/renderer.js";
 import { useT } from "../../../i18n/instance.js";
+import { useMediaQuery } from "../../../lib/use-media-query.js";
 import { FieldScopeProvider } from "../../hooks/field-scope.js";
 import { TableCellProvider } from "../../hooks/row-layout-context.js";
 import { buildRowActions } from "./row-action-menu.js";
@@ -9,7 +10,7 @@ import { RowActions } from "./row-actions.js";
 import { RowButton, RowItem } from "./row-item.js";
 import "../../../core/hooks/column-sizing.js";
 import { useColumnResizing } from "../../../core/hooks/use-column-resizing.js";
-import { memo, useEffect, useMemo, useState } from "react";
+import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/fields/table-rows.tsx
 var rowControlTrack = "3rem";
@@ -17,21 +18,8 @@ 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;
+	return useMediaQuery(tableViewportQuery, true);
 }
 function columnsFromSchema(nodes) {
 	return nodes.map((node) => {

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

@@ -1 +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 { nodeKey } from \"@lattice-php/lattice/core/nodes\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport {\n  DEFAULT_COLUMN_WIDTH,\n  type SizableColumn,\n} from \"@lattice-php/lattice/core/hooks/column-sizing\";\nimport { useColumnResizing } from \"@lattice-php/lattice/core/hooks/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 \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { TableCellProvider } from \"@lattice-php/lattice/form/hooks/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\ntype 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  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  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 grid-cols-[var(--lattice-table-columns)] items-start gap-x-3\"\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, childIndex) => (\n                <RenderNode key={nodeKey(child, childIndex)} node={child} />\n              ))}\n            </div>\n          ) : (\n            template.map((child, childIndex) => (\n              <div key={nodeKey(child, childIndex)}>\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, resizeRootRef, 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(\"table.reset-column-widths\", \"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(\"table.reset-column-widths\", \"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\n          ref={resizeRootRef}\n          className=\"flex min-w-max flex-col gap-2\"\n          style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n        >\n          <div className=\"grid grid-cols-[var(--lattice-table-columns)] items-center gap-x-3\">\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              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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"}
+{"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 { nodeKey } from \"@lattice-php/lattice/core/nodes\";\nimport { RenderNode } from \"@lattice-php/lattice/core/renderer\";\nimport {\n  DEFAULT_COLUMN_WIDTH,\n  type SizableColumn,\n} from \"@lattice-php/lattice/core/hooks/column-sizing\";\nimport { useColumnResizing } from \"@lattice-php/lattice/core/hooks/use-column-resizing\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { memo, useMemo } from \"react\";\nimport { useMediaQuery } from \"@lattice-php/lattice/lib/use-media-query\";\nimport type { ColumnWidth, RowAction as WireRowAction } from \"@lattice-php/lattice/types/generated\";\nimport { FieldScopeProvider } from \"@lattice-php/lattice/form/hooks/field-scope\";\nimport { TableCellProvider } from \"@lattice-php/lattice/form/hooks/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\nfunction useTableViewport(): boolean {\n  return useMediaQuery(tableViewportQuery, true);\n}\n\ntype TableRowModel = {\n  key: string;\n  index: number;\n  row: RepeaterRow;\n  template: Node[];\n  span: boolean;\n  heading?: string;\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  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  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 grid-cols-[var(--lattice-table-columns)] items-start gap-x-3\"\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, childIndex) => (\n                <RenderNode key={nodeKey(child, childIndex)} node={child} />\n              ))}\n            </div>\n          ) : (\n            template.map((child, childIndex) => (\n              <div key={nodeKey(child, childIndex)}>\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, resizeRootRef, 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(\"table.reset-column-widths\", \"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(\"table.reset-column-widths\", \"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\n          ref={resizeRootRef}\n          className=\"flex min-w-max flex-col gap-2\"\n          style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n        >\n          <div className=\"grid grid-cols-[var(--lattice-table-columns)] items-center gap-x-3\">\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              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/form.js

@@ -1,37 +1,22 @@
-import { LATTICE_EVENT } from "../../events/event-names.js";
+import { LATTICE_EVENT } from "../../core/event-names.js";
+import { useWindowEvent } from "../../core/hooks/use-window-event.js";
 import { withHeaders } from "../../core/headers.js";
 import { FormProvider } from "../hooks/context.js";
 import { PrefillProvider } from "../hooks/prefill-context.js";
-import { walkFields } from "../lib/field-props.js";
 import { ResolvedNodesProvider } from "../hooks/resolved-nodes.js";
 import { FormValuesProvider } from "../hooks/values.js";
 import { useFormResolver } from "../hooks/use-form-resolver.js";
+import { collectFields } from "../lib/collect-fields.js";
 import { FormSubmitButton } from "./base/submit-button.js";
 import { Form } from "@inertiajs/react";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/form/components/form.tsx
-function collectFields(nodes) {
-	const collected = {
-		labels: {},
-		values: {}
-	};
-	walkFields(nodes, (props) => {
-		if (!props.name) return;
-		if (props.label) collected.labels[props.name] = props.label;
-		if (props.value !== void 0) collected.values[props.name] = props.value;
-	});
-	return collected;
-}
 function FormResetListener({ componentId, reset }) {
-	useEffect(() => {
-		const handler = (event) => {
-			const detail = event.detail;
-			if (!detail?.form || detail.form === componentId) reset();
-		};
-		window.addEventListener(LATTICE_EVENT.resetForm, handler);
-		return () => window.removeEventListener(LATTICE_EVENT.resetForm, handler);
-	}, [componentId, reset]);
+	useWindowEvent(LATTICE_EVENT.resetForm, (event) => {
+		const detail = event.detail;
+		if (!detail?.form || detail.form === componentId) reset();
+	});
 	return null;
 }
 function FormBody({ action, children, componentRef, nodes, shouldRenderSubmitButton, submitLabel, summaryLabel }) {

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

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../../../resources/js/form/components/form.tsx"],"sourcesContent":["import { Form as InertiaForm } from \"@inertiajs/react\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/events/event-names\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useEffect, useMemo } from \"react\";\nimport { FormSubmitButton } from \"./base/submit-button\";\nimport { FormProvider } from \"@lattice-php/lattice/form/hooks/context\";\nimport { walkFields } from \"@lattice-php/lattice/form/lib/field-props\";\nimport { PrefillProvider } from \"@lattice-php/lattice/form/hooks/prefill-context\";\nimport { ResolvedNodesProvider } from \"@lattice-php/lattice/form/hooks/resolved-nodes\";\nimport { useFormResolver } from \"@lattice-php/lattice/form/hooks/use-form-resolver\";\nimport { FormValuesProvider } from \"@lattice-php/lattice/form/hooks/values\";\n\ntype CollectedFields = {\n  labels: Record<string, string>;\n  values: Record<string, unknown>;\n};\n\nfunction collectFields(nodes: Node[] | undefined): CollectedFields {\n  const collected: CollectedFields = { labels: {}, values: {} };\n\n  walkFields(nodes, (props) => {\n    if (!props.name) {\n      return;\n    }\n    if (props.label) {\n      collected.labels[props.name] = props.label;\n    }\n    if (props.value !== undefined) {\n      collected.values[props.name] = props.value;\n    }\n  });\n\n  return collected;\n}\n\nfunction FormResetListener({\n  componentId,\n  reset,\n}: {\n  componentId?: string;\n  reset: (...fields: string[]) => void;\n}) {\n  useEffect(() => {\n    const handler = (event: Event) => {\n      const detail = (event as CustomEvent<{ form: string | null }>).detail;\n\n      if (!detail?.form || detail.form === componentId) {\n        reset();\n      }\n    };\n\n    window.addEventListener(LATTICE_EVENT.resetForm, handler);\n\n    return () => window.removeEventListener(LATTICE_EVENT.resetForm, handler);\n  }, [componentId, reset]);\n\n  return null;\n}\n\nfunction FormBody({\n  action,\n  children,\n  componentRef,\n  nodes,\n  shouldRenderSubmitButton,\n  submitLabel,\n  summaryLabel,\n}: {\n  action: string;\n  children: React.ReactNode;\n  componentRef: string;\n  nodes: Node[] | undefined;\n  shouldRenderSubmitButton: boolean;\n  submitLabel: string;\n  summaryLabel: string;\n}) {\n  const { nodes: resolvedNodes, markUserEdit } = useFormResolver(action, componentRef, nodes);\n\n  return (\n    <PrefillProvider value={{ markUserEdit }}>\n      <ResolvedNodesProvider nodes={resolvedNodes}>\n        <div className=\"flex flex-col gap-6\">\n          {children}\n\n          {shouldRenderSubmitButton && (\n            <div className=\"flex justify-end rounded-lt border border-lt-border bg-lt-surface px-lt-gutter py-4 shadow-lt-sm\">\n              <FormSubmitButton label={submitLabel} summaryLabel={summaryLabel} />\n            </div>\n          )}\n        </div>\n      </ResolvedNodesProvider>\n    </PrefillProvider>\n  );\n}\n\nexport const FormComponent: RendererComponent<\"form\"> = ({ children, node }) => {\n  const props = node.props;\n  const action = props.action ?? \"#\";\n  const errorBag = props.errorBag;\n  const componentRef = props.ref ?? \"\";\n  const method = props.method ?? \"post\";\n  const precognitive = props.precognitive;\n  const resetOnError = props.resetOnError ?? false;\n  const resetOnSuccess = props.resetOnSuccess ?? [];\n  const state = props.state;\n  const { labels: fieldLabels, values: fieldValues } = useMemo(\n    () => collectFields(node.schema),\n    [node.schema],\n  );\n  const initialValues = useMemo(() => ({ ...fieldValues, ...state }), [fieldValues, state]);\n  const shouldRenderSubmitButton = props.submitButton;\n  const submitLabel = props.submitLabel ?? \"Submit\";\n  const summaryLabel = props.validationSummaryLabel;\n  const validationTimeout = props.validationTimeout ?? undefined;\n\n  return (\n    <InertiaForm\n      action={action}\n      data-slot=\"form\"\n      data-lattice-component={node.id}\n      errorBag={errorBag}\n      method={method}\n      resetOnError={resetOnError}\n      resetOnSuccess={resetOnSuccess}\n      validationTimeout={precognitive ? validationTimeout : undefined}\n      headers={withHeaders(componentRef)}\n      className=\"mx-auto flex w-full max-w-2xl flex-col gap-6\"\n    >\n      {({ clearErrors, errors, processing, reset, validate }) => (\n        <FormProvider\n          value={{\n            action,\n            clearErrors: (field) => clearErrors(field),\n            componentId: node.id,\n            componentRef,\n            errors: errors as Record<string, string | undefined>,\n            fieldLabels,\n            precognitive,\n            processing,\n            validate: (field) => validate(field),\n          }}\n        >\n          <FormResetListener componentId={node.id} reset={reset} />\n\n          {props.status && (\n            <div className=\"text-center text-sm font-medium text-lt-success\">{props.status}</div>\n          )}\n\n          <FormValuesProvider initial={initialValues}>\n            <FormBody\n              action={action}\n              componentRef={componentRef}\n              nodes={node.schema}\n              shouldRenderSubmitButton={shouldRenderSubmitButton}\n              submitLabel={submitLabel}\n              summaryLabel={summaryLabel}\n            >\n              {children}\n            </FormBody>\n          </FormValuesProvider>\n        </FormProvider>\n      )}\n    </InertiaForm>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAkBA,SAAS,cAAc,OAA4C;CACjE,MAAM,YAA6B;EAAE,QAAQ,CAAC;EAAG,QAAQ,CAAC;CAAE;CAE5D,WAAW,QAAQ,UAAU;EAC3B,IAAI,CAAC,MAAM,MACT;EAEF,IAAI,MAAM,OACR,UAAU,OAAO,MAAM,QAAQ,MAAM;EAEvC,IAAI,MAAM,UAAU,KAAA,GAClB,UAAU,OAAO,MAAM,QAAQ,MAAM;CAEzC,CAAC;CAED,OAAO;AACT;AAEA,SAAS,kBAAkB,EACzB,aACA,SAIC;CACD,gBAAgB;EACd,MAAM,WAAW,UAAiB;GAChC,MAAM,SAAU,MAA+C;GAE/D,IAAI,CAAC,QAAQ,QAAQ,OAAO,SAAS,aACnC,MAAM;EAEV;EAEA,OAAO,iBAAiB,cAAc,WAAW,OAAO;EAExD,aAAa,OAAO,oBAAoB,cAAc,WAAW,OAAO;CAC1E,GAAG,CAAC,aAAa,KAAK,CAAC;CAEvB,OAAO;AACT;AAEA,SAAS,SAAS,EAChB,QACA,UACA,cACA,OACA,0BACA,aACA,gBASC;CACD,MAAM,EAAE,OAAO,eAAe,iBAAiB,gBAAgB,QAAQ,cAAc,KAAK;CAE1F,OACE,oBAAC,iBAAD;EAAiB,OAAO,EAAE,aAAa;YACrC,oBAAC,uBAAD;GAAuB,OAAO;aAC5B,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UAEA,4BACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,kBAAD;MAAkB,OAAO;MAA2B;KAAe,CAAA;IAChE,CAAA,CAEJ;;EACgB,CAAA;CACR,CAAA;AAErB;AAEA,IAAa,iBAA4C,EAAE,UAAU,WAAW;CAC9E,MAAM,QAAQ,KAAK;CACnB,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,WAAW,MAAM;CACvB,MAAM,eAAe,MAAM,OAAO;CAClC,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,eAAe,MAAM;CAC3B,MAAM,eAAe,MAAM,gBAAgB;CAC3C,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;CAChD,MAAM,QAAQ,MAAM;CACpB,MAAM,EAAE,QAAQ,aAAa,QAAQ,gBAAgB,cAC7C,cAAc,KAAK,MAAM,GAC/B,CAAC,KAAK,MAAM,CACd;CACA,MAAM,gBAAgB,eAAe;EAAE,GAAG;EAAa,GAAG;CAAM,IAAI,CAAC,aAAa,KAAK,CAAC;CACxF,MAAM,2BAA2B,MAAM;CACvC,MAAM,cAAc,MAAM,eAAe;CACzC,MAAM,eAAe,MAAM;CAC3B,MAAM,oBAAoB,MAAM,qBAAqB,KAAA;CAErD,OACE,oBAAC,MAAD;EACU;EACR,aAAU;EACV,0BAAwB,KAAK;EACnB;EACF;EACM;EACE;EAChB,mBAAmB,eAAe,oBAAoB,KAAA;EACtD,SAAS,YAAY,YAAY;EACjC,WAAU;aAER,EAAE,aAAa,QAAQ,YAAY,OAAO,eAC1C,qBAAC,cAAD;GACE,OAAO;IACL;IACA,cAAc,UAAU,YAAY,KAAK;IACzC,aAAa,KAAK;IAClB;IACQ;IACR;IACA;IACA;IACA,WAAW,UAAU,SAAS,KAAK;GACrC;aAXF;IAaE,oBAAC,mBAAD;KAAmB,aAAa,KAAK;KAAW;IAAQ,CAAA;IAEvD,MAAM,UACL,oBAAC,OAAD;KAAK,WAAU;eAAmD,MAAM;IAAY,CAAA;IAGtF,oBAAC,oBAAD;KAAoB,SAAS;eAC3B,oBAAC,UAAD;MACU;MACM;MACd,OAAO,KAAK;MACc;MACb;MACC;MAEb;KACO,CAAA;IACQ,CAAA;GACR;;CAEL,CAAA;AAEjB"}
+{"version":3,"file":"form.js","names":[],"sources":["../../../resources/js/form/components/form.tsx"],"sourcesContent":["import { Form as InertiaForm } from \"@inertiajs/react\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/core/event-names\";\nimport { useWindowEvent } from \"@lattice-php/lattice/core/hooks/use-window-event\";\nimport type { Node, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useMemo } from \"react\";\nimport { FormSubmitButton } from \"./base/submit-button\";\nimport { FormProvider } from \"@lattice-php/lattice/form/hooks/context\";\nimport { collectFields } from \"@lattice-php/lattice/form/lib/collect-fields\";\nimport { PrefillProvider } from \"@lattice-php/lattice/form/hooks/prefill-context\";\nimport { ResolvedNodesProvider } from \"@lattice-php/lattice/form/hooks/resolved-nodes\";\nimport { useFormResolver } from \"@lattice-php/lattice/form/hooks/use-form-resolver\";\nimport { FormValuesProvider } from \"@lattice-php/lattice/form/hooks/values\";\n\nfunction FormResetListener({\n  componentId,\n  reset,\n}: {\n  componentId?: string;\n  reset: (...fields: string[]) => void;\n}) {\n  useWindowEvent(LATTICE_EVENT.resetForm, (event) => {\n    const detail = (event as CustomEvent<{ form: string | null }>).detail;\n\n    if (!detail?.form || detail.form === componentId) {\n      reset();\n    }\n  });\n\n  return null;\n}\n\nfunction FormBody({\n  action,\n  children,\n  componentRef,\n  nodes,\n  shouldRenderSubmitButton,\n  submitLabel,\n  summaryLabel,\n}: {\n  action: string;\n  children: React.ReactNode;\n  componentRef: string;\n  nodes: Node[] | undefined;\n  shouldRenderSubmitButton: boolean;\n  submitLabel: string;\n  summaryLabel: string;\n}) {\n  const { nodes: resolvedNodes, markUserEdit } = useFormResolver(action, componentRef, nodes);\n\n  return (\n    <PrefillProvider value={{ markUserEdit }}>\n      <ResolvedNodesProvider nodes={resolvedNodes}>\n        <div className=\"flex flex-col gap-6\">\n          {children}\n\n          {shouldRenderSubmitButton && (\n            <div className=\"flex justify-end rounded-lt border border-lt-border bg-lt-surface px-lt-gutter py-4 shadow-lt-sm\">\n              <FormSubmitButton label={submitLabel} summaryLabel={summaryLabel} />\n            </div>\n          )}\n        </div>\n      </ResolvedNodesProvider>\n    </PrefillProvider>\n  );\n}\n\nexport const FormComponent: RendererComponent<\"form\"> = ({ children, node }) => {\n  const props = node.props;\n  const action = props.action ?? \"#\";\n  const errorBag = props.errorBag;\n  const componentRef = props.ref ?? \"\";\n  const method = props.method ?? \"post\";\n  const precognitive = props.precognitive;\n  const resetOnError = props.resetOnError ?? false;\n  const resetOnSuccess = props.resetOnSuccess ?? [];\n  const state = props.state;\n  const { labels: fieldLabels, values: fieldValues } = useMemo(\n    () => collectFields(node.schema),\n    [node.schema],\n  );\n  const initialValues = useMemo(() => ({ ...fieldValues, ...state }), [fieldValues, state]);\n  const shouldRenderSubmitButton = props.submitButton;\n  const submitLabel = props.submitLabel ?? \"Submit\";\n  const summaryLabel = props.validationSummaryLabel;\n  const validationTimeout = props.validationTimeout ?? undefined;\n\n  return (\n    <InertiaForm\n      action={action}\n      data-slot=\"form\"\n      data-lattice-component={node.id}\n      errorBag={errorBag}\n      method={method}\n      resetOnError={resetOnError}\n      resetOnSuccess={resetOnSuccess}\n      validationTimeout={precognitive ? validationTimeout : undefined}\n      headers={withHeaders(componentRef)}\n      className=\"mx-auto flex w-full max-w-2xl flex-col gap-6\"\n    >\n      {({ clearErrors, errors, processing, reset, validate }) => (\n        <FormProvider\n          value={{\n            action,\n            clearErrors: (field) => clearErrors(field),\n            componentId: node.id,\n            componentRef,\n            errors: errors as Record<string, string | undefined>,\n            fieldLabels,\n            precognitive,\n            processing,\n            validate: (field) => validate(field),\n          }}\n        >\n          <FormResetListener componentId={node.id} reset={reset} />\n\n          {props.status && (\n            <div className=\"text-center text-sm font-medium text-lt-success\">{props.status}</div>\n          )}\n\n          <FormValuesProvider initial={initialValues}>\n            <FormBody\n              action={action}\n              componentRef={componentRef}\n              nodes={node.schema}\n              shouldRenderSubmitButton={shouldRenderSubmitButton}\n              submitLabel={submitLabel}\n              summaryLabel={summaryLabel}\n            >\n              {children}\n            </FormBody>\n          </FormValuesProvider>\n        </FormProvider>\n      )}\n    </InertiaForm>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,SAAS,kBAAkB,EACzB,aACA,SAIC;CACD,eAAe,cAAc,YAAY,UAAU;EACjD,MAAM,SAAU,MAA+C;EAE/D,IAAI,CAAC,QAAQ,QAAQ,OAAO,SAAS,aACnC,MAAM;CAEV,CAAC;CAED,OAAO;AACT;AAEA,SAAS,SAAS,EAChB,QACA,UACA,cACA,OACA,0BACA,aACA,gBASC;CACD,MAAM,EAAE,OAAO,eAAe,iBAAiB,gBAAgB,QAAQ,cAAc,KAAK;CAE1F,OACE,oBAAC,iBAAD;EAAiB,OAAO,EAAE,aAAa;YACrC,oBAAC,uBAAD;GAAuB,OAAO;aAC5B,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UAEA,4BACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,kBAAD;MAAkB,OAAO;MAA2B;KAAe,CAAA;IAChE,CAAA,CAEJ;;EACgB,CAAA;CACR,CAAA;AAErB;AAEA,IAAa,iBAA4C,EAAE,UAAU,WAAW;CAC9E,MAAM,QAAQ,KAAK;CACnB,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,WAAW,MAAM;CACvB,MAAM,eAAe,MAAM,OAAO;CAClC,MAAM,SAAS,MAAM,UAAU;CAC/B,MAAM,eAAe,MAAM;CAC3B,MAAM,eAAe,MAAM,gBAAgB;CAC3C,MAAM,iBAAiB,MAAM,kBAAkB,CAAC;CAChD,MAAM,QAAQ,MAAM;CACpB,MAAM,EAAE,QAAQ,aAAa,QAAQ,gBAAgB,cAC7C,cAAc,KAAK,MAAM,GAC/B,CAAC,KAAK,MAAM,CACd;CACA,MAAM,gBAAgB,eAAe;EAAE,GAAG;EAAa,GAAG;CAAM,IAAI,CAAC,aAAa,KAAK,CAAC;CACxF,MAAM,2BAA2B,MAAM;CACvC,MAAM,cAAc,MAAM,eAAe;CACzC,MAAM,eAAe,MAAM;CAC3B,MAAM,oBAAoB,MAAM,qBAAqB,KAAA;CAErD,OACE,oBAAC,MAAD;EACU;EACR,aAAU;EACV,0BAAwB,KAAK;EACnB;EACF;EACM;EACE;EAChB,mBAAmB,eAAe,oBAAoB,KAAA;EACtD,SAAS,YAAY,YAAY;EACjC,WAAU;aAER,EAAE,aAAa,QAAQ,YAAY,OAAO,eAC1C,qBAAC,cAAD;GACE,OAAO;IACL;IACA,cAAc,UAAU,YAAY,KAAK;IACzC,aAAa,KAAK;IAClB;IACQ;IACR;IACA;IACA;IACA,WAAW,UAAU,SAAS,KAAK;GACrC;aAXF;IAaE,oBAAC,mBAAD;KAAmB,aAAa,KAAK;KAAW;IAAQ,CAAA;IAEvD,MAAM,UACL,oBAAC,OAAD;KAAK,WAAU;eAAmD,MAAM;IAAY,CAAA;IAGtF,oBAAC,oBAAD;KAAoB,SAAS;eAC3B,oBAAC,UAAD;MACU;MACM;MACd,OAAO,KAAK;MACc;MACb;MACC;MAEb;KACO,CAAA;IACQ,CAAA;GACR;;CAEL,CAAA;AAEjB"}

package/dist/form/embed.d.ts

@@ -14,5 +14,9 @@ export { TableCellProvider } from './hooks/row-layout-context.js';
 export { useFormResolver } from './hooks/use-form-resolver.js';
 export { FormValuesProvider, useFormValues, useSetFormValue } from './hooks/values.js';
 export { walkFields } from './lib/field-props.js';
+export { collectFields } from './lib/collect-fields.js';
+export type { CollectedFields } from './lib/collect-fields.js';
+export { firstErrors } from './lib/field-errors.js';
+export type { FieldErrors } from './lib/field-errors.js';
 export { appendPath, getPath, setPath } from './lib/form-path.js';
 export { FORM_DEBOUNCE_MS } from './lib/form-transport.js';

package/dist/form/embed.js

@@ -8,4 +8,6 @@ import { FieldCommitOverrideProvider } from "./hooks/use-field-commit.js";
 import { TableCellProvider } from "./hooks/row-layout-context.js";
 import { FORM_DEBOUNCE_MS } from "./lib/form-transport.js";
 import { useFormResolver } from "./hooks/use-form-resolver.js";
-export { FORM_DEBOUNCE_MS, FieldCommitOverrideProvider, FormProvider, FormValuesProvider, PrefillProvider, ResolvedNodesProvider, TableCellProvider, appendPath, getPath, setPath, useFormResolver, useFormValues, useSetFormValue, walkFields };
+import { collectFields } from "./lib/collect-fields.js";
+import { firstErrors } from "./lib/field-errors.js";
+export { FORM_DEBOUNCE_MS, FieldCommitOverrideProvider, FormProvider, FormValuesProvider, PrefillProvider, ResolvedNodesProvider, TableCellProvider, appendPath, collectFields, firstErrors, getPath, setPath, useFormResolver, useFormValues, useSetFormValue, walkFields };

package/dist/form/lib/collect-fields.d.ts

@@ -0,0 +1,7 @@
+import { Node } from '../../core/types.js';
+export type CollectedFields = {
+    labels: Record<string, string>;
+    values: Record<string, unknown>;
+};
+/** Gather the initial label and value of every named field in a schema. */
+export declare function collectFields(nodes: Node[] | undefined): CollectedFields;

package/dist/form/lib/collect-fields.js

@@ -0,0 +1,19 @@
+import { walkFields } from "./field-props.js";
+//#region resources/js/form/lib/collect-fields.ts
+/** Gather the initial label and value of every named field in a schema. */
+function collectFields(nodes) {
+	const collected = {
+		labels: {},
+		values: {}
+	};
+	walkFields(nodes, (props) => {
+		if (!props.name) return;
+		if (props.label) collected.labels[props.name] = props.label;
+		if (props.value !== void 0) collected.values[props.name] = props.value;
+	});
+	return collected;
+}
+//#endregion
+export { collectFields };
+
+//# sourceMappingURL=collect-fields.js.map

package/dist/form/lib/collect-fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collect-fields.js","names":[],"sources":["../../../resources/js/form/lib/collect-fields.ts"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport { walkFields } from \"./field-props\";\n\nexport type CollectedFields = {\n  labels: Record<string, string>;\n  values: Record<string, unknown>;\n};\n\n/** Gather the initial label and value of every named field in a schema. */\nexport function collectFields(nodes: Node[] | undefined): CollectedFields {\n  const collected: CollectedFields = { labels: {}, values: {} };\n\n  walkFields(nodes, (props) => {\n    if (!props.name) {\n      return;\n    }\n    if (props.label) {\n      collected.labels[props.name] = props.label;\n    }\n    if (props.value !== undefined) {\n      collected.values[props.name] = props.value;\n    }\n  });\n\n  return collected;\n}\n"],"mappings":";;;AASA,SAAgB,cAAc,OAA4C;CACxE,MAAM,YAA6B;EAAE,QAAQ,CAAC;EAAG,QAAQ,CAAC;CAAE;CAE5D,WAAW,QAAQ,UAAU;EAC3B,IAAI,CAAC,MAAM,MACT;EAEF,IAAI,MAAM,OACR,UAAU,OAAO,MAAM,QAAQ,MAAM;EAEvC,IAAI,MAAM,UAAU,KAAA,GAClB,UAAU,OAAO,MAAM,QAAQ,MAAM;CAEzC,CAAC;CAED,OAAO;AACT"}

package/dist/form/lib/field-errors.d.ts

@@ -0,0 +1,3 @@
+export type FieldErrors = Record<string, string | undefined>;
+/** Reduce a Laravel 422 error bag (arrays of messages) to the first per field. */
+export declare function firstErrors(errors: Record<string, string[] | string> | undefined): FieldErrors;

package/dist/form/lib/field-errors.js

@@ -0,0 +1,11 @@
+//#region resources/js/form/lib/field-errors.ts
+/** Reduce a Laravel 422 error bag (arrays of messages) to the first per field. */
+function firstErrors(errors) {
+	const result = {};
+	for (const [key, value] of Object.entries(errors ?? {})) result[key] = Array.isArray(value) ? value[0] : value;
+	return result;
+}
+//#endregion
+export { firstErrors };
+
+//# sourceMappingURL=field-errors.js.map

package/dist/form/lib/field-errors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-errors.js","names":[],"sources":["../../../resources/js/form/lib/field-errors.ts"],"sourcesContent":["export type FieldErrors = Record<string, string | undefined>;\n\n/** Reduce a Laravel 422 error bag (arrays of messages) to the first per field. */\nexport function firstErrors(errors: Record<string, string[] | string> | undefined): FieldErrors {\n  const result: FieldErrors = {};\n\n  for (const [key, value] of Object.entries(errors ?? {})) {\n    result[key] = Array.isArray(value) ? value[0] : value;\n  }\n\n  return result;\n}\n"],"mappings":";;AAGA,SAAgB,YAAY,QAAoE;CAC9F,MAAM,SAAsB,CAAC;CAE7B,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,UAAU,CAAC,CAAC,GACpD,OAAO,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,KAAK;CAGlD,OAAO;AACT"}

package/dist/format/format-context.d.ts

@@ -0,0 +1,6 @@
+export type FormatContext = {
+    locale: string;
+    timezone: string;
+};
+/** The `{ locale, timezone }` pair every `formatValue` call needs. */
+export declare function useFormatContext(): FormatContext;