@blocknote/mantine 0.13.5 → 0.14.1

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1717356262660,"assets":[{"name":"blocknote-mantine.umd.cjs","size":29902},{"name":"blocknote-mantine.umd.cjs.map","size":349996}],"chunks":[{"id":"ec22802","entry":true,"initial":true,"files":["blocknote-mantine.umd.cjs"],"names":["index"]}],"modules":[{"name":"../../node_modules/react/jsx-runtime.js?commonjs-module","size":31,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.production.min.js?commonjs-exports","size":40,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.production.min.js","size":1200,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.development.js?commonjs-exports","size":37,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.development.js","size":43104,"chunks":["ec22802"]},{"name":"../../node_modules/react/jsx-runtime.js","size":225,"chunks":["ec22802"]},{"name":"./src/BlockNoteTheme.ts","size":2185,"chunks":["ec22802"]},{"name":"./src/form/TextInput.tsx","size":594,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconBase.mjs","size":4014,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/hi/index.mjs","size":744,"chunks":["ec22802"]},{"name":"./src/menu/Menu.tsx","size":4102,"chunks":["ec22802"]},{"name":"./src/panel/Panel.tsx","size":1129,"chunks":["ec22802"]},{"name":"./src/panel/PanelButton.tsx","size":364,"chunks":["ec22802"]},{"name":"./src/panel/PanelFileInput.tsx","size":386,"chunks":["ec22802"]},{"name":"./src/panel/PanelTab.tsx","size":216,"chunks":["ec22802"]},{"name":"./src/panel/PanelTextInput.tsx","size":411,"chunks":["ec22802"]},{"name":"./src/popover/Popover.tsx","size":795,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenu.tsx","size":260,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenuButton.tsx","size":811,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenu.tsx","size":326,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuEmptyItem.tsx","size":376,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuItem.tsx","size":1486,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLabel.tsx","size":246,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLoader.tsx","size":302,"chunks":["ec22802"]},{"name":"./src/tableHandle/TableHandle.tsx","size":454,"chunks":["ec22802"]},{"name":"./src/toolbar/Toolbar.tsx","size":581,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarButton.tsx","size":2350,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarSelect.tsx","size":1913,"chunks":["ec22802"]},{"name":"./src/style.css","size":17,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":3405,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":2429,"chunks":["ec22802"]}]}
+{"builtAt":1718240408085,"assets":[{"name":"blocknote-mantine.umd.cjs","size":30368},{"name":"blocknote-mantine.umd.cjs.map","size":354058}],"chunks":[{"id":"ec22802","entry":true,"initial":true,"files":["blocknote-mantine.umd.cjs"],"names":["index"]}],"modules":[{"name":"../../node_modules/react/jsx-runtime.js?commonjs-module","size":31,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.production.min.js?commonjs-exports","size":40,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.production.min.js","size":1200,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.development.js?commonjs-exports","size":37,"chunks":["ec22802"]},{"name":"../../node_modules/react/cjs/react-jsx-runtime.development.js","size":44073,"chunks":["ec22802"]},{"name":"../../node_modules/react/jsx-runtime.js","size":225,"chunks":["ec22802"]},{"name":"./src/BlockNoteTheme.ts","size":2185,"chunks":["ec22802"]},{"name":"./src/form/TextInput.tsx","size":582,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/lib/iconBase.mjs","size":4014,"chunks":["ec22802"]},{"name":"../../node_modules/react-icons/hi/index.mjs","size":744,"chunks":["ec22802"]},{"name":"./src/menu/Menu.tsx","size":4155,"chunks":["ec22802"]},{"name":"./src/panel/Panel.tsx","size":1057,"chunks":["ec22802"]},{"name":"./src/panel/PanelButton.tsx","size":352,"chunks":["ec22802"]},{"name":"./src/panel/PanelFileInput.tsx","size":374,"chunks":["ec22802"]},{"name":"./src/panel/PanelTab.tsx","size":216,"chunks":["ec22802"]},{"name":"./src/panel/PanelTextInput.tsx","size":399,"chunks":["ec22802"]},{"name":"./src/popover/Popover.tsx","size":759,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenu.tsx","size":316,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenuButton.tsx","size":787,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenu.tsx","size":314,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuEmptyItem.tsx","size":352,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuItem.tsx","size":1806,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLabel.tsx","size":234,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLoader.tsx","size":290,"chunks":["ec22802"]},{"name":"./src/tableHandle/TableHandle.tsx","size":459,"chunks":["ec22802"]},{"name":"./src/toolbar/Toolbar.tsx","size":569,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarButton.tsx","size":2278,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarSelect.tsx","size":1841,"chunks":["ec22802"]},{"name":"./src/style.css","size":17,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":3405,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":2464,"chunks":["ec22802"]}]}

package/package.json

@@ -2,8 +2,11 @@
   "name": "@blocknote/mantine",
   "homepage": "https://github.com/TypeCellOS/BlockNote",
   "private": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "license": "MPL-2.0",
-  "version": "0.13.5",
+  "version": "0.14.1",
   "files": [
     "dist",
     "types",
@@ -48,10 +51,10 @@
     "clean": "rimraf dist && rimraf types"
   },
   "dependencies": {
-    "@blocknote/core": "^0.13.5",
-    "@blocknote/react": "^0.13.5",
-    "@mantine/core": "^7.5.0",
-    "@mantine/hooks": "^7.5.0",
+    "@blocknote/core": "^0.14.1",
+    "@blocknote/react": "^0.14.1",
+    "@mantine/core": "^7.10.1",
+    "@mantine/hooks": "^7.10.1",
     "@mantine/utils": "^6.0.21",
     "react": "^18",
     "react-dom": "^18",
@@ -84,5 +87,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "1747bb10839efe6f00061fe94040a8795aa2f9a8"
+  "gitHead": "de69d1d3902499577ceb870499a03170c66380b1"
 }

package/src/form/TextInput.tsx

@@ -1,4 +1,4 @@
-import * as Mantine from "@mantine/core";
+import { TextInput as MantineTextInput } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -25,7 +25,7 @@ export const TextInput = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Mantine.TextInput
+    <MantineTextInput
       size={"xs"}
       className={className}
       ref={ref}

package/src/index.tsx

@@ -160,7 +160,11 @@ export const BlockNoteView = <
       {/* as proposed here:  https://github.com/orgs/mantinedev/discussions/5685 */}
       <MantineProvider
         theme={mantineTheme}
-        cssVariablesSelector=".bn-container">
+        cssVariablesSelector=".bn-container"
+        // This gets the element to set `data-mantine-color-scheme` on. Since we
+        // don't need this attribute (we use our own theming API), we return
+        // undefined here.
+        getRootElement={() => undefined}>
         <BlockNoteViewRaw
           theme={typeof theme === "object" ? undefined : theme}
           {...rest}

package/src/menu/Menu.tsx

@@ -1,4 +1,8 @@
-import * as Mantine from "@mantine/core";
+import {
+  CheckIcon as MantineCheckIcon,
+  Menu as MantineMenu,
+} from "@mantine/core";
+import { mergeRefs } from "@mantine/hooks";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -81,6 +85,8 @@ const SubMenu = forwardRef<
 
   const [opened, setOpened] = useState(false);
 
+  const itemRef = useRef<HTMLButtonElement | null>(null);
+
   const menuCloseTimer = useRef<ReturnType<typeof setTimeout> | undefined>();
 
   const mouseLeave = useCallback(() => {
@@ -105,13 +111,17 @@ const SubMenu = forwardRef<
         onMenuMouseOver: mouseOver,
         onMenuMouseLeave: mouseLeave,
       }}>
-      <Mantine.Menu.Item
+      <MantineMenu.Item
         className="bn-menu-item bn-mt-sub-menu-item"
-        ref={ref}
+        ref={mergeRefs(ref, itemRef)}
         onMouseOver={mouseOver}
         onMouseLeave={mouseLeave}>
-        <Mantine.Menu
-          withinPortal={false}
+        <MantineMenu
+          portalProps={{
+            target: itemRef.current
+              ? itemRef.current.parentElement!
+              : undefined,
+          }}
           middlewares={{ flip: true, shift: true, inline: false, size: true }}
           trigger={"hover"}
           opened={opened}
@@ -119,8 +129,8 @@ const SubMenu = forwardRef<
           onOpen={() => onOpenChange?.(true)}
           position={position}>
           {children}
-        </Mantine.Menu>
-      </Mantine.Menu.Item>
+        </MantineMenu>
+      </MantineMenu.Item>
     </SubMenuContext.Provider>
   );
 });
@@ -135,14 +145,14 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
   }
 
   return (
-    <Mantine.Menu
+    <MantineMenu
       withinPortal={false}
       middlewares={{ flip: true, shift: true, inline: false, size: true }}
       onClose={() => onOpenChange?.(false)}
       onOpen={() => onOpenChange?.(true)}
       position={position}>
       {children}
-    </Mantine.Menu>
+    </MantineMenu>
   );
 };
 
