@navikt/ds-react 7.2.1 → 7.3.0

package/esm/util/requireReactElement.js

@@ -0,0 +1,15 @@
+import React from "react";
+export const requireReactElement = (children) => {
+    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;
+};
+//# sourceMappingURL=requireReactElement.js.map

package/esm/util/requireReactElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"requireReactElement.js","sourceRoot":"","sources":["../../src/util/requireReactElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,QAAW,EACR,EAAE;IACL,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;IAEtD,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,MAAM,KAAK,CACT,mDAAmD,KAAK,CAAC,QAAQ,CAAC,OAAO,CACvE,QAAQ,CACT;aACE,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACb,OAAO,KAAK,KAAK,QAAQ;YACzB,MAAM,IAAI,KAAK;YACf,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ;YAC5B,CAAC,CAAC,KAAK,CAAC,IAAI;YACZ,CAAC,CAAC,OAAO,KAAK,CACjB;aACA,IAAI,CAAC,IAAI,CAAC,EAAE,CAChB,CAAC;IACJ,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC"}

package/esm/util/virtualfocus/Context.d.ts

@@ -29,7 +29,7 @@ export declare const VirtualFocusInternalContextProvider: import("react").Forwar
     loop: boolean;
     uniqueId: string;
 } & {
-    children: React.ReactNode;
+    children: import("react").ReactNode;
 } & import("react").RefAttributes<unknown>>, useVirtualFocusInternalContext: <S extends boolean = true>(strict?: S) => S extends true ? {
     virtualFocusIdx: number;
     setVirtualFocusIdx: Dispatch<SetStateAction<number>>;

package/esm/util/virtualfocus/parts/VirtualFocusContent.d.ts

@@ -1,4 +1,3 @@
 import React from "react";
-export interface VirtualFocusContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
-}
+export type VirtualFocusContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "id">;
 export declare const VirtualFocusContent: React.ForwardRefExoticComponent<VirtualFocusContentProps & React.RefAttributes<HTMLDivElement>>;

package/esm/util/virtualfocus/parts/VirtualFocusContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualFocusContent.js","sourceRoot":"","sources":["../../../../src/util/virtualfocus/parts/VirtualFocusContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;AAK5D,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAG3C,CAAC,EAAqB,EAAE,GAAG,EAAE,EAAE;QAA9B,EAAE,QAAQ,OAAW,EAAN,IAAI,cAAnB,YAAqB,CAAF;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,8BAA8B,EAAE,CAAC;IACtD,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,IAAM,IAAI,IAAE,EAAE,EAAE,gBAAgB,QAAQ,UAAU,KAC5D,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"VirtualFocusContent.js","sourceRoot":"","sources":["../../../../src/util/virtualfocus/parts/VirtualFocusContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;AAO5D,MAAM,CAAC,MAAM,mBAAmB,GAAG,UAAU,CAG3C,CAAC,EAAqB,EAAE,GAAG,EAAE,EAAE;QAA9B,EAAE,QAAQ,OAAW,EAAN,IAAI,cAAnB,YAAqB,CAAF;IACpB,MAAM,EAAE,QAAQ,EAAE,GAAG,8BAA8B,EAAE,CAAC;IACtD,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,IAAM,IAAI,IAAE,EAAE,EAAE,gBAAgB,QAAQ,UAAU,KAC5D,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.2.1",
+  "version": "7.3.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",
@@ -50,6 +50,16 @@
         "default": "./cjs/accordion/index.js"
       }
     },
