@rio-cloud/rio-uikit 0.16.0 → 0.16.1-beta-1

package/lib/components/table/TableSettingsColumnButtons.js

@@ -19,7 +19,7 @@ var TableSettingsColumnButtons = function TableSettingsColumnButtons(props) {
       columnDetails = props.columnDetails,
       columnOrder = props.columnOrder,
       openColumnsDetails = props.openColumnsDetails,
-      columnSearchValue = props.columnSearchValue,
+      disabled = props.disabled,
       onMoveColumn = props.onMoveColumn,
       onOpenDetails = props.onOpenDetails;
   var navButtonBase = (0, _classnames.default)('btn btn-muted btn-icon-only btn-sm');
@@ -28,7 +28,7 @@ var TableSettingsColumnButtons = function TableSettingsColumnButtons(props) {
   var toggleIconClassNames = (0, _classnames.default)('rioglyph', openColumnsDetails[column] ? 'rioglyph-remove' : 'rioglyph-width');
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "table-settings-item-item-buttons"
-  }, !columnSearchValue && /*#__PURE__*/_react.default.createElement("div", {
+  }, !disabled && /*#__PURE__*/_react.default.createElement("div", {
     className: columnUpClasses,
     onClick: function onClick(event) {
       event.preventDefault();
@@ -36,8 +36,8 @@ var TableSettingsColumnButtons = function TableSettingsColumnButtons(props) {
       onMoveColumn(column, index - 1, true);
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-arrow-up'
-  })), !columnSearchValue && /*#__PURE__*/_react.default.createElement("div", {
+    className: "rioglyph rioglyph-arrow-up"
+  })), !disabled && /*#__PURE__*/_react.default.createElement("div", {
     className: columnDownClasses,
     onClick: function onClick(event) {
       event.preventDefault();
@@ -45,7 +45,7 @@ var TableSettingsColumnButtons = function TableSettingsColumnButtons(props) {
       onMoveColumn(column, index + 1, true);
     }
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-arrow-down'
+    className: "rioglyph rioglyph-arrow-down"
   })), columnDetails && /*#__PURE__*/_react.default.createElement("div", {
     className: navButtonBase,
     onClick: function onClick() {
@@ -74,7 +74,8 @@ TableSettingsColumnButtons.propTypes = {
   index: _propTypes.default.number.isRequired,
   columnOrder: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
   openColumnsDetails: _propTypes.default.object.isRequired,
-  columnSearchValue: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  columnDetails: _propTypes.default.object,
   onMoveColumn: _propTypes.default.func,
   onOpenDetails: _propTypes.default.func
 };

package/lib/components/table/TableSettingsColumnDetails.js

@@ -2,26 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableSettingsColumnDetails = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -29,96 +15,66 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Slider = _interopRequireDefault(require("../slider/Slider"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var TableSettingsColumnDetails = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(TableSettingsColumnDetails, _Component);
-
-  var _super = _createSuper(TableSettingsColumnDetails);
-
-  function TableSettingsColumnDetails(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, TableSettingsColumnDetails);
-    _this = _super.call(this, props);
-    _this.handleColumnWidthChange = _this.handleColumnWidthChange.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleWidthInputChange = _this.handleWidthInputChange.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleResetColumnWidth = _this.handleResetColumnWidth.bind((0, _assertThisInitialized2.default)(_this));
-    return _this;
-  }
-
-  (0, _createClass2.default)(TableSettingsColumnDetails, [{
-    key: "handleWidthInputChange",
-    value: function handleWidthInputChange(event) {
-      var parsedValue = event.target.value ? parseInt(event.target.value, 10) : 0;
-      var max = this.props.maxWidth || this.props.maxColumnWidth;
-      var value = Math.min(parsedValue, max);
-      this.props.onColumnWidthChange(this.props.column, value);
-    }
-  }, {
-    key: "handleColumnWidthChange",
-    value: function handleColumnWidthChange(value) {
-      this.props.onColumnWidthChange(this.props.column, value);
-    }
-  }, {
-    key: "handleResetColumnWidth",
-    value: function handleResetColumnWidth() {
-      this.props.onResetColumnWidth(this.props.column);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          _this$props$width = _this$props.width,
-          width = _this$props$width === void 0 ? 0 : _this$props$width,
-          _this$props$defaultWi = _this$props.defaultWidth,
-          defaultWidth = _this$props$defaultWi === void 0 ? 0 : _this$props$defaultWi,
-          maxWidth = _this$props.maxWidth,
-          maxColumnWidth = _this$props.maxColumnWidth;
-      var resetWidthButtonClassNames = (0, _classnames.default)('btn', 'btn-muted', 'btn-icon-only', 'btn-sm', 'margin-left-10', width === defaultWidth && 'disabled');
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: 'table-settings-item-body'
-      }, /*#__PURE__*/_react.default.createElement(_Slider.default, {
-        className: "margin-bottom-0",
-        value: width,
-        minValue: 0,
-        maxValue: maxWidth || maxColumnWidth,
-        step: 1,
-        onChange: this.handleColumnWidthChange
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: resetWidthButtonClassNames,
-        role: "button",
-        onClick: this.handleResetColumnWidth
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: 'rioglyph rioglyph-revert'
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: 'column-width-input'
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: 'input-group'
-      }, /*#__PURE__*/_react.default.createElement("input", {
-        className: 'form-control text-right padding-right-5 no-controls',
-        type: 'number',
-        value: width || '',
-        min: 0,
-        max: maxWidth || maxColumnWidth,
-        onChange: this.handleWidthInputChange
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: 'input-group-addon'
-      }, 'px'))));
-    }
-  }]);
-  return TableSettingsColumnDetails;
-}(_react.Component);
+var TableSettingsColumnDetails = function TableSettingsColumnDetails(props) {
+  var _props$width = props.width,
+      width = _props$width === void 0 ? 0 : _props$width,
+      _props$defaultWidth = props.defaultWidth,
+      defaultWidth = _props$defaultWidth === void 0 ? 0 : _props$defaultWidth,
+      maxWidth = props.maxWidth,
+      maxColumnWidth = props.maxColumnWidth,
+      column = props.column,
+      onColumnWidthChange = props.onColumnWidthChange,
+      onResetColumnWidth = props.onResetColumnWidth;
+
+  var handleWidthInputChange = function handleWidthInputChange(event) {
+    var parsedValue = event.target.value ? parseInt(event.target.value, 10) : 0;
+    var max = maxWidth || maxColumnWidth;
+    var value = Math.min(parsedValue, max);
+    onColumnWidthChange(column, value);
+  };
+
+  var handleColumnWidthChange = function handleColumnWidthChange(value) {
+    return onColumnWidthChange(column, value);
+  };
+
+  var handleResetColumnWidth = function handleResetColumnWidth() {
+    return onResetColumnWidth(column);
+  };
+
+  var resetWidthButtonClassNames = (0, _classnames.default)('btn', 'btn-muted', 'btn-icon-only', 'btn-sm', 'margin-left-10', width === defaultWidth && 'disabled');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "table-settings-item-body"
+  }, /*#__PURE__*/_react.default.createElement(_Slider.default, {
+    className: "margin-bottom-0",
+    value: width,
+    minValue: 0,
+    maxValue: maxWidth || maxColumnWidth,
+    step: 1,
+    onChange: handleColumnWidthChange
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: resetWidthButtonClassNames,
+    role: "button",
+    onClick: handleResetColumnWidth
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-revert"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "column-width-input"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "input-group"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    className: "form-control text-right padding-right-5 no-controls",
+    type: "number",
+    value: width || '',
+    min: 0,
+    max: maxWidth || maxColumnWidth,
+    onChange: handleWidthInputChange
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "input-group-addon"
+  }, "px"))));
+};
 
 exports.TableSettingsColumnDetails = TableSettingsColumnDetails;
 TableSettingsColumnDetails.defaultProps = {
-  //alias: '',
   onColumnWidthChange: function onColumnWidthChange() {
     return undefined;
   },
@@ -132,7 +88,6 @@ TableSettingsColumnDetails.propTypes = {
   defaultWidth: _propTypes.default.number,
   maxWidth: _propTypes.default.number,
   maxColumnWidth: _propTypes.default.number.isRequired,
-  //alias: PropTypes.string,
   onColumnWidthChange: _propTypes.default.func,
   onResetColumnWidth: _propTypes.default.func
 };

package/lib/components/table/TableSettingsDialog.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -43,7 +41,7 @@ var _mapValues = _interopRequireDefault(require("lodash/fp/mapValues"));
 
 var _some = _interopRequireDefault(require("lodash/fp/some"));
 
-var _arrayMove = _interopRequireDefault(require("../../utils/arrayMove"));
+var _sortable = require("@dnd-kit/sortable");
 
 var _Dialog = _interopRequireDefault(require("../dialog/Dialog"));
 
@@ -55,6 +53,8 @@ var _TableSettingsListContainer = require("./TableSettingsListContainer");
 
 var _TableSettingsListItem = require("./TableSettingsListItem");
 
+var _tableSettingsPropTypes = require("./tableSettingsPropTypes");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -87,7 +87,7 @@ var TableSettingsDialog = /*#__PURE__*/function (_PureComponent) {
       hasChanged: false,
       movedColumn: false,
       columnsDetails: props.columnsDetails,
-      columnLabelStrings: [],
+      columnLabelStrings: {},
       updateColumnLabelStrings: true,
       openColumnsDetails: {}
     };
@@ -401,16 +401,23 @@ var TableSettingsDialog = /*#__PURE__*/function (_PureComponent) {
     }
   }, {
     key: "handleSortEnd",
-    value: function handleSortEnd(_ref) {
-      var oldIndex = _ref.oldIndex,
-          newIndex = _ref.newIndex;
+    value: function handleSortEnd(event) {
+      var active = event.active,
+          over = event.over;
+
+      if (active.id === over.id) {
+        return;
+      }
+
       var _this$props7 = this.props,
           immediateChange = _this$props7.immediateChange,
           onColumnChange = _this$props7.onColumnChange;
       var _this$state4 = this.state,
           columnOrder = _this$state4.columnOrder,
           hiddenColumns = _this$state4.hiddenColumns;
-      var newColumnOrder = (0, _arrayMove.default)(columnOrder, oldIndex, newIndex);
+      var oldIndex = columnOrder.indexOf(active.id);
+      var newIndex = columnOrder.indexOf(over.id);
+      var newColumnOrder = (0, _sortable.arrayMove)(columnOrder, oldIndex, newIndex);
       this.setState(function () {
         return {
           columnOrder: newColumnOrder,
@@ -427,7 +434,7 @@ var TableSettingsDialog = /*#__PURE__*/function (_PureComponent) {
     key: "renderNotFoundMessage",
     value: function renderNotFoundMessage(message) {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: 'text-center text-color-gray'
+        className: "text-center text-color-gray"
       }, message);
     }
   }, {
@@ -445,7 +452,6 @@ var TableSettingsDialog = /*#__PURE__*/function (_PureComponent) {
           columnOrder = _this$state5.columnOrder,
           _this$state5$hiddenCo = _this$state5.hiddenColumns,
           hiddenColumns = _this$state5$hiddenCo === void 0 ? [] : _this$state5$hiddenCo,
-          movedColumn = _this$state5.movedColumn,
           columnSearchValue = _this$state5.columnSearchValue,
           columnsDetails = _this$state5.columnsDetails,
           openColumnsDetails = _this$state5.openColumnsDetails,
@@ -457,13 +463,11 @@ var TableSettingsDialog = /*#__PURE__*/function (_PureComponent) {
         disabledColumns: disabledColumns,
         columnOrder: columnOrder,
         hiddenColumns: hiddenColumns,
-        movedColumn: movedColumn,
         columnSearchValue: columnSearchValue,
         columnsDetails: columnsDetails,
         columnLabelStrings: columnLabelStrings,
         openColumnsDetails: openColumnsDetails,
         updateColumnLabelStrings: updateColumnLabelStrings,
-        notFoundMessage: notFoundMessage,
         onMoveColumn: this.moveColumnToIndex,
         onOpenDetails: this.handleOpenColumnsDetails,
         onColumnWidthChange: this.handleColumnWidthChange,
@@ -479,27 +483,24 @@ var TableSettingsDialog = /*#__PURE__*/function (_PureComponent) {
           return _this2.contentRef = node;
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: 'table-settings-search'
+        className: "table-settings-search"
       }, /*#__PURE__*/_react.default.createElement("div", {
-        className: 'input-group width-100pct'
+        className: "input-group width-100pct"
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: 'input-group-addon'
+        className: "input-group-addon"
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: 'rioglyph rioglyph-search'
+        className: "rioglyph rioglyph-search"
       })), /*#__PURE__*/_react.default.createElement(_ClearableInput.default, {
         value: columnSearchValue,
         onChange: this.handleSearchChange,
         placeholder: searchPlaceholder
       }))), /*#__PURE__*/_react.default.createElement("div", {
-        className: 'table-settings-body'
-      }, hasItems ? /*#__PURE__*/_react.default.createElement(_TableSettingsListContainer.TableSettingsListContainerSortable, (0, _extends2.default)({
+        className: "table-settings-body"
+      }, hasItems ? /*#__PURE__*/_react.default.createElement(_TableSettingsListContainer.TableSettingsListContainer, {
         items: columnOrder,
         onSortEnd: this.handleSortEnd,
-        lockAxis: 'y',
-        useDragHandle: true,
-        helperClass: 'table-settings-item shadow-smooth-to-bottom z-index-max',
-        isSortable: !(0, _isNil.default)(columnSearchValue) && !(0, _isEmpty.default)(columnSearchValue)
-      }, itemProps)) : this.renderNotFoundMessage(notFoundMessage)));
+        itemProps: _objectSpread({}, itemProps)
+      }) : this.renderNotFoundMessage(notFoundMessage)));
     }
   }, {
     key: "renderTableSettingsDialogFooter",
@@ -570,13 +571,6 @@ TableSettingsDialog.defaultProps = {
   notFoundMessage: '',
   autoLabel: ''
 };
-
-var columnsDetailsPropTypes = _propTypes.default.objectOf(_propTypes.default.shape({
-  width: _propTypes.default.number,
-  defaultWidth: _propTypes.default.number,
-  maxWidth: _propTypes.default.number
-}));
-
 TableSettingsDialog.propTypes = {
   show: _propTypes.default.bool.isRequired,
   title: _propTypes.default.node.isRequired,
@@ -591,8 +585,8 @@ TableSettingsDialog.propTypes = {
   // hide a sorted column will result in an error, so disable at least one important fallback column
   // or the sorted column (fallback column recommended)
   disabledColumns: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
-  columnsDetails: columnsDetailsPropTypes,
-  defaultColumnDetails: columnsDetailsPropTypes,
+  columnsDetails: _tableSettingsPropTypes.columnsDetailsPropTypes,
+  defaultColumnDetails: _tableSettingsPropTypes.columnsDetailsPropTypes,
   autoLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   // TODO Document this prop
   applyButtonText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),

package/lib/components/table/TableSettingsDialogFooter.js

@@ -29,36 +29,36 @@ var TableSettingsDialogFooter = function TableSettingsDialogFooter(props) {
       onApplyChanges = props.onApplyChanges;
   var restButtonClassNames = (0, _classnames.default)('btn', 'btn-link', !hasChanged && 'disabled');
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'pull-left'
+    className: "pull-left"
   }, !isResetAll && /*#__PURE__*/_react.default.createElement("div", {
     className: restButtonClassNames,
     onClick: onResetColumnChanges
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-revert text-size-xs margin-right-10'
+    className: "rioglyph rioglyph-revert text-size-xs margin-right-10"
   }), resetButtonText), isResetAll && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'btn-group'
+    className: "btn-group"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'btn btn-icon-only btn-default margin-right-5 btn-outline',
+    className: "btn btn-icon-only btn-default margin-right-5 btn-outline",
     onClick: onCancelResetColumnChanges
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-remove'
+    className: "rioglyph rioglyph-remove"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'btn btn-primary btn-icon-only',
+    className: "btn btn-primary btn-icon-only",
     onClick: onConfirmResetColumnChanges
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-ok'
+    className: "rioglyph rioglyph-ok"
   })))), immediateChange ? /*#__PURE__*/_react.default.createElement("div", {
-    className: 'pull-right'
+    className: "pull-right"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'btn btn-default',
+    className: "btn btn-default",
     onClick: onHide
   }, closeButtonText)) : /*#__PURE__*/_react.default.createElement("div", {
-    className: 'pull-right'
+    className: "pull-right"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'btn btn-default',
+    className: "btn btn-default",
     onClick: onDiscardChanges
   }, cancelButtonText), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'btn btn-primary',
