@blocknote/shadcn 0.30.0 → 0.31.0

package/src/components/ui/label.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import { cn } from "../../lib/utils.js";
 
 const labelVariants = cva(
-  "bn-text-sm bn-font-medium bn-leading-none peer-disabled:bn-cursor-not-allowed peer-disabled:bn-opacity-70"
+  "bn-text-sm bn-font-medium bn-leading-none peer-disabled:bn-cursor-not-allowed peer-disabled:bn-opacity-70",
 );
 
 const Label = React.forwardRef<

package/src/components/ui/popover.tsx

@@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "bn-z-50 bn-w-72 bn-rounded-md bn-border bn-bg-popover bn-p-4 bn-text-popover-foreground bn-shadow-md bn-outline-none data-[state=open]:bn-animate-in data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=open]:bn-fade-in-0 data-[state=closed]:bn-zoom-out-95 data-[state=open]:bn-zoom-in-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />

package/src/components/ui/select.tsx

@@ -18,9 +18,10 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "bn-flex bn-h-10 bn-w-full bn-items-center bn-justify-between bn-rounded-md bn-border bn-border-input bn-bg-background bn-px-3 bn-py-2 bn-text-sm bn-ring-offset-background placeholder:bn-text-muted-foreground focus:bn-outline-none focus:bn-ring-2 focus:bn-ring-ring focus:bn-ring-offset-2 disabled:bn-cursor-not-allowed disabled:bn-opacity-50 [&>span]:bn-line-clamp-1",
-      className
+      className,
     )}
-    {...props}>
+    {...props}
+  >
     {children}
     <SelectPrimitive.Icon asChild>
       <ChevronDown className="bn-h-4 bn-w-4 bn-opacity-50" />
@@ -37,9 +38,10 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "bn-flex bn-cursor-default bn-items-center bn-justify-center bn-py-1",
-      className
+      className,
     )}
-    {...props}>
+    {...props}
+  >
     <ChevronUp className="bn-h-4 bn-w-4" />
   </SelectPrimitive.ScrollUpButton>
 ));
@@ -53,9 +55,10 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "bn-flex bn-cursor-default bn-items-center bn-justify-center bn-py-1",
-      className
+      className,
     )}
-    {...props}>
+    {...props}
+  >
     <ChevronDown className="bn-h-4 bn-w-4" />
   </SelectPrimitive.ScrollDownButton>
 ));
@@ -73,17 +76,19 @@ const SelectContent = React.forwardRef<
       "bn-relative bn-z-50 bn-max-h-96 bn-min-w-[8rem] bn-overflow-hidden bn-rounded-md bn-border bn-bg-popover bn-text-popover-foreground bn-shadow-md data-[state=open]:bn-animate-in data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=open]:bn-fade-in-0 data-[state=closed]:bn-zoom-out-95 data-[state=open]:bn-zoom-in-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
       position === "popper" &&
         "data-[side=bottom]:bn-translate-y-1 data-[side=left]:bn--translate-x-1 data-[side=right]:bn-translate-x-1 data-[side=top]:bn--translate-y-1",
-      className
+      className,
     )}
     position={position}
-    {...props}>
+    {...props}
+  >
     <SelectScrollUpButton />
     <SelectPrimitive.Viewport
       className={cn(
         "bn-p-1",
         position === "popper" &&
-          "bn-h-[var(--radix-select-trigger-height)] bn-w-full bn-min-w-[var(--radix-select-trigger-width)]"
-      )}>
+          "bn-h-[var(--radix-select-trigger-height)] bn-w-full bn-min-w-[var(--radix-select-trigger-width)]",
+      )}
+    >
       {children}
     </SelectPrimitive.Viewport>
     <SelectScrollDownButton />
@@ -100,7 +105,7 @@ const SelectLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "bn-py-1.5 bn-pl-8 bn-pr-2 bn-text-sm bn-font-semibold",
-      className
+      className,
     )}
     {...props}
   />
@@ -115,9 +120,10 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "bn-relative bn-flex bn-w-full bn-cursor-default bn-select-none bn-items-center bn-rounded-sm bn-py-1.5 bn-pl-8 bn-pr-2 bn-text-sm bn-outline-none focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
-      className
+      className,
     )}
