@blocknote/shadcn 0.16.0 → 0.17.0

package/dist/blocknote-shadcn.js

@@ -1,14 +1,14 @@
 import * as p from "react";
-import ze, { createContext as lt, useContext as dt, forwardRef as C, useRef as We, useEffect as Ye, useMemo as Ue } from "react";
+import ze, { createContext as lt, useContext as dt, forwardRef as C, useMemo as We, useRef as Ye, useEffect as Ue } from "react";
 import { assertEmpty as y, mergeCSSClasses as ct } from "@blocknote/core";
 import { elementOverflow as Ge, mergeRefs as Ke, ComponentsContext as ut, BlockNoteViewRaw as bt } from "@blocknote/react";
+import { FormProvider as ft, useFormContext as mt, useForm as pt } from "react-hook-form";
 import { cva as Q } from "class-variance-authority";
-import { clsx as ft } from "clsx";
-import { extendTailwindMerge as mt } from "tailwind-merge";
+import { clsx as gt } from "clsx";
+import { extendTailwindMerge as vt } from "tailwind-merge";
 import { Slot as qe } from "@radix-ui/react-slot";
 import * as T from "@radix-ui/react-dropdown-menu";
-import { ChevronRight as Je, Check as He, Circle as pt, ChevronDown as Xe, ChevronUp as gt } from "lucide-react";
-import { FormProvider as vt, useFormContext as xt, useForm as ht } from "react-hook-form";
+import { ChevronRight as Je, Check as He, Circle as xt, ChevronDown as Xe, ChevronUp as ht } from "lucide-react";
 import * as Ze from "@radix-ui/react-label";
 import * as ee from "@radix-ui/react-popover";
 import * as D from "@radix-ui/react-select";
@@ -645,11 +645,11 @@ React keys must be passed directly to JSX without using spread:
 }
 process.env.NODE_ENV === "production" ? ue.exports = yt() : ue.exports = wt();
 var a = ue.exports;
-const Ct = mt({
+const Ct = vt({
   prefix: "bn-"
 });
 function b(...r) {
-  return Ct(ft(r));
+  return Ct(gt(r));
 }
 const Nt = Q(
   "bn-inline-flex bn-items-center bn-rounded-full bn-border bn-px-2.5 bn-py-0.5 bn-text-xs bn-font-semibold bn-transition-colors focus:bn-outline-none focus:bn-ring-2 focus:bn-ring-ring focus:bn-ring-offset-2",
@@ -846,7 +846,7 @@ const Mt = p.forwardRef(({ className: r, children: t, ...n }, o) => /* @__PURE__
     ),
     ...n,
     children: [
-      /* @__PURE__ */ a.jsx("span", { className: "bn-absolute bn-left-2 bn-flex bn-h-3.5 bn-w-3.5 bn-items-center bn-justify-center", children: /* @__PURE__ */ a.jsx(T.ItemIndicator, { children: /* @__PURE__ */ a.jsx(pt, { className: "bn-h-2 bn-w-2 bn-fill-current" }) }) }),
+      /* @__PURE__ */ a.jsx("span", { className: "bn-absolute bn-left-2 bn-flex bn-h-3.5 bn-w-3.5 bn-items-center bn-justify-center", children: /* @__PURE__ */ a.jsx(T.ItemIndicator, { children: /* @__PURE__ */ a.jsx(xt, { className: "bn-h-2 bn-w-2 bn-fill-current" }) }) }),
       t
     ]
   }
@@ -885,10 +885,10 @@ const kt = Q(
   }
 ));
 be.displayName = Ze.Root.displayName;
-const Ft = vt, Ot = p.createContext(
+const Ft = ft, Ot = p.createContext(
   {}
 ), ne = () => {
-  const r = p.useContext(Ot), t = p.useContext(un), { getFieldState: n, formState: o } = xt(), s = n(r.name, o);
+  const r = p.useContext(Ot), t = p.useContext(un), { getFieldState: n, formState: o } = mt(), s = n(r.name, o);
   if (!r)
     throw new Error("useFormField should be used within <FormField>");
   const { id: d } = t;
@@ -1018,7 +1018,7 @@ const pn = p.forwardRef(({ className: r, ...t }, n) => /* @__PURE__ */ a.jsx(
       r
     ),
     ...t,
-    children: /* @__PURE__ */ a.jsx(gt, { className: "bn-h-4 bn-w-4" })
+    children: /* @__PURE__ */ a.jsx(ht, { className: "bn-h-4 bn-w-4" })
   }
 ));
 pn.displayName = D.ScrollUpButton.displayName;
