@epam/ai-dial-ui-kit 0.15.0-dev.6 → 0.15.0-dev.9

package/dist/components/New/Tag/Tag.js

@@ -1,64 +1,66 @@
-import { jsxs as C, jsx as r } from "react/jsx-runtime";
-import { IconX as S } from "@tabler/icons-react";
-import { DIAL_KIT_ICON_STROKE as y } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as D } from "../../../constants/icon.js";
-import { ElementSize as T } from "../../../types/size.js";
+import { jsxs as x, jsx as r } from "react/jsx-runtime";
+import { IconX as C } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as _ } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as y } from "../../../constants/icon.js";
+import { ElementSize as D } from "../../../types/size.js";
 import { TagAppearance as d } from "../../../types/tag.js";
-import { mergeClasses as _ } from "../../../utils/merge-classes.js";
-import { GhostIconButton as w } from "../IconButton/IconButtonWrappers.js";
-import { tagInteractiveClassName as z, tagHoverClassName as E, tagStateClassNames as K, tagBaseClassName as O } from "./constants.js";
-const H = ({
+import { mergeClasses as T } from "../../../utils/merge-classes.js";
+import { GhostIconButton as A } from "../IconButton/IconButtonWrappers.js";
+import { tagInteractiveClassName as K, tagHoverClassName as L, tagStateClassNames as w, tagBaseClassName as z } from "./constants.js";
+import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
+const X = ({
   label: o,
-  icon: l,
-  appearance: n = d.Outlined,
-  selected: s = !1,
+  icon: m,
+  appearance: l = d.Outlined,
+  selected: i = !1,
   disabled: t = !1,
   closable: p = !1,
   removeLabel: u,
-  className: h,
-  title: I,
-  onClick: m,
+  className: I,
+  title: g,
+  onClick: n,
   onRemove: c,
-  onKeyDown: g,
-  ...i
+  onKeyDown: h,
+  ...s
 }) => {
-  const f = n === d.Selectable, a = !!m && !t, N = p && !!c && !t, k = f && s, x = (e) => {
-    g?.(e), !(!a || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
+  const f = l === d.Selectable, a = !!n && !t, N = p && !!c && !t, S = f && i, k = (e) => {
+    h?.(e), !(!a || e.defaultPrevented) && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
   };
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ x(
     "span",
     {
-      ...i,
-      role: a ? "button" : i.role,
-      tabIndex: a ? 0 : i.tabIndex,
+      ...s,
+      role: a ? "button" : s.role,
+      tabIndex: a ? 0 : s.tabIndex,
       "aria-disabled": t || void 0,
-      "aria-pressed": f && a ? s : void 0,
-      onClick: t ? void 0 : m,
-      onKeyDown: x,
-      className: _(
-        O,
-        k ? "dial-tiny-semi-text" : "dial-tiny-text",
-        K[n][s ? "selected" : "default"],
+      "aria-pressed": f && a ? i : void 0,
+      onClick: t ? void 0 : n,
+      onKeyDown: k,
+      className: T(
+        E.tag,
+        z,
+        S ? "dial-tiny-semi-text" : "dial-tiny-text",
+        w[l][i ? "selected" : "default"],
         // The design defines no disabled tag, so a disabled one keeps its
         // colours and only stops responding.
         t && "cursor-not-allowed",
-        a && [z, E],
-        h
+        a && [K, L],
+        I
       ),
       children: [
-        l && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: l }),
-        /* @__PURE__ */ r("span", { className: "truncate", title: I ?? o, children: o }),
+        m && /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: m }),
+        /* @__PURE__ */ r("span", { className: "truncate", title: g ?? o, children: o }),
         N && /* @__PURE__ */ r(
-          w,
+          A,
           {
             className: "size-[16px] shrink-0 dial-kit-minimum-target",
-            size: T.Small,
+            size: D.Small,
             "aria-label": u ?? `Remove ${o}`,
             icon: /* @__PURE__ */ r(
-              S,
+              C,
               {
-                size: D.SM,
-                stroke: y,
+                size: y.SM,
+                stroke: _,
                 "aria-hidden": "true"
               }
             ),
@@ -72,5 +74,5 @@ const H = ({
   );
 };
 export {
-  H as Tag
+  X as Tag
 };

package/dist/components/New/TagInput/TagInput.js

@@ -1,48 +1,49 @@
 import { jsxs as D, jsx as a } from "react/jsx-runtime";
-import { useId as oe, useRef as R, useState as T, useCallback as v, useEffect as ae } from "react";
-import { ElementSize as L } from "../../../types/size.js";
+import { useId as oe, useRef as T, useState as I, useCallback as R, useEffect as ae } from "react";
+import { ElementSize as V } from "../../../types/size.js";
 import { mergeClasses as c } from "../../../utils/merge-classes.js";
 import { Input as le } from "../Input/Input.js";
 import { Tag as d } from "../Tag/Tag.js";
 import { getVisibleTagCount as ce } from "./utils.js";
-const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
+import { DIAL_KIT_CLASS as me } from "../../../constants/public-class-names.js";
+const pe = 4, ue = 24, A = (r) => parseFloat(r) || 0, fe = (r) => {
   let o = r.length;
   for (; o > 0 && r[o - 1] === ","; ) o--;
   return r.slice(0, o);
-}, fe = () => {
-}, Te = ({
+}, de = () => {
+}, ve = ({
   id: r,
   value: o,
-  defaultValue: y,
-  size: N = L.Standard,
-  labelProps: j,
-  placeholder: A,
+  defaultValue: P,
+  size: v = V.Standard,
+  labelProps: y,
+  placeholder: j,
   caption: B,
-  error: M,
-  invalid: G,
+  error: K,
+  invalid: M,
   disabled: m = !1,
   readOnly: p = !1,
   collapseTagOverflow: s = !1,
-  ariaLabel: K,
+  ariaLabel: G,
   tagListLabel: U = "Tags",
   className: X,
   fieldClassName: $,
   tagClassName: u,
-  onChange: I
+  onChange: N
 }) => {
-  const z = oe(), F = r || z, q = N === L.Small, h = R(null), S = R([]), k = R(null), g = o !== void 0, [H, J] = T(
-    y ?? []
-  ), n = g ? o : H, i = n.length, [f, E] = T(""), [W, b] = T(i), l = !p && !m, w = v(
+  const z = oe(), F = r || z, q = v === V.Small, h = T(null), S = T([]), _ = T(null), g = o !== void 0, [H, J] = I(
+    P ?? []
+  ), n = g ? o : H, i = n.length, [f, k] = I(""), [E, b] = I(i), l = !p && !m, w = R(
     (e) => {
-      g || J(e), I?.(e);
+      g || J(e), N?.(e);
     },
-    [g, I]
-  ), Q = v(
+    [g, N]
+  ), Q = R(
     (e) => (t) => {
       S.current[e] = t;
     },
     []
-  ), x = v(() => {
+  ), x = R(() => {
     const e = h.current;
     if (!e || e.clientWidth === 0) {
       b(n.length);
@@ -51,12 +52,12 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
     const { paddingLeft: t, paddingRight: ie } = getComputedStyle(e);
     b(
       ce({
-        availableWidth: e.clientWidth - P(t) - P(ie) - (p ? 0 : pe),
+        availableWidth: e.clientWidth - A(t) - A(ie) - (p ? 0 : ue),
         tagWidths: n.map(
-          (de, re) => S.current[re]?.offsetWidth ?? 0
+          (he, re) => S.current[re]?.offsetWidth ?? 0
         ),
-        overflowChipWidth: k.current?.offsetWidth ?? 0,
-        gap: me
+        overflowChipWidth: _.current?.offsetWidth ?? 0,
+        gap: pe
       })
     );
   }, [p, n]);
@@ -76,23 +77,23 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
     s ? "shrink-0" : "min-w-0",
     u
   ), Z = (e) => {
-    const t = ue(e.trim()).trim();
+    const t = fe(e.trim()).trim();
     !t || n.includes(t) || w([...n, t]);
   }, O = (e) => {
     w(n.filter((t) => t !== e));
-  }, V = () => {
-    Z(f), E("");
+  }, L = () => {
+    Z(f), k("");
   }, ee = (e) => {
     if (l) {
       if (e.key === "Enter" || e.key === ",") {
-        e.preventDefault(), V();
+        e.preventDefault(), L();
         return;
       }
       e.key === "Backspace" && !f && i > 0 && (e.preventDefault(), w(n.slice(0, -1)));
     }
   }, te = () => {
-    l && f.trim() && V();
-  }, ne = s ? n.slice(0, W) : n, C = s ? n.slice(W) : [], _ = C.join(", "), se = i > 0 && /* @__PURE__ */ D(
+    l && f.trim() && L();
+  }, ne = s ? n.slice(0, E) : n, C = s ? n.slice(E) : [], W = C.join(", "), se = i > 0 && /* @__PURE__ */ D(
     "span",
     {
       role: "list",
@@ -119,8 +120,8 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
           {
             role: "listitem",
             label: `+${C.length}`,
-            "aria-label": _,
-            title: _,
+            "aria-label": W,
+            title: W,
             className: c("shrink-0", u),
             disabled: m
           }
@@ -143,13 +144,13 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
                       className: u,
                       disabled: m,
                       closable: l,
-                      onRemove: l ? fe : void 0
+                      onRemove: l ? de : void 0
                     }
                   )
                 },
                 e
               )),
-              /* @__PURE__ */ a("span", { ref: k, className: "inline-flex", children: /* @__PURE__ */ a(d, { label: `+${i}`, className: u }) })
+              /* @__PURE__ */ a("span", { ref: _, className: "inline-flex", children: /* @__PURE__ */ a(d, { label: `+${i}`, className: u }) })
             ]
           }
         )
@@ -160,22 +161,23 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
     le,
     {
       id: F,
-      size: N,
-      labelProps: j,
+      size: v,
+      labelProps: y,
       caption: B,
-      error: M,
-      invalid: G,
+      error: K,
+      invalid: M,
       disabled: m,
       readOnly: p,
       value: f,
-      placeholder: i > 0 ? void 0 : A,
-      "aria-label": K,
+      placeholder: i > 0 ? void 0 : j,
+      "aria-label": G,
       wrapperRef: h,
-      onChange: (e) => E(e ?? ""),
+      onChange: (e) => k(e ?? ""),
       onKeyDown: ee,
       onBlur: te,
       containerClassName: c("w-full", X),
       wrapperClassName: c(
+        me.tagInput,
         i > 0 && [
           "!h-auto",
           q ? "min-h-[24px] py-0.5" : "min-h-[40px] py-1.5",
@@ -193,5 +195,5 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
   );
 };
 export {
-  Te as TagInput
+  ve as TagInput
 };

package/dist/components/New/ToggleIconButton/ToggleIconButton.js

@@ -1,54 +1,56 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useCallback as f } from "react";
-import { ButtonAppearance as b, ButtonVariant as B } from "../../../types/button.js";
+import { ButtonAppearance as B, ButtonVariant as b } from "../../../types/button.js";
 import { ElementSize as C } from "../../../types/size.js";
-import { mergeClasses as h } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as v } from "../../../utils/accessible-name.js";
-import { IconButton as x } from "../IconButton/IconButton.js";
-import { Tooltip as g } from "../Tooltip/Tooltip.js";
-const E = ({
-  icon: o,
+import { mergeClasses as I } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as g } from "../../../utils/accessible-name.js";
+import { IconButton as A } from "../IconButton/IconButton.js";
+import { Tooltip as h } from "../Tooltip/Tooltip.js";
+import { DIAL_KIT_CLASS as v } from "../../../constants/public-class-names.js";
+const y = ({
+  icon: t,
   selectedIcon: l,
-  isSelected: r = !1,
-  onToggle: t,
+  isSelected: o = !1,
+  onToggle: a,
   onClick: m,
-  tooltipProps: a,
+  tooltipProps: r,
   size: s = C.Small,
   className: c,
   ...n
 }) => {
   const p = f(
     (u) => {
-      m?.(u), t?.(!r);
+      m?.(u), a?.(!o);
     },
-    [m, t, r]
+    [m, a, o]
   ), e = /* @__PURE__ */ i(
-    x,
+    A,
     {
       ...n,
       size: s,
-      variant: B.Primary,
-      appearance: b.Ghost,
-      icon: r ? l ?? o : o,
-      "aria-pressed": r,
-      "aria-label": v(
+      variant: b.Primary,
+      appearance: B.Ghost,
+      icon: o ? l ?? t : t,
+      "aria-pressed": o,
+      "aria-label": g(
         n["aria-label"],
-        a?.tooltip
+        r?.tooltip
       ),
       onClick: p,
-      className: h(
+      className: I(
+        v.toggleIconButton,
         "!rounded",
         // The glyph stays 16px at every size tier — only the tint square grows.
         // CSS outranks the width/height attributes Tabler renders, so callers
         // need not pass a size and the two icons can never disagree.
         "[&_svg]:size-4",
-        r && "!text-accent",
+        o && "!text-accent",
         c
       )
     }
   );
-  return a ? /* @__PURE__ */ i(g, { asChild: !0, ...a, children: e }) : e;
+  return r ? /* @__PURE__ */ i(h, { asChild: !0, ...r, children: e }) : e;
 };
 export {
-  E as ToggleIconButton
+  y as ToggleIconButton
 };

package/dist/components/New/Tooltip/TooltipContent.js

@@ -1,20 +1,21 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { useMergeRefs as i, FloatingPortal as c, FloatingArrow as p } from "@floating-ui/react";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { useMergeRefs as i, FloatingPortal as p, FloatingArrow as c } from "@floating-ui/react";
 import f from "classnames";
 import { useRef as g } from "react";
 import { useThemeScope as u } from "../ThemeScope/ThemeScope.js";
 import { useHasHover as x } from "../../../hooks/use-has-hover.js";
 import { arrowClassName as d, tooltipClassName as h } from "./constants.js";
 import { useTooltipContext as N } from "./TooltipContext.js";
-const T = ({
+import { DIAL_KIT_CLASS as C } from "../../../constants/public-class-names.js";
+const j = ({
   style: r,
   ...t
 }) => {
-  const o = N(), s = x(), l = u(), a = g(null), n = i([o.refs.setFloating, a]);
-  return !o.open || !s ? null : /* @__PURE__ */ e(c, { id: "tooltip-portal", children: /* @__PURE__ */ m(
+  const o = N(), s = x(), l = u(), a = g(null), m = i([o.refs.setFloating, a]);
+  return !o.open || !s ? null : /* @__PURE__ */ e(p, { id: "tooltip-portal", children: /* @__PURE__ */ n(
     "div",
     {
-      ref: n,
+      ref: m,
       "data-placement": o.placement,
       style: {
         ...o.floatingStyles,
@@ -22,6 +23,7 @@ const T = ({
       },
       ...o.getFloatingProps(t),
       className: f(
+        C.tooltip,
         h,
         l,
         o.getFloatingProps(t).className
@@ -29,7 +31,7 @@ const T = ({
       children: [
         t.children,
         /* @__PURE__ */ e(
-          p,
+          c,
           {
             ref: o.arrowRef,
             context: o.context,
@@ -41,5 +43,5 @@ const T = ({
   ) });
 };
 export {
-  T as TooltipContent
+  j as TooltipContent
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,56 +1,70 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { useId as w } from "react";
-import { Label as y } from "../New/Label/Label.js";
+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 I } from "../../utils/accessible-name.js";
-import { mergeClasses as M } from "../../utils/merge-classes.js";
-const A = ({
-  value: o,
-  max: s = 100,
+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,
+  max: l = 100,
   size: u = f.Standard,
   labelProps: e,
-  valueLabel: i,
-  id: h,
-  className: b,
-  "aria-label": p,
-  ...g
+  valueLabel: r,
+  id: b,
+  className: g,
+  "aria-label": x,
+  ...v
 }) => {
-  const x = w(), t = h ?? x, l = !!e?.label, n = l ? e?.id ?? `${t}-label` : void 0, a = s > 0 ? s : 0, v = Number.isFinite(o) ? o : 0, d = Math.min(Math.max(v, 0), a), N = a > 0 ? d / a * 100 : 0, c = /* @__PURE__ */ r(
+  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(
     "div",
     {
-      ...g,
+      ...v,
       id: t,
       role: "progressbar",
       "aria-valuenow": d,
       "aria-valuemin": 0,
-      "aria-valuemax": a,
+      "aria-valuemax": o,
       "aria-labelledby": n,
-      "aria-label": I(
-        p,
-        l ? void 0 : "Progress"
+      "aria-label": B(
+        x,
+        a ? void 0 : "Progress"
       ),
-      className: M(
+      className: h(
+        /* 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,
         "w-full overflow-hidden rounded-full bg-control-disable-primary",
         u === f.Small ? "h-1" : "h-2",
-        b
+        g
       ),
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ i(
         "div",
         {
-          style: { width: `${N}%` },
+          style: { width: `${I}%` },
           className: "h-full rounded-full bg-control-accent transition-[width] duration-300 motion-reduce:transition-none"
         }
       )
     }
   );
-  return !l && !i ? c : /* @__PURE__ */ m("div", { className: "flex w-full flex-col gap-1", children: [
-    /* @__PURE__ */ m("div", { className: "flex items-baseline gap-2", children: [
-      e && /* @__PURE__ */ r(y, { ...e, id: n }),
-      i && /* @__PURE__ */ r("span", { className: "dial-tiny-text text-secondary ml-auto shrink-0", children: i })
-    ] }),
-    c
-  ] });
+  return !a && !r ? m : /* @__PURE__ */ c(
+    "div",
+    {
+      className: h(
+        p.progressBar,
+        "flex w-full flex-col gap-1"
+      ),
+      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 })
+        ] }),
+        m
+      ]
+    }
+  );
 };
 export {
-  A as ProgressBar
+  z as ProgressBar
 };

package/dist/components/SchemaRenderer/components/SchemaAdditionalPropertiesEditor.js

@@ -1,41 +1,56 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useState as n, useEffect as f } from "react";
-import { useSchemaContext as u } from "../context.js";
-import { EditorThemes as x } from "../../../types/editor.js";
-const g = ({ value: i, onChange: s, theme: d = x.dark, height: a = 240 }) => {
-  const { readonly: m } = u(), [t, c] = n(null), [p, l] = n(
-    () => JSON.stringify(i, null, 2)
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { useState as s, useEffect as E } from "react";
+import { DialErrorText as y } from "../../CaptionText/CaptionText.js";
+import { useSchemaContext as S } from "../context.js";
+import { EditorThemes as v } from "../../../types/editor.js";
+const O = ({ value: a, onChange: d, theme: m = v.dark, height: l = 240 }) => {
+  const { readonly: c, texts: p } = S(), [r, h] = s(null), [o, f] = s(
+    () => JSON.stringify(a, null, 2)
   );
-  f(() => {
-    typeof window < "u" && import("../../JsonEditor/JsonEditor.js").then((e) => {
-      c(() => e.DialJsonEditor);
+  E(() => {
+    typeof window < "u" && import("../../JsonEditor/JsonEditor.js").then((t) => {
+      h(() => t.DialJsonEditor);
     });
   }, []);
-  const h = (e) => {
-    const o = e ?? "";
-    l(o);
+  let n = !1;
+  try {
+    JSON.parse(o);
+  } catch {
+    n = !0;
+  }
+  const x = (t) => {
+    const i = t ?? "";
+    f(i);
     try {
-      s(JSON.parse(o));
+      d(JSON.parse(i));
     } catch {
     }
   };
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      className: "border border-primary rounded",
-      style: { height: `${a}px` },
-      children: t && /* @__PURE__ */ r(
-        t,
-        {
-          value: p,
-          currentTheme: d,
-          onChange: h,
-          options: { readOnly: m }
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ u("div", { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "border border-primary rounded",
+        style: { height: `${l}px` },
+        children: r && /* @__PURE__ */ e(
+          r,
+          {
+            value: o,
+            currentTheme: m,
+            onChange: x,
+            options: { readOnly: c }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(
+      y,
+      {
+        text: n ? p.invalidJsonError : void 0
+      }
+    )
+  ] });
 };
 export {
-  g as SchemaAdditionalPropertiesEditor
+  O as SchemaAdditionalPropertiesEditor
 };