@decisiv/ui-components 2.0.1-alpha.99 → 2.0.1

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

@@ -86,6 +86,14 @@ var items = [{
     label: 'Option 5',
     value: '5'
   }]
+}, {
+  label: 'WithDetailLabel',
+  items: [{
+    id: '6',
+    label: 'custom label here',
+    labelDetails: 'test detail label',
+    value: '6'
+  }]
 }];
 var defaultProps = {
   items: items,
@@ -93,126 +101,157 @@ var defaultProps = {
   onChange: jest.fn()
 };
 describe('OptionsList', function () {
-  it('renders items and categories sub items', function () {
-    var _render = render(_react.default.createElement(_.default, defaultProps)),
-        queryByText = _render.queryByText;
-
-    items.forEach(function (item) {
-      var label = item.label;
-      expect(queryByText(label)).toBeInTheDocument();
-
-      if ((0, _utils.isCategory)(item)) {
-        item.items.forEach(function (_ref2) {
-          var subItemLabel = _ref2.label;
-          expect(queryByText(subItemLabel)).toBeInTheDocument();
-        });
-      }
-    });
-  });
-  it('renders custom option label', function () {
-    var renderOptionLabel = function renderOptionLabel(_ref3) {
-      var label = _ref3.label;
-      return _react.default.createElement("span", null, "".concat(label, " foo"));
-    };
-
-    var _render2 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-      renderOptionLabel: renderOptionLabel
-    }))),
-        queryByText = _render2.queryByText;
-
-    items.forEach(function (item) {
-      var label = item.label;
-
-      if ((0, _utils.isCategory)(item)) {
-        item.items.forEach(function (_ref4) {
-          var subItemLabel = _ref4.label;
-          expect(queryByText("".concat(subItemLabel, " foo"))).toBeInTheDocument();
-        });
-      } else {
-        expect(queryByText("".concat(label, " foo"))).toBeInTheDocument();
-      }
+  describe('virtualization', function () {
+    it('renders with virtualization enabled', function () {
+      var _render = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        enableVirtualization: true,
+        getItemHeight: function getItemHeight(item) {
+          return item.type === 'category-header' ? 40 : 48;
+        }
+      })), {
+        wrapper: wrapper
+      }),
+          container = _render.container; // Verify that react-window's List container is rendered
+
+
+      var listContainer = container.querySelector('[style*="overflow"]');
+      expect(listContainer).toBeTruthy();
+      expect(container).toMatchSnapshot();
     });
-  });
-  it('navigates through the options with arrow keys', function () {
-    var _render3 = render(_react.default.createElement(_.default, defaultProps)),
-        getByText = _render3.getByText,
-        container = _render3.container;
+    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)
 
-    var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
-    _react2.fireEvent.keyDown(container, {
-      key: 'Tab'
+      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();
 
-    _react2.fireEvent.focus(optionsList); // default first element active
-    // check the active item with border style
-
+      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(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n    "));
 
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'ArrowDown'
+      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 _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        size: size
+      }))),
+          queryByText = _render4.queryByText;
+
+      items.forEach(function (item) {
+        var label = item.label;
+        expect(queryByText(label)).toBeInTheDocument();
+
+        if ((0, _utils.isCategory)(item)) {
+          item.items.forEach(function (_ref2) {
+            var subItemLabel = _ref2.label;
+            expect(queryByText(subItemLabel)).toBeInTheDocument();
+          });
+        }
+      });
+    });
+    it('renders custom option label', function () {
+      var renderOptionLabel = function renderOptionLabel(_ref3) {
+        var label = _ref3.label;
+        return _react.default.createElement("span", null, "".concat(label, " foo"));
+      };
 
-    expect(getByText(defaultProps.items[1].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n    "));
+      var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        renderOptionLabel: renderOptionLabel,
+        size: size
+      }))),
+          queryByText = _render5.queryByText;
+
+      items.forEach(function (item) {
+        var label = item.label;
+
+        if ((0, _utils.isCategory)(item)) {
+          item.items.forEach(function (_ref4) {
+            var subItemLabel = _ref4.label;
+            expect(queryByText("".concat(subItemLabel, " foo"))).toBeInTheDocument();
+          });
+        } else {
+          expect(queryByText("".concat(label, " foo"))).toBeInTheDocument();
+        }
+      });
+    });
+    it('checks that labelDetails when provided ', function () {
+      var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        size: size
+      }))),
+          getByText = _render6.getByText;
 
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'ArrowUp'
+      expect(getByText('test detail label')).toBeInTheDocument();
     });
