@rhc-shared-components/packages-table 0.3.2 → 0.3.4

package/dist/index.js

@@ -37,6 +37,22 @@ var mergeWith__default = /*#__PURE__*/_interopDefaultLegacy(mergeWith);
 
 var css_248z = ".vulnerabilities-table .impact-icon {\n  font-size: 1.5rem;\n  padding-right: 0.5rem;\n}\n.vulnerabilities-table .impact-icon.color-critical {\n  color: #a30000;\n}\n.vulnerabilities-table .impact-icon.color-important {\n  color: #ec7a08;\n}\n.vulnerabilities-table .impact-icon.color-moderate {\n  color: #f5c12e;\n}\n.vulnerabilities-table .impact-icon.color-low {\n  color: #777;\n}\n.vulnerabilities-table__affected-packages-cell {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.vulnerabilities-table__impact-cell {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n\n.filterable-table {\n  padding-bottom: var(--pf-global--spacer--lg);\n}\n.filterable-table__bottom-pagination[class] {\n  margin-top: 1rem;\n}\n.filterable-table .pf-c-toolbar {\n  padding-top: 0;\n}\n.filterable-table .pf-c-toolbar__content {\n  --pf-c-toolbar__content--PaddingRight: 0;\n  --pf-c-toolbar__content--PaddingLeft: 0;\n}\n.filterable-table .pf-c-input-group__text {\n  --pf-c-input-group__text--PaddingRight: 0;\n}\n.filterable-table .pf-c-pagination.pf-m-bottom {\n  --pf-c-pagination--m-bottom--md--PaddingRight: 0;\n}\n\n.packages-table .pf-c-tabs__item > button {\n  padding: 1rem 1.5rem;\n}\n.packages-table__excluded-packages-disclaimer {\n  margin: 1rem 0 0 0.5rem;\n}\n\n.filter-input {\n  width: 18rem;\n  margin: 1rem 0 1rem 0;\n}";
 
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -64,7 +80,7 @@ function __rest(s, e) {
   return t;
 }
 
