FEATURE: Make MultiSelectBox drag&drop sorting feature optional

packages/react-ui-components/src/MultiSelectBox/multiSelectBox.js

@@ -31,6 +31,11 @@ class MultiSelectBox extends PureComponent {
          */
         disabled: PropTypes.bool,
 
+        /**
+         * Allows dragging.
+         */
+        allowDragging: PropTypes.bool,
+
         /**
          * Additional className wich will be applied
          */
@@ -165,6 +170,7 @@ class MultiSelectBox extends PureComponent {
         optionValueField: 'value',
         dndType: 'multiselect-box-value',
         allowEmpty: true,
+        allowDragging: true,
         ListPreviewElement: SelectBox_Option_SingleLine
     }
 

packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js

@@ -31,6 +31,7 @@ export default class MultiSelectBox_ListPreviewSortable extends PureComponent {
         values: PropTypes.arrayOf(PropTypes.string),
         onValuesChange: PropTypes.func.isRequired,
         ListPreviewElement: PropTypes.any.isRequired,
+        allowDragging: PropTypes.bool,
 
         // API with MultiSelectBox
         optionValueAccessor: PropTypes.func.isRequired

packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable_DraggableListPreviewElement/multiSelectBox_ListPreviewSortable_DraggableListPreviewElement.js

@@ -48,8 +48,8 @@ const spec = {
             index: props.index
         };
     },
-    canDrag({values, disabled}) {
-        return !disabled && (values && values.length > 1);
+    canDrag({values, disabled, allowDragging}) {
+        return allowDragging && !disabled && (values && values.length > 1);
     }
 }, (connect, monitor) => ({
     connectDragSource: connect.dragSource(),
@@ -65,6 +65,7 @@ export default class MultiSelectBox_ListPreviewSortable_DraggableListPreviewElem
         }),
         values: PropTypes.arrayOf(PropTypes.string),
         disabled: PropTypes.bool,
+        allowDragging: PropTypes.bool,
 
         // Drag&Drop specific propTypes
         dndType: PropTypes.string.isRequired,
@@ -103,6 +104,7 @@ export default class MultiSelectBox_ListPreviewSortable_DraggableListPreviewElem
         const {
             option,
             disabled,
+            allowDragging,
             connectDragSource,
             connectDropTarget,
             isDragging,
@@ -117,7 +119,7 @@ export default class MultiSelectBox_ListPreviewSortable_DraggableListPreviewElem
 
         // TODO Loading State: const {icon, label} = option || {label: `[Loading ${value}]`};
 
-        const isDraggable = !disabled && (values && values.length > 1);
+        const isDraggable = allowDragging && !disabled && (values && values.length > 1);
 
         const finalClassNames = mergeClassNames({
             [theme.selectedOptions__item]: true,