From 612755b2175fe8f8c72a0b93c0b070c360842ed2 Mon Sep 17 00:00:00 2001
From: Mikhail Preyskurantov <mikhail.preyskurantov@devexpress.com>
Date: Wed, 25 Oct 2023 18:11:15 +0300
Subject: [PATCH] Add 'use client' for NextJS compatibility (#25883)

---
 package-lock.json                                         | 8 ++++----
 package.json                                              | 2 +-
 packages/devextreme-react/src/accordion.ts                | 1 +
 packages/devextreme-react/src/action-sheet.ts             | 1 +
 packages/devextreme-react/src/autocomplete.ts             | 1 +
 packages/devextreme-react/src/bar-gauge.ts                | 1 +
 packages/devextreme-react/src/box.ts                      | 1 +
 packages/devextreme-react/src/bullet.ts                   | 1 +
 packages/devextreme-react/src/button-group.ts             | 1 +
 packages/devextreme-react/src/button.ts                   | 1 +
 packages/devextreme-react/src/calendar.ts                 | 1 +
 packages/devextreme-react/src/chart.ts                    | 1 +
 packages/devextreme-react/src/check-box.ts                | 1 +
 packages/devextreme-react/src/circular-gauge.ts           | 1 +
 packages/devextreme-react/src/color-box.ts                | 1 +
 packages/devextreme-react/src/context-menu.ts             | 1 +
 packages/devextreme-react/src/data-grid.ts                | 1 +
 packages/devextreme-react/src/date-box.ts                 | 1 +
 packages/devextreme-react/src/date-range-box.ts           | 1 +
 packages/devextreme-react/src/defer-rendering.ts          | 1 +
 packages/devextreme-react/src/diagram.ts                  | 1 +
 packages/devextreme-react/src/draggable.ts                | 1 +
 packages/devextreme-react/src/drawer.ts                   | 1 +
 packages/devextreme-react/src/drop-down-box.ts            | 1 +
 packages/devextreme-react/src/drop-down-button.ts         | 1 +
 packages/devextreme-react/src/file-manager.ts             | 1 +
 packages/devextreme-react/src/file-uploader.ts            | 1 +
 packages/devextreme-react/src/filter-builder.ts           | 1 +
 packages/devextreme-react/src/form.ts                     | 1 +
 packages/devextreme-react/src/funnel.ts                   | 1 +
 packages/devextreme-react/src/gallery.ts                  | 1 +
 packages/devextreme-react/src/gantt.ts                    | 1 +
 packages/devextreme-react/src/html-editor.ts              | 1 +
 packages/devextreme-react/src/linear-gauge.ts             | 1 +
 packages/devextreme-react/src/list.ts                     | 1 +
 packages/devextreme-react/src/load-indicator.ts           | 1 +
 packages/devextreme-react/src/load-panel.ts               | 1 +
 packages/devextreme-react/src/lookup.ts                   | 1 +
 packages/devextreme-react/src/map.ts                      | 1 +
 packages/devextreme-react/src/menu.ts                     | 1 +
 packages/devextreme-react/src/multi-view.ts               | 1 +
 packages/devextreme-react/src/number-box.ts               | 1 +
 packages/devextreme-react/src/pie-chart.ts                | 1 +
 packages/devextreme-react/src/pivot-grid-field-chooser.ts | 1 +
 packages/devextreme-react/src/pivot-grid.ts               | 1 +
 packages/devextreme-react/src/polar-chart.ts              | 1 +
 packages/devextreme-react/src/popover.ts                  | 1 +
 packages/devextreme-react/src/popup.ts                    | 1 +
 packages/devextreme-react/src/progress-bar.ts             | 1 +
 packages/devextreme-react/src/radio-group.ts              | 1 +
 packages/devextreme-react/src/range-selector.ts           | 1 +
 packages/devextreme-react/src/range-slider.ts             | 1 +
 packages/devextreme-react/src/recurrence-editor.ts        | 1 +
 packages/devextreme-react/src/resizable.ts                | 1 +
 packages/devextreme-react/src/responsive-box.ts           | 1 +
 packages/devextreme-react/src/sankey.ts                   | 1 +
 packages/devextreme-react/src/scheduler.ts                | 1 +
 packages/devextreme-react/src/scroll-view.ts              | 1 +
 packages/devextreme-react/src/select-box.ts               | 1 +
 packages/devextreme-react/src/slider.ts                   | 1 +
 packages/devextreme-react/src/sortable.ts                 | 1 +
 packages/devextreme-react/src/sparkline.ts                | 1 +
 packages/devextreme-react/src/speed-dial-action.ts        | 1 +
 packages/devextreme-react/src/switch.ts                   | 1 +
 packages/devextreme-react/src/tab-panel.ts                | 1 +
 packages/devextreme-react/src/tabs.ts                     | 1 +
 packages/devextreme-react/src/tag-box.ts                  | 1 +
 packages/devextreme-react/src/text-area.ts                | 1 +
 packages/devextreme-react/src/text-box.ts                 | 1 +
 packages/devextreme-react/src/tile-view.ts                | 1 +
 packages/devextreme-react/src/toast.ts                    | 1 +
 packages/devextreme-react/src/toolbar.ts                  | 1 +
 packages/devextreme-react/src/tooltip.ts                  | 1 +
 packages/devextreme-react/src/tree-list.ts                | 1 +
 packages/devextreme-react/src/tree-map.ts                 | 1 +
 packages/devextreme-react/src/tree-view.ts                | 1 +
 packages/devextreme-react/src/validation-group.ts         | 1 +
 packages/devextreme-react/src/validation-summary.ts       | 1 +
 packages/devextreme-react/src/validator.ts                | 1 +
 packages/devextreme-react/src/vector-map.ts               | 1 +
 80 files changed, 83 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 17c054698172..56eb4e7035e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "@types/shelljs": "0.8.13",
         "cheerio": "1.0.0-rc.10",
         "codelyzer": "^6.0.2",
-        "devextreme-internal-tools": "12.0.0-beta.8",
+        "devextreme-internal-tools": "12.0.0-beta.9",
         "eslint": "8.47.0",
         "eslint-config-airbnb-base": "15.0.0",
         "eslint-config-airbnb-typescript": "17.0.0",
@@ -13548,9 +13548,9 @@
       "link": true
     },
     "node_modules/devextreme-internal-tools": {
-      "version": "12.0.0-beta.8",
-      "resolved": "https://registry.npmjs.org/devextreme-internal-tools/-/devextreme-internal-tools-12.0.0-beta.8.tgz",
-      "integrity": "sha512-NsOI5hAPlrptAVn3mnC4sFGWEOw9SWNuDT0dHMipjTk+idSJ6z4q73g8rDDtAAwMbQJbti0/4lBbRmgBAHIcaw==",
+      "version": "12.0.0-beta.9",
+      "resolved": "https://registry.npmjs.org/devextreme-internal-tools/-/devextreme-internal-tools-12.0.0-beta.9.tgz",
+      "integrity": "sha512-TB2v8cA/5+qm2/b8z7smsvJU/yVoYpzOD5WDnObO/3KKY89lMU+P53gcxQAPB/5bgaM5LtpZu4g14hEDoC1uAQ==",
       "dev": true,
       "dependencies": {
         "dasherize": "2.0.0",
diff --git a/package.json b/package.json
index f834bfb49dfa..1db97296a476 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "@types/shelljs": "0.8.13",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "^6.0.2",
-    "devextreme-internal-tools": "12.0.0-beta.8",
+    "devextreme-internal-tools": "12.0.0-beta.9",
     "eslint": "8.47.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.0.0",
diff --git a/packages/devextreme-react/src/accordion.ts b/packages/devextreme-react/src/accordion.ts
index 849ef8bf07b9..a76d81082a15 100644
--- a/packages/devextreme-react/src/accordion.ts
+++ b/packages/devextreme-react/src/accordion.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/accordion";
 import dxAccordion, {
     Properties
diff --git a/packages/devextreme-react/src/action-sheet.ts b/packages/devextreme-react/src/action-sheet.ts
index f9b646e032e6..d39d7a58a1cf 100644
--- a/packages/devextreme-react/src/action-sheet.ts
+++ b/packages/devextreme-react/src/action-sheet.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/action_sheet";
 import dxActionSheet, {
     Properties
diff --git a/packages/devextreme-react/src/autocomplete.ts b/packages/devextreme-react/src/autocomplete.ts
index c1c20b91055f..2fbf6ef3343b 100644
--- a/packages/devextreme-react/src/autocomplete.ts
+++ b/packages/devextreme-react/src/autocomplete.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxAutocomplete, {
     Properties
 } from "devextreme/ui/autocomplete";
diff --git a/packages/devextreme-react/src/bar-gauge.ts b/packages/devextreme-react/src/bar-gauge.ts
index 37184a15d870..81cb9a85d69d 100644
--- a/packages/devextreme-react/src/bar-gauge.ts
+++ b/packages/devextreme-react/src/bar-gauge.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxBarGauge, {
     Properties
 } from "devextreme/viz/bar_gauge";
diff --git a/packages/devextreme-react/src/box.ts b/packages/devextreme-react/src/box.ts
index fac3612cbadd..fdc253fef7a9 100644
--- a/packages/devextreme-react/src/box.ts
+++ b/packages/devextreme-react/src/box.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/box";
 import dxBox, {
     Properties
diff --git a/packages/devextreme-react/src/bullet.ts b/packages/devextreme-react/src/bullet.ts
index 13c59e886f20..3bd47b610031 100644
--- a/packages/devextreme-react/src/bullet.ts
+++ b/packages/devextreme-react/src/bullet.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxBullet, {
     Properties
 } from "devextreme/viz/bullet";
diff --git a/packages/devextreme-react/src/button-group.ts b/packages/devextreme-react/src/button-group.ts
index 91f6e04bfb44..739f1c8ddd1f 100644
--- a/packages/devextreme-react/src/button-group.ts
+++ b/packages/devextreme-react/src/button-group.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxButtonGroup, {
     Properties
 } from "devextreme/ui/button_group";
diff --git a/packages/devextreme-react/src/button.ts b/packages/devextreme-react/src/button.ts
index 8e9194a847d0..830e0f9e486b 100644
--- a/packages/devextreme-react/src/button.ts
+++ b/packages/devextreme-react/src/button.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxButton, {
     Properties
 } from "devextreme/ui/button";
diff --git a/packages/devextreme-react/src/calendar.ts b/packages/devextreme-react/src/calendar.ts
index 3a1d25bc483e..fa0fcd09a0d3 100644
--- a/packages/devextreme-react/src/calendar.ts
+++ b/packages/devextreme-react/src/calendar.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxCalendar, {
     Properties
 } from "devextreme/ui/calendar";
diff --git a/packages/devextreme-react/src/chart.ts b/packages/devextreme-react/src/chart.ts
index 01fdc214ce6f..b70943881650 100644
--- a/packages/devextreme-react/src/chart.ts
+++ b/packages/devextreme-react/src/chart.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxChart, {
     Properties
 } from "devextreme/viz/chart";
diff --git a/packages/devextreme-react/src/check-box.ts b/packages/devextreme-react/src/check-box.ts
index ee9f2ade3797..13e3cfb657e7 100644
--- a/packages/devextreme-react/src/check-box.ts
+++ b/packages/devextreme-react/src/check-box.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxCheckBox, {
     Properties
 } from "devextreme/ui/check_box";
diff --git a/packages/devextreme-react/src/circular-gauge.ts b/packages/devextreme-react/src/circular-gauge.ts
index 88f3591722e9..fce115b7e9d5 100644
--- a/packages/devextreme-react/src/circular-gauge.ts
+++ b/packages/devextreme-react/src/circular-gauge.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxCircularGauge, {
     Properties
 } from "devextreme/viz/circular_gauge";
diff --git a/packages/devextreme-react/src/color-box.ts b/packages/devextreme-react/src/color-box.ts
index d8977a0722fa..42fa5edc492d 100644
--- a/packages/devextreme-react/src/color-box.ts
+++ b/packages/devextreme-react/src/color-box.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxColorBox, {
     Properties
 } from "devextreme/ui/color_box";
diff --git a/packages/devextreme-react/src/context-menu.ts b/packages/devextreme-react/src/context-menu.ts
index 7c20c5b27e11..ae6ca21ec9f3 100644
--- a/packages/devextreme-react/src/context-menu.ts
+++ b/packages/devextreme-react/src/context-menu.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/context_menu";
 import dxContextMenu, {
     Properties
diff --git a/packages/devextreme-react/src/data-grid.ts b/packages/devextreme-react/src/data-grid.ts
index 74fe3aa9455d..b325c33e6704 100644
--- a/packages/devextreme-react/src/data-grid.ts
+++ b/packages/devextreme-react/src/data-grid.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/data_grid";
 import dxDataGrid, {
     Properties
diff --git a/packages/devextreme-react/src/date-box.ts b/packages/devextreme-react/src/date-box.ts
index 2c202e9fc017..3a8609fe01b9 100644
--- a/packages/devextreme-react/src/date-box.ts
+++ b/packages/devextreme-react/src/date-box.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxDateBox, {
     Properties
 } from "devextreme/ui/date_box";
diff --git a/packages/devextreme-react/src/date-range-box.ts b/packages/devextreme-react/src/date-range-box.ts
index 48fa401846ee..9c946ec5ba6e 100644
--- a/packages/devextreme-react/src/date-range-box.ts
+++ b/packages/devextreme-react/src/date-range-box.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxDateRangeBox, {
     Properties
 } from "devextreme/ui/date_range_box";
diff --git a/packages/devextreme-react/src/defer-rendering.ts b/packages/devextreme-react/src/defer-rendering.ts
index 50748fcb6e77..6ec861323ea5 100644
--- a/packages/devextreme-react/src/defer-rendering.ts
+++ b/packages/devextreme-react/src/defer-rendering.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxDeferRendering, {
     Properties
 } from "devextreme/ui/defer_rendering";
diff --git a/packages/devextreme-react/src/diagram.ts b/packages/devextreme-react/src/diagram.ts
index 0bb5f332661a..66e826fb1140 100644
--- a/packages/devextreme-react/src/diagram.ts
+++ b/packages/devextreme-react/src/diagram.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxDiagram, {
     Properties
 } from "devextreme/ui/diagram";
diff --git a/packages/devextreme-react/src/draggable.ts b/packages/devextreme-react/src/draggable.ts
index 90fa024fe0aa..a9fb2be31764 100644
--- a/packages/devextreme-react/src/draggable.ts
+++ b/packages/devextreme-react/src/draggable.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxDraggable, {
     Properties
 } from "devextreme/ui/draggable";
diff --git a/packages/devextreme-react/src/drawer.ts b/packages/devextreme-react/src/drawer.ts
index 34e9bb1e1343..8438f8239730 100644
--- a/packages/devextreme-react/src/drawer.ts
+++ b/packages/devextreme-react/src/drawer.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxDrawer, {
     Properties
 } from "devextreme/ui/drawer";
diff --git a/packages/devextreme-react/src/drop-down-box.ts b/packages/devextreme-react/src/drop-down-box.ts
index 2d64248d083c..66af6d9376c6 100644
--- a/packages/devextreme-react/src/drop-down-box.ts
+++ b/packages/devextreme-react/src/drop-down-box.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxDropDownBox, {
     Properties
 } from "devextreme/ui/drop_down_box";
diff --git a/packages/devextreme-react/src/drop-down-button.ts b/packages/devextreme-react/src/drop-down-button.ts
index d14a9f155d23..1cf183d6fb15 100644
--- a/packages/devextreme-react/src/drop-down-button.ts
+++ b/packages/devextreme-react/src/drop-down-button.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxDropDownButton, {
     Properties
 } from "devextreme/ui/drop_down_button";
diff --git a/packages/devextreme-react/src/file-manager.ts b/packages/devextreme-react/src/file-manager.ts
index e959b0373d20..fd384ad5ce55 100644
--- a/packages/devextreme-react/src/file-manager.ts
+++ b/packages/devextreme-react/src/file-manager.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxFileManager, {
     Properties
 } from "devextreme/ui/file_manager";
diff --git a/packages/devextreme-react/src/file-uploader.ts b/packages/devextreme-react/src/file-uploader.ts
index 55393343d035..b41ae65bdeb4 100644
--- a/packages/devextreme-react/src/file-uploader.ts
+++ b/packages/devextreme-react/src/file-uploader.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxFileUploader, {
     Properties
 } from "devextreme/ui/file_uploader";
diff --git a/packages/devextreme-react/src/filter-builder.ts b/packages/devextreme-react/src/filter-builder.ts
index 02e946e8c875..5e50f9bdb62d 100644
--- a/packages/devextreme-react/src/filter-builder.ts
+++ b/packages/devextreme-react/src/filter-builder.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxFilterBuilder, {
     Properties
 } from "devextreme/ui/filter_builder";
diff --git a/packages/devextreme-react/src/form.ts b/packages/devextreme-react/src/form.ts
index f05bc1241255..80dadd19efca 100644
--- a/packages/devextreme-react/src/form.ts
+++ b/packages/devextreme-react/src/form.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxForm, {
     Properties
 } from "devextreme/ui/form";
diff --git a/packages/devextreme-react/src/funnel.ts b/packages/devextreme-react/src/funnel.ts
index f863367b04a7..26d942fae32d 100644
--- a/packages/devextreme-react/src/funnel.ts
+++ b/packages/devextreme-react/src/funnel.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxFunnel, {
     Properties
 } from "devextreme/viz/funnel";
diff --git a/packages/devextreme-react/src/gallery.ts b/packages/devextreme-react/src/gallery.ts
index 3f4c9d78fcb6..3528d527e865 100644
--- a/packages/devextreme-react/src/gallery.ts
+++ b/packages/devextreme-react/src/gallery.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/gallery";
 import dxGallery, {
     Properties
diff --git a/packages/devextreme-react/src/gantt.ts b/packages/devextreme-react/src/gantt.ts
index 67fb3077b3bd..797e9cdf6a51 100644
--- a/packages/devextreme-react/src/gantt.ts
+++ b/packages/devextreme-react/src/gantt.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxGantt, {
     Properties
 } from "devextreme/ui/gantt";
diff --git a/packages/devextreme-react/src/html-editor.ts b/packages/devextreme-react/src/html-editor.ts
index af475b869257..0929d33f3964 100644
--- a/packages/devextreme-react/src/html-editor.ts
+++ b/packages/devextreme-react/src/html-editor.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxHtmlEditor, {
     Properties
 } from "devextreme/ui/html_editor";
diff --git a/packages/devextreme-react/src/linear-gauge.ts b/packages/devextreme-react/src/linear-gauge.ts
index bd8d71c88eff..5294aaa4f621 100644
--- a/packages/devextreme-react/src/linear-gauge.ts
+++ b/packages/devextreme-react/src/linear-gauge.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxLinearGauge, {
     Properties
 } from "devextreme/viz/linear_gauge";
diff --git a/packages/devextreme-react/src/list.ts b/packages/devextreme-react/src/list.ts
index 93e6efa99a49..c7e89138ccf7 100644
--- a/packages/devextreme-react/src/list.ts
+++ b/packages/devextreme-react/src/list.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/list";
 import dxList, {
     Properties
diff --git a/packages/devextreme-react/src/load-indicator.ts b/packages/devextreme-react/src/load-indicator.ts
index 8fd6d8fadd99..1b7295fc247f 100644
--- a/packages/devextreme-react/src/load-indicator.ts
+++ b/packages/devextreme-react/src/load-indicator.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxLoadIndicator, {
     Properties
 } from "devextreme/ui/load_indicator";
diff --git a/packages/devextreme-react/src/load-panel.ts b/packages/devextreme-react/src/load-panel.ts
index 4720056f0962..82b20597da06 100644
--- a/packages/devextreme-react/src/load-panel.ts
+++ b/packages/devextreme-react/src/load-panel.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxLoadPanel, {
     Properties
 } from "devextreme/ui/load_panel";
diff --git a/packages/devextreme-react/src/lookup.ts b/packages/devextreme-react/src/lookup.ts
index 776f85776a82..02a2a6462932 100644
--- a/packages/devextreme-react/src/lookup.ts
+++ b/packages/devextreme-react/src/lookup.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxLookup, {
     Properties
 } from "devextreme/ui/lookup";
diff --git a/packages/devextreme-react/src/map.ts b/packages/devextreme-react/src/map.ts
index 3eef430a8437..dc11b3e64965 100644
--- a/packages/devextreme-react/src/map.ts
+++ b/packages/devextreme-react/src/map.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxMap, {
     Properties
 } from "devextreme/ui/map";
diff --git a/packages/devextreme-react/src/menu.ts b/packages/devextreme-react/src/menu.ts
index fc0ddd6777e6..6b9bd4ea9833 100644
--- a/packages/devextreme-react/src/menu.ts
+++ b/packages/devextreme-react/src/menu.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/menu";
 import dxMenu, {
     Properties
diff --git a/packages/devextreme-react/src/multi-view.ts b/packages/devextreme-react/src/multi-view.ts
index 909052f4494e..db701bf95733 100644
--- a/packages/devextreme-react/src/multi-view.ts
+++ b/packages/devextreme-react/src/multi-view.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/multi_view";
 import dxMultiView, {
     Properties
diff --git a/packages/devextreme-react/src/number-box.ts b/packages/devextreme-react/src/number-box.ts
index 9a7c5346fd8f..64dd90d12fcd 100644
--- a/packages/devextreme-react/src/number-box.ts
+++ b/packages/devextreme-react/src/number-box.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxNumberBox, {
     Properties
 } from "devextreme/ui/number_box";
diff --git a/packages/devextreme-react/src/pie-chart.ts b/packages/devextreme-react/src/pie-chart.ts
index db3671623cfc..b7bf2799ffe6 100644
--- a/packages/devextreme-react/src/pie-chart.ts
+++ b/packages/devextreme-react/src/pie-chart.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxPieChart, {
     Properties
 } from "devextreme/viz/pie_chart";
diff --git a/packages/devextreme-react/src/pivot-grid-field-chooser.ts b/packages/devextreme-react/src/pivot-grid-field-chooser.ts
index 443095d75ec6..97eb95e03438 100644
--- a/packages/devextreme-react/src/pivot-grid-field-chooser.ts
+++ b/packages/devextreme-react/src/pivot-grid-field-chooser.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxPivotGridFieldChooser, {
     Properties
 } from "devextreme/ui/pivot_grid_field_chooser";
diff --git a/packages/devextreme-react/src/pivot-grid.ts b/packages/devextreme-react/src/pivot-grid.ts
index 143715725ed0..1d5005b8746f 100644
--- a/packages/devextreme-react/src/pivot-grid.ts
+++ b/packages/devextreme-react/src/pivot-grid.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxPivotGrid, {
     Properties
 } from "devextreme/ui/pivot_grid";
diff --git a/packages/devextreme-react/src/polar-chart.ts b/packages/devextreme-react/src/polar-chart.ts
index 3f274c68e927..2673c1173d87 100644
--- a/packages/devextreme-react/src/polar-chart.ts
+++ b/packages/devextreme-react/src/polar-chart.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxPolarChart, {
     Properties
 } from "devextreme/viz/polar_chart";
diff --git a/packages/devextreme-react/src/popover.ts b/packages/devextreme-react/src/popover.ts
index e258f7f06166..a71a52e2eaa5 100644
--- a/packages/devextreme-react/src/popover.ts
+++ b/packages/devextreme-react/src/popover.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxPopover, {
     Properties
 } from "devextreme/ui/popover";
diff --git a/packages/devextreme-react/src/popup.ts b/packages/devextreme-react/src/popup.ts
index d70b081d80fb..04cf1a3a407e 100644
--- a/packages/devextreme-react/src/popup.ts
+++ b/packages/devextreme-react/src/popup.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxPopup, {
     Properties
 } from "devextreme/ui/popup";
diff --git a/packages/devextreme-react/src/progress-bar.ts b/packages/devextreme-react/src/progress-bar.ts
index 6579ce41e690..90f85d983088 100644
--- a/packages/devextreme-react/src/progress-bar.ts
+++ b/packages/devextreme-react/src/progress-bar.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxProgressBar, {
     Properties
 } from "devextreme/ui/progress_bar";
diff --git a/packages/devextreme-react/src/radio-group.ts b/packages/devextreme-react/src/radio-group.ts
index d7af4b376b30..73c9542993f7 100644
--- a/packages/devextreme-react/src/radio-group.ts
+++ b/packages/devextreme-react/src/radio-group.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxRadioGroup, {
     Properties
 } from "devextreme/ui/radio_group";
diff --git a/packages/devextreme-react/src/range-selector.ts b/packages/devextreme-react/src/range-selector.ts
index ceaf7521fa57..cb67e893bfd3 100644
--- a/packages/devextreme-react/src/range-selector.ts
+++ b/packages/devextreme-react/src/range-selector.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxRangeSelector, {
     Properties
 } from "devextreme/viz/range_selector";
diff --git a/packages/devextreme-react/src/range-slider.ts b/packages/devextreme-react/src/range-slider.ts
index a0af06691f88..613a154cf529 100644
--- a/packages/devextreme-react/src/range-slider.ts
+++ b/packages/devextreme-react/src/range-slider.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxRangeSlider, {
     Properties
 } from "devextreme/ui/range_slider";
diff --git a/packages/devextreme-react/src/recurrence-editor.ts b/packages/devextreme-react/src/recurrence-editor.ts
index 82fe21629d28..876b60b4d815 100644
--- a/packages/devextreme-react/src/recurrence-editor.ts
+++ b/packages/devextreme-react/src/recurrence-editor.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxRecurrenceEditor, {
     Properties
 } from "devextreme/ui/recurrence_editor";
diff --git a/packages/devextreme-react/src/resizable.ts b/packages/devextreme-react/src/resizable.ts
index 35e6476fe585..8fec29f98557 100644
--- a/packages/devextreme-react/src/resizable.ts
+++ b/packages/devextreme-react/src/resizable.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxResizable, {
     Properties
 } from "devextreme/ui/resizable";
diff --git a/packages/devextreme-react/src/responsive-box.ts b/packages/devextreme-react/src/responsive-box.ts
index 70f84ef18fe3..185860d7ea86 100644
--- a/packages/devextreme-react/src/responsive-box.ts
+++ b/packages/devextreme-react/src/responsive-box.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/responsive_box";
 import dxResponsiveBox, {
     Properties
diff --git a/packages/devextreme-react/src/sankey.ts b/packages/devextreme-react/src/sankey.ts
index fea1e7827bcc..11028550e623 100644
--- a/packages/devextreme-react/src/sankey.ts
+++ b/packages/devextreme-react/src/sankey.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxSankey, {
     Properties
 } from "devextreme/viz/sankey";
diff --git a/packages/devextreme-react/src/scheduler.ts b/packages/devextreme-react/src/scheduler.ts
index 80a2aa7f3d01..7f8b2a39f4b6 100644
--- a/packages/devextreme-react/src/scheduler.ts
+++ b/packages/devextreme-react/src/scheduler.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxScheduler, {
     Properties
 } from "devextreme/ui/scheduler";
diff --git a/packages/devextreme-react/src/scroll-view.ts b/packages/devextreme-react/src/scroll-view.ts
index 7bbcb7ef249a..4f9b5fb8d9b2 100644
--- a/packages/devextreme-react/src/scroll-view.ts
+++ b/packages/devextreme-react/src/scroll-view.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxScrollView, {
     Properties
 } from "devextreme/ui/scroll_view";
diff --git a/packages/devextreme-react/src/select-box.ts b/packages/devextreme-react/src/select-box.ts
index 7d3f32339fe4..939e5f5446bc 100644
--- a/packages/devextreme-react/src/select-box.ts
+++ b/packages/devextreme-react/src/select-box.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxSelectBox, {
     Properties
 } from "devextreme/ui/select_box";
diff --git a/packages/devextreme-react/src/slider.ts b/packages/devextreme-react/src/slider.ts
index 3ce512877228..6ea34ae141b8 100644
--- a/packages/devextreme-react/src/slider.ts
+++ b/packages/devextreme-react/src/slider.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxSlider, {
     Properties
 } from "devextreme/ui/slider";
diff --git a/packages/devextreme-react/src/sortable.ts b/packages/devextreme-react/src/sortable.ts
index 16a2dd29df97..f638b0daf45a 100644
--- a/packages/devextreme-react/src/sortable.ts
+++ b/packages/devextreme-react/src/sortable.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxSortable, {
     Properties
 } from "devextreme/ui/sortable";
diff --git a/packages/devextreme-react/src/sparkline.ts b/packages/devextreme-react/src/sparkline.ts
index 9247acf1c009..d5343c084781 100644
--- a/packages/devextreme-react/src/sparkline.ts
+++ b/packages/devextreme-react/src/sparkline.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxSparkline, {
     Properties
 } from "devextreme/viz/sparkline";
diff --git a/packages/devextreme-react/src/speed-dial-action.ts b/packages/devextreme-react/src/speed-dial-action.ts
index 9c3c86b18f31..232010a6442c 100644
--- a/packages/devextreme-react/src/speed-dial-action.ts
+++ b/packages/devextreme-react/src/speed-dial-action.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxSpeedDialAction, {
     Properties
 } from "devextreme/ui/speed_dial_action";
diff --git a/packages/devextreme-react/src/switch.ts b/packages/devextreme-react/src/switch.ts
index 25df385fd8b7..392978c11daf 100644
--- a/packages/devextreme-react/src/switch.ts
+++ b/packages/devextreme-react/src/switch.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxSwitch, {
     Properties
 } from "devextreme/ui/switch";
diff --git a/packages/devextreme-react/src/tab-panel.ts b/packages/devextreme-react/src/tab-panel.ts
index 284496a1b325..ae184cef557b 100644
--- a/packages/devextreme-react/src/tab-panel.ts
+++ b/packages/devextreme-react/src/tab-panel.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/tab_panel";
 import dxTabPanel, {
     Properties
diff --git a/packages/devextreme-react/src/tabs.ts b/packages/devextreme-react/src/tabs.ts
index 776f20395106..7b67093e25fb 100644
--- a/packages/devextreme-react/src/tabs.ts
+++ b/packages/devextreme-react/src/tabs.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/tabs";
 import dxTabs, {
     Properties
diff --git a/packages/devextreme-react/src/tag-box.ts b/packages/devextreme-react/src/tag-box.ts
index ec0e082677e5..48bfd2c46bda 100644
--- a/packages/devextreme-react/src/tag-box.ts
+++ b/packages/devextreme-react/src/tag-box.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxTagBox, {
     Properties
 } from "devextreme/ui/tag_box";
diff --git a/packages/devextreme-react/src/text-area.ts b/packages/devextreme-react/src/text-area.ts
index e24c661063fe..1d0bd30e1e3e 100644
--- a/packages/devextreme-react/src/text-area.ts
+++ b/packages/devextreme-react/src/text-area.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxTextArea, {
     Properties
 } from "devextreme/ui/text_area";
diff --git a/packages/devextreme-react/src/text-box.ts b/packages/devextreme-react/src/text-box.ts
index 2476524b51f6..920d06afe646 100644
--- a/packages/devextreme-react/src/text-box.ts
+++ b/packages/devextreme-react/src/text-box.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxTextBox, {
     Properties
 } from "devextreme/ui/text_box";
diff --git a/packages/devextreme-react/src/tile-view.ts b/packages/devextreme-react/src/tile-view.ts
index cab0b52f0f1b..4d7b583c3c36 100644
--- a/packages/devextreme-react/src/tile-view.ts
+++ b/packages/devextreme-react/src/tile-view.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/tile_view";
 import dxTileView, {
     Properties
diff --git a/packages/devextreme-react/src/toast.ts b/packages/devextreme-react/src/toast.ts
index beaf9aa93a77..cbe9fddf1fa3 100644
--- a/packages/devextreme-react/src/toast.ts
+++ b/packages/devextreme-react/src/toast.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxToast, {
     Properties
 } from "devextreme/ui/toast";
diff --git a/packages/devextreme-react/src/toolbar.ts b/packages/devextreme-react/src/toolbar.ts
index f97433621a7f..cee2179f69fa 100644
--- a/packages/devextreme-react/src/toolbar.ts
+++ b/packages/devextreme-react/src/toolbar.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/toolbar";
 import dxToolbar, {
     Properties
diff --git a/packages/devextreme-react/src/tooltip.ts b/packages/devextreme-react/src/tooltip.ts
index a0c71cc7b16f..2ffe19d2259d 100644
--- a/packages/devextreme-react/src/tooltip.ts
+++ b/packages/devextreme-react/src/tooltip.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxTooltip, {
     Properties
 } from "devextreme/ui/tooltip";
diff --git a/packages/devextreme-react/src/tree-list.ts b/packages/devextreme-react/src/tree-list.ts
index acdb55b4cf69..c49e86c61a25 100644
--- a/packages/devextreme-react/src/tree-list.ts
+++ b/packages/devextreme-react/src/tree-list.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/tree_list";
 import dxTreeList, {
     Properties
diff --git a/packages/devextreme-react/src/tree-map.ts b/packages/devextreme-react/src/tree-map.ts
index dac5885bbdc5..3de0a599b262 100644
--- a/packages/devextreme-react/src/tree-map.ts
+++ b/packages/devextreme-react/src/tree-map.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxTreeMap, {
     Properties
 } from "devextreme/viz/tree_map";
diff --git a/packages/devextreme-react/src/tree-view.ts b/packages/devextreme-react/src/tree-view.ts
index 65d3e59c7ab4..87f71c4ebdbd 100644
--- a/packages/devextreme-react/src/tree-view.ts
+++ b/packages/devextreme-react/src/tree-view.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/tree_view";
 import dxTreeView, {
     Properties
diff --git a/packages/devextreme-react/src/validation-group.ts b/packages/devextreme-react/src/validation-group.ts
index c0f4d68c4c3a..e6a0af30facc 100644
--- a/packages/devextreme-react/src/validation-group.ts
+++ b/packages/devextreme-react/src/validation-group.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxValidationGroup, {
     Properties
 } from "devextreme/ui/validation_group";
diff --git a/packages/devextreme-react/src/validation-summary.ts b/packages/devextreme-react/src/validation-summary.ts
index e32f62258051..4147ec3050c1 100644
--- a/packages/devextreme-react/src/validation-summary.ts
+++ b/packages/devextreme-react/src/validation-summary.ts
@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/validation_summary";
 import dxValidationSummary, {
     Properties
diff --git a/packages/devextreme-react/src/validator.ts b/packages/devextreme-react/src/validator.ts
index 1a09442e0d7a..576a014e2ea7 100644
--- a/packages/devextreme-react/src/validator.ts
+++ b/packages/devextreme-react/src/validator.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxValidator, {
     Properties
 } from "devextreme/ui/validator";
diff --git a/packages/devextreme-react/src/vector-map.ts b/packages/devextreme-react/src/vector-map.ts
index dfd401447394..12b4088a692b 100644
--- a/packages/devextreme-react/src/vector-map.ts
+++ b/packages/devextreme-react/src/vector-map.ts
@@ -1,3 +1,4 @@
+"use client"
 import dxVectorMap, {
     Properties
 } from "devextreme/viz/vector_map";