@decisiv/ui-components 2.0.1-alpha.221 → 2.0.1-alpha.223

package/lib/atoms/OptionsList/index.test.js

@@ -101,12 +101,65 @@ var defaultProps = {
   onChange: jest.fn()
 };
 describe('OptionsList', function () {
+  describe('virtualization', function () {
+    it('renders with virtualization enabled', function () {
+      var _render = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        enableVirtualization: true
+      })), {
+        wrapper: wrapper
+      }),
+          container = _render.container; // Verify that react-window's List container is rendered
+
+
+      var listContainer = container.querySelector('[style*="overflow"]');
+      expect(listContainer).toBeTruthy();
+    });
+    it('renders without virtualization by default', function () {
+      var _render2 = render(_react.default.createElement(_.default, defaultProps), {
+        wrapper: wrapper
+      }),
+          queryByText = _render2.queryByText; // Verify all items are rendered directly (not virtualized)
+
+
+      expect(queryByText(item0Label)).toBeTruthy();
+      expect(queryByText('Option 1')).toBeTruthy();
+      expect(queryByText(item2Label)).toBeTruthy();
+    });
+    it('warns when enableVirtualization is used with drag-drop', function () {
+      var consoleSpy = jest.spyOn(console, 'warn').mockImplementation();
+      var onDragEnd = jest.fn();
+      render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        enableVirtualization: true,
+        onDragEnd: onDragEnd
+      })), {
+        wrapper: wrapper
+      });
+      expect(consoleSpy).toHaveBeenCalledWith('OptionsList: enableVirtualization is ignored when onDragEnd is provided. Virtualization and drag-and-drop are incompatible.');
+      consoleSpy.mockRestore();
+    });
+    it('disables virtualization when drag-drop is enabled', function () {
+      var onDragEnd = jest.fn();
+
+      var _render3 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        enableVirtualization: true,
+        onDragEnd: onDragEnd
+      })), {
+        wrapper: wrapper
+      }),
+          queryByText = _render3.queryByText; // All items should be rendered directly (not virtualized) when drag-drop is enabled
+
+
+      expect(queryByText(item0Label)).toBeTruthy();
+      expect(queryByText('Option 1')).toBeTruthy();
+      expect(queryByText(item2Label)).toBeTruthy();
+    });
+  });
   ['small', 'medium'].forEach(function (size) {
     it('renders items and categories sub items', function () {
-      var _render = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         size: size
       }))),
-          queryByText = _render.queryByText;
+          queryByText = _render4.queryByText;
 
       items.forEach(function (item) {
         var label = item.label;
@@ -126,11 +179,11 @@ describe('OptionsList', function () {
         return _react.default.createElement("span", null, "".concat(label, " foo"));
       };
 
-      var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         renderOptionLabel: renderOptionLabel,
         size: size
       }))),
-          queryByText = _render2.queryByText;
+          queryByText = _render5.queryByText;
 
       items.forEach(function (item) {
         var label = item.label;
@@ -146,19 +199,19 @@ describe('OptionsList', function () {
       });
     });
     it('checks that labelDetails when provided ', function () {
-      var _render3 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         size: size
       }))),
-          getByText = _render3.getByText;
+          getByText = _render6.getByText;
 
       expect(getByText('test detail label')).toBeInTheDocument();
     });
     it('navigates through the options with arrow keys', function () {
-      var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         size: size
       }))),
-          getByText = _render4.getByText,
-          container = _render4.container;
+          getByText = _render7.getByText,
+          container = _render7.container;
 
       var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
@@ -187,12 +240,12 @@ describe('OptionsList', function () {
     it('selects an item with Enter or Space key', function () {
       var onChange = jest.fn();
 
-      var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+      var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
         onChange: onChange,
         size: size
       }))),
-          getByLabelText = _render5.getByLabelText,
-          container = _render5.container;
+          getByLabelText = _render8.getByLabelText,
+          container = _render8.container;
 
       var selectedItem = defaultProps.items[1];
       var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
@@ -229,13 +282,13 @@ describe('OptionsList', function () {
           disabled: true
         }];
 
-        var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           items: onlyDisabledItems,
           onChange: onChange,
           size: size
         }))),
-            getByLabelText = _render6.getByLabelText,
-            container = _render6.container;
+            getByLabelText = _render9.getByLabelText,
+            container = _render9.container;
 
         var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