@@ -167,13 +177,13 @@ export const MenuItem = forwardRef<
   }
 
   return (
-    <Mantine.Menu.Item
+    <MantineMenu.Item
       className={className}
       ref={ref}
       leftSection={icon}
       rightSection={
         checked ? (
-          <Mantine.CheckIcon size={10} />
+          <MantineCheckIcon size={10} />
         ) : checked === false ? (
           <div className={"bn-tick-space"} />
         ) : null
@@ -181,7 +191,7 @@ export const MenuItem = forwardRef<
       onClick={onClick}
       {...rest}>
       {children}
-    </Mantine.Menu.Item>
+    </MantineMenu.Item>
   );
 });
 
@@ -196,7 +206,7 @@ export const MenuTrigger = (
 
   assertEmpty(rest);
 
-  return <Mantine.Menu.Target>{children}</Mantine.Menu.Target>;
+  return <MantineMenu.Target>{children}</MantineMenu.Target>;
 };
 
 export const MenuDropdown = forwardRef<
@@ -215,13 +225,13 @@ export const MenuDropdown = forwardRef<
   const ctx = useContext(SubMenuContext);
 
   return (
-    <Mantine.Menu.Dropdown
+    <MantineMenu.Dropdown
       className={className}
       ref={ref}
       onMouseOver={ctx?.onMenuMouseOver}
       onMouseLeave={ctx?.onMenuMouseLeave}>
       {children}
-    </Mantine.Menu.Dropdown>
+    </MantineMenu.Dropdown>
   );
 });
 
