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