@reltio/components 1.4.1956 → 1.4.1958

package/esm/DateRangeSelector/DateRangeSelector.js

@@ -0,0 +1,114 @@
+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, { useState } from 'react';
+import i18n from 'ui-i18n';
+import { pipe } from 'ramda';
+import classnames from 'classnames';
+import { DateRangeTypes } from '@reltio/mdm-sdk';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import Typography from '@mui/material/Typography';
+import { DateIntervalSelector } from '../DateIntervalSelector';
+import { CustomDateRangeEditor } from '../CustomDateRangeEditor';
+import { useDidUpdateEffect } from '../hooks/useDidUpdateEffect';
+import { getValue } from '../helpers/events';
+import { useStyles } from './styles';
+var emptyDates = [null, null];
+var emptyInterval = [null, 'minutes'];
+export var DateRangeSelector = function (_a) {
+    var value = _a.value, onChange = _a.onChange, dateRangeTypes = _a.dateRangeTypes;
+    var styles = useStyles();
+    var getInitPeriodByType = function (type) {
+        if ((value === null || value === void 0 ? void 0 : value.type) === type) {
+            return value.period;
+        }
+        else if (type === DateRangeTypes.WITHIN || type === DateRangeTypes.AGO) {
+            return emptyInterval;
+        }
+        else if (type === DateRangeTypes.BETWEEN) {
+            return emptyDates;
+        }
+    };
+    var _b = useState(getInitPeriodByType(DateRangeTypes.BETWEEN)), datesInterval = _b[0], setDatesInterval = _b[1];
+    var _c = useState(getInitPeriodByType(DateRangeTypes.WITHIN)), withinInterval = _c[0], setWithinInterval = _c[1];
+    var _d = useState(getInitPeriodByType(DateRangeTypes.AGO)), agoInterval = _d[0], setAgoInterval = _d[1];
+    var getCurrentPeriodByType = function (type) {
+        if (type === DateRangeTypes.WITHIN) {
+            return withinInterval;
+        }
+        else if (type === DateRangeTypes.AGO) {
+            return agoInterval;
+        }
+        else if (type === DateRangeTypes.BETWEEN) {
+            return datesInterval;
+        }
+    };
+    var changeType = function (type) {
+        if ((value === null || value === void 0 ? void 0 : value.type) !== type) {
+            onChange({ period: getCurrentPeriodByType(type), type: type });
+        }
+    };
+    var changePeriod = function (period) {
+        onChange(__assign(__assign({}, value), { period: period }));
+    };
+    var isEditorVisible = function (_a) {
+        var type = _a.type;
+        return !dateRangeTypes || dateRangeTypes.includes(type);
+    };
+    useDidUpdateEffect(function () {
+        if (value) {
+            if (value.type === DateRangeTypes.WITHIN) {
+                setWithinInterval(value.period);
+            }
+            else if (value.type === DateRangeTypes.AGO) {
+                setAgoInterval(value.period);
+            }
+            else if (value.type === DateRangeTypes.BETWEEN) {
+                setDatesInterval(value.period);
+            }
+        }
+        else {
+            setDatesInterval(emptyDates);
+            setWithinInterval(emptyInterval);
+            setAgoInterval(emptyInterval);
+        }
+    }, [value]);
+    var editors = [
+        {
+            label: i18n.text('Within the last'),
+            type: DateRangeTypes.WITHIN,
+            editor: (React.createElement(DateIntervalSelector, { interval: withinInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.WITHIN); } })),
+            className: styles.dateOptionWithin
+        },
+        {
+            label: i18n.text('More than'),
+            type: DateRangeTypes.AGO,
+            editor: (React.createElement(React.Fragment, null,
+                React.createElement(DateIntervalSelector, { interval: agoInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.AGO); } }),
+                React.createElement(Typography, { className: styles.agoLabel, variant: 'subtitle1' }, i18n.text('Ago')))),
+            className: styles.dateOptionAgo
+        },
+        {
+            label: i18n.text('Date range'),
+            type: DateRangeTypes.BETWEEN,
+            editor: (React.createElement(CustomDateRangeEditor, { values: datesInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.BETWEEN); } })),
+            className: styles.dateOption
+        }
+    ];
+    return (React.createElement(RadioGroup, { value: (value === null || value === void 0 ? void 0 : value.type) || null, onChange: pipe(getValue, changeType), "data-reltio-id": "reltio-date-range-selector" }, editors.filter(isEditorVisible).map(function (_a) {
+        var type = _a.type, editor = _a.editor, label = _a.label, className = _a.className;
+        return (React.createElement("div", { key: type, className: className },
+            React.createElement(FormControlLabel, { value: type, label: label, control: React.createElement(Radio, { color: "primary" }), classes: { label: classnames(styles.dateOptionLabel, styles.labels) } }),
+            editor));
+    })));
+};

