@plesk/ui-library 3.31.0 → 3.31.1

package/esm/components/List/List.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
 
 /* eslint-disable react/no-deprecated */
+
 import React, { Component, Fragment, cloneElement, isValidElement, createRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -23,24 +24,21 @@ import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
 import ListEmptyView from './ListEmptyView';
 import Columns, { Column } from '../Columns';
 import { FocusVisibleManager, useFocusVisible } from 'use-focus-visible';
-
 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,
@@ -54,7 +52,6 @@ const Tbody = ({
     })
   }));
 };
-
 Tbody.propTypes = {
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
@@ -66,16 +63,17 @@ Tbody.defaultProps = {
   onBlur: undefined,
   className: undefined,
   baseClassName: `${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) {
@@ -83,11 +81,9 @@ const getHumanTotalRows = ({
   } else {
     mode = 'selectedRows';
   }
-
   const wrapToText = element => /*#__PURE__*/React.createElement(Text, {
     fontSize: "sm"
   }, element);
-
   switch (mode) {
     case 'totalRows':
       return wrapToText( /*#__PURE__*/React.createElement(Translate, {
@@ -99,7 +95,6 @@ const getHumanTotalRows = ({
         },
         translators: translators
       }));
-
     case 'selectedRows':
       return wrapToText( /*#__PURE__*/React.createElement(Translate, {
         namespace: "List",
@@ -113,7 +108,6 @@ const getHumanTotalRows = ({
         },
         translators: translators
       }));
-
     case 'selectedAllRows':
       return wrapToText( /*#__PURE__*/React.createElement(Translate, {
         namespace: "List",
@@ -132,22 +126,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 Component {
-  constructor(...args) {
-    super(...args);
-
+  constructor() {
+    super(...arguments);
     _defineProperty(this, "state", {
       sortInPlace: !this.props.pagination,
       vertical: false,
@@ -158,30 +149,25 @@ class List extends Component {
       ReorderableList: () => null,
       reorderableItemWidths: []
     });
-
     _defineProperty(this, "anchorRef", /*#__PURE__*/createRef());
-
-    _defineProperty(this, "flatData", data => data.reduce((acc, {
-      data,
-      ...row
-    }) => {
+    _defineProperty(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) : [])];
     }, []));
-
     _defineProperty(this, "handleRowSelectionChange", (checked, rowKey) => {
       const {
         onAllRowsSelectedChange
       } = this.props;
       let selection;
-
       if (checked) {
         selection = this.state.selection.slice();
         selection.push(rowKey);
@@ -189,10 +175,8 @@ class List extends Component {
         selection = this.state.selection.filter(value => value !== rowKey);
         safeInvoke(onAllRowsSelectedChange, false);
       }
-
       this.setSelection(selection);
     });
-
     _defineProperty(this, "handleGlobalSelectionChange", headerChecked => {
       const {
         onAllRowsSelectedChange
@@ -203,86 +187,70 @@ class List extends 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) {
         safeInvoke(onAllRowsSelectedChange, false);
       }
-
       this.setSelection(nextSelection);
     });
-
-    _defineProperty(this, "handleResize", ({
-      bounds
-    }) => {
+    _defineProperty(this, "handleResize", _ref4 => {
+      let {
+        bounds
+      } = _ref4;
       this.setState({
         vertical: bounds.width < this.props.vertical
       });
     });
-
     _defineProperty(this, "isRowLoading", row => this.props.loadingRows.indexOf(getRowKey(row, this.props)) !== -1);
-
     _defineProperty(this, "getRowTitle", row => {
       const {
         columns
       } = this.props;
       const column = columns.find(c => c.type === 'title');
-
       if (column && column.key) {
         return row[column.key];
       }
-
       return undefined;
     });
-
     _defineProperty(this, "getRowProps", row => {
       const {
         rowProps
       } = this.props;
-
       if (typeof rowProps === 'function') {
-        return { ...rowProps(row)
+        return {
+          ...rowProps(row)
         };
       }
-
-      return { ...rowProps
+      return {
+        ...rowProps
       };
     });
-
     _defineProperty(this, "isAllRowsChecked", memoize((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;
     }));
-
     _defineProperty(this, "isAllRowsExpanded", memoize((rows, expandedRows) => this.flatData(rows).every(row => {
       if (!this.isRowExpandable(row)) {
         return true;
       }
-
       const key = getRowKey(row, this.props);
       return expandedRows.indexOf(key) !== -1;
     })));
-
     _defineProperty(this, "handleGlobalExpandingChange", () => {
       const {
         data
@@ -294,106 +262,99 @@ class List extends 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);
         }
       });
       this.setExpandedRows(nextExpandedRows);
     });
-
     _defineProperty(this, "createRowClickHandler", row => e => {
       if (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;
@@ -402,21 +363,18 @@ class List extends Component {
     nextState.prevExpandedRows = expandedRows;
     return nextState;
   }
-
   componentDidMount() {
     if (this.props.reorderable) {
-      import(
-      /* webpackChunkName: "react-movable" */
-      '@plesk/react-movable').then(({
-        List: ReorderableList
-      }) => {
+      import( /* webpackChunkName: "react-movable" */'@plesk/react-movable').then(_ref7 => {
+        let {
+          List: ReorderableList
+        } = _ref7;
         this.setState({
           ReorderableList
         });
       });
     }
   }
-
   componentDidUpdate(prevProps) {
     const {
       data
@@ -424,7 +382,6 @@ class List extends Component {
     const {
       data: prevData
     } = prevProps;
-
     if (data !== prevData && this.needScroll && this.anchorRef.current) {
       scrollIntoView(this.anchorRef.current, {
         scrollMode: 'if-needed'
@@ -432,7 +389,6 @@ class List extends Component {
       this.needScroll = false;
     }
   }
-
   getData() {
     const {
       sortInPlace,
@@ -443,34 +399,29 @@ class List extends 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
@@ -481,14 +432,12 @@ class List extends 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,
@@ -496,67 +445,56 @@ class List extends 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
     });
     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,
@@ -566,9 +504,12 @@ class List extends 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,
@@ -590,55 +531,50 @@ class List extends 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__*/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.createElement("div", {
           className: `${baseClassName}__truncate`
@@ -646,10 +582,8 @@ class List extends Component {
           truncate: true
         }, content));
       }
-
       if (vertical) {
         const hasColumnTitle = type !== 'internal' && type !== 'actions' && type !== 'title' && title;
-
         if (!isCellEmpty && type !== 'internal') {
           content = /*#__PURE__*/React.createElement(React.Fragment, null, hasColumnTitle && /*#__PURE__*/React.createElement("div", {
             className: `${baseClassName}__cell-inner-title`
@@ -657,19 +591,17 @@ class List extends Component {
             className: `${baseClassName}__cell-inner-content`
           }, content));
         }
-
         if (type === 'actions') {
           content = /*#__PURE__*/React.createElement(VerticalContext.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.createElement("td", _extends({
         key: key,
         style: style
@@ -693,7 +625,6 @@ class List extends Component {
       realColumn,
       parent: row
     })) : null);
-
     if (isDragged) {
       return /*#__PURE__*/React.createElement("div", _extends({
         className: classNames(baseClassName, `${baseClassName}--dragged`)
@@ -704,16 +635,15 @@ class List extends Component {
         })
       }, element));
     }
-
     return element;
   }
-
-  renderRowBody({
-    row,
-    index,
-    realColumn,
-    parent
-  }) {
+  renderRowBody(_ref12) {
+    let {
+      row,
+      index,
+      realColumn,
+      parent
+    } = _ref12;
     const {
       baseClassName,
       renderRowBody
@@ -721,17 +651,21 @@ class List extends 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__*/createRef();
     return /*#__PURE__*/React.createElement(CSSTransition, {
@@ -764,7 +698,6 @@ class List extends Component {
       parent
     })))))));
   }
-
   renderSelectAllButton() {
     const {
       allRowsSelected,
@@ -776,11 +709,9 @@ class List extends Component {
     const {
       selection
     } = this.state;
-
     if (allRowsSelected || selection.length === totalRows || !onSelectionChange) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement(Button, {
       ghost: true,
       onClick: () => {
@@ -794,7 +725,6 @@ class List extends Component {
       translators: locale
     }));
   }
-
   renderDeselectAllButton() {
     const {
       allRowsSelected,
@@ -805,11 +735,9 @@ class List extends Component {
     const {
       selection
     } = this.state;
-
     if (!allRowsSelected && selection.length === 0 || !onSelectionChange) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement(Button, {
       ghost: true,
       onClick: () => {
@@ -823,7 +751,6 @@ class List extends Component {
       translators: locale
     }));
   }
-
   renderToolbar() {
     const {
       toolbar,
@@ -836,19 +763,15 @@ class List extends 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.createElement(Translate, {
         namespace: "List",
@@ -862,38 +785,30 @@ class List extends Component {
       value: context
     }, toolbar);
   }
-
   shouldBePagination() {
     const {
       totalRows,
       pagination
     } = this.props;
-
     if (!pagination || !totalRows) {
       return false;
     }
-
     if (totalRows && /*#__PURE__*/isValidElement(pagination)) {
       const {
         itemsPerPageOptions = 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,
@@ -905,11 +820,9 @@ class List extends Component {
       selection
     } = this.state;
     const shouldBePagination = this.shouldBePagination();
-
     if (totalRows === undefined && !shouldBePagination) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__header`
     }, totalRows === undefined ? /*#__PURE__*/React.createElement("span", null) : /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
@@ -925,22 +838,18 @@ class List extends Component {
       className: `${baseClassName}__header-text`
     }, this.renderPagination('header')));
   }
