@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
150 lines (149 loc) • 6.08 kB
JavaScript
"use client";
import { jsxs as h, jsx as a } from "react/jsx-runtime";
import { c as s } from "./index.DL9mof6u.js";
import { forwardRef as nt, useState as at, useRef as L, useEffect as V } from "react";
import { g as m, a as st } from "./helpers.CexwVao7.js";
import { u as O } from "./useBreakpoint.1txsny17.js";
import "./index.D-sRdssb.js";
import { Asterisk as ot } from "../asterisk.B2ih8VwF.js";
import { D as W } from "./Button.Cn5yg7dG.js";
import { D as rt } from "./Popover.D7McfVaH.js";
import { D as it } from "./SystemFeedback.CjlARKki.js";
import '../assets/InputSearch.GBH9Eh6F.css';const ct = "ds-input-search_input_37dw5_1", lt = "ds-input-search_input--small_37dw5_9", ut = "ds-input-search_input--invalid_37dw5_121", pt = "ds-input-search_input--has-action-button_37dw5_182", dt = "ds-input-search_input--has-second-action-button_37dw5_185", ht = "ds-input-search_root_37dw5_218", mt = "ds-input-search_hint_37dw5_218", bt = "ds-input-search_label-wrapper_37dw5_218", ft = "ds-input-search_wrapper_37dw5_222", _t = "ds-input-search_action-button_37dw5_228", wt = "ds-input-search_second-action-button_37dw5_232", St = "ds-input-search_label_37dw5_218", Dt = "ds-input-search_label--disabled_37dw5_251", Bt = "ds-input-search_label-wrapper--hidden_37dw5_263", It = "ds-input-search_feedback_37dw5_291", t = {
input: ct,
inputSmall: lt,
inputInvalid: ut,
inputHasActionButton: pt,
inputHasSecondActionButton: dt,
root: ht,
hint: mt,
labelWrapper: bt,
wrapper: ft,
actionButton: _t,
secondActionButton: wt,
label: St,
labelDisabled: Dt,
labelWrapperHidden: Bt,
feedback: It
}, vt = ({
id: n,
label: c,
hideLabel: b,
popoverContent: f
}) => {
if (!n)
throw new Error(m("DSInputSearch", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputSearch component.'));
if (!c)
throw new Error(m("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}.`));
b && f && console.warn(m("DSInputSearch", "Using a popover when hideLabel is set to true is not supported."));
}, gt = (n) => !!st(n, "form"), Nt = nt(({
id: n,
label: c,
className: b,
clearButtonLabel: f = "Clear search field",
disabled: o = !1,
hint: _,
hideLabel: I = !1,
invalid: l = !1,
popoverContent: w,
popoverInfoButtonProps: $,
readonly: r = !1,
required: v = !1,
size: i = "medium",
systemFeedback: S,
value: D,
submitButtonProps: j,
onChange: g,
...R
}, u) => {
process.env.NODE_ENV !== "production" && vt({
id: n,
label: c,
hideLabel: O(I),
popoverContent: w
});
const {
label: x = "Search",
onClick: q,
...T
} = j || {}, [p, N] = at(D), B = L(null), d = L(null), F = (e) => {
d.current = e, typeof u == "function" ? u(e) : u && (u.current = e);
}, y = O(I);
V(() => {
N(D);
}, [D]), V(() => {
B.current && !gt(B.current) && process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && console.warn(m("DSInputSearch", `The DSInputSearch component with the id "${n}" is not within a form element. This may cause issues with form submission. Please ensure the DSInputSearch component is within a form element.`));
}, []);
const A = `${n}-label`, E = `${n}-feedback`, H = `${n}-hint`, M = _ ? ` ${H}` : "", U = [l && S && E].filter(Boolean).join(" ") || void 0, k = p !== "" && p !== void 0 && p !== null, G = s(t.root, b), J = s(t.input, {
// small input
[t.inputSmall]: i === "small",
// invalid state
[t.inputInvalid]: l,
// action button - input password always has an action button
[t.inputHasActionButton]: !0,
// action second action button
[t.inputHasSecondActionButton]: k && !r && !o
}), K = s(t.label, {
[t.labelDisabled]: o
}), Q = s(t.labelWrapper, {
// hide label only visually to keep them available for assistive technologies
[t.labelWrapperHidden]: y
}), X = s(t.actionButton, {
[t.actionButtonSmall]: i === "small"
}), Y = s(t.secondActionButton, {
[t.secondActionButtonSmall]: i === "small"
}), Z = (e, C) => {
const et = Object.getPrototypeOf(e), P = Object.getOwnPropertyDescriptor(et, "value");
P?.set ? P.set.call(e, C) : e.value = C;
}, z = () => {
if (!d.current)
return;
Z(d.current, "");
const e = new Event("change", {
bubbles: !0
});
d.current?.dispatchEvent(e);
}, tt = (e) => {
N(e.target.value), g && g(e);
};
return /* @__PURE__ */ h("div", { className: G, ref: B, children: [
/* @__PURE__ */ h("div", { className: Q, children: [
/* @__PURE__ */ h("label", { className: K, id: A, htmlFor: n, children: [
c,
v && /* @__PURE__ */ a(ot, {})
] }),
w && !y && /* @__PURE__ */ a(rt, { placement: "top", defaultAnchorButtonProps: $, children: w })
] }),
_ && /* @__PURE__ */ a("div", { className: t.hint, id: H, children: _ }),
/* @__PURE__ */ h("div", { className: t.wrapper, children: [
/* @__PURE__ */ a(
"input",
{
className: J,
id: n,
...R,
ref: F,
"aria-labelledby": `${A}${M}`,
"aria-describedby": U,
"aria-invalid": l,
"aria-disabled": r,
readOnly: r,
required: v,
disabled: o,
type: "search",
value: p,
onChange: tt
}
),
k && !r && !o && /* @__PURE__ */ a(W, { hideLabel: !0, theme: "light", iconName: "cross", className: Y, variant: "ghost", size: i, onClick: z, type: "button", tabIndex: -1, children: f }),
/* @__PURE__ */ a(W, { ...T, hideLabel: !0, theme: "light", iconName: "magnifying-glass", className: X, variant: "ghost", size: i, onClick: q, type: "submit", disabled: o || r, children: x })
] }),
l && S && /* @__PURE__ */ a(it, { className: t.feedback, message: S, variant: "error", id: E })
] });
});
Nt.displayName = "DSInputSearch";
export {
Nt as D,
gt as i,
vt as v
};