@lattice-php/lattice 0.1.0 → 0.2.0

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,8 @@
+//#region \0rolldown/runtime.js
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
+	if (typeof require !== "undefined") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+});
+//#endregion
+export { __commonJSMin, __require };

package/dist/action/components/action-form.d.ts

@@ -0,0 +1,24 @@
+import { Node } from '../../core/types';
+import { ActionResponse } from '../effects';
+type ActionFormProps = {
+    cancelLabel: string;
+    componentRef: string;
+    description?: string;
+    endpoint: string;
+    /** Extra payload merged into every request, e.g. a bulk action's selection. */
+    extraData?: Record<string, unknown>;
+    /** The form to render; null while a lazy schema is still being fetched. */
+    formNode: Node | null;
+    method: string;
+    onClose: () => void;
+    onSuccess: (response: ActionResponse) => void;
+    submitLabel: string;
+    title: string;
+};
+/**
+ * Fetch a lazily-served form schema from the action endpoint while `enabled`,
+ * so it can be prefilled per record. Returns null until it arrives.
+ */
+export declare function useLazyActionForm(endpoint: string, method: string, componentRef: string, enabled: boolean): Node | null;
+export declare function ActionForm({ description, formNode, onClose, title, ...rest }: ActionFormProps): import("react").JSX.Element;
+export {};

package/dist/action/components/action-form.js

