@arco-design/mobile-react 2.35.2 → 2.36.0

package/esm/tabs/type.d.ts

@@ -561,8 +561,8 @@ export interface TabCellRef {
      */
     setCaterpillarAnimate: (ratio?: number) => void;
     /**
-     * 重新计算下划线样式
-     * @en Recalculate underline style
+     * 重新计算下划线样式（仅重算位置，如果 tab cell DOM 被人为改变，请调用 updateLayout）
+     * @en Recalculate underline style (only recalculate position, if the tab cell DOM is changed manually, please call updateLayout)
      */
     resetUnderlineStyle: () => void;
     /**

package/esnext/_helpers/hooks.d.ts

@@ -4,6 +4,7 @@
  * @name_en General Hooks
  */
 import React from 'react';
+import type { SystemOptions } from '@arco-design/mobile-utils';
 import { BezierType } from '../progress';
 /**
  * 监听页面resize事件的统一封装
@@ -130,15 +131,22 @@ export declare function useLatestRef<T>(variable: T): React.MutableRefObject<T>;
 /**
  * 从navigator.userAgent中获取当前操作系统，如果无法获取ua，则从ContextProvider传入的system中获取值
  * @desc {en} Get the current operating system from navigator.userAgent, if ua cannot be obtained, get the value from the system passed in by ContextProvider
- * @returns system 操作系统，"" | "pc" | "android" | "ios"
+ * @param options 配置选项
+ * @param {en} options  Configuration options
+ * @param options.detectHarmony 是否识别鸿蒙系统，默认为 false，鸿蒙系统会被识别为 android
+ * @param {en} options.detectHarmony Whether to detect HarmonyOS separately, default is false, HarmonyOS will be recognized as android
+ * @returns 返回当前设备的操作系统，可能的值包括 'android'、'ios'、'harmony' 或 'pc'，如果无法获取，则返回空字符串
+ * @returns {en} Returns the operating system of the current device, possible values are 'android', 'ios', 'harmony', or 'pc'. Returns an empty string if it cannot be obtained
  * @example
  * ```
  * import { useSystem } from '@arco-design/mobile-react/esm/_helpers/hooks';
  *
  * const system = useSystem();
+ * // Or with options
+ * const systemWithHarmony = useSystem({ detectHarmony: true });
  * ```
  */
-export declare function useSystem(): "" | "android" | "ios" | "pc";
+export declare function useSystem(options?: SystemOptions): "" | "android" | "harmony" | "ios" | "pc";
 /**
  * 获取页面视口宽高大小，并在页面有resize时更新大小
  * @desc {en} Get the width and height of the page viewport, and update the size when the page is resized

package/esnext/_helpers/hooks.js

@@ -206,20 +206,27 @@ export function useLatestRef(variable) {
 /**
  * 从navigator.userAgent中获取当前操作系统，如果无法获取ua，则从ContextProvider传入的system中获取值
  * @desc {en} Get the current operating system from navigator.userAgent, if ua cannot be obtained, get the value from the system passed in by ContextProvider
- * @returns system 操作系统，"" | "pc" | "android" | "ios"
+ * @param options 配置选项
+ * @param {en} options  Configuration options
+ * @param options.detectHarmony 是否识别鸿蒙系统，默认为 false，鸿蒙系统会被识别为 android
+ * @param {en} options.detectHarmony Whether to detect HarmonyOS separately, default is false, HarmonyOS will be recognized as android
+ * @returns 返回当前设备的操作系统，可能的值包括 'android'、'ios'、'harmony' 或 'pc'，如果无法获取，则返回空字符串
+ * @returns {en} Returns the operating system of the current device, possible values are 'android', 'ios', 'harmony', or 'pc'. Returns an empty string if it cannot be obtained
  * @example
  * ```
  * import { useSystem } from '@arco-design/mobile-react/esm/_helpers/hooks';
  *
  * const system = useSystem();
+ * // Or with options
+ * const systemWithHarmony = useSystem({ detectHarmony: true });
  * ```
  */
-export function useSystem() {
+export function useSystem(options) {
     const { system: currentSystem } = useContext(GlobalContext);
-    const [system, setSystem] = useState(() => currentSystem || getSystem());
+    const [system, setSystem] = useState(() => currentSystem || getSystem(options));
     useEffect(() => {
-        setSystem(currentSystem || getSystem());
-    }, [currentSystem]);
+        setSystem(currentSystem || getSystem(options));
+    }, [currentSystem, options]);
     return system;
 }
 /**

package/esnext/date-picker/index.js

@@ -11,15 +11,45 @@ const initMinDate = Date.now() - 10 * YEAR;
 const initMaxDate = Date.now() + 10 * YEAR;
 const initDate = Date.now();
 const DatePicker = forwardRef((props, ref) => {
-    const { currentTs: userSetCurrentTs = initDate, className = '', visible = false, onOk, onChange, onValueChange, mode = 'datetime', typeArr = [], minTs = initMinDate, maxTs = initMaxDate, formatter = defaultFormatter, valueFilter = () => true, columnsProcessor, touchToStop, useUTC = false, renderLinkedContainer, ...otherProps } = props;
-    const currentTs = Math.min(maxTs, Math.max(minTs, userSetCurrentTs));
+    const { currentTs: userSetCurrentTs = initDate, className = '', visible = false, onOk, onChange, onValueChange, mode = 'datetime', typeArr = [], minTs: userSetMinTs = initMinDate, maxTs: userSetMaxTs = initMaxDate, rangeItemFormat, formatter = defaultFormatter, valueFilter = () => true, columnsProcessor, touchToStop, useUTC = false, renderSeparator, renderLinkedContainer, ...otherProps } = props;
+    const isRange = typeof userSetCurrentTs !== 'number';
+    const [leftTimeValue, setLeftTimeValue] = useState(userSetCurrentTs[0]);
+    const [rightTimeValue, setRightTimeValue] = useState(userSetCurrentTs[1]);
+    const [activeTabIndex, setActiveTabIndex] = useState(0);
+    const [minTs, maxTs] = useMemo(() => {
+        return _updateTimeScope();
+    }, [userSetMinTs, userSetMaxTs, activeTabIndex]);
+    const [currentTs, setCurrentTs] = useState(isRange
+        ? Math.min(maxTs, Math.max(minTs, userSetCurrentTs[0]))
+        : Math.min(maxTs, Math.max(minTs, userSetCurrentTs)));
     const [data, setData] = useState([[]]);
     const [value, setValue] = useState([]);
     const currentDateObjRef = useRef(_convertTsToDateObj(currentTs));
     const minDateObjRef = useRef(_convertTsToDateObj(minTs));
     const maxDateObjRef = useRef(_convertTsToDateObj(maxTs));
     const keyOptions = useMemo(() => _getKeyOptions(), [mode, typeArr]);
+    const leftTimeString = useMemo(() => _getRangeItemValue(leftTimeValue), [leftTimeValue]);
+    const rightTimeString = useMemo(() => _getRangeItemValue(rightTimeValue), [rightTimeValue]);
     const pickerRef = useRef(null);
+    function _updateRangeValue(nowCurrentTs) {
+        const leftMinTs = typeof userSetMinTs !== 'number' ? userSetMinTs.startTs : userSetMinTs;
+        const rightMinTs = typeof userSetMinTs !== 'number' ? userSetMinTs.endTs : userSetMinTs;
+        const leftMaxTs = typeof userSetMaxTs !== 'number' ? userSetMaxTs.startTs : userSetMaxTs;
+        const rightMaxTs = typeof userSetMaxTs !== 'number' ? userSetMaxTs.endTs : userSetMaxTs;
+        if (isRange) {
+            let leftTime, rightTime;
+            if (activeTabIndex === 0) {
+                leftTime = nowCurrentTs;
+                rightTime = Math.min(rightMaxTs, Math.max(Math.max(leftTime, rightMinTs), rightTimeValue));
+            }
+            else {
+                rightTime = nowCurrentTs;
+                leftTime = Math.min(leftMaxTs, Math.max(leftMinTs, leftTimeValue));
+            }
+            setLeftTimeValue(leftTime);
+            setRightTimeValue(rightTime);
+        }
+    }
     useImperativeHandle(ref, () => ({
         dom: pickerRef.current ? pickerRef.current.dom : null,
     }));
@@ -34,6 +64,61 @@ const DatePicker = forwardRef((props, ref) => {
             dateObj,
         };
     }
+    function _parseFormat(format, timeValue) {
+        const { year, month, date, hour, minute, second } = timeValue;
+        const padZero = (num, targetLength = 2) => {
+            let str = `${num}`;
+            while (str.length < targetLength) {
+                str = `0${str}`;
+            }
+            return str;
+        };
+        const replace = (formatArg, str, num) => {
+            if (formatArg.includes(str)) {
+                return str !== 'Y'
+                    ? formatArg.replace(str.repeat(2), padZero(num)).replace(str, padZero(num))
+                    : formatArg
+                        .replace(str.repeat(4), padZero(num))
+                        .replace(str.repeat(2), padZero(num))
+                        .replace(str, padZero(num));
+            }
+            return formatArg;
+        };
+        return [
+            ['Y', year],
+            ['M', month],
+            ['D', date],
+            ['H', hour],
+            ['m', minute],
+            ['s', second],
+        ].reduce((current, item) => {
+            return replace(current, item[0], item[1]);
+        }, format);
+    }
+    function _getRangeItemValue(time) {
+        const timeValue = _convertTsToDateObj(time);
+        if (!isRange) {
+            return;
+        }
+        if (rangeItemFormat) {
+            return _parseFormat(rangeItemFormat, timeValue);
+        }
+        const format = (options, joinString) => {
+            return options
+                .filter(option => {
+                return keyOptions.includes(option);
+            })
+                .map(option => {
+                return timeValue[option] < 10
+                    ? `0${timeValue[option]}`
+                    : `${timeValue[option]}`;
+            })
+                .join(joinString);
+        };
+        const datePart = format(['year', 'month', 'date'], '/');
+        const timePart = format(['hour', 'minute', 'second'], ':');
+        return datePart + (datePart && timePart && ' ') + timePart;
+    }
     function _getSelectValue(columns) {
         const val = keyOptions.map((opt, index) => {
             const curCol = columns[index] || [];
@@ -137,7 +222,7 @@ const DatePicker = forwardRef((props, ref) => {
     }
     function _handlePickerChange(values, index) {
         const type = keyOptions[index];
-        const nowDateObj = {};
+        const nowDateObj = currentDateObjRef.current;
         values.forEach((i, keyIndex) => {
             nowDateObj[keyOptions[keyIndex]] = i;
         });
@@ -155,16 +240,34 @@ const DatePicker = forwardRef((props, ref) => {
             setData(columns);
             setValue(val);
         }
+        setCurrentTs(_convertObjToTs(nowDateObj, currentTs));
         if (onValueChange) {
             onValueChange(_convertObjToTs(nowDateObj, currentTs), nowDateObj, index);
         }
     }
     function _handlePickerConfirm(values) {
-        const nowDateObj = {};
-        values.forEach((index, keyIndex) => {
-            nowDateObj[keyOptions[keyIndex]] = index;
-        });
-        const newTs = _convertObjToTs(nowDateObj, currentTs);
+        let nowDateObj;
+        let newTs;
+        if (isRange) {
+            const leftTimeObj = _convertTsToDateObj(leftTimeValue);
+            const rightTimeObj = _convertTsToDateObj(rightTimeValue);
+            nowDateObj = keyOptions.reduce((arr, key) => {
+                arr[0][key] = leftTimeObj[key];
+                arr[1][key] = rightTimeObj[key];
+                return arr;
+            }, [{}, {}]);
+            newTs = [
+                _convertObjToTs(nowDateObj[0], currentTs),
+                _convertObjToTs(nowDateObj[1], currentTs),
+            ];
+        }
+        else {
+            nowDateObj = {};
+            values.forEach((index, keyIndex) => {
+                nowDateObj[keyOptions[keyIndex]] = index;
+            });
+            newTs = _convertObjToTs(nowDateObj, currentTs);
+        }
         if (onOk) {
             onOk(newTs, nowDateObj);
         }
@@ -189,19 +292,73 @@ const DatePicker = forwardRef((props, ref) => {
         }
         return options;
     }
+    function _updateTimeScope(isLeft) {
+        let nowMaxTs, nowMinTs;
+        if (isLeft || activeTabIndex === 0) {
+            nowMaxTs = typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.startTs;
+            nowMinTs = Math.min(nowMaxTs, typeof userSetMinTs === 'number' ? userSetMinTs : userSetMinTs.startTs);
+        }
+        else {
+            nowMinTs = Math.max(Math.min(typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.startTs, leftTimeValue), typeof userSetMinTs === 'number' ? userSetMinTs : userSetMinTs.endTs);
+            nowMaxTs = Math.max(nowMinTs, typeof userSetMaxTs === 'number' ? userSetMaxTs : userSetMaxTs.endTs);
+        }
+        return [nowMinTs, nowMaxTs];
+    }
+    function _chooseTimeActive(index) {
+        setActiveTabIndex(index);
+    }
     useEffect(() => {
         minDateObjRef.current = _convertTsToDateObj(minTs);
         currentDateObjRef.current = _convertTsToDateObj(currentTs);
         maxDateObjRef.current = _convertTsToDateObj(maxTs);
         _initData();
     }, [currentTs, minTs, maxTs, useUTC]);
+    useEffect(() => {
+        let nowCurrentTs;
+        if (isRange) {
+            nowCurrentTs = Math.min(maxTs, Math.max(minTs, activeTabIndex === 0 ? leftTimeValue : rightTimeValue));
+            if (currentTs === nowCurrentTs) {
+                _updateRangeValue(currentTs);
+            }
+        }
+        else {
+            nowCurrentTs = Math.min(maxTs, Math.max(minTs, currentTs));
+        }
+        setCurrentTs(nowCurrentTs);
+    }, [minTs, maxTs]);
+    useEffect(() => {
+        _updateRangeValue(currentTs);
+    }, [currentTs]);
     useEffect(() => {
         if (visible) {
-            currentDateObjRef.current = _convertTsToDateObj(currentTs);
+            // 初始化当前时间
+            if (isRange) {
+                setActiveTabIndex(0);
+                setLeftTimeValue(userSetCurrentTs[0]);
+                setRightTimeValue(userSetCurrentTs[1]);
+                const [nowMinTs, nowMaxTs] = _updateTimeScope(true);
+                const nowCurrentTs = Math.min(nowMaxTs, Math.max(nowMinTs, userSetCurrentTs[0]));
+                setCurrentTs(nowCurrentTs);
+                if (currentTs === nowCurrentTs) {
+                    _updateRangeValue(currentTs);
+                }
+            }
+            else {
+                setCurrentTs(Math.min(maxTs, Math.max(minTs, userSetCurrentTs)));
+            }
             _initData();
         }
     }, [visible]);
-    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(Picker, Object.assign({}, otherProps, { ref: pickerRef, visible: visible, className: cls(className, `${prefixCls}-date-picker`), cascade: false, data: data, value: value, onPickerChange: _handlePickerChange, onOk: _handlePickerConfirm, touchToStop: touchToStop, renderLinkedContainer: renderLinkedContainer
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement(Picker, Object.assign({}, otherProps, { ref: pickerRef, visible: visible, className: cls(className, `${prefixCls}-date-picker`), cascade: false, data: data, value: value, onPickerChange: _handlePickerChange, onOk: _handlePickerConfirm, touchToStop: touchToStop, renderExtraHeader: isRange
+            ? () => (React.createElement("div", { className: `${prefixCls}-date-picker-show` },
+                React.createElement("span", { className: cls(`${activeTabIndex === 0
+                        ? `${prefixCls}-date-picker-range-item-active`
+                        : ''}`, `${prefixCls}-date-picker-range-item`), onClick: () => _chooseTimeActive(0) }, leftTimeString),
+                renderSeparator ? (renderSeparator()) : (React.createElement("span", { className: `${prefixCls}-date-picker-show-separate` }, "~")),
+                React.createElement("span", { className: cls(`${activeTabIndex === 1
+                        ? `${prefixCls}-date-picker-range-item-active`
+                        : ''}`, `${prefixCls}-date-picker-range-item`), onClick: () => _chooseTimeActive(1) }, rightTimeString)))
+            : undefined, renderLinkedContainer: renderLinkedContainer
             ? () => renderLinkedContainer(isEmptyValue(props.currentTs) ? undefined : currentTs, keyOptions)
             : undefined })))));
 });

package/esnext/date-picker/style/css/index.css

@@ -510,6 +510,41 @@
  * }
  * ```
  */