@@ -262,12 +315,12 @@ describe('OptionsList', function () {
       it('calls onChange with id when item is clicked', function () {
         var onChange = jest.fn();
 
-        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           size: size
         }))),
-            getByText = _render7.getByText,
-            getByLabelText = _render7.getByLabelText;
+            getByText = _render10.getByText,
+            getByLabelText = _render10.getByLabelText;
 
         var item = items[0];
 
@@ -286,12 +339,12 @@ describe('OptionsList', function () {
         it('does not calls onChange when item is clicked', function () {
           var onChange = jest.fn();
 
-          var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
             onChange: onChange,
             size: size
           }))),
-              getByText = _render8.getByText,
-              getByLabelText = _render8.getByLabelText;
+              getByText = _render11.getByText,
+              getByLabelText = _render11.getByLabelText;
 
           _react2.fireEvent.click(getByText(disabledItemLabel));
 
@@ -305,12 +358,12 @@ describe('OptionsList', function () {
         it('prefers value over internal', function () {
           var selected = items[1];
 
-          var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
             selected: selected.id,
             size: size
           }))),
-              getByText = _render9.getByText,
-              getByLabelText = _render9.getByLabelText;
+              getByText = _render12.getByText,
+              getByLabelText = _render12.getByLabelText;
 
           var item = items[0];
 
@@ -325,13 +378,13 @@ describe('OptionsList', function () {
       it('calls onChange with array of selected ids when item is clicked', function () {
         var onChange = jest.fn();
 
-        var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           onChange: onChange,
           multiple: true,
           size: size
         }))),
-            getByText = _render10.getByText,
-            getByLabelText = _render10.getByLabelText;
+            getByText = _render13.getByText,
+            getByLabelText = _render13.getByLabelText;
 
         var item = items[0];
 
@@ -370,13 +423,13 @@ describe('OptionsList', function () {
           onClick: onClick
         }];
 
-        var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           actions: actions,
           multiple: true,
           size: size
         }))),
-            baseElement = _render11.baseElement,
-            getByText = _render11.getByText;
+            baseElement = _render14.baseElement,
+            getByText = _render14.getByText;
 
         actions.forEach(function (_ref5) {
           var label = _ref5.text;
@@ -385,5 +438,61 @@ describe('OptionsList', function () {
         expect(baseElement).toMatchSnapshot();
       });
     });
+    describe('drag and drop', function () {
+      it('has draggable attributes', function () {
+        var mockedFn = jest.fn();
+
+        var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: size,
+          onDragEnd: mockedFn
+        }))),
+            getByText = _render15.getByText;
+
+        var item = items[0];
+        expect(getByText(item.label).closest('li')).toHaveAttribute('draggable');
+        var category = items[2];
+        category.items.forEach(function (subItem) {
+          expect(getByText(subItem.label).closest('li')).toHaveAttribute('draggable');
+        });
+      });
+      it('does not have draggable attributes when onDragEnd is not provided', function () {
+        var _render16 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: size
+        }))),
+            getByText = _render16.getByText;
+
+        var item = items[0];
+        expect(getByText(item.label).closest('li')).not.toHaveAttribute('draggable');
+        var category = items[2];
+        category.items.forEach(function (subItem) {
+          expect(getByText(subItem.label).closest('li')).not.toHaveAttribute('draggable');
+        });
+      }); // TODO: re-enable once migrated to pragmatic-drag-and-drop
+
+      it.skip('calls onDragEnd when drag ends', function () {
+        var mockedFn = jest.fn();
+
+        var _render17 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: size,
+          onDragEnd: mockedFn
+        }))),
+            getByText = _render17.getByText;
+
+        var draggableElement = getByText(items[0].label).closest('li');
+        var dropTarget = getByText('Option 2').closest('li');
+
+        _react2.fireEvent.dragStart(draggableElement);
+
+        _react2.fireEvent.dragEnter(dropTarget);
+
+        _react2.fireEvent.dragOver(dropTarget);
+
+        _react2.fireEvent.drop(dropTarget);
+
+        _react2.fireEvent.dragEnd(draggableElement);
+
+        expect(mockedFn).toHaveBeenCalled();
+      });
+    });
   });
 });

package/lib/atoms/OptionsList/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AA6ExD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAgFxD,eAAe,MAAM,CAAC"}

package/lib/atoms/OptionsList/schema.js

