@adam-milo/ui 1.0.19 → 1.0.21

package/dist/index14.js

@@ -1,186 +1,297 @@
-import { jsxs as O, jsx as b } from "react/jsx-runtime";
-import { forwardRef as B, useRef as _, useState as H, useCallback as I, useEffect as k } from "react";
-import { cn as x } from "./index17.js";
-import { Chip as G } from "./index13.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useState, useCallback, useEffect } from "react";
+import { cn } from "./index17.js";
+import { Chip } from "./index13.js";
 /* empty css        */
-import { Icon as J } from "@adam-milo/icons";
-const Q = (t, c, n) => {
-  if (!t) return 0.5 * c;
-  const l = t.match(/^([\d.]+)(px|rem|em)?/);
-  if (!l) return 0.5 * c;
-  const s = parseFloat(l[1]);
-  switch (l[2] || "px") {
+import { devWarn } from "./index31.js";
+import { Icon } from "@adam-milo/icons";
+const parseGapValue = (gapString, rootFontSize, containerFontSize) => {
+  if (!gapString) return 0.5 * rootFontSize;
+  const match = gapString.match(/^([\d.]+)(px|rem|em)?/);
+  if (!match) return 0.5 * rootFontSize;
+  const value = parseFloat(match[1]);
+  const unit = match[2] || "px";
+  switch (unit) {
     case "px":
-      return s;
+      return value;
     case "rem":
-      return s * c;
+      return value * rootFontSize;
     case "em":
-      return s * n;
+      return value * containerFontSize;
     default:
-      return 0.5 * c;
+      return 0.5 * rootFontSize;
   }
-}, X = (t, c, n, l, s) => {
-  let w = 0, a = 0;
-  for (let i = 0; i < t.length; i++) {
-    const D = t[i], E = c.get(D.value) || 0;
-    if (E === 0) {
-      a++;
+};
+const calculateFittingChips = (items, chipWidths, containerWidth, gap, overflowChipWidth) => {
+  let totalWidth = 0;
+  let count = 0;
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    const chipWidth = chipWidths.get(item.value) || 0;
+    if (chipWidth === 0) {
+      count++;
       break;
     }
-    const $ = i > 0 ? l : 0, C = w + $ + E;
-    if (i < t.length - 1) {
-      if (C + l + s > n && a > 0) break;
-    } else if (C > n && a > 0) break;
-    w = C, a++;
+    const gapBeforeThisChip = i > 0 ? gap : 0;
+    const widthWithThisChip = totalWidth + gapBeforeThisChip + chipWidth;
+    const hasMoreItems = i < items.length - 1;
+    if (hasMoreItems) {
+      const widthWithOverflow = widthWithThisChip + gap + overflowChipWidth;
+      if (widthWithOverflow > containerWidth && count > 0) break;
+    } else {
+      if (widthWithThisChip > containerWidth && count > 0) break;
+    }
+    totalWidth = widthWithThisChip;
+    count++;
   }
-  return Math.max(1, a);
-}, Y = (t, c) => {
-  const n = _();
-  return k(() => () => {
-    n.current && clearTimeout(n.current);
-  }, []), I(
-    (...s) => {
-      n.current && clearTimeout(n.current), n.current = setTimeout(() => t(...s), c);
+  return Math.max(1, count);
+};
+const useDebounce = (callback, delay) => {
+  const timeoutRef = useRef();
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const debouncedFn = useCallback(
+    (...args) => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => callback(...args), delay);
     },
-    [t, c]
+    [callback, delay]
   );
-}, Z = (t, c, n, l, s) => {
-  const [w, a] = H(t.length), i = I(() => {
-    if (s !== void 0) {
-      a(Math.min(s, t.length));
+  return debouncedFn;
+};
+const useChipOverflow = (items, containerRef, chipRefs, chipWidths, maxVisible) => {
+  const [visibleCount, setVisibleCount] = useState(items.length);
+  const calculateVisibleChips = useCallback(() => {
+    if (maxVisible !== void 0) {
+      setVisibleCount(Math.min(maxVisible, items.length));
       return;
     }
-    const f = c.current;
-    if (!f) return;
-    const m = f.clientWidth, p = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16, T = window.getComputedStyle(f), M = T.gap, W = parseFloat(T.fontSize) || 16, S = Q(M, p, W), N = 3.75 * p;
-    for (let v = 0; v < t.length; v++) {
-      const g = t[v], A = n.current[v];
-      A && l.current.set(g.value, A.offsetWidth);
+    const container = containerRef.current;
+    if (!container) return;
+    const containerWidth = container.clientWidth;
+    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const computedStyle = window.getComputedStyle(container);
+    const gapString = computedStyle.gap;
+    const containerFontSize = parseFloat(computedStyle.fontSize) || 16;
+    const gap = parseGapValue(gapString, rootFontSize, containerFontSize);
+    const OVERFLOW_CHIP_WIDTH_REM = 3.75;
+    const overflowChipWidth = OVERFLOW_CHIP_WIDTH_REM * rootFontSize;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const chip = chipRefs.current[i];
+      if (chip) {
+        chipWidths.current.set(item.value, chip.offsetWidth);
+      }
     }
-    const y = X(
-      t,
-      l.current,
-      m,
-      S,
-      N
+    const count = calculateFittingChips(
+      items,
+      chipWidths.current,
+      containerWidth,
+      gap,
+      overflowChipWidth
     );
-    a(y);
-  }, [t, s, c, n, l]), D = Y(i, 100);
-  k(() => {
-    n.current.length > t.length && (n.current = n.current.slice(0, t.length));
-    const f = new Set(t.map((m) => m.value));
-    l.current.forEach((m, p) => {
-      f.has(p) || l.current.delete(p);
-    }), s === void 0 && (t.some((p) => !l.current.has(p.value)) ? a(t.length) : setTimeout(i, 0));
-  }, [t, s, i, n, l]), k(() => {
-    const f = c.current;
-    if (!f) return;
-    const m = new ResizeObserver(() => {
-      D();
+    setVisibleCount(count);
+  }, [items, maxVisible, containerRef, chipRefs, chipWidths]);
+  const debouncedCalculate = useDebounce(calculateVisibleChips, 100);
+  useEffect(() => {
+    if (chipRefs.current.length > items.length) {
+      chipRefs.current = chipRefs.current.slice(0, items.length);
+    }
+    const currentValues = new Set(items.map((item) => item.value));
+    chipWidths.current.forEach((_, value) => {
+      if (!currentValues.has(value)) {
+        chipWidths.current.delete(value);
+      }
     });
-    return m.observe(f), setTimeout(i, 0), () => {
-      m.disconnect();
+    if (maxVisible === void 0) {
+      const hasUnmeasuredItems = items.some((item) => !chipWidths.current.has(item.value));
+      if (hasUnmeasuredItems) {
+        setVisibleCount(items.length);
+      } else {
+        setTimeout(calculateVisibleChips, 0);
+      }
+    }
+  }, [items, maxVisible, calculateVisibleChips, chipRefs, chipWidths]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const resizeObserver = new ResizeObserver(() => {
+      debouncedCalculate();
+    });
+    resizeObserver.observe(container);
+    setTimeout(calculateVisibleChips, 0);
+    return () => {
+      resizeObserver.disconnect();
     };
-  }, [i, D, c]);
-  const E = t.slice(0, w), $ = t.slice(w), C = $.length > 0;
-  return { visibleCount: w, visibleItems: E, hiddenItems: $, hasOverflow: C };
-}, ee = B(
+  }, [calculateVisibleChips, debouncedCalculate, containerRef]);
+  const visibleItems = items.slice(0, visibleCount);
+  const hiddenItems = items.slice(visibleCount);
+  const hasOverflow = hiddenItems.length > 0;
+  return { visibleCount, visibleItems, hiddenItems, hasOverflow };
+};
+const ChipGroup = forwardRef(
   ({
-    items: t,
-    selectedValue: c,
-    onSelectionChange: n,
-    removable: l = !1,
-    onRemove: s,
-    variant: w = "primary",
-    disabled: a = !1,
-    maxVisible: i,
-    className: D,
-    "data-testid": E,
-    "data-cy": $,
-    ...C
-  }, f) => {
-    const p = (t && Array.isArray(t) ? t : []).filter((e) => e != null && typeof e == "object"), T = _(null), M = _([]), W = _(/* @__PURE__ */ new Map()), S = _(null), [K, N] = H(!1), [y, v] = H(!1), g = _([]), { visibleItems: A, hiddenItems: d, hasOverflow: V } = Z(
-      p,
-      T,
-      M,
-      W,
-      i
-    ), F = I(
-      (e, o, r) => {
-        a || o || n && n(c === e ? null : e, r);
+    items,
+    selectedValue,
+    onSelectionChange,
+    removable = false,
+    onRemove,
+    variant = "primary",
+    disabled = false,
+    maxVisible,
+    className,
+    "data-testid": dataTestId,
+    "data-cy": dataCy,
+    ...props
+  }, ref) => {
+    const normalizedItems = items && Array.isArray(items) ? items : [];
+    const validItems = normalizedItems.filter((item) => {
+      return item !== null && item !== void 0 && typeof item === "object";
+    });
+    const containerRef = useRef(null);
+    const chipRefs = useRef([]);
+    const chipWidths = useRef(/* @__PURE__ */ new Map());
+    const dropdownRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const dropdownItemRefs = useRef([]);
+    const { visibleItems, hiddenItems, hasOverflow } = useChipOverflow(
+      validItems,
+      containerRef,
+      chipRefs,
+      chipWidths,
+      maxVisible
+    );
+    const handleChipClick = useCallback(
+      (value, itemDisabled, event) => {
+        if (disabled || itemDisabled) return;
+        if (onSelectionChange) {
+          const newValue = selectedValue === value ? null : value;
+          onSelectionChange(newValue, event);
+        }
       },
-      [a, c, n]
-    ), j = I(
-      (e, o) => {
-        e.stopPropagation(), !a && s && s(o, e);
+      [disabled, selectedValue, onSelectionChange]
+    );
+    const handleRemove = useCallback(
+      (e, value) => {
+        e.stopPropagation();
+        if (disabled) return;
+        if (onRemove) {
+          onRemove(value, e);
+        }
       },
-      [a, s]
-    ), U = I(
-      (e, o, r) => {
-        a || r || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), F(o, r, e));
+      [disabled, onRemove]
+    );
+    const handleKeyDown = useCallback(
+      (e, value, itemDisabled) => {
+        if (disabled || itemDisabled) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleChipClick(value, itemDisabled, e);
+        }
       },
-      [a, F]
-    ), q = I((e) => {
-      e.stopPropagation(), v((o) => !o), N(!1);
-    }, []), R = I(
-      (e, o) => {
-        var r, u, z, h;
+      [disabled, handleChipClick]
+    );
+    const handleOverflowClick = useCallback((e) => {
+      e.stopPropagation();
+      setShowDropdown((prev) => !prev);
+      setShowTooltip(false);
+    }, []);
+    const handleDropdownKeyDown = useCallback(
+      (e, index) => {
+        var _a, _b, _c, _d;
         switch (e.key) {
           case "ArrowDown":
-            e.preventDefault(), o < d.length - 1 && ((r = g.current[o + 1]) == null || r.focus());
+            e.preventDefault();
+            if (index < hiddenItems.length - 1) {
+              (_a = dropdownItemRefs.current[index + 1]) == null ? void 0 : _a.focus();
+            }
             break;
           case "ArrowUp":
-            e.preventDefault(), o > 0 && ((u = g.current[o - 1]) == null || u.focus());
+            e.preventDefault();
+            if (index > 0) {
+              (_b = dropdownItemRefs.current[index - 1]) == null ? void 0 : _b.focus();
+            }
             break;
           case "Home":
-            e.preventDefault(), (z = g.current[0]) == null || z.focus();
+            e.preventDefault();
+            (_c = dropdownItemRefs.current[0]) == null ? void 0 : _c.focus();
             break;
           case "End":
-            e.preventDefault(), (h = g.current[d.length - 1]) == null || h.focus();
+            e.preventDefault();
+            (_d = dropdownItemRefs.current[hiddenItems.length - 1]) == null ? void 0 : _d.focus();
             break;
         }
       },
-      [d.length]
-    ), L = _(), P = _();
-    return k(() => {
-      L.current = (e) => {
-        S.current && !S.current.contains(e.target) && v(!1);
-      }, P.current = (e) => {
-        e.key === "Escape" && v(!1);
+      [hiddenItems.length]
+    );
+    const handleClickOutsideRef = useRef();
+    const handleEscapeRef = useRef();
+    useEffect(() => {
+      handleClickOutsideRef.current = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setShowDropdown(false);
+        }
       };
-    }), k(() => {
-      if (!y) return;
-      const e = (r) => {
-        var u;
-        return (u = L.current) == null ? void 0 : u.call(L, r);
-      }, o = (r) => {
-        var u;
-        return (u = P.current) == null ? void 0 : u.call(P, r);
+      handleEscapeRef.current = (event) => {
+        if (event.key === "Escape") {
+          setShowDropdown(false);
+        }
+      };
+    });
+    useEffect(() => {
+      if (!showDropdown) return;
+      const handleClickOutside = (e) => {
+        var _a;
+        return (_a = handleClickOutsideRef.current) == null ? void 0 : _a.call(handleClickOutsideRef, e);
+      };
+      const handleEscape = (e) => {
+        var _a;
+        return (_a = handleEscapeRef.current) == null ? void 0 : _a.call(handleEscapeRef, e);
       };
-      return document.addEventListener("mousedown", e), document.addEventListener("keydown", o), () => {
-        document.removeEventListener("mousedown", e), document.removeEventListener("keydown", o);
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("keydown", handleEscape);
       };
-    }, [y]), k(() => {
-      if (process.env.NODE_ENV === "development" && p.length > 0) {
-        const e = p.map((r) => r.value), o = new Set(e);
-        e.length !== o.size && console.warn(
-          "[ChipGroup] Duplicate values detected in items array. Each item should have a unique value."
-        );
+    }, [showDropdown]);
+    useEffect(() => {
+      if (process.env.NODE_ENV === "development" && validItems.length > 0) {
+        const values = validItems.map((item) => item.value);
+        const uniqueValues = new Set(values);
+        if (values.length !== uniqueValues.size) {
+          devWarn(
+            "[ChipGroup] Duplicate values detected in items array. Each item should have a unique value."
+          );
+        }
+      }
+    }, [validItems]);
+    useEffect(() => {
+      if (dropdownItemRefs.current.length > hiddenItems.length) {
+        dropdownItemRefs.current = dropdownItemRefs.current.slice(0, hiddenItems.length);
       }
-    }, [p]), k(() => {
-      g.current.length > d.length && (g.current = g.current.slice(0, d.length));
-    }, [d]), !t || !Array.isArray(t) ? null : /* @__PURE__ */ O(
+    }, [hiddenItems]);
+    if (!items || !Array.isArray(items)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: f,
-        className: x("chip-group", a && "chip-group--disabled", D),
+        ref,
+        className: cn("chip-group", disabled && "chip-group--disabled", className),
         role: "group",
         "aria-label": "Chip group",
-        "data-testid": E || "chip-group",
-        "data-cy": $ || "chip-group",
-        ...C,
+        "data-testid": dataTestId || "chip-group",
+        "data-cy": dataCy || "chip-group",
+        ...props,
         children: [
-          V && /* @__PURE__ */ O(
+          hasOverflow && /* @__PURE__ */ jsxs(
             "div",
             {
               className: "sr-only",
@@ -190,141 +301,169 @@ const Q = (t, c, n) => {
               "data-testid": "chip-group-live-region",
               "data-cy": "chip-group-live-region",
               children: [
-                d.length,
+                hiddenItems.length,
                 " additional ",
-                d.length === 1 ? "chip" : "chips",
+                hiddenItems.length === 1 ? "chip" : "chips",
                 " hidden"
               ]
             }
           ),
-          /* @__PURE__ */ O("div", { ref: T, className: "chip-group__container", children: [
-            A.map((e) => {
-              const o = c === e.value, r = e.variant || w, u = a || e.disabled || !1, z = p.findIndex((h) => h.value === e.value);
-              return /* @__PURE__ */ b(
+          /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "chip-group__container", children: [
+            visibleItems.map((item) => {
+              const isSelected = selectedValue === item.value;
+              const itemVariant = item.variant || variant;
+              const itemDisabled = disabled || item.disabled || false;
+              const itemIndexInFullArray = validItems.findIndex((i) => i.value === item.value);
+              return /* @__PURE__ */ jsx(
                 "div",
                 {
-                  ref: (h) => {
-                    h ? M.current[z] = h : M.current[z] = null;
+                  ref: (el) => {
+                    if (el) {
+                      chipRefs.current[itemIndexInFullArray] = el;
+                    } else {
+                      chipRefs.current[itemIndexInFullArray] = null;
+                    }
                   },
                   className: "chip-group__item-wrapper",
-                  "data-cy": `chip-group-item-wrapper-${e.value}`,
-                  "data-testid": `chip-group-item-wrapper-${e.value}`,
-                  children: /* @__PURE__ */ O(
+                  "data-cy": `chip-group-item-wrapper-${item.value}`,
+                  "data-testid": `chip-group-item-wrapper-${item.value}`,
+                  children: /* @__PURE__ */ jsxs(
                     "div",
                     {
                       className: "chip-group__item",
-                      onClick: (h) => F(e.value, u, h),
-                      onKeyDown: (h) => U(h, e.value, u),
-                      tabIndex: u ? -1 : 0,
+                      onClick: (e) => handleChipClick(item.value, itemDisabled, e),
+                      onKeyDown: (e) => handleKeyDown(e, item.value, itemDisabled),
+                      tabIndex: itemDisabled ? -1 : 0,
                       role: "button",
-                      "aria-pressed": o ? "true" : "false",
-                      "aria-disabled": u ? "true" : "false",
-                      "data-cy": `chip-group-item-${e.value}`,
-                      "data-testid": `chip-group-item-${e.value}`,
+                      "aria-pressed": isSelected ? "true" : "false",
+                      "aria-disabled": itemDisabled ? "true" : "false",
+                      "data-cy": `chip-group-item-${item.value}`,
+                      "data-testid": `chip-group-item-${item.value}`,
                       children: [
-                        /* @__PURE__ */ b(
-                          G,
+                        /* @__PURE__ */ jsx(
+                          Chip,
                           {
-                            variant: r,
-                            selected: o,
-                            disabled: u,
-                            "data-cy": `chip-${e.value}`,
-                            "data-testid": `chip-${e.value}`,
-                            children: e.label
+                            variant: itemVariant,
+                            selected: isSelected,
+                            disabled: itemDisabled,
+                            "data-cy": `chip-${item.value}`,
+                            "data-testid": `chip-${item.value}`,
+                            children: item.label
                           }
                         ),
-                        l && !a && !u && /* @__PURE__ */ b(
+                        removable && !disabled && !itemDisabled && /* @__PURE__ */ jsx(
                           "button",
                           {
                             className: "chip-group__remove",
-                            onClick: (h) => j(h, e.value),
-                            "aria-label": `Remove ${e.label}`,
-                            "data-cy": `chip-remove-${e.value}`,
-                            "data-testid": `chip-remove-${e.value}`,
+                            onClick: (e) => handleRemove(e, item.value),
+                            "aria-label": `Remove ${item.label}`,
+                            "data-cy": `chip-remove-${item.value}`,
+                            "data-testid": `chip-remove-${item.value}`,
                             type: "button",
-                            children: /* @__PURE__ */ b(J, { name: "Cross2Icon", size: "sm", decorative: !0 })
+                            children: /* @__PURE__ */ jsx(Icon, { name: "Cross2Icon", size: "sm", decorative: true })
                           }
                         )
                       ]
                     }
                   )
                 },
-                e.value
+                item.value
               );
             }),
-            V && /* @__PURE__ */ O(
+            hasOverflow && /* @__PURE__ */ jsxs(
               "div",
               {
-                ref: S,
+                ref: dropdownRef,
                 className: "chip-group__overflow",
                 role: "button",
                 tabIndex: 0,
-                "aria-expanded": y ? "true" : "false",
+                "aria-expanded": showDropdown ? "true" : "false",
                 "aria-haspopup": "menu",
-                "aria-label": `Show ${d.length} more ${d.length === 1 ? "chip" : "chips"}`,
-                onMouseEnter: () => !y && N(!0),
-                onMouseLeave: () => N(!1),
-                onClick: q,
+                "aria-label": `Show ${hiddenItems.length} more ${hiddenItems.length === 1 ? "chip" : "chips"}`,
+                onMouseEnter: () => !showDropdown && setShowTooltip(true),
+                onMouseLeave: () => setShowTooltip(false),
+                onClick: handleOverflowClick,
                 onKeyDown: (e) => {
-                  (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), v(!y), N(!1));
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setShowDropdown(!showDropdown);
+                    setShowTooltip(false);
+                  }
                 },
                 "data-cy": "chip-group-overflow",
                 "data-testid": "chip-group-overflow",
                 children: [
-                  /* @__PURE__ */ O(G, { variant: w, "data-cy": "chip-overflow", "data-testid": "chip-overflow", children: [
+                  /* @__PURE__ */ jsxs(Chip, { variant, "data-cy": "chip-overflow", "data-testid": "chip-overflow", children: [
                     "+",
-                    d.length
+                    hiddenItems.length
                   ] }),
-                  K && !y && /* @__PURE__ */ b(
+                  showTooltip && !showDropdown && /* @__PURE__ */ jsx(
                     "div",
                     {
                       className: "chip-group__tooltip chip-group__tooltip--hover",
                       role: "tooltip",
                       "data-cy": "chip-group-tooltip",
                       "data-testid": "chip-group-tooltip",
-                      children: d.map((e) => /* @__PURE__ */ b(
+                      children: hiddenItems.map((item) => /* @__PURE__ */ jsx(
                         "div",
                         {
                           className: "chip-group__tooltip-item",
-                          "data-cy": `chip-group-tooltip-item-${e.value}`,
-                          "data-testid": `chip-group-tooltip-item-${e.value}`,
-                          children: e.label
+                          "data-cy": `chip-group-tooltip-item-${item.value}`,
+                          "data-testid": `chip-group-tooltip-item-${item.value}`,
+                          children: item.label
                         },
-                        e.value
+                        item.value
                       ))
                     }
                   ),
-                  y && /* @__PURE__ */ b(
+                  showDropdown && /* @__PURE__ */ jsx(
                     "div",
                     {
                       className: "chip-group__dropdown",
                       role: "menu",
                       "data-cy": "chip-group-dropdown",
                       "data-testid": "chip-group-dropdown",
-                      children: d.map((e, o) => /* @__PURE__ */ b(
+                      children: hiddenItems.map((item, index) => /* @__PURE__ */ jsx(
                         "div",
                         {
-                          ref: (r) => {
-                            r ? g.current[o] = r : g.current[o] = null;
+                          ref: (el) => {
+                            if (el) {
+                              dropdownItemRefs.current[index] = el;
+                            } else {
+                              dropdownItemRefs.current[index] = null;
+                            }
                           },
-                          className: x(
+                          className: cn(
                             "chip-group__dropdown-item",
-                            e.disabled && "chip-group__dropdown-item--disabled"
+                            item.disabled && "chip-group__dropdown-item--disabled"
                           ),
                           role: "menuitem",
-                          tabIndex: e.disabled ? -1 : 0,
-                          "aria-disabled": e.disabled ? "true" : "false",
-                          onClick: (r) => {
-                            r.stopPropagation(), e.disabled || (F(e.value, !1, r), v(!1));
+                          tabIndex: item.disabled ? -1 : 0,
+                          "aria-disabled": item.disabled ? "true" : "false",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            if (!item.disabled) {
+                              handleChipClick(item.value, false, e);
+                              setShowDropdown(false);
+                            }
                           },
-                          onKeyDown: (r) => {
-                            R(r, o), (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.stopPropagation(), e.disabled || (F(e.value, !1, r), v(!1)));
+                          onKeyDown: (e) => {
+                            handleDropdownKeyDown(e, index);
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              if (!item.disabled) {
+                                handleChipClick(item.value, false, e);
+                                setShowDropdown(false);
+                              }
+                            }
                           },
-                          "data-cy": `chip-group-dropdown-item-${e.value}`,
-                          "data-testid": `chip-group-dropdown-item-${e.value}`,
-                          children: e.label
+                          "data-cy": `chip-group-dropdown-item-${item.value}`,
+                          "data-testid": `chip-group-dropdown-item-${item.value}`,
+                          children: item.label
                         },
-                        e.value
+                        item.value
                       ))
                     }
                   )
@@ -337,7 +476,7 @@ const Q = (t, c, n) => {
     );
   }
 );
-ee.displayName = "ChipGroup";
+ChipGroup.displayName = "ChipGroup";
 export {
-  ee as ChipGroup
+  ChipGroup
 };