+.arco-date-picker-show {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  font-size:  0.32rem ;
+  padding:  0 0.32rem ;
+  color:  #c9cdd4 ;
+  min-height:  0.96rem ;
+  background-color:  #FBFCFC ;
+}
+.arco-date-picker-show > span {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+}
+.arco-date-picker-show-separate {
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 1 auto;
+          flex: 0 1 auto;
+  min-width:  0.96rem ;
+}
+.arco-date-picker-range-item {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+          flex: 1 0 auto;
+}
+.arco-date-picker-range-item-active {
+  color:  #1d2129 ;
+}
 /***************************************************
  *                                                 *
  *               Arco Theme Style                  *
@@ -523,4 +558,11 @@
   background:  #2e2e30 ;
   color:  #929293 ;
 }
+.arco-theme-dark .arco-date-picker-show {
+  color:  #5f5f60 ;
+  background-color:  #1E1E1E ;
+}
+.arco-theme-dark .arco-date-picker-range-item-active {
+  color:  #f6f6f6 ;
+}
 /********************* End *************************/

package/esnext/date-picker/style/index.less

@@ -1,7 +1,29 @@
 @import '../../../style/mixin.less';
 
 .@{prefix}-date-picker {
-
+    &-show {
+        display: flex;
+        .use-var(font-size, date-picker-range-font-size);
+        .use-var(padding, date-picker-range-show-padding);
+        .use-var(color, date-picker-range-disabled-font-color);
+        .use-var(min-height, date-picker-range-show-min-height);
+        .use-var(background-color, date-picker-range-background-color);
+        & > span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        &-separate {
+            flex: 0 1 auto;
+            .use-var(min-width, date-picker-range-separate-min-width);
+        }
+    }
+    &-range-item {
+        flex: 1 0 auto;
+        &-active {
+            .use-var(color, date-picker-range-font-color);
+        }
+    }
 }
 
 /***************************************************
@@ -26,5 +48,20 @@
       .use-var(color, dark-sub-info-font-color);
     }
   }
+  .@{prefix}-date-picker {
+    &-show {
+      @{arco-dark-mode-selector} & {
+        .use-var(color, dark-date-picker-range-disabled-font-color);
+        .use-var(background-color, dark-date-picker-range-background-color);
+      }
+    }
+    &-range-item {
+      &-active {
+        @{arco-dark-mode-selector} & {
+          .use-var(color, dark-date-picker-range-font-color);
+        }
+      }
+    }
+  }
 }
 /********************* End *************************/

