@reltio/components 1.4.1657 → 1.4.1658

package/cjs/components/ReactSelect/MultiSelect/MultiSelect.js

@@ -57,6 +57,14 @@ var AsyncSelect_1 = __importDefault(require("../AsyncSelect"));
 var components_1 = __importDefault(require("./components"));
 var styles_1 = require("@mui/styles");
 var utils_1 = require("../../../core/utils");
+var useKeepInputVisible_1 = require("../hooks/useKeepInputVisible");
+var getControlRef = function (innerRef) {
+    var controlRef = {};
+    if (innerRef.current) {
+        controlRef.current = (0, ramda_1.either)((0, ramda_1.path)(['select', 'controlRef']), (0, ramda_1.path)(['select', 'select', 'controlRef']))(innerRef.current);
+    }
+    return controlRef;
+};
 var useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     label: {
         top: 6,
@@ -85,6 +93,8 @@ function MultiSelect(props) {
     var _b = (0, react_1.useState)(''), inputValue = _b[0], setInputValue = _b[1];
     var multiSelectClasses = useStyles((0, ramda_1.omit)(['classes'], props));
     var inputId = getInputId();
+    var innerRef = (0, react_1.useRef)();
+    (0, useKeepInputVisible_1.useKeepInputVisible)(props.value, getControlRef(innerRef));
     var components = __assign(__assign({}, components_1.default), componentsProp);
     var classes = (0, utils_1.mergeClasses)(multiSelectClasses, classesProp);
     function handleInputChange(value, _a) {
@@ -112,7 +122,7 @@ function MultiSelect(props) {
                 } }, props.TextFieldProps)
         }
         : {};
