From 6a79a4f657630dc35ac12f56b1c37617c9969848 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Mar=C3=ADn=20S=C3=A1nchez?=
 <46426271+fermarinsanchez@users.noreply.github.com>
Date: Fri, 25 Oct 2024 09:16:02 +0200
Subject: [PATCH] fix(components): set `DropdownButton` default position and
 limit sizes

Ticket: task/Transversal-152
Reviewed-by: @MIGUELez11
Refs: #197

feat(components): add `TextClamp`  one line to Dropdown Item label
Ticket: task/Transversal-152
Reviewed-by: @MIGUELez11
Refs: #197
---
 .../DropdownButton.constants.js               |  2 +-
 .../src/form/DropdownButton/DropdownButton.js | 30 +++++++++++++++----
 .../src/overlay/Dropdown/Item/Item.js         |  6 ++--
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/form/DropdownButton/DropdownButton.constants.js b/packages/components/src/form/DropdownButton/DropdownButton.constants.js
index 80ff4a333..54e00cba7 100644
--- a/packages/components/src/form/DropdownButton/DropdownButton.constants.js
+++ b/packages/components/src/form/DropdownButton/DropdownButton.constants.js
@@ -4,7 +4,7 @@ export const DROPDOWN_BUTTON_DEFAULT_PROPS = {
   children: '',
   chevronUp: false,
   data: [],
-  width: 'target',
+  position: 'bottom-end',
 };
 export const DROPDOWN_BUTTON_PROP_TYPES = {
   children: PropTypes.node,
diff --git a/packages/components/src/form/DropdownButton/DropdownButton.js b/packages/components/src/form/DropdownButton/DropdownButton.js
index 3620136eb..e77b3634b 100644
--- a/packages/components/src/form/DropdownButton/DropdownButton.js
+++ b/packages/components/src/form/DropdownButton/DropdownButton.js
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useRef, useEffect } from 'react';
 import { ChevDownIcon, ChevUpIcon } from '@bubbles-ui/icons/outline';
 import { noop } from 'lodash';
 import { DropdownButtonStyles } from './DropdownButton.styles';
@@ -11,8 +11,10 @@ import { Popover } from '../../overlay/Popover';
 import { Dropdown, Item } from '../../overlay/Dropdown';
 import { ImageLoader } from '../../misc';
 
-const DropdownButton = ({ itemComponent, data, chevronUp, width, ...props }) => {
+const DropdownButton = ({ itemComponent, data, chevronUp, position, ...props }) => {
   const [opened, setOpened] = useState(false);
+  const [buttonWidth, setButtonWidth] = useState(0);
+  const buttonRef = useRef(null);
 
   const handleOnOption =
     (onOption = noop) =>
@@ -20,6 +22,7 @@ const DropdownButton = ({ itemComponent, data, chevronUp, width, ...props }) =>
       onOption();
       setOpened(false);
     };
+  const { classes, cx } = DropdownButtonStyles({}, { name: 'DropdownButton' });
 
   function renderIcon(icon) {
     if (!icon) return null;
@@ -38,13 +41,20 @@ const DropdownButton = ({ itemComponent, data, chevronUp, width, ...props }) =>
     [data],
   );
 
-  const { classes, cx } = DropdownButtonStyles({}, { name: 'DropdownButton' });
+  useEffect(() => {
+    if (buttonRef.current) {
+      setButtonWidth(buttonRef.current.offsetWidth - 10);
+    }
+  }, []);
+
   return (
     <Popover
       opened={opened}
       offset={4}
+      position={position}
       target={
         <Button
+          ref={buttonRef}
           {...props}
           rightIcon={
             chevronUp ? (
@@ -54,15 +64,19 @@ const DropdownButton = ({ itemComponent, data, chevronUp, width, ...props }) =>
             )
           }
           onClick={() => setOpened(!opened)}
-          textAlign="appart"
+          textAlign="apart"
         />
       }
-      width={width}
       closeOnEscape
       closeOnClickOutside={true}
       onClose={() => setOpened(false)}
       trapFocus
-      styles={{ boxShadow: 'none', border: 'none' }}
+      styles={{
+        dropdown: {
+          minWidth: buttonWidth,
+          maxWidth: 150,
+        },
+      }}
     >
       <Dropdown>
         {handledData.map((item, index) => (
@@ -70,6 +84,10 @@ const DropdownButton = ({ itemComponent, data, chevronUp, width, ...props }) =>
             key={item.id || `DropdownButton Item ${index}`}
             {...item}
             icon={renderIcon(item.icon)}
+            style={{
+              minWidth: buttonWidth,
+              maxWidth: 200,
+            }}
           />
         ))}
       </Dropdown>
diff --git a/packages/components/src/overlay/Dropdown/Item/Item.js b/packages/components/src/overlay/Dropdown/Item/Item.js
index ba2d95009..1df9b54a1 100644
--- a/packages/components/src/overlay/Dropdown/Item/Item.js
+++ b/packages/components/src/overlay/Dropdown/Item/Item.js
@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 import { CheckIcon } from '@bubbles-ui/icons/solid';
 import { isString } from 'lodash';
 import { Box } from '../../../layout/Box';
-import { Text } from '../../../typography';
+import { Text, TextClamp } from '../../../typography';
 import { Avatar } from '../../../informative/Avatar';
 import { ImageLoader } from '../../../misc';
 import { ItemStyles } from './Item.styles';
@@ -33,7 +33,9 @@ const Item = forwardRef(
             {isString(icon) ? <ImageLoader src={icon} height={16} width={16} /> : icon}
           </Box>
         )}
-        <Text className={classes.label}>{label}</Text>
+        <TextClamp lines={1}>
+          <Text className={classes.label}>{label}</Text>
+        </TextClamp>
         {dataSelected && <CheckIcon className={classes.check} />}
       </Box>
     );