@blocknote/ariakit 0.30.0 → 0.30.1

package/src/badge/Badge.tsx

@@ -33,12 +33,13 @@ export const Badge = forwardRef<
       className={mergeCSSClasses(
         className,
         "bn-ak-badge bn-ak-button",
-        isSelected && "bn-ak-primary"
+        isSelected && "bn-ak-primary",
       )}
       aria-selected={isSelected === true}
       onClick={(event) => onClick?.(event)}
       onMouseEnter={onMouseEnter}
-      ref={ref}>
+      ref={ref}
+    >
       <span>{icon}</span>
       <span>{text}</span>
     </AriakitButton>
@@ -70,7 +71,8 @@ export const BadgeGroup = forwardRef<
   return (
     <AriakitGroup
       className={mergeCSSClasses(className, "bn-ak-badge-group")}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </AriakitGroup>
   );

package/src/comments/Card.tsx

@@ -26,12 +26,13 @@ export const Card = forwardRef<
       className={mergeCSSClasses(
         className,
         "bn-ak-hovercard",
-        selected && "selected"
+        selected && "selected",
       )}
       onFocus={onFocus}
       onBlur={onBlur}
       tabIndex={tabIndex}
-      ref={ref}>
+      ref={ref}
+    >
       {headerText && <div className={"bn-header-text"}>{headerText}</div>}
       {children}
     </AriakitGroup>
@@ -49,7 +50,8 @@ export const CardSection = forwardRef<
   return (
     <AriakitGroup
       className={mergeCSSClasses(className, "bn-ak-card-section")}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </AriakitGroup>
   );
@@ -67,9 +69,10 @@ export const ExpandSectionsPrompt = forwardRef<
     <AriakitButton
       className={mergeCSSClasses(
         className,
-        "bn-ak-button bn-ak-secondary bn-ak-expand-sections-prompt"
+        "bn-ak-button bn-ak-secondary bn-ak-expand-sections-prompt",
       )}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </AriakitButton>
   );

package/src/comments/Comment.tsx

@@ -73,7 +73,8 @@ export const Comment = forwardRef<
       ref={ref}
       className={className}
       onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}>
+      onMouseLeave={() => setHovered(false)}
+    >
       {doShowActions ? (
         <AriakitGroup
           ref={focusRef}
@@ -82,7 +83,8 @@ export const Comment = forwardRef<
             right: 0,
             top: 0,
             zIndex: 10,
-          }}>
+          }}
+        >
           {actions}
         </AriakitGroup>
       ) : 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/menu/Button.tsx

@@ -32,11 +32,12 @@ export const MenuButton = forwardRef<
       aria-label={label}
       className={mergeCSSClasses(
         "bn-ak-button bn-ak-secondary",
-        className || ""
+        className || "",
       )}
       ref={ref}
       onClick={onClick}
-      {...rest}>
+      {...rest}
+    >
       {icon}
       {children}
     </AriakitButton>

package/src/menu/Menu.tsx

@@ -28,7 +28,8 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
     <AriakitMenuProvider
       placement={position}
       setOpen={onOpenChange}
-      virtualFocus={true}>
+      virtualFocus={true}
+    >
       {children}
     </AriakitMenuProvider>
   );
@@ -51,7 +52,8 @@ export const MenuDropdown = forwardRef<
     <AriakitMenu
       unmountOnHide={true}
       className={mergeCSSClasses("bn-ak-menu", className || "")}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </AriakitMenu>
   );
@@ -72,7 +74,8 @@ export const MenuItem = forwardRef<
         render={<AriakitMenuItem />}
         className={mergeCSSClasses("bn-ak-menu-item", className || "")}
         ref={ref}
-        onClick={onClick}>
+        onClick={onClick}
+      >
         {icon}
         {children}
         <AriakitMenuButtonArrow />
@@ -84,7 +87,8 @@ export const MenuItem = forwardRef<
     <AriakitMenuItem
       className={mergeCSSClasses("bn-ak-menu-item", className || "")}
       ref={ref}
-      onClick={onClick}>
+      onClick={onClick}
+    >
       {icon}
       {children}
       {checked !== undefined && <AriakitCheckboxCheck checked={checked} />}