+    "./ActionMenu": {
+      "import": {
+        "types": "./esm/overlays/action-menu/index.d.ts",
+        "default": "./esm/overlays/action-menu/index.js"
+      },
+      "require": {
+        "types": "./cjs/overlays/action-menu/index.d.ts",
+        "default": "./cjs/overlays/action-menu/index.js"
+      }
+    },
     "./Alert": {
       "import": {
         "types": "./esm/alert/index.d.ts",
@@ -594,8 +604,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.2.1",
-    "@navikt/ds-tokens": "^7.2.1",
+    "@navikt/aksel-icons": "^7.3.0",
+    "@navikt/ds-tokens": "^7.3.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"
@@ -605,9 +615,7 @@
     "@testing-library/jest-dom": "^5.16.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.2.0",
-    "@types/faker": "5.5.8",
-    "concurrently": "7.2.1",
-    "faker": "5.5.3",
+    "concurrently": "9.0.1",
     "fast-glob": "3.2.11",
     "jsdom": "24.0.0",
     "react-dom": "^18.0.0",
@@ -616,7 +624,7 @@
     "swr": "^1.1.2",
     "tsc-alias": "1.8.8",
     "tsx": "^4.19.1",
-    "typescript": "^5.1.6",
+    "typescript": "5.5.4",
     "vitest": "^1.2.2"
   },
   "peerDependencies": {

package/src/accordion/AccordionHeader.tsx

@@ -38,7 +38,6 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
         <span className="navds-accordion__icon-wrapper">
           <ChevronDownIcon
             className="navds-accordion__header-chevron"
-            title="Vis mer"
             aria-hidden
           />
         </span>

package/src/alert/Alert.tsx

@@ -9,6 +9,7 @@ import {
 } from "@navikt/aksel-icons";
 import { Button } from "../button";
 import { BodyLong } from "../typography";
+import { useI18n } from "../util/i18n/i18n.context";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -54,25 +55,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   onClose?: () => void;
 }
 
-const Icon = ({ variant, ...props }) => {
-  switch (variant) {
-    case "error":
-      return <XMarkOctagonFillIcon title="Feil" {...props} />;
-    case "warning":
-      return <ExclamationmarkTriangleFillIcon title="Advarsel" {...props} />;
-    case "info":
-      return <InformationSquareFillIcon title="Informasjon" {...props} />;
-    case "success":
-      return <CheckmarkCircleFillIcon title="Suksess" {...props} />;
-    default:
-      return null;
-  }
+const IconMap = {
+  error: XMarkOctagonFillIcon,
+  warning: ExclamationmarkTriangleFillIcon,
+  info: InformationSquareFillIcon,
+  success: CheckmarkCircleFillIcon,
 };
 
-export interface AlertContextProps {
-  size: "medium" | "small";
-}
-
 /**
  * A component for displaying alerts
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/alert)
@@ -98,6 +87,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
     },
     ref,
   ) => {
+    const translate = useI18n("Alert");
+    const Icon = IconMap[variant];
     return (
       <div
         {...rest}
@@ -114,7 +105,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
           },
         )}
       >
-        <Icon variant={variant} className="navds-alert__icon" />
+        <Icon title={translate(variant)} className="navds-alert__icon" />
         <BodyLong
           as="div"
           size={size}
@@ -137,8 +128,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
                 <XMarkIcon
                   title={
                     ["error", "warning"].includes(variant)
-                      ? "Lukk varsel"
-                      : "Lukk melding"
+                      ? translate("closeAlert")
+                      : translate("closeMessage")
                   }
                 />
               }

package/src/chips/Removable.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useI18n } from "../util/i18n/i18n.context";
 
 export interface ChipsRemovableProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -11,15 +12,15 @@ export interface ChipsRemovableProps
    * @default "action"
    */
   variant?: "action" | "neutral";
-  /**
-   * Replaces label read for screen-readers
-   * @default "slett filter"
-   */
-  removeLabel?: string;
   /**
    * Click callback
    */
   onDelete?: () => void;
+  /**
+   * Replaces label read for screen-readers
+   * @default "slett"
+   */
+  removeLabel?: string;
 }
 
 export const RemovableChips = forwardRef<
@@ -28,17 +29,18 @@ export const RemovableChips = forwardRef<
 >(
   (
     {
-      className,
       children,
       variant = "action",
-      removeLabel = "slett",
       onDelete,
-      type = "button",
+      removeLabel,
+      className,
       onClick,
+      type = "button",
       ...rest
     },
     ref,
   ) => {
+    const translate = useI18n("Chips");
     return (
       <button
         {...rest}
@@ -49,7 +51,9 @@ export const RemovableChips = forwardRef<
           className,
           `navds-chips__removable--${variant}`,
         )}
-        aria-label={`${children} ${removeLabel}`}
+        aria-label={`${children} ${
+          removeLabel ?? translate("Removable.labelSuffix")
+        }`}
         onClick={composeEventHandlers(onClick, onDelete)}
       >
         <span className="navds-chips__chip-text">{children}</span>

package/src/date/datepicker/DatePicker.tsx

@@ -27,8 +27,8 @@ interface DatePickerComponent
    * ```jsx
    * <DatePicker.Standalone
    *   dropdownCaption
-   *   fromDate={new Date("2020-10-01")}
-   *   toDate={new Date("2024-10-01")}
+   *   fromDate={new Date("2022-10-01")}
+   *   toDate={new Date("2026-10-01")}
    * />
    * ```
    */

package/src/date/monthpicker/MonthPicker.tsx

@@ -19,8 +19,8 @@ interface MonthPickerComponent
    * ```jsx
    * <MonthPicker.Standalone
    *   dropdownCaption
-   *   fromDate={new Date("1 Oct 2020")}
-   *   toDate={new Date("1 Oct 2024")}
+   *   fromDate={new Date("1 Oct 2022")}
+   *   toDate={new Date("1 Oct 2026")}
    * />
    * ```
    */

package/src/form/checkbox/Checkbox.test.tsx

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import faker from "faker";
 import React from "react";
 import { describe, expect, test, vi } from "vitest";
 import { Checkbox, CheckboxGroup } from ".";
@@ -10,8 +9,8 @@ const firstArgumentOfFirstCall = (fn: ReturnType<typeof vi.fn>) =>
 test("checkbox group chains onChange calls", async () => {
   const onGroupChange = vi.fn();
   const onChange = vi.fn();
-  const value = faker.datatype.string();
-  const label = faker.datatype.string();
+  const value = "Checkbox value";
+  const label = "My pretty label";
 
   render(
     <CheckboxGroup legend="legend" onChange={onGroupChange}>

package/src/form/confirmation-panel/ConfirmationPanel.test.tsx

@@ -1,11 +1,10 @@
 import { render, screen } from "@testing-library/react";
-import faker from "faker";
 import React from "react";
 import { expect, test } from "vitest";
 import { ConfirmationPanel } from ".";
 
 test("omits error id from input", async () => {
-  const label = faker.datatype.string();
+  const label = "My label";
 
   render(<ConfirmationPanel label={label} errorId="wat"></ConfirmationPanel>);
 

package/src/form/radio/Radio.test.tsx

@@ -1,14 +1,13 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import faker from "faker";
 import React from "react";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { Radio, RadioGroup } from ".";
 
-const value1 = faker.datatype.string();
-const label1 = faker.datatype.string();
-const value2 = faker.datatype.string();
-const label2 = faker.datatype.string();
+const value1 = "My first value";
+const label1 = "World's best radio label";
+const value2 = "Life changing value";
+const label2 = "Radio label of the year";
 
 const Group = (props) => (
   <RadioGroup {...props} legend="legend">

package/src/index.ts

@@ -1,5 +1,6 @@
 "use client";
 export { Accordion, type AccordionProps } from "./accordion";
+export { ActionMenu, type ActionMenuProps } from "./overlays/action-menu";
 export { Alert, type AlertProps } from "./alert";
 export { Button, type ButtonProps } from "./button";
 export { Chat, type ChatProps } from "./chat";

package/src/layout/base/BasePrimitive.tsx

@@ -5,6 +5,9 @@ import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
 export type PrimitiveProps = {
+  /**
+   * @private Hides prop from documentation
+   */
   className?: string;
   /**
    * Padding around children.

package/src/layout/box/Box.tsx

@@ -19,42 +19,41 @@ import {
   SurfaceColorToken,
 } from "../utilities/types";
 
-export type BoxProps = PrimitiveProps &
-  PrimitiveAsChildProps &
-  React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * CSS `background-color` property.
-     * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
-     */
-    background?: BackgroundColorToken | SurfaceColorToken;
-    /**
-     * CSS `border-color` property.
-     * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
-     */
-    borderColor?: BorderColorToken;
-    /**
-     * CSS `border-radius` property.
-     * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
-     * or an object of radius tokens for different breakpoints.
-     * @example
-     * borderRadius='full'
-     * borderRadius='0 full large small'
-     * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
-     */
-    borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
-    /**
-     * CSS `border-width` property. If this is not set there will be no border.
-     * @example
-     * borderWidth='2'
-     * borderWidth='1 2 3 4'
-     */
-    borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
-    /** Shadow on box. Accepts a shadow token.
-     * @example
-     * shadow='small'
-     */
-    shadow?: ShadowToken;
-  };
+export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * CSS `background-color` property.
+   * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+   */
+  background?: BackgroundColorToken | SurfaceColorToken;
+  /**
+   * CSS `border-color` property.
+   * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+   */
+  borderColor?: BorderColorToken;
+  /**
+   * CSS `border-radius` property.
+   * Accepts a [radius token](https://aksel.nav.no/grunnleggende/styling/design-tokens#6d79c5605d31)
+   * or an object of radius tokens for different breakpoints.
+   * @example
+   * borderRadius='full'
+   * borderRadius='0 full large small'
+   * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
+   */
+  borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
+  /**
+   * CSS `border-width` property. If this is not set there will be no border.
+   * @example
+   * borderWidth='2'
+   * borderWidth='1 2 3 4'
+   */
+  borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
+  /** Shadow on box. Accepts a shadow token.
+   * @example
+   * shadow='small'
+   */
+  shadow?: ShadowToken;
+} & PrimitiveProps &
+  PrimitiveAsChildProps;
 
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.

package/src/layout/grid/HGrid.tsx

@@ -10,33 +10,32 @@ import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
-export type HGridProps = PrimitiveProps &
-  PrimitiveAsChildProps &
-  React.HTMLAttributes<HTMLDivElement> & {
-    /**
-     * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
-     * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
-     * @example
-     * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
-     * columns={3}
-     * columns="repeat(3, minmax(0, 1fr))"
-     */
-    columns?: ResponsiveProp<number | string>;
-    /**
-     * Spacing between columns.
-     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-     * or an object of spacing tokens for different breakpoints.
-     * @example
-     * gap="6"
-     * gap="8 4"
-     * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
-     */
-    gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
-    /**
-     * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
-     */
-    align?: "start" | "center" | "end";
-  };
+export type HGridProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints.
+   * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
+   * @example
+   * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
+   * columns={3}
+   * columns="repeat(3, minmax(0, 1fr))"
+   */
+  columns?: ResponsiveProp<number | string>;
+  /**
+   * Spacing between columns.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * gap="6"
+   * gap="8 4"
+   * gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
+   */
+  gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+  /**
+   * Vertical alignment of children. Elements will by default stretch to the height of parent-element.
+   */
+  align?: "start" | "center" | "end";
+} & PrimitiveProps &
+  PrimitiveAsChildProps;
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
  *

package/src/layout/stack/Stack.tsx

@@ -11,60 +11,59 @@ import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
-export type StackProps = PrimitiveProps &
-  PrimitiveAsChildProps &
-  HTMLAttributes<HTMLDivElement> & {
-    /**
-     * CSS `justify-content` property.
-     *
-     * @example
-     * justify='center'
-     * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
-     */
-    justify?: ResponsiveProp<
-      | "start"
-      | "center"
-      | "end"
-      | "space-around"
-      | "space-between"
-      | "space-evenly"
-    >;
-    /**
-     * CSS `align-items` property.
-     * @default "stretch"
-     *
-     * @example
-     * align='center'
-     * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
-     */
-    align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
-    /**
-     * Sets the CSS `flex-wrap` property.
-     */
-    wrap?: boolean;
-    /**
-     * CSS `gap` property.
-     * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-     * or an object of spacing tokens for different breakpoints.
-     *
-     * @example
-     * gap='4'
-     * gap='8 4'
-     * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-     */
-    gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
-    /**
-     * CSS `flex-direction` property.
-     * @default "row"
-     *
-     * @example
-     * direction='row'
-     * direction={{xs: 'row', sm: 'column'}}
-     */
-    direction?: ResponsiveProp<
-      "row" | "column" | "row-reverse" | "column-reverse"
-    >;
-  };
+export type StackProps = HTMLAttributes<HTMLDivElement> & {
+  /**
+   * CSS `justify-content` property.
+   *
+   * @example
+   * justify='center'
+   * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
+   */
+  justify?: ResponsiveProp<
+    | "start"
+    | "center"
+    | "end"
+    | "space-around"
+    | "space-between"
+    | "space-evenly"
+  >;
+  /**
+   * CSS `align-items` property.
+   * @default "stretch"
+   *
+   * @example
+   * align='center'
+   * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
+   */
+  align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
+  /**
+   * Sets the CSS `flex-wrap` property.
+   */
+  wrap?: boolean;
+  /**
+   * CSS `gap` property.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   *
+   * @example
+   * gap='4'
+   * gap='8 4'
+   * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  gap?: ResponsiveProp<SpacingScale | `${SpacingScale} ${SpacingScale}`>;
+  /**
+   * CSS `flex-direction` property.
+   * @default "row"
+   *
+   * @example
+   * direction='row'
+   * direction={{xs: 'row', sm: 'column'}}
+   */
+  direction?: ResponsiveProp<
+    "row" | "column" | "row-reverse" | "column-reverse"
+  >;
+} & PrimitiveProps &
+  PrimitiveAsChildProps;
 
 export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
   forwardRef(

package/src/modal/ModalHeader.tsx

@@ -25,6 +25,12 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
             className="navds-modal__button"
             size="small"
             variant="tertiary-neutral"
+            onKeyDown={(event) => {
+              /* Prevents autofocus used in combination with holding down keys from closing modal */
+              if (["Enter", " "].includes(event.key) && event.repeat) {
+                event.preventDefault();
+              }
+            }}
             onClick={context.closeHandler}
             icon={<XMarkIcon title="Lukk" />}
           />

package/src/modal/dialog-polyfill.ts

@@ -518,7 +518,7 @@ dialogPolyfill.isInlinePositionSetByStylesheet = function (element) {
     // Some browsers throw on cssRules.
     try {
       cssRules = styleSheet.cssRules;
-    } catch (e) {
+    } catch {
       /* empty */
     }
     if (!cssRules) {
@@ -530,7 +530,7 @@ dialogPolyfill.isInlinePositionSetByStylesheet = function (element) {
       // Ignore errors on invalid selector texts.
       try {
         selectedNodes = document.querySelectorAll(rule.selectorText);
-      } catch (e) {
+      } catch {
         /* empty */
       }
       if (!selectedNodes || !inNodeList(selectedNodes, element)) {