package/esnext/date-picker/type.d.ts

@@ -40,18 +40,18 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * 点击选中时执行的回调
      * @en Callback when clicking OK
      */
-    onOk?: (timestamp: number, obj: IDateObj) => void;
+    onOk?: (timestamp: number | [number, number], obj: IDateObj | [IDateObj, IDateObj]) => void;
     /**
      * 当前选中的时间，timestamp
      * @en The currently selected time, timestamp
      * @default Date.now()
      */
-    currentTs?: number;
+    currentTs?: number | [number, number];
     /**
      * 选中后的回调
      * @en Callback when value is changed
      */
-    onChange?: (timestamp: number, obj: IDateObj) => void;
+    onChange?: (timestamp: number | [number, number], obj: IDateObj | [IDateObj, IDateObj]) => void;
     /**
      * 每列数据选择变化后的回调函数
      * @en The callback function after each column data selection changes
@@ -75,20 +75,31 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * @default 当前时间的前十年
      * @default_en 10 years ago from the current time
      */
-    minTs?: number;
+    minTs?: number | {
+        startTs: number;
+        endTs: number;
+    };
     /**
      * 最大可选日期，timestamp
      * @en Maximum selectable date, timestamp
      * @default 当前时间的后十年
      * @default_en Next decade from current time
      */
