@stihl-design-system/components/chipgroup.D1Km301k.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as re, jsx as te } from "react/jsx-runtime";
import { useState as Y, useRef as le, useEffect as U, createElement as ce } from "react";
import { d as ae } from "./chunks/index.CgTHIF3K.js";
import { c as se } from "./chunks/index.CEyLAtio.js";
import { u as de } from "./chunks/useBreakpoint.CMOR9ZOB.js";
import { g as ue } from "./chunks/AriaLiveRegions.utils.zSFFD3SF.js";
import { v as fe, e as me, a as he } from "./chunks/Chip.CHy8cZJz.js";
import './assets/chipgroup.BGxjdSDX.css';const pe = "ds-chip-group_label--hidden_3zmt2_1", ge = "ds-chip-group_root_3zmt2_14", ne = {
  labelHidden: pe,
  root: ge
}, $e = (a) => {
  const e = ae.c(59);
  let m, b, h, g, r, v, S, D, E, L, I, y;
  e[0] !== a ? ({
    chips: m,
    id: h,
    label: g,
    className: b,
    hideLabel: S,
    isRemovable: D,
    lang: E,
    selectionMode: L,
    size: I,
    translations: y,
    onChipsChange: r,
    ...v
  } = a, e[0] = a, e[1] = m, e[2] = b, e[3] = h, e[4] = g, e[5] = r, e[6] = v, e[7] = S, e[8] = D, e[9] = E, e[10] = L, e[11] = I, e[12] = y) : (m = e[1], b = e[2], h = e[3], g = e[4], r = e[5], v = e[6], S = e[7], D = e[8], E = e[9], L = e[10], I = e[11], y = e[12]);
  const ie = S === void 0 ? !1 : S, d = D === void 0 ? !1 : D, q = E === void 0 ? "en" : E, u = L === void 0 ? "single" : L, x = I === void 0 ? "medium" : I;
  process.env.NODE_ENV !== "production" && fe({
    chips: m,
    id: h,
    label: g
  });
  const [t, w] = Y(null), [n, $] = Y(m), Z = le(null), [c, J] = Y();
  let N;
  e[13] === Symbol.for("react.memo_cache_sentinel") ? (N = [], e[13] = N) : N = e[13];
  const A = le(N);
  let R, _;
  e[14] !== m ? (R = () => {
    $(m);
  }, _ = [m], e[14] = m, e[15] = R, e[16] = _) : (R = e[15], _ = e[16]), U(R, _);
  let M, T;
  e[17] === Symbol.for("react.memo_cache_sentinel") ? (T = () => {
    he();
    const i = () => J("keydown"), o = () => J(null), p = () => J(null);
    return document.addEventListener("keydown", i), document.addEventListener("mousedown", o), document.addEventListener("touchstart", p), () => {
      document.removeEventListener("keydown", i), document.removeEventListener("mousedown", o), document.removeEventListener("touchstart", p);
    };
  }, M = [], e[17] = M, e[18] = T) : (M = e[17], T = e[18]), U(T, M);
  let z;
  e[19] !== t || e[20] !== c ? (z = () => {
    var i;
    t !== null && A.current[t] && c === "keydown" && ((i = A.current[t]) == null || i.focus());
  }, e[19] = t, e[20] = c, e[21] = z) : z = e[21];
  let B;
  e[22] !== t ? (B = [t], e[22] = t, e[23] = B) : B = e[23], U(z, B);
  let F;
  e[24] !== n.length || e[25] !== t || e[26] !== c ? (F = () => {
    c === "keydown" && t !== null && n.length > 0 && A.current.forEach((i, o) => {
      i && (i.tabIndex = o === t ? 0 : -1, o === t && i.focus());
    });
  }, e[24] = n.length, e[25] = t, e[26] = c, e[27] = F) : F = e[27];
  let G;
  e[28] !== n ? (G = [n], e[28] = n, e[29] = G) : G = e[29], U(F, G);
  let k, C;
  if (e[30] !== n || e[31] !== t || e[32] !== c || e[33] !== d || e[34] !== r || e[35] !== u) {
    C = (l) => {
      if (t === null)
        return;
      let s = t;
      e: switch (l.key) {
        case "a": {
          (l.metaKey || l.ctrlKey) && (l.preventDefault(), i());
          break e;
        }
        case "ArrowRight":
        case "ArrowDown": {
          l.shiftKey && u === "multiple" && !d ? (s = t + 1 > n.length - 1 ? n.length - 1 : t + 1, t !== s ? (o(t), o(s)) : n[t].isSelected || o(t)) : (s = (t + 1) % n.length, l.preventDefault());
          break e;
        }
        case "ArrowLeft":
        case "ArrowUp": {
          l.shiftKey && u === "multiple" && !d ? (s = t - 1 < 0 ? 0 : t - 1, t !== s ? (o(t), o(s)) : n[0].isSelected || o(0)) : (s = (t - 1 + n.length) % n.length, l.preventDefault());
          break e;
        }
        case "Enter":
        case " ": {
          if (l.preventDefault(), d) {
            X(s);
            return;
          } else
            p(s);
          break e;
        }
        case "Backspace": {
          d && X(s), l.preventDefault();
          return;
        }
        default:
          return;
      }
      w(s);
    };
    const i = () => {
      if (u !== "multiple")
        return;
      const l = n.map(be);
      $(l), K(`${l.length} items selected`), r && r(l);
    }, o = (l) => {
      if (d)
        return;
      const s = [...n];
      s[l].disabled || (s[l].isSelected = !0, K(`${s[l].label} selected, ${s.filter(ve).length} items selected`), $(s), r && r(s));
    }, p = (l) => {
      if (d)
        return;
      const s = [...n];
      s[l].disabled || (u === "single" ? s.forEach((f, O) => {
        O === l ? (f.isSelected = !f.isSelected, K(`${f.label} ${f.isSelected ? "selected" : "not selected"}`)) : f.isSelected = !1;
      }) : u === "multiple" && (s[l].isSelected = !s[l].isSelected, K(`${s[l].label} ${s[l].isSelected ? "selected" : "not selected"}, ${s.filter(ye).length} items selected`)), $(s), r && r(s));
    }, X = (l) => {
      var O;
      const s = n[l], f = n.filter((ee, oe) => oe !== l);
      if ($(f), K(`${s.label} removed, ${f.length} items remaining`), c === "keydown")
        if (f.length > 0) {
          const ee = Math.min(l, f.length - 1);
          w(ee);
        } else
          (O = Z.current) == null || O.focus(), w(null);
      r && r(f);
    };
    k = (l) => {
      d ? X(l) : n[l].disabled || p(l);
    };
    const K = we;
    e[30] = n, e[31] = t, e[32] = c, e[33] = d, e[34] = r, e[35] = u, e[36] = k, e[37] = C;
  } else
    k = e[36], C = e[37];
  let H;
  e[38] !== t ? (H = (i) => t === null || t === i ? 0 : -1, e[38] = t, e[39] = H) : H = e[39];
  const P = H, Q = de(ie);
  let V;
  e[40] !== b ? (V = se(ne.root, b), e[40] = b, e[41] = V) : V = e[41];
  const W = V;
  let j;
  return e[42] !== n || e[43] !== t || e[44] !== P || e[45] !== k || e[46] !== C || e[47] !== Q || e[48] !== h || e[49] !== c || e[50] !== d || e[51] !== g || e[52] !== q || e[53] !== v || e[54] !== W || e[55] !== u || e[56] !== x || e[57] !== y ? (j = n.length === 0 ? null : /* @__PURE__ */ re("div", { children: [
    /* @__PURE__ */ te("div", { id: h, className: se({
      [ne.labelHidden]: Q
    }), children: g }),
    n.length > 0 && /* @__PURE__ */ te("div", { ref: Z, role: "grid", "aria-labelledby": h, "aria-multiselectable": u === "multiple", tabIndex: -1, onKeyDown: C, onFocus: () => {
      t === null ? (A.current[0].focus(), c === "keydown" && w(0)) : c === "keydown" && w(t);
    }, onBlur: () => w(null), className: W, ...v, children: n.map((i, o) => /* @__PURE__ */ ce(me, { ...i, key: `${i.id}-${o}`, groupId: h, tabIndex: P(o), onClick: (p) => {
      k(o), i.onClick && i.onClick(p);
    }, "data-focused": t === o, isRemovable: d, lang: q, selectionMode: u, size: x, translations: y, ref: (p) => {
      A.current[o] = p;
    } })) })
  ] }), e[42] = n, e[43] = t, e[44] = P, e[45] = k, e[46] = C, e[47] = Q, e[48] = h, e[49] = c, e[50] = d, e[51] = g, e[52] = q, e[53] = v, e[54] = W, e[55] = u, e[56] = x, e[57] = y, e[58] = j) : j = e[58], j;
};
function be(a) {
  return {
    ...a,
    selected: !a.disabled
  };
}
function ve(a) {
  const {
    isSelected: e
  } = a;
  return e;
}
function ye(a) {
  const {
    isSelected: e
  } = a;
  return e;
}
function we(a) {
  const e = ue();
  e && (e.innerText = a, setTimeout(() => {
    e.innerText = "";
  }, 350));
}
export {
  $e as DSChipGroup
};