@simplybusiness/mobius 5.5.0 → 5.6.0

package/src/components/Combobox/Combobox.tsx

@@ -1,33 +1,42 @@
-import { forwardRef, useId, useRef, useState, useEffect } from "react";
 import classNames from "classnames/dedupe";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import type { ForwardedRefComponent } from "../../types";
 import { TextField } from "../TextField";
+import { Listbox } from "./Listbox"; // Import Listbox component
 import type {
-  ComboboxProps,
   ComboboxElementType,
-  ComboboxRef,
   ComboboxOption,
+  ComboboxOptions,
+  ComboboxProps,
+  ComboboxRef,
 } from "./types";
-import type { ForwardedRefComponent } from "../../types";
-
-const getOptionValue = (option: ComboboxOption) =>
-  typeof option === "string" ? option : option.value;
-
-const getOptionLabel = (option: ComboboxOption) =>
-  typeof option === "string" ? option : option.label;
+import { useComboboxHighlight } from "./useComboboxHighlight";
+import { filterOptions, getOptionValue, isOptionGroup } from "./utils";
 
 export const Combobox: ForwardedRefComponent<
   ComboboxProps,
   ComboboxElementType
 > = forwardRef((props: ComboboxProps, ref: ComboboxRef) => {
-  const { defaultValue, options, onSelected } = props;
+  const { defaultValue, options, onSelected, className, placeholder, icon } =
+    props;
 
-  const fallbackRef = useRef();
+  const fallbackRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState(defaultValue || "");
   const [isOpen, setIsOpen] = useState(false);
-  const [highlightedIndex, setHighlightedIndex] = useState(-1);
-  const [filteredOptions, setFilteredOptions] = useState<ComboboxOption[]>([]);
+  const [filteredOptions, setFilteredOptions] = useState<ComboboxOptions>([]);
+  const {
+    highlightedIndex,
+    highlightedGroupIndex,
+    highlightNextOption,
+    highlightPreviousOption,
+    highlightFirstOption,
+    highlightLastOption,
+    clearHighlight,
+  } = useComboboxHighlight(filteredOptions);
+
   const inputRef = ref || fallbackRef;
   const listboxId = useId();
+  const blurTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   useEffect(() => {
     const fetchOptions = async () => {
@@ -35,13 +44,7 @@ export const Combobox: ForwardedRefComponent<
         const result = await options(inputValue);
         setFilteredOptions(result);
       } else {
-        setFilteredOptions(
-          options.filter(option =>
-            getOptionLabel(option)
-              .toLowerCase()
-              .includes(inputValue.toLowerCase()),
-          ),
-        );
+        setFilteredOptions(filterOptions(options, inputValue));
       }
     };
 
@@ -49,75 +52,101 @@ export const Combobox: ForwardedRefComponent<
   }, [inputValue, options]);
 
   const handleFocus = () => {
+    if (blurTimeoutRef.current) {
+      clearTimeout(blurTimeoutRef.current);
+      blurTimeoutRef.current = null;
+    }
     setIsOpen(true);
   };
 
   const handleBlur = () => {
-    setIsOpen(false);
+    blurTimeoutRef.current = setTimeout(() => {
+      setIsOpen(false);
+    }, 150);
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     setInputValue(newValue);
     setIsOpen(true);
-    setHighlightedIndex(-1);
+    clearHighlight();
   };
 
   const handleOptionSelect = (option: ComboboxOption) => {
     const value = getOptionValue(option);
+    if (!value) return;
     setIsOpen(false);
     setInputValue(value);
     onSelected?.(value);
   };
 
+  function getHighlightedOption() {
+    if (highlightedIndex === -1) return undefined;
+
+    if (isOptionGroup(filteredOptions)) {
+      const group = filteredOptions[highlightedGroupIndex];
+      return group?.options[highlightedIndex];
+    }
+
+    return filteredOptions[highlightedIndex];
+  }
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
         setIsOpen(true);
-        setHighlightedIndex(prev =>
-          prev < filteredOptions.length - 1 ? prev + 1 : 0,
-        );
+        highlightNextOption();
         break;
       case "ArrowUp":
         e.preventDefault();
         setIsOpen(true);
-        setHighlightedIndex(prev =>
-          prev > 0 ? prev - 1 : filteredOptions.length - 1,
-        );
+        highlightPreviousOption();
+        break;
+      case "Home":
+        e.preventDefault();
+        setIsOpen(true);
+        highlightFirstOption();
+        break;
+      case "End":
+        e.preventDefault();
+        setIsOpen(true);
+        highlightLastOption();
         break;
       case "Enter":
         e.preventDefault();
-        if (isOpen && highlightedIndex >= 0) {
-          handleOptionSelect(filteredOptions[highlightedIndex]);
-        } else if (
-          isOpen &&
-          highlightedIndex === -1 &&
-          filteredOptions.length > 0
-        ) {
-          handleOptionSelect(filteredOptions[0]);
+        if (isOpen) {
+          handleOptionSelect(getHighlightedOption()!);
         }
         break;
       case "Escape":
         e.preventDefault();
         setIsOpen(false);
-        setHighlightedIndex(-1);
+        clearHighlight();
         break;
       default:
       // Do nothing
     }
   };
 
