@sproutsocial/seeds-react-menu 1.10.2 → 1.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.10.2",
+  "version": "1.10.4",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -42,7 +42,7 @@
     "@sproutsocial/seeds-react-switch": "^1.2.25",
     "@sproutsocial/seeds-react-system-props": "^3.0.2",
     "@sproutsocial/seeds-react-theme": "^3.6.0",
-    "@sproutsocial/seeds-react-token-input": "^1.4.30",
+    "@sproutsocial/seeds-react-token-input": "^1.4.31",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
     "@tanstack/react-virtual": "^3.13.12",
     "downshift": "9.0.4",

package/src/v2/Autocomplete/Autocomplete.stories.tsx

@@ -137,7 +137,7 @@ const generateBooks = (count: number): Book[] => {
 
   return books;
 };
-const largeBookSet = generateBooks(1000);
+const largeBookSet = generateBooks(100);
 
 const renderItem = (item: Book) => (
   <>

package/src/v2/Autocomplete/MultiAutocomplete.tsx

@@ -61,6 +61,7 @@ export function MultiAutocomplete<T extends DataWithId>({
   groupBy,
   renderGroupHeading,
   isVirtualized = false,
+  estimatedItemHeight,
   showSelectedItems = false,
   selectHeadings = false,
   selectAllItem,
@@ -448,6 +449,7 @@ export function MultiAutocomplete<T extends DataWithId>({
           allData={data}
           selectAllItem={selectAllItem}
           isVirtualized={isVirtualized}
+          estimatedItemHeight={estimatedItemHeight}
           {...menuProps}
         />
       }

package/src/v2/Autocomplete/SingleAutocomplete.tsx

@@ -56,6 +56,7 @@ export function SingleAutocomplete<T extends DataWithId>({
   groupBy,
   renderGroupHeading,
   isVirtualized = false,
+  estimatedItemHeight,
   EmptyState,
   placeholder,
   onSelectedItemIdChange,
@@ -337,6 +338,7 @@ export function SingleAutocomplete<T extends DataWithId>({
           selectHeadings={false}
           groupBy={groupBy}
           isVirtualized={isVirtualized}
+          estimatedItemHeight={estimatedItemHeight}
           placeholderItem={includePlaceholderItem ? placeholderItem : undefined}
           {...menuProps}
         />

package/src/v2/Common-V2/ComboboxContent.tsx

@@ -30,6 +30,7 @@ interface ComboboxContentProps<T extends DataWithId>
   allData?: T[];
   selectAllItem?: ToggleItem;
   placeholderItem?: ToggleItem;
+  estimatedItemHeight?: number;
 }
 
 export const VirtualizedComboboxContent = <T extends DataWithId>({
@@ -48,6 +49,7 @@ export const VirtualizedComboboxContent = <T extends DataWithId>({
   groupBy,
   allData,
   selectAllItem,
+  estimatedItemHeight = 35,
   ...rest
 }: ComboboxContentProps<T>) => {
   const containerRef = useRef(null);
@@ -60,7 +62,7 @@ export const VirtualizedComboboxContent = <T extends DataWithId>({
     getScrollElement: () => containerRef.current,
     estimateSize: (index) => {
       const item = items[index];
-      return isGroupHeading(item) ? 30 : 35;
+      return isGroupHeading(item) ? 40 : estimatedItemHeight;
     },
   });
 
@@ -76,7 +78,10 @@ export const VirtualizedComboboxContent = <T extends DataWithId>({
 
   const virtualItems = rowVirtualizer.getVirtualItems();
 
-  const menuProps = getMenuProps({ ref: containerRef });
+  const menuProps = getMenuProps(
+    { ref: containerRef },
+    { suppressRefError: true }
+  );
   return (
     <div {...menuProps} {...rest}>
       {!hasItems && EmptyState ? (
@@ -131,6 +136,7 @@ export const VirtualizedComboboxContent = <T extends DataWithId>({
 
                 return (
                   <MenuHeading
+                    ref={rowVirtualizer.measureElement}
                     key={virtualItem.key}
                     {...headingItemProps}
                     $highlighted={highlightedIndex === virtualItem.index}
@@ -158,6 +164,7 @@ export const VirtualizedComboboxContent = <T extends DataWithId>({
                     : false;
                 return (
                   <MenuItem
+                    ref={rowVirtualizer.measureElement}
                     key={virtualItem.key}
                     inputType={inputType}
                     selected={isItemSelected}
@@ -188,6 +195,7 @@ export const VirtualizedComboboxContent = <T extends DataWithId>({
                   }}
                   $highlighted={highlightedIndex === virtualItem.index}
                   $active={false}
+                  ref={rowVirtualizer.measureElement}
                 >
                   {renderItem(dataItem)}
                 </MenuItem>
@@ -221,7 +229,7 @@ export const NormalComboboxContent = <T extends DataWithId>({
   // Check if there are any actual items (not just headings)
   const hasItems = items.some((item) => !isGroupHeading(item));
 
-  const menuProps = getMenuProps();
+  const menuProps = getMenuProps({}, { suppressRefError: true });
 
   return (
     <div {...menuProps} {...rest}>
@@ -347,7 +355,7 @@ export const GroupedComboboxContent = <T extends DataWithId>({
   // Check if there are any actual items (not just headings)
   const hasItems = items.some((item) => !isGroupHeading(item));
 
-  const menuProps = getMenuProps();
+  const menuProps = getMenuProps({}, { suppressRefError: true });
 
   const groupedItems = groupItems(
     items as T[],

package/src/v2/Common-V2/props.ts

@@ -14,6 +14,7 @@ export interface BaseSelectProps<T extends DataWithId> {
   groupBy?: (item: T) => string;
   renderGroupHeading?: (label: string) => string;
   isVirtualized?: boolean;
+  estimatedItemHeight?: number;
   placeholder: string;
   onIsOpenChange?: (isOpen: boolean) => void;
   stateReducer?: any;

package/src/v2/Select/MultiSelect.tsx

@@ -66,6 +66,7 @@ export function MultiSelect<T extends DataWithId>({
   groupBy,
   renderGroupHeading,
   isVirtualized = false,
+  estimatedItemHeight,
   showSelectedItems = false,
   selectHeadings = false,
   selectAllItem,
@@ -398,6 +399,7 @@ export function MultiSelect<T extends DataWithId>({
           allData={data}
           selectAllItem={selectAllItem}
           isVirtualized={isVirtualized}
+          estimatedItemHeight={estimatedItemHeight}
           {...menuProps}
         />
       }

package/src/v2/Select/SingleSelect.tsx

@@ -56,6 +56,7 @@ export function SingleSelect<T extends DataWithId>({
   groupBy,
   renderGroupHeading,
   isVirtualized = false,
+  estimatedItemHeight,
   placeholder,
   onSelectedItemIdChange,
   onIsOpenChange,
@@ -265,6 +266,7 @@ export function SingleSelect<T extends DataWithId>({
           itemToString={itemToString}
           inputType={inputType}
           isVirtualized={isVirtualized}
+          estimatedItemHeight={estimatedItemHeight}
           groupBy={groupBy}
           selectHeadings={false}
           {...menuProps}