+    it('navigates through the options with arrow keys', function () {
+      var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        size: size
+      }))),
+          getByText = _render7.getByText,
+          container = _render7.container;
 
-    expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n    "));
-  });
-  it('selects an item with Enter or Space key', function () {
-    var onChange = jest.fn();
+      var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
-    var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-      onChange: onChange
-    }))),
-        getByLabelText = _render4.getByLabelText,
-        container = _render4.container;
+      _react2.fireEvent.keyDown(container, {
+        key: 'Tab'
+      });
 
-    var selectedItem = defaultProps.items[1];
-    var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
+      _react2.fireEvent.focus(optionsList); // default first element active
+      // check the active item with border style
 
-    _react2.fireEvent.keyDown(container, {
-      key: 'Tab'
-    });
 
-    _react2.fireEvent.focus(optionsList);
+      expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n        "));
 
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'ArrowDown'
-    });
+      _react2.fireEvent.keyDown(optionsList, {
+        key: 'ArrowDown'
+      });
 
-    _react2.fireEvent.keyDown(optionsList, {
-      key: 'Enter'
-    });
+      expect(getByText(defaultProps.items[1].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n        "));
 
-    expect(onChange).toHaveBeenCalledWith(selectedItem.id);
-    expect(getByLabelText(selectedItem.label)).toBeChecked();
-  });
-  describe('selecting disabled element with keyboard', function () {
+      _react2.fireEvent.keyDown(optionsList, {
+        key: 'ArrowUp'
+      });
+
+      expect(getByText(defaultProps.items[0].label).closest('.label')).toHaveStyle("\n      border-color: ".concat((0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), ";\n        "));
+    });
     it('selects an item with Enter or Space key', function () {
       var onChange = jest.fn();
-      var onlyDisabledItems = [{
-        id: '2',
-        label: 'Option 2',
-        value: '2',
-        disabled: true
-      }, {
-        id: disabledItemId,
-        label: disabledItemLabel,
-        value: '4',
-        disabled: true
-      }];
 
-      var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-        items: onlyDisabledItems,
-        onChange: onChange
+      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
 
       _react2.fireEvent.keyDown(container, {
@@ -229,131 +268,235 @@ describe('OptionsList', function () {
         key: 'Enter'
       });
 
-      expect(onChange).not.toHaveBeenCalledWith(disabledItemId);
-      expect(onChange).not.toHaveBeenCalled();
-      expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+      expect(onChange).toHaveBeenCalledWith(selectedItem.id);
+      expect(getByLabelText(selectedItem.label)).toBeChecked();
     });
-  });
-  describe('single selection', function () {
-    it('calls onChange with id when item is clicked', function () {
-      var onChange = jest.fn();
-
-      var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-        onChange: onChange
-      }))),
-          getByText = _render6.getByText,
-          getByLabelText = _render6.getByLabelText;
+    describe('selecting disabled element with keyboard', function () {
+      it('selects an item with Enter or Space key', function () {
+        var onChange = jest.fn();
+        var onlyDisabledItems = [{
+          id: '2',
+          label: 'Option 2',
+          value: '2',
+          disabled: true
+        }, {
+          id: disabledItemId,
+          label: disabledItemLabel,
+          value: '4',
+          disabled: true
+        }];
+
+        var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          items: onlyDisabledItems,
+          onChange: onChange,
+          size: size
+        }))),
+            getByLabelText = _render9.getByLabelText,
+            container = _render9.container;
 
-      var item = items[0];
+        var optionsList = container.querySelector('ul'); // simulate it is focused while tabbing
 
-      _react2.fireEvent.click(getByText(item.label));
+        _react2.fireEvent.keyDown(container, {
+          key: 'Tab'
+        });
 
-      expect(onChange).toHaveBeenLastCalledWith(item.id);
-      var subItem = items[2].items[0];
+        _react2.fireEvent.focus(optionsList);
 
-      _react2.fireEvent.click(getByText(subItem.label));
+        _react2.fireEvent.keyDown(optionsList, {
+          key: 'ArrowDown'
+        });
 
-      expect(onChange).toHaveBeenLastCalledWith(subItem.id); // there should be an item marked as selected
+        _react2.fireEvent.keyDown(optionsList, {
+          key: 'Enter'
+        });
 
-      expect(getByLabelText(subItem.label)).toBeChecked();
+        expect(onChange).not.toHaveBeenCalledWith(disabledItemId);
+        expect(onChange).not.toHaveBeenCalled();
+        expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+      });
     });