@@ -103,14 +107,15 @@ export const MenuLabel = forwardRef<
   return (
     <AriakitMenuGroupLabel
       className={mergeCSSClasses("bn-ak-group-label", className || "")}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </AriakitMenuGroupLabel>
   );
 });
 
 export const MenuTrigger = (
-  props: ComponentProps["Generic"]["Menu"]["Trigger"]
+  props: ComponentProps["Generic"]["Menu"]["Trigger"],
 ) => {
   const { children, sub, ...rest } = props;
 

package/src/panel/Panel.tsx

@@ -27,7 +27,8 @@ export const Panel = forwardRef<
   return (
     <div
       className={mergeCSSClasses("bn-ak-wrapper", className || "")}
-      ref={ref}>
+      ref={ref}
+    >
       <AriakitTabProvider
         defaultSelectedId={defaultOpenTab}
         selectedId={openTab}
@@ -35,7 +36,8 @@ export const Panel = forwardRef<
           if (activeId) {
             setOpenTab(activeId);
           }
-        }}>
+        }}
+      >
         {/*{loading && <LoadingOverlay visible={loading} />}*/}
 
         <AriakitTabList className={"bn-ak-tab-list"}>

package/src/panel/PanelButton.tsx

@@ -17,7 +17,8 @@ export const PanelButton = forwardRef<
       className={mergeCSSClasses("bn-ak-button", className || "")}
       onClick={onClick}
       aria-label={label}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </AriakitButton>
   );

package/src/popover/Popover.tsx

@@ -32,16 +32,17 @@ export const PopoverContent = forwardRef<
       className={mergeCSSClasses(
         "bn-ak-popover",
         className || "",
-        variant === "panel-popover" ? "bn-ak-panel-popover" : ""
+        variant === "panel-popover" ? "bn-ak-panel-popover" : "",
       )}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </AriakitPopover>
   );
 });
 
 export const Popover = (
-  props: ComponentProps["Generic"]["Popover"]["Root"]
+  props: ComponentProps["Generic"]["Popover"]["Root"],
 ) => {
   const { children, opened, position, ...rest } = props;
 

package/src/sideMenu/SideMenuButton.tsx

@@ -32,11 +32,12 @@ export const SideMenuButton = forwardRef<
       aria-label={label}
       className={mergeCSSClasses(
         "bn-ak-button bn-ak-secondary",
-        className || ""
+        className || "",
       )}
       ref={ref}
       onClick={onClick}
-      {...rest}>
+      {...rest}
+    >
       {icon}
       {children}
     </AriakitButton>

package/src/style.css

@@ -23,11 +23,15 @@
 
 .bn-toolbar .bn-ak-button[data-selected] {
   padding-top: 0.125rem;
-  box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--border);
+  box-shadow:
+    inset 0 0 0 1px var(--border),
+    inset 0 2px 0 var(--border);
 }
 
 .bn-toolbar .bn-ak-button[data-selected]:where(.dark, .dark *) {
-  box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 1px 1px var(--shadow);
+  box-shadow:
+    inset 0 0 0 1px var(--border),
+    inset 0 1px 1px 1px var(--shadow);
 }
 
 .bn-toolbar .bn-ak-popover {
@@ -89,8 +93,11 @@
   --border: rgb(0 0 0/13%);
   --highlight: rgb(255 255 255/20%);
   --shadow: rgb(0 0 0/10%);
-  box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--highlight),
-  inset 0 -1px 0 var(--shadow), 0 1px 1px var(--shadow);
+  box-shadow:
+    inset 0 0 0 1px var(--border),
+    inset 0 2px 0 var(--highlight),
+    inset 0 -1px 0 var(--shadow),
+    0 1px 1px var(--shadow);
   font-size: 0.7rem;
   border-radius: 4px;
   padding-inline: 4px;
@@ -246,7 +253,7 @@
 .bn-ak-author-info {
   align-items: center;
   display: flex;
-  gap: 16px
+  gap: 16px;
 }
 
 .bn-ariakit .bn-comment-editor .bn-editor {
@@ -338,4 +345,4 @@
 .bn-ariakit .bn-thread.selected .bn-ak-author-info,
 .bn-ariakit .bn-thread.selected .bn-ak-expand-sections-prompt {
   color: var(--bn-colors-selected-text);
-}
+}

package/src/suggestionMenu/SuggestionMenu.tsx

@@ -17,7 +17,8 @@ export const SuggestionMenu = forwardRef<
       className={mergeCSSClasses("bn-ak-menu", className || "")}
       id={id}
       role="listbox"
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </AriakitGroup>
   );

package/src/suggestionMenu/SuggestionMenuEmptyItem.tsx

@@ -13,7 +13,8 @@ export const SuggestionMenuEmptyItem = forwardRef<
   return (
     <div
       className={mergeCSSClasses("bn-ak-menu-item", className || "")}
-      ref={ref}>
+      ref={ref}
+    >
       <div className="bn-ak-suggestion-menu-item-label">{children}</div>
     </div>
   );

