@reltio/components 1.4.842 → 1.4.846

package/components/AttributeSelector/AttributeSelector.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { AttributeOption } from '../../types';
+import { TEntityType } from '@reltio/mdm-sdk';
+declare type Props = {
+    entityType: TEntityType;
+    selectedAttributes: AttributeOption[];
+    className?: string;
+    onChange?: (attributes: AttributeOption[]) => void;
+    title?: string;
+    disableUnderline?: boolean;
+    menuPlacement?: string;
+};
+declare const AttributeSelector: ({ entityType, selectedAttributes, className, onChange, title, disableUnderline, menuPlacement }: Props) => JSX.Element;
+export default AttributeSelector;

package/components/{activityLog/ActivityFilterEditor → AttributeSelector}/AttributeSelector.js

@@ -52,13 +52,13 @@ var react_redux_1 = require("react-redux");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var MultiSelect_1 = __importDefault(require("../../ReactSelect/MultiSelect"));
-var MultiValue_1 = __importDefault(require("../../ReactSelect/commonComponents/MultiValue"));
-var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
-var AttributeListItem_1 = __importDefault(require("../../AttributeListItem/AttributeListItem"));
+var MultiSelect_1 = __importDefault(require("../ReactSelect/MultiSelect"));
+var MultiValue_1 = __importDefault(require("../ReactSelect/commonComponents/MultiValue"));
+var DropdownIndicatorWithIconButton_1 = __importDefault(require("../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
+var AttributeListItem_1 = __importDefault(require("../AttributeListItem/AttributeListItem"));
 var styles_1 = require("./styles");
 var AttributeSelector = function (_a) {
-    var selectedAttributes = _a.selectedAttributes, entityType = _a.entityType, onChange = _a.onChange;
+    var entityType = _a.entityType, selectedAttributes = _a.selectedAttributes, className = _a.className, onChange = _a.onChange, title = _a.title, disableUnderline = _a.disableUnderline, _b = _a.menuPlacement, menuPlacement = _b === void 0 ? 'bottom' : _b;
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
     var styles = styles_1.useStyles();
     var prepareItems = react_1.useCallback(function (data, level, prevLabel) {
@@ -79,7 +79,7 @@ var AttributeSelector = function (_a) {
             return acc.concat(subAttributes ? prepareItems(subAttributes, level + 1, chipLabel) : []);
         }, []);
     }, [metadata]);
-    var options = react_1.useMemo(function () { return prepareItems(entityType === null || entityType === void 0 ? void 0 : entityType.attributes); }, [entityType, prepareItems]);
+    var options = react_1.useMemo(function () { return prepareItems((entityType === null || entityType === void 0 ? void 0 : entityType.attributes) || []); }, [entityType, prepareItems]);
     var CustomOption = function (_a) {
         var isFocused = _a.isFocused, isSelected = _a.isSelected, data = _a.data, label = _a.label, innerProps = _a.innerProps;
         return (react_1.default.createElement("div", __assign({}, innerProps),
@@ -89,15 +89,15 @@ var AttributeSelector = function (_a) {
         var data = _a.data, props = __rest(_a, ["data"]);
         return (react_1.default.createElement(MultiValue_1.default, __assign({}, props), data.chipLabel));
     };
-    return (react_1.default.createElement("div", { className: styles.borderBottom },
-        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('Attribute')),
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.root, className) },
+        react_1.default.createElement(Typography_1.default, { className: styles.title, variant: 'subtitle1' }, title || ui_i18n_1.default.text('Attribute')),
         react_1.default.createElement(MultiSelect_1.default, { value: selectedAttributes, options: options, TextFieldProps: {
-                InputProps: { disableUnderline: true },
+                InputProps: { disableUnderline: disableUnderline },
                 classes: { root: styles.dropDownInput }
             }, components: {
                 DropdownIndicator: DropdownIndicatorWithIconButton_1.default,
                 MultiValue: CustomMultiValue,
                 Option: CustomOption
-            }, onChange: ramda_1.pipe(ramda_1.defaultTo([]), onChange), styles: styles_1.customStyles, classes: styles, menuPlacement: "bottom" })));
+            }, onChange: ramda_1.pipe(ramda_1.defaultTo([]), onChange), styles: styles_1.customStyles, classes: styles, menuPlacement: menuPlacement })));
 };
 exports.default = AttributeSelector;

