@douyinfe/semi-foundation 2.96.1 → 2.98.0

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

@@ -114,6 +114,7 @@ export interface BasicCascaderProps {
     preventScroll?: boolean;
     virtualizeInSearch?: Virtualize;
     checkRelation?: string;
+    remote?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -204,6 +205,17 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     getItemPropPath(selectedKey: string, prop: string | any[], keyEntities?: BasicEntities): any[];
     _getCacheValue(keyEntities: BasicEntities): any;
     collectOptions(init?: boolean): void;
+    /**
+     * Calculate filtered keys based on current props.
+     * - In remote mode: do not do local match, treat current treeData nodes as results
+     * - In local mode: perform matching by filterTreeNode
+     */
+    _calcFilteredKeys(sugInput: string, keyEntities?: BasicEntities): string[];
+    /**
+     * Sync filteredKeys with latest options/keyEntities WITHOUT triggering onSearch.
+     * Used when treeData changes asynchronously in searching state.
+     */
+    recalculateFilteredKeys(input?: string, nextKeyEntities?: BasicEntities): void;
     handleValueChange(value: BasicValue): void;
     /**
      * When single selection, the clear objects of

package/lib/es/cascader/foundation.js

@@ -211,6 +211,72 @@ export default class CascaderFoundation extends BaseFoundation {
         keyEntities
       });
     }
+    // If options(treeData) updates during searching (e.g. remote search async update),
+    // we need to sync filteredKeys with the latest keyEntities; otherwise the UI may
+    // render empty list ("暂无数据") because filteredKeys are based on stale entities.
+    // NOTE: updateSelectedKey/updateStates are async in React, so we pass keyEntities
+    // explicitly to avoid reading stale state.
+    this.recalculateFilteredKeys(undefined, keyEntities);
+  }
+  /**
+   * Calculate filtered keys based on current props.
+   * - In remote mode: do not do local match, treat current treeData nodes as results
+   * - In local mode: perform matching by filterTreeNode
+   */
+  _calcFilteredKeys(sugInput, keyEntities) {
+    if (!sugInput) {
+      return [];
+    }
+    const {
+      treeNodeFilterProp,
+      filterTreeNode,
+      filterLeafOnly,
+      remote
+    } = this.getProps();
+    const entities = Object.values(keyEntities !== null && keyEntities !== void 0 ? keyEntities : this.getState('keyEntities'));
+    if (remote) {
+      return entities.filter(item => !item._notExist).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item.data)).map(item => item.key);
+    }
+    return entities.filter(item => {
+      const {
+        key,
+        _notExist,
+        data
+      } = item;
+      if (_notExist) {
+        return false;
+      }
+      const filteredPath = this.getItemPropPath(key, treeNodeFilterProp, keyEntities);
+      return filter(sugInput, data, filterTreeNode, filteredPath);
+    }).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item.data)).map(item => item.key);
+  }
+  /**
+   * Sync filteredKeys with latest options/keyEntities WITHOUT triggering onSearch.
+   * Used when treeData changes asynchronously in searching state.
+   */
+  recalculateFilteredKeys(input, nextKeyEntities) {
+    const isFilterable = this._isFilterable();
+    if (!isFilterable) {
+      return;
+    }
+    // When input is not explicitly provided, only recalculate in searching state.
+    // Otherwise, treeData updates may incorrectly force component into searching mode
+    // because inputValue can be the selected label text in normal (non-searching) state.
+    const currentIsSearching = this.getState('isSearching');
+    if (_isUndefined(input) && !currentIsSearching) {
+      return;
+    }
+    const sugInput = _isUndefined(input) ? this.getState('inputValue') : input;
+    const filteredKeys = this._calcFilteredKeys(sugInput, nextKeyEntities);
+    const updateStates = {
+      isSearching: Boolean(sugInput),
+      filteredKeys: new Set(filteredKeys)
+    };
+    if (nextKeyEntities) {
+      updateStates.keyEntities = nextKeyEntities;
+    }
+    this._adapter.updateStates(updateStates);
+    this._adapter.rePositionDropdown();
   }
   // call when props.value change
   handleValueChange(value) {
@@ -797,29 +863,7 @@ export default class CascaderFoundation extends BaseFoundation {
   }
   handleInputChange(sugInput) {
     this._adapter.updateInputValue(sugInput);
-    const {
-      keyEntities
-    } = this.getStates();
-    const {
-      treeNodeFilterProp,
-      filterTreeNode,
-      filterLeafOnly
-    } = this.getProps();
-    let filteredKeys = [];
-    if (sugInput) {
-      filteredKeys = Object.values(keyEntities).filter(item => {
-        const {
-          key,
-          _notExist,
-          data
-        } = item;
-        if (_notExist) {
-          return false;
-        }
-        const filteredPath = this.getItemPropPath(key, treeNodeFilterProp);
-        return filter(sugInput, data, filterTreeNode, filteredPath);
-      }).filter(item => filterTreeNode && !filterLeafOnly || this._isLeaf(item)).map(item => item.key);
-    }
+    const filteredKeys = this._calcFilteredKeys(sugInput);
     this._adapter.updateStates({
       isSearching: Boolean(sugInput),
       filteredKeys: new Set(filteredKeys)
@@ -890,6 +934,7 @@ export default class CascaderFoundation extends BaseFoundation {
     } = this.getStates();
     const isFilterable = this._isFilterable();
     if (isSearching && isFilterable) {
+      // Both local & remote search mode should render flattened search list
       return this.getFilteredData();
     }
     return Object.values(keyEntities).filter(item => item.parentKey === null && !item._notExist)

package/lib/es/checkbox/checkbox.css

@@ -8,7 +8,7 @@
   align-items: flex-start;
   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;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-none));
@@ -269,7 +269,7 @@
 .semi-checkboxGroup {
   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;
   line-height: 14px;
 }
 .semi-checkboxGroup .semi-checkbox.semi-checkbox-vertical {

package/lib/es/codeHighlight/codeHighlight.css

@@ -13,7 +13,7 @@
   color: var(--semi-color-text-0);
   font-size: 13px;
   text-shadow: none;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
   direction: ltr;
   text-align: left;
   white-space: pre;

package/lib/es/codeHighlight/codeHighlight.scss

@@ -16,7 +16,7 @@ $module: #{$prefix}-codeHighlight;
       font-size: 13px;
       text-shadow: none;
       // font-family: 'Inconsolata', Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+      font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'DejaVu Sans Mono', 'Courier New', monospace;
       direction: ltr;
       text-align: left;
       white-space: pre;

package/lib/es/collapse/collapse.css

@@ -17,7 +17,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;
 }
 .semi-collapse-header-right {
   display: flex;
@@ -61,7 +61,7 @@
   color: var(--semi-color-text-1);
   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-collapse-content p {
   margin: 0;

package/lib/es/datePicker/datePicker.css

@@ -110,7 +110,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;
   min-height: 24px;
   line-height: 24px;
 }
@@ -199,7 +199,7 @@
 .semi-datepicker-navigation-month {
   font-size: 16px;
   line-height: 22px;
-  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;
   flex-grow: 1;
   text-align: center;
   font-weight: 600;
@@ -217,7 +217,7 @@
 .semi-datepicker-weekday {
   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;
   font-weight: 600;
   color: var(--semi-color-text-2);
   border-bottom: 1px solid var(--semi-color-border);
@@ -737,7 +737,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;
   white-space: nowrap;
   color: var(--semi-color-text-2);
 }
@@ -763,12 +763,40 @@
 .semi-datepicker-compact {
   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;
   line-height: 20px;
+  display: inline-block;
+  max-width: calc(100vw - 32px);
+}
+.semi-datepicker-compact:not(.semi-datepicker-compact-insetInput) {
+  width: max-content;
+}
+.semi-datepicker-compact .semi-datepicker-container {
+  width: max-content;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid {
+  width: max-content;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-month-grid-left,
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-month-grid-right {
+  min-width: 216px;
+  max-width: calc(100vw - 32px);
+}
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-month {
+  margin-left: auto;
+  margin-right: auto;
 }
 .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTime] .semi-datepicker-yam, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-yam {
   height: calc(100% - 32px);
 }
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yam {
+  position: relative;
+  width: 100%;
+  max-width: 100%;
+  max-height: 256px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
 .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateRange] .semi-datepicker-month-grid-left, .semi-datepicker-compact .semi-datepicker-month-grid[x-type=dateTimeRange] .semi-datepicker-month-grid-left {
   border-right: 1px solid var(--semi-color-border);
 }
@@ -786,6 +814,16 @@
   box-sizing: border-box;
   height: 48px;
   padding: 12px;
+  width: 100%;
+  max-width: 100%;
+}
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-header button,
+.semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-header .semi-button {
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-datepicker-yearmonth-body {
   display: flex;
@@ -796,7 +834,7 @@
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist {
   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;
   line-height: 20px;
 }
 .semi-datepicker-compact .semi-datepicker-month-grid .semi-scrolllist-header {
@@ -840,16 +878,19 @@
 .semi-datepicker-compact.semi-datepicker-panel-yam .semi-scrolllist {
   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;
   line-height: 20px;
 }
 .semi-datepicker-compact .semi-datepicker-tpk {
   height: calc(100% - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-navigation {
+  box-sizing: border-box;
   height: 24px;
   padding: 12px;
   padding-bottom: 0;
+  width: 100%;
+  max-width: 100%;
 }
 .semi-datepicker-compact .semi-datepicker-navigation-left, .semi-datepicker-compact .semi-datepicker-navigation-right {
   width: 24px;
@@ -859,11 +900,22 @@
   min-width: 24px;
   min-height: 24px;
 }
+.semi-datepicker-compact .semi-datepicker-navigation-month {
+  min-width: 0;
+  overflow: hidden;
+}
 .semi-datepicker-compact .semi-datepicker-navigation-month .semi-button {
   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;
   line-height: 20px;
+  max-width: 100%;
+}
+.semi-datepicker-compact .semi-datepicker-navigation-month .semi-button > span {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .semi-datepicker-compact .semi-datepicker-month {
   width: 216px;
@@ -1008,7 +1060,9 @@
   color: var(--semi-color-primary);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-month {
-  max-width: 216px;
+  min-width: 216px;
+  width: max-content;
+  max-width: calc(100vw - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
 .semi-datepicker-compact .semi-datepicker-quick-control-month[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
@@ -1019,7 +1073,9 @@
   max-height: 218px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-date {
-  max-width: 216px;
+  min-width: 216px;
+  width: max-content;
+  max-width: calc(100vw - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
 .semi-datepicker-compact .semi-datepicker-quick-control-date[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
@@ -1030,7 +1086,9 @@
   max-height: 208px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTime {
-  max-width: 216px;
+  min-width: 216px;
+  width: max-content;
+  max-width: calc(100vw - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTime[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
@@ -1041,7 +1099,9 @@
   max-height: 240px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateRange {
-  max-width: 432px;
+  min-width: min(432px, calc(100vw - 32px));
+  width: max-content;
+  max-width: calc(100vw - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
 .semi-datepicker-compact .semi-datepicker-quick-control-dateRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {
@@ -1052,7 +1112,9 @@
   max-height: 208px;
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange {
-  max-width: 432px;
+  min-width: min(432px, calc(100vw - 32px));
+  width: max-content;
+  max-width: calc(100vw - 32px);
 }
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-right-content-wrapper,
 .semi-datepicker-compact .semi-datepicker-quick-control-dateTimeRange[x-insetinput=true] .semi-datepicker-quick-control-left-content-wrapper {

package/lib/es/datePicker/datePicker.scss

@@ -1129,7 +1129,44 @@ $module-list: #{$prefix}-scrolllist;
     @include font-size-small;
     line-height: $lineHeight-datepicker_compact;
 
+    // Max width constraint for compact panels
+    $compact-max-width: calc(100vw - 32px);
+
+    // Make the compact panel shrink-to-fit its contents.
+    // This ensures the popover background/container expands together with
+    // long locale texts instead of letting inner buttons visually overflow.
+    display: inline-block;
+    max-width: $compact-max-width;
+
+    // Ensure the popover expands to fit this compact datepicker
+    &:not(&-insetInput) {
+        width: max-content;
+    }
+
+    .#{$module}-container {
+        // Keep flex layout but allow the container to size by content.
+        width: max-content;
+    }
+
     .#{$module}-month-grid {
+        // Let the month grid contribute its intrinsic width to the popover.
+        width: max-content;
+
+        .#{$module}-month-grid-left,
+        .#{$module}-month-grid-right {
+            min-width: $width-datepicker_month_compact;
+            // Keep the current compact width as the baseline,
+            // but allow the panel to grow to fit long locale texts.
+            // When reaching viewport limit, month title will ellipsis.
+            max-width: $compact-max-width;
+        }
+
+        // Keep calendar body centered when panel grows
+        // without breaking navigation layout in range mode.
+        .#{$module}-month {
+            margin-left: auto;
+            margin-right: auto;
+        }
 
         &[x-type="dateTime"],
         &[x-type="dateTimeRange"] {
@@ -1139,6 +1176,18 @@ $module-list: #{$prefix}-scrolllist;
             }
         }
 
+        // Allow yam (year-month scrolllist) panel to expand with content in compact mode
+        .#{$module}-yam {
+            // Use relative positioning so parent can expand to fit content width
+            // Height is constrained to prevent scrolllist from expanding too much
+            position: relative;
+            width: 100%;
+            max-width: 100%;
+            max-height: $height-datepicker_yam_panel_compact;
+            overflow-x: auto;
+            overflow-y: hidden;
+        }
+
         &[x-type="dateRange"],
         &[x-type="dateTimeRange"] {
             .#{$module}-month-grid-left {
@@ -1169,6 +1218,18 @@ $module-list: #{$prefix}-scrolllist;
             box-sizing: border-box;
             height: $height-datepicker_yam_panel_header_compact;
             padding: $spacing-datepicker_yam_panel_header_compact-padding;
+            width: 100%;
+            max-width: 100%;
+
+            // Constrain the back button to prevent overflow
+            button,
+            .#{$prefix}-button {
+                width: 100%;
+                max-width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
         }
 
         .#{$module}-yearmonth-body {
@@ -1265,9 +1326,14 @@ $module-list: #{$prefix}-scrolllist;
     }
 
     .#{$module}-navigation {
+        box-sizing: border-box;
         height: $width-datepicker_nav_compact;
         padding: $spacing-datepicker_nav_compact-padding;
         padding-bottom: 0;
+        // In compact mode, keep navigation constrained within each panel
+        // (especially important for dateRange two-column layout).
+        width: 100%;
+        max-width: 100%;
 
         &-left,
         &-right {
@@ -1281,10 +1347,21 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-month {
+            min-width: 0;
+            overflow: hidden;
+
             .#{$prefix}-button {
                 // 覆盖样式，否则会从button继承
                 @include font-size-small;
                 line-height: $lineHeight-datepicker_compact;
+                max-width: 100%;
+
+                > span {
+                    display: block;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
             }
         }
     }
@@ -1498,7 +1575,10 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-month {
-            max-width: $width-datepicker_panel_compact;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            min-width: $width-datepicker_panel_compact;
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1514,7 +1594,10 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-date {
-            max-width: $width-datepicker_panel_compact;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            min-width: $width-datepicker_panel_compact;
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1530,7 +1613,10 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-dateTime {
-            max-width: $width-datepicker_panel_compact;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            min-width: $width-datepicker_panel_compact;
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1546,7 +1632,12 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-dateRange {
-            max-width: $width-datepicker_panel_compact * 2;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            // Avoid min-width > max-width on small viewports (which would force overflow).
+            // Keep the 2-panel baseline when possible, but cap it to the compact viewport limit.
+            min-width: min(#{$width-datepicker_panel_compact * 2}, #{$compact-max-width});
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
@@ -1562,7 +1653,11 @@ $module-list: #{$prefix}-scrolllist;
         }
 
         &-dateTimeRange {
-            max-width: $width-datepicker_panel_compact * 2;
+            // Keep compact baseline width, but allow growing to fit long locale texts.
+            // Avoid min-width > max-width on small viewports (which would force overflow).
+            min-width: min(#{$width-datepicker_panel_compact * 2}, #{$compact-max-width});
+            width: max-content;
+            max-width: $compact-max-width;
 
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,

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

@@ -138,6 +138,11 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     dateFnsLocale?: any;
     localeCode?: string;
     rangeSeparator?: string;
+    /**
+     * Only for UI render. Keep `semi-foundation` framework-agnostic (no React types).
+     * `semi-ui` layer should declare this as `React.ReactNode`.
+     */
+    rangeSeparatorNode?: any;
     insetInput?: DateInputFoundationProps['insetInput'];
     preventScroll?: boolean;
 }

package/lib/es/datePicker/foundation.js

@@ -46,6 +46,8 @@ export default class DatePickerFoundation extends BaseFoundation {
     this._isRangeValueComplete = value => {
       let result = false;
       if (Array.isArray(value)) {
+        // Note: empty array should be treated as "complete" (not partially selected)
+        // to keep behaviors such as clear/confirm/change consistent.
         result = !value.some(date => isNullOrUndefined(date));
       }
       return result;

package/lib/es/datePicker/inputFoundation.d.ts

@@ -40,6 +40,11 @@ export interface DateInputFoundationProps extends DateInputElementProps, DateInp
     validateStatus?: ValidateStatus;
     prefixCls?: string;
     rangeSeparator?: string;
+    /**
+     * Only for UI render. Keep `semi-foundation` framework-agnostic (no React types).
+     * `semi-ui` layer should declare this as `React.ReactNode`.
+     */
+    rangeSeparatorNode?: any;
     panelType?: PanelType;
     insetInput?: boolean | InsetInputProps;
     insetInputValue?: InsetInputValue;

package/lib/es/descriptions/descriptions.css

@@ -25,7 +25,7 @@
   font-weight: normal;
   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;
   min-height: 14px;
   white-space: nowrap;
   color: var(--semi-color-text-2);
@@ -34,7 +34,7 @@
   font-weight: normal;
   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);
 }
 .semi-descriptions-center .semi-descriptions-item-th {
@@ -84,14 +84,14 @@
 .semi-descriptions-double-small .semi-descriptions-key {
   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-bottom: 0;
   font-size: 12px;
 }
 .semi-descriptions-double-small .semi-descriptions-value {
   font-size: 16px;
   line-height: 22px;
-  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-size: 16px;
 }
 .semi-descriptions-double-medium .semi-descriptions-item {
@@ -104,7 +104,7 @@
 .semi-descriptions-double-medium .semi-descriptions-value {
   font-size: 20px;
   line-height: 28px;
-  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-size: 20px;
 }
 .semi-descriptions-double-large .semi-descriptions-item {
@@ -117,7 +117,7 @@
 .semi-descriptions-double-large .semi-descriptions-value {
   font-size: 28px;
   line-height: 40px;
-  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-size: 28px;
 }
 .semi-descriptions-horizontal table {