@@ -41,7 +41,8 @@ schema.makePropTypes = function () {
     selectable: _reactDesc.PropTypes.bool.description('Enables selection in the options list.').defaultValue(true),
     role: _reactDesc.PropTypes.string.description('The role assigned to the list.').defaultValue('listbox'),
     itemRole: _reactDesc.PropTypes.string.description('The role assigned to each item in the list.').defaultValue('option'),
-    size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the OptionList').defaultValue('small')
+    size: _reactDesc.PropTypes.oneOf(['small', 'medium']).description('Defines the size of the OptionList').defaultValue('small'),
+    onDragEnd: _reactDesc.PropTypes.func.description("If present, enables Drag-and-Drop sorting. This function will be called after the order of rows changes when a row is dragged and dropped. It is called with 2 arguments: the index from where it's dragged, and the index to where it's dropped. If there are grouped rows then each argument is an array where the first element is the group index and the second the row index inside the group. See below for function signature.")
   };
 };
 

package/lib/atoms/OptionsList/styles.d.ts

@@ -0,0 +1,45 @@
+export declare const Container: import("styled-components").StyledComponent<"ul", any, Pick<Partial<{
+    height?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    maxHeight?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    maxWidth?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    minHeight?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    minWidth?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    width?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+}>, "maxHeight" | "maxWidth" | "minWidth">, never>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/atoms/OptionsList/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC"}

package/lib/atoms/OptionsList/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line import/prefer-default-export
+var Container = _styledComponents.default.ul.withConfig({
+  displayName: "styles__Container",
+  componentId: "sc-1rytot8-0"
+})(["list-style:none;margin:0;width:100%;height:auto;max-height:", ";max-width:", ";padding:0;overflow:auto;position:relative;", " ", " ", " &:focus{outline:none;}"], (0, _rem.default)(310), (0, _rem.default)(340), function (_ref) {
+  var minWidth = _ref.minWidth;
+  return minWidth ? "\n      min-width: ".concat(minWidth, ";\n") : '';
+}, function (_ref2) {
+  var maxWidth = _ref2.maxWidth;
+  return maxWidth ? "\n      max-width: ".concat(maxWidth, ";\n") : '';
+}, function (_ref3) {
+  var maxHeight = _ref3.maxHeight;
+  return maxHeight ? "\n      max-height: ".concat(maxHeight, ";\n") : '';
+});
+
+exports.Container = Container;

package/lib/atoms/OptionsList/types.d.ts

@@ -1,6 +1,7 @@
 import { BorderRadiusProperty } from 'csstype';
 import { KeyboardEvent } from 'react';
 import { IconProps } from '@decisiv/iconix';
+import { DraggableProvidedDragHandleProps, DraggableProvidedDraggableProps } from 'react-beautiful-dnd';
 import { AvatarProps } from '../../components/Avatar';
 import { BadgeProps } from '../../components/Badge';
 import { DimensionsProps } from '../../modifiers/dimensions';
@@ -41,6 +42,8 @@ export interface Category {
     label: string;
     showCheckbox?: boolean;
     size?: Size;
+    indexOffset?: number;
+    isDragEnabled?: boolean;
 }
 export declare type CategoryProps = Category;
 export declare type IconComponent = (props: IconProps) => JSX.Element;
