@reltio/components 1.4.2184 → 1.4.2186

package/cjs/FacetContainer/FacetContainer.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export declare const RecommendedIconWithTooltip: React.ForwardRefExoticComponent<{
+    tooltipTitle?: import("@mui/material").TooltipProps["title"];
+    tooltipPlacement?: import("@mui/material").TooltipProps["placement"];
+    showForDisabled?: boolean;
+} & React.SVGAttributes<SVGElement> & React.RefAttributes<HTMLElement>>;
+export type Props = {
+    children?: React.ReactNode;
+    title: string;
+    chipLabel?: number;
+    pathToTitle?: string[];
+    isOpenByDefault?: boolean;
+    isHighlighted?: boolean;
+    isRecommended?: boolean;
+    onDeleteChip?: () => void;
+    onClose?: () => void;
+};
+export declare const FacetContainer: ({ children, title, chipLabel, pathToTitle, isOpenByDefault, isHighlighted, isRecommended, onDeleteChip, onClose }: Props) => React.JSX.Element;

package/cjs/FacetContainer/FacetContainer.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FacetContainer = exports.RecommendedIconWithTooltip = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var Close_1 = __importDefault(require("@mui/icons-material/Close"));
+var CollapseButton_1 = require("../CollapseButton");
+var SmallIconButton_1 = require("../SmallIconButton");
+var withTooltip_1 = require("../HOCs/withTooltip");
+var FacetTitle_1 = __importDefault(require("./components/FacetTitle/FacetTitle"));
+var Recommended_svg_1 = __importDefault(require("./Recommended.svg"));
+var FacetContainer_module_css_1 = __importDefault(require("./FacetContainer.module.css"));
+exports.RecommendedIconWithTooltip = (0, withTooltip_1.withTooltip)(Recommended_svg_1.default);
+var FacetContainer = function (_a) {
+    var _b;
+    var children = _a.children, title = _a.title, chipLabel = _a.chipLabel, pathToTitle = _a.pathToTitle, _c = _a.isOpenByDefault, isOpenByDefault = _c === void 0 ? true : _c, _d = _a.isHighlighted, isHighlighted = _d === void 0 ? false : _d, _e = _a.isRecommended, isRecommended = _e === void 0 ? false : _e, onDeleteChip = _a.onDeleteChip, onClose = _a.onClose;
+    var _f = (0, react_1.useState)(isOpenByDefault), open = _f[0], setOpen = _f[1];
+    var toggleOpen = function () {
+        setOpen(!open);
+    };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(FacetContainer_module_css_1.default.facetContainer, (_b = {},
+            _b[FacetContainer_module_css_1.default.openedFacetContainer] = open,
+            _b[FacetContainer_module_css_1.default.closedFacetContainer] = !open,
+            _b[FacetContainer_module_css_1.default.highlighted] = isHighlighted,
+            _b)), "data-reltio-id": "search-facet-container-".concat(title) },
+        react_1.default.createElement("div", { className: FacetContainer_module_css_1.default.titleContainer },
+            react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Remove'), icon: Close_1.default, onClick: onClose, className: FacetContainer_module_css_1.default.iconButton, size: "XXS" }),
+            isRecommended && (react_1.default.createElement(exports.RecommendedIconWithTooltip, { className: FacetContainer_module_css_1.default.recommendedIcon, tooltipTitle: ui_i18n_1.default.text('Recommended'), showForDisabled: true })),
+            react_1.default.createElement(FacetTitle_1.default, { title: title, pathToTitle: pathToTitle, chipLabel: chipLabel, onDelete: onDeleteChip, onClick: toggleOpen }),
+            react_1.default.createElement(CollapseButton_1.CollapseButton, { onClick: toggleOpen, isOpen: open, className: FacetContainer_module_css_1.default.iconButton, size: "S", tooltipTitle: open ? ui_i18n_1.default.text('Collapse attribute') : ui_i18n_1.default.text('Expand attribute'), tooltipPlacement: "bottom-end" })),
+        open ? children : null));
+};
+exports.FacetContainer = FacetContainer;

