@lumino/widgets - npm Package Compare versions

Comparing version 1.29.0 to 1.30.0

package.json

 {
   "name": "@lumino/widgets",
-  "version": "1.29.0",
+  "version": "1.30.0",
   "description": "Lumino Widgets",
@@ -43,3 +43,3 @@ "homepage": "https://github.com/jupyterlab/lumino",
     "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
-    "test": "npm run test:firefox",
+    "test": "npm run test:firefox-headless",
     "test:chrome": "npm run test:nobrowser -- --browsers=Chrome",
@@ -51,4 +51,6 @@ "test:chrome-headless": "npm run test:nobrowser -- --browsers=ChromeHeadless",
     "test:debug:firefox": "npm run test:debug:nobrowser -- --browsers=Firefox",
+    "test:debug:firefox-headless": "npm run test:debug:nobrowser -- --browsers=FirefoxHeadless",
     "test:debug:nobrowser": "cd tests && karma start --singleRun=false --debug=true --browserNoActivityTimeout=10000000 --browserDisconnectTimeout=10000000",
     "test:firefox": "npm run test:nobrowser -- --browsers=Firefox",
+    "test:firefox-headless": "npm run test:nobrowser -- --browsers=FirefoxHeadless",
     "test:ie": "npm run test:nobrowser -- --browsers=IE",
@@ -59,13 +61,13 @@ "test:nobrowser": "cd tests && karma start",
   "dependencies": {
-    "@lumino/algorithm": "^1.9.0",
-    "@lumino/commands": "^1.18.0",
-    "@lumino/coreutils": "^1.11.0",
-    "@lumino/disposable": "^1.10.0",
-    "@lumino/domutils": "^1.8.0",
-    "@lumino/dragdrop": "^1.13.0",
-    "@lumino/keyboard": "^1.8.0",
-    "@lumino/messaging": "^1.10.0",
-    "@lumino/properties": "^1.8.0",
-    "@lumino/signaling": "^1.10.0",
-    "@lumino/virtualdom": "^1.14.0"
+    "@lumino/algorithm": "^1.9.1",
+    "@lumino/commands": "^1.19.0",
+    "@lumino/coreutils": "^1.11.1",
+    "@lumino/disposable": "^1.10.1",
+    "@lumino/domutils": "^1.8.1",
+    "@lumino/dragdrop": "^1.13.1",
+    "@lumino/keyboard": "^1.8.1",
+    "@lumino/messaging": "^1.10.1",
+    "@lumino/properties": "^1.8.1",
+    "@lumino/signaling": "^1.10.1",
+    "@lumino/virtualdom": "^1.14.1"
   },
@@ -72,0 +74,0 @@ "devDependencies": {

src/docklayout.ts

@@ -56,2 +56,6 @@ // Copyright (c) Jupyter Development Team.
     }
+    this._hiddenMode =
+      options.hiddenMode !== undefined
+        ? options.hiddenMode
+        : Widget.HiddenMode.Display;
   }
@@ -94,2 +98,26 @@
   /**
+   * The method for hiding child widgets.
+   *
+   * #### Notes
+   * If there is only one child widget, `Display` hiding mode will be used
+   * regardless of this setting.
+   */
+  get hiddenMode(): Widget.HiddenMode {
+    return this._hiddenMode;
+  }
+  set hiddenMode(v: Widget.HiddenMode) {
+    if (this._hiddenMode === v) {
+      return;
+    }
+    this._hiddenMode = v;
+    each(this.tabBars(), bar => {
+      if (bar.titles.length > 1) {
+        bar.titles.forEach(title => {
+          title.owner.hiddenMode = this._hiddenMode;
+        });
+      }
+    });
+  }
+
+  /**
    * Get the inter-element spacing for the dock layout.
@@ -656,2 +684,9 @@ */
       tabNode.tabBar.removeTab(widget.title);
+      if (
+        this._hiddenMode === Widget.HiddenMode.Scale &&
+        tabNode.tabBar.titles.length == 1
+      ) {
+        const existingWidget = tabNode.tabBar.titles[0].owner;
+        existingWidget.hiddenMode = Widget.HiddenMode.Display;
+      }
       return;
