chore: fix rollup build warnings for react package (#2187)

.changeset/cool-lamps-drive.md

@@ -0,0 +1,8 @@
+---
+"@digdir/designsystemet": patch
+"@digdir/designsystemet-react": patch
+"dev": patch
+"figma-plugin": patch
+---
+
+chore: Fix rollup build warnings for react package

.github/workflows/conventional-pr.yml

@@ -15,8 +15,8 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       # check for the most recent release: https://github.com/CondeNast/conventional-pull-request-action/releases
-      - uses: CondeNast/conventional-pull-request-action@v0.2.0
+      - uses: zentered/conventional-pull-request-action@v0.3.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          commitlintRulesPath: './commitlint.rules.js'
+          commitlintRulesPath: './commitlint.rules.cjs'

apps/dev/package.json

@@ -16,8 +16,8 @@
   "devDependencies": {
     "@navikt/aksel-icons": "^5.12.2",
     "@types/luxon": "^3.3.7",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "luxon": "^3.4.4",
     "normalize.css": "^8.0.1",
     "react-countdown-circle-timer": "^3.2.1"

package.json

@@ -68,9 +68,9 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/babel__core": "^7",
     "@types/babel__preset-env": "^7",
-    "@types/node": "^20.10.5",
+    "@types/node": "^20.14.12",
     "@types/prettier": "^3.0.0",
-    "@types/react": "^18.3.3",
+    "@types/react": "18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/rimraf": "^4.0.5",

packages/cli/package.json

@@ -63,7 +63,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/glob": "^8.1.0",
     "@types/jscodeshift": "^0.11.11",
-    "@types/node": "^20.12.7",
+    "@types/node": "^20.14.12",
     "@types/object-hash": "^3",
     "@types/prompts": "^2.4.9",
     "@types/ramda": "^0.29.9",

packages/react/src/components/Accordion/AccordionContent.tsx

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef, useContext } from 'react';
 
 import { AnimateHeight } from '../../utilities/AnimateHeight';
-import { Paragraph } from '..';
+import { Paragraph } from '../Typography';
 
 import { AccordionItemContext } from './AccordionItem';
 

packages/react/src/components/Accordion/AccordionHeading.tsx

@@ -3,7 +3,7 @@ import cl from 'clsx/lite';
 import type { ReactNode, MouseEventHandler, HTMLAttributes } from 'react';
 import { forwardRef, useContext } from 'react';
 
-import { Paragraph, Heading } from '..';
+import { Paragraph, Heading } from '../Typography';
 
 import { AccordionItemContext } from './AccordionItem';
 

packages/react/src/components/Alert/Alert.tsx

@@ -8,7 +8,7 @@ import {
 } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 
-import { Paragraph } from '..';
+import { Paragraph } from '../Typography';
 
 const icons: Record<
   Severity,

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

@@ -3,7 +3,8 @@ import { useState } from 'react';
 import cl from 'clsx/lite';
 import type { Placement } from '@floating-ui/utils';
 
-import { Popover, Paragraph } from '../';
+import { Popover } from '../Popover';
+import { Paragraph } from '../Typography/Paragraph';
 import type { PopoverRootProps } from '../Popover/PopoverRoot';
 import type { PortalProps } from '../../types/Portal';
 
@@ -27,7 +28,7 @@ export type HelpTextProps = {
 } & PortalProps &
   ButtonHTMLAttributes<HTMLButtonElement>;
 
-const HelpText = ({
+export const HelpText = ({
   title,
   placement = 'right',
   portal,
@@ -93,5 +94,3 @@ const HelpText = ({
 };
 
 HelpText.displayName = 'HelpText';
-
-export { HelpText };

packages/react/src/components/Tabs/Tab.tsx

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import cl from 'clsx/lite';
 
-import { RovingFocusItem } from '../../utilities/RovingFocus';
+import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem';
 import { Paragraph } from '../Typography';
 
 import { useTabItem } from './useTab';

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

@@ -3,7 +3,7 @@ import cl from 'clsx/lite';
 
 import type { ButtonProps } from '../../Button';
 import { Button } from '../../Button';
-import { RovingFocusItem } from '../../../utilities/RovingFocus';
+import { RovingFocusItem } from '../../../utilities/RovingFocus/RovingFocusItem';
 
 import { useToggleGroupItem } from './useToggleGroupitem';
 

packages/react/src/components/form/Combobox/Combobox.tsx

@@ -12,7 +12,8 @@ import { useDebounceCallback, omit } from '../../../utilities';
 import { Spinner } from '../../Spinner';
 
 import type { Option } from './useCombobox';
-import useCombobox, { prefix, removePrefix } from './useCombobox';
+import { useCombobox } from './useCombobox';
+import { prefix, removePrefix } from './utilities';
 import ComboboxInput from './internal/ComboboxInput';
 import ComboboxLabel from './internal/ComboboxLabel';
 import ComboboxError from './internal/ComboboxError';

packages/react/src/components/form/Combobox/ComboboxContext.tsx

@@ -9,7 +9,7 @@ import type { useFormField } from '../useFormField';
 
 import type { ComboboxProps } from './Combobox';
 import type { Option } from './useCombobox';
-import type useCombobox from './useCombobox';
+import type { useCombobox } from './useCombobox';
 
 export type ComboboxContextType = {
   multiple: NonNullable<ComboboxProps['multiple']>;

packages/react/src/components/form/Combobox/Option/Option.tsx

@@ -8,7 +8,7 @@ import { ComboboxContext } from '../ComboboxContext';
 
 import { SelectedIcon } from './SelectedIcon';
 import ComboboxOptionDescription from './Description';
-import useComboboxOption from './useComboboxOption';
+import { useComboboxOption } from './useComboboxOption';
 
 export type ComboboxOptionProps = {
   /**

packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx

@@ -1,22 +1,23 @@
 import { useContext, useEffect, useId, useMemo } from 'react';
+import type { Ref } from 'react';
 import { useMergeRefs } from '@floating-ui/react';
 
 import { ComboboxContext } from '../ComboboxContext';
 import { useDebounceCallback } from '../../../../utilities';
 import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext';
-import { prefix } from '../useCombobox';
+import { prefix } from '../utilities';
 
 type UseComboboxOptionProps = {
   id?: string;
-  ref: React.Ref<HTMLButtonElement>;
+  ref: Ref<HTMLButtonElement>;
   value: string;
 };
 
-export default function useComboboxOption({
+export const useComboboxOption = ({
   id,
   ref,
   value,
-}: UseComboboxOptionProps) {
+}: UseComboboxOptionProps) => {
   const generatedId = useId();
   const newId = id || generatedId;
 
@@ -71,4 +72,4 @@ export default function useComboboxOption({
     active,
     onOptionClick: onOptionClickDebounced,
   };
-}
+};

packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx

@@ -5,11 +5,12 @@ import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
 import { useMergeRefs } from '@floating-ui/react';
 
 import { ComboboxContext } from '../ComboboxContext';
-import { Box, Paragraph } from '../../../';
+import { Paragraph } from '../../../Typography';
+import { Box } from '../../../Box';
 import { omit } from '../../../../utilities';
 import { useComboboxIdDispatch } from '../ComboboxIdContext';
 import type { ComboboxProps } from '../Combobox';
-import { prefix } from '../useCombobox';
+import { prefix } from '../utilities';
 
 import ComboboxChips from './ComboboxChips';
 import ComboboxClearButton from './ComboboxClearButton';

packages/react/src/components/form/Combobox/internal/ComboboxNative.tsx

@@ -1,6 +1,6 @@
 import type { Option } from '../useCombobox';
 import type { ComboboxProps } from '../Combobox';
-import { removePrefix } from '../useCombobox';
+import { removePrefix } from '../utilities';
 
 type ComboboxNativeProps = {
   selectedOptions: {

packages/react/src/components/form/Combobox/useCombobox.test.tsx

@@ -1,7 +1,7 @@
 import { renderHook } from '@testing-library/react';
 
 import type { UseComboboxProps } from './useCombobox';
-import useCombobox from './useCombobox';
+import { useCombobox } from './useCombobox';
 
 import { Combobox } from '.';
 

packages/react/src/components/form/Combobox/useCombobox.tsx

@@ -1,17 +1,14 @@
-import {
-  useMemo,
-  Children,
-  useState,
-  isValidElement,
-  useCallback,
-} from 'react';
+import { useMemo, Children, useState, useCallback } from 'react';
 import type { ReactNode, ReactElement } from 'react';
 
-import { ComboboxOption } from './Option/Option';
-import { ComboboxCustom } from './Custom';
 import type { ComboboxOptionProps } from './Option/Option';
 import type { ComboboxProps } from './Combobox';
 import type { ComboboxCustomProps } from './Custom';
+import {
+  isComboboxOption,
+  isInteractiveComboboxCustom,
+  prefix,
+} from './utilities';
 
 export type UseComboboxProps = {
   children: ReactNode;
@@ -30,40 +27,7 @@ export type Option = {
 
 const isOption = (option: Option | undefined): option is Option => !!option;
 
-export function isComboboxOption(
-  child: ReactNode,
-): child is ReactElement<ComboboxOptionProps> {
-  return isValidElement(child) && child.type === ComboboxOption;
-}
-
-export function isComboboxCustom(
-  child: ReactNode,
-): child is ReactElement<ComboboxCustomProps> {
-  return isValidElement(child) && child.type === ComboboxCustom;
-}
-
-export function isInteractiveComboboxCustom(
-  child: ReactNode,
-): child is ReactElement<ComboboxCustomProps> {
-  return isComboboxCustom(child) && child.props.interactive === true;
-}
-
-const INTERNAL_OPTION_PREFIX = 'internal-option-';
-
-/**
- * We use this function to prefix the value of the options so we can make sure numbers as strings are not parsed as numbers in objects
- * @param value
- * @returns
- */
-export const prefix = (value?: string): string => {
-  return INTERNAL_OPTION_PREFIX + value;
-};
-
-export const removePrefix = (value: string): string => {
-  return value.slice(INTERNAL_OPTION_PREFIX.length);
-};
-
-export default function useCombobox({
+export function useCombobox({
   children,
   inputValue,
   multiple,

packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx

@@ -1,6 +1,6 @@
 import { useDebounceCallback } from '../../../utilities';
 
-import type useCombobox from './useCombobox';
+import type { useCombobox } from './useCombobox';
 import { useComboboxId } from './ComboboxIdContext';
 import type { ComboboxContextType } from './ComboboxContext';
 

packages/react/src/components/form/Combobox/utilities.ts

@@ -0,0 +1,40 @@
+import { isValidElement } from 'react';
+import type { ReactNode, ReactElement } from 'react';
+
+import { ComboboxOption } from './Option/Option';
+import { ComboboxCustom } from './Custom';
+import type { ComboboxOptionProps } from './Option/Option';
+import type { ComboboxCustomProps } from './Custom';
+
+export function isComboboxOption(
+  child: ReactNode,
+): child is ReactElement<ComboboxOptionProps> {
+  return isValidElement(child) && child.type === ComboboxOption;
+}
+
+export function isComboboxCustom(
+  child: ReactNode,
+): child is ReactElement<ComboboxCustomProps> {
+  return isValidElement(child) && child.type === ComboboxCustom;
+}
+
+export function isInteractiveComboboxCustom(
+  child: ReactNode,
+): child is ReactElement<ComboboxCustomProps> {
+  return isComboboxCustom(child) && child.props.interactive === true;
+}
+
+const INTERNAL_OPTION_PREFIX = 'internal-option-';
+
+/**
+ * We use this function to prefix the value of the options so we can make sure numbers as strings are not parsed as numbers in objects
+ * @param value
+ * @returns
+ */
+export const prefix = (value?: string): string => {
+  return INTERNAL_OPTION_PREFIX + value;
+};
+
+export const removePrefix = (value: string): string => {
+  return value.slice(INTERNAL_OPTION_PREFIX.length);
+};

packages/react/src/utilities/RovingFocus/RovingFocusItem.tsx

@@ -7,8 +7,7 @@ import { useMergeRefs } from '@floating-ui/react';
 import { Slot } from '@radix-ui/react-slot';
 
 import type { RovingFocusElement } from './RovingFocusRoot';
-
-import { useRovingFocus } from '.';
+import { useRovingFocus } from './useRovingFocus';
 
 type RovingFocusItemProps = {
   /** The value of the `RovingFocusItem` used to determine which item should have focus. */

plugins/figma-plugin/package.json

@@ -18,15 +18,15 @@
     "@digdir/designsystemet-css": "workspace:^",
     "@digdir/designsystemet-react": "workspace:^",
     "@digdir/designsystemet-theme": "workspace:^",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.95.0",
-    "@types/node": "^18.15.11",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
+    "@types/node": "^20.14.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.2.1",
     "npm-run-all2": "^6.2.0",
     "postcss": "^8.4.21",