@rh-support/components 2.4.10-beta.6 → 2.5.0

package/lib/cjs/CustomTextInput/CustomTextInput.d.ts

@@ -1,12 +0,0 @@
-import { TextInputProps } from '@patternfly/react-core';
-interface IProps extends TextInputProps {
-    className?: string;
-    maxLength?: number;
-    value?: string;
-    isSpaceAllowed?: boolean;
-    name?: string;
-    isDisabled?: boolean;
-}
-export declare const CustomTextInput: (props: IProps) => JSX.Element;
-export {};
-//# sourceMappingURL=CustomTextInput.d.ts.map

package/lib/cjs/CustomTextInput/CustomTextInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomTextInput.d.ts","sourceRoot":"","sources":["../../../src/CustomTextInput/CustomTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAoB,MAAM,wBAAwB,CAAC;AAIrF,UAAU,MAAO,SAAQ,cAAc;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,UAAW,MAAM,gBAqD5C,CAAC"}

package/lib/cjs/CustomTextInput/CustomTextInput.js

@@ -1,48 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomTextInput = void 0;
-const react_core_1 = require("@patternfly/react-core");
-const isEmpty_1 = __importDefault(require("lodash/isEmpty"));
-const react_1 = __importDefault(require("react"));
-const CustomTextInput = (props) => {
-    // To set defaultProps
-    const { onChange, isSpaceAllowed = false, isRequired, className, type, maxLength, value, isDisabled, placeholder, validated, name } = props, rest = __rest(props, ["onChange", "isSpaceAllowed", "isRequired", "className", "type", "maxLength", "value", "isDisabled", "placeholder", "validated", "name"]);
-    // To handle on input change
-    const onTextInputChange = (value, event) => {
-        onChange(value, event);
-        event.preventDefault();
-        return [];
-    };
-    // Function to check for validity
-    const validatedCheck = () => {
-        if (!isEmpty_1.default(value)) {
-            if (validated === 'error') {
-                return 'error';
-            }
-            else if (isSpaceAllowed) {
-                return validated;
-            }
-            else if (!isSpaceAllowed) {
-                return isEmpty_1.default(value === null || value === void 0 ? void 0 : value.trim()) ? 'error' : 'default';
-            }
-            else
-                return validated;
-        }
-    };
-    return (react_1.default.createElement(react_core_1.TextInput, Object.assign({}, rest, { isRequired: isRequired, className: className, type: type, maxLength: maxLength, value: value, isDisabled: isDisabled, "aria-label": props['aria-label'], placeholder: placeholder, onChange: onTextInputChange, validated: validatedCheck(), name: name })));
-};
-exports.CustomTextInput = CustomTextInput;

package/lib/cjs/CustomTextInput/index.d.ts

@@ -1,2 +0,0 @@
-export * from './CustomTextInput';
-//# sourceMappingURL=index.d.ts.map

package/lib/cjs/CustomTextInput/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CustomTextInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/lib/cjs/CustomTextInput/index.js

@@ -1,13 +0,0 @@
-"use strict";
-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]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./CustomTextInput"), exports);

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

@@ -1,6 +0,0 @@
-import { MultiSelectDropdownProps } from './MultiSelectDropdownList';
-import { AsyncDropdownProps, IAsyncOnlyProps, IDropdownListProps } from './types';
-declare const AsyncDropDownList: <T extends {}>(props: IAsyncOnlyProps<T> & IDropdownListProps<T>) => JSX.Element;
-declare const AsyncMultiDropDownList: <T extends {}>(props: IAsyncOnlyProps<T> & import("./types").IDropdownListBasePropsForMultiSelect<T> & import("./types").IMultiSelectOnlyProps<T>) => JSX.Element;
-export { AsyncDropDownList, AsyncMultiDropDownList, AsyncDropdownProps };
-//# sourceMappingURL=AsyncDropDownList.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"AsyncDropDownList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/AsyncDropDownList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,wBAAwB,EAAE,MAAM,2BAA2B,CAAC;AAC9F,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElF,QAAA,MAAM,iBAAiB,uEAElB,WAAW,CAAC;AAEjB,QAAA,MAAM,sBAAsB,wJAEvB,WAAW,CAAC;AAEjB,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,CAAC"}

