@blocknote/ariakit 0.30.0 → 0.31.0

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/input/TextInput.tsx

@@ -15,13 +15,17 @@ export const TextInput = forwardRef<
     className,
     name,
     label,
+    variant,
     icon,
     value,
     autoFocus,
     placeholder,
+    disabled,
     onKeyDown,
     onChange,
     onSubmit,
+    autoComplete,
+    rightSection,
     ...rest
   } = props;
 
@@ -33,16 +37,23 @@ export const TextInput = forwardRef<
       <div className="bn-ak-input-wrapper">
         {icon}
         <AriakitFormInput
-          className={mergeCSSClasses("bn-ak-input", className || "")}
+          className={mergeCSSClasses(
+            "bn-ak-input",
+            className || "",
+            variant === "large" ? "bn-ak-input-large" : "",
+          )}
           ref={ref}
           name={name}
           value={value}
           autoFocus={autoFocus}
           placeholder={placeholder}
+          disabled={disabled}
           onKeyDown={onKeyDown}
           onChange={onChange}
           onSubmit={onSubmit}
+          autoComplete={autoComplete}
         />
+        {rightSection}
       </div>
     </>
   );

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

@@ -11,6 +11,10 @@
   gap: 0.5rem;
 }
 
+.bn-ak-input-wrapper svg {
+  width: 24px;
+}
+
 .bn-ak-toolbar {
   height: fit-content;
   overflow: scroll;
@@ -23,11 +27,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 {
@@ -64,9 +72,11 @@
   overflow: visible;
 }
 
-.bn-ariakit .bn-suggestion-menu {
+.bn-ariakit .bn-suggestion-menu,
+.bn-ariakit .ai-suggestion-menu {
   height: fit-content;
   max-height: inherit;
+  overflow: auto;
 }
 
 .bn-ariakit .bn-color-picker-dropdown {
@@ -77,25 +87,63 @@
   flex: 1;
 }
 
+.bn-suggestion-menu-item-small .bn-ak-suggestion-menu-item-title {
+  font-size: 0.875rem;
+}
+
 .bn-ak-suggestion-menu-item-subtitle {
   font-size: 0.7rem;
 }
 
+.bn-suggestion-menu-item-small .bn-ak-suggestion-menu-item-subtitle {
+  display: none;
+}
+
 .bn-ak-suggestion-menu-item-section[data-position="left"] {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
   padding: 8px;
 }
 
+.bn-suggestion-menu-item-small
+  .bn-ak-suggestion-menu-item-section[data-position="left"] {
+  padding: 0;
+}
+
 .bn-ak-suggestion-menu-item-section[data-position="right"] {
   --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;
 }
 
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.bn-ariakit .bn-suggestion-menu-loader {
+  align-items: center;
+  animation: spin 1s linear infinite;
+  display: flex;
+  height: 16px;
+  justify-content: center;
+  width: 16px;
+}
+
 .bn-ariakit .bn-grid-suggestion-menu {
   background: var(--bn-colors-menu-background);
   border-radius: var(--bn-border-radius-large);
@@ -246,7 +294,7 @@
 .bn-ak-author-info {
   align-items: center;
   display: flex;
-  gap: 16px
+  gap: 16px;
 }
 
 .bn-ariakit .bn-comment-editor .bn-editor {
@@ -302,6 +350,48 @@
   padding: 0;
 }
 
+.bn-ariakit .bn-combobox .bn-ak-input-wrapper {
+  display: flex;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: hsl(204 20% 88%);
+  background-color: hsl(204 20% 100%);
+  padding: 0.5rem;
+  color: hsl(204 4% 0%);
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.bn-ariakit .bn-combobox .bn-ak-input-wrapper:where(.dark, .dark *) {
+  border-color: hsl(204 4% 24%);
+  background-color: hsl(204 4% 16%);
+  color: hsl(204 20% 100%);
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.25),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+.bn-ariakit .bn-combobox .bn-ak-input {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  outline: none;
+}
+
+.bn-ariakit .bn-combobox .bn-combobox-icon,
+.bn-ariakit .bn-combobox .bn-combobox-right-section {
+  align-items: start;
+  display: flex;
+  justify-content: center;
+  width: 24px;
+}
+
+.bn-ariakit .bn-combobox .bn-combobox-error {
+  color: var(--bn-colors-highlights-red-background);
+}
+
 .bn-ariakit .bn-comment-actions-wrapper {
   align-items: start;
   display: flex;
@@ -338,4 +428,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, #ai-suggestion-menu")!, // TODO
     );
 
     if (overflow === "top") {
@@ -34,13 +34,16 @@ export const SuggestionMenuItem = forwardRef<
       className={mergeCSSClasses("bn-ak-menu-item", 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-ak-suggestion-menu-item-section"
-          data-position="left">
+          data-position="left"
+        >
           {item.icon}
         </div>
       )}
@@ -53,7 +56,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/SuggestionMenuLoader.tsx

@@ -6,13 +6,22 @@ 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}
+      {/* 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={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

@@ -4,8 +4,7 @@ import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 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) => {
@@ -25,9 +24,10 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
         className={mergeCSSClasses("bn-ak-toolbar", className || "")}
         ref={ref}
         onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}>
+        onMouseLeave={onMouseLeave}
+      >
         {children}
       </AriakitToolbar>
     );
-  }
+  },
 );