@navikt/ds-react 5.6.4 → 5.7.0

package/src/form/checkbox/Checkbox.tsx

@@ -1,45 +1,10 @@
 import cl from "clsx";
-import React, { forwardRef, InputHTMLAttributes } from "react";
+import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
-import { FormFieldProps } from "../useFormField";
-import useCheckbox from "./useCheckbox";
 import { ReadOnlyIcon } from "../ReadOnlyIcon";
-
-export interface CheckboxProps
-  extends FormFieldProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
-  /**
-   * Adds error indication on checkbox
-   * @default false
-   */
-  error?: boolean;
-  /**
-   * Id for error resulting in checkbox having error
-   */
-  errorId?: string;
-  /**
-   * Checkbox label
-   */
-  children: React.ReactNode;
-  /**
-   * Hides label and makes it viewable for screen-readers only.
-   */
-  hideLabel?: boolean;
-  /**
-   * The value of the HTML element.
-   */
-  value?: any;
-  /**
-   * Specify whether the Checkbox is in an indeterminate state
-   * @default false
-   */
-  indeterminate?: boolean;
-  /**
-   * Adds a description to extend labling of Checkbox
-   */
-  description?: string;
-}
+import { CheckboxProps } from "./types";
+import useCheckbox from "./useCheckbox";
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   (props, ref) => {

package/src/form/checkbox/CheckboxGroup.tsx

@@ -1,6 +1,6 @@
-import React, { createContext, forwardRef, useContext, useState } from "react";
 import cl from "clsx";
-import { Fieldset, FieldsetProps, FieldsetContext } from "..";
+import React, { createContext, forwardRef, useContext, useState } from "react";
+import { Fieldset, FieldsetContext, FieldsetProps } from "../Fieldset";
 
 export interface CheckboxGroupState {
   readonly defaultValue?: readonly any[];

package/src/form/checkbox/index.ts

@@ -1,5 +1,6 @@
-export { default as Checkbox, type CheckboxProps } from "./Checkbox";
+export { default as Checkbox } from "./Checkbox";
 export {
   default as CheckboxGroup,
   type CheckboxGroupProps,
 } from "./CheckboxGroup";
+export { type CheckboxProps } from "./types";

package/src/form/checkbox/types.ts

@@ -0,0 +1,37 @@
+import { InputHTMLAttributes } from "react";
+import { FormFieldProps } from "../useFormField";
+
+export interface CheckboxProps
+  extends FormFieldProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
+  /**
+   * Adds error indication on checkbox
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * Id for error resulting in checkbox having error
+   */
+  errorId?: string;
+  /**
+   * Checkbox label
+   */
+  children: React.ReactNode;
+  /**
+   * Hides label and makes it viewable for screen-readers only.
+   */
+  hideLabel?: boolean;
+  /**
+   * The value of the HTML element.
+   */
+  value?: any;
+  /**
+   * Specify whether the Checkbox is in an indeterminate state
+   * @default false
+   */
+  indeterminate?: boolean;
+  /**
+   * Adds a description to extend labling of Checkbox
+   */
+  description?: string;
+}

package/src/form/checkbox/useCheckbox.ts

@@ -1,7 +1,8 @@
 import { useContext } from "react";
-import { CheckboxProps, omit } from "../..";
+import { omit } from "../../util";
 import { useFormField } from "../useFormField";
 import { CheckboxGroupContext } from "./CheckboxGroup";
+import { CheckboxProps } from "./types";
 
 /**
  * Handles props for Checkboxes in context with Fieldset and CheckboxGroup

package/src/form/combobox/Combobox.tsx

@@ -1,6 +1,5 @@
 import cl from "clsx";
 import React, { forwardRef, useMemo, useRef } from "react";
-import { BodyShort, ErrorMessage, Label, mergeRefs } from "../..";
 import ClearButton from "./ClearButton";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
 import { useFilteredOptionsContext } from "./FilteredOptions/filteredOptionsContext";
@@ -11,6 +10,8 @@ import { useSelectedOptionsContext } from "./SelectedOptions/selectedOptionsCont
 import ComboboxWrapper from "./ComboboxWrapper";
 import { useInputContext } from "./Input/inputContext";
 import Input from "./Input/Input";
+import { mergeRefs } from "../../util";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
 
 export const Combobox = forwardRef<
   HTMLInputElement,

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import cl from "clsx";
-import { BodyShort, Label, Loader } from "../../..";
 import { CheckmarkIcon, PlusIcon } from "@navikt/aksel-icons";
 import { useFilteredOptionsContext } from "./filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useInputContext } from "../Input/inputContext";
+import { Loader } from "../../../loader";
+import { BodyShort, Label } from "../../../typography";
 
 const FilteredOptions = () => {
   const {

package/src/form/combobox/Input/Input.tsx

@@ -1,4 +1,4 @@
-import { omit } from "../../..";
+import { omit } from "../../../util";
 import React, {
   useCallback,
   forwardRef,

package/src/form/combobox/SelectedOptions/SelectedOptions.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Chips } from "../../..";
+import { Chips } from "../../../chips";
 import { useSelectedOptionsContext } from "./selectedOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 

package/src/form/error-summary/ErrorSummary.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import { Heading, BodyShort } from "../..";
+import { Heading, BodyShort } from "../../typography";
 import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 import { useId } from "../../util";
 

package/src/form/error-summary/ErrorSummaryItem.tsx

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

package/src/form/radio/Radio.tsx

@@ -1,27 +1,10 @@
 import cl from "clsx";
-import React, { forwardRef, InputHTMLAttributes } from "react";
+import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
 import { omit } from "../../util";
-import { FormFieldProps } from "../useFormField";
+import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
-export interface RadioProps
-  extends Omit<FormFieldProps, "error" | "errorId" | "readOnly">,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
-  /**
-   * Radio label
-   */
-  children: React.ReactNode;
-  /**
-   * The value of the HTML element
-   */
-  value: any;
-  /**
-   * Adds a description to extend labling of Radio
-   */
-  description?: string;
-}
-
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
   const { inputProps, size, hasError, readOnly } = useRadio(props);
 