package/lib/cjs/DropDownList/AsyncDropDownList.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AsyncMultiDropDownList = exports.AsyncDropDownList = void 0;
-const async_1 = require("./async");
-const DropDownList_1 = require("./DropDownList");
-const MultiSelectDropdownList_1 = require("./MultiSelectDropdownList");
-const AsyncDropDownList = async_1.withAsync(DropDownList_1.Dropdown);
-exports.AsyncDropDownList = AsyncDropDownList;
-const AsyncMultiDropDownList = async_1.withAsync(MultiSelectDropdownList_1.MultiSelectDropDownList);
-exports.AsyncMultiDropDownList = AsyncMultiDropDownList;

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

@@ -1,8 +0,0 @@
-import './dropdownList.css';
-import { IDropdownListProps } from './types';
-declare function Dropdown<T>(props: IDropdownListProps<T>): JSX.Element;
-declare namespace Dropdown {
-    var defaultProps: Partial<IDropdownListProps<any>>;
-}
-export { Dropdown };
-//# sourceMappingURL=DropDownList.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DropDownList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/DropDownList.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAa5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAuB7C,iBAAS,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,eAoJhD;kBApJQ,QAAQ;;;AAsJjB,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/lib/cjs/DropDownList/DropDownList.js

@@ -1,141 +0,0 @@
-"use strict";
-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]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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");
-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,
-    isInValid: false,
-    isLoadingList: false,
-    disabled: false,
-    required: false,
-    placeholder: '',
-    name: '',
-    'data-tracking-id': '',
-    filterListOnMenuOpen: false,
-    maxResults: 100,
-    paginate: false,
-    paginationBtnText: 'Display additional results',
-    isAsyncSearch: false,
-    multiSelect: false,
-    hasTwoColumns: false,
-    hideToggleButton: false,
-};
-function Dropdown(props) {
-    var _a, _b, _c;
-    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(() => {
-        setItemsList(props.list);
-    }, [props.list]);
-    const onPaginatonButtonClick = (e, downshift) => {
-        e.stopPropagation();
-        const finalCount = resultsShown + props.maxResults;
-        setResultsShown(finalCount);
-        props.onPaginate && props.onPaginate(finalCount, downshift.inputValue, e);
-    };
-    const isSelectedItemLocal = (item) => {
-        return !item.isNotSelectable && dropdownUtils_1.itemToString(props.selectedItem) === dropdownUtils_1.itemToString(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' : '';
-        toReturn += itemIndex === downshift.highlightedIndex ? ' highlighted' : '';
-        toReturn += item.className ? item.className : '';
-        return toReturn;
-    };
-    const onInputChangeLocal = (items, inputValue) => {
-        setResultsShown(props.maxResults);
-        setItemsList(items);
-        props.onInputChange && props.onInputChange(inputValue);
-    };
-    const renderListItems = (downshift) => {
-        const listToRender = [];
-        if (!downshift.isOpen)
-            return [];
-        let optionsToRender = itemsList;
-        const shouldPaginate = props.paginate && resultsShown < optionsToRender.length;
-        optionsToRender = props.paginate ? optionsToRender.slice(0, resultsShown) : optionsToRender;
-        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(...map_1.default(optionsToRender, (item, index) => {
-            const itemProps = item.isNonActionable
-                ? {}
-                : downshift.getItemProps({
-                    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)}` },
-                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", 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", 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(...[
-                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
-    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.d.ts

@@ -1,16 +0,0 @@
-import { IDClassNameProps } from '@rh-support/types/shared';
-import { GetPropsCommonOptions, UseComboboxGetLabelPropsOptions, UseComboboxGetMenuPropsOptions, UseSelectGetLabelPropsOptions, UseSelectGetMenuPropsOptions } from 'downshift';
-import React from 'react';
-interface IProps extends IDClassNameProps {
-    isOpen: boolean;
-    getMenuProps: (options?: UseComboboxGetMenuPropsOptions | UseSelectGetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any;
-    getLabelProps: (options?: UseComboboxGetLabelPropsOptions | UseSelectGetLabelPropsOptions) => any;
-    toggleMenuComponent: React.ReactNode;
-    label: string | React.ReactNode;
-    children: JSX.Element | JSX.Element[] | React.ReactNode;
-    'data-tracking-id': string;
-    hasTwoColumns: boolean;
-}
-export default function DropdownWrapper(props: IProps): JSX.Element;
-export {};
-//# sourceMappingURL=DropdownWrapper.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownWrapper.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/DropdownWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,OAAO,EACH,qBAAqB,EACrB,+BAA+B,EAC/B,8BAA8B,EAC9B,6BAA6B,EAC7B,4BAA4B,EAC/B,MAAM,WAAW,CAAC;AACnB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,MAAO,SAAQ,gBAAgB;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,EAAE,CACV,OAAO,CAAC,EAAE,8BAA8B,GAAG,4BAA4B,EACvE,YAAY,CAAC,EAAE,qBAAqB,KACnC,GAAG,CAAC;IACT,aAAa,EAAE,CAAC,OAAO,CAAC,EAAE,+BAA+B,GAAG,6BAA6B,KAAK,GAAG,CAAC;IAClG,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,EAAE,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACxD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,MAAM,eA6BpD"}

package/lib/cjs/DropDownList/DropdownWrapper.js

@@ -1,25 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const utils_1 = require("@rh-support/utils");
-const react_1 = __importDefault(require("react"));
-function DropdownWrapper(props) {
-    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
-        if (utils_1.isiOS()) {
-            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", Object.assign({}, props.getLabelProps()), props.label),
-        props.toggleMenuComponent,
-        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' : ''}`,
-        })), props.children)));
-}
-exports.default = DropdownWrapper;

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

