@mittwald/flow-remote-react-renderer 0.2.0-alpha.253 → 0.2.0-alpha.254

package/dist/js/components/Form.mjs

@@ -1,21 +1,36 @@
 "use client"
 /* */
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { getFormDataObjectFromEvent, getFormDataObject } from "./lib/getFormDataObject.mjs";
-const Form = forwardRef((props, ref) => {
+import "react";
+import { prepareFormData } from "./lib/prepareFormData.mjs";
+const Form = (props) => {
   const {
-    action: actionFromProps,
+    action: onActionFromProps,
     onSubmit: onSubmitFromProps,
+    ref,
     ...rest
   } = props;
-  const action = typeof actionFromProps === "function" ? (formData) => actionFromProps(getFormDataObject(formData)) : actionFromProps;
-  const onSubmit = onSubmitFromProps ? (e) => {
-    e.preventDefault();
-    onSubmitFromProps(getFormDataObjectFromEvent(e));
-  } : void 0;
-  return /* @__PURE__ */ jsx("form", { ref, ...rest, action, onSubmit });
-});
+  const onSubmit = async (event) => {
+    event.preventDefault();
+    const resolvedData = await prepareFormData(
+      new FormData(event.currentTarget)
+    );
+    await (onSubmitFromProps == null ? void 0 : onSubmitFromProps(resolvedData));
+  };
+  const onAction = async (formData) => {
+    const resolvedFormData = await prepareFormData(formData);
+    await (onActionFromProps == null ? void 0 : onActionFromProps(resolvedFormData));
+  };
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      ...rest,
+      ref,
+      action: onActionFromProps ? onAction : void 0,
+      onSubmit: onSubmitFromProps ? onSubmit : void 0
+    }
+  );
+};
 export {
   Form
 };

package/dist/js/components/Form.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mjs","sources":["../../../src/components/Form.tsx"],"sourcesContent":["import {\n  type FC,\n  type FormEvent,\n  type FormHTMLAttributes,\n  type PropsWithChildren,\n} from \"react\";\nimport React, { forwardRef } from \"react\";\nimport {\n  getFormDataObject,\n  getFormDataObjectFromEvent,\n} from \"@/components/lib/getFormDataObject\";\n\ntype FormProps = Pick<FormHTMLAttributes<HTMLFormElement>, \"action\"> & {\n  onSubmit?: (data: Record<string, unknown>) => void;\n} & PropsWithChildren;\n\nexport const Form: FC = forwardRef<HTMLFormElement, FormProps>((props, ref) => {\n  const {\n    action: actionFromProps,\n    onSubmit: onSubmitFromProps,\n    ...rest\n  } = props;\n\n  const action =\n    typeof actionFromProps === \"function\"\n      ? (formData: FormData) =>\n          actionFromProps(getFormDataObject(formData) as unknown as FormData)\n      : actionFromProps;\n\n  const onSubmit = onSubmitFromProps\n    ? (e: FormEvent<HTMLFormElement>) => {\n        e.preventDefault();\n        onSubmitFromProps(getFormDataObjectFromEvent(e));\n      }\n    : undefined;\n\n  return <form ref={ref} {...rest} action={action} onSubmit={onSubmit} />;\n});\n"],"names":[],"mappings":";;;AAgBO,MAAM,OAAW,WAAuC,CAAC,OAAO,QAAQ;AACvE,QAAA;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD;AAEE,QAAA,SACJ,OAAO,oBAAoB,aACvB,CAAC,aACC,gBAAgB,kBAAkB,QAAQ,CAAwB,IACpE;AAEA,QAAA,WAAW,oBACb,CAAC,MAAkC;AACjC,MAAE,eAAe;AACC,sBAAA,2BAA2B,CAAC,CAAC;AAAA,EAAA,IAEjD;AAEJ,6BAAQ,QAAK,EAAA,KAAW,GAAG,MAAM,QAAgB,UAAoB;AACvE,CAAC;"}
+{"version":3,"file":"Form.mjs","sources":["../../../src/components/Form.tsx"],"sourcesContent":["import {\n  type FC,\n  type FormEvent,\n  type PropsWithChildren,\n  type RefObject,\n} from \"react\";\nimport React from \"react\";\nimport { prepareFormData } from \"@/components/lib/prepareFormData\";\n\ntype FormProps = {\n  action?: (data: FormData) => void | Promise<void>;\n  onSubmit?: (data: FormData) => void | Promise<void>;\n  ref?: RefObject<HTMLFormElement>;\n} & PropsWithChildren;\n\nexport const Form: FC<FormProps> = (props) => {\n  const {\n    action: onActionFromProps,\n    onSubmit: onSubmitFromProps,\n    ref,\n    ...rest\n  } = props;\n\n  const onSubmit = async (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const resolvedData = await prepareFormData(\n      new FormData(event.currentTarget),\n    );\n    await onSubmitFromProps?.(resolvedData);\n  };\n\n  const onAction = async (formData: FormData) => {\n    const resolvedFormData = await prepareFormData(formData);\n    await onActionFromProps?.(resolvedFormData);\n  };\n\n  return (\n    <form\n      {...rest}\n      ref={ref}\n      action={onActionFromProps ? onAction : undefined}\n      onSubmit={onSubmitFromProps ? onSubmit : undefined}\n    />\n  );\n};\n"],"names":[],"mappings":";;;AAea,MAAA,OAAsB,CAAC,UAAU;AACtC,QAAA;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EAAA,IACD;AAEE,QAAA,WAAW,OAAO,UAAsC;AAC5D,UAAM,eAAe;AACrB,UAAM,eAAe,MAAM;AAAA,MACzB,IAAI,SAAS,MAAM,aAAa;AAAA,IAClC;AACA,WAAM,uDAAoB;AAAA,EAC5B;AAEM,QAAA,WAAW,OAAO,aAAuB;AACvC,UAAA,mBAAmB,MAAM,gBAAgB,QAAQ;AACvD,WAAM,uDAAoB;AAAA,EAC5B;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,QAAQ,oBAAoB,WAAW;AAAA,MACvC,UAAU,oBAAoB,WAAW;AAAA,IAAA;AAAA,EAC3C;AAEJ;"}

