@rhc-shared-components/packages-table 0.3.6 → 1.0.0

package/dist/index.js

@@ -1,14 +1,17 @@
 var React = require('react');
 var reactCore = require('@patternfly/react-core');
 var lodash = require('lodash');
-var Tooltip = require('@patternfly/react-core/dist/esm/components/Tooltip/Tooltip');
-var Button = require('@patternfly/react-core/dist/esm/components/Button/Button');
+var helpers = require('@patternfly/react-core/dist/esm/helpers');
 var mergeWith = require('lodash/mergeWith');
+var Tooltip = require('@patternfly/react-core/dist/esm/components/Tooltip');
+var Button = require('@patternfly/react-core/dist/esm/components/Button');
+var Popover = require('@patternfly/react-core/dist/esm/components/Popover');
+var Tooltip$1 = require('@patternfly/react-core/dist/esm/components/Tooltip/Tooltip');
 var Dropdown = require('@patternfly/react-core/dist/esm/components/Dropdown');
-var KebabToggle = require('@patternfly/react-core/dist/esm/components/Dropdown/KebabToggle');
-var DropdownItem = require('@patternfly/react-core/dist/esm/components/Dropdown/DropdownItem');
-var DropdownSeparator = require('@patternfly/react-core/dist/esm/components/Dropdown/DropdownSeparator');
-var dropdownConstants = require('@patternfly/react-core/dist/esm/components/Dropdown/dropdownConstants');
+var Divider = require('@patternfly/react-core/dist/esm/components/Divider');
+var MenuToggle = require('@patternfly/react-core/dist/esm/components/MenuToggle');
+var Checkbox = require('@patternfly/react-core/dist/esm/components/Checkbox');
+var deprecated = require('@patternfly/react-core/deprecated');
 var dateFns = require('date-fns');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -37,6 +40,38 @@ var mergeWith__default = /*#__PURE__*/_interopDefaultLegacy(mergeWith);
 
 var css_248z = ".vulnerabilities-table .impact-icon {\n  font-size: 1.5rem;\n  padding-right: 0.5rem;\n}\n.vulnerabilities-table .impact-icon.color-critical {\n  color: #a30000;\n}\n.vulnerabilities-table .impact-icon.color-important {\n  color: #ec7a08;\n}\n.vulnerabilities-table .impact-icon.color-moderate {\n  color: #f5c12e;\n}\n.vulnerabilities-table .impact-icon.color-low {\n  color: #777;\n}\n.vulnerabilities-table__affected-packages-cell {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.vulnerabilities-table__impact-cell {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n\n.filterable-table {\n  padding-bottom: var(--pf-global--spacer--lg);\n}\n.filterable-table__bottom-pagination[class] {\n  margin-top: 1rem;\n}\n.filterable-table .pf-c-toolbar {\n  padding-top: 0;\n}\n.filterable-table .pf-c-toolbar__content {\n  --pf-c-toolbar__content--PaddingRight: 0;\n  --pf-c-toolbar__content--PaddingLeft: 0;\n}\n.filterable-table .pf-c-input-group__text {\n  --pf-c-input-group__text--PaddingRight: 0;\n}\n.filterable-table .pf-c-pagination.pf-m-bottom {\n  --pf-c-pagination--m-bottom--md--PaddingRight: 0;\n}\n\n.packages-table .pf-c-tabs__item > button {\n  padding: 1rem 1.5rem;\n}\n.packages-table__excluded-packages-disclaimer {\n  margin: 1rem 0 0 0.5rem;\n}\n\n.filter-input {\n  width: 18rem;\n  margin: 1rem 0 1rem 0;\n}";
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __rest$1(s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
@@ -80,29 +115,212 @@ function __rest(s, e) {
   return t;
 }
 
-Promise.resolve().then(function () { return require('./inline-edit-aba2c28a.js'); });
-var inlineStyles = {
-  "button": "pf-c-button",
-  "inlineEdit": "pf-c-inline-edit",
-  "inlineEditAction": "pf-c-inline-edit__action",
-  "inlineEditEditableText": "pf-c-inline-edit__editable-text",
-  "inlineEditGroup": "pf-c-inline-edit__group",
-  "inlineEditInput": "pf-c-inline-edit__input",
-  "inlineEditLabel": "pf-c-inline-edit__label",
-  "inlineEditValue": "pf-c-inline-edit__value",
-  "modifiers": {
-    "iconGroup": "pf-m-icon-group",
-    "footer": "pf-m-footer",
-    "column": "pf-m-column",
-    "valid": "pf-m-valid",
-    "plain": "pf-m-plain",
-    "actionGroup": "pf-m-action-group",
-    "enableEditable": "pf-m-enable-editable",
-    "inlineEditable": "pf-m-inline-editable",
-    "enable": "pf-m-enable",
-    "bold": "pf-m-bold"
-  }
+var currentId = 0;
+/**
+ * Factory to create Icon class components for consumers
+ */
+
+function createIcon(_ref) {
+  var name = _ref.name,
+      _ref$xOffset = _ref.xOffset,
+      xOffset = _ref$xOffset === void 0 ? 0 : _ref$xOffset,
+      _ref$yOffset = _ref.yOffset,
+      yOffset = _ref$yOffset === void 0 ? 0 : _ref$yOffset,
+      width = _ref.width,
+      height = _ref.height,
+      svgPath = _ref.svgPath;
+
+  var _a;
+
+  return _a = /*#__PURE__*/function (_React$Component) {
+    _inheritsLoose(SVGIcon, _React$Component);
+
+    function SVGIcon() {
+      var _this;
+
+      _this = _React$Component.apply(this, arguments) || this;
+      _this.id = "icon-title-" + currentId++;
+      return _this;
+    }
+
+    var _proto = SVGIcon.prototype;
+
+    _proto.render = function render() {
+      var _a = this.props,
+          title = _a.title,
+          className = _a.className,
+          props = __rest(_a, ["title", "className"]);
+
+      var classes = className ? "pf-v5-svg " + className : 'pf-v5-svg';
+      var hasTitle = Boolean(title);
+      var viewBox = [xOffset, yOffset, width, height].join(' ');
+      return React__namespace.createElement("svg", Object.assign({
+        className: classes,
+        viewBox: viewBox,
+        fill: "currentColor",
+        "aria-labelledby": hasTitle ? this.id : null,
+        "aria-hidden": hasTitle ? null : true,
+        role: "img",
+        width: "1em",
+        height: "1em"
+      }, props), hasTitle && React__namespace.createElement("title", {
+        id: this.id
+      }, title), React__namespace.createElement("path", {
+        d: svgPath
+      }));
+    };
+
+    return SVGIcon;
+  }(React__namespace.Component), _a.displayName = name, _a;
+}
+
+var EllipsisVIconConfig = {
+  name: 'EllipsisVIcon',
+  height: 512,
+  width: 192,
+  svgPath: 'M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z',
+  yOffset: 0,
+  xOffset: 0
+};
+var EllipsisVIcon = createIcon(EllipsisVIconConfig);
+var EllipsisVIcon$1 = EllipsisVIcon;
+
+var ActionsColumnBase = function ActionsColumnBase(_a) {
+  var items = _a.items,
+      isDisabled = _a.isDisabled,
+      rowData = _a.rowData,
+      extraData = _a.extraData,
+      actionsToggle = _a.actionsToggle,
+      _a$popperProps = _a.popperProps,
+      popperProps = _a$popperProps === void 0 ? {
+    position: 'end',
+    direction: 'down'
+  } : _a$popperProps,
+      innerRef = _a.innerRef,
+      firstActionItemRef = _a.firstActionItemRef,
+      _a$isOnOpenChangeDisa = _a.isOnOpenChangeDisabled,
+      isOnOpenChangeDisabled = _a$isOnOpenChangeDisa === void 0 ? false : _a$isOnOpenChangeDisa,
+      props = __rest$1(_a, ["items", "isDisabled", "rowData", "extraData", "actionsToggle", "popperProps", "innerRef", "firstActionItemRef", "isOnOpenChangeDisabled"]);
+
+  var _React$useState = React__namespace.useState(false),
+      isOpen = _React$useState[0],
+      setIsOpen = _React$useState[1];
+
+  var onToggle = function onToggle() {
+    setIsOpen(!isOpen);
+  };
+
+  var onActionClick = function onActionClick(event, onClick) {
+    // Only prevent default if onClick is provided.  This allows href support.
+    if (onClick) {
+      event.preventDefault(); // tslint:disable-next-line:no-unused-expression
+
+      onClick(event, extraData && extraData.rowIndex, rowData, extraData);
+    }
+  };
+
+  return React__namespace.createElement(React__namespace.Fragment, null, items.filter(function (item) {
+    return item.isOutsideDropdown;
+  }) // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  .map(function (_a, key) {
+    var title = _a.title,
+        itemKey = _a.itemKey,
+        _onClick = _a.onClick,
+        props = __rest$1(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
+
+    return typeof title === 'string' ? React__namespace.createElement(Button.Button, Object.assign({
+      onClick: function onClick(event) {
+        return onActionClick(event, _onClick);
+      }
+    }, props, {
+      isDisabled: isDisabled,
+      key: itemKey || "outside_dropdown_" + key,
+      "data-key": itemKey || "outside_dropdown_" + key
+    }), title) : React__namespace.cloneElement(title, Object.assign({
+      onClick: _onClick,
+      isDisabled: isDisabled
+    }, props));
+  }), React__namespace.createElement(Dropdown.Dropdown, Object.assign({
+    isOpen: isOpen,
+    onOpenChange: !isOnOpenChangeDisabled ? function (isOpen) {
+      return setIsOpen(isOpen);
+    } : undefined,
+    toggle: function toggle(toggleRef) {
+      return actionsToggle ? actionsToggle({
+        onToggle: onToggle,
+        isOpen: isOpen,
+        isDisabled: isDisabled,
+        toggleRef: toggleRef
+      }) : React__namespace.createElement(MenuToggle.MenuToggle, {
+        "aria-label": "Kebab toggle",
+        ref: toggleRef,
+        onClick: onToggle,
+        isExpanded: isOpen,
+        isDisabled: isDisabled,
+        variant: "plain"
+      }, React__namespace.createElement(EllipsisVIcon$1, null));
+    }
+  }, rowData && rowData.actionProps, {
+    ref: innerRef
+  }, props, {
+    popperProps: popperProps
+  }), React__namespace.createElement(Dropdown.DropdownList, null, items.filter(function (item) {
+    return !item.isOutsideDropdown;
+  }).map(function (_a, index) {
+    var title = _a.title,
+        itemKey = _a.itemKey,
+        _onClick2 = _a.onClick,
+        tooltipProps = _a.tooltipProps,
+        isSeparator = _a.isSeparator,
+        _a$shouldCloseOnClick = _a.shouldCloseOnClick,
+        shouldCloseOnClick = _a$shouldCloseOnClick === void 0 ? true : _a$shouldCloseOnClick,
+        props = __rest$1(_a, ["title", "itemKey", "onClick", "tooltipProps", "isSeparator", "shouldCloseOnClick"]);
+
+    if (isSeparator) {
+      return React__namespace.createElement(Divider.Divider, {
+        key: itemKey || index,
+        "data-key": itemKey || index
+      });
+    }
+
+    var item = React__namespace.createElement(Dropdown.DropdownItem, Object.assign({
+      onClick: function onClick(event) {
+        onActionClick(event, _onClick2);
+        shouldCloseOnClick && onToggle();
+      }
+    }, props, {
+      key: itemKey || index,
+      "data-key": itemKey || index,
+      ref: index === 0 ? firstActionItemRef : undefined
+    }), title);
+
+    if (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) {
+      return React__namespace.createElement(Tooltip.Tooltip, Object.assign({
+        key: itemKey || index
+      }, tooltipProps), item);
+    } else {
+      return item;
+    }
+  }))));
+};
+
+var ActionsColumn = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.createElement(ActionsColumnBase, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
+ActionsColumn.displayName = 'ActionsColumn';
+
+var AngleDownIconConfig = {
+  name: 'AngleDownIcon',
+  height: 512,
+  width: 320,
+  svgPath: 'M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z',
+  yOffset: 0,
+  xOffset: 0
 };
+var AngleDownIcon = createIcon(AngleDownIconConfig);
+var AngleDownIcon$1 = AngleDownIcon;
 
 /** Joins args into a className string
  *
@@ -134,9 +352,11 @@ function css() {
   return classes.join(' ');
 }
 
-Promise.resolve().then(function () { return require('./table-ee2a086b.js'); });
 var styles$1 = {
-  "button": "pf-c-button",
+  "button": "pf-v5-c-button",
+  "check": "pf-v5-c-check",
+  "checkInput": "pf-v5-c-check__input",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -151,6 +371,8 @@ var styles$1 = {
     "visibleOn_2xl": "pf-m-visible-on-2xl",
     "fixed": "pf-m-fixed",
     "stickyHeader": "pf-m-sticky-header",
+    "nestedColumnHeader": "pf-m-nested-column-header",
+    "borderRow": "pf-m-border-row",
     "striped": "pf-m-striped",
     "expandable": "pf-m-expandable",
     "stripedEven": "pf-m-striped-even",
@@ -160,18 +382,18 @@ var styles$1 = {
     "favorite": "pf-m-favorite",
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "nestedColumnHeader": "pf-m-nested-column-header",
+    "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate",
     "wrap": "pf-m-wrap",
     "nowrap": "pf-m-nowrap",
     "fitContent": "pf-m-fit-content",
     "breakWord": "pf-m-break-word",
     "noBorderRows": "pf-m-no-border-rows",
-    "expanded": "pf-m-expanded",
-    "hoverable": "pf-m-hoverable",
+    "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
     "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
     "dragOver": "pf-m-drag-over",
+    "standalone": "pf-m-standalone",
     "favorited": "pf-m-favorited",
     "noPadding": "pf-m-no-padding",
     "compact": "pf-m-compact",
@@ -190,684 +412,508 @@ var styles$1 = {
     "width_90": "pf-m-width-90",
     "width_100": "pf-m-width-100"
   },
-  "table": "pf-c-table",
-  "tableAction": "pf-c-table__action",
-  "tableButton": "pf-c-table__button",
-  "tableButtonContent": "pf-c-table__button-content",
-  "tableCheck": "pf-c-table__check",
-  "tableColumnHelp": "pf-c-table__column-help",
-  "tableColumnHelpAction": "pf-c-table__column-help-action",
-  "tableCompoundExpansionToggle": "pf-c-table__compound-expansion-toggle",
-  "tableControlRow": "pf-c-table__control-row",
-  "tableDraggable": "pf-c-table__draggable",
-  "tableExpandableRow": "pf-c-table__expandable-row",
-  "tableExpandableRowContent": "pf-c-table__expandable-row-content",
-  "tableFavorite": "pf-c-table__favorite",
-  "tableIcon": "pf-c-table__icon",
-  "tableIconInline": "pf-c-table__icon-inline",
-  "tableInlineEditAction": "pf-c-table__inline-edit-action",
-  "tableSort": "pf-c-table__sort",
-  "tableSortIndicator": "pf-c-table__sort-indicator",
-  "tableSubhead": "pf-c-table__subhead",
-  "tableText": "pf-c-table__text",
-  "tableToggle": "pf-c-table__toggle",
-  "tableToggleIcon": "pf-c-table__toggle-icon",
-  "themeDark": "pf-theme-dark"
+  "table": "pf-v5-c-table",
+  "tableAction": "pf-v5-c-table__action",
+  "tableButton": "pf-v5-c-table__button",
+  "tableButtonContent": "pf-v5-c-table__button-content",
+  "tableCaption": "pf-v5-c-table__caption",
+  "tableCheck": "pf-v5-c-table__check",
+  "tableColumnHelp": "pf-v5-c-table__column-help",
+  "tableColumnHelpAction": "pf-v5-c-table__column-help-action",
+  "tableCompoundExpansionToggle": "pf-v5-c-table__compound-expansion-toggle",
+  "tableControlRow": "pf-v5-c-table__control-row",
+  "tableDraggable": "pf-v5-c-table__draggable",
+  "tableExpandableRow": "pf-v5-c-table__expandable-row",
+  "tableExpandableRowContent": "pf-v5-c-table__expandable-row-content",
+  "tableFavorite": "pf-v5-c-table__favorite",
+  "tableIcon": "pf-v5-c-table__icon",
+  "tableIconInline": "pf-v5-c-table__icon-inline",
+  "tableInlineEditAction": "pf-v5-c-table__inline-edit-action",
+  "tableSort": "pf-v5-c-table__sort",
+  "tableSortIndicator": "pf-v5-c-table__sort-indicator",
+  "tableSubhead": "pf-v5-c-table__subhead",
+  "tableTbody": "pf-v5-c-table__tbody",
+  "tableTd": "pf-v5-c-table__td",
+  "tableText": "pf-v5-c-table__text",
+  "tableTh": "pf-v5-c-table__th",
+  "tableThead": "pf-v5-c-table__thead",
+  "tableToggle": "pf-v5-c-table__toggle",
+  "tableToggleIcon": "pf-v5-c-table__toggle-icon",
+  "tableTr": "pf-v5-c-table__tr",
+  "themeDark": "pf-v5-theme-dark"
 };
 
-Promise.resolve().then(function () { return require('./table-grid-be1510e7.js'); });
-var stylesGrid = {
-  "button": "pf-c-button",
-  "modifiers": {
-    "grid": "pf-m-grid",
-    "compact": "pf-m-compact",
-    "expanded": "pf-m-expanded",
-    "selected": "pf-m-selected",
-    "noPadding": "pf-m-no-padding",
-    "hoverable": "pf-m-hoverable",
-    "nowrap": "pf-m-nowrap",
-    "fitContent": "pf-m-fit-content",
-    "truncate": "pf-m-truncate",
-    "gridMd": "pf-m-grid-md",
-    "gridLg": "pf-m-grid-lg",
-    "gridXl": "pf-m-grid-xl",
-    "grid_2xl": "pf-m-grid-2xl"
-  },
-  "table": "pf-c-table",
-  "tableAction": "pf-c-table__action",
-  "tableButton": "pf-c-table__button",
-  "tableCheck": "pf-c-table__check",
-  "tableCompoundExpansionToggle": "pf-c-table__compound-expansion-toggle",
-  "tableExpandableRow": "pf-c-table__expandable-row",
-  "tableExpandableRowContent": "pf-c-table__expandable-row-content",
-  "tableFavorite": "pf-c-table__favorite",
-  "tableIcon": "pf-c-table__icon",
-  "tableInlineEditAction": "pf-c-table__inline-edit-action",
-  "tableText": "pf-c-table__text",
-  "tableToggle": "pf-c-table__toggle",
-  "tableToggleIcon": "pf-c-table__toggle-icon"
-};
+var CollapseColumn = function CollapseColumn(_a) {
+  var _a$className = _a.className,
+      className = _a$className === void 0 ? '' : _a$className,
+      _a$children = _a.children,
+      children = _a$children === void 0 ? null : _a$children,
+      isOpen = _a.isOpen,
+      onToggle = _a.onToggle,
+      props = __rest$1(_a, ["className", "children", "isOpen", "onToggle"]);
 
-Promise.resolve().then(function () { return require('./table-tree-view-248a6705.js'); });
-var stylesTreeView = {
-  "dropdown": "pf-c-dropdown",
-  "modifiers": {
-    "treeView": "pf-m-tree-view",
-    "treeViewGrid": "pf-m-tree-view-grid",
-    "treeViewDetailsExpanded": "pf-m-tree-view-details-expanded",
-    "treeViewGridMd": "pf-m-tree-view-grid-md",
-    "treeViewGridLg": "pf-m-tree-view-grid-lg",
-    "treeViewGridXl": "pf-m-tree-view-grid-xl",
-    "treeViewGrid_2xl": "pf-m-tree-view-grid-2xl"
-  },
-  "table": "pf-c-table",
-  "tableAction": "pf-c-table__action",
-  "tableCheck": "pf-c-table__check",
-  "tableToggle": "pf-c-table__toggle",
-  "tableToggleIcon": "pf-c-table__toggle-icon",
-  "tableTreeViewDetailsToggle": "pf-c-table__tree-view-details-toggle",
-  "tableTreeViewIcon": "pf-c-table__tree-view-icon",
-  "tableTreeViewMain": "pf-c-table__tree-view-main",
-  "tableTreeViewText": "pf-c-table__tree-view-text",
-  "tableTreeViewTitleCell": "pf-c-table__tree-view-title-cell",
-  "tableTreeViewTitleHeaderCell": "pf-c-table__tree-view-title-header-cell"
+  return React__namespace.createElement(React__namespace.Fragment, null, isOpen !== undefined && React__namespace.createElement(Button.Button, Object.assign({
+    className: css(className, isOpen && styles$1.modifiers.expanded)
+  }, props, {
+    variant: "plain",
+    "aria-label": props['aria-label'] || 'Details',
+    onClick: onToggle,
+    "aria-expanded": isOpen
+  }), React__namespace.createElement("div", {
+    className: css(styles$1.tableToggleIcon)
+  }, React__namespace.createElement(AngleDownIcon$1, null))), children);
 };
+CollapseColumn.displayName = 'CollapseColumn';
 
-var camelize = function camelize(s) {
-  return s.toUpperCase().replace('-', '').replace('_', '');
+var GripVerticalIconConfig = {
+  name: 'GripVerticalIcon',
+  height: 512,
+  width: 320,
+  svgPath: 'M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z',
+  yOffset: 0,
+  xOffset: 0
 };
+var GripVerticalIcon = createIcon(GripVerticalIconConfig);
+var GripVerticalIcon$1 = GripVerticalIcon;
 
-var toCamel = function toCamel(s) {
-  return s.replace(/([-_][a-z])/gi, camelize);
+var DraggableCell = function DraggableCell(_a) {
+  var className = _a.className,
+      onClick = _a.onClick,
+      ariaLabel = _a['aria-label'],
+      id = _a.id,
+      props = __rest$1(_a, ["className", "onClick", 'aria-label', "id"]);
+
+  return React__namespace.createElement(Button.Button, Object.assign({
+    id: id,
+    variant: "plain",
+    className: className,
+    type: "button",
+    "aria-label": ariaLabel || "Draggable row draggable button",
+    onClick: onClick
+  }, props), React__namespace.createElement(GripVerticalIcon$1, {
+    "aria-hidden": true
+  }));
 };
-/**
- * @param {string} input - String to capitalize
- */
+DraggableCell.displayName = 'DraggableCell';
 
-function capitalize(input) {
-  return input[0].toUpperCase() + input.substring(1);
-}
+var inlineStyles = {
+  "button": "pf-v5-c-button",
+  "inlineEdit": "pf-v5-c-inline-edit",
+  "inlineEditAction": "pf-v5-c-inline-edit__action",
+  "inlineEditEditableText": "pf-v5-c-inline-edit__editable-text",
+  "inlineEditGroup": "pf-v5-c-inline-edit__group",
+  "inlineEditInput": "pf-v5-c-inline-edit__input",
+  "inlineEditLabel": "pf-v5-c-inline-edit__label",
+  "inlineEditValue": "pf-v5-c-inline-edit__value",
+  "modifiers": {
+    "iconGroup": "pf-m-icon-group",
+    "footer": "pf-m-footer",
+    "column": "pf-m-column",
+    "valid": "pf-m-valid",
+    "plain": "pf-m-plain",
+    "actionGroup": "pf-m-action-group",
+    "enableEditable": "pf-m-enable-editable",
+    "inlineEditable": "pf-m-inline-editable",
+    "enable": "pf-m-enable",
+    "bold": "pf-m-bold"
+  }
+};
 
-var TableGridBreakpoint;
+var HelpIconConfig = {
+  name: 'HelpIcon',
+  height: 1024,
+  width: 1024,
+  svgPath: 'M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0',
+  yOffset: 0,
+  xOffset: 0
+};
+var HelpIcon = createIcon(HelpIconConfig);
+var HelpIcon$1 = HelpIcon;
 
-(function (TableGridBreakpoint) {
-  TableGridBreakpoint["none"] = "";
-  TableGridBreakpoint["grid"] = "grid";
-  TableGridBreakpoint["gridMd"] = "grid-md";
-  TableGridBreakpoint["gridLg"] = "grid-lg";
-  TableGridBreakpoint["gridXl"] = "grid-xl";
-  TableGridBreakpoint["grid2xl"] = "grid-2xl";
-})(TableGridBreakpoint || (TableGridBreakpoint = {}));
+var TableTextVariant;
 
-var TableVariant;
+(function (TableTextVariant) {
+  TableTextVariant["div"] = "div";
+  TableTextVariant["nav"] = "nav";
+})(TableTextVariant || (TableTextVariant = {}));
 
-(function (TableVariant) {
-  TableVariant["compact"] = "compact";
-})(TableVariant || (TableVariant = {}));
+var WrapModifier;
 
-var TableComposableContext = React__namespace.createContext({
-  registerSelectableRow: function registerSelectableRow() {}
-});
-
-var TableComposableBase = function TableComposableBase(_a) {
-  var _b, _c;
+(function (WrapModifier) {
+  WrapModifier["wrap"] = "wrap";
+  WrapModifier["nowrap"] = "nowrap";
+  WrapModifier["truncate"] = "truncate";
+  WrapModifier["breakWord"] = "breakWord";
+  WrapModifier["fitContent"] = "fitContent";
+})(WrapModifier || (WrapModifier = {}));
 
-  var children = _a.children,
-      className = _a.className,
-      variant = _a.variant,
-      _a$borders = _a.borders,
-      borders = _a$borders === void 0 ? true : _a$borders,
-      _a$isStickyHeader = _a.isStickyHeader,
-      isStickyHeader = _a$isStickyHeader === void 0 ? false : _a$isStickyHeader,
-      _a$gridBreakPoint = _a.gridBreakPoint,
-      gridBreakPoint = _a$gridBreakPoint === void 0 ? TableGridBreakpoint.gridMd : _a$gridBreakPoint,
-      ariaLabel = _a['aria-label'],
-      _a$role = _a.role,
-      role = _a$role === void 0 ? 'grid' : _a$role,
-      innerRef = _a.innerRef,
-      ouiaId = _a.ouiaId,
-      _a$ouiaSafe = _a.ouiaSafe,
-      ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
-      _a$isTreeTable = _a.isTreeTable,
-      isTreeTable = _a$isTreeTable === void 0 ? false : _a$isTreeTable,
-      _a$isNested = _a.isNested,
-      isNested = _a$isNested === void 0 ? false : _a$isNested,
-      _a$isStriped = _a.isStriped,
-      isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
-      _a$isExpandable = _a.isExpandable,
-      isExpandable = _a$isExpandable === void 0 ? false : _a$isExpandable,
-      hasSelectableRowCaption = _a.hasSelectableRowCaption,
-      selectableRowCaptionText = _a.selectableRowCaptionText,
-      props = __rest(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "nestedHeaderColumnSpans", "hasSelectableRowCaption", "selectableRowCaptionText"]);
+var TableText = function TableText(_a) {
+  var _a$children = _a.children,
+      children = _a$children === void 0 ? null : _a$children,
+      _a$className = _a.className,
+      className = _a$className === void 0 ? '' : _a$className,
+      _a$variant = _a.variant,
+      variant = _a$variant === void 0 ? 'span' : _a$variant,
+      _a$wrapModifier = _a.wrapModifier,
+      wrapModifier = _a$wrapModifier === void 0 ? null : _a$wrapModifier,
+      _a$tooltip = _a.tooltip,
+      tooltipProp = _a$tooltip === void 0 ? '' : _a$tooltip,
+      _a$tooltipProps = _a.tooltipProps,
+      tooltipProps = _a$tooltipProps === void 0 ? {} : _a$tooltipProps,
+      _a$onMouseEnter = _a.onMouseEnter,
+      onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
+      _a$focused = _a.focused,
+      focused = _a$focused === void 0 ? false : _a$focused,
+      _a$tooltipHasDefaultB = _a.tooltipHasDefaultBehavior,
+      tooltipHasDefaultBehavior = _a$tooltipHasDefaultB === void 0 ? false : _a$tooltipHasDefaultB,
+      props = __rest$1(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter", "focused", "tooltipHasDefaultBehavior"]);
 
-  var tableRef = innerRef || React__namespace.useRef(null);
+  var Component = variant;
+  var textRef = React__namespace.createRef();
 
-  var _React$useState = React__namespace.useState(false),
-      hasSelectableRows = _React$useState[0],
-      setHasSelectableRows = _React$useState[1];
+  var _React$useState = React__namespace.useState(tooltipProp),
+      tooltip = _React$useState[0],
+      setTooltip = _React$useState[1];
 
-  var _React$useState2 = React__namespace.useState(),
-      tableCaption = _React$useState2[0],
-      setTableCaption = _React$useState2[1];
+  var onMouseEnter = function onMouseEnter(event) {
+    if (event.target.offsetWidth < event.target.scrollWidth) {
+      setTooltip(tooltipProp || event.target.innerText);
+    } else {
+      setTooltip('');
+    }
 
-  React__namespace.useEffect(function () {
-    document.addEventListener('keydown', handleKeys); // sets up roving tab-index to tree tables only
+    onMouseEnterProp(event);
+  };
 
-    if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
-      var tbody = tableRef.current.querySelector('tbody');
-      tbody && reactCore.setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
+  var onFocus = function onFocus(element) {
+    if (element.offsetWidth < element.scrollWidth) {
+      setTooltip(tooltipProp || element.innerText);
+    } else {
+      setTooltip('');
     }
+  };
 
-    return function cleanup() {
-      document.removeEventListener('keydown', handleKeys);
-    };
-  }, [tableRef, tableRef.current]);
+  var text = React__namespace.createElement(Component, Object.assign({
+    ref: textRef,
+    onMouseEnter: !tooltipHasDefaultBehavior ? onMouseEnter : undefined,
+    className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText)
+  }, props), children);
   React__namespace.useEffect(function () {
-    if (selectableRowCaptionText) {
-      setTableCaption(React__namespace.createElement("caption", null, selectableRowCaptionText, React__namespace.createElement("div", {
-        className: "pf-screen-reader"
-      }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter.")));
-    } else {
-      setTableCaption(React__namespace.createElement("caption", {
-        className: "pf-screen-reader"
-      }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter."));
+    if (!tooltipHasDefaultBehavior) {
+      if (focused) {
+        onFocus(textRef.current);
+      } else {
+        setTooltip('');
+      }
     }
-  }, [selectableRowCaptionText]);
-  var ouiaProps = reactCore.useOUIAProps('Table', ouiaId, ouiaSafe);
-  var grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
-  var breakPointPrefix = "treeView" + (gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1));
-  var treeGrid = (_c = stylesTreeView.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
+  }, [focused, tooltipHasDefaultBehavior]);
+  return tooltip !== '' ? React__namespace.createElement(Tooltip.Tooltip, Object.assign({
+    triggerRef: textRef,
+    content: tooltip
+  }, !tooltipHasDefaultBehavior && {
+    isVisible: true
+  }, tooltipProps), text) : text;
+};
+TableText.displayName = 'TableText';
 
-  var handleKeys = function handleKeys(event) {
-    if (isNested || !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
-    tableRef && tableRef.current !== event.target.closest('.pf-c-table:not(.pf-m-nested)')) {
-      return;
-    }
+var HeaderCellInfoWrapper = function HeaderCellInfoWrapper(_ref) {
+  var children = _ref.children,
+      info = _ref.info,
+      className = _ref.className,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
+      popoverProps = _ref.popoverProps,
+      tooltipProps = _ref.tooltipProps,
+      ariaLabel = _ref.ariaLabel;
+  return React__namespace.createElement("div", {
+    className: css(styles$1.tableColumnHelp, className)
+  }, typeof children === 'string' ? React__namespace.createElement(TableText, null, children) : children, React__namespace.createElement("span", {
+    className: css(styles$1.tableColumnHelpAction)
+  }, variant === 'tooltip' ? React__namespace.createElement(Tooltip.Tooltip, Object.assign({
+    content: info
+  }, tooltipProps), React__namespace.createElement(Button.Button, {
+    variant: "plain",
+    "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
+  }, React__namespace.createElement(HelpIcon$1, null))) : React__namespace.createElement(Popover.Popover, Object.assign({
+    bodyContent: info
+  }, popoverProps), React__namespace.createElement(Button.Button, {
+    variant: "plain",
+    "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
+  }, React__namespace.createElement(HelpIcon$1, null)))));
+};
+HeaderCellInfoWrapper.displayName = 'HeaderCellInfoWrapper';
 
-    var activeElement = document.activeElement;
-    var key = event.key;
-    var rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter(function (el) {
-      return !el.classList.contains('pf-m-disabled') && !el.hidden;
-    });
+var stylesGrid = {
+  "button": "pf-v5-c-button",
+  "modifiers": {
+    "grid": "pf-m-grid",
+    "compact": "pf-m-compact",
+    "expanded": "pf-m-expanded",
+    "selected": "pf-m-selected",
+    "noPadding": "pf-m-no-padding",
+    "hoverable": "pf-m-hoverable",
+    "nowrap": "pf-m-nowrap",
+    "fitContent": "pf-m-fit-content",
+    "truncate": "pf-m-truncate",
+    "gridMd": "pf-m-grid-md",
+    "gridLg": "pf-m-grid-lg",
+    "gridXl": "pf-m-grid-xl",
+    "grid_2xl": "pf-m-grid-2xl"
+  },
+  "table": "pf-v5-c-table",
+  "tableAction": "pf-v5-c-table__action",
+  "tableButton": "pf-v5-c-table__button",
+  "tableCheck": "pf-v5-c-table__check",
+  "tableCompoundExpansionToggle": "pf-v5-c-table__compound-expansion-toggle",
+  "tableExpandableRow": "pf-v5-c-table__expandable-row",
+  "tableExpandableRowContent": "pf-v5-c-table__expandable-row-content",
+  "tableFavorite": "pf-v5-c-table__favorite",
+  "tableIcon": "pf-v5-c-table__icon",
+  "tableInlineEditAction": "pf-v5-c-table__inline-edit-action",
+  "tableTbody": "pf-v5-c-table__tbody",
+  "tableTd": "pf-v5-c-table__td",
+  "tableText": "pf-v5-c-table__text",
+  "tableTh": "pf-v5-c-table__th",
+  "tableThead": "pf-v5-c-table__thead",
+  "tableToggle": "pf-v5-c-table__toggle",
+  "tableToggleIcon": "pf-v5-c-table__toggle-icon",
+  "tableTr": "pf-v5-c-table__tr"
+};
 
-    if (key === 'Space' || key === 'Enter') {
-      activeElement.click();
-      event.preventDefault();
-    }
+var treeViewStyles = {
+  "dirRtl": "pf-v5-m-dir-rtl",
+  "dropdown": "pf-v5-c-dropdown",
+  "modifiers": {
+    "treeView": "pf-m-tree-view",
+    "noInset": "pf-m-no-inset",
+    "treeViewGrid": "pf-m-tree-view-grid",
+    "treeViewDetailsExpanded": "pf-m-tree-view-details-expanded",
+    "treeViewGridMd": "pf-m-tree-view-grid-md",
+    "treeViewGridLg": "pf-m-tree-view-grid-lg",
+    "treeViewGridXl": "pf-m-tree-view-grid-xl",
+    "treeViewGrid_2xl": "pf-m-tree-view-grid-2xl"
+  },
+  "table": "pf-v5-c-table",
+  "tableAction": "pf-v5-c-table__action",
+  "tableCheck": "pf-v5-c-table__check",
+  "tableTbody": "pf-v5-c-table__tbody",
+  "tableTd": "pf-v5-c-table__td",
+  "tableTh": "pf-v5-c-table__th",
+  "tableThead": "pf-v5-c-table__thead",
+  "tableToggle": "pf-v5-c-table__toggle",
+  "tableToggleIcon": "pf-v5-c-table__toggle-icon",
+  "tableTr": "pf-v5-c-table__tr",
+  "tableTreeViewDetailsToggle": "pf-v5-c-table__tree-view-details-toggle",
+  "tableTreeViewIcon": "pf-v5-c-table__tree-view-icon",
+  "tableTreeViewMain": "pf-v5-c-table__tree-view-main",
+  "tableTreeViewText": "pf-v5-c-table__tree-view-text",
+  "tableTreeViewTitleCell": "pf-v5-c-table__tree-view-title-cell",
+  "tableTreeViewTitleHeaderCell": "pf-v5-c-table__tree-view-title-header-cell"
+};
 
-    var getFocusableElement = function getFocusableElement(element) {
-      return element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
-    };
+var RowSelectVariant;
 
-    reactCore.handleArrows(event, rows, function (element) {
-      return element === activeElement.closest('tr');
-    }, getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
-  };
+(function (RowSelectVariant) {
+  RowSelectVariant["radio"] = "radio";
+  RowSelectVariant["checkbox"] = "checkbox";
+})(RowSelectVariant || (RowSelectVariant = {}));
 
-  var registerSelectableRow = function registerSelectableRow() {
-    !hasSelectableRows && setHasSelectableRows(true);
-  };
+var SelectColumn = function SelectColumn(_a) {
+  var _a$children = _a.children,
+      children = _a$children === void 0 ? null : _a$children,
+      _a$onSelect = _a.onSelect,
+      onSelect = _a$onSelect === void 0 ? null : _a$onSelect,
+      selectVariant = _a.selectVariant,
+      tooltip = _a.tooltip,
+      tooltipProps = _a.tooltipProps,
+      props = __rest$1(_a, ["children", "className", "onSelect", "selectVariant", "tooltip", "tooltipProps"]);
 
-  return React__namespace.createElement(TableComposableContext.Provider, {
-    value: {
-      registerSelectableRow: registerSelectableRow
-    }
-  }, React__namespace.createElement("table", Object.assign({
-    "aria-label": ariaLabel,
-    role: role,
-    className: css(className, styles$1.table, isTreeTable ? treeGrid : grid, styles$1.modifiers[variant], !borders && styles$1.modifiers.noBorderRows, isStickyHeader && styles$1.modifiers.stickyHeader, isTreeTable && stylesTreeView.modifiers.treeView, isStriped && styles$1.modifiers.striped, isExpandable && styles$1.modifiers.expandable, isNested && 'pf-m-nested'),
-    ref: tableRef
-  }, isTreeTable && {
-    role: 'treegrid'
-  }, ouiaProps, props), hasSelectableRowCaption && hasSelectableRows && tableCaption, children));
+  var inputRef = React__namespace.createRef();
+  var content = React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("label", null, React__namespace.createElement("input", Object.assign({}, props, {
+    ref: inputRef,
+    type: selectVariant,
+    onChange: onSelect
+  }))), children);
+  return tooltip ? React__namespace.createElement(Tooltip.Tooltip, Object.assign({
+    triggerRef: inputRef,
+    content: tooltip
+  }, tooltipProps), content) : content;
 };
+SelectColumn.displayName = 'SelectColumn';
 
-var TableComposable = React__namespace.forwardRef(function (props, ref) {
-  return React__namespace.createElement(TableComposableBase, Object.assign({}, props, {
-    innerRef: ref
-  }));
-});
-TableComposable.displayName = 'TableComposable';
+var checkStyles = {
+  "check": "pf-v5-c-check",
+  "checkBody": "pf-v5-c-check__body",
+  "checkDescription": "pf-v5-c-check__description",
+  "checkInput": "pf-v5-c-check__input",
+  "checkLabel": "pf-v5-c-check__label",
+  "checkLabelRequired": "pf-v5-c-check__label-required",
+  "modifiers": {
+    "standalone": "pf-m-standalone",
+    "disabled": "pf-m-disabled"
+  }
+};
 
-var TheadBase = function TheadBase(_a) {
-  var children = _a.children,
-      className = _a.className,
-      _a$noWrap = _a.noWrap,
-      noWrap = _a$noWrap === void 0 ? false : _a$noWrap,
-      innerRef = _a.innerRef,
-      hasNestedHeader = _a.hasNestedHeader,
-      props = __rest(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
+var selectable = function selectable(label, _ref) {
+  var rowIndex = _ref.rowIndex,
+      columnIndex = _ref.columnIndex,
+      rowData = _ref.rowData,
+      column = _ref.column,
+      property = _ref.property,
+      tooltip = _ref.tooltip;
+  var _column$extraParams = column.extraParams,
+      onSelect = _column$extraParams.onSelect,
+      selectVariant = _column$extraParams.selectVariant,
+      allRowsSelected = _column$extraParams.allRowsSelected,
+      isHeaderSelectDisabled = _column$extraParams.isHeaderSelectDisabled;
+  var extraData = {
+    rowIndex: rowIndex,
+    columnIndex: columnIndex,
+    column: column,
+    property: property
+  };
 
-  return React__namespace.createElement("thead", Object.assign({
-    className: css(className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader),
-    ref: innerRef
-  }, props), children);
-};
+  if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect && !rowData.fullWidth) {
+    return {
+      component: 'td',
+      isVisible: true
+    };
+  }
 
-var Thead = React__namespace.forwardRef(function (props, ref) {
-  return React__namespace.createElement(TheadBase, Object.assign({}, props, {
-    innerRef: ref
-  }));
-});
-Thead.displayName = 'Thead';
+  var rowId = rowIndex !== undefined ? rowIndex : -1;
+  /**
+   * @param {React.FormEvent} event - React form event
+   */
 
-var TbodyBase = function TbodyBase(_a) {
-  var children = _a.children,
-      className = _a.className,
-      isExpanded = _a.isExpanded,
-      innerRef = _a.innerRef,
-      _a$isEvenStriped = _a.isEvenStriped,
-      isEvenStriped = _a$isEvenStriped === void 0 ? false : _a$isEvenStriped,
-      _a$isOddStriped = _a.isOddStriped,
-      isOddStriped = _a$isOddStriped === void 0 ? false : _a$isOddStriped,
-      props = __rest(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
+  function selectClick(event) {
+    var selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected; // tslint:disable-next-line:no-unused-expression
 
-  return React__namespace.createElement("tbody", Object.assign({
-    role: "rowgroup",
-    className: css(className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven),
-    ref: innerRef
-  }, props), children);
-};
-
-var Tbody = React__namespace.forwardRef(function (props, ref) {
-  return React__namespace.createElement(TbodyBase, Object.assign({}, props, {
-    innerRef: ref
-  }));
-});
-Tbody.displayName = 'Tbody';
-
-var TrBase = function TrBase(_a) {
-  var children = _a.children,
-      className = _a.className,
-      isExpanded = _a.isExpanded,
-      isEditable = _a.isEditable,
-      _a$isHidden = _a.isHidden,
-      isHidden = _a$isHidden === void 0 ? false : _a$isHidden,
-      _a$isHoverable = _a.isHoverable,
-      isHoverable = _a$isHoverable === void 0 ? false : _a$isHoverable,
-      _a$isRowSelected = _a.isRowSelected,
-      isRowSelected = _a$isRowSelected === void 0 ? false : _a$isRowSelected,
-      _a$isStriped = _a.isStriped,
-      isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
-      innerRef = _a.innerRef,
-      ouiaId = _a.ouiaId,
-      _a$ouiaSafe = _a.ouiaSafe,
-      ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
-      _a$resetOffset = _a.resetOffset,
-      resetOffset = _a$resetOffset === void 0 ? false : _a$resetOffset,
-      onRowClick = _a.onRowClick,
-      isSelectable = _a.isSelectable,
-      passedAriaLabel = _a['aria-label'],
-      props = __rest(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isHoverable", "isRowSelected", "isStriped", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
-
-  var ouiaProps = reactCore.useOUIAProps('TableRow', ouiaId, ouiaSafe);
-
-  var _React$useState = React__namespace.useState(''),
-      computedAriaLabel = _React$useState[0],
-      setComputedAriaLabel = _React$useState[1];
-
-  var onKeyDown = null;
-
-  if (onRowClick) {
-    onKeyDown = function onKeyDown(e) {
-      if (e.key === 'Enter' || e.key === ' ') {
-        onRowClick(e);
-        e.preventDefault();
-      }
-    };
+    onSelect && onSelect(event, selected, rowId, rowData, extraData);
   }
 
-  var rowIsHidden = isHidden || isExpanded !== undefined && !isExpanded;
+  var customProps = Object.assign(Object.assign(Object.assign({}, rowId !== -1 ? {
+    checked: rowData && !!rowData.selected,
+    'aria-label': "Select row " + rowIndex
+  } : {
+    checked: allRowsSelected,
+    'aria-label': 'Select all rows'
+  }), rowData && (rowData.disableCheckbox || rowData.disableSelection) && {
+    disabled: true,
+    className: checkStyles.checkInput
+  }), !rowData && isHeaderSelectDisabled && {
+    disabled: true
+  });
+  var selectName = 'check-all';
 
-  var _React$useContext = React__namespace.useContext(TableComposableContext),
-      registerSelectableRow = _React$useContext.registerSelectableRow;
+  if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
+    selectName = "checkrow" + rowIndex;
+  } else if (rowId !== -1) {
+    selectName = 'radioGroup';
+  }
 
-  React__namespace.useEffect(function () {
-    if (isSelectable && !rowIsHidden) {
-      setComputedAriaLabel((isRowSelected ? 'Selected' : 'Unselected') + ", selectable row.");
-      registerSelectableRow();
-    } else {
-      setComputedAriaLabel(undefined);
-    }
-  }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
-  var ariaLabel = passedAriaLabel || computedAriaLabel;
-  return React__namespace.createElement(React__namespace.Fragment, null, isSelectable && React__namespace.createElement("output", {
-    className: "pf-screen-reader"
-  }, ariaLabel), React__namespace.createElement("tr", Object.assign({
-    className: css(className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isHoverable && styles$1.modifiers.hoverable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, resetOffset && styles$1.modifiers.firstCellOffsetReset),
-    hidden: rowIsHidden
-  }, isHoverable && {
-    tabIndex: 0
-  }, {
-    "aria-label": ariaLabel,
-    ref: innerRef
-  }, onRowClick && {
-    onClick: onRowClick,
-    onKeyDown: onKeyDown
-  }, ouiaProps, props), children));
+  return {
+    className: css(styles$1.tableCheck),
+    component: rowId !== -1 ? 'td' : 'th',
+    isVisible: !rowData || !rowData.fullWidth,
+    children: React__namespace.createElement(SelectColumn, Object.assign({}, customProps, {
+      selectVariant: selectVariant,
+      onSelect: selectClick,
+      name: selectName,
+      tooltip: tooltip
+    }), label)
+  };
 };
 
-var Tr = React__namespace.forwardRef(function (props, ref) {
-  return React__namespace.createElement(TrBase, Object.assign({}, props, {
-    innerRef: ref
-  }));
-});
-Tr.displayName = 'Tr';
-
-Promise.resolve().then(function () { return require('./table-scrollable-8d506d50.js'); });
-var styles = {
-  "modifiers": {
-    "borderRight": "pf-m-border-right",
-    "borderLeft": "pf-m-border-left",
-    "stickyHeader": "pf-m-sticky-header"
-  },
-  "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
-  "scrollOuterWrapper": "pf-c-scroll-outer-wrapper",
-  "table": "pf-c-table",
-  "tableStickyColumn": "pf-c-table__sticky-column"
+var LongArrowAltUpIconConfig = {
+  name: 'LongArrowAltUpIcon',
+  height: 512,
+  width: 256,
+  svgPath: 'M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z',
+  yOffset: 0,
+  xOffset: 0
 };
+var LongArrowAltUpIcon = createIcon(LongArrowAltUpIconConfig);
+var LongArrowAltUpIcon$1 = LongArrowAltUpIcon;
 
-var IconSize;
-
-(function (IconSize) {
-  IconSize["sm"] = "sm";
-  IconSize["md"] = "md";
-  IconSize["lg"] = "lg";
-  IconSize["xl"] = "xl";
-})(IconSize || (IconSize = {}));
-
-var getSize = function getSize(size) {
-  switch (size) {
-    case IconSize.sm:
-      return '1em';
-
-    case IconSize.md:
-      return '1.5em';
-
-    case IconSize.lg:
-      return '2em';
-
-    case IconSize.xl:
-      return '3em';
-
-    default:
-      return '1em';
-  }
+var LongArrowAltDownIconConfig = {
+  name: 'LongArrowAltDownIcon',
+  height: 512,
+  width: 256,
+  svgPath: 'M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z',
+  yOffset: 0,
+  xOffset: 0
 };
-var currentId = 0;
-/**
- * Factory to create Icon class components for consumers
- */
-
-function createIcon(_ref) {
-  var name = _ref.name,
-      _ref$xOffset = _ref.xOffset,
-      xOffset = _ref$xOffset === void 0 ? 0 : _ref$xOffset,
-      _ref$yOffset = _ref.yOffset,
-      yOffset = _ref$yOffset === void 0 ? 0 : _ref$yOffset,
-      width = _ref.width,
-      height = _ref.height,
-      svgPath = _ref.svgPath;
-
-  var _a;
-
-  return _a = /*#__PURE__*/function (_React$Component) {
-    _inheritsLoose(SVGIcon, _React$Component);
-
-    function SVGIcon() {
-      var _this;
-
-      _this = _React$Component.apply(this, arguments) || this;
-      _this.id = "icon-title-" + currentId++;
-      return _this;
-    }
-
-    var _proto = SVGIcon.prototype;
-
-    _proto.render = function render() {
-      var _a = this.props,
-          size = _a.size,
-          color = _a.color,
-          title = _a.title,
-          noVerticalAlign = _a.noVerticalAlign,
-          props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
-
-      var hasTitle = Boolean(title);
-      var heightWidth = getSize(size);
-      var baseAlign = -0.125 * Number.parseFloat(heightWidth);
-      var style = noVerticalAlign ? null : {
-        verticalAlign: baseAlign + "em"
-      };
-      var viewBox = [xOffset, yOffset, width, height].join(' ');
-      return React__namespace.createElement("svg", Object.assign({
-        style: style,
-        fill: color,
-        height: heightWidth,
-        width: heightWidth,
-        viewBox: viewBox,
-        "aria-labelledby": hasTitle ? this.id : null,
-        "aria-hidden": hasTitle ? null : true,
-        role: "img"
-      }, props), hasTitle && React__namespace.createElement("title", {
-        id: this.id
-      }, title), React__namespace.createElement("path", {
-        d: svgPath
-      }));
-    };
-
-    return SVGIcon;
-  }(React__namespace.Component), _a.displayName = name, _a.defaultProps = {
-    color: 'currentColor',
-    size: IconSize.sm,
-    noVerticalAlign: false
-  }, _a;
-}
+var LongArrowAltDownIcon = createIcon(LongArrowAltDownIconConfig);
+var LongArrowAltDownIcon$1 = LongArrowAltDownIcon;
 
-var HelpIconConfig = {
-  name: 'HelpIcon',
-  height: 1024,
-  width: 1024,
-  svgPath: 'M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0',
+var ArrowsAltVIconConfig = {
+  name: 'ArrowsAltVIcon',
+  height: 512,
+  width: 256,
+  svgPath: 'M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z',
   yOffset: 0,
   xOffset: 0
 };
-var HelpIcon = createIcon(HelpIconConfig);
-var HelpIcon$1 = HelpIcon;
-
-var TableTextVariant;
-
-(function (TableTextVariant) {
-  TableTextVariant["div"] = "div";
-  TableTextVariant["nav"] = "nav";
-})(TableTextVariant || (TableTextVariant = {}));
+var ArrowsAltVIcon = createIcon(ArrowsAltVIconConfig);
+var ArrowsAltVIcon$1 = ArrowsAltVIcon;
 
-var WrapModifier;
+var SortByDirection;
 
-(function (WrapModifier) {
-  WrapModifier["wrap"] = "wrap";
-  WrapModifier["nowrap"] = "nowrap";
-  WrapModifier["truncate"] = "truncate";
-  WrapModifier["breakWord"] = "breakWord";
-  WrapModifier["fitContent"] = "fitContent";
-})(WrapModifier || (WrapModifier = {}));
+(function (SortByDirection) {
+  SortByDirection["asc"] = "asc";
+  SortByDirection["desc"] = "desc";
+})(SortByDirection || (SortByDirection = {}));
 
-var TableText = function TableText(_a) {
+var SortColumn = function SortColumn(_a) {
   var _a$children = _a.children,
       children = _a$children === void 0 ? null : _a$children,
       _a$className = _a.className,
       className = _a$className === void 0 ? '' : _a$className,
-      _a$variant = _a.variant,
-      variant = _a$variant === void 0 ? 'span' : _a$variant,
-      _a$wrapModifier = _a.wrapModifier,
-      wrapModifier = _a$wrapModifier === void 0 ? null : _a$wrapModifier,
-      _a$tooltip = _a.tooltip,
-      tooltipProp = _a$tooltip === void 0 ? '' : _a$tooltip,
-      _a$tooltipProps = _a.tooltipProps,
-      tooltipProps = _a$tooltipProps === void 0 ? {} : _a$tooltipProps,
-      _a$onMouseEnter = _a.onMouseEnter,
-      onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
-      props = __rest(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter"]);
-
-  var Component = variant;
+      _a$isSortedBy = _a.isSortedBy,
+      isSortedBy = _a$isSortedBy === void 0 ? false : _a$isSortedBy,
+      _a$onSort = _a.onSort,
+      onSort = _a$onSort === void 0 ? null : _a$onSort,
+      _a$sortDirection = _a.sortDirection,
+      sortDirection = _a$sortDirection === void 0 ? '' : _a$sortDirection,
+      _a$type = _a.type,
+      type = _a$type === void 0 ? 'button' : _a$type,
+      tooltip = _a.tooltip,
+      tooltipProps = _a.tooltipProps,
+      tooltipHasDefaultBehavior = _a.tooltipHasDefaultBehavior,
+      props = __rest$1(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type", "tooltip", "tooltipProps", "tooltipHasDefaultBehavior"]);
 
-  var _React$useState = React__namespace.useState(''),
-      tooltip = _React$useState[0],
-      setTooltip = _React$useState[1];
+  var SortedByIcon;
 
-  var onMouseEnter = function onMouseEnter(event) {
-    if (event.target.offsetWidth < event.target.scrollWidth) {
-      setTooltip(tooltipProp || event.target.innerText);
-    } else {
-      setTooltip('');
-    }
+  var _React$useState = React__namespace.useState(false),
+      focused = _React$useState[0],
+      setFocused = _React$useState[1];
 
-    onMouseEnterProp(event);
-  };
-
-  var text = React__namespace.createElement(Component, Object.assign({
-    onMouseEnter: onMouseEnter,
-    className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText)
-  }, props), children);
-  return tooltip !== '' ? React__namespace.createElement(Tooltip.Tooltip, Object.assign({
-    content: tooltip,
-    isVisible: true
-  }, tooltipProps), text) : text;
-};
-TableText.displayName = 'TableText';
-
-var HeaderCellInfoWrapper = function HeaderCellInfoWrapper(_ref) {
-  var children = _ref.children,
-      info = _ref.info,
-      className = _ref.className,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
-      popoverProps = _ref.popoverProps,
-      tooltipProps = _ref.tooltipProps,
-      ariaLabel = _ref.ariaLabel;
-  return React__namespace.createElement("div", {
-    className: css(styles$1.tableColumnHelp, className)
-  }, typeof children === 'string' ? React__namespace.createElement(TableText, null, children) : children, React__namespace.createElement("span", {
-    className: css(styles$1.tableColumnHelpAction)
-  }, variant === 'tooltip' ? React__namespace.createElement(reactCore.Tooltip, Object.assign({
-    content: info
-  }, tooltipProps), React__namespace.createElement(reactCore.Button, {
-    variant: "plain",
-    "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
-  }, React__namespace.createElement(HelpIcon$1, {
-    noVerticalAlign: true
-  }))) : React__namespace.createElement(reactCore.Popover, Object.assign({
-    bodyContent: info
-  }, popoverProps), React__namespace.createElement(reactCore.Button, {
-    variant: "plain",
-    "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
-  }, React__namespace.createElement(HelpIcon$1, {
-    noVerticalAlign: true
-  })))));
-};
-HeaderCellInfoWrapper.displayName = 'HeaderCellInfoWrapper';
-
-var info = function info(_ref) {
-  var tooltip = _ref.tooltip,
-      tooltipProps = _ref.tooltipProps,
-      popover = _ref.popover,
-      popoverProps = _ref.popoverProps,
-      className = _ref.className,
-      ariaLabel = _ref.ariaLabel;
-
-  var infoObj = function infoObj(value) {
-    return {
-      className: styles$1.modifiers.help,
-      children: tooltip ? React__namespace.createElement(HeaderCellInfoWrapper, {
-        variant: "tooltip",
-        info: tooltip,
-        tooltipProps: tooltipProps,
-        ariaLabel: ariaLabel,
-        className: className
-      }, value) : React__namespace.createElement(HeaderCellInfoWrapper, {
-        variant: "popover",
-        info: popover,
-        popoverProps: popoverProps,
-        ariaLabel: ariaLabel,
-        className: className
-      }, value)
-    };
-  };
-
-  return infoObj;
-};
-
-var LongArrowAltUpIconConfig = {
-  name: 'LongArrowAltUpIcon',
-  height: 512,
-  width: 256,
-  svgPath: 'M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z',
-  yOffset: 0,
-  xOffset: 0
-};
-var LongArrowAltUpIcon = createIcon(LongArrowAltUpIconConfig);
-var LongArrowAltUpIcon$1 = LongArrowAltUpIcon;
-
-var LongArrowAltDownIconConfig = {
-  name: 'LongArrowAltDownIcon',
-  height: 512,
-  width: 256,
-  svgPath: 'M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z',
-  yOffset: 0,
-  xOffset: 0
-};
-var LongArrowAltDownIcon = createIcon(LongArrowAltDownIconConfig);
-var LongArrowAltDownIcon$1 = LongArrowAltDownIcon;
-
-var ArrowsAltVIconConfig = {
-  name: 'ArrowsAltVIcon',
-  height: 512,
-  width: 256,
-  svgPath: 'M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z',
-  yOffset: 0,
-  xOffset: 0
-};
-var ArrowsAltVIcon = createIcon(ArrowsAltVIconConfig);
-var ArrowsAltVIcon$1 = ArrowsAltVIcon;
-
-var SortByDirection;
-
-(function (SortByDirection) {
-  SortByDirection["asc"] = "asc";
-  SortByDirection["desc"] = "desc";
-})(SortByDirection || (SortByDirection = {}));
-
-var SortColumn = function SortColumn(_a) {
-  var _a$children = _a.children,
-      children = _a$children === void 0 ? null : _a$children,
-      _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
-      _a$isSortedBy = _a.isSortedBy,
-      isSortedBy = _a$isSortedBy === void 0 ? false : _a$isSortedBy,
-      _a$onSort = _a.onSort,
-      onSort = _a$onSort === void 0 ? null : _a$onSort,
-      _a$sortDirection = _a.sortDirection,
-      sortDirection = _a$sortDirection === void 0 ? '' : _a$sortDirection,
-      _a$type = _a.type,
-      type = _a$type === void 0 ? 'button' : _a$type,
-      props = __rest(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type"]);
-
-  var SortedByIcon;
-
-  if (isSortedBy) {
-    SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon$1 : LongArrowAltDownIcon$1;
-  } else {
-    SortedByIcon = ArrowsAltVIcon$1;
-  }
+  if (isSortedBy) {
+    SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon$1 : LongArrowAltDownIcon$1;
+  } else {
+    SortedByIcon = ArrowsAltVIcon$1;
+  }
 
   return React__namespace.createElement("button", Object.assign({}, props, {
     type: type,
     className: css(className, styles$1.tableButton),
     onClick: function onClick(event) {
       return onSort && onSort(event);
+    },
+    onFocus: function onFocus() {
+      return setFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setFocused(false);
     }
   }), React__namespace.createElement("div", {
     className: css(className, styles$1.tableButtonContent)
-  }, React__namespace.createElement(TableText, null, children), React__namespace.createElement("span", {
+  }, React__namespace.createElement(TableText, {
+    tooltip: tooltip,
+    tooltipProps: tooltipProps,
+    tooltipHasDefaultBehavior: tooltipHasDefaultBehavior,
+    focused: focused
+  }, children), React__namespace.createElement("span", {
     className: css(styles$1.tableSortIndicator)
   }, React__namespace.createElement(SortedByIcon, null))));
 };
@@ -897,7 +943,10 @@ var sortableFavorites = function sortableFavorites(sort) {
           sortBy: sort.sortBy,
           onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
         }
-      }
+      },
+      tooltip: sort.tooltip,
+      tooltipProps: sort.tooltipProps,
+      tooltipHasDefaultBehavior: true
     });
   };
 };
@@ -906,7 +955,10 @@ var sortable = function sortable(label, _ref) {
       column = _ref.column,
       property = _ref.property,
       className = _ref.className,
-      ariaLabel = _ref.ariaLabel;
+      ariaLabel = _ref.ariaLabel,
+      tooltip = _ref.tooltip,
+      tooltipProps = _ref.tooltipProps,
+      tooltipHasDefaultBehavior = _ref.tooltipHasDefaultBehavior;
   var _column$extraParams = column.extraParams,
       sortBy = _column$extraParams.sortBy,
       onSort = _column$extraParams.onSort;
@@ -940,219 +992,660 @@ var sortable = function sortable(label, _ref) {
       isSortedBy: isSortedBy,
       sortDirection: isSortedBy ? sortBy.direction : '',
       onSort: sortClicked,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      tooltip: tooltip,
+      tooltipProps: tooltipProps,
+      tooltipHasDefaultBehavior: tooltipHasDefaultBehavior
     }, label)
   };
 };
 
-var RowSelectVariant;
+var resolveOrDefault = function resolveOrDefault(resolver, defaultValue, rowData, extraData) {
+  return typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue;
+};
 
-(function (RowSelectVariant) {
-  RowSelectVariant["radio"] = "radio";
-  RowSelectVariant["checkbox"] = "checkbox";
-})(RowSelectVariant || (RowSelectVariant = {}));
+var cellActions = function cellActions(actions, actionResolver, areActionsDisabled) {
+  return function (label, _ref) {
+    var rowData = _ref.rowData,
+        column = _ref.column,
+        rowIndex = _ref.rowIndex,
+        columnIndex = _ref.columnIndex,
+        _ref$column$extraPara = _ref.column.extraParams,
+        actionsToggle = _ref$column$extraPara.actionsToggle,
+        actionsPopperProps = _ref$column$extraPara.actionsPopperProps,
+        property = _ref.property;
+    var extraData = {
+      rowIndex: rowIndex,
+      columnIndex: columnIndex,
+      column: column,
+      property: property
+    };
+    var resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData);
+    var resolvedIsDisabled = resolveOrDefault(areActionsDisabled, rowData && rowData.disableActions, rowData, extraData);
+    var renderProps = resolvedActions && resolvedActions.length > 0 ? {
+      children: React__namespace.createElement(ActionsColumn, {
+        items: resolvedActions,
+        isDisabled: resolvedIsDisabled,
+        rowData: rowData,
+        extraData: extraData,
+        actionsToggle: actionsToggle,
+        popperProps: actionsPopperProps
+      }, label)
+    } : {};
+    return Object.assign({
+      className: css(styles$1.tableAction),
+      style: {
+        paddingRight: 0
+      },
+      isVisible: true
+    }, renderProps);
+  };
+};
 
-var SelectColumn = function SelectColumn(_a) {
-  var _a$children = _a.children,
-      children = _a$children === void 0 ? null : _a$children,
-      _a$onSelect = _a.onSelect,
-      onSelect = _a$onSelect === void 0 ? null : _a$onSelect,
-      selectVariant = _a.selectVariant,
-      props = __rest(_a, ["children", "className", "onSelect", "selectVariant"]);
+var camelize = function camelize(s) {
+  return s.toUpperCase().replace('-', '').replace('_', '');
+};
 
-  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("label", null, React__namespace.createElement("input", Object.assign({}, props, {
-    type: selectVariant,
-    onChange: onSelect
-  }))), children);
+var toCamel = function toCamel(s) {
+  return s.replace(/([-_][a-z])/gi, camelize);
 };
-SelectColumn.displayName = 'SelectColumn';
+/**
+ * @param {string} input - String to capitalize
+ */
 
-Promise.resolve().then(function () { return require('./check-293a8689.js'); });
-var checkStyles = {
-  "check": "pf-c-check",
-  "checkBody": "pf-c-check__body",
-  "checkDescription": "pf-c-check__description",
-  "checkInput": "pf-c-check__input",
-  "checkLabel": "pf-c-check__label",
-  "modifiers": {
-    "standalone": "pf-m-standalone",
-    "disabled": "pf-m-disabled"
-  }
+function capitalize(input) {
+  return input[0].toUpperCase() + input.substring(1);
+}
+
+var cellWidth = function cellWidth(width) {
+  return function () {
+    return {
+      className: css(styles$1.modifiers[typeof width === 'number' ? "width_" + width : "width" + capitalize(width)])
+    };
+  };
 };
 
-var selectable = function selectable(label, _ref) {
+var collapsible = function collapsible(value, _ref) {
   var rowIndex = _ref.rowIndex,
       columnIndex = _ref.columnIndex,
       rowData = _ref.rowData,
       column = _ref.column,
       property = _ref.property;
   var _column$extraParams = column.extraParams,
-      onSelect = _column$extraParams.onSelect,
-      selectVariant = _column$extraParams.selectVariant,
-      allRowsSelected = _column$extraParams.allRowsSelected,
-      isHeaderSelectDisabled = _column$extraParams.isHeaderSelectDisabled;
+      onCollapse = _column$extraParams.onCollapse,
+      _column$extraParams$r = _column$extraParams.rowLabeledBy,
+      rowLabeledBy = _column$extraParams$r === void 0 ? 'simple-node' : _column$extraParams$r,
+      _column$extraParams$e = _column$extraParams.expandId,
+      expandId = _column$extraParams$e === void 0 ? 'expand-toggle' : _column$extraParams$e,
+      allRowsExpanded = _column$extraParams.allRowsExpanded,
+      collapseAllAriaLabel = _column$extraParams.collapseAllAriaLabel;
   var extraData = {
     rowIndex: rowIndex,
     columnIndex: columnIndex,
     column: column,
     property: property
   };
-
-  if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect && !rowData.fullWidth) {
-    return {
-      component: 'td',
-      isVisible: true
-    };
-  }
-
   var rowId = rowIndex !== undefined ? rowIndex : -1;
+  var customProps = Object.assign({}, rowId !== -1 ? {
+    isOpen: rowData === null || rowData === void 0 ? void 0 : rowData.isOpen,
+    'aria-labelledby': "" + rowLabeledBy + rowId + " " + expandId + rowId
+  } : {
+    isOpen: allRowsExpanded,
+    'aria-label': collapseAllAriaLabel || 'Expand all rows'
+  });
   /**
-   * @param {React.FormEvent} event - React form event
+   * @param {React.MouseEvent} event - Mouse event
    */
 
-  function selectClick(event) {
-    var selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected; // tslint:disable-next-line:no-unused-expression
+  function onToggle(event) {
+    var open = rowData ? !rowData.isOpen : !allRowsExpanded; // tslint:disable-next-line:no-unused-expression
 
-    onSelect && onSelect(event, selected, rowId, rowData, extraData);
+    onCollapse && onCollapse(event, rowIndex, open, rowData, extraData);
   }
 
-  var customProps = Object.assign(Object.assign(Object.assign({}, rowId !== -1 ? {
-    checked: rowData && !!rowData.selected,
-    'aria-label': "Select row " + rowIndex
-  } : {
-    checked: allRowsSelected,
-    'aria-label': 'Select all rows'
-  }), rowData && (rowData.disableCheckbox || rowData.disableSelection) && {
-    disabled: true,
-    className: checkStyles.checkInput
-  }), !rowData && isHeaderSelectDisabled && {
-    disabled: true
-  });
-  var selectName = 'check-all';
-
-  if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
-    selectName = "checkrow" + rowIndex;
-  } else if (rowId !== -1) {
-    selectName = 'radioGroup';
+  return {
+    className: ((rowData === null || rowData === void 0 ? void 0 : rowData.isOpen) !== undefined || rowId === -1) && css(styles$1.tableToggle),
+    isVisible: !(rowData === null || rowData === void 0 ? void 0 : rowData.fullWidth),
+    children: React__namespace.createElement(CollapseColumn, Object.assign({
+      "aria-labelledby": "" + rowLabeledBy + rowId + " " + expandId + rowId,
+      onToggle: onToggle,
+      id: expandId + rowId
+    }, customProps), value)
+  };
+};
+
+var compoundExpand = function compoundExpand(value, _ref) {
+  var rowIndex = _ref.rowIndex,
+      columnIndex = _ref.columnIndex,
+      rowData = _ref.rowData,
+      column = _ref.column,
+      property = _ref.property;
+
+  if (!value) {
+    return null;
+  }
+
+  var title = value.title,
+      props = value.props;
+  var _column$extraParams = column.extraParams,
+      onExpand = _column$extraParams.onExpand,
+      _column$extraParams$e = _column$extraParams.expandId,
+      expandId = _column$extraParams$e === void 0 ? 'expand-toggle' : _column$extraParams$e;
+  var extraData = {
+    rowIndex: rowIndex,
+    columnIndex: columnIndex,
+    column: column,
+    property: property
+  };
+  /**
+   * @param {React.MouseEvent} event - Mouse event
+   */
+
+  function onToggle(event) {
+    // tslint:disable-next-line:no-unused-expression
+    onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
   }
 
   return {
-    className: css(styles$1.tableCheck),
-    component: 'td',
-    isVisible: !rowData || !rowData.fullWidth,
-    children: React__namespace.createElement(SelectColumn, Object.assign({}, customProps, {
-      selectVariant: selectVariant,
-      onSelect: selectClick,
-      name: selectName
-    }), label)
+    className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
+    children: props.isOpen !== undefined && React__namespace.createElement("button", {
+      type: "button",
+      className: css(styles$1.tableButton),
+      onClick: onToggle,
+      "aria-expanded": props.isOpen,
+      "aria-controls": props.ariaControls,
+      id: expandId + "-" + rowIndex + "-" + columnIndex
+    }, React__namespace.createElement(TableText, null, title))
   };
 };
 
-var AngleDownIconConfig = {
-  name: 'AngleDownIcon',
-  height: 512,
-  width: 320,
-  svgPath: 'M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z',
-  yOffset: 0,
-  xOffset: 0
+var visibilityModifiers = ['hidden', 'hiddenOnSm', 'hiddenOnMd', 'hiddenOnLg', 'hiddenOnXl', 'hiddenOn_2xl', 'visibleOnSm', 'visibleOnMd', 'visibleOnLg', 'visibleOnXl', 'visibleOn_2xl'];
+var Visibility = visibilityModifiers.filter(function (key) {
+  return styles$1.modifiers[key];
+}).reduce(function (acc, curr) {
+  var key2 = curr.replace('_2xl', '2Xl');
+  acc[key2] = styles$1.modifiers[curr];
+  return acc;
+}, {});
+var classNames = function classNames() {
+  var _arguments = arguments;
+  return function () {
+    return {
+      className: css.apply(void 0, [].slice.call(_arguments))
+    };
+  };
 };
-var AngleDownIcon = createIcon(AngleDownIconConfig);
-var AngleDownIcon$1 = AngleDownIcon;
 
-var CollapseColumn = function CollapseColumn(_a) {
+var info = function info(_ref) {
+  var tooltip = _ref.tooltip,
+      tooltipProps = _ref.tooltipProps,
+      popover = _ref.popover,
+      popoverProps = _ref.popoverProps,
+      className = _ref.className,
+      ariaLabel = _ref.ariaLabel;
+
+  var infoObj = function infoObj(value) {
+    return {
+      className: styles$1.modifiers.help,
+      children: tooltip ? React__namespace.createElement(HeaderCellInfoWrapper, {
+        variant: "tooltip",
+        info: tooltip,
+        tooltipProps: tooltipProps,
+        ariaLabel: ariaLabel,
+        className: className
+      }, value) : React__namespace.createElement(HeaderCellInfoWrapper, {
+        variant: "popover",
+        info: popover,
+        popoverProps: popoverProps,
+        ariaLabel: ariaLabel,
+        className: className
+      }, value)
+    };
+  };
+
+  return infoObj;
+};
+
+var FavoritesCell = function FavoritesCell(_a) {
   var _a$className = _a.className,
       className = _a$className === void 0 ? '' : _a$className,
-      _a$children = _a.children,
-      children = _a$children === void 0 ? null : _a$children,
-      isOpen = _a.isOpen,
-      onToggle = _a.onToggle,
-      props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
+      onFavorite = _a.onFavorite,
+      isFavorited = _a.isFavorited,
+      rowIndex = _a.rowIndex,
+      props = __rest$1(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
 
-  return React__namespace.createElement(React__namespace.Fragment, null, isOpen !== undefined && React__namespace.createElement(Button.Button, Object.assign({
-    className: css(className, isOpen && styles$1.modifiers.expanded)
-  }, props, {
+  var ariaProps = rowIndex === undefined ? {} : {
+    id: "favorites-button-" + rowIndex,
+    'aria-labelledby': "favorites-button-" + rowIndex
+  };
+  return React__namespace.createElement(Button.Button, Object.assign({
     variant: "plain",
-    "aria-label": props['aria-label'] || 'Details',
-    onClick: onToggle,
-    "aria-expanded": isOpen
-  }), React__namespace.createElement("div", {
-    className: css(styles$1.tableToggleIcon)
-  }, React__namespace.createElement(AngleDownIcon$1, null))), children);
+    className: className,
+    type: "button",
+    "aria-label": isFavorited ? 'Starred' : 'Not starred',
+    onClick: onFavorite
+  }, ariaProps, props), React__namespace.createElement(StarIcon$1, {
+    "aria-hidden": true
+  }));
 };
-CollapseColumn.displayName = 'CollapseColumn';
+FavoritesCell.displayName = 'FavoritesCell';
 
-var collapsible = function collapsible(value, _ref) {
+var favoritable = function favoritable(value, _ref) {
   var rowIndex = _ref.rowIndex,
       columnIndex = _ref.columnIndex,
       rowData = _ref.rowData,
       column = _ref.column,
       property = _ref.property;
-  var _column$extraParams = column.extraParams,
-      onCollapse = _column$extraParams.onCollapse,
-      _column$extraParams$r = _column$extraParams.rowLabeledBy,
-      rowLabeledBy = _column$extraParams$r === void 0 ? 'simple-node' : _column$extraParams$r,
-      _column$extraParams$e = _column$extraParams.expandId,
-      expandId = _column$extraParams$e === void 0 ? 'expand-toggle' : _column$extraParams$e,
-      allRowsExpanded = _column$extraParams.allRowsExpanded,
-      collapseAllAriaLabel = _column$extraParams.collapseAllAriaLabel;
+  var onFavorite = column.extraParams.onFavorite;
   var extraData = {
     rowIndex: rowIndex,
     columnIndex: columnIndex,
     column: column,
     property: property
-  };
-  var rowId = rowIndex !== undefined ? rowIndex : -1;
-  var customProps = Object.assign({}, rowId !== -1 ? {
-    isOpen: rowData === null || rowData === void 0 ? void 0 : rowData.isOpen,
-    'aria-labelledby': "" + rowLabeledBy + rowId + " " + expandId + rowId
-  } : {
-    isOpen: allRowsExpanded,
-    'aria-label': collapseAllAriaLabel || 'Expand all rows'
-  });
+  }; // this is a child row which should not display the favorites icon
+
+  if (rowData && rowData.hasOwnProperty('parent') && !rowData.fullWidth) {
+    return {
+      component: 'td',
+      isVisible: true
+    };
+  }
   /**
    * @param {React.MouseEvent} event - Mouse event
    */
 
-  function onToggle(event) {
-    var open = rowData ? !rowData.isOpen : !allRowsExpanded; // tslint:disable-next-line:no-unused-expression
 
-    onCollapse && onCollapse(event, rowIndex, open, rowData, extraData);
+  function favoritesClick(event) {
+    // tslint:disable-next-line:no-unused-expression
+    onFavorite && onFavorite(event, rowData && !rowData.favorited, rowIndex, rowData, extraData);
   }
 
+  var additionalProps = rowData.favoritesProps || {};
   return {
-    className: ((rowData === null || rowData === void 0 ? void 0 : rowData.isOpen) !== undefined || rowId === -1) && css(styles$1.tableToggle),
-    isVisible: !(rowData === null || rowData === void 0 ? void 0 : rowData.fullWidth),
-    children: React__namespace.createElement(CollapseColumn, Object.assign({
-      "aria-labelledby": "" + rowLabeledBy + rowId + " " + expandId + rowId,
-      onToggle: onToggle,
-      id: expandId + rowId
-    }, customProps), value)
+    className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
+    isVisible: !rowData || !rowData.fullWidth,
+    children: React__namespace.createElement(FavoritesCell, Object.assign({
+      rowIndex: rowIndex,
+      onFavorite: favoritesClick,
+      isFavorited: rowData && rowData.favorited
+    }, additionalProps))
   };
 };
 
-var cellWidth = function cellWidth(width) {
-  return function () {
-    return {
-      className: css(styles$1.modifiers[typeof width === 'number' ? "width_" + width : "width" + capitalize(width)])
-    };
-  };
+var EllipsisHIconConfig = {
+  name: 'EllipsisHIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z',
+  yOffset: 0,
+  xOffset: 0
+};
+var EllipsisHIcon = createIcon(EllipsisHIconConfig);
+var EllipsisHIcon$1 = EllipsisHIcon;
+
+var treeRow = function treeRow(onCollapse, onCheckChange, onToggleRowDetails) {
+  return function (value, _ref) {
+    var rowIndex = _ref.rowIndex,
+        rowData = _ref.rowData;
+    var _rowData$props = rowData.props,
+        isExpanded = _rowData$props.isExpanded,
+        isDetailsExpanded = _rowData$props.isDetailsExpanded,
+        level = _rowData$props['aria-level'],
+        setsize = _rowData$props['aria-setsize'],
+        toggleAriaLabel = _rowData$props.toggleAriaLabel,
+        checkAriaLabel = _rowData$props.checkAriaLabel,
+        showDetailsAriaLabel = _rowData$props.showDetailsAriaLabel,
+        isChecked = _rowData$props.isChecked,
+        checkboxId = _rowData$props.checkboxId,
+        icon = _rowData$props.icon;
+    var content = value.title || value;
+    var text = React__namespace.createElement("div", {
+      className: css(treeViewStyles.tableTreeViewText),
+      key: "tree-view-text"
+    }, icon && React__namespace.createElement("span", {
+      className: css(treeViewStyles.tableTreeViewIcon),
+      key: "tree-view-text-icon"
+    }, icon), React__namespace.createElement("span", {
+      className: styles$1.tableText,
+      key: "table-text"
+    }, content));
+
+    var _onChange = function onChange(isChecked, event) {
+      onCheckChange(event, isChecked, rowIndex, content, rowData);
+    };
+
+    return {
+      component: 'th',
+      className: treeViewStyles.tableTreeViewTitleCell,
+      children: level !== undefined ? React__namespace.createElement("div", {
+        className: css(treeViewStyles.tableTreeViewMain)
+      }, setsize > 0 && React__namespace.createElement("span", {
+        className: css(treeViewStyles.tableToggle),
+        key: "table-toggle"
+      }, React__namespace.createElement(Button.Button, {
+        variant: "plain",
+        onClick: function onClick(event) {
+          return onCollapse && onCollapse(event, rowIndex, content, rowData);
+        },
+        className: css(isExpanded && styles$1.modifiers.expanded),
+        "aria-expanded": isExpanded,
+        "aria-label": toggleAriaLabel || (isExpanded ? 'Collapse' : 'Expand') + " row " + rowIndex
+      }, React__namespace.createElement("div", {
+        className: css(treeViewStyles.tableToggleIcon)
+      }, React__namespace.createElement(AngleDownIcon$1, {
+        "aria-hidden": "true"
+      })))), !!onCheckChange && React__namespace.createElement("span", {
+        className: css(treeViewStyles.tableCheck),
+        key: "table-check"
+      }, React__namespace.createElement("label", {
+        htmlFor: checkboxId || "checkbox_" + rowIndex
+      }, React__namespace.createElement(Checkbox.Checkbox, {
+        id: checkboxId || "checkbox_" + rowIndex,
+        "aria-label": checkAriaLabel || "Row " + rowIndex + " checkbox",
+        isChecked: isChecked,
+        onChange: function onChange(event, checked) {
+          return _onChange(checked, event);
+        }
+      }))), text, !!onToggleRowDetails && React__namespace.createElement("span", {
+        className: css(treeViewStyles.tableTreeViewDetailsToggle),
+        key: "view-details-toggle"
+      }, React__namespace.createElement(Button.Button, {
+        variant: "plain",
+        "aria-expanded": isDetailsExpanded,
+        "aria-label": showDetailsAriaLabel || 'Show row details',
+        onClick: function onClick(event) {
+          return onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData);
+        }
+      }, React__namespace.createElement("span", {
+        className: styles$1.table + "__details-toggle-icon"
+      }, React__namespace.createElement(EllipsisHIcon$1, {
+        "aria-hidden": true
+      }))))) : text
+    };
+  };
+};
+
+var TableGridBreakpoint;
+
+(function (TableGridBreakpoint) {
+  TableGridBreakpoint["none"] = "";
+  TableGridBreakpoint["grid"] = "grid";
+  TableGridBreakpoint["gridMd"] = "grid-md";
+  TableGridBreakpoint["gridLg"] = "grid-lg";
+  TableGridBreakpoint["gridXl"] = "grid-xl";
+  TableGridBreakpoint["grid2xl"] = "grid-2xl";
+})(TableGridBreakpoint || (TableGridBreakpoint = {}));
+
+var TableVariant;
+
+(function (TableVariant) {
+  TableVariant["compact"] = "compact";
+})(TableVariant || (TableVariant = {}));
+
+var TableContext = React__namespace.createContext({
+  registerSelectableRow: function registerSelectableRow() {}
+});
+
+var TableBase = function TableBase(_a) {
+  var _b, _c;
+
+  var children = _a.children,
+      className = _a.className,
+      variant = _a.variant,
+      _a$borders = _a.borders,
+      borders = _a$borders === void 0 ? true : _a$borders,
+      _a$isStickyHeader = _a.isStickyHeader,
+      isStickyHeader = _a$isStickyHeader === void 0 ? false : _a$isStickyHeader,
+      _a$gridBreakPoint = _a.gridBreakPoint,
+      gridBreakPoint = _a$gridBreakPoint === void 0 ? TableGridBreakpoint.gridMd : _a$gridBreakPoint,
+      ariaLabel = _a['aria-label'],
+      _a$role = _a.role,
+      role = _a$role === void 0 ? 'grid' : _a$role,
+      innerRef = _a.innerRef,
+      ouiaId = _a.ouiaId,
+      _a$ouiaSafe = _a.ouiaSafe,
+      ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
+      _a$isTreeTable = _a.isTreeTable,
+      isTreeTable = _a$isTreeTable === void 0 ? false : _a$isTreeTable,
+      _a$isNested = _a.isNested,
+      isNested = _a$isNested === void 0 ? false : _a$isNested,
+      _a$isStriped = _a.isStriped,
+      isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
+      _a$isExpandable = _a.isExpandable,
+      isExpandable = _a$isExpandable === void 0 ? false : _a$isExpandable,
+      _a$hasNoInset = _a.hasNoInset,
+      hasNoInset = _a$hasNoInset === void 0 ? false : _a$hasNoInset,
+      selectableRowCaptionText = _a.selectableRowCaptionText,
+      props = __rest$1(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "hasNoInset", "nestedHeaderColumnSpans", "selectableRowCaptionText"]);
+
+  var ref = React__namespace.useRef(null);
+  var tableRef = innerRef || ref;
+
+  var _React$useState = React__namespace.useState(false),
+      hasSelectableRows = _React$useState[0],
+      setHasSelectableRows = _React$useState[1];
+
+  var _React$useState2 = React__namespace.useState(),
+      tableCaption = _React$useState2[0],
+      setTableCaption = _React$useState2[1];
+
+  React__namespace.useEffect(function () {
+    document.addEventListener('keydown', handleKeys); // sets up roving tab-index to tree tables only
+
+    if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
+      var tbody = tableRef.current.querySelector('tbody');
+      tbody && reactCore.setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
+    }
+
+    return function cleanup() {
+      document.removeEventListener('keydown', handleKeys);
+    };
+  }, [tableRef, tableRef.current]);
+  React__namespace.useEffect(function () {
+    if (selectableRowCaptionText) {
+      setTableCaption(React__namespace.createElement("caption", null, selectableRowCaptionText, React__namespace.createElement("div", {
+        className: "pf-v5-screen-reader"
+      }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter.")));
+    } else {
+      setTableCaption(React__namespace.createElement("caption", {
+        className: "pf-v5-screen-reader"
+      }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter."));
+    }
+  }, [selectableRowCaptionText]);
+  var ouiaProps = reactCore.useOUIAProps('Table', ouiaId, ouiaSafe);
+  var grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
+  var breakPointPrefix = "treeView" + (gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1));
+  var treeGrid = (_c = treeViewStyles.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
+
+  var handleKeys = function handleKeys(event) {
+    if (isNested || !(tableRef && tableRef.current && tableRef.current.classList.contains(treeViewStyles.modifiers.treeView)) || // implements roving tab-index to tree tables only
+    tableRef && tableRef.current !== event.target.closest("." + styles$1.table + ":not(.pf-m-nested)")) {
+      return;
+    }
+
+    var activeElement = document.activeElement;
+    var key = event.key;
+    var rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter(function (el) {
+      return !el.classList.contains('pf-m-disabled') && !el.hidden;
+    });
+
+    if (key === 'Space' || key === 'Enter') {
+      activeElement.click();
+      event.preventDefault();
+    }
+
+    var getFocusableElement = function getFocusableElement(element) {
+      return element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
+    };
+
+    reactCore.handleArrows(event, rows, function (element) {
+      return element === activeElement.closest('tr');
+    }, getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
+  };
+
+  var registerSelectableRow = function registerSelectableRow() {
+    !hasSelectableRows && setHasSelectableRows(true);
+  };
+
+  return React__namespace.createElement(TableContext.Provider, {
+    value: {
+      registerSelectableRow: registerSelectableRow
+    }
+  }, React__namespace.createElement("table", Object.assign({
+    "aria-label": ariaLabel,
+    role: role,
+    className: css(className, styles$1.table, isTreeTable ? treeGrid : grid, styles$1.modifiers[variant], !borders && styles$1.modifiers.noBorderRows, isStickyHeader && styles$1.modifiers.stickyHeader, isTreeTable && treeViewStyles.modifiers.treeView, isStriped && styles$1.modifiers.striped, isExpandable && styles$1.modifiers.expandable, hasNoInset && treeViewStyles.modifiers.noInset, isNested && 'pf-m-nested'),
+    ref: tableRef
+  }, isTreeTable && {
+    role: 'treegrid'
+  }, ouiaProps, props), hasSelectableRows && tableCaption, children));
+};
+
+var Table = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.createElement(TableBase, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
+Table.displayName = 'Table';
+
+var TrBase = function TrBase(_a) {
+  var children = _a.children,
+      className = _a.className,
+      isExpanded = _a.isExpanded,
+      isEditable = _a.isEditable,
+      _a$isHidden = _a.isHidden,
+      isHidden = _a$isHidden === void 0 ? false : _a$isHidden,
+      _a$isClickable = _a.isClickable,
+      isClickable = _a$isClickable === void 0 ? false : _a$isClickable,
+      _a$isRowSelected = _a.isRowSelected,
+      isRowSelected = _a$isRowSelected === void 0 ? false : _a$isRowSelected,
+      _a$isStriped = _a.isStriped,
+      isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
+      _a$isBorderRow = _a.isBorderRow,
+      isBorderRow = _a$isBorderRow === void 0 ? false : _a$isBorderRow,
+      innerRef = _a.innerRef,
+      ouiaId = _a.ouiaId,
+      _a$ouiaSafe = _a.ouiaSafe,
+      ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
+      _a$resetOffset = _a.resetOffset,
+      resetOffset = _a$resetOffset === void 0 ? false : _a$resetOffset,
+      onRowClick = _a.onRowClick,
+      isSelectable = _a.isSelectable,
+      passedAriaLabel = _a['aria-label'],
+      props = __rest$1(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isClickable", "isRowSelected", "isStriped", "isBorderRow", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
+
+  var ouiaProps = helpers.useOUIAProps('TableRow', ouiaId, ouiaSafe);
+
+  var _React$useState = React__namespace.useState(''),
+      computedAriaLabel = _React$useState[0],
+      setComputedAriaLabel = _React$useState[1];
+
+  var onKeyDown = null;
+
+  if (onRowClick) {
+    onKeyDown = function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        onRowClick(e);
+        e.preventDefault();
+      }
+    };
+  }
+
+  var rowIsHidden = isHidden || isExpanded !== undefined && !isExpanded;
+
+  var _React$useContext = React__namespace.useContext(TableContext),
+      registerSelectableRow = _React$useContext.registerSelectableRow;
+
+  React__namespace.useEffect(function () {
+    if (isSelectable && !rowIsHidden) {
+      setComputedAriaLabel("" + (isRowSelected ? 'Row selected' : ''));
+      registerSelectableRow();
+    } else {
+      setComputedAriaLabel(undefined);
+    }
+  }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
+  var ariaLabel = passedAriaLabel || computedAriaLabel;
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("tr", Object.assign({
+    className: css(styles$1.tableTr, className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isClickable && styles$1.modifiers.clickable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, isBorderRow && styles$1.modifiers.borderRow, resetOffset && styles$1.modifiers.firstCellOffsetReset),
+    hidden: rowIsHidden
+  }, isClickable && {
+    tabIndex: 0
+  }, {
+    "aria-label": ariaLabel,
+    ref: innerRef
+  }, onRowClick && {
+    onClick: onRowClick,
+    onKeyDown: onKeyDown
+  }, ouiaProps, props), children));
+};
+
+var Tr = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.createElement(TrBase, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
+Tr.displayName = 'Tr';
+
+var TheadBase = function TheadBase(_a) {
+  var children = _a.children,
+      className = _a.className,
+      _a$noWrap = _a.noWrap,
+      noWrap = _a$noWrap === void 0 ? false : _a$noWrap,
+      innerRef = _a.innerRef,
+      hasNestedHeader = _a.hasNestedHeader,
+      props = __rest$1(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
+
+  return React__namespace.createElement("thead", Object.assign({
+    className: css(styles$1.tableThead, className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader),
+    ref: innerRef
+  }, props), children);
+};
+
+var Thead = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.createElement(TheadBase, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
+Thead.displayName = 'Thead';
+
+var TbodyBase = function TbodyBase(_a) {
+  var children = _a.children,
+      className = _a.className,
+      isExpanded = _a.isExpanded,
+      innerRef = _a.innerRef,
+      _a$isEvenStriped = _a.isEvenStriped,
+      isEvenStriped = _a$isEvenStriped === void 0 ? false : _a$isEvenStriped,
+      _a$isOddStriped = _a.isOddStriped,
+      isOddStriped = _a$isOddStriped === void 0 ? false : _a$isOddStriped,
+      props = __rest$1(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
+
+  return React__namespace.createElement("tbody", Object.assign({
+    role: "rowgroup",
+    className: css(styles$1.tableTbody, className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven),
+    ref: innerRef
+  }, props), children);
 };
 
-var visibilityModifiers = ['hidden', 'hiddenOnSm', 'hiddenOnMd', 'hiddenOnLg', 'hiddenOnXl', 'hiddenOn_2xl', 'visibleOnSm', 'visibleOnMd', 'visibleOnLg', 'visibleOnXl', 'visibleOn_2xl'];
-var Visibility = visibilityModifiers.filter(function (key) {
-  return styles$1.modifiers[key];
-}).reduce(function (acc, curr) {
-  var key2 = curr.replace('_2xl', '2Xl');
-  acc[key2] = styles$1.modifiers[curr];
-  return acc;
-}, {});
-var classNames = function classNames() {
-  var _arguments = arguments;
-  return function () {
-    return {
-      className: css.apply(void 0, [].slice.call(_arguments))
-    };
-  };
+var Tbody = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.createElement(TbodyBase, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
+Tbody.displayName = 'Tbody';
+
+var styles = {
+  "modifiers": {
+    "borderRight": "pf-m-border-right",
+    "borderLeft": "pf-m-border-left",
+    "right": "pf-m-right",
+    "inlineEnd": "pf-m-inline-end",
+    "left": "pf-m-left",
+    "inlineStart": "pf-m-inline-start"
+  },
+  "scrollInnerWrapper": "pf-v5-c-scroll-inner-wrapper",
+  "scrollOuterWrapper": "pf-v5-c-scroll-outer-wrapper",
+  "table": "pf-v5-c-table",
+  "tableStickyCell": "pf-v5-c-table__sticky-cell"
 };
 
 /**
@@ -1199,7 +1692,30 @@ function mergeProps() {
   }]));
 }
 
+var c_table__sticky_cell_MinWidth = {
+  "name": "--pf-v5-c-table__sticky-cell--MinWidth",
+  "value": "12.5rem",
+  "var": "var(--pf-v5-c-table__sticky-cell--MinWidth)"
+};
+var cssStickyCellMinWidth = c_table__sticky_cell_MinWidth;
+
+var c_table__sticky_cell_Left = {
+  "name": "--pf-v5-c-table__sticky-cell--Left",
+  "value": "0",
+  "var": "var(--pf-v5-c-table__sticky-cell--Left)"
+};
+var cssStickyCellLeft = c_table__sticky_cell_Left;
+
+var c_table__sticky_cell_Right = {
+  "name": "--pf-v5-c-table__sticky-cell--Right",
+  "value": "0",
+  "var": "var(--pf-v5-c-table__sticky-cell--Right)"
+};
+var cssStickyCellRight = c_table__sticky_cell_Right;
+
 var ThBase = function ThBase(_a) {
+  var _Object$assign;
+
   var children = _a.children,
       className = _a.className,
       _a$component = _a.component,
@@ -1218,6 +1734,7 @@ var ThBase = function ThBase(_a) {
       collapse = _a$expand === void 0 ? null : _a$expand,
       _a$tooltip = _a.tooltip,
       tooltip = _a$tooltip === void 0 ? '' : _a$tooltip,
+      tooltipProps = _a.tooltipProps,
       _a$onMouseEnter = _a.onMouseEnter,
       onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
       width = _a.width,
@@ -1228,417 +1745,151 @@ var ThBase = function ThBase(_a) {
       isStickyColumn = _a$isStickyColumn === void 0 ? false : _a$isStickyColumn,
       _a$hasRightBorder = _a.hasRightBorder,
       hasRightBorder = _a$hasRightBorder === void 0 ? false : _a$hasRightBorder,
+      _a$hasLeftBorder = _a.hasLeftBorder,
+      hasLeftBorder = _a$hasLeftBorder === void 0 ? false : _a$hasLeftBorder,
       _a$stickyMinWidth = _a.stickyMinWidth,
       stickyMinWidth = _a$stickyMinWidth === void 0 ? '120px' : _a$stickyMinWidth,
       stickyLeftOffset = _a.stickyLeftOffset,
+      stickyRightOffset = _a.stickyRightOffset,
       _a$isSubheader = _a.isSubheader,
       isSubheader = _a$isSubheader === void 0 ? false : _a$isSubheader,
-      props = __rest(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "expand", "tooltip", "onMouseEnter", "width", "visibility", "innerRef", "info", "isStickyColumn", "hasRightBorder", "stickyMinWidth", "stickyLeftOffset", "isSubheader"]);
+      screenReaderText = _a.screenReaderText,
+      ariaLabel = _a['aria-label'],
+      props = __rest$1(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "expand", "tooltip", "tooltipProps", "onMouseEnter", "width", "visibility", "innerRef", "info", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset", "isSubheader", "screenReaderText", 'aria-label']);
+
+  if (!children && !screenReaderText && !ariaLabel) {
+    // eslint-disable-next-line no-console
+    console.warn('Th: Table headers must have an accessible name. If the Th is intended to be visually empty, pass in screenReaderText. If the Th contains only non-text, interactive content such as a checkbox or expand toggle, pass in an aria-label.');
+  }
 
   var _React$useState = React__namespace.useState(false),
       showTooltip = _React$useState[0],
       setShowTooltip = _React$useState[1];
 
-  var onMouseEnter = function onMouseEnter(event) {
-    if (event.target.offsetWidth < event.target.scrollWidth) {
-      !showTooltip && setShowTooltip(true);
-    } else {
-      showTooltip && setShowTooltip(false);
-    }
-
-    onMouseEnterProp(event);
-  };
-
-  var sortParams = null;
-
-  if (sort) {
-    if (sort.isFavorites) {
-      sortParams = sortableFavorites({
-        onSort: sort === null || sort === void 0 ? void 0 : sort.onSort,
-        columnIndex: sort.columnIndex,
-        sortBy: sort.sortBy
-      })();
-    } else {
-      sortParams = sortable(children, {
-        columnIndex: sort.columnIndex,
-        column: {
-          extraParams: {
-            sortBy: sort.sortBy,
-            onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
-          }
-        }
-      });
-    }
-  }
-
-  var selectParams = select ? selectable(children, {
-    column: {
-      extraParams: {
-        onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
-        selectVariant: 'checkbox',
-        allRowsSelected: select.isSelected,
-        isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
-      }
-    }
-  }) : null;
-  var collapseParams = collapse ? collapsible(children, {
-    column: {
-      extraParams: {
-        onCollapse: collapse === null || collapse === void 0 ? void 0 : collapse.onToggle,
-        allRowsExpanded: !collapse.areAllExpanded,
-        collapseAllAriaLabel: ''
-      }
-    }
-  }) : null;
-  var widthParams = width ? cellWidth(width)() : null;
-  var visibilityParams = visibility ? classNames.apply(void 0, visibility.map(function (vis) {
-    return Visibility[vis];
-  }))() : null;
-  var transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children; // info can wrap other transformedChildren
-
-  var infoParams = null;
-
-  if (infoProps) {
-    infoParams = info(infoProps)(transformedChildren);
-    transformedChildren = infoParams.children;
-  }
-
-  var merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
-
-  var _merged$className = merged.className,
-      mergedClassName = _merged$className === void 0 ? '' : _merged$className,
-      _merged$component = merged.component,
-      MergedComponent = _merged$component === void 0 ? component : _merged$component,
-      mergedProps = __rest(merged, ["children", "isVisible", "className", "component"]);
-
-  var cell = React__namespace.createElement(MergedComponent, Object.assign({
-    "data-label": dataLabel,
-    onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp,
-    scope: component === 'th' && children ? scope : null,
-    ref: innerRef,
-    className: css(className, textCenter && styles$1.modifiers.center, isSubheader && styles$1.tableSubhead, isStickyColumn && styles.tableStickyColumn, hasRightBorder && styles.modifiers.borderRight, modifier && styles$1.modifiers[modifier], mergedClassName)
-  }, mergedProps, props, isStickyColumn && {
-    style: Object.assign({
-      '--pf-c-table__sticky-column--MinWidth': stickyMinWidth ? stickyMinWidth : undefined,
-      '--pf-c-table__sticky-column--Left': stickyLeftOffset ? stickyLeftOffset : undefined
-    }, props.style)
-  }), transformedChildren);
-  var canDefault = tooltip === '' ? typeof children === 'string' : true;
-  return tooltip !== null && canDefault && showTooltip ? React__namespace.createElement(Tooltip.Tooltip, {
-    content: tooltip || tooltip === '' && children,
-    isVisible: true
-  }, cell) : cell;
-};
-
-var Th = React__namespace.forwardRef(function (props, ref) {
-  return React__namespace.createElement(ThBase, Object.assign({}, props, {
-    innerRef: ref
-  }));
-});
-Th.displayName = 'Th';
-
-var ActionsColumn = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(ActionsColumn, _React$Component);
-
-  function ActionsColumn(props) {
-    var _this;
-
-    _this = _React$Component.call(this, props) || this;
-    _this.toggleRef = React__namespace.createRef();
-
-    _this.onToggle = function (isOpen) {
-      _this.setState({
-        isOpen: isOpen
-      });
-    };
-
-    _this.onClick = function (event, onClick) {
-      var _this$props = _this.props,
-          rowData = _this$props.rowData,
-          extraData = _this$props.extraData; // Only prevent default if onClick is provided.  This allows href support.
-
-      if (onClick) {
-        event.preventDefault(); // tslint:disable-next-line:no-unused-expression
-
-        onClick(event, extraData && extraData.rowIndex, rowData, extraData);
-      }
-    };
-
-    _this.state = {
-      isOpen: false
-    };
-    return _this;
-  }
-
-  var _proto = ActionsColumn.prototype;
-
-  _proto.render = function render() {
-    var _this2 = this;
-
-    var isOpen = this.state.isOpen;
-    var _this$props2 = this.props,
-        items = _this$props2.items,
-        children = _this$props2.children,
-        dropdownPosition = _this$props2.dropdownPosition,
-        dropdownDirection = _this$props2.dropdownDirection,
-        isDisabled = _this$props2.isDisabled,
-        rowData = _this$props2.rowData,
-        actionsToggle = _this$props2.actionsToggle;
-    var actionsToggleClone = actionsToggle ? actionsToggle({
-      onToggle: this.onToggle,
-      isOpen: isOpen,
-      isDisabled: isDisabled
-    }) : React__namespace.createElement(KebabToggle.KebabToggle, {
-      isDisabled: isDisabled,
-      onToggle: this.onToggle
-    });
-    return React__namespace.createElement(React__namespace.Fragment, null, items.filter(function (item) {
-      return item.isOutsideDropdown;
-    }) // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    .map(function (_a, key) {
-      var title = _a.title,
-          itemKey = _a.itemKey,
-          _onClick = _a.onClick,
-          props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
-
-      return typeof title === 'string' ? React__namespace.createElement(Button.Button, Object.assign({
-        onClick: function onClick(event) {
-          return _this2.onClick(event, _onClick);
-        }
-      }, props, {
-        isDisabled: isDisabled,
-        key: itemKey || "outside_dropdown_" + key,
-        "data-key": itemKey || "outside_dropdown_" + key
-      }), title) : React__namespace.cloneElement(title, Object.assign({
-        onClick: _onClick,
-        isDisabled: isDisabled
-      }, props));
-    }), React__namespace.createElement(Dropdown.Dropdown, Object.assign({
-      toggle: actionsToggleClone,
-      position: dropdownPosition,
-      direction: dropdownDirection,
-      isOpen: isOpen,
-      dropdownItems: items.filter(function (item) {
-        return !item.isOutsideDropdown;
-      }).map(function (_a, key) {
-        var title = _a.title,
-            itemKey = _a.itemKey,
-            _onClick2 = _a.onClick,
-            isSeparator = _a.isSeparator,
-            props = __rest(_a, ["title", "itemKey", "onClick", "isSeparator"]);
-
-        return isSeparator ? React__namespace.createElement(DropdownSeparator.DropdownSeparator, Object.assign({}, props, {
-          key: itemKey || key,
-          "data-key": itemKey || key
-        })) : React__namespace.createElement(DropdownItem.DropdownItem, Object.assign({
-          component: "button",
-          onClick: function onClick(event) {
-            _this2.onClick(event, _onClick2);
-
-            _this2.onToggle(!isOpen);
-          }
-        }, props, {
-          key: itemKey || key,
-          "data-key": itemKey || key
-        }), title);
-      }),
-      isPlain: true
-    }, rowData && rowData.actionProps)), children);
-  };
-
-  return ActionsColumn;
-}(React__namespace.Component);
-ActionsColumn.displayName = 'ActionsColumn';
-ActionsColumn.defaultProps = {
-  children: null,
-  items: [],
-  dropdownPosition: dropdownConstants.DropdownPosition.right,
-  dropdownDirection: dropdownConstants.DropdownDirection.down,
-  rowData: {},
-  extraData: {}
-};
-
-var resolveOrDefault = function resolveOrDefault(resolver, defaultValue, rowData, extraData) {
-  return typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue;
-};
-
-var cellActions = function cellActions(actions, actionResolver, areActionsDisabled) {
-  return function (label, _ref) {
-    var rowData = _ref.rowData,
-        column = _ref.column,
-        rowIndex = _ref.rowIndex,
-        columnIndex = _ref.columnIndex,
-        _ref$column$extraPara = _ref.column.extraParams,
-        dropdownPosition = _ref$column$extraPara.dropdownPosition,
-        dropdownDirection = _ref$column$extraPara.dropdownDirection,
-        actionsToggle = _ref$column$extraPara.actionsToggle,
-        property = _ref.property;
-    var extraData = {
-      rowIndex: rowIndex,
-      columnIndex: columnIndex,
-      column: column,
-      property: property
-    };
-    var resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData);
-    var resolvedIsDisabled = resolveOrDefault(areActionsDisabled, rowData && rowData.disableActions, rowData, extraData);
-    var renderProps = resolvedActions && resolvedActions.length > 0 ? {
-      children: React__namespace.createElement(ActionsColumn, {
-        items: resolvedActions,
-        dropdownPosition: dropdownPosition,
-        dropdownDirection: dropdownDirection,
-        isDisabled: resolvedIsDisabled,
-        rowData: rowData,
-        extraData: extraData,
-        actionsToggle: actionsToggle
-      }, label)
-    } : {};
-    return Object.assign({
-      className: css(styles$1.tableAction),
-      style: {
-        paddingRight: 0
-      },
-      isVisible: true
-    }, renderProps);
-  };
-};
-
-var compoundExpand = function compoundExpand(value, _ref) {
-  var rowIndex = _ref.rowIndex,
-      columnIndex = _ref.columnIndex,
-      rowData = _ref.rowData,
-      column = _ref.column,
-      property = _ref.property;
-
-  if (!value) {
-    return null;
-  }
-
-  var title = value.title,
-      props = value.props;
-  var onExpand = column.extraParams.onExpand;
-  var extraData = {
-    rowIndex: rowIndex,
-    columnIndex: columnIndex,
-    column: column,
-    property: property
-  };
-  /**
-   * @param {React.MouseEvent} event - Mouse event
-   */
-
-  function onToggle(event) {
-    // tslint:disable-next-line:no-unused-expression
-    onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
-  }
-
-  return {
-    className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
-    children: props.isOpen !== undefined && React__namespace.createElement("button", {
-      type: "button",
-      className: css(styles$1.tableButton),
-      onClick: onToggle,
-      "aria-expanded": props.isOpen,
-      "aria-controls": props.ariaControls
-    }, React__namespace.createElement(TableText, null, title))
-  };
-};
+  var _React$useState2 = React__namespace.useState(false),
+      truncated = _React$useState2[0],
+      setTruncated = _React$useState2[1];
 
-var FavoritesCell = function FavoritesCell(_a) {
-  var _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
-      onFavorite = _a.onFavorite,
-      isFavorited = _a.isFavorited,
-      rowIndex = _a.rowIndex,
-      props = __rest(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
+  var cellRef = innerRef ? innerRef : React__namespace.createRef();
 
-  var ariaProps = rowIndex === undefined ? {} : {
-    id: "favorites-button-" + rowIndex,
-    'aria-labelledby': "favorites-button-" + rowIndex
-  };
-  return React__namespace.createElement(Button.Button, Object.assign({
-    variant: "plain",
-    className: className,
-    type: "button",
-    "aria-label": isFavorited ? 'Starred' : 'Not starred',
-    onClick: onFavorite
-  }, ariaProps, props), React__namespace.createElement(StarIcon$1, {
-    "aria-hidden": true
-  }));
-};
-FavoritesCell.displayName = 'FavoritesCell';
+  var onMouseEnter = function onMouseEnter(event) {
+    if (event.target.offsetWidth < event.target.scrollWidth) {
+      !showTooltip && setShowTooltip(true);
+    } else {
+      showTooltip && setShowTooltip(false);
+    }
 
-var favoritable = function favoritable(value, _ref) {
-  var rowIndex = _ref.rowIndex,
-      columnIndex = _ref.columnIndex,
-      rowData = _ref.rowData,
-      column = _ref.column,
-      property = _ref.property;
-  var onFavorite = column.extraParams.onFavorite;
-  var extraData = {
-    rowIndex: rowIndex,
-    columnIndex: columnIndex,
-    column: column,
-    property: property
-  }; // this is a child row which should not display the favorites icon
+    onMouseEnterProp(event);
+  };
 
-  if (rowData && rowData.hasOwnProperty('parent') && !rowData.fullWidth) {
-    return {
-      component: 'td',
-      isVisible: true
-    };
+  var sortParams = null;
+
+  if (sort) {
+    if (sort.isFavorites) {
+      sortParams = sortableFavorites({
+        onSort: sort === null || sort === void 0 ? void 0 : sort.onSort,
+        columnIndex: sort.columnIndex,
+        sortBy: sort.sortBy,
+        tooltip: tooltip,
+        tooltipProps: tooltipProps
+      })();
+    } else {
+      sortParams = sortable(children, {
+        columnIndex: sort.columnIndex,
+        column: {
+          extraParams: {
+            sortBy: sort.sortBy,
+            onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
+          }
+        },
+        tooltip: tooltip,
+        tooltipProps: tooltipProps
+      });
+    }
   }
-  /**
-   * @param {React.MouseEvent} event - Mouse event
-   */
 
+  var selectParams = select ? selectable(children, {
+    rowData: {
+      selected: select.isSelected,
+      disableSelection: select === null || select === void 0 ? void 0 : select.isDisabled,
+      props: select === null || select === void 0 ? void 0 : select.props
+    },
+    column: {
+      extraParams: {
+        onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
+        selectVariant: 'checkbox',
+        allRowsSelected: select.isSelected,
+        isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
+      }
+    },
+    tooltip: tooltip,
+    tooltipProps: tooltipProps
+  }) : null;
+  var collapseParams = collapse ? collapsible(children, {
+    column: {
+      extraParams: {
+        onCollapse: collapse === null || collapse === void 0 ? void 0 : collapse.onToggle,
+        allRowsExpanded: !collapse.areAllExpanded,
+        collapseAllAriaLabel: ''
+      }
+    }
+  }) : null;
+  var widthParams = width ? cellWidth(width)() : null;
+  var visibilityParams = visibility ? classNames.apply(void 0, visibility.map(function (vis) {
+    return Visibility[vis];
+  }))() : null;
+  var transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children; // info can wrap other transformedChildren
+
+  var infoParams = null;
 
-  function favoritesClick(event) {
-    // tslint:disable-next-line:no-unused-expression
-    onFavorite && onFavorite(event, rowData && !rowData.favorited, rowIndex, rowData, extraData);
+  if (infoProps) {
+    infoParams = info(infoProps)(transformedChildren);
+    transformedChildren = infoParams.children;
   }
 
-  var additionalProps = rowData.favoritesProps || {};
-  return {
-    className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
-    isVisible: !rowData || !rowData.fullWidth,
-    children: React__namespace.createElement(FavoritesCell, Object.assign({
-      rowIndex: rowIndex,
-      onFavorite: favoritesClick,
-      isFavorited: rowData && rowData.favorited
-    }, additionalProps))
-  };
-};
+  var merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
 
-var GripVerticalIconConfig = {
-  name: 'GripVerticalIcon',
-  height: 512,
-  width: 320,
-  svgPath: 'M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z',
-  yOffset: 0,
-  xOffset: 0
-};
-var GripVerticalIcon = createIcon(GripVerticalIconConfig);
-var GripVerticalIcon$1 = GripVerticalIcon;
+  var _merged$className = merged.className,
+      mergedClassName = _merged$className === void 0 ? '' : _merged$className,
+      _merged$component = merged.component,
+      MergedComponent = _merged$component === void 0 ? component : _merged$component,
+      mergedProps = __rest$1(merged, ["children", "isVisible", "className", "component"]);
 
-var DraggableCell = function DraggableCell(_a) {
-  var className = _a.className,
-      onClick = _a.onClick,
-      ariaLabel = _a['aria-label'],
-      id = _a.id,
-      props = __rest(_a, ["className", "onClick", 'aria-label', "id"]);
+  React__namespace.useEffect(function () {
+    setTruncated(cellRef.current.offsetWidth < cellRef.current.scrollWidth);
+  }, [cellRef]);
+  var cell = React__namespace.createElement(MergedComponent, Object.assign({
+    tabIndex: sort || select || !truncated ? -1 : 0,
+    onFocus: tooltip !== null ? onMouseEnter : onMouseEnterProp,
+    onBlur: function onBlur() {
+      return setShowTooltip(false);
+    },
+    "data-label": dataLabel,
+    onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp,
+    scope: component === 'th' ? scope : null,
+    ref: cellRef,
+    "aria-label": ariaLabel,
+    className: css(styles$1.tableTh, className, textCenter && styles$1.modifiers.center, isSubheader && styles$1.tableSubhead, isStickyColumn && styles.tableStickyCell, hasRightBorder && styles.modifiers.borderRight, hasLeftBorder && styles.modifiers.borderLeft, modifier && styles$1.modifiers[modifier], mergedClassName)
+  }, mergedProps, props, isStickyColumn && {
+    style: Object.assign((_Object$assign = {}, _Object$assign[cssStickyCellMinWidth.name] = stickyMinWidth ? stickyMinWidth : undefined, _Object$assign[cssStickyCellLeft.name] = stickyLeftOffset ? stickyLeftOffset : 0, _Object$assign[cssStickyCellRight.name] = stickyRightOffset ? stickyRightOffset : 0, _Object$assign), props.style)
+  }), transformedChildren || screenReaderText && React__namespace.createElement("span", {
+    className: "pf-v5-screen-reader"
+  }, screenReaderText));
+  var canMakeDefaultTooltip = tooltip === '' ? typeof transformedChildren === 'string' : true;
+  var childControlsTooltip = sortParams || selectParams;
+  return tooltip !== null && canMakeDefaultTooltip && !childControlsTooltip && showTooltip ? React__namespace.createElement(React__namespace.Fragment, null, cell, React__namespace.createElement(Tooltip.Tooltip, Object.assign({
+    triggerRef: cellRef,
+    content: tooltip || tooltip === '' && children,
+    isVisible: true
+  }, tooltipProps))) : cell;
+};
 
-  return React__namespace.createElement(Button.Button, Object.assign({
-    id: id,
-    variant: "plain",
-    className: className,
-    type: "button",
-    "aria-label": ariaLabel || "Draggable row draggable button",
-    onClick: onClick
-  }, props), React__namespace.createElement(GripVerticalIcon$1, {
-    "aria-hidden": true
+var Th = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.createElement(ThBase, Object.assign({}, props, {
+    innerRef: ref
   }));
-};
-DraggableCell.displayName = 'DraggableCell';
+});
+Th.displayName = 'Th';
 
 var draggable = function draggable(value, _ref) {
   var rowData = _ref.rowData;
@@ -1651,98 +1902,9 @@ var draggable = function draggable(value, _ref) {
   };
 };
 
-var EllipsisHIconConfig = {
-  name: 'EllipsisHIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z',
-  yOffset: 0,
-  xOffset: 0
-};
-var EllipsisHIcon = createIcon(EllipsisHIconConfig);
-var EllipsisHIcon$1 = EllipsisHIcon;
-
-var treeRow = function treeRow(onCollapse, onCheckChange, onToggleRowDetails) {
-  return function (value, _ref) {
-    var rowIndex = _ref.rowIndex,
-        rowData = _ref.rowData;
-    var _rowData$props = rowData.props,
-        isExpanded = _rowData$props.isExpanded,
-        isDetailsExpanded = _rowData$props.isDetailsExpanded,
-        level = _rowData$props['aria-level'],
-        setsize = _rowData$props['aria-setsize'],
-        toggleAriaLabel = _rowData$props.toggleAriaLabel,
-        checkAriaLabel = _rowData$props.checkAriaLabel,
-        showDetailsAriaLabel = _rowData$props.showDetailsAriaLabel,
-        isChecked = _rowData$props.isChecked,
-        checkboxId = _rowData$props.checkboxId,
-        icon = _rowData$props.icon;
-    var content = value.title || value;
-    var text = React__namespace.createElement("div", {
-      className: css(stylesTreeView.tableTreeViewText),
-      key: "tree-view-text"
-    }, icon && React__namespace.createElement("span", {
-      className: css(stylesTreeView.tableTreeViewIcon),
-      key: "tree-view-text-icon"
-    }, icon), React__namespace.createElement("span", {
-      className: "pf-c-table__text",
-      key: "table-text"
-    }, content));
-
-    var onChange = function onChange(isChecked, event) {
-      onCheckChange(event, isChecked, rowIndex, content, rowData);
-    };
-
-    return {
-      component: 'th',
-      className: 'pf-c-table__tree-view-title-cell',
-      children: level !== undefined ? React__namespace.createElement("div", {
-        className: css(stylesTreeView.tableTreeViewMain)
-      }, setsize > 0 && React__namespace.createElement("span", {
-        className: css(stylesTreeView.tableToggle),
-        key: "table-toggle"
-      }, React__namespace.createElement(reactCore.Button, {
-        variant: "plain",
-        onClick: function onClick(event) {
-          return onCollapse && onCollapse(event, rowIndex, content, rowData);
-        },
-        className: css(isExpanded && styles$1.modifiers.expanded),
-        "aria-expanded": isExpanded,
-        "aria-label": toggleAriaLabel || (isExpanded ? 'Collapse' : 'Expand') + " row " + rowIndex
-      }, React__namespace.createElement("div", {
-        className: css(stylesTreeView.tableToggleIcon)
-      }, React__namespace.createElement(AngleDownIcon$1, {
-        "aria-hidden": "true"
-      })))), !!onCheckChange && React__namespace.createElement("span", {
-        className: css(stylesTreeView.tableCheck),
-        key: "table-check"
-      }, React__namespace.createElement("label", {
-        htmlFor: checkboxId || "checkbox_" + rowIndex
-      }, React__namespace.createElement(reactCore.Checkbox, {
-        id: checkboxId || "checkbox_" + rowIndex,
-        "aria-label": checkAriaLabel || "Row " + rowIndex + " checkbox",
-        isChecked: isChecked,
-        onChange: onChange
-      }))), text, !!onToggleRowDetails && React__namespace.createElement("span", {
-        className: css(stylesTreeView.tableTreeViewDetailsToggle),
-        key: "view-details-toggle"
-      }, React__namespace.createElement(reactCore.Button, {
-        variant: "plain",
-        "aria-expanded": isDetailsExpanded,
-        "aria-label": showDetailsAriaLabel || 'Show row details',
-        onClick: function onClick(event) {
-          return onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData);
-        }
-      }, React__namespace.createElement("span", {
-        className: "pf-c-table__details-toggle-icon"
-      }, React__namespace.createElement(EllipsisHIcon$1, {
-        "aria-hidden": true
-      }))))) : text
-    };
-  };
-};
-
 var TdBase = function TdBase(_a) {
+  var _Object$assign;
+
   var children = _a.children,
       className = _a.className,
       _a$isActionCell = _a.isActionCell,
@@ -1771,13 +1933,47 @@ var TdBase = function TdBase(_a) {
       favorites = _a$favorites === void 0 ? null : _a$favorites,
       _a$draggableRow = _a.draggableRow,
       draggableRowProp = _a$draggableRow === void 0 ? null : _a$draggableRow,
-      props = __rest(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow"]);
+      _a$tooltip = _a.tooltip,
+      tooltip = _a$tooltip === void 0 ? '' : _a$tooltip,
+      _a$onMouseEnter = _a.onMouseEnter,
+      onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
+      _a$isStickyColumn = _a.isStickyColumn,
+      isStickyColumn = _a$isStickyColumn === void 0 ? false : _a$isStickyColumn,
+      _a$hasRightBorder = _a.hasRightBorder,
+      hasRightBorder = _a$hasRightBorder === void 0 ? false : _a$hasRightBorder,
+      _a$hasLeftBorder = _a.hasLeftBorder,
+      hasLeftBorder = _a$hasLeftBorder === void 0 ? false : _a$hasLeftBorder,
+      _a$stickyMinWidth = _a.stickyMinWidth,
+      stickyMinWidth = _a$stickyMinWidth === void 0 ? '120px' : _a$stickyMinWidth,
+      stickyLeftOffset = _a.stickyLeftOffset,
+      stickyRightOffset = _a.stickyRightOffset,
+      props = __rest$1(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow", "tooltip", "onMouseEnter", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset"]);
+
+  var _React$useState = React__namespace.useState(false),
+      showTooltip = _React$useState[0],
+      setShowTooltip = _React$useState[1];
+
+  var _React$useState2 = React__namespace.useState(false),
+      truncated = _React$useState2[0],
+      setTruncated = _React$useState2[1];
+
+  var cellRef = innerRef ? innerRef : React__namespace.createRef();
+
+  var onMouseEnter = function onMouseEnter(event) {
+    if (event.target.offsetWidth < event.target.scrollWidth) {
+      !showTooltip && setShowTooltip(true);
+    } else {
+      showTooltip && setShowTooltip(false);
+    }
+
+    onMouseEnterProp(event);
+  };
 
   var selectParams = select ? selectable(children, {
     rowIndex: select.rowIndex,
     rowData: {
       selected: select.isSelected,
-      disableSelection: select === null || select === void 0 ? void 0 : select.disable,
+      disableSelection: select === null || select === void 0 ? void 0 : select.isDisabled,
       props: select === null || select === void 0 ? void 0 : select.props
     },
     column: {
@@ -1808,12 +2004,13 @@ var TdBase = function TdBase(_a) {
   var actionParams = actionParamsFunc ? actionParamsFunc(null, {
     rowIndex: actions === null || actions === void 0 ? void 0 : actions.rowIndex,
     rowData: {
-      disableActions: actions === null || actions === void 0 ? void 0 : actions.disable
+      disableActions: actions === null || actions === void 0 ? void 0 : actions.isDisabled
     },
     column: {
       extraParams: {
         dropdownPosition: actions === null || actions === void 0 ? void 0 : actions.dropdownPosition,
         dropdownDirection: actions === null || actions === void 0 ? void 0 : actions.dropdownDirection,
+        menuAppendTo: actions === null || actions === void 0 ? void 0 : actions.menuAppendTo,
         actionsToggle: actions === null || actions === void 0 ? void 0 : actions.actionsToggle
       }
     }
@@ -1826,7 +2023,8 @@ var TdBase = function TdBase(_a) {
     },
     column: {
       extraParams: {
-        onCollapse: expand === null || expand === void 0 ? void 0 : expand.onToggle
+        onCollapse: expand === null || expand === void 0 ? void 0 : expand.onToggle,
+        expandId: expand === null || expand === void 0 ? void 0 : expand.expandId
       }
     }
   }) : null;
@@ -1836,9 +2034,12 @@ var TdBase = function TdBase(_a) {
       isOpen: compoundExpandProp.isExpanded
     }
   }, {
+    rowIndex: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.rowIndex,
+    columnIndex: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.columnIndex,
     column: {
       extraParams: {
-        onExpand: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.onToggle
+        onExpand: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.onToggle,
+        expandId: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.expandId
       }
     }
   }) : null;
@@ -1862,15 +2063,33 @@ var TdBase = function TdBase(_a) {
       mergedClassName = _merged$className === void 0 ? '' : _merged$className,
       _merged$component = merged.component,
       MergedComponent = _merged$component === void 0 ? component : _merged$component,
-      mergedProps = __rest(merged, ["isVisible", "children", "className", "component"]);
+      mergedProps = __rest$1(merged, ["isVisible", "children", "className", "component"]);
 
-  var treeTableTitleCell = className && className.includes('pf-c-table__tree-view-title-cell') || mergedClassName && mergedClassName.includes('pf-c-table__tree-view-title-cell');
-  return React__namespace.createElement(MergedComponent, Object.assign({}, !treeTableTitleCell && {
+  var treeTableTitleCell = className && className.includes(treeViewStyles.tableTreeViewTitleCell) || mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell);
+  React__namespace.useEffect(function () {
+    setTruncated(cellRef.current.offsetWidth < cellRef.current.scrollWidth);
+  }, [cellRef]);
+  var cell = React__namespace.createElement(MergedComponent, Object.assign({
+    tabIndex: (select || !truncated) && modifier !== 'truncate' ? -1 : 0
+  }, !treeTableTitleCell && {
     'data-label': dataLabel
   }, {
-    className: css(className, isActionCell && styles$1.tableAction, textCenter && styles$1.modifiers.center, noPadding && styles$1.modifiers.noPadding, styles$1.modifiers[modifier], draggableParams && styles$1.tableDraggable, mergedClassName),
-    ref: innerRef
-  }, mergedProps, props), mergedChildren || children);
+    onFocus: tooltip !== null ? onMouseEnter : onMouseEnterProp,
+    onBlur: function onBlur() {
+      return setShowTooltip(false);
+    },
+    onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp,
+    className: css(styles$1.tableTd, className, isActionCell && styles$1.tableAction, textCenter && styles$1.modifiers.center, noPadding && styles$1.modifiers.noPadding, isStickyColumn && styles.tableStickyCell, hasRightBorder && styles.modifiers.borderRight, hasLeftBorder && styles.modifiers.borderLeft, styles$1.modifiers[modifier], draggableParams && styles$1.tableDraggable, mergedClassName),
+    ref: cellRef
+  }, mergedProps, props, isStickyColumn && {
+    style: Object.assign((_Object$assign = {}, _Object$assign[cssStickyCellMinWidth.name] = stickyMinWidth ? stickyMinWidth : undefined, _Object$assign[cssStickyCellLeft.name] = stickyLeftOffset ? stickyLeftOffset : 0, _Object$assign[cssStickyCellRight.name] = stickyRightOffset ? stickyRightOffset : 0, _Object$assign), props.style)
+  }), mergedChildren || children);
+  var canMakeDefaultTooltip = tooltip === '' ? typeof children === 'string' : true;
+  return tooltip !== null && canMakeDefaultTooltip && showTooltip ? React__namespace.createElement(React__namespace.Fragment, null, cell, React__namespace.createElement(Tooltip$1.Tooltip, {
+    triggerRef: cellRef,
+    content: tooltip || tooltip === '' && children,
+    isVisible: true
+  })) : cell;
 };
 
 var Td = React__namespace.forwardRef(function (props, ref) {
@@ -2064,7 +2283,7 @@ function FilterableTable(_ref) {
     headingLevel: 'h3'
   }, React__default["default"].createElement(reactCore.Spinner, {
     size: 'lg'
-  })))) : React__default["default"].createElement(React__default["default"].Fragment, null, header, React__default["default"].createElement(TableComposable, {
+  })))) : React__default["default"].createElement(React__default["default"].Fragment, null, header, React__default["default"].createElement(Table, {
     "aria-label": 'Packages Table'
   }, React__default["default"].createElement(Thead, null, React__default["default"].createElement(Tr, null, columns.map(function (col, colIdx) {
     return React__default["default"].createElement(Th, Object.assign({
@@ -2088,12 +2307,13 @@ function FilterableTable(_ref) {
     }));
   }) : React__default["default"].createElement(Tr, null, React__default["default"].createElement(Td, {
     colSpan: columns.length
-  }, React__default["default"].createElement(reactCore.EmptyState, null, React__default["default"].createElement(reactCore.EmptyStateIcon, {
-    icon: SearchIcon
-  }), React__default["default"].createElement(reactCore.Title, {
-    headingLevel: 'h5',
-    size: 'lg'
-  }, "No results found"))))))), renderPagination('bottom'));
+  }, React__default["default"].createElement(reactCore.EmptyState, null, React__default["default"].createElement(reactCore.EmptyStateHeader, {
+    titleText: 'No results found',
+    icon: React__default["default"].createElement(reactCore.EmptyStateIcon, {
+      icon: SearchIcon
+    }),
+    headingLevel: 'h5'
+  }))))))), renderPagination('bottom'));
 }
 
 var FilterInput = function FilterInput(_ref) {
@@ -2204,7 +2424,7 @@ function EcoSelect(_ref) {
       selected = _useState2[0],
       setSelected = _useState2[1];
 
-  var onToggle = function onToggle(isOpen) {
+  var _onToggle = function onToggle(isOpen) {
     return setIsOpen(isOpen);
   };
 
@@ -2219,18 +2439,20 @@ function EcoSelect(_ref) {
   var id = lodash.uniqueId('select-');
   return React__default["default"].createElement("div", {
     className: 'select'
-  }, React__default["default"].createElement(reactCore.Select, {
+  }, React__default["default"].createElement(deprecated.Select, {
     id: id,
     variant: variant,
     "aria-label": ariaLabel,
-    onToggle: onToggle,
+    onToggle: function onToggle(_event, isOpen) {
+      return _onToggle(isOpen);
+    },
     onSelect: onSelect,
     selections: selected,
     isOpen: isOpen,
     placeholderText: placeholderText,
-    className: "pf-select-wrapper"
+    className: 'pf-select-wrapper'
   }, options.map(function (option) {
-    return React__default["default"].createElement(reactCore.SelectOption, {
+    return React__default["default"].createElement(deprecated.SelectOption, {
       key: option,
       value: option
     });
@@ -2258,7 +2480,9 @@ var ToggleGroup = function ToggleGroup(props) {
       key: index,
       buttonId: option.id,
       isSelected: selected === option.id,
-      onChange: onClick
+      onChange: function onChange(event, _) {
+        return onClick(_, event);
+      }
     });
   }));
 };