fixed antd warnings

Author: raheeliftikhar5

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

@@ -184,7 +184,7 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
             <CustomSelect
               open={props.open}
               listHeight={props.lineHeight}
-              popupClassName="ob-dropdown-control-select"
+              classNames={{popup: { root: "ob-dropdown-control-select"}}}
               showSearch={props.showSearch}
               filterOption={(input, option) => {
                 if (props.optionFilterProp) {
@@ -216,7 +216,7 @@ export function Dropdown<T extends OptionsType>(props: DropdownProps<T>) {
               allowClear={props.allowClear}
               placeholder={props.placeholder}
               optionLabelProp={props.optionLabelProp}
-              dropdownRender={(menu) =>
+              popupRender={(menu) =>
                 props.preNode ? (
                   <>
                     {props.preNode()}

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

@@ -40,7 +40,7 @@ export function TriggeredDialog(props: {
       <CustomModal
         open={visible}
         title={modalTitle}
-        destroyOnClose
+        destroyOnHidden
         onCancel={() => setVisible(false)}
         showOkButton={false}
         showCancelButton={false}

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

@@ -96,7 +96,7 @@ const CustomSelect = React.forwardRef<HTMLDivElement, CustomSelectProps>((
   return (
     <SelectWrapper className={className} ref={ref} $border={border}>
       <AntdSelect
-        popupClassName={popupClassName}
+        classNames={{popup: { root: popupClassName }}}
         popupMatchSelectWidth={false}
         suffixIcon={<PackUpIcon />}
         {...restProps}

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

@@ -331,7 +331,7 @@ const FormSelect = (props: any) => {
         }}
         popupMatchSelectWidth={false}
         placeholder={props.placeholder}
-        dropdownRender={props.dropdownRender}
+        popupRender={props.dropdownRender}
       >
         {props.options?.map((item: any) => {
           return (

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

@@ -283,7 +283,7 @@ function PhoneNumberInput(props: {
       <CustomSelect
         disabled
         style={{ width: "80px", height: "38px" }}
-        dropdownStyle={{ width: "408px" }}
+        styles={{ popup: { root: { width: "408px" }}}}
         defaultValue={defaultCountryCode}
         optionLabelProp="value"
         onChange={(value) => {

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

@@ -273,7 +273,7 @@ export function JSLibraryModal(props: JSLibraryModalProps) {
           setInstallError(undefined);
           setURL("");
         }}
-        destroyOnClose={true}
+        destroyOnHidden={true}
         showOkButton={false}
         showCancelButton={false}
         width="648px"

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

@@ -65,7 +65,7 @@ export const PermissionDialog = (props: {
   return (
     <StepModal
       open={visible}
-      destroyOnClose
+      destroyOnHidden
       onCancel={() => {
         setActiveStepKey("view");
         onVisibleChange(false);

client/packages/lowcoder/src/components/layout/Layout.tsx

@@ -121,7 +121,7 @@ export function Layout(props: LayoutProps) {
         styles={{
           body: { padding: "0px" }
         }}
-        destroyOnClose // Ensure drawer content is removed when closed
+        destroyOnHidden // Ensure drawer content is removed when closed
       >
         <DrawerContentWrapper>
           <SideBarV2 className={CNSidebar}>

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

@@ -257,7 +257,7 @@ let AutoCompleteCompBase = (function () {
               }
               return false;
             }}
-            dropdownRender={(originNode: ReactNode) => (
+            popupRender={(originNode: ReactNode) => (
               <DropdownStyled $style={props.childrenInputFieldStyle as ChildrenMultiSelectStyleType}>
                 {originNode}
               </DropdownStyled>

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

@@ -164,7 +164,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
       placement={props.labelPosition === 'left' ? "bottomLeft" : "bottomRight"}
       arrow
       disabled={!props.enableDropdownMenu}
-      dropdownRender={() => menu}
+      popupRender={() => menu}
     >
       <Wrapper $iconSize={props.iconSize} $labelPosition={props.labelPosition} $style={props.style}>
         <Badge

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

@@ -125,7 +125,7 @@ const DropdownTmpComp = (function () {
         {props.onlyMenu ? (
           <Dropdown
             disabled={props.disabled}
-            dropdownRender={() => menu}
+            popupRender={() => menu}
             trigger={[props.triggerMode]}
           >
             <Button100 $buttonStyle={props.style as any} disabled={props.disabled}>
@@ -135,7 +135,7 @@ const DropdownTmpComp = (function () {
         ) : (
           <StyledDropdownButton
             disabled={props.disabled}
-            dropdownRender={() => menu}
+            popupRender={() => menu}
             trigger={[props.triggerMode]}
             onClick={() => props.onEvent("click")}
             buttonsRender={([left, right]) => [

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

@@ -214,7 +214,7 @@ const ScannerTmpComp = (function () {
           showCancelButton={false}
           open={showModal}
           maskClosable={props.maskClosable}
-          destroyOnClose
+          destroyOnHidden
           onCancel={() => {
             setShowModal(false);
             props.onEvent("close");

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

@@ -346,7 +346,7 @@ const ImageCaptureModal = (props: {
       showCancelButton={false}
       open={props.showModal}
       maskClosable={true}
-      destroyOnClose
+      destroyOnHidden
       onCancel={props.onModalClose}
     >
       {!!errMessage ? (
@@ -413,7 +413,7 @@ const ImageCaptureModal = (props: {
                     trigger={["click"]}
                     open={dropdownShow}
                     onOpenChange={(value) => setDropdownShow(value)}
-                    dropdownRender={() => (
+                    popupRender={() => (
                       <Menu
                         items={modeList}
                         onClick={(value) =>

client/packages/lowcoder/src/comps/comps/formComp/createForm.tsx

@@ -729,7 +729,7 @@ export const CreateForm = (props: { onCreate: CreateHandler }) => {
       >
         <CustomModal
           open={visible}
-          destroyOnClose={true}
+          destroyOnHidden={true}
           title={trans("formComp.generateForm")}
           footer={null}
           onCancel={handleCancel}

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

@@ -198,7 +198,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
           return (
             <Dropdown
               key={idx}
-              dropdownRender={() => subMenu}
+              popupRender={() => subMenu}
             >
               {item}
             </Dropdown>

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

@@ -289,7 +289,7 @@ function PreloadConfigModal(props: ChildrenInstance) {
       mask={activeKey !== TabKey.CSS}
       open={showScriptsAndStyleModal}
       title={trans("preLoad.scriptsAndStyles")}
-      destroyOnClose
+      destroyOnHidden
       onCancel={() => changeExternalState?.({ showScriptsAndStyleModal: false })}
       showOkButton={false}
       showCancelButton={false}

client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx

@@ -58,7 +58,7 @@ let CascaderBasicComp = (function () {
           $childrenInputFieldStyle={props.childrenInputFieldStyle}
           onFocus={() => props.onEvent("focus")}
           onBlur={() => props.onEvent("blur")}
-          dropdownRender={(menus: React.ReactNode) => (
+          popupRender={(menus: React.ReactNode) => (
             <DropdownRenderStyle $childrenInputFieldStyle={props.childrenInputFieldStyle}>
               {menus}
             </DropdownRenderStyle>

client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

@@ -271,7 +271,7 @@ export const SelectUIView = (
     filterOption={(input, option) =>
       option?.label.toLowerCase().includes(input.toLowerCase())
     }
-    dropdownRender={(originNode: ReactNode) => (
+    popupRender={(originNode: ReactNode) => (
       <DropdownStyled $style={props.childrenInputFieldStyle as ChildrenMultiSelectStyleType}>
         {originNode}
       </DropdownStyled>

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnDropdownComp.tsx

@@ -127,7 +127,7 @@ const DropdownView = React.memo((props: {
     <Dropdown
       trigger={["click"]}
       placement="bottomRight"
-      dropdownRender={() => menu}
+      popupRender={() => menu}
     >
       <StyledButton
         type={props.buttonType}

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnStatusComp.tsx

@@ -144,12 +144,12 @@ const StatusEdit = React.memo((props: StatusEditPropsType) => {
         showSearch
         onSearch={handleSearch}
         onChange={handleChange}
-        dropdownRender={(originNode: ReactNode) => (
+        popupRender={(originNode: ReactNode) => (
           <DropdownStyled>
             <ScrollBar style={{ maxHeight: "256px" }}>{originNode}</ScrollBar>
           </DropdownStyled>
         )}
-        dropdownStyle={{ marginTop: "7px", padding: "8px 0 6px 0" }}
+        styles={{ popup: { root: { marginTop: "7px", padding: "8px 0 6px 0" }}}}
         onBlur={handleBlur}
         onFocus={handleFocus}
         onClick={handleClick}

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx

@@ -265,12 +265,12 @@ const TagEdit = React.memo((props: TagEditPropsType) => {
         suffixIcon={<PackUpIcon />}
         onSearch={handleSearch}
         onChange={handleChange}
-        dropdownRender={(originNode: ReactNode) => (
+        popupRender={(originNode: ReactNode) => (
           <DropdownStyled>
             <ScrollBar style={{ maxHeight: "256px" }}>{originNode}</ScrollBar>
           </DropdownStyled>
         )}
-        dropdownStyle={{ marginTop: "7px", padding: "8px 0 6px 0" }}
+        styles={{ popup: { root: { marginTop: "7px", padding: "8px 0 6px 0" }}}}
         onFocus={() => {
           if (mountedRef.current) {
             setOpen(true);

client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx

@@ -69,7 +69,7 @@ export function multiSelectControl<T extends OptionsType>(
             <DropdownContainer $placement={placement}>
               <CustomSelect
                 mode={"multiple"}
-                popupClassName="ob-dropdown-control-select"
+                classNames={{popup: {root: "ob-dropdown-control-select"}}}
                 filterOption={(input, option) => {
                   if (!option?.value) {
                     return false;

client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx

@@ -164,8 +164,8 @@ export const ResourceDropdown = (props: ResourceDropdownProps) => {
           }
           props.changeResource(datasourceId, datasourceType);
         }}
-        onDropdownVisibleChange={onDropdownVisibleChange}
-        dropdownRender={
+        onOpenChange={onDropdownVisibleChange}
+        popupRender={
           Object.keys(dataSourceTypesMap).length > 0
             ? (menu) => (
                 <DropdownWrapper>

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

@@ -244,7 +244,7 @@ export const CreateDropdown = (props: { defaultVisible?: boolean; mode: HomeLayo
         trigger={["hover"]}
         getPopupContainer={(node) => node}
         onOpenChange={() => setCreateDropdownVisible(!createDropdownVisible)}
-        dropdownRender={() => (
+        popupRender={() => (
           <CreateDropdownMenu
             items={[
               getCreateMenuItem(HomeResTypeEnum.Application, mode),

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

@@ -56,7 +56,7 @@ export const MoveToFolderModal = (props: { source?: HomeRes; onClose: () => void
     <CustomModal
       open={!!props.source}
       onCancel={props.onClose}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       width="408px"
       centered={true}
       title={trans("home.moveToFolder")}

client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx

@@ -147,7 +147,7 @@ function CreateApiKeyModal(props: CreateApiKeyModalProps) {
       }}
       onOk={handleOk}
       onCancel={handleCancel}
-      destroyOnClose
+      destroyOnHidden
       afterClose={() => form.resetFields()}
     >
       <FormStyled

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

@@ -38,7 +38,7 @@ export function CopyModal(props: CopyModalProps) {
       title={trans("home.copyModalTitle", {name: appName})}
       open={visible}
       okButtonProps={{ disabled: !copyName }}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       onCancel={close}
       showCancelButton
       showOkButton

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

@@ -623,7 +623,7 @@ export default function Header(props: HeaderProps) {
           className="cypress-header-dropdown"
           placement="bottomRight"
           trigger={["click"]}
-          dropdownRender={() => (
+          popupRender={() => (
             <DropdownMenuStyled
               style={{ minWidth: "110px", borderRadius: "4px" }}
               onClick={(e) => {

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

@@ -131,7 +131,7 @@ export function HeaderStartDropdown(props: { setEdit: () => void, isViewMarketpl
         placement="bottomLeft"
         trigger={["click"]}
         disabled={showAppSnapshot}
-        dropdownRender={() => (
+        popupRender={() => (
           <DropdownMenuStyled
             style={{ minWidth: "136px", maxWidth: "288px", borderRadius: "4px" }}
             onClick={(e) => {

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

@@ -454,7 +454,7 @@ function HelpDropdownComp(props: HelpDropdownProps) {
         <ShortcutListPopup setShowShortcutList={props.setShowShortcutList} />
       )}
       <Dropdown
-        dropdownRender={() => overlayMenus}
+        popupRender={() => overlayMenus}
         placement="topRight"
         trigger={["click"]}
         open={showDropdown}

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

@@ -148,7 +148,7 @@ function InviteDialog(props: {
       <CustomModal
         open={inviteDialogVisible}
         title={trans("memberSettings.inviteUser")}
-        destroyOnClose
+        destroyOnHidden
         onCancel={() => setInviteDialogVisible(false)}
         showOkButton={false}
         showCancelButton={false}

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

@@ -253,7 +253,7 @@ export default function ProfileDropdown(props: DropDownProps) {
   return (
     <>
       <StyledDropdown
-        dropdownRender={() => menu}
+        popupRender={() => menu}
         trigger={["click"]}
       >
         <div>

client/packages/lowcoder/src/pages/datasource/datasourceList.tsx

@@ -164,7 +164,7 @@ export const DatasourceList = () => {
           open={isCreateFormShow}
           onCancel={() => showCreateForm(false)}
           activeStepKey={"type"}
-          destroyOnClose={true}
+          destroyOnHidden={true}
           width="888px"
           steps={[
             {

client/packages/lowcoder/src/pages/datasource/datasourceModal.tsx

@@ -339,7 +339,7 @@ export function CreateDataSourceModal(props: CreateDataSourceModalProps) {
   return (
     <StepModal
       {...otherProps}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       onStepChange={setActiveStepKey}
       activeStepKey={activeStepKey}
       width="888px"

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

@@ -475,7 +475,7 @@ export const LeftContent = React.memo((props: LeftContentProps) => {
             onOk={() => setShowData([])}
             cancelButtonProps={{ style: { display: 'none' } }}
             closable={false}
-            destroyOnClose={true}
+            destroyOnHidden={true}
             maskClosable={false}
             okText={trans("modalComp.close")}
           >

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

@@ -538,7 +538,7 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
         <div style={{margin:"10px 0px"}}> 
           <Flex gap="small" vertical>
             <CustomDropdown
-              dropdownRender={() => (
+              popupRender={() => (
                 <Menu
                   items={items}
                   onClick={({ key }) => {

client/packages/lowcoder/src/pages/queryLibrary/QueryLibraryEditor.tsx

@@ -315,7 +315,7 @@ const PublishModal = (props: {
     <CustomModal
       open={props.visible}
       onCancel={props.onClose}
-      destroyOnClose={true}
+      destroyOnHidden={true}
       width="600px"
       title={trans("queryLibrary.publishNewVersion")}
       footer={

client/packages/lowcoder/src/pages/setting/advanced/AdvancedSetting.tsx

@@ -173,7 +173,7 @@ export function AdvancedSetting() {
             allowClear={true}
             showSearch={true}
             style={{ width: "264px", height: "32px", marginBottom: 12 }}
-            dropdownStyle={{ width: "264px" }}
+            styles={{ popup: { root: { width: "264px" }}}}
             value={settings.defaultHomePage}
             onChange={(value: string) => {
               setSettings((v) => ({ ...v, defaultHomePage: value }));

client/packages/lowcoder/src/pages/setting/environments/components/DeployItemModal.tsx

@@ -75,7 +75,7 @@ function DeployItemModal({
       open={visible}
       onCancel={onClose}
       footer={null}
-      destroyOnClose
+      destroyOnHidden
     >
       {isLoading ? (
         <div style={{ textAlign: 'center', padding: '20px' }}>