@tencentcloud/chat-uikit-react 2.1.0 → 2.1.3

package/src/components/ConversationCreate/ConversationCreatGroupDetail.tsx

@@ -32,14 +32,14 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
   const { t } = useTranslation();
   const { setActiveConversation, myProfile } = useTUIKitContext();
   const temp = [...profileList];
-  temp.unshift(myProfile);
+  myProfile && temp.unshift(myProfile);
   const name = temp.map((item) => item.nick || item.userID).toString();
   const [groupName, setGroupName] = useState(
     name.length >= 15 ? `${name.slice(0, 12)}...` : name,
   );
   const [groupID, setGroupID] = useState('');
-  const [groupType, setGroupType] = useState('Work');
-  const groupInfoChange = (e, type) => {
+  const [groupType, setGroupType] = useState<string>('Work');
+  const groupInfoChange = (e: any, type: string) => {
     const { value } = e.target;
     switch (type) {
       case 'name':
@@ -57,7 +57,7 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
   const showGroupTypeInfo = () => {
     setPageState(PageStateTypes.GROUP_TYPE);
   };
-  const getDefaultAvatar = (type) => {
+  const getDefaultAvatar = (type: string) => {
     switch (type) {
       case 'Work':
         return defaultGroupAvatarWork;
@@ -71,7 +71,9 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
         return '';
     }
   };
-  const getDes = () => typeInfoList.find((item) => item.type === groupType).des;
+  // eslint-disable-next-line
+  // @ts-ignore
+  const getDes = () => typeInfoList?.find((item: any) => item.type === groupType).des;
 
   const next = async () => {
     const memberList = profileList.map((item) => ({
@@ -79,10 +81,15 @@ export function ConversationCreatGroupDetail(props: ConversationCreatGroupDetail
     }));
     const avatar = getDefaultAvatar(groupType);
     const conversation = await createConversation({
-      name: groupName, type: GroupType[groupType], groupID, avatar, memberList,
+      name: groupName,
+      // eslint-disable-next-line
+      // @ts-ignore
+      type: GroupType[groupType], 
+      groupID,
+      avatar, 
+      memberList,
     });
     setActiveConversation(conversation);
-    // 切换会话
     TUIConversationService.switchConversation(conversation?.conversationID);
     setConversationCreated(false);
   };

package/src/components/ConversationCreate/ConversationCreate.tsx

@@ -58,6 +58,8 @@ export function ConversationCreate<T extends ConversationCreateProps>(props:T) {
           setIsCreateGroup={setIsCreateGroup}
           className={className}
           selectList={selectList}
+          // eslint-disable-next-line
+          // @ts-ignore
           setSelectList={setSelectList}
           conversationList={conversationList}
           setConversationCreated={setConversationCreated}
@@ -67,7 +69,9 @@ export function ConversationCreate<T extends ConversationCreateProps>(props:T) {
         <ConversationCreatGroupDetail
           pageState={pageState}
           setPageState={setPageState}
-          profileList={selectList.map((item) => item.profile)}
+          profileList={selectList.map((item: any) => item?.profile)}
+          // eslint-disable-next-line
+          // @ts-ignore
           createConversation={createConversation}
           setConversationCreated={setConversationCreated}
         />

package/src/components/ConversationCreate/ConversationCreateSelectView.tsx

@@ -14,9 +14,9 @@ export interface ConversationCreateSelectViewProps{
 }
 export function ConversationCreateSelectView(props:ConversationCreateSelectViewProps) {
   const { selectList, setSelectList } = props;
-  const close = (domList, index) => {
+  const close = (domList:Array<HTMLInputElement>, index: number) => {
     // eslint-disable-next-line no-param-reassign
-    domList.forEach((dom) => { dom.checked = false; });
+    domList.forEach((dom: HTMLInputElement) => { dom.checked = false; });
     selectList.splice(index, 1);
     setSelectList([...selectList]);
   };

package/src/components/ConversationCreate/ConversationCreateUserSelectList.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Conversation } from '@tencentcloud/chat';
+import { Conversation, Profile } from '@tencentcloud/chat';
 import {
   TUIConversationService,
 } from '@tencentcloud/chat-uikit-engine';
@@ -36,7 +36,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
   const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState('');
   const { chat, setActiveConversation } = useTUIKitContext();
-  const [friendList, setFriendList] = useState({});
+  const [friendList, setFriendList] = useState<any>({});
   const {
     getFriendListSortSearchResult,
   } = useConversationCreate(chat, conversationList, (newFriendListResult) => {
@@ -44,7 +44,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
   });
   const { createConversation } = useConversation(chat);
   const userCheckedList = useRef(new Map());
-  const searchValueChange = async (e) => {
+  const searchValueChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
     setSearchValue(value);
     setFriendList(await getFriendListSortSearchResult(value));
@@ -54,21 +54,22 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
     userCheckedList.current.clear();
     setSelectList([]);
   };
-  const getUserChecked = (userID, dom) => {
+  const getUserChecked = (userID:string, dom: HTMLElement) => {
     if (!dom) return;
     if (!userCheckedList.current.has(userID)) {
       userCheckedList.current.set(userID, []);
     }
     const list = userCheckedList.current.get(userID);
-    if (list.length !== 0 && list.some((item) => item.id === dom.id)) {
+    if (list.length !== 0 && list.some((item: any) => item.id === dom.id)) {
       return;
     }
     list.push(dom);
   };
-  const userSelectListChange = (e, profile, domList = []) => {
+  const userSelectListChange = (e: any, profile: Profile, domList = []) => {
     const { userID } = profile;
     const { checked } = e.target;
-    // eslint-disable-next-line no-param-reassign
+    // eslint-disable-next-line
+    // @ts-ignore
     domList.forEach((dom) => { dom.checked = checked; });
     if (checked) {
       selectList.push({ profile, domList });
@@ -77,7 +78,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
     }
     setSelectList([...selectList]);
   };
-  const createC2CConversation = async (profile) => {
+  const createC2CConversation = async (profile: Profile) => {
     if (isCreateGroup) return;
     const { userID } = profile;
     const conversation = await createConversation(`C2C${userID}`);
@@ -118,7 +119,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
               (key) => friendList[key].length !== 0 && (
                 <div className="tui-group-box" key={key}>
                   <div className="title">{key}</div>
-                  {friendList[key].map((profile, index) => {
+                  {friendList[key].map((profile: Profile, index: number) => {
                     const { userID, nick, avatar } = profile;
                     return (
                       <label
@@ -138,7 +139,7 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
                               userSelectListChange(e, profile, userCheckedList.current.get(userID));
                             }}
                             type="checkbox"
-                            ref={(dom) => {
+                            ref={(dom: any) => {
                               getUserChecked(userID, dom);
                             }}
                             id={`userChecked-${key}-${userID}`}

package/src/components/ConversationCreate/hooks/useConversationCreate.tsx

@@ -1,17 +1,17 @@
 import React, { useState, useEffect } from 'react';
-import TencentCloudChat from '@tencentcloud/chat';
+import TencentCloudChat, { Conversation, Friend, Profile } from '@tencentcloud/chat';
 import { strChineseFirstPy } from '../static/word';
 import { useProfile } from '../../../hooks';
 
 export const useConversationCreate = (
-  chat,
-  conversationList,
+  chat: any,
+  conversationList: Array<Conversation>,
   setFriendListResultHandler?:(
     newFriendListResult: object,
     setFriendListResult: React.Dispatch<React.SetStateAction<{string:Array<object>}>>
   ) => void,
 ) => {
-  const [friendListSortResult, setFriendListSortResult] = useState({});
+  const [friendListSortResult, setFriendListSortResult] = useState<any>();
   const getFirstLetter = (str: string) => {
     const temp = str.trim();
     const uni = temp.charCodeAt(0);
@@ -22,12 +22,12 @@ export const useConversationCreate = (
   };
   const queryFriendList = async () => {
     const frequentlyConversationProfile = conversationList.filter(
-      (item) => item.type === TencentCloudChat.TYPES.CONV_C2C,
-    ).slice(0, 5).map((item) => item.userProfile);
+      (item: Conversation) => item?.type === TencentCloudChat.TYPES.CONV_C2C,
+    ).slice(0, 5).map((item: Conversation) => item?.userProfile);
     const { code, data } = await chat.getFriendList();
     if (code === 0) {
       const sortResult = handleData(
-        data.map((item) => item.profile),
+        data.map((item: Friend) => item.profile),
         frequentlyConversationProfile,
       );
       setFriendListSortResult(sortResult);
@@ -36,8 +36,8 @@ export const useConversationCreate = (
       }
     }
   };
-  const handleData = (profileList, frequentlyConversationProfile = []) => {
-    const sortResult = {
+  const handleData = (profileList: Array<Profile>, frequentlyConversationProfile?: any) => {
+    const sortResult: any = {
       '#': [],
     };
     for (let i = 65; i <= 90; i += 1) {
@@ -55,7 +55,7 @@ export const useConversationCreate = (
       }
     });
     Object.keys(sortResult).forEach((key) => {
-      sortResult[key].sort((a, b) => {
+      sortResult[key].sort((a: any, b: any) => {
         const { nick: aNick, userID: aUserID } = a;
         const { nick: bNick, userID: bUserID } = b;
         if (aNick || aUserID < bNick || bUserID) {
@@ -73,12 +73,14 @@ export const useConversationCreate = (
     if (!searchValue) return friendListSortResult;
     const { data: profileList } = await getUserProfile([searchValue]);
 
-    const result = {};
+    const result: any = {};
     let isIncludes = false;
     Object.keys(friendListSortResult).forEach((key) => {
       result[key] = friendListSortResult[key].filter(
+        // eslint-disable-next-line
+        // @ts-ignore
         ({ nick, userID }) => {
-          const tempNick = nick.toLocaleLowerCase();
+          const tempNick = nick?.toLocaleLowerCase();
           const tempSearchValue = searchValue.toLocaleLowerCase();
           const userIDValue = userID.toLocaleLowerCase();
           let includes;

package/src/components/ConversationPreview/ConversationPreview.tsx

@@ -50,14 +50,14 @@ export function ConversationPreview<T extends ConversationPreviewProps>(
   } = useTUIKitContext('ConversationPreview');
   const [displayImage, setDisplayImage] = useState(getDisplayImage(conversation));
   const [displayTitle, setDisplayTitle] = useState(getDisplayTitle(conversation, searchValue));
-  const [displayMessage, setDisplayMessage] = useState(getDisplayMessage(conversation, myProfile, language));
+  const [displayMessage, setDisplayMessage] = useState(myProfile && getDisplayMessage(conversation, myProfile, language));
   const [displayTime, setDisplayTime] = useState(getDisplayTime(conversation, language));
   const [unread, setUnread] = useState(conversation.unreadCount);
   const isActive = activeConversation?.conversationID === conversation?.conversationID;
-  if (!Preview) return null;
+  if (!Preview) return <></>;
   useEffect(() => {
     setDisplayTitle(getDisplayTitle(conversation, searchValue));
-    setDisplayMessage(getDisplayMessage(conversation, myProfile, language));
+    myProfile && setDisplayMessage(getDisplayMessage(conversation, myProfile, language));
     setDisplayImage(getDisplayImage(conversation));
     setDisplayTime(getDisplayTime(conversation, language));
     setUnread(conversation.unreadCount);

package/src/components/ConversationPreview/ConversationPreviewContent.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-key */
 import React, { useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
@@ -11,6 +12,9 @@ import { Plugins } from '../Plugins';
 import { useConversation } from '../../hooks';
 import { useTUIKitContext } from '../../context';
 
+export interface IPluginsRef {
+  closeMore?: () => void,
+}
 export function unMemoConversationPreviewContent<T extends ConversationPreviewUIComponentProps>(
   props: T,
 ):React.ReactElement {
@@ -36,7 +40,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
   const unreadClass = unread && unread >= 1 ? 'conversation-preview-content--unread' : '';
   const pinClass = conversation.isPinned ? 'conversation-preview-content--pin' : '';
   const [isHover, setIsHover] = useState(false);
-  const pluginsRef = useRef(null);
+  const pluginsRef = useRef<IPluginsRef>(null);
 
   const onSelectConversation = () => {
     TUIConversationService.switchConversation(conversation?.conversationID);
@@ -63,7 +67,7 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
   const handleH5LongPress = (type: string) => {
     if (isPC) return;
     const { conversationID } = conversation;
-    setActiveConversationID(conversationID);
+    setActiveConversationID && setActiveConversationID(conversationID);
     function longPressHandler() {
       clearTimeout(timer);
       setIsHover(true);
@@ -92,15 +96,15 @@ export function unMemoConversationPreviewContent<T extends ConversationPreviewUI
     const { conversationID, isPinned } = conversation;
     e.stopPropagation();
     setIsHover(false);
-    pluginsRef.current.closeMore();
+    pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
     switch (type) {
       case 'pin':
         pinConversation({ conversationID, isPinned: !isPinned });
         break;
       case 'delete':
         deleteConversation(conversationID);
-        if (conversation === activeConversation) {
-          setActiveConversation(null);
+        if (setActiveConversation && conversation === activeConversation) {
+          setActiveConversation(undefined);
         }
         break;
       default:

package/src/components/ConversationPreview/utils.tsx

@@ -27,12 +27,13 @@ export const getDisplayTitle = (
   }
   const handleTitle = (str:string) => {
     const tempStr = str.toLocaleLowerCase();
-    const pos = tempStr.indexOf(searchValue.toLocaleLowerCase());
+    const pos = searchValue && tempStr.indexOf(searchValue.toLocaleLowerCase());
+    if (pos === '') return <></>
     return (
       <div>
         <span>{str.slice(0, pos)}</span>
-        <span style={{ color: highlightColor }}>{str.slice(pos, pos + searchValue.length)}</span>
-        <span>{str.slice(pos + searchValue.length)}</span>
+        <span style={{ color: highlightColor }}>{pos && str.slice(pos, pos + searchValue.length)}</span>
+        <span>{pos && str.slice(pos + searchValue.length)}</span>
       </div>
     );
   };
@@ -94,6 +95,8 @@ export const getDisplayMessage = (
 };
 interface TProfile extends Profile, Group {}
 export const getMessageProfile = (conversation: Conversation):TProfile => {
+  // eslint-disable-next-line
+  // @ts-ignore
   if (!conversation) return null;
   let result = {};
   const { type, groupProfile, userProfile } = conversation;

package/src/components/DivWithEdit/DivWithEdit.tsx

@@ -22,7 +22,7 @@ interface DivWithEditProps {
   type?: string,
   isEdit?: boolean,
   toggle?: (name:string) => void,
-  close?: () => void,
+  close: () => void,
 }
 
 export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<T>) {
@@ -40,15 +40,16 @@ export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<
   } = props;
 
   const [value, setValue] = useState(propsValue);
-
+  // eslint-disable-next-line
+  // @ts-ignore
   const WithEditElements = elements[type] || WithText;
 
   useLayoutEffect(() => {
     setValue(propsValue);
   }, [propsValue]);
 
-  const handleConfirm = (data) => {
-    confirm({
+  const handleConfirm = (data: any) => {
+    confirm && confirm({
       name,
       value: data,
     });
@@ -66,7 +67,7 @@ export function DivWithEdit<T extends DivWithEditProps>(props:PropsWithChildren<
         <div className="show">
           <p>{value || '-'}</p>
           <div className="icon">
-            <Icon className="icon-edit" width={12} height={12} type={IconTypes.EDIT} onClick={() => { toggle(name); }} />
+            <Icon className="icon-edit" width={12} height={12} type={IconTypes.EDIT} onClick={() => { toggle && name && toggle(name); }} />
           </div>
         </div>
         )

package/src/components/DivWithEdit/WithText.tsx

@@ -31,10 +31,12 @@ export function WithText<T extends WithEditProps>(props:PropsWithChildren<T>) {
   };
 
   const handleConfirm = () => {
-    confirm(value);
+    confirm && confirm(value);
   };
   return (
     <div className={`edit ${className}`}>
+      {/* // eslint-disable-next-line 
+      // @ts-ignore */}
       <input ref={inputRef} type="text" value={value} onChange={handleChange} />
       <Icon className="icon" width={15} height={10.5} type={IconTypes.CONFIRM} onClick={handleConfirm} />
     </div>

package/src/components/DivWithEdit/styles/index.scss

@@ -52,7 +52,7 @@
       min-width: 100%;
       z-index: 2;
       background: #FFFFFF;
-      box-shadow: 0 11px 20px 0 rgb(0 0 0 / 30%);
+      box-shadow: 0 11px 20px 0 rgb(0,0,0.3);
       top: 100%;
       border-radius: 5px;
       padding: 10px 0;

package/src/components/Icon/Icon.tsx

@@ -28,13 +28,13 @@ export function Icon(props: React.PropsWithChildren<IconProps>) {
   };
   return (
     <div
-      className={`tui-kit-icon ${changeTypeToIconClassName(type)} ${className}`}
+      className={`tui-kit-icon ${type && changeTypeToIconClassName(type)} ${className}`}
       role="button"
       tabIndex={0}
       style={iconStyle}
       onClick={onClick}
     >
-      {children || changeTypeToIconComponent(type)}
+      {children || (type && changeTypeToIconComponent(type))}
     </div>
   );
 }

package/src/components/Icon/config.ts

@@ -1,5 +1,4 @@
 import IconMoreUrl from './images/more.png';
-import IconCreateUrl from './images/create.png';
 import IconClearUrl from './images/clear.png';
 import IconSearchUrl from './images/search.png';
 import IconBackUrl from './images/back.png';
@@ -41,7 +40,7 @@ import IconUnunionUrl from './images/ununion.png';
 import IconVectorUrl from './images/vector.png';
 import IconUnvectorUrl from './images/unvector.png';
 import IconVoiceUrl from './images/voice.png';
-import IconAddFriendUrl from './images/add-friend.svg';
+import IconAddCircleUrl from './images/add-friend.svg';
 
 import { IconTypes } from './type';
 
@@ -60,7 +59,7 @@ export const ICON_CONFIG:IconConfig = {
     className: 'tui-kit-icon-more',
   },
   [IconTypes.CREATE]: {
-    url: IconCreateUrl,
+    url: IconAddCircleUrl,
     className: 'tui-kit-icon-create',
   },
   [IconTypes.CLEAR]: {
@@ -228,7 +227,7 @@ export const ICON_CONFIG:IconConfig = {
     className: 'tui-kit-icon-voice',
   },
   [IconTypes.ADDFRIEND]: {
-    url: IconAddFriendUrl,
+    url: IconAddCircleUrl,
     className: 'tui-kit-icon-add-friend',
   },
 };

package/src/components/Input/Input.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, {
   useRef, useState, useImperativeHandle, InputHTMLAttributes,
 } from 'react';
@@ -25,10 +26,10 @@ export interface InputRef {
   input: HTMLInputElement | null;
 }
 export const Input = React.forwardRef<InputRef, InputProps>(
-  (props:InputProps, ref):React.ReactElement => {
+  (props: InputProps, ref): React.ReactElement => {
     const {
-      className = '',
-      customClassName = '',
+      className = "",
+      customClassName = "",
       placeholder,
       clearable = false,
       prefix,
@@ -37,25 +38,25 @@ export const Input = React.forwardRef<InputRef, InputProps>(
       onBlur,
       onFocus,
       onKeyDown,
-      value: propsValue = '',
-      border = '',
+      value: propsValue = "",
+      border = "",
       disabled = false,
       maxLength = undefined,
     } = props;
 
     const [focused, setFocused] = useState<boolean>(false);
-    const enterCodeList = ['Enter', 'NumpadEnter'];
+    const enterCodeList = ["Enter", "NumpadEnter"];
     const [value, setValue] = useState(propsValue);
     const inputRef = useRef<HTMLInputElement>(null);
-    const handleFocus = (e) => {
+    const handleFocus = (e: any) => {
       setFocused(true);
       onFocus?.(e);
     };
-    const handleBlur = (e) => {
+    const handleBlur = (e: any) => {
       setFocused(false);
       onBlur?.(e);
     };
-    const handleEnterKeyDown = (e) => {
+    const handleEnterKeyDown = (e: any) => {
       if (enterCodeList.indexOf(e?.key) > -1 && onKeyDown) {
         e?.preventDefault();
         onKeyDown(e);
@@ -64,7 +65,9 @@ export const Input = React.forwardRef<InputRef, InputProps>(
     const clearInput = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
       setValue('');
       focus();
-      const currentTarget = inputRef.current.cloneNode(true) as HTMLInputElement;
+      const currentTarget = inputRef?.current?.cloneNode(
+        true
+      ) as HTMLInputElement;
       const event = Object.create(e, {
         target: { value: currentTarget },
         currentTarget: { value: currentTarget },
@@ -109,9 +112,9 @@ export const Input = React.forwardRef<InputRef, InputProps>(
           />
           {suffix}
           {(clearable && value)
-          && <Icon type={IconTypes.CLEAR} height={13} width={13} onClick={clearInput} />}
+          && <Icon type={IconTypes.CLEAR} height={13} width={13} onClick={(e: any) => {clearInput(e)}} />}
         </div>
       </div>
     );
-  },
+  }
 );

package/src/components/Model/index.tsx

@@ -4,7 +4,7 @@ import './styles/index.scss';
 
 interface PopupProps {
   className?: string,
-  onClick?: (e?) => void,
+  onClick?: (e: Event) => void,
 }
 
 export function Model<
@@ -17,7 +17,7 @@ T extends PopupProps
   } = props;
 
   return (
-    <div role="button" tabIndex={0} className={`model ${className}`} onClick={onClick}>
+    <div role="button" tabIndex={0} className={`model ${className}`} onClick={(e: any) => onClick && onClick(e)}>
       {children}
     </div>
   );

package/src/components/Plugins/index.tsx

@@ -22,6 +22,8 @@ export interface PluginsProps {
 
 function PluginsWithContext<T extends PluginsProps>(
   props:PropsWithChildren<T>,
+ // eslint-disable-next-line 
+ // @ts-ignore
   ref,
 ):React.ReactElement {
   const {
@@ -36,31 +38,31 @@ function PluginsWithContext<T extends PluginsProps>(
   } = props;
 
   useImperativeHandle(ref, () => ({
-    closeMore: (newVal) => {
+    closeMore: (newVal: boolean) => {
       setShow(false);
     },
   }));
 
   const { showPicker, elements } = usePluginsElement({ plugins, showNumber });
-  const pluginRef = useRef(null);
+  const pluginRef = useRef<HTMLDivElement>(null);
 
   const [show, setShow] = useState(false);
 
-  const handleShow = (e) => {
+  const handleShow = (e: any) => {
     e.stopPropagation();
     setShow(!show);
     if (!show) {
-      pluginRef.current.offsetParent.removeEventListener('scroll', handleShow);
+      pluginRef?.current?.offsetParent?.removeEventListener('scroll', handleShow);
     }
   };
 
-  const pluginHandleVisible = (data) => {
+  const pluginHandleVisible = (data: any) => {
     if (handleVisible) {
       const {
         width, height,
-      } = pluginRef.current.children[1].getBoundingClientRect();
-      const { x = 0, y = 0 } = pluginRef.current.getBoundingClientRect();
-      pluginRef.current.offsetParent.addEventListener('scroll', handleShow);
+      } = pluginRef?.current?.children[1].getBoundingClientRect() || {};
+      const { x = 0, y = 0 } = pluginRef?.current?.getBoundingClientRect() || {};
+      pluginRef.current?.offsetParent?.addEventListener('scroll', handleShow);
       handleVisible({
         ...data,
         width,
@@ -70,11 +72,12 @@ function PluginsWithContext<T extends PluginsProps>(
       });
     }
   };
-
+// eslint-disable-next-line
+// @ts-ignore
   return (
-    (showPicker.length > 0 || elements?.length > 0) && (
+    ((showPicker && showPicker.length > 0) || (elements && elements?.length > 0)) && (
       <ul className={`plugin ${className}`}>
-        {showPicker?.length > 0 && showPicker.map((Item, index:number) => {
+        {showPicker && showPicker?.length > 0 && showPicker.map((Item, index:number) => {
           const key = `${Item}${index}`;
           return (
             <li className="plugin-item" key={key}>
@@ -83,7 +86,7 @@ function PluginsWithContext<T extends PluginsProps>(
           );
         })}
         {
-        elements?.length > 0 && (
+        elements && elements?.length > 0 && (
           <div className="plugin-popup" ref={pluginRef}>
             <div role="menuitem" tabIndex={0} className="more" onClick={handleShow}>
               {