@tarojs/components-react 4.1.12-beta.6 → 4.1.12-beta.60

package/dist/components/map/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/map/index.tsx"],"sourcesContent":["/* eslint-disable no-console */\nimport React, { Children, useEffect, useState } from 'react'\nimport { MultiMarker, MultiPolyline, TMap } from 'tlbs-map-react'\n\nimport { createForwardRefComponent } from '../../utils'\nimport { logPrefix } from './common'\nimport { registerMapInstance, unregisterMapInstance } from './MapContext'\nimport MapCustomCallout from './MapCustomCallout'\n\nimport type { MapProps as TaroMapProps } from '@tarojs/components'\nimport type MapTypes from 'tmap-gl-types'\n\nexport interface MapProps extends Omit<TaroMapProps, 'onError'> {\n  forwardedRef?: React.MutableRefObject<any>\n  authKey?: string\n  libraries?: string\n  onError?: (e: any) => void\n}\n\nfunction Map (props: MapProps) {\n  const {\n    forwardedRef,\n    id,\n    className,\n    style,\n    authKey,\n    libraries,\n    longitude,\n    latitude,\n    scale,\n    minScale,\n    maxScale,\n    enableRotate,\n    rotate,\n    skew,\n    markers,\n    polyline,\n    onTap,\n    onAuthSuccess,\n    onError,\n  } = props\n  // eslint-disable-next-line no-console\n  console.log(logPrefix, 'props', props)\n\n  /** ************************处理 style********************** */\n  const styleObj = typeof style === 'string' || style === undefined ? {} : (style as Record<string, string>)\n\n  /** ************************处理 marker********************** */\n  const normalizedMarkers = markers ?? []\n  const markerStyles: Record<string, any> = {}\n  const markerGeometries: any[] = []\n\n  normalizedMarkers.forEach((m, index) => {\n    const markerId = String(m.id ?? index)\n    const styleId = `marker-${markerId}`\n\n    // Taro: iconPath (string)；tlbs-map-react: styles 中指定图标\n    // Taro: width, height (number|string)；tlbs-map-react: width, height\n    // Taro: rotate (number)；tlbs-map-react: rotation\n    // Taro: alpha (number 0-1)；tlbs-map-react: opacity (0-1)\n    // Taro: zIndex (number)；tlbs-map-react: zIndex\n\n    // 解析宽高，支持数字和字符串（如 '20px'）\n    const parseSize = (size: number | string | undefined): number => {\n      if (typeof size === 'number') return size\n      if (typeof size === 'string') {\n        const parsed = parseInt(size, 10)\n        return isNaN(parsed) ? 20 : parsed\n      }\n      return 20 // 默认宽度\n    }\n\n    const markerWidth = parseSize(m.width)\n    const markerHeight = parseSize(m.height)\n\n    // 宽高为 0 时跳过渲染（隐藏 marker，仅保留气泡）\n    if (markerWidth === 0 || markerHeight === 0) {\n      return\n    }\n\n    markerStyles[styleId] = {\n      width: markerWidth,\n      height: markerHeight,\n      anchor: { x: markerWidth / 2, y: markerHeight }, // 默认底部中心为锚点\n      ...(m.iconPath && { src: m.iconPath }),\n      ...(typeof m.rotate === 'number' && { rotation: m.rotate }),\n      ...(typeof m.alpha === 'number' && { opacity: m.alpha }),\n      ...(typeof m.zIndex === 'number' && { zIndex: m.zIndex }),\n    }\n\n    markerGeometries.push({\n      id: markerId,\n      styleId,\n      position: { lat: m.latitude, lng: m.longitude },\n    })\n  })\n\n  /** ************************处理 polyline********************** */\n  const normalizedPolylines = polyline ?? []\n  const polylineStyles: Record<string, any> = {}\n  const polylineGeometries: any[] = []\n\n  normalizedPolylines.forEach((line, lineIndex) => {\n    if (!line.points || line.points.length === 0) return\n\n    const styleId = `polyline-${lineIndex}`\n\n    // Taro: color (hex)；腾讯地图: color\n    // Taro: width (number)；腾讯地图: width\n    // Taro: dottedLine (boolean)；腾讯地图: dashArray ([10,10]虚线, [0,0]实线)\n    polylineStyles[styleId] = {\n      color: line.color || '#3777FF',\n      width: Math.round(line.width ?? 3), // 取整，tlbs-map-react 要求 width 为整数\n      // 虚线：[10, 10] 表示10像素实线 + 10像素空白；实线：[0, 0]\n      dashArray: line.dottedLine ? [10, 10] : [0, 0],\n    }\n\n    // Taro: points 是 {latitude, longitude}[] 数组\n    // tlbs-map-react: geometries 需要路径点数组\n    polylineGeometries.push({\n      id: String(lineIndex),\n      styleId,\n      paths: line.points.map((point) => ({\n        lat: point.latitude,\n        lng: point.longitude,\n      })),\n    })\n  })\n\n  /** ************************适配options参数********************** */\n  const hasCenter = typeof latitude === 'number' && typeof longitude === 'number'\n  const mergedOptions = {\n    ...(hasCenter ? { center: { lat: latitude, lng: longitude } } : {}),\n    zoom: scale ?? 13,\n    minZoom: minScale ?? 3,\n    maxZoom: maxScale ?? 20,\n    rotatable: enableRotate ?? false, // Taro: enableRotate；tlbs-map-react: options.rotatable\n    ...(typeof rotate === 'number' && { rotation: rotate }), // Taro: rotate；tlbs-map-react: options.rotation\n    ...(typeof skew === 'number' && { pitch: skew }), // Taro: skew；tlbs-map-react: options.pitch\n  }\n\n  /** ************************处理事件********************** */\n  // Taro: onTap；腾讯地图: click\n  // 腾讯地图事件返回: MapEvent { latLng: LatLng, point: {x, y}, type, target, originalEvent }\n  // Taro 事件格式: BaseEventOrig { type, timeStamp, target, currentTarget, detail, ... }\n  const handleMapClick = (e: MapTypes.MapEvent) => {\n    console.log(logPrefix, 'source click e:', e)\n    if (typeof onTap === 'function') {\n      onTap({\n        type: e.type,\n        timeStamp: Date.now(),\n        target: {\n          id: id || '',\n          tagName: 'map',\n          dataset: {},\n        },\n        currentTarget: {\n          id: id || '',\n          tagName: 'map',\n          dataset: {},\n        },\n        detail: {\n          latitude: e.latLng.lat,\n          longitude: e.latLng.lng,\n        },\n        preventDefault: () => {},\n        stopPropagation: () => {},\n      })\n    }\n  }\n\n  // 存储地图实例,用于 H5 端自定义气泡\n  const [mapInstance, setMapInstance] = useState<MapTypes.Map | null>(null)\n\n  // 地图初始化成功\n  const handleMapInited = (instance: MapTypes.Map) => {\n    console.log(logPrefix, '地图初始化成功', instance)\n    setMapInstance(instance)\n\n    // 注册地图实例到全局存储\n    if (id) {\n      registerMapInstance(id, instance)\n      console.log(logPrefix, '已注册地图实例到 MapContext, id:', id)\n    }\n\n    let settled = false\n    instance.on('tilesloaded', (_res) => { /** 瓦片加载完成,地图真正可用 */\n      // TODO: 临时先这么简单处理鉴权成功\n      if (!settled && typeof onAuthSuccess === 'function') {\n        settled = true\n        onAuthSuccess({\n          type: 'authsuccess',\n          timeStamp: Date.now(),\n          target: {\n            id: id || '',\n            tagName: 'map',\n            dataset: {},\n          },\n          currentTarget: {\n            id: id || '',\n            tagName: 'map',\n            dataset: {},\n          },\n          detail: {\n            errCode: 0,\n            errMsg: 'ok',\n          },\n          preventDefault: () => {},\n          stopPropagation: () => {},\n        })\n      }\n    })\n    setTimeout(() => {\n      if (!settled && typeof onError === 'function') {\n        settled = true\n        onError({\n          type: 'error',\n          timeStamp: Date.now(),\n          target: {\n            id: id || '',\n            tagName: 'map',\n            dataset: {},\n          },\n          currentTarget: {\n            id: id || '',\n            tagName: 'map',\n            dataset: {},\n          },\n          detail: {\n            errCode: 1001,\n            errMsg: 'timeout',\n          },\n          preventDefault: () => {},\n          stopPropagation: () => {},\n        })\n      }\n    }, 3000)\n  }\n\n  // 组件卸载时清理地图实例\n  useEffect(() => {\n    return () => {\n      if (id) {\n        unregisterMapInstance(id)\n        console.log(logPrefix, '已注销地图实例, id:', id)\n      }\n    }\n  }, [id])\n\n  return (\n    <TMap\n      id={id}\n      ref={forwardedRef}\n      className={className}\n      style={styleObj}\n      apiKey={authKey ?? ''}\n      libraries={libraries}\n      options={mergedOptions}\n      onClick={handleMapClick}\n      onMapInited={handleMapInited}\n    >\n      {normalizedMarkers.length > 0 ? (\n        <MultiMarker id=\"taro-markers\" styles={markerStyles} geometries={markerGeometries} />\n      ) : null}\n      {polylineGeometries.length > 0 ? (\n        <MultiPolyline id=\"taro-polylines\" styles={polylineStyles} geometries={polylineGeometries} />\n      ) : null}\n\n      {/* H5 端:自动处理 slot=\"callout\" 的 CoverView */}\n      {process.env.TARO_ENV === 'h5' ? renderH5CustomCallouts() : props.children}\n    </TMap>\n  )\n\n  /**\n   * H5 端渲染自定义气泡\n   * 拦截 slot=\"callout\" 的 CoverView,转换为自定义 Overlay\n   */\n  function renderH5CustomCallouts() {\n    if (!mapInstance) return null\n\n    // 1. 遍历 props.children,找到 slot=\"callout\" 的 CoverView\n    const childrenArray = Children.toArray(props.children)\n    const calloutSlot = childrenArray.find((child: any) =>\n      React.isValidElement(child) && child.props?.slot === 'callout'\n    )\n\n    if (!calloutSlot || !React.isValidElement(calloutSlot)) {\n      return null\n    }\n\n    // 2. 遍历内层的 CoverView,提取 markerId 和内容\n    const innerCoverViews = Children.toArray(calloutSlot.props.children)\n\n    return innerCoverViews.map((child: any) => {\n      if (!React.isValidElement(child)) return null\n\n      const markerId = child.props?.markerId\n      if (!markerId) return null\n\n      // 3. 找到对应的 marker 信息\n      const marker = normalizedMarkers.find((m: any) => m.id === markerId)\n      if (!marker) {\n        console.warn(logPrefix, `未找到 markerId=${markerId} 对应的 marker`)\n        return null\n      }\n\n      // 4. 渲染自定义气泡\n      return (\n        <MapCustomCallout\n          key={markerId}\n          map={mapInstance}\n          markerId={markerId}\n          position={{ lat: marker.latitude, lng: marker.longitude }}\n          anchorX={marker.customCallout?.anchorX ?? 0}\n          anchorY={marker.customCallout?.anchorY ?? 0}\n          display={marker.customCallout?.display ?? 'ALWAYS'}\n          onCalloutTap={(id) => {\n            // 触发 onCalloutTap 事件\n            if (typeof props.onCalloutTap === 'function') {\n              props.onCalloutTap({\n                type: 'callouttap',\n                timeStamp: Date.now(),\n                target: {\n                  id: String(id) || '',\n                  tagName: 'callout',\n                  dataset: {},\n                },\n                currentTarget: {\n                  id: String(id) || '',\n                  tagName: 'callout',\n                  dataset: {},\n                },\n                detail: { markerId: id },\n                preventDefault: () => {},\n                stopPropagation: () => {},\n              })\n            }\n          }}\n        >\n          {child.props.children}\n        </MapCustomCallout>\n      )\n    })\n  }\n}\n\nexport default createForwardRefComponent(Map)\n\n/**\n * @deprecated 请使用 Taro.createMapContext 代替\n *\n * 此导出仅用于向后兼容，将在未来版本中移除。\n *\n * 推荐用法：\n * ```tsx\n * import Taro from '@tarojs/taro'\n *\n * const mapCtx = Taro.createMapContext('mapId')\n * ```\n */\nexport { createMapContext } from './createMapContext'\n"],"names":["Map","props","forwardedRef","id","className","style","authKey","libraries","longitude","latitude","scale","minScale","maxScale","enableRotate","rotate","skew","markers","polyline","onTap","onAuthSuccess","onError","console","log","logPrefix","styleObj","undefined","normalizedMarkers","markerStyles","markerGeometries","forEach","m","index","markerId","String","_a","styleId","parseSize","size","parsed","parseInt","isNaN","markerWidth","width","markerHeight","height","anchor","x","y","iconPath","src","rotation","alpha","opacity","zIndex","push","position","lat","lng","normalizedPolylines","polylineStyles","polylineGeometries","line","lineIndex","points","length","color","Math","round","dashArray","dottedLine","paths","map","point","hasCenter","mergedOptions","center","zoom","minZoom","maxZoom","rotatable","pitch","handleMapClick","e","type","timeStamp","Date","now","target","tagName","dataset","currentTarget","detail","latLng","preventDefault","stopPropagation","mapInstance","setMapInstance","useState","handleMapInited","instance","registerMapInstance","settled","on","_res","errCode","errMsg","setTimeout","useEffect","unregisterMapInstance","_jsxs","TMap","ref","apiKey","options","onClick","onMapInited","children","_jsx","MultiMarker","styles","geometries","MultiPolyline","process","env","TARO_ENV","renderH5CustomCallouts","childrenArray","Children","toArray","calloutSlot","find","child","React","isValidElement","slot","innerCoverViews","marker","warn","MapCustomCallout","anchorX","_c","_b","customCallout","anchorY","_e","_d","display","_g","_f","onCalloutTap","createForwardRefComponent"],"mappings":"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"}

package/dist/components/picker/index.js

@@ -1,6 +1,7 @@
 import { __rest } from 'tslib';
 import './style/index.scss.js';
 import { View } from '@tarojs/components';
+import Taro from '@tarojs/taro';
 import classNames from 'classnames';
 import React__default from 'react';
 import { verifyValue, verifyTime, hoursRange, minutesRange, verifyDate, getYearRange, getMonthRange, getDayRange, compareTime, omit } from '../../utils/index.js';
@@ -127,12 +128,13 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       children,
       formType,
       lang,
-      theme = 'light'
+      theme = 'light',
+      enableClickItemScroll = true
     } = props,
