@fewchurs/react 1.5.0 → 1.6.0

package/dist/index.mjs

@@ -4,7 +4,7 @@
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
 
 // src/client/version.ts
-var SDK_VERSION = "1.5.0";
+var SDK_VERSION = "1.6.0";
 
 // src/client/constants.ts
 var SDK_HEADER = `react/${SDK_VERSION}`;
@@ -733,7 +733,8 @@ function useFewchurs() {
 }
 
 // src/components/Board.tsx
-import { useEffect as useEffect6, useMemo as useMemo3, useState as useState10 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo3, useRef as useRef2, useState as useState10 } from "react";
+import { flushSync } from "react-dom";
 
 // src/hooks/useFewchursConfig.ts
 import { useEffect as useEffect2 } from "react";
@@ -1440,7 +1441,16 @@ function useSubmitFeature() {
 // src/components/SubmitForm.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function SubmitForm() {
-  const { labels, emailField, userEmail, isSubscriber, setFormOpen, setJustSubmitted, cx } = useBoard();
+  const {
+    labels,
+    emailField,
+    userEmail,
+    isSubscriber,
+    isFormOpen,
+    setFormOpen,
+    setJustSubmitted,
+    cx
+  } = useBoard();
   const { submit, isPending, error } = useSubmitFeature();
   const [title, setTitle] = useState9("");
   const [description, setDescription] = useState9("");
@@ -1462,8 +1472,10 @@ function SubmitForm() {
           isSubscriber
         });
         if (!created) return;
-        setTitle("");
-        setDescription("");
+        if (!isFormOpen) {
+          setTitle("");
+          setDescription("");
+        }
         setJustSubmitted(true);
         setFormOpen(false);
       },
@@ -1657,19 +1669,92 @@ function BoardRoot({
   ) });
 }
 function DefaultBoard() {
-  const { isFormOpen, justSubmitted, labels, renderHeader, cx } = useBoard();
+  const { renderHeader } = useBoard();
   return /* @__PURE__ */ jsxs8(Fragment3, { children: [
     renderHeader ? renderHeader() : /* @__PURE__ */ jsx11(BoardHeading, {}),
-    /* @__PURE__ */ jsxs8("div", { className: cx("fw-toolbar"), children: [
-      /* @__PURE__ */ jsx11(BoardTabs, {}),
-      /* @__PURE__ */ jsx11(SubmitTrigger, {})
-    ] }),
-    justSubmitted && /* @__PURE__ */ jsx11("p", { className: cx("fw-alert"), role: "status", children: labels.submitted }),
-    isFormOpen && /* @__PURE__ */ jsx11(SubmitForm, {}),
-    /* @__PURE__ */ jsx11(FeatureList, {}),
+    /* @__PURE__ */ jsx11(BoardPanels, {}),
     /* @__PURE__ */ jsx11(Branding, {})
   ] });
 }
+var LEAVE_MS = 110;
+var ENTER_MS = 300;
+var ENTER_EASING = "cubic-bezier(0.22, 1, 0.36, 1)";
+function canAnimate(element) {
+  if (!element || typeof element.animate !== "function") return false;
+  return !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function BoardPanels() {
+  const { isFormOpen, setFormOpen, justSubmitted, setJustSubmitted, labels, unstyled, cx } = useBoard();
+  const [showForm, setShowForm] = useState10(isFormOpen);
+  const panel = useRef2(null);
+  const trigger = useRef2(null);
+  const entering = useRef2(null);
+  const hasSwapped = useRef2(false);
+  useEffect6(() => {
+    if (isFormOpen === showForm) return;
+    hasSwapped.current = true;
+    const element = panel.current;
+    if (unstyled || !canAnimate(element)) {
+      setShowForm(isFormOpen);
+      return;
+    }
+    entering.current?.cancel();
+    const leaving = element.animate(
+      { opacity: [1, 0], transform: ["translateY(0)", "translateY(-4px)"] },
+      { duration: LEAVE_MS, easing: "ease-in", fill: "forwards" }
+    );
+    leaving.onfinish = () => {
+      const from = element.offsetHeight;
+      flushSync(() => setShowForm(isFormOpen));
+      leaving.cancel();
+      const to = element.offsetHeight;
+      element.style.overflow = "hidden";
+      const enter = element.animate(
+        {
+          opacity: [0, 1],
+          transform: ["translateY(6px)", "translateY(0)"],
+          height: [`${from}px`, `${to}px`]
+        },
+        { duration: ENTER_MS, easing: ENTER_EASING }
+      );
+      const finish = () => {
+        element.style.overflow = "";
+      };
+      enter.onfinish = finish;
+      enter.oncancel = finish;
+      entering.current = enter;
+    };
+    return () => leaving.cancel();
+  }, [isFormOpen, showForm, unstyled]);
+  useEffect6(() => {
+    if (!hasSwapped.current) return;
+    const target = showForm ? panel.current?.querySelector("#fw-title") : trigger.current;
+    target?.focus({ preventScroll: true });
+  }, [showForm]);
+  return /* @__PURE__ */ jsxs8("div", { ref: panel, children: [
+    /* @__PURE__ */ jsxs8("div", { hidden: showForm, children: [
+      /* @__PURE__ */ jsxs8("div", { className: cx("fw-toolbar"), children: [
+        /* @__PURE__ */ jsx11(BoardTabs, {}),
+        /* @__PURE__ */ jsx11(
+          "button",
+          {
+            ref: trigger,
+            type: "button",
+            className: cx("fw-btn"),
+            onClick: () => {
+              setJustSubmitted(false);
+              setFormOpen(true);
+            },
+            children: labels.newRequest
+          }
+        )
+      ] }),
+      justSubmitted && /* @__PURE__ */ jsx11("p", { className: cx("fw-alert"), role: "status", children: labels.submitted }),
+      /* @__PURE__ */ jsx11(FeatureList, {})
+    ] }),
+    showForm && /* @__PURE__ */ jsx11(SubmitForm, {})
+  ] });
+}
 function BoardHeading() {
   const { labels, cx } = useBoard();
   return /* @__PURE__ */ jsx11("h2", { className: cx("fw-heading"), children: labels.title });
@@ -1733,7 +1818,7 @@ var FewchursBoard = Object.assign(BoardRoot, {
 });
 
 // src/components/BoardDialog.tsx
-import { useEffect as useEffect7, useRef as useRef2 } from "react";
+import { useEffect as useEffect7, useRef as useRef3 } from "react";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function FewchursBoardDialog({
   open,
@@ -1742,8 +1827,8 @@ function FewchursBoardDialog({
   variant = "dialog",
   ...boardProps
 }) {
-  const dialogRef = useRef2(null);
-  const openerRef = useRef2(null);
+  const dialogRef = useRef3(null);
+  const openerRef = useRef3(null);
   useEffect7(() => {
     if (!open) return;
     openerRef.current = document.activeElement;