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

package/dist/components/New/InteractiveTooltip/InteractiveTooltip.js

@@ -1,57 +1,58 @@
-import { jsx as n, jsxs as w, Fragment as D } from "react/jsx-runtime";
-import { useFloatingNodeId as H, useFloating as U, autoUpdate as G, offset as Y, flip as k, shift as q, useHover as z, safePolygon as B, useFocus as J, useDismiss as K, useInteractions as Q, useMergeRefs as u, FloatingPortal as W, FloatingFocusManager as X } from "@floating-ui/react";
+import { jsx as n, jsxs as j, Fragment as w } from "react/jsx-runtime";
+import { useFloatingNodeId as H, useFloating as U, autoUpdate as G, offset as K, flip as Y, shift as k, useHover as q, safePolygon as z, useFocus as B, useDismiss as J, useInteractions as Q, useMergeRefs as u, FloatingPortal as W, FloatingFocusManager as X } from "@floating-ui/react";
 import { useState as Z, useRef as $, useMemo as d, isValidElement as ee, cloneElement as oe } from "react";
-import { useThemeScope as se } from "../ThemeScope/ThemeScope.js";
-import { useIsMobileScreen as te } from "../../../hooks/use-is-mobile-screen.js";
+import { useThemeScope as te } from "../ThemeScope/ThemeScope.js";
+import { useIsMobileScreen as se } from "../../../hooks/use-is-mobile-screen.js";
 import { TooltipPlacement as ne } from "../../../types/tooltip.js";
 import { mergeClasses as g } from "../../../utils/merge-classes.js";
 import { INTERACTIVE_TOOLTIP_GAP as le, INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY as ae, interactiveTooltipClassName as re } from "./constants.js";
