@knime/product-features 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @knime/product-features
 
+## 1.2.0
+
+### Minor Changes
+
+- 5e6fc06: KDS-582: Add NodePreview component, add stories for PortIcon
+
+### Patch Changes
+
+- Updated dependencies [b698be1]
+- Updated dependencies [7d7918f]
+- Updated dependencies [d6af8e5]
+- Updated dependencies [d6af8e5]
+- Updated dependencies [d6af8e5]
+- Updated dependencies [c2d135a]
+- Updated dependencies [2779db1]
+- Updated dependencies [e774645]
+- Updated dependencies [c2d135a]
+  - @knime/kds-styles@2.0.0
+  - @knime/kds-components@2.0.0
+  - @knime/utils@1.12.0
+
+## 1.1.3
+
+### Patch Changes
+
+- bc85a76: Migrate native `title` attribute usages to the accessible `v-kds-tooltip` directive across product-feature components.
+- Updated dependencies [bc85a76]
+  - @knime/kds-components@1.2.0
+  - @knime/kds-styles@1.2.0
+
 ## 1.1.2
 
 ### Patch Changes

package/dist/dataTransfer.css

@@ -1,12 +1,12 @@
 
 .collapsible-panel {
-&[data-v-3fdfcc1c] {
+&[data-v-59d71b0b] {
   background: var(--kds-color-surface-default);
   border-radius: var(--kds-spacing-container-0-25x);
   box-shadow: var(--kds-elevation-level-3);
 }
 & .title-bar {
-&[data-v-3fdfcc1c] {
+&[data-v-59d71b0b] {
     display: flex;
     align-items: center;
     height: var(--kds-dimension-component-height-2-5x);
@@ -15,7 +15,7 @@
     font: var(--kds-font-base-title-small-strong);
     color: var(--kds-color-text-and-icon-neutral);
 }
-& .actions[data-v-3fdfcc1c] {
+& .actions[data-v-59d71b0b] {
       display: flex;
       gap: var(--kds-spacing-container-0-25x);
       align-items: center;
@@ -23,37 +23,37 @@
 }
 }
 &:not(.collapsed) {
-& .title-bar[data-v-3fdfcc1c] {
+& .title-bar[data-v-59d71b0b] {
       border-bottom: var(--kds-border-base-subtle);
 }
 }
 }
-.panel-content[data-v-3fdfcc1c] {
+.panel-content[data-v-59d71b0b] {
   overflow: hidden;
 }
-.expand-enter-active[data-v-3fdfcc1c],
-.expand-leave-active[data-v-3fdfcc1c] {
+.expand-enter-active[data-v-59d71b0b],
+.expand-leave-active[data-v-59d71b0b] {
   display: grid;
   overflow: hidden;
   transition:
     grid-template-rows 0.2s ease-in-out,
     opacity 0.2s ease-in-out;
 }
-.expand-enter-from[data-v-3fdfcc1c],
-.expand-leave-to[data-v-3fdfcc1c] {
+.expand-enter-from[data-v-59d71b0b],
+.expand-leave-to[data-v-59d71b0b] {
   grid-template-rows: 0fr;
   opacity: 0;
 }
-.expand-enter-to[data-v-3fdfcc1c],
-.expand-leave-from[data-v-3fdfcc1c] {
+.expand-enter-to[data-v-59d71b0b],
+.expand-leave-from[data-v-59d71b0b] {
   grid-template-rows: 1fr;
   opacity: 1;
 }
-.panel-content[data-v-3fdfcc1c] >  * {
+.panel-content[data-v-59d71b0b] >  * {
   min-height: 0;
 }
 
-.progress-wrapper[data-v-80e5d197] {
+.progress-wrapper[data-v-902ce8bb] {
   --base-padding: var(--kds-spacing-container-1x);
   --progress-bar-height: var(--kds-dimension-component-height-0-25x);
   --progress-bar-distance: var(--kds-spacing-container-0-25x);
@@ -65,7 +65,7 @@
   padding: var(--base-padding);
 }
 .progress-item {
-&[data-v-80e5d197] {
+&[data-v-902ce8bb] {
   display: flex;
   align-items: center;
   width: 100%;
@@ -73,24 +73,24 @@
 
   /* add extra margin to prevent content jump when a progress bars appears/disappears */
   }
-&.padded[data-v-80e5d197] {
+&.padded[data-v-902ce8bb] {
     margin-bottom: calc(
       var(--progress-bar-height) + var(--progress-bar-distance)
     );
 }
 }
-.progress[data-v-80e5d197] {
+.progress[data-v-902ce8bb] {
   min-height: var(--progress-bar-height);
 }
 .item-info {
-&[data-v-80e5d197] {
+&[data-v-902ce8bb] {
   display: flex;
   flex-grow: 1;
   gap: var(--kds-spacing-container-0-25x);
   overflow: hidden;
   }
 & .item-name {
-&[data-v-80e5d197] {
+&[data-v-902ce8bb] {
     display: flex;
     flex-grow: 1;
     flex-direction: column;
@@ -99,19 +99,19 @@
     overflow: hidden;
     color: var(--kds-color-text-and-icon-neutral);
     }
-& .title[data-v-80e5d197] {
+& .title[data-v-902ce8bb] {
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       font: var(--kds-font-base-interactive-small);
       white-space: nowrap;
 }
-& .subtitle[data-v-80e5d197] {
+& .subtitle[data-v-902ce8bb] {
       font: var(--kds-font-base-subtext-small);
 }
 }
 }
-.item-action[data-v-80e5d197] {
+.item-action[data-v-902ce8bb] {
   display: flex;
   flex-shrink: 0;
   gap: var(--kds-spacing-container-0-25x);
@@ -128,15 +128,15 @@
 }
 }
 
-.upload-panel[data-v-3c6568f7] {
+.upload-panel[data-v-15b3eb7d] {
   width: var(--kds-dimension-component-width-20x);
   max-width: var(--kds-dimension-component-width-20x);
 }
-.upload-panel-content[data-v-3c6568f7] {
+.upload-panel-content[data-v-15b3eb7d] {
   max-height: var(--kds-dimension-component-height-20x);
 }
 .skeleton-container {
-&[data-v-3c6568f7] {
+&[data-v-15b3eb7d] {
   display: grid;
   grid-template-columns: min-content 1fr;
   gap: var(--kds-spacing-container-0-25x);
@@ -145,17 +145,17 @@
   padding: 0 var(--kds-spacing-container-1x);
   border-top: var(--kds-border-base-subtle);
   }
-& .skeleton-text-content[data-v-3c6568f7] {
+& .skeleton-text-content[data-v-15b3eb7d] {
     display: flex;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-25x);
 }
 }
 
-.download-panel[data-v-cbf5d3c0] {
+.download-panel[data-v-53e10d80] {
   width: var(--kds-dimension-component-width-20x);
   max-width: var(--kds-dimension-component-width-20x);
 }
-.download-panel-content[data-v-cbf5d3c0] {
+.download-panel-content[data-v-53e10d80] {
   max-height: var(--kds-dimension-component-height-20x);
 }

package/dist/dataTransfer.js

@@ -1,7 +1,7 @@
 import { computed, defineComponent, useModel, useId, openBlock, createElementBlock, normalizeClass, createElementVNode, createTextVNode, toDisplayString, createVNode, unref, normalizeStyle, createBlock, createCommentVNode, Transition, withCtx, withDirectives, renderSlot, vShow, mergeModels, Fragment, renderList, watch, ref, reactive, readonly } from 'vue';
-import { KdsButton, KdsIcon, KdsBadge, KdsProgressBar, KdsLoadingSkeleton } from '@knime/kds-components';
+import { KdsButton, KdsIcon, vKdsTooltip, KdsBadge, KdsProgressBar, KdsLoadingSkeleton } from '@knime/kds-components';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-pcqpp-6-.js';
-import { f as formatFileSize } from './format-ra_vlnN7.js';
+import { f as formatFileSize, g as getFileExtension, k as knimeFileFormats, i as index, a as getFileMimeType, s as sleep } from './index-B3ql6hun.js';
 import { rfcErrors } from './rfcErrors.js';
 import { ofetch, FetchError } from 'ofetch';
 
@@ -26,7 +26,7 @@ const _hoisted_3$1 = ["id"];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "CollapsiblePanel",
   props: /* @__PURE__ */ mergeModels({
-    title: {},
+    headline: {},
     canBeDismissed: { type: Boolean, default: false }
   }, {
     "modelValue": { type: Boolean, ...{ default: true } },
@@ -46,7 +46,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["collapsible-panel", { collapsed: !modelValue.value }])
       }, [
         createElementVNode("div", _hoisted_1$4, [
-          createTextVNode(toDisplayString(__props.title) + " ", 1),
+          createTextVNode(toDisplayString(__props.headline) + " ", 1),
           createElementVNode("div", _hoisted_2$2, [
             createVNode(unref(KdsButton), {
               size: "small",
@@ -86,12 +86,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const CollapsiblePanel = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-3fdfcc1c"]]);
+const CollapsiblePanel = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-59d71b0b"]]);
 
 const _hoisted_1$3 = { class: "progress-wrapper" };
 const _hoisted_2$1 = { class: "item-info" };
 const _hoisted_3 = { class: "item-name" };
-const _hoisted_4 = ["title"];
+const _hoisted_4 = { class: "title" };
 const _hoisted_5 = {
   key: 0,
   class: "subtitle"
@@ -105,7 +105,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "ProgressItem",
   props: {
     id: {},
-    title: {},
+    headline: {},
     icon: {},
     actions: {},
     subtitle: {},
@@ -121,10 +121,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           createElementVNode("div", _hoisted_2$1, [
             createVNode(unref(KdsIcon), { name: __props.icon }, null, 8, ["name"]),
             createElementVNode("div", _hoisted_3, [
-              createElementVNode("div", {
-                class: "title",
-                title: __props.title
-              }, toDisplayString(__props.title), 9, _hoisted_4),
+              withDirectives((openBlock(), createElementBlock("div", _hoisted_4, [
+                createTextVNode(toDisplayString(__props.headline), 1)
+              ])), [
+                [unref(vKdsTooltip), __props.headline, "truncated"]
+              ]),
               __props.subtitle ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)
             ])
           ]),
@@ -158,7 +159,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const ProgressItem = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-80e5d197"]]);
+const ProgressItem = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-902ce8bb"]]);
 
 const _sfc_main$4 = {  };
 
@@ -174,114 +175,6 @@ function _sfc_render(_ctx, _cache) {
 }
 const ProgressList = /*#__PURE__*/_export_sfc(_sfc_main$4, [['render',_sfc_render],['__scopeId',"data-v-8f14a3cb"]]);
 
-class AbortError extends Error {
-}
-const createAbortablePromise = () => {
-  const abortController = new AbortController();
-  const runAbortablePromise = (request) => {
-    return new Promise((resolve, reject) => {
-      const abortListener = ({ target }) => {
-        abortController.signal.removeEventListener("abort", abortListener);
-        const reason = target.reason;
-        reject(reason instanceof AbortError ? reason : new AbortError(reason));
-      };
-      request().then(resolve).catch((error) => {
-        if (error instanceof AbortError) {
-          return;
-        }
-        reject(error);
-      });
-      abortController.signal.addEventListener("abort", abortListener);
-    });
-  };
-  return { abortController, runAbortablePromise };
-};
-
-function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-const DEFAULT_RETRY_DELAY_MS$2 = 0;
-const DEFAULT_RETRY_COUNT$1 = 5;
-async function retryPromise({
-  fn,
-  retryCount = DEFAULT_RETRY_COUNT$1,
-  retryDelayMS = DEFAULT_RETRY_DELAY_MS$2,
-  excludeError
-}) {
-  try {
-    return await fn();
-  } catch (error) {
-    if (excludeError?.(error)) {
-      throw error;
-    }
-    if (retryCount > 0) {
-      await sleep(retryDelayMS);
-      return await retryPromise({
-        fn,
-        retryCount: retryCount - 1,
-        retryDelayMS,
-        excludeError
-      });
-    }
-    throw error;
-  }
-}
-
-const getFileExtension = (nameOrPath) => {
-  const basename = nameOrPath.split(/[\\/]/).pop() ?? "";
-  const parts = basename.split(".");
-  if (basename === "" || parts.length === 1) {
-    return "";
-  }
-  return parts.at(-1) ?? "";
-};
-const KNAR = Object.freeze({
-  extension: "knar",
-  mimeType: "application/vnd.knime.workflow-group+zip",
-  matches(file) {
-    const extension = getFileExtension(file.name);
-    return extension === this.extension;
-  }
-});
-const KNWF = Object.freeze({
-  extension: "knwf",
-  mimeType: "application/vnd.knime.workflow+zip",
-  matches(file) {
-    const extension = getFileExtension(file.name);
-    return extension === this.extension;
-  },
-  /**
-   * Gets the name of a .knwf file without the extension. If the file is not
-   * matched as a .knwf file then this function will return the default value,
-   * which is empty string ("") if param is not provided
-   */
-  getNameOrDefault(file, defaultValue = "") {
-    if (!this.matches(file)) {
-      return defaultValue;
-    }
-    return file.name.replace(`.${this.extension}`, "");
-  }
-});
-const knimeFileFormats = { KNWF };
-const getFileMimeType = (file) => {
-  const DEFAULT_MIMETYPE = "application/octet-stream";
-  const extension = getFileExtension(file.name);
-  if (!extension) {
-    return DEFAULT_MIMETYPE;
-  }
-  if (KNWF.matches(file)) {
-    return KNWF.mimeType;
-  }
-  if (KNAR.matches(file)) {
-    return KNAR.mimeType;
-  }
-  if (!file.type) {
-    return DEFAULT_MIMETYPE;
-  }
-  return file.type;
-};
-
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "UploadProgressPanelItem",
   props: {
@@ -342,13 +235,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ProgressItem), {
         id: __props.item.id,
-        title: __props.item.name,
+        headline: __props.item.name,
         subtitle: subtitle.value,
         icon: itemIcon.value,
         progress: hasProgress(__props.item) ? __props.item.progress : void 0,
         badge: badge.value,
         actions: actions.value
-      }, null, 8, ["id", "title", "subtitle", "icon", "progress", "badge", "actions"]);
+      }, null, 8, ["id", "headline", "subtitle", "icon", "progress", "badge", "actions"]);
     };
   }
 });
@@ -374,7 +267,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const uploadedItems = computed(
       () => __props.items.filter(({ status }) => status === "complete").length
     );
-    const title = computed(() => {
+    const headline = computed(() => {
       const suffix = `file${totalItems.value > 1 ? "s" : ""}`;
       return `Uploaded ${uploadedItems.value} of ${totalItems.value} ${suffix}`;
     });
@@ -387,7 +280,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(CollapsiblePanel), {
         modelValue: expanded.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expanded.value = $event),
-        title: title.value,
+        headline: headline.value,
         class: "upload-panel",
         "can-be-dismissed": !hasSomeItemInProgress.value,
         onClose: _cache[1] || (_cache[1] = ($event) => emit("close"))
@@ -422,12 +315,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           ])
         ]),
         _: 1
-      }, 8, ["modelValue", "title", "can-be-dismissed"]);
+      }, 8, ["modelValue", "headline", "can-be-dismissed"]);
     };
   }
 });
 
-const UploadProgressPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-3c6568f7"]]);
+const UploadProgressPanel = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-15b3eb7d"]]);
 
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "DownloadProgressPanelItem",
@@ -478,10 +371,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(ProgressItem), {
         id: __props.item.downloadId,
         icon: "file",
-        title: __props.item.name,
+        headline: __props.item.name,
         badge: badge.value,
         actions: actions.value
-      }, null, 8, ["id", "title", "badge", "actions"]);
+      }, null, 8, ["id", "headline", "badge", "actions"]);
     };
   }
 });
@@ -504,7 +397,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const totalDownloadedItems = computed(
       () => props.items.filter(({ status }) => status === "READY").length
     );
-    const title = computed(() => {
+    const headline = computed(() => {
       const suffix = `file${totalItems.value > 1 ? "s" : ""}`;
       return `Downloaded ${totalDownloadedItems.value} of ${totalItems.value} ${suffix}`;
     });
@@ -523,7 +416,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(CollapsiblePanel), {
         modelValue: expanded.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => expanded.value = $event),
-        title: title.value,
+        headline: headline.value,
         class: "download-panel",
         "can-be-dismissed": !hasItemsInProgress.value,
         onClose: _cache[1] || (_cache[1] = ($event) => emit("close"))
@@ -546,12 +439,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ]),
         _: 1
-      }, 8, ["modelValue", "title", "can-be-dismissed"]);
+      }, 8, ["modelValue", "headline", "can-be-dismissed"]);
     };
   }
 });
 
