@blocknote/shadcn 0.41.1 → 0.42.1

package/dist/blocknote-shadcn.js

@@ -1,18 +1,18 @@
-import { jsx as o, jsxs as v, Fragment as O } from "react/jsx-runtime";
+import { jsx as o, jsxs as v, Fragment as U } from "react/jsx-runtime";
 import { assertEmpty as m, mergeCSSClasses as H } from "@blocknote/core";
-import { elementOverflow as P, mergeRefs as _, useFocusWithin as K, useDictionary as Q, useBlockNoteContext as W, FormattingToolbarController as Z, getFormattingToolbarItems as J, FormattingToolbar as X, ComponentsContext as Y, BlockNoteViewRaw as ee } from "@blocknote/react";
-import * as R from "react";
-import { createContext as te, useContext as ne, forwardRef as p, useMemo as F, useRef as L, useEffect as E, useState as oe } from "react";
+import { elementOverflow as _, mergeRefs as R, useFocusWithin as K, useDictionary as Q, useBlockNoteContext as W, FormattingToolbarController as Z, getFormattingToolbarItems as J, FormattingToolbar as X, ComponentsContext as Y, BlockNoteViewRaw as ee } from "@blocknote/react";
+import * as F from "react";
+import { createContext as te, useContext as ne, forwardRef as p, useMemo as L, useRef as E, useEffect as V, useState as oe } from "react";
 import { FormProvider as ae, useForm as re } from "react-hook-form";
-import * as z from "@radix-ui/react-avatar";
+import * as D from "@radix-ui/react-avatar";
 import { clsx as se } from "clsx";
 import { twMerge as ie } from "tailwind-merge";
-import { Slot as V } from "@radix-ui/react-slot";
-import { cva as D } from "class-variance-authority";
+import { Slot as A } from "@radix-ui/react-slot";
+import { cva as I } from "class-variance-authority";
 import * as w from "@radix-ui/react-dropdown-menu";
-import { ChevronRightIcon as de, CheckIcon as A, ChevronDownIcon as j, ChevronUpIcon as le, ChevronRight as ce } from "lucide-react";
+import { ChevronRightIcon as de, CheckIcon as j, ChevronDownIcon as q, ChevronUpIcon as le, ChevronRight as ce } from "lucide-react";
 import * as ue from "@radix-ui/react-label";
-import * as I from "@radix-ui/react-popover";
+import * as B from "@radix-ui/react-popover";
 import * as x from "@radix-ui/react-select";
 import * as T from "@radix-ui/react-tabs";
 import * as me from "@radix-ui/react-toggle";
