@reltio/components 1.4.1819 → 1.4.1820

package/esm/TimestampEditor/TimestampEditor.js

@@ -0,0 +1,59 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import classnames from 'classnames';
+import { isNil, mergeDeepLeft } from 'ramda';
+import { getLocaleFormat } from '@reltio/mdm-sdk';
+import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { useDateEditor } from '../hooks/useDateEditor';
+import { useStyles } from './styles';
+export var TimestampEditor = function (_a) {
+    var _b;
+    var minDate = _a.minDate, maxDate = _a.maxDate, value = _a.value, label = _a.label, slotProps = _a.slotProps, onChange = _a.onChange, format = _a.format, isCrossedOut = _a.isCrossedOut, otherProps = __rest(_a, ["minDate", "maxDate", "value", "label", "slotProps", "onChange", "format", "isCrossedOut"]);
+    var styles = useStyles();
+    var _c = useDateEditor({ minDate: minDate, maxDate: maxDate, value: value, onChange: onChange }), errorMessage = _c.errorMessage, editorValue = _c.editorValue, editorMaxDate = _c.editorMaxDate, editorMinDate = _c.editorMinDate, onError = _c.onError, handleChange = _c.onChange;
+    var basicSlotProps = {
+        textField: {
+            size: 'small',
+            variant: 'filled',
+            helperText: errorMessage,
+            error: Boolean(errorMessage),
+            InputProps: {
+                classes: {
+                    root: classnames(styles.inputRoot, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b))
+                },
+                disableUnderline: isNil(editorValue)
+            },
+            InputLabelProps: { shrink: !isNil(label) }
+        },
+        popper: { placement: 'bottom-start' },
+        inputAdornment: { position: 'end', className: styles.adornedEnd }
+    };
+    var editorSlotProps = mergeDeepLeft(slotProps, basicSlotProps);
+    return (React.createElement(DateTimePicker, __assign({ format: format || getLocaleFormat(), slotProps: editorSlotProps, views: ['year', 'month', 'day', 'hours', 'minutes', 'seconds'], viewRenderers: {
+            hours: renderTimeViewClock,
+            minutes: renderTimeViewClock,
+            seconds: renderTimeViewClock
+        }, label: label, value: editorValue, minDate: editorMinDate, maxDate: editorMaxDate, onError: onError, onChange: handleChange }, otherProps)));
+};

package/esm/TimestampEditor/TimestampEditor.test.d.ts

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

package/esm/TimestampEditor/TimestampEditor.test.js

