@blocknote/ariakit 0.44.1 → 0.45.0

package/dist/blocknote-ariakit.js

@@ -1,7 +1,7 @@
 import { jsx as r, jsxs as h, Fragment as A } from "react/jsx-runtime";
 import { assertEmpty as u, mergeCSSClasses as b, isSafari as V } from "@blocknote/core";
 import { elementOverflow as B, mergeRefs as D, useFocusWithin as H, useDictionary as j, useBlockNoteContext as K, FormattingToolbarController as Q, getFormattingToolbarItems as z, FormattingToolbar as U, ComponentsContext as W, BlockNoteViewRaw as Z } from "@blocknote/react";
-import { FormProvider as C, FormLabel as _, FormInput as w, MenuButton as F, MenuButtonArrow as J, CheckboxCheck as x, MenuItem as P, MenuGroupLabel as X, MenuSeparator as Y, Menu as ee, MenuProvider as ne, Button as f, TabProvider as te, TabList as ae, Tab as se, TabPanel as re, Popover as oe, PopoverDisclosure as le, PopoverProvider as ce, Group as k, Toolbar as ie, TooltipProvider as R, TooltipAnchor as E, ToolbarItem as L, Tooltip as q, SelectProvider as ue, Select as de, SelectArrow as me, SelectPopover as be, SelectItem as he, SelectItemCheck as ge } from "@ariakit/react";
+import { FormProvider as C, FormLabel as _, FormInput as w, MenuButton as F, MenuButtonArrow as J, CheckboxCheck as y, MenuItem as P, MenuGroupLabel as X, MenuSeparator as Y, Menu as ee, MenuProvider as ne, Button as f, TabProvider as te, TabList as ae, Tab as se, TabPanel as re, Popover as oe, PopoverDisclosure as le, PopoverProvider as ce, Group as k, Toolbar as ie, TooltipProvider as R, TooltipAnchor as E, ToolbarItem as L, Tooltip as q, SelectProvider as ue, Select as de, SelectArrow as me, SelectPopover as be, SelectItem as he, SelectItemCheck as ge } from "@ariakit/react";
 import { forwardRef as d, useRef as G, useEffect as O, useState as pe } from "react";
 const Ne = (n) => {
   const { children: t, ...a } = n;
@@ -12,22 +12,22 @@ const Ne = (n) => {
     name: e,
     label: s,
     variant: o,
-    icon: l,
+    icon: c,
     value: m,
-    autoFocus: c,
+    autoFocus: l,
     placeholder: i,
     disabled: g,
     onKeyDown: p,
     onChange: N,
     onSubmit: v,
     autoComplete: T,
-    rightSection: y,
+    rightSection: x,
     ...$
   } = n;
   return u($), /* @__PURE__ */ h(A, { children: [
     n.label && /* @__PURE__ */ r(_, { name: e, children: s }),
     /* @__PURE__ */ h("div", { className: "bn-ak-input-wrapper", children: [
-      l,
+      c,
       /* @__PURE__ */ r(
         w,
         {
@@ -39,7 +39,7 @@ const Ne = (n) => {
           ref: t,
           name: e,
           value: m,
-          autoFocus: c,
+          autoFocus: l,
           placeholder: i,
           disabled: g,
           onKeyDown: p,
@@ -48,7 +48,7 @@ const Ne = (n) => {
           autoComplete: T
         }
       ),
-      y
+      x
     ] })
   ] });
 }), fe = (n) => {
@@ -87,8 +87,8 @@ const Ne = (n) => {
     }
   );
 }), Te = d((n, t) => {
-  const { className: a, children: e, icon: s, checked: o, subTrigger: l, onClick: m, ...c } = n;
-  return u(c), l ? /* @__PURE__ */ h(
+  const { className: a, children: e, icon: s, checked: o, subTrigger: c, onClick: m, ...l } = n;
+  return u(l), c ? /* @__PURE__ */ h(
     F,
     {
       render: /* @__PURE__ */ r(P, {}),
@@ -99,7 +99,7 @@ const Ne = (n) => {
         s,
         e,
         /* @__PURE__ */ r(J, {}),
-        o !== void 0 && /* @__PURE__ */ r(x, { checked: o })
+        o !== void 0 && /* @__PURE__ */ r(y, { checked: o })
       ]
     }
   ) : /* @__PURE__ */ h(
@@ -111,7 +111,7 @@ const Ne = (n) => {
       children: [
         s,
         e,
-        o !== void 0 && /* @__PURE__ */ r(x, { checked: o })
+        o !== void 0 && /* @__PURE__ */ r(y, { checked: o })
       ]
     }
   );
@@ -143,9 +143,9 @@ const Ne = (n) => {
     children: e,
     icon: s,
     onClick: o,
-    label: l,
+    label: c,
     onDragEnd: m,
-    onDragStart: c,
+    onDragStart: l,
     draggable: i,
     ...g
   } = n;
@@ -153,9 +153,9 @@ const Ne = (n) => {
     f,
     {
       onDragEnd: m,
-      onDragStart: c,
+      onDragStart: l,
       draggable: i,
-      "aria-label": l,
+      "aria-label": c,
       className: b(
         "bn-ak-button bn-ak-secondary",
         a || ""
@@ -175,12 +175,12 @@ const Ne = (n) => {
     tabs: e,
     defaultOpenTab: s,
     openTab: o,
-    setOpenTab: l,
+    setOpenTab: c,
     loading: m,
     // TODO: implement loading
-    ...c
+    ...l
   } = n;
-  return u(c), /* @__PURE__ */ r(
+  return u(l), /* @__PURE__ */ r(
     "div",
     {
       className: b("bn-ak-wrapper", a || ""),
@@ -191,7 +191,7 @@ const Ne = (n) => {
           defaultSelectedId: s,
           selectedId: o,
           setActiveId: (i) => {
-            i && l(i);
+            i && c(i);
           },
           children: [
             /* @__PURE__ */ r(ae, { className: "bn-ak-tab-list", children: e.map((i) => /* @__PURE__ */ r(se, { className: "bn-ak-tab", id: i.name, children: i.name }, i.name)) }),
@@ -201,9 +201,9 @@ const Ne = (n) => {
       )
     }
   );
-}), ye = d((n, t) => {
-  const { className: a, children: e, onClick: s, label: o, ...l } = n;
-  return u(l), /* @__PURE__ */ r(
+}), xe = d((n, t) => {
+  const { className: a, children: e, onClick: s, label: o, ...c } = n;
+  return u(c), /* @__PURE__ */ r(
     f,
     {
       className: b("bn-ak-button", a || ""),
@@ -213,8 +213,8 @@ const Ne = (n) => {
       children: e
     }
   );
-}), xe = d((n, t) => {
-  const { className: a, accept: e, value: s, placeholder: o, onChange: l, ...m } = n;
+}), ye = d((n, t) => {
+  const { className: a, accept: e, value: s, placeholder: o, onChange: c, ...m } = n;
   return u(m), /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(
     w,
     {
@@ -224,7 +224,7 @@ const Ne = (n) => {
       type: "file",
       accept: e,
       value: s ? s.name : void 0,
-      onChange: async (c) => l == null ? void 0 : l(c.target.files[0]),
+      onChange: async (l) => c == null ? void 0 : c(l.target.files[0]),
       placeholder: o
     }
   ) });
@@ -232,7 +232,7 @@ const Ne = (n) => {
   const { className: a, children: e, ...s } = n;
   return u(s), /* @__PURE__ */ r("div", { className: a, ref: t, children: e });
 }), Be = d((n, t) => {
-  const { className: a, value: e, placeholder: s, onKeyDown: o, onChange: l, ...m } = n;
+  const { className: a, value: e, placeholder: s, onKeyDown: o, onChange: c, ...m } = n;
   return u(m), /* @__PURE__ */ r(C, { children: /* @__PURE__ */ r(
     w,
     {
@@ -240,7 +240,7 @@ const Ne = (n) => {
       name: "panel-input",
       value: e,
       placeholder: s,
-      onChange: l,
+      onChange: c,
       onKeyDown: o,
       "data-test": "embed-input",
       ref: t
@@ -283,9 +283,9 @@ const Ne = (n) => {
     children: e,
     icon: s,
     onClick: o,
-    label: l,
+    label: c,
     onDragEnd: m,
-    onDragStart: c,
+    onDragStart: l,
     draggable: i,
     ...g
   } = n;
@@ -293,9 +293,9 @@ const Ne = (n) => {
     f,
     {
       onDragEnd: m,
-      onDragStart: c,
+      onDragStart: l,
       draggable: i,
-      "aria-label": l,
+      "aria-label": c,
       className: b(
         "bn-ak-button bn-ak-secondary",
         a || ""
@@ -310,8 +310,8 @@ const Ne = (n) => {
     }
   );
 }), qe = d((n, t) => {
-  const { className: a, children: e, id: s, columns: o, ...l } = n;
-  return u(l), /* @__PURE__ */ r(
+  const { className: a, children: e, id: s, columns: o, ...c } = n;
+  return u(c), /* @__PURE__ */ r(
     "div",
     {
       className: a,
@@ -334,23 +334,23 @@ const Ne = (n) => {
     }
   );
 }), Oe = d((n, t) => {
-  const { className: a, isSelected: e, onClick: s, item: o, id: l, ...m } = n;
+  const { className: a, isSelected: e, onClick: s, item: o, id: c, ...m } = n;
   u(m);
-  const c = G(null);
+  const l = G(null);
   return O(() => {
-    if (!c.current || !e)
+    if (!l.current || !e)
       return;
     const i = B(
-      c.current,
-      document.querySelector(".bn-grid-suggestion-menu")
+      l.current,
+      l.current.closest(".bn-grid-suggestion-menu")
     );
-    i === "top" ? c.current.scrollIntoView(!0) : i === "bottom" && c.current.scrollIntoView(!1);
+    i === "top" ? l.current.scrollIntoView(!0) : i === "bottom" && l.current.scrollIntoView(!1);
   }, [e]), /* @__PURE__ */ r(
     "div",
     {
       className: a,
-      ref: D([t, c]),
-      id: l,
+      ref: D([t, l]),
+      id: c,
       role: "option",
       onClick: s,
       "aria-selected": e || void 0,
@@ -397,24 +397,23 @@ const Ne = (n) => {
     }
   );
 }), He = d((n, t) => {
-  const { className: a, item: e, isSelected: s, onClick: o, id: l, ...m } = n;
+  const { className: a, item: e, isSelected: s, onClick: o, id: c, ...m } = n;
   u(m);
-  const c = G(null);
+  const l = G(null);
   return O(() => {
-    if (!c.current || !s)
+    if (!l.current || !s)
       return;
     const i = B(
-      c.current,
-      document.querySelector(".bn-suggestion-menu, #ai-suggestion-menu")
-      // TODO
+      l.current,
+      l.current.closest(".bn-suggestion-menu, #ai-suggestion-menu")
     );
-    i === "top" ? c.current.scrollIntoView(!0) : i === "bottom" && c.current.scrollIntoView(!1);
+    i === "top" ? l.current.scrollIntoView(!0) : i === "bottom" && l.current.scrollIntoView(!1);
   }, [s]), /* @__PURE__ */ h(
     "div",
     {
       className: b("bn-ak-menu-item", a || ""),
-      ref: D([t, c]),
-      id: l,
+      ref: D([t, l]),
+      id: c,
       onMouseDown: (i) => i.preventDefault(),
       onClick: o,
       role: "option",
@@ -467,8 +466,8 @@ const Ne = (n) => {
     }
   ) });
 }), Qe = d((n, t) => {
-  const { children: a, className: e, onMouseDown: s, onClick: o, ...l } = n;
-  return u(l, !1), /* @__PURE__ */ r(
+  const { children: a, className: e, onMouseDown: s, onClick: o, ...c } = n;
+  return u(c, !1), /* @__PURE__ */ r(
     f,
     {
       className: b(
@@ -478,7 +477,7 @@ const Ne = (n) => {
       ref: t,
       onMouseDown: s,
       onClick: o,
-      ...l,
+      ...c,
       children: a
     }
   );
@@ -488,9 +487,9 @@ const Ne = (n) => {
     children: e,
     draggable: s,
     onDragStart: o,
-    onDragEnd: l,
+    onDragEnd: c,
     style: m,
-    label: c,
+    label: l,
     ...i
   } = n;
   return u(i, !1), /* @__PURE__ */ r(
@@ -501,10 +500,10 @@ const Ne = (n) => {
         a || ""
       ),
       ref: t,
-      "aria-label": c,
+      "aria-label": l,
       draggable: s,
       onDragStart: o,
-      onDragEnd: l,
+      onDragEnd: c,
       style: m,
       ...i,
       children: e
@@ -517,7 +516,7 @@ const Ne = (n) => {
       children: e,
       onMouseEnter: s,
       onMouseLeave: o,
-      variant: l,
+      variant: c,
       ...m
     } = n;
     return u(m), /* @__PURE__ */ r(
@@ -538,9 +537,9 @@ const Ne = (n) => {
       children: e,
       mainTooltip: s,
       secondaryTooltip: o,
-      icon: l,
+      icon: c,
       isSelected: m,
-      isDisabled: c,
+      isDisabled: l,
       onClick: i,
       label: g,
       variant: p,
@@ -564,11 +563,11 @@ const Ne = (n) => {
               onClick: i,
               "aria-pressed": m,
               "data-selected": m ? "true" : void 0,
-              disabled: c || !1,
+              disabled: l || !1,
               ref: t,
               ...N,
               children: [
-                l,
+                c,
                 e
               ]
             }
@@ -584,11 +583,11 @@ const Ne = (n) => {
 ), I = d((n, t) => {
   const { className: a, items: e, isDisabled: s, ...o } = n;
   u(o);
-  const l = n.items.filter((c) => c.isSelected)[0], m = (c) => {
+  const c = n.items.filter((l) => l.isSelected)[0], m = (l) => {
     var i, g;
-    (g = (i = e.find((p) => p.text === c)).onClick) == null || g.call(i);
+    (g = (i = e.find((p) => p.text === l)).onClick) == null || g.call(i);
   };
-  return /* @__PURE__ */ h(ue, { value: l.text, setValue: m, children: [
+  return /* @__PURE__ */ h(ue, { value: c.text, setValue: m, children: [
     /* @__PURE__ */ h(
       de,
       {
@@ -597,9 +596,9 @@ const Ne = (n) => {
         "aria-label": "Text alignment",
         render: /* @__PURE__ */ r(L, {}),
         children: [
-          l.icon,
+          c.icon,
           " ",
-          l.text,
+          c.text,
           " ",
           /* @__PURE__ */ r(me, {})
         ]
@@ -611,18 +610,18 @@ const Ne = (n) => {
         className: b("bn-ak-popover", a || ""),
         ref: t,
         gutter: 4,
-        children: e.map((c) => /* @__PURE__ */ h(
+        children: e.map((l) => /* @__PURE__ */ h(
           he,
           {
             className: "bn-ak-select-item",
-            value: c.text,
+            value: l.text,
             children: [
-              c.icon,
-              c.text,
-              c.text === l.text && /* @__PURE__ */ r(ge, {})
+              l.icon,
+              l.text,
+              l.text === c.text && /* @__PURE__ */ r(ge, {})
             ]
           },
-          c.text
+          l.text
         ))
       }
     )
@@ -633,9 +632,9 @@ const Ne = (n) => {
     children: e,
     selected: s,
     headerText: o,
-    onFocus: l,
+    onFocus: c,
     onBlur: m,
-    tabIndex: c,
+    tabIndex: l,
     ...i
   } = n;
   return u(i, !1), /* @__PURE__ */ h(
@@ -646,9 +645,9 @@ const Ne = (n) => {
         "bn-ak-hovercard",
         s && "selected"
       ),
-      onFocus: l,
+      onFocus: c,
       onBlur: m,
-      tabIndex: c,
+      tabIndex: l,
       ref: t,
       children: [
         o && /* @__PURE__ */ r("div", { className: "bn-header-text", children: o }),
@@ -680,7 +679,7 @@ const Ne = (n) => {
     }
   );
 }), _e = d((n, t) => {
-  const { authorInfo: a, timeString: e, edited: s, ...o } = n, l = j();
+  const { authorInfo: a, timeString: e, edited: s, ...o } = n, c = j();
   return u(o, !1), a === "loading" ? /* @__PURE__ */ h(k, { className: "bn-ak-author-info", children: [
     /* @__PURE__ */ r("div", { className: "bn-ak-avatar bn-ak-skeleton" }),
     /* @__PURE__ */ r("div", { className: "bn-ak-username bn-ak-skeleton" })
@@ -698,7 +697,7 @@ const Ne = (n) => {
       /* @__PURE__ */ h("span", { children: [
         e,
         " ",
-        s && `(${l.comments.edited})`
+        s && `(${c.comments.edited})`
       ] })
     ] })
   ] });
@@ -708,9 +707,9 @@ const Ne = (n) => {
     showActions: e,
     authorInfo: s,
     timeString: o,
-    actions: l,
+    actions: c,
     children: m,
-    edited: c,
+    edited: l,
     emojiPickerOpen: i,
     // Unused
     ...g
@@ -725,7 +724,7 @@ const Ne = (n) => {
       onMouseEnter: () => N(!0),
       onMouseLeave: () => N(!1),
       children: [
-        l && (e === !0 || e === void 0 || e === "hover" && p || v) ? /* @__PURE__ */ r(
+        c && (e === !0 || e === void 0 || e === "hover" && p || v) ? /* @__PURE__ */ r(
           k,
           {
             ref: T,
@@ -735,7 +734,7 @@ const Ne = (n) => {
               top: 0,
               zIndex: 10
             },
-            children: l
+            children: c
           }
         ) : null,
         /* @__PURE__ */ r(_e, { ...n }),
@@ -744,8 +743,8 @@ const Ne = (n) => {
     }
   );
 }), Xe = d((n, t) => {
-  const { className: a, onFocus: e, onBlur: s, autoFocus: o, editor: l, editable: m, ...c } = n;
-  u(c, !1);
+  const { className: a, onFocus: e, onBlur: s, autoFocus: o, editor: c, editable: m, ...l } = n;
+  u(l, !1);
   const i = K();
   return /* @__PURE__ */ r(
     an,
@@ -782,9 +781,9 @@ const Ne = (n) => {
     text: e,
     icon: s,
     isSelected: o,
-    mainTooltip: l,
+    mainTooltip: c,
     secondaryTooltip: m,
-    onClick: c,
+    onClick: l,
     onMouseEnter: i,
     ...g
   } = n;
@@ -798,7 +797,7 @@ const Ne = (n) => {
         o && "bn-ak-primary"
       ),
       "aria-selected": o === !0,
-      onClick: (N) => c == null ? void 0 : c(N),
+      onClick: (N) => l == null ? void 0 : l(N),
       onMouseEnter: i,
       ref: t,
       children: [
@@ -807,10 +806,10 @@ const Ne = (n) => {
       ]
     }
   );
-  return l ? /* @__PURE__ */ h(R, { children: [
+  return c ? /* @__PURE__ */ h(R, { children: [
     /* @__PURE__ */ r(E, { render: p }),
     /* @__PURE__ */ h(q, { className: "bn-ak-tooltip", portal: !1, children: [
-      /* @__PURE__ */ r("span", { children: l }),
+      /* @__PURE__ */ r("span", { children: c }),
       m && /* @__PURE__ */ r("span", { children: m })
     ] })
   ] }) : p;
@@ -832,8 +831,8 @@ const Ne = (n) => {
   },
   FilePanel: {
     Root: we,
-    Button: ye,
-    FileInput: xe,
+    Button: xe,
+    FileInput: ye,
     TabPanel: Pe,
     TextInput: Be
   },