@reltio/components 1.4.2233 → 1.4.2235

package/cjs/EntitySelector/EntitySelector.test.js

@@ -390,6 +390,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(react_2.screen.getByTestId('select-dropdown-indicator'))];
+                case 1:
+                    _b.sent();
+                    expect(mdm_sdk_1.typeAheadSearch).toHaveBeenCalledWith([defaultMetadata.entityTypes[0]], '', expect.any(Object));
+                    mdm_sdk_1.typeAheadSearch.mockClear();
+                    updatedProps = __assign(__assign({}, defaultProps), { entityTypesUris: ['configuration/entityTypes/HCP', 'configuration/entityTypes/Company'] });
+                    rerender(react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: defaultMdmValues, actions: defaultMdmActions },
+                        react_1.default.createElement(EntitySelector_1.EntitySelector, __assign({}, updatedProps))));
+                    return [4 /*yield*/, user.click(react_2.screen.getByTestId('select-dropdown-indicator'))];
+                case 2:
+                    _b.sent();
+                    expect(mdm_sdk_1.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/cjs/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/cjs/FileDropZone/FileDropZone.js

@@ -0,0 +1,76 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileDropZone = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var FileDropZone_module_css_1 = __importDefault(require("./FileDropZone.module.css"));
+var DEFAULT_ACCEPTABLE_DRAG_TYPE = 'Files';
+exports.FileDropZone = (0, react_1.memo)(function (_a) {
+    var _b;
+    var children = _a.children, onFileDrop = _a.onFileDrop, isAcceptableFile = _a.isAcceptableFile, className = _a.className;
+    var _c = (0, react_1.useState)(false), isActive = _c[0], setIsActive = _c[1];
+    var isAcceptableDragType = (0, react_1.useCallback)(function (dragType) { return dragType === DEFAULT_ACCEPTABLE_DRAG_TYPE; }, []);
+    var handleDragOver = (0, react_1.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 = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        var dragType = e.dataTransfer.types[0];
+        setIsActive(isAcceptableDragType(dragType));
+    }, [isAcceptableDragType]);
+    var handleDragLeave = (0, react_1.useCallback)(function (e) {
+        e.preventDefault();
+        var relatedTarget = e.relatedTarget;
+        var isLeave = relatedTarget && !e.currentTarget.contains(relatedTarget);
+        if (isLeave || !relatedTarget) {
+            setIsActive(false);
+        }
+    }, []);
+    var handleDrop = (0, react_1.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_1.default.createElement("div", { className: (0, classnames_1.default)(FileDropZone_module_css_1.default.root, className, (_b = {}, _b[FileDropZone_module_css_1.default.active] = isActive, _b)), role: "button", tabIndex: 0, "aria-label": ui_i18n_1.default.text('Drop files here'), onDragOver: handleDragOver, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop }, children));
+});
+exports.FileDropZone.displayName = 'FileDropZone';

package/cjs/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);
+}
+module.exports = styles;

package/cjs/FileDropZone/FileDropZone.test.d.ts

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

package/cjs/FileDropZone/FileDropZone.test.js

