@sproutsocial/seeds-react-menu 1.10.2 → 1.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/.turbo/turbo-build.log +12 -12
  2. package/CHANGELOG.md +19 -0
  3. package/dist/esm/v2/index.js +19 -4
  4. package/dist/esm/v2/index.js.map +1 -1
  5. package/dist/v2/index.d.mts +5 -4
  6. package/dist/v2/index.d.ts +5 -4
  7. package/dist/v2/index.js +19 -4
  8. package/dist/v2/index.js.map +1 -1
  9. package/package.json +2 -2
  10. package/src/v2/Autocomplete/Autocomplete.stories.tsx +1 -1
  11. package/src/v2/Autocomplete/MultiAutocomplete.tsx +2 -0
  12. package/src/v2/Autocomplete/SingleAutocomplete.tsx +2 -0
  13. package/src/v2/Common-V2/ComboboxContent.tsx +12 -4
  14. package/src/v2/Common-V2/props.ts +1 -0
  15. package/src/v2/Select/MultiSelect.tsx +2 -0
  16. package/src/v2/Select/SingleSelect.tsx +2 -0
package/dist/v2/index.d.mts CHANGED
@@ -22,6 +22,7 @@ interface BaseSelectProps<T extends DataWithId> {
22
22
  groupBy?: (item: T) => string;
23
23
  renderGroupHeading?: (label: string) => string;
24
24
  isVirtualized?: boolean;
25
+ estimatedItemHeight?: number;
25
26
  placeholder: string;
26
27
  onIsOpenChange?: (isOpen: boolean) => void;
27
28
  stateReducer?: any;
@@ -86,22 +87,22 @@ interface SingleSelectProps<T extends DataWithId> extends BaseSingleSelectProps<
86
87
  renderSelection?: (item: T | null) => ReactNode;
87
88
  triggerButtonProps?: any;
88
89
  }
89
- declare function SingleSelect<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSelection, renderSelection, renderItem, groupBy, renderGroupHeading, isVirtualized, placeholder, onSelectedItemIdChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, removePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleSelectProps<T>): react_jsx_runtime.JSX.Element;
90
+ declare function SingleSelect<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSelection, renderSelection, renderItem, groupBy, renderGroupHeading, isVirtualized, estimatedItemHeight, placeholder, onSelectedItemIdChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, removePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleSelectProps<T>): react_jsx_runtime.JSX.Element;
90
91
 
91
92
  interface MultiSelectProps<T extends DataWithId> extends BaseMultiSelectProps<T> {
92
93
  renderSelections?: (items: T[]) => ReactNode;
93
94
  triggerButtonProps?: any;
94
95
  shouldOverflow?: boolean;
95
96
  }
96
- declare function MultiSelect<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, isOpen: controlledIsOpen, itemToKey, itemToString, renderSelections, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, placeholder, onSelectedItemIdsChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, shouldOverflow, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
97
+ declare function MultiSelect<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, isOpen: controlledIsOpen, itemToKey, itemToString, renderSelections, renderItem, groupBy, renderGroupHeading, isVirtualized, estimatedItemHeight, showSelectedItems, selectHeadings, selectAllItem, placeholder, onSelectedItemIdsChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, shouldOverflow, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
97
98
 
98
99
  interface SingleAutocompleteProps<T extends DataWithId> extends BaseSingleAutocompleteProps<T> {
99
100
  includePlaceholderItem?: boolean;
100
101
  }
101
- declare function SingleAutocomplete<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, EmptyState, placeholder, onSelectedItemIdChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, includePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
102
+ declare function SingleAutocomplete<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, estimatedItemHeight, EmptyState, placeholder, onSelectedItemIdChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, includePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
102
103
 
103
104
  interface MultiAutocompleteProps<T extends DataWithId> extends BaseMultiAutocompleteProps<T> {
104
105
  }
105
- declare function MultiAutocomplete<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, EmptyState, placeholder, onSelectedItemIdsChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
106
+ declare function MultiAutocomplete<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, estimatedItemHeight, showSelectedItems, selectHeadings, selectAllItem, EmptyState, placeholder, onSelectedItemIdsChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
106
107
 
107
108
  export { MultiAutocomplete, type MultiAutocompleteProps, MultiSelect, type MultiSelectProps, SingleAutocomplete, type SingleAutocompleteProps, SingleSelect, type SingleSelectProps };
package/dist/v2/index.d.ts CHANGED
@@ -22,6 +22,7 @@ interface BaseSelectProps<T extends DataWithId> {
22
22
  groupBy?: (item: T) => string;
23
23
  renderGroupHeading?: (label: string) => string;
24
24
  isVirtualized?: boolean;
25
+ estimatedItemHeight?: number;
25
26
  placeholder: string;
26
27
  onIsOpenChange?: (isOpen: boolean) => void;
27
28
  stateReducer?: any;
@@ -86,22 +87,22 @@ interface SingleSelectProps<T extends DataWithId> extends BaseSingleSelectProps<
86
87
  renderSelection?: (item: T | null) => ReactNode;
87
88
  triggerButtonProps?: any;
88
89
  }
