@arco-design/mobile-react 2.35.2 → 2.36.1

package/umd/date-picker/index.js

@@ -30,7 +30,7 @@
     if (key in _exports && _exports[key] === _type[key]) return;
     _exports[key] = _type[key];
   });
-  var _excluded = ["currentTs", "className", "visible", "onOk", "onChange", "onValueChange", "mode", "typeArr", "minTs", "maxTs", "formatter", "valueFilter", "columnsProcessor", "touchToStop", "useUTC", "renderLinkedContainer"];
+  var _excluded = ["currentTs", "className", "visible", "onOk", "onChange", "onValueChange", "mode", "typeArr", "minTs", "maxTs", "rangeItemFormat", "formatter", "valueFilter", "columnsProcessor", "touchToStop", "useUTC", "renderSeparator", "renderLinkedContainer"];
 
   function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -58,9 +58,10 @@
         _props$typeArr = props.typeArr,
         typeArr = _props$typeArr === void 0 ? [] : _props$typeArr,
         _props$minTs = props.minTs,
-        minTs = _props$minTs === void 0 ? initMinDate : _props$minTs,
+        userSetMinTs = _props$minTs === void 0 ? initMinDate : _props$minTs,
         _props$maxTs = props.maxTs,
-        maxTs = _props$maxTs === void 0 ? initMaxDate : _props$maxTs,
+        userSetMaxTs = _props$maxTs === void 0 ? initMaxDate : _props$maxTs,
+        rangeItemFormat = props.rangeItemFormat,
         _props$formatter = props.formatter,
         formatter = _props$formatter === void 0 ? defaultFormatter : _props$formatter,
         _props$valueFilter = props.valueFilter,
@@ -71,17 +72,40 @@
         touchToStop = props.touchToStop,
         _props$useUTC = props.useUTC,
         useUTC = _props$useUTC === void 0 ? false : _props$useUTC,
+        renderSeparator = props.renderSeparator,
         renderLinkedContainer = props.renderLinkedContainer,
         otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-    var currentTs = Math.min(maxTs, Math.max(minTs, userSetCurrentTs));
+    var isRange = typeof userSetCurrentTs !== 'number';
 
-    var _useState = (0, _react.useState)([[]]),
-        data = _useState[0],
-        setData = _useState[1];
+    var _useState = (0, _react.useState)(userSetCurrentTs[0]),
+        leftTimeValue = _useState[0],
+        setLeftTimeValue = _useState[1];
 
-    var _useState2 = (0, _react.useState)([]),
-        value = _useState2[0],
-        setValue = _useState2[1];
+    var _useState2 = (0, _react.useState)(userSetCurrentTs[1]),
+        rightTimeValue = _useState2[0],
+        setRightTimeValue = _useState2[1];
+
+    var _useState3 = (0, _react.useState)(0),
+        activeTabIndex = _useState3[0],
+        setActiveTabIndex = _useState3[1];
+
+    var _useMemo = (0, _react.useMemo)(function () {
+      return _updateTimeScope();
+    }, [userSetMinTs, userSetMaxTs, activeTabIndex]),
+        minTs = _useMemo[0],
+        maxTs = _useMemo[1];
+
+    var _useState4 = (0, _react.useState)(isRange ? Math.min(maxTs, Math.max(minTs, userSetCurrentTs[0])) : Math.min(maxTs, Math.max(minTs, userSetCurrentTs))),
+        currentTs = _useState4[0],
+        setCurrentTs = _useState4[1];
+
+    var _useState5 = (0, _react.useState)([[]]),
+        data = _useState5[0],
+        setData = _useState5[1];
+
+    var _useState6 = (0, _react.useState)([]),
+        value = _useState6[0],
+        setValue = _useState6[1];
 
     var currentDateObjRef = (0, _react.useRef)(_convertTsToDateObj(currentTs));
     var minDateObjRef = (0, _react.useRef)(_convertTsToDateObj(minTs));
@@ -89,7 +113,36 @@
     var keyOptions = (0, _react.useMemo)(function () {
       return _getKeyOptions();
     }, [mode, typeArr]);
+    var leftTimeString = (0, _react.useMemo)(function () {
+      return _getRangeItemValue(leftTimeValue);
+    }, [leftTimeValue]);
+    var rightTimeString = (0, _react.useMemo)(function () {
+      return _getRangeItemValue(rightTimeValue);
+    }, [rightTimeValue]);
     var pickerRef = (0, _react.useRef)(null);
