@reltio/components 1.4.1636 → 1.4.1637

package/cjs/components/CollaborationItem/Comment/Comment.js

@@ -41,6 +41,7 @@ var CommentTarget_1 = require("../CommentTarget/CommentTarget");
 var CommentContent_1 = require("../CommentContent/CommentContent");
 var Avatar_1 = require("../Avatar/Avatar");
 var contexts_1 = require("../../../contexts");
+var hooks_1 = require("../../../hooks");
 var utils_1 = require("../utils");
 var SendMessageArea_1 = require("../SendMessageArea/SendMessageArea");
 var styles_1 = require("./styles");
@@ -56,13 +57,7 @@ var Comment = function (_a) {
     var commentUri = (0, utils_1.createEditedCommentUri)(comment);
     var isEditing = getCommentState(uri, commentUri).isEditing;
     var updateIsEditingComment = (0, react_1.useCallback)(function (value) { return updateCommentState(uri, commentUri, { isEditing: value }); }, [commentUri, updateCommentState, uri]);
-    (0, react_1.useEffect)(function () {
-        if (isEditing) {
-            var position = inputRef.current.value.length;
-            inputRef.current.focus();
-            inputRef.current.setSelectionRange(position, position);
-        }
-    }, [isEditing]);
+    (0, hooks_1.useAutoFocus)(inputRef, isEditing);
     var menuItems = (0, react_1.useMemo)(function () {
         return isResolved
             ? [

package/cjs/components/CollaborationItem/RepliedComment/RepliedComment.js

@@ -39,6 +39,7 @@ var Avatar_1 = require("../Avatar/Avatar");
 var CommentContent_1 = require("../CommentContent/CommentContent");
 var utils_1 = require("../utils");
 var contexts_1 = require("../../../contexts");
+var hooks_1 = require("../../../hooks");
 var DropDownMenuButton_1 = __importDefault(require("../../DropDownMenuButton/DropDownMenuButton"));
 var SmallIconButton_1 = require("../../SmallIconButton");
 var SendMessageArea_1 = require("../SendMessageArea/SendMessageArea");
@@ -53,11 +54,7 @@ var RepliedComment = function (_a) {
     var commentUri = (0, utils_1.createEditedReplyUri)(comment, reply);
     var isEditing = getCommentState(uri, commentUri).isEditing;
     var updateIsEditingReply = (0, react_1.useCallback)(function (value) { return updateCommentState(uri, commentUri, { isEditing: value }); }, [commentUri, updateCommentState, uri]);
-    (0, react_1.useEffect)(function () {
-        if (isEditing) {
-            inputRef.current.focus();
-        }
-    }, [isEditing]);
+    (0, hooks_1.useAutoFocus)(inputRef, isEditing);
     var styles = (0, styles_1.useStyles)();
     var menuItems = (0, react_1.useMemo)(function () { return [
         {

package/cjs/hooks/index.d.ts

@@ -25,3 +25,4 @@ export { useSavedStateForEntityType } from './useSavedStateForEntityType';
 export { useSnackbar } from './useSnackbar';
 export { useIsMountedRef } from './useIsMountedRef';
 export { useLayoutResetter } from './useLayoutResetter';
+export { useAutoFocus } from './useAutoFocus';

package/cjs/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useScrollToAttributeError = void 0;
+exports.useAutoFocus = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useScrollToAttributeError = void 0;
 var useScrollToAttributeError_1 = require("./useScrollToAttributeError/useScrollToAttributeError");
 Object.defineProperty(exports, "useScrollToAttributeError", { enumerable: true, get: function () { return useScrollToAttributeError_1.useScrollToAttributeError; } });
 var useActions_1 = require("./useActions");
@@ -55,3 +55,5 @@ var useIsMountedRef_1 = require("./useIsMountedRef");
 Object.defineProperty(exports, "useIsMountedRef", { enumerable: true, get: function () { return useIsMountedRef_1.useIsMountedRef; } });
 var useLayoutResetter_1 = require("./useLayoutResetter");
 Object.defineProperty(exports, "useLayoutResetter", { enumerable: true, get: function () { return useLayoutResetter_1.useLayoutResetter; } });
+var useAutoFocus_1 = require("./useAutoFocus");
+Object.defineProperty(exports, "useAutoFocus", { enumerable: true, get: function () { return useAutoFocus_1.useAutoFocus; } });

package/cjs/hooks/useAutoFocus.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare const useAutoFocus: (inputRef: MutableRefObject<HTMLInputElement>, isEditing: boolean) => void;

package/cjs/hooks/useAutoFocus.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoFocus = void 0;
+var react_1 = require("react");
+var useAutoFocus = function (inputRef, isEditing) {
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c, _d;
+        if (isEditing) {
+            var position = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length;
+            (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.setSelectionRange(position, position);
+        }
+    }, [inputRef, isEditing]);
+};
+exports.useAutoFocus = useAutoFocus;

package/esm/components/CollaborationItem/Comment/Comment.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useContext, useRef, useEffect, useCallback } from 'react';
+import React, { useMemo, useContext, useRef, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
 import Link from '@mui/material/Link';
@@ -12,6 +12,7 @@ import { CommentTarget } from '../CommentTarget/CommentTarget';
 import { CommentContent } from '../CommentContent/CommentContent';
 import { Avatar } from '../Avatar/Avatar';
 import { CollaborationContext } from '../../../contexts';
+import { useAutoFocus } from '../../../hooks';
 import { createEditedCommentUri, formatDate } from '../utils';
 import { SendMessageArea } from '../SendMessageArea/SendMessageArea';
 import { useStyles } from './styles';
@@ -27,13 +28,7 @@ export var Comment = function (_a) {
     var commentUri = createEditedCommentUri(comment);
     var isEditing = getCommentState(uri, commentUri).isEditing;
     var updateIsEditingComment = useCallback(function (value) { return updateCommentState(uri, commentUri, { isEditing: value }); }, [commentUri, updateCommentState, uri]);
-    useEffect(function () {
-        if (isEditing) {
-            var position = inputRef.current.value.length;
-            inputRef.current.focus();
-            inputRef.current.setSelectionRange(position, position);
-        }
-    }, [isEditing]);
+    useAutoFocus(inputRef, isEditing);
     var menuItems = useMemo(function () {
         return isResolved
             ? [

package/esm/components/CollaborationItem/RepliedComment/RepliedComment.js

@@ -1,4 +1,4 @@
-import React, { useRef, useContext, useMemo, useEffect, useCallback } from 'react';
+import React, { useRef, useContext, useMemo, useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
@@ -10,6 +10,7 @@ import { Avatar } from '../Avatar/Avatar';
 import { CommentContent } from '../CommentContent/CommentContent';
 import { createEditedReplyUri, formatDate } from '../utils';
 import { CollaborationContext } from '../../../contexts';
+import { useAutoFocus } from '../../../hooks';
 import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
 import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 import { SendMessageArea } from '../SendMessageArea/SendMessageArea';
@@ -24,11 +25,7 @@ export var RepliedComment = function (_a) {
     var commentUri = createEditedReplyUri(comment, reply);
     var isEditing = getCommentState(uri, commentUri).isEditing;
     var updateIsEditingReply = useCallback(function (value) { return updateCommentState(uri, commentUri, { isEditing: value }); }, [commentUri, updateCommentState, uri]);
-    useEffect(function () {
-        if (isEditing) {
-            inputRef.current.focus();
-        }
-    }, [isEditing]);
+    useAutoFocus(inputRef, isEditing);
     var styles = useStyles();
     var menuItems = useMemo(function () { return [
         {

package/esm/hooks/index.d.ts

@@ -25,3 +25,4 @@ export { useSavedStateForEntityType } from './useSavedStateForEntityType';
 export { useSnackbar } from './useSnackbar';
 export { useIsMountedRef } from './useIsMountedRef';
 export { useLayoutResetter } from './useLayoutResetter';
+export { useAutoFocus } from './useAutoFocus';

package/esm/hooks/index.js

@@ -25,3 +25,4 @@ export { useSavedStateForEntityType } from './useSavedStateForEntityType';
 export { useSnackbar } from './useSnackbar';
 export { useIsMountedRef } from './useIsMountedRef';
 export { useLayoutResetter } from './useLayoutResetter';
+export { useAutoFocus } from './useAutoFocus';

package/esm/hooks/useAutoFocus.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare const useAutoFocus: (inputRef: MutableRefObject<HTMLInputElement>, isEditing: boolean) => void;

package/esm/hooks/useAutoFocus.js

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+export var useAutoFocus = function (inputRef, isEditing) {
+    useEffect(function () {
+        var _a, _b, _c, _d;
+        if (isEditing) {
+            var position = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length;
+            (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
+            (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.setSelectionRange(position, position);
+        }
+    }, [inputRef, isEditing]);
+};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1636",
+  "version": "1.4.1637",
   "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.1636",
-    "@reltio/mdm-sdk": "^1.4.1636",
+    "@reltio/mdm-module": "^1.4.1637",
+    "@reltio/mdm-sdk": "^1.4.1637",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",