-    restProps = __rest(props, ["mode", "disabled", "range", "rangeKey", "value", "start", "end", "fields", "headerText", "level", "regionData", "textProps", "colors", "onChange", "onColumnChange", "onCancel", "children", "formType", "lang", "theme"]);
+    restProps = __rest(props, ["mode", "disabled", "range", "rangeKey", "value", "start", "end", "fields", "headerText", "level", "regionData", "textProps", "colors", "onChange", "onColumnChange", "onCancel", "children", "formType", "lang", "theme", "enableClickItemScroll"]);
   const indexRef = React__default.useRef([]);
   const pickerDateRef = React__default.useRef();
-  // 记录是否是用户滚动
+  // region：首次用户滚动初始化完成前不入库
   const isInitializationCompletedRef = React__default.useRef(false);
   const [state, setState] = React__default.useState({
     pickerValue: value || EMPTY_ARRAY,
@@ -141,14 +143,47 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     hidden: true,
     fadeOut: false,
     isWillLoadCalled: false,
-    timestamp: 0 // 用以部分模式下强制刷新组件的的时间戳，多用于反复限位
+    a11yTimeLimitColumnId: null,
+    a11yTimeLimitNonce: 0
   });
+  // 安全区域底部距离
+  const [safeAreaBottom, setSafeAreaBottom] = React__default.useState(0);
   // 在组件内部
   const [columnsCount, setColumnsCount] = React__default.useState(() => getRegionColumnsCount(level));
   // 只在level变化时更新列数
   React__default.useEffect(() => {
     setColumnsCount(getRegionColumnsCount(level));
   }, [level]);
