@epam/ai-dial-ui-kit 0.16.0-dev.6 → 0.16.0-dev.60

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

@@ -1,118 +1,113 @@
-import { jsxs as b, jsx as t } from "react/jsx-runtime";
-import { useState as h, useId as Q, useCallback as m, useEffect as w } from "react";
-import { ConfirmationPopup as D } from "../ConfirmationPopup/ConfirmationPopup.js";
+import { jsxs as _, jsx as a } from "react/jsx-runtime";
+import { useState as g, useId as b, useCallback as f, useEffect as Q } from "react";
+import { ConfirmationPopup as w } from "../ConfirmationPopup/ConfirmationPopup.js";
 import { ProgressBar as U } from "../../ProgressBar/ProgressBar.js";
-import { DIAL_KIT_CLASS as F } from "../../../constants/public-class-names.js";
-import { ConfirmationPopupVariant as R } from "../../../types/confirmation-popup.js";
-import { ElementSize as N } from "../../../types/size.js";
-import { TransferQueueItemStatus as l } from "../../../types/transfer-queue.js";
-import { mergeClasses as T } from "../../../utils/merge-classes.js";
-import { DEFAULT_TRANSFER_QUEUE_LABELS as O, TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS as y } from "./constants.js";
-import { TransferQueueHeader as M } from "./TransferQueueHeader.js";
-import { TransferQueueRow as j } from "./TransferQueueRow.js";
-const q = (n) => Math.round(
+import { DIAL_KIT_CLASS as D } from "../../../constants/public-class-names.js";
+import { ConfirmationPopupVariant as F } from "../../../types/confirmation-popup.js";
+import { ElementSize as R } from "../../../types/size.js";
+import { TransferQueueItemStatus as t } from "../../../types/transfer-queue.js";
+import { mergeClasses as C } from "../../../utils/merge-classes.js";
+import { DEFAULT_TRANSFER_QUEUE_LABELS as N, TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS as O } from "./constants.js";
+import { TransferQueueHeader as y } from "./TransferQueueHeader.js";
+import { TransferQueueRow as M } from "./TransferQueueRow.js";
+const j = (n) => Math.round(
   n.reduce(
-    (e, r) => e + (r.percent ?? (r.status === l.InProgress ? 0 : 100)),
+    (e, o) => e + (o.percent ?? (o.status === t.InProgress ? 0 : 100)),
     0
   ) / n.length
-), z = (n, e, r) => n && e ? r.closeConfirmDescriptionMixed : e ? r.closeConfirmDescriptionFailed : r.closeConfirmDescriptionInProgress, ee = ({
+), q = (n, e) => n ? e.closeConfirmDescriptionMixed : e.closeConfirmDescriptionInProgress, $ = ({
   title: n,
   items: e,
-  onClose: r,
-  onCancelItem: E,
-  labels: S,
-  autoCloseDelay: i = y,
-  className: v,
-  bodyClassName: x
+  onClose: o,
+  onCancelItem: h,
+  labels: T,
+  autoCloseDelay: l = O,
+  className: E,
+  bodyClassName: S
 }) => {
-  const [c, I] = h(!1), [L, f] = h(!1), p = Q(), s = { ...O, ...S }, d = e.filter(
-    (o) => o.status === l.InProgress
-  ).length, a = d > 0, g = e.filter(
-    (o) => o.status === l.Failed
-  ).length, u = g > 0, C = e.length > 0 && e.every((o) => o.status === l.Success), P = m(() => {
-    a || u ? f(!0) : r();
-  }, [a, u, r]), A = m(() => {
-    f(!1), r();
-  }, [r]), _ = m(() => {
-    I((o) => !o);
+  const [i, v] = g(!1), [x, c] = g(!1), m = b(), s = { ...N, ...T }, p = e.filter(
+    (r) => r.status === t.InProgress
+  ).length, u = p > 0, I = e.some(
+    (r) => r.status === t.Failed
+  ), d = e.length > 0 && e.every((r) => r.status === t.Success), L = f(() => {
+    u ? c(!0) : o();
+  }, [u, o]), P = f(() => {
+    c(!1), o();
+  }, [o]), A = f(() => {
+    v((r) => !r);
   }, []);
-  return w(() => {
-    if (!C || i <= 0) return;
-    const o = setTimeout(r, i);
-    return () => clearTimeout(o);
-  }, [C, i, r]), e.length === 0 ? null : /* @__PURE__ */ b(
+  return Q(() => {
+    if (!d || l <= 0) return;
+    const r = setTimeout(o, l);
+    return () => clearTimeout(r);
+  }, [d, l, o]), e.length === 0 ? null : /* @__PURE__ */ _(
     "div",
     {
       role: "status",
       "aria-live": "polite",
-      className: T(
+      className: C(
         "w-[370px] max-w-[calc(100vw-2rem)] rounded-xl bg-layer-raised shadow-md",
-        v,
-        F.transferQueue
+        E,
+        D.transferQueue
       ),
       children: [
-        /* @__PURE__ */ t(
-          M,
+        /* @__PURE__ */ a(
+          y,
           {
             title: n,
-            failedCount: g,
-            isCollapsed: c,
-            itemsId: p,
+            isCollapsed: i,
+            itemsId: m,
             labels: s,
-            onToggleCollapse: _,
-            onClose: P
+            onToggleCollapse: A,
+            onClose: L
           }
         ),
-        c && a && /*
+        i && u && /*
         * Only while collapsed: expanded, every running row already shows its
         * own spinner, so an aggregate bar would restate what is on screen.
         */
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ a(
           U,
           {
-            value: q(e),
-            size: N.Small,
+            value: j(e),
+            size: R.Small,
             "aria-label": s.queueProgressAriaLabel,
             "aria-valuetext": s.queueProgressValueText(
-              e.length - d,
+              e.length - p,
               e.length
             )
           }
         ),
-        !c && /* @__PURE__ */ t(
+        !i && /* @__PURE__ */ a(
           "div",
           {
-            id: p,
-            className: T(
+            id: m,
+            className: C(
               "flex max-h-[40vh] flex-col overflow-y-auto py-1",
-              x
+              S
             ),
-            children: e.map((o) => /* @__PURE__ */ t(
-              j,
+            children: e.map((r) => /* @__PURE__ */ a(
+              M,
               {
-                item: o,
+                item: r,
                 labels: s,
-                onCancel: E
+                onCancel: h
               },
-              o.id
+              r.id
             ))
           }
         ),
-        /* @__PURE__ */ t(
-          D,
+        /* @__PURE__ */ a(
+          w,
           {
-            open: L,
+            open: x,
             header: s.closeConfirmHeader,
-            description: z(
-              a,
-              u,
-              s
-            ),
+            description: q(I, s),
             confirmLabel: s.closeConfirmLabel,
             cancelLabel: s.closeCancelLabel,
-            variant: R.Danger,
-            onConfirm: A,
-            onClose: () => f(!1)
+            variant: F.Danger,
+            onConfirm: P,
+            onClose: () => c(!1)
           }
         )
       ]
@@ -120,5 +115,5 @@ const q = (n) => Math.round(
   );
 };
 export {
-  ee as TransferQueue
+  $ as TransferQueue
 };

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

@@ -1,71 +1,63 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { IconChevronUp as f, IconChevronDown as S, IconX as I } from "@tabler/icons-react";
-import { GhostIconButton as t } from "../IconButton/IconButtonWrappers.js";
-import { DIAL_KIT_ICON_STROKE as o } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
-import { ElementSize as m } from "../../../types/size.js";
-import { STATUS_SLOT_CLASS as c } from "./constants.js";
-const k = ({
-  title: l,
-  failedCount: n,
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { IconChevronUp as S, IconChevronDown as f, IconX as h } from "@tabler/icons-react";
+import { GhostIconButton as i } from "../IconButton/IconButtonWrappers.js";
+import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as n } from "../../../constants/icon.js";
+import { ElementSize as s } from "../../../types/size.js";
+import { STATUS_SLOT_CLASS as m } from "./constants.js";
+const y = ({
+  title: c,
   isCollapsed: r,
-  itemsId: p,
+  itemsId: l,
   labels: a,
   onToggleCollapse: d,
-  onClose: x
+  onClose: p
 }) => {
-  const h = r ? f : S;
-  return /* @__PURE__ */ i("div", { className: "mx-4 flex items-center justify-between border-b border-tertiary py-3", children: [
-    /* @__PURE__ */ i("div", { className: "flex min-w-0 items-center gap-2", children: [
-      /* @__PURE__ */ e("span", { className: "dial-small-paragraph-semi-text truncate text-primary", children: l }),
-      n > 0 && /*
-      * On the filled --bg-control-error swatch, so it takes the on-control
-      * token; --text-tertiary would contrast at under 2:1 over that fill.
-      */
-      /* @__PURE__ */ e("span", { className: "dial-small-paragraph-semi-text inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-control-error px-1 text-control-permanent", children: n })
-    ] }),
-    /* @__PURE__ */ i("div", { className: "flex shrink-0 items-center gap-1", children: [
+  const x = r ? S : f;
+  return /* @__PURE__ */ o("div", { className: "mx-4 flex items-center justify-between border-b border-tertiary py-3", children: [
+    /* @__PURE__ */ e("span", { className: "dial-small-paragraph-semi-text min-w-0 truncate text-primary", children: c }),
+    /* @__PURE__ */ o("div", { className: "flex shrink-0 items-center gap-1", children: [
       /* @__PURE__ */ e(
-        t,
+        i,
         {
           "aria-label": r ? a.expandAriaLabel : a.collapseAriaLabel,
           "aria-expanded": !r,
-          "aria-controls": p,
-          size: m.Small,
+          "aria-controls": l,
+          size: s.Small,
           icon: /* @__PURE__ */ e(
-            h,
+            x,
             {
-              size: s.SM,
-              stroke: o,
+              size: n.SM,
+              stroke: t,
               className: "text-secondary",
               "aria-hidden": !0
             }
           ),
           onClick: d,
-          className: c
+          className: m
         }
       ),
       /* @__PURE__ */ e(
-        t,
+        i,
         {
           "aria-label": a.closeAriaLabel,
-          size: m.Small,
+          size: s.Small,
           icon: /* @__PURE__ */ e(
-            I,
+            h,
             {
-              size: s.SM,
-              stroke: o,
+              size: n.SM,
+              stroke: t,
               className: "text-secondary",
               "aria-hidden": !0
             }
           ),
-          onClick: x,
-          className: c
+          onClick: p,
+          className: m
         }
       )
     ] })
   ] });
 };
 export {
-  k as TransferQueueHeader
+  y as TransferQueueHeader
 };

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/ProgressBar/ProgressBar.js

@@ -1,45 +1,50 @@
-import { jsx as i, jsxs as c } from "react/jsx-runtime";
-import { useId as y } from "react";
-import { Label as S } from "../New/Label/Label.js";
-import { ElementSize as f } from "../../types/size.js";
-import { resolveAccessibleName as B } from "../../utils/accessible-name.js";
-import { mergeClasses as h } from "../../utils/merge-classes.js";
-import { DIAL_KIT_CLASS as p } from "../../constants/public-class-names.js";
-const z = ({
-  value: s,
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { useId as M } from "react";
+import { Label as y } from "../New/Label/Label.js";
+import { ProgressBarRole as i } from "../../types/progress-bar.js";
+import { ElementSize as h } from "../../types/size.js";
+import { resolveAccessibleName as S } from "../../utils/accessible-name.js";
+import { mergeClasses as p } from "../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as u } from "../../constants/public-class-names.js";
+const C = {
+  [i.Progressbar]: "Progress",
+  [i.Meter]: "Meter"
+}, k = ({
+  value: t,
   max: l = 100,
-  size: u = f.Standard,
-  labelProps: e,
-  valueLabel: r,
-  id: b,
-  className: g,
-  "aria-label": x,
-  ...v
+  size: b = h.Standard,
+  labelProps: r,
+  valueLabel: e,
+  role: n = i.Progressbar,
+  id: x,
+  className: N,
+  "aria-label": v,
+  ...w
 }) => {
-  const N = y(), t = b ?? N, a = !!e?.label, n = a ? e?.id ?? `${t}-label` : void 0, o = l > 0 ? l : 0, w = Number.isFinite(s) ? s : 0, d = Math.min(Math.max(w, 0), o), I = o > 0 ? d / o * 100 : 0, m = /* @__PURE__ */ i(
+  const A = M(), d = x ?? A, a = !!r?.label, m = a ? r?.id ?? `${d}-label` : void 0, o = l > 0 ? l : 0, B = Number.isFinite(t) ? t : 0, c = Math.min(Math.max(B, 0), o), I = o > 0 ? c / o * 100 : 0, f = /* @__PURE__ */ s(
     "div",
     {
-      ...v,
-      id: t,
-      role: "progressbar",
-      "aria-valuenow": d,
+      ...w,
+      id: d,
+      role: n,
+      "aria-valuenow": c,
       "aria-valuemin": 0,
       "aria-valuemax": o,
-      "aria-labelledby": n,
-      "aria-label": B(
-        x,
-        a ? void 0 : "Progress"
+      "aria-labelledby": m,
+      "aria-label": S(
+        v,
+        a ? void 0 : C[n]
       ),
-      className: h(
+      className: p(
         "w-full overflow-hidden rounded-full bg-control-disable-primary",
-        u === f.Small ? "h-1" : "h-2",
-        g,
+        b === h.Small ? "h-1" : "h-2",
+        N,
         /* The track is the component's root when there is no label and no
            readout to wrap it, and the public class belongs on whichever
            element that is. */
-        !a && !r && p.progressBar
+        !a && !e && u.progressBar
       ),
-      children: /* @__PURE__ */ i(
+      children: /* @__PURE__ */ s(
         "div",
         {
           style: { width: `${I}%` },
@@ -48,23 +53,23 @@ const z = ({
       )
     }
   );
-  return !a && !r ? m : /* @__PURE__ */ c(
+  return !a && !e ? f : /* @__PURE__ */ g(
     "div",
     {
-      className: h(
+      className: p(
         "flex w-full flex-col gap-1",
-        p.progressBar
+        u.progressBar
       ),
       children: [
-        /* @__PURE__ */ c("div", { className: "flex items-baseline gap-2", children: [
-          e && /* @__PURE__ */ i(S, { ...e, id: n }),
-          r && /* @__PURE__ */ i("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: r })
+        /* @__PURE__ */ g("div", { className: "flex items-baseline gap-2", children: [
+          r && /* @__PURE__ */ s(y, { ...r, id: m }),
+          e && /* @__PURE__ */ s("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: e })
         ] }),
-        m
+        f
       ]
     }
   );
 };
 export {
-  z as ProgressBar
+  k as ProgressBar
 };