@plesk/ui-library 3.31.2 → 3.32.0

package/cjs/components/List/List.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -27,9 +26,9 @@ var _VerticalContext = _interopRequireWildcard(require("../VerticalContext"));
 var _ListEmptyView = _interopRequireDefault(require("./ListEmptyView"));
 var _Columns = _interopRequireWildcard(require("../Columns"));
 var _useFocusVisible = require("use-focus-visible");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } // Copyright 1999-2021. Plesk International GmbH. All rights reserved.
-/* eslint-disable react/no-deprecated */
 const getRowKey = (row, props) => {
   const {
     rowKey
@@ -50,13 +49,14 @@ const Tbody = _ref => {
     onFocus,
     onBlur
   } = (0, _useFocusVisible.useFocusVisible)();
-  return /*#__PURE__*/_react.default.createElement("tbody", (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+    ...props,
     onFocus: (0, _utils.wrapFunction)(props.onFocus, onFocus),
     onBlur: (0, _utils.wrapFunction)(props.onBlur, onBlur),
     className: (0, _classnames.default)(className, {
       [`${baseClassName}--focus-visible`]: focusVisible
     })
-  }));
+  });
 };
 Tbody.propTypes = {
   onFocus: _propTypes.default.func,
@@ -70,8 +70,6 @@ Tbody.defaultProps = {
   className: undefined,
   baseClassName: `${_constants.CLS_PREFIX}list__wrapper`
 };
-
-// eslint-disable-next-line react/prop-types
 const getHumanTotalRows = _ref2 => {
   let {
     selectedRows,
@@ -87,12 +85,13 @@ const getHumanTotalRows = _ref2 => {
   } else {
     mode = 'selectedRows';
   }
-  const wrapToText = element => /*#__PURE__*/_react.default.createElement(_Text.default, {
-    fontSize: "sm"
-  }, element);
+  const wrapToText = element => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    fontSize: "sm",
+    children: element
+  });
   switch (mode) {
     case 'totalRows':
-      return wrapToText( /*#__PURE__*/_react.default.createElement(_Translate.default, {
+      return wrapToText( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
         namespace: "List",
         content: "totalRows",
         fallback: "%%totalRows%% items total",
@@ -102,32 +101,34 @@ const getHumanTotalRows = _ref2 => {
         translators: translators
       }));
     case 'selectedRows':
-      return wrapToText( /*#__PURE__*/_react.default.createElement(_Translate.default, {
+      return wrapToText( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
         namespace: "List",
         content: "selectedRows",
         fallback: "%%selectedRows%% of %%totalRows%% items selected",
         params: {
-          selectedRows: /*#__PURE__*/_react.default.createElement(_Text.default, {
-            bold: true
-          }, selectedRows),
+          selectedRows: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            bold: true,
+            children: selectedRows
+          }),
           totalRows
         },
         translators: translators
       }));
     case 'selectedAllRows':
-      return wrapToText( /*#__PURE__*/_react.default.createElement(_Translate.default, {
+      return wrapToText( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
         namespace: "List",
         content: "selectedRows",
         fallback: "%%selectedRows%% of %%totalRows%% items selected",
         params: {
-          selectedRows: /*#__PURE__*/_react.default.createElement(_Text.default, {
-            bold: true
-          }, /*#__PURE__*/_react.default.createElement(_Translate.default, {
-            namespace: "List",
-            content: "all",
-            fallback: "All",
-            translators: translators
-          })),
+          selectedRows: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            bold: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+              namespace: "List",
+              content: "all",
+              fallback: "All",
+              translators: translators
+            })
+          }),
           totalRows
         },
         translators: translators
@@ -529,9 +530,10 @@ class List extends _react.Component {
     } = this.getRowProps(row);
     let skipCells = 0;
     const Wrapper = reorderable && !parent ? Tbody : _react.Fragment;
-    const element = /*#__PURE__*/_react.default.createElement(Wrapper, (0, _extends2.default)({}, Wrapper === Tbody && !isDragged ? reorderableProps : undefined, {
+    const element = /*#__PURE__*/(0, _react.createElement)(Wrapper, {
+      ...(Wrapper === Tbody && !isDragged ? reorderableProps : undefined),
       key: getRowKey(row, this.props)
-    }), /*#__PURE__*/_react.default.createElement("tr", (0, _extends2.default)({
+    }, /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
       className: (0, _classnames.default)({
         'is-selected': this.isRowSelected(row),
         [`${baseClassName}__row--expanded`]: this.isRowExpanded(row),
@@ -540,92 +542,100 @@ class List extends _react.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__*/(0, _react.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.default.createElement("div", {
-          className: `${baseClassName}__truncate`
-        }, /*#__PURE__*/_react.default.createElement(_Text.default, {
-          truncate: true
-        }, content));
-      }
-      if (vertical) {
-        const hasColumnTitle = type !== 'internal' && type !== 'actions' && type !== 'title' && title;
-        if (!isCellEmpty && type !== 'internal') {
-          content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, hasColumnTitle && /*#__PURE__*/_react.default.createElement("div", {
-            className: `${baseClassName}__cell-inner-title`
-          }, title), /*#__PURE__*/_react.default.createElement("div", {
-            className: `${baseClassName}__cell-inner-content`
-          }, content));
+        let style;
+        if (!hasTitle && width && !vertical) {
+          style = {
+            width
+          };
         }
-        if (type === 'actions') {
-          content = /*#__PURE__*/_react.default.createElement(_VerticalContext.default.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__*/(0, _react.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__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${baseClassName}__truncate`,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+              truncate: true,
+              children: content
+            })
+          });
+        }
+        if (vertical) {
+          const hasColumnTitle = type !== 'internal' && type !== 'actions' && type !== 'title' && title;
+          if (!isCellEmpty && type !== 'internal') {
+            content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [hasColumnTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: `${baseClassName}__cell-inner-title`,
+                children: title
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: `${baseClassName}__cell-inner-content`,
+                children: content
+              })]
+            });
+          }
+          if (type === 'actions') {
+            content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalContext.default.Provider, {
+              value: true,
+              children: content
+            });
+          }
         }
-      }
 
-      // do not render reorderable handler for nested rows
-      if (key === 'reorderable' && type === 'internal' && parent) {
-        content = null;
-      }
-      return /*#__PURE__*/_react.default.createElement("td", (0, _extends2.default)({
-        key: key,
-        style: style
-      }, cellProps, {
-        className: (0, _classnames.default)(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__*/(0, _jsxRuntime.jsx)("td", {
+          style: style,
+          ...cellProps,
+          className: (0, _classnames.default)(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,
@@ -638,14 +648,17 @@ class List extends _react.Component {
       parent: row
     })) : null);
     if (isDragged) {
-      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-        className: (0, _classnames.default)(baseClassName, `${baseClassName}--dragged`)
-      }, reorderableProps), /*#__PURE__*/_react.default.createElement("table", {
-        className: (0, _classnames.default)(`${baseClassName}__table`, `${baseClassName}__table--reorderable`, {
-          [`${baseClassName}--expandable`]: renderRowBody,
-          [`${baseClassName}__table--vertical`]: vertical
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)(baseClassName, `${baseClassName}--dragged`),
+        ...reorderableProps,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("table", {
+          className: (0, _classnames.default)(`${baseClassName}__table`, `${baseClassName}__table--reorderable`, {
+            [`${baseClassName}--expandable`]: renderRowBody,
+            [`${baseClassName}__table--vertical`]: vertical
+          }),
+          children: element
         })
-      }, element));
+      });
     }
     return element;
   }
@@ -680,7 +693,7 @@ class List extends _react.Component {
     });
     const isRowExpanded = this.isRowExpanded(row);
     const trRef = /*#__PURE__*/(0, _react.createRef)();
-    return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
       in: isRowExpanded,
       unmountOnExit: true,
       timeout: {
@@ -688,27 +701,33 @@ class List extends _react.Component {
         exit: 300
       },
       classNames: `${baseClassName}__row-body-`,
-      nodeRef: trRef
-    }, state => /*#__PURE__*/_react.default.createElement("tr", {
-      className: `${baseClassName}__row-body`,
-      ref: trRef
-    }, reorderable ? /*#__PURE__*/_react.default.createElement("td", {
-      className: `${baseClassName}__cell-reorderable`
-    }) : null, expander ? /*#__PURE__*/_react.default.createElement("td", {
-      className: `${baseClassName}__cell-expander`
-    }) : null, /*#__PURE__*/_react.default.createElement("td", {
-      colSpan: realColumn.length - (reorderable ? 1 : 0) - (expander ? 1 : 0),
-      className: `${baseClassName}__cell-body`
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__row-body-content-wrapper`
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__row-body-content ${baseClassName}__row-body-content--${state}`
-    }, /*#__PURE__*/_react.default.createElement(_VerticalContext.default.Provider, {
-      value: vertical
-    }, renderRowBody(row, {
-      index,
-      parent
-    })))))));
+      nodeRef: trRef,
+      children: state => /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+        className: `${baseClassName}__row-body`,
+        ref: trRef,
+        children: [reorderable ? /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+          className: `${baseClassName}__cell-reorderable`
+        }) : null, expander ? /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+          className: `${baseClassName}__cell-expander`
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+          colSpan: realColumn.length - (reorderable ? 1 : 0) - (expander ? 1 : 0),
+          className: `${baseClassName}__cell-body`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${baseClassName}__row-body-content-wrapper`,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: `${baseClassName}__row-body-content ${baseClassName}__row-body-content--${state}`,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalContext.default.Provider, {
+                value: vertical,
+                children: renderRowBody(row, {
+                  index,
+                  parent
+                })
+              })
+            })
+          })
+        })]
+      })
+    });
   }
   renderSelectAllButton() {
     const {
@@ -724,18 +743,19 @@ class List extends _react.Component {
     if (allRowsSelected || selection.length === totalRows || !onSelectionChange) {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement(_Button.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
       ghost: true,
       onClick: () => {
         this.handleGlobalSelectionChange(true);
         (0, _utils.safeInvoke)(onAllRowsSelectedChange, true);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Translate.default, {
-      namespace: "List",
-      content: "selectAll",
-      fallback: "Select all",
-      translators: locale
-    }));
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+        namespace: "List",
+        content: "selectAll",
+        fallback: "Select all",
+        translators: locale
+      })
+    });
   }
   renderDeselectAllButton() {
     const {
@@ -750,18 +770,19 @@ class List extends _react.Component {
     if (!allRowsSelected && selection.length === 0 || !onSelectionChange) {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement(_Button.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
       ghost: true,
       onClick: () => {
         this.handleGlobalSelectionChange(false);
         (0, _utils.safeInvoke)(onAllRowsSelectedChange, false);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_Translate.default, {
-      namespace: "List",
-      content: "deselectAll",
-      fallback: "Deselect",
-      translators: locale
-    }));
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
+        namespace: "List",
+        content: "deselectAll",
+        fallback: "Deselect",
+        translators: locale
+      })
+    });
   }
   renderToolbar() {
     const {
@@ -784,8 +805,9 @@ class List extends _react.Component {
     if (!toolbar) {
       return null;
     }
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
     const context = {
-      selectedRows: allRowsSelected ? totalRows || /*#__PURE__*/_react.default.createElement(_Translate.default, {
+      selectedRows: allRowsSelected ? totalRows || /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
         namespace: "List",
         content: "all",
         fallback: "all",
@@ -793,9 +815,10 @@ class List extends _react.Component {
       }) : selection.length,
       selectedRowTitle
     };
-    return /*#__PURE__*/_react.default.createElement(_ListOperationContext.default.Provider, {
-      value: context
-    }, toolbar);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListOperationContext.default.Provider, {
+      value: context,
+      children: toolbar
+    });
   }
   shouldBePagination() {
     const {
@@ -835,20 +858,26 @@ class List extends _react.Component {
     if (totalRows === undefined && !shouldBePagination) {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__header`
-    }, totalRows === undefined ? /*#__PURE__*/_react.default.createElement("span", null) : /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
-      className: `${baseClassName}__header-text`
-    }, getHumanTotalRows({
-      selectedRows: selection.length,
-      totalRows,
-      allRowsSelected,
-      translators: locale
-    })), ` `, /*#__PURE__*/_react.default.createElement("span", {
-      className: `${baseClassName}__header-buttons`
-    }, this.renderSelectAllButton(), this.renderDeselectAllButton())), shouldBePagination && /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__header-text`
-    }, this.renderPagination('header')));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${baseClassName}__header`,
+      children: [totalRows === undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: `${baseClassName}__header-text`,
+          children: getHumanTotalRows({
+            selectedRows: selection.length,
+            totalRows,
+            allRowsSelected,
+            translators: locale
+          })
+        }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          className: `${baseClassName}__header-buttons`,
+          children: [this.renderSelectAllButton(), this.renderDeselectAllButton()]
+        })]
+      }), shouldBePagination && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__header-text`,
+        children: this.renderPagination('header')
+      })]
+    });
   }
   renderEmptyView() {
     const {
@@ -856,9 +885,9 @@ class List extends _react.Component {
       filtered
     } = this.props;
     if (emptyView === undefined) {
-      return filtered ? /*#__PURE__*/_react.default.createElement(_ListEmptyView.default, {
+      return filtered ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListEmptyView.default, {
         reason: "filtered"
-      }) : /*#__PURE__*/_react.default.createElement(_ListEmptyView.default, null);
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListEmptyView.default, {});
     }
     return emptyView;
   }
@@ -973,7 +1002,9 @@ class List extends _react.Component {
         cellProps: {
           className: `${baseClassName}__cell-selection`
         },
-        title: typeof renderSelectionCheckbox === 'function' ? renderSelectionCheckbox(headerCheckboxProps) : /*#__PURE__*/_react.default.createElement(_Checkbox.default, headerCheckboxProps),
+        title: typeof renderSelectionCheckbox === 'function' ? renderSelectionCheckbox(headerCheckboxProps) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+          ...headerCheckboxProps
+        }),
         render: row => {
           const {
             virtual
@@ -982,7 +1013,7 @@ class List extends _react.Component {
             return null;
           }
           if (this.isRowLoading(row)) {
-            return /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
               className: `${baseClassName}__spinner`
             });
           }
