@thecb/components 6.0.0-beta.5 → 6.0.0-beta.8

package/dist/index.cjs.js

@@ -19446,33 +19446,31 @@ var DropdownItemWrapper = styled__default.div.withConfig({
 var SearchInput = styled__default.input.withConfig({
   displayName: "Dropdown__SearchInput",
   componentId: "sc-pn6m0h-3"
-})(["border:none;background-color:", ";font-size:16px;height:24px;min-width:75%;"], function (_ref8) {
-  var themeValues = _ref8.themeValues,
-      isOpen = _ref8.isOpen;
-  return isOpen ? themeValues.hoverColor && themeValues.hoverColor : "WHITE";
-});
-
-var Dropdown = function Dropdown(_ref9) {
-  var placeholder = _ref9.placeholder,
-      options = _ref9.options,
-      value = _ref9.value,
-      isOpen = _ref9.isOpen,
-      isError = _ref9.isError,
-      onSelect = _ref9.onSelect,
-      _ref9$disabledValues = _ref9.disabledValues,
-      disabledValues = _ref9$disabledValues === void 0 ? [] : _ref9$disabledValues,
-      _ref9$onClick = _ref9.onClick,
-      onClick = _ref9$onClick === void 0 ? noop : _ref9$onClick,
-      themeValues = _ref9.themeValues,
-      maxHeight = _ref9.maxHeight,
-      _ref9$widthFitOptions = _ref9.widthFitOptions,
-      widthFitOptions = _ref9$widthFitOptions === void 0 ? false : _ref9$widthFitOptions,
-      disabled = _ref9.disabled,
-      _ref9$hasTitles = _ref9.hasTitles,
-      hasTitles = _ref9$hasTitles === void 0 ? false : _ref9$hasTitles,
-      _ref9$autoEraseTypeAh = _ref9.autoEraseTypeAhead,
-      autoEraseTypeAhead = _ref9$autoEraseTypeAh === void 0 ? true : _ref9$autoEraseTypeAh,
-      ariaLabelledby = _ref9.ariaLabelledby;
+})(["border:none;background-color:transparent;font-size:16px;height:24px;min-width:80%;"]);
+
+var Dropdown = function Dropdown(_ref8) {
+  var placeholder = _ref8.placeholder,
+      options = _ref8.options,
+      value = _ref8.value,
+      isOpen = _ref8.isOpen,
+      isError = _ref8.isError,
+      onSelect = _ref8.onSelect,
+      _ref8$disabledValues = _ref8.disabledValues,
+      disabledValues = _ref8$disabledValues === void 0 ? [] : _ref8$disabledValues,
+      _ref8$onClick = _ref8.onClick,
+      onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
+      themeValues = _ref8.themeValues,
+      maxHeight = _ref8.maxHeight,
+      _ref8$widthFitOptions = _ref8.widthFitOptions,
+      widthFitOptions = _ref8$widthFitOptions === void 0 ? false : _ref8$widthFitOptions,
+      disabled = _ref8.disabled,
+      _ref8$hasTitles = _ref8.hasTitles,
+      hasTitles = _ref8$hasTitles === void 0 ? false : _ref8$hasTitles,
+      _ref8$autoEraseTypeAh = _ref8.autoEraseTypeAhead,
+      autoEraseTypeAhead = _ref8$autoEraseTypeAh === void 0 ? true : _ref8$autoEraseTypeAh,
+      ariaLabelledby = _ref8.ariaLabelledby,
+      _ref8$autocompleteVal = _ref8.autocompleteValue,
+      autocompleteValue = _ref8$autocompleteVal === void 0 ? "" : _ref8$autocompleteVal;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19530,6 +19528,7 @@ var Dropdown = function Dropdown(_ref9) {
   var onKeyDown = function onKeyDown(e) {
     var _optionRefs$current$l, _optionRefs$current;
 
+    console.log("key down event is", e);
     var key = e.key,
         keyCode = e.keyCode;
     var focus = document.activeElement;
@@ -19604,11 +19603,12 @@ var Dropdown = function Dropdown(_ref9) {
   };
 
   React.useEffect(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) {
@@ -19624,7 +19624,7 @@ var Dropdown = function Dropdown(_ref9) {
       clearTimeout(timer);
       setTimer(setTimeout(function () {
         return setInputValue("");
-      }, 2000));
+      }, 3000));
     }
 
     setFilteredOptions(options.filter(function (option) {
@@ -19633,6 +19633,8 @@ var Dropdown = function Dropdown(_ref9) {
   }, [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);
     }
 
@@ -19669,12 +19671,15 @@ var Dropdown = function Dropdown(_ref9) {
     extraStyles: "height: 48px;\n          ".concat(disabled && "color: #6e727e;\n          background-color: #f7f7f7;\n          pointer-events: none;", "\n          ")
   }, /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
-    bottomItem: 2
+    bottomItem: 2,
+    extraStyles: "position: relative;"
   }, /*#__PURE__*/React__default.createElement(SearchInput, {
     "aria-label": getSelection(),
     placeholder: getSelection(),
     value: inputValue,
-    onChange: noop,
+    onChange: function onChange(e) {
+      console.log("input change event", e);
+    },
     themeValues: themeValues,
     role: "searchbox",
     type: "text",
@@ -19682,7 +19687,10 @@ var Dropdown = function Dropdown(_ref9) {
     "aria-autocomplete": "list",
     "aria-controls": "".concat(ariaLabelledby, "_listbox"),
     "aria-activedescendant": "selected_option",
-    isOpen: isOpen
+    isOpen: isOpen,
+    tabIndex: -1,
+    name: autocompleteValue,
+    autocomplete: autocompleteValue
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
     open: isOpen
   }, /*#__PURE__*/React__default.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React__default.createElement(DropdownContentWrapper, {
@@ -19825,7 +19833,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 = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19880,7 +19889,8 @@ var FormSelect = function FormSelect(_ref) {
     onClick: function onClick() {
       return setOpen(!open);
     },
-    disabled: disabled
+    disabled: disabled,
+    autocompleteValue: autocompleteValue
   }), /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row",
     justify: "space-between"
@@ -20653,7 +20663,8 @@ var CountryDropdown = function CountryDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    onChange: onChange
+    onChange: onChange,
+    autocompleteValue: "country-name"
   });
 };
 
@@ -33069,7 +33080,8 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     fieldActions: fieldActions,
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
-    showErrors: showErrors
+    showErrors: showErrors,
+    autocompleteValue: "address-level1"
   });
 };