@choice-ui/react 2.0.0 → 2.0.2

package/dist/components/emoji-picker/dist/index.js

@@ -141,7 +141,7 @@ var emojiFooterTv = tcv({
 var emojiEmptyTv = tcv({
   slots: {
     container: "flex h-32 flex-col items-center justify-center p-4 text-center",
-    title: "text-heading-display",
+    title: "text-body-large-strong",
     description: "mt-2 w-32"
   },
   variants: {
@@ -179,13 +179,20 @@ var EmojiCategoryHeader = forwardRef(
     );
   }
 );
-function EmojiFooter({ hoveredEmoji, selectedEmoji, variant = "dark" }) {
+var EmojiFooter = memo(function EmojiFooter2({
+  hoveredEmoji,
+  selectedEmoji,
+  variant = "dark",
+  i18n = {
+    pickAnEmoji: "Pick an emoji..."
+  }
+}) {
   var _a, _b;
   const tv = emojiFooterTv({ variant });
   return /* @__PURE__ */ jsxs("div", { className: tv.footer(), children: [
     /* @__PURE__ */ jsx("div", { className: tv.emojiPreview(), children: ((_a = hoveredEmoji || selectedEmoji) == null ? void 0 : _a.emoji) || /* @__PURE__ */ jsx("div", { className: tv.emojiPreviewEmpty() }) }),
     /* @__PURE__ */ jsxs("div", { className: tv.emojiInfo(), children: [
-      /* @__PURE__ */ jsx("div", { className: tv.emojiName(), children: (hoveredEmoji == null ? void 0 : hoveredEmoji.name) || (selectedEmoji == null ? void 0 : selectedEmoji.name) || "Pick an emoji..." }),
+      /* @__PURE__ */ jsx("div", { className: tv.emojiName(), children: (hoveredEmoji == null ? void 0 : hoveredEmoji.name) || (selectedEmoji == null ? void 0 : selectedEmoji.name) || i18n.pickAnEmoji }),
       hoveredEmoji || selectedEmoji ? /* @__PURE__ */ jsxs("div", { className: tv.emojiCode(), children: [
         ":",
         (_b = hoveredEmoji || selectedEmoji) == null ? void 0 : _b.nameUrl,
@@ -193,7 +200,7 @@ function EmojiFooter({ hoveredEmoji, selectedEmoji, variant = "dark" }) {
       ] }) : /* @__PURE__ */ jsx(Fragment, {})
     ] })
   ] });
-}
+});
 var EmojiItem = memo(function EmojiItem2(props) {
   const { emoji, onSelect, onHover, selected = false, variant = "dark" } = props;
   return /* @__PURE__ */ jsx(
@@ -209,11 +216,17 @@ var EmojiItem = memo(function EmojiItem2(props) {
     }
   );
 });
-var EmojiEmpty = memo(function EmojiEmpty2({ variant = "dark" }) {
+var EmojiEmpty = memo(function EmojiEmpty2({
+  variant = "dark",
+  i18n = {
+    title: "No emoji found",
+    description: "You can search for an emoji by name or use the search bar to find it."
+  }
+}) {
   const tv = emojiEmptyTv({ variant });
   return /* @__PURE__ */ jsxs("div", { className: tv.container(), children: [
-    /* @__PURE__ */ jsx("div", { className: tv.title(), children: "No emoji found" }),
-    /* @__PURE__ */ jsx("p", { className: tv.description(), children: "You can search for an emoji by name or use the search bar to find it." })
+    /* @__PURE__ */ jsx("div", { className: tv.title(), children: i18n.title }),
+    /* @__PURE__ */ jsx("p", { className: tv.description(), children: i18n.description })
   ] });
 });
 var emojis = [
@@ -11727,15 +11740,15 @@ var emojis = [
   }
 ];
 var categories = [
-  { id: "frequently_used", name: "Frequently used" },
-  { id: "smileys_people", name: "Smileys & People", range: [1, 460] },
-  { id: "animals_nature", name: "Animals & Nature", range: [465, 591] },
-  { id: "food_drink", name: "Food & Drink", range: [592, 712] },
-  { id: "travel_places", name: "Travel & Places", range: [713, 922] },
-  { id: "activities", name: "Activities", range: [923, 1001] },
-  { id: "objects", name: "Objects", range: [1002, 1234] },
-  { id: "symbols", name: "Symbols", range: [1235, 1451] },
-  { id: "flags", name: "Flags", range: [1452, 1719] }
+  { id: "frequently_used" },
+  { id: "smileys_people", range: [1, 460] },
+  { id: "animals_nature", range: [465, 591] },
+  { id: "food_drink", range: [592, 712] },
+  { id: "travel_places", range: [713, 922] },
+  { id: "activities", range: [923, 1001] },
+  { id: "objects", range: [1002, 1234] },
+  { id: "symbols", range: [1235, 1451] },
+  { id: "flags", range: [1452, 1719] }
 ];
 var STORAGE_KEY = "emoji-picker-frequently-used";
 function getEmojiCategory(id) {
@@ -11769,7 +11782,34 @@ function saveFrequentlyUsedEmoji(emojiId) {
   } catch {
   }
 }
-function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
+var defaultCategoryNames = {
+  frequentlyUsed: "Frequently used",
+  smileysPeople: "Smileys & People",
+  animalsNature: "Animals & Nature",
+  foodDrink: "Food & Drink",
+  travelPlaces: "Travel & Places",
+  activities: "Activities",
+  objects: "Objects",
+  symbols: "Symbols",
+  flags: "Flags"
+};
+var categoryIdToI18nKey = {
+  frequently_used: "frequentlyUsed",
+  smileys_people: "smileysPeople",
+  animals_nature: "animalsNature",
+  food_drink: "foodDrink",
+  travel_places: "travelPlaces",
+  activities: "activities",
+  objects: "objects",
+  symbols: "symbols",
+  flags: "flags"
+};
+function useEmojiData({
+  searchQuery,
+  columns,
+  showFrequentlyUsed,
+  categoryNames = defaultCategoryNames
+}) {
   const [frequentlyUsed, setFrequentlyUsed] = useState([]);
   useEffect(() => {
     if (showFrequentlyUsed) {
@@ -11799,7 +11839,7 @@ function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
       items.push({
         type: "header",
         category: "frequently_used",
-        title: "Frequently used"
+        title: categoryNames.frequentlyUsed
       });
       for (let i = 0; i < frequentlyUsed.length; i += columns) {
         items.push({
@@ -11814,10 +11854,11 @@ function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
         (emoji) => emoji.id >= category.range[0] && emoji.id <= category.range[1]
       );
       if (categoryEmojis.length > 0) {
+        const i18nKey = categoryIdToI18nKey[category.id];
         items.push({
           type: "header",
           category: category.id,
-          title: category.name
+          title: i18nKey ? categoryNames[i18nKey] : category.id
         });
         for (let i = 0; i < categoryEmojis.length; i += columns) {
           items.push({
@@ -11828,7 +11869,7 @@ function useEmojiData({ searchQuery, columns, showFrequentlyUsed }) {
       }
     });
     return items;
-  }, [searchQuery, searchResults, frequentlyUsed, columns, showFrequentlyUsed]);
+  }, [searchQuery, searchResults, frequentlyUsed, columns, showFrequentlyUsed, categoryNames]);
   const categoryIndexMap = useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     categorizedData.forEach((item, index) => {
@@ -11884,6 +11925,8 @@ function useEmojiScroll({
   const [currentVisibleCategory, setCurrentVisibleCategory] = useState("frequently_used");
   const isScrollingToTarget = useRef(false);
   const isInternalUpdate = useRef(false);
+  const scrollingTimeoutRef = useRef(null);
+  const internalUpdateTimeoutRef = useRef(null);
   const virtualizer = useVirtualizer({
     count: categorizedData.length,
     getScrollElement: () => scrollRef.current,
@@ -11948,7 +11991,10 @@ function useEmojiScroll({
         align: "start",
         behavior: "auto"
       });
-      setTimeout(() => {
+      if (scrollingTimeoutRef.current) {
+        clearTimeout(scrollingTimeoutRef.current);
+      }
+      scrollingTimeoutRef.current = setTimeout(() => {
         isScrollingToTarget.current = false;
       }, 100);
     }
@@ -11961,17 +12007,33 @@ function useEmojiScroll({
         align: "center",
         behavior: "auto"
       });
-      setTimeout(() => {
+      if (scrollingTimeoutRef.current) {
+        clearTimeout(scrollingTimeoutRef.current);
+      }
+      scrollingTimeoutRef.current = setTimeout(() => {
         isScrollingToTarget.current = false;
       }, 100);
     }
   });
   const markInternalUpdate = useEventCallback(() => {
     isInternalUpdate.current = true;
-    setTimeout(() => {
+    if (internalUpdateTimeoutRef.current) {
+      clearTimeout(internalUpdateTimeoutRef.current);
+    }
+    internalUpdateTimeoutRef.current = setTimeout(() => {
       isInternalUpdate.current = false;
     }, 50);
   });
+  useEffect(() => {
+    return () => {
+      if (scrollingTimeoutRef.current) {
+        clearTimeout(scrollingTimeoutRef.current);
+      }
+      if (internalUpdateTimeoutRef.current) {
+        clearTimeout(internalUpdateTimeoutRef.current);
+      }
+    };
+  }, []);
   useEffect(() => {
     if (value && !searchQuery.trim() && !isInternalUpdate.current) {
       scrollToEmoji(value);
@@ -11996,17 +12058,6 @@ function useEmojiScroll({
     PADDING
   };
 }
-var categoriesWithIcons = [
-  { id: "frequently_used", name: "Frequently used", icon: /* @__PURE__ */ jsx(EmojiFrequentlyUsed, {}) },
-  { id: "smileys_people", name: "Smileys & People", icon: /* @__PURE__ */ jsx(EmojiSmileysPeople, {}) },
-  { id: "animals_nature", name: "Animals & Nature", icon: /* @__PURE__ */ jsx(EmojiAnimalsNature, {}) },
-  { id: "food_drink", name: "Food & Drink", icon: /* @__PURE__ */ jsx(EmojiFoodDrink, {}) },
-  { id: "travel_places", name: "Travel & Places", icon: /* @__PURE__ */ jsx(EmojiTravelPlaces, {}) },
-  { id: "activities", name: "Activities", icon: /* @__PURE__ */ jsx(EmojiActivity, {}) },
-  { id: "objects", name: "Objects", icon: /* @__PURE__ */ jsx(EmojiObjects, {}) },
-  { id: "symbols", name: "Symbols", icon: /* @__PURE__ */ jsx(EmojiSymbols, {}) },
-  { id: "flags", name: "Flags", icon: /* @__PURE__ */ jsx(EmojiFlags, {}) }
-];
 var EmojiPicker = memo(function EmojiPicker2({
   value,
   onChange,
@@ -12017,12 +12068,51 @@ var EmojiPicker = memo(function EmojiPicker2({
   showCategories = true,
   showFrequentlyUsed = true,
   showSearch = true,
+  showFooter = true,
   children,
-  variant = "dark"
+  variant = "dark",
+  i18n = {
+    noEmojisFoundTitle: "No emoji found",
+    noEmojisFoundDescription: "You can search for an emoji by name or use the search bar to find it.",
+    footerPickAnEmoji: "Pick an emoji...",
+    categories: {
+      frequentlyUsed: "Frequently used",
+      smileysPeople: "Smileys & People",
+      animalsNature: "Animals & Nature",
+      foodDrink: "Food & Drink",
+      travelPlaces: "Travel & Places",
+      activities: "Activities",
+      objects: "Objects",
+      symbols: "Symbols",
+      flags: "Flags"
+    }
+  }
 }) {
   const [searchQuery, setSearchQuery] = useState("");
   const [hoveredEmoji, setHoveredEmoji] = useState(null);
+  const safeColumns = Math.max(1, columns);
   const tv = emojiTv({ variant });
+  const categoriesWithIcons = useMemo(
+    () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+      return [
+        {
+          id: "frequently_used",
+          name: (_a = i18n.categories) == null ? void 0 : _a.frequentlyUsed,
+          icon: /* @__PURE__ */ jsx(EmojiFrequentlyUsed, {})
+        },
+        { id: "smileys_people", name: (_b = i18n.categories) == null ? void 0 : _b.smileysPeople, icon: /* @__PURE__ */ jsx(EmojiSmileysPeople, {}) },
+        { id: "animals_nature", name: (_c = i18n.categories) == null ? void 0 : _c.animalsNature, icon: /* @__PURE__ */ jsx(EmojiAnimalsNature, {}) },
+        { id: "food_drink", name: (_d = i18n.categories) == null ? void 0 : _d.foodDrink, icon: /* @__PURE__ */ jsx(EmojiFoodDrink, {}) },
+        { id: "travel_places", name: (_e = i18n.categories) == null ? void 0 : _e.travelPlaces, icon: /* @__PURE__ */ jsx(EmojiTravelPlaces, {}) },
+        { id: "activities", name: (_f = i18n.categories) == null ? void 0 : _f.activities, icon: /* @__PURE__ */ jsx(EmojiActivity, {}) },
+        { id: "objects", name: (_g = i18n.categories) == null ? void 0 : _g.objects, icon: /* @__PURE__ */ jsx(EmojiObjects, {}) },
+        { id: "symbols", name: (_h = i18n.categories) == null ? void 0 : _h.symbols, icon: /* @__PURE__ */ jsx(EmojiSymbols, {}) },
+        { id: "flags", name: (_i = i18n.categories) == null ? void 0 : _i.flags, icon: /* @__PURE__ */ jsx(EmojiFlags, {}) }
+      ];
+    },
+    [i18n.categories]
+  );
   const {
     categorizedData,
     categoryIndexMap,
@@ -12030,8 +12120,9 @@ var EmojiPicker = memo(function EmojiPicker2({
     findEmojiPosition
   } = useEmojiData({
     searchQuery,
-    columns,
-    showFrequentlyUsed
+    columns: safeColumns,
+    showFrequentlyUsed,
+    categoryNames: i18n.categories
   });
   const {
     scrollRef,
@@ -12047,7 +12138,7 @@ var EmojiPicker = memo(function EmojiPicker2({
     findEmojiPosition,
     searchQuery,
     value,
-    columns
+    columns: safeColumns
   });
   const availableCategories = useMemo(() => {
     return categoriesWithIcons.filter((category) => {
@@ -12056,13 +12147,14 @@ var EmojiPicker = memo(function EmojiPicker2({
       }
       return true;
     });
-  }, [showFrequentlyUsed]);
+  }, [categoriesWithIcons, showFrequentlyUsed]);
   const handleEmojiSelect = useEventCallback((emoji) => {
     markInternalUpdate();
     addToFrequentlyUsed(emoji.id);
     onChange == null ? void 0 : onChange(emoji);
   });
   const handleEmojiHover = useEventCallback((emoji) => {
+    if (!showFooter) return;
     setHoveredEmoji(emoji);
   });
   const handleCategoryClick = useEventCallback((category) => {
@@ -12071,7 +12163,7 @@ var EmojiPicker = memo(function EmojiPicker2({
   const rootStyle = {
     "--emoji-height": `${height}px`,
     "--emoji-padding": `${PADDING2}px`,
-    "--emoji-columns": `${columns}`
+    "--emoji-columns": `${safeColumns}`
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -12079,7 +12171,7 @@ var EmojiPicker = memo(function EmojiPicker2({
       className: tv.container({ className }),
       style: rootStyle,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: tv.header(), children: [
+        (showSearch || showCategories) && /* @__PURE__ */ jsxs("div", { className: tv.header(), children: [
           showSearch && /* @__PURE__ */ jsx(
             SearchInput,
             {
@@ -12174,19 +12266,31 @@ var EmojiPicker = memo(function EmojiPicker2({
                         },
                         virtualItem.key
                       );
-                    }) : /* @__PURE__ */ jsx(EmojiEmpty, { variant })
+                    }) : /* @__PURE__ */ jsx(
+                      EmojiEmpty,
+                      {
+                        variant,
+                        i18n: {
+                          title: i18n.noEmojisFoundTitle,
+                          description: i18n.noEmojisFoundDescription
+                        }
+                      }
+                    )
                   }
                 )
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx(
+        showFooter && /* @__PURE__ */ jsx(
           EmojiFooter,
           {
             hoveredEmoji,
             selectedEmoji: value || null,
-            variant
+            variant,
+            i18n: {
+              pickAnEmoji: i18n.footerPickAnEmoji
+            }
           }
         ),
         children

package/dist/components/form/src/adapters/range-adapter.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Range } from "../../../range/dist/index.js";
+import { Range as Range2 } from "../../../range/dist/index.js";
 import { filterFormProps, BaseAdapter } from "./base-adapter.js";
 function RangeAdapter({
   className,
@@ -23,7 +23,7 @@ function RangeAdapter({
       legendMode: true,
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx(
-          Range,
+          Range2,
           {
             value,
             onChange: (inputValue) => onChange(inputValue),

package/dist/components/icon-button/dist/index.d.ts

@@ -14,7 +14,7 @@ interface IconButtonProps extends Omit<HTMLProps<HTMLElement>, "size" | "as"> {
     readOnly?: boolean;
     size?: "default" | "large" | "reset";
     tooltip?: TooltipProps;
-    variant?: "default" | "secondary" | "solid" | "highlight" | "ghost" | "dark" | "reset";
+    variant?: "default" | "secondary" | "solid" | "highlight" | "ghost" | "dark" | "submit" | "reset";
 }
 declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLElement>>;
 

package/dist/components/icon-button/dist/index.js

@@ -28,6 +28,12 @@ var iconButtonTv = tcv({
       highlight: {},
       ghost: {},
       dark: { button: "text-white" },
+      submit: {
+        button: [
+          "bg-[var(--theme-submit-btn-bg)] text-[var(--theme-submit-btn-text)]",
+          "focus-visible:border-transparent"
+        ]
+      },
       reset: {}
     },
     active: {
@@ -141,6 +147,39 @@ var iconButtonTv = tcv({
       variant: "dark",
       disabled: true,
       class: { button: "text-gray-500" }
+    },
+    {
+      variant: "submit",
+      active: false,
+      disabled: false,
+      class: {
+        button: ["focus-visible:shadow-focus", "hover:opacity-70", "active:opacity-70"]
+      }
+    },
+    {
+      variant: "submit",
+      active: true,
+      disabled: false,
+      class: {
+        button: "opacity-70"
+      }
+    },
+    {
+      variant: "submit",
+      focused: true,
+      class: {
+        button: ["shadow-focus", "border-transparent"]
+      }
+    },
+    {
+      variant: "submit",
+      loading: true,
+      class: { button: "opacity-70" }
+    },
+    {
+      variant: "submit",
+      disabled: true,
+      class: { button: "opacity-50" }
     }
   ],
   defaultVariants: {

package/dist/components/list/dist/index.d.ts

@@ -67,7 +67,7 @@ interface ListProps extends Omit<HTMLProps<HTMLDivElement>, "size" | "as"> {
     selection?: boolean;
     shouldShowReferenceLine?: boolean;
     size?: "default" | "large";
-    variant?: "default" | "primary";
+    variant?: "default" | "primary" | "dark" | "reset";
 }
 interface ListComponentProps extends React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>> {
     Content: typeof ListContent;

package/dist/components/md-render/dist/index.d.ts

@@ -8,9 +8,10 @@ interface MentionItemProps {
 }
 interface MdRenderProps {
     allowedPrefixes?: string[];
+    children?: string;
     className?: string;
     components?: Partial<Components>;
-    content: string;
+    content?: string;
     customColor?: {
         codeBackground?: string;
         defaultBackground?: string;

package/dist/components/md-render/dist/index.js

@@ -280,13 +280,7 @@ var createMarkdownComponents = (tv, MentionComponent, mentionItems) => {
         {
           className: tv.codeBlock(),
           lineThreshold: void 0,
-          children: /* @__PURE__ */ jsx(
-            CodeBlock2.Code,
-            {
-              code: children,
-              language
-            }
-          )
+          children: /* @__PURE__ */ jsx(CodeBlock2.Code, { language, children })
         }
       );
     },
@@ -409,7 +403,7 @@ var INITIAL_COMPONENTS = {
         expandable: false,
         children: [
           /* @__PURE__ */ jsx(CodeBlock2.Header, { showLineCount: false }),
-          /* @__PURE__ */ jsx(CodeBlock2.Content, { code: children })
+          /* @__PURE__ */ jsx(CodeBlock2.Content, { children })
         ]
       }
     );
@@ -421,6 +415,7 @@ var MdRender = memo(
       id,
       components: customComponents,
       content,
+      children,
       className,
       mentionRenderComponent,
       mentionItems,
@@ -429,9 +424,10 @@ var MdRender = memo(
       size = "default",
       variant = "default"
     } = props;
+    const markdownContent = content ?? children ?? "";
     const generatedId = useId();
     const blockId = id ?? generatedId;
-    const blocks = useMdBlocks(content);
+    const blocks = useMdBlocks(markdownContent);
     const tv = useMemo(() => mdRenderTv({ size, variant }), [size, variant]);
     const tvComponents = useMemo(
       () => createMarkdownComponents(tv, mentionRenderComponent, mentionItems),

package/dist/components/md-render/src/components/markdown-block.d.ts

@@ -1,8 +1,11 @@
 import { Components, Options } from 'react-markdown';
+import { BlockPolicyType } from 'harden-react-markdown';
 type HardenReactMarkdownProps = Options & {
     allowedImagePrefixes?: string[];
     allowedLinkPrefixes?: string[];
     defaultOrigin?: string;
+    linkBlockPolicy?: BlockPolicyType;
+    imageBlockPolicy?: BlockPolicyType;
 };
 interface MarkdownBlockProps extends Omit<HardenReactMarkdownProps, "children"> {
     components?: Partial<Components>;

package/dist/components/md-render/src/md-render.js

@@ -43,6 +43,8 @@ const MdRender = memo(
       mentionItems,
       allowedPrefixes,
       customColor,
+      linkBlockPolicy,
+      imageBlockPolicy,
       size = "default",
       variant = "default"
     } = props;
@@ -84,6 +86,8 @@ const MdRender = memo(
           {
             content: block,
             components,
+            linkBlockPolicy,
+            imageBlockPolicy,
             allowedLinkPrefixes: allowedPrefixes,
             allowedImagePrefixes: allowedPrefixes
           },

package/dist/components/md-render/src/types.d.ts

@@ -1,3 +1,4 @@
+import { BlockPolicyType } from 'harden-react-markdown';
 import { Components } from 'react-markdown';
 interface MentionItemProps {
     [key: string]: unknown;
@@ -6,6 +7,8 @@ interface MentionItemProps {
 }
 export interface MdRenderProps {
     allowedPrefixes?: string[];
+    linkBlockPolicy?: BlockPolicyType;
+    imageBlockPolicy?: BlockPolicyType;
     children?: string;
     className?: string;
     components?: Partial<Components>;

package/dist/components/menus/dist/index.d.ts

@@ -458,6 +458,11 @@ declare const MenuContext: react.Context<MenuContextType | null>;
 interface MenuContextItemProps extends MenuItemProps {
     customActive?: boolean;
     exclusiveIndex?: number;
+    /**
+     * Whether this item is a link item. When true, a link icon will be displayed on the right.
+     * The actual link navigation should be handled by the onClick handler.
+     */
+    asLink?: boolean;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
     onMouseUp?: (e: React.MouseEvent<HTMLButtonElement>) => void;

package/dist/components/menus/dist/index.js

@@ -1,7 +1,7 @@
 import { Button } from "../../button/dist/index.js";
 import React__default, { memo, forwardRef, useMemo, useContext, createContext, startTransition, useCallback, useRef, useState, useEffect, Children, isValidElement, Fragment as Fragment$1 } from "react";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { ChevronDownSmall, Check, ChevronRightSmall, ChevronUpSmall } from "@choiceform/icons-react";
+import { ChevronDownSmall, Check, Launch, ChevronRightSmall, ChevronUpSmall } from "@choiceform/icons-react";
 import { Kbd } from "../../kbd/dist/index.js";
 import { flushSync } from "react-dom";
 import { SearchInput } from "../../search-input/dist/index.js";
@@ -418,9 +418,13 @@ var MenuLabel = memo(function MenuLabel2({
 });
 MenuLabel.displayName = "MenuLabel";
 var SCROLL_ARROW_PADDING = 16;
+var MIN_HEIGHT_FOR_ARROWS = 48;
 var shouldShowArrow = (scrollRef, dir) => {
   if (scrollRef.current) {
     const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    if (clientHeight < MIN_HEIGHT_FOR_ARROWS) {
+      return false;
+    }
     if (dir === "up") {
       return scrollTop >= SCROLL_ARROW_PADDING;
     }
@@ -839,18 +843,25 @@ function useMenuTree(config) {
       handleOpenChange(false);
     }
   });
+  const handleParentNavigate = useEventCallback((event) => {
+    if (event.nodeId === parentId && event.index !== item.index && isControlledOpen) {
+      handleOpenChange(false);
+    }
+  });
   const cleanupTreeEvents = useEventCallback(() => {
     if (tree) {
       tree.events.off("click", handleTreeClick);
       tree.events.off("menuopen", handleSubMenuOpen);
+      tree.events.off("navigate", handleParentNavigate);
     }
   });
   useEffect(() => {
     if (!tree) return;
     tree.events.on("click", handleTreeClick);
     tree.events.on("menuopen", handleSubMenuOpen);
+    tree.events.on("navigate", handleParentNavigate);
     return cleanupTreeEvents;
-  }, [tree, nodeId, parentId, handleTreeClick, handleSubMenuOpen, cleanupTreeEvents]);
+  }, [tree, nodeId, parentId, handleTreeClick, handleSubMenuOpen, handleParentNavigate, cleanupTreeEvents]);
   useEffect(() => {
     if (isControlledOpen && tree) {
       tree.events.emit("menuopen", { parentId, nodeId });
@@ -904,7 +915,9 @@ var MenuContextItem = memo(
         size: size2,
         shortcut,
         prefixElement,
+        suffixElement,
         variant,
+        asLink,
         onClick,
         onMouseUp,
         onTouchStart,
@@ -969,6 +982,16 @@ var MenuContextItem = memo(
         }),
         [shortcut == null ? void 0 : shortcut.modifier, shortcut == null ? void 0 : shortcut.keys]
       );
+      const suffixConfig = useMemo(() => {
+        if (suffixElement !== void 0) return suffixElement;
+        if (prefixElement !== void 0 && menu.selection && !customActive && selected) {
+          return /* @__PURE__ */ jsx(Check, {});
+        }
+        if (asLink) {
+          return /* @__PURE__ */ jsx(Launch, { className: "h-3 w-3 text-current" });
+        }
+        return void 0;
+      }, [suffixElement, prefixElement, menu.selection, selected, customActive, asLink]);
       const combinedRef = useCallback(
         (node) => {
           item.ref(node);
@@ -991,6 +1014,7 @@ var MenuContextItem = memo(
           disabled,
           selected,
           prefixElement: prefixConfig,
+          suffixElement: suffixConfig,
           shortcut: shortcutConfig,
           variant,
           size: size2,
@@ -1058,7 +1082,12 @@ var MenuContextSubTrigger = memo(
       throw new Error("MenuContextSubTrigger must be used within a MenuContext component");
     }
     const isActive = useMemo(
-      () => item.index === menu.activeIndex || !!active,
+      () => {
+        if (menu.activeIndex !== null && menu.activeIndex !== void 0) {
+          return item.index === menu.activeIndex;
+        }
+        return !!active;
+      },
       [item.index, menu.activeIndex, active]
     );
     const handleFocus = useEventCallback((event) => {