@douyinfe/semi-foundation 2.96.1 → 2.98.0

package/cascader/foundation.ts

@@ -170,6 +170,7 @@ export interface BasicCascaderProps {
     preventScroll?: boolean;
     virtualizeInSearch?: Virtualize;
     checkRelation?: string;
+    remote?: boolean;
     onClear?: () => void;
     triggerRender?: (props: BasicTriggerRenderProps) => any;
     onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
@@ -423,6 +424,76 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         } else {
             this._adapter.updateStates({ 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: string, keyEntities?: BasicEntities): string[] {
+        if (!sugInput) {
+            return [];
+        }
+        const { treeNodeFilterProp, filterTreeNode, filterLeafOnly, remote } = this.getProps();
+        const entities = Object.values(keyEntities ?? this.getState('keyEntities')) as BasicEntity[];
+
+        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?: string, nextKeyEntities?: BasicEntities) {
+        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: Partial<BasicCascaderInnerData> = {
+            isSearching: Boolean(sugInput),
+            filteredKeys: new Set(filteredKeys),
+        };
+        if (nextKeyEntities) {
+            updateStates.keyEntities = nextKeyEntities;
+        }
+        this._adapter.updateStates(updateStates);
+        this._adapter.rePositionDropdown();
     }
 
     // call when props.value change
@@ -970,25 +1041,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
 
     handleInputChange(sugInput: string) {
         this._adapter.updateInputValue(sugInput);
-        const { keyEntities } = this.getStates();
-        const { treeNodeFilterProp, filterTreeNode, filterLeafOnly } = this.getProps();
-        let filteredKeys: string[] = [];
-        if (sugInput) {
-            filteredKeys = (Object.values(keyEntities) as BasicEntity[])
-                .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 as unknown as BasicCascaderData)
-                )
-                .map(item => item.key);
-        }
+        const filteredKeys = this._calcFilteredKeys(sugInput);
 
         this._adapter.updateStates({
             isSearching: Boolean(sugInput),
@@ -1054,7 +1107,9 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     getRenderData() {
         const { keyEntities, isSearching } = 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) as BasicEntity[])

package/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/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/datePicker/foundation.ts

@@ -168,6 +168,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
 }
@@ -1265,6 +1270,8 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     _isRangeValueComplete = (value: Date[] | Date) => {
         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/datePicker/inputFoundation.ts

@@ -61,6 +61,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/form/foundation.ts

@@ -94,14 +94,58 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
         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: CallOpts = {
+                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, { ...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, { ...opts, notUpdate: true });
+            }
+
+            // Restore touched from formState if it exists
+            if (hasSavedTouched) {
+                this.updateStateTouched(field, savedTouched, opts);
+                fieldStuff.fieldApi.setTouched(savedTouched, { ...opts, notUpdate: true });
+            }
         } else {
             const allowEmpty = fieldStuff.allowEmpty || false;
-            const opts = {
+            const opts: CallOpts = {
                 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
@@ -158,7 +202,9 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     }
 
     validate(fieldPaths?: Array<string> | ValidateOptions): Promise<unknown> {
-        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: Array<string> | undefined;
@@ -184,7 +230,9 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     // form level validate
     _formValidate(silent: boolean = false): Promise<unknown> {
         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;
@@ -245,7 +293,7 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
     }
 
     // field level validate
-    _fieldsValidate(fieldPaths: Array<string>, silent: boolean = false): Promise<unknown> {
+    _fieldsValidate(fieldPaths?: Array<string>, silent: boolean = false): Promise<unknown> {
         const { values } = this.data;
         // When there is no custom validation function at Form level, perform validation of each Field
         return new Promise((resolve, reject) => {

package/form/utils.ts

@@ -131,6 +131,7 @@ export function mergeProps(props: any) {
         wrapperCol,
         initValue,
         validate,
+        validator,
         /**
          * error、warning、default、success
          */
@@ -179,6 +180,10 @@ export function mergeProps(props: any) {
     const required = isRequired(rules);
 
     emptyValue = typeof emptyValue !== 'undefined' ? emptyValue : '';
+
+    // `validator` is the recommended name; `validate` is kept as a deprecated alias.
+    const finalValidate = validator || validate;
+
     return {
         field,
         label,
@@ -191,7 +196,7 @@ export function mergeProps(props: any) {
         noErrorMessage,
         isInInputGroup,
         initValue,
-        validate,
+        validate: finalValidate,
         validateStatus,
         trigger,
         allowEmptyString,
@@ -218,4 +223,4 @@ export function mergeProps(props: any) {
 
 function bothEmptyArray(val: any, otherVal: any) {
     return Array.isArray(val) && Array.isArray(otherVal) && !val.length && !otherVal.length;
-}
+}

package/image/previewImageFoundation.ts

@@ -51,6 +51,28 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     containerWidth = 0; 
     containerHeight = 0;
 
+    // initialZoom should only be applied once per image src (first initialization)
+    private _initialZoomApplied = false;
+    private _initialZoomAppliedSrc: any = undefined;
+
+    private _syncInitialZoomFlagWithSrc = () => {
+        const src = this.getProp("src");
+        if (src !== this._initialZoomAppliedSrc) {
+            this._initialZoomAppliedSrc = src;
+            this._initialZoomApplied = false;
+        }
+    };
+
+    private _clampZoom = (zoom: number) => {
+        const { maxZoom, minZoom } = this.getProps() as any;
+        const max = typeof maxZoom === 'number' ? maxZoom : 5;
+        const min = typeof minZoom === 'number' ? minZoom : 0.1;
+        if (typeof zoom !== 'number' || !Number.isFinite(zoom)) {
+            return min;
+        }
+        return Math.min(max, Math.max(min, zoom));
+    };
+
     init() {
         this._getContainerBoundingRectSize();
     }
@@ -84,14 +106,21 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
     }
 
     _getInitialZoom = () => {
-        const { ratio } = this.getProps();
+        const { ratio, initialZoom } = this.getProps() as any;
         let _zoom = 1;
 
+        // initialZoom is only used for the first initialization of each src
+        this._syncInitialZoomFlagWithSrc();
+        if (!this._initialZoomApplied && typeof initialZoom === 'number' && Number.isFinite(initialZoom) && initialZoom > 0) {
+            this._initialZoomApplied = true;
+            return this._clampZoom(initialZoom);
+        }
+
         if (ratio === 'adaptation') {
             _zoom = this._getAdaptationZoom();
         }
 
-        return _zoom;
+        return this._clampZoom(_zoom);
     }
 
     setLoading = (loading: boolean) => {
@@ -108,6 +137,8 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
             const { naturalWidth: w, naturalHeight: h } = e.target as any;
             this.originImageHeight = h;
             this.originImageWidth = w;
+            // New image is loaded; allow initialZoom to be applied once for this src
+            this._syncInitialZoomFlagWithSrc();
             this.setState({
                 loading: false,
             } as any);
@@ -357,4 +388,4 @@ export default class PreviewImageFoundation<P = Record<string, any>, S = Record<
             y: boundOffsetY
         };
     }
-}
+}

package/image/previewInnerFoundation.ts

@@ -205,12 +205,13 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
 
     handleZoomImage = (newZoom: number, notify: boolean = true, e?: WheelEvent) => {
         const { zoom } = this.getStates();
-        if (zoom !== newZoom) {
-            notify && this._adapter.notifyZoom(newZoom, newZoom > zoom);
+        const nextZoom = this._clampZoom(newZoom);
+        if (zoom !== nextZoom) {
+            notify && this._adapter.notifyZoom(nextZoom, nextZoom > zoom);
             
-            this._adapter.changeImageZoom(newZoom, e);
+            this._adapter.changeImageZoom(nextZoom, e);
             this.setState({
-                zoom: newZoom,
+                zoom: nextZoom,
             } as any);
         }
     }
@@ -316,4 +317,14 @@ export default class PreviewInnerFoundation<P = Record<string, any>, S = Record<
             this.preloadSingleImage();
         }
     }
+
+    private _clampZoom = (zoom: number) => {
+        const { maxZoom, minZoom } = this.getProps() as any;
+        const max = typeof maxZoom === 'number' ? maxZoom : 5;
+        const min = typeof minZoom === 'number' ? minZoom : 0.1;
+        if (typeof zoom !== 'number' || !Number.isFinite(zoom)) {
+            return min;
+        }
+        return Math.min(max, Math.max(min, zoom));
+    };
 }

package/input/textarea.scss

@@ -16,6 +16,21 @@ $module: #{$prefix}-input;
     transition: background-color $transition_duration-input-bg $transition_function-input-bg $transition_delay-input-bg,
     border $transition_duration-input-border $transition_function-input-border $transition_delay-input-border;
 
+    // When native resize changes textarea width, wrapper (border/clear/counter) should follow.
+    // Default wrapper is `width: 100%`, so it won't grow with textarea. Enable shrink-to-fit.
+    &-resizeX {
+        // Keep original textarea wrapper formatting (stacking counter, etc.),
+        // only shrink-to-fit width so border follows horizontal resize.
+        // Using inline-flex here may change internal layout and cause clear/counter misalignment.
+        display: inline-block;
+        width: fit-content;
+        max-width: 100%;
+    }
+
+    &-resizeY {
+        // Keep default width behavior; vertical resize doesn't require wrapper width change.
+    }
+
     &:hover {
         background-color: $color-input_default-bg-hover;
     }
@@ -40,6 +55,10 @@ $module: #{$prefix}-input;
         color: $color-textarea-icon-default;
         right: $spacing-textarea-icon-right;
         height: $height-textarea-default;
+        // Center the icon within the clearbtn area
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         & > svg {
             pointer-events: none;
@@ -130,6 +149,7 @@ $module: #{$prefix}-input;
 
 .#{$module}-textarea {
     position: relative;
+    // resize is now controlled by resize prop, default to none for backward compatibility
     resize: none;
     // min-height: $height-input_default;
     padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;
@@ -177,6 +197,8 @@ $module: #{$prefix}-input;
 
     &-autosize {
         overflow: hidden;
+        // When autosize is enabled, force resize to none to avoid conflicts
+        resize: none;
     }
 
     &-counter {
@@ -235,6 +257,19 @@ $module: #{$prefix}-input;
     padding: 0;
     align-items: flex-start;
 
+    &.#{$module}-textarea-wrapper-resizeX {
+        // Keep line number + textarea layout, but let width shrink-to-fit
+        display: inline-flex;
+        width: fit-content;
+        max-width: 100%;
+
+        .#{$module}-textarea-content {
+            flex: 0 0 auto;
+        }
+
+        // Do not force a minimum width here; allow the control to fit narrow containers.
+    }
+
     .#{$module}-textarea-lineNumber {
         flex-shrink: 0;
         padding: $spacing-textarea-paddingY $spacing-textarea-paddingX;