@choice-ui/react 1.8.5 → 1.8.7

package/dist/components/dropdown/src/dropdown.d.ts

@@ -7,6 +7,12 @@ export interface DropdownProps {
      * @default true
      */
     autoSelectFirstItem?: boolean;
+    /**
+     * Whether to avoid collisions by flipping or shifting the dropdown position.
+     * When false, the dropdown will strictly follow the placement direction.
+     * @default true
+     */
+    avoidCollisions?: boolean;
     children?: React.ReactNode;
     disabledNested?: boolean;
     focusManagerProps?: Partial<FloatingFocusManagerProps>;

package/dist/components/dropdown/src/dropdown.js

@@ -13,6 +13,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
   const {
     children,
     autoSelectFirstItem = true,
+    avoidCollisions = true,
     disabledNested = false,
     offset: offsetDistance = DEFAULT_OFFSET,
     placement = "bottom-start",
@@ -77,11 +78,14 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     });
   });
   const lastPositionRef = useRef(null);
-  const middleware = useMemo(
-    () => [
-      offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 }),
-      flip(),
-      shift(),
+  const middleware = useMemo(() => {
+    const baseMiddleware = [
+      offset({ mainAxis: isNested ? 10 : offsetDistance, alignmentAxis: isNested ? -4 : 0 })
+    ];
+    if (avoidCollisions) {
+      baseMiddleware.push(flip(), shift());
+    }
+    baseMiddleware.push(
       size({
         padding: 4,
         apply({ elements, availableHeight, rects }) {
@@ -104,9 +108,9 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
           }
         }
       })
-    ],
-    [isNested, offsetDistance, matchTriggerWidth, scrollRef]
-  );
+    );
+    return baseMiddleware;
+  }, [isNested, offsetDistance, matchTriggerWidth, scrollRef, avoidCollisions]);
   const { refs, floatingStyles, context, isPositioned } = useFloating({
     nodeId,
     open: isControlledOpen,

package/dist/components/menus/src/components/menu-scroll-arrow.js

@@ -6,9 +6,13 @@ import { MenuScrollArrowTv } from "../tv.js";
 import { useIsomorphicLayoutEffect } from "../../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const SCROLL_ARROW_PADDING = 16;
+const MIN_HEIGHT_FOR_ARROWS = 48;
 const 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;
     }

package/dist/components/menus/src/context/menu-context-item.js

@@ -84,11 +84,14 @@ const MenuContextItem = memo(
       );
       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, asLink]);
+      }, [suffixElement, prefixElement, menu.selection, selected, customActive, asLink]);
       const combinedRef = useCallback(
         (node) => {
           item.ref(node);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.8.5",
+  "version": "1.8.7",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@choiceform/icons-react": "^1.3.8",
-    "@choice-ui/design-tokens": "^0.2.13",
+    "@choice-ui/design-tokens": "workspace:*",
     "classnames": "^2.5.1",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.1.0",