@plesk/ui-library 3.31.0 → 3.31.1

package/cjs/components/List/List.js

@@ -1,77 +1,49 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _reactTransitionGroup = require("react-transition-group");
-
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-
 var _reactMeasure = _interopRequireDefault(require("react-measure"));
-
 var _constants = require("../../constants");
-
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
-
 var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _utils = require("../utils");
-
 var _Button = _interopRequireDefault(require("../Button"));
-
 var _Translate = _interopRequireDefault(require("../Translate"));
-
 var _Text = _interopRequireDefault(require("../Text"));
-
 var _Pagination = require("../Pagination");
-
 var _Spinner = _interopRequireDefault(require("../Spinner"));
-
 var _ListOperationContext = _interopRequireDefault(require("./ListOperationContext"));
-
 var _VerticalContext = _interopRequireWildcard(require("../VerticalContext"));
-
 var _ListEmptyView = _interopRequireDefault(require("./ListEmptyView"));
-
 var _Columns = _interopRequireWildcard(require("../Columns"));
-
 var _useFocusVisible = require("use-focus-visible");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-
 const getRowKey = (row, props) => {
   const {
     rowKey
   } = props;
-
   if (typeof rowKey === 'function') {
     return rowKey(row);
   }
-
   return row[rowKey];
 };
-
-const Tbody = ({
-  baseClassName,
-  className,
-  ...props
-}) => {
+const Tbody = _ref => {
+  let {
+    baseClassName,
+    className,
+    ...props
+  } = _ref;
   const {
     focusVisible,
     onFocus,
@@ -85,7 +57,6 @@ const Tbody = ({
     })
   }));
 };
-
 Tbody.propTypes = {
   onFocus: _propTypes.default.func,
   onBlur: _propTypes.default.func,
@@ -97,16 +68,17 @@ Tbody.defaultProps = {
   onBlur: undefined,
   className: undefined,
   baseClassName: `${_constants.CLS_PREFIX}list__wrapper`
-}; // eslint-disable-next-line react/prop-types
+};
 