package/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -19,7 +19,7 @@ export const SuggestionMenuItem = forwardRef<
 
     const overflow = elementOverflow(
       itemRef.current,
-      document.querySelector(".bn-suggestion-menu")!
+      document.querySelector(".bn-suggestion-menu")!,
     );
 
     if (overflow === "top") {
@@ -36,11 +36,13 @@ export const SuggestionMenuItem = forwardRef<
       id={id}
       onClick={onClick}
       role="option"
-      aria-selected={isSelected || undefined}>
+      aria-selected={isSelected || undefined}
+    >
       {item.icon && (
         <div
           className="bn-ak-suggestion-menu-item-section"
-          data-position="left">
+          data-position="left"
+        >
           {item.icon}
         </div>
       )}
@@ -53,7 +55,8 @@ export const SuggestionMenuItem = forwardRef<
       {item.badge && (
         <div
           data-position="right"
-          className="bn-ak-suggestion-menu-item-section">
+          className="bn-ak-suggestion-menu-item-section"
+        >
           <div>{item.badge}</div>
         </div>
       )}

package/src/suggestionMenu/SuggestionMenuLabel.tsx

@@ -13,7 +13,8 @@ export const SuggestionMenuLabel = forwardRef<
   return (
     <div
       className={mergeCSSClasses("bn-ak-group-label", className || "")}
-      ref={ref}>
+      ref={ref}
+    >
       {children}
     </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={mergeCSSClasses("bn-ak-menu-item", className || "")}
       style={{ gridColumn: `1 / ${columns + 1}` }}
-      ref={ref}>
+      ref={ref}
+    >
       <div className="bn-ak-suggestion-menu-item-label">{children}</div>
     </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

@@ -18,12 +18,13 @@ export const ExtendButton = forwardRef<
     <AriakitButton
       className={mergeCSSClasses(
         "bn-ak-button bn-ak-secondary",
-        className || ""
+        className || "",
       )}
       ref={ref}
       onMouseDown={onMouseDown}
       onClick={onClick}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </AriakitButton>
   );

package/src/tableHandle/TableHandle.tsx

@@ -27,7 +27,7 @@ export const TableHandle = forwardRef<
     <AriakitButton
       className={mergeCSSClasses(
         "bn-ak-button bn-ak-secondary",
-        className || ""
+        className || "",
       )}
       ref={ref}
       aria-label={label}
@@ -35,7 +35,8 @@ export const TableHandle = forwardRef<
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
       style={style}
-      {...rest}>
+      {...rest}
+    >
       {children}
     </AriakitButton>
   );

package/src/toolbar/Toolbar.tsx

@@ -25,9 +25,10 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
         className={mergeCSSClasses("bn-ak-toolbar", className || "")}
         ref={ref}
         onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}>
+        onMouseLeave={onMouseLeave}
+      >
         {children}
       </AriakitToolbar>
     );
-  }
+  },
 );

package/src/toolbar/ToolbarButton.tsx

@@ -43,7 +43,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
               aria-label={label}
               className={mergeCSSClasses(
                 "bn-ak-button bn-ak-secondary",
-                className || ""
+                className || "",
               )}
               // Needed as Safari doesn't focus button elements on mouse down
               // unlike other browsers.
@@ -57,7 +57,8 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
               data-selected={isSelected ? "true" : undefined}
               disabled={isDisabled || false}
               ref={ref}
-              {...rest}>
+              {...rest}
+            >
               {icon}
               {children}
             </AriakitToolbarItem>
@@ -69,5 +70,5 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         </AriakitTooltip>
       </AriakitTooltipProvider>
     );
-  }
+  },
 );

package/src/toolbar/ToolbarSelect.tsx

@@ -32,18 +32,21 @@ export const ToolbarSelect = forwardRef<
         className={"bn-ak-button bn-ak-secondary"}
         disabled={isDisabled}
         aria-label="Text alignment"
-        render={<AriakitToolbarItem />}>
+        render={<AriakitToolbarItem />}
+      >
         {selectedItem.icon} {selectedItem.text} <AriakitSelectArrow />
       </AriakitSelect>
       <AriakitSelectPopover
         className={mergeCSSClasses("bn-ak-popover", className || "")}
         ref={ref}
-        gutter={4}>
+        gutter={4}
+      >
         {items.map((option) => (
           <AriakitSelectItem
             className={"bn-ak-select-item"}
             key={option.text}
-            value={option.text}>
+            value={option.text}
+          >
             {option.icon}
             {option.text}
             {option.text === selectedItem.text && <AriakitSelectItemCheck />}