@@ -814,2 +849,18 @@ }
 
+    // Using transform create an additional layer in the pixel pipeline
+    // to limit the number of layer, it is set only if there is more than one widget.
+    if (
+      this._hiddenMode === Widget.HiddenMode.Scale &&
+      refNode.tabBar.titles.length > 0
+    ) {
+      if (refNode.tabBar.titles.length == 1) {
+        const existingWidget = refNode.tabBar.titles[0].owner;
+        existingWidget.hiddenMode = Widget.HiddenMode.Scale;
+      }
+
+      widget.hiddenMode = Widget.HiddenMode.Scale;
+    } else {
+      widget.hiddenMode = Widget.HiddenMode.Display;
+    }
+
     // Insert the widget's tab relative to the target index.
@@ -1096,2 +1147,3 @@ refNode.tabBar.insertTab(index + (after ? 1 : 0), widget.title);
   private _box: ElementExt.IBoxSizing | null = null;
+  private _hiddenMode: Widget.HiddenMode;
   private _items: Private.ItemMap = new Map<Widget, LayoutItem>();
@@ -1109,2 +1161,9 @@ }
     /**
+     * The method for hiding widgets.
+     *
+     * The default is `Widget.HiddenMode.Display`.
+     */
+    hiddenMode?: Widget.HiddenMode;
+
+    /**
      * The renderer to use for the dock layout.
@@ -1111,0 +1170,0 @@ */

src/dockpanel.ts

@@ -70,3 +70,7 @@ // Copyright (c) Jupyter Development Team.
     // Set up the dock layout for the panel.
-    this.layout = new DockLayout({ renderer, spacing: options.spacing });
+    this.layout = new DockLayout({
+      renderer,
+      spacing: options.spacing,
+      hiddenMode: options.hiddenMode
+    });
 
@@ -98,2 +102,16 @@ // Set up the overlay drop indicator.
   /**
+   * The method for hiding widgets.
+   */
+  get hiddenMode(): Widget.HiddenMode {
+    return (this.layout as DockLayout).hiddenMode;
+  }
+
+  /**
+   * Set the method for hiding widgets.
+   */
+  set hiddenMode(v: Widget.HiddenMode) {
+    (this.layout as DockLayout).hiddenMode = v;
+  }
+
+  /**
    * A signal emitted when the layout configuration is modified.
@@ -1115,2 +1133,9 @@ *
     /**
+     * The method for hiding widgets.
+     *
+     * The default is `Widget.HiddenMode.Display`.
+     */
+    hiddenMode?: Widget.HiddenMode;
+
+    /**
      * Allow tabs to be draggable / movable by user.
@@ -1117,0 +1142,0 @@ *

src/stackedlayout.ts

@@ -16,3 +16,3 @@ // Copyright (c) Jupyter Development Team.
 
-import { LayoutItem } from './layout';
+import { Layout, LayoutItem } from './layout';
 
@@ -30,3 +30,41 @@ import { PanelLayout } from './panellayout';
 export class StackedLayout extends PanelLayout {
+  constructor(options: StackedLayout.IOptions = {}) {
+    super(options);
+    this._hiddenMode =
+      options.hiddenMode !== undefined
+        ? options.hiddenMode
+        : Widget.HiddenMode.Display;
+  }
+
   /**
+   * The method for hiding widgets.
+   *
+   * #### Notes
+   * If there is only one child widget, `Display` hiding mode will be used
+   * regardless of this setting.
+   */
+  get hiddenMode(): Widget.HiddenMode {
+    return this._hiddenMode;
+  }
+
+  /**
+   * Set the method for hiding widgets.
+   *
+   * #### Notes
+   * If there is only one child widget, `Display` hiding mode will be used
+   * regardless of this setting.
+   */
+  set hiddenMode(v: Widget.HiddenMode) {
+    if (this._hiddenMode === v) {
+      return;
+    }
+    this._hiddenMode = v;
+    if (this.widgets.length > 1) {
+      this.widgets.forEach(w => {
+        w.hiddenMode = this._hiddenMode;
+      });
+    }
+  }
+
+  /**
    * Dispose of the resources held by the layout.
@@ -59,2 +97,16 @@ */
   protected attachWidget(index: number, widget: Widget): void {
+    // Using transform create an additional layer in the pixel pipeline
+    // to limit the number of layer, it is set only if there is more than one widget.
+    if (
+      this._hiddenMode === Widget.HiddenMode.Scale &&
+      this._items.length > 0
+    ) {
+      if (this._items.length === 1) {
+        this.widgets[0].hiddenMode = Widget.HiddenMode.Scale;
+      }
+      widget.hiddenMode = Widget.HiddenMode.Scale;
+    } else {
+      widget.hiddenMode = Widget.HiddenMode.Display;
+    }
+
     // Create and add a new layout item for the widget.
@@ -134,2 +186,12 @@ ArrayExt.insert(this._items, index, new LayoutItem(widget));
 
+    // Reset the hidden mode for the widget.
+    if (this._hiddenMode === Widget.HiddenMode.Scale) {
+      widget.hiddenMode = Widget.HiddenMode.Display;
+
+      // Reset the hidden mode for the first widget if necessary.
+      if (this._items.length === 1) {
+        this._items[0].widget.hiddenMode = Widget.HiddenMode.Display;
+      }
+    }
+
     // Dispose of the layout item.
@@ -311,2 +373,20 @@ item!.dispose();
   private _box: ElementExt.IBoxSizing | null = null;
+  private _hiddenMode: Widget.HiddenMode;
 }
