@blocknote/mantine 0.30.0 → 0.31.0

package/dist/webpack-stats.json

@@ -1 +1 @@
-{"builtAt":1746802467894,"assets":[{"name":"blocknote-mantine.cjs","size":20384},{"name":"blocknote-mantine.cjs.map","size":312037}],"chunks":[{"id":"ec22802","entry":true,"initial":true,"files":["blocknote-mantine.cjs"],"names":["blocknote-mantine"]}],"modules":[{"name":"./src/BlockNoteTheme.ts","size":2185,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarButton.tsx","size":2674,"chunks":["ec22802"]},{"name":"./src/badge/Badge.tsx","size":1437,"chunks":["ec22802"]},{"name":"./src/comments/Card.tsx","size":1403,"chunks":["ec22802"]},{"name":"./src/comments/Comment.tsx","size":2082,"chunks":["ec22802"]},{"name":"./src/comments/Editor.tsx","size":965,"chunks":["ec22802"]},{"name":"./src/form/TextInput.tsx","size":575,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/lib/iconBase.mjs","size":4003,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/hi/index.mjs","size":720,"chunks":["ec22802"]},{"name":"./src/menu/Menu.tsx","size":4095,"chunks":["ec22802"]},{"name":"./src/menu/Button.tsx","size":765,"chunks":["ec22802"]},{"name":"./src/panel/Panel.tsx","size":1015,"chunks":["ec22802"]},{"name":"./src/panel/PanelButton.tsx","size":345,"chunks":["ec22802"]},{"name":"./src/panel/PanelFileInput.tsx","size":367,"chunks":["ec22802"]},{"name":"./src/panel/PanelTab.tsx","size":209,"chunks":["ec22802"]},{"name":"./src/panel/PanelTextInput.tsx","size":392,"chunks":["ec22802"]},{"name":"./src/popover/Popover.tsx","size":679,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenu.tsx","size":309,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenuButton.tsx","size":773,"chunks":["ec22802"]},{"name":"./src/style.css","size":0,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenu.tsx","size":307,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuEmptyItem.tsx","size":338,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuItem.tsx","size":1822,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLabel.tsx","size":227,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLoader.tsx","size":283,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx","size":361,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx","size":436,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx","size":855,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx","size":385,"chunks":["ec22802"]},{"name":"./src/tableHandle/ExtendButton.tsx","size":333,"chunks":["ec22802"]},{"name":"./src/tableHandle/TableHandle.tsx","size":452,"chunks":["ec22802"]},{"name":"./src/toolbar/Toolbar.tsx","size":666,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarSelect.tsx","size":1785,"chunks":["ec22802"]},{"name":"./src/components.tsx","size":1540,"chunks":["ec22802"]},{"name":"./src/BlockNoteView.tsx","size":1638,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":2023,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":0,"chunks":["ec22802"]}]}
+{"builtAt":1747754375389,"assets":[{"name":"blocknote-mantine.cjs","size":20586},{"name":"blocknote-mantine.cjs.map","size":312750}],"chunks":[{"id":"ec22802","entry":true,"initial":true,"files":["blocknote-mantine.cjs"],"names":["blocknote-mantine"]}],"modules":[{"name":"./src/BlockNoteTheme.ts","size":2185,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarButton.tsx","size":2674,"chunks":["ec22802"]},{"name":"./src/badge/Badge.tsx","size":1437,"chunks":["ec22802"]},{"name":"./src/comments/Card.tsx","size":1403,"chunks":["ec22802"]},{"name":"./src/comments/Comment.tsx","size":2082,"chunks":["ec22802"]},{"name":"./src/comments/Editor.tsx","size":965,"chunks":["ec22802"]},{"name":"./src/form/TextInput.tsx","size":805,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/lib/iconContext.mjs","size":251,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/lib/iconBase.mjs","size":4003,"chunks":["ec22802"]},{"name":"../../node_modules/.pnpm/react-icons@5.5.0_react@18.3.1/node_modules/react-icons/hi/index.mjs","size":720,"chunks":["ec22802"]},{"name":"./src/menu/Menu.tsx","size":4095,"chunks":["ec22802"]},{"name":"./src/menu/Button.tsx","size":765,"chunks":["ec22802"]},{"name":"./src/panel/Panel.tsx","size":1015,"chunks":["ec22802"]},{"name":"./src/panel/PanelButton.tsx","size":345,"chunks":["ec22802"]},{"name":"./src/panel/PanelFileInput.tsx","size":367,"chunks":["ec22802"]},{"name":"./src/panel/PanelTab.tsx","size":209,"chunks":["ec22802"]},{"name":"./src/panel/PanelTextInput.tsx","size":392,"chunks":["ec22802"]},{"name":"./src/popover/Popover.tsx","size":679,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenu.tsx","size":309,"chunks":["ec22802"]},{"name":"./src/sideMenu/SideMenuButton.tsx","size":773,"chunks":["ec22802"]},{"name":"./src/style.css","size":0,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenu.tsx","size":307,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuEmptyItem.tsx","size":338,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuItem.tsx","size":1911,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLabel.tsx","size":227,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/SuggestionMenuLoader.tsx","size":233,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx","size":361,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx","size":436,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx","size":855,"chunks":["ec22802"]},{"name":"./src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx","size":385,"chunks":["ec22802"]},{"name":"./src/tableHandle/ExtendButton.tsx","size":333,"chunks":["ec22802"]},{"name":"./src/tableHandle/TableHandle.tsx","size":452,"chunks":["ec22802"]},{"name":"./src/toolbar/Toolbar.tsx","size":666,"chunks":["ec22802"]},{"name":"./src/toolbar/ToolbarSelect.tsx","size":1785,"chunks":["ec22802"]},{"name":"./src/components.tsx","size":1540,"chunks":["ec22802"]},{"name":"./src/BlockNoteView.tsx","size":1638,"chunks":["ec22802"]},{"name":"./src/defaultThemes.ts","size":2023,"chunks":["ec22802"]},{"name":"./src/index.tsx","size":0,"chunks":["ec22802"]}]}

package/package.json

@@ -11,7 +11,7 @@
     "directory": "packages/mantine"
   },
   "license": "MPL-2.0",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "files": [
     "dist",
     "types",
@@ -44,12 +44,13 @@
     },
     "./style.css": {
       "import": "./dist/style.css",
-      "require": "./dist/style.css"
+      "require": "./dist/style.css",
+      "style": "./dist/style.css"
     }
   },
   "dependencies": {
-    "@blocknote/core": "0.30.0",
-    "@blocknote/react": "0.30.0",
+    "@blocknote/core": "0.31.0",
+    "@blocknote/react": "0.31.0",
     "@mantine/core": "^7.10.1",
     "@mantine/hooks": "^7.10.1",
     "@mantine/utils": "^6.0.21",

package/src/BlockNoteTheme.ts

@@ -37,7 +37,7 @@ type NestedObject = { [key: string]: number | string | NestedObject };
 const cssVariablesHelper = (
   theme: Theme,
   editorDOM: HTMLElement,
-  unset = false
+  unset = false,
 ) => {
   const result: string[] = [];
 
@@ -72,7 +72,7 @@ const cssVariablesHelper = (
 
 export const applyBlockNoteCSSVariablesFromTheme = (
   theme: Theme,
-  editorDOM: HTMLElement
+  editorDOM: HTMLElement,
 ) => cssVariablesHelper(theme, editorDOM);
 
 // We don't need a theme to remove the CSS variables, but having access to a

package/src/BlockNoteView.tsx

@@ -29,7 +29,7 @@ const mantineTheme = {
 export const BlockNoteView = <
   BSchema extends BlockSchema,
   ISchema extends InlineContentSchema,
-  SSchema extends StyleSchema
+  SSchema extends StyleSchema,
 >(
   props: Omit<BlockNoteViewProps<BSchema, ISchema, SSchema>, "theme"> & {
     theme?:
@@ -40,7 +40,7 @@ export const BlockNoteView = <
           light: Theme;
           dark: Theme;
         };
-  }
+  },
 ) => {
   const { className, theme, ...rest } = props;
 
@@ -62,7 +62,7 @@ export const BlockNoteView = <
         if ("light" in theme && "dark" in theme) {
           applyBlockNoteCSSVariablesFromTheme(
             theme[defaultColorScheme === "dark" ? "dark" : "light"],
-            node
+            node,
           );
           return;
         }
@@ -71,15 +71,15 @@ export const BlockNoteView = <
         return;
       }
     },
-    [defaultColorScheme, theme]
+    [defaultColorScheme, theme],
   );
 
   const finalTheme =
     typeof theme === "string"
       ? theme
       : defaultColorScheme !== "no-preference"
-      ? defaultColorScheme
-      : "light";
+        ? defaultColorScheme
+        : "light";
 
   return (
     <ComponentsContext.Provider value={components}>
@@ -92,7 +92,8 @@ export const BlockNoteView = <
         // element needs to already be rendered, so we can't set it to the
         // editor container element. Instead, we set it to `undefined` and set it
         // manually in `BlockNoteViewRaw`.
-        getRootElement={() => undefined}>
+        getRootElement={() => undefined}
+      >
         <BlockNoteViewRaw
           data-mantine-color-scheme={finalTheme}
           className={mergeCSSClasses("bn-mantine", className || "")}

package/src/badge/Badge.tsx

@@ -46,7 +46,8 @@ export const Badge = forwardRef<
       }}
       variant={"light"}
       icon={null}
