@reltio/components 1.4.1819 → 1.4.1821

package/esm/DateEditor/DateEditor.test.js

@@ -0,0 +1,374 @@
+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 { DateEditor } from './DateEditor';
+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(DateEditor, __assign({}, props)), { wrapper: Providers })), { user: user });
+};
+describe('DateEditor 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');
+        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-19') });
+        setUp({ props: props });
+        var input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('value', '03/19/2019');
+    });
+    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('validation should work correctly if minDate and maxDate is provided and they are not included in the popup limitations (by select)', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, years;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { minDate: new Date('1800-01-01'), maxDate: new Date('2200-12-31') });
+                    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();
+                    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 [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();
+                    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 and they are not included in the popup limitations (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-01'), maxDate: new Date('2200-12-31') });
+                    user = setUp({ props: props }).user;
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '01/01/1800')];
+                case 1:
+                    _a.sent();
+                    expect(screen.queryByText('Date should not be before minimal date')).not.toBeInTheDocument();
+                    expect(props.onChange).toHaveBeenCalledWith(new Date('1800-01-01T00:00:00'));
+                    props.onChange.mockClear();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '12/31/1799')];
+                case 2:
+                    _a.sent();
+                    screen.getByText('Date should not be before minimal date');
+                    props.onChange.mockClear();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '12/31/1798')];
+                case 3:
+                    _a.sent();
+                    screen.getByText('Date should not be before minimal date');
+                    expect(props.onChange).not.toHaveBeenCalled();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '12/31/2200')];
+                case 4:
+                    _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-31T00:00:00'));
+                    props.onChange.mockClear();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '01/01/2201')];
+                case 5:
+                    _a.sent();
+                    screen.getByText('Date should not be after maximal date');
+                    props.onChange.mockClear();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '01/01/2202')];
+                case 6:
+                    _a.sent();
+                    screen.getByText('Date should not be after maximal date');
+                    expect(props.onChange).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render years correctly in year view if minDate and maxDate are included in limitations', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var props, user, years;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    props = __assign(__assign({}, defaultProps), { minDate: new Date('1980-01-01'), maxDate: new Date('2029-12-31') });
+                    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();
+                    years = new Array(50).fill(null).map(function (_, idx) { return idx + 1980; });
+                    years.forEach(function (year) { return screen.getByText(year); });
+                    expect(screen.queryByText('1979')).not.toBeInTheDocument();
+                    expect(screen.queryByText('2030')).not.toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('validation should work correctly if minDate and maxDate is provided and they are included in the popup limitations (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('1980-01-01'), maxDate: new Date('2029-12-31') });
+                    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();
+                    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 and they are included in the popup limitations (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('1980-01-01'), maxDate: new Date('2029-12-31') });
+                    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.type(screen.getByRole('textbox'), '01/01/1980')];
+                case 3:
+                    _a.sent();
+                    expect(screen.queryByText('Date should not be before minimal date')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '12/31/1979')];
+                case 4:
+                    _a.sent();
+                    screen.getByText('Date should not be before minimal date');
+                    props.onChange.mockClear();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '12/31/1978')];
+                case 5:
+                    _a.sent();
+                    screen.getByText('Date should not be before minimal date');
+                    expect(props.onChange).not.toHaveBeenCalled();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '12/31/2029')];
+                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('2029-12-31T00:00:00'));
+                    props.onChange.mockClear();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '01/01/2030')];
+                case 7:
+                    _a.sent();
+                    screen.getByText('Date should not be after maximal date');
+                    props.onChange.mockClear();
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '01/01/2031')];
+                case 8:
+                    _a.sent();
+                    screen.getByText('Date should not be after maximal date');
+                    expect(props.onChange).not.toHaveBeenCalled();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render years correctly in year view if minDate and maxDate are not included in limitations', 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 not provided (by select)', 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 [2 /*return*/];
+            }
+        });
+    }); });
+    it('validation should work correctly if minDate and maxDate is not provided (by type)', 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'), '01/01/1900')];
+                case 1:
+                    _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 2:
+                    _a.sent();
+                    screen.getByText('Date should not be before minimal date');
+                    return [4 /*yield*/, user.type(screen.getByRole('textbox'), '12/31/9999')];
+                case 3:
+                    _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-19'), minDate: new Date('1800-10-20') });
+        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 clear time for minDate and value props', function () {
+        var props = __assign(__assign({}, defaultProps), { minDate: new Date('2000-02-01T15:00:00'), value: new Date('2000-02-01T10:00:00') });
+        setUp({ props: props });
+        expect(screen.queryByText('Date should not be before minimal date')).not.toBeInTheDocument();
+    });
+    it('should clear time for maxDate and value props', function () {
+        var props = __assign(__assign({}, defaultProps), { maxDate: new Date('2000-02-01T10:00:00'), value: new Date('2000-02-01T15:00:00') });
+        setUp({ props: props });
+        expect(screen.queryByText('Date should not be after maximal date')).not.toBeInTheDocument();
+    });
+    it('should use custom format if it is provided', function () {
+        var props = __assign(__assign({}, defaultProps), { value: new Date('2000-10-15'), format: 'YYYY-MM-DD' });
+        setUp({ props: props });
+        var input = screen.getByRole('textbox');
+        expect(input).toHaveAttribute('value', '2000-10-15');
+        expect(input).toHaveAttribute('placeholder', 'YYYY-MM-DD');
+    });
+});

