auth0-lock 14.2.1 → 14.2.2

package/lib/ui/input/username_input.js

@@ -51,6 +51,7 @@ var UsernameInput = exports.default = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, UsernameInput);
     _this = _callSuper(this, UsernameInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(UsernameInput, _React$Component);
@@ -83,7 +84,7 @@ var UsernameInput = exports.default = /*#__PURE__*/function (_React$Component) {
         name: "username",
         icon: IconSvg
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
-        ref: "input",
+        ref: this.inputRef,
         type: "text",
         name: "username",
         className: "auth0-lock-input",

package/lib/ui/input/vcode_input.js

@@ -57,6 +57,7 @@ var VcodeInput = exports.default = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, VcodeInput);
     _this = _callSuper(this, VcodeInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(VcodeInput, _React$Component);
@@ -69,7 +70,7 @@ var VcodeInput = exports.default = /*#__PURE__*/function (_React$Component) {
         // the input to be visible. Use a more robust solution (Placeholder should
         // notify it children when they are being shown).
         setTimeout(function () {
-          return _this2.refs.input && _this2.refs.input.focus();
+          return _this2.inputRef.current && _this2.inputRef.current.focus();
         }, 1200);
       }
     }
@@ -88,7 +89,7 @@ var VcodeInput = exports.default = /*#__PURE__*/function (_React$Component) {
         icon: IconSvg
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
         id: "".concat(lockId, "-vcode"),
-        ref: "input",
+        ref: this.inputRef,
         type: "tel",
         name: "vcode",
         className: "auth0-lock-input auth0-lock-input-code",

package/lib/ui/list.js

@@ -136,24 +136,28 @@ var FiltrableList = exports.default = /*#__PURE__*/function (_React$Component) {
   }]);
 }(_react.default.Component);
 var List = /*#__PURE__*/function (_React$Component2) {
-  function List() {
+  function List(props) {
+    var _this3;
     _classCallCheck(this, List);
-    return _callSuper(this, List, arguments);
+    _this3 = _callSuper(this, List, [props]);
+    _this3.highlightedRef = /*#__PURE__*/_react.default.createRef();
+    _this3.listRef = /*#__PURE__*/_react.default.createRef();
+    return _this3;
   }
   _inherits(List, _React$Component2);
   return _createClass(List, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var _this3 = this;
+      var _this4 = this;
       // Ensure that highlighted item is entirely visible
 
       // NOTE: I've spent very little time on this. It works, but it
       // surely can be more clearly.
 
-      var highlighted = this.refs.highlighted;
+      var highlighted = this.highlightedRef.current;
       if (highlighted) {
-        var scrollableNode = _reactDom.default.findDOMNode(this);
-        var highlightedNode = _reactDom.default.findDOMNode(highlighted);
+        var scrollableNode = this.listRef.current;
+        var highlightedNode = highlighted;
         var relativeOffsetTop = highlightedNode.offsetTop - scrollableNode.scrollTop;
         var scrollTopDelta = 0;
         if (relativeOffsetTop + highlightedNode.offsetHeight > scrollableNode.clientHeight) {
@@ -166,7 +170,7 @@ var List = /*#__PURE__*/function (_React$Component2) {
           scrollableNode.scrollTop += scrollTopDelta;
           if (this.timeout) clearTimeout(this.timeout);
           this.timeout = setTimeout(function () {
-            return _this3.preventHighlight = false;
+            return _this4.preventHighlight = false;
           }, 100);
         }
       }
@@ -187,25 +191,26 @@ var List = /*#__PURE__*/function (_React$Component2) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this;
+      var _this5 = this;
       var items = this.props.items.map(function (x) {
-        var highlighted = x === _this4.props.highlighted;
+        var highlighted = x === _this5.props.highlighted;
         var props = {
           highlighted: highlighted,
           label: x.get('label'),
           onClick: function onClick() {
-            return _this4.props.onClick(x);
+            return _this5.props.onClick(x);
           },
           onMouseMove: function onMouseMove() {
-            return _this4.mouseMoveHandler(x);
+            return _this5.mouseMoveHandler(x);
           }
         };
-        if (highlighted) props.ref = 'highlighted';
+        if (highlighted) props.ref = _this5.highlightedRef;
         return /*#__PURE__*/_react.default.createElement(Item, _extends({
           key: x.get('label')
         }, props));
       });
       return /*#__PURE__*/_react.default.createElement("div", {
+        ref: this.listRef,
         className: "auth0-lock-list-code",
         onMouseLeave: this.mouseLeaveHandler.bind(this)
       }, /*#__PURE__*/_react.default.createElement("ul", null, items));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auth0-lock",
-  "version": "14.2.1",
+  "version": "14.2.2",
   "description": "Auth0 Lock",
   "author": "Auth0 <support@auth0.com> (http://auth0.com)",
   "license": "MIT",
@@ -73,7 +73,7 @@
     "chalk": "^4.1.2",
     "core-js": "^3.26.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^0.28.11",
+    "css-loader": "^7.1.2",
     "emojic": "^1.1.17",
     "enzyme": "^3.1.1",
     "es-check": "^6.0.0",
@@ -131,7 +131,7 @@
     "qs": "^6.10.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-transition-group": "^2.2.1",
+    "react-transition-group": "^4.4.5",
     "trim": "^1.0.1",
     "url-join": "^1.1.0",
     "validator": "^13.15.22"