@reltio/components 1.4.2184 → 1.4.2186

package/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/FacetContainer/FacetContainer.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import CloseIcon from '@mui/icons-material/Close';
+import { CollapseButton } from '../CollapseButton';
+import { SmallIconButtonWithTooltip } from '../SmallIconButton';
+import { withTooltip } from '../HOCs/withTooltip';
+import FacetTitle from './components/FacetTitle/FacetTitle';
+import RecommendedIcon from './Recommended.svg';
+import styles from './FacetContainer.module.css';
+export var RecommendedIconWithTooltip = withTooltip(RecommendedIcon);
+export 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 = useState(isOpenByDefault), open = _f[0], setOpen = _f[1];
+    var toggleOpen = function () {
+        setOpen(!open);
+    };
+    return (React.createElement("div", { className: classnames(styles.facetContainer, (_b = {},
+            _b[styles.openedFacetContainer] = open,
+            _b[styles.closedFacetContainer] = !open,
+            _b[styles.highlighted] = isHighlighted,
+            _b)), "data-reltio-id": "search-facet-container-".concat(title) },
+        React.createElement("div", { className: styles.titleContainer },
+            React.createElement(SmallIconButtonWithTooltip, { tooltipTitle: i18n.text('Remove'), icon: CloseIcon, onClick: onClose, className: styles.iconButton, size: "XXS" }),
+            isRecommended && (React.createElement(RecommendedIconWithTooltip, { className: styles.recommendedIcon, tooltipTitle: i18n.text('Recommended'), showForDisabled: true })),
+            React.createElement(FacetTitle, { title: title, pathToTitle: pathToTitle, chipLabel: chipLabel, onDelete: onDeleteChip, onClick: toggleOpen }),
+            React.createElement(CollapseButton, { onClick: toggleOpen, isOpen: open, className: styles.iconButton, size: "S", tooltipTitle: open ? i18n.text('Collapse attribute') : i18n.text('Expand attribute'), tooltipPlacement: "bottom-end" })),
+        open ? children : null));
+};

package/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);
+}
+export default styles;

package/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);
+}
+export default styles;

package/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/FacetContainer/components/ChipsCount/ChipsCount.js

@@ -0,0 +1,39 @@
+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;
+};
+import React from 'react';
+import i18n from 'ui-i18n';
+import Chip from '@mui/material/Chip';
+import ClearIcon from '@mui/icons-material/Cancel';
+import { withTooltip } from '../../../HOCs/withTooltip';
+import styles from './ChipCount.module.css';
+export var ClearIconWithTooltip = withTooltip(ClearIcon);
+var ChipsCount = function (_a) {
+    var label = _a.label, onDelete = _a.onDelete, extraProps = __rest(_a, ["label", "onDelete"]);
+    return (React.createElement(Chip, __assign({ className: styles.root, label: i18n.number(label), onDelete: onDelete, variant: "outlined", classes: {
+            root: styles.root,
+            outlined: styles.outlined,
+            deleteIcon: styles.deleteIcon,
+            label: styles.label
+        }, deleteIcon: React.createElement(ClearIconWithTooltip, { tooltipTitle: i18n.text('Clear') }) }, extraProps)));
+};
+export default ChipsCount;

package/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/FacetContainer/components/FacetTitle/FacetTitle.js

@@ -0,0 +1,31 @@
+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);
+};
+import React from 'react';
+import { ExpandedValueTooltip } from '../../../ExpandedValueTooltip';
+import { HierarchicalAttributeTooltip } from '../../../HierarchicalAttributeTooltip';
+import ChipsCount from '../ChipsCount/ChipsCount';
+import styles from './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 : ExpandedValueTooltip;
+    var tooltipProps = isNested ? { pathToTitle: pathToTitle } : { value: title };
+    return (React.createElement("div", { className: styles.container, onClick: onClick },
+        isNested && (React.createElement(HierarchicalAttributeTooltip, __assign({ placement: "bottom-start" }, tooltipProps),
+            React.createElement("div", { className: styles.parent }, pathToTitle[pathToTitle.length - 2]))),
+        React.createElement("div", { className: styles.titleContainer },
+            React.createElement(TooltipComponent, __assign({ placement: "bottom-start" }, tooltipProps),
+                React.createElement("span", { className: styles.title }, title)),
+            chipLabel !== 0 && (React.createElement("div", { className: styles.chip },
+                React.createElement(ChipsCount, { label: chipLabel, onDelete: onDelete }))))));
+};
+export default FacetTitle;

package/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);
+}
+export default styles;

package/FacetContainer/index.d.ts

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

package/FacetContainer/index.js

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

