@e-burgos/tucu-ui 2.6.0 → 2.7.1

package/documentation/DataFetchingSection-D5ZMyrfR.js

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