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

package/dist/index.modern.js

@@ -1,19 +1,52 @@
 import * as React from 'react';
 import React__default, { useState, useEffect, useCallback, cloneElement } from 'react';
-import { setTabIndex, useOUIAProps, handleArrows, Tooltip as Tooltip$1, Button, Popover, Checkbox, Toolbar, ToolbarContent, ToolbarItem, Pagination, Bullseye, Title, Spinner, EmptyState, EmptyStateIcon, SearchInput, Select, SelectOption, ToggleGroup as ToggleGroup$1, ToggleGroupItem, Tabs, Tab } from '@patternfly/react-core';
+import { setTabIndex, useOUIAProps, handleArrows, Toolbar, ToolbarContent, ToolbarItem, Pagination, Bullseye, Title, Spinner, EmptyState, EmptyStateHeader, EmptyStateIcon, SearchInput, ToggleGroup as ToggleGroup$1, ToggleGroupItem, Tabs, Tab } from '@patternfly/react-core';
 import { sortBy, uniqueId } from 'lodash';
-import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip';
-import { Button as Button$1 } from '@patternfly/react-core/dist/esm/components/Button/Button';
+import { useOUIAProps as useOUIAProps$1 } from '@patternfly/react-core/dist/esm/helpers';
 import mergeWith from 'lodash/mergeWith';
-import { Dropdown } from '@patternfly/react-core/dist/esm/components/Dropdown';
-import { KebabToggle } from '@patternfly/react-core/dist/esm/components/Dropdown/KebabToggle';
-import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/DropdownItem';
-import { DropdownSeparator } from '@patternfly/react-core/dist/esm/components/Dropdown/DropdownSeparator';
-import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/components/Dropdown/dropdownConstants';
+import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
+import { Button } from '@patternfly/react-core/dist/esm/components/Button';
+import { Popover } from '@patternfly/react-core/dist/esm/components/Popover';
+import { Tooltip as Tooltip$1 } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip';
+import { Dropdown, DropdownList, DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown';
+import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
+import { MenuToggle } from '@patternfly/react-core/dist/esm/components/MenuToggle';
+import { Checkbox } from '@patternfly/react-core/dist/esm/components/Checkbox';
+import { Select, SelectOption } from '@patternfly/react-core/deprecated';
 import { format } from 'date-fns';
 
 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;
+};
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -39,29 +72,194 @@ function __rest(s, e) {
   return t;
 }
 
-import('./inline-edit-dea85160.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"
-  }
+let currentId = 0;
+/**
+ * Factory to create Icon class components for consumers
+ */
+
+function createIcon({
+  name,
+  xOffset = 0,
+  yOffset = 0,
+  width,
+  height,
+  svgPath
+}) {
+  var _a;
+
+  return _a = class SVGIcon extends React.Component {
+    constructor() {
+      super(...arguments);
+      this.id = `icon-title-${currentId++}`;
+    }
+
+    render() {
+      const _a = this.props,
+            {
+        title,
+        className
+      } = _a,
+            props = __rest(_a, ["title", "className"]);
+
+      const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
+      const hasTitle = Boolean(title);
+      const viewBox = [xOffset, yOffset, width, height].join(' ');
+      return React.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.createElement("title", {
+        id: this.id
+      }, title), React.createElement("path", {
+        d: svgPath
+      }));
+    }
+
+  }, _a.displayName = name, _a;
+}
+
+const 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
+};
+const EllipsisVIcon = createIcon(EllipsisVIconConfig);
+var EllipsisVIcon$1 = EllipsisVIcon;
+
+const ActionsColumnBase = _a => {
+  var {
+    items,
+    isDisabled,
+    rowData,
+    extraData,
+    actionsToggle,
+    popperProps = {
+      position: 'end',
+      direction: 'down'
+    },
+    innerRef,
+    firstActionItemRef,
+    isOnOpenChangeDisabled = false
+  } = _a,
+      props = __rest$1(_a, ["items", "isDisabled", "rowData", "extraData", "actionsToggle", "popperProps", "innerRef", "firstActionItemRef", "isOnOpenChangeDisabled"]);
+
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const 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.createElement(React.Fragment, null, items.filter(item => item.isOutsideDropdown) // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  .map((_a, key) => {
+    var {
+      title,
+      itemKey,
+      onClick,
+      isOutsideDropdown
+    } = _a,
+        props = __rest$1(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
+
+    return typeof title === 'string' ? React.createElement(Button, Object.assign({
+      onClick: event => onActionClick(event, onClick)
+    }, props, {
+      isDisabled: isDisabled,
+      key: itemKey || `outside_dropdown_${key}`,
+      "data-key": itemKey || `outside_dropdown_${key}`
+    }), title) : React.cloneElement(title, Object.assign({
+      onClick,
+      isDisabled
+    }, props));
+  }), React.createElement(Dropdown, Object.assign({
+    isOpen: isOpen,
+    onOpenChange: !isOnOpenChangeDisabled ? isOpen => setIsOpen(isOpen) : undefined,
+    toggle: toggleRef => actionsToggle ? actionsToggle({
+      onToggle,
+      isOpen,
+      isDisabled,
+      toggleRef
+    }) : React.createElement(MenuToggle, {
+      "aria-label": "Kebab toggle",
+      ref: toggleRef,
+      onClick: onToggle,
+      isExpanded: isOpen,
+      isDisabled: isDisabled,
+      variant: "plain"
+    }, React.createElement(EllipsisVIcon$1, null))
+  }, rowData && rowData.actionProps, {
+    ref: innerRef
+  }, props, {
+    popperProps: popperProps
+  }), React.createElement(DropdownList, null, items.filter(item => !item.isOutsideDropdown).map((_a, index) => {
+    var {
+      title,
+      itemKey,
+      onClick,
+      tooltipProps,
+      isSeparator,
+      shouldCloseOnClick = true
+    } = _a,
+        props = __rest$1(_a, ["title", "itemKey", "onClick", "tooltipProps", "isSeparator", "shouldCloseOnClick"]);
+
+    if (isSeparator) {
+      return React.createElement(Divider, {
+        key: itemKey || index,
+        "data-key": itemKey || index
+      });
+    }
+
+    const item = React.createElement(DropdownItem, Object.assign({
+      onClick: event => {
+        onActionClick(event, onClick);
+        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.createElement(Tooltip, Object.assign({
+        key: itemKey || index
+      }, tooltipProps), item);
+    } else {
+      return item;
+    }
+  }))));
+};
+
+const ActionsColumn = React.forwardRef((props, ref) => React.createElement(ActionsColumnBase, Object.assign({}, props, {
+  innerRef: ref
+})));
+ActionsColumn.displayName = 'ActionsColumn';
+
+const 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
 };
+const AngleDownIcon = createIcon(AngleDownIconConfig);
+var AngleDownIcon$1 = AngleDownIcon;
 
 /** Joins args into a className string
  *
@@ -93,9 +291,11 @@ function css(...args) {
   return classes.join(' ');
 }
 
-import('./table-68d022f9.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",
@@ -110,6 +310,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",
@@ -119,18 +321,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",
@@ -149,552 +351,412 @@ 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"
 };
 
-import('./table-grid-5f08beb3.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"
-};
+const CollapseColumn = _a => {
+  var {
+    className = '',
+    children = null,
+    isOpen,
+    onToggle
+  } = _a,
+      props = __rest$1(_a, ["className", "children", "isOpen", "onToggle"]);
 
-import('./table-tree-view-c9374e2e.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.createElement(React.Fragment, null, isOpen !== undefined && React.createElement(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.createElement("div", {
+    className: css(styles$1.tableToggleIcon)
+  }, React.createElement(AngleDownIcon$1, null))), children);
 };
+CollapseColumn.displayName = 'CollapseColumn';
 
-const camelize = s => s.toUpperCase().replace('-', '').replace('_', '');
+const 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
+};
+const GripVerticalIcon = createIcon(GripVerticalIconConfig);
+var GripVerticalIcon$1 = GripVerticalIcon;
 
-const toCamel = s => s.replace(/([-_][a-z])/gi, camelize);
-/**
- * @param {string} input - String to capitalize
- */
+const DraggableCell = _a => {
+  var {
+    className,
+    onClick,
+    'aria-label': ariaLabel,
+    id
+  } = _a,
+      props = __rest$1(_a, ["className", "onClick", 'aria-label', "id"]);
 
-function capitalize(input) {
-  return input[0].toUpperCase() + input.substring(1);
-}
+  return React.createElement(Button, Object.assign({
+    id: id,
+    variant: "plain",
+    className: className,
+    type: "button",
+    "aria-label": ariaLabel || `Draggable row draggable button`,
+    onClick: onClick
+  }, props), React.createElement(GripVerticalIcon$1, {
+    "aria-hidden": true
+  }));
+};
+DraggableCell.displayName = 'DraggableCell';
 
-var TableGridBreakpoint;
+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"
+  }
+};
 
