auth0-lock 11.34.2 → 12.0.0-beta.0

package/lib/ui/box.js

@@ -1,117 +1,112 @@
-'use strict';
-
-exports.__esModule = true;
-exports.remove = exports.render = undefined;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _reactDom = require('react-dom');
-
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
-var _CSSCore = require('../CSSCore');
-
-var _CSSCore2 = _interopRequireDefault(_CSSCore);
-
-var _container = require('./box/container');
-
-var _container2 = _interopRequireDefault(_container);
-
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.render = exports.remove = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _CSSCore = _interopRequireDefault(require("../CSSCore"));
+var _container = _interopRequireDefault(require("./box/container"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var ContainerManager = function () {
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var ContainerManager = /*#__PURE__*/function () {
   function ContainerManager() {
     _classCallCheck(this, ContainerManager);
   }
-
-  ContainerManager.prototype.ensure = function ensure(id, shouldAppend) {
-    var container = window.document.getElementById(id);
-
-    if (!container && shouldAppend) {
-      container = window.document.createElement('main');
-      container.id = id;
-      container.className = 'auth0-lock-container';
-      window.document.body.appendChild(container);
-    }
-
-    if (!container) {
-      throw new Error('Can\'t find element with id ' + id);
+  _createClass(ContainerManager, [{
+    key: "ensure",
+    value: function ensure(id, shouldAppend) {
+      var container = window.document.getElementById(id);
+      if (!container && shouldAppend) {
+        container = window.document.createElement('main');
+        container.id = id;
+        container.className = 'auth0-lock-container';
+        window.document.body.appendChild(container);
+      }
+      if (!container) {
+        throw new Error("Can't find element with id ".concat(id));
+      }
+      return container;
     }
-
-    return container;
-  };
-
+  }]);
   return ContainerManager;
 }();
-
-var Renderer = function () {
+var Renderer = /*#__PURE__*/function () {
   function Renderer() {
     _classCallCheck(this, Renderer);
-
     this.containerManager = new ContainerManager();
     this.modals = {};
   }
-
-  Renderer.prototype.render = function render(containerId, props) {
-    var isModal = props.isModal;
-
-    var container = this.containerManager.ensure(containerId, isModal);
-
-    if (isModal && !this.modals[containerId]) {
-      _CSSCore2.default.addClass(window.document.getElementsByTagName('html')[0], 'auth0-lock-html');
-    }
-    // eslint-disable-next-line
-    var component = _reactDom2.default.render(_react2.default.createElement(_container2.default, props), container);
-
-    if (isModal) {
-      this.modals[containerId] = component;
-    }
-
-    return component;
-  };
-
-  Renderer.prototype.remove = function remove(containerId) {
-    var _this = this;
-
-    if (this.modals[containerId]) {
-      this.modals[containerId].hide();
-      setTimeout(function () {
-        return _this.unmount(containerId);
-      }, 1000);
-    } else {
-      this.unmount(containerId);
+  _createClass(Renderer, [{
+    key: "render",
+    value: function render(containerId, props) {
+      var _this = this;
+      var isModal = props.isModal;
+      var container = this.containerManager.ensure(containerId, isModal);
+      if (isModal && !this.modals[containerId]) {
+        _CSSCore.default.addClass(window.document.getElementsByTagName('html')[0], 'auth0-lock-html');
+      }
+      // eslint-disable-next-line
+      var root = this.modals[containerId] ? this.modals[containerId].root : (0, _client.createRoot)(container);
+      if (!this.modals[containerId]) {
+        this.modals[containerId] = {
+          root: root
+        };
+      }
+      root.render( /*#__PURE__*/_react.default.createElement(_container.default, _extends({}, props, {
+        ref: function ref(component) {
+          if (component && isModal) {
+            _this.modals[containerId].component = component;
+          }
+        }
+      })));
     }
-  };
-
-  Renderer.prototype.unmount = function unmount(containerId) {
-    try {
-      var container = this.containerManager.ensure(containerId);
-      if (container) {
-        _reactDom2.default.unmountComponentAtNode(container);
+  }, {
+    key: "remove",
+    value: function remove(containerId) {
+      var _this2 = this;
+      if (this.modals[containerId]) {
+        this.modals[containerId].component.hide();
+        setTimeout(function () {
+          return _this2.unmount(containerId);
+        }, 1000);
+      } else {
+        this.unmount(containerId);
       }
-    } catch (e) {
-      // do nothing if container doesn't exist
     }
-
-    if (this.modals[containerId]) {
-      delete this.modals[containerId];
-
-      _CSSCore2.default.removeClass(window.document.getElementsByTagName('html')[0], 'auth0-lock-html');
+  }, {
+    key: "unmount",
+    value: function unmount(containerId) {
+      try {
+        var container = this.containerManager.ensure(containerId);
+        if (container) {
+          ReactDOM.unmountComponentAtNode(container);
+        }
+      } catch (e) {
+        // do nothing if container doesn't exist
+      }
+      if (this.modals[containerId]) {
+        this.modals[containerId].root.unmount();
+        delete this.modals[containerId];
+        _CSSCore.default.removeClass(window.document.getElementsByTagName('html')[0], 'auth0-lock-html');
+      }
     }
-  };
-
+  }]);
   return Renderer;
 }();
-
 var renderer = new Renderer();
-
-var render = exports.render = function render() {
+var render = function render() {
   return renderer.render.apply(renderer, arguments);
 };
-var remove = exports.remove = function remove() {
+exports.render = render;
+var remove = function remove() {
   return renderer.remove.apply(renderer, arguments);
 };
+exports.remove = remove;

package/lib/ui/button/auth_button.js

@@ -1,60 +1,53 @@
-'use strict';
-
-exports.__esModule = true;
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var AuthButton = function AuthButton(props) {
   var label = props.label,
-      onClick = props.onClick,
-      strategy = props.strategy,
-      icon = props.icon,
-      primaryColor = props.primaryColor,
-      foregroundColor = props.foregroundColor;
-
-
-  var backgroundStyle = primaryColor ? { backgroundColor: primaryColor } : {};
-  var foregroundStyle = foregroundColor ? { color: foregroundColor } : {};
-  var iconStyle = icon ? { backgroundImage: 'url(\'' + icon + '\')' } : {};
-
-  return _react2.default.createElement(
-    'a',
-    {
-      className: 'auth0-lock-social-button auth0-lock-social-big-button',
-      'data-provider': strategy,
-      onClick: onClick,
-      style: backgroundStyle,
-      type: 'button'
-    },
-    _react2.default.createElement('div', { className: 'auth0-lock-social-button-icon', style: iconStyle }),
-    _react2.default.createElement(
-      'div',
-      { className: 'auth0-lock-social-button-text', style: foregroundStyle },
-      label
-    )
-  );
+    onClick = props.onClick,
+    strategy = props.strategy,
+    icon = props.icon,
+    primaryColor = props.primaryColor,
+    foregroundColor = props.foregroundColor;
+  var backgroundStyle = primaryColor ? {
+    backgroundColor: primaryColor
+  } : {};
+  var foregroundStyle = foregroundColor ? {
+    color: foregroundColor
+  } : {};
+  var iconStyle = icon ? {
+    backgroundImage: "url('".concat(icon, "')")
+  } : {};
+  return /*#__PURE__*/_react.default.createElement("a", {
+    className: "auth0-lock-social-button auth0-lock-social-big-button",
+    "data-provider": strategy,
+    onClick: onClick,
+    style: backgroundStyle,
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "auth0-lock-social-button-icon",
+    style: iconStyle
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "auth0-lock-social-button-text",
+    style: foregroundStyle
+  }, label));
 };
-
 AuthButton.propTypes = {
-  disabled: _propTypes2.default.bool.isRequired,
-  label: _propTypes2.default.string.isRequired,
-  onClick: _propTypes2.default.func.isRequired,
-  strategy: _propTypes2.default.string.isRequired,
-  icon: _propTypes2.default.string,
-  primaryColor: _propTypes2.default.string,
-  foregroundColor: _propTypes2.default.string
+  disabled: _propTypes.default.bool.isRequired,
+  label: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func.isRequired,
+  strategy: _propTypes.default.string.isRequired,
+  icon: _propTypes.default.string,
+  primaryColor: _propTypes.default.string,
+  foregroundColor: _propTypes.default.string
 };
-
 AuthButton.defaultProps = {
   disabled: false
 };
-
-exports.default = AuthButton;
+var _default = AuthButton;
+exports.default = _default;