@reltio/components 1.4.1625 → 1.4.1627

package/cjs/components/BasicTableView/BasicTable/hooks/useDynamicRowCellHeight.d.ts

@@ -5,8 +5,8 @@ type GetRowCellKeyProps = {
     columnData: ColumnData;
     rowValue: RowValue;
 };
-declare const useDynamicRowCellHeight: (getRowCellKey?: ({ rowIndex, columnData: { id }, cellIndex }: GetRowCellKeyProps) => string) => {
-    getDynamicRowCellHeight: any;
+declare const useDynamicRowCellHeight: (getRowCellKey?: ({ rowIndex, columnData, cellIndex }: GetRowCellKeyProps) => string) => {
+    getDynamicRowCellHeight: (cell: GetRowCellKeyProps) => number;
     changeRowCellHeight: any;
     clearHeightsCache: () => void;
 };

package/cjs/components/BasicTableView/BasicTable/hooks/useDynamicRowCellHeight.js

@@ -15,27 +15,29 @@ var react_1 = require("react");
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var defaultGetRowCellKey = function (_a) {
-    var rowIndex = _a.rowIndex, id = _a.columnData.id, cellIndex = _a.cellIndex;
-    return "".concat(id, "[").concat(rowIndex, "][").concat(cellIndex, "]");
+    var rowIndex = _a.rowIndex, columnData = _a.columnData, cellIndex = _a.cellIndex;
+    return "".concat(columnData.id, "[").concat(rowIndex, "][").concat(cellIndex, "]");
 };
 var useDynamicRowCellHeight = function (getRowCellKey) {
     if (getRowCellKey === void 0) { getRowCellKey = defaultGetRowCellKey; }
     var _a = (0, react_1.useState)({}), rowCellHeightsMap = _a[0], setRowCellHeightsMap = _a[1];
     var rowCellHeightsMapCache = (0, react_1.useRef)({});
-    var batchHeightUpdate = function (key, value) {
-        rowCellHeightsMapCache.current[key] = value;
-    };
-    var flushHeightUpdates = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(function () {
-        setRowCellHeightsMap(function (prev) {
-            var next = __assign({}, rowCellHeightsMapCache.current);
-            return (0, ramda_1.equals)(prev, next) ? prev : next;
-        });
-    }), []);
+    var flushHeightUpdates = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(function () { return setRowCellHeightsMap(__assign({}, rowCellHeightsMapCache.current)); }), []);
     var clearHeightsCache = (0, react_1.useCallback)(function () {
         rowCellHeightsMapCache.current = {};
     }, []);
-    var getDynamicRowCellHeight = (0, react_1.useCallback)((0, ramda_1.pipe)(getRowCellKey, (0, ramda_1.prop)(ramda_1.__, rowCellHeightsMap)), [rowCellHeightsMap]);
-    var changeRowCellHeight = (0, react_1.useCallback)((0, ramda_1.curry)((0, ramda_1.useWith)((0, ramda_1.pipe)(batchHeightUpdate, flushHeightUpdates), [getRowCellKey, ramda_1.identity])), []);
+    var getDynamicRowCellHeight = (0, react_1.useCallback)(function (cell) {
+        var key = getRowCellKey(cell);
+        return rowCellHeightsMap[key];
+    }, [getRowCellKey, rowCellHeightsMap]);
+    var changeRowCellHeight = (0, react_1.useCallback)((0, ramda_1.curry)(function (cell, height) {
+        var key = getRowCellKey(cell);
+        var currentHeight = rowCellHeightsMapCache.current[key];
+        if (currentHeight !== height) {
+            rowCellHeightsMapCache.current[key] = height;
+            flushHeightUpdates();
+        }
+    }), [flushHeightUpdates, getRowCellKey]);
     return { getDynamicRowCellHeight: getDynamicRowCellHeight, changeRowCellHeight: changeRowCellHeight, clearHeightsCache: clearHeightsCache };
 };
 exports.default = useDynamicRowCellHeight;

package/cjs/components/BasicTableView/RowCellAutoSizer/RowCellAutoSizer.js

