@reltio/components 1.4.1819 → 1.4.1821

package/cjs/ReactSelectLoadMoreButton/ReactSelectLoadMoreButton.test.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+var ReactSelectLoadMoreButton_1 = require("./ReactSelectLoadMoreButton");
+describe('ReactSelectLoadMoreButton tests', function () {
+    var onClick = jest.fn();
+    it('should render default as well', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReactSelectLoadMoreButton_1.ReactSelectLoadMoreButton, { loading: false, onClick: onClick }));
+        expect(component.find(Button_1.default).prop('color')).toEqual('primary');
+        expect(component.find(Button_1.default).text()).toEqual('Load more');
+        var event = {};
+        component.find(Button_1.default).prop('onClick')(event);
+        expect(onClick).toBeCalled();
+    });
+    it('should render loading state', function () {
+        var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReactSelectLoadMoreButton_1.ReactSelectLoadMoreButton, { loading: true, onClick: onClick }));
+        expect(component.find(CircularProgress_1.default).exists()).toBeTruthy();
+    });
+});

package/cjs/ReactSelectLoadMoreButton/index.d.ts

@@ -0,0 +1 @@
+export { ReactSelectLoadMoreButton } from './ReactSelectLoadMoreButton';

package/cjs/ReactSelectLoadMoreButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactSelectLoadMoreButton = void 0;
+var ReactSelectLoadMoreButton_1 = require("./ReactSelectLoadMoreButton");
+Object.defineProperty(exports, "ReactSelectLoadMoreButton", { enumerable: true, get: function () { return ReactSelectLoadMoreButton_1.ReactSelectLoadMoreButton; } });

package/cjs/ReactSelectLoadMoreButton/styles.d.ts

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

package/cjs/ReactSelectMenuList/ReactSelectMenuList.d.ts

@@ -0,0 +1 @@
+export declare const ReactSelectMenuList: (props: any) => JSX.Element;

package/cjs/ReactSelectMenuList/ReactSelectMenuList.js

@@ -0,0 +1,26 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactSelectMenuList = void 0;
+var react_1 = __importDefault(require("react"));
+var react_select_1 = require("react-select");
+var ReactSelectMenuList = function (props) {
+    var menuListFooter = props.selectProps.menuListFooter, children = props.children;
+    return (react_1.default.createElement(react_select_1.components.MenuList, __assign({}, props),
+        children,
+        menuListFooter));
+};
+exports.ReactSelectMenuList = ReactSelectMenuList;

package/cjs/ReactSelectMenuList/index.d.ts

@@ -0,0 +1 @@
+export { ReactSelectMenuList } from './ReactSelectMenuList';

package/cjs/ReactSelectMenuList/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactSelectMenuList = void 0;
+var ReactSelectMenuList_1 = require("./ReactSelectMenuList");
+Object.defineProperty(exports, "ReactSelectMenuList", { enumerable: true, get: function () { return ReactSelectMenuList_1.ReactSelectMenuList; } });

package/cjs/ReactSelectMenuWithPopper/ReactSelectMenuWithPopper.d.ts

@@ -0,0 +1,14 @@
+export function ReactSelectMenuWithPopper(props: any): JSX.Element;
+export namespace ReactSelectMenuWithPopper {
+    namespace propTypes {
+        let children: PropTypes.Validator<NonNullable<NonNullable<any[] | PropTypes.ReactElementLike>>>;
+        let selectProps: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            inputRef: PropTypes.Validator<object>;
+            menuIsOpen: PropTypes.Validator<boolean>;
+            inputValue: PropTypes.Requireable<string>;
+        }>>>;
+        let innerRef: PropTypes.Validator<any>;
+        let innerProps: PropTypes.Validator<object>;
+    }
+}
+import PropTypes from 'prop-types';

package/cjs/ReactSelectMenuWithPopper/ReactSelectMenuWithPopper.js