-      ref={ref}>
+      ref={ref}
+    >
       <span>{icon}</span>
       <span>{text}</span>
     </MantineChip>
@@ -65,7 +66,8 @@ export const Badge = forwardRef<
           mainTooltip={mainTooltip}
           secondaryTooltip={secondaryTooltip}
         />
-      }>
+      }
+    >
       {badge}
     </MantineTooltip>
   );

package/src/comments/Card.tsx

@@ -41,7 +41,8 @@ export const Card = forwardRef<
       onFocus={onFocus}
       onBlur={onBlur}
       tabIndex={tabIndex}
-      ref={mergeRefs([ref, scrollRef])}>
+      ref={mergeRefs([ref, scrollRef])}
+    >
       {headerText && (
         <MantineText className={"bn-header-text"}>{headerText}</MantineText>
       )}

package/src/comments/Comment.tsx

@@ -84,7 +84,8 @@ export const Comment = forwardRef<
             right: 0,
             top: 0,
             zIndex: 10,
-          }}>
+          }}
+        >
           {actions}
         </Group>
       ) : null}

package/src/comments/Editor.tsx

@@ -30,7 +30,8 @@ export const Editor = forwardRef<
       editable={editable}
       ref={ref}
       onFocus={onFocus}
-      onBlur={onBlur}>
+      onBlur={onBlur}
+    >
       <FormattingToolbarController
         formattingToolbar={CustomFormattingToolbar}
       />