@@ -1246,74 +1246,56 @@ function R() {
 const er = (r) => {
   const { children: t, ...n } = r;
   y(n);
-  const o = R(), s = ht();
+  const o = R(), s = pt();
   return /* @__PURE__ */ a.jsx(o.Form.Form, { ...s, children: t });
 }, nr = C((r, t) => {
-  const { className: n, children: o, id: s, columns: d, ...c } = r;
-  return y(c), /* @__PURE__ */ a.jsx(
-    "div",
-    {
-      className: n,
-      style: { gridTemplateColumns: `repeat(${d}, 1fr)` },
-      ref: t,
-      id: s,
-      role: "grid",
-      children: o
-    }
-  );
-}), tr = C((r, t) => {
-  const { className: n, children: o, columns: s, ...d } = r;
-  return y(d), /* @__PURE__ */ a.jsx(
-    "div",
-    {
-      className: n,
-      style: { gridColumn: `1 / ${s + 1}` },
-      ref: t,
-      children: o
-    }
-  );
-}), rr = C((r, t) => {
-  const { className: n, isSelected: o, onClick: s, item: d, id: c, ...v } = r;
-  y(v);
-  const f = We(null);
-  return Ye(() => {
-    if (!f.current || !o)
-      return;
-    const u = Ge(
-      f.current,
-      document.querySelector(".bn-grid-suggestion-menu")
-    );
-    u === "top" ? f.current.scrollIntoView(!0) : u === "bottom" && f.current.scrollIntoView(!1);
-  }, [o]), /* @__PURE__ */ a.jsx(
-    "div",
-    {
-      className: n,
-      ref: Ke([t, f]),
-      id: c,
-      role: "option",
-      onClick: s,
-      "aria-selected": o || void 0,
-      children: d.icon
-    }
-  );
-}), or = C((r, t) => {
   const {
     className: n,
-    children: o,
-    // unused, using "dots" instead
-    columns: s,
-    ...d
+    name: o,
+    label: s,
+    icon: d,
+    // TODO: implement
+    value: c,
+    autoFocus: v,
+    placeholder: f,
+    onKeyDown: u,
+    onChange: g,
+    onSubmit: j,
+    ..._
   } = r;
-  return y(d), /* @__PURE__ */ a.jsx(
-    "div",
+  y(_);
+  const F = R();
+  return s ? /* @__PURE__ */ a.jsxs("div", { children: [
+    /* @__PURE__ */ a.jsx(F.Label.Label, { htmlFor: s, children: s }),
+    /* @__PURE__ */ a.jsx(
+      F.Input.Input,
+      {
+        className: n,
+        id: s,
+        name: o,
+        autoFocus: v,
+        placeholder: f,
+        value: c,
+        onKeyDown: u,
+        onChange: g,
+        onSubmit: j
+      }
+    )
+  ] }) : /* @__PURE__ */ a.jsx(
+    F.Input.Input,
     {
-      className: n,
-      style: { gridColumn: `1 / ${s + 1}` },
-      ref: t,
-      children: o
+      "aria-label": o,
+      name: o,
+      autoFocus: v,
+      placeholder: f,
+      value: c,
+      onKeyDown: u,
+      onChange: g,
+      onSubmit: j,
+      ref: t
     }
   );
-}), ar = (r) => C(
+}), tr = (r) => C(
   (t, n) => /* @__PURE__ */ a.jsx(
     r,
     {
@@ -1328,7 +1310,7 @@ const er = (r) => {
       ref: n
     }
   )
-), sr = (r) => {
+), rr = (r) => {
   const {
     children: t,
     onOpenChange: n,
@@ -1346,17 +1328,17 @@ const er = (r) => {
       children: t
     }
   ) : /* @__PURE__ */ a.jsx(c.DropdownMenu.DropdownMenu, { onOpenChange: n, children: t });
-}, ir = (r) => {
+}, or = (r) => {
   const { children: t, sub: n, ...o } = r;
   y(o);
-  const s = R(), d = Ue(
-    () => ar(
+  const s = R(), d = We(
+    () => tr(
       s.DropdownMenu.DropdownMenuTrigger
     ),
     [s.DropdownMenu.DropdownMenuTrigger]
   );
   return n ? /* @__PURE__ */ a.jsx(s.DropdownMenu.DropdownMenuSubTrigger, { children: t }) : /* @__PURE__ */ a.jsx(d, { asChild: !0, ...o, children: t });
-}, lr = C((r, t) => {
+}, ar = C((r, t) => {
   const { className: n, children: o, sub: s, ...d } = r;
   y(d);
   const c = R();
@@ -1375,7 +1357,7 @@ const er = (r) => {
       children: o
     }
   );
-}), dr = C((r, t) => {
+}), sr = C((r, t) => {
   const { className: n, children: o, icon: s, checked: d, subTrigger: c, onClick: v, ...f } = r;
   y(f);
   const u = R();
@@ -1409,7 +1391,7 @@ const er = (r) => {
       ]
     }
   );
-}), cr = C((r, t) => {
+}), ir = C((r, t) => {
   const { className: n, ...o } = r;
   y(o);
   const s = R();
@@ -1420,7 +1402,7 @@ const er = (r) => {
       ref: t
     }
   );
-}), ur = C((r, t) => {
+}), lr = C((r, t) => {
   const { className: n, children: o, ...s } = r;
   y(s);
   const d = R();
@@ -1432,7 +1414,7 @@ const er = (r) => {
       children: o
     }
   );
-}), br = C((r, t) => {
+}), dr = C((r, t) => {
   const {
     className: n,
     tabs: o,
@@ -1459,38 +1441,7 @@ const er = (r) => {
       ]
     }
   );
-}), fr = C((r, t) => {
-  const { className: n, children: o, onClick: s, label: d, ...c } = r;
-  y(c);
-  const v = R();
-  return /* @__PURE__ */ a.jsx(
-    v.Button.Button,
-    {
-      type: "submit",
-      className: n,
-      "aria-label": d,
-      ref: t,
-      onClick: s,
-      children: o
-    }
-  );
-}), mr = C((r, t) => {
-  const { className: n, accept: o, value: s, placeholder: d, onChange: c, ...v } = r;
-  y(v);
-  const f = R();
-  return /* @__PURE__ */ a.jsx(
-    f.Input.Input,
-    {
-      type: "file",
-      className: n,
-      ref: t,
-      accept: o,
-      value: s ? s.name : void 0,
-      onChange: async (u) => c == null ? void 0 : c(u.target.files[0]),
-      placeholder: d
-    }
-  );
-}), pr = C((r, t) => {
+}), cr = C((r, t) => {
   const { className: n, children: o, ...s } = r;
   return y(s), /* @__PURE__ */ a.jsx(
     "div",
@@ -1503,7 +1454,7 @@ const er = (r) => {
       children: o
     }
   );
-}), gr = C((r, t) => {
+}), ur = C((r, t) => {
   const { className: n, value: o, placeholder: s, onKeyDown: d, onChange: c, ...v } = r;
   y(v);
   const f = R();
@@ -1519,7 +1470,7 @@ const er = (r) => {
       onChange: c
     }
   );
-}), vr = (r) => {
+}), br = (r) => {
   const {
     children: t,
     opened: n,
@@ -1530,14 +1481,14 @@ const er = (r) => {
   y(s);
   const d = R();
   return /* @__PURE__ */ a.jsx(d.Popover.Popover, { open: n, children: t });
-}, xr = C(
+}, fr = C(
   (r, t) => {
     const { children: n, ...o } = r;
     y(o);
     const s = R();
     return /* @__PURE__ */ a.jsx(s.Popover.PopoverTrigger, { ref: t, asChild: !0, children: n });
   }
-), hr = C((r, t) => {
+), mr = C((r, t) => {
   const { className: n, variant: o, children: s, ...d } = r;
   y(d);
   const c = R();
@@ -1554,10 +1505,10 @@ const er = (r) => {
       children: s
     }
   );
-}), yr = C((r, t) => {
+}), pr = C((r, t) => {
   const { className: n, children: o, ...s } = r;
   return y(s, !1), /* @__PURE__ */ a.jsx("div", { className: n, ref: t, ...s, children: o });
-}), wr = C((r, t) => {
+}), gr = C((r, t) => {
   const {
     className: n,
     children: o,
@@ -1589,7 +1540,31 @@ const er = (r) => {
       ]
     }
   );
-}), Cr = C((r, t) => {
+}), vr = C((r, t) => {
+  const { className: n, children: o, id: s, columns: d, ...c } = r;
+  return y(c), /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      className: n,
+      style: { gridTemplateColumns: `repeat(${d}, 1fr)` },
+      ref: t,
+      id: s,
+      role: "grid",
+      children: o
+    }
+  );
+}), xr = C((r, t) => {
+  const { className: n, children: o, columns: s, ...d } = r;
+  return y(d), /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      className: n,
+      style: { gridColumn: `1 / ${s + 1}` },
+      ref: t,
+      children: o
+    }
+  );
+}), hr = C((r, t) => {
   const { className: n, children: o, id: s, ...d } = r;
   return y(d), /* @__PURE__ */ a.jsx(
     "div",
@@ -1604,7 +1579,7 @@ const er = (r) => {
       children: o
     }
   );
-}), Nr = C((r, t) => {
+}), yr = C((r, t) => {
   const { className: n, children: o, ...s } = r;
   return y(s), /* @__PURE__ */ a.jsx(
     "div",
@@ -1617,11 +1592,11 @@ const er = (r) => {
       children: /* @__PURE__ */ a.jsx("div", { children: o })
     }
   );
-}), jr = C((r, t) => {
+}), wr = C((r, t) => {
   const n = R(), { className: o, item: s, isSelected: d, onClick: c, id: v, ...f } = r;
   y(f);
-  const u = We(null);
-  return Ye(() => {
+  const u = Ye(null);
+  return Ue(() => {
     if (!u.current || !d)
       return;
     const g = Ge(
@@ -1651,7 +1626,7 @@ const er = (r) => {
       ]
     }
   );
-}), Sr = C((r, t) => {
+}), Cr = C((r, t) => {
   const { className: n, children: o, ...s } = r;
   return y(s), /* @__PURE__ */ a.jsx(
     "div",
@@ -1661,10 +1636,10 @@ const er = (r) => {
       children: o
     }
   );
-}), Tr = C((r, t) => {
+}), Nr = C((r, t) => {
   const { className: n, children: o, ...s } = r;
   return y(s), /* @__PURE__ */ a.jsx("div", { className: n, ref: t, children: o });
-}), Rr = C((r, t) => {
+}), jr = C((r, t) => {
   const {
     className: n,
     children: o,
@@ -1692,53 +1667,6 @@ const er = (r) => {
       children: o
     }
   );
-}), Er = C((r, t) => {
-  const {
-    className: n,
-    name: o,
-    label: s,
-    icon: d,
-    // TODO: implement
-    value: c,
-    autoFocus: v,
-    placeholder: f,
-    onKeyDown: u,
-    onChange: g,
-    onSubmit: j,
-    ..._
-  } = r;
-  y(_);
-  const F = R();
-  return s ? /* @__PURE__ */ a.jsxs("div", { children: [
-    /* @__PURE__ */ a.jsx(F.Label.Label, { htmlFor: s, children: s }),
-    /* @__PURE__ */ a.jsx(
-      F.Input.Input,
-      {
-        className: n,
-        id: s,
-        name: o,
-        autoFocus: v,
-        placeholder: f,
-        value: c,
-        onKeyDown: u,
-        onChange: g,
-        onSubmit: j
-      }
-    )
-  ] }) : /* @__PURE__ */ a.jsx(
-    F.Input.Input,
-    {
-      "aria-label": o,
-      name: o,
-      autoFocus: v,
-      placeholder: f,
-      value: c,
-      onKeyDown: u,
-      onChange: g,
-      onSubmit: j,
-      ref: t
-    }
-  );
 }), $e = C(
   (r, t) => {
     const { className: n, children: o, onMouseEnter: s, onMouseLeave: d, ...c } = r;
@@ -1823,7 +1751,7 @@ const er = (r) => {
       )
     ] });
   }
-), Dr = C((r, t) => {
+), Sr = C((r, t) => {
   const { className: n, items: o, isDisabled: s, ...d } = r;
   y(d);
   const c = R(), v = (u) => /* @__PURE__ */ a.jsxs("div", { className: "bn-flex bn-gap-1 bn-items-center", children: [
@@ -1853,64 +1781,136 @@ const er = (r) => {
       ]
     }
   ) : null;
+}), Tr = C((r, t) => {
+  const { className: n, children: o, onClick: s, label: d, ...c } = r;
+  y(c);
+  const v = R();
+  return /* @__PURE__ */ a.jsx(
+    v.Button.Button,
+    {
+      type: "submit",
+      className: n,
+      "aria-label": d,
+      ref: t,
+      onClick: s,
+      children: o
+    }
+  );
+}), Rr = C((r, t) => {
+  const { className: n, accept: o, value: s, placeholder: d, onChange: c, ...v } = r;
+  y(v);
+  const f = R();
+  return /* @__PURE__ */ a.jsx(
+    f.Input.Input,
+    {
+      type: "file",
+      className: n,
+      ref: t,
+      accept: o,
+      value: s ? s.name : void 0,
+      onChange: async (u) => c == null ? void 0 : c(u.target.files[0]),
+      placeholder: d
+    }
+  );
+}), Er = C((r, t) => {
+  const { className: n, isSelected: o, onClick: s, item: d, id: c, ...v } = r;
+  y(v);
+  const f = Ye(null);
+  return Ue(() => {
+    if (!f.current || !o)
+      return;
+    const u = Ge(
+      f.current,
+      document.querySelector(".bn-grid-suggestion-menu")
+    );
+    u === "top" ? f.current.scrollIntoView(!0) : u === "bottom" && f.current.scrollIntoView(!1);
+  }, [o]), /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      className: n,
+      ref: Ke([t, f]),
+      id: c,
+      role: "option",
+      onClick: s,
+      "aria-selected": o || void 0,
+      children: d.icon
+    }
+  );
+}), Dr = C((r, t) => {
+  const {
+    className: n,
+    children: o,
+    // unused, using "dots" instead
+    columns: s,
+    ...d
+  } = r;
+  return y(d), /* @__PURE__ */ a.jsx(
+    "div",
+    {
+      className: n,
+      style: { gridColumn: `1 / ${s + 1}` },
+      ref: t,
+      children: o
+    }
+  );
 }), _r = {
   FormattingToolbar: {
     Root: $e,
     Button: Ae,
-    Select: Dr
+    Select: Sr
   },
   FilePanel: {
-    Root: br,
-    Button: fr,
-    FileInput: mr,
-    TabPanel: pr,
-    TextInput: gr
+    Root: dr,
+    Button: Tr,
+    FileInput: Rr,
+    TabPanel: cr,
+    TextInput: ur
   },
   LinkToolbar: {
     Root: $e,
     Button: Ae
   },
   SideMenu: {
-    Root: yr,
-    Button: wr
+    Root: pr,
+    Button: gr
   },
   SuggestionMenu: {
-    Root: Cr,
-    Item: jr,
-    EmptyItem: Nr,
-    Label: Sr,
-    Loader: Tr
+    Root: hr,
+    Item: wr,
+    EmptyItem: yr,
+    Label: Cr,
+    Loader: Nr
   },
   GridSuggestionMenu: {
-    Root: nr,
-    Item: rr,
-    EmptyItem: tr,
-    Loader: or
+    Root: vr,
+    Item: Er,
+    EmptyItem: xr,
+    Loader: Dr
   },
   TableHandle: {
-    Root: Rr
+    Root: jr
   },
   Generic: {
     Form: {
       Root: er,
-      TextInput: Er
+      TextInput: nr
     },
     Menu: {
-      Root: sr,
-      Trigger: ir,
-      Dropdown: lr,
-      Divider: cr,
-      Label: ur,
-      Item: dr
+      Root: rr,
+      Trigger: or,
+      Dropdown: ar,
+      Divider: ir,
+      Label: lr,
+      Item: sr
     },
     Popover: {
-      Root: vr,
-      Trigger: xr,
-      Content: hr
+      Root: br,
+      Trigger: fr,
+      Content: mr
     }
   }
 }, $r = (r) => {
-  const { className: t, shadCNComponents: n, ...o } = r, s = Ue(() => ({
+  const { className: t, shadCNComponents: n, ...o } = r, s = We(() => ({
     ...Qt,
     ...n
   }), [n]);