@reltio/components 1.4.1522 → 1.4.1524

package/cjs/components/ProfileResizablePanes/ProfileResizablePanes.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RightPanelTab } from '../../types';
+declare type Props = {
+    perspectiveId: string;
+    children: [React.ReactElement, React.ReactElement];
+    buttonsProps: Array<RightPanelTab['buttonProps']>;
+    disabled?: boolean;
+    defaultTab?: number;
+};
+export declare const ProfileResizablePanes: {
+    ({ perspectiveId, children, buttonsProps, disabled, defaultTab }: Props): JSX.Element;
+    displayName: string;
+};
+export {};

package/cjs/components/ProfileResizablePanes/ProfileResizablePanes.js

@@ -0,0 +1,64 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileResizablePanes = void 0;
+var react_1 = __importStar(require("react"));
+var ResizablePanes_1 = require("../ResizablePanes/ResizablePanes");
+var SideButtonsPanel_1 = require("../SideIconPanel/SideButtonsPanel");
+var contexts_1 = require("../../contexts");
+var ramda_1 = require("ramda");
+var styles_1 = require("./styles");
+var DEFAULT_R_PANE_SIZE = 480;
+var MIN_R_PANE_SIZE = 320;
+var MAX_R_PANE_SIZE = 640;
+var ProfileResizablePanes = function (_a) {
+    var perspectiveId = _a.perspectiveId, children = _a.children, buttonsProps = _a.buttonsProps, disabled = _a.disabled, defaultTab = _a.defaultTab;
+    var styles = (0, styles_1.useStyles)();
+    var _b = (0, contexts_1.usePerspectivesSettings)(perspectiveId), perspectiveSettings = _b.perspectiveSettings, updatePerspectiveSettings = _b.updatePerspectiveSettings;
+    var _c = (perspectiveSettings || {}).width, width = _c === void 0 ? DEFAULT_R_PANE_SIZE : _c;
+    var active = defaultTab || (perspectiveSettings === null || perspectiveSettings === void 0 ? void 0 : perspectiveSettings.active);
+    var isSidePanelOpen = !(0, ramda_1.isNil)(active) && !disabled;
+    var handleUpdateSettings = (0, react_1.useCallback)(function (newSetting) {
+        updatePerspectiveSettings(newSetting);
+    }, [updatePerspectiveSettings]);
+    var toggleActive = (0, react_1.useCallback)(function (newId) {
+        var newActive = active === newId ? null : newId;
+        handleUpdateSettings({ active: newActive });
+    }, [active, handleUpdateSettings]);
+    var resetActive = (0, react_1.useCallback)(function () {
+        handleUpdateSettings({ active: null });
+    }, [handleUpdateSettings]);
+    var handlePaneSizeChange = (0, react_1.useCallback)(function (_a) {
+        var size = _a.size;
+        handleUpdateSettings({ width: size });
+    }, [handleUpdateSettings]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ResizablePanes_1.ResizablePanes, { className: styles.resizablePanesWrapper, primary: "second", orientation: "vertical", size: isSidePanelOpen ? width : 0, minSize: MIN_R_PANE_SIZE, maxSize: MAX_R_PANE_SIZE, allowResize: isSidePanelOpen, onChange: handlePaneSizeChange, debounceInterval: 2500 },
+            react_1.default.createElement("div", { className: styles.pane }, children[0]),
+            react_1.default.createElement("div", { className: styles.pane }, (0, react_1.cloneElement)(children[1], { active: active, onClose: resetActive }))),
+        react_1.default.createElement(SideButtonsPanel_1.SideButtonsPanel, { disabled: disabled, buttonsProps: buttonsProps, onButtonClick: toggleActive, activeIndexId: active })));
+};
+exports.ProfileResizablePanes = ProfileResizablePanes;
+exports.ProfileResizablePanes.displayName = 'ProfileResizablePanes';

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

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"resizablePanesWrapper" | "pane">;
+export { useStyles };

package/cjs/components/ProfileResizablePanes/styles.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+var useStyles = (0, styles_1.makeStyles)(function () { return ({
+    resizablePanesWrapper: {
+        flexGrow: 1,
+        height: '100%',
+        marginRight: '1px'
+    },
+    pane: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden'
+    }
+}); });
+exports.useStyles = useStyles;

package/cjs/components/ResizablePanes/ResizablePanes.d.ts