package/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/FacetsSelector/FacetsSelector.js

@@ -5,7 +5,7 @@ import { SearchInput } from '../SearchInput';
 import { filterItemsInGroups } from './helpers';
 import styles from './FacetsSelector.module.css';
 export 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 = useState(''), filterText = _b[0], setFilterText = _b[1];
     var _c = useState(null), lastFacetClicked = _c[0], setLastFacetClicked = _c[1];
     var searchInputRootRef = useRef(null);
@@ -26,6 +26,6 @@ export var FacetsSelector = function (_a) {
     }, [onOpen]);
     return (React.createElement(React.Fragment, null,
         React.createElement(SearchInput, { classes: { root: styles.inputContainer }, onSearch: setFilterText, onFocus: handleOpen, rootRef: searchInputRootRef, value: filterText, placeholder: i18n.text('Search & add attributes'), height: 40, "data-reltio-id": "reltio-search-more-facets-search-input" }),
-        React.createElement(AttributeSelectorPopup, { open: open, selectedFacets: selectedFacets, data: filteredList, lastFacetClicked: lastFacetClicked, anchorRef: searchInputRootRef, onListItemClick: handleListItemClick, onClose: handleClose, onSearch: setFilterText })));
+        React.createElement(AttributeSelectorPopup, { open: open, selectedFacetsFieldNames: selectedFacetsFieldNames, data: filteredList, lastFacetClicked: lastFacetClicked, anchorRef: searchInputRootRef, onListItemClick: handleListItemClick, onClose: handleClose, onSearch: setFilterText })));
 };
 export default FacetsSelector;

package/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/FacetsSelector/components/AttributeSelectorPopup/AttributeSelectorPopup.js

@@ -13,7 +13,7 @@ import styles from './AttributeSelectorPopup.module.css';
 var defaultLastFacetClicked = {};
 export 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 = useState(DEFAULT_LIST_HEIGHT), listHeight = _f[0], setListHeight = _f[1];
     var _g = adjustVerticalPopupLayout(anchorRef.current, DEFAULT_ATTRIBUTE_SELECTOR_POPUP_HEIGHT), verticalOrigin = _g.verticalOrigin, _h = _g.popupHeight, popupHeight = _h === void 0 ? DEFAULT_ATTRIBUTE_SELECTOR_POPUP_HEIGHT : _h;
     var maxListHeight = popupHeight - POPUP_HEADER_HEIGHT;
@@ -61,17 +61,17 @@ export 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 = useCallback(function (_a) {
         var item = _a.item, groupData = _a.groupData;
-        onListItemClick(item, !isSelectedFacet({ facet: item, selectedFacets: selectedFacets }), groupData.groupId);
-    }, [onListItemClick, selectedFacets]);
+        onListItemClick(item, !isSelectedFacet({ facet: item, selectedFacetsFieldNames: selectedFacetsFieldNames }), groupData.groupId);
+    }, [onListItemClick, selectedFacetsFieldNames]);
     var _j = useKeyboardNavigation({
         items: items,
         open: open,
         onSelectFocusedItem: handleSearchOnEnter,
-        selectedItems: selectedFacets
+        selectedItems: selectedFacetsFieldNames
     }), focusIndex = _j.focusIndex, handleKeyDown = _j.handleKeyDown;
     var containerWidth = Math.max(popupWidth || getMaxItemWidth('title')(groupedItems), DEFAULT_MIN_CONTAINER_WIDTH);
     return (React.createElement(SelectionPopup, { open: open, action: popupActionRef, title: i18n.text('Select attribute'), containerWidth: containerWidth, searchInputOnKeyDown: handleKeyDown, containerHeight: POPUP_HEADER_HEIGHT + listHeight, anchorOrigin: popupOrigin, transformOrigin: popupOrigin, headerPlacement: verticalOrigin === 'bottom' ? 'bottom' : 'top', anchorEl: anchorRef.current, disableRestoreFocus: true, onSearch: onSearch, onClose: onClose },
-        React.createElement(FacetsList, { focusIndex: focusIndex, selectedFacets: selectedFacets, onListItemClick: onListItemClick, items: items, height: listHeight, onInnerContainerResize: handleResizeList }),
+        React.createElement(FacetsList, { focusIndex: focusIndex, selectedFacetsFieldNames: selectedFacetsFieldNames, onListItemClick: onListItemClick, items: items, height: listHeight, onInnerContainerResize: handleResizeList }),
         items.length === 0 && (React.createElement("div", { className: styles.noResultsCaptionContainer },
             React.createElement(Typography, { variant: "caption", display: "block", gutterBottom: true }, i18n.text('No results found'))))));
 };