@@ -233,7 +243,7 @@ export const MenuDivider = forwardRef<
 
   assertEmpty(rest);
 
-  return <Mantine.Menu.Divider className={className} ref={ref} />;
+  return <MantineMenu.Divider className={className} ref={ref} />;
 });
 
 export const MenuLabel = forwardRef<
@@ -245,8 +255,8 @@ export const MenuLabel = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Mantine.Menu.Label className={className} ref={ref}>
+    <MantineMenu.Label className={className} ref={ref}>
       {children}
-    </Mantine.Menu.Label>
+    </MantineMenu.Label>
   );
 });

package/src/panel/Panel.tsx

@@ -1,4 +1,8 @@
-import * as Mantine from "@mantine/core";
+import {
+  Group as MantineGroup,
+  LoadingOverlay as MantineLoadingOverlay,
+  Tabs as MantineTabs,
+} from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -21,30 +25,30 @@ export const Panel = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Mantine.Group className={className} ref={ref}>
-      <Mantine.Tabs
+    <MantineGroup className={className} ref={ref}>
+      <MantineTabs
         value={openTab}
         defaultValue={defaultOpenTab}
         onChange={setOpenTab as any}>
-        {loading && <Mantine.LoadingOverlay visible={loading} />}
+        {loading && <MantineLoadingOverlay visible={loading} />}
 
