@diceui/mention - npm Package Compare versions

Comparing version 0.7.1 to 0.7.3

dist/index.cjs

@@ -6,4 +6,4 @@ 'use client';
 var shared = require('@diceui/shared');
+var react = require('@floating-ui/react');
 var React4 = require('react');
-var react = require('@floating-ui/react');
 
@@ -30,3 +30,3 @@ function _interopNamespace(e) {
 
-// src/mention-root.tsx
+// src/mention-content.tsx
 function getDataState(open) {
@@ -169,7 +169,19 @@ return open ? "open" : "closed";
       (mentionsToRemove) => {
-        setMentions(
-          (prev) => prev.filter(
-            (mention) => !mentionsToRemove.some((m) => m.value === mention.value)
-          )
-        );
+        setMentions((prev) => {
+          const removed = [...mentionsToRemove].sort(
+            (a, b) => a.start - b.start
+          );
+          const newMentions = prev.filter((mention) => {
+            const isRemoved = removed.some((m) => m.value === mention.value);
+            return !isRemoved;
+          }).map((mention) => {
+            const shift = removed.filter((r) => r.start < mention.start).reduce((acc, r) => acc + (r.end - r.start + 1), 0);
+            return {
+              ...mention,
+              start: mention.start - shift,
+              end: mention.end - shift
+            };
+          });
+          return newMentions;
+        });
       },
@@ -235,19 +247,123 @@ []
 var Root = MentionRoot;
-var LABEL_NAME = "MentionLabel";
-var MentionLabel = React4__namespace.forwardRef(
+
+// src/mention-content.tsx
+var CONTENT_NAME = "MentionContent";
+var [MentionContentProvider, useMentionContentContext] = shared.createContext(CONTENT_NAME);
+var MentionContent = React4__namespace.forwardRef(
   (props, forwardedRef) => {
-    const context = useMentionContext(LABEL_NAME);
+    const {
+      side = "bottom",
+      sideOffset = 4,
+      align = "start",
+      alignOffset = 0,
+      arrowPadding = 0,
+      collisionBoundary,
+      collisionPadding,
+      sticky = "partial",
+      strategy = "absolute",
+      avoidCollisions = true,
+      fitViewport = false,
+      forceMount = false,
+      hideWhenDetached = false,
+      trackAnchor = true,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      style,
+      ...contentProps
+    } = props;
+    const context = useMentionContext(CONTENT_NAME);
+    const rtlAwareAlign = React4__namespace.useMemo(() => {
+      if (context.dir !== "rtl") return align;
+      return align === "start" ? "end" : align === "end" ? "start" : align;
+    }, [align, context.dir]);
+    const positionerContext = shared.useAnchorPositioner({
+      open: context.open,
+      onOpenChange: context.onOpenChange,
+      anchorRef: context.virtualAnchor,
+      side,
+      sideOffset,
+      align: rtlAwareAlign,
+      alignOffset,
+      arrowPadding,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      strategy,
+      avoidCollisions,
+      disableArrow: true,
+      fitViewport,
+      hideWhenDetached,
+      trackAnchor
+    });
+    const composedRef = shared.useComposedRefs(
+      forwardedRef,
+      (node) => positionerContext.refs.setFloating(node)
+    );
+    const composedStyle = React4__namespace.useMemo(() => {
+      return {
+        ...style,
+        ...positionerContext.floatingStyles,
+        ...!context.open && forceMount ? { visibility: "hidden" } : {},
+        // Hide content visually during pasting while keeping items registered
+        ...context.isPasting ? shared.visuallyHidden : {}
+      };
+    }, [
+      style,
+      positionerContext.floatingStyles,
+      forceMount,
+      context.open,
+      context.isPasting
+    ]);
+    shared.useDismiss({
+      enabled: context.open,
+      onDismiss: () => context.onOpenChange(false),
+      refs: [context.listRef, context.inputRef],
+      onFocusOutside: (event) => event.preventDefault(),
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      disableOutsidePointerEvents: context.open && context.modal,
+      preventScrollDismiss: context.open
+    });
+    shared.useScrollLock({
+      referenceElement: context.inputRef.current,
+      enabled: context.open && context.modal
+    });
     return /* @__PURE__ */ React4__namespace.createElement(
-      shared.Primitive.label,
+      MentionContentProvider,
       {
-        ref: forwardedRef,
-        id: context.labelId,
-        htmlFor: context.inputId,
-        ...props
-      }
+        side,
+        align: rtlAwareAlign,
+        arrowStyles: positionerContext.arrowStyles,
+        arrowDisplaced: positionerContext.arrowDisplaced,
+        onArrowChange: positionerContext.onArrowChange,
+        forceMount
+      },
+      /* @__PURE__ */ React4__namespace.createElement(
+        react.FloatingFocusManager,
+        {
+          context: positionerContext.context,
+          modal: false,
+          initialFocus: context.inputRef,
+          returnFocus: false,
+          disabled: !context.open,
+          visuallyHiddenDismiss: true
+        },
+        /* @__PURE__ */ React4__namespace.createElement(shared.Presence, { present: forceMount || context.open }, /* @__PURE__ */ React4__namespace.createElement(
+          shared.Primitive.div,
+          {
+            ref: composedRef,
+            role: "listbox",
+            "aria-orientation": "vertical",
+            "data-state": getDataState(context.open),
+            dir: context.dir,
+            ...positionerContext.getFloatingProps(contentProps),
+            style: composedStyle
+          }
+        ))
+      )
     );
   }
 );
-MentionLabel.displayName = LABEL_NAME;
-var Label = MentionLabel;
+MentionContent.displayName = CONTENT_NAME;
+var Content = MentionContent;
 var HIGHLIGHTER_NAME = "MentionHighlighter";
@@ -426,3 +542,3 @@ var defaultHighlighterStyle = {
       const style = window.getComputedStyle(input);
-      return Number.parseInt(style.lineHeight) ?? input.offsetHeight;
+      return Number.parseInt(style.lineHeight, 10) ?? input.offsetHeight;
     }, []);
@@ -1107,138 +1223,2 @@ const calculatePosition = React4__namespace.useCallback(
 var Input = MentionInput;
-var PORTAL_NAME = "MentionPortal";
-var MentionPortal = React4__namespace.forwardRef(
-  (props, forwardedRef) => {
-    const { container, ...portalProps } = props;
-    return /* @__PURE__ */ React4__namespace.createElement(
-      shared.Portal,
-      {
-        container,
-        ...portalProps,
-        ref: forwardedRef,
-        asChild: true
-      }
-    );
-  }
-);
-MentionPortal.displayName = PORTAL_NAME;
-var Portal = MentionPortal;
-var CONTENT_NAME = "MentionContent";
-var [MentionContentProvider, useMentionContentContext] = shared.createContext(CONTENT_NAME);
-var MentionContent = React4__namespace.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      side = "bottom",
-      sideOffset = 4,
-      align = "start",
-      alignOffset = 0,
-      arrowPadding = 0,
-      collisionBoundary,
-      collisionPadding,
-      sticky = "partial",
-      strategy = "absolute",
-      avoidCollisions = true,
-      fitViewport = false,
-      forceMount = false,
-      hideWhenDetached = false,
-      trackAnchor = true,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      style,
-      ...contentProps
-    } = props;
-    const context = useMentionContext(CONTENT_NAME);
-    const rtlAwareAlign = React4__namespace.useMemo(() => {
-      if (context.dir !== "rtl") return align;
-      return align === "start" ? "end" : align === "end" ? "start" : align;
-    }, [align, context.dir]);
-    const positionerContext = shared.useAnchorPositioner({
-      open: context.open,
-      onOpenChange: context.onOpenChange,
-      anchorRef: context.virtualAnchor,
-      side,
-      sideOffset,
-      align: rtlAwareAlign,
-      alignOffset,
-      arrowPadding,
-      collisionBoundary,
-      collisionPadding,
-      sticky,
-      strategy,
-      avoidCollisions,
-      disableArrow: true,
-      fitViewport,
-      hideWhenDetached,
-      trackAnchor
-    });
-    const composedRef = shared.useComposedRefs(
-      forwardedRef,
-      (node) => positionerContext.refs.setFloating(node)
-    );
-    const composedStyle = React4__namespace.useMemo(() => {
-      return {
-        ...style,
-        ...positionerContext.floatingStyles,
-        ...!context.open && forceMount ? { visibility: "hidden" } : {},
-        // Hide content visually during pasting while keeping items registered
-        ...context.isPasting ? shared.visuallyHidden : {}
-      };
-    }, [
-      style,
-      positionerContext.floatingStyles,
-      forceMount,
-      context.open,
-      context.isPasting
-    ]);
-    shared.useDismiss({
-      enabled: context.open,
-      onDismiss: () => context.onOpenChange(false),
-      refs: [context.listRef, context.inputRef],
-      onFocusOutside: (event) => event.preventDefault(),
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      disableOutsidePointerEvents: context.open && context.modal,
-      preventScrollDismiss: context.open
-    });
-    shared.useScrollLock({
-      referenceElement: context.inputRef.current,
-      enabled: context.open && context.modal
-    });
-    return /* @__PURE__ */ React4__namespace.createElement(
-      MentionContentProvider,
-      {
-        side,
-        align: rtlAwareAlign,
-        arrowStyles: positionerContext.arrowStyles,
-        arrowDisplaced: positionerContext.arrowDisplaced,
-        onArrowChange: positionerContext.onArrowChange,
-        forceMount
-      },
-      /* @__PURE__ */ React4__namespace.createElement(
-        react.FloatingFocusManager,
-        {
-          context: positionerContext.context,
-          modal: false,
-          initialFocus: context.inputRef,
-          returnFocus: false,
-          disabled: !context.open,
-          visuallyHiddenDismiss: true
-        },
-        /* @__PURE__ */ React4__namespace.createElement(shared.Presence, { present: forceMount || context.open }, /* @__PURE__ */ React4__namespace.createElement(
-          shared.Primitive.div,
-          {
-            ref: composedRef,
-            role: "listbox",
-            "aria-orientation": "vertical",
-            "data-state": getDataState(context.open),
-            dir: context.dir,
-            ...positionerContext.getFloatingProps(contentProps),
-            style: composedStyle
-          }
-        ))
-      )
-    );
-  }
-);
-MentionContent.displayName = CONTENT_NAME;
-var Content = MentionContent;
 var ITEM_NAME = "MentionItem";
