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

Welcome to the STIHL Design System react component library.

"use client";
import { jsxs as u, jsx as r } from "react/jsx-runtime";
import { c } from "./index.DQOqod3i.js";
import { forwardRef as G, useRef as ee, useState as q, useEffect as le } from "react";
import { Asterisk as se } from "../asterisk.Dwtdwpkq.js";
import { D as ae } from "./Icon.DYtaQgbw.js";
import { D as te } from "./Popover.CxZZ_y1Z.js";
import { D as re } from "./SystemFeedback.DhWcYjnu.js";
import { g as n, r as ce } from "./helpers.CexwVao7.js";
import { u as A } from "./useBreakpoint.1txsny17.js";
import '../assets/Select.CfTN3CJo.css';const oe = "ds-select_root_1pc5m_1", ne = "ds-select_hint_1pc5m_1", ie = "ds-select_label-wrapper_1pc5m_1", de = "ds-select_label_1pc5m_1", pe = "ds-select_label--disabled_1pc5m_189", me = "ds-select_label--dark_1pc5m_193", he = "ds-select_label-wrapper--hidden_1pc5m_209", be = "ds-select_hint--dark_1pc5m_236", _e = "ds-select_feedback_1pc5m_240", ue = "ds-select_select-wrapper_1pc5m_244", fe = "ds-select_select_1pc5m_244", ve = "ds-select_select--small_1pc5m_258", Se = "ds-select_select--invalid_1pc5m_376", De = "ds-select_select--dark_1pc5m_394", ke = "ds-select_select--placeholder_1pc5m_598", ye = "ds-select_chevron_1pc5m_657", we = "ds-select_chevron--small_1pc5m_666", ge = "ds-select_chevron--disabled_1pc5m_669", Ne = "ds-select_chevron--dark_1pc5m_677", e = {
  root: oe,
  hint: ne,
  labelWrapper: ie,
  label: de,
  labelDisabled: pe,
  labelDark: me,
  labelWrapperHidden: he,
  hintDark: be,
  feedback: _e,
  selectWrapper: ue,
  select: fe,
  selectSmall: ve,
  selectInvalid: Se,
  selectDark: De,
  selectPlaceholder: ke,
  chevron: ye,
  chevronSmall: we,
  chevronDisabled: ge,
  chevronDark: Ne
}, He = ["medium", "small"], Pe = ({
  id: o,
  label: a,
  options: l,
  hideLabel: i,
  popoverContent: d
}) => {
  if (!o)
    throw new Error(n("DSSelect", 'A unique "id" prop is required. Please add a unique "id" prop to the DSSelect component.'));
  if (!a)
    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(l)) {
    if (l.length === 0)
      throw new Error(n("DSSelect", "The options array must not be empty."));
  } else throw new Error(n("DSSelect", ce("options", "DSSelect")));
  i && d && console.warn(n("DSSelect", "Using a popover when hideLabel is set to true is not supported."));
}, Ie = (o, a, l) => o === "" || a !== void 0 && a !== "" ? !1 : !(l !== void 0 && l !== ""), Ce = G((o, a) => {
  const {
    id: l,
    label: i,
    options: d,
    className: B,
    defaultValue: y,
    disabled: f = !1,
    hideLabel: w = !1,
    hint: v,
    invalid: p = !1,
    popoverContent: S,
    popoverInfoButtonProps: V,
    placeholder: D = "Select",
    required: g = !1,
    size: N = "medium",
    systemFeedback: k,
    theme: m = "light",
    value: h,
    onChange: P,
    ...F
  } = o;
  process.env.NODE_ENV !== "production" && Pe({
    id: l,
    label: i,
    options: d,
    hideLabel: A(w),
    popoverContent: S
  });
  const H = ee(null), [R, I] = q(h), [j, x] = q(Ie(D, y, h));
  le(() => {
    I(h);
  }, [h]);
  const T = (s) => {
    H.current = s, typeof a == "function" ? a(s) : a && (a.current = s);
  }, C = A(w), E = `${l}-label`, W = `${l}-feedback`, L = `${l}-hint`, M = v ? ` ${L}` : "", z = [p && k && W].filter(Boolean).join(" ") || void 0, O = (s) => [D && /* @__PURE__ */ r("option", { value: "", children: D }, `${l}-hidden-option-disabled-placeholder`), ...s.map((t) => {
    if ("options" in t) {
      const {
        label: _,
        options: Y
      } = t;
      return /* @__PURE__ */ r("optgroup", { label: _, children: Y.map($) }, _);
    } else
      return $(t);
  })], $ = ({
    label: s,
    value: t,
    isDisabled: _
  }) => /* @__PURE__ */ r("option", { value: t, disabled: _, children: s }, t), U = c(e.root, B), b = m === "dark", Z = c(e.select, {
    [e.selectDark]: b,
    [e.selectSmall]: N === "small",
    [e.selectInvalid]: p,
    [e.selectPlaceholder]: j
  }), J = c(e.label, {
    [e.labelDark]: b,
    [e.labelDisabled]: f
  }), K = c(e.labelWrapper, {
    // hide label only visually to keep them available for assistive technologies
    [e.labelWrapperHidden]: C
  }), Q = c(e.chevron, {
    [e.chevronDark]: b,
    [e.chevronSmall]: N === "small",
    [e.chevronDisabled]: f
  }), X = (s) => {
    const {
      value: t
    } = s.target;
    x(t === ""), I(t), P && P(s);
  };
  return /* @__PURE__ */ u("div", { className: U, children: [
    /* @__PURE__ */ u("div", { className: K, children: [
      /* @__PURE__ */ u("label", { className: J, id: E, htmlFor: l, children: [
        i,
        g && /* @__PURE__ */ r(se, {})
      ] }),
      S && !C && /* @__PURE__ */ r(te, { placement: "top", theme: m, defaultAnchorButtonProps: V, children: S })
    ] }),
    v && /* @__PURE__ */ r("div", { className: c(e.hint, {
      [e.hintDark]: b
    }), id: L, children: v }),
    /* @__PURE__ */ u("div", { className: e.selectWrapper, children: [
      /* @__PURE__ */ r(
        "select",
        {
          ...F,
          id: l,
          ref: T,
          className: Z,
          "aria-labelledby": `${E}${M}`,
          "aria-describedby": z,
          "aria-invalid": p,
          defaultValue: y,
          value: R,
          disabled: f,
          required: g,
          onChange: X,
          children: O(d)
        }
      ),
      /* @__PURE__ */ r(ae, { name: "chevron-down", className: Q, "aria-hidden": "true", theme: m })
    ] }),
    p && k && /* @__PURE__ */ r(re, { className: e.feedback, message: k, variant: "error", id: W, theme: m })
  ] });
});
Ce.displayName = "DSSelect";
export {
  Ce as D,
  He as S,
  Ie as g,
  Pe as v
};