@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
158 lines (157 loc) • 6.43 kB
JavaScript
"use client";
import { jsxs as m, jsx as a } from "react/jsx-runtime";
import { c as s } from "./index.DQOqod3i.js";
import { forwardRef as oe, useState as ie, useRef as V, useEffect as O } from "react";
import { u as W } from "./useBreakpoint.1txsny17.js";
import { Asterisk as re } from "../asterisk.Dwtdwpkq.js";
import { D as $ } from "./Button.CCol--xy.js";
import { D as le } from "./Popover.CxZZ_y1Z.js";
import { D as ce } from "./SystemFeedback.DhWcYjnu.js";
import { g as _, a as ue } from "./helpers.CexwVao7.js";
import '../assets/InputSearch.BROFFTK9.css';const pe = "ds-input-search_input_16e1s_1", de = "ds-input-search_input--small_16e1s_9", he = "ds-input-search_input--invalid_16e1s_127", be = "ds-input-search_input--dark_16e1s_145", me = "ds-input-search_input--has-action-button_16e1s_296", _e = "ds-input-search_input--has-second-action-button_16e1s_299", fe = "ds-input-search_root_16e1s_338", De = "ds-input-search_hint_16e1s_338", Se = "ds-input-search_label-wrapper_16e1s_338", ve = "ds-input-search_wrapper_16e1s_342", ke = "ds-input-search_action-button_16e1s_348", Be = "ds-input-search_second-action-button_16e1s_352", ye = "ds-input-search_label_16e1s_338", Ie = "ds-input-search_label--disabled_16e1s_371", we = "ds-input-search_label--dark_16e1s_375", ge = "ds-input-search_label-wrapper--hidden_16e1s_391", Ne = "ds-input-search_hint--dark_16e1s_418", Ce = "ds-input-search_feedback_16e1s_422", e = {
input: pe,
inputSmall: de,
inputInvalid: he,
inputDark: be,
inputHasActionButton: me,
inputHasSecondActionButton: _e,
root: fe,
hint: De,
labelWrapper: Se,
wrapper: ve,
actionButton: ke,
secondActionButton: Be,
label: ye,
labelDisabled: Ie,
labelDark: we,
labelWrapperHidden: ge,
hintDark: Ne,
feedback: Ce
}, Ae = ({
id: i,
label: o,
hideLabel: n,
popoverContent: p
}) => {
if (!i)
throw new Error(_("DSInputSearch", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputSearch component.'));
if (!o)
throw new Error(_("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}.`));
n && p && console.warn(_("DSInputSearch", "Using a popover when hideLabel is set to true is not supported."));
}, Ee = (i) => !!ue(i, "form"), Le = oe((i, o) => {
const {
id: n,
label: p,
className: j,
clearButtonLabel: q = "Clear search field",
disabled: r = !1,
hint: f,
hideLabel: y = !1,
invalid: d = !1,
popoverContent: D,
popoverInfoButtonProps: F,
readonly: l = !1,
required: I = !1,
size: c = "medium",
systemFeedback: S,
theme: u = "light",
value: v,
submitButtonProps: R,
onChange: w,
...x
} = i;
process.env.NODE_ENV !== "production" && Ae({
id: n,
label: p,
hideLabel: W(y),
popoverContent: D
});
const {
label: T = "Search",
onClick: M,
...z
} = R || {}, k = u === "dark", [h, g] = ie(v), B = V(null), b = V(null), U = (t) => {
b.current = t, typeof o == "function" ? o(t) : o && (o.current = t);
}, N = W(y);
O(() => {
g(v);
}, [v]), O(() => {
B.current && !Ee(B.current) && process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && console.warn(_("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 C = `${n}-label`, A = `${n}-feedback`, E = `${n}-hint`, G = f ? ` ${E}` : "", J = [d && S && A].filter(Boolean).join(" ") || void 0, L = h !== "" && h !== void 0 && h !== null, K = s(e.root, j), Q = s(e.input, {
[e.inputDark]: k,
// small input
[e.inputSmall]: c === "small",
// invalid state
[e.inputInvalid]: d,
// action button - input password always has an action button
[e.inputHasActionButton]: !0,
// action second action button
[e.inputHasSecondActionButton]: L && !l && !r
}), X = s(e.label, {
[e.labelDark]: k,
[e.labelDisabled]: r
}), Y = s(e.labelWrapper, {
// hide label only visually to keep them available for assistive technologies
[e.labelWrapperHidden]: N
}), Z = s(e.actionButton, {
[e.actionButtonSmall]: c === "small"
}), ee = s(e.secondActionButton, {
[e.secondActionButtonSmall]: c === "small"
}), te = (t, P) => {
const se = Object.getPrototypeOf(t), H = Object.getOwnPropertyDescriptor(se, "value");
H?.set ? H.set.call(t, P) : t.value = P;
}, ne = () => {
if (!b.current)
return;
te(b.current, "");
const t = new Event("change", {
bubbles: !0
});
b.current?.dispatchEvent(t);
}, ae = (t) => {
g(t.target.value), w && w(t);
};
return /* @__PURE__ */ m("div", { className: K, ref: B, children: [
/* @__PURE__ */ m("div", { className: Y, children: [
/* @__PURE__ */ m("label", { className: X, id: C, htmlFor: n, children: [
p,
I && /* @__PURE__ */ a(re, {})
] }),
D && !N && /* @__PURE__ */ a(le, { placement: "top", theme: u, defaultAnchorButtonProps: F, children: D })
] }),
f && /* @__PURE__ */ a("div", { className: s(e.hint, {
[e.hintDark]: k
}), id: E, children: f }),
/* @__PURE__ */ m("div", { className: e.wrapper, children: [
/* @__PURE__ */ a(
"input",
{
className: Q,
id: n,
...x,
ref: U,
"aria-labelledby": `${C}${G}`,
"aria-describedby": J,
"aria-invalid": d,
"aria-disabled": l,
readOnly: l,
required: I,
disabled: r,
type: "search",
value: h,
onChange: ae
}
),
L && !l && !r && /* @__PURE__ */ a($, { hideLabel: !0, theme: u, iconName: "cross", className: ee, variant: "ghost", size: c, onClick: ne, type: "button", tabIndex: -1, children: q }),
/* @__PURE__ */ a($, { ...z, hideLabel: !0, theme: u, iconName: "magnifying-glass", className: Z, variant: "ghost", size: c, onClick: M, type: "submit", disabled: r || l, children: T })
] }),
d && S && /* @__PURE__ */ a(ce, { className: e.feedback, message: S, variant: "error", id: A, theme: u })
] });
});
Le.displayName = "DSInputSearch";
export {
Le as D,
Ee as i,
Ae as v
};