+
+    function _updateRangeValue(nowCurrentTs) {
+      var leftMinTs = typeof userSetMinTs !== 'number' ? userSetMinTs.startTs : userSetMinTs;
+      var rightMinTs = typeof userSetMinTs !== 'number' ? userSetMinTs.endTs : userSetMinTs;
+      var leftMaxTs = typeof userSetMaxTs !== 'number' ? userSetMaxTs.startTs : userSetMaxTs;
+      var rightMaxTs = typeof userSetMaxTs !== 'number' ? userSetMaxTs.endTs : userSetMaxTs;
+
+      if (isRange) {
+        var 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);
+      }
+    }
+
     (0, _react.useImperativeHandle)(ref, function () {
       return {
         dom: pickerRef.current ? pickerRef.current.dom : null
@@ -113,6 +166,65 @@
       };
     }
 
+    function _parseFormat(format, timeValue) {
+      var year = timeValue.year,
+          month = timeValue.month,
+          date = timeValue.date,
+          hour = timeValue.hour,
+          minute = timeValue.minute,
+          second = timeValue.second;
+
+      var padZero = function padZero(num, targetLength) {
+        if (targetLength === void 0) {
+          targetLength = 2;
+        }
+
+        var str = "" + num;
+
+        while (str.length < targetLength) {
+          str = "0" + str;
+        }
+
+        return str;
+      };
+
+      var replace = function 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(function (current, item) {
+        return replace(current, item[0], item[1]);
+      }, format);
+    }
+
+    function _getRangeItemValue(time) {
+      var timeValue = _convertTsToDateObj(time);
+
+      if (!isRange) {
+        return;
+      }
+
+      if (rangeItemFormat) {
+        return _parseFormat(rangeItemFormat, timeValue);
+      }
+
+      var format = function format(options, joinString) {
+        return options.filter(function (option) {
+          return keyOptions.includes(option);
+        }).map(function (option) {
+          return timeValue[option] < 10 ? "0" + timeValue[option] : "" + timeValue[option];
+        }).join(joinString);
+      };
+
+      var datePart = format(['year', 'month', 'date'], '/');
+      var timePart = format(['hour', 'minute', 'second'], ':');
+      return datePart + (datePart && timePart && ' ') + timePart;
+    }
+
     function _getSelectValue(columns) {
       var val = keyOptions.map(function (opt, index) {
         var _curCol$Math$max;
@@ -245,7 +357,7 @@
 
     function _handlePickerChange(values, index) {
       var type = keyOptions[index];
-      var nowDateObj = {};
+      var nowDateObj = currentDateObjRef.current;
       values.forEach(function (i, keyIndex) {
         nowDateObj[keyOptions[keyIndex]] = i;
       });
@@ -273,18 +385,35 @@
         setValue(val);
       }
 
+      setCurrentTs(_convertObjToTs(nowDateObj, currentTs));
+
       if (onValueChange) {
         onValueChange(_convertObjToTs(nowDateObj, currentTs), nowDateObj, index);
       }
     }
 
     function _handlePickerConfirm(values) {
-      var nowDateObj = {};
-      values.forEach(function (index, keyIndex) {
-        nowDateObj[keyOptions[keyIndex]] = index;
-      });
-
-      var newTs = _convertObjToTs(nowDateObj, currentTs);
+      var nowDateObj;
+      var newTs;
+
+      if (isRange) {
+        var leftTimeObj = _convertTsToDateObj(leftTimeValue);
+
+        var rightTimeObj = _convertTsToDateObj(rightTimeValue);
+
+        nowDateObj = keyOptions.reduce(function (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(function (index, keyIndex) {
+          nowDateObj[keyOptions[keyIndex]] = index;
+        });
+        newTs = _convertObjToTs(nowDateObj, currentTs);
+      }
 
       if (onOk) {
         onOk(newTs, nowDateObj);
@@ -318,6 +447,24 @@
       return options;
     }
 
+    function _updateTimeScope(isLeft) {
+      var 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);
+    }
+
     (0, _react.useEffect)(function () {
       minDateObjRef.current = _convertTsToDateObj(minTs);
       currentDateObjRef.current = _convertTsToDateObj(currentTs);
@@ -325,9 +472,45 @@
 
       _initData();
     }, [currentTs, minTs, maxTs, useUTC]);
+    (0, _react.useEffect)(function () {
+      var 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]);
+    (0, _react.useEffect)(function () {
+      _updateRangeValue(currentTs);
+    }, [currentTs]);
     (0, _react.useEffect)(function () {
       if (visible) {
-        currentDateObjRef.current = _convertTsToDateObj(currentTs);
+        // 初始化当前时间
+        if (isRange) {
+          setActiveTabIndex(0);
+          setLeftTimeValue(userSetCurrentTs[0]);
+          setRightTimeValue(userSetCurrentTs[1]);
+
+          var _updateTimeScope2 = _updateTimeScope(true),
+              nowMinTs = _updateTimeScope2[0],
+              nowMaxTs = _updateTimeScope2[1];
+
+          var 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();
       }
@@ -344,6 +527,23 @@
         onPickerChange: _handlePickerChange,
         onOk: _handlePickerConfirm,
         touchToStop: touchToStop,
+        renderExtraHeader: isRange ? function () {
+          return /*#__PURE__*/_react.default.createElement("div", {
+            className: prefixCls + "-date-picker-show"
+          }, /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _mobileUtils.cls)("" + (activeTabIndex === 0 ? prefixCls + "-date-picker-range-item-active" : ''), prefixCls + "-date-picker-range-item"),
+            onClick: function onClick() {
+              return _chooseTimeActive(0);
+            }
+          }, leftTimeString), renderSeparator ? renderSeparator() : /*#__PURE__*/_react.default.createElement("span", {
+            className: prefixCls + "-date-picker-show-separate"
+          }, "~"), /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _mobileUtils.cls)("" + (activeTabIndex === 1 ? prefixCls + "-date-picker-range-item-active" : ''), prefixCls + "-date-picker-range-item"),
+            onClick: function onClick() {
+              return _chooseTimeActive(1);
+            }
+          }, rightTimeString));
+        } : undefined,
         renderLinkedContainer: renderLinkedContainer ? function () {
           return renderLinkedContainer((0, _mobileUtils.isEmptyValue)(props.currentTs) ? undefined : currentTs, keyOptions);
         } : undefined

package/umd/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/umd/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/umd/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/umd/ellipsis/components/js-ellipsis.js

@@ -90,9 +90,11 @@
           currentText += temp;
           l = m;
         }
-      } // Remove the exclude char at the end of the content.
+      } // Remove the last character if it is orphaned high-surrogate characters (indicative of incomplete emoji).
 
 
+      currentText = currentText.replace(/[\uD800-\uDBFF]+$/, ''); // Remove the exclude char at the end of the content.
+
       while (endExcludes && endExcludes.includes(currentText[currentText.length - 1])) {
         currentText = currentText.slice(0, -1);
       } // Callback after reflow.

