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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0-beta.0",
+  "version": "6.0.0-beta.11",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/country-dropdown/CountryDropdown.js

@@ -19,6 +19,7 @@ const CountryDropdown = ({
     errorMessages={errorMessages}
     showErrors={showErrors}
     onChange={onChange}
+    autocompleteValue="country-name"
   />
 );
 export default CountryDropdown;

package/src/components/atoms/dropdown/Dropdown.js

@@ -41,7 +41,7 @@ const DropdownContentWrapper = styled.div`
   }
 `;
 
-const DropdownItemWrapper = styled.div`
+const DropdownItemWrapper = styled.li`
   background-color: ${({ selected, themeValues }) =>
     selected ? themeValues.selectedColor : WHITE};
   text-align: start;
@@ -72,14 +72,6 @@ const DropdownItemWrapper = styled.div`
   }
 `;
 
-const SearchInput = styled.input`
-  border: none;
-  background-color: ${({ themeValues }) =>
-    themeValues.hoverColor && themeValues.hoverColor};
-  font-size: 16px;
-  height: 24px;
-`;
-
 const Dropdown = ({
   placeholder,
   options,
@@ -93,12 +85,17 @@ const Dropdown = ({
   maxHeight,
   widthFitOptions = false,
   disabled,
-  hasTitles = false
+  hasTitles = false,
+  autoEraseTypeAhead = true, // legacy behavior as of 05/22
+  ariaLabelledby,
+  autocompleteValue = "" // autofill item for browsers, like country-name or address-level1 for state
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
   const [filteredOptions, setFilteredOptions] = useState([]);
   const [optionsChanged, setOptionsChanged] = useState(true);
+  const [selectedRef, setSelectedRef] = useState(undefined);
+  const [focusedRef, setFocusedRef] = useState(undefined);
 
   if (optionsState !== options) {
     setOptionsState(options);
@@ -118,8 +115,11 @@ const Dropdown = ({
     value ? options.find(option => option.value === value)?.text : placeholder;
 
   const onKeyDown = e => {
+    console.log("key down event is", e.target);
+    console.log("key down event value is", e.target.value);
     const { key, keyCode } = e;
     const focus = document.activeElement;
+    console.log("dropdown value is", value);
     console.log("focus is", focus);
     console.log("option refs are", optionRefs.current);
     const optionEl = optionRefs.current.find(ref => ref.current === focus);
@@ -160,15 +160,37 @@ const Dropdown = ({
         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?.length ?? 0 - 1
+        ].current.focus();
+        break;
+      case "Escape":
+        if (isOpen) {
+          onClick();
+        }
+        break;
     }
   };
 
   useEffect(() => {
-    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();
     }
     clearTimeout(timer);
@@ -176,8 +198,10 @@ const Dropdown = ({
   }, [isOpen]);
 
   useEffect(() => {
-    clearTimeout(timer);
-    setTimer(setTimeout(() => setInputValue(""), 2000));
+    if (autoEraseTypeAhead) {
+      clearTimeout(timer);
+      setTimer(setTimeout(() => setInputValue(""), 3000));
+    }
     setFilteredOptions(
       options.filter(
         option =>
@@ -194,6 +218,8 @@ const Dropdown = ({
       !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);
     }
     if (optionRefs.current[0].current) {
@@ -204,107 +230,117 @@ const Dropdown = ({
   }, [filteredOptions]);
 
   return (
-    <Box
-      onKeyDown={onKeyDown}
-      onClick={onClick}
-      padding="0"
-      width="100%"
-      hoverStyles={`background-color: ${themeValues.hoverColor};`}
-      aria-expanded={isOpen}
-      extraStyles={
-        disabled &&
-        `color: #6e727e;
-      background-color: #f7f7f7;
-      pointer-events: none;`
-      }
-      title={hasTitles ? getSelection() : null}
-    >
-      <Box
-        as="button"
-        background={isOpen ? themeValues.hoverColor : WHITE}
-        width="100%"
-        padding="12px"
-        hoverStyles={`background-color: ${themeValues.hoverColor};`}
-        borderSize="1px"
-        borderColor={
-          isError
-            ? ERROR_COLOR
-            : isOpen
-            ? themeValues.selectedColor
-            : GREY_CHATEAU
-        }
-        borderRadius="2px"
-        tabIndex={0}
-        dataQa={placeholder}
-        extraStyles={`height: 48px;
-          ${disabled &&
+    <Fragment>
+      <Stack direction="row" bottomItem={2} extraStyles={`position: relative;`}>
+        <Box
+          as="input"
+          aria-multiline="false"
+          aria-autocomplete="list"
+          aria-controls={`${ariaLabelledby}_listbox`}
+          aria-activedescendant="focused_option"
+          aria-owns={`${ariaLabelledby}_listbox`}
+          aria-haspopup="listbox"
+          aria-labelledby={ariaLabelledby}
+          aria-expanded={isOpen}
+          autocomplete={autocompleteValue}
+          background={isOpen ? themeValues.hoverColor : WHITE}
+          borderRadius="2px"
+          borderSize="1px"
+          borderColor={
+            isError
+              ? ERROR_COLOR
+              : isOpen
+              ? themeValues.selectedColor
+              : GREY_CHATEAU
+          }
+          extraStyles={
+            disabled &&
             `color: #6e727e;
-          background-color: #f7f7f7;
-          pointer-events: none;`}
-          `}
-      >
-        <Stack direction="row" bottomItem={2}>
-          {isOpen ? (
-            <SearchInput
-              aria-label={inputValue || "Dropdown awaiting search value"}
-              value={inputValue}
-              onChange={noop}
-              themeValues={themeValues}
-            />
-          ) : (
-            <Text
-              variant="p"
-              extraStyles={
-                disabled &&
-                `color: #6e727e;
             background-color: #f7f7f7;
             pointer-events: none;`
-              }
-            >
-              {getSelection()}
-            </Text>
-          )}
-          <IconWrapper open={isOpen}>
-            <DropdownIcon />
-          </IconWrapper>
-        </Stack>
-      </Box>
-      {isOpen ? (
-        <DropdownContentWrapper
-          maxHeight={maxHeight}
-          open={isOpen}
-          ref={dropdownRef}
-          widthFitOptions={widthFitOptions}
-          tabIndex={0}
-        >
-          <Stack childGap="0">
-            {filteredOptions.map((choice, i) => (
-              <DropdownItemWrapper
-                key={choice.value}
-                ref={optionRefs.current[i]}
-                as="button"
-                tabIndex={-1}
-                onClick={
-                  disabledValues.includes(choice.value)
-                    ? evt => evt.preventDefault()
-                    : () => onSelect(choice.value)
+          }
+          hoverStyles={`background-color: ${themeValues.hoverColor};`}
+          isOpen={isOpen}
+          name={autocompleteValue}
+          onKeyDown={onKeyDown}
+          onClick={onClick}
+          onFocus={onClick}
+          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}
+          width="100%"
+          dataQa={placeholder}
+        />
+        <IconWrapper open={isOpen}>
+          <DropdownIcon />
+        </IconWrapper>
+      </Stack>
+      <Fragment>
+        {isOpen ? (
+          <DropdownContentWrapper
+            maxHeight={maxHeight}
+            open={isOpen}
+            ref={dropdownRef}
+            widthFitOptions={widthFitOptions}
+            tabIndex={0}
+            role="listbox"
+            id={`${ariaLabelledby}_listbox`}
+          >
+            <Stack childGap="0" as="ul">
+              {filteredOptions.map((choice, i) => {
+                if (
+                  choice.value === value &&
+                  selectedRef !== optionRefs.current[i]
+                ) {
+                  setSelectedRef(optionRefs.current[i]);
                 }
-                selected={choice.value === value}
-                disabled={disabledValues.includes(choice.value)}
-                data-qa={choice.text}
-                themeValues={themeValues}
-                title={hasTitles ? choice.text : null}
-              >
-                <Text
-                  variant="p"
-                  color={
-                    choice.value === value
-                      ? WHITE
-                      : disabledValues.includes(choice.value)
-                      ? STORM_GREY
-                      : MINESHAFT_GREY
-                  }
-                  extraStyles={`padding-left: 16px; 
+                return (
+                  <DropdownItemWrapper
+                    id={
+                      focusedRef === optionRefs.current[i]
+                        ? "focused_option"
+                        : choice.value
+                    }
+                    key={choice.value}
+                    ref={optionRefs.current[i]}
+                    tabIndex={-1}
+                    onClick={
+                      disabledValues.includes(choice.value)
+                        ? evt => evt.preventDefault()
+                        : () => {
+                            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}
+                    role="option"
+                    onFocus={() => setFocusedRef(optionRefs.current[i])}
+                  >
+                    <Text
+                      variant="p"
+                      color={
+                        choice.value === value
+                          ? WHITE
+                          : disabledValues.includes(choice.value)
+                          ? STORM_GREY
+                          : MINESHAFT_GREY
+                      }
+                      extraStyles={`padding-left: 16px; 
                       cursor: ${
                         disabledValues.includes(choice.value)
                           ? "default"
@@ -313,17 +349,19 @@ const Dropdown = ({
                       white-space: nowrap; 
                       overflow: hidden; 
                       text-overflow: ellipsis;`}
-                >
-                  {choice.text}
-                </Text>
-              </DropdownItemWrapper>
-            ))}
-          </Stack>
-        </DropdownContentWrapper>
-      ) : (
-        <Fragment />
-      )}
-    </Box>
+                    >
+                      {choice.text}
+                    </Text>
+                  </DropdownItemWrapper>
+                );
+              })}
+            </Stack>
+          </DropdownContentWrapper>
+        ) : (
+          <Fragment />
+        )}
+      </Fragment>
+    </Fragment>
   );
 };
 

package/src/components/atoms/form-select/FormSelect.js

@@ -19,7 +19,8 @@ const FormSelect = ({
   disabledValues,
   disabled,
   themeValues,
-  hasTitles = false
+  hasTitles = false,
+  autocompleteValue // autofill item for browsers, like country-name or address-level1 for state
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -58,7 +59,7 @@ const FormSelect = ({
         </Cluster>
       </Box>
       <Dropdown
-        aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
+        ariaLabelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
         maxHeight={dropdownMaxHeight}
         hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
@@ -74,6 +75,7 @@ const FormSelect = ({
         }
         onClick={() => setOpen(!open)}
         disabled={disabled}
+        autocompleteValue={autocompleteValue}
       />
       <Stack direction="row" justify="space-between">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (

package/src/components/atoms/state-province-dropdown/StateProvinceDropdown.js

@@ -22,6 +22,7 @@ const FormStateDropdown = ({
       labelTextWhenNoError={labelTextWhenNoError}
       errorMessages={errorMessages}
       showErrors={showErrors}
+      autocompleteValue="address-level1"
     />
   );
 };