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

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/es/Pager.d.ts

@@ -0,0 +1,11 @@
+declare module '@rio-cloud/rio-uikit/lib/es/Pager' {
+    import React from 'react';
+    import { PagerProps } from '../types';
+
+    export enum PagerVariant {
+        VARIANT_FULL = 'full',
+        VARIANT_COMPACT = 'compact',
+    }
+    
+    export default class Pager extends React.Component<PagerProps> {}
+}

package/lib/es/Pager.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Pager2.default;
+  }
+});
+
+var _Pager2 = _interopRequireDefault(require("../components/pager/Pager"));

package/lib/index.d.ts

@@ -64,6 +64,7 @@ declare module '@rio-cloud/rio-uikit' {
         OverlayTriggerEvent,
         OnboardingTipAlignment,
         PieChartProps,
+        PagerProps,
         PopoverProps,
         ResizerDirection,
         ResizerPosition,
@@ -191,6 +192,7 @@ declare module '@rio-cloud/rio-uikit' {
     export class NumberInput extends React.Component<NumberInputProps> {}
     export class OnboardingTip extends React.Component<OnboardingTipProps> {}
     export class OverlayTrigger extends React.Component<OverlayTriggerProps> {}
+    export class Pager extends React.Component<PagerProps> {}
     export class PieChart extends React.Component<PieChartProps> {}
     export class Popover extends React.Component<PopoverProps> {}
     export class RadioButton extends React.Component<RadioButtonProps> {}

package/lib/index.js

@@ -341,6 +341,12 @@ Object.defineProperty(exports, "OverlayTrigger", {
     return _OverlayTrigger2.default;
   }
 });
+Object.defineProperty(exports, "Pager", {
+  enumerable: true,
+  get: function get() {
+    return _Pager2.default;
+  }
+});
 Object.defineProperty(exports, "PieChart", {
   enumerable: true,
   get: function get() {
@@ -1019,6 +1025,8 @@ var _TagManager2 = _interopRequireDefault(require("./components/tagManager/TagMa
 
 var _BrowserWarning2 = _interopRequireDefault(require("./components/browserWarning/BrowserWarning"));
 
+var _Pager2 = _interopRequireDefault(require("./components/pager/Pager"));
+
 var _toggleSupportMarker2 = require("./components/supportMarker/toggleSupportMarker");
 
 var _Carousel2 = _interopRequireDefault(require("./components/carousel/Carousel"));

package/lib/style/css/_exports/rio-website.less

@@ -325,6 +325,20 @@ body .module-content {
         @media (max-width: @screen-ls) {
           display: none;
         }
+
+        @media (min-width: @screen-ls) {
+          > .SubmoduleNavigation {
+            max-height: calc(~"100vh - 100px");
+            overflow: auto;
+            -webkit-overflow-scrolling: touch;
+          }
+        }
+
+        &:hover {
+          > .SubmoduleNavigation {
+            display: block;
+          }
+        }
       }
 
       .SubmoduleNavigation {
@@ -361,14 +375,6 @@ body .module-content {
           }
         }
       }
-
-      > .submodule {
-        &:hover {
-          > .SubmoduleNavigation {
-            display: block;
-          }
-        }
-      }
     }
   }
 }

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