@@ -1,4 +0,0 @@
-import { MultiSelectDropdownProps } from './types';
-declare const MultiSelectDropDownList: <T extends {}>(props: MultiSelectDropdownProps<T>) => JSX.Element;
-export { MultiSelectDropDownList, MultiSelectDropdownProps };
-//# sourceMappingURL=MultiSelectDropdownList.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"MultiSelectDropdownList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/MultiSelectDropdownList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAGnD,QAAA,MAAM,uBAAuB,wDAExB,WAAW,CAAC;AAEjB,OAAO,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,CAAC"}

package/lib/cjs/DropDownList/MultiSelectDropdownList.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultiSelectDropDownList = void 0;
-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/Readme.md

@@ -1,114 +0,0 @@
-# Dropdown list
-
-## Async Dropdown
-
-It is an HOC wrapper around the original dropdown component.If you use async dropdown then the dropdown list will be searchable by default. You don't need to pass the searchable prop explicitly.
-
-### How to use async dropdownlist
-
-Below is the an example of how you can use async dropdown list. Please also go through the comments as they explain a lot about the inner functionalities of the dropdown
-
-```js
-import React, { useState, useMemo } from 'react'
-import { AsyncDropDownList } from '@rh-support/components';
-import { toOptions, toOption } from '@rh-support/utils';
-
-
-// it's better to keep the server pagination in sync with the dropdown pagination
-// so that you always know that if user will click on pagination button
-// we need to fetch data from the server just by increasing the page size.
-// otherwise we will need some complex logic in handle pagination function
-const PER_PAGE = 50;
-const SEARCH_URI = 'https://api.github.com/search/users';
-
-
-function makeAndHandleRequest(query, page = 1) {
-    return fetch(`${SEARCH_URI}?q=${query}+in:login&page=${page}&per_page=${PER_PAGE}`)
-        .then(resp => resp.json())
-        .then(({ items, total_count }) => {
-            /* eslint-disable-line camelcase */
-            const options = items.map(i => ({
-                avatar_url: i.avatar_url,
-                id: i.id,
-                login: i.login,
-            }));
-            return { options, total_count };
-        });
-}
-
-export function Test() {
-    const [items, setItems] = useState<any>([]);
-    const [isFetching, setIsFetching] = useState(false);
-    const [selectedItem, setSelectedItem] = useState({ login: 'karan' });
-    const fetchUsers = async (inputVal) => {
-        try {
-            setIsFetching(true);
-            const userResponse = await makeAndHandleRequest(inputVal);
-            setItems(userResponse)
-        } catch (e) {
-            // silently fails
-        }
-        finally {
-            setIsFetching(false);
-        }
-    };
-
-    const onDropdownChange = (item) => {
-        setSelectedItem(item.label);
-    }
-
-    const onPaginate = (shownResults, inputVal, e) => {
-        console.log(inputVal);
-        // fetch more results here
-    };
-
-    const onOuterClick = () => {
-    // optional if you don't want to show the last results if user focuses out of dropdown
-        setItems({ options: [] });
-    }
-
-    const onDropdownClear = () => {
-        setSelectedItem({ login: '' });
-    }
-
-    // this is the most important part to memoize the selected item. If you don't then every time
-    // new results are fetched the dropdown will render and toOption always create a new object
-    // forcing dropdown to render and overriding the input value
-    const memoizedSelectedItem = useMemo(() => toOption(selectedItem, { labelKey: 'login' }), [selectedItem]);
-
-    return (
-        <AsyncDropDownList<any>
-            placeholder={'Select a Cluster'}
-            id="case-details-cluster-nickname-selector"
-            selectedItem={memoizedSelectedItem}
-            list={items ? toOptions(items.options, {
-                labelKey: 'login',
-                childrenKey: 'children'
-            }) : []}
-            title={`Select a Cluster`}
-            onOuterClick={onOuterClick}
-            onChange={onDropdownChange}
-            onSearch={fetchUsers}
-            delay={300}
-            useCache={true}
-            isLoadingList={isFetching}
-            paginate={true}
-            onPaginate={onPaginate}
-            maxResults={PER_PAGE - 1}
-            emptyListLabel={'No results found'}
-            onClearSelection={onDropdownClear}
-        />
-    )
-}
-
-```
-
-**Props specific to async dropdown**
-
-| Name       | Type                 | Default             | Description                                                             |
-| ---------- | -------------------- | ------------------- | ----------------------------------------------------------------------- |
-| delay      | <code>number</code>  | 200                 | Delay, in milliseconds, before performing search.                       |
-| minlength  | <code>number</code>  | 2                   | Number of input characters that must be entered before showing results. |
-| promptText | <code>string</code>  | 'Type to search...' | Message displayed in the menu when there is no user input.              |
-| searchText | <code>string</code>  | 'Searching...'      | Message displayed in the menu while the request is pending.             |
-| useCache   | <code>boolean</code> | false               | Whether or not the component should cache query results.                |

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