+    className: "btn btn-primary",
     onClick: onApplyChanges
   }, applyButtonText)));
 };
@@ -96,5 +96,7 @@ TableSettingsDialogFooter.propTypes = {
   onHide: _propTypes.default.func,
   onResetColumnChanges: _propTypes.default.func,
   onDiscardChanges: _propTypes.default.func,
-  onApplyChanges: _propTypes.default.func
+  onApplyChanges: _propTypes.default.func,
+  onConfirmResetColumnChanges: _propTypes.default.func,
+  onCancelResetColumnChanges: _propTypes.default.func
 };

package/lib/components/table/TableSettingsListContainer.js

@@ -2,47 +2,82 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableSettingsListContainerSortable = exports.TableSettingsListContainer = void 0;
+exports.TableSettingsListContainer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
+var _core = require("@dnd-kit/core");
 
-var _reactSortableHoc = require("react-sortable-hoc");
+var _sortable = require("@dnd-kit/sortable");
+
+var _modifiers = require("@dnd-kit/modifiers");
 
 var _TableSettingsListItem = _interopRequireDefault(require("./TableSettingsListItem"));
 
-var _excluded = ["items", "columnOrder", "onSortEnd", "lockAxis", "helperClass", "columnSearchValue", "isSortable"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/* eslint-disable new-cap */
+
+/* eslint-disable no-unused-vars */
 var TableSettingsListContainer = function TableSettingsListContainer(props) {
   var items = props.items,
-      columnOrder = props.columnOrder,
       onSortEnd = props.onSortEnd,
-      lockAxis = props.lockAxis,
-      helperClass = props.helperClass,
-      columnSearchValue = props.columnSearchValue,
-      isSortable = props.isSortable,
-      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+      itemProps = props.itemProps;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activeDraggedColumn = _useState2[0],
+      setActiveDraggedColumn = _useState2[1];
+
+  var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
+    coordinateGetter: _sortable.sortableKeyboardCoordinates
+  }));
+  var handleDragStart = (0, _react.useCallback)(function (event) {
+    setActiveDraggedColumn(event.active.id);
+  }, []);
+  var handleDragEnd = (0, _react.useCallback)(function (event) {
+    setActiveDraggedColumn(null);
+    onSortEnd(event);
+  }, []);
+  var activeClass = 'table-settings-item shadow-smooth-to-bottom z-index-max';
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: 'table-settings-items-container'
+    className: "table-settings-items-container"
+  }, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
+    modifiers: [_modifiers.restrictToVerticalAxis],
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
+    items: items,
+    sensors: sensors,
+    collisionDetection: _core.closestCenter,
+    strategy: _sortable.rectSortingStrategy
   }, items.map(function (column, index) {
     return /*#__PURE__*/_react.default.createElement(_TableSettingsListItem.default, (0, _extends2.default)({
       key: column,
       index: index,
-      value: column,
+      column: column,
       orderIndex: index,
-      columnOrder: columnOrder,
-      columnSearchValue: columnSearchValue,
-      disabled: isSortable
-    }, remainingProps));
-  }));
+      className: activeDraggedColumn === column ? activeClass : ''
+    }, itemProps));
+  }))));
 };
 
 exports.TableSettingsListContainer = TableSettingsListContainer;
