@choice-ui/react 1.8.6 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.8.6",
+  "version": "1.8.7",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",