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

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

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/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;

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

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

package/lib/components/Wizard/index.d.ts

@@ -12,8 +12,15 @@ export interface WizardProps extends Pick<ModalProps, 'id' | 'visible' | 'zIndex
     size?: 'normal' | 'extraLarge';
     steps: Step[];
     activeStep: number;
-    submitButtonProps: ButtonProps;
+    submitButtonProps?: ButtonProps;
     onCancel: NonNullable<ModalProps['onClose']>;
+    renderActions?: (context: {
+        step: Step;
+        stepIndex: number;
+        isFirstStep: boolean;
+        isLastStep: boolean;
+        defaultActions: React.ReactNode;
+    }) => React.ReactNode;
 }
 declare function WizardManger(props: PropsWithChildren<WizardProps>): JSX.Element;
 declare namespace WizardManger {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAOjD,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAa5C,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mBAAmB,CAAC,EAAE,WAAW,CAAC;CACnC;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,WAAW,CAAC;IAC/B,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;CAC9C;AAmGD,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,eAQ1D;kBARQ,YAAY;;;;AAiBrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAO1D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAa5C,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mBAAmB,CAAC,EAAE,WAAW,CAAC;CACnC;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE;QACxB,IAAI,EAAE,IAAI,CAAC;QACX,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,OAAO,CAAC;QACrB,UAAU,EAAE,OAAO,CAAC;QACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;KACjC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AA8HD,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,eAQ1D;kBARQ,YAAY;;;;AAiBrB,eAAe,YAAY,CAAC"}

package/lib/components/Wizard/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _breakpointObserver = require("@decisiv/breakpoint-observer");
 
@@ -31,6 +31,8 @@ var _schema = _interopRequireDefault(require("./schema"));
 
 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; } }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -63,6 +65,7 @@ var Wizard = function Wizard(_ref) {
       size = _ref$size === void 0 ? 'normal' : _ref$size,
       steps = _ref.steps,
       onCancel = _ref.onCancel,
+      renderActions = _ref.renderActions,
       _ref$zIndex = _ref.zIndex,
       zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex;
   var translate = (0, _useTranslations.default)();
@@ -86,6 +89,26 @@ var Wizard = function Wizard(_ref) {
   var showPrevious = currentStepNumber > 1 && !!previousButtonProps;
   var showSubmit = currentStepNumber === steps.length && !!submitButtonProps;
   var showNext = currentStepNumber < steps.length && !showSubmit && !!nextButtonProps;
+  var defaultActions = (0, _react.useMemo)(function () {
+    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styles.ActionButtonsContainer, {
+      size: breakpoint
+    }, showSubmit && _react.default.createElement(_.Button, _extends({
+      text: translate('Submit', 'wizard.actions.submit')
+    }, submitButtonProps)), showNext && _react.default.createElement(_.Button, _extends({
+      text: translate('Continue', 'wizard.actions.continue'),
+      icon: _ArrowRight.default,
+      iconPosition: "right"
+    }, nextButtonProps)), showPrevious && _react.default.createElement(_.Button, _extends({
+      text: translate('Back', 'wizard.actions.back'),
+      kind: "secondary",
+      icon: _ArrowLeft.default
+    }, previousButtonProps))), _react.default.createElement(_.Button, {
+      text: translate('Cancel', 'wizard.actions.cancel'),
+      kind: "secondary",
+      variant: "ghost",
+      onClick: onCancel
+    }));
+  }, [breakpoint, showSubmit, translate, submitButtonProps, showNext, nextButtonProps, showPrevious, previousButtonProps, onCancel]);
   return _react.default.createElement(_ResponsiveModalWrapper.default, {
     id: id,
     size: sizeMapping[size],
@@ -109,24 +132,13 @@ var Wizard = function Wizard(_ref) {
     size: breakpoint,
     paddingX: (_ref3 = {}, _defineProperty(_ref3, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref3, _breakpointObserver.sizes.XS, 2), _ref3),
     paddingY: 1.5
-  }, _react.default.createElement(_styles.ActionButtonsContainer, {
-    size: breakpoint
-  }, showSubmit && _react.default.createElement(_.Button, _extends({
-    text: translate('Submit', 'wizard.actions.submit')
-  }, submitButtonProps)), showNext && _react.default.createElement(_.Button, _extends({
-    text: translate('Continue', 'wizard.actions.continue'),
-    icon: _ArrowRight.default,
-    iconPosition: "right"
-  }, nextButtonProps)), showPrevious && _react.default.createElement(_.Button, _extends({
-    text: translate('Back', 'wizard.actions.back'),
-    kind: "secondary",
-    icon: _ArrowLeft.default
-  }, previousButtonProps))), _react.default.createElement(_.Button, {
-    text: translate('Cancel', 'wizard.actions.cancel'),
-    kind: "secondary",
-    variant: "ghost",
-    onClick: onCancel
-  }))));
+  }, renderActions ? renderActions({
+    step: currentStep,
+    stepIndex: currentStepNumber - 1,
+    isFirstStep: currentStepNumber === 1,
+    isLastStep: currentStepNumber === steps.length,
+    defaultActions: defaultActions
+  }) : defaultActions)));
 };
 
 function WizardManger(props) {

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

@@ -30,6 +30,95 @@ var render = function render(ui, options) {
 };
 
 describe('Wizard', function () {
+  describe('renderActions', function () {
+    describe('when not provided', function () {
+      it('renders the default action buttons', function () {
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          }),
+          nextButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          }
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          })
+        }];
+
+        var _render = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/continue/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+      });
+    });
+    describe('when provided', function () {
+      it('renders the custom action buttons', function () {
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          })
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          })
+        }];
+
+        var _render2 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps,
+          renderActions: function renderActions() {
+            return _react.default.createElement("div", null, "Custom Actions");
+          }
+        })),
+            getByRole = _render2.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/custom actions/i)).toBeInTheDocument();
+      });
+    });
+  });
   describe('size', function () {
     describe('normal / default', function () {
       it('renders the modal with a max-width of 650px', function () {
@@ -50,7 +139,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render = render(_react.default.createElement(_.default, {
+        var _render3 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: 1,
@@ -61,7 +150,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render.getByRole;
+            getByRole = _render3.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toHaveStyle('max-width: 650px');
@@ -86,7 +175,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render2 = render(_react.default.createElement(_.default, {
+        var _render4 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           size: "extraLarge",
           visible: true,
@@ -98,7 +187,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render2.getByRole;
+            getByRole = _render4.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toHaveStyle("max-width: ".concat((0, _polished.rem)(_designTokens.spacing.base * 90)));
@@ -123,7 +212,7 @@ describe('Wizard', function () {
       })
     }];
 
-    var _render3 = render(_react.default.createElement(_.default, {
+    var _render5 = render(_react.default.createElement(_.default, {
       title: "Wizard Title",
       visible: true,
       activeStep: 1,
@@ -134,7 +223,7 @@ describe('Wizard', function () {
       },
       steps: steps
     })),
-        getByRole = _render3.getByRole;
+        getByRole = _render5.getByRole;
 
     var modal = getByRole('dialog');
     expect(modal).toBeInTheDocument();
@@ -161,7 +250,7 @@ describe('Wizard', function () {
         })
       }];
 
-      var _render4 = render(_react.default.createElement(_.default, {
+      var _render6 = render(_react.default.createElement(_.default, {
         title: "Wizard Title",
         visible: true,
         activeStep: 1,
@@ -172,7 +261,7 @@ describe('Wizard', function () {
         },
         steps: steps
       })),
-          getByRole = _render4.getByRole;
+          getByRole = _render6.getByRole;
 
       var modal = getByRole('dialog');
       expect(modal).toBeInTheDocument();
@@ -202,7 +291,7 @@ describe('Wizard', function () {
         })
       }];
 
-      var _render5 = render(_react.default.createElement(_.default, {
+      var _render7 = render(_react.default.createElement(_.default, {
         title: "Wizard Title",
         visible: true,
         activeStep: activeStep,
@@ -213,7 +302,7 @@ describe('Wizard', function () {
         },
         steps: steps
       })),
-          getByRole = _render5.getByRole;
+          getByRole = _render7.getByRole;
 
       var modal = getByRole('dialog');
       expect(modal).toBeInTheDocument();
@@ -242,7 +331,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render6 = render(_react.default.createElement(_.default, {
+        var _render8 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           onCancel: onCancelMock,
@@ -254,7 +343,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render6.getByRole;
+            getByRole = _render8.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -285,7 +374,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render7 = render(_react.default.createElement(_.default, {
+        var _render9 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: 1,
@@ -296,7 +385,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render7.getByRole;
+            getByRole = _render9.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -327,7 +416,7 @@ describe('Wizard', function () {
           }
         }];
 
-        var _render8 = render(_react.default.createElement(_.default, {
+        var _render10 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: steps.length,
@@ -338,7 +427,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render8.getByRole;
+            getByRole = _render10.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -371,7 +460,7 @@ describe('Wizard', function () {
           })
         }];
         it('calls the onClick from the continueProps of the active step', function () {
-          var _render9 = render(_react.default.createElement(_.default, {
+          var _render11 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: 1,
@@ -382,7 +471,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render9.getByRole;
+              getByRole = _render11.getByRole;
 
           var modal = getByRole('dialog');
           expect(modal).toBeInTheDocument();
@@ -421,7 +510,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render10 = render(_react.default.createElement(_.default, {
+        var _render12 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: 2,
@@ -432,7 +521,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render10.getByRole;
+            getByRole = _render12.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -463,7 +552,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render11 = render(_react.default.createElement(_.default, {
+        var _render13 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: 1,
@@ -474,7 +563,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render11.getByRole;
+            getByRole = _render13.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -508,7 +597,7 @@ describe('Wizard', function () {
           }
         }];
         it('calls the onClick from the continueProps of the active step', function () {
-          var _render12 = render(_react.default.createElement(_.default, {
+          var _render14 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: 2,
@@ -519,7 +608,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render12.getByRole;
+              getByRole = _render14.getByRole;
 
           var modal = getByRole('dialog');
           expect(modal).toBeInTheDocument();
@@ -554,7 +643,7 @@ describe('Wizard', function () {
         it('doesnt render if im not in the last step', function () {
           var submitCallbackMock = jest.fn();
 
-          var _render13 = render(_react.default.createElement(_.default, {
+          var _render15 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: 1,
@@ -563,7 +652,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render13.getByRole;
+              getByRole = _render15.getByRole;
 
           var modal = getByRole('dialog');
           expect((0, _react2.within)(modal).queryByText(/submit/i)).not.toBeInTheDocument();
@@ -571,7 +660,7 @@ describe('Wizard', function () {
         it('renders if im in the last step', function () {
           var submitCallbackMock = jest.fn();
 
-          var _render14 = render(_react.default.createElement(_.default, {
+          var _render16 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: steps.length,
@@ -580,7 +669,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render14.getByRole;
+              getByRole = _render16.getByRole;
 
           var modal = getByRole('dialog');
           expect((0, _react2.within)(modal).getByText(/submit/i)).toBeInTheDocument();

package/lib/components/Wizard/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAsC,CAAC;AA6CnD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAgDnD,eAAe,MAAM,CAAC"}

package/lib/components/Wizard/schema.js

@@ -23,15 +23,16 @@ schema.propTypes = {
     title: _reactDesc.PropTypes.string.isRequired,
     content: _reactDesc.PropTypes.node.isRequired,
     previousButtonProps: _reactDesc.PropTypes.shape({
-      onClick: _reactDesc.PropTypes.func.isRequired
+      onClick: _reactDesc.PropTypes.func
     }),
     nextButtonProps: _reactDesc.PropTypes.shape({
-      onClick: _reactDesc.PropTypes.func.isRequired
+      onClick: _reactDesc.PropTypes.func
     })
   })).description('Define the steps to render in the wizard. For more info on the usage, see the Step Props table below').isRequired,
   submitButtonProps: _reactDesc.PropTypes.shape({
     onClick: _reactDesc.PropTypes.func.isRequired
-  }).description('the props to pass to the submit button, this button is rendered by default in the last stesp').isRequired
+  }).description('the props to pass to the submit button, this button is rendered by default in the last stesp'),
+  renderActions: _reactDesc.PropTypes.func.description('Function to render custom action buttons. It receives an object with the current step, step index, isFirstStep, isLastStep and the default actions as parameters')
 };
 var _default = schema;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.222",
+  "version": "2.0.1-alpha.223",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -39,6 +39,7 @@
     "react-beautiful-dnd": "^13.0.0",
     "react-desc": "^4.1.2",
     "react-popper": "^1.3.3",
+    "react-window": "^1.8.10",
     "styled-components-modifiers": "^1.2.5",
     "styled-theming": "^2.2.0",
     "stylis-plugin-extra-scope": "^0.1.1"
@@ -61,6 +62,7 @@
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.8.22",
     "@types/react-beautiful-dnd": "^13.0.0",
+    "@types/react-window": "^1.8.5",
     "@types/styled-components": "^4.1.15",
     "@types/styled-theming": "^2.2.2",
     "babel-plugin-styled-components": "^1.10.6",