@@ -1324,2 +1304,36 @@ var [MentionItemProvider, useMentionItemContext] = shared.createContext(ITEM_NAME);
 var Item = MentionItem;
+var LABEL_NAME = "MentionLabel";
+var MentionLabel = React4__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const context = useMentionContext(LABEL_NAME);
+    return /* @__PURE__ */ React4__namespace.createElement(
+      shared.Primitive.label,
+      {
+        ref: forwardedRef,
+        id: context.labelId,
+        htmlFor: context.inputId,
+        ...props
+      }
+    );
+  }
+);
+MentionLabel.displayName = LABEL_NAME;
+var Label = MentionLabel;
+var PORTAL_NAME = "MentionPortal";
+var MentionPortal = React4__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { container, ...portalProps } = props;
+    return /* @__PURE__ */ React4__namespace.createElement(
+      shared.Portal,
+      {
+        container,
+        ...portalProps,
+        ref: forwardedRef,
+        asChild: true
+      }
+    );
+  }
+);
+MentionPortal.displayName = PORTAL_NAME;
+var Portal = MentionPortal;
 
@@ -1326,0 +1340,0 @@ exports.Content = Content;

dist/index.d.cts

@@ -21,20 +21,6 @@ import { AnchorPositionerProps, Primitive, PointerDownOutsideEvent, Direction, PortalProps } from '@diceui/shared';
 
