@mpxjs/webpack-plugin 2.10.24 → 2.11.0

package/lib/runtime/components/react/mpx-picker/index.tsx

@@ -6,10 +6,11 @@ import PickerMultiSelector from './multiSelector'
 import PickerTime from './time'
 import PickerDate from './date'
 import PickerRegion from './region'
+import Portal from '../mpx-portal'
 import { FormContext, FormFieldValue, RouteContext } from '../context'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import useInnerProps, { getCustomEvent } from '../getInnerListeners'
-import { extendObject, useLayout } from '../utils'
+import { extendObject, splitProps, splitStyle, useLayout, useTextPassThrough, useTransformStyle, wrapChildren } from '../utils'
 import { createPopupManager } from '../mpx-popup'
 import { EventType, LanguageCode, PickerMode, PickerProps } from './type'
 
@@ -78,13 +79,13 @@ const styles = StyleSheet.create({
   }
 })
 
-const pickerModalMap: Record<PickerMode, React.ComponentType<PickerProps>> = {
+const pickerModalMap = {
   [PickerMode.SELECTOR]: PickerSelector,
   [PickerMode.MULTI_SELECTOR]: PickerMultiSelector,
   [PickerMode.TIME]: PickerTime,
   [PickerMode.DATE]: PickerDate,
   [PickerMode.REGION]: PickerRegion
-}
+} satisfies Record<PickerMode, React.ComponentType<any>>
 
 const getDefaultValue = (mode: PickerMode) => {
   switch (mode) {
@@ -111,17 +112,26 @@ const buttonTextMap: Record<LanguageCode, { cancel: string; confirm: string }> =
 }
 
 const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
-  (props: PickerProps, ref): React.JSX.Element => {
+  (pickerProps: PickerProps, ref): React.JSX.Element => {
+    const { textProps, innerProps: splitInnerProps } = splitProps(pickerProps)
+    const props = (splitInnerProps || {}) as PickerProps
     const {
       mode,
       value,
-      range = null,
+      range = [],
       children,
       disabled,
       bindcancel,
       bindchange,
-      'header-text': headerText = ''
+      'header-text': headerText = '',
+      style,
+      'enable-var': enableVar,
+      'enable-text-pass-through': enableTextPassThrough,
+      'parent-width': parentWidth,
+      'parent-height': parentHeight
     } = props
+    const modalProps = props as any
+    const rangeKey = modalProps['range-key']
 
     const { pageId } = useContext(RouteContext) || {}
     const buttonText = buttonTextMap[(global.__mpx?.i18n?.locale as LanguageCode) || 'zh-CN']
@@ -129,12 +139,31 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
     pickerValue.current = Array.isArray(value) ? value.slice() : value
     const nodeRef = useRef<View>(null)
     const pickerRef = useRef<any>(null)
-    const { open, show, hide, remove } = useRef(createPopupManager()).current
+    const { open, show, hide, remove, update } = useRef(createPopupManager()).current
+    const {
+      normalStyle,
+      hasVarDec,
+      varContextRef,
+      hasSelfPercent,
+      hasPositionFixed,
+      setWidth,
+      setHeight
+    } = useTransformStyle(style, { enableVar, parentWidth, parentHeight })
+    const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
+    const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
 
-    useNodesRef<View, PickerProps>(props, ref, nodeRef)
-    const { layoutRef, layoutProps } = useLayout({
+    if (backgroundStyle) {
+      warn('Picker does not support background image-related styles!')
+    }
+
+    useNodesRef<View, PickerProps>(props, ref, nodeRef, {
+      style: normalStyle
+    })
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({
       props,
-      hasSelfPercent: false,
+      hasSelfPercent,
+      setWidth,
+      setHeight,
       nodeRef
     })
 
@@ -143,7 +172,8 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
         {},
         props,
         {
-          ref: nodeRef
+          ref: nodeRef,
+          style: extendObject({}, innerStyle, layoutStyle)
         },
         layoutProps
       ),
@@ -151,6 +181,12 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
         'mode',
         'value',
         'range',
+        'range-key',
+        'start',
+        'end',
+        'fields',
+        'level',
+        'custom-item',
         'disabled',
         'bindcancel',
         'bindchange',
@@ -163,9 +199,9 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
 
     useEffect(() => {
       if (range && pickerRef.current && mode === PickerMode.MULTI_SELECTOR) {
-        pickerRef.current.updateRange?.(range)
+        pickerRef.current.updateRange?.(range, rangeKey)
       }
-    }, [JSON.stringify(range)])
+    }, [JSON.stringify(range), rangeKey, mode])
 
     /** --- form 表单组件内部方法 --- */
     const getValue = () => {
@@ -228,15 +264,9 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       hide()
     }
 
-    const specificProps = extendObject({}, innerProps, {
-      mode,
-      children,
-      bindchange: onChange,
-      bindcolumnchange: onColumnChange,
-      getRange: () => range
-    })
+    const getContentHeight = () => headerText ? 350 : 310
 
-    const renderPickerContent = () => {
+    const getPickerContent = () => {
       if (disabled) {
         return null
       }
@@ -244,9 +274,21 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
       if (!(_mode in pickerModalMap)) {
         return warn(`[Mpx runtime warn]: Unsupported <picker> mode: ${mode}`)
       }
+      const specificProps = {
+        mode: _mode,
+        range,
+        'range-key': rangeKey,
+        start: modalProps.start,
+        end: modalProps.end,
+        fields: modalProps.fields,
+        level: modalProps.level,
+        'custom-item': modalProps['custom-item'],
+        bindchange: onChange,
+        bindcolumnchange: onColumnChange
+      } as PickerProps
       const _value: any = value
-      const PickerModal = pickerModalMap[_mode]
-      const renderPickerModal = (
+      const PickerModal = pickerModalMap[_mode] as React.ComponentType<PickerProps>
+      return (
         <>
           {headerText && (
             <View style={[styles.header]}>
@@ -270,22 +312,51 @@ const Picker = forwardRef<HandlerRef<View, PickerProps>, PickerProps>(
           </View>
         </>
       )
-      const contentHeight = headerText ? 350 : 310
-      open(renderPickerModal, pageId, { contentHeight })
+    }
+
+    const openPickerContent = () => {
+      const renderPickerModal = getPickerContent()
+      if (!renderPickerModal) {
+        return
+      }
+      open(renderPickerModal, pageId, { contentHeight: getContentHeight() })
     }
 
     useEffect(() => {
-      renderPickerContent()
+      openPickerContent()
       return () => {
         remove()
       }
     }, [])
 
-    return createElement(
+    const showPicker = () => {
+      const renderPickerModal = getPickerContent()
+      if (!renderPickerModal) {
+        return
+      }
+      update(renderPickerModal, { contentHeight: getContentHeight() })
+      show()
+    }
+
+    const finalComponent = createElement(
       TouchableWithoutFeedback,
-      { onPress: show },
-      createElement(View, innerProps, children)
+      { onPress: showPicker },
+      createElement(
+        View,
+        innerProps,
+        wrapChildren(children, {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textPassThrough
+        })
+      )
     )
+
+    if (hasPositionFixed) {
+      return createElement(Portal, null, finalComponent)
+    }
+
+    return finalComponent
   }
 )
 

package/lib/runtime/components/react/mpx-picker/multiSelector.tsx

@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
 })
 
 const formatRangeFun = (range: RangeItem[], rangeKey = '') =>
-  rangeKey ? range.map((item: Obj) => item[rangeKey]) : range
+  rangeKey ? range.map((item) => (item as Obj)[rangeKey]) : range
 
 const formatValueFn = (value: number | number[]) => {
   return Array.isArray(value) ? value : [value]
@@ -54,8 +54,8 @@ const PickerMultiSelector = forwardRef<
     }
   }, [formatValue])
 
-  const updateRange = (newRange: RangeItem[]) => {
-    const range = formatRangeFun(newRange.slice(), props['range-key'])
+  const updateRange = (newRange: RangeItem[], rangeKey?: string) => {
+    const range = formatRangeFun(newRange.slice(), rangeKey)
     setFormatRange(range)
   }
 

package/lib/runtime/components/react/mpx-picker/selector.tsx

@@ -24,7 +24,7 @@ const styles = StyleSheet.create({
 })
 
 const formatRangeFun = (range: RangeItem[], rangeKey = '') =>
-  rangeKey ? range.map((item: Obj) => item[rangeKey]) : range
+  rangeKey ? range.map((item) => (item as Obj)[rangeKey]) : range
 
 const formatValueFn = (value: number | number[] = 0) => {
   const _value = Array.isArray(value) ? value[0] : value

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

@@ -28,6 +28,10 @@ export interface BasePickerProps {
   /** 作为表单组件时的名称 */
   name?: string
   style?: Record<string, any>
+  'enable-var'?: boolean
+  'enable-text-pass-through'?: boolean
+  'parent-width'?: number
+  'parent-height'?: number
   children?: React.ReactNode
   range?: RangeItem[]
   ref?: any

package/lib/runtime/components/react/mpx-picker-view/index.tsx

@@ -9,9 +9,8 @@ import {
   wrapChildren,
   useTransformStyle,
   extendObject,
-  useTextPassThroughValue
+  useTextPassThrough
 } from '../utils'
-import { PickerViewStyleContext } from './pickerVIewContext'
 import Portal from '../mpx-portal'
 import type { AnyFunc } from '../types/common'
 /**
@@ -38,7 +37,7 @@ interface PickerViewProps {
   'indicator-style'?: Record<string, any>,
   'mask-style'?: Record<string, any>,
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>,
+  'enable-text-pass-through'?: boolean
   'enable-offset'?: boolean
 }
 
@@ -75,7 +74,8 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     'indicator-style': indicatorStyle = {},
     'mask-style': pickerMaskStyle = {},
     'enable-var': enableVar,
-    'external-var-context': externalVarContext
+    'enable-text-pass-through': enableTextPassThrough
+
   } = props
   const { height: indicatorH, ...pickerIndicatorStyle } = indicatorStyle
   const nodeRef = useRef(null)
@@ -92,7 +92,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     setWidth,
     setHeight,
     hasPositionFixed
-  } = useTransformStyle(style, { enableVar, externalVarContext })
+  } = useTransformStyle(style, { enableVar })
 
   useNodesRef<View, PickerViewProps>(props, ref, nodeRef, {
     style: normalStyle
@@ -105,7 +105,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: nodeRef })
   const { textProps } = splitProps(props)
   const { textStyle } = splitStyle(normalStyle)
-  const textPassThrough = useTextPassThroughValue(textStyle, textProps)
+  const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
 
   const onSelectChange = (columnIndex: number, selectedIndex: number) => {
     const activeValue = activeValueRef.current
@@ -187,17 +187,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         enableWheelAnimation
       }
     )
-    const realElement = React.cloneElement(child, wrappedProps)
-    return wrapChildren(
-      {
-        children: realElement
-      },
-      {
-        hasVarDec,
-        varContext: varContextRef.current,
-        textPassThrough
-      }
-    )
+    return React.cloneElement(child, wrappedProps)
   }
 
   const validateChildInitialIndex = (index: number, data: React.ReactNode[]) => {
@@ -232,15 +222,18 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
   }
 
   const finalComponent = createElement(
-    PickerViewStyleContext.Provider,
-    { value: textStyle },
+    View,
+    innerProps,
     createElement(
       View,
-      innerProps,
-      createElement(
-        View,
-        { style: [styles.wrapper] },
-        renderPickerColumns()
+      { style: [styles.wrapper] },
+      wrapChildren(
+        renderPickerColumns(),
+        {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textPassThrough
+        }
       )
     )
   )

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

@@ -16,12 +16,3 @@ export const usePickerViewColumnAnimationContext = () => {
   }
   return value
 }
-
-export const PickerViewStyleContext = createContext<
-    Record<string, any> | undefined
->(undefined)
-
-export const usePickerViewStyleContext = () => {
-  const value = useContext(PickerViewStyleContext)
-  return value
-}

package/lib/runtime/components/react/mpx-picker-view-column/index.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useRef, useState, useMemo, useEffect, useCallback, createElement } from 'react'
 import { GestureResponderEvent, LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView, StyleSheet, View } from 'react-native'
 import Reanimated, { AnimatedRef, useAnimatedRef, useScrollViewOffset } from 'react-native-reanimated'
-import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony, extendObject } from '../utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAndroid, isIOS, isHarmony, extendObject, useTextPassThrough, wrapChildren } from '../utils'
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import PickerIndicator from './pickerViewIndicator'
 import PickerMask from './pickerViewMask'
@@ -19,7 +19,6 @@ interface ColumnProps {
     [key: string]: any
   }
   'enable-var'?: boolean
-  'external-var-context'?: Record<string, any>
   wrapperStyle: {
     height: number
     itemHeight: number
@@ -27,6 +26,7 @@ interface ColumnProps {
   pickerMaskStyle: Record<string, any>
   pickerIndicatorStyle: Record<string, any>
   enableWheelAnimation?: boolean
+  'enable-text-pass-through'?: boolean
 }
 
 const visibleCount = 5
@@ -43,17 +43,21 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     pickerIndicatorStyle,
     enableWheelAnimation = true,
     'enable-var': enableVar,
-    'external-var-context': externalVarContext
+    'enable-text-pass-through': enableTextPassThrough
+
   } = props
 
   const {
     normalStyle,
+    hasVarDec,
+    varContextRef,
     hasSelfPercent,
     setWidth,
     setHeight
-  } = useTransformStyle(style, { enableVar, externalVarContext })
-  const { textStyle = {} } = splitStyle(normalStyle)
-  const { textProps = {} } = splitProps(props)
+  } = useTransformStyle(style, { enableVar })
+  const { textStyle } = splitStyle(normalStyle)
+  const { textProps } = splitProps(props)
+  const textPassThrough = useTextPassThrough(textStyle, textProps, { enableTextPassThrough })
   const scrollViewRef = useAnimatedRef<Reanimated.ScrollView>()
   const offsetYShared = useScrollViewOffset(scrollViewRef as AnimatedRef<Reanimated.ScrollView>)
 
@@ -62,14 +66,14 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   })
 
   const { height: pickerH, itemHeight } = wrapperStyle
-  const [itemRawH, setItemRawH] = useState(itemHeight)
+  const [itemRawH, setItemRawH] = useState(Math.round(itemHeight))
   const maxIndex = useMemo(() => columnData.length - 1, [columnData])
   const prevScrollingInfo = useRef({ index: initialIndex, y: 0 })
   const dragging = useRef(false)
   const scrolling = useRef(false)
-  const timerResetPosition = useRef<NodeJS.Timeout | null>(null)
-  const timerScrollTo = useRef<NodeJS.Timeout | null>(null)
-  const timerClickOnce = useRef<NodeJS.Timeout | null>(null)
+  const timerResetPosition = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const timerScrollTo = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const timerClickOnce = useRef<ReturnType<typeof setTimeout> | null>(null)
   const activeIndex = useRef(initialIndex)
   const prevIndex = usePrevious(initialIndex)
   const prevMaxIndex = usePrevious(maxIndex)
@@ -85,8 +89,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
   })
 
   const paddingHeight = useMemo(
-    () => Math.round((pickerH - itemHeight) / 2),
-    [pickerH, itemHeight]
+    () => (pickerH - itemRawH) / 2,
+    [pickerH, itemRawH]
   )
 
   const snapToOffsets = useMemo(
@@ -136,6 +140,16 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }
   }, [])
 
+  // `contentOffset` prop sets visual position but does not fire scroll events,
+  // so `offsetYShared` (from `useScrollViewOffset`) stays at 0 until the user scrolls.
+  // Directly sync it whenever `itemRawH` is established so wheel animation renders correctly.
+  useEffect(() => {
+    if (!itemRawH || dragging.current || scrolling.current) {
+      return
+    }
+    offsetYShared.value = activeIndex.current * itemRawH
+  }, [itemRawH])
+
   useEffect(() => {
     if (
       !scrollViewRef.current ||
@@ -160,13 +174,20 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }, isIOS ? 0 : 200)
   }, [itemRawH, maxIndex, initialIndex])
 
+  useEffect(() => {
+    const roundedH = Math.round(itemHeight)
+    if (roundedH) {
+      setItemRawH(roundedH)
+    }
+  }, [itemHeight])
+
   const onItemLayout = useCallback((e: LayoutChangeEvent) => {
     const { height: rawH } = e.nativeEvent.layout
     const roundedH = Math.round(rawH)
-    if (roundedH && roundedH !== itemRawH) {
+    if (roundedH) {
       setItemRawH(roundedH)
     }
-  }, [itemRawH])
+  }, [])
 
   const resetScrollPosition = useCallback((y: number) => {
     if (dragging.current || scrolling.current) {
@@ -289,9 +310,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           key={index}
           item={item}
           index={index}
-          itemHeight={itemHeight}
-          textStyle={textStyle}
-          textProps={textProps}
+          itemHeight={itemRawH}
           visibleCount={visibleCount}
           onItemLayout={onItemLayout}
         />)
@@ -299,9 +318,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           key={index}
           item={item}
           index={index}
-          itemHeight={itemHeight}
-          textStyle={textStyle}
-          textProps={textProps}
+          itemHeight={itemRawH}
           onItemLayout={onItemLayout}
         />)
     })
@@ -335,21 +352,25 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
       createElement(
         Reanimated.ScrollView,
         innerProps,
-        renderInnerchild()
+        wrapChildren(renderInnerchild(), {
+          hasVarDec,
+          varContext: varContextRef.current,
+          textPassThrough
+        })
       )
     )
   }
 
   const renderIndicator = () => (
     <PickerIndicator
-      itemHeight={itemHeight}
+      itemHeight={itemRawH}
       indicatorItemStyle={pickerIndicatorStyle}
     />
   )
 
   const renderMask = () => (
     <PickerMask
-      itemHeight={itemHeight}
+      itemHeight={itemRawH}
       maskContainerStyle={pickerMaskStyle}
     />
   )

package/lib/runtime/components/react/mpx-picker-view-column/pickerViewColumnItem.tsx

@@ -3,16 +3,14 @@ import { LayoutChangeEvent } from 'react-native'
 import Reanimated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated'
 import { extendObject } from '../utils'
 import { createFaces } from './pickerViewFaces'
-import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext'
+import { usePickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext'
 
 interface PickerColumnItemProps {
   item: React.ReactElement
   index: number
   itemHeight: number
   itemWidth?: number | '100%'
-  textStyle: Record<string, any>
   visibleCount: number
-  textProps?: any
   onItemLayout?: (e: LayoutChangeEvent) => void
 }
 
@@ -21,12 +19,9 @@ const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
   index,
   itemHeight,
   itemWidth = '100%',
-  textStyle,
-  textProps,
   visibleCount,
   onItemLayout
 }) => {
-  const textStyleFromAncestor = usePickerViewStyleContext()
   const offsetYShared = usePickerViewColumnAnimationContext()
   const facesShared = useMemo(() => createFaces(itemHeight, visibleCount), [itemHeight, visibleCount])
 
@@ -48,12 +43,9 @@ const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
     {
       style: extendObject(
         { height: itemHeight, width: '100%' },
-        textStyleFromAncestor,
-        textStyle,
         item.props.style
       )
     },
-    textProps,
     restProps
   )
   const realItem = React.cloneElement(item, itemProps)

package/lib/runtime/components/react/mpx-picker-view-column/pickerViewColumnItemLite.tsx

@@ -1,15 +1,12 @@
 import React from 'react'
 import { LayoutChangeEvent, View } from 'react-native'
 import { extendObject } from '../utils'
-import { usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext'
 
 interface PickerColumnItemProps {
   item: React.ReactElement
   index: number
   itemHeight: number
   itemWidth?: number | '100%'
-  textStyle: Record<string, any>
-  textProps?: any
   onItemLayout?: (e: LayoutChangeEvent) => void
 }
 
@@ -18,23 +15,17 @@ const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
   index,
   itemHeight,
   itemWidth = '100%',
-  textStyle,
-  textProps,
   onItemLayout
 }) => {
-  const textStyleFromAncestor = usePickerViewStyleContext()
   const strKey = `picker-column-item-${index}`
   const restProps = index === 0 ? { onLayout: onItemLayout } : {}
   const itemProps = extendObject(
     {
       style: extendObject(
         { height: itemHeight, width: '100%' },
-        textStyleFromAncestor,
-        textStyle,
         item.props.style
       )
     },
-    textProps,
     restProps
   )
   const realItem = React.cloneElement(item, itemProps)

package/lib/runtime/components/react/mpx-popup/index.tsx

@@ -11,6 +11,10 @@ export interface IUsePopupOptions {
   type?: PopupType
 }
 
+type PopupOptions = {
+  contentHeight?: number
+}
+
 /**
  * 根据 type 返回对应的弹窗壳子组件
  */
@@ -44,7 +48,7 @@ const createPopupManager = (options: IUsePopupOptions = {}) => {
   const open = (
     childComponent: React.ReactNode,
     pageId: number | undefined,
-    options?: { contentHeight?: number }
+    options?: PopupOptions
   ) => {
     if (!isOpen && pageId != null) {
       isOpen = true
@@ -57,9 +61,9 @@ const createPopupManager = (options: IUsePopupOptions = {}) => {
     }
   }
 
-  const update = (updatedChild: ReactElement | null) => {
+  const update = (updatedChild: ReactElement | null, options?: PopupOptions) => {
     if (popupKey !== null && child !== null && updatedChild !== null) {
-      child = cloneElement(child, { children: updatedChild })
+      child = cloneElement(child, Object.assign({ children: updatedChild }, options))
       Portal.update(popupKey, child)
     }
   }

package/lib/runtime/components/react/mpx-popup/popupBase.tsx

@@ -59,8 +59,9 @@ const PopupBase = (props: PopupBaseProps = {}) => {
     contentHeight = MOVEOUT_HEIGHT,
     visible = false
   } = props
+  const moveoutHeight = contentHeight + bottom
   const fade = useSharedValue<number>(MASK_OFF)
-  const slide = useSharedValue<number>(contentHeight)
+  const slide = useSharedValue<number>(moveoutHeight)
 
   const animatedStylesMask = useAnimatedStyle(() => ({
     opacity: fade.value
@@ -87,7 +88,7 @@ const PopupBase = (props: PopupBaseProps = {}) => {
       duration: 300
     })
     slide.value = withTiming(
-      contentHeight,
+      moveoutHeight,
       {
         easing: Easing.inOut(Easing.poly(3)),
         duration: 300