@rh-support/components 2.0.4 → 2.0.7-beta.1

package/lib/cjs/DropDownList/DropDownList.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,42 +18,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 require("./dropdownList.css");
-var check_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/check-icon"));
-var isEmpty_1 = __importDefault(require("lodash/isEmpty"));
-var map_1 = __importDefault(require("lodash/map"));
-var react_1 = __importStar(require("react"));
-var react_i18next_1 = require("react-i18next");
-var dropdownUtils_1 = require("./dropdownUtils");
-var SearchableList_1 = __importDefault(require("./SearchableList"));
-var SelectList_1 = __importDefault(require("./SelectList"));
-var defaultProps = {
+const check_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/check-icon"));
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
+const map_1 = __importDefault(require("lodash/map"));
+const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const dropdownUtils_1 = require("./dropdownUtils");
+const SearchableList_1 = __importDefault(require("./SearchableList"));
+const SelectList_1 = __importDefault(require("./SelectList"));
+const defaultProps = {
     className: '',
     id: '',
     searchable: false,
@@ -86,27 +54,26 @@ var defaultProps = {
 };
 function Dropdown(props) {
     var _a, _b, _c;
-    var _d = __read(react_1.useState(props.maxResults), 2), resultsShown = _d[0], setResultsShown = _d[1];
-    var _e = __read(react_1.useState(props.list), 2), itemsList = _e[0], setItemsList = _e[1];
-    var onChangeLocal = function (_a) {
-        var selectedItem = _a.selectedItem;
+    const [resultsShown, setResultsShown] = react_1.useState(props.maxResults);
+    const [itemsList, setItemsList] = react_1.useState(props.list);
+    const onChangeLocal = ({ selectedItem, }) => {
         selectedItem && props.onChange && props.onChange(selectedItem);
     };
-    react_1.useEffect(function () {
+    react_1.useEffect(() => {
         setItemsList(props.list);
     }, [props.list]);
-    var onPaginatonButtonClick = function (e, downshift) {
+    const onPaginatonButtonClick = (e, downshift) => {
         e.stopPropagation();
-        var finalCount = resultsShown + props.maxResults;
+        const finalCount = resultsShown + props.maxResults;
         setResultsShown(finalCount);
         props.onPaginate && props.onPaginate(finalCount, downshift.inputValue, e);
     };
-    var isSelectedItemLocal = function (item) {
+    const isSelectedItemLocal = (item) => {
         return !item.isNotSelectable && dropdownUtils_1.itemToString(props.selectedItem) === dropdownUtils_1.itemToString(item);
     };
-    var isSelectedItem = props.isSelectedItem || isSelectedItemLocal;
-    var getListItemClassNames = function (downshift, item, itemIndex) {
-        var toReturn = 'downshift-item pf-c-select__menu-item';
+    const isSelectedItem = props.isSelectedItem || isSelectedItemLocal;
+    const getListItemClassNames = (downshift, item, itemIndex) => {
+        let toReturn = 'downshift-item pf-c-select__menu-item';
         toReturn += item.additionalInfo ? ' pf-m-description' : '';
         toReturn += isSelectedItem(item) ? ' pf-m-selected' : '';
         toReturn += item.disabled ? ' pf-m-disabled' : '';
@@ -114,58 +81,61 @@ function Dropdown(props) {
         toReturn += item.className ? item.className : '';
         return toReturn;
     };
-    var onInputChangeLocal = function (items, inputValue) {
+    const onInputChangeLocal = (items, inputValue) => {
         setResultsShown(props.maxResults);
         setItemsList(items);
         props.onInputChange && props.onInputChange(inputValue);
     };
-    var renderListItems = function (downshift) {
-        var listToRender = [];
+    const renderListItems = (downshift) => {
+        const listToRender = [];
         if (!downshift.isOpen)
             return [];
-        var optionsToRender = itemsList;
-        var shouldPaginate = props.paginate && resultsShown < optionsToRender.length;
+        let optionsToRender = itemsList;
+        const shouldPaginate = props.paginate && resultsShown < optionsToRender.length;
         optionsToRender = props.paginate ? optionsToRender.slice(0, resultsShown) : optionsToRender;
-        optionsToRender.filter(function (item) { return !item.isNotSearchable; }).length === 0 &&
+        optionsToRender.filter((item) => !item.isNotSearchable).length === 0 &&
             props.emptyListLabel &&
             listToRender.push(react_1.default.createElement("li", { key: "empty-label", className: "pf-u-p-sm" },
                 react_1.default.createElement(react_i18next_1.Trans, null, props.emptyListLabel)));
-        listToRender.push.apply(listToRender, __spreadArray([], __read(map_1.default(optionsToRender, function (item, index) {
-            var itemProps = item.isNonActionable
+        listToRender.push(...map_1.default(optionsToRender, (item, index) => {
+            const itemProps = item.isNonActionable
                 ? {}
                 : downshift.getItemProps({
-                    item: item,
-                    index: index,
+                    item,
+                    index,
                     disabled: item.disabled,
                     className: getListItemClassNames(downshift, item, index),
                 });
-            return (react_1.default.createElement("li", { className: item.actionItem ? 'pf-c-select__menu-wrapper' : '', role: "presentation", key: index + "-" + props.id + "-" + dropdownUtils_1.itemToString(item) },
+            return (react_1.default.createElement("li", { className: item.actionItem ? 'pf-c-select__menu-wrapper' : '', role: "presentation", key: `${index}-${props.id}-${dropdownUtils_1.itemToString(item)}` },
                 item.isNonActionable ? (isEmpty_1.default(item.children) ? dropdownUtils_1.itemToString(item) : item.children) : null,
-                props.multiSelect && !item.isNotSelectable && !item.isNonActionable && (react_1.default.createElement("div", __assign({}, itemProps),
+                props.multiSelect && !item.isNotSelectable && !item.isNonActionable && (react_1.default.createElement("div", Object.assign({}, itemProps),
                     react_1.default.createElement("div", { className: item.additionalInfo ? 'pf-c-select__menu-item-main' : '' },
                         react_1.default.createElement("input", { disabled: item.disabled === true, className: "pf-c-check__input pf-u-mr-sm", checked: isSelectedItem(item), onChange: dropdownUtils_1.noop, type: "checkbox" }),
                         isEmpty_1.default(item.children) ? dropdownUtils_1.itemToString(item) : item.children),
                     item.additionalInfo && (react_1.default.createElement("div", { className: "pf-c-select__menu-item-description" }, item.additionalInfo)))),
-                !props.multiSelect && !item.isNonActionable && (react_1.default.createElement("button", __assign({}, itemProps, { type: "button", title: dropdownUtils_1.itemToString(item) }),
+                !props.multiSelect && !item.isNonActionable && (react_1.default.createElement("button", Object.assign({}, itemProps, { type: "button", title: dropdownUtils_1.itemToString(item) }),
                     react_1.default.createElement("div", { className: item.additionalInfo ? 'pf-c-select__menu-item-main' : '' },
                         isEmpty_1.default(item.children) ? dropdownUtils_1.itemToString(item) : item.children,
                         isSelectedItem(item) && (react_1.default.createElement("span", { className: "pf-c-select__menu-item-icon" },
                             react_1.default.createElement(check_icon_1.default, { "aria-hidden": true })))),
                     item.additionalInfo && (react_1.default.createElement("div", { className: "pf-c-select__menu-item-description" }, item.additionalInfo)))),
                 item.actionItem ? react_1.default.cloneElement(item.actionItem, { disabled: item.disabled }) : null));
-        }))));
-        shouldPaginate && listToRender.push.apply(listToRender, [
-            react_1.default.createElement("li", { key: "separator", className: "dropdown-divider", role: "separator" }),
-            react_1.default.createElement("li", { key: "pagination-item", className: "downshift-pagination-item" },
-                react_1.default.createElement("button", { type: "button", onClick: function (e) { return onPaginatonButtonClick(e, downshift); }, className: "pf-c-button pf-m-link pf-m-block", disabled: props.isLoadingList },
-                    react_1.default.createElement(react_i18next_1.Trans, null, props.paginationBtnText))),
-        ]);
+        }));
+        shouldPaginate &&
+            listToRender.push(...[
+                react_1.default.createElement("li", { key: "separator", className: "dropdown-divider", role: "separator" }),
+                react_1.default.createElement("li", { key: "pagination-item", className: "downshift-pagination-item" },
+                    react_1.default.createElement("button", { type: "button", onClick: (e) => onPaginatonButtonClick(e, downshift), className: "pf-c-button pf-m-link pf-m-block", disabled: props.isLoadingList },
+                        react_1.default.createElement(react_i18next_1.Trans, null, props.paginationBtnText))),
+            ]);
         return listToRender;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    var selectedItem = react_1.useMemo(function () { return props.selectedItem; }, [(_c = (_b = (_a = props.selectedItem) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : props.selectedItem) !== null && _c !== void 0 ? _c : '']);
-    var newProps = __assign(__assign({}, props), { selectedItem: selectedItem, onChange: onChangeLocal, itemToString: dropdownUtils_1.itemToString, renderListItems: renderListItems, itemsList: itemsList });
-    return props.searchable ? (react_1.default.createElement(SearchableList_1.default, __assign({}, newProps, { onInputChange: onInputChangeLocal }))) : (react_1.default.createElement(SelectList_1.default, __assign({}, newProps)));
+    const selectedItem = react_1.useMemo(() => props.selectedItem, [(_c = (_b = (_a = props.selectedItem) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : props.selectedItem) !== null && _c !== void 0 ? _c : '']);
+    const newProps = Object.assign(Object.assign({}, props), { selectedItem, onChange: onChangeLocal, itemToString: dropdownUtils_1.itemToString,
+        renderListItems,
+        itemsList });
+    return props.searchable ? (react_1.default.createElement(SearchableList_1.default, Object.assign({}, newProps, { onInputChange: onInputChangeLocal }))) : (react_1.default.createElement(SelectList_1.default, Object.assign({}, newProps)));
 }
 exports.Dropdown = Dropdown;
 Dropdown.defaultProps = defaultProps;

package/lib/cjs/DropDownList/DropdownWrapper.js

@@ -1,23 +1,12 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var utils_1 = require("@rh-support/utils");
-var react_1 = __importDefault(require("react"));
+const utils_1 = require("@rh-support/utils");
+const react_1 = __importDefault(require("react"));
 function DropdownWrapper(props) {
-    var onBlur = function (event) {
+    const onBlur = (event) => {
         // on ios devices the onBlur event is called before the onClick event, so selecting an item in droponw
         // closes the dropdown without selecting the item
         // this is just a hack to prevent the downshift onBlur method from being called which closes the dropdown
@@ -25,12 +14,12 @@ function DropdownWrapper(props) {
             event.nativeEvent.preventDownshiftDefault = true;
         }
     };
-    return (react_1.default.createElement("div", { id: "" + props.id, className: "downshift " + props.className + " pf-c-select " + (props.isOpen ? 'pf-m-expanded' : '') + " ", "data-tracking-id": props['data-tracking-id'] ? props['data-tracking-id'] : null },
-        props.label && react_1.default.createElement("label", __assign({}, props.getLabelProps()), props.label),
+    return (react_1.default.createElement("div", { id: `${props.id}`, className: `downshift ${props.className} pf-c-select ${props.isOpen ? 'pf-m-expanded' : ''} `, "data-tracking-id": props['data-tracking-id'] ? props['data-tracking-id'] : null },
+        props.label && react_1.default.createElement("label", Object.assign({}, props.getLabelProps()), props.label),
         props.toggleMenuComponent,
-        react_1.default.createElement("ul", __assign({}, props.getMenuProps({
+        react_1.default.createElement("ul", Object.assign({}, props.getMenuProps({
             onBlur: onBlur,
-            className: "downshift-menu pf-c-select__menu " + (props.hasTwoColumns ? 'column-selector-menu' : '') + " " + (props.isOpen ? 'open' : ''),
+            className: `downshift-menu pf-c-select__menu ${props.hasTwoColumns ? 'column-selector-menu' : ''} ${props.isOpen ? 'open' : ''}`,
         })), props.children)));
 }
 exports.default = DropdownWrapper;

package/lib/cjs/DropDownList/MultiSelectDropdownList.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiSelectDropDownList = void 0;
-var DropDownList_1 = require("./DropDownList");
-var withMulti_1 = require("./withMulti");
-var MultiSelectDropDownList = withMulti_1.withMulti(DropDownList_1.Dropdown);
+const DropDownList_1 = require("./DropDownList");
+const withMulti_1 = require("./withMulti");
+const MultiSelectDropDownList = withMulti_1.withMulti(DropDownList_1.Dropdown);
 exports.MultiSelectDropDownList = MultiSelectDropDownList;

package/lib/cjs/DropDownList/SearchableList.d.ts

@@ -7,6 +7,7 @@ interface IProps<T> extends Omit<IDropdownListProps<T>, 'onChange' | 'onInputCha
     onChange: (changes: UseComboboxStateChange<IOption<T>>) => void;
     itemsList: IOption<T>[];
     onInputChange?: (items: IOption<T>[], inputValue: string) => void;
+    isPDFExporting?: boolean;
 }
 export default function SearchableList<T>(props: IProps<T>): JSX.Element;
 export {};

package/lib/cjs/DropDownList/SearchableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchableList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/SearchableList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAEH,sBAAsB,EAEtB,sBAAsB,EAEzB,MAAM,WAAW,CAAC;AAGnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,MAAM,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC;IACjF,eAAe,EAAE,CAAC,SAAS,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;IACtF,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,eAwIzD"}
+{"version":3,"file":"SearchableList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/SearchableList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAEH,sBAAsB,EAEtB,sBAAsB,EAEzB,MAAM,WAAW,CAAC;AAGnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,UAAU,MAAM,CAAC,CAAC,CAAE,SAAQ,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC;IACjF,eAAe,EAAE,CAAC,SAAS,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;IACtF,QAAQ,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,eA+IzD"}

package/lib/cjs/DropDownList/SearchableList.js

@@ -1,65 +1,53 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var caret_down_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/caret-down-icon"));
-var times_circle_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/times-circle-icon"));
-var downshift_1 = require("downshift");
-var includes_1 = __importDefault(require("lodash/includes"));
-var isEmpty_1 = __importDefault(require("lodash/isEmpty"));
-var react_1 = __importDefault(require("react"));
-var LoadingIndicator_1 = require("../LoadingIndicator/LoadingIndicator");
-var dropdownUtils_1 = require("./dropdownUtils");
-var DropdownWrapper_1 = __importDefault(require("./DropdownWrapper"));
+const caret_down_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/caret-down-icon"));
+const times_circle_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/times-circle-icon"));
+const downshift_1 = require("downshift");
+const includes_1 = __importDefault(require("lodash/includes"));
+const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
+const react_1 = __importDefault(require("react"));
+const LoadingIndicator_1 = require("../LoadingIndicator/LoadingIndicator");
+const dropdownUtils_1 = require("./dropdownUtils");
+const DropdownWrapper_1 = __importDefault(require("./DropdownWrapper"));
 function SearchableList(props) {
-    var doesMatchInput = function (inputVal) {
-        return function (item) {
-            // Should always keep non-searchable, or item with no labels
-            if (item.isNotSearchable || item.label === null || item.label === undefined)
-                return true;
-            var inputValueLC = inputVal ? inputVal.trim().toLowerCase() : '';
-            var labelLC = dropdownUtils_1.itemToString(item).trim().toLowerCase();
-            return includes_1.default(labelLC, inputValueLC);
-        };
+    const doesMatchInput = (inputVal) => (item) => {
+        // Should always keep non-searchable, or item with no labels
+        if (item.isNotSearchable || item.label === null || item.label === undefined)
+            return true;
+        const inputValueLC = inputVal ? inputVal.trim().toLowerCase() : '';
+        const labelLC = dropdownUtils_1.itemToString(item).trim().toLowerCase();
+        return includes_1.default(labelLC, inputValueLC);
     };
-    var onIsOpenChange = function (changes) {
+    const onIsOpenChange = (changes) => {
         if (!changes.isOpen && changes.type !== downshift_1.useCombobox.stateChangeTypes.ItemClick) {
             props.onOuterClick && props.onOuterClick(props.selectedItem);
         }
     };
-    var comboboxStateReducer = function (state, actionAndChanges) {
-        var changes = actionAndChanges.changes, type = actionAndChanges.type;
+    const comboboxStateReducer = (state, actionAndChanges) => {
+        const { changes, type } = actionAndChanges;
         switch (type) {
             case downshift_1.useCombobox.stateChangeTypes.InputBlur:
-                return __assign(__assign({}, changes), { inputValue: dropdownUtils_1.itemToString(props.selectedItem) && downshift.inputValue !== dropdownUtils_1.itemToString(props.selectedItem)
+                return Object.assign(Object.assign({}, changes), { inputValue: dropdownUtils_1.itemToString(props.selectedItem) && downshift.inputValue !== dropdownUtils_1.itemToString(props.selectedItem)
                         ? dropdownUtils_1.itemToString(props.selectedItem)
                         : state.inputValue });
+            case downshift_1.useCombobox.stateChangeTypes.InputKeyDownEnter:
+                return Object.assign(Object.assign({}, changes), { inputValue: state.inputValue });
             default:
                 return changes;
         }
     };
-    var downshift = downshift_1.useCombobox({
+    const downshift = downshift_1.useCombobox({
         selectedItem: props.selectedItem,
         items: props.itemsList,
         onSelectedItemChange: props.onChange,
-        labelId: props.id + "-label",
+        labelId: `${props.id}-label`,
         itemToString: dropdownUtils_1.itemToString,
-        onIsOpenChange: onIsOpenChange,
-        onInputValueChange: function (_a) {
-            var inputValue = _a.inputValue, isOpen = _a.isOpen;
-            var newList = props.searchable && (props.filterListOnMenuOpen || isOpen) && !props.isAsyncSearch
+        onIsOpenChange,
+        onInputValueChange: ({ inputValue, isOpen }) => {
+            const newList = props.searchable && (props.filterListOnMenuOpen || isOpen) && !props.isAsyncSearch
                 ? props.list.filter(doesMatchInput(inputValue))
                 : props.list;
             // for async search we want to make sure that we don't call input change unless the user changes
@@ -68,30 +56,30 @@ function SearchableList(props) {
         },
         stateReducer: props.multiSelect ? dropdownUtils_1.multiSelectDropdownStateReducer : comboboxStateReducer,
     });
-    var getInputProps = downshift.getInputProps, getToggleButtonProps = downshift.getToggleButtonProps, getMenuProps = downshift.getMenuProps, getLabelProps = downshift.getLabelProps, openMenu = downshift.openMenu, isOpen = downshift.isOpen;
-    var clearSelection = function () { return function (event) {
+    const { getInputProps, getToggleButtonProps, getMenuProps, getLabelProps, openMenu, isOpen } = downshift;
+    const clearSelection = () => (event) => {
         props.onClearSelection && props.onClearSelection();
         // in case of multi select we force input to get cleared on clear button click
         downshift.selectItem(null);
         !isOpen && openMenu();
-    }; };
-    var onInputClick = function () { return function (e) {
+    };
+    const onInputClick = () => (e) => {
         if (!isOpen) {
             openMenu();
             props.onMenuToggle && props.onMenuToggle();
         }
-    }; };
-    var onInputBlur = function () { return function (e) {
+    };
+    const onInputBlur = () => (e) => {
         props.onInputBlur && props.onInputBlur(e);
-    }; };
-    var renderSearchableToggleButton = function () {
-        return (react_1.default.createElement("div", __assign({}, downshift.getComboboxProps({ className: 'pf-c-select__toggle pf-m-typeahead' })),
+    };
+    const renderSearchableToggleButton = () => {
+        return (react_1.default.createElement("div", Object.assign({}, downshift.getComboboxProps({ className: 'pf-c-select__toggle pf-m-typeahead' })),
             react_1.default.createElement("div", { className: "pf-c-select__toggle-wrapper" },
                 props.chipGroupComponent,
-                react_1.default.createElement("input", __assign({}, getInputProps({
+                react_1.default.createElement("input", Object.assign({}, getInputProps({
                     placeholder: props.placeholder,
-                    className: "pf-c-form-control pf-c-select__toggle-typeahead",
-                    id: props.id + "-downshift-search",
+                    className: `pf-c-form-control pf-c-select__toggle-typeahead`,
+                    id: `${props.id}-downshift-search`,
                     'aria-invalid': props.isInValid,
                     'aria-required': props.required,
                     required: props.required,
@@ -100,12 +88,14 @@ function SearchableList(props) {
                     onBlur: onInputBlur(),
                 })))),
             react_1.default.createElement(LoadingIndicator_1.LoadingIndicator, { isInline: true, show: props.isLoadingList }),
-            !isEmpty_1.default(downshift.inputValue) && !props.isLoadingList && (react_1.default.createElement("button", { className: "pf-c-button pf-m-plain pf-c-select__toggle-clear", onClick: clearSelection(), "aria-label": "clear selection", type: "button", title: "Clear selection", disabled: props.disabled, "data-tracking-id": props['data-tracking-id'] + "-clear" },
-                react_1.default.createElement(times_circle_icon_1.default, null))),
-            !props.hideToggleButton && (react_1.default.createElement("button", __assign({ type: "button" }, getToggleButtonProps({
+            !isEmpty_1.default(downshift.inputValue) &&
+                !props.isLoadingList &&
+                (!props.isExportingPDF ? (react_1.default.createElement("button", { className: "pf-c-button pf-m-plain pf-c-select__toggle-clear", onClick: clearSelection(), "aria-label": "clear selection", type: "button", title: "Clear selection", disabled: props.disabled, "data-tracking-id": `${props['data-tracking-id']}-clear` },
+                    react_1.default.createElement(times_circle_icon_1.default, null))) : null),
+            !props.hideToggleButton && (react_1.default.createElement("button", Object.assign({ type: "button" }, getToggleButtonProps({
                 disabled: props.disabled || props.isLoadingList,
                 className: 'pf-c-button pf-c-select__toggle-button pf-m-plain',
-                onClick: props.onMenuToggle ? function () { return props.onMenuToggle(); } : dropdownUtils_1.noop,
+                onClick: props.onMenuToggle ? () => props.onMenuToggle() : dropdownUtils_1.noop,
             })),
                 react_1.default.createElement(caret_down_icon_1.default, null)))));
     };

package/lib/cjs/DropDownList/SelectList.js

@@ -1,45 +1,34 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var caret_down_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/caret-down-icon"));
-var downshift_1 = require("downshift");
-var react_1 = __importDefault(require("react"));
-var LoadingIndicator_1 = require("../LoadingIndicator/LoadingIndicator");
-var dropdownUtils_1 = require("./dropdownUtils");
-var DropdownWrapper_1 = __importDefault(require("./DropdownWrapper"));
+const caret_down_icon_1 = __importDefault(require("@patternfly/react-icons/dist/js/icons/caret-down-icon"));
+const downshift_1 = require("downshift");
+const react_1 = __importDefault(require("react"));
+const LoadingIndicator_1 = require("../LoadingIndicator/LoadingIndicator");
+const dropdownUtils_1 = require("./dropdownUtils");
+const DropdownWrapper_1 = __importDefault(require("./DropdownWrapper"));
 function SelectList(props) {
-    var onIsOpenChange = function (changes) {
+    const onIsOpenChange = (changes) => {
         if (!changes.isOpen && changes.type !== downshift_1.useSelect.stateChangeTypes.ItemClick) {
             props.onOuterClick && props.onOuterClick(props.selectedItem);
         }
     };
-    var downshift = downshift_1.useSelect(__assign({ selectedItem: props.selectedItem, items: props.list, onIsOpenChange: onIsOpenChange, onSelectedItemChange: props.onChange, labelId: props.id + "-label", itemToString: dropdownUtils_1.itemToString }, (props.multiSelect && { stateReducer: dropdownUtils_1.multiSelectDropdownStateReducer })));
-    var getToggleButtonProps = downshift.getToggleButtonProps, getLabelProps = downshift.getLabelProps, getMenuProps = downshift.getMenuProps, isOpen = downshift.isOpen;
-    var renderToggleButton = function () {
+    const downshift = downshift_1.useSelect(Object.assign({ selectedItem: props.selectedItem, items: props.list, onIsOpenChange, onSelectedItemChange: props.onChange, labelId: `${props.id}-label`, itemToString: dropdownUtils_1.itemToString }, (props.multiSelect && { stateReducer: dropdownUtils_1.multiSelectDropdownStateReducer })));
+    const { getToggleButtonProps, getLabelProps, getMenuProps, isOpen } = downshift;
+    const renderToggleButton = () => {
         var _a;
-        return (react_1.default.createElement("button", __assign({ type: "button" }, getToggleButtonProps({
-            id: props.id + "-toggle",
-            className: "pf-c-select__toggle " + (props.isInValid ? 'form-invalid' : ''),
+        return (react_1.default.createElement("button", Object.assign({ type: "button" }, getToggleButtonProps({
+            id: `${props.id}-toggle`,
+            className: `pf-c-select__toggle ${props.isInValid ? 'form-invalid' : ''}`,
             disabled: props.disabled || props.isLoadingList,
-            'aria-label': "" + (isOpen ? 'Close ' + props.title : 'Open ' + props.title),
+            'aria-label': `${isOpen ? 'Close ' + props.title : 'Open ' + props.title}`,
             'aria-invalid': props.isInValid,
             name: props.name,
             title: dropdownUtils_1.itemToString(props.selectedItem) || props.placeholder,
             'data-tracking-id': (_a = props['data-tracking-id']) !== null && _a !== void 0 ? _a : '',
-            onClick: props.onMenuToggle ? function () { return props.onMenuToggle(); } : dropdownUtils_1.noop,
+            onClick: props.onMenuToggle ? () => props.onMenuToggle() : dropdownUtils_1.noop,
         })),
             react_1.default.createElement("div", { className: "pf-c-select__toggle-wrapper" },
                 react_1.default.createElement("span", { className: "pf-c-select__toggle-text" }, dropdownUtils_1.itemToString(props.selectedItem) || (react_1.default.createElement("span", { className: "pf-c-select__placeholder-text" }, props.placeholder)))),

package/lib/cjs/DropDownList/async.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -45,13 +34,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withAsync = exports.useAsync = void 0;
-var debounce_1 = __importDefault(require("lodash/debounce"));
-var react_1 = __importStar(require("react"));
-var hooks_1 = require("../hooks");
-var usePrevious_1 = require("../hooks/usePrevious");
+const debounce_1 = __importDefault(require("lodash/debounce"));
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../hooks");
+const usePrevious_1 = require("../hooks/usePrevious");
 // Most of the code credit goes to
 // https://github.com/ericgio/react-bootstrap-typeahead/blob/master/src/behaviors/async.js
-var defaultProps = {
+const defaultProps = {
     delay: 200,
     minLength: 2,
     promptText: '',
@@ -59,13 +48,13 @@ var defaultProps = {
     useCache: false,
 };
 function useAsync(props) {
-    var delay = props.delay, isLoadingList = props.isLoadingList, minLength = props.minLength, onInputChange = props.onInputChange, onSearch = props.onSearch, useCache = props.useCache, list = props.list, onInputBlur = props.onInputBlur, emptyListLabel = props.emptyListLabel, onClearSelection = props.onClearSelection, suggestedItems = props.suggestedItems, otherProps = __rest(props, ["delay", "isLoadingList", "minLength", "onInputChange", "onSearch", "useCache", "list", "onInputBlur", "emptyListLabel", "onClearSelection", "suggestedItems"]);
-    var _a = hooks_1.useLRUCache(25), getFromCache = _a.getFromCache, setInCache = _a.setInCache, clearCache = _a.clearCache;
-    var handleSearchDebouncedRef = react_1.useRef();
-    var queryRef = react_1.useRef('');
-    var forceUpdate = hooks_1.useForceUpdate();
-    var prevProps = usePrevious_1.usePrevious(props);
-    var handleSearch = react_1.useCallback(function (query) {
+    const { delay, isLoadingList, minLength, onInputChange, onSearch, useCache, list, onInputBlur, emptyListLabel, onClearSelection, suggestedItems } = props, otherProps = __rest(props, ["delay", "isLoadingList", "minLength", "onInputChange", "onSearch", "useCache", "list", "onInputBlur", "emptyListLabel", "onClearSelection", "suggestedItems"]);
+    const { getFromCache, setInCache, clearCache } = hooks_1.useLRUCache(25);
+    const handleSearchDebouncedRef = react_1.useRef();
+    const queryRef = react_1.useRef('');
+    const forceUpdate = hooks_1.useForceUpdate();
+    const prevProps = usePrevious_1.usePrevious(props);
+    const handleSearch = react_1.useCallback((query) => {
         queryRef.current = query;
         if (!query || (minLength && query.length < minLength)) {
             return;
@@ -82,33 +71,33 @@ function useAsync(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [forceUpdate, minLength, onSearch, useCache]);
     // Set the debounced search function.
-    react_1.useEffect(function () {
+    react_1.useEffect(() => {
         handleSearchDebouncedRef.current = debounce_1.default(handleSearch, delay);
-        return function () {
+        return () => {
             handleSearchDebouncedRef.current && handleSearchDebouncedRef.current.cancel();
         };
     }, [delay, handleSearch]);
-    react_1.useEffect(function () {
+    react_1.useEffect(() => {
         // Ensure that we've gone from a loading to a completed state. Otherwise
         // an empty response could get cached if the component updates during the
         // request (eg: if the parent re-renders for some reason).
         // NOTE: There is a limitation that empty responses will not be cached.
-        var listToCache = list.filter(function (item) { return !item.isNotSearchable; });
+        const listToCache = list.filter((item) => !item.isNotSearchable);
         if (!isLoadingList && useCache && queryRef.current && (listToCache || []).length > 0) {
             setInCache(queryRef.current, list);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [list, isLoadingList, useCache]);
-    react_1.useEffect(function () {
+    react_1.useEffect(() => {
         if (prevProps && prevProps.useCache && !useCache) {
             clearCache();
         }
-        return function () {
+        return () => {
             clearCache();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [useCache]);
-    var getEmptyLabel = function () {
+    const getEmptyLabel = () => {
         if (!queryRef.current.length) {
             return props.promptText;
         }
@@ -117,19 +106,20 @@ function useAsync(props) {
         }
         return emptyListLabel;
     };
-    var handleInputBlur = function (e) {
+    const handleInputBlur = (e) => {
         onInputBlur && onInputBlur(e);
     };
-    var handleClearSelection = function () {
+    const handleClearSelection = () => {
         onClearSelection && onClearSelection();
         queryRef.current = '';
     };
-    var handleInputChange = react_1.useCallback(function (query) {
+    const handleInputChange = react_1.useCallback((query) => {
         onInputChange && onInputChange(query);
         handleSearchDebouncedRef.current && handleSearchDebouncedRef.current(query);
     }, [onInputChange]);
-    var cachedQuery = getFromCache(queryRef.current);
-    return __assign(__assign({}, otherProps), { isLoadingList: isLoadingList, minLength: minLength, onInputChange: handleInputChange, emptyListLabel: getEmptyLabel(), list: useCache && cachedQuery
+    const cachedQuery = getFromCache(queryRef.current);
+    return Object.assign(Object.assign({}, otherProps), { isLoadingList,
+        minLength, onInputChange: handleInputChange, emptyListLabel: getEmptyLabel(), list: useCache && cachedQuery
             ? cachedQuery
             : !queryRef.current
                 ? (suggestedItems || []).length > 0
@@ -139,9 +129,9 @@ function useAsync(props) {
 }
 exports.useAsync = useAsync;
 function withAsync(WrappedComponent) {
-    var AsyncDropdown = function (props) { return (react_1.default.createElement(WrappedComponent, __assign({}, useAsync(props)))); };
-    var displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
-    AsyncDropdown.displayName = "withAsync" + displayName;
+    const AsyncDropdown = (props) => (react_1.default.createElement(WrappedComponent, Object.assign({}, useAsync(props))));
+    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    AsyncDropdown.displayName = `withAsync${displayName}`;
     AsyncDropdown.defaultProps = defaultProps;
     return AsyncDropdown;
 }