-interface MentionItemProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
-    /**
-     * The value of the item.
-     *
-     * Cannot be an empty string.
-     */
-    value: string;
-    /**
-     * The label of the item. By default value is used as label.
-     *
-     * Override the text value for mention item in the input.
-     */
-    label?: string;
-    /** Whether the item is disabled. */
-    disabled?: boolean;
+interface MentionInputProps extends React.ComponentPropsWithoutRef<typeof Primitive.input> {
 }
-declare const MentionItem: React.ForwardRefExoticComponent<MentionItemProps & React.RefAttributes<HTMLDivElement>>;
-declare const Item: React.ForwardRefExoticComponent<MentionItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const MentionInput: React.ForwardRefExoticComponent<MentionInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const Input: React.ForwardRefExoticComponent<MentionInputProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -101,2 +87,21 @@ interface MentionRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Primitive.div>, "value" | "defaultValue"> {
 
+interface MentionItemProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
+    /**
+     * The value of the item.
+     *
+     * Cannot be an empty string.
+     */
+    value: string;
+    /**
+     * The label of the item. By default value is used as label.
+     *
+     * Override the text value for mention item in the input.
+     */
+    label?: string;
+    /** Whether the item is disabled. */
+    disabled?: boolean;
+}
+declare const MentionItem: React.ForwardRefExoticComponent<MentionItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const Item: React.ForwardRefExoticComponent<MentionItemProps & React.RefAttributes<HTMLDivElement>>;
+
 interface MentionLabelProps extends React.ComponentPropsWithoutRef<typeof Primitive.label> {
@@ -107,7 +112,2 @@ }
 