@@ -997,7 +1028,9 @@ class List extends _react.Component {
           if (typeof renderSelectionCheckbox === 'function') {
             return renderSelectionCheckbox(checkboxProps, row);
           }
-          return /*#__PURE__*/_react.default.createElement(_Checkbox.default, checkboxProps);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+            ...checkboxProps
+          });
         }
       });
     }
@@ -1009,38 +1042,42 @@ class List extends _react.Component {
         cellProps: {
           className: `${baseClassName}__cell-expander`
         },
-        title: /*#__PURE__*/_react.default.createElement(_Button.default, {
+        title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
           ghost: true,
           className: `${baseClassName}__row-expander`,
-          icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
-            className: `${baseClassName}__row-expander-icon`
-          }, /*#__PURE__*/_react.default.createElement("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 10 10"
-          }, /*#__PURE__*/_react.default.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__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            className: `${baseClassName}__row-expander-icon`,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 10 10",
+              children: /*#__PURE__*/(0, _jsxRuntime.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.default.createElement(_Button.default, {
+        render: row => this.isRowExpandable(row) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
           ghost: true,
           className: `${baseClassName}__row-expander`,
-          icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
-            className: `${baseClassName}__row-expander-icon`
-          }, /*#__PURE__*/_react.default.createElement("svg", {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 10 10"
-          }, /*#__PURE__*/_react.default.createElement("path", {
-            fill: "none",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            d: "M1.5 3.2L5 6.7l3.5-3.5"
-          }))),
+          icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            className: `${baseClassName}__row-expander-icon`,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: "0 0 10 10",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+                fill: "none",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M1.5 3.2L5 6.7l3.5-3.5"
+              })
+            })
+          }),
           onClick: () => this.handleRowExpandingChange(row)
         })
       });
