@thecb/components 6.0.0-beta.11 → 6.0.0-beta.14

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({
@@ -19407,7 +19407,7 @@ var IconWrapper = styled.div.withConfig({
 var DropdownContentWrapper = styled.div.withConfig({
   displayName: "Dropdown__DropdownContentWrapper",
   componentId: "sc-pn6m0h-1"
-})(["transform-origin:0 0;border:1px solid ", ";border-radius:2px;background-color:", ";padding:8px 0 8px;position:absolute;width:", ";min-width:100%;max-height:", ";overflow-y:scroll;z-index:1;box-sizing:border-box;&:focus{outline:none;}"], GREY_CHATEAU, WHITE, function (_ref2) {
+})(["transform-origin:0 0;border:1px solid ", ";border-radius:2px;background-color:", ";padding:8px 0 8px;position:absolute;width:", ";min-width:100%;max-height:", ";overflow-y:scroll;z-index:1;box-sizing:border-box;&:focus{outline:none;}ul{padding-left:0;}"], GREY_CHATEAU, WHITE, function (_ref2) {
   var widthFitOptions = _ref2.widthFitOptions;
   return widthFitOptions ? "fit-content" : "100%";
 }, function (_ref3) {
@@ -19417,7 +19417,7 @@ var DropdownContentWrapper = 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;
@@ -19446,7 +19446,7 @@ var Dropdown = function Dropdown(_ref8) {
       _ref8$disabledValues = _ref8.disabledValues,
       disabledValues = _ref8$disabledValues === void 0 ? [] : _ref8$disabledValues,
       _ref8$onClick = _ref8.onClick,
-      onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
+      _onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
       themeValues = _ref8.themeValues,
       maxHeight = _ref8.maxHeight,
       _ref8$widthFitOptions = _ref8.widthFitOptions,
@@ -19546,7 +19546,7 @@ var Dropdown = function Dropdown(_ref8) {
             break;
           }
         } else {
-          onClick();
+          _onClick();
         }
 
         break;
@@ -19562,7 +19562,7 @@ var Dropdown = function Dropdown(_ref8) {
             break;
           }
         } else {
-          onClick();
+          _onClick();
         }
 
         break;
@@ -19591,7 +19591,7 @@ var Dropdown = function Dropdown(_ref8) {
 
       case "Escape":
         if (isOpen) {
-          onClick();
+          _onClick();
         }
 
         break;
@@ -19640,10 +19640,24 @@ 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",
+    background: isOpen ? themeValues.hoverColor : WHITE,
+    borderSize: "1px",
+    borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
+    borderRadius: "2px",
+    borderWidthOverride: "0px 1px 0px 0px",
+    extraStyles: "position: relative;",
+    minWidth: "100%",
+    onClick: function onClick() {
+      if (!isOpen) {
+        _onClick();
+      }
+    },
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
-    bottomItem: 2,
-    extraStyles: "position: relative;"
+    bottomItem: 2
   }, /*#__PURE__*/React.createElement(Box, {
     as: "input",
     "aria-multiline": "false",
@@ -19659,13 +19673,19 @@ var Dropdown = function Dropdown(_ref8) {
     borderRadius: "2px",
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
+    borderWidthOverride: "1px 0px 1px 1px",
     extraStyles: disabled && "color: #6e727e;\n            background-color: #f7f7f7;\n            pointer-events: none;",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
     isOpen: isOpen,
+    minHeight: "48px",
+    minWidth: "85%",
     name: autocompleteValue,
     onKeyDown: onKeyDown,
-    onClick: onClick,
-    onFocus: onClick,
+    onFocus: function onFocus() {
+      if (!isOpen) {
+        _onClick();
+      }
+    },
     onChange: function onChange(e) {
       console.log("input change event", e.target);
       console.log("input change event value", e.target.value);
@@ -19677,9 +19697,9 @@ var Dropdown = function Dropdown(_ref8) {
     themeValues: themeValues,
     title: hasTitles ? getSelection() : null,
     type: "text",
-    tabIndex: -1,
+    tabIndex: 0,
     value: inputValue,
-    width: "100%",
+    width: "85%",
     dataQa: placeholder
   }), /*#__PURE__*/React.createElement(IconWrapper, {
     open: isOpen