@authing/react18-ui-components 4.4.0-alpha.8 → 4.4.0

package/types/CompleteInfo/interface.d.ts

@@ -0,0 +1,100 @@
+import { AuthenticationClient, CommonMessage, User } from 'authing-js-sdk';
+import { IG2Config, IG2Events, IG2FCProps } from '../Type';
+export interface CompleteInfoConfig extends IG2Config {
+}
+export declare const getDefaultCompleteInfoConfig: () => CompleteInfoConfig;
+export interface CompleteInfoEvents extends IG2Events {
+    onRegisterInfoCompleted?: (user: User, udfs: {
+        key: any;
+        value: any;
+    }[], authClient: AuthenticationClient) => void;
+    onRegisterInfoCompletedError?: (error: CommonMessage, udfs: {
+        key: any;
+        value: any;
+    }[], authClient: AuthenticationClient) => void;
+}
+export interface GuardCompleteInfoProps extends IG2FCProps, CompleteInfoEvents {
+    config: Partial<CompleteInfoConfig>;
+}
+export interface GuardCompleteInfoViewProps extends GuardCompleteInfoProps {
+    config: CompleteInfoConfig;
+    initData: any;
+    onLogin?: any;
+}
+export type ExtendsFieldType = 'user' | 'internal';
+export interface ExtendsField {
+    type: ExtendsFieldType;
+    name: string;
+    label: string;
+    inputType: string;
+    required: boolean;
+    validateRules: any[];
+}
+export declare enum FormValidateRule {
+    NONE = "none",
+    EMAIL = "email",
+    PHONE = "phone",
+    IS_NUMBER = "isNumber",
+    REG_EXP = "regExp"
+}
+export interface CompleteInfoRule {
+    type: FormValidateRule;
+    content: string;
+    errorMessage?: string;
+}
+export interface CompleteInfoSelectOption {
+    value: string;
+    label: string;
+}
+export interface CompleteInfoMetaData {
+    type: CompleteInfoBaseControls | CompleteInfoExtendsControls;
+    label: string;
+    name: string;
+    required: boolean;
+    validateRules: CompleteInfoRule[];
+    options?: CompleteInfoSelectOption[];
+}
+export declare enum CompleteInfoBaseControls {
+    USERNAME = "username",
+    PHONE = "phone",
+    EMAIL = "email"
+}
+export declare enum CompleteInfoExtendsControls {
+    IMAGE = "image",
+    NUMBER = "number",
+    DATE = "date",
+    DATE_TIME = "datetime",
+    SELECT = "select",
+    DROPDOWN = "dropdown",
+    BOOLEAN = "boolean",
+    STRING = "string",
+    TEXT = "text",
+    GENDER = "gender",
+    COUNTRY = "country"
+}
+export interface CompleteInfoInitData {
+    skip: boolean;
+    metaData: CompleteInfoMetaData[];
+}
+export interface RegisterCompleteInfoInitData {
+    content: any;
+    businessRequestName: 'registerByEmail' | 'registerByPhoneCode' | 'registerByEmailCode';
+    onRegisterFailed: Function;
+    onRegisterSuccess: Function;
+}
+export interface RegisterCompletePasswordInitData extends RegisterCompleteInfoInitData {
+    isChangeComplete: boolean;
+}
+export interface CompleteInfoRequest {
+    fieldValues: {
+        name: string;
+        value: string;
+        code?: string;
+    }[];
+}
+export declare enum OmitCompleteInfo {
+    'registerByEmail' = "email",
+    'registerByPhoneCode' = "phone",
+    'registerByEmailCode' = "email",
+    'phone-password' = "phone"
+}

package/types/CompleteInfo/utils.d.ts

@@ -0,0 +1,18 @@
+import { User } from 'authing-js-sdk';
+import { CompleteInfoMetaData, CompleteInfoRequest, ExtendsField } from '../CompleteInfo/interface';
+import { ApplicationConfig } from '../Type/application';
+export declare const completeFieldsFilter: (user: User, field: ExtendsField) => boolean;
+export declare const extendsFieldsToMetaData: (extendsFields: import("../Type/application").ExtendsField[] | undefined, selectOptions: {
+    key: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+}[]) => CompleteInfoMetaData[];
+export declare const fieldValuesToRegisterProfile: (extendsFields: ApplicationConfig['extendsFields'], fieldValues?: CompleteInfoRequest['fieldValues']) => {
+    registerProfile: Record<string, any>;
+    udf: {
+        key: string;
+        value: string;
+    }[];
+};

