@navikt/ds-react 7.4.1 → 7.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.4.1",
+  "version": "7.4.3",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -604,8 +604,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.4.1",
-    "@navikt/ds-tokens": "^7.4.1",
+    "@navikt/aksel-icons": "^7.4.3",
+    "@navikt/ds-tokens": "^7.4.3",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.1"

package/src/date/parts/DateInput.tsx

@@ -94,7 +94,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "navds-sr-only": hideLabel,
         })}
       >
-        <ReadOnlyIcon readOnly={readOnly} />
+        {readOnly && <ReadOnlyIcon />}
         {label}
       </Label>
       {!!description && (

package/src/form/ReadOnlyIcon.tsx

@@ -1,20 +1,17 @@
 import React from "react";
 import { PadlockLockedFillIcon } from "@navikt/aksel-icons";
+import { useI18n } from "../util/i18n/i18n.context";
 
-export const ReadOnlyIcon = ({
-  readOnly,
-  nativeReadOnly = true,
-}: {
-  readOnly?: boolean;
-  nativeReadOnly?: boolean;
-}) => {
-  if (readOnly) {
-    return (
-      <PadlockLockedFillIcon
-        {...(nativeReadOnly ? { "aria-hidden": true } : { title: "readonly" })}
-        className="navds-form-field__readonly-icon"
-      />
-    );
-  }
-  return null;
-};
+export const ReadOnlyIcon = () => (
+  <PadlockLockedFillIcon
+    aria-hidden
+    className="navds-form-field__readonly-icon"
+  />
+);
+
+export const ReadOnlyIconWithTitle = () => (
+  <PadlockLockedFillIcon
+    title={useI18n("global")("readOnly")}
+    className="navds-form-field__readonly-icon"
+  />
+);

package/src/form/checkbox/Checkbox.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
 
@@ -90,9 +90,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
               className="navds-checkbox__label-text"
               aria-hidden
             >
-              {!nested && (
-                <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
-              )}
+              {!nested && readOnly && <ReadOnlyIconWithTitle />}
               {props.children}
             </BodyShort>
             {props.description && (

package/src/form/combobox/Combobox.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
@@ -46,7 +46,7 @@ export const Combobox = forwardRef<
           "navds-sr-only": hideLabel,
         })}
       >
-        <ReadOnlyIcon nativeReadOnly={false} readOnly={readOnly} />
+        {readOnly && <ReadOnlyIconWithTitle />}
         {label}
       </Label>
       {!!description && (

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

@@ -100,9 +100,22 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
               value,
               filteredOptions,
             );
+
+          /*
+           * User can have matching results, while not using the autocomplete result
+           * E.g. User types "Oslo", list has is "Oslo kommune", but user hits backspace, canceling autocomplete.
+           */
+          const autoCompleteMatchesValue =
+            filteredOptionsUtil.normalizeText(value) ===
+            filteredOptionsUtil.normalizeText(autoCompletedOption?.label ?? "");
+
           let selectedValue: ComboboxOption | undefined;
 
-          if (shouldAutocomplete && autoCompletedOption) {
+          if (
+            shouldAutocomplete &&
+            autoCompletedOption &&
+            autoCompleteMatchesValue
+          ) {
             selectedValue = autoCompletedOption;
           } else if (allowNewValues && isValueNew) {
             selectedValue = { label: value, value };

package/src/form/error-summary/ErrorSummary.tsx

@@ -3,6 +3,7 @@ import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { BodyShort, Heading } from "../../typography";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useMergeRefs } from "../../util/hooks";
+import { useI18n } from "../../util/i18n/i18n.context";
 import ErrorSummaryItem from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps
@@ -72,11 +73,12 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       className,
       size = "medium",
       headingTag = "h2",
-      heading = "Du må rette disse feilene før du kan fortsette:",
+      heading,
       ...rest
     },
     ref,
   ) => {
+    const translate = useI18n("ErrorSummary");
     const wrapperRef = useRef<HTMLDivElement>(null);
     const headingRef = useRef<HTMLHeadingElement>(null);
 
@@ -105,7 +107,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
           ref={headingRef}
           tabIndex={-1}
         >
-          {heading}
+          {heading ?? translate("heading")}
         </Heading>
         <BodyShort as="ul" size={size} className="navds-error-summary__list">
           {children}

package/src/form/fieldset/Fieldset.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIcon, ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps } from "../useFormField";
 import { FieldsetContext } from "./context";
 import { useFieldset } from "./useFieldset";
@@ -89,7 +89,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
               "navds-sr-only": !!hideLegend,
             })}
           >