-    describe('disabled element', function () {
-      it('does not calls onChange when item is clicked', function () {
+    describe('single selection', function () {
+      it('calls onChange with id when item is clicked', function () {
         var onChange = jest.fn();
 
-        var _render7 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-          onChange: onChange
+        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;
 
-        _react2.fireEvent.click(getByText(disabledItemLabel));
+        var item = items[0];
 
-        expect(onChange).not.toHaveBeenLastCalledWith(disabledItemId);
-        expect(onChange).not.toHaveBeenCalled(); // the item shouldn't be marked as selected
+        _react2.fireEvent.click(getByText(item.label));
 
-        expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+        expect(onChange).toHaveBeenLastCalledWith(item.id);
+        var subItem = items[2].items[0];
+
+        _react2.fireEvent.click(getByText(subItem.label));
+
+        expect(onChange).toHaveBeenLastCalledWith(subItem.id); // there should be an item marked as selected
+
+        expect(getByLabelText(subItem.label)).toBeChecked();
+      });
+      describe('disabled element', function () {
+        it('does not calls onChange when item is clicked', function () {
+          var onChange = jest.fn();
+
+          var _render11 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+            onChange: onChange,
+            size: size
+          }))),
+              getByText = _render11.getByText,
+              getByLabelText = _render11.getByLabelText;
+
+          _react2.fireEvent.click(getByText(disabledItemLabel));
+
+          expect(onChange).not.toHaveBeenLastCalledWith(disabledItemId);
+          expect(onChange).not.toHaveBeenCalled(); // the item shouldn't be marked as selected
+
+          expect(getByLabelText(disabledItemLabel)).not.toBeChecked();
+        });
+      });
+      describe('controlled', function () {
+        it('prefers value over internal', function () {
+          var selected = items[1];
+
+          var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+            selected: selected.id,
+            size: size
+          }))),
+              getByText = _render12.getByText,
+              getByLabelText = _render12.getByLabelText;
+
+          var item = items[0];
+
+          _react2.fireEvent.click(getByText(item.label));
+
+          expect(getByLabelText(item.label)).not.toBeChecked();
+          expect(getByLabelText(selected.label)).toBeChecked();
+        });
       });
     });
-    describe('controlled', function () {
-      it('prefers value over internal', function () {
-        var selected = items[1];
+    describe('multi selection', function () {
+      it('calls onChange with array of selected ids when item is clicked', function () {
+        var onChange = jest.fn();
 
-        var _render8 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-          selected: selected.id
+        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          onChange: onChange,
+          multiple: true,
+          size: size
         }))),
-            getByText = _render8.getByText,
-            getByLabelText = _render8.getByLabelText;
+            getByText = _render13.getByText,
+            getByLabelText = _render13.getByLabelText;
 
         var item = items[0];
 
         _react2.fireEvent.click(getByText(item.label));
 
-        expect(getByLabelText(item.label)).not.toBeChecked();
-        expect(getByLabelText(selected.label)).toBeChecked();
+        expect(onChange).toHaveBeenLastCalledWith([item.id]);
+        var subItem = items[2].items[0];
+
+        _react2.fireEvent.click(getByText(subItem.label));
+
+        expect(onChange).toHaveBeenLastCalledWith([item.id, subItem.id]);
+        expect(getByLabelText(subItem.label)).toBeChecked();
+        expect(getByLabelText(item.label)).toBeChecked(); // second click unselects
+
+        _react2.fireEvent.click(getByText(item.label));
+
+        expect(onChange).toHaveBeenLastCalledWith([subItem.id]);
+      });
+      it('adds a footer with buttons when actions are provided', function () {
+        var onClick = jest.fn();
+        var actions = [{
+          id: '1',
+          text: 'apply',
+          onClick: onClick
+        }, {
+          id: '2',
+          text: 'cancel',
+          kind: 'secondary',
+          onClick: onClick
+        }, {
+          id: '3',
+          text: 'clear',
+          kind: 'secondary',
+          variant: 'ghost',
+          paddingLeft: 4,
+          onClick: onClick
+        }];
+
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          actions: actions,
+          multiple: true,
+          size: size
+        }))),
+            baseElement = _render14.baseElement,
+            getByText = _render14.getByText;
+
+        actions.forEach(function (_ref5) {
+          var label = _ref5.text;
+          return expect(getByText(label)).toBeTruthy();
+        });
+        expect(baseElement).toMatchSnapshot();
       });
     });
