@epam/ai-dial-ui-kit 0.15.0-dev.36 → 0.15.0-dev.37

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

@@ -1,89 +1,92 @@
-import { jsx as l, jsxs as S, Fragment as _e } from "react/jsx-runtime";
-import { IconChevronDown as Be } from "@tabler/icons-react";
-import { useId as Ke, useState as K, useCallback as f, useMemo as m, useEffect as je, useImperativeHandle as ze, Fragment as Ue } from "react";
-import { Checkbox as Ve } from "../Checkbox/Checkbox.js";
-import { Dropdown as qe } from "../Dropdown/Dropdown.js";
-import { EllipsisTooltip as Ge } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { InteractiveTooltip as He } from "../InteractiveTooltip/InteractiveTooltip.js";
-import { ErrorText as Qe, CaptionText as Re } from "../CaptionText/CaptionText.js";
-import { GhostIconButton as We } from "../IconButton/IconButtonWrappers.js";
-import { Input as ne } from "../Input/Input.js";
-import { Label as Ze } from "../Label/Label.js";
-import { DialNoDataContent as Je } from "../../NoDataContent/NoDataContent.js";
-import { DIAL_KIT_ICON_STROKE as Xe } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as re } from "../../../constants/icon.js";
-import { MenuItem as ae } from "../MenuItem/MenuItem.js";
-import { MenuItemMark as j } from "../../../types/menu-item.js";
-import { ElementSize as k } from "../../../types/size.js";
-import { resolveAccessibleName as ie } from "../../../utils/accessible-name.js";
+import { jsx as l, jsxs as g, Fragment as je } from "react/jsx-runtime";
+import { IconChevronDown as ze } from "@tabler/icons-react";
+import { useId as Ue, useState as z, useCallback as f, useMemo as m, useEffect as Ve, useImperativeHandle as qe, Fragment as Ge } from "react";
+import { Checkbox as He } from "../Checkbox/Checkbox.js";
+import { Dropdown as Qe } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as We } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { InteractiveTooltip as Ze } from "../InteractiveTooltip/InteractiveTooltip.js";
+import { ErrorText as Je, CaptionText as Re } from "../CaptionText/CaptionText.js";
+import { GhostIconButton as Xe } from "../IconButton/IconButtonWrappers.js";
+import { Input as re } from "../Input/Input.js";
+import { Label as Ye } from "../Label/Label.js";
+import { DialNoDataContent as Pe } from "../../NoDataContent/NoDataContent.js";
+import { DIAL_KIT_ICON_STROKE as el } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as ae } from "../../../constants/icon.js";
+import { MenuItem as ie } from "../MenuItem/MenuItem.js";
+import { MenuItemMark as U } from "../../../types/menu-item.js";
+import { ElementSize as O } from "../../../types/size.js";
+import { useIsMobileScreen as ll } from "../../../hooks/use-is-mobile-screen.js";
+import { resolveAccessibleName as oe } from "../../../utils/accessible-name.js";
 import { mergeClasses as p } from "../../../utils/merge-classes.js";
