@reltio/components 1.4.2162 → 1.4.2164

package/AddressAutocompleteEditor/AddressAutocompleteEditor.js

@@ -56,31 +56,43 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import React, { useState, useCallback, useMemo, useContext, useEffect } from 'react';
 import classnames from 'classnames';
-import { identity } from 'ramda';
+import { identity, path } from 'ramda';
 import { useContextSelector } from '@fluentui/react-context-selector';
 import Autocomplete from '@mui/material/Autocomplete';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
+import Button from '@mui/material/Button';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import LinearProgress from '@mui/material/LinearProgress';
-import Typography from '@mui/material/Typography';
+import ListItemButton from '@mui/material/ListItemButton';
 import TextField from '@mui/material/TextField';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
+import Typography from '@mui/material/Typography';
 import i18n from 'ui-i18n';
-import { searchAddresses, fetchAddressDetails, debounce, AddressType } from '@reltio/mdm-sdk';
+import { searchAddresses, fetchAddressDetails, debounce, AddressType, isEmptyValue } from '@reltio/mdm-sdk';
 import { AddressAutoCompleteContext } from '../contexts/AutoCompleteContext';
 import { AttributeValueContext } from '../contexts/AttributeValueContext';
-import { convertSearchResultToOption, getOptionLabel, isOptionEqualToValue } from './helpers';
+import { convertSearchResultToOption, getOptionLabel, isMinLength, isOptionEqualToValue } from './helpers';
 import { useSafePromise } from '../hooks/useSafePromise';
+import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
+import { EmptySearchResult } from '../EmptySearchResult';
 import styles from './AddressAutocompleteEditor.module.css';
 export var INPUT_DEBOUNCE_INTERVAL = 400;