-
   renderEmptyView() {
     const {
       emptyView,
       filtered
     } = this.props;
-
     if (emptyView === undefined) {
       return filtered ? /*#__PURE__*/React.createElement(ListEmptyView, {
         reason: "filtered"
       }) : /*#__PURE__*/React.createElement(ListEmptyView, null);
     }
-
     return emptyView;
   }
-
   renderPagination(placement) {
     const {
       pagination,
@@ -949,32 +858,27 @@ class List extends Component {
     const paginationProps = {
       loading
     };
-
     switch (placement) {
       case 'header':
         paginationProps.view = 'popover';
         break;
-
       case 'footer':
         paginationProps.onSelect = current => {
           this.needScroll = true;
           safeInvoke(pagination.props.onSelect, current);
         };
-
         if (pagination.props.onItemsPerPageChange) {
           paginationProps.onItemsPerPageChange = itemsPerPage => {
             this.needScroll = true;
             safeInvoke(pagination.props.onItemsPerPageChange, itemsPerPage);
           };
         }
-
         break;
     }
-
-    return /*#__PURE__*/cloneElement(pagination, { ...paginationProps
+    return /*#__PURE__*/cloneElement(pagination, {
+      ...paginationProps
     });
   }
-
   render() {
     const {
       baseClassName,
@@ -1013,46 +917,37 @@ class List extends 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 = classNames(...classList);
       }
-
       if (cellClassList.length) {
         newColumn.cellProps = {
           className: classNames(...cellClassList)
         };
       }
-
       return newColumn;
     });
-
     if (onSelectionChange) {
       const headerChecked = this.isAllRowsChecked(data, this.state.selection);
       const headerCheckboxProps = {
@@ -1071,17 +966,14 @@ class List extends Component {
           const {
             virtual
           } = this.getRowProps(row);
-
           if (virtual) {
             return null;
           }
-
           if (this.isRowLoading(row)) {
             return /*#__PURE__*/React.createElement(Spinner, {
               className: `${baseClassName}__spinner`
             });
           }
-
           const checkboxProps = {
             checked: this.isRowSelected(row),
             disabled: row.disabled,
@@ -1090,16 +982,13 @@ class List extends Component {
               value: getRowKey(row, this.props)
             }
           };
-
           if (typeof renderSelectionCheckbox === 'function') {
             return renderSelectionCheckbox(checkboxProps, row);
           }
-
           return /*#__PURE__*/React.createElement(Checkbox, checkboxProps);
         }
       });
     }
-
     if (renderRowBody) {
       realColumn.unshift({
         key: 'expander',
@@ -1144,7 +1033,6 @@ class List extends Component {
         })
       });
     }
-
     if (reorderable) {
       realColumn.unshift({
         key: 'reorderable',
@@ -1169,70 +1057,70 @@ class List extends 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.createElement(FocusVisibleManager, null, /*#__PURE__*/React.createElement("table", _extends({
-        className: classNames(`${baseClassName}__table`, {
-          [`${baseClassName}--expandable`]: renderRowBody,
-          [`${baseClassName}__table--vertical`]: vertical,
-          [`${baseClassName}__table--reorderable`]: reorderable
-        })
-      }, reorderableProps), hasTitle && /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
-        className: classNames(`${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.createElement("div", {
-            className: "th__action"
-          }, title);
-          headerProps.className = classNames({
-            '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.createElement("th", _extends({
-          key: key
-        }, headerProps), title);
-      }))), reorderable ? children : /*#__PURE__*/React.createElement("tbody", null, children)));
-
-      const renderItem = ({
-        value: {
-          row
-        },
-        index,
-        props: reorderableProps,
-        isDragged
-      }) => {
+      const renderList = _ref15 => {
+        let {
+          children,
+          props: reorderableProps
+        } = _ref15;
+        return /*#__PURE__*/React.createElement(FocusVisibleManager, null, /*#__PURE__*/React.createElement("table", _extends({
+          className: classNames(`${baseClassName}__table`, {
+            [`${baseClassName}--expandable`]: renderRowBody,
+            [`${baseClassName}__table--vertical`]: vertical,
+            [`${baseClassName}__table--reorderable`]: reorderable
+          })
+        }, reorderableProps), hasTitle && /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
+          className: classNames(`${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.createElement("div", {
+              className: "th__action"
+            }, title);
+            headerProps.className = classNames({
+              '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.createElement("th", _extends({
+            key: key
+          }, headerProps), title);
+        }))), reorderable ? children : /*#__PURE__*/React.createElement("tbody", null, children)));
+      };
+      const renderItem = _ref17 => {
+        let {
+          value: {
+            row
+          },
+          index,
+          props: reorderableProps,
+          isDragged
+        } = _ref17;
         return this.renderRow({
           row,
           index,
@@ -1242,26 +1130,27 @@ class List extends Component {
           isDragged
         });
       };
-
       if (reorderable) {
         const {
           ReorderableList
         } = this.state;
         content = /*#__PURE__*/React.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;
             safeInvoke(onReorderEnd, {
               oldIndex,
               newIndex
@@ -1289,13 +1178,11 @@ class List extends Component {
         });
       }
     }
-
     content = /*#__PURE__*/React.createElement("div", {
       className: classNames(`${baseClassName}__table-container`, {
         [`${baseClassName}__table-container--loading`]: loading
       })
     }, content);
-
     if (sidebar) {
       content = /*#__PURE__*/React.createElement(Columns, {
         gap: "md"
@@ -1303,9 +1190,7 @@ class List extends Component {
         fill: true
       }, content), /*#__PURE__*/React.createElement(Column, null, sidebar));
     }
-
     const shouldBePagination = this.shouldBePagination();
-
     const createRoot = ref => /*#__PURE__*/React.createElement("div", _extends({
       ref: ref,
       className: classNames(baseClassName, className)
@@ -1314,21 +1199,20 @@ class List extends Component {
     }), content, shouldBePagination && /*#__PURE__*/React.createElement("div", {
       className: `${baseClassName}__footer`
     }, this.renderPagination('footer')));
-
     if (typeof verticalProp === 'number') {
       return /*#__PURE__*/React.createElement(Measure, {
         bounds: true,
         onResize: this.handleResize
-      }, ({
-        measureRef
-      }) => createRoot(measureRef));
+      }, _ref20 => {
+        let {
+          measureRef
+        } = _ref20;
+        return createRoot(measureRef);
+      });
     }