package/dist/js/components/lib/prepareFormData.mjs

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import { addAwaitedArrayBuffer } from "@mittwald/flow-core";
+const prepareFormData = async (formData) => {
+  const preparedFormData = new FormData();
+  for (const [fieldName, value] of formData) {
+    const preparedValue = value;
+    if (preparedValue instanceof File) {
+      if (!preparedValue.name || preparedValue.size <= 0) {
+        break;
+      }
+      await addAwaitedArrayBuffer(preparedValue);
+    }
+    if (preparedFormData.has(fieldName)) {
+      preparedFormData.append(fieldName, preparedValue);
+    } else {
+      preparedFormData.set(fieldName, preparedValue);
+    }
+  }
+  return preparedFormData;
+};
+export {
+  prepareFormData
+};
+//# sourceMappingURL=prepareFormData.mjs.map

package/dist/js/components/lib/prepareFormData.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"prepareFormData.mjs","sources":["../../../../src/components/lib/prepareFormData.ts"],"sourcesContent":["import { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\n\nexport const prepareFormData = async (\n  formData: FormData,\n): Promise<FormData> => {\n  const preparedFormData = new FormData();\n  for (const [fieldName, value] of formData) {\n    const preparedValue = value;\n    if (preparedValue instanceof File) {\n      if (!preparedValue.name || preparedValue.size <= 0) {\n        break;\n      }\n\n      await addAwaitedArrayBuffer(preparedValue);\n    }\n\n    if (preparedFormData.has(fieldName)) {\n      preparedFormData.append(fieldName, preparedValue);\n    } else {\n      preparedFormData.set(fieldName, preparedValue);\n    }\n  }\n\n  return preparedFormData;\n};\n"],"names":[],"mappings":";AAEa,MAAA,kBAAkB,OAC7B,aACsB;AAChB,QAAA,mBAAmB,IAAI,SAAS;AACtC,aAAW,CAAC,WAAW,KAAK,KAAK,UAAU;AACzC,UAAM,gBAAgB;AACtB,QAAI,yBAAyB,MAAM;AACjC,UAAI,CAAC,cAAc,QAAQ,cAAc,QAAQ,GAAG;AAClD;AAAA,MAAA;AAGF,YAAM,sBAAsB,aAAa;AAAA,IAAA;AAGvC,QAAA,iBAAiB,IAAI,SAAS,GAAG;AAClB,uBAAA,OAAO,WAAW,aAAa;AAAA,IAAA,OAC3C;AACY,uBAAA,IAAI,WAAW,aAAa;AAAA,IAAA;AAAA,EAC/C;AAGK,SAAA;AACT;"}

