@plesk/ui-library 3.31.2 → 3.32.0

package/esm/components/List/List.js

@@ -1,9 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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';
@@ -24,6 +21,10 @@ import VerticalContext, { VERTICAL_BREAKPOINT } from '../VerticalContext';
 import ListEmptyView from './ListEmptyView';
 import Columns, { Column } from '../Columns';
 import { FocusVisibleManager, useFocusVisible } from 'use-focus-visible';
+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) => {
   const {
     rowKey
@@ -44,13 +45,14 @@ const Tbody = _ref => {
     onFocus,
     onBlur
   } = useFocusVisible();
-  return /*#__PURE__*/React.createElement("tbody", _extends({}, props, {
+  return /*#__PURE__*/_jsx("tbody", {
+    ...props,
     onFocus: wrapFunction(props.onFocus, onFocus),
     onBlur: wrapFunction(props.onBlur, onBlur),
     className: classNames(className, {
       [`${baseClassName}--focus-visible`]: focusVisible
     })
-  }));
+  });
 };
 Tbody.propTypes = {
   onFocus: PropTypes.func,
@@ -64,8 +66,6 @@ Tbody.defaultProps = {
   className: undefined,
   baseClassName: `${CLS_PREFIX}list__wrapper`
 };
-
-// eslint-disable-next-line react/prop-types
 const getHumanTotalRows = _ref2 => {
   let {
     selectedRows,
@@ -81,12 +81,13 @@ const getHumanTotalRows = _ref2 => {
   } else {
     mode = 'selectedRows';
   }
-  const wrapToText = element => /*#__PURE__*/React.createElement(Text, {
-    fontSize: "sm"
-  }, element);
+  const wrapToText = element => /*#__PURE__*/_jsx(Text, {
+    fontSize: "sm",
+    children: element
+  });
   switch (mode) {
     case 'totalRows':
-      return wrapToText( /*#__PURE__*/React.createElement(Translate, {
+      return wrapToText( /*#__PURE__*/_jsx(Translate, {
         namespace: "List",
         content: "totalRows",
         fallback: "%%totalRows%% items total",
@@ -96,32 +97,34 @@ const getHumanTotalRows = _ref2 => {
         translators: translators
       }));
     case 'selectedRows':
-      return wrapToText( /*#__PURE__*/React.createElement(Translate, {
+      return wrapToText( /*#__PURE__*/_jsx(Translate, {
         namespace: "List",
         content: "selectedRows",
         fallback: "%%selectedRows%% of %%totalRows%% items selected",
         params: {
-          selectedRows: /*#__PURE__*/React.createElement(Text, {
-            bold: true
-          }, selectedRows),
+          selectedRows: /*#__PURE__*/_jsx(Text, {
+            bold: true,
+            children: selectedRows
+          }),
           totalRows
         },
         translators: translators
       }));
     case 'selectedAllRows':
-      return wrapToText( /*#__PURE__*/React.createElement(Translate, {
+      return wrapToText( /*#__PURE__*/_jsx(Translate, {
         namespace: "List",
         content: "selectedRows",
         fallback: "%%selectedRows%% of %%totalRows%% items selected",
         params: {
-          selectedRows: /*#__PURE__*/React.createElement(Text, {
-            bold: true
-          }, /*#__PURE__*/React.createElement(Translate, {
-            namespace: "List",
-            content: "all",
-            fallback: "All",
-            translators: translators
-          })),
+          selectedRows: /*#__PURE__*/_jsx(Text, {
+            bold: true,
+            children: /*#__PURE__*/_jsx(Translate, {
+              namespace: "List",
+              content: "all",
+              fallback: "All",
+              translators: translators
+            })
+          }),
           totalRows
         },
         translators: translators
@@ -523,9 +526,10 @@ class List extends Component {
     } = this.getRowProps(row);
     let skipCells = 0;
     const Wrapper = reorderable && !parent ? Tbody : Fragment;
-    const element = /*#__PURE__*/React.createElement(Wrapper, _extends({}, Wrapper === Tbody && !isDragged ? reorderableProps : undefined, {
+    const element = /*#__PURE__*/_createElement(Wrapper, {
+      ...(Wrapper === Tbody && !isDragged ? reorderableProps : undefined),
       key: getRowKey(row, this.props)
-    }), /*#__PURE__*/React.createElement("tr", _extends({
+    }, /*#__PURE__*/_jsx("tr", {
       className: classNames({
         'is-selected': this.isRowSelected(row),
         [`${baseClassName}__row--expanded`]: this.isRowExpanded(row),
@@ -534,92 +538,100 @@ class List extends Component {
         [`${baseClassName}__row--virtual`]: virtual,
         [`${baseClassName}__row--child`]: parent,
         [`${baseClassName}__row--reorderable`]: reorderable
-      }, className)
-    }, rowProps, {
-      onClick: renderRowBody ? this.createRowClickHandler(row) : undefined
-    }), 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
-      if (content && content.children && ! /*#__PURE__*/isValidElement(content)) {
-        const {
-          children,
-          ...other
-        } = content;
-        content = children;
-        cellProps = {
-          ...cellProps,
-          ...other
-        };
-        if (other.colSpan) {
-          skipCells += other.colSpan - 1;
+      }, className),
+      ...rowProps,
+      onClick: renderRowBody ? this.createRowClickHandler(row) : undefined,
+      children: realColumn.map((_ref11, index) => {
+        let {
+          key,
+          title,
+          render,
+          width,
+          cellProps,
+          truncate,
+          type
+        } = _ref11;
+        if (skipCells > 0) {
+          skipCells -= 1;
+          return null;
         }
-      }
-      const isCellEmpty = !title && !content;
-      if (truncate) {
-        content = /*#__PURE__*/React.createElement("div", {
-          className: `${baseClassName}__truncate`
-        }, /*#__PURE__*/React.createElement(Text, {
-          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`
-          }, title), /*#__PURE__*/React.createElement("div", {
-            className: `${baseClassName}__cell-inner-content`
-          }, content));
+        let style;
+        if (!hasTitle && width && !vertical) {
+          style = {
+            width
+          };
         }
-        if (type === 'actions') {
-          content = /*#__PURE__*/React.createElement(VerticalContext.Provider, {
-            value: true
-          }, content);
+        if (isDragged) {
+          style = {
+            width: reorderableItemWidths[index]
+          };
+        }
+        let content = render ? render(row, {
+          parent
+        }) : row[key];
+        // cell props from render
+        if (content && content.children && ! /*#__PURE__*/isValidElement(content)) {
+          const {
+            children,
+            ...other
+          } = content;
+          content = children;
+          cellProps = {
+            ...cellProps,
+            ...other
+          };
+          if (other.colSpan) {
+            skipCells += other.colSpan - 1;
+          }
+        }
+        const isCellEmpty = !title && !content;
+        if (truncate) {
+          content = /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__truncate`,
+            children: /*#__PURE__*/_jsx(Text, {
+              truncate: true,
+              children: content
+            })
+          });
+        }
+        if (vertical) {
+          const hasColumnTitle = type !== 'internal' && type !== 'actions' && type !== 'title' && title;
+          if (!isCellEmpty && type !== 'internal') {
+            content = /*#__PURE__*/_jsxs(_Fragment, {
+              children: [hasColumnTitle && /*#__PURE__*/_jsx("div", {
+                className: `${baseClassName}__cell-inner-title`,
+                children: title
+              }), /*#__PURE__*/_jsx("div", {
+                className: `${baseClassName}__cell-inner-content`,
+                children: content
+              })]
+            });
+          }
+          if (type === 'actions') {
+            content = /*#__PURE__*/_jsx(VerticalContext.Provider, {
+              value: true,
+              children: content
+            });
+          }
         }
-      }
 
-      // 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
-      }, cellProps, {
-        className: classNames(cellProps && cellProps.className, {
-          [`${baseClassName}__cell-controls`]: type === 'controls',
-          [`${baseClassName}__cell-actions`]: type === 'actions',
-          [`${baseClassName}__cell-title`]: type === 'title',
-          [`${baseClassName}__cell-has-actions`]: type === 'title' && hasActions
-        }) || undefined
-      }), content);
-    })), renderRowBody && !virtual && this.renderRowBody({
+        // do not render reorderable handler for nested rows
+        if (key === 'reorderable' && type === 'internal' && parent) {
+          content = null;
+        }
+        return /*#__PURE__*/_jsx("td", {
+          style: style,
+          ...cellProps,
+          className: classNames(cellProps && cellProps.className, {
+            [`${baseClassName}__cell-controls`]: type === 'controls',
+            [`${baseClassName}__cell-actions`]: type === 'actions',
+            [`${baseClassName}__cell-title`]: type === 'title',
+            [`${baseClassName}__cell-has-actions`]: type === 'title' && hasActions
+          }) || undefined,
+          children: content
+        }, key);
+      })
+    }), renderRowBody && !virtual && this.renderRowBody({
       row,
       index,
       realColumn,
@@ -632,14 +644,17 @@ class List extends Component {
       parent: row
     })) : null);
     if (isDragged) {
-      return /*#__PURE__*/React.createElement("div", _extends({
-        className: classNames(baseClassName, `${baseClassName}--dragged`)
-      }, reorderableProps), /*#__PURE__*/React.createElement("table", {
-        className: classNames(`${baseClassName}__table`, `${baseClassName}__table--reorderable`, {
-          [`${baseClassName}--expandable`]: renderRowBody,
-          [`${baseClassName}__table--vertical`]: vertical
+      return /*#__PURE__*/_jsx("div", {
+        className: classNames(baseClassName, `${baseClassName}--dragged`),
+        ...reorderableProps,
+        children: /*#__PURE__*/_jsx("table", {
+          className: classNames(`${baseClassName}__table`, `${baseClassName}__table--reorderable`, {
+            [`${baseClassName}--expandable`]: renderRowBody,
+            [`${baseClassName}__table--vertical`]: vertical
+          }),
+          children: element
         })
-      }, element));
+      });
     }
     return element;
   }
@@ -674,7 +689,7 @@ class List extends Component {
     });
     const isRowExpanded = this.isRowExpanded(row);
     const trRef = /*#__PURE__*/createRef();
-    return /*#__PURE__*/React.createElement(CSSTransition, {
+    return /*#__PURE__*/_jsx(CSSTransition, {
       in: isRowExpanded,
       unmountOnExit: true,
       timeout: {
@@ -682,27 +697,33 @@ class List extends Component {
         exit: 300
       },
       classNames: `${baseClassName}__row-body-`,
-      nodeRef: trRef
-    }, state => /*#__PURE__*/React.createElement("tr", {
-      className: `${baseClassName}__row-body`,
-      ref: trRef
-    }, reorderable ? /*#__PURE__*/React.createElement("td", {
-      className: `${baseClassName}__cell-reorderable`
-    }) : null, expander ? /*#__PURE__*/React.createElement("td", {
-      className: `${baseClassName}__cell-expander`
-    }) : null, /*#__PURE__*/React.createElement("td", {
-      colSpan: realColumn.length - (reorderable ? 1 : 0) - (expander ? 1 : 0),
-      className: `${baseClassName}__cell-body`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__row-body-content-wrapper`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__row-body-content ${baseClassName}__row-body-content--${state}`
-    }, /*#__PURE__*/React.createElement(VerticalContext.Provider, {
-      value: vertical
-    }, renderRowBody(row, {
-      index,
-      parent
-    })))))));
+      nodeRef: trRef,
+      children: state => /*#__PURE__*/_jsxs("tr", {
+        className: `${baseClassName}__row-body`,
+        ref: trRef,
+        children: [reorderable ? /*#__PURE__*/_jsx("td", {
+          className: `${baseClassName}__cell-reorderable`
+        }) : null, expander ? /*#__PURE__*/_jsx("td", {
+          className: `${baseClassName}__cell-expander`
+        }) : null, /*#__PURE__*/_jsx("td", {
+          colSpan: realColumn.length - (reorderable ? 1 : 0) - (expander ? 1 : 0),
+          className: `${baseClassName}__cell-body`,
+          children: /*#__PURE__*/_jsx("div", {
+            className: `${baseClassName}__row-body-content-wrapper`,
+            children: /*#__PURE__*/_jsx("div", {
+              className: `${baseClassName}__row-body-content ${baseClassName}__row-body-content--${state}`,
+              children: /*#__PURE__*/_jsx(VerticalContext.Provider, {
+                value: vertical,
+                children: renderRowBody(row, {
+                  index,
+                  parent
+                })
+              })
+            })
+          })
+        })]
+      })
+    });
   }
   renderSelectAllButton() {
     const {
@@ -718,18 +739,19 @@ class List extends Component {
     if (allRowsSelected || selection.length === totalRows || !onSelectionChange) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/_jsx(Button, {
       ghost: true,
       onClick: () => {
         this.handleGlobalSelectionChange(true);
         safeInvoke(onAllRowsSelectedChange, true);
-      }
-    }, /*#__PURE__*/React.createElement(Translate, {
-      namespace: "List",
-      content: "selectAll",
-      fallback: "Select all",
-      translators: locale
-    }));
+      },
+      children: /*#__PURE__*/_jsx(Translate, {
+        namespace: "List",
+        content: "selectAll",
+        fallback: "Select all",
+        translators: locale
+      })
+    });
   }
   renderDeselectAllButton() {
     const {
@@ -744,18 +766,19 @@ class List extends Component {
     if (!allRowsSelected && selection.length === 0 || !onSelectionChange) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/_jsx(Button, {
       ghost: true,
       onClick: () => {
         this.handleGlobalSelectionChange(false);
         safeInvoke(onAllRowsSelectedChange, false);
-      }
-    }, /*#__PURE__*/React.createElement(Translate, {
-      namespace: "List",
-      content: "deselectAll",
-      fallback: "Deselect",
-      translators: locale
-    }));
+      },
+      children: /*#__PURE__*/_jsx(Translate, {
+        namespace: "List",
+        content: "deselectAll",
+        fallback: "Deselect",
+        translators: locale
+      })
+    });
   }
   renderToolbar() {
     const {
@@ -778,8 +801,9 @@ class List extends Component {
     if (!toolbar) {
       return null;
     }
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
     const context = {
-      selectedRows: allRowsSelected ? totalRows || /*#__PURE__*/React.createElement(Translate, {
+      selectedRows: allRowsSelected ? totalRows || /*#__PURE__*/_jsx(Translate, {
         namespace: "List",
         content: "all",
         fallback: "all",
@@ -787,9 +811,10 @@ class List extends Component {
       }) : selection.length,
       selectedRowTitle
     };
-    return /*#__PURE__*/React.createElement(ListOperationContext.Provider, {
-      value: context
-    }, toolbar);
+    return /*#__PURE__*/_jsx(ListOperationContext.Provider, {
+      value: context,
+      children: toolbar
+    });
   }
   shouldBePagination() {
     const {
@@ -829,20 +854,26 @@ class List extends Component {
     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", {
-      className: `${baseClassName}__header-text`
-    }, getHumanTotalRows({
-      selectedRows: selection.length,
-      totalRows,
-      allRowsSelected,
-      translators: locale
-    })), ` `, /*#__PURE__*/React.createElement("span", {
-      className: `${baseClassName}__header-buttons`
-    }, this.renderSelectAllButton(), this.renderDeselectAllButton())), shouldBePagination && /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__header-text`
-    }, this.renderPagination('header')));
+    return /*#__PURE__*/_jsxs("div", {
+      className: `${baseClassName}__header`,
+      children: [totalRows === undefined ? /*#__PURE__*/_jsx("span", {}) : /*#__PURE__*/_jsxs("span", {
+        children: [/*#__PURE__*/_jsx("span", {
+          className: `${baseClassName}__header-text`,
+          children: getHumanTotalRows({
+            selectedRows: selection.length,
+            totalRows,
+            allRowsSelected,
+            translators: locale
+          })
+        }), ` `, /*#__PURE__*/_jsxs("span", {
+          className: `${baseClassName}__header-buttons`,
+          children: [this.renderSelectAllButton(), this.renderDeselectAllButton()]
+        })]
+      }), shouldBePagination && /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__header-text`,
+        children: this.renderPagination('header')
+      })]
+    });
   }
   renderEmptyView() {
     const {
@@ -850,9 +881,9 @@ class List extends Component {
       filtered
     } = this.props;
     if (emptyView === undefined) {
-      return filtered ? /*#__PURE__*/React.createElement(ListEmptyView, {
+      return filtered ? /*#__PURE__*/_jsx(ListEmptyView, {
         reason: "filtered"
-      }) : /*#__PURE__*/React.createElement(ListEmptyView, null);
+      }) : /*#__PURE__*/_jsx(ListEmptyView, {});
     }
     return emptyView;
   }
@@ -967,7 +998,9 @@ class List extends Component {
         cellProps: {
           className: `${baseClassName}__cell-selection`
         },
-        title: typeof renderSelectionCheckbox === 'function' ? renderSelectionCheckbox(headerCheckboxProps) : /*#__PURE__*/React.createElement(Checkbox, headerCheckboxProps),
+        title: typeof renderSelectionCheckbox === 'function' ? renderSelectionCheckbox(headerCheckboxProps) : /*#__PURE__*/_jsx(Checkbox, {
+          ...headerCheckboxProps
+        }),
         render: row => {
           const {
             virtual
@@ -976,7 +1009,7 @@ class List extends Component {
             return null;
           }
           if (this.isRowLoading(row)) {
-            return /*#__PURE__*/React.createElement(Spinner, {
+            return /*#__PURE__*/_jsx(Spinner, {
               className: `${baseClassName}__spinner`
             });
           }
@@ -991,7 +1024,9 @@ class List extends Component {
           if (typeof renderSelectionCheckbox === 'function') {
             return renderSelectionCheckbox(checkboxProps, row);
           }
-          return /*#__PURE__*/React.createElement(Checkbox, checkboxProps);
+          return /*#__PURE__*/_jsx(Checkbox, {
+            ...checkboxProps
+          });
         }
       });
     }
@@ -1003,38 +1038,42 @@ class List extends Component {
         cellProps: {
           className: `${baseClassName}__cell-expander`
         },
-        title: /*#__PURE__*/React.createElement(Button, {
+        title: /*#__PURE__*/_jsx(Button, {
           ghost: true,
           className: `${baseClassName}__row-expander`,
-          icon: /*#__PURE__*/React.createElement(Icon, {
-            className: `${baseClassName}__row-expander-icon`
-          }, /*#__PURE__*/React.createElement("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 10 10"
-          }, /*#__PURE__*/React.createElement("path", {
-            fill: "none",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            d: "M1.5 1.4L5 4.9l3.5-3.5M1.5 5.1L5 8.6l3.5-3.5"
-          }))),
+          icon: /*#__PURE__*/_jsx(Icon, {
+            className: `${baseClassName}__row-expander-icon`,
+            children: /*#__PURE__*/_jsx("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 10 10",
+              children: /*#__PURE__*/_jsx("path", {
+                fill: "none",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M1.5 1.4L5 4.9l3.5-3.5M1.5 5.1L5 8.6l3.5-3.5"
+              })
+            })
+          }),
           onClick: this.handleGlobalExpandingChange
         }),
-        render: row => this.isRowExpandable(row) && /*#__PURE__*/React.createElement(Button, {
+        render: row => this.isRowExpandable(row) && /*#__PURE__*/_jsx(Button, {
           ghost: true,
           className: `${baseClassName}__row-expander`,
-          icon: /*#__PURE__*/React.createElement(Icon, {
-            className: `${baseClassName}__row-expander-icon`
-          }, /*#__PURE__*/React.createElement("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 10 10"
-          }, /*#__PURE__*/React.createElement("path", {
-            fill: "none",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            d: "M1.5 3.2L5 6.7l3.5-3.5"
-          }))),
+          icon: /*#__PURE__*/_jsx(Icon, {
+            className: `${baseClassName}__row-expander-icon`,
+            children: /*#__PURE__*/_jsx("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 10 10",
+              children: /*#__PURE__*/_jsx("path", {
+                fill: "none",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M1.5 3.2L5 6.7l3.5-3.5"
+              })
+            })
+          }),
           onClick: () => this.handleRowExpandingChange(row)
         })
       });
@@ -1048,19 +1087,21 @@ class List extends Component {
           className: `${baseClassName}__cell-reorderable`
         },
         title: null,
-        render: () => /*#__PURE__*/React.createElement("span", {
+        render: () => /*#__PURE__*/_jsx("span", {
           className: `${baseClassName}__cell-reorderable-indicator`,
-          "data-movable-handle": true
-        }, /*#__PURE__*/React.createElement("svg", {
-          width: "6",
-          height: "14",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          "aria-hidden": "true"
-        }, /*#__PURE__*/React.createElement("path", {
-          d: "M0 0h2v2H0zM0 4h2v2H0zM0 8h2v2H0zM0 12h2v2H0zM4 0h2v2H4zM4 4h2v2H4zM4 8h2v2H4zM4 12h2v2H4z",
-          fill: "currentColor"
-        })))
+          "data-movable-handle": true,
+          children: /*#__PURE__*/_jsx("svg", {
+            width: "6",
+            height: "14",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /*#__PURE__*/_jsx("path", {
+              d: "M0 0h2v2H0zM0 4h2v2H0zM0 8h2v2H0zM0 12h2v2H0zM4 0h2v2H4zM4 4h2v2H4zM4 8h2v2H4zM4 12h2v2H4z",
+              fill: "currentColor"
+            })
+          })
+        })
       });
     }
     const hasTitle = !vertical && columns.some(column => column.title);
@@ -1073,50 +1114,61 @@ class List extends Component {
           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
+        return /*#__PURE__*/_jsx(FocusVisibleManager, {
+          children: /*#__PURE__*/_jsxs("table", {
+            className: classNames(`${baseClassName}__table`, {
+              [`${baseClassName}--expandable`]: renderRowBody,
+              [`${baseClassName}__table--vertical`]: vertical,
+              [`${baseClassName}__table--reorderable`]: reorderable
+            }),
+            ...reorderableProps,
+            children: [hasTitle && /*#__PURE__*/_jsx("thead", {
+              children: /*#__PURE__*/_jsx("tr", {
+                className: classNames(`${baseClassName}__table-thead`, {
+                  [`${baseClassName}__row--expanded`]: this.isAllRowsExpanded(data, this.state.expandedRows)
+                }),
+                children: realColumn.map(_ref16 => {
+                  let {
+                    key,
+                    title,
+                    sortable,
+                    sort,
+                    width,
+                    render,
+                    truncate,
+                    type,
+                    cellProps,
+                    ...headerProps
+                  } = _ref16;
+                  if (sortable) {
+                    title = /*#__PURE__*/_jsx("div", {
+                      className: "th__action",
+                      children: 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__*/_jsx("th", {
+                    ...headerProps,
+                    children: title
+                  }, key);
+                })
+              })
+            }), reorderable ? children : /*#__PURE__*/_jsx("tbody", {
+              children: children
+            })]
           })
-        }, 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 {
@@ -1140,7 +1192,7 @@ class List extends Component {
         const {
           ReorderableList
         } = this.state;
-        content = /*#__PURE__*/React.createElement(ReorderableList, {
+        content = /*#__PURE__*/_jsx(ReorderableList, {
           beforeDrag: _ref18 => {
             let {
               elements,
@@ -1184,36 +1236,45 @@ class List extends Component {
         });
       }
     }
-    content = /*#__PURE__*/React.createElement("div", {
+    content = /*#__PURE__*/_jsx("div", {
       className: classNames(`${baseClassName}__table-container`, {
         [`${baseClassName}__table-container--loading`]: loading
-      })
-    }, content);
+      }),
+      children: content
+    });
     if (sidebar) {
-      content = /*#__PURE__*/React.createElement(Columns, {
-        gap: "md"
-      }, /*#__PURE__*/React.createElement(Column, {
-        fill: true
-      }, content), /*#__PURE__*/React.createElement(Column, null, sidebar));
+      content = /*#__PURE__*/_jsxs(Columns, {
+        gap: "md",
+        children: [/*#__PURE__*/_jsx(Column, {
+          fill: true,
+          children: content
+        }), /*#__PURE__*/_jsx(Column, {
+          children: sidebar
+        })]
+      });
     }
     const shouldBePagination = this.shouldBePagination();
-    const createRoot = ref => /*#__PURE__*/React.createElement("div", _extends({
+    const createRoot = ref => /*#__PURE__*/_jsxs("div", {
       ref: ref,
-      className: classNames(baseClassName, className)
-    }, props), this.renderHeader(), this.renderToolbar(), shouldBePagination && /*#__PURE__*/React.createElement("span", {
-      ref: this.anchorRef
-    }), content, shouldBePagination && /*#__PURE__*/React.createElement("div", {
-      className: `${baseClassName}__footer`
-    }, this.renderPagination('footer')));
+      className: classNames(baseClassName, className),
+      ...props,
+      children: [this.renderHeader(), this.renderToolbar(), shouldBePagination && /*#__PURE__*/_jsx("span", {
+        ref: this.anchorRef
+      }), content, shouldBePagination && /*#__PURE__*/_jsx("div", {
+        className: `${baseClassName}__footer`,
+        children: this.renderPagination('footer')
+      })]
+    });
     if (typeof verticalProp === 'number') {
-      return /*#__PURE__*/React.createElement(Measure, {
+      return /*#__PURE__*/_jsx(Measure, {
         bounds: true,
-        onResize: this.handleResize
-      }, _ref20 => {
-        let {
-          measureRef
-        } = _ref20;
-        return createRoot(measureRef);
+        onResize: this.handleResize,
+        children: _ref20 => {
+          let {
+            measureRef
+          } = _ref20;
+          return createRoot(measureRef);
+        }
       });
     }
     return createRoot();