@webstudio-is/sdk-components-react-remix 0.79.0 → 0.81.0

package/lib/__generated__/form.props.js

@@ -322,7 +322,16 @@ const props = {
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },
   draggable: { required: false, control: "boolean", type: "boolean" },
-  encType: { required: false, control: "text", type: "string" },
+  encType: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: [
+      "application/x-www-form-urlencoded",
+      "multipart/form-data",
+      "text/plain"
+    ]
+  },
   hidden: { required: false, control: "boolean", type: "boolean" },
   id: { required: false, control: "text", type: "string" },
   inputMode: {

package/lib/cjs/__generated__/form.props.js

@@ -345,7 +345,16 @@ const props = {
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },
   draggable: { required: false, control: "boolean", type: "boolean" },
-  encType: { required: false, control: "text", type: "string" },
+  encType: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: [
+      "application/x-www-form-urlencoded",
+      "multipart/form-data",
+      "text/plain"
+    ]
+  },
   hidden: { required: false, control: "boolean", type: "boolean" },
   id: { required: false, control: "text", type: "string" },
   inputMode: {

package/lib/cjs/form.js

@@ -40,12 +40,12 @@ const useOnFetchEnd = (fetcher, handler) => {
   }, [fetcher]);
 };
 const Form = (0, import_react.forwardRef)(({ children, action, method, state = "initial", ...rest }, ref) => {
-  const { setDataSourceValue } = (0, import_react.useContext)(import_react_sdk.ReactSdkContext);
+  const { setBoundDataSourceValue } = (0, import_react.useContext)(import_react_sdk.ReactSdkContext);
   const fetcher = (0, import_react2.useFetcher)();
   const instanceId = (0, import_react_sdk.getInstanceIdFromComponentProps)(rest);
   useOnFetchEnd(fetcher, (data) => {
     const state2 = data?.success === true ? "success" : "error";
-    setDataSourceValue(instanceId, "state", state2);
+    setBoundDataSourceValue(instanceId, "state", state2);
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(fetcher.Form, { ...rest, method: "post", "data-state": state, ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "hidden", name: import_form_handlers.formIdFieldName, value: instanceId }),

package/lib/cjs/form.ws.js

@@ -150,5 +150,5 @@ const meta = {
 };
 const propsMeta = {
   props: import_form.props,
-  initialProps: ["state"]
+  initialProps: ["id", "state"]
 };

package/lib/cjs/link.ws.js

@@ -33,5 +33,5 @@ const propsMeta = {
       required: false
     }
   },
-  initialProps: ["href", "target", "prefetch"]
+  initialProps: ["id", "href", "target", "prefetch"]
 };

package/lib/form.js

@@ -24,12 +24,12 @@ const useOnFetchEnd = (fetcher, handler) => {
   }, [fetcher]);
 };
 const Form = forwardRef(({ children, action, method, state = "initial", ...rest }, ref) => {
-  const { setDataSourceValue } = useContext(ReactSdkContext);
+  const { setBoundDataSourceValue } = useContext(ReactSdkContext);
   const fetcher = useFetcher();
   const instanceId = getInstanceIdFromComponentProps(rest);
   useOnFetchEnd(fetcher, (data) => {
     const state2 = data?.success === true ? "success" : "error";
-    setDataSourceValue(instanceId, "state", state2);
+    setBoundDataSourceValue(instanceId, "state", state2);
   });
   return /* @__PURE__ */ jsxs(fetcher.Form, { ...rest, method: "post", "data-state": state, ref, children: [
     /* @__PURE__ */ jsx("input", { type: "hidden", name: formIdFieldName, value: instanceId }),

package/lib/form.ws.js

@@ -128,7 +128,7 @@ const meta = {
 };
 const propsMeta = {
   props,
-  initialProps: ["state"]
+  initialProps: ["id", "state"]
 };
 export {
   meta,

package/lib/link.ws.js

@@ -9,7 +9,7 @@ const propsMeta = {
       required: false
     }
   },
-  initialProps: ["href", "target", "prefetch"]
+  initialProps: ["id", "href", "target", "prefetch"]
 };
 export {
   Link as meta,

package/lib/types/form.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { type FormProps } from "@remix-run/react";
 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> & {
     state?: State | undefined;
+    encType?: FormProps["encType"];
 }, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-remix",
-  "version": "0.79.0",
+  "version": "0.81.0",
   "description": "Webstudio components for Remix",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -33,19 +33,19 @@
     }
   },
   "peerDependencies": {
-    "@remix-run/react": "^1.15.0",
+    "@remix-run/react": "^1.18.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@webstudio-is/form-handlers": "^0.79.0",
-    "@webstudio-is/generate-arg-types": "^0.79.0",
-    "@webstudio-is/icons": "^0.79.0",
-    "@webstudio-is/react-sdk": "^0.79.0",
-    "@webstudio-is/sdk-components-react": "^0.79.0"
+    "@webstudio-is/form-handlers": "^0.81.0",
+    "@webstudio-is/generate-arg-types": "^0.81.0",
+    "@webstudio-is/icons": "^0.81.0",
+    "@webstudio-is/react-sdk": "^0.81.0",
+    "@webstudio-is/sdk-components-react": "^0.81.0"
   },
   "devDependencies": {
-    "@remix-run/react": "^1.15.0",
+    "@remix-run/react": "^1.18.1",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
     "react": "^18.2.0",

package/src/__generated__/form.props.ts

@@ -368,7 +368,16 @@ export const props: Record<string, PropMeta> = {
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },
   draggable: { required: false, control: "boolean", type: "boolean" },
-  encType: { required: false, control: "text", type: "string" },
+  encType: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: [
+      "application/x-www-form-urlencoded",
+      "multipart/form-data",
+      "text/plain",
+    ],
+  },
   hidden: { required: false, control: "boolean", type: "boolean" },
   id: { required: false, control: "text", type: "string" },
   inputMode: {

package/src/form.tsx

@@ -6,7 +6,7 @@ import {
   useEffect,
   useContext,
 } from "react";
-import { useFetcher, type Fetcher } from "@remix-run/react";
+import { useFetcher, type Fetcher, type FormProps } from "@remix-run/react";
 import { formIdFieldName } from "@webstudio-is/form-handlers";
 import {
   ReactSdkContext,
@@ -39,9 +39,12 @@ type State = "initial" | "success" | "error";
 
 export const Form = forwardRef<
   ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag> & { state?: State }
+  ComponentProps<typeof defaultTag> & {
+    state?: State;
+    encType?: FormProps["encType"];
+  }
 >(({ children, action, method, state = "initial", ...rest }, ref) => {
-  const { setDataSourceValue } = useContext(ReactSdkContext);
+  const { setBoundDataSourceValue } = useContext(ReactSdkContext);
 
   const fetcher = useFetcher();
 
@@ -49,7 +52,7 @@ export const Form = forwardRef<
 
   useOnFetchEnd(fetcher, (data) => {
     const state: State = data?.success === true ? "success" : "error";
-    setDataSourceValue(instanceId, "state", state);
+    setBoundDataSourceValue(instanceId, "state", state);
   });
 
   return (

package/src/form.ws.tsx

@@ -137,5 +137,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["state"],
+  initialProps: ["id", "state"],
 };

package/src/link.ws.ts

@@ -12,5 +12,5 @@ export const propsMeta: WsComponentPropsMeta = {
       required: false,
     },
   },
-  initialProps: ["href", "target", "prefetch"],
+  initialProps: ["id", "href", "target", "prefetch"],
 };