@mirror-physics/fractal-ui 0.2.0-next.84 → 0.2.0-next.86

package/dist/index.js

@@ -1427,6 +1427,9 @@ import * as React11 from "react";
 import { Close as Close2, Check as Check2, MagnifyingGlass as MagnifyingGlass2, ChevronDown, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp } from "@mirror-physics/fractal-icons";
 
 // src/components/Dropdown/position.ts
+function isDropdownTriggerVisible(trigger, bounds) {
+  return trigger.right > bounds.left && trigger.left < bounds.right && trigger.bottom > bounds.top && trigger.top < bounds.bottom;
+}
 function positionDropdown(trigger, panel, bounds, direction, align) {
   const gap = 4;
   const width = Math.min(panel.width, Math.max(0, bounds.right - bounds.left));
@@ -1497,6 +1500,9 @@ function Dropdown({
 }) {
   const [query, setQuery] = React11.useState("");
   const searchRef = React11.useRef(null);
+  const searchContainerRef = React11.useRef(null);
+  const optionsRef = React11.useRef(null);
+  const [optionsScrolled, setOptionsScrolled] = React11.useState(false);
   const accessibleLabel = triggerLabel ?? fieldLabel ?? "Options";
   const size = controlSize ?? sizeAlias;
   const canClear = clearable && !disabled && (multiple ? selectedValues.length > 0 && Boolean(onSelectionChange) : Boolean(selectedValue) && Boolean(onSelect));
@@ -1534,6 +1540,11 @@ function Dropdown({
     setOpen(false);
     triggerRef.current?.focus();
   }, open);
+  React11.useLayoutEffect(() => {
+    if (!open) return;
+    if (optionsRef.current) optionsRef.current.scrollTop = 0;
+    setOptionsScrolled(false);
+  }, [open, query]);
   React11.useLayoutEffect(() => {
     const root = rootRef.current;
     const trigger = triggerRef.current;
@@ -1559,19 +1570,24 @@ function Dropdown({
           bounds.bottom = Math.min(bounds.bottom, rect.top + ancestor.clientTop + ancestor.clientHeight);
         }
       }
+      const triggerRect = trigger.getBoundingClientRect();
+      if (!isDropdownTriggerVisible(triggerRect, bounds)) {
+        focusOnOpen.current = false;
+        setOpen(false);
+        return false;
+      }
       const padding = Math.max(0, collisionPadding);
       bounds.left += padding;
       bounds.right = Math.max(bounds.left, bounds.right - padding);
       bounds.top += padding;
       bounds.bottom = Math.max(bounds.top, bounds.bottom - padding);
-      const triggerRect = trigger.getBoundingClientRect();
       const rootRect = root.getBoundingClientRect();
       const availableWidth = bounds.right - bounds.left;
       const heightLimit = Math.max(0, maxHeight);
       panel.style.maxWidth = `${availableWidth}px`;
       panel.style.minWidth = `${Math.min(triggerRect.width, availableWidth)}px`;
       const panelRect = panel.getBoundingClientRect();
-      const desiredHeight = Math.min(heightLimit, panel.scrollHeight + panel.offsetHeight - panel.clientHeight);
+      const desiredHeight = Math.min(heightLimit, (optionsRef.current?.scrollHeight ?? 0) + (searchContainerRef.current?.offsetHeight ?? 0) + parseFloat(getComputedStyle(panel).paddingTop) + parseFloat(getComputedStyle(panel).paddingBottom) + panel.offsetHeight - panel.clientHeight);
       const position = positionDropdown(triggerRect, { width: panelRect.width, height: desiredHeight }, bounds, direction, align);
       const nextStyle = {
         left: position.left - rootRect.left - root.clientLeft + root.scrollLeft,
@@ -1584,8 +1600,9 @@ function Dropdown({
         panel.style[key] = `${nextStyle[key]}px`;
       }
       setPanelStyle((previous) => Object.entries(nextStyle).every(([key, value]) => previous[key] === value) ? previous : nextStyle);
+      return true;
     };
-    updatePosition();
+    if (!updatePosition()) return;
     if (searchable && !panel.contains(document.activeElement)) searchRef.current?.focus({ preventScroll: true });
     if (focusOnOpen.current) {
       focusOnOpen.current = false;
@@ -1596,6 +1613,7 @@ function Dropdown({
     const resize = new ResizeObserver(updatePosition);
     resize.observe(root);
     resize.observe(panel);
+    if (optionsRef.current) resize.observe(optionsRef.current);
     for (let ancestor = root.parentElement; ancestor; ancestor = ancestor.parentElement) {
       resize.observe(ancestor);
     }
@@ -1695,11 +1713,11 @@ function Dropdown({
         className: cn("fractal-dropdown-panel", `fractal-dropdown-panel--${size}`, panelClassName),
         style: panelStyle,
         children: [
-          searchable && /* @__PURE__ */ jsxs17("div", { className: "fractal-dropdown-search", children: [
+          searchable && /* @__PURE__ */ jsx19("div", { ref: searchContainerRef, className: "fractal-dropdown-search-container", "data-scrolled": optionsScrolled, children: /* @__PURE__ */ jsxs17("div", { className: "fractal-dropdown-search", children: [
             /* @__PURE__ */ jsx19(MagnifyingGlass2, { "aria-hidden": "true" }),
             /* @__PURE__ */ jsx19("input", { ref: searchRef, type: "search", "aria-label": searchPlaceholder, placeholder: searchPlaceholder, value: query, onChange: (event) => setQuery(event.target.value) })
-          ] }),
-          /* @__PURE__ */ jsxs17("div", { role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
+          ] }) }),
+          /* @__PURE__ */ jsxs17("div", { ref: optionsRef, className: "fractal-dropdown-options", onScroll: (event) => setOptionsScrolled(event.currentTarget.scrollTop > 0), role: "listbox", id: `${menuId}-options`, "aria-label": accessibleLabel, "aria-multiselectable": multiple || void 0, children: [
             label != null && /* @__PURE__ */ jsx19("div", { className: "fractal-dropdown-label", children: label }),
             visibleItems.map((item, index) => {
               const topDivider = item.border === "top" ? /* @__PURE__ */ jsx19("div", { className: "fractal-dropdown-separator" }) : null;
@@ -1739,9 +1757,9 @@ function Dropdown({
                 ),
                 bottomDivider
               ] }, item.value);
-            })
-          ] }),
-          !selectableItems.length && /* @__PURE__ */ jsx19("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
+            }),
+            !selectableItems.length && /* @__PURE__ */ jsx19("p", { role: "status", className: "fractal-dropdown-label", children: emptyMessage })
+          ] })
         ]
       }
     )