@thecb/components 6.0.0-beta.8 → 6.1.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0-beta.8",
+  "version": "6.1.0-beta.0",
   "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/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: transparent;
-  font-size: 16px;
-  height: 24px;
-  min-width: 80%;
-`;
-
 const Dropdown = ({
   placeholder,
   options,
@@ -94,15 +96,19 @@ const Dropdown = ({
   widthFitOptions = false,
   disabled,
   hasTitles = false,
-  autoEraseTypeAhead = true, // legacy behavior as of 05/22
+  autoEraseTypeAhead = true,
   ariaLabelledby,
-  autocompleteValue = "" // autofill item for browsers, like country-name or address-level1 for state
+  autocompleteValue = "", // browser autofill value, like country-name or address-level1 for state
+  smoothScroll = true
 }) => {
   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);
+  const [focusedByClick, setFocusedByClick] = useState(false);
 
   if (optionsState !== options) {
     setOptionsState(options);
@@ -122,17 +128,15 @@ const Dropdown = ({
     value ? options.find(option => option.value === value)?.text : placeholder;
 
   const onKeyDown = e => {
-    console.log("key down event is", e);
     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();
@@ -172,9 +176,12 @@ const Dropdown = ({
         break;
       case "End":
         e.preventDefault();
-        optionRefs.current[
-          optionRefs?.current?.length ?? 0 - 1
-        ].current.focus();
+        optionRefs.current.at(-1).current.focus();
+        break;
+      case "Escape":
+        if (isOpen) {
+          onClick();
+        }
         break;
     }
     if ((keyCode > 64 && keyCode < 91) || keyCode == 32 || keyCode == 189) {
@@ -183,21 +190,37 @@ const Dropdown = ({
     }
   };
 
+  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);
-    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
+    const selectedRefExists =
+      selectedRef !== undefined && selectedRef.current !== null;
+    if (isOpen && selectedRefExists && !focusedByClick) {
+      // For keyboard users, WAI-ARIA requires the selected option to receive focus
       selectedRef.current.focus();
-    } else if (isOpen && optionRefs.current[0].current) {
+    } else if (isOpen && optionRefs.current[0].current && !focusedByClick) {
       // If no selected option, first option receives focus
       optionRefs.current[0].current.focus();
     }
+    if (isOpen && focusedByClick && selectedRefExists) {
+      // To support autofill for mouse users, we maintain focus on input just scroll item into view
+      selectedRef.current.scrollIntoView({
+        behavior: smoothScroll ? "smooth" : "auto",
+        block: "nearest",
+        inline: "start"
+      });
+      setFocusedByClick(false);
+    }
     clearTimeout(timer);
     setInputValue("");
   }, [isOpen]);
@@ -218,14 +241,20 @@ const Dropdown = ({
 
   useEffect(() => {
     if (
-      !isOpen &&
+      /*
+        Either user has typed a value into input that matches a non-disabled option or
+        user has autofilled or pasted into input a string matching a valid option
+      */
+      (!isOpen || inputChangedByAutofill) &&
       filteredOptions[0] &&
       !disabledValues.includes(filteredOptions[0].value) &&
       filteredOptions[0].text != placeholder
     ) {
-      console.log("filtered options are", filteredOptions);
-      console.log("option refs are", optionRefs);
+      setInputChangedByAutofill(false);
       onSelect(filteredOptions[0].value);
+      if (isOpen) {
+        setTimeout(() => onClick(), 1000);
+      }
     }
     if (optionRefs.current[0].current) {
       optionRefs.current[0].current.focus();
@@ -236,30 +265,32 @@ const Dropdown = ({
 
   return (
     <Box
-      onKeyDown={onKeyDown}
-      onClick={onClick}
       padding="0"
+      background={isOpen ? themeValues.hoverColor : WHITE}
+      extraStyles={`position: relative;`}
+      minWidth="100%"
+      onClick={() => {
+        if (!isOpen) {
+          setFocusedByClick(true);
+          onClick();
+        }
+      }}
+      onKeyDown={onKeyDown}
       width="100%"
-      hoverStyles={`background-color: ${themeValues.hoverColor};`}
-      aria-expanded={isOpen}
-      role="combobox"
-      aria-owns={`${ariaLabelledby}_listbox`}
-      aria-haspopup="listbox"
-      aria-labelledby={ariaLabelledby}
-      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
@@ -268,96 +299,92 @@ const Dropdown = ({
             ? themeValues.selectedColor
             : GREY_CHATEAU
         }
-        borderRadius="2px"
+        extraStyles={
+          disabled &&
+          `color: #6e727e;
+            background-color: #f7f7f7;
+            pointer-events: none;`
+        }
+        hoverStyles={`background-color: ${themeValues.hoverColor};`}
+        isOpen={isOpen}
+        minHeight="48px"
+        minWidth="100%"
+        name={autocompleteValue}
+        onChange={e => {
+          // 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}
-        extraStyles={`height: 48px;
-          ${disabled &&
-            `color: #6e727e;
-          background-color: #f7f7f7;
-          pointer-events: none;`}
-          `}
-      >
-        <Stack
-          direction="row"
-          bottomItem={2}
-          extraStyles={`position: relative;`}
-        >
-          <SearchInput
-            aria-label={getSelection()}
-            placeholder={getSelection()}
-            value={inputValue}
-            onChange={e => {
-              console.log("input change event", e);
-            }}
-            themeValues={themeValues}
-            role="searchbox"
-            type="text"
-            aria-multiline="false"
-            aria-autocomplete="list"
-            aria-controls={`${ariaLabelledby}_listbox`}
-            aria-activedescendant="selected_option"
-            isOpen={isOpen}
-            tabIndex={-1}
-            name={autocompleteValue}
-            autocomplete={autocompleteValue}
-          />
-          <IconWrapper open={isOpen}>
-            <DropdownIcon />
-          </IconWrapper>
-        </Stack>
-      </Box>
-      {isOpen ? (
-        <DropdownContentWrapper
-          maxHeight={maxHeight}
-          open={isOpen}
-          ref={dropdownRef}
-          widthFitOptions={widthFitOptions}
-          tabIndex={0}
-          role="listbox"
-          id={`${ariaLabelledby}_listbox`}
-        >
-          <Stack childGap="0">
-            {filteredOptions.map((choice, i) => {
-              if (
-                choice.value === value &&
-                selectedRef !== optionRefs.current[i]
-              ) {
-                setSelectedRef(optionRefs.current[i]);
-              }
-              return (
-                <DropdownItemWrapper
-                  id={choice.value === value ? "selected_option" : choice.value}
-                  key={choice.value}
-                  ref={optionRefs.current[i]}
-                  as="button"
-                  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"
-                >
-                  <Text
-                    variant="p"
-                    color={
-                      choice.value === value
-                        ? WHITE
-                        : disabledValues.includes(choice.value)
-                        ? STORM_GREY
-                        : MINESHAFT_GREY
+      />
+      <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]);
+                }
+                return (
+                  <DropdownItemWrapper
+                    id={
+                      focusedRef === optionRefs.current[i]
+                        ? "focused_option"
+                        : choice.value
                     }
-                    extraStyles={`padding-left: 16px; 
+                    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"
@@ -366,17 +393,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

