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

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

@@ -0,0 +1,33 @@
+import { createElement as a } from "react";
+import { mergeClasses as n } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as v } from "../../../constants/public-class-names.js";
+import { LiveRegionElement as L, LiveRegionPoliteness as e } from "../../../types/live-region.js";
+const c = {
+  [e.Polite]: "status",
+  [e.Assertive]: "alert"
+}, R = ({
+  politeness: o = e.Polite,
+  visuallyHidden: i = !1,
+  atomic: r,
+  as: t = L.Div,
+  className: m,
+  children: s,
+  ...l
+}) => a(
+  t,
+  {
+    ...l,
+    role: c[o],
+    "aria-live": o,
+    "aria-atomic": r,
+    className: n(
+      i ? "sr-only" : "empty:sr-only",
+      m,
+      v.liveRegion
+    )
+  },
+  s
+);
+export {
+  R as LiveRegion
+};

package/dist/components/New/MarkdownEditor/MarkdownEditor.js

@@ -1,43 +1,55 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useMemo as o } from "react";
-import k from "@uiw/react-md-editor";
-import { EditorThemes as w } from "../../../types/editor.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useMemo as a } from "react";
+import b from "@uiw/react-md-editor";
+import { EditorThemes as v } from "../../../types/editor.js";
 import { mergeClasses as x } from "../../../utils/merge-classes.js";
 import { getMarkdownFormattingCommands as C, getMarkdownExtraCommands as h } from "./constants.js";
-const j = ({
+const D = ({
   value: t,
-  onChange: m,
-  height: a = 300,
-  theme: e = w.light,
-  className: i,
-  placeholder: d,
-  defaultPreview: s = "edit",
-  id: n,
-  ariaLabel: l,
-  showDragbar: p = !0
+  onChange: e,
+  height: i = 300,
+  theme: m = v.light,
+  className: d,
+  placeholder: s,
+  defaultPreview: n = "edit",
+  id: l,
+  ariaLabel: p,
+  ariaDescribedBy: c,
+  invalid: r = !1,
+  showDragbar: f = !0
 }) => {
-  const c = o(() => C(), []), f = o(() => h(), []);
-  return /* @__PURE__ */ r(
+  const g = a(() => C(), []), k = a(() => h(), []);
+  return /* @__PURE__ */ o(
     "div",
     {
-      "data-color-mode": e,
-      className: x("dial-kit-markdown-editor", i),
-      children: /* @__PURE__ */ r(
-        k,
+      "data-color-mode": m,
+      className: x(
+        "dial-kit-markdown-editor",
+        r && "dial-kit-markdown-editor-invalid",
+        d
+      ),
+      children: /* @__PURE__ */ o(
+        b,
         {
           value: t,
-          onChange: (g) => m?.(g || ""),
-          height: a,
-          preview: s,
-          visibleDragbar: p,
-          commands: c,
-          extraCommands: f,
-          textareaProps: { placeholder: d, id: n, "aria-label": l }
+          onChange: (w) => e?.(w || ""),
+          height: i,
+          preview: n,
+          visibleDragbar: f,
+          commands: g,
+          extraCommands: k,
+          textareaProps: {
+            placeholder: s,
+            id: l,
+            "aria-label": p,
+            "aria-describedby": c,
+            "aria-invalid": r || void 0
+          }
         }
       )
     }
   );
 };
 export {
-  j as MarkdownEditor
+  D as MarkdownEditor
 };

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