@@ -0,0 +1,119 @@
+"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 react_2 = require("@testing-library/react");
+var FileDropZone_1 = require("./FileDropZone");
+var mockOnFileDrop = jest.fn();
+var setUp = function (_a) {
+    var _b = _a === void 0 ? {} : _a, isAcceptableFile = _b.isAcceptableFile;
+    return (0, react_2.render)(react_1.default.createElement(FileDropZone_1.FileDropZone, { onFileDrop: mockOnFileDrop, isAcceptableFile: isAcceptableFile },
+        react_1.default.createElement("span", null, "Drop content here")));
+};
+describe('FileDropZone', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should render children', function () {
+        setUp();
+        expect(react_2.screen.getByText('Drop content here')).toBeInTheDocument();
+    });
+    it('should have correct accessibility attributes', function () {
+        setUp();
+        var dropZone = react_2.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 = react_2.screen.getByRole('button', { name: 'Drop files here' });
+        react_2.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 = react_2.screen.getByRole('button', { name: 'Drop files here' });
+        react_2.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 = react_2.screen.getByRole('button', { name: 'Drop files here' });
+        react_2.fireEvent.dragEnter(dropZone, {
+            dataTransfer: { types: ['Files'] }
+        });
+        expect(dropZone).toHaveClass('active');
+    });
+    it('should deactivate drag state on drag leave', function () {
+        setUp();
+        var dropZone = react_2.screen.getByRole('button', { name: 'Drop files here' });
+        react_2.fireEvent.dragOver(dropZone, { dataTransfer: { types: ['Files'] } });
+        expect(dropZone).toHaveClass('active');
+        react_2.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 = react_2.screen.getByRole('button', { name: 'Drop files here' });
+        react_2.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 = react_2.screen.getByRole('button', { name: 'Drop files here' });
+        react_2.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 = react_2.screen.getByRole('button', { name: 'Drop files here' });
+        react_2.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 = react_2.screen.getByRole('button', { name: 'Drop files here' });
+        react_2.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 = react_2.screen.getByRole('button', { name: 'Drop files here' });
+        react_2.fireEvent.dragOver(dropZone, { dataTransfer: { types: ['Files'] } });
+        expect(dropZone).toHaveClass('active');
+        react_2.fireEvent.drop(dropZone, {
+            dataTransfer: {
+                files: [file],
+                types: ['Files']
+            }
+        });
+        expect(dropZone).not.toHaveClass('active');
+    });
+});

package/cjs/FileDropZone/index.d.ts

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

package/cjs/FileDropZone/index.js

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

package/cjs/RelationEditor/RelationEditor.js

@@ -138,7 +138,6 @@ var RelationEditor = function (_a) {
             areRelatedEntitiesChanged(initialRelatedTempEntities.current, relatedTempEntities));
     var applyAction = (0, react_1.useMemo)(function () { return (0, ramda_1.curry)(isNew ? addRelation : editRelation); }, [isNew, addRelation, editRelation]);
     var canCreateNewEntity = !(0, mdm_sdk_1.isSuggestMode)(mode) || !(0, mdm_sdk_1.isTempUri)(mainEntity === null || mainEntity === void 0 ? void 0 : mainEntity.uri) || !(0, mdm_sdk_1.isEmptyValue)(authoringItems);
