@epam/ai-dial-ui-kit 0.16.0-dev.5 → 0.16.0-dev.51

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

@@ -0,0 +1,43 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { EllipsisTooltip as p } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { Label as x } from "../Label/Label.js";
+import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
+import { mergeClasses as n } from "../../../utils/merge-classes.js";
+const b = ({
+  label: s,
+  text: l,
+  tooltip: t,
+  children: e,
+  postfix: a,
+  className: r
+}) => {
+  const i = !!e || l != null;
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: n(
+        "flex flex-col gap-1",
+        !e && "max-w-[200px]",
+        r,
+        f.labelledText
+      ),
+      children: [
+        /* @__PURE__ */ o(x, { label: s }),
+        i && /* @__PURE__ */ m("div", { className: "flex min-w-0 items-center gap-2 text-primary", children: [
+          e ?? /* @__PURE__ */ o(
+            p,
+            {
+              text: l,
+              customTooltipContent: t,
+              className: "dial-small-text min-w-0 flex-1"
+            }
+          ),
+          !e && a
+        ] })
+      ]
+    }
+  );
+};
+export {
+  b as LabelledText
+};

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

@@ -1,58 +1,59 @@
 import { jsx as e } from "react/jsx-runtime";
-import { IconEyeOff as c, IconEye as l } from "@tabler/icons-react";
-import { useState as u, useEffect as w } from "react";
-import { GhostIconButton as d } from "../IconButton/IconButtonWrappers.js";
-import { Input as C } from "../Input/Input.js";
-import { DIAL_KIT_ICON_STROKE as i } from "../constants/icon.js";
+import { IconEyeOff as c, IconEye as u } from "@tabler/icons-react";
+import { useState as w, useEffect as C } from "react";
+import { GhostIconButton as _ } from "../IconButton/IconButtonWrappers.js";
+import { Input as E } from "../Input/Input.js";
+import { DIAL_KIT_ICON_STROKE as a } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as m } from "../../../constants/icon.js";
-import { ElementSize as a } from "../../../types/size.js";
-import { DIAL_KIT_CLASS as _ } from "../../../constants/public-class-names.js";
-import { mergeClasses as E } from "../../../utils/merge-classes.js";
+import { ElementSize as p } from "../../../types/size.js";
+import { DIAL_KIT_CLASS as h } from "../../../constants/public-class-names.js";
+import { mergeClasses as A } from "../../../utils/merge-classes.js";
 const K = ({
-  showPasswordLabel: p = "Show password",
+  showPasswordLabel: n = "Show password",
   hidePasswordLabel: f = "Hide password",
-  disabled: r,
-  size: n = a.Standard,
+  disabled: s,
+  isToggleHidden: I,
+  size: l = p.Standard,
   ...t
 }) => {
-  const [I, s] = u(!1), o = I && !r;
-  return w(() => {
-    r && s(!1);
-  }, [r]), /* @__PURE__ */ e(
-    C,
+  const [d, i] = w(!1), o = !s && !I, r = d && o;
+  return C(() => {
+    o || i(!1);
+  }, [o]), /* @__PURE__ */ e(
+    E,
     {
       ...t,
-      wrapperClassName: E(
+      wrapperClassName: A(
         t.wrapperClassName,
-        _.passwordInput
+        h.passwordInput
       ),
-      size: n,
-      disabled: r,
-      type: o ? "text" : "password",
-      iconAfter: r ? void 0 : /* @__PURE__ */ e(
-        d,
+      size: l,
+      disabled: s,
+      type: r ? "text" : "password",
+      iconAfter: o ? /* @__PURE__ */ e(
+        _,
         {
-          size: a.Small,
-          "aria-label": o ? f : p,
-          "aria-pressed": o,
-          icon: o ? /* @__PURE__ */ e(
+          size: p.Small,
+          "aria-label": r ? f : n,
+          "aria-pressed": r,
+          icon: r ? /* @__PURE__ */ e(
             c,
             {
               size: m.SM,
-              stroke: i,
+              stroke: a,
               "aria-hidden": "true"
             }
           ) : /* @__PURE__ */ e(
-            l,
+            u,
             {
               size: m.SM,
-              stroke: i,
+              stroke: a,
               "aria-hidden": "true"
             }
           ),
-          onClick: () => s((S) => !S)
+          onClick: () => i((S) => !S)
         }
-      )
+      ) : void 0
     }
   );
 };

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-h2-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]"