@navikt/ds-react 7.2.1 → 7.3.1

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)) {