@epam/ai-dial-ui-kit 0.15.0-dev.3 → 0.15.0-dev.30

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

package/dist/components/New/PasswordInput/PasswordInput.js

@@ -1,55 +1,61 @@
-import { jsx as t } from "react/jsx-runtime";
-import { IconEyeOff as S, IconEye as u } from "@tabler/icons-react";
-import { useState as l, useEffect as d } from "react";
-import { GhostIconButton as E } from "../IconButton/IconButtonWrappers.js";
-import { Input as w } from "../Input/Input.js";
+import { jsx as e } from "react/jsx-runtime";
+import { IconEyeOff as c, IconEye as l } from "@tabler/icons-react";
+import { useState as u, useEffect as w } from "react";
+import { GhostIconButton as d } from "../IconButton/IconButtonWrappers.js";
+import { Input as C } from "../Input/Input.js";
 import { DIAL_KIT_ICON_STROKE as i } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
-import { ElementSize as m } from "../../../types/size.js";
-const C = ({
-  showPasswordLabel: n = "Show password",
-  hidePasswordLabel: a = "Hide password",
-  disabled: o,
-  size: f = m.Standard,
-  ...p
+import { DIAL_ICON_SIZE as m } from "../../../constants/icon.js";
+import { ElementSize as a } from "../../../types/size.js";
+import { DIAL_KIT_CLASS as _ } from "../../../constants/public-class-names.js";
+import { mergeClasses as E } from "../../../utils/merge-classes.js";
+const K = ({
+  showPasswordLabel: p = "Show password",
+  hidePasswordLabel: f = "Hide password",
+  disabled: r,
+  size: n = a.Standard,
+  ...t
 }) => {
-  const [I, e] = l(!1), r = I && !o;
-  return d(() => {
-    o && e(!1);
-  }, [o]), /* @__PURE__ */ t(
-    w,
+  const [I, s] = u(!1), o = I && !r;
+  return w(() => {
+    r && s(!1);
+  }, [r]), /* @__PURE__ */ e(
+    C,
     {
-      ...p,
-      size: f,
-      disabled: o,
-      type: r ? "text" : "password",
-      iconAfter: o ? void 0 : /* @__PURE__ */ t(
-        E,
+      ...t,
+      wrapperClassName: E(
+        t.wrapperClassName,
+        _.passwordInput
+      ),
+      size: n,
+      disabled: r,
+      type: o ? "text" : "password",
+      iconAfter: r ? void 0 : /* @__PURE__ */ e(
+        d,
         {
-          size: m.Small,
-          "aria-label": r ? a : n,
-          "aria-pressed": r,
-          icon: r ? /* @__PURE__ */ t(
-            S,
+          size: a.Small,
+          "aria-label": o ? f : p,
+          "aria-pressed": o,
+          icon: o ? /* @__PURE__ */ e(
+            c,
             {
-              size: s.SM,
+              size: m.SM,
               stroke: i,
               "aria-hidden": "true"
             }
-          ) : /* @__PURE__ */ t(
-            u,
+          ) : /* @__PURE__ */ e(
+            l,
             {
-              size: s.SM,
+              size: m.SM,
               stroke: i,
               "aria-hidden": "true"
             }
           ),
-          onClick: () => e((c) => !c)
+          onClick: () => s((S) => !S)
         }
       )
     }
   );
 };
 export {
-  C as PasswordInput
+  K as PasswordInput
 };

package/dist/components/New/Popup/Popup.js

@@ -7,57 +7,58 @@ import { GhostIconButton as ie } from "../IconButton/IconButtonWrappers.js";
 import { Tooltip as le } from "../Tooltip/Tooltip.js";
 import { DIAL_KIT_ICON_STROKE as te } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as ne } from "../../../constants/icon.js";
-import { ButtonVariant as me } from "../../../types/button.js";
-import { PopupSize as pe } from "../../../types/popup.js";
+import { ButtonVariant as pe } from "../../../types/button.js";
+import { PopupSize as me } from "../../../types/popup.js";
 import { ElementSize as ce } from "../../../types/size.js";
 import { useThemeScope as de } from "../ThemeScope/ThemeScope.js";
 import { mergeClasses as r } from "../../../utils/merge-classes.js";
 import { IconChevronLeft as ue } from "@tabler/icons-react";
-import { popupActionsGroupClassName as l, popupHeaderDividerClassName as fe, popupHeaderClassName as ge, popupSizeClassMap as he, popupBaseClassName as Ne, popupOverlayBaseClassName as ve, popupTitleClassName as Ce, popupFooterDividerClassName as Ie, popupFooterClassName as Fe } from "./constants.js";
-const Oe = ({
+import { popupActionsGroupClassName as l, popupHeaderDividerClassName as fe, popupHeaderClassName as ge, popupSizeClassMap as he, popupBaseClassName as Ne, popupOverlayBaseClassName as Ce, popupTitleClassName as ve, popupFooterDividerClassName as Ie, popupFooterClassName as Fe } from "./constants.js";
+import { DIAL_KIT_CLASS as Se } from "../../../constants/public-class-names.js";
+const $e = ({
   open: t = !1,
   header: n,
   ariaLabel: F,
   portalId: S,
   className: x,
-  overlayClassName: b,
-  titleClassName: z,
-  headerClassName: T,
-  bodyClassName: y,
-  children: B,
-  footer: m,
-  footerClassName: D,
-  onClose: p,
+  overlayClassName: T,
+  titleClassName: _,
+  headerClassName: b,
+  bodyClassName: z,
+  children: D,
+  footer: p,
+  footerClassName: y,
+  onClose: m,
   onBack: c,
-  backAriaLabel: P = "Back",
+  backAriaLabel: B = "Back",
   headerActions: d,
-  headerDivider: _ = !1,
+  headerDivider: L = !1,
   mainButtons: u,
   additionalButtons: f,
   additionalButtonsOnLeft: g = !1,
-  footerDivider: M = !1,
-  size: R = pe.Md,
-  hideClose: w = !1,
-  closeAriaLabel: E = "Close dialog",
-  closeOnOutsideClick: G = !0,
+  footerDivider: P = !1,
+  size: A = me.Md,
+  hideClose: M = !1,
+  closeAriaLabel: R = "Close dialog",
+  closeOnOutsideClick: w = !0,
   preventKeyboardOnOpen: h = !1
 }) => {
-  const L = de(), N = oe(null), O = re(), { refs: v, context: a } = J({
+  const E = de(), N = oe(null), G = re(), { refs: C, context: a } = J({
     open: t,
     onOpenChange: (e) => {
-      e || p?.(null);
+      e || m?.(null);
     }
-  }), $ = Q(a, { role: "dialog" }), j = U(a, { outsidePress: G }), { getFloatingProps: k } = W([$, j]);
+  }), O = Q(a, { role: "dialog" }), $ = U(a, { outsidePress: w }), { getFloatingProps: j } = W([O, $]);
   if (!t) return null;
-  const i = typeof n == "string" ? `popup-heading-${O}` : void 0, A = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
+  const i = typeof n == "string" ? `popup-heading-${G}` : void 0, k = (e) => e ? typeof e == "string" ? /* @__PURE__ */ o(
     "h2",
     {
       id: i,
-      className: r(Ce, z),
+      className: r(ve, _),
       children: /* @__PURE__ */ o(le, { tooltip: e, triggerClassName: "truncate", children: e })
     }
-  ) : e : /* @__PURE__ */ o("span", {}), C = w ? null : /* @__PURE__ */ o(ae, { ariaLabel: E, onClose: (e) => p?.(e) }), I = (e, K = []) => K.map(({ variant: V = me.Neutral, ...Z }, q) => /* @__PURE__ */ o(se, { variant: V, ...Z }, `${e}-${q}`)), H = () => {
-    if (m !== void 0) return m;
+  ) : e : /* @__PURE__ */ o("span", {}), v = M ? null : /* @__PURE__ */ o(ae, { ariaLabel: R, onClose: (e) => m?.(e) }), I = (e, K = []) => K.map(({ variant: V = pe.Neutral, ...Z }, q) => /* @__PURE__ */ o(se, { variant: V, ...Z }, `${e}-${q}`)), H = () => {
+    if (p !== void 0) return p;
     if (!u?.length && !f?.length) return null;
     const e = I("additional", f);
     return /* @__PURE__ */ s(
@@ -65,8 +66,8 @@ const Oe = ({
       {
         className: r(
           Fe,
-          M && Ie,
-          D
+          P && Ie,
+          y
         ),
         children: [
           g && e.length > 0 && /* @__PURE__ */ o("div", { className: l, children: e }),
@@ -82,28 +83,29 @@ const Oe = ({
     Y,
     {
       className: r(
-        ve,
-        L,
-        b
+        Ce,
+        E,
+        T
       ),
       children: /* @__PURE__ */ o(
         ee,
         {
           context: a,
-          initialFocus: h ? N : v.floating,
+          initialFocus: h ? N : C.floating,
           children: /* @__PURE__ */ s(
             "div",
             {
-              ref: v.setFloating,
-              ...k(),
+              ref: C.setFloating,
+              ...j(),
               role: "dialog",
               "aria-modal": "true",
               "aria-labelledby": i,
               "aria-label": i ? void 0 : F,
               className: r(
                 Ne,
-                he[R],
-                x
+                he[A],
+                x,
+                Se.popup
               ),
               children: [
                 h && /* @__PURE__ */ o(
@@ -120,14 +122,14 @@ const Oe = ({
                   {
                     className: r(
                       ge,
-                      _ && fe,
-                      T
+                      L && fe,
+                      b
                     ),
                     children: [
                       c && /* @__PURE__ */ o(
                         ie,
                         {
-                          "aria-label": P,
+                          "aria-label": B,
                           size: ce.Small,
                           className: "mr-2",
                           onClick: c,
@@ -141,15 +143,15 @@ const Oe = ({
                           )
                         }
                       ),
-                      A(n),
+                      k(n),
                       d ? /* @__PURE__ */ s("div", { className: l, children: [
                         d,
-                        C
-                      ] }) : C
+                        v
+                      ] }) : v
                     ]
                   }
                 ),
-                /* @__PURE__ */ o("div", { className: r("grow overflow-auto", y), children: B }),
+                /* @__PURE__ */ o("div", { className: r("grow overflow-auto", z), children: D }),
                 H()
               ]
             }
@@ -160,5 +162,5 @@ const Oe = ({
   ) });
 };
 export {
-  Oe as Popup
+  $e as Popup
 };