+
+/**
+ * The namespace for the `StackedLayout` class statics.
+ */
+export namespace StackedLayout {
+  /**
+   * An options object for initializing a stacked layout.
+   */
+  export interface IOptions extends Layout.IOptions {
+    /**
+     * The method for hiding widgets.
+     *
+     * The default is `Widget.HiddenMode.Display`.
+     */
+    hiddenMode?: Widget.HiddenMode;
+  }
+}

src/stackedpanel.ts

@@ -39,2 +39,24 @@ // Copyright (c) Jupyter Development Team.
   /**
+   * The method for hiding widgets.
+   *
+   * #### Notes
+   * If there is only one child widget, `Display` hiding mode will be used
+   * regardless of this setting.
+   */
+  get hiddenMode(): Widget.HiddenMode {
+    return (this.layout as StackedLayout).hiddenMode;
+  }
+
+  /**
+   * Set the method for hiding widgets.
+   *
+   * #### Notes
+   * If there is only one child widget, `Display` hiding mode will be used
+   * regardless of this setting.
+   */
+  set hiddenMode(v: Widget.HiddenMode) {
+    (this.layout as StackedLayout).hiddenMode = v;
+  }
+
+  /**
    * A signal emitted when a widget is removed from a stacked panel.
@@ -41,0 +63,0 @@ */

src/widget.ts

@@ -170,2 +170,43 @@ /* eslint-disable @typescript-eslint/no-empty-function */
   /**
+   * Get the method for hiding the widget.
+   */
+  get hiddenMode(): Widget.HiddenMode {
+    return this._hiddenMode;
+  }
+
+  /**
+   * Set the method for hiding the widget.
+   */
+  set hiddenMode(value: Widget.HiddenMode) {
+    if (this._hiddenMode === value) {
+      return;
+    }
+    this._hiddenMode = value;
+    switch (value) {
+      case Widget.HiddenMode.Display:
+        this.node.style.willChange = 'auto';
+        break;
+      case Widget.HiddenMode.Scale:
+        this.node.style.willChange = 'transform';
+        break;
+    }
+
+    if (this.isHidden) {
+      if (value === Widget.HiddenMode.Display) {
+        this.addClass('lm-mod-hidden');
+        /* <DEPRECATED> */
+        this.addClass('p-mod-hidden');
+        /* </DEPRECATED> */
+        this.node.style.transform = '';
+      } else {
+        this.node.style.transform = 'scale(0)';
+        this.removeClass('lm-mod-hidden');
+        /* <DEPRECATED> */
+        this.removeClass('p-mod-hidden');
+        /* </DEPRECATED> */
+      }
+    }
+  }
+
+  /**
    * Get the parent of the widget.
@@ -393,6 +434,12 @@ */
     this.clearFlag(Widget.Flag.IsHidden);
