@epam/ai-dial-ui-kit 0.15.0-dev.51 → 0.15.0-dev.53

package/dist/components/New/AutocompleteTagInput/AutocompleteTagInput.js

@@ -1,159 +1,166 @@
-import { jsxs as le, Fragment as se, jsx as l } from "react/jsx-runtime";
-import { useFloating as ne, autoUpdate as ie, offset as ce, flip as me, size as pe, FloatingPortal as de } from "@floating-ui/react";
-import { useId as fe, useState as f, useMemo as ue, useCallback as he } from "react";
-import { Input as ge } from "../Input/Input.js";
-import { MenuItem as we } from "../MenuItem/MenuItem.js";
-import { selectTagClassName as ve } from "../Select/MultiSelectTags.js";
-import { Tag as Ie } from "../Tag/Tag.js";
-import { useThemeScope as xe } from "../ThemeScope/ThemeScope.js";
-import { overlayGap as T, overlayListClassName as Te, overlaySurfaceClassName as Se } from "../constants/overlay.js";
-import { DIAL_KIT_CLASS as be } from "../../../constants/public-class-names.js";
-import { MenuItemMark as ye } from "../../../types/menu-item.js";
-import { ElementSize as U } from "../../../types/size.js";
-import { mergeClasses as i } from "../../../utils/merge-classes.js";
-import { filterAutocompleteSuggestions as De } from "./utils.js";
-const Ce = 5, Re = ({
-  id: z,
-  value: S,
-  defaultValue: _,
-  suggestions: b,
-  maxSuggestions: y = Ce,
-  size: D = U.Standard,
-  labelProps: $,
-  placeholder: B,
-  caption: G,
-  error: K,
-  invalid: C = !1,
-  disabled: u = !1,
-  readOnly: h = !1,
-  ariaLabel: R,
-  tagListLabel: M = "Tags",
-  getRemoveTagLabel: j,
-  className: H,
-  fieldClassName: O,
-  tagClassName: V,
-  listClassName: P,
-  onChange: A
+import { jsxs as ce, Fragment as me, jsx as c } from "react/jsx-runtime";
+import { useFloating as pe, autoUpdate as fe, offset as de, flip as ue, size as he, FloatingPortal as ge } from "@floating-ui/react";
+import { useId as we, useState as h, useMemo as ve, useCallback as xe } from "react";
+import { Input as Ie } from "../Input/Input.js";
+import { MenuItem as Te } from "../MenuItem/MenuItem.js";
+import { selectTagClassName as Se } from "../Select/MultiSelectTags.js";
+import { Tag as be } from "../Tag/Tag.js";
+import { useThemeScope as ye } from "../ThemeScope/ThemeScope.js";
+import { overlayGap as y, overlayListClassName as Ce, overlaySurfaceClassName as De } from "../constants/overlay.js";
+import { DIAL_KIT_CLASS as Me } from "../../../constants/public-class-names.js";
+import { MenuItemMark as Ae } from "../../../types/menu-item.js";
+import { ElementSize as F } from "../../../types/size.js";
+import { mergeClasses as f } from "../../../utils/merge-classes.js";
+import { filterAutocompleteSuggestions as Ne } from "./utils.js";
+const ke = 5, Pe = ({
+  id: G,
+  value: C,
+  defaultValue: K,
+  suggestions: g,
+  maxSuggestions: D = ke,
+  openOnFocus: m = !1,
+  size: M = F.Standard,
+  labelProps: R,
+  placeholder: j,
+  caption: H,
+  error: V,
+  invalid: A = !1,
+  disabled: w = !1,
+  readOnly: v = !1,
+  ariaLabel: P,
+  tagListLabel: N = "Tags",
+  getRemoveTagLabel: X,
+  className: q,
+  fieldClassName: J,
+  tagClassName: Q,
+  listClassName: W,
+  onChange: k
 }) => {
-  const X = fe(), N = z || X, g = `${N}-listbox`, q = xe(), J = D === U.Small, w = S !== void 0, [Q, W] = f(
-    _ ?? []
-  ), a = w ? S : Q, c = a.length > 0, m = !h && !u, [s, E] = f(""), [Y, v] = f(!1), [Z, p] = f(0), r = ue(
-    () => De(
-      b,
+  const Y = we(), E = G || Y, x = `${E}-listbox`, Z = ye(), O = M === F.Small, I = C !== void 0, [ee, te] = h(
+    K ?? []
+  ), a = I ? C : ee, d = a.length > 0, p = !v && !w, [s, L] = h(""), [oe, u] = h(!1), [ae, l] = h(0), T = !s.trim(), n = ve(
+    () => Ne(
+      g,
       s,
       a,
-      y
+      // The list opened on focus is meant to show every choice.
+      m && T ? g.length : D
     ),
-    [s, y, b, a]
-  ), o = Y && m && r.length > 0, d = Math.min(Z, r.length - 1), k = (e) => `${g}-option-${e}`, { refs: F, floatingStyles: ee } = ne({
-    open: o,
+    [s, T, D, m, g, a]
+  ), r = oe && p && n.length > 0, i = Math.min(ae, n.length - 1), U = r && i >= 0, z = (e) => `${x}-option-${e}`, { refs: B, floatingStyles: re } = pe({
+    open: r,
     placement: "bottom-start",
-    whileElementsMounted: ie,
+    whileElementsMounted: fe,
     middleware: [
-      ce(T),
-      me({ padding: T }),
-      pe({
-        padding: T,
-        apply({ rects: e, availableHeight: t, elements: n }) {
-          n.floating.style.width = `${Math.round(e.reference.width)}px`, n.floating.style.maxHeight = `${Math.floor(t)}px`;
+      de(y),
+      ue({ padding: y }),
+      he({
+        padding: y,
+        apply({ rects: e, availableHeight: t, elements: o }) {
+          o.floating.style.width = `${Math.round(e.reference.width)}px`, o.floating.style.maxHeight = `${Math.floor(t)}px`;
         }
       })
     ]
-  }), I = he(
+  }), S = xe(
     (e) => {
-      w || W(e), A?.(e);
+      I || te(e), k?.(e);
     },
-    [w, A]
-  ), x = () => {
-    v(!1), p(0);
-  }, L = (e) => {
+    [I, k]
+  ), b = () => {
+    u(!1), l(0);
+  }, _ = () => {
+    !m || !p || (u(!0), l(T ? -1 : 0));
+  }, $ = (e) => {
     const t = e.trim();
-    t && !a.includes(t) && I([...a, t]), E(""), x();
-  }, te = (e) => I(a.filter((t) => t !== e)), oe = (e) => {
-    const t = e ?? "";
-    E(t), v(!!t.trim()), p(0);
-  }, ae = (e) => {
-    if (m)
+    t && !a.includes(t) && S([...a, t]), L(""), m ? l(-1) : b();
+  }, le = (e) => S(a.filter((t) => t !== e)), se = (e) => {
+    const t = e ?? "", o = !!t.trim();
+    L(t), u(o || m), l(o ? 0 : -1);
+  }, ne = (e) => {
+    if (p)
       switch (e.key) {
         case "ArrowDown":
         case "ArrowUp": {
-          if (e.preventDefault(), v(!0), !o) return;
-          const t = e.key === "ArrowDown" ? 1 : -1;
-          p(
-            (d + t + r.length) % r.length
-          );
+          if (e.preventDefault(), !r) {
+            u(!0), l(0);
+            return;
+          }
+          const t = e.key === "ArrowDown" ? 1 : -1, o = i < 0 ? Math.min(-t, 0) : i;
+          l((o + t + n.length) % n.length);
           return;
         }
         case "Enter":
         case ",":
-          e.preventDefault(), L(o ? r[d].value : s);
+          e.preventDefault(), $(U ? n[i].value : s);
           return;
         case "Escape":
-          o && e.preventDefault(), x();
+          r && e.preventDefault(), b();
           return;
         case "Backspace":
-          !s && c && (e.preventDefault(), I(a.slice(0, -1)));
+          !s && d && (e.preventDefault(), S(a.slice(0, -1)));
           return;
       }
-  }, re = (e) => e.preventDefault();
-  return /* @__PURE__ */ le(se, { children: [
-    /* @__PURE__ */ l(
-      ge,
+  }, ie = (e) => e.preventDefault();
+  return /* @__PURE__ */ ce(me, { children: [
+    /* @__PURE__ */ c(
+      Ie,
       {
-        id: N,
+        id: E,
         role: "combobox",
         "aria-autocomplete": "list",
-        "aria-expanded": o,
-        "aria-controls": g,
-        "aria-activedescendant": o ? k(d) : void 0,
-        "aria-invalid": C || void 0,
-        "aria-label": R,
-        size: D,
-        labelProps: $,
-        caption: G,
-        error: K,
-        invalid: C,
-        disabled: u,
-        readOnly: h,
+        "aria-expanded": r,
+        "aria-controls": x,
+        "aria-activedescendant": U ? z(i) : void 0,
+        "aria-invalid": A || void 0,
+        "aria-label": P,
+        size: M,
+        labelProps: R,
+        caption: H,
+        error: V,
+        invalid: A,
+        disabled: w,
+        readOnly: v,
         value: s,
-        placeholder: c ? void 0 : B,
-        wrapperRef: F.setReference,
-        onChange: oe,
-        onKeyDown: ae,
-        onBlur: x,
-        containerClassName: i("w-full", H),
-        wrapperClassName: i(
-          c && [
+        placeholder: d ? void 0 : j,
+        wrapperRef: B.setReference,
+        onChange: se,
+        onKeyDown: ne,
+        onFocus: _,
+        onClick: _,
+        onBlur: b,
+        containerClassName: f("w-full", q),
+        wrapperClassName: f(
+          d && [
             "!h-auto flex-wrap gap-1 py-2",
-            J ? "min-h-[24px]" : "min-h-[40px]"
+            O ? "min-h-[24px]" : "min-h-[40px]"
           ],
-          O,
-          be.autocompleteTagInput
+          J,
+          Me.autocompleteTagInput
         ),
-        className: i(
+        className: f(
           "w-auto min-w-[100px] flex-1",
-          h && "cursor-default"
+          v && "cursor-default"
         ),
-        children: c && /* @__PURE__ */ l(
+        children: d && /* @__PURE__ */ c(
           "span",
           {
             role: "list",
-            "aria-label": M,
+            "aria-label": N,
             className: "flex min-w-0 flex-wrap items-center gap-1",
-            children: a.map((e) => /* @__PURE__ */ l(
-              Ie,
+            children: a.map((e) => /* @__PURE__ */ c(
+              be,
               {
                 role: "listitem",
                 label: e,
-                className: i(
-                  ve,
+                className: f(
+                  Se,
                   "min-w-0",
-                  V
+                  Q
                 ),
-                disabled: u,
-                closable: m,
-                removeLabel: j?.(e),
-                onRemove: m ? () => te(e) : void 0
+                disabled: w,
+                closable: p,
+                removeLabel: X?.(e),
+                onRemove: p ? () => le(e) : void 0
               },
               e
             ))
@@ -161,39 +168,39 @@ const Ce = 5, Re = ({
         )
       }
     ),
-    /* @__PURE__ */ l(de, { children: /* @__PURE__ */ l(
+    /* @__PURE__ */ c(ge, { children: /* @__PURE__ */ c(
       "div",
       {
-        ref: F.setFloating,
-        id: g,
+        ref: B.setFloating,
+        id: x,
         role: "listbox",
-        "aria-label": M,
-        hidden: !o,
-        style: ee,
-        className: i(
+        "aria-label": N,
+        hidden: !r,
+        style: re,
+        className: f(
           "z-floating overflow-y-auto",
-          Se,
-          Te,
-          !o && "hidden",
-          q,
-          P
+          De,
+          Ce,
+          !r && "hidden",
+          Z,
+          W
         ),
-        children: o && r.map((e, t) => {
-          const n = t === d;
-          return /* @__PURE__ */ l(
-            we,
+        children: r && n.map((e, t) => {
+          const o = t === i;
+          return /* @__PURE__ */ c(
+            Te,
             {
-              id: k(t),
+              id: z(t),
               role: "option",
-              "aria-selected": n,
+              "aria-selected": o,
               tabIndex: -1,
               label: e.label,
               description: e.description,
-              mark: ye.Tint,
-              selected: n,
-              onMouseDown: re,
-              onMouseEnter: () => p(t),
-              onClick: () => L(e.value)
+              mark: Ae.Tint,
+              selected: o,
+              onMouseDown: ie,
+              onMouseEnter: () => l(t),
+              onClick: () => $(e.value)
             },
             e.value
           );
@@ -203,5 +210,5 @@ const Ce = 5, Re = ({
   ] });
 };
 export {
-  Re as AutocompleteTagInput
+  Pe as AutocompleteTagInput
 };

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

@@ -1,9 +1,9 @@
-const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-grid-without-header-borders", i = "dial-kit-grid-row-select", l = "dial-kit-grid-header-select", n = "dial-kit-grid-selection-visible", c = "dial-kit-grid-align-right", C = 40, o = "0.5px solid var(--stroke-tertiary, #E0E6F0)", E = {
+const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-grid-without-header-borders", i = "dial-kit-grid-row-select", l = "dial-kit-grid-header-select", n = "dial-kit-grid-selection-visible", c = "dial-kit-grid-align-right", C = 40, o = "0.5px solid var(--stroke-tertiary, #E0E6F0)", s = {
   accentColor: "var(--bg-control-accent, #1D4ED8)",
   backgroundColor: "var(--bg-layer-raised, #FCFCFC)",
   oddRowBackgroundColor: "var(--bg-layer-sunken, #EEF1F7)",
-  selectedRowBackgroundColor: "var(--bg-control-accent-alpha, #2764D90F)",
-  rowHoverColor: "var(--bg-control-accent-alpha-hover, #2764D924)",
+  selectedRowBackgroundColor: "var(--bg-control-accent-alpha-active-subtle, #2764D914)",
+  rowHoverColor: "var(--bg-control-accent-alpha-hover-subtle, #2764D90A)",
   borderColor: "var(--stroke-tertiary, #E0E6F0)",
   // Dividers inside the table sit on the thin stroke (0.5px) rather than the
   // 1px main stroke that controls and standalone dividers use, so a dense grid
@@ -13,9 +13,16 @@ const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-gri
   // by the theme: those frame the table and separate its regions rather than
   // dividing rows and columns.
   rowBorder: o,
-  headerRowBorder: o,
+  // Off: ag-Grid draws this one both under the header and between the title
+  // row and the filter row, and the design has no line between those two. The
+  // line under the header is drawn at 1px in `styles/grid.scss`.
+  headerRowBorder: !1,
   headerColumnBorder: o,
+  // The design's header divider is a short 12px mark centred in the cell, not
+  // the 20px (half the row) ag-Grid draws by default.
+  headerColumnBorderHeight: 12,
   chromeBackgroundColor: "var(--bg-layer-base, #F5F7FA)",
+  headerBackgroundColor: "var(--bg-layer-raised, #FCFCFC)",
   foregroundColor: "var(--text-primary, #161B2D)",
   headerTextColor: "var(--text-secondary, #57647A)",
   // 1.0 asked the browser for dark native widgets while painting a light
@@ -27,6 +34,8 @@ const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-gri
   fontFamily: "var(--theme-font, var(--font-inter))",
   spacing: 4,
   borderRadius: 4,
+  // Search fields in the header and filter popups: `rounded-lg`.
+  inputBorderRadius: 8,
   wrapperBorderRadius: 8
 };
 var e = /* @__PURE__ */ ((r) => (r.API = "api", r.ROW_DATA_CHANGED = "rowDataChanged", r.CHECKBOX_SELECTED = "checkboxSelected", r))(e || {});
@@ -36,7 +45,7 @@ export {
   a as GRID_ROOT_CLASS,
   i as GRID_ROW_SELECT_CLASS,
   n as GRID_SELECTION_VISIBLE_CLASS,
-  E as GRID_THEME_PARAMS,
+  s as GRID_THEME_PARAMS,
   d as GRID_WITHOUT_HEADER_BORDERS_CLASS,
   t as GRID_WITH_SELECTION_CLASS,
   C as ROW_HEIGHT,