@reltio/components 1.4.1602 → 1.4.1604

package/esm/components/activityLog/ActivityFilterEditor/styles.d.ts

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

package/esm/components/activityLog/ActivityFilterEditor/styles.js

@@ -11,11 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import { makeStyles } from '@mui/styles';
 export var customStyles = {
-    input: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); }
+    input: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); },
+    menuPortal: function (currentStyles) { return (__assign(__assign({}, currentStyles), { zIndex: 1300 })); }
 };
 export var useStyles = makeStyles({
     container: {
-        padding: 16,
         width: 500,
         boxSizing: 'border-box'
     },
@@ -53,9 +53,9 @@ export var useStyles = makeStyles({
         backgroundColor: 'rgba(0, 0, 0, 0.03)',
         borderTop: '4px'
     },
-    filterControls: {
-        display: 'flex',
-        paddingTop: '30px'
+    editorFields: {
+        maxHeight: 400,
+        borderColor: 'rgba(0,0,0,0.12)'
     },
     clearButton: {
         marginRight: 'auto'

package/esm/components/activityLog/ActivityLog/ActivityLog.d.ts

@@ -3,12 +3,6 @@ type Props = {
     width: number;
     height: number;
     activities: unknown[];
-    count: number;
-    page: number;
-    onChangePage: (page: number) => void;
-    rowsPerPage: number;
-    onChangeRowsPerPage: (rowsPerPage: number) => void;
-    rowsPerPageOptions: number[];
 };
-declare const ActivityLog: ({ width, height, activities, count, page, onChangePage, rowsPerPage, onChangeRowsPerPage, rowsPerPageOptions }: Props) => JSX.Element;
+declare const ActivityLog: ({ width, height, activities }: Props) => JSX.Element;
 export default ActivityLog;

package/esm/components/activityLog/ActivityLog/ActivityLog.js

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import i18n from 'ui-i18n';
 import classnames from 'classnames';
 import { adjust, evolve, filter, map, not, pipe } from 'ramda';
 import { buildGroupedItems, flattenGroupedItems, getItemKey, isGroupItem } from './helpers';
@@ -8,12 +7,10 @@ import { removeIgnoredItems } from '../utils/activities';
 import GroupItem from './items/GroupItem/GroupItem';
 import ActivityItem from './items/ActivityItem/ActivityItem';
 import AutoSizeList from '../../AutoSizeList/AutoSizeList';
-import BasicTablePagination from '../../BasicTableView/BasicTablePagination/BasicTablePagination';
 import { CollapsibleItemsProvider } from '../contexts/CollapsibleItemsContext';
 import { useStyles } from './styles';
-var PAGINATION_HEIGHT = 60;
 var ActivityLog = function (_a) {
-    var width = _a.width, height = _a.height, activities = _a.activities, count = _a.count, page = _a.page, onChangePage = _a.onChangePage, rowsPerPage = _a.rowsPerPage, onChangeRowsPerPage = _a.onChangeRowsPerPage, rowsPerPageOptions = _a.rowsPerPageOptions;
+    var width = _a.width, height = _a.height, activities = _a.activities;
     var styles = useStyles();
     var _b = useState([]), groupedItems = _b[0], setGroupedItems = _b[1];
     var toggleGroupedItem = function (index) {
@@ -30,17 +27,18 @@ var ActivityLog = function (_a) {
         var _b;
         var data = _a.data, index = _a.index;
         var item = data[index];
+        var isSingleRow = data.length === 1;
+        var isFirstRow = index === 0;
+        var isLastRow = index === data.length - 1;
         return (React.createElement("div", { className: classnames(styles.listRow, (_b = {},
-                _b[styles.singleRow] = data.length === 1,
-                _b[styles.firstRow] = index === 0,
-                _b[styles.lastRow] = index === data.length - 1,
+                _b[styles.singleRow] = isSingleRow,
+                _b[styles.firstRow] = isFirstRow,
+                _b[styles.lastRow] = isLastRow,
                 _b)) }, isGroupItem(item) ? (React.createElement(GroupItem, { item: item, onToggle: toggleGroupedItem })) : (React.createElement(React.Fragment, null,
             React.createElement(ActivityItem, { item: item }),
-            React.createElement(Divider, { className: styles.rowDivider, light: true, variant: 'inset' })))));
+            !isLastRow && React.createElement(Divider, { className: styles.rowDivider, light: true, variant: "inset" })))));
     }, []); // eslint-disable-line
-    return (React.createElement(React.Fragment, null,
-        React.createElement(CollapsibleItemsProvider, null,
-            React.createElement(AutoSizeList, { width: width, height: height - PAGINATION_HEIGHT, data: flatItems, defaultItemSize: 40, itemKey: getItemKey }, renderRow)),
-        React.createElement(BasicTablePagination, { count: count, onChangePage: onChangePage, page: page, rowsPerPage: rowsPerPage, onChangeRowsPerPage: onChangeRowsPerPage, rowsPerPageOptions: rowsPerPageOptions, labelRowsPerPage: i18n.text('Events per page:') })));
+    return (React.createElement(CollapsibleItemsProvider, null,
+        React.createElement(AutoSizeList, { width: width, height: height, data: flatItems, defaultItemSize: 40, itemKey: getItemKey }, renderRow)));
 };
 export default ActivityLog;

package/esm/components/activityLog/ActivityLog/items/ActivityItem/ActivityItem.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import Typography from '@mui/material/Typography';
 import { getActivityType, splitActivityByType } from '../../../utils/activities';
 import ActivitiesFactory from '../../../activities/ActivitiesFactory';
 import { useStyles } from './styles';
@@ -12,13 +11,12 @@ var ActivityItem = function (_a) {
     return (React.createElement("div", { className: styles.activityItem, "data-reltio-id": "activity-log-item" },
         React.createElement("div", { className: styles.activityIcon }, ActivitiesFactory.getIcon(type)),
         React.createElement("div", { className: styles.activityInfo },
-            React.createElement(Typography, { className: styles.activityUser }, item.user),
-            React.createElement("span", { className: styles.date }, i18n.date(item.timestamp, 'LT')),
-            activities.map(function (activity, index) {
-                return (React.createElement("div", { key: index, className: styles.activityEvent }, ActivitiesFactory.getComponent({
-                    type: getActivityType(activity),
-                    data: activity
-                })));
-            }))));
+            React.createElement("div", { className: styles.userContainer },
+                React.createElement("span", { className: styles.activityUser }, item.user),
+                React.createElement("span", { className: styles.date }, i18n.date(item.timestamp, 'LT'))),
+            activities.map(function (activity, index) { return (React.createElement("div", { key: index, className: styles.activityEvent }, ActivitiesFactory.getComponent({
+                type: getActivityType(activity),
+                data: activity
+            }))); }))));
 };
 export default ActivityItem;

