[ECO-1797] update tooltip menu (#118)

Co-authored-by: alnoki <43892045+alnoki@users.noreply.github.com>

src/typescript/frontend/src/components/selects/dropdown-menu/components/dropdown-menu-item/styled.tsx

@@ -24,6 +24,5 @@ export const StyledDropdownMenuItem = styled.div<{ disabled: boolean }>`
     disabled &&
     css`
       cursor: not-allowed;
-      background-color: ${({ theme }) => theme.colors.blue};
     `}
 `;

src/typescript/frontend/src/components/selects/dropdown-menu/index.tsx

@@ -4,9 +4,11 @@ import { DropdownMenuWrapper } from "./styled";
 import { DropdownMenuItem } from "./components";
 
 import { type DropdownMenuProps } from "../types";
+import { DropdownMenuInner, StyledDropdownMenuItem } from "./components/dropdown-menu-item/styled";
 
 export const DropdownMenu: React.FC<DropdownMenuProps> = ({
   onClick,
+  onClose,
   value,
   options,
   isMultiple,
@@ -16,6 +18,14 @@ export const DropdownMenu: React.FC<DropdownMenuProps> = ({
 }) => {
   return (
     <DropdownMenuWrapper {...props}>
+      <StyledDropdownMenuItem disabled={false} key={"close"} onClick={onClose}>
+        <DropdownMenuInner
+          className="flex"
+          style={{ justifyContent: "end", margin: "0", padding: "0" }}
+        >
+          <div className="med-pixel-text">X</div>
+        </DropdownMenuInner>
+      </StyledDropdownMenuItem>
       {options.map((option, index) => {
         const { title } = option;
 

src/typescript/frontend/src/components/selects/dropdown-menu/styled.tsx

@@ -4,7 +4,7 @@ import { Box } from "@containers";
 
 export const DropdownMenuWrapper = styled(Box)`
   max-height: 300px;
-  border-radius: inherit;
+  border-radius: 3px;
   overflow: auto;
   background-color: ${({ theme }) => theme.colors.econiaBlue};
 `;

src/typescript/frontend/src/components/selects/multiple-select/index.tsx

@@ -57,6 +57,10 @@ const MultipleSelect: React.FC<MultipleSelectProps> = ({
     }
   };
 
+  const onClose = () => {
+    setVisible(false);
+  };
+
   const onApplyCLick = () => {
     setVisible(false);
     setValue(selectedOptions);
@@ -68,6 +72,7 @@ const MultipleSelect: React.FC<MultipleSelectProps> = ({
         <DropdownComponent
           options={options}
           onClick={onDropdownMenuClick}
+          onClose={onClose}
           isMultiple
           values={selectedOptions}
           onHover={onHover}

src/typescript/frontend/src/components/selects/select/index.tsx

@@ -28,12 +28,12 @@ export const Select: React.FC<SelectProps> = ({
   });
 
   return (
-    <DropdownSelectWrapper ref={targetRef} onMouseEnter={replay} {...wrapperProps}>
+    <DropdownSelectWrapper onMouseEnter={replay} {...wrapperProps}>
       <FlexGap gap="8px" ellipsis>
         <Text className={"med-pixel-text"} color="darkGray">
           {"{"}
         </Text>
-        <Text className={"med-pixel-text"} {...placeholderProps} ellipsis>
+        <Text ref={targetRef} className={"med-pixel-text"} {...placeholderProps} ellipsis>
           {t(placeholder)}
         </Text>
 

src/typescript/frontend/src/components/selects/single-select/index.tsx

@@ -42,6 +42,7 @@ const SingleSelect: React.FC<SingleSelectProps> = ({
       options={options}
       value={value}
       onClick={onDropdownMenuClick}
+      onClose={onDropdownMenuClose}
       onHover={onHover}
       {...dropdownWrapperProps}
     />,
@@ -52,6 +53,10 @@ const SingleSelect: React.FC<SingleSelectProps> = ({
     }
   );
 
+  function onDropdownMenuClose() {
+    setVisible(false);
+  }
+
   function onDropdownMenuClick(option: Option) {
     setVisible(false);
     setValue(option);

src/typescript/frontend/src/components/selects/theme.ts

@@ -10,8 +10,5 @@ export const getTooltipStyles = (theme: DefaultTheme) => {
       borderRadius: "inherit",
       maxWidth: "100%",
     },
-    arrow: {
-      display: "none",
-    },
   };
 };

src/typescript/frontend/src/components/selects/types.ts

@@ -44,10 +44,11 @@ export interface DropdownMenuProps extends Omit<BoxProps, "onClick"> {
   isMultiple?: boolean;
   values?: Option[];
   onClick: (option: Option) => void;
+  onClose: () => void;
   onHover: (value: Option) => void;
 }
 
-export interface DropdownMenuItemProps extends Omit<DropdownMenuProps, "options"> {
+export interface DropdownMenuItemProps extends Omit<Omit<DropdownMenuProps, "options">, "onClose"> {
   index: number;
   option: Option;
   title: string;

src/typescript/frontend/src/hooks/use-tooltip/index.tsx

@@ -49,6 +49,7 @@ const useTooltip = (content: React.ReactNode, options?: TooltipOptions) => {
       { name: "offset", options: { offset: tooltipOffset } },
       { name: "preventOverflow", options: { padding: tooltipPadding } },
     ],
+    strategy: "fixed",
   });
 
   const tooltip = (