@common-stack/client-react 0.1.15 → 0.1.19

package/lib/index.js

@@ -111,7 +111,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -253,7 +253,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(__webpack_require__(/*! ./connector */ "./src/connector/connector.tsx"), exports);
@@ -278,9 +278,10 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClientTypes = void 0;
 var client_core_1 = __webpack_require__(/*! @common-stack/client-core */ "@common-stack/client-core");
 Object.defineProperty(exports, "ClientTypes", { enumerable: true, get: function () { return client_core_1.ClientTypes; } });
 __exportStar(__webpack_require__(/*! ./connector */ "./src/connector/index.ts"), exports);
@@ -290,6 +291,8 @@ __exportStar(__webpack_require__(/*! ./utils */ "./src/utils/index.ts"), exports
 __exportStar(__webpack_require__(/*! ./interfaces */ "./src/interfaces/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./plugin-area */ "./src/plugin-area/index.ts"), exports);
 __exportStar(__webpack_require__(/*! ./route-based-plugin-area */ "./src/route-based-plugin-area/index.ts"), exports);
+__exportStar(__webpack_require__(/*! ./slot-fill */ "./src/slot-fill/index.ts"), exports);
+__exportStar(__webpack_require__(/*! ./inversify */ "./src/inversify/index.ts"), exports);
 
 
 /***/ }),
@@ -325,7 +328,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(__webpack_require__(/*! ./router */ "./src/interfaces/router.ts"), exports);
@@ -385,6 +388,120 @@ Object.defineProperty(exports, "__esModule", { value: true });
 Object.defineProperty(exports, "__esModule", { value: true });
 
 
+/***/ }),
+
+/***/ "./src/inversify/InversifyContext.tsx":
+/*!********************************************!*\
+  !*** ./src/inversify/InversifyContext.tsx ***!
+  \********************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInjection = exports.InversifyProvider = exports.InversifyContext = void 0;
+const React = __importStar(__webpack_require__(/*! react */ "react"));
+exports.InversifyContext = React.createContext({ container: null, modules: null });
+const InversifyProvider = (props) => {
+    return (React.createElement(exports.InversifyContext.Provider, { value: { container: props.container, modules: props.modules } }, props.children));
+};
+exports.InversifyProvider = InversifyProvider;
+function useInjection(identifier) {
+    const { container } = React.useContext(exports.InversifyContext);
+    if (!container) {
+        throw new Error('Container is null');
+    }
+    return container.get(identifier);
+}
+exports.useInjection = useInjection;
+
+
+/***/ }),
+
+/***/ "./src/inversify/index.ts":
+/*!********************************!*\
+  !*** ./src/inversify/index.ts ***!
+  \********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(__webpack_require__(/*! ./InversifyContext */ "./src/inversify/InversifyContext.tsx"), exports);
+
+
+/***/ }),
+
+/***/ "./src/plugin-area/browser-plugin-area.tsx":
+/*!*************************************************!*\
+  !*** ./src/plugin-area/browser-plugin-area.tsx ***!
+  \*************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrowserPluginArea = void 0;
+const React = __importStar(__webpack_require__(/*! react */ "react"));
+const plugin_area_1 = __webpack_require__(/*! ./plugin-area */ "./src/plugin-area/plugin-area.tsx");
+const BrowserPluginArea = () => {
+    return React.createElement("div", { style: { display: "none" } },
+        React.createElement(plugin_area_1.PluginArea, null));
+};
+exports.BrowserPluginArea = BrowserPluginArea;
+
+
 /***/ }),
 
 /***/ "./src/plugin-area/higher-order-component-util.ts":
@@ -438,11 +555,12 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(__webpack_require__(/*! ./plugin-area */ "./src/plugin-area/plugin-area.tsx"), exports);
 __exportStar(__webpack_require__(/*! ./plugin-api */ "./src/plugin-area/plugin-api.ts"), exports);
+__exportStar(__webpack_require__(/*! ./browser-plugin-area */ "./src/plugin-area/browser-plugin-area.tsx"), exports);
 
 
 /***/ }),
