@reltio/components 1.4.1673 → 1.4.1675

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;

package/cjs/components/attributes/readMode/SpecialAttributes/Tags/Tag.js

@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var InternalLink_1 = __importDefault(require("../../../../InternalLink/InternalLink"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var contexts_1 = require("../../../../../contexts");
@@ -42,7 +43,7 @@ var Tag = function (_a) {
     var attributeAppearance = (0, mdm_sdk_1.getHistoryAppearanceBySpecialAttributeValue)('tags', value, appearance);
     var historyClassName = (0, mdm_sdk_1.getHistoryAttributeClassName)(attributeAppearance);
     var entity = ownEntity || currentEntity;
-    return (react_1.default.createElement(InternalLink_1.default, { className: styles[historyClassName], href: generateTagUrl({
+    return (react_1.default.createElement(InternalLink_1.default, { className: (0, classnames_1.default)(styles.attributeValue, styles[historyClassName]), href: generateTagUrl({
             uiPath: uiPath,
             tag: value,
             entityUri: entity.dataTenant ? (0, mdm_sdk_1.getDataTenantEntityUri)(entity) : entity.uri

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

@@ -1 +1 @@
-export declare const useCommonStyles: (props?: any) => import("@mui/styles").ClassNameMap<"insertAttribute" | "deleteAttribute">;
+export declare const useCommonStyles: (props?: any) => import("@mui/styles").ClassNameMap<"attributeValue" | "insertAttribute" | "deleteAttribute">;

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

@@ -15,6 +15,9 @@ exports.useCommonStyles = void 0;
 var styles_1 = require("@mui/styles");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 exports.useCommonStyles = (0, styles_1.makeStyles)({
+    attributeValue: {
+        verticalAlign: 'middle'
+    },
     insertAttribute: __assign({ width: 'fit-content' }, mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.insertAttribute]),
     deleteAttribute: __assign({ width: 'fit-content', textDecoration: 'line-through', padding: '0 4px' }, mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.deleteAttribute])
 });

package/cjs/components/index.d.ts

@@ -153,3 +153,4 @@ 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.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = 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.SimpleMatchRulesBlock = 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.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.RelevanceScoreBadge = exports.RequiredMark = exports.HierarchyNodeTitle = exports.DataTenantBadge = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.DragAndDrop = 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 = void 0;
-exports.StepNavigation = exports.TenantLabel = exports.MultilineMenuItem = void 0;
+exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.MultilineMenuItem = 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; } });
@@ -329,3 +329,5 @@ 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");
 Object.defineProperty(exports, "StepNavigation", { enumerable: true, get: function () { return __importDefault(StepNavigation_1).default; } });
+var TableSkeleton_1 = require("./TableSkeleton/TableSkeleton");
+Object.defineProperty(exports, "TableSkeleton", { enumerable: true, get: function () { return TableSkeleton_1.TableSkeleton; } });

package/cjs/icons/index.d.ts

@@ -19,13 +19,14 @@ export { default as Duplicate } from './Duplicate';
 export { default as EmptySearchResults } from './EmptySearchResults';
 export { default as Error } from './Error';
 export { default as Filter } from './Filter';
+export { default as Hyperlink } from './Hyperlink';
 export { default as Ignored } from './Ignored';
 export { default as IgnoredOutlined } from './IgnoredOutlined';
 export { default as LogIn } from './LogIn';
 export { default as LogOut } from './LogOut';
+export { default as MlMatch } from './MlMatch';
 export { default as Merge } from './Merge';
 export { default as MergeDark } from './MergeDark';
-export { default as MlMatch } from './MlMatch';
 export { default as NegativeRuleIcon } from './NegativeRuleIcon';
 export { default as NegativeRuleTooltipIcon } from './NegativeRuleTooltipIcon';
 export { default as NestedAttribute } from './NestedAttribute';
@@ -34,11 +35,11 @@ export { default as NoDataSearch } from './NoDataSearch';
 export { default as NoMatches } from './NoMatches';
 export { default as NotMatchDark } from './NotMatchDark';
 export { default as NotMatchRule } from './NotMatchRule';
+export { default as PmIcon } from './PmIcon';
+export { default as PmTaskIcon } from './PmTaskIcon';
 export { default as Pin } from './Pin';
 export { default as PinOutlined } from './PinOutlined';
 export { default as PivotingIcon } from './PivotingIcon';
-export { default as PmIcon } from './PmIcon';
-export { default as PmTaskIcon } from './PmTaskIcon';
 export { default as Polygon } from './Polygon';
 export { default as PotentialMatch } from './PotentialMatch';
 export { default as Profile } from './Profile';
@@ -52,5 +53,6 @@ export { default as Search } from './Search';
 export { default as SelectAttributes } from './SelectAttributes';
 export { default as SimpleAttribute } from './SimpleAttribute';
 export { default as Table } from './Table';
+export { default as Tenant } from './Tenant';
 export { default as UnMerge } from './UnMerge';
 export { default as UploadIcon } from './UploadIcon';

package/cjs/icons/index.js

@@ -3,8 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResizeIconInline = exports.Remove = exports.ReferenceAttribute = exports.Recommended = exports.Reassign = exports.Radius = exports.Profile = exports.PotentialMatch = exports.Polygon = exports.PmTaskIcon = exports.PmIcon = exports.PivotingIcon = exports.PinOutlined = exports.Pin = exports.NotMatchRule = exports.NotMatchDark = exports.NoMatches = exports.NoDataSearch = exports.NoData = exports.NestedAttribute = exports.NegativeRuleTooltipIcon = exports.NegativeRuleIcon = exports.MlMatch = exports.MergeDark = exports.Merge = exports.LogOut = exports.LogIn = exports.IgnoredOutlined = exports.Ignored = exports.Filter = exports.Error = exports.EmptySearchResults = exports.Duplicate = exports.Draw = exports.Download = exports.Details = exports.Description = exports.DeleteRequestTaskIcon = exports.DefaultTaskIcon = exports.DefaultImage = exports.DcrTaskIcon = exports.Create = exports.Copy = exports.CommentBubble = exports.Comment = exports.CollaborationIcon = exports.Calendar = exports.AttributesList = exports.AddComment = exports.Add = void 0;
-exports.UploadIcon = exports.UnMerge = exports.Table = exports.SimpleAttribute = exports.SelectAttributes = exports.Search = void 0;
+exports.Remove = exports.ReferenceAttribute = exports.Recommended = exports.Reassign = exports.Radius = exports.Profile = exports.PotentialMatch = exports.Polygon = exports.PivotingIcon = exports.PinOutlined = exports.Pin = exports.PmTaskIcon = exports.PmIcon = exports.NotMatchRule = exports.NotMatchDark = exports.NoMatches = exports.NoDataSearch = exports.NoData = exports.NestedAttribute = exports.NegativeRuleTooltipIcon = exports.NegativeRuleIcon = exports.MergeDark = exports.Merge = exports.MlMatch = exports.LogOut = exports.LogIn = exports.IgnoredOutlined = exports.Ignored = exports.Hyperlink = exports.Filter = exports.Error = exports.EmptySearchResults = exports.Duplicate = exports.Draw = exports.Download = exports.Details = exports.Description = exports.DeleteRequestTaskIcon = exports.DefaultTaskIcon = exports.DefaultImage = exports.DcrTaskIcon = exports.Create = exports.Copy = exports.CommentBubble = exports.Comment = exports.CollaborationIcon = exports.Calendar = exports.AttributesList = exports.AddComment = exports.Add = void 0;
+exports.UploadIcon = exports.UnMerge = exports.Tenant = exports.Table = exports.SimpleAttribute = exports.SelectAttributes = exports.Search = exports.ResizeIconInline = void 0;
 var Add_1 = require("./Add");
 Object.defineProperty(exports, "Add", { enumerable: true, get: function () { return __importDefault(Add_1).default; } });
 var AddComment_1 = require("./AddComment");
@@ -47,6 +47,8 @@ var Error_1 = require("./Error");
 Object.defineProperty(exports, "Error", { enumerable: true, get: function () { return __importDefault(Error_1).default; } });
 var Filter_1 = require("./Filter");
 Object.defineProperty(exports, "Filter", { enumerable: true, get: function () { return __importDefault(Filter_1).default; } });
+var Hyperlink_1 = require("./Hyperlink");
+Object.defineProperty(exports, "Hyperlink", { enumerable: true, get: function () { return __importDefault(Hyperlink_1).default; } });
 var Ignored_1 = require("./Ignored");
 Object.defineProperty(exports, "Ignored", { enumerable: true, get: function () { return __importDefault(Ignored_1).default; } });
 var IgnoredOutlined_1 = require("./IgnoredOutlined");
@@ -55,12 +57,12 @@ var LogIn_1 = require("./LogIn");
 Object.defineProperty(exports, "LogIn", { enumerable: true, get: function () { return __importDefault(LogIn_1).default; } });
 var LogOut_1 = require("./LogOut");
 Object.defineProperty(exports, "LogOut", { enumerable: true, get: function () { return __importDefault(LogOut_1).default; } });
+var MlMatch_1 = require("./MlMatch");
+Object.defineProperty(exports, "MlMatch", { enumerable: true, get: function () { return __importDefault(MlMatch_1).default; } });
 var Merge_1 = require("./Merge");
 Object.defineProperty(exports, "Merge", { enumerable: true, get: function () { return __importDefault(Merge_1).default; } });
 var MergeDark_1 = require("./MergeDark");
 Object.defineProperty(exports, "MergeDark", { enumerable: true, get: function () { return __importDefault(MergeDark_1).default; } });
-var MlMatch_1 = require("./MlMatch");
-Object.defineProperty(exports, "MlMatch", { enumerable: true, get: function () { return __importDefault(MlMatch_1).default; } });
 var NegativeRuleIcon_1 = require("./NegativeRuleIcon");
 Object.defineProperty(exports, "NegativeRuleIcon", { enumerable: true, get: function () { return __importDefault(NegativeRuleIcon_1).default; } });
 var NegativeRuleTooltipIcon_1 = require("./NegativeRuleTooltipIcon");
@@ -77,16 +79,16 @@ var NotMatchDark_1 = require("./NotMatchDark");
 Object.defineProperty(exports, "NotMatchDark", { enumerable: true, get: function () { return __importDefault(NotMatchDark_1).default; } });
 var NotMatchRule_1 = require("./NotMatchRule");
 Object.defineProperty(exports, "NotMatchRule", { enumerable: true, get: function () { return __importDefault(NotMatchRule_1).default; } });
+var PmIcon_1 = require("./PmIcon");
+Object.defineProperty(exports, "PmIcon", { enumerable: true, get: function () { return __importDefault(PmIcon_1).default; } });
+var PmTaskIcon_1 = require("./PmTaskIcon");
+Object.defineProperty(exports, "PmTaskIcon", { enumerable: true, get: function () { return __importDefault(PmTaskIcon_1).default; } });
 var Pin_1 = require("./Pin");
 Object.defineProperty(exports, "Pin", { enumerable: true, get: function () { return __importDefault(Pin_1).default; } });
 var PinOutlined_1 = require("./PinOutlined");
 Object.defineProperty(exports, "PinOutlined", { enumerable: true, get: function () { return __importDefault(PinOutlined_1).default; } });
 var PivotingIcon_1 = require("./PivotingIcon");
 Object.defineProperty(exports, "PivotingIcon", { enumerable: true, get: function () { return __importDefault(PivotingIcon_1).default; } });
-var PmIcon_1 = require("./PmIcon");
-Object.defineProperty(exports, "PmIcon", { enumerable: true, get: function () { return __importDefault(PmIcon_1).default; } });
-var PmTaskIcon_1 = require("./PmTaskIcon");
-Object.defineProperty(exports, "PmTaskIcon", { enumerable: true, get: function () { return __importDefault(PmTaskIcon_1).default; } });
 var Polygon_1 = require("./Polygon");
 Object.defineProperty(exports, "Polygon", { enumerable: true, get: function () { return __importDefault(Polygon_1).default; } });
 var PotentialMatch_1 = require("./PotentialMatch");
@@ -113,6 +115,8 @@ var SimpleAttribute_1 = require("./SimpleAttribute");
 Object.defineProperty(exports, "SimpleAttribute", { enumerable: true, get: function () { return __importDefault(SimpleAttribute_1).default; } });
 var Table_1 = require("./Table");
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+var Tenant_1 = require("./Tenant");
+Object.defineProperty(exports, "Tenant", { enumerable: true, get: function () { return __importDefault(Tenant_1).default; } });
 var UnMerge_1 = require("./UnMerge");
 Object.defineProperty(exports, "UnMerge", { enumerable: true, get: function () { return __importDefault(UnMerge_1).default; } });
 var UploadIcon_1 = require("./UploadIcon");

package/esm/components/BasicViewHeader/styles.js

@@ -7,7 +7,7 @@ export var useStyles = makeStyles({
     },
     title: {
         fontSize: '18px',
-        minWidth: '50px',
+        minWidth: '20px',
         fontWeight: 'normal',
         lineHeight: 'inherit',
         whiteSpace: 'nowrap',

package/esm/components/ExpandableSearchInput/ExpandableSearchInput.js

@@ -19,6 +19,6 @@ export var ExpandableSearchInput = function (_a) {
     var styles = useStyles();
     return isOpen ? (React.createElement(Input, { className: styles.input, value: value, autoFocus: true, placeholder: i18n.text('Search'), disableUnderline: true, onChange: pipe(getValue, setValue), startAdornment: React.createElement(InputAdornment, { position: "start" },
             React.createElement(SearchIcon, { className: styles.startAdornment })), endAdornment: React.createElement(InputAdornment, { position: "end" },
-            React.createElement(SmallIconButton, { size: "S", icon: CloseIcon, onClick: pipe(F, setIsOpen, always(''), tap(onChange), setValue) })), onKeyPress: when(propEq('key', 'Enter'), pipe(always(value), trim, onChange)) })) : (React.createElement(IconButton, { className: styles.searchButton, onClick: pipe(T, setIsOpen), size: "large" },
+            React.createElement(SmallIconButton, { size: "S", icon: CloseIcon, className: styles.endAdornment, onClick: pipe(F, setIsOpen, always(''), tap(onChange), setValue) })), onKeyPress: when(propEq('key', 'Enter'), pipe(always(value), trim, onChange)) })) : (React.createElement(IconButton, { className: styles.searchButton, onClick: pipe(T, setIsOpen), size: "large" },
         React.createElement(SearchIcon, null)));
 };

package/esm/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/esm/components/ExpandableSearchInput/styles.js

@@ -1,14 +1,12 @@
 import { makeStyles } from '@mui/styles';
 export var useStyles = 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',
@@ -17,5 +15,8 @@ export var useStyles = makeStyles({
     startAdornment: {
         color: 'rgba(0,0,0,0.54)',
         paddingLeft: '8px'
+    },
+    endAdornment: {
+        marginRight: '4px'
     }
 });

package/esm/components/LinearLoadIndicator/styles.js

@@ -6,9 +6,8 @@ export var useStyles = 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/esm/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/esm/components/RelationEditor/RelationEditor.js

@@ -11,13 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import i18n from 'ui-i18n';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { always, concat, differenceWith, equals, forEach, omit, path, pick, pipe, prop, when, uniq, curry } from 'ramda';
 import Button from '@mui/material/Button';
-import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
-import { ConnectionType, createTemporaryEntity, findRelatedTemporaryEntities, getActivenessAttributes, getCreatableAttributeTypes, getEntityType, getErrorMessage, getErrorId, MetadataType, omitMarks, relationEditorAttributeTypesSelectionStrategy, RelationsConfigType, validateConnection, updateConnectionEntityLabel, isTempUri, isEmptyValue, getRelationAttributesList, getDefaultRelationTypeObject, getInOutRelations, isSuggestMode, isAttributeTypeError, getRelationUriFromConnection, getRelationEditorActiveError, getRelationAttributesFromConnection, getEntityUriFromConnection } from '@reltio/mdm-sdk';
+import { createTemporaryEntity, findRelatedTemporaryEntities, getActivenessAttributes, getCreatableAttributeTypes, getEntityType, getErrorMessage, getErrorId, omitMarks, relationEditorAttributeTypesSelectionStrategy, validateConnection, updateConnectionEntityLabel, isTempUri, isEmptyValue, getRelationAttributesList, getDefaultRelationTypeObject, getInOutRelations, isSuggestMode, isAttributeTypeError, getRelationUriFromConnection, getRelationEditorActiveError, getRelationAttributesFromConnection, getEntityUriFromConnection } from '@reltio/mdm-sdk';
 import ConnectionRelationTypeSelector from '../ConnectionRelationTypeSelector/ConnectionRelationTypeSelector';
 import ErrorWrapper from '../ErrorWrapper/ErrorWrapper';
 import EntitySelector from '../attributes/editMode/EntitySelector/EntitySelector';
@@ -175,18 +173,10 @@ var RelationEditor = function (_a) {
                                 _b[styles.dense] = errorMessage ||
                                     (connection.entity && isTempUri(connection.entity.entityUri)),
                                 _b)), entity: connection.entity || {}, entityTypesUris: getEntityTypesUris() || [], max: config.max || 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: isSuggestMode(mode) ? undefined : onCreateEntity, metadata: metadata, attributeTypesSelectionStrategy: relationEditorAttributeTypesSelectionStrategy }))),
-                React.createElement(AttributesList, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, crosswalks: connection.crosswalks, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))),
+                React.createElement(AttributesList, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))),
         React.createElement("div", { className: styles.actionButtons },
             React.createElement(Button, { onClick: onCancel }, i18n.text('Cancel')),
-            React.createElement(Button, { color: "primary", disabled: !hasChanges, onClick: onApply }, i18n.text('Apply'))),
-        React.createElement(Divider, null)));
-};
-RelationEditor.propTypes = {
-    connection: ConnectionType,
-    config: RelationsConfigType,
-    mode: PropTypes.string,
-    metadata: MetadataType,
-    highlightedError: PropTypes.object
+            React.createElement(Button, { color: "primary", disabled: !hasChanges, onClick: onApply }, i18n.text('Apply')))));
 };
 export default withContext(ScrollToElementContext, function (contextValue, _a) {
     var connection = _a.connection;

package/esm/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/esm/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/esm/components/TableSkeleton/TableSkeleton.js

@@ -0,0 +1,44 @@
+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, { useMemo } from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import { BasicTable } from '../BasicTableView';
+import { useStyles } from './styles';
+var MAX_HEIGHT = 477;
+var DefaultRowCellRenderer = function () {
+    var styles = useStyles();
+    return React.createElement(Skeleton, { className: styles.rowSkeleton });
+};
+export var TableSkeleton = function (_a) {
+    var tableColumnsData = _a.tableColumnsData, RowCellRenderer = _a.RowCellRenderer, props = __rest(_a, ["tableColumnsData", "RowCellRenderer"]);
+    var styles = useStyles();
+    var tableRowsData = 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.createElement(RowCellRenderer, __assign({}, props)) : React.createElement(DefaultRowCellRenderer, null);
+    };
+    return (React.createElement(BasicTable, __assign({ autosizing: true, containerClassName: styles.container, columnsData: tableColumnsData, rowsData: tableRowsData, defaultColumnMinWidth: 200, defaultColumnWidth: 250, headRowHeight: 48, renderRowCell: renderRowCell, maxHeight: MAX_HEIGHT }, props)));
+};

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

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

package/esm/components/TableSkeleton/styles.js

@@ -0,0 +1,12 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles({
+    container: {
+        '&:last-child > div > div > div': {
+            overflow: 'hidden!important'
+        }
+    },
+    rowSkeleton: {
+        margin: '15px 25px',
+        width: '40%'
+    }
+});

package/esm/components/Title/styles.js

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

package/esm/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/esm/components/attributes/DescriptionIcon/DescriptionIcon.js

@@ -1,11 +1,9 @@
 import React, { useContext } from 'react';
 import classnames from 'classnames';
-import Chip from '@mui/material/Chip';
+import Tooltip from '@mui/material/Tooltip';
 import { FeaturesContext } from '../../../contexts';
-import { withTooltip } from '../../../HOCs';
 import Description from '../../../icons/Description';
 import { useStyles } from './styles';
-export var ChipWithTooltip = withTooltip(Chip);
 var DescriptionIcon = function (_a) {
     var className = _a.className, description = _a.description;
     var showDescription = useContext(FeaturesContext).showDescription;
@@ -13,10 +11,8 @@ var DescriptionIcon = function (_a) {
     if (!description || !showDescription) {
         return null;
     }
-    return (React.createElement(ChipWithTooltip, { tooltipTitle: description, tooltipPlacement: "bottom", icon: React.createElement(Description, null), classes: {
-            root: classnames(styles.container, className),
-            label: styles.label,
-            icon: styles.icon
-        } }));
+    return (React.createElement(Tooltip, { title: description, placement: "bottom" },
+        React.createElement("span", { "data-reltio-id": "reltio-description-icon", className: classnames(styles.icon, className) },
+            React.createElement(Description, null))));
 };
 export default DescriptionIcon;

package/esm/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/esm/components/attributes/DescriptionIcon/styles.js

@@ -1,22 +1,8 @@
 import { makeStyles } from '@mui/styles';
 export var useStyles = 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/esm/components/attributes/PivotingAttributes/styles.js

@@ -45,12 +45,12 @@ export var useStyles = 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',
@@ -71,11 +71,15 @@ export var useStyles = 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/esm/components/attributes/editMode/AttributesFactory/Attribute.js

@@ -13,7 +13,7 @@ import React, { forwardRef } from 'react';
 import EditModeAttributesFactory from './AttributesFactory';
 var Attribute = forwardRef(function (props, ref) {
     var className = props.className, otherProps = __rest(props, ["className"]);
-    return (React.createElement("div", { ref: ref, className: className }, EditModeAttributesFactory.build(props.attributeType, otherProps)));
+    return (React.createElement("div", { ref: ref, "data-reltio-id": "reltio-edit-attribute", className: className }, EditModeAttributesFactory.build(props.attributeType, otherProps)));
 });
 Attribute.displayName = 'Attribute';
 export default Attribute;

package/esm/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/esm/components/attributes/editMode/AttributesPager/CardinalityMessage.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import { CardinalityType } from '@reltio/mdm-sdk';
+import i18n from 'ui-i18n';
 import Typography from '@mui/material/Typography';
 import { allPass, always, cond, isNil, has, not, pipe, propSatisfies, T } from 'ramda';
 import { useStyles } from './styles';
-import i18n from 'ui-i18n';
 var valueCaption = function (value) {
     return i18n.text('${value}', {
         value: value === 1 ? i18n.text('value') : i18n.text('values')
@@ -59,9 +58,7 @@ var getCardinalityMessage = cond([
 var CardinalityMessage = function (_a) {
     var cardinality = _a.cardinality;
     var styles = useStyles();
-    return (React.createElement(Typography, { variant: "caption", className: styles.caption }, getCardinalityMessage(cardinality)));
-};
-CardinalityMessage.propTypes = {
-    cardinality: CardinalityType
+    var cardinalityMessage = getCardinalityMessage(cardinality);
+    return cardinalityMessage ? (React.createElement(Typography, { variant: "caption", className: styles.caption }, cardinalityMessage)) : null;
 };
 export default CardinalityMessage;

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

@@ -37,7 +37,7 @@ var AttributesView = function (_a) {
     var onChangeAttribute = useCallback(function (params) { return modifyAttribute(__assign(__assign({}, params), { viewId: viewId })); }, [viewId, modifyAttribute]);
     var onDeleteAttribute = useCallback(function (params) { return removeAttribute(__assign(__assign({}, params), { viewId: viewId })); }, [viewId, removeAttribute]);
     return (React.createElement(BasicView, { className: className },
-        caption && React.createElement(FacetViewHeader, { className: styles.header, title: caption }),
+        caption && React.createElement(FacetViewHeader, { title: caption }),
         React.createElement(Box, { className: classnames(styles.attributesContainer, (_b = {}, _b[styles.noCaption] = !caption, _b)) },
             React.createElement(PinnedAttributesContext.Provider, { value: pinnedAttributeUris },
                 React.createElement(AttributesList, { entity: modifiedEntity, attrTypes: filteredAttrTypes, parentUri: modifiedEntity.uri, drawLines: false, mode: mode, showEmptyEditors: isTempUri(modifiedEntity.uri), crosswalks: modifiedEntity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))));

package/esm/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/esm/components/attributes/editMode/AttributesView/styles.js

@@ -2,10 +2,7 @@ import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     attributesContainer: {
         overflow: 'hidden',
-        padding: '0 16px 16px 16px'
-    },
-    header: {
-        marginBottom: '4px'
+        padding: '8px 16px'
     },
     noCaption: {
         paddingTop: '16px'

package/esm/components/attributes/editMode/MoreAttributesButton/MoreAttributesButton.js

@@ -70,7 +70,7 @@ var MoreAttributesButton = function (_a) {
             React.createElement(AddIcon, { classes: { root: styles.icon } }),
             React.createElement("div", { className: styles.buttonLabel }, label)),
         React.createElement(SelectionPopup, { open: isOpen, className: classnames(styles.moreAttributesPopup, styles.popupContainer), anchorEl: inputRef.current, onClose: pipe(addSelectedAttributes, closePopup, clearFilter, clearSelectedItems), onSearch: setFilter, containerHeight: containerHeight, title: popupTitle, containerWidth: LIST_CONTAINER_WIDTH, searchInputOnKeyDown: handleKeyDown },
-            React.createElement(VirtualGroupedList, { getItemSize: getItemSize, renderItem: listItemRenderer, renderGroupTitle: renderGroupTitle, items: items, height: listHeight, focusIndex: focusIndex }),
+            React.createElement(VirtualGroupedList, { getItemSize: getItemSize, renderItem: listItemRenderer, renderGroupTitle: renderGroupTitle, disableHorizontalScrollbar: true, items: items, height: listHeight, focusIndex: focusIndex }),
             items.length === 0 && (React.createElement("div", { className: styles.noResultsCaptionContainer },
                 React.createElement(Typography, { variant: "caption", display: "block", gutterBottom: true }, i18n.text('No results found')))))));
 };