-        <Mantine.Tabs.List>
+        <MantineTabs.List>
           {tabs.map((tab) => (
-            <Mantine.Tabs.Tab
+            <MantineTabs.Tab
               data-test={`${tab.name.toLowerCase()}-tab`}
               value={tab.name}
               key={tab.name}>
               {tab.name}
-            </Mantine.Tabs.Tab>
+            </MantineTabs.Tab>
           ))}
-        </Mantine.Tabs.List>
+        </MantineTabs.List>
 
         {tabs.map((tab) => (
-          <Mantine.Tabs.Panel value={tab.name} key={tab.name}>
+          <MantineTabs.Panel value={tab.name} key={tab.name}>
             {tab.tabPanel}
-          </Mantine.Tabs.Panel>
+          </MantineTabs.Panel>
         ))}
-      </Mantine.Tabs>
-    </Mantine.Group>
+      </MantineTabs>
+    </MantineGroup>
   );
 });

package/src/panel/PanelButton.tsx

@@ -1,4 +1,4 @@
-import * as Mantine from "@mantine/core";
+import { Button as MantineButton } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -13,7 +13,7 @@ export const PanelButton = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Mantine.Button
+    <MantineButton
       size={"xs"}
       aria-label={label}
       className={className}
@@ -21,6 +21,6 @@ export const PanelButton = forwardRef<
       onClick={onClick}
       {...rest}>
       {children}
-    </Mantine.Button>
+    </MantineButton>
   );
 });

package/src/panel/PanelFileInput.tsx

@@ -1,4 +1,4 @@
-import * as Mantine from "@mantine/core";
+import { FileInput as MantineFileInput } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -13,7 +13,7 @@ export const PanelFileInput = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Mantine.FileInput
+    <MantineFileInput
       size={"xs"}
       className={className}
       ref={ref}

package/src/panel/PanelTextInput.tsx

@@ -1,4 +1,4 @@
-import * as Mantine from "@mantine/core";
+import { TextInput as MantineTextInput } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -13,7 +13,7 @@ export const PanelTextInput = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Mantine.TextInput
+    <MantineTextInput
       size={"xs"}
       data-test={"embed-input"}
       className={className}

package/src/popover/Popover.tsx

@@ -1,4 +1,8 @@
-import * as Mantine from "@mantine/core";
+import {
+  Popover as MantinePopover,
+  PopoverDropdown as MantinePopoverDropdown,
+  PopoverTarget as MantinePopoverTarget,
+} from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -12,13 +16,13 @@ export const Popover = (
   assertEmpty(rest);
 
   return (
-    <Mantine.Popover
+    <MantinePopover
       withinPortal={false}
       zIndex={10000}
       opened={opened}
       position={position}>
       {children}
-    </Mantine.Popover>
+    </MantinePopover>
   );
 };
 
@@ -29,7 +33,7 @@ export const PopoverTrigger = (
 
   assertEmpty(rest);
 
-  return <Mantine.PopoverTarget>{children}</Mantine.PopoverTarget>;
+  return <MantinePopoverTarget>{children}</MantinePopoverTarget>;
 };
 
 export const PopoverContent = forwardRef<
@@ -46,8 +50,8 @@ export const PopoverContent = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Mantine.PopoverDropdown className={className} ref={ref}>
+    <MantinePopoverDropdown className={className} ref={ref}>
       {children}
-    </Mantine.PopoverDropdown>
+    </MantinePopoverDropdown>
   );
 });

package/src/sideMenu/SideMenu.tsx