-(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 = {}));
+const 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
+};
+const HelpIcon = createIcon(HelpIconConfig);
+var HelpIcon$1 = HelpIcon;
 
-var TableVariant;
+var TableTextVariant;
 
-(function (TableVariant) {
-  TableVariant["compact"] = "compact";
-})(TableVariant || (TableVariant = {}));
+(function (TableTextVariant) {
+  TableTextVariant["div"] = "div";
+  TableTextVariant["nav"] = "nav";
+})(TableTextVariant || (TableTextVariant = {}));
 
-const TableComposableContext = React.createContext({
-  registerSelectableRow: () => {}
-});
+var WrapModifier;
 
-const TableComposableBase = _a => {
-  var _b, _c;
+(function (WrapModifier) {
+  WrapModifier["wrap"] = "wrap";
+  WrapModifier["nowrap"] = "nowrap";
+  WrapModifier["truncate"] = "truncate";
+  WrapModifier["breakWord"] = "breakWord";
+  WrapModifier["fitContent"] = "fitContent";
+})(WrapModifier || (WrapModifier = {}));
 
+const TableText = _a => {
   var {
-    children,
-    className,
-    variant,
-    borders = true,
-    isStickyHeader = false,
-    gridBreakPoint = TableGridBreakpoint.gridMd,
-    'aria-label': ariaLabel,
-    role = 'grid',
-    innerRef,
-    ouiaId,
-    ouiaSafe = true,
-    isTreeTable = false,
-    isNested = false,
-    isStriped = false,
-    isExpandable = false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    nestedHeaderColumnSpans,
-    hasSelectableRowCaption,
-    selectableRowCaptionText
+    children = null,
+    className = '',
+    variant = 'span',
+    wrapModifier = null,
+    tooltip: tooltipProp = '',
+    tooltipProps = {},
+    onMouseEnter: onMouseEnterProp = () => {},
+    focused = false,
+    tooltipHasDefaultBehavior = false
   } = _a,
-      props = __rest(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "nestedHeaderColumnSpans", "hasSelectableRowCaption", "selectableRowCaptionText"]);
-
-  const tableRef = innerRef || React.useRef(null);
-  const [hasSelectableRows, setHasSelectableRows] = React.useState(false);
-  const [tableCaption, setTableCaption] = React.useState();
-  React.useEffect(() => {
-    document.addEventListener('keydown', handleKeys); // sets up roving tab-index to tree tables only
+      props = __rest$1(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter", "focused", "tooltipHasDefaultBehavior"]);
 
-    if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
-      const tbody = tableRef.current.querySelector('tbody');
-      tbody && setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
-    }
+  const Component = variant;
+  const textRef = React.createRef();
+  const [tooltip, setTooltip] = React.useState(tooltipProp);
 
-    return function cleanup() {
-      document.removeEventListener('keydown', handleKeys);
-    };
-  }, [tableRef, tableRef.current]);
-  React.useEffect(() => {
-    if (selectableRowCaptionText) {
-      setTableCaption(React.createElement("caption", null, selectableRowCaptionText, React.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.")));
+  const onMouseEnter = event => {
+    if (event.target.offsetWidth < event.target.scrollWidth) {
+      setTooltip(tooltipProp || event.target.innerText);
     } else {
-      setTableCaption(React.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."));
-    }
-  }, [selectableRowCaptionText]);
-  const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe);
-  const grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
-  const breakPointPrefix = `treeView${gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1)}`;
-  const treeGrid = (_c = stylesTreeView.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
-
-  const 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;
-    }
-
-    const activeElement = document.activeElement;
-    const key = event.key;
-    const rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter(el => !el.classList.contains('pf-m-disabled') && !el.hidden);
-
-    if (key === 'Space' || key === 'Enter') {
-      activeElement.click();
-      event.preventDefault();
+      setTooltip('');
     }
 
-    const getFocusableElement = element => element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
-
-    handleArrows(event, rows, element => element === activeElement.closest('tr'), getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
+    onMouseEnterProp(event);
   };
 
-  const registerSelectableRow = () => {
-    !hasSelectableRows && setHasSelectableRows(true);
+  const onFocus = element => {
+    if (element.offsetWidth < element.scrollWidth) {
+      setTooltip(tooltipProp || element.innerText);
+    } else {
+      setTooltip('');
+    }
   };
 
-  return React.createElement(TableComposableContext.Provider, {
-    value: {
-      registerSelectableRow
+  const text = React.createElement(Component, Object.assign({
+    ref: textRef,
+    onMouseEnter: !tooltipHasDefaultBehavior ? onMouseEnter : undefined,
+    className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText)
+  }, props), children);
+  React.useEffect(() => {
+    if (!tooltipHasDefaultBehavior) {
+      if (focused) {
+        onFocus(textRef.current);
+      } else {
+        setTooltip('');
+      }
     }
-  }, React.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));
+  }, [focused, tooltipHasDefaultBehavior]);
+  return tooltip !== '' ? React.createElement(Tooltip, Object.assign({
+    triggerRef: textRef,
+    content: tooltip
+  }, !tooltipHasDefaultBehavior && {
+    isVisible: true
+  }, tooltipProps), text) : text;
 };
+TableText.displayName = 'TableText';
 
-const TableComposable = React.forwardRef((props, ref) => React.createElement(TableComposableBase, Object.assign({}, props, {
-  innerRef: ref
-})));
-TableComposable.displayName = 'TableComposable';
+const HeaderCellInfoWrapper = ({
+  children,
+  info,
+  className,
+  variant: _variant = 'tooltip',
+  popoverProps,
+  tooltipProps,
+  ariaLabel
+}) => React.createElement("div", {
+  className: css(styles$1.tableColumnHelp, className)
+}, typeof children === 'string' ? React.createElement(TableText, null, children) : children, React.createElement("span", {
+  className: css(styles$1.tableColumnHelpAction)
+}, _variant === 'tooltip' ? React.createElement(Tooltip, Object.assign({
+  content: info
+}, tooltipProps), React.createElement(Button, {
+  variant: "plain",
+  "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
+}, React.createElement(HelpIcon$1, null))) : React.createElement(Popover, Object.assign({
+  bodyContent: info
+}, popoverProps), React.createElement(Button, {
+  variant: "plain",
+  "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
+}, React.createElement(HelpIcon$1, null)))));
+HeaderCellInfoWrapper.displayName = 'HeaderCellInfoWrapper';
 
-const TheadBase = _a => {
-  var {
-    children,
-    className,
-    noWrap = false,
-    innerRef,
-    hasNestedHeader
-  } = _a,
-      props = __rest(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
+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"
+};
 
-  return React.createElement("thead", Object.assign({
-    className: css(className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader),
-    ref: innerRef
-  }, props), children);
+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"
 };
 
-const Thead = React.forwardRef((props, ref) => React.createElement(TheadBase, Object.assign({}, props, {
-  innerRef: ref
-})));
-Thead.displayName = 'Thead';
+var RowSelectVariant;
 
-const TbodyBase = _a => {
+(function (RowSelectVariant) {
+  RowSelectVariant["radio"] = "radio";
+  RowSelectVariant["checkbox"] = "checkbox";
+})(RowSelectVariant || (RowSelectVariant = {}));
+
+const SelectColumn = _a => {
   var {
-    children,
+    children = null,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className,
-    isExpanded,
-    innerRef,
-    isEvenStriped = false,
-    isOddStriped = false
+    onSelect = null,
+    selectVariant,
+    tooltip,
+    tooltipProps
   } = _a,
-      props = __rest(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
+      props = __rest$1(_a, ["children", "className", "onSelect", "selectVariant", "tooltip", "tooltipProps"]);
 
-  return React.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);
+  const inputRef = React.createRef();
+  const content = React.createElement(React.Fragment, null, React.createElement("label", null, React.createElement("input", Object.assign({}, props, {
+    ref: inputRef,
+    type: selectVariant,
+    onChange: onSelect
+  }))), children);
+  return tooltip ? React.createElement(Tooltip, Object.assign({
+    triggerRef: inputRef,
+    content: tooltip
+  }, tooltipProps), content) : content;
 };
+SelectColumn.displayName = 'SelectColumn';
 
-const Tbody = React.forwardRef((props, ref) => React.createElement(TbodyBase, Object.assign({}, props, {
-  innerRef: ref
-})));
-Tbody.displayName = 'Tbody';
-
-const TrBase = _a => {
-  var {
-    children,
-    className,
-    isExpanded,
-    isEditable,
-    isHidden = false,
-    isHoverable = false,
-    isRowSelected = false,
-    isStriped = false,
-    innerRef,
-    ouiaId,
-    ouiaSafe = true,
-    resetOffset = false,
-    onRowClick,
-    isSelectable,
-    'aria-label': passedAriaLabel
-  } = _a,
-      props = __rest(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isHoverable", "isRowSelected", "isStriped", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
+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"
+  }
+};
 
-  const ouiaProps = useOUIAProps('TableRow', ouiaId, ouiaSafe);
-  const [computedAriaLabel, setComputedAriaLabel] = React.useState('');
-  let onKeyDown = null;
+const selectable = (label, {
+  rowIndex,
+  columnIndex,
+  rowData,
+  column,
+  property,
+  tooltip
+}) => {
+  const {
+    extraParams: {
+      onSelect,
+      selectVariant,
+      allRowsSelected,
+      isHeaderSelectDisabled
+    }
+  } = column;
+  const extraData = {
+    rowIndex,
+    columnIndex,
+    column,
+    property
+  };
 
-  if (onRowClick) {
-    onKeyDown = e => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        onRowClick(e);
-        e.preventDefault();
-      }
+  if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect && !rowData.fullWidth) {
+    return {
+      component: 'td',
+      isVisible: true
     };
   }
 
-  const rowIsHidden = isHidden || isExpanded !== undefined && !isExpanded;
-  const {
-    registerSelectableRow
-  } = React.useContext(TableComposableContext);
-  React.useEffect(() => {
-    if (isSelectable && !rowIsHidden) {
-      setComputedAriaLabel(`${isRowSelected ? 'Selected' : 'Unselected'}, selectable row.`);
-      registerSelectableRow();
-    } else {
-      setComputedAriaLabel(undefined);
-    }
-  }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
-  const ariaLabel = passedAriaLabel || computedAriaLabel;
-  return React.createElement(React.Fragment, null, isSelectable && React.createElement("output", {
-    className: "pf-screen-reader"
-  }, ariaLabel), React.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
-  }, ouiaProps, props), children));
-};
-
-const Tr = React.forwardRef((props, ref) => React.createElement(TrBase, Object.assign({}, props, {
-  innerRef: ref
-})));
-Tr.displayName = 'Tr';
-
-import('./table-scrollable-08a401e0.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 IconSize;
-
-(function (IconSize) {
-  IconSize["sm"] = "sm";
-  IconSize["md"] = "md";
-  IconSize["lg"] = "lg";
-  IconSize["xl"] = "xl";
-})(IconSize || (IconSize = {}));
-
-const getSize = size => {
-  switch (size) {
-    case IconSize.sm:
-      return '1em';
-
-    case IconSize.md:
-      return '1.5em';
-
-    case IconSize.lg:
-      return '2em';
+  const rowId = rowIndex !== undefined ? rowIndex : -1;
+  /**
+   * @param {React.FormEvent} event - React form event
+   */
 
-    case IconSize.xl:
-      return '3em';
+  function selectClick(event) {
+    const selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected; // tslint:disable-next-line:no-unused-expression
 
-    default:
-      return '1em';
+    onSelect && onSelect(event, selected, rowId, rowData, extraData);
   }
-};
-let currentId = 0;
-/**
- * Factory to create Icon class components for consumers
- */
-
-function createIcon({
-  name,
-  xOffset = 0,
-  yOffset = 0,
-  width,
-  height,
-  svgPath
-}) {
-  var _a;
-
-  return _a = class SVGIcon extends React.Component {
-    constructor() {
-      super(...arguments);
-      this.id = `icon-title-${currentId++}`;
-    }
-
-    render() {
-      const _a = this.props,
-            {
-        size,
-        color,
-        title,
-        noVerticalAlign
-      } = _a,
-            props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
-
-      const hasTitle = Boolean(title);
-      const heightWidth = getSize(size);
-      const baseAlign = -0.125 * Number.parseFloat(heightWidth);
-      const style = noVerticalAlign ? null : {
-        verticalAlign: `${baseAlign}em`
-      };
-      const viewBox = [xOffset, yOffset, width, height].join(' ');
-      return React.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.createElement("title", {
-        id: this.id
-      }, title), React.createElement("path", {
-        d: svgPath
-      }));
-    }
-
-  }, _a.displayName = name, _a.defaultProps = {
-    color: 'currentColor',
-    size: IconSize.sm,
-    noVerticalAlign: false
-  }, _a;
-}
-
-const 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
-};
-const HelpIcon = createIcon(HelpIconConfig);
-var HelpIcon$1 = HelpIcon;
-
-var TableTextVariant;
-
-(function (TableTextVariant) {
-  TableTextVariant["div"] = "div";
-  TableTextVariant["nav"] = "nav";
-})(TableTextVariant || (TableTextVariant = {}));
-
-var WrapModifier;
-
-(function (WrapModifier) {
-  WrapModifier["wrap"] = "wrap";
-  WrapModifier["nowrap"] = "nowrap";
-  WrapModifier["truncate"] = "truncate";
-  WrapModifier["breakWord"] = "breakWord";
-  WrapModifier["fitContent"] = "fitContent";
-})(WrapModifier || (WrapModifier = {}));
-
-const TableText = _a => {
-  var {
-    children = null,
-    className = '',
-    variant = 'span',
-    wrapModifier = null,
-    tooltip: tooltipProp = '',
-    tooltipProps = {},
-    onMouseEnter: onMouseEnterProp = () => {}
-  } = _a,
-      props = __rest(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter"]);
 
-  const Component = variant;
-  const [tooltip, setTooltip] = React.useState('');
+  const 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
+  });
+  let selectName = 'check-all';
 
-  const onMouseEnter = event => {
-    if (event.target.offsetWidth < event.target.scrollWidth) {
-      setTooltip(tooltipProp || event.target.innerText);
-    } else {
-      setTooltip('');
-    }
+  if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
+    selectName = `checkrow${rowIndex}`;
+  } else if (rowId !== -1) {
+    selectName = 'radioGroup';
+  }
 
-    onMouseEnterProp(event);
+  return {
+    className: css(styles$1.tableCheck),
+    component: rowId !== -1 ? 'td' : 'th',
+    isVisible: !rowData || !rowData.fullWidth,
+    children: React.createElement(SelectColumn, Object.assign({}, customProps, {
+      selectVariant: selectVariant,
+      onSelect: selectClick,
+      name: selectName,
+      tooltip: tooltip
+    }), label)
   };
-
-  const text = React.createElement(Component, Object.assign({
-    onMouseEnter: onMouseEnter,
-    className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText)
-  }, props), children);
-  return tooltip !== '' ? React.createElement(Tooltip, Object.assign({
-    content: tooltip,
-    isVisible: true
-  }, tooltipProps), text) : text;
-};
-TableText.displayName = 'TableText';
-
-const HeaderCellInfoWrapper = ({
-  children,
-  info,
-  className,
-  variant: _variant = 'tooltip',
-  popoverProps,
-  tooltipProps,
-  ariaLabel
-}) => React.createElement("div", {
-  className: css(styles$1.tableColumnHelp, className)
-}, typeof children === 'string' ? React.createElement(TableText, null, children) : children, React.createElement("span", {
-  className: css(styles$1.tableColumnHelpAction)
-}, _variant === 'tooltip' ? React.createElement(Tooltip$1, Object.assign({
-  content: info
-}, tooltipProps), React.createElement(Button, {
-  variant: "plain",
-  "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
-}, React.createElement(HelpIcon$1, {
-  noVerticalAlign: true
-}))) : React.createElement(Popover, Object.assign({
-  bodyContent: info
-}, popoverProps), React.createElement(Button, {
-  variant: "plain",
-  "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
-}, React.createElement(HelpIcon$1, {
-  noVerticalAlign: true
-})))));
-HeaderCellInfoWrapper.displayName = 'HeaderCellInfoWrapper';
-
-const info = ({
-  tooltip,
-  tooltipProps,
-  popover,
-  popoverProps,
-  className,
-  ariaLabel
-}) => {
-  const infoObj = value => ({
-    className: styles$1.modifiers.help,
-    children: tooltip ? React.createElement(HeaderCellInfoWrapper, {
-      variant: "tooltip",
-      info: tooltip,
-      tooltipProps: tooltipProps,
-      ariaLabel: ariaLabel,
-      className: className
-    }, value) : React.createElement(HeaderCellInfoWrapper, {
-      variant: "popover",
-      info: popover,
-      popoverProps: popoverProps,
-      ariaLabel: ariaLabel,
-      className: className
-    }, value)
-  });
-
-  return infoObj;
 };
 
 const LongArrowAltUpIconConfig = {
@@ -744,11 +806,15 @@ const SortColumn = _a => {
     isSortedBy = false,
     onSort = null,
     sortDirection = '',
-    type = 'button'
+    type = 'button',
+    tooltip,
+    tooltipProps,
+    tooltipHasDefaultBehavior
   } = _a,
-      props = __rest(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type"]);
+      props = __rest$1(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type", "tooltip", "tooltipProps", "tooltipHasDefaultBehavior"]);
 
   let SortedByIcon;
+  const [focused, setFocused] = React.useState(false);
 
   if (isSortedBy) {
     SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon$1 : LongArrowAltDownIcon$1;
@@ -759,10 +825,17 @@ const SortColumn = _a => {
   return React.createElement("button", Object.assign({}, props, {
     type: type,
     className: css(className, styles$1.tableButton),
-    onClick: event => onSort && onSort(event)
+    onClick: event => onSort && onSort(event),
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false)
   }), React.createElement("div", {
     className: css(className, styles$1.tableButtonContent)
-  }, React.createElement(TableText, null, children), React.createElement("span", {
+  }, React.createElement(TableText, {
+    tooltip: tooltip,
+    tooltipProps: tooltipProps,
+    tooltipHasDefaultBehavior: tooltipHasDefaultBehavior,
+    focused: focused
+  }, children), React.createElement("span", {
     className: css(styles$1.tableSortIndicator)
   }, React.createElement(SortedByIcon, null))));
 };
@@ -790,14 +863,20 @@ const sortableFavorites = sort => () => sortable(React.createElement(StarIcon$1,
       sortBy: sort.sortBy,
       onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
     }
-  }
+  },
+  tooltip: sort.tooltip,
+  tooltipProps: sort.tooltipProps,
+  tooltipHasDefaultBehavior: true
 });
 const sortable = (label, {
   columnIndex,
   column,
   property,
   className,
-  ariaLabel
+  ariaLabel,
+  tooltip,
+  tooltipProps,
+  tooltipHasDefaultBehavior
 }) => {
   const {
     extraParams: {
@@ -835,152 +914,70 @@ const sortable = (label, {
       isSortedBy: isSortedBy,
       sortDirection: isSortedBy ? sortBy.direction : '',
       onSort: sortClicked,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      tooltip: tooltip,
+      tooltipProps: tooltipProps,
+      tooltipHasDefaultBehavior: tooltipHasDefaultBehavior
     }, label)
   };
 };
 
-var RowSelectVariant;
-
-(function (RowSelectVariant) {
-  RowSelectVariant["radio"] = "radio";
-  RowSelectVariant["checkbox"] = "checkbox";
-})(RowSelectVariant || (RowSelectVariant = {}));
-
-const SelectColumn = _a => {
-  var {
-    children = null,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    className,
-    onSelect = null,
-    selectVariant
-  } = _a,
-      props = __rest(_a, ["children", "className", "onSelect", "selectVariant"]);
-
-  return React.createElement(React.Fragment, null, React.createElement("label", null, React.createElement("input", Object.assign({}, props, {
-    type: selectVariant,
-    onChange: onSelect
-  }))), children);
-};
-SelectColumn.displayName = 'SelectColumn';
-
-import('./check-8277bc89.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"
-  }
-};
+const resolveOrDefault = (resolver, defaultValue, rowData, extraData) => typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue;
 
-const selectable = (label, {
-  rowIndex,
-  columnIndex,
+const cellActions = (actions, actionResolver, areActionsDisabled) => (label, {
   rowData,
   column,
-  property
-}) => {
-  const {
+  rowIndex,
+  columnIndex,
+  column: {
     extraParams: {
-      onSelect,
-      selectVariant,
-      allRowsSelected,
-      isHeaderSelectDisabled
+      actionsToggle,
+      actionsPopperProps
     }
-  } = column;
+  },
+  property
+}) => {
   const extraData = {
     rowIndex,
     columnIndex,
     column,
     property
   };
-
-  if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect && !rowData.fullWidth) {
-    return {
-      component: 'td',
-      isVisible: true
-    };
-  }
-
-  const rowId = rowIndex !== undefined ? rowIndex : -1;
-  /**
-   * @param {React.FormEvent} event - React form event
-   */
-
-  function selectClick(event) {
-    const selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected; // tslint:disable-next-line:no-unused-expression
-
-    onSelect && onSelect(event, selected, rowId, rowData, extraData);
-  }
-
-  const 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
-  });
-  let selectName = 'check-all';
-
-  if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
-    selectName = `checkrow${rowIndex}`;
-  } else if (rowId !== -1) {
-    selectName = 'radioGroup';
-  }
-
-  return {
-    className: css(styles$1.tableCheck),
-    component: 'td',
-    isVisible: !rowData || !rowData.fullWidth,
-    children: React.createElement(SelectColumn, Object.assign({}, customProps, {
-      selectVariant: selectVariant,
-      onSelect: selectClick,
-      name: selectName
-    }), label)
-  };
+  const resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData);
+  const resolvedIsDisabled = resolveOrDefault(areActionsDisabled, rowData && rowData.disableActions, rowData, extraData);
+  const renderProps = resolvedActions && resolvedActions.length > 0 ? {
+    children: React.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);
 };
 
