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

package/dist/index.modern.js

@@ -1,7 +1,10 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useEffect, useCallback, cloneElement } from 'react';
-import { setTabIndex, useOUIAProps, handleArrows, Toolbar, ToolbarContent, ToolbarItem, Pagination, Bullseye, Title, Spinner, EmptyState, EmptyStateHeader, EmptyStateIcon, SearchInput, ToggleGroup as ToggleGroup$1, ToggleGroupItem, Tabs, Tab } from '@patternfly/react-core';
+import { useState, useEffect, useCallback, cloneElement } from 'react';
+import { Toolbar, ToolbarContent, ToolbarItem, Bullseye, Title, Spinner, EmptyState, EmptyStateHeader, EmptyStateIcon, Pagination, SearchInput, ToggleGroup as ToggleGroup$1, ToggleGroupItem, Tabs, Tab } from '@patternfly/react-core';
 import { sortBy, uniqueId } from 'lodash';
+import { setTabIndex, handleArrows } from '@patternfly/react-core/dist/esm/helpers/KeyboardHandler';
+import { useOUIAProps } from '@patternfly/react-core/dist/esm/helpers/OUIA/ouia';
 import { useOUIAProps as useOUIAProps$1 } from '@patternfly/react-core/dist/esm/helpers';
 import mergeWith from 'lodash/mergeWith';
 import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
@@ -17,6 +20,16 @@ import { format } from 'date-fns';
 
 var css_248z = ".vulnerabilities-table .impact-icon {\n  font-size: 1.5rem;\n  padding-right: 0.5rem;\n}\n.vulnerabilities-table .impact-icon.color-critical {\n  color: #a30000;\n}\n.vulnerabilities-table .impact-icon.color-important {\n  color: #ec7a08;\n}\n.vulnerabilities-table .impact-icon.color-moderate {\n  color: #f5c12e;\n}\n.vulnerabilities-table .impact-icon.color-low {\n  color: #777;\n}\n.vulnerabilities-table__affected-packages-cell {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n.vulnerabilities-table__impact-cell {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n}\n\n.filterable-table {\n  padding-bottom: var(--pf-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);
+}
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -31,52 +44,23 @@ 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];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 }
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
   var e = new Error(message);
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-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;
-}
-
 let currentId = 0;
 /**
  * Factory to create Icon class components for consumers
  */
