@reltio/components 1.4.1919 → 1.4.1921

package/cjs/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.js

@@ -75,6 +75,7 @@ var TextFieldWithMentions = function (_a) {
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions")] = styles.mentionsSuggestions,
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__list")] = styles.mentionsSuggestionsList,
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__item")] = styles.mentionsSuggestionsItem,
+                _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__item--focused")] = styles.mentionsSuggestionsItemFocused,
                 _b) }),
             react_1.default.createElement(react_mentions_1.Mention, { trigger: "+", data: users.map(function (_a) {
                     var username = _a.username;

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

@@ -1,5 +1,5 @@
 type StylesProps = {
     placeholder?: string;
 };
-export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"root" | "mentionsControl" | "mentionsHighlighter" | "mentionsInput" | "mentionsSuggestions" | "mentionsSuggestionsList" | "mentionsSuggestionsItem" | "mention">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"root" | "mentionsControl" | "mentionsHighlighter" | "mentionsInput" | "mentionsSuggestions" | "mentionsSuggestionsList" | "mentionsSuggestionsItem" | "mentionsSuggestionsItemFocused" | "mention">;
 export {};

package/cjs/CollaborationItem/components/TextFieldWithMentions/styles.js

@@ -45,10 +45,13 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         color: theme.palette.text.primary,
         fontSize: '13px',
         transition: theme.transitions.create(['background-color']),
-        '&:hover, &--focused': {
+        '&:hover': {
             backgroundColor: 'rgba(0,0,0,0.04)'
         }
     },
+    mentionsSuggestionsItemFocused: {
+        backgroundColor: 'rgba(0,0,0,0.04)'
+    },
     mention: {
         position: 'relative',
         zIndex: 1,

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

@@ -6,6 +6,7 @@ type Props = {
     innerRef: ForwardedRef<HTMLLIElement>;
     selectOption: (option: Partial<EntityOptionType>) => void;
     data: EntityOptionType;
+    isFocused: boolean;
 };
-export declare const EntityOption: ({ innerRef, innerProps, selectOption, data }: Props) => JSX.Element;
+export declare const EntityOption: ({ innerRef, innerProps, selectOption, data, isFocused }: Props) => JSX.Element;
 export {};

package/cjs/EntitySelector/components/EntityOption/EntityOption.js

@@ -17,16 +17,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityOption = void 0;
 var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
 var MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
 var EntityTypeIcon_1 = require("../../../EntityTypeIcon");
 var ExpandedValueTooltip_1 = require("../../../ExpandedValueTooltip");
 var styles_1 = require("./styles");
 var EntityOption = function (_a) {
-    var innerRef = _a.innerRef, innerProps = _a.innerProps, selectOption = _a.selectOption, data = _a.data;
+    var innerRef = _a.innerRef, innerProps = _a.innerProps, selectOption = _a.selectOption, data = _a.data, isFocused = _a.isFocused;
     var styles = (0, styles_1.useStyles)();
     var uri = data.uri, entityType = data.entityType, label = data.label, secondaryLabel = data.secondaryLabel;
     if (uri !== '') {
-        return (react_1.default.createElement(MenuItem_1.default, __assign({ className: styles.entityContainer, ref: innerRef, key: uri, onClick: function () { return selectOption({ label: label, uri: uri, entityType: entityType }); } }, innerProps),
+        return (react_1.default.createElement(MenuItem_1.default, __assign({ className: (0, classnames_1.default)(styles.entityContainer, { focused: isFocused }), ref: innerRef, key: uri, onClick: function () { return selectOption({ label: label, uri: uri, entityType: entityType }); } }, innerProps),
             react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, { className: styles.entityAvatar, entityType: entityType }),
             react_1.default.createElement(ExpandedValueTooltip_1.ExpandedValueTooltip, { value: "".concat(label).concat(secondaryLabel ? ', ' + secondaryLabel : '') },
                 react_1.default.createElement("span", { className: styles.entityLabel },

package/cjs/EntitySelector/components/EntityOption/styles.js

@@ -8,7 +8,10 @@ exports.useStyles = (0, styles_1.makeStyles)({
         alignItems: 'center',
         height: '32px',
         minHeight: '32px',
-        padding: 0
+        padding: 0,
+        '&.focused': {
+            backgroundColor: 'rgba(0,0,0,0.04)'
+        }
     },
     entityLabel: {
         height: '15px',

package/cjs/NumberEditor/NumberEditor.test.js

@@ -1,91 +1,187 @@
 "use strict";
+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 };
+    }
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var enzyme_1 = require("enzyme");
-var react_number_format_1 = __importDefault(require("react-number-format"));
 var react_1 = __importDefault(require("react"));
-var TextEditor_1 = require("../TextEditor");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var NumberEditor_1 = require("./NumberEditor");
 describe('NumberEditor', function () {
-    it('should render TextEditor with NumberFormat as input', function () {
-        var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(NumberEditor_1.NumberEditor, null));
-        expect(wrapper.find(TextEditor_1.TextEditor)).toHaveLength(1);
-        expect(wrapper.find(react_number_format_1.default)).toHaveLength(1);
+    var defaultProps = { value: undefined, onChange: jest.fn() };
+    var setUp = function (_a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? {} : _c;
+        var user = user_event_1.default.setup();
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(NumberEditor_1.NumberEditor, __assign({}, defaultProps, props))));
+    };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should render input', function () {
+        setUp();
+        expect(react_2.screen.getByRole('textbox')).toBeInTheDocument();
     });
     it('should show correct value if it is 0', function () {
-        var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(NumberEditor_1.NumberEditor, { value: 0 }));
-        expect(wrapper.find('input').prop('value')).toBe('0');
+        setUp({ props: { value: 0 } });
+        expect(react_2.screen.getByRole('textbox')).toHaveValue('0');
     });
     describe('single mode', function () {
         it('should format value', function () {
-            var format = {
-                prefix: '<',
-                suffix: '>',
-                thousandSeparator: ',',
-                decimalSeparator: '_'
+            var props = {
+                value: '-1234.5',
+                format: {
+                    prefix: '<',
+                    suffix: '>',
+                    thousandSeparator: ',',
+                    decimalSeparator: '_'
+                }
             };
-            var value = '-1234.5', formattedValue = '-<1,234_5>';
-            var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(NumberEditor_1.NumberEditor, { format: format, value: value }));
-            expect(wrapper.find('input').prop('value')).toBe(formattedValue);
-        });
-        it('should call props.onChange with actual value', function () {
-            var value = '<-123,456abc_78>', onChange = jest.fn();
-            var format = {
-                prefix: '<',
-                suffix: '>',
-                thousandSeparator: ',',
-                decimalSeparator: '_'
-            };
-            var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(NumberEditor_1.NumberEditor, { format: format, onChange: onChange }));
-            var input = wrapper.find('input');
-            input.simulate('change', { target: { value: value, focus: function () { } } });
-            input.simulate('blur');
-            expect(onChange).toBeCalledWith('-123456.78');
-        });
-        it('should discard fraction part if integer', function () {
-            var value = '123.45', onChange = jest.fn();
-            var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(NumberEditor_1.NumberEditor, { integer: true, onChange: onChange }));
-            var input = wrapper.find('input');
-            input.simulate('change', { target: { value: value, focus: function () { } } });
-            input.simulate('blur');
-            expect(onChange).toBeCalledWith('123');
+            setUp({ props: props });
+            expect(react_2.screen.getByRole('textbox')).toHaveValue('-<1,234_5>');
         });
+        it('should call props.onChange with actual value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = {
+                            format: {
+                                prefix: '<',
+                                suffix: '>',
+                                thousandSeparator: ',',
+                                decimalSeparator: '_'
+                            }
+                        };
+                        user = setUp({ props: props }).user;
+                        return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), '<-123,456abc_78>{enter}')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toBeCalledWith('-123456.78');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should discard fraction part if integer', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = {
+                            value: 123.45,
+                            integer: true
+                        };
+                        user = setUp({ props: props }).user;
+                        return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), '{enter}')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toBeCalledWith('123');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
     describe('multiple mode', function () {
         it('should format value', function () {
-            var format = {
-                prefix: '<',
-                suffix: '>',
-                thousandSeparator: ',',
-                decimalSeparator: '_'
+            var props = {
+                value: '-1234.5',
+                multiple: true,
+                format: {
+                    prefix: '<',
+                    suffix: '>',
+                    thousandSeparator: ',',
+                    decimalSeparator: '_'
+                }
             };
-            var value = '-1234.5', formattedValue = '<-1,234_5>';
-            var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(NumberEditor_1.NumberEditor, { multiple: true, format: format, value: [value] }));
-            expect(wrapper.text()).toBe(formattedValue);
-        });
-        it('should call props.onChange with actual value', function () {
-            var onChange = jest.fn();
-            var value = '<-123,456abc_78>';
-            var format = {
-                prefix: '<',
-                suffix: '>',
-                thousandSeparator: ',',
-                decimalSeparator: '_'
-            };
-            var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(NumberEditor_1.NumberEditor, { multiple: true, format: format, onChange: onChange }));
-            wrapper.find('input').simulate('change', { target: { value: value, focus: function () { } } });
-            wrapper.find('input').simulate('keyPress', { key: 'Enter' });
-            expect(onChange).toBeCalledWith(['-123456.78']);
-        });
-        it('should discard fraction part if integer', function () {
-            var value = '123.45';
-            var onChange = jest.fn();
-            var wrapper = (0, enzyme_1.mount)(react_1.default.createElement(NumberEditor_1.NumberEditor, { multiple: true, integer: true, onChange: onChange }));
-            wrapper.find('input').simulate('change', { target: { value: value, focus: function () { } } });
-            wrapper.find('input').simulate('keyPress', { key: 'Enter' });
-            expect(onChange).toBeCalledWith(['123']);
+            setUp({ props: props });
+            expect(react_2.screen.getByText('<-1,234_5>')).toBeInTheDocument();
         });
+        it('should call props.onChange with actual value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = {
+                            multiple: true,
+                            format: {
+                                prefix: '<',
+                                suffix: '>',
+                                thousandSeparator: ',',
+                                decimalSeparator: '_'
+                            }
+                        };
+                        user = setUp({ props: props }).user;
+                        return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), '<-123,456abc_78>{enter}')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toBeCalledWith(['-123456.78']);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should discard fraction part if integer', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = {
+                            multiple: true,
+                            integer: true
+                        };
+                        user = setUp({ props: props }).user;
+                        return [4 /*yield*/, user.type(react_2.screen.getByRole('textbox'), '123.45{enter}')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toBeCalledWith(['12345']);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
 });

package/esm/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.js

@@ -46,6 +46,7 @@ export var TextFieldWithMentions = function (_a) {
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions")] = styles.mentionsSuggestions,
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__list")] = styles.mentionsSuggestionsList,
                 _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__item")] = styles.mentionsSuggestionsItem,
+                _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__item--focused")] = styles.mentionsSuggestionsItemFocused,
                 _b) }),
             React.createElement(Mention, { trigger: "+", data: users.map(function (_a) {
                     var username = _a.username;

package/esm/CollaborationItem/components/TextFieldWithMentions/styles.d.ts

@@ -1,5 +1,5 @@
 type StylesProps = {
     placeholder?: string;
 };
-export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"root" | "mentionsControl" | "mentionsHighlighter" | "mentionsInput" | "mentionsSuggestions" | "mentionsSuggestionsList" | "mentionsSuggestionsItem" | "mention">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"root" | "mentionsControl" | "mentionsHighlighter" | "mentionsInput" | "mentionsSuggestions" | "mentionsSuggestionsList" | "mentionsSuggestionsItem" | "mentionsSuggestionsItemFocused" | "mention">;
 export {};

package/esm/CollaborationItem/components/TextFieldWithMentions/styles.js

@@ -42,10 +42,13 @@ export var useStyles = makeStyles(function (theme) { return ({
         color: theme.palette.text.primary,
         fontSize: '13px',
         transition: theme.transitions.create(['background-color']),
-        '&:hover, &--focused': {
+        '&:hover': {
             backgroundColor: 'rgba(0,0,0,0.04)'
         }
     },
+    mentionsSuggestionsItemFocused: {
+        backgroundColor: 'rgba(0,0,0,0.04)'
+    },
     mention: {
         position: 'relative',
         zIndex: 1,

package/esm/EntitySelector/components/EntityOption/EntityOption.d.ts

@@ -6,6 +6,7 @@ type Props = {
     innerRef: ForwardedRef<HTMLLIElement>;
     selectOption: (option: Partial<EntityOptionType>) => void;
     data: EntityOptionType;
+    isFocused: boolean;
 };
-export declare const EntityOption: ({ innerRef, innerProps, selectOption, data }: Props) => JSX.Element;
+export declare const EntityOption: ({ innerRef, innerProps, selectOption, data, isFocused }: Props) => JSX.Element;
 export {};

package/esm/EntitySelector/components/EntityOption/EntityOption.js

@@ -11,16 +11,17 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 import i18n from 'ui-i18n';
+import classNames from 'classnames';
 import MenuItem from '@mui/material/MenuItem';
 import { EntityTypeIcon } from '../../../EntityTypeIcon';
 import { ExpandedValueTooltip } from '../../../ExpandedValueTooltip';
 import { useStyles } from './styles';
 export var EntityOption = function (_a) {
-    var innerRef = _a.innerRef, innerProps = _a.innerProps, selectOption = _a.selectOption, data = _a.data;
+    var innerRef = _a.innerRef, innerProps = _a.innerProps, selectOption = _a.selectOption, data = _a.data, isFocused = _a.isFocused;
     var styles = useStyles();
     var uri = data.uri, entityType = data.entityType, label = data.label, secondaryLabel = data.secondaryLabel;
     if (uri !== '') {
-        return (React.createElement(MenuItem, __assign({ className: styles.entityContainer, ref: innerRef, key: uri, onClick: function () { return selectOption({ label: label, uri: uri, entityType: entityType }); } }, innerProps),
+        return (React.createElement(MenuItem, __assign({ className: classNames(styles.entityContainer, { focused: isFocused }), ref: innerRef, key: uri, onClick: function () { return selectOption({ label: label, uri: uri, entityType: entityType }); } }, innerProps),
             React.createElement(EntityTypeIcon, { className: styles.entityAvatar, entityType: entityType }),
             React.createElement(ExpandedValueTooltip, { value: "".concat(label).concat(secondaryLabel ? ', ' + secondaryLabel : '') },
                 React.createElement("span", { className: styles.entityLabel },

package/esm/EntitySelector/components/EntityOption/styles.js

@@ -5,7 +5,10 @@ export var useStyles = makeStyles({
         alignItems: 'center',
         height: '32px',
         minHeight: '32px',
-        padding: 0
+        padding: 0,
+        '&.focused': {
+            backgroundColor: 'rgba(0,0,0,0.04)'
+        }
     },
     entityLabel: {
         height: '15px',

package/esm/NumberEditor/NumberEditor.test.js

@@ -1,86 +1,182 @@
-import { mount } from 'enzyme';
-import NumberFormat from 'react-number-format';
+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 { TextEditor } from '../TextEditor';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { NumberEditor } from './NumberEditor';
 describe('NumberEditor', function () {
-    it('should render TextEditor with NumberFormat as input', function () {
-        var wrapper = mount(React.createElement(NumberEditor, null));
-        expect(wrapper.find(TextEditor)).toHaveLength(1);
-        expect(wrapper.find(NumberFormat)).toHaveLength(1);
+    var defaultProps = { value: undefined, onChange: jest.fn() };
+    var setUp = function (_a) {
+        var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? {} : _c;
+        var user = userEvent.setup();
+        return __assign({ user: user }, render(React.createElement(NumberEditor, __assign({}, defaultProps, props))));
+    };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should render input', function () {
+        setUp();
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
     });
     it('should show correct value if it is 0', function () {
-        var wrapper = mount(React.createElement(NumberEditor, { value: 0 }));
-        expect(wrapper.find('input').prop('value')).toBe('0');
+        setUp({ props: { value: 0 } });
+        expect(screen.getByRole('textbox')).toHaveValue('0');
     });
     describe('single mode', function () {
         it('should format value', function () {
-            var format = {
-                prefix: '<',
-                suffix: '>',
-                thousandSeparator: ',',
-                decimalSeparator: '_'
-            };
-            var value = '-1234.5', formattedValue = '-<1,234_5>';
-            var wrapper = mount(React.createElement(NumberEditor, { format: format, value: value }));
-            expect(wrapper.find('input').prop('value')).toBe(formattedValue);
-        });
-        it('should call props.onChange with actual value', function () {
-            var value = '<-123,456abc_78>', onChange = jest.fn();
-            var format = {
-                prefix: '<',
-                suffix: '>',
-                thousandSeparator: ',',
-                decimalSeparator: '_'
+            var props = {
+                value: '-1234.5',
+                format: {
+                    prefix: '<',
+                    suffix: '>',
+                    thousandSeparator: ',',
+                    decimalSeparator: '_'
+                }
             };
-            var wrapper = mount(React.createElement(NumberEditor, { format: format, onChange: onChange }));
-            var input = wrapper.find('input');
-            input.simulate('change', { target: { value: value, focus: function () { } } });
-            input.simulate('blur');
-            expect(onChange).toBeCalledWith('-123456.78');
-        });
-        it('should discard fraction part if integer', function () {
-            var value = '123.45', onChange = jest.fn();
-            var wrapper = mount(React.createElement(NumberEditor, { integer: true, onChange: onChange }));
-            var input = wrapper.find('input');
-            input.simulate('change', { target: { value: value, focus: function () { } } });
-            input.simulate('blur');
-            expect(onChange).toBeCalledWith('123');
+            setUp({ props: props });
+            expect(screen.getByRole('textbox')).toHaveValue('-<1,234_5>');
         });
+        it('should call props.onChange with actual value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = {
+                            format: {
+                                prefix: '<',
+                                suffix: '>',
+                                thousandSeparator: ',',
+                                decimalSeparator: '_'
+                            }
+                        };
+                        user = setUp({ props: props }).user;
+                        return [4 /*yield*/, user.type(screen.getByRole('textbox'), '<-123,456abc_78>{enter}')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toBeCalledWith('-123456.78');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should discard fraction part if integer', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = {
+                            value: 123.45,
+                            integer: true
+                        };
+                        user = setUp({ props: props }).user;
+                        return [4 /*yield*/, user.type(screen.getByRole('textbox'), '{enter}')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toBeCalledWith('123');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
     describe('multiple mode', function () {
         it('should format value', function () {
-            var format = {
-                prefix: '<',
-                suffix: '>',
-                thousandSeparator: ',',
-                decimalSeparator: '_'
-            };
-            var value = '-1234.5', formattedValue = '<-1,234_5>';
-            var wrapper = mount(React.createElement(NumberEditor, { multiple: true, format: format, value: [value] }));
-            expect(wrapper.text()).toBe(formattedValue);
-        });
-        it('should call props.onChange with actual value', function () {
-            var onChange = jest.fn();
-            var value = '<-123,456abc_78>';
-            var format = {
-                prefix: '<',
-                suffix: '>',
-                thousandSeparator: ',',
-                decimalSeparator: '_'
+            var props = {
+                value: '-1234.5',
+                multiple: true,
+                format: {
+                    prefix: '<',
+                    suffix: '>',
+                    thousandSeparator: ',',
+                    decimalSeparator: '_'
+                }
             };
-            var wrapper = mount(React.createElement(NumberEditor, { multiple: true, format: format, onChange: onChange }));
-            wrapper.find('input').simulate('change', { target: { value: value, focus: function () { } } });
-            wrapper.find('input').simulate('keyPress', { key: 'Enter' });
-            expect(onChange).toBeCalledWith(['-123456.78']);
-        });
-        it('should discard fraction part if integer', function () {
-            var value = '123.45';
-            var onChange = jest.fn();
-            var wrapper = mount(React.createElement(NumberEditor, { multiple: true, integer: true, onChange: onChange }));
-            wrapper.find('input').simulate('change', { target: { value: value, focus: function () { } } });
-            wrapper.find('input').simulate('keyPress', { key: 'Enter' });
-            expect(onChange).toBeCalledWith(['123']);
+            setUp({ props: props });
+            expect(screen.getByText('<-1,234_5>')).toBeInTheDocument();
         });
+        it('should call props.onChange with actual value', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = {
+                            multiple: true,
+                            format: {
+                                prefix: '<',
+                                suffix: '>',
+                                thousandSeparator: ',',
+                                decimalSeparator: '_'
+                            }
+                        };
+                        user = setUp({ props: props }).user;
+                        return [4 /*yield*/, user.type(screen.getByRole('textbox'), '<-123,456abc_78>{enter}')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toBeCalledWith(['-123456.78']);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should discard fraction part if integer', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var props, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        props = {
+                            multiple: true,
+                            integer: true
+                        };
+                        user = setUp({ props: props }).user;
+                        return [4 /*yield*/, user.type(screen.getByRole('textbox'), '123.45{enter}')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toBeCalledWith(['12345']);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1919",
+  "version": "1.4.1921",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -30,7 +30,7 @@
     "react-input-autosize": "^2.2.2",
     "react-lifecycles-compat": "^3.0.4",
     "react-mentions": "4.3.0",
-    "react-number-format": "^4.3.0",
+    "react-number-format": "^4.9.2",
     "react-resizable-panels": "^2.0.20",
     "react-resize-detector": "^4.2.0",
     "react-router-dom": "^6.2.1",