+  const classes = classNames(
+    "mobius mobius-combobox",
+    { expanded: isOpen },
+    className,
+  );
+
   return (
-    <div className="mobius mobius-combobox">
+    <div className={classes}>
       <TextField
         className="mobius-combobox__input"
         role="combobox"
         value={inputValue}
+        placeholder={placeholder}
         onFocus={handleFocus}
         onBlur={handleBlur}
         onKeyDown={handleKeyDown}
         onChange={handleInputChange}
+        autoComplete="off"
         aria-autocomplete="list"
         aria-haspopup="listbox"
         aria-controls={listboxId}
@@ -125,29 +154,20 @@ export const Combobox: ForwardedRefComponent<
         aria-activedescendant={
           highlightedIndex === -1
             ? undefined
-            : `${listboxId}-option-${highlightedIndex}`
+            : `${listboxId}-option-${highlightedGroupIndex}-${highlightedIndex}`
         }
-        // @ts-expect-error I have no idea how ref typing works
+        prefixInside={icon}
         ref={inputRef}
       />
       {isOpen && (
-        <ul role="listbox" id={listboxId} className="mobius-combobox__list">
-          {filteredOptions.map((option, index) => (
-            <li
-              role="option"
-              key={getOptionValue(option)}
-              id={`${listboxId}-option-${index}`}
-              aria-selected={highlightedIndex === index}
-              onMouseDown={() => handleOptionSelect(option)}
-              className={classNames("mobius-combobox__option", {
-                "mobius-combobox__option--is-highlighted":
-                  highlightedIndex === index,
-              })}
-            >
-              {getOptionLabel(option)}
-            </li>
-          ))}
-        </ul>
+        <Listbox
+          id={listboxId}
+          options={filteredOptions}
+          highlightedIndex={highlightedIndex}
+          highlightedGroupIndex={highlightedGroupIndex}
+          onOptionSelect={handleOptionSelect}
+          expanded={isOpen}
+        />
       )}
     </div>
   );

package/src/components/Combobox/Listbox.tsx

@@ -0,0 +1,74 @@
+import classNames from "classnames";
+import { Option } from "./Option";
+import type { ComboboxOption, ComboboxOptions } from "./types";
+import { isOptionGroup } from "./utils";
+
+export type ListboxProps = {
+  id: string;
+  options: ComboboxOptions;
+  highlightedIndex: number;
+  highlightedGroupIndex: number;
+  onOptionSelect: (option: ComboboxOption) => void;
+  expanded?: boolean;
+};
+
+export const Listbox = ({
+  id,
+  options,
+  highlightedIndex,
+  highlightedGroupIndex,
+  onOptionSelect,
+  expanded = false,
+}: ListboxProps) => {
+  const classes = classNames("mobius-combobox__list", {
+    expanded,
+  });
+
+  return (
+    <div role="listbox" id={id} className={classes}>
+      {isOptionGroup(options)
+        ? options.map((option, groupIndex) => (
+            <ul
+              role="group"
+              key={option.heading}
+              aria-labelledby={`${id}-group-${groupIndex}`}
+              className="mobius-combobox__group"
+            >
+              <li
+                role="presentation"
+                id={`${id}-group-${groupIndex}`}
+                className="mobius-combobox__group-label"
+              >
+                {option.heading}
+              </li>
+              {option.options.map((groupOption, index) => (
+                <Option
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={`${id}-option-${groupIndex}-${index}`}
+                  option={groupOption}
+                  index={index}
+                  groupIndex={groupIndex}
+                  isHighlighted={
+                    highlightedIndex === index &&
+                    highlightedGroupIndex === groupIndex
+                  }
+                  onOptionSelect={onOptionSelect}
+                  id={id}
+                />
+              ))}
+            </ul>
+          ))
+        : options.map((option, index) => (
+            <Option
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              option={option}
+              index={index}
+              isHighlighted={highlightedIndex === index}
+              onOptionSelect={onOptionSelect}
+              id={id}
+            />
+          ))}
+    </div>
+  );
+};