package/esm/DateEditor/index.d.ts

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

package/esm/DateEditor/index.js

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

package/esm/DateIntervalSelector/DateIntervalSelector.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    interval: [number, string];
+    onChange: ([number, string]: [any, any]) => void;
+    onFocus?: () => void;
+};
+export declare const DateIntervalSelector: ({ interval: [value, unit], onChange, onFocus }: Props) => JSX.Element;
+export {};

package/esm/DateIntervalSelector/DateIntervalSelector.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { pipe } from 'ramda';
+import { getIntervalUnitLabel } from '@reltio/mdm-sdk';
+import TextField from '@mui/material/TextField';
+import { capitalize } from '@mui/material/utils';
+import { getValue } from '../core/utils';
+import SimpleDropDownSelector from '../components/SimpleDropDownSelector/SimpleDropDownSelector';
+import { useStyles } from './styles';
+var periods = ['minutes', 'hours', 'days', 'weeks', 'months', 'years'];
+export var DateIntervalSelector = function (_a) {
+    var _b = _a.interval, value = _b[0], unit = _b[1], onChange = _a.onChange, onFocus = _a.onFocus;
+    var styles = useStyles();
+    var getIntervalFromValue = function (newValue) { return [newValue, unit]; };
+    var getIntervalFromUnit = function (_a) {
+        var newUnit = _a.value;
+        return [value, newUnit];
+    };
+    var onNumberChange = pipe(getValue, parseInt, getIntervalFromValue, onChange);
+    var onUnitChange = pipe(getIntervalFromUnit, onChange);
+    return (React.createElement("div", { className: styles.root },
+        React.createElement(TextField, { variant: "standard", type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
+        React.createElement(SimpleDropDownSelector, { label: '', placeholder: capitalize(unit), className: styles.inputUnit, value: { value: unit, label: capitalize(getIntervalUnitLabel(unit)) }, options: periods.map(function (value) { return ({
+                value: value,
+                label: capitalize(getIntervalUnitLabel(value))
+            }); }), onChange: onUnitChange, TextFieldProps: {
+                inputProps: { onFocus: onFocus },
+                InputProps: { classes: { root: styles.input } }
+            } })));
+};

package/esm/DateIntervalSelector/DateIntervalSelector.test.d.ts

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

package/esm/DateIntervalSelector/DateIntervalSelector.test.js

@@ -0,0 +1,80 @@
+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);
+};
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import TextField from '@mui/material/TextField';
+import SimpleDropDownSelector from '../components/SimpleDropDownSelector/SimpleDropDownSelector';
+import { DateIntervalSelector } from './DateIntervalSelector';
+describe('DateIntervalSelector tests', function () {
+    var interval = [4, 'months'];
+    var props = {
+        interval: interval,
+        onChange: jest.fn(),
+        onFocus: jest.fn()
+    };
+    var options = [
+        { value: 'minutes', label: 'Minutes' },
+        { value: 'hours', label: 'Hours' },
+        { value: 'days', label: 'Days' },
+        { value: 'weeks', label: 'Weeks' },
+        { value: 'months', label: 'Months' },
+        { value: 'years', label: 'Years' }
+    ];
+    it('should render correct default state', function () {
+        var wrapper = shallow(React.createElement(DateIntervalSelector, __assign({}, props)));
+        var numberInput = wrapper.find(TextField).filterWhere(function (component) { return component.prop('type') === 'number'; });
+        var unitInput = wrapper.find(SimpleDropDownSelector);
+        expect(numberInput.length).toBe(1);
+        expect(numberInput.prop('value')).toBe(4);
+        expect(unitInput.length).toBe(1);
+        expect(unitInput.prop('value')).toStrictEqual({ value: 'months', label: 'Months' });
+        expect(unitInput.prop('options')).toStrictEqual(options);
+    });
+    it('should call props.onChange on number change', function () {
+        var wrapper = shallow(React.createElement(DateIntervalSelector, __assign({}, props)));
+        var numberInput = wrapper.find(TextField).filterWhere(function (component) { return component.prop('type') === 'number'; });
+        act(function () {
+            var changeEvent = { target: { value: '10' } };
+            numberInput.prop('onChange')(changeEvent);
+        });
+        wrapper.update();
+        expect(props.onChange).toHaveBeenCalledWith([10, 'months']);
+    });
+    it('should call props.onChange on unit change', function () {
+        var wrapper = shallow(React.createElement(DateIntervalSelector, __assign({}, props)));
+        var unitInput = wrapper.find(SimpleDropDownSelector);
+        act(function () {
+            unitInput.prop('onChange')({ value: 'hours', label: 'Hours' });
+        });
+        wrapper.update();
+        expect(props.onChange).toHaveBeenCalledWith([4, 'hours']);
+    });
+    it('should call props.onFocus on focus number input', function () {
+        var wrapper = mount(React.createElement(DateIntervalSelector, __assign({}, props)));
+        var numberInput = wrapper.find('input[type="number"]');
+        act(function () {
+            numberInput.simulate('focus');
+        });
+        wrapper.update();
+        expect(props.onFocus).toHaveBeenCalled();
+    });
+    it('should call props.onFocus on focus unit input', function () {
+        var wrapper = mount(React.createElement(DateIntervalSelector, __assign({}, props)));
+        var unitInput = wrapper.find('input[type="text"]');
+        act(function () {
+            unitInput.simulate('focus');
+        });
+        wrapper.update();
+        expect(props.onFocus).toHaveBeenCalled();
+    });
+});

