@navikt/ds-react 7.3.1 → 7.4.1

package/src/form/combobox/FilteredOptions/useVirtualFocus.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 export type VirtualFocusType = {
   activeElement: HTMLElement | undefined;
@@ -43,6 +43,11 @@ const useVirtualFocus = (
       : false;
   };
 
+  const setActiveAndScrollToElement = (element?: HTMLElement) => {
+    setActiveElement(element);
+    element?.scrollIntoView?.({ block: "center" });
+  };
+
   const moveFocusUp = () => {
     if (!activeElement) {
       return;
@@ -53,14 +58,14 @@ const useVirtualFocus = (
     if (_currentIndex === 0) {
       setActiveElement(undefined);
     } else {
-      setActiveElement(elementAbove);
+      setActiveAndScrollToElement(elementAbove);
     }
   };
 
   const moveFocusDown = () => {
     const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
     if (!activeElement) {
-      setActiveElement(elementsAbleToReceiveFocus[0]);
+      setActiveAndScrollToElement(elementsAbleToReceiveFocus[0]);
       return;
     }
     const _currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
@@ -68,17 +73,17 @@ const useVirtualFocus = (
       return;
     }
 
-    setActiveElement(elementsAbleToReceiveFocus[_currentIndex + 1]);
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[_currentIndex + 1]);
   };
 
   const resetFocus = () => setActiveElement(undefined);
   const moveFocusToTop = () => {
     const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
-    setActiveElement(elementsAbleToReceiveFocus[0]);
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[0]);
   };
   const moveFocusToBottom = () => {
     const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
-    setActiveElement(
+    setActiveAndScrollToElement(
       elementsAbleToReceiveFocus[elementsAbleToReceiveFocus.length - 1],
     );
   };
@@ -98,7 +103,7 @@ const useVirtualFocus = (
     const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
     const currentIndex = elementsAbleToReceiveFocus.indexOf(activeElement);
     const newIndex = Math.max(currentIndex - numberOfElements, 0);
-    setActiveElement(elementsAbleToReceiveFocus[newIndex]);
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[newIndex]);
   };
 
   const moveFocusDownBy = (numberOfElements: number) => {
@@ -110,13 +115,9 @@ const useVirtualFocus = (
       currentIndex + numberOfElements,
       elementsAbleToReceiveFocus.length - 1,
     );
-    setActiveElement(elementsAbleToReceiveFocus[newIndex]);
+    setActiveAndScrollToElement(elementsAbleToReceiveFocus[newIndex]);
   };
 
-  useEffect(() => {
-    activeElement?.scrollIntoView?.({ block: "nearest" });
-  }, [activeElement]);
-
   return {
     activeElement,
     getElementById,

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

@@ -11,6 +11,7 @@ import { useMergeRefs } from "../../../util/hooks";
 import filteredOptionsUtil from "../FilteredOptions/filtered-options-util";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
+import { ComboboxOption } from "../types";
 import { useInputContext } from "./Input.context";
 
 interface InputProps
@@ -93,19 +94,23 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           clearInput(event);
         } else if ((allowNewValues || shouldAutocomplete) && value !== "") {
           event.preventDefault();
-          // Autocompleting or adding a new value
-          const selectedValue =
-            allowNewValues && isValueNew
-              ? { label: value, value }
-              : filteredOptionsUtil.getFirstValueStartingWith(
-                  value,
-                  filteredOptions,
-                ) || filteredOptions[0];
+
+          const autoCompletedOption =
+            filteredOptionsUtil.getFirstValueStartingWith(
+              value,
+              filteredOptions,
+            );
+          let selectedValue: ComboboxOption | undefined;
+
+          if (shouldAutocomplete && autoCompletedOption) {
+            selectedValue = autoCompletedOption;
+          } else if (allowNewValues && isValueNew) {
+            selectedValue = { label: value, value };
+          }
 
           if (!selectedValue) {
             return;
           }
-
           toggleOption(selectedValue, event);
           if (!isMultiSelect && !isTextInSelectedOptions(selectedValue.label)) {
             toggleIsListOpen(false);
@@ -177,10 +182,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           if (value !== searchTerm) {
             setValue(searchTerm);
           }
-          if (virtualFocus.activeElement === null || !isListOpen) {
+          if (!isListOpen) {
             toggleIsListOpen(true);
+            setTimeout(virtualFocus.moveFocusDown, 0); // Wait until list is visible so that scrollIntoView works
+          } else {
+            virtualFocus.moveFocusDown();
           }
-          virtualFocus.moveFocusDown();
         } else if (e.key === "ArrowUp") {
           if (value !== "" && value !== searchTerm) {
             onChange(value);
@@ -199,19 +206,23 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           virtualFocus.moveFocusToTop();
         } else if (e.key === "End") {
           e.preventDefault();
-          if (virtualFocus.activeElement === null || !isListOpen) {
+          if (!isListOpen) {
             toggleIsListOpen(true);
+            setTimeout(virtualFocus.moveFocusToBottom, 0); // Wait until list is visible so that scrollIntoView works
+          } else {
+            virtualFocus.moveFocusToBottom();
           }
-          virtualFocus.moveFocusToBottom();
         } else if (e.key === "PageUp") {
           e.preventDefault();
           virtualFocus.moveFocusUpBy(6);
         } else if (e.key === "PageDown") {
           e.preventDefault();
-          if (virtualFocus.activeElement === null || !isListOpen) {
+          if (!isListOpen) {
             toggleIsListOpen(true);
+            setTimeout(() => virtualFocus.moveFocusDownBy(6), 0); // Wait until list is visible so that scrollIntoView works
+          } else {
+            virtualFocus.moveFocusDownBy(6);
           }
-          virtualFocus.moveFocusDownBy(6);
         }
       },
       [

package/src/form/combobox/__tests__/combobox.test.tsx

@@ -290,6 +290,45 @@ describe("Render combobox", () => {
         false,
       );
     });
+
+    test("and pressing enter to select autocompleted word will select existing word when addNewOptions is true", async () => {
+      const onToggleSelected = vi.fn();
+      render(
+        <App
+          onToggleSelected={onToggleSelected}
+          options={options.map((opt) => ({
+            label: `${opt} (${opt})`,
+            value: opt,
+          }))}
+          shouldAutocomplete
+          allowNewValues
+        />,
+      );
+
+      const combobox = screen.getByRole("combobox", {
+        name: "Hva er dine favorittfrukter?",
+      });
+
+      await act(async () => {
+        await userEvent.click(combobox);
+
+        await userEvent.type(combobox, "p");
+      });
+
+      expect(combobox.getAttribute("value")).toBe(
+        "passion fruit (passion fruit)",
+      );
+
+      await act(async () => {
+        await userEvent.keyboard("{Enter}");
+      });
+
+      expect(onToggleSelected).toHaveBeenCalledWith(
+        "passion fruit",
+        true,
+        false,
+      );
+    });
   });
 
   describe("has keyboard navigation", () => {

package/src/form/search/Search.tsx

@@ -2,7 +2,6 @@ import cl from "clsx";
 import React, {
   InputHTMLAttributes,
   forwardRef,
-  useCallback,
   useRef,
   useState,
 } from "react";
@@ -10,6 +9,7 @@ import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 import { SearchContext } from "./context";
@@ -68,13 +68,9 @@ export interface SearchProps
    */
   variant?: "primary" | "secondary" | "simple";
   /**
-   * Exposes the HTML size attribute. Specifies the width of the element, in characters.
+   * HTML size attribute. Specifies the width of the input, in characters.
    */
   htmlSize?: number | string;
-  /*
-   * Exposes role attribute.
-   */
-  role?: string;
 }
 
 interface SearchComponent
@@ -123,31 +119,24 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onChange,
       onSearchClick,
       htmlSize,
-      role,
       ...rest
     } = props;
 
     const searchRef = useRef<HTMLInputElement | null>(null);
     const mergedRef = useMergeRefs(searchRef, ref);
-
+    const translate = useI18n("Search");
     const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 
-    const handleChange = useCallback(
-      (v: string) => {
-        value === undefined && setInternalValue(v);
-        onChange?.(v);
-      },
-      [onChange, value],
-    );
+    const handleChange = (newValue: string) => {
+      value === undefined && setInternalValue(newValue);
+      onChange?.(newValue);
+    };
 
-    const handleClear = useCallback(
-      (event: SearchClearEvent) => {
-        onClear?.(event);
-        handleChange("");
-        searchRef.current?.focus?.();
-      },
-      [handleChange, onClear],
-    );
+    const handleClear = (clearEvent: SearchClearEvent) => {
+      onClear?.(clearEvent);
+      handleChange("");
+      searchRef.current?.focus?.();
+    };
 
     const handleClick = () => {
       onSearchClick?.(`${value ?? internalValue}`);
@@ -156,26 +145,22 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
-        onKeyDown={(e) => {
-          if (e.key !== "Escape") {
+        onKeyDown={(event) => {
+          if (event.key !== "Escape") {
             return;
           }
-          searchRef.current?.value &&
-            searchRef.current?.value !== "" &&
-            e.preventDefault();
-
-          handleClear({ trigger: "Escape", event: e });
+          searchRef.current?.value && event.preventDefault();
+          handleClear({ trigger: "Escape", event });
         }}
         className={cl(
           className,
           "navds-form-field",
           `navds-form-field--${size}`,
           "navds-search",
-
           {
             "navds-search--error": hasError,
-            "navds-search--disabled": !!inputProps.disabled,
-            "navds-search--with-size": !!htmlSize,
+            "navds-search--disabled": inputProps.disabled,
+            "navds-search--with-size": htmlSize,
           },
         )}
       >
@@ -215,7 +200,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
               type="search"
-              role={role ?? "searchbox"}
               className={cl(
                 className,
                 "navds-search__input",
@@ -229,11 +213,11 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             {(value ?? internalValue) && clearButton && (
               <button
                 type="button"
-                onClick={(e) => handleClear({ trigger: "Click", event: e })}
+                onClick={(event) => handleClear({ trigger: "Click", event })}
                 className="navds-search__button-clear"
               >
                 <span className="navds-sr-only">
-                  {clearButtonLabel ? clearButtonLabel : "Tøm"}
+                  {clearButtonLabel || translate("clear")}
                 </span>
                 <XMarkIcon aria-hidden />
               </button>

package/src/form/search/SearchButton.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef, useContext } from "react";
 import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { SearchContext } from "./context";
 
 export interface SearchButtonProps
@@ -19,6 +20,7 @@ export type SearchButtonType = React.ForwardRefExoticComponent<
 
 const SearchButton: SearchButtonType = forwardRef(
   ({ className, children, disabled, onClick, ...rest }, ref) => {
+    const translate = useI18n("Search");
     const context = useContext(SearchContext);
 
     if (context === null) {
@@ -40,7 +42,9 @@ const SearchButton: SearchButtonType = forwardRef(
         onClick={composeEventHandlers(onClick, handleClick)}
         icon={
           <MagnifyingGlassIcon
-            {...(children ? { "aria-hidden": true } : { title: "Søk" })}
+            {...(children
+              ? { "aria-hidden": true }
+              : { title: translate("search") })}
           />
         }
       >

package/src/loader/Loader.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { SVGProps, forwardRef } from "react";
 import { omit } from "../util";
 import { useId } from "../util/hooks";
+import { useI18n } from "../util/i18n/i18n.context";
 
 export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**
@@ -19,7 +20,7 @@ export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
     | "xsmall";
   /**
    * Title prop on svg
-   * @default "venter..."
+   * @default "Venter…"
    */
   title?: React.ReactNode;
   /**
@@ -47,7 +48,7 @@ export type LoaderType = React.ForwardRefExoticComponent<
  *
  * @example
  * ```jsx
- * <Loader size="3xlarge" title="Venter..." />
+ * <Loader size="3xlarge" title="Venter…" />
  * ```
  */
 export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
@@ -55,7 +56,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
     {
       className,
       size = "medium",
-      title = "venter...",
+      title,
       transparent = false,
       variant = "neutral",
       id,
@@ -64,6 +65,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
     ref,
   ) => {
     const internalId = useId();
+    const translate = useI18n("Loader");
 
     return (
       <svg
@@ -83,7 +85,9 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
         preserveAspectRatio="xMidYMid"
         {...omit(rest, ["children"])}
       >
-        <title id={id ?? `loader-${internalId}`}>{title}</title>
+        <title id={id ?? `loader-${internalId}`}>
+          {title || translate("title")}
+        </title>
         <circle
           className="navds-loader__background"
           xmlns="http://www.w3.org/2000/svg"

package/src/modal/ModalHeader.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
+import { useI18n } from "../util/i18n/i18n.context";
 import { useModalContext } from "./Modal.context";
 
 export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -16,6 +17,7 @@ export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
   ({ children, className, closeButton = true, ...rest }, ref) => {
     const context = useModalContext();
+    const translate = useI18n("Modal");
 
     return (
       <div {...rest} ref={ref} className={cl("navds-modal__header", className)}>
@@ -32,7 +34,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
               }
             }}
             onClick={context.closeHandler}
-            icon={<XMarkIcon title="Lukk" />}
+            icon={<XMarkIcon title={translate("close")} />}
           />
         )}
         {children}

package/src/pagination/Pagination.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util";
+import { useI18n } from "../util/i18n/i18n.context";
 import PaginationItem, {
   PaginationItemProps,
   PaginationItemType,
@@ -138,6 +139,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
     ref,
   ) => {
     const headingId = useId();
+    const translate = useI18n("Pagination");
 
     if (page < 1) {
       console.error("page cannot be less than 1");
@@ -194,11 +196,11 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
                 <ChevronLeftIcon
                   {...(prevNextTexts
                     ? { "aria-hidden": true }
-                    : { title: "Forrige" })}
+                    : { title: translate("previous") })}
                 />
               }
             >
-              {prevNextTexts && `Forrige`}
+              {prevNextTexts && translate("previous")}
             </Item>
           </li>
           {getSteps({ page, count, siblingCount, boundaryCount }).map(
@@ -241,12 +243,12 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
                 <ChevronRightIcon
                   {...(prevNextTexts
                     ? { "aria-hidden": true }
-                    : { title: "Neste" })}
+                    : { title: translate("next") })}
                 />
               }
               iconPosition="right"
             >
-              {prevNextTexts && `Neste`}
+              {prevNextTexts && translate("next")}
             </Item>
           </li>
         </ul>

package/src/progress-bar/ProgressBar.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef, useRef } from "react";
+import React, { HTMLAttributes, forwardRef, useEffect, useRef } from "react";
+import { useI18n } from "../util/i18n/i18n.context";
 
 interface ProgressBarPropsBase
   extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
@@ -92,11 +93,12 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     },
     ref,
   ) => {
-    const translate = 100 - (Math.round(value) / valueMax) * 100;
+    const translateX = 100 - (Math.round(value) / valueMax) * 100;
     const onTimeoutRef = useRef<() => void>();
     onTimeoutRef.current = simulated?.onTimeout;
+    const translate = useI18n("ProgressBar");
 
-    React.useEffect(() => {
+    useEffect(() => {
       if (simulated?.seconds && onTimeoutRef.current) {
         const timeout = setTimeout(
           onTimeoutRef.current,
@@ -119,8 +121,15 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
         aria-valuenow={simulated?.seconds ? 0 : Math.round(value)}
         aria-valuetext={
           simulated?.seconds
-            ? `Fremdrift kan ikke beregnes, antatt tid er: ${simulated?.seconds} sekunder`
-            : `${Math.round(value)} av ${Math.round(valueMax)}`
+            ? translate("progressUnknown", {
+                replacements: { seconds: Math.round(simulated?.seconds) },
+              })
+            : translate("progress", {
+                replacements: {
+                  current: Math.round(value),
+                  max: Math.round(valueMax),
+                },
+              })
         }
         // biome-ignore lint/a11y/useAriaPropsForRole: We found that adding valueMin was not needed
         role="progressbar"
@@ -130,17 +139,15 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
       >
         <div
           className={cl("navds-progress-bar__foreground", {
-            "navds-progress-bar__foreground--indeterminate": Number.isInteger(
-              simulated?.seconds,
-            ),
+            "navds-progress-bar__foreground--indeterminate":
+              simulated?.seconds !== undefined,
           })}
           style={{
-            "--__ac-progress-bar-simulated": Number.isInteger(
-              simulated?.seconds,
-            )
-              ? `${simulated?.seconds}s`
-              : undefined,
-            "--__ac-progress-bar-translate": `-${translate}%`,
+            "--__ac-progress-bar-simulated":
+              simulated?.seconds !== undefined
+                ? `${simulated?.seconds}s`
+                : undefined,
+            "--__ac-progress-bar-translate": `-${translateX}%`,
           }}
         />
       </div>

package/src/slot/Slot.tsx

@@ -10,11 +10,16 @@ const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
   const { children, ...slotProps } = props;
 
   if (React.isValidElement(children)) {
+    const childRef = Object.prototype.propertyIsEnumerable.call(
+      children.props,
+      "ref",
+    )
+      ? children.props.ref // React 19 (children.ref still works, but gives a warning)
+      : (children as any).ref; // React <19
+
     return React.cloneElement<any>(children, {
       ...mergeProps(slotProps, children.props),
-      ref: forwardedRef
-        ? mergeRefs([forwardedRef, (children as any).ref])
-        : (children as any).ref,
+      ref: forwardedRef ? mergeRefs([forwardedRef, childRef]) : childRef,
     });
   }
 

package/src/table/ExpandableRow.tsx

@@ -4,6 +4,7 @@ import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
+import { useI18n } from "../util/i18n/i18n.context";
 import AnimateHeight from "./AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
@@ -20,7 +21,7 @@ export interface ExpandableRowProps extends Omit<RowProps, "content"> {
   togglePlacement?: "left" | "right";
   /**
    * Opens component if 'true', closes if 'false'
-   * Using this props removes automatic control of open-state
+   * Using this prop removes automatic control of open-state
    */
   open?: boolean;
   /**
@@ -76,21 +77,19 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       value: open,
       onChange: onOpenChange,
     });
-
+    const translate = useI18n("global");
     const id = useId();
 
-    const expansionHandler = (e) => {
-      _setOpen((x) => !x);
-      e.stopPropagation();
+    const expansionHandler = (event: React.MouseEvent<HTMLElement>) => {
+      _setOpen((oldOpen) => !oldOpen);
+      event.stopPropagation();
     };
 
-    const onRowClick = (e) =>
-      !isInteractiveTarget(e.target) && expansionHandler(e);
-
-    const handleRowClick = (
-      e: React.MouseEvent<HTMLTableRowElement, MouseEvent>,
-    ) => {
-      !expansionDisabled && expandOnRowClick && onRowClick(e);
+    const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
+      expandOnRowClick &&
+        !expansionDisabled &&
+        !isInteractiveTarget(event.target as HTMLElement) &&
+        expansionHandler(event);
     };
 
     return (
@@ -123,7 +122,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
               >
                 <ChevronDownIcon
                   className="navds-table__expandable-icon"
-                  title={_open ? "Vis mindre" : "Vis mer"}
+                  title={_open ? translate("showLess") : translate("showMore")}
                 />
               </button>
             )}

package/src/tabs/parts/tablist/ScrollButtons.tsx

@@ -17,11 +17,7 @@ function ScrollButton({ hidden, onClick, dir }: ScrollButtonProps) {
       onClick={onClick}
       aria-hidden
     >
-      {dir === "left" ? (
-        <ChevronLeftIcon title="scroll tilbake" />
-      ) : (
-        <ChevronRightIcon title="scroll neste" />
-      )}
+      {dir === "left" ? <ChevronLeftIcon /> : <ChevronRightIcon />}
     </div>
   );
 }