package/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/FacetsSelector/components/FacetsList/FacetsList.js

@@ -29,24 +29,24 @@ import { Highlighter } from '../../../Highlighter';
 import { AttributeGroupIcon } from '../../../AttributeGroupIcon';
 import { FACET_LIST_ITEM_HEIGHT } from '../../constants';
 import { useMdmMetadata } from '../../../contexts/MdmModuleContext';
+import { ExpandedValueTooltip } from '../../../ExpandedValueTooltip';
 import styles from './FacetsList.module.css';
 var ITEM_GROUP_TITLE_HEIGHT = 40;
 export var FacetsList = function (_a) {
-    var onListItemClick = _a.onListItemClick, focusIndex = _a.focusIndex, selectedFacets = _a.selectedFacets, otherProps = __rest(_a, ["onListItemClick", "focusIndex", "selectedFacets"]);
-    var selectedFacetsRef = useRef(null);
-    selectedFacetsRef.current = selectedFacets;
+    var onListItemClick = _a.onListItemClick, focusIndex = _a.focusIndex, selectedFacetsFieldNames = _a.selectedFacetsFieldNames, otherProps = __rest(_a, ["onListItemClick", "focusIndex", "selectedFacetsFieldNames"]);
     var focusIndexRef = useRef(null);
     focusIndexRef.current = focusIndex;
     var metadata = useMdmMetadata();
     var renderItem = useCallback(function (style, _a, index) {
         var item = _a.item, level = _a.level, groupId = _a.groupId;
-        var checked = isSelectedFacet({ facet: item, selectedFacets: selectedFacetsRef.current });
+        var checked = isSelectedFacet({ facet: item, selectedFacetsFieldNames: selectedFacetsFieldNames });
         var isFocused = focusIndexRef.current === index;
         return (React.createElement(AttributeListItem, { key: "item-".concat(groupId, "-").concat(item.fieldName), onClick: onListItemClick, data: item, label: React.createElement(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 = useCallback(function (style, item) { return (React.createElement(ListItem, { component: 'div', className: styles.subHeader, style: style, key: "group-".concat(item.item.id) },
         item.item.needGroupIcon && React.createElement(AttributeGroupIcon, { metadata: metadata, group: item.item }),
-        item.item.title)); }, [metadata]);
+        React.createElement(ExpandedValueTooltip, { value: item.item.title },
+            React.createElement("div", { className: styles.subHeaderTitle }, item.item.title)))); }, [metadata]);
     var getItemSize = useCallback(function (i, item) { return (item.items ? ITEM_GROUP_TITLE_HEIGHT : FACET_LIST_ITEM_HEIGHT); }, []);
     return (React.createElement(VirtualGroupedList, __assign({ getItemSize: getItemSize, renderGroupTitle: renderGroupTitle, renderItem: renderItem, focusIndex: focusIndex }, otherProps, { disableHorizontalScrollbar: true })));
 };

package/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);
 }
 export default styles;

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

@@ -49,8 +49,8 @@ var filterItemsInGroups = function (groups, filterText) {
     return groups.map(function (group) { return (__assign(__assign({}, group), { facets: getFilteredFacets(group.facets, filterText) })); });
 };
 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, ".")); });
 };
 var constructPopoverOrigin = function (verticalOrigin, horizontalOrigin) {
     if (horizontalOrigin === void 0) { horizontalOrigin = 'right'; }

package/HierarchyNodeTitle/HierarchyNodeTitle.test.js

@@ -63,7 +63,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;
@@ -136,6 +150,9 @@ describe('Hierarchy node title tests', function () {
                         }); })];
                 case 2:
                     _a.sent();
+                    expect(getEntity).toHaveBeenCalledWith('entities/123', {
+                        options: 'sendHidden,addRefAttrUriToCrosswalk'
+                    });
                     within(tooltip).getByAltText('fallback entity avatar');
                     within(tooltip).getByText('perfect entity');
                     within(tooltip).getByText('ID:');
