@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
175 lines (174 loc) • 8.79 kB
JavaScript
"use client";
import { jsx as L, jsxs as gt } from "react/jsx-runtime";
import { d as Vt } from "./index.CgTHIF3K.js";
import { c as R } from "./index.CEyLAtio.js";
import { forwardRef as Ot, useState as $t, useRef as Et, useEffect as kt } from "react";
import { g as Nt, a as qt } from "./helpers.BbWkXTr3.js";
import { u as xt } from "./useBreakpoint.CMOR9ZOB.js";
import { Asterisk as Ft } from "../asterisk.CR60hx8S.js";
import { D as At } from "./Button.Cf1CKq8N.js";
import { D as Rt } from "./SystemFeedback.CyGbUCzT.js";
import '../assets/InputSearch.Bkg-1urJ.css';const Tt = "ds-input-search_root_12yjy_1", zt = "ds-input-search_input_12yjy_5", Mt = "ds-input-search_input--small_12yjy_13", Wt = "ds-input-search_input--invalid_12yjy_125", Gt = "ds-input-search_input--has-action-button_12yjy_186", Jt = "ds-input-search_input--has-second-action-button_12yjy_189", Kt = "ds-input-search_hint_12yjy_231", Qt = "ds-input-search_label_12yjy_231", Ut = "ds-input-search_wrapper_12yjy_235", Xt = "ds-input-search_action-button_12yjy_241", Yt = "ds-input-search_second-action-button_12yjy_245", Zt = "ds-input-search_label--hidden_12yjy_263", te = "ds-input-search_label--disabled_12yjy_276", ee = "ds-input-search_feedback_12yjy_296", s = {
root: Tt,
input: zt,
inputSmall: Mt,
inputInvalid: Wt,
inputHasActionButton: Gt,
inputHasSecondActionButton: Jt,
hint: Kt,
label: Qt,
wrapper: Ut,
actionButton: Xt,
secondActionButton: Yt,
labelHidden: Zt,
labelDisabled: te,
feedback: ee
}, se = ({
id: a,
label: i
}) => {
if (!a)
throw new Error(Nt("DSInputSearch", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputSearch component.'));
if (!i)
throw new Error(Nt("DSInputSearch", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputSearch component. If you don't want to display a label, set hideLabel={true}.`));
}, ne = (a) => !!qt(a, "form"), ae = Ot((a, i) => {
const t = Vt.c(103);
let l, d, e, b, f, m, y, c, H, P, V, O, $, q, x, p;
t[0] !== a ? ({
id: e,
label: b,
className: l,
clearButtonLabel: H,
disabled: P,
hint: d,
hideLabel: V,
invalid: O,
readonly: $,
required: q,
size: x,
systemFeedback: c,
value: p,
submitButtonProps: y,
onChange: f,
...m
} = a, t[0] = a, t[1] = l, t[2] = d, t[3] = e, t[4] = b, t[5] = f, t[6] = m, t[7] = y, t[8] = c, t[9] = H, t[10] = P, t[11] = V, t[12] = O, t[13] = $, t[14] = q, t[15] = x, t[16] = p) : (l = t[1], d = t[2], e = t[3], b = t[4], f = t[5], m = t[6], y = t[7], c = t[8], H = t[9], P = t[10], V = t[11], O = t[12], $ = t[13], q = t[14], x = t[15], p = t[16]);
const lt = H === void 0 ? "Clear search field" : H, o = P === void 0 ? !1 : P, Ct = V === void 0 ? !1 : V, n = O === void 0 ? !1 : O, r = $ === void 0 ? !1 : $, _ = q === void 0 ? !1 : q, u = x === void 0 ? "medium" : x;
process.env.NODE_ENV !== "production" && se({
id: e,
label: b
});
let v;
t[17] !== y ? (v = y || {}, t[17] = y, t[18] = v) : v = t[18];
let S, B, F;
t[19] !== v ? ({
label: F,
onClick: S,
...B
} = v, t[19] = v, t[20] = S, t[21] = B, t[22] = F) : (S = t[20], B = t[21], F = t[22]);
const ot = F === void 0 ? "Search" : F, [D, jt] = $t(p), ct = Et(null), T = Et(null);
let z;
t[23] !== i ? (z = (h) => {
T.current = h, typeof i == "function" ? i(h) : i && (i.current = h);
}, t[23] = i, t[24] = z) : z = t[24];
const rt = z, ut = xt(Ct);
let M, W;
t[25] !== p ? (M = () => {
jt(p);
}, W = [p], t[25] = p, t[26] = M, t[27] = W) : (M = t[26], W = t[27]), kt(M, W);
let G;
t[28] !== e ? (G = () => {
ct.current && !ne(ct.current) && process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && console.warn(Nt("DSInputSearch", `The DSInputSearch component with the id "${e}" is not within a form element. This may cause issues with form submission. Please ensure the DSInputSearch component is within a form element.`));
}, t[28] = e, t[29] = G) : G = t[29];
let J;
t[30] === Symbol.for("react.memo_cache_sentinel") ? (J = [], t[30] = J) : J = t[30], kt(G, J);
const K = `${e}-label`, I = `${e}-feedback`, Q = `${e}-hint`, Lt = d ? ` ${Q}` : "";
let U;
t[31] !== n || t[32] !== c || t[33] !== I ? (U = [n && c && I].filter(Boolean).join(" ") || void 0, t[31] = n, t[32] = c, t[33] = I, t[34] = U) : U = t[34];
const dt = U, X = D !== "" && D !== void 0 && D !== null;
let Y;
t[35] !== l ? (Y = R(s.root, l), t[35] = l, t[36] = Y) : Y = t[36];
const pt = Y, ht = u === "small", bt = X && !r && !o;
let Z;
t[37] !== n || t[38] !== ht || t[39] !== bt ? (Z = R(s.input, {
[s.inputSmall]: ht,
[s.inputInvalid]: n,
[s.inputHasActionButton]: !0,
[s.inputHasSecondActionButton]: bt
}), t[37] = n, t[38] = ht, t[39] = bt, t[40] = Z) : Z = t[40];
const ft = Z;
let tt;
t[41] !== o || t[42] !== ut ? (tt = R(s.label, {
[s.labelHidden]: ut,
[s.labelDisabled]: o
}), t[41] = o, t[42] = ut, t[43] = tt) : tt = t[43];
const mt = tt, yt = u === "small";
let et;
t[44] !== yt ? (et = R(s.actionButton, {
[s.actionButtonSmall]: yt
}), t[44] = yt, t[45] = et) : et = t[45];
const _t = et, vt = u === "small";
let st;
t[46] !== vt ? (st = R(s.secondActionButton, {
[s.secondActionButtonSmall]: vt
}), t[46] = vt, t[47] = st) : st = t[47];
const St = st, Ht = ie;
let nt;
t[48] === Symbol.for("react.memo_cache_sentinel") ? (nt = () => {
var wt;
if (!T.current)
return;
Ht(T.current, "");
const h = new Event("change", {
bubbles: !0
});
(wt = T.current) == null || wt.dispatchEvent(h);
}, t[48] = nt) : nt = t[48];
const Pt = nt;
let at;
t[49] !== f ? (at = (h) => {
jt(h.target.value), f && f(h);
}, t[49] = f, t[50] = at) : at = t[50];
const Bt = at;
let g;
t[51] !== _ ? (g = _ && /* @__PURE__ */ L(Ft, {}), t[51] = _, t[52] = g) : g = t[52];
let N;
t[53] !== e || t[54] !== K || t[55] !== b || t[56] !== mt || t[57] !== g ? (N = /* @__PURE__ */ gt("label", { className: mt, id: K, htmlFor: e, children: [
b,
g
] }), t[53] = e, t[54] = K, t[55] = b, t[56] = mt, t[57] = g, t[58] = N) : N = t[58];
let j;
t[59] !== d || t[60] !== Q ? (j = d && /* @__PURE__ */ L("div", { className: s.hint, id: Q, children: d }), t[59] = d, t[60] = Q, t[61] = j) : j = t[61];
let w;
t[62] !== n || t[63] !== c || t[64] !== I ? (w = n && c && /* @__PURE__ */ L(Rt, { className: s.feedback, message: c, variant: "error", id: I }), t[62] = n, t[63] = c, t[64] = I, t[65] = w) : w = t[65];
const Dt = `${K}${Lt}`;
let E;
t[66] !== dt || t[67] !== o || t[68] !== rt || t[69] !== Bt || t[70] !== e || t[71] !== ft || t[72] !== D || t[73] !== n || t[74] !== r || t[75] !== _ || t[76] !== m || t[77] !== Dt ? (E = /* @__PURE__ */ L("input", { className: ft, id: e, ...m, ref: rt, "aria-labelledby": Dt, "aria-describedby": dt, "aria-invalid": n, "aria-disabled": r, readOnly: r, required: _, disabled: o, type: "search", value: D, onChange: Bt }), t[66] = dt, t[67] = o, t[68] = rt, t[69] = Bt, t[70] = e, t[71] = ft, t[72] = D, t[73] = n, t[74] = r, t[75] = _, t[76] = m, t[77] = Dt, t[78] = E) : E = t[78];
let k;
t[79] !== St || t[80] !== lt || t[81] !== o || t[82] !== X || t[83] !== r || t[84] !== u ? (k = X && !r && !o && /* @__PURE__ */ L(At, { hideLabel: !0, theme: "light", iconName: "cross", className: St, variant: "ghost", size: u, onClick: Pt, type: "button", tabIndex: -1, children: lt }), t[79] = St, t[80] = lt, t[81] = o, t[82] = X, t[83] = r, t[84] = u, t[85] = k) : k = t[85];
const It = o || r;
let A;
t[86] !== S || t[87] !== B || t[88] !== u || t[89] !== _t || t[90] !== ot || t[91] !== It ? (A = /* @__PURE__ */ L(At, { ...B, hideLabel: !0, theme: "light", iconName: "magnifying-glass", className: _t, variant: "ghost", size: u, onClick: S, type: "submit", disabled: It, children: ot }), t[86] = S, t[87] = B, t[88] = u, t[89] = _t, t[90] = ot, t[91] = It, t[92] = A) : A = t[92];
let C;
t[93] !== E || t[94] !== k || t[95] !== A ? (C = /* @__PURE__ */ gt("div", { className: s.wrapper, children: [
E,
k,
A
] }), t[93] = E, t[94] = k, t[95] = A, t[96] = C) : C = t[96];
let it;
return t[97] !== pt || t[98] !== N || t[99] !== j || t[100] !== w || t[101] !== C ? (it = /* @__PURE__ */ gt("div", { className: pt, ref: ct, children: [
N,
j,
w,
C
] }), t[97] = pt, t[98] = N, t[99] = j, t[100] = w, t[101] = C, t[102] = it) : it = t[102], it;
});
ae.displayName = "DSInputSearch";
function ie(a, i) {
const t = Object.getPrototypeOf(a), l = Object.getOwnPropertyDescriptor(t, "value");
l != null && l.set ? l.set.call(a, i) : a.value = i;
}
export {
ae as D,
ne as i,
se as v
};