@@ -1,14 +0,0 @@
-import { IOption } from '@rh-support/types/shared';
-import { UseComboboxReturnValue, UseComboboxStateChange } from 'downshift';
-import React from 'react';
-import { IDropdownListProps } from './types';
-interface IProps<T> extends Omit<IDropdownListProps<T>, 'onChange' | 'onInputChange'> {
-    renderListItems: (downshift: UseComboboxReturnValue<IOption<T>>) => React.ReactNode[];
-    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 {};
-//# sourceMappingURL=SearchableList.d.ts.map

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

@@ -1 +0,0 @@
-{"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,104 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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) {
-    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);
-    };
-    const onIsOpenChange = (changes) => {
-        if (!changes.isOpen && changes.type !== downshift_1.useCombobox.stateChangeTypes.ItemClick) {
-            props.onOuterClick && props.onOuterClick(props.selectedItem);
-        }
-    };
-    const comboboxStateReducer = (state, actionAndChanges) => {
-        const { changes, type } = actionAndChanges;
-        switch (type) {
-            case downshift_1.useCombobox.stateChangeTypes.InputBlur:
-                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;
-        }
-    };
-    const downshift = downshift_1.useCombobox({
-        selectedItem: props.selectedItem,
-        items: props.itemsList,
-        onSelectedItemChange: props.onChange,
-        labelId: `${props.id}-label`,
-        itemToString: dropdownUtils_1.itemToString,
-        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
-            // the input manually as it will trigger an api call.
-            (!props.isAsyncSearch || (props.isAsyncSearch && isOpen)) && props.onInputChange(newList, inputValue);
-        },
-        stateReducer: props.multiSelect ? dropdownUtils_1.multiSelectDropdownStateReducer : comboboxStateReducer,
-    });
-    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();
-    };
-    const onInputClick = () => (e) => {
-        if (!isOpen) {
-            openMenu();
-            props.onMenuToggle && props.onMenuToggle();
-        }
-    };
-    const onInputBlur = () => (e) => {
-        props.onInputBlur && props.onInputBlur(e);
-    };
-    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", Object.assign({}, getInputProps({
-                    placeholder: props.placeholder,
-                    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,
-                    disabled: props.disabled,
-                    onClick: onInputClick(),
-                    onBlur: onInputBlur(),
-                })))),
-            react_1.default.createElement(LoadingIndicator_1.LoadingIndicator, { isInline: true, show: props.isLoadingList }),
-            !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 ? () => props.onMenuToggle() : dropdownUtils_1.noop,
-            })),
-                react_1.default.createElement(caret_down_icon_1.default, null)))));
-    };
-    return (react_1.default.createElement(DropdownWrapper_1.default, { id: props.id, className: props.className, isOpen: isOpen, getMenuProps: getMenuProps, getLabelProps: getLabelProps, label: props.label, toggleMenuComponent: renderSearchableToggleButton(), "data-tracking-id": props['data-tracking-id'], hasTwoColumns: props.hasTwoColumns }, isOpen && props.renderListItems(downshift)));
-}
-exports.default = SearchableList;

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