package/umd/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/umd/form/linked-container.js

@@ -50,7 +50,11 @@
 
     var className = prefixCls + "-form-picker-link-container";
     var dateTimeStr = (0, _react.useMemo)(function () {
-      return formatDateTimeStr(ts, types);
+      if (typeof ts === 'number') {
+        return formatDateTimeStr(ts, types);
+      }
+
+      return formatDateTimeStr(ts[0], types) + " ~ " + formatDateTimeStr(ts[1], types);
     }, [ts, types]);
 
     function formatDateTimeStr(timestamp, itemTypes) {

package/umd/picker/index.js

@@ -36,7 +36,7 @@
     if (key in _exports && _exports[key] === _type[key]) return;
     _exports[key] = _type[key];
   });
-  var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer"];
+  var _excluded = ["className", "itemStyle", "cascade", "cols", "rows", "data", "okText", "dismissText", "disabled", "clickable", "hideEmptyCols", "title", "visible", "value", "needBottomOffset", "onDismiss", "onOk", "onChange", "maskClosable", "onHide", "onPickerChange", "touchToStop", "gestureOutOfControl", "renderLinkedContainer", "renderExtraHeader"];
 
   function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -77,6 +77,7 @@
         _props$gestureOutOfCo = props.gestureOutOfControl,
         gestureOutOfControl = _props$gestureOutOfCo === void 0 ? true : _props$gestureOutOfCo,
         renderLinkedContainer = props.renderLinkedContainer,
+        renderExtraHeader = props.renderExtraHeader,
         otherProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
     var scrollValueRef = (0, _helpers.useLatestRef)(value);
     var domRef = (0, _react.useRef)(null);