package/components/AttributeSelector/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const customStyles: {
+    input: (currentStyles: any) => any;
+};
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"option" | "title" | "root" | "dropDownInput" | "noOptionsMessage">;

package/components/AttributeSelector/styles.js

@@ -0,0 +1,41 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = exports.customStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.customStyles = {
+    input: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); }
+};
+exports.useStyles = styles_1.makeStyles({
+    root: {
+        flex: 1
+    },
+    title: {
+        paddingBottom: '10px',
+        paddingLeft: '5px',
+        fontSize: '14px'
+    },
+    dropDownInput: {
+        width: '100%',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.03)',
+        borderTop: '4px'
+    },
+    option: {
+        fontSize: '14px',
+        height: '32px'
+    },
+    noOptionsMessage: {
+        fontSize: '14px'
+    }
+});

package/components/BasicView/styles.js

@@ -1,13 +1,18 @@
 "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);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
-exports.useStyles = styles_1.makeStyles({
-    'basic-view__paper': {
-        display: 'flex',
-        flexDirection: 'column',
-        boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
-        borderRadius: '3px',
-        backgroundColor: '#FFFFFF'
-    }
-});
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    'basic-view__paper': __assign({ display: 'flex', flexDirection: 'column' }, theme.basicView)
+}); });

package/components/DateIntervalSelector/DateIntervalSelector.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    interval: [number, string];
+    onChange: ([number, string]: [any, any]) => void;
+    onFocus?: () => void;
+};
+declare const DateIntervalSelector: ({ interval: [value, unit], onChange, onFocus }: Props) => JSX.Element;
+export default DateIntervalSelector;

package/components/{activityLog/ActivityFilterEditor/IntervalSelector.js → DateIntervalSelector/DateIntervalSelector.js}

