@epam/ai-dial-ui-kit 0.14.0-dev.32 → 0.14.0-dev.34

package/dist/components/New/Dropdown/DropdownSubMenuItem.js

@@ -1,127 +1,85 @@
-import { jsxs as s, Fragment as o, jsx as n } from "react/jsx-runtime";
-import { useCallback as y } from "react";
-import { DialIcon as u } from "../../Icon/Icon.js";
-import { mergeClasses as r } from "../../../utils/merge-classes.js";
-import { useSubMenuFloating as g, SubMenuPanel as C } from "../../../utils/sub-menu-floating.js";
-import { dropdownGap as I, submenuCaretIcon as k, dropdownItemDisabledClassName as b, dropdownItemBaseClassName as c, dropdownSubMenuClassName as F, dropdownItemDangerClassName as S } from "./constants.js";
-const v = ({
-  item: e,
-  onRootClose: d
+import { jsxs as t, Fragment as d, jsx as a } from "react/jsx-runtime";
+import { useCallback as g } from "react";
+import { MenuItem as l } from "../MenuItem/MenuItem.js";
+import { MenuItemMark as k } from "../../../types/menu-item.js";
+import { useSubMenuFloating as M, SubMenuPanel as C } from "../../../utils/sub-menu-floating.js";
+import { getItemRole as I, resolveItemMark as m } from "./item-mark.js";
+import { dropdownGap as F, submenuCaretIcon as S, dropdownSubMenuClassName as y } from "./constants.js";
+const R = ({
+  item: r,
+  onRootClose: o
 }) => {
   const {
-    isOpen: t,
-    refs: l,
-    floatingStyles: m,
+    isOpen: s,
+    refs: u,
+    floatingStyles: b,
     context: p,
-    getReferenceProps: i,
+    getReferenceProps: c,
     getFloatingProps: f
-  } = g(I, "menu", !!e.disabled), x = y(
-    (a) => (N) => {
-      a.disabled || (a.onClick?.({ key: a.key, domEvent: N }), d());
+  } = M(F, "menu", !!r.disabled), i = g(
+    (e) => (n) => {
+      e.disabled || (e.onClick?.({ key: e.key, domEvent: n }), e.selectable || o());
     },
-    [d]
+    [o]
   );
-  return /* @__PURE__ */ s(o, { children: [
-    /* @__PURE__ */ s(
-      "button",
+  return /* @__PURE__ */ t(d, { children: [
+    /* @__PURE__ */ a(
+      l,
       {
-        ref: l.setReference,
-        type: "button",
+        ref: u.setReference,
         role: "menuitem",
         "aria-haspopup": "menu",
-        "aria-expanded": t,
-        "aria-disabled": !!e.disabled,
-        disabled: e.disabled,
-        className: r(
-          c,
-          e.disabled && b,
-          e.className
-        ),
-        ...i(),
-        children: [
-          e.renderItem ? e.renderItem(e) : /* @__PURE__ */ s(o, { children: [
-            e.icon && /* @__PURE__ */ n("span", { className: r(e.disabled && "text-secondary"), children: /* @__PURE__ */ n(u, { icon: e.icon }) }),
-            /* @__PURE__ */ n(
-              "span",
-              {
-                className: r(
-                  "flex-1 truncate text-start",
-                  e.disabled && "text-secondary"
-                ),
-                children: e.label
-              }
-            )
-          ] }),
-          /* @__PURE__ */ n(
-            "span",
-            {
-              className: r(
-                "ml-auto shrink-0",
-                e.disabled && "text-secondary"
-              ),
-              children: k
-            }
-          )
-        ]
+        "aria-expanded": s,
+        "aria-disabled": !!r.disabled,
+        disabled: r.disabled,
+        icon: r.icon,
+        label: r.label,
+        trailing: S,
+        className: r.className,
+        ...c(),
+        children: r.renderItem?.(r)
       }
     ),
-    t && /* @__PURE__ */ n(
+    s && /* @__PURE__ */ a(
       C,
       {
-        refs: l,
-        floatingStyles: m,
+        refs: u,
+        floatingStyles: b,
         context: p,
         getFloatingProps: f,
         role: "menu",
-        surfaceClassName: F,
-        children: e.renderSubMenu ? e.renderSubMenu() : /* @__PURE__ */ s(o, { children: [
-          e.menuHeader && (typeof e.menuHeader == "function" ? e.menuHeader() : e.menuHeader),
-          e.children.map((a) => /* @__PURE__ */ n(
-            "button",
-            {
-              role: "menuitem",
-              type: "button",
-              "aria-disabled": !!a.disabled,
-              disabled: a.disabled,
-              className: r(
-                c,
-                a.disabled && b,
-                a.danger && S,
-                a.className
-              ),
-              onClick: x(a),
-              children: a.renderItem ? a.renderItem(a) : /* @__PURE__ */ s(o, { children: [
-                a.icon && /* @__PURE__ */ n(
-                  "span",
-                  {
-                    className: r(
-                      a.danger && "text-error",
-                      a.disabled && "text-secondary"
-                    ),
-                    children: /* @__PURE__ */ n(u, { icon: a.icon })
-                  }
-                ),
-                /* @__PURE__ */ n(
-                  "span",
-                  {
-                    className: r(
-                      "flex-1 truncate text-start",
-                      a.danger && "text-error",
-                      a.disabled && "text-secondary"
-                    ),
-                    children: a.label
-                  }
-                )
-              ] })
-            },
-            a.key
-          )),
-          e.menuFooter && (typeof e.menuFooter == "function" ? e.menuFooter() : e.menuFooter)
+        surfaceClassName: y,
+        children: r.renderSubMenu ? r.renderSubMenu() : /* @__PURE__ */ t(d, { children: [
+          r.menuHeader && (typeof r.menuHeader == "function" ? r.menuHeader() : r.menuHeader),
+          r.children.map((e) => {
+            const n = I(e);
+            return /* @__PURE__ */ a(
+              l,
+              {
+                role: n,
+                "aria-checked": n === "menuitem" ? void 0 : !!e.checked,
+                "aria-current": m(e) === k.Highlight && e.checked ? !0 : void 0,
+                "aria-disabled": !!e.disabled,
+                disabled: e.disabled,
+                mark: m(e),
+                selected: !!e.checked,
+                danger: e.danger,
+                icon: e.icon,
+                label: e.label,
+                className: e.className,
+                rightControl: e.rightControl,
+                onClick: i(e),
+                children: e.renderItem?.(e)
+              },
+              e.key
+            );
+          }),
+          r.menuFooter && (typeof r.menuFooter == "function" ? r.menuFooter() : r.menuFooter)
         ] })
       }
     )
   ] });
 };
 export {
-  v as DropdownSubMenuItem
+  R as DropdownSubMenuItem
 };

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

@@ -1,35 +1,28 @@
-import { jsx as o } from "react/jsx-runtime";
-import { IconChevronRight as s } from "@tabler/icons-react";
-import { overlayGap as r, overlayItemSelectedClassName as a, overlayItemClassName as t, overlaySubMenuClassName as m, overlayItemDisabledClassName as n, overlaySurfaceClassName as d } from "../constants/overlay.js";
-import { DIAL_KIT_ICON_STROKE as l } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as i } from "../../../constants/icon.js";
-import { mergeClasses as e } from "../../../utils/merge-classes.js";
-const b = e(
+import { jsx as r } from "react/jsx-runtime";
+import { IconChevronRight as e } from "@tabler/icons-react";
+import { overlayGap as s, overlaySubMenuClassName as a, overlaySurfaceClassName as t } from "../constants/overlay.js";
+import { DIAL_KIT_ICON_STROKE as n } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as m } from "../../../constants/icon.js";
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
+const C = o(
   "flex items-center gap-2 align-middle",
   "h-auto px-0 bg-transparent border-0"
-), w = e(
+), f = o(
   "z-[53] focus-visible:outline-none",
-  d
-), f = m, v = t, y = a, S = e(
-  n,
-  "!cursor-not-allowed"
-), g = "text-error", D = "my-1 border-t border-tertiary", x = r, _ = /* @__PURE__ */ o(
-  s,
+  t
+), b = a, I = "my-1 border-t border-tertiary", N = s, v = /* @__PURE__ */ r(
+  e,
   {
-    size: i.SM,
-    stroke: l,
+    size: m.SM,
+    stroke: n,
     "aria-hidden": "true"
   }
 );
 export {
-  b as dropdownBaseClassName,
-  D as dropdownDividerClassName,
-  x as dropdownGap,
-  v as dropdownItemBaseClassName,
-  g as dropdownItemDangerClassName,
-  S as dropdownItemDisabledClassName,
-  y as dropdownItemSelectedClassName,
-  w as dropdownListBaseClassName,
-  f as dropdownSubMenuClassName,
-  _ as submenuCaretIcon
+  C as dropdownBaseClassName,
+  I as dropdownDividerClassName,
+  N as dropdownGap,
+  f as dropdownListBaseClassName,
+  b as dropdownSubMenuClassName,
+  v as submenuCaretIcon
 };

package/dist/components/New/Dropdown/item-mark.js

@@ -0,0 +1,6 @@
+import { MenuItemMark as t } from "../../../types/menu-item.js";
+const r = (e) => e.mark ?? (e.selectable ? t.Checkbox : t.None), m = (e) => e.selectable ? "menuitemcheckbox" : r(e) === t.Check ? "menuitemradio" : "menuitem";
+export {
+  m as getItemRole,
+  r as resolveItemMark
+};

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

@@ -0,0 +1,108 @@
+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 { mergeClasses as e } from "../../../utils/merge-classes.js";
+import { menuItemCheckIcon as B } from "./constants.js";
+const L = ({
+  label: l,
+  icon: c,
+  description: f,
+  mark: o = s.None,
+  selected: r = !1,
+  danger: h = !1,
+  trailing: u,
+  rightControl: m,
+  ellipsisLabel: v = !1,
+  labelClassName: x,
+  children: d,
+  className: I,
+  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",
+    a && "text-control-disable-primary"
+  ), p = e(
+    S,
+    // 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
+  ), N = /* @__PURE__ */ i(
+    "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,
+      ...w,
+      children: [
+        d ?? /* @__PURE__ */ i(g, { children: [
+          o === s.Checkbox && /* @__PURE__ */ t(H, { isSelected: r, disabled: a }),
+          c && /* @__PURE__ */ t(k, { icon: c, className: n }),
+          v ? /* @__PURE__ */ t(
+            M,
+            {
+              text: l,
+              className: e(n, x)
+            }
+          ) : /* @__PURE__ */ t(
+            "span",
+            {
+              className: e(
+                "min-w-0 flex-1 truncate text-start",
+                n,
+                x
+              ),
+              children: l
+            }
+          ),
+          f && /* @__PURE__ */ t(
+            "span",
+            {
+              className: e(
+                "shrink-0 text-secondary dial-small-text",
+                a && "text-control-disable-primary"
+              ),
+              children: f
+            }
+          ),
+          r && o === s.Check && B
+        ] }),
+        u && /* @__PURE__ */ t("span", { className: e("ml-auto shrink-0", n), children: u })
+      ]
+    }
+  );
+  return m ? (
+    /*
+      `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(
+      "div",
+      {
+        role: "none",
+        className: e(
+          p,
+          "has-[[data-menu-item-row]:focus-visible]:outline",
+          "has-[[data-menu-item-row]:focus-visible]:outline-focus"
+        ),
+        children: [
+          N,
+          m
+        ]
+      }
+    )
+  ) : N;
+};
+export {
+  L as MenuItem
+};

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

@@ -0,0 +1,16 @@
+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 { DIAL_ICON_SIZE as e } from "../../../constants/icon.js";
+const c = /* @__PURE__ */ o(
+  r,
+  {
+    size: e.SM,
+    stroke: m,
+    className: "shrink-0",
+    "aria-hidden": !0
+  }
+);
+export {
+  c as menuItemCheckIcon
+};

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

@@ -5,15 +5,15 @@ const e = [
   "ArrowDown",
   "Home",
   "End"
-], t = "inline-flex w-fit items-center gap-1 rounded-full border border-tertiary bg-layer-sunken p-[3px]", n = "flex h-8 min-w-8 flex-1 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 dial-small-text transition-colors duration-200 outline-offset-0 focus-visible:outline focus-visible:outline-focus", a = "bg-layer-raised text-accent shadow-xs", o = "bg-transparent text-secondary", s = "cursor-pointer hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active", r = "cursor-pointer hover:bg-control-accent-alpha-hover hover:text-accent active:bg-control-accent-alpha-active", c = "cursor-not-allowed bg-control-disable-primary text-control-disable-primary shadow-none", l = "cursor-not-allowed bg-transparent text-control-disable-primary";
+], t = "inline-flex w-fit items-center gap-1 rounded-full border border-tertiary bg-layer-sunken p-[3px]", a = "flex h-8 min-w-8 grow shrink-0 basis-auto items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 dial-small-text transition-colors duration-200 outline-offset-0 focus-visible:outline focus-visible:outline-focus", o = "bg-layer-raised text-accent shadow-xs", s = "bg-transparent text-secondary", n = "cursor-pointer hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active", r = "cursor-pointer hover:bg-control-accent-alpha-hover hover:text-accent active:bg-control-accent-alpha-active", c = "cursor-not-allowed bg-control-disable-primary text-control-disable-primary shadow-none", l = "cursor-not-allowed bg-transparent text-control-disable-primary";
 export {
   e as NAVIGATION_KEYS,
   t as containerClassName,
-  n as segmentClassName,
+  a as segmentClassName,
   c as segmentDisabledSelectedClassName,
   l as segmentDisabledUnselectedClassName,
-  a as segmentSelectedClassName,
-  s as segmentSelectedInteractiveClassName,
-  o as segmentUnselectedClassName,
+  o as segmentSelectedClassName,
+  n as segmentSelectedInteractiveClassName,
+  s as segmentUnselectedClassName,
   r as segmentUnselectedInteractiveClassName
 };

package/dist/components/New/Select/MultiSelectTags.js

@@ -1,23 +1,23 @@
-import { jsx as t, Fragment as c } from "react/jsx-runtime";
-import { Tag as i } from "../Tag/Tag.js";
-const p = ({
-  options: n,
-  selectedValues: a,
+import { jsx as l, Fragment as i } from "react/jsx-runtime";
+import { Tag as c } from "../Tag/Tag.js";
+const b = ({
+  options: a,
+  selectedValues: n,
   handleRemoveTag: e
-}) => /* @__PURE__ */ t(c, { children: a.map((o) => {
-  const r = n.find((l) => l.value === o);
-  return /* @__PURE__ */ t(
-    i,
+}) => /* @__PURE__ */ l(i, { children: n.map((r) => {
+  const t = a.find((o) => o.value === r);
+  return /* @__PURE__ */ l(
+    c,
     {
-      label: r?.label ?? o,
+      label: t?.label ?? r,
       closable: !!e,
-      onRemove: (l) => e?.(l, o),
-      icon: r?.icon,
-      className: "max-w-full"
+      onRemove: (o) => e?.(o, r),
+      icon: t?.icon,
+      className: "max-w-full border border-tertiary"
     },
-    o
+    r
   );
 }) });
 export {
-  p as MultiSelectTags
+  b as MultiSelectTags
 };