@@ -0,0 +1,270 @@
+import { withRefHeader } from "../../core/component-ref.js";
+import { Button } from "../../core/components/button.js";
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
+import { Spinner } from "../../core/components/spinner.js";
+import { dispatchActionError } from "../effects.js";
+import { Renderer, useRendererContext } from "../../core/renderer.js";
+import { FormProvider } from "../../form/components/context.js";
+import { walkFields } from "../../form/components/field-props.js";
+import { xsrfToken } from "../../form/components/form-transport.js";
+import { ResolvedNodesProvider } from "../../form/components/resolved-nodes.js";
+import { FormValuesProvider, useFormValues } from "../../form/components/values.js";
+import { useFormResolver } from "../../form/components/use-form-resolver.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Dialog from "@radix-ui/react-dialog";
+//#region resources/js/action/components/action-form.tsx
+function jsonHeaders(componentRef, extra) {
+	return {
+		Accept: "application/json",
+		"Content-Type": "application/json",
+		"X-Requested-With": "XMLHttpRequest",
+		"X-XSRF-TOKEN": xsrfToken(),
+		...withRefHeader(componentRef),
+		...extra
+	};
+}
+/**
+* Fetch a lazily-served form schema from the action endpoint while `enabled`,
+* so it can be prefilled per record. Returns null until it arrives.
+*/
+function useLazyActionForm(endpoint, method, componentRef, enabled) {
+	const [node, setNode] = useState(null);
+	useEffect(() => {
+		if (!enabled) {
+			setNode(null);
+			return;
+		}
+		const controller = new AbortController();
+		fetch(endpoint, {
+			body: JSON.stringify({ _form: true }),
+			credentials: "same-origin",
+			headers: jsonHeaders(componentRef),
+			method: method.toUpperCase(),
+			signal: controller.signal
+		}).then((response) => response.ok ? response.json() : null).then((fetched) => setNode(fetched)).catch(() => {});
+		return () => controller.abort();
+	}, [
+		enabled,
+		endpoint,
+		method,
+		componentRef
+	]);
+	return node;
+}
+function firstErrors(errors) {
+	const result = {};
+	for (const [key, value] of Object.entries(errors ?? {})) result[key] = Array.isArray(value) ? value[0] : value;
+	return result;
+}
+function ActionFormSkeleton() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		"data-lattice-action-form-loading": true,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-lt-muted" }),
+			/* @__PURE__ */ jsx("div", { className: "h-10 w-full animate-pulse rounded bg-lt-muted" }),
+			/* @__PURE__ */ jsx("div", { className: "h-10 w-full animate-pulse rounded bg-lt-muted" })
+		]
+	});
+}
+function collectFields(formNode) {
+	const labels = {};
+	const values = {};
+	walkFields(formNode.schema, (props) => {
+		if (!props.name) return;
+		if (props.label) labels[props.name] = props.label;
+		if (props.value !== void 0) values[props.name] = props.value;
+	});
+	return {
+		labels,
+		values: {
+			...values,
+			...formNode.props?.state
+		}
+	};
+}
+function ActionFormBody({ cancelLabel, componentRef, endpoint, extraData, fieldLabels, formNode, method, onClose, onSuccess, precognitive, submitLabel }) {
+	const { fallback, missingComponent, registry } = useRendererContext();
+	const values = useFormValues();
+	const valuesRef = useRef(values);
+	valuesRef.current = values;
+	const extraDataRef = useRef(extraData);
+	extraDataRef.current = extraData;
+	const resolvedNodes = useFormResolver(endpoint, componentRef, formNode.schema);
+	const [errors, setErrors] = useState({});
+	const [processing, setProcessing] = useState(false);
+	const timer = useRef(void 0);
+	const request = useCallback((extraHeaders) => fetch(endpoint, {
+		body: JSON.stringify({
+			...valuesRef.current,
+			...extraDataRef.current
+		}),
+		credentials: "same-origin",
+		method: method.toUpperCase(),
+		headers: jsonHeaders(componentRef, extraHeaders)
+	}), [
+		componentRef,
+		endpoint,
+		method
+	]);
+	const clearErrors = useCallback((field) => {
+		setErrors((current) => current[field] === void 0 ? current : {
+			...current,
+			[field]: void 0
+		});
+	}, []);
+	const validate = useCallback((field) => {
+		if (!precognitive) return;
+		window.clearTimeout(timer.current);
+		timer.current = window.setTimeout(() => {
+			request({
+				Precognition: "true",
+				"Precognition-Validate-Only": field
+			}).then(async (response) => {
+				if (response.status === 422) {
+					const body = await response.json();
+					setErrors((current) => ({
+						...current,
+						...firstErrors(body.errors)
+					}));
+					return;
+				}
+				clearErrors(field);
+			}).catch(() => {});
+		}, 250);
+	}, [
+		clearErrors,
+		precognitive,
+		request
+	]);
+	const submit = useCallback(() => {
+		setProcessing(true);
+		request().then(async (response) => {
+			if (response.status === 422) {
+				setErrors(firstErrors((await response.json()).errors));
+				return;
+			}
+			if (!response.ok) {
+				dispatchActionError(/* @__PURE__ */ new Error(`Action request failed with status ${response.status}`));
+				return;
+			}
+			onSuccess(await response.json());
+		}).catch((error) => dispatchActionError(error)).finally(() => setProcessing(false));
+	}, [onSuccess, request]);
+	return /* @__PURE__ */ jsx(FormProvider, {
+		value: useMemo(() => ({
+			action: endpoint,
+			clearErrors,
+			componentRef,
+			errors,
+			fieldLabels,
+			precognitive,
+			processing,
+			validate
+		}), [
+			clearErrors,
+			componentRef,
+			endpoint,
+			errors,
+			fieldLabels,
+			precognitive,
+			processing,
+			validate
+		]),
+		children: /* @__PURE__ */ jsxs("form", {
+			className: "flex flex-col gap-6",
+			onSubmit: (event) => {
+				event.preventDefault();
+				submit();
+			},
+			children: [/* @__PURE__ */ jsx(ResolvedNodesProvider, {
+				nodes: resolvedNodes,
+				children: /* @__PURE__ */ jsx(Renderer, {
+					fallback,
+					missingComponent,
+					nodes: formNode.schema ?? [],
+					registry
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end gap-3",
+				children: [/* @__PURE__ */ jsx(Button, {
+					"data-test": "action-form-cancel",
+					disabled: processing,
+					onClick: onClose,
+					type: "button",
+					variant: "ghost",
+					children: cancelLabel
+				}), /* @__PURE__ */ jsxs(Button, {
+					"data-test": "action-form-submit",
+					disabled: processing,
+					type: "submit",
+					children: [processing && /* @__PURE__ */ jsx(Spinner, {}), submitLabel]
+				})]
+			})]
+		})
+	});
+}
+function ActionFormContent({ formNode, ...rest }) {
+	const precognitive = Boolean(formNode.props?.precognitive);
+	const { labels: fieldLabels, values: initialValues } = useMemo(() => collectFields(formNode), [formNode]);
+	return /* @__PURE__ */ jsx(FormValuesProvider, {
+		initial: initialValues,
+		children: /* @__PURE__ */ jsx(ActionFormBody, {
+			fieldLabels,
+			formNode,
+			precognitive,
+			...rest
+		})
+	});
+}
+function ActionForm({ description, formNode, onClose, title, ...rest }) {
+	const { t } = useT("lattice");
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open: true,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/50" }), /* @__PURE__ */ jsxs(Dialog.Content, {
+			...description ? {} : { "aria-describedby": void 0 },
+			className: "fixed left-1/2 top-1/2 z-50 max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start justify-between gap-4",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "grid gap-2",
+					children: [/* @__PURE__ */ jsx(Dialog.Title, {
+						className: "text-lg font-semibold leading-none tracking-tight",
+						children: title
+					}), description && /* @__PURE__ */ jsx(Dialog.Description, {
+						className: "text-sm text-lt-muted-fg",
+						children: description
+					})]
+				}), /* @__PURE__ */ jsx(Dialog.Close, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						"aria-label": t("a11y.close", "Close"),
+						size: "icon",
+						variant: "ghost",
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "x",
+							"aria-hidden": "true",
+							className: "size-lt-icon-md"
+						})
+					})
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "mt-6",
+				children: formNode ? /* @__PURE__ */ jsx(ActionFormContent, {
+					formNode,
+					onClose,
+					...rest
+				}) : /* @__PURE__ */ jsx(ActionFormSkeleton, {})
+			})]
+		})] })
+	});
+}
+//#endregion
+export { ActionForm, useLazyActionForm };
+
+//# sourceMappingURL=action-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action-form.js","names":[],"sources":["../../../resources/js/action/components/action-form.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport * as Dialog from \"@radix-ui/react-dialog\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { withRefHeader } from \"@lattice/lattice/core/component-ref\";\nimport { Button } from \"@lattice/lattice/core/components/button\";\nimport { Spinner } from \"@lattice/lattice/core/components/spinner\";\nimport { Renderer, useRendererContext } from \"@lattice/lattice/core/renderer\";\nimport type { Node } from \"@lattice/lattice/core/types\";\nimport { FormProvider } from \"@lattice/lattice/form/components/context\";\nimport { walkFields } from \"@lattice/lattice/form/components/field-props\";\nimport { FORM_DEBOUNCE_MS, xsrfToken } from \"@lattice/lattice/form/components/form-transport\";\nimport { ResolvedNodesProvider } from \"@lattice/lattice/form/components/resolved-nodes\";\nimport { useFormResolver } from \"@lattice/lattice/form/components/use-form-resolver\";\nimport { FormValuesProvider, useFormValues } from \"@lattice/lattice/form/components/values\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport { dispatchActionError } from \"../effects\";\nimport type { ActionResponse } from \"../effects\";\n\ntype FieldErrors = Record<string, string | undefined>;\n\ntype ActionFormProps = {\n  cancelLabel: string;\n  componentRef: string;\n  description?: string;\n  endpoint: string;\n  /** Extra payload merged into every request, e.g. a bulk action's selection. */\n  extraData?: Record<string, unknown>;\n  /** The form to render; null while a lazy schema is still being fetched. */\n  formNode: Node | null;\n  method: string;\n  onClose: () => void;\n  onSuccess: (response: ActionResponse) => void;\n  submitLabel: string;\n  title: string;\n};\n\nfunction jsonHeaders(componentRef: string, extra?: Record<string, string>): Record<string, string> {\n  return {\n    Accept: \"application/json\",\n    \"Content-Type\": \"application/json\",\n    \"X-Requested-With\": \"XMLHttpRequest\",\n    \"X-XSRF-TOKEN\": xsrfToken(),\n    ...withRefHeader(componentRef),\n    ...extra,\n  };\n}\n\n/**\n * Fetch a lazily-served form schema from the action endpoint while `enabled`,\n * so it can be prefilled per record. Returns null until it arrives.\n */\nexport function useLazyActionForm(\n  endpoint: string,\n  method: string,\n  componentRef: string,\n  enabled: boolean,\n): Node | null {\n  const [node, setNode] = useState<Node | null>(null);\n\n  useEffect(() => {\n    if (!enabled) {\n      setNode(null);\n\n      return;\n    }\n\n    const controller = new AbortController();\n\n    void fetch(endpoint, {\n      body: JSON.stringify({ _form: true }),\n      credentials: \"same-origin\",\n      headers: jsonHeaders(componentRef),\n      method: method.toUpperCase(),\n      signal: controller.signal,\n    })\n      .then((response) => (response.ok ? (response.json() as Promise<Node>) : null))\n      .then((fetched) => setNode(fetched))\n      .catch(() => {});\n\n    return () => controller.abort();\n  }, [enabled, endpoint, method, componentRef]);\n\n  return node;\n}\n\nfunction 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\nfunction ActionFormSkeleton() {\n  return (\n    <div className=\"space-y-4\" data-lattice-action-form-loading>\n      <div className=\"h-4 w-24 animate-pulse rounded bg-lt-muted\" />\n      <div className=\"h-10 w-full animate-pulse rounded bg-lt-muted\" />\n      <div className=\"h-10 w-full animate-pulse rounded bg-lt-muted\" />\n    </div>\n  );\n}\n\ntype CollectedFields = {\n  labels: Record<string, string>;\n  values: Record<string, unknown>;\n};\n\nfunction collectFields(formNode: Node): CollectedFields {\n  const labels: Record<string, string> = {};\n  const values: Record<string, unknown> = {};\n\n  walkFields(formNode.schema, (props) => {\n    if (!props.name) {\n      return;\n    }\n    if (props.label) {\n      labels[props.name] = props.label;\n    }\n    if (props.value !== undefined) {\n      values[props.name] = props.value;\n    }\n  });\n\n  return {\n    labels,\n    values: { ...values, ...(formNode.props?.state as Record<string, unknown> | undefined) },\n  };\n}\n\nfunction ActionFormBody({\n  cancelLabel,\n  componentRef,\n  endpoint,\n  extraData,\n  fieldLabels,\n  formNode,\n  method,\n  onClose,\n  onSuccess,\n  precognitive,\n  submitLabel,\n}: Omit<ActionFormProps, \"description\" | \"title\"> & {\n  fieldLabels: Record<string, string>;\n  formNode: Node;\n  precognitive: boolean;\n}) {\n  const { fallback, missingComponent, registry } = useRendererContext();\n  const values = useFormValues();\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const extraDataRef = useRef(extraData);\n  extraDataRef.current = extraData;\n  const resolvedNodes = useFormResolver(endpoint, componentRef, formNode.schema);\n\n  const [errors, setErrors] = useState<FieldErrors>({});\n  const [processing, setProcessing] = useState(false);\n  const timer = useRef<number | undefined>(undefined);\n\n  const request = useCallback(\n    (extraHeaders?: Record<string, string>): Promise<Response> =>\n      fetch(endpoint, {\n        body: JSON.stringify({ ...valuesRef.current, ...extraDataRef.current }),\n        credentials: \"same-origin\",\n        // fetch only upper-cases the standardized methods, leaving PATCH/DELETE as\n        // given; some servers reject a lower-case method line, so normalize it.\n        method: method.toUpperCase(),\n        headers: jsonHeaders(componentRef, extraHeaders),\n      }),\n    [componentRef, endpoint, method],\n  );\n\n  const clearErrors = useCallback((field: string) => {\n    setErrors((current) =>\n      current[field] === undefined ? current : { ...current, [field]: undefined },\n    );\n  }, []);\n\n  const validate = useCallback(\n    (field: string) => {\n      if (!precognitive) {\n        return;\n      }\n\n      window.clearTimeout(timer.current);\n      timer.current = window.setTimeout(() => {\n        void request({ Precognition: \"true\", \"Precognition-Validate-Only\": field })\n          .then(async (response) => {\n            if (response.status === 422) {\n              const body = (await response.json()) as { errors?: Record<string, string[]> };\n              setErrors((current) => ({ ...current, ...firstErrors(body.errors) }));\n\n              return;\n            }\n\n            clearErrors(field);\n          })\n          .catch(() => {});\n      }, FORM_DEBOUNCE_MS);\n    },\n    [clearErrors, precognitive, request],\n  );\n\n  const submit = useCallback(() => {\n    setProcessing(true);\n\n    void request()\n      .then(async (response) => {\n        if (response.status === 422) {\n          const body = (await response.json()) as { errors?: Record<string, string[]> };\n          setErrors(firstErrors(body.errors));\n\n          return;\n        }\n\n        if (!response.ok) {\n          dispatchActionError(new Error(`Action request failed with status ${response.status}`));\n\n          return;\n        }\n\n        onSuccess((await response.json()) as ActionResponse);\n      })\n      .catch((error: unknown) => dispatchActionError(error))\n      .finally(() => setProcessing(false));\n  }, [onSuccess, request]);\n\n  const context = useMemo(\n    () => ({\n      action: endpoint,\n      clearErrors,\n      componentRef,\n      errors,\n      fieldLabels,\n      precognitive,\n      processing,\n      validate,\n    }),\n    [clearErrors, componentRef, endpoint, errors, fieldLabels, precognitive, processing, validate],\n  );\n\n  return (\n    <FormProvider value={context}>\n      <form\n        className=\"flex flex-col gap-6\"\n        onSubmit={(event) => {\n          event.preventDefault();\n          submit();\n        }}\n      >\n        <ResolvedNodesProvider nodes={resolvedNodes}>\n          <Renderer\n            fallback={fallback}\n            missingComponent={missingComponent}\n            nodes={formNode.schema ?? []}\n            registry={registry}\n          />\n        </ResolvedNodesProvider>\n\n        <div className=\"flex justify-end gap-3\">\n          <Button\n            data-test=\"action-form-cancel\"\n            disabled={processing}\n            onClick={onClose}\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            {cancelLabel}\n          </Button>\n\n          <Button data-test=\"action-form-submit\" disabled={processing} type=\"submit\">\n            {processing && <Spinner />}\n            {submitLabel}\n          </Button>\n        </div>\n      </form>\n    </FormProvider>\n  );\n}\n\nfunction ActionFormContent({\n  formNode,\n  ...rest\n}: Omit<ActionFormProps, \"description\" | \"title\"> & { formNode: Node }) {\n  const precognitive = Boolean(formNode.props?.precognitive);\n  const { labels: fieldLabels, values: initialValues } = useMemo(\n    () => collectFields(formNode),\n    [formNode],\n  );\n\n  return (\n    <FormValuesProvider initial={initialValues}>\n      <ActionFormBody\n        fieldLabels={fieldLabels}\n        formNode={formNode}\n        precognitive={precognitive}\n        {...rest}\n      />\n    </FormValuesProvider>\n  );\n}\n\nexport function ActionForm({ description, formNode, onClose, title, ...rest }: ActionFormProps) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <Dialog.Root\n      open\n      onOpenChange={(open) => {\n        if (!open) {\n          onClose();\n        }\n      }}\n    >\n      <Dialog.Portal>\n        <Dialog.Overlay className=\"fixed inset-0 z-50 bg-black/50\" />\n        <Dialog.Content\n          {...(description ? {} : { \"aria-describedby\": undefined })}\n          className=\"fixed left-1/2 top-1/2 z-50 max-h-[min(680px,calc(100vh-2rem))] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lt border border-lt-border bg-lt-bg p-6 shadow-lg\"\n        >\n          <div className=\"flex items-start justify-between gap-4\">\n            <div className=\"grid gap-2\">\n              <Dialog.Title className=\"text-lg font-semibold leading-none tracking-tight\">\n                {title}\n              </Dialog.Title>\n\n              {description && (\n                <Dialog.Description className=\"text-sm text-lt-muted-fg\">\n                  {description}\n                </Dialog.Description>\n              )}\n            </div>\n\n            <Dialog.Close asChild>\n              <Button aria-label={t(\"a11y.close\", \"Close\")} size=\"icon\" variant=\"ghost\">\n                <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n              </Button>\n            </Dialog.Close>\n          </div>\n\n          <div className=\"mt-6\">\n            {formNode ? (\n              <ActionFormContent formNode={formNode} onClose={onClose} {...rest} />\n            ) : (\n              <ActionFormSkeleton />\n            )}\n          </div>\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n"],"mappings":"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"}

