@reltio/components 1.4.1778 → 1.4.1780

package/cjs/components/ActionButton/ActionButton.d.ts

@@ -7,10 +7,11 @@ export declare enum ActionButtonMode {
 export type Props = {
     className?: string;
     disabled?: boolean;
-    icon: React.ElementType;
+    icon?: React.ElementType;
     label: string;
+    description?: string;
     mode: ActionButtonMode;
-    onClick: () => void;
+    onClick?: () => void;
     onMenuClose?: () => void;
 };
 export declare const ActionButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;

package/cjs/components/ActionButton/ActionButton.js

@@ -51,13 +51,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionButton = exports.ActionButtonMode = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var core_1 = require("../../core");
 var Button_1 = __importDefault(require("@mui/material/Button"));
 var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
-var Typography_1 = __importDefault(require("@mui/material/Typography"));
-var styles_1 = require("./styles");
-var core_1 = require("../../core");
-var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
+var ListItemIcon_1 = __importDefault(require("@mui/material/ListItemIcon"));
+var ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
 var SmallIconButton_1 = require("../SmallIconButton");
+var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
+var styles_1 = require("./styles");
 var ActionButtonMode;
 (function (ActionButtonMode) {
     ActionButtonMode["iconButton"] = "iconButton";
@@ -65,27 +66,32 @@ var ActionButtonMode;
     ActionButtonMode["menuItem"] = "menuItem";
 })(ActionButtonMode || (exports.ActionButtonMode = ActionButtonMode = {}));
 exports.ActionButton = (0, react_1.forwardRef)(function (_a, ref) {
-    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButtonMode.iconButton : _b, label = _a.label, disabled = _a.disabled, Icon = _a.icon, _c = _a.onClick, onClick = _c === void 0 ? core_1.noop : _c, _d = _a.onMenuClose, onMenuClose = _d === void 0 ? core_1.noop : _d, otherProps = __rest(_a, ["className", "mode", "label", "disabled", "icon", "onClick", "onMenuClose"]);
+    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButtonMode.iconButton : _b, label = _a.label, description = _a.description, disabled = _a.disabled, Icon = _a.icon, _c = _a.onClick, onClick = _c === void 0 ? core_1.noop : _c, _d = _a.onMenuClose, onMenuClose = _d === void 0 ? core_1.noop : _d, otherProps = __rest(_a, ["className", "mode", "label", "description", "disabled", "icon", "onClick", "onMenuClose"]);
     var styles = (0, styles_1.useStyles)();
     var getButtonView = function () {
+        var _a, _b;
         switch (mode) {
-            case 'iconButton': {
+            case ActionButtonMode.iconButton: {
                 return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({ disabled: disabled, className: (0, classnames_1.default)(styles.iconButton, className), size: "S", tooltipTitle: label, onClick: onClick, icon: Icon, showForDisabled: true }, otherProps)));
             }
-            case 'button': {
-                return (react_1.default.createElement(Button_1.default, __assign({ className: (0, classnames_1.default)(styles.button, className), disabled: disabled, startIcon: react_1.default.createElement(Icon, null), onClick: onClick, color: "primary", classes: { startIcon: styles.startIcon } }, otherProps),
+            case ActionButtonMode.button: {
+                return (react_1.default.createElement(Button_1.default, __assign({ className: (0, classnames_1.default)(styles.button, className), disabled: disabled, startIcon: Icon && react_1.default.createElement(Icon, null), onClick: onClick, color: "primary", classes: { startIcon: styles.startIcon } }, otherProps),
                     react_1.default.createElement(ExpandedValueTooltip_1.default, { value: label },
                         react_1.default.createElement("div", { className: styles.overflowStyle }, label))));
             }
-            case 'menuItem': {
+            case ActionButtonMode.menuItem: {
                 var handleClick = function () {
                     onMenuClose();
                     onClick();
                 };
-                return (react_1.default.createElement(MenuItem_1.default, __assign({ classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref }, otherProps),
-                    react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(Icon, { className: styles.menuIcon }),
-                        react_1.default.createElement(Typography_1.default, { classes: { root: styles.menuText } }, label))));
+                var isComplexItem = !!description;
+                return (react_1.default.createElement(MenuItem_1.default, __assign({ classes: { root: (0, classnames_1.default)(styles.menuItem, (_a = {}, _a[styles.complexItem] = isComplexItem, _a)) }, onClick: handleClick, ref: ref }, otherProps),
+                    Icon && (react_1.default.createElement(ListItemIcon_1.default, null,
+                        react_1.default.createElement(Icon, null))),
+                    react_1.default.createElement(ListItemText_1.default, { primary: label, secondary: description, classes: {
+                            primary: (0, classnames_1.default)(styles.textPrimary, (_b = {}, _b[styles.bold] = isComplexItem, _b)),
+                            secondary: styles.textSecondary
+                        } })));
             }
         }
     };

package/cjs/components/ActionButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "startIcon" | "menuItem" | "menuText" | "iconButton" | "overflowStyle" | "menuIcon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"bold" | "button" | "startIcon" | "menuItem" | "textSecondary" | "textPrimary" | "iconButton" | "overflowStyle" | "complexItem">;

package/cjs/components/ActionButton/styles.js

@@ -32,17 +32,26 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
     },
-    menuIcon: {
-        marginRight: '12px'
-    },
     menuItem: {
+        whiteSpace: 'inherit',
         minHeight: '28px',
         padding: '2px 16px 2px 12px'
     },
-    menuText: {
+    complexItem: {
+        padding: '9px 12px 7px'
+    },
+    textPrimary: {
         color: theme.palette.text.primary,
         fontSize: '13px',
         lineHeight: '15px',
         letterSpacing: 0
+    },
+    bold: {
+        fontWeight: 500
+    },
+    textSecondary: {
+        fontSize: 10,
+        lineHeight: '12px',
+        maxWidth: 176
     }
 }); });

package/cjs/components/ActionsPanel/ActionsPanel.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 export type Action = {
-    ActionButton: (props: any) => JSX.Element;
-    show: boolean;
-    props: Record<string, unknown>;
+    ActionButton?: (props: any) => JSX.Element;
+    show?: boolean;
+    [key: string]: unknown;
 };
 type Props = {
     actions: Action[];
@@ -10,8 +10,8 @@ type Props = {
     mode?: 'normal' | 'hover';
     actionButtonSize?: string;
     classes?: {
-        actionButton: string;
-        moreOptions: string;
+        actionButton?: string;
+        moreOptions?: string;
     };
     onActionsMenuOpen?: () => void;
     onActionsMenuClose?: () => void;

package/cjs/components/ActionsPanel/ActionsPanel.js

@@ -10,13 +10,24 @@ var __assign = (this && this.__assign) || function () {
     };
     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 });
 var react_1 = __importDefault(require("react"));
-var ramda_1 = require("ramda");
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
 var MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
 var ActionButton_1 = require("../ActionButton/ActionButton");
 var SmallIconButton_1 = require("../SmallIconButton");
@@ -24,12 +35,12 @@ var DropDownMenuButton_1 = __importDefault(require("../DropDownMenuButton/DropDo
 var MenuItemRenderer_1 = __importDefault(require("./MenuItemRenderer"));
 var ActionsPanel = function (_a) {
     var actions = _a.actions, _b = _a.numberOfButtons, numberOfButtons = _b === void 0 ? 2 : _b, _c = _a.mode, mode = _c === void 0 ? 'normal' : _c, actionButtonSize = _a.actionButtonSize, classes = _a.classes, onActionsMenuOpen = _a.onActionsMenuOpen, onActionsMenuClose = _a.onActionsMenuClose, dataReltioId = _a.dataReltioId;
-    var _d = (0, ramda_1.splitAt)(numberOfButtons, actions), buttonActions = _d[0], menuActions = _d[1];
+    var _d = (0, ramda_1.pipe)((0, ramda_1.reject)((0, ramda_1.propEq)('show', false)), (0, ramda_1.map)((0, ramda_1.omit)(['show'])), (0, ramda_1.splitAt)(numberOfButtons))(actions), buttonActions = _d[0], menuActions = _d[1];
     var buttonMode = mode === 'normal' ? ActionButton_1.ActionButtonMode.button : ActionButton_1.ActionButtonMode.iconButton;
     var buttonSize = mode === 'normal' ? 'MPlus' : 'S';
     return (react_1.default.createElement(react_1.default.Fragment, null,
         buttonActions.map(function (_a, index) {
-            var ActionButton = _a.ActionButton, props = _a.props;
+            var _b = _a.ActionButton, ActionButton = _b === void 0 ? ActionButton_1.ActionButton : _b, props = __rest(_a, ["ActionButton"]);
             return (react_1.default.createElement(ActionButton, __assign({ key: index, mode: buttonMode, className: classes === null || classes === void 0 ? void 0 : classes.actionButton }, (actionButtonSize ? { size: actionButtonSize } : {}), props)));
         }),
         menuActions.length > 0 && (react_1.default.createElement(DropDownMenuButton_1.default, { buttonComponent: SmallIconButton_1.SmallIconButtonWithTooltip, buttonProps: {
@@ -37,6 +48,6 @@ var ActionsPanel = function (_a) {
                 size: buttonSize,
                 tooltipTitle: ui_i18n_1.default.text('More actions'),
                 'data-reltio-id': dataReltioId
-            }, className: classes === null || classes === void 0 ? void 0 : classes.moreOptions, menuId: 'matches-view-actions', menuItems: menuActions, onMenuOpen: onActionsMenuOpen, onMenuClose: onActionsMenuClose, MenuItemRenderer: MenuItemRenderer_1.default }))));
+            }, className: classes === null || classes === void 0 ? void 0 : classes.moreOptions, menuId: "view-actions", menuItems: menuActions, onMenuOpen: onActionsMenuOpen, onMenuClose: onActionsMenuClose, MenuItemRenderer: MenuItemRenderer_1.default }))));
 };
 exports.default = ActionsPanel;

