@knime/kds-components 0.30.1 → 0.30.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @knime/kds-components
 
+## 0.30.2
+
+### Patch Changes
+
+- cfa40df: Kds 487 fix file explorer virtual scrolling
+  - @knime/kds-styles@0.30.2
+
 ## 0.30.1
 
 ### Patch Changes

package/dist/index.css

@@ -1782,7 +1782,7 @@ html.kds-legacy {
   cursor: pointer;
 }
 
-.file-explorer[data-v-921486c1] {
+.file-explorer[data-v-da0e6dab] {
   display: flex;
   flex: 1 0 0%;
   flex-direction: column;
@@ -1791,10 +1791,10 @@ html.kds-legacy {
   /* needed so that the virtualization container can size the wrapper properly */
   min-height: 0;
 }
-.file-explorer-item[data-v-921486c1] {
-  height: var(--v6215695b);
+.file-explorer-item[data-v-da0e6dab] {
+  height: var(--v44ee6cb4);
 }
-thead[data-v-921486c1] {
+thead[data-v-da0e6dab] {
   /* Hide table head for better readability but keeping it for a11y reasons */
   position: absolute;
 
@@ -1805,7 +1805,7 @@ thead[data-v-921486c1] {
   overflow: hidden;
   white-space: nowrap; /* added line */
 }
-table[data-v-921486c1] {
+table[data-v-da0e6dab] {
   height: 100%;
   overflow: hidden auto;
   scrollbar-gutter: stable;
@@ -1816,31 +1816,31 @@ table[data-v-921486c1] {
 }
 table,
 tbody {
-&[data-v-921486c1] {
+&[data-v-da0e6dab] {
   width: 100%;
   border-spacing: 0;
   }
-&[data-v-921486c1]:not(:has(.empty)) {
+&[data-v-da0e6dab]:not(:has(.empty)) {
     display: block;
 }
 }
 table:focus {
-&[data-v-921486c1] {
+&[data-v-da0e6dab] {
   outline: none;
   }
-&.keyboard-focus[data-v-921486c1] {
+&.keyboard-focus[data-v-da0e6dab] {
     outline: 2px solid var(--kds-color-focus-outline);
     border-radius: var(--kds-border-radius-container-0-25x);
 }
 }
-.empty[data-v-921486c1] {
+.empty[data-v-da0e6dab] {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--kds-spacing-container-0-37x);
   margin: var(--kds-spacing-container-4x) 0;
 }
-.custom-preview[data-v-921486c1] {
+.custom-preview[data-v-da0e6dab] {
   position: fixed;
   top: 0;
   left: 0;

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, mergeProps, useTemplateRef, createVNode, withCtx, renderSlot, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, inject, provide, resolveComponent, withKeys, watchEffect, useAttrs, isRef, getCurrentScope, onScopeDispose, defineAsyncComponent, toRefs, useCssVars, createSlots, normalizeProps, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, vModelText, createTextVNode, guardReactiveProps } from 'vue';
-import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, onClickOutside, useElementSize, useMousePressed, useVirtualList, useTemplateRefsList } from '@vueuse/core';
+import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, mergeProps, useTemplateRef, createVNode, withCtx, renderSlot, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, inject, provide, resolveComponent, withKeys, watchEffect, useAttrs, defineAsyncComponent, toRefs, useCssVars, normalizeProps, guardReactiveProps, createSlots, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, isRef, vModelText, createTextVNode } from 'vue';
+import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, onClickOutside, useVirtualList, useElementSize, useMousePressed, useTemplateRefsList } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
   SMALL: "small",
@@ -3363,67 +3363,6 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   }
 });
 
-function debounce(func, debounceMs, { signal, edges } = {}) {
-    let pendingThis = undefined;
-    let pendingArgs = null;
-    const leading = edges != null && edges.includes('leading');
-    const trailing = edges == null || edges.includes('trailing');
-    const invoke = () => {
-        if (pendingArgs !== null) {
-            func.apply(pendingThis, pendingArgs);
-            pendingThis = undefined;
-            pendingArgs = null;
-        }
-    };
-    const onTimerEnd = () => {
-        if (trailing) {
-            invoke();
-        }
-        cancel();
-    };
-    let timeoutId = null;
-    const schedule = () => {
-        if (timeoutId != null) {
-            clearTimeout(timeoutId);
-        }
-        timeoutId = setTimeout(() => {
-            timeoutId = null;
-            onTimerEnd();
-        }, debounceMs);
-    };
-    const cancelTimer = () => {
-        if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-            timeoutId = null;
-        }
-    };
-    const cancel = () => {
-        cancelTimer();
-        pendingThis = undefined;
-        pendingArgs = null;
-    };
-    const flush = () => {
-        invoke();
-    };
-    const debounced = function (...args) {
-        if (signal?.aborted) {
-            return;
-        }
-        pendingThis = this;
-        pendingArgs = args;
-        const isFirstCall = timeoutId == null;
-        schedule();
-        if (leading && isFirstCall) {
-            invoke();
-        }
-    };
-    debounced.schedule = schedule;
-    debounced.cancel = cancel;
-    debounced.flush = flush;
-    signal?.addEventListener('abort', cancel, { once: true });
-    return debounced;
-}
-
 const isMac = () => navigator?.userAgent?.toLowerCase()?.includes("mac");
 
 const createUnwrappedPromise = () => {
@@ -3446,139 +3385,6 @@ const getMetaOrCtrlKey = () => {
   return isMac() ? "metaKey" : "ctrlKey";
 };
 
-var B$1 = Object.defineProperty;
-var b$1 = (t, e, r) => e in t ? B$1(t, e, { enumerable: true, configurable: true, writable: true, value: r }) : t[e] = r;
-var u$1 = (t, e, r) => b$1(t, typeof e != "symbol" ? e + "" : e, r);
-function N$1(t) {
-  return getCurrentScope() ? (onScopeDispose(t), true) : false;
-}
-function P$1(t) {
-  return typeof t == "function" ? t() : unref(t);
-}
-const R$1 = typeof window < "u" && typeof document < "u";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-function O$1(t) {
-  var e;
-  const r = P$1(t);
-  return (e = r == null ? void 0 : r.$el) != null ? e : r;
-}
-const $$1 = R$1 ? window : void 0;
-function C$1() {
-  const t = ref(false);
-  return getCurrentInstance() && onMounted(() => {
-    t.value = true;
-  }), t;
-}
-function V$1(t) {
-  const e = C$1();
-  return computed(() => (e.value, !!t()));
-}
-function x$1(t, e, r = {}) {
-  const { window: n = $$1, ...a } = r;
-  let o;
-  const l = V$1(() => n && "ResizeObserver" in n), i = () => {
-    o && (o.disconnect(), o = void 0);
-  }, f = computed(() => Array.isArray(t) ? t.map((p) => O$1(p)) : [O$1(t)]), c = watch(
-    f,
-    (p) => {
-      if (i(), l.value && n) {
-        o = new ResizeObserver(e);
-        for (const d of p)
-          d && o.observe(d, a);
-      }
-    },
-    { immediate: true, flush: "post", deep: true }
-  ), m = () => {
-    i(), c();
-  };
-  return N$1(m), {
-    isSupported: l,
-    stop: m
-  };
-}
-function F$1(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
-}
-var G$1 = function(e) {
-  var r = null, n, a = function(i) {
-    return function() {
-      r = null, e.apply(i, n);
-    };
-  }, o = function() {
-    for (var i = arguments.length, f = new Array(i), c = 0; c < i; c++)
-      f[c] = arguments[c];
-    n = f, r === null && (r = requestAnimationFrame(a(this)));
-  };
-  return o.cancel = function() {
-    cancelAnimationFrame(r), r = null;
-  }, o;
-}, j$1 = G$1;
-const q$1 = /* @__PURE__ */ F$1(j$1), _$1 = 500, w$1 = ({
-  sizeManager: t,
-  buffer: e = _$1
-}, r = "vertical", n = null) => {
-  const o = ref({ scrollStart: 0, scrollEnd: 0 }), l = r === "vertical", i = n ?? ref(null), f = q$1(() => {
-    if (!i.value)
-      return;
-    const { scrollTop: d, scrollLeft: S, offsetHeight: y, offsetWidth: A } = i.value, g = l ? d : S, L = l ? y : A;
-    o.value = { scrollStart: g, scrollEnd: g + L };
-  });
-  t.onUpdate(f), n || x$1(i, f);
-  const c = computed(() => {
-    const d = t.toIndex(o.value.scrollStart - e), S = Math.min(
-      t.toIndex(o.value.scrollEnd + e) + 1,
-      t.getNumItems()
-    );
-    return { startIndex: d, endIndex: S, toArray: () => Array.from({ length: S - d }, (A, g) => d + g) };
-  }), m = computed(() => t.toOffset(c.value.startIndex)), p = computed(() => ({
-    [`padding${l ? "Top" : "Left"}`]: `${m.value}px`,
-    [l ? "height" : "width"]: `${t.getTotalSize()}px`,
-    /**
-     * Since the height of the element should not be influenced by its padding.
-     * An alternative without box-sizing: "border-box" would be to use margins instead
-     * paddings, but then it is no longer easily possible to absolutely position
-     * other elements (e.g. a cell selection overlay) inside this element.
-     */
-    boxSizing: "border-box"
-  }));
-  return {
-    containerProps: {
-      ref: i,
-      onScroll: f
-    },
-    indices: c,
-    scrolledAreaStyles: p
-  };
-}, v$1 = (t, e) => isRef(t) && watch(() => t.value, e), H$1 = (t, e) => Math.floor(t / e);
-let Y$1 = class Y {
-  constructor(e, r) {
-    u$1(this, "numItems");
-    u$1(this, "size");
-    this.numItems = e, this.size = r;
-  }
-  getNumItems() {
-    return unref(this.numItems);
-  }
-  onUpdate(e) {
-    v$1(this.numItems, e), v$1(this.size, e);
-  }
-  toOffset(e) {
-    return e * unref(this.size);
-  }
-  getTotalSize() {
-    return unref(this.numItems) * unref(this.size);
-  }
-  toIndex(e) {
-    return Math.max(
-      Math.min(
-        H$1(e, unref(this.size)),
-        unref(this.numItems) - 1
-      ),
-      0
-    );
-  }
-};
-
 const kdsDimensionComponentHeight12p5x = 200;
 const kdsDimensionComponentHeight1p5x = 24;
 const kdsDimensionComponentHeight20x = 320;
@@ -12020,7 +11826,6 @@ const _hoisted_2$q = {
   key: 0,
   class: "empty"
 };
-const VIRTUAL_ITEM_BUFFER = 16;
 const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "KdsFileExplorer",
   props: /* @__PURE__ */ mergeModels({
@@ -12046,7 +11851,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   emits: /* @__PURE__ */ mergeModels(["update:selectedItemIds", "changeDirectory", "openFile", "moveItems", "dragend", "drag", "renameFile"], ["update:activeRenamedItemId"]),
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "v6215695b": itemHeight.value + "px"
+      "v44ee6cb4": itemHeight.value + "px"
     }));
     const props = __props;
     const activeRenamedItemId = useModel(__props, "activeRenamedItemId");
@@ -12060,39 +11865,35 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     };
     const virtualItemRefs = ref([]);
     const itemBack = ref(null);
-    const table = ref(null);
-    const virtualSizeManager = new Y$1(
-      computed(() => props.items.length),
-      itemHeight.value
-    );
-    const {
-      indices: virtualIndices,
-      containerProps,
-      scrolledAreaStyles
-    } = w$1(
+    const { containerProps, wrapperProps, list } = useVirtualList(
+      computed(() => props.items),
       {
-        sizeManager: virtualSizeManager,
-        buffer: VIRTUAL_ITEM_BUFFER * itemHeight.value
-      },
-      "vertical",
-      table
-    );
-    const renderedIndices = computed(() => virtualIndices.value.toArray());
-    const renderedItems = computed(
-      () => renderedIndices.value.map((i) => props.items[i])
+        itemHeight: itemHeight.value
+      }
     );
     const scrollIntoView = (index, behavior = "smooth") => {
-      if (index === -1) {
+      const container = containerProps.ref.value;
+      if (index === -1 || !container) {
         return;
       }
-      const scrollDebounceMs = 50;
-      const debouncedScroll = debounce(() => {
-        containerProps.ref.value?.scrollTo({
-          top: virtualSizeManager.toOffset(index),
+      const rowHeight = itemHeight.value;
+      const peek = 0;
+      const rowTop = index * rowHeight;
+      const rowBottom = rowTop + rowHeight;
+      const viewTop = container.scrollTop;
+      const viewBottom = viewTop + container.clientHeight;
+      const backButton = props.isRootFolder ? 0 : itemHeight.value;
+      if (rowTop < viewTop) {
+        container.scrollTo({
+          top: Math.max(rowTop - peek, 0) + backButton,
           behavior
         });
-      }, scrollDebounceMs);
-      debouncedScroll();
+      } else if (rowBottom + itemHeight.value > viewBottom) {
+        container.scrollTo({
+          top: rowBottom + peek - container.clientHeight + backButton,
+          behavior
+        });
+      }
     };
     const multiSelection = useFocusableMultiSelection({
       singleSelectionOnly: toRef(props, "disableMultiSelect"),
@@ -12200,6 +12001,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       }
       const item = getItemElement(index);
       if (item) {
+        scrollIntoView(index, "instant");
         item.focus();
       } else {
         scrollIntoView(index, "instant");
@@ -12212,7 +12014,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       }
     };
     const handleFocusOnTable = (event) => {
-      if (table.value?.contains(event.relatedTarget)) {
+      if (containerProps.ref.value?.contains(event.relatedTarget)) {
         return;
       }
       focusIndex(focusedIndex.value, false);
@@ -12223,6 +12025,9 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     });
     const contextMenuAnchor = ref(null);
     const closeContextMenu = (focusLastItem = true) => {
+      if (!contextMenuAnchor.value) {
+        return;
+      }
       contextMenuAnchor.value = null;
       if (focusLastItem) {
         focusIndex(focusedIndex.value, false);
@@ -12297,11 +12102,10 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       if (!anchor || !props.contextMenuBuilder) {
         return [];
       }
-      const builtItems = props.contextMenuBuilder({
+      return props.contextMenuBuilder({
         selectedItems: selectedItems.value,
         anchor
       });
-      return builtItems;
     });
     const onItemClick = (item, event, index) => {
       if (item.disabled) {
@@ -12327,7 +12131,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       openFileOrEnterFolder(item);
     };
     onClickOutside(
-      table,
+      containerProps.ref,
       () => {
         if (focusedIndex.value >= 0) {
           resetSelection(focusedIndex.value);
@@ -12337,7 +12141,6 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
         ignore: [...props.clickOutsideExceptions, "#file-explorer-options-menu"]
       }
     );
-    useResizeObserver(containerProps.ref, containerProps.onScroll);
     const hasOptionsMenu = computed(() => {
       return Boolean(props.contextMenuBuilder);
     });
@@ -12368,9 +12171,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
               ref_key: "itemBack",
               ref: itemBack,
               tabindex: "-1",
-              class: normalizeClass(["file-explorer-item", {
-                "keyboard-focus": unref(keyPressedUntilMouseClick)
-              }]),
+              class: normalizeClass(["file-explorer-item", { "keyboard-focus": unref(keyPressedUntilMouseClick) }]),
               "is-dragging": unref(isDragging),
               onDragenter: _cache[0] || (_cache[0] = ($event) => unref(onDragEnter)($event, -1, true)),
               onDragleave: _cache[1] || (_cache[1] = ($event) => unref(onDragLeave)($event, -1, true)),
@@ -12380,10 +12181,8 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
               onClick: _cache[4] || (_cache[4] = ($event) => changeDirectory(".."))
             }, null, 8, ["class", "is-dragging", "onDragover"])) : createCommentVNode("", true)
           ]),
-          createElementVNode("tbody", {
-            style: normalizeStyle({ ...unref(scrolledAreaStyles), flexDirection: "column" })
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(renderedItems.value, (item, vIndex) => {
+          createElementVNode("tbody", normalizeProps(guardReactiveProps(unref(wrapperProps))), [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), ({ data: item, index }) => {
               return openBlock(), createBlock(FileExplorerItem, {
                 key: item.id,
                 ref_for: true,
@@ -12394,35 +12193,28 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
                 disabled: item.disabled ?? false,
                 item,
                 "is-dragging": unref(isDragging),
-                "is-selected": unref(isSelected)(renderedIndices.value[vIndex]),
+                "is-selected": unref(isSelected)(index),
                 "is-rename-active": item.id === activeRenamedItemId.value,
                 "blacklisted-names": blacklistedNames.value,
                 "is-dragging-enabled": !__props.disableDragging,
                 "has-options-menu": hasOptionsMenu.value,
-                onDragstart: ($event) => unref(onDragStart)($event, renderedIndices.value[vIndex]),
-                onDragenter: ($event) => unref(onDragEnter)($event, renderedIndices.value[vIndex]),
+                onDragstart: ($event) => unref(onDragStart)($event, index),
+                onDragenter: ($event) => unref(onDragEnter)($event, index),
                 onDragover: _cache[8] || (_cache[8] = ($event) => unref(onDragOver)($event)),
-                onDragleave: ($event) => unref(onDragLeave)($event, renderedIndices.value[vIndex]),
+                onDragleave: ($event) => unref(onDragLeave)($event, index),
                 onDragend: ($event) => forwardEmit("dragend", unref(onDragEnd)($event, item)),
                 onDrag: ($event) => forwardEmit("drag", unref(onDrag)($event, item)),
-                onClick: ($event) => onItemClick(item, $event, renderedIndices.value[vIndex]),
-                onContextmenu: ($event) => openContextMenuByMouse($event, item, renderedIndices.value[vIndex]),
+                onClick: ($event) => onItemClick(item, $event, index),
+                onContextmenu: ($event) => openContextMenuByMouse($event, item, index),
                 onKeydown: [
-                  withKeys(withModifiers(($event) => openContextMenuByKeyboard(item, renderedIndices.value[vIndex]), ["shift", "prevent"]), ["f10"]),
+                  withKeys(withModifiers(($event) => openContextMenuByKeyboard(item, index), ["shift", "prevent"]), ["f10"]),
                   withKeys(withModifiers(($event) => handleEnterKey($event, item), ["prevent"]), ["enter"])
                 ],
-                onDrop: ($event) => forwardEmit("moveItems", unref(onDrop)($event, renderedIndices.value[vIndex])),
+                onDrop: ($event) => forwardEmit("moveItems", unref(onDrop)($event, index)),
                 onDblclick: ($event) => openFileOrEnterFolder(item),
                 "onRename:submit": _cache[9] || (_cache[9] = ($event) => emit("renameFile", $event)),
                 "onRename:clear": _cache[10] || (_cache[10] = ($event) => activeRenamedItemId.value = null)
               }, createSlots({ _: 2 }, [
-                _ctx.$slots.itemIcon ? {
-                  name: "icon",
-                  fn: withCtx(() => [
-                    renderSlot(_ctx.$slots, "itemIcon", { item }, void 0, true)
-                  ]),
-                  key: "0"
-                } : void 0,
                 renderList(dynamicColumnSlotNames.value, (name) => {
                   return {
                     name,
@@ -12453,10 +12245,10 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
                       }, ["stop"])),
                       onDblclick: _cache[7] || (_cache[7] = withModifiers(() => {
                       }, ["stop"])),
-                      "onUpdate:modelValue": ($event) => openByOptionsMenu($event, item, renderedIndices.value[vIndex])
+                      "onUpdate:modelValue": ($event) => openByOptionsMenu($event, item, index)
                     }, null, 8, ["model-value", "size", "aria-expanded", "style", "onUpdate:modelValue"])
                   ]),
-                  key: "1"
+                  key: "0"
                 } : void 0
               ]), 1032, ["class", "disabled", "item", "is-dragging", "is-selected", "is-rename-active", "blacklisted-names", "is-dragging-enabled", "has-options-menu", "onDragstart", "onDragenter", "onDragleave", "onDragend", "onDrag", "onClick", "onContextmenu", "onKeydown", "onDrop", "onDblclick"]);
             }), 128)),
@@ -12467,7 +12259,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
                 }, __props.emptyState), null, 16, ["headline"])
               ])
             ])) : createCommentVNode("", true)
-          ], 4),
+          ], 16),
           __props.draggingAnimationMode !== "disabled" ? (openBlock(), createElementBlock("div", {
             key: 0,
             ref_key: "customPreviewContainer",
@@ -12512,7 +12304,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsFileExplorer = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-921486c1"]]);
+const KdsFileExplorer = /* @__PURE__ */ _export_sfc(_sfc_main$13, [["__scopeId", "data-v-da0e6dab"]]);
 
 const kdsFileExplorerSize = {
   SMALL: "small",