@@ -40,7 +41,7 @@ export const Editor = forwardRef<
 
 const CustomFormattingToolbar = () => {
   const items = getFormattingToolbarItems([]).filter(
-    (el) => el.key !== "nestBlockButton" && el.key !== "unnestBlockButton"
+    (el) => el.key !== "nestBlockButton" && el.key !== "unnestBlockButton",
   );
   return (
     <FormattingToolbar blockTypeSelectItems={[]}>{items}</FormattingToolbar>

package/src/form/TextInput.tsx

@@ -1,6 +1,6 @@
 import { TextInput as MantineTextInput } from "@mantine/core";
 
-import { assertEmpty } from "@blocknote/core";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
@@ -12,13 +12,17 @@ export const TextInput = forwardRef<
     className,
     name,
     label,
+    variant,
     icon,
     value,
     autoFocus,
     placeholder,
+    disabled,
     onKeyDown,
     onChange,
     onSubmit,
+    autoComplete,
+    rightSection,
     ...rest
   } = props;
 
@@ -27,7 +31,10 @@ export const TextInput = forwardRef<
   return (
     <MantineTextInput
       size={"xs"}
-      className={className}
+      className={mergeCSSClasses(
+        className || "",
+        variant === "large" ? "bn-mt-input-large" : ""
+      )}
       ref={ref}
       name={name}
       label={label}
@@ -35,10 +42,13 @@ export const TextInput = forwardRef<
       value={value}
       autoFocus={autoFocus}
       data-autofocus={autoFocus ? "true" : undefined}
+      rightSection={rightSection}
       placeholder={placeholder}
+      disabled={disabled}
       onKeyDown={onKeyDown}
       onChange={onChange}
       onSubmit={onSubmit}
+      autoComplete={autoComplete}
     />
   );
 });