package/cjs/components/ActionsPanel/MenuItemRenderer.js

@@ -33,13 +33,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
+var ActionButton_1 = require("../ActionButton/ActionButton");
 var MenuItemRenderer = (0, react_1.forwardRef)(function (_a, ref) {
     var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? ramda_1.identity : _b;
-    var ActionButton = item.ActionButton, props = item.props;
-    return react_1.default.createElement(ActionButton, __assign({ ref: ref, mode: "menuItem", onMenuClose: onMenuClose }, props));
+    var _c = item.ActionButton, ActionButton = _c === void 0 ? ActionButton_1.ActionButton : _c, props = __rest(item, ["ActionButton"]);
+    return react_1.default.createElement(ActionButton, __assign({ ref: ref, mode: ActionButton_1.ActionButtonMode.menuItem, onMenuClose: onMenuClose }, props));
 });
 MenuItemRenderer.displayName = 'MenuItemRenderer';
 exports.default = MenuItemRenderer;

package/cjs/components/index.d.ts

@@ -152,7 +152,6 @@ export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
 export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
 export { default as RequiredMark } from './RequiredMark/RequiredMark';
 export { RelevanceScoreBadge } from './RelevanceScoreBadge/RelevanceScoreBadge';
-export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuItem';
 export { default as TenantLabel } from './TenantLabel/TenantLabel';
 export { default as StepNavigation } from './StepNavigation/StepNavigation';
 export { TableSkeleton } from './TableSkeleton/TableSkeleton';

