@epam/ai-dial-ui-kit 0.16.0-dev.3 → 0.16.0-dev.33

package/dist/components/New/Select/constants.js

@@ -1,53 +1,44 @@
-import { jsx as s } from "react/jsx-runtime";
-import { IconSearch as a, IconX as r, IconChevronRight as c } from "@tabler/icons-react";
-import l from "../../../assets/icons/no-data.svg.js";
-import { overlayItemClassName as n, overlayListClassName as i, overlayGap as m, overlaySubMenuListClassName as h } from "../constants/overlay.js";
-import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as e } from "../../../constants/icon.js";
-import { mergeClasses as o } from "../../../utils/merge-classes.js";
-const N = o("w-full flex flex-col"), v = n, y = "!max-w-[var(--reference-width)]", x = o(
+import { jsx as e } from "react/jsx-runtime";
+import { IconSearch as a, IconX as r, IconChevronRight as l } from "@tabler/icons-react";
+import { overlayItemClassName as c, overlayListClassName as n, overlayGap as i, overlaySubMenuListClassName as m } from "../constants/overlay.js";
+import { DIAL_KIT_ICON_STROKE as s } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as o } from "../../../constants/icon.js";
+import { mergeClasses as t } from "../../../utils/merge-classes.js";
+const S = t("w-full flex flex-col"), d = c, N = "!max-w-[var(--reference-width)]", v = t(
   "max-h-[344px] overflow-y-auto py-1",
-  i
-), L = m, M = h, O = /* @__PURE__ */ s(
-  c,
+  n
+), x = i, y = m, M = /* @__PURE__ */ e(
+  l,
   {
-    size: e.SM,
-    stroke: t,
+    size: o.SM,
+    stroke: s,
     "aria-hidden": "true"
   }
-), w = "text-secondary transition-transform", _ = 8, b = /* @__PURE__ */ s(
+), O = "text-secondary transition-transform", L = 8, _ = /* @__PURE__ */ e(
   a,
   {
-    size: e.MD,
-    stroke: t,
+    size: o.MD,
+    stroke: s,
     "aria-hidden": "true"
   }
-), g = /* @__PURE__ */ s(
+), b = /* @__PURE__ */ e(
   r,
   {
-    size: e.SM,
-    stroke: t,
-    "aria-hidden": "true"
-  }
-), D = /* @__PURE__ */ s(
-  l,
-  {
-    width: e.LG,
-    height: e.LG,
+    size: o.SM,
+    stroke: s,
     "aria-hidden": "true"
   }
 );
 export {
-  g as selectCloseIcon,
-  D as selectEmptyStateIcon,
-  w as selectFieldIconClassName,
-  y as selectListWidthClassName,
-  v as selectOptionBaseClassName,
-  x as selectOptionsScrollClassName,
-  N as selectOverlayBaseClassName,
-  b as selectSearchIcon,
-  _ as selectSearchThreshold,
-  O as selectSubMenuCaretIcon,
-  M as selectSubMenuClassName,
-  L as selectSubMenuGap
+  b as selectCloseIcon,
+  O as selectFieldIconClassName,
+  N as selectListWidthClassName,
+  d as selectOptionBaseClassName,
+  v as selectOptionsScrollClassName,
+  S as selectOverlayBaseClassName,
+  _ as selectSearchIcon,
+  L as selectSearchThreshold,
+  M as selectSubMenuCaretIcon,
+  y as selectSubMenuClassName,
+  x as selectSubMenuGap
 };

package/dist/components/New/SharedEntityIndicator/SharedEntityIndicator.js

