@navikt/ds-react 6.10.1 → 6.12.0

package/src/layout/box/Box.tsx

@@ -1,78 +1,60 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
+import BasePrimitive, {
+  PRIMITIVE_PROPS,
+  PrimitiveProps,
+} from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps } from "../utilities/css";
 import {
-  BackgroundToken,
+  BackgroundColorToken,
   BorderColorToken,
   BorderRadiiToken,
   ResponsiveProp,
   ShadowToken,
   SpaceDelimitedAttribute,
-  SpacingScale,
+  SurfaceColorToken,
 } from "../utilities/types";
 
-export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** CSS `background-color` property. Accepts a color token. */
-  background?: BackgroundToken;
-  /** CSS `border-color` property. Accepts a color token. */
-  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">;
-  /**
-   * Padding around children.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * padding='4'
-   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-   */
-  padding?: ResponsiveProp<SpacingScale>;
-  /**
-   * Horizontal padding around children.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * paddingInline='4'
-   * paddingInline='4 5'
-   * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
-   */
-  paddingInline?: ResponsiveProp<
-    SpacingScale | `${SpacingScale} ${SpacingScale}`
-  >;
-  /**
-   * Vertical padding around children.
-   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
-   * or an object of spacing tokens for different breakpoints.
-   * @example
-   * paddingBlock='4'
-   * paddingBlock='4 5'
-   * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-   */
-  paddingBlock?: ResponsiveProp<
-    SpacingScale | `${SpacingScale} ${SpacingScale}`
-  >;
-  /** Shadow on box. Accepts a shadow token.
-   * @example
-   * shadow='small'
-   */
-  shadow?: ShadowToken;
-}
+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;
+  };
 
 /**
  * Foundational Layout-primitive for generic encapsulation & styling.
@@ -104,17 +86,16 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
 export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
   (
     {
+      children,
+      className,
       as: Component = "div",
       background,
       borderColor,
       borderWidth,
       borderRadius,
-      className,
-      padding,
-      paddingInline,
-      paddingBlock,
       shadow,
       style: _style,
+      asChild,
       ...rest
     },
     ref,
@@ -142,18 +123,27 @@ export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
         false,
         ["0"],
       ),
-      ...getResponsiveProps("box", "padding", "spacing", padding),
-      ...getResponsiveProps("box", "padding-inline", "spacing", paddingInline),
-      ...getResponsiveProps("box", "padding-block", "spacing", paddingBlock),
     };
 
+    const Comp = asChild ? Slot : Component;
+
     return (
-      <Component
-        {...rest}
-        className={cl("navds-box", className)}
-        ref={ref}
-        style={style}
-      />
+      <BasePrimitive {...rest}>
+        <Comp
+          {...omit(rest, PRIMITIVE_PROPS)}
+          ref={ref}
+          style={style}
+          className={cl("navds-box", className, {
+            "navds-box-bg": background,
+            "navds-box-border-color": borderColor,
+            "navds-box-border-width": borderWidth,
+            "navds-box-border-radius": borderRadius,
+            "navds-box-shadow": shadow,
+          })}
+        >
+          {children}
+        </Comp>
+      </BasePrimitive>
     );
   },
 );

package/src/layout/grid/HGrid.tsx

@@ -1,34 +1,42 @@
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef } from "react";
+import React, { forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { OverridableComponent, omit } from "../../util";
+import BasePrimitive, {
+  PRIMITIVE_PROPS,
+  PrimitiveProps,
+} from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
-export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * 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 = 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";
+  };
 /**
  * Horizontal Grid Primitive with dynamic columns and gap based on breakpoints.
  *
@@ -54,25 +62,45 @@ export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
  *   <div />
  * </HGrid>
  */