-const getHumanTotalRows = ({
-  selectedRows,
-  totalRows,
-  allRowsSelected,
-  translators
-}) => {
+// eslint-disable-next-line react/prop-types
+const getHumanTotalRows = _ref2 => {
+  let {
+    selectedRows,
+    totalRows,
+    allRowsSelected,
+    translators
+  } = _ref2;
   let mode;
-
   if (!allRowsSelected && selectedRows === 0) {
     mode = 'totalRows';
   } else if (allRowsSelected || selectedRows === totalRows) {
@@ -114,11 +86,9 @@ const getHumanTotalRows = ({
   } else {
     mode = 'selectedRows';
   }
-
   const wrapToText = element => /*#__PURE__*/_react.default.createElement(_Text.default, {
     fontSize: "sm"
   }, element);
-
   switch (mode) {
     case 'totalRows':
       return wrapToText( /*#__PURE__*/_react.default.createElement(_Translate.default, {
@@ -130,7 +100,6 @@ const getHumanTotalRows = ({
         },
         translators: translators
       }));
-
     case 'selectedRows':
       return wrapToText( /*#__PURE__*/_react.default.createElement(_Translate.default, {
         namespace: "List",
@@ -144,7 +113,6 @@ const getHumanTotalRows = ({
         },
         translators: translators
       }));
-
     case 'selectedAllRows':
       return wrapToText( /*#__PURE__*/_react.default.createElement(_Translate.default, {
         namespace: "List",
@@ -163,21 +131,19 @@ const getHumanTotalRows = ({
         },
         translators: translators
       }));
-
     default:
       return null;
   }
 };
+
 /**
  * `List` component is used for displaying a collection of tabular data.
  * [More details about designing of lists.](#!/Sets%20of%20Objects)
  * @since 0.0.42
  */
-
-
 class List extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     (0, _defineProperty2.default)(this, "state", {
       sortInPlace: !this.props.pagination,
       vertical: false,
@@ -189,18 +155,17 @@ class List extends _react.Component {
       reorderableItemWidths: []
     });
     (0, _defineProperty2.default)(this, "anchorRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)(this, "flatData", data => data.reduce((acc, {
-      data,
-      ...row
-    }) => {
+    (0, _defineProperty2.default)(this, "flatData", data => data.reduce((acc, _ref3) => {
+      let {
+        data,
+        ...row
+      } = _ref3;
       const {
         virtual
       } = this.getRowProps(row);
-
       if (virtual) {
         return [...acc, ...(data ? this.flatData(data) : [])];
       }
-
       return [...acc, row, ...(data ? this.flatData(data) : [])];
     }, []));
     (0, _defineProperty2.default)(this, "handleRowSelectionChange", (checked, rowKey) => {
@@ -208,7 +173,6 @@ class List extends _react.Component {
         onAllRowsSelectedChange
       } = this.props;
       let selection;
-
       if (checked) {
         selection = this.state.selection.slice();
         selection.push(rowKey);
@@ -216,7 +180,6 @@ class List extends _react.Component {
         selection = this.state.selection.filter(value => value !== rowKey);
         (0, _utils.safeInvoke)(onAllRowsSelectedChange, false);
       }
-
       this.setSelection(selection);
     });
     (0, _defineProperty2.default)(this, "handleGlobalSelectionChange", headerChecked => {
@@ -229,29 +192,25 @@ class List extends _react.Component {
       const nextSelection = [];
       this.flatData(this.props.data).forEach(row => {
         const key = getRowKey(row, this.props);
-
         if (row.disabled || this.isRowLoading(row)) {
           if (selection.indexOf(key) !== -1) {
             nextSelection.push(key);
           }
-
           return;
         }
-
         if (headerChecked) {
           nextSelection.push(key);
         }
       });
-
       if (!headerChecked) {
         (0, _utils.safeInvoke)(onAllRowsSelectedChange, false);
       }
-
       this.setSelection(nextSelection);
     });
-    (0, _defineProperty2.default)(this, "handleResize", ({
-      bounds
-    }) => {
+    (0, _defineProperty2.default)(this, "handleResize", _ref4 => {
+      let {
+        bounds
+      } = _ref4;
       this.setState({
         vertical: bounds.width < this.props.vertical
       });
@@ -262,43 +221,38 @@ class List extends _react.Component {
         columns
       } = this.props;
       const column = columns.find(c => c.type === 'title');
-
       if (column && column.key) {
         return row[column.key];
       }
-
       return undefined;
     });
     (0, _defineProperty2.default)(this, "getRowProps", row => {
       const {
         rowProps
       } = this.props;
-
       if (typeof rowProps === 'function') {
-        return { ...rowProps(row)
+        return {
+          ...rowProps(row)
         };
       }
-
-      return { ...rowProps
+      return {
+        ...rowProps
       };
     });
     (0, _defineProperty2.default)(this, "isAllRowsChecked", (0, _memoizeOne.default)((rows, selectedKeys) => {
       const filteredRows = this.flatData(rows).filter(row => !row.disabled);
-
       if (filteredRows.length > 0) {
         return filteredRows.every(row => {
           const key = getRowKey(row, this.props);
           return selectedKeys.indexOf(key) !== -1;
         });
       }
-
       return false;
     }));
     (0, _defineProperty2.default)(this, "isAllRowsExpanded", (0, _memoizeOne.default)((rows, expandedRows) => this.flatData(rows).every(row => {
       if (!this.isRowExpandable(row)) {
         return true;
       }
-
       const key = getRowKey(row, this.props);
       return expandedRows.indexOf(key) !== -1;
     })));
@@ -313,15 +267,12 @@ class List extends _react.Component {
       const nextExpandedRows = [];
       this.flatData(this.props.data).forEach(row => {
         const key = getRowKey(row, this.props);
-
         if (!this.isRowExpandable(row)) {
           if (expandedRows.indexOf(key) !== -1) {
             nextExpandedRows.push(key);
           }
-
           return;
         }
-
         if (!headerExpanded) {
           nextExpandedRows.push(key);
         }
@@ -332,86 +283,83 @@ class List extends _react.Component {
       if ((0, _utils.isClickable)(e)) {
         return;
       }
-
       if (this.isRowExpandable(row)) {
         this.handleRowExpandingChange(row);
       }
     });
   }
-
-  static getDerivedStateFromProps({
-    sortColumn,
-    sortDirection,
-    selection,
-    expandedRows,
-    notExpandableRows,
-    renderRowBody,
-    data,
-    pagination,
-    vertical,
-    rowKey
-  }, {
-    prevSortColumn,
-    prevSortDirection,
-    prevData,
-    prevSelection,
-    prevPagination,
-    prevExpandedRows,
-    ...state
-  }) {
+  static getDerivedStateFromProps(_ref5, _ref6) {
+    let {
+      sortColumn,
+      sortDirection,
+      selection,
+      expandedRows,
+      notExpandableRows,
+      renderRowBody,
+      data,
+      pagination,
+      vertical,
+      rowKey
+    } = _ref5;
+    let {
+      prevSortColumn,
+      prevSortDirection,
+      prevData,
+      prevSelection,
+      prevPagination,
+      prevExpandedRows,
+      ...state
+    } = _ref6;
     let nextState = {};
-
     if (prevSortColumn !== sortColumn || prevSortDirection !== sortDirection) {
-      nextState = { ...nextState,
+      nextState = {
+        ...nextState,
         sortColumn,
         sortDirection
       };
     }
-
     if (prevData !== data) {
       if (renderRowBody && (prevData === undefined || prevData && prevData.length === 0) && data && data.length === 1) {
         const key = getRowKey(data[0], {
           rowKey
         });
-
         if (notExpandableRows.indexOf(key) === -1) {
-          nextState = { ...nextState,
+          nextState = {
+            ...nextState,
             expandedRows: [...expandedRows, key]
           };
         }
       }
-
       const keys = data.map(row => getRowKey(row, {
         rowKey
       }));
       const nextSelection = state.selection.filter(key => keys.indexOf(key) !== -1);
-      nextState = { ...nextState,
+      nextState = {
+        ...nextState,
         selection: nextSelection
       };
     }
-
     if (prevSelection !== selection) {
-      nextState = { ...nextState,
+      nextState = {
+        ...nextState,
         selection
       };
     }
-
     if (prevExpandedRows !== expandedRows) {
-      nextState = { ...nextState,
+      nextState = {
+        ...nextState,
         expandedRows
       };
     }
-
     if (prevPagination !== pagination) {
-      nextState = { ...nextState,
+      nextState = {
+        ...nextState,
         sortInPlace: !pagination
       };
     }
-
     if (typeof vertical === 'boolean') {
       nextState.vertical = vertical;
     }
-
     nextState.prevSortColumn = sortColumn;
     nextState.prevSortDirection = sortDirection;
     nextState.prevData = data;
@@ -420,19 +368,18 @@ class List extends _react.Component {
     nextState.prevExpandedRows = expandedRows;
     return nextState;
   }
-
   componentDidMount() {
     if (this.props.reorderable) {
-      Promise.resolve().then(() => _interopRequireWildcard(require('@plesk/react-movable'))).then(({
-        List: ReorderableList
-      }) => {
+      Promise.resolve().then(() => _interopRequireWildcard(require( /* webpackChunkName: "react-movable" */'@plesk/react-movable'))).then(_ref7 => {
+        let {
+          List: ReorderableList
+        } = _ref7;
         this.setState({
           ReorderableList
         });
       });
     }
   }
-
   componentDidUpdate(prevProps) {
     const {
       data
@@ -440,7 +387,6 @@ class List extends _react.Component {
     const {
       data: prevData
     } = prevProps;
-
     if (data !== prevData && this.needScroll && this.anchorRef.current) {
       (0, _utils.scrollIntoView)(this.anchorRef.current, {
         scrollMode: 'if-needed'
@@ -448,7 +394,6 @@ class List extends _react.Component {
       this.needScroll = false;
     }
   }
-
   getData() {
     const {
       sortInPlace,
@@ -459,34 +404,29 @@ class List extends _react.Component {
       data,
       columns
     } = this.props;
-
     if (!sortInPlace) {
       return data;
     }
-
-    const [column] = columns.filter(({
-      key
-    }) => key === sortColumn);
-
+    const [column] = columns.filter(_ref8 => {
+      let {
+        key
+      } = _ref8;
+      return key === sortColumn;
+    });
     const defaultSort = (a, b) => {
       if (a > b) {
         return 1;
       }
-
       if (a < b) {
         return -1;
       }
-
       return 0;
     };
-
     if (!column) {
       return data;
     }
-
     return data.sort((a, b) => (column.sort ? column.sort(a, b) : defaultSort(a[sortColumn], b[sortColumn])) * (sortDirection === 'ASC' ? 1 : -1));
   }
-
   sort(columnKey) {
     const {
       sortInPlace
@@ -497,14 +437,12 @@ class List extends _react.Component {
     } = this.state;
     sortDirection = sortColumn === columnKey && sortDirection === 'ASC' ? 'DESC' : 'ASC';
     sortColumn = columnKey;
-
     if (sortInPlace) {
       this.setState({
         sortColumn,
         sortDirection
       });
     }
-
     if (this.props.onSortChange) {
       this.props.onSortChange({
         sortColumn,
@@ -512,67 +450,56 @@ class List extends _react.Component {
       });
     }
   }
-
   isRowSelected(row) {
     return this.state.selection.indexOf(getRowKey(row, this.props)) !== -1;
   }
-
   setSelection(selection) {
     this.setState({
       selection
     });
-
     if (this.props.onSelectionChange) {
       this.props.onSelectionChange(selection.slice());
     }
   }
-
   isRowExpanded(row) {
     return this.state.expandedRows.indexOf(getRowKey(row, this.props)) !== -1;
   }
-
   isRowExpandable(row) {
     const {
       virtual
     } = this.getRowProps(row);
-
     if (virtual) {
       return false;
     }
-
     return this.props.notExpandableRows.indexOf(getRowKey(row, this.props)) === -1;
   }
-
   handleRowExpandingChange(row) {
     let expandedRows;
     const rowKey = getRowKey(row, this.props);
-
     if (this.isRowExpanded(row)) {
       expandedRows = this.state.expandedRows.filter(value => value !== rowKey);
     } else {
       expandedRows = this.state.expandedRows.slice();
       expandedRows.push(rowKey);
     }
-
     this.setExpandedRows(expandedRows);
   }
-
   setExpandedRows(expandedRows) {
     this.setState({
       expandedRows
     });
     (0, _utils.safeInvoke)(this.props.onExpandedRowsChange, expandedRows.slice());
   }
-
-  renderRow({
-    row,
-    index,
-    hasTitle,
-    realColumn,
-    parent,
-    isDragged,
-    reorderableProps
-  }) {
+  renderRow(_ref9) {
+    let {
+      row,
+      index,
+      hasTitle,
+      realColumn,
+      parent,
+      isDragged,
+      reorderableProps
+    } = _ref9;
     const {
       baseClassName,
       renderRowBody,
@@ -582,9 +509,12 @@ class List extends _react.Component {
       vertical,
       reorderableItemWidths
     } = this.state;
-    const hasActions = realColumn.some(({
-      type
-    }) => type === 'actions');
+    const hasActions = realColumn.some(_ref10 => {
+      let {
+        type
+      } = _ref10;
+      return type === 'actions';
+    });
     const {
       className,
       virtual,
@@ -592,7 +522,6 @@ class List extends _react.Component {
     } = this.getRowProps(row);
     let skipCells = 0;
     const Wrapper = reorderable && !parent ? Tbody : _react.Fragment;
-
     const element = /*#__PURE__*/_react.default.createElement(Wrapper, (0, _extends2.default)({}, Wrapper === Tbody && !isDragged ? reorderableProps : undefined, {
       key: getRowKey(row, this.props)
     }), /*#__PURE__*/_react.default.createElement("tr", (0, _extends2.default)({
@@ -607,55 +536,50 @@ class List extends _react.Component {
       }, className)
     }, rowProps, {
       onClick: renderRowBody ? this.createRowClickHandler(row) : undefined
-    }), realColumn.map(({
-      key,
-      title,
-      render,
-      width,
-      cellProps,
-      truncate,
-      type
-    }, index) => {
+    }), realColumn.map((_ref11, index) => {
+      let {
+        key,
+        title,
+        render,
+        width,
+        cellProps,
+        truncate,
+        type
+      } = _ref11;
       if (skipCells > 0) {
         skipCells -= 1;
         return null;
       }
-
       let style;
-
       if (!hasTitle && width && !vertical) {
         style = {
           width
         };
       }
-
       if (isDragged) {
         style = {
           width: reorderableItemWidths[index]
         };
       }
-
       let content = render ? render(row, {
         parent
-      }) : row[key]; // cell props from render
-
+      }) : row[key];
+      // cell props from render
       if (content && content.children && ! /*#__PURE__*/(0, _react.isValidElement)(content)) {
         const {
           children,
           ...other
         } = content;
         content = children;
-        cellProps = { ...cellProps,
+        cellProps = {
+          ...cellProps,
           ...other
         };
-
         if (other.colSpan) {
           skipCells += other.colSpan - 1;
         }
       }
-
       const isCellEmpty = !title && !content;
-
       if (truncate) {
         content = /*#__PURE__*/_react.default.createElement("div", {
           className: `${baseClassName}__truncate`
@@ -663,10 +587,8 @@ class List extends _react.Component {
           truncate: true
         }, content));
       }
-
       if (vertical) {
         const hasColumnTitle = type !== 'internal' && type !== 'actions' && type !== 'title' && title;
-
         if (!isCellEmpty && type !== 'internal') {
           content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasColumnTitle && /*#__PURE__*/_react.default.createElement("div", {
             className: `${baseClassName}__cell-inner-title`
@@ -674,19 +596,17 @@ class List extends _react.Component {
             className: `${baseClassName}__cell-inner-content`
           }, content));
         }
-
         if (type === 'actions') {
           content = /*#__PURE__*/_react.default.createElement(_VerticalContext.default.Provider, {
             value: true
           }, content);
         }
-      } // do not render reorderable handler for nested rows
-
+      }
 
+      // do not render reorderable handler for nested rows
       if (key === 'reorderable' && type === 'internal' && parent) {
         content = null;
       }
-
       return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
         key: key,
         style: style
@@ -710,7 +630,6 @@ class List extends _react.Component {
       realColumn,
       parent: row
     })) : null);
-
     if (isDragged) {
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
         className: (0, _classnames.default)(baseClassName, `${baseClassName}--dragged`)
@@ -721,16 +640,15 @@ class List extends _react.Component {
         })
       }, element));
     }
-
     return element;
   }
-
-  renderRowBody({
-    row,
-    index,
-    realColumn,
-    parent
-  }) {
+  renderRowBody(_ref12) {
+    let {
+      row,
+      index,
+      realColumn,
+      parent
+    } = _ref12;
     const {
       baseClassName,
       renderRowBody
@@ -738,17 +656,21 @@ class List extends _react.Component {
     const {
       vertical
     } = this.state;
-
     if (!renderRowBody) {
       return null;
     }
-
-    const reorderable = realColumn.find(({
-      key
-    }) => key === 'reorderable');
-    const expander = realColumn.find(({
-      key
-    }) => key === 'expander');
+    const reorderable = realColumn.find(_ref13 => {
+      let {
+        key
+      } = _ref13;
+      return key === 'reorderable';
+    });
+    const expander = realColumn.find(_ref14 => {
+      let {
+        key
+      } = _ref14;
+      return key === 'expander';
+    });
     const isRowExpanded = this.isRowExpanded(row);
     const trRef = /*#__PURE__*/(0, _react.createRef)();
     return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
@@ -781,7 +703,6 @@ class List extends _react.Component {
       parent
     })))))));
   }
-
   renderSelectAllButton() {
     const {
       allRowsSelected,
@@ -793,11 +714,9 @@ class List extends _react.Component {
     const {
       selection
     } = this.state;
-
     if (allRowsSelected || selection.length === totalRows || !onSelectionChange) {
       return null;
     }
-
     return /*#__PURE__*/_react.default.createElement(_Button.default, {
       ghost: true,
       onClick: () => {
@@ -811,7 +730,6 @@ class List extends _react.Component {
       translators: locale
     }));
   }
-
   renderDeselectAllButton() {
     const {
       allRowsSelected,
@@ -822,11 +740,9 @@ class List extends _react.Component {
     const {
       selection
     } = this.state;
-
     if (!allRowsSelected && selection.length === 0 || !onSelectionChange) {
       return null;
     }
-
     return /*#__PURE__*/_react.default.createElement(_Button.default, {
       ghost: true,
       onClick: () => {
@@ -840,7 +756,6 @@ class List extends _react.Component {
       translators: locale
     }));
   }
-
   renderToolbar() {
     const {
       toolbar,
@@ -853,19 +768,15 @@ class List extends _react.Component {
       selection
     } = this.state;
     let selectedRowTitle;
-
     if (selection.length === 1) {
       const row = this.flatData(data).find(row => getRowKey(row, this.props) === selection[0]);
-
       if (row) {
         selectedRowTitle = this.getRowTitle(row);
       }
     }
-
     if (!toolbar) {
       return null;
     }
-
     const context = {
       selectedRows: allRowsSelected ? totalRows || /*#__PURE__*/_react.default.createElement(_Translate.default, {
         namespace: "List",
@@ -879,38 +790,30 @@ class List extends _react.Component {
       value: context
     }, toolbar);
   }
-
   shouldBePagination() {
     const {
       totalRows,
       pagination
     } = this.props;
-
     if (!pagination || !totalRows) {
       return false;
     }
-
     if (totalRows && /*#__PURE__*/(0, _react.isValidElement)(pagination)) {
       const {
         itemsPerPageOptions = _Pagination.ITEMS_PER_PAGE_OPTIONS
       } = pagination.props;
-
       if (Array.isArray(itemsPerPageOptions)) {
         const numericOptions = itemsPerPageOptions.filter(v => Number(v) === v);
-
         if (numericOptions.length) {
           const min = Math.min(...numericOptions);
-
           if (totalRows <= min) {
             return false;
           }
         }
       }
     }
-
     return true;
   }
-
   renderHeader() {
     const {
       baseClassName,
@@ -922,11 +825,9 @@ class List extends _react.Component {
       selection
     } = this.state;
     const shouldBePagination = this.shouldBePagination();
-
     if (totalRows === undefined && !shouldBePagination) {
       return null;
     }
-
     return /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__header`
     }, totalRows === undefined ? /*#__PURE__*/_react.default.createElement("span", null) : /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
@@ -942,22 +843,18 @@ class List extends _react.Component {
       className: `${baseClassName}__header-text`
     }, this.renderPagination('header')));
   }
-
   renderEmptyView() {
     const {
       emptyView,
       filtered
     } = this.props;
-
     if (emptyView === undefined) {
       return filtered ? /*#__PURE__*/_react.default.createElement(_ListEmptyView.default, {
         reason: "filtered"
       }) : /*#__PURE__*/_react.default.createElement(_ListEmptyView.default, null);
     }
-
     return emptyView;
   }
-
   renderPagination(placement) {
     const {
       pagination,
@@ -966,32 +863,27 @@ class List extends _react.Component {
     const paginationProps = {
       loading
     };
-
     switch (placement) {
       case 'header':
         paginationProps.view = 'popover';
         break;
-
       case 'footer':
         paginationProps.onSelect = current => {
           this.needScroll = true;
           (0, _utils.safeInvoke)(pagination.props.onSelect, current);
         };
-
         if (pagination.props.onItemsPerPageChange) {
           paginationProps.onItemsPerPageChange = itemsPerPage => {
             this.needScroll = true;
             (0, _utils.safeInvoke)(pagination.props.onItemsPerPageChange, itemsPerPage);
           };
         }
-
         break;
     }
-
-    return /*#__PURE__*/(0, _react.cloneElement)(pagination, { ...paginationProps
+    return /*#__PURE__*/(0, _react.cloneElement)(pagination, {
+      ...paginationProps
     });
   }
-
   render() {
     const {
       baseClassName,
@@ -1030,46 +922,37 @@ class List extends _react.Component {
     const {
       vertical
     } = this.state;
-
     if (false === (data && data.length > 0) && !filtered && emptyViewMode === 'all') {
       return this.renderEmptyView();
     }
-
     const realColumn = columns.map((column, i) => {
       const classList = [];
       const cellClassList = [];
-
       if (i === 0) {
         cellClassList.push(`${baseClassName}__cell-first`);
       }
-
       if (column.align && !vertical) {
         const className = `${baseClassName}__cell-${column.align}`;
         classList.push(className);
         cellClassList.push(className);
       }
-
       if (column.className) {
         classList.push(column.className);
         cellClassList.push(column.className);
       }
-
-      const newColumn = { ...column
+      const newColumn = {
+        ...column
       };
-
       if (classList.length) {
         newColumn.className = (0, _classnames.default)(...classList);
       }
-
       if (cellClassList.length) {
         newColumn.cellProps = {
           className: (0, _classnames.default)(...cellClassList)
         };
       }
-
       return newColumn;
     });
-
     if (onSelectionChange) {
       const headerChecked = this.isAllRowsChecked(data, this.state.selection);
       const headerCheckboxProps = {
@@ -1088,17 +971,14 @@ class List extends _react.Component {
           const {
             virtual
           } = this.getRowProps(row);
-
           if (virtual) {
             return null;
           }
-
           if (this.isRowLoading(row)) {
             return /*#__PURE__*/_react.default.createElement(_Spinner.default, {
               className: `${baseClassName}__spinner`
             });
           }
-
           const checkboxProps = {
             checked: this.isRowSelected(row),
             disabled: row.disabled,
@@ -1107,16 +987,13 @@ class List extends _react.Component {
               value: getRowKey(row, this.props)
             }
           };
-
           if (typeof renderSelectionCheckbox === 'function') {
             return renderSelectionCheckbox(checkboxProps, row);
           }
-
           return /*#__PURE__*/_react.default.createElement(_Checkbox.default, checkboxProps);
         }
       });
     }
-
     if (renderRowBody) {
       realColumn.unshift({
         key: 'expander',
@@ -1161,7 +1038,6 @@ class List extends _react.Component {
         })
       });
     }
-
     if (reorderable) {
       realColumn.unshift({
         key: 'reorderable',
@@ -1186,70 +1062,70 @@ class List extends _react.Component {
         })))
       });
     }
-
     const hasTitle = !vertical && columns.some(column => column.title);
     let content;
-
     if (false === (data && data.length > 0) && (filtered || emptyViewMode === 'items')) {
       content = this.renderEmptyView();
     } else {
-      const renderList = ({
-        children,
-        props: reorderableProps
-      }) => /*#__PURE__*/_react.default.createElement(_useFocusVisible.FocusVisibleManager, null, /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({
-        className: (0, _classnames.default)(`${baseClassName}__table`, {
-          [`${baseClassName}--expandable`]: renderRowBody,
-          [`${baseClassName}__table--vertical`]: vertical,
-          [`${baseClassName}__table--reorderable`]: reorderable
-        })
-      }, reorderableProps), hasTitle && /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
-        className: (0, _classnames.default)(`${baseClassName}__table-thead`, {
-          [`${baseClassName}__row--expanded`]: this.isAllRowsExpanded(data, this.state.expandedRows)
-        })
-      }, realColumn.map(({
-        key,
-        title,
-        sortable,
-        sort,
-        width,
-        render,
-        truncate,
-        type,
-        cellProps,
-        ...headerProps
-      }) => {
-        if (sortable) {
-          title = /*#__PURE__*/_react.default.createElement("div", {
-            className: "th__action"
-          }, title);
-          headerProps.className = (0, _classnames.default)({
-            'is-sortable': sortable,
-            'is-sorted is-sorted--up': this.state.sortColumn === key && this.state.sortDirection === 'ASC',
-            'is-sorted is-sorted--down': this.state.sortColumn === key && this.state.sortDirection === 'DESC'
-          }, headerProps.className);
-
-          headerProps.onClick = () => this.sort(key);
-        }
-
-        if (width) {
-          headerProps.style = { ...headerProps.style,
-            width
-          };
-        }
-
-        return /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({
-          key: key
-        }, headerProps), title);
-      }))), reorderable ? children : /*#__PURE__*/_react.default.createElement("tbody", null, children)));
-
-      const renderItem = ({
-        value: {
-          row
-        },
-        index,
-        props: reorderableProps,
-        isDragged
-      }) => {
+      const renderList = _ref15 => {
+        let {
+          children,
+          props: reorderableProps
+        } = _ref15;
+        return /*#__PURE__*/_react.default.createElement(_useFocusVisible.FocusVisibleManager, null, /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({
+          className: (0, _classnames.default)(`${baseClassName}__table`, {
+            [`${baseClassName}--expandable`]: renderRowBody,
+            [`${baseClassName}__table--vertical`]: vertical,
+            [`${baseClassName}__table--reorderable`]: reorderable
+          })
+        }, reorderableProps), hasTitle && /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
+          className: (0, _classnames.default)(`${baseClassName}__table-thead`, {
+            [`${baseClassName}__row--expanded`]: this.isAllRowsExpanded(data, this.state.expandedRows)
+          })
+        }, realColumn.map(_ref16 => {
+          let {
+            key,
+            title,
+            sortable,
+            sort,
+            width,
+            render,
+            truncate,
+            type,
+            cellProps,
+            ...headerProps
+          } = _ref16;
+          if (sortable) {
+            title = /*#__PURE__*/_react.default.createElement("div", {
+              className: "th__action"
+            }, title);
+            headerProps.className = (0, _classnames.default)({
+              'is-sortable': sortable,
+              'is-sorted is-sorted--up': this.state.sortColumn === key && this.state.sortDirection === 'ASC',
+              'is-sorted is-sorted--down': this.state.sortColumn === key && this.state.sortDirection === 'DESC'
+            }, headerProps.className);
+            headerProps.onClick = () => this.sort(key);
+          }
+          if (width) {
+            headerProps.style = {
+              ...headerProps.style,
+              width
+            };
+          }
+          return /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({
+            key: key
+          }, headerProps), title);
+        }))), reorderable ? children : /*#__PURE__*/_react.default.createElement("tbody", null, children)));
+      };
+      const renderItem = _ref17 => {
+        let {
+          value: {
+            row
+          },
+          index,
+          props: reorderableProps,
+          isDragged
+        } = _ref17;
         return this.renderRow({
           row,
           index,
@@ -1259,26 +1135,27 @@ class List extends _react.Component {
           isDragged
         });
       };
-
       if (reorderable) {
         const {
           ReorderableList
         } = this.state;
         content = /*#__PURE__*/_react.default.createElement(ReorderableList, {
-          beforeDrag: ({
-            elements,
-            index
-          }) => {
+          beforeDrag: _ref18 => {
+            let {
+              elements,
+              index
+            } = _ref18;
             const cells = Array.from(elements[index].firstElementChild.children);
             const reorderableItemWidths = cells.map(cell => window.getComputedStyle(cell).width);
             this.setState({
               reorderableItemWidths
             });
           },
-          onChange: ({
-            oldIndex,
-            newIndex
-          }) => {
+          onChange: _ref19 => {
+            let {
+              oldIndex,
+              newIndex
+            } = _ref19;
             (0, _utils.safeInvoke)(onReorderEnd, {
               oldIndex,
               newIndex
@@ -1306,13 +1183,11 @@ class List extends _react.Component {
         });
       }
     }
-
     content = /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _classnames.default)(`${baseClassName}__table-container`, {
         [`${baseClassName}__table-container--loading`]: loading
       })
     }, content);
-
     if (sidebar) {
       content = /*#__PURE__*/_react.default.createElement(_Columns.default, {
         gap: "md"
@@ -1320,9 +1195,7 @@ class List extends _react.Component {
         fill: true
       }, content), /*#__PURE__*/_react.default.createElement(_Columns.Column, null, sidebar));
     }
-
     const shouldBePagination = this.shouldBePagination();
-
     const createRoot = ref => /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
       ref: ref,
       className: (0, _classnames.default)(baseClassName, className)
@@ -1331,21 +1204,20 @@ class List extends _react.Component {
     }), content, shouldBePagination && /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__footer`
     }, this.renderPagination('footer')));
-
     if (typeof verticalProp === 'number') {
       return /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
         bounds: true,
         onResize: this.handleResize
-      }, ({
-        measureRef
-      }) => createRoot(measureRef));
+      }, _ref20 => {
+        let {
+          measureRef
+        } = _ref20;
+        return createRoot(measureRef);
+      });
     }
-
     return createRoot();
   }
-
 }
-
 List.propTypes = {
   /**
    * Columns definition.
@@ -1359,39 +1231,32 @@ List.propTypes = {
      * Unique column key.
      */
     key: _propTypes.default.string.isRequired,
-
     /**
      * Column title.
      */
     title: _propTypes.default.node,
-
     /**
      * Optional cell renderer function: `row => Component`. By default render value of cell.
      * The renderer function can also returns a configuration object like: `{children: 'cell content', colSpan: 3}`
      */
     render: _propTypes.default.func,
-
     /**
      * Is column sortable.
      * Default is `false`
      */
     sortable: _propTypes.default.bool,
-
     /**
      * Optional function for row comparison: `(row1, row2) => -1 | 0 | 1`
      */
     sort: _propTypes.default.func,
-
     /**
      * Column alignment.
      */
     align: _propTypes.default.oneOf(['left', 'center', 'right']),
-
     /**
      * Truncate the text in cell with an ellipsis.
      */
     truncate: _propTypes.default.bool,
-
     /**
      * Determine type of column content.
      *
@@ -1401,7 +1266,6 @@ List.propTypes = {
      */
     type: _propTypes.default.oneOf(['title', 'controls', 'actions'])
   })).isRequired,
-
   /**
    * Array of row objects.
    *
@@ -1413,145 +1277,121 @@ List.propTypes = {
      * Unique column key. This property can by renamed using `rowKey` property of List.
      */
     key: _propTypes.default.string,
-
     /**
      * Optional property for disabling ability to select this row.
      */
     disabled: _propTypes.default.bool,
-
     /**
      * Optional array of children rows.
      */
     data: _propTypes.default.array
   })),
-
   /**
    * Current sort column key
    * @since 0.0.42
    */
   sortColumn: _propTypes.default.string,
-
   /**
    * Sort direction of the column being sorted.
    * @since 0.0.42
    */
   sortDirection: _propTypes.default.oneOf(['ASC', 'DESC']),
-
   /**
    * Sort change handler
    * @since 0.0.42
    */
   onSortChange: _propTypes.default.func,
-
   /**
    * Array of keys of selected rows
    * @since 0.0.42
    */
   selection: _propTypes.default.array,
-
   /**
    * Selection change handler for list. Checkboxes will only be rendered if this prop is defined.
    * @since 0.0.42
    */
   onSelectionChange: _propTypes.default.func,
-
   /**
    * Renderer for a selection checkbox. Allow to replace checkboxes in the List by a custom implementation.
    * @since 3.19.0
    */
   renderSelectionCheckbox: _propTypes.default.func,
-
   /**
    * Row's key getter. Could be a string or function like: `row => <unique_string>`
    * @since 0.0.45
    */
   rowKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-
   /**
    * Renderer for a row body. Should return ReactNode.
    * @since 1.12.0
    */
   renderRowBody: _propTypes.default.func,
-
   /**
    * Array of keys of expanded rows
    * @since 1.12.0
    */
   expandedRows: _propTypes.default.array,
-
   /**
    * Array of keys of rows which not have expand indicator
    * @since 1.12.0
    */
   notExpandableRows: _propTypes.default.array,
-
   /**
    * Rows expanding change handler.
    * @since 1.12.0
    */
   onExpandedRowsChange: _propTypes.default.func,
-
   /**
    * Array of keys of loading rows. They are displayed instead of checkboxes.
    * @since 2.5.0
    */
   loadingRows: _propTypes.default.array,
-
   /**
    * A `Pagination` element. It displays at the top and the bottom of the list. When pagination is defined, the built-in sort is disabled.
    * @since 2.4.0
    */
   pagination: _propTypes.default.node,
-
   /**
    * Total rows count, including nested rows. Usually, it uses together with pagination.
    * @since 2.4.0
    */
   totalRows: _propTypes.default.number,
-
   /**
    * A `Toolbar` element.
    * @since 2.4.0
    */
   toolbar: _propTypes.default.node,
-
   /**
    * A flag that all rows are selected.
    * @since 2.4.0
    */
   allRowsSelected: _propTypes.default.bool,
-
   /**
    * A callback executed when the allRowsSelected prop is changed.
    * @since 2.4.0
    */
   onAllRowsSelectedChange: _propTypes.default.func,
-
   /**
    * Filtered list. Manages toolbar visibility when data is absent and defines the defaults for empty view.
    * @since 3.0.1
    */
   filtered: _propTypes.default.bool,
-
   /**
    * A custom view for the case when data is absent.
    * @since 2.5.0
    */
   emptyView: _propTypes.default.node,
-
   /**
    * Which part of the List component should be replaced by the empty view.
    * @since 2.6.0
    * @deprecated Use `filtered` instead.
    */
   emptyViewMode: _propTypes.default.oneOf(['all', 'items']),
-
   /**
    * A slot on the right of the items.
    * @since 2.6.0
    */
   sidebar: _propTypes.default.node,
-
   /**
    * Custom localization messages.
    * @since 2.6.0
@@ -1563,20 +1403,17 @@ List.propTypes = {
     totalRows: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
     selectedRows: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node])
   }),
-
   /**
    * Render List row's content vertically.
    * When some number is specified, it turns into vertical mode automatically if the List's width is less than the provided number.
    * @since 3.3.0
    */
   vertical: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.number]),
-
   /**
    * Indicate the loading state of the list.
    * @since 3.3.1
    */
   loading: _propTypes.default.bool,
-
   /**
    * Apply some props to each row.
    *
@@ -1587,24 +1424,20 @@ List.propTypes = {
   rowProps: _propTypes.default.oneOfType([_propTypes.default.shape({
     virtual: _propTypes.default.bool
   }), _propTypes.default.func]),
-
   /**
    * Enable reorderable view.
    * @since 3.18.0
    */
   reorderable: _propTypes.default.bool,
-
   /**
    * Reorder end handler.
    * @since 3.18.0
    */
   onReorderEnd: _propTypes.default.func,
-
   /**
    * @ignore
    */
   className: _propTypes.default.string,
-
   /**
    * @ignore
    */