@frontegg/react-hooks 6.104.0-alpha.0 → 6.104.0

package/common/CustomComponentHolder.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactElement } from 'react';
+import { FronteggAppInstance } from '@frontegg/types';
+/**
+ * CustomComponentRegister is used to support using react hooks inside custom components.
+ */
+export declare class CustomComponentHolder {
+    private static components;
+    static set(name: string, element: any): void;
+    static get(name: string): ReactElement;
+}
+export declare const CustomComponentRegister: FC<{
+    app: FronteggAppInstance;
+    themeOptions: any;
+}>;

package/common/CustomComponentHolder.js

@@ -0,0 +1,100 @@
+import React, { isValidElement, useCallback, useMemo, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { isElement } from 'react-is';
+
+/**
+ * CustomComponentRegister is used to support using react hooks inside custom components.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export class CustomComponentHolder {
+  static set(name, element) {
+    CustomComponentHolder.components[name] = element;
+  }
+  static get(name) {
+    return CustomComponentHolder.components[name];
+  }
+}
+CustomComponentHolder.components = {};
+const overrideValue = (object, key, value) => {
+  const keys = key.split('.');
+  let iterator = object;
+  while (keys.length > 1) {
+    iterator = iterator[keys.shift()];
+  }
+  iterator[keys.shift()] = value;
+};
+const Registerer = props => {
+  var _app$loginBoxContaine;
+  const {
+    app,
+    themeKey
+  } = props;
+  const value = CustomComponentHolder.get(themeKey);
+  const [mounted, setMounted] = useState(false);
+  const mount = useCallback(() => {
+    setMounted(true);
+  }, []);
+  const unmount = useCallback(() => {
+    setMounted(false);
+  }, []);
+  overrideValue(app.options.themeOptions, themeKey, {
+    type: 'slot',
+    themeKey,
+    mount,
+    unmount
+  });
+  let element = (_app$loginBoxContaine = app.loginBoxContainer) == null ? void 0 : _app$loginBoxContaine.querySelector(`[slot="${themeKey}"]`);
+  if (!element && typeof document !== undefined) {
+    var _app$loginBoxContaine2;
+    element = document.createElement('div');
+    element.slot = themeKey;
+    (_app$loginBoxContaine2 = app.loginBoxContainer) == null ? void 0 : _app$loginBoxContaine2.appendChild(element);
+  }
+  return element && mounted ? /*#__PURE__*/_jsx(React.Fragment, {
+    children: /*#__PURE__*/ReactDOM.createPortal(value, element)
+  }) : /*#__PURE__*/_jsx(_Fragment, {});
+};
+export const CustomComponentRegister = ({
+  app,
+  themeOptions
+}) => {
+  const keys = useMemo(() => {
+    if (!themeOptions || !themeOptions.loginBox) {
+      return [];
+    }
+    const loop = (key, obj, keyPath) => {
+      if (typeof obj !== 'object' && typeof obj !== 'function') {
+        return [];
+      }
+      if (typeof obj === 'function') {
+        try {
+          obj = /*#__PURE__*/React.createElement(obj);
+          if ( /*#__PURE__*/isValidElement(obj) || isElement(obj)) {
+            const generatedKey = `${keyPath}.${key}`;
+            CustomComponentHolder.set(generatedKey, obj);
+            return [generatedKey];
+          }
+        } catch (e) {}
+      }
+      if ( /*#__PURE__*/isValidElement(obj) || isElement(obj) || obj === null) {
+        const generatedKey = `${keyPath}.${key}`;
+        CustomComponentHolder.set(generatedKey, obj);
+        return [generatedKey];
+      } else {
+        const elements = [];
+        Object.keys(obj).forEach(k => {
+          elements.push(...loop(k, obj[k], keyPath === '' ? key : `${keyPath}.${key}`));
+        });
+        return elements;
+      }
+    };
+    return loop('loginBox', themeOptions.loginBox, '');
+  }, []);
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: keys.map(key => /*#__PURE__*/_jsx(Registerer, {
+      app: app,
+      themeKey: key
+    }, key))
+  });
+};

package/common/index.d.ts

@@ -16,4 +16,4 @@ export interface DomContext extends ShadowDomContextData {
 export declare const ShadowDomContext: import("react").Context<ShadowDomContextData>;
 export declare const useShadowDom: () => DomContext;
 export declare const useRootState: () => FronteggState['root'];
-export {};
+export * from './CustomComponentHolder';

package/common/index.js

@@ -30,4 +30,5 @@ export const useShadowDom = () => {
 };
 export const useRootState = () => {
   return useSelector(state => state.root, shallowEqual);
-};
+};
+export * from './CustomComponentHolder';

package/index.js

