@arco-design/mobile-react 2.20.0 → 2.21.2

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

@@ -559,6 +559,16 @@
 @steps-vertical-padding-bottom: 0;
 @steps-vertical-padding-left: ~`pxtorem(20)`;
 @steps-process-with-config-item-icon-color: #FFFFFF;
+@swipe-action-open-transition: cubic-bezier(0.2, 0.8, 0.32, 1.28);
+@swipe-action-close-transition: cubic-bezier(0.34, 0.69, 0.1, 1);
+@swipe-action-info-padding: ~`pxtorem(16)`;
+@swipe-action-info-bounce-buffer: ~`pxtorem(30)`;
+@swipe-action-text-font-size: ~`pxtorem(16)`;
+@swipe-action-text-line-height: ~`pxtorem(22)`;
+@swipe-action-text-color: #ffffff;
+@swipe-action-icon-width: ~`pxtorem(20)`;
+@swipe-action-icon-height: ~`pxtorem(20)`;
+@swipe-action-icon-margin-right: ~`pxtorem(4)`;
 @badge-background-color: #F53F3F;
 @badge-text-color: #FFFFFF;
 @badge-font-size: 12PX;
@@ -646,6 +656,30 @@
 @action-sheet-header-padding: ~`pxtorem(16)`;
 @action-sheet-title-font-size: ~`pxtorem(16)`;
 @action-sheet-sub-title-font-size: ~`pxtorem(14)`;
+@search-bar-padding: ~`pxtorem(16)`;
+@search-bar-background-color: #FFFFFF;
+@search-bar-square-shape-border-radius: ~`pxtorem(2)`;
+@search-bar-round-shape-border-radius: ~`pxtorem(9999)`;
+@search-bar-input-wrapper-height: ~`pxtorem(36)`;
+@search-bar-input-wrapper-padding: ~`pxtorem(8)` ~`pxtorem(14)`;
+@search-bar-input-wrapper-background-color: #F2F3F5;
+@search-bar-input-wrapper-font-size: ~`pxtorem(14)`;
+@search-bar-input-height: ~`pxtorem(20)`;
+@search-bar-input-caret-color: @primary-color;
+@search-bar-input-placeholder-color: @disabled-color;
+@search-bar-prefix-margin-right: ~`pxtorem(9)`;
+@search-bar-clear-icon-color: #C9CDD4;
+@search-bar-search-icon-color: #86909C;
+@search-bar-search-icon-font-size: ~`pxtorem(16)`;
+@search-bar-cancel-btn-color: @primary-color;
+@search-bar-cancel-btn-font-size: ~`pxtorem(15)`;
+@search-bar-cancel-btn-margin-left: ~`pxtorem(16)`;
+@search-bar-association-background-color: #FFFFFF;
+@search-bar-association-item-height: ~`pxtorem(52)`;
+@search-bar-association-item-padding: ~`pxtorem(16)`;
+@search-bar-association-item-font-size: ~`pxtorem(15)`;
+@search-bar-association-item-color: @font-color;
+@search-bar-association-item-highlight-color: @primary-color;
 @image-picker-font-size: ~`pxtorem(14)`;
 @image-picker-disabled-opacity: 0.7;
 @image-picker-border-radius: ~`pxtorem(2)`;

package/umd/avatar/index.d.ts

@@ -9,7 +9,7 @@ declare const _default: React.ForwardRefExoticComponent<AvatarProps<ImageProps &
 /**
  * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
  * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 头像
  * @name_en Avatar

package/umd/avatar/index.js

@@ -171,7 +171,7 @@
   /**
    * 头像展示组件，支持圆形和方形两种形状，支持图片文字头像，支持五种尺寸。
    * @en Avatar component supports two shapes of circle and square, supports pictures or text avatars, with five sizes.
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    * @name 头像
    * @name_en Avatar

package/umd/badge/index.d.ts

@@ -71,7 +71,7 @@ export interface BadgeRef {
 /**
  * 在右上角展示徽标数字或小红点
  * @en Display the badge number or small red dot in the upper right corner
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 徽标
  * @name_en Badge

package/umd/badge/index.js

@@ -27,7 +27,7 @@
   /**
    * 在右上角展示徽标数字或小红点
    * @en Display the badge number or small red dot in the upper right corner
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    * @name 徽标
    * @name_en Badge

package/umd/button/style/css/index.css

@@ -18,14 +18,21 @@
   user-select: none;
   /* Non-prefixed version, currently*/
 }