package/esm/components/activityLog/ActivityLog/items/ActivityItem/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"date" | "activityItem" | "activityIcon" | "activityInfo" | "activityUser" | "activityEvent">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"date" | "activityItem" | "activityIcon" | "userContainer" | "activityInfo" | "activityUser" | "activityEvent">;

package/esm/components/activityLog/ActivityLog/items/ActivityItem/styles.js

@@ -4,7 +4,8 @@ export var useStyles = makeStyles(function (theme) { return ({
         display: 'flex',
         minHeight: '40px',
         padding: '10px 0 5px 0',
-        boxSizing: 'border-box'
+        boxSizing: 'border-box',
+        paddingRight: '16px'
     },
     activityIcon: {
         marginLeft: '-13px',
@@ -23,6 +24,9 @@ export var useStyles = makeStyles(function (theme) { return ({
             fontSize: '14px'
         }
     },
+    userContainer: {
+        display: 'flex'
+    },
     activityInfo: {
         flex: 1,
         overflow: 'hidden',
@@ -40,9 +44,6 @@ export var useStyles = makeStyles(function (theme) { return ({
         marginTop: '5px'
     },
     date: {
-        position: 'absolute',
-        right: 0,
-        marginTop: '5px',
         fontSize: 12,
         lineHeight: '16px',
         color: theme.palette.text.primary,

package/esm/components/activityLog/ActivityLog/items/GroupItem/styles.js

@@ -5,7 +5,8 @@ export var useStyles = makeStyles({
         height: '40px',
         alignItems: 'center',
         paddingTop: '10px',
-        boxSizing: 'border-box'
+        boxSizing: 'border-box',
+        paddingRight: '16px'
     },
     groupIcon: {
         marginLeft: '-5px',

package/esm/components/activityLog/ActivityLog/styles.js

@@ -4,14 +4,15 @@ export var useStyles = makeStyles({
         marginLeft: '28px'
     },
     listRow: {
-        paddingLeft: '12px',
+        paddingLeft: '28px',
+        position: 'relative',
         '&::before': {
             content: '""',
             width: '2px',
             position: 'absolute',
             height: '100%',
             top: 0,
-            left: '11px',
+            left: '27px',
             backgroundColor: '#D8D8D8',
             zIndex: '-1'
         },

package/esm/components/activityLog/ActivityLogFilter/styles.js

@@ -1,12 +1,13 @@
 import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     header: {
-        width: 'auto',
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'center',
+        overflow: 'hidden',
+        flexGrow: 1
     },
     label: {
-        paddingLeft: '7px',
+        marginRight: '4px',
         fontSize: '14px'
     },
     buttonsWrapper: {

package/esm/components/activityLog/activities/ActivityTitle/styles.js

@@ -6,8 +6,7 @@ export var useStyles = makeStyles(function (theme) { return ({
         fontSize: 13,
         lineHeight: '15px',
         color: theme.palette.text.primary,
-        marginBottom: 8,
-        marginRight: 70
+        marginBottom: 8
     },
     activityType: {
         flexShrink: 0,

package/esm/components/attributes/DescriptionIcon/DescriptionIcon.d.ts

@@ -25,7 +25,7 @@ export declare const ChipWithTooltip: React.ForwardRefExoticComponent<import("pr
     variant?: import("@mui/types").OverridableStringUnion<"filled" | "outlined", import("@mui/material/Chip").ChipPropsVariantOverrides>;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "label" | "icon" | "children" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "disabled" | "sx" | "variant" | "deleteIcon" | "avatar" | "clickable" | "onDelete" | "skipFocusWhenDisabled">>;
+}, "label" | "icon" | "children" | "size" | "color" | "disabled" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "tabIndex" | "variant" | "deleteIcon" | "avatar" | "clickable" | "onDelete" | "skipFocusWhenDisabled">>;
 type Props = {
     className?: string;
     description?: string;

package/esm/components/attributes/OvIcon/OvIcon.d.ts

@@ -26,7 +26,7 @@ export declare const ChipWithTooltip: React.ForwardRefExoticComponent<import("pr
     variant?: import("@mui/types").OverridableStringUnion<"filled" | "outlined", import("@mui/material/Chip").ChipPropsVariantOverrides>;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "label" | "icon" | "children" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "disabled" | "sx" | "variant" | "deleteIcon" | "avatar" | "clickable" | "onDelete" | "skipFocusWhenDisabled">>;
+}, "label" | "icon" | "children" | "size" | "color" | "disabled" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "tabIndex" | "variant" | "deleteIcon" | "avatar" | "clickable" | "onDelete" | "skipFocusWhenDisabled">>;
 type ComplexWithLabel = NestedAttributeValue | ReferenceAttributeValue;
 type Props = {
     className?: string;

package/esm/components/attributes/inline/SimpleAttributeEditor/styles.d.ts

@@ -2,5 +2,5 @@ type StylesProps = {
     color: string;
     containerWidth: number;
 };
-export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"input" | "inputMultiline" | "textField" | "paper" | "booleanEditor" | "timestampEditor" | "popoverRoot">;
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"input" | "textField" | "paper" | "inputMultiline" | "booleanEditor" | "timestampEditor" | "popoverRoot">;
 export {};

package/esm/components/commonReactSelectComponents/arrowIndicatorStyles.d.ts

@@ -1 +1 @@
-export const useArrowIndicatorStyles: (props?: any) => import("@mui/styles").ClassNameMap<"disabled" | "expanded">;
+export const useArrowIndicatorStyles: (props?: any) => import("@mui/styles").ClassNameMap<"expanded" | "disabled">;

package/esm/components/editors/BooleanRadioEditor/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "editors" | "isCrossedOut" | "checkboxPrimary">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"label" | "isCrossedOut" | "editors" | "checkboxPrimary">;

package/esm/components/editors/CustomDateRangeEditor/CustomDateRangeEditor.js

@@ -5,7 +5,7 @@ import { isNil } from 'ramda';
 import { DataTypes, formatDataTypeValue } from '@reltio/mdm-sdk';
 import { noop } from '../../../core';
 import TextField from '@mui/material/TextField';
-import Menu from '@mui/material/Menu';
+import Popover from '@mui/material/Popover';
 import DropdownIndicatorWithIconButton from '../../commonReactSelectComponents/DropdownIndicatorWithIconButton';
 import DateRangePicker from '../../DateRangePicker/DateRangePicker';
 import { useStyles } from './styles';
@@ -44,16 +44,13 @@ var CustomDateRangeEditor = function (_a) {
             }, InputLabelProps: {
                 shrink: false
             }, placeholder: i18n.text("".concat(placeholder, " \u2014 ").concat(placeholder)) }),
-        React.createElement(Menu, { variant: "menu", open: open, autoFocus: false, classes: { paper: styles.paper }, anchorEl: inputRef.current, onClose: onCancel, anchorOrigin: {
+        React.createElement(Popover, { open: open, anchorEl: inputRef.current, onClose: onCancel, anchorOrigin: {
                 vertical: 'bottom',
-                horizontal: 'left'
+                horizontal: 'right'
             }, transformOrigin: {
                 vertical: 'top',
-                horizontal: 'left'
-            }, elevation: 2, MenuListProps: {
-                autoFocusItem: open,
-                style: { width: '100%' }
-            } },
-            React.createElement(DateRangePicker, { values: values, onCancel: onCancel, onApply: onApply, type: DataTypes.TYPE_ACTIVENESS_DATE }))));
+                horizontal: 'right'
+            }, elevation: 2 },
+            React.createElement(DateRangePicker, { values: values, onApply: onApply, type: DataTypes.TYPE_ACTIVENESS_DATE }))));
 };
 export default CustomDateRangeEditor;

package/esm/components/editors/CustomDateRangeEditor/styles.d.ts

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

package/esm/components/editors/DateEditor/styles.d.ts

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

package/esm/components/editors/DateRangeEditor/DateRangeEditor.d.ts

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

package/esm/components/editors/DateRangeEditor/DateRangeEditor.js

@@ -20,83 +20,35 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { forwardRef } from 'react';
 import classnames from 'classnames';
-import moment from 'moment';
-import { identity, isNil, prop } from 'ramda';
-import { DataTypes, AllDateRangeValues, getRangeOptionLabel, getLocaleFormat } from '@reltio/mdm-sdk';
+import { isNil } from 'ramda';
 import TextField from '@mui/material/TextField';
-import MenuItem from '@mui/material/MenuItem';
-import Typography from '@mui/material/Typography';
-import Menu from '@mui/material/Menu';
-import { getEditorValue, convertValuesToDate } from './helpers';
 import DropdownIndicatorWithIconButton from '../../commonReactSelectComponents/DropdownIndicatorWithIconButton';
-import DateRangePicker from '../../DateRangePicker/DateRangePicker';
+import withDateRangeSelector from '../../../HOCs/withDateRangeSelector/withDateRangeSelector';
 import { useStyles } from './styles';
-var dateFormat = moment.localeData().longDateFormat('L');
-var DateRangeEditor = function (_a) {
+var DateRangeEditor = forwardRef(function (_a, ref) {
     var _b, _c;
-    var _d;
-    var label = _a.label, values = _a.values, options = _a.options, _e = _a.getValuesDateRange, getValuesDateRange = _e === void 0 ? convertValuesToDate : _e, _f = _a.onChange, onChange = _f === void 0 ? identity : _f, _g = _a.dataTypeDefinition, dataTypeDefinition = _g === void 0 ? {
-        type: DataTypes.TYPE_DATE
-    } : _g, DateRangePickerProps = _a.DateRangePickerProps, TextFieldProps = _a.TextFieldProps, MenuProps = _a.MenuProps, otherProps = __rest(_a, ["label", "values", "options", "getValuesDateRange", "onChange", "dataTypeDefinition", "DateRangePickerProps", "TextFieldProps", "MenuProps"]);
-    var classes = otherProps.classes;
-    var isTimestamp = dataTypeDefinition.type === DataTypes.TYPE_TIMESTAMP;
-    var enhancePlaceHolder = isTimestamp ? function (timeFormat) { return timeFormat.replace(/^[hH]:/, 'HH:'); } : identity;
-    var placeholder = isTimestamp ? getLocaleFormat() : dateFormat;
-    var rangeOptions = useMemo(function () {
-        return options ||
-            Object.values(AllDateRangeValues).map(function (option) { return ({ value: option, label: getRangeOptionLabel(option) }); });
-    }, [options]);
-    var inputRef = useRef(null);
-    var _h = useState(false), open = _h[0], setOpen = _h[1];
-    var _j = useState(), customValue = _j[0], setCustomValue = _j[1];
+    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 onItemClick = function (value) {
-        if (value === AllDateRangeValues.PICK_DATE) {
-            setCustomValue(value);
-        }
-        else {
-            setOpen(false);
-            setCustomValue(null);
-            onChange(value);
-        }
-    };
-    var handleToggle = useCallback(function () { return setOpen(function (open) { return !open; }); }, []);
-    var onCancel = function () {
-        setCustomValue(null);
-        setOpen(false);
-    };
-    var editorPlaceholder = "".concat(enhancePlaceHolder(placeholder), " \u2014 ").concat(enhancePlaceHolder(placeholder)).toUpperCase();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TextField, __assign({}, TextFieldProps, otherProps, { label: label, value: (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.value) ||
-                ((_d = getEditorValue(placeholder, dataTypeDefinition, customValue || values, rangeOptions)) === null || _d === void 0 ? void 0 : _d.label), onClick: handleToggle, variant: "filled", size: "small", ref: inputRef, InputProps: __assign({ endAdornment: (React.createElement(DropdownIndicatorWithIconButton, { selectProps: {
-                        classes: {
-                            dropdownIndicator: classnames(styles.dropdownIndicator, classes === null || classes === void 0 ? void 0 : classes.dropdownIndicator)
-                        },
-                        menuIsOpen: open
-                    }, innerProps: {} })), classes: {
-                    root: classnames(styles.inputRoot, (_b = {}, _b[styles.uppercase] = !customValue && Array.isArray(values), _b)),
-                    underline: classnames((_c = {}, _c[styles.underline] = open, _c)),
-                    adornedEnd: styles.adornedEnd
-                }, disableUnderline: isNil(values), readOnly: true }, TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.InputProps), InputLabelProps: {
-                classes: {
-                    root: open ? styles.inputLabel : undefined
-                },
-                shrink: !isNil(label)
-            }, placeholder: editorPlaceholder })),
-        React.createElement(Menu, __assign({ variant: "menu", open: open, autoFocus: false, classes: { paper: styles.paper }, anchorEl: inputRef.current, onClose: onCancel, anchorOrigin: {
-                vertical: 'bottom',
-                horizontal: 'left'
-            }, transformOrigin: {
-                vertical: 'top',
-                horizontal: 'left'
-            }, elevation: 2, MenuListProps: {
-                autoFocusItem: open,
-                style: {
-                    width: customValue ? '100%' : prop('clientWidth', inputRef.current)
-                }
-            } }, MenuProps), customValue ? (React.createElement(DateRangePicker, __assign({ values: getValuesDateRange(values), onCancel: onCancel, onApply: onItemClick, type: dataTypeDefinition.type }, DateRangePickerProps))) : (rangeOptions.map(function (option) { return (React.createElement(MenuItem, { key: option.value, value: option.value, onClick: function () { return onItemClick(option.value); }, className: styles.menuItem },
-            React.createElement(Typography, { classes: { root: styles.menuText } }, option.label))); })))));
-};
-export default DateRangeEditor;
+    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(DropdownIndicatorWithIconButton, { 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/components/editors/DateRangeEditor/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "uppercase" | "menuItem" | "inputRoot" | "adornedEnd" | "inputLabel" | "dropdownIndicator" | "paper" | "menuText">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "uppercase" | "inputLabel" | "adornedEnd" | "inputRoot" | "dropdownIndicator">;

package/esm/components/editors/DateRangeEditor/styles.js

@@ -5,18 +5,6 @@ export var useStyles = makeStyles(function (theme) { return ({
         cursor: 'pointer',
         color: 'rgba(0, 0, 0, 0.54)'
     },
-    paper: {
-        minWidth: '112px'
-    },
-    menuItem: {
-        minHeight: '32px'
-    },
-    menuText: {
-        color: theme.palette.text.primary,
-        fontSize: '13px',
-        lineHeight: '15px',
-        letterSpacing: 0
-    },
     underline: {
         '&:after': {
             transform: 'scaleX(1)'

package/esm/components/editors/TimestampEditor/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "isCrossedOut" | "inputRoot" | "adornedEnd" | "iconButtonRoot" | "inputLabel">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"underline" | "iconButtonRoot" | "inputLabel" | "adornedEnd" | "inputRoot" | "isCrossedOut">;

package/esm/components/history/DateRangeSelector/DateRangeSelector.js

@@ -52,7 +52,7 @@ var DateRangeSelector = function (_a) {
             setInterval(emptyInterval);
         }
     }, [value]);
-    return (React.createElement("div", { className: classnames(styles.root, className) },
+    return (React.createElement("div", { className: classnames(styles.root, className), "data-reltio-id": "date-range-selector" },
         React.createElement(Typography, { className: styles.title, variant: 'subtitle1' }, i18n.text('Date')),
         React.createElement("div", { className: styles.intervalContainer },
             React.createElement(SimpleDropDownSelector, { label: '', className: styles.typeInput, value: {

package/esm/components/history/HistoryActivitySelector/HistoryActivitySelector.d.ts

@@ -4,6 +4,7 @@ type Props = {
     selectedHistoryActivityTypes: HistoryActivityType[];
     onChange: (activities: HistoryActivityType[]) => void;
     className?: string;
+    disableUnderline?: boolean;
 };
-declare const HistoryActivitySelector: ({ selectedHistoryActivityTypes, onChange, className }: Props) => JSX.Element;
+declare const HistoryActivitySelector: ({ selectedHistoryActivityTypes, onChange, className, disableUnderline }: Props) => JSX.Element;
 export default HistoryActivitySelector;

package/esm/components/history/HistoryActivitySelector/HistoryActivitySelector.js

@@ -8,15 +8,18 @@ import DropdownIndicatorWithIconButton from '../../commonReactSelectComponents/D
 import { getHistoryActivityLabel, historyActivityOptions } from './utils';
 import { customStyles, useStyles } from './styles';
 var HistoryActivitySelector = function (_a) {
-    var selectedHistoryActivityTypes = _a.selectedHistoryActivityTypes, onChange = _a.onChange, className = _a.className;
+    var selectedHistoryActivityTypes = _a.selectedHistoryActivityTypes, onChange = _a.onChange, className = _a.className, disableUnderline = _a.disableUnderline;
     var styles = useStyles();
     var valueToOption = function (value) { return ({ value: value, label: getHistoryActivityLabel(value) }); };
     var prepareValues = function (values) { return values.map(valueToOption); };
     var options = prepareValues(historyActivityOptions);
-    return (React.createElement("div", { className: classnames(styles.root, className) },
+    return (React.createElement("div", { className: classnames(styles.root, className), "data-reltio-id": "history-activity-selector" },
         React.createElement(Typography, { className: styles.title, variant: 'subtitle1' }, i18n.text('Activity')),
-        React.createElement(MultiSelect, { value: prepareValues(selectedHistoryActivityTypes), onChange: pipe(defaultTo([]), pluck('value'), onChange), options: options, TextFieldProps: { classes: { root: styles.dropDownInput } }, components: {
+        React.createElement(MultiSelect, { value: prepareValues(selectedHistoryActivityTypes), onChange: pipe(defaultTo([]), pluck('value'), onChange), options: options, TextFieldProps: {
+                InputProps: { disableUnderline: disableUnderline },
+                classes: { root: styles.dropDownInput }
+            }, components: {
                 DropdownIndicator: DropdownIndicatorWithIconButton
-            }, styles: customStyles, classes: styles, menuPlacement: "bottom", menuPortalTarget: document.body })));
+            }, styles: customStyles, classes: styles, menuPlacement: "bottom", menuPortalTarget: document.body, menuShouldBlockScroll: true, captureMenuScroll: false })));
 };
 export default HistoryActivitySelector;

package/esm/components/history/HistoryFilterButton/HistoryFilterButton.js

@@ -15,7 +15,10 @@ import { curry, dissoc } from 'ramda';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import Button from '@mui/material/Button';
 import Popover from '@mui/material/Popover';
-import Typography from '@mui/material/Typography';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import Divider from '@mui/material/Divider';
 import { isDateRangeValid } from '@reltio/mdm-sdk';
 import { SmallIconButton } from '../../SmallIconButton';
 import UserSelector from '../../UserSelector/UserSelector';
@@ -64,14 +67,16 @@ var HistoryFilterButton = function (_a) {
                 vertical: 'top',
                 horizontal: 'right'
             } },
-            React.createElement("div", { className: styles.filterContainer },
-                React.createElement(Typography, { variant: "h6" }, i18n.text('Filter')),
-                React.createElement("div", { className: styles.filterContainerScrollable },
-                    React.createElement(DateRangeSelector, { value: dateRange, onChange: handlePropChange('dateRange'), className: styles.filterItem }),
-                    React.createElement(UserSelector, { selectedUsers: users, onChange: handlePropChange('users'), className: styles.filterItem }),
-                    React.createElement(HistoryActivitySelector, { selectedHistoryActivityTypes: activities, onChange: handlePropChange('activities'), className: styles.filterItem }),
-                    React.createElement(AttributeSelector, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes'), className: styles.filterItem, title: i18n.text('Attribute updated') }))),
-            React.createElement("div", { className: styles.filterControls },
+            React.createElement(DialogTitle, null, i18n.text('Filter')),
+            React.createElement(DialogContent, { dividers: true, className: styles.filterContainer },
+                React.createElement(DateRangeSelector, { value: dateRange, onChange: handlePropChange('dateRange'), className: styles.filterItem }),
+                React.createElement(Divider, { light: true, className: styles.divider }),
+                React.createElement(UserSelector, { selectedUsers: users, onChange: handlePropChange('users'), className: styles.filterItem, disableUnderline: true }),
+                React.createElement(Divider, { light: true, className: styles.divider }),
+                React.createElement(HistoryActivitySelector, { selectedHistoryActivityTypes: activities, onChange: handlePropChange('activities'), className: styles.filterItem, disableUnderline: true }),
+                React.createElement(Divider, { light: true, className: styles.divider }),
+                React.createElement(AttributeSelector, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes'), className: styles.filterItem, title: i18n.text('Attribute updated'), disableUnderline: true })),
+            React.createElement(DialogActions, null,
                 React.createElement(Button, { onClick: clearAllButtonHandler, className: styles.clearButton }, i18n.text('Clear all')),
                 React.createElement(Button, { onClick: togglePopup }, i18n.text('Cancel')),
                 React.createElement(Button, { color: "primary", onClick: applyButtonHandler }, i18n.text('Apply'))))));

package/esm/components/history/HistoryFilterButton/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"input" | "popup" | "filterControls" | "clearButton" | "filterContainer" | "filterContainerScrollable" | "filterItem">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"input" | "popup" | "divider" | "clearButton" | "filterContainer" | "filterItem">;