@@ -561,7 +679,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -607,7 +725,7 @@ class PluginArea extends React.Component {
         this.setState(this.getCurrentPluginsState);
     }
     render() {
-        return (React.createElement("div", { style: { display: 'none' } }, lodash_1.map(this.state.plugins, ({ context, Plugin }) => (React.createElement(plugin_context_1.PluginContextProvider, { key: context.name, value: context },
+        return (React.createElement(React.Fragment, null, lodash_1.map(this.state.plugins, ({ context, Plugin }) => (React.createElement(plugin_context_1.PluginContextProvider, { key: context.name, value: context },
             React.createElement(Plugin, null))))));
     }
 }
@@ -640,7 +758,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -663,9 +781,10 @@ exports.PluginContextProvider = Provider;
  *
  * @return Enhanced component with injected context as props.
  */
-exports.withPluginContext = (mapContextToProps) => higher_order_component_util_1.createHigherOrderComponent((OriginalComponent) => {
+const withPluginContext = (mapContextToProps) => higher_order_component_util_1.createHigherOrderComponent((OriginalComponent) => {
     return (props) => (React.createElement(Consumer, null, (context) => (React.createElement(OriginalComponent, Object.assign({}, props, mapContextToProps(context, props))))));
 }, 'withPluginContext');
+exports.withPluginContext = withPluginContext;
 
 
 /***/ }),
@@ -721,7 +840,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(__webpack_require__(/*! ./route-based-plugin-area */ "./src/route-based-plugin-area/route-based-plugin-area.tsx"), exports);
@@ -844,7 +963,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -867,9 +986,10 @@ exports.PluginContextProvider = Provider;
  *
  * @return Enhanced component with injected context as props.
  */
-exports.withPluginContext = (mapContextToProps) => higher_order_component_util_1.createHigherOrderComponent((OriginalComponent) => {
+const withPluginContext = (mapContextToProps) => higher_order_component_util_1.createHigherOrderComponent((OriginalComponent) => {
     return (props) => (React.createElement(Consumer, null, (context) => (React.createElement(OriginalComponent, Object.assign({}, props, mapContextToProps(context, props))))));
 }, 'withPluginContext');
+exports.withPluginContext = withPluginContext;
 
 
 /***/ }),
@@ -898,7 +1018,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -970,7 +1090,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(__webpack_require__(/*! ./render-routes */ "./src/route/render-routes.tsx"), exports);
@@ -1002,7 +1122,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -1161,7 +1281,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(__webpack_require__(/*! ./router */ "./src/router/router.tsx"), exports);
@@ -1193,7 +1313,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -1208,6 +1328,419 @@ exports.FeatureWithRouterFactory = new connector_1.Feature({
 });
 
 
+/***/ }),
+
+/***/ "./src/slot-fill/context.tsx":
+/*!***********************************!*\
+  !*** ./src/slot-fill/context.tsx ***!
+  \***********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Consumer = exports.useSlot = void 0;
+const React = __importStar(__webpack_require__(/*! react */ "react"));
+const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
+const SlotFillContext = React.createContext({
+    registerSlot: () => { },
+    unregisterSlot: () => { },
+    registerFill: () => { },
+    unregisterFill: () => { },
+    getSlot: () => ({}),
+    getFills: () => ([]),
+    subscribe: () => { },
+});
+const { Provider, Consumer } = SlotFillContext;
+exports.Consumer = Consumer;
+class SlotFillProvider extends React.Component {
+    constructor(props) {
+        super(props);
+        this.registerSlot = this.registerSlot.bind(this);
+        this.registerFill = this.registerFill.bind(this);
+        this.unregisterSlot = this.unregisterSlot.bind(this);
+        this.unregisterFill = this.unregisterFill.bind(this);
+        this.getSlot = this.getSlot.bind(this);
+        this.getFills = this.getFills.bind(this);
+        this.subscribe = this.subscribe.bind(this);
+        this.slots = {};
+        this.fills = {};
+        this.listeners = [];
+        this.contextValue = {
+            registerSlot: this.registerSlot,
+            unregisterSlot: this.unregisterSlot,
+            registerFill: this.registerFill,
+            unregisterFill: this.unregisterFill,
+            getSlot: this.getSlot,
+            getFills: this.getFills,
+            subscribe: this.subscribe,
+        };
+    }
+    registerSlot(name, slot) {
+        const previousSlot = this.slots[name];
+        this.slots[name] = slot;
+        this.triggerListeners();
+        // Sometimes the fills are registered after the initial render of slot
+        // But before the registerSlot call, we need to rerender the slot
+        this.forceUpdateSlot(name);
+        // If a new instance of a slot is being mounted while another with the
+        // same name exists, force its update _after_ the new slot has been
+        // assigned into the instance, suich that its own rendering of children
+        // will be empty (the new Slot will subsume all fills for this name).
+        if (previousSlot) {
+            previousSlot.forceUpdate();
+        }
+    }
+    registerFill(name, instance) {
+        this.fills[name] = [...(this.fills[name] || []), instance];
+        this.forceUpdateSlot(name);
+    }
+    unregisterSlot(name, instance) {
+        // If a previous instance of a Slot by this name unmounts, do nothing,
+        // as the slot and its fills should only be removed for the current
+        // known instance.
+        if (this.slots[name] !== instance) {
+            return;
+        }
+        delete this.slots[name];
+        this.triggerListeners();
+    }
+    unregisterFill(name, instance) {
+        this.fills[name] = lodash_1.without(this.fills[name], instance);
+        this.resetFillOccurrence(name);
+        this.forceUpdateSlot(name);
+    }
+    getSlot(name) {
+        return this.slots[name];
+    }
+    getFills(name, slotInstance) {
+        // Commented following as we need the Slot to render at multiple places
+        // Fills should only be returned for the current instance of the slot
+        // in which they occupy.
+        // if (this.slots[name] !== slotInstance) {
+        //   return [];
+        // }
+        return lodash_1.sortBy(this.fills[name], 'occurrence');
+    }
+    resetFillOccurrence(name) {
+        lodash_1.forEach(this.fills[name], instance => {
+            instance.occurrence = undefined;
+        });
+    }
+    forceUpdateSlot(name) {
+        const slot = this.getSlot(name);
+        if (slot) {
+            slot.forceUpdate();
+        }
+    }
+    triggerListeners() {
+        this.listeners.forEach((listener) => listener());
+    }
+    subscribe(listener) {
+        this.listeners.push(listener);
+        return () => {
+            this.listeners = lodash_1.without(this.listeners, listener);
+        };
+    }
+    render() {
+        return React.createElement(Provider, { value: this.contextValue }, this.props.children);
+    }
+}
+/**
+ * React hook returning the active slot given a name.
+ *
+ * @param {string} name Slot name.
+ * @return {Object} Slot object.
+ */
+const useSlot = (name) => {
+    const { getSlot, subscribe } = React.useContext(SlotFillContext);
+    const [slot, setSlot] = React.useState(getSlot(name));
+    React.useEffect(() => {
+        setSlot(getSlot(name));
+        const unsubscribe = subscribe(() => {
+            setSlot(getSlot(name));
+        });
+        return unsubscribe;
+    }, [name]);
+    return slot;
+};
+exports.useSlot = useSlot;
+exports.default = SlotFillProvider;
+
+
+/***/ }),
+
+/***/ "./src/slot-fill/fill.tsx":
+/*!********************************!*\
+  !*** ./src/slot-fill/fill.tsx ***!
+  \********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fill = void 0;
+const React = __importStar(__webpack_require__(/*! react */ "react"));
+const react_dom_1 = __webpack_require__(/*! react-dom */ "react-dom");
+const context_1 = __webpack_require__(/*! ./context */ "./src/slot-fill/context.tsx");
+const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
+let occurrences = 0;
+const FillComponent = ({ name, children, registerFill, unregisterFill, }) => {
+    const slot = context_1.useSlot(name);
+    const ref = React.useRef({
+        name,
+        children,
+        occurrence: 0,
+    });
+    if (!ref.current.occurrence) {
+        ref.current.occurrence = ++occurrences;
+    }
+    React.useLayoutEffect(() => {
+        registerFill(name, ref.current);
+        return () => unregisterFill(name, ref.current);
+    }, []);
+    React.useLayoutEffect(() => {
+        ref.current.children = children;
+        if (slot && !slot.props.bubblesVirtually) {
+            slot.forceUpdate();
+        }
+    }, [children]);
+    React.useLayoutEffect(() => {
+        if (name === ref.current.name) {
+            // ignore initial effect
+            return;
+        }
+        unregisterFill(ref.current.name, ref.current);
+        ref.current.name = name;
+        registerFill(name, ref.current);
+    }, [name]);
+    if (!slot || !slot.node || !slot.props.bubblesVirtually) {
+        return null;
+    }
+    // If a function is passed as a child, provide it with the fillProps.
+    if (lodash_1.isFunction(children)) {
+        children = children(slot.props.fillProps);
+    }
+    return react_dom_1.createPortal(children, slot.node);
+};
+const Fill = props => {
+    return (React.createElement(context_1.Consumer, null, ({ registerFill, unregisterFill }) => (React.createElement(FillComponent, Object.assign({}, props, { registerFill: registerFill, unregisterFill: unregisterFill })))));
+};
+exports.Fill = Fill;
+
+
+/***/ }),
+
+/***/ "./src/slot-fill/index.ts":
+/*!********************************!*\
+  !*** ./src/slot-fill/index.ts ***!
+  \********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlotFillProvider = exports.Fill = exports.Slot = void 0;
+const slot_1 = __webpack_require__(/*! ./slot */ "./src/slot-fill/slot.tsx");
+Object.defineProperty(exports, "Slot", { enumerable: true, get: function () { return slot_1.Slot; } });
+const fill_1 = __webpack_require__(/*! ./fill */ "./src/slot-fill/fill.tsx");
+Object.defineProperty(exports, "Fill", { enumerable: true, get: function () { return fill_1.Fill; } });
+const context_1 = __importDefault(__webpack_require__(/*! ./context */ "./src/slot-fill/context.tsx"));
+exports.SlotFillProvider = context_1.default;
+
+
+/***/ }),
+
+/***/ "./src/slot-fill/slot.tsx":
+/*!********************************!*\
+  !*** ./src/slot-fill/slot.tsx ***!
+  \********************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slot = void 0;
+const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
+const React = __importStar(__webpack_require__(/*! react */ "react"));
+const context_1 = __webpack_require__(/*! ./context */ "./src/slot-fill/context.tsx");
+const utils_1 = __webpack_require__(/*! ./utils */ "./src/slot-fill/utils/index.ts");
+class SlotComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.bindNode = this.bindNode.bind(this);
+    }
+    componentDidMount() {
+        const { registerSlot } = this.props;
+        registerSlot(this.props.name, this);
+    }
+    componentWillUnmount() {
+        const { unregisterSlot } = this.props;
+        unregisterSlot(this.props.name, this);
+    }
+    componentDidUpdate(prevProps) {
+        const { name, unregisterSlot, registerSlot } = this.props;
+        // Commented following as we need the Slot to render at multiple places
+        // if (prevProps.name !== name) {
+        //   unregisterSlot(prevProps.name);
+        //   registerSlot(name, this);
+        // }
+    }
+    bindNode(node) {
+        this.node = node;
+    }
+    render() {
+        const { children, name, bubblesVirtually = false, fillProps = {}, getFills, className, } = this.props;
+        if (bubblesVirtually) {
+            return React.createElement("div", { ref: this.bindNode, className: className });
+        }
+        const fills = lodash_1.map(getFills(name, this), fill => {
+            const fillKey = fill.occurrence;
+            const fillChildren = lodash_1.isFunction(fill.children)
+                ? fill.children(fillProps)
+                : fill.children;
+            return React.Children.map(fillChildren, (child, childIndex) => {
+                if (!child || lodash_1.isString(child)) {
+                    return child;
+                }
+                const childKey = `${fillKey}---${child.key || childIndex}`;
+                return React.cloneElement(child, { key: childKey });
+            });
+        }).filter(
+        // In some cases fills are rendered only when some conditions apply.
+        // This ensures that we only use non-empty fills when rendering, i.e.,
+        // it allows us to render wrappers only when the fills are actually present.
+        lodash_1.negate(utils_1.isEmptyElement));
+        return React.createElement(React.Fragment, null, lodash_1.isFunction(children) ? children(fills) : fills);
+    }
+}
+const Slot = props => {
+    return (React.createElement(context_1.Consumer, null, ({ registerSlot, unregisterSlot, getFills }) => (React.createElement(SlotComponent, Object.assign({}, props, { getFills: getFills, registerSlot: registerSlot, unregisterSlot: unregisterSlot })))));
+};
+exports.Slot = Slot;
+
+
+/***/ }),
+
+/***/ "./src/slot-fill/utils/index.ts":
+/*!**************************************!*\
+  !*** ./src/slot-fill/utils/index.ts ***!
+  \**************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(__webpack_require__(/*! ./isEmptyElement */ "./src/slot-fill/utils/isEmptyElement.tsx"), exports);
+
+
+/***/ }),
+
+/***/ "./src/slot-fill/utils/isEmptyElement.tsx":
+/*!************************************************!*\
+  !*** ./src/slot-fill/utils/isEmptyElement.tsx ***!
+  \************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isEmptyElement = void 0;
+const lodash_1 = __webpack_require__(/*! lodash */ "lodash");
+/**
+ * Checks if the provided element to check.
+ *
+ * @param element React Component to check.
+ * @returns True when an element is considered empty.
+ */
+const isEmptyElement = (element) => {
+    if (lodash_1.isNumber(element)) {
+        return false;
+    }
+    if (lodash_1.isString(element) || lodash_1.isArray(element)) {
+        return !element.length;
+    }
+    return !element;
+};
+exports.isEmptyElement = isEmptyElement;
+
+
 /***/ }),
 
 /***/ "./src/utils/index.ts":
