@rhc-shared-components/packages-table 0.3.1 → 0.3.3

package/dist/index.modern.js

@@ -12,7 +12,7 @@ import { DropdownSeparator } from '@patternfly/react-core/dist/esm/components/Dr
 import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/components/Dropdown/dropdownConstants';
 import { format } from 'date-fns';
 
-var css_248z = ".vulnerabilities-table .impact-icon {\n  font-size: 1.5rem;\n  padding-right: 0.5rem; }\n  .vulnerabilities-table .impact-icon.color-critical {\n    color: #a30000; }\n  .vulnerabilities-table .impact-icon.color-important {\n    color: #ec7a08; }\n  .vulnerabilities-table .impact-icon.color-moderate {\n    color: #f5c12e; }\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.filterable-table {\n  padding-bottom: var(--pf-global--spacer--lg); }\n  .filterable-table__bottom-pagination[class] {\n    margin-top: 1rem; }\n  .filterable-table .pf-c-toolbar {\n    padding-top: 0; }\n    .filterable-table .pf-c-toolbar__content {\n      --pf-c-toolbar__content--PaddingRight: 0;\n      --pf-c-toolbar__content--PaddingLeft: 0; }\n  .filterable-table .pf-c-input-group__text {\n    --pf-c-input-group__text--PaddingRight: 0; }\n  .filterable-table .pf-c-pagination.pf-m-bottom {\n    --pf-c-pagination--m-bottom--md--PaddingRight: 0; }\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.filter-input {\n  width: 18rem;\n  margin: 1rem 0 1rem 0; }\n";
+var css_248z = ".vulnerabilities-table .impact-icon {\n  font-size: 1.5rem;\n  padding-right: 0.5rem;\n}\n.vulnerabilities-table .impact-icon.color-critical {\n  color: #a30000;\n}\n.vulnerabilities-table .impact-icon.color-important {\n  color: #ec7a08;\n}\n.vulnerabilities-table .impact-icon.color-moderate {\n  color: #f5c12e;\n}\n.vulnerabilities-table .impact-icon.color-low {\n  color: #777;\n}\n.vulnerabilities-table__affected-packages-cell {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.vulnerabilities-table__impact-cell {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n\n.filterable-table {\n  padding-bottom: var(--pf-global--spacer--lg);\n}\n.filterable-table__bottom-pagination[class] {\n  margin-top: 1rem;\n}\n.filterable-table .pf-c-toolbar {\n  padding-top: 0;\n}\n.filterable-table .pf-c-toolbar__content {\n  --pf-c-toolbar__content--PaddingRight: 0;\n  --pf-c-toolbar__content--PaddingLeft: 0;\n}\n.filterable-table .pf-c-input-group__text {\n  --pf-c-input-group__text--PaddingRight: 0;\n}\n.filterable-table .pf-c-pagination.pf-m-bottom {\n  --pf-c-pagination--m-bottom--md--PaddingRight: 0;\n}\n\n.packages-table .pf-c-tabs__item > button {\n  padding: 1rem 1.5rem;\n}\n.packages-table__excluded-packages-disclaimer {\n  margin: 1rem 0 0 0.5rem;\n}\n\n.filter-input {\n  width: 18rem;\n  margin: 1rem 0 1rem 0;\n}";
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -39,7 +39,7 @@ function __rest(s, e) {
   return t;
 }
 
-import('./inline-edit-b186d03c.js');
+import('./inline-edit-dea85160.js');
 var inlineStyles = {
   "button": "pf-c-button",
   "inlineEdit": "pf-c-inline-edit",
@@ -68,32 +68,32 @@ 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);
+  // 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);
         }
-        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);
-                }
-            }
-        }
-    });
-    return classes.join(' ');
+      }
+    }
+  });
+  return classes.join(' ');
 }
 
