@douyinfe/semi-foundation 2.96.1 → 2.98.0

package/lib/es/table/foundation.js

@@ -16,6 +16,7 @@ import BaseFoundation from '../base/foundation';
 import { strings, numbers } from './constants';
 import { mergeQueries, flattenColumns, filterColumns } from './utils';
 import { pullAll, withOrderSort } from '../utils/array';
+import { convertDataToEntities, calcCheckedKeysForChecked, calcCheckedKeysForUnchecked } from '../tree/treeUtil';
 class TableFoundation extends BaseFoundation {
   /**
    * update columns in place, and use default values as initial values if the sorting and filtering columns have no values
@@ -587,29 +588,115 @@ class TableFoundation extends BaseFoundation {
     dataSource = dataSource == null ? this.getProp('dataSource') : dataSource;
     return !(Array.isArray(dataSource) && dataSource.length > 0);
   }
+  /**
+   * Build tree data entities for checkRelation
+   * @param dataSource
+   * @returns keyEntities map
+   */
+  buildKeyEntities(dataSource) {
+    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 => {
+      return data.map(record => {
+        const key = typeof rowKey === 'function' ? rowKey(record) : _get(record, rowKey);
+        const children = _get(record, childrenRecordName);
+        const node = Object.assign({
+          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, selected, checkedKeys, halfCheckedKeys) {
+    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, selected, e) {
     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;
-      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);
       }
     }
   }
@@ -621,6 +708,7 @@ class TableFoundation extends BaseFoundation {
   handleSelectAllRow(selected, e) {
     this.stopPropagation(e);
     if (typeof selected === 'boolean') {
+      const checkRelation = this._adapter.getCheckRelation();
       const curSelectedRowKeys = this._getSelectedRowKeys();
       let selectedRowKeys = [...curSelectedRowKeys];
       const selectedRowKeysSet = this._getSelectedRowKeysSet();
@@ -628,26 +716,72 @@ class TableFoundation extends BaseFoundation {
       const disabledRowKeys = this._adapter.getAllDisabledRowKeys();
       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];
+        }
+        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);
         }
-        allRowKeys = pullAll(allRowKeys, [...disabledRowKeys, ...curSelectedRowKeys]);
-        changedRowKeys = [...allRowKeys];
+        this._adapter.notifySelectAll(selected, selectedRows, changedRows, e);
+        this._adapter.notifySelectionChange(selectedRowKeys, selectedRows);
       } else {
-        selectedRowKeys = pullAll(selectedRowKeys, allRowKeys);
-        changedRowKeys = [...curSelectedRowKeys];
-      }
-      const changedRows = this.getSelectedRows(null, changedRowKeys || []);
-      const selectedRows = this.getSelectedRows(null, selectedRowKeys || []);
-      if (!this._selectionIsControlled()) {
-        this._adapter.setSelectedRowKeys(selectedRowKeys);
+        // 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 || []);
+        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);
     }
   }
   /**
@@ -881,7 +1015,8 @@ class TableFoundation extends BaseFoundation {
     let e = arguments.length > 1 ? arguments[1] : undefined;
     let check = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var _a, _b, _c, _d;
-    this.stopPropagation(e);
+    /* Do not call stopPropagation here, otherwise the click event registered via onHeaderCell
+       will be blocked when the click hot area is the whole title (#1861). */
     /* if mouse down to the resizable handle, do not trigger the sorting，fix #2802
         The target of the click event may be different from the target of the mousedown,
         e.g: Press the mouse, move to another node and then release it，

package/lib/es/table/table.css

@@ -22,7 +22,7 @@
 .semi-table-pagination-info {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 400;
 }
 .semi-table-pagination-outer {
@@ -48,7 +48,7 @@
   padding: 0;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-0);
   width: 100%;
 }
@@ -222,6 +222,14 @@
   display: table-row;
   background-color: var(--semi-color-bg-1);
 }
+.semi-table-tbody > .semi-table-row.semi-table-row-hovered > .semi-table-row-cell {
+  background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0));
+  background-color: var(--semi-color-bg-0);
+}
+.semi-table-tbody > .semi-table-row.semi-table-row-hovered > .semi-table-row-cell.semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row.semi-table-row-hovered > .semi-table-row-cell.semi-table-cell-fixed-right {
+  background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0));
+  background-color: var(--semi-color-bg-1);
+}
 .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
   background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0));
   background-color: var(--semi-color-bg-0);

package/lib/es/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\

package/lib/es/tabs/tabs.css

@@ -51,7 +51,7 @@
 .semi-tabs-bar .semi-tabs-tab {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   cursor: pointer;
   box-sizing: border-box;
   position: relative;
@@ -112,7 +112,7 @@
 .semi-tabs-tab-single.semi-tabs-tab {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   cursor: pointer;
   box-sizing: border-box;
   position: relative;

package/lib/es/tag/tag.css

@@ -18,7 +18,7 @@
 .semi-tag-default, .semi-tag-small {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   height: 20px;
   padding: 2px 8px;
 }
@@ -34,7 +34,7 @@
 .semi-tag-large {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   padding: 4px 8px;
   height: 24px;
 }
@@ -505,6 +505,32 @@
   color: var(--semi-color-text-0);
 }
 
+.semi-tag-split {
+  display: inline-flex;
+  align-items: center;
+}
+.semi-tag-split .semi-tag {
+  border-radius: 0;
+  margin-right: 1px;
+}
+.semi-tag-split .semi-tag-first {
+  border-top-left-radius: var(--semi-border-radius-small);
+  border-bottom-left-radius: var(--semi-border-radius-small);
+}
+.semi-tag-split .semi-tag-last {
+  border-top-right-radius: var(--semi-border-radius-small);
+  border-bottom-right-radius: var(--semi-border-radius-small);
+  margin-right: unset;
+}
+.semi-tag-split .semi-tag-circle.semi-tag-first {
+  border-top-left-radius: var(--semi-border-radius-full);
+  border-bottom-left-radius: var(--semi-border-radius-full);
+}
+.semi-tag-split .semi-tag-circle.semi-tag-last {
+  border-top-right-radius: var(--semi-border-radius-full);
+  border-bottom-right-radius: var(--semi-border-radius-full);
+}
+
 .semi-rtl .semi-tag,
 .semi-portal-rtl .semi-tag {
   direction: rtl;

package/lib/es/tag/tag.scss

@@ -329,4 +329,37 @@ $types: "ghost", "solid", "light";
     color: $color-tag_avatar-text-default;
 }
 
+.#{$module}-split {
+    display: inline-flex;
+    align-items: center;
+
+    .#{$module} {
+        border-radius: 0;
+        margin-right: 1px;
+
+        &-first {
+            border-top-left-radius: $radius-tag;
+            border-bottom-left-radius: $radius-tag;
+        }
+
+        &-last {
+            border-top-right-radius: $radius-tag;
+            border-bottom-right-radius: $radius-tag;
+            margin-right: unset;
+        }
+
+        &-circle {
+            &.#{$module}-first {
+                border-top-left-radius: $radius-tag_circle;
+                border-bottom-left-radius: $radius-tag_circle;
+            }
+
+            &.#{$module}-last {
+                border-top-right-radius: $radius-tag_circle;
+                border-bottom-right-radius: $radius-tag_circle;
+            }
+        }
+    }
+}
+
 @import './rtl.scss';

package/lib/es/tagInput/tagInput.css

@@ -112,6 +112,8 @@
   padding-left: 4px;
   padding-right: 4px;
   overflow: hidden;
+  position: relative;
+  /* hidden mirror used to measure input text width */
 }
 .semi-tagInput-wrapper-tag {
   margin-right: 4px;
@@ -154,6 +156,8 @@
 .semi-tagInput-wrapper .semi-tagInput-wrapper-input {
   flex-grow: 1;
   width: min-content;
+  min-width: 2px;
+  max-width: 100%;
   border: none;
   outline: none;
   background-color: transparent;
@@ -195,6 +199,19 @@
   height: 24px;
   line-height: 24px;
 }
+.semi-tagInput-wrapper-inputMirror {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+  height: 0;
+  overflow: hidden;
+  white-space: pre;
+  font-size: 14px;
+  font-weight: 400;
+  font-family: inherit;
+}
 .semi-tagInput-clearBtn {
   display: flex;
   justify-content: center;
@@ -215,7 +232,7 @@
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-2);
   flex-shrink: 0;
   white-space: nowrap;
@@ -231,7 +248,7 @@
   white-space: nowrap;
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .semi-tagInput-prefix-icon, .semi-tagInput-suffix-icon {
   color: var(--semi-color-text-2);

package/lib/es/tagInput/tagInput.scss

@@ -137,6 +137,7 @@ $module: #{$prefix}-tagInput;
         padding-left: $spacing-extra-tight;
         padding-right: $spacing-extra-tight;
         overflow: hidden;
+        position: relative;
 
         &-tag {
             margin-right: $spacing-extra-tight;
@@ -190,6 +191,8 @@ $module: #{$prefix}-tagInput;
         & &-input {
             flex-grow: 1;
             width: min-content;
+            min-width: 2px;
+            max-width: 100%;
             // min-width: 38px;
             border: none;
             outline: none;
@@ -240,6 +243,21 @@ $module: #{$prefix}-tagInput;
                 }
             }
         }
+
+        /* hidden mirror used to measure input text width */
+        &-inputMirror {
+            position: absolute;
+            top: 0;
+            left: 0;
+            visibility: hidden;
+            pointer-events: none;
+            height: 0;
+            overflow: hidden;
+            white-space: pre;
+            font-size: $font-size-regular;
+            font-weight: $font-weight-regular;
+            font-family: inherit;
+        }
     }
 
     &-clearBtn {

package/lib/es/timePicker/constants.d.ts

@@ -1,3 +1,4 @@
+export type PanelType = 'left' | 'right';
 declare const cssClasses: {
     PREFIX: string;
     RANGE_PICKER: string;

package/lib/es/timePicker/foundation.d.ts

@@ -1,3 +1,4 @@
+import type { PanelType } from './constants';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 export type Position = 'top' | 'topLeft' | 'topRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'leftTopOver' | 'rightTopOver';
 export interface TimePickerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
@@ -16,11 +17,16 @@ declare class TimePickerFoundation<P = Record<string, any>, S = Record<string, a
     constructor(adapter: TimePickerAdapter<P, S>);
     init(): void;
     getPosition(): Position;
+    getDisabledTimeFns(panelType: PanelType, dates: Date[]): {
+        disabledHours: any;
+        disabledMinutes: any;
+        disabledSeconds: any;
+    };
     isDisabledHMS({ hours, minutes, seconds }: {
         hours: number;
         minutes: number;
         seconds: number;
-    }): boolean;
+    }, panelType?: PanelType, dates?: Date[]): boolean;
     isValidTimeZone(timeZone: string | number): boolean;
     getDefaultFormatIfNeed(): string;
     /**

package/lib/es/timePicker/foundation.js

@@ -26,17 +26,44 @@ class TimePickerFoundation extends BaseFoundation {
     const rtlDirection = direction === 'rtl' ? 'bottomRight' : '';
     return position || rtlDirection || strings.DEFAULT_POSITION[type];
   }
+  getDisabledTimeFns(panelType, dates) {
+    const {
+      disabledHours,
+      disabledMinutes,
+      disabledSeconds,
+      disabledTime
+    } = this.getProps();
+    // disabledTime is range-only: only invoke it when the picker is
+    // actually a range picker. In single mode panelType has no meaning, so
+    // we fall back to the top-level disabledHours / disabledMinutes /
+    // disabledSeconds without invoking disabledTime.
+    if (typeof disabledTime === 'function' && this._adapter.isRangePicker()) {
+      const disabledObj = disabledTime(dates, panelType) || {};
+      return {
+        disabledHours: disabledObj.disabledHours || disabledHours,
+        disabledMinutes: disabledObj.disabledMinutes || disabledMinutes,
+        disabledSeconds: disabledObj.disabledSeconds || disabledSeconds
+      };
+    }
+    return {
+      disabledHours,
+      disabledMinutes,
+      disabledSeconds
+    };
+  }
   isDisabledHMS(_ref) {
     let {
       hours,
       minutes,
       seconds
     } = _ref;
+    let panelType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'left';
+    let dates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
     const {
       disabledHours,
       disabledMinutes,
       disabledSeconds
-    } = this.getProps();
+    } = this.getDisabledTimeFns(panelType, dates);
     const hDis = !isNullOrUndefined(hours) && hourIsDisabled(disabledHours, hours);
     const mDis = !isNullOrUndefined(hours) && !isNullOrUndefined(minutes) && minuteIsDisabled(disabledMinutes, hours, minutes);
     const sDis = !isNullOrUndefined(hours) && !isNullOrUndefined(minutes) && !isNullOrUndefined(seconds) && secondIsDisabled(disabledSeconds, hours, minutes, seconds);
@@ -158,11 +185,23 @@ class TimePickerFoundation extends BaseFoundation {
       if (this.isValidTimeZone(timeZone)) {
         dates = dates.map(date => utcToZonedTime(this.isValidTimeZone(__prevTimeZone) ? zonedTimeToUtc(date, __prevTimeZone) : date, timeZone));
       }
-      invalid = dates.some(d => this.isDisabledHMS({
-        hours: d.getHours(),
-        minutes: d.getMinutes(),
-        seconds: d.getSeconds()
-      }));
+      if (this._adapter.isRangePicker()) {
+        invalid = dates.some((d, idx) => {
+          const panelType = idx === 1 ? 'right' : 'left';
+          return this.isDisabledHMS({
+            hours: d.getHours(),
+            minutes: d.getMinutes(),
+            seconds: d.getSeconds()
+          }, panelType, dates);
+        });
+      } else {
+        const d = dates[0];
+        invalid = d ? this.isDisabledHMS({
+          hours: d.getHours(),
+          minutes: d.getMinutes(),
+          seconds: d.getSeconds()
+        }, 'left', dates) : false;
+      }
     }
     const inputValue = this.formatValue(dates);
     this.setState({
@@ -258,11 +297,23 @@ class TimePickerFoundation extends BaseFoundation {
     let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let invalid = dates.some(d => isNaN(Number(d)));
     if (!invalid) {
-      invalid = dates.some(d => this.isDisabledHMS({
-        hours: d.getHours(),
-        minutes: d.getMinutes(),
-        seconds: d.getSeconds()
-      }));
+      if (this._adapter.isRangePicker()) {
+        invalid = dates.some((d, idx) => {
+          const panelType = idx === 1 ? 'right' : 'left';
+          return this.isDisabledHMS({
+            hours: d.getHours(),
+            minutes: d.getMinutes(),
+            seconds: d.getSeconds()
+          }, panelType, dates);
+        });
+      } else {
+        const d = dates[0];
+        invalid = d ? this.isDisabledHMS({
+          hours: d.getHours(),
+          minutes: d.getMinutes(),
+          seconds: d.getSeconds()
+        }, 'left', dates) : false;
+      }
     }
     return invalid;
   }

package/lib/es/timePicker/timePicker.css

@@ -79,7 +79,7 @@
 .semi-timepicker .semi-timepicker-input {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   border-radius: var(--semi-border-radius-small);
   align-items: center;
 }

package/lib/es/timeline/timeline.css

@@ -77,7 +77,7 @@
 .semi-timeline-item-content {
   font-size: 14px;
   line-height: 20px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: relative;
   margin: 0 0 0 25px;
   word-break: break-word;
@@ -86,7 +86,7 @@
 .semi-timeline-item-content-extra, .semi-timeline-item-content-time {
   font-size: 12px;
   line-height: 16px;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
   color: var(--semi-color-text-2);
   margin-top: 4px;
 }