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

package/dist/index.esm.js

@@ -19414,7 +19414,7 @@ var DropdownContentWrapper = styled.div.withConfig({
   var maxHeight = _ref3.maxHeight;
   return maxHeight || "400px";
 });
-var DropdownItemWrapper = 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) {
@@ -19435,32 +19435,30 @@ var DropdownItemWrapper = styled.div.withConfig({
       themeValues = _ref7.themeValues;
   return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
 });
-var SearchInput = styled.input.withConfig({
-  displayName: "Dropdown__SearchInput",
-  componentId: "sc-pn6m0h-3"
-})(["border:none;background-color:", ";font-size:16px;height:24px;"], function (_ref8) {
-  var themeValues = _ref8.themeValues;
-  return themeValues.hoverColor && themeValues.hoverColor;
-});
 
-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;
+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 = useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -19482,6 +19480,16 @@ var Dropdown = function Dropdown(_ref9) {
       optionsChanged = _useState8[0],
       setOptionsChanged = _useState8[1];
 
+  var _useState9 = useState(undefined),
+      _useState10 = _slicedToArray(_useState9, 2),
+      selectedRef = _useState10[0],
+      setSelectedRef = _useState10[1];
+
+  var _useState11 = useState(undefined),
+      _useState12 = _slicedToArray(_useState11, 2),
+      focusedRef = _useState12[0],
+      setFocusedRef = _useState12[1];
+
   if (optionsState !== options) {
     setOptionsState(options);
     setOptionsChanged(true);
@@ -19492,10 +19500,10 @@ var Dropdown = function Dropdown(_ref9) {
     setOptionsChanged(false);
   }
 
-  var _useState9 = useState(null),
-      _useState10 = _slicedToArray(_useState9, 2),
-      timer = _useState10[0],
-      setTimer = _useState10[1];
+  var _useState13 = useState(null),
+      _useState14 = _slicedToArray(_useState13, 2),
+      timer = _useState14[0],
+      setTimer = _useState14[1];
 
   var optionRefs = useRef(_toConsumableArray(Array(options.length)).map(function () {
     return /*#__PURE__*/createRef();
@@ -19511,9 +19519,14 @@ var Dropdown = function Dropdown(_ref9) {
   };
 
   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;
+    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) {
@@ -19565,16 +19578,37 @@ var Dropdown = function Dropdown(_ref9) {
         e.preventDefault();
         setInputValue(inputValue.slice(0, -1));
         break;
-    }
 
-    if (keyCode > 64 && keyCode < 91 || keyCode == 32 || keyCode == 189) {
-      e.preventDefault();
-      setInputValue(inputValue + key);
+      case "Home":
+        e.preventDefault();
+        optionRefs.current[0].current.focus();
+        break;
+
+      case "End":
+        e.preventDefault();
+        optionRefs.current[(_optionRefs$current$l = optionRefs === null || optionRefs === void 0 ? void 0 : (_optionRefs$current = optionRefs.current) === null || _optionRefs$current === void 0 ? void 0 : _optionRefs$current.length) !== null && _optionRefs$current$l !== void 0 ? _optionRefs$current$l : 0 - 1].current.focus();
+        break;
+
+      case "Escape":
+        if (isOpen) {
+          onClick();
+        }
+
+        break;
     }
   };
 
   useEffect$1(function () {
-    if (isOpen && 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 && selectedRef.current !== null) {
+      // WAI-ARIA requires the selected option to receive focus
+      selectedRef.current.focus();
+    } else if (isOpen && optionRefs.current[0].current) {
+      // If no selected option, first option receives focus
       optionRefs.current[0].current.focus();
     }
 
@@ -19582,16 +19616,21 @@ var Dropdown = function Dropdown(_ref9) {
     setInputValue("");
   }, [isOpen]);
   useEffect$1(function () {
-    clearTimeout(timer);
-    setTimer(setTimeout(function () {
-      return setInputValue("");
-    }, 2000));
+    if (autoEraseTypeAhead) {
+      clearTimeout(timer);
+      setTimer(setTimeout(function () {
+        return setInputValue("");
+      }, 3000));
+    }
+
     setFilteredOptions(options.filter(function (option) {
       return option.value.toLowerCase().startsWith(inputValue.toLowerCase()) || option.text.toLowerCase().startsWith(inputValue.toLowerCase());
     }));
   }, [inputValue]);
   useEffect$1(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);
     }
 
@@ -19601,70 +19640,92 @@ var Dropdown = function Dropdown(_ref9) {
       dropdownRef.current.focus();
     }
   }, [filteredOptions]);
-  return /*#__PURE__*/React.createElement(Box, {
-    onKeyDown: onKeyDown,
-    onClick: onClick,
-    padding: "0",
-    width: "100%",
-    hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
-    "aria-expanded": isOpen,
-    extraStyles: disabled && "color: #6e727e;\n      background-color: #f7f7f7;\n      pointer-events: none;",
-    title: hasTitles ? getSelection() : null
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    bottomItem: 2,
+    extraStyles: "position: relative;"
   }, /*#__PURE__*/React.createElement(Box, {
-    as: "button",
+    as: "input",
+    "aria-multiline": "false",
+    "aria-autocomplete": "list",
+    "aria-controls": "".concat(ariaLabelledby, "_listbox"),
+    "aria-activedescendant": "focused_option",
+    "aria-owns": "".concat(ariaLabelledby, "_listbox"),
+    "aria-haspopup": "listbox",
+    "aria-labelledby": ariaLabelledby,
+    "aria-expanded": isOpen,
+    autocomplete: autocompleteValue,
     background: isOpen ? themeValues.hoverColor : WHITE,
-    width: "100%",
-    padding: "12px",
-    hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
+    borderRadius: "2px",
     borderSize: "1px",
     borderColor: isError ? ERROR_COLOR : isOpen ? themeValues.selectedColor : GREY_CHATEAU,
-    borderRadius: "2px",
-    tabIndex: 0,
-    dataQa: placeholder,
-    extraStyles: "height: 48px;\n          ".concat(disabled && "color: #6e727e;\n          background-color: #f7f7f7;\n          pointer-events: none;", "\n          ")
-  }, /*#__PURE__*/React.createElement(Stack, {
-    direction: "row",
-    bottomItem: 2
-  }, isOpen ? /*#__PURE__*/React.createElement(SearchInput, {
-    "aria-label": inputValue || "Dropdown awaiting search value",
+    extraStyles: disabled && "color: #6e727e;\n            background-color: #f7f7f7;\n            pointer-events: none;",
+    hoverStyles: "background-color: ".concat(themeValues.hoverColor, ";"),
+    isOpen: isOpen,
+    name: autocompleteValue,
+    onKeyDown: onKeyDown,
+    onClick: onClick,
+    onFocus: onClick,
+    onChange: function onChange(e) {
+      console.log("input change event", e.target);
+      console.log("input change event value", e.target.value);
+      setInputValue(e.target.value);
+    },
+    padding: "12px",
+    placeholder: getSelection(),
+    role: "combobox",
+    themeValues: themeValues,
+    title: hasTitles ? getSelection() : null,
+    type: "text",
+    tabIndex: -1,
     value: inputValue,
-    onChange: noop,
-    themeValues: themeValues
-  }) : /*#__PURE__*/React.createElement(Text$1, {
-    variant: "p",
-    extraStyles: disabled && "color: #6e727e;\n            background-color: #f7f7f7;\n            pointer-events: none;"
-  }, getSelection()), /*#__PURE__*/React.createElement(IconWrapper, {
+    width: "100%",
+    dataQa: placeholder
+  }), /*#__PURE__*/React.createElement(IconWrapper, {
     open: isOpen
-  }, /*#__PURE__*/React.createElement(DropdownIcon, null)))), isOpen ? /*#__PURE__*/React.createElement(DropdownContentWrapper, {
+  }, /*#__PURE__*/React.createElement(DropdownIcon, null))), /*#__PURE__*/React.createElement(Fragment, null, isOpen ? /*#__PURE__*/React.createElement(DropdownContentWrapper, {
     maxHeight: maxHeight,
     open: isOpen,
     ref: dropdownRef,
     widthFitOptions: widthFitOptions,
-    tabIndex: 0
+    tabIndex: 0,
+    role: "listbox",
+    id: "".concat(ariaLabelledby, "_listbox")
   }, /*#__PURE__*/React.createElement(Stack, {
-    childGap: "0"
+    childGap: "0",
+    as: "ul"
   }, filteredOptions.map(function (choice, i) {
+    if (choice.value === value && selectedRef !== optionRefs.current[i]) {
+      setSelectedRef(optionRefs.current[i]);
+    }
+
     return /*#__PURE__*/React.createElement(DropdownItemWrapper, {
+      id: focusedRef === optionRefs.current[i] ? "focused_option" : choice.value,
       key: choice.value,
       ref: optionRefs.current[i],
-      as: "button",
       tabIndex: -1,
       onClick: disabledValues.includes(choice.value) ? function (evt) {
         return evt.preventDefault();
       } : function () {
-        return onSelect(choice.value);
+        setSelectedRef(optionRefs.current[i]);
+        onSelect(choice.value);
       },
       selected: choice.value === value,
+      "aria-selected": choice.value === value,
       disabled: disabledValues.includes(choice.value),
       "data-qa": choice.text,
       themeValues: themeValues,
-      title: hasTitles ? choice.text : null
+      title: hasTitles ? choice.text : null,
+      role: "option",
+      onFocus: function onFocus() {
+        return setFocusedRef(optionRefs.current[i]);
+      }
     }, /*#__PURE__*/React.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,
       extraStyles: "padding-left: 16px; \n                      cursor: ".concat(disabledValues.includes(choice.value) ? "default" : "pointer", "; \n                      white-space: nowrap; \n                      overflow: hidden; \n                      text-overflow: ellipsis;")
     }, choice.text));
-  }))) : /*#__PURE__*/React.createElement(Fragment, null));
+  }))) : /*#__PURE__*/React.createElement(Fragment, null)));
 };
 
 var Dropdown$1 = themeComponent(Dropdown, "Dropdown", fallbackValues$e);
@@ -19765,7 +19826,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),
@@ -19803,7 +19865,7 @@ var FormSelect = function FormSelect(_ref) {
     extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }",
     id: labelTextWhenNoError.replace(/\s+/g, "-")
   }, labelTextWhenNoError))), /*#__PURE__*/React.createElement(Dropdown$1, {
-    "aria-labelledby": labelTextWhenNoError.replace(/\s+/g, "-"),
+    ariaLabelledby: labelTextWhenNoError.replace(/\s+/g, "-"),
     maxHeight: dropdownMaxHeight,
     hasTitles: hasTitles,
     placeholder: options[0] ? options[0].text : "",
@@ -19820,7 +19882,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"
@@ -20593,7 +20656,8 @@ var CountryDropdown = function CountryDropdown(_ref) {
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
     showErrors: showErrors,
-    onChange: onChange
+    onChange: onChange,
+    autocompleteValue: "country-name"
   });
 };
 
@@ -33009,7 +33073,8 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
     fieldActions: fieldActions,
     labelTextWhenNoError: labelTextWhenNoError,
     errorMessages: errorMessages,
-    showErrors: showErrors
+    showErrors: showErrors,
+    autocompleteValue: "address-level1"
   });
 };