-import { MultiSelectTags as Ye } from "./MultiSelectTags.js";
-import { SelectSubMenuItem as Pe } from "./SelectSubMenuItem.js";
-import { selectFieldIconClassName as el, selectListWidthClassName as ll, selectOverlayBaseClassName as tl, selectSearchThreshold as nl, selectSearchIcon as rl, selectCloseIcon as al, selectOptionBaseClassName as il, selectOptionsScrollClassName as ol, selectEmptyStateIcon as sl } from "./constants.js";
-import { DIAL_KIT_CLASS as cl } from "../../../constants/public-class-names.js";
-const El = ({
+import { CollapsedSelectTags as tl } from "./CollapsedSelectTags.js";
+import { MultiSelectTags as nl } from "./MultiSelectTags.js";
+import { SelectSubMenuItem as rl } from "./SelectSubMenuItem.js";
+import { selectFieldIconClassName as al, selectListWidthClassName as il, selectOverlayBaseClassName as ol, selectSearchThreshold as sl, selectSearchIcon as cl, selectCloseIcon as dl, selectOptionBaseClassName as fl, selectOptionsScrollClassName as ml, selectEmptyStateIcon as ul } from "./constants.js";
+import { DIAL_KIT_CLASS as hl } from "../../../constants/public-class-names.js";
+const zl = ({
   options: a,
   multiple: n = !1,
-  id: oe,
-  value: O,
-  defaultValue: se,
-  size: z = k.Standard,
-  prefix: U,
-  customSelectedValue: V,
-  placeholder: ce = "Select...",
-  labelProps: g,
-  error: q,
-  caption: de,
-  ariaLabel: G,
-  searchable: H = !1,
-  searchSize: fe = k.Standard,
-  searchPlaceholder: Q,
-  selectAll: me = !1,
-  invalid: ue,
-  selectAllLabel: he = "Select all",
-  selectedOptionMark: R = j.Tint,
-  emptyStateTitle: pe = "No options available",
-  emptyStateDescription: ve,
-  emptyStateIcon: be,
-  disabled: v = !1,
-  className: Ce,
+  id: se,
+  value: D,
+  defaultValue: ce,
+  size: V = O.Standard,
+  prefix: q,
+  customSelectedValue: G,
+  placeholder: de = "Select...",
+  labelProps: N,
+  error: H,
+  caption: fe,
+  ariaLabel: Q,
+  searchable: W = !1,
+  searchSize: me = O.Standard,
+  searchPlaceholder: Z,
+  selectAll: ue = !1,
+  invalid: he,
+  selectAllLabel: pe = "Select all",
+  collapseTagOverflow: be = !1,
+  selectedOptionMark: J = U.Tint,
+  emptyStateTitle: ve = "No options available",
+  emptyStateDescription: Ce,
+  emptyStateIcon: Se,
+  disabled: b = !1,
+  className: ge,
   fieldClassName: Ne,
-  listClassName: Se,
-  closable: D = !1,
+  listClassName: Ie,
+  closable: F = !1,
   header: I,
   footer: x,
-  onClose: W,
-  onChange: Z,
-  dismissRef: ge,
-  onFooterClick: J,
-  open: X,
-  onOpenChange: Y,
-  onSearchQueryChange: P,
-  customMultiSelectTagsRenderer: ee
+  onClose: R,
+  onChange: X,
+  dismissRef: xe,
+  onFooterClick: Y,
+  open: P,
+  onOpenChange: ee,
+  onSearchQueryChange: le,
+  customMultiSelectTagsRenderer: L
 }) => {
-  const Ie = Ke(), u = oe || Ie, le = `list-${u}`, te = z === k.Small, [xe, we] = K(!1), F = X !== void 0, d = F ? !!X : xe, c = f(
+  const we = Ue(), u = se || we, te = `list-${u}`, ne = V === O.Small, [ye, Te] = z(!1), E = P !== void 0, d = E ? !!P : ye, c = f(
     (e) => {
-      F || we(e), Y?.(e);
+      E || Te(e), ee?.(e);
     },
-    [F, Y]
-  ), [h, ye] = K(""), L = f(
+    [E, ee]
+  ), [h, Ae] = z(""), M = f(
     (e) => {
-      e !== h && (ye(e || ""), P?.(e || ""));
+      e !== h && (Ae(e || ""), le?.(e || ""));
     },
-    [P, h]
-  ), E = O !== void 0, [Te, Ae] = K(se), b = E ? O : Te, r = m(() => n ? Array.isArray(b) ? b : [] : typeof b == "string" ? [b] : [], [b, n]), w = m(() => {
+    [le, h]
+  ), $ = D !== void 0, [ke, Oe] = z(ce), v = $ ? D : ke, r = m(() => n ? Array.isArray(v) ? v : [] : typeof v == "string" ? [v] : [], [v, n]), w = m(() => {
     const e = h.trim().toLowerCase();
     return e ? a.filter((t) => t.label.toLowerCase().includes(e)) : a;
   }, [a, h]);
-  je(() => {
-    d || L("");
-  }, [d, L]);
+  Ve(() => {
+    d || M("");
+  }, [d, M]);
   const s = f(
     (e) => {
-      E || Ae(e), Z?.(e);
+      $ || Oe(e), X?.(e);
     },
-    [E, Z]
-  ), $ = f(
+    [$, X]
+  ), _ = f(
     (e) => {
       if (n) {
         const t = new Set(r);
@@ -93,31 +96,31 @@ const El = ({
       s(e), c(!1);
     },
     [n, s, c, r]
-  ), M = f(
+  ), y = f(
     (e, t) => {
       if (e.stopPropagation(), !n) {
         s("");
         return;
       }
-      const A = r.filter((Me) => Me !== t);
-      s(A);
+      const k = r.filter((Ke) => Ke !== t);
+      s(k);
     },
     [n, r, s]
   ), o = m(
     () => w.filter((e) => !e.disabled),
     [w]
-  ), _ = m(
+  ), B = m(
     () => o.filter((e) => r.includes(e.value)).length,
     [o, r]
-  ), { allSelectedInFiltered: B, someSelectedInFiltered: ke } = m(() => {
-    const e = o.length > 0 && _ === o.length;
+  ), { allSelectedInFiltered: K, someSelectedInFiltered: De } = m(() => {
+    const e = o.length > 0 && B === o.length;
     return {
       allSelectedInFiltered: e,
-      someSelectedInFiltered: _ > 0 && !e
+      someSelectedInFiltered: B > 0 && !e
     };
-  }, [o, _]), Oe = f(() => {
+  }, [o, B]), Fe = f(() => {
     if (!(!n || o.length === 0))
-      if (B) {
+      if (K) {
         const e = new Set(o.map((t) => t.value));
         s(r.filter((t) => !e.has(t)));
       } else {
@@ -125,123 +128,131 @@ const El = ({
         o.forEach((t) => e.add(t.value)), s(Array.from(e));
       }
   }, [
-    B,
+    K,
     n,
     o,
     r,
     s
-  ]), y = r.length > 0, T = !n && y ? r[0] : void 0, i = m(
-    () => T ? a.find((e) => e.value === T) ?? a.flatMap((e) => e.children ?? []).find((e) => e.value === T) : void 0,
-    [a, T]
-  ), C = i ? U ? `${U} ${i.label}` : i.label : void 0, N = m(() => n ? y ? /* @__PURE__ */ l("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: ee?.(
+  ]), T = r.length > 0, A = !n && T ? r[0] : void 0, i = m(
+    () => A ? a.find((e) => e.value === A) ?? a.flatMap((e) => e.children ?? []).find((e) => e.value === A) : void 0,
+    [a, A]
+  ), C = i ? q ? `${q} ${i.label}` : i.label : void 0, Le = ll(), j = n && be && !L && !Le, S = m(() => n ? T ? j ? /* @__PURE__ */ l(
+    tl,
+    {
+      options: a,
+      selectedValues: r,
+      handleRemoveTag: y
+    }
+  ) : /* @__PURE__ */ l("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: L?.(
     a,
     r,
-    M
+    y
   ) ?? /* @__PURE__ */ l(
-    Ye,
+    nl,
     {
       options: a,
       selectedValues: r,
-      handleRemoveTag: M
+      handleRemoveTag: y
     }
-  ) }) : null : !i || !i.labelNode && !i.description ? null : /* @__PURE__ */ S("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+  ) }) : null : !i || !i.labelNode && !i.description ? null : /* @__PURE__ */ g("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
     /* @__PURE__ */ l(
-      Ge,
+      We,
       {
         text: i.labelNode ?? C
       }
     ),
     i.description && /* @__PURE__ */ l("span", { className: "truncate text-secondary dial-tiny-text", children: i.description })
   ] }), [
-    ee,
-    M,
+    j,
+    L,
     y,
+    T,
     n,
     a,
     C,
     r,
     i
-  ]), De = n || N ? "" : C || (V && O ? V : ""), Fe = typeof g?.label == "string" ? g.label : void 0, Le = N ? [
-    ie(G, Fe),
+  ]), Ee = n || S ? "" : C || (G && D ? G : ""), Me = typeof N?.label == "string" ? N.label : void 0, $e = S ? [
+    oe(Q, Me),
     n ? r.map((e) => a.find((t) => t.value === e)?.label ?? e).join(", ") : C
-  ].filter(Boolean).join(", ") || void 0 : ie(G);
-  ze(ge, () => ({
+  ].filter(Boolean).join(", ") || void 0 : oe(Q);
+  qe(xe, () => ({
     dismiss: () => {
       c(!1);
     }
   }));
-  const Ee = f(
+  const _e = f(
     (e) => {
-      v || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), d || c(!0));
+      b || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), d || c(!0));
     },
-    [v, d, c]
-  ), $e = () => /* @__PURE__ */ S(
+    [b, d, c]
+  ), Be = () => /* @__PURE__ */ g(
     "div",
     {
-      id: le,
+      id: te,
       role: "listbox",
       "aria-multiselectable": n || void 0,
-      className: tl,
+      className: ol,
       children: [
-        I && /* @__PURE__ */ l(_e, { children: typeof I == "function" ? I() : I }),
-        (H || D) && (a.length > nl || !!h) && /* @__PURE__ */ S("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
-          H && /* @__PURE__ */ l(
-            ne,
+        I && /* @__PURE__ */ l(je, { children: typeof I == "function" ? I() : I }),
+        (W || F) && (a.length > sl || !!h) && /* @__PURE__ */ g("div", { className: "flex items-center gap-2 px-2 pt-2", children: [
+          W && /* @__PURE__ */ l(
+            re,
             {
               id: `search-${u}`,
-              size: fe,
-              placeholder: Q,
-              "aria-label": Q || "Search options",
-              onChange: (e) => L(e),
+              size: me,
+              placeholder: Z,
+              "aria-label": Z || "Search options",
+              onChange: (e) => M(e),
               value: h,
-              iconBefore: rl,
+              iconBefore: cl,
               containerClassName: "w-full"
             }
           ),
-          D && /* @__PURE__ */ l(
-            We,
+          F && /* @__PURE__ */ l(
+            Xe,
             {
               "aria-label": "Close select",
               className: "shrink-0",
-              size: k.Small,
-              icon: al,
+              size: O.Small,
+              icon: dl,
               onClick: (e) => {
-                W?.(e), c(!1);
+                R?.(e), c(!1);
               }
             }
           )
         ] }),
-        n && me && o.length > 0 && /* @__PURE__ */ l("div", { className: p(il, "mt-2"), children: /* @__PURE__ */ l(
-          Ve,
+        n && ue && o.length > 0 && /* @__PURE__ */ l("div", { className: p(fl, "mt-2"), children: /* @__PURE__ */ l(
+          He,
           {
             id: `${u}-selectAll`,
-            labelProps: { label: he },
-            isSelected: B,
-            isIndeterminate: ke,
-            onChange: Oe
+            labelProps: { label: pe },
+            isSelected: K,
+            isIndeterminate: De,
+            onChange: Fe
           }
         ) }),
-        /* @__PURE__ */ l("div", { role: "none", className: ol, children: w.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
-          Je,
+        /* @__PURE__ */ l("div", { role: "none", className: ml, children: w.length === 0 ? /* @__PURE__ */ l("div", { className: "px-2 py-3", children: /* @__PURE__ */ l(
+          Pe,
           {
-            icon: be ?? sl,
-            title: pe,
-            description: ve
+            icon: Se ?? ul,
+            title: ve,
+            description: Ce
           }
         ) }) : w.map((e) => {
           const t = r.includes(e.value);
           if (e.children?.length)
             return /* @__PURE__ */ l(
-              Pe,
+              rl,
               {
                 opt: e,
                 selectedValues: r,
-                mark: n ? j.Checkbox : R,
-                onSelect: $
+                mark: n ? U.Checkbox : J,
+                onSelect: _
               },
               e.value
             );
-          const A = n ? (
+          const k = n ? (
             /*
               The row itself is the control: one `option` whose state rides on
               `aria-selected`, with a decorative box drawing the check. A real
@@ -250,55 +261,55 @@ const El = ({
               has the whole row selecting the option.
             */
             /* @__PURE__ */ l(
-              ae,
+              ie,
               {
                 id: `${u}-${e.value}`,
                 role: "option",
                 "aria-selected": t,
                 "aria-disabled": !!e.disabled,
                 disabled: e.disabled,
-                mark: j.Checkbox,
+                mark: U.Checkbox,
                 selected: t,
                 icon: e.icon,
                 label: e.labelNode ?? e.label,
                 description: e.description,
                 rightControl: e.rightControl,
-                onClick: () => $(e.value)
+                onClick: () => _(e.value)
               }
             )
           ) : /* @__PURE__ */ l(
-            ae,
+            ie,
             {
               role: "option",
               "aria-selected": t,
               "aria-disabled": !!e.disabled,
               disabled: e.disabled,
-              mark: R,
+              mark: J,
               selected: t,
               ellipsisLabel: !0,
               icon: e.icon,
               label: e.labelNode ?? e.label,
               description: e.description,
               rightControl: e.rightControl,
-              onClick: () => !e.disabled && $(e.value)
+              onClick: () => !e.disabled && _(e.value)
             }
           );
-          return /* @__PURE__ */ l(Ue, { children: e.interactiveTooltip ? /* @__PURE__ */ l(
-            He,
+          return /* @__PURE__ */ l(Ge, { children: e.interactiveTooltip ? /* @__PURE__ */ l(
+            Ze,
             {
               asChild: !0,
               placement: e.interactiveTooltip.placement,
               content: e.interactiveTooltip.content,
               contentClassName: e.interactiveTooltip.contentClassName,
-              children: A
+              children: k
             }
-          ) : A }, e.value);
+          ) : k }, e.value);
         }) }),
         x && /* @__PURE__ */ l(
           "div",
           {
             onClick: (e) => {
-              J?.(e), J && c(!1);
+              Y?.(e), Y && c(!1);
             },
             children: typeof x == "function" ? x() : x
           }
@@ -306,49 +317,49 @@ const El = ({
       ]
     }
   );
-  return /* @__PURE__ */ S(
+  return /* @__PURE__ */ g(
     "div",
     {
       className: p(
         "flex w-full flex-col gap-2",
-        Ce,
-        cl.select
+        ge,
+        hl.select
       ),
       children: [
-        g && /* @__PURE__ */ l(Ze, { ...g, htmlFor: u }),
-        /* @__PURE__ */ S("div", { className: "flex flex-col gap-1", children: [
+        N && /* @__PURE__ */ l(Ye, { ...N, htmlFor: u }),
+        /* @__PURE__ */ g("div", { className: "flex flex-col gap-1", children: [
           /* @__PURE__ */ l(
-            qe,
+            Qe,
             {
               open: d,
               onOpenChange: c,
-              disabled: v,
-              closable: D,
-              onClose: W,
+              disabled: b,
+              closable: F,
+              onClose: R,
               placement: "bottom-start",
               allowedPlacements: ["bottom-start", "top-start"],
-              listClassName: p(ll, Se),
+              listClassName: p(il, Ie),
               className: "w-full",
-              renderOverlay: $e,
+              renderOverlay: Be,
               children: /* @__PURE__ */ l(
-                ne,
+                re,
                 {
                   id: u,
-                  size: z,
-                  disabled: v,
-                  invalid: ue,
-                  value: De,
-                  placeholder: N ? void 0 : ce,
+                  size: V,
+                  disabled: b,
+                  invalid: he,
+                  value: Ee,
+                  placeholder: S ? void 0 : de,
                   readOnly: !0,
                   iconBefore: n ? void 0 : i?.icon,
                   iconAfter: /* @__PURE__ */ l(
-                    Be,
+                    ze,
                     {
-                      size: te ? re.SM : re.MD,
-                      stroke: Xe,
+                      size: ne ? ae.SM : ae.MD,
+                      stroke: el,
                       "aria-hidden": "true",
                       className: p(
-                        el,
+                        al,
                         d && "rotate-180"
                       )
                     }
@@ -356,35 +367,35 @@ const El = ({
                   role: "combobox",
                   "aria-haspopup": "listbox",
                   "aria-expanded": d,
-                  "aria-controls": le,
+                  "aria-controls": te,
                   "aria-autocomplete": "none",
-                  "aria-label": Le,
+                  "aria-label": $e,
                   containerClassName: "w-full",
                   wrapperClassName: p(
-                    !v && "cursor-pointer",
-                    n && y && [
-                      "!h-auto flex-wrap py-1.5",
-                      te ? "min-h-[24px]" : "min-h-[40px]"
+                    !b && "cursor-pointer",
+                    n && T && !j && [
+                      "!h-auto flex-wrap py-2",
+                      ne ? "min-h-[24px]" : "min-h-[40px]"
                     ],
                     Ne
                   ),
                   className: p(
                     "cursor-pointer",
-                    N && "w-0 min-w-0 flex-none p-0"
+                    S && "w-0 min-w-0 flex-none p-0"
                   ),
-                  onKeyDown: Ee,
-                  children: N
+                  onKeyDown: _e,
+                  children: S
                 }
               )
             }
           ),
-          /* @__PURE__ */ l(Qe, { text: q }),
-          !q && /* @__PURE__ */ l(Re, { text: de })
+          /* @__PURE__ */ l(Je, { text: H }),
+          !H && /* @__PURE__ */ l(Re, { text: fe })
         ] })
       ]
     }
   );
 };
 export {
-  El as Select
+  zl as Select
 };

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

@@ -1,13 +1,15 @@
 import { mergeClasses as e } from "../../../utils/merge-classes.js";
-const a = "rounded-xl bg-layer-raised p-1 shadow-md", l = "flex flex-col gap-0.5", s = e(
+const a = "rounded-xl bg-layer-raised p-1 shadow-md", s = "flex flex-col gap-0.5", l = e(
   a,
   "w-max"
 ), r = e(
-  s,
   l,
+  s,
   "py-2"
 ), n = e(
-  "flex w-full cursor-pointer items-center gap-2 px-3 h-[40px] rounded-lg",
+  // `shrink-0` keeps the 40px: a column squeezed by the panel's height cap
+  // would otherwise collapse the rows to their content.
+  "flex w-full shrink-0 cursor-pointer items-center gap-2 px-3 h-[40px] rounded-lg",
   "dial-small-text text-primary truncate",
   // Hover sits one step up the accent-alpha ramp from the selected tint, so a
   // hovered row reads as hovered whether or not it is also selected.
@@ -26,8 +28,8 @@ export {
   m as overlayItemDisabledClassName,
   c as overlayItemHighlightClassName,
   t as overlayItemSelectedClassName,
-  l as overlayListClassName,
-  s as overlaySubMenuClassName,
+  s as overlayListClassName,
+  l as overlaySubMenuClassName,
   r as overlaySubMenuListClassName,
   a as overlaySurfaceClassName
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.15.0-dev.36",
-  "generatedAt": "2026-10-01T09:56:10.153Z",
+  "version": "0.15.0-dev.37",
+  "generatedAt": "2026-10-05T11:16:33.468Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -1250,6 +1250,13 @@
           "defaultValue": "'Select all'",
           "description": "Label for the \"Select All\" checkbox."
         },
+        {
+          "name": "collapseTagOverflow",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Keep a multi-select's tags on one row, folding those that do not fit into a `+N` counter by the width available; the hover panel lists them and removes them."
+        },
         {
           "name": "selectedOptionMark",
           "type": "| MenuItemMark.Tint\n    | MenuItemMark.Check\n    | MenuItemMark.Highlight",
@@ -1403,6 +1410,12 @@
           "type": "(\n    event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,\n    val: string,\n  ) => void",
           "required": false,
           "description": "Called with the value whose tag was removed; when omitted the tags are not removable"
+        },
+        {
+          "name": "tagClassName",
+          "type": "string",
+          "required": false,
+          "description": "Additional classes for every tag"
         }
       ],
       "examples": [],