@assistant-ui/react 0.12.24 → 0.12.26

package/src/primitives/composer/trigger/TriggerPopoverCategories.tsx

@@ -9,13 +9,9 @@ import {
   useCallback,
 } from "react";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { useTriggerPopoverContext } from "./TriggerPopoverContext";
+import { useTriggerPopoverScopeContext } from "./TriggerPopover";
 import type { Unstable_TriggerCategory } from "@assistant-ui/core";
 
-// =============================================================================
-// TriggerPopoverCategories — Renders the list of categories
-// =============================================================================
-
 export namespace ComposerPrimitiveTriggerPopoverCategories {
   export type Element = ComponentRef<typeof Primitive.div>;
   export type Props = Omit<
@@ -34,10 +30,10 @@ export const ComposerPrimitiveTriggerPopoverCategories = forwardRef<
   ComposerPrimitiveTriggerPopoverCategories.Element,
   ComposerPrimitiveTriggerPopoverCategories.Props
 >(({ children, "aria-label": ariaLabel, ...props }, forwardedRef) => {
-  const { categories, activeCategoryId, isSearchMode } =
-    useTriggerPopoverContext();
+  const { categories, activeCategoryId, isSearchMode, open } =
+    useTriggerPopoverScopeContext();
 
-  if (activeCategoryId || isSearchMode) return null;
+  if (!open || activeCategoryId || isSearchMode) return null;
 
   return (
     <Primitive.div
@@ -54,10 +50,6 @@ export const ComposerPrimitiveTriggerPopoverCategories = forwardRef<
 ComposerPrimitiveTriggerPopoverCategories.displayName =
   "ComposerPrimitive.TriggerPopoverCategories";
 
-// =============================================================================
-// TriggerPopoverCategoryItem — A single category row
-// =============================================================================
-
 export namespace ComposerPrimitiveTriggerPopoverCategoryItem {
   export type Element = ComponentRef<typeof Primitive.button>;
   export type Props = ComponentPropsWithoutRef<typeof Primitive.button> & {
@@ -72,24 +64,28 @@ export namespace ComposerPrimitiveTriggerPopoverCategoryItem {
 export const ComposerPrimitiveTriggerPopoverCategoryItem = forwardRef<
   ComposerPrimitiveTriggerPopoverCategoryItem.Element,
   ComposerPrimitiveTriggerPopoverCategoryItem.Props
->(({ categoryId, onClick, ...props }, forwardedRef) => {
+>(({ categoryId, onClick, onMouseMove, ...props }, forwardedRef) => {
   const {
     selectCategory,
+    highlightIndex,
     categories,
     highlightedIndex,
     activeCategoryId,
     isSearchMode,
     popoverId,
-  } = useTriggerPopoverContext();
+  } = useTriggerPopoverScopeContext();
 
   const handleClick = useCallback(() => {
     selectCategory(categoryId);
   }, [selectCategory, categoryId]);
 
+  const categoryIndex = categories.findIndex((c) => c.id === categoryId);
   const isHighlighted =
-    !activeCategoryId &&
-    !isSearchMode &&
-    categories.findIndex((c) => c.id === categoryId) === highlightedIndex;
+    !activeCategoryId && !isSearchMode && categoryIndex === highlightedIndex;
+
+  const handleMouseMove = useCallback(() => {
+    highlightIndex(categoryIndex);
+  }, [highlightIndex, categoryIndex]);
 
   return (
     <Primitive.button
@@ -101,6 +97,7 @@ export const ComposerPrimitiveTriggerPopoverCategoryItem = forwardRef<
       {...props}
       ref={forwardedRef}
       onClick={composeEventHandlers(onClick, handleClick)}
+      onMouseMove={composeEventHandlers(onMouseMove, handleMouseMove)}
     />
   );
 });

package/src/primitives/composer/trigger/TriggerPopoverDirective.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import type {
+  Unstable_DirectiveFormatter,
+  Unstable_TriggerItem,
+} from "@assistant-ui/core";
+import { unstable_defaultDirectiveFormatter } from "@assistant-ui/core";
+import { useEffect, useRef, type FC } from "react";
+import { useTriggerBehaviorRegistration } from "./TriggerPopover";
+import type { TriggerBehavior } from "./triggerSelectionResource";
+
+export namespace ComposerPrimitiveTriggerPopoverDirective {
+  export type Props = {
+    /** Defaults to `unstable_defaultDirectiveFormatter`. */
+    readonly formatter?: Unstable_DirectiveFormatter | undefined;
+    /** Fires after an item has been inserted into the composer. */
+    readonly onInserted?: ((item: Unstable_TriggerItem) => void) | undefined;
+  };
+}
+
+/**
+ * Configures a `<TriggerPopover>` to insert a directive chip when an item is
+ * selected. Render exactly one behavior sub-primitive per `<TriggerPopover>`.
+ *
+ * Exposed as `ComposerPrimitive.Unstable_TriggerPopover.Directive`.
+ *
+ * @example
+ * ```tsx
+ * <ComposerPrimitive.Unstable_TriggerPopover char="@" adapter={mentionAdapter}>
+ *   <ComposerPrimitive.Unstable_TriggerPopover.Directive
+ *     formatter={unstable_defaultDirectiveFormatter}
+ *     onInserted={(item) => track("mention", item.id)}
+ *   />
+ * </ComposerPrimitive.Unstable_TriggerPopover>
+ * ```
+ */
+export const ComposerPrimitiveTriggerPopoverDirective: FC<
+  ComposerPrimitiveTriggerPopoverDirective.Props
+> = ({ formatter, onInserted }) => {
+  const { register } = useTriggerBehaviorRegistration();
+  const onInsertedRef = useRef(onInserted);
+  onInsertedRef.current = onInserted;
+
+  useEffect(() => {
+    const behavior: TriggerBehavior = {
+      kind: "directive",
+      formatter: formatter ?? unstable_defaultDirectiveFormatter,
+      onInserted: (item) => onInsertedRef.current?.(item),
+    };
+    return register(behavior);
+  }, [register, formatter]);
+
+  return null;
+};
+
+ComposerPrimitiveTriggerPopoverDirective.displayName =
+  "ComposerPrimitive.TriggerPopoverDirective";

package/src/primitives/composer/trigger/TriggerPopoverItems.tsx

@@ -9,13 +9,9 @@ import {
   useCallback,
 } from "react";
 import { composeEventHandlers } from "@radix-ui/primitive";
-import { useTriggerPopoverContext } from "./TriggerPopoverContext";
+import { useTriggerPopoverScopeContext } from "./TriggerPopover";
 import type { Unstable_TriggerItem } from "@assistant-ui/core";
 
-// =============================================================================
-// TriggerPopoverItems — Renders the list of items within a category
-// =============================================================================
-
 export namespace ComposerPrimitiveTriggerPopoverItems {
   export type Element = ComponentRef<typeof Primitive.div>;
   export type Props = Omit<
@@ -34,9 +30,10 @@ export const ComposerPrimitiveTriggerPopoverItems = forwardRef<
   ComposerPrimitiveTriggerPopoverItems.Element,
   ComposerPrimitiveTriggerPopoverItems.Props
 >(({ children, "aria-label": ariaLabel, ...props }, forwardedRef) => {
-  const { items, activeCategoryId, isSearchMode } = useTriggerPopoverContext();
+  const { items, activeCategoryId, isSearchMode, open } =
+    useTriggerPopoverScopeContext();
 
-  if (!activeCategoryId && !isSearchMode) return null;
+  if (!open || (!activeCategoryId && !isSearchMode)) return null;
 
   return (
     <Primitive.div
@@ -53,10 +50,6 @@ export const ComposerPrimitiveTriggerPopoverItems = forwardRef<
 ComposerPrimitiveTriggerPopoverItems.displayName =
   "ComposerPrimitive.TriggerPopoverItems";
 
-// =============================================================================
-// TriggerPopoverItem — A single selectable item
-// =============================================================================
-
 export namespace ComposerPrimitiveTriggerPopoverItem {
   export type Element = ComponentRef<typeof Primitive.button>;
   export type Props = ComponentPropsWithoutRef<typeof Primitive.button> & {
@@ -72,38 +65,49 @@ export namespace ComposerPrimitiveTriggerPopoverItem {
 export const ComposerPrimitiveTriggerPopoverItem = forwardRef<
   ComposerPrimitiveTriggerPopoverItem.Element,
   ComposerPrimitiveTriggerPopoverItem.Props
->(({ item, index: indexProp, onClick, ...props }, forwardedRef) => {
-  const {
-    selectItem,
-    items,
-    highlightedIndex,
-    activeCategoryId,
-    isSearchMode,
-    popoverId,
-  } = useTriggerPopoverContext();
+>(
+  (
+    { item, index: indexProp, onClick, onMouseMove, ...props },
+    forwardedRef,
+  ) => {
+    const {
+      selectItem,
+      highlightIndex,
+      items,
+      highlightedIndex,
+      activeCategoryId,
+      isSearchMode,
+      popoverId,
+    } = useTriggerPopoverScopeContext();
 
-  const handleClick = useCallback(() => {
-    selectItem(item);
-  }, [selectItem, item]);
+    const handleClick = useCallback(() => {
+      selectItem(item);
+    }, [selectItem, item]);
 
-  const itemIndex = indexProp ?? items.findIndex((i) => i.id === item.id);
-  const isHighlighted =
-    (isSearchMode || activeCategoryId !== null) &&
-    itemIndex === highlightedIndex;
+    const itemIndex = indexProp ?? items.findIndex((i) => i.id === item.id);
+    const isHighlighted =
+      (isSearchMode || activeCategoryId !== null) &&
+      itemIndex === highlightedIndex;
 
-  return (
-    <Primitive.button
-      type="button"
-      role="option"
-      id={`${popoverId}-option-${item.id}`}
-      aria-selected={isHighlighted}
-      data-highlighted={isHighlighted ? "" : undefined}
-      {...props}
-      ref={forwardedRef}
-      onClick={composeEventHandlers(onClick, handleClick)}
-    />
-  );
-});
+    const handleMouseMove = useCallback(() => {
+      highlightIndex(itemIndex);
+    }, [highlightIndex, itemIndex]);
+
+    return (
+      <Primitive.button
+        type="button"
+        role="option"
+        id={`${popoverId}-option-${item.id}`}
+        aria-selected={isHighlighted}
+        data-highlighted={isHighlighted ? "" : undefined}
+        {...props}
+        ref={forwardedRef}
+        onClick={composeEventHandlers(onClick, handleClick)}
+        onMouseMove={composeEventHandlers(onMouseMove, handleMouseMove)}
+      />
+    );
+  },
+);
 
 ComposerPrimitiveTriggerPopoverItem.displayName =
   "ComposerPrimitive.TriggerPopoverItem";