@blocknote/ariakit 0.30.1 → 0.31.1

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/style.css

@@ -11,6 +11,10 @@
   gap: 0.5rem;
 }
 
+.bn-ak-input-wrapper svg {
+  width: 24px;
+}
+
 .bn-ak-toolbar {
   height: fit-content;
   overflow: scroll;
@@ -68,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 {
@@ -81,14 +87,31 @@
   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%);
@@ -103,6 +126,24 @@
   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);
@@ -309,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;

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,6 +34,7 @@ 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}

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/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) => {

package/src/toolbar/ToolbarButton.tsx

@@ -9,8 +9,7 @@ import { assertEmpty, isSafari, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 import { forwardRef } from "react";
 
-type ToolbarButtonProps = ComponentProps["FormattingToolbar"]["Button"] &
-  ComponentProps["LinkToolbar"]["Button"];
+type ToolbarButtonProps = ComponentProps["Generic"]["Toolbar"]["Button"];
 
 /**
  * Helper for basic buttons that show in the formatting toolbar.

package/types/src/input/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>>;