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

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as me, jsx as x } from "react/jsx-runtime";
import { useState as q, useRef as ee, useEffect as j, createElement as pe } from "react";
import { d as he } from "./chunks/index.cKLI89Eg.js";
import { c as te } from "./chunks/index.DQOqod3i.js";
import { f as be } from "./chunks/AriaLiveRegions.utils.xoETe2Ps.js";
import { v as ge, D as le, d as Se } from "./chunks/Chip.DffaXMkV.js";
import { t as ke } from "./chunks/translate.DSb-TdWR.js";
import { u as Ce } from "./chunks/useBreakpoint.1txsny17.js";
import './assets/chipgroup.DtCnsmS7.css';const ye = "ds-chip-group_label--hidden_137ot_1", we = "ds-chip-group_label_137ot_1", De = "ds-chip-group_label--dark_137ot_25", ve = "ds-chip-group_root_137ot_29", z = {
  labelHidden: ye,
  label: we,
  labelDark: De,
  root: ve
}, Ve = (c) => {
  const e = he.c(37);
  let i, p, f, S, r, k, C, y, w, D, v, $, _;
  e[0] !== c ? ({
    chips: i,
    id: f,
    label: S,
    className: p,
    disableTooltips: C,
    hideLabel: y,
    isRemovable: w,
    lang: D,
    selectionMode: v,
    size: $,
    translations: _,
    onChipsChange: r,
    ...k
  } = c, e[0] = c, e[1] = i, e[2] = p, e[3] = f, e[4] = S, e[5] = r, e[6] = k, e[7] = C, e[8] = y, e[9] = w, e[10] = D, e[11] = v, e[12] = $, e[13] = _) : (i = e[1], p = e[2], f = e[3], S = e[4], r = e[5], k = e[6], C = e[7], y = e[8], w = e[9], D = e[10], v = e[11], $ = e[12], _ = e[13]);
  const ne = C === void 0 ? !1 : C, se = y === void 0 ? !1 : y, d = w === void 0 ? !1 : w, U = D === void 0 ? "en" : D, m = v === void 0 ? "single" : v, oe = $ === void 0 ? "medium" : $, {
    theme: J
  } = k, Q = J === void 0 ? "light" : J;
  process.env.NODE_ENV !== "production" && ge({
    chips: i,
    id: f,
    label: S
  });
  const a = ke(_ || le[U] || le.en, U), [n, h] = q(null);
  let A;
  e[14] !== i ? (A = () => i.map($e), e[14] = i, e[15] = A) : A = e[15];
  const [s, E] = q(A), X = ee(null), [u, P] = q();
  let N;
  e[16] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (N = [], e[16] = N) : N = e[16];
  const I = ee(N);
  let K, M;
  e[17] !== i ? (K = () => {
    E(i.map(_e));
  }, M = [i], e[17] = i, e[18] = K, e[19] = M) : (K = e[18], M = e[19]), j(K, M);
  let T, G;
  e[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (T = () => {
    const t = () => P("keydown"), l = () => P(null), o = () => P(null);
    return document.addEventListener("keydown", t), document.addEventListener("mousedown", l), document.addEventListener("touchstart", o), () => {
      document.removeEventListener("keydown", t), document.removeEventListener("mousedown", l), document.removeEventListener("touchstart", o);
    };
  }, G = [], e[20] = T, e[21] = G) : (T = e[20], G = e[21]), j(T, G);
  let R;
  e[22] !== n || e[23] !== u ? (R = () => {
    n !== null && I.current[n] && u === "keydown" && I.current[n]?.focus();
  }, e[22] = n, e[23] = u, e[24] = R) : R = e[24];
  let B;
  e[25] !== n ? (B = [n], e[25] = n, e[26] = B) : B = e[26], j(R, B);
  let F;
  e[27] !== s.length || e[28] !== n || e[29] !== u ? (F = () => {
    u === "keydown" && n !== null && s.length > 0 && I.current.forEach((t, l) => {
      t && (t.tabIndex = l === n ? 0 : -1, l === n && t.focus());
    });
  }, e[27] = s.length, e[28] = n, e[29] = u, e[30] = F) : F = e[30];
  let H;
  e[31] !== s ? (H = [s], e[31] = s, e[32] = H) : H = e[32], j(F, H);
  const ce = (t) => {
    if (n === null)
      return;
    let l = n;
    e: switch (t.key) {
      case "a": {
        (t.metaKey || t.ctrlKey) && (t.preventDefault(), ie());
        break e;
      }
      case "ArrowRight":
      case "ArrowDown": {
        t.shiftKey && m === "multiple" && !d ? (l = n + 1 > s.length - 1 ? s.length - 1 : n + 1, n !== l ? (b(n), b(l)) : s[n].isSelected || b(n)) : (l = (n + 1) % s.length, t.preventDefault());
        break e;
      }
      case "ArrowLeft":
      case "ArrowUp": {
        t.shiftKey && m === "multiple" && !d ? (l = n - 1 < 0 ? 0 : n - 1, n !== l ? (b(n), b(l)) : s[0].isSelected || b(0)) : (l = (n - 1 + s.length) % s.length, t.preventDefault());
        break e;
      }
      case "Enter":
      case " ": {
        if (t.preventDefault(), d) {
          W(l), s[l]?.onClick?.(t);
          return;
        } else
          Y(l), s[l]?.onClick?.(t);
        break e;
      }
      case "Backspace": {
        d && W(l), t.preventDefault();
        return;
      }
      default:
        return;
    }
    h(l);
  }, ie = () => {
    if (m !== "multiple")
      return;
    const t = s.map(Ee);
    E(t);
    const l = t.length;
    L(a("countSelected", {
      count: l
    })), r && r(t);
  }, b = (t) => {
    if (d)
      return;
    const l = s.map(Ie);
    if (l[t].disabled)
      return;
    l[t].isSelected = !0;
    const o = l.filter(Le).length;
    L(`${l[t].label} ${a("selected")}, ${a("countSelected", {
      count: o
    })}`), E(l), r && r(l);
  }, Y = (t) => {
    if (d)
      return;
    const l = [...s];
    if (!l[t].disabled) {
      if (m === "single")
        l.forEach((o, g) => {
          g === t ? (o.isSelected = !o.isSelected, L(o.isSelected ? `${o.label} ${a("selected")}` : `${o.label} ${a("notSelected")}`)) : o.isSelected = !1;
        });
      else if (m === "multiple") {
        l[t].isSelected = !l[t].isSelected;
        const o = l.filter(Ae).length, g = a("countSelected", {
          count: o
        });
        L(l[t].isSelected ? `${l[t].label} ${a("selected")}, ${g}` : `${l[t].label} ${a("notSelected")}, ${g}`);
      }
      E(l), r && r(l);
    }
  }, W = (t) => {
    const l = s[t], o = s.filter((Z, fe) => fe !== t).map(Ne);
    E(o);
    const g = o.length;
    if (L(`${l.label} ${a("removed")}, ${a("countRemaining", {
      count: g
    })}`), u === "keydown")
      if (o.length > 0) {
        const Z = Math.min(t, o.length - 1);
        h(Z);
      } else
        X.current?.focus(), h(null);
    r && r(o);
  }, re = (t) => {
    d ? W(t) : s[t].disabled || Y(t);
  }, L = Ke;
  let O;
  e[33] !== n ? (O = (t) => n === null || n === t ? 0 : -1, e[33] = n, e[34] = O) : O = e[34];
  const ae = O, ue = Ce(se);
  let V;
  e[35] !== p ? (V = te(z.root, p), e[35] = p, e[36] = V) : V = e[36];
  const de = V;
  return s.length === 0 ? null : /* @__PURE__ */ me("div", { children: [
    /* @__PURE__ */ x("div", { id: f, className: te(z.label, {
      [z.labelHidden]: ue,
      [z.labelDark]: Q === "dark"
    }) || void 0, children: S }),
    s.length > 0 && /* @__PURE__ */ x("div", { ref: X, role: "grid", "aria-labelledby": f, "aria-multiselectable": m === "multiple", tabIndex: -1, onKeyDown: ce, onFocus: () => {
      n === null ? (I.current[0].focus(), u === "keydown" && h(0)) : u === "keydown" && h(n);
    }, onBlur: () => h(null), className: de, ...k, children: s.map((t, l) => /* @__PURE__ */ pe(Se, { ...t, key: `${t.id}-${l}`, "data-focused": n === l, disableTooltips: ne, groupId: f, isRemovable: d, lang: U, selectionMode: m, size: oe, theme: Q, tabIndex: ae(l), translations: _, onClick: (o) => {
      re(l), t.onClick && t.onClick(o);
    }, ref: (o) => {
      I.current[l] = o;
    } })) })
  ] });
};
function $e(c) {
  return {
    ...c
  };
}
function _e(c) {
  return {
    ...c
  };
}
function Ee(c) {
  return {
    ...c,
    selected: !c.disabled
  };
}
function Ie(c) {
  return {
    ...c
  };
}
function Le(c) {
  const {
    isSelected: e
  } = c;
  return e;
}
function Ae(c) {
  const {
    isSelected: e
  } = c;
  return e;
}
function Ne(c) {
  return {
    ...c
  };
}
function Ke(c) {
  be(c, "DSChipGroup");
}
export {
  Ve as DSChipGroup
};