+var EMPTY_OPTION_ID = 'empty_option_id';
 export var AddressAutocompleteEditor = function (_a) {
     var _b = _a.value, value = _b === void 0 ? '' : _b, onChange = _a.onChange, InputProps = _a.InputProps, _c = _a.fullWidth, fullWidth = _c === void 0 ? true : _c, otherProps = __rest(_a, ["value", "onChange", "InputProps", "fullWidth"]);
     var _d = useState(value), inputValue = _d[0], setInputValue = _d[1];
-    var _e = useState([]), options = _e[0], setOptions = _e[1];
-    var _f = useState(false), loading = _f[0], setLoading = _f[1];
-    var _g = useState(false), detailsLoading = _g[0], setDetailsLoading = _g[1];
+    var _e = useState(null), options = _e[0], setOptions = _e[1];
+    var _f = useState([]), previousOptions = _f[0], setPreviousOptions = _f[1];
+    var _g = useState(false), loading = _g[0], setLoading = _g[1];
     var _h = useState(false), open = _h[0], setOpen = _h[1];
     var searchSafePromise = useSafePromise();
     var detailsSafePromise = useSafePromise();
@@ -91,45 +103,61 @@ export var AddressAutocompleteEditor = function (_a) {
     var countries = autocompleteSettings.countries, countryNames = autocompleteSettings.countryNames, limit = autocompleteSettings.limit, minSearchTextLen = autocompleteSettings.minSearchTextLen;
     var countriesHash = countries.toString();
     useEffect(function () {
-        setOptions([]);
+        setOptions(null);
+        setPreviousOptions([]);
     }, [countriesHash]);
-    var fetchAddressSuggestions = useCallback(function (searchTerm) { return __awaiter(void 0, void 0, void 0, function () {
-        var results, convertedOptions, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+    var fetchAddressSuggestions = useCallback(function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+        var results, _c, convertedOptions, error_1;
+        var searchTerm = _b.searchTerm, container = _b.container;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0:
                     setLoading(true);
-                    _a.label = 1;
+                    _d.label = 1;
                 case 1:
-                    _a.trys.push([1, 3, 4, 5]);
-                    return [4 /*yield*/, searchSafePromise(searchAddresses({
-                            text: searchTerm,
-                            limit: limit,
-                            countries: countries
-                        }))];
+                    _d.trys.push([1, 6, 7, 8]);
+                    if (!container) return [3 /*break*/, 3];
+                    return [4 /*yield*/, searchSafePromise(searchAddresses({ container: container }))];
                 case 2:
-                    results = _a.sent();
+                    _c = _d.sent();
+                    return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, searchSafePromise(searchAddresses({
+                        text: searchTerm,
+                        limit: limit,
+                        countries: countries
+                    }))];
+                case 4:
+                    _c = _d.sent();
+                    _d.label = 5;
+                case 5:
+                    results = _c;
                     convertedOptions = results.map(convertSearchResultToOption);
+                    if (container) {
+                        setPreviousOptions(options || []);
+                    }
+                    else {
+                        setPreviousOptions([]);
+                    }
                     setOptions(convertedOptions);
-                    return [3 /*break*/, 5];
-                case 3:
-                    error_1 = _a.sent();
+                    return [3 /*break*/, 8];
+                case 6:
+                    error_1 = _d.sent();
                     console.warn('Error fetching address suggestions:', error_1);
                     setOptions([]);
-                    return [3 /*break*/, 5];
-                case 4:
+                    return [3 /*break*/, 8];
+                case 7:
                     setLoading(false);
                     return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
+                case 8: return [2 /*return*/];
             }
         });
-    }); }, [countries, limit, searchSafePromise]);
+    }); }, [countries, limit, searchSafePromise, options]);
     var fetchAddressDetailsById = useCallback(function (addressId) { return __awaiter(void 0, void 0, void 0, function () {
         var error_2;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    setDetailsLoading(true);
+                    setLoading(true);
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, 4, 5]);
@@ -138,9 +166,9 @@ export var AddressAutocompleteEditor = function (_a) {
                 case 3:
                     error_2 = _a.sent();
                     console.warn('Error fetching address details:', error_2);
-                    return [2 /*return*/, null];
+                    return [3 /*break*/, 5];
                 case 4:
-                    setDetailsLoading(false);
+                    setLoading(false);
                     return [7 /*endfinally*/];
                 case 5: return [2 /*return*/];
             }
@@ -149,13 +177,17 @@ export var AddressAutocompleteEditor = function (_a) {
     var debouncedFetchAddressSuggestions = useCallback(debounce(fetchAddressSuggestions, INPUT_DEBOUNCE_INTERVAL), [
         fetchAddressSuggestions
     ]);
-    var handleInputChange = useCallback(function (event, newInputValue) {
+    var handleInputChange = useCallback(function (event, newInputValue, reason) {
+        if (reason === 'reset') {
+            return;
+        }
         setInputValue(newInputValue);
-        if (newInputValue.trim().length >= minSearchTextLen) {
-            debouncedFetchAddressSuggestions(newInputValue);
+        if (isMinLength(newInputValue, minSearchTextLen)) {
+            debouncedFetchAddressSuggestions({ searchTerm: newInputValue });
         }
         else {
             setOptions([]);
+            setPreviousOptions([]);
         }
     }, [debouncedFetchAddressSuggestions, minSearchTextLen]);
     var handleOptionSelect = useCallback(function (event, selectedOption) { return __awaiter(void 0, void 0, void 0, function () {
@@ -165,9 +197,11 @@ export var AddressAutocompleteEditor = function (_a) {
                 case 0:
                     if (!selectedOption) return [3 /*break*/, 3];
                     if (selectedOption.type === AddressType.Container) {
+                        fetchAddressSuggestions({ container: selectedOption.id });
                         return [2 /*return*/];
                     }
                     setInputValue(selectedOption.fullAddress);
+                    setPreviousOptions([]);
                     if (onChange) {
                         onChange(selectedOption.fullAddress);
                     }
@@ -189,35 +223,69 @@ export var AddressAutocompleteEditor = function (_a) {
                 case 4: return [2 /*return*/];
             }
         });
-    }); }, [fetchAddressDetailsById, onChange, onPopulateAttributes, attributeTypeUri, valueUri]);
+    }); }, [fetchAddressDetailsById, fetchAddressSuggestions, onChange, onPopulateAttributes, attributeTypeUri, valueUri]);
+    var handleFocus = useCallback(function () {
+        if (!options && isMinLength(inputValue, minSearchTextLen)) {
+            debouncedFetchAddressSuggestions({ searchTerm: inputValue });
+        }
+        setOpen(true);
+    }, [debouncedFetchAddressSuggestions, inputValue, minSearchTextLen, options]);
     var handleBlur = useCallback(function () {
         setOpen(false);
     }, []);
     var renderOption = useCallback(function (props, option) {
         var _a;
+        if (option.id === EMPTY_OPTION_ID) {
+            return null;
+        }
         var isContainer = option.type === AddressType.Container;
-        return (React.createElement(ListItem, __assign({}, props, { className: classnames(styles.option, (_a = {}, _a[styles.containerOption] = isContainer, _a)) }),
-            React.createElement(ListItemText, { primary: option.fullAddress, primaryTypographyProps: { variant: 'body1' }, secondaryTypographyProps: { variant: 'body2', color: 'textSecondary' } }),
-            isContainer && (React.createElement("div", null,
-                React.createElement(ArrowForwardIosIcon, null)))));
-    }, []);
-    var renderInput = useCallback(function (props) { return (React.createElement(TextField, __assign({}, otherProps, props, { placeholder: i18n.text('Start typing to autocomplete'), fullWidth: fullWidth, onBlur: handleBlur, InputProps: __assign(__assign(__assign({}, InputProps), props.InputProps), { endAdornment: React.createElement(React.Fragment, null, props.InputProps.endAdornment) }) }))); }, [fullWidth, handleBlur, InputProps, otherProps]);
+        return (React.createElement(ListItemButton, __assign({}, props, { className: classnames(styles.option, (_a = {}, _a[styles.containerOption] = isContainer, _a)), component: "li", disabled: loading }),
+            React.createElement(ExpandedValueTooltip, { value: option.fullAddress },
+                React.createElement(Typography, { variant: "body2", className: styles.optionText }, option.fullAddress)),
+            isContainer && (React.createElement("div", { className: styles.containerForwardIcon },
+                React.createElement(ChevronRightIcon, null)))));
+    }, [loading]);
+    var renderInput = useCallback(function (props) {
+        var _a;
+        return (React.createElement(TextField, __assign({}, props, otherProps, { placeholder: i18n.text('Start typing to autocomplete'), fullWidth: fullWidth, onBlur: handleBlur, InputProps: __assign(__assign(__assign({}, props.InputProps), InputProps), { classes: __assign(__assign({}, InputProps === null || InputProps === void 0 ? void 0 : InputProps.classes), { root: classnames(styles.textFieldRoot, path(['classes', 'root'], InputProps)), input: classnames(styles.textFieldInput, path(['classes', 'input'], InputProps)), underline: classnames((_a = {}, _a[styles.underline] = isEmptyValue(value), _a)) }) }) })));
+    }, [fullWidth, handleBlur, InputProps, otherProps, value]);
+    var handleBackToAllSearchResults = useCallback(function () {
+        setOptions(previousOptions);
+        setPreviousOptions([]);
+    }, [previousOptions]);
     var renderListbox = useCallback(React.forwardRef(function ListboxComponent(props, ref) {
-        return (React.createElement(React.Fragment, null,
-            detailsLoading && React.createElement(LinearProgress, { color: "primary" }),
-            React.createElement("ul", __assign({ ref: ref }, props),
-                React.createElement("li", { className: styles.countryHeader },
-                    React.createElement(Typography, { variant: "body2", fontWeight: 500 },
+        var onMouseDown = props.onMouseDown, restProps = __rest(props, ["onMouseDown"]);
+        var shouldShowEmptyState = (options === null || options === void 0 ? void 0 : options.length) === 0 && isMinLength(inputValue, minSearchTextLen) && !loading;
+        var shouldShowMinLengthMessage = !isMinLength(inputValue, minSearchTextLen) && !loading;
+        var shouldShowOptions = (options === null || options === void 0 ? void 0 : options.length) > 0 && !shouldShowMinLengthMessage;
+        var countriesLabel = countryNames.join(', ');
+        return (React.createElement("div", { onMouseDown: onMouseDown },
+            loading && React.createElement(LinearProgress, { className: styles.loadingProgress, color: "primary" }),
+            React.createElement("div", { className: styles.countryHeader },
+                React.createElement(ExpandedValueTooltip, { value: countriesLabel },
+                    React.createElement(Typography, { variant: "body2", color: "textSecondary", className: styles.headerCountries },
                         i18n.text('Searching in'),
                         ": ",
-                        countryNames.join(', ')),
-                    React.createElement(Typography, { variant: "caption", color: "textSecondary" }, i18n.text('To search in a different country, update the Country field'))),
-                props.children)));
-    }), [detailsLoading, countryNames]);
+                        countriesLabel)),
+                React.createElement(Typography, { variant: "caption", color: "textSecondary", className: styles.headerHelper }, i18n.text('To search in a different country, update the Country field'))),
+            React.createElement("ul", __assign({ ref: ref }, restProps, { className: styles.listbox }),
+                shouldShowMinLengthMessage && (React.createElement("li", { className: styles.emptyState },
+                    React.createElement(Typography, { variant: "body2", color: "textSecondary" }, i18n.text('Please enter at least ${minSearchTextLen} characters', {
+                        minSearchTextLen: minSearchTextLen
+                    })))),
+                shouldShowEmptyState && (React.createElement("li", { className: styles.emptyState },
+                    React.createElement(EmptySearchResult, { className: styles.noData }))),
+                shouldShowOptions && props.children),
+            previousOptions.length > 0 && (React.createElement("div", { className: styles.backToAllResults },
+                React.createElement(Button, { variant: "text", onClick: handleBackToAllSearchResults, color: "primary", disabled: loading, classes: { root: styles.backToAllResultsButton } }, i18n.text('Back to all results'))))));
+    }), [loading, countryNames, previousOptions.length, (options || []).length, inputValue, minSearchTextLen]);
     var openOptionsList = useCallback(function (_event) {
         setOpen(true);
     }, []);
