@patternfly/react-table 4.61.6 → 4.61.10

package/dist/umd/react-table.js

@@ -1076,6 +1076,18 @@
             }
         }
     }
+    /** This function returns a list of tabbable items in a container
+     *
+     *  @param {any} containerRef to the container
+     *  @param {string} tababbleSelectors CSS selector string of tabbable items
+     */
+    function findTabbableElements(containerRef, tababbleSelectors) {
+        const tabbable = containerRef.current.querySelectorAll(tababbleSelectors);
+        const list = Array.prototype.filter.call(tabbable, function (item) {
+            return item.tabIndex >= '0';
+        });
+        return list;
+    }
     /** This function is a helper for keyboard navigation through dropdowns.
      *
      * @param {number} index The index of the element you're on
@@ -1113,13 +1125,32 @@
      * @param {object} mods The modifiers object
      * @param {any} styles The appropriate styles object for the component
      */
-    const formatBreakpointMods = (mods, styles, stylePrefix = '') => Object.entries(mods || {})
-        .map(([breakpoint, mod]) => `${stylePrefix}${mod}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`)
-        .map(toCamel$1)
-        .map(mod => mod.replace(/-?(\dxl)/gi, (_res, group) => `_${group}`))
-        .map(modifierKey => styles.modifiers[modifierKey])
-        .filter(Boolean)
-        .join(' ');
+    const formatBreakpointMods = (mods, styles, stylePrefix = '', breakpoint) => {
+        if (!mods) {
+            return '';
+        }
+        if (breakpoint) {
+            if (breakpoint in mods) {
+                return styles.modifiers[toCamel$1(`${stylePrefix}${mods[breakpoint]}`)];
+            }
+            // the current breakpoint is not specified in mods, so we try to find the next nearest
+            const breakpointsOrder = ['2xl', 'xl', 'lg', 'md', 'sm', 'default'];
+            const breakpointsIndex = breakpointsOrder.indexOf(breakpoint);
+            for (let i = breakpointsIndex; i < breakpointsOrder.length; i++) {
+                if (breakpointsOrder[i] in mods) {
+                    return styles.modifiers[toCamel$1(`${stylePrefix}${mods[breakpointsOrder[i]]}`)];
+                }
+            }
+            return '';
+        }
+        return Object.entries(mods || {})
+            .map(([breakpoint, mod]) => `${stylePrefix}${mod}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`)
+            .map(toCamel$1)
+            .map(mod => mod.replace(/-?(\dxl)/gi, (_res, group) => `_${group}`))
+            .map(modifierKey => styles.modifiers[modifierKey])
+            .filter(Boolean)
+            .join(' ');
+    };
     const camelize$1 = (s) => s
         .toUpperCase()
         .replace('-', '')
@@ -4841,6 +4872,7 @@
         ArrowLeft: 'ArrowLeft',
         ArrowRight: 'ArrowRight'
     };
+    const SelectFooterTabbableItems = 'input, button, select, textarea, a[href]';
 
     class SelectOption extends React__namespace.Component {
         constructor() {
@@ -4866,7 +4898,12 @@
                         event.stopPropagation();
                     }
                     else {
-                        keyHandler(index, innerIndex, 'tab');
+                        if (event.shiftKey) {
+                            keyHandler(index, innerIndex, 'up');
+                        }
+                        else {
+                            keyHandler(index, innerIndex, 'tab');
+                        }
                     }
                 }
                 event.preventDefault();
@@ -5103,7 +5140,8 @@
                                 isChecked: this.checkForValue(option.props.value, checked),
                                 sendRef,
                                 keyHandler,
-                                index: index++
+                                index: index++,
+                                isLastOptionBeforeFooter
                             })))) : null
                     });
                 });
@@ -5186,26 +5224,19 @@
                     onClose();
                 }
             };