package/dist/action/components/action-group.d.ts

@@ -1,10 +1,3 @@
-import { RendererComponent } from '../../../../core/types';
-declare module '../../../../core/types' {
-    interface ComponentProps {
-        "action.group": {
-            label?: string;
-        };
-    }
-}
+import { RendererComponent } from '../../core/types';
 declare const ActionGroupComponent: RendererComponent<"action.group">;
 export default ActionGroupComponent;

package/dist/action/components/action-group.js

@@ -1,76 +1,34 @@
-import { getStringProp } from "../../core/props.js";
 import { Button } from "../../core/components/button.js";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Icon } from "../../icons/sprite.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { MoreHorizontal } from "lucide-react";
-import { createPortal } from "react-dom";
+import * as Popover from "@radix-ui/react-popover";
 //#region resources/js/action/components/action-group.tsx
 var ActionGroupComponent = ({ children, node }) => {
-	const label = getStringProp(node.props, "label", "Actions");
-	const [open, setOpen] = useState(false);
-	const [position, setPosition] = useState(null);
-	const buttonRef = useRef(null);
-	const menuRef = useRef(null);
-	const updatePosition = useCallback(() => {
-		const rect = buttonRef.current?.getBoundingClientRect();
-		if (!rect) return;
-		setPosition({
-			right: Math.max(8, window.innerWidth - rect.right),
-			top: rect.bottom + 8
-		});
-	}, []);
-	useEffect(() => {
-		if (!open) return;
-		updatePosition();
-		const closeWhenOutside = (event) => {
-			const target = event.target;
-			if (target instanceof Node && (buttonRef.current?.contains(target) || menuRef.current?.contains(target))) return;
-			setOpen(false);
-		};
-		const closeOnEscape = (event) => {
-			if (event.key === "Escape") setOpen(false);
-		};
-		window.addEventListener("resize", updatePosition);
-		window.addEventListener("scroll", updatePosition, true);
-		document.addEventListener("mousedown", closeWhenOutside);
-		document.addEventListener("keydown", closeOnEscape);
-		return () => {
-			window.removeEventListener("resize", updatePosition);
-			window.removeEventListener("scroll", updatePosition, true);
-			document.removeEventListener("mousedown", closeWhenOutside);
-			document.removeEventListener("keydown", closeOnEscape);
-		};
-	}, [open, updatePosition]);
-	const toggle = () => {
-		updatePosition();
-		setOpen((current) => !current);
-	};
-	const menu = open && position && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
-		ref: menuRef,
-		"aria-label": label,
-		className: "fixed z-50 grid min-w-40 gap-1 rounded-lt-sm border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-md [&>button]:w-full [&>button]:justify-start",
-		role: "menu",
-		style: position,
-		children
-	}), document.body) : null;
-	return /* @__PURE__ */ jsxs("div", {
+	const label = node.props.label;
+	return /* @__PURE__ */ jsx("div", {
 		className: "inline-flex",
 		"data-lattice-component": node.id,
-		children: [/* @__PURE__ */ jsx(Button, {
-			ref: buttonRef,
-			"aria-label": label,
-			"aria-expanded": open,
-			"aria-haspopup": "menu",
-			className: "size-8 text-lt-muted-fg shadow-none hover:text-lt-fg",
-			onClick: toggle,
-			size: "icon",
-			type: "button",
-			variant: "ghost",
-			children: /* @__PURE__ */ jsx(MoreHorizontal, {
-				"aria-hidden": "true",
-				className: "size-4"
+		children: /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				"aria-label": label,
+				className: "size-8 text-lt-muted-fg shadow-none hover:text-lt-fg",
+				size: "icon",
+				type: "button",
+				variant: "ghost",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "more-horizontal",
+					"aria-hidden": "true",
+					className: "size-lt-icon-md"
+				})
 			})
-		}), menu]
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+			align: "end",
+			"aria-label": label,
+			className: "z-50 grid min-w-40 gap-1 rounded-lt-sm border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-md [&>button]:w-full [&>button]:justify-start",
+			sideOffset: 8,
+			children
+		}) })] })
 	});
 };
 //#endregion