89
- declare function SingleSelect<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSelection, renderSelection, renderItem, groupBy, renderGroupHeading, isVirtualized, placeholder, onSelectedItemIdChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, removePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleSelectProps<T>): react_jsx_runtime.JSX.Element;
90
+ declare function SingleSelect<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSelection, renderSelection, renderItem, groupBy, renderGroupHeading, isVirtualized, estimatedItemHeight, placeholder, onSelectedItemIdChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, removePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleSelectProps<T>): react_jsx_runtime.JSX.Element;
90
91
 
91
92
  interface MultiSelectProps<T extends DataWithId> extends BaseMultiSelectProps<T> {
92
93
  renderSelections?: (items: T[]) => ReactNode;
93
94
  triggerButtonProps?: any;
94
95
  shouldOverflow?: boolean;
95
96
  }
96
- declare function MultiSelect<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, isOpen: controlledIsOpen, itemToKey, itemToString, renderSelections, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, placeholder, onSelectedItemIdsChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, shouldOverflow, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
97
+ declare function MultiSelect<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, isOpen: controlledIsOpen, itemToKey, itemToString, renderSelections, renderItem, groupBy, renderGroupHeading, isVirtualized, estimatedItemHeight, showSelectedItems, selectHeadings, selectAllItem, placeholder, onSelectedItemIdsChange, onIsOpenChange, stateReducer, triggerButtonProps, menuProps, inputType, shouldOverflow, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
97
98
 
98
99
  interface SingleAutocompleteProps<T extends DataWithId> extends BaseSingleAutocompleteProps<T> {
99
100
  includePlaceholderItem?: boolean;
100
101
  }