-
     return createRoot();
   }
-
 }
-
 List.propTypes = {
   /**
    * Columns definition.
@@ -1342,39 +1226,32 @@ List.propTypes = {
      * Unique column key.
      */
     key: PropTypes.string.isRequired,
-
     /**
      * Column title.
      */
     title: PropTypes.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.func,
-
     /**
      * Is column sortable.
      * Default is `false`
      */
     sortable: PropTypes.bool,
-
     /**
      * Optional function for row comparison: `(row1, row2) => -1 | 0 | 1`
      */
     sort: PropTypes.func,
-
     /**
      * Column alignment.
      */
     align: PropTypes.oneOf(['left', 'center', 'right']),
-
     /**
      * Truncate the text in cell with an ellipsis.
      */
     truncate: PropTypes.bool,
-
     /**
      * Determine type of column content.
      *
@@ -1384,7 +1261,6 @@ List.propTypes = {
      */
     type: PropTypes.oneOf(['title', 'controls', 'actions'])
   })).isRequired,
-
   /**
    * Array of row objects.
    *
@@ -1396,145 +1272,121 @@ List.propTypes = {
      * Unique column key. This property can by renamed using `rowKey` property of List.
      */
     key: PropTypes.string,
-
     /**
      * Optional property for disabling ability to select this row.
      */
     disabled: PropTypes.bool,