-            this.findTabbableFooterElements = () => {
-                const tabbable = this.props.footerRef.current.querySelectorAll('input, button, select, textarea, a[href]');
-                const list = Array.prototype.filter.call(tabbable, function (item) {
-                    return item.tabIndex >= '0';
-                });
-                return list;
-            };
             this.handleGlobalKeys = (event) => {
-                const { parentRef, menuRef, hasFooter, isOpen, variant, onToggle, onClose } = this.props;
+                const { parentRef, menuRef, hasFooter, footerRef, isOpen, variant, onToggle, onClose, moveFocusToLastMenuItem } = this.props;
                 const escFromToggle = parentRef && parentRef.current && parentRef.current.contains(event.target);
                 const escFromWithinMenu = menuRef && menuRef.current && menuRef.current.contains && menuRef.current.contains(event.target);
                 if (isOpen &&
                     event.key === KeyTypes.Tab &&
                     (variant === SelectVariant.typeahead || variant === SelectVariant.typeaheadMulti)) {
-                    this.props.handleTypeaheadKeys('tab');
+                    this.props.handleTypeaheadKeys('tab', event.shiftKey);
                     event.preventDefault();
                     return;
                 }
                 if (isOpen && event.key === KeyTypes.Tab && hasFooter) {
-                    const tabbableItems = this.findTabbableFooterElements();
+                    const tabbableItems = findTabbableElements(footerRef, SelectFooterTabbableItems);
                     // If no tabbable item in footer close select
                     if (tabbableItems.length <= 0) {
                         onToggle(false);
@@ -5214,14 +5245,30 @@
                         return;
                     }
                     else {
-                        // if current element is not in footer, tab to first tabbable element in footer
-                        const currentElementIndex = tabbableItems.findIndex(item => item === document.activeElement);
+                        // if current element is not in footer, tab to first tabbable element in footer, or close if shift clicked
+                        const currentElementIndex = tabbableItems.findIndex((item) => item === document.activeElement);
                         if (currentElementIndex === -1) {
-                            tabbableItems[0].focus();
-                            return;
+                            if (event.shiftKey) {
+                                if (variant !== 'checkbox') {
+                                    // only close non checkbox variation on shift clicked
+                                    onToggle(false);
+                                    onClose();
+                                    this.toggle.current.focus();
+                                }
+                            }
+                            else {
+                                // tab to footer
+                                tabbableItems[0].focus();
+                                return;
+                            }
                         }
                         // Current element is in footer.
                         if (event.shiftKey) {
+                            // Move focus back to menuif current tab index is 0
+                            if (currentElementIndex === 0) {
+                                moveFocusToLastMenuItem();
+                                event.preventDefault();
+                            }
                             return;
                         }
                         // Tab to next element in footer or close if there are none
@@ -5295,7 +5342,7 @@
         }
         render() {
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            const _a = this.props, { className, children, isOpen, isActive, isPlain, isDisabled, hasPlaceholderStyle, variant, onToggle, onEnter, onClose, onClickTypeaheadToggleButton, handleTypeaheadKeys, parentRef, menuRef, id, type, hasClearButton, 'aria-labelledby': ariaLabelledBy, 'aria-label': ariaLabel, hasFooter, footerRef } = _a, props = __rest$1(_a, ["className", "children", "isOpen", "isActive", "isPlain", "isDisabled", "hasPlaceholderStyle", "variant", "onToggle", "onEnter", "onClose", "onClickTypeaheadToggleButton", "handleTypeaheadKeys", "parentRef", "menuRef", "id", "type", "hasClearButton", 'aria-labelledby', 'aria-label', "hasFooter", "footerRef"]);
+            const _a = this.props, { className, children, isOpen, isActive, isPlain, isDisabled, hasPlaceholderStyle, variant, onToggle, onEnter, onClose, onClickTypeaheadToggleButton, handleTypeaheadKeys, moveFocusToLastMenuItem, parentRef, menuRef, id, type, hasClearButton, 'aria-labelledby': ariaLabelledBy, 'aria-label': ariaLabel, hasFooter, footerRef } = _a, props = __rest$1(_a, ["className", "children", "isOpen", "isActive", "isPlain", "isDisabled", "hasPlaceholderStyle", "variant", "onToggle", "onEnter", "onClose", "onClickTypeaheadToggleButton", "handleTypeaheadKeys", "moveFocusToLastMenuItem", "parentRef", "menuRef", "id", "type", "hasClearButton", 'aria-labelledby', 'aria-label', "hasFooter", "footerRef"]);
             /* eslint-enable @typescript-eslint/no-unused-vars */
             const isTypeahead = variant === SelectVariant.typeahead || variant === SelectVariant.typeaheadMulti || hasClearButton;
             const toggleProps = {
@@ -5758,9 +5805,37 @@
                     typeaheadInputValue
                 }));
             };
