From c00c0293cde64eafad9e3737c10f666004844d21 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Thu, 11 Jan 2024 08:22:22 -0500
Subject: [PATCH] Fix #4089: Orderlist require dataKey (#5732)

---
 components/doc/orderlist/basicdoc.js            | 8 ++++----
 components/doc/orderlist/dragdropdoc.js         | 8 ++++----
 components/doc/orderlist/filterdoc.js           | 8 ++++----
 components/doc/orderlist/pt/ptdoc.js            | 4 ++++
 components/doc/orderlist/theming/tailwinddoc.js | 2 +-
 components/lib/orderlist/orderlist.d.ts         | 2 +-
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/components/doc/orderlist/basicdoc.js b/components/doc/orderlist/basicdoc.js
index d7a668a300..ce435ab957 100644
--- a/components/doc/orderlist/basicdoc.js
+++ b/components/doc/orderlist/basicdoc.js
@@ -29,7 +29,7 @@ export function BasicDoc(props) {
 
     const code = {
         basic: `
-<OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
+<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
         `,
         javascript: `
 import React, { useState, useEffect } from 'react';
@@ -61,7 +61,7 @@ export default function BasicDemo() {
     
     return (
         <div className="card xl:flex xl:justify-content-center">
-            <OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
         </div>
     )
 }
@@ -109,7 +109,7 @@ export default function BasicDemo() {
     
     return (
         <div className="card xl:flex xl:justify-content-center">
-            <OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
         </div>
     )
 }
@@ -140,7 +140,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card xl:flex xl:justify-content-center">
-                <OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
+                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/orderlist/dragdropdoc.js b/components/doc/orderlist/dragdropdoc.js
index 6fd321e2da..7fb036db13 100644
--- a/components/doc/orderlist/dragdropdoc.js
+++ b/components/doc/orderlist/dragdropdoc.js
@@ -29,7 +29,7 @@ export function DragDropDoc(props) {
 
     const code = {
         basic: `
-<OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} 
+<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} 
     header="Products" dragdrop></OrderList>
         `,
         javascript: `
@@ -62,7 +62,7 @@ export default function BasicDemo() {
     
     return (
         <div className="card xl:flex xl:justify-content-center">
-            <OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" dragdrop></OrderList>
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" dragdrop></OrderList>
         </div>
     )
 }
@@ -110,7 +110,7 @@ export default function BasicDemo() {
     
     return (
         <div className="card xl:flex xl:justify-content-center">
-            <OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" dragdrop></OrderList>
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" dragdrop></OrderList>
         </div>
     )
 }
@@ -141,7 +141,7 @@ export default function BasicDemo() {
                 </p>
             </DocSectionText>
             <div className="card xl:flex xl:justify-content-center">
-                <OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" dragdrop></OrderList>
+                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" dragdrop></OrderList>
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/orderlist/filterdoc.js b/components/doc/orderlist/filterdoc.js
index 96155eac8e..ebbd729688 100644
--- a/components/doc/orderlist/filterdoc.js
+++ b/components/doc/orderlist/filterdoc.js
@@ -29,7 +29,7 @@ export function FilterDoc(props) {
 
     const code = {
         basic: `
-<OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
+<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
         `,
         javascript: `
 import React, { useState, useEffect } from 'react';
@@ -61,7 +61,7 @@ export default function FilterDemo() {
     
     return (
         <div className="card xl:flex xl:justify-content-center">
-            <OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
         </div>
     )
 }
@@ -109,7 +109,7 @@ export default function FilterDemo() {
     
     return (
         <div className="card xl:flex xl:justify-content-center">
-            <OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
         </div>
     )
 }
@@ -141,7 +141,7 @@ export default function FilterDemo() {
                 </p>
             </DocSectionText>
             <div className="card xl:flex xl:justify-content-center">
-                <OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
+                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name"></OrderList>
             </div>
             <DocSectionCode code={code} service={['ProductService']} />
         </>
diff --git a/components/doc/orderlist/pt/ptdoc.js b/components/doc/orderlist/pt/ptdoc.js
index 8f763aa630..a3f71dc847 100644
--- a/components/doc/orderlist/pt/ptdoc.js
+++ b/components/doc/orderlist/pt/ptdoc.js
@@ -30,6 +30,7 @@ export function PTDoc(props) {
     const code = {
         basic: `
 <OrderList
+    dataKey="id" 
     value={products}
     onChange={(e) => setProducts(e.value)}
     itemTemplate={itemTemplate}
@@ -74,6 +75,7 @@ export default function PTDemo() {
     return (
         <div className="card xl:flex xl:justify-content-center">
             <OrderList
+                dataKey="id" 
                 value={products}
                 onChange={(e) => setProducts(e.value)}
                 itemTemplate={itemTemplate}
@@ -134,6 +136,7 @@ export default function PTDemo() {
     return (
         <div className="card xl:flex xl:justify-content-center">
             <OrderList
+                dataKey="id" 
                 value={products}
                 onChange={(e) => setProducts(e.value)}
                 itemTemplate={itemTemplate}
@@ -173,6 +176,7 @@ export default function PTDemo() {
             <DocSectionText {...props}></DocSectionText>
             <div className="card xl:flex xl:justify-content-center">
                 <OrderList
+                    dataKey="id"
                     value={products}
                     onChange={(e) => setProducts(e.value)}
                     itemTemplate={itemTemplate}
diff --git a/components/doc/orderlist/theming/tailwinddoc.js b/components/doc/orderlist/theming/tailwinddoc.js
index 26362e25ed..0fa5a76c53 100644
--- a/components/doc/orderlist/theming/tailwinddoc.js
+++ b/components/doc/orderlist/theming/tailwinddoc.js
@@ -128,7 +128,7 @@ export default function UnstyledDemo() {
     
     return (
         <div className="card xl:flex xl:justify-center">
-            <OrderList value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
         </div>
     )
 }
diff --git a/components/lib/orderlist/orderlist.d.ts b/components/lib/orderlist/orderlist.d.ts
index 587f7eb08e..5c254a2b2a 100755
--- a/components/lib/orderlist/orderlist.d.ts
+++ b/components/lib/orderlist/orderlist.d.ts
@@ -201,7 +201,7 @@ export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLA
     /**
      * Name of the field that uniquely identifies the a record in the data.
      */
-    dataKey?: string | undefined;
+    dataKey: string;
     /**
      * The breakpoint to define the maximum width boundary when responsiveness is enabled.
      * @defaultValue '960px'.