@payfit/unity-components
Version:
154 lines (153 loc) • 5.77 kB
JavaScript
import { Actionable as e } from "../../actionable/Actionable.js";
import { Spinner as t } from "../../spinner/Spinner.js";
import { Tooltip as n } from "../../tooltip/Tooltip.js";
import { CircularIconButton as r } from "../../icon-button/CircularIconButton.js";
import { useFieldA11yContext as i } from "../../form-field/TanstackFormField.context.js";
import { useCapsLock as a } from "../hooks/use-caps-lock.js";
import { forwardRef as o, useEffect as s, useState as c } from "react";
import { uyTv as l } from "@payfit/unity-themes";
import { jsx as u, jsxs as d } from "react/jsx-runtime";
import { useIntl as f } from "react-intl";
import { Icon as p } from "@payfit/unity-icons";
import { Input as m } from "react-aria-components/Input";
//#region src/components/password-field/parts/PasswordInput.tsx
var h = l({
slots: {
base: "uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between",
input: "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full",
state: "uy:flex uy:gap-50 uy:items-center uy:shrink-0"
},
variants: {
isInvalid: { true: {
base: "uy:border-border-form-error uy:bg-surface-form-error",
inputWrapper: "uy:bg-surface-form-error",
input: "uy:bg-surface-form-error",
state: "uy:text-content-form-error"
} },
isReadOnly: { true: {
base: "uy:border-border-form-disabled uy:bg-surface-form-disabled uy:cursor-not-allowed",
inputWrapper: "uy:bg-surface-form-disabled uy:cursor-not-allowed",
input: "uy:bg-surface-form-disabled uy:text-content-form-readonly uy:cursor-not-allowed"
} },
isDisabled: { true: {
base: "uy:border-border-form-disabled uy:bg-surface-form-disabled uy:cursor-not-allowed",
inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled uy:cursor-not-allowed",
input: "uy:bg-surface-form-disabled uy:text-content-form-disabled uy:cursor-not-allowed"
} }
},
compoundVariants: [{
isInvalid: !1,
isDisabled: !1,
isReadOnly: !1,
className: {
base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
inputWrapper: "uy:bg-surface-form-enabled",
input: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
state: "uy:text-content-neutral-disabled"
}
}]
}), g = o(({ isInvalid: o, isLoading: l, isDisabled: g, isReadOnly: _, showCapsLockWarning: v = !0, autoComplete: y, onClearButtonPress: b, ...x }, S) => {
let C = f(), [w, T] = c(!1), [E, D] = c(!1), O = i(), k = a();
s(() => {
E && S && "current" in S && S.current && (S.current.focus(), D(!1));
}, [E, S]);
let { base: A, inputWrapper: j, input: M, state: N } = h({
isInvalid: !!o,
isReadOnly: !!_,
isDisabled: !!g
}), P = w ? "text" : "password", F = !(_ || g), I = x.value && !l && !_ && !g, L = y !== void 0, R = () => {
T((e) => !e), D(!0);
};
return delete x.isRequired, /* @__PURE__ */ u("div", {
className: A(),
children: /* @__PURE__ */ d("div", {
className: j(),
children: [/* @__PURE__ */ u(m, {
"data-dd-privacy": "mask",
...x,
ref: S,
id: x.id ?? O.inputId,
"aria-labelledby": O.labelId,
type: P,
autoComplete: L ? y : "off",
spellCheck: !1,
autoCapitalize: "off",
className: M(),
"aria-busy": l,
"aria-invalid": o,
readOnly: _,
disabled: g,
onFocus: (e) => {
x.onFocus?.(e);
},
onBlur: (e) => {
x.onBlur?.(e);
}
}), /* @__PURE__ */ d("div", {
className: N(),
children: [
l && /* @__PURE__ */ u(t, {
color: "primary",
size: "small",
label: C.formatMessage({
id: "unity:component:common:loading:label",
defaultMessage: "Loading..."
})
}),
v && k && /* @__PURE__ */ u("div", {
role: "status",
"aria-live": "polite",
children: /* @__PURE__ */ u(n, {
title: C.formatMessage({
id: "unity:component:password-field:caps-lock:tooltip",
defaultMessage: "Caps Lock is on"
}),
children: /* @__PURE__ */ u(e, { children: /* @__PURE__ */ u(p, {
src: "ArrowFatLineUpOutlined",
color: "content.neutral.low",
role: "presentation"
}) })
})
}),
o && /* @__PURE__ */ u(p, {
src: "WarningCircleOutlined",
color: "content.form.invalid",
alt: C.formatMessage({
id: "unity:component:form-field:form-input:error:alt",
defaultMessage: "Error"
})
}),
I && /* @__PURE__ */ u(r, {
title: C.formatMessage({
id: "unity:component:common:clear:title",
defaultMessage: "Clear"
}),
color: "content.neutral.low",
icon: "CloseOutlined",
onPress: () => {
b?.();
}
}),
F && /* @__PURE__ */ u(r, {
title: C.formatMessage({
id: w ? "unity:component:password-field:hide-password:title" : "unity:component:password-field:show-password:title",
defaultMessage: w ? "Hide password" : "Show password"
}),
"aria-label": C.formatMessage({
id: w ? "unity:component:password-field:hide-password:label" : "unity:component:password-field:show-password:label",
defaultMessage: w ? "Hide password" : "Show password"
}),
color: "content.neutral.low",
icon: w ? "EyeSlashOutlined" : "EyeOutlined",
onPress: R,
isDisabled: g
})
]
})]
})
});
});
g.displayName = "PasswordInput";
//#endregion
export { g as PasswordInput };