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

package/dist/index.cjs.js

@@ -19408,14 +19408,14 @@ var fallbackValues$e = {
 var IconWrapper = styled__default.div.withConfig({
   displayName: "Dropdown__IconWrapper",
   componentId: "sc-pn6m0h-0"
-})(["display:flex;flex-direction:column;justify-content:center;transition:transform 0.3s ease;", ""], 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)" : "";
 });
 var DropdownContentWrapper = styled__default.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) {
@@ -19454,7 +19454,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,
@@ -19529,23 +19529,23 @@ var Dropdown = function Dropdown(_ref8) {
   var onKeyDown = function onKeyDown(e) {
     var _optionRefs$current$l, _optionRefs$current;
 
-    console.log("key down event is", e.target);
-    console.log("key down event value is", e.target.value);
+    console.log("current input value", inputValue);
     var key = e.key,
         keyCode = e.keyCode;
     var focus = document.activeElement;
     console.log("dropdown value is", value);
-    console.log("focus is", focus);
-    console.log("option refs are", optionRefs.current);
     var optionEl = optionRefs.current.find(function (ref) {
       return 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();
@@ -19554,7 +19554,7 @@ var Dropdown = function Dropdown(_ref8) {
             break;
           }
         } else {
-          onClick();
+          _onClick();
         }
 
         break;
@@ -19570,7 +19570,7 @@ var Dropdown = function Dropdown(_ref8) {
             break;
           }
         } else {
-          onClick();
+          _onClick();
         }
 
         break;
@@ -19599,19 +19599,19 @@ var Dropdown = function Dropdown(_ref8) {
 
       case "Escape":
         if (isOpen) {
-          onClick();
+          _onClick();
         }
 
         break;
     }
+
+    if (keyCode > 64 && keyCode < 91 || keyCode == 32 || keyCode == 189) {
+      e.preventDefault();
+      setInputValue(inputValue + key);
+    }
   };
 
   React.useEffect(function () {
-    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();
@@ -19637,8 +19637,6 @@ var Dropdown = function Dropdown(_ref8) {
   }, [inputValue]);
   React.useEffect(function () {
     if (!isOpen && filteredOptions[0] && !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);
     }
 
@@ -19650,12 +19648,16 @@ var Dropdown = function Dropdown(_ref8) {
   }, [filteredOptions]);
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
+    background: isOpen ? themeValues.hoverColor : WHITE,
     extraStyles: "position: relative;",
     minWidth: "100%",
+    onClick: function onClick() {
+      if (!isOpen) {
+        _onClick();
+      }
+    },
+    onKeyDown: onKeyDown,
     width: "100%"
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    direction: "row",
-    bottomItem: 2
   }, /*#__PURE__*/React__default.createElement(Box, {
     as: "input",
     "aria-multiline": "false",
@@ -19674,12 +19676,16 @@ 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%",
+    minHeight: "48px",
+    minWidth: "100%",
     name: autocompleteValue,
-    onKeyDown: onKeyDown,
-    onClick: onClick,
-    onFocus: onClick,
+    onFocus: function onFocus() {
+      if (!isOpen) {
+        _onClick();
+      }
+    },
     onChange: function 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);
@@ -19690,13 +19696,14 @@ var Dropdown = function Dropdown(_ref8) {
     themeValues: themeValues,
     title: hasTitles ? getSelection() : null,
     type: "text",
-    tabIndex: -1,
+    tabIndex: 0,
     value: inputValue,
-    width: "85%",
+    width: "100%",
     dataQa: placeholder
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
-    open: isOpen
-  }, /*#__PURE__*/React__default.createElement(DropdownIcon, null))), /*#__PURE__*/React__default.createElement(React.Fragment, null, isOpen ? /*#__PURE__*/React__default.createElement(DropdownContentWrapper, {
+    open: isOpen,
+    onClick: _onClick
+  }, /*#__PURE__*/React__default.createElement(DropdownIcon, null)), /*#__PURE__*/React__default.createElement(React.Fragment, null, isOpen ? /*#__PURE__*/React__default.createElement(DropdownContentWrapper, {
     maxHeight: maxHeight,
     open: isOpen,
     ref: dropdownRef,