sellmate-design-system-react 9.0.0-beta.70 → 9.0.0-beta.71

package/dist/index.js

@@ -4,7 +4,7 @@ import { extendTailwindMerge } from 'tailwind-merge';
 import { forwardRef, createContext, useState, useRef, useEffect, useCallback, useImperativeHandle, useLayoutEffect, useContext, useMemo, useId, Children, cloneElement, Fragment as Fragment$1, isValidElement, useSyncExternalStore, Component } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as RPopover13 from '@radix-ui/react-popover';
-import { createPortal } from 'react-dom';
+import { createPortal, flushSync } from 'react-dom';
 import * as RCheckbox from '@radix-ui/react-checkbox';
 import { createRoot } from 'react-dom/client';
 import * as RTooltip from '@radix-ui/react-tooltip';
@@ -15034,6 +15034,14 @@ var DEFAULT_VIRTUAL_BUFFER = 10;
 var DEFAULT_REACH_END_THRESHOLD = 10;
 var DEFAULT_SEARCH_DEBOUNCE = 300;
 var SEARCH_THRESHOLD = 11;
+function isListSized(el) {
+  return el.clientHeight > 0 && getComputedStyle(el).maxHeight !== "none";
+}
+function fallbackListHeight(dropdownHeight) {
+  const viewport = window.innerHeight;
+  const px = typeof dropdownHeight === "number" ? dropdownHeight : Number(/^\s*(\d+(?:\.\d+)?)px\s*$/.exec(dropdownHeight ?? "")?.[1] ?? Number.NaN);
+  return Number.isFinite(px) ? Math.min(px, viewport) : viewport;
+}
 var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   value,
   onValueChange,
@@ -15104,6 +15112,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
   const searchBarRef = useRef(null);
   const [listEl, setListEl] = useState(null);
   const setListRef = useCallback((node) => setListEl(node), []);
+  const [listSized, setListSized] = useState(false);
   const dismissedByPointerRef = useRef(false);
   const alignSelectedTopRef = useRef(false);
   const selectedAnchorRef = useRef(-1);
@@ -15224,7 +15233,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
         if (!multi) return;
         const leafValues = groupLeafValues.get(i) ?? [];
         if (leafValues.length === 0) return;
-        items.push({ key: `__group_${i}__`, isGroup: true, leafValues });
+        items.push({ key: `__group_${i}__`, isGroup: true, index: i, leafValues });
       } else {
         items.push({ key: o.value, value: o.value, index: i });
       }
@@ -15254,8 +15263,9 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
     const m = metricsRef.current;
     if (m == null) return;
     const buffer = Math.max(0, Math.floor(virtualBuffer));
+    const listHeight = listSized ? Math.max(0, listEl.clientHeight) : fallbackListHeight(dropdownHeight);
     const viewTop = Math.max(0, listEl.scrollTop - rowsOffset);
-    const viewBottom = viewTop + Math.max(0, listEl.clientHeight);
+    const viewBottom = viewTop + listHeight;
     const start = Math.max(0, indexAtOffset(m, viewTop) - buffer);
     const end = Math.min(rowCount, indexAtOffset(m, viewBottom) + 1 + buffer);
     const top = offsetOf(m, start);
@@ -15265,14 +15275,16 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
     );
     if (!pagingEnabled || !hasMore || loading2) return;
     const contentHeight = rowsOffset + totalSize(m);
-    const remaining = contentHeight - listEl.scrollTop - listEl.clientHeight;
+    const remaining = contentHeight - listEl.scrollTop - listHeight;
     if (remaining > Math.max(1, reachEndThreshold) * m.estimate) return;
     if (lastReachEndCountRef.current === rowCount) return;
     lastReachEndCountRef.current = rowCount;
     cbRef.current.onReachEnd?.();
   }, [
+    dropdownHeight,
     hasMore,
     listEl,
+    listSized,
     loading2,
     pagingEnabled,
     reachEndThreshold,
@@ -15286,6 +15298,23 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
     if (!open) return;
     syncScrollState();
   }, [open, syncScrollState]);
+  useLayoutEffect(() => {
+    if (!open || !listEl) {
+      setListSized(false);
+      return;
+    }
+    if (isListSized(listEl)) {
+      setListSized(true);
+    }
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (!isListSized(listEl)) return;
+      flushSync(() => setListSized(true));
+      syncScrollStateRef.current();
+    });
+    observer.observe(listEl);
+    return () => observer.disconnect();
+  }, [listEl, open]);
   useLayoutEffect(() => {
     if (!open || !listEl) {
       setSearchBarHeight(0);
@@ -15430,6 +15459,10 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
       syncScrollStateRef.current();
       return;
     }
+    if (!listSized) {
+      syncScrollStateRef.current();
+      return;
+    }
     const top = rowsOffset + offsetOf(m, rowIndex);
     const height = sizeOf(m, rowIndex);
     if (alignSelectedTopRef.current) {
@@ -15441,7 +15474,7 @@ var SSelectImpl = /* @__PURE__ */ forwardRef(function SSelect({
       listEl.scrollTop = top + height - listEl.clientHeight;
     }
     syncScrollStateRef.current();
-  }, [focusedIndex, listEl, open, rowsOffset]);
+  }, [focusedIndex, listEl, listSized, open, rowsOffset]);
   const moveFocusedIndex = (direction) => {
     if (!open || navigableItems.length === 0) return;
     setFocusedIndex((current) => {