@@ -0,0 +1,94 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactSelectMenuWithPopper = void 0;
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var ramda_1 = require("ramda");
+var nanoid_1 = require("nanoid");
+var Paper_1 = __importDefault(require("@mui/material/Paper"));
+var PopupBoundariesContext_1 = require("../contexts/PopupBoundariesContext");
+var Popper_1 = __importDefault(require("../components/Popper/Popper"));
+var styles_1 = require("./styles");
+var DEFAULT_MAX_WIDTH = 521;
+var ReactSelectMenuWithPopper = function (props) {
+    var _a = props.selectProps, inputRef = _a.inputRef, menuIsOpen = _a.menuIsOpen, inputValue = _a.inputValue, innerRef = props.innerRef, children = props.children, innerProps = props.innerProps;
+    var _b = (0, react_1.useState)('id'), key = _b[0], setKey = _b[1];
+    (0, react_1.useEffect)(function () {
+        setKey((0, nanoid_1.nanoid)());
+    }, [inputValue]);
+    var styles = (0, styles_1.useStyles)();
+    var popupBoundariesContext = (0, react_1.useContext)(PopupBoundariesContext_1.PopupBoundariesContext);
+    var hasBoundariesElement = Boolean(popupBoundariesContext === null || popupBoundariesContext === void 0 ? void 0 : popupBoundariesContext.element);
+    var boundariesWidth = hasBoundariesElement ? popupBoundariesContext.element.clientWidth : window.innerWidth;
+    return (react_1.default.createElement(Popper_1.default, { anchorEl: inputRef.current, open: menuIsOpen, className: styles.popper, key: key, modifiers: [
+            {
+                name: 'preventOverflow',
+                enabled: true,
+                options: {
+                    altAxis: true,
+                    altBoundary: true,
+                    tether: false,
+                    boundary: hasBoundariesElement ? popupBoundariesContext.element : document.body,
+                    padding: 5
+                }
+            }
+        ], placement: "bottom-start" },
+        react_1.default.createElement(Paper_1.default, __assign({ ref: innerRef, style: {
+                minWidth: Math.min((0, ramda_1.prop)('clientWidth', inputRef.current), boundariesWidth),
+                maxWidth: Math.min(DEFAULT_MAX_WIDTH, boundariesWidth)
+            } }, innerProps), children)));
+};
+exports.ReactSelectMenuWithPopper = ReactSelectMenuWithPopper;
+exports.ReactSelectMenuWithPopper.propTypes = {
+    children: prop_types_1.default.oneOfType([prop_types_1.default.element, prop_types_1.default.array]).isRequired,
+    selectProps: prop_types_1.default.shape({
+        inputRef: prop_types_1.default.object.isRequired,
+        menuIsOpen: prop_types_1.default.bool.isRequired,
+        inputValue: prop_types_1.default.string
+    }).isRequired,
+    innerRef: prop_types_1.default.oneOfType([
+        prop_types_1.default.oneOf([null]),
+        prop_types_1.default.func,
+        prop_types_1.default.shape({
+            current: prop_types_1.default.any.isRequired
+        })
+    ]).isRequired,
+    innerProps: prop_types_1.default.object.isRequired
+};

package/cjs/ReactSelectMenuWithPopper/ReactSelectMenuWithPopper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/ReactSelectMenuWithPopper/ReactSelectMenuWithPopper.test.js

