@redhat-cloud-services/frontend-components 3.8.4 → 3.8.5

package/BulkSelect/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './BulkSelect';
 export { default as BulkSelect } from './BulkSelect';
+export * from './BulkSelect';

package/BulkSelect/index.js

@@ -1,4 +1,14 @@
 "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);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -8,4 +18,5 @@ var BulkSelect_1 = require("./BulkSelect");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(BulkSelect_1).default; } });
 var BulkSelect_2 = require("./BulkSelect");
 Object.defineProperty(exports, "BulkSelect", { enumerable: true, get: function () { return __importDefault(BulkSelect_2).default; } });
+__exportStar(require("./BulkSelect"), exports);
 //# sourceMappingURL=index.js.map

package/BulkSelect/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/BulkSelect/index.ts"],"names":[],"mappings":";;;;;;AAAA,2CAAuC;AAA9B,sHAAA,OAAO,OAAA;AAChB,2CAAqD;AAA5C,yHAAA,OAAO,OAAc"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/BulkSelect/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAuC;AAA9B,sHAAA,OAAO,OAAA;AAChB,2CAAqD;AAA5C,yHAAA,OAAO,OAAc;AAC9B,+CAA6B"}

package/ConditionalFilter/CheckboxFilter.d.ts

@@ -1,38 +1,12 @@
-export default CheckboxFilter;
-declare class CheckboxFilter extends React.Component<any, any, any> {
-    constructor(props: any);
-    constructor(props: any, context: any);
-    onToggle: (isExpanded: any) => void;
-    calculateSelected: () => any[];
-    onSelect: (event: any, selection: any) => void;
-}
-declare namespace CheckboxFilter {
-    namespace propTypes {
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const value: PropTypes.Requireable<(string | PropTypes.InferProps<{
-            label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            value: PropTypes.Requireable<string>;
-        }> | null | undefined)[]>;
-        const placeholder: PropTypes.Requireable<string>;
-        const items: PropTypes.Requireable<(PropTypes.InferProps<{
-            value: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            id: PropTypes.Requireable<string>;
-            onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        }> | null | undefined)[]>;
-        const isDisabled: PropTypes.Requireable<boolean>;
-        const className: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        const items_1: never[];
-        export { items_1 as items };
-        const value_1: never[];
-        export { value_1 as value };
-        export function onChange_1(): undefined;
-        export { onChange_1 as onChange };
-        const isDisabled_1: boolean;
-        export { isDisabled_1 as isDisabled };
-    }
+import React from 'react';
+import { FilterItem, FilterValue } from './TextFilter';
+export interface CheckboxFilterProps {
+    onChange?: (e: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>, newSelection: string | FilterValue | (string | FilterValue)[], selection?: string | FilterValue) => void;
+    value?: (string | FilterValue)[];
+    placeholder?: string;
+    items?: FilterItem[];
+    isDisabled?: boolean;
+    className?: string;
 }
-import React from "react";
-import PropTypes from "prop-types";
+declare const CheckboxFilter: React.FunctionComponent<CheckboxFilterProps>;
+export default CheckboxFilter;

package/ConditionalFilter/CheckboxFilter.js

@@ -1,19 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -69,85 +54,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var react_core_1 = require("@patternfly/react-core");
-var TextFilter_1 = __importDefault(require("./TextFilter"));
 var isEqual_1 = __importDefault(require("lodash/isEqual"));
-var CheckboxFilter = (function (_super) {
-    __extends(CheckboxFilter, _super);
-    function CheckboxFilter() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-            isExpanded: false,
-            selected: [],
-        };
-        _this.onToggle = function (isExpanded) {
-            _this.setState({
-                isExpanded: isExpanded,
-            });
-        };
-        _this.calculateSelected = function () {
-            var selected = _this.state.selected;
-            var value = _this.props.value;
-            return Array.from(new Set(__spreadArray(__spreadArray([], (value && value.length > 0 && value.constructor === Array ? value.map(function (item) { return item.value || item; }) : []), true), selected, true)));
-        };
-        _this.onSelect = function (event, selection) {
-            var onChange = _this.props.onChange;
-            var newSelection = _this.calculateSelected();
-            if (newSelection.includes(selection)) {
-                newSelection = newSelection.filter(function (item) { return item !== selection; });
-            }
-            else {
-                newSelection = __spreadArray(__spreadArray([], newSelection, true), [selection], false);
-            }
-            onChange(event, newSelection, selection);
-            _this.setState({ selected: newSelection });
-        };
-        return _this;
-    }
-    CheckboxFilter.prototype.componentDidUpdate = function (_a) {
-        var prevSelected = _a.value;
-        var value = this.props.value;
-        if (!(0, isEqual_1.default)(prevSelected, value)) {
-            this.setState({
-                selected: value,
-            });
-        }
+var omit_1 = __importDefault(require("lodash/omit"));
+var TextFilter_1 = __importStar(require("./TextFilter"));
+var CheckboxFilter = function (_a) {
+    var _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.value, value = _c === void 0 ? [] : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { return undefined; } : _d, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, props = __rest(_a, ["items", "value", "onChange", "isDisabled"]);
+    var placeholder = props.placeholder, className = props.className;
+    var _f = (0, react_1.useState)(false), isExpanded = _f[0], setExpanded = _f[1];
+    var _g = (0, react_1.useState)([]), selected = _g[0], setSelected = _g[1];
+    var prevSelected = (0, react_1.useRef)(selected);
+    var changeSelected = function (value) {
+        prevSelected.current = selected;
+        setSelected(value);
     };
-    CheckboxFilter.prototype.render = function () {
-        var isExpanded = this.state.isExpanded;
-        var _a = this.props, items = _a.items, placeholder = _a.placeholder, isDisabled = _a.isDisabled, className = _a.className;
-        return (react_1.default.createElement(react_1.Fragment, null, !items || (items && items.length <= 0) ? (react_1.default.createElement(TextFilter_1.default, __assign({}, this.props, { value: "".concat(this.calculateSelected()) }))) : (react_1.default.createElement(react_core_1.Select, { className: className, variant: react_core_1.SelectVariant.checkbox, "aria-label": "Select Input", onToggle: this.onToggle, isDisabled: isDisabled, onSelect: this.onSelect, selections: this.calculateSelected(), isOpen: isExpanded, placeholderText: placeholder, ouiaId: placeholder }, items.map(function (_a, key) {
-            var value = _a.value, onClick = _a.onClick, label = _a.label, id = _a.id, item = __rest(_a, ["value", "onClick", "label", "id"]);
-            return (react_1.default.createElement(react_core_1.SelectOption, __assign({}, item, { key: id || key, value: String(value || id || key), onClick: function (e) { return onClick && onClick(e, __assign({ value: value, label: label, id: id }, item), key); } }), label));
-        })))));
+    (0, react_1.useEffect)(function () {
+        !(0, isEqual_1.default)(prevSelected.current, value) && value && changeSelected(value);
+    }, [selected]);
+    var calculateSelected = function () {
+        return Array.from(new Set(__spreadArray(__spreadArray([], (value && value.length > 0 && value.constructor === Array
+            ? value.map(function (item) {
+                return (0, TextFilter_1.isFilterValue)(item) ? item.value : item;
+            })
+            : []), true), selected, true)));
     };
-    return CheckboxFilter;
-}(react_1.Component));
-CheckboxFilter.propTypes = {
-    onChange: prop_types_1.default.func,
-    value: prop_types_1.default.arrayOf(prop_types_1.default.oneOfType([
-        prop_types_1.default.string,
-        prop_types_1.default.shape({
-            label: prop_types_1.default.node,
-            value: prop_types_1.default.string,
-        }),
-    ])),
-    placeholder: prop_types_1.default.string,
-    items: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        value: prop_types_1.default.string,
-        label: prop_types_1.default.node,
-        id: prop_types_1.default.string,
-        onClick: prop_types_1.default.func,
-    })),
-    isDisabled: prop_types_1.default.bool,
-    className: prop_types_1.default.string,
-};
-CheckboxFilter.defaultProps = {
-    items: [],
-    value: [],
-    onChange: function () { return undefined; },
-    isDisabled: false,
+    var onSelect = function (event, selection) {
+        var newSelection = calculateSelected();
+        newSelection = newSelection.includes(selection) ? newSelection.filter(function (item) { return item !== selection; }) : __spreadArray(__spreadArray([], newSelection, true), [selection], false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event, newSelection, selection);
+        changeSelected(newSelection);
+    };
+    return (react_1.default.createElement(react_1.Fragment, null, !items || (items && items.length <= 0) ? (react_1.default.createElement(TextFilter_1.default, __assign({}, props, { onChange: onChange, isDisabled: isDisabled, value: "".concat(calculateSelected()) }))) : (react_1.default.createElement(react_core_1.Select, { className: className, variant: react_core_1.SelectVariant.checkbox, "aria-label": "Select Input", onToggle: function (isExpanded) { return setExpanded(isExpanded); }, isDisabled: isDisabled, onSelect: function (event, value) { return onSelect(event, value); }, selections: calculateSelected(), isOpen: isExpanded, placeholderText: placeholder, ouiaId: placeholder }, items.map(function (_a, key) {
+        var value = _a.value, onClick = _a.onClick, label = _a.label, id = _a.id, item = __rest(_a, ["value", "onClick", "label", "id"]);
+        return (react_1.default.createElement(react_core_1.SelectOption, __assign({}, (0, omit_1.default)(item, 'onChange'), { key: id || key, value: String(value || id || key), onClick: function (e) { return onClick === null || onClick === void 0 ? void 0 : onClick(e, __assign({ value: value, label: label, id: id }, item), key); } }), label));
+    })))));
 };
 exports.default = CheckboxFilter;
 //# sourceMappingURL=CheckboxFilter.js.map

