@navikt/ds-react 7.4.0 → 7.4.1

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/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>
   );
 }

package/src/util/i18n/locales/en.ts

@@ -1,6 +1,11 @@
 import type { Translations } from "../i18n.types";
 
 export default {
+  global: {
+    showMore: "Show more",
+    showLess: "Show less",
+  },
+
   FileUpload: {
     dropzone: {
       button: "Choose file",
@@ -37,4 +42,23 @@ export default {
       labelSuffix: "delete",
     },
   },
+  Loader: {
+    title: "Waiting…",
+  },
+  Modal: {
+    close: "Close",
+  },
+  Pagination: {
+    previous: "Previous",
+    next: "Next",
+  },
+  ProgressBar: {
+    progress: "{current} of {max}",
+    progressUnknown:
+      "Progress is unknown, estimated time is {seconds} seconds.",
+  },
+  Search: {
+    clear: "Clear",
+    search: "Search",
+  },
 } satisfies Translations;

package/src/util/i18n/locales/nb.ts

@@ -7,6 +7,11 @@ interface TranslationMap {
 }
 
 export default {
+  global: {
+    showMore: "Vis mer",
+    showLess: "Vis mindre",
+  },
+
   FileUpload: {
     dropzone: {
       button: "Velg fil",
@@ -44,4 +49,23 @@ export default {
       labelSuffix: "slett",
     },
   },
+  Loader: {
+    title: "Venter…",
+  },
+  Modal: {
+    close: "Lukk",
+  },
+  Pagination: {
+    previous: "Forrige",
+    next: "Neste",
+  },
+  ProgressBar: {
+    progress: "{current} av {max}",
+    progressUnknown:
+      "Fremdrift kan ikke beregnes, antatt tid er {seconds} sekunder.",
+  },
+  Search: {
+    clear: "Tøm",
+    search: "Søk",
+  },
 } satisfies TranslationMap;

package/src/util/i18n/locales/nn.ts

@@ -1,6 +1,11 @@
 import type { Translations } from "../i18n.types";
 
 export default {
+  global: {
+    showMore: "Vis meir",
+    showLess: "Vis mindre",
+  },
+
   FileUpload: {
     dropzone: {
       button: "Vel fil",
@@ -37,4 +42,23 @@ export default {
       labelSuffix: "slett",
     },
   },
+  Loader: {
+    title: "Ventar…",
+  },
+  Modal: {
+    close: "Lukk",
+  },
+  Pagination: {
+    previous: "Førre",
+    next: "Neste",
+  },
+  ProgressBar: {
+    progress: "{current} av {max}",
+    progressUnknown:
+      "Framdrift kan ikkje bereknast, antatt tid er {seconds} sekund.",
+  },
+  Search: {
+    clear: "Tøm",
+    search: "Søk",
+  },
 } satisfies Translations;