package/types/CopyAbleText/index.d.ts

@@ -0,0 +1,5 @@
+import React, { FC } from 'react';
+import './style.less';
+export interface CopyTextProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const CopyAbleText: FC<CopyTextProps>;

package/types/DownloadAuthenticator/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './styles.less';
+export declare const GuardDownloadATView: React.FC;

package/types/DownloadAuthenticator/interface.d.ts

@@ -0,0 +1,12 @@
+import { IG2Config, IG2Events, IG2FCProps } from '../Type';
+export interface DownloadATConfig extends IG2Config {
+}
+export declare const getDefaultDownloadAuthenticatorConfig: () => DownloadATConfig;
+export interface DownloadATEvents extends IG2Events {
+}
+export interface GuardDownloadATProps extends IG2FCProps, DownloadATEvents {
+    config: Partial<DownloadATConfig>;
+}
+export interface GuardDownloadATViewProps extends GuardDownloadATProps {
+    config: DownloadATConfig;
+}

package/types/Error/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './styles.less';
+export interface ErrorProps {
+    error?: Error;
+}
+export declare const GuardErrorView: React.FC<ErrorProps>;

package/types/Error/interface.d.ts

@@ -0,0 +1,8 @@
+export interface ErrorInitData {
+    error?: Error;
+}
+export interface GuardErrorProps {
+    initData?: ErrorInitData;
+}
+export interface GuardErrorViewProps extends GuardErrorProps {
+}

package/types/ForgetPassword/InputPassword/index.d.ts

@@ -0,0 +1,3 @@
+import { InputRef, PasswordProps } from 'antd/lib/input';
+import React from 'react';
+export declare const InputPasswordForget: React.ForwardRefExoticComponent<PasswordProps & React.RefAttributes<InputRef>>;

package/types/ForgetPassword/core/inputIdentify.d.ts

@@ -0,0 +1,7 @@
+import { InputProps } from 'antd/lib/input';
+import React from 'react';
+import { VerifyLoginMethods } from '../../Type/application';
+export interface InputIdentifyProps extends InputProps {
+    methods: VerifyLoginMethods[];
+}
+export declare const InputIdentify: React.FC<InputIdentifyProps>;

package/types/ForgetPassword/core/resetPassword.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export declare enum InputMethodMap {
+    email = "email-code",
+    phone = "phone-code"
+}
+interface ResetPasswordProps {
+    publicConfig: any;
+    setControlShow: any;
+    setPolicyStrength: any;
+    setCustomPasswordStrength: any;
+    setPhoneOrEmailText: any;
+    setResetToken: React.Dispatch<React.SetStateAction<string>>;
+    setUserId: React.Dispatch<React.SetStateAction<string>>;
+}
+export declare const ResetPassword: (props: ResetPasswordProps) => JSX.Element;
+export {};

package/types/ForgetPassword/index.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GuardForgetPassword: React.FC;

package/types/ForgetPassword/interface.d.ts

@@ -0,0 +1,19 @@
+import { AuthenticationClient, CommonMessage, SceneType } from 'authing-js-sdk';
+import { EmailScene, IG2Config, IG2Events, IG2FCProps, IG2FCViewProps } from '../Type';
+export interface ForgetPasswordEvents extends IG2Events {
+    onEmailSend?: (authClient: AuthenticationClient, sence?: EmailScene) => void;
+    onEmailSendError?: (error?: CommonMessage, authClient?: AuthenticationClient, sence?: EmailScene) => void;
+    onPhoneSend?: (authClient: AuthenticationClient, sence?: SceneType) => void;
+    onPhoneSendError?: (error: CommonMessage, authClient: AuthenticationClient, sence?: SceneType) => void;
+    onPwdReset?: (authClient: AuthenticationClient) => void;
+    onPwdResetError?: (error: CommonMessage, authClient: AuthenticationClient) => void;
+}
+export interface ForgetPasswordConfig extends IG2Config {
+    goBack?: null | (() => void);
+}
+export interface ForgetPasswordProps extends IG2FCProps, ForgetPasswordEvents {
+    config: Partial<IG2Config>;
+}
+export interface ForgetPasswordViewProps extends ForgetPasswordProps, IG2FCViewProps {
+    config: IG2Config;
+}