package/esm/DateRangeSelector/DateRangeSelector.specs.js

@@ -0,0 +1,289 @@
+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 { DateRangeTypes } from '@reltio/mdm-sdk';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { DateRangeSelector } from './DateRangeSelector';
+describe('DateRangeSelector tests', function () {
+    var value = {
+        type: DateRangeTypes.WITHIN,
+        period: [4, 'months']
+    };
+    var defaultProps = { value: value, onChange: jest.fn() };
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = userEvent.setup();
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment }, children));
+        };
+        return __assign({ user: user }, render(React.createElement(DateRangeSelector, __assign({}, defaultProps, props)), { wrapper: Providers }));
+    };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should render correct default state', function () {
+        setUp();
+        var radios = screen.getAllByRole('radio');
+        expect(radios).toHaveLength(3);
+        expect(radios[0]).toBeChecked();
+        var selectors = screen.getAllByTestId('date-interval-selector');
+        var valueEditors = screen.getAllByRole('spinbutton');
+        var periodSelectors = screen.getAllByRole('combobox');
+        expect(selectors).toHaveLength(2);
+        expect(valueEditors).toHaveLength(2);
+        expect(periodSelectors).toHaveLength(2);
+        screen.getByText('Within the last');
+        expect(valueEditors[0]).toHaveValue(4);
+        screen.getByText('Months');
+        screen.getByText('More than');
+        expect(valueEditors[1]).not.toHaveValue();
+        screen.getByText('Minutes');
+        screen.getByText('Ago');
+        screen.getByText('Date range');
+        screen.getByTestId('custom-date-range-editor');
+    });
+    it('should render correctly with empty value', function () {
+        setUp({ value: null });
+        var radios = screen.getAllByRole('radio');
+        expect(radios[0]).not.toBeChecked();
+        expect(radios[1]).not.toBeChecked();
+        expect(radios[2]).not.toBeChecked();
+        var selectors = screen.getAllByTestId('date-interval-selector');
+        var valueEditors = screen.getAllByRole('spinbutton');
+        var periodSelectors = screen.getAllByRole('combobox');
+        var selectorsValues = screen.getAllByText('Minutes');
+        expect(selectors).toHaveLength(2);
+        expect(valueEditors).toHaveLength(2);
+        expect(periodSelectors).toHaveLength(2);
+        expect(selectorsValues).toHaveLength(2);
+        screen.getByText('Within the last');
+        expect(valueEditors[0]).not.toHaveValue();
+        screen.getByText('More than');
+        expect(valueEditors[1]).not.toHaveValue();
+        screen.getByText('Ago');
+        screen.getByText('Date range');
+        screen.getByTestId('custom-date-range-editor');
+    });
+    describe('Within', function () {
+        it('should call props.onChange when type is changed to withing', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var value, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        value = {
+                            type: DateRangeTypes.AGO,
+                            period: [4, 'months']
+                        };
+                        user = setUp({ value: value }).user;
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Within the last'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: DateRangeTypes.WITHIN,
+                            period: [null, 'minutes']
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call props.onChange when within number is changed', 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.getAllByRole('spinbutton')[0], '3')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: DateRangeTypes.WITHIN,
+                            period: [43, 'months']
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call props.onChange when ago period is changed', 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.getAllByRole('combobox')[0])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Days'))];
+                    case 2:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: DateRangeTypes.WITHIN,
+                            period: [4, 'days']
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Ago', function () {
+        it('should call props.onChange when type is changed to ago', 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.getByLabelText('More than'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: DateRangeTypes.AGO,
+                            period: [null, 'minutes']
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call props.onChange when within number is changed', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var value, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        value = {
+                            type: DateRangeTypes.AGO,
+                            period: [1, 'months']
+                        };
+                        user = setUp({ value: value }).user;
+                        return [4 /*yield*/, user.type(screen.getAllByRole('spinbutton')[1], '3')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: DateRangeTypes.AGO,
+                            period: [13, 'months']
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call props.onChange when ago period is changed', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var value, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        value = {
+                            type: DateRangeTypes.AGO,
+                            period: [4, 'months']
+                        };
+                        user = setUp({ value: value }).user;
+                        return [4 /*yield*/, user.click(screen.getAllByRole('combobox')[1])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Days'))];
+                    case 2:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: DateRangeTypes.AGO,
+                            period: [4, 'days']
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('Between', function () {
+        it('should call props.onChange when type is changed to between', 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.getByLabelText('Date range'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: DateRangeTypes.BETWEEN,
+                            period: [null, null]
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should call props.onChange when between period is changed', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var value, user;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        value = {
+                            type: DateRangeTypes.BETWEEN,
+                            period: [new Date(123), new Date(456)]
+                        };
+                        user = setUp({ value: value }).user;
+                        return [4 /*yield*/, user.click(screen.getByRole('textbox'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(screen.getByText('From'), '01/03/2022')];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(screen.getByText('To'), '02/03/2022')];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByText('Update'))];
+                    case 4:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: DateRangeTypes.BETWEEN,
+                            period: [new Date('01/03/2022'), new Date('02/03/2022')]
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+});

package/esm/DateRangeSelector/index.d.ts

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

package/esm/DateRangeSelector/index.js

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

package/esm/DateRangeSelector/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"labels" | "agoLabel" | "dateOption" | "dateOptionAgo" | "dateOptionWithin" | "dateOptionLabel">;

package/esm/DateRangeSelector/styles.js

@@ -0,0 +1,27 @@
+import { makeStyles } from '@mui/styles';
+export var useStyles = makeStyles({
+    labels: {
+        fontSize: '14px'
+    },
+    agoLabel: {
+        minWidth: '30px',
+        textAlign: 'end',
+        margin: 'auto'
+    },
+    dateOption: {
+        display: 'flex',
+        marginRight: '30px'
+    },
+    dateOptionAgo: {
+        display: 'flex',
+        marginBottom: '10px'
+    },
+    dateOptionWithin: {
+        display: 'flex',
+        marginRight: '30px',
+        marginBottom: '10px'
+    },
+    dateOptionLabel: {
+        minWidth: '100px'
+    }
+});

package/esm/UpSetChart/UpSetChart.js

@@ -1,19 +1,7 @@
-import React, { useMemo, useState } from 'react';
-import i18n from 'ui-i18n';
-import { extractCombinations, UpSetJS } from '@upsetjs/react';
-import { NOT_MEMBER_COLOR, PRIMARY_COLOR, SECONDARY_COLOR, TEXT_COLOR } from './constants';
-import { useStyles } from './styles';
+import React from 'react';
 export var UpSetChart = function (_a) {
     var width = _a.width, height = _a.height, data = _a.data;
-    var styles = useStyles();
-    var _b = useState(null), selection = _b[0], setSelection = _b[1];
-    var _c = useMemo(function () { return extractCombinations(data); }, [data]), sets = _c.sets, combinations = _c.combinations;
-    if (!width || !height)
+    if (!width || !height || !data)
         return null;
-    return (React.createElement(UpSetJS, { width: width, height: height, sets: sets, combinations: combinations, selection: selection, onHover: setSelection, barPadding: 0.6, dotPadding: 0.5, barLabelOffset: 4, exportButtons: false, heightRatios: [0.65], combinationName: i18n.text('No. of unified profiles'), setName: "", setLabelAlignment: "left", alternatingBackgroundColor: "transparent", notMemberColor: NOT_MEMBER_COLOR, hasSelectionColor: SECONDARY_COLOR, selectionColor: PRIMARY_COLOR, color: PRIMARY_COLOR, textColor: TEXT_COLOR, fontFamily: "inherit", classNames: {
-            setLabel: styles.setLabel,
-            barLabel: styles.barLabel,
-            axisTick: styles.axisTick,
-            chartLabel: styles.chartLabel
-        } }));
+    return React.createElement("div", null, "UpSet");
 };

package/esm/features/activity-log/ActivityFilterEditor/components/DateRangeSelector/DateRangeSelector.js

@@ -1,95 +1,13 @@
-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, { useState } from 'react';
+import React from 'react';
 import i18n from 'ui-i18n';
-import { pipe } from 'ramda';
 import classnames from 'classnames';
-import { DateRangeTypes } from '@reltio/mdm-sdk';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
 import Typography from '@mui/material/Typography';
-import { DateIntervalSelector } from '../../../../../DateIntervalSelector';
-import { getValue } from '../../../../../helpers/events';
-import { CustomDateRangeEditor } from '../../../../../CustomDateRangeEditor';
-import { useDidUpdateEffect } from '../../../../../hooks/useDidUpdateEffect';
+import { DateRangeSelector as BaseDateRangeSelector } from '../../../../../DateRangeSelector';
 import { useStyles } from '../../styles';
-var emptyDates = [null, null];
-var emptyInterval = [null, 'minutes'];
 export var DateRangeSelector = function (_a) {
     var value = _a.value, onChange = _a.onChange;
     var styles = useStyles();
-    var getInitPeriodByType = function (type) {
-        if ((value === null || value === void 0 ? void 0 : value.type) === type) {
-            return value.period;
-        }
-        else if (type === DateRangeTypes.WITHIN || type === DateRangeTypes.AGO) {
-            return emptyInterval;
-        }
-        else if (type === DateRangeTypes.BETWEEN) {
-            return emptyDates;
-        }
-    };
-    var _b = useState(getInitPeriodByType(DateRangeTypes.BETWEEN)), datesInterval = _b[0], setDatesInterval = _b[1];
-    var _c = useState(getInitPeriodByType(DateRangeTypes.WITHIN)), withinInterval = _c[0], setWithinInterval = _c[1];
-    var _d = useState(getInitPeriodByType(DateRangeTypes.AGO)), agoInterval = _d[0], setAgoInterval = _d[1];
-    var getCurrentPeriodByType = function (type) {
-        if (type === DateRangeTypes.WITHIN) {
-            return withinInterval;
-        }
-        else if (type === DateRangeTypes.AGO) {
-            return agoInterval;
-        }
-        else if (type === DateRangeTypes.BETWEEN) {
-            return datesInterval;
-        }
-    };
-    var changeType = function (type) {
-        if ((value === null || value === void 0 ? void 0 : value.type) !== type) {
-            onChange({ period: getCurrentPeriodByType(type), type: type });
-        }
-    };
-    var changePeriod = function (period) {
-        onChange(__assign(__assign({}, value), { period: period }));
-    };
-    useDidUpdateEffect(function () {
-        if (value) {
-            if (value.type === DateRangeTypes.WITHIN) {
-                setWithinInterval(value.period);
-            }
-            else if (value.type === DateRangeTypes.AGO) {
-                setAgoInterval(value.period);
-            }
-            else if (value.type === DateRangeTypes.BETWEEN) {
-                setDatesInterval(value.period);
-            }
-        }
-        else {
-            setDatesInterval(emptyDates);
-            setWithinInterval(emptyInterval);
-            setAgoInterval(emptyInterval);
-        }
-    }, [value]);
     return (React.createElement("div", { className: styles.selectorWrapper, "data-reltio-id": "date-range-selector" },
         React.createElement(Typography, { className: classnames(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, i18n.text('Date')),
-        React.createElement(RadioGroup, { value: (value === null || value === void 0 ? void 0 : value.type) || null, onChange: pipe(getValue, changeType) },
-            React.createElement("div", { className: styles.dateOptionWithin },
-                React.createElement(FormControlLabel, { value: DateRangeTypes.WITHIN, control: React.createElement(Radio, { color: "primary" }), label: i18n.text('Within the last'), classes: { label: classnames(styles.dateOptionLabel, styles.labels) } }),
-                React.createElement(DateIntervalSelector, { interval: withinInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.WITHIN); } })),
-            React.createElement("div", { className: styles.dateOptionAgo },
-                React.createElement(FormControlLabel, { value: DateRangeTypes.AGO, control: React.createElement(Radio, { color: "primary" }), label: i18n.text('More than'), classes: { label: classnames(styles.dateOptionLabel, styles.labels) } }),
-                React.createElement(DateIntervalSelector, { interval: agoInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.AGO); } }),
-                React.createElement(Typography, { className: classnames(styles.agoLabel, styles.labels), variant: 'subtitle1' }, i18n.text('Ago'))),
-            React.createElement("div", { className: styles.dateOption },
-                React.createElement(FormControlLabel, { value: DateRangeTypes.BETWEEN, control: React.createElement(Radio, { color: "primary" }), label: i18n.text('Date range'), classes: { label: classnames(styles.dateOptionLabel, styles.labels) } }),
-                React.createElement(CustomDateRangeEditor, { values: datesInterval, onChange: changePeriod, onFocus: function () { return changeType(DateRangeTypes.BETWEEN); } })))));
+        React.createElement(BaseDateRangeSelector, { value: value, onChange: onChange })));
 };

