@epam/ai-dial-ui-kit 0.16.0-dev.19 → 0.16.0-dev.20

package/dist/CHANGELOG.md

@@ -22,6 +22,8 @@ Versions match the git tags on the `development` branch.
 
 ### Added
 
+- **`TransferQueue` (2.0) — determinate progress ring in a row** — an in-progress row always showed the indeterminate `Spinner`, so a host that knew how far a transfer had got could only surface it in the collapsed aggregate bar. A row whose item has a numeric `percent` now shows a 16px ring that fills with it, drawn with the spinner's tokens (secondary track, accent arc), with `role="progressbar"`, `aria-valuenow` and `labels.itemProgressAriaLabel(name)` as its name. A row without `percent` keeps the spinner, and the cancel control still takes the cell on hover and focus. The ring is symmetric and is not mirrored under `dir="rtl"`. Additive. Requested for the file-storage download queue in ai-dial-chat.
+
 - **`Dropdown` (2.0) — `searchable`, a search field above the items** — a host that wanted a menu of actions narrowed by a query had to build it around the menu: a `Search` in `menuHeader` held in place with a sticky wrapper offset against the panel's inset, a `PlainText` row standing in for "no results", its own highlighting of every label, and a height cap that restated the kit's 40px rows and 2px gaps as pixel constants. `searchable` does all of it. The field sits above the item list, which scrolls by itself under it and takes focus on open; typing narrows the items by a case-insensitive substring of a string `label` (`filterItem` replaces the rule), highlights the match through `Highlight`, keeps a whole sub-menu when its own label matches and only its matching children otherwise, and drops a group heading or divider once its group is empty. When nothing matches, `noResultsLabel` is shown and announced by a `role="status"` region that stays mounted. The query clears when the menu closes; `searchValue` / `onSearchChange` control it. `maxVisibleItems` caps the item list at a number of rows, searchable or not. Home and End move the caret in the field instead of the focus in the list. The search row carries `dial-kit-dropdown-search` (`DIAL_KIT_CLASS.dropdownSearch`). Requested from the catalog Create menu of `ai-dial-chat`.
 
 - **`BottomSheet` (2.0) — public class on the backdrop, `dial-kit-bottom-sheet-overlay`** — the panel carried `dial-kit-bottom-sheet`, but the backdrop that holds it had no stable class, so a host that embeds a sheet in its own floating panel and has to lift the whole sheet above that panel's stacking context fell back to `[class*='_backdrop_']` selectors on the hashed module class a wrapping library passes through `overlayClassName`. The backdrop now carries `dial-kit-bottom-sheet-overlay` (`DIAL_KIT_CLASS.bottomSheetOverlay`), after any `overlayClassName`. The class has no declarations, so nothing renders differently. Where the stacking context can be avoided altogether, `portalId` still renders the sheet inside the host's own element. Requested in [ai-dial-chat#9392](https://github.com/epam/ai-dial-chat/issues/9392).

package/dist/components/New/TransferQueue/TransferQueueRow.js

@@ -1,82 +1,139 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { IconX as d, IconCheck as u, IconAlertCircleFilled as f, IconAlertTriangleFilled as g } from "@tabler/icons-react";
-import { EllipsisTooltip as I } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { FileIcon as h } from "../FileIcon/FileIcon.js";
-import { GhostIconButton as S } from "../IconButton/IconButtonWrappers.js";
-import { Tooltip as x } from "../Tooltip/Tooltip.js";
-import { DIAL_KIT_ICON_STROKE as m } from "../constants/icon.js";
-import { Spinner as y } from "../../Spinner/Spinner.js";
-import { DIAL_ICON_SIZE as t } from "../../../constants/icon.js";
-import { DialItemType as N } from "../../../types/item.js";
-import { ElementSize as T } from "../../../types/size.js";
-import { TransferQueueItemStatus as s } from "../../../types/transfer-queue.js";
-import { mergeClasses as i } from "../../../utils/merge-classes.js";
-import { STATUS_SLOT_CLASS as c } from "./constants.js";
-const p = ({ message: e, isError: a }) => /* @__PURE__ */ r(x, { tooltip: e, asChild: !0, children: /* @__PURE__ */ r(
+import { IconX as g, IconCheck as I, IconAlertCircleFilled as S, IconAlertTriangleFilled as N } from "@tabler/icons-react";
+import { EllipsisTooltip as x } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { FileIcon as y } from "../FileIcon/FileIcon.js";
+import { GhostIconButton as M } from "../IconButton/IconButtonWrappers.js";
+import { Tooltip as k } from "../Tooltip/Tooltip.js";
+import { DIAL_KIT_ICON_STROKE as u } from "../constants/icon.js";
+import { Spinner as T } from "../../Spinner/Spinner.js";
+import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
+import { DialItemType as v } from "../../../types/item.js";
+import { ElementSize as C } from "../../../types/size.js";
+import { TransferQueueItemStatus as n } from "../../../types/transfer-queue.js";
+import { mergeClasses as c } from "../../../utils/merge-classes.js";
+import { STATUS_SLOT_CLASS as m } from "./constants.js";
+const h = ({ message: e, isError: a }) => /* @__PURE__ */ r(k, { tooltip: e, asChild: !0, children: /* @__PURE__ */ r(
   "span",
   {
-    className: c,
+    className: m,
     role: "img",
     "aria-label": e,
     tabIndex: 0,
     children: /* @__PURE__ */ r(
-      a ? f : g,
+      a ? S : N,
       {
-        size: t.SM,
+        size: s.SM,
         className: a ? "text-error" : "text-warning-icon",
         "aria-hidden": !0
       }
     )
   }
-) }), j = ({
+) }), p = 2, d = (s.SM - p) / 2, f = 2 * Math.PI * d, L = ({ percent: e, label: a, className: o }) => {
+  const i = Math.min(100, Math.max(0, Math.round(e))), t = s.SM / 2;
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      role: "progressbar",
+      "aria-label": a,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": i,
+      className: c("flex", o),
+      children: /* @__PURE__ */ l(
+        "svg",
+        {
+          width: s.SM,
+          height: s.SM,
+          viewBox: `0 0 ${s.SM} ${s.SM}`,
+          className: "-rotate-90",
+          "aria-hidden": !0,
+          children: [
+            /* @__PURE__ */ r(
+              "circle",
+              {
+                cx: t,
+                cy: t,
+                r: d,
+                fill: "none",
+                strokeWidth: p,
+                className: "stroke-(--stroke-secondary,#d1dbea)"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "circle",
+              {
+                cx: t,
+                cy: t,
+                r: d,
+                fill: "none",
+                strokeWidth: p,
+                strokeLinecap: "round",
+                strokeDasharray: f,
+                strokeDashoffset: f * (1 - i / 100),
+                className: "stroke-(--stroke-accent,#1d4ed8) transition-[stroke-dashoffset] duration-200 motion-reduce:transition-none"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, U = ({
   item: e,
   labels: a,
   onCancel: o
 }) => {
-  const n = e.status === s.Canceled;
+  const i = e.status === n.Canceled, t = c(
+    "pointer-events-none col-start-1 row-start-1 transition-opacity",
+    o && "group-focus-within:opacity-0 group-hover:opacity-0"
+  );
   return /* @__PURE__ */ l("div", { className: "group flex items-center gap-2 px-4 py-2", children: [
     /* @__PURE__ */ r(
-      h,
+      y,
       {
-        type: N.File,
+        type: v.File,
         name: e.name,
-        size: t.MD,
-        className: i(n && "opacity-50"),
+        size: s.MD,
+        className: c(i && "opacity-50"),
         decorative: !0
       }
     ),
     /* @__PURE__ */ r(
-      I,
+      x,
       {
         text: e.name,
-        className: i(
+        className: c(
           "dial-small-text",
-          n ? "text-secondary" : "text-primary"
+          i ? "text-secondary" : "text-primary"
         )
       }
     ),
-    e.status === s.InProgress && /* @__PURE__ */ l("div", { className: i(c, "grid"), children: [
-      /* @__PURE__ */ r(
-        y,
+    e.status === n.InProgress && /* @__PURE__ */ l("div", { className: c(m, "grid"), children: [
+      typeof e.percent == "number" ? /* @__PURE__ */ r(
+        L,
         {
-          size: t.SM,
+          percent: e.percent,
+          label: a.itemProgressAriaLabel(e.name),
+          className: t
+        }
+      ) : /* @__PURE__ */ r(
+        T,
+        {
+          size: s.SM,
           ariaLabel: a.itemProgressAriaLabel(e.name),
-          className: i(
-            "pointer-events-none col-start-1 row-start-1 transition-opacity",
-            o && "group-focus-within:opacity-0 group-hover:opacity-0"
-          )
+          className: t
         }
       ),
       o && /* @__PURE__ */ r(
-        S,
+        M,
         {
           "aria-label": a.cancelItemAriaLabel(e.name),
-          size: T.Small,
+          size: C.Small,
           icon: /* @__PURE__ */ r(
-            d,
+            g,
             {
-              size: t.SM,
-              stroke: m,
+              size: s.SM,
+              stroke: u,
               className: "text-secondary",
               "aria-hidden": !0
             }
@@ -86,34 +143,34 @@ const p = ({ message: e, isError: a }) => /* @__PURE__ */ r(x, { tooltip: e, asC
         }
       )
     ] }),
-    e.status === s.Success && /* @__PURE__ */ r(
+    e.status === n.Success && /* @__PURE__ */ r(
       "span",
       {
-        className: c,
+        className: m,
         role: "img",
         "aria-label": a.successLabel,
         children: /* @__PURE__ */ r(
-          u,
+          I,
           {
-            size: t.SM,
-            stroke: m,
+            size: s.SM,
+            stroke: u,
             className: "text-accent",
             "aria-hidden": !0
           }
         )
       }
     ),
-    e.status === s.Warning && /* @__PURE__ */ r(
-      p,
+    e.status === n.Warning && /* @__PURE__ */ r(
+      h,
       {
         message: e.message || a.warningMessage,
         isError: !1
       }
     ),
-    e.status === s.Failed && /* @__PURE__ */ r(p, { message: e.message || a.failedMessage, isError: !0 }),
-    n && /* @__PURE__ */ r("span", { className: "dial-small-text shrink-0 text-secondary", children: a.canceledLabel })
+    e.status === n.Failed && /* @__PURE__ */ r(h, { message: e.message || a.failedMessage, isError: !0 }),
+    i && /* @__PURE__ */ r("span", { className: "dial-small-text shrink-0 text-secondary", children: a.canceledLabel })
   ] });
 };
 export {
-  j as TransferQueueRow
+  U as TransferQueueRow
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.19",
-  "generatedAt": "2026-10-20T08:49:00.539Z",
+  "version": "0.16.0-dev.20",
+  "generatedAt": "2026-10-20T10:24:28.217Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",