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

package/dist/index.js

@@ -1497,6 +1497,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 +1537,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;
@@ -1571,7 +1579,7 @@ function Dropdown({
       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,
@@ -1596,6 +1604,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 +1704,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 +1748,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 })
+          ] })
         ]
       }
     )