@reltio/components 1.4.2172 → 1.4.2174

package/AddressAutocompleteEditor/AddressAutocompleteEditor.js

@@ -234,14 +234,16 @@ export var AddressAutocompleteEditor = function (_a) {
         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(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)),
+        return (React.createElement(ListItemButton, __assign({}, props, { className: classnames(props.className, styles.option), component: "li", disabled: loading }),
+            React.createElement("div", { className: styles.optionTextWrapper },
+                React.createElement(ExpandedValueTooltip, { value: option.fullAddress },
+                    React.createElement(Typography, { variant: "body2", component: "span", className: styles.optionText }, option.fullAddress)),
+                option.description && isContainer && (React.createElement(ExpandedValueTooltip, { value: option.description },
+                    React.createElement(Typography, { variant: "caption", component: "span", className: styles.description }, option.description)))),
             isContainer && (React.createElement("div", { className: styles.containerForwardIcon },
                 React.createElement(ChevronRightIcon, null)))));
     }, [loading]);

package/AddressAutocompleteEditor/AddressAutocompleteEditor.module.css.js

@@ -1,9 +1,9 @@
-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"};
+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","optionTextWrapper":"AddressAutocompleteEditor-optionTextWrapper--frQ5S","optionText":"AddressAutocompleteEditor-optionText--IcsBw","description":"AddressAutocompleteEditor-description--QLj8Z","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-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}`;
+    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-optionTextWrapper--frQ5S{align-items:baseline;display:flex;flex:1;min-width:0;--option-font-size:14px;--option-line-height:16px}.AddressAutocompleteEditor-optionTextWrapper--frQ5S .AddressAutocompleteEditor-optionText--IcsBw{font-size:var(--option-font-size);letter-spacing:.24px;line-height:var(--option-line-height);overflow:hidden;padding:4px 0;text-overflow:ellipsis;white-space:nowrap}.AddressAutocompleteEditor-optionTextWrapper--frQ5S .AddressAutocompleteEditor-description--QLj8Z{color:var(--mui-palette-text-secondary);font-size:var(--option-font-size);line-height:var(--option-line-height);overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.AddressAutocompleteEditor-containerForwardIcon--Ke5rd{color:var(--mui-palette-text-secondary);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

@@ -98,7 +98,7 @@ var mockAddressContainerSearchResults = [
         Id: 'container-1',
         Type: AddressType.Container,
         Text: 'Container Option',
-        Description: 'Container'
+        Description: 'Container Description'
     }
 ];
 var mockAddressDetails = [
@@ -415,6 +415,7 @@ describe('AddressAutocompleteEditor', function () {
                     case 2:
                         _a.sent();
                         expect(screen.getByText('Container Option')).toBeInTheDocument();
+                        expect(screen.getByText('Container Description')).toBeInTheDocument();
                         option = screen.getByText('Container Option');
                         return [4 /*yield*/, user.click(option)];
                     case 3:

package/ProfileBand/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inactive" | "label" | "secondaryLabel" | "entityType" | "profileBand" | "entityId" | "profileIcon" | "profileBandWrapper" | "imageProfileIcon" | "profileInfo" | "badge" | "businessCard" | "specialInfo">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inactive" | "label" | "secondaryLabel" | "profileBand" | "entityType" | "entityId" | "profileIcon" | "profileBandWrapper" | "imageProfileIcon" | "profileInfo" | "badge" | "businessCard" | "specialInfo">;

package/SelectionPopup/SelectionPopup.js

@@ -26,8 +26,9 @@ import i18n from 'ui-i18n';
 import Popover from '@mui/material/Popover';
 import { InfoIcon } from '../InfoIcon';
 import { SearchInput } from '../SearchInput';
-import styles from './SelectionPopup.module.css';
+import { useCssVariableStyles } from '../hooks/useCssVariableStyles/useCssVariableStyles';
 import { useTheme } from '@mui/styles';
+import styles from './SelectionPopup.module.css';
 export var SelectionPopup = function (_a) {
     var _b;
     var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, inputPlaceholder = _a.inputPlaceholder, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth, _d = _a.containerHeight, containerHeight = _d === void 0 ? 553 : _d, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _e = _a.anchorOrigin, anchorOrigin = _e === void 0 ? {
@@ -38,13 +39,16 @@ export var SelectionPopup = function (_a) {
         horizontal: 'right'
     } : _f, additionalInfo = _a.additionalInfo, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "inputPlaceholder", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin", "additionalInfo"]);
     var currentTheme = useTheme();
+    var variableStyles = useCssVariableStyles({
+        '--container-height': "".concat(containerHeight, "px")
+    });
     var header = (React.createElement(React.Fragment, null,
         !hideTitle && (React.createElement("div", { className: styles.header },
             title,
             additionalInfo && React.createElement(InfoIcon, { className: styles.infoIcon, tooltipTitle: additionalInfo }))),
         !hideSearchInput && (React.createElement(SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: styles.searchInputContainer }, placeholder: inputPlaceholder || i18n.text('Search & add attributes'), height: 40 }))));
     return (React.createElement(Popover, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, "data-mui-color-scheme": (_b = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _b === void 0 ? void 0 : _b.mode }, otherProps),
-        React.createElement("div", { className: classnames(styles.container, className), style: { width: containerWidth, height: containerHeight } },
+        React.createElement("div", { className: classnames(styles.container, className), style: __assign(__assign({}, variableStyles), { width: containerWidth }) },
             headerPlacement === 'top' && header,
             React.createElement("div", { className: styles.list }, children),
             headerPlacement === 'bottom' && header)));

package/SelectionPopup/SelectionPopup.module.css.js

@@ -3,7 +3,7 @@ if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.SelectionPopup-container--TOJwk{display:flex;flex-direction:column;flex-grow:1}.SelectionPopup-header--Vwm7m{align-items:center;display:flex;font-size:16px;font-weight:500;letter-spacing:.15px;line-height:24px;margin-bottom:12px;margin-left:16px;margin-top:16px}.SelectionPopup-infoIcon--vFSq9{color:var(--mui-palette-text-secondary);height:15px;margin-left:4px;width:15px}.SelectionPopup-searchInputContainer--FeSdp{flex-shrink:0;margin:0 16px 12px}.SelectionPopup-list--jlWo4{flex-grow:1;height:0;overflow:hidden;position:relative;width:100%}.SelectionPopup-list--jlWo4 ul{padding-bottom:0;padding-top:0}`;
+    style.innerHTML = `.SelectionPopup-container--TOJwk{display:flex;flex-direction:column;flex-grow:1;height:var(--container-height)}.SelectionPopup-header--Vwm7m{align-items:center;display:flex;font-size:16px;font-weight:500;letter-spacing:.15px;line-height:24px;margin-bottom:12px;margin-left:16px;margin-top:16px}.SelectionPopup-infoIcon--vFSq9{color:var(--mui-palette-text-secondary);height:15px;margin-left:4px;width:15px}.SelectionPopup-searchInputContainer--FeSdp{flex-shrink:0;margin:0 16px 12px}.SelectionPopup-list--jlWo4{flex-grow:1;height:0;overflow:hidden;position:relative;width:100%}.SelectionPopup-list--jlWo4 ul{padding-bottom:0;padding-top:0}`;
     head.appendChild(style);
 }
 export default styles;

