fix: react type import (#2408)

Consistent import of React types without `React.`

packages/react/src/components/Avatar/Avatar.tsx

@@ -1,11 +1,7 @@
 import { Slot } from '@radix-ui/react-slot';
 import cl from 'clsx/lite';
-import {
-  Fragment,
-  type HTMLAttributes,
-  type ReactNode,
-  forwardRef,
-} from 'react';
+import { Fragment, forwardRef } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 
 export type AvatarProps = {
   /**
@@ -36,7 +32,7 @@ export type AvatarProps = {
    * Gets `aria-hidden="true"`
    */
   children?: ReactNode;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, 'aria-label'>;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>;
 
 const fontSizeMap = {
   xs: 'ds-paragraph--xs',

packages/react/src/components/DropdownMenu/DropdownMenuContent.tsx

@@ -13,8 +13,8 @@ import {
   useRole,
 } from '@floating-ui/react';
 import cl from 'clsx/lite';
-import { forwardRef, useContext, useRef } from 'react';
-import * as React from 'react';
+import { Fragment, forwardRef, useContext, useRef } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 
 import { useIsomorphicLayoutEffect } from '../../utilities';
 
@@ -23,8 +23,8 @@ import { DropdownMenuContext } from './DropdownMenuRoot';
 const GAP = 4;
 
 export type DropdownMenuContentProps = {
-  children: React.ReactNode;
-} & React.HTMLAttributes<HTMLUListElement>;
+  children: ReactNode;
+} & HTMLAttributes<HTMLUListElement>;
 
 export const DropdownMenuContent = forwardRef<
   HTMLUListElement,
@@ -41,7 +41,7 @@ export const DropdownMenuContent = forwardRef<
     onClose,
   } = useContext(DropdownMenuContext);
 
-  const Container = portal ? FloatingPortal : React.Fragment;
+  const Container = portal ? FloatingPortal : Fragment;
   const floatingEl = useRef<HTMLUListElement>(null);
 
   const {

packages/react/src/components/DropdownMenu/DropdownMenuGroup.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useContext, useId } from 'react';
-import type * as React from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 
 import { Paragraph } from '../Typography';
 
@@ -9,8 +9,8 @@ export type DropdownMenuGroupProps = {
   /**
    * Heading of the group
    */
-  heading?: React.ReactNode;
-} & React.HTMLAttributes<HTMLUListElement>;
+  heading?: ReactNode;
+} & HTMLAttributes<HTMLUListElement>;
 
 export const DropdownMenuGroup = forwardRef<
   HTMLUListElement,

packages/react/src/components/DropdownMenu/DropdownMenuRoot.tsx

@@ -1,6 +1,6 @@
 import type { Placement } from '@floating-ui/react';
 import { createContext, useEffect, useRef, useState } from 'react';
-import type * as React from 'react';
+import type { ReactNode, RefObject } from 'react';
 
 import type { PortalProps } from '../../types/Portal';
 
