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

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/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
               )
             }

package/dist/components/New/ResizeHandle/ResizeHandle.js

@@ -0,0 +1,147 @@
+import { jsx as d } from "react/jsx-runtime";
+import { IconArrowsHorizontal as O } from "@tabler/icons-react";
+import { useState as T, useRef as a, useEffect as Y, useCallback as U } from "react";
+import { DIAL_KIT_ICON_STROKE as $ } from "../constants/icon.js";
+import { Tooltip as j } from "../Tooltip/Tooltip.js";
+import { DIAL_ICON_SIZE as q } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as B } from "../../../constants/public-class-names.js";
+import { TooltipPlacement as b } from "../../../types/tooltip.js";
+import { mergeClasses as L } from "../../../utils/merge-classes.js";
+const G = 16, V = 1e3, Z = 4, h = (r) => r == null ? !1 : (r.closest("[dir]")?.getAttribute("dir") ?? r.ownerDocument.defaultView?.getComputedStyle(r).direction) === "rtl", se = ({
+  width: r,
+  minWidth: o,
+  maxWidth: s,
+  defaultWidth: R,
+  onWidthChange: f,
+  label: w,
+  tooltip: z,
+  keyboardStep: g = G,
+  className: S
+}) => {
+  const [y, D] = T(!1), [I, m] = T(!1), [k, A] = T(!1), c = a(null), C = a(null), p = a({ x: 0, y: 0 }), l = a(null), u = a(void 0), i = a(void 0);
+  Y(
+    () => () => {
+      clearTimeout(u.current), i.current != null && cancelAnimationFrame(i.current);
+    },
+    []
+  );
+  const P = U(
+    (e) => {
+      const t = Number.isFinite(e) ? e : o;
+      return Math.round(Math.min(s, Math.max(o, t)));
+    },
+    [s, o]
+  ), E = (e) => {
+    C.current?.style.setProperty(
+      "transform",
+      `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`
+    ), A(!0);
+  }, x = (e) => {
+    p.current = { x: e.clientX, y: e.clientY }, clearTimeout(u.current), u.current = setTimeout(() => m(!0), V);
+  }, M = (e) => {
+    E(e), x(e);
+  }, H = () => {
+    A(!1), clearTimeout(u.current), m(!1);
+  }, K = (e) => {
+    e.button === 0 && (e.currentTarget.setPointerCapture(e.pointerId), l.current = { x: e.clientX, width: r }, D(!0));
+  }, N = (e) => {
+    E(e);
+    const t = l.current;
+    if (t == null) {
+      Math.hypot(
+        e.clientX - p.current.x,
+        e.clientY - p.current.y
+      ) > Z && (m(!1), x(e));
+      return;
+    }
+    const n = h(c.current) ? -1 : 1, F = P(t.width + (e.clientX - t.x) * n);
+    i.current != null && cancelAnimationFrame(i.current), i.current = requestAnimationFrame(() => f(F));
+  }, _ = (e) => {
+    l.current != null && (l.current = null, D(!1), e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId));
+  }, X = (e) => {
+    const t = h(c.current) ? -1 : 1;
+    let n;
+    switch (e.key) {
+      case "ArrowRight":
+        n = r + g * t;
+        break;
+      case "ArrowLeft":
+        n = r - g * t;
+        break;
+      case "Home":
+        n = o;
+        break;
+      case "End":
+        n = s;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault(), f(P(n));
+  }, v = () => {
+    R != null && f(P(R));
+  };
+  return (
+    /* A focusable separator is the ARIA window-splitter widget, so it is interactive. */
+    /* @__PURE__ */ d(
+      "div",
+      {
+        ref: c,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-label": w,
+        "aria-valuenow": r,
+        "aria-valuemin": o,
+        "aria-valuemax": s,
+        tabIndex: 0,
+        className: L(
+          "absolute inset-y-0 end-0 -me-1 w-2 touch-none select-none",
+          "dial-resize-handle",
+          k && "dial-resize-handle-cursor-ready",
+          I && "dial-resize-handle-hover",
+          y && "dial-resize-handle-dragging",
+          S,
+          B.resizeHandle
+        ),
+        onPointerEnter: M,
+        onPointerLeave: H,
+        onPointerDown: K,
+        onPointerMove: N,
+        onPointerUp: _,
+        onPointerCancel: _,
+        onKeyDown: X,
+        onDoubleClick: v,
+        children: /* @__PURE__ */ d(
+          j,
+          {
+            tooltip: z,
+            open: I && !y,
+            placement: h(c.current) ? b.Left : b.Right,
+            asChild: !0,
+            children: /* @__PURE__ */ d(
+              "span",
+              {
+                ref: C,
+                "aria-hidden": "true",
+                className: L(
+                  "pointer-events-none fixed top-0 left-0 z-tooltip hidden text-secondary",
+                  "dial-resize-handle-arrow"
+                ),
+                children: /* @__PURE__ */ d(
+                  O,
+                  {
+                    size: q.LG,
+                    stroke: $
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    )
+  );
+};
+export {
+  se as ResizeHandle
+};