@@ -1,4 +1,4 @@
-/** @license Frontegg v6.104.0-alpha.0
+/** @license Frontegg v6.104.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/common/CustomComponentHolder.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomComponentRegister = exports.CustomComponentHolder = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _reactIs = require("react-is");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * CustomComponentRegister is used to support using react hooks inside custom components.
+ */
+class CustomComponentHolder {
+  static set(name, element) {
+    CustomComponentHolder.components[name] = element;
+  }
+  static get(name) {
+    return CustomComponentHolder.components[name];
+  }
+}
+exports.CustomComponentHolder = CustomComponentHolder;
+CustomComponentHolder.components = {};
+const overrideValue = (object, key, value) => {
+  const keys = key.split('.');
+  let iterator = object;
+  while (keys.length > 1) {
+    iterator = iterator[keys.shift()];
+  }
+  iterator[keys.shift()] = value;
+};
+const Registerer = props => {
+  var _app$loginBoxContaine;
+  const {
+    app,
+    themeKey
+  } = props;
+  const value = CustomComponentHolder.get(themeKey);
+  const [mounted, setMounted] = (0, _react.useState)(false);
+  const mount = (0, _react.useCallback)(() => {
+    setMounted(true);
+  }, []);
+  const unmount = (0, _react.useCallback)(() => {
+    setMounted(false);
+  }, []);
+  overrideValue(app.options.themeOptions, themeKey, {
+    type: 'slot',
+    themeKey,
+    mount,
+    unmount
+  });
+  let element = (_app$loginBoxContaine = app.loginBoxContainer) == null ? void 0 : _app$loginBoxContaine.querySelector(`[slot="${themeKey}"]`);
+  if (!element && typeof document !== undefined) {
+    var _app$loginBoxContaine2;
+    element = document.createElement('div');
+    element.slot = themeKey;
+    (_app$loginBoxContaine2 = app.loginBoxContainer) == null ? void 0 : _app$loginBoxContaine2.appendChild(element);
+  }
+  return element && mounted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+    children: /*#__PURE__*/_reactDom.default.createPortal(value, element)
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+};
+const CustomComponentRegister = ({
+  app,
+  themeOptions
+}) => {
+  const keys = (0, _react.useMemo)(() => {
+    if (!themeOptions || !themeOptions.loginBox) {
+      return [];
+    }
+    const loop = (key, obj, keyPath) => {
+      if (typeof obj !== 'object' && typeof obj !== 'function') {
+        return [];
+      }
+      if (typeof obj === 'function') {
+        try {
+          obj = /*#__PURE__*/_react.default.createElement(obj);
+          if ( /*#__PURE__*/(0, _react.isValidElement)(obj) || (0, _reactIs.isElement)(obj)) {
+            const generatedKey = `${keyPath}.${key}`;
+            CustomComponentHolder.set(generatedKey, obj);
+            return [generatedKey];
+          }
+        } catch (e) {}
+      }
+      if ( /*#__PURE__*/(0, _react.isValidElement)(obj) || (0, _reactIs.isElement)(obj) || obj === null) {
+        const generatedKey = `${keyPath}.${key}`;
+        CustomComponentHolder.set(generatedKey, obj);
+        return [generatedKey];
+      } else {
+        const elements = [];
+        Object.keys(obj).forEach(k => {
+          elements.push(...loop(k, obj[k], keyPath === '' ? key : `${keyPath}.${key}`));
+        });
+        return elements;
+      }
+    };
+    return loop('loginBox', themeOptions.loginBox, '');
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: keys.map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(Registerer, {
+      app: app,
+      themeKey: key
+    }, key))
+  });
+};
+exports.CustomComponentRegister = CustomComponentRegister;

package/node/common/index.js

@@ -4,12 +4,29 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  ShadowDomContext: true,
+  useShadowDom: true,
+  useRootState: true
+};
 exports.useShadowDom = exports.useRootState = exports.ShadowDomContext = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = require("react");
 var _FronteggStoreContext = require("../FronteggStoreContext");
 var _reactRedux = require("react-redux");
+var _CustomComponentHolder = require("./CustomComponentHolder");
+Object.keys(_CustomComponentHolder).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CustomComponentHolder[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CustomComponentHolder[key];
+    }
+  });
+});
 const _excluded = ["urlStrategy", "onRedirectTo", "renderByRoute", "customLoader", "customStyles", "contextOptions"];
 const ShadowDomContext = /*#__PURE__*/(0, _react.createContext)({});
 exports.ShadowDomContext = ShadowDomContext;

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license Frontegg v6.104.0-alpha.0
+/** @license Frontegg v6.104.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@frontegg/react-hooks",
-  "version": "6.104.0-alpha.0",
+  "version": "6.104.0",
   "main": "./node/index.js",
   "license": "MIT",
   "author": "Frontegg LTD",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@frontegg/redux-store": "6.104.0-alpha.0",
-    "@frontegg/types": "6.104.0-alpha.0",
+    "@frontegg/redux-store": "6.104.0",
+    "@frontegg/types": "6.104.0",
     "@types/react": "*",
     "get-value": "^3.0.1",
     "react-redux": "^7.x"