@reltio/components 1.4.807 → 1.4.811

package/components/ReltioMap/MapControls/TopRightMapControls/styles.js

@@ -0,0 +1,22 @@
+"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({
+    container: {
+        margin: '2px',
+        display: 'flex',
+        alignItems: 'center'
+    },
+    button: {
+        color: 'rgba(0,0,0,0.54)',
+        padding: 0,
+        height: '24px',
+        width: '24px',
+        minWidth: 0
+    },
+    icon: {
+        width: '20px',
+        height: '20px'
+    }
+});

package/components/ReltioMap/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const MAP_DRAWING_MODES: {
+    CIRCLE: string;
+    POLYGON: string;
+};
+export declare const DEFAULT_OVERLAY_OPTIONS: {
+    fillColor: string;
+    fillOpacity: number;
+    strokeWeight: number;
+    strokeColor: string;
+    clickable: boolean;
+    editable: boolean;
+    zIndex: number;
+};
+export declare const MAP_MINIMUM_SCALE_RADIUS = 0.001;

package/components/ReltioMap/constants.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_MINIMUM_SCALE_RADIUS = exports.DEFAULT_OVERLAY_OPTIONS = exports.MAP_DRAWING_MODES = void 0;
+exports.MAP_DRAWING_MODES = {
+    CIRCLE: 'circle',
+    POLYGON: 'polygon'
+};
+exports.DEFAULT_OVERLAY_OPTIONS = {
+    fillColor: 'rgb(242,82,82)',
+    fillOpacity: 0.1,
+    strokeWeight: 2,
+    strokeColor: '#F25252',
+    clickable: false,
+    editable: true,
+    zIndex: 1
+};
+exports.MAP_MINIMUM_SCALE_RADIUS = 0.001;

package/components/ReltioMap/helpers/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="google.maps" />
+import { DrawingMode, EntityMarker, Overlay, MapInstance } from '../types';
+export declare const getMapBoundsPolygon: (map: MapInstance) => any[];
+export declare const getDrawingMode: (drawingMode: DrawingMode) => google.maps.drawing.OverlayType.CIRCLE | google.maps.drawing.OverlayType.POLYGON;
+export declare const fitMapBoundsForMarkers: (markers: EntityMarker[], map: MapInstance, overlay: Overlay) => void;
+export declare const fitMapBoundsForOverlay: (map: MapInstance, overlay: Overlay, existingBounds?: any) => void;

package/components/ReltioMap/helpers/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fitMapBoundsForOverlay = exports.fitMapBoundsForMarkers = exports.getDrawingMode = exports.getMapBoundsPolygon = void 0;
+var constants_1 = require("../constants");
+var getMapBoundsPolygon = function (map) {
+    var bounds = map.getBounds();
+    var ne = bounds.getNorthEast();
+    var sw = bounds.getSouthWest();
+    var neLat = ne.lat(), neLng = ne.lng(), swLat = sw.lat(), swLng = sw.lng();
+    var additionalPoint1 = [];
+    var additionalPoint2 = [];
+    if (!((neLng === 180 && swLng === -180) || (neLng === -180 && swLng === 180))) {
+        // excluding corner case when we see more than one "map unfolding" (in this case google maps automatically set 180 and -180),
+        // we can't describe map bounds as just rectangle, because lng distance can be more than 180",
+        // so we need to add additional points to have correct polygon
+        var center = bounds.getCenter();
+        additionalPoint1.push([neLat, center.lng()]);
+        additionalPoint2.push([swLat, center.lng()]);
+    }
+    return __spreadArray(__spreadArray(__spreadArray(__spreadArray([[neLat, neLng]], additionalPoint1), [[neLat, swLng], [swLat, swLng]]), additionalPoint2), [[swLat, neLng]]);
+};
+exports.getMapBoundsPolygon = getMapBoundsPolygon;
+var getDrawingMode = function (drawingMode) {
+    switch (drawingMode) {
+        case constants_1.MAP_DRAWING_MODES.CIRCLE:
+            return window.google.maps.drawing.OverlayType.CIRCLE;
+        case constants_1.MAP_DRAWING_MODES.POLYGON:
+            return window.google.maps.drawing.OverlayType.POLYGON;
+        default:
+            return null;
+    }
+};
+exports.getDrawingMode = getDrawingMode;
+var fitMapBoundsForMarkers = function (markers, map, overlay) {
+    var bounds = new window.google.maps.LatLngBounds();
+    markers.forEach(function (marker) { return bounds.extend(marker.point); });
+    if (markers.length === 1) {
+        var center = bounds.getCenter();
+        bounds.extend(new window.google.maps.LatLng(center.lat() + constants_1.MAP_MINIMUM_SCALE_RADIUS, center.lng() + constants_1.MAP_MINIMUM_SCALE_RADIUS));
+        bounds.extend(new window.google.maps.LatLng(center.lat() - constants_1.MAP_MINIMUM_SCALE_RADIUS, center.lng() - constants_1.MAP_MINIMUM_SCALE_RADIUS));
+    }
+    map.fitBounds(bounds);
+    if (overlay) {
+        exports.fitMapBoundsForOverlay(map, overlay, bounds);
+    }
+};
+exports.fitMapBoundsForMarkers = fitMapBoundsForMarkers;
+var fitMapBoundsForOverlay = function (map, overlay, existingBounds) {
+    if (overlay.path) {
+        var bounds_1 = existingBounds || new window.google.maps.LatLngBounds();
+        overlay.path.forEach(function (_a) {
+            var lat = _a.lat, lng = _a.lng;
+            return bounds_1.extend(new window.google.maps.LatLng(lat, lng));
+        });
+        map.fitBounds(bounds_1);
+    }
+};
+exports.fitMapBoundsForOverlay = fitMapBoundsForOverlay;

