@webstudio-is/sdk-components-react-remix 0.95.0 → 0.96.0

package/lib/components.js

@@ -1,4 +1,82 @@
-"use strict";
-export { Link } from "./link";
-export { RichTextLink } from "./rich-text-link";
-export { Form } from "./form";
+// src/link.tsx
+import { Link as BaseLink } from "@webstudio-is/sdk-components-react";
+
+// src/shared/remix-link.tsx
+import { forwardRef } from "react";
+import { NavLink as RemixLink } from "@remix-run/react";
+import {
+  usePropUrl,
+  getInstanceIdFromComponentProps
+} from "@webstudio-is/react-sdk";
+import { jsx } from "react/jsx-runtime";
+var wrapLinkComponent = (BaseLink3) => {
+  const Component = forwardRef((props, ref) => {
+    const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
+    if (href?.type === "page") {
+      let to = href.page.path === "" ? "/" : href.page.path;
+      const urlTo = new URL(to, "https://any-valid.url");
+      to = urlTo.pathname;
+      if (href.hash !== void 0) {
+        urlTo.hash = encodeURIComponent(href.hash);
+        to = `${urlTo.pathname}${urlTo.hash}`;
+      }
+      return /* @__PURE__ */ jsx(RemixLink, { ...props, to, ref });
+    }
+    const { prefetch, reloadDocument, replace, preventScrollReset, ...rest } = props;
+    return /* @__PURE__ */ jsx(BaseLink3, { ...rest, ref });
+  });
+  Component.displayName = BaseLink3.displayName;
+  return Component;
+};
+
+// src/link.tsx
+var Link = wrapLinkComponent(BaseLink);
+
+// src/rich-text-link.tsx
+import { RichTextLink as BaseLink2 } from "@webstudio-is/sdk-components-react";
+var RichTextLink = wrapLinkComponent(BaseLink2);
+
+// src/form.tsx
+import {
+  forwardRef as forwardRef2,
+  useRef,
+  useEffect,
+  useContext
+} 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 { jsx as jsx2, jsxs } 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 Form = forwardRef2(({ children, action, method, state = "initial", ...rest }, ref) => {
+  const { setBoundDataSourceValue } = useContext(ReactSdkContext);
+  const fetcher = useFetcher();
+  const instanceId = getInstanceIdFromComponentProps2(rest);
+  useOnFetchEnd(fetcher, (data) => {
+    const state2 = data?.success === true ? "success" : "error";
+    setBoundDataSourceValue(instanceId, "state", state2);
+  });
+  return /* @__PURE__ */ jsxs(fetcher.Form, { ...rest, method: "post", "data-state": state, ref, children: [
+    /* @__PURE__ */ jsx2("input", { type: "hidden", name: formIdFieldName, value: instanceId }),
+    children
+  ] });
+});
+Form.displayName = "Form";
+export {
+  Form,
+  Link,
+  RichTextLink
+};