-import('./table-ffd0513c.js');
+import('./table-68d022f9.js');
 var styles$1 = {
   "button": "pf-c-button",
   "modifiers": {
@@ -174,7 +174,7 @@ var styles$1 = {
   "themeDark": "pf-theme-dark"
 };
 
-import('./table-grid-5d7f8359.js');
+import('./table-grid-5f08beb3.js');
 var stylesGrid = {
   "button": "pf-c-button",
   "modifiers": {
@@ -207,7 +207,7 @@ var stylesGrid = {
   "tableToggleIcon": "pf-c-table__toggle-icon"
 };
 
-import('./table-tree-view-ee6ac38a.js');
+import('./table-tree-view-c9374e2e.js');
 var stylesTreeView = {
   "dropdown": "pf-c-dropdown",
   "modifiers": {
@@ -232,142 +232,250 @@ 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);
+const camelize = s => s.toUpperCase().replace('-', '').replace('_', '');
+
+const toCamel = s => 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.createContext({
-    registerSelectableRow: () => { }
+  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, 
+
+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.useRef(null);
-    const [hasSelectableRows, setHasSelectableRows] = React.useState(false);
-    const [tableCaption, setTableCaption] = React.useState();
-    React.useEffect(() => {
-        document.addEventListener('keydown', handleKeys);
-        // sets up roving tab-index to tree tables only
-        if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
-            const tbody = tableRef.current.querySelector('tbody');
-            tbody && setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
-        }
-        return function cleanup() {
-            document.removeEventListener('keydown', handleKeys);
-        };
-    }, [tableRef, tableRef.current]);
-    React.useEffect(() => {
-        if (selectableRowCaptionText) {
-            setTableCaption(React.createElement("caption", null,
-                selectableRowCaptionText,
-                React.createElement("div", { className: "pf-screen-reader" }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter.")));
-        }
-        else {
-            setTableCaption(React.createElement("caption", { className: "pf-screen-reader" }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter."));
-        }
-    }, [selectableRowCaptionText]);
-    const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe);
-    const grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
-    const breakPointPrefix = `treeView${gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1)}`;
-    const treeGrid = (_c = stylesTreeView.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
-    const handleKeys = (event) => {
-        if (isNested ||
-            !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
-            (tableRef && tableRef.current !== event.target.closest('.pf-c-table:not(.pf-m-nested)'))) {
-            return;
-        }
-        const activeElement = document.activeElement;
-        const key = event.key;
-        const rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter(el => !el.classList.contains('pf-m-disabled') && !el.hidden);
-        if (key === 'Space' || key === 'Enter') {
-            activeElement.click();
-            event.preventDefault();
-        }
-        const getFocusableElement = (element) => element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
-        handleArrows(event, rows, (element) => element === activeElement.closest('tr'), getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
-    };
-    const registerSelectableRow = () => {
-        !hasSelectableRows && setHasSelectableRows(true);
+    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.useRef(null);
+  const [hasSelectableRows, setHasSelectableRows] = React.useState(false);
+  const [tableCaption, setTableCaption] = React.useState();
+  React.useEffect(() => {
+    document.addEventListener('keydown', handleKeys); // sets up roving tab-index to tree tables only
+
+    if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
+      const tbody = tableRef.current.querySelector('tbody');
+      tbody && setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
+    }
+
+    return function cleanup() {
+      document.removeEventListener('keydown', handleKeys);
     };
-    return (React.createElement(TableComposableContext.Provider, { value: { registerSelectableRow } },
-        React.createElement("table", Object.assign({ "aria-label": ariaLabel, role: role, className: css(className, styles$1.table, isTreeTable ? treeGrid : grid, styles$1.modifiers[variant], !borders && styles$1.modifiers.noBorderRows, isStickyHeader && styles$1.modifiers.stickyHeader, isTreeTable && 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)));
+  }, [tableRef, tableRef.current]);
+  React.useEffect(() => {
+    if (selectableRowCaptionText) {
+      setTableCaption(React.createElement("caption", null, selectableRowCaptionText, React.createElement("div", {
+        className: "pf-screen-reader"
+      }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter.")));
+    } else {
+      setTableCaption(React.createElement("caption", {
+        className: "pf-screen-reader"
+      }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter."));
+    }
+  }, [selectableRowCaptionText]);
+  const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe);
+  const grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
+  const breakPointPrefix = `treeView${gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1)}`;
+  const treeGrid = (_c = stylesTreeView.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
+
+  const handleKeys = event => {
+    if (isNested || !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
+    tableRef && tableRef.current !== event.target.closest('.pf-c-table:not(.pf-m-nested)')) {
+      return;
+    }
+
+    const activeElement = document.activeElement;
+    const key = event.key;
+    const rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter(el => !el.classList.contains('pf-m-disabled') && !el.hidden);
+
+    if (key === 'Space' || key === 'Enter') {
+      activeElement.click();
+      event.preventDefault();
+    }
+
+    const getFocusableElement = element => element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
+
+    handleArrows(event, rows, element => element === activeElement.closest('tr'), getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
+  };
+
+  const registerSelectableRow = () => {
+    !hasSelectableRows && setHasSelectableRows(true);
+  };
+
+  return React.createElement(TableComposableContext.Provider, {
+    value: {
+      registerSelectableRow
+    }
+  }, React.createElement("table", Object.assign({
+    "aria-label": ariaLabel,
+    role: role,
+    className: css(className, styles$1.table, isTreeTable ? treeGrid : grid, styles$1.modifiers[variant], !borders && styles$1.modifiers.noBorderRows, isStickyHeader && styles$1.modifiers.stickyHeader, isTreeTable && 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.forwardRef((props, ref) => (React.createElement(TableComposableBase, Object.assign({}, props, { innerRef: ref }))));
+
+const TableComposable = React.forwardRef((props, ref) => React.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.createElement("thead", Object.assign({ className: css(className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader), ref: innerRef }, props), children));
+const TheadBase = _a => {
+  var {
+    children,
+    className,
+    noWrap = false,
+    innerRef,
+    hasNestedHeader
+  } = _a,
+      props = __rest(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
+
+  return React.createElement("thead", Object.assign({
+    className: css(className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader),
+    ref: innerRef
+  }, props), children);
 };
-const Thead = React.forwardRef((props, ref) => (React.createElement(TheadBase, Object.assign({}, props, { innerRef: ref }))));
+
+const Thead = React.forwardRef((props, ref) => React.createElement(TheadBase, Object.assign({}, props, {
+  innerRef: ref
+})));
 Thead.displayName = 'Thead';
 
-const TbodyBase = (_a) => {
-    var { children, className, isExpanded, innerRef, isEvenStriped = false, isOddStriped = false } = _a, props = __rest(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
-    return (React.createElement("tbody", Object.assign({ role: "rowgroup", className: css(className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven), ref: innerRef }, props), children));
+const TbodyBase = _a => {
+  var {
+    children,
+    className,
+    isExpanded,
+    innerRef,
+    isEvenStriped = false,
+    isOddStriped = false
+  } = _a,
+      props = __rest(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
+
+  return React.createElement("tbody", Object.assign({
+    role: "rowgroup",
+    className: css(className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven),
+    ref: innerRef
+  }, props), children);
 };
-const Tbody = React.forwardRef((props, ref) => (React.createElement(TbodyBase, Object.assign({}, props, { innerRef: ref }))));
+
+const Tbody = React.forwardRef((props, ref) => React.createElement(TbodyBase, Object.assign({}, props, {
+  innerRef: ref
+})));
 Tbody.displayName = 'Tbody';
 
-const TrBase = (_a) => {
-    var { children, className, isExpanded, isEditable, isHidden = false, isHoverable = false, isRowSelected = false, isStriped = false, innerRef, ouiaId, ouiaSafe = true, resetOffset = false, onRowClick, isSelectable, 'aria-label': passedAriaLabel } = _a, props = __rest(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isHoverable", "isRowSelected", "isStriped", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
-    const ouiaProps = useOUIAProps('TableRow', ouiaId, ouiaSafe);
-    const [computedAriaLabel, setComputedAriaLabel] = React.useState('');
-    let onKeyDown = null;
-    if (onRowClick) {
-        onKeyDown = (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                onRowClick(e);
-                e.preventDefault();
-            }
-        };
+const 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 = useOUIAProps('TableRow', ouiaId, ouiaSafe);
+  const [computedAriaLabel, setComputedAriaLabel] = React.useState('');
+  let onKeyDown = null;
+
+  if (onRowClick) {
+    onKeyDown = e => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        onRowClick(e);
+        e.preventDefault();
+      }
+    };
+  }
+
+  const rowIsHidden = isHidden || isExpanded !== undefined && !isExpanded;
+  const {
+    registerSelectableRow
+  } = React.useContext(TableComposableContext);
+  React.useEffect(() => {
+    if (isSelectable && !rowIsHidden) {
+      setComputedAriaLabel(`${isRowSelected ? 'Selected' : 'Unselected'}, selectable row.`);
+      registerSelectableRow();
+    } else {
+      setComputedAriaLabel(undefined);
     }
-    const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
-    const { registerSelectableRow } = React.useContext(TableComposableContext);
-    React.useEffect(() => {
-        if (isSelectable && !rowIsHidden) {
-            setComputedAriaLabel(`${isRowSelected ? 'Selected' : 'Unselected'}, selectable row.`);
-            registerSelectableRow();
-        }
-        else {
-            setComputedAriaLabel(undefined);
-        }
-    }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
-    const ariaLabel = passedAriaLabel || computedAriaLabel;
-    return (React.createElement(React.Fragment, null,
-        isSelectable && React.createElement("output", { className: "pf-screen-reader" }, ariaLabel),
-        React.createElement("tr", Object.assign({ className: css(className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isHoverable && styles$1.modifiers.hoverable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, resetOffset && styles$1.modifiers.firstCellOffsetReset), hidden: rowIsHidden }, (isHoverable && { tabIndex: 0 }), { "aria-label": ariaLabel, ref: innerRef }, (onRowClick && { onClick: onRowClick, onKeyDown }), ouiaProps, props), children)));
+  }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
+  const ariaLabel = passedAriaLabel || computedAriaLabel;
+  return React.createElement(React.Fragment, null, isSelectable && React.createElement("output", {
+    className: "pf-screen-reader"
+  }, ariaLabel), React.createElement("tr", Object.assign({
+    className: css(className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isHoverable && styles$1.modifiers.hoverable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, resetOffset && styles$1.modifiers.firstCellOffsetReset),
+    hidden: rowIsHidden
+  }, isHoverable && {
+    tabIndex: 0
+  }, {
+    "aria-label": ariaLabel,
+    ref: innerRef
+  }, onRowClick && {
+    onClick: onRowClick,
+    onKeyDown
+  }, ouiaProps, props), children));
 };
-const Tr = React.forwardRef((props, ref) => (React.createElement(TrBase, Object.assign({}, props, { innerRef: ref }))));
+
+const Tr = React.forwardRef((props, ref) => React.createElement(TrBase, Object.assign({}, props, {
+  innerRef: ref
+})));
 Tr.displayName = 'Tr';
 
-import('./table-scrollable-01103545.js');
+import('./table-scrollable-08a401e0.js');
 var styles = {
   "modifiers": {
     "borderRight": "pf-m-border-right",
@@ -381,56 +489,91 @@ var styles = {
 };
 
 var IconSize;
+
 (function (IconSize) {
-    IconSize["sm"] = "sm";
-    IconSize["md"] = "md";
-    IconSize["lg"] = "lg";
-    IconSize["xl"] = "xl";
+  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';
-    }
+
+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';
+  }
 };
 let currentId = 0;
 /**
  * Factory to create Icon class components for consumers
  */
-function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
-    var _a;
-    return _a = class SVGIcon extends React.Component {
-            constructor() {
-                super(...arguments);
-                this.id = `icon-title-${currentId++}`;
-            }
-            render() {
-                const _a = this.props, { size, color, title, noVerticalAlign } = _a, props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
-                const hasTitle = Boolean(title);
-                const heightWidth = getSize(size);
-                const baseAlign = -0.125 * Number.parseFloat(heightWidth);
-                const style = noVerticalAlign ? null : { verticalAlign: `${baseAlign}em` };
-                const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React.createElement("svg", Object.assign({ style: style, fill: color, height: heightWidth, width: heightWidth, viewBox: viewBox, "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img" }, props),
-                    hasTitle && React.createElement("title", { id: this.id }, title),
-                    React.createElement("path", { d: svgPath })));
-            }
-        },
-        _a.displayName = name,
-        _a.defaultProps = {
-            color: 'currentColor',
-            size: IconSize.sm,
-            noVerticalAlign: false
-        },
-        _a;
+
+function createIcon({
+  name,
+  xOffset = 0,
+  yOffset = 0,
+  width,
+  height,
+  svgPath
+}) {
+  var _a;
+
+  return _a = class SVGIcon extends React.Component {
+    constructor() {
+      super(...arguments);
+      this.id = `icon-title-${currentId++}`;
+    }
+
+    render() {
+      const _a = this.props,
+            {
+        size,
+        color,
+        title,
+        noVerticalAlign
+      } = _a,
+            props = __rest(_a, ["size", "color", "title", "noVerticalAlign"]);
+
+      const hasTitle = Boolean(title);
+      const heightWidth = getSize(size);
+      const baseAlign = -0.125 * Number.parseFloat(heightWidth);
+      const style = noVerticalAlign ? null : {
+        verticalAlign: `${baseAlign}em`
+      };
+      const viewBox = [xOffset, yOffset, width, height].join(' ');
+      return React.createElement("svg", Object.assign({
+        style: style,
+        fill: color,
+        height: heightWidth,
+        width: heightWidth,
+        viewBox: viewBox,
+        "aria-labelledby": hasTitle ? this.id : null,
+        "aria-hidden": hasTitle ? null : true,
+        role: "img"
+      }, props), hasTitle && React.createElement("title", {
+        id: this.id
+      }, title), React.createElement("path", {
+        d: svgPath
+      }));
+    }
+
+  }, _a.displayName = name, _a.defaultProps = {
+    color: 'currentColor',
+    size: IconSize.sm,
+    noVerticalAlign: false
+  }, _a;
 }
 
 const HelpIconConfig = {
@@ -439,59 +582,119 @@ const HelpIconConfig = {
   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(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.useState('');
-    const onMouseEnter = (event) => {
-        if (event.target.offsetWidth < event.target.scrollWidth) {
-            setTooltip(tooltipProp || event.target.innerText);
-        }
-        else {
-            setTooltip('');
-        }
-        onMouseEnterProp(event);
-    };
-    const text = (React.createElement(Component, Object.assign({ onMouseEnter: onMouseEnter, className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText) }, props), children));
-    return tooltip !== '' ? (React.createElement(Tooltip, Object.assign({ content: tooltip, isVisible: true }, tooltipProps), text)) : (text);
+
+const TableText = _a => {
+  var {
+    children = null,
+    className = '',
+    variant = 'span',
+    wrapModifier = null,
+    tooltip: tooltipProp = '',
+    tooltipProps = {},
+    onMouseEnter: onMouseEnterProp = () => {}
+  } = _a,
+      props = __rest(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter"]);
+
+  const Component = variant;
+  const [tooltip, setTooltip] = React.useState('');
+
+  const onMouseEnter = event => {
+    if (event.target.offsetWidth < event.target.scrollWidth) {
+      setTooltip(tooltipProp || event.target.innerText);
+    } else {
+      setTooltip('');
+    }
+
+    onMouseEnterProp(event);
+  };
+
+  const text = React.createElement(Component, Object.assign({
+    onMouseEnter: onMouseEnter,
+    className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText)
+  }, props), children);
+  return tooltip !== '' ? React.createElement(Tooltip, Object.assign({
+    content: tooltip,
+    isVisible: true
+  }, tooltipProps), text) : text;
 };
 TableText.displayName = 'TableText';
 
-const HeaderCellInfoWrapper = ({ children, info, className, variant = 'tooltip', popoverProps, tooltipProps, ariaLabel }) => (React.createElement("div", { className: css(styles$1.tableColumnHelp, className) },
-    typeof children === 'string' ? React.createElement(TableText, null, children) : children,
-    React.createElement("span", { className: css(styles$1.tableColumnHelpAction) }, variant === 'tooltip' ? (React.createElement(Tooltip$1, Object.assign({ content: info }, tooltipProps),
-        React.createElement(Button, { variant: "plain", "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info' },
-            React.createElement(HelpIcon$1, { noVerticalAlign: true })))) : (React.createElement(Popover, Object.assign({ bodyContent: info }, popoverProps),
-        React.createElement(Button, { variant: "plain", "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info' },
-            React.createElement(HelpIcon$1, { noVerticalAlign: true })))))));
+const HeaderCellInfoWrapper = ({
+  children,
+  info,
+  className,
+  variant: _variant = 'tooltip',
+  popoverProps,
+  tooltipProps,
+  ariaLabel
+}) => React.createElement("div", {
+  className: css(styles$1.tableColumnHelp, className)
+}, typeof children === 'string' ? React.createElement(TableText, null, children) : children, React.createElement("span", {
+  className: css(styles$1.tableColumnHelpAction)
+}, _variant === 'tooltip' ? React.createElement(Tooltip$1, Object.assign({
+  content: info
+}, tooltipProps), React.createElement(Button, {
+  variant: "plain",
+  "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
+}, React.createElement(HelpIcon$1, {
+  noVerticalAlign: true
+}))) : React.createElement(Popover, Object.assign({
+  bodyContent: info
+}, popoverProps), React.createElement(Button, {
+  variant: "plain",
+  "aria-label": ariaLabel || typeof info === 'string' && info || 'More info'
+}, React.createElement(HelpIcon$1, {
+  noVerticalAlign: true
+})))));
 HeaderCellInfoWrapper.displayName = 'HeaderCellInfoWrapper';
 
-const info = ({ tooltip, tooltipProps, popover, popoverProps, className, ariaLabel }) => {
-    const infoObj = (value) => ({
-        className: styles$1.modifiers.help,
-        children: tooltip ? (React.createElement(HeaderCellInfoWrapper, { variant: "tooltip", info: tooltip, tooltipProps: tooltipProps, ariaLabel: ariaLabel, className: className }, value)) : (React.createElement(HeaderCellInfoWrapper, { variant: "popover", info: popover, popoverProps: popoverProps, ariaLabel: ariaLabel, className: className }, value))
-    });
-    return infoObj;
+const info = ({
+  tooltip,
+  tooltipProps,
+  popover,
+  popoverProps,
+  className,
+  ariaLabel
+}) => {
+  const infoObj = value => ({
+    className: styles$1.modifiers.help,
+    children: tooltip ? React.createElement(HeaderCellInfoWrapper, {
+      variant: "tooltip",
+      info: tooltip,
+      tooltipProps: tooltipProps,
+      ariaLabel: ariaLabel,
+      className: className
+    }, value) : React.createElement(HeaderCellInfoWrapper, {
+      variant: "popover",
+      info: popover,
+      popoverProps: popoverProps,
+      ariaLabel: ariaLabel,
+      className: className
+    }, value)
+  });
+
+  return infoObj;
 };
 
 const LongArrowAltUpIconConfig = {
@@ -500,11 +703,9 @@ const LongArrowAltUpIconConfig = {
   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(LongArrowAltUpIconConfig);
-
 var LongArrowAltUpIcon$1 = LongArrowAltUpIcon;
 
 const LongArrowAltDownIconConfig = {
@@ -513,11 +714,9 @@ const LongArrowAltDownIconConfig = {
   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(LongArrowAltDownIconConfig);
-
 var LongArrowAltDownIcon$1 = LongArrowAltDownIcon;
 
 const ArrowsAltVIconConfig = {
@@ -526,32 +725,46 @@ const ArrowsAltVIconConfig = {
   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(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;
-    }
-    return (React.createElement("button", Object.assign({}, props, { type: type, className: css(className, styles$1.tableButton), onClick: event => onSort && onSort(event) }),
-        React.createElement("div", { className: css(className, styles$1.tableButtonContent) },
-            React.createElement(TableText, null, children),
-            React.createElement("span", { className: css(styles$1.tableSortIndicator) },
-                React.createElement(SortedByIcon, null)))));
+
+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;
+  }
+
+  return React.createElement("button", Object.assign({}, props, {
+    type: type,
+    className: css(className, styles$1.tableButton),
+    onClick: event => onSort && onSort(event)
+  }), React.createElement("div", {
+    className: css(className, styles$1.tableButtonContent)
+  }, React.createElement(TableText, null, children), React.createElement("span", {
+    className: css(styles$1.tableSortIndicator)
+  }, React.createElement(SortedByIcon, null))));
 };
 SortColumn.displayName = 'SortColumn';
 
@@ -561,70 +774,97 @@ const StarIconConfig = {
   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(StarIconConfig);
-
 var StarIcon$1 = StarIcon;
 
-const sortableFavorites = (sort) => () => sortable(React.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
-        }
+const sortableFavorites = sort => () => sortable(React.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
     }
+  }
 });
-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);
+const sortable = (label, {
+  columnIndex,
+  column,
+  property,
+  className,
+  ariaLabel
+}) => {
+  const {
+    extraParams: {
+      sortBy,
+      onSort
     }
-    return {
-        className: css(styles$1.tableSort, isSortedBy && styles$1.modifiers.selected, className),
-        'aria-sort': isSortedBy ? `${sortBy.direction}ending` : 'none',
-        children: (React.createElement(SortColumn, { isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortBy.direction : '', onSort: sortClicked, "aria-label": ariaLabel }, label))
-    };
+  } = 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.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, 
+
+const SelectColumn = _a => {
+  var {
+    children = null,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    className, onSelect = null, selectVariant } = _a, props = __rest(_a, ["children", "className", "onSelect", "selectVariant"]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("label", null,
-            React.createElement("input", Object.assign({}, props, { type: selectVariant, onChange: onSelect }))),
-        children));
+    className,
+    onSelect = null,
+    selectVariant
+  } = _a,
+      props = __rest(_a, ["children", "className", "onSelect", "selectVariant"]);
+
+  return React.createElement(React.Fragment, null, React.createElement("label", null, React.createElement("input", Object.assign({}, props, {
+    type: selectVariant,
+    onChange: onSelect
+  }))), children);
 };
 SelectColumn.displayName = 'SelectColumn';
 
-import('./check-317f30b2.js');
+import('./check-8277bc89.js');
 var checkStyles = {
   "check": "pf-c-check",
   "checkBody": "pf-c-check__body",
@@ -637,55 +877,76 @@ 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';
+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 {
-        className: css(styles$1.tableCheck),
-        component: 'td',
-        isVisible: !rowData || !rowData.fullWidth,
-        children: (React.createElement(SelectColumn, Object.assign({}, customProps, { selectVariant: selectVariant, onSelect: selectClick, name: selectName }), label))
+      component: 'td',
+      isVisible: true
     };
+  }
+
+  const rowId = rowIndex !== undefined ? rowIndex : -1;
+  /**
+   * @param {React.FormEvent} event - React form event
+   */
+
+  function selectClick(event) {
+    const selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected; // tslint:disable-next-line:no-unused-expression
+
+    onSelect && onSelect(event, selected, rowId, rowData, extraData);
+  }
+
+  const customProps = Object.assign(Object.assign(Object.assign({}, rowId !== -1 ? {
+    checked: rowData && !!rowData.selected,
+    'aria-label': `Select row ${rowIndex}`
+  } : {
+    checked: allRowsSelected,
+    'aria-label': 'Select all rows'
+  }), rowData && (rowData.disableCheckbox || rowData.disableSelection) && {
+    disabled: true,
+    className: checkStyles.checkInput
+  }), !rowData && isHeaderSelectDisabled && {
+    disabled: true
+  });
+  let selectName = 'check-all';
+
+  if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
+    selectName = `checkrow${rowIndex}`;
+  } else if (rowId !== -1) {
+    selectName = 'radioGroup';
+  }
+
+  return {
+    className: css(styles$1.tableCheck),
+    component: 'td',
+    isVisible: !rowData || !rowData.fullWidth,
+    children: React.createElement(SelectColumn, Object.assign({}, customProps, {
+      selectVariant: selectVariant,
+      onSelect: selectClick,
+      name: selectName
+    }), label)
+  };
 };
 
 const AngleDownIconConfig = {
@@ -694,82 +955,96 @@ const AngleDownIconConfig = {
   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(AngleDownIconConfig);
-
 var AngleDownIcon$1 = AngleDownIcon;
 
-const CollapseColumn = (_a) => {
-    var { className = '', children = null, isOpen, onToggle } = _a, props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
-    return (React.createElement(React.Fragment, null,
-        isOpen !== undefined && (React.createElement(Button$1, Object.assign({ className: css(className, isOpen && styles$1.modifiers.expanded) }, props, { variant: "plain", "aria-label": props['aria-label'] || 'Details', onClick: onToggle, "aria-expanded": isOpen }),
-            React.createElement("div", { className: css(styles$1.tableToggleIcon) },
-                React.createElement(AngleDownIcon$1, null)))),
-        children));
+const CollapseColumn = _a => {
+  var {
+    className = '',
+    children = null,
+    isOpen,
+    onToggle
+  } = _a,
+      props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
+
+  return React.createElement(React.Fragment, null, isOpen !== undefined && React.createElement(Button$1, Object.assign({
+    className: css(className, isOpen && styles$1.modifiers.expanded)
+  }, props, {
+    variant: "plain",
+    "aria-label": props['aria-label'] || 'Details',
+    onClick: onToggle,
+    "aria-expanded": isOpen
+  }), React.createElement("div", {
+    className: css(styles$1.tableToggleIcon)
+  }, React.createElement(AngleDownIcon$1, null))), children);
 };
 CollapseColumn.displayName = 'CollapseColumn';
 
-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);
+const collapsible = (value, {
+  rowIndex,
+  columnIndex,
+  rowData,
+  column,
+  property
+}) => {
+  const {
+    extraParams: {
+      onCollapse,
+      rowLabeledBy = 'simple-node',
+      expandId = 'expand-toggle',
+      allRowsExpanded,
+      collapseAllAriaLabel
     }
-    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.createElement(CollapseColumn, Object.assign({ "aria-labelledby": `${rowLabeledBy}${rowId} ${expandId}${rowId}`, onToggle: onToggle, id: expandId + rowId }, customProps), value))
-    };
+  } = 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);
+  }
+
+  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.createElement(CollapseColumn, Object.assign({
+      "aria-labelledby": `${rowLabeledBy}${rowId} ${expandId}${rowId}`,
+      onToggle: onToggle,
+      id: expandId + rowId
+    }, customProps), value)
+  };
 };
 
-const cellWidth = (width) => () => ({
-    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;
+const visibilityModifiers = ['hidden', 'hiddenOnSm', 'hiddenOnMd', 'hiddenOnLg', 'hiddenOnXl', 'hiddenOn_2xl', 'visibleOnSm', 'visibleOnMd', 'visibleOnLg', 'visibleOnXl', 'visibleOn_2xl'];
+const Visibility = visibilityModifiers.filter(key => styles$1.modifiers[key]).reduce((acc, curr) => {
+  const key2 = curr.replace('_2xl', '2Xl');
+  acc[key2] = styles$1.modifiers[curr];
+  return acc;
 }, {});
 const classNames = (...classes) => () => ({
-    className: css(...classes)
+  className: css(...classes)
 });
 
 /**
@@ -781,259 +1056,442 @@ const classNames = (...classes) => () => ({
 /**
  * @param {any} props - Props
  */
+
 function mergeProps(...props) {
-    const firstProps = props[0];
-    const restProps = props.slice(1);
-    if (!restProps.length) {
-        return mergeWith({}, firstProps);
+  const firstProps = props[0];
+  const restProps = props.slice(1);
+
+  if (!restProps.length) {
+    return mergeWith({}, firstProps);
+  } // Avoid mutating the first prop collection
+
+
+  return mergeWith(mergeWith({}, firstProps), ...restProps, (a, b, key) => {
+    if (key === 'children') {
+      if (a && b) {
+        // compose the two
+        return React.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(mergeWith({}, firstProps), ...restProps, (a, b, key) => {
-        if (key === 'children') {
-            if (a && b) {
-                // compose the two
-                return React.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.useState(false);
-    const onMouseEnter = (event) => {
-        if (event.target.offsetWidth < event.target.scrollWidth) {
-            !showTooltip && setShowTooltip(true);
-        }
-        else {
-            showTooltip && setShowTooltip(false);
-        }
-        onMouseEnterProp(event);
-    };
-    let sortParams = null;
-    if (sort) {
-        if (sort.isFavorites) {
-            sortParams = sortableFavorites({
-                onSort: sort === null || sort === void 0 ? void 0 : sort.onSort,
-                columnIndex: sort.columnIndex,
-                sortBy: sort.sortBy
-            })();
-        }
-        else {
-            sortParams = sortable(children, {
-                columnIndex: sort.columnIndex,
-                column: {
-                    extraParams: {
-                        sortBy: sort.sortBy,
-                        onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
-                    }
-                }
-            });
+const 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.useState(false);
+
+  const onMouseEnter = event => {
+    if (event.target.offsetWidth < event.target.scrollWidth) {
+      !showTooltip && setShowTooltip(true);
+    } else {
+      showTooltip && setShowTooltip(false);
+    }
+
+    onMouseEnterProp(event);
+  };
+
+  let sortParams = null;
+
+  if (sort) {
+    if (sort.isFavorites) {
+      sortParams = sortableFavorites({
+        onSort: sort === null || sort === void 0 ? void 0 : sort.onSort,
+        columnIndex: sort.columnIndex,
+        sortBy: sort.sortBy
+      })();
+    } else {
+      sortParams = sortable(children, {
+        columnIndex: sort.columnIndex,
+        column: {
+          extraParams: {
+            sortBy: sort.sortBy,
+            onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
+          }
         }
+      });
     }
-    const selectParams = select
-        ? selectable(children, {
-            column: {
-                extraParams: {
-                    onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
-                    selectVariant: 'checkbox',
-                    allRowsSelected: select.isSelected,
-                    isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
-                }
-            }
-        })
-        : null;
-    const collapseParams = collapse
-        ? collapsible(children, {
-            column: {
-                extraParams: {
-                    onCollapse: collapse === null || collapse === void 0 ? void 0 : collapse.onToggle,
-                    allRowsExpanded: !collapse.areAllExpanded,
-                    collapseAllAriaLabel: ''
-                }
-            }
-        })
-        : null;
-    const widthParams = width ? cellWidth(width)() : null;
-    const visibilityParams = visibility
-        ? classNames(...visibility.map((vis) => Visibility[vis]))()
-        : null;
-    let transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children;
-    // info can wrap other transformedChildren
-    let infoParams = null;
-    if (infoProps) {
-        infoParams = info(infoProps)(transformedChildren);
-        transformedChildren = infoParams.children;
+  }
+
+  const 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 { 
+  }) : null;
+  const collapseParams = collapse ? collapsible(children, {
+    column: {
+      extraParams: {
+        onCollapse: collapse === null || collapse === void 0 ? void 0 : collapse.onToggle,
+        allRowsExpanded: !collapse.areAllExpanded,
+        collapseAllAriaLabel: ''
+      }
+    }
+  }) : null;
+  const widthParams = width ? cellWidth(width)() : null;
+  const visibilityParams = visibility ? classNames(...visibility.map(vis => Visibility[vis]))() : null;
+  let transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children; // info can wrap other transformedChildren
+
+  let infoParams = null;
+
+  if (infoProps) {
+    infoParams = info(infoProps)(transformedChildren);
+    transformedChildren = infoParams.children;
+  }
+
+  const merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
+
+  const {
     // ignore the merged children since we transform them ourselves so we can wrap it with info
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    children: mergedChildren = null, 
+    children: mergedChildren = null,
     // selectable adds this but we don't want it
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isVisible = null, className: mergedClassName = '', component: MergedComponent = component } = merged, mergedProps = __rest(merged, ["children", "isVisible", "className", "component"]);
-    const cell = (React.createElement(MergedComponent, Object.assign({ "data-label": dataLabel, onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp, scope: component === 'th' && children ? scope : null, ref: innerRef, className: css(className, textCenter && styles$1.modifiers.center, isSubheader && styles$1.tableSubhead, isStickyColumn && styles.tableStickyColumn, hasRightBorder && styles.modifiers.borderRight, modifier && styles$1.modifiers[modifier], mergedClassName) }, mergedProps, props, (isStickyColumn && {
-        style: Object.assign({ '--pf-c-table__sticky-column--MinWidth': stickyMinWidth ? stickyMinWidth : undefined, '--pf-c-table__sticky-column--Left': stickyLeftOffset ? stickyLeftOffset : undefined }, props.style)
-    })), transformedChildren));
-    const canDefault = tooltip === '' ? typeof children === 'string' : true;
-    return tooltip !== null && canDefault && showTooltip ? (React.createElement(Tooltip, { content: tooltip || (tooltip === '' && children), isVisible: true }, cell)) : (cell);
+    isVisible = null,
+    className: mergedClassName = '',
+    component: MergedComponent = component
+  } = merged,
+        mergedProps = __rest(merged, ["children", "isVisible", "className", "component"]);
+
+  const cell = React.createElement(MergedComponent, Object.assign({
+    "data-label": dataLabel,
+    onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp,
+    scope: component === 'th' && children ? scope : null,
+    ref: innerRef,
+    className: css(className, textCenter && styles$1.modifiers.center, isSubheader && styles$1.tableSubhead, isStickyColumn && styles.tableStickyColumn, hasRightBorder && styles.modifiers.borderRight, modifier && styles$1.modifiers[modifier], mergedClassName)
+  }, mergedProps, props, isStickyColumn && {
+    style: Object.assign({
+      '--pf-c-table__sticky-column--MinWidth': stickyMinWidth ? stickyMinWidth : undefined,
+      '--pf-c-table__sticky-column--Left': stickyLeftOffset ? stickyLeftOffset : undefined
+    }, props.style)
+  }), transformedChildren);
+  const canDefault = tooltip === '' ? typeof children === 'string' : true;
+  return tooltip !== null && canDefault && showTooltip ? React.createElement(Tooltip, {
+    content: tooltip || tooltip === '' && children,
+    isVisible: true
+  }, cell) : cell;
 };
-const Th = React.forwardRef((props, ref) => (React.createElement(ThBase, Object.assign({}, props, { innerRef: ref }))));
+
+const Th = React.forwardRef((props, ref) => React.createElement(ThBase, Object.assign({}, props, {
+  innerRef: ref
+})));
 Th.displayName = 'Th';
 
 class ActionsColumn extends React.Component {
-    constructor(props) {
-        super(props);
-        this.toggleRef = React.createRef();
-        this.onToggle = (isOpen) => {
-            this.setState({
-                isOpen
-            });
-        };
-        this.onClick = (event, onClick) => {
-            const { rowData, extraData } = this.props;
-            // Only prevent default if onClick is provided.  This allows href support.
-            if (onClick) {
-                event.preventDefault();
-                // tslint:disable-next-line:no-unused-expression
-                onClick(event, extraData && extraData.rowIndex, rowData, extraData);
-            }
-        };
-        this.state = {
-            isOpen: false
-        };
-    }
-    render() {
-        const { isOpen } = this.state;
-        const { items, children, dropdownPosition, dropdownDirection, isDisabled, rowData, actionsToggle } = this.props;
-        const actionsToggleClone = actionsToggle ? (actionsToggle({ onToggle: this.onToggle, isOpen, isDisabled })) : (React.createElement(KebabToggle, { isDisabled: isDisabled, onToggle: this.onToggle }));
-        return (React.createElement(React.Fragment, null,
-            items
-                .filter(item => item.isOutsideDropdown)
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                .map((_a, key) => {
-                var { title, itemKey, onClick, isOutsideDropdown } = _a, props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
-                return typeof title === 'string' ? (React.createElement(Button$1, Object.assign({ onClick: event => this.onClick(event, onClick) }, props, { isDisabled: isDisabled, key: itemKey || `outside_dropdown_${key}`, "data-key": itemKey || `outside_dropdown_${key}` }), title)) : (React.cloneElement(title, Object.assign({ onClick, isDisabled }, props)));
-            }),
-            React.createElement(Dropdown, Object.assign({ toggle: actionsToggleClone, position: dropdownPosition, direction: dropdownDirection, isOpen: isOpen, dropdownItems: items
-                    .filter(item => !item.isOutsideDropdown)
-                    .map((_a, key) => {
-                    var { title, itemKey, onClick, isSeparator } = _a, props = __rest(_a, ["title", "itemKey", "onClick", "isSeparator"]);
-                    return isSeparator ? (React.createElement(DropdownSeparator, Object.assign({}, props, { key: itemKey || key, "data-key": itemKey || key }))) : (React.createElement(DropdownItem, Object.assign({ component: "button", onClick: event => {
-                            this.onClick(event, onClick);
-                            this.onToggle(!isOpen);
-                        } }, props, { key: itemKey || key, "data-key": itemKey || key }), title));
-                }), isPlain: true }, (rowData && rowData.actionProps))),
-            children));
-    }
+  constructor(props) {
+    super(props);
+    this.toggleRef = React.createRef();
+
+    this.onToggle = isOpen => {
+      this.setState({
+        isOpen
+      });
+    };
+
+    this.onClick = (event, onClick) => {
+      const {
+        rowData,
+        extraData
+      } = this.props; // Only prevent default if onClick is provided.  This allows href support.
+
+      if (onClick) {
+        event.preventDefault(); // tslint:disable-next-line:no-unused-expression
+
+        onClick(event, extraData && extraData.rowIndex, rowData, extraData);
+      }
+    };
+
+    this.state = {
+      isOpen: false
+    };
+  }
+
+  render() {
+    const {
+      isOpen
+    } = this.state;
+    const {
+      items,
+      children,
+      dropdownPosition,
+      dropdownDirection,
+      isDisabled,
+      rowData,
+      actionsToggle
+    } = this.props;
+    const actionsToggleClone = actionsToggle ? actionsToggle({
+      onToggle: this.onToggle,
+      isOpen,
+      isDisabled
+    }) : React.createElement(KebabToggle, {
+      isDisabled: isDisabled,
+      onToggle: this.onToggle
+    });
+    return React.createElement(React.Fragment, null, items.filter(item => item.isOutsideDropdown) // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    .map((_a, key) => {
+      var {
+        title,
+        itemKey,
+        onClick,
+        isOutsideDropdown
+      } = _a,
+          props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
+
+      return typeof title === 'string' ? React.createElement(Button$1, Object.assign({
+        onClick: event => this.onClick(event, onClick)
+      }, props, {
+        isDisabled: isDisabled,
+        key: itemKey || `outside_dropdown_${key}`,
+        "data-key": itemKey || `outside_dropdown_${key}`
+      }), title) : React.cloneElement(title, Object.assign({
+        onClick,
+        isDisabled
+      }, props));
+    }), React.createElement(Dropdown, Object.assign({
+      toggle: actionsToggleClone,
+      position: dropdownPosition,
+      direction: dropdownDirection,
+      isOpen: isOpen,
+      dropdownItems: items.filter(item => !item.isOutsideDropdown).map((_a, key) => {
+        var {
+          title,
+          itemKey,
+          onClick,
+          isSeparator
+        } = _a,
+            props = __rest(_a, ["title", "itemKey", "onClick", "isSeparator"]);
+
+        return isSeparator ? React.createElement(DropdownSeparator, Object.assign({}, props, {
+          key: itemKey || key,
+          "data-key": itemKey || key
+        })) : React.createElement(DropdownItem, Object.assign({
+          component: "button",
+          onClick: event => {
+            this.onClick(event, onClick);
+            this.onToggle(!isOpen);
+          }
+        }, props, {
+          key: itemKey || key,
+          "data-key": itemKey || key
+        }), title);
+      }),
+      isPlain: true
+    }, rowData && rowData.actionProps)), children);
+  }
+
 }
 ActionsColumn.displayName = 'ActionsColumn';
 ActionsColumn.defaultProps = {
-    children: null,
-    items: [],
-    dropdownPosition: DropdownPosition.right,
-    dropdownDirection: DropdownDirection.down,
-    rowData: {},
-    extraData: {}
+  children: null,
+  items: [],
+  dropdownPosition: DropdownPosition.right,
+  dropdownDirection: DropdownDirection.down,
+  rowData: {},
+  extraData: {}
 };
 
-const resolveOrDefault = (resolver, defaultValue, rowData, extraData) => (typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue);
-const cellActions = (actions, actionResolver, areActionsDisabled) => (label, { rowData, column, rowIndex, columnIndex, column: { extraParams: { dropdownPosition, dropdownDirection, actionsToggle } }, property }) => {
-    const extraData = {
-        rowIndex,
-        columnIndex,
-        column,
-        property
-    };
-    const resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData);
-    const resolvedIsDisabled = resolveOrDefault(areActionsDisabled, rowData && rowData.disableActions, rowData, extraData);
-    const renderProps = resolvedActions && resolvedActions.length > 0
-        ? {
-            children: (React.createElement(ActionsColumn, { items: resolvedActions, dropdownPosition: dropdownPosition, dropdownDirection: dropdownDirection, isDisabled: resolvedIsDisabled, rowData: rowData, extraData: extraData, actionsToggle: actionsToggle }, label))
-        }
-        : {};
-    return Object.assign({ className: css(styles$1.tableAction), style: { paddingRight: 0 }, isVisible: true }, renderProps);
+const resolveOrDefault = (resolver, defaultValue, rowData, extraData) => typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue;
+
+const cellActions = (actions, actionResolver, areActionsDisabled) => (label, {
+  rowData,
+  column,
+  rowIndex,
+  columnIndex,
+  column: {
+    extraParams: {
+      dropdownPosition,
+      dropdownDirection,
+      actionsToggle
+    }
+  },
+  property
+}) => {
+  const extraData = {
+    rowIndex,
+    columnIndex,
+    column,
+    property
+  };
+  const resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData);
+  const resolvedIsDisabled = resolveOrDefault(areActionsDisabled, rowData && rowData.disableActions, rowData, extraData);
+  const renderProps = resolvedActions && resolvedActions.length > 0 ? {
+    children: React.createElement(ActionsColumn, {
+      items: resolvedActions,
+      dropdownPosition: dropdownPosition,
+      dropdownDirection: dropdownDirection,
+      isDisabled: resolvedIsDisabled,
+      rowData: rowData,
+      extraData: extraData,
+      actionsToggle: actionsToggle
+    }, label)
+  } : {};
+  return Object.assign({
+    className: css(styles$1.tableAction),
+    style: {
+      paddingRight: 0
+    },
+    isVisible: true
+  }, renderProps);
 };
 
-const compoundExpand = (value, { rowIndex, columnIndex, rowData, column, property }) => {
-    if (!value) {
-        return null;
-    }
-    const { title, props } = value;
-    const { extraParams: { onExpand } } = column;
-    const extraData = {
-        rowIndex,
-        columnIndex,
-        column,
-        property
-    };
-    /**
-     * @param {React.MouseEvent} event - Mouse event
-     */
-    function onToggle(event) {
-        // tslint:disable-next-line:no-unused-expression
-        onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
+const compoundExpand = (value, {
+  rowIndex,
+  columnIndex,
+  rowData,
+  column,
+  property
+}) => {
+  if (!value) {
+    return null;
+  }
+
+  const {
+    title,
+    props
+  } = value;
+  const {
+    extraParams: {
+      onExpand
     }
-    return {
-        className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
-        children: props.isOpen !== undefined && (React.createElement("button", { type: "button", className: css(styles$1.tableButton), onClick: onToggle, "aria-expanded": props.isOpen, "aria-controls": props.ariaControls },
-            React.createElement(TableText, null, title)))
-    };
+  } = column;
+  const extraData = {
+    rowIndex,
+    columnIndex,
+    column,
+    property
+  };
+  /**
+   * @param {React.MouseEvent} event - Mouse event
+   */
+
+  function onToggle(event) {
+    // tslint:disable-next-line:no-unused-expression
+    onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
+  }
+
+  return {
+    className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
+    children: props.isOpen !== undefined && React.createElement("button", {
+      type: "button",
+      className: css(styles$1.tableButton),
+      onClick: onToggle,
+      "aria-expanded": props.isOpen,
+      "aria-controls": props.ariaControls
+    }, React.createElement(TableText, null, title))
+  };
 };
 
-const FavoritesCell = (_a) => {
-    var { className = '', onFavorite, isFavorited, rowIndex } = _a, props = __rest(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
-    const ariaProps = rowIndex === undefined
-        ? {}
-        : {
-            id: `favorites-button-${rowIndex}`,
-            'aria-labelledby': `favorites-button-${rowIndex}`
-        };
-    return (React.createElement(Button$1, Object.assign({ variant: "plain", className: className, type: "button", "aria-label": isFavorited ? 'Starred' : 'Not starred', onClick: onFavorite }, ariaProps, props),
-        React.createElement(StarIcon$1, { "aria-hidden": true })));
+const FavoritesCell = _a => {
+  var {
+    className = '',
+    onFavorite,
+    isFavorited,
+    rowIndex
+  } = _a,
+      props = __rest(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
+
+  const ariaProps = rowIndex === undefined ? {} : {
+    id: `favorites-button-${rowIndex}`,
+    'aria-labelledby': `favorites-button-${rowIndex}`
+  };
+  return React.createElement(Button$1, Object.assign({
+    variant: "plain",
+    className: className,
+    type: "button",
+    "aria-label": isFavorited ? 'Starred' : 'Not starred',
+    onClick: onFavorite
+  }, ariaProps, props), React.createElement(StarIcon$1, {
+    "aria-hidden": true
+  }));
 };
 FavoritesCell.displayName = 'FavoritesCell';
 
-const favoritable = (value, { rowIndex, columnIndex, rowData, column, property }) => {
-    const { extraParams: { onFavorite } } = 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 favoritable = (value, {
+  rowIndex,
+  columnIndex,
+  rowData,
+  column,
+  property
+}) => {
+  const {
+    extraParams: {
+      onFavorite
     }
-    const additionalProps = rowData.favoritesProps || {};
+  } = 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 {
-        className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
-        isVisible: !rowData || !rowData.fullWidth,
-        children: (React.createElement(FavoritesCell, Object.assign({ rowIndex: rowIndex, onFavorite: favoritesClick, isFavorited: rowData && rowData.favorited }, additionalProps)))
+      component: 'td',
+      isVisible: true
     };
+  }
+  /**
+   * @param {React.MouseEvent} event - Mouse event
+   */
+
+
+  function favoritesClick(event) {
+    // tslint:disable-next-line:no-unused-expression
+    onFavorite && onFavorite(event, rowData && !rowData.favorited, rowIndex, rowData, extraData);
+  }
+
+  const additionalProps = rowData.favoritesProps || {};
+  return {
+    className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
+    isVisible: !rowData || !rowData.fullWidth,
+    children: React.createElement(FavoritesCell, Object.assign({
+      rowIndex: rowIndex,
+      onFavorite: favoritesClick,
+      isFavorited: rowData && rowData.favorited
+    }, additionalProps))
+  };
 };
 
 const GripVerticalIconConfig = {
@@ -1042,26 +1500,45 @@ const GripVerticalIconConfig = {
   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(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.createElement(Button$1, Object.assign({ id: id, variant: "plain", className: className, type: "button", "aria-label": ariaLabel || `Draggable row draggable button`, onClick: onClick }, props),
-        React.createElement(GripVerticalIcon$1, { "aria-hidden": true })));
+const DraggableCell = _a => {
+  var {
+    className,
+    onClick,
+    'aria-label': ariaLabel,
+    id
+  } = _a,
+      props = __rest(_a, ["className", "onClick", 'aria-label', "id"]);
+
+  return React.createElement(Button$1, Object.assign({
+    id: id,
+    variant: "plain",
+    className: className,
+    type: "button",
+    "aria-label": ariaLabel || `Draggable row draggable button`,
+    onClick: onClick
+  }, props), React.createElement(GripVerticalIcon$1, {
+    "aria-hidden": true
+  }));
 };
 DraggableCell.displayName = 'DraggableCell';
 
-const draggable = (value, { rowData }) => {
-    const { id } = rowData;
-    return {
-        className: '',
-        children: React.createElement(DraggableCell, { id: id })
-    };
+const draggable = (value, {
+  rowData
+}) => {
+  const {
+    id
+  } = rowData;
+  return {
+    className: '',
+    children: React.createElement(DraggableCell, {
+      id: id
+    })
+  };
 };
 
 const EllipsisHIconConfig = {
@@ -1070,148 +1547,213 @@ const EllipsisHIconConfig = {
   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(EllipsisHIconConfig);
-
 var EllipsisHIcon$1 = EllipsisHIcon;
 
-const treeRow = (onCollapse, onCheckChange, onToggleRowDetails) => (value, { rowIndex, rowData }) => {
-    const { isExpanded, isDetailsExpanded, 'aria-level': level, 'aria-setsize': setsize, toggleAriaLabel, checkAriaLabel, showDetailsAriaLabel, isChecked, checkboxId, icon } = rowData.props;
-    const content = value.title || value;
-    const text = (React.createElement("div", { className: css(stylesTreeView.tableTreeViewText), key: "tree-view-text" },
-        icon && (React.createElement("span", { className: css(stylesTreeView.tableTreeViewIcon), key: "tree-view-text-icon" }, icon)),
-        React.createElement("span", { className: "pf-c-table__text", key: "table-text" }, content)));
-    const onChange = (isChecked, event) => {
-        onCheckChange(event, isChecked, rowIndex, content, rowData);
-    };
-    return {
-        component: 'th',
-        className: 'pf-c-table__tree-view-title-cell',
-        children: level !== undefined ? (React.createElement("div", { className: css(stylesTreeView.tableTreeViewMain) },
-            setsize > 0 && (React.createElement("span", { className: css(stylesTreeView.tableToggle), key: "table-toggle" },
-                React.createElement(Button, { variant: "plain", onClick: event => onCollapse && onCollapse(event, rowIndex, content, rowData), className: css(isExpanded && styles$1.modifiers.expanded), "aria-expanded": isExpanded, "aria-label": toggleAriaLabel || `${isExpanded ? 'Collapse' : 'Expand'} row ${rowIndex}` },
-                    React.createElement("div", { className: css(stylesTreeView.tableToggleIcon) },
-                        React.createElement(AngleDownIcon$1, { "aria-hidden": "true" }))))),
-            !!onCheckChange && (React.createElement("span", { className: css(stylesTreeView.tableCheck), key: "table-check" },
-                React.createElement("label", { htmlFor: checkboxId || `checkbox_${rowIndex}` },
-                    React.createElement(Checkbox, { id: checkboxId || `checkbox_${rowIndex}`, "aria-label": checkAriaLabel || `Row ${rowIndex} checkbox`, isChecked: isChecked, onChange: onChange })))),
-            text,
-            !!onToggleRowDetails && (React.createElement("span", { className: css(stylesTreeView.tableTreeViewDetailsToggle), key: "view-details-toggle" },
-                React.createElement(Button, { variant: "plain", "aria-expanded": isDetailsExpanded, "aria-label": showDetailsAriaLabel || 'Show row details', onClick: event => onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData) },
-                    React.createElement("span", { className: "pf-c-table__details-toggle-icon" },
-                        React.createElement(EllipsisHIcon$1, { "aria-hidden": true }))))))) : (text)
-    };
+const treeRow = (onCollapse, onCheckChange, onToggleRowDetails) => (value, {
+  rowIndex,
+  rowData
+}) => {
+  const {
+    isExpanded,
+    isDetailsExpanded,
+    'aria-level': level,
+    'aria-setsize': setsize,
+    toggleAriaLabel,
+    checkAriaLabel,
+    showDetailsAriaLabel,
+    isChecked,
+    checkboxId,
+    icon
+  } = rowData.props;
+  const content = value.title || value;
+  const text = React.createElement("div", {
+    className: css(stylesTreeView.tableTreeViewText),
+    key: "tree-view-text"
+  }, icon && React.createElement("span", {
+    className: css(stylesTreeView.tableTreeViewIcon),
+    key: "tree-view-text-icon"
+  }, icon), React.createElement("span", {
+    className: "pf-c-table__text",
+    key: "table-text"
+  }, content));
+
+  const onChange = (isChecked, event) => {
+    onCheckChange(event, isChecked, rowIndex, content, rowData);
+  };
+
+  return {
+    component: 'th',
+    className: 'pf-c-table__tree-view-title-cell',
+    children: level !== undefined ? React.createElement("div", {
+      className: css(stylesTreeView.tableTreeViewMain)
+    }, setsize > 0 && React.createElement("span", {
+      className: css(stylesTreeView.tableToggle),
+      key: "table-toggle"
+    }, React.createElement(Button, {
+      variant: "plain",
+      onClick: event => onCollapse && onCollapse(event, rowIndex, content, rowData),
+      className: css(isExpanded && styles$1.modifiers.expanded),
+      "aria-expanded": isExpanded,
+      "aria-label": toggleAriaLabel || `${isExpanded ? 'Collapse' : 'Expand'} row ${rowIndex}`
+    }, React.createElement("div", {
+      className: css(stylesTreeView.tableToggleIcon)
+    }, React.createElement(AngleDownIcon$1, {
+      "aria-hidden": "true"
+    })))), !!onCheckChange && React.createElement("span", {
+      className: css(stylesTreeView.tableCheck),
+      key: "table-check"
+    }, React.createElement("label", {
+      htmlFor: checkboxId || `checkbox_${rowIndex}`
+    }, React.createElement(Checkbox, {
+      id: checkboxId || `checkbox_${rowIndex}`,
+      "aria-label": checkAriaLabel || `Row ${rowIndex} checkbox`,
+      isChecked: isChecked,
+      onChange: onChange
+    }))), text, !!onToggleRowDetails && React.createElement("span", {
+      className: css(stylesTreeView.tableTreeViewDetailsToggle),
+      key: "view-details-toggle"
+    }, React.createElement(Button, {
+      variant: "plain",
+      "aria-expanded": isDetailsExpanded,
+      "aria-label": showDetailsAriaLabel || 'Show row details',
+      onClick: event => onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData)
+    }, React.createElement("span", {
+      className: "pf-c-table__details-toggle-icon"
+    }, React.createElement(EllipsisHIcon$1, {
+      "aria-hidden": true
+    }))))) : text
+  };
 };
 
-const TdBase = (_a) => {
-    var { children, 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 { 
+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.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));
+    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.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.forwardRef((props, ref) => (React.createElement(TdBase, Object.assign({}, props, { innerRef: ref }))));
+
+const Td = React.forwardRef((props, ref) => React.createElement(TdBase, Object.assign({}, props, {
+  innerRef: ref
+})));
 Td.displayName = 'Td';
 
 const SearchIconConfig = {
@@ -1220,9 +1762,8 @@ const SearchIconConfig = {
   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
 };
-
 const SearchIcon = createIcon(SearchIconConfig);
 
 const SecurityIconConfig = {
@@ -1231,9 +1772,8 @@ const SecurityIconConfig = {
   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);
 
 const DEFAULT_PAGE = 1;
@@ -1736,17 +2276,33 @@ const PackagesTable = ({
     const uniqueVulnerabilities = [..._vulnerabilities]; // augment vulnerabilities with link data
 
     uniqueVulnerabilities.forEach(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(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(rpm_nvra => {
-          const link_data = _rpms == null ? void 0 : _rpms.filter(pk => pk.nvra === rpm_nvra);
+        vulnerability == null ? void 0 : (_vulnerability$affect = vulnerability.affected_packages) == null ? void 0 : _vulnerability$affect.forEach(({
+          name,
+          version,
+          arch
+        }) => {
+          const link_data = _rpms == null ? void 0 : _rpms.filter(rpm => 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(p => {
+          var _p$rpm_nvra;
+
+          return p == null ? void 0 : (_p$rpm_nvra = p.rpm_nvra) == null ? void 0 : _p$rpm_nvra.forEach(rpm_nvra => {
+            const link_data = _rpms == null ? void 0 : _rpms.filter(pk => pk.nvra === rpm_nvra);
+            vulnerability.rpm_nvra_with_link_data.push(link_data[0]);
+          });
+        });
+      }
+
+      return vulnerability;
     }); // sort vulnerabilities by severity
 
     uniqueVulnerabilities.sort(vulnerability => severitySortOrder[vulnerability.severity]); // filter out vulnerabilities with duplicate CVE IDs