package/cjs/FacetContainer/FacetContainer.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"facetContainer":"FacetContainer-facetContainer--PGQJm","openedFacetContainer":"FacetContainer-openedFacetContainer--T0y7f","closedFacetContainer":"FacetContainer-closedFacetContainer--s6-qP","iconButton":"FacetContainer-iconButton--FOXN9","recommendedIcon":"FacetContainer-recommendedIcon--v3mLt","titleContainer":"FacetContainer-titleContainer--mxRz2","expandIcon":"FacetContainer-expandIcon--eNUwN","expanded":"FacetContainer-expanded--XgtFv","highlighted":"FacetContainer-highlighted--Cf-qC","animate":"FacetContainer-animate--nGob0"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.FacetContainer-facetContainer--PGQJm{border-bottom:1px solid rgba(0,0,0,.33);border-radius:1px;display:flex;flex-direction:column;flex-grow:1;flex-shrink:0;padding:0 16px;position:relative}.FacetContainer-facetContainer--PGQJm:last-child{border-bottom:1px solid #fff}.FacetContainer-openedFacetContainer--T0y7f{padding-bottom:15px}.FacetContainer-closedFacetContainer--s6-qP{padding-bottom:5px}.FacetContainer-iconButton--FOXN9{visibility:hidden}.FacetContainer-iconButton--FOXN9:first-child{height:24px;margin-left:-16px;width:24px}.FacetContainer-recommendedIcon--v3mLt{flex-shrink:0;height:18px;margin-right:6px;width:18px}.FacetContainer-titleContainer--mxRz2{align-items:center;border-radius:1px;display:flex;flex-direction:row;flex-shrink:0;height:42px;margin-left:-16px;padding-left:16px}.FacetContainer-titleContainer--mxRz2:hover .FacetContainer-iconButton--FOXN9{visibility:visible}.FacetContainer-expandIcon--eNUwN{color:rgba(0,0,0,.54);margin:0 2px;transition:transform .15s ease}.FacetContainer-expanded--XgtFv{transform:rotate(180deg)}@keyframes FacetContainer-animate--nGob0{0%{background:#fffbeb}66%{background:#fffbeb}to{background:transparent}}.FacetContainer-highlighted--Cf-qC{animation-duration:3s;animation-iteration-count:1;animation-name:FacetContainer-animate--nGob0}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/FacetContainer/components/ChipsCount/ChipCount.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"ChipsCount-root--nvCui","deleteIcon":"ChipsCount-deleteIcon--5PYeW","outlined":"ChipsCount-outlined--GUmLb","label":"ChipsCount-label--G-hwC"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ChipsCount-root--nvCui{background-color:transparent;border:1px solid rgba(0,0,0,.12);border-radius:16px;box-sizing:border-box;height:18px}.ChipsCount-root--nvCui .ChipsCount-deleteIcon--5PYeW{color:rgba(0,0,0,.38);height:12px;margin:0;width:12px}.ChipsCount-outlined--GUmLb .ChipsCount-deleteIcon--5PYeW{margin-right:2px}.ChipsCount-label--G-hwC{color:rgba(0,0,0,.38);font-size:12px;font-weight:500;line-height:16px;padding-left:4px;padding-right:4px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/FacetContainer/components/ChipsCount/ChipsCount.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ChipProps } from '@mui/material/Chip';
+export declare const ClearIconWithTooltip: React.ForwardRefExoticComponent<Omit<{
+    tooltipTitle?: import("@mui/material").TooltipProps["title"];
+    tooltipPlacement?: import("@mui/material").TooltipProps["placement"];
+    showForDisabled?: boolean;
+} & {
+    children?: React.ReactNode;
+    classes?: Partial<import("@mui/material").SvgIconClasses>;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "action" | "disabled" | "primary" | "secondary" | "error" | "info" | "success" | "warning", import("@mui/material").SvgIconPropsColorOverrides>;
+    fontSize?: import("@mui/types").OverridableStringUnion<"inherit" | "large" | "medium" | "small", import("@mui/material").SvgIconPropsSizeOverrides>;
+    htmlColor?: string;
+    inheritViewBox?: boolean;
+    shapeRendering?: string;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
+    titleAccess?: string;
+    viewBox?: string;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: React.Ref<SVGSVGElement>;
+}, "color" | "fontSize" | "shapeRendering" | "children" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess">, "ref"> & React.RefAttributes<HTMLElement>>;
+type Props = Omit<ChipProps, 'onDelete' | 'label'> & {
+    label: number;
+    onDelete?: () => void;
+};
+declare const ChipsCount: ({ label, onDelete, ...extraProps }: Props) => React.JSX.Element;
+export default ChipsCount;

package/cjs/FacetContainer/components/ChipsCount/ChipsCount.js

@@ -0,0 +1,45 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearIconWithTooltip = void 0;
+var react_1 = __importDefault(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Chip_1 = __importDefault(require("@mui/material/Chip"));
+var Cancel_1 = __importDefault(require("@mui/icons-material/Cancel"));
+var withTooltip_1 = require("../../../HOCs/withTooltip");
+var ChipCount_module_css_1 = __importDefault(require("./ChipCount.module.css"));
+exports.ClearIconWithTooltip = (0, withTooltip_1.withTooltip)(Cancel_1.default);
+var ChipsCount = function (_a) {
+    var label = _a.label, onDelete = _a.onDelete, extraProps = __rest(_a, ["label", "onDelete"]);
+    return (react_1.default.createElement(Chip_1.default, __assign({ className: ChipCount_module_css_1.default.root, label: ui_i18n_1.default.number(label), onDelete: onDelete, variant: "outlined", classes: {
+            root: ChipCount_module_css_1.default.root,
+            outlined: ChipCount_module_css_1.default.outlined,
+            deleteIcon: ChipCount_module_css_1.default.deleteIcon,
+            label: ChipCount_module_css_1.default.label
+        }, deleteIcon: react_1.default.createElement(exports.ClearIconWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Clear') }) }, extraProps)));
+};
+exports.default = ChipsCount;

package/cjs/FacetContainer/components/FacetTitle/FacetTitle.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type Props = {
+    title?: string;
+    chipLabel?: number;
+    onDelete?: () => void;
+    pathToTitle?: string[];
+    onClick?: () => void;
+};
+declare const FacetTitle: ({ title, chipLabel, onDelete, pathToTitle, onClick }: Props) => React.JSX.Element;
+export default FacetTitle;

package/cjs/FacetContainer/components/FacetTitle/FacetTitle.js

@@ -0,0 +1,36 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var ExpandedValueTooltip_1 = require("../../../ExpandedValueTooltip");
+var HierarchicalAttributeTooltip_1 = require("../../../HierarchicalAttributeTooltip");
+var ChipsCount_1 = __importDefault(require("../ChipsCount/ChipsCount"));
+var FacetTitle_module_css_1 = __importDefault(require("./FacetTitle.module.css"));
+var FacetTitle = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.chipLabel, chipLabel = _c === void 0 ? 0 : _c, onDelete = _a.onDelete, pathToTitle = _a.pathToTitle, onClick = _a.onClick;
+    var isNested = Boolean(pathToTitle && pathToTitle.length > 2);
+    var TooltipComponent = isNested ? HierarchicalAttributeTooltip_1.HierarchicalAttributeTooltip : ExpandedValueTooltip_1.ExpandedValueTooltip;
+    var tooltipProps = isNested ? { pathToTitle: pathToTitle } : { value: title };
+    return (react_1.default.createElement("div", { className: FacetTitle_module_css_1.default.container, onClick: onClick },
+        isNested && (react_1.default.createElement(HierarchicalAttributeTooltip_1.HierarchicalAttributeTooltip, __assign({ placement: "bottom-start" }, tooltipProps),
+            react_1.default.createElement("div", { className: FacetTitle_module_css_1.default.parent }, pathToTitle[pathToTitle.length - 2]))),
+        react_1.default.createElement("div", { className: FacetTitle_module_css_1.default.titleContainer },
+            react_1.default.createElement(TooltipComponent, __assign({ placement: "bottom-start" }, tooltipProps),
+                react_1.default.createElement("span", { className: FacetTitle_module_css_1.default.title }, title)),
+            chipLabel !== 0 && (react_1.default.createElement("div", { className: FacetTitle_module_css_1.default.chip },
+                react_1.default.createElement(ChipsCount_1.default, { label: chipLabel, onDelete: onDelete }))))));
+};
+exports.default = FacetTitle;

package/cjs/FacetContainer/components/FacetTitle/FacetTitle.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"container":"FacetTitle-container--fegMx","parent":"FacetTitle-parent--0sIc8","titleContainer":"FacetTitle-titleContainer--e8PWF","title":"FacetTitle-title--Four7","chip":"FacetTitle-chip--L9nDB"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.FacetTitle-container--fegMx{cursor:pointer;display:flex;flex-direction:column;flex-grow:1;height:100%;justify-content:center;min-width:0}.FacetTitle-parent--0sIc8{color:var(--mui-palette-text-secondary);font-size:13px;letter-spacing:0;line-height:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.FacetTitle-titleContainer--e8PWF{align-items:flex-end;display:flex;flex-direction:row;height:18px;overflow:hidden;width:100%}.FacetTitle-title--Four7{color:var(--mui-palette-text-primary);font-size:14px;font-weight:500;letter-spacing:.24px;line-height:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.FacetTitle-chip--L9nDB{display:inline;margin-left:6px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/FacetContainer/index.d.ts

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

package/cjs/FacetContainer/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FacetContainer = void 0;
+var FacetContainer_1 = require("./FacetContainer");
+Object.defineProperty(exports, "FacetContainer", { enumerable: true, get: function () { return FacetContainer_1.FacetContainer; } });

package/cjs/FacetsSelector/FacetsSelector.d.ts

@@ -4,10 +4,10 @@ import { MoreFacetItem } from './types';
 type Props = {
     open?: boolean;
     data?: MoreFacetItem[];
-    selectedFacets: FacetConfig[];
+    selectedFacetsFieldNames: string[];
     onOpen: () => void;
     onClose: () => void;
     onFacetToggle: (item: FacetConfig, selected: boolean) => void;
 };
-export declare const FacetsSelector: ({ open, data, selectedFacets, onOpen, onClose, onFacetToggle }: Props) => React.JSX.Element;
+export declare const FacetsSelector: ({ open, data, selectedFacetsFieldNames, onOpen, onClose, onFacetToggle }: Props) => React.JSX.Element;
 export default FacetsSelector;

package/cjs/FacetsSelector/FacetsSelector.js

@@ -34,7 +34,7 @@ var SearchInput_1 = require("../SearchInput");
 var helpers_1 = require("./helpers");
 var FacetsSelector_module_css_1 = __importDefault(require("./FacetsSelector.module.css"));
 var FacetsSelector = function (_a) {
-    var open = _a.open, data = _a.data, selectedFacets = _a.selectedFacets, onOpen = _a.onOpen, onClose = _a.onClose, onFacetToggle = _a.onFacetToggle;
+    var open = _a.open, data = _a.data, selectedFacetsFieldNames = _a.selectedFacetsFieldNames, onOpen = _a.onOpen, onClose = _a.onClose, onFacetToggle = _a.onFacetToggle;
     var _b = (0, react_1.useState)(''), filterText = _b[0], setFilterText = _b[1];
     var _c = (0, react_1.useState)(null), lastFacetClicked = _c[0], setLastFacetClicked = _c[1];
     var searchInputRootRef = (0, react_1.useRef)(null);
@@ -55,7 +55,7 @@ var FacetsSelector = function (_a) {
     }, [onOpen]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(SearchInput_1.SearchInput, { classes: { root: FacetsSelector_module_css_1.default.inputContainer }, onSearch: setFilterText, onFocus: handleOpen, rootRef: searchInputRootRef, value: filterText, placeholder: ui_i18n_1.default.text('Search & add attributes'), height: 40, "data-reltio-id": "reltio-search-more-facets-search-input" }),
-        react_1.default.createElement(AttributeSelectorPopup_1.AttributeSelectorPopup, { open: open, selectedFacets: selectedFacets, data: filteredList, lastFacetClicked: lastFacetClicked, anchorRef: searchInputRootRef, onListItemClick: handleListItemClick, onClose: handleClose, onSearch: setFilterText })));
+        react_1.default.createElement(AttributeSelectorPopup_1.AttributeSelectorPopup, { open: open, selectedFacetsFieldNames: selectedFacetsFieldNames, data: filteredList, lastFacetClicked: lastFacetClicked, anchorRef: searchInputRootRef, onListItemClick: handleListItemClick, onClose: handleClose, onSearch: setFilterText })));
 };
 exports.FacetsSelector = FacetsSelector;
 exports.default = exports.FacetsSelector;

package/cjs/FacetsSelector/components/AttributeSelectorPopup/AttributeSelectorPopup.d.ts

@@ -3,7 +3,7 @@ import { FacetConfig } from '@reltio/mdm-sdk';
 import { MoreFacetItem, SelectedFacet } from '../../types';
 type Props = {
     open?: boolean;
-    selectedFacets: FacetConfig[];
+    selectedFacetsFieldNames: string[];
     data?: MoreFacetItem[];
     lastFacetClicked?: SelectedFacet;
     anchorRef: React.RefObject<HTMLInputElement>;
@@ -11,5 +11,5 @@ type Props = {
     onSearch?: (value?: string) => void;
     onClose?: () => void;
 };
-export declare const AttributeSelectorPopup: ({ open, selectedFacets, data, lastFacetClicked, anchorRef, onListItemClick, onSearch, onClose }: Props) => React.JSX.Element;
+export declare const AttributeSelectorPopup: ({ open, selectedFacetsFieldNames, data, lastFacetClicked, anchorRef, onListItemClick, onSearch, onClose }: Props) => React.JSX.Element;
 export {};

package/cjs/FacetsSelector/components/AttributeSelectorPopup/AttributeSelectorPopup.js

@@ -42,7 +42,7 @@ var AttributeSelectorPopup_module_css_1 = __importDefault(require("./AttributeSe
 var defaultLastFacetClicked = {};
 var AttributeSelectorPopup = function (_a) {
     var _b, _c;
-    var open = _a.open, selectedFacets = _a.selectedFacets, _d = _a.data, data = _d === void 0 ? [] : _d, _e = _a.lastFacetClicked, lastFacetClicked = _e === void 0 ? defaultLastFacetClicked : _e, anchorRef = _a.anchorRef, onListItemClick = _a.onListItemClick, onSearch = _a.onSearch, onClose = _a.onClose;
+    var open = _a.open, selectedFacetsFieldNames = _a.selectedFacetsFieldNames, _d = _a.data, data = _d === void 0 ? [] : _d, _e = _a.lastFacetClicked, lastFacetClicked = _e === void 0 ? defaultLastFacetClicked : _e, anchorRef = _a.anchorRef, onListItemClick = _a.onListItemClick, onSearch = _a.onSearch, onClose = _a.onClose;
     var _f = (0, react_1.useState)(constants_1.DEFAULT_LIST_HEIGHT), listHeight = _f[0], setListHeight = _f[1];
     var _g = (0, helpers_1.adjustVerticalPopupLayout)(anchorRef.current, constants_1.DEFAULT_ATTRIBUTE_SELECTOR_POPUP_HEIGHT), verticalOrigin = _g.verticalOrigin, _h = _g.popupHeight, popupHeight = _h === void 0 ? constants_1.DEFAULT_ATTRIBUTE_SELECTOR_POPUP_HEIGHT : _h;
     var maxListHeight = popupHeight - constants_1.POPUP_HEADER_HEIGHT;
@@ -90,17 +90,17 @@ var AttributeSelectorPopup = function (_a) {
     var popupWidth = (_c = (_b = anchorRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) !== null && _c !== void 0 ? _c : 0;
     var handleSearchOnEnter = (0, react_1.useCallback)(function (_a) {
         var item = _a.item, groupData = _a.groupData;
-        onListItemClick(item, !(0, helpers_1.isSelectedFacet)({ facet: item, selectedFacets: selectedFacets }), groupData.groupId);
-    }, [onListItemClick, selectedFacets]);
+        onListItemClick(item, !(0, helpers_1.isSelectedFacet)({ facet: item, selectedFacetsFieldNames: selectedFacetsFieldNames }), groupData.groupId);
+    }, [onListItemClick, selectedFacetsFieldNames]);
     var _j = (0, useKeyboardNavigation_1.useKeyboardNavigation)({
         items: items,
         open: open,
         onSelectFocusedItem: handleSearchOnEnter,
-        selectedItems: selectedFacets
+        selectedItems: selectedFacetsFieldNames
     }), focusIndex = _j.focusIndex, handleKeyDown = _j.handleKeyDown;
     var containerWidth = Math.max(popupWidth || (0, mdm_sdk_1.getMaxItemWidth)('title')(groupedItems), constants_1.DEFAULT_MIN_CONTAINER_WIDTH);
     return (react_1.default.createElement(SelectionPopup_1.SelectionPopup, { open: open, action: popupActionRef, title: ui_i18n_1.default.text('Select attribute'), containerWidth: containerWidth, searchInputOnKeyDown: handleKeyDown, containerHeight: constants_1.POPUP_HEADER_HEIGHT + listHeight, anchorOrigin: popupOrigin, transformOrigin: popupOrigin, headerPlacement: verticalOrigin === 'bottom' ? 'bottom' : 'top', anchorEl: anchorRef.current, disableRestoreFocus: true, onSearch: onSearch, onClose: onClose },
-        react_1.default.createElement(FacetsList_1.FacetsList, { focusIndex: focusIndex, selectedFacets: selectedFacets, onListItemClick: onListItemClick, items: items, height: listHeight, onInnerContainerResize: handleResizeList }),
+        react_1.default.createElement(FacetsList_1.FacetsList, { focusIndex: focusIndex, selectedFacetsFieldNames: selectedFacetsFieldNames, onListItemClick: onListItemClick, items: items, height: listHeight, onInnerContainerResize: handleResizeList }),
         items.length === 0 && (react_1.default.createElement("div", { className: AttributeSelectorPopup_module_css_1.default.noResultsCaptionContainer },
             react_1.default.createElement(Typography_1.default, { variant: "caption", display: "block", gutterBottom: true }, ui_i18n_1.default.text('No results found'))))));
 };

package/cjs/FacetsSelector/components/FacetsList/FacetsList.d.ts

@@ -1,5 +1,5 @@
 import React, { ComponentProps } from 'react';
-import { AttributeType, FacetConfig } from '@reltio/mdm-sdk';
+import { AttributeType } from '@reltio/mdm-sdk';
 import { VirtualGroupedList } from '../../../VirtualGroupedList';
 type Data = {
     fieldName: string;
@@ -10,8 +10,8 @@ type Data = {
 };
 type Props = Omit<ComponentProps<typeof VirtualGroupedList>, 'renderItem' | 'getItemSize'> & {
     focusIndex: number;
-    selectedFacets: FacetConfig[];
+    selectedFacetsFieldNames: string[];
     onListItemClick: (data: Data, checked: boolean, groupId: string) => void;
 };
-export declare const FacetsList: ({ onListItemClick, focusIndex, selectedFacets, ...otherProps }: Props) => React.JSX.Element;
+export declare const FacetsList: ({ onListItemClick, focusIndex, selectedFacetsFieldNames, ...otherProps }: Props) => React.JSX.Element;
 export {};

package/cjs/FacetsSelector/components/FacetsList/FacetsList.js

@@ -58,24 +58,24 @@ var Highlighter_1 = require("../../../Highlighter");
 var AttributeGroupIcon_1 = require("../../../AttributeGroupIcon");
 var constants_1 = require("../../constants");
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var ExpandedValueTooltip_1 = require("../../../ExpandedValueTooltip");
 var FacetsList_module_css_1 = __importDefault(require("./FacetsList.module.css"));
 var ITEM_GROUP_TITLE_HEIGHT = 40;
 var FacetsList = function (_a) {
-    var onListItemClick = _a.onListItemClick, focusIndex = _a.focusIndex, selectedFacets = _a.selectedFacets, otherProps = __rest(_a, ["onListItemClick", "focusIndex", "selectedFacets"]);
-    var selectedFacetsRef = (0, react_1.useRef)(null);
-    selectedFacetsRef.current = selectedFacets;
+    var onListItemClick = _a.onListItemClick, focusIndex = _a.focusIndex, selectedFacetsFieldNames = _a.selectedFacetsFieldNames, otherProps = __rest(_a, ["onListItemClick", "focusIndex", "selectedFacetsFieldNames"]);
     var focusIndexRef = (0, react_1.useRef)(null);
     focusIndexRef.current = focusIndex;
     var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var renderItem = (0, react_1.useCallback)(function (style, _a, index) {
         var item = _a.item, level = _a.level, groupId = _a.groupId;
-        var checked = (0, helpers_1.isSelectedFacet)({ facet: item, selectedFacets: selectedFacetsRef.current });
+        var checked = (0, helpers_1.isSelectedFacet)({ facet: item, selectedFacetsFieldNames: selectedFacetsFieldNames });
         var isFocused = focusIndexRef.current === index;
         return (react_1.default.createElement(AttributeListItem_1.AttributeListItem, { key: "item-".concat(groupId, "-").concat(item.fieldName), onClick: onListItemClick, data: item, label: react_1.default.createElement(Highlighter_1.Highlighter, { text: item.title, highlight: item.filterText }), labelInText: item.title, level: level, style: style, checked: checked, isFocused: isFocused, groupId: groupId, LogoIcon: item.LogoIcon }));
-    }, [onListItemClick]);
+    }, [onListItemClick, selectedFacetsFieldNames]);
     var renderGroupTitle = (0, react_1.useCallback)(function (style, item) { return (react_1.default.createElement(ListItem_1.default, { component: 'div', className: FacetsList_module_css_1.default.subHeader, style: style, key: "group-".concat(item.item.id) },
         item.item.needGroupIcon && react_1.default.createElement(AttributeGroupIcon_1.AttributeGroupIcon, { metadata: metadata, group: item.item }),
-        item.item.title)); }, [metadata]);
+        react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: item.item.title },
+            react_1.default.createElement("div", { className: FacetsList_module_css_1.default.subHeaderTitle }, item.item.title)))); }, [metadata]);
     var getItemSize = (0, react_1.useCallback)(function (i, item) { return (item.items ? ITEM_GROUP_TITLE_HEIGHT : constants_1.FACET_LIST_ITEM_HEIGHT); }, []);
     return (react_1.default.createElement(VirtualGroupedList_1.VirtualGroupedList, __assign({ getItemSize: getItemSize, renderGroupTitle: renderGroupTitle, renderItem: renderItem, focusIndex: focusIndex }, otherProps, { disableHorizontalScrollbar: true })));
 };

package/cjs/FacetsSelector/components/FacetsList/FacetsList.module.css.js

@@ -1,9 +1,9 @@
-const styles = {"subHeader":"FacetsList-subHeader--jcWLn","icon":"FacetsList-icon--HO3ZO","recommendedIcon":"FacetsList-recommendedIcon--ekXsX"};
+const styles = {"subHeader":"FacetsList-subHeader--jcWLn","icon":"FacetsList-icon--HO3ZO","recommendedIcon":"FacetsList-recommendedIcon--ekXsX","subHeaderTitle":"FacetsList-subHeaderTitle--iOKhO"};
 if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.FacetsList-subHeader--jcWLn{align-items:center;background-color:#f5f5f5;color:rgba(0,0,0,.84);display:flex;font-size:14px;font-weight:500;margin:0;padding:0 16px}.FacetsList-subHeader--jcWLn .FacetsList-icon--HO3ZO{margin-right:16px;max-height:25px;max-width:25px}.FacetsList-recommendedIcon--ekXsX:is(.FacetsList-subHeader--jcWLn .FacetsList-icon--HO3ZO){height:20px;width:20px}`;
+    style.innerHTML = `.FacetsList-subHeader--jcWLn{align-items:center;background-color:#f5f5f5;color:rgba(0,0,0,.84);display:flex;font-size:14px;font-weight:500;margin:0;padding:0 16px}.FacetsList-subHeader--jcWLn .FacetsList-icon--HO3ZO{margin-right:16px;max-height:25px;max-width:25px}.FacetsList-recommendedIcon--ekXsX:is(.FacetsList-subHeader--jcWLn .FacetsList-icon--HO3ZO){height:20px;width:20px}.FacetsList-subHeaderTitle--iOKhO{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;
     head.appendChild(style);
 }
 module.exports = styles;

package/cjs/FacetsSelector/helpers.d.ts

@@ -5,9 +5,9 @@ declare const adjustVerticalPopupLayout: (anchorEl: HTMLElement, popupHeight: nu
     popupHeight: number;
 };
 declare const filterItemsInGroups: (groups: MoreFacetItem[], filterText: string) => MoreFacetItem[];
-declare const isSelectedFacet: ({ facet, selectedFacets }: {
+declare const isSelectedFacet: ({ facet, selectedFacetsFieldNames }: {
     facet: any;
-    selectedFacets: any;
+    selectedFacetsFieldNames: any;
 }) => boolean;
 declare const constructPopoverOrigin: (verticalOrigin: PopoverOrigin["vertical"], horizontalOrigin?: PopoverOrigin["horizontal"]) => {
     vertical: number | "bottom" | "top" | "center";

package/cjs/FacetsSelector/helpers.js

@@ -54,8 +54,8 @@ var filterItemsInGroups = function (groups, filterText) {
 };
 exports.filterItemsInGroups = filterItemsInGroups;
 var isSelectedFacet = function (_a) {
-    var facet = _a.facet, selectedFacets = _a.selectedFacets;
-    return !!selectedFacets.find(function (selFacet) { return selFacet.fieldName === facet.fieldName || selFacet.fieldName.includes("".concat(facet.fieldName, ".")); });
+    var facet = _a.facet, selectedFacetsFieldNames = _a.selectedFacetsFieldNames;
+    return !!selectedFacetsFieldNames.find(function (fieldName) { return fieldName === facet.fieldName || fieldName.includes("".concat(facet.fieldName, ".")); });
 };
 exports.isSelectedFacet = isSelectedFacet;
 var constructPopoverOrigin = function (verticalOrigin, horizontalOrigin) {

package/cjs/HierarchyNodeTitle/HierarchyNodeTitle.test.js

@@ -68,7 +68,21 @@ var defaultProps = {
     entityUri: 'entities/123',
     anchorEl: document.createElement('div')
 };
-var defaultMdmValues = { uiPath: 'http://localhost:3000/ui/sokol/', metadata: { entityTypes: [], relationTypes: [] } };
+var getDefaultMetadata = function (masking) {
+    if (masking === void 0) { masking = false; }
+    return ({
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                attributes: [
+                    __assign({ uri: 'configuration/entityTypes/HCP/attributes/FirstName', type: 'String', name: 'FirstName', label: 'First Name' }, (masking && { masking: { regexPattern: '.*' } }))
+                ]
+            }
+        ],
+        relationTypes: []
+    });
+};
+var defaultMdmValues = { uiPath: 'http://localhost:3000/ui/sokol/', metadata: getDefaultMetadata(), showMasking: true };
 var defaultMdmActions = { openEntity: jest.fn() };
 var setUp = function (_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d, _e = _b.mdmActions, mdmActions = _e === void 0 ? defaultMdmActions : _e;
@@ -141,6 +155,9 @@ describe('Hierarchy node title tests', function () {
                         }); })];
                 case 2:
                     _a.sent();
+                    expect(mdm_sdk_1.getEntity).toHaveBeenCalledWith('entities/123', {
+                        options: 'sendHidden,addRefAttrUriToCrosswalk'
+                    });
                     (0, react_2.within)(tooltip).getByAltText('fallback entity avatar');
                     (0, react_2.within)(tooltip).getByText('perfect entity');
                     (0, react_2.within)(tooltip).getByText('ID:');
@@ -153,4 +170,69 @@ describe('Hierarchy node title tests', function () {
             }
         });
     }); });
+    it('should pass sendMasked option to getEntity if metadata has masking', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, entityWithMasking;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ mdmValues: __assign(__assign({}, defaultMdmValues), { metadata: getDefaultMetadata(true) }) }).user;
+                    return [4 /*yield*/, user.hover(react_2.screen.getByText('Title'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByRole('tooltip')).toBeInTheDocument();
+                    entityWithMasking = {
+                        uri: 'entities/123',
+                        label: '***t entity',
+                        type: 'configuration/entityTypes/HCP'
+                    };
+                    return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, resolveGetEntity(entityWithMasking)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    expect(mdm_sdk_1.getEntity).toHaveBeenCalledWith('entities/123', {
+                        options: 'sendHidden,addRefAttrUriToCrosswalk,sendMasked'
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not pass sendMasked option to getEntity if metadata has masking but showMasking is false', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({
+                        mdmValues: __assign(__assign({}, defaultMdmValues), { metadata: getDefaultMetadata(true), showMasking: false })
+                    }).user;
+                    return [4 /*yield*/, user.hover(react_2.screen.getByText('Title'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.getByRole('tooltip')).toBeInTheDocument();
+                    return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, resolveGetEntity(entity)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    expect(mdm_sdk_1.getEntity).toHaveBeenCalledWith('entities/123', {
+                        options: 'sendHidden,addRefAttrUriToCrosswalk'
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/cjs/HierarchyNodeTitle/useEntityDetails.js

@@ -4,20 +4,24 @@ exports.useEntityDetails = void 0;
 var react_1 = require("react");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var useSafePromise_1 = require("../hooks/useSafePromise");
+var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
 var useEntityDetails = function (entityUri) {
     var _a = (0, react_1.useState)(null), entityDetails = _a[0], setEntityDetails = _a[1];
     var _b = (0, react_1.useState)(false), isLoading = _b[0], setIsLoading = _b[1];
     var safePromise = (0, useSafePromise_1.useSafePromise)();
     var cancelRequest = (0, react_1.useCallback)(function () { return safePromise(Promise.resolve()); }, [safePromise]);
+    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
+    var showMasking = (0, MdmModuleContext_1.useMdmShowMasking)();
+    var entityOptions = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.addGetEntityMaskingOptions)(metadata, { showMasking: showMasking, showAccess: false }); }, [metadata, showMasking]);
     var showEntityDetails = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(function () {
         setIsLoading(true);
-        safePromise((0, mdm_sdk_1.getEntity)(entityUri))
+        safePromise((0, mdm_sdk_1.getEntity)(entityUri, entityOptions))
             .then(setEntityDetails)
             .catch(function (error) {
             console.warn('Failed to load entity', error);
         })
             .finally(function () { return setIsLoading(false); });
-    }, 1000), [entityUri, safePromise]);
+    }, 1000), [entityUri, safePromise, entityOptions]);
     var hideEntityDetails = (0, react_1.useCallback)(function () {
         cancelRequest();
         showEntityDetails.cancel();