@rhc-shared-components/packages-table 1.0.4 → 1.0.6

package/dist/index.js

@@ -1,6 +1,8 @@
 var React = require('react');
 var reactCore = require('@patternfly/react-core');
 var lodash = require('lodash');
+var KeyboardHandler = require('@patternfly/react-core/dist/esm/helpers/KeyboardHandler');
+var ouia = require('@patternfly/react-core/dist/esm/helpers/OUIA/ouia');
 var helpers = require('@patternfly/react-core/dist/esm/helpers');
 var mergeWith = require('lodash/mergeWith');
 var Tooltip = require('@patternfly/react-core/dist/esm/components/Tooltip');
@@ -40,6 +42,24 @@ var mergeWith__default = /*#__PURE__*/_interopDefaultLegacy(mergeWith);
 
 var css_248z = ".vulnerabilities-table .impact-icon {\n  font-size: 1.5rem;\n  padding-right: 0.5rem;\n}\n.vulnerabilities-table .impact-icon.color-critical {\n  color: #a30000;\n}\n.vulnerabilities-table .impact-icon.color-important {\n  color: #ec7a08;\n}\n.vulnerabilities-table .impact-icon.color-moderate {\n  color: #f5c12e;\n}\n.vulnerabilities-table .impact-icon.color-low {\n  color: #777;\n}\n.vulnerabilities-table__affected-packages-cell {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.vulnerabilities-table__impact-cell {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n\n.filterable-table {\n  padding-bottom: var(--pf-v5-global--spacer--lg);\n}\n.filterable-table__bottom-pagination[class] {\n  margin-top: 1rem;\n}\n.filterable-table .pf-v5-c-toolbar__content {\n  --pf-v5-c-toolbar__content--PaddingRight: 0;\n  --pf-v5-c-toolbar__content--PaddingLeft: 0;\n}\n.filterable-table .pf-v5-c-input-group__text {\n  --pf-v5-c-input-group__text--PaddingRight: 0;\n}\n.filterable-table .pf-v5-c-pagination.pf-m-bottom {\n  --pf-v5-c-pagination--m-bottom--md--PaddingRight: 0;\n}\n\n.packages-table .pf-v5-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}";
 
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -54,103 +74,47 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-function __rest$1(s, e) {
+function __rest(s, e) {
   var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 }
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
   var e = new Error(message);
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-function __rest(s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-
 var currentId = 0;
 /**
  * Factory to create Icon class components for consumers
  */
-
 function createIcon(_ref) {
   var name = _ref.name,
-      _ref$xOffset = _ref.xOffset,
-      xOffset = _ref$xOffset === void 0 ? 0 : _ref$xOffset,
-      _ref$yOffset = _ref.yOffset,
-      yOffset = _ref$yOffset === void 0 ? 0 : _ref$yOffset,
-      width = _ref.width,
-      height = _ref.height,
-      svgPath = _ref.svgPath;
-
+    _ref$xOffset = _ref.xOffset,
+    xOffset = _ref$xOffset === void 0 ? 0 : _ref$xOffset,
+    _ref$yOffset = _ref.yOffset,
+    yOffset = _ref$yOffset === void 0 ? 0 : _ref$yOffset,
+    width = _ref.width,
+    height = _ref.height,
+    svgPath = _ref.svgPath;
   var _a;
-
   return _a = /*#__PURE__*/function (_React$Component) {
-    _inheritsLoose(SVGIcon, _React$Component);
-
     function SVGIcon() {
       var _this;
-
       _this = _React$Component.apply(this, arguments) || this;
       _this.id = "icon-title-" + currentId++;
       return _this;
     }
-
+    _inheritsLoose(SVGIcon, _React$Component);
     var _proto = SVGIcon.prototype;
-
     _proto.render = function render() {
-      var _a = this.props,
-          title = _a.title,
-          className = _a.className,
-          props = __rest(_a, ["title", "className"]);
-
+      var _b = this.props,
+        title = _b.title,
+        className = _b.className,
+        props = __rest(_b, ["title", "className"]);
       var classes = className ? "pf-v5-svg " + className : 'pf-v5-svg';
       var hasTitle = Boolean(title);
       var viewBox = [xOffset, yOffset, width, height].join(' ');
@@ -169,7 +133,6 @@ function createIcon(_ref) {
         d: svgPath
       }));
     };
-
     return SVGIcon;
   }(React__namespace.Component), _a.displayName = name, _a;
 }