@@ -0,0 +1,270 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { TimestampEditor } from './TimestampEditor';
+var defaultProps = { onChange: jest.fn() };
+var setUp = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c;
+    var user = userEvent.setup();
+    var Providers = function (_a) {
+        var children = _a.children;
+        return React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment }, children);
+    };
+    return __assign(__assign({}, render(React.createElement(TimestampEditor, __assign({}, props)), { wrapper: Providers })), { user: user });
+};
+describe('TimestampEditor behaviour', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should work correctly with invalid value', function () {
+        var props = __assign(__assign({}, defaultProps), { value: 'aasdasdasdasdas' });
+        setUp({ props: props });
+        var input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('value', 'MM/DD/YYYY hh:mm:ss aa');
+        screen.getByText('Invalid Date Format');
+    });
+    it('should render editor correctly if value is date', function () {
+        var props = __assign(__assign({}, defaultProps), { value: new Date('2019-03-19T10:20:30') });
+        setUp({ props: props });
+        var input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('value', '03/19/2019 10:20:30 AM');
+    });
+    it('should render editor correctly if value is null', function () {
+        var props = __assign(__assign({}, defaultProps), { value: null });
+        setUp({ props: props });
+        var input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('value', '');
+    });
+    it('should render editor correctly if value is not provided', function () {
+        setUp();
+        var input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('value', '');
+    });
+    it('should render each year in year view', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user, years;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('calendar view is open, switch to year view'))];
+                case 2:
+                    _a.sent();
+                    years = new Array(200).fill(null).map(function (_, idx) { return idx + 1900; });
+                    years.forEach(function (year) { return screen.getByText(year); });
+                    expect(screen.queryByText('1899')).not.toBeInTheDocument();
+                    expect(screen.queryByText('2100')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('validation should work correctly if minDate and maxDate is provided (by select)', 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), { minDate: new Date('1800-01-02T12:00:00'), maxDate: new Date('2200-12-30T12:00:00') });
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('calendar view is open, switch to year view'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('2000'))];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('Jan'))];
+                case 4:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('1'))];
+                case 5:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByRole('textbox'))];
+                case 6:
+                    _a.sent();
+                    expect(screen.queryByText('Date should not be before minimal date')).not.toBeInTheDocument();
+                    expect(props.onChange).toHaveBeenCalledWith(new Date('2000-01-01T00:00:00'));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('validation should work correctly if minDate and maxDate is provided (by type)', 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), { minDate: new Date('1800-01-02T12:00:00'), maxDate: new Date('2200-12-30T12:00:00') });
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '01/02/1800 08:00:00 PM')];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByText('Date should not be before minimal date')).not.toBeInTheDocument();
+                    expect(props.onChange).toHaveBeenCalledWith(new Date('1800-01-02T20:00:00'));
+                    props.onChange.mockClear();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '12/30/2200 00:00:00 AM')];
+                case 2:
+                    _a.sent();
+                    screen.getByText('Date should not be after maximal date');
+                    expect(props.onChange).not.toHaveBeenCalledWith(new Date('2200-12-30T00:00:00'));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('validation should work correctly if minDate and maxDate is provided (by arrows)', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, textbox;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { minDate: new Date('1800-01-02T12:00:00'), maxDate: new Date('2200-12-30T12:00:00') });
+                    user = setUp({ props: props }).user;
+                    textbox = screen.getByRole('textbox');
+                    return [4 /*yield*/, user.type(textbox, '01/02/1800 08:00:00 PM')];
+                case 1:
+                    _a.sent();
+                    props.onChange.mockClear();
+                    return [4 /*yield*/, user.click(textbox)];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.keyboard('{ArrowRight}{ArrowDown}')];
+                case 3:
+                    _a.sent();
+                    screen.getByText('Date should not be before minimal date');
+                    expect(props.onChange).not.toHaveBeenCalled();
+                    return [4 /*yield*/, user.type(textbox, '12/29/2200 09:59:59 PM')];
+                case 4:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(textbox)];
+                case 5:
+                    _a.sent();
+                    return [4 /*yield*/, user.keyboard('{ArrowRight}{ArrowRight}{ArrowRight}{ArrowUp}{ArrowUp}')];
+                case 6:
+                    _a.sent();
+                    expect(screen.queryByText('Date should not be before minimal date')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Date should not be after maximal date')).not.toBeInTheDocument();
+                    expect(props.onChange).toHaveBeenCalledWith(new Date('2200-12-29T23:59:59'));
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('validation should work correctly if minDate and maxDate is not provided', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.click(screen.getByRole('button'))];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByLabelText('calendar view is open, switch to year view'))];
+                case 2:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('2000'))];
+                case 3:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('Jan'))];
+                case 4:
+                    _a.sent();
+                    return [4 /*yield*/, user.click(screen.getByText('1'))];
+                case 5:
+                    _a.sent();
+                    expect(screen.queryByText('Date should not be before minimal date')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '01/01/1900')];
+                case 6:
+                    _a.sent();
+                    expect(screen.queryByText('Date should not be before minimal date')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '12/31/1899')];
+                case 7:
+                    _a.sent();
+                    screen.getByText('Date should not be before minimal date');
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '12/31/9999')];
+                case 8:
+                    _a.sent();
+                    expect(screen.queryByText('Date should not be before minimal date')).not.toBeInTheDocument();
+                    expect(screen.queryByText('Date should not be after maximal date')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('validation should work correctly with initial wrong value', function () {
+        var props = __assign(__assign({}, defaultProps), { value: new Date('1800-10-19T00:00:00'), minDate: new Date('1800-10-20T00:00:00') });
+        setUp({ props: props });
+        screen.getByText('Date should not be before minimal date');
+    });
+    it('should not clear error message after change value if there is not min date and not max date error', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    user = setUp().user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'invalid date')];
+                case 1:
+                    _a.sent();
+                    screen.getByText('Invalid Date Format');
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'invalid date 2')];
+                case 2:
+                    _a.sent();
+                    screen.getByText('Invalid Date Format');
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should use custom format if it is provided', function () {
+        var props = __assign(__assign({}, defaultProps), { value: new Date('2005-10-15T16:20:40'), format: 'DD-MM-YYYY HH:mm:ss' });
+        setUp({ props: props });
+        var input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('value', '15-10-2005 16:20:40');
+        expect(input).toHaveAttribute('placeholder', 'DD-MM-YYYY hh:mm:ss');
+    });
+});

