@adyen/adyen-platform-experience-web
Version:
154 lines (153 loc) • 4.45 kB
JavaScript
import { jsx as t } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { ARIA_ERROR_SUFFIX as Q } from "../../../core/Errors/constants.js";
import M from "classnames";
import { forwardRef as S } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
import { useCallback as n, useMemo as U } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { filterDisallowedCharacters as W } from "./utils.js";
/* empty css */
import { ButtonVariant as Z } from "../Button/types.js";
import { FieldError as H } from "./FieldError/FieldError.js";
import ee from "./Select/Select.js";
import { Fragment as ae } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
import { hasOwnProperty as te } from "../../../utils/struct/property.js";
function O({
onInput: f,
onKeyUp: o,
trimOnBlur: y,
onBlurHandler: h,
onBlur: _,
onFocusHandler: v,
errorMessage: I,
errorTestId: $,
iconBeforeSlot: d,
iconAfterSlot: u,
dropdown: a,
dropdownPosition: N = "start",
onDropdownInput: g,
onKeyDown: C,
onUpdateDropdown: b,
...i
}, x) {
const { classNameModifiers: q, isInvalid: r, isValid: A, readonly: s = !1, type: l, uniqueId: p, isCollatingErrors: c, disabled: k } = i;
te(i, "onChange") && console.error("Error: Form fields that rely on InputBase may not have an onChange property");
const w = n(
(e) => {
f?.(e);
},
[f]
), P = n(
(e) => {
o && o(e);
},
[o]
), j = n(
(e) => {
h?.(e), y && (e.target.value = e.target.value.trim()), _?.(e);
},
[_, h, y]
), B = n(
(e) => {
v?.(e);
},
[v]
), D = n(
(e) => {
const V = e.target?.value;
g?.(V), a && b?.({ ...a, value: V });
},
[a, g, b]
), K = M(
"adyen-pe-input",
[`adyen-pe-input--${l}`],
i.className,
{
"adyen-pe-input--invalid": r,
"adyen-pe-input--valid": A
},
q?.map((e) => `adyen-pe-input--${e}`)
), X = n(
(e) => {
W({ event: e, inputType: l, onValidInput: () => C?.(e) });
},
[l, C]
), {
classNameModifiers: ne,
uniqueId: se,
isInvalid: ie,
isValid: re,
isCollatingErrors: le,
errorTestId: oe,
autoFocus: de,
autofocus: ue,
...Y
} = i, z = d || u, m = !!a && a.items.length > 0, G = m && N === "start", J = m && N === "end", L = z || m, F = s || a?.readonly, E = /* @__PURE__ */ t(
"input",
{
id: p,
...Y,
type: l,
className: K,
readOnly: s,
"aria-describedby": c ? void 0 : `${p}${Q}`,
"aria-invalid": r,
onInput: w,
onBlurCapture: j,
onFocus: B,
onKeyDown: X,
onKeyUp: P,
disabled: k,
ref: x,
autoFocus: !1
}
), R = U(() => {
let e = ["input-field"];
return s && (e = [...e, "readonly"]), e;
}, [s]), T = n(
() => a ? /* @__PURE__ */ t(
ee,
{
name: a.name,
buttonVariant: Z.TERTIARY,
items: a.items,
selected: a.value,
onChange: D,
readonly: F,
filterable: a.filterable,
"aria-label": a["aria-label"],
classNameModifiers: R,
isCollatingErrors: c,
disableToggleFocusOnClose: !0
}
) : null,
[a, D, c, F, R]
);
return /* @__PURE__ */ t(ae, { children: [
L ? /* @__PURE__ */ t(
"div",
{
className: M("adyen-pe-input__container", {
"adyen-pe-input--invalid": r,
"adyen-pe-input__container--readonly": s
}),
children: [
G && /* @__PURE__ */ t("div", { role: "presentation", className: "adyen-pe-input__dropdown adyen-pe-input__dropdown--start", children: T() }),
d && /* @__PURE__ */ t("span", { className: "adyen-pe-input__slot-before", children: d }),
E,
u && /* @__PURE__ */ t("span", { className: "adyen-pe-input__slot-after", children: u }),
J && /* @__PURE__ */ t("div", { role: "presentation", className: "adyen-pe-input__dropdown adyen-pe-input__dropdown--end", children: T() })
]
}
) : E,
r && I && /* @__PURE__ */ t(H, { id: p, errorMessage: I, testId: $ })
] });
}
O.defaultProps = {
type: "text",
classNameModifiers: [],
onInput: () => {
}
};
const be = S(O);
export {
be as default
};