Ryddet opp i sirkulære dependencies (#2366)

* ✨ Boilerplate

* 🎨 Testbuild

* ♻️ Bedre exports av utils

* ♻️ Update imports

* ♻️ Fikset root imports

* 🎨 Hide examples from workspace

* 🔥 Fjernet next appdir

* 🔥 Fjernet npm exports

* 🎨 Fikset default export av Select

* 🎨 Datepicker dependencies

* 🎨 Monthpicker deps

* 🎨 Monthpicker deps

* 🎨 Dropdown deps

* 🎨 Expansioncard context

* 🎨 Checkbox types

* 🎨 Radio types

* 🎨 Form props

* 🎨 List deps

* 🎨 Modal deps

* 🎨 Stepper deps

* 🎨 Table types

* 🎨 Tabs deps

* 🎨 ToggleGroup context

* 🐛 Fikset useMonthpicker import

* 🔥 Fjernet shadow-dom example fra changeset config

* 📝 Changeset

* 🎨 Ryddet opp i sirkulære depdendencies

* 🔥 Fjernet composeEventHandlers

* 🎨 Oppdatert yarn lockfile

.changeset/config.json

@@ -20,7 +20,7 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["shadow-dom", "aksel.nav.no", "aksel-icons-figma-plugin"],
+  "ignore": ["aksel.nav.no", "aksel-icons-figma-plugin"],
 
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always"

.changeset/silver-rice-rush.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Chores: Ryddet opp i sirkulære depdendencies

.eslintrc.js

@@ -31,6 +31,7 @@ module.exports = {
     "react/prop-types": "off",
     "react/display-name": "off",
     "import/no-named-as-default": "off",
+    // "import/no-cycle": [1],
   },
   reportUnusedDisableDirectives: true,
   overrides: [

@navikt/core/react/src/accordion/AccordionContent.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyLong } from "../typography/BodyLong";
+import { BodyLong } from "../typography";
 import { AccordionItemContext } from "./AccordionItem";
 
 export interface AccordionContentProps

@navikt/core/react/src/accordion/AccordionHeader.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { Heading } from "../typography/Heading";
+import { Heading } from "../typography";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
 import { ChevronDownIcon } from "@navikt/aksel-icons";

@navikt/core/react/src/alert/Alert.tsx

@@ -7,7 +7,7 @@ import {
 } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { BodyLong } from "../typography/BodyLong";
+import { BodyLong } from "../typography";
 import { Button } from "../button";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {

@navikt/core/react/src/button/Button.tsx

@@ -1,7 +1,13 @@
-import React, { useRef, useState, forwardRef, useMemo } from "react";
 import cl from "clsx";
-import { OverridableComponent, Loader, mergeRefs, Label } from "../";
-import { omit, useClientLayoutEffect } from "../util";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { Loader } from "../loader";
+import { Label } from "../typography";
+import {
+  mergeRefs,
+  OverridableComponent,
+  omit,
+  useClientLayoutEffect,
+} from "../util";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

@navikt/core/react/src/chips/Chips.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, HTMLAttributes } from "react";
 import ToggleChips, { ToggleChipsProps } from "./Toggle";
 import RemovableChips, { RemovableChipsProps } from "./Removable";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util";
 
 export interface ChipsProps extends HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;

@navikt/core/react/src/chips/Toggle.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util";
 
 export interface ToggleChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

@navikt/core/react/src/copybutton/CopyButton.tsx

@@ -8,7 +8,7 @@ import React, {
   useState,
 } from "react";
 import copy from "../util/copy";
-import Label from "../typography/Label";
+import { Label } from "../typography";
 
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {

@navikt/core/react/src/date/DateInput.tsx

@@ -1,10 +1,11 @@
 import { CalendarIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, InputHTMLAttributes } from "react";
-import { BodyShort, ErrorMessage, Label, omit } from "..";
 import { FormFieldProps, useFormField } from "../form/useFormField";
 import { useDateInputContext } from "./context";
 import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
+import { BodyShort, ErrorMessage, Label } from "../typography";
+import { omit } from "../util";
 
 export interface DateInputProps
   extends FormFieldProps,

@navikt/core/react/src/date/datepicker/DatePicker.tsx

@@ -1,135 +1,21 @@
 import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
 import React, { forwardRef, useRef, useState } from "react";
-import {
-  DateRange,
-  DayPicker,
-  DayPickerBase,
-  Matcher,
-  isMatch,
-} from "react-day-picker";
-import { Popover, omit, useId } from "../..";
-import { DateInputProps, DatePickerInput } from "../DateInput";
+import { DateRange, DayPicker, isMatch } from "react-day-picker";
+import { Popover } from "../../popover";
+import { omit, useId } from "../../util";
+import { DatePickerInput } from "../DateInput";
 import { DateContext } from "../context";
 import { getLocaleFromString, labels } from "../utils";
-import DatePickerStandalone, {
-  DatePickerStandaloneType,
-} from "./DatePickerStandalone";
+import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
 import DayButton from "./parts/DayButton";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
 import Row from "./parts/Row";
 import TableHead from "./parts/TableHead";
 import WeekNumber from "./parts/WeekNumber";
-
-export type SingleMode = {
-  mode?: "single";
-  onSelect?: (val?: Date) => void;
-  selected?: Date;
-  defaultSelected?: Date;
-  onWeekNumberClick?: never;
-};
-
-export type MultipleMode = {
-  mode: "multiple";
-  onSelect?: (val?: Date[]) => void;
-  selected?: Date[];
-  defaultSelected?: Date[];
-  min?: number;
-  max?: number;
-  /**
-   * Allows selecting a week at a time. Only used with mode="multiple".
-   */
-  onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
-};
-
-export type RangeMode = {
-  mode: "range";
-  onSelect?: (val?: DateRange) => void;
-  selected?: DateRange;
-  defaultSelected?: DateRange;
-  min?: number;
-  max?: number;
-  onWeekNumberClick?: never;
-};
-
-type ConditionalModeProps = SingleMode | MultipleMode | RangeMode;
-
-//github.com/gpbl/react-day-picker/blob/50b6dba/packages/react-day-picker/src/types/DayPickerBase.ts#L139
-export interface DatePickerDefaultProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect">,
-    Pick<DayPickerBase, "month" | "onMonthChange" | "today" | "onDayClick"> {
-  /**
-   * Element datepicker anchors to. Use <DatePicker.Input /> for built-in toggle, or make your own with the open/onClose props
-   */
-  children?: React.ReactNode;
-  /**
-   * Classname for datepicker in popover
-   */
-  className?: string;
-  /**
-   * Classname for wrapper
-   */
-  wrapperClassName?: string;
-  /**
-   * Changes datepicker locale
-   * @default "nb" (norsk bokmål)
-   */
-  locale?: "nb" | "nn" | "en";
-  /**
-   * The earliest day to start navigation.
-   */
-  fromDate?: Date;
-  /**
-   * The latests day to end navigation.
-   */
-  toDate?: Date;
-  /**
-   * Display dropdown for choosing the month and the year. Needs `fromDate` + `toDate` to work.
-   * @default false
-   */
-  dropdownCaption?: boolean;
-  /**
-   * Apply the disabled modifier to the matching days.
-   * https://react-day-picker.js.org/api/types/Matcher
-   */
-  disabled?: Matcher[];
-  /**
-   * Disable saturday and sunday.
-   * @default false
-   */
-  disableWeekends?: boolean;
-  /**
-   * Shows week numbers in left-column. Use with caution, takes up valuable screenspace for small screens.
-   * @default false
-   */
-  showWeekNumber?: boolean;
-  /**
-   * Open state for user-controlled state. Component controlled by default
-   */
-  open?: boolean;
-  /**
-   * onClose callback for user-controlled state
-   */
-  onClose?: () => void;
-  /**
-   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
-   */
-  onOpenToggle?: () => void;
-  /**
-   * Avoid using if possible!
-   * Changes what CSS position property to use.
-   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
-   * @default See Popover
-   */
-  strategy?: "absolute" | "fixed";
-  /**
-   * Bubbles Escape keydown-event up trough DOM-tree. This is set to false by default to prevent closing components like Modal on Escape
-   * @default false
-   */
-  bubbleEscape?: boolean;
-}
+import { ConditionalModeProps, DatePickerDefaultProps } from "./types";
 
 export type DatePickerProps = DatePickerDefaultProps & ConditionalModeProps;
 
@@ -145,14 +31,12 @@ interface DatePickerComponent
    * />
    * ```
    */
-  Standalone: DatePickerStandaloneType;
+  Standalone: typeof DatePickerStandalone;
   /**
    * Custom TextField for DatePicker
    * @see 🏷️ {@link DateInputProps}
    */
-  Input: React.ForwardRefExoticComponent<
-    DateInputProps & React.RefAttributes<HTMLInputElement>
-  >;
+  Input: typeof DatePickerInput;
 }
 
 /**

@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx

@@ -2,21 +2,21 @@ import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
 import React, { forwardRef } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
-import { omit } from "../..";
+import { omit } from "../../util";
 import { getLocaleFromString, labels } from "../utils";
+import Caption from "./parts/Caption";
+import DayButton from "./parts/DayButton";
+import DropdownCaption from "./parts/DropdownCaption";
+import { HeadRow } from "./parts/HeadRow";
+import Row from "./parts/Row";
+import TableHead from "./parts/TableHead";
+import WeekNumber from "./parts/WeekNumber";
 import {
   DatePickerDefaultProps,
   MultipleMode,
   RangeMode,
   SingleMode,
-} from "./DatePicker";
-import TableHead from "./parts/TableHead";
-import WeekNumber from "./parts/WeekNumber";
-import Caption from "./parts/Caption";
-import DropdownCaption from "./parts/DropdownCaption";
-import Row from "./parts/Row";
-import { HeadRow } from "./parts/HeadRow";
-import DayButton from "./parts/DayButton";
+} from "./types";
 
 interface DatePickerStandaloneDefaultProps
   extends Omit<

@navikt/core/react/src/date/datepicker/parts/Caption.tsx

@@ -1,8 +1,10 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
-import { Button, Label } from "../../..";
+
 import WeekRow from "./WeekRow";
+import { Button } from "../../../button";
+import { Label } from "../../../typography";
 
 /**
  * https://github.com/gpbl/react-day-picker/tree/main/src/components/Caption

@navikt/core/react/src/date/datepicker/parts/DropdownCaption.tsx

@@ -1,13 +1,14 @@
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
+import { max, min } from "date-fns";
 import setMonth from "date-fns/setMonth";
 import setYear from "date-fns/setYear";
 import startOfMonth from "date-fns/startOfMonth";
 import React from "react";
 import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
-import { Button, Select } from "../../..";
+import { Button } from "../../../button";
+import { Select } from "../../../form/Select";
 import { getMonths, getYears } from "../../utils/get-dates";
 import { labelMonthDropdown, labelYearDropdown } from "../../utils/labels";
-import { max, min } from "date-fns";
 import WeekRow from "./WeekRow";
 
 /**

@navikt/core/react/src/date/datepicker/parts/WeekRow.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import { useDayPicker } from "react-day-picker";
 import { Show } from "../../../layout/responsive";
 import { Detail } from "../../../typography";
+import { useId } from "../../../util";
 import { getMonthWeeks } from "../../utils/get-month-weeks";
 import { labelWeek } from "../../utils/labels";
 import WeekNumber from "./WeekNumber";
-import { useId } from "../../../util";
 
 const WeekRow = ({ displayMonth }: { displayMonth: Date }) => {
   const { locale, fixedWeeks, onWeekNumberClick } = useDayPicker();