@@ -1,27 +1,26 @@
-export default ResizablePanes;
-declare function ResizablePanes({ className, children, orientation, defaultSize, size, minSize, maxSize, allowResize, onChange }: {
-    className: any;
-    children: any;
-    orientation: any;
-    defaultSize: any;
-    size: any;
-    minSize: any;
-    maxSize: any;
-    allowResize: any;
-    onChange: any;
-}): JSX.Element;
-declare namespace ResizablePanes {
-    namespace propTypes {
-        export const className: PropTypes.Requireable<string>;
-        export const children: PropTypes.Validator<PropTypes.ReactNodeLike[]>;
-        export const orientation: PropTypes.Validator<string>;
-        export { SizePropType as defaultSize };
-        export { SizePropType as size };
-        export { SizePropType as minSize };
-        export { SizePropType as maxSize };
-        export const allowResize: PropTypes.Requireable<boolean>;
-        export const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from "prop-types";
-declare const SizePropType: PropTypes.Requireable<NonNullable<string | number>>;
+import React from 'react';
+export declare type Size = string | number;
+declare type OnChange = {
+    size: number;
+    percentageSize: string;
+    isMaxSize: boolean;
+    isMinSize: boolean;
+};
+declare type Props = {
+    className?: string;
+    children: React.ReactElement[];
+    allowResize?: boolean;
+    primary?: 'first' | 'second';
+    minSize?: Size;
+    maxSize?: Size;
+    defaultSize?: Size;
+    debounceInterval?: number;
+    size?: Size;
+    orientation?: 'vertical' | 'horizontal';
+    onChange?: ({ size, percentageSize, isMaxSize, isMinSize }: OnChange) => void;
+};
+export declare const ResizablePanes: {
+    ({ className, children, orientation, primary, defaultSize, size, minSize, maxSize, allowResize, debounceInterval, onChange }: Props): JSX.Element;
+    displayName: string;
+};
+export {};

package/cjs/components/ResizablePanes/ResizablePanes.js

@@ -26,21 +26,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResizablePanes = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var react_split_pane_1 = __importDefault(require("react-split-pane"));
 var styles_1 = require("@material-ui/core/styles");
-var styles_2 = require("./styles");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var styles_2 = require("./styles");
 var HANDLE_CHANGE_DEBOUNCE_INTERVAL = 250;
 var isHorizontal = function (orientation) { return orientation === 'horizontal'; };
 var ResizablePanes = function (_a) {
-    var className = _a.className, children = _a.children, orientation = _a.orientation, defaultSize = _a.defaultSize, size = _a.size, minSize = _a.minSize, maxSize = _a.maxSize, allowResize = _a.allowResize, onChange = _a.onChange;
+    var className = _a.className, children = _a.children, orientation = _a.orientation, primary = _a.primary, defaultSize = _a.defaultSize, size = _a.size, minSize = _a.minSize, maxSize = _a.maxSize, allowResize = _a.allowResize, _b = _a.debounceInterval, debounceInterval = _b === void 0 ? HANDLE_CHANGE_DEBOUNCE_INTERVAL : _b, onChange = _a.onChange;
     var styles = (0, styles_2.useStyles)();
     var theme = (0, styles_1.useTheme)();
-    var _b = (0, react_1.useState)(), containerEl = _b[0], setContainerEl = _b[1];
-    var _c = (0, react_1.useState)(true), isPaneAnimationEnabled = _c[0], setIsPaneAnimationEnabled = _c[1];
+    var _c = (0, react_1.useState)(null), containerEl = _c[0], setContainerEl = _c[1];
+    var _d = (0, react_1.useState)(true), isPaneAnimationEnabled = _d[0], setIsPaneAnimationEnabled = _d[1];
     var enableAnimation = (0, react_1.useCallback)(function () { return setIsPaneAnimationEnabled(true); }, []);
     var disableAnimation = (0, react_1.useCallback)(function () { return setIsPaneAnimationEnabled(false); }, []);
     var getContainerSize = function () { return (isHorizontal(orientation) ? containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientHeight : containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientWidth); };
@@ -49,9 +49,10 @@ var ResizablePanes = function (_a) {
         onChange({
             percentageSize: "".concat((size / containerSize) * 100, "%"),
             isMaxSize: maxSize > 0 ? size === maxSize : size === containerSize + maxSize,
-            isMinSize: size === minSize
+            isMinSize: size === minSize,
+            size: size
         });
-    }, HANDLE_CHANGE_DEBOUNCE_INTERVAL), [onChange, orientation, maxSize, containerEl]);
+    }, debounceInterval), [onChange, orientation, maxSize, containerEl]);
     var paneAnimationStyle = (0, react_1.useMemo)(function () { return ({
         transition: theme.transitions.create(isHorizontal(orientation) ? 'height' : 'width', {
             easing: theme.transitions.easing.sharp,
@@ -62,18 +63,7 @@ var ResizablePanes = function (_a) {
         size = (getContainerSize() || 0) + size;
     }
     return (react_1.default.createElement("div", { ref: setContainerEl, className: (0, classnames_1.default)(styles.container, className) },
-        react_1.default.createElement(react_split_pane_1.default, { split: orientation, size: size, allowResize: allowResize, onChange: handleChange, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, onDragStarted: disableAnimation, onDragFinished: enableAnimation, pane1Style: isPaneAnimationEnabled ? paneAnimationStyle : undefined }, children)));
-};
-var SizePropType = prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]);
-ResizablePanes.propTypes = {
-    className: prop_types_1.default.string,
-    children: prop_types_1.default.arrayOf(prop_types_1.default.node).isRequired,
-    orientation: prop_types_1.default.oneOf(['horizontal', 'vertical']).isRequired,
-    defaultSize: SizePropType,
-    size: SizePropType,
-    minSize: SizePropType,
-    maxSize: SizePropType,
-    allowResize: prop_types_1.default.bool,
-    onChange: prop_types_1.default.func
+        react_1.default.createElement(react_split_pane_1.default, { split: orientation, size: size, primary: primary, allowResize: allowResize, onChange: handleChange, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, onDragStarted: disableAnimation, onDragFinished: enableAnimation, pane1Style: isPaneAnimationEnabled ? paneAnimationStyle : undefined }, children)));
 };
-exports.default = ResizablePanes;
+exports.ResizablePanes = ResizablePanes;
+exports.ResizablePanes.displayName = 'ResizablePanes';

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

@@ -1 +1,2 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container">;
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container">;
+export { useStyles };

package/cjs/components/SideIconPanel/SideButtonsPanel.d.ts

@@ -1,12 +1,12 @@
 import { ElementType } from 'react';
 import { IconButtonProps } from '@material-ui/core/IconButton';
 declare type Props = {
-    buttonsProps: {
+    disabled: boolean;
+    buttonsProps: Array<{
         icon: ElementType;
         tooltipTitle: string;
         id: number;
-        disabled?: boolean;
-    }[];
+    }>;
     classes?: {
         active?: string;
         buttonWrapper?: string;
@@ -15,5 +15,5 @@ declare type Props = {
     className?: string;
     onButtonClick: (id: number) => void;
 };
-export declare const SideButtonsPanel: ({ buttonsProps, activeIndexId, className, onButtonClick, classes }: Props) => JSX.Element;
+export declare const SideButtonsPanel: ({ disabled, buttonsProps, activeIndexId, className, onButtonClick, classes }: Props) => JSX.Element;
 export {};

package/cjs/components/SideIconPanel/SideButtonsPanel.js

@@ -31,13 +31,13 @@ var classnames_1 = __importDefault(require("classnames"));
 var SmallIconButton_1 = require("../SmallIconButton");
 var styles_1 = require("./styles");
 var SideButtonsPanel = function (_a) {
-    var buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick, _b = _a.classes, classes = _b === void 0 ? {} : _b;
+    var disabled = _a.disabled, buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick, _b = _a.classes, classes = _b === void 0 ? {} : _b;
     var styles = (0, styles_1.useStyles)();
     var active = classes.active, buttonWrapper = classes.buttonWrapper, iconButtonClasses = __rest(classes, ["active", "buttonWrapper"]);
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.container, className) }, buttonsProps.map(function (_a) {
         var _b;
         var id = _a.id, buttonProps = __rest(_a, ["id"]);
-        return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, { classes: iconButtonClasses, size: "S", key: id, className: (0, classnames_1.default)((_b = {}, _b[(0, classnames_1.default)(styles.active, active)] = activeIndexId === id, _b), styles.buttonWrapper, buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-".concat(id) })));
+        return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, __assign({}, buttonProps, { disabled: disabled, classes: iconButtonClasses, size: "S", key: id, className: (0, classnames_1.default)((_b = {}, _b[(0, classnames_1.default)(styles.active, active)] = activeIndexId === id, _b), styles.buttonWrapper, buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-".concat(id) })));
     })));
 };
 exports.SideButtonsPanel = SideButtonsPanel;

package/cjs/components/SidePanel/SidePanel.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, VFC } from 'react';
 declare type Props = {
-    width: number;
+    width?: number;
     open: boolean;
     children: ReactNode;
 };

package/cjs/components/SidePanel/SidePanel.js

@@ -10,7 +10,7 @@ var SidePanel = function (_a) {
     var width = _a.width, open = _a.open, children = _a.children;
     var styles = (0, styles_1.useStyles)();
     return (react_1.default.createElement("div", { className: styles.contentWrapper, style: {
-            width: "".concat(open ? width : 0, "px")
+            width: width ? "".concat(open ? width : 0, "px") : '100%'
         } }, open && react_1.default.createElement(react_1.default.Fragment, null, children)));
 };
 exports.SidePanel = SidePanel;

package/cjs/components/SidePanel/styles.js

@@ -5,10 +5,11 @@ var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     contentWrapper: {
         display: 'flex',
+        boxSizing: 'border-box',
+        flex: 1,
         flexDirection: 'column',
         backgroundColor: theme.palette.background.paper,
         boxShadow: '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2)',
-        marginLeft: '3px',
         transition: theme.transitions.create(['width'], {
             duration: theme.transitions.duration.enteringScreen
         })

package/cjs/components/history/HistoryRow/styles.js

@@ -62,7 +62,8 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
         color: 'rgba(0,0,0,0.54)',
         fontSize: '11px',
         letterSpacing: 0,
-        lineHeight: '16px'
+        lineHeight: '16px',
+        flexShrink: 0
     },
     user: {
         color: 'rgba(0,0,0,0.38)',

package/cjs/components/history/HistoryTree/styles.js

@@ -13,7 +13,7 @@ exports.useStyles = (0, styles_1.makeStyles)({
         overflowY: 'hidden'
     },
     history: {
-        minWidth: 344
+        minWidth: '260px'
     },
     buttonContainer: {
         gridColumnStart: 1,

package/cjs/components/history/hooks/useHistoryEnabled.d.ts

@@ -1,9 +1,10 @@
 import { Entity } from '@reltio/mdm-sdk';
 declare type Props = {
-    isHistoryTabActive: boolean;
     entity: Entity;
+    perspectiveId: string;
+    historyButtonId: number;
 };
-export declare const useHistoryEnabled: ({ isHistoryTabActive, entity }: Props) => {
+export declare const useHistoryEnabled: ({ perspectiveId, entity, historyButtonId }: Props) => {
     isHistoryEnabled: boolean;
     isProfilePersisted: boolean;
 };

package/cjs/components/history/hooks/useHistoryEnabled.js

@@ -3,8 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useHistoryEnabled = void 0;
 var react_1 = require("react");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var contexts_1 = require("../../../contexts");
 var useHistoryEnabled = function (_a) {
-    var isHistoryTabActive = _a.isHistoryTabActive, entity = _a.entity;
+    var perspectiveId = _a.perspectiveId, entity = _a.entity, historyButtonId = _a.historyButtonId;
+    var perspectiveSettings = (0, contexts_1.usePerspectivesSettings)(perspectiveId).perspectiveSettings;
+    var active = (perspectiveSettings || {}).active;
+    var isHistoryTabActive = active === historyButtonId;
     var _b = (0, react_1.useState)(false), wasHistoryTabActive = _b[0], setWasHistoryTabActive = _b[1];
     var entityUri = entity === null || entity === void 0 ? void 0 : entity.uri;
     (0, react_1.useEffect)(function () {

package/cjs/components/index.d.ts

@@ -90,7 +90,8 @@ export { default as ReactSortableTree } from './ReactSortableTree';
 export { default as ReactSortableTreeHandlers } from './ReactSortableTree/utils/default-handlers';
 export { default as ReactSortableTreeUtils } from './ReactSortableTree/utils/tree-data-utils';
 export { default as ReltioGridLayout } from './ReltioGridLayout/ReltioGridLayout';
-export { default as ResizablePanes } from './ResizablePanes/ResizablePanes';
+export { ResizablePanes } from './ResizablePanes/ResizablePanes';
+export { ProfileResizablePanes } from './ProfileResizablePanes/ProfileResizablePanes';
 export { default as SearchInput } from './SearchInput/SearchInput';
 export { default as WhiteSearchInput } from './SearchInput/WhiteSearchInput';
 export { useKeyboardNavigation } from './SelectionPopup/helpers';

package/cjs/components/index.js

@@ -18,8 +18,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 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.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = 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.ErrorBoundary = exports.EntityUriLink = exports.RelationTypesSelector = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = void 0;
-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.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = void 0;
+exports.SelectionPopupPopper = 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.ErrorBoundary = exports.EntityUriLink = exports.RelationTypesSelector = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = void 0;
+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.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = 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; } });
@@ -206,7 +206,9 @@ Object.defineProperty(exports, "ReactSortableTreeUtils", { enumerable: true, get
 var ReltioGridLayout_1 = require("./ReltioGridLayout/ReltioGridLayout");
 Object.defineProperty(exports, "ReltioGridLayout", { enumerable: true, get: function () { return __importDefault(ReltioGridLayout_1).default; } });
 var ResizablePanes_1 = require("./ResizablePanes/ResizablePanes");
-Object.defineProperty(exports, "ResizablePanes", { enumerable: true, get: function () { return __importDefault(ResizablePanes_1).default; } });
+Object.defineProperty(exports, "ResizablePanes", { enumerable: true, get: function () { return ResizablePanes_1.ResizablePanes; } });
+var ProfileResizablePanes_1 = require("./ProfileResizablePanes/ProfileResizablePanes");
+Object.defineProperty(exports, "ProfileResizablePanes", { enumerable: true, get: function () { return ProfileResizablePanes_1.ProfileResizablePanes; } });
 var SearchInput_1 = require("./SearchInput/SearchInput");
 Object.defineProperty(exports, "SearchInput", { enumerable: true, get: function () { return __importDefault(SearchInput_1).default; } });
 var WhiteSearchInput_1 = require("./SearchInput/WhiteSearchInput");

package/cjs/contexts/PerspectivesSettingsContext/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PerspectivesSettings, PerspectiveSettingItem } from '../../types';
+declare type PerspectivesSettingsProps = {
+    settings: PerspectivesSettings;
+    onChange: (perspectiveId: string, newSetting: Partial<PerspectiveSettingItem>) => void;
+};
+export declare const PerspectivesSettingsContext: React.Context<PerspectivesSettingsProps>;
+export declare const usePerspectivesSettings: (perspectiveId: string) => {
+    updatePerspectiveSettings: (newSetting: Partial<PerspectiveSettingItem>) => void;
+    perspectiveSettings: PerspectiveSettingItem;
+};
+export {};

package/cjs/contexts/PerspectivesSettingsContext/index.js

@@ -0,0 +1,41 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = void 0;
+var react_1 = __importStar(require("react"));
+exports.PerspectivesSettingsContext = react_1.default.createContext({
+    settings: {},
+    onChange: function () { }
+});
+exports.PerspectivesSettingsContext.displayName = 'PerspectivesSettingsContext';
+var usePerspectivesSettings = function (perspectiveId) {
+    var _a = (0, react_1.useContext)(exports.PerspectivesSettingsContext) || {}, settings = _a.settings, onChange = _a.onChange;
+    var perspectiveSettings = settings === null || settings === void 0 ? void 0 : settings[perspectiveId];
+    var updatePerspectiveSettings = (0, react_1.useCallback)(function (newSetting) {
+        onChange(perspectiveId, newSetting);
+    }, [perspectiveId, onChange]);
+    return { updatePerspectiveSettings: updatePerspectiveSettings, perspectiveSettings: perspectiveSettings };
+};
+exports.usePerspectivesSettings = usePerspectivesSettings;

package/cjs/contexts/index.d.ts

@@ -6,6 +6,7 @@ export { BlockImageGalleryDialogContext } from './BlockImageGalleryDialogContext
 export { CollaborationContext, CollaborationContextProvider } from './CollaborationContext';
 export { UsersContext } from './UsersContext';
 export { PivotingAttributeContext } from './PivotingAttributeContext';
+export { PerspectivesSettingsContext, usePerspectivesSettings } from './PerspectivesSettingsContext';
 export { ProfilePerspectiveViewContext } from './ProfilePerspectiveViewContext';
 export { IdContext } from './IdContext';
 export { EntitiesMapContext } from './EntitiesMapContext';

package/cjs/contexts/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.PivotingAttributeContext = exports.UsersContext = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.ViewIdContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = void 0;
+exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.ViewIdContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = exports.AsyncMountContext = void 0;
 var AsyncMountContext_1 = require("./AsyncMountContext");
 Object.defineProperty(exports, "AsyncMountContext", { enumerable: true, get: function () { return AsyncMountContext_1.AsyncMountContext; } });
 var HistoryAppearanceContext_1 = require("./HistoryAppearanceContext");
@@ -18,6 +18,9 @@ var UsersContext_1 = require("./UsersContext");
 Object.defineProperty(exports, "UsersContext", { enumerable: true, get: function () { return UsersContext_1.UsersContext; } });
 var PivotingAttributeContext_1 = require("./PivotingAttributeContext");
 Object.defineProperty(exports, "PivotingAttributeContext", { enumerable: true, get: function () { return PivotingAttributeContext_1.PivotingAttributeContext; } });
+var PerspectivesSettingsContext_1 = require("./PerspectivesSettingsContext");
+Object.defineProperty(exports, "PerspectivesSettingsContext", { enumerable: true, get: function () { return PerspectivesSettingsContext_1.PerspectivesSettingsContext; } });
+Object.defineProperty(exports, "usePerspectivesSettings", { enumerable: true, get: function () { return PerspectivesSettingsContext_1.usePerspectivesSettings; } });
 var ProfilePerspectiveViewContext_1 = require("./ProfilePerspectiveViewContext");
 Object.defineProperty(exports, "ProfilePerspectiveViewContext", { enumerable: true, get: function () { return ProfilePerspectiveViewContext_1.ProfilePerspectiveViewContext; } });
 var IdContext_1 = require("./IdContext");

package/cjs/types/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { AttributeType, SearchFilter } from '@reltio/mdm-sdk';
 export declare type ReactGridLayoutItem = {
     i: string;
@@ -104,3 +105,26 @@ export declare type DropDownMenuItem = {
     selectable?: boolean;
     selected?: boolean;
 };
+export declare type PerspectivesSettings = Record<string, PerspectiveSettingItem>;
+export declare type PerspectiveSettingItem = {
+    active?: number;
+    width?: number;
+};
+export declare type RightPanelTab = {
+    content?: React.ReactElement;
+    title?: React.ReactElement;
+    buttonProps?: {
+        id: number;
+        icon: React.FC;
+        tooltipTitle: string;
+        showForDisabled?: boolean;
+    };
+    headerProps?: {
+        content: React.ReactElement;
+    } | {
+        mainTitle: string;
+        secondTitle?: string;
+        rightContent?: React.ReactElement;
+    };
+    hidden?: boolean;
+};

package/esm/components/ProfileResizablePanes/ProfileResizablePanes.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RightPanelTab } from '../../types';
+declare type Props = {
+    perspectiveId: string;
+    children: [React.ReactElement, React.ReactElement];
+    buttonsProps: Array<RightPanelTab['buttonProps']>;
+    disabled?: boolean;
+    defaultTab?: number;
+};
+export declare const ProfileResizablePanes: {
+    ({ perspectiveId, children, buttonsProps, disabled, defaultTab }: Props): JSX.Element;
+    displayName: string;
+};
+export {};

package/esm/components/ProfileResizablePanes/ProfileResizablePanes.js

@@ -0,0 +1,37 @@
+import React, { useCallback, cloneElement } from 'react';
+import { ResizablePanes } from '../ResizablePanes/ResizablePanes';
+import { SideButtonsPanel } from '../SideIconPanel/SideButtonsPanel';
+import { usePerspectivesSettings } from '../../contexts';
+import { isNil } from 'ramda';
+import { useStyles } from './styles';
+var DEFAULT_R_PANE_SIZE = 480;
+var MIN_R_PANE_SIZE = 320;
+var MAX_R_PANE_SIZE = 640;
+export var ProfileResizablePanes = function (_a) {
+    var perspectiveId = _a.perspectiveId, children = _a.children, buttonsProps = _a.buttonsProps, disabled = _a.disabled, defaultTab = _a.defaultTab;
+    var styles = useStyles();
+    var _b = usePerspectivesSettings(perspectiveId), perspectiveSettings = _b.perspectiveSettings, updatePerspectiveSettings = _b.updatePerspectiveSettings;
+    var _c = (perspectiveSettings || {}).width, width = _c === void 0 ? DEFAULT_R_PANE_SIZE : _c;
+    var active = defaultTab || (perspectiveSettings === null || perspectiveSettings === void 0 ? void 0 : perspectiveSettings.active);
+    var isSidePanelOpen = !isNil(active) && !disabled;
+    var handleUpdateSettings = useCallback(function (newSetting) {
+        updatePerspectiveSettings(newSetting);
+    }, [updatePerspectiveSettings]);
+    var toggleActive = useCallback(function (newId) {
+        var newActive = active === newId ? null : newId;
+        handleUpdateSettings({ active: newActive });
+    }, [active, handleUpdateSettings]);
+    var resetActive = useCallback(function () {
+        handleUpdateSettings({ active: null });
+    }, [handleUpdateSettings]);
+    var handlePaneSizeChange = useCallback(function (_a) {
+        var size = _a.size;
+        handleUpdateSettings({ width: size });
+    }, [handleUpdateSettings]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ResizablePanes, { className: styles.resizablePanesWrapper, primary: "second", orientation: "vertical", size: isSidePanelOpen ? width : 0, minSize: MIN_R_PANE_SIZE, maxSize: MAX_R_PANE_SIZE, allowResize: isSidePanelOpen, onChange: handlePaneSizeChange, debounceInterval: 2500 },
+            React.createElement("div", { className: styles.pane }, children[0]),
+            React.createElement("div", { className: styles.pane }, cloneElement(children[1], { active: active, onClose: resetActive }))),
+        React.createElement(SideButtonsPanel, { disabled: disabled, buttonsProps: buttonsProps, onButtonClick: toggleActive, activeIndexId: active })));
+};
+ProfileResizablePanes.displayName = 'ProfileResizablePanes';

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

@@ -0,0 +1,2 @@
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"resizablePanesWrapper" | "pane">;
+export { useStyles };

package/esm/components/ProfileResizablePanes/styles.js

@@ -0,0 +1,19 @@
+import { makeStyles } from '@material-ui/core/styles';
+var useStyles = makeStyles(function () { return ({
+    resizablePanesWrapper: {
+        flexGrow: 1,
+        height: '100%',
+        marginRight: '1px'
+    },
+    pane: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden'
+    }
+}); });
+export { useStyles };

package/esm/components/ResizablePanes/ResizablePanes.d.ts

@@ -1,27 +1,26 @@
-export default ResizablePanes;
-declare function ResizablePanes({ className, children, orientation, defaultSize, size, minSize, maxSize, allowResize, onChange }: {
-    className: any;
-    children: any;
-    orientation: any;
-    defaultSize: any;
-    size: any;
-    minSize: any;
-    maxSize: any;
-    allowResize: any;
-    onChange: any;
-}): JSX.Element;
-declare namespace ResizablePanes {
-    namespace propTypes {
-        export const className: PropTypes.Requireable<string>;
-        export const children: PropTypes.Validator<PropTypes.ReactNodeLike[]>;
-        export const orientation: PropTypes.Validator<string>;
-        export { SizePropType as defaultSize };
-        export { SizePropType as size };
-        export { SizePropType as minSize };
-        export { SizePropType as maxSize };
-        export const allowResize: PropTypes.Requireable<boolean>;
-        export const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from "prop-types";
-declare const SizePropType: PropTypes.Requireable<NonNullable<string | number>>;
+import React from 'react';
+export declare type Size = string | number;
+declare type OnChange = {
+    size: number;
+    percentageSize: string;
+    isMaxSize: boolean;
+    isMinSize: boolean;
+};
+declare type Props = {
+    className?: string;
+    children: React.ReactElement[];
+    allowResize?: boolean;
+    primary?: 'first' | 'second';
+    minSize?: Size;
+    maxSize?: Size;
+    defaultSize?: Size;
+    debounceInterval?: number;
+    size?: Size;
+    orientation?: 'vertical' | 'horizontal';
+    onChange?: ({ size, percentageSize, isMaxSize, isMinSize }: OnChange) => void;
+};
+export declare const ResizablePanes: {
+    ({ className, children, orientation, primary, defaultSize, size, minSize, maxSize, allowResize, debounceInterval, onChange }: Props): JSX.Element;
+    displayName: string;
+};
+export {};

package/esm/components/ResizablePanes/ResizablePanes.js

@@ -1,18 +1,17 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import SplitPane from 'react-split-pane';
 import { useTheme } from '@material-ui/core/styles';
-import { useStyles } from './styles';
 import { debounce } from '@reltio/mdm-sdk';
+import { useStyles } from './styles';
 var HANDLE_CHANGE_DEBOUNCE_INTERVAL = 250;
 var isHorizontal = function (orientation) { return orientation === 'horizontal'; };
-var ResizablePanes = function (_a) {
-    var className = _a.className, children = _a.children, orientation = _a.orientation, defaultSize = _a.defaultSize, size = _a.size, minSize = _a.minSize, maxSize = _a.maxSize, allowResize = _a.allowResize, onChange = _a.onChange;
+export var ResizablePanes = function (_a) {
+    var className = _a.className, children = _a.children, orientation = _a.orientation, primary = _a.primary, defaultSize = _a.defaultSize, size = _a.size, minSize = _a.minSize, maxSize = _a.maxSize, allowResize = _a.allowResize, _b = _a.debounceInterval, debounceInterval = _b === void 0 ? HANDLE_CHANGE_DEBOUNCE_INTERVAL : _b, onChange = _a.onChange;
     var styles = useStyles();
     var theme = useTheme();
-    var _b = useState(), containerEl = _b[0], setContainerEl = _b[1];
-    var _c = useState(true), isPaneAnimationEnabled = _c[0], setIsPaneAnimationEnabled = _c[1];
+    var _c = useState(null), containerEl = _c[0], setContainerEl = _c[1];
+    var _d = useState(true), isPaneAnimationEnabled = _d[0], setIsPaneAnimationEnabled = _d[1];
     var enableAnimation = useCallback(function () { return setIsPaneAnimationEnabled(true); }, []);
     var disableAnimation = useCallback(function () { return setIsPaneAnimationEnabled(false); }, []);
     var getContainerSize = function () { return (isHorizontal(orientation) ? containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientHeight : containerEl === null || containerEl === void 0 ? void 0 : containerEl.clientWidth); };
@@ -21,9 +20,10 @@ var ResizablePanes = function (_a) {
         onChange({
             percentageSize: "".concat((size / containerSize) * 100, "%"),
             isMaxSize: maxSize > 0 ? size === maxSize : size === containerSize + maxSize,
-            isMinSize: size === minSize
+            isMinSize: size === minSize,
+            size: size
         });
-    }, HANDLE_CHANGE_DEBOUNCE_INTERVAL), [onChange, orientation, maxSize, containerEl]);
+    }, debounceInterval), [onChange, orientation, maxSize, containerEl]);
     var paneAnimationStyle = useMemo(function () { return ({
         transition: theme.transitions.create(isHorizontal(orientation) ? 'height' : 'width', {
             easing: theme.transitions.easing.sharp,
@@ -34,18 +34,6 @@ var ResizablePanes = function (_a) {
         size = (getContainerSize() || 0) + size;
     }
     return (React.createElement("div", { ref: setContainerEl, className: classnames(styles.container, className) },
-        React.createElement(SplitPane, { split: orientation, size: size, allowResize: allowResize, onChange: handleChange, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, onDragStarted: disableAnimation, onDragFinished: enableAnimation, pane1Style: isPaneAnimationEnabled ? paneAnimationStyle : undefined }, children)));
-};
-var SizePropType = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
-ResizablePanes.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.arrayOf(PropTypes.node).isRequired,
-    orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
-    defaultSize: SizePropType,
-    size: SizePropType,
-    minSize: SizePropType,
-    maxSize: SizePropType,
-    allowResize: PropTypes.bool,
-    onChange: PropTypes.func
+        React.createElement(SplitPane, { split: orientation, size: size, primary: primary, allowResize: allowResize, onChange: handleChange, defaultSize: defaultSize, minSize: minSize, maxSize: maxSize, onDragStarted: disableAnimation, onDragFinished: enableAnimation, pane1Style: isPaneAnimationEnabled ? paneAnimationStyle : undefined }, children)));
 };
-export default ResizablePanes;
+ResizablePanes.displayName = 'ResizablePanes';

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

@@ -1 +1,2 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container">;
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container">;
+export { useStyles };

package/esm/components/SideIconPanel/SideButtonsPanel.d.ts

@@ -1,12 +1,12 @@
 import { ElementType } from 'react';
 import { IconButtonProps } from '@material-ui/core/IconButton';
 declare type Props = {
-    buttonsProps: {
+    disabled: boolean;
+    buttonsProps: Array<{
         icon: ElementType;
         tooltipTitle: string;
         id: number;
-        disabled?: boolean;
-    }[];
+    }>;
     classes?: {
         active?: string;
         buttonWrapper?: string;
@@ -15,5 +15,5 @@ declare type Props = {
     className?: string;
     onButtonClick: (id: number) => void;
 };
-export declare const SideButtonsPanel: ({ buttonsProps, activeIndexId, className, onButtonClick, classes }: Props) => JSX.Element;
+export declare const SideButtonsPanel: ({ disabled, buttonsProps, activeIndexId, className, onButtonClick, classes }: Props) => JSX.Element;
 export {};

package/esm/components/SideIconPanel/SideButtonsPanel.js

@@ -25,12 +25,12 @@ import classnames from 'classnames';
 import { SmallIconButtonWithTooltip } from '../SmallIconButton';
 import { useStyles } from './styles';
 export var SideButtonsPanel = function (_a) {
-    var buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick, _b = _a.classes, classes = _b === void 0 ? {} : _b;
+    var disabled = _a.disabled, buttonsProps = _a.buttonsProps, activeIndexId = _a.activeIndexId, className = _a.className, onButtonClick = _a.onButtonClick, _b = _a.classes, classes = _b === void 0 ? {} : _b;
     var styles = useStyles();
     var active = classes.active, buttonWrapper = classes.buttonWrapper, iconButtonClasses = __rest(classes, ["active", "buttonWrapper"]);
     return (React.createElement("div", { className: classnames(styles.container, className) }, buttonsProps.map(function (_a) {
         var _b;
         var id = _a.id, buttonProps = __rest(_a, ["id"]);
-        return (React.createElement(SmallIconButtonWithTooltip, __assign({}, buttonProps, { classes: iconButtonClasses, size: "S", key: id, className: classnames((_b = {}, _b[classnames(styles.active, active)] = activeIndexId === id, _b), styles.buttonWrapper, buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-".concat(id) })));
+        return (React.createElement(SmallIconButtonWithTooltip, __assign({}, buttonProps, { disabled: disabled, classes: iconButtonClasses, size: "S", key: id, className: classnames((_b = {}, _b[classnames(styles.active, active)] = activeIndexId === id, _b), styles.buttonWrapper, buttonWrapper), onClick: function () { return onButtonClick(id); }, "data-reltio-id": "reltio-profile-right-side-button-".concat(id) })));
     })));
 };

package/esm/components/SidePanel/SidePanel.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, VFC } from 'react';
 declare type Props = {
-    width: number;
+    width?: number;
     open: boolean;
     children: ReactNode;
 };

package/esm/components/SidePanel/SidePanel.js

@@ -4,6 +4,6 @@ export var SidePanel = function (_a) {
     var width = _a.width, open = _a.open, children = _a.children;
     var styles = useStyles();
     return (React.createElement("div", { className: styles.contentWrapper, style: {
-            width: "".concat(open ? width : 0, "px")
+            width: width ? "".concat(open ? width : 0, "px") : '100%'
         } }, open && React.createElement(React.Fragment, null, children)));
 };

package/esm/components/SidePanel/styles.js

@@ -2,10 +2,11 @@ import { makeStyles } from '@material-ui/core/styles';
 export var useStyles = makeStyles(function (theme) { return ({
     contentWrapper: {
         display: 'flex',
+        boxSizing: 'border-box',
+        flex: 1,
         flexDirection: 'column',
         backgroundColor: theme.palette.background.paper,
         boxShadow: '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2)',
-        marginLeft: '3px',
         transition: theme.transitions.create(['width'], {
             duration: theme.transitions.duration.enteringScreen
         })

package/esm/components/history/HistoryRow/styles.js

@@ -59,7 +59,8 @@ export var useStyles = makeStyles(function () { return ({
         color: 'rgba(0,0,0,0.54)',
         fontSize: '11px',
         letterSpacing: 0,
-        lineHeight: '16px'
+        lineHeight: '16px',
+        flexShrink: 0
     },
     user: {
         color: 'rgba(0,0,0,0.38)',

package/esm/components/history/HistoryTree/styles.js

@@ -10,7 +10,7 @@ export var useStyles = makeStyles({
         overflowY: 'hidden'
     },
     history: {
-        minWidth: 344
+        minWidth: '260px'
     },
     buttonContainer: {
         gridColumnStart: 1,

package/esm/components/history/hooks/useHistoryEnabled.d.ts

@@ -1,9 +1,10 @@
 import { Entity } from '@reltio/mdm-sdk';
 declare type Props = {
-    isHistoryTabActive: boolean;
     entity: Entity;
+    perspectiveId: string;
+    historyButtonId: number;
 };
-export declare const useHistoryEnabled: ({ isHistoryTabActive, entity }: Props) => {
+export declare const useHistoryEnabled: ({ perspectiveId, entity, historyButtonId }: Props) => {
     isHistoryEnabled: boolean;
     isProfilePersisted: boolean;
 };

package/esm/components/history/hooks/useHistoryEnabled.js

@@ -1,7 +1,11 @@
 import { useEffect, useState } from 'react';
 import { isTempUri, isDataTenantEntity } from '@reltio/mdm-sdk';
+import { usePerspectivesSettings } from '../../../contexts';
 export var useHistoryEnabled = function (_a) {
-    var isHistoryTabActive = _a.isHistoryTabActive, entity = _a.entity;
+    var perspectiveId = _a.perspectiveId, entity = _a.entity, historyButtonId = _a.historyButtonId;
+    var perspectiveSettings = usePerspectivesSettings(perspectiveId).perspectiveSettings;
+    var active = (perspectiveSettings || {}).active;
+    var isHistoryTabActive = active === historyButtonId;
     var _b = useState(false), wasHistoryTabActive = _b[0], setWasHistoryTabActive = _b[1];
     var entityUri = entity === null || entity === void 0 ? void 0 : entity.uri;
     useEffect(function () {

package/esm/components/index.d.ts

@@ -90,7 +90,8 @@ export { default as ReactSortableTree } from './ReactSortableTree';
 export { default as ReactSortableTreeHandlers } from './ReactSortableTree/utils/default-handlers';
 export { default as ReactSortableTreeUtils } from './ReactSortableTree/utils/tree-data-utils';
 export { default as ReltioGridLayout } from './ReltioGridLayout/ReltioGridLayout';
-export { default as ResizablePanes } from './ResizablePanes/ResizablePanes';
+export { ResizablePanes } from './ResizablePanes/ResizablePanes';
+export { ProfileResizablePanes } from './ProfileResizablePanes/ProfileResizablePanes';
 export { default as SearchInput } from './SearchInput/SearchInput';
 export { default as WhiteSearchInput } from './SearchInput/WhiteSearchInput';
 export { useKeyboardNavigation } from './SelectionPopup/helpers';

package/esm/components/index.js

@@ -90,7 +90,8 @@ export { default as ReactSortableTree } from './ReactSortableTree';
 export { default as ReactSortableTreeHandlers } from './ReactSortableTree/utils/default-handlers';
 export { default as ReactSortableTreeUtils } from './ReactSortableTree/utils/tree-data-utils';
 export { default as ReltioGridLayout } from './ReltioGridLayout/ReltioGridLayout';
-export { default as ResizablePanes } from './ResizablePanes/ResizablePanes';
+export { ResizablePanes } from './ResizablePanes/ResizablePanes';
+export { ProfileResizablePanes } from './ProfileResizablePanes/ProfileResizablePanes';
 export { default as SearchInput } from './SearchInput/SearchInput';
 export { default as WhiteSearchInput } from './SearchInput/WhiteSearchInput';
 export { useKeyboardNavigation } from './SelectionPopup/helpers';

package/esm/contexts/PerspectivesSettingsContext/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PerspectivesSettings, PerspectiveSettingItem } from '../../types';
+declare type PerspectivesSettingsProps = {
+    settings: PerspectivesSettings;
+    onChange: (perspectiveId: string, newSetting: Partial<PerspectiveSettingItem>) => void;
+};
+export declare const PerspectivesSettingsContext: React.Context<PerspectivesSettingsProps>;
+export declare const usePerspectivesSettings: (perspectiveId: string) => {
+    updatePerspectiveSettings: (newSetting: Partial<PerspectiveSettingItem>) => void;
+    perspectiveSettings: PerspectiveSettingItem;
+};
+export {};

package/esm/contexts/PerspectivesSettingsContext/index.js

@@ -0,0 +1,14 @@
+import React, { useCallback, useContext } from 'react';
+export var PerspectivesSettingsContext = React.createContext({
+    settings: {},
+    onChange: function () { }
+});
+PerspectivesSettingsContext.displayName = 'PerspectivesSettingsContext';
+export var usePerspectivesSettings = function (perspectiveId) {
+    var _a = useContext(PerspectivesSettingsContext) || {}, settings = _a.settings, onChange = _a.onChange;
+    var perspectiveSettings = settings === null || settings === void 0 ? void 0 : settings[perspectiveId];
+    var updatePerspectiveSettings = useCallback(function (newSetting) {
+        onChange(perspectiveId, newSetting);
+    }, [perspectiveId, onChange]);
+    return { updatePerspectiveSettings: updatePerspectiveSettings, perspectiveSettings: perspectiveSettings };
+};

package/esm/contexts/index.d.ts

@@ -6,6 +6,7 @@ export { BlockImageGalleryDialogContext } from './BlockImageGalleryDialogContext
 export { CollaborationContext, CollaborationContextProvider } from './CollaborationContext';
 export { UsersContext } from './UsersContext';
 export { PivotingAttributeContext } from './PivotingAttributeContext';
+export { PerspectivesSettingsContext, usePerspectivesSettings } from './PerspectivesSettingsContext';
 export { ProfilePerspectiveViewContext } from './ProfilePerspectiveViewContext';
 export { IdContext } from './IdContext';
 export { EntitiesMapContext } from './EntitiesMapContext';

package/esm/contexts/index.js

@@ -6,6 +6,7 @@ export { BlockImageGalleryDialogContext } from './BlockImageGalleryDialogContext
 export { CollaborationContext, CollaborationContextProvider } from './CollaborationContext';
 export { UsersContext } from './UsersContext';
 export { PivotingAttributeContext } from './PivotingAttributeContext';
+export { PerspectivesSettingsContext, usePerspectivesSettings } from './PerspectivesSettingsContext';
 export { ProfilePerspectiveViewContext } from './ProfilePerspectiveViewContext';
 export { IdContext } from './IdContext';
 export { EntitiesMapContext } from './EntitiesMapContext';

package/esm/types/index.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { AttributeType, SearchFilter } from '@reltio/mdm-sdk';
 export declare type ReactGridLayoutItem = {
     i: string;
@@ -104,3 +105,26 @@ export declare type DropDownMenuItem = {
     selectable?: boolean;
     selected?: boolean;
 };
+export declare type PerspectivesSettings = Record<string, PerspectiveSettingItem>;
+export declare type PerspectiveSettingItem = {
+    active?: number;
+    width?: number;
+};
+export declare type RightPanelTab = {
+    content?: React.ReactElement;
+    title?: React.ReactElement;
+    buttonProps?: {
+        id: number;
+        icon: React.FC;
+        tooltipTitle: string;
+        showForDisabled?: boolean;
+    };
+    headerProps?: {
+        content: React.ReactElement;
+    } | {
+        mainTitle: string;
+        secondTitle?: string;
+        rightContent?: React.ReactElement;
+    };
+    hidden?: boolean;
+};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1522",
+  "version": "1.4.1524",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1522",
-    "@reltio/mdm-sdk": "^1.4.1522",
+    "@reltio/mdm-module": "^1.4.1524",
+    "@reltio/mdm-sdk": "^1.4.1524",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",