-    {...props}>
+    {...props}
+  >
     <span className="bn-absolute bn-left-2 bn-flex bn-h-3.5 bn-w-3.5 bn-items-center bn-justify-center">
       <SelectPrimitive.ItemIndicator>
         <Check className="bn-h-4 bn-w-4" />

package/src/components/ui/skeleton.tsx

@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
       {...props}
     />
   );

package/src/components/ui/tabs.tsx

@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "bn-inline-flex bn-h-10 bn-items-center bn-justify-center bn-rounded-md bn-bg-muted bn-p-1 bn-text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
@@ -28,7 +28,7 @@ const TabsTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "bn-inline-flex bn-items-center bn-justify-center bn-whitespace-nowrap bn-rounded-sm bn-px-3 bn-py-1.5 bn-text-sm bn-font-medium bn-ring-offset-background bn-transition-all focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2 disabled:bn-pointer-events-none disabled:bn-opacity-50 data-[state=active]:bn-bg-background data-[state=active]:bn-text-foreground data-[state=active]:bn-shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
@@ -43,7 +43,7 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "bn-mt-2 bn-ring-offset-background focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2",
-      className
+      className,
     )}
     {...props}
   />

package/src/components/ui/toggle.tsx

@@ -23,7 +23,7 @@ const toggleVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 const Toggle = React.forwardRef<

package/src/components/ui/tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "bn-z-50 bn-overflow-hidden bn-rounded-md bn-border bn-bg-popover bn-px-3 bn-py-1.5 bn-text-sm bn-text-popover-foreground bn-shadow-md bn-animate-in bn-fade-in-0 bn-zoom-in-95 data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=closed]:bn-zoom-out-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />

package/src/form/TextInput.tsx

@@ -3,6 +3,7 @@ import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext.js";
+import { cn } from "../lib/utils.js";
 
 export const TextInput = forwardRef<
   HTMLInputElement,
@@ -12,13 +13,17 @@ export const TextInput = forwardRef<
     className,
     name,
     label,
+    variant,
     icon, // TODO: implement
     value,
     autoFocus,
     placeholder,
+    disabled,
     onKeyDown,
     onChange,
     onSubmit,
+    autoComplete,
+    rightSection, // TODO: add rightSection
     ...rest
   } = props;
 
@@ -26,38 +31,36 @@ export const TextInput = forwardRef<
 
   const ShadCNComponents = useShadCNComponentsContext()!;
 
-  if (!label) {
-    return (
-      <ShadCNComponents.Input.Input
-        aria-label={name}
-        name={name}
-        autoFocus={autoFocus}
-        placeholder={placeholder}
-        value={value}
-        onKeyDown={onKeyDown}
-        onChange={onChange}
-        onSubmit={onSubmit}
-        ref={ref}
-      />
-    );
-  }
-
   return (
-    <div>
-      <ShadCNComponents.Label.Label htmlFor={label}>
-        {label}
-      </ShadCNComponents.Label.Label>
-      <ShadCNComponents.Input.Input
-        className={className}
-        id={label}
-        name={name}
-        autoFocus={autoFocus}
-        placeholder={placeholder}
-        value={value}
-        onKeyDown={onKeyDown}
-        onChange={onChange}
-        onSubmit={onSubmit}
-      />
+    <div
+      className={cn(
+        className,
+        "bn-flex bn-h-10 bn-w-full bn-rounded-md bn-border bn-border-input bn-bg-background bn-px-3 bn-py-2 bn-text-sm bn-ring-offset-background file:bn-border-0 file:bn-bg-transparent file:bn-text-sm file:bn-font-medium placeholder:bn-text-muted-foreground focus-visible:bn-outline-none focus-visible:bn-ring-2 focus-visible:bn-ring-ring focus-visible:bn-ring-offset-2 disabled:bn-cursor-not-allowed disabled:bn-opacity-50",
+        "bn-items-center bn-gap-2 bn-text-foreground",
+      )}
+    >
+      {icon}
+      <div className="bn-flex-1">
+        {label && (
+          <ShadCNComponents.Label.Label htmlFor={label}>
+            {label}
+          </ShadCNComponents.Label.Label>
+        )}
+        <ShadCNComponents.Input.Input
+          className={cn(className, "bn-border-none bn-p-0 bn-h-auto")}
+          id={label}
+          name={name}
+          autoFocus={autoFocus}
+          placeholder={placeholder}
+          disabled={disabled}
+          value={value}
+          onKeyDown={onKeyDown}
+          onChange={onChange}
+          onSubmit={onSubmit}
+          ref={ref}
+        />
+      </div>
+      {rightSection}
     </div>
   );
 });