+  // 更新安全区域
+  const updateSafeArea = React__default.useCallback(() => {
+    try {
+      const systemInfo = Taro.getSystemInfoSync();
+      const {
+        safeArea,
+        windowHeight
+      } = systemInfo;
+      // safeArea.bottom 为安全区底边的 Y 坐标，有效值应接近 windowHeight；
+      // 全 0 表示安全区信息尚不可用，此时不能用 windowHeight-0 算出整屏高度作为底部间距
+      if (safeArea && windowHeight && safeArea.bottom > 0) {
+        const lengthScaleRatio = systemInfo.lengthScaleRatio || 1;
+        const bottom = (windowHeight - safeArea.bottom) / lengthScaleRatio;
+        setSafeAreaBottom(Math.max(0, bottom));
+      } else {
+        setSafeAreaBottom(0);
+      }
+    } catch (e) {
+      // H5 环境或其他异常情况，不设置安全区域
+      setSafeAreaBottom(0);
+    }
+  }, []);
+  // 初始化安全区域
+  React__default.useEffect(() => {
+    updateSafeArea();
+  }, [updateSafeArea]);
+  // 监听窗口变化（导航方式切换等）
+  Taro.useResize(() => {
+    updateSafeArea();
+  });
   // 获取当前索引数组
   const getIndices = React__default.useCallback(() => {
     return indexRef.current;
@@ -199,25 +234,36 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       const monthRange = getMonthRange(_start, _end, currentYear);
       const dayRange = getDayRange(_start, _end, currentYear, currentMonth);
       indexRef.current = [yearRange.indexOf(currentYear), monthRange.indexOf(currentMonth), dayRange.indexOf(currentDay)];
-      if (!pickerDateRef.current || pickerDateRef.current._value.getTime() !== _value.getTime() || pickerDateRef.current._start.getTime() !== _start.getTime() || pickerDateRef.current._end.getTime() !== _end.getTime()) {
-        pickerDateRef.current = {
-          _value,
-          _start,
-          _end,
-          _updateValue: [currentYear, currentMonth, currentDay]
-        };
-      }
+      // 与 props 同步时始终刷新 _updateValue，避免取消后再开时日列草稿与索引不一致
+      pickerDateRef.current = {
+        _value,
+        _start,
+        _end,
+        _updateValue: [currentYear, currentMonth, currentDay]
+      };
     } else if (mode === 'region') {
       // region 模式处理 - 验证数据
       if (!regionData) {
         console.error('Picker: regionData is required for region mode');
-        indexRef.current = [0];
+        indexRef.current = Array.from({
+          length: columnsCount
+        }, () => 0);
+        setState(prev => Object.assign(Object.assign({}, prev), {
+          selectedIndices: [...indexRef.current],
+          pickerValue: value || EMPTY_ARRAY
+        }));
         return;
       }
       const validation = validateRegionData(regionData, 'Picker');
       if (!validation.valid) {
         console.error(validation.error);
-        indexRef.current = [0];
+        indexRef.current = Array.from({
+          length: columnsCount
+        }, () => 0);
+        setState(prev => Object.assign(Object.assign({}, prev), {
+          selectedIndices: [...indexRef.current],
+          pickerValue: value || EMPTY_ARRAY
+        }));
         return;
       }
       // 获取列数
@@ -264,16 +310,18 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       handleProps();
     }
   }, [handleProps, state.isWillLoadCalled, JSON.stringify(value)]);