-    var onRelationTypeChange = (0, react_1.useCallback)(function (relationType) { return setRelationType(config.id, relationUri, relationType); }, [config, relationUri, setRelationType]);
     var handleClose = (0, react_1.useCallback)(function () { return closeRelationEditor(config.id, relationUri); }, [config, relationUri, closeRelationEditor]);
     var updateModifiedEntityLabel = (0, react_1.useCallback)(function (connection) {
         if (modifiedEntity) {
@@ -149,6 +148,31 @@ var RelationEditor = function (_a) {
     }, [modifiedEntity, metadata]);
     var setModifiedEntity = (0, react_1.useCallback)(function (entity) { return entityCreated(entity); }, [entityCreated]);
     var deleteModifiedEntity = (0, react_1.useCallback)(function (entityUri) { return entityDeleted(entityUri); }, [entityDeleted]);
+    var onRelationTypeChange = (0, react_1.useCallback)(function (newRelationType) {
+        var connectionEntity = connection.entity;
+        var hasConnectionEntity = connectionEntity && connectionEntity.entityUri;
+        var isEntitySuitableForNewRelationType = mainEntity &&
+            newRelationType &&
+            hasConnectionEntity &&
+            (0, mdm_sdk_1.isAvailableRelationBetweenEntities)(newRelationType.direction === mdm_sdk_1.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 = (0, react_1.useCallback)(function (entity) {
         if (modifiedEntity) {
             deleteModifiedEntity(modifiedEntity.uri);
@@ -218,8 +242,15 @@ var RelationEditor = function (_a) {
     var entityTypesUris = (0, react_1.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 ? (0, mdm_sdk_1.getRelationType)(metadata, relationType) : null;
+        var suitableEntityTypeUrisForRelationType = relationTypeObj
+            ? (0, mdm_sdk_1.getSuitableEntityTypeUrisForRelationTypes)(direction === mdm_sdk_1.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 = (0, ramda_1.pipe)(ramda_1.values, ramda_1.flatten, (0, ramda_1.any)(mdm_sdk_1.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_1.default.createElement(react_1.default.Fragment, null,

package/cjs/RelationEditor/RelationEditor.test.js

@@ -298,6 +298,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:
+                    mdm_sdk_1.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(react_2.screen.getByTestId('select-dropdown-indicator'))];
+                case 1:
+                    _a.sent();
+                    expect(mdm_sdk_1.typeAheadSearch).toHaveBeenCalledWith([defaultProps.metadata.entityTypes[1]], '', expect.any(Object));
+                    expect(mdm_sdk_1.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:
+                    mdm_sdk_1.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(react_2.screen.getByTestId('select-dropdown-indicator'))];
+                case 1:
+                    _a.sent();
+                    expect(mdm_sdk_1.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) {
@@ -356,7 +401,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}' }]
@@ -463,6 +508,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((0, react_2.within)(react_2.screen.getByTestId('relation-type-selector')).getByTestId('select-dropdown-indicator'))];
+                case 1:
+                    _b.sent();
+                    return [4 /*yield*/, user.click(react_2.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) {
@@ -501,24 +583,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 = (0, ramda_1.pipe)((0, ramda_1.assocPath)(['metadata', 'entityTypes', 1, 'access'], ['READ', 'UPDATE', 'INITIATE_CHANGE_REQUEST']), (0, ramda_1.assocPath)(['config', 'content'], {
                         entityTypes: ['configuration/entityTypes/Location', 'configuration/entityTypes/HCA'],
                         outRelations: [
                             { uri: 'configuration/relationTypes/HasAddress', label: '{directionalLabel}' },
                             { uri: 'configuration/relationTypes/InternalHCAtoHCA', label: '{directionalLabel}' }
                         ]
-                    }))(defaultProps);
+                    }), (0, ramda_1.assocPath)(['connection'], connection))(defaultProps);
                     user = setUp({ props: props }).user;
                     inputs = react_2.screen.getAllByRole('combobox');
                     return [4 /*yield*/, user.click(inputs[1])];
                 case 1:
                     _a.sent();
                     expect(react_2.screen.queryByText('Create new Address')).not.toBeInTheDocument();
-                    expect(react_2.screen.getByText('Create new HCA')).toBeInTheDocument();
                     return [2 /*return*/];
             }
         });

package/cjs/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/cjs/ScreenProfileBand/ScreenProfileBand.js

@@ -37,17 +37,18 @@ var CollaborationContext_1 = require("../contexts/CollaborationContext");
 var constants_1 = require("../constants");
 var useCollaboration_1 = require("../hooks/useCollaboration");
 var history_1 = require("../features/history");
-var styles_1 = require("./styles");
+var ScreenProfileBand_module_css_1 = __importDefault(require("./ScreenProfileBand.module.css"));
 exports.ScreenProfileBand = (0, react_1.memo)(function (_a) {
-    var entity = _a.entity, className = _a.className, historySlice = _a.historySlice;
-    var styles = (0, styles_1.useStyles)();
+    var entity = _a.entity, className = _a.className, historySlice = _a.historySlice, children = _a.children;
     var objectIds = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.getProfileBandObjectIdsForCollaboration)(entity); }, [entity]);
     var collaboration = (0, useCollaboration_1.useCollaboration)({ objectIds: objectIds });
     var entityUri = (0, mdm_sdk_1.getEntityUriForLink)(entity);
     return (react_1.default.createElement(CollaborationContext_1.CollaborationContextProvider, { collaboration: collaboration },
         react_1.default.createElement(ProfileBand_1.ProfileBand, { className: (0, classnames_1.default)(className, constants_1.COMMENTS_CONTAINER_VISIBILITY_AREA), entity: (historySlice === null || historySlice === void 0 ? void 0 : historySlice.aEntity) || entity }, historySlice ? (react_1.default.createElement(history_1.ProfileBandHistory, null)) : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(ProfileBandNavigation_1.ProfileBandNavigation, { className: styles.profileBandNavigation }),
-            react_1.default.createElement(CommentsContainer_1.CommentsContainer, { className: styles.comments, uri: entityUri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(mdm_sdk_1.CollaborationObjectTypes.ENTITY, {
+            children ? (react_1.default.createElement("div", { className: (0, classnames_1.default)(ScreenProfileBand_module_css_1.default.profileBandNavigation, ScreenProfileBand_module_css_1.default.navigationRow) },
+                react_1.default.createElement(ProfileBandNavigation_1.ProfileBandNavigation, null),
+                children)) : (react_1.default.createElement(ProfileBandNavigation_1.ProfileBandNavigation, { className: ScreenProfileBand_module_css_1.default.profileBandNavigation })),
+            react_1.default.createElement(CommentsContainer_1.CommentsContainer, { className: ScreenProfileBand_module_css_1.default.comments, uri: entityUri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(mdm_sdk_1.CollaborationObjectTypes.ENTITY, {
                     entityUri: entityUri
                 }), objectType: mdm_sdk_1.CollaborationObjectTypes.ENTITY }))))));
 });

package/cjs/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);
+}
+module.exports = styles;

package/cjs/ScreenProfileBand/ScreenProfileBand.test.js

@@ -127,6 +127,11 @@ describe('Screen profile band tests', function () {
             }
         });
     }); });