@@ -0,0 +1,128 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var enzyme_1 = require("enzyme");
+var Popper_1 = __importDefault(require("@mui/material/Popper"));
+var Paper_1 = __importDefault(require("@mui/material/Paper"));
+var PopupBoundariesContext_1 = require("../contexts/PopupBoundariesContext");
+var ReactSelectMenuWithPopper_1 = require("./ReactSelectMenuWithPopper");
+describe('ReactSelectMenuWithPopper tests', function () {
+    var getPopper = function (component) { return component.find(Popper_1.default); };
+    it('should provide preventOverflow modifier for Popper only when PopupBoundariesContext is defined', function () {
+        var testInputRef = { current: {} };
+        var testInnerRef = { current: {} };
+        var component = (0, enzyme_1.mount)(react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, { selectProps: {
+                inputRef: testInputRef,
+                inputValue: '',
+                menuIsOpen: true
+            }, innerRef: testInnerRef, innerProps: {} },
+            react_1.default.createElement("div", null)));
+        expect(getPopper(component).prop('modifiers')).toEqual([
+            {
+                enabled: true,
+                name: 'preventOverflow',
+                options: {
+                    altAxis: true,
+                    altBoundary: true,
+                    tether: false,
+                    boundary: document.body,
+                    padding: 5
+                }
+            }
+        ]);
+        var textContext = { element: react_1.default.createElement("div", null), priority: ['top'] };
+        var componentWithContext = (0, enzyme_1.mount)(react_1.default.createElement(PopupBoundariesContext_1.PopupBoundariesContext.Provider, { value: textContext },
+            react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, { selectProps: {
+                    inputRef: testInputRef,
+                    inputValue: '',
+                    menuIsOpen: true
+                }, innerRef: testInnerRef, innerProps: {} },
+                react_1.default.createElement("div", null))));
+        expect(getPopper(componentWithContext).prop('modifiers')).toEqual([
+            {
+                enabled: true,
+                name: 'preventOverflow',
+                options: {
+                    altAxis: true,
+                    altBoundary: true,
+                    tether: false,
+                    boundary: textContext.element,
+                    padding: 5
+                }
+            }
+        ]);
+    });
+    describe('minWidth/maxWidth behavior', function () {
+        var originalWindowInnerWidth;
+        beforeAll(function () {
+            originalWindowInnerWidth = window.innerWidth;
+        });
+        afterEach(function () {
+            window.innerWidth = originalWindowInnerWidth;
+        });
+        it('should set Paper props style.minWidth as input width and style.maxWidth as boundaries element width', function () {
+            var inputWidth = 200;
+            var boundariesElementWidth = 400;
+            var windowInnerWidth = 500;
+            window.innerWidth = windowInnerWidth;
+            var testInputRef = { current: { clientWidth: inputWidth } };
+            var boundariesElement = {
+                clientWidth: boundariesElementWidth
+            };
+            var component = (0, enzyme_1.mount)(react_1.default.createElement(PopupBoundariesContext_1.PopupBoundariesContext.Provider, { value: { element: boundariesElement } },
+                react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, { selectProps: {
+                        inputRef: testInputRef,
+                        inputValue: '',
+                        menuIsOpen: true
+                    }, innerRef: { current: {} }, innerProps: {} },
+                    react_1.default.createElement("div", null))));
+            var paper = getPopper(component).find(Paper_1.default);
+            expect(paper.prop('style')).toEqual({
+                minWidth: inputWidth,
+                maxWidth: boundariesElementWidth
+            });
+        });
+        it('should set Paper props style.maxWidth as window.innerWidth if there is no boundaries element', function () {
+            var inputWidth = 200;
+            var windowInnerWidth = 500;
+            window.innerWidth = windowInnerWidth;
+            var testInputRef = { current: { clientWidth: inputWidth } };
+            var component = (0, enzyme_1.mount)(react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, { selectProps: {
+                    inputRef: testInputRef,
+                    inputValue: '',
+                    menuIsOpen: true
+                }, innerRef: { current: {} }, innerProps: {} },
+                react_1.default.createElement("div", null)));
+            var paper = getPopper(component).find(Paper_1.default);
+            expect(paper.prop('style')).toEqual({
+                minWidth: inputWidth,
+                maxWidth: windowInnerWidth
+            });
+        });
+        it('should set Paper props style.minWidth as boundaries element width if it is smaller than input width', function () {
+            var inputWidth = 450;
+            var boundariesElementWidth = 400;
+            var windowInnerWidth = 500;
+            window.innerWidth = windowInnerWidth;
+            var testInputRef = { current: { clientWidth: inputWidth } };
+            var boundariesElement = {
+                clientWidth: boundariesElementWidth
+            };
+            var component = (0, enzyme_1.mount)(react_1.default.createElement(PopupBoundariesContext_1.PopupBoundariesContext.Provider, { value: { element: boundariesElement } },
+                react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, { selectProps: {
+                        inputRef: testInputRef,
+                        inputValue: '',
+                        menuIsOpen: true
+                    }, innerRef: { current: {} }, innerProps: {} },
+                    react_1.default.createElement("div", null))));
+            var paper = getPopper(component).find(Paper_1.default);
+            expect(paper.prop('style')).toEqual({
+                minWidth: boundariesElementWidth,
+                maxWidth: boundariesElementWidth
+            });
+        });
+    });
+});

