@sproutsocial/seeds-react-menu 1.10.2 → 1.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.10.2",
+  "version": "1.10.3",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

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;
     },
   });
 
@@ -131,6 +133,7 @@ export const VirtualizedComboboxContent = <T extends DataWithId>({
 
                 return (
                   <MenuHeading
+                    ref={rowVirtualizer.measureElement}
                     key={virtualItem.key}
                     {...headingItemProps}
                     $highlighted={highlightedIndex === virtualItem.index}
@@ -158,6 +161,7 @@ export const VirtualizedComboboxContent = <T extends DataWithId>({
                     : false;
                 return (
                   <MenuItem
+                    ref={rowVirtualizer.measureElement}
                     key={virtualItem.key}
                     inputType={inputType}
                     selected={isItemSelected}
@@ -188,6 +192,7 @@ export const VirtualizedComboboxContent = <T extends DataWithId>({
                   }}
                   $highlighted={highlightedIndex === virtualItem.index}
                   $active={false}
+                  ref={rowVirtualizer.measureElement}
                 >
                   {renderItem(dataItem)}
                 </MenuItem>

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}