goblin-gadgets 4.2.0 → 4.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goblin-gadgets",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "description": "Gadgets library",
   "main": "./builders/builders.js",
   "scripts": {

package/widgets/popup-container/styles.js

@@ -150,11 +150,14 @@ export default function styles(theme, props) {
     inset: '0',
     overflow: 'hidden',
     backgroundColor: showed ? screenBackground : null,
-    transition: theme.transitions.openClosePopup,
     opacity: showed ? 1 : 0,
     pointerEvents: showed ? 'auto' : 'none',
   };
 
+  const popupContainerTransition = {
+    transition: theme.transitions.openClosePopup,
+  };
+
   const window = {
     position: 'absolute',
     left,
@@ -175,10 +178,13 @@ export default function styles(theme, props) {
     flexDirection: 'column',
     overflow: 'hidden',
     transformOrigin: origin || 'bottom',
-    transition: `${transitionScope} ${theme.transitions.openClosePopup}`,
     transform: showed ? null : 'scale(0.5)', // (*)
   };
 
+  const windowTransition = {
+    transition: `${transitionScope} ${theme.transitions.openClosePopup}`,
+  };
+
   // (*)  Ne pas faire:
   //        transform: showed ? 'scale(1)' : 'scale(0.5)',
   //      Cela génère un bug étrange lors du drag dans ColorPicker et AnalogClock !
@@ -239,7 +245,9 @@ export default function styles(theme, props) {
 
   return {
     popupContainer,
+    popupContainerTransition,
     window,
+    windowTransition,
     windowTriangle,
     triangle: triangleStyle,
   };

package/widgets/popup-container/widget.js

@@ -21,6 +21,16 @@ export default class PopupContainer extends Widget {
     super(...arguments);
     this.styles = styles;
     this.onBackgroundClick = this.onBackgroundClick.bind(this);
+    this.state = {
+      mounted: false,
+    };
+  }
+
+  componentDidMount() {
+    // Use setTimeout to wait for React completes the render cycle
+    setTimeout(() => {
+      this.setState({mounted: true});
+    }, 0);
   }
 
   onBackgroundClick(e) {
@@ -48,15 +58,22 @@ export default class PopupContainer extends Widget {
   }
 
   render() {
+    let containerClassName = this.styles.classNames.popupContainer;
+    let windowClassName = this.styles.classNames.window;
+    if (this.state.mounted) {
+      containerClassName = `${this.styles.classNames.popupContainer} ${this.styles.classNames.popupContainerTransition}`;
+      windowClassName = `${this.styles.classNames.window} ${this.styles.classNames.windowTransition}`;
+    }
+
     return (
       <div
-        className={this.styles.classNames.popupContainer}
+        className={containerClassName}
         onMouseDown={this.onBackgroundClick}
         onTouchStart={this.onBackgroundClick}
       >
         <div
           ref={(node) => (this.divWindow = node)}
-          className={this.styles.classNames.window}
+          className={windowClassName}
         >
           {this.props.children}
         </div>

package/widgets/tab-navigation/service.js

@@ -71,7 +71,6 @@ class TabNavigation extends Elf {
    * @returns {Promise<this>}
    */
   async create(id, desktopId, views) {
-    this.desktopId = desktopId;
     this.views = views;
     this.logic.create(id);
     const firstTab = Object.keys(views)[0];
@@ -98,7 +97,7 @@ class TabNavigation extends Elf {
     const serviceArgs = view.serviceArgs || [];
     await new ServiceClass(this).create(
       serviceId,
-      this.desktopId,
+      await this.winDesktopId(),
       ...serviceArgs
     );
     this.loadedServices.set(tab, serviceId);