package/cjs/ReactSelectMenuWithPopper/index.d.ts

@@ -0,0 +1 @@
+export { ReactSelectMenuWithPopper } from './ReactSelectMenuWithPopper';

package/cjs/ReactSelectMenuWithPopper/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactSelectMenuWithPopper = void 0;
+var ReactSelectMenuWithPopper_1 = require("./ReactSelectMenuWithPopper");
+Object.defineProperty(exports, "ReactSelectMenuWithPopper", { enumerable: true, get: function () { return ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper; } });

package/cjs/ReactSelectMenuWithPopper/styles.d.ts

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

package/cjs/ReactSelectMenuWithPopper/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)({
+    popper: {
+        borderRadius: '4px',
+        boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
+        backgroundColor: '#FFFFFF',
+        margin: 0,
+        zIndex: 10000
+    }
+});

package/cjs/ReactSelectOptionWithCheckIcon/ReactSelectOptionWithCheckIcon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+    isSelected: boolean;
+};
+export declare const ReactSelectOptionWithCheckIcon: {
+    (props: Props): JSX.Element;
+    displayName: string;
+};
+export {};

package/cjs/ReactSelectOptionWithCheckIcon/ReactSelectOptionWithCheckIcon.js

@@ -0,0 +1,31 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactSelectOptionWithCheckIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var Check_1 = __importDefault(require("@mui/icons-material/Check"));
+var Option_1 = __importDefault(require("../components/ReactSelect/commonComponents/Option"));
+var styles_1 = require("./styles");
+// NEED TO MIGRATE
+var ReactSelectOptionWithCheckIcon = function (props) {
+    var styles = (0, styles_1.useStyles)();
+    var isSelected = props.isSelected, children = props.children;
+    return (react_1.default.createElement(Option_1.default, __assign({}, props),
+        isSelected && react_1.default.createElement(Check_1.default, { className: styles.checkIcon }),
+        react_1.default.createElement(react_1.default.Fragment, null, children)));
+};
+exports.ReactSelectOptionWithCheckIcon = ReactSelectOptionWithCheckIcon;
+exports.ReactSelectOptionWithCheckIcon.displayName = 'ReactSelectOptionWithCheckIcon';

package/cjs/ReactSelectOptionWithCheckIcon/index.d.ts

@@ -0,0 +1 @@
+export { ReactSelectOptionWithCheckIcon } from './ReactSelectOptionWithCheckIcon';

package/cjs/ReactSelectOptionWithCheckIcon/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactSelectOptionWithCheckIcon = void 0;
+var ReactSelectOptionWithCheckIcon_1 = require("./ReactSelectOptionWithCheckIcon");
+Object.defineProperty(exports, "ReactSelectOptionWithCheckIcon", { enumerable: true, get: function () { return ReactSelectOptionWithCheckIcon_1.ReactSelectOptionWithCheckIcon; } });

package/cjs/ReadOnlyAttributesPager/components/OneLineRenderer/OneLineRenderer.js

@@ -8,7 +8,7 @@ var react_1 = __importDefault(require("react"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var classnames_1 = __importDefault(require("classnames"));
 var constants_1 = require("../../../constants");
-var CommentsContainer_1 = __importDefault(require("../../../components/CommentsContainer/CommentsContainer"));
+var CommentsContainer_1 = require("../../../CommentsContainer");
 var Title_1 = __importDefault(require("../../../components/Title/Title"));
 var OvIcon_1 = require("../../../OvIcon");
 var DescriptionIcon_1 = require("../../../DescriptionIcon");
@@ -27,7 +27,7 @@ var OneLineRenderer = function (_a) {
             react_1.default.createElement(DescriptionIcon_1.DescriptionIcon, { description: description, className: styles.descriptionIcon }),
             react_1.default.createElement(OvIcon_1.OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
             react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, { className: (0, classnames_1.default)(styles.attribute, contentClassName), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, inlined: true })),
-        react_1.default.createElement(CommentsContainer_1.default, { uri: value.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
+        react_1.default.createElement(CommentsContainer_1.CommentsContainer, { uri: value.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
                 uri: value.uri
             }), objectType: objectType })));
 };

