@navikt/ds-react 7.30.1 → 7.32.0

package/esm/util/renderStoriesForChromatic.d.ts

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 export declare function renderStoriesForChromatic(stories: Record<string, {
     render?: (...args: any[]) => React.ReactNode;
-} | React.FunctionComponent<void>>): StoryObj;
+} | React.FunctionComponent>): StoryObj;

package/esm/util/renderStoriesForChromatic.js

@@ -1,11 +1,11 @@
 import React from "react";
 export function renderStoriesForChromatic(stories) {
     return {
-        render: (...args) => (React.createElement(React.Fragment, null, Object.entries(stories).map(([storyName, story]) => {
+        render: (...args) => (React.createElement(React.Fragment, null, Object.entries(stories).map(([storyName, Story]) => {
             var _a;
             return (React.createElement("div", { key: storyName },
                 React.createElement("h2", { className: "storyheading" }, storyName),
-                typeof story === "function" ? story() : (_a = story.render) === null || _a === void 0 ? void 0 : _a.call(story, ...args)));
+                typeof Story === "function" ? React.createElement(Story, null) : (_a = Story.render) === null || _a === void 0 ? void 0 : _a.call(Story, ...args)));
         }))),
         parameters: {
             chromatic: { disable: false },

package/esm/util/renderStoriesForChromatic.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderStoriesForChromatic.js","sourceRoot":"","sources":["../../src/util/renderStoriesForChromatic.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,UAAU,yBAAyB,CACvC,OAIC;IAED,OAAO;QACL,MAAM,EAAE,CAAC,GAAG,IAA0C,EAAE,EAAE,CAAC,CACzD,0CACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE;;YAAC,OAAA,CACnD,6BAAK,GAAG,EAAE,SAAS;gBACjB,4BAAI,SAAS,EAAC,cAAc,IAAE,SAAS,CAAM;gBAC5C,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,MAAM,sDAAG,GAAG,IAAI,CAAC,CAC5D,CACP,CAAA;SAAA,CAAC,CACD,CACJ;QACD,UAAU,EAAE;YACV,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;SAC9B;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"renderStoriesForChromatic.js","sourceRoot":"","sources":["../../src/util/renderStoriesForChromatic.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,UAAU,yBAAyB,CACvC,OAGC;IAED,OAAO;QACL,MAAM,EAAE,CAAC,GAAG,IAA0C,EAAE,EAAE,CAAC,CACzD,0CACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE;;YAAC,OAAA,CACnD,6BAAK,GAAG,EAAE,SAAS;gBACjB,4BAAI,SAAS,EAAC,cAAc,IAAE,SAAS,CAAM;gBAC5C,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,oBAAC,KAAK,OAAG,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,MAAM,sDAAG,GAAG,IAAI,CAAC,CAC9D,CACP,CAAA;SAAA,CAAC,CACD,CACJ;QACD,UAAU,EAAE;YACV,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;SAC9B;KACF,CAAC;AACJ,CAAC"}

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

@@ -21,7 +21,7 @@ export declare const VirtualFocusDescendantsProvider: import("react").Provider<i
     }>;
     index: number;
     enabledIndex: number;
-    register: (instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES];
+    register: (instance: HTMLDivElement | null) => void;
 };
 export declare const VirtualFocusInternalContextProvider: import("react").ForwardRefExoticComponent<{
     virtualFocusIdx: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.30.1",
+  "version": "7.32.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",
@@ -650,8 +650,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.0.9",
-    "@navikt/aksel-icons": "^7.30.1",
-    "@navikt/ds-tokens": "^7.30.1",
+    "@navikt/aksel-icons": "^7.32.0",
+    "@navikt/ds-tokens": "^7.32.0",
     "clsx": "^2.1.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
@@ -673,7 +673,7 @@
     "rimraf": "6.0.1",
     "swr": "^2.3.6",
     "tsc-alias": "1.8.16",
-    "tsx": "^4.19.1",
+    "tsx": "^4.20.6",
     "typescript": "5.8.3",
     "vitest": "^2.1.9"
   },

package/src/chat/Chat.tsx

@@ -2,7 +2,7 @@ import React, { HTMLAttributes, forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyLong, HeadingProps } from "../typography";
-import Bubble from "./Bubble";
+import Bubble, { type ChatBubbleProps } from "./Bubble";
 
 export const VARIANTS = ["subtle", "info", "neutral"] as const;
 export const POSITIONS = ["left", "right"] as const;
@@ -60,7 +60,7 @@ interface ChatComponent
     ChatProps & React.RefAttributes<HTMLDivElement>
   > {
   /**
-   * @see 🏷️ {@link BubbleProps}
+   * @see 🏷️ {@link ChatBubbleProps}
    */
   Bubble: typeof Bubble;
 }
@@ -128,7 +128,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
           className={cn("navds-chat__bubble-wrapper")}
         >
           {React.Children.map(children, (child, i) => {
-            if (!React.isValidElement(child)) {
+            if (!React.isValidElement<ChatBubbleProps>(child)) {
               return null;
             }
 

package/src/copybutton/CopyButton.tsx

@@ -94,7 +94,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
     ref,
   ) => {
     const [active, setActive] = useState(false);
-    const timeoutRef = useRef<number>();
+    const timeoutRef = useRef<number>(undefined);
     const translate = useI18n("CopyButton");
 
     const { cn } = useRenameCSS();

package/src/form/checkbox/Checkbox.tsx

@@ -42,9 +42,11 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                 "readOnly",
               ])}
               {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-              aria-describedby={cl(inputProps["aria-describedby"], {
-                [descriptionId]: props.description,
-              })}
+              aria-describedby={
+                cl(inputProps["aria-describedby"], {
+                  [descriptionId]: props.description,
+                }) || undefined
+              }
               type="checkbox"
               className={cn("navds-checkbox__input")}
               ref={(el) => {

package/src/form/combobox/Combobox.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import { Floating } from "../../overlays/floating/Floating";
 import { useRenameCSS } from "../../theme/Theme";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
@@ -34,52 +35,54 @@ export const Combobox = forwardRef<
   } = useInputContext();
 
   return (
-    <ComboboxWrapper
-      className={className}
-      hasError={hasError}
-      inputProps={inputProps}
-      inputSize={size}
-      toggleIsListOpen={toggleIsListOpen}
-    >
-      <Label
-        htmlFor={inputProps.id}
-        size={size}
-        className={cn("navds-form-field__label", {
-          "navds-sr-only": hideLabel,
-        })}
+    <Floating>
+      <ComboboxWrapper
+        className={className}
+        hasError={hasError}
+        inputProps={inputProps}
+        inputSize={size}
+        toggleIsListOpen={toggleIsListOpen}
       >
-        {readOnly && <ReadOnlyIconWithTitle />}
-        {label}
-      </Label>
-      {!!description && (
-        <BodyShort
-          as="div"
-          className={cn("navds-form-field__description", {
+        <Label
+          htmlFor={inputProps.id}
+          size={size}
+          className={cn("navds-form-field__label", {
             "navds-sr-only": hideLabel,
           })}
-          id={inputDescriptionId}
-          size={size}
         >
-          {description}
-        </BodyShort>
-      )}
-      <div className={cn("navds-combobox__wrapper")}>
-        <InputController ref={ref} {...rest} />
-        <FilteredOptions />
-      </div>
-      <div
-        className={cn("navds-form-field__error")}
-        id={errorId}
-        aria-relevant="additions removals"
-        aria-live="polite"
-      >
-        {showErrorMsg && (
-          <ErrorMessage size={size} showIcon>
-            {error}
-          </ErrorMessage>
+          {readOnly && <ReadOnlyIconWithTitle />}
+          {label}
+        </Label>
+        {!!description && (
+          <BodyShort
+            as="div"
+            className={cn("navds-form-field__description", {
+              "navds-sr-only": hideLabel,
+            })}
+            id={inputDescriptionId}
+            size={size}
+          >
+            {description}
+          </BodyShort>
         )}
-      </div>
-    </ComboboxWrapper>
+        <div className={cn("navds-combobox__wrapper")}>
+          <InputController ref={ref} {...rest} />
+          <FilteredOptions />
+        </div>
+        <div
+          className={cn("navds-form-field__error")}
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
+          {showErrorMsg && (
+            <ErrorMessage size={size} showIcon>
+              {error}
+            </ErrorMessage>
+          )}
+        </div>
+      </ComboboxWrapper>
+    </Floating>
   );
 });
 

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

@@ -1,5 +1,7 @@
-import React from "react";
-import { useRenameCSS } from "../../../theme/Theme";
+import React, { useState } from "react";
+import { Floating } from "../../../overlays/floating/Floating";
+import { useRenameCSS, useThemeInternal } from "../../../theme/Theme";
+import { useClientLayoutEffect } from "../../../util";
 import { useInputContext } from "../Input/Input.context";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import AddNewOption from "./AddNewOption";
@@ -12,6 +14,7 @@ import { useFilteredOptionsContext } from "./filteredOptionsContext";
 
 const FilteredOptions = () => {
   const { cn } = useRenameCSS();
+  const themeContext = useThemeInternal(false);
   const {
     inputProps: { id },
   } = useInputContext();
@@ -25,6 +28,16 @@ const FilteredOptions = () => {
     isMouseLastUsedInputDevice,
     isValueNew,
   } = useFilteredOptionsContext();
+  const [localOpen, setLocalOpen] = useState(isListOpen);
+
+  /**
+   * This is a dirty hack to make the positioning-logic in Floating base the "flip" on the static 290px max-height,
+   * instead of the dynamic one based on available space. Without this, the list won't flip to top when there's
+   * not enough space below the input.
+   */
+  useClientLayoutEffect(() => {
+    queueMicrotask(() => setLocalOpen(isListOpen));
+  }, [isListOpen]);
 
   const { maxSelected, isMultiSelect } = useSelectedOptionsContext();
 
@@ -37,14 +50,26 @@ const FilteredOptions = () => {
     (allowNewValues && isValueNew && !maxSelected.isLimitReached) || // Render add new option
     filteredOptions.length > 0; // Render filtered options
 
+  const height = themeContext?.isDarkside ? "316px" : "290px";
+
   return (
-    <div
+    <Floating.Content
       className={cn("navds-combobox__list", {
         "navds-combobox__list--closed": !isListOpen,
         "navds-combobox__list--with-hover": isMouseLastUsedInputDevice,
       })}
       id={filteredOptionsUtil.getFilteredOptionsId(id)}
       tabIndex={-1}
+      sideOffset={8}
+      side="bottom"
+      fallbackPlacements={["top"]}
+      enabled={isListOpen}
+      style={{
+        maxHeight: localOpen
+          ? `min(${height}, var(--ac-floating-available-height))`
+          : `${height}`,
+      }}
+      autoUpdateWhileMounted={false}
     >
       {shouldRenderNonSelectables && (
         <div
@@ -74,7 +99,7 @@ const FilteredOptions = () => {
           ))}
         </ul>
       )}
-    </div>
+    </Floating.Content>
   );
 };
 

package/src/form/combobox/FilteredOptions/useVirtualFocus.ts

@@ -64,6 +64,7 @@ const useVirtualFocus = (
 
   const moveFocusDown = () => {
     const elementsAbleToReceiveFocus = getElementsAbleToReceiveFocus();
+
     if (!activeElement) {
       setActiveAndScrollToElement(elementsAbleToReceiveFocus[0]);
       return;

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

@@ -8,14 +8,14 @@ interface InputContextValue extends FormFieldType {
   clearInput: NonNullable<ComboboxProps["onClear"]>;
   error?: ComboboxProps["error"];
   focusInput: () => void;
-  inputRef: React.RefObject<HTMLInputElement>;
+  inputRef: React.RefObject<HTMLInputElement | null>;
   value: string;
   setValue: (text: string) => void;
   onChange: (newValue: string) => void;
   searchTerm: string;
   setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
   shouldAutocomplete?: boolean;
-  toggleOpenButtonRef: React.RefObject<HTMLDivElement>;
+  toggleOpenButtonRef: React.MutableRefObject<HTMLDivElement | null>;
   hideCaret: boolean;
   setHideCaret: React.Dispatch<React.SetStateAction<boolean>>;
 }

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

@@ -1,5 +1,8 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { forwardRef } from "react";
+import { Floating } from "../../../overlays/floating/Floating";
 import { useRenameCSS } from "../../../theme/Theme";
 import { useMergeRefs } from "../../../util/hooks";
 import { useFilteredOptionsContext } from "../FilteredOptions/filteredOptionsContext";
@@ -54,42 +57,43 @@ export const InputController = forwardRef<
   const mergedInputRef = useMergeRefs(inputRef, ref);
 
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    <div
-      className={cn("navds-combobox__wrapper-inner navds-text-field__input", {
-        "navds-combobox__wrapper-inner--virtually-unfocused":
-          activeDecendantId !== undefined,
-      })}
-      onClick={() => {
-        if (inputProps.disabled || readOnly) {
-          return;
-        }
+    <Floating.Anchor asChild>
+      <div
+        className={cn("navds-combobox__wrapper-inner navds-text-field__input", {
+          "navds-combobox__wrapper-inner--virtually-unfocused":
+            activeDecendantId !== undefined,
+        })}
+        onClick={() => {
+          if (inputProps.disabled || readOnly) {
+            return;
+          }
 
-        toggleIsListOpen(true);
-        focusInput();
-      }}
-    >
-      {!shouldShowSelectedOptions ? (
-        <Input
-          id={inputProps.id}
-          ref={mergedInputRef}
-          inputClassName={inputClassName}
-          readOnly={readOnly}
-          {...rest}
-        />
-      ) : (
-        <SelectedOptions selectedOptions={selectedOptions} size={size}>
+          toggleIsListOpen(true);
+          focusInput();
+        }}
+      >
+        {!shouldShowSelectedOptions ? (
           <Input
             id={inputProps.id}
             ref={mergedInputRef}
             inputClassName={inputClassName}
-            shouldShowSelectedOptions={shouldShowSelectedOptions}
             readOnly={readOnly}
             {...rest}
           />
-        </SelectedOptions>
-      )}
-      {toggleListButton && <ToggleListButton ref={toggleOpenButtonRef} />}
-    </div>
+        ) : (
+          <SelectedOptions selectedOptions={selectedOptions} size={size}>
+            <Input
+              id={inputProps.id}
+              ref={mergedInputRef}
+              inputClassName={inputClassName}
+              shouldShowSelectedOptions={shouldShowSelectedOptions}
+              readOnly={readOnly}
+              {...rest}
+            />
+          </SelectedOptions>
+        )}
+        {toggleListButton && <ToggleListButton ref={toggleOpenButtonRef} />}
+      </div>
+    </Floating.Anchor>
   );
 });

package/src/form/radio/Radio.tsx

@@ -25,9 +25,11 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
         <input
           {...omit(props, ["children", "size", "description", "readOnly"])}
           {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-          aria-describedby={cl(inputProps["aria-describedby"], {
-            [descriptionId]: props.description,
-          })}
+          aria-describedby={
+            cl(inputProps["aria-describedby"], {
+              [descriptionId]: props.description,
+            }) || undefined
+          }
           className={cn("navds-radio__input")}
           ref={ref}
         />

package/src/form/useFormField.ts

@@ -116,7 +116,7 @@ export function containsReadMore(
   children: React.ReactNode,
   checkNested = true,
 ): boolean {
-  if (React.isValidElement(children)) {
+  if (React.isValidElement<{ children?: any }>(children)) {
     if (children.type === ReadMore) {
       return true;
     }

package/src/modal/ModalUtils.ts

@@ -16,7 +16,7 @@ export const coordsAreInside = (
 };
 
 export function getCloseHandler(
-  modalRef: React.RefObject<HTMLDialogElement>,
+  modalRef: React.RefObject<HTMLDialogElement | null>,
   header: ModalProps["header"],
   onBeforeClose: ModalProps["onBeforeClose"],
 ) {
@@ -31,7 +31,7 @@ export const BODY_CLASS_LEGACY = "navds-modal__document-body";
 export const BODY_CLASS = "aksel-modal__document-body";
 
 export function useBodyScrollLock(
-  modalRef: React.RefObject<HTMLDialogElement>,
+  modalRef: React.RefObject<HTMLDialogElement | null>,
   portalNode: HTMLElement | null,
   isNested: boolean,
 ) {

package/src/overlays/action-menu/ActionMenu.tsx

@@ -16,7 +16,7 @@ import { Menu, MenuPortalProps } from "../floating-menu/Menu";
 /* -------------------------------------------------------------------------- */
 type ActionMenuContextValue = {
   triggerId: string;
-  triggerRef: React.RefObject<HTMLButtonElement>;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
   contentId: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;