@reltio/components 1.4.2162 → 1.4.2163

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/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/cjs/AddressAutocompleteEditor/AddressAutocompleteEditor.js

@@ -80,6 +80,15 @@ 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));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -90,26 +99,29 @@ var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var react_context_selector_1 = require("@fluentui/react-context-selector");
 var Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
-var ListItem_1 = __importDefault(require("@mui/material/ListItem"));
-var ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var ChevronRight_1 = __importDefault(require("@mui/icons-material/ChevronRight"));
 var LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
-var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
 var TextField_1 = __importDefault(require("@mui/material/TextField"));
-var ArrowForwardIos_1 = __importDefault(require("@mui/icons-material/ArrowForwardIos"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var AutoCompleteContext_1 = require("../contexts/AutoCompleteContext");
 var AttributeValueContext_1 = require("../contexts/AttributeValueContext");
 var helpers_1 = require("./helpers");
 var useSafePromise_1 = require("../hooks/useSafePromise");
+var ExpandedValueTooltip_1 = require("../ExpandedValueTooltip");
+var EmptySearchResult_1 = require("../EmptySearchResult");
 var AddressAutocompleteEditor_module_css_1 = __importDefault(require("./AddressAutocompleteEditor.module.css"));
 exports.INPUT_DEBOUNCE_INTERVAL = 400;
+var EMPTY_OPTION_ID = 'empty_option_id';
 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 = (0, react_1.useState)(value), inputValue = _d[0], setInputValue = _d[1];
-    var _e = (0, react_1.useState)([]), options = _e[0], setOptions = _e[1];
-    var _f = (0, react_1.useState)(false), loading = _f[0], setLoading = _f[1];
-    var _g = (0, react_1.useState)(false), detailsLoading = _g[0], setDetailsLoading = _g[1];
+    var _e = (0, react_1.useState)(null), options = _e[0], setOptions = _e[1];
+    var _f = (0, react_1.useState)([]), previousOptions = _f[0], setPreviousOptions = _f[1];
+    var _g = (0, react_1.useState)(false), loading = _g[0], setLoading = _g[1];
     var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
     var searchSafePromise = (0, useSafePromise_1.useSafePromise)();
     var detailsSafePromise = (0, useSafePromise_1.useSafePromise)();
@@ -120,45 +132,61 @@ var AddressAutocompleteEditor = function (_a) {
     var countries = autocompleteSettings.countries, countryNames = autocompleteSettings.countryNames, limit = autocompleteSettings.limit, minSearchTextLen = autocompleteSettings.minSearchTextLen;
     var countriesHash = countries.toString();
     (0, react_1.useEffect)(function () {
-        setOptions([]);
+        setOptions(null);
+        setPreviousOptions([]);
     }, [countriesHash]);
-    var fetchAddressSuggestions = (0, react_1.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 = (0, react_1.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((0, mdm_sdk_1.searchAddresses)({
-                            text: searchTerm,
-                            limit: limit,
-                            countries: countries
-                        }))];
+                    _d.trys.push([1, 6, 7, 8]);
+                    if (!container) return [3 /*break*/, 3];
+                    return [4 /*yield*/, searchSafePromise((0, mdm_sdk_1.searchAddresses)({ container: container }))];
                 case 2:
-                    results = _a.sent();
+                    _c = _d.sent();
+                    return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, searchSafePromise((0, mdm_sdk_1.searchAddresses)({
+                        text: searchTerm,
+                        limit: limit,
+                        countries: countries
+                    }))];
+                case 4:
+                    _c = _d.sent();
+                    _d.label = 5;
+                case 5:
+                    results = _c;
                     convertedOptions = results.map(helpers_1.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 = (0, react_1.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]);
@@ -167,9 +195,9 @@ 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*/];
             }
@@ -178,13 +206,17 @@ var AddressAutocompleteEditor = function (_a) {
     var debouncedFetchAddressSuggestions = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(fetchAddressSuggestions, exports.INPUT_DEBOUNCE_INTERVAL), [
         fetchAddressSuggestions
     ]);
-    var handleInputChange = (0, react_1.useCallback)(function (event, newInputValue) {
+    var handleInputChange = (0, react_1.useCallback)(function (event, newInputValue, reason) {
+        if (reason === 'reset') {
+            return;
+        }
         setInputValue(newInputValue);
-        if (newInputValue.trim().length >= minSearchTextLen) {
-            debouncedFetchAddressSuggestions(newInputValue);
+        if ((0, helpers_1.isMinLength)(newInputValue, minSearchTextLen)) {
+            debouncedFetchAddressSuggestions({ searchTerm: newInputValue });
         }
         else {
             setOptions([]);
+            setPreviousOptions([]);
         }
     }, [debouncedFetchAddressSuggestions, minSearchTextLen]);
     var handleOptionSelect = (0, react_1.useCallback)(function (event, selectedOption) { return __awaiter(void 0, void 0, void 0, function () {
@@ -194,9 +226,11 @@ var AddressAutocompleteEditor = function (_a) {
                 case 0:
                     if (!selectedOption) return [3 /*break*/, 3];
                     if (selectedOption.type === mdm_sdk_1.AddressType.Container) {
+                        fetchAddressSuggestions({ container: selectedOption.id });
                         return [2 /*return*/];
                     }
                     setInputValue(selectedOption.fullAddress);
+                    setPreviousOptions([]);
                     if (onChange) {
                         onChange(selectedOption.fullAddress);
                     }
@@ -218,36 +252,70 @@ var AddressAutocompleteEditor = function (_a) {
                 case 4: return [2 /*return*/];
             }
         });
-    }); }, [fetchAddressDetailsById, onChange, onPopulateAttributes, attributeTypeUri, valueUri]);
+    }); }, [fetchAddressDetailsById, fetchAddressSuggestions, onChange, onPopulateAttributes, attributeTypeUri, valueUri]);
+    var handleFocus = (0, react_1.useCallback)(function () {
+        if (!options && (0, helpers_1.isMinLength)(inputValue, minSearchTextLen)) {
+            debouncedFetchAddressSuggestions({ searchTerm: inputValue });
+        }
+        setOpen(true);
+    }, [debouncedFetchAddressSuggestions, inputValue, minSearchTextLen, options]);
     var handleBlur = (0, react_1.useCallback)(function () {
         setOpen(false);
     }, []);
     var renderOption = (0, react_1.useCallback)(function (props, option) {
         var _a;
+        if (option.id === EMPTY_OPTION_ID) {
+            return null;
+        }
         var isContainer = option.type === mdm_sdk_1.AddressType.Container;
-        return (react_1.default.createElement(ListItem_1.default, __assign({}, props, { className: (0, classnames_1.default)(AddressAutocompleteEditor_module_css_1.default.option, (_a = {}, _a[AddressAutocompleteEditor_module_css_1.default.containerOption] = isContainer, _a)) }),
-            react_1.default.createElement(ListItemText_1.default, { primary: option.fullAddress, primaryTypographyProps: { variant: 'body1' }, secondaryTypographyProps: { variant: 'body2', color: 'textSecondary' } }),
-            isContainer && (react_1.default.createElement("div", null,
-                react_1.default.createElement(ArrowForwardIos_1.default, null)))));
-    }, []);
-    var renderInput = (0, react_1.useCallback)(function (props) { return (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, props, { placeholder: ui_i18n_1.default.text('Start typing to autocomplete'), fullWidth: fullWidth, onBlur: handleBlur, InputProps: __assign(__assign(__assign({}, InputProps), props.InputProps), { endAdornment: react_1.default.createElement(react_1.default.Fragment, null, props.InputProps.endAdornment) }) }))); }, [fullWidth, handleBlur, InputProps, otherProps]);
+        return (react_1.default.createElement(ListItemButton_1.default, __assign({}, props, { className: (0, classnames_1.default)(AddressAutocompleteEditor_module_css_1.default.option, (_a = {}, _a[AddressAutocompleteEditor_module_css_1.default.containerOption] = isContainer, _a)), component: "li", disabled: loading }),
+            react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: option.fullAddress },
+                react_1.default.createElement(Typography_1.default, { variant: "body2", className: AddressAutocompleteEditor_module_css_1.default.optionText }, option.fullAddress)),
+            isContainer && (react_1.default.createElement("div", { className: AddressAutocompleteEditor_module_css_1.default.containerForwardIcon },
+                react_1.default.createElement(ChevronRight_1.default, null)))));
+    }, [loading]);
+    var renderInput = (0, react_1.useCallback)(function (props) {
+        var _a;
+        return (react_1.default.createElement(TextField_1.default, __assign({}, props, otherProps, { placeholder: ui_i18n_1.default.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: (0, classnames_1.default)(AddressAutocompleteEditor_module_css_1.default.textFieldRoot, (0, ramda_1.path)(['classes', 'root'], InputProps)), input: (0, classnames_1.default)(AddressAutocompleteEditor_module_css_1.default.textFieldInput, (0, ramda_1.path)(['classes', 'input'], InputProps)), underline: (0, classnames_1.default)((_a = {}, _a[AddressAutocompleteEditor_module_css_1.default.underline] = (0, mdm_sdk_1.isEmptyValue)(value), _a)) }) }) })));
+    }, [fullWidth, handleBlur, InputProps, otherProps, value]);
+    var handleBackToAllSearchResults = (0, react_1.useCallback)(function () {
+        setOptions(previousOptions);
+        setPreviousOptions([]);
+    }, [previousOptions]);
     var renderListbox = (0, react_1.useCallback)(react_1.default.forwardRef(function ListboxComponent(props, ref) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            detailsLoading && react_1.default.createElement(LinearProgress_1.default, { color: "primary" }),
-            react_1.default.createElement("ul", __assign({ ref: ref }, props),
-                react_1.default.createElement("li", { className: AddressAutocompleteEditor_module_css_1.default.countryHeader },
-                    react_1.default.createElement(Typography_1.default, { variant: "body2", fontWeight: 500 },
+        var onMouseDown = props.onMouseDown, restProps = __rest(props, ["onMouseDown"]);
+        var shouldShowEmptyState = (options === null || options === void 0 ? void 0 : options.length) === 0 && (0, helpers_1.isMinLength)(inputValue, minSearchTextLen) && !loading;
+        var shouldShowMinLengthMessage = !(0, helpers_1.isMinLength)(inputValue, minSearchTextLen) && !loading;
+        var shouldShowOptions = (options === null || options === void 0 ? void 0 : options.length) > 0 && !shouldShowMinLengthMessage;
+        var countriesLabel = countryNames.join(', ');
+        return (react_1.default.createElement("div", { onMouseDown: onMouseDown },
+            loading && react_1.default.createElement(LinearProgress_1.default, { className: AddressAutocompleteEditor_module_css_1.default.loadingProgress, color: "primary" }),
+            react_1.default.createElement("div", { className: AddressAutocompleteEditor_module_css_1.default.countryHeader },
+                react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: countriesLabel },
+                    react_1.default.createElement(Typography_1.default, { variant: "body2", color: "textSecondary", className: AddressAutocompleteEditor_module_css_1.default.headerCountries },
                         ui_i18n_1.default.text('Searching in'),
                         ": ",
-                        countryNames.join(', ')),
-                    react_1.default.createElement(Typography_1.default, { variant: "caption", color: "textSecondary" }, ui_i18n_1.default.text('To search in a different country, update the Country field'))),
-                props.children)));
-    }), [detailsLoading, countryNames]);
+                        countriesLabel)),
+                react_1.default.createElement(Typography_1.default, { variant: "caption", color: "textSecondary", className: AddressAutocompleteEditor_module_css_1.default.headerHelper }, ui_i18n_1.default.text('To search in a different country, update the Country field'))),
+            react_1.default.createElement("ul", __assign({ ref: ref }, restProps, { className: AddressAutocompleteEditor_module_css_1.default.listbox }),
+                shouldShowMinLengthMessage && (react_1.default.createElement("li", { className: AddressAutocompleteEditor_module_css_1.default.emptyState },
+                    react_1.default.createElement(Typography_1.default, { variant: "body2", color: "textSecondary" }, ui_i18n_1.default.text('Please enter at least ${minSearchTextLen} characters', {
+                        minSearchTextLen: minSearchTextLen
+                    })))),
+                shouldShowEmptyState && (react_1.default.createElement("li", { className: AddressAutocompleteEditor_module_css_1.default.emptyState },
+                    react_1.default.createElement(EmptySearchResult_1.EmptySearchResult, { className: AddressAutocompleteEditor_module_css_1.default.noData }))),
+                shouldShowOptions && props.children),
+            previousOptions.length > 0 && (react_1.default.createElement("div", { className: AddressAutocompleteEditor_module_css_1.default.backToAllResults },
+                react_1.default.createElement(Button_1.default, { variant: "text", onClick: handleBackToAllSearchResults, color: "primary", disabled: loading, classes: { root: AddressAutocompleteEditor_module_css_1.default.backToAllResultsButton } }, ui_i18n_1.default.text('Back to all results'))))));
+    }), [loading, countryNames, previousOptions.length, (options || []).length, inputValue, minSearchTextLen]);
     var openOptionsList = (0, react_1.useCallback)(function (_event) {
         setOpen(true);
     }, []);