package/src/components/Combobox/Option.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useRef } from "react";
+import classNames from "classnames/dedupe";
+import { getOptionValue, getOptionLabel } from "./utils";
+import type { ComboboxOptionProps } from "./types";
+
+export const Option = ({
+  option,
+  index,
+  groupIndex = 0,
+  isHighlighted,
+  onOptionSelect,
+  id,
+}: ComboboxOptionProps) => {
+  const optionRef = useRef<HTMLLIElement>(null);
+
+  useEffect(() => {
+    if (
+      isHighlighted &&
+      optionRef.current &&
+      optionRef.current.scrollIntoView
+    ) {
+      optionRef.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [isHighlighted]);
+
+  return (
+    <li
+      ref={optionRef}
+      role="option"
+      key={getOptionValue(option)}
+      id={`${id}-option-${groupIndex}-${index}`}
+      aria-selected={isHighlighted}
+      onMouseDown={() => onOptionSelect(option)}
+      className={classNames("mobius-combobox__option", {
+        "mobius-combobox__option--is-highlighted": isHighlighted,
+      })}
+    >
+      {getOptionLabel(option)}
+    </li>
+  );
+};

package/src/components/Combobox/fixtures.tsx

@@ -91,3 +91,114 @@ export const FRUITS_OBJECTS = [
   { label: "Tangerine", value: "tangerine" },
   { label: "Watermelon", value: "watermelon" },
 ];
+
+export const FRUITS_GROUPS = [
+  {
+    heading: "A-L",
+    options: [
+      "Apple",
+      "Apricot",
+      "Avocado",
+      "Banana",
+      "Blackberry",
+      "Blueberry",
+      "Cantaloupe",
+      "Cherry",
+      "Clementine",
+      "Coconut",
+      "Cranberry",
+      "Date",
+      "Dragonfruit",
+      "Durian",
+      "Elderberry",
+      "Fig",
+      "Grape",
+      "Grapefruit",
+      "Guava",
+      "Honeydew",
+      "Jackfruit",
+      "Kiwi",
+      "Kumquat",
+      "Lemon",
+      "Lime",
+      "Lychee",
+    ],
+  },
+  {
+    heading: "M-Z",
+    options: [
+      "Mango",
+      "Mulberry",
+      "Nectarine",
+      "Orange",
+      "Papaya",
+      "Passionfruit",
+      "Peach",
+      "Pear",
+      "Persimmon",
+      "Pineapple",
+      "Plum",
+      "Pomegranate",
+      "Raspberry",
+      "Redcurrant",
+      "Starfruit",
+      "Strawberry",
+      "Tangerine",
+      "Watermelon",
+    ],
+  },
+];
+
+export const US_STATES = [
+  "Alabama",
+  "Alaska",
+  "Arizona",
+  "Arkansas",
+  "California",
+  "Colorado",
+  "Connecticut",
+  "Delaware",
+  "District Of Columbia",
+  "Florida",
+  "Georgia",
+  "Hawaii",
+  "Idaho",
+  "Illinois",
+  "Indiana",
+  "Iowa",
+  "Kansas",
+  "Kentucky",
+  "Louisiana",
+  "Maine",
+  "Maryland",
+  "Massachusetts",
+  "Michigan",
+  "Minnesota",
+  "Mississippi",
+  "Missouri",
+  "Montana",
+  "Nebraska",
+  "Nevada",
+  "New Hampshire",
+  "New Jersey",
+  "New Mexico",
+  "New York",
+  "North Carolina",
+  "North Dakota",
+  "Ohio",
+  "Oklahoma",
+  "Oregon",
+  "Pennsylvania",
+  "Rhode Island",
+  "South Carolina",
+  "South Dakota",
+  "Tennessee",
+  "Texas",
+  "Utah",
+  "Vermont",
+  "Virginia",
+  "Washington",
+  "West Virginia",
+  "Wisconsin",
+  "Wyoming",
+];

package/src/components/Combobox/types.tsx

@@ -1,12 +1,14 @@
-import type { Ref } from "react";
+import type { ReactElement, Ref } from "react";
 import type { TextFieldElementType, TextFieldProps } from "../TextField";
 
 export type ComboboxProps = TextFieldProps & {
   /** The list of options to display in the dropdown */
   options:
-    | ComboboxOption[]
-    | ((filter: string) => ComboboxOption[])
-    | ((filter: string) => Promise<ComboboxOption[]>);
+    | ComboboxOptions
+    | ((filter: string) => ComboboxOptions)
+    | ((filter: string) => Promise<ComboboxOptions>);
+  /** An icon to display in TextField (left side) */
+  icon?: ReactElement;
   /** The default value of the selected option */
   defaultValue?: string | undefined;
   /** Callback when the selected option changes */
@@ -15,6 +17,22 @@ export type ComboboxProps = TextFieldProps & {
 
 export type ComboboxOption = string | { label: string; value: string };
 
+export type ComboboxOptionGroup = {
+  heading: string;
+  options: ComboboxOption[];
+};
+
+export type ComboboxOptions = ComboboxOption[] | ComboboxOptionGroup[];
+
 export type ComboboxElementType = TextFieldElementType;
 
 export type ComboboxRef = Ref<ComboboxElementType>;
+
+export type ComboboxOptionProps = {
+  option: ComboboxOption;
+  index: number;
+  groupIndex?: number;
+  isHighlighted: boolean;
+  onOptionSelect: (option: ComboboxOption) => void;
+  id: string;
+};