package/dist/types/components/Form.d.ts

@@ -1,3 +1,9 @@
-import { FC } from 'react';
-export declare const Form: FC;
+import { FC, PropsWithChildren, RefObject } from 'react';
+type FormProps = {
+    action?: (data: FormData) => void | Promise<void>;
+    onSubmit?: (data: FormData) => void | Promise<void>;
+    ref?: RefObject<HTMLFormElement>;
+} & PropsWithChildren;
+export declare const Form: FC<FormProps>;
+export {};
 //# sourceMappingURL=Form.d.ts.map

package/dist/types/components/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AAWf,eAAO,MAAM,IAAI,EAAE,EAqBjB,CAAC"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EAEP,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,KAAK,SAAS,GAAG;IACf,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,GAAG,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;CAClC,GAAG,iBAAiB,CAAC;AAEtB,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA6B9B,CAAC"}

package/dist/types/components/lib/prepareFormData.d.ts

@@ -0,0 +1,2 @@
+export declare const prepareFormData: (formData: FormData) => Promise<FormData>;
+//# sourceMappingURL=prepareFormData.d.ts.map

package/dist/types/components/lib/prepareFormData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prepareFormData.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/prepareFormData.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,GAC1B,UAAU,QAAQ,KACjB,OAAO,CAAC,QAAQ,CAoBlB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-remote-react-renderer",
-  "version": "0.2.0-alpha.253",
+  "version": "0.2.0-alpha.254",
   "type": "module",
   "description": "React rendering for Flow Remote Elements",
   "homepage": "https://mittwald.github.io/flow",
@@ -28,9 +28,10 @@
     "test:compile": "tsc --noEmit"
   },
   "dependencies": {
-    "@mittwald/ext-bridge": "0.2.0-alpha.253",
-    "@mittwald/flow-remote-core": "0.2.0-alpha.253",
-    "@mittwald/flow-remote-elements": "0.2.0-alpha.253",
+    "@mittwald/ext-bridge": "0.2.0-alpha.254",
+    "@mittwald/flow-core": "",
+    "@mittwald/flow-remote-core": "0.2.0-alpha.254",
+    "@mittwald/flow-remote-elements": "0.2.0-alpha.254",
     "@mittwald/react-use-promise": "^3.0.4",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
     "@types/react": "^19.1.6",
@@ -39,7 +40,8 @@
     "remeda": "^2.22.3"
   },
   "devDependencies": {
-    "@mittwald/flow-react-components": "0.2.0-alpha.253",
+    "@mittwald/flow-core": "",
+    "@mittwald/flow-react-components": "0.2.0-alpha.254",
     "@mittwald/typescript-config": "",
     "@types/node": "^22.15.23",
     "nx": "^20.8.2",
@@ -67,5 +69,5 @@
       "optional": true
     }
   },
-  "gitHead": "ffce35a49a37baf5e1a2bf4d867fee24d995f884"
+  "gitHead": "ba87c4e8b8392c3c58afa3aed5606e960496596b"
 }

package/dist/js/components/lib/getFormDataObject.mjs

@@ -1,26 +0,0 @@
-"use client"
-/* */
-const getFormDataObject = (formData) => Object.fromEntries(Array.from(formData.entries()));
-const getFormDataObjectFromEvent = (element) => {
-  const form = new FormData(element.currentTarget);
-  const formKeys = form.keys().toArray();
-  const data = Object.fromEntries(form);
-  [...element.currentTarget.elements].filter(
-    (element2) => element2 && "name" in element2 && typeof element2.name === "string" && formKeys.includes(element2.name)
-  ).filter(
-    (matchingElement) => matchingElement instanceof HTMLInputElement && matchingElement.type === "file" || matchingElement instanceof HTMLSelectElement
-  ).forEach((matchingFileElement) => {
-    const fieldName = matchingFileElement.name;
-    if (matchingFileElement instanceof HTMLInputElement) {
-      data[fieldName] = matchingFileElement.files ?? new FileList();
-    } else {
-      data[fieldName] = matchingFileElement.value;
-    }
-  });
-  return data;
-};
-export {
-  getFormDataObject,
-  getFormDataObjectFromEvent
-};
-//# sourceMappingURL=getFormDataObject.mjs.map

