Merge branch '25_2' into 25_2_2608-gantt-move-files-to-ts_part-1

pharret31 · web-flow · commit c3c31425f27e · 2025-11-03T17:47:23.000+01:00
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/legacyAppointmentForm/timezoneEditors.ts b/e2e/testcafe-devextreme/tests/scheduler/common/legacyAppointmentForm/timezoneEditors.ts
@@ -18,7 +18,7 @@ const inputClassName = '.dx-texteditor-input';
 const startDateTimeZoneValue = '(GMT -10:00) Etc - GMT+10';
 const endDateTimeZoneValue = '(GMT -08:00) US - Alaska';
 
-test('TimeZone editors should be have data after hide forms data(T1080932)', async (t) => {
+test.skip('TimeZone editors should be have data after hide forms data(T1080932)', async (t) => {
   const scheduler = new Scheduler('#container');
   const { legacyAppointmentPopup: appointmentPopup } = scheduler;
 
@@ -48,7 +48,7 @@ test('TimeZone editors should be have data after hide forms data(T1080932)', asy
   });
 });
 
-test('TimeZone editors should be have data in default case(T1080932)', async (t) => {
+test.skip('TimeZone editors should be have data in default case(T1080932)', async (t) => {
   const scheduler = new Scheduler('#container');
 
   await t.doubleClick(scheduler.getAppointmentByIndex(0).element);
diff --git a/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss b/packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
@@ -199,7 +199,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: 6px;
+  padding-right: 6px;
 }
 
 .dx-rtl {
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss
@@ -33,6 +33,14 @@
   .dx-fileuploader-wrapper {
     padding: 0;
   }
+
+  .dx-fileuploader-files-container {
+    display: grid;
+
+    .dx-fileuploader-file-container {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .dx-chat-textarea-toolbar.dx-toolbar {
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss
@@ -4,7 +4,10 @@
   $gap,
   $textarea-border-radius,
   $textarea-padding,
-  $toolbar-min-height
+  $toolbar-min-height,
+  $chat-file-container-width,
+  $messagebox-file-container-padding,
+  $messagebox-file-container-padding-top,
 ) {
   .dx-chat-messagebox {
     padding: $messagebox-padding;
@@ -29,6 +32,13 @@
         border-bottom-right-radius: $textarea-border-radius;
       }
     }
+
+    .dx-fileuploader-files-container {
+      padding: $messagebox-file-container-padding;
+      padding-top: $messagebox-file-container-padding-top;
+      gap: $gap;
+      grid-template-columns: repeat(auto-fit, $chat-file-container-width);
+    }
   }
 
   .dx-chat-textarea-toolbar.dx-toolbar {
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
@@ -46,6 +46,9 @@
   $chat-messagebox-textarea-border-radius,
   $chat-messagebox-textarea-padding,
   $chat-messagebox-toolbar-min-height,
+  $chat-file-container-width,
+  $chat-messagebox-file-container-padding,
+  $chat-messagebox-file-container-padding-top,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,
diff --git a/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
@@ -18,6 +18,8 @@ $chat-messagebox-textarea-padding: null !default;
 $chat-messagebox-textarea-border-radius: null !default;
 $chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
+$chat-messagebox-file-container-padding: 3px !default;
+$chat-messagebox-file-container-padding-top: 2px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
@@ -49,6 +49,9 @@
   $chat-messagebox-textarea-border-radius,
   $chat-messagebox-textarea-padding,
   $chat-messagebox-toolbar-min-height,
+  $chat-file-container-width,
+  $chat-messagebox-file-container-padding,
+  $chat-messagebox-file-container-padding-top,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,
diff --git a/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
@@ -18,6 +18,8 @@ $chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !defaul
 $chat-messagebox-textarea-padding: null !default;
 $chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
+$chat-messagebox-file-container-padding: 3px !default;
+$chat-messagebox-file-container-padding-top: 2px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_index.scss b/packages/devextreme-scss/scss/widgets/material/chat/_index.scss
@@ -47,6 +47,9 @@
   $chat-messagebox-textarea-border-radius,
   $chat-messagebox-textarea-padding,
   $chat-messagebox-toolbar-min-height,
+  $chat-file-container-width,
+  $chat-messagebox-file-container-padding,
+  $chat-messagebox-file-container-padding-top,
 );
 @include chat-messagebubble(
   $chat-bubble-padding,
diff --git a/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/chat/_sizes.scss
@@ -16,6 +16,8 @@ $chat-messagebox-textarea-border-radius: $base-border-radius * 2 !default;
 $chat-messagebox-textarea-padding: null !default;
 $chat-messagebox-toolbar-min-height: null !default;
 $chat-messagebox-gap: 8px !default;
+$chat-messagebox-file-container-padding: 3px !default;
+$chat-messagebox-file-container-padding-top: 2px !default;
 $chat-messagelist-padding: null !default;
 $chat-messagegroup-gap: 4px !default;
 $chat-messagegroup-padding: null !default;
diff --git a/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts b/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts
@@ -10,7 +10,7 @@ import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import Callbacks from '@js/core/utils/callbacks';
 import { extend } from '@js/core/utils/extend';
-import { getOffset, getWidth } from '@js/core/utils/size';
+import { getOffset, getOuterWidth, getWidth } from '@js/core/utils/size';
 import { isDefined, isFunction, isNumeric } from '@js/core/utils/type';
 import { getWindow } from '@js/core/utils/window';
 import type { DxEvent } from '@js/events';
@@ -776,7 +776,9 @@ class FileUploader extends Editor<FileUploaderProperties> {
   }
 
   _updateFileNameMaxWidth(): void {
-    const { allowCanceling, uploadMode } = this.option();
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { allowCanceling, uploadMode, _showFileIcon } = this.option();
+
     const cancelButtonsCount = allowCanceling && uploadMode !== 'useForm' ? 1 : 0;
     const uploadButtonsCount = uploadMode === 'useButtons' ? 1 : 0;
     const filesContainerWidth = getWidth(
@@ -785,13 +787,15 @@ class FileUploader extends Editor<FileUploaderProperties> {
     const $buttonContainer = this._$filesContainer?.find(`.${FILEUPLOADER_BUTTON_CONTAINER_CLASS}`).eq(0);
     const buttonsWidth = getWidth($buttonContainer) * (cancelButtonsCount + uploadButtonsCount);
     const $fileSize = this._$filesContainer?.find(`.${FILEUPLOADER_FILE_SIZE_CLASS}`).eq(0);
+    const $icon = this._$filesContainer?.find(`.${FILEUPLOADER_FILE_ICON_CLASS}`).eq(0);
+    const iconWidth = _showFileIcon ? getOuterWidth($icon) : 0;
 
     const prevFileSize = $fileSize?.text();
     $fileSize?.text('1000 Mb');
     const fileSizeWidth = getWidth($fileSize);
     $fileSize?.text(prevFileSize ?? '');
 
-    this._$filesContainer?.find(`.${FILEUPLOADER_FILE_NAME_CLASS}`).css('maxWidth', filesContainerWidth - buttonsWidth - fileSizeWidth);
+    this._$filesContainer?.find(`.${FILEUPLOADER_FILE_NAME_CLASS}`).css('maxWidth', filesContainerWidth - buttonsWidth - fileSizeWidth - iconWidth);
   }
 
   _renderFileButtons(file: FileUploaderItem, $container: dxElementWrapper): void {
@@ -1745,6 +1749,10 @@ class FileUploader extends Editor<FileUploaderProperties> {
         this._initFileInput();
         super._optionChanged(args);
         break;
+      case 'visible':
+        super._optionChanged(args);
+        this._updateFileNameMaxWidth();
+        break;
       default:
         super._optionChanged(args);
     }

Original file line number	Diff line number	Diff line change
`@@ -199,7 +199,7 @@`
`199`	`199`	`display: flex;`
`200`	`200`	`justify-content: center;`
`201`	`201`	`align-items: center;`
`202`		`- margin-right: 6px;`
	`202`	`+ padding-right: 6px;`
`203`	`203`	`}`
`204`	`204`
`205`	`205`	`.dx-rtl {`
Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,14 @@`
`33`	`33`	`.dx-fileuploader-wrapper {`
`34`	`34`	`padding: 0;`
`35`	`35`	`}`
	`36`	`+`
	`37`	`+ .dx-fileuploader-files-container {`
	`38`	`+ display: grid;`
	`39`	`+`
	`40`	`+ .dx-fileuploader-file-container {`
	`41`	`+ margin-bottom: 0;`
	`42`	`+ }`
	`43`	`+ }`
`36`	`44`	`}`
`37`	`45`
`38`	`46`	`.dx-chat-textarea-toolbar.dx-toolbar {`