-    return (React.createElement(Autocomplete, { className: styles.root, open: open, onOpen: openOptionsList, value: inputValue, onChange: handleOptionSelect, inputValue: inputValue, onInputChange: handleInputChange, options: options, getOptionLabel: getOptionLabel, loading: loading, renderInput: renderInput, renderOption: renderOption, renderGroup: function (params) { return params.children; }, ListboxComponent: renderListbox, noOptionsText: inputValue.trim().length < minSearchTextLen
-            ? i18n.text('Please enter at least {{minSearchTextLen}} characters', { minSearchTextLen: minSearchTextLen })
-            : i18n.text('No addresses found'), loadingText: i18n.text('Searching addresses...'), filterOptions: identity, isOptionEqualToValue: isOptionEqualToValue, popupIcon: null, clearIcon: null, freeSolo: true, "data-reltio-id": "address-autocomplete-editor" }));
+    var displayOptions = useMemo(function () {
+        return __spreadArray([{ id: EMPTY_OPTION_ID, type: AddressType.Address, fullAddress: '' }], (options || []), true);
+    }, [options]);
+    return (React.createElement(Autocomplete, { className: styles.root, open: open, onOpen: openOptionsList, value: inputValue, onChange: handleOptionSelect, inputValue: inputValue, onInputChange: handleInputChange, onFocus: handleFocus, options: displayOptions, getOptionLabel: getOptionLabel, renderInput: renderInput, renderOption: renderOption, renderGroup: function (params) { return params.children; }, ListboxComponent: renderListbox, classes: {
+            paper: styles.popupContainer
+        }, filterOptions: identity, isOptionEqualToValue: isOptionEqualToValue, popupIcon: null, clearIcon: null, freeSolo: true, "data-reltio-id": "address-autocomplete-editor" }));
 };