@@ -54,6 +57,10 @@ interface BaseOption {
     showCheckbox?: boolean;
     meta?: Record<any, unknown>;
     size?: Size;
+    providerRef?: React.Ref<HTMLLIElement>;
+    draggableProps?: DraggableProvidedDraggableProps;
+    dragHandleProps?: DraggableProvidedDragHandleProps;
+    isDragEnabled?: boolean;
 }
 export interface ItemOption extends BaseOption {
     value?: string;
@@ -85,10 +92,15 @@ export interface OptionsListProps extends OptionsListDimensions {
     role?: string;
     itemRole?: string;
     pointerEvents?: string;
+    onDragEnd?: (from: number | number[], to: number | number[]) => void;
+    enableVirtualization?: boolean;
 }
 export declare type OptionsListContainerRef = HTMLUListElement;
-export interface StyledCategoryProps extends React.LiHTMLAttributes<HTMLLIElement> {
+export interface StyledCategoryProps {
     size: Size;
+    ref?: React.Ref<HTMLLIElement>;
+    ariaDisabled?: boolean;
+    role?: string;
 }
 export interface ContainerProps {
     borderRadius?: BorderRadiusProperty<string>;
@@ -101,5 +113,20 @@ export interface ContainerProps {
 export interface StyledLinkProps extends LinkProps {
     disabled: boolean;
 }
+export interface FlattenedItem {
+    item: Item;
+    type: 'option' | 'category-header';
+    originalItem: Item;
+}
+export interface VirtualRowProps {
+    index: number;
+    style: React.CSSProperties;
+    data: {
+        flattenedItems: FlattenedItem[];
+        borderRadius?: string;
+        showCheckbox: boolean;
+        size: 'small' | 'medium';
+    };
+}
 export {};
 //# sourceMappingURL=types.d.ts.map

package/lib/atoms/OptionsList/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/types.ts"],"names":[],"mappings":"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"}

package/lib/atoms/OptionsList/utils.d.ts

@@ -1,4 +1,4 @@
-import { Item, Category, Option, LinkOption } from './types';
+import { Item, Category, Option, LinkOption, FlattenedItem } from './types';
 export declare const getId: (item: Item) => string;
 export declare const isCategory: (item: Item) => item is Category;
 export declare const sanitizeIds: (ids: string | string[] | undefined, multiple: boolean) => string[];
@@ -6,4 +6,6 @@ export declare const ensureItemIsVisible: (container: HTMLUListElement | null, i
     focus?: boolean | undefined;
 } | undefined) => void;
 export declare const isLink: (item: Option) => item is LinkOption;
+export declare const flattenItems: (items: Item[]) => FlattenedItem[];
+export declare const getItemHeight: (flattenedItem: FlattenedItem, size?: "small" | "medium") => number;
 //# sourceMappingURL=utils.d.ts.map

package/lib/atoms/OptionsList/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE7D,eAAO,MAAM,KAAK,wBAAgD,CAAC;AAEnE,eAAO,MAAM,UAAU,kCACuB,CAAC;AAE/C,eAAO,MAAM,WAAW,qEAWvB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;sBA+B/B,CAAC;AAEF,eAAO,MAAM,MAAM,sCACgB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE5E,eAAO,MAAM,KAAK,wBAAgD,CAAC;AAEnE,eAAO,MAAM,UAAU,kCACuB,CAAC;AAE/C,eAAO,MAAM,WAAW,qEAWvB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;sBA+B/B,CAAC;AAEF,eAAO,MAAM,MAAM,sCACgB,CAAC;AAepC,eAAO,MAAM,YAAY,oCA+BxB,CAAC;AAYF,eAAO,MAAM,aAAa,qEAkBzB,CAAC"}

package/lib/atoms/OptionsList/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isLink = exports.ensureItemIsVisible = exports.sanitizeIds = exports.isCategory = exports.getId = void 0;
+exports.getItemHeight = exports.flattenItems = exports.isLink = exports.ensureItemIsVisible = exports.sanitizeIds = exports.isCategory = exports.getId = void 0;
 
 var _castArray = _interopRequireDefault(require("lodash/castArray"));
 
@@ -73,5 +73,82 @@ exports.ensureItemIsVisible = ensureItemIsVisible;
 var isLink = function isLink(item) {
   return 'linkTo' in item && !!item.linkTo;
 };
+/**
+ * Flatten items array to include category items inline for virtualization
+ *
+ * Categories are rendered as:
+ * - Category header (with special styling)
+ * - Followed by its items
+ *
+ * This function transforms:
+ * [Option1, Category{items: [Option2, Option3]}, Option4]
+ *
+ * Into:
+ * [Option1, CategoryHeader, Option2, Option3, Option4]
+ */
+
+
+exports.isLink = isLink;
+
+var flattenItems = function flattenItems(items) {
+  var flattened = [];
+  items.forEach(function (item) {
+    if (isCategory(item)) {
+      // Add the category header
+      flattened.push({
+        item: item,
+        type: 'category-header',
+        originalItem: item
+      }); // Add all items within the category
+
+      item.items.forEach(function (subItem) {
+        flattened.push({
+          item: subItem,
+          type: 'option',
+          originalItem: item // Keep reference to parent category
+
+        });
+      });
+    } else {
+      // Regular option
+      flattened.push({
+        item: item,
+        type: 'option',
+        originalItem: item
+      });
+    }
+  });
+  return flattened;
+};
+/**
+ * Calculate item height based on type and size for virtualization
+ *
+ * Heights are based on the styled-components padding values:
+ * - Options (small): 5px top + 5px bottom padding + ~25px content = ~35px
+ * - Options (medium): 10px top + 10px bottom padding + ~25px content = ~45px
+ * - Categories (small): 15px top + 7px bottom padding + ~20px content = ~42px
+ * - Categories (medium): 15px top + 10px bottom padding + ~25px content = ~50px
+ * - Options with labelDetails: Add ~20px extra height
+ */
+
+
+exports.flattenItems = flattenItems;
+
+var getItemHeight = function getItemHeight(flattenedItem) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'small';
+  var type = flattenedItem.type,
+      item = flattenedItem.item;
+
+  if (type === 'category-header') {
+    // Category headers are taller
+    return size === 'medium' ? 50 : 42;
+  } // Regular option
+
+
+  var baseHeight = size === 'medium' ? 45 : 35; // Check if option has labelDetails (secondary text) which adds height
+
+  var hasLabelDetails = 'labelDetails' in item && item.labelDetails;
+  return hasLabelDetails ? baseHeight + 20 : baseHeight;
+};
 
-exports.isLink = isLink;
+exports.getItemHeight = getItemHeight;

package/lib/components/Combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AA4mBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AA8mBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}

package/lib/components/Combobox/index.js

@@ -126,7 +126,8 @@ function Combobox(props, ref) {
       containerSelector = props.containerSelector,
       pointerEvents = props.pointerEvents,
       externalIsPopoverVisible = props.isPopoverVisible,
-      externalListRef = props.listRef;
+      externalListRef = props.listRef,
+      enableVirtualization = props.enableVirtualization;
 
   var _useCombobox = (0, _useCombobox2.default)(props),
       getInputFieldProps = _useCombobox.getInputFieldProps,
@@ -605,7 +606,8 @@ function Combobox(props, ref) {
       visible: Boolean(popoverVisibleStateToUse || loading),
       renderOptionLabel: renderOptionLabel,
       zIndex: zIndex,
-      pointerEvents: pointerEvents
+      pointerEvents: pointerEvents,
+      enableVirtualization: enableVirtualization
     }));
   }));
 }

