@reltio/components 1.4.2162 → 1.4.2164

package/QuickFiltersEntityTypeFacet/components/EntityTypesFacetGroups/EntityTypesFacetGroups.js

@@ -0,0 +1,49 @@
+import React, { useCallback, useMemo } from 'react';
+import { defaultTo, filter, find, pipe, pluck, prop } from 'ramda';
+import i18n from 'ui-i18n';
+import { DEFAULT_ENTITY_TYPE_GROUP } from '@reltio/mdm-sdk';
+import Checkbox from '@mui/material/Checkbox';
+import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
+import { EntityTypesList } from '../EntityTypesList';
+import styles from './EntityTypesFacetGroups.module.css';
+export var EntityTypesFacetGroups = function (_a) {
+    var groups = _a.groups, values = _a.values, maxRowCount = _a.maxRowCount, showAll = _a.showAll, onChange = _a.onChange, countFormatter = _a.countFormatter;
+    var shouldUseAllItems = !countFormatter;
+    var handleCheckboxChange = useCallback(function (groupValues) { return function (e) {
+        var newValues = e.target.checked
+            ? values.concat(groupValues.filter(function (v) { return !values.includes(v); }))
+            : values.filter(function (v) { return !groupValues.includes(v); });
+        onChange(newValues);
+    }; }, [onChange, values]);
+    var groupedItemsToRender = useMemo(function () {
+        if (showAll)
+            return groups;
+        var count = 0;
+        return groups
+            .map(function (group) {
+            if (count >= maxRowCount)
+                return null;
+            var remaining = maxRowCount - count;
+            var limitedItems = group.items.slice(0, remaining);
+            count += limitedItems.length;
+            return limitedItems.length ? { label: group.label, items: limitedItems } : null;
+        })
+            .filter(Boolean);
+    }, [groups, showAll, maxRowCount]);
+    var renderGroup = function (_a) {
+        var label = _a.label, items = _a.items;
+        var allItems = pipe(find(function (group) { return group.label === label; }), defaultTo({ label: label, items: [] }), prop('items'))(groups);
+        var availableValuesWithCount = pipe(filter(function (item) { return (item.number && item.number > 0) || values.includes(item.value); }), pluck('value'))(allItems);
+        var availableValues = shouldUseAllItems ? pluck('value', allItems) : availableValuesWithCount;
+        var checkedCount = availableValues.filter(function (v) { return values.includes(v); }).length;
+        var allChecked = checkedCount === availableValues.length && availableValues.length > 0;
+        var someChecked = checkedCount > 0 && checkedCount < availableValues.length;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: styles.groupHeader },
+                React.createElement(Checkbox, { className: styles.groupCheckbox, checked: allChecked, indeterminate: someChecked, onChange: handleCheckboxChange(availableValues), disabled: availableValues.length === 0 }),
+                label !== DEFAULT_ENTITY_TYPE_GROUP && React.createElement(LocalOfferOutlinedIcon, { className: styles.groupIcon }),
+                React.createElement("span", { className: styles.groupLabel }, label === DEFAULT_ENTITY_TYPE_GROUP ? i18n.text('Other') : label)),
+            React.createElement(EntityTypesList, { data: items, values: values, onChange: onChange, countFormatter: countFormatter })));
+    };
+    return groups.length === 1 && groups[0].label === DEFAULT_ENTITY_TYPE_GROUP ? (React.createElement(EntityTypesList, { data: groupedItemsToRender[0].items, values: values, onChange: onChange, countFormatter: countFormatter })) : (React.createElement(React.Fragment, null, groupedItemsToRender.map(function (group) { return (React.createElement("div", { key: group.label }, renderGroup(group))); })));
+};

package/QuickFiltersEntityTypeFacet/components/EntityTypesFacetGroups/EntityTypesFacetGroups.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"groupHeader":"EntityTypesFacetGroups-groupHeader---V51b","groupCheckbox":"EntityTypesFacetGroups-groupCheckbox--owond","groupIcon":"EntityTypesFacetGroups-groupIcon--wPz-A","groupLabel":"EntityTypesFacetGroups-groupLabel--4yhjo"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.EntityTypesFacetGroups-groupHeader---V51b{align-items:center;background:#f5f5f5;display:flex;margin:2px 10px;padding:6px 8px}.EntityTypesFacetGroups-groupCheckbox--owond{margin-right:21px;padding:0}.EntityTypesFacetGroups-groupIcon--wPz-A{color:rgba(0,0,0,.54);height:20px;margin-right:8px;width:20px}.EntityTypesFacetGroups-groupLabel--4yhjo{font-size:14px;font-weight:500}`;
+    head.appendChild(style);
+}
+export default styles;

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

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

package/QuickFiltersEntityTypeFacet/components/EntityTypesFacetGroups/index.js

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

package/QuickFiltersEntityTypeFacet/components/EntityTypesList/EntityTypesList.d.ts

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

