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

package/dist/index.esm.js

@@ -6372,7 +6372,7 @@ var Box = function Box(_ref) {
     onFocus: onFocus,
     onBlur: onBlur,
     onTouchEnd: onTouchEnd
-  }, rest), safeChildren(children, /*#__PURE__*/React.createElement(Fragment, null)));
+  }, rest), children && safeChildren(children, /*#__PURE__*/React.createElement(Fragment, null)));
 };
 
 var CenterWrapper = styled.div.withConfig({
@@ -19414,10 +19414,10 @@ var DropdownContentWrapper = styled.div.withConfig({
   var maxHeight = _ref3.maxHeight;
   return maxHeight || "400px";
 });
-var DropdownItemWrapper = styled.div.withConfig({
+var DropdownItemWrapper = styled.li.withConfig({
   displayName: "Dropdown__DropdownItemWrapper",
   componentId: "sc-pn6m0h-2"
-})(["background-color:", ";text-align:start;border-width:0px;border-color:transparent;box-shadow:none;padding:1rem;box-sizing:border-box;width:100%;cursor:", ";&:hover{background-color:", ";}&:focus{background-color:", ";outline:none;}"], function (_ref4) {
+})(["background-color:", ";text-align:start;border-width:0px;border-color:transparent;box-shadow:none;padding:1rem;box-sizing:border-box;width:100%;list-style:none;cursor:", ";&:hover{background-color:", ";}&:focus{background-color:", ";outline:none;}"], function (_ref4) {
   var selected = _ref4.selected,
       themeValues = _ref4.themeValues;
   return selected ? themeValues.selectedColor : WHITE;
@@ -19588,6 +19588,13 @@ var Dropdown = function Dropdown(_ref8) {
         e.preventDefault();
         optionRefs.current[(_optionRefs$current$l = optionRefs === null || optionRefs === void 0 ? void 0 : (_optionRefs$current = optionRefs.current) === null || _optionRefs$current === void 0 ? void 0 : _optionRefs$current.length) !== null && _optionRefs$current$l !== void 0 ? _optionRefs$current$l : 0 - 1].current.focus();
         break;
+
+      case "Escape":
+        if (isOpen) {
+          onClick();
+        }
+
+        break;
     }
   };
 
@@ -19633,10 +19640,14 @@ var Dropdown = function Dropdown(_ref8) {
       dropdownRef.current.focus();
     }
   }, [filteredOptions]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    extraStyles: "position: relative;",
+    minWidth: "100%",
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
-    bottomItem: 2,
-    extraStyles: "position: relative;"
+    bottomItem: 2
   }, /*#__PURE__*/React.createElement(Box, {
     as: "input",
     "aria-multiline": "false",
@@ -19655,6 +19666,7 @@ var Dropdown = function Dropdown(_ref8) {
     extraStyles: disabled && "color: #6e727e;\n            background-color: #f7f7f7;\n            pointer-events: none;",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     isOpen: isOpen,
+    minWidth: "85%",
     name: autocompleteValue,
     onKeyDown: onKeyDown,
     onClick: onClick,
@@ -19672,9 +19684,11 @@ var Dropdown = function Dropdown(_ref8) {
     type: "text",
     tabIndex: -1,
     value: inputValue,
-    width: "100%",
+    width: "85%",
     dataQa: placeholder
-  }, isOpen ? /*#__PURE__*/React.createElement(DropdownContentWrapper, {
+  }), /*#__PURE__*/React.createElement(IconWrapper, {
+    open: isOpen
+  }, /*#__PURE__*/React.createElement(DropdownIcon, null))), /*#__PURE__*/React.createElement(Fragment, null, isOpen ? /*#__PURE__*/React.createElement(DropdownContentWrapper, {
     maxHeight: maxHeight,
     open: isOpen,
     ref: dropdownRef,
@@ -19683,7 +19697,8 @@ var Dropdown = function Dropdown(_ref8) {
     role: "listbox",
     id: "".concat(ariaLabelledby, "_listbox")
   }, /*#__PURE__*/React.createElement(Stack, {
-    childGap: "0"
+    childGap: "0",
+    as: "ul"
   }, filteredOptions.map(function (choice, i) {
     if (choice.value === value && selectedRef !== optionRefs.current[i]) {
       setSelectedRef(optionRefs.current[i]);
@@ -19715,9 +19730,7 @@ var Dropdown = function Dropdown(_ref8) {
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
       extraStyles: "padding-left: 16px; \n                      cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", "; \n                      white-space: nowrap; \n                      overflow: hidden; \n                      text-overflow: ellipsis;")
     }, choice.text));
-  }))) : /*#__PURE__*/React.createElement(Fragment, null)), /*#__PURE__*/React.createElement(IconWrapper, {
-    open: isOpen
-  }, /*#__PURE__*/React.createElement(DropdownIcon, null))));
+  }))) : /*#__PURE__*/React.createElement(Fragment, null)));
 };
 
 var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);