@decisiv/ui-components 2.0.1-alpha.222 → 2.0.1-alpha.224

package/lib/atoms/InputField/index.d.ts

@@ -47,6 +47,9 @@ export interface BaseInputFieldProps {
     withWarningIntent?: boolean;
     isTextArea?: boolean;
     multiple?: boolean;
+    showContainerCount?: boolean;
+    containerMaxCount?: number;
+    containerCount?: number;
 }
 declare const InputFieldWithRef: RefForwardingComponent<Ref<any>, BaseInputFieldProps>;
 export default InputFieldWithRef;

package/lib/atoms/InputField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,GAAG,EACH,sBAAsB,EAIvB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAoB5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,gBAAgB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iBAAiB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAoLD,QAAA,MAAM,iBAAiB,EAAE,sBAAsB,CAC7C,GAAG,CAAC,GAAG,CAAC,EACR,mBAAmB,CACK,CAAC;AAQ3B,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/index.tsx"],"names":[],"mappings":"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"}

package/lib/atoms/InputField/index.js

@@ -33,6 +33,8 @@ var _RequiredIcon = _interopRequireDefault(require("../RequiredIcon"));
 
 var _HelpMessage = _interopRequireDefault(require("./HelpMessage"));
 
+var _styles = require("./styles");
+
 var _schema = _interopRequireDefault(require("./schema"));
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -90,7 +92,10 @@ function InputField(props, targetRef) {
       isTextArea = _props$isTextArea === void 0 ? false : _props$isTextArea,
       _props$multiple = props.multiple,
       multiple = _props$multiple === void 0 ? false : _props$multiple,
-      rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "hideLabel", "helpMessage", "icon", "secondaryElement", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage", "withWarningIntent", "isTextArea", "multiple"]);
+      showContainerCount = props.showContainerCount,
+      containerCount = props.containerCount,
+      containerMaxCount = props.containerMaxCount,
+      rest = _objectWithoutProperties(props, ["children", "cursor", "disabled", "hideLabel", "helpMessage", "icon", "secondaryElement", "id", "inputContainerRef", "label", "labelId", "maxLength", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "overflow", "readOnly", "required", "requiredMessage", "showCharacterCount", "style", "value", "warningMessage", "withWarningIntent", "isTextArea", "multiple", "showContainerCount", "containerCount", "containerMaxCount"]);
 
   var fallbackTargetRef = (0, _react.useRef)(null);
   var finalTargetRef = targetRef || fallbackTargetRef;
@@ -194,7 +199,9 @@ function InputField(props, targetRef) {
     target: _react.default.createElement(_RequiredIcon.default, {
       "aria-label": requiredMessage
     })
-  }, requiredMessage))), children(_objectSpread({}, rest, {
+  }, requiredMessage), showContainerCount && containerMaxCount !== undefined && _react.default.createElement(_styles.ContentCounter, {
+    surpassed: (containerCount || 0) > containerMaxCount
+  }, "".concat(containerCount || 0, "/").concat(containerMaxCount)))), children(_objectSpread({}, rest, {
     'aria-labelledby': labelId,
     disabled: disabled,
     id: targetId,

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+interface SpanProps extends HTMLAttributes<HTMLSpanElement> {
+    surpassed?: boolean;
+}
+export declare const ContentCounter: import("styled-components").StyledComponent<"span", any, SpanProps, never>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/InputField/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AASvC,UAAU,SAAU,SAAQ,cAAc,CAAC,eAAe,CAAC;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAGD,eAAO,MAAM,cAAc,4EAS1B,CAAC"}

package/lib/atoms/InputField/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentCounter = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+// eslint-disable-next-line import/prefer-default-export
+var ContentCounter = _styledComponents.default.span.withConfig({
+  displayName: "styles__ContentCounter",
+  componentId: "sc-1mkcosa-0"
+})(["position:absolute;right:", ";", ""], (0, _rem.default)(_spacing.default.base), function (_ref) {
+  var surpassed = _ref.surpassed;
+  return surpassed && (0, _styledComponents.css)(["color:", ";"], (0, _toColorString.default)(_color.default.status.danger.medium));
+});
+
+exports.ContentCounter = ContentCounter;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAoBf,OAAO,EAGL,gBAAgB,EAGjB,MAAM,SAAS,CAAC;AAajB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAqZrC,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAmC5D,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/OptionsList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AAqBf,OAAO,EAEL,gBAAgB,EAMjB,MAAM,SAAS,CAAC;AAqBjB,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AA8iBrC,QAAA,MAAM,2BAA2B,2FAA0B,CAAC;AAmC5D,eAAe,2BAA2B,CAAC"}

package/lib/atoms/OptionsList/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Container", {
   enumerable: true,
   get: function get() {
-    return _styles.Container;
+    return _styles2.Container;
   }
 });
 exports.default = void 0;
@@ -19,6 +19,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
 
+var _reactWindow = require("react-window");
+
 var _Button = require("../../components/Button");
 
 var _Grid = _interopRequireDefault(require("../../components/Grid"));
@@ -37,9 +39,11 @@ var _Option = _interopRequireDefault(require("./Option"));
 
 var _Category = _interopRequireDefault(require("./Category"));
 
+var _styles = require("./Category/styles");
+
 var _Footer = _interopRequireDefault(require("./Footer"));
 
-var _styles = require("./styles");
+var _styles2 = require("./styles");
 
 var _context = require("./context");
 
@@ -59,8 +63,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
@@ -77,6 +79,8 @@ function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d =
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 var Row = _Grid.default.Row;
 var isUsingKeyboard = false;
 
@@ -88,6 +92,41 @@ if (_canUseDOM.default) {
     isUsingKeyboard = false;
   });
 }
