@reltio/components 1.4.2233 → 1.4.2235

package/EntitySelector/EntitySelector.js

@@ -94,7 +94,7 @@ export var EntitySelector = function (_a) {
         return (__assign(__assign({}, (TextFieldProps || {})), (_a = {}, _a['data-reltio-id'] = 'reltio-entity-selector', _a)));
     }, [TextFieldProps]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(DropDownSelector, __assign({ value: !isEmpty(entity) ? entity : undefined, inputValue: inputValue, onInputChange: handleInputChange, getOptions: getOptions, getOptionLabel: prop('entityLabel'), onChange: handleChange, onCreate: handleCreate, onClear: handleClear, label: label, createLabel: createLabel, canCreateOption: canCreateEntity, components: __assign(__assign({ Option: EntityOption, SingleValue: SingleValue }, groupComponent), clearComponent), currentEntityType: currentEntityType, isClearable: true, disableLinkClick: disableLinkClick, TextFieldProps: textFieldProps }, dropDownSelectorProps)),
+        React.createElement(DropDownSelector, __assign({ key: entityTypesUris.join(','), value: !isEmpty(entity) ? entity : undefined, inputValue: inputValue, onInputChange: handleInputChange, getOptions: getOptions, getOptionLabel: prop('entityLabel'), onChange: handleChange, onCreate: handleCreate, onClear: handleClear, label: label, createLabel: createLabel, canCreateOption: canCreateEntity, components: __assign(__assign({ Option: EntityOption, SingleValue: SingleValue }, groupComponent), clearComponent), currentEntityType: currentEntityType, isClearable: true, disableLinkClick: disableLinkClick, TextFieldProps: textFieldProps }, dropDownSelectorProps)),
         isTempEntity && (React.createElement("div", { "data-reltio-id": "entity-creator", className: styles.creatorWrapper },
             React.createElement(EntityCreator, { mode: mode, attributeTypesSelectionStrategy: attributeTypesSelectionStrategy, entityType: currentEntityType, entityUri: entity.entityUri })))));
 };

package/EntitySelector/EntitySelector.test.js

@@ -385,6 +385,29 @@ describe('Entity selector tests', function () {
             }
         });
     }); });
