@reltio/components 1.4.1731 → 1.4.1733

package/esm/components/ReltioGridLayout/ReltioGridLayout.js

@@ -9,10 +9,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useCallback, useMemo, useRef, useState, memo } from 'react';
+import React, { useEffect, useCallback, useMemo, useRef, useState, memo } from 'react';
 import GridLayout from 'react-grid-layout';
 import ReactResizeDetector from 'react-resize-detector';
-import { pipe, ifElse, always } from 'ramda';
+import { pipe, ifElse, always, equals } from 'ramda';
 import classnames from 'classnames';
 import { alignGroupedItemsHeights, calcLayoutItemsHeight, reltioLayoutToReactGridLayout, reactGridLayoutToReltioLayout, reactGridLayoutItemToReltioLayoutItem, copyPropsFromPreviousLayout, calcHeight, getReltioLayoutItemById } from './helpers';
 import { noop } from '../../core';
@@ -26,6 +26,7 @@ var ReltioGridLayout = function (_a) {
     var _b;
     var views = _a.views, layout = _a.layout, _c = _a.layoutOptions, layoutOptions = _c === void 0 ? DEFAULT_LAYOUT_OPTIONS : _c, _d = _a.onLayoutChanged, onLayoutChanged = _d === void 0 ? noop : _d, draggableHandle = _a.draggableHandle, LayoutItem = _a.LayoutItem, onRemove = _a.onRemove, onDrop = _a.onDrop, droppingItem = _a.droppingItem, isDroppable = _a.isDroppable, onDropDragOver = _a.onDropDragOver, isStatic = _a.isStatic, classes = _a.classes, _e = _a.onResize, onResize = _e === void 0 ? noop : _e;
     var ref = useRef();
+    var shouldCompareLayout = useRef(false);
     var heightsMap = useRef({});
     var styles = useStyles();
     var _f = useState(null), resizingItemId = _f[0], setResizingItemId = _f[1];
@@ -33,7 +34,8 @@ var ReltioGridLayout = function (_a) {
     var _h = useState(0), width = _h[0], setWidth = _h[1];
     var cols = layoutOptions.cols, rowHeight = layoutOptions.rowHeight, margin = layoutOptions.margin;
     var processedLayout = useMemo(function () { return reltioLayoutToReactGridLayout(layout); }, [layout]);
-    var onReltioLayoutChanged = pipe(reactGridLayoutToReltioLayout, copyPropsFromPreviousLayout(['autosizing'], layout), ifElse(always(isStatic), alignGroupedItemsHeights(heightsMap.current), calcLayoutItemsHeight(heightsMap.current)), onLayoutChanged);
+    var convertReactLayoutToReltioLayout = pipe(reactGridLayoutToReltioLayout, copyPropsFromPreviousLayout(['autosizing'], layout), ifElse(always(isStatic), alignGroupedItemsHeights(heightsMap.current), calcLayoutItemsHeight(heightsMap.current)));
+    var onReltioLayoutChanged = pipe(convertReactLayoutToReltioLayout, onLayoutChanged);
     var handleDrop = function (layout, layoutItem, e) {
         if (onDrop && layoutItem) {
             onDrop(reactGridLayoutToReltioLayout(layout), reactGridLayoutItemToReltioLayoutItem(layoutItem), e);
@@ -46,10 +48,26 @@ var ReltioGridLayout = function (_a) {
                 var newHeight = calcHeight(height, layoutOptions);
                 if (newHeight !== heightsMap.current[layoutItemId]) {
                     heightsMap.current[layoutItemId] = newHeight;
+                    shouldCompareLayout.current = false;
                     onReltioLayoutChanged(processedLayout);
                 }
             }
         } })); };
+    useEffect(function () {
+        if (isStatic) {
+            if (shouldCompareLayout.current) {
+                var expectedLayout = convertReactLayoutToReltioLayout(processedLayout);
+                var isSameLayout = equals(reltioLayoutToReactGridLayout(expectedLayout), processedLayout);
+                if (!isSameLayout) {
+                    shouldCompareLayout.current = false;
+                    onLayoutChanged(expectedLayout);
+                }
+            }
+            else {
+                shouldCompareLayout.current = true;
+            }
+        }
+    }, [processedLayout, isStatic]);
     return (React.createElement(React.Fragment, null,
         React.createElement(ReactResizeDetector, { refreshMode: "debounce", refreshRate: 50, handleWidth: true, onResize: function (width) { return setWidth(width); } }),
         !!width && (React.createElement(GridLayout, { innerRef: ref, layout: processedLayout, cols: cols, draggableHandle: draggableHandle, autoSize: true, rowHeight: rowHeight, width: width, margin: margin, onLayoutChange: isStatic ? undefined : onReltioLayoutChanged, isResizable: !isStatic && !isFullscreenEnabled, isDraggable: !isStatic && !isFullscreenEnabled, className: classnames(classes === null || classes === void 0 ? void 0 : classes.root, styles.gridLayout, (_b = {},

package/esm/components/index.d.ts

@@ -155,3 +155,4 @@ export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuI
 export { default as TenantLabel } from './TenantLabel/TenantLabel';
 export { default as StepNavigation } from './StepNavigation/StepNavigation';
 export { TableSkeleton } from './TableSkeleton/TableSkeleton';
+export { default as LogicOperator } from './LogicOperator/LogicOperator';

package/esm/components/index.js

@@ -155,3 +155,4 @@ export { default as MultilineMenuItem } from './MultilineMenuItem/MultilineMenuI
 export { default as TenantLabel } from './TenantLabel/TenantLabel';
 export { default as StepNavigation } from './StepNavigation/StepNavigation';
 export { TableSkeleton } from './TableSkeleton/TableSkeleton';
+export { default as LogicOperator } from './LogicOperator/LogicOperator';

package/esm/types/index.d.ts

@@ -1,17 +1,7 @@
 import React from 'react';
-import { AttributeType, SearchFilter } from '@reltio/mdm-sdk';
-export type ReactGridLayoutItem = {
-    i: string;
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-    minW?: number;
-    minH?: number;
-    maxW?: number;
-    maxH?: number;
-    static?: boolean;
-};
+import { AttributeType, SearchFilter, SearchOperator } from '@reltio/mdm-sdk';
+import { Layout as LayoutItem } from 'react-grid-layout';
+export type ReactGridLayoutItem = LayoutItem;
 export type ReltioGridLayoutOptions = {
     cols: number;
     rowHeight: number;
@@ -46,6 +36,7 @@ export type FiltersRowData = {
     filter: string;
     id: number;
     values: SearchFilter['values'];
+    operator?: SearchOperator;
 };
 export type AttributeSelectorItem = {
     attrType?: AttributeType;
@@ -62,6 +53,11 @@ export type AttributeSelectorItemsGroup = {
     title: string;
     attributes: AttributeSelectorItem[];
 };
+export type AttributesTypesGroup = {
+    id?: string;
+    title: string;
+    attributeTypes: AttributeType[];
+};
 export type AttributeSelectionInfo = {
     index: number;
     checked: boolean;
@@ -137,3 +133,10 @@ export type AnyAction = {
     type: string;
     [key: string]: any;
 };
+export type AttributesFilterComponentsClasses = {
+    attributeSelectorContainer?: string;
+    valuesEditorContainer?: string;
+    filterSelectorContainer?: string;
+    actionsContainer?: string;
+    filterPopup?: string;
+};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1731",
+  "version": "1.4.1733",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-sdk": "^1.4.1716",
+    "@reltio/mdm-sdk": "^1.4.1717",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",