fixed most circular deps warnings

Author: mimarz

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