package/dist/action/components/action-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"action-group.js","names":[],"sources":["../../../resources/js/action/components/action-group.tsx"],"sourcesContent":["import { MoreHorizontal } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Button } from \"@lattice/lattice/core/components/button\";\nimport { getStringProp } from \"@lattice/lattice/core/props\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\n\ndeclare module \"@lattice/lattice/core/types\" {\n  interface ComponentProps {\n    \"action.group\": {\n      label?: string;\n    };\n  }\n}\n\nconst ActionGroupComponent: RendererComponent<\"action.group\"> = ({ children, node }) => {\n  const label = getStringProp(node.props, \"label\", \"Actions\");\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState<{ right: number; top: number } | null>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const updatePosition = useCallback(() => {\n    const rect = buttonRef.current?.getBoundingClientRect();\n\n    if (!rect) {\n      return;\n    }\n\n    setPosition({\n      right: Math.max(8, window.innerWidth - rect.right),\n      top: rect.bottom + 8,\n    });\n  }, []);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    updatePosition();\n\n    const closeWhenOutside = (event: MouseEvent): void => {\n      const target = event.target;\n\n      if (\n        target instanceof Node &&\n        (buttonRef.current?.contains(target) || menuRef.current?.contains(target))\n      ) {\n        return;\n      }\n\n      setOpen(false);\n    };\n\n    const closeOnEscape = (event: KeyboardEvent): void => {\n      if (event.key === \"Escape\") {\n        setOpen(false);\n      }\n    };\n\n    window.addEventListener(\"resize\", updatePosition);\n    window.addEventListener(\"scroll\", updatePosition, true);\n    document.addEventListener(\"mousedown\", closeWhenOutside);\n    document.addEventListener(\"keydown\", closeOnEscape);\n\n    return () => {\n      window.removeEventListener(\"resize\", updatePosition);\n      window.removeEventListener(\"scroll\", updatePosition, true);\n      document.removeEventListener(\"mousedown\", closeWhenOutside);\n      document.removeEventListener(\"keydown\", closeOnEscape);\n    };\n  }, [open, updatePosition]);\n\n  const toggle = (): void => {\n    updatePosition();\n    setOpen((current) => !current);\n  };\n\n  const menu =\n    open && position && typeof document !== \"undefined\"\n      ? createPortal(\n          <div\n            ref={menuRef}\n            aria-label={label}\n            className=\"fixed z-50 grid min-w-40 gap-1 rounded-lt-sm border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-md [&>button]:w-full [&>button]:justify-start\"\n            role=\"menu\"\n            style={position}\n          >\n            {children}\n          </div>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <div className=\"inline-flex\" data-lattice-component={node.id}>\n      <Button\n        ref={buttonRef}\n        aria-label={label}\n        aria-expanded={open}\n        aria-haspopup=\"menu\"\n        className=\"size-8 text-lt-muted-fg shadow-none hover:text-lt-fg\"\n        onClick={toggle}\n        size=\"icon\"\n        type=\"button\"\n        variant=\"ghost\"\n      >\n        <MoreHorizontal aria-hidden=\"true\" className=\"size-4\" />\n      </Button>\n\n      {menu}\n    </div>\n  );\n};\n\nexport default ActionGroupComponent;\n"],"mappings":";;;;;;;AAeA,IAAM,wBAA2D,EAAE,UAAU,WAAW;CACtF,MAAM,QAAQ,cAAc,KAAK,OAAO,SAAS,SAAS;CAC1D,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,UAAU,eAAe,SAAgD,IAAI;CACpF,MAAM,YAAY,OAA0B,IAAI;CAChD,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,iBAAiB,kBAAkB;EACvC,MAAM,OAAO,UAAU,SAAS,sBAAsB;EAEtD,IAAI,CAAC,MACH;EAGF,YAAY;GACV,OAAO,KAAK,IAAI,GAAG,OAAO,aAAa,KAAK,KAAK;GACjD,KAAK,KAAK,SAAS;EACrB,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,IAAI,CAAC,MACH;EAGF,eAAe;EAEf,MAAM,oBAAoB,UAA4B;GACpD,MAAM,SAAS,MAAM;GAErB,IACE,kBAAkB,SACjB,UAAU,SAAS,SAAS,MAAM,KAAK,QAAQ,SAAS,SAAS,MAAM,IAExE;GAGF,QAAQ,KAAK;EACf;EAEA,MAAM,iBAAiB,UAA+B;GACpD,IAAI,MAAM,QAAQ,UAChB,QAAQ,KAAK;EAEjB;EAEA,OAAO,iBAAiB,UAAU,cAAc;EAChD,OAAO,iBAAiB,UAAU,gBAAgB,IAAI;EACtD,SAAS,iBAAiB,aAAa,gBAAgB;EACvD,SAAS,iBAAiB,WAAW,aAAa;EAElD,aAAa;GACX,OAAO,oBAAoB,UAAU,cAAc;GACnD,OAAO,oBAAoB,UAAU,gBAAgB,IAAI;GACzD,SAAS,oBAAoB,aAAa,gBAAgB;GAC1D,SAAS,oBAAoB,WAAW,aAAa;EACvD;CACF,GAAG,CAAC,MAAM,cAAc,CAAC;CAEzB,MAAM,eAAqB;EACzB,eAAe;EACf,SAAS,YAAY,CAAC,OAAO;CAC/B;CAEA,MAAM,OACJ,QAAQ,YAAY,OAAO,aAAa,cACpC,aACE,oBAAC,OAAD;EACE,KAAK;EACL,cAAY;EACZ,WAAU;EACV,MAAK;EACL,OAAO;EAEN;CACE,CAAA,GACL,SAAS,IACX,IACA;CAEN,OACE,qBAAC,OAAD;EAAK,WAAU;EAAc,0BAAwB,KAAK;YAA1D,CACE,oBAAC,QAAD;GACE,KAAK;GACL,cAAY;GACZ,iBAAe;GACf,iBAAc;GACd,WAAU;GACV,SAAS;GACT,MAAK;GACL,MAAK;GACL,SAAQ;aAER,oBAAC,gBAAD;IAAgB,eAAY;IAAO,WAAU;GAAU,CAAA;EACjD,CAAA,GAEP,IACE;;AAET"}
+{"version":3,"file":"action-group.js","names":[],"sources":["../../../resources/js/action/components/action-group.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport * as Popover from \"@radix-ui/react-popover\";\nimport { Button } from \"@lattice/lattice/core/components/button\";\nimport type { RendererComponent } from \"@lattice/lattice/core/types\";\n\nconst ActionGroupComponent: RendererComponent<\"action.group\"> = ({ children, node }) => {\n  const label = node.props.label;\n\n  return (\n    <div className=\"inline-flex\" data-lattice-component={node.id}>\n      <Popover.Root>\n        <Popover.Trigger asChild>\n          <Button\n            aria-label={label}\n            className=\"size-8 text-lt-muted-fg shadow-none hover:text-lt-fg\"\n            size=\"icon\"\n            type=\"button\"\n            variant=\"ghost\"\n          >\n            <Icon name=\"more-horizontal\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n          </Button>\n        </Popover.Trigger>\n\n        <Popover.Portal>\n          <Popover.Content\n            align=\"end\"\n            aria-label={label}\n            className=\"z-50 grid min-w-40 gap-1 rounded-lt-sm border border-lt-border bg-lt-popover p-1 text-lt-popover-fg shadow-md [&>button]:w-full [&>button]:justify-start\"\n            sideOffset={8}\n          >\n            {children}\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    </div>\n  );\n};\n\nexport default ActionGroupComponent;\n"],"mappings":";;;;;AAKA,IAAM,wBAA2D,EAAE,UAAU,WAAW;CACtF,MAAM,QAAQ,KAAK,MAAM;CAEzB,OACE,oBAAC,OAAD;EAAK,WAAU;EAAc,0BAAwB,KAAK;YACxD,qBAAC,QAAQ,MAAT,EAAA,UAAA,CACE,oBAAC,QAAQ,SAAT;GAAiB,SAAA;aACf,oBAAC,QAAD;IACE,cAAY;IACZ,WAAU;IACV,MAAK;IACL,MAAK;IACL,SAAQ;cAER,oBAAC,MAAD;KAAM,MAAK;KAAkB,eAAY;KAAO,WAAU;IAAmB,CAAA;GACvE,CAAA;EACO,CAAA,GAEjB,oBAAC,QAAQ,QAAT,EAAA,UACE,oBAAC,QAAQ,SAAT;GACE,OAAM;GACN,cAAY;GACZ,WAAU;GACV,YAAY;GAEX;EACc,CAAA,EACH,CAAA,CACJ,EAAA,CAAA;CACX,CAAA;AAET"}