package/src/menu/Button.tsx

@@ -37,7 +37,8 @@ export const MenuButton = forwardRef<
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
       draggable={draggable}
-      {...rest}>
+      {...rest}
+    >
       {icon}
       {children}
     </ShadCNComponents.Button.Button>

package/src/menu/Menu.tsx

@@ -31,7 +31,7 @@ const MenuTriggerWithPointerUp = (Comp: typeof ShadCNDropdownMenuTrigger) =>
           ref={ref}
         />
       );
-    }
+    },
   );
 
 export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
@@ -50,7 +50,8 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
   if (sub) {
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenuSub
-        onOpenChange={onOpenChange}>
+        onOpenChange={onOpenChange}
+      >
         {children}
       </ShadCNComponents.DropdownMenu.DropdownMenuSub>
     );
@@ -58,7 +59,8 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenu
         modal={false}
-        onOpenChange={onOpenChange}>
+        onOpenChange={onOpenChange}
+      >
         {children}
       </ShadCNComponents.DropdownMenu.DropdownMenu>
     );
@@ -66,7 +68,7 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
 };
 
 export const MenuTrigger = (
-  props: ComponentProps["Generic"]["Menu"]["Trigger"]
+  props: ComponentProps["Generic"]["Menu"]["Trigger"],
 ) => {
   const { children, sub, ...rest } = props;
 
@@ -77,9 +79,9 @@ export const MenuTrigger = (
   const DropdownMenuTrigger = useMemo(
     () =>
       MenuTriggerWithPointerUp(
-        ShadCNComponents.DropdownMenu.DropdownMenuTrigger
+        ShadCNComponents.DropdownMenu.DropdownMenuTrigger,
       ),
-    [ShadCNComponents.DropdownMenu.DropdownMenuTrigger]
+    [ShadCNComponents.DropdownMenu.DropdownMenuTrigger],
   );
 
   if (sub) {
@@ -111,7 +113,8 @@ export const MenuDropdown = forwardRef<
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenuSubContent
         className={className}
-        ref={ref}>
+        ref={ref}
+      >
         {children}
       </ShadCNComponents.DropdownMenu.DropdownMenuSubContent>
     );
@@ -119,7 +122,8 @@ export const MenuDropdown = forwardRef<
     return (
       <ShadCNComponents.DropdownMenu.DropdownMenuContent
         className={className}
-        ref={ref}>
+        ref={ref}
+      >
         {children}
       </ShadCNComponents.DropdownMenu.DropdownMenuContent>
     );
@@ -153,7 +157,8 @@ export const MenuItem = forwardRef<
         ref={ref}
         checked={checked}
         onClick={onClick}
-        {...rest}>
+        {...rest}
+      >
         {icon}
         {children}
       </ShadCNComponents.DropdownMenu.DropdownMenuCheckboxItem>
@@ -165,7 +170,8 @@ export const MenuItem = forwardRef<
       className={className}
       ref={ref}
       onClick={onClick}
-      {...rest}>
+      {...rest}
+    >
       {icon}
       {children}
       {subTrigger && <ChevronRight className="bn-ml-auto bn-h-4 bn-w-4" />}
@@ -204,7 +210,8 @@ export const MenuLabel = forwardRef<
   return (
     <ShadCNComponents.DropdownMenu.DropdownMenuLabel
       className={className}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </ShadCNComponents.DropdownMenu.DropdownMenuLabel>
   );

package/src/panel/Panel.tsx

@@ -29,7 +29,8 @@ export const Panel = forwardRef<
       ref={ref}
       value={openTab}
       defaultValue={defaultOpenTab}
-      onValueChange={setOpenTab}>
+      onValueChange={setOpenTab}
+    >
       {/*{loading && <LoadingOverlay visible={loading} />}*/}
 
       <ShadCNComponents.Tabs.TabsList>

package/src/panel/PanelButton.tsx

@@ -20,7 +20,8 @@ export const PanelButton = forwardRef<
       className={className}
       aria-label={label}
       ref={ref}
-      onClick={onClick}>
+      onClick={onClick}
+    >
       {children}
     </ShadCNComponents.Button.Button>
   );

package/src/panel/PanelTab.tsx

@@ -16,9 +16,10 @@ export const PanelTab = forwardRef<
     <div
       className={cn(
         className,
-        "bn-flex bn-flex-col bn-gap-2 bn-items-start bn-justify-center"
+        "bn-flex bn-flex-col bn-gap-2 bn-items-start bn-justify-center",
       )}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </div>
   );