package/cjs/components/index.js

@@ -20,7 +20,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.MenuList = exports.LoadMoreButton = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.EditableImageAttributesLine = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.DescriptionIcon = exports.AttributesView = exports.AttributeListItem = void 0;
 exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.SimpleMatchRules = exports.MatchRuleVariant = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExternalInvalidRelations = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.AttributesErrorsPanel = exports.ErrorBoundary = exports.EntityUriLink = exports.RelationTypesSelector = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = void 0;
 exports.HierarchyNodeTitle = exports.DataTenantBadge = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.ConnectionEditor = exports.AttributesFiltersBuilder = exports.AttributesFiltersButton = exports.AttributeGroupIcon = exports.BasicAttributeSelector = exports.ProfilesList = exports.ActionButtonMode = exports.ActionButton = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.ColoredSourceIcon = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = void 0;
-exports.ReadableSearchQuery = exports.ActionsPanel = exports.LogicOperator = exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.MultilineMenuItem = exports.RelevanceScoreBadge = exports.RequiredMark = void 0;
+exports.ReadableSearchQuery = exports.ActionsPanel = exports.LogicOperator = exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.RelevanceScoreBadge = exports.RequiredMark = void 0;
 __exportStar(require("./activityLog"), exports);
 var AttributeListItem_1 = require("./AttributeListItem/AttributeListItem");
 Object.defineProperty(exports, "AttributeListItem", { enumerable: true, get: function () { return __importDefault(AttributeListItem_1).default; } });
