@navikt/ds-react 6.11.0 → 6.13.0

package/esm/modal/Modal.js

@@ -74,7 +74,7 @@ const polyfillClassName = "navds-modal--polyfilled";
  */
 export const Modal = forwardRef((_a, ref) => {
     var _b, _c;
-    var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, portal, className, "aria-labelledby": ariaLabelledby, style, onClick, onMouseDown } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "portal", "className", "aria-labelledby", "style", "onClick", "onMouseDown"]);
+    var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, placement, portal, className, "aria-labelledby": ariaLabelledby, style, onClick, onMouseDown } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "placement", "portal", "className", "aria-labelledby", "style", "onClick", "onMouseDown"]);
     const modalRef = useRef(null);
     const mergedRef = useMergeRefs(modalRef, ref);
     const ariaLabelId = useId();
@@ -117,9 +117,10 @@ export const Modal = forwardRef((_a, ref) => {
     useBodyScrollLock(modalRef, portalNode, isNested);
     const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
     const mergedClassName = cl("navds-modal", className, {
-        polyfillClassName: needPolyfill,
+        [polyfillClassName]: needPolyfill,
         "navds-modal--autowidth": !width,
         [`navds-modal--${width}`]: isWidthPreset,
+        "navds-modal--top": placement === "top" && !needPolyfill,
     });
     const mergedStyle = Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {}));
     const mouseClickStart = useRef({

package/esm/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"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"}

package/esm/modal/types.d.ts

@@ -60,6 +60,11 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
      * @default fit-content (up to 700px)
      * */
     width?: "medium" | "small" | number | `${number}${string}`;
+    /**
+     * Where to place the modal in the viewport. (Will always be centered on mobile and old browsers.)
+     * @default "center"
+     */
+    placement?: "top" | "center";
     /**
      * Lets you render the modal into a different part of the DOM.
      * Will use `rootElement` from `Provider` if defined, otherwise `document.body`.

package/esm/toggle-group/parts/useToggleItem.js

@@ -64,7 +64,7 @@ export function useToggleItem({ value, disabled = false, onFocus: _onFocus, onCl
         ref: mergeRefs([register, ref]),
         isSelected,
         isFocused: focusedValue === value,
-        onClick: composeEventHandlers(onClick, () => setSelectedValue(value)),
+        onClick: composeEventHandlers(onClick, () => selectedValue !== value && setSelectedValue(value)),
         onFocus: disabled ? undefined : composeEventHandlers(_onFocus, onFocus),
         onKeyDown: composeEventHandlers(_onKeyDown, onKeyDown),
     };

package/esm/toggle-group/parts/useToggleItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToggleItem.js","sourceRoot":"","sources":["../../../src/toggle-group/parts/useToggleItem.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useToggleItem.js","sourceRoot":"","sources":["../../../src/toggle-group/parts/useToggleItem.ts"],"names":[],"mappings":"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"}

package/esm/util/types/AsChildProps.d.ts

@@ -16,6 +16,7 @@ export type AsChildProps = {
      * ```
      */
     asChild: true;
+    as?: never;
 } | {
     children: React.ReactNode;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.11.0",
+  "version": "6.13.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",
@@ -594,8 +594,8 @@
   "dependencies": {
     "@floating-ui/react": "0.25.4",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^6.11.0",
-    "@navikt/ds-tokens": "^6.11.0",
+    "@navikt/aksel-icons": "^6.13.0",
+    "@navikt/ds-tokens": "^6.13.0",
     "clsx": "^2.1.0",
     "date-fns": "^3.0.0",
     "react-day-picker": "8.10.0"

package/src/alert/Alert.tsx

@@ -16,7 +16,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   children: React.ReactNode;
   /**
-   * Changes colors and icon usage when changed.
+   * Level of severity. Changes colors and icon.
    */
   variant: "error" | "warning" | "info" | "success";
   /**
@@ -30,15 +30,20 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   fullWidth?: boolean;
   /**
-   * Removes background from Alert.
+   * Sets max-width on the content to 43.5rem.
+   * @default true
+   */
+  contentMaxWidth?: boolean;
+  /**
+   * Removes background, border and padding.
    * @default false
    */
   inline?: boolean;
   /**
-   * Removes close-button(X) when false.
+   * Adds a close-button (X).
    *
    * **Requires onClose to be set**.
-   * @default true
+   * @default false
    */
   closeButton?: boolean;
   /**
@@ -85,6 +90,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
       variant,
       size = "medium",
       fullWidth = false,
+      contentMaxWidth = true,
       inline = false,
       closeButton = false,
       onClose,
@@ -109,7 +115,14 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
         )}
       >
         <Icon variant={variant} className="navds-alert__icon" />
-        <BodyLong as="div" size={size} className="navds-alert__wrapper">
+        <BodyLong
+          as="div"
+          size={size}
+          className={cl(
+            "navds-alert__wrapper",
+            contentMaxWidth && "navds-alert__wrapper--maxwidth",
+          )}
+        >
           {children}
         </BodyLong>
         {closeButton && !inline && (
@@ -120,7 +133,15 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(
               variant="tertiary-neutral"
               onClick={onClose}
               type="button"
-              icon={<XMarkIcon title="Lukk Alert" />}
+              icon={
+                <XMarkIcon
+                  title={
+                    ["error", "warning"].includes(variant)
+                      ? "Lukk varsel"
+                      : "Lukk melding"
+                  }
+                />
+              }
             />
           </div>
         )}

package/src/layout/base/BasePrimitive.tsx

@@ -4,8 +4,7 @@ import { Slot } from "../../slot/Slot";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
-export interface BasePrimitiveProps {
-  children: React.ReactElement;
+export type PrimitiveProps = {
   className?: string;
   /**
    * Padding around children.
@@ -40,6 +39,47 @@ export interface BasePrimitiveProps {
   paddingBlock?: ResponsiveProp<
     SpacingScale | `${SpacingScale} ${SpacingScale}`
   >;
+  /**
+   * Margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * margin='4'
+   * margin={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  margin?: ResponsiveProp<SpacingScale>;
+  /**
+   * Horizontal margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * marginInline='4'
+   * marginInline='4 5'
+   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  marginInline?: ResponsiveProp<
+    | SpacingScale
+    | `${SpacingScale} ${SpacingScale}`
+    | "auto"
+    | `auto ${SpacingScale}`
+    | `${SpacingScale} auto`
+  >;
+  /**
+   * Vertical margin around element.
+   * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
+   * or an object of spacing tokens for different breakpoints.
+   * @example
+   * marginBlock='4'
+   * marginBlock='4 5'
+   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  marginBlock?: ResponsiveProp<
+    | SpacingScale
+    | `${SpacingScale} ${SpacingScale}`
+    | "auto"
+    | `auto ${SpacingScale}`
+    | `${SpacingScale} auto`
+  >;
   /**
    * CSS `width`
    */
@@ -140,6 +180,38 @@ export interface BasePrimitiveProps {
    * CSS `flex-grow`
    */
   flexGrow?: ResponsiveProp<string>;
+};
+
+export const PRIMITIVE_PROPS: (keyof PrimitiveProps)[] = [
+  "className",
+  "padding",
+  "paddingInline",
+  "paddingBlock",
+  "margin",
+  "marginInline",
+  "marginBlock",
+  "width",
+  "minWidth",
+  "maxWidth",
+  "height",
+  "minHeight",
+  "maxHeight",
+  "position",
+  "inset",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "overflow",
+  "overflowX",
+  "overflowY",
+  "flexBasis",
+  "flexGrow",
+  "flexShrink",
+];
+
+interface BasePrimitiveProps extends PrimitiveProps {
+  children: React.ReactElement;
 }
 
 export const BasePrimitive = ({
@@ -148,6 +220,9 @@ export const BasePrimitive = ({
   padding,
   paddingInline,
   paddingBlock,
+  margin,
+  marginInline,
+  marginBlock,
   width,
   minWidth,
   maxWidth,
@@ -172,6 +247,10 @@ export const BasePrimitive = ({
     ...getResponsiveProps("r", "p", "spacing", padding),
     ...getResponsiveProps("r", "pi", "spacing", paddingInline),
     ...getResponsiveProps("r", "pb", "spacing", paddingBlock),
+    /* Margin */
+    ...getResponsiveProps("r", "m", "spacing", margin),
+    ...getResponsiveProps("r", "mi", "spacing", marginInline),
+    ...getResponsiveProps("r", "mb", "spacing", marginBlock),
     /* Width & height */
     ...getResponsiveValue("r", "w", width),
     ...getResponsiveValue("r", "minw", minWidth),
@@ -203,6 +282,9 @@ export const BasePrimitive = ({
         "navds-r-p": padding,
         "navds-r-pi": paddingInline,
         "navds-r-pb": paddingBlock,
+        "navds-r-m": margin,
+        "navds-r-mi": marginInline,
+        "navds-r-mb": marginBlock,
         "navds-r-w": width,
         "navds-r-minw": minWidth,
         "navds-r-maxw": maxWidth,

package/src/layout/base/PrimitiveAsChildProps.ts

@@ -0,0 +1,42 @@
+export type PrimitiveAsChildProps =
+  | {
+      children: React.ReactElement | false | null;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <div data-prop data-child />
+       * ```
+       */
+      asChild: true;
+      /**
+       * Implements [OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent)
+       *
+       * When using asChild, the prop is not allowed as it would have no effect.
+       */
+      as?: never;
+    }
+  | {
+      children?: React.ReactNode;
+      /**
+       * Renders the component and its child as a single element,
+       * merging the props of the component with the props of the child.
+       *
+       * @example
+       * ```tsx
+       * <Component asChild data-prop>
+       *   <ChildComponent data-child />
+       * </Component>
+       *
+       * // Renders
+       * <div data-prop data-child />
+       * ```
+       */
+      asChild?: false;
+    };

package/src/layout/box/Box.tsx

@@ -1,6 +1,13 @@
 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 {
   BackgroundColorToken,
@@ -9,77 +16,45 @@ import {
   ResponsiveProp,
   ShadowToken,
   SpaceDelimitedAttribute,
-  SpacingScale,
   SurfaceColorToken,
 } from "../utilities/types";
 
-export interface BoxProps extends 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">;
-  /**
-   * 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.
@@ -111,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,
@@ -149,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>
     );
   },
 );