package/components/ReltioMap/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+/// <reference types="google.maps" />
+import { GoogleMapProps, MarkerClustererProps } from '@react-google-maps/api';
+import { DrawingModes, EntityMarker as Marker, MapBounds, Overlay, OverlayPath } from './types';
+declare type Props = {
+    markers: Marker[];
+    mapKey: string;
+    defaultZoom: GoogleMapProps['zoom'];
+    defaultCenter: GoogleMapProps['center'];
+    loadingElement: JSX.Element;
+    isSearchOnMapMove?: boolean;
+    isSearchEnabled?: boolean;
+    activeOverlay?: Overlay;
+    overlayOptions?: google.maps.PolygonOptions | google.maps.CircleOptions;
+    drawingModes?: DrawingModes;
+    markerClusterer?: boolean;
+    markerClustererOptions?: MarkerClustererProps['options'];
+    mapContainerClassName: string;
+    onMapBoundsChanged?: (value: MapBounds | null) => void;
+    onOverlayUpdated?: (value: {
+        data: OverlayPath;
+        type: string;
+    }) => void;
+    onMarkerClicked?: (value: Marker) => void;
+};
+export declare const ReltioMap: ({ markers, mapKey, defaultZoom, defaultCenter, loadingElement, isSearchOnMapMove, isSearchEnabled, activeOverlay, overlayOptions, drawingModes, markerClusterer, markerClustererOptions, mapContainerClassName, onMapBoundsChanged, onOverlayUpdated, onMarkerClicked }: Props) => JSX.Element;
+export {};

package/components/ReltioMap/index.js

