@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/DataFetchingSection-D5ZMyrfR.js

@@ -0,0 +1,576 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as d, useRef as R, useEffect as Y } from "react";
+import { H as Q, C as m, T as s, K as S, bQ as K, a as x, c as y } from "../index-DoxeCFUJ.js";
+import { Globe as O } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const w = [
+  {
+    name: "Luke Skywalker",
+    height: "172",
+    mass: "77",
+    gender: "male",
+    birth_year: "19BBY"
+  },
+  {
+    name: "C-3PO",
+    height: "167",
+    mass: "75",
+    gender: "n/a",
+    birth_year: "112BBY"
+  },
+  {
+    name: "R2-D2",
+    height: "96",
+    mass: "32",
+    gender: "n/a",
+    birth_year: "33BBY"
+  },
+  {
+    name: "Darth Vader",
+    height: "202",
+    mass: "136",
+    gender: "male",
+    birth_year: "41.9BBY"
+  },
+  {
+    name: "Leia Organa",
+    height: "150",
+    mass: "49",
+    gender: "female",
+    birth_year: "19BBY"
+  },
+  {
+    name: "Owen Lars",
+    height: "178",
+    mass: "120",
+    gender: "male",
+    birth_year: "52BBY"
+  },
+  {
+    name: "Beru Whitesun lars",
+    height: "165",
+    mass: "75",
+    gender: "female",
+    birth_year: "47BBY"
+  },
+  {
+    name: "R5-D4",
+    height: "97",
+    mass: "32",
+    gender: "n/a",
+    birth_year: "unknown"
+  },
+  {
+    name: "Biggs Darklighter",
+    height: "183",
+    mass: "84",
+    gender: "male",
+    birth_year: "24BBY"
+  },
+  {
+    name: "Obi-Wan Kenobi",
+    height: "182",
+    mass: "77",
+    gender: "male",
+    birth_year: "57BBY"
+  },
+  {
+    name: "Anakin Skywalker",
+    height: "188",
+    mass: "84",
+    gender: "male",
+    birth_year: "41.9BBY"
+  },
+  {
+    name: "Wilhuff Tarkin",
+    height: "180",
+    mass: "unknown",
+    gender: "male",
+    birth_year: "64BBY"
+  },
+  {
+    name: "Chewbacca",
+    height: "228",
+    mass: "112",
+    gender: "male",
+    birth_year: "200BBY"
+  },
+  {
+    name: "Han Solo",
+    height: "180",
+    mass: "80",
+    gender: "male",
+    birth_year: "29BBY"
+  },
+  {
+    name: "Greedo",
+    height: "173",
+    mass: "74",
+    gender: "male",
+    birth_year: "44BBY"
+  }
+], V = () => {
+  const [i, P] = d("server"), [B, v] = d(!1), [D, N] = d(!1), [F, c] = d([]), [j, b] = d(0), [T, C] = d(0), [L, k] = d(!1), u = R(!0), [r, z] = d({
+    pageIndex: 0,
+    pageSize: 10
+  }), A = [
+    {
+      id: "name",
+      accessorKey: "name",
+      header: "Character Name",
+      cell: (t) => /* @__PURE__ */ e("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: String(t.getValue()) })
+    },
+    {
+      id: "height",
+      accessorKey: "height",
+      header: "Height (cm)"
+    },
+    {
+      id: "mass",
+      accessorKey: "mass",
+      header: "Mass (kg)"
+    },
+    {
+      id: "gender",
+      accessorKey: "gender",
+      header: "Gender",
+      cell: (t) => {
+        const f = String(t.getValue());
+        return /* @__PURE__ */ e(S, { variant: "soft", color: f === "male" ? "info" : f === "female" ? "danger" : "gray", children: f });
+      }
+    },
+    {
+      id: "birth_year",
+      accessorKey: "birth_year",
+      header: "Birth Year"
+    }
+  ];
+  return Y(() => {
+    let t = !0;
+    return (async () => {
+      if (u.current ? (v(!0), u.current = !1) : N(!0), k(!1), i === "server") {
+        const l = r.pageIndex * r.pageSize, h = Math.floor(l / 10) + 1;
+        try {
+          C((n) => n + 1);
+          const g = await fetch(
+            `https://swapi.py4e.com/api/people/?page=${h}`
+          );
+          if (!g.ok) throw new Error("API down");
+          const o = await g.json();
+          if (t) {
+            const n = l % 10;
+            let p = o.results.slice(
+              n,
+              n + r.pageSize
+            );
+            if (p.length < r.pageSize && o.next) {
+              const I = await fetch(
+                `https://swapi.py4e.com/api/people/?page=${h + 1}`
+              );
+              if (I.ok) {
+                const _ = await I.json(), q = r.pageSize - p.length;
+                p = [
+                  ...p,
+                  ..._.results.slice(0, q)
+                ];
+              }
+            }
+            c(p), b(o.count);
+          }
+        } catch (g) {
+          if (console.warn("SWAPI failed, using local fallback data", g), t) {
+            k(!0);
+            const o = r.pageIndex * r.pageSize, n = o + r.pageSize;
+            c(w.slice(o, n)), b(w.length);
+          }
+        } finally {
+          t && (v(!1), N(!1));
+        }
+      } else
+        try {
+          C((n) => n + 1);
+          const [l, h] = await Promise.all([
+            fetch("https://swapi.py4e.com/api/people/?page=1"),
+            fetch("https://swapi.py4e.com/api/people/?page=2")
+          ]);
+          if (!l.ok || !h.ok) throw new Error("API down");
+          const [g, o] = await Promise.all([l.json(), h.json()]);
+          if (t) {
+            const n = [...g.results, ...o.results];
+            c(n), b(n.length);
+          }
+        } catch (l) {
+          console.warn("SWAPI failed, using local fallback data", l), t && (k(!0), c(w), b(w.length));
+        } finally {
+          t && (v(!1), N(!1));
+        }
+    })(), () => {
+      t = !1;
+    };
+  }, [i, r.pageIndex, r.pageSize]), /* @__PURE__ */ a("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ e(
+      Q,
+      {
+        title: "Data Fetching & Pagination",
+        description: "See how the DataTable handles remote data fetching. Toggle between Server-side pagination (on-demand API requests) and Client-side pagination (single-fetch local processing).",
+        icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg border border-indigo-500/50", children: /* @__PURE__ */ e(O, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
+      }
+    ),
+    /* @__PURE__ */ a(m, { className: "p-6", children: [
+      /* @__PURE__ */ a("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6", children: [
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(
+            s,
+            {
+              tag: "h4",
+              className: "font-bold text-gray-900 dark:text-gray-100",
+              children: "Interactive Demo Settings"
+            }
+          ),
+          /* @__PURE__ */ e(s, { className: "text-sm text-foreground/60 mt-1", children: "Select how you want to paginate and display the Star Wars character dataset." })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-2 bg-gray-100 dark:bg-gray-800 p-1.5 rounded-xl border border-border/40", children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => {
+                P("server"), c([]), u.current = !0;
+              },
+              className: `px-4 py-2 rounded-lg text-xs font-semibold transition-all ${i === "server" ? "bg-white dark:bg-gray-700 shadow-xs text-brand" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"}`,
+              children: "Server-Side Pagination"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => {
+                P("client"), c([]), u.current = !0;
+              },
+              className: `px-4 py-2 rounded-lg text-xs font-semibold transition-all ${i === "client" ? "bg-white dark:bg-gray-700 shadow-xs text-brand" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"}`,
+              children: "Client-Side Pagination"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4 p-4 bg-gray-50 dark:bg-gray-900/50 rounded-xl border border-border/60", children: [
+        /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ e("span", { className: "text-[10px] uppercase font-bold text-gray-400 tracking-wider", children: "Active Mode" }),
+          /* @__PURE__ */ a("span", { className: "text-sm font-semibold text-indigo-600 dark:text-indigo-400 mt-1 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ a("span", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ e("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75" }),
+              /* @__PURE__ */ e("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-indigo-500" })
+            ] }),
+            i === "server" ? "Server-Side" : "Client-Side"
+          ] })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ e("span", { className: "text-[10px] uppercase font-bold text-gray-400 tracking-wider", children: "API Requests (CORS)" }),
+          /* @__PURE__ */ a("span", { className: "text-sm font-semibold text-gray-800 dark:text-gray-200 mt-1", children: [
+            T,
+            " calls"
+          ] })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ e("span", { className: "text-[10px] uppercase font-bold text-gray-400 tracking-wider", children: "Source Status" }),
+          /* @__PURE__ */ e("span", { className: "text-sm font-semibold mt-1", children: L ? /* @__PURE__ */ e(S, { variant: "soft", color: "warning", children: "Offline Fallback (Local Mock)" }) : /* @__PURE__ */ e(S, { variant: "soft", color: "success", children: "Connected to SWAPI API" }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(m, { className: "p-6", children: /* @__PURE__ */ e(
+      K,
+      {
+        tableId: `sw-${i}-table`,
+        columns: A,
+        data: F,
+        title: i === "server" ? "Star Wars Directory (Server Paginated)" : "Star Wars Directory (Client Paginated)",
+        isLoading: B,
+        isFetching: D,
+        border: !0,
+        pagination: i === "server" ? {
+          showPagination: !0,
+          serverPagination: {
+            totalCount: j,
+            pagination: r,
+            setPagination: (t) => z(t)
+          }
+        } : {
+          showPagination: !0,
+          pageSize: 5
+        }
+      },
+      `sw-${i}-table`
+    ) }),
+    /* @__PURE__ */ a("section", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+      /* @__PURE__ */ e(m, { className: "p-6", children: /* @__PURE__ */ a(x, { title: "Server-Side Pagination", className: "mb-4", children: [
+        /* @__PURE__ */ e(s, { className: "text-sm text-foreground/75 mb-3", children: "In Server-side mode, the table configuration state is mapped to backend API parameters. Clicking pages, ordering headers, or filtering content triggers a callback to make a new query." }),
+        /* @__PURE__ */ a("div", { className: "space-y-2 mt-4 text-xs", children: [
+          /* @__PURE__ */ a("div", { className: "flex justify-between border-b border-border/40 pb-2", children: [
+            /* @__PURE__ */ e("span", { className: "font-semibold text-gray-500", children: "Ideal for:" }),
+            /* @__PURE__ */ e("span", { children: "Millions of records, heavy datasets" })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex justify-between border-b border-border/40 pb-2", children: [
+            /* @__PURE__ */ e("span", { className: "font-semibold text-gray-500", children: "First Load:" }),
+            /* @__PURE__ */ e("span", { className: "text-emerald-600 font-semibold", children: "Fast (queries only 10 rows)" })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex justify-between border-b border-border/40 pb-2", children: [
+            /* @__PURE__ */ e("span", { className: "font-semibold text-gray-500", children: "Page Navigation:" }),
+            /* @__PURE__ */ e("span", { className: "text-amber-600 font-semibold", children: "Requires Fetch (network latency)" })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex justify-between pb-2", children: [
+            /* @__PURE__ */ e("span", { className: "font-semibold text-gray-500", children: "Server Overhead:" }),
+            /* @__PURE__ */ e("span", { children: "High (multiple database hits)" })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e(m, { className: "p-6", children: /* @__PURE__ */ a(x, { title: "Client-Side Pagination", className: "mb-4", children: [
+        /* @__PURE__ */ e(s, { className: "text-sm text-foreground/75 mb-3", children: "In Client-side mode, all records are fetched from the API during the initial mount. Once loaded in memory, the local TanStack table instance handles pages slicing, sorting, and filter queries instantly." }),
+        /* @__PURE__ */ a("div", { className: "space-y-2 mt-4 text-xs", children: [
+          /* @__PURE__ */ a("div", { className: "flex justify-between border-b border-border/40 pb-2", children: [
+            /* @__PURE__ */ e("span", { className: "font-semibold text-gray-500", children: "Ideal for:" }),
+            /* @__PURE__ */ e("span", { children: "Small/medium datasets (< 10,000 rows)" })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex justify-between border-b border-border/40 pb-2", children: [
+            /* @__PURE__ */ e("span", { className: "font-semibold text-gray-500", children: "First Load:" }),
+            /* @__PURE__ */ e("span", { className: "text-amber-600 font-semibold", children: "Slower (downloads all data once)" })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex justify-between border-b border-border/40 pb-2", children: [
+            /* @__PURE__ */ e("span", { className: "font-semibold text-gray-500", children: "Page Navigation:" }),
+            /* @__PURE__ */ e("span", { className: "text-emerald-600 font-semibold", children: "Instant (handled locally in RAM)" })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "flex justify-between pb-2", children: [
+            /* @__PURE__ */ e("span", { className: "font-semibold text-gray-500", children: "Server Overhead:" }),
+            /* @__PURE__ */ e("span", { children: "Low (one single HTTP query)" })
+          ] })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ e(m, { className: "p-6", children: /* @__PURE__ */ a(x, { title: "Implementation Code Comparison", className: "mb-4", children: [
+      /* @__PURE__ */ e(s, { className: "text-sm text-foreground/60 mb-6", children: "Compare the configuration options between server-side and client-side setup." }),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(s, { tag: "h6", className: "font-bold text-indigo-500 mb-2", children: "Server-Side Configuration" }),
+          /* @__PURE__ */ e(
+            y,
+            {
+              language: "tsx",
+              code: `// Server-Side: Fetch page-by-page
+const [pagination, setPagination] = useState({
+  pageIndex: 0,
+  pageSize: 10,
+});
+
+useEffect(() => {
+  fetchData(pagination.pageIndex);
+}, [pagination.pageIndex]);
+
+return (
+  <DataTable
+    tableId="server-table"
+    columns={columns}
+    data={serverData}
+    isLoading={isLoading}
+    isFetching={isFetching}
+    pagination={{
+      showPagination: true,
+      serverPagination: {
+        totalCount: totalRowsCount,
+        pagination: pagination,
+        setPagination: (p) => setPagination(p),
+      },
+    }}
+  />
+);`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(s, { tag: "h6", className: "font-bold text-emerald-500 mb-2", children: "Client-Side Configuration" }),
+          /* @__PURE__ */ e(
+            y,
+            {
+              language: "tsx",
+              code: `// Client-Side: Fetch all once
+useEffect(() => {
+  fetchAllData(); // sets clientData once
+}, []);
+
+return (
+  <DataTable
+    tableId="client-table"
+    columns={columns}
+    data={clientData} // Array of all items
+    isLoading={isLoading}
+    isFetching={isFetching}
+    pagination={{
+      showPagination: true,
+      pageSize: 10, // Slices locally
+    }}
+  />
+);`
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ e(m, { className: "p-6", children: /* @__PURE__ */ a(x, { title: "React Query Code Comparison", className: "mb-4", children: [
+      /* @__PURE__ */ a(s, { className: "text-sm text-foreground/60 mb-6", children: [
+        "The same two fetching strategies implemented with",
+        " ",
+        /* @__PURE__ */ e("code", { className: "text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded font-mono text-brand", children: "@tanstack/react-query" }),
+        ". React Query handles caching, background re-fetching, loading and error states automatically — removing the need for manual",
+        " ",
+        /* @__PURE__ */ e("code", { className: "text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded font-mono", children: "useEffect" }),
+        " ",
+        "boilerplate."
+      ] }),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(s, { tag: "h6", className: "font-bold text-indigo-500 mb-2", children: "Server-Side with React Query" }),
+          /* @__PURE__ */ e(
+            y,
+            {
+              language: "tsx",
+              code: `import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { DataTable } from '@e-burgos/tucu-ui';
+
+// Fetch function (one page at a time)
+async function fetchPage(pageIndex: number, pageSize: number) {
+  const swapiPage = Math.floor((pageIndex * pageSize) / 10) + 1;
+  const res = await fetch(
+    \`https://swapi.py4e.com/api/people/?page=\${swapiPage}\`
+  );
+  if (!res.ok) throw new Error('Network response was not ok');
+  return res.json(); // { count, results }
+}
+
+export function ServerSideTable() {
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 10,
+  });
+
+  // useQuery re-runs automatically when pagination changes
+  const { data, isLoading, isFetching } = useQuery({
+    queryKey: ['swapi-server', pagination.pageIndex, pagination.pageSize],
+    queryFn: () =>
+      fetchPage(pagination.pageIndex, pagination.pageSize),
+    placeholderData: (prev) => prev, // keeps old rows while fetching next
+  });
+
+  return (
+    <DataTable
+      tableId="server-table"
+      columns={columns}
+      data={data?.results ?? []}
+      isLoading={isLoading}
+      isFetching={isFetching}
+      pagination={{
+        showPagination: true,
+        serverPagination: {
+          totalCount: data?.count ?? 0,
+          pagination,
+          setPagination: (p) => setPagination(p),
+        },
+      }}
+    />
+  );
+}`
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { children: [
+          /* @__PURE__ */ e(s, { tag: "h6", className: "font-bold text-emerald-500 mb-2", children: "Client-Side with React Query" }),
+          /* @__PURE__ */ e(
+            y,
+            {
+              language: "tsx",
+              code: `import { useQuery } from '@tanstack/react-query';
+import { DataTable } from '@e-burgos/tucu-ui';
+
+// Fetch function — loads all data once
+async function fetchAllCharacters() {
+  const [res1, res2] = await Promise.all([
+    fetch('https://swapi.py4e.com/api/people/?page=1'),
+    fetch('https://swapi.py4e.com/api/people/?page=2'),
+  ]);
+  if (!res1.ok || !res2.ok)
+    throw new Error('Network response was not ok');
+  const [json1, json2] = await Promise.all([
+    res1.json(),
+    res2.json(),
+  ]);
+  return [...json1.results, ...json2.results]; // full local array
+}
+
+export function ClientSideTable() {
+  // Single fetch → result is cached by React Query automatically
+  const { data = [], isLoading, isFetching } = useQuery({
+    queryKey: ['swapi-client-all'],
+    queryFn: fetchAllCharacters,
+    staleTime: 5 * 60 * 1000, // keep fresh for 5 minutes
+  });
+
+  return (
+    <DataTable
+      tableId="client-table"
+      columns={columns}
+      data={data} // full array — DataTable slices locally
+      isLoading={isLoading}
+      isFetching={isFetching}
+      pagination={{
+        showPagination: true,
+        pageSize: 10, // client-side slicing, no extra fetches
+      }}
+    />
+  );
+}`
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "mt-6 grid grid-cols-1 sm:grid-cols-3 gap-4", children: [
+        /* @__PURE__ */ a("div", { className: "p-4 rounded-xl bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-200 dark:border-indigo-800", children: [
+          /* @__PURE__ */ e("p", { className: "text-xs font-bold text-indigo-600 dark:text-indigo-400 uppercase tracking-wider mb-1", children: "queryKey" }),
+          /* @__PURE__ */ a("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
+            "Server-side includes",
+            " ",
+            /* @__PURE__ */ e("code", { className: "font-mono bg-white dark:bg-gray-800 px-1 rounded", children: "pageIndex" }),
+            " ",
+            "&",
+            " ",
+            /* @__PURE__ */ e("code", { className: "font-mono bg-white dark:bg-gray-800 px-1 rounded", children: "pageSize" }),
+            " ",
+            "in the key so each page is cached independently."
+          ] })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "p-4 rounded-xl bg-emerald-50 dark:bg-emerald-950/40 border border-emerald-200 dark:border-emerald-800", children: [
+          /* @__PURE__ */ e("p", { className: "text-xs font-bold text-emerald-600 dark:text-emerald-400 uppercase tracking-wider mb-1", children: "placeholderData" }),
+          /* @__PURE__ */ a("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
+            "Using",
+            " ",
+            /* @__PURE__ */ e("code", { className: "font-mono bg-white dark:bg-gray-800 px-1 rounded", children: "placeholderData: (prev) => prev" }),
+            " ",
+            "keeps the previous page visible while the next one loads — equivalent to ",
+            /* @__PURE__ */ e("em", { children: "keepPreviousData" }),
+            " in v4."
+          ] })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "p-4 rounded-xl bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800", children: [
+          /* @__PURE__ */ e("p", { className: "text-xs font-bold text-amber-600 dark:text-amber-400 uppercase tracking-wider mb-1", children: "staleTime" }),
+          /* @__PURE__ */ a("p", { className: "text-xs text-gray-600 dark:text-gray-400", children: [
+            "Client-side uses",
+            " ",
+            /* @__PURE__ */ e("code", { className: "font-mono bg-white dark:bg-gray-800 px-1 rounded", children: "staleTime" }),
+            " ",
+            "to avoid re-fetching the full dataset on every window focus or component re-mount."
+          ] })
+        ] })
+      ] })
+    ] }) })
+  ] });
+};
+export {
+  V as default
+};