-  // 显示 Picker
+  // 打开时按 props 重算索引，避免未确认的滑动与 indexRef 残留导致再开抖动
   const showPicker = React__default.useCallback(() => {
     if (disabled) return;
+    // 打开弹层时再读一次：此时安全区必然已稳定，避免 mount 首帧拿到全 0 的无效值
+    updateSafeArea();
     isInitializationCompletedRef.current = false;
-    const newIndices = getIndices();
+    handleProps();
     setState(prev => Object.assign(Object.assign({}, prev), {
-      selectedIndices: newIndices,
-      hidden: false
+      hidden: false,
+      a11yTimeLimitColumnId: null
     }));
-  }, [disabled, getIndices]);
+  }, [disabled, handleProps, updateSafeArea]);
   // 隐藏 Picker
   const hidePicker = React__default.useCallback(() => {
     isInitializationCompletedRef.current = false;
@@ -348,11 +396,11 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
         finalIndices = [...newIndices];
         hasLimited = true;
       }
-      // 触发限位，更新状态，其它状态不用主动触发滚动
       if (hasLimited) {
         setState(prev => Object.assign(Object.assign({}, prev), {
           selectedIndices: finalIndices,
-          timestamp: Date.now()
+          a11yTimeLimitColumnId: columnId,
+          a11yTimeLimitNonce: prev.a11yTimeLimitNonce + 1
         }));
       } else {
         setState(prev => Object.assign(Object.assign({}, prev), {
@@ -585,11 +633,17 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       }
     });
   }, [onColumnChange]);
