@reltio/components 1.4.1673 → 1.4.1674

package/cjs/components/BasicViewHeader/styles.js

@@ -10,7 +10,7 @@ exports.useStyles = (0, styles_1.makeStyles)({
     },
     title: {
         fontSize: '18px',
-        minWidth: '50px',
+        minWidth: '20px',
         fontWeight: 'normal',
         lineHeight: 'inherit',
         whiteSpace: 'nowrap',

package/cjs/components/ExpandableSearchInput/ExpandableSearchInput.js

@@ -48,7 +48,7 @@ var ExpandableSearchInput = function (_a) {
     var styles = (0, styles_1.useStyles)();
     return isOpen ? (react_1.default.createElement(Input_1.default, { className: styles.input, value: value, autoFocus: true, placeholder: ui_i18n_1.default.text('Search'), disableUnderline: true, onChange: (0, ramda_1.pipe)(core_1.getValue, setValue), startAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "start" },
             react_1.default.createElement(Search_1.default, { className: styles.startAdornment })), endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end" },
-            react_1.default.createElement(SmallIconButton_1.SmallIconButton, { size: "S", icon: Close_1.default, onClick: (0, ramda_1.pipe)(ramda_1.F, setIsOpen, (0, ramda_1.always)(''), (0, ramda_1.tap)(onChange), setValue) })), onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), (0, ramda_1.pipe)((0, ramda_1.always)(value), ramda_1.trim, onChange)) })) : (react_1.default.createElement(IconButton_1.default, { className: styles.searchButton, onClick: (0, ramda_1.pipe)(ramda_1.T, setIsOpen), size: "large" },
+            react_1.default.createElement(SmallIconButton_1.SmallIconButton, { size: "S", icon: Close_1.default, className: styles.endAdornment, onClick: (0, ramda_1.pipe)(ramda_1.F, setIsOpen, (0, ramda_1.always)(''), (0, ramda_1.tap)(onChange), setValue) })), onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), (0, ramda_1.pipe)((0, ramda_1.always)(value), ramda_1.trim, onChange)) })) : (react_1.default.createElement(IconButton_1.default, { className: styles.searchButton, onClick: (0, ramda_1.pipe)(ramda_1.T, setIsOpen), size: "large" },
         react_1.default.createElement(Search_1.default, null)));
 };
 exports.ExpandableSearchInput = ExpandableSearchInput;

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

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"input" | "startAdornment" | "searchButton">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"input" | "endAdornment" | "startAdornment" | "searchButton">;

package/cjs/components/ExpandableSearchInput/styles.js

