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

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as q, jsx as I } from "react/jsx-runtime";
import { useState as S, useRef as L, useEffect as w, createElement as J } from "react";
import { c as $ } from "./chunks/index.DL9mof6u.js";
import { u as P } from "./chunks/useBreakpoint.1txsny17.js";
import "./chunks/index.D-sRdssb.js";
import { g as Q } from "./chunks/AriaLiveRegions.utils.CybNIBSa.js";
import { v as W, a as X, e as Y } from "./chunks/Chip.DIp5hdRH.js";
import './assets/chipgroup.BGxjdSDX.css';const Z = "ds-chip-group_label--hidden_3zmt2_1", x = "ds-chip-group_root_3zmt2_14", v = {
  labelHidden: Z,
  root: x
}, ne = ({
  chips: g,
  id: h,
  label: b,
  className: A,
  disableTooltips: K = !1,
  hideLabel: C = !1,
  isRemovable: r = !1,
  lang: N = "en",
  selectionMode: c = "single",
  size: T = "medium",
  translations: B,
  onChipsChange: o,
  ...F
}) => {
  process.env.NODE_ENV !== "production" && W({
    chips: g,
    id: h,
    label: b
  });
  const [l, i] = S(null), [n, d] = S(() => g.map((e) => ({
    ...e
  }))), D = L(null), [f, k] = S(), m = L([]);
  w(() => {
    d(g.map((e) => ({
      ...e
    })));
  }, [g]), w(() => {
    X();
    const e = () => k("keydown"), t = () => k(null), s = () => k(null);
    return document.addEventListener("keydown", e), document.addEventListener("mousedown", t), document.addEventListener("touchstart", s), () => {
      document.removeEventListener("keydown", e), document.removeEventListener("mousedown", t), document.removeEventListener("touchstart", s);
    };
  }, []), w(() => {
    l !== null && m.current[l] && f === "keydown" && m.current[l]?.focus();
  }, [l]), w(() => {
    f === "keydown" && l !== null && n.length > 0 && m.current.forEach((e, t) => {
      e && (e.tabIndex = t === l ? 0 : -1, t === l && e.focus());
    });
  }, [n]);
  const G = (e) => {
    if (l === null)
      return;
    let t = l;
    switch (e.key) {
      case "a":
        (e.metaKey || e.ctrlKey) && (e.preventDefault(), H());
        break;
      case "ArrowRight":
      case "ArrowDown":
        e.shiftKey && c === "multiple" && !r ? (t = l + 1 > n.length - 1 ? n.length - 1 : l + 1, l !== t ? (u(l), u(t)) : n[l].isSelected || u(l)) : (t = (l + 1) % n.length, e.preventDefault());
        break;
      case "ArrowLeft":
      case "ArrowUp":
        e.shiftKey && c === "multiple" && !r ? (t = l - 1 < 0 ? 0 : l - 1, l !== t ? (u(l), u(t)) : n[0].isSelected || u(0)) : (t = (l - 1 + n.length) % n.length, e.preventDefault());
        break;
      case "Enter":
      case " ":
        if (e.preventDefault(), r) {
          y(t);
          return;
        } else
          E(t);
        break;
      case "Backspace":
        r && y(t), e.preventDefault();
        return;
      default:
        return;
    }
    i(t);
  }, H = () => {
    if (c !== "multiple")
      return;
    const e = n.map((t) => ({
      ...t,
      selected: !t.disabled
    }));
    d(e), p(`${e.length} items selected`), o && o(e);
  }, u = (e) => {
    if (r)
      return;
    const t = n.map((s) => ({
      ...s
    }));
    t[e].disabled || (t[e].isSelected = !0, p(`${t[e].label} selected, ${t.filter(({
      isSelected: s
    }) => s).length} items selected`), d(t), o && o(t));
  }, E = (e) => {
    if (r)
      return;
    const t = [...n];
    t[e].disabled || (c === "single" ? t.forEach((s, a) => {
      a === e ? (s.isSelected = !s.isSelected, p(`${s.label} ${s.isSelected ? "selected" : "not selected"}`)) : s.isSelected = !1;
    }) : c === "multiple" && (t[e].isSelected = !t[e].isSelected, p(`${t[e].label} ${t[e].isSelected ? "selected" : "not selected"}, ${t.filter(({
      isSelected: s
    }) => s).length} items selected`)), d(t), o && o(t));
  }, y = (e) => {
    const t = n[e], s = n.filter((a, U) => U !== e).map((a) => ({
      ...a
    }));
    if (d(s), p(`${t.label} removed, ${s.length} items remaining`), f === "keydown")
      if (s.length > 0) {
        const a = Math.min(e, s.length - 1);
        i(a);
      } else
        D.current?.focus(), i(null);
    o && o(s);
  }, V = (e) => {
    r ? y(e) : n[e].disabled || E(e);
  }, p = (e) => {
    const t = Q();
    t && (t.innerText = e, setTimeout(() => {
      t.innerText = "";
    }, 350));
  }, j = (e) => l === null || l === e ? 0 : -1, z = P(C), O = $(v.root, A);
  return n.length === 0 ? null : /* @__PURE__ */ q("div", { children: [
    /* @__PURE__ */ I("div", { id: h, className: $({
      [v.labelHidden]: z
    }), children: b }),
    n.length > 0 && /* @__PURE__ */ I("div", { ref: D, role: "grid", "aria-labelledby": h, "aria-multiselectable": c === "multiple", tabIndex: -1, onKeyDown: G, onFocus: () => {
      l === null ? (m.current[0].focus(), f === "keydown" && i(0)) : f === "keydown" && i(l);
    }, onBlur: () => i(null), className: O, ...F, children: n.map((e, t) => /* @__PURE__ */ J(Y, { ...e, key: `${e.id}-${t}`, "data-focused": l === t, disableTooltips: K, groupId: h, isRemovable: r, lang: N, selectionMode: c, size: T, tabIndex: j(t), translations: B, onClick: (s) => {
      V(t), e.onClick && e.onClick(s);
    }, ref: (s) => {
      m.current[t] = s;
    } })) })
  ] });
};
export {
  ne as DSChipGroup
};