-
 function createIcon({
   name,
   xOffset = 0,
@@ -86,21 +70,18 @@ function createIcon({
   svgPath
 }) {
   var _a;
-
   return _a = class SVGIcon extends React.Component {
     constructor() {
       super(...arguments);
       this.id = `icon-title-${currentId++}`;
     }
-
     render() {
-      const _a = this.props,
-            {
-        title,
-        className
-      } = _a,
-            props = __rest(_a, ["title", "className"]);
-
+      const _b = this.props,
+        {
+          title,
+          className
+        } = _b,
+        props = __rest(_b, ["title", "className"]);
       const classes = className ? `pf-v5-svg ${className}` : 'pf-v5-svg';
       const hasTitle = Boolean(title);
       const viewBox = [xOffset, yOffset, width, height].join(' ');
@@ -119,7 +100,6 @@ function createIcon({
         d: svgPath
       }));
     }
-
   }, _a.displayName = name, _a;
 }
 
@@ -136,46 +116,42 @@ var EllipsisVIcon$1 = EllipsisVIcon;
 
 const ActionsColumnBase = _a => {
   var {
-    items,
-    isDisabled,
-    rowData,
-    extraData,
-    actionsToggle,
-    popperProps = {
-      position: 'end',
-      direction: 'down'
-    },
-    innerRef,
-    firstActionItemRef,
-    isOnOpenChangeDisabled = false
-  } = _a,
-      props = __rest$1(_a, ["items", "isDisabled", "rowData", "extraData", "actionsToggle", "popperProps", "innerRef", "firstActionItemRef", "isOnOpenChangeDisabled"]);
-
+      items,
+      isDisabled,
+      rowData,
+      extraData,
+      actionsToggle,
+      popperProps = {
+        position: 'end',
+        direction: 'down'
+      },
+      innerRef,
+      firstActionItemRef,
+      isOnOpenChangeDisabled = false
+    } = _a,
+    props = __rest(_a, ["items", "isDisabled", "rowData", "extraData", "actionsToggle", "popperProps", "innerRef", "firstActionItemRef", "isOnOpenChangeDisabled"]);
   const [isOpen, setIsOpen] = React.useState(false);
-
   const onToggle = () => {
     setIsOpen(!isOpen);
   };
-
   const onActionClick = (event, onClick) => {
     // Only prevent default if onClick is provided.  This allows href support.
     if (onClick) {
-      event.preventDefault(); // tslint:disable-next-line:no-unused-expression
-
+      event.preventDefault();
+      // tslint:disable-next-line:no-unused-expression
       onClick(event, extraData && extraData.rowIndex, rowData, extraData);
     }
   };
-
-  return React.createElement(React.Fragment, null, items.filter(item => item.isOutsideDropdown) // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  return React.createElement(React.Fragment, null, items.filter(item => item.isOutsideDropdown)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   .map((_a, key) => {
     var {
-      title,
-      itemKey,
-      onClick,
-      isOutsideDropdown
-    } = _a,
-        props = __rest$1(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
-
+        title,
+        itemKey,
+        onClick,
+        isOutsideDropdown
+      } = _a,
+      props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
     return typeof title === 'string' ? React.createElement(Button, Object.assign({
       onClick: event => onActionClick(event, onClick)
     }, props, {
@@ -208,22 +184,20 @@ const ActionsColumnBase = _a => {
     popperProps: popperProps
   }), React.createElement(DropdownList, null, items.filter(item => !item.isOutsideDropdown).map((_a, index) => {
     var {
-      title,
-      itemKey,
-      onClick,
-      tooltipProps,
-      isSeparator,
-      shouldCloseOnClick = true
-    } = _a,
-        props = __rest$1(_a, ["title", "itemKey", "onClick", "tooltipProps", "isSeparator", "shouldCloseOnClick"]);
-
+        title,
+        itemKey,
+        onClick,
+        tooltipProps,
+        isSeparator,
+        shouldCloseOnClick = true
+      } = _a,
+      props = __rest(_a, ["title", "itemKey", "onClick", "tooltipProps", "isSeparator", "shouldCloseOnClick"]);
     if (isSeparator) {
       return React.createElement(Divider, {
         key: itemKey || index,
         "data-key": itemKey || index
       });
     }
-
     const item = React.createElement(DropdownItem, Object.assign({
       onClick: event => {
         onActionClick(event, onClick);
@@ -234,7 +208,6 @@ const ActionsColumnBase = _a => {
       "data-key": itemKey || index,
       ref: index === 0 ? firstActionItemRef : undefined
     }), title);
-
     if (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) {
       return React.createElement(Tooltip, Object.assign({
         key: itemKey || index
@@ -244,7 +217,6 @@ const ActionsColumnBase = _a => {
     }
   }))));
 };
-
 const ActionsColumn = React.forwardRef((props, ref) => React.createElement(ActionsColumnBase, Object.assign({}, props, {
   innerRef: ref
 })));
@@ -271,12 +243,10 @@ function css(...args) {
   const hasOwn = {}.hasOwnProperty;
   args.filter(Boolean).forEach(arg => {
     const argType = typeof arg;
-
     if (argType === 'string' || argType === 'number') {
       classes.push(arg);
     } else if (Array.isArray(arg) && arg.length) {
       const inner = css(...arg);
-
       if (inner) {
         classes.push(inner);
       }
@@ -384,13 +354,12 @@ var styles$1 = {
 
 const CollapseColumn = _a => {
   var {
-    className = '',
-    children = null,
-    isOpen,
-    onToggle
-  } = _a,
-      props = __rest$1(_a, ["className", "children", "isOpen", "onToggle"]);
-
+      className = '',
+      children = null,
+      isOpen,
+      onToggle
+    } = _a,
+    props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
   return React.createElement(React.Fragment, null, isOpen !== undefined && React.createElement(Button, Object.assign({
     className: css(className, isOpen && styles$1.modifiers.expanded)
   }, props, {
@@ -417,13 +386,12 @@ var GripVerticalIcon$1 = GripVerticalIcon;
 
 const DraggableCell = _a => {
   var {
-    className,
-    onClick,
-    'aria-label': ariaLabel,
-    id
-  } = _a,
-      props = __rest$1(_a, ["className", "onClick", 'aria-label', "id"]);
-
+      className,
+      onClick,
+      'aria-label': ariaLabel,
+      id
+    } = _a,
+    props = __rest(_a, ["className", "onClick", 'aria-label', "id"]);
   return React.createElement(Button, Object.assign({
     id: id,
     variant: "plain",
@@ -472,14 +440,11 @@ const HelpIcon = createIcon(HelpIconConfig);
 var HelpIcon$1 = HelpIcon;
 
 var TableTextVariant;
-
 (function (TableTextVariant) {
   TableTextVariant["div"] = "div";
   TableTextVariant["nav"] = "nav";
 })(TableTextVariant || (TableTextVariant = {}));
-
 var WrapModifier;
-
 (function (WrapModifier) {
   WrapModifier["wrap"] = "wrap";
   WrapModifier["nowrap"] = "nowrap";
@@ -487,35 +452,30 @@ var WrapModifier;
   WrapModifier["breakWord"] = "breakWord";
   WrapModifier["fitContent"] = "fitContent";
 })(WrapModifier || (WrapModifier = {}));
-
 const TableText = _a => {
   var {
-    children = null,
-    className = '',
-    variant = 'span',
-    wrapModifier = null,
-    tooltip: tooltipProp = '',
-    tooltipProps = {},
-    onMouseEnter: onMouseEnterProp = () => {},
-    focused = false,
-    tooltipHasDefaultBehavior = false
-  } = _a,
-      props = __rest$1(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter", "focused", "tooltipHasDefaultBehavior"]);
-
+      children = null,
+      className = '',
+      variant = 'span',
+      wrapModifier = null,
+      tooltip: tooltipProp = '',
+      tooltipProps = {},
+      onMouseEnter: onMouseEnterProp = () => {},
+      focused = false,
+      tooltipHasDefaultBehavior = false
+    } = _a,
+    props = __rest(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter", "focused", "tooltipHasDefaultBehavior"]);
   const Component = variant;
   const textRef = React.createRef();
   const [tooltip, setTooltip] = React.useState(tooltipProp);
-
   const onMouseEnter = event => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       setTooltip(tooltipProp || event.target.innerText);
     } else {
       setTooltip('');
     }
-
     onMouseEnterProp(event);
   };
-
   const onFocus = element => {
     if (element.offsetWidth < element.scrollWidth) {
       setTooltip(tooltipProp || element.innerText);
@@ -523,7 +483,6 @@ const TableText = _a => {
       setTooltip('');
     }
   };
-
   const text = React.createElement(Component, Object.assign({
     ref: textRef,
     onMouseEnter: !tooltipHasDefaultBehavior ? onMouseEnter : undefined,
@@ -641,24 +600,21 @@ var treeViewStyles = {
 };
 
 var RowSelectVariant;
-
 (function (RowSelectVariant) {
   RowSelectVariant["radio"] = "radio";
   RowSelectVariant["checkbox"] = "checkbox";
 })(RowSelectVariant || (RowSelectVariant = {}));
-
 const SelectColumn = _a => {
   var {
-    children = null,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    className,
-    onSelect = null,
-    selectVariant,
-    tooltip,
-    tooltipProps
-  } = _a,
-      props = __rest$1(_a, ["children", "className", "onSelect", "selectVariant", "tooltip", "tooltipProps"]);
-
+      children = null,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      className,
+      onSelect = null,
+      selectVariant,
+      tooltip,
+      tooltipProps
+    } = _a,
+    props = __rest(_a, ["children", "className", "onSelect", "selectVariant", "tooltip", "tooltipProps"]);
   const inputRef = React.createRef();
   const content = React.createElement(React.Fragment, null, React.createElement("label", null, React.createElement("input", Object.assign({}, props, {
     ref: inputRef,
@@ -707,25 +663,21 @@ const selectable = (label, {
     column,
     property
   };
-
   if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect && !rowData.fullWidth) {
     return {
       component: 'td',
       isVisible: true
     };
   }
-
   const rowId = rowIndex !== undefined ? rowIndex : -1;
   /**
    * @param {React.FormEvent} event - React form event
    */
-
   function selectClick(event) {
-    const selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected; // tslint:disable-next-line:no-unused-expression
-
+    const selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected;
+    // tslint:disable-next-line:no-unused-expression
     onSelect && onSelect(event, selected, rowId, rowData, extraData);
   }
-
   const customProps = Object.assign(Object.assign(Object.assign({}, rowId !== -1 ? {
     checked: rowData && !!rowData.selected,
     'aria-label': `Select row ${rowIndex}`
@@ -739,13 +691,11 @@ const selectable = (label, {
     disabled: true
   });
   let selectName = 'check-all';
-
   if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
     selectName = `checkrow${rowIndex}`;
   } else if (rowId !== -1) {
     selectName = 'radioGroup';
   }
-
   return {
     className: css(styles$1.tableCheck),
     component: rowId !== -1 ? 'td' : 'th',
@@ -793,35 +743,30 @@ const ArrowsAltVIcon = createIcon(ArrowsAltVIconConfig);
 var ArrowsAltVIcon$1 = ArrowsAltVIcon;
 
 var SortByDirection;
-
 (function (SortByDirection) {
   SortByDirection["asc"] = "asc";
   SortByDirection["desc"] = "desc";
 })(SortByDirection || (SortByDirection = {}));
-
 const SortColumn = _a => {
   var {
-    children = null,
-    className = '',
-    isSortedBy = false,
-    onSort = null,
-    sortDirection = '',
-    type = 'button',
-    tooltip,
-    tooltipProps,
-    tooltipHasDefaultBehavior
-  } = _a,
-      props = __rest$1(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type", "tooltip", "tooltipProps", "tooltipHasDefaultBehavior"]);
-
+      children = null,
+      className = '',
+      isSortedBy = false,
+      onSort = null,
+      sortDirection = '',
+      type = 'button',
+      tooltip,
+      tooltipProps,
+      tooltipHasDefaultBehavior
+    } = _a,
+    props = __rest(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type", "tooltip", "tooltipProps", "tooltipHasDefaultBehavior"]);
   let SortedByIcon;
   const [focused, setFocused] = React.useState(false);
-
   if (isSortedBy) {
     SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon$1 : LongArrowAltDownIcon$1;
   } else {
     SortedByIcon = ArrowsAltVIcon$1;
   }
-
   return React.createElement("button", Object.assign({}, props, {
     type: type,
     className: css(className, styles$1.tableButton),
@@ -893,23 +838,21 @@ const sortable = (label, {
   /**
    * @param {React.MouseEvent} event - React mouse event
    */
-
   function sortClicked(event) {
     let reversedDirection;
-
     if (!isSortedBy) {
       reversedDirection = sortBy.defaultDirection ? sortBy.defaultDirection : SortByDirection.asc;
     } else {
       reversedDirection = sortBy.direction === SortByDirection.asc ? SortByDirection.desc : SortByDirection.asc;
-    } // tslint:disable-next-line:no-unused-expression
-
-
+    }
+    // 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.createElement(SortColumn, {
       isSortedBy: isSortedBy,
       sortDirection: isSortedBy ? sortBy.direction : '',
@@ -919,11 +862,10 @@ const sortable = (label, {
       tooltipProps: tooltipProps,
       tooltipHasDefaultBehavior: tooltipHasDefaultBehavior
     }, label)
-  };
+  });
 };
 
 const resolveOrDefault = (resolver, defaultValue, rowData, extraData) => typeof resolver === 'function' ? resolver(rowData, extraData) : defaultValue;
-
 const cellActions = (actions, actionResolver, areActionsDisabled) => (label, {
   rowData,
   column,
@@ -965,12 +907,10 @@ const cellActions = (actions, actionResolver, areActionsDisabled) => (label, {
 };
 
 const camelize = s => s.toUpperCase().replace('-', '').replace('_', '');
-
 const toCamel = s => s.replace(/([-_][a-z])/gi, camelize);
 /**
  * @param {string} input - String to capitalize
  */
-
 function capitalize(input) {
   return input[0].toUpperCase() + input.substring(1);
 }
@@ -1012,13 +952,11 @@ const collapsible = (value, {
   /**
    * @param {React.MouseEvent} event - Mouse event
    */
-
   function onToggle(event) {
-    const open = rowData ? !rowData.isOpen : !allRowsExpanded; // tslint:disable-next-line:no-unused-expression
-
+    const open = rowData ? !rowData.isOpen : !allRowsExpanded;
+    // tslint:disable-next-line:no-unused-expression
     onCollapse && onCollapse(event, rowIndex, open, rowData, extraData);
   }
-
   return {
     className: ((rowData === null || rowData === void 0 ? void 0 : rowData.isOpen) !== undefined || rowId === -1) && css(styles$1.tableToggle),
     isVisible: !(rowData === null || rowData === void 0 ? void 0 : rowData.fullWidth),
@@ -1040,7 +978,6 @@ const compoundExpand = (value, {
   if (!value) {
     return null;
   }
-
   const {
     title,
     props
@@ -1060,12 +997,10 @@ const compoundExpand = (value, {
   /**
    * @param {React.MouseEvent} event - Mouse event
    */
-
   function onToggle(event) {
     // tslint:disable-next-line:no-unused-expression
     onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
   }
-
   return {
     className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
     children: props.isOpen !== undefined && React.createElement("button", {
@@ -1113,19 +1048,17 @@ const info = ({
       className: className
     }, value)
   });
-
   return infoObj;
 };
 
 const FavoritesCell = _a => {
   var {
-    className = '',
-    onFavorite,
-    isFavorited,
-    rowIndex
-  } = _a,
-      props = __rest$1(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
-
+      className = '',
+      onFavorite,
+      isFavorited,
+      rowIndex
+    } = _a,
+    props = __rest(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
   const ariaProps = rowIndex === undefined ? {} : {
     id: `favorites-button-${rowIndex}`,
     'aria-labelledby': `favorites-button-${rowIndex}`
@@ -1159,8 +1092,8 @@ const favoritable = (value, {
     columnIndex,
     column,
     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',
@@ -1170,13 +1103,10 @@ const favoritable = (value, {
   /**
    * @param {React.MouseEvent} event - Mouse event
    */
-
-
   function favoritesClick(event) {
     // tslint:disable-next-line:no-unused-expression
     onFavorite && onFavorite(event, rowData && !rowData.favorited, rowIndex, rowData, extraData);
   }
-
   const additionalProps = rowData.favoritesProps || {};
   return {
     className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
@@ -1227,11 +1157,9 @@ const treeRow = (onCollapse, onCheckChange, onToggleRowDetails) => (value, {
     className: styles$1.tableText,
     key: "table-text"
   }, content));
-
   const onChange = (isChecked, event) => {
     onCheckChange(event, isChecked, rowIndex, content, rowData);
   };
-
   return {
     component: 'th',
     className: treeViewStyles.tableTreeViewTitleCell,
@@ -1277,7 +1205,6 @@ const treeRow = (onCollapse, onCheckChange, onToggleRowDetails) => (value, {
 };
 
 var TableGridBreakpoint;
-
 (function (TableGridBreakpoint) {
   TableGridBreakpoint["none"] = "";
   TableGridBreakpoint["grid"] = "grid";
@@ -1286,9 +1213,7 @@ var TableGridBreakpoint;
   TableGridBreakpoint["gridXl"] = "grid-xl";
   TableGridBreakpoint["grid2xl"] = "grid-2xl";
 })(TableGridBreakpoint || (TableGridBreakpoint = {}));
-
 var TableVariant;
-
 (function (TableVariant) {
   TableVariant["compact"] = "compact";
 })(TableVariant || (TableVariant = {}));
@@ -1296,45 +1221,41 @@ var TableVariant;
 const TableContext = React.createContext({
   registerSelectableRow: () => {}
 });
-
 const TableBase = _a => {
   var _b, _c;
-
   var {
-    children,
-    className,
-    variant,
-    borders = true,
-    isStickyHeader = false,
-    gridBreakPoint = TableGridBreakpoint.gridMd,
-    'aria-label': ariaLabel,
-    role = 'grid',
-    innerRef,
-    ouiaId,
-    ouiaSafe = true,
-    isTreeTable = false,
-    isNested = false,
-    isStriped = false,
-    isExpandable = false,
-    hasNoInset = false,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    nestedHeaderColumnSpans,
-    selectableRowCaptionText
-  } = _a,
-      props = __rest$1(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "hasNoInset", "nestedHeaderColumnSpans", "selectableRowCaptionText"]);
-
+      children,
+      className,
+      variant,
+      borders = true,
+      isStickyHeader = false,
+      gridBreakPoint = TableGridBreakpoint.gridMd,
+      'aria-label': ariaLabel,
+      role = 'grid',
+      innerRef,
+      ouiaId,
+      ouiaSafe = true,
+      isTreeTable = false,
+      isNested = false,
+      isStriped = false,
+      isExpandable = false,
+      hasNoInset = false,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      nestedHeaderColumnSpans,
+      selectableRowCaptionText
+    } = _a,
+    props = __rest(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "hasNoInset", "nestedHeaderColumnSpans", "selectableRowCaptionText"]);
   const ref = React.useRef(null);
   const tableRef = innerRef || ref;
   const [hasSelectableRows, setHasSelectableRows] = React.useState(false);
   const [tableCaption, setTableCaption] = React.useState();
   React.useEffect(() => {
-    document.addEventListener('keydown', handleKeys); // sets up roving tab-index to tree tables only
-
+    document.addEventListener('keydown', handleKeys);
+    // sets up roving tab-index to tree tables only
     if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
       const tbody = tableRef.current.querySelector('tbody');
       tbody && setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
     }
-
     return function cleanup() {
       document.removeEventListener('keydown', handleKeys);
     };
@@ -1354,31 +1275,25 @@ const TableBase = _a => {
   const grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
   const breakPointPrefix = `treeView${gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1)}`;
   const treeGrid = (_c = treeViewStyles.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
-
   const handleKeys = event => {
-    if (isNested || !(tableRef && tableRef.current && tableRef.current.classList.contains(treeViewStyles.modifiers.treeView)) || // implements roving tab-index to tree tables only
+    if (isNested || !(tableRef && tableRef.current && tableRef.current.classList.contains(treeViewStyles.modifiers.treeView)) ||
+    // implements roving tab-index to tree tables only
     tableRef && tableRef.current !== event.target.closest(`.${styles$1.table}:not(.pf-m-nested)`)) {
       return;
     }
-
     const activeElement = document.activeElement;
     const key = event.key;
     const rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter(el => !el.classList.contains('pf-m-disabled') && !el.hidden);
-
     if (key === 'Space' || key === 'Enter') {
       activeElement.click();
       event.preventDefault();
     }
-
     const getFocusableElement = element => element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
-
     handleArrows(event, rows, element => element === activeElement.closest('tr'), getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
   };
-
   const registerSelectableRow = () => {
     !hasSelectableRows && setHasSelectableRows(true);
   };
-
   return React.createElement(TableContext.Provider, {
     value: {
       registerSelectableRow
@@ -1392,7 +1307,6 @@ const TableBase = _a => {
     role: 'treegrid'
   }, ouiaProps, props), hasSelectableRows && tableCaption, children));
 };
-
 const Table = React.forwardRef((props, ref) => React.createElement(TableBase, Object.assign({}, props, {
   innerRef: ref
 })));
@@ -1400,29 +1314,28 @@ Table.displayName = 'Table';
 
 const TrBase = _a => {
   var {
-    children,
-    className,
-    isExpanded,
-    isEditable,
-    isHidden = false,
-    isClickable = false,
-    isRowSelected = false,
-    isStriped = false,
-    isBorderRow = false,
-    innerRef,
-    ouiaId,
-    ouiaSafe = true,
-    resetOffset = false,
-    onRowClick,
-    isSelectable,
-    'aria-label': passedAriaLabel
-  } = _a,
-      props = __rest$1(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isClickable", "isRowSelected", "isStriped", "isBorderRow", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
-
+      children,
+      className,
+      isExpanded,
+      isEditable,
+      isHidden = false,
+      isClickable = false,
+      isRowSelected = false,
+      isStriped = false,
+      isBorderRow = false,
+      isControlRow = false,
+      innerRef,
+      ouiaId,
+      ouiaSafe = true,
+      resetOffset = false,
+      onRowClick,
+      isSelectable,
+      'aria-label': passedAriaLabel
+    } = _a,
+    props = __rest(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isClickable", "isRowSelected", "isStriped", "isBorderRow", "isControlRow", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
   const ouiaProps = useOUIAProps$1('TableRow', ouiaId, ouiaSafe);
   const [computedAriaLabel, setComputedAriaLabel] = React.useState('');
   let onKeyDown = null;
-
   if (onRowClick) {
     onKeyDown = e => {
       if (e.key === 'Enter' || e.key === ' ') {
@@ -1431,7 +1344,6 @@ const TrBase = _a => {
       }
     };
   }
-
   const rowIsHidden = isHidden || isExpanded !== undefined && !isExpanded;
   const {
     registerSelectableRow
@@ -1446,7 +1358,7 @@ const TrBase = _a => {
   }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
   const ariaLabel = passedAriaLabel || computedAriaLabel;
   return React.createElement(React.Fragment, null, React.createElement("tr", Object.assign({
-    className: css(styles$1.tableTr, className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isClickable && styles$1.modifiers.clickable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, isBorderRow && styles$1.modifiers.borderRow, resetOffset && styles$1.modifiers.firstCellOffsetReset),
+    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
@@ -1458,7 +1370,6 @@ const TrBase = _a => {
     onKeyDown
   }, ouiaProps, props), children));
 };
-
 const Tr = React.forwardRef((props, ref) => React.createElement(TrBase, Object.assign({}, props, {
   innerRef: ref
 })));
@@ -1466,20 +1377,18 @@ Tr.displayName = 'Tr';
 
 const TheadBase = _a => {
   var {
-    children,
-    className,
-    noWrap = false,
-    innerRef,
-    hasNestedHeader
-  } = _a,
-      props = __rest$1(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
-
+      children,
+      className,
+      noWrap = false,
+      innerRef,
+      hasNestedHeader
+    } = _a,
+    props = __rest(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
   return React.createElement("thead", Object.assign({
     className: css(styles$1.tableThead, className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader),
     ref: innerRef
   }, props), children);
 };
-
 const Thead = React.forwardRef((props, ref) => React.createElement(TheadBase, Object.assign({}, props, {
   innerRef: ref
 })));
@@ -1487,22 +1396,20 @@ Thead.displayName = 'Thead';
 
 const TbodyBase = _a => {
   var {
-    children,
-    className,
-    isExpanded,
-    innerRef,
-    isEvenStriped = false,
-    isOddStriped = false
-  } = _a,
-      props = __rest$1(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
-
+      children,
+      className,
+      isExpanded,
+      innerRef,
+      isEvenStriped = false,
+      isOddStriped = false
+    } = _a,
+    props = __rest(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
   return React.createElement("tbody", Object.assign({
     role: "rowgroup",
     className: css(styles$1.tableTbody, className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven),
     ref: innerRef
   }, props), children);
 };
-
 const Tbody = React.forwardRef((props, ref) => React.createElement(TbodyBase, Object.assign({}, props, {
   innerRef: ref
 })));
@@ -1532,16 +1439,13 @@ var styles = {
 /**
  * @param {any} props - Props
  */
-
 function mergeProps(...props) {
   const firstProps = props[0];
   const restProps = props.slice(1);
-
   if (!restProps.length) {
     return mergeWith({}, firstProps);
-  } // Avoid mutating the first prop collection
-
-
+  }
+  // Avoid mutating the first prop collection
   return mergeWith(mergeWith({}, firstProps), ...restProps, (a, b, key) => {
     if (key === 'children') {
       if (a && b) {
@@ -1549,19 +1453,16 @@ function mergeProps(...props) {
         return React.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;
   });
 }
@@ -1589,56 +1490,50 @@ var cssStickyCellRight = c_table__sticky_cell_Right;
 
 const ThBase = _a => {
   var {
-    children,
-    className,
-    component = 'th',
-    dataLabel,
-    scope = 'col',
-    textCenter = false,
-    sort = null,
-    modifier,
-    select = null,
-    expand: collapse = null,
-    tooltip = '',
-    tooltipProps,
-    onMouseEnter: onMouseEnterProp = () => {},
-    width,
-    visibility,
-    innerRef,
-    info: infoProps,
-    isStickyColumn = false,
-    hasRightBorder = false,
-    hasLeftBorder = false,
-    stickyMinWidth = '120px',
-    stickyLeftOffset,
-    stickyRightOffset,
-    isSubheader = false,
-    screenReaderText,
-    'aria-label': ariaLabel
-  } = _a,
-      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']);
-
+      children,
+      className,
+      component = 'th',
+      dataLabel,
+      scope = 'col',
+      textCenter = false,
+      sort = null,
+      modifier,
+      select = null,
+      expand: collapse = null,
+      tooltip = '',
+      tooltipProps,
+      onMouseEnter: onMouseEnterProp = () => {},
+      width,
+      visibility,
+      innerRef,
+      info: infoProps,
+      isStickyColumn = false,
+      hasRightBorder = false,
+      hasLeftBorder = false,
+      stickyMinWidth = '120px',
+      stickyLeftOffset,
+      stickyRightOffset,
+      isSubheader = false,
+      screenReaderText,
+      'aria-label': ariaLabel
+    } = _a,
+    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.');
   }
-
   const [showTooltip, setShowTooltip] = React.useState(false);
   const [truncated, setTruncated] = React.useState(false);
   const cellRef = innerRef ? innerRef : React.createRef();
-
   const onMouseEnter = event => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       !showTooltip && setShowTooltip(true);
     } else {
       showTooltip && setShowTooltip(false);
     }
-
     onMouseEnterProp(event);
   };
-
   let sortParams = null;
-
   if (sort) {
     if (sort.isFavorites) {
       sortParams = sortableFavorites({
@@ -1662,7 +1557,6 @@ const ThBase = _a => {
       });
     }
   }
-
   const selectParams = select ? selectable(children, {
     rowData: {
       selected: select.isSelected,
@@ -1691,29 +1585,25 @@ const ThBase = _a => {
   }) : null;
   const widthParams = width ? cellWidth(width)() : null;
   const visibilityParams = visibility ? classNames(...visibility.map(vis => Visibility[vis]))() : null;
-  let transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children; // info can wrap other transformedChildren
-
+  let transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children;
+  // info can wrap other transformedChildren
   let infoParams = null;
-
   if (infoProps) {
     infoParams = info(infoProps)(transformedChildren);
     transformedChildren = infoParams.children;
   }
-
   const merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
-
   const {
-    // ignore the merged children since we transform them ourselves so we can wrap it with info
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    children: mergedChildren = null,
-    // selectable adds this but we don't want it
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isVisible = null,
-    className: mergedClassName = '',
-    component: MergedComponent = component
-  } = merged,
-        mergedProps = __rest$1(merged, ["children", "isVisible", "className", "component"]);
-
+      // ignore the merged children since we transform them ourselves so we can wrap it with info
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      children: mergedChildren = null,
+      // selectable adds this but we don't want it
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      isVisible = null,
+      className: mergedClassName = '',
+      component: MergedComponent = component
+    } = merged,
+    mergedProps = __rest(merged, ["children", "isVisible", "className", "component"]);
   React.useEffect(() => {
     setTruncated(cellRef.current.offsetWidth < cellRef.current.scrollWidth);
   }, [cellRef]);
@@ -1744,7 +1634,6 @@ const ThBase = _a => {
     isVisible: true
   }, tooltipProps))) : cell;
 };
-
 const Th = React.forwardRef((props, ref) => React.createElement(ThBase, Object.assign({}, props, {
   innerRef: ref
 })));
@@ -1766,49 +1655,45 @@ const draggable = (value, {
 
 const TdBase = _a => {
   var {
-    children,
-    className,
-    isActionCell = false,
-    component = 'td',
-    dataLabel,
-    textCenter = false,
-    modifier,
-    select = null,
-    actions = null,
-    expand = null,
-    treeRow: treeRowProp = null,
-    compoundExpand: compoundExpandProp = null,
-    noPadding,
-    width,
-    visibility,
-    innerRef,
-    favorites = null,
-    draggableRow: draggableRowProp = null,
-    tooltip = '',
-    onMouseEnter: onMouseEnterProp = () => {},
-    isStickyColumn = false,
-    hasRightBorder = false,
-    hasLeftBorder = false,
-    stickyMinWidth = '120px',
-    stickyLeftOffset,
-    stickyRightOffset
-  } = _a,
-      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"]);
-
+      children,
+      className,
+      isActionCell = false,
+      component = 'td',
+      dataLabel,
+      textCenter = false,
+      modifier,
+      select = null,
+      actions = null,
+      expand = null,
+      treeRow: treeRowProp = null,
+      compoundExpand: compoundExpandProp = null,
+      noPadding,
+      width,
+      visibility,
+      innerRef,
+      favorites = null,
+      draggableRow: draggableRowProp = null,
+      tooltip = '',
+      onMouseEnter: onMouseEnterProp = () => {},
+      isStickyColumn = false,
+      hasRightBorder = false,
+      hasLeftBorder = false,
+      stickyMinWidth = '120px',
+      stickyLeftOffset,
+      stickyRightOffset
+    } = _a,
+    props = __rest(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow", "tooltip", "onMouseEnter", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset"]);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const [truncated, setTruncated] = React.useState(false);
   const cellRef = innerRef ? innerRef : React.createRef();
-
   const onMouseEnter = event => {
     if (event.target.offsetWidth < event.target.scrollWidth) {
       !showTooltip && setShowTooltip(true);
     } else {
       showTooltip && setShowTooltip(false);
     }
-
     onMouseEnterProp(event);
   };
-
   const selectParams = select ? selectable(children, {
     rowIndex: select.rowIndex,
     rowData: {
@@ -1894,17 +1779,15 @@ const TdBase = _a => {
     }
   }) : null;
   const merged = mergeProps(selectParams, actionParams, expandableParams, compoundParams, widthParams, visibilityParams, favoriteParams, treeRowParams, draggableParams);
-
   const {
-    // selectable adds this but we don't want it
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isVisible = null,
-    children: mergedChildren = null,
-    className: mergedClassName = '',
-    component: MergedComponent = component
-  } = merged,
-        mergedProps = __rest$1(merged, ["isVisible", "children", "className", "component"]);
-
+      // selectable adds this but we don't want it
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      isVisible = null,
+      children: mergedChildren = null,
+      className: mergedClassName = '',
+      component: MergedComponent = component
+    } = merged,
+    mergedProps = __rest(merged, ["isVisible", "children", "className", "component"]);
   const treeTableTitleCell = className && className.includes(treeViewStyles.tableTreeViewTitleCell) || mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell);
   React.useEffect(() => {
     setTruncated(cellRef.current.offsetWidth < cellRef.current.scrollWidth);
@@ -1933,7 +1816,6 @@ const TdBase = _a => {
     isVisible: true
   })) : cell;
 };
-
 const Td = React.forwardRef((props, ref) => React.createElement(TdBase, Object.assign({}, props, {
   innerRef: ref
 })));
@@ -1970,25 +1852,22 @@ function FilterableTable({
   actions,
   perPageOptions
 }) {
-
   const [page, setPage] = useState(DEFAULT_PAGE);
   const [perPage, setPerPage] = useState(DEFAULT_PERPAGE );
   const [sortTableBy, setSortTableBy] = useState({});
   const [rows, setRows] = useState([]);
   const [filteredItems, setFilteredItems] = useState(items);
   const [tableFilters, setTableFilters] = useState([]);
-  /**
-   * Sorts table by the selected column in ascending or decending order
-   * @param _event click
-   * @param index column index
-   * @param direction asc || desc
+  /**
+   * Sorts table by the selected column in ascending or decending order
+   * @param _event click
+   * @param index column index
+   * @param direction asc || desc
    */
-
   const onSort = (_event, index, direction) => {
     var _columns$index, _columns$index2;
-
-    const sortField = columns == null ? void 0 : (_columns$index = columns[index]) == null ? void 0 : _columns$index.sortField;
-    const sortFn = columns == null ? void 0 : (_columns$index2 = columns[index]) == null ? void 0 : _columns$index2.sortFn;
+    const sortField = columns == null || (_columns$index = columns[index]) == null ? void 0 : _columns$index.sortField;
+    const sortFn = columns == null || (_columns$index2 = columns[index]) == null ? void 0 : _columns$index2.sortFn;
     const sortedRows = sortFn ? sortBy(filteredItems, sortFn) : sortField ? sortBy(filteredItems, item => item[sortField]) : filteredItems;
     setSortTableBy({
       index,
@@ -1996,44 +1875,37 @@ function FilterableTable({
     });
     setFilteredItems(direction === SortByDirection.asc ? [...sortedRows] : [...(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
    */
-
-
   useEffect(() => {
     const startIndex = (page - 1) * perPage;
     const endIndex = startIndex + perPage;
     const 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);
   }
-
   const handleItemsPropChangeCallback = useCallback(handleItemsPropChange, [setPage, items]);
   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.
    */
-
   useEffect(() => setFilteredItems(items.filter(item => tableFilters.map((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$props$onCh, _filters$i;
+    return !f ? true : (_filters$i$props$onCh = filters == null || (_filters$i = filters[i]) == null || (_filters$i = _filters$i.props) == null || _filters$i.onChange == null ? void 0 : _filters$i.onChange(f, item)) != null ? _filters$i$props$onCh : true;
   }).reduce((r, v) => 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
    */
-
   const onFilterChange = (selected, index) => {
     handleItemsPropChangeCallback();
     setTableFilters(prevState => {
@@ -2041,15 +1913,13 @@ function FilterableTable({
       return [...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
    */
-
-
   const renderPagination = variant => {
-    return (filteredItems == null ? void 0 : filteredItems.length) > 0 && React__default.createElement(Pagination, {
+    return (filteredItems == null ? void 0 : filteredItems.length) > 0 && jsx(Pagination, {
       itemCount: (filteredItems == null ? void 0 : filteredItems.length) || 0,
       page: page,
       perPage: perPage,
@@ -2066,64 +1936,85 @@ function FilterableTable({
       }
     });
   };
-  /**
-   * Toolbar populated with provided filters
+  /**
+   * Toolbar populated with provided filters
    */
-
-
-  const header = React__default.createElement(Toolbar, null, React__default.createElement(ToolbarContent, null, filters == null ? void 0 : filters.map((el, i) => {
-    return React__default.createElement(ToolbarItem, {
-      key: i,
-      className: 'filterable-table__toolbar__item--filter'
-    }, cloneElement(el, {
-      onChange: selectedFilters => onFilterChange(selectedFilters, i)
-    }));
-  }), actions == null ? void 0 : actions.map((el, i) => {
-    return React__default.createElement(ToolbarItem, {
-      key: i,
-      className: 'filterable-table__toolbar__item--action'
-    }, el);
-  }), React__default.createElement(ToolbarItem, {
-    variant: 'pagination'
-  }, renderPagination('top'))));
-  return React__default.createElement("div", {
-    className: 'filterable-table'
-  }, isLoading ? React__default.createElement(Bullseye, {
-    style: {
-      minHeight: '15rem'
-    }
-  }, React__default.createElement("div", null, React__default.createElement(Title, {
-    headingLevel: 'h3'
-  }, React__default.createElement(Spinner, {
-    size: 'lg'
-  })))) : React__default.createElement(React__default.Fragment, null, header, React__default.createElement(Table, {
-    "aria-label": 'Packages Table',
-    gridBreakPoint: 'grid-xl'
-  }, React__default.createElement(Thead, null, React__default.createElement(Tr, null, columns.map((col, colIdx) => React__default.createElement(Th, Object.assign({
-    key: `pkg-table-head-${colIdx}`
-  }, col.sortField ? {
-    sort: {
-      onSort: onSort,
-      sortBy: sortTableBy,
-      columnIndex: colIdx
-    }
-  } : {}), col.title)))), React__default.createElement(Tbody, null, rows.length > 0 ? rows.map((row, rowIdx) => React__default.createElement(Tr, {
-    key: `pkg-table-row-${rowIdx}`
-  }, columns.map((_col, colIdx) => {
-    var _renderRow;
-
-    return React__default.createElement(Td, {
-      key: `pkg-table-row-${rowIdx}-col-${colIdx}`
-    }, (_renderRow = renderRow(row)) == null ? void 0 : _renderRow[colIdx]);
-  }))) : React__default.createElement(Tr, null, React__default.createElement(Td, {
-    colSpan: columns.length
-  }, React__default.createElement(EmptyState, null, React__default.createElement(EmptyStateHeader, {
-    titleText: 'No results found',
-    icon: React__default.createElement(EmptyStateIcon, {
-      icon: SearchIcon
-    }),
-    headingLevel: 'h5'
-  }))))))), renderPagination('bottom'));
+  const header = jsx(Toolbar, {
+    children: jsxs(ToolbarContent, {
+      children: [filters == null ? void 0 : filters.map((el, i) => {
+        return jsx(ToolbarItem, {
+          className: 'filterable-table__toolbar__item--filter',
+          children: cloneElement(el, {
+            onChange: selectedFilters => onFilterChange(selectedFilters, i)
+          })
+        }, i);
+      }), actions == null ? void 0 : actions.map((el, i) => {
+        return jsx(ToolbarItem, {
+          className: 'filterable-table__toolbar__item--action',
+          children: el
+        }, i);
+      }), jsx(ToolbarItem, {
+        variant: 'pagination',
+        children: renderPagination('top')
+      })]
+    })
+  });
+  return jsxs("div", {
+    className: 'filterable-table',
+    children: [isLoading ? jsx(Bullseye, {
+      style: {
+        minHeight: '15rem'
+      },
+      children: jsx("div", {
+        children: jsx(Title, {
+          headingLevel: 'h3',
+          children: jsx(Spinner, {
+            size: 'lg'
+          })
+        })
+      })
+    }) : jsxs(Fragment, {
+      children: [header, jsxs(Table, {
+        "aria-label": 'Packages Table',
+        gridBreakPoint: 'grid-xl',
+        children: [jsx(Thead, {
+          children: jsx(Tr, {
+            children: columns.map((col, colIdx) => jsx(Th, _extends({}, col.sortField ? {
+              sort: {
+                onSort: onSort,
+                sortBy: sortTableBy,
+                columnIndex: colIdx
+              }
+            } : {}, {
+              children: col.title
+            }), `pkg-table-head-${colIdx}`))
+          })
+        }), jsx(Tbody, {
+          children: rows.length > 0 ? rows.map((row, rowIdx) => jsx(Tr, {
+            children: columns.map((_col, colIdx) => {
+              var _renderRow;
+              return jsx(Td, {
+                children: (_renderRow = renderRow(row)) == null ? void 0 : _renderRow[colIdx]
+              }, `pkg-table-row-${rowIdx}-col-${colIdx}`);
+            })
+          }, `pkg-table-row-${rowIdx}`)) : jsx(Tr, {
+            children: jsx(Td, {
+              colSpan: columns.length,
+              children: jsx(EmptyState, {
+                children: jsx(EmptyStateHeader, {
+                  titleText: 'No results found',
+                  icon: jsx(EmptyStateIcon, {
+                    icon: SearchIcon
+                  }),
+                  headingLevel: 'h5'
+                })
+              })
+            })
+          })
+        })]
+      })]
+    }), renderPagination('bottom')]
+  });
 }
 
 const FilterInput = ({
@@ -2131,7 +2022,6 @@ const FilterInput = ({
   placeholder
 }) => {
   const [searchStr, setSearchStr] = useState('');
-
   const onChange = (event, text) => {
     event.stopPropagation();
     event.preventDefault();
@@ -2140,24 +2030,24 @@ const FilterInput = ({
       return text;
     });
   };
-
-  return React__default.createElement("div", {
-    className: 'filter-input'
-  }, React__default.createElement(SearchInput, {
-    value: searchStr,
-    placeholder: placeholder,
-    onChange: onChange,
-    "aria-label": 'Text input filter',
-    onFocus: event => {
-      event.stopPropagation();
-      event.preventDefault();
-    },
-    onClick: event => {
-      event.stopPropagation();
-      event.preventDefault();
-    },
-    onClear: event => onChange(event, '')
-  }));
+  return jsx("div", {
+    className: 'filter-input',
+    children: jsx(SearchInput, {
+      value: searchStr,
+      placeholder: placeholder,
+      onChange: onChange,
+      "aria-label": 'Text input filter',
+      onFocus: event => {
+        event.stopPropagation();
+        event.preventDefault();
+      },
+      onClick: event => {
+        event.stopPropagation();
+        event.preventDefault();
+      },
+      onClear: event => onChange(event, '')
+    })
+  });
 };
 
 const ExcludedPackagesTable = ({
@@ -2173,46 +2063,47 @@ const ExcludedPackagesTable = ({
     nvra,
     summary
   }) => {
-    return [gpg ? React__default.createElement("a", {
+    return [gpg ? jsx("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.createElement("span", null, nvra), summary];
+      rel: 'noopener noreferrer',
+      children: nvra
+    }) : jsx("span", {
+      children: nvra
+    }), summary];
   };
-
   const onTextInputFilterChange = (text, {
     nvra,
     summary
   }) => `${nvra + summary}`.toLowerCase().includes(text.toLowerCase());
-
-  return React__default.createElement("div", {
-    className: 'excluded-packages-table'
-  }, React__default.createElement(FilterableTable, {
-    isLoading: isLoading,
-    tableName: 'Excluded packages table',
-    columns: [{
-      title: 'Excluded Package'
-    }, {
-      title: 'Summary'
-    }],
-    items: excludedPackages,
-    renderRow: renderPackagesRow,
-    perPageOptions: [{
-      title: '5',
-      value: 5
-    }, {
-      title: '10',
-      value: 10
-    }, {
-      title: '20',
-      value: 20
-    }],
-    filters: [React__default.createElement(FilterInput, {
-      key: 'excluded-packages-table__filter-input',
-      onChange: onTextInputFilterChange,
-      placeholder: 'Filter excluded packages'
-    })]
-  }));
+  return jsx("div", {
+    className: 'excluded-packages-table',
+    children: jsx(FilterableTable, {
+      isLoading: isLoading,
+      tableName: 'Excluded packages table',
+      columns: [{
+        title: 'Excluded Package'
+      }, {
+        title: 'Summary'
+      }],
+      items: excludedPackages,
+      renderRow: renderPackagesRow,
+      perPageOptions: [{
+        title: '5',
+        value: 5
+      }, {
+        title: '10',
+        value: 10
+      }, {
+        title: '20',
+        value: 20
+      }],
+      filters: [jsx(FilterInput, {
+        onChange: onTextInputFilterChange,
+        placeholder: 'Filter excluded packages'
+      }, 'excluded-packages-table__filter-input')]
+    })
+  });
 };
 
 function EcoSelect({
@@ -2224,37 +2115,34 @@ function EcoSelect({
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState([]);
-
   const onToggle = isOpen => setIsOpen(isOpen);
-
   const onSelect = (event, selection) => {
     const result = selected.includes(selection) ? selected.filter(item => item !== selection) : [selection, ...selected];
     setSelected(result);
     onChange && onChange(result, event);
   };
-
   const id = uniqueId('select-');
-  return React__default.createElement("div", {
-    className: 'select'
-  }, React__default.createElement(Select, {
-    id: id,
-    variant: variant,
-    "aria-label": ariaLabel,
-    onToggle: (_event, isOpen) => onToggle(isOpen),
-    onSelect: onSelect,
-    selections: selected,
-    isOpen: isOpen,
-    placeholderText: placeholderText,
-    className: 'pf-select-wrapper'
-  }, options.map(option => React__default.createElement(SelectOption, {
-    key: option,
-    value: option
-  }))));
+  return jsx("div", {
+    className: 'select',
+    children: jsx(Select, {
+      id: id,
+      variant: variant,
+      "aria-label": ariaLabel,
+      onToggle: (_event, isOpen) => onToggle(isOpen),
+      onSelect: onSelect,
+      selections: selected,
+      isOpen: isOpen,
+      placeholderText: placeholderText,
+      className: 'pf-select-wrapper',
+      children: options.map(option => jsx(SelectOption, {
+        value: option
+      }, option))
+    })
+  });
 }
 
 const ToggleGroup = props => {
   const [selected, setSelected] = useState('');
-
   const onClick = (_, event) => {
     const id = event.currentTarget.id;
     setSelected(() => {
@@ -2262,19 +2150,17 @@ const ToggleGroup = props => {
       return id;
     });
   };
-
-  return React__default.createElement(ToggleGroup$1, {
-    "aria-label": props['aria-label']
-  }, props.options.map((option, index) => React__default.createElement(ToggleGroupItem, {
-    text: option.text,
-    key: index,
-    buttonId: option.id,
-    isSelected: selected === option.id,
-    onChange: (event, _) => onClick(_, event)
-  })));
+  return jsx(ToggleGroup$1, {
+    "aria-label": props['aria-label'],
+    children: props.options.map((option, index) => jsx(ToggleGroupItem, {
+      text: option.text,
+      buttonId: option.id,
+      isSelected: selected === option.id,
+      onChange: (event, _) => onClick(_, event)
+    }, index))
+  });
 };
 
-/* eslint-disable camelcase */
 const VulnerabilitiesTable = ({
   vulnerabilities,
   isLoading,
@@ -2283,65 +2169,80 @@ const VulnerabilitiesTable = ({
   const getImpact = ({
     severity
   }) => {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: 'vulnerabilities-table__impact-cell'
-    }, React__default.createElement(SecurityIcon, {
-      className: `impact-icon color-${severity.toLowerCase()}`
-    }), React__default.createElement("span", null, severity)));
+    return jsx(Fragment, {
+      children: jsxs("div", {
+        className: 'vulnerabilities-table__impact-cell',
+        children: [jsx(SecurityIcon, {
+          className: `impact-icon color-${severity.toLowerCase()}`
+        }), jsx("span", {
+          children: severity
+        })]
+      })
+    });
   };
-
   const getCVE = ({
     cve_id
   }) => {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: 'vulnerabilities-table__cve-cell'
-    }, React__default.createElement("a", {
-      href: `https://access.redhat.com/security/cve/${cve_id}`,
-      target: '_blank',
-      rel: 'noopener noreferrer'
-    }, cve_id)));
+    return jsx(Fragment, {
+      children: jsx("div", {
+        className: 'vulnerabilities-table__cve-cell',
+        children: jsx("a", {
+          href: `https://access.redhat.com/security/cve/${cve_id}`,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+          children: cve_id
+        })
+      })
+    });
   };
-
   const getAffectedPackages = rpms => {
-    return React__default.createElement(React__default.Fragment, null, rpms == null ? void 0 : rpms.map(({
-      gpg,
-      name,
-      version,
-      release,
-      architecture,
-      nvra
-    } = {}, index) => {
-      return gpg ? React__default.createElement("div", {
-        className: 'vulnerabilities-table__affected-packages-cell',
-        key: `affected-package-${index}`
-      }, React__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.createElement("div", {
-        key: `affected-package-${index}`,
-        className: 'vulnerabilities-table__affected-packages-cell'
-      }, React__default.createElement("span", null, nvra));
-    }));
+    return jsx(Fragment, {
+      children: rpms == null ? void 0 : rpms.map(({
+        gpg,
+        name,
+        version,
+        release,
+        architecture,
+        nvra
+      } = {}, index) => {
+        return gpg ? jsx("div", {
+          className: 'vulnerabilities-table__affected-packages-cell',
+          children: jsx("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',
+            children: nvra
+          })
+        }, `affected-package-${index}`) : jsx("div", {
+          className: 'vulnerabilities-table__affected-packages-cell',
+          children: jsx("span", {
+            children: nvra
+          })
+        }, `affected-package-${index}`);
+      })
+    });
   };
-
   const getRPMAdvisory = ({
     advisory_type,
     advisory_id
   }) => {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: 'vulnerabilities-table__rpm-advisory-cell'
-    }, advisory_type && advisory_id ? React__default.createElement("a", {
-      href: `https://access.redhat.com/errata/${advisory_type}-${advisory_id}`,
-      target: '_blank',
-      rel: 'noopener noreferrer'
-    }, advisory_type, "-", advisory_id) : React__default.createElement("span", null, "-")));
+    return jsx(Fragment, {
+      children: jsx("div", {
+        className: 'vulnerabilities-table__rpm-advisory-cell',
+        children: advisory_type && advisory_id ? jsxs("a", {
+          href: `https://access.redhat.com/errata/${advisory_type}-${advisory_id}`,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+          children: [advisory_type, "-", advisory_id]
+        }) : jsx("span", {
+          children: "-"
+        })
+      })
+    });
   };
-
   const renderVulnerabilitiesRow = vulnerability => {
     return [getImpact(vulnerability), getCVE(vulnerability), getAffectedPackages(vulnerability.rpm_nvra_with_link_data), getRPMAdvisory(vulnerability), vulnerability != null && vulnerability.creation_date ? format(new Date(vulnerability == null ? void 0 : vulnerability.creation_date), 'MMM dd, yyyy hh:mm a') : ''];
   };
-
   const onTextInputFilterChange = (text, {
     rpm_nvra_with_link_data,
     severity,
@@ -2353,89 +2254,81 @@ const VulnerabilitiesTable = ({
     }) => result += nvra, '');
     return `${severity + cve_id + advisory_id + nvraList}`.toLowerCase().includes(text.toLowerCase());
   };
-
   const onStatusFilterChange = (selected, vulnerability) => {
     return selected === 'fixed' ? !!(vulnerability != null && vulnerability.advisory_id) : selected === 'unfixed' ? !(vulnerability != null && vulnerability.advisory_id) : true;
   };
-
   const onImpactFilterChange = (selected, vulnerability) => {
     return selected.length > 0 ? selected.includes(vulnerability.severity) : true;
   };
-
-  return React__default.createElement("div", {
-    className: 'vulnerabilities-table'
-  }, React__default.createElement(FilterableTable, {
-    tableName: 'Vulnerabilities impact table',
-    columns: [{
-      title: 'Impact',
-      sortField: 'severity',
-      sortFn: vulnerability => severitySortOrder[vulnerability.severity]
-    }, {
-      title: 'CVE',
-      sortField: 'cve_id'
-    }, {
-      title: 'Affected Package(s)'
-    }, {
-      title: 'RPM Advisory',
-      sortField: 'advisory_id'
-    }, {
-      title: 'Created',
-      sortField: 'creation_date',
-      sortFn: vulnerability => new Date(vulnerability == null ? void 0 : vulnerability.creation_date).getTime()
-    }],
-    items: vulnerabilities,
-    renderRow: renderVulnerabilitiesRow,
-    isLoading: isLoading,
-    perPageOptions: [{
-      title: '5',
-      value: 5
-    }, {
-      title: '10',
-      value: 10
-    }, {
-      title: '20',
-      value: 20
-    }],
-    filters: [React__default.createElement(FilterInput, {
-      key: 'vulnerabilities-table__filter-input',
-      onChange: onTextInputFilterChange,
-      placeholder: 'Filter vulnerabilities'
-    }), !hideToggler ? React__default.createElement(ToggleGroup, {
-      key: 'vulnerabilities-table__toggle-group',
-      onChange: onStatusFilterChange,
-      "aria-label": 'Vulnerability status filter',
-      options: [{
-        id: 'all',
-        text: 'All'
+  return jsx("div", {
+    className: 'vulnerabilities-table',
+    children: jsx(FilterableTable, {
+      tableName: 'Vulnerabilities impact table',
+      columns: [{
+        title: 'Impact',
+        sortField: 'severity',
+        sortFn: vulnerability => severitySortOrder[vulnerability.severity]
       }, {
-        id: 'fixed',
-        text: 'Fixed'
+        title: 'CVE',
+        sortField: 'cve_id'
       }, {
-        id: 'unfixed',
-        text: 'Unfixed'
-      }]
-    }) : React__default.createElement(React__default.Fragment, null), React__default.createElement(EcoSelect, {
-      key: 'vulnerabilities-table__select',
-      onChange: onImpactFilterChange,
-      "aria-label": 'Impact filter',
-      placeholderText: 'Impact',
-      variant: 'checkbox',
-      options: Array.from(new Set(vulnerabilities.map(vulnerability => vulnerability.severity)))
-    })]
-  }));
+        title: 'Affected Package(s)'
+      }, {
+        title: 'RPM Advisory',
+        sortField: 'advisory_id'
+      }, {
+        title: 'Created',
+        sortField: 'creation_date',
+        sortFn: vulnerability => new Date(vulnerability == null ? void 0 : vulnerability.creation_date).getTime()
+      }],
+      items: vulnerabilities,
+      renderRow: renderVulnerabilitiesRow,
+      isLoading: isLoading,
+      perPageOptions: [{
+        title: '5',
+        value: 5
+      }, {
+        title: '10',
+        value: 10
+      }, {
+        title: '20',
+        value: 20
+      }],
+      filters: [jsx(FilterInput, {
+        onChange: onTextInputFilterChange,
+        placeholder: 'Filter vulnerabilities'
+      }, 'vulnerabilities-table__filter-input'), !hideToggler ? jsx(ToggleGroup, {
+        onChange: onStatusFilterChange,
+        "aria-label": 'Vulnerability status filter',
+        options: [{
+          id: 'all',
+          text: 'All'
+        }, {
+          id: 'fixed',
+          text: 'Fixed'
+        }, {
+          id: 'unfixed',
+          text: 'Unfixed'
+        }]
+      }, 'vulnerabilities-table__toggle-group') : jsx(Fragment, {}), jsx(EcoSelect, {
+        onChange: onImpactFilterChange,
+        "aria-label": 'Impact filter',
+        placeholderText: 'Impact',
+        variant: 'checkbox',
+        options: Array.from(new Set(vulnerabilities.map(vulnerability => vulnerability.severity)))
+      }, 'vulnerabilities-table__select')]
+    })
+  });
 };
 
-/* eslint-disable camelcase */
 const severitySortOrder = {
   Critical: 1,
   Important: 2,
   Moderate: 3,
   Low: 4
 };
-
 const InsertCss = () => {
   const styleId = 'example-component-styles';
-
   if (!document.getElementById(styleId)) {
     const styleTag = document.createElement('style');
     styleTag.id = styleId;
@@ -2443,33 +2336,29 @@ const InsertCss = () => {
     document.body.appendChild(styleTag);
   }
 };
-
 const PackagesTable = ({
   vulnerabilities: _vulnerabilities = [],
   rpms: _rpms = [],
   hideToggler,
   isLoading: _isLoading = false
 }) => {
-  const [excludedPackages, setExcludedPackages] = React.useState([]);
-  const [uniqueVulnerabilities, setUniqueVulnerabilities] = React.useState([]);
-  const [activeKey, setActiveKey] = React.useState(0);
-  React.useEffect(() => {
+  const [excludedPackages, setExcludedPackages] = useState([]);
+  const [uniqueVulnerabilities, setUniqueVulnerabilities] = useState([]);
+  const [activeKey, setActiveKey] = useState(0);
+  useEffect(() => {
     const VALID_REDHAT_GPG_KEYS = ['199e2f91fd431d51', '5326810137017186', '45689c882fa658e0', '219180cddb42a60e', '7514f77d8366b0d9', 'fd372689897da07a', '938a80caf21541eb', '08b871e6a5787476'];
-
     const packages = _rpms.filter(({
       gpg
     }) => !VALID_REDHAT_GPG_KEYS.includes(gpg));
-
     setExcludedPackages(packages);
-    const uniqueVulnerabilities = [..._vulnerabilities]; // augment vulnerabilities with link data
-
+    const uniqueVulnerabilities = [..._vulnerabilities];
+    // augment vulnerabilities with link data
     uniqueVulnerabilities.forEach(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(({
+        vulnerability == null || (_vulnerability$affect = vulnerability.affected_packages) == null || _vulnerability$affect.forEach(({
           name,
           arch
         }) => {
@@ -2478,50 +2367,54 @@ const PackagesTable = ({
         });
       } else {
         var _vulnerability$packag;
-
-        vulnerability == null ? void 0 : (_vulnerability$packag = vulnerability.packages) == null ? void 0 : _vulnerability$packag.forEach(p => {
+        vulnerability == null || (_vulnerability$packag = vulnerability.packages) == null || _vulnerability$packag.forEach(p => {
           var _p$rpm_nvra;
-
-          return p == null ? void 0 : (_p$rpm_nvra = p.rpm_nvra) == null ? void 0 : _p$rpm_nvra.forEach(rpm_nvra => {
+          return p == null || (_p$rpm_nvra = p.rpm_nvra) == null ? void 0 : _p$rpm_nvra.forEach(rpm_nvra => {
             const link_data = _rpms == null ? void 0 : _rpms.filter(pk => pk.nvra === rpm_nvra);
             vulnerability.rpm_nvra_with_link_data.push(link_data[0]);
           });
         });
       }
-
       return vulnerability;
-    }); // sort vulnerabilities by severity
-
-    uniqueVulnerabilities.sort(vulnerability => severitySortOrder[vulnerability.severity]); // filter out vulnerabilities with duplicate CVE IDs
-
+    });
+    // sort vulnerabilities by severity
+    uniqueVulnerabilities.sort(vulnerability => severitySortOrder[vulnerability.severity]);
+    // filter out vulnerabilities with duplicate CVE IDs
     uniqueVulnerabilities.filter((value, index, self) => self.findIndex(vulnerability => vulnerability.cve_id === value.cve_id) === index);
     setUniqueVulnerabilities(uniqueVulnerabilities);
   }, [_rpms, _vulnerabilities]);
   InsertCss();
-  return React.createElement(React.Fragment, null, (uniqueVulnerabilities.length > 0 || excludedPackages.length > 0) && React.createElement("div", {
-    className: 'packages-table'
-  }, React.createElement(Tabs, {
-    activeKey: activeKey,
-    onSelect: (_evt, tabKey) => setActiveKey(tabKey),
-    variant: 'default',
-    isBox: true,
-    "aria-label": 'vulnerability tab'
-  }, uniqueVulnerabilities.length > 0 && React.createElement(Tab, {
-    eventKey: 0,
-    title: `Vulnerabilities (${uniqueVulnerabilities.length})`
-  }, React.createElement(VulnerabilitiesTable, {
-    vulnerabilities: uniqueVulnerabilities,
-    isLoading: _isLoading,
-    hideToggler: hideToggler
-  })), excludedPackages.length > 0 && React.createElement(Tab, {
-    eventKey: 1,
-    title: `Excluded Packages (${excludedPackages.length})`
-  }, React.createElement("p", {
-    className: 'packages-table__excluded-packages-disclaimer'
-  }, "The following packages were found in this image and cannot be scanned or compared to public vulnerability information. This image may include additional packages or content not found or listed below."), React.createElement(ExcludedPackagesTable, {
-    excludedPackages: excludedPackages,
-    isLoading: _isLoading
-  })))));
+  return jsx(Fragment, {
+    children: (uniqueVulnerabilities.length > 0 || excludedPackages.length > 0) && jsx("div", {
+      className: 'packages-table',
+      children: jsxs(Tabs, {
+        activeKey: activeKey,
+        onSelect: (_evt, tabKey) => setActiveKey(tabKey),
+        variant: 'default',
+        isBox: true,
+        "aria-label": 'vulnerability tab',
+        children: [uniqueVulnerabilities.length > 0 && jsx(Tab, {
+          eventKey: 0,
+          title: `Vulnerabilities (${uniqueVulnerabilities.length})`,
+          children: jsx(VulnerabilitiesTable, {
+            vulnerabilities: uniqueVulnerabilities,
+            isLoading: _isLoading,
+            hideToggler: hideToggler
+          })
+        }), excludedPackages.length > 0 && jsxs(Tab, {
+          eventKey: 1,
+          title: `Excluded Packages (${excludedPackages.length})`,
+          children: [jsx("p", {
+            className: 'packages-table__excluded-packages-disclaimer',
+            children: "The following packages were found in this image and cannot be scanned or compared to public vulnerability information. This image may include additional packages or content not found or listed below."
+          }), jsx(ExcludedPackagesTable, {
+            excludedPackages: excludedPackages,
+            isLoading: _isLoading
+          })]
+        })]
+      })
+    })
+  });
 };
 
 export { PackagesTable, severitySortOrder };