@navikt/ds-react 7.30.0 → 7.30.1

package/src/form/radio/Radio.tsx

@@ -1,13 +1,58 @@
+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,
+          })}
+          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"

package/src/pagination/PaginationItem.tsx

@@ -46,7 +46,7 @@ export const Item: PaginationItemType = forwardRef(
     return (
       <Button
         as={Component}
-        variant={themeContext ? "tertiary-neutral" : "tertiary"}
+        variant={themeContext?.isDarkside ? "tertiary-neutral" : "tertiary"}
         data-color={color}
         aria-current={selected}
         data-pressed={selected}

package/src/popover/Popover.tsx

@@ -138,7 +138,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       placement,
       open,
       middleware: [
-        flOffset(offset ?? (themeContext ? 8 : arrow ? 16 : 4)),
+        flOffset(offset ?? (themeContext?.isDarkside ? 8 : arrow ? 16 : 4)),
         chosenFlip &&
           flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         shift({ padding: 12 }),
@@ -191,7 +191,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         >
           {children}
           {/* Hide arrow in new design, prop will be removed in breaking change update */}
-          {arrow && !themeContext && (
+          {arrow && !themeContext?.isDarkside && (
             <div
               ref={(node) => {
                 arrowRef.current = node;

package/src/portal/Portal.tsx

@@ -26,7 +26,7 @@ export const Portal = forwardRef<HTMLDivElement, PortalProps>(
      * Portal can be mounted outside of theme-classNames.
      * If a theme is present, we want to make sure that theme cascades to portaled element.
      */
-    if (themeContext) {
+    if (themeContext?.isDarkside) {
       return root
         ? ReactDOM.createPortal(
             <Theme

package/src/theme/Theme.tsx

@@ -45,6 +45,8 @@ const RenameCSS = ({ children }: { children: React.ReactNode }) => {
 /* -------------------------------------------------------------------------- */
 /*                               Theme provider                               */
 /* -------------------------------------------------------------------------- */
+const DEFAULT_COLOR: AkselColor = "accent";
+
 type ThemeContext = {
   /**
    * Color theme
@@ -52,12 +54,21 @@ type ThemeContext = {
    */
   theme?: "light" | "dark";
   color?: AkselColor;
+  /**
+   * Indicates if Theme-component is used or not.
+   * @default false
+   */
+  isDarkside: boolean;
 };
 
 const [ThemeProvider, useThemeInternal] = createContext<ThemeContext>({
   hookName: "useTheme",
   name: "ThemeProvider",
   providerName: "ThemeProvider",
+  defaultValue: {
+    color: DEFAULT_COLOR,
+    isDarkside: false,
+  },
 });
 
 export type ThemeProps = {
@@ -70,7 +81,7 @@ export type ThemeProps = {
    * Sets default 'base'-color for application
    */
   "data-color"?: AkselColor;
-} & Omit<ThemeContext, "color"> &
+} & Omit<ThemeContext, "color" | "isDarkside"> &
   AsChildProps;
 
 const Theme = forwardRef<HTMLDivElement, ThemeProps>(
@@ -86,7 +97,7 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
       "data-color": color = context?.color,
     } = props;
 
-    const isRoot = context === undefined;
+    const isRoot = !context?.isDarkside;
 
     const hasBackground =
       hasBackgroundProp ?? (isRoot && props.theme !== undefined);
@@ -94,7 +105,7 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
     const SlotElement = asChild ? Slot : "div";
 
     return (
-      <ThemeProvider theme={theme} color={color}>
+      <ThemeProvider theme={theme} color={color} isDarkside={true}>
         <RenameCSS>
           <SlotElement
             ref={ref}

package/src/timeline/Pin.tsx

@@ -49,7 +49,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     const translate = useI18n("Timeline");
 
     const themeContext = useThemeInternal(false);
-    const showArrow = !themeContext;
+    const showArrow = !themeContext?.isDarkside;
 
     const {
       context,

package/src/timeline/period/ClickablePeriod.tsx

@@ -61,7 +61,7 @@ const ClickablePeriod = React.memo(
     const translate = useI18n("Timeline");
 
     const themeContext = useThemeInternal(false);
-    const showArrow = !themeContext;
+    const showArrow = !themeContext?.isDarkside;
 
     const {
       context,

package/src/toggle-group/ToggleGroup.tsx

@@ -84,7 +84,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
 
     let localVariant: ToggleGroupProps["variant"] | undefined;
 
-    if (themeContext) {
+    if (themeContext?.isDarkside) {
       localVariant = variant;
     } else {
       localVariant = variant ?? "action";