fix: dropdown item too long

Author: steven11329

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeinventor/dasiot-react-component-lib",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [

src/components/Dropdown/Dropdown.stories.tsx

@@ -27,6 +27,11 @@ const list: DropDownItem[] = [
     value: 'A004',
     name: 'Distributor C',
   },
+  {
+    id: 'A004',
+    value: 'A004',
+    name: 'Very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long',
+  },
 ];
 
 const meta: Meta<typeof Dropdown> = {
@@ -64,6 +69,30 @@ export const Default: Story = {
   render: () => <Dropdown list={list} onSelect={() => {}} />,
 };
 
+export const FixItemTooLong: Story = {
+  render: () => (
+    <Dropdown
+      list={list}
+      onSelect={() => {}}
+      popperProps={{
+        sx: {
+          '& .Dropdown-icon': {
+            flexShrink: 0,
+          },
+          '& .Dropdown-item': {
+            '> span': {
+              minWidth: 0,
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+            },
+          },
+        },
+      }}
+    />
+  ),
+};
+
 export const Exceptance: Story = {
   render: () => (
     <Dropdown

src/components/Dropdown/Dropdown.tsx

@@ -36,6 +36,13 @@ const Root = styled(Box)(({ theme }) => ({
     opacity: 0.3,
     pointerEvents: 'none',
   },
+
+  '& .selected-name': {
+    minWidth: 0,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
 }));
 
 const List = styled(Box)(({ theme }) => ({
@@ -148,7 +155,7 @@ const Dropdown: React.FC<DropDownProps> = (props) => {
         <Icon className="Dropdown-icon">
           {selectedItem?.id === item.id && <img src={CheckSvg} />}
         </Icon>
-        {item.name}
+        <span title={item.name}>{item.name}</span>
       </Item>
     ));
 
@@ -172,7 +179,12 @@ const Dropdown: React.FC<DropDownProps> = (props) => {
         onClick={handleOnClickSelect}
         {...otherProps}
       >
-        {selectedItem?.name ?? placeholder}
+        <span
+          className="selected-name"
+          title={selectedItem?.name ?? placeholder}
+        >
+          {selectedItem?.name ?? placeholder}
+        </span>
         <Icon className="Dropdown-icon">
           {isOpen ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
         </Icon>