package/types/Guard/Guard.d.ts

@@ -0,0 +1,10 @@
+import { GuardEvents } from './event';
+import { GuardAppendConfig, IG2FCProps } from '../Type';
+import { GuardLocalConfig } from './config';
+import 'moment/locale/zh-cn';
+import React from 'react';
+export interface GuardProps extends GuardEvents, IG2FCProps {
+    config?: Partial<GuardLocalConfig>;
+    appendConfig?: GuardAppendConfig;
+}
+export declare const Guard: React.MemoExoticComponent<(props: GuardProps) => JSX.Element>;

package/types/Guard/GuardModule/stateMachine.d.ts

@@ -0,0 +1,38 @@
+import { GuardLocalConfig } from '../config';
+import { GuardModuleType } from '../module';
+export interface ModuleState {
+    moduleName: GuardModuleType;
+    initData?: any;
+}
+export declare enum ActionType {
+    ChangeModule = "ChangeModule",
+    Back = "Back",
+    Init = "Init"
+}
+export interface StateMachineLog {
+    action: ActionType;
+    date: number;
+    dataSource: ModuleState;
+}
+export type ChangeModuleEvent = (nextModule: GuardModuleType, initData?: any) => void;
+export declare class GuardStateMachine {
+    private order;
+    private config;
+    private moduleStateHistory;
+    private changeModuleEvent;
+    private stateMachineLog;
+    constructor(changeModuleEvent: ChangeModuleEvent, initData: ModuleState);
+    uninstallPopstate: () => void;
+    globalWindow: () => Window | undefined;
+    next: (nextModule: GuardModuleType, initData: any) => void;
+    back: (initData?: any) => void;
+    end: () => void;
+    historyPush: (data: ModuleState, actionType?: ActionType) => void;
+    historyBack: (data: ModuleState) => void;
+    setConfig: (config: Partial<GuardLocalConfig>) => void;
+    isUseHistoryHijack: () => boolean;
+    onPopstate: () => void;
+}
+export declare const initGuardStateMachine: (changeMouleEvent: ChangeModuleEvent, initData: ModuleState) => GuardStateMachine;
+export declare const getGuardStateMachine: () => GuardStateMachine;
+export declare const useGuardStateMachine: () => GuardStateMachine;

package/types/Guard/authClient.d.ts

@@ -0,0 +1,14 @@
+import { AuthenticationClient } from 'authing-js-sdk';
+import { GuardLocalConfig } from './config';
+declare let authClient: AuthenticationClient;
+export declare const initGuardAuthClient: (config: GuardLocalConfig, appId: string, tenantId?: string) => AuthenticationClient;
+export declare const useInitGuardAuthClient: (props: {
+    config?: GuardLocalConfig | undefined;
+    appId?: string | undefined;
+    authClient?: AuthenticationClient | undefined;
+    setError?: any;
+    tenantId?: string | undefined;
+}) => AuthenticationClient | undefined;
+export declare const getGuardAuthClient: () => AuthenticationClient;
+export declare const useGuardAuthClient: () => AuthenticationClient;
+export {};

package/types/Guard/config.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { GuardModuleType } from '.';
+import { ForgetPasswordConfig } from '../ForgetPassword/interface';
+import { LoginConfig } from '../Login/interface';
+import { RegisterConfig } from '../Register/interface';
+export interface GuardLocalConfig extends RegisterConfig, LoginConfig, ForgetPasswordConfig {
+    isSSO?: boolean;
+    defaultScenes?: GuardModuleType;
+    defaultInitData?: any;
+    showLoading?: boolean;
+    loadingComponent?: ReactNode;
+    /**
+     * @description 是否调用 eventsMapping 中的事件
+     */
+    openEventsMapping?: boolean;
+}
+export declare const getDefaultGuardLocalConfig: () => GuardLocalConfig;