-    this.removeClass('lm-mod-hidden');
-    /* <DEPRECATED> */
-    this.removeClass('p-mod-hidden');
-    /* </DEPRECATED> */
+    this.node.removeAttribute('aria-hidden');
+    if (this.hiddenMode === Widget.HiddenMode.Display) {
+      this.removeClass('lm-mod-hidden');
+      /* <DEPRECATED> */
+      this.removeClass('p-mod-hidden');
+      /* </DEPRECATED> */
+    } else {
+      this.node.style.transform = '';
+    }
+
     if (this.isAttached && (!this.parent || this.parent.isVisible)) {
@@ -423,6 +470,12 @@ MessageLoop.sendMessage(this, Widget.Msg.AfterShow);
     this.setFlag(Widget.Flag.IsHidden);
-    this.addClass('lm-mod-hidden');
-    /* <DEPRECATED> */
-    this.addClass('p-mod-hidden');
-    /* </DEPRECATED> */
+    this.node.setAttribute('aria-hidden', 'true');
+    if (this.hiddenMode === Widget.HiddenMode.Display) {
+      this.addClass('lm-mod-hidden');
+      /* <DEPRECATED> */
+      this.addClass('p-mod-hidden');
+      /* </DEPRECATED> */
+    } else {
+      this.node.style.transform = 'scale(0)';
+    }
+
     if (this.isAttached && (!this.parent || this.parent.isVisible)) {
@@ -713,2 +766,3 @@ MessageLoop.sendMessage(this, Widget.Msg.AfterHide);
   private _disposed = new Signal<this, void>(this);
+  private _hiddenMode: Widget.HiddenMode = Widget.HiddenMode.Display;
 }
@@ -744,2 +798,31 @@
   /**
+   * The method for hiding the widget.
+   *
+   * The default is Display.
+   *
+   * Using `Scale` will often increase performance as most browsers will not
+   * trigger style computation for the `transform` action. This should be used
+   * sparingly and tested, since increasing the number of composition layers
+   * may slow things down.
+   *
+   * To ensure the transformation does not trigger style recomputation, you
+   * may need to set the widget CSS style `will-change: transform`. This
+   * should be used only when needed as it may overwhelm the browser with a
+   * high number of layers. See
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
+   */
+  export enum HiddenMode {
+    /**
+     * Set a `lm-mod-hidden` CSS class to hide the widget using `display:none`
+     * CSS from the standard Lumino CSS.
+     */
+    Display = 0,
+
+    /**
+     * Hide the widget by setting the `transform` to `'scale(0)'`.
+     */
+    Scale
+  }
+
+  /**
    * An enum of widget bit flags.
@@ -746,0 +829,0 @@ */

types/docklayout.d.ts

@@ -33,2 +33,10 @@ import { IIterator } from '@lumino/algorithm';
     /**
+     * The method for hiding child widgets.
+     *
+     * #### Notes
+     * If there is only one child widget, `Display` hiding mode will be used
+     * regardless of this setting.
+     */
+    hiddenMode: Widget.HiddenMode;
+    /**
      * Get the inter-element spacing for the dock layout.
@@ -271,2 +279,3 @@ */
     private _box;
+    private _hiddenMode;
     private _items;
@@ -283,2 +292,8 @@ }
         /**
+         * The method for hiding widgets.
+         *
+         * The default is `Widget.HiddenMode.Display`.
+         */
+        hiddenMode?: Widget.HiddenMode;
+        /**
          * The renderer to use for the dock layout.
@@ -285,0 +300,0 @@ */

types/dockpanel.d.ts