package/esm/DateIntervalSelector/index.d.ts

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

package/esm/DateIntervalSelector/index.js

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

package/esm/DateRangeEditor/DateRangeEditor.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { DatePeriod } from '@reltio/mdm-sdk';
+import { TextFieldProps } from '@mui/material/TextField';
+type Props = {
+    label?: string;
+    values?: DatePeriod | string;
+    editorLabel?: string;
+    editorPlaceholder?: string;
+    TextFieldProps?: TextFieldProps;
+    classes?: {
+        dropdownIndicator?: string;
+        root?: string;
+    };
+    className?: string;
+    isPickingDate?: boolean;
+    isMenuOpen?: boolean;
+    onMenuToggle?: () => void;
+};
+declare const _default: {
+    (props: Props & React.RefAttributes<HTMLDivElement> & {
+        values?: string | Omit<import("@reltio/mdm-sdk/src/constants/filter-values").default, "PICK_DATE"> | [Date, Date];
+        options?: import("../HOCs/withDateRangeSelector/helpers").Option[];
+        dataTypeDefinition?: import("@reltio/mdm-sdk").DataTypeDefinition;
+        getValuesDateRange?: (value: string | Omit<import("@reltio/mdm-sdk/src/constants/filter-values").default, "PICK_DATE"> | [Date, Date]) => [Date, Date];
+        onChange?: (value: string | Omit<import("@reltio/mdm-sdk/src/constants/filter-values").default, "PICK_DATE"> | [Date, Date]) => void;
+        DateRangePickerProps?: Partial<{
+            onApply: ([startDate, endDate]: [Date, Date]) => void;
+            values?: [Date, Date];
+            type?: string;
+            minDate?: Date;
+            maxDate?: Date;
+        } & React.RefAttributes<HTMLDivElement>>;
+        MenuProps?: Partial<import("@mui/material").MenuProps>;
+    }): JSX.Element;
+    displayName: string;
+};
+export default _default;