-var TableSettingsListContainerSortable = (0, _reactSortableHoc.SortableContainer)(TableSettingsListContainer);
-exports.TableSettingsListContainerSortable = TableSettingsListContainerSortable;
+TableSettingsListContainer.propTypes = {
+  items: _propTypes.default.arrayOf(_propTypes.default.string),
+  onSortEnd: _propTypes.default.func,
+  itemProps: _propTypes.default.object
+};

package/lib/components/table/TableSettingsListItem.js

@@ -11,9 +11,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _reactSortableHoc = require("react-sortable-hoc");
+var _sortable = require("@dnd-kit/sortable");
+
+var _utilities = require("@dnd-kit/utilities");
+
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
 
 var _Checkbox = _interopRequireDefault(require("../checkbox/Checkbox"));
 
@@ -23,6 +29,8 @@ var _TableSettingsColumnDetails = require("./TableSettingsColumnDetails");
 
 var _TableSettingsColumnButtons = require("./TableSettingsColumnButtons");
 
+var _tableSettingsPropTypes = require("./tableSettingsPropTypes");
+
 /* eslint-disable new-cap */
 var MAX_COLUMN_WIDTH = 1000;
 
@@ -39,22 +47,14 @@ var filterColumns = function filterColumns(searchValue) {
 };
 
 exports.filterColumns = filterColumns;