package/src/popover/popover.tsx

@@ -6,7 +6,7 @@ import { cn } from "../lib/utils.js";
 import { useShadCNComponentsContext } from "../ShadCNComponentsContext.js";
 
 export const Popover = (
-  props: ComponentProps["Generic"]["Popover"]["Root"]
+  props: ComponentProps["Generic"]["Popover"]["Root"],
 ) => {
   const {
     children,
@@ -39,7 +39,7 @@ export const PopoverTrigger = forwardRef(
         {children}
       </ShadCNComponents.Popover.PopoverTrigger>
     );
-  }
+  },
 );
 
 export const PopoverContent = forwardRef<
@@ -60,9 +60,10 @@ export const PopoverContent = forwardRef<
         "bn-flex bn-flex-col bn-gap-2",
         variant === "panel-popover"
           ? "bn-p-0 bn-border-none bn-shadow-none bn-max-w-none bn-w-fit"
-          : ""
+          : "",
       )}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </ShadCNComponents.Popover.PopoverContent>
   );

package/src/sideMenu/SideMenuButton.tsx

@@ -37,7 +37,8 @@ export const SideMenuButton = forwardRef<
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
       draggable={draggable}
-      {...rest}>
+      {...rest}
+    >
       {icon}
       {children}
     </ShadCNComponents.Button.Button>

package/src/style.css

@@ -189,3 +189,8 @@
   font-size: 14px;
   font-style: italic;
 }
+
+.bn-shadcn .bn-combobox-error {
+  color: var(--bn-colors-highlights-red-background);
+  font-weight: bold;
+}

package/src/suggestionMenu/SuggestionMenu.tsx

@@ -19,9 +19,10 @@ export const SuggestionMenu = forwardRef<
       // Styles from ShadCN DropdownMenuContent component
       className={cn(
         "bn-z-50 bn-min-w-[8rem] bn-overflow-auto bn-rounded-md bn-border bn-bg-popover bn-p-1 bn-text-popover-foreground bn-shadow-md data-[state=open]:bn-animate-in data-[state=closed]:bn-animate-out data-[state=closed]:bn-fade-out-0 data-[state=open]:bn-fade-in-0 data-[state=closed]:bn-zoom-out-95 data-[state=open]:bn-zoom-in-95 data-[side=bottom]:bn-slide-in-from-top-2 data-[side=left]:bn-slide-in-from-right-2 data-[side=right]:bn-slide-in-from-left-2 data-[side=top]:bn-slide-in-from-bottom-2",
-        className
+        className,
       )}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </div>
   );

package/src/suggestionMenu/SuggestionMenuEmptyItem.tsx

@@ -17,9 +17,10 @@ export const SuggestionMenuEmptyItem = forwardRef<
       // Styles from ShadCN DropdownMenuItem component
       className={cn(
         "bn-relative bn-flex bn-cursor-default bn-select-none bn-items-center bn-rounded-sm bn-px-2 bn-py-1.5 bn-text-sm bn-outline-none bn-transition-colors focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
-        className
+        className,
       )}
-      ref={ref}>
+      ref={ref}
+    >
       <div>{children}</div>
     </div>
   );

package/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -24,7 +24,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") {
       itemRef.current.scrollIntoView(true);
@@ -38,21 +38,47 @@ export const SuggestionMenuItem = forwardRef<
       // Styles from ShadCN DropdownMenuItem component
       className={cn(
         "bn-relative bn-flex bn-cursor-pointer bn-select-none bn-items-center bn-rounded-sm bn-px-2 bn-py-1.5 bn-text-sm bn-outline-none bn-transition-colors focus:bn-bg-accent focus:bn-text-accent-foreground data-[disabled]:bn-pointer-events-none data-[disabled]:bn-opacity-50",
-        className
+        props.item.size === "small" ? "bn-gap-3 bn-py-1" : "",
+        className,
       )}
       ref={mergeRefs([ref, itemRef])}
       id={id}
