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

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-declare const Category: ({ borderRadius, label, items, showCheckbox, size, }: import("../types").Category) => JSX.Element;
+declare const Category: ({ borderRadius, label, items, indexOffset, showCheckbox, isDragEnabled, size, }: import("../types").Category) => JSX.Element;
 export default Category;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/index.tsx"],"names":[],"mappings":";AAOA,QAAA,MAAM,QAAQ,mGA2Bb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/index.tsx"],"names":[],"mappings":";AAUA,QAAA,MAAM,QAAQ,+HA4Eb,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -5,7 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+
+var _reactBeautifulDnd = require("react-beautiful-dnd");
+
+var _ConfigProvider = require("../../../providers/ConfigProvider");
 
 var _Option = _interopRequireDefault(require("../Option"));
 
@@ -15,27 +19,65 @@ var _styles = require("./styles");
 
 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 _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 Category = function Category(_ref) {
   var borderRadius = _ref.borderRadius,
       label = _ref.label,
       items = _ref.items,
+      _ref$indexOffset = _ref.indexOffset,
+      indexOffset = _ref$indexOffset === void 0 ? 0 : _ref$indexOffset,
       showCheckbox = _ref.showCheckbox,
+      isDragEnabled = _ref.isDragEnabled,
       size = _ref.size;
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(_styles.StyledCategory, {
-    size: size
-  }, label), items.map(function (subItem) {
-    var id = (0, _utils.getId)(subItem);
-    return _react.default.createElement(_Option.default, _extends({}, subItem, {
+
+  var _useConfig = (0, _ConfigProvider.useConfig)(),
+      createPortal = _useConfig.createPortal; // Render a draggable item, using a portal if it's being dragged
+  // to avoid issues with parent containers having transform: *.
+  // See; https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md
+
+
+  var renderDraggable = function renderDraggable(item, index) {
+    var id = (0, _utils.getId)(item);
+    return _react.default.createElement(_reactBeautifulDnd.Draggable, {
       key: id,
-      id: id,
-      borderRadius: borderRadius,
-      showCheckbox: showCheckbox,
-      size: size
-    }));
+      draggableId: id,
+      index: index,
+      isDragDisabled: !isDragEnabled
+    }, function (provided, snapshot) {
+      var draggableElement = _react.default.createElement(_Option.default, _extends({}, item, {
+        id: id,
+        borderRadius: borderRadius,
+        showCheckbox: showCheckbox,
+        size: size,
+        providerRef: provided.innerRef,
+        isDragEnabled: isDragEnabled,
+        draggableProps: provided.draggableProps,
+        dragHandleProps: provided.dragHandleProps
+      }));
+
+      if (snapshot.isDragging) {
+        return createPortal(draggableElement);
+      }
+
+      return draggableElement;
+    });
+  };
+
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_reactBeautifulDnd.Draggable, {
+    key: "category-".concat(label),
+    draggableId: "category-".concat(label),
+    index: indexOffset,
+    isDragDisabled: true
+  }, function (provided) {
+    return _react.default.createElement(_styles.StyledCategory, _extends({
+      size: size,
+      ref: provided.innerRef
+    }, provided.draggableProps, provided.dragHandleProps, {
+      role: "option"
+    }), label);
+  }), items.map(function (subItem, index) {
+    return renderDraggable(subItem, indexOffset + index + 1);
   }));
 };
 

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

@@ -1,6 +1,5 @@
 import { StyledCategoryProps } from '../types';
 export declare const StyledCategory: import("styled-components").StyledComponent<"li", any, {
-    role: "option";
     'aria-disabled': true;
-} & StyledCategoryProps, "role" | "aria-disabled">;
+} & StyledCategoryProps, "aria-disabled">;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAmB/C,eAAO,MAAM,cAAc;;;kDAa1B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Category/styles.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAmB/C,eAAO,MAAM,cAAc;;yCAY1B,CAAC"}

