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

package/dist/index.esm.js

@@ -19400,7 +19400,7 @@ var fallbackValues$e = {
 var IconWrapper = styled.div.withConfig({
   displayName: "Dropdown__IconWrapper",
   componentId: "sc-pn6m0h-0"
-})(["display:flex;flex-direction:column;justify-content:center;transition:transform 0.3s ease;", " position:absolute;top:20px;right:12px;"], function (_ref) {
+})(["position:absolute;display:flex;flex-direction:column;justify-content:center;transition:transform 0.3s ease;", ";top:20px;right:12px;"], function (_ref) {
   var open = _ref.open;
   return open ? "transform: rotate(-180deg)" : "";
 });
@@ -19521,7 +19521,7 @@ var Dropdown = function Dropdown(_ref8) {
   var onKeyDown = function onKeyDown(e) {
     var _optionRefs$current$l, _optionRefs$current;
 
-    console.log("current input value", inputValue);
+    console.log("current input value top of keyDown", inputValue);
     var key = e.key,
         keyCode = e.keyCode;
     var focus = document.activeElement;
@@ -19534,6 +19534,10 @@ var Dropdown = function Dropdown(_ref8) {
       case "ArrowDown":
         e.preventDefault();
 
+        if (!isOpen) {
+          _onClick();
+        }
+
         if (optionEl) {
           if (optionEl.current.nextElementSibling) {
             optionEl.current.nextElementSibling.focus();
@@ -19592,6 +19596,25 @@ var Dropdown = function Dropdown(_ref8) {
 
         break;
     }
+
+    if (keyCode > 64 && keyCode < 91 || keyCode == 32 || keyCode == 189) {
+      e.preventDefault();
+      console.log("current input value inside keydown if", inputValue);
+      setInputValue(inputValue + key);
+    }
+  };
+
+  var handleItemSelection = function handleItemSelection(evt, choice, i) {
+    disabledValues.includes(choice.value) ? function (evt) {
+      return evt.preventDefault();
+    } : function () {
+      setSelectedRef(optionRefs.current[i]);
+      onSelect(choice.value);
+
+      if (isOpen) {
+        _onClick();
+      }
+    };
   };
 
   useEffect$1(function () {
@@ -19635,13 +19658,12 @@ var Dropdown = function Dropdown(_ref8) {
     extraStyles: "position: relative;",
     minWidth: "100%",
     onClick: function onClick() {
-      _onClick();
+      if (!isOpen) {
+        _onClick();
+      }
     },
     onKeyDown: onKeyDown,
     width: "100%"
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    bottomItem: 2
   }, /*#__PURE__*/React.createElement(Box, {
     as: "input",
     "aria-multiline": "false",
@@ -19657,7 +19679,6 @@ 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,
@@ -19665,15 +19686,20 @@ var Dropdown = function Dropdown(_ref8) {
     minWidth: "100%",
     name: autocompleteValue,
     onFocus: function onFocus() {
+      /*
       if (!isOpen) {
-        _onClick();
+        onClick();
       }
+      */
     },
     onChange: function onChange(e) {
-      console.log("current input value", inputValue);
+      console.log("current input value onChange", inputValue);
       console.log("input change event", e.target);
-      console.log("input change event value", e.target.value);
-      setInputValue(e.target.value);
+      console.log("input change event value", e.target.value); // support autofill and copy/paste
+
+      if (e.tarvet.value !== inputValue) {
+        setInputValue(e.target.value);
+      }
     },
     padding: "12px",
     placeholder: getSelection(),
@@ -19686,8 +19712,9 @@ var Dropdown = function Dropdown(_ref8) {
     width: "100%",
     dataQa: placeholder
   }), /*#__PURE__*/React.createElement(IconWrapper, {
-    open: isOpen
-  }, /*#__PURE__*/React.createElement(DropdownIcon, null))), /*#__PURE__*/React.createElement(Fragment, null, isOpen ? /*#__PURE__*/React.createElement(DropdownContentWrapper, {
+    open: isOpen,
+    onClick: _onClick
+  }, /*#__PURE__*/React.createElement(DropdownIcon, null)), /*#__PURE__*/React.createElement(Fragment, null, isOpen ? /*#__PURE__*/React.createElement(DropdownContentWrapper, {
     maxHeight: maxHeight,
     open: isOpen,
     ref: dropdownRef,
@@ -19708,11 +19735,13 @@ var Dropdown = function Dropdown(_ref8) {
       key: choice.value,
       ref: optionRefs.current[i],
       tabIndex: -1,
-      onClick: disabledValues.includes(choice.value) ? function (evt) {
-        return evt.preventDefault();
-      } : function () {
-        setSelectedRef(optionRefs.current[i]);
-        onSelect(choice.value);
+      onClick: function onClick(e) {
+        return handleItemSelection(e, choice, i);
+      },
+      onKeyDown: function onKeyDown(e) {
+        if (e.keyCode === 13) {
+          handleItemSelection(e, choice, i);
+        }
       },
       selected: choice.value === value,
       "aria-selected": choice.value === value,