package/ConditionalFilter/CheckboxFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxFilter.js","sourceRoot":"","sources":["../src/ConditionalFilter/CheckboxFilter.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"CheckboxFilter.js","sourceRoot":"","sources":["../src/ConditionalFilter/CheckboxFilter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAqE;AACrE,qDAA6E;AAC7E,2DAAqC;AACrC,qDAA+B;AAC/B,yDAAkF;AA0BlF,IAAM,cAAc,GAAiD,UAAC,EAMrE;IALC,IAAA,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,gBAA0B,EAA1B,QAAQ,mBAAG,cAAM,OAAA,SAAS,EAAT,CAAS,KAAA,EAC1B,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EACf,KAAK,cAL4D,4CAMrE,CADS;IAEA,IAAA,WAAW,GAAgB,KAAK,YAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;IACnC,IAAA,KAA4B,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAA1C,UAAU,QAAA,EAAE,WAAW,QAAmB,CAAC;IAC5C,IAAA,KAA0B,IAAA,gBAAQ,EAA2B,EAAE,CAAC,EAA/D,QAAQ,QAAA,EAAE,WAAW,QAA0C,CAAC;IACvE,IAAM,YAAY,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,CAAC;IAEtC,IAAM,cAAc,GAAG,UAAC,KAA+B;QACrD,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC;QAChC,WAAW,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC;QACR,CAAC,IAAA,iBAAO,EAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,KAAK,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,IAAM,iBAAiB,GAAG;QACxB,OAAA,KAAK,CAAC,IAAI,CACR,IAAI,GAAG,iCACF,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,CAAC,WAAW,KAAK,KAAK;YAC1D,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,UAAC,IAAI;gBACb,OAAO,IAAA,0BAAa,EAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;YACjD,CAAC,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC,SACJ,QAAQ,QACX,CACH;IATD,CASC,CAAC;IAEJ,IAAM,QAAQ,GAAG,UAAC,KAAyE,EAAE,SAA+B;QAC1H,IAAI,YAAY,GAAG,iBAAiB,EAAE,CAAC;QACvC,YAAY,GAAG,YAAY,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,UAAC,IAAI,IAAK,OAAA,IAAI,KAAK,SAAS,EAAlB,CAAkB,CAAC,CAAC,CAAC,iCAAK,YAAY,UAAE,SAAS,SAAC,CAAC;QAEnI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;QAC3C,cAAc,CAAC,YAAY,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,gBAAQ,QACN,CAAC,KAAK,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CACxC,8BAAC,oBAAU,eAAK,KAAK,IAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,UAAG,iBAAiB,EAAE,CAAE,IAAI,CACvG,CAAC,CAAC,CAAC,CACF,8BAAC,mBAAM,IACL,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,0BAAa,CAAC,QAAQ,gBACpB,cAAc,EACzB,QAAQ,EAAE,UAAC,UAAU,IAAK,OAAA,WAAW,CAAC,UAAU,CAAC,EAAvB,CAAuB,EACjD,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,QAAQ,CAAC,KAAK,EAAE,KAA6B,CAAC,EAA9C,CAA8C,EAC1E,UAAU,EAAE,iBAAiB,EAAE,EAC/B,MAAM,EAAE,UAAU,EAClB,eAAe,EAAE,WAAW,EAC5B,MAAM,EAAE,WAAW,IAElB,KAAK,CAAC,GAAG,CAAC,UAAC,EAAsC,EAAE,GAAG;QAAzC,IAAA,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA,EAAE,EAAE,QAAA,EAAK,IAAI,cAApC,mCAAsC,CAAF;QAAY,OAAA,CAC1D,8BAAC,yBAAY,eACP,IAAA,cAAI,EAAC,IAAI,EAAE,UAAU,CAAC,IAC1B,GAAG,EAAE,EAAE,IAAI,GAAG,EACd,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,IAAI,GAAG,CAAC,EACjC,OAAO,EAAE,UAAC,CAAC,IAAK,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,aAAI,KAAK,OAAA,EAAE,KAAK,OAAA,EAAE,EAAE,IAAA,IAAK,IAAI,GAAI,GAAG,CAAC,EAAhD,CAAgD,KAE/D,KAAK,CACO,CAChB,CAAA;KAAA,CAAC,CACK,CACV,CACQ,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,cAAc,CAAC"}

