@reltio/components 1.4.2183 → 1.4.2185

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/HierarchyNodeTitle/HierarchyNodeTitle.test.js

@@ -63,7 +63,21 @@ var defaultProps = {
     entityUri: 'entities/123',
     anchorEl: document.createElement('div')
 };
-var defaultMdmValues = { uiPath: 'http://localhost:3000/ui/sokol/', metadata: { entityTypes: [], relationTypes: [] } };
+var getDefaultMetadata = function (masking) {
+    if (masking === void 0) { masking = false; }
+    return ({
+        entityTypes: [
+            {
+                uri: 'configuration/entityTypes/HCP',
+                attributes: [
+                    __assign({ uri: 'configuration/entityTypes/HCP/attributes/FirstName', type: 'String', name: 'FirstName', label: 'First Name' }, (masking && { masking: { regexPattern: '.*' } }))
+                ]
+            }
+        ],
+        relationTypes: []
+    });
+};
+var defaultMdmValues = { uiPath: 'http://localhost:3000/ui/sokol/', metadata: getDefaultMetadata(), showMasking: true };
 var defaultMdmActions = { openEntity: jest.fn() };
 var setUp = function (_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d, _e = _b.mdmActions, mdmActions = _e === void 0 ? defaultMdmActions : _e;
@@ -136,6 +150,9 @@ describe('Hierarchy node title tests', function () {
                         }); })];
                 case 2:
                     _a.sent();
+                    expect(getEntity).toHaveBeenCalledWith('entities/123', {
+                        options: 'sendHidden,addRefAttrUriToCrosswalk'
+                    });
                     within(tooltip).getByAltText('fallback entity avatar');
                     within(tooltip).getByText('perfect entity');
                     within(tooltip).getByText('ID:');
@@ -148,4 +165,69 @@ describe('Hierarchy node title tests', function () {
             }
         });
     }); });
+    it('should pass sendMasked option to getEntity if metadata has masking', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, entityWithMasking;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({ mdmValues: __assign(__assign({}, defaultMdmValues), { metadata: getDefaultMetadata(true) }) }).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Title'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('tooltip')).toBeInTheDocument();
+                    entityWithMasking = {
+                        uri: 'entities/123',
+                        label: '***t entity',
+                        type: 'configuration/entityTypes/HCP'
+                    };
+                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, resolveGetEntity(entityWithMasking)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    expect(getEntity).toHaveBeenCalledWith('entities/123', {
+                        options: 'sendHidden,addRefAttrUriToCrosswalk,sendMasked'
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should not pass sendMasked option to getEntity if metadata has masking but showMasking is false', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp({
+                        mdmValues: __assign(__assign({}, defaultMdmValues), { metadata: getDefaultMetadata(true), showMasking: false })
+                    }).user;
+                    return [4 /*yield*/, user.hover(screen.getByText('Title'))];
+                case 1:
+                    _a.sent();
+                    expect(screen.getByRole('tooltip')).toBeInTheDocument();
+                    return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, resolveGetEntity(entity)];
+                                    case 1:
+                                        _a.sent();
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); })];
+                case 2:
+                    _a.sent();
+                    expect(getEntity).toHaveBeenCalledWith('entities/123', {
+                        options: 'sendHidden,addRefAttrUriToCrosswalk'
+                    });
+                    return [2 /*return*/];
+            }
+        });
+    }); });
 });

package/HierarchyNodeTitle/useEntityDetails.js

@@ -1,20 +1,24 @@
-import { useState, useCallback, useEffect } from 'react';
-import { getEntity, debounce } from '@reltio/mdm-sdk';
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { getEntity, debounce, addGetEntityMaskingOptions } from '@reltio/mdm-sdk';
 import { useSafePromise } from '../hooks/useSafePromise';
