@reltio/components 1.4.1956 → 1.4.1958

package/cjs/AttributesFiltersBuilder/AttributesFiltersBuilder.js

@@ -75,7 +75,7 @@ var AttributesFiltersBuilder = function (_a) {
     var currentEntityType = (0, react_1.useMemo)(function () {
         var entityTypesUris = attributesTypesGroups.map(function (_a) {
             var attributeTypes = _a.attributeTypes;
-            return (0, helpers_1.getEntityTypeFromAttrTypes)(attributeTypes);
+            return (0, helpers_1.getOperationalTypeUriFromAttrTypes)(attributeTypes);
         });
         var closestEntityTypeAncestorUri = (0, mdm_sdk_1.findClosestCommonAncestor)(metadata, entityTypesUris);
         return (0, mdm_sdk_1.getEntityType)(metadata, closestEntityTypeAncestorUri);

package/cjs/AttributesFiltersBuilder/helpers.d.ts

@@ -10,4 +10,4 @@ export declare const getRowsDataFromFilters: (filters: SearchFilter[], attribute
     id: number;
     values: import("@reltio/mdm-sdk").SearchValue[];
 }[];
-export declare const getEntityTypeFromAttrTypes: (attributeTypes: AttributeType[]) => any;
+export declare const getOperationalTypeUriFromAttrTypes: (attributeTypes: AttributeType[]) => any;

package/cjs/AttributesFiltersBuilder/helpers.js

@@ -20,30 +20,33 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEntityTypeFromAttrTypes = exports.getRowsDataFromFilters = exports.findValue = exports.getAttributeSelectorItems = void 0;
+exports.getOperationalTypeUriFromAttrTypes = exports.getRowsDataFromFilters = exports.findValue = exports.getAttributeSelectorItems = void 0;
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ramda_1 = require("ramda");
-var createAttributeItem = function (metadata, attrType, entityTypeUri, parents) {
-    var entityTypeLabel = (0, mdm_sdk_1.getEntityTypeLabel)(metadata, { type: entityTypeUri });
+var createAttributeItem = function (metadata, attrType, operationalTypeUri, parents) {
     var title = attrType.label || attrType.name;
-    var attributeProps = (0, mdm_sdk_1.isSpecialAttribute)(attrType)
-        ? {
-            fieldName: attrType.name
-        }
-        : {
-            entityTypeUri: entityTypeUri,
-            pathToTitle: Array.isArray(parents)
-                ? __spreadArray(__spreadArray([entityTypeLabel], (0, ramda_1.chain)((0, ramda_1.prop)('label'), parents), true), [title], false) : [entityTypeLabel, title],
-            fieldName: (0, mdm_sdk_1.attributeUriToSearchUri)(attrType.uri, parents)
-        };
-    return __assign({ attrType: attrType, title: title }, attributeProps);
+    if ((0, mdm_sdk_1.isSpecialAttribute)(attrType)) {
+        return { attrType: attrType, title: title, fieldName: attrType.name };
+    }
+    if ((0, mdm_sdk_1.isInteractionTypeUri)(operationalTypeUri)) {
+        return { attrType: attrType, title: title, fieldName: (0, mdm_sdk_1.attributeUriToSearchUri)(attrType.uri, parents) };
+    }
+    var entityTypeLabel = (0, mdm_sdk_1.getEntityTypeLabel)(metadata, { type: operationalTypeUri });
+    return {
+        attrType: attrType,
+        title: title,
+        entityTypeUri: operationalTypeUri,
+        pathToTitle: Array.isArray(parents)
+            ? __spreadArray(__spreadArray([entityTypeLabel], (0, ramda_1.chain)((0, ramda_1.prop)('label'), parents), true), [title], false) : [entityTypeLabel, title],
+        fieldName: (0, mdm_sdk_1.attributeUriToSearchUri)(attrType.uri, parents)
+    };
 };
-var createAttributesConfig = function (metadata, attrNode, entityTypeUri, parents) {
+var createAttributesConfig = function (metadata, attrNode, operationalTypeUri, parents) {
     if (parents === void 0) { parents = []; }
-    var resConfig = __assign(__assign({}, createAttributeItem(metadata, attrNode, entityTypeUri, parents)), { uri: attrNode.uri });
+    var resConfig = __assign(__assign({}, createAttributeItem(metadata, attrNode, operationalTypeUri, parents)), { uri: attrNode.uri });
     var children = attrNode.children
         ? attrNode.children.map(function (childNode) {
-            return createAttributesConfig(metadata, childNode, entityTypeUri, parents.concat(attrNode));
+            return createAttributesConfig(metadata, childNode, operationalTypeUri, parents.concat(attrNode));
         })
         : [];
     if (children.length) {
@@ -54,13 +57,13 @@ var createAttributesConfig = function (metadata, attrNode, entityTypeUri, parent
 var getAttributeSelectorItems = function (metadata, attributesTypesGroups, attributesTypesGroupFilter) {
     var attributeSelectorItemsGroup = attributesTypesGroups.map(function (_a) {
         var id = _a.id, title = _a.title, attributeTypes = _a.attributeTypes;
-        var entityType = (0, mdm_sdk_1.getEntityType)(metadata, (0, exports.getEntityTypeFromAttrTypes)(attributeTypes));
+        var operationalTypeUri = (0, exports.getOperationalTypeUriFromAttrTypes)(attributeTypes);
         return {
             id: id,
             title: title,
             attributes: (0, mdm_sdk_1.getAttributesTreeFromAttributes)(attributeTypes, metadata).map(function (attrNode) {
-                var entityTypeUri = (0, mdm_sdk_1.isSpecialAttribute)(attrNode) ? null : entityType.uri;
-                return createAttributesConfig(metadata, attrNode, entityTypeUri);
+                var uri = (0, mdm_sdk_1.isSpecialAttribute)(attrNode) ? null : operationalTypeUri;
+                return createAttributesConfig(metadata, attrNode, uri);
             })
         };
     });
@@ -108,8 +111,8 @@ var getRowsDataFromFilters = function (filters, attributesGroupArr) {
     });
 };
 exports.getRowsDataFromFilters = getRowsDataFromFilters;
-var getEntityTypeFromAttrTypes = function (attributeTypes) {
+var getOperationalTypeUriFromAttrTypes = function (attributeTypes) {
     var regularAttribute = (0, mdm_sdk_1.findRegularAttribute)(attributeTypes);
     return regularAttribute ? (0, mdm_sdk_1.getBaseUri)(regularAttribute.uri) : null;
 };
-exports.getEntityTypeFromAttrTypes = getEntityTypeFromAttrTypes;
+exports.getOperationalTypeUriFromAttrTypes = getOperationalTypeUriFromAttrTypes;

package/cjs/AttributesFiltersButton/AttributesFiltersButton.js

@@ -85,7 +85,7 @@ var AttributesFiltersButton = function (_a) {
                 horizontal: 'left'
             } },
             react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(Typography_1.default, { variant: "h6" }, title !== null && title !== void 0 ? title : ui_i18n_1.default.text('Filter')),
+                react_1.default.createElement(Typography_1.default, { variant: "h6", className: styles.title }, title !== null && title !== void 0 ? title : ui_i18n_1.default.text('Filter')),
                 react_1.default.createElement("div", { className: styles.filtersBuilderWrapper },
                     children,
                     react_1.default.createElement(AttributesFiltersBuilder_1.AttributesFiltersBuilder, { attributesTypesGroups: attributesTypesGroups, attributesTypesGroupFilter: attributesTypesGroupFilter, filters: filters, onChange: setFilters, components: components, onFilterAttributeChange: onFilterAttributeChange, classes: classes })),

package/cjs/AttributesFiltersButton/components/ActionButtons/styles.js

@@ -20,7 +20,7 @@ exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
     buttonsWrapper: {
         display: 'flex'
     },
-    applyButton: __assign(__assign({}, allButtonsStyle), { marginRight: '16px' }),
+    applyButton: __assign(__assign({}, allButtonsStyle), { marginRight: '12px' }),
     cancelButton: __assign(__assign({}, allButtonsStyle), { marginLeft: 'auto' }),
-    clearButon: __assign({}, allButtonsStyle)
+    clearButon: __assign(__assign({}, allButtonsStyle), { marginLeft: '12px' })
 }); });

package/cjs/AttributesFiltersButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"divider" | "triggerButton" | "filtersBuilderWrapper" | "popupContent" | "changedFiltersIndicator">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "divider" | "triggerButton" | "filtersBuilderWrapper" | "popupContent" | "changedFiltersIndicator">;

package/cjs/AttributesFiltersButton/styles.js

@@ -4,6 +4,9 @@ exports.useStyles = void 0;
 var styles_1 = require("@mui/material/styles");
 var styles_2 = require("@mui/styles");
 exports.useStyles = (0, styles_2.makeStyles)(function (theme) { return ({
+    title: {
+        padding: '0px 16px'
+    },
     triggerButton: {
         minWidth: 0,
         color: 'rgba(0,0,0,0.54)',
@@ -12,18 +15,18 @@ exports.useStyles = (0, styles_2.makeStyles)(function (theme) { return ({
         marginRight: '12px'
     },
     filtersBuilderWrapper: {
-        marginTop: '20px'
+        padding: '8px 16px',
+        display: 'flex',
+        flexDirection: 'column'
     },
     popupContent: {
-        paddingLeft: '16px',
-        paddingTop: '20px',
-        paddingBottom: '6px',
+        paddingTop: '12px',
+        paddingBottom: '8px',
         width: '770px'
     },
     divider: {
-        marginBottom: '14px',
-        marginLeft: '-16px',
-        borderColor: 'rgba(0, 0, 0, 0.121569)'
+        marginBottom: '4px',
+        borderColor: 'rgba(0, 0, 0, 0.1)'
     },
     changedFiltersIndicator: {
         backgroundColor: (0, styles_1.alpha)(theme.palette.primary.main, 0.12)

package/cjs/CustomDateRangeEditor/CustomDateRangeEditor.js

@@ -60,7 +60,7 @@ var CustomDateRangeEditor = function (_a) {
     var onCancel = function () {
         setOpen(false);
     };
-    return (react_1.default.createElement("div", { className: styles.root },
+    return (react_1.default.createElement("div", { "data-reltio-id": "custom-date-range-editor", className: styles.root },
         react_1.default.createElement(TextField_1.default, { fullWidth: true, value: values.map(function (value) { return formatValue(value, placeholder); }).join(' \u2014 '), onClick: handleToggle, variant: "filled", ref: inputRef, InputProps: {
                 endAdornment: (react_1.default.createElement(ReactSelectDropdownIndicatorWithIconButton_1.ReactSelectDropdownIndicatorWithIconButton, { selectProps: { classes: styles, menuIsOpen: open }, innerProps: {} })),
                 disableUnderline: (0, ramda_1.isNil)(values),

package/cjs/DateIntervalSelector/DateIntervalSelector.js

@@ -23,7 +23,7 @@ var DateIntervalSelector = function (_a) {
     };
     var onNumberChange = (0, ramda_1.pipe)(events_1.getValue, parseInt, getIntervalFromValue, onChange);
     var onUnitChange = (0, ramda_1.pipe)(getIntervalFromUnit, onChange);
-    return (react_1.default.createElement("div", { className: styles.root },
+    return (react_1.default.createElement("div", { "data-reltio-id": "date-interval-selector", className: styles.root },
         react_1.default.createElement(TextField_1.default, { variant: "standard", type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: { classes: { root: styles.input } }, className: styles.inputNumber }),
         react_1.default.createElement(SimpleDropDownSelector_1.SimpleDropDownSelector, { label: '', placeholder: (0, utils_1.capitalize)(unit), className: styles.inputUnit, value: { value: unit, label: (0, utils_1.capitalize)((0, mdm_sdk_1.getIntervalUnitLabel)(unit)) }, options: periods.map(function (value) { return ({
                 value: value,

package/cjs/DateRangeSelector/DateRangeSelector.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DateRangeFilter, DateRangeTypes } from '@reltio/mdm-sdk';
+type Props = {
+    value: DateRangeFilter;
+    dateRangeTypes?: DateRangeTypes[];
+    onChange: (range: DateRangeFilter) => void;
+};
+export declare const DateRangeSelector: ({ value, onChange, dateRangeTypes }: Props) => React.JSX.Element;
+export {};

package/cjs/DateRangeSelector/DateRangeSelector.js

@@ -0,0 +1,144 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeSelector = void 0;
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel"));
+var Radio_1 = __importDefault(require("@mui/material/Radio"));
+var RadioGroup_1 = __importDefault(require("@mui/material/RadioGroup"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var DateIntervalSelector_1 = require("../DateIntervalSelector");
+var CustomDateRangeEditor_1 = require("../CustomDateRangeEditor");
+var useDidUpdateEffect_1 = require("../hooks/useDidUpdateEffect");
+var events_1 = require("../helpers/events");
+var styles_1 = require("./styles");
+var emptyDates = [null, null];
+var emptyInterval = [null, 'minutes'];
+var DateRangeSelector = function (_a) {
+    var value = _a.value, onChange = _a.onChange, dateRangeTypes = _a.dateRangeTypes;
+    var styles = (0, styles_1.useStyles)();
+    var getInitPeriodByType = function (type) {
+        if ((value === null || value === void 0 ? void 0 : value.type) === type) {
+            return value.period;
+        }
+        else if (type === mdm_sdk_1.DateRangeTypes.WITHIN || type === mdm_sdk_1.DateRangeTypes.AGO) {
+            return emptyInterval;
+        }
+        else if (type === mdm_sdk_1.DateRangeTypes.BETWEEN) {
+            return emptyDates;
+        }
+    };
+    var _b = (0, react_1.useState)(getInitPeriodByType(mdm_sdk_1.DateRangeTypes.BETWEEN)), datesInterval = _b[0], setDatesInterval = _b[1];
+    var _c = (0, react_1.useState)(getInitPeriodByType(mdm_sdk_1.DateRangeTypes.WITHIN)), withinInterval = _c[0], setWithinInterval = _c[1];
+    var _d = (0, react_1.useState)(getInitPeriodByType(mdm_sdk_1.DateRangeTypes.AGO)), agoInterval = _d[0], setAgoInterval = _d[1];
+    var getCurrentPeriodByType = function (type) {
+        if (type === mdm_sdk_1.DateRangeTypes.WITHIN) {
+            return withinInterval;
+        }
+        else if (type === mdm_sdk_1.DateRangeTypes.AGO) {
+            return agoInterval;
+        }
+        else if (type === mdm_sdk_1.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);
+    };
+    (0, useDidUpdateEffect_1.useDidUpdateEffect)(function () {
+        if (value) {
+            if (value.type === mdm_sdk_1.DateRangeTypes.WITHIN) {
+                setWithinInterval(value.period);
+            }
+            else if (value.type === mdm_sdk_1.DateRangeTypes.AGO) {
+                setAgoInterval(value.period);
+            }
+            else if (value.type === mdm_sdk_1.DateRangeTypes.BETWEEN) {
+                setDatesInterval(value.period);
+            }
+        }
+        else {
+            setDatesInterval(emptyDates);
+            setWithinInterval(emptyInterval);
+            setAgoInterval(emptyInterval);
+        }
+    }, [value]);
+    var editors = [
+        {
+            label: ui_i18n_1.default.text('Within the last'),
+            type: mdm_sdk_1.DateRangeTypes.WITHIN,
+            editor: (react_1.default.createElement(DateIntervalSelector_1.DateIntervalSelector, { interval: withinInterval, onChange: changePeriod, onFocus: function () { return changeType(mdm_sdk_1.DateRangeTypes.WITHIN); } })),
+            className: styles.dateOptionWithin
+        },
+        {
+            label: ui_i18n_1.default.text('More than'),
+            type: mdm_sdk_1.DateRangeTypes.AGO,
+            editor: (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(DateIntervalSelector_1.DateIntervalSelector, { interval: agoInterval, onChange: changePeriod, onFocus: function () { return changeType(mdm_sdk_1.DateRangeTypes.AGO); } }),
+                react_1.default.createElement(Typography_1.default, { className: styles.agoLabel, variant: 'subtitle1' }, ui_i18n_1.default.text('Ago')))),
+            className: styles.dateOptionAgo
+        },
+        {
+            label: ui_i18n_1.default.text('Date range'),
+            type: mdm_sdk_1.DateRangeTypes.BETWEEN,
+            editor: (react_1.default.createElement(CustomDateRangeEditor_1.CustomDateRangeEditor, { values: datesInterval, onChange: changePeriod, onFocus: function () { return changeType(mdm_sdk_1.DateRangeTypes.BETWEEN); } })),
+            className: styles.dateOption
+        }
+    ];
+    return (react_1.default.createElement(RadioGroup_1.default, { value: (value === null || value === void 0 ? void 0 : value.type) || null, onChange: (0, ramda_1.pipe)(events_1.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_1.default.createElement("div", { key: type, className: className },
+            react_1.default.createElement(FormControlLabel_1.default, { value: type, label: label, control: react_1.default.createElement(Radio_1.default, { color: "primary" }), classes: { label: (0, classnames_1.default)(styles.dateOptionLabel, styles.labels) } }),
+            editor));
+    })));
+};
+exports.DateRangeSelector = DateRangeSelector;

package/cjs/DateRangeSelector/DateRangeSelector.specs.js

@@ -0,0 +1,294 @@
+"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 react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var LocalizationProvider_1 = require("@mui/x-date-pickers/LocalizationProvider");
+var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
+var DateRangeSelector_1 = require("./DateRangeSelector");
+describe('DateRangeSelector tests', function () {
+    var value = {
+        type: mdm_sdk_1.DateRangeTypes.WITHIN,
+        period: [4, 'months']
+    };
+    var defaultProps = { value: value, onChange: jest.fn() };
+    var setUp = function (props) {
+        if (props === void 0) { props = {}; }
+        var user = user_event_1.default.setup();
+        var Providers = function (_a) {
+            var children = _a.children;
+            return (react_1.default.createElement(LocalizationProvider_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment }, children));
+        };
+        return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(DateRangeSelector_1.DateRangeSelector, __assign({}, defaultProps, props)), { wrapper: Providers }));
+    };
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    it('should render correct default state', function () {
+        setUp();
+        var radios = react_2.screen.getAllByRole('radio');
+        expect(radios).toHaveLength(3);
+        expect(radios[0]).toBeChecked();
+        var selectors = react_2.screen.getAllByTestId('date-interval-selector');
+        var valueEditors = react_2.screen.getAllByRole('spinbutton');
+        var periodSelectors = react_2.screen.getAllByRole('combobox');
+        expect(selectors).toHaveLength(2);
+        expect(valueEditors).toHaveLength(2);
+        expect(periodSelectors).toHaveLength(2);
+        react_2.screen.getByText('Within the last');
+        expect(valueEditors[0]).toHaveValue(4);
+        react_2.screen.getByText('Months');
+        react_2.screen.getByText('More than');
+        expect(valueEditors[1]).not.toHaveValue();
+        react_2.screen.getByText('Minutes');
+        react_2.screen.getByText('Ago');
+        react_2.screen.getByText('Date range');
+        react_2.screen.getByTestId('custom-date-range-editor');
+    });
+    it('should render correctly with empty value', function () {
+        setUp({ value: null });
+        var radios = react_2.screen.getAllByRole('radio');
+        expect(radios[0]).not.toBeChecked();
+        expect(radios[1]).not.toBeChecked();
+        expect(radios[2]).not.toBeChecked();
+        var selectors = react_2.screen.getAllByTestId('date-interval-selector');
+        var valueEditors = react_2.screen.getAllByRole('spinbutton');
+        var periodSelectors = react_2.screen.getAllByRole('combobox');
+        var selectorsValues = react_2.screen.getAllByText('Minutes');
+        expect(selectors).toHaveLength(2);
+        expect(valueEditors).toHaveLength(2);
+        expect(periodSelectors).toHaveLength(2);
+        expect(selectorsValues).toHaveLength(2);
+        react_2.screen.getByText('Within the last');
+        expect(valueEditors[0]).not.toHaveValue();
+        react_2.screen.getByText('More than');
+        expect(valueEditors[1]).not.toHaveValue();
+        react_2.screen.getByText('Ago');
+        react_2.screen.getByText('Date range');
+        react_2.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: mdm_sdk_1.DateRangeTypes.AGO,
+                            period: [4, 'months']
+                        };
+                        user = setUp({ value: value }).user;
+                        return [4 /*yield*/, user.click(react_2.screen.getByLabelText('Within the last'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: mdm_sdk_1.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(react_2.screen.getAllByRole('spinbutton')[0], '3')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: mdm_sdk_1.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(react_2.screen.getAllByRole('combobox')[0])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Days'))];
+                    case 2:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: mdm_sdk_1.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(react_2.screen.getByLabelText('More than'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: mdm_sdk_1.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: mdm_sdk_1.DateRangeTypes.AGO,
+                            period: [1, 'months']
+                        };
+                        user = setUp({ value: value }).user;
+                        return [4 /*yield*/, user.type(react_2.screen.getAllByRole('spinbutton')[1], '3')];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: mdm_sdk_1.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: mdm_sdk_1.DateRangeTypes.AGO,
+                            period: [4, 'months']
+                        };
+                        user = setUp({ value: value }).user;
+                        return [4 /*yield*/, user.click(react_2.screen.getAllByRole('combobox')[1])];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Days'))];
+                    case 2:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: mdm_sdk_1.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(react_2.screen.getByLabelText('Date range'))];
+                    case 1:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: mdm_sdk_1.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: mdm_sdk_1.DateRangeTypes.BETWEEN,
+                            period: [new Date(123), new Date(456)]
+                        };
+                        user = setUp({ value: value }).user;
+                        return [4 /*yield*/, user.click(react_2.screen.getByRole('textbox'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(react_2.screen.getByText('From'), '01/03/2022')];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, user.type(react_2.screen.getByText('To'), '02/03/2022')];
+                    case 3:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(react_2.screen.getByText('Update'))];
+                    case 4:
+                        _a.sent();
+                        expect(defaultProps.onChange).toHaveBeenCalledWith({
+                            type: mdm_sdk_1.DateRangeTypes.BETWEEN,
+                            period: [new Date('01/03/2022'), new Date('02/03/2022')]
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+});

package/cjs/DateRangeSelector/index.d.ts

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

package/cjs/DateRangeSelector/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateRangeSelector = void 0;
+var DateRangeSelector_1 = require("./DateRangeSelector");
+Object.defineProperty(exports, "DateRangeSelector", { enumerable: true, get: function () { return DateRangeSelector_1.DateRangeSelector; } });

package/cjs/DateRangeSelector/styles.d.ts

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