@@ -223,7 +224,7 @@
       }, title), /*#__PURE__*/_react.default.createElement("div", {
         className: prefixCls + "-picker-header-btn right",
         onClick: handleConfirm
-      }, okText || (locale == null ? void 0 : locale.Picker.okText))), /*#__PURE__*/_react.default.createElement(_pickerView.default, {
+      }, okText || (locale == null ? void 0 : locale.Picker.okText))), renderExtraHeader && renderExtraHeader(), /*#__PURE__*/_react.default.createElement(_pickerView.default, {
         ref: pickerViewRef,
         data: data,
         cascade: cascade,

package/umd/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/umd/popover/hooks/usePosition.js

@@ -239,20 +239,38 @@
 
 
       if (verticalAuto) {
-        var popoverTop = childRect.bottom - (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
-        var popoverBottom = childRect.top + (newConfig.top && newConfig.height ? newConfig.top + newConfig.height : 0); // 顶部安全距离不够，调整到底部
-        // @en The top safety distance is not enough, adjust to the bottom
-
-        if (directionState.indexOf('top') !== -1 && popoverTop < topOffset) {
+        var setToBottom = function setToBottom() {
           newConfig.top = verticalOffset + childRect.height;
           newConfig.bottom = null;
           onAdjustDirection('bottom');
-        } else if (directionState.indexOf('bottom') !== -1 && popoverBottom + bottomOffset > window.innerHeight) {
-          // 底部安全距离不够，调整到顶部
-          // @en The bottom safety distance is not enough, adjust to the top
+        };
+
+        var setToTop = function setToTop() {
           newConfig.top = null;
           newConfig.bottom = verticalOffset + childRect.height;
           onAdjustDirection('top');
+        }; // 判断上下空间是否都不足以展示气泡内容
+        // @en Determine whether there is insufficient space both above and below to display content
+
+
+        var isPopoverTooTall = window.innerHeight - topOffset - bottomOffset < 2 * (newConfig.height || 0) + 2 * verticalOffset + childRect.height;
+
+        if (isPopoverTooTall) {
+          var spaceAbove = childRect.top;
+          var spaceBelow = window.innerHeight - childRect.bottom;
+          spaceAbove > spaceBelow ? setToTop() : setToBottom();
+        } else {
+          var popoverTop = childRect.bottom - (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
+          var popoverBottom = childRect.top + (newConfig.top && newConfig.height ? newConfig.top + newConfig.height : 0); // 顶部安全距离不够，调整到底部
+          // @en The top safety distance is not enough, adjust to the bottom
+
+          if (directionState.indexOf('top') !== -1 && popoverTop < topOffset) {
+            setToBottom();
+          } else if ( // 底部安全距离不够，调整到顶部
+          // @en The bottom safety distance is not enough, adjust to the top
+          directionState.indexOf('bottom') !== -1 && popoverBottom + bottomOffset > window.innerHeight) {
+            setToTop();
+          }
         }
       } // 挂载在全局的气泡需要计算相对屏幕的位置
       // @en Bubble mounted in the global needs to calculate the position relative to the screen

package/umd/search-bar/association.js

@@ -77,8 +77,8 @@
       return /*#__PURE__*/_react.default.createElement("div", {
         key: index,
         className: searchBarAssociationPrefixCls + "-item",
-        onClick: function onClick() {
-          return onAssociationItemClick == null ? void 0 : onAssociationItemClick(item, index);
+        onClick: function onClick(e) {
+          return onAssociationItemClick == null ? void 0 : onAssociationItemClick(item, index, e);
         }
       }, node);
     };

package/umd/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/umd/stepper/hooks/useValue.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "react"], factory);
+    define(["exports", "react", "es6-promise"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"));
+    factory(exports, require("react"), require("es6-promise"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.react);
+    factory(mod.exports, global.react, global.es6Promise);
     global.useValue = mod.exports;
   }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react, _es6Promise) {
   "use strict";
 
   _exports.__esModule = true;
@@ -32,7 +32,7 @@
       var tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
 
       if (formatter) {
-        new Promise(function (resolve) {
+        new _es6Promise.Promise(function (resolve) {
           resolve(formatter(Number(tempValue)));
         }).then(function (result) {
           var res = Math.max(min, Math.min(max, result));