package/AddressAutocompleteEditor/AddressAutocompleteEditor.module.css.js

@@ -1,9 +1,9 @@
-const styles = {"root":"AddressAutocompleteEditor-root--1FDrD","countryHeader":"AddressAutocompleteEditor-countryHeader--k5tRp","loadingContainer":"AddressAutocompleteEditor-loadingContainer--j-U45","option":"AddressAutocompleteEditor-option--3hah-","containerOption":"AddressAutocompleteEditor-containerOption--aLgUn","listbox":"AddressAutocompleteEditor-listbox--cZCpg"};
+const styles = {"root":"AddressAutocompleteEditor-root--1FDrD","textFieldRoot":"AddressAutocompleteEditor-textFieldRoot--udDvK","textFieldInput":"AddressAutocompleteEditor-textFieldInput--Xf-Cf","underline":"AddressAutocompleteEditor-underline--ZNYqN","countryHeader":"AddressAutocompleteEditor-countryHeader--k5tRp","headerCountries":"AddressAutocompleteEditor-headerCountries--WoYl5","headerHelper":"AddressAutocompleteEditor-headerHelper--XPT5S","loadingState":"AddressAutocompleteEditor-loadingState--PRwRK","emptyState":"AddressAutocompleteEditor-emptyState--s8M04","option":"AddressAutocompleteEditor-option--3hah-","popupContainer":"AddressAutocompleteEditor-popupContainer--360Kv","listbox":"AddressAutocompleteEditor-listbox--cZCpg","optionText":"AddressAutocompleteEditor-optionText--IcsBw","containerForwardIcon":"AddressAutocompleteEditor-containerForwardIcon--Ke5rd","backToAllResults":"AddressAutocompleteEditor-backToAllResults--2wqzi","backToAllResultsButton":"AddressAutocompleteEditor-backToAllResultsButton--T5R-3","loadingProgress":"AddressAutocompleteEditor-loadingProgress--AfWtc"};
 if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.AddressAutocompleteEditor-root--1FDrD{width:100%}.AddressAutocompleteEditor-countryHeader--k5tRp{background-color:rgba(0,0,0,.04);border-bottom:1px solid rgba(0,0,0,.12);font-weight:500;padding:8px 16px}.AddressAutocompleteEditor-loadingContainer--j-U45{align-items:center;display:flex;justify-content:center;padding:16px}.AddressAutocompleteEditor-option--3hah-{padding:8px 16px}.AddressAutocompleteEditor-containerOption--aLgUn:hover{background-color:rgba(0,0,0,.04)!important}.AddressAutocompleteEditor-listbox--cZCpg{padding:0}`;
+    style.innerHTML = `.AddressAutocompleteEditor-root--1FDrD{width:100%}.AddressAutocompleteEditor-root--1FDrD .AddressAutocompleteEditor-textFieldRoot--udDvK{font-size:14px;padding:0}:is(.AddressAutocompleteEditor-root--1FDrD .AddressAutocompleteEditor-textFieldRoot--udDvK) .AddressAutocompleteEditor-textFieldInput--Xf-Cf{height:19px;line-height:19px;padding:10px 12px 11px!important}:is(.AddressAutocompleteEditor-root--1FDrD .AddressAutocompleteEditor-underline--ZNYqN):before{display:none}.AddressAutocompleteEditor-countryHeader--k5tRp{padding:12px 12px 8px}.AddressAutocompleteEditor-countryHeader--k5tRp .AddressAutocompleteEditor-headerCountries--WoYl5{font-size:12px;letter-spacing:0;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.AddressAutocompleteEditor-countryHeader--k5tRp .AddressAutocompleteEditor-headerHelper--XPT5S{font-size:10px;letter-spacing:0}.AddressAutocompleteEditor-loadingState--PRwRK{padding:16px;text-align:center}.AddressAutocompleteEditor-emptyState--s8M04{padding:8px}.AddressAutocompleteEditor-option--3hah-{padding:4px 12px}.AddressAutocompleteEditor-popupContainer--360Kv{min-width:170px}.AddressAutocompleteEditor-listbox--cZCpg{margin:0;max-height:300px;overflow-y:auto;padding:0}.AddressAutocompleteEditor-listbox--cZCpg li:first-child{border-top:1px solid rgba(0,0,0,.12);padding-top:7px}.AddressAutocompleteEditor-optionText--IcsBw{font-size:14px;letter-spacing:.24px;line-height:16px;overflow:hidden;padding:4px 0;text-overflow:ellipsis;white-space:nowrap;width:100%}.AddressAutocompleteEditor-containerForwardIcon--Ke5rd{height:24px}.AddressAutocompleteEditor-backToAllResults--2wqzi{border-top:1px solid rgba(0,0,0,.12)}.AddressAutocompleteEditor-backToAllResultsButton--T5R-3{letter-spacing:0}.AddressAutocompleteEditor-loadingProgress--AfWtc{left:0;position:absolute;right:0;top:0}`;
     head.appendChild(style);
 }
 export default styles;

package/AddressAutocompleteEditor/AddressAutocompleteEditor.test.js

@@ -93,6 +93,14 @@ var mockAddressSearchResults = [
         Description: 'Jose Malhoa 22'
     }
 ];
+var mockAddressContainerSearchResults = [
+    {
+        Id: 'container-1',
+        Type: AddressType.Container,
+        Text: 'Container Option',
+        Description: 'Container'
+    }
+];
 var mockAddressDetails = [
     {
         Id: 'address-1',
@@ -282,15 +290,34 @@ describe('AddressAutocompleteEditor', function () {
                     return [4 /*yield*/, user.paste('Lisbon')];
                 case 2:
                     _a.sent();
-                    expect(screen.getByText('Searching addresses...')).toBeInTheDocument();
+                    expect(screen.getByRole('progressbar')).toBeInTheDocument();
                     resolveSearch([]);
-                    return [4 /*yield*/, waitForElementToBeRemoved(function () { return screen.queryByText('Searching addresses...'); })];
+                    return [4 /*yield*/, waitForElementToBeRemoved(function () { return screen.queryByRole('progressbar'); })];
                 case 3:
                     _a.sent();
                     return [2 /*return*/];
             }
         });
     }); });
+    it('should show empty state when no options are found', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, input;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    mockSearchAddresses.mockResolvedValue([]);
+                    user = setUp().user;
+                    input = screen.getByRole('combobox');
+                    return [4 /*yield*/, user.click(input)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.paste('Lisbon')];
+                case 2:
+                    _a.sent();
+                    expect(screen.getByText('No results found')).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     describe('Address search', function () {
         it('should fetch address suggestions when user types minimum characters', function () { return __awaiter(void 0, void 0, void 0, function () {
             var user, input;
@@ -378,9 +405,7 @@ describe('AddressAutocompleteEditor', function () {
                 switch (_a.label) {
                     case 0:
                         onChange = jest.fn();
-                        mockSearchAddresses.mockResolvedValue([
-                            { Id: 'container-1', Type: AddressType.Container, Text: 'Container Option', Description: 'Container' }
-                        ]);
+                        mockSearchAddresses.mockResolvedValue(mockAddressContainerSearchResults);
                         user = setUp({ onChange: onChange }).user;
                         input = screen.getByRole('combobox');
                         return [4 /*yield*/, user.click(input)];
@@ -455,6 +480,76 @@ describe('AddressAutocompleteEditor', function () {
                 }
             });
         }); });
+        it('should request address list for container options', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onChange, user, input, option;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onChange = jest.fn();
+                        mockSearchAddresses.mockResolvedValue(mockAddressContainerSearchResults);
+                        user = setUp({ onChange: onChange }).user;
+                        input = screen.getByRole('combobox');
+                        return [4 /*yield*/, user.click(input)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.paste('Lisbon')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.getByText('Container Option')).toBeInTheDocument();
+                        expect(mockSearchAddresses).toHaveBeenCalledWith({
+                            text: 'Lisbon',
+                            limit: 10,
+                            countries: ['PT', 'US']
+                        });
+                        mockSearchAddresses.mockReset();
+                        mockSearchAddresses.mockResolvedValue(mockAddressSearchResults);
+                        option = screen.getByText('Container Option');
+                        return [4 /*yield*/, user.click(option)];
+                    case 3:
+                        _a.sent();
+                        expect(mockSearchAddresses).toHaveBeenCalledWith({
+                            container: 'container-1'
+                        });
+                        expect(screen.getByText('Avenida Jose Malhoa 22, Lisbon')).toBeInTheDocument();
+                        expect(screen.queryByText('Container Option')).not.toBeInTheDocument();
+                        expect(onChange).not.toHaveBeenCalled();
+                        expect(mockFetchAddressDetails).not.toHaveBeenCalled();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should back to all search results after selecting container option', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onChange, user, input, option;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onChange = jest.fn();
+                        mockSearchAddresses.mockResolvedValue(mockAddressContainerSearchResults);
+                        user = setUp({ onChange: onChange }).user;
+                        input = screen.getByRole('combobox');
+                        return [4 /*yield*/, user.click(input)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.paste('Lisbon')];
+                    case 2:
+                        _a.sent();
+                        expect(screen.queryByText('Back to all results')).not.toBeInTheDocument();
+                        mockSearchAddresses.mockReset();
+                        mockSearchAddresses.mockResolvedValue(mockAddressSearchResults);
+                        option = screen.getByText('Container Option');
+                        return [4 /*yield*/, user.click(option)];
+                    case 3:
+                        _a.sent();
+                        expect(screen.getByText('Back to all results')).toBeInTheDocument();
+                        return [4 /*yield*/, user.click(screen.getByText('Back to all results'))];
+                    case 4:
+                        _a.sent();
+                        expect(screen.queryByText('Back to all results')).not.toBeInTheDocument();
+                        expect(screen.getByText('Container Option')).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
     describe('Autocomplete settings', function () {
         it('should use default autocomplete settings, when no settings from metadata', function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -506,6 +601,7 @@ describe('AddressAutocompleteEditor', function () {
                     case 2:
                         _a.sent();
                         expect(mockSearchAddresses).not.toHaveBeenCalled();
+                        expect(screen.getByText('Please enter at least 3 characters')).toBeInTheDocument();
                         return [4 /*yield*/, user.paste('sbon')];
                     case 3:
                         _a.sent();

package/AddressAutocompleteEditor/helpers.d.ts

@@ -8,3 +8,4 @@ export type AddressOption = {
 export declare const convertSearchResultToOption: (result: AddressSearchResult) => AddressOption;
 export declare const getOptionLabel: (option: AddressOption | string) => string;
 export declare const isOptionEqualToValue: (option: AddressOption, value: string) => boolean;
+export declare const isMinLength: (value: string, minLength: number) => boolean;

package/AddressAutocompleteEditor/helpers.js

@@ -16,3 +16,6 @@ export var isOptionEqualToValue = function (option, value) {
     }
     return option.fullAddress === value;
 };
+export var isMinLength = function (value, minLength) {
+    return (value === null || value === void 0 ? void 0 : value.trim().length) >= minLength;
+};

package/FacetGroup/FacetGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    children?: React.ReactNode;
+    title?: string;
+};
+export declare const FacetGroup: ({ children, title }: Props) => React.JSX.Element;
+export {};

package/FacetGroup/FacetGroup.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FacetGroupTitle } from '../FacetGroupTitle';
+import styles from './FacetGroup.module.css';
+export var FacetGroup = function (_a) {
+    var children = _a.children, _b = _a.title, title = _b === void 0 ? '' : _b;
+    return (React.createElement("div", { className: styles.facetGroupContainer },
+        React.createElement(FacetGroupTitle, { title: title }),
+        children));
+};

package/FacetGroup/FacetGroup.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"facetGroupContainer":"FacetGroup-facetGroupContainer--r4EGm"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.FacetGroup-facetGroupContainer--r4EGm{display:flex;flex-direction:column;flex-shrink:0}.FacetGroup-facetGroupContainer--r4EGm+.FacetGroup-facetGroupContainer--r4EGm,.FacetGroup-facetGroupContainer--r4EGm+hr{margin-top:8px}`;
+    head.appendChild(style);
+}
+export default styles;

