From f89091d3378debbcca0942106e93101cc8a4507a Mon Sep 17 00:00:00 2001 From: Tobias Barsnes Date: Fri, 20 Sep 2024 14:29:11 +0200 Subject: [PATCH] chore: resolve circular dependencies (#2478) resolves #2474 ![image](https://github.com/user-attachments/assets/df206467-d098-49d6-bda0-cbfae011b710) --- packages/react/src/components/Button/Button.tsx | 3 ++- .../react/src/components/Dropdown/DropdownItem.tsx | 2 +- packages/react/src/components/Modal/ModalHeader.tsx | 3 +-- packages/react/src/components/Modal/ModalTrigger.tsx | 2 +- .../src/components/Pagination/PaginationButton.tsx | 2 +- .../react/src/components/Popover/PopoverTrigger.tsx | 2 +- .../src/components/ToggleGroup/ToggleGroupItem.tsx | 3 +-- .../src/components/form/Combobox/Option/Option.tsx | 12 +++++++++--- .../form/Combobox/Option/useComboboxOption.tsx | 2 +- .../src/components/form/Combobox/useCombobox.tsx | 8 ++------ .../react/src/components/form/Combobox/utilities.ts | 8 -------- packages/react/src/components/form/Search/Search.tsx | 2 +- 12 files changed, 21 insertions(+), 28 deletions(-) diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index d4daca2974..26fca5eb4a 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -2,7 +2,8 @@ import { Slot, Slottable } from '@radix-ui/react-slot'; import cl from 'clsx/lite'; import { forwardRef } from 'react'; import type { ButtonHTMLAttributes } from 'react'; -import { Paragraph, Spinner } from '../'; +import { Paragraph } from '../Typography'; +import { Spinner } from '../loaders/Spinner'; export type ButtonProps = { /** diff --git a/packages/react/src/components/Dropdown/DropdownItem.tsx b/packages/react/src/components/Dropdown/DropdownItem.tsx index a3b41d6e60..22ca6d059d 100644 --- a/packages/react/src/components/Dropdown/DropdownItem.tsx +++ b/packages/react/src/components/Dropdown/DropdownItem.tsx @@ -1,7 +1,7 @@ import { forwardRef, useContext } from 'react'; import type { ButtonProps } from '../Button'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { DropdownCtx } from './Dropdown'; diff --git a/packages/react/src/components/Modal/ModalHeader.tsx b/packages/react/src/components/Modal/ModalHeader.tsx index f776e3c188..099a4c1500 100644 --- a/packages/react/src/components/Modal/ModalHeader.tsx +++ b/packages/react/src/components/Modal/ModalHeader.tsx @@ -1,10 +1,9 @@ -import { XMarkIcon } from '@navikt/aksel-icons'; import { Slot } from '@radix-ui/react-slot'; import cl from 'clsx/lite'; import type { HTMLAttributes } from 'react'; import { forwardRef, useContext } from 'react'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Heading, Paragraph } from '../Typography'; import { ModalContext } from './ModalRoot'; diff --git a/packages/react/src/components/Modal/ModalTrigger.tsx b/packages/react/src/components/Modal/ModalTrigger.tsx index 4d754f76cc..7c989ddd0b 100644 --- a/packages/react/src/components/Modal/ModalTrigger.tsx +++ b/packages/react/src/components/Modal/ModalTrigger.tsx @@ -2,7 +2,7 @@ import { Slot } from '@radix-ui/react-slot'; import { forwardRef, useContext } from 'react'; import type { ComponentPropsWithRef } from 'react'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { ModalContext } from './ModalRoot'; diff --git a/packages/react/src/components/Pagination/PaginationButton.tsx b/packages/react/src/components/Pagination/PaginationButton.tsx index 329248d801..9a4195db20 100644 --- a/packages/react/src/components/Pagination/PaginationButton.tsx +++ b/packages/react/src/components/Pagination/PaginationButton.tsx @@ -1,7 +1,7 @@ import { forwardRef, useContext } from 'react'; import type { ButtonProps } from '../Button'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { PaginationContext } from './PaginationRoot'; diff --git a/packages/react/src/components/Popover/PopoverTrigger.tsx b/packages/react/src/components/Popover/PopoverTrigger.tsx index df6b7329e8..3b56d0d41d 100644 --- a/packages/react/src/components/Popover/PopoverTrigger.tsx +++ b/packages/react/src/components/Popover/PopoverTrigger.tsx @@ -1,7 +1,7 @@ import { Slot } from '@radix-ui/react-slot'; import { forwardRef, useContext } from 'react'; import type { ComponentPropsWithRef } from 'react'; -import { Button } from '../Button'; +import { Button } from '../Button/Button'; import { Context } from './PopoverContext'; export type PopoverTriggerProps = ComponentPropsWithRef; diff --git a/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx b/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx index 0ff5354ff4..2ad9681a3d 100644 --- a/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx +++ b/packages/react/src/components/ToggleGroup/ToggleGroupItem.tsx @@ -1,8 +1,7 @@ -import cl from 'clsx/lite'; import { forwardRef } from 'react'; import { RovingFocusItem } from '../../utilities/RovingFocus/RovingFocusItem'; -import { Button, type ButtonProps } from '../Button'; +import { Button, type ButtonProps } from '../Button/Button'; import { useToggleGroupItem } from './useToggleGroupitem'; diff --git a/packages/react/src/components/form/Combobox/Option/Option.tsx b/packages/react/src/components/form/Combobox/Option/Option.tsx index 5e69328435..aa279b6ff5 100644 --- a/packages/react/src/components/form/Combobox/Option/Option.tsx +++ b/packages/react/src/components/form/Combobox/Option/Option.tsx @@ -1,8 +1,8 @@ import cl from 'clsx/lite'; -import { forwardRef, memo, useContext, useId } from 'react'; -import type { ButtonHTMLAttributes } from 'react'; +import { forwardRef, isValidElement, memo, useContext, useId } from 'react'; +import type { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react'; -import { omit } from '../../../../utilities'; +import { omit } from '../../../../utilities/omit/omit'; import { Label } from '../../../Typography'; import { ComboboxContext } from '../ComboboxContext'; @@ -95,3 +95,9 @@ const ComboboxOption = memo( ComboboxOption.displayName = 'ComboboxOption'; export { ComboboxOption }; + +export function isComboboxOption( + child: ReactNode, +): child is ReactElement { + return isValidElement(child) && child.type === ComboboxOption; +} diff --git a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx index 8be1610479..010670a1df 100644 --- a/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx +++ b/packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx @@ -2,7 +2,7 @@ import { useMergeRefs } from '@floating-ui/react'; import { useContext, useEffect, useId, useMemo } from 'react'; import type { Ref } from 'react'; -import { useDebounceCallback } from '../../../../utilities'; +import { useDebounceCallback } from '../../../../utilities/hooks/useDebounceCallback/useDebounceCallback'; import { ComboboxContext } from '../ComboboxContext'; import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext'; import { prefix } from '../utilities'; diff --git a/packages/react/src/components/form/Combobox/useCombobox.tsx b/packages/react/src/components/form/Combobox/useCombobox.tsx index e80aa8cfa0..5f867b5d22 100644 --- a/packages/react/src/components/form/Combobox/useCombobox.tsx +++ b/packages/react/src/components/form/Combobox/useCombobox.tsx @@ -3,12 +3,8 @@ import type { ReactElement, ReactNode } from 'react'; import type { ComboboxProps } from './Combobox'; import type { ComboboxCustomProps } from './Custom'; -import type { ComboboxOptionProps } from './Option/Option'; -import { - isComboboxOption, - isInteractiveComboboxCustom, - prefix, -} from './utilities'; +import { type ComboboxOptionProps, isComboboxOption } from './Option/Option'; +import { isInteractiveComboboxCustom, prefix } from './utilities'; export type UseComboboxProps = { children: ReactNode; diff --git a/packages/react/src/components/form/Combobox/utilities.ts b/packages/react/src/components/form/Combobox/utilities.ts index eb55cb9336..af5fd7448b 100644 --- a/packages/react/src/components/form/Combobox/utilities.ts +++ b/packages/react/src/components/form/Combobox/utilities.ts @@ -3,14 +3,6 @@ import type { ReactElement, ReactNode } from 'react'; import { ComboboxCustom } from './Custom'; import type { ComboboxCustomProps } from './Custom'; -import { ComboboxOption } from './Option/Option'; -import type { ComboboxOptionProps } from './Option/Option'; - -export function isComboboxOption( - child: ReactNode, -): child is ReactElement { - return isValidElement(child) && child.type === ComboboxOption; -} export function isComboboxCustom( child: ReactNode, diff --git a/packages/react/src/components/form/Search/Search.tsx b/packages/react/src/components/form/Search/Search.tsx index ced81037e7..a33b62576c 100644 --- a/packages/react/src/components/form/Search/Search.tsx +++ b/packages/react/src/components/form/Search/Search.tsx @@ -5,7 +5,7 @@ import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react'; import { forwardRef, useCallback, useRef, useState } from 'react'; import { omit } from '../../../utilities'; -import { Button } from '../../Button'; +import { Button } from '../../Button/Button'; import { Label, Paragraph } from '../../Typography'; import type { FormFieldProps } from '../useFormField';