(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["44f587d4"],{"44f587d4":function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"default",{enumerable:!0,get:function(){return p;}});var n=t("777fffbe"),d=t("f19d2b93"),l=n._(t("e47e6667")),s=n._(t("b622e337")),o=n._(t("97c488ea")),r=n._(t("5e4632fa")),c=n._(t("c96b0d01")),i=t("5b220c3d"),u=t("9c86e52a"),x=t("d7e69c8d"),p=function(){return(0,d.jsx)(u.DumiPage,{children:(0,d.jsx)(i.Suspense,{fallback:(0,d.jsx)(c.default,{}),children:(0,d.jsx)(d.Fragment,{children:(0,d.jsxs)("div",{className:"markdown",children:[(0,d.jsxs)("p",{children:[x.texts[0].value,(0,d.jsx)("code",{children:x.texts[1].value}),x.texts[2].value,(0,d.jsx)("code",{children:x.texts[3].value}),x.texts[4].value,(0,d.jsx)("code",{children:x.texts[5].value}),x.texts[6].value,(0,d.jsx)(o.default,{href:"https://4x.ant.design/docs/react/migration-v4",sourceType:"a",children:x.texts[7].value}),x.texts[8].value]}),(0,d.jsxs)("h2",{id:"upgrade-preparation",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#upgrade-preparation",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Upgrade preparation"]}),(0,d.jsx)("ol",{children:(0,d.jsx)("li",{children:x.texts[9].value})}),(0,d.jsxs)("h2",{id:"incompatible-changes-in-v5",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#incompatible-changes-in-v5",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Incompatible changes in v5"]}),(0,d.jsxs)("h3",{id:"design-specification",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#design-specification",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Design specification"]}),(0,d.jsxs)("ul",{children:[(0,d.jsxs)("li",{children:[x.texts[10].value,(0,d.jsx)("code",{children:x.texts[11].value}),x.texts[12].value,(0,d.jsx)("code",{children:x.texts[13].value}),x.texts[14].value,(0,d.jsx)("code",{children:x.texts[15].value}),x.texts[16].value,(0,d.jsx)("code",{children:x.texts[17].value}),x.texts[18].value,(0,d.jsx)("code",{children:x.texts[19].value}),x.texts[20].value,(0,d.jsx)("code",{children:x.texts[21].value}),x.texts[22].value,(0,d.jsx)("code",{children:x.texts[23].value}),x.texts[24].value]}),(0,d.jsxs)("li",{children:[x.texts[25].value,(0,d.jsx)(l.default,{value:"#1890ffff",children:x.texts[26].value}),x.texts[27].value,(0,d.jsx)(l.default,{value:"#1677ffff",children:x.texts[28].value}),x.texts[29].value]}),(0,d.jsx)("li",{children:x.texts[30].value}),(0,d.jsx)("li",{children:x.texts[31].value})]}),(0,d.jsxs)("h3",{id:"technology-adjustment",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#technology-adjustment",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Technology adjustment"]}),(0,d.jsxs)("ul",{children:[(0,d.jsxs)("li",{children:[(0,d.jsxs)("p",{children:[x.texts[32].value,(0,d.jsx)(o.default,{href:"https://github.com/ant-design/cssinjs",sourceType:"a",children:x.texts[33].value}),x.texts[34].value]}),(0,d.jsxs)("ul",{children:[(0,d.jsx)("li",{children:x.texts[35].value}),(0,d.jsxs)("li",{children:[x.texts[36].value,(0,d.jsx)("code",{children:x.texts[37].value}),x.texts[38].value,(0,d.jsx)("code",{children:x.texts[39].value}),x.texts[40].value]}),(0,d.jsxs)("li",{children:[x.texts[41].value,(0,d.jsx)("code",{children:x.texts[42].value}),x.texts[43].value,(0,d.jsx)(o.default,{to:"/components/app",sourceType:"Link",children:x.texts[44].value}),x.texts[45].value]})]})]}),(0,d.jsx)("li",{children:(0,d.jsx)("p",{children:x.texts[46].value})}),(0,d.jsx)("li",{children:(0,d.jsxs)("p",{children:[x.texts[47].value,(0,d.jsx)("code",{children:x.texts[48].value}),x.texts[49].value,(0,d.jsx)("code",{children:x.texts[50].value}),x.texts[51].value,(0,d.jsx)("code",{children:x.texts[52].value}),x.texts[53].value]})}),(0,d.jsx)("li",{children:(0,d.jsxs)("p",{children:[x.texts[54].value,(0,d.jsx)(o.default,{to:"/docs/react/use-custom-date-library/",sourceType:"Link",children:x.texts[55].value}),x.texts[56].value]})}),(0,d.jsxs)("li",{children:[(0,d.jsxs)("p",{children:[(0,d.jsx)("code",{children:x.texts[57].value}),x.texts[58].value]}),(0,d.jsx)(s.default,{lang:"diff",children:x.texts[59].value})]})]}),(0,d.jsxs)("h3",{id:"compatibility",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#compatibility",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Compatibility"]}),(0,d.jsx)("ul",{children:(0,d.jsx)("li",{children:x.texts[60].value})}),(0,d.jsxs)("h4",{id:"component-api-adjustment",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#component-api-adjustment",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Component API adjustment"]}),(0,d.jsxs)("ul",{children:[(0,d.jsxs)("li",{children:[(0,d.jsxs)("p",{children:[x.texts[61].value,(0,d.jsx)("code",{children:x.texts[62].value}),x.texts[63].value,(0,d.jsx)("code",{children:x.texts[64].value}),x.texts[65].value]}),(0,d.jsxs)("ul",{children:[(0,d.jsx)("li",{children:x.texts[66].value}),(0,d.jsx)("li",{children:x.texts[67].value}),(0,d.jsx)("li",{children:x.texts[68].value}),(0,d.jsx)("li",{children:x.texts[69].value}),(0,d.jsx)("li",{children:x.texts[70].value}),(0,d.jsx)("li",{children:x.texts[71].value}),(0,d.jsx)("li",{children:x.texts[72].value})]}),(0,d.jsx)(s.default,{lang:"diff",children:x.texts[73].value})]}),(0,d.jsxs)("li",{children:[(0,d.jsxs)("p",{children:[x.texts[74].value,(0,d.jsx)("code",{children:x.texts[75].value}),x.texts[76].value,(0,d.jsx)("code",{children:x.texts[77].value}),x.texts[78].value]}),(0,d.jsxs)("ul",{children:[(0,d.jsxs)("li",{children:[x.texts[79].value,(0,d.jsx)("code",{children:x.texts[80].value}),x.texts[81].value,(0,d.jsx)("code",{children:x.texts[82].value}),x.texts[83].value]}),(0,d.jsxs)("li",{children:[x.texts[84].value,(0,d.jsx)("code",{children:x.texts[85].value}),x.texts[86].value,(0,d.jsx)("code",{children:x.texts[87].value}),x.texts[88].value]}),(0,d.jsxs)("li",{children:[x.texts[89].value,(0,d.jsx)("code",{children:x.texts[90].value}),x.texts[91].value,(0,d.jsx)("code",{children:x.texts[92].value}),x.texts[93].value]}),(0,d.jsxs)("li",{children:[x.texts[94].value,(0,d.jsx)("code",{children:x.texts[95].value}),x.texts[96].value,(0,d.jsx)("code",{children:x.texts[97].value}),x.texts[98].value]}),(0,d.jsxs)("li",{children:[x.texts[99].value,(0,d.jsx)("code",{children:x.texts[100].value}),x.texts[101].value]}),(0,d.jsxs)("li",{children:[x.texts[102].value,(0,d.jsx)("code",{children:x.texts[103].value}),x.texts[104].value,(0,d.jsx)("code",{children:x.texts[105].value}),x.texts[106].value]}),(0,d.jsxs)("li",{children:[x.texts[107].value,(0,d.jsx)("code",{children:x.texts[108].value}),x.texts[109].value,(0,d.jsx)("code",{children:x.texts[110].value}),x.texts[111].value]})]}),(0,d.jsx)(s.default,{lang:"diff",children:x.texts[112].value})]}),(0,d.jsx)("li",{children:(0,d.jsxs)("p",{children:[(0,d.jsx)("code",{children:x.texts[113].value}),x.texts[114].value,(0,d.jsx)("code",{children:x.texts[115].value}),x.texts[116].value]})}),(0,d.jsx)("li",{children:(0,d.jsxs)("p",{children:[x.texts[117].value,(0,d.jsx)(o.default,{href:"https://github.com/ant-design/ant-design/pull/34528",sourceType:"a",children:x.texts[118].value})]})}),(0,d.jsxs)("li",{children:[(0,d.jsx)("p",{children:x.texts[119].value}),(0,d.jsxs)("ul",{children:[(0,d.jsxs)("li",{children:[x.texts[120].value,(0,d.jsx)("code",{children:x.texts[121].value}),x.texts[122].value,(0,d.jsx)("code",{children:x.texts[123].value}),x.texts[124].value,(0,d.jsx)("code",{children:x.texts[125].value}),x.texts[126].value,(0,d.jsx)("code",{children:x.texts[127].value}),x.texts[128].value,(0,d.jsx)("code",{children:x.texts[129].value}),x.texts[130].value,(0,d.jsx)("code",{children:x.texts[131].value}),x.texts[132].value,(0,d.jsx)("code",{children:x.texts[133].value}),x.texts[134].value]}),(0,d.jsxs)("li",{children:[(0,d.jsx)("code",{children:x.texts[135].value}),x.texts[136].value,(0,d.jsx)("code",{children:x.texts[137].value}),x.texts[138].value]})]})]}),(0,d.jsx)("li",{children:(0,d.jsxs)("p",{children:[x.texts[139].value,(0,d.jsx)("code",{children:x.texts[140].value}),x.texts[141].value,(0,d.jsx)("code",{children:x.texts[142].value}),x.texts[143].value,(0,d.jsx)("code",{children:x.texts[144].value}),x.texts[145].value,(0,d.jsx)("code",{children:x.texts[146].value}),x.texts[147].value]})}),(0,d.jsx)("li",{children:(0,d.jsxs)("p",{children:[x.texts[148].value,(0,d.jsx)("code",{children:x.texts[149].value}),x.texts[150].value,(0,d.jsx)("code",{children:x.texts[151].value}),x.texts[152].value]})})]}),(0,d.jsxs)("h4",{id:"component-refactoring-and-removal",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#component-refactoring-and-removal",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Component refactoring and removal"]}),(0,d.jsxs)("ul",{children:[(0,d.jsx)("li",{children:(0,d.jsxs)("p",{children:[x.texts[153].value,(0,d.jsx)("code",{children:x.texts[154].value}),x.texts[155].value,(0,d.jsx)("code",{children:x.texts[156].value}),x.texts[157].value,(0,d.jsx)("code",{children:x.texts[158].value}),x.texts[159].value]})}),(0,d.jsx)("li",{children:(0,d.jsxs)("p",{children:[x.texts[160].value,(0,d.jsx)("code",{children:x.texts[161].value}),x.texts[162].value]})}),(0,d.jsxs)("li",{children:[(0,d.jsxs)("p",{children:[x.texts[163].value,(0,d.jsx)("code",{children:x.texts[164].value}),x.texts[165].value]}),(0,d.jsx)(s.default,{lang:"diff",children:x.texts[166].value})]}),(0,d.jsxs)("li",{children:[(0,d.jsxs)("p",{children:[x.texts[167].value,(0,d.jsx)("code",{children:x.texts[168].value}),x.texts[169].value]}),(0,d.jsx)(s.default,{lang:"diff",children:x.texts[170].value})]})]}),(0,d.jsxs)("h2",{id:"start-upgrading",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#start-upgrading",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Start upgrading"]}),(0,d.jsx)("p",{children:x.texts[171].value}),(0,d.jsx)(s.default,{lang:"bash",children:x.texts[172].value}),(0,d.jsxs)("p",{children:[x.texts[173].value,(0,d.jsx)("code",{children:x.texts[174].value}),x.texts[175].value,(0,d.jsx)("code",{children:x.texts[176].value}),x.texts[177].value,(0,d.jsx)("code",{children:x.texts[178].value}),x.texts[179].value,(0,d.jsx)("code",{children:x.texts[180].value}),x.texts[181].value]}),(0,d.jsx)(s.default,{lang:"bash",children:x.texts[182].value}),(0,d.jsxs)("p",{children:[x.texts[183].value,(0,d.jsx)(o.default,{href:"https://github.com/ant-design/codemod-v5",sourceType:"a",children:x.texts[184].value}),x.texts[185].value]}),(0,d.jsx)("p",{children:x.texts[186].value}),(0,d.jsx)(s.default,{lang:"shell",children:x.texts[187].value}),(0,d.jsxs)(r.default,{autoPlay:!0,loop:!0,style:{width:"100%",maxHeight:"600px",objectFit:"contain"},children:[x.texts[188].value,(0,d.jsx)("source",{src:"https://mdn.alipayobjects.com/huamei_7uahnr/afts/file/A*Sjy5ToW6ow0AAAAAAAAAAAAADrJ8AQ",type:"video/webm"}),x.texts[189].value,(0,d.jsx)("source",{src:"https://mdn.alipayobjects.com/huamei_7uahnr/afts/file/A*hTDYQJ2HFTYAAAAAAAAAAAAADrJ8AQ",type:"video/mp4"})]}),(0,d.jsx)("blockquote",{children:(0,d.jsx)("p",{children:x.texts[190].value})}),(0,d.jsxs)("h3",{id:"less-migration",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#less-migration",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"less migration"]}),(0,d.jsx)("p",{children:x.texts[191].value}),(0,d.jsx)(s.default,{lang:"js",children:x.texts[192].value}),(0,d.jsx)("p",{children:x.texts[193].value}),(0,d.jsx)(s.default,{lang:"diff",children:x.texts[194].value}),(0,d.jsxs)("h3",{id:"remove-babel-plugin-import",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#remove-babel-plugin-import",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Remove babel-plugin-import"]}),(0,d.jsxs)("p",{children:[x.texts[195].value,(0,d.jsx)("code",{children:x.texts[196].value}),x.texts[197].value,(0,d.jsx)("code",{children:x.texts[198].value}),x.texts[199].value]}),(0,d.jsx)(s.default,{lang:"diff",children:x.texts[200].value}),(0,d.jsx)("p",{children:x.texts[201].value}),(0,d.jsx)(s.default,{lang:"diff",children:x.texts[202].value}),(0,d.jsxs)("h3",{id:"replace-dayjs-locale",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#replace-dayjs-locale",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Replace Day.js locale"]}),(0,d.jsx)("p",{children:x.texts[203].value}),(0,d.jsx)(s.default,{lang:"diff",children:x.texts[204].value}),(0,d.jsxs)("p",{children:[x.texts[205].value,(0,d.jsx)(o.default,{href:"https://day.js.org/docs/en/plugin/plugin",sourceType:"a",children:x.texts[206].value}),x.texts[207].value]}),(0,d.jsxs)("p",{children:[x.texts[208].value,(0,d.jsx)("code",{children:x.texts[209].value}),x.texts[210].value]}),(0,d.jsx)(s.default,{lang:"bash",children:x.texts[211].value}),(0,d.jsx)(s.default,{lang:"javascript",children:x.texts[212].value}),(0,d.jsxs)("h3",{id:"switch-to-theme-of-v4",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#switch-to-theme-of-v4",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Switch to theme of v4"]}),(0,d.jsxs)("p",{children:[x.texts[213].value,(0,d.jsx)("code",{children:x.texts[214].value}),x.texts[215].value]}),(0,d.jsx)(s.default,{lang:"diff",children:x.texts[216].value}),(0,d.jsxs)("h3",{id:"legacy-browser-support",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#legacy-browser-support",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Legacy browser support"]}),(0,d.jsxs)("p",{children:[x.texts[217].value,(0,d.jsx)("code",{children:x.texts[218].value}),x.texts[219].value,(0,d.jsx)("code",{children:x.texts[220].value}),x.texts[221].value,(0,d.jsx)("code",{children:x.texts[222].value}),x.texts[223].value,(0,d.jsx)(o.default,{to:"/docs/react/customize-theme#compatible-adjustment",sourceType:"Link",children:x.texts[224].value}),x.texts[225].value]}),(0,d.jsxs)("h2",{id:"multiple-versions-coexist",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#multiple-versions-coexist",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Multiple versions coexist"]}),(0,d.jsxs)("p",{children:[x.texts[226].value,(0,d.jsx)(o.default,{href:"https://qiankun.umijs.org/",sourceType:"a",children:x.texts[227].value}),x.texts[228].value]}),(0,d.jsxs)("h3",{id:"install-v5-through-alias",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#install-v5-through-alias",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Install v5 through alias"]}),(0,d.jsx)(s.default,{lang:"bash",children:x.texts[229].value}),(0,d.jsx)("p",{children:x.texts[230].value}),(0,d.jsx)(s.default,{lang:"json",children:x.texts[231].value}),(0,d.jsx)("p",{children:x.texts[232].value}),(0,d.jsx)(s.default,{lang:"tsx",children:x.texts[233].value}),(0,d.jsxs)("p",{children:[x.texts[234].value,(0,d.jsx)("code",{children:x.texts[235].value}),x.texts[236].value]}),(0,d.jsx)(s.default,{lang:"tsx",children:x.texts[237].value}),(0,d.jsxs)("h2",{id:"encounter-problems",children:[(0,d.jsx)(o.default,{"aria-hidden":"true",tabIndex:"-1",href:"#encounter-problems",sourceType:"a",children:(0,d.jsx)("span",{className:"icon icon-link"})}),"Encounter problems"]}),(0,d.jsxs)("p",{children:[x.texts[238].value,(0,d.jsx)(o.default,{href:"https://new-issue.ant.design/",sourceType:"a",children:x.texts[239].value}),x.texts[240].value]})]})})})});};},d7e69c8d:function(e,a,t){"use strict";t.d(a,"__esModule",{value:!0}),t.d(a,"texts",{enumerable:!0,get:function(){return n;}}),t("d8c93196");let n=[{value:"This document will help you upgrade from antd ",paraId:0},{value:"4.x",paraId:0},{value:" version to antd ",paraId:0},{value:"5.x",paraId:0},{value:" version. If you are using ",paraId:0},{value:"3.x",paraId:0},{value:" or older version, please refer to the previous ",paraId:0},{value:"upgrade document",paraId:0},{value:" to 4.x.",paraId:0},{value:"Please upgrade to the latest version of 4.x first, and remove / modify related APIs according to the console warning message.",paraId:1,tocIndex:0},{value:"Basic rounded corner adjustment, changed from ",paraId:2,tocIndex:2},{value:"2px",paraId:2,tocIndex:2},{value:" to four layers of radius, which are ",paraId:2,tocIndex:2},{value:"2px",paraId:2,tocIndex:2},{value:" ",paraId:2,tocIndex:2},{value:"4px",paraId:2,tocIndex:2},{value:" ",paraId:2,tocIndex:2},{value:"6px",paraId:2,tocIndex:2},{value:" and ",paraId:2,tocIndex:2},{value:"8px",paraId:2,tocIndex:2},{value:". For example, radius of default Button is modified from ",paraId:2,tocIndex:2},{value:"2px",paraId:2,tocIndex:2},{value:" to ",paraId:2,tocIndex:2},{value:"6px",paraId:2,tocIndex:2},{value:".",paraId:2,tocIndex:2},{value:"Primary color adjustment, changed from ",paraId:2,tocIndex:2},{value:"#1890ff",paraId:2,tocIndex:2},{value:" to ",paraId:2,tocIndex:2},{value:"#1677ff",paraId:2,tocIndex:2},{value:".",paraId:2,tocIndex:2},{value:"Global shadow optimization, adjusted from three layers of shadows to two layers, which are used in common components (Card .e.g) and popup components (Dropdown .e.g).",paraId:2,tocIndex:2},{value:"Overall reduction in wireframe usage.",paraId:2,tocIndex:2},{value:"Remove less, adopt CSS-in-JS, for better support of dynamic themes. The bottom layer uses ",paraId:3,tocIndex:3},{value:"@ant-design/cssinjs",paraId:3,tocIndex:3},{value:" as a solution.",paraId:3,tocIndex:3},{value:"All less files are removed, and less variables are no longer exported.",paraId:4,tocIndex:3},{value:"CSS files are no longer included in package. Since CSS-in-JS supports importing on demand, the original ",paraId:4,tocIndex:3},{value:"antd/dist/antd.css",paraId:4,tocIndex:3},{value:" has also been abandoned. If you need to reset some basic styles, please import ",paraId:4,tocIndex:3},{value:"antd/dist/reset.css",paraId:4,tocIndex:3},{value:".",paraId:4,tocIndex:3},{value:"If you need to reset the style of the component, but you don't want to introduce ",paraId:4,tocIndex:3},{value:"antd/dist/reset.css",paraId:4,tocIndex:3},{value:" to pollute the global style, You can try using the ",paraId:4,tocIndex:3},{value:"App",paraId:5,tocIndex:3},{value:" in the outermost layer to solve the problem that native elements do not have antd specification style.",paraId:4,tocIndex:3},{value:"Remove css variables and dynamic theme built on top of them.",paraId:6,tocIndex:3},{value:"LocaleProvider has been deprecated in 4.x (use ",paraId:7,tocIndex:3},{value:"<ConfigProvider locale />",paraId:7,tocIndex:3},{value:" instead), we removed the related folder ",paraId:7,tocIndex:3},{value:"antd/es/locale-provider",paraId:7,tocIndex:3},{value:" and ",paraId:7,tocIndex:3},{value:"antd/lib/locale-provider",paraId:7,tocIndex:3},{value:" in 5.x.",paraId:7,tocIndex:3},{value:"Replace built-in Moment.js with Dayjs. For more: ",paraId:8,tocIndex:3},{value:"Use custom date library",paraId:9,tocIndex:3},{value:".",paraId:8,tocIndex:3},{value:"babel-plugin-import",paraId:10,tocIndex:3},{value:" is no longer supported. CSS-in-JS itself has the ability to import on demand, and plugin support is no longer required. Umi users can remove related configurations.",paraId:10,tocIndex:3},{value:"// config/config.ts\nexport default {\n  antd: {\n-   import: true,\n  },\n};\n",paraId:11,tocIndex:3},{value:"DO NOT support IE browser anymore.",paraId:12,tocIndex:4},{value:"The classname API of the component popup box is unified to ",paraId:13,tocIndex:5},{value:"popupClassName",paraId:13,tocIndex:5},{value:", and ",paraId:13,tocIndex:5},{value:"dropdownClassName",paraId:13,tocIndex:5},{value:" and other similar APIs will be replaced.",paraId:13,tocIndex:5},{value:"AutoComplete",paraId:14,tocIndex:5},{value:"Cascader",paraId:14,tocIndex:5},{value:"Select",paraId:14,tocIndex:5},{value:"TreeSelect",paraId:14,tocIndex:5},{value:"TimePicker",paraId:14,tocIndex:5},{value:"DatePicker",paraId:14,tocIndex:5},{value:"Mentions",paraId:14,tocIndex:5},{value:'  import { Select } from \'antd\';\n\n  const App: React.FC = () => (\n    <Select\n-     dropdownClassName="my-select-popup"\n+     popupClassName="my-select-popup"\n    />\n  );\n\n  export default App;\n',paraId:15,tocIndex:5},{value:"The controlled visible API of the component popup is unified to ",paraId:16,tocIndex:5},{value:"open",paraId:16,tocIndex:5},{value:", and ",paraId:16,tocIndex:5},{value:"visible",paraId:16,tocIndex:5},{value:" and other similar APIs will be replaced.",paraId:16,tocIndex:5},{value:"Drawer ",paraId:17,tocIndex:5},{value:"visible",paraId:17,tocIndex:5},{value:" changed to ",paraId:17,tocIndex:5},{value:"open",paraId:17,tocIndex:5},{value:".",paraId:17,tocIndex:5},{value:"Modal ",paraId:17,tocIndex:5},{value:"visible",paraId:17,tocIndex:5},{value:" changed to ",paraId:17,tocIndex:5},{value:"open",paraId:17,tocIndex:5},{value:".",paraId:17,tocIndex:5},{value:"Dropdown ",paraId:17,tocIndex:5},{value:"visible",paraId:17,tocIndex:5},{value:" changed to ",paraId:17,tocIndex:5},{value:"open",paraId:17,tocIndex:5},{value:".",paraId:17,tocIndex:5},{value:"Tooltip ",paraId:17,tocIndex:5},{value:"visible",paraId:17,tocIndex:5},{value:" changed to ",paraId:17,tocIndex:5},{value:"open",paraId:17,tocIndex:5},{value:".",paraId:17,tocIndex:5},{value:"Tag ",paraId:17,tocIndex:5},{value:"visible",paraId:17,tocIndex:5},{value:" is removed.",paraId:17,tocIndex:5},{value:"Slider ",paraId:17,tocIndex:5},{value:"tooltip",paraId:17,tocIndex:5},{value:" related API converged to ",paraId:17,tocIndex:5},{value:"tooltip",paraId:17,tocIndex:5},{value:" property.",paraId:17,tocIndex:5},{value:"Table ",paraId:17,tocIndex:5},{value:"filterDropdownVisible",paraId:17,tocIndex:5},{value:" changed to ",paraId:17,tocIndex:5},{value:"filterDropdownOpen",paraId:17,tocIndex:5},{value:".",paraId:17,tocIndex:5},{value:"  import { Modal, Tag, Table, Slider } from 'antd';\n\n  const App: React.FC = () => {\n    const [visible, setVisible] = useState(true);\n\n    return (\n      <>\n-       <Modal visible={visible}>content</Modal>\n+       <Modal open={visible}>content</Modal>\n\n-       <Tag visible={visible}>tag</Tag>\n+       {visible && <Tag>tag</Tag>}\n\n        <Table\n          data={[]}\n          columns={[\n            {\n              title: 'Name',\n              dataIndex: 'name',\n-             filterDropdownVisible: visible,\n+             filterDropdownOpen: visible,\n            }\n          ]}\n        />\n\n-       <Slider tooltipVisible={visible} />\n+       <Slider tooltip={{ open: visible }} />\n      </>\n    );\n  }\n\n  export default App;\n",paraId:18,tocIndex:5},{value:"getPopupContainer",paraId:19,tocIndex:5},{value:": All ",paraId:19,tocIndex:5},{value:"getPopupContainer",paraId:19,tocIndex:5},{value:" are guaranteed to return a unique div. This method will be called repeatedly under React 18 concurrent mode.",paraId:19,tocIndex:5},{value:"Upload List structure changes. ",paraId:20,tocIndex:5},{value:"#34528",paraId:20,tocIndex:5},{value:"Notification",paraId:21,tocIndex:5},{value:"Static methods are no longer allowed to dynamically set ",paraId:22,tocIndex:5},{value:"prefixCls",paraId:22,tocIndex:5},{value:" ",paraId:22,tocIndex:5},{value:"maxCount",paraId:22,tocIndex:5},{value:" ",paraId:22,tocIndex:5},{value:"top",paraId:22,tocIndex:5},{value:" ",paraId:22,tocIndex:5},{value:"bottom",paraId:22,tocIndex:5},{value:" ",paraId:22,tocIndex:5},{value:"getContainer",paraId:22,tocIndex:5},{value:" in ",paraId:22,tocIndex:5},{value:"open",paraId:22,tocIndex:5},{value:", Notification static methods will now have only one instance. If you need a different configuration, use ",paraId:22,tocIndex:5},{value:"useNotification",paraId:22,tocIndex:5},{value:".",paraId:22,tocIndex:5},{value:"close",paraId:22,tocIndex:5},{value:" was renamed to ",paraId:22,tocIndex:5},{value:"destroy",paraId:22,tocIndex:5},{value:" to be consistent with message.",paraId:22,tocIndex:5},{value:"Drawer ",paraId:23,tocIndex:5},{value:"style",paraId:23,tocIndex:5},{value:" & ",paraId:23,tocIndex:5},{value:"className",paraId:23,tocIndex:5},{value:" are migrated to Drawer panel node, the original properties are replaced by ",paraId:23,tocIndex:5},{value:"rootClassName",paraId:23,tocIndex:5},{value:" and ",paraId:23,tocIndex:5},{value:"rootStyle",paraId:23,tocIndex:5},{value:".",paraId:23,tocIndex:5},{value:"The deprecated ",paraId:24,tocIndex:5},{value:"message.warn",paraId:24,tocIndex:5},{value:" in 4.x is now completely removed, please use ",paraId:24,tocIndex:5},{value:"message.warning",paraId:24,tocIndex:5},{value:" instead.",paraId:24,tocIndex:5},{value:"Remove ",paraId:25,tocIndex:6},{value:"locale-provider",paraId:25,tocIndex:6},{value:" Directory. ",paraId:25,tocIndex:6},{value:"LocaleProvider",paraId:25,tocIndex:6},{value:" was removed in v4, please use ",paraId:25,tocIndex:6},{value:"ConfigProvider",paraId:25,tocIndex:6},{value:" instead.",paraId:25,tocIndex:6},{value:"Move Comment component into ",paraId:26,tocIndex:6},{value:"@ant-design/compatible",paraId:26,tocIndex:6},{value:".",paraId:26,tocIndex:6},{value:"Move PageHeader component into ",paraId:27,tocIndex:6},{value:"@ant-design/pro-components",paraId:27,tocIndex:6},{value:".",paraId:27,tocIndex:6},{value:"- import { PageHeader, Comment } from 'antd';\n+ import { Comment } from '@ant-design/compatible';\n+ import { PageHeader } from '@ant-design/pro-components';\n\n  const App: React.FC = () => (\n    <>\n      <PageHeader />\n      <Comment />\n    </>\n  );\n\n  export default App;\n",paraId:28,tocIndex:6},{value:"BackTop is deprecated in ",paraId:29,tocIndex:6},{value:"5.0.0",paraId:29,tocIndex:6},{value:", and is merged into FloatButton.",paraId:29,tocIndex:6},{value:"- import { BackTop } from 'antd';\n+ import { FloatButton } from 'antd';\n\n  const App: React.FC = () => (\n    <div>\n-     <BackTop />\n+     <FloatButton.BackTop />\n    </div>\n  );\n\n  export default App;\n",paraId:30,tocIndex:6},{value:"Use git to save your code and install latest version:",paraId:31,tocIndex:7},{value:"npm install --save antd@5.x\n",paraId:32,tocIndex:7},{value:"If you want to use v4 deprecated component like ",paraId:33,tocIndex:7},{value:"Comment",paraId:33,tocIndex:7},{value:" or ",paraId:33,tocIndex:7},{value:"PageHeader",paraId:33,tocIndex:7},{value:". You can install ",paraId:33,tocIndex:7},{value:"@ant-design/compatible",paraId:33,tocIndex:7},{value:" and ",paraId:33,tocIndex:7},{value:"@ant-design/pro-components",paraId:33,tocIndex:7},{value:" for compatible:",paraId:33,tocIndex:7},{value:"npm install --save @ant-design/compatible@v5-compatible-v4\nnpm install --save @ant-design/pro-components\n",paraId:34,tocIndex:7},{value:"You can manually check the code one by one against the above list for modification. In addition, we also provide a codemod cli tool ",paraId:35,tocIndex:7},{value:"@ant-design/codemod-v5",paraId:35,tocIndex:7},{value:" To help you quickly upgrade to v5.",paraId:35,tocIndex:7},{value:"Before running codemod cli, please submit your local code changes.",paraId:36,tocIndex:7},{value:"# Run directly through npx\nnpx -p @ant-design/codemod-v5 antd5-codemod src\n\n# Or run directly through pnpm\npnpm --package=@ant-design/codemod-v5 dlx antd5-codemod src\n",paraId:37,tocIndex:7},{value:"\n  ",paraId:38},{value:"\n  ",paraId:38},{value:"Note that codemod cannot cover all scenarios, and it is recommended to check for incompatible changes one by one.",paraId:39,tocIndex:7},{value:"If you using antd less variables, you can use compatible package to covert it into v4 less variables and use less-loader to inject them:",paraId:40,tocIndex:8},{value:"const { theme } = require('antd/lib');\nconst { convertLegacyToken, defaultTheme } = require('@ant-design/compatible/lib');\n\nconst { defaultAlgorithm, defaultSeed } = theme;\n\nconst mapV5Token = defaultAlgorithm(defaultSeed);\nconst v5Vars = convertLegacyToken(mapV5Token);\nconst mapV4Token = theme.getDesignToken(defaultTheme);\nconst v4Vars = convertLegacyToken(mapV4Token);\n\n// Webpack Config\nmodule.exports = {\n  // ... other config\n  loader: 'less-loader',\n  options: {\n    lessOptions: {\n      modifyVars: v5Vars, // or v4Vars\n    },\n  },\n};\n",paraId:41,tocIndex:8},{value:"And then remove antd less reference in your less file:",paraId:42,tocIndex:8},{value:"// Your less file\n--  @import (reference) '~antd/es/style/themes/index';\nor\n--  @import '~antd/es/style/some-other-less-file-ref';\n",paraId:43,tocIndex:8},{value:"Remove ",paraId:44,tocIndex:9},{value:"babel-plugin-import",paraId:44,tocIndex:9},{value:" from package.json and modify ",paraId:44,tocIndex:9},{value:".babelrc",paraId:44,tocIndex:9},{value:":",paraId:44,tocIndex:9},{value:'"plugins": [\n- ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"],\n]\n',paraId:45,tocIndex:9},{value:"Umi user can disable by config\uFF1A",paraId:46,tocIndex:9},{value:"// config/config.ts or .umirc\nexport default {\n  antd: {\n-   import: true,\n+   import: false,\n  },\n};\n",paraId:47,tocIndex:9},{value:"Replace moment.js locale with day.js locale:",paraId:48,tocIndex:10},{value:"-   import moment from 'moment';\n+   import dayjs from 'dayjs';\n-   import 'moment/locale/zh-cn';\n+   import 'dayjs/locale/zh-cn';\n\n-   moment.locale('zh-cn');\n+   dayjs.locale('zh-cn');\n",paraId:49,tocIndex:10},{value:"\u{1F6A8} You need to pay attention to the day.js plugin system. If you find that the function originally in moment.js cannot be used in day.js, please refer to the ",paraId:50,tocIndex:10},{value:"day.js plugin document",paraId:50,tocIndex:10},{value:".",paraId:50,tocIndex:10},{value:"If you do not want to replace with day.js, you can use ",paraId:51,tocIndex:10},{value:"@ant-design/moment-webpack-plugin",paraId:51,tocIndex:10},{value:" to keep moment.js:",paraId:51,tocIndex:10},{value:"npm install --save-dev @ant-design/moment-webpack-plugin\n",paraId:52,tocIndex:10},{value:"// webpack-config.js\nimport AntdMomentWebpackPlugin from '@ant-design/moment-webpack-plugin';\n\nmodule.exports = {\n  // ...\n  plugins: [new AntdMomentWebpackPlugin()],\n};\n",paraId:53,tocIndex:10},{value:"If you don't want the style to change after upgrade, we have provided a v4 theme in ",paraId:54,tocIndex:11},{value:"@ant-design/compatible",paraId:54,tocIndex:11},{value:" that can restore v4 style.",paraId:54,tocIndex:11},{value:"\n```sandpack\nconst sandpackConfig = {\n  dependencies: {\n    '@ant-design/compatible': 'v5-compatible-v4',\n  },\n};\n\nimport {\n  defaultTheme,   // Default theme\n  darkTheme,      // Dark theme\n} from '@ant-design/compatible';\nimport { ConfigProvider, Button, Radio, Space } from 'antd';\n\nexport default () => (\n  <ConfigProvider theme={defaultTheme}>\n    <Space direction=\"vertical\">\n      <Button type=\"primary\">Button</Button>\n      <Radio.Group>\n        <Radio value={1}>A</Radio>\n        <Radio value={2}>B</Radio>\n        <Radio value={3}>C</Radio>\n        <Radio value={4}>D</Radio>\n      </Radio.Group>\n    </Space>\n  </ConfigProvider>\n);\n",paraId:55,tocIndex:11},{value:"Ant Design v5 using ",paraId:56,tocIndex:12},{value:":where",paraId:56,tocIndex:12},{value:" css selector to reduce CSS-in-JS hash priority. You can use ",paraId:56,tocIndex:12},{value:"@ant-design/cssinjs",paraId:56,tocIndex:12},{value:" ",paraId:56,tocIndex:12},{value:"StyleProvider",paraId:56,tocIndex:12},{value:" to cancel this function. Please ref ",paraId:56,tocIndex:12},{value:"Compatible adjustment",paraId:57,tocIndex:12},{value:".",paraId:56,tocIndex:12},{value:"We do not recommend multiple versions coexist, it will make the application more complex (such as style override, ConfigProvider not reused, etc.). It's better to use micro-applications such as ",paraId:58,tocIndex:13},{value:"qiankun",paraId:58,tocIndex:13},{value:" for page level development.",paraId:58,tocIndex:13},{value:"$ npm install --save antd-v5@npm:antd@5\n# or\n$ yarn add antd-v5@npm:antd@5\n# or\n$ pnpm add antd-v5@npm:antd@5\n",paraId:59,tocIndex:14},{value:"The package.json will be:",paraId:60,tocIndex:14},{value:'{\n  "antd": "4.x",\n  "antd-v5": "npm:antd@5"\n}\n',paraId:61,tocIndex:14},{value:"Now, antd in your project is still v4, and antd-v5 is v5.",paraId:62,tocIndex:14},{value:"import React from 'react';\nimport { Button as Button4 } from 'antd'; // v4\nimport { Button as Button5 } from 'antd-v5'; // v5\n\nexport default () => (\n  <>\n    <Button4 />\n    <Button5 />\n  </>\n);\n",paraId:63,tocIndex:14},{value:"Then config ",paraId:64,tocIndex:14},{value:"prefixCls",paraId:64,tocIndex:14},{value:" of ConfigProvider to avoid style conflict:",paraId:64,tocIndex:14},{value:"import React from 'react';\nimport { ConfigProvider as ConfigProvider5 } from 'antd-v5';\n\nexport default () => (\n  <ConfigProvider5 prefixCls=\"ant5\">\n    <MyApp />\n  </ConfigProvider5>\n);\n",paraId:65,tocIndex:14},{value:"If you encounter problems during the upgrade, please go to ",paraId:66,tocIndex:15},{value:"GitHub issues",paraId:66,tocIndex:15},{value:" for feedback. We will respond and improve this document as soon as possible.",paraId:66,tocIndex:15}];}}]);