@@ -148,4 +165,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(screen.getByText('Title'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('tooltip')).toBeInTheDocument();
+                    entityWithMasking = {
+                        uri: 'entities/123',
+                        label: '***t entity',
+                        type: 'configuration/entityTypes/HCP'
+                    };
+                    return [4 /*yield*/, 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(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(screen.getByText('Title'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('tooltip')).toBeInTheDocument();
+                    return [4 /*yield*/, 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(getEntity).toHaveBeenCalledWith('entities/123', {
+                        options: 'sendHidden,addRefAttrUriToCrosswalk'
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/HierarchyNodeTitle/useEntityDetails.js

@@ -1,20 +1,24 @@
-import { useState, useCallback, useEffect } from 'react';
-import { getEntity, debounce } from '@reltio/mdm-sdk';
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { getEntity, debounce, addGetEntityMaskingOptions } from '@reltio/mdm-sdk';
 import { useSafePromise } from '../hooks/useSafePromise';
+import { useMdmMetadata, useMdmShowMasking } from '../contexts/MdmModuleContext';
 export var useEntityDetails = function (entityUri) {
     var _a = useState(null), entityDetails = _a[0], setEntityDetails = _a[1];
     var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
     var safePromise = useSafePromise();
     var cancelRequest = useCallback(function () { return safePromise(Promise.resolve()); }, [safePromise]);
+    var metadata = useMdmMetadata();
+    var showMasking = useMdmShowMasking();
+    var entityOptions = useMemo(function () { return addGetEntityMaskingOptions(metadata, { showMasking: showMasking, showAccess: false }); }, [metadata, showMasking]);
     var showEntityDetails = useCallback(debounce(function () {
         setIsLoading(true);
-        safePromise(getEntity(entityUri))
+        safePromise(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 = useCallback(function () {
         cancelRequest();
         showEntityDetails.cancel();

package/HierarchyNodeTitle/useEntityDetails.test.js

@@ -45,12 +45,27 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+import React from 'react';
 import { renderHook, act } from '@testing-library/react-hooks';
 import { getEntity, debounce } from '@reltio/mdm-sdk';
+import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 import { useEntityDetails } from './useEntityDetails';
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getEntity: jest.fn(), debounce: jest.fn() })); });
+var entity = { uri: 'entities/123', type: 'configuration/entityTypes/HCP' };
+var defaultMdmValues = {
+    metadata: {
+        entityTypes: []
+    }
+};
 describe('useEntityDetails', function () {
-    var entity = { uri: 'entities/123', type: 'configuration/entityTypes/HCP' };
+    var setUp = function (_a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? entity.uri : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d;
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(MdmModuleProvider, { values: mdmValues }, children));
+        };
+        return renderHook(useEntityDetails, { initialProps: props, wrapper: Providers });
+    };
     beforeEach(function () {
         getEntity.mockResolvedValue(entity);
         debounce.mockImplementation(function (fn) { return jest.requireActual('@reltio/mdm-sdk').debounce(fn, 10); });
@@ -66,7 +81,7 @@ describe('useEntityDetails', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+                    result = setUp().result;
                     expect(result.current.isLoading).toBe(false);
                     act(function () {
                         result.current.showEntityDetails();
@@ -78,7 +93,7 @@ describe('useEntityDetails', function () {
                     });
                     expect(result.current.isLoading).toBe(true);
                     expect(result.current.entityDetails).toBe(null);
-                    expect(getEntity).toHaveBeenCalledWith(entity.uri);
+                    expect(getEntity).toHaveBeenCalledWith(entity.uri, { options: 'sendHidden,addRefAttrUriToCrosswalk' });
                     return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 return [2 /*return*/, Promise.resolve()];
@@ -97,7 +112,7 @@ describe('useEntityDetails', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+                    result = setUp().result;
                     return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 result.current.showEntityDetails();
@@ -121,7 +136,7 @@ describe('useEntityDetails', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+                    result = setUp().result;
                     act(function () {
                         result.current.showEntityDetails();
                         jest.runAllTimers();
@@ -144,7 +159,7 @@ describe('useEntityDetails', function () {
         });
     }); });
     it('should clear timeout if hideEntityDetails has been called before request started', function () {
-        var result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+        var result = setUp().result;
         act(function () {
             result.current.showEntityDetails();
         });
@@ -167,12 +182,12 @@ describe('useEntityDetails', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+                    result = setUp().result;
                     act(function () {
                         result.current.showEntityDetails();
                         jest.runAllTimers();
                     });
-                    expect(getEntity).toHaveBeenCalledWith('entities/123');
+                    expect(getEntity).toHaveBeenCalledWith('entities/123', { options: 'sendHidden,addRefAttrUriToCrosswalk' });
                     expect(result.current.isLoading).toBe(true);
                     expect(result.current.entityDetails).toBe(null);
                     act(function () {
@@ -201,7 +216,7 @@ describe('useEntityDetails', function () {
                 case 0:
                     warnSpy = jest.spyOn(global.console, 'warn');
                     getEntity.mockRejectedValue({ errorCode: 403, errorMessage: 'Access is denied' });
-                    result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+                    result = setUp().result;
                     act(function () {
                         result.current.showEntityDetails();
                         jest.runAllTimers();