-  // 处理取消
+  const consumeTimeA11yLimitFocus = React__default.useCallback(() => {
+    setState(prev => Object.assign(Object.assign({}, prev), {
+      a11yTimeLimitColumnId: null
+    }));
+  }, []);
+  // 取消时按 props 回同步索引，避免与 value 脱节
   const handleCancel = React__default.useCallback(() => {
+    handleProps();
     hidePicker();
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-  }, [hidePicker, onCancel]);
+  }, [handleProps, hidePicker, onCancel]);
   // 渲染选择器组
   const renderPickerGroup = React__default.useMemo(() => {
     switch (mode) {
@@ -603,11 +657,16 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             columnId: String(index),
             selectedIndex: state.selectedIndices[index] // 传递对应列的selectedIndex
             ,
-            colors: colors
+            colors: colors,
+            enableClickItemScroll: enableClickItemScroll
           }, index));
         }
       case 'time':
         {
+          const timeA11yLimitFocus = state.a11yTimeLimitColumnId != null ? {
+            nonce: state.a11yTimeLimitNonce,
+            columnId: state.a11yTimeLimitColumnId
+          } : null;
           return [/*#__PURE__*/jsx(PickerGroup, {
             mode: "time",
             range: hoursRange,
@@ -615,16 +674,24 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             columnId: "0",
             selectedIndex: state.selectedIndices[0] // 传递小时列的selectedIndex
             ,
-            colors: colors
-          }, `hour-${state.timestamp}`), /*#__PURE__*/jsx(PickerGroup, {
+            colors: colors,
+            timeA11yLimitFocus: timeA11yLimitFocus,
+            onTimeA11yLimitFocusConsumed: consumeTimeA11yLimitFocus,
+            timeA11yLimitEventNonce: state.a11yTimeLimitNonce,
+            enableClickItemScroll: enableClickItemScroll
+          }, "hour"), /*#__PURE__*/jsx(PickerGroup, {
             mode: "time",
             range: minutesRange,
             updateIndex: updateIndex,
             columnId: "1",
             selectedIndex: state.selectedIndices[1] // 传递分钟列的selectedIndex
             ,
-            colors: colors
-          }, `minute-${state.timestamp}`)];
+            colors: colors,
+            timeA11yLimitFocus: timeA11yLimitFocus,
+            onTimeA11yLimitFocusConsumed: consumeTimeA11yLimitFocus,
+            timeA11yLimitEventNonce: state.a11yTimeLimitNonce,
+            enableClickItemScroll: enableClickItemScroll
+          }, "minute")];
         }
       case 'date':
         {
@@ -649,7 +716,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             columnId: "0",
             selectedIndex: state.selectedIndices[0] // 传递年份列的selectedIndex
             ,
-            colors: colors
+            colors: colors,
+            enableClickItemScroll: enableClickItemScroll
           }, `year`)];
           if (fields === 'month' || fields === 'day') {
             renderView.push(/*#__PURE__*/jsx(PickerGroup, {
@@ -660,7 +728,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
               columnId: "1",
               selectedIndex: state.selectedIndices[1] // 传递月份列的selectedIndex
               ,
-              colors: colors
+              colors: colors,
+              enableClickItemScroll: enableClickItemScroll
             }, `month`));
           }
           if (fields === 'day') {
@@ -672,7 +741,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
               columnId: "2",
               selectedIndex: state.selectedIndices[2] // 传递日期列的selectedIndex
               ,
-              colors: colors
+              colors: colors,
+              enableClickItemScroll: enableClickItemScroll
             }, `day`));
           }
           return renderView;