-    maxTs?: number;
+    maxTs?: number | {
+        startTs: number;
+        endTs: number;
+    };
     /**
      * 是否使用 UTC 时间
      * @en Whether to use UTC
      * @default false
      */
     useUTC?: boolean;
+    /**
+     * 日期时间范围选择展示格式
+     * @en Time range picker display format
+     */
+    rangeItemFormat?: string;
     /**
      * 各可选项展示的格式化方法，参数type为ItemTypes，参数value为当前行的值，返回展示的文字
      * @en The formatting method of each optional item, the parameter type is ItemTypes, the parameter value is the value of the current row, and the displayed text is returned.
@@ -106,9 +117,14 @@ export interface DatePickerProps extends Omit<PickerProps, 'data' | 'cascade' |
      * @en Selector list item intervention to insert custom options.
      */
     columnsProcessor?: (columns: PickerData[][], currentDateObj: IDateObj) => PickerData[][];
+    /**
+     * 自定义分隔符
+     * @en Defined separator area
+     */
+    renderSeparator?: () => React.ReactNode;
     /**
      * 将选择器的展现隐藏状态及选中值的展示与某个容器关联，传入后将同时渲染该容器和选择器组件，此时选择器组件的 visible 和 onHide 属性可不传，点击该容器会唤起选择器
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
-    renderLinkedContainer?: (currentTs: number | undefined, itemTypes: ItemType[]) => ReactNode;
+    renderLinkedContainer?: (currentTs: number | [number, number] | undefined, itemTypes: ItemType[]) => ReactNode;
 }

package/esnext/form/linked-container.d.ts

@@ -2,7 +2,7 @@
 export declare function DefaultPickerLinkedContainer({ value }: {
     value: (string | number)[];
 }): JSX.Element;
-export declare function DefaultDatePickerLinkedContainer({ ts, types }: {
-    ts: number;
+export declare function DefaultDatePickerLinkedContainer({ ts, types, }: {
+    ts: number | [number, number];
     types: string[];
 }): JSX.Element;

package/esnext/form/linked-container.js

@@ -7,10 +7,15 @@ export function DefaultPickerLinkedContainer({ value }) {
     const className = `${prefixCls}-form-picker-link-container`;
     return (React.createElement("div", { className: className }, value && value.length ? (value.join('-')) : (React.createElement("span", { className: `${className}-placeholder` }, locale?.Form.pickerDefaultHint))));
 }
-export function DefaultDatePickerLinkedContainer({ ts, types }) {
+export function DefaultDatePickerLinkedContainer({ ts, types, }) {
     const { prefixCls, locale } = useContext(GlobalContext);
     const className = `${prefixCls}-form-picker-link-container`;
-    const dateTimeStr = useMemo(() => formatDateTimeStr(ts, types), [ts, types]);
+    const dateTimeStr = useMemo(() => {
+        if (typeof ts === 'number') {
+            return formatDateTimeStr(ts, types);
+        }
+        return `${formatDateTimeStr(ts[0], types)} ~ ${formatDateTimeStr(ts[1], types)}`;
+    }, [ts, types]);
     function formatDateTimeStr(timestamp, itemTypes) {
         const dateObj = convertTsToDateObj(timestamp);
         const validDateObj = Object.keys(dateObj).reduce((acc, key) => ({

package/esnext/picker/index.js

@@ -7,7 +7,7 @@ import { useLatestRef, useListenResize } from '../_helpers';
 export * from './type';
 export { MultiPicker, PickerCell, Cascader } from '../picker-view';
 const Picker = forwardRef((props, ref) => {
-    const { className, itemStyle, cascade = true, cols = 3, rows = 5, data, okText, dismissText, disabled = false, clickable = true, hideEmptyCols = false, title = '', visible: userSetVisible, value, needBottomOffset = false, onDismiss, onOk, onChange, maskClosable = false, onHide, onPickerChange, touchToStop, gestureOutOfControl = true, renderLinkedContainer, ...otherProps } = props;
+    const { className, itemStyle, cascade = true, cols = 3, rows = 5, data, okText, dismissText, disabled = false, clickable = true, hideEmptyCols = false, title = '', visible: userSetVisible, value, needBottomOffset = false, onDismiss, onOk, onChange, maskClosable = false, onHide, onPickerChange, touchToStop, gestureOutOfControl = true, renderLinkedContainer, renderExtraHeader, ...otherProps } = props;
     const scrollValueRef = useLatestRef(value);
     const domRef = useRef(null);
     const pickerViewRef = useRef(null);
@@ -79,6 +79,7 @@ const Picker = forwardRef((props, ref) => {
                     React.createElement("div", { className: `${prefixCls}-picker-header-btn left`, onClick: handleDismiss }, dismissText || locale?.Picker.cancelText),
                     React.createElement("div", { className: `${prefixCls}-picker-header-title` }, title),
                     React.createElement("div", { className: `${prefixCls}-picker-header-btn right`, onClick: handleConfirm }, okText || locale?.Picker.okText)),
+                renderExtraHeader && renderExtraHeader(),
                 React.createElement(PickerView, { ref: pickerViewRef, data: data, cascade: cascade, cols: cols, rows: rows, disabled: disabled, value: value, onPickerChange: onPickerChange, itemStyle: itemStyle, clickable: clickable, hideEmptyCols: hideEmptyCols, touchToStop: touchToStop })))))));
 });
 /**

package/esnext/picker/type.d.ts

@@ -128,4 +128,9 @@ export interface PickerProps extends Omit<PopupProps, 'visible' | 'close' | 'chi
      * @en Associate the hidden state of the picker and the display of the selected value with a container. After passing it in, the container and the picker component will be rendered at the same time. At this time, the visible and onHide attributes of the picker component are optional values. Clicking the container will evoke the picker
      */
     renderLinkedContainer?: (value: ValueType[], data: PickerData[]) => ReactNode;
