@plesk/ui-library 3.36.0 → 3.37.0

package/esm/components/List/List.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // Copyright 1999-2023. Plesk International GmbH. All rights reserved.
 
-import React, { Component, Fragment, cloneElement, isValidElement, createRef } from 'react';
+import { Fragment, cloneElement, isValidElement, createRef, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
@@ -25,7 +25,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-const getRowKey = (row, props) => {
+// eslint-disable-next-line func-style
+function getRowKey(row, props) {
   const {
     rowKey
   } = props;
@@ -33,7 +34,7 @@ const getRowKey = (row, props) => {
     return rowKey(row);
   }
   return row[rowKey];
-};
+}
 const Tbody = _ref => {
   let {
     baseClassName,
@@ -133,7 +134,6 @@ const getHumanTotalRows = _ref2 => {
       return null;
   }
 };
-
 /**
  * `List` component is used for displaying a collection of tabular data.
  * [More details about designing of lists.](#!/Sets%20of%20Objects)
@@ -145,26 +145,32 @@ class List extends Component {
     _defineProperty(this, "state", {
       sortInPlace: !this.props.pagination,
       vertical: false,
-      expandedRows: this.props.expandedRows,
-      prevExpandedRows: this.props.expandedRows,
-      selection: this.props.selection,
-      prevSelection: this.props.selection,
-      ReorderableList: () => null,
-      reorderableItemWidths: []
+      expandedRows: this.props.expandedRows ?? [],
+      ReorderableList: undefined,
+      reorderableItemWidths: [],
+      prevExpandedRows: this.props.expandedRows ?? [],
+      sortColumn: undefined,
+      prevSortColumn: undefined,
+      sortDirection: undefined,
+      prevSortDirection: undefined,
+      selection: this.props.selection ?? [],
+      prevSelection: this.props.selection ?? [],
+      prevData: [],
+      prevPagination: undefined
     });
+    _defineProperty(this, "needScroll", false);
     _defineProperty(this, "anchorRef", /*#__PURE__*/createRef());
-    _defineProperty(this, "flatData", data => data.reduce((acc, _ref3) => {
-      let {
-        data,
-        ...row
-      } = _ref3;
+    _defineProperty(this, "flatData", data => data.reduce((acc, item) => {
+      const {
+        data
+      } = item;
       const {
         virtual
-      } = this.getRowProps(row);
+      } = this.getRowProps(item);
       if (virtual) {
         return [...acc, ...(data ? this.flatData(data) : [])];
       }
-      return [...acc, row, ...(data ? this.flatData(data) : [])];
+      return [...acc, item, ...(data ? this.flatData(data) : [])];
     }, []));
     _defineProperty(this, "handleRowSelectionChange", (checked, rowKey) => {
       const {
@@ -182,13 +188,14 @@ class List extends Component {
     });
     _defineProperty(this, "handleGlobalSelectionChange", headerChecked => {
       const {
-        onAllRowsSelectedChange
+        onAllRowsSelectedChange,
+        data
       } = this.props;
       const {
         selection
       } = this.state;
       const nextSelection = [];
-      this.flatData(this.props.data).forEach(row => {
+      this.flatData(data ?? []).forEach(row => {
         const key = getRowKey(row, this.props);
         if (row.disabled || this.isRowLoading(row)) {
           if (selection.indexOf(key) !== -1) {
@@ -205,15 +212,17 @@ class List extends Component {
       }
       this.setSelection(nextSelection);
     });
-    _defineProperty(this, "handleResize", _ref4 => {
+    _defineProperty(this, "handleResize", _ref3 => {
       let {
         bounds
-      } = _ref4;
-      this.setState({
-        vertical: bounds.width < this.props.vertical
-      });
+      } = _ref3;
+      if (bounds && this.props.vertical) {
+        this.setState({
+          vertical: typeof this.props.vertical === 'boolean' ? this.props.vertical : bounds.width < this.props.vertical
+        });
+      }
     });
-    _defineProperty(this, "isRowLoading", row => this.props.loadingRows.indexOf(getRowKey(row, this.props)) !== -1);
+    _defineProperty(this, "isRowLoading", row => this.props.loadingRows?.indexOf(getRowKey(row, this.props)) !== -1);
     _defineProperty(this, "getRowTitle", row => {
       const {
         columns
@@ -260,7 +269,7 @@ class List extends Component {
       } = this.state;
       const headerExpanded = this.isAnyRowsExpanded(data, expandedRows);
       const nextExpandedRows = [];
-      this.flatData(this.props.data).forEach(row => {
+      this.flatData(data ?? []).forEach(row => {
         const key = getRowKey(row, this.props);
         if (!this.isRowExpandable(row)) {
           if (expandedRows.indexOf(key) !== -1) {
@@ -283,7 +292,7 @@ class List extends Component {
       }
     });
   }
-  static getDerivedStateFromProps(_ref5, _ref6) {
+  static getDerivedStateFromProps(_ref4, _ref5) {
     let {
       sortColumn,
       sortDirection,
@@ -297,7 +306,7 @@ class List extends Component {
       rowKey,
       totalRows,
       filtered
-    } = _ref5;
+    } = _ref4;
     let {
       prevSortColumn,
       prevSortDirection,
@@ -306,7 +315,7 @@ class List extends Component {
       prevPagination,
       prevExpandedRows,
       ...state
-    } = _ref6;
+    } = _ref5;
     let nextState = {};
     if (prevSortColumn !== sortColumn || prevSortDirection !== sortDirection) {
       nextState = {
@@ -317,18 +326,18 @@ class List extends Component {
     }
     const additionalExpanded = [];
     if (prevData !== data) {
-      const isSingleElementInCurrentExpanded = () => state.expandedRows.includes(getRowKey(data[0], {
+      const isSingleElementInCurrentExpanded = () => data && state.expandedRows.includes(getRowKey(data[0], {
         rowKey
       }));
       if (renderRowBody && data?.length === 1 && (!pagination || totalRows === 1) && (!prevData || prevData?.length === 0 || isSingleElementInCurrentExpanded()) && (!filtered || isSingleElementInCurrentExpanded())) {
         const key = getRowKey(data[0], {
           rowKey
         });
-        if (notExpandableRows.indexOf(key) === -1) {
+        if (notExpandableRows?.indexOf(key) === -1) {
           additionalExpanded.push(key);
         }
       }
-      const keys = data.map(row => getRowKey(row, {
+      const keys = (data ?? []).map(row => getRowKey(row, {
         rowKey
       }));
       const nextSelection = state.selection.filter(key => keys.indexOf(key) !== -1);
@@ -340,13 +349,13 @@ class List extends Component {
     if (prevSelection !== selection) {
       nextState = {
         ...nextState,
-        selection
+        selection: selection ?? []
       };
     }
     if (prevExpandedRows !== expandedRows || additionalExpanded.length) {
       nextState = {
         ...nextState,
-        expandedRows: [...expandedRows, ...additionalExpanded]
+        expandedRows: [...(expandedRows ?? []), ...additionalExpanded]
       };
     }
     if (prevPagination !== pagination) {
@@ -389,10 +398,11 @@ class List extends Component {
     }
   }
   applyReorderableList() {
-    import( /* webpackChunkName: "react-movable" */'@plesk/react-movable').then(_ref7 => {
+    import( /* webpackChunkName: "react-movable" */'@plesk/react-movable').then(_ref6 => {
       let {
         List: ReorderableList
-      } = _ref7;
+      } = _ref6;
+      // @ts-expect-error
       this.setState({
         ReorderableList
       });
@@ -408,13 +418,16 @@ class List extends Component {
       data,
       columns
     } = this.props;
+    if (!data) {
+      return [];
+    }
     if (!sortInPlace) {
       return data;
     }
-    const [column] = columns.filter(_ref8 => {
+    const [column] = columns.filter(_ref7 => {
       let {
         key
-      } = _ref8;
+      } = _ref7;
       return key === sortColumn;
     });
     const defaultSort = (a, b) => {
@@ -426,7 +439,7 @@ class List extends Component {
       }
       return 0;
     };
-    if (!column) {
+    if (!column || !sortColumn) {
       return data;
     }
     return data.sort((a, b) => (column.sort ? column.sort(a, b) : defaultSort(a[sortColumn], b[sortColumn])) * (sortDirection === 'ASC' ? 1 : -1));
@@ -435,22 +448,22 @@ class List extends Component {
     const {
       sortInPlace
     } = this.state;
-    let {
+    const {
       sortColumn,
       sortDirection
     } = this.state;
-    sortDirection = sortColumn === columnKey && sortDirection === 'ASC' ? 'DESC' : 'ASC';
-    sortColumn = columnKey;
+    const nextSortDirection = sortColumn === columnKey && sortDirection === 'ASC' ? 'DESC' : 'ASC';
+    const nextSortColumn = columnKey;
     if (sortInPlace) {
       this.setState({
-        sortColumn,
-        sortDirection
+        sortColumn: nextSortColumn,
+        sortDirection: nextSortDirection
       });
     }
     if (this.props.onSortChange) {
       this.props.onSortChange({
-        sortColumn,
-        sortDirection
+        sortColumn: nextSortColumn,
+        sortDirection: nextSortDirection
       });
     }
   }
@@ -475,7 +488,7 @@ class List extends Component {
     if (virtual) {
       return false;
     }
-    return this.props.notExpandableRows.indexOf(getRowKey(row, this.props)) === -1;
+    return this.props.notExpandableRows?.indexOf(getRowKey(row, this.props)) === -1;
   }
   handleRowExpandingChange(row) {
     let expandedRows;
@@ -494,7 +507,7 @@ class List extends Component {
     });
     safeInvoke(this.props.onExpandedRowsChange, expandedRows.slice());
   }
-  renderRow(_ref9) {
+  renderRow(_ref8) {
     let {
       row,
       index,
@@ -503,7 +516,7 @@ class List extends Component {
       parent,
       isDragged,
       reorderableProps
-    } = _ref9;
+    } = _ref8;
     const {
       baseClassName,
       renderRowBody,
@@ -513,10 +526,10 @@ class List extends Component {
       vertical,
       reorderableItemWidths
     } = this.state;
-    const hasActions = realColumn.some(_ref10 => {
+    const hasActions = realColumn.some(_ref9 => {
       let {
         type
-      } = _ref10;
+      } = _ref9;
       return type === 'actions';
     });
     const {
@@ -542,7 +555,7 @@ class List extends Component {
       }, className),
       ...rowProps,
       onClick: renderRowBody ? this.createRowClickHandler(row) : undefined,
-      children: realColumn.map((_ref11, index) => {
+      children: realColumn.map((_ref10, index) => {
         let {
           key,
           title,
@@ -551,7 +564,7 @@ class List extends Component {
           cellProps,
           truncate,
           type
-        } = _ref11;
+        } = _ref10;
         if (skipCells > 0) {
           skipCells -= 1;
           return null;
@@ -562,7 +575,7 @@ class List extends Component {
             width
           };
         }
-        if (isDragged) {
+        if (isDragged && reorderableItemWidths) {
           style = {
             width: reorderableItemWidths[index]
           };
@@ -659,13 +672,13 @@ class List extends Component {
     }
     return element;
   }
-  renderRowBody(_ref12) {
+  renderRowBody(_ref11) {
     let {
       row,
       index,
       realColumn,
       parent
-    } = _ref12;
+    } = _ref11;
     const {
       baseClassName,
       renderRowBody
@@ -676,16 +689,16 @@ class List extends Component {
     if (!renderRowBody) {
       return null;
     }
-    const reorderable = realColumn.find(_ref13 => {
+    const reorderable = realColumn.find(_ref12 => {
       let {
         key
-      } = _ref13;
+      } = _ref12;
       return key === 'reorderable';
     });
-    const expander = realColumn.find(_ref14 => {
+    const expander = realColumn.find(_ref13 => {
       let {
         key
-      } = _ref14;
+      } = _ref13;
       return key === 'expander';
     });
     const isRowExpanded = this.isRowExpanded(row);
@@ -830,7 +843,7 @@ class List extends Component {
         itemsPerPageOptions = ITEMS_PER_PAGE_OPTIONS
       } = pagination.props;
       if (Array.isArray(itemsPerPageOptions)) {
-        const numericOptions = itemsPerPageOptions.filter(v => Number(v) === v);
+        const numericOptions = itemsPerPageOptions.filter(Number);
         if (numericOptions.length) {
           const min = Math.min(...numericOptions);
           if (totalRows <= min) {
@@ -893,6 +906,9 @@ class List extends Component {
       pagination,
       loading
     } = this.props;
+    if (!pagination) {
+      return null;
+    }
     const paginationProps = {
       loading
     };
@@ -955,7 +971,7 @@ class List extends Component {
     const {
       vertical
     } = this.state;
-    if (false === (data && data.length > 0) && !filtered && emptyViewMode === 'all') {
+    if (!(data && data.length > 0) && !filtered && emptyViewMode === 'all') {
       return this.renderEmptyView();
     }
     const realColumn = columns.map((column, i) => {
@@ -1107,14 +1123,14 @@ class List extends Component {
     }
     const hasTitle = !vertical && columns.some(column => column.title);
     let content;
-    if (false === (data && data.length > 0) && (filtered || emptyViewMode === 'items')) {
+    if (!(data && data.length > 0) && (filtered || emptyViewMode === 'items')) {
       content = this.renderEmptyView();
     } else {
-      const renderList = _ref15 => {
+      const renderList = _ref14 => {
         let {
           children,
           props: reorderableProps
-        } = _ref15;
+        } = _ref14;
         return /*#__PURE__*/_jsx(FocusVisibleManager, {
           children: /*#__PURE__*/_jsxs("table", {
             className: classNames(`${baseClassName}__table`, {
@@ -1128,7 +1144,7 @@ class List extends Component {
                 className: classNames(`${baseClassName}__table-thead`, {
                   [`${baseClassName}__row--expanded`]: this.isAnyRowsExpanded(data, this.state.expandedRows)
                 }),
-                children: realColumn.map(_ref16 => {
+                children: realColumn.map(_ref15 => {
                   let {
                     key,
                     title,
@@ -1140,7 +1156,7 @@ class List extends Component {
                     type,
                     cellProps,
                     ...headerProps
-                  } = _ref16;
+                  } = _ref15;
                   if (sortable) {
                     title = /*#__PURE__*/_jsx("div", {
                       className: "th__action",
@@ -1171,7 +1187,7 @@ class List extends Component {
           })
         });
       };
-      const renderItem = _ref17 => {
+      const renderItem = _ref16 => {
         let {
           value: {
             row
@@ -1179,7 +1195,7 @@ class List extends Component {
           index,
           props: reorderableProps,
           isDragged
-        } = _ref17;
+        } = _ref16;
         return this.renderRow({
           row,
           index,
@@ -1189,27 +1205,27 @@ class List extends Component {
           isDragged
         });
       };
-      if (reorderable) {
+      if (reorderable && this.state.ReorderableList) {
         const {
           ReorderableList
         } = this.state;
         content = /*#__PURE__*/_jsx(ReorderableList, {
-          beforeDrag: _ref18 => {
+          beforeDrag: _ref17 => {
             let {
               elements,
               index
-            } = _ref18;
+            } = _ref17;
             const cells = Array.from(elements[index].firstElementChild.children);
             const reorderableItemWidths = cells.map(cell => window.getComputedStyle(cell).width);
             this.setState({
               reorderableItemWidths
             });
           },
-          onChange: _ref19 => {
+          onChange: _ref18 => {
             let {
               oldIndex,
               newIndex
-            } = _ref19;
+            } = _ref18;
             safeInvoke(onReorderEnd, {
               oldIndex,
               newIndex
@@ -1222,9 +1238,11 @@ class List extends Component {
           renderItem: renderItem,
           lockVertically: true,
           hooks: {
-            getChildren: children => children.filter(node => node.nodeName !== 'THEAD')
+            getChildren: children =>
+            // @ts-expect-error
+            children.filter(node => node.nodeName !== 'THEAD')
           },
-          useDragHandle: true
+          useDragHandle: false
         });
       } else {
         content = renderList({
@@ -1274,10 +1292,10 @@ class List extends Component {
       return /*#__PURE__*/_jsx(Measure, {
         bounds: true,
         onResize: this.handleResize,
-        children: _ref20 => {
+        children: _ref19 => {
           let {
             measureRef
-          } = _ref20;
+          } = _ref19;
           return createRoot(measureRef);
         }
       });
@@ -1285,242 +1303,12 @@ class List extends Component {
     return createRoot();
   }
 }
-List.propTypes = {
-  /**
-   * Columns definition.
-   *
-   * In addition to the properties described below, you can use any native properties
-   * supported by the `TH` element like `className`, `style`, etc.
-   * @since 0.0.42
-   */
-  columns: PropTypes.arrayOf(PropTypes.shape({
-    /**
-     * 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.
-     *
-     * * title - There should a title of the row.
-     * * controls - There should be some control: a button or a dropdown.
-     * * actions - There should be the ListAction component.
-     */
-    type: PropTypes.oneOf(['title', 'controls', 'actions'])
-  })).isRequired,
-  /**
-   * Array of row objects.
-   *
-   * Each row must contains `key` property, all columns keys, and can contain `disabled` property.
-   * @since 0.0.42
-   */
-  data: PropTypes.arrayOf(PropTypes.shape({
-    /**
-     * 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,
-    /**
-     * An optional property to change the appearance of this row.<br />
-     *  `inactive, info, success, warning, danger`. (Since: 3.33.0)
-     */
-    intent: PropTypes.oneOf(['inactive', 'info', 'success', 'warning', 'danger'])
-  })),
-  /**
-   * 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
-   */
-  locale: PropTypes.shape({
-    selectAll: PropTypes.node,
-    deselectAll: PropTypes.node,
-    all: PropTypes.node,
-    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.
-   *
-   * `virtual` - Virtual row does not have any controls.
-   *
-   * @since 3.11.0
-   */
-  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
-   */
-  baseClassName: PropTypes.string
-};
-List.defaultProps = {
+_defineProperty(List, "defaultProps", {
   data: [],
-  sortColumn: null,
+  sortColumn: undefined,
   sortDirection: 'ASC',
-  onSortChange: null,
-  onSelectionChange: null,
+  onSortChange: undefined,
+  onSelectionChange: undefined,
   selection: [],
   renderSelectionCheckbox: undefined,
   rowKey: 'key',
@@ -1529,7 +1317,7 @@ List.defaultProps = {
   notExpandableRows: [],
   onExpandedRowsChange: undefined,
   loadingRows: [],
-  className: null,
+  className: '',
   baseClassName: `${CLS_PREFIX}list`,
   pagination: undefined,
   totalRows: undefined,
@@ -1546,5 +1334,5 @@ List.defaultProps = {
   rowProps: undefined,
   reorderable: false,
   onReorderEnd: undefined
-};
+});
 export default List;