-interface MentionInputProps extends React.ComponentPropsWithoutRef<typeof Primitive.input> {
-}
-declare const MentionInput: React.ForwardRefExoticComponent<MentionInputProps & React.RefAttributes<HTMLInputElement>>;
-declare const Input: React.ForwardRefExoticComponent<MentionInputProps & React.RefAttributes<HTMLInputElement>>;
-
 interface MentionPortalProps extends Pick<PortalProps, "container" | "children"> {
@@ -114,0 +114,0 @@ }

dist/index.d.ts

@@ -21,20 +21,6 @@ import { AnchorPositionerProps, Primitive, PointerDownOutsideEvent, Direction, PortalProps } from '@diceui/shared';
 
-interface MentionItemProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
-    /**
-     * The value of the item.
-     *
-     * Cannot be an empty string.
-     */
-    value: string;
-    /**
-     * The label of the item. By default value is used as label.
-     *
-     * Override the text value for mention item in the input.
-     */
-    label?: string;
-    /** Whether the item is disabled. */
-    disabled?: boolean;
+interface MentionInputProps extends React.ComponentPropsWithoutRef<typeof Primitive.input> {
 }
-declare const MentionItem: React.ForwardRefExoticComponent<MentionItemProps & React.RefAttributes<HTMLDivElement>>;
-declare const Item: React.ForwardRefExoticComponent<MentionItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const MentionInput: React.ForwardRefExoticComponent<MentionInputProps & React.RefAttributes<HTMLInputElement>>;
+declare const Input: React.ForwardRefExoticComponent<MentionInputProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -101,2 +87,21 @@ interface MentionRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Primitive.div>, "value" | "defaultValue"> {
 
+interface MentionItemProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
+    /**
+     * The value of the item.
+     *
+     * Cannot be an empty string.
+     */
+    value: string;
+    /**
+     * The label of the item. By default value is used as label.
+     *
+     * Override the text value for mention item in the input.
+     */
+    label?: string;
+    /** Whether the item is disabled. */
+    disabled?: boolean;
+}
+declare const MentionItem: React.ForwardRefExoticComponent<MentionItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const Item: React.ForwardRefExoticComponent<MentionItemProps & React.RefAttributes<HTMLDivElement>>;
+
 interface MentionLabelProps extends React.ComponentPropsWithoutRef<typeof Primitive.label> {
@@ -107,7 +112,2 @@ }
 
-interface MentionInputProps extends React.ComponentPropsWithoutRef<typeof Primitive.input> {
-}
-declare const MentionInput: React.ForwardRefExoticComponent<MentionInputProps & React.RefAttributes<HTMLInputElement>>;
-declare const Input: React.ForwardRefExoticComponent<MentionInputProps & React.RefAttributes<HTMLInputElement>>;
-
 interface MentionPortalProps extends Pick<PortalProps, "container" | "children"> {
@@ -114,0 +114,0 @@ }

dist/index.js

 'use client';
 