package/QuickFiltersEntityTypeFacet/components/EntityTypesList/EntityTypesList.js

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import { identity } from 'ramda';
+import Checkbox from '@mui/material/Checkbox';
+import { ColorBar } from '../../../ColorBar';
+import styles from './EntityTypesList.module.css';
+export var EntityTypesList = function (_a) {
+    var _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.values, values = _c === void 0 ? [] : _c, _d = _a.onChange, onChange = _d === void 0 ? identity : _d, countFormatter = _a.countFormatter;
+    var shouldShowCount = !!countFormatter;
+    var handleItemClick = function (name) { return function () {
+        var newValues = values.includes(name) ? values.filter(function (val) { return val !== name; }) : values.concat(name);
+        onChange(newValues);
+    }; };
+    var maxNumber = Math.max.apply(Math, data.map(function (item) { return item.number; }));
+    var createControl = function (item) {
+        var _a;
+        return (React.createElement(Checkbox, { className: classnames(styles.checkbox, (_a = {}, _a[styles.checked] = values.includes(item.value), _a)), checked: values.includes(item.value), onChange: handleItemClick(item.value), value: item.value, color: "primary" }));
+    };
+    var createColorBar = function (item) {
+        var _a;
+        return (React.createElement(ColorBar, { className: classnames((_a = {}, _a[styles.checkedBar] = values.includes(item.value), _a)), width: item.number, maxWidth: maxNumber }));
+    };
+    var shouldDisableItem = useCallback(function (item) {
+        return shouldShowCount && !item.number && !values.includes(item.value);
+    }, [shouldShowCount, values]);
+    return (React.createElement("div", { className: styles.listContainer }, data.map(function (item) {
+        var _a;
+        return (React.createElement("div", { key: item.value, className: classnames(styles.item, (_a = {},
+                _a[styles.disabled] = shouldDisableItem(item),
+                _a)), "data-reltio-id": "search-facets-list-row" },
+            createControl(item),
+            React.createElement("div", { className: styles.info, onClick: handleItemClick(item.value) },
+                shouldShowCount && createColorBar(item),
+                React.createElement("div", { className: classnames(styles.textInfo) },
+                    React.createElement("div", { className: styles.text }, item.label),
+                    shouldShowCount && (React.createElement("div", { className: styles.count }, item.number === undefined ? i18n.text('N/A') : countFormatter(item.number)))))));
+    })));
+};

package/QuickFiltersEntityTypeFacet/components/EntityTypesList/EntityTypesList.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"listContainer":"EntityTypesList-listContainer--yH3ri","disabled":"EntityTypesList-disabled--HnKbn","item":"EntityTypesList-item--7i6HO","info":"EntityTypesList-info--j8-KL","checkedBar":"EntityTypesList-checkedBar--TGBZJ","checkbox":"EntityTypesList-checkbox--ZthGQ","checked":"EntityTypesList-checked--2Ba66","textInfo":"EntityTypesList-textInfo--sL0G-","text":"EntityTypesList-text--QzVMI","count":"EntityTypesList-count--xE-gy"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.EntityTypesList-listContainer--yH3ri{display:flex;flex-direction:column;padding-left:18px}.EntityTypesList-listContainer--yH3ri .EntityTypesList-disabled--HnKbn{opacity:.4;pointer-events:none}.EntityTypesList-item--7i6HO{display:flex;flex-direction:row;flex-grow:1;flex-shrink:0;margin-bottom:2px;margin-right:10px;margin-top:2px}.EntityTypesList-info--j8-KL{display:flex;flex-grow:1;margin-bottom:2px;margin-top:2px;min-width:0;position:relative}.EntityTypesList-info--j8-KL:hover{cursor:pointer}.EntityTypesList-info--j8-KL .EntityTypesList-checkedBar--TGBZJ{opacity:.4}.EntityTypesList-checkbox--ZthGQ{margin-right:14px;padding:0}.EntityTypesList-checkbox--ZthGQ .EntityTypesList-checked--2Ba66{opacity:1}.EntityTypesList-textInfo--sL0G-{align-items:center;background-color:transparent;display:flex;flex-grow:1;line-height:16px;min-width:0;z-index:2}.EntityTypesList-text--QzVMI{color:var(--mui-palette-text-primary);flex-grow:1;margin-left:7px;margin-right:4px;max-height:32px;width:100%;word-break:break-word;word-wrap:break-word;overflow:hidden}.EntityTypesList-count--xE-gy{color:var(--mui-palette-text-secondary);flex-shrink:0;font-size:12px;margin-right:4px;text-align:right}`;
+    head.appendChild(style);
+}
+export default styles;

package/QuickFiltersEntityTypeFacet/components/EntityTypesList/index.d.ts

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

package/QuickFiltersEntityTypeFacet/components/EntityTypesList/index.js

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

package/QuickFiltersEntityTypeFacet/index.d.ts

@@ -0,0 +1,2 @@
+export { QuickFiltersEntityTypeFacet } from './QuickFiltersEntityTypeFacet';
+export type { EntityTypesGroup } from './types';

package/QuickFiltersEntityTypeFacet/index.js

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

package/QuickFiltersEntityTypeFacet/types.d.ts

@@ -0,0 +1,5 @@
+import { EntityTypeFacetDataItem } from '@reltio/mdm-sdk';
+export type EntityTypesGroup = {
+    label: string;
+    items: EntityTypeFacetDataItem[];
+};

package/QuickFiltersEntityTypeFacet/types.js

@@ -0,0 +1 @@
+export {};

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;