@epam/ai-dial-ui-kit 0.15.0-dev.1 → 0.15.0-dev.11

package/dist/components/Dropdown/Dropdown.js

@@ -1,17 +1,18 @@
 import { jsxs as v, Fragment as N, jsx as o } from "react/jsx-runtime";
-import { useFloating as ce, autoUpdate as de, offset as fe, autoPlacement as ue, flip as pe, shift as me, size as he, useClick as ye, useHover as xe, useDismiss as ge, useRole as we, useInteractions as be, FloatingPortal as Ce, FloatingFocusManager as ve } from "@floating-ui/react";
+import { useFloating as ce, autoUpdate as de, offset as fe, autoPlacement as ue, flip as pe, shift as me, size as he, useClick as ye, useHover as xe, useDismiss as ge, useRole as we, useInteractions as Ce, FloatingPortal as be, FloatingFocusManager as ve } from "@floating-ui/react";
 import m from "classnames";
 import { useState as Ne, useRef as Pe, useCallback as h, useId as ke, useEffect as U, useMemo as De } from "react";
-import { DialIcon as Me } from "../Icon/Icon.js";
+import { DialIcon as Ie } from "../Icon/Icon.js";
+import { DIAL_KIT_CLASS as Me } from "../../constants/public-class-names.js";
 import { DropdownTrigger as y, DropdownItemType as X } from "../../types/dropdown.js";