package/esm/features/activity-log/ActivityFilterEditor/components/DateRangeSelector/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"container" | "option" | "labels" | "divider" | "clearButton" | "filterSubtitle" | "agoLabel" | "dateOption" | "dateOptionAgo" | "dateOptionWithin" | "dateOptionLabel" | "dropDownInput" | "editorFields" | "selectorWrapper" | "selectorsGroup" | "selectorHint">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"labels" | "filterSubtitle" | "selectorWrapper">;

package/esm/features/activity-log/ActivityFilterEditor/components/DateRangeSelector/styles.js

@@ -1,9 +1,5 @@
 import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
-    container: {
-        width: 500,
-        boxSizing: 'border-box'
-    },
     labels: {
         fontSize: '14px'
     },
@@ -11,57 +7,7 @@ export var useStyles = makeStyles({
         paddingBottom: '10px',
         paddingLeft: '5px'
     },
-    agoLabel: {
-        minWidth: '30px',
-        textAlign: 'end',
-        margin: 'auto'
-    },
-    dateOption: {
-        display: 'flex',
-        marginRight: '30px'
-    },
-    dateOptionAgo: {
-        display: 'flex',
-        marginBottom: '10px'
-    },
-    dateOptionWithin: {
-        display: 'flex',
-        marginRight: '30px',
-        marginBottom: '10px'
-    },
-    dateOptionLabel: {
-        minWidth: '100px'
-    },
-    dropDownInput: {
-        width: '100%',
-        justifyContent: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.03)',
-        borderTop: '4px'
-    },
-    editorFields: {
-        maxHeight: 400,
-        borderColor: 'rgba(0,0,0,0.12)'
-    },
-    clearButton: {
-        marginRight: 'auto'
-    },
     selectorWrapper: {
         marginBottom: '12px'
-    },
-    option: {
-        fontSize: '14px',
-        height: '32px'
-    },
-    selectorsGroup: {
-        display: 'flex',
-        flexDirection: 'column'
-    },
-    selectorHint: {
-        fontSize: 12,
-        lineHeight: '16px',
-        color: 'rgba(0,0,0,0.54)'
-    },
-    divider: {
-        marginBottom: 12
     }
 });

package/esm/index.d.ts

@@ -176,6 +176,7 @@ export { ReltioMap } from './ReltioMap';
 export { RelationEditor } from './RelationEditor';
 export { GaugeChart } from './GaugeChart';
 export { UpSetChart } from './UpSetChart';
+export { DateRangeSelector } from './DateRangeSelector';
 export { withTooltip } from './HOCs/withTooltip';
 export { withAsyncMount } from './HOCs/withAsyncMount';
 export { withDragHandle } from './HOCs/withDragHandle';

package/esm/index.js

@@ -177,6 +177,7 @@ export { ReltioMap } from './ReltioMap';
 export { RelationEditor } from './RelationEditor';
 export { GaugeChart } from './GaugeChart';
 export { UpSetChart } from './UpSetChart';
+export { DateRangeSelector } from './DateRangeSelector';
 // HOCs
 export { withTooltip } from './HOCs/withTooltip';
 export { withAsyncMount } from './HOCs/withAsyncMount';