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

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 i = 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(
+), m = o(
+  "z-floating 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
+  i as dropdownBaseClassName,
+  u as dropdownDividerClassName,
+  b as dropdownGap,
+  l as dropdownItemBaseClassName,
+  c as dropdownItemDangerClassName,
+  p as dropdownItemDisabledClassName,
+  m 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"
+                      )
+                    }
                   )
-                }
-              )
-            ] })
+                ]
+              }
+            )
           ]
         }
       )