-            this.handleTypeaheadKeys = (position) => {
+            this.switchFocusToFavoriteMenu = () => {
+                const { typeaheadCurrIndex, typeaheadStoredIndex } = this.state;
+                let indexForFocus = 0;
+                if (typeaheadCurrIndex !== -1) {
+                    indexForFocus = typeaheadCurrIndex;
+                }
+                else if (typeaheadStoredIndex !== -1) {
+                    indexForFocus = typeaheadStoredIndex;
+                }
+                if (this.refCollection[indexForFocus] !== null && this.refCollection[indexForFocus][0] !== null) {
+                    this.refCollection[indexForFocus][0].focus();
+                }
+                else {
+                    this.clearRef.current.focus();
+                }
+                this.setState({
+                    tabbedIntoFavoritesMenu: true,
+                    typeaheadCurrIndex: -1
+                });
+            };
+            this.moveFocusToLastMenuItem = () => {
+                const refCollectionLen = this.refCollection.length;
+                if (refCollectionLen > 0 &&
+                    this.refCollection[refCollectionLen - 1] !== null &&
+                    this.refCollection[refCollectionLen - 1][0] !== null) {
+                    this.refCollection[refCollectionLen - 1][0].focus();
+                }
+            };
+            this.handleTypeaheadKeys = (position, shiftKey = false) => {
                 const { isOpen, onFavorite } = this.props;
-                const { typeaheadCurrIndex, tabbedIntoFavoritesMenu, typeaheadStoredIndex } = this.state;
+                const { typeaheadCurrIndex, tabbedIntoFavoritesMenu } = this.state;
                 const typeaheadActiveChild = this.getTypeaheadActiveChild(typeaheadCurrIndex);
                 if (isOpen) {
                     if (position === 'enter') {
@@ -5778,32 +5853,127 @@
                     }
                     else if (position === 'tab') {
                         if (onFavorite) {
+                            // if the input has focus, tab to the first item or the last item that was previously focused.
                             if (this.inputRef.current === document.activeElement) {
-                                let indexForFocus = 0;
-                                if (typeaheadCurrIndex !== -1) {
-                                    indexForFocus = typeaheadCurrIndex;
-                                }
-                                else if (typeaheadStoredIndex !== -1) {
-                                    indexForFocus = typeaheadStoredIndex;
-                                }
-                                if (this.refCollection[indexForFocus] !== null && this.refCollection[indexForFocus][0] !== null) {
-                                    this.refCollection[indexForFocus][0].focus();
+                                // If shift is also clicked and there is a footer, tab to the last item in tabbable footer
+                                if (this.props.footer && shiftKey) {
+                                    const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
+                                    if (tabbableItems.length > 0) {
+                                        if (tabbableItems[tabbableItems.length - 1]) {
+                                            tabbableItems[tabbableItems.length - 1].focus();
+                                        }
+                                    }
                                 }
                                 else {
-                                    this.clearRef.current.focus();
+                                    this.switchFocusToFavoriteMenu();
                                 }
-                                this.setState({
-                                    tabbedIntoFavoritesMenu: true,
-                                    typeaheadCurrIndex: -1
-                                });
                             }
                             else {
-                                this.inputRef.current.focus();
-                                this.setState({ tabbedIntoFavoritesMenu: false });
+                                // focus is on menu or footer
+                                if (this.props.footer) {
+                                    let tabbedIntoMenu = false;
+                                    const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
+                                    if (tabbableItems.length > 0) {
+                                        // if current element is not in footer, tab to first tabbable element in footer,
+                                        // if shift was clicked, tab to input since focus is on menu
+                                        const currentElementIndex = tabbableItems.findIndex((item) => item === document.activeElement);
+                                        if (currentElementIndex === -1) {
+                                            if (shiftKey) {
+                                                // currently in menu, shift back to input
+                                                this.inputRef.current.focus();
+                                            }
+                                            else {
+                                                // currently in menu, tab to first tabbable item in footer
+                                                tabbableItems[0].focus();
+                                            }
+                                        }
+                                        else {
+                                            // already in footer
+                                            if (shiftKey) {
+                                                // shift to previous item
+                                                if (currentElementIndex === 0) {
+                                                    // on first footer item, shift back to menu
+                                                    this.switchFocusToFavoriteMenu();
+                                                    tabbedIntoMenu = true;
+                                                }
+                                                else {
+                                                    // shift to previous footer item
+                                                    tabbableItems[currentElementIndex - 1].focus();
+                                                }
+                                            }
+                                            else {
+                                                // tab to next tabbable item in footer or to input.
+                                                if (tabbableItems[currentElementIndex + 1]) {
+                                                    tabbableItems[currentElementIndex + 1].focus();
+                                                }
+                                                else {
+                                                    this.inputRef.current.focus();
+                                                }
+                                            }
+                                        }
+                                    }
+                                    else {
+                                        // no tabbable items in footer, tab to input
+                                        this.inputRef.current.focus();
+                                        tabbedIntoMenu = false;
+                                    }
+                                    this.setState({ tabbedIntoFavoritesMenu: tabbedIntoMenu });
+                                }
+                                else {
+                                    this.inputRef.current.focus();
+                                    this.setState({ tabbedIntoFavoritesMenu: false });
+                                }
                             }
                         }
                         else {
-                            this.onToggle(false);
+                            // Close if there is no footer
+                            if (!this.props.footer) {
+                                this.onToggle(false);
+                            }
+                            else {
+                                // has footer
+                                const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
+                                const currentElementIndex = tabbableItems.findIndex((item) => item === document.activeElement);
+                                if (this.inputRef.current === document.activeElement) {
+                                    if (shiftKey) {
+                                        // close toggle if shift key and tab on input
+                                        this.onToggle(false);
+                                    }
+                                    else {
+                                        // tab to first tabbable item in footer
+                                        if (tabbableItems[0]) {
+                                            tabbableItems[0].focus();
+                                        }
+                                        else {
+                                            this.onToggle(false);
+                                        }
+                                    }
+                                }
+                                else {
+                                    // focus is in footer
+                                    if (shiftKey) {
+                                        if (currentElementIndex === 0) {
+                                            // shift tab back to input
+                                            this.inputRef.current.focus();
+                                        }
+                                        else {
+                                            // shift to previous footer item
+                                            tabbableItems[currentElementIndex - 1].focus();
+                                        }
+                                    }
+                                    else {
+                                        // tab to next footer item or close tab if last item
+                                        if (tabbableItems[currentElementIndex + 1]) {
+                                            tabbableItems[currentElementIndex + 1].focus();
+                                        }
+                                        else {
+                                            // no next item, close toggle
+                                            this.onToggle(false);
+                                            this.inputRef.current.focus();
+                                        }
+                                    }
+                                }
+                            }
                         }
                     }
                     else if (!tabbedIntoFavoritesMenu) {
@@ -5960,13 +6130,13 @@
             /* eslint-disable @typescript-eslint/no-unused-vars */
             onFilter, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            onTypeaheadInputChanged, onCreateOption, isCreatable, onToggle, createText, noResultsFoundText, customBadgeText, inputIdPrefix, 
+            onTypeaheadInputChanged, onCreateOption, isCreatable, onToggle, createText, noResultsFoundText, customBadgeText, inputIdPrefix, inputAutoComplete, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
             isInputValuePersisted, isInputFilterPersisted, 
             /* eslint-enable @typescript-eslint/no-unused-vars */
             menuAppendTo, favorites, onFavorite, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject"]);
+            favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "inputAutoComplete", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject"]);
             const { focusFirstOption: openedOnEnter, typeaheadCurrIndex, typeaheadInputValue, typeaheadFilteredChildren, favoritesGroup } = this.state;
             const selectToggleId = toggleId || `pf-select-toggle-id-${currentId++}`;
             const selections = Array.isArray(selectionsProp) ? selectionsProp : [selectionsProp];
@@ -6004,11 +6174,11 @@
             if (isOpen) {
                 if (renderableItems.find(item => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.key) === 'loading'; }) === undefined) {
                     if (loadingVariant === 'spinner') {
-                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoading: true, key: "loading", value: "loading", isGrouped: true },
+                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoading: true, key: "loading", value: "loading" },
                             React__namespace.createElement(Spinner, { size: "lg" })));
                     }
                     else if (loadingVariant === null || loadingVariant === void 0 ? void 0 : loadingVariant.text) {
-                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoad: true, key: "loading", value: loadingVariant.text, isGrouped: true, setViewMoreNextIndex: this.setVieMoreNextIndex, onClick: loadingVariant === null || loadingVariant === void 0 ? void 0 : loadingVariant.onClick }));
+                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoad: true, key: "loading", value: loadingVariant.text, setViewMoreNextIndex: this.setVieMoreNextIndex, onClick: loadingVariant === null || loadingVariant === void 0 ? void 0 : loadingVariant.onClick }));
                     }
                 }
             }
