@stihl-design-system/components/chunks/Chip.BrbYu6i_.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as N, jsx as k } from "react/jsx-runtime";
import { d as q } from "./index.CgTHIF3K.js";
import { c as H } from "./index.CEyLAtio.js";
import { forwardRef as U } from "react";
import { t as M } from "./translate.nuU7uChI.js";
import { D as x } from "./Icon.NSsVrYeq.js";
import { Tooltip as $ } from "../tooltip.CUCSRXd3.js";
import { g as E, r as z } from "./helpers.BbWkXTr3.js";
import { g as j } from "./AriaLiveRegions.utils.Cb327d_2.js";
import '../assets/Chip.dxIYIjj7.css';const B = "ds-chip-group_chip_aidwn_1", W = "ds-chip-group_chip--small_aidwn_30", L = {
  chip: B,
  chipSmall: W
}, ce = ({
  chips: t,
  id: s,
  label: e
}) => {
  if (!Array.isArray(t))
    throw new Error(E("DSChipGroup", z("chips", "DSChipGroup")));
  if (!s)
    throw new Error(E("DSChipGroup", 'A unique "id" prop is required when providing the description or systemFeedback property. Please add a unique "id" prop to the DSChipGroup component.'));
  if (!e)
    throw new Error(E("DSChipGroup", z("label", "DSChipGroup")));
}, pe = () => {
  if (!j())
    throw new Error(E("DSChipGroup", 'The DSAriaLiveRegions component has to be placed at the root of your application, as close to the "body" as possible, e.g. in your "App.tsx" or "layout.tsx".'));
}, de = ["medium", "small"], Z = {
  disabled: "disabled",
  selected: "selected",
  // {0} is the action (e.g., select/unselect)
  selectChip: "press space to {0}",
  unselectAction: "unselect",
  selectAction: "select",
  addToSelection: "add this option to selection",
  removeFromSelection: "remove this option from selection",
  removeChip: "press Backspace to remove the currently focused value",
  tooltipDisabled: "Disabled",
  tooltipRemovable: "Remove filter",
  tooltipDeactivate: "Deactivate property",
  tooltipActivate: "Activate property"
}, J = {
  disabled: "deaktiviert",
  selected: "ausgewählt",
  // {0} is the action (e.g., select/unselect)
  selectChip: "drücke Leertaste, um {0}",
  unselectAction: "abzuwählen",
  selectAction: "auszuwählen",
  addToSelection: "diese Option zur Auswahl hinzuzufügen",
  removeFromSelection: "diese Option aus der Auswahl zu entfernen",
  removeChip: "drücke Backspace, um den aktuell fokussierten Wert zu entfernen",
  tooltipDisabled: "Deaktiviert",
  tooltipRemovable: "Filter entfernen",
  tooltipDeactivate: "Eigenschaft deaktivieren",
  tooltipActivate: "Eigenschaft aktivieren"
}, K = {
  en: Z,
  de: J
}, Q = (t, s, e, i, a, l) => e ? `${s}, ${t("disabled")}` : l ? `${s}, ${t("removeChip")}` : `${s}, ${i ? `${t("selected")}, ` : ""}${t("selectChip", [t(a === "single" ? i ? "unselectAction" : "selectAction" : i ? "removeFromSelection" : "addToSelection")])}`, V = (t, s, e, i) => t(i ? "tooltipRemovable" : s ? "tooltipDisabled" : e ? "tooltipDeactivate" : "tooltipActivate"), X = U((t, s) => {
  const e = q.c(48);
  let i, a, l, p, o, n, r, d, h, m, u, D, g, f, C;
  e[0] !== t ? ({
    id: p,
    label: r,
    disableTooltips: i,
    groupId: a,
    isRemovable: o,
    selectionMode: m,
    disabled: D,
    iconName: l,
    isSelected: n,
    lang: g,
    size: u,
    tabIndex: f,
    translations: C,
    onClick: d,
    ...h
  } = t, e[0] = t, e[1] = i, e[2] = a, e[3] = l, e[4] = p, e[5] = o, e[6] = n, e[7] = r, e[8] = d, e[9] = h, e[10] = m, e[11] = u, e[12] = D, e[13] = g, e[14] = f, e[15] = C) : (i = e[1], a = e[2], l = e[3], p = e[4], o = e[5], n = e[6], r = e[7], d = e[8], h = e[9], m = e[10], u = e[11], D = e[12], g = e[13], f = e[14], C = e[15]);
  const A = D === void 0 ? !1 : D, G = C || K[g === void 0 ? "en" : g];
  let c, v;
  if (e[16] !== i || e[17] !== A || e[18] !== a || e[19] !== l || e[20] !== p || e[21] !== o || e[22] !== n || e[23] !== r || e[24] !== d || e[25] !== s || e[26] !== h || e[27] !== m || e[28] !== u || e[29] !== G || e[30] !== f) {
    v = Symbol.for("react.early_return_sentinel");
    e: {
      const O = M(G), I = u === "small";
      let _;
      e[33] !== I ? (_ = H(L.chip, {
        [L.chipSmall]: I
      }), e[33] = I, e[34] = _) : _ = e[34];
      const F = _;
      let y;
      e[35] === Symbol.for("react.memo_cache_sentinel") ? (y = {
        display: "contents"
      }, e[35] = y) : y = e[35];
      let S;
      e[36] !== l ? (S = l && /* @__PURE__ */ k(x, { name: l, "aria-hidden": "true" }), e[36] = l, e[37] = S) : S = e[37];
      let w;
      e[38] !== r || e[39] !== S ? (w = /* @__PURE__ */ N("div", { role: "gridcell", "aria-colindex": 1, style: y, children: [
        S,
        r
      ] }), e[38] = r, e[39] = S, e[40] = w) : w = e[40];
      let R;
      if (e[41] !== o ? (R = o && /* @__PURE__ */ k(x, { name: "cross" }), e[41] = o, e[42] = R) : R = e[42], c = /* @__PURE__ */ N("div", { role: "row", "aria-label": Q(O, r, A, n, m, o), "aria-selected": n && !o, "aria-disabled": A && !o, id: `${a}-chip-${p}`, className: F, tabIndex: f, onClick: d, ref: s, ...h, children: [
        w,
        R
      ] }), !i) {
        let b;
        e[43] !== c ? (b = /* @__PURE__ */ k($.Anchor, { children: c }), e[43] = c, e[44] = b) : b = e[44];
        const P = /* @__PURE__ */ k($.Content, { children: V(O, A, n, o) });
        let T;
        e[45] !== b || e[46] !== P ? (T = /* @__PURE__ */ N($, { placement: "top", tooltipOffset: 6, children: [
          b,
          P
        ] }), e[45] = b, e[46] = P, e[47] = T) : T = e[47], v = T;
        break e;
      }
    }
    e[16] = i, e[17] = A, e[18] = a, e[19] = l, e[20] = p, e[21] = o, e[22] = n, e[23] = r, e[24] = d, e[25] = s, e[26] = h, e[27] = m, e[28] = u, e[29] = G, e[30] = f, e[31] = c, e[32] = v;
  } else
    c = e[31], v = e[32];
  return v !== Symbol.for("react.early_return_sentinel") ? v : c;
});
X.displayName = "DSChip";
export {
  de as C,
  Z as D,
  pe as a,
  J as b,
  K as c,
  V as d,
  X as e,
  Q as g,
  ce as v
};