+import { useMdmMetadata, useMdmShowMasking } from '../contexts/MdmModuleContext';
 export var useEntityDetails = function (entityUri) {
     var _a = useState(null), entityDetails = _a[0], setEntityDetails = _a[1];
     var _b = useState(false), isLoading = _b[0], setIsLoading = _b[1];
     var safePromise = useSafePromise();
     var cancelRequest = useCallback(function () { return safePromise(Promise.resolve()); }, [safePromise]);
+    var metadata = useMdmMetadata();
+    var showMasking = useMdmShowMasking();
+    var entityOptions = useMemo(function () { return addGetEntityMaskingOptions(metadata, { showMasking: showMasking, showAccess: false }); }, [metadata, showMasking]);
     var showEntityDetails = useCallback(debounce(function () {
         setIsLoading(true);
-        safePromise(getEntity(entityUri))
+        safePromise(getEntity(entityUri, entityOptions))
             .then(setEntityDetails)
             .catch(function (error) {
             console.warn('Failed to load entity', error);
         })
             .finally(function () { return setIsLoading(false); });
-    }, 1000), [entityUri, safePromise]);
+    }, 1000), [entityUri, safePromise, entityOptions]);
     var hideEntityDetails = useCallback(function () {
         cancelRequest();
         showEntityDetails.cancel();

package/HierarchyNodeTitle/useEntityDetails.test.js

@@ -45,12 +45,27 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+import React from 'react';
 import { renderHook, act } from '@testing-library/react-hooks';
 import { getEntity, debounce } from '@reltio/mdm-sdk';
+import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 import { useEntityDetails } from './useEntityDetails';
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getEntity: jest.fn(), debounce: jest.fn() })); });
+var entity = { uri: 'entities/123', type: 'configuration/entityTypes/HCP' };
+var defaultMdmValues = {
+    metadata: {
+        entityTypes: []
+    }
+};
 describe('useEntityDetails', function () {
-    var entity = { uri: 'entities/123', type: 'configuration/entityTypes/HCP' };
+    var setUp = function (_a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? entity.uri : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d;
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(MdmModuleProvider, { values: mdmValues }, children));
+        };
+        return renderHook(useEntityDetails, { initialProps: props, wrapper: Providers });
+    };
     beforeEach(function () {
         getEntity.mockResolvedValue(entity);
         debounce.mockImplementation(function (fn) { return jest.requireActual('@reltio/mdm-sdk').debounce(fn, 10); });
@@ -66,7 +81,7 @@ describe('useEntityDetails', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+                    result = setUp().result;
                     expect(result.current.isLoading).toBe(false);
                     act(function () {
                         result.current.showEntityDetails();
@@ -78,7 +93,7 @@ describe('useEntityDetails', function () {
                     });
                     expect(result.current.isLoading).toBe(true);
                     expect(result.current.entityDetails).toBe(null);
-                    expect(getEntity).toHaveBeenCalledWith(entity.uri);
+                    expect(getEntity).toHaveBeenCalledWith(entity.uri, { options: 'sendHidden,addRefAttrUriToCrosswalk' });
                     return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 return [2 /*return*/, Promise.resolve()];
@@ -97,7 +112,7 @@ describe('useEntityDetails', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+                    result = setUp().result;
                     return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 result.current.showEntityDetails();
@@ -121,7 +136,7 @@ describe('useEntityDetails', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+                    result = setUp().result;
                     act(function () {
                         result.current.showEntityDetails();
                         jest.runAllTimers();
@@ -144,7 +159,7 @@ describe('useEntityDetails', function () {
         });
     }); });
     it('should clear timeout if hideEntityDetails has been called before request started', function () {
-        var result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+        var result = setUp().result;
         act(function () {
             result.current.showEntityDetails();
         });
@@ -167,12 +182,12 @@ describe('useEntityDetails', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+                    result = setUp().result;
                     act(function () {
                         result.current.showEntityDetails();
                         jest.runAllTimers();
                     });
-                    expect(getEntity).toHaveBeenCalledWith('entities/123');
+                    expect(getEntity).toHaveBeenCalledWith('entities/123', { options: 'sendHidden,addRefAttrUriToCrosswalk' });
                     expect(result.current.isLoading).toBe(true);
                     expect(result.current.entityDetails).toBe(null);
                     act(function () {
@@ -201,7 +216,7 @@ describe('useEntityDetails', function () {
                 case 0:
                     warnSpy = jest.spyOn(global.console, 'warn');
                     getEntity.mockRejectedValue({ errorCode: 403, errorMessage: 'Access is denied' });
-                    result = renderHook(useEntityDetails, { initialProps: entity.uri }).result;
+                    result = setUp().result;
                     act(function () {
                         result.current.showEntityDetails();
                         jest.runAllTimers();

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>;