package/types/Guard/core/hooks/useAgreements.d.ts

@@ -0,0 +1,14 @@
+import { Agreement } from '../../../Type';
+interface Options {
+    agreements: Agreement[];
+    checkedAgreements: (string | number)[];
+    checkAllAgreements: () => void;
+    unCheckAllAgreements: () => void;
+}
+export declare function useAgreements(options: Options): {
+    agreements: Agreement[];
+    checkedAgreements: (string | number)[];
+    checkAllAgreements: () => void;
+    unCheckAllAgreements: () => void;
+};
+export {};

package/types/Guard/core/hooks/useGuardView.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Options {
+    changeTab?: React.Dispatch<any>;
+    currentTab?: string;
+}
+export declare function useGuardView(options?: Options): void;
+export {};

package/types/Guard/core/hooks/useMultipleAccounts.d.ts

@@ -0,0 +1,324 @@
+/**
+ * 整体的思路：
+ * 在所有登录方式中，当进行登录时保存登录方式（FE侧自定义）
+ * 之后在登录成功（onLogin）中，触发store的方法保存用户信息以及对应的登录方式进入localStorage。
+ * 当用户再次打开页面时，拿出数据进行对比。（主要对比 LoginWay ），TODO: 这里的代码主要显得乱的原因是因为枚举的不正当使用。（主要要和Server端进行互相映射，后续维护时可优化）
+ *
+ * 核心思路：登录成功时，保存的FE侧自定义 LoginWay
+ * 再次打开页面时，初始化时先根据 FE 自定义的 LoginWay 跳转到不同的 tab 下（way）下使用 account 进行回填。TODO: 这里也可优化，应该在登录成功时候就进行 LoginWay 的格式化，而非转来转去。（但是这样无法直观的体现是哪种方式进行登录）
+ */
+import { SelectOptions } from '../../../Login/multipleAccounts/panel';
+export declare const QR_CODE_WAY: LoginWay[];
+/**
+ * 登录时所有支持的登录列表(前端定义列表)
+ * 这里稍微有点乱 因为Login中的登录方式和这里的不匹配，暂时放在了一起
+ */
+export type LoginWay = 'email' | 'phone' | 'password' | 'phone-code' | 'email-code' | 'social' | 'wechat-miniprogram-qrcode' | 'wechatmp-qrcode' | 'app-qrcode' | 'ad' | 'ldap' | 'ldap-password' | 'ldap-email' | 'ldap-phone' | 'authing-otp-push';
+/**
+ * when： 多账号页面跳转进入登录页面
+ * 携带的回填数据信息
+ */
+export interface BackFillMultipleState extends Omit<User, 'id' | 'name' | 'nickname' | 'username' | 'phone' | 'email' | 'photo' | '_updateTime'> {
+    /**
+     * 回填的账号名称 邮箱/用户名/手机
+     */
+    account: string;
+}
+/**
+ * Store instance
+ */
+export type StoreInstance = ReturnType<MultipleAccount['getStore']>;
+/**
+ * 当前 userId 对应的类型
+ */
+export interface CurrentStore {
+    [id: string]: User;
+}
+export interface User {
+    /**
+     * userId
+     */
+    id: string;
+    /**
+     * Tab 栏状态
+     */
+    tab: 'input' | 'qrcode';
+    /**
+     * 登录方式
+     */
+    way: LoginWay;
+    /**
+     * 姓名
+     */
+    name?: string | null;
+    /**
+     * 昵称
+     */
+    nickname?: string | null;
+    /**
+     * 用户名
+     */
+    username?: string | null;
+    /**
+     * 手机号
+     */
+    phone?: string | null;
+    /**
+     * 邮箱
+     */
+    email?: string | null;
+    /**
+     * 头像
+     */
+    photo?: string | null;
+    /**
+     * qrCodeId 对应的ID
+     */
+    qrCodeId?: string;
+    /**
+     * 国际化短信区号
+     */
+    phoneCountryCode?: string;
+    /**
+     * 国际化短信选择框回填
+     */
+    areaCode?: string;
+    /**
+     * 登录时间
+     */
+    _updateTime?: string;
+}
+declare class MultipleAccount {
+    /**
+     * 原始的登录账号
+     */
+    private originAccount;
+    private originWay;
+    /**
+     * 原始的 localStore 值
+     */
+    private originStore;
+    /**
+     * 当前 AppId Store
+     */
+    private currentStore;
+    /**
+     * 单账号直接回填
+     */
+    private firstBackFillData?;
+    /**
+     * server 返回支持的登录方式
+     */
+    private serverSideLoginMethods;
+    /**
+     * 是否显示多账号登录页面
+     * true 存在
+     */
+    private memberState;
+    /**
+     * 二维码登录时的ID
+     */
+    private qrCodeId?;
+    /**
+     * 国际化短信前缀 区号
+     */
+    private phoneCountryCode?;
+    /**
+     * 国际化短信前缀 选中地区编号
+     */
+    private areaCode?;
+    private tabStatus?;
+    /**
+     * 当前登录二级状态
+     */
+    private loginWay?;
+    private appId;
+    /**
+     * 是否开启国际化短信
+     */
+    private isInternationSms?;
+    constructor();
+    /**
+     * 页面首次加载时初始化 Store
+     * 从 LocalStore 中拿值 放到这里来
+     */
+    private initStore;
+    /**
+     * 初始化记住账号相关信息
+     * @param normalCount
+     * @returns
+     */
+    private initMemberState;
+    /**
+     * 获取当前ID下有效账号个数
+     * @returns qrCount 有效的二维码登录个数 normalCount 有效的账号登录方式
+     */
+    private memberStateCount;
+    /**
+     * 初始化第一次的数据 TODO: 逻辑有点脏 待整理
+     */
+    private initBackfillData;
+    /**
+     * 根据前端存储的登录方式返回后端映射方式
+     * @param front
+     */
+    private getServerLoginMethodByFront;
+    /**
+     * 当前 Store  DONE
+     */
+    private getCurrentStore;
+    /**
+     * 国际化短信过滤
+     * true 表示通过 需要保留
+     * false 表示不通过 需要过滤
+     */
+    private validateInternationSms;
+    /**
+     * 校验有效的登录方式账号
+     * @param user
+     * @param serverSideLoginMethods
+     * @returns
+     */
+    private validateMethod;
+    /**
+     *
+     * @param tab 一级Tab状态
+     * @param way 二级Tab状态
+     * @param id 二维码登录时 记录对应的二维码 ID
+     */
+    private setLoginWay;
+    /**
+     * 设置/更新 store 内的用户信息
+     */
+    private setUserInfo;
+    /**
+     * 持久化保存
+     */
+    private saveStore;
+    /**
+     * 根据登录的 account 判断本次登录的方式
+     * @param account 登录输入的账号
+     * @param param1 登录成功返回的相关信息 用户名/手机号/邮箱
+     * @returns
+     */
+    private setLoginWayByHttpData;
+    /**
+     * 根据登录的 account 判断本次LDAP登录方式
+     * @param account 登录输入的账号
+     * @param param1 登录成功返回的相关信息 用户名/手机号/邮箱
+     * @returns
+     */
+    private setLoginWayByLDAPData;
+    /**
+     * 根据用户 ID 删除 localStorage 中当前用户 ID
+     */
+    private delUserById;
+    /**
+     * 获得多账号登录页面的所有用户列表
+     * @param excludeWays
+     */
+    private getMemoUser;
+    /**
+     * 根据 id 获得当前已登录的用户信息
+     * @param userId
+     * @returns User / undefined
+     */
+    private getMemoSingleUser;
+    /**
+     * 该方法仅仅需要回填账号的登录方式，其他都不计入
+     * 当用户名/手机号/邮箱/AD/LDAP 相同时，根据登录顺序匹配不同的账号
+     * 根据记住的用户登录方式获取对应的登录账户名
+     * @param way
+     * @param user
+     * @returns
+     */
+    private getAccountByWay;
+    private _mappingUser;
+    /**
+     * 外部暴露方法
+     */
+    getStore: () => {
+        initStore: (appId: string, options: {
+            serverSideLoginMethods: LoginWay[];
+            isInternationSms: boolean;
+        }) => void;
+        setLoginWay: (tab: 'input' | 'qrcode', way: LoginWay, id?: string, internation?: {
+            phoneCountryCode: string;
+            areaCode: string;
+        }) => void;
+        setUserInfo: (user: Omit<User & {
+            id: string;
+            loginAccount?: string | undefined;
+            usertype?: string | undefined;
+        }, "tab" | "way" | "phoneCountryCode">) => void;
+        setLoginWayByHttpData: (account: string, data: {
+            username?: string | undefined;
+            phone?: string | undefined;
+            email?: string | undefined;
+        }) => void;
+        setLoginWayByLDAPData: (account: string, data: {
+            name?: string | undefined;
+            phone?: string | undefined;
+            email?: string | undefined;
+        }) => void;
+        getMemoUser: (excludeWays?: LoginWay[]) => SelectOptions[];
+        getMemoSingleUser: (id: string) => {
+            way: LoginWay;
+            account: string;
+        } | undefined;
+        delUserById: (id: string) => string;
+        getMemberState: () => boolean;
+        getFirstBackFillData: () => BackFillMultipleState | undefined;
+        getOriginAccount: () => string;
+        getOriginWay: () => string;
+    };
+}
+/**
+ * MultipleAccounts 相关 Hook
+ * Finally Config 类型过滤
+ */
+declare const useMultipleAccounts: ({ appId, finallyConfig, }: {
+    appId?: string | undefined;
+    finallyConfig?: any;
+}) => {
+    instance: {
+        initStore: (appId: string, options: {
+            serverSideLoginMethods: LoginWay[];
+            isInternationSms: boolean;
+        }) => void;
+        setLoginWay: (tab: 'input' | 'qrcode', way: LoginWay, id?: string, internation?: {
+            phoneCountryCode: string;
+            areaCode: string;
+        }) => void;
+        setUserInfo: (user: Omit<User & {
+            id: string;
+            loginAccount?: string | undefined;
+            usertype?: string | undefined;
+        }, "tab" | "way" | "phoneCountryCode">) => void;
+        setLoginWayByHttpData: (account: string, data: {
+            username?: string | undefined;
+            phone?: string | undefined;
+            email?: string | undefined;
+        }) => void;
+        setLoginWayByLDAPData: (account: string, data: {
+            name?: string | undefined;
+            phone?: string | undefined;
+            email?: string | undefined;
+        }) => void;
+        getMemoUser: (excludeWays?: LoginWay[]) => SelectOptions[];
+        getMemoSingleUser: (id: string) => {
+            way: LoginWay;
+            account: string;
+        } | undefined;
+        delUserById: (id: string) => string;
+        getMemberState: () => boolean;
+        getFirstBackFillData: () => BackFillMultipleState | undefined;
+        getOriginAccount: () => string;
+        getOriginWay: () => string;
+    } | undefined;
+    isMultipleAccount: boolean;
+    referMultipleState: (type: 'login' | 'multiple', data?: BackFillMultipleState) => void;
+    multipleAccountData: BackFillMultipleState | undefined;
+    clearBackFillData: () => void;
+};
+export default useMultipleAccounts;

package/types/Guard/core/index.d.ts

@@ -0,0 +1,7 @@
+import { GuardProps } from '..';
+import { ModuleState } from '../GuardModule/stateMachine';
+export interface GuardCoreProps {
+    guardProps: GuardProps;
+    initState: ModuleState;
+}
+export declare const GuardCore: (props: GuardCoreProps) => JSX.Element;

package/types/Guard/core/renderContext.d.ts

@@ -0,0 +1,8 @@
+import { GuardProps } from '..';
+import React, { ReactNode } from 'react';
+import { ModuleState } from '../GuardModule/stateMachine';
+export declare const RenderContext: React.FC<{
+    guardProps: GuardProps;
+    initState: ModuleState;
+    children: ReactNode;
+}>;

package/types/Guard/core/renderModule.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { GuardProps } from '..';
+import '../styles.less';
+export declare enum LangMAP {
+    zhCn = "zh-CN",
+    enUs = "en-US",
+    jaJp = "ja-JP"
+}
+export declare const RenderModule: React.FC<{
+    guardProps: GuardProps;
+}>;