@navikt/ds-react 5.7.6 → 5.8.0

package/esm/layout/stack/Stack.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
-import { ResponsiveProp, SpacingScale } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface StackProps extends HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /**

package/esm/layout/stack/Stack.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { getResponsiveProps, getResponsiveValue, } from "../utilities/css";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 export const Stack = forwardRef((_a, ref) => {
     var { as: Component = "div", className, align, justify, wrap = true, gap, style: _style, direction = "row" } = _a, rest = __rest(_a, ["as", "className", "align", "justify", "wrap", "gap", "style", "direction"]);
     const style = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, _style), { "--__ac-stack-wrap": wrap ? "wrap" : "nowrap" }), getResponsiveProps(`stack`, "gap", "spacing", gap)), getResponsiveValue(`stack`, "direction", direction)), getResponsiveValue(`stack`, "align", align)), getResponsiveValue(`stack`, "justify", justify));

package/esm/layout/stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAE1D,OAAO,EACL,kBAAkB,EAClB,kBAAkB,GAGnB,MAAM,kBAAkB,CAAC;AAoC1B,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,GAAG,KAAK,OAElB,EADI,IAAI,cATT,4EAUC,CADQ;IAIT,MAAM,KAAK,2FACN,MAAM,KACT,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAC1C,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,GACnD,kBAAkB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,GAC3C,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CACnD,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;YACtC,cAAc,EAAE,SAAS,KAAK,KAAK;SACpC,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../src/layout/stack/Stack.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAqC1E,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAUC,EACD,GAAG,EACH,EAAE;QAZF,EACE,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,EACL,OAAO,EACP,IAAI,GAAG,IAAI,EACX,GAAG,EACH,KAAK,EAAE,MAAM,EACb,SAAS,GAAG,KAAK,OAElB,EADI,IAAI,cATT,4EAUC,CADQ;IAIT,MAAM,KAAK,2FACN,MAAM,KACT,mBAAmB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,KAC1C,kBAAkB,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,CAAC,GAClD,kBAAkB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,CAAC,GACnD,kBAAkB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,GAC3C,kBAAkB,CAAC,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CACnD,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;YACtC,cAAc,EAAE,SAAS,KAAK,QAAQ;YACtC,cAAc,EAAE,SAAS,KAAK,KAAK;SACpC,CAAC,IACF,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/esm/layout/utilities/css.d.ts

@@ -1,14 +1,7 @@
-export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
-export type SpacingScale = "0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32";
-export type SpaceDelimitedAttribute<T extends string> = T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`;
-type FixedResponsiveT<T> = {
-    [Breakpoint in BreakpointsAlias]?: T;
-};
-export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
+import { ResponsiveProp } from "./types";
 export declare function getResponsiveValue<T = string>(componentName: string, componentProp: string, responsiveProp?: ResponsiveProp<T>): {
     [k: string]: T;
 };
 export declare function getResponsiveProps<T extends string>(componentName: string, componentProp: string, tokenSubgroup: string, responsiveProp?: ResponsiveProp<T>, invert?: boolean, tokenExceptions?: string[]): {
     [x: string]: string;
 };
-export {};

package/esm/layout/utilities/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"AAqCA,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,cAAkC;IAElC,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,cAAc;SAChE,CAAC;KACH;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,eAAe,CAAC,EAAE,EAAE,CAAC;QACzE,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;QAC7D,eAAe;KAChB,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,uBAAuB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACpD,QAAQ,SAAS,EAAE;QACjB,KAAK,IAAI;YACP,OAAO,KAAK,CAAC;KAChB;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,aAAqB,EACrB,WAAmB,EACnB,aAAqB,EACrB,eAAyB,EACzB,MAAe,EACf,EAAE;IACF,OAAO,WAAW;SACf,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE;QACjB,IAAI,aAAa,KAAK,eAAe,IAAI,CAAC,KAAK,MAAM,EAAE;YACrD,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;YAC/B,OAAO,iBAAiB,KAAK,QAAQ,CAAC;SACvC;QAED,IAAI,MAAM,GAAG,WAAW,aAAa,IAAI,CAAC,GAAG,CAAC;QAC9C,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;YAC/B,MAAM,GAAG,uBAAuB,CAAC,CAAC,CAAC,CAAC;SACrC;QACD,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,KAAK,GAAG,EAAE;gBACb,OAAO,GAAG,CAAC;aACZ;YACD,OAAO,aAAa,MAAM,GAAG,CAAC;SAC/B;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAAkC,EAClC,MAAM,GAAG,KAAK,EACd,kBAA4B,EAAE;IAE9B,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAC7C,yBAAyB,CACvB,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EACf,MAAM,CACP;SACJ,CAAC;KACH;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;IACtB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,EAAE;QACzE,UAAU,CAAC,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE,CAAC;YACvE,yBAAyB,CACvB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,EACf,MAAM,CACP,CAAC;IACN,CAAC,CAAC,CAAC;IACH,OAAO,UAAU,CAAC;AACpB,CAAC"}
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../src/layout/utilities/css.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,cAAkC;IAElC,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAAE,cAAc;SAChE,CAAC;KACH;IAED,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,EAAE,eAAe,CAAC,EAAE,EAAE,CAAC;QACzE,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE;QAC7D,eAAe;KAChB,CAAC,CACH,CAAC;AACJ,CAAC;AAED,MAAM,uBAAuB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACpD,QAAQ,SAAS,EAAE;QACjB,KAAK,IAAI;YACP,OAAO,KAAK,CAAC;KAChB;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,yBAAyB,GAAG,CAChC,aAAqB,EACrB,WAAmB,EACnB,aAAqB,EACrB,eAAyB,EACzB,MAAe,EACf,EAAE;IACF,OAAO,WAAW;SACf,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE;QACjB,IAAI,aAAa,KAAK,eAAe,IAAI,CAAC,KAAK,MAAM,EAAE;YACrD,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC;YAC/B,OAAO,iBAAiB,KAAK,QAAQ,CAAC;SACvC;QAED,IAAI,MAAM,GAAG,WAAW,aAAa,IAAI,CAAC,GAAG,CAAC;QAC9C,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;YAC/B,MAAM,GAAG,uBAAuB,CAAC,CAAC,CAAC,CAAC;SACrC;QACD,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,KAAK,GAAG,EAAE;gBACb,OAAO,GAAG,CAAC;aACZ;YACD,OAAO,aAAa,MAAM,GAAG,CAAC;SAC/B;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,UAAU,kBAAkB,CAChC,aAAqB,EACrB,aAAqB,EACrB,aAAqB,EACrB,cAAkC,EAClC,MAAM,GAAG,KAAK,EACd,kBAA4B,EAAE;IAE9B,IAAI,CAAC,cAAc,EAAE;QACnB,OAAO,EAAE,CAAC;KACX;IAED,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;QACtC,OAAO;YACL,CAAC,UAAU,aAAa,IAAI,aAAa,KAAK,CAAC,EAC7C,yBAAyB,CACvB,aAAa,EACb,cAAc,EACd,aAAa,EACb,eAAe,EACf,MAAM,CACP;SACJ,CAAC;KACH;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;IACtB,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,EAAE;QACzE,UAAU,CAAC,UAAU,aAAa,IAAI,aAAa,IAAI,eAAe,EAAE,CAAC;YACvE,yBAAyB,CACvB,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,EACf,MAAM,CACP,CAAC;IACN,CAAC,CAAC,CAAC;IACH,OAAO,UAAU,CAAC;AACpB,CAAC"}

package/esm/layout/utilities/types.d.ts

@@ -3,7 +3,16 @@ import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
 import borderColors from "@navikt/ds-tokens/src/colors-border.json";
 import borderRadii from "@navikt/ds-tokens/src/border.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 BorderColorToken = keyof typeof borderColors.a;
 export type BorderRadiiToken = keyof (typeof borderRadii.a)["border-radius"] | "0";
 export type ShadowToken = keyof typeof shadows.a.shadow;
+export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+export type SpacingScale = keyof (typeof Spacing)["a"]["spacing"];
+export type SpaceDelimitedAttribute<T extends string> = T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`;
+type FixedResponsiveT<T> = {
+    [Breakpoint in BreakpointsAlias]?: T;
+};
+export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
+export {};

package/esm/loader/Loader.d.ts

@@ -37,7 +37,7 @@ export type LoaderType = React.ForwardRefExoticComponent<LoaderProps & React.Ref
  *
  * @example
  * ```jsx
- * <Loader size="3xlarge" title="venter..." />
+ * <Loader size="3xlarge" title="Venter..." />
  * ```
  */
 export declare const Loader: LoaderType;

