@reltio/components 1.4.2183 → 1.4.2184

package/CollaborationItem/components/SendMessageArea/styles.d.ts

@@ -1,5 +1,5 @@
 type StylesProps = {
     isEditing?: boolean;
 };
-export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"button" | "form" | "main" | "root" | "textField" | "avatar" | "buttons">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"button" | "form" | "main" | "root" | "avatar" | "textField" | "buttons">;
 export {};

package/DateRangeEditor/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "uppercase" | "dropdownIndicator" | "adornedEnd" | "inputRoot" | "inputLabel">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "uppercase" | "dropdownIndicator" | "inputLabel" | "adornedEnd" | "inputRoot">;

package/DependentLookupEditor/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"placeholder" | "option" | "dropdownIndicator" | "isCrossedOut" | "clearIndicator">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"placeholder" | "option" | "dropdownIndicator" | "clearIndicator" | "isCrossedOut">;

package/DropDownSelector/DropDownSelector.d.ts

@@ -1,36 +1,29 @@
-export function DropDownSelector({ value, label, createLabel, getOptions, options, height, onChange, onCreate, onClear, components, textFieldInputRef, TextFieldProps, classes, ...otherProps }: {
-    [x: string]: any;
-    value: any;
-    label: any;
-    createLabel: any;
-    getOptions: any;
-    options: any;
+import React, { ForwardedRef } from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+import { PrimitiveValue } from '@reltio/mdm-sdk';
+type Props<T> = {
+    value?: T;
+    label: string;
+    options?: T[];
+    getOptions?: (inputValue: string) => Promise<void | T[]>;
+    onChange?: (value: T) => void;
+    onCreate?: (value: PrimitiveValue, group?: string) => void;
+    onClear?: () => void;
+    createLabel?: string;
+    canCreateOption?: (id?: string) => boolean;
+    components?: {
+        Group?: React.ElementType;
+        ClearIndicator?: React.ElementType;
+        Option?: React.ElementType;
+        GroupHeading?: React.ElementType;
+        SingleValue?: React.ElementType;
+        [key: string]: React.ElementType;
+    };
+    textFieldInputRef?: ForwardedRef<HTMLInputElement>;
+    TextFieldProps?: TextFieldProps;
     height?: number;
-    onChange?: any;
-    onCreate: any;
-    onClear?: any;
-    components: any;
-    textFieldInputRef: any;
-    TextFieldProps: any;
-    classes: any;
-}): React.JSX.Element;
-export namespace DropDownSelector {
-    export { DropDownSelectorType as propTypes };
-}
-export namespace DropDownSelectorType {
-    let value: PropTypes.Requireable<object>;
-    let label: PropTypes.Validator<string>;
-    let getOptions: PropTypes.Requireable<(...args: any[]) => any>;
-    let options: PropTypes.Requireable<any[]>;
-    let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    let onCreate: PropTypes.Requireable<(...args: any[]) => any>;
-    let onClear: PropTypes.Requireable<(...args: any[]) => any>;
-    let createLabel: PropTypes.Requireable<string>;
-    let components: PropTypes.Requireable<object>;
-    let textFieldInputRef: PropTypes.Requireable<object>;
-    let TextFieldProps: PropTypes.Requireable<object>;
-    let height: PropTypes.Requireable<number>;
-    let classes: PropTypes.Requireable<object>;
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+    classes?: Record<string, string>;
+    [key: string]: unknown;
+};
+export declare const DropDownSelector: <T>({ value, label, options, getOptions, createLabel, height, onChange, onCreate, canCreateOption, onClear, components, textFieldInputRef, TextFieldProps, classes, ...otherProps }: Props<T>) => React.JSX.Element;
+export {};

package/DropDownSelector/DropDownSelector.js

@@ -21,7 +21,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useRef, useState } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { defaultTo, identity, isEmpty, path, prop } from 'ramda';
 import { isEmptyValue } from '@reltio/mdm-sdk';