package/src/mantineStyles.css

@@ -89,50 +89,55 @@
  (src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css)
  but with styles set on `body` and `html` instead set on `bn-container`, as
  well as other minor changes. */
-.bn-mantine *, .bn-mantine :after, .bn-mantine :before {
-    box-sizing: border-box
+.bn-mantine *,
+.bn-mantine :after,
+.bn-mantine :before {
+  box-sizing: border-box;
 }
 
 .bn-mantine button,
 .bn-mantine select {
-    text-transform: none
+  text-transform: none;
 }
 
 @media screen and (max-device-width: 500px) {
-    .bn-mantine {
-        -webkit-text-size-adjust: 100%
-    }
+  .bn-mantine {
+    -webkit-text-size-adjust: 100%;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .bn-mantine [data-respect-reduced-motion] [data-reduce-motion] {
-        animation: none;
-        transition: none
-    }
+  .bn-mantine [data-respect-reduced-motion] [data-reduce-motion] {
+    animation: none;
+    transition: none;
+  }
 }
 
-.bn-mantine [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-mantine [data-mantine-color-scheme=light] .mantine-light-hidden {
-    display: none
+.bn-mantine [data-mantine-color-scheme="dark"] .mantine-dark-hidden,
+.bn-mantine [data-mantine-color-scheme="light"] .mantine-light-hidden {
+  display: none;
 }
 
 .bn-mantine .mantine-focus-auto:focus-visible {
-    outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
-    outline-offset: calc(.125rem * var(--mantine-scale))
+  outline: calc(0.125rem * var(--mantine-scale)) solid
+    var(--mantine-primary-color-filled);
+  outline-offset: calc(0.125rem * var(--mantine-scale));
 }
 
 .bn-mantine .mantine-focus-always:focus {
-    outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled);
-    outline-offset: calc(.125rem * var(--mantine-scale))
+  outline: calc(0.125rem * var(--mantine-scale)) solid
+    var(--mantine-primary-color-filled);
+  outline-offset: calc(0.125rem * var(--mantine-scale));
 }
 
 .bn-mantine .mantine-focus-never:focus {
-    outline: none
+  outline: none;
 }
 
 .bn-mantine .mantine-active:active {
-    transform: translateY(calc(.0625rem * var(--mantine-scale)))
+  transform: translateY(calc(0.0625rem * var(--mantine-scale)));
 }
 
-.bn-mantine[dir=rtl] .mantine-rotate-rtl {
-    transform: rotate(180deg)
-}
+.bn-mantine[dir="rtl"] .mantine-rotate-rtl {
+  transform: rotate(180deg);
+}

package/src/menu/Button.tsx

@@ -38,7 +38,8 @@ export const Button = forwardRef<
         onDragStart={onDragStart}
         draggable={draggable}
         aria-label={label}
-        {...rest}>
+        {...rest}
+      >
         {icon}
       </MantineActionIcon>
     );
@@ -53,7 +54,8 @@ export const Button = forwardRef<
       onDragStart={onDragStart}
       draggable={draggable}
       aria-label={label}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </MantineButton>
   );

package/src/menu/Menu.tsx

@@ -110,12 +110,14 @@ const SubMenu = forwardRef<
       value={{
         onMenuMouseOver: mouseOver,
         onMenuMouseLeave: mouseLeave,
-      }}>
+      }}
+    >
       <MantineMenu.Item
         className="bn-menu-item bn-mt-sub-menu-item"
         ref={mergeRefs(ref, itemRef)}
         onMouseOver={mouseOver}
