@douyinfe/semi-foundation 2.98.0 → 2.99.0

package/cascader/foundation.ts

@@ -650,7 +650,9 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
             } else if (selectedKeys.size && !multiple) {
                 inputValue = this.renderDisplayText([...selectedKeys][0]);
             }
-            this._adapter.updateStates({ inputValue });
+            // Reset isSearching immediately in close() instead of relying on afterClose callback
+            // This prevents timing issues where open() clears inputValue but isSearching is still true
+            this._adapter.updateStates({ inputValue, isSearching: false });
             !multiple && this.toggle2SearchInput(false);
             !multiple && this._adapter.updateFocusState(false);
         }

package/form/foundation.ts

@@ -520,6 +520,8 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         const formAllowEmpty = this.getProp('allowEmpty');
 
         // priority at Field level
+        // NOTE: Keep legacy semantics here to avoid implicit breaking changes.
+        // (Field-level allowEmpty overriding behavior is handled during register/restore paths.)
         const allowEmpty = fieldAllowEmpty ? fieldAllowEmpty : formAllowEmpty;
 
         ObjectUtil.set(this.data.values, field, value, allowEmpty);

package/lib/cjs/cascader/foundation.js

@@ -454,8 +454,11 @@ class CascaderFoundation extends _foundation.default {
       } else if (selectedKeys.size && !multiple) {
         inputValue = this.renderDisplayText([...selectedKeys][0]);
       }
+      // Reset isSearching immediately in close() instead of relying on afterClose callback
+      // This prevents timing issues where open() clears inputValue but isSearching is still true
       this._adapter.updateStates({
-        inputValue
+        inputValue,
+        isSearching: false
       });
       !multiple && this.toggle2SearchInput(false);
       !multiple && this._adapter.updateFocusState(false);

package/lib/cjs/form/foundation.js