+    it('should call typeAheadSearch with new entity types when entityTypesUris prop changes after rerender', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var initialProps, _a, user, rerender, updatedProps;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    initialProps = __assign(__assign({}, defaultProps), { entityTypesUris: ['configuration/entityTypes/HCP'] });
+                    _a = setUp({ props: initialProps }), user = _a.user, rerender = _a.rerender;
+                    return [4 /*yield*/, user.click(screen.getByTestId('select-dropdown-indicator'))];
+                case 1:
+                    _b.sent();
+                    expect(typeAheadSearch).toHaveBeenCalledWith([defaultMetadata.entityTypes[0]], '', expect.any(Object));
+                    typeAheadSearch.mockClear();
+                    updatedProps = __assign(__assign({}, defaultProps), { entityTypesUris: ['configuration/entityTypes/HCP', 'configuration/entityTypes/Company'] });
+                    rerender(React.createElement(MdmModuleProvider, { values: defaultMdmValues, actions: defaultMdmActions },
+                        React.createElement(EntitySelector, __assign({}, updatedProps))));
+                    return [4 /*yield*/, user.click(screen.getByTestId('select-dropdown-indicator'))];
+                case 2:
+                    _b.sent();
+                    expect(typeAheadSearch).toHaveBeenCalledWith([defaultMetadata.entityTypes[0], defaultMetadata.entityTypes[1]], '', expect.any(Object));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should render create button and handle click correctly for single entity type in case of onCreate prop is passed and input is filled', function () { return __awaiter(void 0, void 0, void 0, function () {
         var props, user;
         return __generator(this, function (_a) {

package/FileDropZone/FileDropZone.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+    onFileDrop: (file: File) => void;
+    isAcceptableFile?: (file: File) => boolean;
+    className?: string;
+};
+export declare const FileDropZone: React.MemoExoticComponent<({ children, onFileDrop, isAcceptableFile, className }: Props) => React.JSX.Element>;
+export {};

package/FileDropZone/FileDropZone.js

@@ -0,0 +1,47 @@
+import React, { memo, useCallback, useState } from 'react';
+import classnames from 'classnames';
+import i18n from 'ui-i18n';
+import styles from './FileDropZone.module.css';
+var DEFAULT_ACCEPTABLE_DRAG_TYPE = 'Files';
+export var FileDropZone = memo(function (_a) {
+    var _b;
+    var children = _a.children, onFileDrop = _a.onFileDrop, isAcceptableFile = _a.isAcceptableFile, className = _a.className;
+    var _c = useState(false), isActive = _c[0], setIsActive = _c[1];
+    var isAcceptableDragType = useCallback(function (dragType) { return dragType === DEFAULT_ACCEPTABLE_DRAG_TYPE; }, []);
+    var handleDragOver = useCallback(function (e) {
+        e.preventDefault();
+        var dragType = e.dataTransfer.types[0];
+        var isValid = isAcceptableDragType(dragType);
+        e.dataTransfer.dropEffect = isValid ? 'copy' : 'none';
+        setIsActive(isValid);
+    }, [isAcceptableDragType]);
+    var handleDragEnter = useCallback(function (e) {
+        e.preventDefault();
+        var dragType = e.dataTransfer.types[0];
+        setIsActive(isAcceptableDragType(dragType));
+    }, [isAcceptableDragType]);
+    var handleDragLeave = useCallback(function (e) {
+        e.preventDefault();
+        var relatedTarget = e.relatedTarget;
+        var isLeave = relatedTarget && !e.currentTarget.contains(relatedTarget);
+        if (isLeave || !relatedTarget) {
+            setIsActive(false);
+        }
+    }, []);
+    var handleDrop = useCallback(function (e) {
+        var _a, _b;
+        e.preventDefault();
+        setIsActive(false);
+        var dragType = e.dataTransfer.types[0];
+        if (!isAcceptableDragType(dragType))
+            return;
+        var file = (_b = (_a = e.dataTransfer.files) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : null;
+        if (!file)
+            return;
+        if (isAcceptableFile && !isAcceptableFile(file))
+            return;
+        onFileDrop(file);
+    }, [isAcceptableDragType, isAcceptableFile, onFileDrop]);
+    return (React.createElement("div", { className: classnames(styles.root, className, (_b = {}, _b[styles.active] = isActive, _b)), role: "button", tabIndex: 0, "aria-label": i18n.text('Drop files here'), onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop }, children));
+});
+FileDropZone.displayName = 'FileDropZone';

package/FileDropZone/FileDropZone.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"FileDropZone-root--9QbaV","active":"FileDropZone-active--FUwfs"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.FileDropZone-root--9QbaV{cursor:pointer}.FileDropZone-active--FUwfs{background-color:rgba(0,114,206,.12)}`;
+    head.appendChild(style);
+}
+export default styles;

package/FileDropZone/FileDropZone.test.d.ts

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

package/FileDropZone/FileDropZone.test.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { FileDropZone } from './FileDropZone';
+var mockOnFileDrop = jest.fn();
+var setUp = function (_a) {
+    var _b = _a === void 0 ? {} : _a, isAcceptableFile = _b.isAcceptableFile;
+    return render(React.createElement(FileDropZone, { onFileDrop: mockOnFileDrop, isAcceptableFile: isAcceptableFile },
+        React.createElement("span", null, "Drop content here")));
+};
+describe('FileDropZone', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should render children', function () {
+        setUp();
+        expect(screen.getByText('Drop content here')).toBeInTheDocument();
+    });
+    it('should have correct accessibility attributes', function () {
+        setUp();
+        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
+        expect(dropZone).toBeInTheDocument();
+        expect(dropZone).toHaveAttribute('tabindex', '0');
+    });
+    it('should activate drag state on drag over with acceptable file type', function () {
+        setUp();
+        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
+        fireEvent.dragOver(dropZone, {
+            dataTransfer: { types: ['Files'], dropEffect: 'copy' }
+        });
+        expect(dropZone).toHaveClass('active');
+    });
+    it('should not activate drag state with unacceptable file type', function () {
+        setUp();
+        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
+        fireEvent.dragOver(dropZone, {
+            dataTransfer: { types: ['Text'], dropEffect: 'none' }
+        });
+        expect(dropZone).not.toHaveClass('active');
+    });
+    it('should activate drag state on drag enter with acceptable file type', function () {
+        setUp();
+        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
+        fireEvent.dragEnter(dropZone, {
+            dataTransfer: { types: ['Files'] }
+        });
+        expect(dropZone).toHaveClass('active');
+    });
+    it('should deactivate drag state on drag leave', function () {
+        setUp();
+        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
+        fireEvent.dragOver(dropZone, { dataTransfer: { types: ['Files'] } });
+        expect(dropZone).toHaveClass('active');
+        fireEvent.dragLeave(dropZone);
+        expect(dropZone).not.toHaveClass('active');
+    });
+    it('should call onFileDrop with the dropped file', function () {
+        var file = new File(['test content'], 'test.csv', { type: 'text/csv' });
+        setUp();
+        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
+        fireEvent.drop(dropZone, {
+            dataTransfer: {
+                files: [file],
+                types: ['Files']
+            }
+        });
+        expect(mockOnFileDrop).toHaveBeenCalledWith(file);
+    });
+    it('should not call onFileDrop if dropped item is not of file type', function () {
+        setUp();
+        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
+        fireEvent.drop(dropZone, {
+            dataTransfer: { types: ['Text'] }
+        });
+        expect(mockOnFileDrop).not.toHaveBeenCalled();
+    });
+    it('should not call onFileDrop if isAcceptableFile returns false', function () {
+        var file = new File(['test content'], 'test.exe', { type: 'application/octet-stream' });
+        setUp({ isAcceptableFile: function (f) { return f.name.endsWith('.csv'); } });
+        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
+        fireEvent.drop(dropZone, {
+            dataTransfer: {
+                files: [file],
+                types: ['Files']
+            }
+        });
+        expect(mockOnFileDrop).not.toHaveBeenCalled();
+    });
+    it('should call onFileDrop if isAcceptableFile returns true', function () {
+        var file = new File(['test content'], 'data.csv', { type: 'text/csv' });
+        setUp({ isAcceptableFile: function (f) { return f.name.endsWith('.csv'); } });
+        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
+        fireEvent.drop(dropZone, {
+            dataTransfer: {
+                files: [file],
+                types: ['Files']
+            }
+        });
+        expect(mockOnFileDrop).toHaveBeenCalledWith(file);
+    });
+    it('should deactivate drag state after drop', function () {
+        var file = new File(['test content'], 'test.csv', { type: 'text/csv' });
+        setUp();
+        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
+        fireEvent.dragOver(dropZone, { dataTransfer: { types: ['Files'] } });
+        expect(dropZone).toHaveClass('active');
+        fireEvent.drop(dropZone, {
+            dataTransfer: {
+                files: [file],
+                types: ['Files']
+            }
+        });
+        expect(dropZone).not.toHaveClass('active');
+    });
+});

package/FileDropZone/index.d.ts

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

package/FileDropZone/index.js

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

package/RelationEditor/RelationEditor.js

@@ -15,7 +15,7 @@ import classnames from 'classnames';
 import { always, assoc, concat, differenceWith, equals, forEach, map, path, pick, pipe, prop, propEq, when, uniq, curry, values, flatten, any } from 'ramda';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import { createTemporaryEntity, findRelatedTemporaryEntities, getActivenessAttributes, getCreatableAttributeTypes, getEntityType, getErrorMessage, getErrorId, omitMarks, relationEditorAttributeTypesSelectionStrategy, validateConnection, updateConnectionEntityLabel, isTempUri, isEmptyValue, getRelationAttributesList, getDefaultRelationTypeObject, getInOutRelations, isSuggestMode, isAttributeTypeError, getRelationUriFromConnection, getRelationEditorActiveError, getRelationAttributesFromConnection, getEntityUriFromConnection, evaluateErrorPath, AttributeValuePathItemType, getAllRelationEditorActiveErrors, isAttributeHasMaskedValue } from '@reltio/mdm-sdk';
+import { createTemporaryEntity, Directions, findRelatedTemporaryEntities, getActivenessAttributes, getCreatableAttributeTypes, getEntityType, getErrorMessage, getErrorId, getRelationType, getSuitableEntityTypeUrisForRelationTypes, isAvailableRelationBetweenEntities, omitMarks, relationEditorAttributeTypesSelectionStrategy, validateConnection, updateConnectionEntityLabel, isTempUri, isEmptyValue, getRelationAttributesList, getDefaultRelationTypeObject, getInOutRelations, isSuggestMode, isAttributeTypeError, getRelationUriFromConnection, getRelationEditorActiveError, getRelationAttributesFromConnection, getEntityUriFromConnection, evaluateErrorPath, AttributeValuePathItemType, getAllRelationEditorActiveErrors, isAttributeHasMaskedValue } from '@reltio/mdm-sdk';
 import { ConnectionRelationTypeSelector } from '../ConnectionRelationTypeSelector';
 import { ErrorWrapper } from '../ErrorWrapper';
 import { EntitySelector } from '../EntitySelector';
@@ -110,7 +110,6 @@ var RelationEditor = function (_a) {
             areRelatedEntitiesChanged(initialRelatedTempEntities.current, relatedTempEntities));
     var applyAction = useMemo(function () { return curry(isNew ? addRelation : editRelation); }, [isNew, addRelation, editRelation]);
     var canCreateNewEntity = !isSuggestMode(mode) || !isTempUri(mainEntity === null || mainEntity === void 0 ? void 0 : mainEntity.uri) || !isEmptyValue(authoringItems);
-    var onRelationTypeChange = useCallback(function (relationType) { return setRelationType(config.id, relationUri, relationType); }, [config, relationUri, setRelationType]);
     var handleClose = useCallback(function () { return closeRelationEditor(config.id, relationUri); }, [config, relationUri, closeRelationEditor]);
     var updateModifiedEntityLabel = useCallback(function (connection) {
         if (modifiedEntity) {
@@ -121,6 +120,31 @@ var RelationEditor = function (_a) {
     }, [modifiedEntity, metadata]);
     var setModifiedEntity = useCallback(function (entity) { return entityCreated(entity); }, [entityCreated]);
     var deleteModifiedEntity = useCallback(function (entityUri) { return entityDeleted(entityUri); }, [entityDeleted]);
+    var onRelationTypeChange = useCallback(function (newRelationType) {
+        var connectionEntity = connection.entity;
+        var hasConnectionEntity = connectionEntity && connectionEntity.entityUri;
+        var isEntitySuitableForNewRelationType = mainEntity &&
+            newRelationType &&
+            hasConnectionEntity &&
+            isAvailableRelationBetweenEntities(newRelationType.direction === Directions.OUT, __assign(__assign({}, connectionEntity), { type: connectionEntity.entityType }), mainEntity, metadata, newRelationType.type);
+        setRelationType(config.id, relationUri, newRelationType);
+        if (hasConnectionEntity && !isEntitySuitableForNewRelationType) {
+            if (modifiedEntity) {
+                deleteModifiedEntity(modifiedEntity.uri);
+            }
+            setRelationEntity(config.id, relationUri, {});
+        }
+    }, [
+        metadata,
+        connection.entity,
+        mainEntity,
+        setRelationType,
+        config.id,
+        relationUri,
+        modifiedEntity,
+        setRelationEntity,
+        deleteModifiedEntity
+    ]);
     var onChangeEntity = useCallback(function (entity) {
         if (modifiedEntity) {
             deleteModifiedEntity(modifiedEntity.uri);
@@ -190,8 +214,15 @@ var RelationEditor = function (_a) {
     var entityTypesUris = useMemo(function () {
         var _a;
         var _b = config, content = _b.content, contentSecondLevel = _b.contentSecondLevel;
-        return ((_a = (contentSecondLevel && connection.parentEntityUri ? contentSecondLevel.entityTypes : content.entityTypes)) !== null && _a !== void 0 ? _a : []);
-    }, [config, connection.parentEntityUri]);
+        var entityTypeUrisFromConfig = (_a = (contentSecondLevel && connection.parentEntityUri ? contentSecondLevel.entityTypes : content.entityTypes)) !== null && _a !== void 0 ? _a : [];
+        var relationTypeObj = relationType ? getRelationType(metadata, relationType) : null;
+        var suitableEntityTypeUrisForRelationType = relationTypeObj
+            ? getSuitableEntityTypeUrisForRelationTypes(direction === Directions.OUT, metadata, [relationTypeObj])
+            : [];
+        return entityTypeUrisFromConfig.length > 0
+            ? entityTypeUrisFromConfig.filter(function (uri) { return suitableEntityTypeUrisForRelationType.includes(uri); })
+            : suitableEntityTypeUrisForRelationType;
+    }, [config, connection.parentEntityUri, relationType, direction, metadata]);
     var isEntityHasMaskedAttrValue = pipe(values, flatten, any(isAttributeHasMaskedValue))(((_d = (_c = connection.entity) === null || _c === void 0 ? void 0 : _c.object) === null || _d === void 0 ? void 0 : _d.attributes) || {});
     var isMasked = showMasking && isEntityHasMaskedAttrValue;
     return (React.createElement(React.Fragment, null,

package/RelationEditor/RelationEditor.test.js

@@ -293,6 +293,51 @@ describe('relation editor behaviour', function () {
             }
         });
     }); });
+    it('should pass only entity types suitable for current relation type to EntitySelector', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var config, props, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    typeAheadSearch.mockResolvedValue([
+                        { type: 'configuration/entityTypes/Location', label: 'location entity 1', uri: 'entities/0C32GxR' }
+                    ]);
+                    config = __assign(__assign({}, defaultProps.config), { content: {
+                            entityTypes: ['configuration/entityTypes/Location', 'configuration/entityTypes/HCA'],
+                            outRelations: [{ uri: 'configuration/relationTypes/HasAddress', label: '{directionalLabel}' }]
+                        } });
+                    props = __assign(__assign({}, defaultProps), { config: config });
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.click(screen.getByTestId('select-dropdown-indicator'))];
+                case 1:
+                    _a.sent();
+                    expect(typeAheadSearch).toHaveBeenCalledWith([defaultProps.metadata.entityTypes[1]], '', expect.any(Object));
+                    expect(typeAheadSearch).not.toHaveBeenCalledWith(expect.arrayContaining([expect.objectContaining({ uri: 'configuration/entityTypes/HCA' })]), expect.any(String), expect.any(Object));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should pass all suitable entity types from metadata to EntitySelector when entityTypes from config is empty', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var config, props, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    typeAheadSearch.mockResolvedValue([
+                        { type: 'configuration/entityTypes/Location', label: 'location entity 1', uri: 'entities/0C32GxR' }
+                    ]);
+                    config = __assign(__assign({}, defaultProps.config), { content: {
+                            entityTypes: [],
+                            outRelations: [{ uri: 'configuration/relationTypes/HasAddress', label: '{directionalLabel}' }]
+                        } });
+                    props = __assign(__assign({}, defaultProps), { config: config });
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.click(screen.getByTestId('select-dropdown-indicator'))];
+                case 1:
+                    _a.sent();
+                    expect(typeAheadSearch).toHaveBeenCalledWith([defaultProps.metadata.entityTypes[1]], '', expect.any(Object));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should render attributes list correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
         var labels, values;
         return __generator(this, function (_a) {
@@ -351,7 +396,7 @@ describe('relation editor behaviour', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    connection = __assign(__assign({}, defaultProps.connection), { parentEntityUri: 'entities/HsPM72G' });
+                    connection = __assign(__assign({}, defaultProps.connection), { parentEntityUri: 'entities/HsPM72G', relation: __assign(__assign({}, defaultRelation), { relationType: 'configuration/relationTypes/InternalHCAtoHCA', direction: 'out' }) });
                     config = __assign(__assign({}, defaultProps.config), { contentSecondLevel: {
                             entityTypes: ['configuration/entityTypes/HCA'],
                             outRelations: [{ uri: 'configuration/relationTypes/InternalHCAtoHCA', label: '{directionalLabel}' }]
@@ -458,6 +503,43 @@ describe('relation editor behaviour', function () {
             }
         });
     }); });
+    it('should clear connection entity and delete modified entity when relation type changes to one unsuitable for current connection entity', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var entityUri, modifiedEntity, connection, config, mdmValues, props, user;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    entityUri = 'entities/uri$$tempLocation';
+                    modifiedEntity = {
+                        type: 'configuration/entityTypes/Location',
+                        uri: entityUri,
+                        attributes: {}
+                    };
+                    connection = __assign(__assign({}, defaultProps.connection), { entity: { entityUri: entityUri, entityType: 'configuration/entityTypes/Location' } });
+                    config = __assign(__assign({}, defaultProps.config), { content: {
+                            entityTypes: ['configuration/entityTypes/Location', 'configuration/entityTypes/HCA'],
+                            inRelations: [{ uri: 'configuration/relationTypes/InternalHCAtoHCA', label: '{directionalLabel}' }],
+                            outRelations: [{ uri: 'configuration/relationTypes/HasAddress', label: '{directionalLabel}' }]
+                        } });
+                    mdmValues = __assign(__assign({}, defaultMdmValues), { modifiedEntities: (_a = {}, _a[entityUri] = modifiedEntity, _a) });
+                    props = __assign(__assign({}, defaultProps), { config: config, connection: connection });
+                    user = setUp({ mdmValues: mdmValues, props: props }).user;
+                    return [4 /*yield*/, user.click(within(screen.getByTestId('relation-type-selector')).getByTestId('select-dropdown-indicator'))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('InternalHCAtoHCA affiliation'))];
+                case 2:
+                    _b.sent();
+                    expect(mdmActions.setRelationType).toHaveBeenCalledWith(props.config.id, props.connection.relation.relationUri, expect.objectContaining({
+                        direction: 'in',
+                        type: expect.objectContaining({ uri: 'configuration/relationTypes/InternalHCAtoHCA' })
+                    }));
+                    expect(mdmActions.entityDeleted).toHaveBeenCalledWith(entityUri);
+                    expect(mdmActions.setRelationEntity).toHaveBeenCalledWith(props.config.id, props.connection.relation.relationUri, {});
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should show "create entity" button if mode is not suggesting', function () { return __awaiter(void 0, void 0, void 0, function () {
         var user, inputs;
         return __generator(this, function (_a) {
@@ -496,24 +578,24 @@ describe('relation editor behaviour', function () {
         });
     }); });
     it('should hide create button for one of the entity types when user lacks metadata permissions', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var props, user, inputs;
+        var connection, props, user, inputs;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
+                    connection = __assign(__assign({}, defaultProps.connection), { relation: __assign(__assign({}, defaultRelation), { relationType: 'configuration/relationTypes/HasAddress', direction: 'out' }) });
                     props = pipe(assocPath(['metadata', 'entityTypes', 1, 'access'], ['READ', 'UPDATE', 'INITIATE_CHANGE_REQUEST']), assocPath(['config', 'content'], {
                         entityTypes: ['configuration/entityTypes/Location', 'configuration/entityTypes/HCA'],
                         outRelations: [
                             { uri: 'configuration/relationTypes/HasAddress', label: '{directionalLabel}' },
                             { uri: 'configuration/relationTypes/InternalHCAtoHCA', label: '{directionalLabel}' }
                         ]
-                    }))(defaultProps);
+                    }), assocPath(['connection'], connection))(defaultProps);
                     user = setUp({ props: props }).user;
                     inputs = screen.getAllByRole('combobox');
                     return [4 /*yield*/, user.click(inputs[1])];
                 case 1:
                     _a.sent();
                     expect(screen.queryByText('Create new Address')).not.toBeInTheDocument();
-                    expect(screen.getByText('Create new HCA')).toBeInTheDocument();
                     return [2 /*return*/];
             }
         });

package/ScreenProfileBand/ScreenProfileBand.d.ts

@@ -4,6 +4,7 @@ type Props = {
     entity: Entity;
     className?: string;
     historySlice?: HistorySlice;
+    children?: React.ReactNode;
 };
-export declare const ScreenProfileBand: React.MemoExoticComponent<({ entity, className, historySlice }: Props) => React.JSX.Element>;
+export declare const ScreenProfileBand: React.MemoExoticComponent<({ entity, className, historySlice, children }: Props) => React.JSX.Element>;
 export {};

package/ScreenProfileBand/ScreenProfileBand.js

@@ -8,16 +8,17 @@ import { CollaborationContextProvider } from '../contexts/CollaborationContext';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../constants';
 import { useCollaboration } from '../hooks/useCollaboration';
 import { ProfileBandHistory } from '../features/history';
-import { useStyles } from './styles';
+import styles from './ScreenProfileBand.module.css';
 export var ScreenProfileBand = memo(function (_a) {
-    var entity = _a.entity, className = _a.className, historySlice = _a.historySlice;
-    var styles = useStyles();
+    var entity = _a.entity, className = _a.className, historySlice = _a.historySlice, children = _a.children;
     var objectIds = useMemo(function () { return getProfileBandObjectIdsForCollaboration(entity); }, [entity]);
     var collaboration = useCollaboration({ objectIds: objectIds });
     var entityUri = getEntityUriForLink(entity);
     return (React.createElement(CollaborationContextProvider, { collaboration: collaboration },
         React.createElement(ProfileBand, { className: classnames(className, COMMENTS_CONTAINER_VISIBILITY_AREA), entity: (historySlice === null || historySlice === void 0 ? void 0 : historySlice.aEntity) || entity }, historySlice ? (React.createElement(ProfileBandHistory, null)) : (React.createElement(React.Fragment, null,
-            React.createElement(ProfileBandNavigation, { className: styles.profileBandNavigation }),
+            children ? (React.createElement("div", { className: classnames(styles.profileBandNavigation, styles.navigationRow) },
+                React.createElement(ProfileBandNavigation, null),
+                children)) : (React.createElement(ProfileBandNavigation, { className: styles.profileBandNavigation })),
             React.createElement(CommentsContainer, { className: styles.comments, uri: entityUri, relatedObjectUris: createRelatedObjectUris(CollaborationObjectTypes.ENTITY, {
                     entityUri: entityUri
                 }), objectType: CollaborationObjectTypes.ENTITY }))))));

package/ScreenProfileBand/ScreenProfileBand.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"profileBandNavigation":"ScreenProfileBand-profileBandNavigation--5BMn5","navigationRow":"ScreenProfileBand-navigationRow---CH-F","comments":"ScreenProfileBand-comments--RRYzS"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ScreenProfileBand-profileBandNavigation--5BMn5{margin-bottom:10px}.ScreenProfileBand-navigationRow---CH-F{align-items:center;display:flex;gap:8px}.ScreenProfileBand-comments--RRYzS{display:flex;justify-content:flex-end}`;
+    head.appendChild(style);
+}
+export default styles;

package/ScreenProfileBand/ScreenProfileBand.test.js

@@ -122,6 +122,11 @@ describe('Screen profile band tests', function () {
             }
         });
     }); });