-import { dropdownGap as x, dropdownDividerClassName as Ie, dropdownItemBaseClassName as Ee, dropdownItemDisabledClassName as Fe, dropdownItemDangerClassName as Re, dropdownBaseClassName as Be, dropdownListBaseClassName as $e } from "./constants.js";
-import { DialCloseButton as Ae } from "../CloseButton/CloseButton.js";
-import { mergeClasses as M } from "../../utils/merge-classes.js";
-import { DropdownSubMenuItem as We } from "./DropdownSubMenuItem.js";
-const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.()?.width ?? 0, Ke = ({
+import { dropdownGap as x, dropdownDividerClassName as Ee, dropdownItemBaseClassName as Fe, dropdownItemDisabledClassName as Re, dropdownItemDangerClassName as Ae, dropdownBaseClassName as Be, dropdownListBaseClassName as Le } from "./constants.js";
+import { DialCloseButton as Se } from "../CloseButton/CloseButton.js";
+import { mergeClasses as I } from "../../utils/merge-classes.js";
+import { DropdownSubMenuItem as $e } from "./DropdownSubMenuItem.js";
+const We = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.()?.width ?? 0, Je = ({
   children: c,
   items: g,
-  onItemClick: I,
+  onItemClick: M,
   menuHeader: d,
   menuFooter: f,
   renderOverlay: P,
@@ -21,51 +22,51 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
   open: F,
   defaultOpen: Y = !1,
   onOpenChange: R,
-  closable: z = !1,
-  onClose: G,
-  className: q,
-  overlayContentClassName: B,
-  separatorClassName: $,
-  listClassName: J,
-  outsidePressIgnoreRef: A,
-  outsideClosable: K = !0,
-  allowedPlacements: Q,
+  closable: _ = !1,
+  onClose: z,
+  className: G,
+  overlayContentClassName: A,
+  separatorClassName: B,
+  listClassName: K,
+  outsidePressIgnoreRef: L,
+  outsideClosable: T = !0,
+  allowedPlacements: q,
   anchorToMouse: w = !1,
   matchReferenceWidth: k = !0,
-  maxDropdownHeight: W
+  maxDropdownHeight: S
 }) => {
-  const [T, V] = Ne(Y), D = F !== void 0, s = D ? !!F : T, b = Pe(null), n = h(
+  const [J, Q] = Ne(Y), D = F !== void 0, s = D ? !!F : J, C = Pe(null), n = h(
     (e) => {
-      D || V(e), R?.(e);
+      D || Q(e), R?.(e);
     },
     [D, R]
-  ), j = ke(), Z = E === void 0, { refs: a, floatingStyles: _, context: u } = ce({
+  ), $ = ke(), V = E === void 0, { refs: a, floatingStyles: Z, context: u } = ce({
     placement: E,
     open: s,
     onOpenChange: n,
     whileElementsMounted: de,
     middleware: [
       fe({ mainAxis: x, crossAxis: 0 }),
-      Z ? ue({
+      V ? ue({
         alignment: "start",
         crossAxis: !0,
         padding: x,
-        allowedPlacements: Q
+        allowedPlacements: q
       }) : pe({ padding: x }),
       me({ padding: x }),
       he({
         padding: x,
         apply({ availableWidth: e, availableHeight: t, elements: p }) {
-          const l = p.floating, O = je(p.reference);
+          const l = p.floating, j = We(p.reference);
           l.style.setProperty(
             "--fui-available-height",
             `${Math.floor(t)}px`
           ), l.style.setProperty(
             "--reference-width",
-            k ? `${Math.round(O)}px` : "0px"
-          ), k ? l.style.minWidth = `${Math.round(O)}px` : l.style.removeProperty("min-width"), l.style.maxWidth = `${Math.floor(e)}px`;
-          const S = Math.floor(t);
-          l.style.maxHeight = `${W ? Math.min(S, W) : S}px`;
+            k ? `${Math.round(j)}px` : "0px"
+          ), k ? l.style.minWidth = `${Math.round(j)}px` : l.style.removeProperty("min-width"), l.style.maxWidth = `${Math.floor(e)}px`;
+          const O = Math.floor(t);
+          l.style.maxHeight = `${S ? Math.min(O, S) : O}px`;
         }
       })
     ]
@@ -80,16 +81,16 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
     bubbles: !0,
     referencePress: !1,
     outsidePress: (e) => {
-      if (!K) return !1;
+      if (!T) return !1;
       const t = e.target;
-      return !(A?.current && t instanceof Node && A.current.contains(t));
+      return !(L?.current && t instanceof Node && L.current.contains(t));
     }
-  }), ne = we(u, { role: "menu" }), { getReferenceProps: oe, getFloatingProps: re } = be([
+  }), ne = we(u, { role: "menu" }), { getReferenceProps: oe, getFloatingProps: re } = Ce([
     H,
     ee,
     te,
     ne
-  ]), C = h(
+  ]), b = h(
     (e, t) => {
       a.setPositionReference({
         getBoundingClientRect: () => ({
@@ -107,51 +108,55 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
     [a]
   ), se = h(
     (e) => {
-      !i.includes(y.ContextMenu) || r || (e.preventDefault(), w && (C(e.clientX, e.clientY), b.current = document.elementFromPoint(
+      !i.includes(y.ContextMenu) || r || (e.preventDefault(), w && (b(e.clientX, e.clientY), C.current = document.elementFromPoint(
         e.clientX,
         e.clientY
       )), n(!0));
     },
-    [w, r, n, C, i]
+    [w, r, n, b, i]
   ), le = h(
     (e) => {
-      !w || r || (i.includes(y.ContextMenu) && s && n(!1), C(e.clientX, e.clientY), b.current = document.elementFromPoint(
+      !w || r || (i.includes(y.ContextMenu) && s && n(!1), b(e.clientX, e.clientY), C.current = document.elementFromPoint(
         e.clientX,
         e.clientY
       ));
     },
-    [w, r, C, s, i, n]
+    [w, r, b, s, i, n]
   );
   U(() => {
     r && s && n(!1);
   }, [r, s, n]);
-  const L = h(
+  const W = h(
     (e) => (t) => {
-      e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), I?.({ key: e.key, domEvent: t }), n(!1));
+      e.disabled || (e.onClick?.({ key: e.key, domEvent: t }), M?.({ key: e.key, domEvent: t }), n(!1));
     },
-    [I, n]
+    [M, n]
   ), ie = De(() => P ? P() : g ? /* @__PURE__ */ v(N, { children: [
     d && /* @__PURE__ */ o(N, { children: typeof d == "function" ? d() : d }),
     /* @__PURE__ */ o(
       "div",
       {
         role: "none",
-        className: M("py-1", B),
+        className: I(
+          "py-1",
+          A,
+          Me.dropdownList
+        ),
         "aria-label": "dropdown",
         children: g.map((e) => e.type === X.Divider ? /* @__PURE__ */ o(
           "div",
           {
             role: "separator",
-            className: M(
-              Ie,
-              $
+            className: I(
+              Ee,
+              B
             )
           },
           e.key
         ) : e.type === X.PlainText ? /* @__PURE__ */ o(
           "div",
           {
-            className: M(
+            className: I(
               "px-3 py-2 text-secondary dial-caption-text",
               e.className
             ),
@@ -159,7 +164,7 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
           },
           e.key
         ) : e.children?.length ? /* @__PURE__ */ o(
-          We,
+          $e,
           {
             item: e,
             onRootClose: () => n(!1)
@@ -172,13 +177,13 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
             type: "button",
             "aria-disabled": !!e.disabled,
             className: m(
-              Ee,
-              e.disabled && Fe,
-              e.danger && Re,
+              Fe,
+              e.disabled && Re,
+              e.danger && Ae,
               e.className
             ),
             disabled: e.disabled,
-            onClick: L(e),
+            onClick: W(e),
             children: [
               e.icon && /* @__PURE__ */ o(
                 "span",
@@ -187,7 +192,7 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
                     e.danger && "text-error",
                     e.disabled && "text-secondary"
                   ),
-                  children: /* @__PURE__ */ o(Me, { icon: e.icon })
+                  children: /* @__PURE__ */ o(Ie, { icon: e.icon })
                 }
               ),
               /* @__PURE__ */ o(
@@ -210,14 +215,14 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
     ),
     f && /* @__PURE__ */ o(N, { children: typeof f == "function" ? f() : f })
   ] }) : null, [
-    L,
+    W,
     g,
     f,
     d,
     P,
     n,
-    B,
-    $
+    A,
+    B
   ]), ae = oe({
     onContextMenu: se,
     onMouseDown: le
@@ -226,7 +231,7 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
     if (!s) return;
     const e = a.reference.current;
     let t = null;
-    if (e instanceof Element ? t = e : b.current instanceof Element && (t = b.current), !t) return;
+    if (e instanceof Element ? t = e : C.current instanceof Element && (t = C.current), !t) return;
     const p = new IntersectionObserver(
       ([l]) => {
         l.isIntersecting || n(!1);
@@ -242,16 +247,16 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
         className: m(
           Be,
           r && "!cursor-not-allowed opacity-75",
-          q
+          G
         ),
         "aria-haspopup": "menu",
         "aria-expanded": s,
-        "aria-controls": j,
+        "aria-controls": $,
         ...ae,
         children: c
       }
     ),
-    s && /* @__PURE__ */ o(Ce, { children: /* @__PURE__ */ o(
+    s && /* @__PURE__ */ o(be, { children: /* @__PURE__ */ o(
       ve,
       {
         context: u,
@@ -261,22 +266,22 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
         children: /* @__PURE__ */ v(
           "div",
           {
-            id: j,
+            id: $,
             ref: a.setFloating,
-            style: _,
+            style: Z,
             className: m(
-              $e,
+              Le,
               !k && "w-max",
-              J
+              K
             ),
             ...re(),
             children: [
-              z && /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ o(
-                Ae,
+              _ && /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-2 pt-2", children: /* @__PURE__ */ o(
+                Se,
                 {
                   ariaLabel: "Close dropdown",
                   onClose: (e) => {
-                    G?.(e), n(!1);
+                    z?.(e), n(!1);
                   }
                 }
               ) }),
@@ -289,5 +294,5 @@ const je = (c) => "clientWidth" in c ? c.clientWidth : c.getBoundingClientRect?.
   ] });
 };
 export {
-  Ke as DialDropdown
+  Je as DialDropdown
 };

package/dist/components/Dropdown/DropdownSubMenuItem.js

@@ -1,27 +1,28 @@
-import { jsxs as r, Fragment as f, jsx as s } from "react/jsx-runtime";
+import { jsxs as r, Fragment as N, jsx as s } from "react/jsx-runtime";
 import n from "classnames";
 import { useCallback as y } from "react";
 import { DialIcon as l } from "../Icon/Icon.js";
-import { useSubMenuFloating as g, SubMenuPanel as k } from "../../utils/sub-menu-floating.js";
-import { dropdownGap as C, submenuCaretIcon as w, dropdownItemBaseClassName as c, dropdownItemDisabledClassName as i, dropdownItemDangerClassName as I } from "./constants.js";
-const v = ({
+import { DIAL_KIT_CLASS as g } from "../../constants/public-class-names.js";
+import { useSubMenuFloating as C, SubMenuPanel as k } from "../../utils/sub-menu-floating.js";
+import { dropdownGap as I, submenuCaretIcon as w, dropdownItemBaseClassName as i, dropdownItemDisabledClassName as m, dropdownItemDangerClassName as S } from "./constants.js";
+const A = ({
   item: a,
   onRootClose: o
 }) => {
   const {
     isOpen: t,
     refs: d,
-    floatingStyles: m,
-    context: b,
-    getReferenceProps: p,
+    floatingStyles: c,
+    context: p,
+    getReferenceProps: b,
     getFloatingProps: u
-  } = g(C, "menu", !!a.disabled), x = y(
-    (e) => (N) => {
-      e.disabled || (e.onClick?.({ key: e.key, domEvent: N }), o());
+  } = C(I, "menu", !!a.disabled), x = y(
+    (e) => (f) => {
+      e.disabled || (e.onClick?.({ key: e.key, domEvent: f }), o());
     },
     [o]
   );
-  return /* @__PURE__ */ r(f, { children: [
+  return /* @__PURE__ */ r(N, { children: [
     /* @__PURE__ */ r(
       "button",
       {
@@ -33,11 +34,11 @@ const v = ({
         "aria-disabled": !!a.disabled,
         disabled: a.disabled,
         className: n(
-          c,
-          a.disabled && i,
+          i,
+          a.disabled && m,
           a.className
         ),
-        ...p(),
+        ...b(),
         children: [
           a.icon && /* @__PURE__ */ s("span", { className: n(a.disabled && "text-secondary"), children: /* @__PURE__ */ s(l, { icon: a.icon }) }),
           /* @__PURE__ */ s(
@@ -67,55 +68,62 @@ const v = ({
       k,
       {
         refs: d,
-        floatingStyles: m,
-        context: b,
+        floatingStyles: c,
+        context: p,
         getFloatingProps: u,
         role: "menu",
         className: "w-max",
-        children: /* @__PURE__ */ s("div", { role: "none", className: "py-1", children: a.children.map((e) => /* @__PURE__ */ r(
-          "button",
+        children: /* @__PURE__ */ s(
+          "div",
           {
-            role: "menuitem",
-            type: "button",
-            "aria-disabled": !!e.disabled,
-            disabled: e.disabled,
-            className: n(
-              c,
-              e.disabled && i,
-              e.danger && I,
-              e.className
-            ),
-            onClick: x(e),
-            children: [
-              e.icon && /* @__PURE__ */ s(
-                "span",
-                {
-                  className: n(
-                    e.danger && "text-error",
-                    e.disabled && "text-secondary"
+            role: "none",
+            className: n("py-1", g.dropdownList),
+            children: a.children.map((e) => /* @__PURE__ */ r(
+              "button",
+              {
+                role: "menuitem",
+                type: "button",
+                "aria-disabled": !!e.disabled,
+                disabled: e.disabled,
+                className: n(
+                  i,
+                  e.disabled && m,
+                  e.danger && S,
+                  e.className
+                ),
+                onClick: x(e),
+                children: [
+                  e.icon && /* @__PURE__ */ s(
+                    "span",
+                    {
+                      className: n(
+                        e.danger && "text-error",
+                        e.disabled && "text-secondary"
+                      ),
+                      children: /* @__PURE__ */ s(l, { icon: e.icon })
+                    }
                   ),
-                  children: /* @__PURE__ */ s(l, { icon: e.icon })
-                }
-              ),
-              /* @__PURE__ */ s(
-                "span",
-                {
-                  className: n(
-                    "flex-1 truncate text-start",
-                    e.danger && "text-error",
-                    e.disabled && "text-secondary"
-                  ),
-                  children: e.label
-                }
-              )
-            ]
-          },
-          e.key
-        )) })
+                  /* @__PURE__ */ s(
+                    "span",
+                    {
+                      className: n(
+                        "flex-1 truncate text-start",
+                        e.danger && "text-error",
+                        e.disabled && "text-secondary"
+                      ),
+                      children: e.label
+                    }
+                  )
+                ]
+              },
+              e.key
+            ))
+          }
+        )
       }
     )
   ] });
 };
 export {
-  v as DropdownSubMenuItem
+  A as DropdownSubMenuItem
 };

package/dist/components/Dropdown/constants.js

@@ -1,24 +1,26 @@
 import { jsx as e } from "react/jsx-runtime";
 import o from "classnames";
 import { IconChevronRight as r } from "@tabler/icons-react";
-const n = o(
+import { DIAL_KIT_CLASS as s } from "../../constants/public-class-names.js";
+const m = o(
   "flex items-center gap-2 align-middle",
   "h-auto px-0 bg-transparent border-0"
-), d = o(
-  "z-[53] overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-none"
 ), i = o(
+  "z-[53] overflow-auto rounded bg-layer-0 text-primary shadow focus-visible:outline-none"
+), l = o(
   "flex w-full cursor-pointer items-center gap-3",
   "focus-visible:border-none focus-visible:outline-none",
   "hover:bg-accent-primary-alpha px-3",
-  "dial-small-text h-[34px] rounded text-primary"
-), l = "opacity-75 !cursor-not-allowed", m = "text-error", p = "my-1 border-t border-hover border-secondary", c = 4, u = /* @__PURE__ */ e(r, { size: 14 });
+  "dial-small-text h-[34px] rounded text-primary",
+  s.menuItem
+), p = "opacity-75 !cursor-not-allowed", c = "text-error", u = "my-1 border-t border-hover border-secondary", b = 4, f = /* @__PURE__ */ e(r, { size: 14 });
 export {
-  n as dropdownBaseClassName,
-  p as dropdownDividerClassName,
-  c as dropdownGap,
-  i as dropdownItemBaseClassName,
-  m as dropdownItemDangerClassName,
-  l as dropdownItemDisabledClassName,
-  d as dropdownListBaseClassName,
-  u as submenuCaretIcon
+  m as dropdownBaseClassName,
+  u as dropdownDividerClassName,
+  b as dropdownGap,
+  l as dropdownItemBaseClassName,
+  c as dropdownItemDangerClassName,
+  p as dropdownItemDisabledClassName,
+  i as dropdownListBaseClassName,
+  f as submenuCaretIcon
 };

package/dist/components/DropdownIcon/DropdownIcon.js

@@ -1,44 +1,45 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import { IconChevronDown as O } from "@tabler/icons-react";
 import { useState as j } from "react";
-import { DialDropdown as w } from "../Dropdown/Dropdown.js";
+import { DialDropdown as L } from "../Dropdown/Dropdown.js";
 import { DialIcon as m } from "../Icon/Icon.js";
-import { DIAL_ICON_SIZE as E } from "../../constants/icon.js";
+import { DIAL_ICON_SIZE as _ } from "../../constants/icon.js";
+import { DIAL_KIT_CLASS as p } from "../../constants/public-class-names.js";
 import { ElementSize as r } from "../../types/size.js";
 import { mergeClasses as o } from "../../utils/merge-classes.js";
 const F = ({
-  icon: p,
+  icon: f,
   ariaLabel: b,
   size: n = r.Standard,
   disabled: a = !1,
-  className: f,
-  buttonClassName: u,
-  iconClassName: x,
-  caretIcon: h = /* @__PURE__ */ e(O, { size: E.SM }),
+  className: u,
+  buttonClassName: x,
+  iconClassName: h,
+  caretIcon: y = /* @__PURE__ */ e(O, { size: _.SM }),
   showCaret: t = !0,
-  placement: y = "bottom-start",
-  matchReferenceWidth: g = !1,
+  placement: g = "bottom-start",
+  matchReferenceWidth: S = !1,
   open: v,
-  onOpenChange: S,
+  onOpenChange: I,
   defaultOpen: s = !1,
   ...z
 }) => {
-  const i = n === r.Small, [D, C] = j(s), l = v ?? D, I = i ? "w-8 px-0" : "w-10 px-0", N = {
+  const i = n === r.Small, [C, D] = j(s), l = v ?? C, w = i ? "w-8 px-0" : "w-10 px-0", N = {
     [r.Small]: "size-5",
     [r.Standard]: "size-6",
     [r.Large]: "size-7"
   };
   return /* @__PURE__ */ e(
-    w,
+    L,
     {
       ...z,
       disabled: a,
-      placement: y,
-      matchReferenceWidth: g,
-      className: f,
+      placement: g,
+      matchReferenceWidth: S,
+      className: u,
       open: l,
       onOpenChange: (c) => {
-        C(c), S?.(c);
+        D(c), I?.(c);
       },
       defaultOpen: s,
       children: /* @__PURE__ */ d(
@@ -52,35 +53,45 @@ const F = ({
             "enabled:hover:bg-accent-primary-alpha enabled:active:bg-controls-accent-primary-alpha-active",
             "focus-visible:border-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:text-controls-secondary-disable disabled:opacity-75",
             i ? "h-8 px-2" : "h-10 px-2",
-            t ? void 0 : I,
-            u
+            t ? void 0 : w,
+            x
           ),
           children: [
             /* @__PURE__ */ e(
               m,
               {
-                icon: p,
+                icon: f,
                 className: o(
                   "flex items-center justify-center text-inherit",
                   N[n],
                   t && "-mr-2",
-                  x
+                  h,
+                  p.dropdownIcon
                 )
               }
             ),
-            t && /* @__PURE__ */ d("div", { className: "relative z-10 inline-grid size-5 shrink-0 place-items-center", children: [
-              /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-full bg-layer-2" }),
-              /* @__PURE__ */ e(
-                m,
-                {
-                  icon: h,
-                  className: o(
-                    "relative flex items-center justify-center text-secondary transition-transform group-hover:text-primary group-disabled:text-controls-secondary-disable",
-                    l && "rotate-180"
+            t && /* @__PURE__ */ d(
+              "div",
+              {
+                className: o(
+                  "relative z-10 inline-grid size-5 shrink-0 place-items-center",
+                  p.dropdownIconCaret
+                ),
+                children: [
+                  /* @__PURE__ */ e("div", { className: "absolute inset-0 rounded-full bg-layer-2" }),
+                  /* @__PURE__ */ e(
+                    m,
+                    {
+                      icon: y,
+                      className: o(
+                        "relative flex items-center justify-center text-secondary transition-transform group-hover:text-primary group-disabled:text-controls-secondary-disable",
+                        l && "rotate-180"
+                      )
+                    }
                   )
-                }
-              )
-            ] })
+                ]
+              }
+            )
           ]
         }
       )