-Promise.resolve().then(function () { return require('./inline-edit-e7ffaa36.js'); });
+Promise.resolve().then(function () { return require('./inline-edit-aba2c28a.js'); });
 var inlineStyles = {
   "button": "pf-c-button",
   "inlineEdit": "pf-c-inline-edit",
@@ -92,33 +108,33 @@ var inlineStyles = {
  *
  * @param {any} args list of objects, string, or arrays to reduce
  */
-function css(...args) {
-    // Adapted from https://github.com/JedWatson/classnames/blob/master/index.js
-    const classes = [];
-    const hasOwn = {}.hasOwnProperty;
-    args.filter(Boolean).forEach((arg) => {
-        const argType = typeof arg;
-        if (argType === 'string' || argType === 'number') {
-            classes.push(arg);
-        }
-        else if (Array.isArray(arg) && arg.length) {
-            const inner = css(...arg);
-            if (inner) {
-                classes.push(inner);
-            }
-        }
-        else if (argType === 'object') {
-            for (const key in arg) {
-                if (hasOwn.call(arg, key) && arg[key]) {
-                    classes.push(key);
-                }
-            }
+function css() {
+  // Adapted from https://github.com/JedWatson/classnames/blob/master/index.js
+  var classes = [];
+  var hasOwn = {}.hasOwnProperty;
+  [].slice.call(arguments).filter(Boolean).forEach(function (arg) {
+    var argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg) && arg.length) {
+      var inner = css.apply(void 0, arg);
+
+      if (inner) {
+        classes.push(inner);
+      }
+    } else if (argType === 'object') {
+      for (var key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes.push(key);
         }
-    });
-    return classes.join(' ');
+      }
+    }
+  });
+  return classes.join(' ');
 }
 
-Promise.resolve().then(function () { return require('./table-468a84b2.js'); });
+Promise.resolve().then(function () { return require('./table-ee2a086b.js'); });
 var styles$1 = {
   "button": "pf-c-button",
   "modifiers": {
@@ -199,7 +215,7 @@ var styles$1 = {
   "themeDark": "pf-theme-dark"
 };
 
-Promise.resolve().then(function () { return require('./table-grid-f5923ae5.js'); });
+Promise.resolve().then(function () { return require('./table-grid-be1510e7.js'); });
 var stylesGrid = {
   "button": "pf-c-button",
   "modifiers": {
@@ -232,7 +248,7 @@ var stylesGrid = {
   "tableToggleIcon": "pf-c-table__toggle-icon"
 };
 
-Promise.resolve().then(function () { return require('./table-tree-view-650158c9.js'); });
+Promise.resolve().then(function () { return require('./table-tree-view-248a6705.js'); });
 var stylesTreeView = {
   "dropdown": "pf-c-dropdown",
   "modifiers": {
@@ -257,142 +273,288 @@ var stylesTreeView = {
   "tableTreeViewTitleHeaderCell": "pf-c-table__tree-view-title-header-cell"
 };
 
-const camelize = (s) => s
-    .toUpperCase()
-    .replace('-', '')
-    .replace('_', '');
-const toCamel = (s) => s.replace(/([-_][a-z])/gi, camelize);
+var camelize = function camelize(s) {
+  return s.toUpperCase().replace('-', '').replace('_', '');
+};
+
+var toCamel = function toCamel(s) {
+  return s.replace(/([-_][a-z])/gi, camelize);
+};
 /**
  * @param {string} input - String to capitalize
  */
+
 function capitalize(input) {
-    return input[0].toUpperCase() + input.substring(1);
+  return input[0].toUpperCase() + input.substring(1);
 }
 
 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["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["compact"] = "compact";
 })(TableVariant || (TableVariant = {}));
 
-const TableComposableContext = React__namespace.createContext({
-    registerSelectableRow: () => { }
+var TableComposableContext = React__namespace.createContext({
+  registerSelectableRow: function registerSelectableRow() {}
 });
-const TableComposableBase = (_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, 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    nestedHeaderColumnSpans, hasSelectableRowCaption, selectableRowCaptionText } = _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__namespace.useRef(null);
-    const [hasSelectableRows, setHasSelectableRows] = React__namespace.useState(false);
-    const [tableCaption, setTableCaption] = React__namespace.useState();
-    React__namespace.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 && reactCore.setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
-        }
-        return function cleanup() {
-            document.removeEventListener('keydown', handleKeys);
-        };
-    }, [tableRef, tableRef.current]);
-    React__namespace.useEffect(() => {
-        if (selectableRowCaptionText) {
-            setTableCaption(React__namespace.createElement("caption", null,
-                selectableRowCaptionText,
-                React__namespace.createElement("div", { className: "pf-screen-reader" }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter.")));
-        }
-        else {
-            setTableCaption(React__namespace.createElement("caption", { className: "pf-screen-reader" }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter."));
-        }
-    }, [selectableRowCaptionText]);
-    const ouiaProps = reactCore.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();
-        }
-        const getFocusableElement = (element) => element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
-        reactCore.handleArrows(event, rows, (element) => element === activeElement.closest('tr'), getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
+
+var TableComposableBase = function TableComposableBase(_a) {
+  var _b, _c;
+
+  var children = _a.children,
+      className = _a.className,
+      variant = _a.variant,
+      _a$borders = _a.borders,
+      borders = _a$borders === void 0 ? true : _a$borders,
+      _a$isStickyHeader = _a.isStickyHeader,
+      isStickyHeader = _a$isStickyHeader === void 0 ? false : _a$isStickyHeader,
+      _a$gridBreakPoint = _a.gridBreakPoint,
+      gridBreakPoint = _a$gridBreakPoint === void 0 ? TableGridBreakpoint.gridMd : _a$gridBreakPoint,
+      ariaLabel = _a['aria-label'],
+      _a$role = _a.role,
+      role = _a$role === void 0 ? 'grid' : _a$role,
+      innerRef = _a.innerRef,
+      ouiaId = _a.ouiaId,
+      _a$ouiaSafe = _a.ouiaSafe,
+      ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
+      _a$isTreeTable = _a.isTreeTable,
+      isTreeTable = _a$isTreeTable === void 0 ? false : _a$isTreeTable,
+      _a$isNested = _a.isNested,
+      isNested = _a$isNested === void 0 ? false : _a$isNested,
+      _a$isStriped = _a.isStriped,
+      isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
+      _a$isExpandable = _a.isExpandable,
+      isExpandable = _a$isExpandable === void 0 ? false : _a$isExpandable,
+      hasSelectableRowCaption = _a.hasSelectableRowCaption,
+      selectableRowCaptionText = _a.selectableRowCaptionText,
+      props = __rest(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "nestedHeaderColumnSpans", "hasSelectableRowCaption", "selectableRowCaptionText"]);
+
+  var tableRef = innerRef || React__namespace.useRef(null);
+
+  var _React$useState = React__namespace.useState(false),
+      hasSelectableRows = _React$useState[0],
+      setHasSelectableRows = _React$useState[1];
+
+  var _React$useState2 = React__namespace.useState(),
+      tableCaption = _React$useState2[0],
+      setTableCaption = _React$useState2[1];
+
+  React__namespace.useEffect(function () {
+    document.addEventListener('keydown', handleKeys); // sets up roving tab-index to tree tables only
+
+    if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
+      var tbody = tableRef.current.querySelector('tbody');
+      tbody && reactCore.setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
+    }
+
+    return function cleanup() {
+      document.removeEventListener('keydown', handleKeys);
     };
-    const registerSelectableRow = () => {
-        !hasSelectableRows && setHasSelectableRows(true);
+  }, [tableRef, tableRef.current]);
+  React__namespace.useEffect(function () {
+    if (selectableRowCaptionText) {
+      setTableCaption(React__namespace.createElement("caption", null, selectableRowCaptionText, React__namespace.createElement("div", {
+        className: "pf-screen-reader"
+      }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter.")));
+    } else {
+      setTableCaption(React__namespace.createElement("caption", {
+        className: "pf-screen-reader"
+      }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter."));
+    }
+  }, [selectableRowCaptionText]);
+  var ouiaProps = reactCore.useOUIAProps('Table', ouiaId, ouiaSafe);
+  var grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
+  var breakPointPrefix = "treeView" + (gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1));
+  var treeGrid = (_c = stylesTreeView.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
+
+  var handleKeys = function handleKeys(event) {
+    if (isNested || !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
+    tableRef && tableRef.current !== event.target.closest('.pf-c-table:not(.pf-m-nested)')) {
+      return;
+    }
+
+    var activeElement = document.activeElement;
+    var key = event.key;
+    var rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter(function (el) {
+      return !el.classList.contains('pf-m-disabled') && !el.hidden;
+    });
+
+    if (key === 'Space' || key === 'Enter') {
+      activeElement.click();
+      event.preventDefault();
+    }
+
+    var getFocusableElement = function getFocusableElement(element) {
+      return element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
     };
-    return (React__namespace.createElement(TableComposableContext.Provider, { value: { registerSelectableRow } },
-        React__namespace.createElement("table", Object.assign({ "aria-label": ariaLabel, role: role, className: css(className, styles$1.table, isTreeTable ? treeGrid : grid, styles$1.modifiers[variant], !borders && styles$1.modifiers.noBorderRows, isStickyHeader && styles$1.modifiers.stickyHeader, isTreeTable && stylesTreeView.modifiers.treeView, isStriped && styles$1.modifiers.striped, isExpandable && styles$1.modifiers.expandable, isNested && 'pf-m-nested'), ref: tableRef }, (isTreeTable && { role: 'treegrid' }), ouiaProps, props),
-            hasSelectableRowCaption && hasSelectableRows && tableCaption,
-            children)));
+
+    reactCore.handleArrows(event, rows, function (element) {
+      return element === activeElement.closest('tr');
+    }, getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
+  };
+
+  var registerSelectableRow = function registerSelectableRow() {
+    !hasSelectableRows && setHasSelectableRows(true);
+  };
+
+  return React__namespace.createElement(TableComposableContext.Provider, {
+    value: {
+      registerSelectableRow: registerSelectableRow
+    }
+  }, React__namespace.createElement("table", Object.assign({
+    "aria-label": ariaLabel,
+    role: role,
+    className: css(className, styles$1.table, isTreeTable ? treeGrid : grid, styles$1.modifiers[variant], !borders && styles$1.modifiers.noBorderRows, isStickyHeader && styles$1.modifiers.stickyHeader, isTreeTable && stylesTreeView.modifiers.treeView, isStriped && styles$1.modifiers.striped, isExpandable && styles$1.modifiers.expandable, isNested && 'pf-m-nested'),
+    ref: tableRef
+  }, isTreeTable && {
+    role: 'treegrid'
+  }, ouiaProps, props), hasSelectableRowCaption && hasSelectableRows && tableCaption, children));
 };
-const TableComposable = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TableComposableBase, Object.assign({}, props, { innerRef: ref }))));
+
+var TableComposable = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.createElement(TableComposableBase, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
 TableComposable.displayName = 'TableComposable';
 
-const TheadBase = (_a) => {
-    var { children, className, noWrap = false, innerRef, hasNestedHeader } = _a, props = __rest(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
-    return (React__namespace.createElement("thead", Object.assign({ className: css(className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader), ref: innerRef }, props), children));
+var TheadBase = function TheadBase(_a) {
+  var children = _a.children,
+      className = _a.className,
+      _a$noWrap = _a.noWrap,
+      noWrap = _a$noWrap === void 0 ? false : _a$noWrap,
+      innerRef = _a.innerRef,
+      hasNestedHeader = _a.hasNestedHeader,
+      props = __rest(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
+
+  return React__namespace.createElement("thead", Object.assign({
+    className: css(className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader),
+    ref: innerRef
+  }, props), children);
 };
-const Thead = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TheadBase, Object.assign({}, props, { innerRef: ref }))));
+
+var Thead = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.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(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
-    return (React__namespace.createElement("tbody", Object.assign({ role: "rowgroup", className: css(className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven), ref: innerRef }, props), children));
+var TbodyBase = function TbodyBase(_a) {
+  var children = _a.children,
+      className = _a.className,
+      isExpanded = _a.isExpanded,
+      innerRef = _a.innerRef,
+      _a$isEvenStriped = _a.isEvenStriped,
+      isEvenStriped = _a$isEvenStriped === void 0 ? false : _a$isEvenStriped,
+      _a$isOddStriped = _a.isOddStriped,
+      isOddStriped = _a$isOddStriped === void 0 ? false : _a$isOddStriped,
+      props = __rest(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
+
+  return React__namespace.createElement("tbody", Object.assign({
+    role: "rowgroup",
+    className: css(className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven),
+    ref: innerRef
+  }, props), children);
 };
-const Tbody = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TbodyBase, Object.assign({}, props, { innerRef: ref }))));
+
+var Tbody = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.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']);
-    const ouiaProps = reactCore.useOUIAProps('TableRow', ouiaId, ouiaSafe);
-    const [computedAriaLabel, setComputedAriaLabel] = React__namespace.useState('');
-    let onKeyDown = null;
-    if (onRowClick) {
-        onKeyDown = (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                onRowClick(e);
-                e.preventDefault();
-            }
-        };
+var TrBase = function TrBase(_a) {
+  var children = _a.children,
+      className = _a.className,
+      isExpanded = _a.isExpanded,
+      isEditable = _a.isEditable,
+      _a$isHidden = _a.isHidden,
+      isHidden = _a$isHidden === void 0 ? false : _a$isHidden,
+      _a$isHoverable = _a.isHoverable,
+      isHoverable = _a$isHoverable === void 0 ? false : _a$isHoverable,
+      _a$isRowSelected = _a.isRowSelected,
+      isRowSelected = _a$isRowSelected === void 0 ? false : _a$isRowSelected,
+      _a$isStriped = _a.isStriped,
+      isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
+      innerRef = _a.innerRef,
+      ouiaId = _a.ouiaId,
+      _a$ouiaSafe = _a.ouiaSafe,
+      ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
+      _a$resetOffset = _a.resetOffset,
+      resetOffset = _a$resetOffset === void 0 ? false : _a$resetOffset,
+      onRowClick = _a.onRowClick,
+      isSelectable = _a.isSelectable,
+      passedAriaLabel = _a['aria-label'],
+      props = __rest(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isHoverable", "isRowSelected", "isStriped", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
+
+  var ouiaProps = reactCore.useOUIAProps('TableRow', ouiaId, ouiaSafe);
+
+  var _React$useState = React__namespace.useState(''),
+      computedAriaLabel = _React$useState[0],
+      setComputedAriaLabel = _React$useState[1];
+
+  var onKeyDown = null;
+
+  if (onRowClick) {
+    onKeyDown = function onKeyDown(e) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        onRowClick(e);
+        e.preventDefault();
+      }
+    };
+  }
+
+  var rowIsHidden = isHidden || isExpanded !== undefined && !isExpanded;
+
+  var _React$useContext = React__namespace.useContext(TableComposableContext),
+      registerSelectableRow = _React$useContext.registerSelectableRow;
+
+  React__namespace.useEffect(function () {
+    if (isSelectable && !rowIsHidden) {
+      setComputedAriaLabel((isRowSelected ? 'Selected' : 'Unselected') + ", selectable row.");
+      registerSelectableRow();
+    } else {
+      setComputedAriaLabel(undefined);
     }
-    const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
-    const { registerSelectableRow } = React__namespace.useContext(TableComposableContext);
-    React__namespace.useEffect(() => {
-        if (isSelectable && !rowIsHidden) {
-            setComputedAriaLabel(`${isRowSelected ? 'Selected' : 'Unselected'}, selectable row.`);
-            registerSelectableRow();
-        }
-        else {
-            setComputedAriaLabel(undefined);
-        }
-    }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
-    const ariaLabel = passedAriaLabel || computedAriaLabel;
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        isSelectable && React__namespace.createElement("output", { className: "pf-screen-reader" }, ariaLabel),
-        React__namespace.createElement("tr", Object.assign({ className: css(className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isHoverable && styles$1.modifiers.hoverable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, resetOffset && styles$1.modifiers.firstCellOffsetReset), hidden: rowIsHidden }, (isHoverable && { tabIndex: 0 }), { "aria-label": ariaLabel, ref: innerRef }, (onRowClick && { onClick: onRowClick, onKeyDown }), ouiaProps, props), children)));
+  }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
+  var ariaLabel = passedAriaLabel || computedAriaLabel;
+  return React__namespace.createElement(React__namespace.Fragment, null, isSelectable && React__namespace.createElement("output", {
+    className: "pf-screen-reader"
+  }, ariaLabel), React__namespace.createElement("tr", Object.assign({
+    className: css(className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isHoverable && styles$1.modifiers.hoverable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, resetOffset && styles$1.modifiers.firstCellOffsetReset),
+    hidden: rowIsHidden
+  }, isHoverable && {
+    tabIndex: 0
+  }, {
+    "aria-label": ariaLabel,
+    ref: innerRef
+  }, onRowClick && {
+    onClick: onRowClick,
+    onKeyDown: onKeyDown
+  }, ouiaProps, props), children));
 };
-const Tr = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TrBase, Object.assign({}, props, { innerRef: ref }))));
+
+var Tr = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.createElement(TrBase, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
 Tr.displayName = 'Tr';
 
-Promise.resolve().then(function () { return require('./table-scrollable-e0f500ba.js'); });
+Promise.resolve().then(function () { return require('./table-scrollable-8d506d50.js'); });
 var styles = {
   "modifiers": {
     "borderRight": "pf-m-border-right",
@@ -405,251 +567,407 @@ var styles = {
   "tableStickyColumn": "pf-c-table__sticky-column"
 };
 
-var IconSize$1;
+var IconSize;
+
 (function (IconSize) {
-    IconSize["sm"] = "sm";
-    IconSize["md"] = "md";
-    IconSize["lg"] = "lg";
-    IconSize["xl"] = "xl";
-})(IconSize$1 || (IconSize$1 = {}));
-const getSize$1 = (size) => {
-    switch (size) {
-        case IconSize$1.sm:
-            return '1em';
-        case IconSize$1.md:
-            return '1.5em';
-        case IconSize$1.lg:
-            return '2em';
-        case IconSize$1.xl:
-            return '3em';
-        default:
-            return '1em';
-    }
+  IconSize["sm"] = "sm";
+  IconSize["md"] = "md";
+  IconSize["lg"] = "lg";
+  IconSize["xl"] = "xl";
+})(IconSize || (IconSize = {}));
+
+var getSize = function getSize(size) {
+  switch (size) {
+    case IconSize.sm:
+      return '1em';
+
+    case IconSize.md:
+      return '1.5em';
+
+    case IconSize.lg:
+      return '2em';
+
+    case IconSize.xl:
+      return '3em';
+
+    default:
+      return '1em';
+  }
 };
-let currentId$1 = 0;
+var currentId = 0;
 /**
  * Factory to create Icon class components for consumers
  */
-function createIcon$1({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
-    var _a;
-    return _a = class SVGIcon extends React__namespace.Component {
-            constructor() {
-                super(...arguments);
-                this.id = `icon-title-${currentId$1++}`;
-            }
-            render() {
-                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
-                const hasTitle = Boolean(title);
-                const heightWidth = getSize$1(size);
-                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
-                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
-                const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React__namespace.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
-                    hasTitle && React__namespace.createElement("title", { id: this.id }, title),
-                    React__namespace.createElement("path", { d: svgPath })));
-            }
-        },
-        _a.displayName = name,
-        _a.defaultProps = {
-            color: 'currentColor',
-            size: IconSize$1.sm,
-            noVerticalAlign: false
-        },
-        _a;
+
+function createIcon(_ref) {
+  var name = _ref.name,
+      _ref$xOffset = _ref.xOffset,
+      xOffset = _ref$xOffset === void 0 ? 0 : _ref$xOffset,
+      _ref$yOffset = _ref.yOffset,
+      yOffset = _ref$yOffset === void 0 ? 0 : _ref$yOffset,
+      width = _ref.width,
+      height = _ref.height,
+      svgPath = _ref.svgPath;
+
+  var _a;
+
+  return _a = /*#__PURE__*/function (_React$Component) {
+    _inheritsLoose(SVGIcon, _React$Component);
+
+    function SVGIcon() {
+      var _this;
+
+      _this = _React$Component.apply(this, arguments) || this;
+      _this.id = "icon-title-" + currentId++;
+      return _this;
+    }
+
+    var _proto = SVGIcon.prototype;
+
+    _proto.render = function render() {
+      var _a = this.props,
+          size = _a.size,
+          color = _a.color,
+          title = _a.title,
+          noVerticalAlign = _a.noVerticalAlign,
+          props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+
+      var hasTitle = Boolean(title);
+      var heightWidth = getSize(size);
+      var baseAlign = -0.125 * Number.parseFloat(heightWidth);
+      var style = noVerticalAlign ? null : {
+        verticalAlign: baseAlign + "em"
+      };
+      var viewBox = [xOffset, yOffset, width, height].join(' ');
+      return React__namespace.createElement("svg", Object.assign({
+        style: style,
+        fill: color,
+        height: heightWidth,
+        width: heightWidth,
+        viewBox: viewBox,
+        "aria-labelledby": hasTitle ? this.id : null,
+        "aria-hidden": hasTitle ? null : true,
+        role: "img"
+      }, props), hasTitle && React__namespace.createElement("title", {
+        id: this.id
+      }, title), React__namespace.createElement("path", {
+        d: svgPath
+      }));
+    };
+
+    return SVGIcon;
+  }(React__namespace.Component), _a.displayName = name, _a.defaultProps = {
+    color: 'currentColor',
+    size: IconSize.sm,
+    noVerticalAlign: false
+  }, _a;
 }
 
-const HelpIconConfig = {
+var HelpIconConfig = {
   name: 'HelpIcon',
   height: 1024,
   width: 1024,
   svgPath: 'M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
-
-const HelpIcon = createIcon$1(HelpIconConfig);
-
+var HelpIcon = createIcon(HelpIconConfig);
 var HelpIcon$1 = HelpIcon;
 
 var TableTextVariant;
+
 (function (TableTextVariant) {
-    TableTextVariant["div"] = "div";
-    TableTextVariant["nav"] = "nav";
+  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["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__namespace.useState('');
-    const onMouseEnter = (event) => {
-        if (event.target.offsetWidth < event.target.scrollWidth) {
-            setTooltip(tooltipProp || event.target.innerText);
-        }
-        else {
-            setTooltip('');
-        }
-        onMouseEnterProp(event);
-    };
-    const text = (React__namespace.createElement(Component, Object.assign({ onMouseEnter: onMouseEnter, className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText) }, props), children));
-    return tooltip !== '' ? (React__namespace.createElement(Tooltip.Tooltip, Object.assign({ content: tooltip, isVisible: true }, tooltipProps), text)) : (text);
+
+var TableText = function TableText(_a) {
+  var _a$children = _a.children,
+      children = _a$children === void 0 ? null : _a$children,
+      _a$className = _a.className,
+      className = _a$className === void 0 ? '' : _a$className,
+      _a$variant = _a.variant,
+      variant = _a$variant === void 0 ? 'span' : _a$variant,
+      _a$wrapModifier = _a.wrapModifier,
+      wrapModifier = _a$wrapModifier === void 0 ? null : _a$wrapModifier,
+      _a$tooltip = _a.tooltip,
+      tooltipProp = _a$tooltip === void 0 ? '' : _a$tooltip,
+      _a$tooltipProps = _a.tooltipProps,
+      tooltipProps = _a$tooltipProps === void 0 ? {} : _a$tooltipProps,
+      _a$onMouseEnter = _a.onMouseEnter,
+      onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
+      props = __rest(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter"]);
+
+  var Component = variant;
+
+  var _React$useState = React__namespace.useState(''),
+      tooltip = _React$useState[0],
+      setTooltip = _React$useState[1];
+
+  var onMouseEnter = function onMouseEnter(event) {
+    if (event.target.offsetWidth < event.target.scrollWidth) {
+      setTooltip(tooltipProp || event.target.innerText);
+    } else {
+      setTooltip('');
+    }
+
+    onMouseEnterProp(event);
+  };
+
+  var text = React__namespace.createElement(Component, Object.assign({
+    onMouseEnter: onMouseEnter,
+    className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText)
+  }, props), children);
+  return tooltip !== '' ? React__namespace.createElement(Tooltip.Tooltip, Object.assign({
+    content: tooltip,
+    isVisible: true
+  }, tooltipProps), text) : text;
 };
 TableText.displayName = 'TableText';
 
-const HeaderCellInfoWrapper = ({ children, info, className, variant = 'tooltip', popoverProps, tooltipProps, ariaLabel }) => (React__namespace.createElement("div", { className: css(styles$1.tableColumnHelp, className) },
-    typeof children === 'string' ? React__namespace.createElement(TableText, null, children) : children,
-    React__namespace.createElement("span", { className: css(styles$1.tableColumnHelpAction) }, variant === 'tooltip' ? (React__namespace.createElement(reactCore.Tooltip, Object.assign({ content: info }, tooltipProps),
-        React__namespace.createElement(reactCore.Button, { variant: "plain", "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info' },
-            React__namespace.createElement(HelpIcon$1, { noVerticalAlign: true })))) : (React__namespace.createElement(reactCore.Popover, Object.assign({ bodyContent: info }, popoverProps),
-        React__namespace.createElement(reactCore.Button, { variant: "plain", "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info' },
-            React__namespace.createElement(HelpIcon$1, { noVerticalAlign: true })))))));
+var HeaderCellInfoWrapper = function HeaderCellInfoWrapper(_ref) {
+  var children = _ref.children,
+      info = _ref.info,
+      className = _ref.className,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
+      popoverProps = _ref.popoverProps,
+      tooltipProps = _ref.tooltipProps,
+      ariaLabel = _ref.ariaLabel;
+  return React__namespace.createElement("div", {
+    className: css(styles$1.tableColumnHelp, className)
+  }, typeof children === 'string' ? React__namespace.createElement(TableText, null, children) : children, React__namespace.createElement("span", {
+    className: css(styles$1.tableColumnHelpAction)
+  }, variant === 'tooltip' ? React__namespace.createElement(reactCore.Tooltip, Object.assign({
+    content: info
+  }, tooltipProps), React__namespace.createElement(reactCore.Button, {
+    variant: "plain",
+    "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
+  }, React__namespace.createElement(HelpIcon$1, {
+    noVerticalAlign: true
+  }))) : React__namespace.createElement(reactCore.Popover, Object.assign({
+    bodyContent: info
+  }, popoverProps), React__namespace.createElement(reactCore.Button, {
+    variant: "plain",
+    "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
+  }, React__namespace.createElement(HelpIcon$1, {
+    noVerticalAlign: true
+  })))));
+};
 HeaderCellInfoWrapper.displayName = 'HeaderCellInfoWrapper';
 
-const info = ({ tooltip, tooltipProps, popover, popoverProps, className, ariaLabel }) => {
-    const infoObj = (value) => ({
-        className: styles$1.modifiers.help,
-        children: tooltip ? (React__namespace.createElement(HeaderCellInfoWrapper, { variant: "tooltip", info: tooltip, tooltipProps: tooltipProps, ariaLabel: ariaLabel, className: className }, value)) : (React__namespace.createElement(HeaderCellInfoWrapper, { variant: "popover", info: popover, popoverProps: popoverProps, ariaLabel: ariaLabel, className: className }, value))
-    });
-    return infoObj;
+var info = function info(_ref) {
+  var tooltip = _ref.tooltip,
+      tooltipProps = _ref.tooltipProps,
+      popover = _ref.popover,
+      popoverProps = _ref.popoverProps,
+      className = _ref.className,
+      ariaLabel = _ref.ariaLabel;
+
+  var infoObj = function infoObj(value) {
+    return {
+      className: styles$1.modifiers.help,
+      children: tooltip ? React__namespace.createElement(HeaderCellInfoWrapper, {
+        variant: "tooltip",
+        info: tooltip,
+        tooltipProps: tooltipProps,
+        ariaLabel: ariaLabel,
+        className: className
+      }, value) : React__namespace.createElement(HeaderCellInfoWrapper, {
+        variant: "popover",
+        info: popover,
+        popoverProps: popoverProps,
+        ariaLabel: ariaLabel,
+        className: className
+      }, value)
+    };
+  };
+
+  return infoObj;
 };
 
-const LongArrowAltUpIconConfig = {
+var LongArrowAltUpIconConfig = {
   name: 'LongArrowAltUpIcon',
   height: 512,
   width: 256,
   svgPath: 'M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
-
-const LongArrowAltUpIcon = createIcon$1(LongArrowAltUpIconConfig);
-
+var LongArrowAltUpIcon = createIcon(LongArrowAltUpIconConfig);
 var LongArrowAltUpIcon$1 = LongArrowAltUpIcon;
 
-const LongArrowAltDownIconConfig = {
+var LongArrowAltDownIconConfig = {
   name: 'LongArrowAltDownIcon',
   height: 512,
   width: 256,
   svgPath: 'M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
-
-const LongArrowAltDownIcon = createIcon$1(LongArrowAltDownIconConfig);
-
+var LongArrowAltDownIcon = createIcon(LongArrowAltDownIconConfig);
 var LongArrowAltDownIcon$1 = LongArrowAltDownIcon;
 
-const ArrowsAltVIconConfig = {
+var ArrowsAltVIconConfig = {
   name: 'ArrowsAltVIcon',
   height: 512,
   width: 256,
   svgPath: 'M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
-
-const ArrowsAltVIcon = createIcon$1(ArrowsAltVIconConfig);
-
+var ArrowsAltVIcon = createIcon(ArrowsAltVIconConfig);
 var ArrowsAltVIcon$1 = ArrowsAltVIcon;
 
 var SortByDirection;
+
 (function (SortByDirection) {
-    SortByDirection["asc"] = "asc";
-    SortByDirection["desc"] = "desc";
+  SortByDirection["asc"] = "asc";
+  SortByDirection["desc"] = "desc";
 })(SortByDirection || (SortByDirection = {}));
-const SortColumn = (_a) => {
-    var { children = null, className = '', isSortedBy = false, onSort = null, sortDirection = '', type = 'button' } = _a, props = __rest(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type"]);
-    let SortedByIcon;
-    if (isSortedBy) {
-        SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon$1 : LongArrowAltDownIcon$1;
-    }
-    else {
-        SortedByIcon = ArrowsAltVIcon$1;
+
+var SortColumn = function SortColumn(_a) {
+  var _a$children = _a.children,
+      children = _a$children === void 0 ? null : _a$children,
+      _a$className = _a.className,
+      className = _a$className === void 0 ? '' : _a$className,
+      _a$isSortedBy = _a.isSortedBy,
+      isSortedBy = _a$isSortedBy === void 0 ? false : _a$isSortedBy,
+      _a$onSort = _a.onSort,
+      onSort = _a$onSort === void 0 ? null : _a$onSort,
+      _a$sortDirection = _a.sortDirection,
+      sortDirection = _a$sortDirection === void 0 ? '' : _a$sortDirection,
+      _a$type = _a.type,
+      type = _a$type === void 0 ? 'button' : _a$type,
+      props = __rest(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type"]);
+
+  var SortedByIcon;
+
+  if (isSortedBy) {
+    SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon$1 : LongArrowAltDownIcon$1;
+  } else {
+    SortedByIcon = ArrowsAltVIcon$1;
+  }
+
+  return React__namespace.createElement("button", Object.assign({}, props, {
+    type: type,
+    className: css(className, styles$1.tableButton),
+    onClick: function onClick(event) {
+      return onSort && onSort(event);
     }
-    return (React__namespace.createElement("button", Object.assign({}, props, { type: type, className: css(className, styles$1.tableButton), onClick: event => onSort && onSort(event) }),
-        React__namespace.createElement("div", { className: css(className, styles$1.tableButtonContent) },
-            React__namespace.createElement(TableText, null, children),
-            React__namespace.createElement("span", { className: css(styles$1.tableSortIndicator) },
-                React__namespace.createElement(SortedByIcon, null)))));
+  }), React__namespace.createElement("div", {
+    className: css(className, styles$1.tableButtonContent)
+  }, React__namespace.createElement(TableText, null, children), React__namespace.createElement("span", {
+    className: css(styles$1.tableSortIndicator)
+  }, React__namespace.createElement(SortedByIcon, null))));
 };
 SortColumn.displayName = 'SortColumn';
 
-const StarIconConfig = {
+var StarIconConfig = {
   name: 'StarIcon',
   height: 512,
   width: 576,
   svgPath: 'M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
-
-const StarIcon = createIcon$1(StarIconConfig);
-
+var StarIcon = createIcon(StarIconConfig);
 var StarIcon$1 = StarIcon;
 
-const sortableFavorites = (sort) => () => sortable(React__namespace.createElement(StarIcon$1, { "aria-hidden": true }), {
-    columnIndex: sort.columnIndex,
-    className: styles$1.modifiers.favorite,
-    ariaLabel: 'Sort favorites',
-    column: {
+var sortableFavorites = function sortableFavorites(sort) {
+  return function () {
+    return sortable(React__namespace.createElement(StarIcon$1, {
+      "aria-hidden": true
+    }), {
+      columnIndex: sort.columnIndex,
+      className: styles$1.modifiers.favorite,
+      ariaLabel: 'Sort favorites',
+      column: {
         extraParams: {
-            sortBy: sort.sortBy,
-            onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
+          sortBy: sort.sortBy,
+          onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
         }
-    }
-});
-const sortable = (label, { columnIndex, column, property, className, ariaLabel }) => {
-    const { extraParams: { sortBy, onSort } } = column;
-    const extraData = {
-        columnIndex,
-        column,
-        property
-    };
-    const isSortedBy = sortBy && columnIndex === sortBy.index;
-    /**
-     * @param {React.MouseEvent} event - React mouse event
-     */
-    function sortClicked(event) {
-        let reversedDirection;
-        if (!isSortedBy) {
-            reversedDirection = sortBy.defaultDirection ? sortBy.defaultDirection : SortByDirection.asc;
-        }
-        else {
-            reversedDirection = sortBy.direction === SortByDirection.asc ? SortByDirection.desc : SortByDirection.asc;
-        }
-        // tslint:disable-next-line:no-unused-expression
-        onSort && onSort(event, columnIndex, reversedDirection, extraData);
-    }
-    return {
-        className: css(styles$1.tableSort, isSortedBy && styles$1.modifiers.selected, className),
-        'aria-sort': isSortedBy ? `${sortBy.direction}ending` : 'none',
-        children: (React__namespace.createElement(SortColumn, { isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortBy.direction : '', onSort: sortClicked, "aria-label": ariaLabel }, label))
-    };
+      }
+    });
+  };
+};
+var sortable = function sortable(label, _ref) {
+  var columnIndex = _ref.columnIndex,
+      column = _ref.column,
+      property = _ref.property,
+      className = _ref.className,
+      ariaLabel = _ref.ariaLabel;
+  var _column$extraParams = column.extraParams,
+      sortBy = _column$extraParams.sortBy,
+      onSort = _column$extraParams.onSort;
+  var extraData = {
+    columnIndex: columnIndex,
+    column: column,
+    property: property
+  };
+  var isSortedBy = sortBy && columnIndex === sortBy.index;
+  /**
+   * @param {React.MouseEvent} event - React mouse event
+   */
+
+  function sortClicked(event) {
+    var reversedDirection;
+
+    if (!isSortedBy) {
+      reversedDirection = sortBy.defaultDirection ? sortBy.defaultDirection : SortByDirection.asc;
+    } else {
+      reversedDirection = sortBy.direction === SortByDirection.asc ? SortByDirection.desc : SortByDirection.asc;
+    } // tslint:disable-next-line:no-unused-expression
+
+
+    onSort && onSort(event, columnIndex, reversedDirection, extraData);
+  }
+
+  return {
+    className: css(styles$1.tableSort, isSortedBy && styles$1.modifiers.selected, className),
+    'aria-sort': isSortedBy ? sortBy.direction + "ending" : 'none',
+    children: React__namespace.createElement(SortColumn, {
+      isSortedBy: isSortedBy,
+      sortDirection: isSortedBy ? sortBy.direction : '',
+      onSort: sortClicked,
+      "aria-label": ariaLabel
+    }, label)
+  };
 };
 
 var RowSelectVariant;
+
 (function (RowSelectVariant) {
-    RowSelectVariant["radio"] = "radio";
-    RowSelectVariant["checkbox"] = "checkbox";
+  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__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement("label", null,
-            React__namespace.createElement("input", Object.assign({}, props, { type: selectVariant, onChange: onSelect }))),
-        children));
+
+var SelectColumn = function SelectColumn(_a) {
+  var _a$children = _a.children,
+      children = _a$children === void 0 ? null : _a$children,
+      _a$onSelect = _a.onSelect,
+      onSelect = _a$onSelect === void 0 ? null : _a$onSelect,
+      selectVariant = _a.selectVariant,
+      props = __rest(_a, ["children", "className", "onSelect", "selectVariant"]);
+
+  return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("label", null, React__namespace.createElement("input", Object.assign({}, props, {
+    type: selectVariant,
+    onChange: onSelect
+  }))), children);
 };
 SelectColumn.displayName = 'SelectColumn';
 
-Promise.resolve().then(function () { return require('./check-27d5ec91.js'); });
+Promise.resolve().then(function () { return require('./check-293a8689.js'); });
 var checkStyles = {
   "check": "pf-c-check",
   "checkBody": "pf-c-check__body",
@@ -662,140 +980,180 @@ var checkStyles = {
   }
 };
 
-const selectable = (label, { rowIndex, columnIndex, rowData, column, property }) => {
-    const { extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled } } = column;
-    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';
-    }
+var selectable = function selectable(label, _ref) {
+  var rowIndex = _ref.rowIndex,
+      columnIndex = _ref.columnIndex,
+      rowData = _ref.rowData,
+      column = _ref.column,
+      property = _ref.property;
+  var _column$extraParams = column.extraParams,
+      onSelect = _column$extraParams.onSelect,
+      selectVariant = _column$extraParams.selectVariant,
+      allRowsSelected = _column$extraParams.allRowsSelected,
+      isHeaderSelectDisabled = _column$extraParams.isHeaderSelectDisabled;
+  var extraData = {
+    rowIndex: rowIndex,
+    columnIndex: columnIndex,
+    column: column,
+    property: property
+  };
+
+  if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect && !rowData.fullWidth) {
     return {
-        className: css(styles$1.tableCheck),
-        component: 'td',
-        isVisible: !rowData || !rowData.fullWidth,
-        children: (React__namespace.createElement(SelectColumn, Object.assign({}, customProps, { selectVariant: selectVariant, onSelect: selectClick, name: selectName }), label))
+      component: 'td',
+      isVisible: true
     };
+  }
+
+  var rowId = rowIndex !== undefined ? rowIndex : -1;
+  /**
+   * @param {React.FormEvent} event - React form event
+   */
+
+  function selectClick(event) {
+    var selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected; // tslint:disable-next-line:no-unused-expression
+
+    onSelect && onSelect(event, selected, rowId, rowData, extraData);
+  }
+
+  var customProps = Object.assign(Object.assign(Object.assign({}, rowId !== -1 ? {
+    checked: rowData && !!rowData.selected,
+    'aria-label': "Select row " + rowIndex
+  } : {
+    checked: allRowsSelected,
+    'aria-label': 'Select all rows'
+  }), rowData && (rowData.disableCheckbox || rowData.disableSelection) && {
+    disabled: true,
+    className: checkStyles.checkInput
+  }), !rowData && isHeaderSelectDisabled && {
+    disabled: true
+  });
+  var selectName = 'check-all';
+
+  if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
+    selectName = "checkrow" + rowIndex;
+  } else if (rowId !== -1) {
+    selectName = 'radioGroup';
+  }
+
+  return {
+    className: css(styles$1.tableCheck),
+    component: 'td',
+    isVisible: !rowData || !rowData.fullWidth,
+    children: React__namespace.createElement(SelectColumn, Object.assign({}, customProps, {
+      selectVariant: selectVariant,
+      onSelect: selectClick,
+      name: selectName
+    }), label)
+  };
 };
 
-const AngleDownIconConfig = {
+var AngleDownIconConfig = {
   name: 'AngleDownIcon',
   height: 512,
   width: 320,
   svgPath: 'M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
-
-const AngleDownIcon = createIcon$1(AngleDownIconConfig);
-
+var AngleDownIcon = createIcon(AngleDownIconConfig);
 var AngleDownIcon$1 = AngleDownIcon;
 
-const CollapseColumn = (_a) => {
-    var { className = '', children = null, isOpen, onToggle } = _a, props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        isOpen !== undefined && (React__namespace.createElement(Button.Button, Object.assign({ className: css(className, isOpen && styles$1.modifiers.expanded) }, props, { variant: "plain", "aria-label": props['aria-label'] || 'Details', onClick: onToggle, "aria-expanded": isOpen }),
-            React__namespace.createElement("div", { className: css(styles$1.tableToggleIcon) },
-                React__namespace.createElement(AngleDownIcon$1, null)))),
-        children));
+var CollapseColumn = function CollapseColumn(_a) {
+  var _a$className = _a.className,
+      className = _a$className === void 0 ? '' : _a$className,
+      _a$children = _a.children,
+      children = _a$children === void 0 ? null : _a$children,
+      isOpen = _a.isOpen,
+      onToggle = _a.onToggle,
+      props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
+
+  return React__namespace.createElement(React__namespace.Fragment, null, isOpen !== undefined && React__namespace.createElement(Button.Button, Object.assign({
+    className: css(className, isOpen && styles$1.modifiers.expanded)
+  }, props, {
+    variant: "plain",
+    "aria-label": props['aria-label'] || 'Details',
+    onClick: onToggle,
+    "aria-expanded": isOpen
+  }), React__namespace.createElement("div", {
+    className: css(styles$1.tableToggleIcon)
+  }, React__namespace.createElement(AngleDownIcon$1, null))), children);
 };
 CollapseColumn.displayName = 'CollapseColumn';
 
-const collapsible = (value, { rowIndex, columnIndex, rowData, column, property }) => {
-    const { extraParams: { onCollapse, rowLabeledBy = 'simple-node', expandId = 'expand-toggle', allRowsExpanded, collapseAllAriaLabel } } = column;
-    const extraData = {
-        rowIndex,
-        columnIndex,
-        column,
-        property
-    };
-    const rowId = rowIndex !== undefined ? rowIndex : -1;
-    const customProps = Object.assign({}, (rowId !== -1
-        ? {
-            isOpen: rowData === null || rowData === void 0 ? void 0 : rowData.isOpen,
-            'aria-labelledby': `${rowLabeledBy}${rowId} ${expandId}${rowId}`
-        }
-        : {
-            isOpen: allRowsExpanded,
-            'aria-label': collapseAllAriaLabel || 'Expand all rows'
-        }));
-    /**
-     * @param {React.MouseEvent} event - Mouse event
-     */
-    function onToggle(event) {
-        const open = rowData ? !rowData.isOpen : !allRowsExpanded;
-        // tslint:disable-next-line:no-unused-expression
-        onCollapse && onCollapse(event, rowIndex, open, rowData, extraData);
-    }
+var collapsible = function collapsible(value, _ref) {
+  var rowIndex = _ref.rowIndex,
+      columnIndex = _ref.columnIndex,
+      rowData = _ref.rowData,
+      column = _ref.column,
+      property = _ref.property;
+  var _column$extraParams = column.extraParams,
+      onCollapse = _column$extraParams.onCollapse,
+      _column$extraParams$r = _column$extraParams.rowLabeledBy,
+      rowLabeledBy = _column$extraParams$r === void 0 ? 'simple-node' : _column$extraParams$r,
+      _column$extraParams$e = _column$extraParams.expandId,
+      expandId = _column$extraParams$e === void 0 ? 'expand-toggle' : _column$extraParams$e,
+      allRowsExpanded = _column$extraParams.allRowsExpanded,
+      collapseAllAriaLabel = _column$extraParams.collapseAllAriaLabel;
+  var extraData = {
+    rowIndex: rowIndex,
+    columnIndex: columnIndex,
+    column: column,
+    property: property
+  };
+  var rowId = rowIndex !== undefined ? rowIndex : -1;
+  var customProps = Object.assign({}, rowId !== -1 ? {
+    isOpen: rowData === null || rowData === void 0 ? void 0 : rowData.isOpen,
+    'aria-labelledby': "" + rowLabeledBy + rowId + " " + expandId + rowId
+  } : {
+    isOpen: allRowsExpanded,
+    'aria-label': collapseAllAriaLabel || 'Expand all rows'
+  });
+  /**
+   * @param {React.MouseEvent} event - Mouse event
+   */
+
+  function onToggle(event) {
+    var open = rowData ? !rowData.isOpen : !allRowsExpanded; // tslint:disable-next-line:no-unused-expression
+
+    onCollapse && onCollapse(event, rowIndex, open, rowData, extraData);
+  }
+
+  return {
+    className: ((rowData === null || rowData === void 0 ? void 0 : rowData.isOpen) !== undefined || rowId === -1) && css(styles$1.tableToggle),
+    isVisible: !(rowData === null || rowData === void 0 ? void 0 : rowData.fullWidth),
+    children: React__namespace.createElement(CollapseColumn, Object.assign({
+      "aria-labelledby": "" + rowLabeledBy + rowId + " " + expandId + rowId,
+      onToggle: onToggle,
+      id: expandId + rowId
+    }, customProps), value)
+  };
+};
+
+var cellWidth = function cellWidth(width) {
+  return function () {
     return {
-        className: ((rowData === null || rowData === void 0 ? void 0 : rowData.isOpen) !== undefined || rowId === -1) && css(styles$1.tableToggle),
-        isVisible: !(rowData === null || rowData === void 0 ? void 0 : rowData.fullWidth),
-        children: (React__namespace.createElement(CollapseColumn, Object.assign({ "aria-labelledby": `${rowLabeledBy}${rowId} ${expandId}${rowId}`, onToggle: onToggle, id: expandId + rowId }, customProps), value))
+      className: css(styles$1.modifiers[typeof width === 'number' ? "width_" + width : "width" + capitalize(width)])
     };
+  };
 };
 
-const cellWidth = (width) => () => ({
-    className: css(styles$1.modifiers[typeof width === 'number' ? `width_${width}` : `width${capitalize(width)}`])
-});
-
-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;
+var visibilityModifiers = ['hidden', 'hiddenOnSm', 'hiddenOnMd', 'hiddenOnLg', 'hiddenOnXl', 'hiddenOn_2xl', 'visibleOnSm', 'visibleOnMd', 'visibleOnLg', 'visibleOnXl', 'visibleOn_2xl'];
+var Visibility = visibilityModifiers.filter(function (key) {
+  return styles$1.modifiers[key];
+}).reduce(function (acc, curr) {
+  var key2 = curr.replace('_2xl', '2Xl');
+  acc[key2] = styles$1.modifiers[curr];
+  return acc;
 }, {});
-const classNames = (...classes) => () => ({
-    className: css(...classes)
-});
+var classNames = function classNames() {
+  var _arguments = arguments;
+  return function () {
+    return {
+      className: css.apply(void 0, [].slice.call(_arguments))
+    };
+  };
+};
 
 /**
  * merge-props.js
@@ -806,513 +1164,741 @@ const classNames = (...classes) => () => ({
 /**
  * @param {any} props - Props
  */
-function mergeProps(...props) {
-    const firstProps = props[0];
-    const restProps = props.slice(1);
-    if (!restProps.length) {
-        return mergeWith__default["default"]({}, firstProps);
+
+function mergeProps() {
+  var props = [].slice.call(arguments);
+  var firstProps = props[0];
+  var restProps = props.slice(1);
+
+  if (!restProps.length) {
+    return mergeWith__default["default"]({}, firstProps);
+  } // Avoid mutating the first prop collection
+
+
+  return mergeWith__default["default"].apply(void 0, [mergeWith__default["default"]({}, firstProps)].concat(restProps, [function (a, b, key) {
+    if (key === 'children') {
+      if (a && b) {
+        // compose the two
+        return React__namespace.cloneElement(a, {
+          children: b
+        });
+      } // Children have to be merged in reverse order for Reactabular
+      // logic to work.
+
+
+      return Object.assign(Object.assign({}, b), a);
     }
-    // Avoid mutating the first prop collection
-    return mergeWith__default["default"](mergeWith__default["default"]({}, firstProps), ...restProps, (a, b, key) => {
-        if (key === 'children') {
-            if (a && b) {
-                // compose the two
-                return React__namespace.cloneElement(a, {
-                    children: b
-                });
-            }
-            // Children have to be merged in reverse order for Reactabular
-            // logic to work.
-            return Object.assign(Object.assign({}, b), a);
-        }
-        if (key === 'className') {
-            // Process class names through classNames to merge properly
-            // as a string.
-            return css(a, b);
-        }
-        return undefined;
-    });
+
+    if (key === 'className') {
+      // Process class names through classNames to merge properly
+      // as a string.
+      return css(a, b);
+    }
+
+    return undefined;
+  }]));
 }
 
-const ThBase = (_a) => {
-    var { children, className, component = 'th', dataLabel, scope = 'col', textCenter = false, sort = null, modifier, select = null, expand: collapse = null, tooltip = '', onMouseEnter: onMouseEnterProp = () => { }, width, visibility, innerRef, info: infoProps, isStickyColumn = false, hasRightBorder = false, stickyMinWidth = '120px', stickyLeftOffset, isSubheader = false } = _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__namespace.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
-                    }
-                }
-            });
+var ThBase = function ThBase(_a) {
+  var children = _a.children,
+      className = _a.className,
+      _a$component = _a.component,
+      component = _a$component === void 0 ? 'th' : _a$component,
+      dataLabel = _a.dataLabel,
+      _a$scope = _a.scope,
+      scope = _a$scope === void 0 ? 'col' : _a$scope,
+      _a$textCenter = _a.textCenter,
+      textCenter = _a$textCenter === void 0 ? false : _a$textCenter,
+      _a$sort = _a.sort,
+      sort = _a$sort === void 0 ? null : _a$sort,
+      modifier = _a.modifier,
+      _a$select = _a.select,
+      select = _a$select === void 0 ? null : _a$select,
+      _a$expand = _a.expand,
+      collapse = _a$expand === void 0 ? null : _a$expand,
+      _a$tooltip = _a.tooltip,
+      tooltip = _a$tooltip === void 0 ? '' : _a$tooltip,
+      _a$onMouseEnter = _a.onMouseEnter,
+      onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
+      width = _a.width,
+      visibility = _a.visibility,
+      innerRef = _a.innerRef,
+      infoProps = _a.info,
+      _a$isStickyColumn = _a.isStickyColumn,
+      isStickyColumn = _a$isStickyColumn === void 0 ? false : _a$isStickyColumn,
+      _a$hasRightBorder = _a.hasRightBorder,
+      hasRightBorder = _a$hasRightBorder === void 0 ? false : _a$hasRightBorder,
+      _a$stickyMinWidth = _a.stickyMinWidth,
+      stickyMinWidth = _a$stickyMinWidth === void 0 ? '120px' : _a$stickyMinWidth,
+      stickyLeftOffset = _a.stickyLeftOffset,
+      _a$isSubheader = _a.isSubheader,
+      isSubheader = _a$isSubheader === void 0 ? false : _a$isSubheader,
+      props = __rest(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "expand", "tooltip", "onMouseEnter", "width", "visibility", "innerRef", "info", "isStickyColumn", "hasRightBorder", "stickyMinWidth", "stickyLeftOffset", "isSubheader"]);
+
+  var _React$useState = React__namespace.useState(false),
+      showTooltip = _React$useState[0],
+      setShowTooltip = _React$useState[1];
+
+  var onMouseEnter = function onMouseEnter(event) {
+    if (event.target.offsetWidth < event.target.scrollWidth) {
+      !showTooltip && setShowTooltip(true);
+    } else {
+      showTooltip && setShowTooltip(false);
+    }
+
+    onMouseEnterProp(event);
+  };
+
+  var sortParams = null;
+
+  if (sort) {
+    if (sort.isFavorites) {
+      sortParams = sortableFavorites({
+        onSort: sort === null || sort === void 0 ? void 0 : sort.onSort,
+        columnIndex: sort.columnIndex,
+        sortBy: sort.sortBy
+      })();
+    } else {
+      sortParams = sortable(children, {
+        columnIndex: sort.columnIndex,
+        column: {
+          extraParams: {
+            sortBy: sort.sortBy,
+            onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
+          }
         }
+      });
     }
-    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;
+  }
+
+  var selectParams = select ? selectable(children, {
+    column: {
+      extraParams: {
+        onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
+        selectVariant: 'checkbox',
+        allRowsSelected: select.isSelected,
+        isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
+      }
     }
-    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__namespace.createElement(MergedComponent, Object.assign({ "data-label": dataLabel, onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp, scope: component === 'th' && children ? scope : null, ref: innerRef, className: css(className, textCenter && styles$1.modifiers.center, isSubheader && styles$1.tableSubhead, isStickyColumn && styles.tableStickyColumn, hasRightBorder && styles.modifiers.borderRight, modifier && styles$1.modifiers[modifier], mergedClassName) }, mergedProps, props, (isStickyColumn && {
-        style: Object.assign({ '--pf-c-table__sticky-column--MinWidth': stickyMinWidth ? stickyMinWidth : undefined, '--pf-c-table__sticky-column--Left': stickyLeftOffset ? stickyLeftOffset : undefined }, props.style)
-    })), transformedChildren));
-    const canDefault = tooltip === '' ? typeof children === 'string' : true;
-    return tooltip !== null && canDefault && showTooltip ? (React__namespace.createElement(Tooltip.Tooltip, { content: tooltip || (tooltip === '' && children), isVisible: true }, cell)) : (cell);
+  }) : null;
+  var collapseParams = collapse ? collapsible(children, {
+    column: {
+      extraParams: {
+        onCollapse: collapse === null || collapse === void 0 ? void 0 : collapse.onToggle,
+        allRowsExpanded: !collapse.areAllExpanded,
+        collapseAllAriaLabel: ''
+      }
+    }
+  }) : null;
+  var widthParams = width ? cellWidth(width)() : null;
+  var visibilityParams = visibility ? classNames.apply(void 0, visibility.map(function (vis) {
+    return Visibility[vis];
+  }))() : null;
+  var transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children; // info can wrap other transformedChildren
+
+  var infoParams = null;
+
+  if (infoProps) {
+    infoParams = info(infoProps)(transformedChildren);
+    transformedChildren = infoParams.children;
+  }
+
+  var merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
+
+  var _merged$className = merged.className,
+      mergedClassName = _merged$className === void 0 ? '' : _merged$className,
+      _merged$component = merged.component,
+      MergedComponent = _merged$component === void 0 ? component : _merged$component,
+      mergedProps = __rest(merged, ["children", "isVisible", "className", "component"]);
+
+  var cell = React__namespace.createElement(MergedComponent, Object.assign({
+    "data-label": dataLabel,
+    onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp,
+    scope: component === 'th' && children ? scope : null,
+    ref: innerRef,
+    className: css(className, textCenter && styles$1.modifiers.center, isSubheader && styles$1.tableSubhead, isStickyColumn && styles.tableStickyColumn, hasRightBorder && styles.modifiers.borderRight, modifier && styles$1.modifiers[modifier], mergedClassName)
+  }, mergedProps, props, isStickyColumn && {
+    style: Object.assign({
+      '--pf-c-table__sticky-column--MinWidth': stickyMinWidth ? stickyMinWidth : undefined,
+      '--pf-c-table__sticky-column--Left': stickyLeftOffset ? stickyLeftOffset : undefined
+    }, props.style)
+  }), transformedChildren);
+  var canDefault = tooltip === '' ? typeof children === 'string' : true;
+  return tooltip !== null && canDefault && showTooltip ? React__namespace.createElement(Tooltip.Tooltip, {
+    content: tooltip || tooltip === '' && children,
+    isVisible: true
+  }, cell) : cell;
 };
-const Th = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(ThBase, Object.assign({}, props, { innerRef: ref }))));
+
+var Th = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.createElement(ThBase, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
 Th.displayName = 'Th';
 
-class ActionsColumn extends React__namespace.Component {
-    constructor(props) {
-        super(props);
-        this.toggleRef = React__namespace.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__namespace.createElement(KebabToggle.KebabToggle, { isDisabled: isDisabled, onToggle: this.onToggle }));
-        return (React__namespace.createElement(React__namespace.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__namespace.createElement(Button.Button, Object.assign({ onClick: event => this.onClick(event, onClick) }, props, { isDisabled: isDisabled, key: itemKey || `outside_dropdown_${key}`, "data-key": itemKey || `outside_dropdown_${key}` }), title)) : (React__namespace.cloneElement(title, Object.assign({ onClick, isDisabled }, props)));
-            }),
-            React__namespace.createElement(Dropdown.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__namespace.createElement(DropdownSeparator.DropdownSeparator, Object.assign({}, props, { key: itemKey || key, "data-key": itemKey || key }))) : (React__namespace.createElement(DropdownItem.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));
-    }
-}
+var ActionsColumn = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(ActionsColumn, _React$Component);
+
+  function ActionsColumn(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.toggleRef = React__namespace.createRef();
+
+    _this.onToggle = function (isOpen) {
+      _this.setState({
+        isOpen: isOpen
+      });
+    };
+
+    _this.onClick = function (event, onClick) {
+      var _this$props = _this.props,
+          rowData = _this$props.rowData,
+          extraData = _this$props.extraData; // Only prevent default if onClick is provided.  This allows href support.
+
+      if (onClick) {
+        event.preventDefault(); // tslint:disable-next-line:no-unused-expression
+
+        onClick(event, extraData && extraData.rowIndex, rowData, extraData);
+      }
+    };
+
+    _this.state = {
+      isOpen: false
+    };
+    return _this;
+  }
+
+  var _proto = ActionsColumn.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var isOpen = this.state.isOpen;
+    var _this$props2 = this.props,
+        items = _this$props2.items,
+        children = _this$props2.children,
+        dropdownPosition = _this$props2.dropdownPosition,
+        dropdownDirection = _this$props2.dropdownDirection,
+        isDisabled = _this$props2.isDisabled,
+        rowData = _this$props2.rowData,
+        actionsToggle = _this$props2.actionsToggle;
+    var actionsToggleClone = actionsToggle ? actionsToggle({
+      onToggle: this.onToggle,
+      isOpen: isOpen,
+      isDisabled: isDisabled
+    }) : React__namespace.createElement(KebabToggle.KebabToggle, {
+      isDisabled: isDisabled,
+      onToggle: this.onToggle
+    });
+    return React__namespace.createElement(React__namespace.Fragment, null, items.filter(function (item) {
+      return item.isOutsideDropdown;
+    }) // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    .map(function (_a, key) {
+      var title = _a.title,
+          itemKey = _a.itemKey,
+          _onClick = _a.onClick,
+          props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
+
+      return typeof title === 'string' ? React__namespace.createElement(Button.Button, Object.assign({
+        onClick: function onClick(event) {
+          return _this2.onClick(event, _onClick);
+        }
+      }, props, {
+        isDisabled: isDisabled,
+        key: itemKey || "outside_dropdown_" + key,
+        "data-key": itemKey || "outside_dropdown_" + key
+      }), title) : React__namespace.cloneElement(title, Object.assign({
+        onClick: _onClick,
+        isDisabled: isDisabled
+      }, props));
+    }), React__namespace.createElement(Dropdown.Dropdown, Object.assign({
+      toggle: actionsToggleClone,
+      position: dropdownPosition,
+      direction: dropdownDirection,
+      isOpen: isOpen,
+      dropdownItems: items.filter(function (item) {
+        return !item.isOutsideDropdown;
+      }).map(function (_a, key) {
+        var title = _a.title,
+            itemKey = _a.itemKey,
+            _onClick2 = _a.onClick,
+            isSeparator = _a.isSeparator,
+            props = __rest(_a, ["title", "itemKey", "onClick", "isSeparator"]);
+
+        return isSeparator ? React__namespace.createElement(DropdownSeparator.DropdownSeparator, Object.assign({}, props, {
+          key: itemKey || key,
+          "data-key": itemKey || key
+        })) : React__namespace.createElement(DropdownItem.DropdownItem, Object.assign({
+          component: "button",
+          onClick: function onClick(event) {
+            _this2.onClick(event, _onClick2);
+
+            _this2.onToggle(!isOpen);
+          }
+        }, props, {
+          key: itemKey || key,
+          "data-key": itemKey || key
+        }), title);
+      }),
+      isPlain: true
+    }, rowData && rowData.actionProps)), children);
+  };
+
+  return ActionsColumn;
+}(React__namespace.Component);
 ActionsColumn.displayName = 'ActionsColumn';
 ActionsColumn.defaultProps = {
-    children: null,
-    items: [],
-    dropdownPosition: dropdownConstants.DropdownPosition.right,
-    dropdownDirection: dropdownConstants.DropdownDirection.down,
-    rowData: {},
-    extraData: {}
+  children: null,
+  items: [],
+  dropdownPosition: dropdownConstants.DropdownPosition.right,
+  dropdownDirection: dropdownConstants.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__namespace.createElement(ActionsColumn, { items: resolvedActions, dropdownPosition: dropdownPosition, dropdownDirection: dropdownDirection, isDisabled: resolvedIsDisabled, rowData: rowData, extraData: extraData, actionsToggle: actionsToggle }, label))
-        }
-        : {};
-    return Object.assign({ className: css(styles$1.tableAction), style: { paddingRight: 0 }, isVisible: true }, renderProps);
+var resolveOrDefault = function resolveOrDefault(resolver, defaultValue, rowData, extraData) {
+  return typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue;
 };
 
-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
-     */
-    function onToggle(event) {
-        // tslint:disable-next-line:no-unused-expression
-        onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
-    }
-    return {
-        className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
-        children: props.isOpen !== undefined && (React__namespace.createElement("button", { type: "button", className: css(styles$1.tableButton), onClick: onToggle, "aria-expanded": props.isOpen, "aria-controls": props.ariaControls },
-            React__namespace.createElement(TableText, null, title)))
+var cellActions = function cellActions(actions, actionResolver, areActionsDisabled) {
+  return function (label, _ref) {
+    var rowData = _ref.rowData,
+        column = _ref.column,
+        rowIndex = _ref.rowIndex,
+        columnIndex = _ref.columnIndex,
+        _ref$column$extraPara = _ref.column.extraParams,
+        dropdownPosition = _ref$column$extraPara.dropdownPosition,
+        dropdownDirection = _ref$column$extraPara.dropdownDirection,
+        actionsToggle = _ref$column$extraPara.actionsToggle,
+        property = _ref.property;
+    var extraData = {
+      rowIndex: rowIndex,
+      columnIndex: columnIndex,
+      column: column,
+      property: property
     };
+    var resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData);
+    var resolvedIsDisabled = resolveOrDefault(areActionsDisabled, rowData && rowData.disableActions, rowData, extraData);
+    var renderProps = resolvedActions && resolvedActions.length > 0 ? {
+      children: React__namespace.createElement(ActionsColumn, {
+        items: resolvedActions,
+        dropdownPosition: dropdownPosition,
+        dropdownDirection: dropdownDirection,
+        isDisabled: resolvedIsDisabled,
+        rowData: rowData,
+        extraData: extraData,
+        actionsToggle: actionsToggle
+      }, label)
+    } : {};
+    return Object.assign({
+      className: css(styles$1.tableAction),
+      style: {
+        paddingRight: 0
+      },
+      isVisible: true
+    }, renderProps);
+  };
+};
+
+var compoundExpand = function compoundExpand(value, _ref) {
+  var rowIndex = _ref.rowIndex,
+      columnIndex = _ref.columnIndex,
+      rowData = _ref.rowData,
+      column = _ref.column,
+      property = _ref.property;
+
+  if (!value) {
+    return null;
+  }
+
+  var title = value.title,
+      props = value.props;
+  var onExpand = column.extraParams.onExpand;
+  var extraData = {
+    rowIndex: rowIndex,
+    columnIndex: columnIndex,
+    column: column,
+    property: property
+  };
+  /**
+   * @param {React.MouseEvent} event - Mouse event
+   */
+
+  function onToggle(event) {
+    // tslint:disable-next-line:no-unused-expression
+    onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
+  }
+
+  return {
+    className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
+    children: props.isOpen !== undefined && React__namespace.createElement("button", {
+      type: "button",
+      className: css(styles$1.tableButton),
+      onClick: onToggle,
+      "aria-expanded": props.isOpen,
+      "aria-controls": props.ariaControls
+    }, React__namespace.createElement(TableText, null, title))
+  };
 };
 
-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__namespace.createElement(Button.Button, Object.assign({ variant: "plain", className: className, type: "button", "aria-label": isFavorited ? 'Starred' : 'Not starred', onClick: onFavorite }, ariaProps, props),
-        React__namespace.createElement(StarIcon$1, { "aria-hidden": true })));
+var FavoritesCell = function FavoritesCell(_a) {
+  var _a$className = _a.className,
+      className = _a$className === void 0 ? '' : _a$className,
+      onFavorite = _a.onFavorite,
+      isFavorited = _a.isFavorited,
+      rowIndex = _a.rowIndex,
+      props = __rest(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
+
+  var ariaProps = rowIndex === undefined ? {} : {
+    id: "favorites-button-" + rowIndex,
+    'aria-labelledby': "favorites-button-" + rowIndex
+  };
+  return React__namespace.createElement(Button.Button, Object.assign({
+    variant: "plain",
+    className: className,
+    type: "button",
+    "aria-label": isFavorited ? 'Starred' : 'Not starred',
+    onClick: onFavorite
+  }, ariaProps, props), React__namespace.createElement(StarIcon$1, {
+    "aria-hidden": true
+  }));
 };
 FavoritesCell.displayName = 'FavoritesCell';
 
-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 || {};
+var favoritable = function favoritable(value, _ref) {
+  var rowIndex = _ref.rowIndex,
+      columnIndex = _ref.columnIndex,
+      rowData = _ref.rowData,
+      column = _ref.column,
+      property = _ref.property;
+  var onFavorite = column.extraParams.onFavorite;
+  var extraData = {
+    rowIndex: rowIndex,
+    columnIndex: columnIndex,
+    column: column,
+    property: property
+  }; // this is a child row which should not display the favorites icon
+
+  if (rowData && rowData.hasOwnProperty('parent') && !rowData.fullWidth) {
     return {
-        className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
-        isVisible: !rowData || !rowData.fullWidth,
-        children: (React__namespace.createElement(FavoritesCell, Object.assign({ rowIndex: rowIndex, onFavorite: favoritesClick, isFavorited: rowData && rowData.favorited }, additionalProps)))
+      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);
+  }
+
+  var additionalProps = rowData.favoritesProps || {};
+  return {
+    className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
+    isVisible: !rowData || !rowData.fullWidth,
+    children: React__namespace.createElement(FavoritesCell, Object.assign({
+      rowIndex: rowIndex,
+      onFavorite: favoritesClick,
+      isFavorited: rowData && rowData.favorited
+    }, additionalProps))
+  };
 };
 
-const GripVerticalIconConfig = {
+var GripVerticalIconConfig = {
   name: 'GripVerticalIcon',
   height: 512,
   width: 320,
   svgPath: 'M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
-
-const GripVerticalIcon = createIcon$1(GripVerticalIconConfig);
-
+var GripVerticalIcon = createIcon(GripVerticalIconConfig);
 var GripVerticalIcon$1 = GripVerticalIcon;
 
-const DraggableCell = (_a) => {
-    var { className, onClick, 'aria-label': ariaLabel, id } = _a, props = __rest(_a, ["className", "onClick", 'aria-label', "id"]);
-    return (React__namespace.createElement(Button.Button, Object.assign({ id: id, variant: "plain", className: className, type: "button", "aria-label": ariaLabel || `Draggable row draggable button`, onClick: onClick }, props),
-        React__namespace.createElement(GripVerticalIcon$1, { "aria-hidden": true })));
+var DraggableCell = function DraggableCell(_a) {
+  var className = _a.className,
+      onClick = _a.onClick,
+      ariaLabel = _a['aria-label'],
+      id = _a.id,
+      props = __rest(_a, ["className", "onClick", 'aria-label', "id"]);
+
+  return React__namespace.createElement(Button.Button, Object.assign({
+    id: id,
+    variant: "plain",
+    className: className,
+    type: "button",
+    "aria-label": ariaLabel || "Draggable row draggable button",
+    onClick: onClick
+  }, props), React__namespace.createElement(GripVerticalIcon$1, {
+    "aria-hidden": true
+  }));
 };
 DraggableCell.displayName = 'DraggableCell';
 
-const draggable = (value, { rowData }) => {
-    const { id } = rowData;
-    return {
-        className: '',
-        children: React__namespace.createElement(DraggableCell, { id: id })
-    };
+var draggable = function draggable(value, _ref) {
+  var rowData = _ref.rowData;
+  var id = rowData.id;
+  return {
+    className: '',
+    children: React__namespace.createElement(DraggableCell, {
+      id: id
+    })
+  };
 };
 
-const EllipsisHIconConfig = {
+var EllipsisHIconConfig = {
   name: 'EllipsisHIcon',
   height: 512,
   width: 512,
   svgPath: 'M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
-
-const EllipsisHIcon = createIcon$1(EllipsisHIconConfig);
-
+var 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__namespace.createElement("div", { className: css(stylesTreeView.tableTreeViewText), key: "tree-view-text" },
-        icon && (React__namespace.createElement("span", { className: css(stylesTreeView.tableTreeViewIcon), key: "tree-view-text-icon" }, icon)),
-        React__namespace.createElement("span", { className: "pf-c-table__text", key: "table-text" }, content)));
-    const onChange = (isChecked, event) => {
-        onCheckChange(event, isChecked, rowIndex, content, rowData);
+var treeRow = function treeRow(onCollapse, onCheckChange, onToggleRowDetails) {
+  return function (value, _ref) {
+    var rowIndex = _ref.rowIndex,
+        rowData = _ref.rowData;
+    var _rowData$props = rowData.props,
+        isExpanded = _rowData$props.isExpanded,
+        isDetailsExpanded = _rowData$props.isDetailsExpanded,
+        level = _rowData$props['aria-level'],
+        setsize = _rowData$props['aria-setsize'],
+        toggleAriaLabel = _rowData$props.toggleAriaLabel,
+        checkAriaLabel = _rowData$props.checkAriaLabel,
+        showDetailsAriaLabel = _rowData$props.showDetailsAriaLabel,
+        isChecked = _rowData$props.isChecked,
+        checkboxId = _rowData$props.checkboxId,
+        icon = _rowData$props.icon;
+    var content = value.title || value;
+    var text = React__namespace.createElement("div", {
+      className: css(stylesTreeView.tableTreeViewText),
+      key: "tree-view-text"
+    }, icon && React__namespace.createElement("span", {
+      className: css(stylesTreeView.tableTreeViewIcon),
+      key: "tree-view-text-icon"
+    }, icon), React__namespace.createElement("span", {
+      className: "pf-c-table__text",
+      key: "table-text"
+    }, content));
+
+    var onChange = function onChange(isChecked, event) {
+      onCheckChange(event, isChecked, rowIndex, content, rowData);
     };
+
     return {
-        component: 'th',
-        className: 'pf-c-table__tree-view-title-cell',
-        children: level !== undefined ? (React__namespace.createElement("div", { className: css(stylesTreeView.tableTreeViewMain) },
-            setsize > 0 && (React__namespace.createElement("span", { className: css(stylesTreeView.tableToggle), key: "table-toggle" },
-                React__namespace.createElement(reactCore.Button, { variant: "plain", onClick: 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__namespace.createElement("div", { className: css(stylesTreeView.tableToggleIcon) },
-                        React__namespace.createElement(AngleDownIcon$1, { "aria-hidden": "true" }))))),
-            !!onCheckChange && (React__namespace.createElement("span", { className: css(stylesTreeView.tableCheck), key: "table-check" },
-                React__namespace.createElement("label", { htmlFor: checkboxId || `checkbox_${rowIndex}` },
-                    React__namespace.createElement(reactCore.Checkbox, { id: checkboxId || `checkbox_${rowIndex}`, "aria-label": checkAriaLabel || `Row ${rowIndex} checkbox`, isChecked: isChecked, onChange: onChange })))),
-            text,
-            !!onToggleRowDetails && (React__namespace.createElement("span", { className: css(stylesTreeView.tableTreeViewDetailsToggle), key: "view-details-toggle" },
-                React__namespace.createElement(reactCore.Button, { variant: "plain", "aria-expanded": isDetailsExpanded, "aria-label": showDetailsAriaLabel || 'Show row details', onClick: event => onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData) },
-                    React__namespace.createElement("span", { className: "pf-c-table__details-toggle-icon" },
-                        React__namespace.createElement(EllipsisHIcon$1, { "aria-hidden": true }))))))) : (text)
+      component: 'th',
+      className: 'pf-c-table__tree-view-title-cell',
+      children: level !== undefined ? React__namespace.createElement("div", {
+        className: css(stylesTreeView.tableTreeViewMain)
+      }, setsize > 0 && React__namespace.createElement("span", {
+        className: css(stylesTreeView.tableToggle),
+        key: "table-toggle"
+      }, React__namespace.createElement(reactCore.Button, {
+        variant: "plain",
+        onClick: function onClick(event) {
+          return onCollapse && onCollapse(event, rowIndex, content, rowData);
+        },
+        className: css(isExpanded && styles$1.modifiers.expanded),
+        "aria-expanded": isExpanded,
+        "aria-label": toggleAriaLabel || (isExpanded ? 'Collapse' : 'Expand') + " row " + rowIndex
+      }, React__namespace.createElement("div", {
+        className: css(stylesTreeView.tableToggleIcon)
+      }, React__namespace.createElement(AngleDownIcon$1, {
+        "aria-hidden": "true"
+      })))), !!onCheckChange && React__namespace.createElement("span", {
+        className: css(stylesTreeView.tableCheck),
+        key: "table-check"
+      }, React__namespace.createElement("label", {
+        htmlFor: checkboxId || "checkbox_" + rowIndex
+      }, React__namespace.createElement(reactCore.Checkbox, {
+        id: checkboxId || "checkbox_" + rowIndex,
+        "aria-label": checkAriaLabel || "Row " + rowIndex + " checkbox",
+        isChecked: isChecked,
+        onChange: onChange
+      }))), text, !!onToggleRowDetails && React__namespace.createElement("span", {
+        className: css(stylesTreeView.tableTreeViewDetailsToggle),
+        key: "view-details-toggle"
+      }, React__namespace.createElement(reactCore.Button, {
+        variant: "plain",
+        "aria-expanded": isDetailsExpanded,
+        "aria-label": showDetailsAriaLabel || 'Show row details',
+        onClick: function onClick(event) {
+          return onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData);
+        }
+      }, React__namespace.createElement("span", {
+        className: "pf-c-table__details-toggle-icon"
+      }, React__namespace.createElement(EllipsisHIcon$1, {
+        "aria-hidden": true
+      }))))) : text
     };
+  };
 };
 
-const TdBase = (_a) => {
-    var { children, className, isActionCell = false, component = 'td', dataLabel, textCenter = false, modifier, select = null, actions = null, expand = null, treeRow: treeRowProp = null, compoundExpand: compoundExpandProp = null, noPadding, width, visibility, innerRef, favorites = null, draggableRow: draggableRowProp = null } = _a, props = __rest(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow"]);
-    const selectParams = select
-        ? selectable(children, {
-            rowIndex: select.rowIndex,
-            rowData: {
-                selected: select.isSelected,
-                disableSelection: select === null || select === void 0 ? void 0 : select.disable,
-                props: select === null || select === void 0 ? void 0 : select.props
-            },
-            column: {
-                extraParams: {
-                    onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
-                    selectVariant: select.variant || 'checkbox'
-                }
-            }
-        })
-        : null;
-    const favoriteParams = favorites
-        ? favoritable(null, {
-            rowIndex: favorites === null || favorites === void 0 ? void 0 : favorites.rowIndex,
-            rowData: {
-                favorited: favorites.isFavorited,
-                favoritesProps: favorites === null || favorites === void 0 ? void 0 : favorites.props
-            },
-            column: {
-                extraParams: {
-                    onFavorite: favorites === null || favorites === void 0 ? void 0 : favorites.onFavorite
-                }
-            }
-        })
-        : null;
-    const draggableParams = draggableRowProp !== null
-        ? draggable(null, {
-            rowData: {
-                id: draggableRowProp.id
-            }
-        })
-        : null;
-    const actionParamsFunc = actions ? cellActions(actions.items, null, null) : null;
-    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
-            },
-            column: {
-                extraParams: {
-                    dropdownPosition: actions === null || actions === void 0 ? void 0 : actions.dropdownPosition,
-                    dropdownDirection: actions === null || actions === void 0 ? void 0 : actions.dropdownDirection,
-                    actionsToggle: actions === null || actions === void 0 ? void 0 : actions.actionsToggle
-                }
-            }
-        })
-        : null;
-    const expandableParams = expand !== null
-        ? collapsible(null, {
-            rowIndex: expand.rowIndex,
-            columnIndex: expand === null || expand === void 0 ? void 0 : expand.columnIndex,
-            rowData: {
-                isOpen: expand.isExpanded
-            },
-            column: {
-                extraParams: {
-                    onCollapse: expand === null || expand === void 0 ? void 0 : expand.onToggle
-                }
-            }
-        })
-        : null;
-    const compoundParams = compoundExpandProp !== null
-        ? compoundExpand({
-            title: children,
-            props: {
-                isOpen: compoundExpandProp.isExpanded
-            }
-        }, {
-            column: {
-                extraParams: {
-                    onExpand: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.onToggle
-                }
-            }
-        })
-        : null;
-    const widthParams = width ? cellWidth(width)() : null;
-    const visibilityParams = visibility
-        ? classNames(...visibility.map((vis) => Visibility[vis]))()
-        : null;
-    const treeRowParams = treeRowProp !== null
-        ? treeRow(treeRowProp.onCollapse, treeRowProp.onCheckChange, treeRowProp.onToggleRowDetails)({
-            title: children
-        }, {
-            rowIndex: treeRowProp.rowIndex,
-            rowData: {
-                props: treeRowProp.props
-            }
-        })
-        : null;
-    const merged = mergeProps(selectParams, actionParams, expandableParams, compoundParams, widthParams, visibilityParams, favoriteParams, treeRowParams, draggableParams);
-    const { 
-    // selectable adds this but we don't want it
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isVisible = null, children: mergedChildren = null, className: mergedClassName = '', component: MergedComponent = component } = merged, mergedProps = __rest(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__namespace.createElement(MergedComponent, Object.assign({}, (!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));
-};
-const Td = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TdBase, Object.assign({}, props, { innerRef: ref }))));
-Td.displayName = 'Td';
-
-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';
-        case IconSize.xl:
-            return '3em';
-        default:
-            return '1em';
+var TdBase = function TdBase(_a) {
+  var children = _a.children,
+      className = _a.className,
+      _a$isActionCell = _a.isActionCell,
+      isActionCell = _a$isActionCell === void 0 ? false : _a$isActionCell,
+      _a$component = _a.component,
+      component = _a$component === void 0 ? 'td' : _a$component,
+      dataLabel = _a.dataLabel,
+      _a$textCenter = _a.textCenter,
+      textCenter = _a$textCenter === void 0 ? false : _a$textCenter,
+      modifier = _a.modifier,
+      _a$select = _a.select,
+      select = _a$select === void 0 ? null : _a$select,
+      _a$actions = _a.actions,
+      actions = _a$actions === void 0 ? null : _a$actions,
+      _a$expand = _a.expand,
+      expand = _a$expand === void 0 ? null : _a$expand,
+      _a$treeRow = _a.treeRow,
+      treeRowProp = _a$treeRow === void 0 ? null : _a$treeRow,
+      _a$compoundExpand = _a.compoundExpand,
+      compoundExpandProp = _a$compoundExpand === void 0 ? null : _a$compoundExpand,
+      noPadding = _a.noPadding,
+      width = _a.width,
+      visibility = _a.visibility,
+      innerRef = _a.innerRef,
+      _a$favorites = _a.favorites,
+      favorites = _a$favorites === void 0 ? null : _a$favorites,
+      _a$draggableRow = _a.draggableRow,
+      draggableRowProp = _a$draggableRow === void 0 ? null : _a$draggableRow,
+      props = __rest(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow"]);
+
+  var selectParams = select ? selectable(children, {
+    rowIndex: select.rowIndex,
+    rowData: {
+      selected: select.isSelected,
+      disableSelection: select === null || select === void 0 ? void 0 : select.disable,
+      props: select === null || select === void 0 ? void 0 : select.props
+    },
+    column: {
+      extraParams: {
+        onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
+        selectVariant: select.variant || 'checkbox'
+      }
+    }
+  }) : null;
+  var favoriteParams = favorites ? favoritable(null, {
+    rowIndex: favorites === null || favorites === void 0 ? void 0 : favorites.rowIndex,
+    rowData: {
+      favorited: favorites.isFavorited,
+      favoritesProps: favorites === null || favorites === void 0 ? void 0 : favorites.props
+    },
+    column: {
+      extraParams: {
+        onFavorite: favorites === null || favorites === void 0 ? void 0 : favorites.onFavorite
+      }
+    }
+  }) : null;
+  var draggableParams = draggableRowProp !== null ? draggable(null, {
+    rowData: {
+      id: draggableRowProp.id
+    }
+  }) : null;
+  var actionParamsFunc = actions ? cellActions(actions.items, null, null) : null;
+  var actionParams = actionParamsFunc ? actionParamsFunc(null, {
+    rowIndex: actions === null || actions === void 0 ? void 0 : actions.rowIndex,
+    rowData: {
+      disableActions: actions === null || actions === void 0 ? void 0 : actions.disable
+    },
+    column: {
+      extraParams: {
+        dropdownPosition: actions === null || actions === void 0 ? void 0 : actions.dropdownPosition,
+        dropdownDirection: actions === null || actions === void 0 ? void 0 : actions.dropdownDirection,
+        actionsToggle: actions === null || actions === void 0 ? void 0 : actions.actionsToggle
+      }
+    }
+  }) : null;
+  var expandableParams = expand !== null ? collapsible(null, {
+    rowIndex: expand.rowIndex,
+    columnIndex: expand === null || expand === void 0 ? void 0 : expand.columnIndex,
+    rowData: {
+      isOpen: expand.isExpanded
+    },
+    column: {
+      extraParams: {
+        onCollapse: expand === null || expand === void 0 ? void 0 : expand.onToggle
+      }
+    }
+  }) : null;
+  var compoundParams = compoundExpandProp !== null ? compoundExpand({
+    title: children,
+    props: {
+      isOpen: compoundExpandProp.isExpanded
+    }
+  }, {
+    column: {
+      extraParams: {
+        onExpand: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.onToggle
+      }
     }
+  }) : null;
+  var widthParams = width ? cellWidth(width)() : null;
+  var visibilityParams = visibility ? classNames.apply(void 0, visibility.map(function (vis) {
+    return Visibility[vis];
+  }))() : null;
+  var treeRowParams = treeRowProp !== null ? treeRow(treeRowProp.onCollapse, treeRowProp.onCheckChange, treeRowProp.onToggleRowDetails)({
+    title: children
+  }, {
+    rowIndex: treeRowProp.rowIndex,
+    rowData: {
+      props: treeRowProp.props
+    }
+  }) : null;
+  var merged = mergeProps(selectParams, actionParams, expandableParams, compoundParams, widthParams, visibilityParams, favoriteParams, treeRowParams, draggableParams);
+
+  var _merged$children = merged.children,
+      mergedChildren = _merged$children === void 0 ? null : _merged$children,
+      _merged$className = merged.className,
+      mergedClassName = _merged$className === void 0 ? '' : _merged$className,
+      _merged$component = merged.component,
+      MergedComponent = _merged$component === void 0 ? component : _merged$component,
+      mergedProps = __rest(merged, ["isVisible", "children", "className", "component"]);
+
+  var treeTableTitleCell = className && className.includes('pf-c-table__tree-view-title-cell') || mergedClassName && mergedClassName.includes('pf-c-table__tree-view-title-cell');
+  return React__namespace.createElement(MergedComponent, Object.assign({}, !treeTableTitleCell && {
+    '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);
 };
-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__namespace.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__namespace.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
-                    hasTitle && React__namespace.createElement("title", { id: this.id }, title),
-                    React__namespace.createElement("path", { d: svgPath })));
-            }
-        },
-        _a.displayName = name,
-        _a.defaultProps = {
-            color: 'currentColor',
-            size: IconSize.sm,
-            noVerticalAlign: false
-        },
-        _a;
-}
 
-const SearchIconConfig = {
+var Td = React__namespace.forwardRef(function (props, ref) {
+  return React__namespace.createElement(TdBase, Object.assign({}, props, {
+    innerRef: ref
+  }));
+});
+Td.displayName = 'Td';
+
+var SearchIconConfig = {
   name: 'SearchIcon',
   height: 512,
   width: 512,
   svgPath: 'M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
+var SearchIcon = createIcon(SearchIconConfig);
 
-const SearchIcon = createIcon(SearchIconConfig);
-
-const SecurityIconConfig = {
+var SecurityIconConfig = {
   name: 'SecurityIcon',
   height: 1024,
   width: 896,
   svgPath: 'M861.5,0 L34.5,0 C15.4,0 0,14.3 0,32 L0,452.1 C0,768 387.7,1024 448.5,1024 C509.3,1024 896,768 896,452.2 L896,32 C896,14.3 880.6,0 861.5,0 Z M490.7,768 L405.3,768 C393.5,767.8 384.2,757.5 384,744.7 L384,663.3 C384.2,650.5 393.6,640.3 405.3,640 L490.7,640 C502.5,640.2 511.8,650.5 512,663.3 L512,744.7 L512.1,744.7 C511.8,757.5 502.4,767.8 490.7,768 Z M543.9,162.7 L517.2,514.4 C515.8,530.9 502,544 485.3,544 L410.6,544 C394,544 380.1,531.2 378.7,514.7 L352.1,163 C350.5,144.3 365.3,128.3 384,128.3 L512,128 C530.7,128 545.4,144 543.9,162.7 Z',
   yOffset: 0,
-  xOffset: 0,
+  xOffset: 0
 };
-
-const SecurityIcon = createIcon(SecurityIconConfig);
+var SecurityIcon = createIcon(SecurityIconConfig);
 
 var DEFAULT_PAGE = 1;
 var DEFAULT_PERPAGE = 10;
@@ -1882,19 +2468,36 @@ var PackagesTable = function PackagesTable(_ref) {
     var uniqueVulnerabilities = [].concat(vulnerabilities); // augment vulnerabilities with link data
 
     uniqueVulnerabilities.forEach(function (vulnerability) {
-      var _vulnerability$packag;
+      vulnerability.rpm_nvra_with_link_data = []; // // CONNCERT-2121
 
-      vulnerability.rpm_nvra_with_link_data = [];
-      return vulnerability == null ? void 0 : (_vulnerability$packag = vulnerability.packages) == null ? void 0 : _vulnerability$packag.forEach(function (p) {
-        var _p$rpm_nvra;
+      if (vulnerability != null && vulnerability.affected_packages) {
+        var _vulnerability$affect;
 
-        return p == null ? void 0 : (_p$rpm_nvra = p.rpm_nvra) == null ? void 0 : _p$rpm_nvra.forEach(function (rpm_nvra) {
-          var link_data = rpms == null ? void 0 : rpms.filter(function (pk) {
-            return pk.nvra === rpm_nvra;
+        vulnerability == null ? void 0 : (_vulnerability$affect = vulnerability.affected_packages) == null ? void 0 : _vulnerability$affect.forEach(function (_ref3) {
+          var name = _ref3.name,
+              version = _ref3.version,
+              arch = _ref3.arch;
+          var link_data = rpms == null ? void 0 : rpms.filter(function (rpm) {
+            return rpm.name === name && rpm.version === version && rpm.architecture === arch;
           });
           vulnerability.rpm_nvra_with_link_data.push(link_data[0]);
         });
-      });
+      } else {
+        var _vulnerability$packag;
+
+        vulnerability == null ? void 0 : (_vulnerability$packag = vulnerability.packages) == null ? void 0 : _vulnerability$packag.forEach(function (p) {
+          var _p$rpm_nvra;
+
+          return p == null ? void 0 : (_p$rpm_nvra = p.rpm_nvra) == null ? void 0 : _p$rpm_nvra.forEach(function (rpm_nvra) {
+            var link_data = rpms == null ? void 0 : rpms.filter(function (pk) {
+              return pk.nvra === rpm_nvra;
+            });
+            vulnerability.rpm_nvra_with_link_data.push(link_data[0]);
+          });
+        });
+      }
+
+      return vulnerability;
     }); // sort vulnerabilities by severity
 
     uniqueVulnerabilities.sort(function (vulnerability) {