package/ConditionalFilter/ConditionalFilter.d.ts

@@ -1,58 +1,36 @@
-export default ConditionalFilter;
-declare class ConditionalFilter extends React.Component<any, any, any> {
-    constructor(props: any);
-    breakpointConstant: number;
-    dropdownToggle: (isOpen: any) => void;
-    onChange: (_e: any, value: any) => void;
-    getWrapper: () => React.ExoticComponent<{
-        children?: React.ReactNode;
-    }> | ((props: any) => JSX.Element);
-    updateFilterViewport: (width: any) => boolean;
-    resizeListener: void | undefined;
+import React from 'react';
+import { RadioFilterProps } from './RadioFilter';
+import { CheckboxFilterProps } from './CheckboxFilter';
+import { GroupFilterProps } from './GroupFilter';
+import './conditional-filter.scss';
+declare type FilterValues = TextInputProps & RadioFilterProps & CheckboxFilterProps & GroupFilterProps & {
+    items?: Value[];
+    value?: string | (string | Value)[] | Record<string, unknown>;
+};
+interface TextInputProps {
+    id?: string;
+    onChange?: () => void;
+    placeholder?: string;
+    value?: string;
+}
+interface Value {
+    label?: Node;
+    value?: string;
 }
-declare namespace ConditionalFilter {
-    namespace propTypes {
-        const id: PropTypes.Requireable<string>;
-        const isDisabled: PropTypes.Requireable<boolean>;
-        const useMobileLayout: PropTypes.Requireable<boolean>;
-        const value: PropTypes.Requireable<string>;
-        const placeholder: PropTypes.Requireable<string>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const hideLabel: PropTypes.Requireable<boolean>;
-        const items: PropTypes.Requireable<(PropTypes.InferProps<{
-            id: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-            value: PropTypes.Requireable<string>;
-            type: PropTypes.Requireable<string>;
-            filterValues: PropTypes.Requireable<PropTypes.InferProps<{
-                value: PropTypes.Requireable<string>;
-                placeholder: PropTypes.Requireable<string>;
-                onChange: PropTypes.Requireable<(...args: any[]) => any>;
-            }> | PropTypes.InferProps<{
-                value: PropTypes.Requireable<PropTypes.InferProps<{}>>;
-                items: PropTypes.Requireable<(PropTypes.InferProps<{
-                    label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-                    value: PropTypes.Requireable<string>;
-                }> | null | undefined)[]>;
-                placeholder: PropTypes.Requireable<string>;
-                onChange: PropTypes.Requireable<(...args: any[]) => any>;
-            }>>;
-        }> | null | undefined)[]>;
-    }
-    namespace defaultProps {
-        const value_1: string;
-        export { value_1 as value };
-        const items_1: never[];
-        export { items_1 as items };
-        const hideLabel_1: boolean;
-        export { hideLabel_1 as hideLabel };
-        const isDisabled_1: boolean;
-        export { isDisabled_1 as isDisabled };
-        const id_1: string;
-        export { id_1 as id };
-        const useMobileLayout_1: boolean;
-        export { useMobileLayout_1 as useMobileLayout };
-    }
+export interface ConditionalFilterItem {
+    id?: string;
+    label?: Node;
+    value?: string;
+    type: 'text' | 'checkbox' | 'radio' | 'custom' | 'group';
+    filterValues?: TextInputProps | FilterValues;
+    placeholder?: string;
 }
-import React from "react";
-import PropTypes from "prop-types";
+export interface ConditionalFilterProps extends TextInputProps {
+    hideLabel: boolean;
+    items: ConditionalFilterItem[];
+    id: string;
+    isDisabled: boolean;
+    useMobileLayout: boolean;
+}
+declare const ConditionalFilter: React.FunctionComponent<ConditionalFilterProps>;
+export default ConditionalFilter;

package/ConditionalFilter/ConditionalFilter.js

@@ -1,19 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -44,150 +29,71 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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 };
 };
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var global_breakpoint_md_1 = __importDefault(require("@patternfly/react-tokens/dist/js/global_breakpoint_md"));
+var lodash_1 = require("lodash");
 var react_core_1 = require("@patternfly/react-core");
 var react_icons_1 = require("@patternfly/react-icons");
