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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0-beta.10",
+  "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

@@ -41,7 +41,7 @@ const DropdownContentWrapper = styled.div`
   }
 `;
 
-const DropdownItemWrapper = styled.div`
+const DropdownItemWrapper = styled.li`
   background-color: ${({ selected, themeValues }) =>
     selected ? themeValues.selectedColor : WHITE};
   text-align: start;
@@ -51,6 +51,7 @@ const DropdownItemWrapper = styled.div`
   padding: 1rem;
   box-sizing: border-box;
   width: 100%;
+  list-style: none;
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 
   &:hover {
@@ -170,6 +171,11 @@ const Dropdown = ({
           optionRefs?.current?.length ?? 0 - 1
         ].current.focus();
         break;
+      case "Escape":
+        if (isOpen) {
+          onClick();
+        }
+        break;
     }
   };
 
@@ -225,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"
@@ -256,6 +267,7 @@ const Dropdown = ({
           }
           hoverStyles={`background-color: ${themeValues.hoverColor};`}
           isOpen={isOpen}
+          minWidth="85%"
           name={autocompleteValue}
           onKeyDown={onKeyDown}
           onClick={onClick}
@@ -273,64 +285,69 @@ const Dropdown = ({
           type="text"
           tabIndex={-1}
           value={inputValue}
-          width="100%"
+          width="85%"
           dataQa={placeholder}
-        >
-          {isOpen ? (
-            <DropdownContentWrapper
-              maxHeight={maxHeight}
-              open={isOpen}
-              ref={dropdownRef}
-              widthFitOptions={widthFitOptions}
-              tabIndex={0}
-              role="listbox"
-              id={`${ariaLabelledby}_listbox`}
-            >
-              <Stack childGap="0">
-                {filteredOptions.map((choice, i) => {
-                  if (
-                    choice.value === value &&
-                    selectedRef !== optionRefs.current[i]
-                  ) {
-                    setSelectedRef(optionRefs.current[i]);
-                  }
-                  return (
-                    <DropdownItemWrapper
-                      id={
-                        focusedRef === optionRefs.current[i]
-                          ? "focused_option"
-                          : choice.value
-                      }
-                      key={choice.value}
-                      ref={optionRefs.current[i]}
-                      tabIndex={-1}
-                      onClick={
-                        disabledValues.includes(choice.value)
-                          ? evt => evt.preventDefault()
-                          : () => {
-                              setSelectedRef(optionRefs.current[i]);
-                              onSelect(choice.value);
-                            }
+        />
+        <IconWrapper open={isOpen}>
+          <DropdownIcon />
+        </IconWrapper>
+      </Stack>
+      <Fragment>
+        {isOpen ? (
+          <DropdownContentWrapper
+            maxHeight={maxHeight}
+            open={isOpen}
+            ref={dropdownRef}
+            widthFitOptions={widthFitOptions}
+            tabIndex={0}
+            role="listbox"
+            id={`${ariaLabelledby}_listbox`}
+          >
+            <Stack childGap="0" as="ul">
+              {filteredOptions.map((choice, i) => {
+                if (
+                  choice.value === value &&
+                  selectedRef !== optionRefs.current[i]
+                ) {
+                  setSelectedRef(optionRefs.current[i]);
+                }
+                return (
+                  <DropdownItemWrapper
+                    id={
+                      focusedRef === optionRefs.current[i]
+                        ? "focused_option"
+                        : choice.value
+                    }
+                    key={choice.value}
+                    ref={optionRefs.current[i]}
+                    tabIndex={-1}
+                    onClick={
+                      disabledValues.includes(choice.value)
+                        ? evt => evt.preventDefault()
+                        : () => {
+                            setSelectedRef(optionRefs.current[i]);
+                            onSelect(choice.value);
+                          }
+                    }
+                    selected={choice.value === value}
+                    aria-selected={choice.value === value}
+                    disabled={disabledValues.includes(choice.value)}
+                    data-qa={choice.text}
+                    themeValues={themeValues}
+                    title={hasTitles ? choice.text : null}
+                    role="option"
+                    onFocus={() => setFocusedRef(optionRefs.current[i])}
+                  >
+                    <Text
+                      variant="p"
+                      color={
+                        choice.value === value
+                          ? WHITE
+                          : disabledValues.includes(choice.value)
+                          ? STORM_GREY
+                          : MINESHAFT_GREY
                       }
-                      selected={choice.value === value}
-                      aria-selected={choice.value === value}
-                      disabled={disabledValues.includes(choice.value)}
-                      data-qa={choice.text}
-                      themeValues={themeValues}
-                      title={hasTitles ? choice.text : null}
-                      role="option"
-                      onFocus={() => setFocusedRef(optionRefs.current[i])}
-                    >
-                      <Text
-                        variant="p"
-                        color={
-                          choice.value === value
-                            ? WHITE
-                            : disabledValues.includes(choice.value)
-                            ? STORM_GREY
-                            : MINESHAFT_GREY
-                        }
-                        extraStyles={`padding-left: 16px; 
+                      extraStyles={`padding-left: 16px; 
                       cursor: ${
                         disabledValues.includes(choice.value)
                           ? "default"
@@ -339,23 +356,19 @@ const Dropdown = ({
                       white-space: nowrap; 
                       overflow: hidden; 
                       text-overflow: ellipsis;`}
-                      >
-                        {choice.text}
-                      </Text>
-                    </DropdownItemWrapper>
-                  );
-                })}
-              </Stack>
-            </DropdownContentWrapper>
-          ) : (
-            <Fragment />
-          )}
-        </Box>
-        <IconWrapper open={isOpen}>
-          <DropdownIcon />
-        </IconWrapper>
-      </Stack>
-    </Fragment>
+                    >
+                      {choice.text}
+                    </Text>
+                  </DropdownItemWrapper>
+                );
+              })}
+            </Stack>
+          </DropdownContentWrapper>
+        ) : (
+          <Fragment />
+        )}
+      </Fragment>
+    </Box>
   );
 };
 

package/src/components/atoms/layouts/Box.js

@@ -80,7 +80,7 @@ const Box = ({
     onTouchEnd={onTouchEnd}
     {...rest}
   >
-    {safeChildren(children, <Fragment />)}
+    {children && safeChildren(children, <Fragment />)}
   </BoxWrapper>
 );