package/esm/loader/Loader.js

@@ -20,7 +20,7 @@ import { omit, useId } from "../util";
  *
  * @example
  * ```jsx
- * <Loader size="3xlarge" title="venter..." />
+ * <Loader size="3xlarge" title="Venter..." />
  * ```
  */
 export const Loader = forwardRef((_a, ref) => {

package/esm/modal/Modal.js

@@ -70,7 +70,7 @@ import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
  */
 export const Modal = forwardRef((_a, ref) => {
     var _b, _c;
-    var { header, children, open, onBeforeClose, onCancel, width, portal, className, "aria-labelledby": ariaLabelledby, style } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "width", "portal", "className", "aria-labelledby", "style"]);
+    var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, portal, className, "aria-labelledby": ariaLabelledby, style, onClick } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "portal", "className", "aria-labelledby", "style", "onClick"]);
     const modalRef = useRef(null);
     const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
     const ariaLabelId = useId();
@@ -86,6 +86,12 @@ export const Modal = forwardRef((_a, ref) => {
         if (needPolyfill && modalRef.current && portalNode) {
             dialogPolyfill.registerDialog(modalRef.current);
         }
+        // We set autofocus on the dialog element to prevent the default behavior where first focusable element gets focus when modal is opened.
+        // This is mainly to fix an edge case where having a Tooltip as the first focusable element would make it activate when you open the modal.
+        // We have to use JS because it doesn't work to set it with a prop (React bug?)
+        // Currently doesn't seem to work in Chrome. See also Tooltip.tsx
+        if (modalRef.current && portalNode)
+            modalRef.current.autofocus = true;
     }, [modalRef, portalNode]);
     useEffect(() => {
         // We need to have this in a useEffect so that the content renders before the modal is displayed,
@@ -102,22 +108,37 @@ export const Modal = forwardRef((_a, ref) => {
     }, [modalRef, portalNode, open]);
     useBodyScrollLock(modalRef, portalNode);
     const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
-    const component = (React.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: cl("navds-modal", className, {
-            "navds-modal--polyfilled": needPolyfill,
-            "navds-modal--autowidth": !width,
-            [`navds-modal--${width}`]: isWidthPreset,
-        }), style: Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {})), onCancel: (event) => {
-            // FYI: onCancel fires when you press Esc
-            if (onBeforeClose && onBeforeClose() === false) {
-                event.preventDefault();
+    const mergedClassName = cl("navds-modal", className, {
+        "navds-modal--polyfilled": needPolyfill,
+        "navds-modal--autowidth": !width,
+        [`navds-modal--${width}`]: isWidthPreset,
+    });
+    const mergedStyle = Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {}));
+    const mergedOnCancel = (event) => {
+        if (onBeforeClose && onBeforeClose() === false) {
+            event.preventDefault();
+        }
+        else if (onCancel)
+            onCancel(event);
+    };
+    const mergedOnClick = closeOnBackdropClick && !needPolyfill // closeOnBackdropClick has issues on polyfill when nesting modals (DatePicker)
+        ? (event) => {
+            onClick && onClick(event);
+            if (event.target === modalRef.current &&
+                (!onBeforeClose || onBeforeClose() !== false)) {
+                modalRef.current.close();
             }
-            else if (onCancel)
-                onCancel(event);
-        }, "aria-labelledby": !ariaLabelledby && !rest["aria-label"] && header
-            ? ariaLabelId
-            : ariaLabelledby }),
+        }
+        : onClick;
+    const mergedAriaLabelledBy = !ariaLabelledby && !rest["aria-label"] && header
+        ? ariaLabelId
+        : ariaLabelledby;
+    const component = (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    React.createElement("dialog", Object.assign({}, rest, { ref: mergedRef, className: mergedClassName, style: mergedStyle, onCancel: mergedOnCancel, onClick: mergedOnClick, "aria-labelledby": mergedAriaLabelledBy }),
         React.createElement(ModalContext.Provider, { value: {
                 closeHandler: getCloseHandler(modalRef, header, onBeforeClose),
+                ref: modalRef,
             } },
             header && (React.createElement(ModalHeader, null,
                 header.label && (React.createElement(Detail, { className: "navds-modal__label" }, header.label)),

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/ModalContext.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 interface ModalContextProps {
     closeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+    ref: React.RefObject<HTMLDialogElement>;
 }
 export declare const ModalContext: React.Context<ModalContextProps | null>;
 export {};

package/esm/modal/ModalContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContext.js","sourceRoot":"","sources":["../../src/modal/ModalContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAA2B,IAAI,CAAC,CAAC"}
+{"version":3,"file":"ModalContext.js","sourceRoot":"","sources":["../../src/modal/ModalContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAA2B,IAAI,CAAC,CAAC"}

package/esm/modal/types.d.ts

@@ -42,6 +42,13 @@ export interface ModalProps extends React.DialogHTMLAttributes<HTMLDialogElement
      * Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.
      */
     onCancel?: React.ReactEventHandler<HTMLDialogElement>;
+    /**
+     * Whether to close when clicking on the backdrop.
+     *
+     * **WARNING:** Users may click outside by accident. Don't use if closing can cause data loss, or the modal contains important info.
+     * @default false
+     */
+    closeOnBackdropClick?: boolean;
     /**
      * @default fit-content (up to 700px)
      * */

package/esm/tooltip/Tooltip.js

@@ -9,12 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { arrow as flArrow, autoUpdate, flip, FloatingPortal, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
+import { FloatingPortal, autoUpdate, arrow as flArrow, flip, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, } from "@floating-ui/react";
 import cl from "clsx";
-import React, { cloneElement, forwardRef, useMemo, useRef, useState, } from "react";
+import React, { cloneElement, forwardRef, useContext, useMemo, useRef, useState, } from "react";
+import { ModalContext } from "../modal/ModalContext";
+import { useProvider } from "../provider";
 import { Detail } from "../typography";
 import { mergeRefs, useId } from "../util";
-import { useProvider } from "../provider";
 /**
  * A component that displays a tooltip when the user hovers over its child element.
  *
@@ -33,7 +34,11 @@ export const Tooltip = forwardRef((_a, ref) => {
     var { children, className, arrow: _arrow = true, placement: _placement = "top", open: userOpen, defaultOpen = false, offset: _offset, content, delay = 150, id, keys, maxChar = 80 } = _a, rest = __rest(_a, ["children", "className", "arrow", "placement", "open", "defaultOpen", "offset", "content", "delay", "id", "keys", "maxChar"]);
     const [open, setOpen] = useState(defaultOpen);
     const arrowRef = useRef(null);
-    const rootElement = (_b = useProvider()) === null || _b === void 0 ? void 0 : _b.rootElement;
+    const modalContext = useContext(ModalContext);
+    const providerRootElement = (_b = useProvider()) === null || _b === void 0 ? void 0 : _b.rootElement;
+    const rootElement = modalContext
+        ? modalContext.ref.current
+        : providerRootElement;
     const { x, y, strategy, context, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: { referenceHidden } = {}, }, refs, } = useFloating({
         placement: _placement,
         open: userOpen !== null && userOpen !== void 0 ? userOpen : open,
@@ -44,7 +49,13 @@ export const Tooltip = forwardRef((_a, ref) => {
             flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
             flArrow({ element: arrowRef, padding: 5 }),
         ],
-        whileElementsMounted: autoUpdate,
+        whileElementsMounted: modalContext
+            ? (reference, floating, update) => 
+            // Reduces jumping in Chrome when used in a Modal and it's the first focusable element.
+            // Can be removed when autofocus starts working on <dialog> in Chrome. See also Modal.tsx
+            autoUpdate(reference, floating, update, { animationFrame: true })
+            : autoUpdate,
+        strategy: modalContext ? "fixed" : undefined,
     });
     const { getReferenceProps, getFloatingProps } = useInteractions([
         useHover(context, { handleClose: safePolygon(), restMs: delay }),

package/esm/tooltip/Tooltip.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "5.7.6",
+  "version": "5.8.0",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.7.6",
-    "@navikt/ds-tokens": "^5.7.6",
+    "@navikt/aksel-icons": "^5.8.0",
+    "@navikt/ds-tokens": "^5.8.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/accordion/AccordionHeader.tsx

@@ -1,9 +1,9 @@
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Heading } from "../typography";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 
 export interface AccordionHeaderProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -37,13 +37,13 @@ const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
         aria-expanded={itemContext.open}
         type="button"
       >
-        <div className="navds-accordion__icon-wrapper">
+        <span className="navds-accordion__icon-wrapper">
           <ChevronDownIcon
             className="navds-accordion__header-chevron"
             title="Vis mer"
             aria-hidden
           />
-        </div>
+        </span>
         <Heading
           size={accordionContext?.headingSize ?? "small"}
           as="span"

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -95,8 +95,7 @@ export const FilteredOptionsProvider = ({ children, value: props }) => {
       shouldAutocomplete &&
       normalizeText(searchTerm) !== "" &&
       (previousSearchTerm?.length || 0) < searchTerm.length &&
-      filteredOptions.length > 0 &&
-      !isValueInList(searchTerm, filteredOptions)
+      filteredOptions.length > 0
     ) {
       setValue(
         `${searchTerm}${filteredOptions[0].substring(searchTerm.length)}`

package/src/form/combobox/Input/Input.tsx

@@ -31,6 +31,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       allowNewValues,
       currentOption,
       filteredOptions,
+      isValueNew,
       toggleIsListOpen,
       isListOpen,
       filteredOptionsIndex,
@@ -46,29 +47,43 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
 
     const onEnter = useCallback(
       (event: React.KeyboardEvent) => {
+        const isTextInSelectedOptions = (text: string) => {
+          return selectedOptions.find(
+            (item) => item.toLocaleLowerCase() === text.toLocaleLowerCase()
+          );
+        };
+
         if (currentOption) {
           event.preventDefault();
           // Selecting a value from the dropdown / FilteredOptions
           toggleOption(currentOption, event);
-          if (!isMultiSelect && !selectedOptions.includes(currentOption))
+          if (!isMultiSelect && !isTextInSelectedOptions(currentOption))
             toggleIsListOpen(false);
-        } else if (shouldAutocomplete && selectedOptions.includes(value)) {
+        } else if (shouldAutocomplete && isTextInSelectedOptions(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
           clearInput(event);
         } else if ((allowNewValues || shouldAutocomplete) && value !== "") {
           event.preventDefault();
           // Autocompleting or adding a new value
-          toggleOption(value, event);
-          if (!isMultiSelect && !selectedOptions.includes(value))
+          const selectedValue =
+            allowNewValues && isValueNew ? value : filteredOptions[0];
+          toggleOption(selectedValue, event);
+          if (
+            !isMultiSelect &&
+            !isTextInSelectedOptions(filteredOptions[0] || selectedValue)
+          ) {
             toggleIsListOpen(false);
+          }
         }
       },
       [
         allowNewValues,
         clearInput,
         currentOption,
+        filteredOptions,
         isMultiSelect,
+        isValueNew,
         selectedOptions,
         shouldAutocomplete,
         toggleIsListOpen,

package/src/form/combobox/combobox.stories.tsx

@@ -467,6 +467,50 @@ export const TestThatCallbacksOnlyFireWhenExpected: StoryObj<{
   },
 };
 
+export const TestCasingWhenAutoCompleting = {
+  args: {
+    onChange: jest.fn(),
+    onClear: jest.fn(),
+    onToggleSelected: jest.fn(),
+  },
+  render: (props) => {
+    return (
+      <UNSAFE_Combobox
+        options={["Camel Case", "lowercase", "UPPERCASE"]}
+        label="Liker du best store eller små bokstaver?"
+        shouldAutocomplete
+        allowNewValues
+        {...props}
+      />
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole<HTMLInputElement>("combobox");
+
+    // With exisiting option
+    userEvent.click(input);
+    await userEvent.type(input, "cAmEl CaSe", { delay: 250 });
+    await sleep(250);
+    expect(input.value).toBe("cAmEl CaSe");
+    await userEvent.type(input, "{Enter}");
+    await sleep(250);
+    const chips = canvas.getAllByRole("list")[0];
+    const selectedUpperCaseChip = within(chips).getAllByRole("listitem")[0];
+    expect(selectedUpperCaseChip).toHaveTextContent("Camel Case"); // A weird issue is preventing the accessible name from being used in the test, even if it works in VoiceOver
+
+    // With custom option
+    userEvent.click(input);
+    await userEvent.type(input, "cAmEl{Backspace}", { delay: 250 });
+    await sleep(250);
+    expect(input.value).toBe("cAmEl");
+    await userEvent.type(input, "{Enter}");
+    await sleep(250);
+    const selectedNewValueChip = within(chips).getAllByRole("listitem")[0];
+    expect(selectedNewValueChip).toHaveTextContent("cAmEl"); // A weird issue is preventing the accessible name from being used in the test, even if it works in VoiceOver
+  },
+};
+
 export const TestHoverAndFocusSwitching: StoryObject = {
   render: () => {
     return (

package/src/layout/bleed/Bleed.tsx

@@ -1,10 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import {
-  ResponsiveProp,
-  SpacingScale,
-  getResponsiveProps,
-} from "../utilities/css";
+import { getResponsiveProps } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 import { Slot } from "../../util/Slot";
 
 export type BleedSpacingInline = "0" | "full" | "px" | SpacingScale;

package/src/layout/box/Box.tsx

@@ -1,13 +1,11 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
+import { getResponsiveProps } from "../utilities/css";
 import {
   SpaceDelimitedAttribute,
   ResponsiveProp,
   SpacingScale,
-  getResponsiveProps,
-} from "../utilities/css";
-import {
   BackgroundToken,
   BorderColorToken,
   ShadowToken,

package/src/layout/grid/HGrid.tsx

@@ -1,11 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import {
-  getResponsiveProps,
-  getResponsiveValue,
-  ResponsiveProp,
-  SpacingScale,
-} from "../utilities/css";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
 export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;

package/src/layout/responsive/Responsive.tsx

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

package/src/layout/sidemal-test/Sidebar.tsx

@@ -1,8 +1,8 @@
 import React from "react";
+import { Link } from "../../link";
 import { Heading, Label } from "../../typography";
 import { Box } from "../box";
 import { VStack } from "../stack";
-import { Link } from "../../link";
 
 const LinkElement = ({ children }) => {
   return (

package/src/layout/stack/Stack.tsx

@@ -1,12 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
 import { OverridableComponent } from "../../util/OverridableComponent";
-import {
-  getResponsiveProps,
-  getResponsiveValue,
-  ResponsiveProp,
-  SpacingScale,
-} from "../utilities/css";
+import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
+import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
 export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;

package/src/layout/utilities/css.ts

@@ -1,39 +1,4 @@
-export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
-
-export type SpacingScale =
-  | "0"
-  | "05"
-  | "1"
-  | "1-alt"
-  | "2"
-  | "3"
-  | "4"
-  | "5"
-  | "6"
-  | "7"
-  | "8"
-  | "9"
-  | "10"
-  | "11"
-  | "12"
-  | "14"
-  | "16"
-  | "18"
-  | "20"
-  | "24"
-  | "32";
-
-export type SpaceDelimitedAttribute<T extends string> =
-  | T
-  | `${T} ${T}`
-  | `${T} ${T} ${T}`
-  | `${T} ${T} ${T} ${T}`;
-
-type FixedResponsiveT<T> = {
-  [Breakpoint in BreakpointsAlias]?: T;
-};
-
-export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
+import { ResponsiveProp } from "./types";
 
 export function getResponsiveValue<T = string>(
   componentName: string,

package/src/layout/utilities/types.ts

@@ -3,6 +3,7 @@ import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
 import borderColors from "@navikt/ds-tokens/src/colors-border.json";
 import borderRadii from "@navikt/ds-tokens/src/border.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
@@ -12,3 +13,18 @@ export type BorderRadiiToken =
   | keyof (typeof borderRadii.a)["border-radius"]
   | "0";
 export type ShadowToken = keyof typeof shadows.a.shadow;
+
+export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type SpacingScale = keyof (typeof Spacing)["a"]["spacing"];
+
+export type SpaceDelimitedAttribute<T extends string> =
+  | T
+  | `${T} ${T}`
+  | `${T} ${T} ${T}`
+  | `${T} ${T} ${T} ${T}`;
+type FixedResponsiveT<T> = {
+  [Breakpoint in BreakpointsAlias]?: T;
+};
+
+export type ResponsiveProp<T> = T | FixedResponsiveT<T>;

package/src/loader/Loader.tsx

@@ -52,7 +52,7 @@ export type LoaderType = React.ForwardRefExoticComponent<
  *
  * @example
  * ```jsx
- * <Loader size="3xlarge" title="venter..." />
+ * <Loader size="3xlarge" title="Venter..." />
  * ```
  */
 export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(