+    it('should render children when provided', function () {
+        var props = __assign(__assign({}, defaultProps), { children: React.createElement("button", null, "Custom Action") });
+        setUp({ props: props });
+        expect(screen.getByRole('button', { name: 'Custom Action' })).toBeInTheDocument();
+    });
     it('should render profile band history if historySlice prop is provided', function () { return __awaiter(void 0, void 0, void 0, function () {
         var historySlice, props, mdmValues;
         return __generator(this, function (_a) {

package/UploadImageDialog/components/TargetBox/TargetBox.js

@@ -1,45 +1,15 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import classnames from 'classnames';
 import i18n from 'ui-i18n';
 import Typography from '@mui/material/Typography';
+import { FileDropZone } from '../../../FileDropZone';
 import { SelectImageButton } from '../SelectImageButton';
 import UploadIcon from '../../../icons/UploadIcon';
 import { MAX_IMAGE_SIZE } from '../../constants';
-import { useStyles } from './styles';
-var ACCEPTABLE_FILE_TYPE = 'Files';
+import styles from './TargetBox.module.css';
 export var TargetBox = function (_a) {
-    var _b;
     var onAppendFile = _a.onAppendFile, className = _a.className;
-    var styles = useStyles();
-    var _c = useState(false), isActive = _c[0], setIsActive = _c[1];
-    var handleDragOver = useCallback(function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        var filesType = e.dataTransfer.types[0];
-        var isValidType = filesType === ACCEPTABLE_FILE_TYPE;
-        e.dataTransfer.dropEffect = isValidType ? 'copy' : 'none';
-        setIsActive(isValidType);
-    }, []);
-    var handleDragLeave = useCallback(function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        var relatedTarget = e.relatedTarget;
-        var isLeave = relatedTarget && !e.currentTarget.contains(relatedTarget);
-        if (isLeave || !relatedTarget) {
-            setIsActive(false);
-        }
-    }, []);
-    var handleDrop = useCallback(function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsActive(false);
-        var filesType = e.dataTransfer.types[0];
-        if (filesType === ACCEPTABLE_FILE_TYPE) {
-            var file = e.dataTransfer.files[0];
-            onAppendFile(file);
-        }
-    }, [onAppendFile]);
-    return (React.createElement("div", { className: classnames(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop },
+    return (React.createElement(FileDropZone, { className: classnames(styles.root, className), onFileDrop: onAppendFile },
         React.createElement(UploadIcon, { className: styles.icon }),
         React.createElement(Typography, { className: styles.title }, i18n.text('Drag an image here')),
         React.createElement(Typography, { className: styles.description }, i18n.text('Acceptable image types would include JPG, PNG, TIFF, GIF, BMP. Maximum image size: ${MAX_IMAGE_SIZE}Mb', {

package/UploadImageDialog/components/TargetBox/TargetBox.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"TargetBox-root--T8Dyg","icon":"TargetBox-icon--qfl13","title":"TargetBox-title--zQaNU","description":"TargetBox-description--Jyqo5"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.TargetBox-root--T8Dyg{padding:36px 0 29px}.TargetBox-icon--qfl13{height:190px;margin-bottom:24px;pointer-events:none;width:190px}.TargetBox-title--zQaNU{color:var(--mui-palette-text-primary);font-size:20px;font-weight:500;line-height:24px;margin-bottom:8px}.TargetBox-description--Jyqo5{color:var(--mui-palette-text-secondary);font-size:14px;line-height:16px;margin-bottom:24px}`;
+    head.appendChild(style);
+}
+export default styles;

package/UploadImageDialog/components/TargetBox/TargetBox.test.js

@@ -9,38 +9,15 @@ describe('TargetBox', function () {
     afterEach(function () {
         jest.clearAllMocks();
     });
-    it('should renders well', function () {
+    it('should render correctly', function () {
         setUp();
         expect(screen.getByText('Drag an image here')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Drop files here' })).toBeInTheDocument();
     });
-    it('should activates drag state on drag over with acceptable file type', function () {
-        var container = setUp().container;
-        var dropZone = container.firstChild;
-        fireEvent.dragOver(dropZone, {
-            dataTransfer: { types: ['Files'], dropEffect: 'copy' }
-        });
-        expect(dropZone).toHaveClass('isActive');
-    });
-    it('should does not activate drag state with unacceptable file type', function () {
-        var container = setUp().container;
-        var dropZone = container.firstChild;
-        fireEvent.dragOver(dropZone, {
-            dataTransfer: { types: ['Text'], dropEffect: 'none' }
-        });
-        expect(dropZone).not.toHaveClass('isActive');
-    });
-    it('should deactivates drag state on drag leave', function () {
-        var container = setUp().container;
-        var dropZone = container.firstChild;
-        fireEvent.dragOver(dropZone, { dataTransfer: { types: ['Files'] } });
-        expect(dropZone).toHaveClass('isActive');
-        fireEvent.dragLeave(dropZone);
-        expect(dropZone).not.toHaveClass('isActive');
-    });
-    it('should calls onAppendFile with the dropped file', function () {
+    it('should call onAppendFile when file is dropped', function () {
         var file = new File(['test content'], 'test.png', { type: 'image/png' });
-        var container = setUp().container;
-        var dropZone = container.firstChild;
+        setUp();
+        var dropZone = screen.getByRole('button', { name: 'Drop files here' });
         fireEvent.drop(dropZone, {
             dataTransfer: {
                 files: [file],
@@ -49,14 +26,4 @@ describe('TargetBox', function () {
         });
         expect(mockOnAppendFile).toHaveBeenCalledWith(file);
     });
-    it('should does not call onAppendFile if dropped item is not of file type', function () {
-        var container = setUp().container;
-        var dropZone = container.firstChild;
-        fireEvent.drop(dropZone, {
-            dataTransfer: {
-                types: ['Text']
-            }
-        });
-        expect(mockOnAppendFile).not.toHaveBeenCalled();
-    });
 });

package/cjs/EntitySelector/EntitySelector.js

@@ -123,7 +123,7 @@ var EntitySelector = function (_a) {
         return (__assign(__assign({}, (TextFieldProps || {})), (_a = {}, _a['data-reltio-id'] = 'reltio-entity-selector', _a)));
     }, [TextFieldProps]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(DropDownSelector_1.DropDownSelector, __assign({ value: !(0, ramda_1.isEmpty)(entity) ? entity : undefined, inputValue: inputValue, onInputChange: handleInputChange, getOptions: getOptions, getOptionLabel: (0, ramda_1.prop)('entityLabel'), onChange: handleChange, onCreate: handleCreate, onClear: handleClear, label: label, createLabel: createLabel, canCreateOption: canCreateEntity, components: __assign(__assign({ Option: EntityOption_1.EntityOption, SingleValue: SingleValue_1.SingleValue }, groupComponent), clearComponent), currentEntityType: currentEntityType, isClearable: true, disableLinkClick: disableLinkClick, TextFieldProps: textFieldProps }, dropDownSelectorProps)),
+        react_1.default.createElement(DropDownSelector_1.DropDownSelector, __assign({ key: entityTypesUris.join(','), value: !(0, ramda_1.isEmpty)(entity) ? entity : undefined, inputValue: inputValue, onInputChange: handleInputChange, getOptions: getOptions, getOptionLabel: (0, ramda_1.prop)('entityLabel'), onChange: handleChange, onCreate: handleCreate, onClear: handleClear, label: label, createLabel: createLabel, canCreateOption: canCreateEntity, components: __assign(__assign({ Option: EntityOption_1.EntityOption, SingleValue: SingleValue_1.SingleValue }, groupComponent), clearComponent), currentEntityType: currentEntityType, isClearable: true, disableLinkClick: disableLinkClick, TextFieldProps: textFieldProps }, dropDownSelectorProps)),
         isTempEntity && (react_1.default.createElement("div", { "data-reltio-id": "entity-creator", className: styles.creatorWrapper },
             react_1.default.createElement(EntityCreator_1.EntityCreator, { mode: mode, attributeTypesSelectionStrategy: attributeTypesSelectionStrategy, entityType: currentEntityType, entityUri: entity.entityUri })))));
 };