tuikit-atomicx-vue3 3.3.0-beta.3 → 3.3.1

package/src/components/MessageInput/TextEditor/TextEditor.vue

@@ -1,14 +1,15 @@
 <template>
   <div :class="[styles['input-wrapper'], props.disabled && styles.disabled]">
     <div :class="styles['input-prefix']">
-      <slot name="prefix" />
+      <slot name="inputPrefix" />
     </div>
     <div
-      ref="editorRef"
+      ref="editorDomRef"
+      :key="props.disabled ? 'disabled' : 'enabled'"
       :class="styles['editor']"
     />
     <div :class="styles['input-suffix']">
-      <slot name="suffix" />
+      <slot name="inputSuffix" />
     </div>
   </div>
 </template>
@@ -38,7 +39,7 @@ const { t } = useUIKit();
 const { activeConversation } = useConversationListState();
 const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
-const editorRef = ref<HTMLDivElement | null>(null);
+const editorDomRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(props.autoFocus);
 
 const placeholderText = computed(() => (props.disabled ? '' : props.placeholder || t('MessageInput.enter_a_message')));
@@ -46,7 +47,7 @@ const placeholderText = computed(() => (props.disabled ? '' : props.placeholder
 let editorInstance: Editor | null = null;
 
 onMounted(() => {
-  const element = editorRef.value;
+  const element = editorDomRef.value;
   if (!element) {
     return;
   }
@@ -79,7 +80,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-  const element = editorRef.value;
+  const element = editorDomRef.value;
   if (editorInstance && element) {
     editorInstance.destroy();
     element.removeAttribute('data-editor-created');
@@ -92,4 +93,13 @@ watch(activeConversation, (newConversation, oldConversation) => {
     setContent('');
   }
 });
+
+watch(() => props.disabled, (newDisabled) => {
+  if (editorInstance) {
+    editorInstance.setEditable(!newDisabled);
+    if (newDisabled) {
+      setContent('');
+    }
+  }
+});
 </script>

package/src/components/MessageInput/types.d.ts

@@ -20,13 +20,11 @@ export type MessageInputActions = Array<BuiltInAction | CustomAction>;
 
 export type MessageInputAttachmentPickerMode = 'collapsed' | 'expanded';
 
-export interface IMessageInputProps {
+export interface MessageInputProps {
   autoFocus?: boolean;
   disabled?: boolean;
   hideSendButton?: boolean;
   placeholder?: string;
-  className?: string;
-  style?: CSSProperties;
   attachmentPickerMode?: MessageInputAttachmentPickerMode;
   actions?: MessageInputActions;
   slots?: MessageInputSlots;
@@ -39,4 +37,5 @@ export interface MessageInputSlots {
   rightInline?: () => VNode[];
   inputPrefix?: () => VNode[];
   inputSuffix?: () => VNode[];
-}
+  textEditor?: () => VNode[];
+}

package/src/components/MessageList/Message/CustomMessage/CustomMessage.vue

@@ -3,5 +3,5 @@
 </script>
 
 <template>
-  [Custom Message]
+  <div>undefined custom Message</div>
 </template>

package/src/components/MessageList/Message/FaceMessage/FaceMessage.vue

@@ -9,13 +9,13 @@
 
 <script lang="ts" setup>
 import cs from 'classnames';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../../types/engine';
 
-interface IFaceMessageProps {
-  message: IMessageModel;
+interface FaceMessageProps {
+  message: MessageModel;
 }
 
-interface IFaceMessageContent {
+interface FaceMessageContent {
   /** sender show name */
   showName: string;
   /** face image name [yz00@2x] */
@@ -26,11 +26,14 @@ interface IFaceMessageContent {
   url: string;
 }
 
-const props = withDefaults(defineProps<IFaceMessageProps>(), {
-  message: () => ({} as IMessageModel),
+const props = withDefaults(defineProps<FaceMessageProps>(), {
+  message: () => ({} as MessageModel),
 });
 
-const messageContent = props.message.getMessageContent() as IFaceMessageContent;
+const messageContent = {
+  url: 'https://web.sdk.qcloud.com/im/assets/face-elem/yz13@2x.png',
+  name: 'yz13@2x',
+};
 </script>
 
 <style lang="scss" scoped>

package/src/components/MessageList/Message/LocationMessage/LocationMessage.vue

@@ -2,5 +2,7 @@
 </script>
 
 <template>
-  [Location Message]
+  <div>
+    [undefined location Message]
+  </div>
 </template>

package/src/components/MessageList/Message/MergerMessage/MergerMessage.vue

@@ -2,5 +2,5 @@
 </script>
 
 <template>
-  [Merger Message]
+  <div>undefined merger Message</div>
 </template>

package/src/components/MessageList/Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.vue

@@ -14,12 +14,12 @@ import classes from './MessageActionDropdown.module.scss';
 import type { MessageAction } from '../../../../../hooks/useMessageActions';
 import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
 
-interface IMessageActionDropdownProps {
+interface MessageActionDropdownProps {
   message: MessageModel;
   messageActionList?: MessageAction[] | undefined;
 }
 
-const props = withDefaults(defineProps<IMessageActionDropdownProps>(), {
+const props = withDefaults(defineProps<MessageActionDropdownProps>(), {
   messageActionList: undefined,
   message: () => ({}) as MessageModel,
 });

package/src/components/MessageList/MessageForward/MessageForward.vue

@@ -8,7 +8,7 @@ import { View } from '../../../baseComp/View';
 import { useConversationListState } from '../../../states/ConversationListState';
 import { useMessageActionState } from '../../../states/MessageActionState';
 import { UserPicker } from '../../UserPicker';
-import type { IUserPickerRef, IUserPickerRow } from '../../UserPicker/type';
+import type { UserPickerRef, UserPickerRow } from '../../UserPicker/type';
 import type { IConversationModel } from '@tencentcloud/chat-uikit-engine';
 
 const { t } = useUIKit();
@@ -24,7 +24,7 @@ const {
 } = useConversationListState();
 
 // UserPicker ref
-const userPickerRef = ref<IUserPickerRef<undefined> | null>(null);
+const userPickerRef = ref<UserPickerRef<undefined> | null>(null);
 
 // Convert conversation list to UserPicker data format
 const forwardListDataSource = computed((): any[] => {
@@ -34,7 +34,7 @@ const forwardListDataSource = computed((): any[] => {
 
   return conversationList.value.map((conversation: IConversationModel) => {
     const { type, remark, groupProfile, userProfile } = conversation;
-    const userPickerRow: IUserPickerRow<undefined> = {
+    const userPickerRow: UserPickerRow<undefined> = {
       key: conversation.conversationID,
       label: '',
       avatarUrl: conversation.getAvatar() || '',

package/src/components/MessageList/MessageList.vue

@@ -77,6 +77,7 @@ const {
   activeConversationID,
   isDisableScroll,
   setIsDisableScroll,
+  setEnableReadReceipt,
 } = useMessageListState();
 
 const { scrollToBottom } = useScroll();
@@ -109,13 +110,18 @@ const messageChunks = computed(() => {
 
   filteredMessageList.forEach((message, index, messages) => {
     const messageTime = message.time;
-    const lastChunk = chunks[chunks.length - 1];
+    const lastChunk = chunks.length > 0 ? chunks[chunks.length - 1] : undefined;
+    const lastMessage = index > 0 ? messages[index - 1] : undefined;
 
     const shouldCreateNewChunk = !lastChunk
       || messageTime - lastChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP
       || lastChunk.messages[0].from !== message.from
       || message.isRevoked
-      || (index > 0 && messages[index - 1].isRevoked);
+      || (lastMessage && lastMessage.isRevoked)
+      || message.status === 'fail'
+      || (lastMessage && lastMessage.status === 'fail')
+      || message.hasRiskContent
+      || (lastMessage && lastMessage.hasRiskContent);
 
     if (shouldCreateNewChunk) {
       chunks.push({
@@ -239,6 +245,12 @@ watch(messageList, (newMessages, oldMessages) => {
   }
 });
 
+watch(() => props.enableReadReceipt, (newEnableReadReceipt) => {
+  setEnableReadReceipt(newEnableReadReceipt);
+}, {
+  immediate: true,
+});
+
 onMounted(() => {
   if (scrollContainer.value) {
     scrollContainer.value.addEventListener('scroll', handleScroll);
@@ -277,8 +289,8 @@ onUnmounted(() => {
         <!-- Time Divider -->
         <component
           :is="props.MessageTimeDivider || DefaultMessageTimeDivider"
-          :previous-message="chunkIndex > 0 ? messageChunks[chunkIndex-1].messages[0] : undefined"
-          :message="chunk.messages[0]"
+          :previousMessage="chunkIndex > 0 ? messageChunks[chunkIndex-1].messages[0] : undefined"
+          :currentMessage="chunk.messages[0]"
         />
 
         <!-- Message Chunk -->
@@ -392,7 +404,7 @@ onUnmounted(() => {
 
 .scroll-to-bottom {
   position: absolute;
-  bottom: 105px;
+  bottom: 95px;
   right: 8px;
 }
 </style>

package/src/components/MessageList/MessageTimeDivider/MessageTimeDivider.vue

@@ -1,25 +1,25 @@
 <script lang="ts" setup>
 import { h, computed, Fragment } from 'vue';
 import { getTimeStampAuto } from '../../../utils/time';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../types';
 
-interface IMessageTimeDividerProps {
-  previousMessage: IMessageModel | undefined;
-  message: IMessageModel;
+interface MessageTimeDividerProps {
+  previousMessage: MessageModel | undefined;
+  currentMessage: MessageModel;
 }
 
-const props = withDefaults(defineProps<IMessageTimeDividerProps>(), {
+const props = withDefaults(defineProps<MessageTimeDividerProps>(), {
   previousMessage: undefined,
-  message: () => ({}) as IMessageModel,
+  currentMessage: () => ({}) as MessageModel,
 });
 
 const shouldShowTimeDivider = computed(() => {
-  if (!props.message?.time) {
+  if (!props.currentMessage?.time) {
     return false;
   }
 
   const prevTime = props.previousMessage?.time || 0;
-  const currentTime = props.message.time;
+  const currentTime = props.currentMessage.time;
 
   return currentTime - prevTime > 5 * 60;
 });
@@ -29,7 +29,7 @@ const renderDefaultContent = () => {
     return h(Fragment, null, []);
   }
 
-  const currentTime = props.message.time;
+  const currentTime = props.currentMessage.time;
 
   return h('div', { class: 'message-time-divider' }, [
     h('span', {}, getTimeStampAuto(currentTime * 1000)),

package/src/components/MessageList/index.ts

@@ -1,14 +1,15 @@
-import { Message } from './Message';
-import { MessageActionDropdown } from './Message/MessageLayout/MessageActionDropdown';
-import MessageList from './MessageList.vue';
+import { Message as MessageComponent } from './Message';
+import MessageListComponent from './MessageList.vue';
 import { addI18n } from '../../i18n';
 import { resources } from './i18n';
 
 addI18n('en-US', { translation: { MessageList: resources['en-US'] } });
 addI18n('zh-CN', { translation: { MessageList: resources['zh-CN'] } });
 
+const Message = MessageComponent;
+const MessageList = MessageListComponent;
+
 export {
   Message,
   MessageList,
-  MessageActionDropdown,
 };

package/src/components/Search/Search.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .Search {
   display: flex;
   flex-direction: column;

package/src/components/Search/SearchResults/EmptyResult/EmptyResult.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchEmpty {
   display: flex;
   flex-direction: column;

package/src/components/Search/SearchResults/Loading/Loading.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchLoading {
   padding: 32px;
   text-align: center;

package/src/components/Search/SearchResults/SearchResults.scss

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../styles/mixins' as mixins;
 .SearchResults {
   flex: 1;
   overflow: hidden;
@@ -64,11 +62,8 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+
+  @include mixins.scrollbar-hidden();
 }
 
 .SearchResults__error {
@@ -155,19 +150,15 @@
   text-align: center;
   margin: 0;
   padding: 0 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+  @include mixins.text-ellipsis();
 }
 
 .SearchResults__message-detail-content {
   flex: 1;
   overflow-y: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  
+  @include mixins.scrollbar-hidden();
 }
 
 .SearchResults__result-section {

package/src/components/Search/SearchResults/SearchResultsItem/Conversation/Conversation.scss

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../../../styles/mixins' as mixins;
 .conversationItem {
   display: flex;
   align-items: flex-start;
@@ -28,20 +26,16 @@
 .name {
   font-weight: 500;
   font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--text-color-primary);
+
+  @include mixins.text-ellipsis();
 }
 
 .showText {
   font-size: 12px;
   line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
   word-break: break-word;
   color: var(--text-color-secondary);
+
+  @include mixins.multi-line-ellipsis(3);
 }

package/src/components/Search/SearchResults/SearchResultsItem/Group/Group.scss

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../../../styles/mixins' as mixins;
 .SearchGroup {
   display: flex;
   align-items: flex-start;
@@ -27,22 +25,18 @@
   font-weight: 500;
   font-size: 14px;
   margin-bottom: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--text-color-primary);
+
+  @include mixins.text-ellipsis();
 }
 
 .SearchGroup__intro {
   font-size: 12px;
   line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
   word-break: break-word;
   color: var(--text-color-secondary);
+
+  @include mixins.multi-line-ellipsis(3);
 }
 
 :global(.SearchGroup__highlight) {

package/src/components/Search/SearchResults/SearchResultsItem/Message/Message.scss

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../../../styles/mixins' as mixins;
 .SearchMessage {
   display: flex;
   align-items: flex-start;
@@ -35,10 +33,9 @@
 .SearchMessage__name {
   font-weight: 500;
   font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--text-color-primary);
+
+  @include mixins.text-ellipsis();
 }
 
 .SearchMessage__time {
@@ -85,13 +82,10 @@
 .SearchMessage__text {
   font-size: 12px;
   line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
   word-break: break-word;
   color: var(--text-color-primary);
+
+  @include mixins.multi-line-ellipsis(3);
 }
 
 .SearchMessage__emoji-img {

package/src/components/Search/SearchResults/SearchResultsItem/SearchResultsItem.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchResultsItem {
   padding: 12px 16px;
   cursor: pointer;

package/src/components/Search/SearchResults/SearchResultsItem/User/User.scss

@@ -1,6 +1,4 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
+@use '../../../../../styles/mixins' as mixins;
 .SearchUser {
   display: flex;
   align-items: flex-start;
@@ -26,10 +24,9 @@
   font-weight: 500;
   font-size: 14px;
   margin-bottom: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   color: var(--text-color-primary);
+
+  @include mixins.text-ellipsis();
 }
 
 .SearchUser__signature {
@@ -42,6 +39,8 @@
   -webkit-box-orient: vertical;
   word-break: break-word;
   color: var(--text-color-secondary);
+
+  @include mixins.multi-line-ellipsis(3);
 }
 
 :global(.SearchUser__highlight) {

package/src/components/StreamMixer/LocalMixer/index.vue

@@ -24,7 +24,7 @@
 
 <script setup lang="ts">
 import type { Ref } from 'vue';
-import { ref, onMounted, watch, onUnmounted, computed, nextTick } from 'vue';
+import { ref, onMounted, watch, onBeforeUnmount, computed, nextTick } from 'vue';
 import TUIRoomEngine, {
   TRTCVideoResolutionMode,
   TRTCVideoRotation,
@@ -213,20 +213,25 @@ onMounted(() => {
   re.observe(localMixerRef.value);
   TUIRoomEngine.once('ready', async () => {
     const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
-    await mediaSourceManager.setDisplayParams(document.getElementById('local-video-mixer') as HTMLElement);
+    await mediaSourceManager.bindPreviewArea(document.getElementById('local-video-mixer') as HTMLElement);
     getMixControlStyle();
   });
 
   watch(localLiveStatus, async (newVal) => {
+    const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
     if (newVal === LiveStatus.Live) {
-      const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
       await mediaSourceManager?.startPublish();
     }
+    if (newVal === LiveStatus.IDLE) {
+      await mediaSourceManager?.stopPublish();
+    }
   });
 });
 
-onUnmounted(() => {
+onBeforeUnmount(async () => {
   re.unobserve(localMixerRef.value);
+  const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
+  await mediaSourceManager?.destroy();
 });
 </script>
 

package/src/components/StreamView/manager/mediaManager.ts

@@ -250,7 +250,7 @@ export class MediaManager {
       if (streamType === TUIVideoStreamType.kCameraStream) {
         if (isVideoMixerEnabled.value) {
           const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
-          mediaSourceManager.setDisplayParams(document.getElementById(viewIdList[0]) as HTMLElement);
+          mediaSourceManager.bindPreviewArea(document.getElementById(viewIdList[0]) as HTMLElement);
           // const publishParams = {
           //   videoEncoderParams: {
           //     videoResolution: TRTCVideoResolution.TRTCVideoResolution_1280_720,

package/src/components/UserPicker/UserPicker.vue

@@ -21,7 +21,7 @@
       </div>
       <ListMode
         v-else-if="!isTreeMode"
-        :data-source="searchManager.filteredData.value as IUserPickerRow<any>[]"
+        :data-source="searchManager.filteredData.value as UserPickerRow<any>[]"
         :selected-keys="selectionManager.selectedKeys.value"
         :locked-keys="selectionManager.lockedKeys.value"
         :on-item-click="selectionManager.toggle"
@@ -30,7 +30,7 @@
       />
       <TreeMode
         v-else
-        :data-source="searchManager.filteredData.value as IUserPickerNode<any>[]"
+        :data-source="searchManager.filteredData.value as UserPickerNode<any>[]"
         :selected-keys="selectionManager.selectedKeys.value"
         :half-selected-keys="selectionManager.halfSelectedKeys.value"
         :locked-keys="selectionManager.lockedKeys.value"
@@ -64,10 +64,7 @@ import TreeMode from './components/TreeMode';
 import { useSearchFilter } from './hooks/useSearchFilter';
 import { useSelection } from './hooks/useSelection';
 import { useTreeState } from './hooks/useTreeState';
-import type { IUserPickerProps, IUserPickerRef, IUserPickerNode, IUserPickerRow } from './type';
-
-// Define type for props (without generics for Vue3 compatibility)
-type UserPickerProps = IUserPickerProps<any>;
+import type { UserPickerProps, UserPickerRef, UserPickerNode, UserPickerRow } from './type';
 
 const props = withDefaults(defineProps<UserPickerProps>(), {
   dataSource: () => [],
@@ -129,7 +126,7 @@ watch(
 );
 
 // Generic node update function - can update any properties of a node
-const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<any>>) => {
+const updateNodeByKey = (nodeKey: string, partialNode: Partial<UserPickerNode<any>>) => {
   if (!isTreeMode.value) {
     return;
   }
@@ -187,7 +184,7 @@ const updateNodeByKey = (nodeKey: string, partialNode: Partial<IUserPickerNode<a
 };
 
 // Implement methods exposed by ref
-const refMethods: IUserPickerRef<any> = {
+const refMethods: UserPickerRef<any> = {
   getSelectedItems: () => selectionManager.getSelectedItems(),
   updateListData: (newDataSource: any[]) => {
     // Update list data
@@ -195,7 +192,7 @@ const refMethods: IUserPickerRef<any> = {
       internalDataSource.value = newDataSource;
     }
   },
-  updateTreeData: (nodeKey: string, partialNode: Partial<IUserPickerNode<any>>) => {
+  updateTreeData: (nodeKey: string, partialNode: Partial<UserPickerNode<any>>) => {
     // Use generic update function
     updateNodeByKey(nodeKey, partialNode);
   },

package/src/components/UserPicker/components/ListMode/ListMode.vue

@@ -27,10 +27,7 @@
         <!-- Checkbox -->
         <div :class="$style['list__checkbox-wrapper']">
           <div :class="[$style.list__checkbox, { [$style['list__checkbox--checked']]: isSelected(item.key) }]">
-            <IconCheckSm
-              v-if="isSelected(item.key)"
-              name="check"
-            />
+            <IconCheckSm v-if="isSelected(item.key)" />
           </div>
         </div>
 
@@ -61,10 +58,10 @@
 import { defineProps } from 'vue';
 import { useUIKit, IconCheckSm } from '@tencentcloud/uikit-base-component-vue3';
 import { Avatar } from '../../../Avatar';
-import type { IUserPickerRow } from '../../type';
+import type { UserPickerRow } from '../../type';
 
 interface ListModeProps<T = unknown> {
-  dataSource: IUserPickerRow<T>[];
+  dataSource: UserPickerRow<T>[];
   selectedKeys: Set<string>;
   lockedKeys: Set<string>;
   onItemClick: (key: string) => void;
@@ -150,7 +147,6 @@ const handleScroll = (e: Event) => {
     align-items: center;
     justify-content: center;
     transition: all 0.3s;
-    color: #fff;
     border: 2px solid #d9d9d9;
 
     &--checked {