package/src/form/radio/RadioGroup.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useContext } from "react";
 import cl from "clsx";
-import { Fieldset, FieldsetContext, FieldsetProps } from "..";
-import { useId } from "../..";
+import React, { forwardRef, useContext } from "react";
+import { useId } from "../../util";
+import { Fieldset, FieldsetContext, FieldsetProps } from "../Fieldset";
 
 export interface RadioGroupContextProps {
   name: string;

package/src/form/radio/index.ts

@@ -1,2 +1,3 @@
-export { default as Radio, type RadioProps } from "./Radio";
+export { default as Radio } from "./Radio";
 export { default as RadioGroup, type RadioGroupProps } from "./RadioGroup";
+export { type RadioProps } from "./types";

package/src/form/radio/types.ts

@@ -0,0 +1,19 @@
+import { InputHTMLAttributes } from "react";
+import { FormFieldProps } from "../useFormField";
+
+export interface RadioProps
+  extends Omit<FormFieldProps, "error" | "errorId" | "readOnly">,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
+  /**
+   * Radio label
+   */
+  children: React.ReactNode;
+  /**
+   * The value of the HTML element
+   */
+  value: any;
+  /**
+   * Adds a description to extend labling of Radio
+   */
+  description?: string;
+}

package/src/form/radio/useRadio.ts

@@ -1,8 +1,8 @@
 import { useContext } from "react";
+import { omit } from "../../util";
 import { useFormField } from "../useFormField";
-import { RadioProps } from "./Radio";
 import { RadioGroupContext } from "./RadioGroup";
