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

package/package.json

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

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

@@ -16,11 +16,14 @@ import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
 const IconWrapper = styled.div`
+  position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   transition: transform 0.3s ease;
   ${({ open }) => (open ? "transform: rotate(-180deg)" : "")}
+  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`
@@ -116,18 +123,17 @@ 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();
+        if (!isOpen) {
+          onClick();
+        }
         if (optionEl) {
           if (optionEl.current.nextElementSibling) {
             optionEl.current.nextElementSibling.focus();
@@ -177,16 +183,13 @@ const Dropdown = ({
         }
         break;
     }
+    if ((keyCode > 64 && keyCode < 91) || keyCode == 32 || keyCode == 189) {
+      e.preventDefault();
+      setInputValue(inputValue + key);
+    }
   };
 
   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();
@@ -219,8 +222,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) {
@@ -233,65 +234,74 @@ const Dropdown = ({
   return (
     <Box
       padding="0"
+      background={isOpen ? themeValues.hoverColor : WHITE}
       extraStyles={`position: relative;`}
       minWidth="100%"
+      onClick={() => {
+        if (!isOpen) {
+          onClick();
+        }
+      }}
+      onKeyDown={onKeyDown}
       width="100%"
     >
-      <Stack direction="row" bottomItem={2}>
-        <Box
-          as="input"
-          aria-multiline="false"
-          aria-autocomplete="list"
-          aria-controls={`${ariaLabelledby}_listbox`}
-          aria-activedescendant="focused_option"
-          aria-owns={`${ariaLabelledby}_listbox`}
-          aria-haspopup="listbox"
-          aria-labelledby={ariaLabelledby}
-          aria-expanded={isOpen}
-          autocomplete={autocompleteValue}
-          background={isOpen ? themeValues.hoverColor : WHITE}
-          borderRadius="2px"
-          borderSize="1px"
-          borderColor={
-            isError
-              ? ERROR_COLOR
-              : isOpen
-              ? themeValues.selectedColor
-              : GREY_CHATEAU
-          }
-          extraStyles={
-            disabled &&
-            `color: #6e727e;
+      <Box
+        as="input"
+        aria-multiline="false"
+        aria-autocomplete="list"
+        aria-controls={`${ariaLabelledby}_listbox`}
+        aria-activedescendant="focused_option"
+        aria-owns={`${ariaLabelledby}_listbox`}
+        aria-haspopup="listbox"
+        aria-labelledby={ariaLabelledby}
+        aria-expanded={isOpen}
+        autocomplete={autocompleteValue}
+        background={isOpen ? themeValues.hoverColor : WHITE}
+        borderRadius="2px"
+        borderSize="1px"
+        borderColor={
+          isError
+            ? ERROR_COLOR
+            : isOpen
+            ? themeValues.selectedColor
+            : GREY_CHATEAU
+        }
+        extraStyles={
+          disabled &&
+          `color: #6e727e;
             background-color: #f7f7f7;
             pointer-events: none;`
+        }
+        hoverStyles={`background-color: ${themeValues.hoverColor};`}
+        isOpen={isOpen}
+        minHeight="48px"
+        minWidth="100%"
+        name={autocompleteValue}
+        onFocus={() => {
+          if (!isOpen) {
+            onClick();
           }
-          hoverStyles={`background-color: ${themeValues.hoverColor};`}
-          isOpen={isOpen}
-          minWidth="85%"
-          name={autocompleteValue}
-          onKeyDown={onKeyDown}
-          onClick={onClick}
-          onFocus={onClick}
-          onChange={e => {
-            console.log("input change event", e.target);
-            console.log("input change event value", e.target.value);
-            setInputValue(e.target.value);
-          }}
-          padding="12px"
-          placeholder={getSelection()}
-          role="combobox"
-          themeValues={themeValues}
-          title={hasTitles ? getSelection() : null}
-          type="text"
-          tabIndex={-1}
-          value={inputValue}
-          width="85%"
-          dataQa={placeholder}
-        />
-        <IconWrapper open={isOpen}>
-          <DropdownIcon />
-        </IconWrapper>
-      </Stack>
+        }}
+        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);
+        }}
+        padding="12px"
+        placeholder={getSelection()}
+        role="combobox"
+        themeValues={themeValues}
+        title={hasTitles ? getSelection() : null}
+        type="text"
+        tabIndex={0}
+        value={inputValue}
+        width="100%"
+        dataQa={placeholder}
+      />
+      <IconWrapper open={isOpen} onClick={onClick}>
+        <DropdownIcon />
+      </IconWrapper>
       <Fragment>
         {isOpen ? (
           <DropdownContentWrapper