@@ -1054,19 +1091,21 @@ class List extends _react.Component {
           className: `${baseClassName}__cell-reorderable`
         },
         title: null,
-        render: () => /*#__PURE__*/_react.default.createElement("span", {
+        render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           className: `${baseClassName}__cell-reorderable-indicator`,
-          "data-movable-handle": true
-        }, /*#__PURE__*/_react.default.createElement("svg", {
-          width: "6",
-          height: "14",
-          fill: "none",
-          xmlns: "http://www.w3.org/2000/svg",
-          "aria-hidden": "true"
-        }, /*#__PURE__*/_react.default.createElement("path", {
-          d: "M0 0h2v2H0zM0 4h2v2H0zM0 8h2v2H0zM0 12h2v2H0zM4 0h2v2H4zM4 4h2v2H4zM4 8h2v2H4zM4 12h2v2H4z",
-          fill: "currentColor"
-        })))
+          "data-movable-handle": true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+            width: "6",
+            height: "14",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+              d: "M0 0h2v2H0zM0 4h2v2H0zM0 8h2v2H0zM0 12h2v2H0zM4 0h2v2H4zM4 4h2v2H4zM4 8h2v2H4zM4 12h2v2H4z",
+              fill: "currentColor"
+            })
+          })
+        })
       });
     }
     const hasTitle = !vertical && columns.some(column => column.title);