@@ -493,6 +493,8 @@ class FormFoundation extends _foundation.default {
      */
     const formAllowEmpty = this.getProp('allowEmpty');
     // priority at Field level
+    // NOTE: Keep legacy semantics here to avoid implicit breaking changes.
+    // (Field-level allowEmpty overriding behavior is handled during register/restore paths.)
     const allowEmpty = fieldAllowEmpty ? fieldAllowEmpty : formAllowEmpty;
     ObjectUtil.set(this.data.values, field, value, allowEmpty);
     /**

package/lib/cjs/popover/popover.css

@@ -76,7 +76,7 @@
   color: unset;
 }
 .semi-popover-wrapper[x-placement=top] .semi-popover-icon-arrow {
-  left: 50%;
+  left: var(--semi-tooltip-arrow-offset-x, 50%);
   transform: translateX(-50%);
   bottom: -7px;
 }
@@ -114,7 +114,7 @@
   width: 8px;
   height: 24px;
   right: -7px;
-  top: 50%;
+  top: var(--semi-tooltip-arrow-offset-y, 50%);
   transform: translateY(-50%);
 }
 .semi-popover-wrapper[x-placement=left].semi-popover-with-arrow,
@@ -146,7 +146,7 @@
   width: 8px;
   height: 24px;
   left: -7px;
-  top: 50%;
+  top: var(--semi-tooltip-arrow-offset-y, 50%);
   transform: translateY(-50%) rotate(180deg);
 }
 .semi-popover-wrapper[x-placement=right].semi-popover-with-arrow,
@@ -175,7 +175,7 @@
 }
 .semi-popover-wrapper[x-placement=bottom] .semi-popover-icon-arrow {
   top: -7px;
-  left: 50%;
+  left: var(--semi-tooltip-arrow-offset-x, 50%);
   transform: translateX(-50%) rotate(180deg);
 }
 .semi-popover-wrapper[x-placement=bottom].semi-popover-with-arrow,

package/lib/cjs/table/rtl.scss

@@ -144,6 +144,27 @@ $module: #{$prefix}-table;
                     border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
                 }
             }
+
+            // Fix #441 (RTL): when horizontal scroll is enabled and table is NOT scrolled to the far left,
+            // the outer left border can be outside of viewport (the real border is rendered by the last column cell).
+            // Draw an overlay left border on the container to keep it visible.
+            // When scrolled to the far left, `.semi-table-scroll-position-left` exists and we should not draw it.
+            &:not(.#{$module}-scroll-position-left) {
+                & > .#{$module}-container {
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        bottom: 0;
+                        width: $width-table_base_border;
+                        background-color: $color-table-border-default;
+                        display: block;
+                        z-index: $z-table_fixed_column + 2;
+                        pointer-events: none;
+                    }
+                }
+            }
         }
 
         &-fixed {

package/lib/cjs/table/table.css

@@ -416,6 +416,21 @@
   border-right: 1px solid var(--semi-color-border);
   border-bottom: 1px solid var(--semi-color-border);
 }
+.semi-table-bordered:not(.semi-table-scroll-position-right) > .semi-table-container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--semi-color-border);
+  display: block;
+  z-index: 103;
+  pointer-events: none;
+}
+.semi-table-bordered:not(.semi-table-scroll-position-right) > .semi-table-container > .semi-table-header {
+  box-shadow: inset-1px 0 0 0 var(--semi-color-border);
+}
 :where(.semi-table-bordered > .semi-table-container) > .semi-table-body > .semi-table-placeholder {
   border-right: 1px solid var(--semi-color-border);
 }
@@ -435,6 +450,7 @@
   position: sticky;
   left: 0px;
   z-index: 1;
+  box-sizing: border-box;
   padding: 16px 12px;
   color: var(--semi-color-text-2);
   font-size: 14px;
@@ -592,6 +608,18 @@
   border-right: 0;
   border-left: 1px solid var(--semi-color-border);
 }
+.semi-table-wrapper-rtl .semi-table-bordered:not(.semi-table-scroll-position-left) > .semi-table-container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--semi-color-border);
+  display: block;
+  z-index: 103;
+  pointer-events: none;
+}
 .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner {
   left: auto;
   right: 0;

package/lib/cjs/table/table.scss

@@ -555,6 +555,35 @@ $module: #{$prefix}-table;
             }
         }
 
+        // Fix #441: when horizontal scroll is enabled (e.g. scroll.x='101%') and table is NOT scrolled to the far right,
+        // the outer right border can be outside of viewport because the real right border is rendered by the
+        // last column cell border (which is scrollable). Draw an overlay right border on the container to keep it visible.
+        // When scrolled to the far right, `.semi-table-scroll-position-right` exists and we should not draw it to avoid
+        // double borders.
+        &:not(.#{$module}-scroll-position-right) {
+            & > .#{$module}-container {
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    width: $width-table_base_border;
+                    background-color: $color-table-border-default;
+                    display: block;
+                    // Make sure the overlay border stays above table content/fixed columns
+                    z-index: $z-table_fixed_column + 2;
+                    pointer-events: none;
+                }
+
+                // Ensure header shows a visible right border even when the container overlay
+                // is covered by native scrollbars in some browsers.
+                & > .#{$module}-header {
+                    box-shadow: inset -$width-table_base_border 0 0 0 $color-table-border-default;
+                }
+            }
+        }
+
         :where(& > .#{$module}-container) {
             & > .#{$module}-body > .#{$module}-placeholder {
                 border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -589,6 +618,9 @@ $module: #{$prefix}-table;
         position: sticky;
         left: 0px;
         z-index: 1;
+        // In bordered mode, placeholder may receive an extra side border to complete the outer frame.
+        // Use border-box to avoid 1px horizontal overflow (and unwanted horizontal scrollbar) in empty data + scroll.y cases.
+        box-sizing: border-box;
         padding: #{$spacing-table-paddingY} #{$spacing-table-paddingX};
         color: $color-table_placeholder-text-default;
         font-size: #{$font-table_base-fontSize};

package/lib/cjs/tooltip/arrow.scss

@@ -23,7 +23,7 @@
 
         &[x-placement='top'] {
             .#{$module-icon} {
-                left: 50%;
+                left: var(--semi-tooltip-arrow-offset-x, 50%);
                 transform: translateX(-50%);
                 bottom: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
             }
@@ -61,7 +61,7 @@
                 width: $width-tooltip_arrow_vertical;
                 height: $height-tooltip_arrow_vertical;
                 right: (-$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x);
-                top: 50%;
+                top: var(--semi-tooltip-arrow-offset-y, 50%);
                 transform: translateY(-50%);
             }
 
@@ -93,7 +93,7 @@
                 width: $width-tooltip_arrow_vertical;
                 height: $height-tooltip_arrow_vertical;
                 left: -$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x;
-                top: 50%;
+                top: var(--semi-tooltip-arrow-offset-y, 50%);
                 transform: translateY(-50%) rotate(180deg);
             }
 
@@ -122,7 +122,7 @@
         &[x-placement='bottom'] {
             .#{$module-icon} {
                 top: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
-                left: 50%;
+                left: var(--semi-tooltip-arrow-offset-x, 50%);
                 transform: translateX(-50%) rotate(180deg);
             }
 

package/lib/cjs/tooltip/foundation.js

@@ -683,11 +683,75 @@ class Tooltip extends _foundation.default {
         top = position.includes('Top') ? top + offsetY : top - offsetY;
       }
     }
+    // Handle arrowPointAtCenter for center positions (top/bottom/left/right)
+    // For center positions, the arrow needs to point at trigger center, not Popover center
+    let cssArrowOffsetX;
+    let cssArrowOffsetY;
+    if (showArrow) {
+      const isCenterPosition = ['top', 'bottom', 'left', 'right'].includes(position);
+      if (isCenterPosition) {
+        if (arrowPointAtCenter) {
+          // arrowPointAtCenter=true: arrow should point at trigger center
+          // Calculate arrow position relative to Popover left/top edge
+          if ((position === 'top' || position === 'bottom') && wrapperRect.width > 0) {
+            // Popover center is at `left`, trigger center is at `middleX`
+            // Arrow position from Popover left edge:
+            // = middleX - (left - wrapperRect.width/2)
+            // = middleX - left + wrapperRect.width/2
+            // Percentage: (middleX - left) / wrapperRect.width + 0.5
+            const arrowOffsetPercent = (middleX - left) / wrapperRect.width + 0.5;
+            // Clamp to valid range to prevent arrow going outside Popover
+            const minOffset = (horizontalArrowWidth / 2 + positionOffsetX) / wrapperRect.width;
+            const maxOffset = 1 - minOffset;
+            const clampedOffset = Math.max(minOffset, Math.min(maxOffset, arrowOffsetPercent));
+            // Only set CSS variable if different from default 50%
+            if (Math.abs(clampedOffset - 0.5) > 0.01) {
+              cssArrowOffsetX = `${clampedOffset * 100}%`;
+            }
+          }
+          if ((position === 'left' || position === 'right') && wrapperRect.height > 0) {
+            const arrowOffsetPercent = (middleY - top) / wrapperRect.height + 0.5;
+            const minOffset = (verticalArrowHeight / 2 + positionOffsetY) / wrapperRect.height;
+            const maxOffset = 1 - minOffset;
+            const clampedOffset = Math.max(minOffset, Math.min(maxOffset, arrowOffsetPercent));
+            if (Math.abs(clampedOffset - 0.5) > 0.01) {
+              cssArrowOffsetY = `${clampedOffset * 100}%`;
+            }
+          }
+        } else {
+          // arrowPointAtCenter=false: arrow should be at Popover edge
+          // Determine which edge based on trigger position in viewport
+          if ((position === 'top' || position === 'bottom') && wrapperRect.width > 0) {
+            const offsetXWithArrow = positionOffsetX + horizontalArrowWidth / 2;
+            if (isTriggerNearLeft) {
+              cssArrowOffsetX = `${offsetXWithArrow / wrapperRect.width * 100}%`;
+            } else {
+              cssArrowOffsetX = `${(wrapperRect.width - offsetXWithArrow) / wrapperRect.width * 100}%`;
+            }
+          }
+          if ((position === 'left' || position === 'right') && wrapperRect.height > 0) {
+            const offsetYWithArrow = positionOffsetY + verticalArrowHeight / 2;
+            if (isTriggerNearTop) {
+              cssArrowOffsetY = `${offsetYWithArrow / wrapperRect.height * 100}%`;
+            } else {
+              cssArrowOffsetY = `${(wrapperRect.height - offsetYWithArrow) / wrapperRect.height * 100}%`;
+            }
+          }
+        }
+      }
+    }
     // The left/top value here must be rounded, otherwise it will cause the small triangle to shake
     const style = {
       left: this._roundPixel(left),
       top: this._roundPixel(top)
     };
+    // Add CSS variables for arrow positioning
+    if (cssArrowOffsetX) {
+      style['--semi-tooltip-arrow-offset-x'] = cssArrowOffsetX;
+    }
+    if (cssArrowOffsetY) {
+      style['--semi-tooltip-arrow-offset-y'] = cssArrowOffsetY;
+    }
     let transform = '';
     if (translateX != null) {
       transform += `translateX(${translateX * 100}%) `;

package/lib/cjs/tooltip/tooltip.css

@@ -91,7 +91,7 @@
   color: rgba(var(--semi-grey-7), 1);
 }
 .semi-tooltip-wrapper[x-placement=top] .semi-tooltip-icon-arrow {
-  left: 50%;
+  left: var(--semi-tooltip-arrow-offset-x, 50%);
   transform: translateX(-50%);
   bottom: -6px;
 }
@@ -129,7 +129,7 @@
   width: 7px;
   height: 24px;
   right: -6px;
-  top: 50%;
+  top: var(--semi-tooltip-arrow-offset-y, 50%);
   transform: translateY(-50%);
 }
 .semi-tooltip-wrapper[x-placement=left].semi-tooltip-with-arrow,
@@ -161,7 +161,7 @@
   width: 7px;
   height: 24px;
   left: -6px;
-  top: 50%;
+  top: var(--semi-tooltip-arrow-offset-y, 50%);
   transform: translateY(-50%) rotate(180deg);
 }
 .semi-tooltip-wrapper[x-placement=right].semi-tooltip-with-arrow,
@@ -190,7 +190,7 @@
 }
 .semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-icon-arrow {
   top: -6px;
-  left: 50%;
+  left: var(--semi-tooltip-arrow-offset-x, 50%);
   transform: translateX(-50%) rotate(180deg);
 }
 .semi-tooltip-wrapper[x-placement=bottom].semi-tooltip-with-arrow,

package/lib/es/cascader/foundation.js

@@ -447,8 +447,11 @@ export default class CascaderFoundation extends BaseFoundation {
       } else if (selectedKeys.size && !multiple) {
         inputValue = this.renderDisplayText([...selectedKeys][0]);
       }
+      // Reset isSearching immediately in close() instead of relying on afterClose callback
+      // This prevents timing issues where open() clears inputValue but isSearching is still true
       this._adapter.updateStates({
-        inputValue
+        inputValue,
+        isSearching: false
       });
       !multiple && this.toggle2SearchInput(false);
       !multiple && this._adapter.updateFocusState(false);

package/lib/es/form/foundation.js

@@ -484,6 +484,8 @@ export default class FormFoundation extends BaseFoundation {
      */
     const formAllowEmpty = this.getProp('allowEmpty');
     // priority at Field level
+    // NOTE: Keep legacy semantics here to avoid implicit breaking changes.
+    // (Field-level allowEmpty overriding behavior is handled during register/restore paths.)
     const allowEmpty = fieldAllowEmpty ? fieldAllowEmpty : formAllowEmpty;
     ObjectUtil.set(this.data.values, field, value, allowEmpty);
     /**

package/lib/es/popover/popover.css

@@ -76,7 +76,7 @@
   color: unset;
 }
 .semi-popover-wrapper[x-placement=top] .semi-popover-icon-arrow {
-  left: 50%;
+  left: var(--semi-tooltip-arrow-offset-x, 50%);
   transform: translateX(-50%);
   bottom: -7px;
 }
@@ -114,7 +114,7 @@
   width: 8px;
   height: 24px;
   right: -7px;
-  top: 50%;
+  top: var(--semi-tooltip-arrow-offset-y, 50%);
   transform: translateY(-50%);
 }
 .semi-popover-wrapper[x-placement=left].semi-popover-with-arrow,
@@ -146,7 +146,7 @@
   width: 8px;
   height: 24px;
   left: -7px;
-  top: 50%;
+  top: var(--semi-tooltip-arrow-offset-y, 50%);
   transform: translateY(-50%) rotate(180deg);
 }
 .semi-popover-wrapper[x-placement=right].semi-popover-with-arrow,
@@ -175,7 +175,7 @@
 }
 .semi-popover-wrapper[x-placement=bottom] .semi-popover-icon-arrow {
   top: -7px;
-  left: 50%;
+  left: var(--semi-tooltip-arrow-offset-x, 50%);
   transform: translateX(-50%) rotate(180deg);
 }
 .semi-popover-wrapper[x-placement=bottom].semi-popover-with-arrow,

package/lib/es/table/rtl.scss

@@ -144,6 +144,27 @@ $module: #{$prefix}-table;
                     border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
                 }
             }
+
+            // Fix #441 (RTL): when horizontal scroll is enabled and table is NOT scrolled to the far left,
+            // the outer left border can be outside of viewport (the real border is rendered by the last column cell).
+            // Draw an overlay left border on the container to keep it visible.
+            // When scrolled to the far left, `.semi-table-scroll-position-left` exists and we should not draw it.
+            &:not(.#{$module}-scroll-position-left) {
+                & > .#{$module}-container {
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        bottom: 0;
+                        width: $width-table_base_border;
+                        background-color: $color-table-border-default;
+                        display: block;
+                        z-index: $z-table_fixed_column + 2;
+                        pointer-events: none;
+                    }
+                }
+            }
         }
 
         &-fixed {

package/lib/es/table/table.css

@@ -416,6 +416,21 @@
   border-right: 1px solid var(--semi-color-border);
   border-bottom: 1px solid var(--semi-color-border);
 }
+.semi-table-bordered:not(.semi-table-scroll-position-right) > .semi-table-container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--semi-color-border);
+  display: block;
+  z-index: 103;
+  pointer-events: none;
+}
+.semi-table-bordered:not(.semi-table-scroll-position-right) > .semi-table-container > .semi-table-header {
+  box-shadow: inset-1px 0 0 0 var(--semi-color-border);
+}
 :where(.semi-table-bordered > .semi-table-container) > .semi-table-body > .semi-table-placeholder {
   border-right: 1px solid var(--semi-color-border);
 }
@@ -435,6 +450,7 @@
   position: sticky;
   left: 0px;
   z-index: 1;
+  box-sizing: border-box;
   padding: 16px 12px;
   color: var(--semi-color-text-2);
   font-size: 14px;
@@ -592,6 +608,18 @@
   border-right: 0;
   border-left: 1px solid var(--semi-color-border);
 }
+.semi-table-wrapper-rtl .semi-table-bordered:not(.semi-table-scroll-position-left) > .semi-table-container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  background-color: var(--semi-color-border);
+  display: block;
+  z-index: 103;
+  pointer-events: none;
+}
 .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-expand > .semi-table-row-cell > .semi-table-expand-inner, .semi-table-wrapper-rtl .semi-table-fixed > .semi-table-tbody > .semi-table-row-section > .semi-table-row-cell > .semi-table-section-inner {
   left: auto;
   right: 0;

package/lib/es/table/table.scss

@@ -555,6 +555,35 @@ $module: #{$prefix}-table;
             }
         }
 
+        // Fix #441: when horizontal scroll is enabled (e.g. scroll.x='101%') and table is NOT scrolled to the far right,
+        // the outer right border can be outside of viewport because the real right border is rendered by the
+        // last column cell border (which is scrollable). Draw an overlay right border on the container to keep it visible.
+        // When scrolled to the far right, `.semi-table-scroll-position-right` exists and we should not draw it to avoid
+        // double borders.
+        &:not(.#{$module}-scroll-position-right) {
+            & > .#{$module}-container {
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    width: $width-table_base_border;
+                    background-color: $color-table-border-default;
+                    display: block;
+                    // Make sure the overlay border stays above table content/fixed columns
+                    z-index: $z-table_fixed_column + 2;
+                    pointer-events: none;
+                }
+
+                // Ensure header shows a visible right border even when the container overlay
+                // is covered by native scrollbars in some browsers.
+                & > .#{$module}-header {
+                    box-shadow: inset -$width-table_base_border 0 0 0 $color-table-border-default;
+                }
+            }
+        }
+
         :where(& > .#{$module}-container) {
             & > .#{$module}-body > .#{$module}-placeholder {
                 border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -589,6 +618,9 @@ $module: #{$prefix}-table;
         position: sticky;
         left: 0px;
         z-index: 1;
+        // In bordered mode, placeholder may receive an extra side border to complete the outer frame.
+        // Use border-box to avoid 1px horizontal overflow (and unwanted horizontal scrollbar) in empty data + scroll.y cases.
+        box-sizing: border-box;
         padding: #{$spacing-table-paddingY} #{$spacing-table-paddingX};
         color: $color-table_placeholder-text-default;
         font-size: #{$font-table_base-fontSize};

package/lib/es/tooltip/arrow.scss

@@ -23,7 +23,7 @@
 
         &[x-placement='top'] {
             .#{$module-icon} {
-                left: 50%;
+                left: var(--semi-tooltip-arrow-offset-x, 50%);
                 transform: translateX(-50%);
                 bottom: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
             }
@@ -61,7 +61,7 @@
                 width: $width-tooltip_arrow_vertical;
                 height: $height-tooltip_arrow_vertical;
                 right: (-$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x);
-                top: 50%;
+                top: var(--semi-tooltip-arrow-offset-y, 50%);
                 transform: translateY(-50%);
             }
 
@@ -93,7 +93,7 @@
                 width: $width-tooltip_arrow_vertical;
                 height: $height-tooltip_arrow_vertical;
                 left: -$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x;
-                top: 50%;
+                top: var(--semi-tooltip-arrow-offset-y, 50%);
                 transform: translateY(-50%) rotate(180deg);
             }
 
@@ -122,7 +122,7 @@
         &[x-placement='bottom'] {
             .#{$module-icon} {
                 top: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
-                left: 50%;
+                left: var(--semi-tooltip-arrow-offset-x, 50%);
                 transform: translateX(-50%) rotate(180deg);
             }
 

package/lib/es/tooltip/foundation.js

@@ -676,11 +676,75 @@ export default class Tooltip extends BaseFoundation {
         top = position.includes('Top') ? top + offsetY : top - offsetY;
       }
     }
+    // Handle arrowPointAtCenter for center positions (top/bottom/left/right)
+    // For center positions, the arrow needs to point at trigger center, not Popover center
+    let cssArrowOffsetX;
+    let cssArrowOffsetY;
+    if (showArrow) {
+      const isCenterPosition = ['top', 'bottom', 'left', 'right'].includes(position);
+      if (isCenterPosition) {
+        if (arrowPointAtCenter) {
+          // arrowPointAtCenter=true: arrow should point at trigger center
+          // Calculate arrow position relative to Popover left/top edge
+          if ((position === 'top' || position === 'bottom') && wrapperRect.width > 0) {
+            // Popover center is at `left`, trigger center is at `middleX`
+            // Arrow position from Popover left edge:
+            // = middleX - (left - wrapperRect.width/2)
+            // = middleX - left + wrapperRect.width/2
+            // Percentage: (middleX - left) / wrapperRect.width + 0.5
+            const arrowOffsetPercent = (middleX - left) / wrapperRect.width + 0.5;
+            // Clamp to valid range to prevent arrow going outside Popover
+            const minOffset = (horizontalArrowWidth / 2 + positionOffsetX) / wrapperRect.width;
+            const maxOffset = 1 - minOffset;
+            const clampedOffset = Math.max(minOffset, Math.min(maxOffset, arrowOffsetPercent));
+            // Only set CSS variable if different from default 50%
+            if (Math.abs(clampedOffset - 0.5) > 0.01) {
+              cssArrowOffsetX = `${clampedOffset * 100}%`;
+            }
+          }
+          if ((position === 'left' || position === 'right') && wrapperRect.height > 0) {
+            const arrowOffsetPercent = (middleY - top) / wrapperRect.height + 0.5;
+            const minOffset = (verticalArrowHeight / 2 + positionOffsetY) / wrapperRect.height;
+            const maxOffset = 1 - minOffset;
+            const clampedOffset = Math.max(minOffset, Math.min(maxOffset, arrowOffsetPercent));
+            if (Math.abs(clampedOffset - 0.5) > 0.01) {
+              cssArrowOffsetY = `${clampedOffset * 100}%`;
+            }
+          }
+        } else {
+          // arrowPointAtCenter=false: arrow should be at Popover edge
+          // Determine which edge based on trigger position in viewport
+          if ((position === 'top' || position === 'bottom') && wrapperRect.width > 0) {
+            const offsetXWithArrow = positionOffsetX + horizontalArrowWidth / 2;
+            if (isTriggerNearLeft) {
+              cssArrowOffsetX = `${offsetXWithArrow / wrapperRect.width * 100}%`;
+            } else {
+              cssArrowOffsetX = `${(wrapperRect.width - offsetXWithArrow) / wrapperRect.width * 100}%`;
+            }
+          }
+          if ((position === 'left' || position === 'right') && wrapperRect.height > 0) {
+            const offsetYWithArrow = positionOffsetY + verticalArrowHeight / 2;
+            if (isTriggerNearTop) {
+              cssArrowOffsetY = `${offsetYWithArrow / wrapperRect.height * 100}%`;
+            } else {
+              cssArrowOffsetY = `${(wrapperRect.height - offsetYWithArrow) / wrapperRect.height * 100}%`;
+            }
+          }
+        }
+      }
+    }
     // The left/top value here must be rounded, otherwise it will cause the small triangle to shake
     const style = {
       left: this._roundPixel(left),
       top: this._roundPixel(top)
     };
+    // Add CSS variables for arrow positioning
+    if (cssArrowOffsetX) {
+      style['--semi-tooltip-arrow-offset-x'] = cssArrowOffsetX;
+    }
+    if (cssArrowOffsetY) {
+      style['--semi-tooltip-arrow-offset-y'] = cssArrowOffsetY;
+    }
     let transform = '';
     if (translateX != null) {
       transform += `translateX(${translateX * 100}%) `;

package/lib/es/tooltip/tooltip.css

@@ -91,7 +91,7 @@
   color: rgba(var(--semi-grey-7), 1);
 }
 .semi-tooltip-wrapper[x-placement=top] .semi-tooltip-icon-arrow {
-  left: 50%;
+  left: var(--semi-tooltip-arrow-offset-x, 50%);
   transform: translateX(-50%);
   bottom: -6px;
 }
@@ -129,7 +129,7 @@
   width: 7px;
   height: 24px;
   right: -6px;
-  top: 50%;
+  top: var(--semi-tooltip-arrow-offset-y, 50%);
   transform: translateY(-50%);
 }
 .semi-tooltip-wrapper[x-placement=left].semi-tooltip-with-arrow,
@@ -161,7 +161,7 @@
   width: 7px;
   height: 24px;
   left: -6px;
-  top: 50%;
+  top: var(--semi-tooltip-arrow-offset-y, 50%);
   transform: translateY(-50%) rotate(180deg);
 }
 .semi-tooltip-wrapper[x-placement=right].semi-tooltip-with-arrow,
@@ -190,7 +190,7 @@
 }
 .semi-tooltip-wrapper[x-placement=bottom] .semi-tooltip-icon-arrow {
   top: -6px;
-  left: 50%;
+  left: var(--semi-tooltip-arrow-offset-x, 50%);
   transform: translateX(-50%) rotate(180deg);
 }
 .semi-tooltip-wrapper[x-placement=bottom].semi-tooltip-with-arrow,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.98.0",
+    "version": "2.99.0",
     "description": "",
     "scripts": {
         "clean": "rimraf lib",
@@ -14225,8 +14225,8 @@
         }
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.98.0",
-        "@douyinfe/semi-json-viewer-core": "2.98.0",
+        "@douyinfe/semi-animation": "2.99.0",
+        "@douyinfe/semi-json-viewer-core": "2.99.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -14247,7 +14247,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "e33a947a4e0745a7ad15d3e773355cc19d23b174",
+    "gitHead": "c62861b574b51ae39afe7da796ab4f14d1462ef2",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/table/rtl.scss

@@ -144,6 +144,27 @@ $module: #{$prefix}-table;
                     border-left: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
                 }
             }
+
+            // Fix #441 (RTL): when horizontal scroll is enabled and table is NOT scrolled to the far left,
+            // the outer left border can be outside of viewport (the real border is rendered by the last column cell).
+            // Draw an overlay left border on the container to keep it visible.
+            // When scrolled to the far left, `.semi-table-scroll-position-left` exists and we should not draw it.
+            &:not(.#{$module}-scroll-position-left) {
+                & > .#{$module}-container {
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        bottom: 0;
+                        width: $width-table_base_border;
+                        background-color: $color-table-border-default;
+                        display: block;
+                        z-index: $z-table_fixed_column + 2;
+                        pointer-events: none;
+                    }
+                }
+            }
         }
 
         &-fixed {

package/table/table.scss

@@ -555,6 +555,35 @@ $module: #{$prefix}-table;
             }
         }
 
+        // Fix #441: when horizontal scroll is enabled (e.g. scroll.x='101%') and table is NOT scrolled to the far right,
+        // the outer right border can be outside of viewport because the real right border is rendered by the
+        // last column cell border (which is scrollable). Draw an overlay right border on the container to keep it visible.
+        // When scrolled to the far right, `.semi-table-scroll-position-right` exists and we should not draw it to avoid
+        // double borders.
+        &:not(.#{$module}-scroll-position-right) {
+            & > .#{$module}-container {
+                &::after {
+                    content: '';
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    width: $width-table_base_border;
+                    background-color: $color-table-border-default;
+                    display: block;
+                    // Make sure the overlay border stays above table content/fixed columns
+                    z-index: $z-table_fixed_column + 2;
+                    pointer-events: none;
+                }
+
+                // Ensure header shows a visible right border even when the container overlay
+                // is covered by native scrollbars in some browsers.
+                & > .#{$module}-header {
+                    box-shadow: inset -$width-table_base_border 0 0 0 $color-table-border-default;
+                }
+            }
+        }
+
         :where(& > .#{$module}-container) {
             & > .#{$module}-body > .#{$module}-placeholder {
                 border-right: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -589,6 +618,9 @@ $module: #{$prefix}-table;
         position: sticky;
         left: 0px;
         z-index: 1;
+        // In bordered mode, placeholder may receive an extra side border to complete the outer frame.
+        // Use border-box to avoid 1px horizontal overflow (and unwanted horizontal scrollbar) in empty data + scroll.y cases.
+        box-sizing: border-box;
         padding: #{$spacing-table-paddingY} #{$spacing-table-paddingX};
         color: $color-table_placeholder-text-default;
         font-size: #{$font-table_base-fontSize};

package/tooltip/arrow.scss

@@ -23,7 +23,7 @@
 
         &[x-placement='top'] {
             .#{$module-icon} {
-                left: 50%;
+                left: var(--semi-tooltip-arrow-offset-x, 50%);
                 transform: translateX(-50%);
                 bottom: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
             }
@@ -61,7 +61,7 @@
                 width: $width-tooltip_arrow_vertical;
                 height: $height-tooltip_arrow_vertical;
                 right: (-$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x);
-                top: 50%;
+                top: var(--semi-tooltip-arrow-offset-y, 50%);
                 transform: translateY(-50%);
             }
 
@@ -93,7 +93,7 @@
                 width: $width-tooltip_arrow_vertical;
                 height: $height-tooltip_arrow_vertical;
                 left: -$width-tooltip_arrow_vertical + $spacing-tooltip_arrow_offset-x;
-                top: 50%;
+                top: var(--semi-tooltip-arrow-offset-y, 50%);
                 transform: translateY(-50%) rotate(180deg);
             }
 
@@ -122,7 +122,7 @@
         &[x-placement='bottom'] {
             .#{$module-icon} {
                 top: (-$height-tooltip_arrow + $spacing-tooltip_arrow_offset-y);
-                left: 50%;
+                left: var(--semi-tooltip-arrow-offset-x, 50%);
                 transform: translateX(-50%) rotate(180deg);
             }
 

package/tooltip/foundation.ts

@@ -674,12 +674,90 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             }
         }
 
+        // Handle arrowPointAtCenter for center positions (top/bottom/left/right)
+        // For center positions, the arrow needs to point at trigger center, not Popover center
+        let cssArrowOffsetX: string | undefined;
+        let cssArrowOffsetY: string | undefined;
+        
+        if (showArrow) {
+            const isCenterPosition = ['top', 'bottom', 'left', 'right'].includes(position);
+            
+            if (isCenterPosition) {
+                if (arrowPointAtCenter) {
+                    // arrowPointAtCenter=true: arrow should point at trigger center
+                    // Calculate arrow position relative to Popover left/top edge
+                    
+                    if ((position === 'top' || position === 'bottom') && wrapperRect.width > 0) {
+                        // Popover center is at `left`, trigger center is at `middleX`
+                        // Arrow position from Popover left edge:
+                        // = middleX - (left - wrapperRect.width/2)
+                        // = middleX - left + wrapperRect.width/2
+                        // Percentage: (middleX - left) / wrapperRect.width + 0.5
+                        const arrowOffsetPercent = (middleX - left) / wrapperRect.width + 0.5;
+                        
+                        // Clamp to valid range to prevent arrow going outside Popover
+                        const minOffset = (horizontalArrowWidth / 2 + positionOffsetX) / wrapperRect.width;
+                        const maxOffset = 1 - minOffset;
+                        const clampedOffset = Math.max(minOffset, Math.min(maxOffset, arrowOffsetPercent));
+                        
+                        // Only set CSS variable if different from default 50%
+                        if (Math.abs(clampedOffset - 0.5) > 0.01) {
+                            cssArrowOffsetX = `${clampedOffset * 100}%`;
+                        }
+                    }
+                    
+                    if ((position === 'left' || position === 'right') && wrapperRect.height > 0) {
+                        const arrowOffsetPercent = (middleY - top) / wrapperRect.height + 0.5;
+                        
+                        const minOffset = (verticalArrowHeight / 2 + positionOffsetY) / wrapperRect.height;
+                        const maxOffset = 1 - minOffset;
+                        const clampedOffset = Math.max(minOffset, Math.min(maxOffset, arrowOffsetPercent));
+                        
+                        if (Math.abs(clampedOffset - 0.5) > 0.01) {
+                            cssArrowOffsetY = `${clampedOffset * 100}%`;
+                        }
+                    }
+                } else {
+                    // arrowPointAtCenter=false: arrow should be at Popover edge
+                    // Determine which edge based on trigger position in viewport
+                    
+                    if ((position === 'top' || position === 'bottom') && wrapperRect.width > 0) {
+                        const offsetXWithArrow = positionOffsetX + horizontalArrowWidth / 2;
+                        
+                        if (isTriggerNearLeft) {
+                            cssArrowOffsetX = `${(offsetXWithArrow / wrapperRect.width) * 100}%`;
+                        } else {
+                            cssArrowOffsetX = `${((wrapperRect.width - offsetXWithArrow) / wrapperRect.width) * 100}%`;
+                        }
+                    }
+                    
+                    if ((position === 'left' || position === 'right') && wrapperRect.height > 0) {
+                        const offsetYWithArrow = positionOffsetY + verticalArrowHeight / 2;
+                        
+                        if (isTriggerNearTop) {
+                            cssArrowOffsetY = `${(offsetYWithArrow / wrapperRect.height) * 100}%`;
+                        } else {
+                            cssArrowOffsetY = `${((wrapperRect.height - offsetYWithArrow) / wrapperRect.height) * 100}%`;
+                        }
+                    }
+                }
+            }
+        }
+
         // The left/top value here must be rounded, otherwise it will cause the small triangle to shake
         const style: Record<string, string | number> = {
             left: this._roundPixel(left),
             top: this._roundPixel(top),
         };
 
+        // Add CSS variables for arrow positioning
+        if (cssArrowOffsetX) {
+            style['--semi-tooltip-arrow-offset-x'] = cssArrowOffsetX;
+        }
+        if (cssArrowOffsetY) {
+            style['--semi-tooltip-arrow-offset-y'] = cssArrowOffsetY;
+        }
+
         let transform = '';
 
         if (translateX != null) {