@webstudio-is/sdk-components-react-router 0.198.0 → 0.200.0

package/lib/body.js

@@ -0,0 +1,14 @@
+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/components.js

@@ -0,0 +1,12 @@
+import { Body as m } from "./body.js";
+import { Link as x } from "./link.js";
+import { RichTextLink as f } from "./rich-text-link.js";
+import { WebhookForm as i } from "./webhook-form.js";
+import { RemixForm as F } from "./remix-form.js";
+export {
+  m as Body,
+  i as Form,
+  x as Link,
+  F as RemixForm,
+  f as RichTextLink
+};

package/lib/hooks.js

@@ -0,0 +1 @@
+

package/lib/link.js

@@ -0,0 +1,6 @@
+import { Link as o } from "@webstudio-is/sdk-components-react";
+import { wrapLinkComponent as n } from "./shared/remix-link.js";
+const m = n(o);
+export {
+  m as Link
+};

package/lib/metas.js

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1 @@
+

package/lib/remix-form.js

@@ -0,0 +1,16 @@
+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/rich-text-link.js

@@ -0,0 +1,6 @@
+import { RichTextLink as i } from "@webstudio-is/sdk-components-react";
+import { wrapLinkComponent as o } from "./shared/remix-link.js";
+const r = o(i);
+export {
+  r as RichTextLink
+};

package/lib/shared/remix-link.js

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

package/lib/templates.js

@@ -0,0 +1 @@
+

package/lib/types/body.d.ts

@@ -0,0 +1 @@
+export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>, "ref"> & import("react").RefAttributes<HTMLBodyElement>>;

package/lib/types/components.d.ts

@@ -0,0 +1,5 @@
+export { Body } from "./body";
+export { Link } from "./link";
+export { RichTextLink } from "./rich-text-link";
+export { WebhookForm as Form } from "./webhook-form";
+export { RemixForm } from "./remix-form";

package/lib/types/link.d.ts

@@ -0,0 +1,16 @@
+export declare const Link: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "target" | "download"> & {
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    download?: boolean;
+    prefetch?: "none" | "intent" | "render" | "viewport";
+    preventScrollReset?: boolean;
+    reloadDocument?: boolean;
+    replace?: boolean;
+} & {
+    $webstudio$canvasOnly$assetId?: string | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>, "ref">, "target"> & {
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    prefetch?: "none" | "intent" | "render" | "viewport";
+    reloadDocument?: boolean;
+    replace?: boolean;
+    preventScrollReset?: boolean;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/lib/types/metas.d.ts

@@ -0,0 +1 @@
+export { Body, Link, RichTextLink, Form, RemixForm, } from "@webstudio-is/sdk-components-react/metas";

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

@@ -0,0 +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"]>>;
+    action?: string;
+}, "ref"> & import("react").RefAttributes<HTMLFormElement>>;

package/lib/types/rich-text-link.d.ts

@@ -0,0 +1,16 @@
+export declare const RichTextLink: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "target" | "download"> & {
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    download?: boolean;
+    prefetch?: "none" | "intent" | "render" | "viewport";
+    preventScrollReset?: boolean;
+    reloadDocument?: boolean;
+    replace?: boolean;
+} & {
+    $webstudio$canvasOnly$assetId?: string | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>, "ref">, "target"> & {
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    prefetch?: "none" | "intent" | "render" | "viewport";
+    reloadDocument?: boolean;
+    replace?: boolean;
+    preventScrollReset?: boolean;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/lib/types/shared/remix-link.d.ts

@@ -0,0 +1,17 @@
+import type { Link } from "@webstudio-is/sdk-components-react";
+export declare const wrapLinkComponent: (BaseLink: typeof Link) => import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "target" | "download"> & {
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    download?: boolean;
+    prefetch?: "none" | "intent" | "render" | "viewport";
+    preventScrollReset?: boolean;
+    reloadDocument?: boolean;
+    replace?: boolean;
+} & {
+    $webstudio$canvasOnly$assetId?: string | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>, "ref">, "target"> & {
+    target?: "_self" | "_blank" | "_parent" | "_top";
+    prefetch?: "none" | "intent" | "render" | "viewport";
+    reloadDocument?: boolean;
+    replace?: boolean;
+    preventScrollReset?: boolean;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -0,0 +1,11 @@
+import { type FormProps } from "react-router";
+export declare const defaultTag = "form";
+type State = "initial" | "success" | "error";
+export declare const WebhookForm: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "action"> & {
+    /** 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;
+    encType?: FormProps["encType"];
+    onStateChange?: (state: State) => void;
+    action?: string;
+}, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
+export {};

package/lib/webhook-form.js

@@ -0,0 +1,63 @@
+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
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-router",
-  "version": "0.198.0",
+  "version": "0.200.0",
   "description": "Webstudio components for React Router",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -35,9 +35,9 @@
   },
   "dependencies": {
     "react-router": "^7.1.1",
-    "@webstudio-is/react-sdk": "0.198.0",
-    "@webstudio-is/sdk": "0.198.0",
-    "@webstudio-is/sdk-components-react": "0.198.0"
+    "@webstudio-is/react-sdk": "0.200.0",
+    "@webstudio-is/sdk": "0.200.0",
+    "@webstudio-is/sdk-components-react": "0.200.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",