-export const HGrid = forwardRef<HTMLDivElement, HGridProps>(
-  ({ className, columns, gap, style, align, ...rest }, ref) => {
-    const styles: React.CSSProperties = {
-      ...style,
-      "--__ac-hgrid-align": align,
-      ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
-      ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
-    };
+export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
+  forwardRef(
+    (
+      {
+        children,
+        className,
+        as: Component = "div",
+        columns,
+        gap,
+        style,
+        align,
+        asChild,
+        ...rest
+      },
+      ref,
+    ) => {
+      const styles: React.CSSProperties = {
+        ...style,
+        "--__ac-hgrid-align": align,
+        ...getResponsiveProps(`hgrid`, "gap", "spacing", gap),
+        ...getResponsiveValue(`hgrid`, "columns", formatGrid(columns)),
+      };
+
+      const Comp = asChild ? Slot : Component;
 
-    return (
-      <div
-        {...rest}
-        ref={ref}
-        className={cl("navds-hgrid", className)}
-        style={styles}
-      />
-    );
-  },
-);
+      return (
+        <BasePrimitive {...rest}>
+          <Comp
+            {...omit(rest, PRIMITIVE_PROPS)}
+            ref={ref}
+            className={cl("navds-hgrid", className)}
+            style={styles}
+          >
+            {children}
+          </Comp>
+        </BasePrimitive>
+      );
+    },
+  );
 
 function formatGrid(
   props?: ResponsiveProp<number | string>,

package/src/layout/page/Page.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
 import { OverridableComponent } from "../../util";
+import { BackgroundColorToken } from "../utilities/types";
 import { PageBlock } from "./parts/PageBlock";
 
 export interface PageProps extends React.HTMLAttributes<HTMLElement> {
@@ -11,10 +11,11 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
    */
   as?: "div" | "body";
   /**
-   * Background color. Accepts a color token.
+   * Background color.
+   * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#753d1cf4d1d6).
    * @default "bg-default"
    */
-  background?: keyof typeof bgColors.a | "surface-subtle";
+  background?: BackgroundColorToken;
   /**
    * Allows better positioning of footer
    */

package/src/layout/responsive/Responsive.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { BreakpointsAlias } from "../utilities/types";
 
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {

package/src/layout/stack/HStack.tsx

@@ -1,8 +1,9 @@
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/types";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { Stack, StackProps } from "./Stack";
 
-export type HStackProps = Omit<StackProps, "direction">;
+export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
 
 /**
  * Layout-primitive for horizontal flexbox

package/src/layout/stack/Stack.tsx

@@ -1,73 +1,85 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
+import { Slot } from "../../slot/Slot";
+import { omit } from "../../util";
 import { OverridableComponent } from "../../util/types";
+import BasePrimitive, {
+  PRIMITIVE_PROPS,
+  PrimitiveProps,
+} from "../base/BasePrimitive";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
-export interface StackProps extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * 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.
-   *
-   * @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={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
-   */
-  gap?: ResponsiveProp<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 = 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 const Stack: OverridableComponent<StackProps, HTMLDivElement> =
   forwardRef(
     (
       {
-        as: Component = "div",
+        children,
         className,
-        align,
+        as: Component = "div",
+        align = "stretch",
         justify,
         wrap = true,
         gap,
         style: _style,
         direction = "row",
+        asChild,
         ...rest
       },
       ref,
@@ -81,16 +93,22 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
         ...getResponsiveValue(`stack`, "justify", justify),
       };
 
+      const Comp = asChild ? Slot : Component;
+
       return (
-        <Component
-          {...rest}
-          ref={ref}
-          style={style}
-          className={cl("navds-stack", className, {
-            "navds-vstack": direction === "column",
-            "navds-hstack": direction === "row",
-          })}
-        />
+        <BasePrimitive {...rest}>
+          <Comp
+            {...omit(rest, PRIMITIVE_PROPS)}
+            ref={ref}
+            style={style}
+            className={cl("navds-stack", className, {
+              "navds-vstack": direction === "column",
+              "navds-hstack": direction === "row",
+            })}
+          >
+            {children}
+          </Comp>
+        </BasePrimitive>
       );
     },
   );

package/src/layout/stack/VStack.tsx

@@ -1,8 +1,10 @@
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/types";
+import { PrimitiveAsChildProps } from "../base/PrimitiveAsChildProps";
 import { Stack, StackProps } from "./Stack";
 
-export type VStackProps = Omit<StackProps, "direction" | "wrap">;
+export type VStackProps = PrimitiveAsChildProps &
+  Omit<StackProps, "direction" | "wrap">;
 
 /**
  * Layout-primitive for vetical flexbox

package/src/layout/utilities/css.ts

@@ -50,6 +50,9 @@ const translateTokenStringToCSS = (
         const width = 100 / arr.length;
         return `calc((100vw - ${width}%)/2)`;
       }
+      if (["mi", "mb"].includes(componentProp) && x === "auto") {
+        return "auto";
+      }
 
       let output = `var(--a-${tokenSubgroup}-${x})`;
       if (tokenExceptions.includes(x)) {

package/src/layout/utilities/types.ts

@@ -5,9 +5,8 @@ import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
 import shadows from "@navikt/ds-tokens/src/shadow.json";
 import Spacing from "@navikt/ds-tokens/src/spacing.json";
 
-export type BackgroundToken =
-  | keyof typeof bgColors.a
-  | keyof typeof surfaceColors.a;
+export type BackgroundColorToken = keyof typeof bgColors.a;
+export type SurfaceColorToken = keyof typeof surfaceColors.a;
 export type BorderColorToken = keyof typeof borderColors.a;
 export type BorderRadiiToken =
   | keyof (typeof borderRadii.a)["border-radius"]

package/src/list/ListItem.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyShort, Label } from "../typography";
+import { BodyLong } from "../typography";
 import { ListContext } from "./context";
 import { ListItemProps } from "./types";
 
@@ -45,14 +45,14 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
           </div>
         )}
 
-        <BodyShort as="div" size={size} className="navds-list__item-content">
+        <BodyLong as="div" size={size} className="navds-list__item-content">
           {title && (
-            <Label as="p" size={size}>
+            <BodyLong as="p" size={size} weight="semibold">
               {title}
-            </Label>
+            </BodyLong>
           )}
           {children}
-        </BodyShort>
+        </BodyLong>
       </li>
     );
   },

package/src/modal/dialog-polyfill.ts

@@ -631,7 +631,6 @@ dialogPolyfill.DialogManager = function () {
     this.mo_ = new MutationObserver(function (records) {
       var removed = [];
       records.forEach(function (rec) {
-        // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type c in this scenario
         for (var i = 0, c; (c = rec.removedNodes[i]); ++i) {
           if (!(c instanceof Element)) {
             continue;
@@ -679,7 +678,6 @@ dialogPolyfill.DialogManager.prototype.unblockDocument = function () {
 dialogPolyfill.DialogManager.prototype.updateStacking = function () {
   var zIndex = this.zIndexHigh_;
 
-  // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type dpi in this scenario
   for (var i = 0, dpi; (dpi = this.pendingDialogStack[i]); ++i) {
     dpi.updateZIndex(--zIndex, --zIndex);
     if (i === 0) {
@@ -705,7 +703,6 @@ dialogPolyfill.DialogManager.prototype.containedByTopDialog_ = function (
   candidate,
 ) {
   while ((candidate = findNearestDialog(candidate))) {
-    // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type dpi in this scenario
     for (var i = 0, dpi; (dpi = this.pendingDialogStack[i]); ++i) {
       if (dpi.dialog === candidate) {
         return i === 0; // only valid if top-most

package/src/overlays/dismissablelayer/DismissableLayer.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { useMergeRefs } from "../../util/hooks";
 import { createDescendantContext } from "../../util/hooks/descendants/useDescendant";
 import { AsChild } from "../../util/types/AsChild";

package/src/overlays/dismissablelayer/util/useFocusOutside.ts

@@ -46,7 +46,11 @@ export function useFocusOutside(
    * we can eliminate the need for DOM traversal to verify if the focused element is within the react tree.
    */
   return {
-    onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),
-    onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),
+    onFocusCapture: () => {
+      isFocusInsideReactTreeRef.current = true;
+    },
+    onBlurCapture: () => {
+      isFocusInsideReactTreeRef.current = false;
+    },
   };
 }