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

package/dist/components/New/Tabs/Tabs.js

@@ -1,83 +1,113 @@
-import { jsx as u, jsxs as k } from "react/jsx-runtime";
-import { useRef as g, useCallback as w } from "react";
-import { mergeClasses as f } from "../../../utils/merge-classes.js";
-const A = ["ArrowRight", "ArrowLeft", "Home", "End"], R = ({
+import { jsx as s, jsxs as I } from "react/jsx-runtime";
+import { useRef as j, useId as R, useCallback as _ } from "react";
+import { mergeClasses as l } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as a } from "../../../constants/public-class-names.js";
+import { TabOrientation as u } from "../../../types/tab.js";
+const z = {
+  [u.Horizontal]: { next: "ArrowRight", previous: "ArrowLeft" },
+  [u.Vertical]: { next: "ArrowDown", previous: "ArrowUp" }
+}, M = ({
   tabs: n,
-  activeTabId: i,
-  onTabChange: o,
-  ariaLabel: x,
-  className: m,
-  tabClassName: b
+  activeTabId: c,
+  onTabChange: f,
+  orientation: m = u.Horizontal,
+  sectionLabel: d,
+  ariaLabel: k,
+  className: v,
+  tabListClassName: D,
+  tabClassName: S,
+  sectionLabelClassName: H
 }) => {
-  const p = g({}), a = n.find((e) => e.id === i), y = a && !a.disabled ? a.id : n.find((e) => !e.disabled)?.id, h = w(
+  const w = j({}), A = R(), i = m === u.Vertical, h = n.find((e) => e.id === c), K = h && !h.disabled ? h.id : n.find((e) => !e.disabled)?.id, V = _(
     (e) => {
-      if (!A.includes(e.key) || n.length === 0) return;
-      const r = n.filter((c) => !c.disabled);
-      if (r.length === 0) return;
-      const t = Math.max(
-        r.findIndex((c) => c.id === i),
+      const { next: t, previous: r } = z[m];
+      if (![t, r, "Home", "End"].includes(e.key) || n.length === 0)
+        return;
+      const o = n.filter((g) => !g.disabled);
+      if (o.length === 0) return;
+      const p = Math.max(
+        o.findIndex((g) => g.id === c),
         0
-      ), s = r.length - 1;
-      let l = t;
-      switch (e.key) {
-        case "ArrowRight":
-          l = t === s ? 0 : t + 1;
-          break;
-        case "ArrowLeft":
-          l = t === 0 ? s : t - 1;
-          break;
-        case "Home":
-          l = 0;
-          break;
-        case "End":
-          l = s;
-          break;
-      }
-      e.preventDefault();
-      const d = r[l];
-      p.current[d.id]?.focus(), d.id !== i && o(d.id);
+      ), b = o.length - 1;
+      let x = p;
+      e.key === t ? x = p === b ? 0 : p + 1 : e.key === r ? x = p === 0 ? b : p - 1 : e.key === "Home" ? x = 0 : x = b, e.preventDefault();
+      const y = o[x];
+      w.current[y.id]?.focus(), y.id !== c && f(y.id);
     },
-    [n, i, o]
-  );
-  return /* @__PURE__ */ u(
+    [n, c, f, m]
+  ), N = /* @__PURE__ */ s(
     "div",
     {
       role: "tablist",
-      "aria-label": x,
-      onKeyDown: h,
-      className: f("flex justify-start gap-1", m),
+      "aria-orientation": i ? "vertical" : void 0,
+      "aria-label": k,
+      "aria-labelledby": !k && d ? A : void 0,
+      onKeyDown: V,
+      className: l(
+        i ? "flex flex-col gap-1 px-2" : "flex justify-start gap-1",
+        // Without a heading the list is the root, so it takes the caller's
+        // classes — and the root kit class below — itself.
+        !d && v,
+        D,
+        a.tabList,
+        !d && a.tabs
+      ),
       children: n.map((e) => {
-        const r = i === e.id, t = !!e.disabled;
-        return /* @__PURE__ */ k(
+        const t = c === e.id, r = !!e.disabled;
+        return /* @__PURE__ */ I(
           "button",
           {
-            ref: (s) => {
-              p.current[e.id] = s;
+            ref: (o) => {
+              w.current[e.id] = o;
             },
             type: "button",
             role: "tab",
-            "aria-selected": r,
-            disabled: t,
-            tabIndex: e.id === y ? 0 : -1,
-            onClick: () => o(e.id),
-            className: f(
-              "dial-small-paragraph-semi-text dial-kit-enhanced-target",
-              "border-b-2 border-transparent flex items-center gap-2 px-3 py-2 text-start",
+            "aria-selected": t,
+            disabled: r,
+            tabIndex: e.id === K ? 0 : -1,
+            onClick: () => f(e.id),
+            className: l(
+              "dial-kit-enhanced-target flex items-center gap-2 text-start",
               "transition-colors motion-reduce:transition-none",
-              "focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus",
-              t && "cursor-not-allowed border-control-disable-primary text-control-disable-primary",
-              !t && (r ? "dial-kit-tab-selected-underline text-primary" : "border-transparent text-secondary"),
-              b
+              "focus-visible:outline focus-visible:outline-focus",
+              i ? [
+                "h-11 w-full rounded-lg px-3 desktop:h-10",
+                "focus-visible:-outline-offset-1",
+                t ? "dial-small-semi-text" : "dial-small-text text-secondary"
+              ] : [
+                "dial-small-paragraph-semi-text border-b-2 border-transparent px-3 py-2",
+                "focus-visible:outline-offset-2"
+              ],
+              r && (i ? "cursor-not-allowed text-control-disable-primary" : "cursor-not-allowed border-control-disable-primary text-control-disable-primary"),
+              !r && (i ? t ? "bg-control-accent-alpha text-accent hover:bg-control-accent-alpha-hover" : "hover:bg-control-accent-alpha-hover" : t ? "dial-kit-tab-selected-underline text-primary" : "border-transparent text-secondary"),
+              S,
+              a.tab,
+              t && a.tabSelected
             ),
             children: [
-              /* @__PURE__ */ u("span", { children: e.label }),
-              e.count != null && /* @__PURE__ */ u(
+              e.icon && // The label names the tab, so the icon beside it is decorative —
+              // and a Tabler icon is a bare `<svg>` that would otherwise be
+              // announced as an unnamed graphic.
+              /* @__PURE__ */ s("span", { "aria-hidden": "true", className: "flex shrink-0", children: e.icon }),
+              /* @__PURE__ */ s(
+                "span",
+                {
+                  className: l(
+                    i && !t && !r && "text-primary"
+                  ),
+                  children: e.label
+                }
+              ),
+              e.count != null && /* @__PURE__ */ s(
                 "span",
                 {
-                  className: f(
+                  className: l(
                     "dial-tiny-semi-text rounded-full px-1.5 py-0.5",
-                    t && "bg-layer-sunken text-control-disable-primary",
-                    !t && (r ? "bg-control-accent-alpha text-accent" : "bg-layer-sunken text-secondary")
+                    // In a rail the badge belongs at the far end of the row, not
+                    // hanging off the label.
+                    i && "ms-auto",
+                    r && "bg-layer-sunken text-control-disable-primary",
+                    !r && (t ? "bg-control-accent-alpha text-accent" : "bg-layer-sunken text-secondary")
                   ),
                   children: e.count
                 }
@@ -89,7 +119,41 @@ const A = ["ArrowRight", "ArrowLeft", "Home", "End"], R = ({
       })
     }
   );
+  return d ? /* @__PURE__ */ I(
+    "div",
+    {
+      className: l(
+        "flex flex-col gap-3",
+        v,
+        a.tabs
+      ),
+      children: [
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: l(
+              "flex h-16 shrink-0 items-center",
+              i ? "px-4" : "px-3"
+            ),
+            children: /* @__PURE__ */ s(
+              "span",
+              {
+                id: A,
+                className: l(
+                  "dial-h1-text text-primary",
+                  H,
+                  a.tabsSectionLabel
+                ),
+                children: d
+              }
+            )
+          }
+        ),
+        N
+      ]
+    }
+  ) : N;
 };
 export {
-  R as Tabs
+  M as Tabs
 };

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(
+        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,
+        E.tag
       ),
       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,28 +161,31 @@ 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(
         i > 0 && [
           "!h-auto",
-          q ? "min-h-[24px] py-0.5" : "min-h-[40px] py-1.5",
+          // 1px border + 3px + 32px tag + 3px + 1px keeps a one-row field at
+          // the 40px of the empty one.
+          q ? "min-h-[24px] py-0.5" : "min-h-[40px] py-[3px]",
           s ? "flex-nowrap overflow-hidden" : "flex-wrap"
         ],
-        $
+        $,
+        me.tagInput
       ),
       className: c(
         "w-auto flex-1",
@@ -193,5 +197,5 @@ const me = 4, pe = 24, P = (r) => parseFloat(r) || 0, ue = (r) => {
   );
 };
 export {
-  Te as TagInput
+  ve as TagInput
 };

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

@@ -1,55 +1,56 @@
 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 u, CaptionText as v } from "../CaptionText/CaptionText.js";
-import { Label as N } from "../Label/Label.js";
-var b = /* @__PURE__ */ ((e) => (e.None = "none", e.Both = "both", e.Horizontal = "horizontal", e.Vertical = "vertical", e))(b || {});
+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 = {
   none: "resize-none",
   both: "resize",
   horizontal: "resize-x",
   vertical: "resize-y"
-}, C = (e) => typeof e == "boolean" ? s[
+}, g = (e) => typeof e == "boolean" ? s[
   e ? "both" : "none"
   /* None */
-] : s[e], B = ({
+] : s[e], E = ({
   className: e = "",
   value: m,
   onChange: c,
   error: r,
   containerClassName: x,
-  resize: d = !1,
-  labelProps: o,
+  resize: p = !1,
+  labelProps: a,
   caption: f,
-  id: l,
-  ...a
+  id: o,
+  invalid: d,
+  ...l
 }) => {
   const h = n(
     "dial-kit-textarea dial-kit-input px-3 py-2",
-    a.invalid && "dial-kit-input-error",
-    a.disabled && "dial-kit-input-disable",
-    C(d),
+    d && "dial-kit-input-error",
+    l.disabled && "dial-kit-input-disable",
+    g(p),
     e
   );
   return /* @__PURE__ */ i("div", { className: n("flex flex-col gap-2", x), children: [
-    o && /* @__PURE__ */ t(N, { ...o, htmlFor: l }),
+    a && /* @__PURE__ */ t(b, { ...a, htmlFor: o }),
     /* @__PURE__ */ i("div", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ t(
         "textarea",
         {
-          id: l,
+          id: o,
           value: m || "",
           className: h,
-          onChange: (p) => c?.(p.currentTarget.value),
-          ...a
+          onChange: (u) => c?.(u.currentTarget.value),
+          ...l
         }
       ),
-      /* @__PURE__ */ t(u, { text: r }),
-      !r && /* @__PURE__ */ t(v, { text: f })
+      /* @__PURE__ */ t(v, { text: r }),
+      !r && /* @__PURE__ */ t(N, { text: f })
     ] })
   ] });
 };
 export {
-  B as Textarea,
-  b as TextareaResize
+  E as Textarea,
+  C as TextareaResize
 };