@@ -47,7 +47,6 @@ var RowCellAutoSizer = function (_a) {
     var changeCellHeight = onChangeHeight({ rowIndex: rowIndex, cellIndex: cellIndex, columnData: columnData, rowValue: rowValue });
     var adjustCellHeight = function () { return cellRef.current && changeCellHeight(cellRef.current.clientHeight); };
     (0, hooks_1.useDidUpdateEffect)(adjustCellHeight, [rowValue.rawValue]);
-    (0, react_1.useEffect)(function () { return function () { return changeCellHeight(undefined); }; }, []);
     return (react_1.default.createElement("div", { ref: cellRef },
         react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: adjustCellHeight }),
         cell));

package/cjs/components/attributes/editMode/hooks/useScrollToAttribute/useScrollToAttribute.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
-export declare const useScrollToAttribute: (context: any) => {
+import { ContextType } from 'react';
+import { ScrollToElementContext } from '../../../../../contexts';
+export declare const useScrollToAttribute: (context?: ContextType<typeof ScrollToElementContext>) => {
     ref: import("react").MutableRefObject<HTMLDivElement>;
     highlightedClassName: string;
 } | {

package/cjs/components/attributes/editMode/hooks/useScrollToAttribute/useScrollToAttribute.js

@@ -6,12 +6,11 @@ var styles_1 = require("./styles");
 var useScrollToAttribute = function (context) {
     var styles = (0, styles_1.useStyles)();
     var ref = (0, react_1.useRef)(null);
-    var scrollIntoRef = (context || {}).scrollIntoRef;
     (0, react_1.useEffect)(function () {
         if (context) {
-            scrollIntoRef(ref);
+            context.scrollIntoRef(ref);
         }
-    }, [context, scrollIntoRef]);
+    }, [context]);
     return context ? { ref: ref, highlightedClassName: styles.highlighted } : { ref: ref };
 };
 exports.useScrollToAttribute = useScrollToAttribute;

package/cjs/contexts/ScrollToElementContext/index.js

