mcr-design-systems 1.0.211 → 1.0.212

package/dist/components/Chip/helper/variants.js

@@ -11,10 +11,10 @@ const a = e({
   ],
   variants: {
     size: {
-      "x-small": ["px-xs-3 py-xs-3", "text-xs leading-4", "gap-xs-3", "h-5"],
-      small: ["px-xs-3 py-xs-3", "text-sm leading-5", "gap-xs-3", "h-6"],
-      medium: ["px-sm py-xs-3", "text-sm leading-5", "gap-xs-3", "h-8"],
-      large: ["px-sm", "text-base leading-6", "gap-xs-3", "h-12"]
+      "x-small": ["px-xs", "text-base-sm leading-4", "gap-xs-3", "h-md-2"],
+      small: ["px-sm-2", "text-sm leading-5", "gap-xs-3", "h-lg"],
+      medium: ["px-sm-2", "text-base-md leading-5", "gap-xs-3", "h-10"],
+      large: ["px-sm", "text-base-lg leading-6", "gap-xs-3", "h-12"]
     },
     variant: {
       neutral: "",

package/dist/components/Chip/index.js

@@ -1,19 +1,19 @@
-import { jsx as m, jsxs as v } from "react/jsx-runtime";
+import { jsx as l, jsxs as v } from "react/jsx-runtime";
 import h, { useCallback as f } from "react";
 import { cn as S } from "../../shared/utils/cn.js";
 import { dataTestId as V } from "../../shared/utils/dataTestId.js";
 import { Typography as _ } from "../Typography/index.js";
 import c from "../Icon/Icon.js";
-import { chipIconVariants as x, chipVariants as I } from "./helper/variants.js";
-const b = h.memo(({ icon: i, size: e, position: l }) => {
+import { chipIconVariants as b, chipVariants as I } from "./helper/variants.js";
+const x = h.memo(({ icon: i, size: e, position: m }) => {
   const { name: n, node: p, "aria-label": r } = i;
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ l(
     "span",
     {
-      className: x({ size: e, position: l }),
+      className: b({ size: e, position: m }),
       "aria-label": r,
       role: r ? "img" : void 0,
-      children: p || n && /* @__PURE__ */ m(
+      children: p || n && /* @__PURE__ */ l(
         c,
         {
           name: n,
@@ -23,34 +23,34 @@ const b = h.memo(({ icon: i, size: e, position: l }) => {
     }
   );
 });
-b.displayName = "ChipIcon";
+x.displayName = "ChipIcon";
 const L = h.forwardRef(
   ({
     children: i,
     leadingIcon: e,
-    trailingIcon: l,
+    trailingIcon: m,
     variant: n = "warning",
     selected: p = !0,
     state: r = "default",
     size: a = "large",
     className: C,
-    disabled: s = !1,
+    disabled: t = !1,
     onClick: d,
-    onRemove: t,
-    dataTestIdName: N = "chip",
-    ...g
+    onRemove: s,
+    dataTestIdName: g = "chip",
+    ...N
   }, w) => {
     const y = f(
       (o) => {
-        !s && r !== "disabled" && d?.(o);
+        !t && r !== "disabled" && d?.(o);
       },
-      [s, r, d]
+      [t, r, d]
     ), k = f(
       (o) => {
-        o.stopPropagation(), !s && r !== "disabled" && t?.();
+        o.stopPropagation(), !t && r !== "disabled" && s?.();
       },
-      [s, r, t]
-    ), u = s ? "disabled" : r, T = S(
+      [t, r, s]
+    ), u = t ? "disabled" : r, T = S(
       I({
         size: a,
         variant: n,
@@ -61,7 +61,7 @@ const L = h.forwardRef(
     ), j = (o) => {
       switch (o) {
         case "x-small":
-          return "xs";
+          return "sm";
         case "small":
           return "sm";
         case "medium":
@@ -78,14 +78,14 @@ const L = h.forwardRef(
         ref: w,
         type: "button",
         className: T,
-        disabled: s || u === "disabled",
+        disabled: t || u === "disabled",
         onClick: y,
-        ...V(N),
+        ...V(g),
         "aria-pressed": p,
-        ...g,
+        ...N,
         children: [
-          e && /* @__PURE__ */ m(b, { icon: e, size: a, position: "leading" }),
-          i && /* @__PURE__ */ m(
+          e && /* @__PURE__ */ l(x, { icon: e, size: a, position: "leading" }),
+          i && /* @__PURE__ */ l(
             _,
             {
               variants: "action-emphasize",
@@ -95,21 +95,22 @@ const L = h.forwardRef(
               children: i
             }
           ),
-          l && /* @__PURE__ */ m(
+          m && /* @__PURE__ */ l(
             "span",
             {
-              className: x({ size: a, position: "trailing" }),
-              onClick: t ? k : void 0,
-              role: t ? "button" : void 0,
-              tabIndex: t ? 0 : void 0,
-              "aria-label": l["aria-label"] || "Remove",
-              children: l.node || l.name && /* @__PURE__ */ m(
+              className: b({ size: a, position: "trailing" }),
+              onClick: s ? k : void 0,
+              role: s ? "button" : void 0,
+              tabIndex: s ? 0 : void 0,
+              "aria-label": m["aria-label"] || "Remove",
+              "data-no-trigger": "true",
+              children: m.node || m.name && /* @__PURE__ */ l(
                 c,
                 {
-                  name: l.name,
-                  size: a === "x-small" ? 12 : a === "small" || a === "medium" ? 16 : 24
+                  name: m.name,
+                  size: a === "x-small" || a === "small" || a === "medium" ? 16 : 24
                 }
-              ) || t && /* @__PURE__ */ m(
+              ) || s && /* @__PURE__ */ l(
                 c,
                 {
                   name: "x-close",

package/dist/components/Select/helper/variants.js

@@ -10,10 +10,7 @@ const n = e({
       // 4px gap
       "w-full",
       "min-h-8",
-      "px-sm-2",
-      // 12px horizontal padding
-      "py-xs-2",
-      // 6px vertical padding
+      // Padding removed from base - defined in size variants
       "text-sm",
       // 14px font size
       "font-normal",
@@ -98,12 +95,8 @@ const n = e({
           "min-h-10",
           "px-sm-2",
           // 12px horizontal padding
-          "py-sm-2",
+          "py-xs"
           // 8px vertical padding
-          "text-base",
-          // 16px font size
-          "leading-6"
-          // 24px line height
         ],
         leadingIcon: ["w-5", "h-5"],
         // 20px

package/dist/components/Select/index.d.ts

@@ -82,6 +82,7 @@ export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     displayType?: 'chip' | 'default';
     /**
      * Maximum number of selected items to display as chips (multiple mode only)
+     * If not specified, will auto-calculate based on available width
      */
     maxDisplayChips?: number;
     /**

package/dist/components/Select/index.js

@@ -1,119 +1,142 @@
-import { jsxs as d, jsx as t, Fragment as te } from "react/jsx-runtime";
-import { forwardRef as ke, useState as re, useRef as Ee, useEffect as je, useCallback as z, useMemo as B, memo as Fe } from "react";
+import { jsxs as d, jsx as r, Fragment as Se } from "react/jsx-runtime";
+import { forwardRef as $e, useState as Re, useRef as Te, useCallback as R, useMemo as E, memo as ke } from "react";
 import { cn as h } from "../../shared/utils/cn.js";
-import { dataTestId as Ve } from "../../shared/utils/dataTestId.js";
-import { Typography as D } from "../Typography/index.js";
-import y from "../Icon/Icon.js";
-import { Dropdown as ne } from "../Dropdown/index.js";
-import { selectVariants as ze } from "./helper/variants.js";
-import se from "../Chip/index.js";
-import Be from "../TextField/HelperText.js";
-const ae = ke(
+import { dataTestId as je } from "../../shared/utils/dataTestId.js";
+import { Typography as F } from "../Typography/index.js";
+import C from "../Icon/Icon.js";
+import { Dropdown as re } from "../Dropdown/index.js";
+import { selectVariants as De } from "./helper/variants.js";
+import te from "../Chip/index.js";
+import Pe from "../TextField/HelperText.js";
+import { useChipOverflow as Ee } from "../../shared/hooks/useChipOverflow.js";
+const ae = $e(
   ({
-    items: S = [],
-    value: r,
-    onChange: N,
-    placeholder: g = "Select an option...",
-    disabled: n = !1,
-    readOnly: s = !1,
-    loading: q = !1,
-    showCheckmark: G = !1,
-    emptyText: J = "No options available",
-    state: w,
-    label: K,
-    helpText: ce,
-    required: oe = !1,
-    leadingIcon: c,
-    trailingIcon: l,
-    mode: m = "single",
-    displayType: ie = "chip",
-    maxDisplayChips: M = 3,
+    items: M = [],
+    value: t,
+    onChange: y,
+    placeholder: b = "Select an option...",
+    disabled: a = !1,
+    readOnly: n = !1,
+    loading: V = !1,
+    showCheckmark: z = !1,
+    emptyText: q = "No options available",
+    state: T,
+    label: G,
+    helpText: ne,
+    required: se = !1,
+    leadingIcon: m,
+    trailingIcon: p,
+    mode: o = "single",
+    displayType: oe = "chip",
+    maxDisplayChips: Fe,
+    // eslint-disable-line @typescript-eslint/no-unused-vars -- kept for backward compatibility
     moreItemsText: le = "+{count}",
-    trigger: me,
-    side: L = "bottom",
-    align: P = "start",
-    sideOffset: Q = 4,
-    enableVirtualization: U,
-    itemHeight: X = 32,
-    maxHeight: Y = 300,
-    size: a = "md",
-    variant: R = "default",
-    fullWidth: $ = !1,
-    className: fe,
-    iconsSize: pe,
-    "data-testid": u,
-    width: v,
-    error: Z,
-    haveIcon: he,
+    trigger: ie,
+    side: J = "bottom",
+    align: K = "start",
+    sideOffset: L = 4,
+    enableVirtualization: Q,
+    itemHeight: U = 32,
+    maxHeight: W = 300,
+    size: s = "md",
+    variant: k = "default",
+    fullWidth: j = !1,
+    className: ce,
+    iconsSize: me,
+    "data-testid": l,
+    width: w,
+    error: X,
+    haveIcon: pe,
     iconsCustom: ue,
-    onBlur: _,
-    dropdownProps: H,
-    allowSearch: de,
-    title: T,
-    onSearchChange: Ne,
-    searchValue: ge,
-    showClearButton: ve = !1,
+    onBlur: Y,
+    dropdownProps: Z,
+    allowSearch: fe,
+    title: D,
+    onSearchChange: he,
+    searchValue: de,
+    showClearButton: ge = !1,
     searchPlaceholder: xe = "Search...",
-    ...Ce
-  }, Ae) => {
-    const [o, b] = re(!1), [k, ye] = re(0), E = Ee(null), i = ze({
-      size: a,
-      variant: R,
-      fullWidth: $,
-      state: w,
-      disabled: n,
-      readOnly: s
-    });
-    je(() => {
-      if (E.current) {
-        const e = new ResizeObserver((f) => {
-          for (const p of f)
-            ye(p.contentRect.width);
-        });
-        return e.observe(E.current), () => e.disconnect();
-      }
-    }, []);
-    const O = z(() => {
-      if (k === 0) return M;
-      const e = a === "sm" ? 100 : a === "lg" ? 140 : 120, f = 4, p = 32, F = 32, A = c ? 24 : 0, Re = p + F + A + 16, $e = k - Re, Te = Math.floor(
-        $e / (e + f)
-      );
-      return Math.max(1, Math.min(Te, M));
-    }, [k, M, a, c]), be = z(
+    ...Ne
+  }, ve) => {
+    const [u, S] = Re(!1), Ce = Te(null), i = De({
+      size: s,
+      variant: k,
+      fullWidth: j,
+      state: T,
+      disabled: a,
+      readOnly: n
+    }), ye = R(
       (e) => {
-        if (m === "multiple" && Array.isArray(r) && !n && !s) {
-          const f = r.filter((p) => p !== e);
-          N?.(f);
+        if (o === "multiple" && Array.isArray(t) && !a && !n) {
+          const c = t.filter((A) => A !== e);
+          y?.(c);
         }
       },
-      [m, r, N, n, s]
-    ), Se = z(() => {
-      m === "multiple" && Array.isArray(r) && r.length > 0 && !n && !s && N?.([]);
-    }, [m, r, N, n, s]), x = B(() => {
-      if (!r) return [];
-      const e = [], f = Array.isArray(r) ? r : [r];
-      return ((F) => {
-        F.forEach((A) => {
-          "items" in A ? A.items.forEach((V) => {
-            f.includes(V.value) && e.push(V);
-          }) : f.includes(A.value) && e.push(A);
+      [o, t, y, a, n]
+    ), _ = R(() => {
+      o === "multiple" && Array.isArray(t) && t.length > 0 && !a && !n && y?.([]);
+    }, [o, t, y, a, n]), f = E(() => {
+      if (!t) return [];
+      const e = Array.isArray(t) ? t : [t], c = /* @__PURE__ */ new Map();
+      return ((N) => {
+        N.forEach((v) => {
+          "items" in v ? v.items.forEach((ee) => {
+            c.set(ee.value, ee);
+          }) : c.set(v.value, v);
         });
-      })(S), e;
-    }, [r, S]), j = B(() => {
-      if (m === "single") {
-        const e = x[0];
-        return e ? e.label : g;
+      })(M), e.map((N) => {
+        const v = c.get(N);
+        return v || {
+          value: N,
+          label: N
+        };
+      });
+    }, [t, M]), P = E(() => {
+      if (o === "single") {
+        const e = f[0];
+        return e ? e.label : b;
       }
-      return m === "multiple" ? r?.length === 0 ? g : T ? `${T} ` : "" : "";
-    }, [m, x, g, T, r]), W = B(() => {
-      if (m !== "multiple" || !Array.isArray(r)) return [];
-      const e = O(), f = x.slice(0, e), p = x.length - e;
-      return {
-        displayItems: f,
-        remainingCount: p,
-        hasMore: p > 0
+      return o === "multiple" ? t?.length === 0 ? b : D ? `${D} ` : "" : "";
+    }, [o, f, b, D, t]), g = Ee({
+      items: o === "multiple" && Array.isArray(t) ? f.map((e) => ({
+        value: e.value,
+        label: e.label
+      })) : [],
+      gap: 8,
+      // 8px gap between chips (matches gap-2 in Tailwind)
+      minChipsToShow: 1,
+      moreChipWidth: 60
+      // Estimated width for "+X more" chip
+    }), $ = E(() => {
+      if (o !== "multiple" || !Array.isArray(t))
+        return {
+          displayItems: [],
+          remainingCount: 0,
+          hasMore: !1
+        };
+      const c = {
+        displayItems: g.displayItems.map((A) => f.find(
+          (N) => N.value === A.value
+        ) || {
+          value: A.value,
+          label: A.label
+        }),
+        remainingCount: g.remainingCount,
+        hasMore: g.hasMore
       };
-    }, [m, r, x, O]), We = v ? { width: typeof v == "number" ? `${v}px` : v } : {}, we = h(i.container(), fe), C = (e) => {
+      return f.length > 0 && c.displayItems.length === 0 && !c.hasMore ? {
+        displayItems: [f[0]],
+        remainingCount: Math.max(0, f.length - 1),
+        hasMore: f.length > 1
+      } : c;
+    }, [
+      o,
+      t,
+      g.displayItems,
+      g.remainingCount,
+      g.hasMore,
+      f
+    ]), be = w ? { width: typeof w == "number" ? `${w}px` : w } : {}, we = h(i.container(), ce), x = (e) => {
       switch (e) {
         case "sm":
           return 16;
@@ -124,58 +147,64 @@ const ae = ke(
         default:
           return 16;
       }
-    }, I = (e) => {
+    }, B = (e) => {
       switch (e) {
         case "sm":
           return "small";
         case "md":
           return "medium";
         case "lg":
-          return "large";
+          return "x-small";
         default:
           return "medium";
       }
-    }, ee = (e) => {
-      b(e), !e && _ && _(
+    }, H = R((e) => !!(e.closest('[data-testid*="chip"]') || e.closest('[data-testid*="clear-all"]') || e.closest('[data-no-trigger="true"]') || e.closest('[role="button"]') && e.closest('[data-testid*="chip"]')), []), I = R(
+      (e) => {
+        const c = e.target;
+        return H(c) ? (e.preventDefault(), e.stopPropagation(), !0) : !1;
+      },
+      [H]
+    ), O = (e) => {
+      S(e), !e && Y && Y(
         new FocusEvent("blur")
       );
-    }, Me = () => /* @__PURE__ */ d(
+    }, Ae = () => /* @__PURE__ */ d(
       "div",
       {
         className: i.trigger(),
-        "data-state": o ? "open" : "closed",
+        "data-state": u ? "open" : "closed",
         children: [
-          c && /* @__PURE__ */ t("span", { className: i.leadingIcon(), children: c.node || c.name && /* @__PURE__ */ t(
-            y,
+          m && /* @__PURE__ */ r("span", { className: i.leadingIcon(), children: m.node || m.name && /* @__PURE__ */ r(
+            C,
             {
-              name: c.name,
-              size: C(a),
-              "aria-label": c["aria-label"]
+              name: m.name,
+              size: x(s),
+              "aria-label": m["aria-label"]
             }
           ) }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             "span",
             {
               className: h(
                 "flex-1 truncate text-left",
-                x.length > 0 ? "text-fg-neutral-main" : i.placeholder()
+                f.length > 0 ? "text-fg-neutral-main" : i.placeholder()
               ),
-              children: j
+              children: P
             }
           ),
-          l ? /* @__PURE__ */ t("span", { className: i.trailingIcon(), children: l.node || l.name && /* @__PURE__ */ t(
-            y,
+          p ? /* @__PURE__ */ r("span", { className: i.trailingIcon(), children: p.node || p.name && /* @__PURE__ */ r(
+            C,
             {
-              name: l.name,
-              size: C(a),
-              "aria-label": l["aria-label"]
+              name: p.name,
+              size: x(s),
+              "aria-label": p["aria-label"]
             }
-          ) }) : /* @__PURE__ */ t(
-            y,
+          ) }) : /* @__PURE__ */ r(
+            C,
             {
-              name: o ? "chevron-up" : "chevron-down",
-              size: C(a),
-              className: h(i.chevron(), o && "rotate-180")
+              name: u ? "chevron-up" : "chevron-down",
+              size: x(s),
+              className: h(i.chevron(), u && "rotate-180")
             }
           )
         ]
@@ -184,234 +213,264 @@ const ae = ke(
     return /* @__PURE__ */ d(
       "div",
       {
-        ref: Ae,
+        ref: ve,
         className: we,
-        style: We,
-        ...Ve(u || "select"),
-        ...Ce,
+        style: be,
+        ...je(l || "select"),
+        ...Ne,
         children: [
-          K && /* @__PURE__ */ d("div", { className: "mb-1 flex items-center gap-[2px]", children: [
-            /* @__PURE__ */ t(D, { variants: "action", size: "sm", color: "fg-neutral-subtle", children: K }),
-            oe && /* @__PURE__ */ t(D, { variants: "action", size: "sm", color: "fg-accent-error", children: "*" })
+          G && /* @__PURE__ */ d("div", { className: "mb-1 flex items-center gap-[2px]", children: [
+            /* @__PURE__ */ r(F, { variants: "action", size: "sm", color: "fg-neutral-subtle", children: G }),
+            se && /* @__PURE__ */ r(F, { variants: "action", size: "sm", color: "fg-accent-error", children: "*" })
           ] }),
-          /* @__PURE__ */ t("div", { className: "relative h-11", children: m === "multiple" ? /* @__PURE__ */ t(
-            ne,
+          /* @__PURE__ */ r("div", { className: "relative h-11", children: o === "multiple" ? /* @__PURE__ */ r(
+            re,
             {
-              ...H,
-              items: S,
-              value: r,
+              ...Z,
+              items: M,
+              value: t,
               onValueChange: (e) => {
-                n || s || N?.(Array.isArray(e) ? e : [e]);
+                a || n || y?.(Array.isArray(e) ? e : [e]);
               },
               fullWidthContent: !0,
-              placeholder: g,
-              disabled: n,
-              loading: q,
-              showCheckmark: G,
-              emptyText: J,
-              state: w,
-              open: o,
-              onOpenChange: ee,
-              side: L,
-              align: P,
-              search: de,
-              sideOffset: Q,
-              enableVirtualization: U,
+              placeholder: b,
+              disabled: a,
+              loading: V,
+              showCheckmark: z,
+              emptyText: q,
+              state: T,
+              open: u,
+              onOpenChange: O,
+              side: J,
+              align: K,
+              search: fe,
+              sideOffset: L,
+              enableVirtualization: Q,
               selectionMode: "separated",
               multiSelect: !0,
-              itemHeight: X,
-              maxHeight: Y,
-              size: a,
-              variant: R,
-              fullWidth: $,
+              itemHeight: U,
+              maxHeight: W,
+              size: s,
+              variant: k,
+              fullWidth: j,
               searchPlaceholder: xe,
-              width: v,
-              "data-testid": u ? `${u}-dropdown` : void 0,
-              showClearButton: ve,
-              onClear: Se,
-              searchValue: ge,
-              onSearchChange: Ne,
+              width: w,
+              "data-testid": l ? `${l}-dropdown` : void 0,
+              showClearButton: ge,
+              onClear: _,
+              searchValue: de,
+              onSearchChange: he,
               className: "flex items-center",
               children: /* @__PURE__ */ d(
                 "div",
                 {
-                  ref: E,
+                  ref: Ce,
                   className: h(
                     i.trigger({
-                      state: Z ? "error" : void 0
+                      state: X ? "error" : void 0
                     }),
                     "flex"
                   ),
-                  "data-state": o ? "open" : "closed",
-                  onClick: () => b(!o),
+                  "data-state": u ? "open" : "closed",
+                  onPointerDown: I,
+                  onClick: (e) => {
+                    a || n || I(e) || S(!u);
+                  },
                   children: [
-                    c && /* @__PURE__ */ t("span", { className: i.leadingIcon(), children: c.node || c.name && /* @__PURE__ */ t(
-                      y,
+                    m && /* @__PURE__ */ r("span", { className: i.leadingIcon(), children: m.node || m.name && /* @__PURE__ */ r(
+                      C,
                       {
-                        name: c.name,
-                        size: C(a),
-                        "aria-label": c["aria-label"],
+                        name: m.name,
+                        size: x(s),
+                        "aria-label": m["aria-label"],
                         className: "cursor-pointer"
                       }
                     ) }),
-                    /* @__PURE__ */ t(
+                    /* @__PURE__ */ r(
                       "div",
                       {
                         className: h(
                           "flex-1 flex flex-nowrap gap-1 min-h-0 overflow-hidden",
-                          !n && !s && "cursor-pointer"
+                          !a && !n && "cursor-pointer"
                         ),
-                        onClick: (e) => {
-                          n || s || e.target.closest('[data-testid*="chip"]') || b(!o);
-                        },
-                        children: Array.isArray(W) ? null : /* @__PURE__ */ t(te, { children: ie === "chip" ? (
-                          // Chip display mode - render individual chips
-                          /* @__PURE__ */ d(te, { children: [
-                            W.displayItems.map((e) => /* @__PURE__ */ t("div", { className: "flex-shrink-0", children: /* @__PURE__ */ t(
-                              se,
-                              {
-                                size: I(a),
-                                onRemove: !n && !s ? () => {
-                                  be(e.value);
-                                } : void 0,
-                                className: "bg-bg-surface-level-3",
-                                variant: "neutral",
-                                trailingIcon: !n && !s ? {
-                                  name: "x-close",
-                                  "aria-label": "Remove option"
-                                } : void 0,
-                                dataTestIdName: `${u || "select"}-chip-${e.value}`,
-                                children: e.label
-                              }
-                            ) }, e.value)),
-                            W.hasMore && /* @__PURE__ */ t(
-                              "div",
-                              {
-                                onClick: (e) => e.stopPropagation(),
-                                className: "flex-shrink-0",
-                                children: /* @__PURE__ */ t(
-                                  se,
-                                  {
-                                    size: I(a),
-                                    variant: "neutral",
-                                    className: "self-center bg-bg-surface-level-3",
-                                    dataTestIdName: `${u || "select"}-chip-more`,
-                                    children: le.replace(
-                                      "{count}",
-                                      W.remainingCount.toString()
-                                    )
-                                  }
-                                )
-                              }
-                            )
-                          ] })
+                        children: Array.isArray($) ? null : /* @__PURE__ */ r(Se, { children: oe === "chip" ? /* @__PURE__ */ d(
+                          "div",
+                          {
+                            ref: g.containerRef,
+                            className: "flex items-center gap-2 flex-nowrap w-full max-w-full overflow-hidden",
+                            children: [
+                              $.displayItems.map((e) => /* @__PURE__ */ r(
+                                te,
+                                {
+                                  size: B(s),
+                                  onRemove: !a && !n ? () => {
+                                    ye(e.value);
+                                  } : void 0,
+                                  className: "bg-bg-surface-level-3 flex-shrink-0",
+                                  variant: "neutral",
+                                  trailingIcon: !a && !n ? {
+                                    name: "x-close",
+                                    "aria-label": "Remove option"
+                                  } : void 0,
+                                  dataTestIdName: `${l || "select"}-chip-${e.value}`,
+                                  "data-no-trigger": "true",
+                                  children: e.label
+                                },
+                                e.value
+                              )),
+                              $.hasMore && /* @__PURE__ */ r(
+                                te,
+                                {
+                                  size: B(s),
+                                  variant: "neutral",
+                                  className: "bg-bg-surface-level-3 flex-shrink-0",
+                                  dataTestIdName: `${l || "select"}-chip-more`,
+                                  onClick: (e) => e.stopPropagation(),
+                                  children: le.replace(
+                                    "{count}",
+                                    $.remainingCount.toString()
+                                  )
+                                }
+                              )
+                            ]
+                          }
                         ) : (
                           // Default display mode - show summary text
-                          /* @__PURE__ */ t(
+                          /* @__PURE__ */ r(
                             "div",
                             {
                               className: h(
                                 i.placeholder(),
-                                !n && !s && "cursor-pointer"
+                                !a && !n && "cursor-pointer"
                               ),
-                              children: Array.isArray(r) ? r?.length > 0 ? /* @__PURE__ */ d(
-                                D,
+                              children: Array.isArray(t) ? t?.length > 0 ? /* @__PURE__ */ d(
+                                F,
                                 {
                                   variants: "body",
                                   size: "md",
                                   color: "fg-neutral-main",
                                   children: [
-                                    j,
+                                    P,
                                     /* @__PURE__ */ d("span", { className: "text-fg-brand-rest", children: [
                                       "(",
-                                      r?.length,
+                                      t?.length,
                                       ")"
                                     ] })
                                   ]
                                 }
-                              ) : g : j
+                              ) : b : P
                             }
                           )
                         ) })
                       }
                     ),
-                    /* @__PURE__ */ t("div", { className: "flex items-center gap-xs", children: /* @__PURE__ */ t(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => {
-                          !n && !s && b(!o);
-                        },
-                        className: h(
-                          "flex items-center justify-center p-1",
-                          !n && !s && "cursor-pointer"
-                        ),
-                        children: l ? /* @__PURE__ */ t("span", { className: i.trailingIcon(), children: l.node || l.name && /* @__PURE__ */ t(
-                          y,
-                          {
-                            name: l.name,
-                            size: C(a),
-                            "aria-label": l["aria-label"]
-                          }
-                        ) }) : /* @__PURE__ */ t(
-                          y,
-                          {
-                            name: o ? "chevron-up" : "chevron-down",
-                            size: C(a),
-                            className: h(
-                              i.chevron(),
-                              o && "rotate-180"
-                            )
-                          }
-                        )
-                      }
-                    ) })
+                    /* @__PURE__ */ d("div", { className: "flex items-center gap-xs", children: [
+                      Array.isArray(t) && t.length > 0 && /* @__PURE__ */ r(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (e) => {
+                            e.stopPropagation(), _();
+                          },
+                          className: h(
+                            "flex items-center justify-center rounded-sm transition-colors",
+                            !a && !n && "cursor-pointer hover:bg-bg-neutral-subtle",
+                            a || n ? "opacity-50 cursor-not-allowed" : ""
+                          ),
+                          disabled: a || n,
+                          "aria-label": "Clear all selections",
+                          "data-testid": l ? `${l}-clear-all` : void 0,
+                          "data-no-trigger": "true",
+                          children: /* @__PURE__ */ r(
+                            C,
+                            {
+                              name: "x-circle",
+                              variant: "solid",
+                              size: x(s),
+                              className: "text-fg-neutral-subtle"
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (e) => {
+                            e.stopPropagation(), !a && !n && S(!u);
+                          },
+                          className: h(
+                            "flex items-center justify-center dropdown-toggle-btn",
+                            !a && !n && "cursor-pointer"
+                          ),
+                          "data-testid": l ? `${l}-dropdown-toggle` : "dropdown-toggle",
+                          children: p ? /* @__PURE__ */ r("span", { className: i.trailingIcon(), children: p.node || p.name && /* @__PURE__ */ r(
+                            C,
+                            {
+                              name: p.name,
+                              size: x(s),
+                              "aria-label": p["aria-label"]
+                            }
+                          ) }) : /* @__PURE__ */ r(
+                            C,
+                            {
+                              name: u ? "chevron-up" : "chevron-down",
+                              size: x(s),
+                              className: h(
+                                i.chevron(),
+                                u && "rotate-180"
+                              )
+                            }
+                          )
+                        }
+                      )
+                    ] })
                   ]
                 }
               )
             }
           ) : (
             /* Single mode - use Dropdown normally */
-            /* @__PURE__ */ t(
-              ne,
+            /* @__PURE__ */ r(
+              re,
               {
-                ...H,
-                items: S,
-                value: r,
+                ...Z,
+                items: M,
+                value: t,
                 onValueChange: (e) => {
-                  n || s || (N?.(e), b(!1));
+                  a || n || (y?.(e), S(!1));
                 },
-                placeholder: g,
-                disabled: n,
-                loading: q,
-                showCheckmark: G,
-                emptyText: J,
-                state: w,
-                open: o,
-                onOpenChange: ee,
-                side: L,
-                align: P,
-                sideOffset: Q,
-                enableVirtualization: U,
-                itemHeight: X,
-                maxHeight: Y,
-                size: a,
-                variant: R,
-                fullWidth: $,
-                width: v,
-                "data-testid": u ? `${u}-dropdown` : void 0,
-                children: me || Me()
+                placeholder: b,
+                disabled: a,
+                loading: V,
+                showCheckmark: z,
+                emptyText: q,
+                state: T,
+                open: u,
+                onOpenChange: O,
+                side: J,
+                align: K,
+                sideOffset: L,
+                enableVirtualization: Q,
+                itemHeight: U,
+                maxHeight: W,
+                size: s,
+                variant: k,
+                fullWidth: j,
+                width: w,
+                "data-testid": l ? `${l}-dropdown` : void 0,
+                children: ie || Ae()
               }
             )
           ) }),
-          /* @__PURE__ */ t(
-            Be,
+          /* @__PURE__ */ r(
+            Pe,
             {
               className: "mt-1",
-              text: ce,
-              error: Z,
-              haveIcon: he,
-              iconsSize: pe,
+              text: ne,
+              error: X,
+              haveIcon: pe,
+              iconsSize: me,
               iconsCustom: ue
             }
           )
@@ -421,7 +480,7 @@ const ae = ke(
   }
 );
 ae.displayName = "Select";
-const Ye = Fe(ae);
+const Ye = ke(ae);
 export {
   Ye as default
 };

package/dist/shared/hooks/index.d.ts

@@ -1,3 +1,5 @@
 export { useTruncateTooltip } from './useTruncateTooltip';
 export { useSeparatedMode } from './useSeparatedMode';
+export { useChipOverflow } from './useChipOverflow';
 export type { UseSeparatedModeProps, UseSeparatedModeReturn, SeparatedModeItem, SeparatedModeGroup } from './useSeparatedMode';
+export type { UseChipOverflowProps, UseChipOverflowReturn, ChipOverflowItem } from './useChipOverflow';

package/dist/shared/hooks/useChipOverflow.d.ts

@@ -0,0 +1,24 @@
+export interface ChipOverflowItem {
+    value: string;
+    label: string;
+    [key: string]: unknown;
+}
+export interface UseChipOverflowProps {
+    items: ChipOverflowItem[];
+    gap?: number;
+    minChipsToShow?: number;
+    moreChipWidth?: number;
+}
+export interface UseChipOverflowReturn {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    displayItems: ChipOverflowItem[];
+    remainingCount: number;
+    hasMore: boolean;
+    recalculate: () => void;
+}
+/**
+ * Custom hook to handle chip overflow detection and dynamic truncation
+ * Uses ResizeObserver to detect when chips would overflow and automatically
+ * calculates how many chips can be displayed
+ */
+export declare const useChipOverflow: ({ items, gap, minChipsToShow, moreChipWidth, }: UseChipOverflowProps) => UseChipOverflowReturn;

package/dist/shared/hooks/useChipOverflow.js

@@ -0,0 +1,99 @@
+import { useRef as w, useState as k, useCallback as q, useEffect as g } from "react";
+const O = ({
+  items: t,
+  gap: a = 8,
+  minChipsToShow: C = 1,
+  moreChipWidth: W = 60
+}) => {
+  const f = w(null), [x, o] = k(t.length), n = q(() => {
+    if (!f.current || t.length === 0) {
+      o(t.length);
+      return;
+    }
+    const i = f.current, h = i.clientWidth;
+    if (h === 0) {
+      o(t.length);
+      return;
+    }
+    if (t.length <= 4) {
+      const e = i.querySelectorAll(
+        '[data-testid*="chip"]:not([data-testid*="chip-more"])'
+      );
+      let r = 75;
+      e.length > 0 && (r = e[0].offsetWidth);
+      const s = Math.max(0, t.length - 1) * a;
+      if (t.length * r + s <= h) {
+        o(t.length);
+        return;
+      }
+    }
+    const l = i.querySelectorAll(
+      '[data-testid*="chip"]:not([data-testid*="chip-more"])'
+    );
+    if (l.length === 0) {
+      o(t.length);
+      return;
+    }
+    let u = 0;
+    l.length > 0 && (u = Array.from(l).reduce((r, s) => r + s.offsetWidth, 0) / l.length), u === 0 && (u = 80);
+    let M = 0, c = 0;
+    for (let e = 0; e < t.length; e++) {
+      const r = e < l.length ? l[e].offsetWidth : u;
+      if (r === 0)
+        break;
+      const s = e === t.length - 1, p = M + r + (e > 0 ? a : 0);
+      let d;
+      if (s)
+        d = h;
+      else {
+        const b = r;
+        p + a + b > h ? d = h - W - a : d = h;
+      }
+      if (p <= d)
+        M = p, c = e + 1;
+      else
+        break;
+    }
+    c = Math.max(c, Math.min(C, t.length));
+    const y = c >= t.length ? t.length : c, A = t.length > 0 ? Math.max(1, y) : 0;
+    o(A);
+  }, [t.length, a, C, W]);
+  g(() => {
+    const i = f.current;
+    if (!i) return;
+    const h = setTimeout(n, 0), l = new ResizeObserver(() => {
+      n();
+    });
+    return l.observe(i), () => {
+      clearTimeout(h), l.disconnect();
+    };
+  }, [n]), g(() => {
+    n();
+    const i = setTimeout(() => {
+      n();
+    }, 10), h = setTimeout(() => {
+      n();
+    }, 50);
+    return () => {
+      clearTimeout(i), clearTimeout(h);
+    };
+  }, [t, n]), g(() => {
+    if (t.length > 0) {
+      const i = requestAnimationFrame(() => {
+        n();
+      });
+      return () => cancelAnimationFrame(i);
+    }
+  }, [t.length, n]);
+  const T = t.slice(0, x), m = Math.max(0, t.length - x), v = m > 0;
+  return {
+    containerRef: f,
+    displayItems: T,
+    remainingCount: m,
+    hasMore: v,
+    recalculate: n
+  };
+};
+export {
+  O as useChipOverflow
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mcr-design-systems",
   "private": false,
-  "version": "1.0.211",
+  "version": "1.0.212",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",