-    return (react_1.default.createElement(Autocomplete_1.default, { className: AddressAutocompleteEditor_module_css_1.default.root, open: open, onOpen: openOptionsList, value: inputValue, onChange: handleOptionSelect, inputValue: inputValue, onInputChange: handleInputChange, options: options, getOptionLabel: helpers_1.getOptionLabel, loading: loading, renderInput: renderInput, renderOption: renderOption, renderGroup: function (params) { return params.children; }, ListboxComponent: renderListbox, noOptionsText: inputValue.trim().length < minSearchTextLen
-            ? ui_i18n_1.default.text('Please enter at least {{minSearchTextLen}} characters', { minSearchTextLen: minSearchTextLen })
-            : ui_i18n_1.default.text('No addresses found'), loadingText: ui_i18n_1.default.text('Searching addresses...'), filterOptions: ramda_1.identity, isOptionEqualToValue: helpers_1.isOptionEqualToValue, popupIcon: null, clearIcon: null, freeSolo: true, "data-reltio-id": "address-autocomplete-editor" }));
+    var displayOptions = (0, react_1.useMemo)(function () {
+        return __spreadArray([{ id: EMPTY_OPTION_ID, type: mdm_sdk_1.AddressType.Address, fullAddress: '' }], (options || []), true);
+    }, [options]);
+    return (react_1.default.createElement(Autocomplete_1.default, { className: AddressAutocompleteEditor_module_css_1.default.root, open: open, onOpen: openOptionsList, value: inputValue, onChange: handleOptionSelect, inputValue: inputValue, onInputChange: handleInputChange, onFocus: handleFocus, options: displayOptions, getOptionLabel: helpers_1.getOptionLabel, renderInput: renderInput, renderOption: renderOption, renderGroup: function (params) { return params.children; }, ListboxComponent: renderListbox, classes: {
+            paper: AddressAutocompleteEditor_module_css_1.default.popupContainer
+        }, filterOptions: ramda_1.identity, isOptionEqualToValue: helpers_1.isOptionEqualToValue, popupIcon: null, clearIcon: null, freeSolo: true, "data-reltio-id": "address-autocomplete-editor" }));
 };
 exports.AddressAutocompleteEditor = AddressAutocompleteEditor;