@@ -707,7 +777,8 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
               updateIndex: updateIndex,
               columnId: String(i),
               selectedIndex: state.selectedIndices[i],
-              colors: colors
+              colors: colors,
+              enableClickItemScroll: enableClickItemScroll
             }, `region-${i}`));
           }
           return columns;
@@ -720,10 +791,11 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
           columnId: "0",
           selectedIndex: state.selectedIndices[0] // 传递selector模式的selectedIndex
           ,
-          colors: colors
+          colors: colors,
+          enableClickItemScroll: enableClickItemScroll
         });
     }
-  }, [mode, range, rangeKey, fields, updateIndex, updateDay, handleColumnChange, pickerDateRef.current, level, regionData, state.selectedIndices, columnsCount, lang, colors]);
+  }, [mode, range, rangeKey, fields, updateIndex, updateDay, handleColumnChange, pickerDateRef.current, level, regionData, state.selectedIndices, state.a11yTimeLimitColumnId, state.a11yTimeLimitNonce, consumeTimeA11yLimitFocus, columnsCount, lang, colors, enableClickItemScroll]);
   // 动画类名控制逻辑
   const clsMask = classNames('taro-picker__mask-overlay', 'taro-picker__animate-fade-in', {
     'taro-picker__animate-fade-out': state.fadeOut
@@ -737,6 +809,9 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const titleStyle = colors.titleColor ? {
     color: colors.titleColor
   } : null;
+  const maskOverlayStyle = colors.maskColor ? {
+    backgroundColor: colors.maskColor
+  } : undefined;
   // 暴露方法给外部
   React__default.useImperativeHandle(ref, () => ({
     showPicker,
@@ -755,15 +830,14 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       onClick: showPicker,
       children: children
     }), !state.hidden && /*#__PURE__*/jsxs(View, {
-      className: "taro-picker__overlay",
+      className: classNames('taro-picker__overlay', `taro-picker__overlay--theme-${theme}`),
       children: [/*#__PURE__*/jsx(View, {
         className: clsMask,
+        style: maskOverlayStyle,
         onClick: handleCancel
       }), /*#__PURE__*/jsxs(View, {
         className: clsSlider,
-        ...(backgroundStyle ? {
-          style: backgroundStyle
-        } : {}),
+        style: Object.assign({}, backgroundStyle),
         children: [/*#__PURE__*/jsxs(View, {
           className: "taro-picker__hd",
           ...(backgroundStyle ? {
@@ -796,6 +870,13 @@ const Picker = /*#__PURE__*/React__default.forwardRef((props, ref) => {
             style: backgroundStyle
           } : {}),
           children: renderPickerGroup
+        }), safeAreaBottom > 0 && /*#__PURE__*/jsx(View, {
+          className: "taro-picker__bd",
+          style: Object.assign(Object.assign({}, backgroundStyle), {
+            height: `${safeAreaBottom}px`,
+            flex: 'none',
+            overflow: 'visible'
+          })
         })]
       })]
     })]