@thecb/components 6.0.0-beta.6 → 6.0.0-beta.9

package/dist/index.esm.js

@@ -19520,6 +19520,8 @@ 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);
     var key = e.key,
         keyCode = e.keyCode;
     var focus = document.activeElement;
@@ -19594,11 +19596,12 @@ var Dropdown = function Dropdown(_ref8) {
   };
 
   useEffect$1(function () {
-    console.log("option refs in isopen useffect", optionRefs.current[0].current);
+    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) {
+    if (isOpen && selectedRef !== undefined && selectedRef.current !== null) {
       // WAI-ARIA requires the selected option to receive focus
       selectedRef.current.focus();
     } else if (isOpen && optionRefs.current[0].current) {
@@ -19614,7 +19617,7 @@ var Dropdown = function Dropdown(_ref8) {
       clearTimeout(timer);
       setTimer(setTimeout(function () {
         return setInputValue("");
-      }, 2000));
+      }, 3000));
     }
 
     setFilteredOptions(options.filter(function (option) {
@@ -19637,28 +19640,22 @@ var Dropdown = function Dropdown(_ref8) {
   return /*#__PURE__*/React.createElement(Box, {
     onKeyDown: onKeyDown,
     onClick: onClick,
-    padding: "0",
+    padding: "12px",
     width: "100%",
     hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
+    background: isOpen ? themeValues.hoverColor : WHITE,
     "aria-expanded": isOpen,
     role: "combobox",
     "aria-owns": "".concat(ariaLabelledby, "_listbox"),
     "aria-haspopup": "listbox",
     "aria-labelledby": ariaLabelledby,
     extraStyles: disabled && "color: #6e727e;\n      background-color: #f7f7f7;\n      pointer-events: none;",
-    title: hasTitles ? getSelection() : null
-  }, /*#__PURE__*/React.createElement(Box, {
-    as: "button",
-    background: isOpen ? themeValues.hoverColor : WHITE,
-    width: "100%",
-    padding: "12px",
-    hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
-    borderSize: "1px",
-    borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
-    borderRadius: "2px",
-    tabIndex: 0,
+    title: hasTitles ? getSelection() : null,
     dataQa: placeholder,
-    extraStyles: "height: 48px;\n          ".concat(disabled && "color: #6e727e;\n          background-color: #f7f7f7;\n          pointer-events: none;", "\n          ")
+    tabIndex: 0,
+    borderRadius: "2px",
+    borderSize: "1px",
+    borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU
   }, /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     bottomItem: 2,
@@ -19667,7 +19664,10 @@ var Dropdown = function Dropdown(_ref8) {
     "aria-label": getSelection(),
     placeholder: getSelection(),
     value: inputValue,
-    onChange: noop,
+    onChange: function onChange(e) {
+      console.log("input change event", e.target);
+      console.log("input change event value", e.target.value);
+    },
     themeValues: themeValues,
     role: "searchbox",
     type: "text",
@@ -19681,7 +19681,7 @@ var Dropdown = function Dropdown(_ref8) {
     autocomplete: autocompleteValue
   }), /*#__PURE__*/React.createElement(IconWrapper, {
     open: isOpen
-  }, /*#__PURE__*/React.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React.createElement(DropdownContentWrapper, {
+  }, /*#__PURE__*/React.createElement(DropdownIcon, null))), isOpen ? /*#__PURE__*/React.createElement(DropdownContentWrapper, {
     maxHeight: maxHeight,
     open: isOpen,
     ref: dropdownRef,
@@ -19821,7 +19821,8 @@ var FormSelect = function FormSelect(_ref) {
       disabled = _ref.disabled,
       themeValues = _ref.themeValues,
       _ref$hasTitles = _ref.hasTitles,
-      hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles;
+      hasTitles = _ref$hasTitles === void 0 ? false : _ref$hasTitles,
+      autocompleteValue = _ref.autocompleteValue;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19876,7 +19877,8 @@ var FormSelect = function FormSelect(_ref) {
     onClick: function onClick() {
       return setOpen(!open);
     },
-    disabled: disabled
+    disabled: disabled,
+    autocompleteValue: autocompleteValue
   }), /*#__PURE__*/React.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -20649,7 +20651,8 @@ var CountryDropdown = function CountryDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    onChange: onChange
+    onChange: onChange,
+    autocompleteValue: "country-name"
   });
 };
 
@@ -33065,7 +33068,8 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     fieldActions: fieldActions,
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
-    showErrors: showErrors
+    showErrors: showErrors,
+    autocompleteValue: "address-level1"
   });
 };