package/esm/DateRangeEditor/DateRangeEditor.js

@@ -0,0 +1,54 @@
+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, { forwardRef } from 'react';
+import classnames from 'classnames';
+import { isNil } from 'ramda';
+import TextField from '@mui/material/TextField';
+import { ReactSelectDropdownIndicatorWithIconButton } from '../ReactSelectDropdownIndicatorWithIconButton';
+import withDateRangeSelector from '../HOCs/withDateRangeSelector/withDateRangeSelector';
+import { useStyles } from './styles';
+var DateRangeEditor = forwardRef(function (_a, ref) {
+    var _b, _c;
+    var label = _a.label, editorLabel = _a.editorLabel, editorPlaceholder = _a.editorPlaceholder, values = _a.values, TextFieldProps = _a.TextFieldProps, isPickingDate = _a.isPickingDate, isMenuOpen = _a.isMenuOpen, onMenuToggle = _a.onMenuToggle, otherProps = __rest(_a, ["label", "editorLabel", "editorPlaceholder", "values", "TextFieldProps", "isPickingDate", "isMenuOpen", "onMenuToggle"]);
+    var styles = useStyles();
+    var classes = otherProps.classes;
+    return (React.createElement(TextField, __assign({}, TextFieldProps, otherProps, { ref: ref, label: label, value: (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.value) || editorLabel, onClick: onMenuToggle, variant: "filled", size: "small", InputProps: __assign({ endAdornment: (React.createElement(ReactSelectDropdownIndicatorWithIconButton, { selectProps: {
+                    classes: {
+                        dropdownIndicator: classnames(styles.dropdownIndicator, classes === null || classes === void 0 ? void 0 : classes.dropdownIndicator)
+                    },
+                    menuIsOpen: isMenuOpen
+                }, innerProps: {} })), classes: {
+                root: classnames(styles.inputRoot, (_b = {},
+                    _b[styles.uppercase] = !isPickingDate && Array.isArray(values),
+                    _b)),
+                underline: classnames((_c = {}, _c[styles.underline] = isMenuOpen, _c)),
+                adornedEnd: styles.adornedEnd
+            }, disableUnderline: isNil(values), readOnly: true }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), InputLabelProps: {
+            classes: {
+                root: isMenuOpen ? styles.inputLabel : undefined
+            },
+            shrink: !isNil(label)
+        }, placeholder: editorPlaceholder })));
+});
+DateRangeEditor.displayName = 'DateRangeEditor';
+export default withDateRangeSelector(DateRangeEditor);

package/esm/DateRangeEditor/DateRangeEditor.test.d.ts

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