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

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;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"}

package/lib/atoms/OptionsList/index.js

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Container = void 0;
+Object.defineProperty(exports, "Container", {
+  enumerable: true,
+  get: function get() {
+    return _styles.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"));
 
@@ -27,12 +31,16 @@ 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 _Footer = _interopRequireDefault(require("./Footer"));
 
+var _styles = require("./styles");
+
 var _context = require("./context");
 
 var _utils = require("./utils");
@@ -81,27 +89,12 @@ if (_canUseDOM.default) {
   });
 }
 
-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") : '';
-});
-
-exports.Container = Container;
-
 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,
@@ -168,8 +161,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 (_ref) {
+        var disabled = _ref.disabled;
         return !disabled;
       }) : [item.disabled ? undefined : item]).filter(Boolean)));
     }, []).map(_utils.getId);
@@ -266,6 +259,82 @@ function OptionsList(props, forwardedRef) {
     updateActiveId('');
     handleFocusToggle(event);
   }, [handleFocusToggle, updateActiveId]);
+  var positions = [];
+  var onDragEnd = (0, _react.useCallback)(function (_ref2) {
+    var source = _ref2.source,
+        destination = _ref2.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;
+
+  var isDragEnabled = !!onDragEndProp;
+
+  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,39 +350,52 @@ function OptionsList(props, forwardedRef) {
       itemRole: itemRole,
       pointerEvents: pointerEvents
     }
-  }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(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
-  }, 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
-      }));
-    }
+  }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(Row, null, _react.default.createElement(_reactBeautifulDnd.DragDropContext, {
+    onDragEnd: onDragEnd
+  }, _react.default.createElement(_reactBeautifulDnd.Droppable, {
+    droppableId: "droppable-options-list"
+  }, function (droppableProvided) {
+    return _react.default.createElement(_styles.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), 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
+        }));
+      }
 
-    return _react.default.createElement(_Option.default, _extends({}, item, {
-      key: id,
-      borderRadius: borderRadius,
-      showCheckbox: showCheckbox,
-      size: size
-    }));
+      return renderDraggable(item, dndIndex - 1);
+    }), droppableProvided.placeholder);
   }))), actions && _react.default.createElement(Row, null, _react.default.createElement(_Footer.default, {
     actions: actions
   }))));

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

@@ -385,5 +385,61 @@ describe('OptionsList', function () {
         expect(baseElement).toMatchSnapshot();
       });
     });
+    describe('drag and drop', function () {
+      it('has draggable attributes', function () {
+        var mockedFn = jest.fn();
+
+        var _render12 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: size,
+          onDragEnd: mockedFn
+        }))),
+            getByText = _render12.getByText;
+
+        var item = items[0];
+        expect(getByText(item.label).closest('li')).toHaveAttribute('draggable');
+        var category = items[2];
+        category.items.forEach(function (subItem) {
+          expect(getByText(subItem.label).closest('li')).toHaveAttribute('draggable');
+        });
+      });
+      it('does not have draggable attributes when onDragEnd is not provided', function () {
+        var _render13 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: size
+        }))),
+            getByText = _render13.getByText;
+
+        var item = items[0];
+        expect(getByText(item.label).closest('li')).not.toHaveAttribute('draggable');
+        var category = items[2];
+        category.items.forEach(function (subItem) {
+          expect(getByText(subItem.label).closest('li')).not.toHaveAttribute('draggable');
+        });
+      }); // TODO: re-enable once migrated to pragmatic-drag-and-drop
+
+      it.skip('calls onDragEnd when drag ends', function () {
+        var mockedFn = jest.fn();
+
+        var _render14 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: size,
+          onDragEnd: mockedFn
+        }))),
+            getByText = _render14.getByText;
+
+        var draggableElement = getByText(items[0].label).closest('li');
+        var dropTarget = getByText('Option 2').closest('li');
+
+        _react2.fireEvent.dragStart(draggableElement);
+
+        _react2.fireEvent.dragEnter(dropTarget);
+
+        _react2.fireEvent.dragOver(dropTarget);
+
+        _react2.fireEvent.drop(dropTarget);
+
+        _react2.fireEvent.dragEnd(draggableElement);
+
+        expect(mockedFn).toHaveBeenCalled();
+      });
+    });
   });
 });

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

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

package/lib/atoms/OptionsList/schema.js

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

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

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

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

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

package/lib/atoms/OptionsList/styles.js

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

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

@@ -1,6 +1,7 @@
 import { BorderRadiusProperty } from 'csstype';
 import { KeyboardEvent } from 'react';
 import { IconProps } from '@decisiv/iconix';
+import { DraggableProvidedDragHandleProps, DraggableProvidedDraggableProps } from 'react-beautiful-dnd';
 import { AvatarProps } from '../../components/Avatar';
 import { BadgeProps } from '../../components/Badge';
 import { DimensionsProps } from '../../modifiers/dimensions';