-        onMouseLeave={mouseLeave}>
+        onMouseLeave={mouseLeave}
+      >
         <MantineMenu
           portalProps={{
             target: itemRef.current
@@ -126,7 +128,8 @@ const SubMenu = forwardRef<
           trigger={"hover"}
           opened={opened}
           onChange={onOpenChange}
-          position={position}>
+          position={position}
+        >
           {children}
         </MantineMenu>
       </MantineMenu.Item>
@@ -148,7 +151,8 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
       withinPortal={false}
       middlewares={{ flip: true, shift: true, inline: false, size: true }}
       onChange={onOpenChange}
-      position={position}>
+      position={position}
+    >
       {children}
     </MantineMenu>
   );
@@ -173,7 +177,8 @@ export const MenuItem = forwardRef<
           e.stopPropagation();
         }}
         ref={ref}
-        {...rest}>
+        {...rest}
+      >
         {children}
         <HiChevronRight size={15} />
       </div>
@@ -193,14 +198,15 @@ export const MenuItem = forwardRef<
         ) : null
       }
       onClick={onClick}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </MantineMenu.Item>
   );
 });
 
 export const MenuTrigger = (
-  props: ComponentProps["Generic"]["Menu"]["Trigger"]
+  props: ComponentProps["Generic"]["Menu"]["Trigger"],
 ) => {
   const {
     children,
@@ -233,7 +239,8 @@ export const MenuDropdown = forwardRef<
       className={className}
       ref={ref}
       onMouseOver={ctx?.onMenuMouseOver}
-      onMouseLeave={ctx?.onMenuMouseLeave}>
+      onMouseLeave={ctx?.onMenuMouseLeave}
+    >
       {children}
     </MantineMenu.Dropdown>
   );

package/src/panel/Panel.tsx

@@ -29,7 +29,8 @@ export const Panel = forwardRef<
       <MantineTabs
         value={openTab}
         defaultValue={defaultOpenTab}
-        onChange={setOpenTab as any}>
+        onChange={setOpenTab as any}
+      >
         {loading && <MantineLoadingOverlay visible={loading} />}
 
         <MantineTabs.List>
@@ -37,7 +38,8 @@ export const Panel = forwardRef<
             <MantineTabs.Tab
               data-test={`${tab.name.toLowerCase()}-tab`}
               value={tab.name}
-              key={tab.name}>
+              key={tab.name}
+            >
               {tab.name}
             </MantineTabs.Tab>
           ))}

package/src/panel/PanelButton.tsx

@@ -19,7 +19,8 @@ export const PanelButton = forwardRef<
       className={className}
       ref={ref}
       onClick={onClick}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </MantineButton>
   );

package/src/popover/Popover.tsx

@@ -9,7 +9,7 @@ import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
 export const Popover = (
-  props: ComponentProps["Generic"]["Popover"]["Root"]
+  props: ComponentProps["Generic"]["Popover"]["Root"],
 ) => {
   const { opened, position, children, ...rest } = props;
 
@@ -23,7 +23,7 @@ export const Popover = (
 };
 
 export const PopoverTrigger = (
-  props: ComponentProps["Generic"]["Popover"]["Trigger"]
+  props: ComponentProps["Generic"]["Popover"]["Trigger"],
 ) => {
   const { children, ...rest } = props;
 

package/src/sideMenu/SideMenu.tsx

@@ -18,7 +18,8 @@ export const SideMenu = forwardRef<
       gap={0}
       className={className}
       ref={ref}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </MantineGroup>
   );

package/src/sideMenu/SideMenuButton.tsx

@@ -38,7 +38,8 @@ export const SideMenuButton = forwardRef<
         onDragStart={onDragStart}
         draggable={draggable}
         aria-label={label}
-        {...rest}>
+        {...rest}
+      >
         {icon}
       </MantineActionIcon>
     );
@@ -53,7 +54,8 @@ export const SideMenuButton = forwardRef<
       onDragStart={onDragStart}
       draggable={draggable}
       aria-label={label}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </MantineButton>
   );

package/src/style.css

@@ -118,6 +118,12 @@
   height: 32px;
 }
 
+.bn-mantine .bn-mt-input-large .mantine-TextInput-input {
+  border: none;
+  font-size: 14px;
+  height: 52px;
+}
+
 /* Mantine Tooltip component base styles */
 .bn-mantine .mantine-Tooltip-tooltip {
   background-color: transparent;
@@ -256,7 +262,8 @@
   max-height: 100%;
   position: relative;
   box-shadow: var(--mantine-shadow-md);
-  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-2);
+  border: calc(0.0625rem * var(--mantine-scale)) solid
+    var(--mantine-color-gray-2);
   border-radius: var(--mantine-radius-default);
   padding: 4px;
 }
