@mpxjs/webpack-plugin 2.10.6-beta.7 → 2.10.6-beta.8

package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx

@@ -1,9 +1,10 @@
 import React, { useContext, useEffect } from 'react';
 import { Keyboard, View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import { getWindowInfo } from '@mpxjs/api-proxy';
 import { KeyboardAvoidContext } from './context';
 import { isIOS } from './utils';
-const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
+const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigation }) => {
     const duration = isIOS ? 250 : 300;
     const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad);
     const offset = useSharedValue(0);
@@ -15,7 +16,17 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     }));
     const resetKeyboard = () => {
         if (keyboardAvoid?.current) {
+            const inputRef = keyboardAvoid.current.ref?.current;
+            if (inputRef && inputRef.isFocused()) {
+                // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
+                inputRef.blur();
+            }
             keyboardAvoid.current = null;
+            navigation.setPageConfig({
+                animatedNavStyle: {
+                    top: withTiming(0, { duration: 100, easing: Easing.in(Easing.bezierFn(0.51, 1.18, 0.97, 0.94)) })
+                }
+            });
         }
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
@@ -33,21 +44,25 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                     if (!keyboardAvoid?.current)
                         return;
                     const { endCoordinates } = evt;
-                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
-                    setTimeout(() => {
-                        ref?.current?.measure((x, y, width, height, pageX, pageY) => {
-                            const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
-                            const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
-                            const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
-                            const value = aboveOffset > 0 ? belowValue : aboveValue;
-                            offset.value = withTiming(value, { duration, easing }, (finished) => {
-                                if (finished) {
-                                    // Set flexBasic after animation to trigger re-layout and reset layout information
-                                    basic.value = '99.99%';
-                                }
+                    const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current;
+                    keyboardAvoid.current.keyboardHeight = endCoordinates.height;
+                    onKeyboardShow?.();
+                    if (adjustPosition) {
+                        setTimeout(() => {
+                            ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+                                const aboveOffset = offset.value + pageY + height - endCoordinates.screenY;
+                                const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
+                                const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
+                                const value = aboveOffset > 0 ? belowValue : aboveValue;
+                                offset.value = withTiming(value, { duration, easing }, (finished) => {
+                                    if (finished) {
+                                        // Set flexBasic after animation to trigger re-layout and reset layout information
+                                        basic.value = '99.99%';
+                                    }
+                                });
                             });
                         });
-                    });
+                    }
                 }),
                 Keyboard.addListener('keyboardWillHide', resetKeyboard)
             ];
@@ -58,20 +73,40 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                     if (!keyboardAvoid?.current)
                         return;
                     const { endCoordinates } = evt;