@@ -6047,6 +6217,23 @@
                                     this.handleMenuKeys(0, 0, 'right');
                                     event.preventDefault();
                                 }
+                                else if (event.key === KeyTypes.Tab && variant !== SelectVariant.checkbox && this.props.footer) {
+                                    // tab to footer or close menu if shift key
+                                    if (event.shiftKey) {
+                                        this.onToggle(false);
+                                    }
+                                    else {
+                                        const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
+                                        if (tabbableItems.length > 0) {
+                                            tabbableItems[0].focus();
+                                            event.stopPropagation();
+                                            event.preventDefault();
+                                        }
+                                        else {
+                                            this.onToggle(false);
+                                        }
+                                    }
+                                }
                                 else if (event.key === KeyTypes.Tab && variant === SelectVariant.checkbox) {
                                     // More modal-like experience for checkboxes
                                     // Let SelectOption handle this
@@ -6059,7 +6246,7 @@
                                     event.stopPropagation();
                                     event.preventDefault();
                                 }
-                            }, ref: this.filterRef, autoComplete: "never" })),
+                            }, ref: this.filterRef, autoComplete: inputAutoComplete })),
                     React__namespace.createElement(Divider, { key: "inline-filter-divider" })));
                 renderableItems = [filterBox, ...typeaheadFilteredChildren].map((option, index) => React__namespace.cloneElement(option, { key: index }));
             }
