@thecb/components 6.0.0-beta.12 → 6.0.0-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0-beta.12",
+  "version": "6.0.0-beta.13",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/dropdown/Dropdown.js

@@ -51,6 +51,7 @@ const DropdownItemWrapper = styled.li`
   padding: 1rem;
   box-sizing: border-box;
   width: 100%;
+  list-style: none;
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 
   &:hover {
@@ -230,8 +231,13 @@ const Dropdown = ({
   }, [filteredOptions]);
 
   return (
-    <Fragment>
-      <Stack direction="row" bottomItem={2} extraStyles={`position: relative;`}>
+    <Box
+      padding="0"
+      extraStyles={`position: relative;`}
+      minWidth="100%"
+      width="100%"
+    >
+      <Stack direction="row" bottomItem={2}>
         <Box
           as="input"
           aria-multiline="false"
@@ -261,6 +267,7 @@ const Dropdown = ({
           }
           hoverStyles={`background-color: ${themeValues.hoverColor};`}
           isOpen={isOpen}
+          minWidth="85%"
           name={autocompleteValue}
           onKeyDown={onKeyDown}
           onClick={onClick}
@@ -278,7 +285,7 @@ const Dropdown = ({
           type="text"
           tabIndex={-1}
           value={inputValue}
-          width="100%"
+          width="85%"
           dataQa={placeholder}
         />
         <IconWrapper open={isOpen}>
@@ -361,7 +368,7 @@ const Dropdown = ({
           <Fragment />
         )}
       </Fragment>
-    </Fragment>
+    </Box>
   );
 };