@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
130 lines (129 loc) • 5.08 kB
JavaScript
"use client";
import { jsxs as d, jsx as e } from "react/jsx-runtime";
import { c as o } from "./index.DQOqod3i.js";
import { forwardRef as U, useState as G, useRef as J } from "react";
import { u as B } from "./useBreakpoint.1txsny17.js";
import { Asterisk as K } from "../asterisk.Dwtdwpkq.js";
import { D as Q } from "./Button.CCol--xy.js";
import { D as X } from "./Popover.CxZZ_y1Z.js";
import { D as Y } from "./SystemFeedback.DhWcYjnu.js";
import { g as h } from "./helpers.CexwVao7.js";
import '../assets/InputPassword.BgZo-RUc.css';const Z = "ds-input-password_input_1gisg_1", ss = "ds-input-password_input--small_1gisg_9", as = "ds-input-password_input--invalid_1gisg_127", ts = "ds-input-password_input--dark_1gisg_145", es = "ds-input-password_input--has-action-button_1gisg_296", os = "ds-input-password_root_1gisg_338", is = "ds-input-password_hint_1gisg_338", ns = "ds-input-password_label-wrapper_1gisg_338", rs = "ds-input-password_wrapper_1gisg_342", ls = "ds-input-password_action-button_1gisg_348", ds = "ds-input-password_label_1gisg_338", ps = "ds-input-password_label--disabled_1gisg_367", us = "ds-input-password_label--dark_1gisg_371", cs = "ds-input-password_label-wrapper--hidden_1gisg_387", bs = "ds-input-password_hint--dark_1gisg_414", ws = "ds-input-password_feedback_1gisg_418", s = {
input: Z,
inputSmall: ss,
inputInvalid: as,
inputDark: ts,
inputHasActionButton: es,
root: os,
hint: is,
labelWrapper: ns,
wrapper: rs,
actionButton: ls,
label: ds,
labelDisabled: ps,
labelDark: us,
labelWrapperHidden: cs,
hintDark: bs,
feedback: ws
}, _s = ({
id: p,
label: t,
hideLabel: a,
popoverContent: n
}) => {
if (!p)
throw new Error(h("DSInputPassword", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputPassword component.'));
if (!t)
throw new Error(h("DSInputPassword", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputPassword component. If you don't want to display a label, set hideLabel={true}.`));
a && n && console.warn(h("DSInputPassword", "Using a popover when hideLabel is set to true is not supported."));
}, ms = U((p, t) => {
const {
id: a,
label: n,
autoComplete: I = "new-password",
className: N,
disabled: u = !1,
hint: c,
hideLabel: f = !1,
invalid: r = !1,
popoverContent: b,
popoverInfoButtonProps: C,
readonly: D = !1,
required: k = !1,
togglePasswordVisibilityButtonProps: H,
size: w = "medium",
systemFeedback: _,
theme: l = "light",
...L
} = p;
process.env.NODE_ENV !== "production" && _s({
id: a,
label: n,
hideLabel: B(f),
popoverContent: b
});
const {
hidePasswordText: A = "Hide password",
showPasswordText: W = "Show password",
...x
} = H || {}, [m, $] = G(!1), P = `${a}-label`, y = `${a}-feedback`, v = `${a}-hint`, q = c ? ` ${v}` : "", T = [r && _ && y].filter(Boolean).join(" ") || void 0, S = B(f), V = o(s.root, N), g = l === "dark", E = o(s.input, {
[s.inputDark]: g,
// small input
[s.inputSmall]: w === "small",
// invalid state
[s.inputInvalid]: r,
// action button - input password always has an action button
[s.inputHasActionButton]: !0
}), F = o(s.label, {
[s.labelDark]: g,
[s.labelDisabled]: u
}), R = o(s.labelWrapper, {
// hide label only visually to keep them available for assistive technologies
[s.labelWrapperHidden]: S
}), j = o(s.actionButton, {
[s.actionButtonSmall]: w === "small"
}), O = J(null), z = (i) => {
O.current = i, typeof t == "function" ? t(i) : t && (t.current = i);
}, M = () => {
$((i) => !i);
};
return /* @__PURE__ */ d("div", { className: V, children: [
/* @__PURE__ */ d("div", { className: R, children: [
/* @__PURE__ */ d("label", { className: F, id: P, htmlFor: a, children: [
n,
k && /* @__PURE__ */ e(K, {})
] }),
b && !S && /* @__PURE__ */ e(X, { placement: "top", theme: l, defaultAnchorButtonProps: C, children: b })
] }),
c && /* @__PURE__ */ e("div", { className: o(s.hint, {
[s.hintDark]: g
}), id: v, children: c }),
/* @__PURE__ */ d("div", { className: s.wrapper, children: [
/* @__PURE__ */ e(
"input",
{
className: E,
id: a,
...L,
ref: z,
"aria-labelledby": `${P}${q}`,
"aria-describedby": T,
"aria-invalid": r,
"aria-disabled": D,
readOnly: D,
required: k,
disabled: u,
autoComplete: I,
type: m ? "text" : "password"
}
),
/* @__PURE__ */ e(Q, { ...x, hideLabel: !0, theme: l, iconName: m ? "eye-closed" : "eye", variant: "ghost", className: j, size: w, onClick: M, type: "button", disabled: u, children: m ? A : W })
] }),
r && _ && /* @__PURE__ */ e(Y, { className: s.feedback, message: _, variant: "error", id: y, theme: l })
] });
});
ms.displayName = "DSInputPassword";
export {
ms as D,
_s as v
};