@@ -0,0 +1,162 @@
+"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]; } });
+}) : (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.ReltioMap = void 0;
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var api_1 = require("@react-google-maps/api");
+var MapControlContrainer_1 = require("./MapControls/MapControlContainer/MapControlContrainer");
+var TopRightMapControls_1 = require("./MapControls/TopRightMapControls/TopRightMapControls");
+var TopCenterMapControls_1 = require("./MapControls/TopCenterMapControls/TopCenterMapControls");
+var helpers_1 = require("./helpers");
+var EntityMarker_1 = __importDefault(require("./EntityMarker/EntityMarker"));
+var constants_1 = require("../../constants");
+var styles_1 = require("./styles");
+var hooks_1 = require("../../hooks");
+var ON_MAP_MOVE_DEBOUNCE_INTERVAL = 1000;
+var libraries = ['drawing'];
+var useFitMapBounds = function (_a) {
+    var markers = _a.markers, activeOverlay = _a.activeOverlay, isSearchOnMapMove = _a.isSearchOnMapMove, map = _a.map;
+    var prevMarkers = hooks_1.usePrevious(markers);
+    var prevActiveOverlay = hooks_1.usePrevious(activeOverlay);
+    var apiIsLoaded = map && window.google;
+    react_1.useEffect(function () {
+        if (apiIsLoaded && !isSearchOnMapMove && markers.length && markers !== prevMarkers) {
+            helpers_1.fitMapBoundsForMarkers(markers, map, activeOverlay);
+        }
+        else if (apiIsLoaded && activeOverlay && activeOverlay !== prevActiveOverlay) {
+            helpers_1.fitMapBoundsForOverlay(map, activeOverlay);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [map, markers, activeOverlay]);
+};
+var ReltioMap = function (_a) {
+    var _b = _a.markers, markers = _b === void 0 ? [] : _b, mapKey = _a.mapKey, defaultZoom = _a.defaultZoom, defaultCenter = _a.defaultCenter, loadingElement = _a.loadingElement, isSearchOnMapMove = _a.isSearchOnMapMove, isSearchEnabled = _a.isSearchEnabled, activeOverlay = _a.activeOverlay, overlayOptions = _a.overlayOptions, _c = _a.drawingModes, drawingModes = _c === void 0 ? [] : _c, markerClusterer = _a.markerClusterer, markerClustererOptions = _a.markerClustererOptions, mapContainerClassName = _a.mapContainerClassName, onMapBoundsChanged = _a.onMapBoundsChanged, onOverlayUpdated = _a.onOverlayUpdated, onMarkerClicked = _a.onMarkerClicked;
+    var styles = styles_1.useStyles();
+    var _d = api_1.useJsApiLoader({
+        googleMapsApiKey: mapKey,
+        libraries: libraries
+    }), isLoaded = _d.isLoaded, loadError = _d.loadError;
+    var mapMoveEndTimer = react_1.useRef(null);
+    var _e = react_1.useState(null), map = _e[0], setMap = _e[1];
+    var _f = react_1.useState(null), polygon = _f[0], setPolygon = _f[1];
+    var _g = react_1.useState(null), drawingMode = _g[0], setDrawingMode = _g[1];
+    useFitMapBounds({ markers: markers, activeOverlay: activeOverlay, map: map, isSearchOnMapMove: isSearchOnMapMove });
+    var allOverlayOptions = react_1.useMemo(function () { return (__assign(__assign({}, constants_1.DEFAULT_OVERLAY_OPTIONS), (overlayOptions || {}))); }, [overlayOptions]);
+    var handleChangeIsSearchOnMapMove = react_1.useCallback(function (isSearchOnMapMove) {
+        onMapBoundsChanged(isSearchOnMapMove ? helpers_1.getMapBoundsPolygon(map) : null);
+        setDrawingMode(null);
+        clearTimeout(mapMoveEndTimer.current);
+    }, [map, onMapBoundsChanged]);
+    var handleMapMoveStart = react_1.useCallback(function () {
+        clearTimeout(mapMoveEndTimer.current);
+    }, []);
+    var handleMapMoveEnd = react_1.useCallback(function () {
+        if (isSearchOnMapMove) {
+            onMapBoundsChanged(helpers_1.getMapBoundsPolygon(map));
+        }
+    }, [isSearchOnMapMove, map, onMapBoundsChanged]);
+    var handleMapIdle = react_1.useCallback(function () {
+        if (isSearchOnMapMove) {
+            clearTimeout(mapMoveEndTimer.current);
+            mapMoveEndTimer.current = setTimeout(handleMapMoveEnd, ON_MAP_MOVE_DEBOUNCE_INTERVAL);
+        }
+    }, [handleMapMoveEnd, isSearchOnMapMove]);
+    var handleOverlayChange = react_1.useCallback(function (e, propOverlay) {
+        var _a;
+        var stateOverlay = propOverlay ||
+            (polygon && {
+                type: constants_1.MAP_DRAWING_MODES.POLYGON,
+                overlay: polygon
+            });
+        if (!ramda_1.isEmpty(stateOverlay) && typeof onOverlayUpdated === 'function') {
+            var overlay_1 = stateOverlay.overlay, type = stateOverlay.type;
+            var typeActions = (_a = {},
+                _a[constants_1.MAP_DRAWING_MODES.POLYGON] = function () {
+                    return overlay_1
+                        .getPath()
+                        .getArray()
+                        .map(function (latlng) { return [latlng.lat(), latlng.lng()]; });
+                },
+                _a[constants_1.MAP_DRAWING_MODES.CIRCLE] = function () {
+                    return { radius: overlay_1.getRadius() / 1000, center: overlay_1.getCenter() };
+                },
+                _a);
+            var data = typeActions[type] && typeActions[type]();
+            data && onOverlayUpdated({ data: data, type: type });
+        }
+    }, [onOverlayUpdated, polygon]);
+    var handleOverlayComplete = react_1.useCallback(function (type) { return function (overlay) {
+        handleOverlayChange(null, { type: type, overlay: overlay });
+        overlay.setMap(null);
+        setDrawingMode(null);
+    }; }, [handleOverlayChange]);
+    var handleClearOverlay = react_1.useCallback(function () {
+        onOverlayUpdated(null);
+    }, [onOverlayUpdated]);
+    var renderMarkers = function (clusterer) {
+        return markers
+            .filter(ramda_1.prop('point'))
+            .map(function (marker) { return (react_1.default.createElement(EntityMarker_1.default, { key: marker.id, marker: marker, clusterer: clusterer, onClick: onMarkerClicked })); });
+    };
+    var renderMarkerClusterer = function (options) {
+        return react_1.default.createElement(api_1.MarkerClusterer, { options: options }, renderMarkers);
+    };
+    if (loadError) {
+        return null;
+    }
+    if (!isLoaded) {
+        return loadingElement;
+    }
+    return (react_1.default.createElement(api_1.GoogleMap, { mapTypeId: window.google.maps.MapTypeId.ROADMAP, options: {
+            mapTypeControl: false,
+            streetViewControl: false,
+            fullscreenControl: false
+        }, onLoad: setMap, zoom: defaultZoom, center: defaultCenter, onZoomChanged: handleMapMoveStart, onDragStart: handleMapMoveStart, onIdle: handleMapIdle, mapContainerClassName: mapContainerClassName },
+        map && isSearchEnabled && Boolean(drawingModes.length) && (react_1.default.createElement(MapControlContrainer_1.MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_RIGHT, map: map },
+            react_1.default.createElement(TopRightMapControls_1.TopRightMapControls, { hasActiveOverlay: !!activeOverlay, drawingModes: drawingModes, drawingMode: drawingMode, onDrawingModeChanged: setDrawingMode, onClearOverlay: handleClearOverlay }))),
+        map && isSearchEnabled && (react_1.default.createElement(MapControlContrainer_1.MapControlContainer, { className: styles.mapControlContainer, position: window.google.maps.ControlPosition.TOP_CENTER, map: map },
+            react_1.default.createElement(TopCenterMapControls_1.TopCenterMapControls, { onChangeIsSearchOnMapMove: handleChangeIsSearchOnMapMove, isSearchOnMapMove: isSearchOnMapMove }))),
+        markerClusterer ? renderMarkerClusterer(markerClustererOptions) : renderMarkers(),
+        !helpers_1.getDrawingMode(drawingMode) &&
+            activeOverlay &&
+            ramda_1.propEq('type', constants_1.MAP_DRAWING_MODES.POLYGON, activeOverlay) && (react_1.default.createElement(api_1.Polygon, { onLoad: setPolygon, path: activeOverlay.path, editable: true, options: allOverlayOptions, onMouseUp: handleOverlayChange, onDragEnd: handleOverlayChange })),
+        isSearchEnabled && Boolean(drawingModes.length) && (react_1.default.createElement(api_1.DrawingManager, { onPolygonComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.POLYGON), onCircleComplete: handleOverlayComplete(constants_1.MAP_DRAWING_MODES.CIRCLE), drawingMode: helpers_1.getDrawingMode(drawingMode), options: {
+                drawingControl: false,
+                circleOptions: allOverlayOptions,
+                polygonOptions: allOverlayOptions
+            } }))));
+};
+exports.ReltioMap = ReltioMap;

package/components/ReltioMap/styles.d.ts

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

package/components/ReltioMap/styles.js

@@ -0,0 +1,12 @@
+"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({
+    mapControlContainer: {
+        borderRadius: '2px',
+        backgroundColor: '#FFFFFF',
+        boxShadow: '0 1px 3px 0 rgba(0,0,0,0.15)',
+        margin: '10px'
+    }
+});