@@ -34,9 +33,9 @@ import { SingleValue } from './components/SingleValue';
 import { useStyles, customStyles, overloadMenuListStyle, withoutLabelInputStyle } from './styles';
 export var DropDownSelector = function (_a) {
     var _b;
-    var value = _a.value, label = _a.label, createLabel = _a.createLabel, getOptions = _a.getOptions, options = _a.options, _c = _a.height, height = _c === void 0 ? 46 : _c, _d = _a.onChange, onChange = _d === void 0 ? identity : _d, onCreate = _a.onCreate, _e = _a.onClear, onClear = _e === void 0 ? identity : _e, components = _a.components, textFieldInputRef = _a.textFieldInputRef, TextFieldProps = _a.TextFieldProps, classes = _a.classes, otherProps = __rest(_a, ["value", "label", "createLabel", "getOptions", "options", "height", "onChange", "onCreate", "onClear", "components", "textFieldInputRef", "TextFieldProps", "classes"]);
+    var value = _a.value, label = _a.label, options = _a.options, getOptions = _a.getOptions, createLabel = _a.createLabel, _c = _a.height, height = _c === void 0 ? 46 : _c, _d = _a.onChange, onChange = _d === void 0 ? identity : _d, onCreate = _a.onCreate, _e = _a.canCreateOption, canCreateOption = _e === void 0 ? function () { return Boolean(onCreate); } : _e, _f = _a.onClear, onClear = _f === void 0 ? identity : _f, _g = _a.components, components = _g === void 0 ? {} : _g, textFieldInputRef = _a.textFieldInputRef, TextFieldProps = _a.TextFieldProps, _h = _a.classes, classes = _h === void 0 ? {} : _h, otherProps = __rest(_a, ["value", "label", "options", "getOptions", "createLabel", "height", "onChange", "onCreate", "canCreateOption", "onClear", "components", "textFieldInputRef", "TextFieldProps", "classes"]);
     var styles = useStyles({ height: height });
-    var _f = useState(false), open = _f[0], setOpen = _f[1];
+    var _j = useState(false), open = _j[0], setOpen = _j[1];
     var inputRef = useRef(null);
     var SelectComponent = getOptions ? AsyncReactSelect : ReactSelect;
     var showIndicatorSeparator = prop('ClearIndicator', components)
@@ -52,21 +51,5 @@ export var DropDownSelector = function (_a) {
     var overloadStylesIfNoLabel = isEmpty(label) ? withoutLabelInputStyle : {};
     var mergedStyles = __assign(__assign(__assign({}, customStyles), overloadStylesIfGroup), overloadStylesIfNoLabel);
     var mergedClasses = __assign(__assign({}, styles), classes);
-    return (React.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: defaultTo(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, classes: mergedClasses, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: ReactSelectDropdownIndicator, LoadingIndicator: EmptyStub, SingleValue: SingleValue, Menu: Menu }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', size: 'small', classes: __assign(__assign({}, prop('classes', TextFieldProps)), { root: classnames(styles.formControl, path(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, prop('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, prop('InputProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputProps', 'classes'], TextFieldProps)), { root: classnames(styles.filledInputRoot, path(['InputProps', 'classes', 'root'], TextFieldProps)), underline: classnames((_b = {}, _b[styles.filledInputUnderline] = isEmptyValue(value), _b), path(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: classnames('focused', path(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, prop('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputLabelProps', 'classes'], TextFieldProps)), { root: classnames(styles.inputLabel, path(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: classnames('shrink', path(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !isEmptyValue(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
+    return (React.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: defaultTo(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, canCreateOption: canCreateOption, classes: mergedClasses, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: ReactSelectDropdownIndicator, LoadingIndicator: EmptyStub, SingleValue: SingleValue, Menu: Menu }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', size: 'small', classes: __assign(__assign({}, prop('classes', TextFieldProps)), { root: classnames(styles.formControl, path(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, prop('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, prop('InputProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputProps', 'classes'], TextFieldProps)), { root: classnames(styles.filledInputRoot, path(['InputProps', 'classes', 'root'], TextFieldProps)), underline: classnames((_b = {}, _b[styles.filledInputUnderline] = isEmptyValue(value), _b), path(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: classnames('focused', path(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, prop('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputLabelProps', 'classes'], TextFieldProps)), { root: classnames(styles.inputLabel, path(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: classnames('shrink', path(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !isEmptyValue(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
 };
-export var DropDownSelectorType = {
-    value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-    label: PropTypes.string.isRequired,
-    getOptions: PropTypes.func,
-    options: PropTypes.array,
-    onChange: PropTypes.func,
-    onCreate: PropTypes.func,
-    onClear: PropTypes.func,
-    createLabel: PropTypes.string,
-    components: PropTypes.object,
-    textFieldInputRef: PropTypes.object,
-    TextFieldProps: PropTypes.object,
-    height: PropTypes.number,
-    classes: PropTypes.object
-};
-DropDownSelector.propTypes = DropDownSelectorType;

package/DropDownSelector/DropDownSelector.test.js

@@ -48,6 +48,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React from 'react';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { getMuiIconByName } from '../test-utils';
 import { DropDownSelector } from './DropDownSelector';
 var defaultOptions = [
     { label: 'First option', value: 'option1' },
@@ -159,4 +160,20 @@ describe('Dropdown selector tests', function () {
             }
         });
     }); });
+    it('should not show create button if canCreateOption is false', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { canCreateOption: function () { return false; }, createLabel: 'Create new option' });
+                    user = setUp(props).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('combobox'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByText('Create new option')).not.toBeInTheDocument();
+                    expect(getMuiIconByName('Add')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/DropDownSelector/components/Menu/Menu.d.ts

@@ -1,9 +1,16 @@
-export function Menu(props: any): React.JSX.Element;
-export namespace Menu {
-    namespace propTypes {
-        let children: PropTypes.Validator<PropTypes.ReactElementLike>;
-        let selectProps: PropTypes.Validator<object>;
-    }
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
+type Props = {
+    selectProps: {
+        createLabel?: string;
+        canCreateOption: () => boolean;
+        inputValue: string;
+        components?: {
+            Group?: React.ElementType;
+            [key: string]: React.ElementType;
+        };
+        onCreate: (inputValue: string) => void;
+    };
+    children: ReactNode;
+};
+export declare const Menu: (props: Props) => React.JSX.Element;
+export {};

package/DropDownSelector/components/Menu/Menu.js

@@ -10,21 +10,16 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import PropTypes from 'prop-types';
 import { prop } from 'ramda';
 import AddIcon from '@mui/icons-material/Add';
 import { ReactSelectMenuWithPopper } from '../../../ReactSelectMenuWithPopper';
 import { useStyles } from './styles';
 export var Menu = function (props) {
-    var _a = props.selectProps, onCreate = _a.onCreate, createLabel = _a.createLabel, inputValue = _a.inputValue, components = _a.components, children = props.children;
+    var _a = props.selectProps, onCreate = _a.onCreate, createLabel = _a.createLabel, inputValue = _a.inputValue, components = _a.components, canCreateOption = _a.canCreateOption, children = props.children;
     var styles = useStyles();
     return (React.createElement(ReactSelectMenuWithPopper, __assign({}, props),
         children,
-        createLabel && !prop('Group', components) && (React.createElement("span", { className: styles.addLabel, onClick: function () { return onCreate(inputValue); } },
+        createLabel && !prop('Group', components) && canCreateOption() && (React.createElement("span", { className: styles.addLabel, onClick: function () { return onCreate(inputValue); } },
             React.createElement(AddIcon, { className: styles.addIcon }),
             createLabel))));
 };
-Menu.propTypes = {
-    children: PropTypes.element.isRequired,
-    selectProps: PropTypes.object.isRequired
-};

package/DropDownSelector/styles.d.ts

@@ -1,4 +1,4 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"formControl" | "dropdownIndicator" | "control" | "inputLabel" | "valueContainer" | "filledInputRoot" | "filledInputUnderline">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dropdownIndicator" | "control" | "valueContainer" | "formControl" | "filledInputRoot" | "filledInputUnderline" | "inputLabel">;
 export namespace customStyles {
     function menu(baseStyles: any): any;
     function menuList(baseStyles: any): any;

package/EntitySelector/EntitySelector.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useState, useMemo, useCallback } from 'react';
 import i18n from 'ui-i18n';
 import { isEmpty, prop } from 'ramda';
-import { typeAheadSearch, getEntityType, isTempUri, isAvailableEntityType } from '@reltio/mdm-sdk';
+import { typeAheadSearch, getEntityType, isTempUri, isAvailableEntityType, checkMetadataForCreate } from '@reltio/mdm-sdk';
 import { EmptyStub } from '../EmptyStub';
 import { DropDownSelector } from '../DropDownSelector';
 import { EntityOption } from './components/EntityOption';
@@ -39,6 +39,18 @@ export var EntitySelector = function (_a) {
     var styles = useStyles();
     var _g = useState(''), inputValue = _g[0], setInputValue = _g[1];
     var entityTypes = useMemo(function () { return entityTypesUris.map(function (type) { return getEntityType(metadata, type); }).filter(isAvailableEntityType); }, [entityTypesUris, metadata]);
+    var creatableEntityTypesUris = useMemo(function () {
+        return entityTypesUris.filter(function (entityTypeUri) {
+            var entityType = getEntityType(metadata, entityTypeUri);
+            return checkMetadataForCreate(mode, entityType);
+        });
+    }, [entityTypesUris, mode, metadata]);
+    var canCreateEntity = useCallback(function (entityTypeUri) {
+        if (entityTypes.length === 0) {
+            return false;
+        }
+        return creatableEntityTypesUris.includes(entityTypeUri !== null && entityTypeUri !== void 0 ? entityTypeUri : entityTypes[0].uri);
+    }, [creatableEntityTypesUris, entityTypes]);
     var options = useMemo(function () { return (__assign(__assign({}, globalSearchRequestOptions), { max: max, sendMasked: isMasked })); }, [globalSearchRequestOptions, isMasked, max]);
     var handleCreate = onCreate
         ? function (value, entityTypeUri) {
@@ -63,8 +75,16 @@ export var EntitySelector = function (_a) {
         return (isEmpty(entityTypes) ? Promise.resolve([]) : typeAheadSearch(entityTypes, value, options)).then(buildEntityOptions(entityTypes, onCreate));
     }, [entityTypes, onCreate, options]);
     var currentEntityType = (isEmpty(entity) ? entityTypes[0] : getEntityType(metadata, entity.entityType)) || {};
-    var createLabel = onCreate && i18n.text("Create ".concat(inputValue ? "\"".concat(inputValue, "\" as ") : '', "new ").concat(currentEntityType.label));
-    var label = i18n.text("Select ".concat(entityTypes.length === 1 ? "".concat(entityTypes[0].label, " ") : '', "profile"));
+    var createLabel = onCreate &&
+        (inputValue
+            ? i18n.text('Create "${name}" as new ${entityTypeLabel}', {
+                name: inputValue,
+                entityTypeLabel: currentEntityType.label
+            })
+            : i18n.text('Create new ${entityTypeLabel}', { entityTypeLabel: currentEntityType.label }));
+    var label = i18n.text('Select ${entityTypeLabel}profile', {
+        entityTypeLabel: entityTypes.length === 1 ? "".concat(entityTypes[0].label, " ") : ''
+    });
     var isTempEntity = !isEmpty(entity) && isTempUri(entity.entityUri);
     var groupComponent = groupMode ? { Group: Group, GroupHeading: EmptyStub } : {};
     var clearComponent = isTempEntity ? { ClearIndicator: ClearIndicator } : {};
@@ -74,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, components: __assign(__assign({ Option: EntityOption, SingleValue: SingleValue }, groupComponent), clearComponent), currentEntityType: currentEntityType, isClearable: true, disableLinkClick: disableLinkClick, TextFieldProps: textFieldProps }, dropDownSelectorProps)),
+        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)),
         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/components/Group/Group.d.ts

@@ -1,10 +1,18 @@
-export function Group(props: any): React.JSX.Element;
-export namespace Group {
-    namespace propTypes {
-        let selectProps: PropTypes.Validator<object>;
-        let data: PropTypes.Requireable<object>;
-        let children: PropTypes.Requireable<any[]>;
-    }
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
+import { GroupProps } from 'react-select';
+type Props = GroupProps & {
+    data: {
+        label: string;
+        entityType: string;
+        [key: string]: unknown;
+    };
+    selectProps: {
+        inputValue: string;
+        onCreate?: (value: string, entityType: string) => void;
+        canCreateOption: (entityTypeUri: string) => boolean;
+        [key: string]: unknown;
+    };
+    children?: ReactNode;
+};
+export declare const Group: (props: Props) => React.JSX.Element;
+export {};

package/EntitySelector/components/Group/Group.js

@@ -10,25 +10,24 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import PropTypes from 'prop-types';
 import i18n from 'ui-i18n';
 import { components } from 'react-select';
 import AddIcon from '@mui/icons-material/Add';
 import { useStyles } from './styles';
 var ComponentsGroup = components.Group;
 export var Group = function (props) {
-    var _a = props.selectProps, inputValue = _a.inputValue, onCreate = _a.onCreate, data = props.data, children = props.children;
     var styles = useStyles();
+    var _a = props.selectProps, inputValue = _a.inputValue, onCreate = _a.onCreate, canCreateOption = _a.canCreateOption, data = props.data, children = props.children;
     return (React.createElement(ComponentsGroup, __assign({}, props),
         React.createElement("div", { className: styles.groupHeading },
             React.createElement("span", null, data.label),
-            onCreate && (React.createElement("span", { onClick: function () { return onCreate(inputValue, data.entityType); }, className: styles.addLabel },
+            onCreate && canCreateOption(data.entityType) && (React.createElement("span", { onClick: function () { return onCreate(inputValue, data.entityType); }, className: styles.addLabel },
                 React.createElement(AddIcon, { className: styles.addIcon }),
-                i18n.text("Create ".concat(inputValue ? "\"".concat(inputValue, "\" as ") : '', "new ").concat(data.label))))),
+                inputValue
+                    ? i18n.text('Create "${name}" as new ${entityTypeLabel}', {
+                        name: inputValue,
+                        entityTypeLabel: data.label
+                    })
+                    : i18n.text('Create new ${entityTypeLabel}', { entityTypeLabel: data.label })))),
         children));
 };
-Group.propTypes = {
-    selectProps: PropTypes.object.isRequired,
-    data: PropTypes.object,
-    children: PropTypes.array
-};

package/HOCs/withReactSelectMuiSkin/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menu" | "placeholder" | "option" | "singleValue" | "dropdownIndicator" | "control" | "option--selected" | "option--item" | "clearIndicator" | "groupHeading" | "multiValue" | "noOptionsMessage" | "valueContainer" | "multiValue__label" | "valueContainer--multi">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menu" | "placeholder" | "option" | "singleValue" | "dropdownIndicator" | "clearIndicator" | "control" | "groupHeading" | "multiValue" | "noOptionsMessage" | "valueContainer" | "multiValue__label" | "option--selected" | "option--item" | "valueContainer--multi">;

package/MetadataTypesSelector/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "input" | "root" | "inputRoot" | "inputLabel" | "inputText" | "emptyInput" | "disabledInput" | "disabledPointer" | "disabledUnderline" | "popup-opened-icon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "input" | "root" | "inputLabel" | "inputRoot" | "inputText" | "emptyInput" | "disabledInput" | "disabledPointer" | "disabledUnderline" | "popup-opened-icon">;

package/MultiSelect/styles.d.ts

@@ -2,5 +2,5 @@ type PlaceholderProps = {
     placeholder?: string;
     label?: string;
 };
-export declare const useStyles: (props: PlaceholderProps) => import("@mui/styles").ClassNameMap<"placeholder" | "label" | "dropdownIndicator" | "option--selected" | "clearIndicator">;
+export declare const useStyles: (props: PlaceholderProps) => import("@mui/styles").ClassNameMap<"placeholder" | "label" | "dropdownIndicator" | "clearIndicator" | "option--selected">;
 export {};

package/ProfileCard/components/ProfileCardPlaceholder/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "info" | "secondaryLabel" | "thirdRow" | "@keyframes keyframes-wave" | "wave" | "avatar">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "info" | "secondaryLabel" | "avatar" | "thirdRow" | "@keyframes keyframes-wave" | "wave">;

package/ReactSortableTree/components/NodeRendererDefault/NodeRendererDefault.d.ts

@@ -42,9 +42,9 @@ export namespace NodeRendererDefault {
     }
     namespace propTypes {
         export let node: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
-        let title_1: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
+        let title_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         export { title_1 as title };
-        let subtitle_1: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
+        let subtitle_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         export { subtitle_1 as subtitle };
         export let path: PropTypes.Validator<NonNullable<string | number>[]>;
         export let treeIndex: PropTypes.Validator<number>;

package/RelationEditor/RelationEditor.js

@@ -183,12 +183,10 @@ var RelationEditor = function (_a) {
         setModifiedEntity(newEntity);
     }, [setModifiedEntity, onChangeEntity, mode, metadata]);
     var errorMessage = getErrorMessage(error);
-    var getEntityTypesUris = useCallback(function () {
-        var _a = config, content = _a.content, contentSecondLevel = _a.contentSecondLevel;
-        if (contentSecondLevel && connection.parentEntityUri) {
-            return contentSecondLevel.entityTypes;
-        }
-        return content.entityTypes;
+    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 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;
@@ -203,7 +201,7 @@ var RelationEditor = function (_a) {
                             React.createElement(EntitySelector, { className: classnames(styles.item, (_b = {},
                                     _b[styles.dense] = errorMessage ||
                                         (connection.entity && isTempUri(connection.entity.entityUri)),
-                                    _b)), entity: connection.entity || {}, entityTypesUris: getEntityTypesUris() || [], globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: canCreateNewEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: relationEditorAttributeTypesSelectionStrategy, isMasked: isMasked })))),
+                                    _b)), entity: connection.entity || {}, entityTypesUris: entityTypesUris, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: canCreateNewEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: relationEditorAttributeTypesSelectionStrategy, isMasked: isMasked })))),
                 React.createElement(HiddenAttributesContext.Provider, { value: emptyHiddenAttributes },
                     React.createElement(EditModeAttributesList, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute }))))),
         React.createElement("div", { className: styles.actionButtons },

package/RelationEditor/RelationEditor.test.js

@@ -48,6 +48,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React from 'react';
 import { screen, render, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { assocPath, pipe } from 'ramda';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { Mode, ScreenType, ProfileViewType, typeAheadSearch, ErrorType, ActivityFilter, ErrorSource, ErrorSeverity } from '@reltio/mdm-sdk';
@@ -478,6 +479,45 @@ describe('relation editor behaviour', function () {
             }
         });
     }); });
