@arco-design/mobile-react 2.35.2 → 2.36.1

package/esnext/popover/hooks/usePosition.js

@@ -161,24 +161,44 @@ export const usePosition = (props, popoverRef, childRef, wrapperRef) => {
         // 垂直方向安全距离调整
         // @en Vertical safety distance adjustment
         if (verticalAuto) {
-            const popoverTop = childRect.bottom -
-                (newConfig.bottom && newConfig.height ? newConfig.bottom + newConfig.height : 0);
-            const 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) {
+            const 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
+            };
+            const 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
+            const isPopoverTooTall = window.innerHeight - topOffset - bottomOffset <
+                2 * (newConfig.height || 0) + 2 * verticalOffset + childRect.height;
+            if (isPopoverTooTall) {
+                const spaceAbove = childRect.top;
+                const spaceBelow = window.innerHeight - childRect.bottom;
+                spaceAbove > spaceBelow ? setToTop() : setToBottom();
+            }
+            else {
+                const popoverTop = childRect.bottom -
+                    (newConfig.bottom && newConfig.height
+                        ? newConfig.bottom + newConfig.height
+                        : 0);
+                const 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();
+                }
             }
         }
         // 挂载在全局的气泡需要计算相对屏幕的位置

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.1",
     "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.1",
         "@arco-design/transformable": "^1.0.0",
         "@babel/runtime": "^7",
         "lodash.throttle": "^4.1.1",
@@ -47,5 +47,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a60bba95c16b19816c23b4e59b4db57d16137589"
+    "gitHead": "b7c3cd986250450f6433c906cf68bd550883fc7c"
 }

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;

package/tokens/app/arcodesign/default/index.js

@@ -1103,7 +1103,17 @@ var tokens = {
   "dark-uploader-disabled-delete-icon-color": "var(--dark-disabled-color)",
   "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)"
+  "uploader-item-text-error-color": "var(--danger-color)",
+  "date-picker-range-font-size": "0.32rem",
+  "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 0.32rem",
+  "date-picker-range-show-min-height": "0.96rem",
+  "date-picker-range-separate-min-width": "0.96rem"
 };
 var _default = tokens;
 exports["default"] = _default;

package/tokens/app/arcodesign/default/index.json

@@ -2699,6 +2699,30 @@
         "jsValue": "#F76965",
         "staticValue": "#F76965"
     },
+    "darkDatePickerRangeBackgroundColor": {
+        "cssKey": "dark-date-picker-range-background-color",
+        "desc": "",
+        "override": "",
+        "value": "#1E1E1E",
+        "jsValue": "#1E1E1E",
+        "staticValue": "#1E1E1E"
+    },
+    "darkDatePickerRangeDisabledFontColor": {
+        "cssKey": "dark-date-picker-range-disabled-font-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-disabled-color",
+        "jsValue": "@global@darkDisabledColor",
+        "staticValue": "#5f5f60"
+    },
+    "darkDatePickerRangeFontColor": {
+        "cssKey": "dark-date-picker-range-font-color",
+        "desc": "",
+        "override": "",
+        "value": "@dark-font-color",
+        "jsValue": "@global@darkFontColor",
+        "staticValue": "#f6f6f6"
+    },
     "darkDialogBodyAndroidColor": {
         "cssKey": "dark-dialog-body-android-color",
         "desc": "",
@@ -4355,6 +4379,90 @@
         "jsValue": "#FF9626",
         "staticValue": "#FF9626"
     },
