@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
149 lines (148 loc) • 6.39 kB
JavaScript
"use client";
import { jsxs as O, jsx as I } from "react/jsx-runtime";
import { d as j } from "./index.cKLI89Eg.js";
import { c as B } from "./index.DQOqod3i.js";
import { forwardRef as W } from "react";
import { D as q } from "./Icon.DYtaQgbw.js";
import { Tooltip as z } from "../tooltip.BFQG-7VR.js";
import { g as x, r as H } from "./helpers.CexwVao7.js";
import { t as Z } from "./translate.DSb-TdWR.js";
import '../assets/Chip.DfamkUPw.css';const J = "ds-chip-group_chip_kwgno_1", K = "ds-chip-group_chip--small_kwgno_30", Q = "ds-chip-group_chip--dark_kwgno_133", F = {
chip: J,
chipSmall: K,
chipDark: Q
}, pe = ({
chips: t,
id: l,
label: e
}) => {
if (!Array.isArray(t))
throw new Error(x("DSChipGroup", H("chips", "DSChipGroup")));
if (!l)
throw new Error(x("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(x("DSChipGroup", H("label", "DSChipGroup")));
}, de = ["medium", "small"], V = {
disabled: "disabled",
selected: "selected",
notSelected: "not selected",
removed: "removed",
selectChip: "press space to {action}",
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",
countSelected: "{count, plural, one {# item selected} other {# items selected}}",
countRemaining: "{count, plural, one {# item remaining} other {# items remaining}}"
}, X = {
disabled: "deaktiviert",
selected: "ausgewählt",
notSelected: "nicht ausgewählt",
removed: "entfernt",
selectChip: "drücke Leertaste, um {action}",
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",
countSelected: "{count, plural, one {# Element ausgewählt} other {# Elemente ausgewählt}}",
countRemaining: "{count, plural, one {# Element verbleibend} other {# Elemente verbleibend}}"
}, U = {
en: V,
de: X
}, Y = (t, l, e, i, a, r) => {
if (e)
return `${l}, ${t("disabled")}`;
if (r)
return `${l}, ${t("removeChip")}`;
{
const c = t(a === "single" ? i ? "unselectAction" : "selectAction" : i ? "removeFromSelection" : "addToSelection");
return `${l}, ${i ? `${t("selected")}, ` : ""}${t("selectChip", {
action: c
})}`;
}
}, ee = (t, l, e, i) => t(i ? "tooltipRemovable" : l ? "tooltipDisabled" : e ? "tooltipDeactivate" : "tooltipActivate"), te = W((t, l) => {
const e = j.c(54);
let i, a, r, c, o, p, n, m, h, u, f, _, C, A, v, S;
e[0] !== t ? ({
id: c,
label: n,
disableTooltips: i,
groupId: a,
isRemovable: o,
selectionMode: u,
disabled: _,
iconName: r,
isSelected: p,
lang: C,
size: f,
tabIndex: v,
theme: A,
translations: S,
onClick: m,
...h
} = t, e[0] = t, e[1] = i, e[2] = a, e[3] = r, e[4] = c, e[5] = o, e[6] = p, e[7] = n, e[8] = m, e[9] = h, e[10] = u, e[11] = f, e[12] = _, e[13] = C, e[14] = A, e[15] = v, e[16] = S) : (i = e[1], a = e[2], r = e[3], c = e[4], o = e[5], p = e[6], n = e[7], m = e[8], h = e[9], u = e[10], f = e[11], _ = e[12], C = e[13], A = e[14], v = e[15], S = e[16]);
const k = _ === void 0 ? !1 : _, w = C === void 0 ? "en" : C, s = A === void 0 ? "light" : A;
let d, g;
if (e[17] !== i || e[18] !== k || e[19] !== a || e[20] !== r || e[21] !== c || e[22] !== o || e[23] !== p || e[24] !== n || e[25] !== w || e[26] !== m || e[27] !== l || e[28] !== h || e[29] !== u || e[30] !== f || e[31] !== v || e[32] !== s || e[33] !== S) {
g = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
e: {
const L = Z(S || U[w] || U.en, w), N = s === "dark", P = f === "small";
let y;
e[36] !== N || e[37] !== P ? (y = B(F.chip, {
[F.chipDark]: N,
[F.chipSmall]: P
}), e[36] = N, e[37] = P, e[38] = y) : y = e[38];
const M = y;
let R;
e[39] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (R = {
display: "contents"
}, e[39] = R) : R = e[39];
let b;
e[40] !== r || e[41] !== s ? (b = r && /* @__PURE__ */ I(q, { name: r, theme: s, "aria-hidden": "true" }), e[40] = r, e[41] = s, e[42] = b) : b = e[42];
let E;
e[43] !== n || e[44] !== b ? (E = /* @__PURE__ */ O("div", { role: "gridcell", "aria-colindex": 1, style: R, children: [
b,
n
] }), e[43] = n, e[44] = b, e[45] = E) : E = e[45];
let T;
if (e[46] !== o || e[47] !== s ? (T = o && /* @__PURE__ */ I(q, { name: "cross", theme: s }), e[46] = o, e[47] = s, e[48] = T) : T = e[48], d = /* @__PURE__ */ O("div", { role: "row", "aria-label": Y(L, n, k, p, u, o), "aria-selected": p && !o, "aria-disabled": k && !o, id: `${a}-chip-${c}`, className: M, tabIndex: v, onClick: m, ref: l, ...h, children: [
E,
T
] }), !i) {
let D;
e[49] !== d ? (D = /* @__PURE__ */ I(z.Anchor, { children: d }), e[49] = d, e[50] = D) : D = e[50];
const $ = /* @__PURE__ */ I(z.Content, { children: ee(L, k, p, o) });
let G;
e[51] !== D || e[52] !== $ ? (G = /* @__PURE__ */ O(z, { placement: "top", tooltipOffset: 6, children: [
D,
$
] }), e[51] = D, e[52] = $, e[53] = G) : G = e[53], g = G;
break e;
}
}
e[17] = i, e[18] = k, e[19] = a, e[20] = r, e[21] = c, e[22] = o, e[23] = p, e[24] = n, e[25] = w, e[26] = m, e[27] = l, e[28] = h, e[29] = u, e[30] = f, e[31] = v, e[32] = s, e[33] = S, e[34] = d, e[35] = g;
} else
d = e[34], g = e[35];
return g !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel") ? g : d;
});
te.displayName = "DSChip";
export {
de as C,
U as D,
X as a,
V as b,
ee as c,
te as d,
Y as g,
pe as v
};