@@ -4,14 +4,12 @@ exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     searchButton: {
-        marginLeft: 'auto !important',
-        marginRight: '-4px',
         padding: '8px'
     },
     input: {
         maxWidth: '350px',
-        flex: '1 0 200px',
-        marginLeft: '20px',
+        flex: '1 1',
+        minWidth: '160px',
         fontSize: '14px',
         background: 'rgba(0,0,0,0.03) 2px',
         padding: '4px 0',
@@ -20,5 +18,8 @@ exports.useStyles = (0, styles_1.makeStyles)({
     startAdornment: {
         color: 'rgba(0,0,0,0.54)',
         paddingLeft: '8px'
+    },
+    endAdornment: {
+        marginRight: '4px'
     }
 });

package/cjs/components/LinearLoadIndicator/styles.js

@@ -9,9 +9,8 @@ exports.useStyles = (0, styles_1.makeStyles)({
         height: '100%',
         top: 0,
         left: 0,
-        opacity: 0.37,
         zIndex: 10,
-        backgroundColor: '#fff'
+        backgroundColor: 'rgba(255, 255, 255, 0.37)'
     },
     transparent: {
         backgroundColor: 'transparent'

package/cjs/components/RelationEditor/RelationEditor.d.ts

@@ -1,5 +1,12 @@
-declare const _default: React.ComponentType<{
-    [x: string]: unknown;
-}>;
-export default _default;
 import React from 'react';
+import { Connection, RelationsViewConfig, Mode, Metadata } from '@reltio/mdm-sdk';
+import { ScrollToElementContext } from '../../contexts';
+type Props = {
+    connection: Connection;
+    config: RelationsViewConfig;
+    mode: Mode;
+    metadata: Metadata;
+    highlightedError?: React.ContextType<typeof ScrollToElementContext>;
+};
+declare const _default: React.ComponentType<Props>;
+export default _default;

package/cjs/components/RelationEditor/RelationEditor.js

@@ -39,11 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var Button_1 = __importDefault(require("@mui/material/Button"));
-var Divider_1 = __importDefault(require("@mui/material/Divider"));
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ConnectionRelationTypeSelector_1 = __importDefault(require("../ConnectionRelationTypeSelector/ConnectionRelationTypeSelector"));
@@ -203,18 +201,10 @@ var RelationEditor = function (_a) {
                                 _b[styles.dense] = errorMessage ||
                                     (connection.entity && (0, mdm_sdk_1.isTempUri)(connection.entity.entityUri)),
                                 _b)), entity: connection.entity || {}, entityTypesUris: getEntityTypesUris() || [], max: config.max || 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: (0, mdm_sdk_1.isSuggestMode)(mode) ? undefined : onCreateEntity, metadata: metadata, attributeTypesSelectionStrategy: mdm_sdk_1.relationEditorAttributeTypesSelectionStrategy }))),
-                react_1.default.createElement(AttributesList_1.default, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, crosswalks: connection.crosswalks, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))),
+                react_1.default.createElement(AttributesList_1.default, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))),
         react_1.default.createElement("div", { className: styles.actionButtons },
             react_1.default.createElement(Button_1.default, { onClick: onCancel }, ui_i18n_1.default.text('Cancel')),
-            react_1.default.createElement(Button_1.default, { color: "primary", disabled: !hasChanges, onClick: onApply }, ui_i18n_1.default.text('Apply'))),
-        react_1.default.createElement(Divider_1.default, null)));
-};
-RelationEditor.propTypes = {
-    connection: mdm_sdk_1.ConnectionType,
-    config: mdm_sdk_1.RelationsConfigType,
-    mode: prop_types_1.default.string,
-    metadata: mdm_sdk_1.MetadataType,
-    highlightedError: prop_types_1.default.object
+            react_1.default.createElement(Button_1.default, { color: "primary", disabled: !hasChanges, onClick: onApply }, ui_i18n_1.default.text('Apply')))));
 };
 exports.default = (0, HOCs_1.withContext)(contexts_1.ScrollToElementContext, function (contextValue, _a) {
     var connection = _a.connection;

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

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "item" | "dense" | "editor" | "actionButtons">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "item" | "dense" | "editor" | "actionButtons">;

package/cjs/components/TableSkeleton/TableSkeleton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BasicTable } from '../BasicTableView';
+import { ColumnData, RenderRowCellProps } from '../BasicTableView/types';
+type Props = Omit<React.ComponentProps<typeof BasicTable>, 'rowsData' | 'renderRowCell'> & {
+    tableColumnsData: ColumnData[];
+    RowCellRenderer?: (props: RenderRowCellProps) => JSX.Element;
+};
+export declare const TableSkeleton: ({ tableColumnsData, RowCellRenderer, ...props }: Props) => JSX.Element;
+export {};

package/cjs/components/TableSkeleton/TableSkeleton.js

@@ -0,0 +1,74 @@
+"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 __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 __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.TableSkeleton = void 0;
+var react_1 = __importStar(require("react"));
+var Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
+var BasicTableView_1 = require("../BasicTableView");
+var styles_1 = require("./styles");
+var MAX_HEIGHT = 477;
+var DefaultRowCellRenderer = function () {
+    var styles = (0, styles_1.useStyles)();
+    return react_1.default.createElement(Skeleton_1.default, { className: styles.rowSkeleton });
+};
+var TableSkeleton = function (_a) {
+    var tableColumnsData = _a.tableColumnsData, RowCellRenderer = _a.RowCellRenderer, props = __rest(_a, ["tableColumnsData", "RowCellRenderer"]);
+    var styles = (0, styles_1.useStyles)();
+    var tableRowsData = (0, react_1.useMemo)(function () {
+        var entries = tableColumnsData.map(function (column) { return [column.id, []]; });
+        var skeletonRow = Object.fromEntries(entries);
+        return [__assign(__assign({}, skeletonRow), { value: { label: '', value: {}, uri: 'skeleton' } })];
+    }, [tableColumnsData]);
+    var renderRowCell = function (props) {
+        return RowCellRenderer ? react_1.default.createElement(RowCellRenderer, __assign({}, props)) : react_1.default.createElement(DefaultRowCellRenderer, null);
+    };
+    return (react_1.default.createElement(BasicTableView_1.BasicTable, __assign({ autosizing: true, containerClassName: styles.container, columnsData: tableColumnsData, rowsData: tableRowsData, defaultColumnMinWidth: 200, defaultColumnWidth: 250, headRowHeight: 48, renderRowCell: renderRowCell, maxHeight: MAX_HEIGHT }, props)));
+};
+exports.TableSkeleton = TableSkeleton;

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

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

package/cjs/components/TableSkeleton/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
+    container: {
+        '&:last-child > div > div > div': {
+            overflow: 'hidden!important'
+        }
+    },
+    rowSkeleton: {
+        margin: '15px 25px',
+        width: '40%'
+    }
+});

