@jupyterlab/ui-components - npm Package Compare versions

Comparing version 4.0.0-beta.2 to 4.0.0-rc.0

lib/components/windowedlist.d.ts

@@ -94,7 +94,16 @@ import { IChangedArgs } from '@jupyterlab/coreutils';
      *
+     * By default, the list will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
+     *
+     *   auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.)
+     *   smart - If the item is already visible (including the margin), don't scroll at all. If it is less than one viewport away, scroll so that it becomes visible (including the margin). If it is more than one viewport away, scroll so that it is centered within the list.
+     *   center - Center align the item within the list.
+     *   end - Align the item to the end of the list
+     *   start - Align the item to the beginning of the list
+     *
      * @param index Item index
      * @param align Where to align the item in the viewport
+     * @param margin In 'smart' mode the viewport proportion to add
      * @returns The needed scroll offset
      */
-    getOffsetForIndexAndAlignment(index: number, align?: WindowedList.ScrollToAlign): number;
+    getOffsetForIndexAndAlignment(index: number, align?: WindowedList.ScrollToAlign, margin?: number): number;
     /**
@@ -212,6 +221,6 @@ * Compute the items range to display.
      *
-     * By default, the List will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
+     * By default, the list will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
      *
      *   auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.)
-     *   smart - If the item is already visible, don't scroll at all. If it is less than one viewport away, scroll as little as possible so that it becomes visible. If it is more than one viewport away, scroll so that it is centered within the list.
+     *   smart - If the item is already visible (including the margin), don't scroll at all. If it is less than one viewport away, scroll so that it becomes visible (including the margin). If it is more than one viewport away, scroll so that it is centered within the list.
      *   center - Center align the item within the list.
@@ -223,4 +232,5 @@ *   end - Align the item to the end of the list
      * @param align Type of alignment
+     * @param margin In 'smart' mode the viewport proportion to add
      */
-    scrollToItem(index: number, align?: WindowedList.ScrollToAlign): Promise<void>;
+    scrollToItem(index: number, align?: WindowedList.ScrollToAlign, margin?: number): Promise<void>;
     /**
@@ -385,7 +395,16 @@ * A message handler invoked on an `'after-attach'` message.
          *
+         * By default, the list will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
+         *
+         *   auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.)
+         *   smart - If the item is already visible (including the margin), don't scroll at all. If it is less than one viewport away, scroll so that it becomes visible (including the margin). If it is more than one viewport away, scroll so that it is centered within the list.
+         *   center - Center align the item within the list.
+         *   end - Align the item to the end of the list
+         *   start - Align the item to the beginning of the list
+         *
          * @param index Item index
          * @param align Where to align the item in the viewport
+         * @param margin In 'smart' mode the viewport proportion to add
          * @returns The needed scroll offset
          */
-        getOffsetForIndexAndAlignment(index: number, align: ScrollToAlign): number;
+        getOffsetForIndexAndAlignment(index: number, align?: ScrollToAlign, margin?: number): number;
         /**
@@ -392,0 +411,0 @@ * Compute the items range to display.

lib/components/windowedlist.js

@@ -217,7 +217,17 @@ /*
      *
+     * By default, the list will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
+     *
+     *   auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.)
+     *   smart - If the item is already visible (including the margin), don't scroll at all. If it is less than one viewport away, scroll so that it becomes visible (including the margin). If it is more than one viewport away, scroll so that it is centered within the list.
+     *   center - Center align the item within the list.
+     *   end - Align the item to the end of the list
+     *   start - Align the item to the beginning of the list
+     *
      * @param index Item index
      * @param align Where to align the item in the viewport
+     * @param margin In 'smart' mode the viewport proportion to add
      * @returns The needed scroll offset
      */