package/dist/action/components/action.d.ts

@@ -1,26 +1,3 @@
-import { Method } from '@inertiajs/core';
-import { RendererComponent } from '../../../../core/types';
-import { ActionEffect } from '../effects';
-type ActionVariant = "default" | "destructive" | "ghost" | "link" | "outline" | "secondary";
-type ActionConfirmation = {
-    cancelLabel?: string;
-    confirmLabel?: string;
-    description?: string;
-    title?: string;
-};
-declare module '../../../../core/types' {
-    interface ComponentProps {
-        action: {
-            confirmation?: ActionConfirmation;
-            effects?: ActionEffect[];
-            endpoint?: string;
-            icon?: string;
-            label?: string;
-            ref?: string;
-            method?: Method;
-            variant?: ActionVariant;
-        };
-    }
-}
+import { RendererComponent } from '../../core/types';
 declare const ActionComponent: RendererComponent<"action">;
 export default ActionComponent;

package/dist/action/components/action.js

@@ -1,39 +1,30 @@
 import { withRefHeader } from "../../core/component-ref.js";
-import { getStringProp } from "../../core/props.js";
 import { Button } from "../../core/components/button.js";
+import { IconRenderer } from "../../icons/icon-renderer.js";
 import { Spinner } from "../../core/components/spinner.js";
 import { ConfirmDialog } from "../../core/components/confirm-dialog.js";