package/lib/components/Combobox/index.test.js

@@ -854,7 +854,8 @@ describe('Combobox', function () {
       _react2.fireEvent.click(queryByLabelText('test'));
 
       expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label)).toBeInTheDocument();
-      expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n        background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n        color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n      "));
+      var li = (0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement;
+      expect(li).toHaveAttribute('aria-selected', 'true');
     });
     describe('when typing', function () {
       it('does NOT update the selection automatically', function () {
@@ -887,7 +888,8 @@ describe('Combobox', function () {
         });
 
         expect(onChangeValue).toHaveBeenCalledTimes(1);
-        expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+        var li = (0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement;
+        expect(li).toHaveAttribute('aria-selected', 'true');
       });
     });
     describe('when clicking the clear button', function () {
@@ -958,7 +960,7 @@ describe('Combobox', function () {
   });
   describe('when a controlled component', function () {
     it('initializes with and prefers prop values', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender;
+      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender, li, li2;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -1019,10 +1021,12 @@ describe('Combobox', function () {
 
               _react2.fireEvent.click(queryByLabelText('test'));
 
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement).toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
-              expect((0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement).not.toHaveStyle("\n          background: ".concat((0, _toColorString.default)(_color.default.interaction.pacificOcean), ";\n          color: ").concat((0, _toColorString.default)(_color.default.base.snowWhite), ";\n        "));
+              li = (0, _react2.queryByText)(baseElement, defaultOptions[0].label).parentElement.parentElement.parentElement;
+              expect(li).toHaveAttribute('aria-selected', 'true');
+              li2 = (0, _react2.queryByText)(baseElement, defaultOptions[1].label).parentElement.parentElement.parentElement;
+              expect(li2).toHaveAttribute('aria-selected', 'false');
 
-            case 23:
+            case 25:
             case "end":
               return _context.stop();
           }

package/lib/components/Combobox/types.d.ts

@@ -12,6 +12,7 @@ export interface ComboboxProps extends Omit<React.InputHTMLAttributes<ComboboxIn
     clearButtonLabel?: string;
     defaultInputValue?: string;
     defaultValue?: string;
+    enableVirtualization?: boolean;
     inputValue?: string;
     isPopoverVisible?: boolean;
     multiple?: boolean;