-                    const { ref, cursorSpacing = 0 } = keyboardAvoid.current;
-                    ref?.current?.measure((x, y, width, height, pageX, pageY) => {
-                        const aboveOffset = pageY + height - endCoordinates.screenY;
-                        const belowOffset = endCoordinates.height - aboveOffset;
-                        const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
-                        const belowValue = Math.min(belowOffset, cursorSpacing);
-                        const value = aboveOffset > 0 ? belowValue : aboveValue;
-                        offset.value = withTiming(value, { duration, easing }, (finished) => {
-                            if (finished) {
-                                // Set flexBasic after animation to trigger re-layout and reset layout information
-                                basic.value = '99.99%';
-                            }
+                    const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current;
+                    // android 上键盘消失只能使用 keyboardDidHide 事件，对于需要和键盘一起改变位置的 nav 来说
+                    // keyboardDidHide 是比较晚的，从动画上看也并不同步，因此采用比较早的blur
+                    keyboardAvoid.current.blurCallbacks.push(resetKeyboard);
+                    keyboardAvoid.current.keyboardHeight = endCoordinates.height;
+                    onKeyboardShow?.();
+                    if (adjustPosition) {
+                        ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+                            const screenHeightRatio = getWindowInfo().screenHeight /
+                                (endCoordinates.screenY + endCoordinates.height);
+                            const navAboveOffset = pageY + height - Math.floor(endCoordinates.screenY * screenHeightRatio);
+                            const aboveOffset = pageY + height - endCoordinates.screenY;
+                            const belowOffset = endCoordinates.height - aboveOffset;
+                            const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
+                            const belowValue = Math.min(belowOffset, cursorSpacing);
+                            const value = aboveOffset > 0 ? belowValue : aboveValue;
+                            navigation.setPageConfig({
+                                animatedNavStyle: {
+                                    // android 手机本身支持将页面整体上移（包含 nav 和 body）
+                                    // mpx-keyboard-avoiding-view 和 nav 使用 transform 时互不影响，因此这里只需要计算 android 键盘出现导致上移的高度即可
+                                    top: withTiming(navAboveOffset, {
+                                        duration: 100,
+                                        easing
+                                    })
+                                }
+                            });
+                            offset.value = withTiming(value, { duration, easing }, (finished) => {
+                                if (finished) {
+                                    // Set flexBasic after animation to trigger re-layout and reset layout information
+                                    basic.value = '99.99%';
+                                }
+                            });
                         });
-                    });
+                    }
                 }),
                 Keyboard.addListener('keyboardDidHide', resetKeyboard)
             ];