@@ -5,12 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var ramda_1 = require("ramda");
-var classnames_1 = __importDefault(require("classnames"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var capitalize_1 = __importDefault(require("@material-ui/core/utils/capitalize"));
 var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
-var SimpleDropDownSelector_1 = __importDefault(require("../../SimpleDropDownSelector/SimpleDropDownSelector"));
-var utils_1 = require("../../../core/utils");
+var SimpleDropDownSelector_1 = __importDefault(require("../SimpleDropDownSelector/SimpleDropDownSelector"));
+var utils_1 = require("../../core/utils");
 var styles_1 = require("./styles");
 var periods = [
     ui_i18n_1.default.text('minutes'),
@@ -20,7 +19,7 @@ var periods = [
     ui_i18n_1.default.text('months'),
     ui_i18n_1.default.text('years')
 ];
-var IntervalSelector = function (_a) {
+var DateIntervalSelector = function (_a) {
     var _b = _a.interval, value = _b[0], unit = _b[1], onChange = _a.onChange, onFocus = _a.onFocus;
     var styles = styles_1.useStyles();
     var getIntervalFromValue = function (newValue) { return [newValue, unit]; };
@@ -30,22 +29,14 @@ var IntervalSelector = function (_a) {
     };
     var onNumberChange = ramda_1.pipe(utils_1.getValue, parseInt, getIntervalFromValue, onChange);
     var onUnitChange = ramda_1.pipe(getIntervalFromUnit, onChange);
-    return (react_1.default.createElement("div", { className: styles.intervalContainer },
-        react_1.default.createElement(TextField_1.default, { type: "number", value: value || '', onChange: onNumberChange, inputProps: { min: 1, onFocus: onFocus }, InputProps: {
-                classes: {
-                    root: classnames_1.default(styles.input, styles.labels)
-                }
-            }, className: classnames_1.default(styles.dateInput, styles.dateInputNumber) }),
-        react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', placeholder: capitalize_1.default(unit), className: classnames_1.default(styles.dateInputPeriod), value: { value: unit, label: capitalize_1.default(unit) }, options: periods.map(function (value) { return ({
+    return (react_1.default.createElement("div", { className: styles.root },
+        react_1.default.createElement(TextField_1.default, { 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.default, { label: '', placeholder: capitalize_1.default(unit), className: styles.inputUnit, value: { value: unit, label: capitalize_1.default(unit) }, options: periods.map(function (value) { return ({
                 value: value,
                 label: capitalize_1.default(value)
             }); }), onChange: onUnitChange, TextFieldProps: {
                 inputProps: { onFocus: onFocus },
-                InputProps: {
-                    classes: {
-                        root: classnames_1.default(styles.input, styles.labels)
-                    }
-                }
+                InputProps: { classes: { root: styles.input } }
             } })));
 };
-exports.default = IntervalSelector;
+exports.default = DateIntervalSelector;

package/components/DateIntervalSelector/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"input" | "root" | "inputNumber" | "inputUnit">;

package/components/DateIntervalSelector/styles.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    root: {
+        display: 'flex',
+        flex: 1
+    },
+    input: {
+        height: '100%',
+        paddingLeft: '12px',
+        paddingRight: '8px',
+        fontSize: '14px'
+    },
+    inputNumber: {
+        minWidth: '60px',
+        marginRight: 10,
+        height: '100%',
+        backgroundColor: 'rgba(0, 0, 0, 0.03)'
+    },
+    inputUnit: {
+        width: '100%'
+    }
+});

package/components/DateRangePicker/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "button" | "header" | "container" | "dateInput" | "actionButtons" | "dateRangeContainer">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "button" | "header" | "container" | "actionButtons" | "dateRangeContainer" | "dateInput">;

package/components/ImageGalleryDialog/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"content" | "toolbar" | "paper" | "backdrop" | "closeIcon" | "appBar" | "closeButton" | "headerLeft" | "headerCenter" | "headerRight" | "modeSwitcher">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"content" | "toolbar" | "backdrop" | "paper" | "closeIcon" | "appBar" | "closeButton" | "headerLeft" | "headerCenter" | "headerRight" | "modeSwitcher">;

package/components/ReltioGridLayout/ReltioGridLayout.d.ts

@@ -1,5 +1,5 @@
 declare var _default: React.MemoExoticComponent<{
-    ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable }: {
+    ({ views, layout, layoutOptions, onLayoutChanged, draggableHandle, LayoutItem, onRemove, onDrop, droppingItem, isDroppable, classes }: {
         views: any;
         layout: any;
         layoutOptions: any;
@@ -10,6 +10,7 @@ declare var _default: React.MemoExoticComponent<{
         onDrop: any;
         droppingItem: any;
         isDroppable: any;
+        classes: any;
     }): JSX.Element;
     defaultProps: {
         layoutOptions: {
@@ -19,6 +20,7 @@ declare var _default: React.MemoExoticComponent<{
         };
         onConfigChanged: any;
         onLayoutChanged: any;
+        classes: {};
     };
     propTypes: {
         views: PropTypes.Requireable<any[]>;
@@ -32,6 +34,9 @@ declare var _default: React.MemoExoticComponent<{
         draggableHandle: PropTypes.Requireable<string>;
         isDroppable: PropTypes.Requireable<boolean>;
         droppingItem: PropTypes.Requireable<object>;
+        classes: PropTypes.Requireable<PropTypes.InferProps<{
+            item: PropTypes.Requireable<string>;
+        }>>;
     };
 }>;
 export default _default;

package/components/ReltioGridLayout/ReltioGridLayout.js

@@ -1,4 +1,15 @@
 "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;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -32,14 +43,14 @@ var helpers_1 = require("./helpers");
 var styles_1 = require("./styles");
 var ReltioGridLayout = function (_a) {
     var _b;
-    var views = _a.views, layout = _a.layout, layoutOptions = _a.layoutOptions, onLayoutChanged = _a.onLayoutChanged, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable;
+    var views = _a.views, layout = _a.layout, layoutOptions = _a.layoutOptions, onLayoutChanged = _a.onLayoutChanged, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, classes = _a.classes;
     var ref = react_1.useRef();
     var styles = styles_1.useStyles();
     var _c = react_1.useState(null), fullscreenItemId = _c[0], setFullscreenItemId = _c[1];
     var _d = react_1.useState(0), width = _d[0], setWidth = _d[1];
     var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
     var processedLayout = react_1.useMemo(function () { return helpers_1.reltioLayoutToReactGridLayout(layout); }, [layout]);
-    var onReltioLayoutChanged = ramda_1.pipe(helpers_1.reactGridLayoutToReltioLayout, onLayoutChanged);
+    var onReltioLayoutChanged = ramda_1.pipe(helpers_1.reactGridLayoutToReltioLayout, helpers_1.copyPropsFromPreviousLayout(['autosizing'], layout), onLayoutChanged);
     var handleDrop = function (layout, layoutItem, e) {
         if (onDrop) {
             onDrop(helpers_1.reactGridLayoutToReltioLayout(layout), helpers_1.reactGridLayoutItemToReltioLayoutItem(layoutItem), e);
@@ -47,11 +58,34 @@ var ReltioGridLayout = function (_a) {
     };
     var onToggleFullscreen = react_1.useCallback(function (id) { return setFullscreenItemId(function (prevId) { return (prevId ? null : id); }); }, []);
     var isFullscreenEnabled = fullscreenItemId !== null;
+    var onItemHeightResize = react_1.useCallback(function (height, layoutId) {
+        var isLayoutChanged = false;
+        var newLayout = layout.map(function (layoutItem) {
+            if (layoutItem.id === layoutId && height) {
+                var newHeight = helpers_1.calcHeight(height, layoutOptions);
+                if (layoutItem.height !== newHeight) {
+                    isLayoutChanged = true;
+                    return __assign(__assign({}, layoutItem), { minHeight: newHeight, maxHeight: newHeight, height: newHeight });
+                }
+            }
+            return layoutItem;
+        });
+        if (isLayoutChanged) {
+            onLayoutChanged(newLayout);
+        }
+    }, [layout, layoutOptions, onLayoutChanged]);
+    var getAutosizeComponent = function (layoutItemId) {
+        return (react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: function (width, height) {
+                onItemHeightResize(height, layoutItemId);
+            } }));
+    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_resize_detector_1.default, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
         react_1.default.createElement(react_grid_layout_1.default, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: onReltioLayoutChanged, isResizable: !isFullscreenEnabled, isDraggable: !isFullscreenEnabled, className: classnames_1.default(styles.gridLayout, (_b = {}, _b[styles.gridFullscreen] = isFullscreenEnabled, _b)), onDrop: handleDrop, droppingItem: droppingItem, isDroppable: isDroppable }, processedLayout.map(function (layoutItem) {
             var isItemFullscreen = fullscreenItemId === layoutItem.i;
-            return (react_1.default.createElement(LayoutItem, { key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames_1.default({ fullscreen: isItemFullscreen }), isFullscreen: isItemFullscreen }));
+            var isAutosize = (helpers_1.getReltioLayoutItemById(layout, layoutItem.i) || {}).autosizing;
+            var autosizeComponent = isAutosize ? { AutosizeComponent: getAutosizeComponent(layoutItem.i) } : {};
+            return (react_1.default.createElement(LayoutItem, __assign({ key: layoutItem.i, layoutItemConfig: layoutItem, views: views, onToggleFullscreen: onToggleFullscreen, onRemove: onRemove, className: classnames_1.default({ fullscreen: isItemFullscreen }, classes.item), isFullscreen: isItemFullscreen }, autosizeComponent)));
         }))));
 };
 ReltioGridLayout.defaultProps = {
@@ -61,7 +95,8 @@ ReltioGridLayout.defaultProps = {
         margin: [15, 15]
     },
     onConfigChanged: ramda_1.identity,
-    onLayoutChanged: ramda_1.identity
+    onLayoutChanged: ramda_1.identity,
+    classes: {}
 };
 ReltioGridLayout.propTypes = {
     views: prop_types_1.default.array,
@@ -74,6 +109,9 @@ ReltioGridLayout.propTypes = {
     LayoutItem: prop_types_1.default.elementType,
     draggableHandle: prop_types_1.default.string,
     isDroppable: prop_types_1.default.bool,
-    droppingItem: prop_types_1.default.object
+    droppingItem: prop_types_1.default.object,
+    classes: prop_types_1.default.shape({
+        item: prop_types_1.default.string
+    })
 };
 exports.default = react_1.memo(ReltioGridLayout);

package/components/ReltioGridLayout/helpers.d.ts

@@ -47,3 +47,6 @@ export function reactGridLayoutItemToReltioLayoutItem({ x, y, w, h, maxW, minW,
 };
 export function reltioLayoutToReactGridLayout(layout: any): any;
 export function reactGridLayoutToReltioLayout(layout: any): any;
+export const getReltioLayoutItemById: any;
+export const copyPropsFromPreviousLayout: any;
+export function calcHeight(height: any, options: any): number;

package/components/ReltioGridLayout/helpers.js

@@ -11,7 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reactGridLayoutToReltioLayout = exports.reltioLayoutToReactGridLayout = exports.reactGridLayoutItemToReltioLayoutItem = exports.reltioLayoutItemToReactGridLayoutItem = exports.getReltioViewId = void 0;
+exports.calcHeight = exports.copyPropsFromPreviousLayout = exports.getReltioLayoutItemById = exports.reactGridLayoutToReltioLayout = exports.reltioLayoutToReactGridLayout = exports.reactGridLayoutItemToReltioLayoutItem = exports.reltioLayoutItemToReactGridLayoutItem = exports.getReltioViewId = void 0;
+var ramda_1 = require("ramda");
 var getReltioViewId = function (id) { return id.split(/\d+_/)[1]; };
 exports.getReltioViewId = getReltioViewId;
 var reltioLayoutItemToReactGridLayoutItem = function (_a) {
@@ -50,3 +51,15 @@ var reltioLayoutToReactGridLayout = function (layout) { return (layout || []).ma
 exports.reltioLayoutToReactGridLayout = reltioLayoutToReactGridLayout;
 var reactGridLayoutToReltioLayout = function (layout) { return (layout || []).map(exports.reactGridLayoutItemToReltioLayoutItem); };
 exports.reactGridLayoutToReltioLayout = reactGridLayoutToReltioLayout;
+exports.getReltioLayoutItemById = ramda_1.curry(function (layout, id) { return (layout || []).find(ramda_1.propEq('id', id)); });
+var updateExtraPropsInLayoutItem = ramda_1.curry(function (props, from, to) { return ramda_1.mergeAll([to, ramda_1.pick(props, from)]); });
+exports.copyPropsFromPreviousLayout = ramda_1.curry(function (props, oldReltioLayout, reltioLayout) {
+    return (reltioLayout || []).map(function (layoutItem) {
+        return ramda_1.pipe(ramda_1.prop('id'), exports.getReltioLayoutItemById(oldReltioLayout), ramda_1.defaultTo({}), updateExtraPropsInLayoutItem(props, ramda_1.__, layoutItem))(layoutItem);
+    });
+});
+var calcHeight = function (height, options) {
+    var margin = options.margin, rowHeight = options.rowHeight;
+    return Math.ceil((height + margin[1]) / (rowHeight + margin[1]));
+};
+exports.calcHeight = calcHeight;

package/components/UploadImageDialog/ImageByUrlField/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"errorMessage" | "input" | "root" | "paper" | "inputRoot">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"errorMessage" | "input" | "root" | "inputRoot" | "paper">;

package/components/UserSelector/UserSelector.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type Props = {
+    selectedUsers: string[];
+    onChange: (activities: string[]) => void;
+    className?: string;
+    disableUnderline?: boolean;
+};
+declare const UserSelector: ({ selectedUsers, onChange, className, disableUnderline }: Props) => JSX.Element;
+export default UserSelector;

package/components/{activityLog/ActivityFilterEditor → UserSelector}/UserSelector.js

@@ -28,13 +28,13 @@ var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var ramda_1 = require("ramda");
 var classnames_1 = __importDefault(require("classnames"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var MultiSelect_1 = __importDefault(require("../../ReactSelect/MultiSelect"));
-var DropdownIndicatorWithIconButton_1 = __importDefault(require("../../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
+var MultiSelect_1 = __importDefault(require("../ReactSelect/MultiSelect"));
+var DropdownIndicatorWithIconButton_1 = __importDefault(require("../commonReactSelectComponents/DropdownIndicatorWithIconButton"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var styles_1 = require("./styles");
 var UserSelector = function (_a) {
-    var selectedUsers = _a.selectedUsers, onChange = _a.onChange;
+    var selectedUsers = _a.selectedUsers, onChange = _a.onChange, className = _a.className, disableUnderline = _a.disableUnderline;
     var styles = styles_1.useStyles();
     var valueToOption = function (value) { return ({ value: value, label: value }); };
     var prepareValues = function (values) { return values.map(valueToOption); };
@@ -50,10 +50,10 @@ var UserSelector = function (_a) {
         }
         return cachedRequest.current.then(ramda_1.pipe(ramda_1.prop('array'), ramda_1.pluck('username'), filterUsers(inputValue), prepareValues));
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.filterSubtitle, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('User')),
+    return (react_1.default.createElement("div", { className: classnames_1.default(styles.root, className) },
+        react_1.default.createElement(Typography_1.default, { className: styles.title, variant: 'subtitle1' }, ui_i18n_1.default.text('User')),
         react_1.default.createElement(MultiSelect_1.default, { value: prepareValues(selectedUsers), onChange: ramda_1.pipe(ramda_1.defaultTo([]), ramda_1.pluck('value'), onChange), defaultOptions: true, getOptions: getOptions, TextFieldProps: {
-                InputProps: { disableUnderline: true },
+                InputProps: { disableUnderline: disableUnderline },
                 className: styles.dropDownInput
             }, components: {
                 DropdownIndicator: DropdownIndicatorWithIconButton_1.default

package/components/UserSelector/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const customStyles: {
+    input: (currentStyles: any) => any;
+    loadingMessage: (currentStyles: any) => any;
+};
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"option" | "title" | "root" | "dropDownInput">;

package/components/UserSelector/styles.js

@@ -0,0 +1,39 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = exports.customStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.customStyles = {
+    input: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); },
+    loadingMessage: function (currentStyles) { return (__assign(__assign({}, currentStyles), { fontSize: '14px' })); }
+};
+exports.useStyles = styles_1.makeStyles({
+    root: {
+        flex: 1
+    },
+    title: {
+        paddingBottom: '10px',
+        paddingLeft: '5px',
+        fontSize: '14px'
+    },
+    dropDownInput: {
+        width: '100%',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.03)',
+        borderTop: '4px'
+    },
+    option: {
+        fontSize: '14px',
+        height: '32px'
+    }
+});

package/components/activityLog/ActivityFilterEditor/ActivityFilterEditor.js

@@ -42,9 +42,9 @@ var Button_1 = __importDefault(require("@material-ui/core/Button"));
 var types_1 = require("../types");
 var getSelectorActivityTypes_1 = require("./utils/getSelectorActivityTypes");
 var ActivitySelector_1 = __importDefault(require("./ActivitySelector"));
-var AttributeSelector_1 = __importDefault(require("./AttributeSelector"));
+var AttributeSelector_1 = __importDefault(require("../../AttributeSelector/AttributeSelector"));
 var SourceSelector_1 = __importDefault(require("./SourceSelector"));
-var UserSelector_1 = __importDefault(require("./UserSelector"));
+var UserSelector_1 = __importDefault(require("../../UserSelector/UserSelector"));
 var DateRangeSelector_1 = __importDefault(require("./DateRangeSelector"));
 var hooks_1 = require("../../../hooks");
 var ramda_1 = require("ramda");
@@ -69,10 +69,10 @@ var ActivityFilterEditor = function (_a) {
     var ActivityFilterRenderer = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(ActivitySelector_1.default, { activityTypes: getSelectorActivityTypes_1.getSelectorActivityTypes(metadata, entityType), selectedActivityTypes: activities, onChange: handlePropChange('activities') }),
         hasEntityChanged && entityType && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(AttributeSelector_1.default, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes') }),
+            react_1.default.createElement(AttributeSelector_1.default, { selectedAttributes: attributes, entityType: entityType, onChange: handlePropChange('attributes'), className: styles.borderBottom, disableUnderline: true }),
             react_1.default.createElement(SourceSelector_1.default, { selectedSources: sources, onChange: handlePropChange('sources') }))),
         react_1.default.createElement(DateRangeSelector_1.default, { value: dateRange, onChange: handlePropChange('dateRange') }),
-        react_1.default.createElement(UserSelector_1.default, { selectedUsers: users, onChange: handlePropChange('users') }),
+        react_1.default.createElement(UserSelector_1.default, { selectedUsers: users, onChange: handlePropChange('users'), disableUnderline: true }),
         react_1.default.createElement("div", { className: classnames_1.default(styles.borderBottom, styles.filterControls) },
             react_1.default.createElement(Button_1.default, { onClick: ramda_1.pipe(clearCurrentValue, onClear), className: styles.clearButton }, ui_i18n_1.default.text('Clear all')),
             react_1.default.createElement(Button_1.default, { onClick: onCancel }, ui_i18n_1.default.text('Cancel')),

package/components/activityLog/ActivityFilterEditor/DateRangeSelector.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ActivitiesFilterDateRange } from '../types';
+import { DateRangeFilter } from '../../../types';
 declare type Props = {
-    value: ActivitiesFilterDateRange;
-    onChange: (range: ActivitiesFilterDateRange) => void;
+    value: DateRangeFilter;
+    onChange: (range: DateRangeFilter) => void;
 };
 declare const DateRangeSelector: ({ value, onChange }: Props) => JSX.Element;
 export default DateRangeSelector;

package/components/activityLog/ActivityFilterEditor/DateRangeSelector.js

@@ -41,10 +41,10 @@ var FormControlLabel_1 = __importDefault(require("@material-ui/core/FormControlL
 var Radio_1 = __importDefault(require("@material-ui/core/Radio"));
 var RadioGroup_1 = __importDefault(require("@material-ui/core/RadioGroup"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
-var types_1 = require("../types");
-var IntervalSelector_1 = __importDefault(require("./IntervalSelector"));
+var types_1 = require("../../../types");
+var DateIntervalSelector_1 = __importDefault(require("../../DateIntervalSelector/DateIntervalSelector"));
 var utils_1 = require("../../../core/utils");
-var ActivityDateRangeEditor_1 = __importDefault(require("./ActivityDateRangeEditor"));
+var CustomDateRangeEditor_1 = __importDefault(require("../../editors/CustomDateRangeEditor/CustomDateRangeEditor"));
 var hooks_1 = require("../../../hooks");
 var styles_1 = require("./styles");
 var emptyDates = [null, null];
@@ -108,13 +108,13 @@ var DateRangeSelector = function (_a) {
         react_1.default.createElement(RadioGroup_1.default, { value: (value === null || value === void 0 ? void 0 : value.type) || null, onChange: ramda_1.pipe(utils_1.getValue, changeType) },
             react_1.default.createElement("div", { className: styles.dateOptionWithin },
                 react_1.default.createElement(FormControlLabel_1.default, { value: types_1.DateRangeTypes.WITHIN, control: react_1.default.createElement(Radio_1.default, null), label: ui_i18n_1.default.text('Within the last'), classes: { label: classnames_1.default(styles.dateOptionLabel, styles.labels) } }),
-                react_1.default.createElement(IntervalSelector_1.default, { interval: withinInterval, onChange: changePeriod, onFocus: function () { return changeType(types_1.DateRangeTypes.WITHIN); } })),
+                react_1.default.createElement(DateIntervalSelector_1.default, { interval: withinInterval, onChange: changePeriod, onFocus: function () { return changeType(types_1.DateRangeTypes.WITHIN); } })),
             react_1.default.createElement("div", { className: styles.dateOptionAgo },
                 react_1.default.createElement(FormControlLabel_1.default, { value: types_1.DateRangeTypes.AGO, control: react_1.default.createElement(Radio_1.default, null), label: ui_i18n_1.default.text('More than'), classes: { label: classnames_1.default(styles.dateOptionLabel, styles.labels) } }),
-                react_1.default.createElement(IntervalSelector_1.default, { interval: agoInterval, onChange: changePeriod, onFocus: function () { return changeType(types_1.DateRangeTypes.AGO); } }),
+                react_1.default.createElement(DateIntervalSelector_1.default, { interval: agoInterval, onChange: changePeriod, onFocus: function () { return changeType(types_1.DateRangeTypes.AGO); } }),
                 react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.agoLabel, styles.labels), variant: 'subtitle1' }, ui_i18n_1.default.text('Ago'))),
             react_1.default.createElement("div", { className: styles.dateOption },
                 react_1.default.createElement(FormControlLabel_1.default, { value: types_1.DateRangeTypes.BETWEEN, control: react_1.default.createElement(Radio_1.default, null), label: ui_i18n_1.default.text('Date range'), classes: { label: classnames_1.default(styles.dateOptionLabel, styles.labels) } }),
-                react_1.default.createElement(ActivityDateRangeEditor_1.default, { values: datesInterval, onChange: changePeriod, onFocus: function () { return changeType(types_1.DateRangeTypes.BETWEEN); } })))));
+                react_1.default.createElement(CustomDateRangeEditor_1.default, { values: datesInterval, onChange: changePeriod, onFocus: function () { return changeType(types_1.DateRangeTypes.BETWEEN); } })))));
 };
 exports.default = DateRangeSelector;

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

@@ -1,4 +1,4 @@
 export declare const customStyles: {
     input: (currentStyles: any) => any;
 };
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"option" | "borderBottom" | "input" | "container" | "labels" | "filterSubtitle" | "agoLabel" | "dateOption" | "dateOptionAgo" | "dateOptionWithin" | "dateRangeRoot" | "dateInput" | "dateInputNumber" | "dateInputPeriod" | "dateOptionLabel" | "dropDownInput" | "activityPlaceholder" | "filterControls" | "clearButton" | "paper" | "intervalContainer">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"option" | "borderBottom" | "container" | "labels" | "filterSubtitle" | "agoLabel" | "dateOption" | "dateOptionAgo" | "dateOptionWithin" | "dateOptionLabel" | "dropDownInput" | "filterControls" | "clearButton">;