package/cjs/ReadOnlyAttributesPager/components/OneLineRenderer/OneLineRenderer.test.js

@@ -22,7 +22,7 @@ var ReadOnlyAttributesFactory_1 = require("../../../ReadOnlyAttributesFactory");
 var Title_1 = __importDefault(require("../../../components/Title/Title"));
 var OvIcon_1 = require("../../../OvIcon");
 var DescriptionIcon_1 = require("../../../DescriptionIcon");
-var CommentsContainer_1 = __importDefault(require("../../../components/CommentsContainer/CommentsContainer"));
+var CommentsContainer_1 = require("../../../CommentsContainer");
 var classnames_1 = require("../../../constants/classnames");
 describe('OneLineRenderer tests', function () {
     var attributeType = {
@@ -59,7 +59,7 @@ describe('OneLineRenderer tests', function () {
         expect(ovIcon.prop('attributeType')).toBe(props.attributeType);
         expect(ovIcon.prop('nonOvTotal')).toBe(props.totalNonVisibleValues);
         expect(component.find(ReadOnlyAttributesFactory_1.ReadOnlyAttribute).length).toBe(1);
-        expect(component.find(CommentsContainer_1.default).length).toBe(1);
+        expect(component.find(CommentsContainer_1.CommentsContainer).length).toBe(1);
     });
     it('should set correct props for ReadOnlyAttribute component', function () {
         var props = __assign({}, defaultProps);
@@ -73,7 +73,7 @@ describe('OneLineRenderer tests', function () {
     it('should render CommentsContainer inside COMMENTS_CONTAINER_VISIBILITY_AREA with correct props', function () {
         var props = __assign({}, defaultProps);
         var component = (0, enzyme_1.shallow)(react_1.default.createElement(OneLineRenderer_1.OneLineRenderer, __assign({}, props)));
-        var commentsContainer = component.find(".".concat(classnames_1.COMMENTS_CONTAINER_VISIBILITY_AREA)).find(CommentsContainer_1.default);
+        var commentsContainer = component.find(".".concat(classnames_1.COMMENTS_CONTAINER_VISIBILITY_AREA)).find(CommentsContainer_1.CommentsContainer);
         expect(commentsContainer.length).toBe(1);
         expect(commentsContainer.prop('uri')).toBe('entities/sIeHttl/attributes/Simple/u123');
         expect(commentsContainer.prop('relatedObjectUris')).toEqual(['entities/sIeHttl']);
@@ -99,13 +99,13 @@ describe('OneLineRenderer tests', function () {
             totalNonVisibleValues: 0
         };
         var component = (0, enzyme_1.shallow)(react_1.default.createElement(OneLineRenderer_1.OneLineRenderer, __assign({}, props)));
-        var commentsContainer = component.find(CommentsContainer_1.default);
+        var commentsContainer = component.find(CommentsContainer_1.CommentsContainer);
         expect(commentsContainer.prop('relatedObjectUris')).toEqual(['relations/12rMNliU']);
         expect(commentsContainer.prop('objectType')).toBe(mdm_sdk_1.CollaborationObjectTypes.RELATION_ATTRIBUTE);
         component.setProps({
             value: __assign(__assign({}, value), { uri: 'entities/sIeHttl/attributes/Reference/r123/Simple/u123' })
         });
-        commentsContainer = component.find(CommentsContainer_1.default);
+        commentsContainer = component.find(CommentsContainer_1.CommentsContainer);
         expect(commentsContainer.prop('relatedObjectUris')).toEqual(['entities/sIeHttl']);
         expect(commentsContainer.prop('objectType')).toBe(mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE);
     });

package/cjs/ReadOnlyAttributesPager/styles.d.ts

@@ -1,3 +1,3 @@
 export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"paddingWrapper" | "paddingWrapperWithLines">;
-export declare const useOneLineStyles: (props?: any) => import("@mui/styles").ClassNameMap<"wrapper" | "title" | "attribute" | "collaborationWrapper" | "titleIcon" | "titleRow" | "ovIcon" | "descriptionIcon">;
-export declare const useMultiLineStyles: (props?: any) => import("@mui/styles").ClassNameMap<"wrapper" | "title" | "attributes" | "attribute" | "titleRow" | "ovIcon" | "descriptionIcon">;
+export declare const useOneLineStyles: (props?: any) => import("@mui/styles").ClassNameMap<"wrapper" | "title" | "attribute" | "ovIcon" | "collaborationWrapper" | "titleIcon" | "titleRow" | "descriptionIcon">;
+export declare const useMultiLineStyles: (props?: any) => import("@mui/styles").ClassNameMap<"wrapper" | "title" | "attributes" | "attribute" | "ovIcon" | "titleRow" | "descriptionIcon">;

package/cjs/ReadOnlyAttributesView/styles.d.ts

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

package/cjs/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.js

@@ -45,7 +45,7 @@ var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
 var ReadOnlyAttributesList_1 = require("../ReadOnlyAttributesList");
 var ArrowExpandButton_1 = require("../ArrowExpandButton");
-var CommentsContainer_1 = __importDefault(require("../components/CommentsContainer/CommentsContainer"));
+var CommentsContainer_1 = require("../CommentsContainer");
 var HighlightedValuesContext_1 = require("../contexts/HighlightedValuesContext");
 var classnames_2 = require("../constants/classnames");
 var styles_1 = require("./styles");
@@ -74,7 +74,7 @@ var ReadOnlyComplexAttribute = function (_a) {
                         _b)), "data-reltio-id": "reltio-attribute-complex-label" }, label),
                 react_1.default.createElement("div", { className: styles.spacer }),
                 RightSlot && react_1.default.createElement(RightSlot, { attributeType: attributeType, attributeValue: attributeValue }),
-                react_1.default.createElement(CommentsContainer_1.default, { uri: attributeValue.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
+                react_1.default.createElement(CommentsContainer_1.CommentsContainer, { uri: attributeValue.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
                         uri: attributeValue.uri
                     }), objectType: objectType })))),
         expanded && (react_1.default.createElement(ReadOnlyAttributesList_1.ReadOnlyAttributesList, { attrTypes: attributeTypesList, entity: attributeListEntity, drawLines: true, parentUri: uri, showNonOv: showNonOv }, children))));

