@douyinfe/semi-foundation 2.96.1 → 2.98.0

package/lib/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/datePicker/foundation.js

@@ -53,6 +53,8 @@ class DatePickerFoundation extends _foundation.default {
     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 => (0, _isNullOrUndefined.default)(date));
       }
       return result;

package/lib/cjs/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/cjs/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 {

package/lib/cjs/dropdown/dropdown.css

@@ -4,7 +4,7 @@
 .semi-dropdown {
   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-dropdown-wrapper {
   overflow-y: auto;
@@ -35,7 +35,7 @@
   padding-right: 16px;
   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;
   cursor: default;
 }
 .semi-dropdown-title-withTick {

package/lib/cjs/form/form.css

@@ -54,7 +54,7 @@
   vertical-align: middle;
   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;
   flex-shrink: 0;
 }
 .semi-form-field-label-disabled {
@@ -89,7 +89,7 @@
 .semi-form-field-error-message, .semi-form-field-help-text {
   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;
   display: flex;
   align-items: center;
   margin-top: 4px;
@@ -176,7 +176,7 @@
   color: var(--semi-color-tertiary);
   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-form-vertical .semi-form-field-group {
@@ -210,7 +210,7 @@
   margin-block-end: 0;
   font-size: 18px;
   line-height: 24px;
-  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;
   width: 100%;
   padding-bottom: 8px;

package/lib/cjs/form/foundation.d.ts

@@ -23,7 +23,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     updateArrayField(arrayField: string, updateValue: any): void;
     validate(fieldPaths?: Array<string> | ValidateOptions): Promise<unknown>;
     _formValidate(silent?: boolean): Promise<unknown>;
-    _fieldsValidate(fieldPaths: Array<string>, silent?: boolean): Promise<unknown>;
+    _fieldsValidate(fieldPaths?: Array<string>, silent?: boolean): Promise<unknown>;
     submit(e?: any): void;
     /**
      * Case A：

package/lib/cjs/form/foundation.js

@@ -79,14 +79,60 @@ class FormFoundation extends _foundation.default {
     const registered = this.registered[field];
     this.registered[field] = true;
     this.fields.set(field, fieldStuff);
-    if (fieldStuff.keepState) {
-      // TODO support keepState
+    if (fieldStuff.keepState && registered) {
+      // When keepState is true and the field was previously registered (remounting),
+      // restore the saved state from formState instead of using the initial value
+      const hasSavedValue = ObjectUtil.has(this.data.values, field);
+      const savedValue = ObjectUtil.get(this.data.values, field);
+      const hasSavedError = ObjectUtil.has(this.data.errors, field);
+      const savedError = ObjectUtil.get(this.data.errors, field);
+      const hasSavedTouched = ObjectUtil.has(this.data.touched, field);
+      const savedTouched = ObjectUtil.get(this.data.touched, field);
+      const allowEmpty = fieldStuff.allowEmpty || false;
+      const opts = {
+        notNotify: true,
+        notUpdate: false,
+        // updateStateValue reads `fieldAllowEmpty` (field-level override)
+        fieldAllowEmpty: allowEmpty
+      };
+      // Restore value from formState if it exists
+      if (hasSavedValue) {
+        // Keep formState as source of truth; still trigger a forceUpdate so that
+        // consumers of formState can get the latest snapshot when field remounts.
+        this.updateStateValue(field, savedValue, opts);
+        // Sync the restored value back to the field component's local state.
+        // Avoid a second forceUpdate/notify from FieldApi.
+        fieldStuff.fieldApi.setValue(savedValue, Object.assign(Object.assign({}, opts), {
+          notUpdate: true
+        }));
+      } else {
+        // No saved value, use initial value
+        let fieldValue = fieldState.value;
+        if (!allowEmpty && fieldValue === '') {
+          fieldValue = undefined;
+        }
+        this.updateStateValue(field, fieldValue, opts);
+      }
+      // Restore error from formState if it exists
+      if (hasSavedError) {
+        this.updateStateError(field, savedError, opts);
+        fieldStuff.fieldApi.setError(savedError, Object.assign(Object.assign({}, opts), {
+          notUpdate: true
+        }));
+      }
+      // Restore touched from formState if it exists
+      if (hasSavedTouched) {
+        this.updateStateTouched(field, savedTouched, opts);
+        fieldStuff.fieldApi.setTouched(savedTouched, Object.assign(Object.assign({}, opts), {
+          notUpdate: true
+        }));
+      }
     } else {
       const allowEmpty = fieldStuff.allowEmpty || false;
       const opts = {
         notNotify: true,
         notUpdate: false,
-        allowEmpty
+        fieldAllowEmpty: allowEmpty
       };
       let fieldValue = fieldState.value;
       // When allowEmpty is false, 'is equivalent to undefined, and the key of the field does not need to be reflected on values
@@ -135,9 +181,9 @@ class FormFoundation extends _foundation.default {
     this.registeredArrayField.set(arrayField, mergeVal);
   }
   validate(fieldPaths) {
-    const {
-      validateFields
-    } = this.getProps();
+    const props = this.getProps();
+    // `validator` is the recommended name; `validateFields` is kept as a deprecated alias.
+    const validateFields = props.validator || props.validateFields;
     // Parse options
     let fields;
     let silent = false;
@@ -162,9 +208,9 @@ class FormFoundation extends _foundation.default {
     const {
       values
     } = this.data;
-    const {
-      validateFields
-    } = this.getProps();
+    const props = this.getProps();
+    // `validator` is the recommended name; `validateFields` is kept as a deprecated alias.
+    const validateFields = props.validator || props.validateFields;
     return new Promise((resolve, reject) => {
       let maybePromisedErrors;
       try {