-const 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
-};
-const AngleDownIcon = createIcon(AngleDownIconConfig);
-var AngleDownIcon$1 = AngleDownIcon;
+const camelize = s => s.toUpperCase().replace('-', '').replace('_', '');
 
-const CollapseColumn = _a => {
-  var {
-    className = '',
-    children = null,
-    isOpen,
-    onToggle
-  } = _a,
-      props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
+const toCamel = s => s.replace(/([-_][a-z])/gi, camelize);
+/**
+ * @param {string} input - String to capitalize
+ */
 
-  return React.createElement(React.Fragment, null, isOpen !== undefined && React.createElement(Button$1, 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.createElement("div", {
-    className: css(styles$1.tableToggleIcon)
-  }, React.createElement(AngleDownIcon$1, null))), children);
-};
-CollapseColumn.displayName = 'CollapseColumn';
+function capitalize(input) {
+  return input[0].toUpperCase() + input.substring(1);
+}
+
+const cellWidth = width => () => ({
+  className: css(styles$1.modifiers[typeof width === 'number' ? `width_${width}` : `width${capitalize(width)}`])
+});
 
 const collapsible = (value, {
   rowIndex,
@@ -1033,19 +1030,498 @@ const collapsible = (value, {
   };
 };
 
-const cellWidth = width => () => ({
-  className: css(styles$1.modifiers[typeof width === 'number' ? `width_${width}` : `width${capitalize(width)}`])
-});
+const compoundExpand = (value, {
+  rowIndex,
+  columnIndex,
+  rowData,
+  column,
+  property
+}) => {
+  if (!value) {
+    return null;
+  }
+
+  const {
+    title,
+    props
+  } = value;
+  const {
+    extraParams: {
+      onExpand,
+      expandId = 'expand-toggle'
+    }
+  } = column;
+  const extraData = {
+    rowIndex,
+    columnIndex,
+    column,
+    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.createElement("button", {
+      type: "button",
+      className: css(styles$1.tableButton),
+      onClick: onToggle,
+      "aria-expanded": props.isOpen,
+      "aria-controls": props.ariaControls,
+      id: `${expandId}-${rowIndex}-${columnIndex}`
+    }, React.createElement(TableText, null, title))
+  };
+};
+
+const visibilityModifiers = ['hidden', 'hiddenOnSm', 'hiddenOnMd', 'hiddenOnLg', 'hiddenOnXl', 'hiddenOn_2xl', 'visibleOnSm', 'visibleOnMd', 'visibleOnLg', 'visibleOnXl', 'visibleOn_2xl'];
+const Visibility = visibilityModifiers.filter(key => styles$1.modifiers[key]).reduce((acc, curr) => {
+  const key2 = curr.replace('_2xl', '2Xl');
+  acc[key2] = styles$1.modifiers[curr];
+  return acc;
+}, {});
+const classNames = (...classes) => () => ({
+  className: css(...classes)
+});
+
+const info = ({
+  tooltip,
+  tooltipProps,
+  popover,
+  popoverProps,
+  className,
+  ariaLabel
+}) => {
+  const infoObj = value => ({
+    className: styles$1.modifiers.help,
+    children: tooltip ? React.createElement(HeaderCellInfoWrapper, {
+      variant: "tooltip",
+      info: tooltip,
+      tooltipProps: tooltipProps,
+      ariaLabel: ariaLabel,
+      className: className
+    }, value) : React.createElement(HeaderCellInfoWrapper, {
+      variant: "popover",
+      info: popover,
+      popoverProps: popoverProps,
+      ariaLabel: ariaLabel,
+      className: className
+    }, value)
+  });
+
+  return infoObj;
+};
+
+const FavoritesCell = _a => {
+  var {
+    className = '',
+    onFavorite,
+    isFavorited,
+    rowIndex
+  } = _a,
+      props = __rest$1(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
+
+  const ariaProps = rowIndex === undefined ? {} : {
+    id: `favorites-button-${rowIndex}`,
+    'aria-labelledby': `favorites-button-${rowIndex}`
+  };
+  return React.createElement(Button, Object.assign({
+    variant: "plain",
+    className: className,
+    type: "button",
+    "aria-label": isFavorited ? 'Starred' : 'Not starred',
+    onClick: onFavorite
+  }, ariaProps, props), React.createElement(StarIcon$1, {
+    "aria-hidden": true
+  }));
+};
+FavoritesCell.displayName = 'FavoritesCell';
+
+const favoritable = (value, {
+  rowIndex,
+  columnIndex,
+  rowData,
+  column,
+  property
+}) => {
+  const {
+    extraParams: {
+      onFavorite
+    }
+  } = column;
+  const extraData = {
+    rowIndex,
+    columnIndex,
+    column,
+    property
+  }; // 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 favoritesClick(event) {
+    // tslint:disable-next-line:no-unused-expression
+    onFavorite && onFavorite(event, rowData && !rowData.favorited, rowIndex, rowData, extraData);
+  }
+
+  const additionalProps = rowData.favoritesProps || {};
+  return {
+    className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
+    isVisible: !rowData || !rowData.fullWidth,
+    children: React.createElement(FavoritesCell, Object.assign({
+      rowIndex: rowIndex,
+      onFavorite: favoritesClick,
+      isFavorited: rowData && rowData.favorited
+    }, additionalProps))
+  };
+};
+
+const 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
+};
+const EllipsisHIcon = createIcon(EllipsisHIconConfig);
+var EllipsisHIcon$1 = EllipsisHIcon;
+
+const treeRow = (onCollapse, onCheckChange, onToggleRowDetails) => (value, {
+  rowIndex,
+  rowData
+}) => {
+  const {
+    isExpanded,
+    isDetailsExpanded,
+    'aria-level': level,
+    'aria-setsize': setsize,
+    toggleAriaLabel,
+    checkAriaLabel,
+    showDetailsAriaLabel,
+    isChecked,
+    checkboxId,
+    icon
+  } = rowData.props;
+  const content = value.title || value;
+  const text = React.createElement("div", {
+    className: css(treeViewStyles.tableTreeViewText),
+    key: "tree-view-text"
+  }, icon && React.createElement("span", {
+    className: css(treeViewStyles.tableTreeViewIcon),
+    key: "tree-view-text-icon"
+  }, icon), React.createElement("span", {
+    className: styles$1.tableText,
+    key: "table-text"
+  }, content));
+
+  const onChange = (isChecked, event) => {
+    onCheckChange(event, isChecked, rowIndex, content, rowData);
+  };
+
+  return {
+    component: 'th',
+    className: treeViewStyles.tableTreeViewTitleCell,
+    children: level !== undefined ? React.createElement("div", {
+      className: css(treeViewStyles.tableTreeViewMain)
+    }, setsize > 0 && React.createElement("span", {
+      className: css(treeViewStyles.tableToggle),
+      key: "table-toggle"
+    }, React.createElement(Button, {
+      variant: "plain",
+      onClick: event => 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.createElement("div", {
+      className: css(treeViewStyles.tableToggleIcon)
+    }, React.createElement(AngleDownIcon$1, {
+      "aria-hidden": "true"
+    })))), !!onCheckChange && React.createElement("span", {
+      className: css(treeViewStyles.tableCheck),
+      key: "table-check"
+    }, React.createElement("label", {
+      htmlFor: checkboxId || `checkbox_${rowIndex}`
+    }, React.createElement(Checkbox, {
+      id: checkboxId || `checkbox_${rowIndex}`,
+      "aria-label": checkAriaLabel || `Row ${rowIndex} checkbox`,
+      isChecked: isChecked,
+      onChange: (event, checked) => onChange(checked, event)
+    }))), text, !!onToggleRowDetails && React.createElement("span", {
+      className: css(treeViewStyles.tableTreeViewDetailsToggle),
+      key: "view-details-toggle"
+    }, React.createElement(Button, {
+      variant: "plain",
+      "aria-expanded": isDetailsExpanded,
+      "aria-label": showDetailsAriaLabel || 'Show row details',
+      onClick: event => onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData)
+    }, React.createElement("span", {
+      className: `${styles$1.table}__details-toggle-icon`
+    }, React.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 = {}));
+
+const TableContext = React.createContext({
+  registerSelectableRow: () => {}
+});
+
+const TableBase = _a => {
+  var _b, _c;
+
+  var {
+    children,
+    className,
+    variant,
+    borders = true,
+    isStickyHeader = false,
+    gridBreakPoint = TableGridBreakpoint.gridMd,
+    'aria-label': ariaLabel,
+    role = 'grid',
+    innerRef,
+    ouiaId,
+    ouiaSafe = true,
+    isTreeTable = false,
+    isNested = false,
+    isStriped = false,
+    isExpandable = false,
+    hasNoInset = false,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    nestedHeaderColumnSpans,
+    selectableRowCaptionText
+  } = _a,
+      props = __rest$1(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "hasNoInset", "nestedHeaderColumnSpans", "selectableRowCaptionText"]);
+
+  const ref = React.useRef(null);
+  const tableRef = innerRef || ref;
+  const [hasSelectableRows, setHasSelectableRows] = React.useState(false);
+  const [tableCaption, setTableCaption] = React.useState();
+  React.useEffect(() => {
+    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')) {
+      const tbody = tableRef.current.querySelector('tbody');
+      tbody && setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
+    }
+
+    return function cleanup() {
+      document.removeEventListener('keydown', handleKeys);
+    };
+  }, [tableRef, tableRef.current]);
+  React.useEffect(() => {
+    if (selectableRowCaptionText) {
+      setTableCaption(React.createElement("caption", null, selectableRowCaptionText, React.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.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]);
+  const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe);
+  const grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
+  const breakPointPrefix = `treeView${gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1)}`;
+  const treeGrid = (_c = treeViewStyles.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
+
+  const 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;
+    }
+
+    const activeElement = document.activeElement;
+    const key = event.key;
+    const rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter(el => !el.classList.contains('pf-m-disabled') && !el.hidden);
+
+    if (key === 'Space' || key === 'Enter') {
+      activeElement.click();
+      event.preventDefault();
+    }
+
+    const getFocusableElement = element => element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
+
+    handleArrows(event, rows, element => element === activeElement.closest('tr'), getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
+  };
+
+  const registerSelectableRow = () => {
+    !hasSelectableRows && setHasSelectableRows(true);
+  };
+
+  return React.createElement(TableContext.Provider, {
+    value: {
+      registerSelectableRow
+    }
+  }, React.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));
+};
+
+const Table = React.forwardRef((props, ref) => React.createElement(TableBase, Object.assign({}, props, {
+  innerRef: ref
+})));
+Table.displayName = 'Table';
+
+const TrBase = _a => {
+  var {
+    children,
+    className,
+    isExpanded,
+    isEditable,
+    isHidden = false,
+    isClickable = false,
+    isRowSelected = false,
+    isStriped = false,
+    isBorderRow = false,
+    innerRef,
+    ouiaId,
+    ouiaSafe = true,
+    resetOffset = false,
+    onRowClick,
+    isSelectable,
+    'aria-label': passedAriaLabel
+  } = _a,
+      props = __rest$1(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isClickable", "isRowSelected", "isStriped", "isBorderRow", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
+
+  const ouiaProps = useOUIAProps$1('TableRow', ouiaId, ouiaSafe);
+  const [computedAriaLabel, setComputedAriaLabel] = React.useState('');
+  let onKeyDown = null;
+
+  if (onRowClick) {
+    onKeyDown = e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        onRowClick(e);
+        e.preventDefault();
+      }
+    };
+  }
+
+  const rowIsHidden = isHidden || isExpanded !== undefined && !isExpanded;
+  const {
+    registerSelectableRow
+  } = React.useContext(TableContext);
+  React.useEffect(() => {
+    if (isSelectable && !rowIsHidden) {
+      setComputedAriaLabel(`${isRowSelected ? 'Row selected' : ''}`);
+      registerSelectableRow();
+    } else {
+      setComputedAriaLabel(undefined);
+    }
+  }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
+  const ariaLabel = passedAriaLabel || computedAriaLabel;
+  return React.createElement(React.Fragment, null, React.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
+  }, ouiaProps, props), children));
+};
+
+const Tr = React.forwardRef((props, ref) => React.createElement(TrBase, Object.assign({}, props, {
+  innerRef: ref
+})));
+Tr.displayName = 'Tr';
+
+const TheadBase = _a => {
+  var {
+    children,
+    className,
+    noWrap = false,
+    innerRef,
+    hasNestedHeader
+  } = _a,
+      props = __rest$1(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
+
+  return React.createElement("thead", Object.assign({
+    className: css(styles$1.tableThead, className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader),
+    ref: innerRef
+  }, props), children);
+};
+
+const Thead = React.forwardRef((props, ref) => React.createElement(TheadBase, Object.assign({}, props, {
+  innerRef: ref
+})));
+Thead.displayName = 'Thead';
+
+const TbodyBase = _a => {
+  var {
+    children,
+    className,
+    isExpanded,
+    innerRef,
+    isEvenStriped = false,
+    isOddStriped = false
+  } = _a,
+      props = __rest$1(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
+
+  return React.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);
+};
+
+const Tbody = React.forwardRef((props, ref) => React.createElement(TbodyBase, Object.assign({}, props, {
+  innerRef: ref
+})));
+Tbody.displayName = 'Tbody';
 
-const visibilityModifiers = ['hidden', 'hiddenOnSm', 'hiddenOnMd', 'hiddenOnLg', 'hiddenOnXl', 'hiddenOn_2xl', 'visibleOnSm', 'visibleOnMd', 'visibleOnLg', 'visibleOnXl', 'visibleOn_2xl'];
-const Visibility = visibilityModifiers.filter(key => styles$1.modifiers[key]).reduce((acc, curr) => {
-  const key2 = curr.replace('_2xl', '2Xl');
-  acc[key2] = styles$1.modifiers[curr];
-  return acc;
-}, {});
-const classNames = (...classes) => () => ({
-  className: css(...classes)
-});
+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"
+};
 
 /**
  * merge-props.js
@@ -1090,6 +1566,27 @@ function mergeProps(...props) {
   });
 }
 
+const 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;
+
+const 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;
+
+const 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;
+
 const ThBase = _a => {
   var {
     children,
@@ -1103,6 +1600,7 @@ const ThBase = _a => {
     select = null,
     expand: collapse = null,
     tooltip = '',
+    tooltipProps,
     onMouseEnter: onMouseEnterProp = () => {},
     width,
     visibility,
@@ -1110,422 +1608,147 @@ const ThBase = _a => {
     info: infoProps,
     isStickyColumn = false,
     hasRightBorder = false,
+    hasLeftBorder = false,
     stickyMinWidth = '120px',
     stickyLeftOffset,
-    isSubheader = false
+    stickyRightOffset,
+    isSubheader = false,
+    screenReaderText,
+    'aria-label': ariaLabel
   } = _a,
-      props = __rest(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "expand", "tooltip", "onMouseEnter", "width", "visibility", "innerRef", "info", "isStickyColumn", "hasRightBorder", "stickyMinWidth", "stickyLeftOffset", "isSubheader"]);
-
-  const [showTooltip, setShowTooltip] = React.useState(false);
-
-  const onMouseEnter = event => {
-    if (event.target.offsetWidth < event.target.scrollWidth) {
-      !showTooltip && setShowTooltip(true);
-    } else {
-      showTooltip && setShowTooltip(false);
-    }
-
-    onMouseEnterProp(event);
-  };
-
-  let 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
-          }
-        }
-      });
-    }
-  }
-
-  const 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;
-  const collapseParams = collapse ? collapsible(children, {
-    column: {
-      extraParams: {
-        onCollapse: collapse === null || collapse === void 0 ? void 0 : collapse.onToggle,
-        allRowsExpanded: !collapse.areAllExpanded,
-        collapseAllAriaLabel: ''
-      }
-    }
-  }) : null;
-  const widthParams = width ? cellWidth(width)() : null;
-  const visibilityParams = visibility ? classNames(...visibility.map(vis => Visibility[vis]))() : null;
-  let 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
-
-  let infoParams = null;
-
-  if (infoProps) {
-    infoParams = info(infoProps)(transformedChildren);
-    transformedChildren = infoParams.children;
-  }
-
-  const merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
-
-  const {
-    // ignore the merged children since we transform them ourselves so we can wrap it with info
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    children: mergedChildren = null,
-    // selectable adds this but we don't want it
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isVisible = null,
-    className: mergedClassName = '',
-    component: MergedComponent = component
-  } = merged,
-        mergedProps = __rest(merged, ["children", "isVisible", "className", "component"]);
-
-  const cell = React.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);
-  const canDefault = tooltip === '' ? typeof children === 'string' : true;
-  return tooltip !== null && canDefault && showTooltip ? React.createElement(Tooltip, {
-    content: tooltip || tooltip === '' && children,
-    isVisible: true
-  }, cell) : cell;
-};
-
-const Th = React.forwardRef((props, ref) => React.createElement(ThBase, Object.assign({}, props, {
-  innerRef: ref
-})));
-Th.displayName = 'Th';
-
-class ActionsColumn extends React.Component {
-  constructor(props) {
-    super(props);
-    this.toggleRef = React.createRef();
-
-    this.onToggle = isOpen => {
-      this.setState({
-        isOpen
-      });
-    };
-
-    this.onClick = (event, onClick) => {
-      const {
-        rowData,
-        extraData
-      } = this.props; // 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
-    };
-  }
-
-  render() {
-    const {
-      isOpen
-    } = this.state;
-    const {
-      items,
-      children,
-      dropdownPosition,
-      dropdownDirection,
-      isDisabled,
-      rowData,
-      actionsToggle
-    } = this.props;
-    const actionsToggleClone = actionsToggle ? actionsToggle({
-      onToggle: this.onToggle,
-      isOpen,
-      isDisabled
-    }) : React.createElement(KebabToggle, {
-      isDisabled: isDisabled,
-      onToggle: this.onToggle
-    });
-    return React.createElement(React.Fragment, null, items.filter(item => item.isOutsideDropdown) // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    .map((_a, key) => {
-      var {
-        title,
-        itemKey,
-        onClick,
-        isOutsideDropdown
-      } = _a,
-          props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
-
-      return typeof title === 'string' ? React.createElement(Button$1, Object.assign({
-        onClick: event => this.onClick(event, onClick)
-      }, props, {
-        isDisabled: isDisabled,
-        key: itemKey || `outside_dropdown_${key}`,
-        "data-key": itemKey || `outside_dropdown_${key}`
-      }), title) : React.cloneElement(title, Object.assign({
-        onClick,
-        isDisabled
-      }, props));
-    }), React.createElement(Dropdown, Object.assign({
-      toggle: actionsToggleClone,
-      position: dropdownPosition,
-      direction: dropdownDirection,
-      isOpen: isOpen,
-      dropdownItems: items.filter(item => !item.isOutsideDropdown).map((_a, key) => {
-        var {
-          title,
-          itemKey,
-          onClick,
-          isSeparator
-        } = _a,
-            props = __rest(_a, ["title", "itemKey", "onClick", "isSeparator"]);
-
-        return isSeparator ? React.createElement(DropdownSeparator, Object.assign({}, props, {
-          key: itemKey || key,
-          "data-key": itemKey || key
-        })) : React.createElement(DropdownItem, Object.assign({
-          component: "button",
-          onClick: event => {
-            this.onClick(event, onClick);
-            this.onToggle(!isOpen);
-          }
-        }, props, {
-          key: itemKey || key,
-          "data-key": itemKey || key
-        }), title);
-      }),
-      isPlain: true
-    }, rowData && rowData.actionProps)), children);
-  }
-
-}
-ActionsColumn.displayName = 'ActionsColumn';
-ActionsColumn.defaultProps = {
-  children: null,
-  items: [],
-  dropdownPosition: DropdownPosition.right,
-  dropdownDirection: DropdownDirection.down,
-  rowData: {},
-  extraData: {}
-};
-
-const resolveOrDefault = (resolver, defaultValue, rowData, extraData) => typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue;
-
-const cellActions = (actions, actionResolver, areActionsDisabled) => (label, {
-  rowData,
-  column,
-  rowIndex,
-  columnIndex,
-  column: {
-    extraParams: {
-      dropdownPosition,
-      dropdownDirection,
-      actionsToggle
-    }
-  },
-  property
-}) => {
-  const extraData = {
-    rowIndex,
-    columnIndex,
-    column,
-    property
-  };
-  const resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData);
-  const resolvedIsDisabled = resolveOrDefault(areActionsDisabled, rowData && rowData.disableActions, rowData, extraData);
-  const renderProps = resolvedActions && resolvedActions.length > 0 ? {
-    children: React.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);
-};
-
-const compoundExpand = (value, {
-  rowIndex,
-  columnIndex,
-  rowData,
-  column,
-  property
-}) => {
-  if (!value) {
-    return null;
-  }
-
-  const {
-    title,
-    props
-  } = value;
-  const {
-    extraParams: {
-      onExpand
-    }
-  } = column;
-  const extraData = {
-    rowIndex,
-    columnIndex,
-    column,
-    property
-  };
-  /**
-   * @param {React.MouseEvent} event - Mouse event
-   */
+      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']);
 
-  function onToggle(event) {
-    // tslint:disable-next-line:no-unused-expression
-    onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
+  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.');
   }
 
-  return {
-    className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
-    children: props.isOpen !== undefined && React.createElement("button", {
-      type: "button",
-      className: css(styles$1.tableButton),
-      onClick: onToggle,
-      "aria-expanded": props.isOpen,
-      "aria-controls": props.ariaControls
-    }, React.createElement(TableText, null, title))
-  };
-};
-
-const FavoritesCell = _a => {
-  var {
-    className = '',
-    onFavorite,
-    isFavorited,
-    rowIndex
-  } = _a,
-      props = __rest(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
-
-  const ariaProps = rowIndex === undefined ? {} : {
-    id: `favorites-button-${rowIndex}`,
-    'aria-labelledby': `favorites-button-${rowIndex}`
-  };
-  return React.createElement(Button$1, Object.assign({
-    variant: "plain",
-    className: className,
-    type: "button",
-    "aria-label": isFavorited ? 'Starred' : 'Not starred',
-    onClick: onFavorite
-  }, ariaProps, props), React.createElement(StarIcon$1, {
-    "aria-hidden": true
-  }));
-};
-FavoritesCell.displayName = 'FavoritesCell';
-
-const favoritable = (value, {
-  rowIndex,
-  columnIndex,
-  rowData,
-  column,
-  property
-}) => {
-  const {
-    extraParams: {
-      onFavorite
+  const [showTooltip, setShowTooltip] = React.useState(false);
+  const [truncated, setTruncated] = React.useState(false);
+  const cellRef = innerRef ? innerRef : React.createRef();
+
+  const onMouseEnter = event => {
+    if (event.target.offsetWidth < event.target.scrollWidth) {
+      !showTooltip && setShowTooltip(true);
+    } else {
+      showTooltip && setShowTooltip(false);
     }
-  } = column;
-  const extraData = {
-    rowIndex,
-    columnIndex,
-    column,
-    property
-  }; // 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
-   */
+    onMouseEnterProp(event);
+  };
 
+  let sortParams = null;
 
-  function favoritesClick(event) {
-    // tslint:disable-next-line:no-unused-expression
-    onFavorite && onFavorite(event, rowData && !rowData.favorited, rowIndex, rowData, extraData);
+  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
+      })();
+    } 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
+      });
+    }
   }
 
