upgrade antd version to 5.19.4

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/Dropdown.tsx

@@ -235,7 +235,7 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
         <SegmentedWrapper $placement={placement}>
           <Segmented
             block={true}
-            onChange={(value) => props.onChange(value.toString())}
+            onChange={(value) => props.onChange(String(value))}
             defaultValue={props.defaultValue}
             value={props.value}
             options={props.options as any}

client/packages/lowcoder-design/src/components/button.tsx

@@ -181,7 +181,7 @@ const TacoButton = forwardRef(
     props: Omit<ButtonProps, "type"> & {
       buttonType?: TacoButtonType;
     },
-    ref: React.Ref<HTMLElement>
+    ref: React.Ref<HTMLButtonElement>
   ) => {
     const { buttonType, ...restProps } = props;
     let loadingBackground;

client/packages/lowcoder/package.json

@@ -37,7 +37,7 @@
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-virtualized": "^9.21.21",
     "animate.css": "^4.1.1",
-    "antd": "5.13.2",
+    "antd": "^5.19.4",
     "axios": "^1.6.2",
     "buffer": "^6.0.3",
     "clsx": "^2.0.0",

client/packages/lowcoder/src/components/Segmented.tsx

@@ -1,11 +1,12 @@
 import { default as AntdSegmented } from "antd/es/segmented";
+import type { SegmentedProps } from "antd/es/segmented";
 import styled from "styled-components";
 
-type PropsType<T extends React.ForwardRefExoticComponent<any>> =
-  T extends React.ForwardRefExoticComponent<infer R> ? R : never;
-type SegmentedProps = PropsType<typeof AntdSegmented>;
+// type PropsType<T extends React.ForwardRefExoticComponent<any>> =
+//   T extends React.ForwardRefExoticComponent<infer R> ? R : never;
+// type SegmentedProps = PropsType<typeof AntdSegmented>;
 
-const StyledSegmented = styled(AntdSegmented)<PropsType<typeof AntdSegmented>>`
+const StyledSegmented = styled(AntdSegmented)<SegmentedProps>`
   width: 100%;
   height: 28px;
   border-radius: 6px;

client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx

@@ -21,7 +21,7 @@ import { trans } from "i18n";
 import React, { Suspense, useEffect, useRef, useState, useContext } from "react";
 import { arrayStringExposingStateControl } from "comps/controls/codeStateControl";
 import { BoolControl } from "comps/controls/boolControl";
-import type { ItemType } from "antd/es/menu/hooks/useItems";
+import type { ItemType } from "antd/es/menu/interface";
 import { RefControl } from "comps/controls/refControl";
 import { EditorContext } from "comps/editorState"; 
 import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";

client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx

@@ -45,10 +45,14 @@ import { dateRefMethods, disabledTime, handleDateChange } from "comps/comps/date
 import { DateUIView } from "./dateUIView";
 import { useIsMobile } from "util/hooks";
 import { RefControl } from "comps/controls/refControl";
-import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
+// import { CommonPickerMethods } from "antd/es/date-picker/generatePicker/interface";
+import type { DatePickerType } from "antd/es/date-picker";
 import { DateRangeUIView } from "comps/comps/dateComp/dateRangeUIView";
 import { EditorContext } from "comps/editorState";
 import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
+import { DatePicker } from "antd";
+
+const CommonPickerMethods = _.pick(DatePicker, 'ref');
 
 const defaultStyle = {
   borderStyle: 'solid',
@@ -184,7 +188,7 @@ export const datePickerControl = new UICompBuilder(childrenMap, (props, dispatch
     animationStyle:props.animationStyle,
     children: (
       <DateUIView
-        viewRef={props.viewRef}
+        // viewRef={props.viewRef}
         disabledTime={() => disabledTime(props.minTime, props.maxTime)}
         $style={props.inputFieldStyle}
         disabled={props.disabled}

client/packages/lowcoder/src/pages/ApplicationV2/CreateDropdown.tsx

@@ -11,7 +11,7 @@ import {
   TacoButton,
 } from "lowcoder-design";
 import React, { FunctionComponent, useState } from "react";
-import type { ItemType } from "antd/es/menu/hooks/useItems";
+import type { ItemType } from "antd/es/menu/interface";
 import { HomeResInfo } from "../../util/homeResUtils";
 import { createAppItemClass } from "../tutorials/HomeTutorialsV2";
 import styled from "styled-components";

client/packages/lowcoder/src/pages/common/profileDropdown.tsx

@@ -27,7 +27,7 @@ import { trans } from "i18n";
 import { showSwitchOrg } from "@lowcoder-ee/pages/common/customerService";
 import { checkIsMobile } from "util/commonUtils";
 import { selectSystemConfig } from "redux/selectors/configSelectors";
-import type { ItemType } from "antd/es/menu/hooks/useItems";
+import type { ItemType } from "antd/es/menu/interface";
 
 const { Item } = Menu;
 

client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx

@@ -39,7 +39,6 @@ import {
   saveCollisionStatus,
 } from "util/localStorageUtil";
 import { default as DownOutlined } from "@ant-design/icons/DownOutlined";
-import type { ItemType } from "antd/es/menu/hooks/useItems";
 import ThemeSettingsSelector from "components/ThemeSettingsSelector";
 
 export type DisabledCollisionStatus = "true" | "false"; // "true" means collision is not enabled - Layering works, "false" means collision is enabled - Layering does not work

client/packages/lowcoder/src/pages/setting/theme/themeList.tsx

@@ -146,7 +146,7 @@ function ThemeList(props: ThemeListProp) {
       <Column
         key="id"
         dataIndex="id"
-        render={(value, theme) =>
+        render={(value, theme: ThemeType) =>
           isAdmin && (
             <ControlCol>
               <EditButton

client/packages/lowcoder/src/pages/userAuth/authComponents.tsx

@@ -175,7 +175,7 @@ export const ConfirmButton = (props: {
   style?: CSSProperties;
   loading?: boolean;
 }) => {
-  const ref = useRef<HTMLElement>(null);
+  const ref = useRef<HTMLButtonElement>(null);
   return (
     <>
       <ReactHotkeys