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

package/dist/components/New/Input/Input.js

@@ -1,169 +1,183 @@
-import { jsxs as x, jsx as e } from "react/jsx-runtime";
-import { useRef as _, useEffect as A } from "react";
-import { useMergeRefs as M } from "@floating-ui/react";
-import { DialIcon as C } from "../../Icon/Icon.js";
-import { Tooltip as W } from "../Tooltip/Tooltip.js";
-import { ElementSize as d } from "../../../types/size.js";
-import { mergeClasses as g } from "../../../utils/merge-classes.js";
-import { ErrorText as Z, CaptionText as $ } from "../CaptionText/CaptionText.js";
+import { jsxs as S, jsx as t } from "react/jsx-runtime";
+import { useId as V, useRef as _, useEffect as A } from "react";
+import { useMergeRefs as B } from "@floating-ui/react";
+import { DialIcon as y } from "../../Icon/Icon.js";
+import { Tooltip as M } from "../Tooltip/Tooltip.js";
+import { ElementSize as p } from "../../../types/size.js";
+import { mergeClasses as w } from "../../../utils/merge-classes.js";
+import { ErrorText as W, CaptionText as Z } from "../CaptionText/CaptionText.js";
 import { Label as q } from "../Label/Label.js";
-import { InputButton as B } from "./Button/InputButton.js";
-import { handleKeyDown as H } from "./utils.js";
-const T = {
-  [d.Small]: {
+import { InputButton as H } from "./Button/InputButton.js";
+import { handleKeyDown as J } from "./utils.js";
+const L = {
+  [p.Small]: {
     field: "dial-kit-input-small gap-x-1",
     paddingStart: "pl-2",
     paddingEnd: "pr-2",
     stackGap: "gap-1",
     postfixText: "dial-tiny-text"
   },
-  [d.Standard]: {
+  [p.Standard]: {
     field: "gap-x-2 py-2",
     paddingStart: "pl-3",
     paddingEnd: "pr-3",
     stackGap: "gap-2",
     postfixText: "dial-small-text"
   },
-  [d.Large]: {
+  [p.Large]: {
     field: "gap-x-2 py-3",
     paddingStart: "pl-4",
     paddingEnd: "pr-4",
     stackGap: "gap-2",
     postfixText: "dial-body-text"
   }
-}, ae = ({
-  labelProps: p,
-  error: t,
+}, ne = ({
+  labelProps: f,
+  error: e,
   caption: n,
-  id: c,
-  containerClassName: f,
-  size: u = d.Standard,
-  ...v
-}) => /* @__PURE__ */ x(
-  "div",
-  {
-    className: g(
-      "flex flex-col",
-      T[u].stackGap,
-      f
-    ),
-    children: [
-      p && /* @__PURE__ */ e(q, { ...p, htmlFor: c }),
-      /* @__PURE__ */ x("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ e(I, { id: c, size: u, ...v }),
-        /* @__PURE__ */ e(Z, { text: t }),
-        !t && /* @__PURE__ */ e($, { text: n })
-      ] })
-    ]
-  }
-), I = ({
-  invalid: p,
-  disabled: t,
+  id: h,
+  containerClassName: u,
+  size: m = p.Standard,
+  "aria-describedby": N,
+  "aria-invalid": E,
+  ...g
+}) => {
+  const a = V(), o = h ?? a, l = e ? `${o}-error` : void 0, v = !e && n ? `${o}-caption` : void 0;
+  return /* @__PURE__ */ S(
+    "div",
+    {
+      className: w(
+        "flex flex-col",
+        L[m].stackGap,
+        u
+      ),
+      children: [
+        f && /* @__PURE__ */ t(q, { ...f, htmlFor: o }),
+        /* @__PURE__ */ S("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ t(
+            j,
+            {
+              id: o,
+              size: m,
+              "aria-describedby": [N, l, v].filter(Boolean).join(" ") || void 0,
+              "aria-invalid": E ?? (e || g.invalid ? !0 : void 0),
+              ...g
+            }
+          ),
+          /* @__PURE__ */ t(W, { id: l, text: e }),
+          !e && /* @__PURE__ */ t(Z, { id: v, text: n })
+        ] })
+      ]
+    }
+  );
+}, j = ({
+  invalid: f,
+  disabled: e,
   prefix: n,
-  className: c,
-  postfix: f,
-  children: u,
-  iconBefore: v,
-  iconAfter: L,
-  wrapperClassName: b,
-  type: o,
-  inputRef: y,
-  value: N,
-  tooltipText: D,
-  min: l,
-  onChange: G,
-  max: s,
-  inputButtonProps: w,
-  wrapperRef: j,
-  size: S = d.Standard,
+  className: h,
+  postfix: u,
+  children: m,
+  iconBefore: N,
+  iconAfter: E,
+  wrapperClassName: g,
+  type: a,
+  inputRef: o,
+  value: l,
+  tooltipText: v,
+  min: s,
+  onChange: D,
+  max: c,
+  inputButtonProps: I,
+  wrapperRef: G,
+  size: b = p.Standard,
   ...R
 }) => {
-  const m = T[S], E = _(null), F = M([y, E]), h = o === "number" || l !== void 0 || s !== void 0;
+  const x = L[b], C = _(null), $ = B([o, C]), k = a === "number" || s !== void 0 || c !== void 0;
   A(() => {
-    const a = E.current;
-    if (!a || !h || t) return;
-    const r = (i) => {
-      i.preventDefault();
+    const i = C.current;
+    if (!i || !k || e) return;
+    const r = (d) => {
+      d.preventDefault();
     };
-    return a.addEventListener("wheel", r, { passive: !1 }), () => {
-      a.removeEventListener("wheel", r);
+    return i.addEventListener("wheel", r, { passive: !1 }), () => {
+      i.removeEventListener("wheel", r);
     };
-  }, [t, h, o]);
-  const K = (a) => {
-    H(a, o, l, s);
-  }, V = (a) => {
-    const r = a.currentTarget.value;
-    if (h && r !== "") {
-      const i = parseFloat(r);
-      if (isNaN(i) && r !== "-" && r !== "." || !isNaN(i) && (l !== void 0 && i < +l || s !== void 0 && i > +s))
+  }, [e, k, a]);
+  const F = (i) => {
+    J(i, a, s, c);
+  }, K = (i) => {
+    const r = i.currentTarget.value;
+    if (k && r !== "") {
+      const d = parseFloat(r);
+      if (isNaN(d) && r !== "-" && r !== "." || !isNaN(d) && (s !== void 0 && d < +s || c !== void 0 && d > +c))
         return;
     }
-    G?.(r || void 0);
-  }, k = () => /* @__PURE__ */ x(
+    D?.(r || void 0);
+  }, T = () => /* @__PURE__ */ S(
     "div",
     {
-      ref: j,
-      className: g(
+      ref: G,
+      className: w(
         "dial-kit-input flex flex-row items-center justify-between",
-        m.field,
-        p && "dial-kit-input-error",
-        t && "dial-kit-input-disable",
-        !n && m.paddingStart,
-        !w && m.paddingEnd,
-        b
+        x.field,
+        f && "dial-kit-input-error",
+        e && "dial-kit-input-disable",
+        !n && x.paddingStart,
+        !I && x.paddingEnd,
+        g
       ),
       "aria-label": "input-container",
       children: [
-        n && /* @__PURE__ */ e("div", { className: "border-r border-secondary", children: /* @__PURE__ */ e(
-          I,
+        n && /* @__PURE__ */ t("div", { className: "border-r border-secondary", children: /* @__PURE__ */ t(
+          j,
           {
             wrapperClassName: "!rounded-r-none",
             className: "truncate",
             value: n,
             disabled: !0,
-            size: S,
+            size: b,
             id: `${n}_textBefore`
           }
         ) }),
-        /* @__PURE__ */ e(C, { icon: v }),
-        u,
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(y, { icon: N }),
+        m,
+        /* @__PURE__ */ t(
           "input",
           {
-            ref: F,
-            type: o,
-            autoComplete: o === "password" ? "new-password" : "off",
-            value: N ?? "",
-            className: g(
+            ref: $,
+            type: a,
+            autoComplete: a === "password" ? "new-password" : "off",
+            value: l ?? "",
+            className: w(
               "border-0 bg-transparent w-full truncate",
-              t && "cursor-not-allowed",
-              c
+              e && "cursor-not-allowed",
+              h
             ),
-            onChange: V,
-            onKeyDown: K,
-            min: l,
-            disabled: t,
-            max: s,
+            onChange: K,
+            onKeyDown: F,
+            min: s,
+            disabled: e,
+            max: c,
             ...R
           }
         ),
-        f && /* @__PURE__ */ x(
+        u && /* @__PURE__ */ S(
           "p",
           {
-            className: g("text-secondary", m.postfixText),
+            className: w("text-secondary", x.postfixText),
             children: [
               " ",
-              f
+              u
             ]
           }
         ),
-        /* @__PURE__ */ e(C, { icon: L }),
-        w && /* @__PURE__ */ e(B, { size: S, ...w, disabled: t })
+        /* @__PURE__ */ t(y, { icon: E }),
+        I && /* @__PURE__ */ t(H, { size: b, ...I, disabled: e })
       ]
     }
   );
-  return t && o !== "password" ? /* @__PURE__ */ e(W, { tooltip: D || N, children: k() }) : k();
+  return e && a !== "password" ? /* @__PURE__ */ t(M, { tooltip: v || l, children: T() }) : T();
 };
 export {
-  ae as Input
+  ne as Input
 };

package/dist/components/New/MenuItem/MenuItem.js

@@ -1,4 +1,4 @@
-import { jsxs as i, Fragment as g, jsx as t } from "react/jsx-runtime";
+import { jsxs as n, Fragment as g, jsx as t } from "react/jsx-runtime";
 import { DialIcon as k } from "../../Icon/Icon.js";
 import { CheckboxBox as S } from "../Checkbox/CheckboxBox.js";
 import { EllipsisTooltip as T } from "../EllipsisTooltip/EllipsisTooltip.js";
@@ -13,19 +13,19 @@ const O = ({
   description: f,
   mark: s = o.None,
   selected: r = !1,
-  danger: u = !1,
-  trailing: h,
+  danger: h = !1,
+  trailing: u,
   rightControl: m,
   ellipsisLabel: I = !1,
   labelClassName: x,
-  children: v,
-  className: d,
+  children: d,
+  className: v,
   disabled: a = !1,
   type: C = "button",
   ...w
 }) => {
-  const y = r && s === o.Highlight, b = r && (s === o.Checkbox || s === o.Tint), n = e(
-    u && "text-error",
+  const y = r && s === o.Highlight, b = r && (s === o.Checkbox || s === o.Tint), i = e(
+    h && "text-error",
     a && "text-control-disable-primary"
   ), p = e(
     j,
@@ -35,33 +35,33 @@ const O = ({
     y && M,
     b && H,
     a && D,
-    u && "text-error",
-    d,
+    h && "text-error",
+    v,
     A.menuItem
-  ), N = /* @__PURE__ */ i(
+  ), N = /* @__PURE__ */ n(
     "button",
     {
       type: C,
       disabled: a,
       "data-menu-item-row": m ? "" : void 0,
-      className: m ? "flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-none" : p,
+      className: m ? "flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-hidden" : p,
       ...w,
       children: [
-        v ?? /* @__PURE__ */ i(g, { children: [
+        d ?? /* @__PURE__ */ n(g, { children: [
           s === o.Checkbox && /* @__PURE__ */ t(S, { isSelected: r, disabled: a }),
-          c && /* @__PURE__ */ t(k, { icon: c, className: n }),
+          c && /* @__PURE__ */ t(k, { icon: c, className: i }),
           I ? /* @__PURE__ */ t(
             T,
             {
               text: l,
-              className: e(n, x)
+              className: e(i, x)
             }
           ) : /* @__PURE__ */ t(
             "span",
             {
               className: e(
                 "min-w-0 flex-1 truncate text-start",
-                n,
+                i,
                 x
               ),
               children: l
@@ -79,7 +79,7 @@ const O = ({
           ),
           r && s === o.Check && L
         ] }),
-        h && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", n), children: h })
+        u && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", i), children: u })
       ]
     }
   );
@@ -88,7 +88,7 @@ const O = ({
       `role="none"` so the wrapper does not come between a listbox and its
       options: the row inside it keeps the role, the state and the click.
     */
-    /* @__PURE__ */ i(
+    /* @__PURE__ */ n(
       "div",
       {
         role: "none",

package/dist/components/New/NoDataContent/NoDataContent.js

@@ -1,56 +1,51 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import d from "../../../assets/icons/no-data.svg.js";
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
 import { DIAL_KIT_CLASS as x } from "../../../constants/public-class-names.js";
-const r = 32, N = ({
-  title: s,
-  description: a,
-  icon: o,
-  live: i = !1,
+import { NoDataIllustration as d } from "./NoDataIllustration.js";
+const h = ({
+  title: a,
+  description: l,
+  icon: r,
+  action: s,
+  live: m = !1,
   className: n,
-  titleClassName: l,
-  descriptionClassName: m
+  titleClassName: o,
+  descriptionClassName: i
 }) => /* @__PURE__ */ c(
   "div",
   {
-    role: i ? "status" : void 0,
+    role: m ? "status" : void 0,
     className: e(
-      "flex size-full flex-col items-center justify-center gap-2 text-tertiary",
+      "flex size-full flex-col items-center justify-center px-4 text-center",
       n,
       x.noDataContent
     ),
     children: [
-      o ?? /* @__PURE__ */ t(
-        d,
-        {
-          width: r,
-          height: r,
-          "aria-hidden": "true"
-        }
-      ),
+      r ?? /* @__PURE__ */ t(d, {}),
       /* @__PURE__ */ t(
         "span",
         {
           className: e(
-            "dial-tiny-text text-secondary",
-            l
+            "dial-small-semi-text mt-6 text-primary",
+            o
           ),
-          children: s
+          children: a
         }
       ),
-      a && /* @__PURE__ */ t(
+      l != null && /* @__PURE__ */ t(
         "span",
         {
           className: e(
-            "dial-tiny-text text-secondary",
-            m
+            "dial-small-text mt-2 text-secondary",
+            i
           ),
-          children: a
+          children: l
         }
-      )
+      ),
+      s != null && /* @__PURE__ */ t("div", { className: "mt-4", children: s })
     ]
   }
 );
 export {
-  N as NoDataContent
+  h as NoDataContent
 };

package/dist/components/New/NoDataContent/NoDataIllustration.js

@@ -0,0 +1,53 @@
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+const i = [12, 40, 68], t = () => /* @__PURE__ */ r(
+  "svg",
+  {
+    width: 121,
+    height: 97,
+    viewBox: "0 0 121 97",
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: [
+      /* @__PURE__ */ l(
+        "rect",
+        {
+          x: 0.5,
+          y: 0.5,
+          width: 120,
+          height: 96,
+          rx: 16,
+          className: "fill-layer-0 stroke-tertiary"
+        }
+      ),
+      i.map((e) => /* @__PURE__ */ r("g", { children: [
+        /* @__PURE__ */ l("circle", { cx: 20.5, cy: e + 8.5, r: 8, className: "fill-layer-1" }),
+        /* @__PURE__ */ l(
+          "rect",
+          {
+            x: 36.5,
+            y: e + 1,
+            width: 56,
+            height: 6,
+            rx: 3,
+            className: "fill-layer-1"
+          }
+        ),
+        /* @__PURE__ */ l(
+          "rect",
+          {
+            x: 36.5,
+            y: e + 11,
+            width: 34,
+            height: 5,
+            rx: 2.5,
+            className: "fill-layer-2"
+          }
+        )
+      ] }, e))
+    ]
+  }
+);
+export {
+  t as NoDataIllustration
+};

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

@@ -1,5 +1,5 @@
 import { PopupSize as e } from "../../../types/popup.js";
-const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
+const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h3-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
   [e.Sm]: "max-w-full md:max-w-[400px]",
   [e.Md]: "max-w-full md:max-w-[800px]",
   [e.Lg]: "max-w-full md:max-w-[1200px]"

package/dist/components/New/Radio/Radio.js

@@ -1,5 +1,5 @@
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { useId as h, useCallback as y } from "react";
+import { useId as x, useCallback as y } from "react";
 import { ElementSize as N } from "../../../types/size.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
 import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
@@ -11,15 +11,15 @@ const F = ({
   value: i,
   labelProps: o,
   isSelected: l = !1,
-  disabled: t,
+  disabled: a,
   onChange: s,
   caption: c,
-  className: f,
+  className: b,
   ...n
 }) => {
-  const b = h(), a = p ?? b, d = c ? `${a}-caption` : void 0, g = y(
-    (x) => {
-      x.target.checked && s?.(i);
+  const f = x(), t = p ?? f, d = c ? `${t}-caption` : void 0, g = y(
+    (h) => {
+      h.target.checked && s?.(i);
     },
     [s, i]
   );
@@ -28,8 +28,10 @@ const F = ({
       "div",
       {
         className: r(
-          "flex items-center gap-2 ",
-          f,
+          // 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",
+          b,
           k.radio
         ),
         children: [
@@ -38,11 +40,11 @@ const F = ({
             {
               ...n,
               type: "radio",
-              id: a,
+              id: t,
               name: u,
               value: i,
               checked: l,
-              disabled: t,
+              disabled: a,
               onChange: g,
               "aria-label": v(
                 typeof o?.label != "string" ? n["aria-label"] : void 0
@@ -54,16 +56,16 @@ const F = ({
           /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: a,
+              htmlFor: t,
               className: r(
-                "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200 hover:bg-control-accent-alpha-hover",
+                "group grid size-[20px] shrink-0 place-items-center rounded-full border transition-colors duration-200",
                 // 20px is below the 24x24 minimum target, so grow the pointer target
                 // without touching the rendered size. The 44px enhanced target would
                 // overhang by 12px per side and swallow the adjacent label.
                 "dial-kit-minimum-target",
                 "peer-focus-visible:outline peer-focus-visible:outline-focus",
-                t ? "cursor-not-allowed border-default bg-control-disable-primary" : r(
-                  "cursor-pointer",
+                a ? "cursor-not-allowed border-default bg-control-disable-primary" : r(
+                  "cursor-pointer group-has-[label:hover]/choice:bg-control-accent-alpha-hover",
                   l ? "border border-accent bg-control-neutral" : "border-default bg-control-neutral"
                 )
               ),
@@ -72,7 +74,7 @@ const F = ({
                 {
                   className: r(
                     "size-3 rounded-full",
-                    t ? "bg-control-disable-secondary" : "bg-control-accent"
+                    a ? "bg-control-disable-secondary" : "bg-control-accent"
                   )
                 }
               )
@@ -83,12 +85,12 @@ const F = ({
             {
               size: N.Standard,
               ...o,
-              htmlFor: a,
+              htmlFor: t,
               className: r(
                 // `Label` defaults to the secondary colour; a radio's own label is
                 // primary while the control is usable.
                 "py-[1px]",
-                t ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+                a ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
                 o.className
               )
             }