-import { createContext, useId, useCollection, useFormControl, composeRefs, useDirection, useControllableState, useFilterStore, useListHighlighting, Primitive, VisuallyHiddenInput, useComposedRefs, useCallbackRef, composeEventHandlers, Portal as Portal$1, useAnchorPositioner, visuallyHidden, useDismiss, useScrollLock, Presence, useIsomorphicLayoutEffect, DATA_ITEM_ATTR } from '@diceui/shared';
+import { createContext, useId, useCollection, useFormControl, composeRefs, useDirection, useControllableState, useFilterStore, useListHighlighting, Primitive, VisuallyHiddenInput, useAnchorPositioner, useComposedRefs, visuallyHidden, useDismiss, useScrollLock, Presence, useCallbackRef, composeEventHandlers, useIsomorphicLayoutEffect, DATA_ITEM_ATTR, Portal as Portal$1 } from '@diceui/shared';
+import { FloatingFocusManager } from '@floating-ui/react';
 import * as React4 from 'react';
-import { FloatingFocusManager } from '@floating-ui/react';
 
-// src/mention-root.tsx
+// src/mention-content.tsx
 function getDataState(open) {
@@ -145,7 +145,19 @@ return open ? "open" : "closed";
       (mentionsToRemove) => {
-        setMentions(
-          (prev) => prev.filter(
-            (mention) => !mentionsToRemove.some((m) => m.value === mention.value)
-          )
-        );
+        setMentions((prev) => {
+          const removed = [...mentionsToRemove].sort(
+            (a, b) => a.start - b.start
+          );
+          const newMentions = prev.filter((mention) => {
+            const isRemoved = removed.some((m) => m.value === mention.value);
+            return !isRemoved;
+          }).map((mention) => {
+            const shift = removed.filter((r) => r.start < mention.start).reduce((acc, r) => acc + (r.end - r.start + 1), 0);
+            return {
+              ...mention,
+              start: mention.start - shift,
+              end: mention.end - shift
+            };
+          });
+          return newMentions;
+        });
       },
@@ -211,19 +223,123 @@ []
 var Root = MentionRoot;
-var LABEL_NAME = "MentionLabel";
-var MentionLabel = React4.forwardRef(
+
+// src/mention-content.tsx
+var CONTENT_NAME = "MentionContent";
+var [MentionContentProvider, useMentionContentContext] = createContext(CONTENT_NAME);
+var MentionContent = React4.forwardRef(
   (props, forwardedRef) => {
-    const context = useMentionContext(LABEL_NAME);
+    const {
+      side = "bottom",
+      sideOffset = 4,
+      align = "start",
+      alignOffset = 0,
+      arrowPadding = 0,
+      collisionBoundary,
+      collisionPadding,
+      sticky = "partial",
+      strategy = "absolute",
+      avoidCollisions = true,
+      fitViewport = false,
+      forceMount = false,
+      hideWhenDetached = false,
+      trackAnchor = true,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      style,
+      ...contentProps
+    } = props;
+    const context = useMentionContext(CONTENT_NAME);
+    const rtlAwareAlign = React4.useMemo(() => {
+      if (context.dir !== "rtl") return align;
+      return align === "start" ? "end" : align === "end" ? "start" : align;
+    }, [align, context.dir]);
+    const positionerContext = useAnchorPositioner({
+      open: context.open,
+      onOpenChange: context.onOpenChange,
+      anchorRef: context.virtualAnchor,
+      side,
+      sideOffset,
+      align: rtlAwareAlign,
+      alignOffset,
+      arrowPadding,
+      collisionBoundary,
+      collisionPadding,
+      sticky,
+      strategy,
+      avoidCollisions,
+      disableArrow: true,
+      fitViewport,
+      hideWhenDetached,
+      trackAnchor
+    });
+    const composedRef = useComposedRefs(
+      forwardedRef,
+      (node) => positionerContext.refs.setFloating(node)
+    );
+    const composedStyle = React4.useMemo(() => {
+      return {
+        ...style,
+        ...positionerContext.floatingStyles,
+        ...!context.open && forceMount ? { visibility: "hidden" } : {},
+        // Hide content visually during pasting while keeping items registered
+        ...context.isPasting ? visuallyHidden : {}
+      };
+    }, [
+      style,
+      positionerContext.floatingStyles,
+      forceMount,
+      context.open,
+      context.isPasting
+    ]);
+    useDismiss({
+      enabled: context.open,
+      onDismiss: () => context.onOpenChange(false),
+      refs: [context.listRef, context.inputRef],
+      onFocusOutside: (event) => event.preventDefault(),
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      disableOutsidePointerEvents: context.open && context.modal,
+      preventScrollDismiss: context.open
+    });
+    useScrollLock({
+      referenceElement: context.inputRef.current,
+      enabled: context.open && context.modal
+    });
     return /* @__PURE__ */ React4.createElement(
-      Primitive.label,
+      MentionContentProvider,
       {
-        ref: forwardedRef,
-        id: context.labelId,
-        htmlFor: context.inputId,
-        ...props
-      }
+        side,
+        align: rtlAwareAlign,
+        arrowStyles: positionerContext.arrowStyles,
+        arrowDisplaced: positionerContext.arrowDisplaced,
+        onArrowChange: positionerContext.onArrowChange,
+        forceMount
+      },
+      /* @__PURE__ */ React4.createElement(
+        FloatingFocusManager,
+        {
+          context: positionerContext.context,
+          modal: false,
+          initialFocus: context.inputRef,
+          returnFocus: false,
+          disabled: !context.open,
+          visuallyHiddenDismiss: true
+        },
+        /* @__PURE__ */ React4.createElement(Presence, { present: forceMount || context.open }, /* @__PURE__ */ React4.createElement(
+          Primitive.div,
+          {
+            ref: composedRef,
+            role: "listbox",
+            "aria-orientation": "vertical",
+            "data-state": getDataState(context.open),
+            dir: context.dir,
+            ...positionerContext.getFloatingProps(contentProps),
+            style: composedStyle
+          }
+        ))
+      )
     );
   }
 );
-MentionLabel.displayName = LABEL_NAME;
-var Label = MentionLabel;
+MentionContent.displayName = CONTENT_NAME;
+var Content = MentionContent;
 var HIGHLIGHTER_NAME = "MentionHighlighter";
@@ -402,3 +518,3 @@ var defaultHighlighterStyle = {
       const style = window.getComputedStyle(input);
-      return Number.parseInt(style.lineHeight) ?? input.offsetHeight;
+      return Number.parseInt(style.lineHeight, 10) ?? input.offsetHeight;
     }, []);