@@ -15,7 +15,7 @@ const S = ({
     role: "img",
     "aria-label": o,
     className: n(
-      "flex shrink-0 rounded-sm bg-layer-raised text-accent",
+      "flex shrink-0 rounded-xs bg-layer-raised text-accent",
       i,
       s.sharedEntityIndicator
     ),

package/dist/components/New/SideDrawer/SideDrawer.js

@@ -68,7 +68,7 @@ const ne = ({
               inert: !t,
               style: w,
               className: r(
-                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-none",
+                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-hidden",
                 "desktop:w-[540px] desktop:rounded-s-xl desktop:border-s desktop:border-secondary",
                 "transition-transform duration-300 motion-reduce:transition-none",
                 t ? "translate-x-0" : "translate-x-full rtl:-translate-x-full",

package/dist/components/New/StateScreen/StateScreen.js

@@ -0,0 +1,61 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useId as o } from "react";
+import { mergeClasses as t } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as x } from "../../../constants/public-class-names.js";
+const h = ({
+  title: i,
+  description: r,
+  icon: l,
+  action: s,
+  className: m,
+  titleClassName: n,
+  descriptionClassName: c
+}) => {
+  const a = o();
+  return /* @__PURE__ */ d(
+    "section",
+    {
+      "aria-labelledby": a,
+      className: t(
+        "flex size-full flex-col items-center justify-center px-4 text-center",
+        m,
+        x.stateScreen
+      ),
+      children: [
+        l != null && /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "mb-4 flex size-14 items-center justify-center rounded-full border border-secondary text-secondary",
+            children: l
+          }
+        ),
+        /* @__PURE__ */ e(
+          "h1",
+          {
+            id: a,
+            className: t(
+              "dial-body-semi-text text-primary",
+              n
+            ),
+            children: i
+          }
+        ),
+        r != null && /* @__PURE__ */ e(
+          "p",
+          {
+            className: t(
+              "dial-small-text mt-2 text-secondary",
+              c
+            ),
+            children: r
+          }
+        ),
+        s != null && /* @__PURE__ */ e("div", { className: "mt-4", children: s })
+      ]
+    }
+  );
+};
+export {
+  h as StateScreen
+};

package/dist/components/New/Switch/Switch.js

@@ -9,15 +9,15 @@ const C = ({
   id: d,
   labelProps: o,
   isOn: t = !1,
-  disabled: l,
+  disabled: c,
   onChange: a,
-  caption: c,
+  caption: s,
   className: u,
   ...i
 }) => {
-  const p = b(), s = d ?? p, n = c ? `${s}-caption` : void 0, f = g(
-    (h) => {
-      a?.(h.target.checked);
+  const p = b(), l = d ?? p, n = s ? `${l}-caption` : void 0, h = g(
+    (f) => {
+      a?.(f.target.checked);
     },
     [a]
   );
@@ -26,7 +26,9 @@ const C = ({
       "div",
       {
         className: r(
-          "flex items-center gap-2",
+          // Named group: the control shows its hover state while either of its
+          // two <label>s (the control or the text) is hovered.
+          "group/choice flex items-center gap-2",
           u,
           N.switch
         ),
@@ -37,11 +39,11 @@ const C = ({
               ...i,
               type: "checkbox",
               role: "switch",
-              id: s,
+              id: l,
               checked: t,
               "aria-checked": t,
-              disabled: l,
-              onChange: f,
+              disabled: c,
+              onChange: h,
               "aria-label": y(
                 typeof o?.label != "string" ? i["aria-label"] : void 0
               ),
@@ -52,14 +54,14 @@ const C = ({
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: s,
+              htmlFor: l,
               className: r(
                 "flex h-[18px] w-[36px] shrink-0 items-center rounded-full p-0.5 transition-colors duration-200",
                 "peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus",
                 t ? "justify-end" : "justify-start",
-                l ? "cursor-not-allowed bg-control-disable-primary" : r(
+                c ? "cursor-not-allowed bg-control-disable-primary" : r(
                   "cursor-pointer",
-                  t ? "bg-control-accent hover:bg-control-accent-hover" : "bg-control-neutral-default hover:bg-control-neutral-hover-strong"
+                  t ? "bg-control-accent group-has-[label:hover]/choice:bg-control-accent-hover" : "bg-control-neutral-default group-has-[label:hover]/choice:bg-control-neutral-hover-strong"
                 )
               ),
               children: /* @__PURE__ */ e(
@@ -67,7 +69,7 @@ const C = ({
                 {
                   className: r(
                     "size-3.5 shrink-0 rounded-full",
-                    l ? "bg-control-disable-secondary" : "bg-control-neutral"
+                    c ? "bg-control-disable-secondary" : "bg-control-neutral"
                   )
                 }
               )
@@ -78,12 +80,12 @@ const C = ({
             {
               size: x.Standard,
               ...o,
-              htmlFor: s,
+              htmlFor: l,
               className: r(
                 // `Label` defaults to the secondary colour; the switch's own label
                 // has always been primary while the control is usable.
                 "py-[1px]",
-                l ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+                c ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
                 o.className
               )
             }
@@ -91,12 +93,12 @@ const C = ({
         ]
       }
     ),
-    c && /* @__PURE__ */ e(
+    s && /* @__PURE__ */ e(
       "span",
       {
         id: n,
         className: "dial-tiny-text text-secondary ml-[44px]",
-        children: c
+        children: s
       }
     )
   ] });

package/dist/components/New/Textarea/Textarea.js

@@ -1,56 +1,60 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import "react";
-import { mergeClasses as n } from "../../../utils/merge-classes.js";
-import { ErrorText as v, CaptionText as N } from "../CaptionText/CaptionText.js";
-import { Label as b } from "../Label/Label.js";
-var C = /* @__PURE__ */ ((e) => (e.None = "none", e.Both = "both", e.Horizontal = "horizontal", e.Vertical = "vertical", e))(C || {});
-const s = {
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { useId as I } from "react";
+import { mergeClasses as m } from "../../../utils/merge-classes.js";
+import { ErrorText as k, CaptionText as z } from "../CaptionText/CaptionText.js";
+import { Label as j } from "../Label/Label.js";
+var B = /* @__PURE__ */ ((e) => (e.None = "none", e.Both = "both", e.Horizontal = "horizontal", e.Vertical = "vertical", e))(B || {});
+const f = {
   none: "resize-none",
   both: "resize",
   horizontal: "resize-x",
   vertical: "resize-y"
-}, g = (e) => typeof e == "boolean" ? s[
+}, $ = (e) => typeof e == "boolean" ? f[
   e ? "both" : "none"
   /* None */
-] : s[e], E = ({
+] : f[e], V = ({
   className: e = "",
-  value: m,
-  onChange: c,
-  error: r,
-  containerClassName: x,
-  resize: p = !1,
-  labelProps: a,
-  caption: f,
-  id: o,
-  invalid: d,
+  value: x,
+  onChange: p,
+  error: t,
+  containerClassName: v,
+  resize: u = !1,
+  labelProps: o,
+  caption: r,
+  id: b,
+  invalid: n,
+  "aria-describedby": h,
+  "aria-invalid": N,
   ...l
 }) => {
-  const h = n(
+  const g = I(), i = b ?? g, s = t ? `${i}-error` : void 0, d = !t && r ? `${i}-caption` : void 0, C = m(
     "dial-kit-textarea dial-kit-input px-3 py-2",
-    d && "dial-kit-input-error",
+    n && "dial-kit-input-error",
     l.disabled && "dial-kit-input-disable",
-    g(p),
+    $(u),
     e
   );
-  return /* @__PURE__ */ i("div", { className: n("flex flex-col gap-2", x), children: [
-    a && /* @__PURE__ */ t(b, { ...a, htmlFor: o }),
-    /* @__PURE__ */ i("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ t(
+  return /* @__PURE__ */ c("div", { className: m("flex flex-col gap-2", v), children: [
+    o && /* @__PURE__ */ a(j, { ...o, htmlFor: i }),
+    /* @__PURE__ */ c("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ a(
         "textarea",
         {
-          id: o,
-          value: m || "",
-          className: h,
-          onChange: (u) => c?.(u.currentTarget.value),
+          id: i,
+          value: x || "",
+          className: C,
+          onChange: (y) => p?.(y.currentTarget.value),
+          "aria-describedby": [h, s, d].filter(Boolean).join(" ") || void 0,
+          "aria-invalid": N ?? (t || n ? !0 : void 0),
           ...l
         }
       ),
-      /* @__PURE__ */ t(v, { text: r }),
-      !r && /* @__PURE__ */ t(N, { text: f })
+      /* @__PURE__ */ a(k, { id: s, text: t }),
+      !t && /* @__PURE__ */ a(z, { id: d, text: r })
     ] })
   ] });
 };
 export {
-  E as Textarea,
-  C as TextareaResize
+  V as Textarea,
+  B as TextareaResize
 };

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
 };