package/components/ReltioMap/types.d.ts

@@ -0,0 +1,23 @@
+import { Entity } from '@reltio/mdm-sdk';
+export declare type DrawingMode = 'circle' | 'polygon';
+export declare type DrawingModes = DrawingMode[];
+export declare type EntityMarker = {
+    entity: Entity;
+    id: string;
+    label: string;
+    point: {
+        lat: number;
+        lng: number;
+    };
+    visible?: boolean;
+};
+export declare type OverlayPath = Array<{
+    lat: number;
+    lng: number;
+}>;
+export declare type Overlay = {
+    path: OverlayPath;
+    type: string;
+};
+export declare type MapInstance = any;
+export declare type MapBounds = [number, number][];

package/components/ReltioMap/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/components/attributes/PivotingAttributes/PivotingTooltipContent.js

@@ -43,19 +43,21 @@ var EntityAvatar_1 = __importDefault(require("../../EntityAvatar/EntityAvatar"))
 var EntityUriLink_1 = __importDefault(require("../../EntityUriLink/EntityUriLink"));
 var styles_1 = require("./styles");
 var helpers_1 = require("./helpers");
+var hooks_1 = require("../../../hooks");
 var MAX_ENTITIES_PIVOTING_TOOLTIP = 6;
 var PivotingTooltipContent = function (_a) {
     var value = _a.value, attributeType = _a.attributeType, _b = _a.config, config = _b === void 0 ? {} : _b;
     var _c = react_1.useState([]), entities = _c[0], setEntities = _c[1];
     var _d = react_1.useState(0), total = _d[0], setTotal = _d[1];
     var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity) || {};
