@blocknote/mantine 0.30.0 → 0.31.0

package/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -27,7 +27,7 @@ export const SuggestionMenuItem = forwardRef<
 
     const overflow = elementOverflow(
       itemRef.current,
-      document.querySelector(".bn-suggestion-menu")!
+      document.querySelector(".bn-suggestion-menu, #ai-suggestion-menu")!, // TODO
     );
 
     if (overflow === "top") {
@@ -44,12 +44,15 @@ export const SuggestionMenuItem = forwardRef<
       ref={mergeRefs(ref, itemRef)}
       id={id}
       role="option"
+      onMouseDown={(event) => event.preventDefault()}
       onClick={onClick}
-      aria-selected={isSelected || undefined}>
+      aria-selected={isSelected || undefined}
+    >
       {item.icon && (
         <MantineGroup
           className="bn-mt-suggestion-menu-item-section"
-          data-position="left">
+          data-position="left"
+        >
           {item.icon}
         </MantineGroup>
       )}
@@ -64,7 +67,8 @@ export const SuggestionMenuItem = forwardRef<
       {item.badge && (
         <MantineGroup
           data-position="right"
-          className="bn-mt-suggestion-menu-item-section">
+          className="bn-mt-suggestion-menu-item-section"
+        >
           <MantineBadge size={"xs"}>{item.badge}</MantineBadge>
         </MantineGroup>
       )}

package/src/suggestionMenu/SuggestionMenuLoader.tsx

@@ -8,13 +8,11 @@ export const SuggestionMenuLoader = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Loader"]
 >((props, ref) => {
-  const {
-    className,
-    children, // unused, using "dots" instead
-    ...rest
-  } = props;
+  const { className, ...rest } = props;
 
   assertEmpty(rest);
 
-  return <MantineLoader className={className} type="dots" ref={ref} />;
+  return (
+    <MantineLoader className={className} type="dots" size={16} ref={ref} />
+  );
 });

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx

@@ -16,7 +16,8 @@ export const GridSuggestionMenu = forwardRef<
       style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` } as any}
       ref={ref}
       id={id}
-      role="grid">
+      role="grid"
+    >
       {children}
     </div>
   );

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx

@@ -16,7 +16,8 @@ export const GridSuggestionMenuEmptyItem = forwardRef<
     <MantineGroup
       className={className}
       style={{ gridColumn: `1 / ${columns + 1}` }}
-      ref={ref}>
+      ref={ref}
+    >
       <MantineGroup className="bn-mt-suggestion-menu-item-title">
         {children}
       </MantineGroup>

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx

@@ -21,7 +21,7 @@ export const GridSuggestionMenuItem = forwardRef<
 
     const overflow = elementOverflow(
       itemRef.current,
-      document.querySelector(".bn-grid-suggestion-menu")!
+      document.querySelector(".bn-grid-suggestion-menu")!,
     );
 
     if (overflow === "top") {
@@ -38,7 +38,8 @@ export const GridSuggestionMenuItem = forwardRef<
       id={id}
       role="option"
       onClick={onClick}
-      aria-selected={isSelected || undefined}>
+      aria-selected={isSelected || undefined}
+    >
       {item.icon}
     </div>
   );

package/src/tableHandle/ExtendButton.tsx

@@ -20,7 +20,8 @@ export const ExtendButton = forwardRef<
       ref={ref}
       onMouseDown={onMouseDown}
       onClick={onClick}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </MantineButton>
   );

package/src/tableHandle/TableHandle.tsx

@@ -32,7 +32,8 @@ export const TableHandle = forwardRef<
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
       style={style}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </MantineButton>
   );

package/src/toolbar/Toolbar.tsx

@@ -5,8 +5,7 @@ import { ComponentProps } from "@blocknote/react";
 import { mergeRefs, useFocusTrap, useFocusWithin } from "@mantine/hooks";
 import { forwardRef } from "react";
 
-type ToolbarProps = ComponentProps["FormattingToolbar"]["Root"] &
-  ComponentProps["LinkToolbar"]["Root"];
+type ToolbarProps = ComponentProps["Generic"]["Toolbar"]["Root"];
 
 export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
   (props, ref) => {
@@ -36,9 +35,10 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
         // TODO: aria-label
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
-        gap={variant === "action-toolbar" ? 2 : undefined}>
+        gap={variant === "action-toolbar" ? 2 : undefined}
+      >
         {children}
       </Flex>
     );
-  }
+  },
 );

package/src/toolbar/ToolbarButton.tsx

@@ -26,8 +26,7 @@ export const TooltipContent = (props: {
   </MantineStack>
 );
 
-type ToolbarButtonProps = ComponentProps["FormattingToolbar"]["Button"] &
-  ComponentProps["LinkToolbar"]["Button"];
+type ToolbarButtonProps = ComponentProps["Generic"]["Toolbar"]["Button"];
 
 /**
  * Helper for basic buttons that show in the formatting toolbar.
@@ -83,7 +82,8 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         size={variant === "compact" ? "compact-xs" : "xs"}
         disabled={isDisabled || false}
         ref={ref}
-        {...rest}>
+        {...rest}
+      >
         {children}
       </MantineButton>
     ) : (
@@ -118,7 +118,8 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         size={variant === "compact" ? 20 : 30}
         disabled={isDisabled || false}
         ref={ref}
-        {...rest}>
+        {...rest}
+      >
         {icon}
       </MantineActionIcon>
     );
@@ -136,9 +137,10 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
             mainTooltip={mainTooltip}
             secondaryTooltip={secondaryTooltip}
           />
-        }>
+        }
+      >
         {button}
       </MantineTooltip>
     );
-  }
+  },
 );

package/src/toolbar/ToolbarSelect.tsx

@@ -31,7 +31,8 @@ export const ToolbarSelect = forwardRef<
         exitDuration: 0,
       }}
       disabled={isDisabled}
-      middlewares={{ flip: true, shift: true, inline: false, size: true }}>
+      middlewares={{ flip: true, shift: true, inline: false, size: true }}
+    >
       <MantineMenu.Target>
         <MantineButton
           // Needed as Safari doesn't focus button elements on mouse down
@@ -45,7 +46,8 @@ export const ToolbarSelect = forwardRef<
           rightSection={<HiChevronDown />}
           size={"xs"}
           variant={"subtle"}
-          disabled={isDisabled}>
+          disabled={isDisabled}
+        >
           {selectedItem.text}
         </MantineButton>
       </MantineMenu.Target>
@@ -63,7 +65,8 @@ export const ToolbarSelect = forwardRef<
                 <div className={"bn-tick-space"} />
               )
             }
-            disabled={item.isDisabled}>
+            disabled={item.isDisabled}
+          >
             {item.text}
           </MantineMenu.Item>
         ))}

package/types/src/form/TextInput.d.ts

@@ -2,11 +2,15 @@ export declare const TextInput: import("react").ForwardRefExoticComponent<{
     className?: string;
     name: string;
     label?: string;
+    variant?: "default" | "large";
     icon: import("react").ReactNode;
+    rightSection?: import("react").ReactNode;
     autoFocus?: boolean;
-    placeholder: string;
+    placeholder?: string;
+    disabled?: boolean;
     value: string;
     onKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
     onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
     onSubmit?: () => void;
+    autoComplete?: import("react").HTMLInputAutoCompleteAttribute;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/types/src/suggestionMenu/SuggestionMenuItem.d.ts

@@ -3,5 +3,5 @@ export declare const SuggestionMenuItem: import("react").ForwardRefExoticCompone
     id: string;
     isSelected: boolean;
     onClick: () => void;
-    item: import("@blocknote/react").DefaultReactSuggestionItem;
+    item: Omit<import("@blocknote/react").DefaultReactSuggestionItem, "onItemClick">;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuLoader.d.ts

@@ -1,4 +1,3 @@
 export declare const SuggestionMenuLoader: import("react").ForwardRefExoticComponent<{
     className?: string;
-    children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;