@@ -327,8 +327,6 @@ var RequiredMark_1 = require("./RequiredMark/RequiredMark");
 Object.defineProperty(exports, "RequiredMark", { enumerable: true, get: function () { return __importDefault(RequiredMark_1).default; } });
 var RelevanceScoreBadge_1 = require("./RelevanceScoreBadge/RelevanceScoreBadge");
 Object.defineProperty(exports, "RelevanceScoreBadge", { enumerable: true, get: function () { return RelevanceScoreBadge_1.RelevanceScoreBadge; } });
-var MultilineMenuItem_1 = require("./MultilineMenuItem/MultilineMenuItem");
-Object.defineProperty(exports, "MultilineMenuItem", { enumerable: true, get: function () { return __importDefault(MultilineMenuItem_1).default; } });
 var TenantLabel_1 = require("./TenantLabel/TenantLabel");
 Object.defineProperty(exports, "TenantLabel", { enumerable: true, get: function () { return __importDefault(TenantLabel_1).default; } });
 var StepNavigation_1 = require("./StepNavigation/StepNavigation");

package/esm/components/ActionButton/ActionButton.d.ts

@@ -7,10 +7,11 @@ export declare enum ActionButtonMode {
 export type Props = {
     className?: string;
     disabled?: boolean;
-    icon: React.ElementType;
+    icon?: React.ElementType;
     label: string;
+    description?: string;
     mode: ActionButtonMode;
-    onClick: () => void;
+    onClick?: () => void;
     onMenuClose?: () => void;
 };
 export declare const ActionButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;

package/esm/components/ActionButton/ActionButton.js

@@ -22,13 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
+import { noop } from '../../core';
 import Button from '@mui/material/Button';
 import MenuItem from '@mui/material/MenuItem';
-import Typography from '@mui/material/Typography';
-import { useStyles } from './styles';
-import { noop } from '../../core';
-import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
 import { SmallIconButtonWithTooltip } from '../SmallIconButton';
+import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';
+import { useStyles } from './styles';
 export var ActionButtonMode;
 (function (ActionButtonMode) {
     ActionButtonMode["iconButton"] = "iconButton";
@@ -36,27 +37,32 @@ export var ActionButtonMode;
     ActionButtonMode["menuItem"] = "menuItem";
 })(ActionButtonMode || (ActionButtonMode = {}));
 export var ActionButton = forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButtonMode.iconButton : _b, label = _a.label, disabled = _a.disabled, Icon = _a.icon, _c = _a.onClick, onClick = _c === void 0 ? noop : _c, _d = _a.onMenuClose, onMenuClose = _d === void 0 ? noop : _d, otherProps = __rest(_a, ["className", "mode", "label", "disabled", "icon", "onClick", "onMenuClose"]);
+    var className = _a.className, _b = _a.mode, mode = _b === void 0 ? ActionButtonMode.iconButton : _b, label = _a.label, description = _a.description, disabled = _a.disabled, Icon = _a.icon, _c = _a.onClick, onClick = _c === void 0 ? noop : _c, _d = _a.onMenuClose, onMenuClose = _d === void 0 ? noop : _d, otherProps = __rest(_a, ["className", "mode", "label", "description", "disabled", "icon", "onClick", "onMenuClose"]);
     var styles = useStyles();
     var getButtonView = function () {
+        var _a, _b;
         switch (mode) {
-            case 'iconButton': {
+            case ActionButtonMode.iconButton: {
                 return (React.createElement(SmallIconButtonWithTooltip, __assign({ disabled: disabled, className: classnames(styles.iconButton, className), size: "S", tooltipTitle: label, onClick: onClick, icon: Icon, showForDisabled: true }, otherProps)));
             }
-            case 'button': {
-                return (React.createElement(Button, __assign({ className: classnames(styles.button, className), disabled: disabled, startIcon: React.createElement(Icon, null), onClick: onClick, color: "primary", classes: { startIcon: styles.startIcon } }, otherProps),
+            case ActionButtonMode.button: {
+                return (React.createElement(Button, __assign({ className: classnames(styles.button, className), disabled: disabled, startIcon: Icon && React.createElement(Icon, null), onClick: onClick, color: "primary", classes: { startIcon: styles.startIcon } }, otherProps),
                     React.createElement(ExpandedValueTooltip, { value: label },
                         React.createElement("div", { className: styles.overflowStyle }, label))));
             }
-            case 'menuItem': {
+            case ActionButtonMode.menuItem: {
                 var handleClick = function () {
                     onMenuClose();
                     onClick();
                 };
-                return (React.createElement(MenuItem, __assign({ classes: { root: styles.menuItem }, onClick: handleClick, disabled: disabled, ref: ref }, otherProps),
-                    React.createElement(React.Fragment, null,
-                        React.createElement(Icon, { className: styles.menuIcon }),
-                        React.createElement(Typography, { classes: { root: styles.menuText } }, label))));
+                var isComplexItem = !!description;
+                return (React.createElement(MenuItem, __assign({ classes: { root: classnames(styles.menuItem, (_a = {}, _a[styles.complexItem] = isComplexItem, _a)) }, onClick: handleClick, ref: ref }, otherProps),
+                    Icon && (React.createElement(ListItemIcon, null,
+                        React.createElement(Icon, null))),
+                    React.createElement(ListItemText, { primary: label, secondary: description, classes: {
+                            primary: classnames(styles.textPrimary, (_b = {}, _b[styles.bold] = isComplexItem, _b)),
+                            secondary: styles.textSecondary
+                        } })));
             }
         }
     };

package/esm/components/ActionButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"button" | "startIcon" | "menuItem" | "menuText" | "iconButton" | "overflowStyle" | "menuIcon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"bold" | "button" | "startIcon" | "menuItem" | "textSecondary" | "textPrimary" | "iconButton" | "overflowStyle" | "complexItem">;

package/esm/components/ActionButton/styles.js

@@ -29,17 +29,26 @@ export var useStyles = makeStyles(function (theme) { return ({
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
     },
-    menuIcon: {
-        marginRight: '12px'
-    },
     menuItem: {
+        whiteSpace: 'inherit',
         minHeight: '28px',
         padding: '2px 16px 2px 12px'
     },
-    menuText: {
+    complexItem: {
+        padding: '9px 12px 7px'
+    },
+    textPrimary: {
         color: theme.palette.text.primary,
         fontSize: '13px',
         lineHeight: '15px',
         letterSpacing: 0
+    },
+    bold: {
+        fontWeight: 500
+    },
+    textSecondary: {
+        fontSize: 10,
+        lineHeight: '12px',
+        maxWidth: 176
     }
 }); });

package/esm/components/ActionsPanel/ActionsPanel.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 export type Action = {
-    ActionButton: (props: any) => JSX.Element;
-    show: boolean;
-    props: Record<string, unknown>;
+    ActionButton?: (props: any) => JSX.Element;
+    show?: boolean;
+    [key: string]: unknown;
 };
 type Props = {
     actions: Action[];
@@ -10,8 +10,8 @@ type Props = {
     mode?: 'normal' | 'hover';
     actionButtonSize?: string;
     classes?: {
-        actionButton: string;
-        moreOptions: string;
+        actionButton?: string;
+        moreOptions?: string;
     };
     onActionsMenuOpen?: () => void;
     onActionsMenuClose?: () => void;

package/esm/components/ActionsPanel/ActionsPanel.js

@@ -9,22 +9,33 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { splitAt } from 'ramda';
 import i18n from 'ui-i18n';
+import { splitAt, pipe, propEq, map, omit, reject } from 'ramda';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { ActionButtonMode } from '../ActionButton/ActionButton';
+import { ActionButton as DefaultActionButton, ActionButtonMode } from '../ActionButton/ActionButton';
 import { SmallIconButtonWithTooltip } from '../SmallIconButton';
 import DropDownMenuButton from '../DropDownMenuButton/DropDownMenuButton';
 import MenuItemRenderer from './MenuItemRenderer';
 var ActionsPanel = function (_a) {
     var actions = _a.actions, _b = _a.numberOfButtons, numberOfButtons = _b === void 0 ? 2 : _b, _c = _a.mode, mode = _c === void 0 ? 'normal' : _c, actionButtonSize = _a.actionButtonSize, classes = _a.classes, onActionsMenuOpen = _a.onActionsMenuOpen, onActionsMenuClose = _a.onActionsMenuClose, dataReltioId = _a.dataReltioId;
-    var _d = splitAt(numberOfButtons, actions), buttonActions = _d[0], menuActions = _d[1];
+    var _d = pipe(reject(propEq('show', false)), map(omit(['show'])), splitAt(numberOfButtons))(actions), buttonActions = _d[0], menuActions = _d[1];
     var buttonMode = mode === 'normal' ? ActionButtonMode.button : ActionButtonMode.iconButton;
     var buttonSize = mode === 'normal' ? 'MPlus' : 'S';
     return (React.createElement(React.Fragment, null,
         buttonActions.map(function (_a, index) {
-            var ActionButton = _a.ActionButton, props = _a.props;
+            var _b = _a.ActionButton, ActionButton = _b === void 0 ? DefaultActionButton : _b, props = __rest(_a, ["ActionButton"]);
             return (React.createElement(ActionButton, __assign({ key: index, mode: buttonMode, className: classes === null || classes === void 0 ? void 0 : classes.actionButton }, (actionButtonSize ? { size: actionButtonSize } : {}), props)));
         }),
         menuActions.length > 0 && (React.createElement(DropDownMenuButton, { buttonComponent: SmallIconButtonWithTooltip, buttonProps: {
@@ -32,6 +43,6 @@ var ActionsPanel = function (_a) {
                 size: buttonSize,
                 tooltipTitle: i18n.text('More actions'),
                 'data-reltio-id': dataReltioId
-            }, className: classes === null || classes === void 0 ? void 0 : classes.moreOptions, menuId: 'matches-view-actions', menuItems: menuActions, onMenuOpen: onActionsMenuOpen, onMenuClose: onActionsMenuClose, MenuItemRenderer: MenuItemRenderer }))));
+            }, className: classes === null || classes === void 0 ? void 0 : classes.moreOptions, menuId: "view-actions", menuItems: menuActions, onMenuOpen: onActionsMenuOpen, onMenuClose: onActionsMenuClose, MenuItemRenderer: MenuItemRenderer }))));
 };
 export default ActionsPanel;

package/esm/components/ActionsPanel/MenuItemRenderer.js

@@ -9,12 +9,24 @@ var __assign = (this && this.__assign) || function () {
     };
     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, { forwardRef } from 'react';
 import { identity } from 'ramda';
+import { ActionButtonMode, ActionButton as DefaultActionButton } from '../ActionButton/ActionButton';
 var MenuItemRenderer = forwardRef(function (_a, ref) {
     var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? identity : _b;
-    var ActionButton = item.ActionButton, props = item.props;
-    return React.createElement(ActionButton, __assign({ ref: ref, mode: "menuItem", onMenuClose: onMenuClose }, props));
+    var _c = item.ActionButton, ActionButton = _c === void 0 ? DefaultActionButton : _c, props = __rest(item, ["ActionButton"]);
+    return React.createElement(ActionButton, __assign({ ref: ref, mode: ActionButtonMode.menuItem, onMenuClose: onMenuClose }, props));
 });
 MenuItemRenderer.displayName = 'MenuItemRenderer';
 export default MenuItemRenderer;

package/esm/components/index.d.ts

@@ -152,7 +152,6 @@ export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
 export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
 export { default as RequiredMark } from './RequiredMark/RequiredMark';
 export { RelevanceScoreBadge } from './RelevanceScoreBadge/RelevanceScoreBadge';
-export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuItem';
 export { default as TenantLabel } from './TenantLabel/TenantLabel';
 export { default as StepNavigation } from './StepNavigation/StepNavigation';
 export { TableSkeleton } from './TableSkeleton/TableSkeleton';

package/esm/components/index.js

@@ -152,7 +152,6 @@ export { DataTenantBadge } from './DataTenantBadge/DataTenantBadge';
 export { HierarchyNodeTitle } from './HierarchyNodeTitle/HierarchyNodeTitle';
 export { default as RequiredMark } from './RequiredMark/RequiredMark';
 export { RelevanceScoreBadge } from './RelevanceScoreBadge/RelevanceScoreBadge';
-export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuItem';
 export { default as TenantLabel } from './TenantLabel/TenantLabel';
 export { default as StepNavigation } from './StepNavigation/StepNavigation';
 export { TableSkeleton } from './TableSkeleton/TableSkeleton';

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1778",
+  "version": "1.4.1780",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-sdk": "^1.4.1751",
+    "@reltio/mdm-sdk": "^1.4.1753",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",

package/cjs/components/MultilineMenuItem/MultilineMenuItem.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-type Props = {
-    item: {
-        primary: string;
-        secondary: string;
-        onClick: () => void;
-    };
-    onMenuClose?: () => void;
-};
-declare const MultilineMenuItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
-export default MultilineMenuItem;

package/cjs/components/MultilineMenuItem/MultilineMenuItem.js

@@ -1,49 +0,0 @@
-"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 });
-var react_1 = __importStar(require("react"));
-var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
-var ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
-var core_1 = require("../../core");
-var styles_1 = require("./styles");
-var MultilineMenuItem = (0, react_1.forwardRef)(function (_a, ref) {
-    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? core_1.noop : _b;
-    var styles = (0, styles_1.useStyles)();
-    var primary = item.primary, secondary = item.secondary, onClick = item.onClick;
-    var handleClick = function () {
-        onMenuClose();
-        onClick();
-    };
-    return (react_1.default.createElement(MenuItem_1.default, { className: styles.menuItem, ref: ref, onClick: handleClick },
-        react_1.default.createElement(ListItemText_1.default, { primary: primary, secondary: secondary, className: styles.itemText, classes: {
-                primary: styles.textPrimary,
-                secondary: styles.textSecondary
-            } })));
-});
-MultilineMenuItem.displayName = 'MultilineMenuItem';
-exports.default = MultilineMenuItem;

package/cjs/components/MultilineMenuItem/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menuItem" | "textSecondary" | "itemText" | "textPrimary">;

package/cjs/components/MultilineMenuItem/styles.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = void 0;
-var styles_1 = require("@mui/styles");
-exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
-    menuItem: {
-        whiteSpace: 'inherit',
-        width: 200,
-        padding: '9px 12px 7px'
-    },
-    itemText: {
-        margin: 0
-    },
-    textPrimary: {
-        fontSize: 14,
-        lineHeight: '16px',
-        fontWeight: 500
-    },
-    textSecondary: {
-        fontSize: 10,
-        lineHeight: '12px'
-    }
-}); });

