@navikt/ds-react 6.6.1 → 6.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.6.1",
+  "version": "6.7.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -310,6 +310,16 @@
         "default": "./cjs/popover/index.js"
       }
     },
+    "./ProgressBar": {
+      "import": {
+        "types": "./esm/progress-bar/index.d.ts",
+        "default": "./esm/progress-bar/index.js"
+      },
+      "require": {
+        "types": "./cjs/progress-bar/index.d.ts",
+        "default": "./cjs/progress-bar/index.js"
+      }
+    },
     "./Provider": {
       "import": {
         "types": "./esm/provider/index.d.ts",
@@ -573,16 +583,17 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^6.6.1",
-    "@navikt/ds-tokens": "^6.6.1",
+    "@floating-ui/react-dom": "^2.0.9",
+    "@navikt/aksel-icons": "^6.7.1",
+    "@navikt/ds-tokens": "^6.7.1",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "8.13.0",
+    "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "^5.16.0",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.2.0",
     "@types/faker": "5.5.8",
     "concurrently": "7.2.1",

package/src/chat/Chat.tsx

@@ -3,6 +3,7 @@ import React, { HTMLAttributes, forwardRef } from "react";
 import { BodyLong } from "../typography";
 import Bubble from "./Bubble";
 
+export const VARIANTS = ["subtle", "info", "neutral"] as const;
 export const POSITIONS = ["left", "right"] as const;
 export const SIZES = ["medium", "small"] as const;
 
@@ -28,7 +29,7 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    * Avoid using the same background as the surface behind Chat.
    * @default "neutral"
    */
-  variant?: "subtle" | "info" | "neutral";
+  variant?: (typeof VARIANTS)[number];
   /**
    * Positions avatar and bubbles.
    * @default "left"

package/src/date/datepicker/parts/DropdownCaption.tsx

@@ -37,7 +37,11 @@ export const DropdownCaption = ({ displayMonth, id }: CaptionProps) => {
   const handleMonthChange: React.ChangeEventHandler<HTMLSelectElement> = (e) =>
     goToMonth(setMonth(startOfMonth(displayMonth), Number(e.target.value)));
 
-  const years = getYears(fromDate, toDate, displayMonth.getFullYear());
+  const years = getYears(
+    fromDate,
+    toDate,
+    displayMonth.getFullYear(),
+  ).reverse();
   const months = getMonths(fromDate, toDate, displayMonth);
 
   const previousLabel = labelPrevious(previousMonth, { locale });

package/src/date/monthpicker/MonthCaption.tsx

@@ -35,7 +35,7 @@ export const MonthCaption = () => {
     if (!years.map((x) => x.getFullYear()).includes(year.getFullYear())) {
       years.push(setYear(startOfYear(new Date()), year.getFullYear()));
     }
-    years.sort((a, b) => a.getFullYear() - b.getFullYear());
+    years.sort((a, b) => b.getFullYear() - a.getFullYear());
   }
 
   const handleYearChange = (e) =>

package/src/form/combobox/Combobox.tsx

@@ -1,57 +1,31 @@
 import cl from "clsx";
-import React, { forwardRef, useRef } from "react";
+import React, { forwardRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import ClearButton from "./ClearButton";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
-import Input from "./Input/Input";
-import { useInputContext } from "./Input/inputContext";
-import SelectedOptions from "./SelectedOptions/SelectedOptions";
-import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsContext";
-import ToggleListButton from "./ToggleListButton";
+import { useInputContext } from "./Input/Input.context";
+import { InputController } from "./Input/InputController";
 import { ComboboxProps } from "./types";
 
 export const Combobox = forwardRef<
   HTMLInputElement,
   Omit<ComboboxProps, "onChange" | "options" | "size" | "onClear" | "value">
 >((props, ref) => {
-  const {
-    className,
-    hideLabel = false,
-    description,
-    label,
-    clearButton = true,
-    clearButtonLabel,
-    toggleListButton = true,
-    toggleListButtonLabel,
-    inputClassName,
-    shouldShowSelectedOptions = true,
-    ...rest
-  } = props;
-
-  const toggleListButtonRef = useRef<HTMLButtonElement>(null);
+  const { className, hideLabel = false, description, label, ...rest } = props;
 
-  const { activeDecendantId, toggleIsListOpen } = useFilteredOptionsContext();
-  const { selectedOptions } = useSelectedOptionsContext();
+  const { toggleIsListOpen } = useFilteredOptionsContext();
 
   const {
-    clearInput,
     error,
     errorId,
-    focusInput,
     hasError,
     inputDescriptionId,
     inputProps,
-    inputRef,
-    value,
     showErrorMsg,
     size = "medium",
   } = useInputContext();
 
-  const mergedInputRef = useMergeRefs(inputRef, ref);
-
   return (
     <ComboboxWrapper
       className={className}
@@ -59,7 +33,6 @@ export const Combobox = forwardRef<
       inputProps={inputProps}
       inputSize={size}
       toggleIsListOpen={toggleIsListOpen}
-      toggleListButtonRef={toggleListButtonRef}
     >
       <Label
         htmlFor={inputProps.id}
@@ -83,50 +56,7 @@ export const Combobox = forwardRef<
         </BodyShort>
       )}
       <div className="navds-combobox__wrapper">
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-        <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 && (
-              <ClearButton
-                handleClear={clearInput}
-                clearButtonLabel={clearButtonLabel}
-                tabIndex={-1}
-              />
-            )}
-            {toggleListButton && (
-              <ToggleListButton
-                toggleListButtonLabel={toggleListButtonLabel}
-                ref={toggleListButtonRef}
-              />
-            )}
-          </div>
-        </div>
+        <InputController ref={ref} {...rest} />
         <FilteredOptions />
       </div>
       <div

package/src/form/combobox/ComboboxProvider.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import Combobox from "./Combobox";
 import { FilteredOptionsProvider } from "./FilteredOptions/filteredOptionsContext";
-import { InputContextProvider } from "./Input/inputContext";
+import { InputContextProvider } from "./Input/Input.context";
 import { SelectedOptionsProvider } from "./SelectedOptions/selectedOptionsContext";
 import { mapToComboboxOptionArray } from "./combobox-utils";
 import { CustomOptionsProvider } from "./customOptionsContext";

package/src/form/combobox/ComboboxWrapper.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { useRef, useState } from "react";
+import { useInputContext } from "./Input/Input.context";
 
 type ComboboxWrapperProps = {
   children: any;
@@ -10,7 +11,6 @@ type ComboboxWrapperProps = {
   };
   inputSize: string;
   toggleIsListOpen: (isListOpen: boolean) => void;
-  toggleListButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
 const ComboboxWrapper = ({
@@ -20,15 +20,16 @@ const ComboboxWrapper = ({
   inputProps,
   inputSize,
   toggleIsListOpen,
-  toggleListButtonRef,
 }: ComboboxWrapperProps) => {
+  const { toggleOpenButtonRef } = useInputContext();
+
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [hasFocusWithin, setHasFocusWithin] = useState(false);
 
   function onFocusInsideWrapper(e) {
     if (
       !wrapperRef.current?.contains(e.relatedTarget) &&
-      toggleListButtonRef?.current !== e.target
+      toggleOpenButtonRef?.current !== e.target
     ) {
       toggleIsListOpen(true);
       setHasFocusWithin(true);

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

@@ -3,7 +3,7 @@ import React from "react";
 import { CheckmarkIcon, PlusIcon } from "@navikt/aksel-icons";
 import { Loader } from "../../../loader";
 import { BodyShort, Label } from "../../../typography";
-import { useInputContext } from "../Input/inputContext";
+import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { isInList, toComboboxOption } from "../combobox-utils";
 import { ComboboxOption } from "../types";
@@ -38,7 +38,7 @@ const FilteredOptions = () => {
   const shouldRenderNonSelectables =
     maxSelected?.isLimitReached || // Render maxSelected message
     isLoading || // Render loading message
-    (!isLoading && filteredOptions.length === 0); // Render no hits message
+    (!isLoading && filteredOptions.length === 0 && !allowNewValues); // Render no hits message
 
   const shouldRenderFilteredOptionsList =
     (allowNewValues && isValueNew && !maxSelected?.isLimitReached) || // Render add new option
@@ -72,7 +72,7 @@ const FilteredOptions = () => {
               <Loader title="Søker..." />
             </div>
           )}
-          {!isLoading && filteredOptions.length === 0 && (
+          {!isLoading && filteredOptions.length === 0 && !allowNewValues && (
             <div
               className="navds-combobox__list-item--no-options"
               id={filteredOptionsUtil.getNoHitsId(id)}

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";