-var global_breakpoint_md_1 = __importDefault(require("@patternfly/react-tokens/dist/js/global_breakpoint_md"));
 var TextFilter_1 = __importDefault(require("./TextFilter"));
 var conditionalFilterConstants_1 = require("./conditionalFilterConstants");
-var prop_types_1 = __importDefault(require("prop-types"));
 require("./conditional-filter.css");
-var react_2 = require("react");
-var classnames_1 = __importDefault(require("classnames"));
-var ConditionalFilter = (function (_super) {
-    __extends(ConditionalFilter, _super);
-    function ConditionalFilter(props) {
-        var _this = this;
-        if (!props.useMobileLayout) {
-            console.warn("The prop \"useMobileLayout\" is set to false. You are using an outdated mobile layout of conditional filter.\n            Please switch to new layout by adding \"useMobileLayout={true}\" prop to the PrimaryToolbar or ConditionalFilter directly.\n            The new mobile layout will become the default in next minor release.");
-        }
-        _this = _super.call(this, props) || this;
-        _this.dropdownToggle = function (isOpen) {
-            _this.setState({
-                isOpen: isOpen,
-            });
+var ConditionalFilter = function (_a) {
+    var _b = _a.hideLabel, hideLabel = _b === void 0 ? false : _b, _c = _a.id, id = _c === void 0 ? 'default-input' : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _f = _a.items, items = _f === void 0 ? [] : _f, onChange = _a.onChange, placeholder = _a.placeholder, _g = _a.useMobileLayout, useMobileLayout = _g === void 0 ? false : _g, _h = _a.value, value = _h === void 0 ? '' : _h;
+    var breakpointConstant = parseInt(global_breakpoint_md_1.default.value.replace('px', ''));
+    var updateFilterViewport = function (width) { return width <= breakpointConstant; };
+    var _j = (0, react_1.useState)(false), isOpen = _j[0], setIsOpen = _j[1];
+    var _k = (0, react_1.useState)(), stateValue = _k[0], setStateValue = _k[1];
+    var _l = (0, react_1.useState)(updateFilterViewport(window.innerWidth)), isMobile = _l[0], setIsMobile = _l[1];
+    var resizeListener = (0, react_1.useRef)(function (event) {
+        setIsMobile(updateFilterViewport((event === null || event === void 0 ? void 0 : event.target).innerWidth));
+    });
+    (0, react_1.useEffect)(function () {
+        useMobileLayout ||
+            console.warn("The prop \"useMobileLayout\" is set to false. You are using an outdated mobile layout of conditional filter.\n    Please switch to new layout by adding \"useMobileLayout={true}\" prop to the PrimaryToolbar or ConditionalFilter directly.\n    The new mobile layout will become the default in next minor release.");
+        window.addEventListener('resize', resizeListener.current);
+        return function () {
+            resizeListener.current && window.removeEventListener('resize', resizeListener.current);
         };
-        _this.onChange = function (_e, value) {
-            _this.setState({
-                stateValue: value,
-            });
-        };
-        _this.getWrapper = function () {
-            return _this.props.useMobileLayout && _this.state.isMobile
-                ? function (props) { return react_1.default.createElement(react_core_1.ToolbarToggleGroup, __assign({}, props, { breakpoint: "md", toggleIcon: react_1.default.createElement(react_icons_1.FilterIcon, null) })); }
-                : react_2.Fragment;
-        };
-        _this.updateFilterViewport = function (width) { return width <= _this.breakpointConstant; };
-        _this.breakpointConstant = parseInt(global_breakpoint_md_1.default.value.replace('px', ''));
-        _this.state = {
-            isOpen: false,
-            stateValue: undefined,
-            isMobile: _this.updateFilterViewport(window.innerWidth),
-        };
-        return _this;
-    }
-    ConditionalFilter.prototype.componentDidMount = function () {
-        var _this = this;
-        this.resizeListener = window.addEventListener('resize', function (event) {
-            _this.setState(function (prev) { return (__assign(__assign({}, prev), { isMobile: _this.updateFilterViewport(event.target.innerWidth) })); });
-        });
-    };
-    ConditionalFilter.prototype.componentWillUnmount = function () {
-        if (this.resizeListener) {
-            window.removeEventListener(this.resizeListener);
-        }
-    };
-    ConditionalFilter.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, items = _a.items, value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder, hideLabel = _a.hideLabel, isDisabled = _a.isDisabled, useMobileLayout = _a.useMobileLayout, props = __rest(_a, ["items", "value", "onChange", "placeholder", "hideLabel", "isDisabled", "useMobileLayout"]);
-        var _b = this.state, isOpen = _b.isOpen, stateValue = _b.stateValue, isMobile = _b.isMobile;
-        var currentValue = onChange ? value : stateValue;
-        var activeItem = items && items.length && (items.find(function (item, key) { return item.value === currentValue || key === currentValue; }) || items[0]);
-        var onChangeCallback = onChange || this.onChange;
-        var ActiveComponent = activeItem && (conditionalFilterConstants_1.typeMapper[activeItem.type] || conditionalFilterConstants_1.typeMapper.text);
-        var capitalize = function (string) { return string[0].toUpperCase() + string.substring(1); };
-        var shouldRenderNewLayout = useMobileLayout && isMobile;
-        var Wrapper = this.getWrapper();
-        return (react_1.default.createElement(Wrapper, null,
-            useMobileLayout && isMobile && (react_1.default.createElement(react_core_1.ToolbarGroup, { className: "ins-c-conditional-filter mobile" }, items.map(function (activeItem, key) {
-                var ActiveComponent = activeItem && (conditionalFilterConstants_1.typeMapper[activeItem.type] || conditionalFilterConstants_1.typeMapper.text);
-                return (react_1.default.createElement(react_core_1.ToolbarItem, { key: key },
-                    react_1.default.createElement(ActiveComponent, __assign({}, (activeItem.type !== conditionalFilterConstants_1.conditionalFilterType.custom && {
-                        placeholder: placeholder || activeItem.placeholder || "Filter by ".concat(activeItem.label),
-                        id: (activeItem.filterValues && activeItem.filterValues.id) || currentValue,
-                    }), activeItem.filterValues))));
-            }))),
-            !shouldRenderNewLayout && (react_1.default.createElement(react_2.Fragment, null, !items || (items && items.length <= 0) ? (react_1.default.createElement("div", { className: (0, classnames_1.default)('ins-c-conditional-filter', {
-                    desktop: useMobileLayout,
-                }) },
-                react_1.default.createElement(TextFilter_1.default, __assign({}, props, { value: currentValue, onChange: function (e) { return onChangeCallback(e, e.target.value); }, placeholder: placeholder, "widget-type": "InsightsInput" })))) : (react_1.default.createElement(react_core_1.Split, { className: (0, classnames_1.default)('ins-c-conditional-filter', {
-                    desktop: useMobileLayout,
-                }) },
-                items.length > 1 && (react_1.default.createElement(react_core_1.SplitItem, null,
-                    react_1.default.createElement(react_core_1.Dropdown, { className: "ins-c-conditional-filter__group", onSelect: function () { return _this.dropdownToggle(false); }, isOpen: isOpen, ouiaId: "ConditionalFilter", toggle: react_1.default.createElement(react_core_1.DropdownToggle, { "aria-label": "Conditional filter", onToggle: this.dropdownToggle, isDisabled: isDisabled, className: hideLabel ? 'ins-c-conditional-filter__no-label' : '', ouiaId: "ConditionalFilter" },
-                            react_1.default.createElement(react_icons_1.FilterIcon, { size: "sm" }),
-                            !hideLabel && (react_1.default.createElement("span", { className: "ins-c-conditional-filter__value-selector" }, activeItem && capitalize(activeItem.label)))), dropdownItems: items.map(function (item, key) { return (react_1.default.createElement(react_core_1.DropdownItem, { key: item.id ? "".concat(item.id, "-dropdown") : key, component: "button", ouiaId: item.label, onClick: function (e) { return onChangeCallback(e, item.value || key, item); }, isHovered: activeItem.label === item.label }, capitalize(item.label))); }) }))),
-                ActiveComponent && (react_1.default.createElement(react_core_1.SplitItem, { isFilled: true },
-                    react_1.default.createElement(ActiveComponent, __assign({}, (activeItem.type !== conditionalFilterConstants_1.conditionalFilterType.custom && {
-                        placeholder: placeholder || activeItem.placeholder || "Filter by ".concat(activeItem.label),
-                        id: (activeItem.filterValues && activeItem.filterValues.id) || currentValue,
-                    }), activeItem.filterValues))))))))));
-    };
-    return ConditionalFilter;
-}(react_1.Component));
-var TextInputProps = {
-    value: prop_types_1.default.string,
-    placeholder: prop_types_1.default.string,
-    onChange: prop_types_1.default.func,
-};
-ConditionalFilter.propTypes = __assign(__assign({ hideLabel: prop_types_1.default.bool, items: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        id: prop_types_1.default.string,
-        label: prop_types_1.default.node,
-        value: prop_types_1.default.string,
-        type: prop_types_1.default.oneOf(['text', 'checkbox', 'radio', 'custom', 'group']),
-        filterValues: prop_types_1.default.oneOfType([
-            prop_types_1.default.shape(TextInputProps),
-            prop_types_1.default.shape(__assign(__assign({}, TextInputProps), { value: prop_types_1.default.oneOfType([
-                    prop_types_1.default.string,
-                    prop_types_1.default.arrayOf(prop_types_1.default.oneOfType([
-                        prop_types_1.default.string,
-                        prop_types_1.default.shape({
-                            label: prop_types_1.default.node,
-                            value: prop_types_1.default.string,
-                        }),
-                    ])),
-                    prop_types_1.default.shape((_a = {},
-                        _a[prop_types_1.default.string] = prop_types_1.default.any,
-                        _a)),
-                ]), items: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-                    label: prop_types_1.default.node,
-                    value: prop_types_1.default.string,
-                })) })),
-        ]),
-    })) }, TextInputProps), { id: prop_types_1.default.string, isDisabled: prop_types_1.default.bool, useMobileLayout: prop_types_1.default.bool });
-ConditionalFilter.defaultProps = {
-    value: '',
-    items: [],
-    hideLabel: false,
-    isDisabled: false,
-    id: 'default-input',
-    useMobileLayout: false,
+    }, []);
+    var currentValue = onChange ? value : stateValue;
+    var activeItem = items && items.length && (items.find(function (item, key) { return item.value === currentValue || key === Number(currentValue); }) || items[0]);
+    var onChangeDefault = function (_e, value) { return setStateValue(value); };
+    var onChangeCallback = onChange || onChangeDefault;
+    var shouldRenderNewLayout = useMobileLayout && isMobile;
+    var capitalize = function (string) { return string[0].toUpperCase() + string.substring(1); };
+    var ActiveComponent = activeItem && (conditionalFilterConstants_1.typeMapper[activeItem.type] || conditionalFilterConstants_1.typeMapper.text);
+    var Wrapper = useMobileLayout && isMobile
+        ? function (props) { return react_1.default.createElement(react_core_1.ToolbarToggleGroup, __assign({}, props, { breakpoint: "md", toggleIcon: react_1.default.createElement(react_icons_1.FilterIcon, null) })); }
+        : react_1.Fragment;
+    return (react_1.default.createElement(Wrapper, null,
+        useMobileLayout && isMobile && (react_1.default.createElement(react_core_1.ToolbarGroup, { className: "ins-c-conditional-filter mobile" }, items.map(function (activeItem, key) {
+            var ActiveComponent = activeItem && (conditionalFilterConstants_1.typeMapper[activeItem.type] || conditionalFilterConstants_1.typeMapper.text);
+            return (react_1.default.createElement(react_core_1.ToolbarItem, { key: key },
+                react_1.default.createElement(ActiveComponent, __assign({}, (activeItem.type !== conditionalFilterConstants_1.conditionalFilterType.custom && {
+                    placeholder: placeholder || activeItem.placeholder || "Filter by ".concat(activeItem.label),
+                    id: activeItem.filterValues ? activeItem.filterValues.id : currentValue ? String(currentValue) : undefined,
+                }), (0, lodash_1.omit)(activeItem.filterValues, 'value')))));
+        }))),
+        !shouldRenderNewLayout && (react_1.default.createElement(react_1.Fragment, null, !items || (items && items.length <= 0) ? (react_1.default.createElement("div", { className: (0, classnames_1.default)('ins-c-conditional-filter', {
+                desktop: useMobileLayout,
+            }) },
+            react_1.default.createElement(TextFilter_1.default, { id: id, isDisabled: isDisabled, onChange: function (e) { return onChangeCallback(e, Number(e.target.value)); }, placeholder: placeholder, value: currentValue ? String(currentValue) : undefined, "widget-type": "InsightsInput" }))) : (react_1.default.createElement(react_core_1.Split, { className: (0, classnames_1.default)('ins-c-conditional-filter', {
+                desktop: useMobileLayout,
+            }) },
+            items.length > 1 && (react_1.default.createElement(react_core_1.SplitItem, null,
+                react_1.default.createElement(react_core_1.Dropdown, { className: "ins-c-conditional-filter__group", onSelect: function () { return setIsOpen(false); }, isOpen: isOpen, ouiaId: "ConditionalFilter", toggle: react_1.default.createElement(react_core_1.DropdownToggle, { "aria-label": "Conditional filter", onToggle: setIsOpen, isDisabled: isDisabled, className: hideLabel ? 'ins-c-conditional-filter__no-label' : '', ouiaId: "ConditionalFilter" },
+                        react_1.default.createElement(react_icons_1.FilterIcon, { size: "sm" }),
+                        !hideLabel && (react_1.default.createElement("span", { className: "ins-c-conditional-filter__value-selector" }, activeItem && capitalize(String(activeItem.label))))), dropdownItems: items.map(function (item, key) { return (react_1.default.createElement(react_core_1.DropdownItem, { key: item.id ? "".concat(item.id, "-dropdown") : key, component: "button", ouiaId: String(item.label), onClick: function (e) { return onChangeCallback(e, item.value || key); }, isHovered: activeItem.label === item.label }, capitalize(String(item.label)))); }) }))),
+            ActiveComponent && (react_1.default.createElement(react_core_1.SplitItem, { isFilled: true },
+                react_1.default.createElement(ActiveComponent, __assign({}, (activeItem.type !== conditionalFilterConstants_1.conditionalFilterType.custom && {
+                    placeholder: placeholder || activeItem.placeholder || "Filter by ".concat(activeItem.label),
+                    id: (activeItem.filterValues && activeItem.filterValues.id) || currentValue ? String(currentValue) : undefined,
+                }), (0, lodash_1.omit)(activeItem.filterValues, 'value')))))))))));
 };
 exports.default = ConditionalFilter;
 //# sourceMappingURL=ConditionalFilter.js.map