package/cjs/AddressAutocompleteEditor/AddressAutocompleteEditor.js

@@ -263,14 +263,16 @@ var AddressAutocompleteEditor = function (_a) {
         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(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)),
+        return (react_1.default.createElement(ListItemButton_1.default, __assign({}, props, { className: (0, classnames_1.default)(props.className, AddressAutocompleteEditor_module_css_1.default.option), component: "li", disabled: loading }),
+            react_1.default.createElement("div", { className: AddressAutocompleteEditor_module_css_1.default.optionTextWrapper },
+                react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: option.fullAddress },
+                    react_1.default.createElement(Typography_1.default, { variant: "body2", component: "span", className: AddressAutocompleteEditor_module_css_1.default.optionText }, option.fullAddress)),
+                option.description && isContainer && (react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: option.description },
+                    react_1.default.createElement(Typography_1.default, { variant: "caption", component: "span", className: AddressAutocompleteEditor_module_css_1.default.description }, option.description)))),
             isContainer && (react_1.default.createElement("div", { className: AddressAutocompleteEditor_module_css_1.default.containerForwardIcon },
                 react_1.default.createElement(ChevronRight_1.default, null)))));
     }, [loading]);

package/cjs/AddressAutocompleteEditor/AddressAutocompleteEditor.module.css.js

