React

React/package.json

@@ -14,9 +14,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "devextreme": "25.1.3",
+    "devextreme": "25.2.4",
     "devextreme-aspnet-data-nojquery": "^5.1.0",
-    "devextreme-react": "25.1.3",
+    "devextreme-react": "25.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

React/src/App.css

@@ -1,4 +1,39 @@
-.main {
-  margin: 50px;
-  width: 90vw;
+.dx-viewport {
+  font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir,
+  "segoe ui", "helvetica neue", "adwaita sans", cantarell, ubuntu, roboto,
+  noto, helvetica, arial, sans-serif;
+}
+
+.options {
+  height: 180px;
+  width: 25vw;
+  padding: 20px;
+  background-color: rgb(191 191 191 / 15%);
+  position: absolute;
+  right: 20px;
+  top: 40px;
+  bottom: 0;
+}
+
+.caption {
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.option {
+  margin-top: 10px;
+}
+
+.demo-container {
+  margin: 40px 20px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.row p {
+  margin: 0;
 }

React/src/App.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
 
-test('renders learn react link', () => {
+test('DropDownBox with search and embedded DataGrid', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  const linkElement = screen.getByText(/Search Timeout/i);
   expect(linkElement).toBeInTheDocument();
 });