@navikt/ds-react 7.30.0 → 7.31.0

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/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

@@ -1,13 +1,60 @@
+import cl from "clsx";
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../../theme/Theme";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { BodyShort } from "../../typography";
-import { omit } from "../../util";
+import { omit, useId } from "../../util";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { cn } = useRenameCSS();
   const { inputProps, size, hasError, readOnly } = useRadio(props);
+  const descriptionId = useId();
+  const themeContext = useThemeInternal(false);
+
+  if (themeContext?.isDarkside) {
+    return (
+      <div
+        className={cn(props.className, "navds-radio", `navds-radio--${size}`, {
+          "navds-radio--error": hasError,
+          "navds-radio--disabled": inputProps.disabled,
+          "navds-radio--readonly": readOnly,
+        })}
+        data-color={hasError ? "danger" : props["data-color"]}
+      >
+        <input
+          {...omit(props, ["children", "size", "description", "readOnly"])}
+          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+          aria-describedby={
+            cl(inputProps["aria-describedby"], {
+              [descriptionId]: props.description,
+            }) || undefined
+          }
+          className={cn("navds-radio__input")}
+          ref={ref}
+        />
+        <BodyShort
+          as="label"
+          htmlFor={inputProps.id}
+          className={cn("navds-radio__label")}
+          size={size}
+        >
+          {props.children}
+        </BodyShort>
+        {props.description && (
+          <BodyShort
+            id={descriptionId}
+            size={size}
+            className={cn(
+              "navds-form-field__subdescription navds-radio__description",
+            )}
+          >
+            {props.description}
+          </BodyShort>
+        )}
+      </div>
+    );
+  }
 
   return (
     <div

package/src/form/radio/useRadio.ts

@@ -37,19 +37,19 @@ export const useRadio = (props: RadioProps) => {
         radioGroup?.value === undefined
           ? undefined
           : radioGroup?.value === props.value,
-      onChange: (e) => {
+      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
         if (readOnly) {
           return;
         }
-        props.onChange?.(e);
+        props.onChange?.(event);
         radioGroup?.onChange?.(props.value);
       },
-      onClick: (e) => {
+      onClick: (event: React.MouseEvent<HTMLInputElement>) => {
         if (readOnly) {
-          e.preventDefault();
+          event.preventDefault();
           return;
         }
-        props?.onClick?.(e);
+        props?.onClick?.(event);
       },
       required: radioGroup?.required,
       type: "radio",

package/src/form/search/Search.tsx

@@ -271,7 +271,7 @@ function ClearButton({
   const themeContext = useThemeInternal(false);
   const translate = useI18n("Search");
 
-  return themeContext ? (
+  return themeContext?.isDarkside ? (
     <Button
       className={cn("navds-search__button-clear")}
       variant="tertiary"

package/src/guide-panel/GuidePanel.tsx

@@ -64,14 +64,14 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
       >
         <div className={cn("navds-guide")}>
           {illustration ??
-            (themeContext ? (
+            (themeContext?.isDarkside ? (
               <DarksideGudiepanelIllustration />
             ) : (
               <DefaultIllustration />
             ))}
         </div>
         <div className={cn("navds-guide-panel__content")}>
-          {themeContext && (
+          {themeContext?.isDarkside && (
             <svg
               viewBox="0 0 33 22"
               width="33"
@@ -96,7 +96,7 @@ export const GuidePanel = forwardRef<HTMLDivElement, GuidePanelProps>(
               />
             </svg>
           )}
-          {themeContext ? (
+          {themeContext?.isDarkside ? (
             <div className={cn("navds-guide-panel__content-inner")}>
               {children}
             </div>

package/src/help-text/HelpText.tsx

@@ -81,8 +81,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
           anchorEl={buttonRef.current}
           placement={placement}
           strategy={strategy}
-          offset={themeContext ? 8 : 12}
-          arrow={!themeContext}
+          offset={themeContext?.isDarkside ? 8 : 12}
+          arrow={!themeContext?.isDarkside}
         >
           <Popover.Content className={cn("navds-body-short")}>
             {children}

package/src/internal-header/InternalHeader.tsx

@@ -84,7 +84,7 @@ export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
   /*
    * Component is always in "dark" mode, so we manually override global theme.
    */
-  if (themeContext) {
+  if (themeContext?.isDarkside) {
     return (
       <Theme theme="dark" asChild hasBackground={false}>
         <header

package/src/layout/base/BasePrimitive.tsx

@@ -253,7 +253,7 @@ export const BasePrimitive = ({
 }: BasePrimitiveProps) => {
   const themeContext = useThemeInternal(false);
   const { cn } = useRenameCSS();
-  const prefix = themeContext ? "ax" : "a";
+  const prefix = themeContext?.isDarkside ? "ax" : "a";
 
   const style: React.CSSProperties = {
     /* Padding */

package/src/layout/bleed/Bleed.tsx

@@ -82,7 +82,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
   ) => {
     const themeContext = useThemeInternal(false);
     const { cn } = useRenameCSS();
-    const prefix = themeContext ? "ax" : "a";
+    const prefix = themeContext?.isDarkside ? "ax" : "a";
 
     let style: React.CSSProperties = {
       ..._style,

package/src/layout/box/Box.tsx

@@ -113,7 +113,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
 
       if (
         process.env.NODE_ENV !== "production" &&
-        themeContext &&
+        themeContext?.isDarkside &&
         (background || borderColor || shadow)
       ) {
         let errorText = ``;
@@ -131,7 +131,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
         );
       }
 
-      const prefix = themeContext ? "ax" : "a";
+      const prefix = themeContext?.isDarkside ? "ax" : "a";
 
       const style: React.CSSProperties = {
         ..._style,
@@ -173,8 +173,9 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
               "navds-box-bg": background,
               "navds-box-border-color": borderColor,
               "navds-box-border-width": borderWidth,
-              "navds-box-border-radius": borderRadius && !themeContext,
-              "navds-box-radius": borderRadius && themeContext,
+              "navds-box-border-radius":
+                borderRadius && !themeContext?.isDarkside,
+              "navds-box-radius": borderRadius && themeContext?.isDarkside,
               "navds-box-shadow": shadow,
             })}
           >

package/src/layout/grid/HGrid.tsx

@@ -78,7 +78,7 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
       ref,
     ) => {
       const themeContext = useThemeInternal(false);
-      const prefix = themeContext ? "ax" : "a";
+      const prefix = themeContext?.isDarkside ? "ax" : "a";
       const { cn } = useRenameCSS();
 
       const styles: React.CSSProperties = {

package/src/layout/page/Page.tsx

@@ -56,7 +56,11 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       const themeContext = useThemeInternal(false);
       const { cn } = useRenameCSS();
 
-      if (process.env.NODE_ENV !== "production" && themeContext && background) {
+      if (
+        process.env.NODE_ENV !== "production" &&
+        themeContext?.isDarkside &&
+        background
+      ) {
         console.warn(
           `Prop \`background\` is deprecated and cannot be used with theme-support. Instead wrap component with \`<Box asChild background>\``,
         );

package/src/layout/stack/Stack.tsx

@@ -84,7 +84,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       ref,
     ) => {
       const themeContext = useThemeInternal(false);
-      const prefix = themeContext ? "ax" : "a";
+      const prefix = themeContext?.isDarkside ? "ax" : "a";
       const { cn } = useRenameCSS();
 
       const style: React.CSSProperties = {

package/src/link/Link.tsx

@@ -72,7 +72,7 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
        */
       let localVariant: LinkProps["variant"];
 
-      if (themeContext) {
+      if (themeContext?.isDarkside) {
         localVariant = variant;
       } else {
         localVariant = variant ?? "action";

package/src/list/List.tsx

@@ -63,7 +63,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
 
     const listSize = size ?? contextSize;
 
-    if (themeContext) {
+    if (themeContext?.isDarkside) {
       if (
         process.env.NODE_ENV !== "production" &&
         (title || description || headingTag)

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

@@ -802,7 +802,7 @@ export const ActionMenuRadioItem = forwardRef<
                   fill="var(--ax-bg-default, var(--a-surface-default))"
                 />
               </g>
-              {themeContext ? (
+              {themeContext?.isDarkside ? (
                 <g className={cn("navds-action-menu__indicator-icon--checked")}>
                   <rect
                     width="24"