package/cjs/components/Title/styles.js

@@ -6,6 +6,6 @@ exports.useStyles = (0, styles_1.makeStyles)({
     label: {
         color: 'rgba(0,0,0,0.6)',
         fontSize: '13px',
-        lineHeight: '15px'
+        lineHeight: '16px'
     }
 });

package/cjs/components/attributes/DescriptionIcon/DescriptionIcon.d.ts

@@ -1,31 +1,4 @@
-import React from 'react';
-export declare const ChipWithTooltip: React.ForwardRefExoticComponent<import("prop-types").InferPropsInner<Pick<{
-    tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
-    tooltipPlacement: import("prop-types").Requireable<string>;
-    showForDisabled: import("prop-types").Requireable<boolean>;
-}, never>> & Partial<import("prop-types").InferPropsInner<Pick<{
-    tooltipTitle: import("prop-types").Requireable<import("prop-types").ReactNodeLike>;
-    tooltipPlacement: import("prop-types").Requireable<string>;
-    showForDisabled: import("prop-types").Requireable<boolean>;
-}, "tooltipTitle" | "tooltipPlacement" | "showForDisabled">>> & {
-    avatar?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    children?: null;
-    classes?: Partial<import("@mui/material/Chip").ChipClasses>;
-    clickable?: boolean;
-    color?: import("@mui/types").OverridableStringUnion<"default" | "error" | "success" | "primary" | "secondary" | "info" | "warning", import("@mui/material/Chip").ChipPropsColorOverrides>;
-    deleteIcon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    disabled?: boolean;
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    label?: React.ReactNode;
-    onDelete?: (event: any) => void;
-    size?: import("@mui/types").OverridableStringUnion<"small" | "medium", import("@mui/material/Chip").ChipPropsSizeOverrides>;
-    skipFocusWhenDisabled?: boolean;
-    sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
-    tabIndex?: number;
-    variant?: import("@mui/types").OverridableStringUnion<"filled" | "outlined", import("@mui/material/Chip").ChipPropsVariantOverrides>;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-}, "label" | "icon" | "children" | "size" | "color" | "disabled" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "tabIndex" | "variant" | "avatar" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled">>;
+/// <reference types="react" />
 type Props = {
     className?: string;
     description?: string;

package/cjs/components/attributes/DescriptionIcon/DescriptionIcon.js

@@ -26,15 +26,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChipWithTooltip = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var Chip_1 = __importDefault(require("@mui/material/Chip"));
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var contexts_1 = require("../../../contexts");
-var HOCs_1 = require("../../../HOCs");
 var Description_1 = __importDefault(require("../../../icons/Description"));
 var styles_1 = require("./styles");
-exports.ChipWithTooltip = (0, HOCs_1.withTooltip)(Chip_1.default);
 var DescriptionIcon = function (_a) {
     var className = _a.className, description = _a.description;
     var showDescription = (0, react_1.useContext)(contexts_1.FeaturesContext).showDescription;
@@ -42,10 +39,8 @@ var DescriptionIcon = function (_a) {
     if (!description || !showDescription) {
         return null;
     }
-    return (react_1.default.createElement(exports.ChipWithTooltip, { tooltipTitle: description, tooltipPlacement: "bottom", icon: react_1.default.createElement(Description_1.default, null), classes: {
-            root: (0, classnames_1.default)(styles.container, className),
-            label: styles.label,
-            icon: styles.icon
-        } }));
+    return (react_1.default.createElement(Tooltip_1.default, { title: description, placement: "bottom" },
+        react_1.default.createElement("span", { "data-reltio-id": "reltio-description-icon", className: (0, classnames_1.default)(styles.icon, className) },
+            react_1.default.createElement(Description_1.default, null))));
 };
 exports.default = DescriptionIcon;

package/cjs/components/attributes/DescriptionIcon/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "icon" | "container">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon">;

package/cjs/components/attributes/DescriptionIcon/styles.js

@@ -3,23 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
-    container: {
-        height: '15px',
-        backgroundColor: 'transparent',
-        '&:hover': {
-            backgroundColor: 'transparent'
-        },
-        '& $icon': {
-            width: '12px',
-            height: '12px',
-            marginRight: 0
-        }
-    },
-    label: {
-        paddingLeft: '4px',
-        paddingRight: '4px',
-        fontSize: '10px',
-        lineHeight: '11px'
-    },
-    icon: {}
+    icon: {
+        display: 'inline-flex',
+        marginLeft: '8px',
+        verticalAlign: 'middle'
+    }
 }); });

