@choice-ui/react 1.4.3 → 1.4.6

package/dist/components/comments/src/comment-input/components/comment-input-mention-popover.js

@@ -106,8 +106,10 @@ const CommentInputMentionPopover = ({
         padding: 4,
         apply({ elements, availableHeight, rects }) {
           var _a;
-          const contentHeight = ((_a = scrollRef.current) == null ? void 0 : _a.scrollHeight) || elements.floating.scrollHeight;
-          const calculatedHeight = Math.min(contentHeight, availableHeight - 8);
+          const floatingScrollHeight = elements.floating.scrollHeight;
+          const scrollRefHeight = ((_a = scrollRef.current) == null ? void 0 : _a.scrollHeight) || 0;
+          const contentHeight = Math.max(floatingScrollHeight, scrollRefHeight);
+          const calculatedHeight = contentHeight > 0 ? Math.min(contentHeight, availableHeight - 8) : availableHeight - 8;
           Object.assign(elements.floating.style, {
             maxHeight: `${calculatedHeight}px`,
             overflow: "hidden"

package/dist/components/comments/src/comments.js

@@ -84,7 +84,7 @@ const CommentsComponent = forwardRef((props, ref) => {
       ScrollArea,
       {
         className: tcx("flex h-full flex-col", className),
-        scrollbarMode: "large-b",
+        scrollbarMode: "padding-b",
         ref,
         children: /* @__PURE__ */ jsx(
           ScrollArea.Viewport,

package/dist/components/context-input/dist/index.d.ts

@@ -1,11 +1,10 @@
 import { default as React__default, ComponentType } from 'react';
 import { IconButtonProps } from '../../icon-button/src';
 import { RenderElementProps, ReactEditor } from 'slate-react';
-import { Descendant, Editor, Range } from 'slate';
+import { Editor, Range, Descendant } from 'slate';
 import { HistoryEditor } from 'slate-history';
 import * as React$1 from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as tailwind_variants from 'tailwind-variants';
 
 interface ContextInputHeaderProps {
     children?: React.ReactNode;
@@ -34,12 +33,12 @@ interface InsertMentionsButtonProps extends IconButtonProps {
 }
 declare const InsertMentionsButton: React$1.NamedExoticComponent<InsertMentionsButtonProps>;
 
-interface MentionProps extends RenderElementProps {
+interface ContextMentionProps extends RenderElementProps {
     mentionPrefix?: string;
     renderMention?: (mention: MentionMatch) => React.ReactNode;
     variant?: "default" | "light" | "dark" | "reset";
 }
-interface MentionItem {
+interface ContextMentionItemProps {
     description?: string;
     id: string;
     label: string;
@@ -53,7 +52,7 @@ interface MentionMatch {
         mentionText: string;
     };
     endIndex: number;
-    item: MentionItem;
+    item: ContextMentionItemProps;
     startIndex: number;
     text: string;
 }
@@ -61,12 +60,12 @@ interface ContextInputValue {
     mentions: MentionMatch[];
     text: string;
 }
-interface MentionTrigger {
+interface ContextMentionTrigger {
     allowSpaceInQuery?: boolean;
     char: string;
     mentionRegex?: RegExp;
-    onSearch: (query: string, char: string) => Promise<MentionItem[]> | MentionItem[];
-    renderItem?: (item: MentionItem, isSelected: boolean) => React.ReactNode;
+    onSearch: (query: string, char: string) => Promise<ContextMentionItemProps[]> | ContextMentionItemProps[];
+    renderItem?: (item: ContextMentionItemProps, isSelected: boolean) => React.ReactNode;
 }
 interface ContextInputProps {
     afterElement?: React.ReactNode;
@@ -74,7 +73,7 @@ interface ContextInputProps {
     beforeElement?: React.ReactNode;
     children?: React.ReactNode;
     className?: string;
-    customMentionComponent?: ComponentType<MentionProps>;
+    customMentionComponent?: ComponentType<ContextMentionProps>;
     disabled?: boolean;
     maxLength?: number;
     maxSuggestions?: number;
@@ -87,15 +86,15 @@ interface ContextInputProps {
     onCompositionStart?: (event: React.CompositionEvent) => void;
     onFocus?: () => void;
     onKeyDown?: (event: React.KeyboardEvent) => void;
-    onMentionSelect?: (mention: MentionItem, trigger: string) => void;
+    onMentionSelect?: (mention: ContextMentionItemProps, trigger: string) => void;
     placeholder?: string;
     readOnly?: boolean;
     renderMention?: (mention: MentionMatch) => React.ReactNode;
-    renderSuggestion?: (item: MentionItem, isSelected: boolean) => React.ReactNode;
+    renderSuggestion?: (item: ContextMentionItemProps, isSelected: boolean) => React.ReactNode;
     root?: HTMLElement | null;
     size?: "default" | "large";
     suggestionListClassName?: string;
-    triggers?: MentionTrigger[];
+    triggers?: ContextMentionTrigger[];
     value?: ContextInputValue;
     variant?: "default" | "light" | "dark" | "reset";
 }
@@ -103,61 +102,18 @@ interface ContextMentionElement {
     children: [{
         text: "";
     }];
-    mentionData?: MentionItem["metadata"];
+    mentionData?: ContextMentionItemProps["metadata"];
     mentionId: string;
     mentionLabel: string;
     mentionPrefix?: string;
-    mentionType: MentionItem["type"];
+    mentionType: ContextMentionItemProps["type"];
     type: "mention";
 }
-interface ContextParagraphElement {
-    children: Array<ContextInputText | ContextMentionElement>;
-    type: "paragraph";
-}
-type ContextInputElement = ContextMentionElement | ContextParagraphElement;
-interface ContextInputText {
-    text: string;
-}
 interface ContextInputRef {
     focus: () => void;
 }
 
-interface MentionMenuPosition {
-    x: number;
-    y: number;
-}
-interface MentionMenuRef {
-    handleKeyDown: (event: React__default.KeyboardEvent) => boolean;
-}
-interface MentionMenuProps {
-    isOpen: boolean;
-    loading: boolean;
-    onClose: () => void;
-    onSelect: (mention: MentionItem, index: number) => void;
-    position: MentionMenuPosition | null;
-    renderSuggestion?: (item: MentionItem, isSelected: boolean) => React__default.ReactNode;
-    root?: HTMLElement | null;
-    suggestions: MentionItem[];
-}
-declare const MentionMenu: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<MentionMenuProps & React__default.RefAttributes<MentionMenuRef>>>;
-
-interface SlateEditorProps extends Pick<ContextInputProps, "placeholder" | "disabled" | "readOnly" | "autoFocus" | "variant" | "renderMention" | "mentionPrefix" | "customMentionComponent" | "onFocus" | "onBlur" | "className" | "maxLength"> {
-    children?: React__default.ReactNode;
-    editor: ReactEditor;
-    footer?: React__default.ReactNode;
-    hasFooter: boolean;
-    hasHeader: boolean;
-    minHeight: number;
-    onChange: (value: Descendant[]) => void;
-    onCompositionEnd?: (event: React__default.CompositionEvent) => void;
-    onCompositionStart?: (event: React__default.CompositionEvent) => void;
-    onKeyDown: (event: React__default.KeyboardEvent) => void;
-    size: "default" | "large";
-    slateValue: Descendant[];
-}
-declare const SlateEditor: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<SlateEditorProps & React__default.RefAttributes<HTMLDivElement>>>;
-
-declare const Mention: React__default.MemoExoticComponent<(props: MentionProps) => react_jsx_runtime.JSX.Element>;
+declare const Mention: React__default.MemoExoticComponent<(props: ContextMentionProps) => react_jsx_runtime.JSX.Element>;
 
 interface ContextInputComponent extends React__default.ForwardRefExoticComponent<ContextInputProps & React__default.RefAttributes<ContextInputRef>> {
     CopyButton: typeof CopyButton;
@@ -174,8 +130,12 @@ interface MentionSearchState {
     index: number;
     isSearching: boolean;
     loading: boolean;
+    position: {
+        x: number;
+        y: number;
+    } | null;
     query: string;
-    suggestions: MentionItem[];
+    suggestions: ContextMentionItemProps[];
     target: Range | null;
     trigger: string;
 }
@@ -183,26 +143,21 @@ interface UseMentionsProps {
     editor: ContextEditor;
     maxSuggestions?: number;
     mentionPrefix?: string;
-    onMentionSelect?: (mention: MentionItem, trigger: string) => void;
+    onMentionSelect?: (mention: ContextMentionItemProps, trigger: string) => void;
     onSearchClose?: () => void;
-    triggers: MentionTrigger[];
+    triggers: ContextMentionTrigger[];
 }
 declare function useMentions({ editor, triggers, maxSuggestions, mentionPrefix, onMentionSelect, onSearchClose, }: UseMentionsProps): {
     searchState: MentionSearchState;
-    insertMention: (mention: MentionItem) => void;
-    handleKeyDown: (event: React.KeyboardEvent) => boolean;
-    getSuggestionPosition: () => {
-        x: number;
-        y: number;
-    } | null;
+    checkMentionSearch: () => void;
+    insertMention: (mention: ContextMentionItemProps) => void;
+    handleKeyDown: (event: React$1.KeyboardEvent<Element>) => boolean;
     closeMentionSearch: () => void;
     selectMention: (index: number) => void;
     selectNextMention: () => void;
     selectPreviousMention: () => void;
 };
 
-declare const useSlateEditor: (maxLength?: number) => ContextEditor;
-
 interface UseContextInputProps {
     autoFocus?: boolean;
     editor?: ContextEditor;
@@ -214,21 +169,20 @@ declare const useContextInput: ({ value, onChange, editor, autoFocus }: UseConte
     handleChange: (newValue: Descendant[]) => void;
 };
 
-declare const ContextInputEditorContext: React$1.Context<ContextEditor | null>;
 declare const useContextInputEditor: () => ContextEditor;
 
 /**
- * 将SlateJS节点数组转换为字符串
- * mention节点转换为 {{#context#}}{{#id.text#}} 格式
+ * Convert SlateJS node array to string
+ * Mention nodes are converted to {{#context#}}{{#id.text#}} format
  */
 declare function convertSlateToText(nodes: Descendant[]): string;
 /**
- * 将字符串转换为SlateJS节点数组
- * 支持解析 {{#context#}}{{#id.text#}} 格式为mention节点
+ * Convert string to SlateJS node array
+ * Supports parsing {{#context#}}{{#id.text#}} format to mention nodes
  */
 declare function convertTextToSlate(text: string): Descendant[];
 /**
- * 创建mention查找函数的接口
+ * Interface for mention resolver function
  */
 interface MentionResolver {
     (mentionId: string): Promise<{
@@ -238,7 +192,7 @@ interface MentionResolver {
     }>;
 }
 /**
- * 高级版本：支持异步解析mention信息
+ * Advanced version: supports async mention info resolution
  */
 declare function convertTextToSlateWithResolver(text: string, mentionResolver?: MentionResolver): Promise<Descendant[]>;
 
@@ -258,193 +212,35 @@ declare const extractMentionContext: (text: string, startIndex: number, endIndex
 };
 
 /**
- * 检查是否需要在当前位置前面添加空格
- * @param editor - SlateJS 编辑器实例
- * @returns 是否需要添加前导空格
+ * Check if a space should be inserted before the current position
+ * @param editor - SlateJS editor instance
+ * @returns Whether a leading space should be added
  */
 declare function shouldInsertSpaceBefore(editor: Editor): boolean;
 /**
- * 检查是否需要在当前位置后面添加空格
- * @param editor - SlateJS 编辑器实例
- * @returns 是否需要添加后导空格
+ * Check if a space should be inserted after the current position
+ * @param editor - SlateJS editor instance
+ * @returns Whether a trailing space should be added
  */
 declare function shouldInsertSpaceAfter(editor: Editor): boolean;
 /**
- * 在当前位置智能插入空格（前导空格）
- * @param editor - SlateJS 编辑器实例
- * @returns 是否插入了空格
+ * Smartly insert space at current position (leading space)
+ * @param editor - SlateJS editor instance
+ * @returns Whether a space was inserted
  */
 declare function insertSpaceBeforeIfNeeded(editor: Editor): boolean;
 /**
- * 在当前位置智能插入空格（后导空格）
- * @param editor - SlateJS 编辑器实例
- * @returns 是否插入了空格
+ * Smartly insert space at current position (trailing space)
+ * @param editor - SlateJS editor instance
+ * @returns Whether a space was inserted
  */
 declare function insertSpaceAfterIfNeeded(editor: Editor): boolean;
 /**
- * 为 mention 插入智能间距
- * 这个函数会在插入 mention 前后根据上下文智能添加空格
- * @param editor - SlateJS 编辑器实例
- * @param beforeInsertion - 在插入内容前执行的回调
+ * Insert smart spacing for mention
+ * This function intelligently adds spaces before/after mention insertion based on context
+ * @param editor - SlateJS editor instance
+ * @param beforeInsertion - Callback to execute before content insertion
  */
 declare function insertWithSmartSpacing(editor: Editor, beforeInsertion: () => void): void;
 
-declare const contextInputTv: tailwind_variants.TVReturnType<{
-    size: {
-        default: {
-            container: string;
-            placeholder: string;
-        };
-        large: {
-            container: string;
-            placeholder: string;
-        };
-    };
-    hasHeader: {
-        true: {};
-        false: {};
-    };
-    hasFooter: {
-        true: {};
-        false: {};
-    };
-    variant: {
-        default: {
-            container: string[];
-        };
-        light: {
-            container: string[];
-        };
-        dark: {
-            container: string[];
-        };
-        reset: {
-            container: string;
-        };
-    };
-    selected: {
-        true: {};
-    };
-    disabled: {
-        true: {
-            placeholder: string;
-        };
-        false: {
-            placeholder: string;
-        };
-    };
-}, {
-    container: string[];
-    scrollArea: string[];
-    viewport: string[];
-    scrollContainer: string[];
-    editor: string[];
-    placeholder: string[];
-    loading: string;
-}, undefined, {
-    size: {
-        default: {
-            container: string;
-            placeholder: string;
-        };
-        large: {
-            container: string;
-            placeholder: string;
-        };
-    };
-    hasHeader: {
-        true: {};
-        false: {};
-    };
-    hasFooter: {
-        true: {};
-        false: {};
-    };
-    variant: {
-        default: {
-            container: string[];
-        };
-        light: {
-            container: string[];
-        };
-        dark: {
-            container: string[];
-        };
-        reset: {
-            container: string;
-        };
-    };
-    selected: {
-        true: {};
-    };
-    disabled: {
-        true: {
-            placeholder: string;
-        };
-        false: {
-            placeholder: string;
-        };
-    };
-}, {
-    container: string[];
-    scrollArea: string[];
-    viewport: string[];
-    scrollContainer: string[];
-    editor: string[];
-    placeholder: string[];
-    loading: string;
-}, tailwind_variants.TVReturnType<{
-    size: {
-        default: {
-            container: string;
-            placeholder: string;
-        };
-        large: {
-            container: string;
-            placeholder: string;
-        };
-    };
-    hasHeader: {
-        true: {};
-        false: {};
-    };
-    hasFooter: {
-        true: {};
-        false: {};
-    };
-    variant: {
-        default: {
-            container: string[];
-        };
-        light: {
-            container: string[];
-        };
-        dark: {
-            container: string[];
-        };
-        reset: {
-            container: string;
-        };
-    };
-    selected: {
-        true: {};
-    };
-    disabled: {
-        true: {
-            placeholder: string;
-        };
-        false: {
-            placeholder: string;
-        };
-    };
-}, {
-    container: string[];
-    scrollArea: string[];
-    viewport: string[];
-    scrollContainer: string[];
-    editor: string[];
-    placeholder: string[];
-    loading: string;
-}, undefined, unknown, unknown, undefined>>;
-
-export { ContextInput, ContextInputEditorContext, type ContextInputElement, ContextInputFooter, ContextInputHeader, type ContextInputProps, type ContextInputRef, type ContextInputText, type ContextInputValue, type ContextMentionElement, type ContextParagraphElement, CopyButton, InsertMentionsButton, Mention, type MentionItem, type MentionMatch, MentionMenu, type MentionMenuRef, type MentionProps, type MentionResolver, type MentionTrigger, SlateEditor, contextInputTv, convertSlateToText, convertTextToSlate, convertTextToSlateWithResolver, extractMentionContext, extractTextWithMentions, insertSpaceAfterIfNeeded, insertSpaceBeforeIfNeeded, insertWithSmartSpacing, parseTextWithMentions, shouldInsertSpaceAfter, shouldInsertSpaceBefore, useContextInput, useContextInputEditor, useMentions, useSlateEditor };
+export { ContextInput, type ContextInputProps, type ContextInputRef, type ContextInputValue, type ContextMentionElement, type ContextMentionItemProps, type ContextMentionProps, type ContextMentionTrigger, CopyButton, InsertMentionsButton, convertSlateToText, convertTextToSlate, convertTextToSlateWithResolver, extractMentionContext, extractTextWithMentions, insertSpaceAfterIfNeeded, insertSpaceBeforeIfNeeded, insertWithSmartSpacing, parseTextWithMentions, shouldInsertSpaceAfter, shouldInsertSpaceBefore, useContextInput, useContextInputEditor, useMentions };

package/dist/components/context-input/src/components/mention-menu.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { MentionItem } from '../types';
+import { ContextMentionItemProps } from '../types';
 export interface MentionMenuPosition {
     x: number;
     y: number;
@@ -11,11 +11,12 @@ interface MentionMenuProps {
     isOpen: boolean;
     loading: boolean;
     onClose: () => void;
-    onSelect: (mention: MentionItem, index: number) => void;
+    onSelect: (mention: ContextMentionItemProps, index: number) => void;
     position: MentionMenuPosition | null;
-    renderSuggestion?: (item: MentionItem, isSelected: boolean) => React.ReactNode;
+    renderSuggestion?: (item: ContextMentionItemProps, isSelected: boolean) => React.ReactNode;
     root?: HTMLElement | null;
-    suggestions: MentionItem[];
+    suggestions: ContextMentionItemProps[];
+    disabled?: boolean;
 }
 export declare const MentionMenu: React.MemoExoticComponent<React.ForwardRefExoticComponent<MentionMenuProps & React.RefAttributes<MentionMenuRef>>>;
 export {};

package/dist/components/context-input/src/components/mention-menu.js

@@ -1,11 +1,25 @@
 import { jsx } from "react/jsx-runtime";
 import { Combobox as Combobox2 } from "../../../combobox/dist/index.js";
 import { memo, forwardRef, useImperativeHandle } from "react";
-import { contextInputTv } from "../tv.js";
+const FOCUS_MANAGER_PROPS = {
+  initialFocus: -1,
+  returnFocus: false,
+  modal: false,
+  guards: false
+};
 const MentionMenu = memo(
   forwardRef(function MentionMenu2(props, ref) {
-    const { isOpen, loading, position, onSelect, renderSuggestion, suggestions, onClose, root } = props;
-    contextInputTv();
+    const {
+      isOpen,
+      loading,
+      position,
+      onSelect,
+      renderSuggestion,
+      suggestions,
+      onClose,
+      root,
+      disabled = false
+    } = props;
     useImperativeHandle(
       ref,
       () => ({
@@ -37,7 +51,7 @@ const MentionMenu = memo(
       }),
       [isOpen, suggestions.length]
     );
-    return loading ? null : /* @__PURE__ */ jsx(
+    return loading || disabled ? null : /* @__PURE__ */ jsx(
       Combobox2,
       {
         trigger: "coordinate",
@@ -50,6 +64,7 @@ const MentionMenu = memo(
         onChange: () => {
         },
         root,
+        focusManagerProps: FOCUS_MANAGER_PROPS,
         children: suggestions.length > 0 && /* @__PURE__ */ jsx(Combobox2.Content, { children: suggestions.map((item, index) => /* @__PURE__ */ jsx(
           Combobox2.Item,
           {

package/dist/components/context-input/src/components/mention.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
-import { MentionProps } from '../types';
-export declare const Mention: React.MemoExoticComponent<(props: MentionProps) => import("react/jsx-runtime").JSX.Element>;
+import { ContextMentionProps } from '../types';
+export declare const Mention: React.MemoExoticComponent<(props: ContextMentionProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/context-input/src/components/slate-editor.js

@@ -70,7 +70,7 @@ const SlateEditorComponent = React.forwardRef(
     return /* @__PURE__ */ jsx(
       ScrollArea,
       {
-        scrollbarMode: size === "large" ? "large-y" : "default",
+        scrollbarMode: size === "large" ? "padding-y" : "default",
         className: tv.scrollArea(),
         ...props,
         children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { className: tv.viewport(), children: /* @__PURE__ */ jsxs(ScrollArea.Content, { className: tv.scrollContainer(), children: [
@@ -86,6 +86,7 @@ const SlateEditorComponent = React.forwardRef(
                 {
                   ref,
                   spellCheck: false,
+                  suppressHydrationWarning: true,
                   className: tv.editor(),
                   placeholder,
                   renderPlaceholder,
@@ -111,7 +112,8 @@ const SlateEditorComponent = React.forwardRef(
   }
 );
 const SlateEditor = React.memo(SlateEditorComponent, (prevProps, nextProps) => {
-  return prevProps.editor === nextProps.editor && prevProps.slateValue === nextProps.slateValue && prevProps.placeholder === nextProps.placeholder && prevProps.disabled === nextProps.disabled && prevProps.readOnly === nextProps.readOnly && prevProps.autoFocus === nextProps.autoFocus && prevProps.variant === nextProps.variant && prevProps.renderMention === nextProps.renderMention && prevProps.mentionPrefix === nextProps.mentionPrefix && prevProps.customMentionComponent === nextProps.customMentionComponent && prevProps.className === nextProps.className && prevProps.maxLength === nextProps.maxLength && prevProps.minHeight === nextProps.minHeight && prevProps.onChange === nextProps.onChange && prevProps.onKeyDown === nextProps.onKeyDown && prevProps.onCompositionStart === nextProps.onCompositionStart && prevProps.onCompositionEnd === nextProps.onCompositionEnd && prevProps.onFocus === nextProps.onFocus && prevProps.onBlur === nextProps.onBlur && prevProps.hasHeader === nextProps.hasHeader && prevProps.hasFooter === nextProps.hasFooter && prevProps.size === nextProps.size && prevProps.children === nextProps.children;
+  return prevProps.editor === nextProps.editor && // Don't compare slateValue - Slate manages state internally
+  prevProps.placeholder === nextProps.placeholder && prevProps.disabled === nextProps.disabled && prevProps.readOnly === nextProps.readOnly && prevProps.autoFocus === nextProps.autoFocus && prevProps.variant === nextProps.variant && prevProps.renderMention === nextProps.renderMention && prevProps.mentionPrefix === nextProps.mentionPrefix && prevProps.customMentionComponent === nextProps.customMentionComponent && prevProps.className === nextProps.className && prevProps.maxLength === nextProps.maxLength && prevProps.minHeight === nextProps.minHeight && prevProps.onChange === nextProps.onChange && prevProps.onKeyDown === nextProps.onKeyDown && prevProps.onCompositionStart === nextProps.onCompositionStart && prevProps.onCompositionEnd === nextProps.onCompositionEnd && prevProps.onFocus === nextProps.onFocus && prevProps.onBlur === nextProps.onBlur && prevProps.hasHeader === nextProps.hasHeader && prevProps.hasFooter === nextProps.hasFooter && prevProps.size === nextProps.size && prevProps.children === nextProps.children;
 });
 export {
   SlateEditor

package/dist/components/context-input/src/context-input.js

@@ -6,14 +6,15 @@ import { contextInputTv } from "./tv.js";
 import { useSlateEditor } from "./hooks/use-slate-editor.js";
 import { ContextInputHeader } from "./components/context-input-header.js";
 import { ContextInputFooter } from "./components/context-input-footer.js";
-import { useContextInput } from "./hooks/use-context-input.js";
 import { useMentions } from "./hooks/use-mentions.js";
+import { useContextInput } from "./hooks/use-context-input.js";
 import { ContextInputEditorContext } from "./hooks/use-context-input-editor.js";
 import { SlateEditor } from "./components/slate-editor.js";
 import { MentionMenu } from "./components/mention-menu.js";
 import { CopyButton } from "./components/copy-button.js";
 import { InsertMentionsButton } from "./components/insert-mentions-button.js";
 import { Mention } from "./components/mention.js";
+const EMPTY_TRIGGERS = [];
 const ContextInputBase = forwardRef(function ContextInputBase2({
   value,
   placeholder = "Type someone...",
@@ -23,7 +24,7 @@ const ContextInputBase = forwardRef(function ContextInputBase2({
   autoFocus = false,
   className,
   customMentionComponent,
-  triggers = [],
+  triggers = EMPTY_TRIGGERS,
   maxSuggestions = 10,
   variant = "default",
   mentionPrefix = "@",
@@ -48,11 +49,17 @@ const ContextInputBase = forwardRef(function ContextInputBase2({
   const mentionMenuRef = useRef(null);
   useImperativeHandle(ref, () => ({
     focus: () => {
-      ReactEditor.focus(editor);
+      try {
+        ReactEditor.focus(editor);
+      } catch {
+      }
     }
   }));
   const handleFocusClick = useEventCallback(() => {
-    ReactEditor.focus(editor);
+    try {
+      ReactEditor.focus(editor);
+    } catch {
+    }
   });
   const { header, footer, otherChildren } = useMemo(() => {
     let header2 = null;
@@ -83,12 +90,6 @@ const ContextInputBase = forwardRef(function ContextInputBase2({
   }, [children, size, handleFocusClick]);
   const hasHeader = !!header;
   const hasFooter = !!footer;
-  const { slateValue, handleChange } = useContextInput({
-    value,
-    onChange: readOnly ? void 0 : onChange,
-    editor,
-    autoFocus
-  });
   const handleSearchClose = useEventCallback(() => {
     ReactEditor.focus(editor);
   });
@@ -100,6 +101,18 @@ const ContextInputBase = forwardRef(function ContextInputBase2({
     onMentionSelect,
     onSearchClose: handleSearchClose
   });
+  const { slateValue, handleChange: baseHandleChange } = useContextInput({
+    value,
+    onChange: readOnly ? void 0 : onChange,
+    editor,
+    autoFocus
+  });
+  const handleChange = useEventCallback((newValue) => {
+    baseHandleChange(newValue);
+    requestAnimationFrame(() => {
+      mentions.checkMentionSearch();
+    });
+  });
   const handleKeyDown = useEventCallback((event) => {
     var _a;
     if ((_a = mentionMenuRef.current) == null ? void 0 : _a.handleKeyDown(event)) {
@@ -107,10 +120,11 @@ const ContextInputBase = forwardRef(function ContextInputBase2({
     }
     onKeyDown == null ? void 0 : onKeyDown(event);
   });
-  const handleSuggestionSelect = useEventCallback((mention, index) => {
-    mentions.selectMention(index);
-  });
-  const suggestionPosition = useMemo(() => mentions.getSuggestionPosition(), [mentions]);
+  const handleSuggestionSelect = useEventCallback(
+    (mention, index) => {
+      mentions.selectMention(index);
+    }
+  );
   const tv = useMemo(
     () => contextInputTv({ hasHeader, hasFooter, size, disabled, variant }),
     [hasHeader, hasFooter, size, disabled, variant]
@@ -154,11 +168,12 @@ const ContextInputBase = forwardRef(function ContextInputBase2({
       MentionMenu,
       {
         ref: mentionMenuRef,
-        isOpen: mentions.searchState.isSearching && !!suggestionPosition,
+        disabled,
+        isOpen: mentions.searchState.isSearching && !!mentions.searchState.position,
         onClose: mentions.closeMentionSearch,
         suggestions: mentions.searchState.suggestions,
         loading: mentions.searchState.loading,
-        position: suggestionPosition,
+        position: mentions.searchState.position,
         onSelect: handleSuggestionSelect,
         renderSuggestion
       }

package/dist/components/context-input/src/extensions/with-mentions.d.ts

@@ -1,2 +1,2 @@
 import { Editor } from 'slate';
-export declare const withMentions: (editor: Editor) => import('../../..').CustomEditor;
+export declare const withMentions: <T extends Editor>(editor: T) => T;