@choice-ui/react 1.4.3 → 1.4.5

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,8 @@
 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 { HistoryEditor } from 'slate-history';
+import { RenderElementProps } from 'slate-react';
 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 +31,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 +50,7 @@ interface MentionMatch {
         mentionText: string;
     };
     endIndex: number;
-    item: MentionItem;
+    item: ContextMentionItemProps;
     startIndex: number;
     text: string;
 }
@@ -61,12 +58,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 +71,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 +84,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 +100,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;
@@ -168,283 +122,4 @@ interface ContextInputComponent extends React__default.ForwardRefExoticComponent
 }
 declare const ContextInput: ContextInputComponent;
 
-type ContextEditor = Editor & ReactEditor & HistoryEditor;
-
-interface MentionSearchState {
-    index: number;
-    isSearching: boolean;
-    loading: boolean;
-    query: string;
-    suggestions: MentionItem[];
-    target: Range | null;
-    trigger: string;
-}
-interface UseMentionsProps {
-    editor: ContextEditor;
-    maxSuggestions?: number;
-    mentionPrefix?: string;
-    onMentionSelect?: (mention: MentionItem, trigger: string) => void;
-    onSearchClose?: () => void;
-    triggers: MentionTrigger[];
-}
-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;
-    closeMentionSearch: () => void;
-    selectMention: (index: number) => void;
-    selectNextMention: () => void;
-    selectPreviousMention: () => void;
-};
-
-declare const useSlateEditor: (maxLength?: number) => ContextEditor;
-
-interface UseContextInputProps {
-    autoFocus?: boolean;
-    editor?: ContextEditor;
-    onChange?: (value: ContextInputValue) => void;
-    value?: ContextInputValue;
-}
-declare const useContextInput: ({ value, onChange, editor, autoFocus }: UseContextInputProps) => {
-    slateValue: Descendant[];
-    handleChange: (newValue: Descendant[]) => void;
-};
-
-declare const ContextInputEditorContext: React$1.Context<ContextEditor | null>;
-declare const useContextInputEditor: () => ContextEditor;
-
-/**
- * 将SlateJS节点数组转换为字符串
- * mention节点转换为 {{#context#}}{{#id.text#}} 格式
- */
-declare function convertSlateToText(nodes: Descendant[]): string;
-/**
- * 将字符串转换为SlateJS节点数组
- * 支持解析 {{#context#}}{{#id.text#}} 格式为mention节点
- */
-declare function convertTextToSlate(text: string): Descendant[];
-/**
- * 创建mention查找函数的接口
- */
-interface MentionResolver {
-    (mentionId: string): Promise<{
-        label: string;
-        metadata?: Record<string, unknown>;
-        type: string;
-    }>;
-}
-/**
- * 高级版本：支持异步解析mention信息
- */
-declare function convertTextToSlateWithResolver(text: string, mentionResolver?: MentionResolver): Promise<Descendant[]>;
-
-declare const extractTextWithMentions: (nodes: Descendant[]) => {
-    text: string;
-    mentionsData: {
-        element: ContextMentionElement;
-        endIndex: number;
-        startIndex: number;
-    }[];
-};
-declare const parseTextWithMentions: (text: string, mentions: MentionMatch[]) => Descendant[];
-
-declare const extractMentionContext: (text: string, startIndex: number, endIndex: number, contextLength?: number) => {
-    mentionText: string;
-    fullContext: string;
-};
-
-/**
- * 检查是否需要在当前位置前面添加空格
- * @param editor - SlateJS 编辑器实例
- * @returns 是否需要添加前导空格
- */
-declare function shouldInsertSpaceBefore(editor: Editor): boolean;
-/**
- * 检查是否需要在当前位置后面添加空格
- * @param editor - SlateJS 编辑器实例
- * @returns 是否需要添加后导空格
- */
-declare function shouldInsertSpaceAfter(editor: Editor): boolean;
-/**
- * 在当前位置智能插入空格（前导空格）
- * @param editor - SlateJS 编辑器实例
- * @returns 是否插入了空格
- */
-declare function insertSpaceBeforeIfNeeded(editor: Editor): boolean;
-/**
- * 在当前位置智能插入空格（后导空格）
- * @param editor - SlateJS 编辑器实例
- * @returns 是否插入了空格
- */
-declare function insertSpaceAfterIfNeeded(editor: Editor): boolean;
-/**
- * 为 mention 插入智能间距
- * 这个函数会在插入 mention 前后根据上下文智能添加空格
- * @param editor - SlateJS 编辑器实例
- * @param beforeInsertion - 在插入内容前执行的回调
- */
-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 };

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;