@douyinfe/semi-foundation 2.97.0 → 2.99.0

package/slider/rtl.scss

@@ -0,0 +1,62 @@
+$module: #{$prefix}-slider;
+
+// RTL support (horizontal)
+// Slider uses `left` positioning in LTR. In RTL we switch to `right` positioning
+// in the component logic, so centering transforms must be mirrored.
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-handle {
+            transform: $transform_scale-slider_handle translateX(50%) translateY($spacing-slider_handle-translateY);
+        }
+
+        &-mark {
+            transform: translate(50%, 0);
+        }
+
+        &-mark-reverse {
+            transform: translate(50%, 0) rotate(-180deg);
+        }
+
+        // Boundary text should match RTL direction: min on the right, max on the left
+
+        &-boundary-min {
+            left: auto;
+            right: $spacing-slider_boundary_min-left;
+        }
+
+        &-boundary-max {
+            right: auto;
+            left: $spacing-slider_boundary_max-right;
+        }
+    }
+}
+
+// Backward/explicit support: the component may add `semi-slider-rtl` on wrapper.
+// Keep these rules so RTL transforms still apply even without `.semi-rtl` container.
+
+.#{$module}-rtl {
+    .#{$module}-handle {
+        transform: $transform_scale-slider_handle translateX(50%) translateY($spacing-slider_handle-translateY);
+    }
+
+    .#{$module}-mark {
+        transform: translate(50%, 0);
+    }
+
+    .#{$module}-mark-reverse {
+        transform: translate(50%, 0) rotate(-180deg);
+    }
+
+    .#{$module}-boundary-min {
+        left: auto;
+        right: $spacing-slider_boundary_min-left;
+    }
+
+    .#{$module}-boundary-max {
+        right: auto;
+        left: $spacing-slider_boundary_max-right;
+    }
+}

package/slider/slider.scss

@@ -252,3 +252,5 @@ $module: #{$prefix}-slider;
 .#{$module}-reverse {
     transform: rotate(180deg);
 }
+
+@import "./rtl.scss";

package/table/foundation.ts

@@ -21,6 +21,13 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings, numbers } from './constants';
 import { mergeQueries, flattenColumns, filterColumns } from './utils';
 import { pullAll, withOrderSort } from '../utils/array';
