chore: components restructure and improvements (#5383)

* chore: update issue identifier component.

* fix: browser tab closed on closing emoji picker issue fixed.

* chore: revert back changes in logo props.

* chore: update sortable.

* chore: minor componenets restructuring.

* minor ui update.

* fix: issue identifier display in command palette search.

* style: issue activity icons consistency.

packages/ui/src/emoji/emoji-icon-picker-new.tsx

@@ -101,7 +101,7 @@ export const EmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
                           type: EmojiIconPickerTypes.EMOJI,
                           value: val,
                         });
-                        if (closeOnSelect) close();
+                        if (closeOnSelect) handleToggle(false);
                       }}
                       height="20rem"
                       width="100%"
@@ -120,7 +120,7 @@ export const EmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
                           type: EmojiIconPickerTypes.ICON,
                           value: val,
                         });
-                        if (closeOnSelect) close();
+                        if (closeOnSelect) handleToggle(false);
                       }}
                     />
                   </Tab.Panel>

packages/ui/src/emoji/logo.tsx

@@ -5,7 +5,6 @@ import useFontFaceObserver from "use-font-face-observer";
 import { LUCIDE_ICONS_LIST } from "./icons";
 // helpers
 import { emojiCodeToUnicode } from "./helpers";
-import { cn } from "../../helpers";
 
 type TLogoProps = {
   in_use: "emoji" | "icon";
@@ -23,11 +22,10 @@ type Props = {
   logo: TLogoProps;
   size?: number;
   type?: "lucide" | "material";
-  customColor?: string;
 };
 
 export const Logo: FC<Props> = (props) => {
-  const { logo, size = 16, customColor, type = "material" } = props;
+  const { logo, size = 16, type = "material" } = props;
 
   // destructuring the logo object
   const { in_use, emoji, icon } = logo;
@@ -74,20 +72,19 @@ export const Logo: FC<Props> = (props) => {
             {lucideIcon && (
               <lucideIcon.element
                 style={{
-                  color: !customColor ? color : undefined,
+                  color: color,
                   height: size,
                   width: size,
                 }}
-                className={cn(customColor)}
               />
             )}
           </>
         ) : (
           <span
-            className={cn("material-symbols-rounded", customColor)}
+            className="material-symbols-rounded"
             style={{
               fontSize: size,
-              color: !customColor ? color : undefined,
+              color: color,
               scale: "115%",
             }}
           >

packages/ui/src/sortable/sortable.tsx

@@ -2,8 +2,10 @@ import React, { Fragment, useEffect, useMemo } from "react";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { Draggable } from "./draggable";
 
+type TEnhancedData<T> = T & { __uuid__?: string };
+
 type Props<T> = {
-  data: T[];
+  data: TEnhancedData<T>[];
   render: (item: T, index: number) => React.ReactNode;
   onChange: (data: T[], movedItem?: T) => void;
   keyExtractor: (item: T, index: number) => string;
@@ -12,9 +14,9 @@ type Props<T> = {
 };
 
 const moveItem = <T,>(
-  data: T[],
-  source: T,
-  destination: T & Record<symbol, string>,
+  data: TEnhancedData<T>[],
+  source: TEnhancedData<T>,
+  destination: TEnhancedData<T> & Record<symbol, string>,
   keyExtractor: (item: T, index: number) => string
 ): {
   newData: T[];
@@ -44,7 +46,16 @@ const moveItem = <T,>(
 
   newData.splice(adjustedDestinationIndex, 0, movedItem);
 
-  return { newData, movedItem };
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { __uuid__: movedItemId, ...movedItemData } = movedItem;
+  return {
+    newData: newData.map((item) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { __uuid__: uuid, ...rest } = item;
+      return rest as T;
+    }),
+    movedItem: movedItemData as T,
+  };
 };
 
 export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerClassName, id }: Props<T>) => {
@@ -55,8 +66,8 @@ export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerCl
         if (!destination) return;
         const { newData, movedItem } = moveItem(
           data,
-          source.data as T,
-          destination.data as T & { closestEdge: string },
+          source.data as TEnhancedData<T>,
+          destination.data as TEnhancedData<T> & { closestEdge: string },
           keyExtractor
         );
         onChange(newData, movedItem);
@@ -76,9 +87,13 @@ export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerCl
 
   return (
     <>
-      {enhancedData.map((item, index) => (
-        <Draggable key={keyExtractor(item, index)} data={item} className={containerClassName}>
-          <Fragment>{render(item, index)} </Fragment>
+      {data.map((item, index) => (
+        <Draggable
+          key={keyExtractor(enhancedData[index], index)}
+          data={enhancedData[index]}
+          className={containerClassName}
+        >
+          <Fragment>{render(item, index)}</Fragment>
         </Draggable>
       ))}
     </>