@plurid/plurid-react 0.0.0-28 → 0.0.0-29

package/distribution/components/structural/Roots/index.d.ts

@@ -8,11 +8,12 @@ export interface PluridRootsStateProperties {
     stateConfiguration: PluridConfiguration;
     spaceTransformMatrix: string;
     spaceAnimatedTransform: boolean;
+    stateResolvedLayout: boolean;
     spaceTransformTime: number;
     stateTree: TreePlane[];
 }
 export interface PluridRootsDispatchProperties {
 }
 export declare type PluridRootsProperties = PluridRootsOwnProperties & PluridRootsStateProperties & PluridRootsDispatchProperties;
-declare const ConnectedPluridRoots: import("react-redux").ConnectedComponent<React.FC<PluridRootsProperties>, Omit<PluridRootsProperties, "stateConfiguration" | "stateTree" | "spaceTransformMatrix" | "spaceAnimatedTransform" | "spaceTransformTime"> & import("react-redux").ConnectProps>;
+declare const ConnectedPluridRoots: import("react-redux").ConnectedComponent<React.FC<PluridRootsProperties>, Omit<PluridRootsProperties, "stateConfiguration" | "stateTree" | "spaceTransformMatrix" | "spaceAnimatedTransform" | "stateResolvedLayout" | "spaceTransformTime"> & import("react-redux").ConnectProps>;
 export default ConnectedPluridRoots;

package/distribution/containers/RouterBrowser/FadeIn/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface FadeInProperties {
+}
+declare const FadeIn: React.FC<FadeInProperties>;
+export default FadeIn;

package/distribution/containers/RouterBrowser/FadeIn/styled.d.ts

@@ -0,0 +1,3 @@
+export interface IStyledFadeIn {
+}
+export declare const StyledFadeIn: import("styled-components").StyledComponent<"div", any, IStyledFadeIn, never>;

package/distribution/index.es.js

@@ -2062,13 +2062,16 @@ const StyledPluridRoots = styled.div`
 `;
 
 const PluridRoots = properties => {
-    const {spaceTransformMatrix: spaceTransformMatrix, spaceAnimatedTransform: spaceAnimatedTransform, spaceTransformTime: spaceTransformTime, stateTree: stateTree} = properties;
+    const {spaceTransformMatrix: spaceTransformMatrix, spaceAnimatedTransform: spaceAnimatedTransform, spaceTransformTime: spaceTransformTime, stateTree: stateTree, stateResolvedLayout: stateResolvedLayout} = properties;
+    const width = "100%";
+    const height = stateResolvedLayout ? window.innerHeight + "px" : 0;
+    const transition = spaceAnimatedTransform ? `transform ${spaceTransformTime}ms ease-in-out` : "initial";
     return React.createElement(StyledPluridRoots, {
         style: {
-            width: "100%",
-            height: typeof window !== "undefined" ? window.innerHeight + "px" : "821px",
-            transform: spaceTransformMatrix,
-            transition: spaceAnimatedTransform ? `transform ${spaceTransformTime}ms ease-in-out` : "initial"
+            width: width,
+            height: height,
+            transition: transition,
+            transform: spaceTransformMatrix
         },
         "data-plurid-entity": PLURID_ENTITY_ROOTS
     }, stateTree.map((plane => React.createElement(ConnectedPluridRoot, {
@@ -2082,7 +2085,8 @@ const mapStateToProperties$g = state => ({
     spaceTransformMatrix: selectors.space.getTransformMatrix(state),
     spaceAnimatedTransform: selectors.space.getAnimatedTransform(state),
     spaceTransformTime: selectors.space.getTransformTime(state),
-    stateTree: selectors.space.getTree(state)
+    stateTree: selectors.space.getTree(state),
+    stateResolvedLayout: selectors.space.getResolvedLayout(state)
 });
 
 const mapDispatchToProperties$g = dispatch => ({});
@@ -5414,6 +5418,30 @@ const PluridScrollTop = styled.div`
     width: 0;
 `;
 
+const StyledFadeIn = styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: black;
+    pointer-events: none;
+    z-index: 999999;
+`;
+
+const FadeIn = properties => {
+    const [fadedIn, setFadedIn] = useState(false);
+    useEffect((() => {
+        setTimeout((() => {
+            setFadedIn(true);
+        }), 10);
+    }), []);
+    if (fadedIn) {
+        return React.createElement(React.Fragment, null);
+    }
+    return React.createElement(StyledFadeIn, null);
+};
+
 const PluridRouterBrowser = properties => {
     const {routes: routes, planes: planes, exterior: exterior, shell: shell, hostname: hostname, scrollToTop: scrollToTop, static: staticContext, view: cleanNavigationView, cleanNavigation: cleanNavigation, notFoundPath: notFoundPathProperty} = properties;
     const notFoundPath = notFoundPathProperty || "/not-found";
@@ -5512,7 +5540,7 @@ const PluridRouterBrowser = properties => {
             PluridRouterShell.displayName = "PluridRouterShell";
         }
     }
-    return React.createElement(React.Fragment, null, React.createElement(PluridScrollTop, {
+    return React.createElement(React.Fragment, null, React.createElement(FadeIn, null), React.createElement(PluridScrollTop, {
         ref: topContainer
     }), PluridRouterExterior && React.createElement(PluridRouterExterior, {
         matchedRoute: matchedRoute