-    getOffsetForIndexAndAlignment(index, align = 'auto') {
+    getOffsetForIndexAndAlignment(index, align = 'auto', margin = 0.25) {
+        const boundedMargin = align === 'smart' ? Math.min(Math.max(0.0, margin), 1.0) : 0.0;
         const size = this._height;
@@ -228,7 +238,7 @@ const itemMetadata = this._getItemMetadata(index);
         const estimatedTotalSize = this.getEstimatedTotalSize();
-        const maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
-        const minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
+        const topOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
+        const bottomOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
         if (align === 'smart') {
-            if (this._scrollOffset >= minOffset - size &&
-                this._scrollOffset <= maxOffset + size) {
+            if (this._scrollOffset >= bottomOffset - size &&
+                this._scrollOffset <= topOffset + size) {
                 align = 'auto';
@@ -242,18 +252,18 @@ }
             case 'start':
-                return maxOffset;
+                return topOffset;
             case 'end':
-                return minOffset;
+                return bottomOffset;
             case 'center':
-                return Math.round(minOffset + (maxOffset - minOffset) / 2);
+                return Math.round(bottomOffset + (topOffset - bottomOffset) / 2);
             case 'auto':
             default:
-                if (this._scrollOffset >= minOffset &&
-                    this._scrollOffset <= maxOffset) {
+                if (this._scrollOffset >= bottomOffset &&
+                    this._scrollOffset <= itemMetadata.offset) {
                     return this._scrollOffset;
                 }
-                else if (this._scrollOffset < minOffset) {
-                    return minOffset;
+                else if (this._scrollOffset < bottomOffset) {
+                    return bottomOffset + boundedMargin * size;
                 }
                 else {
-                    return maxOffset;
+                    return Math.max(0, topOffset - boundedMargin * size);
                 }
@@ -573,6 +583,6 @@ }
      *
-     * By default, the List will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
+     * By default, the list will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
      *
      *   auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.)
-     *   smart - If the item is already visible, don't scroll at all. If it is less than one viewport away, scroll as little as possible so that it becomes visible. If it is more than one viewport away, scroll so that it is centered within the list.
+     *   smart - If the item is already visible (including the margin), don't scroll at all. If it is less than one viewport away, scroll so that it becomes visible (including the margin). If it is more than one viewport away, scroll so that it is centered within the list.
      *   center - Center align the item within the list.
@@ -584,4 +594,5 @@ *   end - Align the item to the end of the list
      * @param align Type of alignment
+     * @param margin In 'smart' mode the viewport proportion to add
      */
-    scrollToItem(index, align = 'auto') {
+    scrollToItem(index, align = 'auto', margin = 0.25) {
         if (!this.viewModel.windowingActive) {
@@ -609,3 +620,3 @@ const widget = this.layout.widgets[index];
         this._resetScrollToItem();
-        this.scrollTo(this.viewModel.getOffsetForIndexAndAlignment(Math.max(0, Math.min(index, this._viewModel.widgetCount - 1)), align));
+        this.scrollTo(this.viewModel.getOffsetForIndexAndAlignment(Math.max(0, Math.min(index, this._viewModel.widgetCount - 1)), align, margin));
         return this._isScrolling.promise;
@@ -612,0 +623,0 @@ }

package.json

 {
   "name": "@jupyterlab/ui-components",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-rc.0",
   "description": "JupyterLab - UI components written in React",
@@ -44,16 +44,16 @@ "homepage": "https://github.com/jupyterlab/jupyterlab",
   "dependencies": {
-    "@jupyterlab/coreutils": "^6.0.0-beta.2",
-    "@jupyterlab/observables": "^5.0.0-beta.2",
-    "@jupyterlab/rendermime-interfaces": "^3.8.0-beta.2",
-    "@jupyterlab/translation": "^4.0.0-beta.2",
+    "@jupyterlab/coreutils": "^6.0.0-rc.0",
+    "@jupyterlab/observables": "^5.0.0-rc.0",
+    "@jupyterlab/rendermime-interfaces": "^3.8.0-rc.0",
+    "@jupyterlab/translation": "^4.0.0-rc.0",
     "@lumino/algorithm": "^2.0.0",
-    "@lumino/commands": "^2.1.0",
-    "@lumino/coreutils": "^2.1.0",
-    "@lumino/disposable": "^2.1.0",
+    "@lumino/commands": "^2.1.1",
+    "@lumino/coreutils": "^2.1.1",
+    "@lumino/disposable": "^2.1.1",
     "@lumino/messaging": "^2.0.0",
-    "@lumino/polling": "^2.1.0",
+    "@lumino/polling": "^2.1.1",
     "@lumino/properties": "^2.0.0",
-    "@lumino/signaling": "^2.1.0",
+    "@lumino/signaling": "^2.1.1",
     "@lumino/virtualdom": "^2.0.0",
-    "@lumino/widgets": "^2.1.0",
+    "@lumino/widgets": "^2.1.1",
     "@rjsf/core": "^5.1.0",
@@ -66,3 +66,3 @@ "@rjsf/utils": "^5.1.0",
   "devDependencies": {
-    "@jupyterlab/testing": "^4.0.0-beta.2",
+    "@jupyterlab/testing": "^4.0.0-rc.0",
     "@types/jest": "^29.2.0",
@@ -69,0 +69,0 @@ "@types/react": "^18.0.26",

src/components/windowedlist.ts

@@ -268,4 +268,13 @@ /*
    *
+   * By default, the list will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
+   *
+   *   auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.)
+   *   smart - If the item is already visible (including the margin), don't scroll at all. If it is less than one viewport away, scroll so that it becomes visible (including the margin). If it is more than one viewport away, scroll so that it is centered within the list.
+   *   center - Center align the item within the list.
+   *   end - Align the item to the end of the list
+   *   start - Align the item to the beginning of the list
+   *
    * @param index Item index
    * @param align Where to align the item in the viewport
+   * @param margin In 'smart' mode the viewport proportion to add
    * @returns The needed scroll offset
@@ -275,4 +284,7 @@ */
     index: number,
-    align: WindowedList.ScrollToAlign = 'auto'
+    align: WindowedList.ScrollToAlign = 'auto',
+    margin: number = 0.25
   ): number {
+    const boundedMargin =
+      align === 'smart' ? Math.min(Math.max(0.0, margin), 1.0) : 0.0;
     const size = this._height;
@@ -285,7 +297,7 @@ const itemMetadata = this._getItemMetadata(index);
 
-    const maxOffset = Math.max(
+    const topOffset = Math.max(
       0,
       Math.min(estimatedTotalSize - size, itemMetadata.offset)
     );
-    const minOffset = Math.max(
+    const bottomOffset = Math.max(
       0,
@@ -297,4 +309,4 @@ itemMetadata.offset - size + itemMetadata.size
       if (
-        this._scrollOffset >= minOffset - size &&
-        this._scrollOffset <= maxOffset + size
+        this._scrollOffset >= bottomOffset - size &&
+        this._scrollOffset <= topOffset + size
       ) {
@@ -309,18 +321,18 @@ align = 'auto';
       case 'start':
-        return maxOffset;
+        return topOffset;
       case 'end':
-        return minOffset;
+        return bottomOffset;
       case 'center':
-        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+        return Math.round(bottomOffset + (topOffset - bottomOffset) / 2);
       case 'auto':
       default:
         if (
-          this._scrollOffset >= minOffset &&
-          this._scrollOffset <= maxOffset
+          this._scrollOffset >= bottomOffset &&
+          this._scrollOffset <= itemMetadata.offset
         ) {
           return this._scrollOffset;
-        } else if (this._scrollOffset < minOffset) {
-          return minOffset;
+        } else if (this._scrollOffset < bottomOffset) {
+          return bottomOffset + boundedMargin * size;
         } else {
-          return maxOffset;
+          return Math.max(0, topOffset - boundedMargin * size);
         }
@@ -749,6 +761,6 @@ }
    *
-   * By default, the List will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
+   * By default, the list will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
    *
    *   auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.)
-   *   smart - If the item is already visible, don't scroll at all. If it is less than one viewport away, scroll as little as possible so that it becomes visible. If it is more than one viewport away, scroll so that it is centered within the list.
+   *   smart - If the item is already visible (including the margin), don't scroll at all. If it is less than one viewport away, scroll so that it becomes visible (including the margin). If it is more than one viewport away, scroll so that it is centered within the list.
    *   center - Center align the item within the list.
@@ -760,6 +772,8 @@ *   end - Align the item to the end of the list
    * @param align Type of alignment
+   * @param margin In 'smart' mode the viewport proportion to add
    */
   scrollToItem(
     index: number,
-    align: WindowedList.ScrollToAlign = 'auto'
+    align: WindowedList.ScrollToAlign = 'auto',
+    margin: number = 0.25
   ): Promise<void> {
@@ -796,3 +810,4 @@ if (!this.viewModel.windowingActive) {
         Math.max(0, Math.min(index, this._viewModel.widgetCount - 1)),
-        align
+        align,
+        margin
       )
@@ -1254,7 +1269,20 @@ );
      *
+     * By default, the list will scroll as little as possible to ensure the item is visible. You can control the alignment of the item though by specifying a second alignment parameter. Acceptable values are:
+     *
+     *   auto (default) - Scroll as little as possible to ensure the item is visible. (If the item is already visible, it won't scroll at all.)
+     *   smart - If the item is already visible (including the margin), don't scroll at all. If it is less than one viewport away, scroll so that it becomes visible (including the margin). If it is more than one viewport away, scroll so that it is centered within the list.
+     *   center - Center align the item within the list.
+     *   end - Align the item to the end of the list
+     *   start - Align the item to the beginning of the list
+     *
      * @param index Item index
      * @param align Where to align the item in the viewport
+     * @param margin In 'smart' mode the viewport proportion to add
      * @returns The needed scroll offset
      */
-    getOffsetForIndexAndAlignment(index: number, align: ScrollToAlign): number;
+    getOffsetForIndexAndAlignment(
+      index: number,
+      align?: ScrollToAlign,
+      margin?: number
+    ): number;
     /**
@@ -1261,0 +1289,0 @@ * Compute the items range to display.

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

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

826836

increased by0.68%

Lines of code

17804

increased by0.33%

Dependency changes

• Updated@jupyterlab/coreutils@^6.0.0-rc.0

• Updated@jupyterlab/observables@^5.0.0-rc.0

• Updated@jupyterlab/rendermime-interfaces@^3.8.0-rc.0

• Updated@jupyterlab/translation@^4.0.0-rc.0

• Updated@lumino/commands@^2.1.1

• Updated@lumino/coreutils@^2.1.1

• Updated@lumino/disposable@^2.1.1

• Updated@lumino/polling@^2.1.1

• Updated@lumino/signaling@^2.1.1

• Updated@lumino/widgets@^2.1.1