-    return (react_1.default.createElement(SelectComponent, __assign({ isMulti: true, inputId: inputId, inputValue: inputValue, onChange: handleChange, onInputChange: handleInputChange, closeMenuOnSelect: false, hideSelectedOptions: false, classes: classes, components: components, styles: styles, menuPlacement: menuPlacement, loadOptions: getOptions }, labelProps, reactSelectProps)));
+    return (react_1.default.createElement(SelectComponent, __assign({ isMulti: true, inputId: inputId, inputValue: inputValue, onChange: handleChange, onInputChange: handleInputChange, closeMenuOnSelect: false, hideSelectedOptions: false, classes: classes, components: components, styles: styles, menuPlacement: menuPlacement, loadOptions: getOptions, innerRef: innerRef }, labelProps, reactSelectProps)));
 }
 MultiSelect.defaultProps = {
     creatable: false,

package/cjs/components/ReactSelect/hooks/useKeepInputVisible.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare const useKeepInputVisible: (values: any[], ref: MutableRefObject<HTMLElement>) => void;

package/cjs/components/ReactSelect/hooks/useKeepInputVisible.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeepInputVisible = void 0;
+var react_1 = require("react");
+var hooks_1 = require("../../../hooks");
+var findNearestScrollableElement = function (element) {
+    var currentElement = element === null || element === void 0 ? void 0 : element.parentElement;
+    while (currentElement) {
+        if (currentElement.scrollHeight > currentElement.clientHeight) {
+            return currentElement;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+};
+var needToScroll = function (valueLength, prevValuesLength, parentElementWithScroll, currentElement) {
+    return valueLength &&
+        prevValuesLength < valueLength &&
+        currentElement.getBoundingClientRect().bottom > parentElementWithScroll.getBoundingClientRect().bottom;
+};
+var useKeepInputVisible = function (values, ref) {
+    if (values === void 0) { values = []; }
+    var prevValuesLength = (0, hooks_1.usePrevious)(values === null || values === void 0 ? void 0 : values.length);
+    (0, react_1.useEffect)(function () {
+        var timerId = setTimeout(function () {
+            var _a;
+            var parentElementWithScroll = findNearestScrollableElement(ref === null || ref === void 0 ? void 0 : ref.current);
+            if (parentElementWithScroll &&
+                needToScroll(values === null || values === void 0 ? void 0 : values.length, prevValuesLength, parentElementWithScroll, ref.current)) {
+                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView(false);
+            }
+        }, 0);
+        return function () {
+            clearTimeout(timerId);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [values === null || values === void 0 ? void 0 : values.length]);
+};
+exports.useKeepInputVisible = useKeepInputVisible;

package/cjs/components/history/HistoryFilterButton/HistoryFilterButton.js

@@ -96,7 +96,7 @@ var HistoryFilterButton = function (_a) {
                 horizontal: 'right'
             } },
             react_1.default.createElement(DialogTitle_1.default, null, ui_i18n_1.default.text('Filter')),
-            react_1.default.createElement(DialogContent_1.default, { dividers: true, className: styles.filterContainer },
+            react_1.default.createElement(DialogContent_1.default, { dividers: true, className: styles.filterContainer, "data-reltio-id": "history-filter-container" },
                 react_1.default.createElement(DateRangeSelector_1.default, { value: dateRange, onChange: handlePropChange('dateRange'), className: styles.filterItem }),
                 react_1.default.createElement(Divider_1.default, { light: true, className: styles.divider }),
                 react_1.default.createElement(UserSelector_1.default, { selectedUsers: users, onChange: handlePropChange('users'), className: styles.filterItem, disableUnderline: true }),

package/esm/components/ReactSelect/MultiSelect/MultiSelect.js

@@ -20,15 +20,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { omit } from 'ramda';
+import { omit, either, path } from 'ramda';
 import CreatableSelect from '../CreatableSelect';
 import Select from '../Select';
 import AsyncSelect from '../AsyncSelect';
 import multiSelectComponents from './components';
 import { makeStyles } from '@mui/styles';
 import { mergeClasses } from '../../../core/utils';
+import { useKeepInputVisible } from '../hooks/useKeepInputVisible';
+var getControlRef = function (innerRef) {
+    var controlRef = {};
+    if (innerRef.current) {
+        controlRef.current = either(path(['select', 'controlRef']), path(['select', 'select', 'controlRef']))(innerRef.current);
+    }
+    return controlRef;
+};
 var useStyles = makeStyles(function (theme) { return ({
     label: {
         top: 6,
@@ -57,6 +65,8 @@ function MultiSelect(props) {
     var _b = useState(''), inputValue = _b[0], setInputValue = _b[1];
     var multiSelectClasses = useStyles(omit(['classes'], props));
     var inputId = getInputId();
+    var innerRef = useRef();
+    useKeepInputVisible(props.value, getControlRef(innerRef));
     var components = __assign(__assign({}, multiSelectComponents), componentsProp);
     var classes = mergeClasses(multiSelectClasses, classesProp);
     function handleInputChange(value, _a) {
@@ -84,7 +94,7 @@ function MultiSelect(props) {
                 } }, props.TextFieldProps)
         }
         : {};
-    return (React.createElement(SelectComponent, __assign({ isMulti: true, inputId: inputId, inputValue: inputValue, onChange: handleChange, onInputChange: handleInputChange, closeMenuOnSelect: false, hideSelectedOptions: false, classes: classes, components: components, styles: styles, menuPlacement: menuPlacement, loadOptions: getOptions }, labelProps, reactSelectProps)));
+    return (React.createElement(SelectComponent, __assign({ isMulti: true, inputId: inputId, inputValue: inputValue, onChange: handleChange, onInputChange: handleInputChange, closeMenuOnSelect: false, hideSelectedOptions: false, classes: classes, components: components, styles: styles, menuPlacement: menuPlacement, loadOptions: getOptions, innerRef: innerRef }, labelProps, reactSelectProps)));
 }
 MultiSelect.defaultProps = {
     creatable: false,

package/esm/components/ReactSelect/hooks/useKeepInputVisible.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare const useKeepInputVisible: (values: any[], ref: MutableRefObject<HTMLElement>) => void;

package/esm/components/ReactSelect/hooks/useKeepInputVisible.js

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { usePrevious } from '../../../hooks';
+var findNearestScrollableElement = function (element) {
+    var currentElement = element === null || element === void 0 ? void 0 : element.parentElement;
+    while (currentElement) {
+        if (currentElement.scrollHeight > currentElement.clientHeight) {
+            return currentElement;
+        }
+        currentElement = currentElement.parentElement;
+    }
+    return null;
+};
+var needToScroll = function (valueLength, prevValuesLength, parentElementWithScroll, currentElement) {
+    return valueLength &&
+        prevValuesLength < valueLength &&
+        currentElement.getBoundingClientRect().bottom > parentElementWithScroll.getBoundingClientRect().bottom;
+};
+export var useKeepInputVisible = function (values, ref) {
+    if (values === void 0) { values = []; }
+    var prevValuesLength = usePrevious(values === null || values === void 0 ? void 0 : values.length);
+    useEffect(function () {
+        var timerId = setTimeout(function () {
+            var _a;
+            var parentElementWithScroll = findNearestScrollableElement(ref === null || ref === void 0 ? void 0 : ref.current);
+            if (parentElementWithScroll &&
+                needToScroll(values === null || values === void 0 ? void 0 : values.length, prevValuesLength, parentElementWithScroll, ref.current)) {
+                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView(false);
+            }
+        }, 0);
+        return function () {
+            clearTimeout(timerId);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [values === null || values === void 0 ? void 0 : values.length]);
+};

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

@@ -68,7 +68,7 @@ var HistoryFilterButton = function (_a) {
                 horizontal: 'right'
             } },
             React.createElement(DialogTitle, null, i18n.text('Filter')),
-            React.createElement(DialogContent, { dividers: true, className: styles.filterContainer },
+            React.createElement(DialogContent, { dividers: true, className: styles.filterContainer, "data-reltio-id": "history-filter-container" },
                 React.createElement(DateRangeSelector, { value: dateRange, onChange: handlePropChange('dateRange'), className: styles.filterItem }),
                 React.createElement(Divider, { light: true, className: styles.divider }),
                 React.createElement(UserSelector, { selectedUsers: users, onChange: handlePropChange('users'), className: styles.filterItem, disableUnderline: true }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1657",
+  "version": "1.4.1658",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@date-io/moment": "^1.3.5",
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-sdk": "^1.4.1657",
+    "@reltio/mdm-sdk": "^1.4.1658",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",