-  });
-  describe('multi selection', function () {
-    it('calls onChange with array of selected ids when item is clicked', function () {
-      var onChange = jest.fn();
+    describe('drag and drop', function () {
+      it('has draggable attributes', function () {
+        var mockedFn = jest.fn();
 
-      var _render9 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-        onChange: onChange,
-        multiple: true
-      }))),
-          getByText = _render9.getByText,
-          getByLabelText = _render9.getByLabelText;
+        var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: size,
+          onDragEnd: mockedFn
+        }))),
+            getByText = _render15.getByText;
 
-      var item = items[0];
+        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
 
-      _react2.fireEvent.click(getByText(item.label));
+      it.skip('calls onDragEnd when drag ends', function () {
+        var mockedFn = jest.fn();
 
-      expect(onChange).toHaveBeenLastCalledWith([item.id]);
-      var subItem = items[2].items[0];
+        var _render17 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: size,
+          onDragEnd: mockedFn
+        }))),
+            getByText = _render17.getByText;
 
-      _react2.fireEvent.click(getByText(subItem.label));
+        var draggableElement = getByText(items[0].label).closest('li');
+        var dropTarget = getByText('Option 2').closest('li');
 
-      expect(onChange).toHaveBeenLastCalledWith([item.id, subItem.id]);
-      expect(getByLabelText(subItem.label)).toBeChecked();
-      expect(getByLabelText(item.label)).toBeChecked(); // second click unselects
+        _react2.fireEvent.dragStart(draggableElement);
 
-      _react2.fireEvent.click(getByText(item.label));
+        _react2.fireEvent.dragEnter(dropTarget);
 
-      expect(onChange).toHaveBeenLastCalledWith([subItem.id]);
-    });
-    it('adds a footer with buttons when actions are provided', function () {
-      var onClick = jest.fn();
-      var actions = [{
-        id: '1',
-        text: 'apply',
-        onClick: onClick
-      }, {
-        id: '2',
-        text: 'cancel',
-        kind: 'secondary',
-        onClick: onClick
-      }, {
-        id: '3',
-        text: 'clear',
-        kind: 'secondary',
-        variant: 'ghost',
-        paddingLeft: 4,
-        onClick: onClick
-      }];
-
-      var _render10 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-        actions: actions,
-        multiple: true
-      }))),
-          baseElement = _render10.baseElement,
-          getByText = _render10.getByText;
+        _react2.fireEvent.dragOver(dropTarget);
+
+        _react2.fireEvent.drop(dropTarget);
+
+        _react2.fireEvent.dragEnd(draggableElement);
 
-      actions.forEach(function (_ref5) {
-        var label = _ref5.text;
-        return expect(getByText(label)).toBeTruthy();
+        expect(mockedFn).toHaveBeenCalled();
       });
-      expect(baseElement).toMatchSnapshot();
     });
   });
 });

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;AAoExD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAsFxD,eAAe,MAAM,CAAC"}

package/lib/atoms/OptionsList/schema.js

@@ -26,6 +26,7 @@ schema.makePropTypes = function () {
       disabled: _reactDesc.PropTypes.bool,
       id: _reactDesc.PropTypes.string,
       label: _reactDesc.PropTypes.string.description('The label text for an option in the dropdown list.'),
+      labelDetails: _reactDesc.PropTypes.string.description('The secondary sub-text for an option in the dropdown list.'),
       value: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.number, _reactDesc.PropTypes.string]).description('The value for an option in the dropdown list.')
     })).description('The array of item data that will be rendered').isRequired,
     minWidth: _reactDesc.PropTypes.string.description('A CSS min-width value to apply'),
@@ -36,9 +37,14 @@ schema.makePropTypes = function () {
     onChange: _reactDesc.PropTypes.func.description('Change event handler, called with the selected id or array of the selected item IDs.'),
     selected: _reactDesc.PropTypes.oneOfType([_reactDesc.PropTypes.string, _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.string)]).description('Used when component is controlled. Defines the item(s) selected in the options list.'),
     renderOptionLabel: _reactDesc.PropTypes.func.description('Function to customize render of option labels, called with the item value.'),
+    pointerEvents: _reactDesc.PropTypes.string.description('Defines the value of pointer-events of the options.').defaultValue('none'),
     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')
+    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'),
+    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."),
+    enableVirtualization: _reactDesc.PropTypes.bool.description('Enables virtualization of the options list for better performance with large datasets. When enabled, only visible items are rendered. For accurate virtualization, you should also provide the getItemHeight prop.'),
+    getItemHeight: _reactDesc.PropTypes.func.description('Function that returns the height in pixels for each item. When enableVirtualization is true, this should be provided to avoid relying on the internal default. Called with (item, size) and should return the height as a number.')
   };
 };