@@ -1083,138 +1199,2 @@ const calculatePosition = React4.useCallback(
 var Input = MentionInput;
-var PORTAL_NAME = "MentionPortal";
-var MentionPortal = React4.forwardRef(
-  (props, forwardedRef) => {
-    const { container, ...portalProps } = props;
-    return /* @__PURE__ */ React4.createElement(
-      Portal$1,
-      {
-        container,
-        ...portalProps,
-        ref: forwardedRef,
-        asChild: true
-      }
-    );
-  }
-);
-MentionPortal.displayName = PORTAL_NAME;
-var Portal = MentionPortal;
-var CONTENT_NAME = "MentionContent";
-var [MentionContentProvider, useMentionContentContext] = createContext(CONTENT_NAME);
-var MentionContent = React4.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      side = "bottom",
-      sideOffset = 4,
-      align = "start",
-      alignOffset = 0,
-      arrowPadding = 0,
-      collisionBoundary,
-      collisionPadding,
-      sticky = "partial",
-      strategy = "absolute",
-      avoidCollisions = true,
-      fitViewport = false,
-      forceMount = false,
-      hideWhenDetached = false,
-      trackAnchor = true,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      style,
-      ...contentProps
-    } = props;
-    const context = useMentionContext(CONTENT_NAME);
-    const rtlAwareAlign = React4.useMemo(() => {
-      if (context.dir !== "rtl") return align;
-      return align === "start" ? "end" : align === "end" ? "start" : align;
-    }, [align, context.dir]);
-    const positionerContext = useAnchorPositioner({
-      open: context.open,
-      onOpenChange: context.onOpenChange,
-      anchorRef: context.virtualAnchor,
-      side,
-      sideOffset,
-      align: rtlAwareAlign,
-      alignOffset,
-      arrowPadding,
-      collisionBoundary,
-      collisionPadding,
-      sticky,
-      strategy,
-      avoidCollisions,
-      disableArrow: true,
-      fitViewport,
-      hideWhenDetached,
-      trackAnchor
-    });
-    const composedRef = useComposedRefs(
-      forwardedRef,
-      (node) => positionerContext.refs.setFloating(node)
-    );
-    const composedStyle = React4.useMemo(() => {
-      return {
-        ...style,
-        ...positionerContext.floatingStyles,
-        ...!context.open && forceMount ? { visibility: "hidden" } : {},
-        // Hide content visually during pasting while keeping items registered
-        ...context.isPasting ? visuallyHidden : {}
-      };
-    }, [
-      style,
-      positionerContext.floatingStyles,
-      forceMount,
-      context.open,
-      context.isPasting
-    ]);
-    useDismiss({
-      enabled: context.open,
-      onDismiss: () => context.onOpenChange(false),
-      refs: [context.listRef, context.inputRef],
-      onFocusOutside: (event) => event.preventDefault(),
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      disableOutsidePointerEvents: context.open && context.modal,
-      preventScrollDismiss: context.open
-    });
-    useScrollLock({
-      referenceElement: context.inputRef.current,
-      enabled: context.open && context.modal
-    });
-    return /* @__PURE__ */ React4.createElement(
-      MentionContentProvider,
-      {
-        side,
-        align: rtlAwareAlign,
-        arrowStyles: positionerContext.arrowStyles,
-        arrowDisplaced: positionerContext.arrowDisplaced,
-        onArrowChange: positionerContext.onArrowChange,
-        forceMount
-      },
-      /* @__PURE__ */ React4.createElement(
-        FloatingFocusManager,
-        {
-          context: positionerContext.context,
-          modal: false,
-          initialFocus: context.inputRef,
-          returnFocus: false,
-          disabled: !context.open,
-          visuallyHiddenDismiss: true
-        },
-        /* @__PURE__ */ React4.createElement(Presence, { present: forceMount || context.open }, /* @__PURE__ */ React4.createElement(
-          Primitive.div,
-          {
-            ref: composedRef,
-            role: "listbox",
-            "aria-orientation": "vertical",
-            "data-state": getDataState(context.open),
-            dir: context.dir,
-            ...positionerContext.getFloatingProps(contentProps),
-            style: composedStyle
-          }
-        ))
-      )
-    );
-  }
-);
-MentionContent.displayName = CONTENT_NAME;
-var Content = MentionContent;
 var ITEM_NAME = "MentionItem";