+    var safePromise = hooks_1.useSafePromise();
     var styles = styles_1.useStyles();
     var globalSearchRequestOptions = react_redux_1.useSelector(mdm_module_1.default.selectors.getGlobalSearchRequestOptions) || {};
     var entityType = config.entityType || entity.type;
     react_1.useEffect(function () {
         var filters = helpers_1.getParamsFilteringEntities(value, attributeType, entityType);
         var options = __assign({ max: MAX_ENTITIES_PIVOTING_TOOLTIP }, globalSearchRequestOptions);
-        Promise.all([mdm_sdk_1.getFilteredEntities(filters, options), mdm_sdk_1.getTotals(filters, options)])
+        safePromise(Promise.all([mdm_sdk_1.getFilteredEntities(filters, options), mdm_sdk_1.getTotals(filters, options)]))
             .then(function (results) {
             var entities = results[0], total = results[1].total;
             setEntities(Array.isArray(entities) ? entities : []);

package/components/attributes/editMode/AttributesList/AttributesList.js

@@ -49,7 +49,7 @@ var AttributesList = function (_a) {
     var _c = entity.attributes, attributes = _c === void 0 ? {} : _c;
     var creatableAttrTypes = react_1.useMemo(function () { return mdm_sdk_1.getCreatableAttributeTypes(mode, attrTypes); }, [attrTypes, mode]);
     var moreAttrTypes = helpers_1.getMoreAttrTypes(creatableAttrTypes, entity);
-    var pagersData = react_1.useMemo(function () { return helpers_1.getAttributesListForEditMode(attrTypes, mode, entity, showEmptyEditors); }, [
+    var pagersData = react_1.useMemo(function () { return mdm_sdk_1.getAttributesListForEditMode(attrTypes, mode, entity, showEmptyEditors); }, [
         attrTypes,
         mode,
         entity,

package/components/attributes/editMode/AttributesList/helpers.d.ts

@@ -1,3 +1,2 @@
-import { AttributeType, Entity, Mode } from '@reltio/mdm-sdk';
-export declare const getAttributesListForEditMode: (attrTypes: AttributeType[], mode: Mode, entity: Entity, showEmptyEditors: boolean) => any;
+import { AttributeType, Entity } from '@reltio/mdm-sdk';
 export declare const getMoreAttrTypes: (attrTypes: AttributeType[], entity: Entity) => AttributeType[];

package/components/attributes/editMode/AttributesList/helpers.js

@@ -1,11 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMoreAttrTypes = exports.getAttributesListForEditMode = void 0;
+exports.getMoreAttrTypes = void 0;
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var getCreatableAttributeTypesAndAnaliticsAttributes = ramda_1.curry(function (mode, attrTypes) {
-    return ramda_1.pipe(ramda_1.defaultTo([]), mdm_sdk_1.filterOutHiddenAttributes, ramda_1.filter(function (attributeType) { return mdm_sdk_1.checkMetadataForCreate(mode, attributeType); }))(attrTypes);
-});
 var getSource = function (attrType, entity) {
     var _a = entity.attributes, attributes = _a === void 0 ? {} : _a, _b = entity.analyticsAttributes, analyticsAttributes = _b === void 0 ? {} : _b;
     return ramda_1.cond([
@@ -17,22 +14,6 @@ var getSource = function (attrType, entity) {
 var getNameProp = function (attrType) {
     return mdm_sdk_1.isSpecialAttribute(attrType) ? 'uri' : 'name';
 };
-var getAttributesListForEditMode = function (attrTypes, mode, entity, showEmptyEditors) {
-    var creatableAttrTypes = getCreatableAttributeTypesAndAnaliticsAttributes(mode, attrTypes);
-    return creatableAttrTypes.reduce(function (result, attrType) {
-        var needShowAttribute = function (hasValues) {
-            return hasValues || showEmptyEditors || attrType.required;
-        };
-        var source = getSource(attrType, entity);
-        var nameProp = getNameProp(attrType);
-        var hasValues = ramda_1.has(attrType[nameProp])(source);
-        return ramda_1.when(function () { return needShowAttribute(hasValues); }, ramda_1.append({
-            attrType: attrType,
-            values: ramda_1.pipe(ramda_1.prop(attrType[nameProp]), ramda_1.defaultTo([]), mdm_sdk_1.wrapInArrayIfNeeded)(source)
-        }), result);
-    }, []);
-};
-exports.getAttributesListForEditMode = getAttributesListForEditMode;
 var getMoreAttrTypes = function (attrTypes, entity) {
     return attrTypes.filter(function (attrType) {
         var source = getSource(attrType, entity);

package/components/attributes/editMode/AttributesPager/AttributeRenderer.js

@@ -92,8 +92,9 @@ var AttributeRenderer = function (_a) {
         react_1.default.createElement(Title_1.default, { label: label, isRequired: isRequired, className: styles.title, attributeType: attributeType }),
         isEditableMode && react_1.default.createElement(CardinalityMessage_1.default, { cardinality: cardinality }),
         isEditableMode && react_1.default.createElement(ErrorMessage_1.default, { message: errorMessage }),
-        react_1.default.createElement("div", { className: styles.attributesWrapper }, shownValues.map(function (value, idx) { return (react_1.default.createElement(Attribute_1.default, { key: value.uri, attributeValue: value, attributeType: attributeType, lazy: showEmpty && !isRequired, showEmptyEditors: showEmptyEditors, errors: errors, ownError: mdm_sdk_1.getAttributeOwnError(value, idx, errors), mode: mode, crosswalks: crosswalks, onAddOneMore: lastIndex === idx ? onAddOneMore : null, onAddAttributes: onAddAttributes, onDeleteAttribute: onDelete, onChangeAttribute: onChangeAttribute, onDeactivateError: onDeactivateError, additionalControlsRenderer: additionalControlsRenderer })); })),
-        showMore && (react_1.default.createElement(ShowMore_1.default, { moreNumber: ramda_1.min(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
-        showLess && react_1.default.createElement(ShowLess_1.default, { onClick: onShowLess })));
+        react_1.default.createElement("div", { className: styles.attributesWrapper },
+            shownValues.map(function (value, idx) { return (react_1.default.createElement(Attribute_1.default, { key: value.uri, attributeValue: value, attributeType: attributeType, lazy: showEmpty && !isRequired, showEmptyEditors: showEmptyEditors, errors: errors, ownError: mdm_sdk_1.getAttributeOwnError(value, idx, attributeType.uri, errors), mode: mode, crosswalks: crosswalks, onAddOneMore: lastIndex === idx ? onAddOneMore : null, onAddAttributes: onAddAttributes, onDeleteAttribute: onDelete, onChangeAttribute: onChangeAttribute, onDeactivateError: onDeactivateError, additionalControlsRenderer: additionalControlsRenderer })); }),
+            showMore && (react_1.default.createElement(ShowMore_1.default, { moreNumber: ramda_1.min(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
+            showLess && react_1.default.createElement(ShowLess_1.default, { onClick: onShowLess }))));
 };
 exports.default = AttributeRenderer;

package/components/attributes/editMode/AttributesPager/index.d.ts

@@ -2,6 +2,7 @@
 import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
 import { AttributeError, AttributeType, AttributeValue, Crosswalk, ImageAttributeValue, Mode, NestedAttributeValue, Paging, ReferenceAttributeValue, SimpleAttributeValue } from '@reltio/mdm-sdk';
 import AttributesPager from './AttributesPager';
+import CardinalityMessage from './CardinalityMessage';
 export declare type AttributeItem = {
     uri?: string;
     parentUri?: string;
@@ -12,6 +13,7 @@ export declare type AttributeItem = {
 declare type StateProps = {
     errorMessage: string;
     errors: AttributeError[];
+    max: number;
 };
 declare type DispatchProps = {
     onDeactivateError: (id: string) => void;
@@ -33,6 +35,6 @@ declare type OwnProps = {
     additionalControlsRenderer?: (props: any) => JSX.Element;
 };
 export declare type AttributePagerProps = StateProps & DispatchProps & OwnProps;
-export { AttributesPager };
-declare const _default: import("react-redux").ConnectedComponent<import("react").MemoExoticComponent<({ values, attributeType, mode, crosswalks, drawLines, paging, parentUri, errors, errorMessage, max, showEmptyEditors, onAddAttributes, onDeleteAttribute, onChangeAttribute, onDeactivateError, additionalControlsRenderer, requestNextPageOfAttributeValues }: AttributePagerProps) => JSX.Element>, import("react-redux").Omit<StateProps & DispatchProps & OwnProps, "errorMessage" | "errors" | "requestNextPageOfAttributeValues" | "onDeactivateError"> & OwnProps>;
+export { AttributesPager, CardinalityMessage };
+declare const _default: import("react-redux").ConnectedComponent<import("react").MemoExoticComponent<({ values, attributeType, mode, crosswalks, drawLines, paging, parentUri, errors, errorMessage, max, showEmptyEditors, onAddAttributes, onDeleteAttribute, onChangeAttribute, onDeactivateError, additionalControlsRenderer, requestNextPageOfAttributeValues }: AttributePagerProps) => JSX.Element>, import("react-redux").Omit<StateProps & DispatchProps & OwnProps, "errorMessage" | "max" | "errors" | "requestNextPageOfAttributeValues" | "onDeactivateError"> & OwnProps>;
 export default _default;

package/components/attributes/editMode/AttributesPager/index.js

@@ -22,31 +22,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AttributesPager = void 0;
+exports.CardinalityMessage = exports.AttributesPager = void 0;
 var react_redux_1 = require("react-redux");
-var re_reselect_1 = __importDefault(require("re-reselect"));
 var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var AttributesPager_1 = __importDefault(require("./AttributesPager"));
 exports.AttributesPager = AttributesPager_1.default;
-var permanentEmptyArray = [];
-var cachedErrorsSelector = re_reselect_1.default(mdm_module_1.default.selectors.getProfileErrors, function (_, _a) {
-    var parentUri = _a.parentUri;
-    return parentUri;
-}, function (_, _a) {
-    var attributeType = _a.attributeType;
-    return attributeType;
-}, function (errors, parentUri, attributeType) {
-    var pagerErrors = mdm_sdk_1.getAttributePagerActiveErrors(parentUri, attributeType, errors);
-    return pagerErrors.length === 0 ? permanentEmptyArray : pagerErrors;
-})(function (state, _a) {
-    var parentUri = _a.parentUri, attributeType = _a.attributeType;
-    return parentUri + "-" + attributeType.uri;
-});
-var mapStateToProps = function (state, ownProps) { return ({
-    errors: cachedErrorsSelector(state, ownProps),
-    errorMessage: mdm_sdk_1.getAttributePagerActiveTypeErrorMessage(ownProps.parentUri, ownProps.attributeType, mdm_module_1.default.selectors.getProfileErrors(state))
-}); };
+var CardinalityMessage_1 = __importDefault(require("./CardinalityMessage"));
+exports.CardinalityMessage = CardinalityMessage_1.default;
+var mapStateToProps = function (state, _a) {
+    var parentUri = _a.parentUri, attributeType = _a.attributeType, max = _a.max;
+    return ({
+        errors: mdm_module_1.default.selectors.getActiveErrorsForAttributesPager(state, parentUri, attributeType),
+        errorMessage: mdm_sdk_1.getAttributePagerActiveTypeErrorMessage(parentUri, attributeType, mdm_module_1.default.selectors.getProfileErrors(state)),
+        max: max || mdm_module_1.default.selectors.getDefaultMaxValues(state)
+    });
+};
 var mapDispatchToProps = {
     requestNextPageOfAttributeValues: mdm_module_1.profile.actions.requestNextPageOfAttributeValues,
     onDeactivateError: mdm_module_1.profile.errors.actions.errorDeactivated

package/components/attributes/editMode/ComplexAttribute/ComplexAttribute.d.ts

@@ -1,5 +1,5 @@
 export default ComplexAttribute;
-declare function ComplexAttribute({ label, attributeTypesList, attributeType, attributeValue, children, errors, ownError, mode, metadata, crosswalks, lazy, showEmptyEditors, onAddOneMore, onAddAttributes, onDeleteAttribute, onChangeAttribute, additionalControlsRenderer, hideDeleteButton }: {
+declare function ComplexAttribute({ label, attributeTypesList, attributeType, attributeValue, children, errors, ownError, mode, metadata, crosswalks, lazy, showEmptyEditors, onAddOneMore, onAddAttributes, onDeleteAttribute, onChangeAttribute, additionalControlsRenderer, hideDeleteButton, state }: {
     label: any;
     attributeTypesList: any;
     attributeType: any;
@@ -18,6 +18,7 @@ declare function ComplexAttribute({ label, attributeTypesList, attributeType, at
     onChangeAttribute: any;
     additionalControlsRenderer: any;
     hideDeleteButton: any;
+    state: any;
 }): JSX.Element;
 declare namespace ComplexAttribute {
     const propTypes: {
@@ -126,6 +127,7 @@ declare namespace ComplexAttribute {
         onChangeAttribute: PropTypes.Requireable<(...args: any[]) => any>;
         additionalControlsRenderer: PropTypes.Requireable<(...args: any[]) => any>;
         hideDeleteButton: PropTypes.Requireable<boolean>;
+        state: PropTypes.Requireable<string>;
         label: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         attributeTypesList: PropTypes.Requireable<PropTypes.InferProps<{

package/components/attributes/editMode/ComplexAttribute/ComplexAttribute.js

@@ -35,9 +35,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
 var Button_1 = __importDefault(require("@material-ui/core/Button"));
 var SmallIconButton_1 = __importDefault(require("../../../SmallIconButton/SmallIconButton"));
 var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var styles_1 = require("./styles");
@@ -45,11 +47,14 @@ var ErrorWrapper_1 = __importDefault(require("../../../ErrorWrapper/ErrorWrapper
 var AttributesList_1 = __importDefault(require("../AttributesList/AttributesList"));
 var ArrowExpandButton_1 = __importDefault(require("../../../ArrowExpandButton/ArrowExpandButton"));
 var ComplexAttribute = function (_a) {
-    var label = _a.label, attributeTypesList = _a.attributeTypesList, attributeType = _a.attributeType, attributeValue = _a.attributeValue, children = _a.children, errors = _a.errors, ownError = _a.ownError, mode = _a.mode, metadata = _a.metadata, crosswalks = _a.crosswalks, lazy = _a.lazy, showEmptyEditors = _a.showEmptyEditors, onAddOneMore = _a.onAddOneMore, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, hideDeleteButton = _a.hideDeleteButton;
+    var _b;
+    var label = _a.label, attributeTypesList = _a.attributeTypesList, attributeType = _a.attributeType, attributeValue = _a.attributeValue, children = _a.children, errors = _a.errors, ownError = _a.ownError, mode = _a.mode, metadata = _a.metadata, crosswalks = _a.crosswalks, lazy = _a.lazy, showEmptyEditors = _a.showEmptyEditors, onAddOneMore = _a.onAddOneMore, onAddAttributes = _a.onAddAttributes, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, hideDeleteButton = _a.hideDeleteButton, state = _a.state;
     var styles = styles_1.useStyles();
+    var deleted = state === 'deleted';
+    var edited = state === 'edited';
     var uri = attributeValue.uri;
     var isNew = mdm_sdk_1.isTempUri(uri);
-    var _b = react_1.useState(isNew), expanded = _b[0], setExpanded = _b[1];
+    var _c = react_1.useState(isNew), expanded = _c[0], setExpanded = _c[1];
     var canDelete = react_1.useMemo(function () {
         return mdm_sdk_1.checkCanDeleteAttribute({
             attributeType: attributeType,
@@ -59,7 +64,7 @@ var ComplexAttribute = function (_a) {
             isReltioCrosswalk: mdm_sdk_1.isReltioCrosswalk(crosswalks, attributeValue)
         });
     }, [attributeType, attributeValue, mode, metadata, crosswalks]);
-    var showDeleteButton = !hideDeleteButton && !!onDeleteAttribute && canDelete;
+    var showDeleteButton = !deleted && !hideDeleteButton && !!onDeleteAttribute && canDelete;
     var onDeleteThis = function () { return onDeleteAttribute({ uri: uri, attributeType: attributeType, attributeValue: attributeValue }); };
     var hasDescendantsWithErrors = react_1.useMemo(function () { return mdm_sdk_1.hasAttributeDescendantsWithErrors(attributeValue, errors); }, [
         errors,
@@ -70,6 +75,11 @@ var ComplexAttribute = function (_a) {
             setExpanded(true);
         }
     }, [errors, hasDescendantsWithErrors]);
+    react_1.useEffect(function () {
+        if (deleted) {
+            setExpanded(false);
+        }
+    }, [deleted]);
     var hasAnalyticValue = (attributeTypesList || []).some(function (attributeType) { return mdm_sdk_1.isAnalyticAttribute(attributeType); });
     var attributeListEntity = react_1.useMemo(function () { return ({
         attributes: hasAnalyticValue ? null : attributeValue.value,
@@ -79,10 +89,14 @@ var ComplexAttribute = function (_a) {
     return lazy ? (react_1.default.createElement(Button_1.default, { variant: "text", color: "primary", onClick: onAddOneMore }, "Create attribute")) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: styles.editor },
             react_1.default.createElement("div", { className: styles.titleContainer },
-                react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded, className: styles.expandButton }),
+                react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded, className: styles.expandButton, disabled: deleted }),
                 react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage },
-                    react_1.default.createElement("div", { className: styles.label }, label))),
+                    react_1.default.createElement("div", { className: classnames_1.default(styles.label, (_b = {}, _b[styles.deleted] = deleted, _b)) }, label))),
             react_1.default.createElement("div", { className: styles.actions },
+                edited && (react_1.default.createElement(Typography_1.default, { variant: "caption", className: styles.editedLabel },
+                    "(",
+                    ui_i18n_1.default.text('edited'),
+                    ")")),
                 additionalControlsRenderer && additionalControlsRenderer({ attributeType: attributeType, attributeValue: attributeValue }),
                 showDeleteButton && react_1.default.createElement(SmallIconButton_1.default, { icon: Delete_1.default, onClick: onDeleteThis, size: "L" }))),
         expanded && (react_1.default.createElement(AttributesList_1.default, { attrTypes: attributeTypesList, entity: attributeListEntity, showEmptyEditors: showEmptyEditors || isNew, drawLines: true, parentUri: uri, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer }, children))));

package/components/attributes/editMode/ComplexAttribute/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "expandButton" | "actions" | "editor" | "titleContainer">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"deleted" | "label" | "expandButton" | "actions" | "editor" | "editedLabel" | "titleContainer">;