@@ -1,4 +1,4 @@
-import * as Mantine from "@mantine/core";
+import { Group as MantineGroup } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -10,11 +10,16 @@ export const SideMenu = forwardRef<
 >((props, ref) => {
   const { className, children, ...rest } = props;
 
-  assertEmpty(rest);
+  assertEmpty(rest, false);
 
   return (
-    <Mantine.Group align={"center"} gap={0} className={className} ref={ref}>
+    <MantineGroup
+      align={"center"}
+      gap={0}
+      className={className}
+      ref={ref}
+      {...rest}>
       {children}
-    </Mantine.Group>
+    </MantineGroup>
   );
 });

package/src/sideMenu/SideMenuButton.tsx

@@ -1,4 +1,7 @@
-import * as Mantine from "@mantine/core";
+import {
+  ActionIcon as MantineActionIcon,
+  Button as MantineButton,
+} from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -26,7 +29,7 @@ export const SideMenuButton = forwardRef<
 
   if (icon) {
     return (
-      <Mantine.ActionIcon
+      <MantineActionIcon
         size={24}
         className={className}
         ref={ref}
@@ -37,12 +40,12 @@ export const SideMenuButton = forwardRef<
         aria-label={label}
         {...rest}>
         {icon}
-      </Mantine.ActionIcon>
+      </MantineActionIcon>
     );
   }
 
   return (
-    <Mantine.Button
+    <MantineButton
       className={className}
       ref={ref}
       onClick={onClick}
@@ -52,6 +55,6 @@ export const SideMenuButton = forwardRef<
       aria-label={label}
       {...rest}>
       {children}
-    </Mantine.Button>
+    </MantineButton>
   );
 });

package/src/style.css

@@ -322,7 +322,6 @@
 
 .bn-mt-suggestion-menu-item-body {
   align-items: stretch;
-  color: var(--bn-colors-menu-text);
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -331,6 +330,7 @@
 }
 
 .bn-mt-suggestion-menu-item-title {
+  color: var(--bn-colors-menu-text);
   line-height: 20px;
   font-weight: 500;
   font-size: 14px;
@@ -339,6 +339,7 @@
 }
 
 .bn-mt-suggestion-menu-item-subtitle {
+  color: var(--bn-colors-menu-text);
   line-height: 16px;
   font-size: 10px;
   margin: 0;
@@ -445,6 +446,7 @@
   color: var(--bn-colors-side-menu);
   cursor: pointer;
   display: flex;
+  height: fit-content;
   justify-content: center;
   overflow: visible;
   padding: 0;

package/src/suggestionMenu/SuggestionMenu.tsx

@@ -1,4 +1,4 @@
-import * as Mantine from "@mantine/core";
+import { Stack as MantineStack } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -13,13 +13,13 @@ export const SuggestionMenu = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Mantine.Stack
+    <MantineStack
       gap={0}
       className={className}
       ref={ref}
       id={id}
       role="listbox">
       {children}
-    </Mantine.Stack>
+    </MantineStack>
   );
 });

package/src/suggestionMenu/SuggestionMenuEmptyItem.tsx

@@ -1,4 +1,4 @@
-import * as Mantine from "@mantine/core";
+import { Group as MantineGroup } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -13,10 +13,10 @@ export const SuggestionMenuEmptyItem = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Mantine.Group className={className} ref={ref}>
-      <Mantine.Group className="bn-mt-suggestion-menu-item-label">
+    <MantineGroup className={className} ref={ref}>
+      <MantineGroup className="bn-mt-suggestion-menu-item-title">
         {children}
-      </Mantine.Group>
-    </Mantine.Group>
+      </MantineGroup>
+    </MantineGroup>
   );
 });

package/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -1,8 +1,14 @@
-import * as Mantine from "@mantine/core";
+import {
+  Badge as MantineBadge,
+  Group as MantineGroup,
+  Stack as MantineStack,
+  Text as MantineText,
+} from "@mantine/core";
+import { mergeRefs } from "@mantine/hooks";
 
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
-import { forwardRef } from "react";
+import { ComponentProps, elementOverflow } from "@blocknote/react";
+import { forwardRef, useEffect, useRef } from "react";
 
 export const SuggestionMenuItem = forwardRef<
   HTMLDivElement,
