@thecb/components 6.0.0-beta.2 → 6.0.0-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0-beta.2",
+  "version": "6.0.0-beta.22",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -78,6 +78,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
+    "core-js": "^3.22.5",
     "formatted-input": "^1.0.0",
     "framer-motion": "^1.11.0",
     "numeral": "^2.0.6",

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

@@ -4,6 +4,8 @@ import Text from "../text";
 import { noop } from "../../../util/general";
 import DropdownIcon from "./DropdownIcon";
 import styled from "styled-components";
+// support for Array.prototype.at() in older browsers
+import "core-js/proposals/relative-indexing-method";
 
 import {
   WHITE,
@@ -16,11 +18,14 @@ import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
 const IconWrapper = styled.div`
+  position: absolute;
   display: flex;
   flex-direction: column;
   justify-content: center;
   transition: transform 0.3s ease;
-  ${({ open }) => (open ? "transform: rotate(-180deg)" : "")}
+  ${({ open }) => (open ? "transform: rotate(-180deg)" : "")};
+  top: 20px;
+  right: 12px;
 `;
 
 const DropdownContentWrapper = styled.div`
@@ -39,9 +44,13 @@ const DropdownContentWrapper = styled.div`
   &:focus {
     outline: none;
   }
+
+  ul {
+    padding-left: 0;
+  }
 `;
 
-const DropdownItemWrapper = styled.div`
+const DropdownItemWrapper = styled.li`
   background-color: ${({ selected, themeValues }) =>
     selected ? themeValues.selectedColor : WHITE};
   text-align: start;
@@ -51,6 +60,7 @@ const DropdownItemWrapper = styled.div`
   padding: 1rem;
   box-sizing: border-box;
   width: 100%;
+  list-style: none;
   cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
 
   &:hover {
@@ -72,14 +82,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 +95,18 @@ const Dropdown = ({
   maxHeight,
   widthFitOptions = false,
   disabled,
-  hasTitles = false
+  hasTitles = false,
+  autoEraseTypeAhead = true,
+  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);
+  const [inputChangedByAutofill, setInputChangedByAutofill] = useState(false);
 
   if (optionsState !== options) {
     setOptionsState(options);
@@ -118,16 +126,17 @@ const Dropdown = ({
     value ? options.find(option => option.value === value)?.text : placeholder;
 
   const onKeyDown = e => {
+    console.log("current input value top of keyDown", inputValue);
     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);
-    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();
@@ -159,24 +168,48 @@ const Dropdown = ({
         break;
       case "Backspace" || "Delete":
         e.preventDefault();
-        console.log("input value is", inputValue);
-        console.log("new input value will be", inputValue.slice(0, -1));
         setInputValue(inputValue.slice(0, -1));
         break;
+      case "Home":
+        e.preventDefault();
+        optionRefs.current[0].current.focus();
+        break;
+      case "End":
+        e.preventDefault();
+        console.log("option refs current", optionRefs.current);
+        optionRefs.current.at(-1).current.focus();
+        break;
+      case "Escape":
+        if (isOpen) {
+          onClick();
+        }
+        break;
     }
     if ((keyCode > 64 && keyCode < 91) || keyCode == 32 || keyCode == 189) {
       e.preventDefault();
+      console.log("current input value inside keydown if", inputValue);
       setInputValue(inputValue + key);
     }
   };
 
+  const handleItemSelection = (evt, choice, i) => {
+    if (disabledValues.includes(choice.value)) {
+      evt.preventDefault();
+    } else {
+      setSelectedRef(optionRefs.current[i]);
+      onSelect(choice.value);
+      if (isOpen) {
+        onClick();
+      }
+    }
+  };
+
   useEffect(() => {
-    console.log(
-      "option refs in isopen useffect",
-      optionRefs.current[0].current
-    );
-    console.log("value in isopen useffect", value);
-    if (isOpen && optionRefs.current[0].current) {
+    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);
@@ -184,8 +217,10 @@ const Dropdown = ({
   }, [isOpen]);
 
   useEffect(() => {
-    clearTimeout(timer);
-    setTimer(setTimeout(() => setInputValue(""), 2000));
+    if (autoEraseTypeAhead) {
+      clearTimeout(timer);
+      setTimer(setTimeout(() => setInputValue(""), 3000));
+    }
     setFilteredOptions(
       options.filter(
         option =>
@@ -197,11 +232,12 @@ const Dropdown = ({
 
   useEffect(() => {
     if (
-      !isOpen &&
+      (!isOpen || inputChangedByAutofill) &&
       filteredOptions[0] &&
       !disabledValues.includes(filteredOptions[0].value) &&
       filteredOptions[0].text != placeholder
     ) {
+      setInputChangedByAutofill(false);
       onSelect(filteredOptions[0].value);
     }
     if (optionRefs.current[0].current) {
@@ -213,26 +249,31 @@ const Dropdown = ({
 
   return (
     <Box
-      onKeyDown={onKeyDown}
-      onClick={onClick}
       padding="0"
+      background={isOpen ? themeValues.hoverColor : WHITE}
+      extraStyles={`position: relative;`}
+      minWidth="100%"
+      onClick={() => {
+        if (!isOpen) {
+          onClick();
+        }
+      }}
+      onKeyDown={onKeyDown}
       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"
+        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}
-        width="100%"
-        padding="12px"
-        hoverStyles={`background-color: ${themeValues.hoverColor};`}
+        borderRadius="2px"
         borderSize="1px"
         borderColor={
           isError
@@ -241,78 +282,95 @@ const Dropdown = ({
             ? themeValues.selectedColor
             : GREY_CHATEAU
         }
-        borderRadius="2px"
-        tabIndex={0}
-        dataQa={placeholder}
-        extraStyles={`height: 48px;
-          ${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;
+        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}
+        minHeight="48px"
+        minWidth="100%"
+        name={autocompleteValue}
+        onChange={e => {
+          console.log("current input value onChange", inputValue);
+          console.log("input change event", e.target);
+          console.log("input change event value", e.target.value);
+          // support autofill and copy/paste
+          if (e.target.value !== inputValue) {
+            setInputValue(e.target.value);
+            setInputChangedByAutofill(true);
+          }
+        }}
+        padding="12px"
+        placeholder={getSelection()}
+        role="combobox"
+        themeValues={themeValues}
+        title={hasTitles ? getSelection() : null}
+        type="text"
+        tabIndex={0}
+        value={inputValue}
+        width="100%"
+        dataQa={placeholder}
+      />
+      <IconWrapper open={isOpen} onClick={onClick}>
+        <DropdownIcon />
+      </IconWrapper>
+      <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={e => handleItemSelection(e, choice, i)}
+                    onKeyDown={e => {
+                      if (e.keyCode === 13) {
+                        handleItemSelection(e, choice, i);
+                      }
+                    }}
+                    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"
@@ -321,16 +379,18 @@ const Dropdown = ({
                       white-space: nowrap; 
                       overflow: hidden; 
                       text-overflow: ellipsis;`}
-                >
-                  {choice.text}
-                </Text>
-              </DropdownItemWrapper>
-            ))}
-          </Stack>
-        </DropdownContentWrapper>
-      ) : (
-        <Fragment />
-      )}
+                    >
+                      {choice.text}
+                    </Text>
+                  </DropdownItemWrapper>
+                );
+              })}
+            </Stack>
+          </DropdownContentWrapper>
+        ) : (
+          <Fragment />
+        )}
+      </Fragment>
     </Box>
   );
 };

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/layouts/Box.js

@@ -80,7 +80,7 @@ const Box = ({
     onTouchEnd={onTouchEnd}
     {...rest}
   >
-    {safeChildren(children, <Fragment />)}
+    {children && safeChildren(children, <Fragment />)}
   </BoxWrapper>
 );
 

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

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