@@ -25,7 +25,7 @@ function pe({
   ...t
 }) {
   return /* @__PURE__ */ o(
-    z.Root,
+    D.Root,
     {
       "data-slot": "avatar",
       className: i(
@@ -41,7 +41,7 @@ function ge({
   ...t
 }) {
   return /* @__PURE__ */ o(
-    z.Image,
+    D.Image,
     {
       "data-slot": "avatar-image",
       className: i("aspect-square size-full", e),
@@ -54,7 +54,7 @@ function ve({
   ...t
 }) {
   return /* @__PURE__ */ o(
-    z.Fallback,
+    D.Fallback,
     {
       "data-slot": "avatar-fallback",
       className: i(
@@ -65,7 +65,7 @@ function ve({
     }
   );
 }
-const fe = D(
+const fe = I(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
@@ -88,7 +88,7 @@ function be({
   ...a
 }) {
   return /* @__PURE__ */ o(
-    n ? V : "span",
+    n ? A : "span",
     {
       "data-slot": "badge",
       className: i(fe({ variant: t }), e),
@@ -96,7 +96,7 @@ function be({
     }
   );
 }
-const he = D(
+const he = I(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
@@ -129,7 +129,7 @@ function xe({
   ...r
 }) {
   return /* @__PURE__ */ o(
-    a ? V : "button",
+    a ? A : "button",
     {
       "data-slot": "button",
       className: i(he({ variant: t, size: n, className: e })),
@@ -231,7 +231,7 @@ function ke({
       checked: n,
       ...a,
       children: [
-        /* @__PURE__ */ o("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ o(w.ItemIndicator, { children: /* @__PURE__ */ o(A, { className: "size-4" }) }) }),
+        /* @__PURE__ */ o("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ o(w.ItemIndicator, { children: /* @__PURE__ */ o(j, { className: "size-4" }) }) }),
         t
       ]
     }
@@ -329,10 +329,10 @@ function Pe({
   );
 }
 const _e = ae;
-R.createContext(
+F.createContext(
   {}
 );
-R.createContext(
+F.createContext(
   {}
 );
 function Re({ className: e, type: t, ...n }) {
@@ -354,12 +354,12 @@ function Re({ className: e, type: t, ...n }) {
 function Fe({
   ...e
 }) {
-  return /* @__PURE__ */ o(I.Root, { "data-slot": "popover", ...e });
+  return /* @__PURE__ */ o(B.Root, { "data-slot": "popover", ...e });
 }
 function Le({
   ...e
 }) {
-  return /* @__PURE__ */ o(I.Trigger, { "data-slot": "popover-trigger", ...e });
+  return /* @__PURE__ */ o(B.Trigger, { "data-slot": "popover-trigger", ...e });
 }
 function Ee({
   className: e,
@@ -368,7 +368,7 @@ function Ee({
   ...a
 }) {
   return /* @__PURE__ */ o(
-    I.Content,
+    B.Content,
     {
       "data-slot": "popover-content",
       align: t,
@@ -409,7 +409,7 @@ function je({
       ...a,
       children: [
         n,
-        /* @__PURE__ */ o(x.Icon, { asChild: !0, children: /* @__PURE__ */ o(j, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ o(x.Icon, { asChild: !0, children: /* @__PURE__ */ o(q, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -443,7 +443,7 @@ function qe({
             children: t
           }
         ),
-        /* @__PURE__ */ o(Ue, {})
+        /* @__PURE__ */ o(Oe, {})
       ]
     }
   );
@@ -463,7 +463,7 @@ function $e({
       ),
       ...n,
       children: [
-        /* @__PURE__ */ o("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ o(x.ItemIndicator, { children: /* @__PURE__ */ o(A, { className: "size-4" }) }) }),
+        /* @__PURE__ */ o("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ o(x.ItemIndicator, { children: /* @__PURE__ */ o(j, { className: "size-4" }) }) }),
         /* @__PURE__ */ o(x.ItemText, { children: t })
       ]
     }
@@ -486,7 +486,7 @@ function Ge({
     }
   );
 }
-function Ue({
+function Oe({
   className: e,
   ...t
 }) {
@@ -499,11 +499,11 @@ function Ue({
         e
       ),
       ...t,
-      children: /* @__PURE__ */ o(j, { className: "size-4" })
+      children: /* @__PURE__ */ o(q, { className: "size-4" })
     }
   );
 }
-function Oe({ className: e, ...t }) {
+function Ue({ className: e, ...t }) {
   return /* @__PURE__ */ o(
     "div",
     {
@@ -571,7 +571,7 @@ function We({
     }
   );
 }
-const Ze = D(
+const Ze = I(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
@@ -606,7 +606,7 @@ function Je({
     }
   );
 }
-function q({
+function $({
   delayDuration: e = 0,
   ...t
 }) {
@@ -622,7 +622,7 @@ function q({
 function Xe({
   ...e
 }) {
-  return /* @__PURE__ */ o(q, { children: /* @__PURE__ */ o(N.Root, { "data-slot": "tooltip", ...e }) });
+  return /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(N.Root, { "data-slot": "tooltip", ...e }) });
 }
 function Ye({
   ...e
@@ -702,7 +702,7 @@ const tt = {
     SelectValue: Ae
   },
   Skeleton: {
-    Skeleton: Oe
+    Skeleton: Ue
   },
   Tabs: {
     Tabs: He,
@@ -716,12 +716,12 @@ const tt = {
   Tooltip: {
     Tooltip: Xe,
     TooltipContent: et,
-    TooltipProvider: q,
+    TooltipProvider: $,
     TooltipTrigger: Ye
   }
-}, $ = te(void 0);
+}, G = te(void 0);
 function f() {
-  return ne($);
+  return ne(G);
 }
 const nt = (e) => {
   const { children: t, ...n } = e;
@@ -744,12 +744,12 @@ const nt = (e) => {
     onChange: h,
     onSubmit: C,
     autoComplete: S,
-    rightSection: G,
+    rightSection: y,
     // TODO: add rightSection
-    ...U
+    ...O
   } = e;
-  m(U);
-  const B = f();
+  m(O);
+  const P = f();
   return /* @__PURE__ */ v(
     "div",
     {
@@ -761,9 +761,9 @@ const nt = (e) => {
       children: [
         d,
         /* @__PURE__ */ v("div", { className: "flex-1", children: [
-          r && /* @__PURE__ */ o(B.Label.Label, { htmlFor: r, children: r }),
+          r && /* @__PURE__ */ o(P.Label.Label, { htmlFor: r, children: r }),
           /* @__PURE__ */ o(
-            B.Input.Input,
+            P.Input.Input,
             {
               className: i(n, "h-auto border-none p-0"),
               id: r,
@@ -779,7 +779,7 @@ const nt = (e) => {
             }
           )
         ] }),
-        G
+        y
       ]
     }
   );
@@ -826,7 +826,7 @@ const nt = (e) => {
 }, st = (e) => {
   const { children: t, sub: n, ...a } = e;
   m(a);
-  const r = f(), s = F(
+  const r = f(), s = L(
     () => at(
       r.DropdownMenu.DropdownMenuTrigger
     ),
@@ -856,7 +856,7 @@ const nt = (e) => {
   const { className: n, children: a, icon: r, checked: s, subTrigger: d, onClick: c, ...u } = e;
   m(u);
   const l = f();
-  return d ? /* @__PURE__ */ v(O, { children: [
+  return d ? /* @__PURE__ */ v(U, { children: [
     r,
     a
   ] }) : s !== void 0 ? /* @__PURE__ */ v(
@@ -1025,7 +1025,7 @@ const nt = (e) => {
       sideOffset: 8,
       className: i(
         n,
-        "flex flex-col gap-2",
+        "z-[10000] flex flex-col gap-2",
         a === "panel-popover" ? "w-fit max-w-none border-none p-0 shadow-none" : ""
       ),
       ref: t,
@@ -1128,11 +1128,11 @@ const nt = (e) => {
 }), Tt = p((e, t) => {
   const n = f(), { className: a, item: r, isSelected: s, onClick: d, id: c, ...u } = e;
   m(u);
-  const l = L(null);
-  return E(() => {
+  const l = E(null);
+  return V(() => {
     if (!l.current || !s)
       return;
-    const g = P(
+    const g = _(
       l.current,
       document.querySelector(".bn-suggestion-menu, #ai-suggestion-menu")
       // TODO
@@ -1149,7 +1149,7 @@ const nt = (e) => {
         a
       ),
       "data-highlighted": !0,
-      ref: _([t, l]),
+      ref: R([t, l]),
       id: c,
       onMouseDown: (g) => g.preventDefault(),
       onClick: d,
@@ -1271,7 +1271,7 @@ const nt = (e) => {
       children: a
     }
   );
-}), y = p(
+}), k = p(
   (e, t) => {
     const {
       className: n,
@@ -1298,7 +1298,7 @@ const nt = (e) => {
       }
     ) });
   }
-), k = p(
+), M = p(
   (e, t) => {
     const {
       className: n,
@@ -1370,7 +1370,7 @@ const nt = (e) => {
       )
     ] });
   }
-), M = p((e, t) => {
+), z = p((e, t) => {
   const { className: n, items: a, isDisabled: r, ...s } = e;
   m(s);
   const d = f(), c = (l) => /* @__PURE__ */ v("div", { className: "flex items-center gap-1", children: [
@@ -1506,22 +1506,24 @@ const nt = (e) => {
     timeString: s,
     actions: d,
     edited: c,
-    children: u,
-    ...l
+    emojiPickerOpen: u,
+    // Unused
+    children: l,
+    ...g
   } = e;
-  m(l);
-  const [g, b] = oe(!1), { focused: h, ref: C } = K(), S = d && (a === !0 || a === void 0 || a === "hover" && g || h);
+  m(g);
+  const [b, h] = oe(!1), { focused: C, ref: S } = K(), y = d && (a === !0 || a === void 0 || a === "hover" && b || C);
   return /* @__PURE__ */ v(
     "div",
     {
       ref: t,
       className: i(n, "relative flex flex-col gap-2"),
-      onMouseEnter: () => b(!0),
-      onMouseLeave: () => b(!1),
+      onMouseEnter: () => h(!0),
+      onMouseLeave: () => h(!1),
       children: [
-        S ? /* @__PURE__ */ o("div", { className: "absolute right-0 top-0 z-10", ref: C, children: d }) : null,
+        y ? /* @__PURE__ */ o("div", { className: "absolute right-0 top-0 z-10", ref: S, children: d }) : null,
         /* @__PURE__ */ o(Pt, { ...e }),
-        u
+        l
       ]
     }
   );
@@ -1647,11 +1649,11 @@ const nt = (e) => {
 }), jt = p((e, t) => {
   const { className: n, isSelected: a, onClick: r, item: s, id: d, ...c } = e;
   m(c);
-  const u = L(null);
-  return E(() => {
+  const u = E(null);
+  return V(() => {
     if (!u.current || !a)
       return;
-    const l = P(
+    const l = _(
       u.current,
       document.querySelector(".bn-grid-suggestion-menu")
     );
@@ -1666,7 +1668,7 @@ const nt = (e) => {
         "text-lg!",
         n
       ),
-      ref: _([t, u]),
+      ref: R([t, u]),
       id: d,
       role: "option",
       onClick: r,
@@ -1693,9 +1695,9 @@ const nt = (e) => {
   );
 }), $t = {
   FormattingToolbar: {
-    Root: y,
-    Button: k,
-    Select: M
+    Root: k,
+    Button: M,
+    Select: z
   },
   FilePanel: {
     Root: mt,
@@ -1705,9 +1707,9 @@ const nt = (e) => {
     TextInput: gt
   },
   LinkToolbar: {
-    Root: y,
-    Button: k,
-    Select: M
+    Root: k,
+    Button: M,
+    Select: z
   },
   SideMenu: {
     Root: ht,
@@ -1743,9 +1745,9 @@ const nt = (e) => {
       Group: Et
     },
     Toolbar: {
-      Root: y,
-      Button: k,
-      Select: M
+      Root: k,
+      Button: M,
+      Select: z
     },
     Form: {
       Root: nt,
@@ -1767,11 +1769,11 @@ const nt = (e) => {
     }
   }
 }, Gt = (e) => {
-  const { className: t, shadCNComponents: n, ...a } = e, r = F(() => ({
+  const { className: t, shadCNComponents: n, ...a } = e, r = L(() => ({
     ...tt,
     ...n
   }), [n]);
-  return /* @__PURE__ */ o($.Provider, { value: r, children: /* @__PURE__ */ o(Y.Provider, { value: $t, children: /* @__PURE__ */ o(
+  return /* @__PURE__ */ o(G.Provider, { value: r, children: /* @__PURE__ */ o(Y.Provider, { value: $t, children: /* @__PURE__ */ o(
     ee,
     {
       className: H("bn-shadcn", t || ""),
@@ -1781,7 +1783,7 @@ const nt = (e) => {
 };
 export {
   Gt as BlockNoteView,
-  $ as ShadCNComponentsContext,
+  G as ShadCNComponentsContext,
   tt as ShadCNDefaultComponents,
   $t as components,
   f as useShadCNComponentsContext