package/cjs/components/attributes/PivotingAttributes/styles.js

@@ -48,12 +48,12 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     footer: {
         display: 'flex',
         alignItems: 'center',
-        height: '31px',
+        height: '32px',
         paddingLeft: '16px',
         color: theme.palette.primary.main,
         fontSize: '13px',
         letterSpacing: '0',
-        lineHeight: '15px'
+        lineHeight: '16px'
     },
     profileIcon: {
         height: '16px',
@@ -74,11 +74,15 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         wordBreak: 'break-word'
     },
     icon: {
-        margin: 'auto 8px auto 0'
+        marginRight: '8px',
+        verticalAlign: 'middle',
+        width: '12px',
+        height: '12px'
     },
     content: {
         color: theme.palette.primary.main,
-        cursor: 'pointer'
+        cursor: 'pointer',
+        lineHeight: '16px'
     },
     seeAllButton: {
         cursor: 'pointer'

package/cjs/components/attributes/editMode/AttributesFactory/Attribute.js

@@ -41,7 +41,7 @@ var react_1 = __importStar(require("react"));
 var AttributesFactory_1 = __importDefault(require("./AttributesFactory"));
 var Attribute = (0, react_1.forwardRef)(function (props, ref) {
     var className = props.className, otherProps = __rest(props, ["className"]);
-    return (react_1.default.createElement("div", { ref: ref, className: className }, AttributesFactory_1.default.build(props.attributeType, otherProps)));
+    return (react_1.default.createElement("div", { ref: ref, "data-reltio-id": "reltio-edit-attribute", className: className }, AttributesFactory_1.default.build(props.attributeType, otherProps)));
 });
 Attribute.displayName = 'Attribute';
 exports.default = Attribute;

package/cjs/components/attributes/editMode/AttributesPager/CardinalityMessage.d.ts

@@ -1,10 +1,7 @@
+/// <reference types="react" />
+import { Cardinality } from '@reltio/mdm-sdk';
+type Props = {
+    cardinality?: Cardinality;
+};
+declare const CardinalityMessage: ({ cardinality }: Props) => JSX.Element;
 export default CardinalityMessage;
-declare function CardinalityMessage({ cardinality }: {
-    cardinality: any;
-}): JSX.Element;
-declare namespace CardinalityMessage {
-    namespace propTypes {
-        export { CardinalityType as cardinality };
-    }
-}
-import { CardinalityType } from '@reltio/mdm-sdk';

package/cjs/components/attributes/editMode/AttributesPager/CardinalityMessage.js

@@ -4,11 +4,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var ramda_1 = require("ramda");
 var styles_1 = require("./styles");
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var valueCaption = function (value) {
     return ui_i18n_1.default.text('${value}', {
         value: value === 1 ? ui_i18n_1.default.text('value') : ui_i18n_1.default.text('values')
@@ -64,9 +63,7 @@ var getCardinalityMessage = (0, ramda_1.cond)([
 var CardinalityMessage = function (_a) {
     var cardinality = _a.cardinality;
     var styles = (0, styles_1.useStyles)();
-    return (react_1.default.createElement(Typography_1.default, { variant: "caption", className: styles.caption }, getCardinalityMessage(cardinality)));
-};
-CardinalityMessage.propTypes = {
-    cardinality: mdm_sdk_1.CardinalityType
+    var cardinalityMessage = getCardinalityMessage(cardinality);
+    return cardinalityMessage ? (react_1.default.createElement(Typography_1.default, { variant: "caption", className: styles.caption }, cardinalityMessage)) : null;
 };
 exports.default = CardinalityMessage;

package/cjs/components/attributes/editMode/AttributesView/AttributesView.js

@@ -65,7 +65,7 @@ var AttributesView = function (_a) {
     var onChangeAttribute = (0, react_1.useCallback)(function (params) { return modifyAttribute(__assign(__assign({}, params), { viewId: viewId })); }, [viewId, modifyAttribute]);
     var onDeleteAttribute = (0, react_1.useCallback)(function (params) { return removeAttribute(__assign(__assign({}, params), { viewId: viewId })); }, [viewId, removeAttribute]);
     return (react_1.default.createElement(BasicView_1.default, { className: className },
-        caption && react_1.default.createElement(FacetViewHeader_1.default, { className: styles.header, title: caption }),
+        caption && react_1.default.createElement(FacetViewHeader_1.default, { title: caption }),
         react_1.default.createElement(Box_1.default, { className: (0, classnames_1.default)(styles.attributesContainer, (_b = {}, _b[styles.noCaption] = !caption, _b)) },
             react_1.default.createElement(PinnedAttributesContext_1.PinnedAttributesContext.Provider, { value: pinnedAttributeUris },
                 react_1.default.createElement(AttributesList_1.default, { entity: modifiedEntity, attrTypes: filteredAttrTypes, parentUri: modifiedEntity.uri, drawLines: false, mode: mode, showEmptyEditors: (0, mdm_sdk_1.isTempUri)(modifiedEntity.uri), crosswalks: modifiedEntity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))));

package/cjs/components/attributes/editMode/AttributesView/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"header" | "attributesContainer" | "noCaption">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"attributesContainer" | "noCaption">;

package/cjs/components/attributes/editMode/AttributesView/styles.js

@@ -5,10 +5,7 @@ var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     attributesContainer: {
         overflow: 'hidden',
-        padding: '0 16px 16px 16px'
-    },
-    header: {
-        marginBottom: '4px'
+        padding: '8px 16px'
     },
     noCaption: {
         paddingTop: '16px'

package/cjs/components/attributes/editMode/MoreAttributesButton/styles.js

@@ -17,7 +17,10 @@ exports.useStyles = (0, styles_1.makeStyles)({
     },
     moreButton: {
         padding: '9px 16px 9px 12px',
-        backgroundColor: 'rgba(98, 2, 238, 0)'
+        backgroundColor: 'rgba(98, 2, 238, 0)',
+        marginTop: '8px',
+        marginLeft: '-4px',
+        marginBottom: '4px'
     },
     buttonLabel: {
         fontSize: '14px',

package/cjs/components/attributes/readMode/AttributesPager/styles.js

@@ -14,25 +14,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMultiLineStyles = exports.useOneLineStyles = exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
 var fontSize = '13px';
-var lineHeight = '15px';
+var lineHeight = '16px';
 var commonStyles = {
     titleRow: {
-        display: 'block',
+        display: 'inline-block',
         minHeight: '16px'
     },
     title: {
-        whiteSpace: 'nowrap'
+        whiteSpace: 'nowrap',
+        verticalAlign: 'middle'
     },
     ovIcon: {
         marginLeft: '8px',
-        marginRight: '-3px',
-        marginTop: '-1px',
         textIndent: 0
     },
     descriptionIcon: {
-        marginTop: '-1px',
-        textIndent: 0,
-        marginRight: '-10px'
+        textIndent: 0
     }
 };
 exports.useStyles = (0, styles_1.makeStyles)({
@@ -52,8 +49,7 @@ exports.useStyles = (0, styles_1.makeStyles)({
 });
 exports.useOneLineStyles = (0, styles_1.makeStyles)(__assign({ wrapper: {
         fontSize: fontSize,
-        lineHeight: lineHeight,
-        flex: 1
+        lineHeight: lineHeight
     }, collaborationWrapper: {
         display: 'flex',
         alignItems: 'start',
@@ -69,10 +65,10 @@ exports.useOneLineStyles = (0, styles_1.makeStyles)(__assign({ wrapper: {
     }, titleIcon: {
         width: '16px',
         height: '16px',
-        marginBottom: '-3px',
         marginRight: '8px',
         marginLeft: '1px',
-        color: 'rgba(0, 0, 0, 0.38)'
+        color: 'rgba(0, 0, 0, 0.38)',
+        verticalAlign: 'middle'
     } }, commonStyles));
 exports.useMultiLineStyles = (0, styles_1.makeStyles)(__assign({ wrapper: {
         display: 'flex',

package/cjs/components/attributes/readMode/AttributesView/AttributesView.js

@@ -52,7 +52,7 @@ var AttributesView = function (_a) {
     }).length > 0;
     return isShowAttributeList || !(0, mdm_sdk_1.isEmptyValue)(caption) ? (react_1.default.createElement(contexts_1.PivotingAttributeContext.Provider, { value: pivotingAttributes },
         react_1.default.createElement(BasicView_1.default, { className: className },
-            caption && react_1.default.createElement(FacetViewHeader_1.default, { className: styles.header, title: caption }),
+            caption && react_1.default.createElement(FacetViewHeader_1.default, { title: caption }),
             react_1.default.createElement(Box_1.default, { className: (0, classnames_1.default)(styles.attributesContainer, (_b = {}, _b[styles.noCaption] = !caption, _b)) }, isShowAttributeList ? (react_1.default.createElement(AttributesList_1.default, { entity: entity, attrTypes: filteredAttrTypes, parentUri: entity.uri, drawLines: false, max: attributesCount })) : (react_1.default.createElement(Typography_1.default, { className: styles.noData }, ui_i18n_1.default.text('No data found'))))))) : null;
 };
 exports.default = AttributesView;

package/cjs/components/attributes/readMode/AttributesView/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"header" | "attributesContainer" | "noCaption" | "noData">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"attributesContainer" | "noCaption" | "noData">;

package/cjs/components/attributes/readMode/AttributesView/styles.js

@@ -4,10 +4,7 @@ exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     attributesContainer: {
-        padding: '0 16px 16px 16px'
-    },
-    header: {
-        marginBottom: '4px'
+        padding: '8px 16px'
     },
     noCaption: {
         paddingTop: '16px'

package/cjs/components/attributes/readMode/ComplexAttribute/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "spacer" | "complexContainer" | "labelContainer">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "spacer" | "complexContainer" | "labelContainer">;

package/cjs/components/attributes/readMode/ComplexAttribute/styles.js

@@ -11,10 +11,10 @@ exports.useStyles = (0, styles_1.makeStyles)({
         minHeight: '18px'
     },
     label: {
+        display: 'inline-flex',
         fontSize: '13px',
-        lineHeight: '15px',
+        lineHeight: '16px',
         letterSpacing: 'normal',
-        paddingTop: '1px',
         marginLeft: '2px'
     },
     spacer: {

package/cjs/components/attributes/readMode/NestedAttribute/styles.d.ts

@@ -1,2 +1,2 @@
-export default styles;
 declare const styles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "insertAttribute" | "updateAttribute" | "deleteAttribute" | "pivotingTooltip">;
+export default styles;

package/cjs/components/attributes/readMode/NestedAttribute/styles.js

@@ -15,7 +15,8 @@ var styles_1 = require("@mui/styles");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var styles = (0, styles_1.makeStyles)({
     label: {
-        textDecoration: 'none'
+        textDecoration: 'none',
+        verticalAlign: 'middle'
     },
     updateAttribute: __assign({ width: 'fit-content', padding: '0 4px', marginLeft: '-4px' }, mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.updateAttribute]),
     insertAttribute: __assign({ width: 'fit-content' }, mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.insertAttribute]),

package/cjs/components/attributes/readMode/SimpleAttribute/SimpleAttribute.js

@@ -54,7 +54,9 @@ var SimpleAttribute = function (_a) {
             _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _b)) },
         react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: (0, classnames_1.default)((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
-            react_1.default.createElement("span", { className: (0, classnames_1.default)(styles[historyClassName], (_d = {}, _d[ovValueStyles.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue), _d)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
+            react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.attributeValue, styles[historyClassName], (_d = {},
+                    _d[ovValueStyles.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue),
+                    _d)), "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
             _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _e)) },
         react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },

package/cjs/components/attributes/readMode/SimpleAttribute/styles.js

@@ -25,7 +25,7 @@ exports.useStyles = (0, styles_1.makeStyles)({
         marginRight: '-4px' // AttributesPager padding compensation
     },
     attributeValue: {
-        flex: 1,
+        verticalAlign: 'middle',
         wordBreak: 'break-all'
     },
     updateAttribute: __assign(__assign({ width: 'fit-content', padding: '0 4px', marginLeft: '-4px' }, mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.updateAttribute]), { '& > a': {

package/cjs/components/attributes/readMode/SpecialAttributes/Roles/Role.js

@@ -22,8 +22,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 classnames_1 = __importDefault(require("classnames"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var HistoryAppearanceContext_1 = require("../../../../../contexts/HistoryAppearanceContext");
 var contexts_1 = require("../../../../../contexts");
@@ -35,6 +39,6 @@ var Role = function (_a) {
     var metadata = (0, contexts_1.useMdmMetadata)();
     var attributeAppearance = (0, mdm_sdk_1.getHistoryAppearanceBySpecialAttributeValue)('roles', value, appearance);
     var historyClassName = (0, mdm_sdk_1.getHistoryAttributeClassName)(attributeAppearance);
-    return react_1.default.createElement("span", { className: styles[historyClassName] }, (0, mdm_sdk_1.getRoleLabel)(metadata, value));
+    return (react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.attributeValue, styles[historyClassName]) }, (0, mdm_sdk_1.getRoleLabel)(metadata, value)));
 };
 exports.default = Role;