@navikt/ds-react 7.6.0 → 7.8.0

package/esm/util/i18n/locales/nn.d.ts

@@ -4,6 +4,51 @@ declare const _default: {
         showMore: string;
         showLess: string;
         readOnly: string;
+        close: string;
+    };
+    Alert: {
+        closeAlert: string;
+        closeMessage: string;
+        error: string;
+        info: string;
+        success: string;
+        warning: string;
+    };
+    Chips: {
+        Removable: {
+            labelSuffix: string;
+        };
+    };
+    Combobox: {
+        addOption: string;
+        loading: string;
+        maxSelected: string;
+    };
+    CopyButton: {
+        title: string;
+        activeText: string;
+    };
+    DatePicker: {
+        chooseDate: string;
+        chooseDates: string;
+        chooseDateRange: string;
+        chooseMonth: string;
+        week: string;
+        weekNumber: string;
+        selectWeekNumber: string;
+        month: string;
+        goToNextMonth: string;
+        goToPreviousMonth: string;
+        year: string;
+        goToNextYear: string;
+        goToPreviousYear: string;
+        openDatePicker: string;
+        openMonthPicker: string;
+        closeDatePicker: string;
+        closeMonthPicker: string;
+    };
+    ErrorSummary: {
+        heading: string;
     };
     FileUpload: {
         dropzone: {
@@ -28,28 +73,18 @@ declare const _default: {
         showAllSteps: string;
         hideAllSteps: string;
     };
-    Alert: {
-        closeAlert: string;
-        closeMessage: string;
-        error: string;
-        info: string;
-        success: string;
-        warning: string;
+    FormSummary: {
+        editAnswer: string;
     };
-    Chips: {
-        Removable: {
-            labelSuffix: string;
-        };
+    GuidePanel: {
+        illustrationLabel: string;
     };
-    ErrorSummary: {
-        heading: string;
+    HelpText: {
+        title: string;
     };
     Loader: {
         title: string;
     };
-    Modal: {
-        close: string;
-    };
     Pagination: {
         previous: string;
         next: string;
@@ -92,25 +127,5 @@ declare const _default: {
             reset: string;
         };
     };
-    DatePicker: {
-        close: string;
-        chooseDate: string;
-        chooseDates: string;
-        chooseDateRange: string;
-        chooseMonth: string;
-        week: string;
-        weekNumber: string;
-        selectWeekNumber: string;
-        month: string;
-        goToNextMonth: string;
-        goToPreviousMonth: string;
-        year: string;
-        goToNextYear: string;
-        goToPreviousYear: string;
-        openDatePicker: string;
-        openMonthPicker: string;
-        closeDatePicker: string;
-        closeMonthPicker: string;
-    };
 };
 export default _default;

package/esm/util/i18n/locales/nn.js

@@ -5,6 +5,51 @@ export default {
         showMore: "Vis meir",
         showLess: "Vis mindre",
         readOnly: "Skrivebeskytta",
+        close: "Lukk",
+    },
+    Alert: {
+        closeAlert: "Lukk varsel",
+        closeMessage: "Lukk melding",
+        error: "Feil",
+        info: "Informasjon",
+        success: "Suksess",
+        warning: "Åtvaring",
+    },
+    Chips: {
+        Removable: {
+            labelSuffix: "slett",
+        },
+    },
+    Combobox: {
+        addOption: "Legg til",
+        loading: "Søker…",
+        maxSelected: "{selected} av maks {limit} er valt.",
+    },
+    CopyButton: {
+        title: "Kopier",
+        activeText: "Kopiert!",
+    },
+    DatePicker: {
+        chooseDate: "Vel dato",
+        chooseDates: "Vel datoar",
+        chooseDateRange: "Vel start- og sluttdato",
+        chooseMonth: "Vel månad",
+        week: "Veke",
+        weekNumber: "Veke {week}",
+        selectWeekNumber: "Vel veke {week}",
+        month: "Månad",
+        goToNextMonth: "Gå til neste månad",
+        goToPreviousMonth: "Gå til førre månad",
+        year: "År",
+        goToNextYear: "Gå til neste år",
+        goToPreviousYear: "Gå til førre år",
+        openDatePicker: "Opne datoveljar",
+        openMonthPicker: "Opne månadsveljar",
+        closeDatePicker: "Lukk datoveljar",
+        closeMonthPicker: "Lukk månadsveljar",
+    },
+    ErrorSummary: {
+        heading: "Du må rette desse feila før du kan halde fram:",
     },
     FileUpload: {
         dropzone: {
@@ -29,28 +74,18 @@ export default {
         showAllSteps: "Vis alle steg",
         hideAllSteps: "Skjul alle steg",
     },
-    Alert: {
-        closeAlert: "Lukk varsel",
-        closeMessage: "Lukk melding",
-        error: "Feil",
-        info: "Informasjon",
-        success: "Suksess",
-        warning: "Åtvaring",
+    FormSummary: {
+        editAnswer: "Endre svar",
     },
-    Chips: {
-        Removable: {
-            labelSuffix: "slett",
-        },
+    GuidePanel: {
+        illustrationLabel: "Illustrasjon av rettleiar",
     },
-    ErrorSummary: {
-        heading: "Du må rette desse feila før du kan halde fram:",
+    HelpText: {
+        title: "Meir informasjon",
     },
     Loader: {
         title: "Ventar…",
     },
-    Modal: {
-        close: "Lukk",
-    },
     Pagination: {
         previous: "Førre",
         next: "Neste",
@@ -60,7 +95,7 @@ export default {
         progressUnknown: "Framdrift kan ikkje bereknast, antatt tid er {seconds} sekund.",
     },
     Search: {
-        clear: "Tøm",
+        clear: "Tøm feltet",
         search: "Søk",
     },
     Textarea: {
@@ -93,25 +128,5 @@ export default {
             reset: "Tilbakestill tidsperspektiv",
         },
     },
-    DatePicker: {
-        close: "Lukk",
-        chooseDate: "Vel dato",
-        chooseDates: "Vel datoar",
-        chooseDateRange: "Vel start- og sluttdato",
-        chooseMonth: "Vel månad",
-        week: "Veke",
-        weekNumber: "Veke {week}",
-        selectWeekNumber: "Vel veke {week}",
-        month: "Månad",
-        goToNextMonth: "Gå til neste månad",
-        goToPreviousMonth: "Gå til førre månad",
-        year: "År",
-        goToNextYear: "Gå til neste år",
-        goToPreviousYear: "Gå til førre år",
-        openDatePicker: "Opne datoveljar",
-        openMonthPicker: "Opne månadsveljar",
-        closeDatePicker: "Lukk datoveljar",
-        closeMonthPicker: "Lukk månadsveljar",
-    },
 };
 //# sourceMappingURL=nn.js.map

package/esm/util/i18n/locales/nn.js.map

@@ -1 +1 @@
-{"version":3,"file":"nn.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAGrC,eAAe;IACb,MAAM,EAAE;QACN,UAAU,EAAE,EAAE;QACd,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,YAAY;QACtB,QAAQ,EAAE,gBAAgB;KAC3B;IAED,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,MAAM,EAAE,SAAS;YACjB,cAAc,EAAE,WAAW;YAC3B,WAAW,EAAE,uBAAuB;YACpC,mBAAmB,EAAE,wBAAwB;YAC7C,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,OAAO;YACX,QAAQ,EAAE,6BAA6B;YACvC,iBAAiB,EAAE,qCAAqC;SACzD;QACD,IAAI,EAAE;YACJ,gBAAgB,EAAE,+BAA+B;YACjD,iBAAiB,EAAE,YAAY;YAC/B,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,aAAa;SAC3B;KACF;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,mCAAmC;QACzC,YAAY,EAAE,eAAe;QAC7B,YAAY,EAAE,iBAAiB;KAChC;IACD,KAAK,EAAE;QACL,UAAU,EAAE,aAAa;QACzB,YAAY,EAAE,cAAc;QAC5B,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,aAAa;QACnB,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,UAAU;KACpB;IACD,KAAK,EAAE;QACL,SAAS,EAAE;YACT,WAAW,EAAE,OAAO;SACrB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,gDAAgD;KAC1D;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,OAAO;QACjB,IAAI,EAAE,OAAO;KACd;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,oBAAoB;QAC9B,eAAe,EACb,gEAAgE;KACnE;IACD,MAAM,EAAE;QACN,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;KACd;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,8CAA8C;QACzD,YAAY,EAAE,yBAAyB;QACvC,SAAS,EAAE,qBAAqB;KACjC;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,YAAY;QACxB,SAAS,EAAE,OAAO;QAClB,WAAW,EAAE,QAAQ;QACrB,UAAU,EAAE,MAAM;QAClB,GAAG,EAAE;YACH,SAAS,EAAE,gBAAgB;YAC3B,MAAM,EAAE,mBAAmB;SAC5B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,UAAU;YACnB,MAAM,EAAE,MAAM;YACd,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,MAAM,EAAE,gCAAgC;SACzC;QACD,GAAG,EAAE;YACH,GAAG,EAAE,aAAa;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,iCAAiC;YACvC,KAAK,EAAE,6BAA6B;SACrC;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,UAAU;QACtB,WAAW,EAAE,YAAY;QACzB,eAAe,EAAE,yBAAyB;QAC1C,WAAW,EAAE,WAAW;QACxB,IAAI,EAAE,MAAM;QACZ,UAAU,EAAE,aAAa;QACzB,gBAAgB,EAAE,iBAAiB;QACnC,KAAK,EAAE,OAAO;QACd,aAAa,EAAE,oBAAoB;QACnC,iBAAiB,EAAE,oBAAoB;QACvC,IAAI,EAAE,IAAI;QACV,YAAY,EAAE,iBAAiB;QAC/B,gBAAgB,EAAE,iBAAiB;QACnC,cAAc,EAAE,iBAAiB;QACjC,eAAe,EAAE,mBAAmB;QACpC,eAAe,EAAE,iBAAiB;QAClC,gBAAgB,EAAE,mBAAmB;KACtC;CACqB,CAAC"}
+{"version":3,"file":"nn.js","sourceRoot":"","sources":["../../../../src/util/i18n/locales/nn.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.6.0",
+  "version": "7.8.0",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -40,6 +40,16 @@
         "default": "./cjs/index.js"
       }
     },
+    "./locales": {
+      "import": {
+        "types": "./esm/util/i18n/locales/index.d.ts",
+        "default": "./esm/util/i18n/locales/index.js"
+      },
+      "require": {
+        "types": "./cjs/util/i18n/locales/index.d.ts",
+        "default": "./cjs/util/i18n/locales/index.js"
+      }
+    },
     "./Accordion": {
       "import": {
         "types": "./esm/accordion/index.d.ts",
@@ -604,8 +614,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.6.0",
-    "@navikt/ds-tokens": "^7.6.0",
+    "@navikt/aksel-icons": "^7.8.0",
+    "@navikt/ds-tokens": "^7.8.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.1"

package/src/chips/Removable.tsx

@@ -16,11 +16,6 @@ export interface ChipsRemovableProps
    * Click callback
    */
   onDelete?: () => void;
-  /**
-   * Replaces label read for screen-readers
-   * @default "slett"
-   */
-  removeLabel?: string;
 }
 
 export const RemovableChips = forwardRef<
@@ -32,7 +27,6 @@ export const RemovableChips = forwardRef<
       children,
       variant = "action",
       onDelete,
-      removeLabel,
       className,
       onClick,
       type = "button",
@@ -51,9 +45,7 @@ export const RemovableChips = forwardRef<
           className,
           `navds-chips__removable--${variant}`,
         )}
-        aria-label={`${children} ${
-          removeLabel ?? translate("Removable.labelSuffix")
-        }`}
+        aria-label={`${children} ${translate("Removable.labelSuffix")}`}
         onClick={composeEventHandlers(onClick, onDelete)}
       >
         <span className="navds-chips__chip-text">{children}</span>

package/src/copybutton/CopyButton.tsx

@@ -10,6 +10,7 @@ import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import { Label } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import copy from "../util/copy";
+import { useI18n } from "../util/i18n/i18n.context";
 
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
@@ -32,7 +33,7 @@ export interface CopyButtonProps
   text?: string;
   /**
    * Text shown when button is clicked.
-   * Only set if used with `text`-prop.
+   * Will be used as accessible label (title) if `text`-prop is not set.
    * @default "Kopiert!"
    */
   activeText?: string;
@@ -62,11 +63,6 @@ export interface CopyButtonProps
    * @default "Kopier"
    */
   title?: string;
-  /**
-   * Accessible label for icon in active-state (ignored if text is set).
-   * @default "Kopiert"
-   */
-  activeTitle?: string;
   /**
    * Icon position in button.
    * @default "left"
@@ -91,15 +87,14 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       className,
       copyText,
       text,
-      activeText = "Kopiert!",
+      activeText,
       variant = "neutral",
       size = "medium",
       onActiveChange,
       icon,
       activeIcon,
       activeDuration = 2000,
-      title = "Kopier",
-      activeTitle = "Kopiert",
+      title,
       iconPosition = "left",
       onClick,
       ...rest
@@ -108,6 +103,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
   ) => {
     const [active, setActive] = useState(false);
     const timeoutRef = useRef<number>();
+    const translate = useI18n("CopyButton");
 
     useEffect(() => {
       return () => {
@@ -127,19 +123,21 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       }, activeDuration);
     };
 
+    const activeString = activeText || translate("activeText");
+
     const copyIcon = (
       <span className="navds-copybutton__icon">
         {active
           ? activeIcon ?? (
               <CheckmarkIcon
                 aria-hidden={!!text}
-                title={text ? undefined : activeTitle}
+                title={text ? undefined : activeString}
               />
             )
           : icon ?? (
               <FilesIcon
                 aria-hidden={!!text}
-                title={text ? undefined : title}
+                title={text ? undefined : title || translate("title")}
               />
             )}
       </span>
@@ -150,7 +148,6 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
         ref={ref}
         type="button"
         {...rest}
-        aria-live="polite"
         className={cl(
           "navds-copybutton",
           className,
@@ -166,24 +163,11 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
       >
         <span className="navds-copybutton__content">
           {iconPosition === "left" && copyIcon}
-          {text &&
-            (active ? (
-              <Label
-                as="span"
-                size={size === "medium" ? "medium" : "small"}
-                aria-live="polite"
-              >
-                {activeText}
-              </Label>
-            ) : (
-              <Label
-                as="span"
-                size={size === "medium" ? "medium" : "small"}
-                aria-live="polite"
-              >
-                {text}
-              </Label>
-            ))}
+          {text && (
+            <Label as="span" size={size === "medium" ? "medium" : "small"}>
+              {active ? activeString : text}
+            </Label>
+          )}
           {iconPosition === "right" && copyIcon}
         </span>
       </button>

package/src/date/context/index.ts

@@ -1,5 +1,9 @@
-export { useDateInputContext, DateContext } from "./useDateInputContext";
+export { useDateInputContext, DateInputContext } from "./useDateInputContext";
 export {
   useSharedMonthContext,
   SharedMonthProvider,
 } from "./useSharedMonthContext";
+export {
+  useDateTranslationContext,
+  DateTranslationContextProvider,
+} from "./useDateTranslationContext";

package/src/date/context/useDateInputContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 
-interface DateContextContextProps {
+interface DateInputContextProps {
   /**
    * Open state for popover
    */
@@ -19,13 +19,15 @@ interface DateContextContextProps {
   defined: boolean;
 }
 
-export const DateContext = createContext<DateContextContextProps | null>(null);
+export const DateInputContext = createContext<DateInputContextProps | null>(
+  null,
+);
 
 export const useDateInputContext = () => {
-  const context = useContext(DateContext);
+  const context = useContext(DateInputContext);
 
   if (!context) {
-    console.warn("useDateInputContext must be used with DateContext");
+    console.warn("useDateInputContext must be used with DateInputContext");
   }
 
   return context;

package/src/date/context/useDateTranslationContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from "../../util/create-context";
+import { TFunction } from "../../util/i18n/i18n.context";
+
+interface DateTranslationContextProps {
+  translate: TFunction<"DatePicker">;
+}
+
+export const [DateTranslationContextProvider, useDateTranslationContext] =
+  createContext<DateTranslationContextProps>();

package/src/date/datepicker/DatePicker.tsx

@@ -5,11 +5,11 @@ import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useDateLocale } from "../../util/i18n/i18n.context";
-import { DateContext } from "../context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { DateInputContext, DateTranslationContextProvider } from "../context";
 import { DatePickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
-import { getLocaleFromString } from "../utils";
+import { getLocaleFromString, getTranslations } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
 import DropdownCaption from "./parts/DropdownCaption";
@@ -68,6 +68,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     {
       children,
       locale,
+      translations,
       dropdownCaption,
       disabled = [],
       disableWeekends = false,
@@ -86,6 +87,11 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     },
     ref,
   ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
     const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
@@ -151,37 +157,40 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     );
 
     return (
-      <DateContext.Provider
-        value={{
-          open: _open ?? open,
-          onOpen: () => {
-            setOpen((x) => !x);
-            onOpenToggle?.();
-          },
-          ariaId,
-          defined: true,
-        }}
-      >
-        <div
-          ref={mergedRef}
-          className={cl("navds-date__wrapper", wrapperClassName)}
+      <DateTranslationContextProvider translate={translate}>
+        <DateInputContext.Provider
+          value={{
+            open: _open ?? open,
+            onOpen: () => {
+              setOpen((x) => !x);
+              onOpenToggle?.();
+            },
+            ariaId,
+            defined: true,
+          }}
         >
-          {children}
-          <DateWrapper
-            open={_open ?? open}
-            anchor={wrapperRef}
-            onClose={() => onClose?.() ?? setOpen(false)}
-            locale={locale}
-            variant={mode}
-            popoverProps={{
-              id: ariaId,
-              strategy,
-            }}
+          <div
+            ref={mergedRef}
+            className={cl("navds-date__wrapper", wrapperClassName)}
           >
-            {DatePickerComponent}
-          </DateWrapper>
-        </div>
-      </DateContext.Provider>
+            {children}
+            <DateWrapper
+              open={_open ?? open}
+              anchor={wrapperRef}
+              onClose={() => onClose?.() ?? setOpen(false)}
+              locale={locale}
+              translate={translate}
+              variant={mode}
+              popoverProps={{
+                id: ariaId,
+                strategy,
+              }}
+            >
+              {DatePickerComponent}
+            </DateWrapper>
+          </div>
+        </DateInputContext.Provider>
+      </DateTranslationContextProvider>
     );
   },
 ) as DatePickerComponent;