package/esm/components/MultilineMenuItem/MultilineMenuItem.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-type Props = {
-    item: {
-        primary: string;
-        secondary: string;
-        onClick: () => void;
-    };
-    onMenuClose?: () => void;
-};
-declare const MultilineMenuItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLIElement>>;
-export default MultilineMenuItem;

package/esm/components/MultilineMenuItem/MultilineMenuItem.js

@@ -1,21 +0,0 @@
-import React, { forwardRef } from 'react';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemText from '@mui/material/ListItemText';
-import { noop } from '../../core';
-import { useStyles } from './styles';
-var MultilineMenuItem = forwardRef(function (_a, ref) {
-    var item = _a.item, _b = _a.onMenuClose, onMenuClose = _b === void 0 ? noop : _b;
-    var styles = useStyles();
-    var primary = item.primary, secondary = item.secondary, onClick = item.onClick;
-    var handleClick = function () {
-        onMenuClose();
-        onClick();
-    };
-    return (React.createElement(MenuItem, { className: styles.menuItem, ref: ref, onClick: handleClick },
-        React.createElement(ListItemText, { primary: primary, secondary: secondary, className: styles.itemText, classes: {
-                primary: styles.textPrimary,
-                secondary: styles.textSecondary
-            } })));
-});
-MultilineMenuItem.displayName = 'MultilineMenuItem';
-export default MultilineMenuItem;

package/esm/components/MultilineMenuItem/styles.d.ts

@@ -1 +0,0 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menuItem" | "textSecondary" | "itemText" | "textPrimary">;

package/esm/components/MultilineMenuItem/styles.js

@@ -1,20 +0,0 @@
-import { makeStyles } from '@mui/styles';
-export var useStyles = makeStyles(function () { return ({
-    menuItem: {
-        whiteSpace: 'inherit',
-        width: 200,
-        padding: '9px 12px 7px'
-    },
-    itemText: {
-        margin: 0
-    },
-    textPrimary: {
-        fontSize: 14,
-        lineHeight: '16px',
-        fontWeight: 500
-    },
-    textSecondary: {
-        fontSize: 10,
-        lineHeight: '12px'
-    }
-}); });