+    it('should render children when provided', function () {
+        var props = __assign(__assign({}, defaultProps), { children: react_1.default.createElement("button", null, "Custom Action") });
+        setUp({ props: props });
+        expect(react_2.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/cjs/UploadImageDialog/components/TargetBox/TargetBox.js

@@ -1,77 +1,24 @@
 "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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TargetBox = void 0;
-var react_1 = __importStar(require("react"));
+var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var FileDropZone_1 = require("../../../FileDropZone");
 var SelectImageButton_1 = require("../SelectImageButton");
 var UploadIcon_1 = __importDefault(require("../../../icons/UploadIcon"));
 var constants_1 = require("../../constants");
-var styles_1 = require("./styles");
-var ACCEPTABLE_FILE_TYPE = 'Files';
+var TargetBox_module_css_1 = __importDefault(require("./TargetBox.module.css"));
 var TargetBox = function (_a) {
-    var _b;
     var onAppendFile = _a.onAppendFile, className = _a.className;
-    var styles = (0, styles_1.useStyles)();
-    var _c = (0, react_1.useState)(false), isActive = _c[0], setIsActive = _c[1];
-    var handleDragOver = (0, react_1.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 = (0, react_1.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 = (0, react_1.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_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop },
-        react_1.default.createElement(UploadIcon_1.default, { className: styles.icon }),
-        react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Drag an image here')),
-        react_1.default.createElement(Typography_1.default, { className: styles.description }, ui_i18n_1.default.text('Acceptable image types would include JPG, PNG, TIFF, GIF, BMP. Maximum image size: ${MAX_IMAGE_SIZE}Mb', {
+    return (react_1.default.createElement(FileDropZone_1.FileDropZone, { className: (0, classnames_1.default)(TargetBox_module_css_1.default.root, className), onFileDrop: onAppendFile },
+        react_1.default.createElement(UploadIcon_1.default, { className: TargetBox_module_css_1.default.icon }),
+        react_1.default.createElement(Typography_1.default, { className: TargetBox_module_css_1.default.title }, ui_i18n_1.default.text('Drag an image here')),
+        react_1.default.createElement(Typography_1.default, { className: TargetBox_module_css_1.default.description }, ui_i18n_1.default.text('Acceptable image types would include JPG, PNG, TIFF, GIF, BMP. Maximum image size: ${MAX_IMAGE_SIZE}Mb', {
             MAX_IMAGE_SIZE: constants_1.MAX_IMAGE_SIZE
         })),
         react_1.default.createElement(SelectImageButton_1.SelectImageButton, { onAppendFile: onAppendFile })));

package/cjs/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);
+}
+module.exports = styles;