fix: size checkbox

Author: suryakumara

package.json

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

src/components/Dropdown/DropdownCheckbox/DropdownCheckbox.stories.tsx

@@ -22,6 +22,21 @@ const list: DropdownCheckboxItem[] = [
     value: 'floor-3',
     name: 'Floor 3',
   },
+  {
+    id: 'floor-4',
+    value: 'floor-4',
+    name: 'Floor 4',
+  },
+  {
+    id: 'floor-5',
+    value: 'floor-5',
+    name: 'Floor 5',
+  },
+  {
+    id: 'floor-6',
+    value: 'floor-6',
+    name: 'Floor 6',
+  },
 ];
 
 export default {
@@ -52,7 +67,10 @@ export default {
 } as Meta;
 
 export const Default: Story<DropdownCheckboxProps> = (args) => {
-  const [selectedIds, setSelectedIds] = useState<string[]>();
+  const [selectedIds, setSelectedIds] = useState<string[]>([
+    list[0].value as string,
+    list[1].value as string,
+  ]);
 
   return (
     <div>
@@ -68,5 +86,6 @@ export const Default: Story<DropdownCheckboxProps> = (args) => {
 Default.args = {
   mode: 'dark',
   list,
+
   placeholder: 'Please Select Item',
 };

src/components/Dropdown/DropdownCheckbox/DropdownCheckbox.tsx

@@ -57,9 +57,9 @@ const Item = styled(Box, { label: 'Dropdown-item' })<ItemProps>(
   ({ theme, selected }) => ({
     ...theme.typography.h3,
     cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    lineHeight: 2.5,
+    // display: 'flex',
+    // alignItems: 'center',
+    // lineHeight: 2.5,
     '&:hover': {
       backgroundColor: 'rgba(0, 0, 0, .05)',
     },
@@ -70,6 +70,10 @@ const Item = styled(Box, { label: 'Dropdown-item' })<ItemProps>(
 const ContainerLabel = styled('div')`
   display: flex;
   align-items: center;
+  max-width: 320px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   gap: 10px;
 `;
 
@@ -108,6 +112,8 @@ const DropdownCheckbox: React.VFC<DropdownCheckboxProps> = (props) => {
   useEffect(() => {
     if (selectedIds === undefined || selectedIds.length === 0) {
       setItemChecked([]);
+    } else {
+      setItemChecked(selectedIds);
     }
   }, [selectedIds]);
 
@@ -127,7 +133,7 @@ const DropdownCheckbox: React.VFC<DropdownCheckboxProps> = (props) => {
     .map((item) => (
       <Item
         key={`dropdown-item-${item.id}`}
-        className="Dropdown-item"
+        // className="Dropdown-item"
         selected={itemChecked.includes(item.value as string)}
         {...itemProps}
       >