@@ -187,47 +150,43 @@ var EllipsisVIcon$1 = EllipsisVIcon;
 
 var ActionsColumnBase = function ActionsColumnBase(_a) {
   var items = _a.items,
-      isDisabled = _a.isDisabled,
-      rowData = _a.rowData,
-      extraData = _a.extraData,
-      actionsToggle = _a.actionsToggle,
-      _a$popperProps = _a.popperProps,
-      popperProps = _a$popperProps === void 0 ? {
-    position: 'end',
-    direction: 'down'
-  } : _a$popperProps,
-      innerRef = _a.innerRef,
-      firstActionItemRef = _a.firstActionItemRef,
-      _a$isOnOpenChangeDisa = _a.isOnOpenChangeDisabled,
-      isOnOpenChangeDisabled = _a$isOnOpenChangeDisa === void 0 ? false : _a$isOnOpenChangeDisa,
-      props = __rest$1(_a, ["items", "isDisabled", "rowData", "extraData", "actionsToggle", "popperProps", "innerRef", "firstActionItemRef", "isOnOpenChangeDisabled"]);
-
+    isDisabled = _a.isDisabled,
+    rowData = _a.rowData,
+    extraData = _a.extraData,
+    actionsToggle = _a.actionsToggle,
+    _a$popperProps = _a.popperProps,
+    popperProps = _a$popperProps === void 0 ? {
+      position: 'end',
+      direction: 'down'
+    } : _a$popperProps,
+    innerRef = _a.innerRef,
+    firstActionItemRef = _a.firstActionItemRef,
+    _a$isOnOpenChangeDisa = _a.isOnOpenChangeDisabled,
+    isOnOpenChangeDisabled = _a$isOnOpenChangeDisa === void 0 ? false : _a$isOnOpenChangeDisa,
+    props = __rest(_a, ["items", "isDisabled", "rowData", "extraData", "actionsToggle", "popperProps", "innerRef", "firstActionItemRef", "isOnOpenChangeDisabled"]);
   var _React$useState = React__namespace.useState(false),
-      isOpen = _React$useState[0],
-      setIsOpen = _React$useState[1];
-
+    isOpen = _React$useState[0],
+    setIsOpen = _React$useState[1];
   var onToggle = function onToggle() {
     setIsOpen(!isOpen);
   };
-
   var onActionClick = function onActionClick(event, onClick) {
     // Only prevent default if onClick is provided.  This allows href support.
     if (onClick) {
-      event.preventDefault(); // tslint:disable-next-line:no-unused-expression
-
+      event.preventDefault();
+      // tslint:disable-next-line:no-unused-expression
       onClick(event, extraData && extraData.rowIndex, rowData, extraData);
     }
   };
-
   return React__namespace.createElement(React__namespace.Fragment, null, items.filter(function (item) {
     return item.isOutsideDropdown;
-  }) // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  })
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   .map(function (_a, key) {
     var title = _a.title,
-        itemKey = _a.itemKey,
-        _onClick = _a.onClick,
-        props = __rest$1(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
-
+      itemKey = _a.itemKey,
+      _onClick = _a.onClick,
+      props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
     return typeof title === 'string' ? React__namespace.createElement(Button.Button, Object.assign({
       onClick: function onClick(event) {
         return onActionClick(event, _onClick);
@@ -268,21 +227,19 @@ var ActionsColumnBase = function ActionsColumnBase(_a) {
     return !item.isOutsideDropdown;
   }).map(function (_a, index) {
     var title = _a.title,
-        itemKey = _a.itemKey,
-        _onClick2 = _a.onClick,
-        tooltipProps = _a.tooltipProps,
-        isSeparator = _a.isSeparator,
-        _a$shouldCloseOnClick = _a.shouldCloseOnClick,
-        shouldCloseOnClick = _a$shouldCloseOnClick === void 0 ? true : _a$shouldCloseOnClick,
-        props = __rest$1(_a, ["title", "itemKey", "onClick", "tooltipProps", "isSeparator", "shouldCloseOnClick"]);
-
+      itemKey = _a.itemKey,
+      _onClick2 = _a.onClick,
+      tooltipProps = _a.tooltipProps,
+      isSeparator = _a.isSeparator,
+      _a$shouldCloseOnClick = _a.shouldCloseOnClick,
+      shouldCloseOnClick = _a$shouldCloseOnClick === void 0 ? true : _a$shouldCloseOnClick,
+      props = __rest(_a, ["title", "itemKey", "onClick", "tooltipProps", "isSeparator", "shouldCloseOnClick"]);
     if (isSeparator) {
       return React__namespace.createElement(Divider.Divider, {
         key: itemKey || index,
         "data-key": itemKey || index
       });
     }
-
     var item = React__namespace.createElement(Dropdown.DropdownItem, Object.assign({
       onClick: function onClick(event) {
         onActionClick(event, _onClick2);
@@ -293,7 +250,6 @@ var ActionsColumnBase = function ActionsColumnBase(_a) {
       "data-key": itemKey || index,
       ref: index === 0 ? firstActionItemRef : undefined
     }), title);
-
     if (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) {
       return React__namespace.createElement(Tooltip.Tooltip, Object.assign({
         key: itemKey || index
@@ -303,7 +259,6 @@ var ActionsColumnBase = function ActionsColumnBase(_a) {
     }
   }))));
 };
-
 var ActionsColumn = React__namespace.forwardRef(function (props, ref) {
   return React__namespace.createElement(ActionsColumnBase, Object.assign({}, props, {
     innerRef: ref
@@ -332,12 +287,10 @@ function css() {
   var hasOwn = {}.hasOwnProperty;
   [].slice.call(arguments).filter(Boolean).forEach(function (arg) {
     var argType = typeof arg;
-
     if (argType === 'string' || argType === 'number') {
       classes.push(arg);
     } else if (Array.isArray(arg) && arg.length) {
       var inner = css.apply(void 0, arg);
-
       if (inner) {
         classes.push(inner);
       }
@@ -445,13 +398,12 @@ var styles$1 = {
 
 var CollapseColumn = function CollapseColumn(_a) {
   var _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
-      _a$children = _a.children,
-      children = _a$children === void 0 ? null : _a$children,
-      isOpen = _a.isOpen,
-      onToggle = _a.onToggle,
-      props = __rest$1(_a, ["className", "children", "isOpen", "onToggle"]);
-
+    className = _a$className === void 0 ? '' : _a$className,
+    _a$children = _a.children,
+    children = _a$children === void 0 ? null : _a$children,
+    isOpen = _a.isOpen,
+    onToggle = _a.onToggle,
+    props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
   return React__namespace.createElement(React__namespace.Fragment, null, isOpen !== undefined && React__namespace.createElement(Button.Button, Object.assign({
     className: css(className, isOpen && styles$1.modifiers.expanded)
   }, props, {
@@ -478,11 +430,10 @@ var GripVerticalIcon$1 = GripVerticalIcon;
 
 var DraggableCell = function DraggableCell(_a) {
   var className = _a.className,
-      onClick = _a.onClick,
-      ariaLabel = _a['aria-label'],
-      id = _a.id,
-      props = __rest$1(_a, ["className", "onClick", 'aria-label', "id"]);
-
+    onClick = _a.onClick,
+    ariaLabel = _a['aria-label'],
+    id = _a.id,
+    props = __rest(_a, ["className", "onClick", 'aria-label', "id"]);
   return React__namespace.createElement(Button.Button, Object.assign({
     id: id,
     variant: "plain",
@@ -531,14 +482,11 @@ var HelpIcon = createIcon(HelpIconConfig);
 var HelpIcon$1 = HelpIcon;
 
 var TableTextVariant;
-
 (function (TableTextVariant) {
   TableTextVariant["div"] = "div";
   TableTextVariant["nav"] = "nav";
 })(TableTextVariant || (TableTextVariant = {}));
-
 var WrapModifier;
-
 (function (WrapModifier) {
   WrapModifier["wrap"] = "wrap";
   WrapModifier["nowrap"] = "nowrap";
@@ -546,45 +494,39 @@ var WrapModifier;
   WrapModifier["breakWord"] = "breakWord";
   WrapModifier["fitContent"] = "fitContent";
 })(WrapModifier || (WrapModifier = {}));
-
 var TableText = function TableText(_a) {
   var _a$children = _a.children,
-      children = _a$children === void 0 ? null : _a$children,
-      _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
-      _a$variant = _a.variant,
-      variant = _a$variant === void 0 ? 'span' : _a$variant,
-      _a$wrapModifier = _a.wrapModifier,
-      wrapModifier = _a$wrapModifier === void 0 ? null : _a$wrapModifier,
-      _a$tooltip = _a.tooltip,
-      tooltipProp = _a$tooltip === void 0 ? '' : _a$tooltip,
-      _a$tooltipProps = _a.tooltipProps,
-      tooltipProps = _a$tooltipProps === void 0 ? {} : _a$tooltipProps,
-      _a$onMouseEnter = _a.onMouseEnter,
-      onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
-      _a$focused = _a.focused,
-      focused = _a$focused === void 0 ? false : _a$focused,
-      _a$tooltipHasDefaultB = _a.tooltipHasDefaultBehavior,
-      tooltipHasDefaultBehavior = _a$tooltipHasDefaultB === void 0 ? false : _a$tooltipHasDefaultB,
-      props = __rest$1(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter", "focused", "tooltipHasDefaultBehavior"]);
-
+    children = _a$children === void 0 ? null : _a$children,
+    _a$className = _a.className,
+    className = _a$className === void 0 ? '' : _a$className,
+    _a$variant = _a.variant,
+    variant = _a$variant === void 0 ? 'span' : _a$variant,
+    _a$wrapModifier = _a.wrapModifier,
+    wrapModifier = _a$wrapModifier === void 0 ? null : _a$wrapModifier,
+    _a$tooltip = _a.tooltip,
+    tooltipProp = _a$tooltip === void 0 ? '' : _a$tooltip,
+    _a$tooltipProps = _a.tooltipProps,
+    tooltipProps = _a$tooltipProps === void 0 ? {} : _a$tooltipProps,
+    _a$onMouseEnter = _a.onMouseEnter,
+    onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
+    _a$focused = _a.focused,
+    focused = _a$focused === void 0 ? false : _a$focused,
+    _a$tooltipHasDefaultB = _a.tooltipHasDefaultBehavior,
+    tooltipHasDefaultBehavior = _a$tooltipHasDefaultB === void 0 ? false : _a$tooltipHasDefaultB,
+    props = __rest(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter", "focused", "tooltipHasDefaultBehavior"]);
   var Component = variant;
   var textRef = React__namespace.createRef();
-
   var _React$useState = React__namespace.useState(tooltipProp),
-      tooltip = _React$useState[0],
-      setTooltip = _React$useState[1];
-
+    tooltip = _React$useState[0],
+    setTooltip = _React$useState[1];
   var onMouseEnter = function onMouseEnter(event) {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(tooltipProp || event.target.innerText);
     } else {
       setTooltip('');
     }
-
     onMouseEnterProp(event);
   };
-
   var onFocus = function onFocus(element) {
     if (element.offsetWidth < element.scrollWidth) {
       setTooltip(tooltipProp || element.innerText);
@@ -592,7 +534,6 @@ var TableText = function TableText(_a) {
       setTooltip('');
     }
   };
-
   var text = React__namespace.createElement(Component, Object.assign({
     ref: textRef,
     onMouseEnter: !tooltipHasDefaultBehavior ? onMouseEnter : undefined,
@@ -618,13 +559,13 @@ TableText.displayName = 'TableText';
 
 var HeaderCellInfoWrapper = function HeaderCellInfoWrapper(_ref) {
   var children = _ref.children,
-      info = _ref.info,
-      className = _ref.className,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
-      popoverProps = _ref.popoverProps,
-      tooltipProps = _ref.tooltipProps,
-      ariaLabel = _ref.ariaLabel;
+    info = _ref.info,
+    className = _ref.className,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
+    popoverProps = _ref.popoverProps,
+    tooltipProps = _ref.tooltipProps,
+    ariaLabel = _ref.ariaLabel;
   return React__namespace.createElement("div", {
     className: css(styles$1.tableColumnHelp, className)
   }, typeof children === 'string' ? React__namespace.createElement(TableText, null, children) : children, React__namespace.createElement("span", {
@@ -712,22 +653,19 @@ var treeViewStyles = {
 };
 
 var RowSelectVariant;
-
 (function (RowSelectVariant) {
   RowSelectVariant["radio"] = "radio";
   RowSelectVariant["checkbox"] = "checkbox";
 })(RowSelectVariant || (RowSelectVariant = {}));
-
 var SelectColumn = function SelectColumn(_a) {
   var _a$children = _a.children,
-      children = _a$children === void 0 ? null : _a$children,
-      _a$onSelect = _a.onSelect,
-      onSelect = _a$onSelect === void 0 ? null : _a$onSelect,
-      selectVariant = _a.selectVariant,
-      tooltip = _a.tooltip,
-      tooltipProps = _a.tooltipProps,
-      props = __rest$1(_a, ["children", "className", "onSelect", "selectVariant", "tooltip", "tooltipProps"]);
-
+    children = _a$children === void 0 ? null : _a$children,
+    _a$onSelect = _a.onSelect,
+    onSelect = _a$onSelect === void 0 ? null : _a$onSelect,
+    selectVariant = _a.selectVariant,
+    tooltip = _a.tooltip,
+    tooltipProps = _a.tooltipProps,
+    props = __rest(_a, ["children", "className", "onSelect", "selectVariant", "tooltip", "tooltipProps"]);
   var inputRef = React__namespace.createRef();
   var content = React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("label", null, React__namespace.createElement("input", Object.assign({}, props, {
     ref: inputRef,
@@ -756,41 +694,37 @@ var checkStyles = {
 
 var selectable = function selectable(label, _ref) {
   var rowIndex = _ref.rowIndex,
-      columnIndex = _ref.columnIndex,
-      rowData = _ref.rowData,
-      column = _ref.column,
-      property = _ref.property,
-      tooltip = _ref.tooltip;
+    columnIndex = _ref.columnIndex,
+    rowData = _ref.rowData,
+    column = _ref.column,
+    property = _ref.property,
+    tooltip = _ref.tooltip;
   var _column$extraParams = column.extraParams,
-      onSelect = _column$extraParams.onSelect,
-      selectVariant = _column$extraParams.selectVariant,
-      allRowsSelected = _column$extraParams.allRowsSelected,
-      isHeaderSelectDisabled = _column$extraParams.isHeaderSelectDisabled;
+    onSelect = _column$extraParams.onSelect,
+    selectVariant = _column$extraParams.selectVariant,
+    allRowsSelected = _column$extraParams.allRowsSelected,
+    isHeaderSelectDisabled = _column$extraParams.isHeaderSelectDisabled;
   var extraData = {
     rowIndex: rowIndex,
     columnIndex: columnIndex,
     column: column,
     property: property
   };
-
   if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect && !rowData.fullWidth) {
     return {
       component: 'td',
       isVisible: true
     };
   }
-
   var rowId = rowIndex !== undefined ? rowIndex : -1;
   /**
    * @param {React.FormEvent} event - React form event
    */
-
   function selectClick(event) {
-    var selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected; // tslint:disable-next-line:no-unused-expression
-
+    var selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected;
+    // tslint:disable-next-line:no-unused-expression
     onSelect && onSelect(event, selected, rowId, rowData, extraData);
   }
-
   var customProps = Object.assign(Object.assign(Object.assign({}, rowId !== -1 ? {
     checked: rowData && !!rowData.selected,
     'aria-label': "Select row " + rowIndex
@@ -804,13 +738,11 @@ var selectable = function selectable(label, _ref) {
     disabled: true
   });
   var selectName = 'check-all';
-
   if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
     selectName = "checkrow" + rowIndex;
   } else if (rowId !== -1) {
     selectName = 'radioGroup';
   }
-
   return {
     className: css(styles$1.tableCheck),
     component: rowId !== -1 ? 'td' : 'th',
@@ -858,42 +790,36 @@ var ArrowsAltVIcon = createIcon(ArrowsAltVIconConfig);
 var ArrowsAltVIcon$1 = ArrowsAltVIcon;
 
 var SortByDirection;
-
 (function (SortByDirection) {
   SortByDirection["asc"] = "asc";
   SortByDirection["desc"] = "desc";
 })(SortByDirection || (SortByDirection = {}));
-
 var SortColumn = function SortColumn(_a) {
   var _a$children = _a.children,
-      children = _a$children === void 0 ? null : _a$children,
-      _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
-      _a$isSortedBy = _a.isSortedBy,
-      isSortedBy = _a$isSortedBy === void 0 ? false : _a$isSortedBy,
-      _a$onSort = _a.onSort,
-      onSort = _a$onSort === void 0 ? null : _a$onSort,
-      _a$sortDirection = _a.sortDirection,
-      sortDirection = _a$sortDirection === void 0 ? '' : _a$sortDirection,
-      _a$type = _a.type,
-      type = _a$type === void 0 ? 'button' : _a$type,
-      tooltip = _a.tooltip,
-      tooltipProps = _a.tooltipProps,
-      tooltipHasDefaultBehavior = _a.tooltipHasDefaultBehavior,
-      props = __rest$1(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type", "tooltip", "tooltipProps", "tooltipHasDefaultBehavior"]);
-
+    children = _a$children === void 0 ? null : _a$children,
+    _a$className = _a.className,
+    className = _a$className === void 0 ? '' : _a$className,
+    _a$isSortedBy = _a.isSortedBy,
+    isSortedBy = _a$isSortedBy === void 0 ? false : _a$isSortedBy,
+    _a$onSort = _a.onSort,
+    onSort = _a$onSort === void 0 ? null : _a$onSort,
+    _a$sortDirection = _a.sortDirection,
+    sortDirection = _a$sortDirection === void 0 ? '' : _a$sortDirection,
+    _a$type = _a.type,
+    type = _a$type === void 0 ? 'button' : _a$type,
+    tooltip = _a.tooltip,
+    tooltipProps = _a.tooltipProps,
+    tooltipHasDefaultBehavior = _a.tooltipHasDefaultBehavior,
+    props = __rest(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type", "tooltip", "tooltipProps", "tooltipHasDefaultBehavior"]);
   var SortedByIcon;
-
   var _React$useState = React__namespace.useState(false),
-      focused = _React$useState[0],
-      setFocused = _React$useState[1];
-
+    focused = _React$useState[0],
+    setFocused = _React$useState[1];
   if (isSortedBy) {
     SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon$1 : LongArrowAltDownIcon$1;
   } else {
     SortedByIcon = ArrowsAltVIcon$1;
   }
-
   return React__namespace.createElement("button", Object.assign({}, props, {
     type: type,
     className: css(className, styles$1.tableButton),
@@ -952,16 +878,16 @@ var sortableFavorites = function sortableFavorites(sort) {
 };
 var sortable = function sortable(label, _ref) {
   var columnIndex = _ref.columnIndex,
-      column = _ref.column,
-      property = _ref.property,
-      className = _ref.className,
-      ariaLabel = _ref.ariaLabel,
-      tooltip = _ref.tooltip,
-      tooltipProps = _ref.tooltipProps,
-      tooltipHasDefaultBehavior = _ref.tooltipHasDefaultBehavior;
+    column = _ref.column,
+    property = _ref.property,
+    className = _ref.className,
+    ariaLabel = _ref.ariaLabel,
+    tooltip = _ref.tooltip,
+    tooltipProps = _ref.tooltipProps,
+    tooltipHasDefaultBehavior = _ref.tooltipHasDefaultBehavior;
   var _column$extraParams = column.extraParams,
-      sortBy = _column$extraParams.sortBy,
-      onSort = _column$extraParams.onSort;
+    sortBy = _column$extraParams.sortBy,
+    onSort = _column$extraParams.onSort;
   var extraData = {
     columnIndex: columnIndex,
     column: column,
@@ -971,23 +897,21 @@ var sortable = function sortable(label, _ref) {
   /**
    * @param {React.MouseEvent} event - React mouse event
    */
-
   function sortClicked(event) {
     var reversedDirection;
-
     if (!isSortedBy) {
       reversedDirection = sortBy.defaultDirection ? sortBy.defaultDirection : SortByDirection.asc;
     } else {
       reversedDirection = sortBy.direction === SortByDirection.asc ? SortByDirection.desc : SortByDirection.asc;
-    } // tslint:disable-next-line:no-unused-expression
-
-
+    }
+    // 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',
+  return Object.assign(Object.assign({
+    className: css(styles$1.tableSort, isSortedBy && styles$1.modifiers.selected, className)
+  }, isSortedBy && {
+    'aria-sort': sortBy.direction + "ending"
+  }), {
     children: React__namespace.createElement(SortColumn, {
       isSortedBy: isSortedBy,
       sortDirection: isSortedBy ? sortBy.direction : '',
@@ -997,23 +921,22 @@ var sortable = function sortable(label, _ref) {
       tooltipProps: tooltipProps,
       tooltipHasDefaultBehavior: tooltipHasDefaultBehavior
     }, label)
-  };
+  });
 };
 
 var resolveOrDefault = function resolveOrDefault(resolver, defaultValue, rowData, extraData) {
   return typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue;
 };
-
 var cellActions = function cellActions(actions, actionResolver, areActionsDisabled) {
   return function (label, _ref) {
     var rowData = _ref.rowData,
-        column = _ref.column,
-        rowIndex = _ref.rowIndex,
-        columnIndex = _ref.columnIndex,
-        _ref$column$extraPara = _ref.column.extraParams,
-        actionsToggle = _ref$column$extraPara.actionsToggle,
-        actionsPopperProps = _ref$column$extraPara.actionsPopperProps,
-        property = _ref.property;
+      column = _ref.column,
+      rowIndex = _ref.rowIndex,
+      columnIndex = _ref.columnIndex,
+      _ref$column$extraPara = _ref.column.extraParams,
+      actionsToggle = _ref$column$extraPara.actionsToggle,
+      actionsPopperProps = _ref$column$extraPara.actionsPopperProps,
+      property = _ref.property;
     var extraData = {
       rowIndex: rowIndex,
       columnIndex: columnIndex,
@@ -1045,14 +968,12 @@ var cellActions = function cellActions(actions, actionResolver, areActionsDisabl
 var camelize = function camelize(s) {
   return s.toUpperCase().replace('-', '').replace('_', '');
 };
-
 var toCamel = function toCamel(s) {
   return s.replace(/([-_][a-z])/gi, camelize);
 };
 /**
  * @param {string} input - String to capitalize
  */
-
 function capitalize(input) {
   return input[0].toUpperCase() + input.substring(1);
 }
@@ -1067,18 +988,18 @@ var cellWidth = function cellWidth(width) {
 
 var collapsible = function collapsible(value, _ref) {
   var rowIndex = _ref.rowIndex,
-      columnIndex = _ref.columnIndex,
-      rowData = _ref.rowData,
-      column = _ref.column,
-      property = _ref.property;
+    columnIndex = _ref.columnIndex,
+    rowData = _ref.rowData,
+    column = _ref.column,
+    property = _ref.property;
   var _column$extraParams = column.extraParams,
-      onCollapse = _column$extraParams.onCollapse,
-      _column$extraParams$r = _column$extraParams.rowLabeledBy,
-      rowLabeledBy = _column$extraParams$r === void 0 ? 'simple-node' : _column$extraParams$r,
-      _column$extraParams$e = _column$extraParams.expandId,
-      expandId = _column$extraParams$e === void 0 ? 'expand-toggle' : _column$extraParams$e,
-      allRowsExpanded = _column$extraParams.allRowsExpanded,
-      collapseAllAriaLabel = _column$extraParams.collapseAllAriaLabel;
+    onCollapse = _column$extraParams.onCollapse,
+    _column$extraParams$r = _column$extraParams.rowLabeledBy,
+    rowLabeledBy = _column$extraParams$r === void 0 ? 'simple-node' : _column$extraParams$r,
+    _column$extraParams$e = _column$extraParams.expandId,
+    expandId = _column$extraParams$e === void 0 ? 'expand-toggle' : _column$extraParams$e,
+    allRowsExpanded = _column$extraParams.allRowsExpanded,
+    collapseAllAriaLabel = _column$extraParams.collapseAllAriaLabel;
   var extraData = {
     rowIndex: rowIndex,
     columnIndex: columnIndex,
@@ -1096,13 +1017,11 @@ var collapsible = function collapsible(value, _ref) {
   /**
    * @param {React.MouseEvent} event - Mouse event
    */
-
   function onToggle(event) {
-    var open = rowData ? !rowData.isOpen : !allRowsExpanded; // tslint:disable-next-line:no-unused-expression
-
+    var open = rowData ? !rowData.isOpen : !allRowsExpanded;
+    // tslint:disable-next-line:no-unused-expression
     onCollapse && onCollapse(event, rowIndex, open, rowData, extraData);
   }
-
   return {
     className: ((rowData === null || rowData === void 0 ? void 0 : rowData.isOpen) !== undefined || rowId === -1) && css(styles$1.tableToggle),
     isVisible: !(rowData === null || rowData === void 0 ? void 0 : rowData.fullWidth),
@@ -1116,21 +1035,19 @@ var collapsible = function collapsible(value, _ref) {
 
 var compoundExpand = function compoundExpand(value, _ref) {
   var rowIndex = _ref.rowIndex,
-      columnIndex = _ref.columnIndex,
-      rowData = _ref.rowData,
-      column = _ref.column,
-      property = _ref.property;
-
+    columnIndex = _ref.columnIndex,
+    rowData = _ref.rowData,
+    column = _ref.column,
+    property = _ref.property;
   if (!value) {
     return null;
   }
-
   var title = value.title,
-      props = value.props;
+    props = value.props;
   var _column$extraParams = column.extraParams,
-      onExpand = _column$extraParams.onExpand,
-      _column$extraParams$e = _column$extraParams.expandId,
-      expandId = _column$extraParams$e === void 0 ? 'expand-toggle' : _column$extraParams$e;
+    onExpand = _column$extraParams.onExpand,
+    _column$extraParams$e = _column$extraParams.expandId,
+    expandId = _column$extraParams$e === void 0 ? 'expand-toggle' : _column$extraParams$e;
   var extraData = {
     rowIndex: rowIndex,
     columnIndex: columnIndex,
@@ -1140,12 +1057,10 @@ var compoundExpand = function compoundExpand(value, _ref) {
   /**
    * @param {React.MouseEvent} event - Mouse event
    */
-
   function onToggle(event) {
     // tslint:disable-next-line:no-unused-expression
     onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
   }
-
   return {
     className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
     children: props.isOpen !== undefined && React__namespace.createElement("button", {
@@ -1178,12 +1093,11 @@ var classNames = function classNames() {
 
 var info = function info(_ref) {
   var tooltip = _ref.tooltip,
-      tooltipProps = _ref.tooltipProps,
-      popover = _ref.popover,
-      popoverProps = _ref.popoverProps,
-      className = _ref.className,
-      ariaLabel = _ref.ariaLabel;
-
+    tooltipProps = _ref.tooltipProps,
+    popover = _ref.popover,
+    popoverProps = _ref.popoverProps,
+    className = _ref.className,
+    ariaLabel = _ref.ariaLabel;
   var infoObj = function infoObj(value) {
     return {
       className: styles$1.modifiers.help,
@@ -1202,18 +1116,16 @@ var info = function info(_ref) {
       }, value)
     };
   };
-
   return infoObj;
 };
 
 var FavoritesCell = function FavoritesCell(_a) {
   var _a$className = _a.className,
-      className = _a$className === void 0 ? '' : _a$className,
-      onFavorite = _a.onFavorite,
-      isFavorited = _a.isFavorited,
-      rowIndex = _a.rowIndex,
-      props = __rest$1(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
-
+    className = _a$className === void 0 ? '' : _a$className,
+    onFavorite = _a.onFavorite,
+    isFavorited = _a.isFavorited,
+    rowIndex = _a.rowIndex,
+    props = __rest(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
   var ariaProps = rowIndex === undefined ? {} : {
     id: "favorites-button-" + rowIndex,
     'aria-labelledby': "favorites-button-" + rowIndex
@@ -1232,18 +1144,18 @@ FavoritesCell.displayName = 'FavoritesCell';
 
 var favoritable = function favoritable(value, _ref) {
   var rowIndex = _ref.rowIndex,
-      columnIndex = _ref.columnIndex,
-      rowData = _ref.rowData,
-      column = _ref.column,
-      property = _ref.property;
+    columnIndex = _ref.columnIndex,
+    rowData = _ref.rowData,
+    column = _ref.column,
+    property = _ref.property;
   var onFavorite = column.extraParams.onFavorite;
   var extraData = {
     rowIndex: rowIndex,
     columnIndex: columnIndex,
     column: column,
     property: property
-  }; // this is a child row which should not display the favorites icon
-
+  };
+  // this is a child row which should not display the favorites icon
   if (rowData && rowData.hasOwnProperty('parent') && !rowData.fullWidth) {
     return {
       component: 'td',
@@ -1253,13 +1165,10 @@ var favoritable = function favoritable(value, _ref) {
   /**
    * @param {React.MouseEvent} event - Mouse event
    */
-
-
   function favoritesClick(event) {
     // tslint:disable-next-line:no-unused-expression
     onFavorite && onFavorite(event, rowData && !rowData.favorited, rowIndex, rowData, extraData);
   }
-
   var additionalProps = rowData.favoritesProps || {};
   return {
     className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
@@ -1286,18 +1195,18 @@ var EllipsisHIcon$1 = EllipsisHIcon;
 var treeRow = function treeRow(onCollapse, onCheckChange, onToggleRowDetails) {
   return function (value, _ref) {
     var rowIndex = _ref.rowIndex,
-        rowData = _ref.rowData;
+      rowData = _ref.rowData;
     var _rowData$props = rowData.props,
-        isExpanded = _rowData$props.isExpanded,
-        isDetailsExpanded = _rowData$props.isDetailsExpanded,
-        level = _rowData$props['aria-level'],
-        setsize = _rowData$props['aria-setsize'],
-        toggleAriaLabel = _rowData$props.toggleAriaLabel,
-        checkAriaLabel = _rowData$props.checkAriaLabel,
-        showDetailsAriaLabel = _rowData$props.showDetailsAriaLabel,
-        isChecked = _rowData$props.isChecked,
-        checkboxId = _rowData$props.checkboxId,
-        icon = _rowData$props.icon;
+      isExpanded = _rowData$props.isExpanded,
+      isDetailsExpanded = _rowData$props.isDetailsExpanded,
+      level = _rowData$props['aria-level'],
+      setsize = _rowData$props['aria-setsize'],
+      toggleAriaLabel = _rowData$props.toggleAriaLabel,
+      checkAriaLabel = _rowData$props.checkAriaLabel,
+      showDetailsAriaLabel = _rowData$props.showDetailsAriaLabel,
+      isChecked = _rowData$props.isChecked,
+      checkboxId = _rowData$props.checkboxId,
+      icon = _rowData$props.icon;
     var content = value.title || value;
     var text = React__namespace.createElement("div", {
       className: css(treeViewStyles.tableTreeViewText),
@@ -1309,11 +1218,9 @@ var treeRow = function treeRow(onCollapse, onCheckChange, onToggleRowDetails) {
       className: styles$1.tableText,
       key: "table-text"
     }, content));
-
     var _onChange = function onChange(isChecked, event) {
       onCheckChange(event, isChecked, rowIndex, content, rowData);
     };
-
     return {
       component: 'th',
       className: treeViewStyles.tableTreeViewTitleCell,
@@ -1366,7 +1273,6 @@ var treeRow = function treeRow(onCollapse, onCheckChange, onToggleRowDetails) {
 };
 
 var TableGridBreakpoint;
-
 (function (TableGridBreakpoint) {
   TableGridBreakpoint["none"] = "";
   TableGridBreakpoint["grid"] = "grid";
@@ -1375,9 +1281,7 @@ var TableGridBreakpoint;
   TableGridBreakpoint["gridXl"] = "grid-xl";
   TableGridBreakpoint["grid2xl"] = "grid-2xl";
 })(TableGridBreakpoint || (TableGridBreakpoint = {}));
-
 var TableVariant;
-
 (function (TableVariant) {
   TableVariant["compact"] = "compact";
 })(TableVariant || (TableVariant = {}));
@@ -1385,58 +1289,51 @@ var TableVariant;
 var TableContext = React__namespace.createContext({
   registerSelectableRow: function registerSelectableRow() {}
 });
-
 var TableBase = function TableBase(_a) {
   var _b, _c;
-
   var children = _a.children,
-      className = _a.className,
-      variant = _a.variant,
-      _a$borders = _a.borders,
-      borders = _a$borders === void 0 ? true : _a$borders,
-      _a$isStickyHeader = _a.isStickyHeader,
-      isStickyHeader = _a$isStickyHeader === void 0 ? false : _a$isStickyHeader,
-      _a$gridBreakPoint = _a.gridBreakPoint,
-      gridBreakPoint = _a$gridBreakPoint === void 0 ? TableGridBreakpoint.gridMd : _a$gridBreakPoint,
-      ariaLabel = _a['aria-label'],
-      _a$role = _a.role,
-      role = _a$role === void 0 ? 'grid' : _a$role,
-      innerRef = _a.innerRef,
-      ouiaId = _a.ouiaId,
-      _a$ouiaSafe = _a.ouiaSafe,
-      ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
-      _a$isTreeTable = _a.isTreeTable,
-      isTreeTable = _a$isTreeTable === void 0 ? false : _a$isTreeTable,
-      _a$isNested = _a.isNested,
-      isNested = _a$isNested === void 0 ? false : _a$isNested,
-      _a$isStriped = _a.isStriped,
-      isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
-      _a$isExpandable = _a.isExpandable,
-      isExpandable = _a$isExpandable === void 0 ? false : _a$isExpandable,
-      _a$hasNoInset = _a.hasNoInset,
-      hasNoInset = _a$hasNoInset === void 0 ? false : _a$hasNoInset,
-      selectableRowCaptionText = _a.selectableRowCaptionText,
-      props = __rest$1(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "hasNoInset", "nestedHeaderColumnSpans", "selectableRowCaptionText"]);
-
+    className = _a.className,
+    variant = _a.variant,
+    _a$borders = _a.borders,
+    borders = _a$borders === void 0 ? true : _a$borders,
+    _a$isStickyHeader = _a.isStickyHeader,
+    isStickyHeader = _a$isStickyHeader === void 0 ? false : _a$isStickyHeader,
+    _a$gridBreakPoint = _a.gridBreakPoint,
+    gridBreakPoint = _a$gridBreakPoint === void 0 ? TableGridBreakpoint.gridMd : _a$gridBreakPoint,
+    ariaLabel = _a['aria-label'],
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'grid' : _a$role,
+    innerRef = _a.innerRef,
+    ouiaId = _a.ouiaId,
+    _a$ouiaSafe = _a.ouiaSafe,
+    ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
+    _a$isTreeTable = _a.isTreeTable,
+    isTreeTable = _a$isTreeTable === void 0 ? false : _a$isTreeTable,
+    _a$isNested = _a.isNested,
+    isNested = _a$isNested === void 0 ? false : _a$isNested,
+    _a$isStriped = _a.isStriped,
+    isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
+    _a$isExpandable = _a.isExpandable,
+    isExpandable = _a$isExpandable === void 0 ? false : _a$isExpandable,
+    _a$hasNoInset = _a.hasNoInset,
+    hasNoInset = _a$hasNoInset === void 0 ? false : _a$hasNoInset,
+    selectableRowCaptionText = _a.selectableRowCaptionText,
+    props = __rest(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "hasNoInset", "nestedHeaderColumnSpans", "selectableRowCaptionText"]);
   var ref = React__namespace.useRef(null);
   var tableRef = innerRef || ref;
-
   var _React$useState = React__namespace.useState(false),
-      hasSelectableRows = _React$useState[0],
-      setHasSelectableRows = _React$useState[1];
-
+    hasSelectableRows = _React$useState[0],
+    setHasSelectableRows = _React$useState[1];
   var _React$useState2 = React__namespace.useState(),
-      tableCaption = _React$useState2[0],
-      setTableCaption = _React$useState2[1];
-
+    tableCaption = _React$useState2[0],
+    setTableCaption = _React$useState2[1];
   React__namespace.useEffect(function () {
-    document.addEventListener('keydown', handleKeys); // sets up roving tab-index to tree tables only
-
+    document.addEventListener('keydown', handleKeys);
+    // sets up roving tab-index to tree tables only
     if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
       var tbody = tableRef.current.querySelector('tbody');
-      tbody && reactCore.setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
+      tbody && KeyboardHandler.setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
     }
-
     return function cleanup() {
       document.removeEventListener('keydown', handleKeys);
     };
@@ -1452,41 +1349,35 @@ var TableBase = function TableBase(_a) {
       }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter."));
     }
   }, [selectableRowCaptionText]);
-  var ouiaProps = reactCore.useOUIAProps('Table', ouiaId, ouiaSafe);
+  var ouiaProps = ouia.useOUIAProps('Table', ouiaId, ouiaSafe);
   var grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
   var breakPointPrefix = "treeView" + (gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1));
   var treeGrid = (_c = treeViewStyles.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
-
   var handleKeys = function handleKeys(event) {
-    if (isNested || !(tableRef && tableRef.current && tableRef.current.classList.contains(treeViewStyles.modifiers.treeView)) || // implements roving tab-index to tree tables only
+    if (isNested || !(tableRef && tableRef.current && tableRef.current.classList.contains(treeViewStyles.modifiers.treeView)) ||
+    // implements roving tab-index to tree tables only
     tableRef && tableRef.current !== event.target.closest("." + styles$1.table + ":not(.pf-m-nested)")) {
       return;
     }
-
     var activeElement = document.activeElement;
     var key = event.key;
     var rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter(function (el) {
       return !el.classList.contains('pf-m-disabled') && !el.hidden;
     });
-
     if (key === 'Space' || key === 'Enter') {
       activeElement.click();
       event.preventDefault();
     }
-
     var getFocusableElement = function getFocusableElement(element) {
       return element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
     };
-
-    reactCore.handleArrows(event, rows, function (element) {
+    KeyboardHandler.handleArrows(event, rows, function (element) {
       return element === activeElement.closest('tr');
     }, getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
   };
-
   var registerSelectableRow = function registerSelectableRow() {
     !hasSelectableRows && setHasSelectableRows(true);
   };
-
   return React__namespace.createElement(TableContext.Provider, {
     value: {
       registerSelectableRow: registerSelectableRow
@@ -1500,7 +1391,6 @@ var TableBase = function TableBase(_a) {
     role: 'treegrid'
   }, ouiaProps, props), hasSelectableRows && tableCaption, children));
 };
-
 var Table = React__namespace.forwardRef(function (props, ref) {
   return React__namespace.createElement(TableBase, Object.assign({}, props, {
     innerRef: ref
@@ -1510,38 +1400,36 @@ Table.displayName = 'Table';
 
 var TrBase = function TrBase(_a) {
   var children = _a.children,
-      className = _a.className,
-      isExpanded = _a.isExpanded,
-      isEditable = _a.isEditable,
-      _a$isHidden = _a.isHidden,
-      isHidden = _a$isHidden === void 0 ? false : _a$isHidden,
-      _a$isClickable = _a.isClickable,
-      isClickable = _a$isClickable === void 0 ? false : _a$isClickable,
-      _a$isRowSelected = _a.isRowSelected,
-      isRowSelected = _a$isRowSelected === void 0 ? false : _a$isRowSelected,
-      _a$isStriped = _a.isStriped,
-      isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
-      _a$isBorderRow = _a.isBorderRow,
-      isBorderRow = _a$isBorderRow === void 0 ? false : _a$isBorderRow,
-      innerRef = _a.innerRef,
-      ouiaId = _a.ouiaId,
-      _a$ouiaSafe = _a.ouiaSafe,
-      ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
-      _a$resetOffset = _a.resetOffset,
-      resetOffset = _a$resetOffset === void 0 ? false : _a$resetOffset,
-      onRowClick = _a.onRowClick,
-      isSelectable = _a.isSelectable,
-      passedAriaLabel = _a['aria-label'],
-      props = __rest$1(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isClickable", "isRowSelected", "isStriped", "isBorderRow", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
-
+    className = _a.className,
+    isExpanded = _a.isExpanded,
+    isEditable = _a.isEditable,
+    _a$isHidden = _a.isHidden,
+    isHidden = _a$isHidden === void 0 ? false : _a$isHidden,
+    _a$isClickable = _a.isClickable,
+    isClickable = _a$isClickable === void 0 ? false : _a$isClickable,
+    _a$isRowSelected = _a.isRowSelected,
+    isRowSelected = _a$isRowSelected === void 0 ? false : _a$isRowSelected,
+    _a$isStriped = _a.isStriped,
+    isStriped = _a$isStriped === void 0 ? false : _a$isStriped,
+    _a$isBorderRow = _a.isBorderRow,
+    isBorderRow = _a$isBorderRow === void 0 ? false : _a$isBorderRow,
+    _a$isControlRow = _a.isControlRow,
+    isControlRow = _a$isControlRow === void 0 ? false : _a$isControlRow,
+    innerRef = _a.innerRef,
+    ouiaId = _a.ouiaId,
+    _a$ouiaSafe = _a.ouiaSafe,
+    ouiaSafe = _a$ouiaSafe === void 0 ? true : _a$ouiaSafe,
+    _a$resetOffset = _a.resetOffset,
+    resetOffset = _a$resetOffset === void 0 ? false : _a$resetOffset,
+    onRowClick = _a.onRowClick,
+    isSelectable = _a.isSelectable,
+    passedAriaLabel = _a['aria-label'],
+    props = __rest(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isClickable", "isRowSelected", "isStriped", "isBorderRow", "isControlRow", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
   var ouiaProps = helpers.useOUIAProps('TableRow', ouiaId, ouiaSafe);
-
   var _React$useState = React__namespace.useState(''),
-      computedAriaLabel = _React$useState[0],
-      setComputedAriaLabel = _React$useState[1];
-
+    computedAriaLabel = _React$useState[0],
+    setComputedAriaLabel = _React$useState[1];
   var onKeyDown = null;
-
   if (onRowClick) {
     onKeyDown = function onKeyDown(e) {
       if (e.key === 'Enter' || e.key === ' ') {
@@ -1550,12 +1438,9 @@ var TrBase = function TrBase(_a) {
       }
     };
   }
-
   var rowIsHidden = isHidden || isExpanded !== undefined && !isExpanded;
-
   var _React$useContext = React__namespace.useContext(TableContext),
-      registerSelectableRow = _React$useContext.registerSelectableRow;
-
+    registerSelectableRow = _React$useContext.registerSelectableRow;
   React__namespace.useEffect(function () {
     if (isSelectable && !rowIsHidden) {
       setComputedAriaLabel("" + (isRowSelected ? 'Row selected' : ''));
@@ -1566,7 +1451,7 @@ var TrBase = function TrBase(_a) {
   }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
   var ariaLabel = passedAriaLabel || computedAriaLabel;
   return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement("tr", Object.assign({
-    className: css(styles$1.tableTr, className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isClickable && styles$1.modifiers.clickable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, isBorderRow && styles$1.modifiers.borderRow, resetOffset && styles$1.modifiers.firstCellOffsetReset),
+    className: css(styles$1.tableTr, className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isClickable && styles$1.modifiers.clickable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, isBorderRow && styles$1.modifiers.borderRow, isControlRow && styles$1.tableControlRow, resetOffset && styles$1.modifiers.firstCellOffsetReset),
     hidden: rowIsHidden
   }, isClickable && {
     tabIndex: 0
@@ -1578,7 +1463,6 @@ var TrBase = function TrBase(_a) {
     onKeyDown: onKeyDown
   }, ouiaProps, props), children));
 };
-
 var Tr = React__namespace.forwardRef(function (props, ref) {
   return React__namespace.createElement(TrBase, Object.assign({}, props, {
     innerRef: ref
@@ -1588,19 +1472,17 @@ Tr.displayName = 'Tr';
 
 var TheadBase = function TheadBase(_a) {
   var children = _a.children,
-      className = _a.className,
-      _a$noWrap = _a.noWrap,
-      noWrap = _a$noWrap === void 0 ? false : _a$noWrap,
-      innerRef = _a.innerRef,
-      hasNestedHeader = _a.hasNestedHeader,
-      props = __rest$1(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
-
+    className = _a.className,
+    _a$noWrap = _a.noWrap,
+    noWrap = _a$noWrap === void 0 ? false : _a$noWrap,
+    innerRef = _a.innerRef,
+    hasNestedHeader = _a.hasNestedHeader,
+    props = __rest(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
   return React__namespace.createElement("thead", Object.assign({
     className: css(styles$1.tableThead, className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader),
     ref: innerRef
   }, props), children);
 };
-
 var Thead = React__namespace.forwardRef(function (props, ref) {
   return React__namespace.createElement(TheadBase, Object.assign({}, props, {
     innerRef: ref
@@ -1610,22 +1492,20 @@ Thead.displayName = 'Thead';
 
 var TbodyBase = function TbodyBase(_a) {
   var children = _a.children,
-      className = _a.className,
-      isExpanded = _a.isExpanded,
-      innerRef = _a.innerRef,
-      _a$isEvenStriped = _a.isEvenStriped,
-      isEvenStriped = _a$isEvenStriped === void 0 ? false : _a$isEvenStriped,
-      _a$isOddStriped = _a.isOddStriped,
-      isOddStriped = _a$isOddStriped === void 0 ? false : _a$isOddStriped,
-      props = __rest$1(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
-
+    className = _a.className,
+    isExpanded = _a.isExpanded,
+    innerRef = _a.innerRef,
+    _a$isEvenStriped = _a.isEvenStriped,
+    isEvenStriped = _a$isEvenStriped === void 0 ? false : _a$isEvenStriped,
+    _a$isOddStriped = _a.isOddStriped,
+    isOddStriped = _a$isOddStriped === void 0 ? false : _a$isOddStriped,
+    props = __rest(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
   return React__namespace.createElement("tbody", Object.assign({
     role: "rowgroup",
     className: css(styles$1.tableTbody, className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven),
     ref: innerRef
   }, props), children);
 };
-
 var Tbody = React__namespace.forwardRef(function (props, ref) {
   return React__namespace.createElement(TbodyBase, Object.assign({}, props, {
     innerRef: ref
@@ -1657,17 +1537,14 @@ var styles = {
 /**
  * @param {any} props - Props
  */
-
 function mergeProps() {
   var props = [].slice.call(arguments);
   var firstProps = props[0];
   var restProps = props.slice(1);
-
   if (!restProps.length) {
     return mergeWith__default["default"]({}, firstProps);
-  } // Avoid mutating the first prop collection
-
-
+  }
+  // Avoid mutating the first prop collection
   return mergeWith__default["default"].apply(void 0, [mergeWith__default["default"]({}, firstProps)].concat(restProps, [function (a, b, key) {
     if (key === 'children') {
       if (a && b) {
@@ -1675,19 +1552,16 @@ function mergeProps() {
         return React__namespace.cloneElement(a, {
           children: b
         });
-      } // Children have to be merged in reverse order for Reactabular
+      }
+      // 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;
   }]));
 }
@@ -1715,75 +1589,66 @@ var cssStickyCellRight = c_table__sticky_cell_Right;
 
 var ThBase = function ThBase(_a) {
   var _Object$assign;
-
   var children = _a.children,
-      className = _a.className,
-      _a$component = _a.component,
-      component = _a$component === void 0 ? 'th' : _a$component,
-      dataLabel = _a.dataLabel,
-      _a$scope = _a.scope,
-      scope = _a$scope === void 0 ? 'col' : _a$scope,
-      _a$textCenter = _a.textCenter,
-      textCenter = _a$textCenter === void 0 ? false : _a$textCenter,
-      _a$sort = _a.sort,
-      sort = _a$sort === void 0 ? null : _a$sort,
-      modifier = _a.modifier,
-      _a$select = _a.select,
-      select = _a$select === void 0 ? null : _a$select,
-      _a$expand = _a.expand,
-      collapse = _a$expand === void 0 ? null : _a$expand,
-      _a$tooltip = _a.tooltip,
-      tooltip = _a$tooltip === void 0 ? '' : _a$tooltip,
-      tooltipProps = _a.tooltipProps,
-      _a$onMouseEnter = _a.onMouseEnter,
-      onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
-      width = _a.width,
-      visibility = _a.visibility,
-      innerRef = _a.innerRef,
-      infoProps = _a.info,
-      _a$isStickyColumn = _a.isStickyColumn,
-      isStickyColumn = _a$isStickyColumn === void 0 ? false : _a$isStickyColumn,
-      _a$hasRightBorder = _a.hasRightBorder,
-      hasRightBorder = _a$hasRightBorder === void 0 ? false : _a$hasRightBorder,
-      _a$hasLeftBorder = _a.hasLeftBorder,
-      hasLeftBorder = _a$hasLeftBorder === void 0 ? false : _a$hasLeftBorder,
-      _a$stickyMinWidth = _a.stickyMinWidth,
-      stickyMinWidth = _a$stickyMinWidth === void 0 ? '120px' : _a$stickyMinWidth,
-      stickyLeftOffset = _a.stickyLeftOffset,
-      stickyRightOffset = _a.stickyRightOffset,
-      _a$isSubheader = _a.isSubheader,
-      isSubheader = _a$isSubheader === void 0 ? false : _a$isSubheader,
-      screenReaderText = _a.screenReaderText,
-      ariaLabel = _a['aria-label'],
-      props = __rest$1(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "expand", "tooltip", "tooltipProps", "onMouseEnter", "width", "visibility", "innerRef", "info", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset", "isSubheader", "screenReaderText", 'aria-label']);
-
+    className = _a.className,
+    _a$component = _a.component,
+    component = _a$component === void 0 ? 'th' : _a$component,
+    dataLabel = _a.dataLabel,
+    _a$scope = _a.scope,
+    scope = _a$scope === void 0 ? 'col' : _a$scope,
+    _a$textCenter = _a.textCenter,
+    textCenter = _a$textCenter === void 0 ? false : _a$textCenter,
+    _a$sort = _a.sort,
+    sort = _a$sort === void 0 ? null : _a$sort,
+    modifier = _a.modifier,
+    _a$select = _a.select,
+    select = _a$select === void 0 ? null : _a$select,
+    _a$expand = _a.expand,
+    collapse = _a$expand === void 0 ? null : _a$expand,
+    _a$tooltip = _a.tooltip,
+    tooltip = _a$tooltip === void 0 ? '' : _a$tooltip,
+    tooltipProps = _a.tooltipProps,
+    _a$onMouseEnter = _a.onMouseEnter,
+    onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
+    width = _a.width,
+    visibility = _a.visibility,
+    innerRef = _a.innerRef,
+    infoProps = _a.info,
+    _a$isStickyColumn = _a.isStickyColumn,
+    isStickyColumn = _a$isStickyColumn === void 0 ? false : _a$isStickyColumn,
+    _a$hasRightBorder = _a.hasRightBorder,
+    hasRightBorder = _a$hasRightBorder === void 0 ? false : _a$hasRightBorder,
+    _a$hasLeftBorder = _a.hasLeftBorder,
+    hasLeftBorder = _a$hasLeftBorder === void 0 ? false : _a$hasLeftBorder,
+    _a$stickyMinWidth = _a.stickyMinWidth,
+    stickyMinWidth = _a$stickyMinWidth === void 0 ? '120px' : _a$stickyMinWidth,
+    stickyLeftOffset = _a.stickyLeftOffset,
+    stickyRightOffset = _a.stickyRightOffset,
+    _a$isSubheader = _a.isSubheader,
+    isSubheader = _a$isSubheader === void 0 ? false : _a$isSubheader,
+    screenReaderText = _a.screenReaderText,
+    ariaLabel = _a['aria-label'],
+    props = __rest(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "expand", "tooltip", "tooltipProps", "onMouseEnter", "width", "visibility", "innerRef", "info", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset", "isSubheader", "screenReaderText", 'aria-label']);
   if (!children && !screenReaderText && !ariaLabel) {
     // eslint-disable-next-line no-console
     console.warn('Th: Table headers must have an accessible name. If the Th is intended to be visually empty, pass in screenReaderText. If the Th contains only non-text, interactive content such as a checkbox or expand toggle, pass in an aria-label.');
   }
-
   var _React$useState = React__namespace.useState(false),
-      showTooltip = _React$useState[0],
-      setShowTooltip = _React$useState[1];
-
+    showTooltip = _React$useState[0],
+    setShowTooltip = _React$useState[1];
   var _React$useState2 = React__namespace.useState(false),
-      truncated = _React$useState2[0],
-      setTruncated = _React$useState2[1];
-
+    truncated = _React$useState2[0],
+    setTruncated = _React$useState2[1];
   var cellRef = innerRef ? innerRef : React__namespace.createRef();
-
   var onMouseEnter = function onMouseEnter(event) {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       !showTooltip && setShowTooltip(true);
     } else {
       showTooltip && setShowTooltip(false);
     }
-
     onMouseEnterProp(event);
   };
-
   var sortParams = null;
-
   if (sort) {
     if (sort.isFavorites) {
       sortParams = sortableFavorites({
@@ -1807,7 +1672,6 @@ var ThBase = function ThBase(_a) {
       });
     }
   }
-
   var selectParams = select ? selectable(children, {
     rowData: {
       selected: select.isSelected,
@@ -1838,23 +1702,19 @@ var ThBase = function ThBase(_a) {
   var visibilityParams = visibility ? classNames.apply(void 0, visibility.map(function (vis) {
     return Visibility[vis];
   }))() : null;
-  var transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children; // info can wrap other transformedChildren
-
+  var transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children;
+  // info can wrap other transformedChildren
   var infoParams = null;
-
   if (infoProps) {
     infoParams = info(infoProps)(transformedChildren);
     transformedChildren = infoParams.children;
   }
-
   var merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
-
   var _merged$className = merged.className,
-      mergedClassName = _merged$className === void 0 ? '' : _merged$className,
-      _merged$component = merged.component,
-      MergedComponent = _merged$component === void 0 ? component : _merged$component,
-      mergedProps = __rest$1(merged, ["children", "isVisible", "className", "component"]);
-
+    mergedClassName = _merged$className === void 0 ? '' : _merged$className,
+    _merged$component = merged.component,
+    MergedComponent = _merged$component === void 0 ? component : _merged$component,
+    mergedProps = __rest(merged, ["children", "isVisible", "className", "component"]);
   React__namespace.useEffect(function () {
     setTruncated(cellRef.current.offsetWidth < cellRef.current.scrollWidth);
   }, [cellRef]);
@@ -1883,7 +1743,6 @@ var ThBase = function ThBase(_a) {
     isVisible: true
   }, tooltipProps))) : cell;
 };
-
 var Th = React__namespace.forwardRef(function (props, ref) {
   return React__namespace.createElement(ThBase, Object.assign({}, props, {
     innerRef: ref
@@ -1904,71 +1763,64 @@ var draggable = function draggable(value, _ref) {
 
 var TdBase = function TdBase(_a) {
   var _Object$assign;
-
   var children = _a.children,
-      className = _a.className,
-      _a$isActionCell = _a.isActionCell,
-      isActionCell = _a$isActionCell === void 0 ? false : _a$isActionCell,
-      _a$component = _a.component,
-      component = _a$component === void 0 ? 'td' : _a$component,
-      dataLabel = _a.dataLabel,
-      _a$textCenter = _a.textCenter,
-      textCenter = _a$textCenter === void 0 ? false : _a$textCenter,
-      modifier = _a.modifier,
-      _a$select = _a.select,
-      select = _a$select === void 0 ? null : _a$select,
-      _a$actions = _a.actions,
-      actions = _a$actions === void 0 ? null : _a$actions,
-      _a$expand = _a.expand,
-      expand = _a$expand === void 0 ? null : _a$expand,
-      _a$treeRow = _a.treeRow,
-      treeRowProp = _a$treeRow === void 0 ? null : _a$treeRow,
-      _a$compoundExpand = _a.compoundExpand,
-      compoundExpandProp = _a$compoundExpand === void 0 ? null : _a$compoundExpand,
-      noPadding = _a.noPadding,
-      width = _a.width,
-      visibility = _a.visibility,
-      innerRef = _a.innerRef,
-      _a$favorites = _a.favorites,
-      favorites = _a$favorites === void 0 ? null : _a$favorites,
-      _a$draggableRow = _a.draggableRow,
-      draggableRowProp = _a$draggableRow === void 0 ? null : _a$draggableRow,
-      _a$tooltip = _a.tooltip,
-      tooltip = _a$tooltip === void 0 ? '' : _a$tooltip,
-      _a$onMouseEnter = _a.onMouseEnter,
-      onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
-      _a$isStickyColumn = _a.isStickyColumn,
-      isStickyColumn = _a$isStickyColumn === void 0 ? false : _a$isStickyColumn,
-      _a$hasRightBorder = _a.hasRightBorder,
-      hasRightBorder = _a$hasRightBorder === void 0 ? false : _a$hasRightBorder,
-      _a$hasLeftBorder = _a.hasLeftBorder,
-      hasLeftBorder = _a$hasLeftBorder === void 0 ? false : _a$hasLeftBorder,
-      _a$stickyMinWidth = _a.stickyMinWidth,
-      stickyMinWidth = _a$stickyMinWidth === void 0 ? '120px' : _a$stickyMinWidth,
-      stickyLeftOffset = _a.stickyLeftOffset,
-      stickyRightOffset = _a.stickyRightOffset,
-      props = __rest$1(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow", "tooltip", "onMouseEnter", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset"]);
-
+    className = _a.className,
+    _a$isActionCell = _a.isActionCell,
+    isActionCell = _a$isActionCell === void 0 ? false : _a$isActionCell,
+    _a$component = _a.component,
+    component = _a$component === void 0 ? 'td' : _a$component,
+    dataLabel = _a.dataLabel,
+    _a$textCenter = _a.textCenter,
+    textCenter = _a$textCenter === void 0 ? false : _a$textCenter,
+    modifier = _a.modifier,
+    _a$select = _a.select,
+    select = _a$select === void 0 ? null : _a$select,
+    _a$actions = _a.actions,
+    actions = _a$actions === void 0 ? null : _a$actions,
+    _a$expand = _a.expand,
+    expand = _a$expand === void 0 ? null : _a$expand,
+    _a$treeRow = _a.treeRow,
+    treeRowProp = _a$treeRow === void 0 ? null : _a$treeRow,
+    _a$compoundExpand = _a.compoundExpand,
+    compoundExpandProp = _a$compoundExpand === void 0 ? null : _a$compoundExpand,
+    noPadding = _a.noPadding,
+    width = _a.width,
+    visibility = _a.visibility,
+    innerRef = _a.innerRef,
+    _a$favorites = _a.favorites,
+    favorites = _a$favorites === void 0 ? null : _a$favorites,
+    _a$draggableRow = _a.draggableRow,
+    draggableRowProp = _a$draggableRow === void 0 ? null : _a$draggableRow,
+    _a$tooltip = _a.tooltip,
+    tooltip = _a$tooltip === void 0 ? '' : _a$tooltip,
+    _a$onMouseEnter = _a.onMouseEnter,
+    onMouseEnterProp = _a$onMouseEnter === void 0 ? function () {} : _a$onMouseEnter,
+    _a$isStickyColumn = _a.isStickyColumn,
+    isStickyColumn = _a$isStickyColumn === void 0 ? false : _a$isStickyColumn,
+    _a$hasRightBorder = _a.hasRightBorder,
+    hasRightBorder = _a$hasRightBorder === void 0 ? false : _a$hasRightBorder,
+    _a$hasLeftBorder = _a.hasLeftBorder,
+    hasLeftBorder = _a$hasLeftBorder === void 0 ? false : _a$hasLeftBorder,
+    _a$stickyMinWidth = _a.stickyMinWidth,
+    stickyMinWidth = _a$stickyMinWidth === void 0 ? '120px' : _a$stickyMinWidth,
+    stickyLeftOffset = _a.stickyLeftOffset,
+    stickyRightOffset = _a.stickyRightOffset,
+    props = __rest(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow", "tooltip", "onMouseEnter", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset"]);
   var _React$useState = React__namespace.useState(false),
-      showTooltip = _React$useState[0],
-      setShowTooltip = _React$useState[1];
-
+    showTooltip = _React$useState[0],
+    setShowTooltip = _React$useState[1];
   var _React$useState2 = React__namespace.useState(false),
-      truncated = _React$useState2[0],
-      setTruncated = _React$useState2[1];
-
+    truncated = _React$useState2[0],
+    setTruncated = _React$useState2[1];
   var cellRef = innerRef ? innerRef : React__namespace.createRef();
-
   var onMouseEnter = function onMouseEnter(event) {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       !showTooltip && setShowTooltip(true);
     } else {
       showTooltip && setShowTooltip(false);
     }
-
     onMouseEnterProp(event);
   };
-
   var selectParams = select ? selectable(children, {
     rowIndex: select.rowIndex,
     rowData: {
@@ -2056,15 +1908,13 @@ var TdBase = function TdBase(_a) {
     }
   }) : null;
   var merged = mergeProps(selectParams, actionParams, expandableParams, compoundParams, widthParams, visibilityParams, favoriteParams, treeRowParams, draggableParams);
-
   var _merged$children = merged.children,
-      mergedChildren = _merged$children === void 0 ? null : _merged$children,
-      _merged$className = merged.className,
-      mergedClassName = _merged$className === void 0 ? '' : _merged$className,
-      _merged$component = merged.component,
-      MergedComponent = _merged$component === void 0 ? component : _merged$component,
-      mergedProps = __rest$1(merged, ["isVisible", "children", "className", "component"]);
-
+    mergedChildren = _merged$children === void 0 ? null : _merged$children,
+    _merged$className = merged.className,
+    mergedClassName = _merged$className === void 0 ? '' : _merged$className,
+    _merged$component = merged.component,
+    MergedComponent = _merged$component === void 0 ? component : _merged$component,
+    mergedProps = __rest(merged, ["isVisible", "children", "className", "component"]);
   var treeTableTitleCell = className && className.includes(treeViewStyles.tableTreeViewTitleCell) || mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell);
   React__namespace.useEffect(function () {
     setTruncated(cellRef.current.offsetWidth < cellRef.current.scrollWidth);
@@ -2091,7 +1941,6 @@ var TdBase = function TdBase(_a) {
     isVisible: true
   })) : cell;
 };
-
 var Td = React__namespace.forwardRef(function (props, ref) {
   return React__namespace.createElement(TdBase, Object.assign({}, props, {
     innerRef: ref
@@ -2122,51 +1971,41 @@ var SecurityIcon = createIcon(SecurityIconConfig);
 var DEFAULT_PAGE = 1;
 var DEFAULT_PERPAGE = 10;
 function FilterableTable(_ref) {
-
   var columns = _ref.columns,
-      items = _ref.items,
-      isLoading = _ref.isLoading,
-      renderRow = _ref.renderRow,
-      filters = _ref.filters,
-      actions = _ref.actions,
-      perPageOptions = _ref.perPageOptions;
-
+    items = _ref.items,
+    isLoading = _ref.isLoading,
+    renderRow = _ref.renderRow,
+    filters = _ref.filters,
+    actions = _ref.actions,
+    perPageOptions = _ref.perPageOptions;
   var _useState = React.useState(DEFAULT_PAGE),
-      page = _useState[0],
-      setPage = _useState[1];
-
+    page = _useState[0],
+    setPage = _useState[1];
   var _useState2 = React.useState(DEFAULT_PERPAGE ),
-      perPage = _useState2[0],
-      setPerPage = _useState2[1];
-
+    perPage = _useState2[0],
+    setPerPage = _useState2[1];
   var _useState3 = React.useState({}),
-      sortTableBy = _useState3[0],
-      setSortTableBy = _useState3[1];
-
+    sortTableBy = _useState3[0],
+    setSortTableBy = _useState3[1];
   var _useState4 = React.useState([]),
-      rows = _useState4[0],
-      setRows = _useState4[1];
-
+    rows = _useState4[0],
+    setRows = _useState4[1];
   var _useState5 = React.useState(items),
-      filteredItems = _useState5[0],
-      setFilteredItems = _useState5[1];
-
+    filteredItems = _useState5[0],
+    setFilteredItems = _useState5[1];
   var _useState6 = React.useState([]),
-      tableFilters = _useState6[0],
-      setTableFilters = _useState6[1];
-  /**
-   * Sorts table by the selected column in ascending or decending order
-   * @param _event click
-   * @param index column index
-   * @param direction asc || desc
+    tableFilters = _useState6[0],
+    setTableFilters = _useState6[1];
+  /**
+   * Sorts table by the selected column in ascending or decending order
+   * @param _event click
+   * @param index column index
+   * @param direction asc || desc
    */
-
-
   var onSort = function onSort(_event, index, direction) {
     var _columns$index, _columns$index2;
-
-    var sortField = columns == null ? void 0 : (_columns$index = columns[index]) == null ? void 0 : _columns$index.sortField;
-    var sortFn = columns == null ? void 0 : (_columns$index2 = columns[index]) == null ? void 0 : _columns$index2.sortFn;
+    var sortField = columns == null || (_columns$index = columns[index]) == null ? void 0 : _columns$index.sortField;
+    var sortFn = columns == null || (_columns$index2 = columns[index]) == null ? void 0 : _columns$index2.sortFn;
     var sortedRows = sortFn ? lodash.sortBy(filteredItems, sortFn) : sortField ? lodash.sortBy(filteredItems, function (item) {
       return item[sortField];
     }) : filteredItems;
@@ -2176,50 +2015,43 @@ function FilterableTable(_ref) {
     });
     setFilteredItems(direction === SortByDirection.asc ? [].concat(sortedRows) : [].concat(sortedRows == null ? void 0 : sortedRows.reverse()));
   };
-  /**
-   * Set table rows to display based on current list of filtered items, page, and perPage settings
+  /**
+   * Set table rows to display based on current list of filtered items, page, and perPage settings
    */
-
-
   React.useEffect(function () {
     var startIndex = (page - 1) * perPage;
     var endIndex = startIndex + perPage;
     var itemsInPage = filteredItems.slice(startIndex, endIndex);
     setRows(itemsInPage);
   }, [filteredItems, page, perPage]);
-  /**
-   * If the list of items change, reset to the first page
+  /**
+   * If the list of items change, reset to the first page
    */
-
   function handleItemsPropChange() {
     setPage(1);
   }
-
   var handleItemsPropChangeCallback = React.useCallback(handleItemsPropChange, [setPage, items]);
   React.useEffect(handleItemsPropChangeCallback, [handleItemsPropChangeCallback]);
-  /**
-   * Whenever a filter is selected or a user enter a search string, run each item through each filter condition
-   * and check it includes the search string. Only inlcude the item in the table if it passes all filter/search string
-   * conditions.
+  /**
+   * Whenever a filter is selected or a user enter a search string, run each item through each filter condition
+   * and check it includes the search string. Only inlcude the item in the table if it passes all filter/search string
+   * conditions.
    */
-
   React.useEffect(function () {
     return setFilteredItems(items.filter(function (item) {
       return tableFilters.map(function (f, i) {
-        var _filters$i, _filters$i$props;
-
-        return !f ? true : filters == null ? void 0 : (_filters$i = filters[i]) == null ? void 0 : (_filters$i$props = _filters$i.props) == null ? void 0 : _filters$i$props.onChange(f, item);
+        var _filters$i;
+        return !f ? true : filters == null || (_filters$i = filters[i]) == null || (_filters$i = _filters$i.props) == null ? void 0 : _filters$i.onChange(f, item);
       }).reduce(function (r, v) {
         return r && v;
       }, true);
     }));
   }, [filters, items, tableFilters]);
-  /**
-   * Whenever a new filter is selected by the user, update the state of selectedFilters
-   * @param selected filter selections
-   * @param index filter to update with new selections
+  /**
+   * Whenever a new filter is selected by the user, update the state of selectedFilters
+   * @param selected filter selections
+   * @param index filter to update with new selections
    */
-
   var onFilterChange = function onFilterChange(selected, index) {
     handleItemsPropChangeCallback();
     setTableFilters(function (prevState) {
@@ -2227,13 +2059,11 @@ function FilterableTable(_ref) {
       return [].concat(prevState);
     });
   };
-  /**
-   * Pagination component
-   * @param variant top or bottom
-   * @returns Pagination component based on variant
+  /**
+   * Pagination component
+   * @param variant top or bottom
+   * @returns Pagination component based on variant
    */
-
-
   var renderPagination = function renderPagination(variant) {
     return (filteredItems == null ? void 0 : filteredItems.length) > 0 && React__default["default"].createElement(reactCore.Pagination, {
       itemCount: (filteredItems == null ? void 0 : filteredItems.length) || 0,
@@ -2254,11 +2084,9 @@ function FilterableTable(_ref) {
       }
     });
   };
-  /**
-   * Toolbar populated with provided filters
+  /**
+   * Toolbar populated with provided filters
    */
-
-
   var header = React__default["default"].createElement(reactCore.Toolbar, null, React__default["default"].createElement(reactCore.ToolbarContent, null, filters == null ? void 0 : filters.map(function (el, i) {
     return React__default["default"].createElement(reactCore.ToolbarItem, {
       key: i,
@@ -2290,7 +2118,7 @@ function FilterableTable(_ref) {
     "aria-label": 'Packages Table',
     gridBreakPoint: 'grid-xl'
   }, React__default["default"].createElement(Thead, null, React__default["default"].createElement(Tr, null, columns.map(function (col, colIdx) {
-    return React__default["default"].createElement(Th, Object.assign({
+    return React__default["default"].createElement(Th, _extends({
       key: "pkg-table-head-" + colIdx
     }, col.sortField ? {
       sort: {
@@ -2304,7 +2132,6 @@ function FilterableTable(_ref) {
       key: "pkg-table-row-" + rowIdx
     }, columns.map(function (_col, colIdx) {
       var _renderRow;
-
       return React__default["default"].createElement(Td, {
         key: "pkg-table-row-" + rowIdx + "-col-" + colIdx
       }, (_renderRow = renderRow(row)) == null ? void 0 : _renderRow[colIdx]);
@@ -2322,12 +2149,10 @@ function FilterableTable(_ref) {
 
 var FilterInput = function FilterInput(_ref) {
   var onChangeHandler = _ref.onChange,
-      placeholder = _ref.placeholder;
-
+    placeholder = _ref.placeholder;
   var _useState = React.useState(''),
-      searchStr = _useState[0],
-      setSearchStr = _useState[1];
-
+    searchStr = _useState[0],
+    setSearchStr = _useState[1];
   var onChange = function onChange(event, text) {
     event.stopPropagation();
     event.preventDefault();
@@ -2336,7 +2161,6 @@ var FilterInput = function FilterInput(_ref) {
       return text;
     });
   };
-
   return React__default["default"].createElement("div", {
     className: 'filter-input'
   }, React__default["default"].createElement(reactCore.SearchInput, {
@@ -2360,29 +2184,26 @@ var FilterInput = function FilterInput(_ref) {
 
 var ExcludedPackagesTable = function ExcludedPackagesTable(_ref) {
   var excludedPackages = _ref.excludedPackages,
-      isLoading = _ref.isLoading;
-
+    isLoading = _ref.isLoading;
   var renderPackagesRow = function renderPackagesRow(_ref2) {
     var gpg = _ref2.gpg,
-        name = _ref2.name,
-        version = _ref2.version,
-        release = _ref2.release,
-        architecture = _ref2.architecture,
-        nvra = _ref2.nvra,
-        summary = _ref2.summary;
+      name = _ref2.name,
+      version = _ref2.version,
+      release = _ref2.release,
+      architecture = _ref2.architecture,
+      nvra = _ref2.nvra,
+      summary = _ref2.summary;
     return [gpg ? React__default["default"].createElement("a", {
       href: "https://access.redhat.com/downloads/content/" + name + "/" + version + "}-" + release + "/" + architecture + "/" + (gpg == null ? void 0 : gpg.slice(-8)) + "/package",
       target: '_blank',
       rel: 'noopener noreferrer'
     }, nvra) : React__default["default"].createElement("span", null, nvra), summary];
   };
-
   var onTextInputFilterChange = function onTextInputFilterChange(text, _ref3) {
     var nvra = _ref3.nvra,
-        summary = _ref3.summary;
+      summary = _ref3.summary;
     return ("" + (nvra + summary)).toLowerCase().includes(text.toLowerCase());
   };
-
   return React__default["default"].createElement("div", {
     className: 'excluded-packages-table'
   }, React__default["default"].createElement(FilterableTable, {
@@ -2415,23 +2236,19 @@ var ExcludedPackagesTable = function ExcludedPackagesTable(_ref) {
 
 function EcoSelect(_ref) {
   var variant = _ref.variant,
-      placeholderText = _ref.placeholderText,
-      options = _ref.options,
-      onChange = _ref.onChange,
-      ariaLabel = _ref['aria-label'];
-
+    placeholderText = _ref.placeholderText,
+    options = _ref.options,
+    onChange = _ref.onChange,
+    ariaLabel = _ref['aria-label'];
   var _useState = React.useState(false),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
-
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
   var _useState2 = React.useState([]),
-      selected = _useState2[0],
-      setSelected = _useState2[1];
-
+    selected = _useState2[0],
+    setSelected = _useState2[1];
   var _onToggle = function onToggle(isOpen) {
     return setIsOpen(isOpen);
   };
-
   var onSelect = function onSelect(event, selection) {
     var result = selected.includes(selection) ? selected.filter(function (item) {
       return item !== selection;
@@ -2439,7 +2256,6 @@ function EcoSelect(_ref) {
     setSelected(result);
     onChange && onChange(result, event);
   };
-
   var id = lodash.uniqueId('select-');
   return React__default["default"].createElement("div", {
     className: 'select'
@@ -2465,9 +2281,8 @@ function EcoSelect(_ref) {
 
 var ToggleGroup = function ToggleGroup(props) {
   var _useState = React.useState(''),
-      selected = _useState[0],
-      setSelected = _useState[1];
-
+    selected = _useState[0],
+    setSelected = _useState[1];
   var onClick = function onClick(_, event) {
     var id = event.currentTarget.id;
     setSelected(function () {
@@ -2475,7 +2290,6 @@ var ToggleGroup = function ToggleGroup(props) {
       return id;
     });
   };
-
   return React__default["default"].createElement(reactCore.ToggleGroup, {
     "aria-label": props['aria-label']
   }, props.options.map(function (option, index) {
@@ -2494,9 +2308,8 @@ var ToggleGroup = function ToggleGroup(props) {
 /* eslint-disable camelcase */
 var VulnerabilitiesTable = function VulnerabilitiesTable(_ref) {
   var vulnerabilities = _ref.vulnerabilities,
-      isLoading = _ref.isLoading,
-      hideToggler = _ref.hideToggler;
-
+    isLoading = _ref.isLoading,
+    hideToggler = _ref.hideToggler;
   var getImpact = function getImpact(_ref2) {
     var severity = _ref2.severity;
     return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
@@ -2505,7 +2318,6 @@ var VulnerabilitiesTable = function VulnerabilitiesTable(_ref) {
       className: "impact-icon color-" + severity.toLowerCase()
     }), React__default["default"].createElement("span", null, severity)));
   };
-
   var getCVE = function getCVE(_ref3) {
     var cve_id = _ref3.cve_id;
     return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
@@ -2516,17 +2328,15 @@ var VulnerabilitiesTable = function VulnerabilitiesTable(_ref) {
       rel: 'noopener noreferrer'
     }, cve_id)));
   };
-
   var getAffectedPackages = function getAffectedPackages(rpms) {
     return React__default["default"].createElement(React__default["default"].Fragment, null, rpms == null ? void 0 : rpms.map(function (_temp, index) {
       var _ref4 = _temp === void 0 ? {} : _temp,
-          gpg = _ref4.gpg,
-          name = _ref4.name,
-          version = _ref4.version,
-          release = _ref4.release,
-          architecture = _ref4.architecture,
-          nvra = _ref4.nvra;
-
+        gpg = _ref4.gpg,
+        name = _ref4.name,
+        version = _ref4.version,
+        release = _ref4.release,
+        architecture = _ref4.architecture,
+        nvra = _ref4.nvra;
       return gpg ? React__default["default"].createElement("div", {
         className: 'vulnerabilities-table__affected-packages-cell',
         key: "affected-package-" + index
@@ -2540,10 +2350,9 @@ var VulnerabilitiesTable = function VulnerabilitiesTable(_ref) {
       }, React__default["default"].createElement("span", null, nvra));
     }));
   };
-
   var getRPMAdvisory = function getRPMAdvisory(_ref5) {
     var advisory_type = _ref5.advisory_type,
-        advisory_id = _ref5.advisory_id;
+      advisory_id = _ref5.advisory_id;
     return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("div", {
       className: 'vulnerabilities-table__rpm-advisory-cell'
     }, advisory_type && advisory_id ? React__default["default"].createElement("a", {
@@ -2552,31 +2361,26 @@ var VulnerabilitiesTable = function VulnerabilitiesTable(_ref) {
       rel: 'noopener noreferrer'
     }, advisory_type, "-", advisory_id) : React__default["default"].createElement("span", null, "-")));
   };
-
   var renderVulnerabilitiesRow = function renderVulnerabilitiesRow(vulnerability) {
     return [getImpact(vulnerability), getCVE(vulnerability), getAffectedPackages(vulnerability.rpm_nvra_with_link_data), getRPMAdvisory(vulnerability), vulnerability != null && vulnerability.creation_date ? dateFns.format(new Date(vulnerability == null ? void 0 : vulnerability.creation_date), 'MMM dd, yyyy hh:mm a') : ''];
   };
-
   var onTextInputFilterChange = function onTextInputFilterChange(text, _ref6) {
     var rpm_nvra_with_link_data = _ref6.rpm_nvra_with_link_data,
-        severity = _ref6.severity,
-        cve_id = _ref6.cve_id,
-        advisory_id = _ref6.advisory_id;
+      severity = _ref6.severity,
+      cve_id = _ref6.cve_id,
+      advisory_id = _ref6.advisory_id;
     var nvraList = rpm_nvra_with_link_data.reduce(function (result, _ref7) {
       var nvra = _ref7.nvra;
       return result += nvra;
     }, '');
     return ("" + (severity + cve_id + advisory_id + nvraList)).toLowerCase().includes(text.toLowerCase());
   };
-
   var onStatusFilterChange = function onStatusFilterChange(selected, vulnerability) {
     return selected === 'fixed' ? !!(vulnerability != null && vulnerability.advisory_id) : selected === 'unfixed' ? !(vulnerability != null && vulnerability.advisory_id) : true;
   };
-
   var onImpactFilterChange = function onImpactFilterChange(selected, vulnerability) {
     return selected.length > 0 ? selected.includes(vulnerability.severity) : true;
   };
-
   return React__default["default"].createElement("div", {
     className: 'vulnerabilities-table'
   }, React__default["default"].createElement(FilterableTable, {
@@ -2653,10 +2457,8 @@ var severitySortOrder = {
   Moderate: 3,
   Low: 4
 };
-
 var InsertCss = function InsertCss() {
   var styleId = 'example-component-styles';
-
   if (!document.getElementById(styleId)) {
     var styleTag = document.createElement('style');
     styleTag.id = styleId;
@@ -2664,28 +2466,23 @@ var InsertCss = function InsertCss() {
     document.body.appendChild(styleTag);
   }
 };
-
 var PackagesTable = function PackagesTable(_ref) {
   var _ref$vulnerabilities = _ref.vulnerabilities,
-      vulnerabilities = _ref$vulnerabilities === void 0 ? [] : _ref$vulnerabilities,
-      _ref$rpms = _ref.rpms,
-      rpms = _ref$rpms === void 0 ? [] : _ref$rpms,
-      hideToggler = _ref.hideToggler,
-      _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
-
+    vulnerabilities = _ref$vulnerabilities === void 0 ? [] : _ref$vulnerabilities,
+    _ref$rpms = _ref.rpms,
+    rpms = _ref$rpms === void 0 ? [] : _ref$rpms,
+    hideToggler = _ref.hideToggler,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
   var _React$useState = React__namespace.useState([]),
-      excludedPackages = _React$useState[0],
-      setExcludedPackages = _React$useState[1];
-
+    excludedPackages = _React$useState[0],
+    setExcludedPackages = _React$useState[1];
   var _React$useState2 = React__namespace.useState([]),
-      uniqueVulnerabilities = _React$useState2[0],
-      setUniqueVulnerabilities = _React$useState2[1];
-
+    uniqueVulnerabilities = _React$useState2[0],
+    setUniqueVulnerabilities = _React$useState2[1];
   var _React$useState3 = React__namespace.useState(0),
-      activeKey = _React$useState3[0],
-      setActiveKey = _React$useState3[1];
-
+    activeKey = _React$useState3[0],
+    setActiveKey = _React$useState3[1];
   React__namespace.useEffect(function () {
     var VALID_REDHAT_GPG_KEYS = ['199e2f91fd431d51', '5326810137017186', '45689c882fa658e0', '219180cddb42a60e', '7514f77d8366b0d9', 'fd372689897da07a', '938a80caf21541eb', '08b871e6a5787476'];
     var packages = rpms.filter(function (_ref2) {
@@ -2693,29 +2490,30 @@ var PackagesTable = function PackagesTable(_ref) {
       return !VALID_REDHAT_GPG_KEYS.includes(gpg);
     });
     setExcludedPackages(packages);
-    var uniqueVulnerabilities = [].concat(vulnerabilities); // augment vulnerabilities with link data
-
+    var validPackages = rpms.filter(function (_ref3) {
+      var gpg = _ref3.gpg;
+      return VALID_REDHAT_GPG_KEYS.includes(gpg);
+    });
+    var uniqueVulnerabilities = [].concat(vulnerabilities);
+    // augment vulnerabilities with link data
     uniqueVulnerabilities.forEach(function (vulnerability) {
-      vulnerability.rpm_nvra_with_link_data = []; // // CONNCERT-2121
-
+      vulnerability.rpm_nvra_with_link_data = [];
+      // // CONNCERT-2121
       if (vulnerability != null && vulnerability.affected_packages) {
         var _vulnerability$affect;
-
-        vulnerability == null ? void 0 : (_vulnerability$affect = vulnerability.affected_packages) == null ? void 0 : _vulnerability$affect.forEach(function (_ref3) {
-          var name = _ref3.name,
-              arch = _ref3.arch;
-          var link_data = rpms == null ? void 0 : rpms.filter(function (rpm) {
+        vulnerability == null || (_vulnerability$affect = vulnerability.affected_packages) == null || _vulnerability$affect.forEach(function (_ref4) {
+          var name = _ref4.name,
+            arch = _ref4.arch;
+          var link_data = validPackages == null ? void 0 : validPackages.filter(function (rpm) {
             return rpm.name === name && rpm.architecture === arch;
           });
           vulnerability.rpm_nvra_with_link_data.push(link_data[0]);
         });
       } else {
         var _vulnerability$packag;
-
-        vulnerability == null ? void 0 : (_vulnerability$packag = vulnerability.packages) == null ? void 0 : _vulnerability$packag.forEach(function (p) {
+        vulnerability == null || (_vulnerability$packag = vulnerability.packages) == null || _vulnerability$packag.forEach(function (p) {
           var _p$rpm_nvra;
-
-          return p == null ? void 0 : (_p$rpm_nvra = p.rpm_nvra) == null ? void 0 : _p$rpm_nvra.forEach(function (rpm_nvra) {
+          return p == null || (_p$rpm_nvra = p.rpm_nvra) == null ? void 0 : _p$rpm_nvra.forEach(function (rpm_nvra) {
             var link_data = rpms == null ? void 0 : rpms.filter(function (pk) {
               return pk.nvra === rpm_nvra;
             });
@@ -2723,19 +2521,21 @@ var PackagesTable = function PackagesTable(_ref) {
           });
         });
       }
-
       return vulnerability;
-    }); // sort vulnerabilities by severity
-
+    });
+    // sort vulnerabilities by severity
     uniqueVulnerabilities.sort(function (vulnerability) {
       return severitySortOrder[vulnerability.severity];
-    }); // filter out vulnerabilities with duplicate CVE IDs
-
+    });
+    // filter out vulnerabilities with duplicate CVE IDs
     uniqueVulnerabilities.filter(function (value, index, self) {
       return self.findIndex(function (vulnerability) {
         return vulnerability.cve_id === value.cve_id;
       }) === index;
     });
+    uniqueVulnerabilities.filter(function (vulnerability) {
+      if (vulnerability.rpm_nvra_with_link_data.length > 0) return vulnerability;
+    });
     setUniqueVulnerabilities(uniqueVulnerabilities);
   }, [rpms, vulnerabilities]);
   InsertCss();