@stihl-design-system/components/chunks/Select.DCxMPsCm.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsx as v, jsxs as we } from "react/jsx-runtime";
import { d as xe } from "./index.CgTHIF3K.js";
import { c as me } from "./index.CEyLAtio.js";
import { forwardRef as Be, useRef as Fe, useState as Ie, useEffect as He } from "react";
import { u as Re } from "./useBreakpoint.CMOR9ZOB.js";
import { Asterisk as je } from "../asterisk.CR60hx8S.js";
import { D as We } from "./Icon.CAXZUNWo.js";
import { DSSystemFeedback as ze } from "../systemfeedback.BpKZEv4U.js";
import { g as pe, r as Me } from "./helpers.CcqWV-wZ.js";
import '../assets/Select.e1fTfWmm.css';const Te = "ds-select_root_1g7g9_1", Oe = "ds-select_hint_1g7g9_10", Ze = "ds-select_label_1g7g9_10", Je = "ds-select_label--hidden_1g7g9_100", Ke = "ds-select_label--disabled_1g7g9_113", Qe = "ds-select_feedback_1g7g9_133", Ue = "ds-select_select-wrapper_1g7g9_138", Xe = "ds-select_select_1g7g9_138", Ye = "ds-select_select--invalid_1g7g9_263", Ge = "ds-select_select--small_1g7g9_270", el = "ds-select_select--placeholder_1g7g9_372", ll = "ds-select_chevron_1g7g9_411", tl = "ds-select_chevron--small_1g7g9_415", sl = "ds-select_chevron--disabled_1g7g9_418", t = {
  root: Te,
  hint: Oe,
  label: Ze,
  labelHidden: Je,
  labelDisabled: Ke,
  feedback: Qe,
  selectWrapper: Ue,
  select: Xe,
  selectInvalid: Ye,
  selectSmall: Ge,
  selectPlaceholder: el,
  chevron: ll,
  chevronSmall: tl,
  chevronDisabled: sl
}, _l = ["medium", "small"], al = ({
  id: n,
  label: s,
  options: e
}) => {
  if (!n)
    throw new Error(pe("DSSelect", 'A unique "id" prop is required. Please add a unique "id" prop to the DSSelect component.'));
  if (!s)
    throw new Error(pe("DSSelect", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSSelect component. If you don't want to display a label, set hideLabel={true}.`));
  if (Array.isArray(e)) {
    if (e.length === 0)
      throw new Error(pe("DSSelect", "The options array must not be empty."));
  } else throw new Error(pe("DSSelect", Me("options", "DSSelect")));
}, cl = (n, s, e) => n === "" || s !== void 0 && s !== "" ? !1 : !(e !== void 0 && e !== ""), ol = Be((n, s) => {
  const e = xe.c(127);
  let i, d, r, l, f, b, g, D, a, Z, J, K, Q, U, X, o;
  e[0] !== n ? ({
    id: l,
    label: f,
    options: g,
    className: i,
    defaultValue: d,
    disabled: Z,
    hideLabel: J,
    hint: r,
    invalid: K,
    placeholder: Q,
    required: U,
    size: X,
    systemFeedback: a,
    value: o,
    onChange: b,
    ...D
  } = n, e[0] = n, e[1] = i, e[2] = d, e[3] = r, e[4] = l, e[5] = f, e[6] = b, e[7] = g, e[8] = D, e[9] = a, e[10] = Z, e[11] = J, e[12] = K, e[13] = Q, e[14] = U, e[15] = X, e[16] = o) : (i = e[1], d = e[2], r = e[3], l = e[4], f = e[5], b = e[6], g = e[7], D = e[8], a = e[9], Z = e[10], J = e[11], K = e[12], Q = e[13], U = e[14], X = e[15], o = e[16]);
  const h = Z === void 0 ? !1 : Z, Pe = J === void 0 ? !1 : J, c = K === void 0 ? !1 : K, S = Q === void 0 ? "Select" : Q, y = U === void 0 ? !1 : U, le = X === void 0 ? "medium" : X;
  process.env.NODE_ENV !== "production" && al({
    id: l,
    label: f,
    options: g
  });
  const qe = Fe(null), [ue, Ne] = Ie(o);
  let te;
  e[17] !== d || e[18] !== S || e[19] !== o ? (te = cl(S, d, o), e[17] = d, e[18] = S, e[19] = o, e[20] = te) : te = e[20];
  const [Y, Ce] = Ie(te);
  let se, ae;
  e[21] !== o ? (se = () => {
    Ne(o);
  }, ae = [o], e[21] = o, e[22] = se, e[23] = ae) : (se = e[22], ae = e[23]), He(se, ae);
  let ce;
  e[24] !== s ? (ce = (ee) => {
    qe.current = ee, typeof s == "function" ? s(ee) : s && (s.current = ee);
  }, e[24] = s, e[25] = ce) : ce = e[25];
  const _e = ce, G = Re(Pe), w = `${l}-label`, m = `${l}-feedback`, N = `${l}-hint`, ve = r ? ` ${N}` : "";
  let oe;
  e[26] !== c || e[27] !== a || e[28] !== m ? (oe = [c && a && m].filter(Boolean).join(" ") || void 0, e[26] = c, e[27] = a, e[28] = m, e[29] = oe) : oe = e[29];
  const ge = oe;
  let k, E, I, P, q, C, $, L, V, A, x, B, F, H, R, j, p, u, _;
  if (e[30] !== ge || e[31] !== ve || e[32] !== i || e[33] !== d || e[34] !== h || e[35] !== _e || e[36] !== G || e[37] !== r || e[38] !== N || e[39] !== l || e[40] !== c || e[41] !== Y || e[42] !== f || e[43] !== b || e[44] !== g || e[45] !== S || e[46] !== y || e[47] !== D || e[48] !== w || e[49] !== ue || e[50] !== le || e[51] !== a || e[52] !== m) {
    const ee = (he) => [S && /* @__PURE__ */ v("option", { value: "", children: S }, `${l}-hidden-option-disabled-placeholder`), ...he.map((O) => {
      if ("options" in O) {
        const {
          label: Ee,
          options: Ae
        } = O;
        return /* @__PURE__ */ v("optgroup", { label: Ee, children: Ae.map(ke) }, Ee);
      } else
        return ke(O);
    })], ke = il;
    let re;
    e[72] !== i ? (re = me(t.root, i), e[72] = i, e[73] = re) : re = e[73];
    const $e = re, Se = le === "small";
    let ne;
    e[74] !== c || e[75] !== Y || e[76] !== Se ? (ne = me(t.select, {
      [t.selectSmall]: Se,
      [t.selectInvalid]: c,
      [t.selectPlaceholder]: Y
    }), e[74] = c, e[75] = Y, e[76] = Se, e[77] = ne) : ne = e[77];
    const Le = ne;
    let de;
    e[78] !== h || e[79] !== G ? (de = me(t.label, {
      [t.labelHidden]: G,
      [t.labelDisabled]: h
    }), e[78] = h, e[79] = G, e[80] = de) : de = e[80];
    const De = de, ye = le === "small";
    let fe;
    e[81] !== h || e[82] !== ye ? (fe = me(t.chevron, {
      [t.chevronSmall]: ye,
      [t.chevronDisabled]: h
    }), e[81] = h, e[82] = ye, e[83] = fe) : fe = e[83], k = fe;
    let be;
    e[84] !== b ? (be = (he) => {
      const {
        value: O
      } = he.target;
      Ce(O === ""), Ne(O), b && b(he);
    }, e[84] = b, e[85] = be) : be = e[85];
    const Ve = be;
    j = $e;
    let T;
    e[86] !== y ? (T = y && /* @__PURE__ */ v(je, {}), e[86] = y, e[87] = T) : T = e[87], e[88] !== l || e[89] !== f || e[90] !== De || e[91] !== w || e[92] !== T ? (p = /* @__PURE__ */ we("label", { className: De, id: w, htmlFor: l, children: [
      f,
      T
    ] }), e[88] = l, e[89] = f, e[90] = De, e[91] = w, e[92] = T, e[93] = p) : p = e[93], e[94] !== r || e[95] !== N ? (u = r && /* @__PURE__ */ v("div", { className: t.hint, id: N, children: r }), e[94] = r, e[95] = N, e[96] = u) : u = e[96], e[97] !== c || e[98] !== a || e[99] !== m ? (_ = c && a && /* @__PURE__ */ v(ze, { className: t.feedback, message: a, type: "invalid", id: m, "aria-live": "assertive" }), e[97] = c, e[98] = a, e[99] = m, e[100] = _) : _ = e[100], R = t.selectWrapper, E = D, I = l, P = _e, q = Le, C = `${w}${ve}`, $ = ge, L = c, V = d, A = ue, x = h, B = y, F = Ve, H = ee(g), e[30] = ge, e[31] = ve, e[32] = i, e[33] = d, e[34] = h, e[35] = _e, e[36] = G, e[37] = r, e[38] = N, e[39] = l, e[40] = c, e[41] = Y, e[42] = f, e[43] = b, e[44] = g, e[45] = S, e[46] = y, e[47] = D, e[48] = w, e[49] = ue, e[50] = le, e[51] = a, e[52] = m, e[53] = k, e[54] = E, e[55] = I, e[56] = P, e[57] = q, e[58] = C, e[59] = $, e[60] = L, e[61] = V, e[62] = A, e[63] = x, e[64] = B, e[65] = F, e[66] = H, e[67] = R, e[68] = j, e[69] = p, e[70] = u, e[71] = _;
  } else
    k = e[53], E = e[54], I = e[55], P = e[56], q = e[57], C = e[58], $ = e[59], L = e[60], V = e[61], A = e[62], x = e[63], B = e[64], F = e[65], H = e[66], R = e[67], j = e[68], p = e[69], u = e[70], _ = e[71];
  let W;
  e[101] !== E || e[102] !== I || e[103] !== P || e[104] !== q || e[105] !== C || e[106] !== $ || e[107] !== L || e[108] !== V || e[109] !== A || e[110] !== x || e[111] !== B || e[112] !== F || e[113] !== H ? (W = /* @__PURE__ */ v("select", { ...E, id: I, ref: P, className: q, "aria-labelledby": C, "aria-describedby": $, "aria-invalid": L, defaultValue: V, value: A, disabled: x, required: B, onChange: F, children: H }), e[101] = E, e[102] = I, e[103] = P, e[104] = q, e[105] = C, e[106] = $, e[107] = L, e[108] = V, e[109] = A, e[110] = x, e[111] = B, e[112] = F, e[113] = H, e[114] = W) : W = e[114];
  let z;
  e[115] !== k ? (z = /* @__PURE__ */ v(We, { name: "chevron-down", className: k, "aria-hidden": "true" }), e[115] = k, e[116] = z) : z = e[116];
  let M;
  e[117] !== R || e[118] !== W || e[119] !== z ? (M = /* @__PURE__ */ we("div", { className: R, children: [
    W,
    z
  ] }), e[117] = R, e[118] = W, e[119] = z, e[120] = M) : M = e[120];
  let ie;
  return e[121] !== j || e[122] !== p || e[123] !== u || e[124] !== _ || e[125] !== M ? (ie = /* @__PURE__ */ we("div", { className: j, children: [
    p,
    u,
    _,
    M
  ] }), e[121] = j, e[122] = p, e[123] = u, e[124] = _, e[125] = M, e[126] = ie) : ie = e[126], ie;
});
ol.displayName = "DSSelect";
function il(n) {
  const {
    label: s,
    value: e,
    isDisabled: i
  } = n;
  return /* @__PURE__ */ v("option", { value: e, disabled: i, children: s }, e);
}
export {
  ol as D,
  _l as S,
  cl as g,
  al as v
};