@@ -1079,50 +1118,61 @@ class List extends _react.Component {
           children,
           props: reorderableProps
         } = _ref15;
-        return /*#__PURE__*/_react.default.createElement(_useFocusVisible.FocusVisibleManager, null, /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({
-          className: (0, _classnames.default)(`${baseClassName}__table`, {
-            [`${baseClassName}--expandable`]: renderRowBody,
-            [`${baseClassName}__table--vertical`]: vertical,
-            [`${baseClassName}__table--reorderable`]: reorderable
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useFocusVisible.FocusVisibleManager, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("table", {
+            className: (0, _classnames.default)(`${baseClassName}__table`, {
+              [`${baseClassName}--expandable`]: renderRowBody,
+              [`${baseClassName}__table--vertical`]: vertical,
+              [`${baseClassName}__table--reorderable`]: reorderable
+            }),
+            ...reorderableProps,
+            children: [hasTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+                className: (0, _classnames.default)(`${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__*/(0, _jsxRuntime.jsx)("div", {
+                      className: "th__action",
+                      children: title
+                    });
+                    headerProps.className = (0, _classnames.default)({
+                      'is-sortable': sortable,
+                      'is-sorted is-sorted--up': this.state.sortColumn === key && this.state.sortDirection === 'ASC',
+                      'is-sorted is-sorted--down': this.state.sortColumn === key && this.state.sortDirection === 'DESC'
+                    }, headerProps.className);
+                    headerProps.onClick = () => this.sort(key);
+                  }
+                  if (width) {
+                    headerProps.style = {
+                      ...headerProps.style,
+                      width
+                    };
+                  }
+                  return /*#__PURE__*/(0, _jsxRuntime.jsx)("th", {
+                    ...headerProps,
+                    children: title
+                  }, key);
+                })
+              })
+            }), reorderable ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+              children: children
+            })]
           })
-        }, reorderableProps), hasTitle && /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
-          className: (0, _classnames.default)(`${baseClassName}__table-thead`, {
-            [`${baseClassName}__row--expanded`]: this.isAllRowsExpanded(data, this.state.expandedRows)
-          })
-        }, realColumn.map(_ref16 => {
-          let {
-            key,
-            title,
-            sortable,
-            sort,
-            width,
-            render,
-            truncate,
-            type,
-            cellProps,
-            ...headerProps
-          } = _ref16;
-          if (sortable) {
-            title = /*#__PURE__*/_react.default.createElement("div", {
-              className: "th__action"
-            }, title);
-            headerProps.className = (0, _classnames.default)({
-              'is-sortable': sortable,
-              'is-sorted is-sorted--up': this.state.sortColumn === key && this.state.sortDirection === 'ASC',
-              'is-sorted is-sorted--down': this.state.sortColumn === key && this.state.sortDirection === 'DESC'
-            }, headerProps.className);
-            headerProps.onClick = () => this.sort(key);
-          }
-          if (width) {
-            headerProps.style = {
-              ...headerProps.style,
-              width
-            };
-          }
-          return /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({
-            key: key
-          }, headerProps), title);
-        }))), reorderable ? children : /*#__PURE__*/_react.default.createElement("tbody", null, children)));
+        });
       };
       const renderItem = _ref17 => {
         let {
@@ -1146,7 +1196,7 @@ class List extends _react.Component {
         const {
           ReorderableList
         } = this.state;
-        content = /*#__PURE__*/_react.default.createElement(ReorderableList, {
+        content = /*#__PURE__*/(0, _jsxRuntime.jsx)(ReorderableList, {
           beforeDrag: _ref18 => {
             let {
               elements,
@@ -1190,36 +1240,45 @@ class List extends _react.Component {
         });
       }
     }
-    content = /*#__PURE__*/_react.default.createElement("div", {
+    content = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)(`${baseClassName}__table-container`, {
         [`${baseClassName}__table-container--loading`]: loading
-      })
-    }, content);
+      }),
+      children: content
+    });
     if (sidebar) {
-      content = /*#__PURE__*/_react.default.createElement(_Columns.default, {
-        gap: "md"
-      }, /*#__PURE__*/_react.default.createElement(_Columns.Column, {
-        fill: true
-      }, content), /*#__PURE__*/_react.default.createElement(_Columns.Column, null, sidebar));
+      content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Columns.default, {
+        gap: "md",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Columns.Column, {
+          fill: true,
+          children: content
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Columns.Column, {
+          children: sidebar
+        })]
+      });
     }
     const shouldBePagination = this.shouldBePagination();
-    const createRoot = ref => /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    const createRoot = ref => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       ref: ref,
-      className: (0, _classnames.default)(baseClassName, className)
-    }, props), this.renderHeader(), this.renderToolbar(), shouldBePagination && /*#__PURE__*/_react.default.createElement("span", {
-      ref: this.anchorRef
-    }), content, shouldBePagination && /*#__PURE__*/_react.default.createElement("div", {
-      className: `${baseClassName}__footer`
-    }, this.renderPagination('footer')));
+      className: (0, _classnames.default)(baseClassName, className),
+      ...props,
+      children: [this.renderHeader(), this.renderToolbar(), shouldBePagination && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        ref: this.anchorRef
+      }), content, shouldBePagination && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${baseClassName}__footer`,
+        children: this.renderPagination('footer')
+      })]
+    });
     if (typeof verticalProp === 'number') {
-      return /*#__PURE__*/_react.default.createElement(_reactMeasure.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactMeasure.default, {
         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();