@@ -1,11 +0,0 @@
-import { IOption } from '@rh-support/types/shared';
-import { UseSelectReturnValue, UseSelectStateChange } from 'downshift';
-import React from 'react';
-import { IDropdownListProps } from './types';
-interface IProps<T> extends Omit<IDropdownListProps<T>, 'onChange'> {
-    renderListItems: (downshift: UseSelectReturnValue<IOption<T>>) => React.ReactNode[];
-    onChange: (changes: UseSelectStateChange<IOption<T>>) => void;
-}
-export default function SelectList<T>(props: IProps<T>): JSX.Element;
-export {};
-//# sourceMappingURL=SelectList.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SelectList.d.ts","sourceRoot":"","sources":["../../../src/DropDownList/SelectList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAa,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAClF,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,CAAC;IAC/D,eAAe,EAAE,CAAC,SAAS,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;IACpF,QAAQ,EAAE,CAAC,OAAO,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,eAgErD"}

package/lib/cjs/DropDownList/SelectList.js

@@ -1,41 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-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) {
-    const onIsOpenChange = (changes) => {
-        if (!changes.isOpen && changes.type !== downshift_1.useSelect.stateChangeTypes.ItemClick) {
-            props.onOuterClick && props.onOuterClick(props.selectedItem);
-        }
-    };
-    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", 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-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 ? () => 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)))),
-            react_1.default.createElement(LoadingIndicator_1.LoadingIndicator, { isInline: true, show: props.isLoadingList }),
-            !props.isLoadingList && (react_1.default.createElement("span", { className: "pf-c-select__toggle-arrow" },
-                react_1.default.createElement(caret_down_icon_1.default, null)))));
-    };
-    return (react_1.default.createElement(DropdownWrapper_1.default, { id: props.id, className: props.className, label: props.label, isOpen: isOpen, getMenuProps: getMenuProps, getLabelProps: getLabelProps, toggleMenuComponent: renderToggleButton(), "data-tracking-id": props['data-tracking-id'], hasTwoColumns: props.hasTwoColumns }, isOpen && props.renderListItems(downshift)));
-}
-exports.default = SelectList;