package/cjs/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.test.js

@@ -25,7 +25,7 @@ var ArrowExpandButton_1 = require("../ArrowExpandButton");
 var nestedAttrType_test_data_1 = require("./nestedAttrType.test-data");
 var nestedAttrValue_test_data_1 = require("./nestedAttrValue.test-data");
 var classnames_1 = require("../constants/classnames");
-var CommentsContainer_1 = __importDefault(require("../components/CommentsContainer/CommentsContainer"));
+var CommentsContainer_1 = require("../CommentsContainer");
 var HighlightedValuesContext_1 = require("../contexts/HighlightedValuesContext");
 describe('ReadOnlyComplexAttribute', function () {
     var findExpandButton = function (component) { return component.find(ArrowExpandButton_1.ArrowExpandButton); };
@@ -209,7 +209,7 @@ describe('ReadOnlyComplexAttribute', function () {
         var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReadOnlyComplexAttribute_1.ReadOnlyComplexAttribute, __assign({}, defaultProps)));
         var commentsContainer = component
             .find(".labelContainer.".concat(classnames_1.COMMENTS_CONTAINER_VISIBILITY_AREA))
-            .find(CommentsContainer_1.default);
+            .find(CommentsContainer_1.CommentsContainer);
         expect(commentsContainer.length).toBe(1);
         expect(commentsContainer.prop('uri')).toBe(nestedAttrValue_test_data_1.nestedAttributeValue.uri);
         expect(commentsContainer.prop('relatedObjectUris')).toEqual(['relations/sIeHttl']);
@@ -217,7 +217,7 @@ describe('ReadOnlyComplexAttribute', function () {
         component.setProps({
             attributeValue: __assign(__assign({}, nestedAttrValue_test_data_1.nestedAttributeValue), { uri: 'entities/123/attributes/Reference/r123/AdditionalAttributes/2zoXFFwDl' })
         });
-        commentsContainer = component.find(CommentsContainer_1.default);
+        commentsContainer = component.find(CommentsContainer_1.CommentsContainer);
         expect(commentsContainer.prop('relatedObjectUris')).toEqual(['entities/123']);
         expect(commentsContainer.prop('objectType')).toBe(mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE);
     });
@@ -226,7 +226,7 @@ describe('ReadOnlyComplexAttribute', function () {
         var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReadOnlyComplexAttribute_1.ReadOnlyComplexAttribute, __assign({}, defaultProps, { LabelRenderer: LabelRenderer })));
         expect(findExpandButton(component).length).toBe(1);
         expect(findLabel(component).length).toBe(0);
-        expect(component.find(CommentsContainer_1.default).length).toBe(0);
+        expect(component.find(CommentsContainer_1.CommentsContainer).length).toBe(0);
         var labelRenderer = component.find(LabelRenderer);
         expect(labelRenderer.length).toBe(1);
         expect(labelRenderer.prop('attributeType')).toBe(defaultProps.attributeType);
@@ -237,7 +237,7 @@ describe('ReadOnlyComplexAttribute', function () {
         var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReadOnlyComplexAttribute_1.ReadOnlyComplexAttribute, __assign({}, defaultProps, { RightSlot: RightSlot })));
         expect(findExpandButton(component).length).toBe(1);
         expect(findLabel(component).length).toBe(1);
-        expect(component.find(CommentsContainer_1.default).length).toBe(1);
+        expect(component.find(CommentsContainer_1.CommentsContainer).length).toBe(1);
         var rightSlot = component.find(RightSlot);
         expect(rightSlot.length).toBe(1);
         expect(rightSlot.prop('attributeType')).toBe(defaultProps.attributeType);
@@ -257,7 +257,7 @@ describe('ReadOnlyComplexAttribute', function () {
         };
         var props = __assign(__assign({}, defaultProps), { attributeType: attributeType, attributeValue: attributeValue });
         var component = (0, enzyme_1.shallow)(react_1.default.createElement(ReadOnlyComplexAttribute_1.ReadOnlyComplexAttribute, __assign({}, props)));
-        var commentsContainer = component.find(CommentsContainer_1.default);
+        var commentsContainer = component.find(CommentsContainer_1.CommentsContainer);
         expect(commentsContainer.prop('relatedObjectUris')).toEqual(['entities/1Gw3QsjR']);
         expect(commentsContainer.prop('objectType')).toBe(mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE);
     });

package/cjs/ReferenceAttributeEditor/ReferenceAttributeEditor.js

@@ -55,7 +55,7 @@ var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var EditModeComplexAttribute_1 = require("../EditModeComplexAttribute");
 var EntitySelector_1 = require("../EntitySelector");
-var ErrorWrapper_1 = __importDefault(require("../components/ErrorWrapper/ErrorWrapper"));
+var ErrorWrapper_1 = require("../ErrorWrapper");
 var withContext_1 = require("../HOCs/withContext");
 var ConfigPermissionsContext_1 = require("../contexts/ConfigPermissionsContext");
 var ScrollToElementContext_1 = require("../contexts/ScrollToElementContext");
@@ -148,7 +148,7 @@ var ReferenceAttributeEditor = function (props) {
     var errorMessage = (0, mdm_sdk_1.getErrorMessage)(referencedEntityMissedError);
     return (react_1.default.createElement(EditModeComplexAttribute_1.EditModeComplexAttribute, __assign({}, ownProps, { label: (0, mdm_sdk_1.getLabel)(label), attributeTypesList: editableAttrTypes, crosswalks: allCrosswalks, metadata: metadata }),
         react_1.default.createElement("div", { ref: ref, className: errorClassName },
-            react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage },
+            react_1.default.createElement(ErrorWrapper_1.ErrorWrapper, { errorMessage: errorMessage },
                 react_1.default.createElement(EntitySelector_1.EntitySelector, { className: (0, classnames_1.default)(styles.item, (_a = {},
                         _a[styles.dense] = errorMessage || (selectedEntity && (0, mdm_sdk_1.isTempUri)(selectedEntity.entityUri)),
                         _a)), entity: selectedEntity || {}, entityTypesUris: entityTypesUris, max: 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, isDisabled: !canChangeReferencedEntity, onChange: onChangeEntity, onCreate: canCreateReferencedEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: newEntityAttrTypesSelectionStrategy })))));

package/cjs/ReferenceAttributeEditor/ReferenceAttributeEditor.test.js

@@ -45,7 +45,7 @@ var ReferenceAttributeEditor_1 = __importDefault(require("./ReferenceAttributeEd
 var EditModeComplexAttribute_1 = require("../EditModeComplexAttribute");
 var EntitySelector_1 = require("../EntitySelector");
 var mdmSdk = __importStar(require("@reltio/mdm-sdk"));
-var ErrorWrapper_1 = __importDefault(require("../components/ErrorWrapper/ErrorWrapper"));
+var ErrorWrapper_1 = require("../ErrorWrapper");
 var useScrollToAttributeErrorImport = __importStar(require("../hooks/useScrollToAttributeError/useScrollToAttributeError"));
 var ScrollToElementContext_1 = require("../contexts/ScrollToElementContext");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
@@ -117,7 +117,7 @@ describe('ReferenceAttributeEditor', function () {
             var component = setUp();
             var complex = component.find(EditModeComplexAttribute_1.EditModeComplexAttribute);
             expect(complex.length).toBe(1);
-            var errorWrapper = complex.find(ErrorWrapper_1.default);
+            var errorWrapper = complex.find(ErrorWrapper_1.ErrorWrapper);
             expect(errorWrapper.find(EntitySelector_1.EntitySelector).length).toBe(1);
             expect(errorWrapper.prop('errorMessage')).toBeFalsy();
         });
@@ -149,7 +149,7 @@ describe('ReferenceAttributeEditor', function () {
             var component = setUp({ props: props });
             var complex = component.find(EditModeComplexAttribute_1.EditModeComplexAttribute);
             expect(complex.length).toBe(1);
-            var errorWrapper = complex.find(ErrorWrapper_1.default);
+            var errorWrapper = complex.find(ErrorWrapper_1.ErrorWrapper);
             expect(errorWrapper.find(EntitySelector_1.EntitySelector).length).toBe(1);
             expect(errorWrapper.prop('errorMessage')).toBe(props.errors[2].message);
         });

package/cjs/RelationTypeSelector/RelationTypeSelector.js

@@ -54,14 +54,14 @@ var prop_types_1 = __importDefault(require("prop-types"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var ramda_1 = require("ramda");
 var RelationOption_1 = require("./components/RelationOption");
-var DropDownSelector_1 = __importDefault(require("../components/DropDownSelector/DropDownSelector"));
+var DropDownSelector_1 = require("../DropDownSelector");
 var RelationTypeSelector = function (_a) {
     var _b = _a.value, value = _b === void 0 ? {} : _b, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.onChange, onChange = _d === void 0 ? ramda_1.identity : _d, TextFieldProps = _a.TextFieldProps, otherProps = __rest(_a, ["value", "options", "onChange", "TextFieldProps"]);
     var textFieldProps = (0, react_1.useMemo)(function () {
         var _a;
         return (__assign(__assign({}, (0, ramda_1.defaultTo)({}, TextFieldProps)), (_a = {}, _a['data-reltio-id'] = 'relation-type-selector', _a)));
     }, [TextFieldProps]);
-    return (react_1.default.createElement(DropDownSelector_1.default, __assign({ value: value, options: options, onChange: onChange, label: ui_i18n_1.default.text('Select relationship type '), components: { Option: RelationOption_1.RelationOption }, TextFieldProps: textFieldProps }, otherProps)));
+    return (react_1.default.createElement(DropDownSelector_1.DropDownSelector, __assign({ value: value, options: options, onChange: onChange, label: ui_i18n_1.default.text('Select relationship type '), components: { Option: RelationOption_1.RelationOption }, TextFieldProps: textFieldProps }, otherProps)));
 };
 exports.RelationTypeSelector = RelationTypeSelector;
 var ValueType = prop_types_1.default.shape({