@reltio/components 1.4.1938 → 1.4.1940

package/cjs/AttributesFiltersButton/AttributesFiltersButton.d.ts

@@ -16,10 +16,13 @@ type Props = {
     onTogglePopup?: (open: boolean) => void;
     isFiltersApplied?: boolean;
     dataReltioId?: string;
+    ButtonIcon?: React.ElementType;
     onFilterAttributeChange?: (attrSelectInfo: AttributeSelectionInfo) => void;
     onClear?: () => void;
     onCancel?: () => void;
     onApply?: () => void;
+    popoverAnchorRef?: React.MutableRefObject<HTMLDivElement>;
+    title?: string;
 };
-declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, attributesTypesGroupFilter, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, attributesTypesGroupFilter, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply, ButtonIcon, popoverAnchorRef, title }: Props) => JSX.Element>;
 export default _default;

package/cjs/AttributesFiltersButton/AttributesFiltersButton.js

@@ -39,11 +39,12 @@ var AttributesFiltersBuilder_1 = require("../AttributesFiltersBuilder");
 var ActionButtons_1 = require("./components/ActionButtons/");
 var styles_1 = require("./styles");
 var AttributesFiltersButton = function (_a) {
-    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply;
+    var _b;
+    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply, _c = _a.ButtonIcon, ButtonIcon = _c === void 0 ? FilterList_1.default : _c, popoverAnchorRef = _a.popoverAnchorRef, title = _a.title;
     var styles = (0, styles_1.useStyles)();
     var buttonRef = (0, react_1.useRef)();
-    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
-    var _c = (0, react_1.useState)([]), filters = _c[0], setFilters = _c[1];
+    var _d = (0, react_1.useState)(false), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = (0, react_1.useState)([]), filters = _e[0], setFilters = _e[1];
     var isFiltersApplied = isFiltersAppliedProp !== null && isFiltersAppliedProp !== void 0 ? isFiltersAppliedProp : !!(0, mdm_sdk_1.buildFilterQueryString)()(filtersProp);
     var buttonColor = isFiltersApplied ? 'primary' : 'inherit';
     var togglePopup = function () {
@@ -72,19 +73,19 @@ var AttributesFiltersButton = function (_a) {
     }, [onClear]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Button_1.default, { "data-reltio-id": dataReltioId, ref: buttonRef, color: buttonColor, classes: {
-                root: styles.triggerButton,
+                root: (0, classnames_1.default)(styles.triggerButton, classes === null || classes === void 0 ? void 0 : classes.triggerButton),
                 textPrimary: styles.changedFiltersIndicator
             }, onClick: togglePopup },
-            react_1.default.createElement(FilterList_1.default, { color: buttonColor })),
-        react_1.default.createElement(Popover_1.default, { open: isOpen, classes: { paper: (0, classnames_1.default)(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
+            react_1.default.createElement(ButtonIcon, { color: buttonColor })),
+        react_1.default.createElement(Popover_1.default, { open: isOpen, classes: { paper: (0, classnames_1.default)(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: (_b = popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) !== null && _b !== void 0 ? _b : buttonRef.current, onClose: togglePopup, anchorOrigin: {
                 vertical: 'bottom',
-                horizontal: 'right'
+                horizontal: (popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) ? 'left' : 'right'
             }, transformOrigin: {
                 vertical: 'top',
                 horizontal: 'left'
             } },
             react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(Typography_1.default, { variant: "h6" }, ui_i18n_1.default.text('Filter')),
+                react_1.default.createElement(Typography_1.default, { variant: "h6" }, title !== null && title !== void 0 ? title : ui_i18n_1.default.text('Filter')),
                 react_1.default.createElement("div", { className: styles.filtersBuilderWrapper },
                     children,
                     react_1.default.createElement(AttributesFiltersBuilder_1.AttributesFiltersBuilder, { attributesTypesGroups: attributesTypesGroups, attributesTypesGroupFilter: attributesTypesGroupFilter, filters: filters, onChange: setFilters, components: components, onFilterAttributeChange: onFilterAttributeChange, classes: classes })),

package/cjs/AttributesFiltersButton/AttributesFiltersButton.test.js

@@ -247,4 +247,19 @@ describe('AttributesFiltersButton tests', function () {
             }
         });
     }); });
+    it('should use title if defined', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var title, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    title = 'TestTitle';
+                    user = setUp(__assign(__assign({}, defaultProps), { title: title })).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByText(title)).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/cjs/EmptyState/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "small" | "root" | "root_small" | "embedded" | "full" | "textBox" | "secondaryText">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "small" | "root" | "embedded" | "root_small" | "full" | "textBox" | "secondaryText">;

package/cjs/SearchInput/SearchInput.d.ts

@@ -7,6 +7,7 @@ type Props = InputProps & {
     rootRef?: React.MutableRefObject<HTMLInputElement>;
     height: number;
     placeholder?: string;
+    endAdornmentContent?: React.ReactNode;
 };
-declare const _default: React.MemoExoticComponent<({ value, autofocus, onSearch, rootRef, classes, height, placeholder, ...otherProps }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ value, autofocus, onSearch, rootRef, classes, height, placeholder, endAdornmentContent, ...otherProps }: Props) => JSX.Element>;
 export default _default;

package/cjs/SearchInput/SearchInput.js

@@ -60,13 +60,15 @@ var events_1 = require("../helpers/events");
 var SmallIconButton_1 = require("../SmallIconButton");
 var styles_1 = require("./styles");
 var SearchInput = function (_a) {
-    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? ramda_1.identity : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, _d = _a.placeholder, placeholder = _d === void 0 ? ui_i18n_1.default.text('Search') : _d, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height", "placeholder"]);
+    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? ramda_1.identity : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, _d = _a.placeholder, placeholder = _d === void 0 ? ui_i18n_1.default.text('Search') : _d, endAdornmentContent = _a.endAdornmentContent, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height", "placeholder", "endAdornmentContent"]);
     var styles = (0, styles_1.useStyles)({ height: height });
     var _e = (0, react_1.useState)(''), localValue = _e[0], setLocalValue = _e[1];
     var updateValue = (0, ramda_1.pipe)((0, ramda_1.tap)(onSearch), setLocalValue);
     var clearValue = function () { return updateValue(''); };
     var inputValue = (0, ramda_1.isNil)(value) ? localValue : value;
     return (react_1.default.createElement(Input_1.default, __assign({ startAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "start" },
-            react_1.default.createElement(Search_1.default, { className: styles.icon })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" }, inputValue.length > 0 && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Close_1.default, className: styles.clearButton, onClick: clearValue }))), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: (0, classnames_1.default)(styles.input, classes.input), root: (0, classnames_1.default)(styles.container, classes.root) }), placeholder: placeholder, value: inputValue, onChange: (0, ramda_1.pipe)(events_1.getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
+            react_1.default.createElement(Search_1.default, { className: styles.icon })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" },
+            inputValue.length > 0 && (react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Close_1.default, className: styles.clearButton, onClick: clearValue })),
+            endAdornmentContent), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: (0, classnames_1.default)(styles.input, classes.input), root: (0, classnames_1.default)(styles.container, classes.root) }), placeholder: placeholder, value: inputValue, onChange: (0, ramda_1.pipe)(events_1.getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
 };
 exports.default = (0, react_1.memo)(SearchInput);