package/dist/js/components/lib/getFormDataObject.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"getFormDataObject.mjs","sources":["../../../../src/components/lib/getFormDataObject.ts"],"sourcesContent":["import type { FormEvent } from \"react\";\n\nexport const getFormDataObject = (\n  formData: FormData,\n): Record<string, unknown> =>\n  Object.fromEntries(Array.from(formData.entries()));\n\nexport const getFormDataObjectFromEvent = (\n  element: FormEvent<HTMLFormElement>,\n): Record<string, unknown> => {\n  const form = new FormData(element.currentTarget);\n  const formKeys = form.keys().toArray();\n  const data: Record<string, unknown> = Object.fromEntries(form);\n\n  // file and select elements with multiple values are not correctly returned\n  // by getValues over FormData so we handle them by our self\n  [...element.currentTarget.elements]\n    .filter(\n      (element) =>\n        element &&\n        \"name\" in element &&\n        typeof element.name === \"string\" &&\n        formKeys.includes(element.name),\n    )\n    .filter(\n      (\n        matchingElement,\n      ): matchingElement is HTMLInputElement | HTMLSelectElement =>\n        (matchingElement instanceof HTMLInputElement &&\n          matchingElement.type === \"file\") ||\n        matchingElement instanceof HTMLSelectElement,\n    )\n    .forEach((matchingFileElement) => {\n      const fieldName = matchingFileElement.name;\n      if (matchingFileElement instanceof HTMLInputElement) {\n        data[fieldName] = matchingFileElement.files ?? new FileList();\n      } else {\n        data[fieldName] = matchingFileElement.value;\n      }\n    });\n\n  return data;\n};\n"],"names":["element"],"mappings":"AAEa,MAAA,oBAAoB,CAC/B,aAEA,OAAO,YAAY,MAAM,KAAK,SAAS,SAAS,CAAC;AAEtC,MAAA,6BAA6B,CACxC,YAC4B;AAC5B,QAAM,OAAO,IAAI,SAAS,QAAQ,aAAa;AAC/C,QAAM,WAAW,KAAK,KAAK,EAAE,QAAQ;AAC/B,QAAA,OAAgC,OAAO,YAAY,IAAI;AAI7D,GAAC,GAAG,QAAQ,cAAc,QAAQ,EAC/B;AAAA,IACC,CAACA,aACCA,YACA,UAAUA,YACV,OAAOA,SAAQ,SAAS,YACxB,SAAS,SAASA,SAAQ,IAAI;AAAA,EAAA,EAEjC;AAAA,IACC,CACE,oBAEC,2BAA2B,oBAC1B,gBAAgB,SAAS,UAC3B,2BAA2B;AAAA,EAAA,EAE9B,QAAQ,CAAC,wBAAwB;AAChC,UAAM,YAAY,oBAAoB;AACtC,QAAI,+BAA+B,kBAAkB;AACnD,WAAK,SAAS,IAAI,oBAAoB,SAAS,IAAI,SAAS;AAAA,IAAA,OACvD;AACA,WAAA,SAAS,IAAI,oBAAoB;AAAA,IAAA;AAAA,EACxC,CACD;AAEI,SAAA;AACT;"}

package/dist/types/components/lib/getFormDataObject.d.ts

@@ -1,4 +0,0 @@
-import { FormEvent } from 'react';
-export declare const getFormDataObject: (formData: FormData) => Record<string, unknown>;
-export declare const getFormDataObjectFromEvent: (element: FormEvent<HTMLFormElement>) => Record<string, unknown>;
-//# sourceMappingURL=getFormDataObject.d.ts.map

package/dist/types/components/lib/getFormDataObject.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getFormDataObject.d.ts","sourceRoot":"","sources":["../../../../src/components/lib/getFormDataObject.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,eAAO,MAAM,iBAAiB,GAC5B,UAAU,QAAQ,KACjB,MAAM,CAAC,MAAM,EAAE,OAAO,CAC2B,CAAC;AAErD,eAAO,MAAM,0BAA0B,GACrC,SAAS,SAAS,CAAC,eAAe,CAAC,KAClC,MAAM,CAAC,MAAM,EAAE,OAAO,CAiCxB,CAAC"}