+import {
+    convertDataToEntities,
+    calcCheckedKeys,
+    calcCheckedKeysForChecked,
+    calcCheckedKeysForUnchecked,
+    findDescendantKeys,
+} from '../tree/treeUtil';
 
 export interface BaseColumnProps<RecordType> {
     align?: BaseAlign;
@@ -78,8 +85,11 @@ export interface TableAdapter<RecordType> extends DefaultAdapter {
     setFlattenData: (flattenData: RecordType[]) => void;
     setAllRowKeys: (allRowKeys: BaseRowKeyType[]) => void;
     setHoveredRowKey: (hoveredRowKey: BaseRowKeyType) => void;
+    setHoveredRowKeys: (hoveredRowKeys: BaseRowKeyType[]) => void;
     setCachedFilteredSortedDataSource: (filteredSortedDataSource: RecordType[]) => void;
     setCachedFilteredSortedRowKeys: (filteredSortedRowKeys: BaseRowKeyType[]) => void;
+    setHalfCheckedRowKeys: (halfCheckedRowKeys: BaseRowKeyType[]) => void;
+    setKeyEntities: (keyEntities: BaseEntitys) => void;
     getCurrentPage: () => number;
     getCurrentPageSize: () => number;
     getCachedFilteredSortedDataSource: () => RecordType[];
@@ -88,6 +98,9 @@ export interface TableAdapter<RecordType> extends DefaultAdapter {
     setAllDisabledRowKeys: (allDisabledRowKeys: BaseRowKeyType[]) => void;
     getAllDisabledRowKeys: () => BaseRowKeyType[];
     getAllDisabledRowKeysSet: () => Set<BaseRowKeyType>;
+    getHalfCheckedRowKeys: () => BaseRowKeyType[];
+    getHalfCheckedRowKeysSet: () => Set<BaseRowKeyType>;
+    getKeyEntities: () => BaseEntitys;
     notifyFilterDropdownVisibleChange: (visible: boolean, dataIndex: string) => void;
     notifyChange: (changeInfo: { pagination: BasePagination; filters: BaseChangeInfoFilter<RecordType>[]; sorter: BaseChangeInfoSorter<RecordType>; extra: OnChangeExtra }) => void;
     notifyExpand: (expanded?: boolean, record?: BaseIncludeGroupRecord<RecordType>, mouseEvent?: any) => void;
@@ -107,7 +120,8 @@ export interface TableAdapter<RecordType> extends DefaultAdapter {
     getHandleColumns: () => (queries: BaseColumnProps<RecordType>[], cachedColumns: BaseColumnProps<RecordType>[]) => BaseColumnProps<RecordType>[];
     getMergePagination: () => (pagination: BasePagination) => BasePagination;
     setBodyHasScrollbar: (bodyHasScrollBar: boolean) => void;
-    getTableLayout: () => 'fixed' | 'auto'
+    getTableLayout: () => 'fixed' | 'auto';
+    getCheckRelation: () => CheckRelation
 }
 
 class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType>> {
@@ -756,30 +770,118 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
         return !(Array.isArray(dataSource) && dataSource.length > 0);
     }
 
+    /**
+     * Build tree data entities for checkRelation
+     * @param dataSource 
+     * @returns keyEntities map
+     */
+    buildKeyEntities(dataSource?: RecordType[]): BaseEntitys {
+        dataSource = dataSource == null ? this._getDataSource() : dataSource;
+        const childrenRecordName = this.getProp('childrenRecordName');
+        const rowKey = this.getProp('rowKey');
+        
+        // Convert table data to tree data format
+        const convertToTreeData = (data: RecordType[]): any[] => {
+            return data.map(record => {
+                const key = typeof rowKey === 'function' ? rowKey(record) : get(record, rowKey);
+                const children = get(record, childrenRecordName);
+                const node: any = { key, ...record };
+                if (Array.isArray(children) && children.length) {
+                    node.children = convertToTreeData(children);
+                }
+                return node;
+            });
+        };
+
+        const treeData = convertToTreeData(dataSource);
+        const { keyEntities } = convertDataToEntities(treeData, { key: 'key', children: 'children' });
+        return keyEntities;
+    }
+
+    /**
+     * Calculate checked keys when checkRelation is 'related'
+     * @param realKey 
+     * @param selected 
+     * @param checkedKeys 
+     * @param halfCheckedKeys 
+     */
+    calcCheckedKeysForSelect(realKey: BaseRowKeyType, selected: boolean, checkedKeys: Set<string>, halfCheckedKeys: Set<string>) {
+        const keyEntities = this._adapter.getKeyEntities();
+        const keyStr = String(realKey);
+        
+        // If keyEntities doesn't contain this key, handle it as a simple add/remove
+        if (!keyEntities || !keyEntities[keyStr]) {
+            if (selected) {
+                checkedKeys.add(keyStr);
+            } else {
+                checkedKeys.delete(keyStr);
+            }
+            return { checkedKeys, halfCheckedKeys };
+        }
+        
+        if (selected) {
+            return calcCheckedKeysForChecked(keyStr, keyEntities, checkedKeys, halfCheckedKeys);
+        } else {
+            return calcCheckedKeysForUnchecked(keyStr, keyEntities, checkedKeys, halfCheckedKeys);
+        }
+    }
+
     handleSelectRow(realKey: BaseRowKeyType, selected: boolean, e: any) {
         this.stopPropagation(e);
         if (typeof selected === 'boolean' && realKey != null) {
+            const checkRelation = this._adapter.getCheckRelation();
             const selectedRowKeys = this._getSelectedRowKeys();
+            const halfCheckedRowKeys = [...(this._adapter.getHalfCheckedRowKeys() || [])];
             let foundIdx = -1;
             const selectedRow = this.getSelectedRows(null, [realKey])[0];
             let selectedRows: BaseIncludeGroupRecord<RecordType>[];
 
-            if ((foundIdx = selectedRowKeys.indexOf(realKey)) > -1 && selected === false) {
-                selectedRowKeys.splice(foundIdx, 1);
-                selectedRows = this.getSelectedRows(null, selectedRowKeys);
+            if (checkRelation === 'related') {
+                // When checkRelation is 'related', use tree selection logic
+                const keyEntities = this._adapter.getKeyEntities();
+                // Convert keys to strings for tree utility functions
+                const checkedKeysSet = new Set(selectedRowKeys.map(key => String(key)));
+                const halfCheckedKeysSet = new Set(halfCheckedRowKeys.map(key => String(key)));
+                
+                const { checkedKeys, halfCheckedKeys } = this.calcCheckedKeysForSelect(
+                    String(realKey), 
+                    selected, 
+                    checkedKeysSet, 
+                    halfCheckedKeysSet
+                );
+                
+                const newSelectedRowKeys = [...checkedKeys];
+                const newHalfCheckedRowKeys = [...halfCheckedKeys];
+                selectedRows = this.getSelectedRows(null, newSelectedRowKeys);
+                
+                // Always update halfCheckedRowKeys state for checkRelation='related' mode
+                // This is needed for rendering the half-checked state in the UI
+                this._adapter.setHalfCheckedRowKeys(newHalfCheckedRowKeys);
+                
                 if (!this._selectionIsControlled()) {
-                    this._adapter.setSelectedRowKeys(selectedRowKeys);
+                    this._adapter.setSelectedRowKeys(newSelectedRowKeys);
                 }
                 this._adapter.notifySelect(selectedRow, selected, selectedRows, e);
-                this._adapter.notifySelectionChange(selectedRowKeys, selectedRows);
-            } else if (selectedRowKeys.indexOf(realKey) === -1 && selected === true) {
-                selectedRowKeys.push(realKey);
-                selectedRows = this.getSelectedRows(null, selectedRowKeys);
-                if (!this._selectionIsControlled()) {
-                    this._adapter.setSelectedRowKeys(selectedRowKeys);
+                this._adapter.notifySelectionChange(newSelectedRowKeys, selectedRows);
+            } else {
+                // Original logic for unRelated mode
+                if ((foundIdx = selectedRowKeys.indexOf(realKey)) > -1 && selected === false) {
+                    selectedRowKeys.splice(foundIdx, 1);
+                    selectedRows = this.getSelectedRows(null, selectedRowKeys);
+                    if (!this._selectionIsControlled()) {
+                        this._adapter.setSelectedRowKeys(selectedRowKeys);
+                    }
+                    this._adapter.notifySelect(selectedRow, selected, selectedRows, e);
+                    this._adapter.notifySelectionChange(selectedRowKeys, selectedRows);
+                } else if (selectedRowKeys.indexOf(realKey) === -1 && selected === true) {
+                    selectedRowKeys.push(realKey);
+                    selectedRows = this.getSelectedRows(null, selectedRowKeys);
+                    if (!this._selectionIsControlled()) {
+                        this._adapter.setSelectedRowKeys(selectedRowKeys);
+                    }
+                    this._adapter.notifySelect(selectedRow, selected, selectedRows, e);
+                    this._adapter.notifySelectionChange(selectedRowKeys, selectedRows);
                 }
-                this._adapter.notifySelect(selectedRow, selected, selectedRows, e);
-                this._adapter.notifySelectionChange(selectedRowKeys, selectedRows);
             }
         }
     }
@@ -792,6 +894,7 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
     handleSelectAllRow(selected: boolean, e: any) {
         this.stopPropagation(e);
         if (typeof selected === 'boolean') {
+            const checkRelation = this._adapter.getCheckRelation();
             const curSelectedRowKeys = this._getSelectedRowKeys();
             let selectedRowKeys = [...curSelectedRowKeys];
             const selectedRowKeysSet = this._getSelectedRowKeysSet();
@@ -800,28 +903,78 @@ class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType
             const disabledRowKeysSet = this._adapter.getAllDisabledRowKeysSet();
             let changedRowKeys;
 
-            // Select all, if not disabled && not in selectedRowKeys
-            if (selected) {
-                for (const key of allRowKeys) {
-                    if (!disabledRowKeysSet.has(key) && !selectedRowKeysSet.has(key)) {
-                        selectedRowKeys.push(key);
+            if (checkRelation === 'related') {
+                // When checkRelation is 'related', use tree selection logic
+                const keyEntities = this._adapter.getKeyEntities();
+                const halfCheckedRowKeys = [...(this._adapter.getHalfCheckedRowKeys() || [])];
+                // Convert keys to strings for tree utility functions
+                let checkedKeysSet = new Set(selectedRowKeys.map(key => String(key)));
+                let halfCheckedKeysSet = new Set(halfCheckedRowKeys.map(key => String(key)));
+                
+                if (selected) {
+                    // Select all: add all non-disabled keys
+                    const keysToAdd = allRowKeys.filter(key => !disabledRowKeysSet.has(key));
+                    for (const key of keysToAdd) {
+                        const keyStr = String(key);
+                        if (!checkedKeysSet.has(keyStr) && keyEntities && keyEntities[keyStr]) {
+                            const result = calcCheckedKeysForChecked(keyStr, keyEntities, checkedKeysSet, halfCheckedKeysSet);
+                            checkedKeysSet = result.checkedKeys;
+                            halfCheckedKeysSet = result.halfCheckedKeys;
+                        }
                     }
+                    changedRowKeys = keysToAdd;
+                } else {
+                    // Deselect all: remove all keys
+                    const keysToRemove = [...checkedKeysSet];
+                    for (const key of keysToRemove) {
+                        if (keyEntities && keyEntities[key]) {
+                            const result = calcCheckedKeysForUnchecked(key, keyEntities, checkedKeysSet, halfCheckedKeysSet);
+                            checkedKeysSet = result.checkedKeys;
+                            halfCheckedKeysSet = result.halfCheckedKeys;
+                        }
+                    }
+                    changedRowKeys = [...curSelectedRowKeys];
                 }
-                allRowKeys = pullAll(allRowKeys, [...disabledRowKeys, ...curSelectedRowKeys]);
-                changedRowKeys = [...allRowKeys];
+                
+                selectedRowKeys = [...checkedKeysSet];
+                const newHalfCheckedRowKeys = [...halfCheckedKeysSet];
+                const changedRows = this.getSelectedRows(null, changedRowKeys || []);
+                const selectedRows = this.getSelectedRows(null, selectedRowKeys || []);
+
+                // Always update halfCheckedRowKeys state for checkRelation='related' mode
+                // This is needed for rendering the half-checked state in the UI
+                this._adapter.setHalfCheckedRowKeys(newHalfCheckedRowKeys);
+                
+                if (!this._selectionIsControlled()) {
+                    this._adapter.setSelectedRowKeys(selectedRowKeys);
+                }
+                this._adapter.notifySelectAll(selected, selectedRows, changedRows, e);
+                this._adapter.notifySelectionChange(selectedRowKeys, selectedRows);
             } else {
-                selectedRowKeys = pullAll(selectedRowKeys, allRowKeys);
-                changedRowKeys = [...curSelectedRowKeys];
-            }
+                // Original logic for unRelated mode
+                // Select all, if not disabled && not in selectedRowKeys
+                if (selected) {
+                    for (const key of allRowKeys) {
+                        if (!disabledRowKeysSet.has(key) && !selectedRowKeysSet.has(key)) {
+                            selectedRowKeys.push(key);
+                        }
+                    }
+                    allRowKeys = pullAll(allRowKeys, [...disabledRowKeys, ...curSelectedRowKeys]);
+                    changedRowKeys = [...allRowKeys];
+                } else {
+                    selectedRowKeys = pullAll(selectedRowKeys, allRowKeys);
+                    changedRowKeys = [...curSelectedRowKeys];
+                }
 
-            const changedRows = this.getSelectedRows(null, changedRowKeys || []);
-            const selectedRows = this.getSelectedRows(null, selectedRowKeys || []);
+                const changedRows = this.getSelectedRows(null, changedRowKeys || []);
+                const selectedRows = this.getSelectedRows(null, selectedRowKeys || []);
 
-            if (!this._selectionIsControlled()) {
-                this._adapter.setSelectedRowKeys(selectedRowKeys);
+                if (!this._selectionIsControlled()) {
+                    this._adapter.setSelectedRowKeys(selectedRowKeys);
+                }
+                this._adapter.notifySelectAll(selected, selectedRows, changedRows, e);
+                this._adapter.notifySelectionChange(selectedRowKeys, selectedRows);
             }
-            this._adapter.notifySelectAll(selected, selectedRows, changedRows, e);
-            this._adapter.notifySelectionChange(selectedRowKeys, selectedRows);
         }
     }
 
@@ -1283,4 +1436,19 @@ export type BaseIncludeGroupRecord<RecordType> = RecordType | { groupKey: string
 
 export type BaseEllipsis = boolean | { showTitle: boolean };
 
+export type CheckRelation = 'related' | 'unRelated';
+
+export interface BaseEntity {
+    key?: string | number;
+    level?: number;
+    children?: BaseEntity[];
+    parent?: BaseEntity | null;
+    data?: Record<string, any>;
+    [key: string]: any
+}
+
+export interface BaseEntitys {
+    [key: string]: BaseEntity
+}
+
 export default TableFoundation;

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

@@ -259,6 +259,23 @@ $module: #{$prefix}-table;
             display: table-row;
             background-color: $color-table_body-bg-default;
 
+            // Programmatic hover state (e.g. rowSpanHover feature)
+            // Keep visual effect consistent with native :hover
+            &.#{$module}-row-hovered {
+                & > .#{$module}-row-cell {
+                    background-image: linear-gradient(0deg, $color-table_body-bg-hover, $color-table_body-bg-hover);
+                    background-color: $color-table_cell-bg-hover;
+
+                    &.#{$module}-cell-fixed {
+                        &-left,
+                        &-right {
+                            background-image: linear-gradient(0deg, $color-table_body-bg-hover, $color-table_body-bg-hover);
+                            background-color: $color-table_body-bg-default;
+                        }
+                    }
+                }
+            }
+
             &:hover {
                 & > .#{$module}-row-cell {
                     // $color-table_body-bg-hover has transparency，will reveal the background color $color-table_body-bg-default\
@@ -538,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;
@@ -572,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

@@ -210,7 +210,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         switch (types) {
             case 'focus':
                 triggerEventSet[eventNames.focus] = () => {
-                    this.delayShow();
+                    this.getProp('condition') !== false && this.delayShow();
                 };
                 triggerEventSet[eventNames.blur] = () => {
                     this.delayHide();
@@ -220,7 +220,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             case 'click':
                 triggerEventSet[eventNames.click] = () => {
                     // this.delayShow();
-                    this.show();
+                    this.getProp('condition') !== false && this.show();
                 };
                 portalEventSet = {};
                 // Click outside needs special treatment, can not be directly tied to the trigger Element, need to be bound to the document
@@ -229,7 +229,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 triggerEventSet[eventNames.mouseEnter] = () => {
                     // console.log(e);
                     this.setCache('isClickToHide', false);
-                    this.delayShow();
+                    this.getProp('condition') !== false && this.delayShow();
                     // this.show('trigger');
                 };
                 triggerEventSet[eventNames.mouseLeave] = () => {
@@ -240,7 +240,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 // bind focus to hover trigger for a11y
                 triggerEventSet[eventNames.focus] = () => {
                     const { disableFocusListener } = this.getProps();
-                    !disableFocusListener && this.delayShow();
+                    this.getProp('condition') !== false && !disableFocusListener && this.delayShow();
                 };
                 triggerEventSet[eventNames.blur] = () => {
                     const { disableFocusListener } = this.getProps();
@@ -259,7 +259,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                             return;
                         }
 
-                        this.delayShow();
+                        this.getProp('condition') !== false && this.delayShow();
                     };
                 }
                 break;
@@ -269,6 +269,9 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
                 break;
             case 'contextMenu':
                 triggerEventSet[eventNames.contextMenu] = (e) => {
+                    if (this.getProp('condition') === false) {
+                        return;
+                    }
                     e.preventDefault();
                     this.show();
                 };
@@ -671,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) {

package/transfer/constants.ts

@@ -10,6 +10,8 @@ const strings = {
     TYPE_TREE_TO_LIST: 'treeList',
 };
 
-const numbers = {};
+const numbers = {
+    DEFAULT_PAGE_SIZE: 10,
+};
 
 export { cssClasses, strings, numbers };