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

package/package.json

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

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

@@ -21,6 +21,9 @@ const IconWrapper = styled.div`
   justify-content: center;
   transition: transform 0.3s ease;
   ${({ open }) => (open ? "transform: rotate(-180deg)" : "")}
+  position: absolute;
+  top: 20px;
+  right: 12px;
 `;
 
 const DropdownContentWrapper = styled.div`
@@ -39,6 +42,10 @@ const DropdownContentWrapper = styled.div`
   &:focus {
     outline: none;
   }
+
+  ul {
+    padding-left: 0;
+  }
 `;
 
 const DropdownItemWrapper = styled.li`
@@ -51,6 +58,7 @@ const DropdownItemWrapper = styled.li`
   padding: 1rem;
   box-sizing: border-box;
   width: 100%;
+  list-style: none;
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 
   &:hover {
@@ -115,15 +123,11 @@ const Dropdown = ({
     value ? options.find(option => option.value === value)?.text : placeholder;
 
   const onKeyDown = e => {
-    console.log("key down event is", e.target);
-    console.log("key down event value is", e.target.value);
+    console.log("current input value", inputValue);
     const { key, keyCode } = e;
     const focus = document.activeElement;
     console.log("dropdown value is", value);
-    console.log("focus is", focus);
-    console.log("option refs are", optionRefs.current);
     const optionEl = optionRefs.current.find(ref => ref.current === focus);
-    console.log("option el is", optionEl);
     switch (key) {
       case "ArrowDown":
         e.preventDefault();
@@ -179,13 +183,6 @@ const Dropdown = ({
   };
 
   useEffect(() => {
-    console.log("option refs in isopen useffect", optionRefs);
-    console.log(
-      "option ref current in isopen useffect",
-      optionRefs.current[0].current
-    );
-    console.log("selected refs in isopen useffect", selectedRef);
-    console.log("value in isopen useffect", value);
     if (isOpen && selectedRef !== undefined && selectedRef.current !== null) {
       // WAI-ARIA requires the selected option to receive focus
       selectedRef.current.focus();
@@ -218,8 +215,6 @@ const Dropdown = ({
       !disabledValues.includes(filteredOptions[0].value) &&
       filteredOptions[0].text != placeholder
     ) {
-      console.log("filtered options are", filteredOptions);
-      console.log("option refs are", optionRefs);
       onSelect(filteredOptions[0].value);
     }
     if (optionRefs.current[0].current) {
@@ -230,8 +225,18 @@ const Dropdown = ({
   }, [filteredOptions]);
 
   return (
-    <Fragment>
-      <Stack direction="row" bottomItem={2} extraStyles={`position: relative;`}>
+    <Box
+      padding="0"
+      background={isOpen ? themeValues.hoverColor : WHITE}
+      extraStyles={`position: relative;`}
+      minWidth="100%"
+      onClick={() => {
+        onClick();
+      }}
+      onKeyDown={onKeyDown}
+      width="100%"
+    >
+      <Stack direction="row" bottomItem={2}>
         <Box
           as="input"
           aria-multiline="false"
@@ -253,6 +258,7 @@ const Dropdown = ({
               ? themeValues.selectedColor
               : GREY_CHATEAU
           }
+          borderWidthOverride="1px 0px 1px 1px"
           extraStyles={
             disabled &&
             `color: #6e727e;
@@ -261,11 +267,16 @@ const Dropdown = ({
           }
           hoverStyles={`background-color: ${themeValues.hoverColor};`}
           isOpen={isOpen}
+          minHeight="48px"
+          minWidth="100%"
           name={autocompleteValue}
-          onKeyDown={onKeyDown}
-          onClick={onClick}
-          onFocus={onClick}
+          onFocus={() => {
+            if (!isOpen) {
+              onClick();
+            }
+          }}
           onChange={e => {
+            console.log("current input value", inputValue);
             console.log("input change event", e.target);
             console.log("input change event value", e.target.value);
             setInputValue(e.target.value);
@@ -276,7 +287,7 @@ const Dropdown = ({
           themeValues={themeValues}
           title={hasTitles ? getSelection() : null}
           type="text"
-          tabIndex={-1}
+          tabIndex={0}
           value={inputValue}
           width="100%"
           dataQa={placeholder}
@@ -361,7 +372,7 @@ const Dropdown = ({
           <Fragment />
         )}
       </Fragment>
-    </Fragment>
+    </Box>
   );
 };