-var SettingsItemLabel = (0, _reactSortableHoc.SortableHandle)(function (_ref) {
-  var column = _ref.column,
-      columnLabels = _ref.columnLabels,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "table-settings-item-label ".concat(className),
-    "data-key": column
-  }, columnLabels[column]);
-});
-var TableSettingsListItem = (0, _reactSortableHoc.SortableElement)(function (props) {
-  var column = props.value,
+
+var TableSettingsListItem = function TableSettingsListItem(props) {
+  var column = props.column,
       orderIndex = props.orderIndex,
       columnLabels = props.columnLabels,
       autoLabel = props.autoLabel,
-      disabledColumns = props.disabledColumns,
+      _props$disabledColumn = props.disabledColumns,
+      disabledColumns = _props$disabledColumn === void 0 ? [] : _props$disabledColumn,
       columnOrder = props.columnOrder,
       _props$hiddenColumns = props.hiddenColumns,
       hiddenColumns = _props$hiddenColumns === void 0 ? [] : _props$hiddenColumns,
@@ -67,20 +67,39 @@ var TableSettingsListItem = (0, _reactSortableHoc.SortableElement)(function (pro
       onResetColumnWidth = props.onResetColumnWidth,
       onMoveColumn = props.onMoveColumn,
       onOpenDetails = props.onOpenDetails,
-      onToggleHideColumn = props.onToggleHideColumn; // Filter out items which don't match the search value.
+      onToggleHideColumn = props.onToggleHideColumn,
+      className = props.className;
+  var isSortingDisabled = !(0, _isEmpty.default)(columnSearchValue);
+
+  var _useSortable = (0, _sortable.useSortable)({
+    id: column,
+    disabled: isSortingDisabled
+  }),
+      attributes = _useSortable.attributes,
+      listeners = _useSortable.listeners,
+      setNodeRef = _useSortable.setNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition;
+
+  var style = {
+    transform: _utilities.CSS.Transform.toString(transform),
+    transition: transition
+  }; // Filter out items which don't match the search value.
   // Note that we need to render all items at least once at the beginning in order to get their DOM lables
   // otherwise the search won't work when initial search value is provided via props.
 
   var isFiltered = filterColumns(columnSearchValue, column, columnLabelStrings) && !updateColumnLabelStrings;
-  var itemClassNames = (0, _classnames.default)('table-settings-item', updateColumnLabelStrings && 'opacity-0', isFiltered && 'position-offscreen');
+  var itemClassNames = (0, _classnames.default)('table-settings-item', updateColumnLabelStrings && 'opacity-0', isFiltered && 'position-offscreen', className);
   var columnDetails = columnsDetails[column];
   return /*#__PURE__*/_react.default.createElement("div", {
     className: itemClassNames,
-    key: "table-settings-item-".concat(column)
+    key: "table-settings-item-".concat(column),
+    ref: setNodeRef,
+    style: style
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'table-settings-item-header'
+    className: "table-settings-item-header user-select-none"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'CheckboxWrapper display-flex align-items-center padding-left-2'
+    className: "CheckboxWrapper display-flex align-items-center padding-left-2"
   }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
     checked: !hiddenColumns.includes(column),
     onClick: function onClick(event) {
@@ -88,19 +107,18 @@ var TableSettingsListItem = (0, _reactSortableHoc.SortableElement)(function (pro
       event.stopPropagation();
     },
     disabled: disabledColumns.includes(column)
-  })), /*#__PURE__*/_react.default.createElement(SettingsItemLabel, {
-    column: column,
-    columnLabels: columnLabels,
-    className: columnSearchValue && 'no-drag'
-  }), columnDetails && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'column-width-label'
+  })), /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: "table-settings-item-label ".concat(isSortingDisabled ? 'no-drag' : ''),
+    "data-key": column
+  }, attributes, listeners), columnLabels[column]), columnDetails && /*#__PURE__*/_react.default.createElement("div", {
+    className: "column-width-label"
   }, columnDetails.width ? "".concat(columnDetails.width, "px") : autoLabel), /*#__PURE__*/_react.default.createElement(_TableSettingsColumnButtons.TableSettingsColumnButtons, {
     column: column,
     index: orderIndex,
     columnDetails: columnDetails,
     columnOrder: columnOrder,
     openColumnsDetails: openColumnsDetails,
-    columnSearchValue: columnSearchValue,
+    disabled: isSortingDisabled,
     onMoveColumn: onMoveColumn,
     onOpenDetails: onOpenDetails
   })), columnDetails && /*#__PURE__*/_react.default.createElement(_Collapse.default, {
@@ -111,6 +129,27 @@ var TableSettingsListItem = (0, _reactSortableHoc.SortableElement)(function (pro
     onColumnWidthChange: onColumnWidthChange,
     onResetColumnWidth: onResetColumnWidth
   })))));
-});
+};
+
+TableSettingsListItem.propTypes = {
+  column: _propTypes.default.string,
+  orderIndex: _propTypes.default.number,
+  columnLabels: _propTypes.default.object,
+  autoLabel: _propTypes.default.string,
+  disabledColumns: _propTypes.default.arrayOf(_propTypes.default.string),
+  columnOrder: _propTypes.default.arrayOf(_propTypes.default.string),
+  hiddenColumns: _propTypes.default.arrayOf(_propTypes.default.string),
+  columnSearchValue: _propTypes.default.string,
+  columnsDetails: _tableSettingsPropTypes.columnsDetailsPropTypes,
+  columnLabelStrings: _propTypes.default.object,
+  openColumnsDetails: _propTypes.default.object,
+  updateColumnLabelStrings: _propTypes.default.bool,
+  onColumnWidthChange: _propTypes.default.func,
+  onResetColumnWidth: _propTypes.default.func,
+  onMoveColumn: _propTypes.default.func,
+  onOpenDetails: _propTypes.default.func,
+  onToggleHideColumn: _propTypes.default.func,
+  className: _propTypes.default.string
+};
 var _default = TableSettingsListItem;
 exports.default = _default;

package/lib/components/table/tableSettingsPropTypes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.columnsDetailsPropTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var columnsDetailsPropTypes = _propTypes.default.objectOf(_propTypes.default.shape({
+  width: _propTypes.default.number,
+  defaultWidth: _propTypes.default.number,
+  maxWidth: _propTypes.default.number
+}));
+
+exports.columnsDetailsPropTypes = columnsDetailsPropTypes;

package/lib/style/css/components/AssetTree.less

@@ -167,12 +167,12 @@
     top: 0;
 
     .ApplicationLayoutSidebar:not(.right) & {
-      box-shadow: 5px 5px 5px asset-treebar-shadow-color;
+      box-shadow: 5px 5px 5px @asset-tree-shadow-color;
       left: 0;
     }
 
     .ApplicationLayoutSidebar.right & {
-      box-shadow: -5px 5px 5px asset-treebar-shadow-color;
+      box-shadow: -5px 5px 5px @asset-tree-shadow-color;
       right: 0;
     }
   }

package/lib/style/css/components/Dialog.less

