@navikt/ds-react 7.2.0 → 7.3.0

package/src/overlays/floating-menu/parts/RovingFocus.tsx

@@ -7,7 +7,7 @@ import { DescendantsManager } from "../../../util/hooks/descendants/descendant";
 interface RovingFocusProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "tabIndex"> {
   asChild?: boolean;
-  descendants: DescendantsManager<HTMLDivElement, object>;
+  descendants: DescendantsManager<HTMLDivElement, any>;
   onEntryFocus?: (event: Event) => void;
 }
 
@@ -25,8 +25,8 @@ const RovingFocus = forwardRef<HTMLDivElement, RovingFocusProps>(
       onMouseDown,
       onFocus,
       ...rest
-    }: RovingFocusProps,
-    ref,
+    },
+    ref: React.Ref<HTMLDivElement>,
   ) => {
     const _ref = React.useRef<HTMLDivElement>(null);
     const composedRefs = useMergeRefs(ref, _ref);
@@ -55,19 +55,19 @@ const RovingFocus = forwardRef<HTMLDivElement, RovingFocusProps>(
 
         const nextItem = () => {
           const next = descendants.nextEnabled(idx, loop);
-          next && next.node?.focus();
+          next?.node?.focus();
         };
         const prevItem = () => {
           const prev = descendants.prevEnabled(idx, loop);
-          prev && prev.node?.focus();
+          prev?.node?.focus();
         };
         const firstItem = () => {
           const first = descendants.firstEnabled();
-          first && first.node?.focus();
+          first?.node?.focus();
         };
         const lastItem = () => {
           const last = descendants.lastEnabled();
-          last && last.node?.focus();
+          last?.node?.focus();
         };
 
         const keyMap: Record<string, React.KeyboardEventHandler> = {

package/src/pagination/Pagination.tsx

@@ -69,7 +69,10 @@ export const getSteps = ({
   count,
   boundaryCount = 1,
   siblingCount = 1,
-}) => {
+}: Pick<
+  PaginationProps,
+  "page" | "count" | "boundaryCount" | "siblingCount"
+>) => {
   const range = (start: number, end: number) =>
     Array.from({ length: end - start + 1 }, (_, i) => start + i);
 

package/src/pagination/steps.test.ts

@@ -1,18 +1,17 @@
-import faker from "faker";
 import { describe, expect, test } from "vitest";
 import { getSteps } from "./Pagination";
 
 describe("getSteps", () => {
   test("lists all pages when count is <= 7", () => {
-    const count = faker.datatype.number({ min: 1, max: 7 });
+    const count = 5;
     expect(getSteps({ page: 1, count })).toEqual(
       Array.from({ length: count }, (_, i) => i + 1),
     );
   });
 
   test("has an end ellipsis when count >= 8", () => {
-    const count = faker.datatype.number({ min: 8 });
-    const page = faker.datatype.number({ min: 1, max: 4 });
+    const count = 8;
+    const page = 3;
     expect(
       getSteps({
         page,
@@ -22,8 +21,8 @@ describe("getSteps", () => {
   });
 
   test("has a start ellipsis when count - page >= 3", () => {
-    const count = faker.datatype.number({ min: 8 });
-    const page = faker.datatype.number({ min: count - 3, max: count });
+    const count = 8;
+    const page = 5;
     expect(
       getSteps({
         page,
@@ -41,8 +40,8 @@ describe("getSteps", () => {
   });
 
   test("has start & end ellipsis when count is high", () => {
-    const count = faker.datatype.number({ min: 9 });
-    const page = faker.datatype.number({ min: 5, max: count - 4 });
+    const count = 9;
+    const page = 5;
     expect(
       getSteps({
         page,
@@ -52,8 +51,8 @@ describe("getSteps", () => {
   });
 
   test("can have a reduced siblingCount", () => {
-    const count = faker.datatype.number({ min: 7 });
-    const page = faker.datatype.number({ min: 4, max: count - 3 });
+    const count = 7;
+    const page = 4;
     expect(
       getSteps({
         page,
@@ -64,8 +63,8 @@ describe("getSteps", () => {
   });
 
   test("can have an increased siblingCount", () => {
-    const count = faker.datatype.number({ min: 11 });
-    const page = faker.datatype.number({ min: 6, max: count - 5 });
+    const count = 11;
+    const page = 6;
     expect(
       getSteps({
         page,
@@ -86,8 +85,8 @@ describe("getSteps", () => {
   });
 
   test("can have an reduced boundaryCount", () => {
-    const count = faker.datatype.number({ min: 7 });
-    const page = faker.datatype.number({ min: 4, max: count - 3 });
+    const count = 7;
+    const page = 4;
     expect(
       getSteps({
         page,
@@ -98,8 +97,8 @@ describe("getSteps", () => {
   });
 
   test("can have an increased boundaryCount", () => {
-    const count = faker.datatype.number({ min: 11 });
-    const page = faker.datatype.number({ min: 6, max: count - 5 });
+    const count = 11;
+    const page = 6;
     expect(
       getSteps({
         page,

package/src/provider/i18n/LanguageProvider.tsx

@@ -1,12 +1,12 @@
 import React, { createContext, useContext } from "react";
-import { TranslationDictionary } from "../../util/i18n/i18n.types";
+import { PartialTranslations } from "../../util/i18n/i18n.types";
 import nb from "../../util/i18n/locales/nb";
 
 export interface LanguageProviderContextType {
   /**
    * Merged with the default language translations object (officially provided translations).
    */
-  translations: TranslationDictionary | TranslationDictionary[];
+  translations: PartialTranslations | PartialTranslations[];
 }
 
 export const LanguageProviderContext =
@@ -16,7 +16,7 @@ export const LanguageProviderContext =
 
 export interface LanguageProviderProps {
   children?: React.ReactNode;
-  translations?: TranslationDictionary | TranslationDictionary[];
+  translations?: PartialTranslations | PartialTranslations[];
 }
 
 export const useProvider = () => useContext(LanguageProviderContext);

package/src/table/Body.tsx

@@ -1,13 +1,11 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 
-export interface BodyProps
-  extends React.HTMLAttributes<HTMLTableSectionElement> {}
+export type BodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
-export interface BodyType
-  extends React.ForwardRefExoticComponent<
-    BodyProps & React.RefAttributes<HTMLTableSectionElement>
-  > {}
+export type BodyType = React.ForwardRefExoticComponent<
+  BodyProps & React.RefAttributes<HTMLTableSectionElement>
+>;
 
 export const Body: BodyType = forwardRef(({ className, ...rest }, ref) => (
   <tbody {...rest} ref={ref} className={cl("navds-table__body", className)} />

package/src/table/ColumnHeader.tsx

@@ -19,10 +19,9 @@ export interface ColumnHeaderProps extends HeaderCellProps {
   sortable?: boolean;
 }
 
-export interface ColumnHeaderType
-  extends React.ForwardRefExoticComponent<
-    ColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>
-  > {}
+export type ColumnHeaderType = React.ForwardRefExoticComponent<
+  ColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>
+>;
 
 export const ColumnHeader: ColumnHeaderType = forwardRef(
   ({ className, children, sortable = false, sortKey, ...rest }, ref) => {

package/src/table/ExpandableRow.tsx

@@ -49,10 +49,9 @@ export interface ExpandableRowProps extends Omit<RowProps, "content"> {
   colSpan?: number;
 }
 
-export interface ExpandableRowType
-  extends React.ForwardRefExoticComponent<
-    ExpandableRowProps & React.RefAttributes<HTMLTableRowElement>
-  > {}
+export type ExpandableRowType = React.ForwardRefExoticComponent<
+  ExpandableRowProps & React.RefAttributes<HTMLTableRowElement>
+>;
 
 export const ExpandableRow: ExpandableRowType = forwardRef(
   (

package/src/table/Header.tsx

@@ -1,13 +1,11 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 
-export interface HeaderProps
-  extends React.HTMLAttributes<HTMLTableSectionElement> {}
+export type HeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
 
-export interface HeaderType
-  extends React.ForwardRefExoticComponent<
-    HeaderProps & React.RefAttributes<HTMLTableSectionElement>
-  > {}
+export type HeaderType = React.ForwardRefExoticComponent<
+  HeaderProps & React.RefAttributes<HTMLTableSectionElement>
+>;
 
 export const Header: HeaderType = forwardRef(({ className, ...rest }, ref) => (
   <thead {...rest} ref={ref} className={cl("navds-table__header", className)} />

package/src/table/HeaderCell.tsx

@@ -15,10 +15,9 @@ export interface HeaderCellProps
   textSize?: "medium" | "small";
 }
 
-export interface HeaderCellType
-  extends React.ForwardRefExoticComponent<
-    HeaderCellProps & React.RefAttributes<HTMLTableCellElement>
-  > {}
+export type HeaderCellType = React.ForwardRefExoticComponent<
+  HeaderCellProps & React.RefAttributes<HTMLTableCellElement>
+>;
 
 export const HeaderCell: HeaderCellType = forwardRef(
   ({ className, children, align, textSize, ...rest }, ref) => {

package/src/table/Row.tsx

@@ -14,10 +14,9 @@ export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   shadeOnHover?: boolean;
 }
 
-export interface RowType
-  extends React.ForwardRefExoticComponent<
-    RowProps & React.RefAttributes<HTMLTableRowElement>
-  > {}
+export type RowType = React.ForwardRefExoticComponent<
+  RowProps & React.RefAttributes<HTMLTableRowElement>
+>;
 
 export const Row: RowType = forwardRef(
   ({ className, selected = false, shadeOnHover = true, ...rest }, ref) => (

package/src/tabs/parts/tablist/useScrollButtons.ts

@@ -41,7 +41,7 @@ export function useScrollButtons(listRef: React.RefObject<HTMLDivElement>) {
 
     return () => {
       win.removeEventListener("resize", handleResize);
-      resizeObserver && resizeObserver.disconnect();
+      resizeObserver?.disconnect();
       updateScrollButtonState.clear();
     };
   }, [listRef, updateScrollButtonState]);

package/src/tabs/parts/tablist/useTabList.ts

@@ -26,19 +26,19 @@ export function useTabList() {
 
       const nextTab = () => {
         const next = descendants.nextEnabled(idx, loop);
-        next && next.node?.focus();
+        next?.node?.focus();
       };
       const prevTab = () => {
         const prev = descendants.prevEnabled(idx, loop);
-        prev && prev.node?.focus();
+        prev?.node?.focus();
       };
       const firstTab = () => {
         const first = descendants.firstEnabled();
-        first && first.node?.focus();
+        first?.node?.focus();
       };
       const lastTab = () => {
         const last = descendants.lastEnabled();
-        last && last.node?.focus();
+        last?.node?.focus();
       };
 
       const keyMap: Record<string, React.KeyboardEventHandler> = {

package/src/timeline/TimelineRow.tsx

@@ -91,27 +91,26 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
               }
             }}
           >
-            {periods &&
-              periods.map((period) => {
-                return (
-                  <li key={`period-${period.id}`}>
-                    <PeriodContext.Provider
-                      value={{
-                        periodId: period.id,
-                        firstFocus: firstFocusable?.id === period.id,
-                        restProps: period?.restProps,
-                      }}
-                    >
-                      <Period
-                        start={period.start}
-                        end={period.endInclusive}
-                        icon={period.icon}
-                        ref={period?.ref}
-                      />
-                    </PeriodContext.Provider>
-                  </li>
-                );
-              })}
+            {periods?.map((period) => {
+              return (
+                <li key={`period-${period.id}`}>
+                  <PeriodContext.Provider
+                    value={{
+                      periodId: period.id,
+                      firstFocus: firstFocusable?.id === period.id,
+                      restProps: period?.restProps,
+                    }}
+                  >
+                    <Period
+                      start={period.start}
+                      end={period.endInclusive}
+                      icon={period.icon}
+                      ref={period?.ref}
+                    />
+                  </PeriodContext.Provider>
+                </li>
+              );
+            })}
           </ol>
         </div>
       </>

package/src/toggle-group/parts/useToggleItem.ts

@@ -55,19 +55,19 @@ export function useToggleItem<P extends UseToggleItemProps>(
 
       const nextTab = () => {
         const next = descendants.nextEnabled(idx, false);
-        next && next.node?.focus();
+        next?.node?.focus();
       };
       const prevTab = () => {
         const prev = descendants.prevEnabled(idx, false);
-        prev && prev.node?.focus();
+        prev?.node?.focus();
       };
       const firstTab = () => {
         const first = descendants.firstEnabled();
-        first && first.node?.focus();
+        first?.node?.focus();
       };
       const lastTab = () => {
         const last = descendants.lastEnabled();
-        last && last.node?.focus();
+        last?.node?.focus();
       };
 
       const keyMap: Record<string, React.KeyboardEventHandler> = {

package/src/util/TextareaAutoSize.tsx

@@ -40,7 +40,7 @@ const checkState = (
  * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow/ownerWindow.ts
  */
 const ownerWindow = (node: Node | undefined): Window => {
-  const doc = (node && node.ownerDocument) || document;
+  const doc = node?.ownerDocument || document;
   return doc.defaultView || window;
 };
 
@@ -223,7 +223,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
     };
 
     const mainStyle: React.CSSProperties = {
-      ["--__ac-textarea-height"]: state.outerHeightStyle + "px",
+      "--__ac-textarea-height": state.outerHeightStyle + "px",
       // Need a large enough difference to allow scrolling.
       // This prevents infinite rendering loop.
       overflow:

package/src/util/hooks/descendants/descendant.ts

@@ -60,7 +60,7 @@ export class DescendantsManager<
     this.descendants.forEach((descendant) => {
       const index = descendants.indexOf(descendant.node);
       descendant.index = index;
-      descendant.node.dataset["index"] = descendant.index.toString();
+      descendant.node.dataset.index = descendant.index.toString();
     });
   };
 

package/src/util/hooks/descendants/useDescendant.tsx

@@ -52,7 +52,7 @@ export function createDescendantContext<
 
     useClientLayoutEffect(() => {
       if (!ref.current) return;
-      const dataIndex = Number(ref.current.dataset["index"]);
+      const dataIndex = Number(ref.current.dataset.index);
       if (index !== dataIndex && !Number.isNaN(dataIndex)) {
         setIndex(dataIndex);
       }

package/src/util/i18n/get.ts

@@ -1,4 +1,4 @@
-import { TranslationObject } from "./i18n.types";
+import { PartialTranslations } from "./i18n.types";
 
 /**
  * https://github.com/Shopify/polaris/blob/main/polaris-react/src/utilities/get.ts#L3
@@ -7,7 +7,7 @@ const OBJECT_NOTATION_MATCHER = /(\w+)/g;
 
 export function get(
   keypath: string | string[],
-  ...objs: (TranslationObject | undefined)[]
+  ...objs: (PartialTranslations | undefined)[]
 ) {
   const keys = Array.isArray(keypath) ? keypath : getKeypath(keypath);
 
@@ -16,7 +16,7 @@ export function get(
       continue;
     }
 
-    let acc: string | TranslationObject = obj;
+    let acc: string | PartialTranslations = obj;
 
     for (let i = 0; i < keys.length; i++) {
       const val = acc[keys[i]];

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

@@ -1,8 +1,7 @@
 import { useContext } from "react";
 import { LanguageProviderContext } from "../../provider/i18n/LanguageProvider";
 import { get } from "./get";
-import { Component, ComponentTranslation } from "./i18n.types";
-import nb from "./locales/nb";
+import { Component, ComponentTranslation, Translations } from "./i18n.types";
 
 /**
  * https://regex101.com/r/LYKWi3/1
@@ -27,7 +26,7 @@ export function useI18n<T extends Component>(
    * https://github.com/Shopify/polaris/blob/2115f9ba2f5bcbf2ad15745233501bff2db81ecf/polaris-react/src/utilities/i18n/I18n.ts#L24
    */
   const translate = (
-    keypath: NestedKeyOf<(typeof nb)[T]>,
+    keypath: NestedKeyOf<Translations[T]>,
     options?: { replacements: Record<string, string | number> },
   ) => {
     const text = get(

package/src/util/i18n/i18n.types.ts

@@ -1,20 +1,16 @@
-import nb from "./locales/nb";
-
-export interface TranslationObject {
-  [key: string]: string | TranslationObject | undefined;
-}
-
-export interface TranslationDictionary {
-  [key: string]: TranslationObject | undefined;
-}
+import type nb from "./locales/nb";
 
 /* https://stackoverflow.com/questions/47914536/use-partial-in-nested-property-with-typescripts */
 type RecursivePartial<T> = {
   [P in keyof T]?: RecursivePartial<T[P]>;
 };
 
-export type Component = keyof typeof nb;
+export type Translations = typeof nb;
+
+export type PartialTranslations = RecursivePartial<Translations>;
+
+export type Component = keyof Translations;
 
 export type ComponentTranslation<T extends Component> = RecursivePartial<
-  (typeof nb)[T]
+  Translations[T]
 >;

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

@@ -0,0 +1,40 @@
+import type { Translations } from "../i18n.types";
+
+export default {
+  FileUpload: {
+    dropzone: {
+      button: "Choose file",
+      buttonMultiple: "Choose files",
+      dragAndDrop: "Drag and drop file here",
+      dragAndDropMultiple: "Drag and drop files here",
+      drop: "Drop",
+      or: "or",
+      disabled: "File upload disabled",
+      disabledFilelimit: "You cannot upload more files",
+    },
+    item: {
+      retryButtonTitle: "Try uploading the file again",
+      deleteButtonTitle: "Delete file",
+      uploading: "Uploading…",
+      downloading: "Downloading…",
+    },
+  },
+  FormProgress: {
+    step: "Step {activeStep} of {totalSteps}",
+    showAllSteps: "Show all steps",
+    hideAllSteps: "Hide all steps",
+  },
+  Alert: {
+    closeAlert: "Close alert",
+    closeMessage: "Close message",
+    error: "Error",
+    info: "Information",
+    success: "Success",
+    warning: "Warning",
+  },
+  Chips: {
+    Removable: {
+      labelSuffix: "delete",
+    },
+  },
+} satisfies Translations;

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

@@ -1,3 +1,11 @@
+interface TranslationMap {
+  [component: string]:
+    | Record<string, string>
+    | {
+        [subComponent: string]: Record<string, string>;
+      };
+}
+
 export default {
   FileUpload: {
     dropzone: {
@@ -22,4 +30,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: "Advarsel",
+  },
+  Chips: {
+    Removable: {
+      /** Will be appended to the accessible name for the button. */
+      labelSuffix: "slett",
+    },
+  },
+} satisfies TranslationMap;

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

@@ -0,0 +1,40 @@
+import type { Translations } from "../i18n.types";
+
+export default {
+  FileUpload: {
+    dropzone: {
+      button: "Vel fil",
+      buttonMultiple: "Vel filer",
+      dragAndDrop: "Dra og slepp fila her",
+      dragAndDropMultiple: "Dra og slepp filer her",
+      drop: "Slepp",
+      or: "eller",
+      disabled: "Filopplasting er deaktivert",
+      disabledFilelimit: "Du kan ikkje laste opp fleire filer",
+    },
+    item: {
+      retryButtonTitle: "Prøv å laste opp fila på nytt",
+      deleteButtonTitle: "Slett fila",
+      uploading: "Lastar opp…",
+      downloading: "Lastar ned…",
+    },
+  },
+  FormProgress: {
+    step: "Steg {activeStep} av {totalSteps}",
+    showAllSteps: "Vis alle steg",
+    hideAllSteps: "Skjul alle steg",
+  },
+  Alert: {
+    closeAlert: "Lukk varsel",
+    closeMessage: "Lukk melding",
+    error: "Feil",
+    info: "Informasjon",
+    success: "Suksess",
+    warning: "Åtvaring",
+  },
+  Chips: {
+    Removable: {
+      labelSuffix: "slett",
+    },
+  },
+} satisfies Translations;

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

@@ -0,0 +1,23 @@
+/* eslint-disable @vitest/expect-expect */
+import { describe, expect, test } from "vitest";
+import { Translations } from "./i18n.types";
+import en from "./locales/en";
+import nb from "./locales/nb";
+import nn from "./locales/nn";
+
+function checkValues(obj: Translations | Record<string, string>) {
+  Object.values(obj).forEach((value) => {
+    if (typeof value === "object") {
+      checkValues(value);
+    } else {
+      expect(value).toBeTypeOf("string");
+      expect(value).not.toBe("");
+    }
+  });
+}
+
+describe("Locale", () => {
+  test("NB should have no empty strings", () => checkValues(nb));
+  test("NN should have no empty strings", () => checkValues(nn));
+  test("EN should have no empty strings", () => checkValues(en));
+});

package/src/util/requireReactElement.ts

@@ -0,0 +1,25 @@
+import React from "react";
+
+export const requireReactElement = <T extends React.ReactNode>(
+  children: T,
+): T => {
+  const isReactElement = React.isValidElement(children);
+
+  if (!isReactElement) {
+    throw Error(
+      `Expected a single React Element child, but got: ${React.Children.toArray(
+        children,
+      )
+        .map((child) =>
+          typeof child === "object" &&
+          "type" in child &&
+          typeof child.type === "string"
+            ? child.type
+            : typeof child,
+        )
+        .join(", ")}`,
+    );
+  }
+
+  return children;
+};