+      onMouseDown={(event) => event.preventDefault()}
       onClick={onClick}
       role="option"
-      aria-selected={isSelected || undefined}>
+      aria-selected={isSelected || undefined}
+    >
       {item.icon && (
-        <div className="bn-p-3" data-position="left">
+        <div
+          className={cn(
+            "bn-p-3",
+            props.item.size === "small" ? "bn-p-0" : "",
+            className,
+          )}
+          data-position="left"
+        >
           {item.icon}
         </div>
       )}
       <div className="bn-flex-1">
-        <div className="bn-text-base">{item.title}</div>
-        <div className="bn-text-xs">{item.subtext}</div>
+        <div
+          className={cn(
+            "bn-text-base",
+            props.item.size === "small" ? "bn-text-sm" : "",
+            className,
+          )}
+        >
+          {item.title}
+        </div>
+        <div
+          className={cn(
+            "bn-text-xs",
+            props.item.size === "small" ? "bn-hidden" : "",
+            className,
+          )}
+        >
+          {item.subtext}
+        </div>
       </div>
       {item.badge && (
         <div data-position="right" className="bn-text-xs">

package/src/suggestionMenu/SuggestionMenuLabel.tsx

@@ -16,7 +16,8 @@ export const SuggestionMenuLabel = forwardRef<
     <div
       // Styles from ShadCN DropdownMenuLabel component
       className={cn("bn-px-2 bn-py-1.5 bn-text-sm bn-font-semibold", className)}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </div>
   );

package/src/suggestionMenu/SuggestionMenuLoader.tsx

@@ -2,17 +2,28 @@ import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
+import { cn } from "../lib/utils.js";
+
 export const SuggestionMenuLoader = forwardRef<
   HTMLDivElement,
   ComponentProps["SuggestionMenu"]["Loader"]
 >((props, ref) => {
-  const { className, children, ...rest } = props;
+  const { className, ...rest } = props;
 
   assertEmpty(rest);
 
   return (
-    <div className={className} ref={ref}>
-      {children}
+    <div className={cn(className, "bn-animate-spin")} ref={ref}>
+      {/* Taken from Google Material Icons */}
+      {/* https://fonts.google.com/icons?selected=Material+Symbols+Rounded:progress_activity:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=load&icon.size=24&icon.color=%23e8eaed&icon.set=Material+Symbols&icon.style=Rounded&icon.platform=web */}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="1em"
+        viewBox="0 -960 960 960"
+        width="1em"
+        fill="#e8eaed">
+        <path d="M480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-155.5t86-127Q252-817 325-848.5T480-880q17 0 28.5 11.5T520-840q0 17-11.5 28.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-17 11.5-28.5T840-520q17 0 28.5 11.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127 86T480-80Z" />
+      </svg>
     </div>
   );
 });

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

@@ -14,7 +14,8 @@ export const GridSuggestionMenuEmptyItem = forwardRef<
     <div
       className={className}
       style={{ gridColumn: `1 / ${columns + 1}` }}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </div>
   );

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx

@@ -19,7 +19,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") {
@@ -36,7 +36,8 @@ export const GridSuggestionMenuItem = forwardRef<
       id={id}
       role="option"
       onClick={onClick}
-      aria-selected={isSelected || undefined}>
+      aria-selected={isSelected || undefined}
+    >
       {item.icon}
     </div>
   );

package/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx

@@ -19,7 +19,8 @@ export const GridSuggestionMenuLoader = forwardRef<
     <div
       className={className}
       style={{ gridColumn: `1 / ${columns + 1}` }}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </div>
   );

package/src/tableHandle/ExtendButton.tsx

@@ -28,12 +28,13 @@ export const ExtendButton = forwardRef<
           : "bn-mt-1",
         className?.includes("bn-extend-button-editing")
           ? "bn-bg-accent bn-text-accent-foreground"
-          : ""
+          : "",
       )}
       ref={ref}
       onClick={onClick}
       onMouseDown={onMouseDown}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </ShadCNComponents.Button.Button>
   );

package/src/tableHandle/TableHandle.tsx

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