+import { DIAL_KIT_CLASS as ie } from "../../../constants/public-class-names.js";
 const Re = ({
   content: a,
-  placement: R = ne.Right,
+  placement: T = ne.Right,
   children: e,
-  asChild: F = !1,
-  hideTooltip: T = !1,
-  initialOpen: h = !1,
-  open: s,
-  onOpenChange: I,
+  asChild: I = !1,
+  hideTooltip: R = !1,
+  initialOpen: F = !1,
+  open: t,
+  onOpenChange: h,
   triggerClassName: r,
   contentClassName: E
 }) => {
-  const P = te(), C = se(), [N, O] = Z(h), i = s ?? N, v = (m) => {
-    I?.(m), s == null && O(m);
-  }, M = H(), { refs: t, floatingStyles: _, context: o } = U({
-    nodeId: M,
-    placement: R,
+  const P = se(), C = te(), [v, N] = Z(F), i = t ?? v, O = (m) => {
+    h?.(m), t == null && N(m);
+  }, _ = H(), { refs: s, floatingStyles: S, context: o } = U({
+    nodeId: _,
+    placement: T,
     open: i,
-    onOpenChange: v,
+    onOpenChange: O,
     whileElementsMounted: G,
     middleware: [
-      Y(le),
+      K(le),
       /* No `fallbackAxisSideDirection`: a panel placed to the right should
        flip to the left when it does not fit, not drop to the perpendicular
        top/bottom axis, which reads as the panel landing in the wrong place.*/
-      k({ padding: 5 }),
-      q({ padding: 5 })
+      Y({ padding: 5 }),
+      k({ padding: 5 })
     ]
-  }), S = z(o, {
-    enabled: s == null,
+  }), A = q(o, {
+    enabled: t == null,
     /* Lets the pointer cross the gap between the trigger and the panel
        without closing it, so it can actually be reached and used. */
-    handleClose: B(),
+    handleClose: z(),
     delay: { open: ae, close: 0 }
-  }), V = J(o, { enabled: s == null }), b = K(o), { getReferenceProps: c, getFloatingProps: x } = Q([
-    S,
-    V,
-    b
-  ]), y = $(null), A = u(
-    d(() => [t.setFloating, y], [t.setFloating])
-  ), f = F && ee(e), l = f ? e.props?.ref : null, p = u(
+  }), M = B(o, { enabled: t == null }), L = J(o), { getReferenceProps: c, getFloatingProps: V } = Q([
+    A,
+    M,
+    L
+  ]), b = $(null), x = u(
+    d(() => [s.setFloating, b], [s.setFloating])
+  ), f = I && ee(e), l = f ? e.props?.ref : null, p = u(
     d(
-      () => [t.setReference, ...l ? [l] : []],
-      [t.setReference, l]
+      () => [s.setReference, ...l ? [l] : []],
+      [s.setReference, l]
     )
-  ), L = !T && !P && !!a, j = f ? oe(
+  ), y = !R && !P && !!a, D = f ? oe(
     e,
     c({
       ...e.props,
@@ -70,9 +71,9 @@ const Re = ({
       children: e
     }
   );
-  return /* @__PURE__ */ w(D, { children: [
-    j,
-    i && L && /* @__PURE__ */ n(W, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ j(w, { children: [
+    D,
+    i && y && /* @__PURE__ */ n(W, { id: "interactive-tooltip-portal", children: /* @__PURE__ */ n(
       X,
       {
         context: o,
@@ -83,14 +84,15 @@ const Re = ({
         children: /* @__PURE__ */ n(
           "div",
           {
-            ref: A,
+            ref: x,
             "data-placement": o.placement,
-            style: _,
-            ...x(),
+            style: S,
+            ...V(),
             className: g(
               re,
               C,
-              E
+              E,
+              ie.interactiveTooltip
             ),
             children: a
           }

package/dist/components/New/InteractiveTooltip/constants.js

@@ -1,6 +1,6 @@
-const t = 8, a = 400, T = "z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";
+const t = 8, a = 400, e = "z-interactive-tooltip max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";
 export {
   t as INTERACTIVE_TOOLTIP_GAP,
   a as INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY,
-  T as interactiveTooltipClassName
+  e as interactiveTooltipClassName
 };

package/dist/components/New/Label/Label.js

@@ -1,19 +1,24 @@
 import { jsxs as t, jsx as r, Fragment as d } from "react/jsx-runtime";
 import { mergeClasses as s } from "../../../utils/merge-classes.js";
-import { ElementSize as n } from "../../../types/size.js";
+import { ElementSize as a } from "../../../types/size.js";
 import { InfoButton as p } from "../InfoButton/InfoButton.js";
-const g = ({
+import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
+const N = ({
   label: e,
-  required: a,
+  required: n,
   className: i,
   containerClassName: l,
   caption: m,
-  size: o = n.Small,
+  size: o = a.Small,
   ...c
 }) => e ? /* @__PURE__ */ t(
   "span",
   {
-    className: s("flex items-center gap-0.5", l),
+    className: s(
+      "flex items-center gap-0.5",
+      l,
+      f.label
+    ),
     children: [
       /* @__PURE__ */ t(
         "label",
@@ -21,12 +26,12 @@ const g = ({
           ...c,
           className: s(
             "text-secondary flex items-center gap-0.5",
-            o === n.Small ? "dial-tiny-semi-text" : "dial-small-text",
+            o === a.Small ? "dial-tiny-semi-text" : "dial-small-text",
             i
           ),
           children: [
             typeof e == "string" ? /* @__PURE__ */ r("span", { className: "min-h-4", children: e }) : e,
-            a && /* @__PURE__ */ t(d, { children: [
+            n && /* @__PURE__ */ t(d, { children: [
               /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "text-error dial-tiny-text", children: "*" }),
               /* @__PURE__ */ r("span", { className: "sr-only", children: "(required)" })
             ] })
@@ -38,5 +43,5 @@ const g = ({
   }
 ) : null;
 export {
-  g as Label
+  N as Label
 };

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

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

package/dist/components/New/MenuItem/MenuItem.js

@@ -1,41 +1,43 @@
 import { jsxs as i, Fragment as g, jsx as t } from "react/jsx-runtime";
 import { DialIcon as k } from "../../Icon/Icon.js";
-import { CheckboxBox as H } from "../Checkbox/CheckboxBox.js";
-import { EllipsisTooltip as M } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { overlayItemDisabledClassName as T, overlayItemSelectedClassName as j, overlayItemHighlightClassName as D, overlayItemClassName as S } from "../constants/overlay.js";
-import { MenuItemMark as s } from "../../../types/menu-item.js";
+import { CheckboxBox as S } from "../Checkbox/CheckboxBox.js";
+import { EllipsisTooltip as T } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { overlayItemDisabledClassName as D, overlayItemSelectedClassName as H, overlayItemHighlightClassName as M, overlayItemClassName as j } from "../constants/overlay.js";
+import { DIAL_KIT_CLASS as A } from "../../../constants/public-class-names.js";
+import { MenuItemMark as o } from "../../../types/menu-item.js";
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-import { menuItemCheckIcon as B } from "./constants.js";
-const L = ({
+import { menuItemCheckIcon as L } from "./constants.js";
+const O = ({
   label: l,
   icon: c,
   description: f,
-  mark: o = s.None,
+  mark: s = o.None,
   selected: r = !1,
-  danger: h = !1,
-  trailing: u,
+  danger: u = !1,
+  trailing: h,
   rightControl: m,
-  ellipsisLabel: v = !1,
+  ellipsisLabel: I = !1,
   labelClassName: x,
-  children: d,
-  className: I,
+  children: v,
+  className: d,
   disabled: a = !1,
   type: C = "button",
   ...w
 }) => {
-  const y = r && o === s.Highlight, b = r && (o === s.Checkbox || o === s.Tint), n = e(
-    h && "text-error",
+  const y = r && s === o.Highlight, b = r && (s === o.Checkbox || s === o.Tint), n = e(
+    u && "text-error",
     a && "text-control-disable-primary"
   ), p = e(
-    S,
+    j,
     // A row that opens a panel stays tinted while that panel is up, so the
     // trail back to it is visible once the pointer has moved into it.
     "aria-expanded:bg-control-accent-alpha-hover",
-    y && D,
-    b && j,
-    a && T,
-    h && "text-error",
-    I
+    y && M,
+    b && H,
+    a && D,
+    u && "text-error",
+    d,
+    A.menuItem
   ), N = /* @__PURE__ */ i(
     "button",
     {
@@ -45,11 +47,11 @@ const L = ({
       className: m ? "flex h-full min-w-0 flex-1 items-center gap-2 truncate text-start focus-visible:outline-none" : p,
       ...w,
       children: [
-        d ?? /* @__PURE__ */ i(g, { children: [
-          o === s.Checkbox && /* @__PURE__ */ t(H, { isSelected: r, disabled: a }),
+        v ?? /* @__PURE__ */ i(g, { children: [
+          s === o.Checkbox && /* @__PURE__ */ t(S, { isSelected: r, disabled: a }),
           c && /* @__PURE__ */ t(k, { icon: c, className: n }),
-          v ? /* @__PURE__ */ t(
-            M,
+          I ? /* @__PURE__ */ t(
+            T,
             {
               text: l,
               className: e(n, x)
@@ -75,9 +77,9 @@ const L = ({
               children: f
             }
           ),
-          r && o === s.Check && B
+          r && s === o.Check && L
         ] }),
-        u && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", n), children: u })
+        h && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", n), children: h })
       ]
     }
   );
@@ -104,5 +106,5 @@ const L = ({
   ) : N;
 };
 export {
-  L as MenuItem
+  O as MenuItem
 };

package/dist/components/New/MenuItem/constants.js

@@ -1,16 +1,17 @@
-import { jsx as o } from "react/jsx-runtime";
-import { IconCheck as r } from "@tabler/icons-react";
-import { DIAL_KIT_ICON_STROKE as m } from "../constants/icon.js";
+import { jsx as m } from "react/jsx-runtime";
+import { IconCheck as o } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as r } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as e } from "../../../constants/icon.js";
-const c = /* @__PURE__ */ o(
-  r,
+import { DIAL_KIT_CLASS as I } from "../../../constants/public-class-names.js";
+const _ = /* @__PURE__ */ m(
+  o,
   {
     size: e.SM,
-    stroke: m,
-    className: "shrink-0",
+    stroke: r,
+    className: `shrink-0 ${I.menuItemCheck}`,
     "aria-hidden": !0
   }
 );
 export {
-  c as menuItemCheckIcon
+  _ as menuItemCheckIcon
 };

package/dist/components/New/NoDataContent/NoDataContent.js

@@ -1,28 +1,30 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import m from "../../../assets/icons/no-data.svg.js";
+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";
-const s = 32, p = ({
-  title: r,
+import { DIAL_KIT_CLASS as x } from "../../../constants/public-class-names.js";
+const r = 32, N = ({
+  title: s,
   description: a,
-  icon: i,
-  live: l = !1,
+  icon: o,
+  live: i = !1,
   className: n,
-  titleClassName: o,
-  descriptionClassName: c
-}) => /* @__PURE__ */ d(
+  titleClassName: l,
+  descriptionClassName: m
+}) => /* @__PURE__ */ c(
   "div",
   {
-    role: l ? "status" : void 0,
+    role: i ? "status" : void 0,
     className: e(
       "flex size-full flex-col items-center justify-center gap-2 text-tertiary",
-      n
+      n,
+      x.noDataContent
     ),
     children: [
-      i ?? /* @__PURE__ */ t(
-        m,
+      o ?? /* @__PURE__ */ t(
+        d,
         {
-          width: s,
-          height: s,
+          width: r,
+          height: r,
           "aria-hidden": "true"
         }
       ),
@@ -31,9 +33,9 @@ const s = 32, p = ({
         {
           className: e(
             "dial-tiny-text text-secondary",
-            o
+            l
           ),
-          children: r
+          children: s
         }
       ),
       a && /* @__PURE__ */ t(
@@ -41,7 +43,7 @@ const s = 32, p = ({
         {
           className: e(
             "dial-tiny-text text-secondary",
-            c
+            m
           ),
           children: a
         }
@@ -50,5 +52,5 @@ const s = 32, p = ({
   }
 );
 export {
-  p as NoDataContent
+  N as NoDataContent
 };

package/dist/components/New/Notification/Notification.js

@@ -1,46 +1,49 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { useMemo as u } from "react";
-import { DialIcon as v } from "../../Icon/Icon.js";
-import { NotificationVariant as n, NotificationType as s } from "../../../types/notification.js";
-import { mergeClasses as c } from "../../../utils/merge-classes.js";
-import { CloseButton as C } from "../CloseButton/CloseButton.js";
-import { variantIcons as k, notificationVariantRoleMap as M, notificationVariantClassNameMap as T, alertBaseClassName as I } from "./constants.js";
+import { useMemo as k } from "react";
+import { DialIcon as u } from "../../Icon/Icon.js";
+import { NotificationVariant as c, NotificationType as s } from "../../../types/notification.js";
+import { mergeClasses as d } from "../../../utils/merge-classes.js";
+import { CloseButton as v } from "../CloseButton/CloseButton.js";
+import { variantIcons as I, notificationVariantRoleMap as M, notificationVariantClassNameMap as T, alertBaseClassName as L } from "./constants.js";
+import { DIAL_KIT_CLASS as V } from "../../../constants/public-class-names.js";
 const R = ({
-  variant: e = n.Info,
+  variant: e = c.Info,
   type: i = s.Toast,
   title: o,
   message: l,
-  className: d,
-  iconSize: t = 24,
-  iconStroke: m = 2,
+  action: t,
+  className: f,
+  iconSize: m = 24,
+  iconStroke: n = 2,
   closable: p = !1,
-  onClose: f,
-  children: x,
-  textClassName: h,
-  ...N
+  onClose: x,
+  children: h,
+  textClassName: N,
+  ...w
 }) => {
-  const w = u(() => k({ size: t, stroke: m })[e], [e, t, m]), g = h ?? (i === s.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
+  const g = k(() => I({ size: m, stroke: n })[e], [e, m, n]), C = N ?? (i === s.SectionMessage ? "flex-row flex-wrap items-baseline gap-x-1" : "flex-col");
   return /* @__PURE__ */ r(
     "div",
     {
       role: M[e],
-      ...N,
-      className: c(
-        I,
+      ...w,
+      className: d(
+        L,
         T[e],
         i === s.Toast && "min-w-[200px] max-w-[600px] shadow-lg",
-        i === s.SectionMessage && e === n.Loading && "border-secondary",
-        d
+        i === s.SectionMessage && e === c.Loading && "border-secondary",
+        f,
+        V.notification
       ),
       children: [
         /* @__PURE__ */ r("div", { className: "flex items-start gap-3 flex-1 min-w-0", children: [
-          /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "flex shrink-0", children: /* @__PURE__ */ a(v, { icon: w }) }),
+          /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "flex shrink-0", children: /* @__PURE__ */ a(u, { icon: g }) }),
           o ? /* @__PURE__ */ r(
             "div",
             {
-              className: c(
+              className: d(
                 "flex min-w-0 text-primary break-words",
-                g
+                C
               ),
               children: [
                 /* @__PURE__ */ a("div", { className: "dial-small-paragraph-semi-text min-w-0 break-words", children: o }),
@@ -49,15 +52,16 @@ const R = ({
             }
           ) : /* @__PURE__ */ a("div", { className: "dial-small-paragraph-text min-w-0 text-primary break-words", children: l })
         ] }),
-        x,
-        p && /* @__PURE__ */ a("div", { className: "relative size-[40px]", children: /* @__PURE__ */ a(
-          C,
+        t != null && /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center", children: t }),
+        h,
+        p && /* @__PURE__ */ a(
+          v,
           {
-            className: "absolute top-[-2px] right-0 size-auto hover:bg-transparent ",
+            className: "shrink-0 self-start",
             ariaLabel: "Close notification",
-            onClose: (b) => f?.(b)
+            onClose: (b) => x?.(b)
           }
-        ) })
+        )
       ]
     }
   );

package/dist/components/New/NumberInput/NumberInput.js

@@ -1,41 +1,50 @@
-import { jsx as p } from "react/jsx-runtime";
-import { Input as D } from "../Input/Input.js";
-import { handleKeyDown as y } from "../Input/utils.js";
-const g = /^0+\.(\d+)?$/, h = /^0+/, N = [".", "-", "+", "e", "E"], l = (t) => !t || t === "-" ? t : String(t).match(g) ? String(t).replace(h, "0") : Number(t), S = ({
+import { jsx as g } from "react/jsx-runtime";
+import { Input as y } from "../Input/Input.js";
+import { handleKeyDown as N } from "../Input/utils.js";
+import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
+import { mergeClasses as h } from "../../../utils/merge-classes.js";
+const I = /^0+\.(\d+)?$/, K = /^0+/, S = [".", "-", "+", "e", "E"], l = (t) => !t || t === "-" ? t : String(t).match(I) ? String(t).replace(K, "0") : Number(t), k = ({
   integer: t,
   onChange: o,
   min: s,
   max: a,
-  onKeyDown: d,
-  onPaste: i,
-  ...m
-}) => /* @__PURE__ */ p(
-  D,
-  {
-    ...m,
-    type: "number",
-    min: s,
-    max: a,
-    onChange: (e) => o?.(l(e)),
-    onKeyDown: (e) => {
-      if (t && N.includes(e.key)) {
-        e.preventDefault();
-        return;
-      }
-      y(e, "number", s, a), d?.(e);
-    },
-    onPaste: (e) => {
-      if (t) {
-        const c = e.clipboardData.getData("text"), r = c.replace(/\D/g, "");
-        if (r !== c && (e.preventDefault(), r)) {
-          const n = e.currentTarget, u = n.selectionStart ?? 0, b = n.selectionEnd ?? 0, f = n.value.slice(0, u) + r + n.value.slice(b);
-          o?.(l(f));
-        }
+  onKeyDown: i,
+  onPaste: p,
+  ...c
+}) => {
+  const u = (e) => {
+    if (t && S.includes(e.key)) {
+      e.preventDefault();
+      return;
+    }
+    N(e, "number", s, a), i?.(e);
+  }, d = (e) => {
+    if (t) {
+      const m = e.clipboardData.getData("text"), n = m.replace(/\D/g, "");
+      if (n !== m && (e.preventDefault(), n)) {
+        const r = e.currentTarget, f = r.selectionStart ?? 0, b = r.selectionEnd ?? 0, D = r.value.slice(0, f) + n + r.value.slice(b);
+        o?.(l(D));
       }
-      i?.(e);
     }
-  }
-);
+    p?.(e);
+  };
+  return /* @__PURE__ */ g(
+    y,
+    {
+      ...c,
+      wrapperClassName: h(
+        c.wrapperClassName,
+        w.numberInput
+      ),
+      type: "number",
+      min: s,
+      max: a,
+      onChange: (e) => o?.(l(e)),
+      onKeyDown: u,
+      onPaste: d
+    }
+  );
+};
 export {
-  S as NumberInput
+  k as NumberInput
 };