refinedev · BatuhanW · Jun 3, 2024 · May 8, 2024 · May 17, 2024 · May 23, 2024
diff --git a/.changeset/bright-moles-turn.md b/.changeset/bright-moles-turn.md
@@ -0,0 +1,6 @@
+---
+"@refinedev/inferencer": patch
+"@refinedev/antd": patch
+---
+
+lock the `ant-design/icons` version to `5.0.1`
diff --git a/documentation/blog/2023-04-11-refine-invoicer-2.md b/documentation/blog/2023-04-11-refine-invoicer-2.md
@@ -84,7 +84,7 @@ If we open the app in our code editor, we can see that **Refine**'s optional pac
 
 ```json title="package.json"
 "dependencies": {
- "@ant-design/icons": "^5.0.1",
+ "@ant-design/icons": "5.0.1",
  "@react-pdf/renderer": "^3.1.8",
  // highlight-start
  "@refinedev/antd": "^5.3.10",

diff --git a/examples/app-crm-minimal/package.json b/examples/app-crm-minimal/package.json
@@ -15,7 +15,7 @@
  },
  "dependencies": {
  "@ant-design/cssinjs": "^1.17.2",
- "@ant-design/icons": "^5.0.1",
+ "@ant-design/icons": "5.0.1",
  "@ant-design/plots": "^1.2.5",
  "@dnd-kit/core": "^6.0.8",
  "@dnd-kit/modifiers": "^6.0.1",

diff --git a/examples/app-crm-minimal/src/components/icon/TextIcon.tsx b/examples/app-crm-minimal/src/components/icon/TextIcon.tsx
@@ -28,5 +28,6 @@ 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} />
 );
diff --git a/examples/app-crm-minimal/src/components/layout/account-settings/index.tsx b/examples/app-crm-minimal/src/components/layout/account-settings/index.tsx
@@ -82,6 +82,7 @@ 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()}
  />

diff --git a/examples/app-crm-minimal/src/components/layout/current-user/index.tsx b/examples/app-crm-minimal/src/components/layout/current-user/index.tsx
@@ -41,6 +41,7 @@ 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

diff --git a/examples/app-crm-minimal/src/components/tags/contact-status-tag.tsx b/examples/app-crm-minimal/src/components/tags/contact-status-tag.tsx
@@ -22,27 +22,33 @@ 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;

diff --git a/examples/app-crm-minimal/src/components/tags/quote-status-tag.tsx b/examples/app-crm-minimal/src/components/tags/quote-status-tag.tsx
@@ -15,14 +15,17 @@ 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 />,
  },
 };

diff --git a/examples/app-crm-minimal/src/config/resources.tsx b/examples/app-crm-minimal/src/config/resources.tsx
@@ -12,6 +12,7 @@ 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 />,
  },
  },
@@ -23,6 +24,7 @@ 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 />,
  },
  },
@@ -33,6 +35,7 @@ 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 />,
  },
  },

diff --git a/examples/app-crm-minimal/src/routes/companies/edit/contacts-table.tsx b/examples/app-crm-minimal/src/routes/companies/edit/contacts-table.tsx
@@ -72,6 +72,7 @@ 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>
@@ -110,6 +111,7 @@ 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}>
@@ -120,6 +122,7 @@ 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}>
@@ -153,11 +156,13 @@ 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>

diff --git a/examples/app-crm-minimal/src/routes/companies/list/index.tsx b/examples/app-crm-minimal/src/routes/companies/list/index.tsx
@@ -102,6 +102,7 @@ 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}>

diff --git a/examples/app-crm-minimal/src/routes/dashboard/components/deals-chart/index.tsx b/examples/app-crm-minimal/src/routes/dashboard/components/deals-chart/index.tsx
@@ -77,6 +77,7 @@ 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

diff --git a/examples/app-crm-minimal/src/routes/dashboard/components/latest-activities/index.tsx b/examples/app-crm-minimal/src/routes/dashboard/components/latest-activities/index.tsx
@@ -89,6 +89,7 @@ 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

diff --git a/examples/app-crm-minimal/src/routes/dashboard/components/total-count-card/index.tsx b/examples/app-crm-minimal/src/routes/dashboard/components/total-count-card/index.tsx
@@ -154,6 +154,7 @@ 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={{
@@ -191,6 +192,7 @@ 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={{
@@ -232,6 +234,7 @@ 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={{

diff --git a/examples/app-crm-minimal/src/routes/dashboard/components/upcoming-events/index.tsx b/examples/app-crm-minimal/src/routes/dashboard/components/upcoming-events/index.tsx
@@ -53,6 +53,7 @@ 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

diff --git a/examples/app-crm-minimal/src/routes/tasks/components/button/add-card-button.tsx b/examples/app-crm-minimal/src/routes/tasks/components/button/add-card-button.tsx
@@ -16,6 +16,7 @@ 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",

diff --git a/examples/app-crm-minimal/src/routes/tasks/edit/forms/stage/stage-form.tsx b/examples/app-crm-minimal/src/routes/tasks/edit/forms/stage/stage-form.tsx
@@ -76,6 +76,7 @@ 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

diff --git a/examples/app-crm-minimal/src/routes/tasks/edit/index.tsx b/examples/app-crm-minimal/src/routes/tasks/edit/index.tsx
@@ -66,6 +66,7 @@ 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"
  >
@@ -80,6 +81,7 @@ 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"
  >
@@ -94,6 +96,7 @@ 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"
  >

diff --git a/examples/app-crm-minimal/src/routes/tasks/list/kanban/card.tsx b/examples/app-crm-minimal/src/routes/tasks/list/kanban/card.tsx
@@ -53,6 +53,7 @@ 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");
@@ -62,6 +63,7 @@ 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({
@@ -127,6 +129,7 @@ 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)",
@@ -159,6 +162,7 @@ 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",

diff --git a/examples/app-crm-minimal/src/routes/tasks/list/kanban/column.tsx b/examples/app-crm-minimal/src/routes/tasks/list/kanban/column.tsx
@@ -69,6 +69,7 @@ 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}
  />
@@ -125,13 +126,15 @@ 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>

diff --git a/examples/app-crm/package.json b/examples/app-crm/package.json
@@ -14,7 +14,7 @@
  "test": "jest --passWithNoTests --runInBand"
  },
  "dependencies": {
- "@ant-design/icons": "^5.0.1",
+ "@ant-design/icons": "5.0.1",
  "@ant-design/plots": "^1.2.5",
  "@dnd-kit/core": "^6.0.8",
  "@dnd-kit/modifiers": "^6.0.1",

diff --git a/examples/app-crm/src/components/calendar/upcoming-events/index.tsx b/examples/app-crm/src/components/calendar/upcoming-events/index.tsx
@@ -109,6 +109,7 @@ export const CalendarUpcomingEvents: React.FC<CalendarUpcomingEventsProps> = ({
  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
@@ -117,6 +118,7 @@ export const CalendarUpcomingEvents: React.FC<CalendarUpcomingEventsProps> = ({
  }
  extra={
  showGoToListButton && (
+ // @ts-expect-error Ant Design Icon's v5.0.1 has an issue with @types/react@^18.2.66
  <Button onClick={() => list("events")} icon={<RightCircleOutlined />}>
  See calendar
  </Button>

diff --git a/examples/app-crm/src/components/icon/TextIcon.tsx b/examples/app-crm/src/components/icon/TextIcon.tsx
@@ -28,5 +28,6 @@ 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} />
 );