+    it('should hide create button when user lacks metadata permissions', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, inputs;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = assocPath(['metadata', 'entityTypes', 1, 'access'], ['READ', 'UPDATE', 'INITIATE_CHANGE_REQUEST'], defaultProps);
+                    user = setUp({ props: props }).user;
+                    inputs = screen.getAllByRole('combobox');
+                    return [4 /*yield*/, user.click(inputs[0])];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByText('Create new Address')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    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;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    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);
+                    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*/];
+            }
+        });
+    }); });
     it('should show "create entity" button if mode is suggesting, but main entity uri is not temporary', function () { return __awaiter(void 0, void 0, void 0, function () {
         var props, mdmValues, user, inputs;
         return __generator(this, function (_a) {

package/cjs/CollaborationItem/components/SendMessageArea/styles.d.ts

@@ -1,5 +1,5 @@
 type StylesProps = {
     isEditing?: boolean;
 };
-export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"button" | "form" | "main" | "root" | "textField" | "avatar" | "buttons">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"button" | "form" | "main" | "root" | "avatar" | "textField" | "buttons">;
 export {};

package/cjs/DateRangeEditor/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "uppercase" | "dropdownIndicator" | "adornedEnd" | "inputRoot" | "inputLabel">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "uppercase" | "dropdownIndicator" | "inputLabel" | "adornedEnd" | "inputRoot">;

package/cjs/DependentLookupEditor/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"placeholder" | "option" | "dropdownIndicator" | "isCrossedOut" | "clearIndicator">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"placeholder" | "option" | "dropdownIndicator" | "clearIndicator" | "isCrossedOut">;

package/cjs/DropDownSelector/DropDownSelector.d.ts

@@ -1,36 +1,29 @@
-export function DropDownSelector({ value, label, createLabel, getOptions, options, height, onChange, onCreate, onClear, components, textFieldInputRef, TextFieldProps, classes, ...otherProps }: {
-    [x: string]: any;
-    value: any;
-    label: any;
-    createLabel: any;
-    getOptions: any;
-    options: any;
+import React, { ForwardedRef } from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+import { PrimitiveValue } from '@reltio/mdm-sdk';
+type Props<T> = {
+    value?: T;
+    label: string;
+    options?: T[];
+    getOptions?: (inputValue: string) => Promise<void | T[]>;
+    onChange?: (value: T) => void;
+    onCreate?: (value: PrimitiveValue, group?: string) => void;
+    onClear?: () => void;
+    createLabel?: string;
+    canCreateOption?: (id?: string) => boolean;
+    components?: {
+        Group?: React.ElementType;
+        ClearIndicator?: React.ElementType;
+        Option?: React.ElementType;
+        GroupHeading?: React.ElementType;
+        SingleValue?: React.ElementType;
+        [key: string]: React.ElementType;
+    };
+    textFieldInputRef?: ForwardedRef<HTMLInputElement>;
+    TextFieldProps?: TextFieldProps;
     height?: number;
-    onChange?: any;
-    onCreate: any;
-    onClear?: any;
-    components: any;
-    textFieldInputRef: any;
-    TextFieldProps: any;
-    classes: any;
-}): React.JSX.Element;
-export namespace DropDownSelector {
-    export { DropDownSelectorType as propTypes };
-}
-export namespace DropDownSelectorType {
-    let value: PropTypes.Requireable<object>;
-    let label: PropTypes.Validator<string>;
-    let getOptions: PropTypes.Requireable<(...args: any[]) => any>;
-    let options: PropTypes.Requireable<any[]>;
-    let onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    let onCreate: PropTypes.Requireable<(...args: any[]) => any>;
-    let onClear: PropTypes.Requireable<(...args: any[]) => any>;
-    let createLabel: PropTypes.Requireable<string>;
-    let components: PropTypes.Requireable<object>;
-    let textFieldInputRef: PropTypes.Requireable<object>;
-    let TextFieldProps: PropTypes.Requireable<object>;
-    let height: PropTypes.Requireable<number>;
-    let classes: PropTypes.Requireable<object>;
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+    classes?: Record<string, string>;
+    [key: string]: unknown;
+};
+export declare const DropDownSelector: <T>({ value, label, options, getOptions, createLabel, height, onChange, onCreate, canCreateOption, onClear, components, textFieldInputRef, TextFieldProps, classes, ...otherProps }: Props<T>) => React.JSX.Element;
+export {};

package/cjs/DropDownSelector/DropDownSelector.js

@@ -48,9 +48,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropDownSelectorType = exports.DropDownSelector = void 0;
+exports.DropDownSelector = void 0;
 var react_1 = __importStar(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
@@ -63,9 +62,9 @@ var SingleValue_1 = require("./components/SingleValue");
 var styles_1 = require("./styles");
 var DropDownSelector = function (_a) {
     var _b;
-    var value = _a.value, label = _a.label, createLabel = _a.createLabel, getOptions = _a.getOptions, options = _a.options, _c = _a.height, height = _c === void 0 ? 46 : _c, _d = _a.onChange, onChange = _d === void 0 ? ramda_1.identity : _d, onCreate = _a.onCreate, _e = _a.onClear, onClear = _e === void 0 ? ramda_1.identity : _e, components = _a.components, textFieldInputRef = _a.textFieldInputRef, TextFieldProps = _a.TextFieldProps, classes = _a.classes, otherProps = __rest(_a, ["value", "label", "createLabel", "getOptions", "options", "height", "onChange", "onCreate", "onClear", "components", "textFieldInputRef", "TextFieldProps", "classes"]);
+    var value = _a.value, label = _a.label, options = _a.options, getOptions = _a.getOptions, createLabel = _a.createLabel, _c = _a.height, height = _c === void 0 ? 46 : _c, _d = _a.onChange, onChange = _d === void 0 ? ramda_1.identity : _d, onCreate = _a.onCreate, _e = _a.canCreateOption, canCreateOption = _e === void 0 ? function () { return Boolean(onCreate); } : _e, _f = _a.onClear, onClear = _f === void 0 ? ramda_1.identity : _f, _g = _a.components, components = _g === void 0 ? {} : _g, textFieldInputRef = _a.textFieldInputRef, TextFieldProps = _a.TextFieldProps, _h = _a.classes, classes = _h === void 0 ? {} : _h, otherProps = __rest(_a, ["value", "label", "options", "getOptions", "createLabel", "height", "onChange", "onCreate", "canCreateOption", "onClear", "components", "textFieldInputRef", "TextFieldProps", "classes"]);
     var styles = (0, styles_1.useStyles)({ height: height });
-    var _f = (0, react_1.useState)(false), open = _f[0], setOpen = _f[1];
+    var _j = (0, react_1.useState)(false), open = _j[0], setOpen = _j[1];
     var inputRef = (0, react_1.useRef)(null);
     var SelectComponent = getOptions ? AsyncReactSelect_1.AsyncReactSelect : ReactSelect_1.ReactSelect;
     var showIndicatorSeparator = (0, ramda_1.prop)('ClearIndicator', components)
@@ -81,22 +80,6 @@ var DropDownSelector = function (_a) {
     var overloadStylesIfNoLabel = (0, ramda_1.isEmpty)(label) ? styles_1.withoutLabelInputStyle : {};
     var mergedStyles = __assign(__assign(__assign({}, styles_1.customStyles), overloadStylesIfGroup), overloadStylesIfNoLabel);
     var mergedClasses = __assign(__assign({}, styles), classes);
-    return (react_1.default.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: (0, ramda_1.defaultTo)(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, classes: mergedClasses, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: ReactSelectDropdownIndicator_1.ReactSelectDropdownIndicator, LoadingIndicator: EmptyStub_1.EmptyStub, SingleValue: SingleValue_1.SingleValue, Menu: Menu_1.Menu }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', size: 'small', classes: __assign(__assign({}, (0, ramda_1.prop)('classes', TextFieldProps)), { root: (0, classnames_1.default)(styles.formControl, (0, ramda_1.path)(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, (0, ramda_1.prop)('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, (0, ramda_1.prop)('InputProps', TextFieldProps)), { classes: __assign(__assign({}, (0, ramda_1.path)(['InputProps', 'classes'], TextFieldProps)), { root: (0, classnames_1.default)(styles.filledInputRoot, (0, ramda_1.path)(['InputProps', 'classes', 'root'], TextFieldProps)), underline: (0, classnames_1.default)((_b = {}, _b[styles.filledInputUnderline] = (0, mdm_sdk_1.isEmptyValue)(value), _b), (0, ramda_1.path)(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: (0, classnames_1.default)('focused', (0, ramda_1.path)(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, (0, ramda_1.prop)('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, (0, ramda_1.path)(['InputLabelProps', 'classes'], TextFieldProps)), { root: (0, classnames_1.default)(styles.inputLabel, (0, ramda_1.path)(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: (0, classnames_1.default)('shrink', (0, ramda_1.path)(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !(0, mdm_sdk_1.isEmptyValue)(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
+    return (react_1.default.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: (0, ramda_1.defaultTo)(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, canCreateOption: canCreateOption, classes: mergedClasses, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: ReactSelectDropdownIndicator_1.ReactSelectDropdownIndicator, LoadingIndicator: EmptyStub_1.EmptyStub, SingleValue: SingleValue_1.SingleValue, Menu: Menu_1.Menu }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', size: 'small', classes: __assign(__assign({}, (0, ramda_1.prop)('classes', TextFieldProps)), { root: (0, classnames_1.default)(styles.formControl, (0, ramda_1.path)(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, (0, ramda_1.prop)('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, (0, ramda_1.prop)('InputProps', TextFieldProps)), { classes: __assign(__assign({}, (0, ramda_1.path)(['InputProps', 'classes'], TextFieldProps)), { root: (0, classnames_1.default)(styles.filledInputRoot, (0, ramda_1.path)(['InputProps', 'classes', 'root'], TextFieldProps)), underline: (0, classnames_1.default)((_b = {}, _b[styles.filledInputUnderline] = (0, mdm_sdk_1.isEmptyValue)(value), _b), (0, ramda_1.path)(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: (0, classnames_1.default)('focused', (0, ramda_1.path)(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, (0, ramda_1.prop)('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, (0, ramda_1.path)(['InputLabelProps', 'classes'], TextFieldProps)), { root: (0, classnames_1.default)(styles.inputLabel, (0, ramda_1.path)(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: (0, classnames_1.default)('shrink', (0, ramda_1.path)(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !(0, mdm_sdk_1.isEmptyValue)(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
 };
 exports.DropDownSelector = DropDownSelector;
-exports.DropDownSelectorType = {
-    value: prop_types_1.default.oneOfType([prop_types_1.default.object, prop_types_1.default.array]),
-    label: prop_types_1.default.string.isRequired,
-    getOptions: prop_types_1.default.func,
-    options: prop_types_1.default.array,
-    onChange: prop_types_1.default.func,
-    onCreate: prop_types_1.default.func,
-    onClear: prop_types_1.default.func,
-    createLabel: prop_types_1.default.string,
-    components: prop_types_1.default.object,
-    textFieldInputRef: prop_types_1.default.object,
-    TextFieldProps: prop_types_1.default.object,
-    height: prop_types_1.default.number,
-    classes: prop_types_1.default.object
-};
-exports.DropDownSelector.propTypes = exports.DropDownSelectorType;

package/cjs/DropDownSelector/DropDownSelector.test.js

@@ -53,6 +53,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@testing-library/react");
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var test_utils_1 = require("../test-utils");
 var DropDownSelector_1 = require("./DropDownSelector");
 var defaultOptions = [
     { label: 'First option', value: 'option1' },
@@ -164,4 +165,20 @@ describe('Dropdown selector tests', function () {
             }
         });
     }); });
+    it('should not show create button if canCreateOption is false', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { canCreateOption: function () { return false; }, createLabel: 'Create new option' });
+                    user = setUp(props).user;
+                    return [4 /*yield*/, user.click(react_2.screen.getByRole('combobox'))];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.queryByText('Create new option')).not.toBeInTheDocument();
+                    expect((0, test_utils_1.getMuiIconByName)('Add')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/cjs/DropDownSelector/components/Menu/Menu.d.ts

@@ -1,9 +1,16 @@
-export function Menu(props: any): React.JSX.Element;
-export namespace Menu {
-    namespace propTypes {
-        let children: PropTypes.Validator<PropTypes.ReactElementLike>;
-        let selectProps: PropTypes.Validator<object>;
-    }
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
+type Props = {
+    selectProps: {
+        createLabel?: string;
+        canCreateOption: () => boolean;
+        inputValue: string;
+        components?: {
+            Group?: React.ElementType;
+            [key: string]: React.ElementType;
+        };
+        onCreate: (inputValue: string) => void;
+    };
+    children: ReactNode;
+};
+export declare const Menu: (props: Props) => React.JSX.Element;
+export {};

package/cjs/DropDownSelector/components/Menu/Menu.js

@@ -16,22 +16,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
 var react_1 = __importDefault(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var ramda_1 = require("ramda");
 var Add_1 = __importDefault(require("@mui/icons-material/Add"));
 var ReactSelectMenuWithPopper_1 = require("../../../ReactSelectMenuWithPopper");
 var styles_1 = require("./styles");
 var Menu = function (props) {
-    var _a = props.selectProps, onCreate = _a.onCreate, createLabel = _a.createLabel, inputValue = _a.inputValue, components = _a.components, children = props.children;
+    var _a = props.selectProps, onCreate = _a.onCreate, createLabel = _a.createLabel, inputValue = _a.inputValue, components = _a.components, canCreateOption = _a.canCreateOption, children = props.children;
     var styles = (0, styles_1.useStyles)();
     return (react_1.default.createElement(ReactSelectMenuWithPopper_1.ReactSelectMenuWithPopper, __assign({}, props),
         children,
-        createLabel && !(0, ramda_1.prop)('Group', components) && (react_1.default.createElement("span", { className: styles.addLabel, onClick: function () { return onCreate(inputValue); } },
+        createLabel && !(0, ramda_1.prop)('Group', components) && canCreateOption() && (react_1.default.createElement("span", { className: styles.addLabel, onClick: function () { return onCreate(inputValue); } },
             react_1.default.createElement(Add_1.default, { className: styles.addIcon }),
             createLabel))));
 };
 exports.Menu = Menu;
-exports.Menu.propTypes = {
-    children: prop_types_1.default.element.isRequired,
-    selectProps: prop_types_1.default.object.isRequired
-};

package/cjs/DropDownSelector/styles.d.ts

@@ -1,4 +1,4 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"formControl" | "dropdownIndicator" | "control" | "inputLabel" | "valueContainer" | "filledInputRoot" | "filledInputUnderline">;
+export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dropdownIndicator" | "control" | "valueContainer" | "formControl" | "filledInputRoot" | "filledInputUnderline" | "inputLabel">;
 export namespace customStyles {
     function menu(baseStyles: any): any;
     function menuList(baseStyles: any): any;

package/cjs/EntitySelector/EntitySelector.js

@@ -68,6 +68,18 @@ var EntitySelector = function (_a) {
     var styles = (0, styles_1.useStyles)();
     var _g = (0, react_1.useState)(''), inputValue = _g[0], setInputValue = _g[1];
     var entityTypes = (0, react_1.useMemo)(function () { return entityTypesUris.map(function (type) { return (0, mdm_sdk_1.getEntityType)(metadata, type); }).filter(mdm_sdk_1.isAvailableEntityType); }, [entityTypesUris, metadata]);
+    var creatableEntityTypesUris = (0, react_1.useMemo)(function () {
+        return entityTypesUris.filter(function (entityTypeUri) {
+            var entityType = (0, mdm_sdk_1.getEntityType)(metadata, entityTypeUri);
+            return (0, mdm_sdk_1.checkMetadataForCreate)(mode, entityType);
+        });
+    }, [entityTypesUris, mode, metadata]);
+    var canCreateEntity = (0, react_1.useCallback)(function (entityTypeUri) {
+        if (entityTypes.length === 0) {
+            return false;
+        }
+        return creatableEntityTypesUris.includes(entityTypeUri !== null && entityTypeUri !== void 0 ? entityTypeUri : entityTypes[0].uri);
+    }, [creatableEntityTypesUris, entityTypes]);
     var options = (0, react_1.useMemo)(function () { return (__assign(__assign({}, globalSearchRequestOptions), { max: max, sendMasked: isMasked })); }, [globalSearchRequestOptions, isMasked, max]);
     var handleCreate = onCreate
         ? function (value, entityTypeUri) {
@@ -92,8 +104,16 @@ var EntitySelector = function (_a) {
         return ((0, ramda_1.isEmpty)(entityTypes) ? Promise.resolve([]) : (0, mdm_sdk_1.typeAheadSearch)(entityTypes, value, options)).then((0, helpers_1.buildEntityOptions)(entityTypes, onCreate));
     }, [entityTypes, onCreate, options]);
     var currentEntityType = ((0, ramda_1.isEmpty)(entity) ? entityTypes[0] : (0, mdm_sdk_1.getEntityType)(metadata, entity.entityType)) || {};
-    var createLabel = onCreate && ui_i18n_1.default.text("Create ".concat(inputValue ? "\"".concat(inputValue, "\" as ") : '', "new ").concat(currentEntityType.label));
-    var label = ui_i18n_1.default.text("Select ".concat(entityTypes.length === 1 ? "".concat(entityTypes[0].label, " ") : '', "profile"));
+    var createLabel = onCreate &&
+        (inputValue
+            ? ui_i18n_1.default.text('Create "${name}" as new ${entityTypeLabel}', {
+                name: inputValue,
+                entityTypeLabel: currentEntityType.label
+            })
+            : ui_i18n_1.default.text('Create new ${entityTypeLabel}', { entityTypeLabel: currentEntityType.label }));
+    var label = ui_i18n_1.default.text('Select ${entityTypeLabel}profile', {
+        entityTypeLabel: entityTypes.length === 1 ? "".concat(entityTypes[0].label, " ") : ''
+    });
     var isTempEntity = !(0, ramda_1.isEmpty)(entity) && (0, mdm_sdk_1.isTempUri)(entity.entityUri);
     var groupComponent = groupMode ? { Group: Group_1.Group, GroupHeading: EmptyStub_1.EmptyStub } : {};
     var clearComponent = isTempEntity ? { ClearIndicator: ClearIndicator_1.ClearIndicator } : {};
@@ -103,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, 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({ 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 })))));
 };

package/cjs/EntitySelector/components/Group/Group.d.ts

@@ -1,10 +1,18 @@
-export function Group(props: any): React.JSX.Element;
-export namespace Group {
-    namespace propTypes {
-        let selectProps: PropTypes.Validator<object>;
-        let data: PropTypes.Requireable<object>;
-        let children: PropTypes.Requireable<any[]>;
-    }
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
+import { GroupProps } from 'react-select';
+type Props = GroupProps & {
+    data: {
+        label: string;
+        entityType: string;
+        [key: string]: unknown;
+    };
+    selectProps: {
+        inputValue: string;
+        onCreate?: (value: string, entityType: string) => void;
+        canCreateOption: (entityTypeUri: string) => boolean;
+        [key: string]: unknown;
+    };
+    children?: ReactNode;
+};
+export declare const Group: (props: Props) => React.JSX.Element;
+export {};

package/cjs/EntitySelector/components/Group/Group.js

@@ -16,26 +16,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Group = void 0;
 var react_1 = __importDefault(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var react_select_1 = require("react-select");
 var Add_1 = __importDefault(require("@mui/icons-material/Add"));
 var styles_1 = require("./styles");
 var ComponentsGroup = react_select_1.components.Group;
 var Group = function (props) {
-    var _a = props.selectProps, inputValue = _a.inputValue, onCreate = _a.onCreate, data = props.data, children = props.children;
     var styles = (0, styles_1.useStyles)();
+    var _a = props.selectProps, inputValue = _a.inputValue, onCreate = _a.onCreate, canCreateOption = _a.canCreateOption, data = props.data, children = props.children;
     return (react_1.default.createElement(ComponentsGroup, __assign({}, props),
         react_1.default.createElement("div", { className: styles.groupHeading },
             react_1.default.createElement("span", null, data.label),
-            onCreate && (react_1.default.createElement("span", { onClick: function () { return onCreate(inputValue, data.entityType); }, className: styles.addLabel },
+            onCreate && canCreateOption(data.entityType) && (react_1.default.createElement("span", { onClick: function () { return onCreate(inputValue, data.entityType); }, className: styles.addLabel },
                 react_1.default.createElement(Add_1.default, { className: styles.addIcon }),
-                ui_i18n_1.default.text("Create ".concat(inputValue ? "\"".concat(inputValue, "\" as ") : '', "new ").concat(data.label))))),
+                inputValue
+                    ? ui_i18n_1.default.text('Create "${name}" as new ${entityTypeLabel}', {
+                        name: inputValue,
+                        entityTypeLabel: data.label
+                    })
+                    : ui_i18n_1.default.text('Create new ${entityTypeLabel}', { entityTypeLabel: data.label })))),
         children));
 };
 exports.Group = Group;
-exports.Group.propTypes = {
-    selectProps: prop_types_1.default.object.isRequired,
-    data: prop_types_1.default.object,
-    children: prop_types_1.default.array
-};

package/cjs/HOCs/withReactSelectMuiSkin/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menu" | "placeholder" | "option" | "singleValue" | "dropdownIndicator" | "control" | "option--selected" | "option--item" | "clearIndicator" | "groupHeading" | "multiValue" | "noOptionsMessage" | "valueContainer" | "multiValue__label" | "valueContainer--multi">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"menu" | "placeholder" | "option" | "singleValue" | "dropdownIndicator" | "clearIndicator" | "control" | "groupHeading" | "multiValue" | "noOptionsMessage" | "valueContainer" | "multiValue__label" | "option--selected" | "option--item" | "valueContainer--multi">;

package/cjs/MetadataTypesSelector/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "input" | "root" | "inputRoot" | "inputLabel" | "inputText" | "emptyInput" | "disabledInput" | "disabledPointer" | "disabledUnderline" | "popup-opened-icon">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"icon" | "input" | "root" | "inputLabel" | "inputRoot" | "inputText" | "emptyInput" | "disabledInput" | "disabledPointer" | "disabledUnderline" | "popup-opened-icon">;

package/cjs/MultiSelect/styles.d.ts

@@ -2,5 +2,5 @@ type PlaceholderProps = {
     placeholder?: string;
     label?: string;
 };
-export declare const useStyles: (props: PlaceholderProps) => import("@mui/styles").ClassNameMap<"placeholder" | "label" | "dropdownIndicator" | "option--selected" | "clearIndicator">;
+export declare const useStyles: (props: PlaceholderProps) => import("@mui/styles").ClassNameMap<"placeholder" | "label" | "dropdownIndicator" | "clearIndicator" | "option--selected">;
 export {};

package/cjs/ProfileCard/components/ProfileCardPlaceholder/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "info" | "secondaryLabel" | "thirdRow" | "@keyframes keyframes-wave" | "wave" | "avatar">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "info" | "secondaryLabel" | "avatar" | "thirdRow" | "@keyframes keyframes-wave" | "wave">;

package/cjs/ReactSortableTree/components/NodeRendererDefault/NodeRendererDefault.d.ts

@@ -42,9 +42,9 @@ export namespace NodeRendererDefault {
     }
     namespace propTypes {
         export let node: PropTypes.Validator<NonNullable<PropTypes.InferProps<{}>>>;
-        let title_1: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
+        let title_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         export { title_1 as title };
-        let subtitle_1: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.ReactNodeLike>>;
+        let subtitle_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
         export { subtitle_1 as subtitle };
         export let path: PropTypes.Validator<NonNullable<string | number>[]>;
         export let treeIndex: PropTypes.Validator<number>;

package/cjs/RelationEditor/RelationEditor.js

@@ -211,12 +211,10 @@ var RelationEditor = function (_a) {
         setModifiedEntity(newEntity);
     }, [setModifiedEntity, onChangeEntity, mode, metadata]);
     var errorMessage = (0, mdm_sdk_1.getErrorMessage)(error);
-    var getEntityTypesUris = (0, react_1.useCallback)(function () {
-        var _a = config, content = _a.content, contentSecondLevel = _a.contentSecondLevel;
-        if (contentSecondLevel && connection.parentEntityUri) {
-            return contentSecondLevel.entityTypes;
-        }
-        return content.entityTypes;
+    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 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;
@@ -231,7 +229,7 @@ var RelationEditor = function (_a) {
                             react_1.default.createElement(EntitySelector_1.EntitySelector, { className: (0, classnames_1.default)(styles.item, (_b = {},
                                     _b[styles.dense] = errorMessage ||
                                         (connection.entity && (0, mdm_sdk_1.isTempUri)(connection.entity.entityUri)),
-                                    _b)), entity: connection.entity || {}, entityTypesUris: getEntityTypesUris() || [], globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: canCreateNewEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: mdm_sdk_1.relationEditorAttributeTypesSelectionStrategy, isMasked: isMasked })))),
+                                    _b)), entity: connection.entity || {}, entityTypesUris: entityTypesUris, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: canCreateNewEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: mdm_sdk_1.relationEditorAttributeTypesSelectionStrategy, isMasked: isMasked })))),
                 react_1.default.createElement(HiddenAttributesContext_1.HiddenAttributesContext.Provider, { value: emptyHiddenAttributes },
                     react_1.default.createElement(EditModeAttributesList_1.EditModeAttributesList, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute }))))),
         react_1.default.createElement("div", { className: styles.actionButtons },

package/cjs/RelationEditor/RelationEditor.test.js

@@ -53,6 +53,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@testing-library/react");
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var ramda_1 = require("ramda");
 var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
 var LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
@@ -483,6 +484,45 @@ describe('relation editor behaviour', function () {
             }
         });
     }); });
+    it('should hide create button when user lacks metadata permissions', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, inputs;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = (0, ramda_1.assocPath)(['metadata', 'entityTypes', 1, 'access'], ['READ', 'UPDATE', 'INITIATE_CHANGE_REQUEST'], defaultProps);
+                    user = setUp({ props: props }).user;
+                    inputs = react_2.screen.getAllByRole('combobox');
+                    return [4 /*yield*/, user.click(inputs[0])];
+                case 1:
+                    _a.sent();
+                    expect(react_2.screen.queryByText('Create new Address')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    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;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    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);
+                    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*/];
+            }
+        });
+    }); });
     it('should show "create entity" button if mode is suggesting, but main entity uri is not temporary', function () { return __awaiter(void 0, void 0, void 0, function () {
         var props, mdmValues, user, inputs;
         return __generator(this, function (_a) {

package/cjs/features/workflow/AddWorkflowDialog/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"content" | "title" | "footer" | "input" | "select" | "inputRoot" | "asterisk" | "cancelButton" | "inputLabelRoot" | "popoverPaper" | "simpleDropDownSelector">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"content" | "title" | "footer" | "input" | "select" | "asterisk" | "inputRoot" | "cancelButton" | "inputLabelRoot" | "popoverPaper" | "simpleDropDownSelector">;

package/cjs/features/workflow/WorkflowComments/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "title" | "commentsContainer" | "filledInputRoot" | "modeSwitcherWrapper" | "sendButton">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "title" | "filledInputRoot" | "commentsContainer" | "modeSwitcherWrapper" | "sendButton">;

package/features/workflow/AddWorkflowDialog/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"content" | "title" | "footer" | "input" | "select" | "inputRoot" | "asterisk" | "cancelButton" | "inputLabelRoot" | "popoverPaper" | "simpleDropDownSelector">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"content" | "title" | "footer" | "input" | "select" | "asterisk" | "inputRoot" | "cancelButton" | "inputLabelRoot" | "popoverPaper" | "simpleDropDownSelector">;

package/features/workflow/WorkflowComments/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "title" | "commentsContainer" | "filledInputRoot" | "modeSwitcherWrapper" | "sendButton">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "title" | "filledInputRoot" | "commentsContainer" | "modeSwitcherWrapper" | "sendButton">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2183",
+  "version": "1.4.2184",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",