@@ -20,7 +20,7 @@ export type DropdownMenuRootProps = {
    * @default md
    **/
   size?: 'sm' | 'md' | 'lg';
-  children: React.ReactNode;
+  children: ReactNode;
 } & PortalProps;
 
 /**
@@ -74,7 +74,7 @@ export const DropdownMenuRoot = ({
 
 type DropdownMenuContextType = {
   anchorEl: Element | null;
-  triggerRef: React.RefObject<Element>;
+  triggerRef: RefObject<Element>;
   size: NonNullable<DropdownMenuRootProps['size']>;
   portal?: PortalProps['portal'];
   placement?: DropdownMenuRootProps['placement'];

packages/react/src/components/DropdownMenu/DropdownMenuTrigger.tsx

@@ -1,15 +1,13 @@
 import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useContext } from 'react';
-import type * as React from 'react';
+import type { ComponentPropsWithRef } from 'react';
 
 import { Button } from '../Button';
 
 import { DropdownMenuContext } from './DropdownMenuRoot';
 
-export type DropdownMenuTriggerProps = React.ComponentPropsWithRef<
-  typeof Button
->;
+export type DropdownMenuTriggerProps = ComponentPropsWithRef<typeof Button>;
 
 export const DropdownMenuTrigger = forwardRef<
   HTMLButtonElement,

packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from '@storybook/react';
-import React from 'react';
+import { useState } from 'react';
 
 import { Button } from '../Button';
 import { Textfield } from '../form/Textfield';
@@ -77,7 +77,7 @@ WithForm.decorators = [
 ];
 
 export const ShowHide: Story = () => {
-  const [show, setShow] = React.useState(false);
+  const [show, setShow] = useState(false);
 
   return (
     <>

packages/react/src/components/ErrorSummary/ErrorSummaryList.tsx

@@ -1,6 +1,7 @@
+import type { ComponentProps } from 'react';
 import { List } from '../List';
 
-export type ErrorSummaryListProps = React.ComponentProps<typeof List.Unordered>;
+export type ErrorSummaryListProps = ComponentProps<typeof List.Unordered>;
 
 export default function ErrorSummaryList({ ...rest }: ErrorSummaryListProps) {
   return <List.Unordered {...rest} />;

packages/react/src/components/HelpText/HelpText.tsx

@@ -1,6 +1,7 @@
 import type { Placement } from '@floating-ui/utils';
 import cl from 'clsx/lite';
 import { forwardRef, useId, useState } from 'react';
+import type { ButtonHTMLAttributes } from 'react';
 
 import { Popover, type PopoverProps } from '../Popover';
 import { Paragraph } from '../Typography/Paragraph';
@@ -22,7 +23,7 @@ export type HelpTextProps = {
    * @default 'right'
    */
   placement?: Placement;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
   function HelpText(

packages/react/src/components/Modal/ModalRoot.tsx

@@ -1,15 +1,16 @@
 import { createContext, useCallback, useRef, useState } from 'react';
+import type { ReactNode, RefObject } from 'react';
 
 export type ModalContextProps = {
   setCloseModal: (fn: () => void) => void;
   closeModal?: () => void;
-  modalRef: React.RefObject<HTMLDialogElement>;
+  modalRef: RefObject<HTMLDialogElement>;
   open: boolean;
   setOpen: (open: boolean) => void;
 };
 
 export type ModalRootProps = {
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export const ModalContext = createContext<ModalContextProps>({

packages/react/src/components/Modal/ModalTrigger.tsx

@@ -1,12 +1,12 @@
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useContext } from 'react';
-import type * as React from 'react';
+import type { ComponentPropsWithRef } from 'react';
 
 import { Button } from '../Button';
 
 import { ModalContext } from './ModalRoot';
 
-export type ModalTriggerProps = React.ComponentPropsWithRef<typeof Button>;
+export type ModalTriggerProps = ComponentPropsWithRef<typeof Button>;
 
 export const ModalTrigger = forwardRef<HTMLButtonElement, ModalTriggerProps>(
   ({ asChild, ...rest }, ref) => {

packages/react/src/components/Pagination/Pagination.tsx

@@ -1,7 +1,7 @@
 import { ChevronLeftIcon, ChevronRightIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
-import type * as React from 'react';
+import type { HTMLAttributes } from 'react';
 
 import { PaginationButton } from './PaginationButton';
 import { PaginationContent } from './PaginationContent';
@@ -34,7 +34,7 @@ export type PaginationProps = {
   onChange: (currentPage: number) => void;
   /** `aria-label` for pagination item */
   itemLabel?: (currentPage: number) => string;
-} & Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>;
+} & Omit<HTMLAttributes<HTMLElement>, 'onChange'>;
 
 const iconSize = {
   sm: '1rem',

packages/react/src/components/Popover/Popover.tsx

@@ -9,6 +9,7 @@ import type { MiddlewareState, Placement } from '@floating-ui/dom';
 import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
 import { forwardRef, useContext, useRef, useState } from 'react';
+import type { HTMLAttributes } from 'react';
 import { useEffect } from 'react';
 import { Paragraph } from '../Typography';
 import { Context } from './PopoverContext';
@@ -64,7 +65,7 @@ export type PopoverProps = {
    * Callback when the popover wants to close.
    */
   onClose?: () => void;
-} & React.HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>;
 
 export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
   function Popover(

packages/react/src/components/Popover/PopoverContext.tsx

@@ -1,8 +1,8 @@
-import { useId, useRef, useState } from 'react';
-import { createContext, useEffect } from 'react';
+import { createContext, useId, useState } from 'react';
+import type { ReactNode } from 'react';
 
 export type PopoverContextProps = {
-  children: React.ReactNode;
+  children: ReactNode;
 };
 
 export const PopoverContext = ({ children }: PopoverContextProps) => {

packages/react/src/components/Popover/PopoverTrigger.tsx

@@ -1,9 +1,10 @@
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef, useContext } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 import { Button } from '../Button';
 import { Context } from './PopoverContext';
 
-export type PopoverTriggerProps = React.ComponentPropsWithRef<typeof Button>;
+export type PopoverTriggerProps = ComponentPropsWithRef<typeof Button>;
 
 export const PopoverTrigger = forwardRef<
   HTMLButtonElement,

packages/react/src/components/Table/Table.tsx

@@ -1,5 +1,6 @@
 import cl from 'clsx/lite';
-import * as React from 'react';
+import { forwardRef } from 'react';
+import type { TableHTMLAttributes } from 'react';
 
 import { Paragraph } from '../Typography';
 
@@ -29,37 +30,35 @@ export type TableProps = {
    * @default false
    */
   hover?: boolean;
-} & Omit<React.TableHTMLAttributes<HTMLTableElement>, 'border'>;
+} & Omit<TableHTMLAttributes<HTMLTableElement>, 'border'>;
 
-export const Table = React.forwardRef<HTMLTableElement, TableProps>(
-  function Table(
-    {
-      zebra = false,
-      stickyHeader = false,
-      border = false,
-      hover = false,
-      size = 'md',
-      className,
-      children,
-      ...rest
-    },
-    ref,
-  ) {
-    return (
-      <Paragraph asChild size={size}>
-        <table
-          className={cl('ds-table', className)}
-          data-border={border || undefined}
-          data-hover={hover || undefined}
-          data-size={size}
-          data-sticky-header={stickyHeader || undefined}
-          data-zebra={zebra || undefined}
-          ref={ref}
-          {...rest}
-        >
-          {children}
-        </table>
-      </Paragraph>
-    );
+export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
+  {
+    zebra = false,
+    stickyHeader = false,
+    border = false,
+    hover = false,
+    size = 'md',
+    className,
+    children,
+    ...rest
   },
-);
+  ref,
+) {
+  return (
+    <Paragraph asChild size={size}>
+      <table
+        className={cl('ds-table', className)}
+        data-border={border || undefined}
+        data-hover={hover || undefined}
+        data-size={size}
+        data-sticky-header={stickyHeader || undefined}
+        data-zebra={zebra || undefined}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </table>
+    </Paragraph>
+  );
+});

packages/react/src/components/ToggleGroup/ToggleGroup.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import type * as React from 'react';
+import type { FormEvent } from 'react';
 
 import { ToggleGroup } from '.';
 
@@ -143,7 +143,7 @@ describe('ToggleGroup', () => {
 
   test('should send the value to a form when the form is submitted', async () => {
     const formSubmitPromise = new Promise<FormData>((resolve) => {
-      const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+      const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         resolve(new FormData(event.currentTarget));
       };