package/cjs/SearchInput/SearchInput.spec.js

@@ -10,55 +10,135 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var Input_1 = __importDefault(require("@mui/material/Input"));
-var SmallIconButton_1 = require("../SmallIconButton");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var SearchInput_1 = __importDefault(require("./SearchInput"));
+var test_utils_1 = require("../test-utils");
 describe('SearchInput tests', function () {
+    var onSearch = jest.fn();
     var defaultProps = {
         value: '',
         autofocus: true,
-        onSearch: function () { },
+        onSearch: onSearch,
         height: 40
     };
-    it('should render all components', function () {
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(SearchInput_1.default, __assign({}, defaultProps)));
-        expect(component.find(Input_1.default)).toHaveLength(1);
-        expect(component.find('svg')).toHaveLength(1);
-        expect(component.find(Input_1.default).prop('placeholder')).toEqual('Search');
-    });
-    it('should call onSearch prop on change', function () {
-        var onSearch = jest.fn();
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(SearchInput_1.default, __assign({}, defaultProps, { onSearch: onSearch })));
-        var input = component.find(Input_1.default);
-        input.simulate('change', { target: { value: 'test' } });
-        expect(onSearch).toBeCalledWith('test');
-    });
-    it('should call onSearch prop on clear input', function () {
-        var onSearch = jest.fn();
-        var component = (0, enzyme_1.mount)(react_1.default.createElement(SearchInput_1.default, __assign({}, defaultProps, { onSearch: onSearch, value: 'test' })));
-        component.find(SmallIconButton_1.SmallIconButton).find('button').simulate('click');
-        expect(onSearch).toBeCalledWith('');
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        var user = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(SearchInput_1.default, __assign({}, props))));
+    };
+    afterEach(function () {
+        jest.clearAllMocks();
     });