+    "datePickerRangeBackgroundColor": {
+        "cssKey": "date-picker-range-background-color",
+        "desc": "日期时间范围选择器背景颜色",
+        "override": "",
+        "value": "#FBFCFC",
+        "jsValue": "#FBFCFC",
+        "staticValue": "#FBFCFC",
+        "localeDesc": {
+            "ch": "日期时间范围选择器背景颜色",
+            "en": "Background color of the date picker range when checked"
+        }
+    },
+    "datePickerRangeDisabledFontColor": {
+        "cssKey": "date-picker-range-disabled-font-color",
+        "desc": "日期时间范围选择器未选中时文字颜色",
+        "override": "",
+        "value": "@disabled-color",
+        "jsValue": "@global@disabledColor",
+        "staticValue": "#c9cdd4",
+        "localeDesc": {
+            "ch": "日期时间范围选择器未选中时文字颜色",
+            "en": "Font color of the date picker range when disabled"
+        }
+    },
+    "datePickerRangeFontColor": {
+        "cssKey": "date-picker-range-font-color",
+        "desc": "日期时间范围选择器选中时文字颜色",
+        "override": "",
+        "value": "@font-color",
+        "jsValue": "@global@fontColor",
+        "staticValue": "#1d2129",
+        "localeDesc": {
+            "ch": "日期时间范围选择器选中时文字颜色",
+            "en": "Font color of the date picker range when checked"
+        }
+    },
+    "datePickerRangeFontSize": {
+        "cssKey": "date-picker-range-font-size",
+        "desc": "日期时间范围选择器文字大小",
+        "override": "",
+        "value": "~`pxtorem(16)`",
+        "jsValue": "@getRem@16",
+        "staticValue": "0.32rem",
+        "localeDesc": {
+            "ch": "日期时间范围选择器文字大小",
+            "en": "Font size of the date picker range"
+        }
+    },
+    "datePickerRangeSeparateMinWidth": {
+        "cssKey": "date-picker-range-separate-min-width",
+        "desc": "日期时间范围选择器展示区域分隔符最小宽度",
+        "override": "",
+        "value": "~`pxtorem(48)`",
+        "jsValue": "@getRem@48",
+        "staticValue": "0.96rem",
+        "localeDesc": {
+            "ch": "日期时间范围选择器展示区域分隔符最小宽度",
+            "en": "Min width of the date picker range separate"
+        }
+    },
+    "datePickerRangeShowMinHeight": {
+        "cssKey": "date-picker-range-show-min-height",
+        "desc": "日期时间范围选择器展示区域最小高度",
+        "override": "",
+        "value": "~`pxtorem(48)`",
+        "jsValue": "@getRem@48",
+        "staticValue": "0.96rem",
+        "localeDesc": {
+            "ch": "日期时间范围选择器展示区域最小高度",
+            "en": "Min height of the date picker range area"
+        }
+    },
+    "datePickerRangeShowPadding": {
+        "cssKey": "date-picker-range-show-padding",
+        "desc": "日期时间范围选择器展示区域外边距大小",
+        "override": "",
+        "value": "0 ~`pxtorem(16)`",
+        "jsValue": "0 @getRem@16",
+        "staticValue": "0 0.32rem",
+        "localeDesc": {
+            "ch": "日期时间范围选择器展示区域外边距大小",
+            "en": "Margin of the date picker range area"
+        }
+    },
     "dialogAndroidBodyFooterGutter": {
         "cssKey": "dialog-android-body-footer-gutter",
         "desc": "对话框 body 和 footer 的间距 (android)",

package/tokens/app/arcodesign/default/index.less

@@ -1092,4 +1092,14 @@
 @uploader-disabled-delete-icon-color: @disabled-color;
 @dark-uploader-item-text-error-color: @dark-danger-color;
 @uploader-item-text-error-color: @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: @dark-font-color;
+@date-picker-range-font-color: @font-color;
+@dark-date-picker-range-disabled-font-color: @dark-disabled-color;
+@date-picker-range-disabled-font-color: @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/umd/_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/umd/_helpers/hooks.js

@@ -283,29 +283,36 @@
   /**
    * 从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 });
    * ```
    */
 
 
-  function useSystem() {
+  function useSystem(options) {
     var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
         currentSystem = _useContext.system;
 
     var _useState5 = (0, _react.useState)(function () {
-      return currentSystem || (0, _mobileUtils.getSystem)();
+      return currentSystem || (0, _mobileUtils.getSystem)(options);
     }),
         system = _useState5[0],
         setSystem = _useState5[1];
 
     (0, _react.useEffect)(function () {
-      setSystem(currentSystem || (0, _mobileUtils.getSystem)());
-    }, [currentSystem]);
+      setSystem(currentSystem || (0, _mobileUtils.getSystem)(options));
+    }, [currentSystem, options]);
     return system;
   }
   /**