@@ -1227,7 +1760,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(__webpack_require__(/*! ./route-utils */ "./src/utils/route-utils.tsx"), exports);
@@ -1259,7 +1792,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
     __setModuleDefault(result, mod);
     return result;
 };
@@ -1455,18 +1988,20 @@ function getMenus(path, menuData) {
     return root.children;
 }
 exports.getMenus = getMenus;
-exports.renderRoutes = (routes, solidRoutes, extraProps = {}, switchProps = {}) => routes ? (React.createElement(React.Fragment, null, [
+const renderRoutes = (routes, solidRoutes, extraProps = {}, switchProps = {}) => routes ? (React.createElement(React.Fragment, null, [
     ...solidRoutes,
     ...routes.map((route, i) => (React.createElement(react_router_dom_1.Route, { key: route.key || i, path: route.path, exact: route.exact, strict: route.strict, render: props => route.render ? (route.render(Object.assign(Object.assign(Object.assign({}, props), extraProps), { route: route }))) : (React.createElement(route.component, Object.assign({}, props, extraProps, { route: route }))) }))),
 ])) : null;
+exports.renderRoutes = renderRoutes;
 function sortKeys(routeData) {
     return defaultSortKeys(routeData, { compare });
 }
 exports.sortKeys = sortKeys;
-exports.getSortedRoutes = (path, routeData, authWrapper = null) => {
+const getSortedRoutes = (path, routeData, authWrapper = null) => {
     const sortedRoutes = sortKeys(routeData);
     return getRoutes(path, sortedRoutes, authWrapper);
 };
+exports.getSortedRoutes = getSortedRoutes;
 const compare = ((a, b) => {
     const aStr = String(a).toLowerCase();
     const bStr = String(b).toLowerCase();
@@ -1579,6 +2114,17 @@ module.exports = require("react");
 
 /***/ }),
 
+/***/ "react-dom":
+/*!****************************!*\
+  !*** external "react-dom" ***!
+  \****************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+module.exports = require("react-dom");
+
+/***/ }),
+
 /***/ "react-router":
 /*!*******************************!*\
   !*** external "react-router" ***!