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

Welcome to the STIHL Design System react component library.

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