@navikt/ds-react 6.7.0 → 6.7.1

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -1,17 +1,11 @@
 import cl from "clsx";
-import React, {
-  SetStateAction,
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from "react";
+import React, { SetStateAction, useCallback, useMemo, useState } from "react";
+import { createContext } from "../../../util/create-context";
 import { useClientLayoutEffect, usePrevious } from "../../../util/hooks";
-import { useInputContext } from "../Input/inputContext";
+import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { toComboboxOption } from "../combobox-utils";
-import { useCustomOptionsContext } from "../customOptionsContext";
+import { useComboboxCustomOptions } from "../customOptionsContext";
 import { ComboboxOption, ComboboxProps } from "../types";
 import filteredOptionsUtils from "./filtered-options-util";
 import useVirtualFocus, { VirtualFocusType } from "./useVirtualFocus";
@@ -24,7 +18,7 @@ type FilteredOptionsProps = {
   };
 };
 
-type FilteredOptionsContextType = {
+type FilteredOptionsContextValue = {
   activeDecendantId?: string;
   allowNewValues?: boolean;
   ariaDescribedBy?: string;
@@ -42,11 +36,14 @@ type FilteredOptionsContextType = {
   shouldAutocomplete?: boolean;
   virtualFocus: VirtualFocusType;
 };
-const FilteredOptionsContext = createContext<FilteredOptionsContextType>(
-  {} as FilteredOptionsContextType,
-);
+const [FilteredOptionsContextProvider, useFilteredOptionsContext] =
+  createContext<FilteredOptionsContextValue>({
+    name: "FilteredOptionsContext",
+    errorMessage:
+      "useFilteredOptionsContext must be used within a FilteredOptionsProvider",
+  });
 
-export const FilteredOptionsProvider = ({
+const FilteredOptionsProvider = ({
   children,
   value: props,
 }: FilteredOptionsProps) => {
@@ -71,7 +68,7 @@ export const FilteredOptionsProvider = ({
   const { maxSelected } = useSelectedOptionsContext();
 
   const [isInternalListOpen, setInternalListOpen] = useState(false);
-  const { customOptions } = useCustomOptionsContext();
+  const { customOptions } = useComboboxCustomOptions();
 
   const filteredOptions = useMemo(() => {
     if (externalFilteredOptions) {
@@ -152,9 +149,9 @@ export const FilteredOptionsProvider = ({
 
   const ariaDescribedBy = useMemo(() => {
     let activeOption;
-    if (!isLoading && filteredOptions.length === 0) {
+    if (!isLoading && filteredOptions.length === 0 && !allowNewValues) {
       activeOption = filteredOptionsUtils.getNoHitsId(id);
-    } else if ((value && value !== "") || isLoading) {
+    } else if (value || isLoading) {
       if (shouldAutocomplete && filteredOptions[0]) {
         activeOption = filteredOptionsUtils.getOptionId(
           id,
@@ -180,6 +177,7 @@ export const FilteredOptionsProvider = ({
     shouldAutocomplete,
     filteredOptions,
     id,
+    allowNewValues,
   ]);
 
   const currentOption = useMemo(
@@ -211,18 +209,10 @@ export const FilteredOptionsProvider = ({
   };
 
   return (
-    <FilteredOptionsContext.Provider value={filteredOptionsState}>
+    <FilteredOptionsContextProvider {...filteredOptionsState}>
       {children}
-    </FilteredOptionsContext.Provider>
+    </FilteredOptionsContextProvider>
   );
 };
 
-export const useFilteredOptionsContext = () => {
-  const context = useContext(FilteredOptionsContext);
-  if (!context) {
-    throw new Error(
-      "useFilteredOptionsContext must be used within a FilteredOptionsProvider",
-    );
-  }
-  return context;
-};
+export { FilteredOptionsProvider, useFilteredOptionsContext };

package/src/form/combobox/Input/{inputContext.tsx → Input.context.tsx}

@@ -1,18 +1,18 @@
 import React, {
   ChangeEvent,
   ChangeEventHandler,
-  createContext,
   useCallback,
-  useContext,
   useMemo,
   useRef,
   useState,
 } from "react";
+import { createContext } from "../../../util/create-context";
 import { useClientLayoutEffect } from "../../../util/hooks";
 import { FormFieldType, useFormField } from "../../useFormField";
+import { ComboboxProps } from "../types";
 
-interface InputContextType extends FormFieldType {
-  clearInput: (event: React.PointerEvent | React.KeyboardEvent) => void;
+interface InputContextValue extends FormFieldType {
+  clearInput: NonNullable<ComboboxProps["onClear"]>;
   error?: string;
   focusInput: () => void;
   inputRef: React.RefObject<HTMLInputElement>;
@@ -22,11 +22,16 @@ interface InputContextType extends FormFieldType {
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   shouldAutocomplete?: boolean;
+  toggleOpenButtonRef: React.RefObject<HTMLButtonElement>;
 }
 
-const InputContext = createContext<InputContextType>({} as InputContextType);
+const [InputContextProvider, useInputContext] =
+  createContext<InputContextValue>({
+    name: "InputContext",
+    errorMessage: "useInputContext must be used within an InputContextProvider",
+  });
 
-export const InputContextProvider = ({ children, value: props }) => {
+const InputProvider = ({ children, value: props }) => {
   const {
     defaultValue = "",
     description,
@@ -52,6 +57,7 @@ export const InputContextProvider = ({ children, value: props }) => {
     "comboboxfield",
   );
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const toggleOpenButtonRef = useRef<HTMLButtonElement>(null);
   const [internalValue, setInternalValue] = useState<string>(defaultValue);
 
   const value = useMemo(
@@ -79,7 +85,7 @@ export const InputContextProvider = ({ children, value: props }) => {
   );
 
   const clearInput = useCallback(
-    (event: React.PointerEvent | React.KeyboardEvent) => {
+    (event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent) => {
       onClear?.(event);
       externalOnChange?.(null, "");
       setValue("");
@@ -98,33 +104,24 @@ export const InputContextProvider = ({ children, value: props }) => {
     }
   }, [value, searchTerm, shouldAutocomplete]);
 
+  const contextValue = {
+    ...formFieldProps,
+    clearInput,
+    error,
+    focusInput,
+    inputRef,
+    value,
+    setValue,
+    onChange,
+    searchTerm,
+    setSearchTerm,
+    shouldAutocomplete,
+    toggleOpenButtonRef,
+  };
+
   return (
-    <InputContext.Provider
-      value={{
-        ...formFieldProps,
-        clearInput,
-        error,
-        focusInput,
-        inputRef,
-        value,
-        setValue,
-        onChange,
-        searchTerm,
-        setSearchTerm,
-        shouldAutocomplete,
-      }}
-    >
-      {children}
-    </InputContext.Provider>
+    <InputContextProvider {...contextValue}>{children}</InputContextProvider>
   );
 };
 
-export const useInputContext = () => {
-  const context = useContext(InputContext);
-  if (!context) {
-    throw new Error(
-      "useInputContext must be used within an InputContextProvider",
-    );
-  }
-  return context;
-};
+export { InputProvider as InputContextProvider, useInputContext };

package/src/form/combobox/Input/Input.tsx

@@ -9,7 +9,7 @@ import { omit } from "../../../util";
 import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
-import { useInputContext } from "./inputContext";
+import { useInputContext } from "./Input.context";
 
 interface InputProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {

package/src/form/combobox/Input/InputController.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { useMergeRefs } from "../../../util/hooks";
+import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
+import SelectedOptions from "../SelectedOptions/SelectedOptions";
+import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { ComboboxProps } from "../types";
+import Input from "./Input";
+import { useInputContext } from "./Input.context";
+import ToggleListButton from "./ToggleListButton";
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+export const InputController = forwardRef<
+  HTMLInputElement,
+  Omit<
+    ComboboxProps,
+    | "label"
+    | "description"
+    | "hideLabel"
+    | "onChange"
+    | "options"
+    | "size"
+    | "onClear"
+    | "value"
+  >
+>((props, ref) => {
+  const {
+    clearButton = true,
+    clearButtonLabel,
+    toggleListButton = true,
+    toggleListButtonLabel,
+    inputClassName,
+    shouldShowSelectedOptions = true,
+    ...rest
+  } = props;
+
+  const {
+    clearInput,
+    focusInput,
+    inputProps,
+    value,
+    size = "medium",
+    inputRef,
+    toggleOpenButtonRef,
+  } = useInputContext();
+
+  const { activeDecendantId } = useFilteredOptionsContext();
+  const { selectedOptions } = useSelectedOptionsContext();
+
+  const mergedInputRef = useMergeRefs(inputRef, ref);
+
+  return (
+    <div
+      className={cl("navds-combobox__wrapper-inner navds-text-field__input", {
+        "navds-combobox__wrapper-inner--virtually-unfocused":
+          activeDecendantId !== undefined,
+      })}
+      onClick={focusInput}
+    >
+      {!shouldShowSelectedOptions ? (
+        <Input
+          id={inputProps.id}
+          ref={mergedInputRef}
+          inputClassName={inputClassName}
+          {...rest}
+        />
+      ) : (
+        <SelectedOptions selectedOptions={selectedOptions} size={size}>
+          <Input
+            id={inputProps.id}
+            ref={mergedInputRef}
+            inputClassName={inputClassName}
+            {...rest}
+          />
+        </SelectedOptions>
+      )}
+      <div>
+        {value && clearButton && (
+          <button
+            type="button"
+            onClick={clearInput}
+            className="navds-combobox__button-clear"
+            tabIndex={-1}
+          >
+            <span className="navds-sr-only">
+              {clearButtonLabel ? clearButtonLabel : "Tøm"}
+            </span>
+            <XMarkIcon aria-hidden />
+          </button>
+        )}
+        {toggleListButton && (
+          <ToggleListButton
+            toggleListButtonLabel={toggleListButtonLabel}
+            ref={toggleOpenButtonRef}
+          />
+        )}
+      </div>
+    </div>
+  );
+});

package/src/form/combobox/{ToggleListButton.tsx → Input/ToggleListButton.tsx}

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon, ChevronUpIcon } from "@navikt/aksel-icons";
-import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
+import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 
 interface ToggleListButtonProps {
   toggleListButtonLabel?: string;

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Chips } from "../../../chips";
-import { useInputContext } from "../Input/inputContext";
+import { useInputContext } from "../Input/Input.context";
 import { ComboboxOption } from "../types";
 import { useSelectedOptionsContext } from "./selectedOptionsContext";
 

package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -1,17 +1,12 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from "react";
+import React, { useCallback, useMemo, useState } from "react";
+import { createContext } from "../../../util/create-context";
 import { usePrevious } from "../../../util/hooks";
-import { useInputContext } from "../Input/inputContext";
+import { useInputContext } from "../Input/Input.context";
 import { isInList } from "../combobox-utils";
-import { useCustomOptionsContext } from "../customOptionsContext";
+import { useComboboxCustomOptions } from "../customOptionsContext";
 import { ComboboxOption, ComboboxProps, MaxSelected } from "../types";
 
-type SelectedOptionsContextType = {
+type SelectedOptionsContextValue = {
   addSelectedOption: (option: ComboboxOption) => void;
   isMultiSelect?: boolean;
   removeSelectedOption: (option: ComboboxOption) => void;
@@ -25,11 +20,10 @@ type SelectedOptionsContextType = {
   ) => void;
 };
 
-const SelectedOptionsContext = createContext<SelectedOptionsContextType>(
-  {} as SelectedOptionsContextType,
-);
+const [SelectedOptionsContextProvider, useSelectedOptionsContext] =
+  createContext<SelectedOptionsContextValue>();
 
-export const SelectedOptionsProvider = ({
+const SelectedOptionsProvider = ({
   children,
   value,
 }: {
@@ -45,7 +39,7 @@ export const SelectedOptionsProvider = ({
     removeCustomOption,
     addCustomOption,
     setCustomOptions,
-  } = useCustomOptionsContext();
+  } = useComboboxCustomOptions();
   const {
     allowNewValues,
     isMultiSelect,
@@ -149,18 +143,10 @@ export const SelectedOptionsProvider = ({
   };
 
   return (
-    <SelectedOptionsContext.Provider value={selectedOptionsState}>
+    <SelectedOptionsContextProvider {...selectedOptionsState}>
       {children}
-    </SelectedOptionsContext.Provider>
+    </SelectedOptionsContextProvider>
   );
 };
 
-export const useSelectedOptionsContext = () => {
-  const context = useContext(SelectedOptionsContext);
-  if (!context) {
-    throw new Error(
-      "useSelectedOptionsContext must be used within a SelectedOptionsProvider",
-    );
-  }
-  return context;
-};
+export { SelectedOptionsProvider, useSelectedOptionsContext };

package/src/form/combobox/{combobox-utils.test.ts → __tests__/combobox-utils.test.ts}

@@ -2,7 +2,7 @@ import {
   isInList,
   mapToComboboxOptionArray,
   toComboboxOption,
-} from "./combobox-utils";
+} from "../combobox-utils";
 
 const list = [
   { label: "Hjelpemidler", value: "HJE" },

package/src/form/combobox/{combobox.test.tsx → __tests__/combobox.test.tsx}

@@ -1,10 +1,9 @@
 /* eslint-disable testing-library/no-unnecessary-act -- https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning */
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React, { useId } from "react";
-import { act } from "react-dom/test-utils";
 import { describe, expect, test, vi } from "vitest";
-import { UNSAFE_Combobox } from "./index";
+import { UNSAFE_Combobox } from "../index";
 
 const options = [
   "banana",

package/src/form/combobox/customOptionsContext.tsx

@@ -1,19 +1,23 @@
-import React, { createContext, useCallback, useContext, useState } from "react";
-import { useInputContext } from "./Input/inputContext";
+import React, { useCallback, useState } from "react";
+import { createContext } from "../../util/create-context";
+import { useInputContext } from "./Input/Input.context";
 import { ComboboxOption } from "./types";
 
-type CustomOptionsContextType = {
+type CustomOptionsContextValue = {
   customOptions: ComboboxOption[];
   removeCustomOption: (option: ComboboxOption) => void;
   addCustomOption: (option: ComboboxOption) => void;
   setCustomOptions: React.Dispatch<React.SetStateAction<ComboboxOption[]>>;
 };
 
-const CustomOptionsContext = createContext<CustomOptionsContextType>(
-  {} as CustomOptionsContextType,
-);
+const [ComboboxCustomOptionsProvider, useComboboxCustomOptions] =
+  createContext<CustomOptionsContextValue>({
+    name: "ComboboxCustomOptions",
+    errorMessage:
+      "useComboboxCustomOptions must be used within a ComboboxCustomOptionsProvider",
+  });
 
-export const CustomOptionsProvider = ({
+const CustomOptionsProvider = ({
   children,
   value,
 }: {
@@ -54,18 +58,10 @@ export const CustomOptionsProvider = ({
   };
 
   return (
-    <CustomOptionsContext.Provider value={customOptionsState}>
+    <ComboboxCustomOptionsProvider {...customOptionsState}>
       {children}
-    </CustomOptionsContext.Provider>
+    </ComboboxCustomOptionsProvider>
   );
 };
 
-export const useCustomOptionsContext = () => {
-  const context = useContext(CustomOptionsContext);
-  if (!context) {
-    throw new Error(
-      "useCustomOptionsContext must be used within a CustomOptionsProvider",
-    );
-  }
-  return context;
-};
+export { CustomOptionsProvider, useComboboxCustomOptions };

package/src/form/combobox/types.ts

@@ -100,7 +100,9 @@ export interface ComboboxProps
    *
    * @param event
    */
-  onClear?: (event: React.PointerEvent | React.KeyboardEvent) => void;
+  onClear?: (
+    event: React.PointerEvent | React.KeyboardEvent | React.MouseEvent,
+  ) => void;
   /**
    * Callback function triggered whenever an option is selected or de-selected.
    *

package/src/overlay/README.md

@@ -0,0 +1,5 @@
+# DismissableLayer API
+
+`DismissableLayer`-API provides a robust handler for layers that can be dismissed by interacting outside of it.
+
+One of the benefits is its ability to handle nested elements, relevant when creating nested dropdowns and similar solutions.