package/esm/TimestampEditor/index.d.ts

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

package/esm/TimestampEditor/index.js

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

package/esm/TypeaheadEditor/TypeaheadEditor.js

@@ -76,10 +76,10 @@ import MenuItem from '@mui/material/MenuItem';
 import Paper from '@mui/material/Paper';
 import { useDidUpdateEffect, useSafePromise } from '../hooks';
 import Popper from '../components/Popper/Popper';
-import { NoResults } from '../components/EmptySearchResult';
+import { EmptySearchResult } from '../EmptySearchResult';
 import { ExpandedValueTooltip } from '../ExpandedValueTooltip';
 import ValueChip from '../components/ValueChip/ValueChip';
-import LoadMoreButton from '../components/commonReactSelectComponents/LoadMoreButton';
+import { ReactSelectLoadMoreButton } from '../ReactSelectLoadMoreButton';
 import { useStyles } from './styles';
 var FETCH_DEBOUNCE_INTERVAL = 300;
 var PAGE_SIZE = 50;
@@ -224,8 +224,8 @@ export var TypeaheadEditor = function (_a) {
             var children = _a.children, _b = _a.containerProps, ref = _b.ref, restContainerProps = __rest(_b, ["ref"]);
             return (React.createElement(Popper, { anchorEl: inputRef.current, open: Boolean(children) || isPlaceholderVisible },
                 React.createElement(Paper, __assign({}, restContainerProps, { ref: ref, square: true, style: { width: prop('clientWidth', inputRef.current) } }),
-                    children || React.createElement(NoResults, { className: styles.suggestionsPlaceholder }),
-                    showMoreButton && !isPlaceholderVisible && (React.createElement(LoadMoreButton, { onClick: handleLoadMoreSuggestions, onMouseDown: function (event) { return event.preventDefault(); }, loading: nextPageIsLoading })))));
+                    children || React.createElement(EmptySearchResult, { className: styles.suggestionsPlaceholder }),
+                    showMoreButton && !isPlaceholderVisible && (React.createElement(ReactSelectLoadMoreButton, { onClick: handleLoadMoreSuggestions, onMouseDown: function (event) { return event.preventDefault(); }, loading: nextPageIsLoading })))));
         }, renderSuggestion: function (suggestion, _a) {
             var isHighlighted = _a.isHighlighted;
             return (React.createElement(MenuItem, { className: styles.suggestionsItem, selected: isHighlighted, component: "div" },

package/esm/components/LogicOperator/LogicOperator.js

@@ -12,8 +12,8 @@ var __assign = (this && this.__assign) || function () {
 import React from 'react';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
-import DropDownEditor from '../editors/DropDownEditor/DropDownEditor';
 import { operatorOptions } from '@reltio/mdm-sdk';
+import { DropDownEditor } from '../../DropDownEditor';
 import useStyles from './styles';
 var LogicOperator = function (_a) {
     var className = _a.className, value = _a.value, onChange = _a.onChange;

package/esm/components/MetadataTypesSelector/SelectMetadataTypesList.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { memo } from 'react';
 import { always } from 'ramda';
 import { AttributeListItem } from '../../AttributeListItem';
-import Highlighter from '../Highlighter/Highlighter';
+import { Highlighter } from '../../Highlighter';
 import VirtualGroupedList from '../VirtualGroupedList/VirtualGroupedList';
 var ITEM_HEIGHT = 32;
 var getItemSize = always(ITEM_HEIGHT);

package/esm/components/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" | "inputRoot" | "root" | "inputLabel" | "inputText" | "emptyInput" | "disabledInput" | "disabledPointer" | "disabledUnderline" | "popup-opened-icon">;

package/esm/components/ModeSwitcherSelect/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"outlined" | "root" | "menuItem" | "currentValue" | "arrowIcon" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"outlined" | "root" | "menuItem" | "arrowIcon" | "currentValue" | "currentValueIcon" | "currentValueText" | "firstMenuItemButton" | "menuItemInner" | "menuItemIcon" | "menuItemLabel" | "menuItemDescription">;

package/esm/components/MultiValueSelector/MultiValueSelector.js

@@ -23,12 +23,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { memo, useCallback, useRef, useMemo } from 'react';
 import { defaultTo, pipe, pluck } from 'ramda';
 import { isEmptyValue } from '@reltio/mdm-sdk';
-import DropdownIndicatorWithIconButton from '../commonReactSelectComponents/DropdownIndicatorWithIconButton';
-import OptionWithCheckIcon from '../commonReactSelectComponents/OptionWithCheckIcon/OptionWithCheckIcon';
-import MenuWithPopper from '../commonReactSelectComponents/MenuWithPopper';
-import MultiValueChip from '../editors/commonComponents/MultiValueChip/MultiValueChip';
-import MultiSelect from '../ReactSelect/MultiSelect';
+import { ReactSelectDropdownIndicatorWithIconButton } from '../../ReactSelectDropdownIndicatorWithIconButton';
+import { ReactSelectOptionWithCheckIcon } from '../../ReactSelectOptionWithCheckIcon';
+import { ReactSelectMenuWithPopper } from '../../ReactSelectMenuWithPopper';
+import { MultiValueChip } from '../../MultiValueChip';
 import { EmptyStub } from '../../core';
+import MultiSelect from '../ReactSelect/MultiSelect';
 import { useStyles, customStyles } from './styles';
 var MultiValueSelector = function (_a) {
     var _b = _a.values, values = _b === void 0 ? [] : _b, onChange = _a.onChange, options = _a.options, fullWidth = _a.fullWidth, _c = _a.TextFieldProps, TextFieldProps = _c === void 0 ? {} : _c;
@@ -38,9 +38,9 @@ var MultiValueSelector = function (_a) {
     var preparedValues = useMemo(function () { return values.map(valueToOption); }, [valueToOption, values]);
     var _d = TextFieldProps.InputProps, InputProps = _d === void 0 ? {} : _d, textFieldClassName = TextFieldProps.className, otherTextFieldProps = __rest(TextFieldProps, ["InputProps", "className"]);
     return (React.createElement(MultiSelect, { value: preparedValues, onChange: pipe(defaultTo([]), pluck('value'), onChange), options: options, TextFieldProps: __assign({ InputProps: __assign({ disableUnderline: isEmptyValue(values) }, InputProps), variant: 'filled', className: textFieldClassName, ref: inputRef }, otherTextFieldProps), components: {
-            DropdownIndicator: DropdownIndicatorWithIconButton,
-            Option: OptionWithCheckIcon,
-            Menu: MenuWithPopper,
+            DropdownIndicator: ReactSelectDropdownIndicatorWithIconButton,
+            Option: ReactSelectOptionWithCheckIcon,
+            Menu: ReactSelectMenuWithPopper,
             MultiValue: MultiValueChip,
             IndicatorSeparator: EmptyStub
         }, inputRef: inputRef, classes: styles, styles: __assign(__assign({}, customStyles), { container: function (base) { return (__assign(__assign({}, base), (fullWidth ? { width: '100%' } : {}))); } }), menuPortalTarget: document.body }));

package/esm/components/PotentialMatchReviewCard/PotentialMatchReviewCard.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import FlagIcon from '@mui/icons-material/Flag';
-import CollapseButton from '../CollapseButton/CollapseButton';
+import { CollapseButton } from '../../CollapseButton';
 import PMIcon from '../../icons/PmIcon';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';

package/esm/components/ProfileBand/ProfileBand.js

@@ -5,8 +5,8 @@ import Typography from '@mui/material/Typography';
 import Tooltip from '@mui/material/Tooltip';
 import i18n from 'ui-i18n';
 import { getLabel, isActiveObject, getBusinessCardAttributesText, getEntityId, isTempUri } from '@reltio/mdm-sdk';
-import EntityAvatar from '../EntityAvatar/EntityAvatar';
-import EntityTypeBadge from '../EntityTypeBadge/EntityTypeBadge';
+import { EntityAvatar } from '../../EntityAvatar';
+import { EntityTypeBadge } from '../../EntityTypeBadge';
 import { useMdmMetadata, useMdmShowEntityId } from '../../contexts';
 import useStyles from './styles';
 var ProfileBand = function (_a) {

package/esm/components/ProfileCard/ProfileCardContent/ProfileCardContent.js

@@ -2,10 +2,10 @@ import React, { useCallback } from 'react';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
 import { getEntityId, getEntityUriForLink, getLabel } from '@reltio/mdm-sdk';
-import EntityAvatar from '../../EntityAvatar/EntityAvatar';
-import EntityUriLink from '../../EntityUriLink/EntityUriLink';
+import { EntityAvatar } from '../../../EntityAvatar';
+import { EntityUriLink } from '../../../EntityUriLink';
 import { ExpandedValueTooltip } from '../../../ExpandedValueTooltip';
-import EntityTypeBadge from '../../EntityTypeBadge/EntityTypeBadge';
+import { EntityTypeBadge } from '../../../EntityTypeBadge';
 import useStyles from './styles';
 export var ProfileCardContent = function (_a) {
     var entity = _a.entity, _b = _a.classes, classes = _b === void 0 ? {} : _b;

package/esm/components/ProfilesList/ProfilesList.js

@@ -2,9 +2,9 @@ import React, { useRef } from 'react';
 import classnames from 'classnames';
 import { prop } from 'ramda';
 import { getBusinessCardAttributesText, getEntityId, getEntityUriForLink, getLabel, isActiveObject } from '@reltio/mdm-sdk';
-import EntityTypeBadge from '../EntityTypeBadge/EntityTypeBadge';
-import EntityUriLink from '../EntityUriLink/EntityUriLink';
-import EntityAvatar from '../EntityAvatar/EntityAvatar';
+import { EntityTypeBadge } from '../../EntityTypeBadge';
+import { EntityUriLink } from '../../EntityUriLink';
+import { EntityAvatar } from '../../EntityAvatar';
 import { ImportModes } from '../ImportButton/ImportButton';
 import { clearScrollTimer, isScrolledIntoView, scroll } from './helpers';
 import { useDidUpdateEffect } from '../../hooks';

package/esm/components/RelationEditor/RelationEditor.js

@@ -16,8 +16,8 @@ import { always, assoc, concat, differenceWith, equals, forEach, map, path, pick
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import { createTemporaryEntity, findRelatedTemporaryEntities, getActivenessAttributes, getCreatableAttributeTypes, getEntityType, getErrorMessage, getErrorId, omitMarks, relationEditorAttributeTypesSelectionStrategy, validateConnection, updateConnectionEntityLabel, isTempUri, isEmptyValue, getRelationAttributesList, getDefaultRelationTypeObject, getInOutRelations, isSuggestMode, isAttributeTypeError, getRelationUriFromConnection, getRelationEditorActiveError, getRelationAttributesFromConnection, getEntityUriFromConnection, evaluateErrorPath, AttributeValuePathItemType, getAllRelationEditorActiveErrors } from '@reltio/mdm-sdk';
-import ConnectionRelationTypeSelector from '../ConnectionRelationTypeSelector/ConnectionRelationTypeSelector';
-import ErrorWrapper from '../ErrorWrapper/ErrorWrapper';
+import { ConnectionRelationTypeSelector } from '../../ConnectionRelationTypeSelector';
+import { ErrorWrapper } from '../../ErrorWrapper';
 import { EntitySelector } from '../../EntitySelector';
 import { EditModeAttributesList } from '../../EditModeAttributesList';
 import { withContext } from '../../HOCs';

package/esm/components/ReltioMap/MapControls/TopRightMapControls/TopRightMapControls.d.ts

@@ -36,11 +36,11 @@ export declare const ButtonWithTooltip: React.ForwardRefExoticComponent<Pick<{
     touchRippleRef?: React.Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions>;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: React.Ref<HTMLButtonElement>;
-}, "color" | "size" | "disabled" | "tabIndex" | "children" | "sx" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "href" | "fullWidth" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "disableElevation" | "endIcon" | "startIcon">, "color" | "translate" | "hidden" | "size" | "disabled" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | keyof {
+}, "color" | "size" | "disabled" | "tabIndex" | "children" | "sx" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "href" | "variant" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "disableElevation" | "endIcon" | "startIcon">, "color" | "translate" | "hidden" | "size" | "disabled" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | keyof {
     tooltipTitle?: React.ReactNode;
     tooltipPlacement?: "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start";
     showForDisabled?: boolean;
-} | "key" | "sx" | "name" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "type" | "href" | "fullWidth" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "disableElevation" | "endIcon" | "startIcon"> & React.RefAttributes<HTMLElement>>;
+} | "key" | "sx" | "name" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "type" | "href" | "variant" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "disableElevation" | "endIcon" | "startIcon"> & React.RefAttributes<HTMLElement>>;
 type Props = {
     onDrawingModeChanged: (value: DrawingMode | null) => void;
     drawingMode: DrawingMode | null;

package/esm/components/ScreenProfileBand/ScreenProfileBand.js

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { CollaborationObjectTypes, createRelatedObjectUris, getEntityUriForLink, getProfileBandObjectIdsForCollaboration } from '@reltio/mdm-sdk';
 import ProfileBand from '../ProfileBand/ProfileBand';
 import { ProfileBandNavigation } from '../ProfileBandNavigation';
-import CommentsContainer from '../CommentsContainer/CommentsContainer';
+import { CommentsContainer } from '../../CommentsContainer';
 import { CollaborationContextProvider } from '../../contexts';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../../constants';
 import { useCollaboration } from '../../hooks';

package/esm/components/SearchHighlighter/SearchHighlighter.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { SearchValueContext } from '../../contexts';
-import Highlighter from '../Highlighter/Highlighter';
+import { Highlighter } from '../../Highlighter';
 import { useStyles } from './styles';
 var SearchHighlighter = function (_a) {
     var text = _a.text;

package/esm/components/SelectAttributesList/SelectAttributesList.js

@@ -24,7 +24,7 @@ import React, { memo } from 'react';
 import ListItem from '@mui/material/ListItem';
 import { AttributeListItem } from '../../AttributeListItem';
 import VirtualGroupedList from '../VirtualGroupedList/VirtualGroupedList';
-import Highlighter from '../Highlighter/Highlighter';
+import { Highlighter } from '../../Highlighter';
 import { AttributeGroupIcon } from '../../AttributeGroupIcon';
 import { useMdmMetadata } from '../../contexts';
 import { checkAttributeIncludes } from '../../helpers/attributesView';

package/esm/components/SelectorWithOnlyOptionAutoSelect/SelectorWithOnlyOptionAutoSelect.js

@@ -10,8 +10,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
+import { DropDownEditor } from '../../DropDownEditor';
 import { useStyles } from './styles';
-import DropDownEditor from '../editors/DropDownEditor/DropDownEditor';
 var SelectorWithOnlyOptionAutoSelect = function (_a) {
     var value = _a.value, onChange = _a.onChange, options = _a.options, _b = _a.classes, classes = _b === void 0 ? {} : _b, emptyLabel = _a.emptyLabel;
     var styles = useStyles();

package/esm/components/SidePanel/SidePanel.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useStyles } from './styles';
-import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
-import EmptyState, { EMPTY_STATE_ICONS, EMPTY_STATE_VARIANTS } from '../EmptyState/EmptyState';
 import i18n from 'ui-i18n';
+import { ErrorBoundary } from '../../ErrorBoundary';
+import { EMPTY_STATE_ICONS, EMPTY_STATE_VARIANTS, EmptyState } from '../../EmptyState';
+import { useStyles } from './styles';
 export var SidePanel = function (_a) {
     var width = _a.width, open = _a.open, children = _a.children;
     var styles = useStyles();

package/esm/components/SimpleDropDownSelector/SimpleDropDownSelector.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { memo } from 'react';
-import DropDownSelector from '../DropDownSelector/DropDownSelector';
+import { DropDownSelector } from '../../DropDownSelector';
 import DropDownValue from './DropDownValue';
 import DropDownPlaceholder from './DropDownPlaceholder';
 var components = {

package/esm/components/UploadImageDialog/ImageByUrlField/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"input" | "errorMessage" | "root" | "inputRoot" | "paper">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"input" | "errorMessage" | "inputRoot" | "root" | "paper">;