auth0-lock 14.2.0 → 14.2.2

package/lib/ui/box/container.js

@@ -11,6 +11,7 @@ var _button = require("./button");
 var l = _interopRequireWildcard(require("../../core/index"));
 var c = _interopRequireWildcard(require("../../field/index"));
 var _index3 = require("../../store/index");
+var _index4 = require("../../connection/database/index");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -103,13 +104,16 @@ var Container = exports.default = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       isOpen: false
     };
+    _this.chromeRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(Container, _React$Component);
   return _createClass(Container, [{
     key: "checkConnectionResolver",
     value: function checkConnectionResolver(done) {
-      var contentProps = this.props.contentProps;
+      var _this$props = this.props,
+        contentProps = _this$props.contentProps,
+        screenName = _this$props.screenName;
       var lock = contentProps.model;
       var connectionResolver = l.connectionResolver(lock);
       if (!connectionResolver) {
@@ -122,7 +126,13 @@ var Container = exports.default = /*#__PURE__*/function (_React$Component) {
         connections: connections,
         id: id
       };
-      var userInputValue = c.getFieldValue(lock, 'username') || c.getFieldValue(lock, 'email');
+
+      // On signUp screen, use emailFirst option to prioritize email over username
+      // On login screen, use default behavior (username first)
+      var isSignUpScreen = screenName === 'main.signUp';
+      var userInputValue = (0, _index4.databaseUsernameValue)(lock, isSignUpScreen ? {
+        emailFirst: true
+      } : {});
       connectionResolver(userInputValue, context, function (resolvedConnection) {
         (0, _index3.swap)(_index3.updateEntity, 'lock', l.id(lock), function (m) {
           return l.setResolvedConnection(m, resolvedConnection);
@@ -167,7 +177,7 @@ var Container = exports.default = /*#__PURE__*/function (_React$Component) {
         if (submitHandler) {
           setTimeout(function () {
             if (!_this3.props.isSubmitting) {
-              _this3.refs.chrome.focusError();
+              _this3.chromeRef.current.focusError();
             }
           }, 17);
           submitHandler();
@@ -177,9 +187,9 @@ var Container = exports.default = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleClose",
     value: function handleClose() {
-      var _this$props = this.props,
-        closeHandler = _this$props.closeHandler,
-        isSubmitting = _this$props.isSubmitting;
+      var _this$props2 = this.props,
+        closeHandler = _this$props2.closeHandler,
+        isSubmitting = _this$props2.isSubmitting;
       if (!isSubmitting) {
         closeHandler();
       }
@@ -187,9 +197,9 @@ var Container = exports.default = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleEsc",
     value: function handleEsc() {
-      var _this$props2 = this.props,
-        closeHandler = _this$props2.closeHandler,
-        escHandler = _this$props2.escHandler;
+      var _this$props3 = this.props,
+        closeHandler = _this$props3.closeHandler,
+        escHandler = _this$props3.escHandler;
       escHandler ? escHandler() : this.handleClose();
     }
   }, {
@@ -202,35 +212,35 @@ var Container = exports.default = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        autofocus = _this$props3.autofocus,
-        avatar = _this$props3.avatar,
-        auxiliaryPane = _this$props3.auxiliaryPane,
-        backHandler = _this$props3.backHandler,
-        badgeLink = _this$props3.badgeLink,
-        closeHandler = _this$props3.closeHandler,
-        contentComponent = _this$props3.contentComponent,
-        contentProps = _this$props3.contentProps,
-        disableSubmitButton = _this$props3.disableSubmitButton,
-        disallowClose = _this$props3.disallowClose,
-        error = _this$props3.error,
-        info = _this$props3.info,
-        isMobile = _this$props3.isMobile,
-        isModal = _this$props3.isModal,
-        isSubmitting = _this$props3.isSubmitting,
-        logo = _this$props3.logo,
-        primaryColor = _this$props3.primaryColor,
-        screenName = _this$props3.screenName,
-        showBadge = _this$props3.showBadge,
-        submitButtonLabel = _this$props3.submitButtonLabel,
-        submitHandler = _this$props3.submitHandler,
-        success = _this$props3.success,
-        tabs = _this$props3.tabs,
-        terms = _this$props3.terms,
-        title = _this$props3.title,
-        classNames = _this$props3.classNames,
-        scrollGlobalMessagesIntoView = _this$props3.scrollGlobalMessagesIntoView,
-        suppressSubmitOverlay = _this$props3.suppressSubmitOverlay;
+      var _this$props4 = this.props,
+        autofocus = _this$props4.autofocus,
+        avatar = _this$props4.avatar,
+        auxiliaryPane = _this$props4.auxiliaryPane,
+        backHandler = _this$props4.backHandler,
+        badgeLink = _this$props4.badgeLink,
+        closeHandler = _this$props4.closeHandler,
+        contentComponent = _this$props4.contentComponent,
+        contentProps = _this$props4.contentProps,
+        disableSubmitButton = _this$props4.disableSubmitButton,
+        disallowClose = _this$props4.disallowClose,
+        error = _this$props4.error,
+        info = _this$props4.info,
+        isMobile = _this$props4.isMobile,
+        isModal = _this$props4.isModal,
+        isSubmitting = _this$props4.isSubmitting,
+        logo = _this$props4.logo,
+        primaryColor = _this$props4.primaryColor,
+        screenName = _this$props4.screenName,
+        showBadge = _this$props4.showBadge,
+        submitButtonLabel = _this$props4.submitButtonLabel,
+        submitHandler = _this$props4.submitHandler,
+        success = _this$props4.success,
+        tabs = _this$props4.tabs,
+        terms = _this$props4.terms,
+        title = _this$props4.title,
+        classNames = _this$props4.classNames,
+        scrollGlobalMessagesIntoView = _this$props4.scrollGlobalMessagesIntoView,
+        suppressSubmitOverlay = _this$props4.suppressSubmitOverlay;
       var badge = showBadge ? /*#__PURE__*/_react.default.createElement(BottomBadge, {
         link: badgeLink
       }) : null;
@@ -298,7 +308,7 @@ var Container = exports.default = /*#__PURE__*/function (_React$Component) {
         logo: logo,
         screenName: screenName,
         primaryColor: primaryColor,
-        ref: "chrome",
+        ref: this.chromeRef,
         showSubmitButton: !!submitHandler,
         submitButtonLabel: submitButtonLabel,
         success: success,

package/lib/ui/box/header.js

@@ -24,15 +24,18 @@ function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? O
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 var Header = exports.default = /*#__PURE__*/function (_React$Component) {
-  function Header() {
+  function Header(props) {
+    var _this;
     _classCallCheck(this, Header);
-    return _callSuper(this, Header, arguments);
+    _this = _callSuper(this, Header, [props]);
+    _this.headerRef = /*#__PURE__*/_react.default.createRef();
+    return _this;
   }
   _inherits(Header, _React$Component);
   return _createClass(Header, [{
     key: "getDOMNode",
     value: function getDOMNode() {
-      return _reactDom.default.findDOMNode(this);
+      return this.headerRef.current;
     }
   }, {
     key: "render",
@@ -45,6 +48,7 @@ var Header = exports.default = /*#__PURE__*/function (_React$Component) {
         name = _this$props.name,
         title = _this$props.title;
       return /*#__PURE__*/_react.default.createElement("div", {
+        ref: this.headerRef,
         className: "auth0-lock-header"
       }, backHandler && /*#__PURE__*/_react.default.createElement(_button.BackButton, {
         onClick: backHandler
@@ -67,19 +71,19 @@ Header.propTypes = {
 };
 var Welcome = /*#__PURE__*/function (_React$Component2) {
   function Welcome() {
-    var _this;
+    var _this2;
     _classCallCheck(this, Welcome);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, Welcome, [].concat(args));
+    _this2 = _callSuper(this, Welcome, [].concat(args));
     // Cause a reflow when the image is loaded to fix an issue with the Lock content sometimes
     // not rendering in a popup on first load.
     // https://github.com/auth0/lock/issues/1942
-    _defineProperty(_this, "onImageLoad", function () {
+    _defineProperty(_this2, "onImageLoad", function () {
       return document.querySelector('.auth0-lock').style.fontSize = '1rem';
     });
-    return _this;
+    return _this2;
   }
   _inherits(Welcome, _React$Component2);
   return _createClass(Welcome, [{

package/lib/ui/box/multisize_slide.js

@@ -33,6 +33,7 @@ var Slider = exports.default = /*#__PURE__*/function (_React$Component) {
         current: props.children
       }
     };
+    _this.childRefs = {};
     return _this;
   }
 
@@ -73,11 +74,12 @@ var Slider = exports.default = /*#__PURE__*/function (_React$Component) {
           current = _this$state$children.current,
           prev = _this$state$children.prev;
         var reverse = this.props.reverse;
-        var currentComponent = this.refs[current.key];
-        var prevComponent = this.refs[prev.key];
+        var currentComponent = this.childRefs[current.key] && this.childRefs[current.key].current;
+        var prevComponent = this.childRefs[prev.key] && this.childRefs[prev.key].current;
         var transition = function transition(component, className, delay) {
-          // eslint-disable-next-line
-          var node = _reactDom.default.findDOMNode(component);
+          // Get the DOM node directly from the component's node property
+          var node = component === null || component === void 0 ? void 0 : component.node;
+          if (!node) return;
           var activeClassName = "".concat(className, "-active");
           _CSSCore.default.addClass(node, className);
           setTimeout(function () {
@@ -120,13 +122,18 @@ var Slider = exports.default = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this3 = this;
       var _this$state$children2 = this.state.children,
         current = _this$state$children2.current,
         prev = _this$state$children2.prev;
       var children = prev ? [current, prev] : [current];
       var childrenToRender = children.map(function (child) {
+        // Create a ref for this child if it doesn't exist
+        if (!_this3.childRefs[child.key]) {
+          _this3.childRefs[child.key] = /*#__PURE__*/_react.default.createRef();
+        }
         return /*#__PURE__*/_react.default.cloneElement(/*#__PURE__*/_react.default.createElement(Child, {}, child), {
-          ref: child.key,
+          ref: _this3.childRefs[child.key],
           key: child.key
         });
       });
@@ -153,21 +160,22 @@ Slider.defaultProps = {
 };
 var Child = /*#__PURE__*/function (_React$Component2) {
   function Child(props) {
-    var _this3;
+    var _this4;
     _classCallCheck(this, Child);
-    _this3 = _callSuper(this, Child, [props]);
-    _defineProperty(_this3, "node", void 0);
-    _this3.state = {
+    _this4 = _callSuper(this, Child, [props]);
+    _defineProperty(_this4, "node", void 0);
+    _this4.state = {
       height: '',
       originalHeight: '',
       show: true
     };
-    return _this3;
+    return _this4;
   }
   _inherits(Child, _React$Component2);
   return _createClass(Child, [{
     key: "componentWillSlideIn",
     value: function componentWillSlideIn(slide) {
+      if (!this.node) return;
       this.setState({
         height: slide.height,
         originalHeight: parseInt(window.getComputedStyle(this.node, null).height, 10),
@@ -177,7 +185,7 @@ var Child = /*#__PURE__*/function (_React$Component2) {
   }, {
     key: "componentDidSlideIn",
     value: function componentDidSlideIn(cb) {
-      var _this4 = this;
+      var _this5 = this;
       var _this$state = this.state,
         height = _this$state.height,
         originalHeight = _this$state.originalHeight;
@@ -200,20 +208,20 @@ var Child = /*#__PURE__*/function (_React$Component2) {
         // TODO: rAF
         this.t = setInterval(function () {
           if (count < frames - 1) {
-            _this4.setState({
+            _this5.setState({
               height: current,
               animating: true
             });
             current += dh;
             count++;
           } else {
-            clearInterval(_this4.t);
-            delete _this4.t;
-            _this4.setState({
+            clearInterval(_this5.t);
+            delete _this5.t;
+            _this5.setState({
               height: '',
               show: true
             });
-            _this4.cb();
+            _this5.cb();
           }
         }, 17);
       }
@@ -221,6 +229,7 @@ var Child = /*#__PURE__*/function (_React$Component2) {
   }, {
     key: "componentWillSlideOut",
     value: function componentWillSlideOut(cb) {
+      if (!this.node) return;
       var size = window.getComputedStyle(this.node, null).height;
       cb({
         height: parseInt(size, 10),
@@ -238,14 +247,14 @@ var Child = /*#__PURE__*/function (_React$Component2) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
+      var _this6 = this;
       var children = this.props.children;
       var _this$state2 = this.state,
         height = _this$state2.height,
         show = _this$state2.show;
       return /*#__PURE__*/_react.default.createElement("div", {
         ref: function ref(node) {
-          return _this5.node = node;
+          return _this6.node = node;
         },
         style: height ? {
           height: height + 'px'

package/lib/ui/input/captcha_input.js

@@ -96,6 +96,7 @@ var CaptchaInput = exports.default = /*#__PURE__*/function (_React$Component) {
       });
     });
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(CaptchaInput, _React$Component);
@@ -142,7 +143,7 @@ var CaptchaInput = exports.default = /*#__PURE__*/function (_React$Component) {
         icon: InputIconSvg
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
         id: "".concat(lockId, "-captcha"),
-        ref: "input",
+        ref: this.inputRef,
         type: "text",
         inputMode: "text",
         name: "captcha",

package/lib/ui/input/email_input.js

@@ -57,6 +57,7 @@ var EmailInput = exports.default = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, EmailInput);
     _this = _callSuper(this, EmailInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(EmailInput, _React$Component);
@@ -90,7 +91,7 @@ var EmailInput = exports.default = /*#__PURE__*/function (_React$Component) {
         icon: SVG
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
         id: "".concat(lockId, "-email"),
-        ref: "input",
+        ref: this.inputRef,
         type: "email",
         inputMode: "email",
         name: "email",

package/lib/ui/input/mfa_code_input.js

@@ -33,13 +33,14 @@ var MFACodeInput = exports.default = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, MFACodeInput);
     _this = _callSuper(this, MFACodeInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(MFACodeInput, _React$Component);
   return _createClass(MFACodeInput, [{
     key: "focus",
     value: function focus() {
-      this.refs.input && this.refs.input.focus();
+      this.inputRef.current && this.inputRef.current.focus();
     }
   }, {
     key: "hasFocus",
@@ -65,7 +66,7 @@ var MFACodeInput = exports.default = /*#__PURE__*/function (_React$Component) {
         icon: _password_input.IconSvg
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
         id: "".concat(lockId, "-mfa_code"),
-        ref: "input",
+        ref: this.inputRef,
         type: "text",
         name: "mfa_code",
         className: "auth0-lock-input",

package/lib/ui/input/password_input.js

@@ -56,13 +56,14 @@ var PasswordInput = exports.default = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, PasswordInput);
     _this = _callSuper(this, PasswordInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(PasswordInput, _React$Component);
   return _createClass(PasswordInput, [{
     key: "focus",
     value: function focus() {
-      this.refs.input && this.refs.input.focus();
+      this.inputRef.current && this.inputRef.current.focus();
     }
   }, {
     key: "hasFocus",
@@ -100,7 +101,7 @@ var PasswordInput = exports.default = /*#__PURE__*/function (_React$Component) {
         name: "password",
         icon: IconSvg
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
-        ref: "input",
+        ref: this.inputRef,
         type: showPassword ? 'text' : 'password',
         id: "".concat(l.id(lock), "-password"),
         name: "password",

package/lib/ui/input/phone_number_input.js

@@ -57,6 +57,7 @@ var PhoneNumberInput = exports.default = /*#__PURE__*/function (_React$Component
     _classCallCheck(this, PhoneNumberInput);
     _this = _callSuper(this, PhoneNumberInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(PhoneNumberInput, _React$Component);
@@ -75,7 +76,7 @@ var PhoneNumberInput = exports.default = /*#__PURE__*/function (_React$Component
         name: "phone-number",
         icon: IconSvg
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
-        ref: "input",
+        ref: this.inputRef,
         type: "tel",
         name: "phoneNumber",
         className: "auth0-lock-input auth0-lock-input-number",
@@ -92,8 +93,8 @@ var PhoneNumberInput = exports.default = /*#__PURE__*/function (_React$Component
   }, {
     key: "focus",
     value: function focus() {
-      if (!this.refs.input) return;
-      this.refs.input.focus();
+      if (!this.inputRef.current) return;
+      this.inputRef.current.focus();
       this.handleFocus();
     }
   }, {

package/lib/ui/input/text_input.js

@@ -30,6 +30,7 @@ var TextInput = exports.default = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, TextInput);
     _this = _callSuper(this, TextInput, [props]);
     _this.state = {};
+    _this.inputRef = /*#__PURE__*/_react.default.createRef();
     return _this;
   }
   _inherits(TextInput, _React$Component);
@@ -68,7 +69,7 @@ var TextInput = exports.default = /*#__PURE__*/function (_React$Component) {
         icon: icon
       }, /*#__PURE__*/_react.default.createElement("input", _extends({
         id: "".concat(lockId, "-").concat(name),
-        ref: "input",
+        ref: this.inputRef,
         type: "text",
         name: name,
         className: "auth0-lock-input",

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.0",
+  "version": "14.2.2",
   "description": "Auth0 Lock",
   "author": "Auth0 <support@auth0.com> (http://auth0.com)",
   "license": "MIT",
@@ -40,7 +40,7 @@
     "i18n:validate": "node -r esm scripts/lang-audit.js"
   },
   "devDependencies": {
-    "@auth0/component-cdn-uploader": "^2.2.2",
+    "@auth0/component-cdn-uploader": "^2.4.2",
     "@babel/core": "^7.0.0",
     "@babel/eslint-parser": "^7.22.9",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
@@ -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",
@@ -94,8 +94,7 @@
     "grunt-webpack": "^5.0.0",
     "husky": "^7.0.2",
     "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "jest-environment-jsdom-global": "^4.0.0",
+    "jest-environment-jsdom": "^30.2.0",
     "karma": "^6.4.1",
     "karma-babel-preprocessor": "^8.0.2",
     "karma-browserify": "^8.1.0",
@@ -119,7 +118,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
-    "auth0-js": "^9.27.0",
+    "auth0-js": "^9.29.0",
     "auth0-password-policies": "^1.0.2",
     "blueimp-md5": "^2.19.0",
     "classnames": "^2.3.2",
@@ -132,10 +131,10 @@
     "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.6.0"
+    "validator": "^13.15.22"
   },
   "ccu": {
     "name": "lock",
@@ -178,7 +177,7 @@
       "lcov",
       "text-summary"
     ],
-    "testEnvironment": "jest-environment-jsdom-global"
+    "testEnvironment": "<rootDir>/customJsdomEnvironment.js"
   },
   "lint-staged": {
     "*.{js,jsx}": [