-
     /**
      * Optional array of children rows.
      */
     data: PropTypes.array
   })),
-
   /**
    * Current sort column key
    * @since 0.0.42
    */
   sortColumn: PropTypes.string,
-
   /**
    * Sort direction of the column being sorted.
    * @since 0.0.42
    */
   sortDirection: PropTypes.oneOf(['ASC', 'DESC']),
-
   /**
    * Sort change handler
    * @since 0.0.42
    */
   onSortChange: PropTypes.func,
-
   /**
    * Array of keys of selected rows
    * @since 0.0.42
    */
   selection: PropTypes.array,
-
   /**
    * Selection change handler for list. Checkboxes will only be rendered if this prop is defined.
    * @since 0.0.42
    */
   onSelectionChange: PropTypes.func,
-
   /**
    * Renderer for a selection checkbox. Allow to replace checkboxes in the List by a custom implementation.
    * @since 3.19.0
    */
   renderSelectionCheckbox: PropTypes.func,
-
   /**
    * Row's key getter. Could be a string or function like: `row => <unique_string>`
    * @since 0.0.45
    */
   rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
   /**
    * Renderer for a row body. Should return ReactNode.
    * @since 1.12.0
    */
   renderRowBody: PropTypes.func,
-
   /**
    * Array of keys of expanded rows
    * @since 1.12.0
    */
   expandedRows: PropTypes.array,
