From 6553990a14637666516f2e7185baeecb60a66322 Mon Sep 17 00:00:00 2001
From: Alyar <>
Date: Thu, 16 Jan 2025 16:12:25 +0200
Subject: [PATCH] Fix remarks

---
 .../grid_core/header_panel/m_header_panel.ts  |   2 +-
 .../__snapshots__/widget.test.ts.snap         |   1 +
 .../new/grid_core/inferno_wrappers/toolbar.ts |   5 +-
 ...view.test.ts.snap => options.test.ts.snap} | 134 ++-----------
 .../grids/new/grid_core/toolbar/controller.ts |  15 +-
 .../grids/new/grid_core/toolbar/defaults.tsx  |   4 -
 .../new/grid_core/toolbar/options.test.ts     | 152 +++++++++++++++
 .../grids/new/grid_core/toolbar/types.ts      |   3 +-
 .../grids/new/grid_core/toolbar/utils.test.ts |  72 ++++++-
 .../grids/new/grid_core/toolbar/utils.ts      |  57 +++++-
 .../grids/new/grid_core/toolbar/view.test.ts  | 177 ------------------
 .../grids/new/grid_core/utils.test.ts         |  68 -------
 .../__internal/grids/new/grid_core/utils.ts   |  52 -----
 13 files changed, 311 insertions(+), 431 deletions(-)
 rename packages/devextreme/js/__internal/grids/new/grid_core/toolbar/__snapshots__/{view.test.ts.snap => options.test.ts.snap} (55%)
 create mode 100644 packages/devextreme/js/__internal/grids/new/grid_core/toolbar/options.test.ts
 delete mode 100644 packages/devextreme/js/__internal/grids/new/grid_core/toolbar/view.test.ts
 delete mode 100644 packages/devextreme/js/__internal/grids/new/grid_core/utils.test.ts
 delete mode 100644 packages/devextreme/js/__internal/grids/new/grid_core/utils.ts

diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts b/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts
index 7abde5743191..57b5dd0307ec 100644
--- a/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts
+++ b/packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts
@@ -7,7 +7,7 @@ import type { Properties as ToolbarProperties } from '@js/ui/toolbar';
 import Toolbar from '@js/ui/toolbar';
 import type { EditingController } from '@ts/grids/grid_core/editing/m_editing';
 import type { HeaderFilterController } from '@ts/grids/grid_core/header_filter/m_header_filter';
-import { normalizeToolbarItems } from '@ts/grids/new/grid_core/utils';
+import { normalizeToolbarItems } from '@ts/grids/new/grid_core/toolbar/utils';
 
 import type { ModuleType } from '../m_types';
 import { ColumnsView } from '../views/m_columns_view';
diff --git a/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap b/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap
index b8a3b92dc104..d64f709fa54e 100644
--- a/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap
+++ b/packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap
@@ -4,6 +4,7 @@ exports[`common initial render should be successfull 1`] = `
 <div
   class="dx-widget dx-cardview"
 >
+  
   This is cardView
 </div>
 `;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toolbar.ts b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toolbar.ts
index c672e67e1a19..c9e2d216081e 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toolbar.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/inferno_wrappers/toolbar.ts
@@ -29,8 +29,9 @@ export class Toolbar extends InfernoWrapper<ToolbarProps, dxToolbar> {
           });
         }
       });
