From 69df931e0d4f4fc2cba564bec8485cab933d428b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 27 Mar 2024 13:34:26 +0800
Subject: [PATCH] feat: upgrade react-slick (#48093)

* feat: upgrade react-slick

* test: update snapshots

* test: update snapshots

---------

Co-authored-by: lijianan <574980606@qq.com>
---
 .../__snapshots__/demo-extend.test.ts.snap    |   8 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |   8 +-
 .../__snapshots__/index.test.tsx.snap         | 167 ++++++++++++++++++
 package.json                                  |   2 +-
 4 files changed, 176 insertions(+), 9 deletions(-)

diff --git a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
index b17098232fbd..80ef71c3ff34 100644
--- a/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -727,7 +727,7 @@ exports[`renders components/carousel/demo/fade.tsx extend context correctly 1`]
           aria-hidden="false"
           class="slick-slide slick-active slick-current"
           data-index="0"
-          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 1; z-index: 999; transition: opacity 500ms ease, visibility 500ms ease;"
           tabindex="-1"
         >
           <div>
@@ -747,7 +747,7 @@ exports[`renders components/carousel/demo/fade.tsx extend context correctly 1`]
           aria-hidden="true"
           class="slick-slide"
           data-index="1"
-          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; z-index: 998; transition: opacity 500ms ease, visibility 500ms ease;"
           tabindex="-1"
         >
           <div>
@@ -767,7 +767,7 @@ exports[`renders components/carousel/demo/fade.tsx extend context correctly 1`]
           aria-hidden="true"
           class="slick-slide"
           data-index="2"
-          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; z-index: 998; transition: opacity 500ms ease, visibility 500ms ease;"
           tabindex="-1"
         >
           <div>
@@ -787,7 +787,7 @@ exports[`renders components/carousel/demo/fade.tsx extend context correctly 1`]
           aria-hidden="true"
           class="slick-slide"
           data-index="3"
-          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;"
+          style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; z-index: 998; transition: opacity 500ms ease, visibility 500ms ease;"
           tabindex="-1"
         >
           <div>
diff --git a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
index 05b37f5b99df..d2e7d3bfdba3 100644
--- a/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/carousel/__tests__/__snapshots__/demo.test.ts.snap
@@ -721,7 +721,7 @@ exports[`renders components/carousel/demo/fade.tsx correctly 1`] = `
           aria-hidden="false"
           class="slick-slide slick-active slick-current"
           data-index="0"
-          style="outline:none;width:11.11111111111111%;position:relative;left:0;opacity:1;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline:none;width:11.11111111111111%;position:relative;left:0;opacity:1;z-index:999;transition:opacity 500ms ease, visibility 500ms ease"
           tabindex="-1"
         >
           <div>
@@ -741,7 +741,7 @@ exports[`renders components/carousel/demo/fade.tsx correctly 1`] = `
           aria-hidden="true"
           class="slick-slide"
           data-index="1"
-          style="outline:none;width:11.11111111111111%;position:relative;left:-11px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline:none;width:11.11111111111111%;position:relative;left:-11px;opacity:0;z-index:998;transition:opacity 500ms ease, visibility 500ms ease"
           tabindex="-1"
         >
           <div>
@@ -761,7 +761,7 @@ exports[`renders components/carousel/demo/fade.tsx correctly 1`] = `
           aria-hidden="true"
           class="slick-slide"
           data-index="2"
-          style="outline:none;width:11.11111111111111%;position:relative;left:-22px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline:none;width:11.11111111111111%;position:relative;left:-22px;opacity:0;z-index:998;transition:opacity 500ms ease, visibility 500ms ease"
           tabindex="-1"
         >
           <div>
@@ -781,7 +781,7 @@ exports[`renders components/carousel/demo/fade.tsx correctly 1`] = `
           aria-hidden="true"
           class="slick-slide"
           data-index="3"
-          style="outline:none;width:11.11111111111111%;position:relative;left:-33px;opacity:0;transition:opacity 500ms ease, visibility 500ms ease"
+          style="outline:none;width:11.11111111111111%;position:relative;left:-33px;opacity:0;z-index:998;transition:opacity 500ms ease, visibility 500ms ease"
           tabindex="-1"
         >
           <div>
diff --git a/components/carousel/__tests__/__snapshots__/index.test.tsx.snap b/components/carousel/__tests__/__snapshots__/index.test.tsx.snap
index cf26889a0a25..279c2c2c40c1 100644
--- a/components/carousel/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/carousel/__tests__/__snapshots__/index.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`Carousel rtl render component should be rendered correctly in RTL direc
 >
   <div
     class="slick-slider slick-initialized"
+    dir="ltr"
   >
     <div
       class="slick-list"
@@ -25,6 +26,7 @@ exports[`Carousel should works for dotPosition bottom 1`] = `
 >
   <div
     class="slick-slider slick-initialized"
+    dir="ltr"
   >
     <div
       class="slick-list"
@@ -33,6 +35,20 @@ exports[`Carousel should works for dotPosition bottom 1`] = `
         class="slick-track"
         style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
       >
+        <div
+          aria-hidden="true"
+          class="slick-slide slick-cloned"
+          data-index="-1"
+          style="width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
         <div
           aria-hidden="false"
           class="slick-slide slick-active slick-current"
@@ -47,8 +63,34 @@ exports[`Carousel should works for dotPosition bottom 1`] = `
             />
           </div>
         </div>
+        <div
+          aria-hidden="true"
+          class="slick-slide slick-cloned"
+          data-index="1"
+          style="width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
       </div>
     </div>
+    <ul
+      class="slick-dots slick-dots-bottom"
+      style="display: block;"
+    >
+      <li
+        class="slick-active"
+      >
+        <button>
+          1
+        </button>
+      </li>
+    </ul>
   </div>
 </div>
 `;
@@ -59,14 +101,30 @@ exports[`Carousel should works for dotPosition left 1`] = `
 >
   <div
     class="slick-slider slick-vertical slick-initialized"
+    dir="ltr"
   >
     <div
       class="slick-list"
+      style="height: 0px;"
     >
       <div
         class="slick-track"
         style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
       >
+        <div
+          aria-hidden="true"
+          class="slick-slide slick-cloned"
+          data-index="-1"
+          style="width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
         <div
           aria-hidden="false"
           class="slick-slide slick-active slick-current"
@@ -81,8 +139,34 @@ exports[`Carousel should works for dotPosition left 1`] = `
             />
           </div>
         </div>
+        <div
+          aria-hidden="true"
+          class="slick-slide slick-cloned"
+          data-index="1"
+          style="width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
       </div>
     </div>
+    <ul
+      class="slick-dots slick-dots-left"
+      style="display: block;"
+    >
+      <li
+        class="slick-active"
+      >
+        <button>
+          1
+        </button>
+      </li>
+    </ul>
   </div>
 </div>
 `;
@@ -93,14 +177,30 @@ exports[`Carousel should works for dotPosition right 1`] = `
 >
   <div
     class="slick-slider slick-vertical slick-initialized"
+    dir="ltr"
   >
     <div
       class="slick-list"
+      style="height: 0px;"
     >
       <div
         class="slick-track"
         style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
       >
+        <div
+          aria-hidden="true"
+          class="slick-slide slick-cloned"
+          data-index="-1"
+          style="width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
         <div
           aria-hidden="false"
           class="slick-slide slick-active slick-current"
@@ -115,8 +215,34 @@ exports[`Carousel should works for dotPosition right 1`] = `
             />
           </div>
         </div>
+        <div
+          aria-hidden="true"
+          class="slick-slide slick-cloned"
+          data-index="1"
+          style="width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
       </div>
     </div>
+    <ul
+      class="slick-dots slick-dots-right"
+      style="display: block;"
+    >
+      <li
+        class="slick-active"
+      >
+        <button>
+          1
+        </button>
+      </li>
+    </ul>
   </div>
 </div>
 `;
@@ -127,6 +253,7 @@ exports[`Carousel should works for dotPosition top 1`] = `
 >
   <div
     class="slick-slider slick-initialized"
+    dir="ltr"
   >
     <div
       class="slick-list"
@@ -135,6 +262,20 @@ exports[`Carousel should works for dotPosition top 1`] = `
         class="slick-track"
         style="opacity: 1; transform: translate3d(0px, 0px, 0px);"
       >
+        <div
+          aria-hidden="true"
+          class="slick-slide slick-cloned"
+          data-index="-1"
+          style="width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
         <div
           aria-hidden="false"
           class="slick-slide slick-active slick-current"
@@ -149,8 +290,34 @@ exports[`Carousel should works for dotPosition top 1`] = `
             />
           </div>
         </div>
+        <div
+          aria-hidden="true"
+          class="slick-slide slick-cloned"
+          data-index="1"
+          style="width: 0px;"
+          tabindex="-1"
+        >
+          <div>
+            <div
+              style="width: 100%; display: inline-block;"
+              tabindex="-1"
+            />
+          </div>
+        </div>
       </div>
     </div>
+    <ul
+      class="slick-dots slick-dots-top"
+      style="display: block;"
+    >
+      <li
+        class="slick-active"
+      >
+        <button>
+          1
+        </button>
+      </li>
+    </ul>
   </div>
 </div>
 `;
diff --git a/package.json b/package.json
index 31d7965db959..ca60d0188764 100644
--- a/package.json
+++ b/package.json
@@ -118,7 +118,7 @@
     "@ant-design/colors": "^7.0.2",
     "@ant-design/cssinjs": "^1.18.5",
     "@ant-design/icons": "^5.3.5",
-    "@ant-design/react-slick": "~1.0.2",
+    "@ant-design/react-slick": "~1.1.1",
     "@babel/runtime": "^7.24.1",
     "@ctrl/tinycolor": "^3.6.1",
     "@rc-component/color-picker": "~1.5.3",