-    it('should not fail when onSearch prop is undefined', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(SearchInput_1.default, __assign({}, defaultProps)));
-        var input = component.find(Input_1.default);
-        input.simulate('change', { target: { value: 'test' } });
+    it('should render all components', function () {
+        setUp();
+        expect(react_2.screen.getByRole('textbox')).toBeInTheDocument();
+        expect(react_2.screen.getByPlaceholderText('Search')).toBeInTheDocument();
+        expect((0, test_utils_1.getMuiIconByName)('Search')).toBeInTheDocument();
     });
-    it('should forward props to Input', function () {
-        var onKeyDown = jest.fn();
-        var onFocus = jest.fn();
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(SearchInput_1.default, __assign({}, defaultProps, { fullWidth: true, onFocus: onFocus, onKeyDown: onKeyDown })));
-        var input = component.find(Input_1.default);
-        expect(input.props()).toMatchObject({
-            fullWidth: true,
-            onKeyDown: onKeyDown,
-            onFocus: onFocus
+    it('should call onSearch prop on change', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, searchValue;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp(__assign(__assign({}, defaultProps), { value: null })).user;
+                    searchValue = 'searchValue';
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), searchValue)];
+                case 1:
+                    _a.sent();
+                    expect(onSearch).toHaveBeenLastCalledWith(searchValue);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call onSearch prop on clear input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp(__assign(__assign({}, defaultProps), { value: 'test' })).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    expect(onSearch).toBeCalledWith('');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not fail when onSearch prop is undefined', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), 'q')];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should forward props to Input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onKeyDown, onFocus, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onKeyDown = jest.fn();
+                    onFocus = jest.fn();
+                    user = setUp(__assign(__assign({}, defaultProps), { fullWidth: true, onKeyDown: onKeyDown, onFocus: onFocus })).user;
+                    return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), 'q')];
+                case 1:
+                    _a.sent();
+                    expect(onKeyDown).toHaveBeenCalled();
+                    expect(onFocus).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
+    }); });
+    it('should use provided endAdornmentContent', function () {
+        var endAdornmentContent = react_1.default.createElement("div", null, "testContent");
+        setUp(__assign(__assign({}, defaultProps), { endAdornmentContent: endAdornmentContent }));
+        expect(react_2.screen.getByText('testContent')).toBeInTheDocument();
     });
 });

package/cjs/types/index.d.ts

@@ -135,6 +135,7 @@ export type AttributesFilterComponentsClasses = {
     filterSelectorContainer?: string;
     actionsContainer?: string;
     filterPopup?: string;
+    triggerButton?: string;
 };
 export declare enum ActionButtonMode {
     iconButton = "iconButton",

package/esm/AttributesFiltersButton/AttributesFiltersButton.d.ts

@@ -16,10 +16,13 @@ type Props = {
     onTogglePopup?: (open: boolean) => void;
     isFiltersApplied?: boolean;
     dataReltioId?: string;
+    ButtonIcon?: React.ElementType;
     onFilterAttributeChange?: (attrSelectInfo: AttributeSelectionInfo) => void;
     onClear?: () => void;
     onCancel?: () => void;
     onApply?: () => void;
+    popoverAnchorRef?: React.MutableRefObject<HTMLDivElement>;
+    title?: string;
 };
-declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, attributesTypesGroupFilter, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ filters: filtersProp, classes, attributesTypesGroups, attributesTypesGroupFilter, onChange, components, children, onTogglePopup, isFiltersApplied: isFiltersAppliedProp, dataReltioId, onFilterAttributeChange, onCancel, onClear, onApply, ButtonIcon, popoverAnchorRef, title }: Props) => JSX.Element>;
 export default _default;