-  const additionalProps = rowData.favoritesProps || {};
-  return {
-    className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
-    isVisible: !rowData || !rowData.fullWidth,
-    children: React.createElement(FavoritesCell, Object.assign({
-      rowIndex: rowIndex,
-      onFavorite: favoritesClick,
-      isFavorited: rowData && rowData.favorited
-    }, additionalProps))
-  };
-};
+  const 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
+  }) : null;
+  const collapseParams = collapse ? collapsible(children, {
+    column: {
+      extraParams: {
+        onCollapse: collapse === null || collapse === void 0 ? void 0 : collapse.onToggle,
+        allRowsExpanded: !collapse.areAllExpanded,
+        collapseAllAriaLabel: ''
+      }
+    }
+  }) : null;
+  const widthParams = width ? cellWidth(width)() : null;
+  const visibilityParams = visibility ? classNames(...visibility.map(vis => Visibility[vis]))() : null;
+  let 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
 
-const 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
-};
-const GripVerticalIcon = createIcon(GripVerticalIconConfig);
-var GripVerticalIcon$1 = GripVerticalIcon;
+  let infoParams = null;
 
-const DraggableCell = _a => {
-  var {
-    className,
-    onClick,
-    'aria-label': ariaLabel,
-    id
-  } = _a,
-      props = __rest(_a, ["className", "onClick", 'aria-label', "id"]);
+  if (infoProps) {
+    infoParams = info(infoProps)(transformedChildren);
+    transformedChildren = infoParams.children;
+  }
 
-  return React.createElement(Button$1, Object.assign({
-    id: id,
-    variant: "plain",
-    className: className,
-    type: "button",
-    "aria-label": ariaLabel || `Draggable row draggable button`,
-    onClick: onClick
-  }, props), React.createElement(GripVerticalIcon$1, {
-    "aria-hidden": true
-  }));
+  const merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
+
+  const {
+    // ignore the merged children since we transform them ourselves so we can wrap it with info
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    children: mergedChildren = null,
+    // selectable adds this but we don't want it
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    isVisible = null,
+    className: mergedClassName = '',
+    component: MergedComponent = component
+  } = merged,
+        mergedProps = __rest$1(merged, ["children", "isVisible", "className", "component"]);
+
+  React.useEffect(() => {
+    setTruncated(cellRef.current.offsetWidth < cellRef.current.scrollWidth);
+  }, [cellRef]);
+  const cell = React.createElement(MergedComponent, Object.assign({
+    tabIndex: sort || select || !truncated ? -1 : 0,
+    onFocus: tooltip !== null ? onMouseEnter : onMouseEnterProp,
+    onBlur: () => 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({
+      [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
+      [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+      [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0
+    }, props.style)
+  }), transformedChildren || screenReaderText && React.createElement("span", {
+    className: "pf-v5-screen-reader"
+  }, screenReaderText));
+  const canMakeDefaultTooltip = tooltip === '' ? typeof transformedChildren === 'string' : true;
+  const childControlsTooltip = sortParams || selectParams;
+  return tooltip !== null && canMakeDefaultTooltip && !childControlsTooltip && showTooltip ? React.createElement(React.Fragment, null, cell, React.createElement(Tooltip, Object.assign({
+    triggerRef: cellRef,
+    content: tooltip || tooltip === '' && children,
+    isVisible: true
+  }, tooltipProps))) : cell;
 };
-DraggableCell.displayName = 'DraggableCell';
+
+const Th = React.forwardRef((props, ref) => React.createElement(ThBase, Object.assign({}, props, {
+  innerRef: ref
+})));
+Th.displayName = 'Th';
 
 const draggable = (value, {
   rowData
@@ -1541,93 +1764,6 @@ const draggable = (value, {
   };
 };
 
-const 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
-};
-const EllipsisHIcon = createIcon(EllipsisHIconConfig);
-var EllipsisHIcon$1 = EllipsisHIcon;
-
-const treeRow = (onCollapse, onCheckChange, onToggleRowDetails) => (value, {
-  rowIndex,
-  rowData
-}) => {
-  const {
-    isExpanded,
-    isDetailsExpanded,
-    'aria-level': level,
-    'aria-setsize': setsize,
-    toggleAriaLabel,
-    checkAriaLabel,
-    showDetailsAriaLabel,
-    isChecked,
-    checkboxId,
-    icon
-  } = rowData.props;
-  const content = value.title || value;
-  const text = React.createElement("div", {
-    className: css(stylesTreeView.tableTreeViewText),
-    key: "tree-view-text"
-  }, icon && React.createElement("span", {
-    className: css(stylesTreeView.tableTreeViewIcon),
-    key: "tree-view-text-icon"
-  }, icon), React.createElement("span", {
-    className: "pf-c-table__text",
-    key: "table-text"
-  }, content));
-
-  const onChange = (isChecked, event) => {
-    onCheckChange(event, isChecked, rowIndex, content, rowData);
-  };
-
-  return {
-    component: 'th',
-    className: 'pf-c-table__tree-view-title-cell',
-    children: level !== undefined ? React.createElement("div", {
-      className: css(stylesTreeView.tableTreeViewMain)
-    }, setsize > 0 && React.createElement("span", {
-      className: css(stylesTreeView.tableToggle),
-      key: "table-toggle"
-    }, React.createElement(Button, {
-      variant: "plain",
-      onClick: event => 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.createElement("div", {
-      className: css(stylesTreeView.tableToggleIcon)
-    }, React.createElement(AngleDownIcon$1, {
-      "aria-hidden": "true"
-    })))), !!onCheckChange && React.createElement("span", {
-      className: css(stylesTreeView.tableCheck),
-      key: "table-check"
-    }, React.createElement("label", {
-      htmlFor: checkboxId || `checkbox_${rowIndex}`
-    }, React.createElement(Checkbox, {
-      id: checkboxId || `checkbox_${rowIndex}`,
-      "aria-label": checkAriaLabel || `Row ${rowIndex} checkbox`,
-      isChecked: isChecked,
-      onChange: onChange
-    }))), text, !!onToggleRowDetails && React.createElement("span", {
-      className: css(stylesTreeView.tableTreeViewDetailsToggle),
-      key: "view-details-toggle"
-    }, React.createElement(Button, {
-      variant: "plain",
-      "aria-expanded": isDetailsExpanded,
-      "aria-label": showDetailsAriaLabel || 'Show row details',
-      onClick: event => onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData)
-    }, React.createElement("span", {
-      className: "pf-c-table__details-toggle-icon"
-    }, React.createElement(EllipsisHIcon$1, {
-      "aria-hidden": true
-    }))))) : text
-  };
-};
-
 const TdBase = _a => {
   var {
     children,
@@ -1647,15 +1783,37 @@ const TdBase = _a => {
     visibility,
     innerRef,
     favorites = null,
-    draggableRow: draggableRowProp = null
+    draggableRow: draggableRowProp = null,
+    tooltip = '',
+    onMouseEnter: onMouseEnterProp = () => {},
+    isStickyColumn = false,
+    hasRightBorder = false,
+    hasLeftBorder = false,
+    stickyMinWidth = '120px',
+    stickyLeftOffset,
+    stickyRightOffset
   } = _a,
-      props = __rest(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow"]);
+      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"]);
+
+  const [showTooltip, setShowTooltip] = React.useState(false);
+  const [truncated, setTruncated] = React.useState(false);
+  const cellRef = innerRef ? innerRef : React.createRef();
+
+  const onMouseEnter = event => {
+    if (event.target.offsetWidth < event.target.scrollWidth) {
+      !showTooltip && setShowTooltip(true);
+    } else {
+      showTooltip && setShowTooltip(false);
+    }
+
+    onMouseEnterProp(event);
+  };
 
   const 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: {
@@ -1686,12 +1844,13 @@ const TdBase = _a => {
   const 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
       }
     }
@@ -1704,7 +1863,8 @@ const 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;
@@ -1714,9 +1874,12 @@ const 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;
@@ -1740,15 +1903,35 @@ const TdBase = _a => {
     className: mergedClassName = '',
     component: MergedComponent = component
   } = merged,
-        mergedProps = __rest(merged, ["isVisible", "children", "className", "component"]);
+        mergedProps = __rest$1(merged, ["isVisible", "children", "className", "component"]);
 
-  const treeTableTitleCell = className && className.includes('pf-c-table__tree-view-title-cell') || mergedClassName && mergedClassName.includes('pf-c-table__tree-view-title-cell');
-  return React.createElement(MergedComponent, Object.assign({}, !treeTableTitleCell && {
+  const treeTableTitleCell = className && className.includes(treeViewStyles.tableTreeViewTitleCell) || mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell);
+  React.useEffect(() => {
+    setTruncated(cellRef.current.offsetWidth < cellRef.current.scrollWidth);
+  }, [cellRef]);
+  const cell = React.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: () => 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({
+      [cssStickyCellMinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined,
+      [cssStickyCellLeft.name]: stickyLeftOffset ? stickyLeftOffset : 0,
+      [cssStickyCellRight.name]: stickyRightOffset ? stickyRightOffset : 0
+    }, props.style)
+  }), mergedChildren || children);
+  const canMakeDefaultTooltip = tooltip === '' ? typeof children === 'string' : true;
+  return tooltip !== null && canMakeDefaultTooltip && showTooltip ? React.createElement(React.Fragment, null, cell, React.createElement(Tooltip$1, {
+    triggerRef: cellRef,
+    content: tooltip || tooltip === '' && children,
+    isVisible: true
+  })) : cell;
 };
 
 const Td = React.forwardRef((props, ref) => React.createElement(TdBase, Object.assign({}, props, {
@@ -1910,7 +2093,7 @@ function FilterableTable({
     headingLevel: 'h3'
   }, React__default.createElement(Spinner, {
     size: 'lg'
-  })))) : React__default.createElement(React__default.Fragment, null, header, React__default.createElement(TableComposable, {
+  })))) : React__default.createElement(React__default.Fragment, null, header, React__default.createElement(Table, {
     "aria-label": 'Packages Table'
   }, React__default.createElement(Thead, null, React__default.createElement(Tr, null, columns.map((col, colIdx) => React__default.createElement(Th, Object.assign({
     key: `pkg-table-head-${colIdx}`
@@ -1930,12 +2113,13 @@ function FilterableTable({
     }, (_renderRow = renderRow(row)) == null ? void 0 : _renderRow[colIdx]);
   }))) : React__default.createElement(Tr, null, React__default.createElement(Td, {
     colSpan: columns.length
-  }, React__default.createElement(EmptyState, null, React__default.createElement(EmptyStateIcon, {
-    icon: SearchIcon
-  }), React__default.createElement(Title, {
-    headingLevel: 'h5',
-    size: 'lg'
-  }, "No results found"))))))), renderPagination('bottom'));
+  }, React__default.createElement(EmptyState, null, React__default.createElement(EmptyStateHeader, {
+    titleText: 'No results found',
+    icon: React__default.createElement(EmptyStateIcon, {
+      icon: SearchIcon
+    }),
+    headingLevel: 'h5'
+  }))))))), renderPagination('bottom'));
 }
 
 const FilterInput = ({
@@ -2052,12 +2236,12 @@ function EcoSelect({
     id: id,
     variant: variant,
     "aria-label": ariaLabel,
-    onToggle: onToggle,
+    onToggle: (_event, isOpen) => onToggle(isOpen),
     onSelect: onSelect,
     selections: selected,
     isOpen: isOpen,
     placeholderText: placeholderText,
-    className: "pf-select-wrapper"
+    className: 'pf-select-wrapper'
   }, options.map(option => React__default.createElement(SelectOption, {
     key: option,
     value: option
@@ -2082,7 +2266,7 @@ const ToggleGroup = props => {
     key: index,
     buttonId: option.id,
     isSelected: selected === option.id,
-    onChange: onClick
+    onChange: (event, _) => onClick(_, event)
   })));
 };