Merge branch '24_2' of github.com:DevExpress/DevExtreme into T1265009…

…_24_2

.github/workflows/update_version.yml

@@ -59,7 +59,7 @@ jobs:
           git config --global user.name "DX Robot"
 
       - name: Bump version
-        run: pnpm run all:update-version -- ${{ inputs.version }}
+        run: pnpm run all:update-version ${{ inputs.version }}
 
       - name: Commit changes and make PR
         env:

README.md

@@ -37,7 +37,7 @@ The DevExtreme website includes "Getting Started" guides for every aspect of Dev
 - [Demo Gallery](https://js.devexpress.com/Demos/WidgetsGallery)
 - [Responsive UI Templates](https://js.devexpress.com/Templates/UITemplates)
 - [Documentation](https://js.devexpress.com/Documentation)
-- [Examples on GitHub](https://github.com/DevExpress/DevExtreme-examples)
+- [Examples on GitHub](https://github.com/DevExpress-Examples)
 - [YouTube videos](https://www.youtube.com/playlist?list=PL8h4jt35t1wjGvgflbHEH_e3b23AA30-z)
 
 ## Contributing

apps/angular/package.json

@@ -2,7 +2,7 @@
   "name": "devextreme-angular-playground",
   "description": "DevExtreme Angular UI and Visualization Components",
   "private": true,
-  "version": "24.2.2",
+  "version": "24.2.3",
   "author": "Developer Express Inc.",
   "license": "MIT",
   "dependencies": {

apps/demos/Demos/Chat/Customization/description.md

@@ -0,0 +1,14 @@
+Use the following properties to customize the Chat component:
+
+- To display/hide Chat UI elements:
+    - [showAvatar](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showAvatar)    
+    - [showUserName](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showUserName)    
+    - [showDayHeaders](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showDayHeaders)     
+    - [showMessageTimestamp](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showMessageTimestamp)
+
+- To modify date/time formats:
+    - [dayHeaderFormat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dayHeaderFormat)     
+    - [messageTimestampFormat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#messageTimestampFormat) 
+
+- To deactivate Chat, use the [disabled](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#disabled) property.
+<!--split-->

apps/demos/Demos/Pagination/Overview/React/App.tsx

@@ -1,13 +1,32 @@
-import React from "react";
-import Pagination from "devextreme-react/pagination";
-import { customers } from "./data.ts";
+import React, { useState } from 'react';
+import Pagination from 'devextreme-react/pagination';
+import EmployeeGallery from './EmployeesGallery.tsx';
 
-const columns = ["CompanyName", "City", "State", "Phone", "Fax"];
+import { employees } from './data.ts';
+
+const PAGE_SIZES = [4, 6];
 
 const App = () => {
+  const [pageSize, setPageSize] = useState(4);
+  const [pageIndex, setPageIndex] = useState(1);
+
   return (
     <>
-      <Pagination />
+      <EmployeeGallery
+        employees={employees}
+        pageSize={pageSize}
+        pageIndex={pageIndex}
+      />
+      <Pagination
+        showInfo
+        showNavigationButtons
+        allowedPageSizes={PAGE_SIZES}
+        itemCount={employees.length}
+        pageIndex={pageIndex}
+        pageSize={pageSize}
+        onPageIndexChange={setPageIndex}
+        onPageSizeChange={setPageSize}
+      />
     </>
   );
 };

apps/demos/Demos/Pagination/Overview/React/EmployeeCard.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Employee } from './data';
+
+interface EmployeeCardProps {
+  employee: Employee;
+}
+
+const EmployeeCard = ({ employee }: EmployeeCardProps) => {
+  return (
+    <div className="employees__card">
+      <div className="employees__img-wrapper">
+        <img
+          className="employees__img"
+          src={employee.Picture}
+          alt={employee.FullName}
+        />
+      </div>
+      <div className="employees__info">
+        <div className="employees__info-row">
+          <span className="employees__info-label">Full Name:</span>
+          <span className="employees__info-value">{employee.FullName}</span>
+        </div>
+
+        <div className="employees__info-row">
+          <span className="employees__info-label">Position:</span>
+          <span className="employees__info-value">{employee.Title}</span>
+        </div>
+
+        <div className="employees__info-row">
+          <span className="employees__info-label">Phone:</span>
+          <span className="employees__info-value">{employee.MobilePhone}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmployeeCard;

apps/demos/Demos/Pagination/Overview/React/EmployeesGallery.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import EmployeeCard from './EmployeeCard.tsx';
+import { Employee } from './data';
+
+interface EmployeeGalleryProps {
+  employees: Employee[];
+  pageSize: number;
+  pageIndex: number;
+}
+
+const EmployeeGallery = ({ employees, pageSize, pageIndex }: EmployeeGalleryProps) => {
+  const cardsNumber = pageSize === 4 ? 'employees--forth' : 'employees--six';
+  const pageEmployees = employees.slice((pageIndex - 1) * pageSize, pageIndex * pageSize);
+
+  return (
+    <div className={`employees ${cardsNumber}`}>
+      {pageEmployees.map((employee) => (
+        <EmployeeCard
+          key={employee.ID}
+          employee={employee}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default EmployeeGallery;