Add new useVirtualFocus hook, for use in Combobox

.changeset/weak-dodos-attend.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Added useVirtualFocus hook - used in Combobox for now

@navikt/core/react/src/form/combobox/Combobox.tsx

@@ -33,7 +33,7 @@ export const Combobox = forwardRef<
 
   const toggleListButtonRef = useRef<HTMLButtonElement>(null);
 
-  const { currentOption, toggleIsListOpen } = useFilteredOptionsContext();
+  const { activeDecendantId, toggleIsListOpen } = useFilteredOptionsContext();
   const { selectedOptions } = useSelectedOptionsContext();
 
   const {
@@ -92,7 +92,7 @@ export const Combobox = forwardRef<
             "navds-combobox__wrapper-inner navds-text-field__input",
             {
               "navds-combobox__wrapper-inner--virtually-unfocused":
-                currentOption !== null,
+                activeDecendantId !== null,
             }
           )}
           onClick={focusInput}

@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -6,6 +6,7 @@ import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsCon
 import { useInputContext } from "../Input/inputContext";
 import { Loader } from "../../../loader";
 import { BodyShort, Label } from "../../../typography";
+import filteredOptionsUtil from "./filtered-options-util";
 
 const FilteredOptions = () => {
   const {
@@ -18,13 +19,13 @@ const FilteredOptions = () => {
     isLoading,
     isListOpen,
     filteredOptions,
-    filteredOptionsIndex,
     filteredOptionsRef,
     isMouseLastUsedInputDevice,
     setIsMouseLastUsedInputDevice,
     isValueNew,
-    setFilteredOptionsIndex,
+    moveFocusToElement,
     toggleIsListOpen,
+    activeDecendantId,
   } = useFilteredOptionsContext();
   const { isMultiSelect, selectedOptions, toggleOption } =
     useSelectedOptionsContext();
@@ -36,7 +37,7 @@ const FilteredOptions = () => {
         "navds-combobox__list--closed": !isListOpen,
         "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
       })}
-      id={`${id}-filtered-options`}
+      id={filteredOptionsUtil.getFilteredOptionsId(id)}
       role="listbox"
       tabIndex={-1}
     >
@@ -45,7 +46,8 @@ const FilteredOptions = () => {
           className="navds-combobox__list-item--loading"
           role="option"
           aria-selected={false}
-          id={`${id}-is-loading`}
+          id={filteredOptionsUtil.getIsLoadingId(id)}
+          data-no-focus="true"
         >
           <Loader aria-label="Søker..." />
         </li>
@@ -54,8 +56,10 @@ const FilteredOptions = () => {
         <li
           tabIndex={-1}
           onMouseMove={() => {
-            if (filteredOptionsIndex !== -1) {
-              setFilteredOptionsIndex(-1);
+            if (
+              activeDecendantId !== filteredOptionsUtil.getAddNewOptionId(id)
+            ) {
+              moveFocusToElement(filteredOptionsUtil.getAddNewOptionId(id));
               setIsMouseLastUsedInputDevice(true);
             }
           }}
@@ -64,10 +68,10 @@ const FilteredOptions = () => {
             if (!isMultiSelect && !selectedOptions.includes(value))
               toggleIsListOpen(false);
           }}
-          id={`${id}-combobox-new-option`}
+          id={filteredOptionsUtil.getAddNewOptionId(id)}
           className={cl("navds-combobox__list-item__new-option", {
             "navds-combobox__list-item__new-option--focus":
-              filteredOptionsIndex === -1,
+              activeDecendantId === filteredOptionsUtil.getAddNewOptionId(id),
           })}
           role="option"
           aria-selected={false}
@@ -86,24 +90,28 @@ const FilteredOptions = () => {
           className="navds-combobox__list-item__no-options"
           role="option"
           aria-selected={false}
-          id={`${id}-no-hits`}
+          id={filteredOptionsUtil.getNoHitsId(id)}
+          data-no-focus="true"
         >
           Ingen søketreff
         </li>
       )}
-      {filteredOptions.map((option, index) => (
+      {filteredOptions.map((option) => (
         <li
           className={cl("navds-combobox__list-item", {
-            "navds-combobox__list-item--focus": index === filteredOptionsIndex,
+            "navds-combobox__list-item--focus":
+              activeDecendantId === filteredOptionsUtil.getOptionId(id, option),
             "navds-combobox__list-item--selected":
               selectedOptions.includes(option),
           })}
-          id={`${id}-option-${option.replace(" ", "-")}`}
+          id={filteredOptionsUtil.getOptionId(id, option)}
           key={option}
           tabIndex={-1}
           onMouseMove={() => {
-            if (filteredOptionsIndex !== index) {
-              setFilteredOptionsIndex(index);
+            if (
+              activeDecendantId !== filteredOptionsUtil.getOptionId(id, option)
+            ) {
+              moveFocusToElement(filteredOptionsUtil.getOptionId(id, option));
               setIsMouseLastUsedInputDevice(true);
             }
           }}

@navikt/core/react/src/form/combobox/FilteredOptions/filtered-options-util.ts

@@ -0,0 +1,38 @@
+const normalizeText = (text: string): string =>
+  typeof text === "string" ? `${text}`.toLowerCase().trim() : "";
+
+const isPartOfText = (value, text) =>
+  normalizeText(text).startsWith(normalizeText(value ?? ""));
+
+const isValueInList = (value, list) =>
+  list?.find((listItem) => normalizeText(value) === normalizeText(listItem));
+
+const getMatchingValuesFromList = (value, list) =>
+  list?.filter((listItem) => isPartOfText(value, listItem));
+
+const getFilteredOptionsId = (comboboxId: string) =>
+  `${comboboxId}-filtered-options`;
+
+const getOptionId = (comboboxId: string, option: string) =>
+  `${comboboxId.toLocaleLowerCase()}-option-${option
+    .replace(" ", "-")
+    .toLocaleLowerCase()}`;
+
+const getAddNewOptionId = (comboboxId: string) =>
+  `${comboboxId}-combobox-new-option`;
+
+const getIsLoadingId = (comboboxId: string) => `${comboboxId}-is-loading`;
+
+const getNoHitsId = (comboboxId: string) => `${comboboxId}-no-hits`;
+
+export default {
+  normalizeText,
+  isPartOfText,
+  isValueInList,
+  getMatchingValuesFromList,
+  getFilteredOptionsId,
+  getAddNewOptionId,
+  getOptionId,
+  getIsLoadingId,
+  getNoHitsId,
+};