@reltio/components 1.4.2185 → 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/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/index.d.ts

@@ -190,6 +190,7 @@ export { FacetGroup } from './FacetGroup';
 export { QuickFiltersEntityTypeFacet } from './QuickFiltersEntityTypeFacet';
 export { FacetGroupTitle } from './FacetGroupTitle';
 export { FacetsSelector } from './FacetsSelector';
+export { FacetContainer } from './FacetContainer';
 export { withTooltip } from './HOCs/withTooltip';
 export { withAsyncMount } from './HOCs/withAsyncMount';
 export { withDragHandle } from './HOCs/withDragHandle';

package/cjs/index.js

@@ -18,10 +18,10 @@ exports.NestedAttributeEditor = exports.NestedAttribute = exports.MoreAttributes
 exports.DropDownSelector = exports.ReactSelectOptionWithCheckIcon = exports.ReactSelectMenuWithPopper = exports.ReactSelectMenuList = exports.ReactSelectLoadMoreButton = exports.ReactSelectDropdownIndicatorWithIconButton = exports.ReactSelectDropdownIndicator = exports.Highlighter = exports.HierarchyNodeTitle = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.ExpandableSearchInput = exports.ErrorPopup = exports.ErrorBoundary = exports.SegmentIdLink = exports.EntityUriLink = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.Drawer = exports.DataTypeValue = exports.DataTenantBadge = exports.ConnectionRelationTypeSelector = exports.CollaborationItem = exports.ConfirmationDialog = exports.CommentsContainer = exports.ColoredSourceIcon = exports.CollapseButton = exports.TreeChart = exports.TableWithBars = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleAttributeEditor = exports.SimpleAttribute = exports.RowCellAutoSizer = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.ReferenceAttribute = exports.ImageAttributesLine = exports.ReadOnlyAttributesPager = exports.ReadOnlyAttributesList = exports.ReadOnlyAttribute = exports.ReadOnlyAttributeValuesBlock = exports.PieChart = exports.OvIcon = void 0;
 exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.SimpleMatchRules = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportButton = exports.ReadableSearchQueryBuilder = exports.ReadableSearchQuery = exports.LogicOperator = exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.RelevanceScoreBadge = exports.RequiredMark = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.ProfilesList = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.ImageGalleryDialog = exports.RelationTypesSelector = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.EmptyStub = exports.MaskingSwitcher = exports.FileTypeEditor = exports.EmptySearchResult = exports.DropDownEditor = exports.FilterValueEditor = exports.MultiValueChip = exports.TextEditor = exports.DateRangeEditor = exports.NumberEditor = exports.DataTypeValueEditor = exports.DateEditor = exports.ErrorWrapper = exports.ErrorMessage = exports.HIDE = exports.INSERT_RIGHT = exports.INSERT_LEFT = exports.ConfigColumnPopup = exports.ConfigureColumnsPopup = exports.ConnectionEditor = void 0;
 exports.FacetGroup = exports.QuickFiltersFacetPanel = exports.AdvancedSearchFabButton = exports.QuickFiltersDrawer = exports.DefaultHeadCellRendererWithTooltip = exports.LazyRenderer = exports.MetadataTypesSelector = exports.DateRangeSelector = exports.UpSetChart = exports.GaugeChart = exports.RelationEditor = exports.ReltioMap = exports.Marginator = exports.LightArrowTooltip = exports.ScrollableTabs = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopup = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.RCTreeSwitchRenderer = exports.RCTreeLevelLines = exports.RCTree = exports.reactSortableTreeHelpers = exports.ReactSortableTree = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = void 0;
-exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.RelationContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockNavigationContext = exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = exports.MdmModuleProvider = exports.withColumnConfigurator = exports.withBlockNavigation = exports.withCollapseButton = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.FacetsSelector = exports.FacetGroupTitle = exports.QuickFiltersEntityTypeFacet = void 0;
-exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.ThemeProvider = exports.ProfileTablesContext = exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useDeleteUnmaskedAttributeForRelation = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = exports.useReloadData = exports.ReloadDataProvider = exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = void 0;
-exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttrPathFromColumnId = exports.getAttributeHeight = exports.getNestedPathByColumnId = exports.applyCompactValuesCountConstraint = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useSegmentsLoader = exports.useDndBasicTableScrollModifier = exports.useDynamicYAxisWidth = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = exports.useMarkers = exports.useMaskedAttribute = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = void 0;
-exports.mockComputedStyles = exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = void 0;
+exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.RelationContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockNavigationContext = exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = exports.MdmModuleProvider = exports.withColumnConfigurator = exports.withBlockNavigation = exports.withCollapseButton = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.FacetContainer = exports.FacetsSelector = exports.FacetGroupTitle = exports.QuickFiltersEntityTypeFacet = void 0;
+exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.ThemeProvider = exports.ProfileTablesContext = exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useDeleteUnmaskedAttributeForRelation = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = exports.useReloadData = exports.ReloadDataProvider = exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = void 0;
+exports.getMuiIconsByName = exports.getMuiIconByName = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttrPathFromColumnId = exports.getAttributeHeight = exports.getNestedPathByColumnId = exports.applyCompactValuesCountConstraint = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useSegmentsLoader = exports.useDndBasicTableScrollModifier = exports.useDynamicYAxisWidth = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = exports.useMarkers = exports.useMaskedAttribute = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = void 0;
+exports.mockComputedStyles = exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = void 0;
 // components
 var ActionButton_1 = require("./ActionButton");
 Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.ActionButton; } });
@@ -417,6 +417,8 @@ var FacetGroupTitle_1 = require("./FacetGroupTitle");
 Object.defineProperty(exports, "FacetGroupTitle", { enumerable: true, get: function () { return FacetGroupTitle_1.FacetGroupTitle; } });
 var FacetsSelector_1 = require("./FacetsSelector");
 Object.defineProperty(exports, "FacetsSelector", { enumerable: true, get: function () { return FacetsSelector_1.FacetsSelector; } });
+var FacetContainer_1 = require("./FacetContainer");
+Object.defineProperty(exports, "FacetContainer", { enumerable: true, get: function () { return FacetContainer_1.FacetContainer; } });
 // HOCs
 var withTooltip_1 = require("./HOCs/withTooltip");
 Object.defineProperty(exports, "withTooltip", { enumerable: true, get: function () { return withTooltip_1.withTooltip; } });

package/index.d.ts

@@ -190,6 +190,7 @@ export { FacetGroup } from './FacetGroup';
 export { QuickFiltersEntityTypeFacet } from './QuickFiltersEntityTypeFacet';
 export { FacetGroupTitle } from './FacetGroupTitle';
 export { FacetsSelector } from './FacetsSelector';
+export { FacetContainer } from './FacetContainer';
 export { withTooltip } from './HOCs/withTooltip';
 export { withAsyncMount } from './HOCs/withAsyncMount';
 export { withDragHandle } from './HOCs/withDragHandle';

package/index.js

@@ -190,6 +190,7 @@ export { FacetGroup } from './FacetGroup';
 export { QuickFiltersEntityTypeFacet } from './QuickFiltersEntityTypeFacet';
 export { FacetGroupTitle } from './FacetGroupTitle';
 export { FacetsSelector } from './FacetsSelector';
+export { FacetContainer } from './FacetContainer';
 // HOCs
 export { withTooltip } from './HOCs/withTooltip';
 export { withAsyncMount } from './HOCs/withAsyncMount';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2185",
+  "version": "1.4.2186",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",