@@ -12,37 +18,53 @@ export const SuggestionMenuItem = forwardRef<
 
   assertEmpty(rest);
 
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!itemRef.current || !isSelected) {
+      return;
+    }
+
+    const overflow = elementOverflow(itemRef.current);
+
+    if (overflow === "top") {
+      itemRef.current.scrollIntoView(true);
+    } else if (overflow === "bottom") {
+      itemRef.current.scrollIntoView(false);
+    }
+  }, [isSelected]);
+
   return (
-    <Mantine.Group
+    <MantineGroup
       gap={0}
       className={className}
-      ref={ref}
+      ref={mergeRefs(ref, itemRef)}
       id={id}
       role="option"
       onClick={onClick}
       aria-selected={isSelected || undefined}>
       {item.icon && (
-        <Mantine.Group
+        <MantineGroup
           className="bn-mt-suggestion-menu-item-section"
           data-position="left">
           {item.icon}
-        </Mantine.Group>
+        </MantineGroup>
       )}
-      <Mantine.Stack gap={0} className="bn-mt-suggestion-menu-item-body">
-        <Mantine.Text className="bn-mt-suggestion-menu-item-title">
+      <MantineStack gap={0} className="bn-mt-suggestion-menu-item-body">
+        <MantineText className="bn-mt-suggestion-menu-item-title">
           {item.title}
-        </Mantine.Text>
-        <Mantine.Text className="bn-mt-suggestion-menu-item-subtitle">
+        </MantineText>
+        <MantineText className="bn-mt-suggestion-menu-item-subtitle">
           {item.subtext}
-        </Mantine.Text>
-      </Mantine.Stack>
+        </MantineText>
+      </MantineStack>
       {item.badge && (
-        <Mantine.Group
+        <MantineGroup
           data-position="right"
           className="bn-mt-suggestion-menu-item-section">
-          <Mantine.Badge size={"xs"}>{item.badge}</Mantine.Badge>
-        </Mantine.Group>
+          <MantineBadge size={"xs"}>{item.badge}</MantineBadge>
+        </MantineGroup>
       )}
-    </Mantine.Group>
+    </MantineGroup>
   );
 });

package/src/suggestionMenu/SuggestionMenuLabel.tsx

@@ -1,4 +1,4 @@
-import * as Mantine from "@mantine/core";
+import { Group as MantineGroup } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -13,8 +13,8 @@ export const SuggestionMenuLabel = forwardRef<
   assertEmpty(rest);
 
   return (
-    <Mantine.Group className={className} ref={ref}>
+    <MantineGroup className={className} ref={ref}>
       {children}
-    </Mantine.Group>
+    </MantineGroup>
   );
 });

package/src/suggestionMenu/SuggestionMenuLoader.tsx

@@ -1,4 +1,4 @@
-import * as Mantine from "@mantine/core";
+import { Loader as MantineLoader } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -16,5 +16,5 @@ export const SuggestionMenuLoader = forwardRef<
 
   assertEmpty(rest);
 
-  return <Mantine.Loader className={className} type="dots" ref={ref} />;
+  return <MantineLoader className={className} type="dots" ref={ref} />;
 });

package/src/tableHandle/TableHandle.tsx

@@ -1,3 +1,5 @@
+import { Button as MantineButton } from "@mantine/core";
+
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
@@ -22,7 +24,7 @@ export const TableHandle = forwardRef<
   assertEmpty(rest, false);
 
   return (
-    <button
+    <MantineButton
       className={className}
       ref={ref}
       aria-label={label}
@@ -32,6 +34,6 @@ export const TableHandle = forwardRef<
       style={style}
       {...rest}>
       {children}
-    </button>
+    </MantineButton>
   );
 });