@@ -323,6 +330,12 @@
   height: 52px;
 }
 
+.bn-mantine .bn-suggestion-menu-item-small {
+  height: fit-content;
+  /* Made to match with labels */
+  padding: calc(var(--mantine-spacing-xs) / 2) var(--mantine-spacing-sm);
+}
+
 .bn-mantine .bn-suggestion-menu-item[aria-selected="true"],
 .bn-mantine .bn-suggestion-menu-item:hover {
   background-color: var(--bn-colors-hovered-background);
@@ -338,6 +351,19 @@
   padding: 8px;
 }
 
+.bn-suggestion-menu-item-small
+  .bn-mt-suggestion-menu-item-section[data-position="left"] {
+  background-color: transparent;
+  padding: 0;
+}
+
+.bn-suggestion-menu-item-small
+  .bn-mt-suggestion-menu-item-section[data-position="left"]
+  svg {
+  height: 14px;
+  width: 14px;
+}
+
 .bn-mt-suggestion-menu-item-body {
   align-items: stretch;
   display: flex;
@@ -356,6 +382,10 @@
   padding: 0;
 }
 
+.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-title {
+  font-size: 12px;
+}
+
 .bn-mt-suggestion-menu-item-subtitle {
   color: var(--bn-colors-menu-text);
   line-height: 16px;
@@ -364,6 +394,10 @@
   padding: 0;
 }
 
+.bn-suggestion-menu-item-small .bn-mt-suggestion-menu-item-subtitle {
+  display: none;
+}
+
 .bn-mantine .bn-suggestion-menu-label {
   color: var(--bn-colors-hovered-text);
 }
@@ -576,8 +610,8 @@
 }
 
 .bn-mt-sub-menu-item
-> .mantine-Menu-itemLabel
-> div:not(.mantine-Menu-dropdown) {
+  > .mantine-Menu-itemLabel
+  > div:not(.mantine-Menu-dropdown) {
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -714,23 +748,47 @@
 }
 
 .bn-mantine
-.bn-badge
-.mantine-Chip-label
-> span:not(.mantine-Chip-iconWrapper) {
+  .bn-badge
+  .mantine-Chip-label
+  > span:not(.mantine-Chip-iconWrapper) {
   display: inline-flex;
   gap: 4px;
 }
 
 .bn-mantine
-.bn-badge
-.mantine-Chip-label
-> span:not(.mantine-Chip-iconWrapper)
-> span {
+  .bn-badge
+  .mantine-Chip-label
+  > span:not(.mantine-Chip-iconWrapper)
+  > span {
   align-items: center;
   display: inline-flex;
   justify-content: center;
 }
 
+/* Combobox styling */
+.bn-mantine .bn-combobox-input,
+.bn-mantine .bn-combobox-items:not(:empty) {
+  background-color: var(--bn-colors-menu-background);
+  border: var(--bn-border);
+  border-radius: var(--bn-border-radius-medium);
+  box-shadow: var(--bn-shadow-medium);
+  color: var(--bn-colors-menu-text);
+  gap: 4px;
+  min-width: 145px;
+  padding: 2px;
+}
+
+.bn-mantine .bn-combobox-input .bn-combobox-icon,
+.bn-mantine .bn-combobox-input .bn-combobox-right-section {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.bn-mantine .bn-combobox-input .bn-combobox-error {
+  color: var(--bn-colors-highlights-red-background);
+}
+
 /* We need to get rid of the checked icon - you can set the icon prop to an
 empty element (<></>), but even so Mantine leaves extra space for the icon, so
 we just don't display it in CSS instead. */

package/src/suggestionMenu/SuggestionMenu.tsx

@@ -18,7 +18,8 @@ export const SuggestionMenu = forwardRef<
       className={className}
       ref={ref}
       id={id}
-      role="listbox">
+      role="listbox"
+    >
       {children}
     </MantineStack>
   );