@@ -80,7 +115,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<View style={style} onTouchEnd={onTouchEnd}>
+    return (<View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
       <Animated.View style={[
             contentContainerStyle,
             animatedStyle

package/lib/runtime/components/react/dist/mpx-label.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ✘ for
+ */
+import { ReactNode } from 'react';
+import { View, ViewStyle, NativeSyntheticEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+export interface LabelProps {
+    for?: string;
+    style?: ViewStyle & Record<string, any>;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    children: ReactNode;
+    bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HandlerRef<View, LabelProps>>>;
+export default Label;

package/lib/runtime/components/react/dist/mpx-movable-area.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ✘ scale-area
+ */
+import { View } from 'react-native';
+import { ReactNode } from 'react';
+import { HandlerRef } from './useNodesRef';
+interface MovableAreaProps {
+    style?: Record<string, any>;
+    children: ReactNode;
+    width?: number;
+    height?: number;
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+}
+declare const _MovableArea: import("react").ForwardRefExoticComponent<MovableAreaProps & import("react").RefAttributes<HandlerRef<View, MovableAreaProps>>>;
+export default _MovableArea;

package/lib/runtime/components/react/dist/mpx-movable-view.d.ts

@@ -0,0 +1,61 @@
+/**
+ * ✔ direction
+ * ✔ inertia
+ * ✔ out-of-bounds
+ * ✔ x
+ * ✔ y
+ * ✘ damping
+ * ✘ friction
+ * ✔ disabled
+ * ✘ scale
+ * ✘ scale-min
+ * ✘ scale-max
+ * ✘ scale-value
+ * ✔ animation
+ * ✔ bindchange
+ * ✘ bindscale
+ * ✔ htouchmove
+ * ✔ vtouchmove
+ */
+import { ReactNode } from 'react';
+import { View, LayoutChangeEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+import { GestureHandler } from './utils';
+import { GestureTouchEvent } from 'react-native-gesture-handler';
+interface MovableViewProps {
+    children: ReactNode;
+    style?: Record<string, any>;
+    direction: 'all' | 'vertical' | 'horizontal' | 'none';
+    x?: number;
+    y?: number;
+    disabled?: boolean;
+    animation?: boolean;
+    id?: string;
+    bindchange?: (event: unknown) => void;
+    bindtouchstart?: (event: GestureTouchEvent) => void;
+    catchtouchstart?: (event: GestureTouchEvent) => void;
+    bindtouchmove?: (event: GestureTouchEvent) => void;
+    catchtouchmove?: (event: GestureTouchEvent) => void;
+    catchtouchend?: (event: GestureTouchEvent) => void;
+    bindtouchend?: (event: GestureTouchEvent) => void;
+    bindhtouchmove?: (event: GestureTouchEvent) => void;
+    bindvtouchmove?: (event: GestureTouchEvent) => void;
+    catchhtouchmove?: (event: GestureTouchEvent) => void;
+    catchvtouchmove?: (event: GestureTouchEvent) => void;
+    bindlongpress?: (event: GestureTouchEvent) => void;
+    catchlongpress?: (event: GestureTouchEvent) => void;
+    bindtap?: (event: GestureTouchEvent) => void;
+    catchtap?: (event: GestureTouchEvent) => void;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    'out-of-bounds'?: boolean;
+    'wait-for'?: Array<GestureHandler>;
+    'simultaneous-handlers'?: Array<GestureHandler>;
+    inertia?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+}
+declare const _MovableView: import("react").ForwardRefExoticComponent<MovableViewProps & import("react").RefAttributes<HandlerRef<View, MovableViewProps>>>;
+export default _MovableView;

package/lib/runtime/components/react/dist/mpx-navigator.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { _ViewProps } from './mpx-view';
+interface _NavigatorProps extends _ViewProps {
+    ['open-type']: 'navigate' | 'redirect' | 'switchTab' | 'reLaunch' | 'navigateBack';
+    url: string;
+    delta: number;
+}
+declare const _Navigator: import("react").ForwardRefExoticComponent<_NavigatorProps & import("react").RefAttributes<any>>;
+export default _Navigator;

package/lib/runtime/components/react/dist/mpx-picker/date.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { DateProps } from './type';
+import { HandlerRef } from '../useNodesRef';
+declare const PickerDate: React.ForwardRefExoticComponent<Omit<DateProps, "ref"> & React.RefAttributes<HandlerRef<View, DateProps>>>;
+export default PickerDate;

package/lib/runtime/components/react/dist/mpx-picker/dateData.d.ts

@@ -0,0 +1,7 @@
+export declare const wrapDate: (union?: string) => (num: number) => string;
+export declare const START_YEAR = 1900;
+export declare const END_YEAR = 2099;
+export declare const years: string[];
+export declare const months: string[];
+export declare const daysInMonthLength: (year: number, month: number) => 30 | 28 | 29 | 31;
+export declare const daysInMonth: (year: number, month: number) => string[];

package/lib/runtime/components/react/dist/mpx-picker/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { HandlerRef } from '../useNodesRef';
+import { PickerProps } from './type';
+declare const Picker: React.ForwardRefExoticComponent<(Omit<import("./type").DateProps, "ref"> | Omit<import("./type").SelectorProps, "ref"> | Omit<import("./type").MultiSelectorProps, "ref"> | Omit<import("./type").TimeProps, "ref"> | Omit<import("./type").RegionProps, "ref">) & React.RefAttributes<HandlerRef<View, PickerProps>>>;
+export default Picker;

package/lib/runtime/components/react/dist/mpx-picker/multiSelector.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { MultiSelectorProps } from './type';
+import { HandlerRef } from '../useNodesRef';
+declare const PickerMultiSelector: React.ForwardRefExoticComponent<Omit<MultiSelectorProps, "ref"> & React.RefAttributes<HandlerRef<View, MultiSelectorProps>>>;
+export default PickerMultiSelector;

package/lib/runtime/components/react/dist/mpx-picker/region.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { RegionProps } from './type';
+import { HandlerRef } from '../useNodesRef';
+declare const PickerRegion: React.ForwardRefExoticComponent<Omit<RegionProps, "ref"> & React.RefAttributes<HandlerRef<View, RegionProps>>>;
+export default PickerRegion;

package/lib/runtime/components/react/dist/mpx-picker/regionData.d.ts

@@ -0,0 +1,2 @@
+import { RegionObj } from './type';
+export declare const regionData: RegionObj[];

package/lib/runtime/components/react/dist/mpx-picker/selector.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { SelectorProps } from './type';
+import { HandlerRef } from '../useNodesRef';
+declare const PickerSelector: React.ForwardRefExoticComponent<Omit<SelectorProps, "ref"> & React.RefAttributes<HandlerRef<View, SelectorProps>>>;
+export default PickerSelector;

package/lib/runtime/components/react/dist/mpx-picker/time.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { View } from 'react-native';
+import { TimeProps } from './type';
+import { HandlerRef } from '../useNodesRef';
+declare const PickerTime: React.ForwardRefExoticComponent<Omit<TimeProps, "ref"> & React.RefAttributes<HandlerRef<View, TimeProps>>>;
+export default PickerTime;

package/lib/runtime/components/react/dist/mpx-picker/type.d.ts

@@ -0,0 +1,106 @@
+import React from 'react';
+export declare const enum PickerMode {
+    SELECTOR = "selector",
+    MULTI_SELECTOR = "multiSelector",
+    TIME = "time",
+    DATE = "date",
+    REGION = "region"
+}
+export type PickerValue = number;
+export type Obj = Record<string, any>;
+export type RangeItem = Obj | number | string;
+export type TimeValue = `${number}-${number}-${number}` | '';
+/** 通用属性 */
+export interface BasePickerProps {
+    /** --- 小程序属性 --- */
+    /** 选择器类型, 默认值 selector */
+    mode?: PickerMode;
+    /** 是否禁用, 默认值 false */
+    disabled?: boolean;
+    /** 点击取消按钮时触发 */
+    bindcancel?: Function;
+    /** 头部标题 */
+    'header-text'?: string;
+    /** --- 内部组件属性 --- */
+    /** 作为表单组件时的名称 */
+    name?: string;
+    style?: Record<string, any>;
+    children?: React.ReactNode;
+    range?: RangeItem[];
+    ref?: any;
+}
+export interface SelectorProps extends BasePickerProps {
+    mode: PickerMode.SELECTOR;
+    /**  默认值 0 */
+    value?: number;
+    /** 默认值 [] */
+    range?: RangeItem[];
+    'range-key'?: string;
+    /** 点击确认按钮后触发 change 事件, event.detail = {value} */
+    bindchange?: Function;
+}
+export interface MultiSelectorProps extends BasePickerProps {
+    mode: PickerMode.MULTI_SELECTOR;
+    /** 默认值 [] */
+    value?: number[];
+    range?: RangeItem[];
+    'range-key'?: string;
+    bindchange?: Function;
+    bindcolumnchange?: Function;
+}
+export interface TimeProps extends BasePickerProps {
+    mode: PickerMode.TIME;
+    /** 表示选中的时间，格式为"hh:mm" */
+    value?: string;
+    start?: string;
+    end?: string;
+    bindchange?: Function;
+}
+export interface DateProps extends BasePickerProps {
+    mode: PickerMode.DATE;
+    /** 默认值 '' */
+    value?: TimeValue;
+    start?: TimeValue;
+    end?: TimeValue;
+    /** 有效值 year,month,day，表示选择器的粒度 */
+    fields?: 'day' | 'month' | 'year';
+    bindchange?: Function;
+}
+export interface RegionProps extends BasePickerProps {
+    mode: PickerMode.REGION;
+    /** 表示选中的省市区，默认选中每一列的第一个值, 默认值 [] */
+    value?: string[];
+    /** 默认值 region */
+    level?: 'province' | 'city' | 'region' | 'sub-district';
+    /** 可为每一列的顶部添加一个自定义的项 */
+    'custom-item'?: string;
+    /** value 改变时触发 change 事件, event.detail = {value, code, postcode},
+     * 其中字段 code 是统计用区划代码, postcode 是邮政编码 */
+    bindchange?: Function;
+}
+export interface RegionObj {
+    value: string;
+    code: string;
+    postcode?: string;
+    children?: RegionObj[];
+}
+export interface PickerData {
+    value: string;
+    label: string;
+    children?: Object[];
+}
+export interface EventType {
+    detail: {
+        value: PickerValue[];
+    };
+}
+export interface LayoutType {
+    nativeEvent: {
+        layout: Obj;
+    };
+}
+export interface FormType {
+    name: string;
+}
+export type PickerProps = SelectorProps | MultiSelectorProps | TimeProps | DateProps | RegionProps;
+export type LanguageCode = 'zh-CN' | 'en-US';

package/lib/runtime/components/react/dist/mpx-picker-view/index.d.ts

@@ -0,0 +1,31 @@
+import { View } from 'react-native';
+import React from 'react';
+import { HandlerRef } from '../useNodesRef';
+import type { AnyFunc } from '../types/common';
+/**
+ * ✔ value
+ * ✔ bindchange
+ * ✘ bindpickstart
+ * ✘ bindpickend
+ * ✔ mask-class
+ * ✔ indicator-style: 优先级indicator-style.height > pick-view-column中的子元素设置的height
+ * WebView Only:
+ * ✔ indicator-class
+ * ✔ mask-style
+ * ✘ immediate-change
+ */
+interface PickerViewProps {
+    children: React.ReactNode;
+    value?: Array<number>;
+    bindchange?: AnyFunc;
+    style?: {
+        [key: string]: any;
+    };
+    'indicator-style'?: Record<string, any>;
+    'mask-style'?: Record<string, any>;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'enable-offset'?: boolean;
+}
+declare const _PickerView: React.ForwardRefExoticComponent<PickerViewProps & React.RefAttributes<HandlerRef<View, PickerViewProps>>>;
+export default _PickerView;

package/lib/runtime/components/react/dist/mpx-picker-view/pickerVIewContext.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SharedValue } from 'react-native-reanimated';
+type ContextValue = SharedValue<number>;
+export declare const PickerViewColumnAnimationContext: import("react").Context<ContextValue | undefined>;
+export declare const usePickerViewColumnAnimationContext: () => ContextValue;
+export declare const PickerViewStyleContext: import("react").Context<Record<string, any> | undefined>;
+export declare const usePickerViewStyleContext: () => Record<string, any> | undefined;
+export {};

package/lib/runtime/components/react/dist/mpx-picker-view-column/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { HandlerRef } from '../useNodesRef';
+interface ColumnProps {
+    columnIndex: number;
+    columnData: React.ReactNode[];
+    initialIndex: number;
+    onSelectChange: Function;
+    style: {
+        [key: string]: any;
+    };
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    wrapperStyle: {
+        height: number;
+        itemHeight: number;
+    };
+    pickerMaskStyle: Record<string, any>;
+    pickerIndicatorStyle: Record<string, any>;
+}
+declare const _PickerViewColumn: React.ForwardRefExoticComponent<ColumnProps & React.RefAttributes<HandlerRef<ScrollView & View, ColumnProps>>>;
+export default _PickerViewColumn;

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewColumnItem.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { LayoutChangeEvent } from 'react-native';
+interface PickerColumnItemProps {
+    item: React.ReactElement;
+    index: number;
+    itemHeight: number;
+    itemWidth?: number | '100%';
+    textStyle: Record<string, any>;
+    visibleCount: number;
+    textProps?: any;
+    onItemLayout?: (e: LayoutChangeEvent) => void;
+}
+declare const PickerViewColumnItem: React.FC<PickerColumnItemProps>;
+export default PickerViewColumnItem;

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewFaces.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Borrowed from open-source code: https://github.com/quidone/react-native-wheel-picker
+ * Special thanks to the authors for their contribution to the open-source community.
+ */
+export type Faces = {
+    index: number;
+    deg: number;
+    offsetY: number;
+    opacity: number;
+    scale: number;
+    screenHeight: number;
+};
+export declare const degToRad: (deg: number) => number;
+export declare const calcPickerHeight: (faces: Faces[], itemHeight: number) => number;
+export declare const calcHeightOffsets: (itemHeight: number) => number[];
+export declare const createFaces: (itemHeight: number, visibleCount: number) => Faces[];

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewIndicator.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type IndicatorProps = {
+    itemHeight: number;
+    indicatorItemStyle?: StyleProp<ViewStyle>;
+    indicatorContainerStyle?: StyleProp<ViewStyle>;
+};
+declare const _PickerViewIndicator: {
+    ({ itemHeight, indicatorItemStyle, indicatorContainerStyle }: IndicatorProps): React.JSX.Element;
+    displayName: string;
+};
+export default _PickerViewIndicator;

package/lib/runtime/components/react/dist/mpx-picker-view-column/pickerViewMask.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+type MaskProps = {
+    itemHeight: number;
+    maskContainerStyle?: StyleProp<ViewStyle>;
+};
+declare const _PickerViewMask: {
+    ({ itemHeight, maskContainerStyle }: MaskProps): React.JSX.Element;
+    displayName: string;
+};
+export default _PickerViewMask;

package/lib/runtime/components/react/dist/mpx-popup/index.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { PopupBaseProps } from './popupBase';
+export declare const enum PopupType {
+    PICKER = "picker"
+}
+export interface IUsePopupOptions {
+    modal?: React.ComponentType<PopupBaseProps>;
+    type?: PopupType;
+}
+/**
+ * 基于 Portal 封装的 Popup 弹窗组件管理 Hooks
+ */
+declare const createPopupManager: (options?: IUsePopupOptions) => {
+    open: (childComponent: React.ReactNode, pageId: number | undefined, options?: {
+        contentHeight?: number;
+    }) => void;
+    show: () => void;
+    hide: () => void;
+    update: (updatedChild: ReactElement | null) => void;
+    remove: () => void;
+};
+export { createPopupManager };

package/lib/runtime/components/react/dist/mpx-popup/popupBase.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface PopupBaseProps {
+    children?: React.ReactNode;
+    hide?: () => void;
+    contentHeight?: number;
+    visible?: boolean;
+}
+/**
+ * 类似微信 picker 弹窗的动画效果都可以复用此类容器
+ * 其他特定类型的弹窗容器组件可以在此基础上封装，或者扩展实现
+ */
+declare const PopupBase: {
+    (props?: PopupBaseProps): import("react").JSX.Element;
+    displayName: string;
+};
+export default PopupBase;

package/lib/runtime/components/react/dist/mpx-portal/index.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type PortalProps = {
+    children?: ReactNode;
+};
+declare const Portal: {
+    ({ children }: PortalProps): null;
+    Host: ({ children }: {
+        children: ReactNode;
+        pageId: number;
+    }) => JSX.Element;
+    add: (e: ReactNode, id: number | null) => number;
+    remove: (key: number) => void;
+    update: (key: number, e: ReactNode) => void;
+};
+export default Portal;

package/lib/runtime/components/react/dist/mpx-portal/portal-host.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+type PortalHostProps = {
+    children: ReactNode;
+    pageId: number;
+};
+export type Operation = {
+    type: 'mount';
+    key: number;
+    children: ReactNode;
+} | {
+    type: 'update';
+    key: number;
+    children: ReactNode;
+} | {
+    type: 'unmount';
+    key: number;
+};
+declare class PortalGuard {
+    private nextKey;
+    add: (e: ReactNode, id: number | null) => number;
+    remove: (key: number) => void;
+    update: (key: number, e: ReactNode) => void;
+}
+/**
+ * portal
+ */
+export declare const portal: PortalGuard;
+declare const PortalHost: ({ children }: PortalHostProps) => JSX.Element;
+export default PortalHost;

package/lib/runtime/components/react/dist/mpx-portal/portal-manager.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type State = {
+    portals: Array<{
+        key: number;
+        children: ReactNode;
+    }>;
+};
+declare const _PortalManager: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export default _PortalManager;