@webstudio-is/sdk-components-react-remix 0.98.0 → 0.99.0

package/lib/components.js

@@ -40,15 +40,11 @@ var RichTextLink = wrapLinkComponent(BaseLink2);
 import {
   forwardRef as forwardRef2,
   useRef,
-  useEffect,
-  useContext
+  useEffect
 } from "react";
 import { useFetcher } from "@remix-run/react";
 import { formIdFieldName } from "@webstudio-is/form-handlers";
-import {
-  ReactSdkContext,
-  getInstanceIdFromComponentProps as getInstanceIdFromComponentProps2
-} from "@webstudio-is/react-sdk";
+import { getInstanceIdFromComponentProps as getInstanceIdFromComponentProps2 } from "@webstudio-is/react-sdk";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var useOnFetchEnd = (fetcher, handler) => {
   const latestHandler = useRef(handler);
@@ -61,13 +57,20 @@ var useOnFetchEnd = (fetcher, handler) => {
     prevFetcher.current = fetcher;
   }, [fetcher]);
 };
-var Form = forwardRef2(({ children, action, method, state = "initial", ...rest }, ref) => {
-  const { setBoundDataSourceValue } = useContext(ReactSdkContext);
+var Form = forwardRef2((props, ref) => {
+  const {
+    children,
+    action,
+    method,
+    state = "initial",
+    onStateChange,
+    ...rest
+  } = props;
   const fetcher = useFetcher();
   const instanceId = getInstanceIdFromComponentProps2(rest);
   useOnFetchEnd(fetcher, (data) => {
     const state2 = data?.success === true ? "success" : "error";
-    setBoundDataSourceValue(instanceId, "state", state2);
+    onStateChange?.(state2);
   });
   return /* @__PURE__ */ jsxs(fetcher.Form, { ...rest, method: "post", "data-state": state, ref, children: [
     /* @__PURE__ */ jsx2("input", { type: "hidden", name: formIdFieldName, value: instanceId }),

package/lib/metas.js

@@ -625,6 +625,13 @@ var meta = {
           type: "dataSource",
           name: "state",
           dataSourceName: "formState"
+        },
+        {
+          type: "action",
+          name: "onStateChange",
+          value: [
+            { type: "execute", args: ["state"], code: `formState = state` }
+          ]
         }
       ],
       children: [

package/lib/types/form.d.ts

@@ -4,7 +4,8 @@ export declare const defaultTag = "form";
 type State = "initial" | "success" | "error";
 export declare const Form: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLFormElement> & import("react").FormHTMLAttributes<HTMLFormElement> & {
     /** Use this property to reveal the Success and Error states on the canvas so they can be styled. The Initial state is displayed when the page first opens. The Success and Error states are displayed depending on whether the Form submits successfully or unsuccessfully. */
-    state?: State | undefined;
+    state: State;
     encType?: FormProps["encType"];
+    onStateChange?: ((state: State) => void) | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-remix",
-  "version": "0.98.0",
+  "version": "0.99.0",
   "description": "Webstudio components for Remix",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -38,10 +38,10 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@webstudio-is/form-handlers": "^0.98.0",
-    "@webstudio-is/icons": "^0.98.0",
-    "@webstudio-is/react-sdk": "^0.98.0",
-    "@webstudio-is/sdk-components-react": "^0.98.0"
+    "@webstudio-is/form-handlers": "^0.99.0",
+    "@webstudio-is/icons": "^0.99.0",
+    "@webstudio-is/react-sdk": "^0.99.0",
+    "@webstudio-is/sdk-components-react": "^0.99.0"
   },
   "devDependencies": {
     "@remix-run/react": "^1.19.2",
@@ -50,7 +50,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.2.2",
-    "@webstudio-is/generate-arg-types": "^0.98.0",
+    "@webstudio-is/generate-arg-types": "^0.99.0",
     "@webstudio-is/tsconfig": "^1.0.7"
   },
   "scripts": {