+/**
+ * VirtualRow component for VariableSizeList (react-window)
+ * Renders a single item (either a Category header or an Option)
+ */
+
+/* eslint-disable react/prop-types */
+
+
+var VirtualRow = _react.default.memo(function (_ref) {
+  var index = _ref.index,
+      style = _ref.style,
+      data = _ref.data;
+  var flattenedItems = data.flattenedItems,
+      borderRadius = data.borderRadius,
+      showCheckbox = data.showCheckbox,
+      size = data.size;
+  var flattenedItem = flattenedItems[index];
+  var item = flattenedItem.item,
+      type = flattenedItem.type;
+  var id = (0, _utils.getId)(item);
+  return _react.default.createElement("div", {
+    style: style
+  }, type === 'category-header' ? _react.default.createElement(_styles.StyledCategory, {
+    size: size
+  }, item.label) : _react.default.createElement(_Option.default, _extends({}, item, {
+    key: id,
+    borderRadius: borderRadius,
+    showCheckbox: showCheckbox,
+    size: size
+  })));
+});
+/* eslint-enable react/prop-types */
+
+
+VirtualRow.displayName = 'VirtualRow';
 
 function OptionsList(props, forwardedRef) {
   var actions = props.actions,
@@ -114,7 +153,8 @@ function OptionsList(props, forwardedRef) {
       minWidth = props.minWidth,
       maxWidth = props.maxWidth,
       maxHeight = props.maxHeight,
-      pointerEvents = props.pointerEvents;
+      pointerEvents = props.pointerEvents,
+      enableVirtualization = props.enableVirtualization;
   var initialIds = selectedIdsProp || defaultSelected;
 
   var _useState = (0, _react.useState)(null),
@@ -127,6 +167,40 @@ function OptionsList(props, forwardedRef) {
       selectedIds = _useState4[0],
       setSelectedIds = _useState4[1];
 
+  var isDragEnabled = !!onDragEndProp;
+  var useVirtualization = enableVirtualization && !isDragEnabled; // Flatten items for virtualization
+
+  var flattenedItems = (0, _react.useMemo)(function () {
+    if (!useVirtualization) return [];
+    return (0, _utils.flattenItems)(items);
+  }, [items, useVirtualization]); // Get item size for VariableSizeList
+
+  var getItemSize = (0, _react.useCallback)(function (index) {
+    return (0, _utils.getItemHeight)(flattenedItems[index], size);
+  }, [flattenedItems, size]); // Calculate total height for the list
+
+  var totalHeight = (0, _react.useMemo)(function () {
+    if (!useVirtualization) return 0;
+    var calculated = flattenedItems.reduce(function (acc, item) {
+      return acc + (0, _utils.getItemHeight)(item, size);
+    }, 0); // If maxHeight is explicitly provided, use it
+
+    if (maxHeight && typeof maxHeight === 'string') {
+      var max = parseInt(maxHeight, 10);
+      return Math.min(calculated, max);
+    } // Default behavior: use 310px max, but if calculated is less, use calculated
+    // This ensures small lists render all items (important for tests)
+
+
+    var defaultMax = 310; // If the list is small enough to fit all items, use calculated height
+    // This is important for tests and small lists
+
+    if (calculated <= defaultMax) {
+      return calculated;
+    }
+
+    return defaultMax;
+  }, [flattenedItems, size, maxHeight, useVirtualization]);
   var updateSelectionAndTriggerChange = (0, _react.useCallback)(function (ids) {
     // Only toggle if we are "uncontrolled"
     selectedIdsProp === undefined && selectable && setSelectedIds(ids);
@@ -161,8 +235,8 @@ function OptionsList(props, forwardedRef) {
 
   var selectableIds = (0, _react.useMemo)(function () {
     return items.reduce(function (acc, item) {
-      return [].concat(_toConsumableArray(acc), _toConsumableArray(((0, _utils.isCategory)(item) ? item.items.filter(function (_ref) {
-        var disabled = _ref.disabled;
+      return [].concat(_toConsumableArray(acc), _toConsumableArray(((0, _utils.isCategory)(item) ? item.items.filter(function (_ref2) {
+        var disabled = _ref2.disabled;
         return !disabled;
       }) : [item.disabled ? undefined : item]).filter(Boolean)));
     }, []).map(_utils.getId);
@@ -260,9 +334,9 @@ function OptionsList(props, forwardedRef) {
     handleFocusToggle(event);
   }, [handleFocusToggle, updateActiveId]);
   var positions = [];
-  var onDragEnd = (0, _react.useCallback)(function (_ref2) {
-    var source = _ref2.source,
-        destination = _ref2.destination;
+  var onDragEnd = (0, _react.useCallback)(function (_ref3) {
+    var source = _ref3.source,
+        destination = _ref3.destination;
     if (!onDragEndProp || !destination) return;
 
     var _positions$source$ind = _slicedToArray(positions[source.index], 2),
@@ -303,9 +377,17 @@ function OptionsList(props, forwardedRef) {
   }, [onDragEndProp, positions]);
 
   var _useConfig = (0, _ConfigProvider.useConfig)(),
-      createPortal = _useConfig.createPortal;
+      createPortal = _useConfig.createPortal; // Warn developers if they try to use both features
 
-  var isDragEnabled = !!onDragEndProp;
+
+  (0, _react.useEffect)(function () {
+    if (process.env.NODE_ENV !== 'production') {
+      if (enableVirtualization && isDragEnabled) {
+        // eslint-disable-next-line no-console
+        console.warn('OptionsList: enableVirtualization is ignored when onDragEnd is provided. ' + 'Virtualization and drag-and-drop are incompatible.');
+      }
+    }
+  }, [enableVirtualization, isDragEnabled]);
 
   var renderDraggable = function renderDraggable(item, index) {
     var id = (0, _utils.getId)(item);
@@ -352,10 +434,36 @@ function OptionsList(props, forwardedRef) {
     }
   }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(_reactBeautifulDnd.DragDropContext, {
     onDragEnd: onDragEnd
-  }, _react.default.createElement(_reactBeautifulDnd.Droppable, {
+  }, useVirtualization ? _react.default.createElement(_styles2.Container, {
+    "aria-activedescendant": activeId,
+    "aria-multiselectable": !!multiple,
+    ref: setContainerRefFunc,
+    onKeyDown: onKeyDown,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseLeave: function onMouseLeave() {
+      return updateActiveId('');
+    },
+    role: role,
+    tabIndex: tabIndex,
+    minWidth: minWidth,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight
+  }, _react.default.createElement(_reactWindow.VariableSizeList, {
+    height: totalHeight,
+    itemCount: flattenedItems.length,
+    itemSize: getItemSize,
+    width: "100%",
+    itemData: {
+      flattenedItems: flattenedItems,
+      borderRadius: borderRadius,
+      showCheckbox: showCheckbox || false,
+      size: size
+    }
+  }, VirtualRow)) : _react.default.createElement(_reactBeautifulDnd.Droppable, {
     droppableId: "droppable-options-list"
   }, function (droppableProvided) {
-    return _react.default.createElement(_styles.Container, _extends({
+    return _react.default.createElement(_styles2.Container, _extends({
       "aria-activedescendant": activeId,
       "aria-multiselectable": !!multiple,
       ref: function ref(el) {
@@ -373,7 +481,7 @@ function OptionsList(props, forwardedRef) {
       minWidth: minWidth,
       maxWidth: maxWidth,
       maxHeight: maxHeight
-    }, droppableProvided.droppableProps), items.map(function (item, index) {
+    }, droppableProvided.droppableProps), isDragEnabled ? items.map(function (item, index) {
       var id = (0, _utils.getId)(item);
       var indexOffset = positions.length;
       positions[dndIndex] = [index];
@@ -395,6 +503,24 @@ function OptionsList(props, forwardedRef) {
       }
 
       return renderDraggable(item, dndIndex - 1);
+    }) : items.map(function (item) {
+      var id = (0, _utils.getId)(item);
+
+      if ((0, _utils.isCategory)(item)) {
+        return _react.default.createElement(_Category.default, _extends({}, item, {
+          key: id,
+          borderRadius: borderRadius,
+          showCheckbox: showCheckbox,
+          size: size
+        }));
+      }
+
+      return _react.default.createElement(_Option.default, _extends({}, item, {
+        key: id,
+        borderRadius: borderRadius,
+        showCheckbox: showCheckbox,
+        size: size
+      }));
     }), droppableProvided.placeholder);
   }))), actions && _react.default.createElement(Row, null, _react.default.createElement(_Footer.default, {
     actions: actions

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;
@@ -389,11 +442,11 @@ describe('OptionsList', function () {
       it('has draggable attributes', function () {
         var mockedFn = jest.fn();
 
-        var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render15 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           size: size,
           onDragEnd: mockedFn
         }))),
-            getByText = _render12.getByText;
+            getByText = _render15.getByText;
 
         var item = items[0];
         expect(getByText(item.label).closest('li')).toHaveAttribute('draggable');
@@ -403,10 +456,10 @@ describe('OptionsList', function () {
         });
       });
       it('does not have draggable attributes when onDragEnd is not provided', function () {
-        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render16 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           size: size
         }))),
-            getByText = _render13.getByText;
+            getByText = _render16.getByText;
 
         var item = items[0];
         expect(getByText(item.label).closest('li')).not.toHaveAttribute('draggable');
@@ -419,11 +472,11 @@ describe('OptionsList', function () {
       it.skip('calls onDragEnd when drag ends', function () {
         var mockedFn = jest.fn();
 
-        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        var _render17 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
           size: size,
           onDragEnd: mockedFn
         }))),
-            getByText = _render14.getByText;
+            getByText = _render17.getByText;
 
         var draggableElement = getByText(items[0].label).closest('li');
         var dropTarget = getByText('Option 2').closest('li');

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

@@ -93,6 +93,7 @@ export interface OptionsListProps extends OptionsListDimensions {
     itemRole?: string;
     pointerEvents?: string;
     onDragEnd?: (from: number | number[], to: number | number[]) => void;
+    enableVirtualization?: boolean;
 }
 export declare type OptionsListContainerRef = HTMLUListElement;
 export interface StyledCategoryProps {
@@ -112,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