🐛(frontend) emoji-picker fix lack of overlay

The EmojiPicker component now displays an overlay
when opened, it fixes an issue when multiple pickers
are present on the same page and we click on one of them,
the others were not closing.

Author: olaurendeau

src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx

@@ -9,16 +9,18 @@ interface EmojiPickerProps {
   emojiData: EmojiMartData;
   onClickOutside: () => void;
   onEmojiSelect: ({ native }: { native: string }) => void;
+  withOverlay?: boolean;
 }
 
 export const EmojiPicker = ({
   emojiData,
   onClickOutside,
   onEmojiSelect,
+  withOverlay = false,
 }: EmojiPickerProps) => {
   const { i18n } = useTranslation();
 
-  return (
+  const pickerContent = (
     <Box $position="absolute" $zIndex={1000} $margin="2rem 0 0 0">
       <Picker
         data={emojiData}
@@ -30,4 +32,27 @@ export const EmojiPicker = ({
       />
     </Box>
   );
+
+  if (withOverlay) {
+    return (
+      <>
+        {/* Overlay transparent pour fermer en cliquant à l'extérieur */}
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            zIndex: 999,
+            backgroundColor: 'transparent',
+          }}
+          onClick={onClickOutside}
+        />
+        {pickerContent}
+      </>
+    );
+  }
+
+  return pickerContent;
 };

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx

@@ -122,6 +122,7 @@ const CalloutComponent = ({
           emojiData={emojidata}
           onClickOutside={onClickOutside}
           onEmojiSelect={onEmojiSelect}
+          withOverlay={true}
         />
       )}
       <Box as="p" className="inline-content" ref={contentRef} />

src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx

@@ -77,10 +77,10 @@ export const DocIcon = ({
   return (
     <>
       <BoxButton
+        className="--docs--doc-icon"
         ref={iconRef}
         onClick={toggleEmojiPicker}
-        $position="relative"
-        className="--docs--doc-icon"
+        color="tertiary-text"
       >
         {!emoji ? (
           defaultIcon
@@ -112,6 +112,7 @@ export const DocIcon = ({
               emojiData={emojidata}
               onEmojiSelect={handleEmojiSelect}
               onClickOutside={handleClickOutside}
+              withOverlay={true}
             />
           </div>,
           document.body,