@getpara/react-sdk 2.0.0-alpha.32 → 2.0.0-alpha.34

package/dist/modal/components/AuthInput/AuthInput.js

@@ -1,277 +0,0 @@
-"use client";
-import {
-  __async
-} from "../../../chunk-MMUBH76A.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  CpslButton,
-  CpslIcon,
-  CpslInput,
-  CpslSelect,
-  CpslSelectItem,
-  CpslSpinner,
-  CpslText
-} from "@getpara/react-components";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { safeStyled } from "@getpara/react-common";
-import countryCodes from "../../utils/countryCodes.js";
-import { MOBILE_SIZE } from "../../constants/constants.js";
-import { useDropdownPosition } from "./hooks/useDropdownPosition.js";
-import { defaultPhoneMask, phoneMasks } from "./phoneMasks.js";
-import { extractAuthInfo } from "@getpara/user-management-client";
-import parsePhoneNumberFromString from "libphonenumber-js";
-import { isCcMatch, validateInput } from "../../utils/authInputHelpers.js";
-const DEFAULT_COUNTRY = { label: "United States", value: "+1", selectedLabel: "US", icon: "US" };
-const AuthInput = ({
-  defaultAuth,
-  disableEmailLogin,
-  disablePhoneLogin,
-  onSubmit: _onSubmit,
-  isSubmitting,
-  disableSubmitButton,
-  children: Children,
-  error: propsError,
-  sticky = false
-}) => {
-  var _a, _b, _c;
-  const inputRef = useRef(null);
-  const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
-  const [authInfo, storedNationalNumber, storedCountryCode] = useMemo(() => {
-    if (!defaultAuth) {
-      return [void 0, void 0, void 0];
-    }
-    const authInfo2 = extractAuthInfo(defaultAuth);
-    if (!authInfo2 || (authInfo2 == null ? void 0 : authInfo2.authType) !== "phone") {
-      return [authInfo2, void 0, void 0];
-    }
-    const parsed = parsePhoneNumberFromString(authInfo2.identifier);
-    return [authInfo2, parsed == null ? void 0 : parsed.nationalNumber, parsed == null ? void 0 : parsed.countryCallingCode];
-  }, [defaultAuth]);
-  const [countryCode, setCountryCode] = useState(storedCountryCode != null ? storedCountryCode : "+1");
-  const [identifier, setIdentifier] = useState(
-    (() => {
-      if (!(authInfo == null ? void 0 : authInfo.authType) || ["telegram", "farcaster", "externalWallet"].includes(authInfo == null ? void 0 : authInfo.authType)) {
-        return "";
-      }
-      if (authInfo.authType !== "phone") {
-        return authInfo.identifier;
-      }
-      return storedNationalNumber != null ? storedNationalNumber : "";
-    })()
-  );
-  const [identifierType, setIdentifierType] = useState(
-    authInfo && (authInfo.authType === "email" || authInfo.authType === "phone") ? authInfo.authType : void 0
-  );
-  const [matchedCountryCode, setMatchedCountryCode] = useState(
-    (_a = countryCodes.find((option) => isCcMatch(countryCode, option))) != null ? _a : DEFAULT_COUNTRY
-  );
-  const [error, setError] = useState(propsError || void 0);
-  const [isPending, setIsPending] = useState(isSubmitting || false);
-  const [search, setSearch] = useState("");
-  const setCountryCodes = (countyCodeInput) => {
-    setCountryCode(countyCodeInput.value);
-    setMatchedCountryCode(countyCodeInput);
-  };
-  const isEmail = identifierType === "email";
-  const isPhone = identifierType === "phone";
-  const isUnknown = !identifierType;
-  const filteredCountryCodes = search ? countryCodes.filter(
-    (cc) => cc.selectedLabel.toLowerCase().includes(search.toLowerCase()) || cc.label.toLowerCase().includes(search.toLowerCase()) || cc.value.toLowerCase().includes(search.toLowerCase())
-  ) : countryCodes;
-  const handleSearchInput = (ev) => {
-    setSearch(ev.detail);
-  };
-  const handleIdentifierInput = (ev) => {
-    var _a2;
-    if (!sticky) {
-      setError(void 0);
-    }
-    const newIdentifier = (_a2 = ev.detail.value) != null ? _a2 : "";
-    let isNewPhone = false, isNewEmail = false;
-    if (!disablePhoneLogin) {
-      const countryCodeInputMatch = countryCodes.find((option) => isCcMatch(newIdentifier, option));
-      if (countryCodeInputMatch) {
-        setCountryCodes(countryCodeInputMatch);
-        setIdentifierType("phone");
-        setIdentifier("");
-        return;
-      }
-      isNewPhone = !isEmail && isPhone ? /\d+$/.test(newIdentifier) : /\d\d\d+$/.test(newIdentifier);
-    }
-    if (!disableEmailLogin) {
-      isNewEmail = /\D.*$/.test(newIdentifier);
-    }
-    setIdentifierType(isNewEmail ? "email" : isNewPhone ? "phone" : void 0);
-    setIdentifier(newIdentifier);
-  };
-  const handleCountryCodeInput = (ev) => {
-    const matchedCountryCode2 = countryCodes.find((code) => code.selectedLabel === ev.detail);
-    if (matchedCountryCode2) {
-      setCountryCodes(matchedCountryCode2);
-    }
-  };
-  const onSubmit = () => __async(void 0, null, function* () {
-    setError(void 0);
-    try {
-      const auth = validateInput(identifier, countryCode, identifierType);
-      _onSubmit(auth);
-    } catch (err) {
-      setError(err.message);
-    }
-  });
-  useEffect(() => {
-    setIsPending(isSubmitting);
-  }, [isSubmitting]);
-  useEffect(() => {
-    if (propsError === null || propsError === void 0 && !sticky) {
-      setError(void 0);
-    }
-    if (propsError) {
-      setError(propsError);
-      setIsPending(false);
-    }
-  }, [propsError, sticky]);
-  useEffect(() => {
-    if (!sticky || isSubmitting) {
-      setIsPending(isSubmitting);
-    }
-  }, [error]);
-  if (disableEmailLogin && disablePhoneLogin) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      onSubmit: (e) => __async(void 0, null, function* () {
-        e.preventDefault();
-        onSubmit();
-      }),
-      style: { width: "100%" },
-      children: [
-        /* @__PURE__ */ jsxs(
-          StyledInput,
-          {
-            ref: inputRef,
-            id: "authInput",
-            placeholder: isEmail || disablePhoneLogin ? "Enter email" : isPhone || disableEmailLogin ? "Enter phone" : "Enter email or phone",
-            onCpslInput: handleIdentifierInput,
-            value: identifier,
-            errorText: error,
-            autofocus: true,
-            inputMode: "email",
-            onKeyDown: (e) => __async(void 0, null, function* () {
-              return e.key === "Enter" && onSubmit();
-            }),
-            contrastText: true,
-            isPhone,
-            mask: identifierType === "phone" ? (_c = phoneMasks[(_b = matchedCountryCode.selectedLabel) != null ? _b : ""]) != null ? _c : defaultPhoneMask : void 0,
-            enterkeyhint: "go",
-            noAutoDisable: true,
-            disabled: isPending,
-            "data-testid": "auth-input",
-            children: [
-              /* @__PURE__ */ jsxs(IconContainer, { slot: "start", children: [
-                !disableEmailLogin && (isUnknown || isEmail) && /* @__PURE__ */ jsx(CpslIcon, { "aria-label": "email", icon: "mail" }),
-                !disablePhoneLogin && isUnknown && /* @__PURE__ */ jsx(CpslIcon, { "aria-label": "phone", icon: "phone" }),
-                isPhone && /* @__PURE__ */ jsxs(
-                  CountryCodeSelect,
-                  {
-                    selectedValue: matchedCountryCode.selectedLabel,
-                    onCpslSelectValueChange: handleCountryCodeInput,
-                    showFormattedSelectedItem: true,
-                    autoWidth: true,
-                    dropdownMaxHeight,
-                    anchorElId: "authInput",
-                    $width: dropdownWidth != null ? dropdownWidth : 0,
-                    showSearch: true,
-                    searchPlaceholder: "Search Countries",
-                    onCpslSearchChange: handleSearchInput,
-                    "data-testid": "country-code-select",
-                    children: [
-                      matchedCountryCode && /* @__PURE__ */ jsxs(SelectedItem, { slot: "selected-item", children: [
-                        /* @__PURE__ */ jsx(CpslText, { children: matchedCountryCode.selectedLabel }),
-                        /* @__PURE__ */ jsx(CpslText, { children: matchedCountryCode.value })
-                      ] }),
-                      filteredCountryCodes.map((cc) => /* @__PURE__ */ jsxs(StyledSelectItem, { slot: "items", value: cc.selectedLabel, children: [
-                        /* @__PURE__ */ jsx(CpslText, { children: cc.label }),
-                        /* @__PURE__ */ jsx(CpslText, { children: cc.value })
-                      ] }, cc.selectedLabel))
-                    ]
-                  }
-                )
-              ] }),
-              identifier && !disableSubmitButton && /* @__PURE__ */ jsx(CpslButton, { slot: "end", size: "small", fullWidth: true, disabled: isPending, onClick: onSubmit, children: isPending ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsx(CpslIcon, { icon: "arrowNarrow" }) })
-            ]
-          },
-          "email"
-        ),
-        Children && /* @__PURE__ */ jsx(ChildContainer, { children: /* @__PURE__ */ jsx(Children, { onSubmit, isPending, isSubmitting: isPending }) })
-      ]
-    }
-  );
-};
-const IconContainer = safeStyled.div`
-  height: 100%;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-right: 12px;
-  border-right: 1px solid var(--cpsl-color-background-16);
-
-  & cpsl-icon {
-    --icon-color: var(--cpsl-color-contrast);
-  }
-`;
-const CountryCodeSelect = safeStyled(CpslSelect)`
-  --container-height: 100%;
-  --container-padding-start: 0px;
-  --container-padding-end: 0px;
-  --container-border-width: 0px;
-  --container-gap: 4px;
-  --container-background-color: transparent;
-  --container-box-shadow: none;
-
-  &::part(dropdown) {
-    width: ${({ $width }) => `${$width - 2}px`};
-  }
-
-  &::part(popover) {
-    @media (max-width: ${MOBILE_SIZE}px) {
-      top: unset !important;
-      bottom: 16px;
-    }
-
-    cpsl-auth-modal.force-mobile-media & {
-      top: unset !important;
-      bottom: 16px;
-    }
-  }
-`;
-const StyledSelectItem = safeStyled(CpslSelectItem)`
-  &::part(inner-container) {
-    justify-content: space-between;
-  }
-`;
-const SelectedItem = safeStyled.div`
-  display: flex;
-  gap: 4px;
-  align-items: center;
-`;
-const StyledInput = safeStyled(CpslInput)`
-  --container-background-color: var(--cpsl-color-background-8);
-  --input-background-color: var(--cpsl-color-background-8);
-  --container-padding-end: 8px;
-  width: 100%;
-`;
-const ChildContainer = safeStyled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  margin-top: 24px;
-  width: 100%;
-`;
-export {
-  AuthInput
-};

package/dist/modal/components/AuthInput/hooks/useDropdownPosition.d.ts

@@ -1,7 +0,0 @@
-import { MutableRefObject } from 'react';
-export declare const useDropdownPosition: (inputRef: MutableRefObject<HTMLCpslInputElement | HTMLDivElement | null>) => {
-    dropdownMaxHeight: number | undefined;
-    dropdownWidth: number | undefined;
-    mobileAnchor: number | undefined;
-    resize: () => void;
-};

package/dist/modal/components/AuthInput/hooks/useDropdownPosition.js

@@ -1,33 +0,0 @@
-"use client";
-import "../../../../chunk-MMUBH76A.js";
-import { useEffect, useState } from "react";
-const useDropdownPosition = (inputRef) => {
-  const [dropdownMaxHeight, setDropdownMaxHeight] = useState();
-  const [dropdownWidth, setDropdownWidth] = useState();
-  const [mobileAnchor, setMobileAnchor] = useState();
-  const resize = () => {
-    var _a, _b, _c, _d;
-    if (typeof window !== "undefined") {
-      const newMaxHeight = Math.max(
-        window.innerHeight - ((_b = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.getBoundingClientRect().bottom) != null ? _b : 0) - 20,
-        window.innerHeight * 0.25
-      );
-      setDropdownMaxHeight(newMaxHeight);
-      setDropdownWidth((_c = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _c.getBoundingClientRect().width);
-      setMobileAnchor((_d = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _d.getBoundingClientRect().height);
-    }
-  };
-  if (inputRef.current && !dropdownMaxHeight) {
-    resize();
-  }
-  useEffect(() => {
-    typeof window !== "undefined" && window.addEventListener("resize", resize);
-    return () => {
-      typeof window !== "undefined" && window.removeEventListener("resize", resize);
-    };
-  }, []);
-  return { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize };
-};
-export {
-  useDropdownPosition
-};

package/dist/modal/components/AuthInput/phoneMasks.d.ts

@@ -1,247 +0,0 @@
-export declare const defaultPhoneMask = "#################";
-export declare const phoneMasks: {
-    AF: string;
-    AX: string;
-    AL: string;
-    DZ: string;
-    AS: string;
-    AD: string;
-    AO: string;
-    AI: string;
-    AG: string;
-    AR: string;
-    AM: string;
-    AW: string;
-    AU: string;
-    AT: string;
-    AZ: string;
-    BS: string;
-    BH: string;
-    BD: string;
-    BB: string;
-    BY: string;
-    BE: string;
-    BZ: string;
-    BJ: string;
-    BM: string;
-    BT: string;
-    BO: string;
-    BA: string;
-    BW: string;
-    BR: string;
-    IO: string;
-    BN: string;
-    BG: string;
-    BF: string;
-    BI: string;
-    KH: string;
-    CM: string;
-    CA: string;
-    CV: string;
-    KY: string;
-    CF: string;
-    TD: string;
-    CL: string;
-    CN: string;
-    CX: string;
-    CC: string;
-    CO: string;
-    KM: string;
-    CG: string;
-    CK: string;
-    CR: string;
-    HR: string;
-    CU: string;
-    CY: string;
-    CZ: string;
-    CD: string;
-    DK: string;
-    DJ: string;
-    DM: string;
-    DO: string;
-    EC: string;
-    EG: string;
-    SV: string;
-    GQ: string;
-    ER: string;
-    EE: string;
-    SZ: string;
-    ET: string;
-    FK: string;
-    FO: string;
-    FJ: string;
-    FI: string;
-    FR: string;
-    GF: string;
-    PF: string;
-    GA: string;
-    GM: string;
-    GE: string;
-    DE: string;
-    GH: string;
-    GI: string;
-    GR: string;
-    GL: string;
-    GD: string;
-    GP: string;
-    GU: string;
-    GT: string;
-    GG: string;
-    GN: string;
-    GW: string;
-    GY: string;
-    HT: string;
-    VA: string;
-    HN: string;
-    HK: string;
-    HU: string;
-    IS: string;
-    IN: string;
-    ID: string;
-    IR: string;
-    IQ: string;
-    IE: string;
-    IM: string;
-    IL: string;
-    IT: string;
-    CI: string;
-    JM: string;
-    JP: string;
-    JE: string;
-    JO: string;
-    KZ: string;
-    KE: string;
-    KI: string;
-    KP: string;
-    KR: string;
-    XK: string;
-    KW: string;
-    KG: string;
-    LA: string;
-    LV: string;
-    LB: string;
-    LS: string;
-    LR: string;
-    LY: string;
-    LI: string;
-    LT: string;
-    LU: string;
-    MO: string;
-    MG: string;
-    MW: string;
-    MY: string;
-    MV: string;
-    ML: string;
-    MT: string;
-    MH: string;
-    MQ: string;
-    MR: string;
-    MU: string;
-    YT: string;
-    MX: string;
-    FM: string;
-    MD: string;
-    MC: string;
-    MN: string;
-    ME: string;
-    MS: string;
-    MA: string;
-    MZ: string;
-    MM: string;
-    NA: string;
-    NR: string;
-    NP: string;
-    NL: string;
-    NC: string;
-    NZ: string;
-    NI: string;
-    NE: string;
-    NG: string;
-    NU: string;
-    NF: string;
-    MK: string;
-    MP: string;
-    NO: string;
-    OM: string;
-    PK: string;
-    PW: string;
-    PS: string;
-    PA: string;
-    PG: string;
-    PY: string;
-    PE: string;
-    PH: string;
-    PN: string;
-    PL: string;
-    PT: string;
-    PR: string;
-    QA: string;
-    RE: string;
-    RO: string;
-    RU: string;
-    RW: string;
-    BL: string;
-    SH: string;
-    KN: string;
-    LC: string;
-    MF: string;
-    PM: string;
-    VC: string;
-    WS: string;
-    SM: string;
-    ST: string;
-    SA: string;
-    SN: string;
-    RS: string;
-    SC: string;
-    SL: string;
-    SG: string;
-    SX: string;
-    SK: string;
-    SI: string;
-    SB: string;
-    SO: string;
-    ZA: string;
-    GS: string;
-    SS: string;
-    ES: string;
-    LK: string;
-    SD: string;
-    SR: string;
-    SJ: string;
-    SE: string;
-    CH: string;
-    SY: string;
-    TW: string;
-    TJ: string;
-    TZ: string;
-    TH: string;
-    TL: string;
-    TG: string;
-    TK: string;
-    TO: string;
-    TT: string;
-    TN: string;
-    TR: string;
-    TM: string;
-    TC: string;
-    TV: string;
-    UG: string;
-    UA: string;
-    AE: string;
-    GB: string;
-    US: string;
-    UM: string;
-    UY: string;
-    UZ: string;
-    VU: string;
-    VE: string;
-    VN: string;
-    VG: string;
-    VI: string;
-    WF: string;
-    EH: string;
-    YE: string;
-    ZM: string;
-    ZW: string;
-};