@@ -41,6 +42,8 @@ export interface Category {
     label: string;
     showCheckbox?: boolean;
     size?: Size;
+    indexOffset?: number;
+    isDragEnabled?: boolean;
 }
 export declare type CategoryProps = Category;
 export declare type IconComponent = (props: IconProps) => JSX.Element;
@@ -54,6 +57,10 @@ interface BaseOption {
     showCheckbox?: boolean;
     meta?: Record<any, unknown>;
     size?: Size;
+    providerRef?: React.Ref<HTMLLIElement>;
+    draggableProps?: DraggableProvidedDraggableProps;
+    dragHandleProps?: DraggableProvidedDragHandleProps;
+    isDragEnabled?: boolean;
 }
 export interface ItemOption extends BaseOption {
     value?: string;
@@ -85,10 +92,14 @@ export interface OptionsListProps extends OptionsListDimensions {
     role?: string;
     itemRole?: string;
     pointerEvents?: string;
+    onDragEnd?: (from: number | number[], to: number | number[]) => void;
 }
 export declare type OptionsListContainerRef = HTMLUListElement;
-export interface StyledCategoryProps extends React.LiHTMLAttributes<HTMLLIElement> {
+export interface StyledCategoryProps {
     size: Size;
+    ref?: React.Ref<HTMLLIElement>;
+    ariaDisabled?: boolean;
+    role?: string;
 }
 export interface ContainerProps {
     borderRadius?: BorderRadiusProperty<string>;

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/components/Combobox/index.test.js

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

package/lib/components/Table/Grip.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
-declare const _default: () => JSX.Element;
-export default _default;
+interface GripProps {
+    marginRight?: string | number;
+    selected?: boolean;
+}
+declare const Grip: ({ marginRight, selected }: GripProps) => JSX.Element;
+export default Grip;
 //# sourceMappingURL=Grip.d.ts.map

package/lib/components/Table/Grip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grip.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Grip.tsx"],"names":[],"mappings":";;AAEA,wBAgBE"}
+{"version":3,"file":"Grip.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Grip.tsx"],"names":[],"mappings":";AAEA,UAAU,SAAS;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,IAAI,uDAmBT,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Table/Grip.js

@@ -9,10 +9,15 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = function _default() {
+var Grip = function Grip(_ref) {
+  var marginRight = _ref.marginRight,
+      _ref$selected = _ref.selected,
+      selected = _ref$selected === void 0 ? false : _ref$selected;
+  var fillColor = selected ? '#fff' : '#1C6EE6';
   return _react.default.createElement("svg", {
     style: {
-      margin: '0 5px'
+      margin: '0 5px',
+      marginRight: marginRight
     },
     xmlns: "http://www.w3.org/2000/svg",
     width: "8",
@@ -23,8 +28,9 @@ var _default = function _default() {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M2 0.75C1.30964 0.75 0.75 1.30964 0.75 2C0.75 2.69036 1.30964 3.25 2 3.25C2.69036 3.25 3.25 2.69036 3.25 2C3.25 1.30964 2.69036 0.75 2 0.75ZM2 4.75C1.30964 4.75 0.75 5.30964 0.75 6C0.75 6.69036 1.30964 7.25 2 7.25C2.69036 7.25 3.25 6.69036 3.25 6C3.25 5.30964 2.69036 4.75 2 4.75ZM0.75 10C0.75 9.30964 1.30964 8.75 2 8.75C2.69036 8.75 3.25 9.30964 3.25 10C3.25 10.6904 2.69036 11.25 2 11.25C1.30964 11.25 0.75 10.6904 0.75 10ZM6 4.75C5.30964 4.75 4.75 5.30964 4.75 6C4.75 6.69036 5.30964 7.25 6 7.25C6.69036 7.25 7.25 6.69036 7.25 6C7.25 5.30964 6.69036 4.75 6 4.75ZM4.75 2C4.75 1.30964 5.30964 0.75 6 0.75C6.69036 0.75 7.25 1.30964 7.25 2C7.25 2.69036 6.69036 3.25 6 3.25C5.30964 3.25 4.75 2.69036 4.75 2ZM6 8.75C5.30964 8.75 4.75 9.30964 4.75 10C4.75 10.6904 5.30964 11.25 6 11.25C6.69036 11.25 7.25 10.6904 7.25 10C7.25 9.30964 6.69036 8.75 6 8.75ZM0.75 14C0.75 13.3096 1.30964 12.75 2 12.75C2.69036 12.75 3.25 13.3096 3.25 14C3.25 14.6904 2.69036 15.25 2 15.25C1.30964 15.25 0.75 14.6904 0.75 14ZM6 12.75C5.30964 12.75 4.75 13.3096 4.75 14C4.75 14.6904 5.30964 15.25 6 15.25C6.69036 15.25 7.25 14.6904 7.25 14C7.25 13.3096 6.69036 12.75 6 12.75Z",
-    fill: "#1C6EE6"
+    fill: fillColor
   }));
 };
 
+var _default = Grip;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.221",
+  "version": "2.0.1-alpha.222",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",