Add 'use client' for NextJS compatibility (#25883)

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",

packages/devextreme-react/src/accordion.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/accordion";
 import dxAccordion, {
     Properties

packages/devextreme-react/src/action-sheet.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/action_sheet";
 import dxActionSheet, {
     Properties

packages/devextreme-react/src/autocomplete.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxAutocomplete, {
     Properties
 } from "devextreme/ui/autocomplete";

packages/devextreme-react/src/bar-gauge.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxBarGauge, {
     Properties
 } from "devextreme/viz/bar_gauge";

packages/devextreme-react/src/box.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/box";
 import dxBox, {
     Properties

packages/devextreme-react/src/bullet.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxBullet, {
     Properties
 } from "devextreme/viz/bullet";

packages/devextreme-react/src/button-group.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxButtonGroup, {
     Properties
 } from "devextreme/ui/button_group";

packages/devextreme-react/src/button.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxButton, {
     Properties
 } from "devextreme/ui/button";

packages/devextreme-react/src/calendar.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxCalendar, {
     Properties
 } from "devextreme/ui/calendar";

packages/devextreme-react/src/chart.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxChart, {
     Properties
 } from "devextreme/viz/chart";

packages/devextreme-react/src/check-box.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxCheckBox, {
     Properties
 } from "devextreme/ui/check_box";

packages/devextreme-react/src/circular-gauge.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxCircularGauge, {
     Properties
 } from "devextreme/viz/circular_gauge";

packages/devextreme-react/src/color-box.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxColorBox, {
     Properties
 } from "devextreme/ui/color_box";

packages/devextreme-react/src/context-menu.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/context_menu";
 import dxContextMenu, {
     Properties

packages/devextreme-react/src/data-grid.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/data_grid";
 import dxDataGrid, {
     Properties

packages/devextreme-react/src/date-box.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxDateBox, {
     Properties
 } from "devextreme/ui/date_box";

packages/devextreme-react/src/date-range-box.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxDateRangeBox, {
     Properties
 } from "devextreme/ui/date_range_box";

packages/devextreme-react/src/defer-rendering.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxDeferRendering, {
     Properties
 } from "devextreme/ui/defer_rendering";

packages/devextreme-react/src/diagram.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxDiagram, {
     Properties
 } from "devextreme/ui/diagram";

packages/devextreme-react/src/draggable.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxDraggable, {
     Properties
 } from "devextreme/ui/draggable";

packages/devextreme-react/src/drawer.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxDrawer, {
     Properties
 } from "devextreme/ui/drawer";

packages/devextreme-react/src/drop-down-box.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxDropDownBox, {
     Properties
 } from "devextreme/ui/drop_down_box";

packages/devextreme-react/src/drop-down-button.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxDropDownButton, {
     Properties
 } from "devextreme/ui/drop_down_button";

packages/devextreme-react/src/file-manager.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxFileManager, {
     Properties
 } from "devextreme/ui/file_manager";

packages/devextreme-react/src/file-uploader.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxFileUploader, {
     Properties
 } from "devextreme/ui/file_uploader";

packages/devextreme-react/src/filter-builder.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxFilterBuilder, {
     Properties
 } from "devextreme/ui/filter_builder";

packages/devextreme-react/src/form.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxForm, {
     Properties
 } from "devextreme/ui/form";

packages/devextreme-react/src/funnel.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxFunnel, {
     Properties
 } from "devextreme/viz/funnel";

packages/devextreme-react/src/gallery.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/gallery";
 import dxGallery, {
     Properties

packages/devextreme-react/src/gantt.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxGantt, {
     Properties
 } from "devextreme/ui/gantt";

packages/devextreme-react/src/html-editor.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxHtmlEditor, {
     Properties
 } from "devextreme/ui/html_editor";

packages/devextreme-react/src/linear-gauge.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxLinearGauge, {
     Properties
 } from "devextreme/viz/linear_gauge";

packages/devextreme-react/src/list.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/list";
 import dxList, {
     Properties

packages/devextreme-react/src/load-indicator.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxLoadIndicator, {
     Properties
 } from "devextreme/ui/load_indicator";

packages/devextreme-react/src/load-panel.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxLoadPanel, {
     Properties
 } from "devextreme/ui/load_panel";

packages/devextreme-react/src/lookup.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxLookup, {
     Properties
 } from "devextreme/ui/lookup";

packages/devextreme-react/src/map.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxMap, {
     Properties
 } from "devextreme/ui/map";

packages/devextreme-react/src/menu.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/menu";
 import dxMenu, {
     Properties

packages/devextreme-react/src/multi-view.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/multi_view";
 import dxMultiView, {
     Properties

packages/devextreme-react/src/number-box.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxNumberBox, {
     Properties
 } from "devextreme/ui/number_box";

packages/devextreme-react/src/pie-chart.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxPieChart, {
     Properties
 } from "devextreme/viz/pie_chart";

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";

packages/devextreme-react/src/pivot-grid.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxPivotGrid, {
     Properties
 } from "devextreme/ui/pivot_grid";

packages/devextreme-react/src/polar-chart.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxPolarChart, {
     Properties
 } from "devextreme/viz/polar_chart";

packages/devextreme-react/src/popover.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxPopover, {
     Properties
 } from "devextreme/ui/popover";

packages/devextreme-react/src/popup.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxPopup, {
     Properties
 } from "devextreme/ui/popup";

packages/devextreme-react/src/progress-bar.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxProgressBar, {
     Properties
 } from "devextreme/ui/progress_bar";

packages/devextreme-react/src/radio-group.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxRadioGroup, {
     Properties
 } from "devextreme/ui/radio_group";

packages/devextreme-react/src/range-selector.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxRangeSelector, {
     Properties
 } from "devextreme/viz/range_selector";

packages/devextreme-react/src/range-slider.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxRangeSlider, {
     Properties
 } from "devextreme/ui/range_slider";

packages/devextreme-react/src/recurrence-editor.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxRecurrenceEditor, {
     Properties
 } from "devextreme/ui/recurrence_editor";

packages/devextreme-react/src/resizable.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxResizable, {
     Properties
 } from "devextreme/ui/resizable";

packages/devextreme-react/src/responsive-box.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/responsive_box";
 import dxResponsiveBox, {
     Properties

packages/devextreme-react/src/sankey.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxSankey, {
     Properties
 } from "devextreme/viz/sankey";

packages/devextreme-react/src/scheduler.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxScheduler, {
     Properties
 } from "devextreme/ui/scheduler";

packages/devextreme-react/src/scroll-view.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxScrollView, {
     Properties
 } from "devextreme/ui/scroll_view";

packages/devextreme-react/src/select-box.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxSelectBox, {
     Properties
 } from "devextreme/ui/select_box";

packages/devextreme-react/src/slider.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxSlider, {
     Properties
 } from "devextreme/ui/slider";

packages/devextreme-react/src/sortable.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxSortable, {
     Properties
 } from "devextreme/ui/sortable";

packages/devextreme-react/src/sparkline.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxSparkline, {
     Properties
 } from "devextreme/viz/sparkline";

packages/devextreme-react/src/speed-dial-action.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxSpeedDialAction, {
     Properties
 } from "devextreme/ui/speed_dial_action";

packages/devextreme-react/src/switch.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxSwitch, {
     Properties
 } from "devextreme/ui/switch";

packages/devextreme-react/src/tab-panel.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/tab_panel";
 import dxTabPanel, {
     Properties

packages/devextreme-react/src/tabs.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/tabs";
 import dxTabs, {
     Properties

packages/devextreme-react/src/tag-box.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxTagBox, {
     Properties
 } from "devextreme/ui/tag_box";

packages/devextreme-react/src/text-area.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxTextArea, {
     Properties
 } from "devextreme/ui/text_area";

packages/devextreme-react/src/text-box.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxTextBox, {
     Properties
 } from "devextreme/ui/text_box";

packages/devextreme-react/src/tile-view.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/tile_view";
 import dxTileView, {
     Properties

packages/devextreme-react/src/toast.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxToast, {
     Properties
 } from "devextreme/ui/toast";

packages/devextreme-react/src/toolbar.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/toolbar";
 import dxToolbar, {
     Properties

packages/devextreme-react/src/tooltip.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxTooltip, {
     Properties
 } from "devextreme/ui/tooltip";

packages/devextreme-react/src/tree-list.ts

@@ -1,3 +1,4 @@
+"use client"
 export { ExplicitTypes } from "devextreme/ui/tree_list";
 import dxTreeList, {
     Properties

packages/devextreme-react/src/tree-map.ts

@@ -1,3 +1,4 @@
+"use client"
 import dxTreeMap, {
     Properties
 } from "devextreme/viz/tree_map";