-import { IconRenderer } from "../../icons/icon-renderer.js";
 import { dispatchActionEffects, dispatchActionError, getActionEffects } from "../effects.js";
+import { ActionForm, useLazyActionForm } from "./action-form.js";
 import { useState } from "react";
 import { router, useHttp } from "@inertiajs/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/action/components/action.tsx
-var actionMethods = [
-	"delete",
-	"get",
-	"patch",
-	"post",
-	"put"
-];
-function getActionMethod(props) {
-	const method = getStringProp(props, "method", "post");
-	return actionMethods.includes(method) ? method : "post";
-}
-function getConfirmation(props) {
-	const confirmation = props?.confirmation;
-	if (typeof confirmation !== "object" || confirmation === null || Array.isArray(confirmation)) return null;
-	return confirmation;
-}
 var ActionComponent = ({ node }) => {
-	const endpoint = getStringProp(node.props, "endpoint");
-	const icon = getStringProp(node.props, "icon");
-	const label = getStringProp(node.props, "label", "Run action");
-	const componentRef = getStringProp(node.props, "ref");
-	const method = getActionMethod(node.props);
+	const endpoint = node.props.endpoint ?? "";
+	const icon = node.props.icon;
+	const label = node.props.label ?? "Run action";
+	const componentRef = node.props.ref ?? "";
+	const method = node.props.method ?? "post";
 	const http = useHttp({});
 	const [isConfirming, setIsConfirming] = useState(false);
-	const confirmation = getConfirmation(node.props);
+	const [isFilling, setIsFilling] = useState(false);
+	const confirmation = node.props.confirmation;
+	const variant = node.props.variant ?? "default";
+	const inlineForm = node.props.form;
+	const lazyForm = node.props.lazyForm === true;
+	const hasForm = Boolean(inlineForm) || lazyForm;
+	const lazyNode = useLazyActionForm(endpoint, method, componentRef, isFilling && lazyForm);
+	const formNode = lazyForm ? lazyNode : inlineForm;
 	const submit = async () => {
 		if (!endpoint) return;
 		try {
@@ -43,13 +34,17 @@ var ActionComponent = ({ node }) => {
 				return;
 			}
 			const responseEffects = getActionEffects((await http[method](endpoint, { headers: withRefHeader(componentRef) })).effects);
-			dispatchActionEffects(responseEffects.length > 0 ? responseEffects : getActionEffects(node.props?.effects));
+			dispatchActionEffects(responseEffects.length > 0 ? responseEffects : getActionEffects(node.props.effects));
 			setIsConfirming(false);
 		} catch (error) {
 			dispatchActionError(error);
 		}
 	};
 	const requestSubmit = () => {
+		if (hasForm) {
+			setIsFilling(true);
+			return;
+		}
 		if (confirmation) {
 			setIsConfirming(true);
 			return;
@@ -59,27 +54,47 @@ var ActionComponent = ({ node }) => {
 	const confirmationTitle = confirmation?.title ?? label;
 	const confirmationConfirmLabel = confirmation?.confirmLabel ?? label;
 	const confirmationCancelLabel = confirmation?.cancelLabel ?? "Cancel";
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
-		"data-lattice-component": node.id,
-		disabled: http.processing || !endpoint,
-		onClick: requestSubmit,
-		type: "button",
-		variant: node.props?.variant ?? "default",
-		children: [http.processing ? /* @__PURE__ */ jsx(Spinner, {}) : icon && /* @__PURE__ */ jsx(IconRenderer, {
-			className: "size-4",
-			icon
-		}), label]
-	}), isConfirming && confirmation && /* @__PURE__ */ jsx(ConfirmDialog, {
-		title: confirmationTitle,
-		description: confirmation.description,
-		confirmLabel: confirmationConfirmLabel,
-		cancelLabel: confirmationCancelLabel,
-		confirmVariant: node.props?.variant ?? "default",
-		processing: http.processing,
-		confirmDisabled: !endpoint,
-		onConfirm: () => void submit(),
-		onCancel: () => setIsConfirming(false)
-	})] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(Button, {
+			"data-lattice-component": node.id,
+			"data-test": `action-${label.toLowerCase().replace(/\s+/g, "-")}`,
+			disabled: http.processing || !endpoint,
+			onClick: requestSubmit,
+			type: "button",
+			variant,
+			children: [http.processing ? /* @__PURE__ */ jsx(Spinner, {}) : icon && /* @__PURE__ */ jsx(IconRenderer, {
+				className: "size-lt-icon-md",
+				icon
+			}), label]
+		}),
+		isConfirming && confirmation && /* @__PURE__ */ jsx(ConfirmDialog, {
+			title: confirmationTitle,
+			description: confirmation.description ?? void 0,
+			confirmLabel: confirmationConfirmLabel,
+			cancelLabel: confirmationCancelLabel,
+			confirmVariant: variant,
+			processing: http.processing,
+			confirmDisabled: !endpoint,
+			onConfirm: () => void submit(),
+			onCancel: () => setIsConfirming(false)
+		}),
+		isFilling && hasForm && /* @__PURE__ */ jsx(ActionForm, {
+			cancelLabel: confirmationCancelLabel,
+			componentRef,
+			description: confirmation?.description ?? void 0,
+			endpoint,
+			formNode,
+			method,
+			onClose: () => setIsFilling(false),
+			onSuccess: (response) => {
+				const responseEffects = getActionEffects(response.effects);
+				dispatchActionEffects(responseEffects.length > 0 ? responseEffects : getActionEffects(node.props.effects));
+				setIsFilling(false);
+			},
+			submitLabel: confirmationConfirmLabel,
+			title: confirmationTitle
+		})
+	] });
 };
 //#endregion
 export { ActionComponent as default };