-      const propsToUpdate = { ...props };
-      delete propsToUpdate.items;
+
+      const { items, ...propsToUpdate } = props;
+
       super.updateComponentOptions(prevProps, propsToUpdate);
     } else {
       super.updateComponentOptions(prevProps, props);
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/__snapshots__/view.test.ts.snap b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/__snapshots__/options.test.ts.snap
similarity index 55%
rename from packages/devextreme/js/__internal/grids/new/grid_core/toolbar/__snapshots__/view.test.ts.snap
rename to packages/devextreme/js/__internal/grids/new/grid_core/toolbar/__snapshots__/options.test.ts.snap
index 939da92a941e..5fa658a56425 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/__snapshots__/view.test.ts.snap
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/__snapshots__/options.test.ts.snap
@@ -1,38 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Applying options when changing a visible to 'false' at runtime Toolbar should be hidden 1`] = `
-<div>
-  
-</div>
-`;
-
-exports[`Applying options when changing a visible to 'true' at runtime Toolbar should be visible 1`] = `
-<div>
-  <div
-    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
-    role="toolbar"
-  >
-    <div
-      class="dx-toolbar-items-container"
-    >
-      <div
-        class="dx-toolbar-before"
-        role="presentation"
-      />
-      <div
-        class="dx-toolbar-center"
-        role="presentation"
-      />
-      <div
-        class="dx-toolbar-after"
-        role="presentation"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Applying options when disabled = 'false' Toolbar should not be disabled 1`] = `
+exports[`Options disabled when it is 'false' Toolbar should not be disabled 1`] = `
 <div>
   <div
     class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
@@ -58,7 +26,7 @@ exports[`Applying options when disabled = 'false' Toolbar should not be disabled
 </div>
 `;
 
-exports[`Applying options when disabled = 'true' Toolbar should be disabled 1`] = `
+exports[`Options disabled when it is 'true' Toolbar should be disabled 1`] = `
 <div>
   <div
     aria-disabled="true"
@@ -85,39 +53,13 @@ exports[`Applying options when disabled = 'true' Toolbar should be disabled 1`]
 </div>
 `;
 
-exports[`Applying options when visible = 'false' Toolbar should be hidden 1`] = `
+exports[`Options items when these are not set Toolbar should be hidden 1`] = `
 <div>
   
 </div>
 `;
 
-exports[`Applying options when visible = 'true' Toolbar should be visible 1`] = `
-<div>
-  <div
-    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
-    role="toolbar"
-  >
-    <div
-      class="dx-toolbar-items-container"
-    >
-      <div
-        class="dx-toolbar-before"
-        role="presentation"
-      />
-      <div
-        class="dx-toolbar-center"
-        role="presentation"
-      />
-      <div
-        class="dx-toolbar-after"
-        role="presentation"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Applying options when visible = 'undefined' and there are items Toolbar should be visible 1`] = `
+exports[`Options items when these are set Toolbar should be visible 1`] = `
 <div>
   <div
     class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection"
@@ -193,16 +135,16 @@ exports[`Applying options when visible = 'undefined' and there are items Toolbar
 </div>
 `;
 
-exports[`Applying options when visible = 'undefined' and there are no items Toolbar should be hidden 1`] = `
+exports[`Options visilbe when changing it to 'false' at runtime Toolbar should be hidden 1`] = `
 <div>
   
 </div>
 `;
 
-exports[`render Toolbar with options 1`] = `
+exports[`Options visilbe when changing it to 'true' at runtime Toolbar should be visible 1`] = `
 <div>
   <div
-    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection"
+    class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
     role="toolbar"
   >
     <div
@@ -211,32 +153,7 @@ exports[`render Toolbar with options 1`] = `
       <div
         class="dx-toolbar-before"
         role="presentation"
-      >
-        <div
-          class="dx-item dx-toolbar-item dx-toolbar-button"
-        >
-          <div
-            class="dx-item-content dx-toolbar-item-content"
-          >
-            <div
-              aria-label="button1"
-              class="dx-widget dx-button dx-button-mode-contained dx-button-normal dx-button-has-text"
-              role="button"
-              tabindex="0"
-            >
-              <div
-                class="dx-button-content"
-              >
-                <span
-                  class="dx-button-text"
-                >
-                  button1
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      />
       <div
         class="dx-toolbar-center"
         role="presentation"
@@ -244,38 +161,19 @@ exports[`render Toolbar with options 1`] = `
       <div
         class="dx-toolbar-after"
         role="presentation"
-      >
-        <div
-          class="dx-item dx-toolbar-item dx-toolbar-button"
-        >
-          <div
-            class="dx-item-content dx-toolbar-item-content"
-          >
-            <div
-              aria-label="button2"
-              class="dx-widget dx-button dx-button-mode-contained dx-button-normal dx-button-has-text"
-              role="button"
-              tabindex="0"
-            >
-              <div
-                class="dx-button-content"
-              >
-                <span
-                  class="dx-button-text"
-                >
-                  button2
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      />
     </div>
   </div>
 </div>
 `;
 
-exports[`render empty toolbar 1`] = `
+exports[`Options visilbe when it is 'false' Toolbar should be hidden 1`] = `
+<div>
+  
+</div>
+`;
+
+exports[`Options visilbe when it is 'true' Toolbar should be visible 1`] = `
 <div>
   <div
     class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection dx-toolbar-mini"
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.ts
index 35e7c3550052..ef12e1ba7e69 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/controller.ts
@@ -1,15 +1,19 @@
 /* eslint-disable @typescript-eslint/no-dynamic-delete */
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable spellcheck/spell-checker */
-import type { MaybeSubscribable, Subscribable, SubsGets } from '@ts/core/reactive/index';
+import type {
+  MaybeSubscribable, Subscribable, Subscription, SubsGets,
+} from '@ts/core/reactive/index';
 import { computed, state, toSubscribable } from '@ts/core/reactive/index';
 
 import { OptionsController } from '../options_controller/options_controller';
-import { normalizeToolbarItems } from '../utils';
 import { DEFAULT_TOOLBAR_ITEMS } from './defaults';
 import type { PredefinedToolbarItem, ToolbarItem, ToolbarItems } from './types';
+import { normalizeToolbarItems } from './utils';
 
 export class ToolbarController {
+  private readonly itemSubscriptions: Record<string, Subscription> = {};
+
   private readonly defaultItems = state<Record<string, PredefinedToolbarItem>>({});
 
   private readonly userItems: Subscribable<ToolbarItems | undefined>;
@@ -35,7 +39,11 @@ export class ToolbarController {
   public addDefaultItem(
     item: MaybeSubscribable<PredefinedToolbarItem>,
   ): void {
-    toSubscribable(item).subscribe((item) => {
+    const itemObs = toSubscribable(item);
+    // @ts-expect-error
+    const { name } = itemObs.unreactive_get();
+
+    this.itemSubscriptions[name] = itemObs.subscribe((item) => {
       this.defaultItems.updateFunc((oldDefaultItems) => ({
         ...oldDefaultItems,
         [item.name]: item,
@@ -49,5 +57,6 @@ export class ToolbarController {
       delete defaultItems[name];
       return defaultItems;
     });
+    this.itemSubscriptions[name].unsubscribe();
   }
 }
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/defaults.tsx b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/defaults.tsx
index 41196d398576..5e8280f1393d 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/defaults.tsx
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/defaults.tsx
@@ -2,9 +2,5 @@
  * used for defining default toolbar items and their default order in header panel
  */
 export const DEFAULT_TOOLBAR_ITEMS = [
-  'saveButton',
-  'revertButton',
-  'editButton',
-  'columnsChooserButton',
   'searchPanel',
 ] as const;
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/options.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/options.test.ts
new file mode 100644
index 000000000000..060c8769fb57
--- /dev/null
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/options.test.ts
@@ -0,0 +1,152 @@
+/* eslint-disable spellcheck/spell-checker */
+/* eslint-disable @typescript-eslint/dot-notation */
+import { describe, expect, it } from '@jest/globals';
+
+import type { Options } from '../options';
+import { OptionsControllerMock } from '../options_controller/options_controller.mock';
+import { ToolbarController } from './controller';
+import { ToolbarView } from './view';
+
+const createToolbarView = (options?: Options): {
+  rootElement: HTMLElement;
+  optionsController: OptionsControllerMock;
+} => {
+  const rootElement = document.createElement('div');
+  const optionsController = new OptionsControllerMock(options ?? {
+    toolbar: {
+      visible: true,
+    },
+  });
+
+  const toolbarController = new ToolbarController(optionsController);
+  const toolbar = new ToolbarView(toolbarController, optionsController);
+
+  toolbar.render(rootElement);
+
+  return {
+    rootElement,
+    optionsController,
+  };
+};
+
+describe('Options', () => {
+  describe('visilbe', () => {
+    describe('when it is \'true\'', () => {
+      it('Toolbar should be visible', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            visible: true,
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+
+    describe('when it is \'false\'', () => {
+      it('Toolbar should be hidden', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            visible: false,
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+
+    describe('when changing it to \'false\' at runtime', () => {
+      it('Toolbar should be hidden', () => {
+        const { rootElement, optionsController } = createToolbarView({
+          toolbar: {
+            visible: true,
+          },
+        });
+
+        optionsController.option('toolbar.visible', false);
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+
+    describe('when changing it to \'true\' at runtime', () => {
+      it('Toolbar should be visible', () => {
+        const { rootElement, optionsController } = createToolbarView({
+          toolbar: {
+            visible: false,
+          },
+        });
+
+        optionsController.option('toolbar.visible', true);
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('items', () => {
+    describe('when these are not set', () => {
+      it('Toolbar should be hidden', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            items: [],
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+
+    describe('when these are set', () => {
+      it('Toolbar should be visible', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            items: [{
+              location: 'before',
+              widget: 'dxButton',
+              options: {
+                text: 'button1',
+              },
+            }, {
+              location: 'after',
+              widget: 'dxButton',
+              options: {
+                text: 'button2',
+              },
+            }],
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('disabled', () => {
+    describe('when it is \'true\'', () => {
+      it('Toolbar should be disabled', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            visible: true,
+            disabled: true,
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+
+    describe('when it is \'false\'', () => {
+      it('Toolbar should not be disabled', () => {
+        const { rootElement } = createToolbarView({
+          toolbar: {
+            visible: true,
+            disabled: false,
+          },
+        });
+
+        expect(rootElement).toMatchSnapshot();
+      });
+    });
+  });
+});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/types.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/types.ts
index 26dc334e3536..994bf1791e7f 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/types.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/types.ts
@@ -10,10 +10,9 @@ export interface ToolbarItem extends BaseToolbarItem {
 
 export type PredefinedToolbarItem = ToolbarItem & { name: DefaultToolbarItem };
 export type ToolbarItems = (ToolbarItem | DefaultToolbarItem)[];
-export type ToolbarVisible = boolean | undefined;
 
 export interface ToolbarProps {
   items?: ToolbarItems;
-  visible?: ToolbarVisible;
+  visible?: boolean | undefined;
   disabled?: boolean;
 }
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.test.ts
index c3d6ae71f54d..4ce02da03eeb 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.test.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from '@jest/globals';
 
-import { isVisible } from './utils';
+import { isVisible, normalizeToolbarItems } from './utils';
 
 describe('isVisible', () => {
   describe('when visibleConfig = true', () => {
@@ -23,7 +23,75 @@ describe('isVisible', () => {
 
   describe('when visibleConfig = undefined and there are no items', () => {
     it('should be equal to true', () => {
-      expect(isVisible(undefined, [{ name: 'toolbarItem1' }, { name: 'toolbarItem2' }])).toBe(true);
+      expect(isVisible(undefined, [
+        { name: 'toolbarItem1' },
+        { name: 'toolbarItem2' },
+      ])).toBe(true);
+    });
+  });
+});
+
+describe('normalizeToolbarItems', () => {
+  describe('when only default items are specified', () => {
+    it('should return default items', () => {
+      expect(normalizeToolbarItems(
+        [{ name: 'toolbarItem1' }],
+        undefined,
+        ['toolbarItem1'],
+      )).toStrictEqual([{ name: 'toolbarItem1' }]);
+    });
+  });
+
+  describe('when only custom items are specified', () => {
+    it('should return processed custom items', () => {
+      expect(normalizeToolbarItems(
+        [],
+        [{ name: 'customToolbarItem1' }],
+        ['toolbarItem1'],
+      )).toStrictEqual([{ name: 'customToolbarItem1', location: 'after' }]);
+    });
+  });
+
+  describe('when default items and custom items are specified', () => {
+    it('should return processed custom items', () => {
+      expect(normalizeToolbarItems(
+        [{ name: 'toolbarItem1' }],
+        [{ name: 'customToolbarItem1' }],
+        ['toolbarItem1'],
+      )).toStrictEqual([{ name: 'customToolbarItem1', location: 'after' }]);
+    });
+  });
+
+  describe('when custom items override default items', () => {
+    it('should return default items merged with custom items', () => {
+      expect(normalizeToolbarItems(
+        [{ name: 'toolbarItem1', location: 'before' }],
+        [{ name: 'toolbarItem1', location: 'after' }],
+        ['toolbarItem1'],
+      )).toStrictEqual([{ name: 'toolbarItem1', location: 'after' }]);
+    });
+  });
+
+  describe('when default items are set in custom items', () => {
+    it('should return both default and custom items', () => {
+      expect(normalizeToolbarItems(
+        [{ name: 'toolbarItem1', location: 'before' }],
+        ['toolbarItem1', { name: 'customToolbarItem1' }],
+        ['toolbarItem1'],
+      )).toStrictEqual([
+        { name: 'toolbarItem1', location: 'before' },
+        { name: 'customToolbarItem1', location: 'after' },
+      ]);
+    });
+  });
+
+  describe('when there are no default items but they are specified in custom items', () => {
+    it('should return processed default items', () => {
+      expect(normalizeToolbarItems(
+        [],
+        ['toolbarItem1'],
+        ['toolbarItem1'],
+      )).toStrictEqual([{ name: 'toolbarItem1', location: 'after', visible: false }]);
     });
   });
 });
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.ts
index a93c632899bb..8affcc918e27 100644
--- a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.ts
+++ b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.ts
@@ -1,7 +1,11 @@
-import type { ToolbarItems, ToolbarVisible } from './types';
+import { extend } from '@js/core/utils/extend';
+import { isDefined, isString } from '@js/core/utils/type';
+import type { Item as BaseToolbarItem } from '@js/ui/toolbar';
+
+import type { ToolbarItems } from './types';
 
 export function isVisible(
-  visibleConfig: ToolbarVisible,
+  visibleConfig: boolean | undefined,
   items: ToolbarItems,
 ): boolean {
   if (visibleConfig === undefined) {
@@ -10,3 +14,52 @@ export function isVisible(
 
   return visibleConfig;
 }
+
+interface ToolbarItem extends BaseToolbarItem {
+  name?: string;
+}
+
+function normalizeToolbarItem(
+  item: ToolbarItem | string,
+  defaultButtonsMap: { [key: string]: ToolbarItem },
+  defaultItemNames: readonly string[],
+): ToolbarItem {
+  let button = item;
+  const defaultProps: ToolbarItem = { location: 'after' };
+
+  if (isString(button)) {
+    button = { name: button };
+  }
+
+  if (isDefined(button.name)) {
+    if (isDefined(defaultButtonsMap[button.name])) {
+      button = extend(true, {}, defaultButtonsMap[button.name], button);
+    } else if (defaultItemNames.includes(button.name)) {
+      button = { ...button, visible: false };
+    }
+  }
+
+  return extend(true, {}, defaultProps, button) as ToolbarItem;
+}
+
+export function normalizeToolbarItems(
+  defaultItems: (ToolbarItem & { name: string })[],
+  userItems: (ToolbarItem | string)[] | undefined,
+  defaultItemNames: readonly string[],
+): ToolbarItem[] {
+  if (!isDefined(userItems)) {
+    return defaultItems;
+  }
+
+  const defaultButtonsMap = {};
+
+  defaultItems.forEach((button) => {
+    defaultButtonsMap[button.name] = button;
+  });
+
+  return userItems.map(
+    (
+      item: ToolbarItem | string,
+    ) => normalizeToolbarItem(item, defaultButtonsMap, defaultItemNames),
+  );
+}
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/view.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/view.test.ts
deleted file mode 100644
index b839c7886a8a..000000000000
--- a/packages/devextreme/js/__internal/grids/new/grid_core/toolbar/view.test.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-/* eslint-disable spellcheck/spell-checker */
-/* eslint-disable @typescript-eslint/dot-notation */
-import { describe, expect, it } from '@jest/globals';
-
-import type { Options } from '../options';
-import { OptionsControllerMock } from '../options_controller/options_controller.mock';
-import { ToolbarController } from './controller';
-import { ToolbarView } from './view';
-
-const createToolbarView = (options?: Options): {
-  rootElement: HTMLElement;
-  optionsController: OptionsControllerMock;
-} => {
-  const rootElement = document.createElement('div');
-  const optionsController = new OptionsControllerMock(options ?? {
-    toolbar: {
-      visible: true,
-    },
-  });
-
-  const toolbarController = new ToolbarController(optionsController);
-  const toolbar = new ToolbarView(toolbarController, optionsController);
-
-  toolbar.render(rootElement);
-
-  return {
-    rootElement,
-    optionsController,
-  };
-};
-
-describe('render', () => {
-  it('empty toolbar', () => {
-    const { rootElement } = createToolbarView();
-
-    expect(rootElement).toMatchSnapshot();
-  });
-
-  it('Toolbar with options', () => {
-    const { rootElement } = createToolbarView({
-      toolbar: {
-        visible: true,
-        items: [{
-          location: 'before',
-          widget: 'dxButton',
-          options: {
-            text: 'button1',
-          },
-        }, {
-          location: 'after',
-          widget: 'dxButton',
-          options: {
-            text: 'button2',
-          },
-        }],
-      },
-    });
-
-    expect(rootElement).toMatchSnapshot();
-  });
-});
-
-describe('Applying options', () => {
-  describe('when visible = \'undefined\' and there are no items', () => {
-    it('Toolbar should be hidden', () => {
-      const { rootElement } = createToolbarView({
-        toolbar: {
-          items: [],
-        },
-      });
-
-      expect(rootElement).toMatchSnapshot();
-    });
-  });
-
-  describe('when visible = \'undefined\' and there are items', () => {
-    it('Toolbar should be visible', () => {
-      const { rootElement } = createToolbarView({
-        toolbar: {
-          items: [{
-            location: 'before',
-            widget: 'dxButton',
-            options: {
-              text: 'button1',
-            },
-          }, {
-            location: 'after',
-            widget: 'dxButton',
-            options: {
-              text: 'button2',
-            },
-          }],
-        },
-      });
-
-      expect(rootElement).toMatchSnapshot();
-    });
-  });
-
-  describe('when visible = \'true\'', () => {
-    it('Toolbar should be visible', () => {
-      const { rootElement } = createToolbarView({
-        toolbar: {
-          visible: true,
-        },
-      });
-
-      expect(rootElement).toMatchSnapshot();
-    });
-  });
-
-  describe('when visible = \'false\'', () => {
-    it('Toolbar should be hidden', () => {
-      const { rootElement } = createToolbarView({
-        toolbar: {
-          visible: false,
-        },
-      });
-
-      expect(rootElement).toMatchSnapshot();
-    });
-  });
-
-  describe('when changing a visible to \'false\' at runtime', () => {
-    it('Toolbar should be hidden', () => {
-      const { rootElement, optionsController } = createToolbarView({
-        toolbar: {
-          visible: true,
-        },
-      });
-
-      optionsController.option('toolbar.visible', false);
-
-      expect(rootElement).toMatchSnapshot();
-    });
-  });
-
-  describe('when changing a visible to \'true\' at runtime', () => {
-    it('Toolbar should be visible', () => {
-      const { rootElement, optionsController } = createToolbarView({
-        toolbar: {
-          visible: false,
-        },
-      });
-
-      optionsController.option('toolbar.visible', true);
-
-      expect(rootElement).toMatchSnapshot();
-    });
-  });
-
-  describe('when disabled = \'true\'', () => {
-    it('Toolbar should be disabled', () => {
-      const { rootElement } = createToolbarView({
-        toolbar: {
-          visible: true,
-          disabled: true,
-        },
-      });
-
-      expect(rootElement).toMatchSnapshot();
-    });
-  });
-
-  describe('when disabled = \'false\'', () => {
-    it('Toolbar should not be disabled', () => {
-      const { rootElement } = createToolbarView({
-        toolbar: {
-          visible: true,
-          disabled: false,
-        },
-      });
-
-      expect(rootElement).toMatchSnapshot();
-    });
-  });
-});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/utils.test.ts b/packages/devextreme/js/__internal/grids/new/grid_core/utils.test.ts
deleted file mode 100644
index 998cbe70eecb..000000000000
--- a/packages/devextreme/js/__internal/grids/new/grid_core/utils.test.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-
-import { normalizeToolbarItems } from './utils';
-
-describe('normalizeToolbarItems', () => {
-  describe('when only default items are specified', () => {
-    it('should return correct items', () => {
-      expect(normalizeToolbarItems(
-        [{ name: 'toolbarItem1' }],
-        undefined,
-        ['toolbarItem1'],
-      )).toStrictEqual([{ name: 'toolbarItem1' }]);
-    });
-  });
-
-  describe('when only custom items are specified', () => {
-    it('should return correct items', () => {
-      expect(normalizeToolbarItems(
-        [],
-        [{ name: 'customToolbarItem1' }],
-        ['toolbarItem1'],
-      )).toStrictEqual([{ name: 'customToolbarItem1', location: 'after' }]);
-    });
-  });
-
-  describe('when default items and custom items are specified', () => {
-    it('should return correct items', () => {
-      expect(normalizeToolbarItems(
-        [{ name: 'toolbarItem1' }],
-        [{ name: 'customToolbarItem1' }],
-        ['toolbarItem1'],
-      )).toStrictEqual([{ name: 'customToolbarItem1', location: 'after' }]);
-    });
-  });
-
-  describe('when custom items override default items', () => {
-    it('should return correct items', () => {
-      expect(normalizeToolbarItems(
-        [{ name: 'toolbarItem1', location: 'before' }],
-        [{ name: 'toolbarItem1', location: 'after' }],
-        ['toolbarItem1'],
-      )).toStrictEqual([{ name: 'toolbarItem1', location: 'after' }]);
-    });
-  });
-
-  describe('when default items are set in custom items', () => {
-    it('should return correct items', () => {
-      expect(normalizeToolbarItems(
-        [{ name: 'toolbarItem1', location: 'before' }],
-        ['toolbarItem1', { name: 'customToolbarItem1' }],
-        ['toolbarItem1'],
-      )).toStrictEqual([
-        { name: 'toolbarItem1', location: 'before' },
-        { name: 'customToolbarItem1', location: 'after' },
-      ]);
-    });
-  });
-
-  describe('when there are no default items but they are specified in custom items', () => {
-    it('should return correct items', () => {
-      expect(normalizeToolbarItems(
-        [],
-        ['toolbarItem1'],
-        ['toolbarItem1'],
-      )).toStrictEqual([{ name: 'toolbarItem1', location: 'after', visible: false }]);
-    });
-  });
-});
diff --git a/packages/devextreme/js/__internal/grids/new/grid_core/utils.ts b/packages/devextreme/js/__internal/grids/new/grid_core/utils.ts
deleted file mode 100644
index 35a846b48315..000000000000
--- a/packages/devextreme/js/__internal/grids/new/grid_core/utils.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { extend } from '@js/core/utils/extend';
-import { isDefined, isString } from '@js/core/utils/type';
-import type { Item as BaseToolbarItem } from '@js/ui/toolbar';
-
-interface ToolbarItem extends BaseToolbarItem {
-  name?: string;
-}
-
-function normalizeToolbarItem(
-  item: ToolbarItem | string,
-  defaultButtonsMap: { [key: string]: ToolbarItem },
-  defaultItemNames: readonly string[],
-): ToolbarItem {
-  let button = item;
-  const defaultProps: ToolbarItem = { location: 'after' };
-
-  if (isString(button)) {
-    button = { name: button };
-  }
-
-  if (isDefined(button.name)) {
-    if (isDefined(defaultButtonsMap[button.name])) {
-      button = extend(true, {}, defaultButtonsMap[button.name], button);
-    } else if (defaultItemNames.includes(button.name)) {
-      button = { ...button, visible: false };
-    }
-  }
-
-  return extend(true, {}, defaultProps, button) as ToolbarItem;
-}
-
-export function normalizeToolbarItems(
-  defaultItems: (ToolbarItem & { name: string })[],
-  userItems: (ToolbarItem | string)[] | undefined,
-  defaultItemNames: readonly string[],
-): ToolbarItem[] {
-  if (!isDefined(userItems)) {
-    return defaultItems;
-  }
-
-  const defaultButtonsMap = {};
-
-  defaultItems.forEach((button) => {
-    defaultButtonsMap[button.name] = button;
-  });
-
-  return userItems.map(
-    (
-      item: ToolbarItem | string,
-    ) => normalizeToolbarItem(item, defaultButtonsMap, defaultItemNames),
-  );
-}