@@ -20,7 +20,8 @@ const FormSelect = ({
   disabled,
   themeValues,
   hasTitles = false,
-  autocompleteValue // autofill item for browsers, like country-name or address-level1 for state
+  autocompleteValue, // browser autofill value, like country-name or address-level1 for state
+  smoothScroll = true // whether the browser should animate scroll to selected item on first open
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -76,6 +77,7 @@ const FormSelect = ({
         onClick={() => setOpen(!open)}
         disabled={disabled}
         autocompleteValue={autocompleteValue}
+        smoothScroll={smoothScroll}
       />
       <Stack direction="row" justify="space-between">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (

package/src/components/atoms/layouts/Box.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React, { Fragment, forwardRef } from "react";
 import { BoxWrapper } from "./Box.styled";
 import { safeChildren, screenReaderOnlyStyle } from "../../../util/general";
 
@@ -10,78 +10,84 @@ import { safeChildren, screenReaderOnlyStyle } from "../../../util/general";
   completely off screen (only for users of screen readers)
 */
 
-const Box = ({
-  padding = "16px",
-  borderSize = "0px",
-  borderColor = "transparent",
-  borderRadius,
-  boxShadow = "none",
-  background,
-  color,
-  minHeight,
-  width,
-  minWidth,
-  maxWidth,
-  borderWidthOverride,
-  border,
-  textAlign,
-  hoverStyles,
-  activeStyles,
-  disabledStyles,
-  variant,
-  as,
-  onClick,
-  onKeyDown,
-  onMouseEnter,
-  onMouseLeave,
-  onFocus,
-  onBlur,
-  onTouchEnd,
-  theme,
-  hiddenStyles,
-  extraStyles,
-  srOnly = false,
-  dataQa,
-  children,
-  ...rest
-}) => (
-  <BoxWrapper
-    padding={padding}
-    borderSize={borderSize}
-    borderColor={borderColor}
-    boxShadow={boxShadow}
-    color={color}
-    minHeight={minHeight}
-    width={width}
-    minWidth={minWidth}
-    maxWidth={maxWidth}
-    background={background}
-    borderRadius={borderRadius}
-    borderWidthOverride={borderWidthOverride}
-    border={border}
-    hoverStyles={hoverStyles}
-    activeStyles={activeStyles}
-    disabledStyles={disabledStyles}
-    variant={variant}
-    as={as}
-    onClick={onClick}
-    hiddenStyles={hiddenStyles}
-    onKeyDown={onKeyDown}
-    extraStyles={
-      srOnly ? `${screenReaderOnlyStyle}${extraStyles}` : extraStyles
-    }
-    theme={theme}
-    textAlign={textAlign}
-    data-qa={dataQa}
-    onMouseEnter={onMouseEnter}
-    onMouseLeave={onMouseLeave}
-    onFocus={onFocus}
-    onBlur={onBlur}
-    onTouchEnd={onTouchEnd}
-    {...rest}
-  >
-    {safeChildren(children, <Fragment />)}
-  </BoxWrapper>
+const Box = forwardRef(
+  (
+    {
+      padding = "16px",
+      borderSize = "0px",
+      borderColor = "transparent",
+      borderRadius,
+      boxShadow = "none",
+      background,
+      color,
+      minHeight,
+      width,
+      minWidth,
+      maxWidth,
+      borderWidthOverride,
+      border,
+      textAlign,
+      hoverStyles,
+      activeStyles,
+      disabledStyles,
+      variant,
+      as,
+      onClick,
+      onKeyDown,
+      onMouseEnter,
+      onMouseLeave,
+      onFocus,
+      onBlur,
+      onTouchEnd,
+      theme,
+      hiddenStyles,
+      extraStyles,
+      srOnly = false,
+      dataQa,
+      children,
+      ...rest
+    },
+    ref
+  ) => (
+    <BoxWrapper
+      padding={padding}
+      borderSize={borderSize}
+      borderColor={borderColor}
+      boxShadow={boxShadow}
+      color={color}
+      minHeight={minHeight}
+      width={width}
+      minWidth={minWidth}
+      maxWidth={maxWidth}
+      background={background}
+      borderRadius={borderRadius}
+      borderWidthOverride={borderWidthOverride}
+      border={border}
+      hoverStyles={hoverStyles}
+      activeStyles={activeStyles}
+      disabledStyles={disabledStyles}
+      variant={variant}
+      as={as}
+      onClick={onClick}
+      hiddenStyles={hiddenStyles}
+      onKeyDown={onKeyDown}
+      extraStyles={
+        srOnly ? `${screenReaderOnlyStyle}${extraStyles}` : extraStyles
+      }
+      theme={theme}
+      textAlign={textAlign}
+      data-qa={dataQa}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onTouchEnd={onTouchEnd}
+      ref={ref}
+      {...rest}
+    >
+      {children && safeChildren(children, <Fragment />)}
+    </BoxWrapper>
+  )
 );
 
 export default Box;

package/src/components/molecules/highlight-tab-row/HighlightTabRow.js

@@ -35,6 +35,9 @@ const HighlightTabRow = ({
       role="region"
       aria-label="Payment step"
     >
+      <Box srOnly padding="0">
+        <Text>{`Current step: ${tabs[highlightIndex]}`}</Text>
+      </Box>
       <Center maxWidth="76.5rem">
         <Reel
           padding="0"