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

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as b, jsx as a } from "react/jsx-runtime";
import { c as o } from "./index.DL9mof6u.js";
import { forwardRef as X, useRef as Y, useState as $, useEffect as z } from "react";
import { u as A } from "./useBreakpoint.1txsny17.js";
import "./index.D-sRdssb.js";
import { Asterisk as G } from "../asterisk.B2ih8VwF.js";
import { D as ee } from "./Icon.CDLyB7Pv.js";
import { D as le } from "./Popover.D7McfVaH.js";
import { D as se } from "./SystemFeedback.CjlARKki.js";
import { g as n, r as te } from "./helpers.CexwVao7.js";
import '../assets/Select.CL0fqx7X.css';const ae = "ds-select_root_1p3qq_1", re = "ds-select_hint_1p3qq_1", ce = "ds-select_label-wrapper_1p3qq_1", oe = "ds-select_label_1p3qq_1", ne = "ds-select_label--disabled_1p3qq_123", ie = "ds-select_label-wrapper--hidden_1p3qq_135", de = "ds-select_feedback_1p3qq_163", pe = "ds-select_select-wrapper_1p3qq_167", he = "ds-select_select_1p3qq_167", me = "ds-select_select--small_1p3qq_181", be = "ds-select_select--invalid_1p3qq_293", _e = "ds-select_select--placeholder_1p3qq_401", fe = "ds-select_chevron_1p3qq_451", Se = "ds-select_chevron--small_1p3qq_455", ue = "ds-select_chevron--disabled_1p3qq_458", e = {
  root: ae,
  hint: re,
  labelWrapper: ce,
  label: oe,
  labelDisabled: ne,
  labelWrapperHidden: ie,
  feedback: de,
  selectWrapper: pe,
  select: he,
  selectSmall: me,
  selectInvalid: be,
  selectPlaceholder: _e,
  chevron: fe,
  chevronSmall: Se,
  chevronDisabled: ue
}, Ae = ["medium", "small"], qe = ({
  id: l,
  label: c,
  options: r,
  hideLabel: _,
  popoverContent: i
}) => {
  if (!l)
    throw new Error(n("DSSelect", 'A unique "id" prop is required. Please add a unique "id" prop to the DSSelect component.'));
  if (!c)
    throw new Error(n("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(r)) {
    if (r.length === 0)
      throw new Error(n("DSSelect", "The options array must not be empty."));
  } else throw new Error(n("DSSelect", te("options", "DSSelect")));
  _ && i && console.warn(n("DSSelect", "Using a popover when hideLabel is set to true is not supported."));
}, ve = (l, c, r) => l === "" || c !== void 0 && c !== "" ? !1 : !(r !== void 0 && r !== ""), De = X(({
  id: l,
  label: c,
  options: r,
  className: _,
  defaultValue: i,
  disabled: f = !1,
  hideLabel: D = !1,
  hint: S,
  invalid: d = !1,
  popoverContent: u,
  popoverInfoButtonProps: L,
  placeholder: q = "Select",
  required: w = !1,
  size: y = "medium",
  systemFeedback: v,
  value: p,
  onChange: g,
  ...B
}, h) => {
  process.env.NODE_ENV !== "production" && qe({
    id: l,
    label: c,
    options: r,
    hideLabel: A(D),
    popoverContent: u
  });
  const C = Y(null), [H, N] = $(p), [R, j] = $(ve(q, i, p));
  z(() => {
    N(p);
  }, [p]);
  const x = (s) => {
    C.current = s, typeof h == "function" ? h(s) : h && (h.current = s);
  }, P = A(D), I = `${l}-label`, E = `${l}-feedback`, W = `${l}-hint`, V = S ? ` ${W}` : "", M = [d && v && E].filter(Boolean).join(" ") || void 0, T = (s) => [q && /* @__PURE__ */ a("option", { value: "", children: q }, `${l}-hidden-option-disabled-placeholder`), ...s.map((t) => {
    if ("options" in t) {
      const {
        label: m,
        options: Q
      } = t;
      return /* @__PURE__ */ a("optgroup", { label: m, children: Q.map(k) }, m);
    } else
      return k(t);
  })], k = ({
    label: s,
    value: t,
    isDisabled: m
  }) => /* @__PURE__ */ a("option", { value: t, disabled: m, children: s }, t), F = o(e.root, _), O = o(e.select, {
    [e.selectSmall]: y === "small",
    [e.selectInvalid]: d,
    [e.selectPlaceholder]: R
  }), U = o(e.label, {
    [e.labelDisabled]: f
  }), Z = o(e.labelWrapper, {
    // hide label only visually to keep them available for assistive technologies
    [e.labelWrapperHidden]: P
  }), J = o(e.chevron, {
    [e.chevronSmall]: y === "small",
    [e.chevronDisabled]: f
  }), K = (s) => {
    const {
      value: t
    } = s.target;
    j(t === ""), N(t), g && g(s);
  };
  return /* @__PURE__ */ b("div", { className: F, children: [
    /* @__PURE__ */ b("div", { className: Z, children: [
      /* @__PURE__ */ b("label", { className: U, id: I, htmlFor: l, children: [
        c,
        w && /* @__PURE__ */ a(G, {})
      ] }),
      u && !P && /* @__PURE__ */ a(le, { placement: "top", defaultAnchorButtonProps: L, children: u })
    ] }),
    S && /* @__PURE__ */ a("div", { className: e.hint, id: W, children: S }),
    /* @__PURE__ */ b("div", { className: e.selectWrapper, children: [
      /* @__PURE__ */ a(
        "select",
        {
          ...B,
          id: l,
          ref: x,
          className: O,
          "aria-labelledby": `${I}${V}`,
          "aria-describedby": M,
          "aria-invalid": d,
          defaultValue: i,
          value: H,
          disabled: f,
          required: w,
          onChange: K,
          children: T(r)
        }
      ),
      /* @__PURE__ */ a(ee, { name: "chevron-down", className: J, "aria-hidden": "true" })
    ] }),
    d && v && /* @__PURE__ */ a(se, { className: e.feedback, message: v, variant: "error", id: E })
  ] });
});
De.displayName = "DSSelect";
export {
  De as D,
  Ae as S,
  ve as g,
  qe as v
};