@@ -6121,7 +6308,7 @@
                 " ") : innerMenu;
             const popperContainer = (React__namespace.createElement("div", Object.assign({ className: css(_default$b.select, isOpen && _default$b.modifiers.expanded, validated === ValidatedOptions.success && _default$b.modifiers.success, validated === ValidatedOptions.warning && _default$b.modifiers.warning, validated === ValidatedOptions.error && _default$b.modifiers.invalid, direction === SelectDirection.up && _default$b.modifiers.top, className) }, (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })), isOpen && menuContainer));
             const mainContainer = (React__namespace.createElement("div", Object.assign({ className: css(_default$b.select, isOpen && _default$b.modifiers.expanded, validated === ValidatedOptions.success && _default$b.modifiers.success, validated === ValidatedOptions.warning && _default$b.modifiers.warning, validated === ValidatedOptions.error && _default$b.modifiers.invalid, direction === SelectDirection.up && _default$b.modifiers.top, className), ref: this.parentRef }, getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })),
-                React__namespace.createElement(SelectToggle, Object.assign({ id: selectToggleId, parentRef: this.parentRef, menuRef: this.menuComponentRef }, (footer && { footerRef: this.footerRef }), { isOpen: isOpen, isPlain: isPlain, hasPlaceholderStyle: hasPlaceholderStyle && (!selections.length || selections[0] === null || isSelectedPlaceholder), onToggle: this.onToggle, onEnter: this.onEnter, onClose: this.onClose, variant: variant, "aria-labelledby": `${ariaLabelledBy || ''} ${selectToggleId}`, "aria-label": toggleAriaLabel, handleTypeaheadKeys: this.handleTypeaheadKeys, isDisabled: isDisabled, hasClearButton: hasOnClear, hasFooter: footer !== undefined, onClickTypeaheadToggleButton: this.onClickTypeaheadToggleButton }),
+                React__namespace.createElement(SelectToggle, Object.assign({ id: selectToggleId, parentRef: this.parentRef, menuRef: this.menuComponentRef }, (footer && { footerRef: this.footerRef }), { isOpen: isOpen, isPlain: isPlain, hasPlaceholderStyle: hasPlaceholderStyle && (!selections.length || selections[0] === null || isSelectedPlaceholder), onToggle: this.onToggle, onEnter: this.onEnter, onClose: this.onClose, variant: variant, "aria-labelledby": `${ariaLabelledBy || ''} ${selectToggleId}`, "aria-label": toggleAriaLabel, handleTypeaheadKeys: this.handleTypeaheadKeys, moveFocusToLastMenuItem: this.moveFocusToLastMenuItem, isDisabled: isDisabled, hasClearButton: hasOnClear, hasFooter: footer !== undefined, onClickTypeaheadToggleButton: this.onClickTypeaheadToggleButton }),
                     customContent && (React__namespace.createElement("div", { className: css(_default$b.selectToggleWrapper) },
                         toggleIcon && React__namespace.createElement("span", { className: css(_default$b.selectToggleIcon) }, toggleIcon),
                         React__namespace.createElement("span", { className: css(_default$b.selectToggleText) }, placeholderText))),
@@ -6142,13 +6329,13 @@
                             toggleIcon && React__namespace.createElement("span", { className: css(_default$b.selectToggleIcon) }, toggleIcon),
                             React__namespace.createElement("input", { className: css(_default$f.formControl, _default$b.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel, placeholder: placeholderText, value: typeaheadInputValue !== null
                                     ? typeaheadInputValue
-                                    : this.getDisplay(selections[0], 'text') || '', type: "text", onClick: this.onClick, onChange: this.onChange, autoComplete: "never", disabled: isDisabled, ref: this.inputRef })),
+                                    : this.getDisplay(selections[0], 'text') || '', type: "text", onClick: this.onClick, onChange: this.onChange, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef })),
                         hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn)),
                     variant === SelectVariant.typeaheadMulti && !customContent && (React__namespace.createElement(React__namespace.Fragment, null,
                         React__namespace.createElement("div", { className: css(_default$b.selectToggleWrapper) },
                             toggleIcon && React__namespace.createElement("span", { className: css(_default$b.selectToggleIcon) }, toggleIcon),
                             selections && Array.isArray(selections) && selections.length > 0 && selectedChips,
-                            React__namespace.createElement("input", { className: css(_default$f.formControl, _default$b.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: "never", disabled: isDisabled, ref: this.inputRef })),
+                            React__namespace.createElement("input", { className: css(_default$f.formControl, _default$b.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef })),
                         hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn)),
                     validated === ValidatedOptions.success && (React__namespace.createElement("span", { className: css(_default$b.selectToggleStatusIcon) },
                         React__namespace.createElement(CheckCircleIcon$1, { "aria-hidden": "true" }))),
@@ -6204,6 +6391,7 @@
         inlineFilterPlaceholderText: null,
         customBadgeText: null,
         inputIdPrefix: '',
+        inputAutoComplete: navigator.userAgent.match('Chrome') ? getUniqueId('pf-no-autocomplete') : 'off',
         menuAppendTo: 'inline',
         favorites: [],
         favoritesLabel: 'Favorites',
@@ -6623,6 +6811,13 @@
     };
     EmptyState.displayName = 'EmptyState';
 