package/esm/AttributesFiltersButton/AttributesFiltersButton.js

@@ -11,11 +11,12 @@ import { AttributesFiltersBuilder } from '../AttributesFiltersBuilder';
 import { ActionButtons } from './components/ActionButtons/';
 import { useStyles } from './styles';
 var AttributesFiltersButton = function (_a) {
-    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply;
+    var _b;
+    var filtersProp = _a.filters, classes = _a.classes, attributesTypesGroups = _a.attributesTypesGroups, attributesTypesGroupFilter = _a.attributesTypesGroupFilter, onChange = _a.onChange, components = _a.components, children = _a.children, onTogglePopup = _a.onTogglePopup, isFiltersAppliedProp = _a.isFiltersApplied, dataReltioId = _a.dataReltioId, onFilterAttributeChange = _a.onFilterAttributeChange, onCancel = _a.onCancel, onClear = _a.onClear, onApply = _a.onApply, _c = _a.ButtonIcon, ButtonIcon = _c === void 0 ? FilterIcon : _c, popoverAnchorRef = _a.popoverAnchorRef, title = _a.title;
     var styles = useStyles();
     var buttonRef = useRef();
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var _c = useState([]), filters = _c[0], setFilters = _c[1];
+    var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = useState([]), filters = _e[0], setFilters = _e[1];
     var isFiltersApplied = isFiltersAppliedProp !== null && isFiltersAppliedProp !== void 0 ? isFiltersAppliedProp : !!buildFilterQueryString()(filtersProp);
     var buttonColor = isFiltersApplied ? 'primary' : 'inherit';
     var togglePopup = function () {
@@ -44,19 +45,19 @@ var AttributesFiltersButton = function (_a) {
     }, [onClear]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Button, { "data-reltio-id": dataReltioId, ref: buttonRef, color: buttonColor, classes: {
-                root: styles.triggerButton,
+                root: classNames(styles.triggerButton, classes === null || classes === void 0 ? void 0 : classes.triggerButton),
                 textPrimary: styles.changedFiltersIndicator
             }, onClick: togglePopup },
-            React.createElement(FilterIcon, { color: buttonColor })),
-        React.createElement(Popover, { open: isOpen, classes: { paper: classNames(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: buttonRef.current, onClose: togglePopup, anchorOrigin: {
+            React.createElement(ButtonIcon, { color: buttonColor })),
+        React.createElement(Popover, { open: isOpen, classes: { paper: classNames(styles.popupContent, classes === null || classes === void 0 ? void 0 : classes.filterPopup) }, anchorEl: (_b = popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) !== null && _b !== void 0 ? _b : buttonRef.current, onClose: togglePopup, anchorOrigin: {
                 vertical: 'bottom',
-                horizontal: 'right'
+                horizontal: (popoverAnchorRef === null || popoverAnchorRef === void 0 ? void 0 : popoverAnchorRef.current) ? 'left' : 'right'
             }, transformOrigin: {
                 vertical: 'top',
                 horizontal: 'left'
             } },
             React.createElement(React.Fragment, null,
-                React.createElement(Typography, { variant: "h6" }, i18n.text('Filter')),
+                React.createElement(Typography, { variant: "h6" }, title !== null && title !== void 0 ? title : i18n.text('Filter')),
                 React.createElement("div", { className: styles.filtersBuilderWrapper },
                     children,
                     React.createElement(AttributesFiltersBuilder, { attributesTypesGroups: attributesTypesGroups, attributesTypesGroupFilter: attributesTypesGroupFilter, filters: filters, onChange: setFilters, components: components, onFilterAttributeChange: onFilterAttributeChange, classes: classes })),

package/esm/AttributesFiltersButton/AttributesFiltersButton.test.js

@@ -242,4 +242,19 @@ describe('AttributesFiltersButton tests', function () {
             }
         });
     }); });
+    it('should use title if defined', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var title, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    title = 'TestTitle';
+                    user = setUp(__assign(__assign({}, defaultProps), { title: title })).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByText(title)).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/esm/EmptyState/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "small" | "root" | "root_small" | "embedded" | "full" | "textBox" | "secondaryText">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "text" | "small" | "root" | "embedded" | "root_small" | "full" | "textBox" | "secondaryText">;

package/esm/SearchInput/SearchInput.d.ts

@@ -7,6 +7,7 @@ type Props = InputProps & {
     rootRef?: React.MutableRefObject<HTMLInputElement>;
     height: number;
     placeholder?: string;
+    endAdornmentContent?: React.ReactNode;
 };
-declare const _default: React.MemoExoticComponent<({ value, autofocus, onSearch, rootRef, classes, height, placeholder, ...otherProps }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ value, autofocus, onSearch, rootRef, classes, height, placeholder, endAdornmentContent, ...otherProps }: Props) => JSX.Element>;
 export default _default;

package/esm/SearchInput/SearchInput.js

@@ -32,13 +32,15 @@ import { getValue } from '../helpers/events';
 import { SmallIconButton } from '../SmallIconButton';
 import { useStyles } from './styles';
 var SearchInput = function (_a) {
-    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? identity : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, _d = _a.placeholder, placeholder = _d === void 0 ? i18n.text('Search') : _d, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height", "placeholder"]);
+    var value = _a.value, autofocus = _a.autofocus, _b = _a.onSearch, onSearch = _b === void 0 ? identity : _b, rootRef = _a.rootRef, _c = _a.classes, classes = _c === void 0 ? {} : _c, height = _a.height, _d = _a.placeholder, placeholder = _d === void 0 ? i18n.text('Search') : _d, endAdornmentContent = _a.endAdornmentContent, otherProps = __rest(_a, ["value", "autofocus", "onSearch", "rootRef", "classes", "height", "placeholder", "endAdornmentContent"]);
     var styles = useStyles({ height: height });
     var _e = useState(''), localValue = _e[0], setLocalValue = _e[1];
     var updateValue = pipe(tap(onSearch), setLocalValue);
     var clearValue = function () { return updateValue(''); };
     var inputValue = isNil(value) ? localValue : value;
     return (React.createElement(Input, __assign({ startAdornment: React.createElement(InputAdornment, { position: "start" },
-            React.createElement(SearchIcon, { className: styles.icon })), endAdornment: React.createElement(InputAdornment, { position: "end" }, inputValue.length > 0 && (React.createElement(SmallIconButton, { icon: CloseIcon, className: styles.clearButton, onClick: clearValue }))), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: classNames(styles.input, classes.input), root: classNames(styles.container, classes.root) }), placeholder: placeholder, value: inputValue, onChange: pipe(getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
+            React.createElement(SearchIcon, { className: styles.icon })), endAdornment: React.createElement(InputAdornment, { position: "end" },
+            inputValue.length > 0 && (React.createElement(SmallIconButton, { icon: CloseIcon, className: styles.clearButton, onClick: clearValue })),
+            endAdornmentContent), autoFocus: autofocus, classes: __assign(__assign({}, classes), { input: classNames(styles.input, classes.input), root: classNames(styles.container, classes.root) }), placeholder: placeholder, value: inputValue, onChange: pipe(getValue, updateValue), disableUnderline: true, ref: rootRef }, otherProps)));
 };
 export default memo(SearchInput);