package/cjs/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);
 }
 module.exports = styles;

package/cjs/AddressAutocompleteEditor/AddressAutocompleteEditor.test.js

@@ -98,6 +98,14 @@ var mockAddressSearchResults = [
         Description: 'Jose Malhoa 22'
     }
 ];
+var mockAddressContainerSearchResults = [
+    {
+        Id: 'container-1',
+        Type: mdm_sdk_1.AddressType.Container,
+        Text: 'Container Option',
+        Description: 'Container'
+    }
+];
 var mockAddressDetails = [
     {
         Id: 'address-1',
@@ -287,15 +295,34 @@ describe('AddressAutocompleteEditor', function () {
                     return [4 /*yield*/, user.paste('Lisbon')];
                 case 2:
                     _a.sent();
-                    expect(react_2.screen.getByText('Searching addresses...')).toBeInTheDocument();
+                    expect(react_2.screen.getByRole('progressbar')).toBeInTheDocument();
                     resolveSearch([]);
-                    return [4 /*yield*/, (0, react_2.waitForElementToBeRemoved)(function () { return react_2.screen.queryByText('Searching addresses...'); })];
+                    return [4 /*yield*/, (0, react_2.waitForElementToBeRemoved)(function () { return react_2.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 = react_2.screen.getByRole('combobox');
+                    return [4 /*yield*/, user.click(input)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.paste('Lisbon')];
+                case 2:
+                    _a.sent();
+                    expect(react_2.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;
@@ -383,9 +410,7 @@ describe('AddressAutocompleteEditor', function () {
                 switch (_a.label) {
                     case 0:
                         onChange = jest.fn();
-                        mockSearchAddresses.mockResolvedValue([
-                            { Id: 'container-1', Type: mdm_sdk_1.AddressType.Container, Text: 'Container Option', Description: 'Container' }
-                        ]);
+                        mockSearchAddresses.mockResolvedValue(mockAddressContainerSearchResults);
                         user = setUp({ onChange: onChange }).user;
                         input = react_2.screen.getByRole('combobox');
                         return [4 /*yield*/, user.click(input)];
@@ -460,6 +485,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 = react_2.screen.getByRole('combobox');
+                        return [4 /*yield*/, user.click(input)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.paste('Lisbon')];
+                    case 2:
+                        _a.sent();
+                        expect(react_2.screen.getByText('Container Option')).toBeInTheDocument();
+                        expect(mockSearchAddresses).toHaveBeenCalledWith({
+                            text: 'Lisbon',
+                            limit: 10,
+                            countries: ['PT', 'US']
+                        });
+                        mockSearchAddresses.mockReset();
+                        mockSearchAddresses.mockResolvedValue(mockAddressSearchResults);
+                        option = react_2.screen.getByText('Container Option');
+                        return [4 /*yield*/, user.click(option)];
+                    case 3:
+                        _a.sent();
+                        expect(mockSearchAddresses).toHaveBeenCalledWith({
+                            container: 'container-1'
+                        });
+                        expect(react_2.screen.getByText('Avenida Jose Malhoa 22, Lisbon')).toBeInTheDocument();
+                        expect(react_2.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 = react_2.screen.getByRole('combobox');
+                        return [4 /*yield*/, user.click(input)];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.paste('Lisbon')];
+                    case 2:
+                        _a.sent();
+                        expect(react_2.screen.queryByText('Back to all results')).not.toBeInTheDocument();
+                        mockSearchAddresses.mockReset();
+                        mockSearchAddresses.mockResolvedValue(mockAddressSearchResults);
+                        option = react_2.screen.getByText('Container Option');
+                        return [4 /*yield*/, user.click(option)];
+                    case 3:
+                        _a.sent();
+                        expect(react_2.screen.getByText('Back to all results')).toBeInTheDocument();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Back to all results'))];
+                    case 4:
+                        _a.sent();
+                        expect(react_2.screen.queryByText('Back to all results')).not.toBeInTheDocument();
+                        expect(react_2.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 () {
@@ -511,6 +606,7 @@ describe('AddressAutocompleteEditor', function () {
                     case 2:
                         _a.sent();
                         expect(mockSearchAddresses).not.toHaveBeenCalled();
+                        expect(react_2.screen.getByText('Please enter at least 3 characters')).toBeInTheDocument();
                         return [4 /*yield*/, user.paste('sbon')];
                     case 3:
                         _a.sent();

package/cjs/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/cjs/AddressAutocompleteEditor/helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isOptionEqualToValue = exports.getOptionLabel = exports.convertSearchResultToOption = void 0;
+exports.isMinLength = exports.isOptionEqualToValue = exports.getOptionLabel = exports.convertSearchResultToOption = void 0;
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var convertSearchResultToOption = function (result) {
     return {
@@ -22,3 +22,7 @@ var isOptionEqualToValue = function (option, value) {
     return option.fullAddress === value;
 };
 exports.isOptionEqualToValue = isOptionEqualToValue;
+var isMinLength = function (value, minLength) {
+    return (value === null || value === void 0 ? void 0 : value.trim().length) >= minLength;
+};
+exports.isMinLength = isMinLength;

package/cjs/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/cjs/contexts/AutoCompleteContext/helpers.js

@@ -94,12 +94,12 @@ var getCountriesFromValues = function (_a) {
         (0, mdm_sdk_1.findAttributeTypeByUri)(metadata, countriesMapping === null || countriesMapping === void 0 ? void 0 : countriesMapping.attribute, modifiedEntity.type);
     if (countryAttributeType && !(0, mdm_sdk_1.isComplexAttribute)(countryAttributeType)) {
         var existingCountriesValues = (0, mdm_sdk_1.findAttributeValuesByTypeUri)(metadata, modifiedEntity, countriesMapping.attribute);
-        var currentCountryValues = existingCountriesValues
+        var currentCountryValues = (0, ramda_1.uniqBy)((0, ramda_1.prop)('value'), existingCountriesValues
             .filter(mdm_sdk_1.isOv)
             .filter(function (countryValue) {
             return (0, mdm_sdk_1.areOneHierarchyUris)(triggerAttributeValueParentUri, (0, mdm_sdk_1.getParentUri)(countryValue.uri));
         })
-            .filter(function (countryValue) { return countryValue.value; });
+            .filter(function (countryValue) { return countryValue.value; }));
         if (currentCountryValues === null || currentCountryValues === void 0 ? void 0 : currentCountryValues.length) {
             var countries = currentCountryValues.map(function (value) { return value.lookupCode || value.value.toString(); });
             return {

package/contexts/AutoCompleteContext/helpers.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { pluck } from 'ramda';
+import { pluck, prop, uniqBy } from 'ramda';
 import { findAttributeTypeByUri, findAttributeValuesByTypeUri, isComplexAttribute, isOv, getParentUri, generateUri, InputCleanseAttributeType, areOneHierarchyUris, DataTypes, isNested } from '@reltio/mdm-sdk';
 var MINIMUM_NESTED_LEVEL = 1;
 var MIN_SEARCH_TEXT_LEN = 3;
@@ -91,12 +91,12 @@ var getCountriesFromValues = function (_a) {
         findAttributeTypeByUri(metadata, countriesMapping === null || countriesMapping === void 0 ? void 0 : countriesMapping.attribute, modifiedEntity.type);
     if (countryAttributeType && !isComplexAttribute(countryAttributeType)) {
         var existingCountriesValues = findAttributeValuesByTypeUri(metadata, modifiedEntity, countriesMapping.attribute);
-        var currentCountryValues = existingCountriesValues
+        var currentCountryValues = uniqBy(prop('value'), existingCountriesValues
             .filter(isOv)
             .filter(function (countryValue) {
             return areOneHierarchyUris(triggerAttributeValueParentUri, getParentUri(countryValue.uri));
         })
-            .filter(function (countryValue) { return countryValue.value; });
+            .filter(function (countryValue) { return countryValue.value; }));
         if (currentCountryValues === null || currentCountryValues === void 0 ? void 0 : currentCountryValues.length) {
             var countries = currentCountryValues.map(function (value) { return value.lookupCode || value.value.toString(); });
             return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2162",
+  "version": "1.4.2163",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
@@ -11,7 +11,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@googlemaps/markerclusterer": "^2.5.3",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1979",
+    "@reltio/mdm-sdk": "^1.4.1980",
     "@vis.gl/react-google-maps": "^1.3.0",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",