+    const Bullseye = (_a) => {
+        var { children = null, className = '', component = 'div' } = _a, props = __rest$1(_a, ["children", "className", "component"]);
+        const Component = component;
+        return (React__namespace.createElement(Component, Object.assign({ className: css(_default$k.bullseye, className) }, props), children));
+    };
+    Bullseye.displayName = 'Bullseye';
+
     var _default$4 = {
       "button": "pf-c-button",
       "inlineEdit": "pf-c-inline-edit",
@@ -6646,13 +6841,6 @@
       }
     };
 
-    const Bullseye = (_a) => {
-        var { children = null, className = '', component = 'div' } = _a, props = __rest$1(_a, ["children", "className", "component"]);
-        const Component = component;
-        return (React__namespace.createElement(Component, Object.assign({ className: css(_default$k.bullseye, className) }, props), children));
-    };
-    Bullseye.displayName = 'Bullseye';
-
     var _default$3 = {
       "button": "pf-c-button",
       "modifiers": {
@@ -10001,7 +10189,7 @@
                 children: (React__namespace.createElement(ActionsColumn, { items: resolvedActions, dropdownPosition: dropdownPosition, dropdownDirection: dropdownDirection, isDisabled: resolvedIsDisabled, rowData: rowData, extraData: extraData, actionsToggle: actionsToggle }, label))
             }
             : {};
-        return Object.assign({ className: css(_default$3.tableAction), style: { width: 'auto', paddingRight: 0 }, isVisible: true }, renderProps);
+        return Object.assign({ className: css(_default$3.tableAction), style: { paddingRight: 0 }, isVisible: true }, renderProps);
     };
 
     const CollapseColumn = (_a) => {
@@ -10178,7 +10366,7 @@
     };
 
     const TdBase = (_a) => {
-        var { children, className, component = 'td', dataLabel, textCenter = false, modifier, select = null, actions = null, expand = null, treeRow: treeRowProp = null, compoundExpand: compoundExpandProp = null, noPadding, width, visibility, innerRef, favorites = null, draggableRow: draggableRowProp = null } = _a, props = __rest$2(_a, ["children", "className", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow"]);
+        var { children, className, isActionCell = false, component = 'td', dataLabel, textCenter = false, modifier, select = null, actions = null, expand = null, treeRow: treeRowProp = null, compoundExpand: compoundExpandProp = null, noPadding, width, visibility, innerRef, favorites = null, draggableRow: draggableRowProp = null } = _a, props = __rest$2(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow"]);
         const selectParams = select
             ? selectable(children, {
                 rowIndex: select.rowIndex,
@@ -10280,7 +10468,7 @@
         isVisible = null, children: mergedChildren = null, className: mergedClassName = '', component: MergedComponent = component } = merged, mergedProps = __rest$2(merged, ["isVisible", "children", "className", "component"]);
         const treeTableTitleCell = (className && className.includes('pf-c-table__tree-view-title-cell')) ||
             (mergedClassName && mergedClassName.includes('pf-c-table__tree-view-title-cell'));
-        return (React__namespace.createElement(MergedComponent, Object.assign({}, (!treeTableTitleCell && { 'data-label': dataLabel }), { className: css(className, textCenter && _default$3.modifiers.center, noPadding && _default$3.modifiers.noPadding, _default$3.modifiers[modifier], draggableParams && _default$3.tableDraggable, mergedClassName), ref: innerRef }, mergedProps, props), mergedChildren || children));
+        return (React__namespace.createElement(MergedComponent, Object.assign({}, (!treeTableTitleCell && { 'data-label': dataLabel }), { className: css(className, isActionCell && _default$3.tableAction, textCenter && _default$3.modifiers.center, noPadding && _default$3.modifiers.noPadding, _default$3.modifiers[modifier], draggableParams && _default$3.tableDraggable, mergedClassName), ref: innerRef }, mergedProps, props), mergedChildren || children));
     };
     const Td = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TdBase, Object.assign({}, props, { innerRef: ref }))));
     Td.displayName = 'Td';