Remove textarea caret dep (#17105)

remove dependency for mascot head movement

package.json

@@ -330,7 +330,6 @@
     "ses": "^0.12.4",
     "single-call-balance-checker-abi": "^1.0.0",
     "swappable-obj-proxy": "^1.1.0",
-    "textarea-caret": "^3.0.1",
     "unicode-confusables": "^0.1.1",
     "uuid": "^8.3.2",
     "valid-url": "^1.0.9",

ui/components/ui/mascot/mascot.component.js

@@ -72,7 +72,7 @@ export default class Mascot extends Component {
 
   lookAt(target) {
     this.unfollowMouse();
-    this.logo.lookAt(target);
+    this.logo.lookAtAndRender(target);
     this.refollowMouse();
   }
 

ui/pages/unlock-page/unlock-page.component.js

@@ -1,7 +1,6 @@
 import { EventEmitter } from 'events';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import getCaretCoordinates from 'textarea-caret';
 import Button from '../../components/ui/button';
 import TextField from '../../components/ui/text-field';
 import Mascot from '../../components/ui/mascot';
@@ -13,6 +12,7 @@ import {
 } from '../../../shared/constants/metametrics';
 import { SUPPORT_LINK } from '../../../shared/lib/ui-utils';
 import { isBeta } from '../../helpers/utils/build-types';
+import { getCaretCoordinates } from './unlock-page.util';
 
 export default class UnlockPage extends Component {
   static contextTypes = {
@@ -34,7 +34,7 @@ export default class UnlockPage extends Component {
      */
     onRestore: PropTypes.func,
     /**
-     * onSumbit handler when form is submitted
+     * onSubmit handler when form is submitted
      */
     onSubmit: PropTypes.func,
     /**
@@ -124,7 +124,6 @@ export default class UnlockPage extends Component {
 
   handleInputChange({ target }) {
     this.setState({ password: target.value, error: null });
-
     // tell mascot to look at page action
     if (target.getBoundingClientRect) {
       const element = target;

ui/pages/unlock-page/unlock-page.test.js

@@ -19,6 +19,7 @@ jest.mock('@metamask/logo', () => () => {
     setFollowMouse: jest.fn(),
     stopAnimation: jest.fn(),
     lookAt: jest.fn(),
+    lookAtAndRender: jest.fn(),
   };
 });
 

ui/pages/unlock-page/unlock-page.util.js

@@ -0,0 +1,17 @@
+export function getCaretCoordinates(element, position) {
+  const div = document.createElement('div');
+  div.id = 'password-mirror-div';
+  document.body.appendChild(div);
+  const computed = window.getComputedStyle(element);
+  div.textContent = new Array(position + 1).join('•');
+  const span = document.createElement('span');
+  span.textContent = '•';
+  div.appendChild(span);
+
+  const coordinates = {
+    top: span.offsetTop + parseInt(computed.borderTopWidth, 10),
+    left: span.offsetLeft + parseInt(computed.borderLeftWidth, 10),
+  };
+  document.body.removeChild(div);
+  return coordinates;
+}

yarn.lock

@@ -23058,7 +23058,6 @@ __metadata:
     stylelint: ^13.6.1
     swappable-obj-proxy: ^1.1.0
     terser: ^5.7.0
-    textarea-caret: ^3.0.1
     through2: ^4.0.2
     ts-node: ^10.5.0
     ttest: ^2.1.1
@@ -31385,13 +31384,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"textarea-caret@npm:^3.0.1":
-  version: 3.0.2
-  resolution: "textarea-caret@npm:3.0.2"
-  checksum: 804d391177969ecbbdbb303cbe6cabfb7d04b1a5fbb6b33860539ac775cd702687947815bd0f6422db8887a59b21333b5a1b9b1d8c50e3ab37187c3b3163e4ea
-  languageName: node
-  linkType: hard
-
 "thread-stream@npm:^0.15.1":
   version: 0.15.2
   resolution: "thread-stream@npm:0.15.2"