package/lib/atoms/OptionsList/Category/styles.js

@@ -26,7 +26,6 @@ var withCategorySizeModifiers = function withCategorySizeModifiers(props) {
 };
 
 var StyledCategory = _styledComponents.default.li.attrs({
-  role: 'option',
   'aria-disabled': true
 }).withConfig({
   displayName: "styles__StyledCategory",

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,WAAW,EAKZ,MAAM,UAAU,CAAC;AA4DlB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0H/C;;AAED,wBAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,WAAW,EAKZ,MAAM,UAAU,CAAC;AA6DlB,iBAAS,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAkI/C;;AAED,wBAAkC"}

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

@@ -21,6 +21,8 @@ var _utils = require("../utils");
 
 var _styles = require("./styles");
 
+var _Grip = _interopRequireDefault(require("../../../components/Table/Grip"));
+
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -81,7 +83,11 @@ function Option(props) {
       _props$showCheckbox = props.showCheckbox,
       showCheckbox = _props$showCheckbox === void 0 ? true : _props$showCheckbox,
       _props$size = props.size,
-      size = _props$size === void 0 ? 'small' : _props$size;
+      size = _props$size === void 0 ? 'small' : _props$size,
+      providerRef = props.providerRef,
+      draggableProps = props.draggableProps,
+      dragHandleProps = props.dragHandleProps,
+      isDragEnabled = props.isDragEnabled;
   var decorationType = (0, _get.default)(decoration, 'type');
 
   var _useOptionsList = (0, _context.useOptionsList)(),
@@ -123,7 +129,7 @@ function Option(props) {
       }, children);
     };
   }, [selectable]);