101
- declare function SingleAutocomplete<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, EmptyState, placeholder, onSelectedItemIdChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, includePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
102
+ declare function SingleAutocomplete<T extends DataWithId>({ id, data, selectedItemId: controlledSelectedItemId, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, estimatedItemHeight, EmptyState, placeholder, onSelectedItemIdChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, includePlaceholderItem, onPointerDownOutside, onInteractOutside, popoutPlacement, }: SingleAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
102
103
 
103
104
  interface MultiAutocompleteProps<T extends DataWithId> extends BaseMultiAutocompleteProps<T> {
104
105
  }
105
- declare function MultiAutocomplete<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, showSelectedItems, selectHeadings, selectAllItem, EmptyState, placeholder, onSelectedItemIdsChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
106
+ declare function MultiAutocomplete<T extends DataWithId>({ id, data, selectedItemIds: controlledSelectedItemIds, inputValue: controlledInputValue, isOpen: controlledIsOpen, itemToKey, itemToString, itemToSearchString, renderItem, groupBy, renderGroupHeading, isVirtualized, estimatedItemHeight, showSelectedItems, selectHeadings, selectAllItem, EmptyState, placeholder, onSelectedItemIdsChange, onInputValueChange, onIsOpenChange, stateReducer, menuProps, inputType, onPointerDownOutside, onInteractOutside, popoutPlacement, }: MultiAutocompleteProps<T>): react_jsx_runtime.JSX.Element;
106
107
 
107
108
  export { MultiAutocomplete, type MultiAutocompleteProps, MultiSelect, type MultiSelectProps, SingleAutocomplete, type SingleAutocompleteProps, SingleSelect, type SingleSelectProps };
package/dist/v2/index.js CHANGED
@@ -787,6 +787,7 @@ var VirtualizedComboboxContent = ({
787
787
  groupBy,
788
788
  allData,
789
789
  selectAllItem,
790
+ estimatedItemHeight = 35,
790
791
  ...rest
791
792
  }) => {
792
793
  const containerRef = (0, import_react7.useRef)(null);
@@ -796,7 +797,7 @@ var VirtualizedComboboxContent = ({
796
797
  getScrollElement: () => containerRef.current,
797
798
  estimateSize: (index) => {
798
799
  const item = items[index];
799
- return isGroupHeading(item) ? 30 : 35;
800
+ return isGroupHeading(item) ? 40 : estimatedItemHeight;
800
801
  }
801
802
  });
802
803
  (0, import_react7.useEffect)(() => {
@@ -805,7 +806,10 @@ var VirtualizedComboboxContent = ({
805
806
  }
806
807
  }, [highlightedIndex, rowVirtualizer]);
807
808
  const virtualItems = rowVirtualizer.getVirtualItems();
808
- const menuProps = getMenuProps({ ref: containerRef });
809
+ const menuProps = getMenuProps(
810
+ { ref: containerRef },
811
+ { suppressRefError: true }
812
+ );
809
813
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...menuProps, ...rest, children: !hasItems && EmptyState ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "16px" }, children: EmptyState }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
810
814
  StyledMenuContent,
811
815
  {
@@ -843,6 +847,7 @@ var VirtualizedComboboxContent = ({
843
847
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
844
848
  MenuHeading,
845
849
  {
850
+ ref: rowVirtualizer.measureElement,
846
851
  ...headingItemProps,
847
852
  $highlighted: highlightedIndex === virtualItem.index,
848
853
  label: item.label,
@@ -864,6 +869,7 @@ var VirtualizedComboboxContent = ({
864
869
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
865
870
  MenuItem,
866
871
  {
872
+ ref: rowVirtualizer.measureElement,
867
873
  inputType,
868
874
  selected: isItemSelected2,
869
875
  id: toggleItem.id,
@@ -892,6 +898,7 @@ var VirtualizedComboboxContent = ({
892
898
  },
893
899
  $highlighted: highlightedIndex === virtualItem.index,
894
900
  $active: false,
901
+ ref: rowVirtualizer.measureElement,
895
902
  children: renderItem(dataItem)
896
903
  },
897
904
  virtualItem.key
@@ -921,7 +928,7 @@ var NormalComboboxContent = ({
921
928
  ...rest
922
929
  }) => {
923
930
  const hasItems = items.some((item) => !isGroupHeading(item));
924
- const menuProps = getMenuProps();
931
+ const menuProps = getMenuProps({}, { suppressRefError: true });
925
932
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...menuProps, ...rest, children: !hasItems && EmptyState ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "16px" }, children: EmptyState }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
926
933
  StyledMenuContent,
927
934
  {
@@ -1014,7 +1021,7 @@ var GroupedComboboxContent = ({
1014
1021
  ...rest
1015
1022
  }) => {
1016
1023
  const hasItems = items.some((item) => !isGroupHeading(item));
1017
- const menuProps = getMenuProps();
1024
+ const menuProps = getMenuProps({}, { suppressRefError: true });
1018
1025
  const groupedItems = groupItems(
1019
1026
  items,
1020
1027
  groupBy,
@@ -1133,6 +1140,7 @@ function SingleSelect({
1133
1140
  groupBy,
1134
1141
  renderGroupHeading,
1135
1142
  isVirtualized = false,
1143
+ estimatedItemHeight,
1136
1144
  placeholder,
1137
1145
  onSelectedItemIdChange,
1138
1146
  onIsOpenChange,
@@ -1288,6 +1296,7 @@ function SingleSelect({
1288
1296
  itemToString,
1289
1297
  inputType,
1290
1298
  isVirtualized,
1299
+ estimatedItemHeight,
1291
1300
  groupBy,
1292
1301
  selectHeadings: false,
1293
1302
  ...menuProps
@@ -1347,6 +1356,7 @@ function MultiSelect({
1347
1356
  groupBy,
1348
1357
  renderGroupHeading,
1349
1358
  isVirtualized = false,
1359
+ estimatedItemHeight,
1350
1360
  showSelectedItems = false,
1351
1361
  selectHeadings = false,
1352
1362
  selectAllItem,
@@ -1589,6 +1599,7 @@ function MultiSelect({
1589
1599
  allData: data,
1590
1600
  selectAllItem,
1591
1601
  isVirtualized,
1602
+ estimatedItemHeight,
1592
1603
  ...menuProps
1593
1604
  }
1594
1605
  ),
@@ -1641,6 +1652,7 @@ function SingleAutocomplete({
1641
1652
  groupBy,
1642
1653
  renderGroupHeading,
1643
1654
  isVirtualized = false,
1655
+ estimatedItemHeight,
1644
1656
  EmptyState,
1645
1657
  placeholder,
1646
1658
  onSelectedItemIdChange,
@@ -1862,6 +1874,7 @@ function SingleAutocomplete({
1862
1874
  selectHeadings: false,
1863
1875
  groupBy,
1864
1876
  isVirtualized,
1877
+ estimatedItemHeight,
1865
1878
  placeholderItem: includePlaceholderItem ? placeholderItem : void 0,
1866
1879
  ...menuProps
1867
1880
  }
@@ -1927,6 +1940,7 @@ function MultiAutocomplete({
1927
1940
  groupBy,
1928
1941
  renderGroupHeading,
1929
1942
  isVirtualized = false,
1943
+ estimatedItemHeight,
1930
1944
  showSelectedItems = false,
1931
1945
  selectHeadings = false,
1932
1946
  selectAllItem,
@@ -2218,6 +2232,7 @@ function MultiAutocomplete({
2218
2232
  allData: data,
2219
2233
  selectAllItem,
2220
2234
  isVirtualized,
2235
+ estimatedItemHeight,
2221
2236
  ...menuProps
2222
2237
  }
2223
2238
  ),