+    /**
+     * 自定义头部扩展区域
+     * @en Define the area of extra header
+     */
+    renderExtraHeader?: () => ReactNode;
 }

package/esnext/search-bar/association.js

@@ -36,7 +36,7 @@ export function SearchBarAssociation(props) {
         if (renderAssociationItem) {
             node = renderAssociationItem(item, index, node);
         }
-        return (React.createElement("div", { key: index, className: `${searchBarAssociationPrefixCls}-item`, onClick: () => onAssociationItemClick?.(item, index) }, node));
+        return (React.createElement("div", { key: index, className: `${searchBarAssociationPrefixCls}-item`, onClick: e => onAssociationItemClick?.(item, index, e) }, node));
     };
     const renderContent = () => {
         const associationContent = associationItems.map(renderItem);

package/esnext/search-bar/type.d.ts

@@ -57,7 +57,7 @@ export interface SearchBarAssociationProps<Data = Record<string, any>> {
      * 每行搜索结果的点击回调
      * @en Click callback for each row of search results
      */
-    onAssociationItemClick?: (item: SearchAssociationItem<Data>, index: number) => void;
+    onAssociationItemClick?: (item: SearchAssociationItem<Data>, index: number, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
      * 搜索联想框整体被点击的回调
      * @en The callback for the overall click of the search association box

package/esnext/stepper/hooks/useValue.js

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { Promise } from 'es6-promise';
 export default function useValue(params) {
     const { defaultValue, formatter, max, min, value, digits } = params;
     const [innerValue, setInnerValue] = useState(defaultValue);

package/esnext/tabs/index.js

@@ -247,7 +247,7 @@ const Tabs = forwardRef((props, ref) => {
     }
     function updateLayout() {
         const { width, height } = getOffset(domRef.current);
-        cellRef.current && cellRef.current.resetUnderlineStyle();
+        cellRef.current && cellRef.current.updateLayout();
         setWrapWidth(width || domRef.current?.offsetWidth || 0);
         setWrapHeight(height || domRef.current?.offsetHeight || 0);
         paneRef.current && paneRef.current.setCurrentHeight();

package/esnext/tabs/type.d.ts

@@ -561,8 +561,8 @@ export interface TabCellRef {
      */
     setCaterpillarAnimate: (ratio?: number) => void;
     /**
-     * 重新计算下划线样式
-     * @en Recalculate underline style
+     * 重新计算下划线样式（仅重算位置，如果 tab cell DOM 被人为改变，请调用 updateLayout）
+     * @en Recalculate underline style (only recalculate position, if the tab cell DOM is changed manually, please call updateLayout)
      */
     resetUnderlineStyle: () => void;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.35.2",
+    "version": "2.36.0",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "2.20.4",
+        "@arco-design/mobile-utils": "2.21.0",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a60bba95c16b19816c23b4e59b4db57d16137589"
+    "gitHead": "e61b011d31905626ef7082a4a29faf2a03db93cf"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -1093,4 +1093,14 @@
     --uploader-disabled-delete-icon-color: var(--disabled-color);
     --dark-uploader-item-text-error-color: var(--dark-danger-color);
     --uploader-item-text-error-color: var(--danger-color);
+    --date-picker-range-font-size: ~`pxtorem(16)`;
+    --date-picker-range-background-color: #FBFCFC;
+    --dark-date-picker-range-background-color: #1E1E1E;
+    --dark-date-picker-range-font-color: var(--dark-font-color);
+    --date-picker-range-font-color: var(--font-color);
+    --dark-date-picker-range-disabled-font-color: var(--dark-disabled-color);
+    --date-picker-range-disabled-font-color: var(--disabled-color);
+    --date-picker-range-show-padding: 0 ~`pxtorem(16)`;
+    --date-picker-range-show-min-height: ~`pxtorem(48)`;
+    --date-picker-range-separate-min-width: ~`pxtorem(48)`;
 }

package/tokens/app/arcodesign/default/index.d.ts

@@ -1092,6 +1092,16 @@ export interface ArcodesignToken extends Record<string, string> {
     'uploader-disabled-delete-icon-color': string;
     'dark-uploader-item-text-error-color': string;
     'uploader-item-text-error-color': string;
+    'date-picker-range-font-size': string;
+    'date-picker-range-background-color': string;
+    'dark-date-picker-range-background-color': string;
+    'dark-date-picker-range-font-color': string;
+    'date-picker-range-font-color': string;
+    'dark-date-picker-range-disabled-font-color': string;
+    'date-picker-range-disabled-font-color': string;
+    'date-picker-range-show-padding': string;
+    'date-picker-range-show-min-height': string;
+    'date-picker-range-separate-min-width': string;
 }
 declare const tokens: ArcodesignToken;
 export default tokens;