-
   /**
    * Array of keys of rows which not have expand indicator
    * @since 1.12.0
    */
   notExpandableRows: PropTypes.array,
-
   /**
    * Rows expanding change handler.
    * @since 1.12.0
    */
   onExpandedRowsChange: PropTypes.func,
-
   /**
    * Array of keys of loading rows. They are displayed instead of checkboxes.
    * @since 2.5.0
    */
   loadingRows: PropTypes.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.node,
-
   /**
    * Total rows count, including nested rows. Usually, it uses together with pagination.
    * @since 2.4.0
    */
   totalRows: PropTypes.number,
-
   /**
    * A `Toolbar` element.
    * @since 2.4.0
    */
   toolbar: PropTypes.node,
-
   /**
    * A flag that all rows are selected.
    * @since 2.4.0
    */
   allRowsSelected: PropTypes.bool,
-
   /**
    * A callback executed when the allRowsSelected prop is changed.
    * @since 2.4.0
    */
   onAllRowsSelectedChange: PropTypes.func,
-
   /**
    * Filtered list. Manages toolbar visibility when data is absent and defines the defaults for empty view.
    * @since 3.0.1
    */
   filtered: PropTypes.bool,
-
   /**
    * A custom view for the case when data is absent.
    * @since 2.5.0
    */
   emptyView: PropTypes.node,
-
   /**
    * Which part of the List component should be replaced by the empty view.
    * @since 2.6.0
    * @deprecated Use `filtered` instead.
    */
   emptyViewMode: PropTypes.oneOf(['all', 'items']),
-
   /**
    * A slot on the right of the items.
    * @since 2.6.0
    */
   sidebar: PropTypes.node,
-
   /**
    * Custom localization messages.
    * @since 2.6.0
@@ -1546,20 +1398,17 @@ List.propTypes = {
     totalRows: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
     selectedRows: PropTypes.oneOfType([PropTypes.func, PropTypes.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.oneOfType([PropTypes.bool, PropTypes.number]),
-
   /**
    * Indicate the loading state of the list.
    * @since 3.3.1
    */
   loading: PropTypes.bool,
-
   /**
    * Apply some props to each row.
    *
@@ -1570,24 +1419,20 @@ List.propTypes = {
   rowProps: PropTypes.oneOfType([PropTypes.shape({
     virtual: PropTypes.bool
   }), PropTypes.func]),
-
   /**
    * Enable reorderable view.
    * @since 3.18.0
    */
   reorderable: PropTypes.bool,
-
   /**
    * Reorder end handler.
    * @since 3.18.0
    */
   onReorderEnd: PropTypes.func,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * @ignore
    */