@@ -47,13 +47,11 @@ var ScrollToElementProvider = function (_a) {
     var _b = (0, react_1.useState)(null), element = _b[0], setElement = _b[1];
     var highlightTimer = (0, react_1.useRef)(null);
     var scrollIntoRef = (0, react_1.useCallback)(function (ref) {
+        if (!ref.current)
+            return;
         ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        if (highlightTimer) {
-            clearTimeout(highlightTimer.current);
-        }
-        highlightTimer.current = setTimeout(function () {
-            setElement(null);
-        }, 2000);
+        clearTimeout(highlightTimer.current);
+        highlightTimer.current = setTimeout(function () { return setElement(null); }, 2000);
     }, []);
     var handleHighlightError = (0, react_1.useCallback)(function (highlightedError) {
         setElement({ value: highlightedError, type: ScrollType.Error });

package/cjs/hooks/useScrollToAttributeError/useScrollToAttributeError.js

@@ -14,8 +14,7 @@ var useScrollToAttributeError = function (_a) {
     var context = _a.highlightedError, _c = _a.isSimple, isSimple = _c === void 0 ? false : _c;
     var styles = (0, styles_1.useStyles)();
     var ref = (0, react_1.useRef)(null);
-    var _d = context || {}, element = _d.element, scrollIntoRef = _d.scrollIntoRef;
-    var severity = (0, react_1.useMemo)(function () { return (0, ramda_1.propOr)(mdm_sdk_1.ErrorSeverity.ERROR, 'severity')(element); }, [element]);
+    var severity = (0, ramda_1.pathOr)(mdm_sdk_1.ErrorSeverity.ERROR, ['element', 'severity'])(context);
     var errorClassName = (0, classnames_1.default)((_b = {},
         _b[styles.highlightError] = severity === mdm_sdk_1.ErrorSeverity.ERROR,
         _b[styles.highlightWarning] = severity === mdm_sdk_1.ErrorSeverity.WARNING,
@@ -23,9 +22,9 @@ var useScrollToAttributeError = function (_a) {
         _b));
     (0, react_1.useEffect)(function () {
         if (context) {
-            scrollIntoRef(ref);
+            context.scrollIntoRef(ref);
         }
-    }, [context, scrollIntoRef]);
+    }, [context]);
     return context ? { ref: ref, errorClassName: errorClassName } : { ref: ref };
 };
 exports.useScrollToAttributeError = useScrollToAttributeError;

package/esm/components/BasicTableView/BasicTable/hooks/useDynamicRowCellHeight.d.ts

@@ -5,8 +5,8 @@ type GetRowCellKeyProps = {
     columnData: ColumnData;
     rowValue: RowValue;
 };
-declare const useDynamicRowCellHeight: (getRowCellKey?: ({ rowIndex, columnData: { id }, cellIndex }: GetRowCellKeyProps) => string) => {
-    getDynamicRowCellHeight: any;
+declare const useDynamicRowCellHeight: (getRowCellKey?: ({ rowIndex, columnData, cellIndex }: GetRowCellKeyProps) => string) => {
+    getDynamicRowCellHeight: (cell: GetRowCellKeyProps) => number;
     changeRowCellHeight: any;
     clearHeightsCache: () => void;
 };

package/esm/components/BasicTableView/BasicTable/hooks/useDynamicRowCellHeight.js

@@ -10,30 +10,32 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { useCallback, useRef, useState } from 'react';
-import { __, curry, identity, pipe, prop, useWith, equals } from 'ramda';
+import { curry } from 'ramda';
 import { debounce } from '@reltio/mdm-sdk';
 var defaultGetRowCellKey = function (_a) {
-    var rowIndex = _a.rowIndex, id = _a.columnData.id, cellIndex = _a.cellIndex;
-    return "".concat(id, "[").concat(rowIndex, "][").concat(cellIndex, "]");
+    var rowIndex = _a.rowIndex, columnData = _a.columnData, cellIndex = _a.cellIndex;
+    return "".concat(columnData.id, "[").concat(rowIndex, "][").concat(cellIndex, "]");
 };
 var useDynamicRowCellHeight = function (getRowCellKey) {
     if (getRowCellKey === void 0) { getRowCellKey = defaultGetRowCellKey; }
     var _a = useState({}), rowCellHeightsMap = _a[0], setRowCellHeightsMap = _a[1];
     var rowCellHeightsMapCache = useRef({});
-    var batchHeightUpdate = function (key, value) {
-        rowCellHeightsMapCache.current[key] = value;
-    };
-    var flushHeightUpdates = useCallback(debounce(function () {
-        setRowCellHeightsMap(function (prev) {
-            var next = __assign({}, rowCellHeightsMapCache.current);
-            return equals(prev, next) ? prev : next;
-        });
-    }), []);
+    var flushHeightUpdates = useCallback(debounce(function () { return setRowCellHeightsMap(__assign({}, rowCellHeightsMapCache.current)); }), []);
     var clearHeightsCache = useCallback(function () {
         rowCellHeightsMapCache.current = {};
     }, []);
-    var getDynamicRowCellHeight = useCallback(pipe(getRowCellKey, prop(__, rowCellHeightsMap)), [rowCellHeightsMap]);
-    var changeRowCellHeight = useCallback(curry(useWith(pipe(batchHeightUpdate, flushHeightUpdates), [getRowCellKey, identity])), []);
+    var getDynamicRowCellHeight = useCallback(function (cell) {
+        var key = getRowCellKey(cell);
+        return rowCellHeightsMap[key];
+    }, [getRowCellKey, rowCellHeightsMap]);
+    var changeRowCellHeight = useCallback(curry(function (cell, height) {
+        var key = getRowCellKey(cell);
+        var currentHeight = rowCellHeightsMapCache.current[key];
+        if (currentHeight !== height) {
+            rowCellHeightsMapCache.current[key] = height;
+            flushHeightUpdates();
+        }
+    }), [flushHeightUpdates, getRowCellKey]);
     return { getDynamicRowCellHeight: getDynamicRowCellHeight, changeRowCellHeight: changeRowCellHeight, clearHeightsCache: clearHeightsCache };
 };
 export default useDynamicRowCellHeight;

package/esm/components/BasicTableView/RowCellAutoSizer/RowCellAutoSizer.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import ReactResizeDetector from 'react-resize-detector';
 import { useDidUpdateEffect } from '../../../hooks';
 var RowCellAutoSizer = function (_a) {
@@ -19,7 +19,6 @@ var RowCellAutoSizer = function (_a) {
     var changeCellHeight = onChangeHeight({ rowIndex: rowIndex, cellIndex: cellIndex, columnData: columnData, rowValue: rowValue });
     var adjustCellHeight = function () { return cellRef.current && changeCellHeight(cellRef.current.clientHeight); };
     useDidUpdateEffect(adjustCellHeight, [rowValue.rawValue]);
-    useEffect(function () { return function () { return changeCellHeight(undefined); }; }, []);
     return (React.createElement("div", { ref: cellRef },
         React.createElement(ReactResizeDetector, { handleHeight: true, onResize: adjustCellHeight }),
         cell));

package/esm/components/attributes/editMode/hooks/useScrollToAttribute/useScrollToAttribute.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
-export declare const useScrollToAttribute: (context: any) => {
+import { ContextType } from 'react';
+import { ScrollToElementContext } from '../../../../../contexts';
+export declare const useScrollToAttribute: (context?: ContextType<typeof ScrollToElementContext>) => {
     ref: import("react").MutableRefObject<HTMLDivElement>;
     highlightedClassName: string;
 } | {

package/esm/components/attributes/editMode/hooks/useScrollToAttribute/useScrollToAttribute.js

@@ -3,11 +3,10 @@ import { useStyles } from './styles';
 export var useScrollToAttribute = function (context) {
     var styles = useStyles();
     var ref = useRef(null);
-    var scrollIntoRef = (context || {}).scrollIntoRef;
     useEffect(function () {
         if (context) {
-            scrollIntoRef(ref);
+            context.scrollIntoRef(ref);
         }
-    }, [context, scrollIntoRef]);
+    }, [context]);
     return context ? { ref: ref, highlightedClassName: styles.highlighted } : { ref: ref };
 };

package/esm/contexts/ScrollToElementContext/index.js

@@ -19,13 +19,11 @@ export var ScrollToElementProvider = function (_a) {
     var _b = useState(null), element = _b[0], setElement = _b[1];
     var highlightTimer = useRef(null);
     var scrollIntoRef = useCallback(function (ref) {
+        if (!ref.current)
+            return;
         ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        if (highlightTimer) {
-            clearTimeout(highlightTimer.current);
-        }
-        highlightTimer.current = setTimeout(function () {
-            setElement(null);
-        }, 2000);
+        clearTimeout(highlightTimer.current);
+        highlightTimer.current = setTimeout(function () { return setElement(null); }, 2000);
     }, []);
     var handleHighlightError = useCallback(function (highlightedError) {
         setElement({ value: highlightedError, type: ScrollType.Error });

package/esm/hooks/useScrollToAttributeError/useScrollToAttributeError.js

@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { propOr } from 'ramda';
+import { useEffect, useRef } from 'react';
+import { pathOr } from 'ramda';
 import classnames from 'classnames';
 import { ErrorSeverity } from '@reltio/mdm-sdk';
 import { useStyles } from './styles';
@@ -8,8 +8,7 @@ export var useScrollToAttributeError = function (_a) {
     var context = _a.highlightedError, _c = _a.isSimple, isSimple = _c === void 0 ? false : _c;
     var styles = useStyles();
     var ref = useRef(null);
-    var _d = context || {}, element = _d.element, scrollIntoRef = _d.scrollIntoRef;
-    var severity = useMemo(function () { return propOr(ErrorSeverity.ERROR, 'severity')(element); }, [element]);
+    var severity = pathOr(ErrorSeverity.ERROR, ['element', 'severity'])(context);
     var errorClassName = classnames((_b = {},
         _b[styles.highlightError] = severity === ErrorSeverity.ERROR,
         _b[styles.highlightWarning] = severity === ErrorSeverity.WARNING,
@@ -17,8 +16,8 @@ export var useScrollToAttributeError = function (_a) {
         _b));
     useEffect(function () {
         if (context) {
-            scrollIntoRef(ref);
+            context.scrollIntoRef(ref);
         }
-    }, [context, scrollIntoRef]);
+    }, [context]);
     return context ? { ref: ref, errorClassName: errorClassName } : { ref: ref };
 };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1625",
+  "version": "1.4.1627",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1625",
-    "@reltio/mdm-sdk": "^1.4.1625",
+    "@reltio/mdm-module": "^1.4.1627",
+    "@reltio/mdm-sdk": "^1.4.1627",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",