-import { omit } from "../..";
+import { RadioProps } from "./types";
 
 /**
  * Handles props for Radios in context with Fieldset and RadioGroup

package/src/form/search/Search.tsx

@@ -1,16 +1,18 @@
-import { XMarkIcon, MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, {
-  forwardRef,
   InputHTMLAttributes,
+  forwardRef,
   useCallback,
   useMemo,
   useRef,
   useState,
 } from "react";
-import { BodyShort, ErrorMessage, Label, mergeRefs, omit } from "../..";
+import { BodyShort, ErrorMessage, Label } from "../../typography";
+import { mergeRefs, omit } from "../../util";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
+import { SearchContext } from "./context";
 
 export type SearchClearEvent =
   | {
@@ -73,17 +75,6 @@ interface SearchComponent
   Button: SearchButtonType;
 }
 
-export interface SearchContextProps {
-  disabled?: boolean;
-  size: "medium" | "small";
-  variant: "primary" | "secondary" | "simple";
-  handleClick: () => void;
-}
-
-export const SearchContext = React.createContext<SearchContextProps | null>(
-  null
-);
-
 /**
  * A component that displays a search input field.
  *

package/src/form/search/SearchButton.tsx

@@ -1,8 +1,8 @@
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { Button, ButtonProps } from "../..";
-import { SearchContext } from "./Search";
-import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
+import { Button, ButtonProps } from "../../button";
+import { SearchContext } from "./context";
 
 export interface SearchButtonProps
   extends Omit<ButtonProps, "size" | "children" | "variant"> {

package/src/form/search/context.ts

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+
+export interface SearchContextProps {
+  disabled?: boolean;
+  size: "medium" | "small";
+  variant: "primary" | "secondary" | "simple";
+  handleClick: () => void;
+}
+
+export const SearchContext = createContext<SearchContextProps | null>(null);

package/src/form/useFormField.ts

@@ -1,7 +1,7 @@
-import React, { useContext } from "react";
 import cl from "clsx";
-import { FieldsetContext } from "./index";
-import { useId } from "../index";
+import React, { useContext } from "react";
+import { useId } from "../util";
+import { FieldsetContext } from "./Fieldset/context";
 
 export interface FormFieldProps {
   /**

package/src/guide-panel/Illustration.tsx

@@ -1,5 +1,5 @@
 import React, { SVGProps } from "react";
-import { useId } from "..";
+import { useId } from "../util";
 
 interface SVGRProps {
   title?: string;

package/src/help-text/HelpText.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
-import { Popover, PopoverProps, mergeRefs } from "..";
+import { Popover, PopoverProps } from "../popover";
+import { mergeRefs } from "../util";
 import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps

package/src/link-panel/LinkPanel.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from "react";
-import { Panel, OverridableComponent } from "..";
 
 import cl from "clsx";
 import { LinkPanelTitle, LinkPanelTitleProps } from "./LinkPanelTitle";
@@ -8,6 +7,8 @@ import {
   LinkPanelDescriptionProps,
 } from "./LinkPanelDescription";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
+import { OverridableComponent } from "../util";
+import { Panel } from "../panel";
 
 export interface LinkPanelProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {

package/src/link-panel/LinkPanelDescription.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { BodyLong } from "..";
+import { BodyLong } from "../typography";
 
 export interface LinkPanelDescriptionProps
   extends React.HTMLAttributes<HTMLDivElement> {

package/src/list/List.tsx

@@ -1,58 +1,21 @@
 import cl from "clsx";
-import React, { createContext, forwardRef, useContext } from "react";
+import React, { forwardRef, useContext } from "react";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util/useId";
-import { ListItem, ListItemProps } from "./ListItem";
-
-export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * HTML list element to render
-   * @default "ul"
-   */
-  as?: "ul" | "ol";
-  /**
-   * List heading title
-   */
-  title?: string;
-  /**
-   * List heading description
-   */
-  description?: string;
-  /**
-   * Allows setting a different HTML h-tag
-   * @default "h3"
-   */
-  headingTag?: React.ElementType<any>;
-  /**
-   * Changes padding, height and font-size
-   * @default medium
-   */
-  size?: "medium" | "small";
-}
+import { ListItem } from "./ListItem";
+import { ListContext } from "./context";
+import { ListProps } from "./types";
 
 export interface ListComponent
