chore(antd): update @ant-design/icons and @ant-design/pro-layout dependencies

.changeset/early-pets-march.md

@@ -0,0 +1,15 @@
+---
+"@refinedev/antd": minor
+---
+
+chore: update `@ant-design/icons` and `@ant-design/pro-layout` versions
+
+Updated previously pinned versions of `@ant-design/icons` from `5.0.1` and `@ant-design/pro-layout` from `7.17.12` to latest versions. This minor update resolves the previous issues with `React@18` types and conflicting type ranges with `@ant-design/pro-layout` package.
+
+After `@ant-design/icons` version `5.4.0` build issues and type issues are resolved. Following this release `@ant-design/pro-layout` also updated its dependency range to match the latest `@ant-design/icons` version.
+
+Previously `@ant-design/icons` were pinned to `5.0.1` and recommended to pin in projects as well. After this update, you may also need to update the `@ant-design/icons` version in your project to match the latest version. (A range above `^5.5.1` is required to match `@refinedev/antd`).
+
+[Resolves #6363](https://github.com/refinedev/refine/issues/6363)
+[Resolves #5931 - previously resolved by #5934](https://github.com/refinedev/refine/issues/5931)
+[Accompanies #6354 - `@ant-design/pro-layout` also depends on `express` dependency and updated its version in the latest release](https://github.com/refinedev/refine/pull/6354)

.changeset/hip-spies-end.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/inferencer": patch
+---
+
+chore: update `@ant-design/icons` version to match `@refinedev/antd`.
+
+This is a patch release to update the `@ant-design/icons` version to match the `@refinedev/antd` version. Previously `@ant-design/icons` were pinned to `5.0.1` version to avoid conflicts with `React@18` and `@ant-design/pro-layout` packages. After `5.4.0` these issues are resolved and we can safely update the version to latest range.

examples/app-crm-minimal/package.json

@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.17.2",
-    "@ant-design/icons": "5.0.1",
+    "@ant-design/icons": "^5.5.1",
     "@ant-design/plots": "^1.2.5",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",

examples/app-crm-minimal/src/components/icon/TextIcon.tsx

@@ -28,6 +28,5 @@ export const TextIconSvg = () => (
 );
 
 export const TextIcon = (props: Partial<CustomIconComponentProps>) => (
-  // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
   <Icon component={TextIconSvg} {...props} />
 );

examples/app-crm-minimal/src/components/layout/account-settings/index.tsx

@@ -86,7 +86,6 @@ export const AccountSettings = ({ opened, setOpened, userId }: Props) => {
         <Text strong>Account Settings</Text>
         <Button
           type="text"
-          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           icon={<CloseOutlined />}
           onClick={() => closeModal()}
         />

examples/app-crm-minimal/src/components/layout/current-user/index.tsx

@@ -41,7 +41,6 @@ export const CurrentUser = () => {
       >
         <Button
           style={{ textAlign: "left" }}
-          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           icon={<SettingOutlined />}
           type="text"
           block

examples/app-crm-minimal/src/components/tags/contact-status-tag.tsx

@@ -22,33 +22,27 @@ export const ContactStatusTag = ({ status }: Props) => {
     case "NEW":
     case "CONTACTED":
     case "INTERESTED":
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon = <PlayCircleOutlined />;
       color = "cyan";
       break;
     case "UNQUALIFIED":
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon = <PlayCircleOutlined />;
       color = "red";
       break;
     case "QUALIFIED":
     case "NEGOTIATION":
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon = <PlayCircleFilled />;
       color = "green";
       break;
     case "LOST":
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon = <PlayCircleFilled />;
       color = "red";
       break;
     case "WON":
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon = <CheckCircleOutlined />;
       color = "green";
       break;
     case "CHURNED":
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon = <MinusCircleOutlined />;
       color = "red";
       break;

examples/app-crm-minimal/src/components/tags/quote-status-tag.tsx

@@ -15,17 +15,14 @@ const variant: Record<
 > = {
   DRAFT: {
     color: "blue",
-    // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
     icon: <ExpandOutlined />,
   },
   SENT: {
     color: "cyan",
-    // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
     icon: <SendOutlined />,
   },
   ACCEPTED: {
     color: "green",
-    // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
     icon: <CheckCircleOutlined />,
   },
 };

examples/app-crm-minimal/src/config/resources.tsx

@@ -12,7 +12,6 @@ export const resources: IResourceItem[] = [
     list: "/",
     meta: {
       label: "Dashboard",
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon: <DashboardOutlined />,
     },
   },
@@ -24,7 +23,6 @@ export const resources: IResourceItem[] = [
     edit: "/companies/edit/:id",
     meta: {
       label: "Companies",
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon: <ShopOutlined />,
     },
   },
@@ -35,7 +33,6 @@ export const resources: IResourceItem[] = [
     edit: "/tasks/edit/:id",
     meta: {
       label: "Tasks",
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon: <ProjectOutlined />,
     },
   },

examples/app-crm-minimal/src/routes/companies/edit/contacts-table.tsx

@@ -72,7 +72,6 @@ export const CompanyContactsTable = () => {
       bodyStyle={{ padding: 0 }}
       title={
         <Space size="middle">
-          {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
           <TeamOutlined />
           <Text>Contacts</Text>
         </Space>
@@ -111,7 +110,6 @@ export const CompanyContactsTable = () => {
               </Space>
             );
           }}
-          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           filterIcon={<SearchOutlined />}
           filterDropdown={(props) => (
             <FilterDropdown {...props}>
@@ -122,7 +120,6 @@ export const CompanyContactsTable = () => {
         <Table.Column
           title="Title"
           dataIndex="jobTitle"
-          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           filterIcon={<SearchOutlined />}
           filterDropdown={(props) => (
             <FilterDropdown {...props}>
@@ -156,13 +153,11 @@ export const CompanyContactsTable = () => {
                 <Button
                   size="small"
                   href={`mailto:${record.email}`}
-                  // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
                   icon={<MailOutlined />}
                 />
                 <Button
                   size="small"
                   href={`tel:${record.phone}`}
-                  // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
                   icon={<PhoneOutlined />}
                 />
               </Space>

examples/app-crm-minimal/src/routes/companies/list/index.tsx

@@ -102,7 +102,6 @@ export const CompanyListPage = ({ children }: React.PropsWithChildren) => {
             dataIndex="name"
             title="Company title"
             defaultFilteredValue={getDefaultFilter("id", filters)}
-            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
             filterIcon={<SearchOutlined />}
             filterDropdown={(props) => (
               <FilterDropdown {...props}>

examples/app-crm-minimal/src/routes/dashboard/components/deals-chart/index.tsx

@@ -77,7 +77,6 @@ export const DashboardDealsChart = () => {
             gap: "8px",
           }}
         >
-          {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
           <DollarOutlined />
           <Text size="sm" style={{ marginLeft: ".5rem" }}>
             Deals

examples/app-crm-minimal/src/routes/dashboard/components/latest-activities/index.tsx

@@ -89,7 +89,6 @@ export const DashboardLatestActivities = ({ limit = 5 }: Props) => {
             gap: "8px",
           }}
         >
-          {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
           <UnorderedListOutlined />
           <Text size="sm" style={{ marginLeft: ".5rem" }}>
             Latest activities

examples/app-crm-minimal/src/routes/dashboard/components/total-count-card/index.tsx

@@ -154,7 +154,6 @@ const variants: {
     secondaryColor: "#BAE0FF",
     icon: (
       <IconWrapper color="#E6F4FF">
-        {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
         <ShopOutlined
           className="md"
           style={{
@@ -192,7 +191,6 @@ const variants: {
     secondaryColor: "#D9F7BE",
     icon: (
       <IconWrapper color="#F6FFED">
-        {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
         <TeamOutlined
           className="md"
           style={{
@@ -234,7 +232,6 @@ const variants: {
     secondaryColor: "#FFD8BF",
     icon: (
       <IconWrapper color="#FFF2E8">
-        {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
         <AuditOutlined
           className="md"
           style={{

examples/app-crm-minimal/src/routes/dashboard/components/upcoming-events/index.tsx

@@ -53,7 +53,6 @@ export const CalendarUpcomingEvents = () => {
             gap: "8px",
           }}
         >
-          {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
           <CalendarOutlined />
           <Text size="sm" style={{ marginLeft: ".7rem" }}>
             Upcoming events

examples/app-crm-minimal/src/routes/tasks/components/button/add-card-button.tsx

@@ -16,7 +16,6 @@ export const KanbanAddCardButton = ({
   return (
     <Button
       size="large"
-      // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
       icon={<PlusSquareOutlined className="md" />}
       style={{
         margin: "16px",

examples/app-crm-minimal/src/routes/tasks/edit/forms/stage/stage-form.tsx

@@ -76,7 +76,6 @@ export const StageForm = ({ isLoading }: Props) => {
         {...formProps}
       >
         <Space size={5}>
-          {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
           <FlagOutlined />
           <Form.Item
             noStyle

examples/app-crm-minimal/src/routes/tasks/edit/index.tsx

@@ -66,7 +66,6 @@ export const TasksEditPage = () => {
         setActive={setActiveKey}
         fallback={<DescriptionHeader description={description} />}
         isLoading={isLoading}
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<AlignLeftOutlined />}
         label="Description"
       >
@@ -81,7 +80,6 @@ export const TasksEditPage = () => {
         setActive={setActiveKey}
         fallback={<DueDateHeader dueData={dueDate} />}
         isLoading={isLoading}
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<FieldTimeOutlined />}
         label="Due date"
       >
@@ -96,7 +94,6 @@ export const TasksEditPage = () => {
         setActive={setActiveKey}
         fallback={<UsersHeader users={users} />}
         isLoading={isLoading}
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon={<UsergroupAddOutlined />}
         label="Users"
       >

examples/app-crm-minimal/src/routes/tasks/list/kanban/card.tsx

@@ -53,7 +53,6 @@ export const ProjectCard = ({
       {
         label: "View card",
         key: "1",
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon: <EyeOutlined />,
         onClick: () => {
           edit("tasks", id, "replace");
@@ -63,7 +62,6 @@ export const ProjectCard = ({
         danger: true,
         label: "Delete card",
         key: "2",
-        // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
         icon: <DeleteOutlined />,
         onClick: () => {
           mutate({
@@ -129,7 +127,6 @@ export const ProjectCard = ({
               type="text"
               shape="circle"
               icon={
-                // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
                 <MoreOutlined
                   style={{
                     transform: "rotate(90deg)",
@@ -162,7 +159,6 @@ export const ProjectCard = ({
           {dueDateOptions && (
             <Tag
               icon={
-                // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
                 <ClockCircleOutlined
                   style={{
                     fontSize: "12px",

examples/app-crm-minimal/src/routes/tasks/list/kanban/column.tsx

@@ -69,7 +69,6 @@ export const KanbanColumn = ({
           </Space>
           <Button
             shape="circle"
-            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
             icon={<PlusOutlined />}
             onClick={onAddClickHandler}
           />
@@ -126,15 +125,13 @@ export const KanbanColumnSkeleton = ({ children }: React.PropsWithChildren) => {
             type="text"
             shape="circle"
             icon={
-              // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
               <MoreOutlined
                 style={{
                   transform: "rotate(90deg)",
                 }}
               />
             }
           />
-          {/* @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66 */}
           <Button disabled shape="circle" icon={<PlusOutlined />} />
         </Space>
       </div>

examples/auth-antd/package.json

@@ -22,7 +22,7 @@
     ]
   },
   "dependencies": {
-    "@ant-design/icons": "5.0.1",
+    "@ant-design/icons": "^5.5.1",
     "@refinedev/antd": "^5.43.1",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.55.0",

examples/auth-antd/src/App.tsx

@@ -175,7 +175,6 @@ const App: React.FC = () => {
                 list: "/",
                 meta: {
                   label: "Dashboard",
-                  // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
                   icon: <DashboardOutlined />,
                 },
               },
@@ -236,7 +235,6 @@ const App: React.FC = () => {
                           name: "google",
                           label: "Sign in with Google",
                           icon: (
-                            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
                             <GoogleOutlined
                               style={{
                                 fontSize: 24,
@@ -249,7 +247,6 @@ const App: React.FC = () => {
                           name: "github",
                           label: "Sign in with GitHub",
                           icon: (
-                            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
                             <GithubOutlined
                               style={{
                                 fontSize: 24,
@@ -272,7 +269,6 @@ const App: React.FC = () => {
                           name: "google",
                           label: "Sign in with Google",
                           icon: (
-                            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
                             <GoogleOutlined
                               style={{
                                 fontSize: 24,
@@ -285,7 +281,6 @@ const App: React.FC = () => {
                           name: "github",
                           label: "Sign in with GitHub",
                           icon: (
-                            // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
                             <GithubOutlined
                               style={{
                                 fontSize: 24,

examples/auth-otp/package.json

@@ -22,7 +22,7 @@
     ]
   },
   "dependencies": {
-    "@ant-design/icons": "5.0.1",
+    "@ant-design/icons": "^5.5.1",
     "@refinedev/antd": "^5.43.1",
     "@refinedev/cli": "^2.16.39",
     "@refinedev/core": "^4.55.0",

examples/auth-otp/src/pages/login/login.tsx

@@ -46,7 +46,6 @@ export const Login: React.FC = () => {
         ]}
       >
         <Input
-          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           prefix={<PhoneOutlined style={{ color: "#00000040" }} />}
           maxLength={10}
           placeholder="(___)___-____"
@@ -81,7 +80,6 @@ export const Login: React.FC = () => {
         <Input
           type="password"
           maxLength={4}
-          // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
           prefix={<NumberOutlined style={{ color: "#00000040" }} />}
         />
       </Form.Item>