package/FacetGroup/index.d.ts

@@ -0,0 +1 @@
+export { FacetGroup } from './FacetGroup';

package/FacetGroup/index.js

@@ -0,0 +1 @@
+export { FacetGroup } from './FacetGroup';

package/FacetGroupTitle/FacetGroupTitle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    title?: string;
+    iconSrc?: string;
+    leftIcon?: React.ReactNode;
+};
+export declare const FacetGroupTitle: ({ title, iconSrc, leftIcon }: Props) => React.JSX.Element;
+export {};

package/FacetGroupTitle/FacetGroupTitle.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Avatar from '@mui/material/Avatar';
+import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
+import styles from './FacetGroupTitle.module.css';
+export var FacetGroupTitle = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.iconSrc, iconSrc = _c === void 0 ? '' : _c, leftIcon = _a.leftIcon;
+    return (React.createElement("div", { className: styles.titleBox },
+        React.createElement("div", { className: styles.title },
+            leftIcon && React.createElement("div", { className: styles.leftIcon }, leftIcon),
+            iconSrc && React.createElement(Avatar, { src: iconSrc, className: styles.avatar }),
+            React.createElement(ExpandedValueTooltip, { value: title },
+                React.createElement("span", null, title)))));
+};

package/FacetGroupTitle/FacetGroupTitle.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"titleBox":"FacetGroupTitle-titleBox--yg91y","title":"FacetGroupTitle-title--6MrZT","leftIcon":"FacetGroupTitle-leftIcon--ts7l3","avatar":"FacetGroupTitle-avatar--dgaa0"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.FacetGroupTitle-titleBox--yg91y{align-items:center;display:flex;flex-direction:row;flex-shrink:0;justify-content:space-between;line-height:24px;padding-bottom:8px;padding-top:12px}.FacetGroupTitle-title--6MrZT{align-items:center;color:rgba(0,0,0,.87);display:flex;flex-grow:1;font-size:16px;font-weight:500;letter-spacing:.15px;overflow:hidden;padding-left:16px}.FacetGroupTitle-leftIcon--ts7l3{flex-shrink:0;margin-right:20px}.FacetGroupTitle-avatar--dgaa0{height:32px;margin-right:12px;width:32px}`;
+    head.appendChild(style);
+}
+export default styles;

package/FacetGroupTitle/index.d.ts

@@ -0,0 +1 @@
+export { FacetGroupTitle } from './FacetGroupTitle';

package/FacetGroupTitle/index.js

@@ -0,0 +1 @@
+export { FacetGroupTitle } from './FacetGroupTitle';

package/MoreAttributesButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dense" | "icon" | "subHeader" | "moreButton" | "buttonLabel" | "moreAttributes" | "popupContainer" | "moreAttributesPopup" | "noResultsCaptionContainer">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dense" | "icon" | "subHeader" | "moreButton" | "buttonLabel" | "popupContainer" | "moreAttributes" | "moreAttributesPopup" | "noResultsCaptionContainer">;

package/QuickFiltersEntityTypeFacet/QuickFiltersEntityTypeFacet.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { EntityTypeFacetDataItem } from '@reltio/mdm-sdk';
+type Props = {
+    items: EntityTypeFacetDataItem[];
+    maxRowCount?: number;
+    showAllItems?: boolean;
+    values?: string[];
+    onChange?: (values?: string[]) => void;
+    onViewMoreLess: () => void;
+    countFormatter?: (number: number) => string;
+};
+export declare const QuickFiltersEntityTypeFacet: ({ items, maxRowCount, showAllItems, values, onChange, onViewMoreLess, countFormatter }: Props) => React.JSX.Element;
+export {};

package/QuickFiltersEntityTypeFacet/QuickFiltersEntityTypeFacet.js

@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react';
+import { identity } from 'ramda';
+import { getGroupedEntityTypes } from '@reltio/mdm-sdk';
+import { ViewMoreToggle } from '../ViewMoreToggle';
+import { EmptySearchResult } from '../EmptySearchResult';
+import { EntityTypesFacetGroups } from './components/EntityTypesFacetGroups';
+import styles from './QuickFiltersEntityTypeFacet.module.css';
+var DEFAULT_ROW_COUNT = 7;
+export var QuickFiltersEntityTypeFacet = function (_a) {
+    var items = _a.items, _b = _a.maxRowCount, maxRowCount = _b === void 0 ? DEFAULT_ROW_COUNT : _b, showAllItems = _a.showAllItems, _c = _a.values, values = _c === void 0 ? [] : _c, _d = _a.onChange, onChange = _d === void 0 ? identity : _d, onViewMoreLess = _a.onViewMoreLess, countFormatter = _a.countFormatter;
+    var groups = useMemo(function () { return getGroupedEntityTypes(items); }, [items]);
+    var totalItems = groups.reduce(function (sum, group) { return sum + group.items.length; }, 0);
+    var needShowViewMoreButton = totalItems > maxRowCount;
+    return (React.createElement("div", { className: styles.container }, groups.length > 0 ? (React.createElement(React.Fragment, null,
+        React.createElement(EntityTypesFacetGroups, { groups: groups, values: values, maxRowCount: maxRowCount, onChange: onChange, showAll: showAllItems, countFormatter: countFormatter }),
+        needShowViewMoreButton && (React.createElement(ViewMoreToggle, { active: showAllItems, onClick: onViewMoreLess, className: styles.viewMoreLess })))) : (React.createElement(EmptySearchResult, { variant: "noData", className: styles.noData }))));
+};

package/QuickFiltersEntityTypeFacet/QuickFiltersEntityTypeFacet.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"container":"QuickFiltersEntityTypeFacet-container--dVdDy","noData":"QuickFiltersEntityTypeFacet-noData--y-9iH","viewMoreLess":"QuickFiltersEntityTypeFacet-viewMoreLess--xgmjA"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.QuickFiltersEntityTypeFacet-container--dVdDy{display:flex;flex-direction:column;flex-grow:1;font-size:13px;overflow:hidden}.QuickFiltersEntityTypeFacet-noData--y-9iH{margin-left:16px}.QuickFiltersEntityTypeFacet-viewMoreLess--xgmjA{padding-left:20px}`;
+    head.appendChild(style);
+}
+export default styles;

package/QuickFiltersEntityTypeFacet/components/EntityTypesFacetGroups/EntityTypesFacetGroups.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { EntityTypesGroup } from '../../types';
+type Props = {
+    groups: EntityTypesGroup[];
+    values: string[];
+    maxRowCount: number;
+    showAll: boolean;
+    onChange: (values: string[]) => void;
+    countFormatter?: (number: number) => string;
+};
+export declare const EntityTypesFacetGroups: ({ groups, values, maxRowCount, showAll, onChange, countFormatter }: Props) => React.JSX.Element;
+export {};