@@ -344,18 +344,20 @@ body {
   }
 
   &.TableSettingsDialog {
-    .modal-body {
-      background: @gray-lightest;
-      padding-left: 0;
-      padding-right: 0;
-
-      @media (max-height: 450px) and (min-width: @screen-sm - 0.1) {
-        max-height: calc(~'100vh - 200px'); // --vh fallback
-        max-height: calc(~'var(--vh, 1vh) * 100 - 200px');
-        overflow-y: auto;
+    .modal-dialog {
+      .modal-content {
+        .modal-body {
+          background: @gray-lightest;
+          padding-left: 0;
+          padding-right: 0;
+
+          @media (max-height: 450px) and (min-width: @screen-sm - 0.1) {
+            max-height: calc(~'100vh - 200px'); // --vh fallback
+            max-height: calc(~'var(--vh, 1vh) * 100 - 200px');
+            overflow-y: auto;
+          }
+        }
       }
-
-      // TableSettings item styles are colocated with the components
     }
   }
 }

package/lib/style/css/components/Dropdown.less

@@ -18,7 +18,6 @@
     padding: 0;
     position: absolute;
     text-align: left;
-    width: 100%;
     z-index: @zindex-dropdown;
 
     // closed by default

package/lib/style/css/components/Select.less

@@ -162,6 +162,7 @@
   .dropdown-menu {
     max-height: @dropdown-max-height;
     overflow-x: hidden;
+    width: 100%; // not on dropdowns, only on selects
 
     svg {
       margin-right: 0.5em;

package/lib/style/css/design/list-group.less

@@ -13,11 +13,16 @@
   transition: all 70ms ease-in-out;
 
   &:first-child {
-    .border-top-radius(@border-radius-default);
+    &:not(.rounded-none) {
+      .border-top-radius(@border-radius-default);
+    }
   }
 
   &:last-child {
-    .border-bottom-radius(@border-radius-default);
+    &:not(.rounded-none) {
+      .border-bottom-radius(@border-radius-default);
+    }
+
     margin-bottom: 0;
   }
 

package/lib/style/fonts/rioglyph/rioglyph.svg

@@ -307,6 +307,12 @@
     <glyph glyph-name="cog-1"
       unicode="&#x63;&#x6F;&#x67;"
       horiz-adv-x="200" d="M186.667 75.764L165.791 78.468C164.173 84.178 162.063 89.15 159.426 93.782L172.496 110.178L150.206 132.454L133.483 119.586C129.187 122.048 124.215 124.158 118.985 125.658L115.761 146.654L84.321 146.667L81.534 125.776C75.817 124.16 70.838 122.049 66.2 119.41L49.824 132.44L27.55 110.147L40.333 93.528C37.808 89.201 35.644 84.197 34.1 78.928L13.348 75.765L13.333 44.325L33.979 41.579C35.572 35.766 37.685 30.694 40.345 25.971L27.48 9.808L49.772 -12.466L66.266 0.194C70.661 -2.341 75.743 -4.501 81.095 -6.023L84.319 -26.647L115.758 -26.667L118.422 -6.016C124.246 -4.361 129.321 -2.188 134.038 0.534L150.214 -12.308L172.488 9.984L159.705 26.478C162.179 30.818 164.29 35.839 165.779 41.122L186.649 44.242L186.667 75.764zM54.61 60.004C54.61 85.071 74.931 105.392 99.999 105.392C125.066 105.392 145.387 85.071 145.387 60.003C145.387 34.936 125.066 14.615 99.999 14.615C74.931 14.615 54.61 34.936 54.61 60.003z" />
+    <glyph glyph-name="color-swatch"
+      unicode="&#xF18E;"
+      horiz-adv-x="200" d="M63.75 133C73.898 133 82.125 124.773 82.125 114.625V13.562C82.125 -1.66 69.785 -14 54.562 -14C39.34 -14 27 -1.66 27 13.563V114.624C27 124.773 35.227 133 45.375 133zM54.562 22.75A9.188 9.188 0 1 1 54.562 4.375A9.188 9.188 0 0 1 54.562 22.75zM155.625 41.125C165.773 41.125 174 32.898 174 22.75V4.375C174 -5.773 165.773 -14 155.625 -14H91.965L147.09 41.125H155.625zM106.536 104.519C113.712 111.692 125.343 111.692 132.518 104.519L145.518 91.519C152.692 84.343 152.692 72.712 145.518 65.536L100.5 20.517V98.483z" />
+    <glyph glyph-name="color-swatch-1"
+      unicode="&#x63;&#x6F;&#x6C;&#x6F;&#x72;&#x2D;&#x73;&#x77;&#x61;&#x74;&#x63;&#x68;"
+      horiz-adv-x="200" d="M63.75 133C73.898 133 82.125 124.773 82.125 114.625V13.562C82.125 -1.66 69.785 -14 54.562 -14C39.34 -14 27 -1.66 27 13.563V114.624C27 124.773 35.227 133 45.375 133zM54.562 22.75A9.188 9.188 0 1 1 54.562 4.375A9.188 9.188 0 0 1 54.562 22.75zM155.625 41.125C165.773 41.125 174 32.898 174 22.75V4.375C174 -5.773 165.773 -14 155.625 -14H91.965L147.09 41.125H155.625zM106.536 104.519C113.712 111.692 125.343 111.692 132.518 104.519L145.518 91.519C152.692 84.343 152.692 72.712 145.518 65.536L100.5 20.517V98.483z" />
     <glyph glyph-name="comment"
       unicode="&#xE111;"
       horiz-adv-x="200" d="M166.667 136C174.03 136 180 130.043 180 122.696V36.217C180 28.87 174.03 22.913 166.667 22.913L85.437 22.914L46.667 -17L46.666 22.914L33.333 22.913C25.97 22.913 20 28.87 20 36.217V122.696C20 130.043 25.97 136 33.333 136H166.667z" />
@@ -373,6 +379,12 @@
     <glyph glyph-name="csv-1"
       unicode="&#x63;&#x73;&#x76;"
       horiz-adv-x="200" d="M117.778 140H46.667V-20H153.333V103.636L117.778 140zM133.578 42.473H123.038L113.308 74.473H122.53L125.976 60.49C126.889 57.095 127.496 53.796 128.409 50.35H128.612C129.524 53.796 130.182 57.095 131.044 60.49L134.389 74.473H143.307L133.577 42.473zM98.1 41.473C93.836 41.473 88.948 42.986 85.308 46.164L90.404 52.117C92.796 50.251 95.812 48.939 98.307 48.939C101.013 48.939 102.157 49.796 102.157 51.259C102.157 52.823 100.439 53.328 97.58 54.438L93.368 56.153C89.728 57.563 86.556 60.54 86.556 65.283C86.556 70.882 91.756 75.473 99.139 75.473C102.989 75.473 107.253 74.06 110.371 71.085L105.899 65.635C103.613 67.199 101.635 68.006 99.139 68.006C96.956 68.006 95.604 67.25 95.604 65.788C95.604 64.223 97.528 63.668 100.597 62.508L104.703 60.945C108.917 59.331 111.308 56.506 111.308 51.965C111.308 46.416 106.523 41.473 98.1 41.473zM71.69 41.473C63.453 41.473 56.307 47.022 56.307 58.221C56.307 69.217 63.751 75.473 71.889 75.473C76.154 75.473 79.628 73.455 81.911 71.134L77.446 65.584C75.858 66.997 74.27 68.006 72.086 68.006C68.316 68.006 65.041 64.475 65.041 58.524C65.041 52.369 67.82 48.939 71.988 48.939C74.468 48.939 76.452 50.251 77.842 51.764L82.308 46.316C79.578 43.086 75.858 41.473 71.69 41.473z" />
+    <glyph glyph-name="currency-euro"
+      unicode="&#xF18F;"
+      horiz-adv-x="200" d="M100 140C144.183 140 180 104.183 180 60S144.183 -20 100 -20S20 15.817 20 60S55.817 140 100 140zM100 120C87.68 120 77.21 112.16 70.21 100.5C67.36 95.75 65.14 90.5 63.51 85H60C54.477 85 50 80.523 50 75S54.477 65 60 65H60.13A93.58 93.58 0 0 1 60.13 55H60C54.477 55 50 50.523 50 45S54.477 35 60 35H63.51C65.14 29.5 67.36 24.25 70.21 19.5C77.21 7.84 87.68 0 100 0S122.79 7.84 129.79 19.5A10 10 0 1 1 112.64 29.79C107.92 21.93 103.04 20 100 20C96.96 20 92.08 21.93 87.36 29.79A42.65 42.65 0 0 0 84.72 35H100C105.523 35 110 39.477 110 45S105.523 55 100 55H80.17A73.6 73.6 0 0 0 80.17 65H100C105.523 65 110 69.477 110 75S105.523 85 100 85H84.72C85.52 86.85 86.39 88.6 87.36 90.21C92.08 98.07 96.96 100 100 100C103.04 100 107.92 98.07 112.64 90.21C115.482 85.474 121.624 83.938 126.36 86.78C131.096 89.622 132.632 95.764 129.79 100.5C122.79 112.16 112.32 120 100 120z" />
+    <glyph glyph-name="currency-euro-1"
+      unicode="&#x63;&#x75;&#x72;&#x72;&#x65;&#x6E;&#x63;&#x79;&#x2D;&#x65;&#x75;&#x72;&#x6F;"
+      horiz-adv-x="200" d="M100 140C144.183 140 180 104.183 180 60S144.183 -20 100 -20S20 15.817 20 60S55.817 140 100 140zM100 120C87.68 120 77.21 112.16 70.21 100.5C67.36 95.75 65.14 90.5 63.51 85H60C54.477 85 50 80.523 50 75S54.477 65 60 65H60.13A93.58 93.58 0 0 1 60.13 55H60C54.477 55 50 50.523 50 45S54.477 35 60 35H63.51C65.14 29.5 67.36 24.25 70.21 19.5C77.21 7.84 87.68 0 100 0S122.79 7.84 129.79 19.5A10 10 0 1 1 112.64 29.79C107.92 21.93 103.04 20 100 20C96.96 20 92.08 21.93 87.36 29.79A42.65 42.65 0 0 0 84.72 35H100C105.523 35 110 39.477 110 45S105.523 55 100 55H80.17A73.6 73.6 0 0 0 80.17 65H100C105.523 65 110 69.477 110 75S105.523 85 100 85H84.72C85.52 86.85 86.39 88.6 87.36 90.21C92.08 98.07 96.96 100 100 100C103.04 100 107.92 98.07 112.64 90.21C115.482 85.474 121.624 83.938 126.36 86.78C131.096 89.622 132.632 95.764 129.79 100.5C122.79 112.16 112.32 120 100 120z" />
     <glyph glyph-name="damages"
       unicode="&#xF12A;"
       horiz-adv-x="200" d="M116.87 153L88.818 98.215L75.959 111.632L72.453 88.153L7 106.043L51.414 64.675L38.559 56.85L59.594 47.905L42.062 17.719L71.285 24.427V-27L95.831 19.956L120.376 -2.405L121.544 26.665L174.142 8.777L135.57 45.671L187 62.441L130.896 75.858L139.076 89.274L119.205 87.037z" />
@@ -807,10 +819,10 @@
       horiz-adv-x="200" d="M96.333 146.667C61.539 146.667 33.333 118.461 33.333 83.667C33.333 38.667 96.333 -33.333 96.333 -33.333S159.333 38.667 159.333 83.667C159.333 118.461 131.127 146.667 96.333 146.667zM96.333 61.167C83.907 61.167 73.833 71.24 73.833 83.667C73.833 96.093 83.907 106.167 96.333 106.167C108.76 106.167 118.833 96.093 118.833 83.667C118.833 71.24 108.76 61.167 96.333 61.167z" />
     <glyph glyph-name="menu-hamburger"
       unicode="&#xE9B2;"
-      horiz-adv-x="200" d="M33 127H166V100.4H33V127zM33 73.8H166V47.2H33V73.8zM33 20.6H166V-6H33V20.6z" />
+      horiz-adv-x="200" d="M33 127H166V100.4H33V127zM33 73.8H96V47.2H33V73.8zM33 20.6H126.1V-6H33V20.6z" />
     <glyph glyph-name="menu-hamburger-1"
       unicode="&#x6D;&#x65;&#x6E;&#x75;&#x2D;&#x68;&#x61;&#x6D;&#x62;&#x75;&#x72;&#x67;&#x65;&#x72;"
-      horiz-adv-x="200" d="M33 127H166V100.4H33V127zM33 73.8H166V47.2H33V73.8zM33 20.6H166V-6H33V20.6z" />
+      horiz-adv-x="200" d="M33 127H166V100.4H33V127zM33 73.8H96V47.2H33V73.8zM33 20.6H126.1V-6H33V20.6z" />
     <glyph glyph-name="merge"
       unicode="&#xF13A;"
       horiz-adv-x="200" d="M186 147H70.866V89.136H13V-26H128.14V31.857H186z" />
@@ -975,10 +987,10 @@
       horiz-adv-x="200" d="M117.778 140L153.333 103.636V-20H46.667V140H117.777zM66.916 78.182H53.778V41.472H63.271V53.11H67.147C74.649 53.11 81.493 57.001 81.493 65.983C81.493 75.256 74.756 78.183 66.916 78.183zM98.026 78.182H87.36V41.472H98.507C108.889 41.472 116.409 47.018 116.409 60S108.889 78.182 98.027 78.182zM146.222 78.182H122.81V41.472H132.303V54.91H144.233V63.055H132.303V70.055H146.223V78.183zM97.404 70.382C102.596 70.382 106.684 68.582 106.684 60C106.684 51.418 102.596 49.273 97.404 49.273H96.854V70.382zM66.471 70.509C70.115 70.509 72.231 69.273 72.231 65.999C72.231 62.727 70.453 60.799 66.702 60.799H63.272V70.509H66.472z" />
     <glyph glyph-name="pencil"
       unicode="&#xE963;"
-      horiz-adv-x="200" d="M108.91 113.333L20.8 25.423L13.333 -26.667L65.541 -19.217L153.333 68.379L108.91 113.333zM31.98 14.247L54.361 -8.062L28.247 -11.787L31.981 14.247zM143.112 146.667L186.667 103.299L163.247 80L120 123.634L143.112 146.667z" />
+      horiz-adv-x="200" d="M140.77 133.034A22.817 22.817 0 1 0 173.034 100.77L163.987 91.723L131.723 123.987L140.77 133.034zM115.592 107.855L20 12.263V-20H52.263L147.867 75.592L115.58 107.855H115.592z" />
     <glyph glyph-name="pencil-1"
       unicode="&#x70;&#x65;&#x6E;&#x63;&#x69;&#x6C;"
-      horiz-adv-x="200" d="M108.91 113.333L20.8 25.423L13.333 -26.667L65.541 -19.217L153.333 68.379L108.91 113.333zM31.98 14.247L54.361 -8.062L28.247 -11.787L31.981 14.247zM143.112 146.667L186.667 103.299L163.247 80L120 123.634L143.112 146.667z" />
+      horiz-adv-x="200" d="M140.77 133.034A22.817 22.817 0 1 0 173.034 100.77L163.987 91.723L131.723 123.987L140.77 133.034zM115.592 107.855L20 12.263V-20H52.263L147.867 75.592L115.58 107.855H115.592z" />
     <glyph glyph-name="phone"
       unicode="&#xE145;"
       horiz-adv-x="200" d="M153.333 140V-26.667H46.667V140H153.333zM100 -6.667A6.667 6.667 0 1 1 100 -20A6.667 6.667 0 0 1 100 -6.667zM140 126.667H60V0H140V126.667z" />
@@ -1473,16 +1485,16 @@
       horiz-adv-x="200" d="M33 73.8H166V47.2H33V73.8zM33 20.6H166V-6H33V20.6zM33 127H166V100.4H33V127z" />
     <glyph glyph-name="thumbs-down"
       unicode="&#xE98F;"
-      horiz-adv-x="200" d="M70.71 130.321C72.254 131.05 73.881 131.778 75.699 132.425C85.304 135.95 97.101 137.965 108.328 139.017L113.096 139.411L117.746 139.696L122.229 139.883L124.394 139.943L128.537 140L132.392 139.982L136.734 139.87L140.457 139.675L142.927 139.472A15.475 15.475 0 0 0 154.032 133.772A22.806 22.806 0 0 0 158.076 119.093L158.811 118.491C159.702 117.711 160.9850000000001 116.416 161.954 114.793C165.0810000000001 110.539 164.6590000000001 107.213 163.06 103.235L162.248 101.347L161.32 99.332L161.988 98.904L163.624 97.762L165.256 96.523L165.805 95.976L166.4190000000001 95.292C169.4190000000001 91.13 170.6160000000001 88.716 169.698 83.342C168.958 80.186 167.728 78.232 166.4740000000001 76.755L165.4050000000001 75.588L164.3910000000001 74.552C163.9080000000001 74.05 163.4700000000001 73.56 163.1130000000001 73.023L164.4230000000001 71.143C167.6830000000001 66.353 170.6310000000001 60.928 168.2170000000001 55.825C165.5730000000001 49.495 157.0650000000001 47.241 149.0820000000001 46.175L146.4490000000001 45.86L141.5100000000001 45.4C139.4380000000001 45.299 137.3750000000001 45.053 135.3400000000001 44.662A9.4 9.4 0 0 1 129.3780000000001 39.235A13.023 13.023 0 0 1 131.1680000000001 27.815A39.254 39.254 0 0 0 136.0120000000001 -3.974C132.977 -14.755 125.625 -20 119.373 -20C118.891 -20 118.401 -19.964 117.919 -19.9A7.959 7.959 0 0 0 110.689 -12.693L110.659 -11.868C110.659 5.697 96.119 28.171 86.312 37.831L85.339 38.761L80.779 42.839C78.577 44.854 76.38 46.618 74.228 48.292L70.446 51.208A62.43 62.43 0 0 0 59.959 50.288A29.41 29.41 0 0 0 38.103 57.791C31.506 65.031 29.143 84.354 30.27 98.868L30.384 100.165L30.705 103.022C31.746 111.045 34.368 121.946 41.057 127.305C45.703 131.028 54.435 131.535 61.387 131.23L64.059 131.07L66.457 130.857L68.499 130.627L70.709 130.321z" />
+      horiz-adv-x="200" d="M27 64.094C27 59.17 29.701 54.621 34.086 52.159A14.52 14.52 0 0 1 48.256 52.159C52.641 54.621 55.342 59.17 55.342 64.094V119.219C55.342 126.829 48.998 133 41.172 133C33.344 133 27 126.83 27 119.219V64.094zM64.79 62.559V112.448C64.786 119.412 68.832 125.78 75.239 128.893L75.711 129.123A38.667 38.667 0 0 0 92.593 133H143.761C152.771 133.003 160.531 126.82 162.296 118.226L173.633 63.101C174.743 57.704 173.306 52.107 169.717 47.851C166.129 43.594 160.767 41.126 155.107 41.125H121.474V4.375C121.474 -5.773 113.014 -14 102.579 -14C97.362 -14 93.132 -9.887 93.132 -4.812V1.316C93.132 9.267 90.48 17.004 85.574 23.366L72.348 40.509C67.442 46.871 64.79 54.608 64.79 62.559z" />
     <glyph glyph-name="thumbs-down-1"
       unicode="&#x74;&#x68;&#x75;&#x6D;&#x62;&#x73;&#x2D;&#x64;&#x6F;&#x77;&#x6E;"
-      horiz-adv-x="200" d="M70.71 130.321C72.254 131.05 73.881 131.778 75.699 132.425C85.304 135.95 97.101 137.965 108.328 139.017L113.096 139.411L117.746 139.696L122.229 139.883L124.394 139.943L128.537 140L132.392 139.982L136.734 139.87L140.457 139.675L142.927 139.472A15.475 15.475 0 0 0 154.032 133.772A22.806 22.806 0 0 0 158.076 119.093L158.811 118.491C159.702 117.711 160.9850000000001 116.416 161.954 114.793C165.0810000000001 110.539 164.6590000000001 107.213 163.06 103.235L162.248 101.347L161.32 99.332L161.988 98.904L163.624 97.762L165.256 96.523L165.805 95.976L166.4190000000001 95.292C169.4190000000001 91.13 170.6160000000001 88.716 169.698 83.342C168.958 80.186 167.728 78.232 166.4740000000001 76.755L165.4050000000001 75.588L164.3910000000001 74.552C163.9080000000001 74.05 163.4700000000001 73.56 163.1130000000001 73.023L164.4230000000001 71.143C167.6830000000001 66.353 170.6310000000001 60.928 168.2170000000001 55.825C165.5730000000001 49.495 157.0650000000001 47.241 149.0820000000001 46.175L146.4490000000001 45.86L141.5100000000001 45.4C139.4380000000001 45.299 137.3750000000001 45.053 135.3400000000001 44.662A9.4 9.4 0 0 1 129.3780000000001 39.235A13.023 13.023 0 0 1 131.1680000000001 27.815A39.254 39.254 0 0 0 136.0120000000001 -3.974C132.977 -14.755 125.625 -20 119.373 -20C118.891 -20 118.401 -19.964 117.919 -19.9A7.959 7.959 0 0 0 110.689 -12.693L110.659 -11.868C110.659 5.697 96.119 28.171 86.312 37.831L85.339 38.761L80.779 42.839C78.577 44.854 76.38 46.618 74.228 48.292L70.446 51.208A62.43 62.43 0 0 0 59.959 50.288A29.41 29.41 0 0 0 38.103 57.791C31.506 65.031 29.143 84.354 30.27 98.868L30.384 100.165L30.705 103.022C31.746 111.045 34.368 121.946 41.057 127.305C45.703 131.028 54.435 131.535 61.387 131.23L64.059 131.07L66.457 130.857L68.499 130.627L70.709 130.321z" />
+      horiz-adv-x="200" d="M27 64.094C27 59.17 29.701 54.621 34.086 52.159A14.52 14.52 0 0 1 48.256 52.159C52.641 54.621 55.342 59.17 55.342 64.094V119.219C55.342 126.829 48.998 133 41.172 133C33.344 133 27 126.83 27 119.219V64.094zM64.79 62.559V112.448C64.786 119.412 68.832 125.78 75.239 128.893L75.711 129.123A38.667 38.667 0 0 0 92.593 133H143.761C152.771 133.003 160.531 126.82 162.296 118.226L173.633 63.101C174.743 57.704 173.306 52.107 169.717 47.851C166.129 43.594 160.767 41.126 155.107 41.125H121.474V4.375C121.474 -5.773 113.014 -14 102.579 -14C97.362 -14 93.132 -9.887 93.132 -4.812V1.316C93.132 9.267 90.48 17.004 85.574 23.366L72.348 40.509C67.442 46.871 64.79 54.608 64.79 62.559z" />
     <glyph glyph-name="thumbs-up"
       unicode="&#xE98E;"
-      horiz-adv-x="200" d="M70.71 -10.321C72.254 -11.05 73.881 -11.778 75.699 -12.425C85.304 -15.95 97.101 -17.965 108.328 -19.017L113.096 -19.411L117.746 -19.696L122.229 -19.883C122.96 -19.907 123.682 -19.927 124.394 -19.943L128.537 -20L132.392 -19.982L135.912 -19.9C136.468 -19.881 137.009 -19.86 137.532 -19.837L140.457 -19.675C140.908 -19.645 141.34 -19.6120000000001 141.752 -19.578L142.927 -19.472A15.475 15.475 0 0 1 154.032 -13.772A22.806 22.806 0 0 1 158.076 0.907C158.812 1.462 160.663 3.0429999999999 161.954 5.207C165.081 9.461 164.659 12.787 163.06 16.765L162.248 18.653L161.32 20.668L161.988 21.0959999999999L163.624 22.2379999999999L164.766 23.0879999999999A22.2 22.2 0 0 1 165.256 23.4769999999999L165.805 24.0239999999999L166.419 24.7079999999999C169.419 28.87 170.616 31.2839999999999 169.698 36.6579999999999C168.958 39.814 167.728 41.7679999999999 166.474 43.245L165.405 44.412L164.391 45.448C163.908 45.9499999999999 163.47 46.44 163.113 46.977L164.423 48.8569999999999C167.683 53.647 170.631 59.072 168.2170000000001 64.1749999999999C165.573 70.5049999999999 157.0650000000001 72.7589999999999 149.0820000000001 73.825L146.4490000000001 74.1399999999999L142.6880000000001 74.4999999999999L141.5100000000001 74.5999999999999A43.891 43.891 0 0 0 135.3400000000001 75.3379999999999A9.4 9.4 0 0 0 129.3780000000001 80.7649999999999A13.023 13.023 0 0 0 131.1680000000001 92.1849999999999A39.254 39.254 0 0 1 136.0120000000001 123.9739999999999C132.977 134.755 125.625 140 119.373 140C118.891 140 118.401 139.964 117.919 139.9A7.959 7.959 0 0 1 110.689 132.693L110.659 131.868C110.659 114.303 96.119 91.829 86.312 82.169L85.339 81.239L80.779 77.161C78.577 75.146 76.38 73.382 74.228 71.708L70.446 68.792A62.43 62.43 0 0 1 59.959 69.712A29.41 29.41 0 0 1 38.103 62.209C31.506 54.969 29.143 35.646 30.27 21.132L30.384 19.835L30.705 16.978C31.746 8.955 34.368 -1.946 41.057 -7.305C45.703 -11.028 54.435 -11.535 61.387 -11.23L64.059 -11.07L66.457 -10.857L68.499 -10.627L70.709 -10.321z" />
+      horiz-adv-x="200" d="M27 54.906C27 59.83 29.701 64.379 34.086 66.841A14.52 14.52 0 0 0 48.256 66.841C52.641 64.379 55.342 59.83 55.342 54.906V-0.219C55.342 -7.829 48.998 -14 41.172 -14C33.344 -14 27 -7.83 27 -0.219V54.906zM64.79 56.441V6.552C64.786 -0.412 68.832 -6.78 75.239 -9.893L75.711 -10.123A38.667 38.667 0 0 1 92.593 -14H143.761C152.771 -14.003 160.531 -7.82 162.296 0.774L173.633 55.899C174.743 61.296 173.306 66.893 169.717 71.149C166.129 75.406 160.767 77.874 155.107 77.875H121.474V114.625C121.474 124.773 113.014 133 102.579 133C97.362 133 93.132 128.887 93.132 123.813V117.684C93.132 109.733 90.48 101.996 85.574 95.634L72.348 78.491C67.442 72.129 64.79 64.392 64.79 56.441z" />
     <glyph glyph-name="thumbs-up-1"
       unicode="&#x74;&#x68;&#x75;&#x6D;&#x62;&#x73;&#x2D;&#x75;&#x70;"
-      horiz-adv-x="200" d="M70.71 -10.321C72.254 -11.05 73.881 -11.778 75.699 -12.425C85.304 -15.95 97.101 -17.965 108.328 -19.017L113.096 -19.411L117.746 -19.696L122.229 -19.883C122.96 -19.907 123.682 -19.927 124.394 -19.943L128.537 -20L132.392 -19.982L135.912 -19.9C136.468 -19.881 137.009 -19.86 137.532 -19.837L140.457 -19.675C140.908 -19.645 141.34 -19.6120000000001 141.752 -19.578L142.927 -19.472A15.475 15.475 0 0 1 154.032 -13.772A22.806 22.806 0 0 1 158.076 0.907C158.812 1.462 160.663 3.0429999999999 161.954 5.207C165.081 9.461 164.659 12.787 163.06 16.765L162.248 18.653L161.32 20.668L161.988 21.0959999999999L163.624 22.2379999999999L164.766 23.0879999999999A22.2 22.2 0 0 1 165.256 23.4769999999999L165.805 24.0239999999999L166.419 24.7079999999999C169.419 28.87 170.616 31.2839999999999 169.698 36.6579999999999C168.958 39.814 167.728 41.7679999999999 166.474 43.245L165.405 44.412L164.391 45.448C163.908 45.9499999999999 163.47 46.44 163.113 46.977L164.423 48.8569999999999C167.683 53.647 170.631 59.072 168.2170000000001 64.1749999999999C165.573 70.5049999999999 157.0650000000001 72.7589999999999 149.0820000000001 73.825L146.4490000000001 74.1399999999999L142.6880000000001 74.4999999999999L141.5100000000001 74.5999999999999A43.891 43.891 0 0 0 135.3400000000001 75.3379999999999A9.4 9.4 0 0 0 129.3780000000001 80.7649999999999A13.023 13.023 0 0 0 131.1680000000001 92.1849999999999A39.254 39.254 0 0 1 136.0120000000001 123.9739999999999C132.977 134.755 125.625 140 119.373 140C118.891 140 118.401 139.964 117.919 139.9A7.959 7.959 0 0 1 110.689 132.693L110.659 131.868C110.659 114.303 96.119 91.829 86.312 82.169L85.339 81.239L80.779 77.161C78.577 75.146 76.38 73.382 74.228 71.708L70.446 68.792A62.43 62.43 0 0 1 59.959 69.712A29.41 29.41 0 0 1 38.103 62.209C31.506 54.969 29.143 35.646 30.27 21.132L30.384 19.835L30.705 16.978C31.746 8.955 34.368 -1.946 41.057 -7.305C45.703 -11.028 54.435 -11.535 61.387 -11.23L64.059 -11.07L66.457 -10.857L68.499 -10.627L70.709 -10.321z" />
+      horiz-adv-x="200" d="M27 54.906C27 59.83 29.701 64.379 34.086 66.841A14.52 14.52 0 0 0 48.256 66.841C52.641 64.379 55.342 59.83 55.342 54.906V-0.219C55.342 -7.829 48.998 -14 41.172 -14C33.344 -14 27 -7.83 27 -0.219V54.906zM64.79 56.441V6.552C64.786 -0.412 68.832 -6.78 75.239 -9.893L75.711 -10.123A38.667 38.667 0 0 1 92.593 -14H143.761C152.771 -14.003 160.531 -7.82 162.296 0.774L173.633 55.899C174.743 61.296 173.306 66.893 169.717 71.149C166.129 75.406 160.767 77.874 155.107 77.875H121.474V114.625C121.474 124.773 113.014 133 102.579 133C97.362 133 93.132 128.887 93.132 123.813V117.684C93.132 109.733 90.48 101.996 85.574 95.634L72.348 78.491C67.442 72.129 64.79 64.392 64.79 56.441z" />
     <glyph glyph-name="tickets"
       unicode="&#xE9CC;"
       horiz-adv-x="200" d="M53 100L53.003 99.686C53.17 91.546 59.821 85 68 85C76.284 85 83 91.716 83 100H108V-20H28V100H53zM60 12H40V-8H60V12zM96 12H76V-8H96V12zM113 140L113.003 139.686C113.17 131.546 119.821 125 128 125C136.18 125 142.83 131.547 142.997 139.686L143 140H168V20H120V110H88V140H113z" />

package/lib/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.0"
+"version": "0.16.1-beta-1"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.0",
+    "version": "0.16.1-beta-1",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -123,6 +123,9 @@
         "react-dom": ">16.8.6"
     },
     "dependencies": {
+        "@dnd-kit/core": "^5.0.3",
+        "@dnd-kit/modifiers": "^5.0.0",
+        "@dnd-kit/sortable": "^6.0.1",
         "@popperjs/core": "2.11.5",
         "classlist-polyfill": "1.2.0",
         "classnames": "2.3.1",
@@ -141,7 +144,6 @@
         "react-notifications": "1.7.3",
         "react-onclickoutside": "6.12.1",
         "react-popper": "2.2.5",
-        "react-sortable-hoc": "2.0.0",
         "react-transition-group": "4.4.2",
         "recharts": "2.1.9",
         "regenerator-runtime": "0.13.9",