@payfit/unity-components
Version:
215 lines (214 loc) • 9.1 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import { CircularIconButton as t } from "../icon-button/CircularIconButton.js";
import { Search as n } from "../search/Search.js";
import { PhoneNumberItem as r } from "./parts/PhoneNumberItem.js";
import i from "./unknownFlag.js";
import { forwardRef as a, useImperativeHandle as o, useRef 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 { Group as f } from "react-aria-components/Group";
import { useIntl as p } from "react-intl";
import { Button as m } from "react-aria-components/Button";
import { Separator as h } from "react-aria-components/Separator";
import { ListBox as g } from "react-aria-components/ListBox";
import { Popover as _ } from "react-aria-components/Popover";
import { Input as v } from "react-aria-components/Input";
import { Autocomplete as y, useFilter as b } from "react-aria-components/Autocomplete";
import { Select as x } from "react-aria-components/Select";
import { ListLayout as S, Virtualizer as C } from "react-aria-components/Virtualizer";
import { FlagImage as w, defaultCountries as T, parseCountry as E, usePhoneInput as D } from "react-international-phone";
//#region src/components/phone-number/PhoneNumberInput.tsx
var O = l({ slots: {
base: [
"uy:group",
"uy:flex uy:w-full uy:border uy:border-border-form-enabled uy:bg-surface-form-enabled uy:border-solid uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2",
"uy:data-[active=\"true\"]:data-[hovered=\"true\"]:border-border-form-hover uy:data-[active=\"true\"]:data-[hovered=\"true\"]:bg-surface-form-hover uy:data-[active=\"true\"]:data-[hovered=\"true\"]:text-content-form-hover",
"uy:data-[active=\"true\"]:data-[pressed=\"true\"]:border-border-form-pressed uy:data-[active=\"true\"]:data-[pressed=\"true\"]:bg-surface-form-pressed uy:data-[active=\"true\"]:data-[pressed=\"true\"]:text-content-form-pressed",
"uy:data-[active=\"true\"]:border-border-form-active",
"uy:data-[focus-visible=\"true\"]:outline-none uy:data-[focus-visible=\"true\"]:ring-2 uy:data-[focus-visible=\"true\"]:ring-utility-focus-ring uy:data-[focus-visible=\"true\"]:ring-offset-2",
"uy:data-[invalid=\"true\"]:border-border-form-error uy:data-[invalid=\"true\"]:bg-surface-form-error uy:data-[invalid=\"true\"]:text-content-form-danger-enabled",
"uy:data-[disabled=\"true\"]:border-border-form-disabled uy:data-[disabled=\"true\"]:bg-surface-form-disabled uy:data-[disabled=\"true\"]:text-content-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed",
"uy:h-5.5 uy:rounded-100",
"uy:sm:h-500 uy:sm:rounded-75 "
],
prefix: [
"uy:border-r uy:border-solid uy:border-border-form-enabled uy:text-content-form-enabled uy:flex-grow-0 uy:pl-150 uy:pr-100 uy:group-data-[active=true]:border-border-form-active uy:cursor-pointer",
"uy:group-data-[invalid=\"true\"]:border-border-form-error",
"uy:group-data-[disabled=\"true\"]:border-border-form-disabled uy:group-data-[disabled=\"true\"]:text-content-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed",
"uy:py-125",
"uy:sm:py-100"
],
inputWrapper: [
"uy:border-border-form-enabled uy:bg-surface-form-enabled uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:px-150 uy:max-w-full uy:justify-between",
"uy:group-data-[invalid=\"true\"]:bg-surface-form-error",
"uy:group-data-[disabled=\"true\"]:bg-surface-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed",
"uy:py-125 uy:rounded-100",
"uy:sm:py-100 uy:sm:rounded-75"
],
input: [
"uy:text-content-form-enabled uy:bg-surface-form-enabled 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 uy:min-h-300",
"uy:group-data-[invalid=\"true\"]:bg-surface-form-error uy:group-data-[invalid=\"true\"]:text-content-danger-enabled",
"uy:group-data-[disabled=\"true\"]:bg-surface-form-disabled uy:group-data-[disabled=\"true\"]:text-content-form-disabled uy:data-[disabled=\"true\"]:cursor-not-allowed"
],
state: ["uy:flex uy:gap-50 uy:items-center uy:shrink-0"],
selectIcon: [""],
selectButton: ["uy:cursor-pointer uy:flex uy:gap-50 uy:items-center uy:outline-none", "uy:data-[disabled=\"true\"]:cursor-not-allowed"],
selectPopover: [
"uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral-enabled uy:shadow-300",
"uy:rounded-100",
"uy:sm:rounded-75"
],
selectListbox: ["uy:overflow-y-auto uy:overflow-x-hidden uy:max-h-[296px]"]
} }), k = a((a, l) => {
let k = p(), { onChange: A, value: j, defaultCountry: M = "unknown", onClearButtonPress: N, isInvalid: P = !1, isDisabled: F = !1, prefix: I = "+", "aria-label": L, defaultMask: R, charAfterDialCode: z, historySaveDebounceMS: B, disableCountryGuess: ee, forceDialCode: V, disableDialCodeAndPrefix: H, disableFormatting: U, searchInputAriaLabel: W, ...G } = a, [K, q] = c(!1), { contains: J } = b({ sensitivity: "base" }), Y = s(null);
o(l, () => Y.current, [Y]);
let { inputRef: X, inputValue: Z, handlePhoneValueChange: Q, country: $, setCountry: te, phone: ne } = D({
prefix: I,
defaultCountry: M,
value: j,
countries: [[
"",
"unknown",
"",
""
], ...T],
disableDialCodePrefill: !0,
defaultMask: R,
charAfterDialCode: z,
historySaveDebounceMS: B,
disableCountryGuess: ee,
forceDialCode: V,
disableDialCodeAndPrefix: H,
disableFormatting: U,
onChange: (e) => {
A?.($.iso2 === "unknown" ? "" : e.phone);
}
}), { base: re, prefix: ie, inputWrapper: ae, input: oe, selectPopover: se, selectListbox: ce, selectIcon: le, selectButton: ue, state: de } = O(), fe = Z.replace(ne, "").trim() !== "" && !F;
return /* @__PURE__ */ u("div", {
ref: Y,
children: /* @__PURE__ */ d(f, {
className: re(),
"aria-label": `${L}${j ? `, ${j}` : ""}`,
"aria-invalid": P,
"data-invalid": P,
"data-disabled": F,
"aria-disabled": F,
children: [/* @__PURE__ */ d(x, {
onOpenChange: (e) => {
q(e), e || setTimeout(() => {
X.current?.focus();
}, 0);
},
isDisabled: F,
value: $.iso2,
onChange: (e) => {
te(e);
},
className: ie(),
isInvalid: P,
children: [/* @__PURE__ */ d(m, {
"data-dd-privacy": "mask",
className: ue(),
"aria-label": k.formatMessage({
id: "unity:component:phone-number:country-selector:label",
defaultMessage: "Select country code, {country} {dialCode}"
}, {
country: $.name,
dialCode: $.dialCode
}),
children: [$.iso2 === "unknown" ? /* @__PURE__ */ u("img", {
"aria-hidden": "true",
src: i,
alt: "",
"data-dd-privacy": "mask",
className: "react-international-phone-flag-emoji",
width: 24,
height: 24
}) : /* @__PURE__ */ u(w, {
iso2: $.iso2,
alt: $.name,
size: 24,
"aria-hidden": "true",
"data-dd-privacy": "mask"
}), /* @__PURE__ */ u(e, {
className: le(),
"aria-hidden": "true",
src: K ? "CaretUpOutlined" : "CaretDownOutlined"
})]
}), /* @__PURE__ */ u(_, {
style: { "--trigger-width": `${Y.current?.offsetWidth}px` },
triggerRef: Y,
offset: 1,
containerPadding: 8,
className: se(),
children: /* @__PURE__ */ d(y, {
filter: J,
children: [
/* @__PURE__ */ u("div", {
className: "uy:m-100",
children: /* @__PURE__ */ u(n, {
label: W,
"data-dd-privacy": "mask"
})
}),
/* @__PURE__ */ u(h, { className: "uy:mx-100 uy:border-t uy:border-border-neutral uy:border-solid" }),
/* @__PURE__ */ u(C, {
layout: S,
layoutOptions: { padding: 8 },
children: /* @__PURE__ */ u(g, {
className: ce(),
items: T,
children: (e) => {
let t = E(e);
return /* @__PURE__ */ u(r, {
country: t,
id: t.iso2
}, t.iso2);
}
})
})
]
})
})]
}), /* @__PURE__ */ d("div", {
className: ae(),
children: [/* @__PURE__ */ u(v, {
ref: X,
...G,
className: oe(),
type: "tel",
onChange: Q,
value: Z,
"data-dd-privacy": "mask",
"aria-invalid": P,
disabled: F,
"aria-label": L
}), /* @__PURE__ */ d("div", {
className: de(),
children: [P && /* @__PURE__ */ u(e, {
src: "WarningCircleOutlined",
color: "content.form.invalid",
role: "img",
"aria-label": k.formatMessage({
id: "unity:component:form-field:form-input:error:alt",
defaultMessage: "Error"
})
}), fe && /* @__PURE__ */ u(t, {
title: k.formatMessage({
id: "unity:component:common:clear:title",
defaultMessage: "Clear"
}),
color: "content.neutral.low",
icon: "CloseOutlined",
onPress: () => {
N?.();
}
})]
})]
})]
})
});
});
k.displayName = "PhoneNumberInput";
//#endregion
export { k as PhoneNumberInput };