@@ -22,2 +22,9 @@ import { IIterator } from '@lumino/algorithm';
     /**
+     * The method for hiding widgets.
+     */
+    /**
+    * Set the method for hiding widgets.
+    */
+    hiddenMode: Widget.HiddenMode;
+    /**
      * A signal emitted when the layout configuration is modified.
@@ -337,2 +344,8 @@ *
         /**
+         * The method for hiding widgets.
+         *
+         * The default is `Widget.HiddenMode.Display`.
+         */
+        hiddenMode?: Widget.HiddenMode;
+        /**
          * Allow tabs to be draggable / movable by user.
@@ -339,0 +352,0 @@ *

types/stackedlayout.d.ts

 import { Message } from '@lumino/messaging';
+import { Layout } from './layout';
 import { PanelLayout } from './panellayout';
@@ -11,3 +12,19 @@ import { Widget } from './widget';
 export declare class StackedLayout extends PanelLayout {
+    constructor(options?: StackedLayout.IOptions);
     /**
+     * The method for hiding widgets.
+     *
+     * #### Notes
+     * If there is only one child widget, `Display` hiding mode will be used
+     * regardless of this setting.
+     */
+    /**
+    * Set the method for hiding widgets.
+    *
+    * #### Notes
+    * If there is only one child widget, `Display` hiding mode will be used
+    * regardless of this setting.
+    */
+    hiddenMode: Widget.HiddenMode;
+    /**
      * Dispose of the resources held by the layout.
@@ -92,3 +109,20 @@ */
     private _box;
+    private _hiddenMode;
 }
+/**
+ * The namespace for the `StackedLayout` class statics.
+ */
+export declare namespace StackedLayout {
+    /**
+     * An options object for initializing a stacked layout.
+     */
+    interface IOptions extends Layout.IOptions {
+        /**
+         * The method for hiding widgets.
+         *
+         * The default is `Widget.HiddenMode.Display`.
+         */
+        hiddenMode?: Widget.HiddenMode;
+    }
+}
 //# sourceMappingURL=stackedlayout.d.ts.map

types/stackedpanel.d.ts

@@ -19,2 +19,17 @@ import { ISignal } from '@lumino/signaling';
     /**
+     * The method for hiding widgets.
+     *
+     * #### Notes
+     * If there is only one child widget, `Display` hiding mode will be used
+     * regardless of this setting.
+     */
+    /**
+    * Set the method for hiding widgets.
+    *
+    * #### Notes
+    * If there is only one child widget, `Display` hiding mode will be used
+    * regardless of this setting.
+    */
+    hiddenMode: Widget.HiddenMode;
+    /**
      * A signal emitted when a widget is removed from a stacked panel.
@@ -21,0 +36,0 @@ */

types/widget.d.ts

@@ -83,2 +83,9 @@ import { IIterator } from '@lumino/algorithm';
     /**
+     * Get the method for hiding the widget.
+     */
+    /**
+    * Set the method for hiding the widget.
+    */
+    hiddenMode: Widget.HiddenMode;
+    /**
      * Get the parent of the widget.
@@ -380,2 +387,3 @@ */
     private _disposed;
+    private _hiddenMode;
 }
@@ -408,2 +416,29 @@ /**
     /**
+     * The method for hiding the widget.
+     *
+     * The default is Display.
+     *
+     * Using `Scale` will often increase performance as most browsers will not
+     * trigger style computation for the `transform` action. This should be used
+     * sparingly and tested, since increasing the number of composition layers
+     * may slow things down.
+     *
+     * To ensure the transformation does not trigger style recomputation, you
+     * may need to set the widget CSS style `will-change: transform`. This
+     * should be used only when needed as it may overwhelm the browser with a
+     * high number of layers. See
+     * https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
+     */
+    enum HiddenMode {
+        /**
+         * Set a `lm-mod-hidden` CSS class to hide the widget using `display:none`
+         * CSS from the standard Lumino CSS.
+         */
+        Display = 0,
+        /**
+         * Hide the widget by setting the `transform` to `'scale(0)'`.
+         */
+        Scale = 1
+    }
+    /**
      * An enum of widget bit flags.
@@ -410,0 +445,0 @@ */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4755935

increased by1.37%

Lines of code

58521

increased by1.4%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@lumino/algorithm@^1.9.1

• Updated@lumino/commands@^1.19.0

• Updated@lumino/coreutils@^1.11.1

• Updated@lumino/disposable@^1.10.1

• Updated@lumino/domutils@^1.8.1

• Updated@lumino/dragdrop@^1.13.1

• Updated@lumino/keyboard@^1.8.1

• Updated@lumino/messaging@^1.10.1

• Updated@lumino/properties@^1.8.1

• Updated@lumino/signaling@^1.10.1

• Updated@lumino/virtualdom@^1.14.1