@@ -1,9 +1,9 @@
-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"};
+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","optionTextWrapper":"AddressAutocompleteEditor-optionTextWrapper--frQ5S","optionText":"AddressAutocompleteEditor-optionText--IcsBw","description":"AddressAutocompleteEditor-description--QLj8Z","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-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}`;
+    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-optionTextWrapper--frQ5S{align-items:baseline;display:flex;flex:1;min-width:0;--option-font-size:14px;--option-line-height:16px}.AddressAutocompleteEditor-optionTextWrapper--frQ5S .AddressAutocompleteEditor-optionText--IcsBw{font-size:var(--option-font-size);letter-spacing:.24px;line-height:var(--option-line-height);overflow:hidden;padding:4px 0;text-overflow:ellipsis;white-space:nowrap}.AddressAutocompleteEditor-optionTextWrapper--frQ5S .AddressAutocompleteEditor-description--QLj8Z{color:var(--mui-palette-text-secondary);font-size:var(--option-font-size);line-height:var(--option-line-height);overflow:hidden;padding-left:4px;text-overflow:ellipsis;white-space:nowrap}.AddressAutocompleteEditor-containerForwardIcon--Ke5rd{color:var(--mui-palette-text-secondary);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

@@ -103,7 +103,7 @@ var mockAddressContainerSearchResults = [
         Id: 'container-1',
         Type: mdm_sdk_1.AddressType.Container,
         Text: 'Container Option',
-        Description: 'Container'
+        Description: 'Container Description'
     }
 ];
 var mockAddressDetails = [
@@ -420,6 +420,7 @@ describe('AddressAutocompleteEditor', function () {
                     case 2:
                         _a.sent();
                         expect(react_2.screen.getByText('Container Option')).toBeInTheDocument();
+                        expect(react_2.screen.getByText('Container Description')).toBeInTheDocument();
                         option = react_2.screen.getByText('Container Option');
                         return [4 /*yield*/, user.click(option)];
                     case 3:

package/cjs/ProfileBand/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inactive" | "label" | "secondaryLabel" | "entityType" | "profileBand" | "entityId" | "profileIcon" | "profileBandWrapper" | "imageProfileIcon" | "profileInfo" | "badge" | "businessCard" | "specialInfo">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inactive" | "label" | "secondaryLabel" | "profileBand" | "entityType" | "entityId" | "profileIcon" | "profileBandWrapper" | "imageProfileIcon" | "profileInfo" | "badge" | "businessCard" | "specialInfo">;

package/cjs/SelectionPopup/SelectionPopup.js

@@ -32,8 +32,9 @@ var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var Popover_1 = __importDefault(require("@mui/material/Popover"));
 var InfoIcon_1 = require("../InfoIcon");
 var SearchInput_1 = require("../SearchInput");
-var SelectionPopup_module_css_1 = __importDefault(require("./SelectionPopup.module.css"));
+var useCssVariableStyles_1 = require("../hooks/useCssVariableStyles/useCssVariableStyles");
 var styles_1 = require("@mui/styles");
+var SelectionPopup_module_css_1 = __importDefault(require("./SelectionPopup.module.css"));
 var SelectionPopup = function (_a) {
     var _b;
     var title = _a.title, className = _a.className, onSearch = _a.onSearch, hideTitle = _a.hideTitle, hideSearchInput = _a.hideSearchInput, inputPlaceholder = _a.inputPlaceholder, _c = _a.headerPlacement, headerPlacement = _c === void 0 ? 'top' : _c, containerWidth = _a.containerWidth, _d = _a.containerHeight, containerHeight = _d === void 0 ? 553 : _d, searchInputOnKeyDown = _a.searchInputOnKeyDown, children = _a.children, searchInputRef = _a.searchInputRef, _e = _a.anchorOrigin, anchorOrigin = _e === void 0 ? {
@@ -44,13 +45,16 @@ var SelectionPopup = function (_a) {
         horizontal: 'right'
     } : _f, additionalInfo = _a.additionalInfo, otherProps = __rest(_a, ["title", "className", "onSearch", "hideTitle", "hideSearchInput", "inputPlaceholder", "headerPlacement", "containerWidth", "containerHeight", "searchInputOnKeyDown", "children", "searchInputRef", "anchorOrigin", "transformOrigin", "additionalInfo"]);
     var currentTheme = (0, styles_1.useTheme)();
+    var variableStyles = (0, useCssVariableStyles_1.useCssVariableStyles)({
+        '--container-height': "".concat(containerHeight, "px")
+    });
     var header = (react_1.default.createElement(react_1.default.Fragment, null,
         !hideTitle && (react_1.default.createElement("div", { className: SelectionPopup_module_css_1.default.header },
             title,
             additionalInfo && react_1.default.createElement(InfoIcon_1.InfoIcon, { className: SelectionPopup_module_css_1.default.infoIcon, tooltipTitle: additionalInfo }))),
         !hideSearchInput && (react_1.default.createElement(SearchInput_1.SearchInput, { onSearch: onSearch, autofocus: true, onKeyDown: searchInputOnKeyDown, inputRef: searchInputRef, classes: { root: SelectionPopup_module_css_1.default.searchInputContainer }, placeholder: inputPlaceholder || ui_i18n_1.default.text('Search & add attributes'), height: 40 }))));
     return (react_1.default.createElement(Popover_1.default, __assign({ anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, "data-mui-color-scheme": (_b = currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.palette) === null || _b === void 0 ? void 0 : _b.mode }, otherProps),
-        react_1.default.createElement("div", { className: (0, classnames_1.default)(SelectionPopup_module_css_1.default.container, className), style: { width: containerWidth, height: containerHeight } },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)(SelectionPopup_module_css_1.default.container, className), style: __assign(__assign({}, variableStyles), { width: containerWidth }) },
             headerPlacement === 'top' && header,
             react_1.default.createElement("div", { className: SelectionPopup_module_css_1.default.list }, children),
             headerPlacement === 'bottom' && header)));

package/cjs/SelectionPopup/SelectionPopup.module.css.js

@@ -3,7 +3,7 @@ if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.SelectionPopup-container--TOJwk{display:flex;flex-direction:column;flex-grow:1}.SelectionPopup-header--Vwm7m{align-items:center;display:flex;font-size:16px;font-weight:500;letter-spacing:.15px;line-height:24px;margin-bottom:12px;margin-left:16px;margin-top:16px}.SelectionPopup-infoIcon--vFSq9{color:var(--mui-palette-text-secondary);height:15px;margin-left:4px;width:15px}.SelectionPopup-searchInputContainer--FeSdp{flex-shrink:0;margin:0 16px 12px}.SelectionPopup-list--jlWo4{flex-grow:1;height:0;overflow:hidden;position:relative;width:100%}.SelectionPopup-list--jlWo4 ul{padding-bottom:0;padding-top:0}`;
+    style.innerHTML = `.SelectionPopup-container--TOJwk{display:flex;flex-direction:column;flex-grow:1;height:var(--container-height)}.SelectionPopup-header--Vwm7m{align-items:center;display:flex;font-size:16px;font-weight:500;letter-spacing:.15px;line-height:24px;margin-bottom:12px;margin-left:16px;margin-top:16px}.SelectionPopup-infoIcon--vFSq9{color:var(--mui-palette-text-secondary);height:15px;margin-left:4px;width:15px}.SelectionPopup-searchInputContainer--FeSdp{flex-shrink:0;margin:0 16px 12px}.SelectionPopup-list--jlWo4{flex-grow:1;height:0;overflow:hidden;position:relative;width:100%}.SelectionPopup-list--jlWo4 ul{padding-bottom:0;padding-top:0}`;
     head.appendChild(style);
 }
 module.exports = styles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2172",
+  "version": "1.4.2174",
   "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.1985",
+    "@reltio/mdm-sdk": "^1.4.1986",
     "@vis.gl/react-google-maps": "^1.3.0",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",