@webstudio-is/sdk-components-react-router 0.218.0 → 0.220.0

package/lib/components.js

@@ -1,11 +1,148 @@
-import { Body as m } from "./body.js";
-import { Link as x, Link as i } from "./link.js";
-import { WebhookForm as f } from "./webhook-form.js";
-import { RemixForm as p } from "./remix-form.js";
+// src/body.tsx
+import { forwardRef } from "react";
+import { Scripts, ScrollRestoration } from "react-router";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Body = forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsxs("body", { ...props, ref, children: [
+    children,
+    /* @__PURE__ */ jsx(Scripts, {}),
+    /* @__PURE__ */ jsx(ScrollRestoration, {})
+  ] })
+);
+Body.displayName = "Body";
+
+// src/link.tsx
+import { forwardRef as forwardRef2, useContext } from "react";
+import { NavLink as RemixLink } from "react-router";
+import { ReactSdkContext } from "@webstudio-is/react-sdk/runtime";
+import { Link as BaseLink } from "@webstudio-is/sdk-components-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Link = forwardRef2((props, ref) => {
+  const { assetBaseUrl } = useContext(ReactSdkContext);
+  const href = String(props.href ?? "");
+  if (
+    // remix appends ?index in runtime but not in ssr
+    href === "" || href.startsWith("?") || href.startsWith("/") && href.startsWith(assetBaseUrl) === false
+  ) {
+    return /* @__PURE__ */ jsx2(RemixLink, { ...props, to: href, ref, end: true });
+  }
+  const { prefetch, reloadDocument, replace, preventScrollReset, ...rest } = props;
+  return /* @__PURE__ */ jsx2(BaseLink, { ...rest, ref });
+});
+Link.displayName = BaseLink.displayName;
+
+// src/webhook-form.tsx
+import {
+  forwardRef as forwardRef3,
+  useRef,
+  useEffect
+} from "react";
+import { useFetcher } from "react-router";
+import { formIdFieldName, formBotFieldName } from "@webstudio-is/sdk/runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var useOnFetchEnd = (fetcher, handler) => {
+  const latestHandler = useRef(handler);
+  latestHandler.current = handler;
+  const prevFetcher = useRef(fetcher);
+  useEffect(() => {
+    if (prevFetcher.current.state !== fetcher.state && fetcher.state === "idle" && fetcher.data !== void 0) {
+      latestHandler.current(fetcher.data);
+    }
+    prevFetcher.current = fetcher;
+  }, [fetcher]);
+};
+var gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
+var getAspectRatioString = (width, height) => {
+  const r = gcd(width, height);
+  const aspectRatio = `${width / r}/${height / r}`;
+  return aspectRatio;
+};
+var isJSDom = () => {
+  if (typeof matchMedia === "undefined") {
+    return true;
+  }
+  const { width, height } = screen;
+  const deviceAspectRatio = getAspectRatioString(width, height);
+  const matchAspectRatio = matchMedia(
+    `(device-aspect-ratio: ${deviceAspectRatio})`
+  ).matches;
+  const matchWidthHeight = matchMedia(
+    `(device-width: ${width}px) and (device-height: ${height}px)`
+  ).matches;
+  const matchWidthHeightFail = matchMedia(
+    `(device-width: ${width - 1}px) and (device-height: ${height}px)`
+  ).matches;
+  const matchLight = matchMedia("(prefers-color-scheme: light)").matches;
+  const matchDark = matchMedia("(prefers-color-scheme: dark)").matches;
+  const hasMatchMedia = matchAspectRatio && matchWidthHeight && !matchWidthHeightFail && matchLight !== matchDark;
+  return hasMatchMedia === false;
+};
+var WebhookForm = forwardRef3(
+  ({ children, action, method, state = "initial", onStateChange, ...rest }, ref) => {
+    const fetcher = useFetcher();
+    useOnFetchEnd(fetcher, (data) => {
+      const state2 = data?.success === true ? "success" : "error";
+      onStateChange?.(state2);
+    });
+    const handleSubmitAndAddHiddenJsField = (event) => {
+      const hiddenInput = document.createElement("input");
+      hiddenInput.type = "hidden";
+      hiddenInput.name = formBotFieldName;
+      hiddenInput.value = isJSDom() ? "jsdom" : Date.now().toString(16);
+      event.currentTarget.appendChild(hiddenInput);
+    };
+    return /* @__PURE__ */ jsxs2(
+      fetcher.Form,
+      {
+        ...rest,
+        method: "post",
+        "data-state": state,
+        ref,
+        onSubmit: handleSubmitAndAddHiddenJsField,
+        children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              type: "hidden",
+              name: formIdFieldName,
+              value: action?.toString()
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+WebhookForm.displayName = "WebhookForm";
+
+// src/remix-form.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { Form } from "react-router";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var RemixForm = forwardRef4(({ action, method, ...props }, ref) => {
+  if (method === "dialog") {
+    return /* @__PURE__ */ jsx4("form", { ...props, ref });
+  }
+  if (action === void 0 || action === "" || typeof action === "string" && action?.startsWith("/")) {
+    return /* @__PURE__ */ jsx4(
+      Form,
+      {
+        action,
+        method,
+        ...props,
+        ref,
+        preventScrollReset: action === void 0 || action === ""
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4("form", { ...props, ref });
+});
+RemixForm.displayName = "Form";
 export {
-  m as Body,
-  f as Form,
-  x as Link,
-  p as RemixForm,
-  i as RichTextLink
+  Body,
+  WebhookForm as Form,
+  Link,
+  RemixForm,
+  Link as RichTextLink
 };

package/lib/types/remix-form.d.ts

@@ -1,6 +1,6 @@
 import { type FormProps } from "react-router";
 export declare const defaultTag = "form";
 export declare const RemixForm: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "action"> & Pick<FormProps, "encType"> & {
-    method?: Lowercase<NonNullable<FormProps["method"]>>;
+    method?: Lowercase<NonNullable<FormProps["method"]>> | "dialog";
     action?: string;
 }, "ref"> & import("react").RefAttributes<HTMLFormElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-router",
-  "version": "0.218.0",
+  "version": "0.220.0",
   "description": "Webstudio components for React Router",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -17,16 +17,6 @@
       "webstudio": "./src/components.ts",
       "types": "./lib/types/components.d.ts",
       "import": "./lib/components.js"
-    },
-    "./metas": {
-      "webstudio": "./src/metas.ts",
-      "types": "./lib/types/metas.d.ts",
-      "import": "./lib/metas.js"
-    },
-    "./props": {
-      "webstudio": "./src/props.ts",
-      "types": "./lib/types/props.d.ts",
-      "import": "./lib/props.js"
     }
   },
   "peerDependencies": {
@@ -34,10 +24,10 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
-    "react-router": "^7.5.0",
-    "@webstudio-is/react-sdk": "0.218.0",
-    "@webstudio-is/sdk": "0.218.0",
-    "@webstudio-is/sdk-components-react": "0.218.0"
+    "react-router": "^7.5.3",
+    "@webstudio-is/react-sdk": "0.220.0",
+    "@webstudio-is/sdk-components-react": "0.220.0",
+    "@webstudio-is/sdk": "0.220.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
@@ -47,7 +37,7 @@
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
-    "build": "vite build --config ../../vite.sdk-components.config.ts",
+    "build": "rm -rf lib && esbuild src/components.ts --outdir=lib --bundle --format=esm --packages=external",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc"
   }

package/lib/body.js

@@ -1,14 +0,0 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { Scripts as d, ScrollRestoration as p } from "react-router";
-const e = s(
-  ({ children: r, ...t }, i) => /* @__PURE__ */ m("body", { ...t, ref: i, children: [
-    r,
-    /* @__PURE__ */ o(d, {}),
-    /* @__PURE__ */ o(p, {})
-  ] })
-);
-e.displayName = "Body";
-export {
-  e as Body
-};

package/lib/hooks.js

@@ -1 +0,0 @@
-

package/lib/link.js

@@ -1,19 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as n, useContext as m } from "react";
-import { NavLink as f } from "react-router";
-import { ReactSdkContext as c } from "@webstudio-is/react-sdk/runtime";
-import { Link as s } from "@webstudio-is/sdk-components-react";
-const l = n((r, e) => {
-  const { assetBaseUrl: a } = m(c), t = String(r.href ?? "");
-  if (
-    // remix appends ?index in runtime but not in ssr
-    t === "" || t.startsWith("?") || t.startsWith("/") && t.startsWith(a) === !1
-  )
-    return /* @__PURE__ */ o(f, { ...r, to: t, ref: e, end: !0 });
-  const { prefetch: p, reloadDocument: d, replace: h, preventScrollReset: k, ...i } = r;
-  return /* @__PURE__ */ o(s, { ...i, ref: e });
-});
-l.displayName = s.displayName;
-export {
-  l as Link
-};

package/lib/metas.js

@@ -1,8 +0,0 @@
-import { Body as m, Form as r, Link as e, RemixForm as x, RichTextLink as k } from "@webstudio-is/sdk-components-react/metas";
-export {
-  m as Body,
-  r as Form,
-  e as Link,
-  x as RemixForm,
-  k as RichTextLink
-};

package/lib/props.js

@@ -1 +0,0 @@
-

package/lib/remix-form.js

@@ -1,16 +0,0 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as o } from "react";
-import { Form as s } from "react-router";
-const p = o(({ action: r, ...m }, e) => r === void 0 || r === "" || typeof r == "string" && (r != null && r.startsWith("/")) ? /* @__PURE__ */ f(
-  s,
-  {
-    action: r,
-    ...m,
-    ref: e,
-    preventScrollReset: r === void 0 || r === ""
-  }
-) : /* @__PURE__ */ f("form", { ...m, ref: e }));
-p.displayName = "Form";
-export {
-  p as RemixForm
-};

package/lib/templates.js

@@ -1 +0,0 @@
-

package/lib/webhook-form.js

@@ -1,63 +0,0 @@
-import { jsxs as u, jsx as l } from "react/jsx-runtime";
-import { forwardRef as f, useRef as h, useEffect as v } from "react";
-import { useFetcher as F } from "react-router";
-import { formIdFieldName as M, formBotFieldName as g } from "@webstudio-is/sdk/runtime";
-const x = (t, e) => {
-  const c = h(e);
-  c.current = e;
-  const s = h(t);
-  v(() => {
-    s.current.state !== t.state && t.state === "idle" && t.data !== void 0 && c.current(t.data), s.current = t;
-  }, [t]);
-}, p = (t, e) => e === 0 ? t : p(e, t % e), R = (t, e) => {
-  const c = p(t, e);
-  return `${t / c}/${e / c}`;
-}, $ = () => {
-  if (typeof matchMedia > "u")
-    return !0;
-  const { width: t, height: e } = screen, c = R(t, e), s = matchMedia(
-    `(device-aspect-ratio: ${c})`
-  ).matches, o = matchMedia(
-    `(device-width: ${t}px) and (device-height: ${e}px)`
-  ).matches, a = matchMedia(
-    `(device-width: ${t - 1}px) and (device-height: ${e}px)`
-  ).matches, n = matchMedia("(prefers-color-scheme: light)").matches, d = matchMedia("(prefers-color-scheme: dark)").matches;
-  return (s && o && !a && n !== d) === !1;
-}, A = f(
-  ({ children: t, action: e, method: c, state: s = "initial", onStateChange: o, ...a }, n) => {
-    const d = F();
-    x(d, (r) => {
-      const i = (r == null ? void 0 : r.success) === !0 ? "success" : "error";
-      o == null || o(i);
-    });
-    const m = (r) => {
-      const i = document.createElement("input");
-      i.type = "hidden", i.name = g, i.value = $() ? "jsdom" : Date.now().toString(16), r.currentTarget.appendChild(i);
-    };
-    return /* @__PURE__ */ u(
-      d.Form,
-      {
-        ...a,
-        method: "post",
-        "data-state": s,
-        ref: n,
-        onSubmit: m,
-        children: [
-          /* @__PURE__ */ l(
-            "input",
-            {
-              type: "hidden",
-              name: M,
-              value: e == null ? void 0 : e.toString()
-            }
-          ),
-          t
-        ]
-      }
-    );
-  }
-);
-A.displayName = "WebhookForm";
-export {
-  A as WebhookForm
-};