-            <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={nativeReadOnly} />
+            {readOnly &&
+              (nativeReadOnly ? <ReadOnlyIcon /> : <ReadOnlyIconWithTitle />)}
             {legend}
           </Label>
           {!!description && (

package/src/form/form-progress/FormProgress.tsx

@@ -105,9 +105,7 @@ export const FormProgress = forwardRef<HTMLDivElement, FormProgressProps>(
         <Collapsible lazy open={open} onOpenChange={onOpenChange}>
           <HStack justify="space-between" align="center">
             <BodyShort as="span">
-              {translate("step", {
-                replacements: { activeStep, totalSteps },
-              })}
+              {translate("step", { activeStep, totalSteps })}
             </BodyShort>
             <Collapsible.Trigger asChild aria-expanded={undefined}>
               <Button

package/src/form/select/Select.tsx

@@ -3,7 +3,7 @@ import React, { SelectHTMLAttributes, forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface SelectProps
@@ -112,7 +112,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+          {readOnly && <ReadOnlyIconWithTitle />}
           {label}
         </Label>
         {!!description && (

package/src/form/switch/Switch.tsx

@@ -8,7 +8,7 @@ import React, {
 import { Loader } from "../../loader";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
-import { ReadOnlyIcon } from "../ReadOnlyIcon";
+import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
 const SelectedIcon = () => (
@@ -21,7 +21,6 @@ const SelectedIcon = () => (
     focusable={false}
     role="img"
     aria-hidden
-    aria-label="Deaktiver valg"
   >
     <path
       fillRule="evenodd"
@@ -117,19 +116,19 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           defaultChecked={defaultChecked}
           ref={ref}
           type="checkbox"
-          onChange={(e) => {
+          onChange={(event) => {
             if (readOnly) {
               return;
             }
-            setChecked(e.target.checked);
-            props.onChange?.(e);
+            setChecked(event.target.checked);
+            props.onChange?.(event);
           }}
-          onClick={(e) => {
+          onClick={(event) => {
             if (readOnly) {
-              e.preventDefault();
+              event.preventDefault();
               return;
             }
-            props?.onClick?.(e);
+            props.onClick?.(event);
           }}
           className={cl(className, "navds-switch__input")}
         />
@@ -150,11 +149,11 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           <div
             className={cl("navds-switch__content", {
               "navds-sr-only": hideLabel,
-              "navds-switch--with-description": !!description && !hideLabel,
+              "navds-switch--with-description": description && !hideLabel,
             })}
           >
             <BodyShort as="div" size={size} className="navds-switch__label">
-              <ReadOnlyIcon readOnly={readOnly} nativeReadOnly={false} />
+              {readOnly && <ReadOnlyIconWithTitle />}
               {children}
             </BodyShort>
             {description && (

package/src/form/textarea/Textarea.tsx

@@ -9,9 +9,6 @@ import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "./../useFormField";
 import Counter from "./TextareaCounter";
 
-/**
- * TODO: Mulighet for lokalisering av sr-only/counter text
- */
 export interface TextareaProps
   extends FormFieldProps,
     React.TextareaHTMLAttributes<HTMLTextAreaElement> {
@@ -144,7 +141,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} />
+          {readOnly && <ReadOnlyIcon />}
           {label}
         </Label>
         {!!description && (
@@ -180,17 +177,13 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {...(describedBy ? { "aria-describedby": describedBy } : {})}
         />
         {hasMaxLength && !readOnly && !inputProps.disabled && (
-          <>
-            <span id={maxLengthId} className="navds-sr-only">
-              {`Tekstområde med plass til ${maxLength} tegn.`}
-            </span>
-            <Counter
-              maxLength={maxLength}
-              currentLength={props.value?.length ?? uncontrolledValue.length}
-              size={size}
-              i18n={i18n}
-            />
-          </>
+          <Counter
+            maxLengthId={maxLengthId}
+            maxLength={maxLength}
+            currentLength={props.value?.length ?? uncontrolledValue.length}
+            size={size}
+            i18n={i18n}
+          />
         )}
         <div
           className="navds-form-field__error"

package/src/form/textarea/TextareaCounter.tsx

@@ -2,18 +2,32 @@ import cl from "clsx";
 import React, { useEffect, useState } from "react";
 import { BodyShort } from "../../typography";
 import debounce from "../../util/debounce";
+import { useI18n } from "../../util/i18n/i18n.context";
 import type { TextareaProps } from "./Textarea";
 
 interface Props {
+  maxLengthId: string;
   maxLength: number;
   currentLength: number;
   size: TextareaProps["size"];
   i18n: TextareaProps["i18n"];
 }
 
-const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
-  const difference = maxLength - currentLength;
+const TextareaCounter = ({
+  maxLengthId,
+  maxLength,
+  currentLength,
+  size,
+  i18n,
+}: Props) => {
+  const translate = useI18n("Textarea", {
+    charsLeft: i18n?.counterLeft ? `{chars} ${i18n.counterLeft}` : undefined,
+    charsTooMany: i18n?.counterTooMuch
+      ? `{chars} ${i18n.counterTooMuch}`
+      : undefined,
+  });
 
+  const difference = maxLength - currentLength;
   const [debouncedDiff, setDebouncedDiff] = useState(difference);
 
   useEffect(() => {
@@ -29,12 +43,16 @@ const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
 
   return (
     <>
+      <span id={maxLengthId} className="navds-sr-only">
+        {translate("maxLength", { maxLength })}
+      </span>
+
       {difference < 20 && (
         <span
           role="status"
           className="navds-textarea__sr-counter navds-sr-only"
         >
-          {getCounterText(debouncedDiff, i18n)}
+          {getCounterText(debouncedDiff, translate)}
         </span>
       )}
 
@@ -44,15 +62,21 @@ const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
         })}
         size={size}
       >
-        {getCounterText(difference, i18n)}
+        {getCounterText(difference, translate)}
       </BodyShort>
     </>
   );
 };
 
-const getCounterText = (difference: number, i18n: TextareaProps["i18n"]) =>
+const getCounterText = (
+  difference: number,
+  translate: (
+    key: "charsTooMany" | "charsLeft",
+    replacements?: { chars: number },
+  ) => string,
+) =>
   difference < 0
-    ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
-    : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`;
+    ? translate("charsTooMany", { chars: Math.abs(difference) })
+    : translate("charsLeft", { chars: difference });
 
 export default TextareaCounter;

package/src/form/textfield/TextField.tsx

@@ -91,7 +91,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
             "navds-sr-only": hideLabel,
           })}
         >
-          <ReadOnlyIcon readOnly={readOnly} />
+          {readOnly && <ReadOnlyIcon />}
           {label}
         </Label>
 

package/src/pagination/Pagination.tsx

@@ -9,6 +9,17 @@ import PaginationItem, {
   PaginationItemType,
 } from "./PaginationItem";
 
+interface RenderItemProps
+  extends Pick<
+    PaginationItemProps,
+    "className" | "disabled" | "selected" | "icon" | "iconPosition"
+  > {
+  children: React.ReactNode;
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  page: number;
+  size: Exclude<PaginationProps["size"], undefined>;
+}
+
 export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Current page.
@@ -46,9 +57,9 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   prevNextTexts?: boolean;
   /**
    * Override pagination item rendering.
-   * @default (item: PaginationItemProps) => <PaginationItem {...item} />
+   * @default PaginationItem
    */
-  renderItem?: (item: PaginationItemProps) => ReturnType<React.FC>;
+  renderItem?: (item: RenderItemProps) => ReturnType<React.FC>;
   /**
    * Pagination heading. We recommend adding heading instead of `aria-label` to help assistive technologies with an extra navigation-stop.
    */
@@ -111,7 +122,7 @@ export const getSteps = ({
  * ```jsx
  * <Pagination
  *   page={pageState}
- *   onPageChange={(x) => setPageState(x)}
+ *   onPageChange={setPageState}
  *   count={9}
  *   boundaryCount={1}
  *   siblingCount={1}
@@ -131,9 +142,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       prevNextTexts = false,
       srHeading,
       "aria-labelledby": ariaLabelledBy,
-      renderItem: Item = (item: PaginationItemProps) => (
-        <PaginationItem {...item} />
-      ),
+      renderItem: Item = PaginationItem,
       ...rest
     },
     ref,
@@ -218,6 +227,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
               ) : (
                 <li key={step}>
                   <Item
+                    /* Remember to update RenderItemProps if you make changes to props sent into Item */
                     onClick={() => onPageChange?.(n)}
                     selected={page === n}
                     page={n}

package/src/progress-bar/ProgressBar.tsx

@@ -122,13 +122,11 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
         aria-valuetext={
           simulated?.seconds
             ? translate("progressUnknown", {
-                replacements: { seconds: Math.round(simulated?.seconds) },
+                seconds: Math.round(simulated?.seconds),
               })
             : translate("progress", {
-                replacements: {
-                  current: Math.round(value),
-                  max: Math.round(valueMax),
-                },
+                current: Math.round(value),
+                max: Math.round(valueMax),
               })
         }
         // biome-ignore lint/a11y/useAriaPropsForRole: We found that adding valueMin was not needed

package/src/util/i18n/i18n.context.test.tsx

@@ -79,17 +79,15 @@ describe("useI18n", () => {
     };
     const { result } = renderHook(() => useI18n("FileUpload", i18n));
     const translate = result.current;
-    expect(
-      translate("item.uploading", { replacements: { name: "John", cnt: 3 } }),
-    ).toBe("Hello, John. You have 3 messages.");
+    expect(translate("item.uploading", { name: "John", cnt: 3 })).toBe(
+      "Hello, John. You have 3 messages.",
+    );
   });
 
   test("should throw an error if replacement key is not found", () => {
     const i18n = { item: { uploading: "Hello, {name}" } };
     const { result } = renderHook(() => useI18n("FileUpload", i18n));
     const translate = result.current;
-    expect(() =>
-      translate("item.uploading", { replacements: { other: "John" } }),
-    ).toThrowError();
+    expect(() => translate("item.uploading", { other: "John" })).toThrowError();
   });
 });

package/src/util/i18n/i18n.context.ts

@@ -27,7 +27,7 @@ export function useI18n<T extends Component>(
    */
   const translate = (
     keypath: NestedKeyOf<Translations[T]>,
-    options?: { replacements: Record<string, string | number> },
+    replacements?: Record<string, string | number>,
   ) => {
     const text = get(
       keypath,
@@ -37,19 +37,19 @@ export function useI18n<T extends Component>(
         : [i18n[componentName]]),
     );
 
-    if (options?.replacements) {
+    if (replacements) {
       return text.replace(REPLACE_REGEX, (match) => {
         const replacement = match.substring(1, match.length - 1);
 
-        if (options.replacements[replacement] === undefined) {
-          const replacementData = JSON.stringify(options.replacements);
+        if (replacements[replacement] === undefined) {
+          const replacementData = JSON.stringify(replacements);
 
           throw new Error(
             `Error translating key '${keypath}'. No replacement syntax ({}) found for key '${replacement}'. The following replacements were passed: '${replacementData}'`,
           );
         }
 
-        return options.replacements[replacement] as string; // can also be a number, but JS doesn't mind...
+        return replacements[replacement] as string; // can also be a number, but JS doesn't mind...
       });
     }
 

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

@@ -4,6 +4,7 @@ export default {
   global: {
     showMore: "Show more",
     showLess: "Show less",
+    readOnly: "Read-only",
   },
 
   FileUpload: {
@@ -42,6 +43,9 @@ export default {
       labelSuffix: "delete",
     },
   },
+  ErrorSummary: {
+    heading: "You must correct the following errors before you can continue:",
+  },
   Loader: {
     title: "Waiting…",
   },
@@ -61,4 +65,9 @@ export default {
     clear: "Clear",
     search: "Search",
   },
+  Textarea: {
+    maxLength: "Text area with a {maxLength} character limit.",
+    charsTooMany: "{chars} characters too many",
+    charsLeft: "{chars} characters left",
+  },
 } satisfies Translations;

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

@@ -10,6 +10,7 @@ export default {
   global: {
     showMore: "Vis mer",
     showLess: "Vis mindre",
+    readOnly: "Skrivebeskyttet",
   },
 
   FileUpload: {
@@ -49,6 +50,9 @@ export default {
       labelSuffix: "slett",
     },
   },
+  ErrorSummary: {
+    heading: "Du må rette disse feilene før du kan fortsette:",
+  },
   Loader: {
     title: "Venter…",
   },
@@ -68,4 +72,10 @@ export default {
     clear: "Tøm",
     search: "Søk",
   },
+  Textarea: {
+    /** Screen readers only */
+    maxLength: "Tekstområde med plass til {maxLength} tegn.",
+    charsTooMany: "{chars} tegn for mye",
+    charsLeft: "{chars} tegn igjen",
+  },
 } satisfies TranslationMap;

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

@@ -4,6 +4,7 @@ export default {
   global: {
     showMore: "Vis meir",
     showLess: "Vis mindre",
+    readOnly: "Skrivebeskytta",
   },
 
   FileUpload: {
@@ -42,6 +43,9 @@ export default {
       labelSuffix: "slett",
     },
   },
+  ErrorSummary: {
+    heading: "Du må rette desse feila før du kan halde fram:",
+  },
   Loader: {
     title: "Ventar…",
   },
@@ -61,4 +65,9 @@ export default {
     clear: "Tøm",
     search: "Søk",
   },
+  Textarea: {
+    maxLength: "Tekstområde med plass til {maxLength} teikn.",
+    charsTooMany: "{chars} teikn for mykje",
+    charsLeft: "{chars} teikn igjen",
+  },
 } satisfies Translations;