-const DownloadProgressPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cbf5d3c0"]]);
+const DownloadProgressPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-53e10d80"]]);
 
 //#region src/predicate/isPlainObject.ts
 /**
@@ -760,7 +653,7 @@ const createUploadManager = (config) => {
       return;
     }
     currentState.abortController.abort(
-      new AbortError(
+      new index.AbortError(
         `Upload (${currentState.uploadId}) for file "${currentState.file.name}" aborted. Reason: "${reason}"`
       )
     );
@@ -790,7 +683,7 @@ const createUploadManager = (config) => {
     const totalChunks = getTotalFileParts(file);
     const totalBytes = file.size;
     const completedPartIds = {};
-    const { abortController, runAbortablePromise } = createAbortablePromise();
+    const { abortController, runAbortablePromise } = index.createAbortablePromise();
     uploadStateMap.set(uploadId, {
       uploadId,
       file,
@@ -809,7 +702,7 @@ const createUploadManager = (config) => {
       const end = Math.min(start + CHUNK_SIZE, file.size);
       const chunk = file.slice(start, end);
       try {
-        const { method, url } = await retryPromise({
+        const { method, url } = await index.retryPromise({
           fn: () => getUploadFilePartUrl(uploadId, chunkIndex + 1),
           retryCount: DEFAULT_RETRY_COUNT,
           retryDelayMS: DEFAULT_RETRY_DELAY_MS$1
@@ -822,7 +715,7 @@ const createUploadManager = (config) => {
           config.onProgress?.(uploadId, progress);
         };
         const filePartResponse = await runAbortablePromise(
-          () => retryPromise({
+          () => index.retryPromise({
             fn: () => uploadChunkWithProgress({
               method,
               url,
@@ -843,7 +736,7 @@ const createUploadManager = (config) => {
           completedChunkCount: uploadStateMap.get(uploadId).completedChunkCount + 1
         });
       } catch (error) {
-        if (error instanceof AbortError) {
+        if (error instanceof index.AbortError) {
           consola.info("Aborted::", error);
           return;
         }
@@ -1047,7 +940,7 @@ const useFileUpload = (options = {}) => {
   useUploadManagerResult = useUploadManager({
     resolveFilePartUploadURL,
     onFileUploadComplete: ({ uploadId, filePartIds, parentId, name }) => {
-      retryPromise({ fn: () => completeUpload(uploadId, filePartIds) }).then(() => {
+      index.retryPromise({ fn: () => completeUpload(uploadId, filePartIds) }).then(() => {
         options.onFileUploadComplete?.({
           uploadId,
           filePartIds,
@@ -1120,7 +1013,7 @@ const useFileUpload = (options = {}) => {
           return [];
         }
         prepareQueueSize.value += enqueueableFiles.length;
-        const uploadPayload = await retryPromise({
+        const uploadPayload = await index.retryPromise({
           fn: () => prepareUpload(parentId, enqueueableFiles),
           excludeError: (error) => (
             // eslint-disable-next-line no-magic-numbers