-  extends React.ForwardRefExoticComponent<ListProps> {
+  extends React.ForwardRefExoticComponent<
+    ListProps & React.RefAttributes<HTMLDivElement>
+  > {
   /**
    * @see 🏷️ {@link ListItemProps}
    */
-  Item: React.ForwardRefExoticComponent<
-    ListItemProps & React.RefAttributes<HTMLLIElement>
-  >;
+  Item: typeof ListItem;
 }
 
-interface ListContextProps {
-  listType: ListProps["as"];
-  isNested: boolean | null;
-  size: ListProps["size"];
-}
-
-export const ListContext = createContext<ListContextProps>({
-  listType: "ul",
-  isNested: null,
-  size: "medium",
-});
-
 export const List = forwardRef<HTMLDivElement, ListProps>(
   (
     {

package/src/list/ListItem.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { BodyShort, Label } from "../typography";
-import { ListContext } from "./List";
+import { ListContext } from "./context";
 
 export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
   /**

package/src/list/context.ts

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+import { ListProps } from "./types";
+
+interface ListContextProps {
+  listType: ListProps["as"];
+  isNested: boolean | null;
+  size: ListProps["size"];
+}
+
+export const ListContext = createContext<ListContextProps>({
+  listType: "ul",
+  isNested: null,
+  size: "medium",
+});

package/src/list/index.ts

@@ -1,2 +1,2 @@
 export { default as List } from "./List";
-export type { ListProps } from "./List";
+export type { ListProps } from "./types";

package/src/list/types.ts

@@ -0,0 +1,26 @@
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * HTML list element to render
+   * @default "ul"
+   */
+  as?: "ul" | "ol";
+  /**
+   * List heading title
+   */
+  title?: string;
+  /**
+   * List heading description
+   */
+  description?: string;
+  /**
+   * Allows setting a different HTML h-tag
+   * @default "h3"
+   */
+  headingTag?: React.ElementType<any>;
+  /**
+   * Changes padding, height and font-size
+   * @default medium
+   */
+  size?: "medium" | "small";
+}

package/src/loader/Loader.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef, SVGProps } from "react";
 import cl from "clsx";
-import { omit, useId } from "..";
+import React, { forwardRef, SVGProps } from "react";
+import { omit, useId } from "../util";
 
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**

package/src/modal/Modal.tsx

@@ -1,3 +1,5 @@
+import { useFloatingPortalNode } from "@floating-ui/react";
+import cl from "clsx";
 import React, {
   forwardRef,
   useContext,
@@ -6,80 +8,16 @@ import React, {
   useRef,
 } from "react";
 import { createPortal } from "react-dom";
-import { useFloatingPortalNode } from "@floating-ui/react";
-import cl from "clsx";
-import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
-import { Detail, Heading, mergeRefs, useId, useProvider } from "..";
+import { useProvider } from "../provider";
+import { Detail, Heading } from "../typography";
+import { mergeRefs, useId } from "../util";
 import ModalBody from "./ModalBody";
-import ModalHeader from "./ModalHeader";
+import { ModalContext } from "./ModalContext";
 import ModalFooter from "./ModalFooter";
+import ModalHeader from "./ModalHeader";
 import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
-import { ModalContext } from "./ModalContext";
-
-export interface ModalProps
-  extends React.DialogHTMLAttributes<HTMLDialogElement> {
-  /**
-   * Content for the header. Alteratively you can use <Modal.Header> instead for more control,
-   * but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
-   */
-  header?: {
-    label?: string;
-    icon?: React.ReactNode;
-    heading: string;
-    /**
-     * Heading size
-     * @default "medium"
-     * */
-    size?: "medium" | "small";
-    /**
-     * Removes close-button (X) when false
-     * @default true
-     */
-    closeButton?: boolean;
-  };
-  /**
-   * Modal content
-   */
-  children: React.ReactNode;
-  /**
-   * Whether the modal should be visible or not.
-   * Remember to use the `onClose` callback to keep your local state in sync.
-   * You can also use `ref.current.openModal()` and `ref.current.close()`.
-   */
-  open?: boolean;
-  /**
-   * Called when the modal has been closed
-   */
-  onClose?: React.ReactEventHandler<HTMLDialogElement>;
-  /**
-   * Called when the user wants to close the modal (clicked the close button or pressed Esc).
-   * @returns Whether to close the modal
-   */
-  onBeforeClose?: () => boolean | void;
-  /**
-   * Called when the user presses the Esc key, unless `onBeforeClose()` returns `false`.
-   */
-  onCancel?: React.ReactEventHandler<HTMLDialogElement>;
-  /**
-   * @default fit-content (up to 700px)
-   * */
-  width?: "medium" | "small" | number | `${number}${string}`;
-  /**
-   * Lets you render the modal into a different part of the DOM.
-   * Will use `rootElement` from `Provider` if defined, otherwise `document.body`.
-   */
-  portal?: boolean;
-  /**
-   * User defined classname for modal
-   */
-  className?: string;
-  /**
-   * Sets aria-labelledby on modal.
-   * No need to set this manually if the `header` prop is used. A reference to `header.heading` will be created automatically.
-   * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
-   */
-  "aria-labelledby"?: string;
-}
+import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
+import { ModalProps } from "./types";
 
 interface ModalComponent
   extends React.ForwardRefExoticComponent<

package/src/modal/ModalUtils.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ModalProps } from "./Modal";
+import type { ModalProps } from "./types";
 
 export function getCloseHandler(
   modalRef: React.RefObject<HTMLDialogElement>,

package/src/modal/index.ts

@@ -1,4 +1,5 @@
-export { default as Modal, type ModalProps } from "./Modal";
-export { type ModalHeaderProps } from "./ModalHeader";
+export { default as Modal } from "./Modal";
 export { type ModalBodyProps } from "./ModalBody";
 export { type ModalFooterProps } from "./ModalFooter";
+export { type ModalHeaderProps } from "./ModalHeader";
+export { type ModalProps } from "./types";