-  return _react.default.createElement(_styles.Container, {
+  return _react.default.createElement(_styles.Container, _extends({
     "aria-disabled": !!disabled,
     "aria-selected": checked,
     borderRadius: borderRadius,
@@ -137,14 +143,18 @@ function Option(props) {
     inputMethod: inputMethod,
     role: itemRole,
     size: size,
-    pointerEvents: pointerEvents
-  }, (0, _utils.isLink)(props) ? _react.default.createElement(_styles.StyledLink, {
+    pointerEvents: pointerEvents,
+    ref: providerRef
+  }, draggableProps, dragHandleProps), (0, _utils.isLink)(props) ? _react.default.createElement(_styles.StyledLink, {
     tabIndex: -1,
     to: props.linkTo,
     text: label,
     icon: isDecoration(decoration) && decoration.type === 'Icon' ? decoration.icon : undefined,
     disabled: !!disabled
-  }) : _react.default.createElement(LabelWrapper, null, selectable && (multiple && !!showCheckbox ? _react.default.createElement(_Checkbox.default, _extends({}, commonProps, {
+  }) : _react.default.createElement(LabelWrapper, null, isDragEnabled && _react.default.createElement(_Grip.default, {
+    marginRight: "10px",
+    selected: checked
+  }), selectable && (multiple && !!showCheckbox ? _react.default.createElement(_Checkbox.default, _extends({}, commonProps, {
     disabled: !!disabled,
     size: sizeMapping[size],
     value: props.value

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/styles.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK3D,eAAO,MAAM,UAAU,mLAgBtB,CAAC;AAuBF,eAAO,MAAM,SAAS,+EA6GrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,oEAI7B,CAAC;AAEF,eAAO,MAAM,4BAA4B;;SAUxC,CAAC;AAEF,eAAO,MAAM,WAAW;;;kBAEvB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;kBAG3B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/atoms/OptionsList/Option/styles.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK3D,eAAO,MAAM,UAAU,mLAgBtB,CAAC;AAuBF,eAAO,MAAM,SAAS,+EA8GrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,oEAI7B,CAAC;AAEF,eAAO,MAAM,4BAA4B;;SAUxC,CAAC;AAEF,eAAO,MAAM,WAAW;;;kBAEvB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;kBAG3B,CAAC"}

package/lib/atoms/OptionsList/Option/styles.js

@@ -48,7 +48,7 @@ function getBorderRadius(_ref) {
 var Container = _styledComponents.default.li.withConfig({
   displayName: "styles__Container",
   componentId: "sc-1vr9h8x-1"
-})(["text-align:left;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;pointer-events:", ";width:100%;white-space:nowrap;", " > *{margin-right:", ";}}> ", "{pointer-events:auto;background-color:transparent;text-decoration:none;}&:first-child > .label,&:first-child > ", "{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child > .label,&:last-child > ", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover:not([aria-disabled='true']):not([aria-selected='true']) > .label,&:hover:not([aria-disabled='true']):not([aria-selected='true']) > ", "{color:", ";text-decoration:none;.label > *{border-color:", ";}}&[aria-selected='true'] > .label{background:", ";color:", ";}&[aria-selected='true'] > .label > div > #optionLabelDetails{background:", ";color:", ";}", ";", " &[aria-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), function (_ref2) {
+})(["text-align:left;list-style:none;&:focus{outline:none;}> .label,> ", "{align-items:center;border:1px solid transparent;color:", ";display:flex;pointer-events:", ";width:100%;white-space:nowrap;", " > *{margin-right:", ";}}> ", "{pointer-events:auto;background-color:transparent;text-decoration:none;}&:first-child > .label,&:first-child > ", "{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child > .label,&:last-child > ", "{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}&:hover:not([aria-disabled='true']):not([aria-selected='true']) > .label,&:hover:not([aria-disabled='true']):not([aria-selected='true']) > ", "{color:", ";text-decoration:none;.label > *{border-color:", ";}}&[aria-selected='true'] > .label{background:", ";color:", ";}&[aria-selected='true'] > .label > div > #optionLabelDetails{background:", ";color:", ";}", ";", " &[aria-disabled='true']{cursor:not-allowed;", "{pointer-events:none;}}&[aria-disabled='true'] > .label,&[aria-disabled='true'] > ", "{background:", ";color:", ";}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), function (_ref2) {
   var pointerEvents = _ref2.pointerEvents;
   return pointerEvents;
 }, withSizeModifiers, (0, _rem.default)(10), StyledLink, StyledLink, getBorderRadius, getBorderRadius, StyledLink, getBorderRadius, getBorderRadius, StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _styleModifiers.when)('isActive', (0, _styledComponents.css)(["color:", ";background:", ";.label > *{border-color:", ";}"], (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean15), (0, _toColorString.default)(_designTokens.color.interaction.indianOcean))), (0, _styleModifiers.when)([['isActive'], ['inputMethod', 'keyboard']], (0, _styledComponents.css)(["background:none;> .label,> ", "{border-color:", ";", "}&[aria-selected='true'] > .label,&[aria-selected='true'] > ", "{color:", ";", "}"], StyledLink, (0, _toColorString.default)(_designTokens.color.interaction.pacificOcean), (0, _focusRingWithColor.default)(_designTokens.color.interaction.pacificOcean40), StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _focusRingWithColor.default)(_designTokens.color.opacity.fullMoon50))), StyledLink, StyledLink, (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.opacity.charcoal40));

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

@@ -1,49 +1,6 @@
 import React from 'react';
 import { OptionsListProps } from './types';
-export declare const Container: import("styled-components").StyledComponent<"ul", any, Pick<Partial<{
-    height?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    maxHeight?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    maxWidth?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    minHeight?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    minWidth?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-    width?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
-        readonly XS: "XS";
-        readonly SM: "SM";
-        readonly MD: "MD";
-        readonly LG: "LG";
-        readonly XL: "XL";
-    }> | undefined;
-}>, "maxHeight" | "maxWidth" | "minWidth">, never>;
+export { Container } from './styles';
 declare const OptionsListWithContainerRef: React.ForwardRefExoticComponent<OptionsListProps & React.RefAttributes<HTMLUListElement>>;
 export default OptionsListWithContainerRef;
 //# sourceMappingURL=index.d.ts.map

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;AAcf,OAAO,EAGL,gBAAgB,EAIjB,MAAM,SAAS,CAAC;AAwBjB,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kDAmCrB,CAAC;AAiTF,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

@@ -3,18 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Container = void 0;
+Object.defineProperty(exports, "Container", {
+  enumerable: true,
+  get: function get() {
+    return _styles2.Container;
+  }
+});
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactBeautifulDnd = require("react-beautiful-dnd");
 
-var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+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"));
@@ -27,12 +33,18 @@ var _assignRef = _interopRequireDefault(require("../../utils/assignRef"));
 
 var _isCtrlCmd = _interopRequireDefault(require("../../utils/isCtrlCmd"));
 
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
 var _Option = _interopRequireDefault(require("./Option"));
 
 var _Category = _interopRequireDefault(require("./Category"));
 
+var _styles = require("./Category/styles");
+
 var _Footer = _interopRequireDefault(require("./Footer"));
 
+var _styles2 = require("./styles");
+
 var _context = require("./context");
 
 var _utils = require("./utils");
@@ -51,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"); }
@@ -69,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;
 
@@ -80,28 +92,48 @@ if (_canUseDOM.default) {
     isUsingKeyboard = false;
   });
 }
-
-var Container = _styledComponents.default.ul.withConfig({
-  displayName: "OptionsList__Container",
-  componentId: "sc-107p8d5-0"
-})(["list-style:none;margin:0;width:100%;height:auto;max-height:", ";max-width:", ";padding:0;overflow:auto;position:relative;", " ", " ", " &:focus{outline:none;}"], (0, _rem.default)(310), (0, _rem.default)(340), function (_ref) {
-  var minWidth = _ref.minWidth;
-  return minWidth ? "\nmin-width: ".concat(minWidth, ";\n") : '';
-}, function (_ref2) {
-  var maxWidth = _ref2.maxWidth;
-  return maxWidth ? "\nmax-width: ".concat(maxWidth, ";\n") : '';
-}, function (_ref3) {
-  var maxHeight = _ref3.maxHeight;
-  return maxHeight ? "\nmax-height: ".concat(maxHeight, ";\n") : '';
+/**
+ * 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 */
+
 
-exports.Container = Container;
+VirtualRow.displayName = 'VirtualRow';
 
 function OptionsList(props, forwardedRef) {
   var actions = props.actions,
       items = props.items,
       multiple = props.multiple,
       onChange = props.onChange,
+      onDragEndProp = props.onDragEnd,
       name = props.name,
       selectedIdsProp = props.selected,
       renderOptionLabel = props.renderOptionLabel,
@@ -121,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),
@@ -134,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);
@@ -168,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 (_ref4) {
-        var disabled = _ref4.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);
@@ -266,6 +333,90 @@ function OptionsList(props, forwardedRef) {
     updateActiveId('');
     handleFocusToggle(event);
   }, [handleFocusToggle, updateActiveId]);
+  var positions = [];
+  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),
+        fromGroup = _positions$source$ind[0],
+        fromIndex = _positions$source$ind[1];
+
+    var _positions$destinatio = _slicedToArray(positions[destination.index], 2),
+        toGroup = _positions$destinatio[0],
+        toIndex = _positions$destinatio[1];
+
+    var hasGroups = fromIndex !== undefined || toIndex !== undefined;
+    var fixedGroup = toGroup;
+    var fixedIndex = toIndex;
+
+    if (!hasGroups) {
+      onDragEndProp(fromGroup, toGroup);
+      return;
+    } // when dropping in a header place
+
+
+    if (toIndex === undefined) {
+      if (toGroup === 0) return;
+
+      if (fromGroup >= toGroup) {
+        // it is actually aiming to the last position of previous group
+        var _positions = _slicedToArray(positions[destination.index - 1], 2);
+
+        fixedGroup = _positions[0];
+        fixedIndex = _positions[1];
+        fixedIndex += 1;
+      } else {
+        // aiming for the first position of the group
+        fixedIndex = 0;
+      }
+    } else if (fromGroup < toGroup) fixedIndex += 1;
+
+    onDragEndProp([fromGroup, fromIndex], [fixedGroup, fixedIndex]);
+  }, [onDragEndProp, positions]);
+
+  var _useConfig = (0, _ConfigProvider.useConfig)(),
+      createPortal = _useConfig.createPortal; // Warn developers if they try to use both features
+
+
+  (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);
+    return _react.default.createElement(_reactBeautifulDnd.Draggable, {
+      key: id,
+      draggableId: id,
+      index: index,
+      isDragDisabled: !isDragEnabled
+    }, function (provided, snapshot) {
+      var draggableElement = _react.default.createElement(_Option.default, _extends({}, item, {
+        id: id,
+        borderRadius: borderRadius,
+        showCheckbox: showCheckbox,
+        size: size,
+        isDragEnabled: isDragEnabled,
+        providerRef: provided.innerRef,
+        draggableProps: provided.draggableProps,
+        dragHandleProps: provided.dragHandleProps
+      }));
+
+      if (snapshot.isDragging) {
+        return createPortal(draggableElement);
+      }
+
+      return draggableElement;
+    });
+  };
+
+  var dndIndex = 0;
   return _react.default.createElement(_context.OptionsListContextProvider, {
     value: {
       toggleItemSelection: toggleItemSelection,
@@ -281,7 +432,9 @@ function OptionsList(props, forwardedRef) {
       itemRole: itemRole,
       pointerEvents: pointerEvents
     }
-  }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(Container, {
+  }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(_reactBeautifulDnd.DragDropContext, {
+    onDragEnd: onDragEnd
+  }, useVirtualization ? _react.default.createElement(_styles2.Container, {
     "aria-activedescendant": activeId,
     "aria-multiselectable": !!multiple,
     ref: setContainerRefFunc,
@@ -296,24 +449,79 @@ function OptionsList(props, forwardedRef) {
     minWidth: minWidth,
     maxWidth: maxWidth,
     maxHeight: maxHeight
-  }, items.map(function (item) {
-    var id = (0, _utils.getId)(item);
+  }, _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(_styles2.Container, _extends({
+      "aria-activedescendant": activeId,
+      "aria-multiselectable": !!multiple,
+      ref: function ref(el) {
+        setContainerRefFunc(el);
+        droppableProvided.innerRef(el);
+      },
+      onKeyDown: onKeyDown,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onMouseLeave: function onMouseLeave() {
+        return updateActiveId('');
+      },
+      role: role,
+      tabIndex: tabIndex,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      maxHeight: maxHeight
+    }, droppableProvided.droppableProps), isDragEnabled ? items.map(function (item, index) {
+      var id = (0, _utils.getId)(item);
+      var indexOffset = positions.length;
+      positions[dndIndex] = [index];
+      dndIndex += 1;
+
+      if ((0, _utils.isCategory)(item)) {
+        item.items.forEach(function (_, subIndex) {
+          positions[dndIndex] = [index, subIndex];
+          dndIndex += 1;
+        });
+        return _react.default.createElement(_Category.default, _extends({}, item, {
+          key: id,
+          borderRadius: borderRadius,
+          showCheckbox: showCheckbox,
+          size: size,
+          indexOffset: indexOffset,
+          isDragEnabled: isDragEnabled
+        }));
+      }
 
-    if ((0, _utils.isCategory)(item)) {
-      return _react.default.createElement(_Category.default, _extends({}, item, {
+      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
       }));
-    }
-
-    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
   }))));