-.arco-button-inline {
+.arco-button.arco-button-inline {
   width: auto;
   display: inline-block;
 }
-.arco-button-type-ghost {
+.arco-button.arco-button-type-ghost {
   background:  transparent ;
   color:  #165dff ;
 }
+.arco-button.arco-button-type-ghost-disabled {
+  background:  transparent ;
+  color:  #94bfff ;
+}
+.arco-button.arco-button-type-ghost-active {
+  background:  #e8f3ff ;
+}
 .arco-button-type-ghost .bg-color-with-config {
   background: #165dff;
 }
@@ -38,17 +45,17 @@
 .arco-button-type-ghost .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button-type-ghost-disabled {
-  background:  transparent ;
-  color:  #94bfff ;
-}
-.arco-button-type-ghost-active {
-  background:  #e8f3ff ;
-}
-.arco-button-type-default {
+.arco-button.arco-button-type-default {
   background:  #E8F3FF ;
   color:  #165dff ;
 }
+.arco-button.arco-button-type-default-disabled {
+  background:  #E8F3FF ;
+  color:  #94bfff ;
+}
+.arco-button.arco-button-type-default-active {
+  background:  #94bfff ;
+}
 .arco-button-type-default .bg-color-with-config {
   background: #165dff;
 }
@@ -61,16 +68,16 @@
 .arco-button-type-default .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button-type-default-disabled {
-  background:  #E8F3FF ;
-  color:  #94bfff ;
+.arco-button.arco-button-type-primary {
+  background:  #165dff ;
+  color:  #fff ;
 }
-.arco-button-type-default-active {
+.arco-button.arco-button-type-primary-disabled {
   background:  #94bfff ;
+  color:  #E8F3FF ;
 }
-.arco-button-type-primary {
-  background:  #165dff ;
-  color:  #fff ;
+.arco-button.arco-button-type-primary-active {
+  background:  #0E42D2 ;
 }
 .arco-button-type-primary .bg-color-with-config {
   background: #fff;
@@ -84,108 +91,101 @@
 .arco-button-type-primary .stroke-color-with-config {
   stroke: #fff;
 }
-.arco-button-type-primary-disabled {
-  background:  #94bfff ;
-  color:  #E8F3FF ;
-}
-.arco-button-type-primary-active {
-  background:  #0E42D2 ;
-}
-.arco-button-type-ghost {
+.arco-button.arco-button-type-ghost {
   border: 1PX solid currentColor;
 }
-.arco-button-type-ghost.half-border {
+.arco-button.arco-button-type-ghost.half-border {
   border-width: 0;
   box-shadow: 0 0 0 1PX currentColor inset;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button-type-ghost.half-border {
+  .arco-button.arco-button-type-ghost.half-border {
     box-shadow: 0 0 0 0.5PX currentColor inset;
   }
 }
-.ios .arco-button-type-ghost.half-border,
-.arco-button-type-ghost.half-border.ios {
+.ios .arco-button.arco-button-type-ghost.half-border,
+.arco-button.arco-button-type-ghost.half-border.ios {
   box-shadow: none;
   border: 0.5PX solid currentColor;
 }
-.arco-button-size-mini {
+.arco-button.arco-button-size-mini {
   padding:  0 0.16rem ;
   height:  0.48rem ;
 }
-.arco-button-size-mini-is-round {
+.arco-button.arco-button-size-mini-is-round {
   border-radius:  0.48rem ;
 }
-.arco-button-size-mini-is-square {
+.arco-button.arco-button-size-mini-is-square {
   border-radius: 0;
 }
-.arco-button-size-mini .arco-button-icon,
-.arco-button-size-mini i,
-.arco-button-size-mini .arco-button-text,
-.arco-button-size-mini svg {
+.arco-button.arco-button-size-mini .arco-button-icon,
+.arco-button.arco-button-size-mini i,
+.arco-button.arco-button-size-mini .arco-button-text,
+.arco-button.arco-button-size-mini svg {
   font-size:  0.24rem ;
 }
-.arco-button-size-small {
+.arco-button.arco-button-size-small {
   padding:  0 0.16rem ;
   height:  0.56rem ;
 }
-.arco-button-size-small-is-round {
+.arco-button.arco-button-size-small-is-round {
   border-radius:  0.56rem ;
 }
-.arco-button-size-small-is-square {
+.arco-button.arco-button-size-small-is-square {
   border-radius: 0;
 }
-.arco-button-size-small .arco-button-icon,
-.arco-button-size-small i,
-.arco-button-size-small .arco-button-text,
-.arco-button-size-small svg {
+.arco-button.arco-button-size-small .arco-button-icon,
+.arco-button.arco-button-size-small i,
+.arco-button.arco-button-size-small .arco-button-text,
+.arco-button.arco-button-size-small svg {
   font-size:  0.28rem ;
 }
-.arco-button-size-medium {
+.arco-button.arco-button-size-medium {
   padding:  0 0.32rem ;
   height:  0.64rem ;
 }
-.arco-button-size-medium-is-round {
+.arco-button.arco-button-size-medium-is-round {
   border-radius:  0.64rem ;
 }
-.arco-button-size-medium-is-square {
+.arco-button.arco-button-size-medium-is-square {
   border-radius: 0;
 }
-.arco-button-size-medium .arco-button-icon,
-.arco-button-size-medium i,
-.arco-button-size-medium .arco-button-text,
-.arco-button-size-medium svg {
+.arco-button.arco-button-size-medium .arco-button-icon,
+.arco-button.arco-button-size-medium i,
+.arco-button.arco-button-size-medium .arco-button-text,
+.arco-button.arco-button-size-medium svg {
   font-size:  0.28rem ;
 }
-.arco-button-size-large {
+.arco-button.arco-button-size-large {
   padding:  0 0.32rem ;
   height:  0.72rem ;
 }
-.arco-button-size-large-is-round {
+.arco-button.arco-button-size-large-is-round {
   border-radius:  0.72rem ;
 }
-.arco-button-size-large-is-square {
+.arco-button.arco-button-size-large-is-square {
   border-radius: 0;
 }
-.arco-button-size-large .arco-button-icon,
-.arco-button-size-large i,
-.arco-button-size-large .arco-button-text,
-.arco-button-size-large svg {
+.arco-button.arco-button-size-large .arco-button-icon,
+.arco-button.arco-button-size-large i,
+.arco-button.arco-button-size-large .arco-button-text,
+.arco-button.arco-button-size-large svg {
   font-size:  0.3rem ;
 }
-.arco-button-size-huge {
+.arco-button.arco-button-size-huge {
   padding:  0 0.32rem ;
   height:  0.88rem ;
 }
-.arco-button-size-huge-is-round {
+.arco-button.arco-button-size-huge-is-round {
   border-radius:  0.88rem ;
 }
-.arco-button-size-huge-is-square {
+.arco-button.arco-button-size-huge-is-square {
   border-radius: 0;
 }
-.arco-button-size-huge .arco-button-icon,
-.arco-button-size-huge i,
-.arco-button-size-huge .arco-button-text,
-.arco-button-size-huge svg {
+.arco-button.arco-button-size-huge .arco-button-icon,
+.arco-button.arco-button-size-huge i,
+.arco-button.arco-button-size-huge .arco-button-text,
+.arco-button.arco-button-size-huge svg {
   font-size:  0.32rem ;
 }
 .arco-button-text-android {

package/umd/button/style/index.less

@@ -56,14 +56,14 @@
     .use-var(border-radius, button-radius);
     .noselect();
 
-    &-inline {
+    &&-inline {
         width: auto;
         display: inline-block;
     }
 
     .set-button-type(length(@type-map));
 
-    &-type-ghost {
+    &&-type-ghost {
         .button-has-border-value(currentColor);
     }
 
@@ -101,10 +101,9 @@
 .set-button-type(@index) when (@index > 0) {
     @type: extract(@type-map, @index);
 
-    &-type-@{type} {
+    &&-type-@{type} {
         .use-var(background, 'button-@{type}-background');
         .use-var(color, 'button-@{type}-text-color');
-        .set-loading-color-var('button-@{type}-text-color');
         &-disabled {
             .use-var(background, 'button-@{type}-disabled-background');
             .use-var(color, 'button-@{type}-disabled-text-color')
@@ -113,6 +112,9 @@
             .use-var(background, 'button-@{type}-clicked-background');
         }
     }
+    &-type-@{type} {
+        .set-loading-color-var('button-@{type}-text-color');
+    }
 
     .set-button-type(@index - 1);
 }
@@ -120,7 +122,7 @@
 .set-button-size(@index) when (@index > 0) {
     @size: extract(@size-map, @index);
 
-    &-size-@{size} {
+    &&-size-@{size} {
         .use-var(padding, "button-@{size}-padding");
         .button-size-height("button-@{size}-height");
         .button-text-size("button-@{size}-text-size");

package/umd/carousel/index.d.ts

@@ -357,7 +357,7 @@ export interface CarouselRef {
 /**
  * 轮播组件，支持自定义轮播索引样式及滑块宽度。**需要注意的是，如果正使用`fastclick`，需要为 touchstart 的 target 添加`needsclick`类**（<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick" target="_blank">详情戳这里</a>），以规避`fastclick`逻辑与组件内部的手势冲突。（如果使用了`list`属性则无需额外添加）
  * @en Carousel component, supports custom carousel index style and slider width. **Note that if you are using `fastclick`, you need to add a `needsclick` class to the touchstart target ** (<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements- with-needsclick" target="_blank">click here for details</a>) to avoid `fastclick` logic conflicts with gestures inside the component. (no need to add if `list` is set)
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 轮播图
  * @name_en Carousel

package/umd/carousel/index.js

@@ -27,7 +27,7 @@
   /**
    * 轮播组件，支持自定义轮播索引样式及滑块宽度。**需要注意的是，如果正使用`fastclick`，需要为 touchstart 的 target 添加`needsclick`类**（<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick" target="_blank">详情戳这里</a>），以规避`fastclick`逻辑与组件内部的手势冲突。（如果使用了`list`属性则无需额外添加）
    * @en Carousel component, supports custom carousel index style and slider width. **Note that if you are using `fastclick`, you need to add a `needsclick` class to the touchstart target ** (<a href="https://github.com/ftlabs/fastclick#ignore-certain-elements- with-needsclick" target="_blank">click here for details</a>) to avoid `fastclick` logic conflicts with gestures inside the component. (no need to add if `list` is set)
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    * @name 轮播图
    * @name_en Carousel

package/umd/cell/index.d.ts

@@ -6,7 +6,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
 /**
  * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
  * @en Cell, including cells and cell group, are often used to set items, forms, etc.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 单元格
  * @name_en Cell

package/umd/cell/index.js

@@ -26,7 +26,7 @@
   /**
    * 单元格组件，含单元格及单元格组合，常用于设置项、表单等。
    * @en Cell, including cells and cell group, are often used to set items, forms, etc.
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    * @name 单元格
    * @name_en Cell

package/umd/checkbox/index.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
  * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
  * @name 复选框
  * @name_en Checkbox
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  */
 export default _default;

package/umd/checkbox/index.js

@@ -33,7 +33,7 @@
    * @en Checkbox, click to switch selection when available, support disabled status, support checkbox group.
    * @name 复选框
    * @name_en Checkbox
-   * @type 数据输入
+   * @type 数据录入
    * @type_en Data Entry
    */
 

package/umd/collapse/index.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("react").ForwardRefExoticComponent<import("./type
 /**
  * 折叠面板组件，支持手风琴模式。
  * @en Collapse supports accordion mode.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 折叠面板
  * @name_en Collapse

package/umd/collapse/index.js

@@ -35,7 +35,7 @@
   /**
    * 折叠面板组件，支持手风琴模式。
    * @en Collapse supports accordion mode.
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    * @name 折叠面板
    * @name_en Collapse

package/umd/count-down/index.d.ts

@@ -6,7 +6,7 @@ export * from './type';
  * @en Countdown Component
  * @name 倒计时
  * @name_en CountDown
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  */
 declare const CountDown: React.ForwardRefExoticComponent<CountDownProps & React.RefAttributes<CountDownRef>>;

package/umd/count-down/index.js

@@ -33,7 +33,7 @@
    * @en Countdown Component
    * @name 倒计时
    * @name_en CountDown
-   * @type 数据展示
+   * @type 信息展示
    * @type_en Data Display
    */
   var CountDown = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {

package/umd/date-picker/index.d.ts

@@ -12,7 +12,7 @@ export interface DatePickerRef {
 /**
  * 日期时间选择器，基于`Picker`组件扩展，支持指定范围，单位可精确到秒。
  * @en Date picker, based on the `Picker` component, supports the specified range, the unit can be accurate to seconds.
- * @type 数据输入
+ * @type 数据录入
  * @type_en Data Entry
  * @name 日期时间选择器
  * @name_en DatePicker

package/umd/date-picker/index.js

@@ -51,7 +51,7 @@
   /**
    * 日期时间选择器，基于`Picker`组件扩展，支持指定范围，单位可精确到秒。
    * @en Date picker, based on the `Picker` component, supports the specified range, the unit can be accurate to seconds.
-   * @type 数据输入
+   * @type 数据录入
    * @type_en Data Entry
    * @name 日期时间选择器
    * @name_en DatePicker

package/umd/dropdown/dropdown.js

@@ -98,7 +98,7 @@
       // @en down=0 is to expand upwards, 1 is to expand downwards
 
 
-      var _useState3 = (0, _react.useState)(direction === 'down'),
+      var _useState3 = (0, _react.useState)(null),
           down = _useState3[0],
           setDown = _useState3[1];
 
@@ -137,12 +137,15 @@
 
       (0, _helpers.usePopupScroll)(showDropdown, domRef.current, getScrollContainer);
       (0, _helpers.usePreventBodyScroll)(showDropdown, preventBodyScroll, initialBodyOverflow);
-      (0, _react.useEffect)(function () {
+      var updateDown = (0, _react.useCallback)(function (wrapperHeight) {
         var _dropdownContainer$cu2;
 
         // 为0的时候不改变
         // @en Does not change when it is 0
-        if (optionsWrapperHeight === 0) return;
+        if (wrapperHeight === 0) {
+          return;
+        }
+
         var tempEl = getAnchorElement ? getAnchorElement() : (_dropdownContainer$cu2 = dropdownContainer.current) == null ? void 0 : _dropdownContainer$cu2.parentElement;
 
         var _ref = (tempEl == null ? void 0 : tempEl.getBoundingClientRect()) || {
@@ -157,7 +160,7 @@
         var tempMaskHeight = windowHeight - tempTop; // 没有指定方向，且空间足够时，或向上展开的空间不够，向下展开
         // @en If there is no specified direction and there is enough space, or there is not enough space to expand upward, expand downward
 
-        var tempDown = direction !== 'up' && optionsWrapperHeight < tempMaskHeight || optionsWrapperHeight > tempTop;
+        var tempDown = direction !== 'up' && wrapperHeight < tempMaskHeight || wrapperHeight > tempTop;
 
         if (tempDown) {
           maskHeight.current = tempMaskHeight;
@@ -174,7 +177,7 @@
         }
 
         setDown(tempDown);
-      }, [dropdownContainer, optionsWrapperHeight, props.top, props.bottom, Boolean(getAnchorElement), direction, windowHeight]);
+      }, [props.top, props.bottom, Boolean(getAnchorElement), direction, windowHeight]);
       /**
        * 取消选择
        * @en Cancel selection
@@ -215,19 +218,27 @@
         };
       }, [showDropdown, clickOtherToClose, handleCancel]);
       (0, _react.useEffect)(function () {
-        (0, _mobileUtils.nextTick)(function () {
-          if (height !== void 0) {
-            // 受控模式下，完全交由外层控制
-            // @en In controlled mode, it is completely controlled by the outer layer
-            setOptionsWrapperHeight(height);
+        var wrapperHeight = 0;
+
+        if (height !== void 0) {
+          // 受控模式下，完全交由外层控制
+          // @en In controlled mode, it is completely controlled by the outer layer
+          wrapperHeight = height;
+        } else {
+          if (!optionsContainer.current) return;
+
+          if (!showDropdown) {
+            wrapperHeight = 0;
           } else {
-            if (!optionsContainer.current) return;
-            if (!showDropdown) setOptionsWrapperHeight(0);else {
-              setOptionsWrapperHeight(optionsContainer.current.getBoundingClientRect().height);
-            }
+            wrapperHeight = optionsContainer.current.getBoundingClientRect().height;
           }
+        }
+
+        updateDown(wrapperHeight);
+        (0, _mobileUtils.nextTick)(function () {
+          setOptionsWrapperHeight(wrapperHeight);
         });
-      }, [showDropdown, options.length, height]);
+      }, [showDropdown, options.length, height, updateDown]);
       (0, _react.useImperativeHandle)(ref, function () {
         return {
           dom: domRef.current
@@ -236,13 +247,17 @@
 
       function getOptionsStyle() {
         var trans = down ? 'translateY(-100%)' : 'translateY(100%)';
-        return (0, _helpers.getStyleWithVendor)({
-          // height: `${optionsWrapperHeight}px`,
-          transform: optionsWrapperHeight ? '' : trans,
-          transition: "transform " + dropdownAnimationTimeout + "ms " + dropdownAnimationFunction,
+        var transStyle = down === null ? {
+          opacity: 0
+        } : {
+          opacity: 1,
+          transform: optionsWrapperHeight ? 'translateY(0)' : trans,
+          transition: "all " + dropdownAnimationTimeout + "ms " + dropdownAnimationFunction
+        };
+        return (0, _helpers.getStyleWithVendor)((0, _extends2.default)({}, transStyle, {
           overflow: optionsWrapperHeight > maxHeight || height ? 'auto' : 'hidden',
           maxHeight: maxHeight + "px"
-        });
+        }));
       }
 
       function renderInnerOptions() {
@@ -276,6 +291,7 @@
           },
           onExited: function onExited(el) {
             el.style.visibility = 'hidden';
+            setDown(null);
           },
           mountOnEnter: mountOnEnter,
           unmountOnExit: unmountOnExit

package/umd/dropdown/style/css/index.css

@@ -47,6 +47,9 @@
 }
 .arco-dropdown-options-item-icon {
   position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
   right:  0.32rem ;
   color: transparent;
 }

package/umd/dropdown/style/index.less

@@ -55,6 +55,8 @@
 
             &-icon {
                 position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
                 .use-var(right, dropdown-options-item-icon-right);
                 color: transparent;
             }

package/umd/ellipsis/components/js-ellipsis.js

@@ -34,8 +34,7 @@
         maxHeight = props.maxHeight,
         ellipsisNode = props.ellipsisNode,
         collapseNode = props.collapseNode,
-        _props$endExcludes = props.endExcludes,
-        endExcludes = _props$endExcludes === void 0 ? [] : _props$endExcludes,
+        endExcludes = props.endExcludes,
         reflowOnResize = props.reflowOnResize,
         onReflow = props.onReflow,
         onEllipsisNodeClick = props.onEllipsisNodeClick,
@@ -88,7 +87,7 @@
       } // Remove the exclude char at the end of the content.
 
 
-      while (endExcludes.includes(currentText[currentText.length - 1])) {
+      while (endExcludes && endExcludes.includes(currentText[currentText.length - 1])) {
         currentText = currentText.slice(0, -1);
       } // Callback after reflow.
 

package/umd/ellipsis/index.d.ts

@@ -4,7 +4,7 @@ export * from './type';
 /**
  * 文本缩略组件，支持多行缩略、富文本、自定义缩略符、尾字符过滤等。
  * @en Text ellipsis component supports multi-line abbreviations, rich text, custom abbreviations, tail character filtering, etc.
- * @type 数据展示
+ * @type 信息展示
  * @type_en Data Display
  * @name 文本缩略
  * @name_en Ellipsis