@@ -1300,3 +1280,37 @@ var [MentionItemProvider, useMentionItemContext] = createContext(ITEM_NAME);
 var Item = MentionItem;
+var LABEL_NAME = "MentionLabel";
+var MentionLabel = React4.forwardRef(
+  (props, forwardedRef) => {
+    const context = useMentionContext(LABEL_NAME);
+    return /* @__PURE__ */ React4.createElement(
+      Primitive.label,
+      {
+        ref: forwardedRef,
+        id: context.labelId,
+        htmlFor: context.inputId,
+        ...props
+      }
+    );
+  }
+);
+MentionLabel.displayName = LABEL_NAME;
+var Label = MentionLabel;
+var PORTAL_NAME = "MentionPortal";
+var MentionPortal = React4.forwardRef(
+  (props, forwardedRef) => {
+    const { container, ...portalProps } = props;
+    return /* @__PURE__ */ React4.createElement(
+      Portal$1,
+      {
+        container,
+        ...portalProps,
+        ref: forwardedRef,
+        asChild: true
+      }
+    );
+  }
+);
+MentionPortal.displayName = PORTAL_NAME;
+var Portal = MentionPortal;
 
 export { Content, Input, Item, Label, MentionContent, MentionInput, MentionItem, MentionLabel, MentionPortal, MentionRoot, Portal, Root };

package.json

 {
   "name": "@diceui/mention",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "type": "module",
@@ -5,0 +5,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

112818

0.96%

Lines of code

2752

0.95%

No dependency changes