package/esm/SearchInput/SearchInput.spec.js

@@ -9,51 +9,131 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import React from 'react';
-import { shallow, mount } from 'enzyme';
-import Input from '@mui/material/Input';
-import { SmallIconButton } from '../SmallIconButton';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import SearchInput from './SearchInput';
+import { getMuiIconByName } from '../test-utils';
 describe('SearchInput tests', function () {
+    var onSearch = jest.fn();
     var defaultProps = {
         value: '',
         autofocus: true,
-        onSearch: function () { },
+        onSearch: onSearch,
         height: 40
     };
-    it('should render all components', function () {
-        var component = mount(React.createElement(SearchInput, __assign({}, defaultProps)));
-        expect(component.find(Input)).toHaveLength(1);
-        expect(component.find('svg')).toHaveLength(1);
-        expect(component.find(Input).prop('placeholder')).toEqual('Search');
-    });
-    it('should call onSearch prop on change', function () {
-        var onSearch = jest.fn();
-        var component = shallow(React.createElement(SearchInput, __assign({}, defaultProps, { onSearch: onSearch })));
-        var input = component.find(Input);
-        input.simulate('change', { target: { value: 'test' } });
-        expect(onSearch).toBeCalledWith('test');
-    });
-    it('should call onSearch prop on clear input', function () {
-        var onSearch = jest.fn();
-        var component = mount(React.createElement(SearchInput, __assign({}, defaultProps, { onSearch: onSearch, value: 'test' })));
-        component.find(SmallIconButton).find('button').simulate('click');
-        expect(onSearch).toBeCalledWith('');
+    var setUp = function (props) {
+        if (props === void 0) { props = defaultProps; }
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(SearchInput, __assign({}, props))));
+    };
+    afterEach(function () {
+        jest.clearAllMocks();
     });
-    it('should not fail when onSearch prop is undefined', function () {
-        var component = shallow(React.createElement(SearchInput, __assign({}, defaultProps)));
-        var input = component.find(Input);
-        input.simulate('change', { target: { value: 'test' } });
+    it('should render all components', function () {
+        setUp();
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
+        expect(screen.getByPlaceholderText('Search')).toBeInTheDocument();
+        expect(getMuiIconByName('Search')).toBeInTheDocument();
     });
-    it('should forward props to Input', function () {
-        var onKeyDown = jest.fn();
-        var onFocus = jest.fn();
-        var component = shallow(React.createElement(SearchInput, __assign({}, defaultProps, { fullWidth: true, onFocus: onFocus, onKeyDown: onKeyDown })));
-        var input = component.find(Input);
-        expect(input.props()).toMatchObject({
-            fullWidth: true,
-            onKeyDown: onKeyDown,
-            onFocus: onFocus
+    it('should call onSearch prop on change', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, searchValue;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp(__assign(__assign({}, defaultProps), { value: null })).user;
+                    searchValue = 'searchValue';
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), searchValue)];
+                case 1:
+                    _a.sent();
+                    expect(onSearch).toHaveBeenLastCalledWith(searchValue);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should call onSearch prop on clear input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp(__assign(__assign({}, defaultProps), { value: 'test' })).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    expect(onSearch).toBeCalledWith('');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not fail when onSearch prop is undefined', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'q')];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should forward props to Input', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var onKeyDown, onFocus, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    onKeyDown = jest.fn();
+                    onFocus = jest.fn();
+                    user = setUp(__assign(__assign({}, defaultProps), { fullWidth: true, onKeyDown: onKeyDown, onFocus: onFocus })).user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'q')];
+                case 1:
+                    _a.sent();
+                    expect(onKeyDown).toHaveBeenCalled();
+                    expect(onFocus).toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
         });
+    }); });
+    it('should use provided endAdornmentContent', function () {
+        var endAdornmentContent = React.createElement("div", null, "testContent");
+        setUp(__assign(__assign({}, defaultProps), { endAdornmentContent: endAdornmentContent }));
+        expect(screen.getByText('testContent')).toBeInTheDocument();
     });
 });

package/esm/types/index.d.ts

@@ -135,6 +135,7 @@ export type AttributesFilterComponentsClasses = {
     filterSelectorContainer?: string;
     actionsContainer?: string;
     filterPopup?: string;
+    triggerButton?: string;
 };
 export declare enum ActionButtonMode {
     iconButton = "iconButton",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1938",
+  "version": "1.4.1940",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1852",
+    "@reltio/mdm-sdk": "^1.4.1854",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
     "d3-hierarchy": "^2.0.0",