@navikt/ds-react 8.2.2 → 8.4.0

package/src/form/form-summary/FormSummaryFooter.tsx

@@ -4,8 +4,7 @@ import { cl } from "../../utils/helpers";
 /**
  * Footer slot for actions in `FormSummary`.
  */
-export interface FormSummaryFooterProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface FormSummaryFooterProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Should include `<FormSummary.EditLink>`.
    */

package/src/form/form-summary/FormSummaryHeader.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from "react";
 import { CompositionWarning } from "../../utils/components/composition-warning";
 import { cl } from "../../utils/helpers";
 
-export interface FormSummaryHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface FormSummaryHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Must include `<FormSummary.Heading>`.
    */

package/src/form/form-summary/FormSummaryHeading.tsx

@@ -1,8 +1,7 @@
 import React, { forwardRef } from "react";
 import { Heading, HeadingProps } from "../../typography";
 
-export interface FormSummaryHeadingProps
-  extends React.HTMLAttributes<HTMLHeadingElement> {
+export interface FormSummaryHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   /**
    * Heading text.
    */

package/src/form/form-summary/FormSummaryLabel.tsx

@@ -1,8 +1,7 @@
 import React, { forwardRef } from "react";
 import { Label } from "../../typography";
 
-export interface FormSummaryLabelProps
-  extends React.HTMLAttributes<HTMLElement> {
+export interface FormSummaryLabelProps extends React.HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
 }
 

package/src/form/form-summary/FormSummaryValue.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from "react";
 import { BodyLong } from "../../typography";
 import { cl } from "../../utils/helpers";
 
-export interface FormSummaryValueProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface FormSummaryValueProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 

package/src/form/radio/RadioGroup.tsx

@@ -15,11 +15,10 @@ export interface RadioGroupContextProps {
 export const RadioGroupContext =
   React.createContext<RadioGroupContextProps | null>(null);
 
-export interface RadioGroupProps
-  extends Omit<
-    FieldsetProps,
-    "onChange" | "errorPropagation" | "defaultValue" | "nativeReadOnly"
-  > {
+export interface RadioGroupProps extends Omit<
+  FieldsetProps,
+  "onChange" | "errorPropagation" | "defaultValue" | "nativeReadOnly"
+> {
   /**
    * Collection of `<Radio />`-elements
    */

package/src/form/radio/types.ts

@@ -2,7 +2,8 @@ import { InputHTMLAttributes } from "react";
 import { FormFieldProps } from "../useFormField";
 
 export interface RadioProps
-  extends Omit<FormFieldProps, "error" | "errorId" | "readOnly">,
+  extends
+    Omit<FormFieldProps, "error" | "errorId" | "readOnly">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
    * Radio label.

package/src/form/search/SearchButton.tsx

@@ -5,8 +5,10 @@ import { cl, composeEventHandlers } from "../../utils/helpers";
 import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { SearchContext } from "./context";
 
-export interface SearchButtonProps
-  extends Omit<ButtonProps, "size" | "children" | "variant"> {
+export interface SearchButtonProps extends Omit<
+  ButtonProps,
+  "size" | "children" | "variant"
+> {
   /**
    * Text set after <Search/> icon
    */

package/src/form/select/Select.tsx

@@ -7,7 +7,8 @@ import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface SelectProps
-  extends FormFieldProps,
+  extends
+    FormFieldProps,
     Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "multiple"> {
   /**
    * Collection of <option />-elements.

package/src/form/switch/Switch.tsx

@@ -1,9 +1,4 @@
-import React, {
-  InputHTMLAttributes,
-  forwardRef,
-  useEffect,
-  useState,
-} from "react";
+import React, { InputHTMLAttributes, forwardRef, useState } from "react";
 import { Loader } from "../../loader";
 import { BodyShort } from "../../typography";
 import { omit } from "../../utils-external";
@@ -12,7 +7,8 @@ import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface SwitchProps
-  extends Omit<FormFieldProps, "error" | "errorId">,
+  extends
+    Omit<FormFieldProps, "error" | "errorId">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   /**
    * Switch-label.
@@ -68,9 +64,9 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
       defaultChecked ?? checkedProp ?? false,
     );
 
-    useEffect(() => {
-      checkedProp !== undefined && setChecked(checkedProp);
-    }, [checkedProp]);
+    if (checkedProp !== undefined && checkedProp !== _checked) {
+      setChecked(checkedProp);
+    }
 
     const checked = checkedProp ?? _checked;
 

package/src/form/textarea/Textarea.tsx

@@ -8,8 +8,7 @@ import { FormFieldProps, useFormField } from "./../useFormField";
 import Counter from "./TextareaCounter";
 
 export interface TextareaProps
-  extends FormFieldProps,
-    React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  extends FormFieldProps, React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /**
    * Allowed character-count for content
    *

package/src/form/textfield/TextField.tsx

@@ -6,8 +6,7 @@ import { ReadOnlyIcon } from "../ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface TextFieldProps
-  extends FormFieldProps,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   /**
    * Controlled value
    */

package/src/help-text/HelpText.tsx

@@ -7,7 +7,8 @@ import { useI18n } from "../utils/i18n/i18n.hooks";
 import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     Pick<PopoverProps, "strategy" | "placement"> {
   children: React.ReactNode;
   /**

package/src/index.ts

@@ -1,6 +1,6 @@
 "use client";
 export { Accordion, type AccordionProps } from "./accordion";
-export { ActionMenu, type ActionMenuProps } from "./overlays/action-menu";
+export { ActionMenu, type ActionMenuProps } from "./action-menu";
 export { Alert, type AlertProps } from "./alert";
 export { Button, type ButtonProps } from "./button";
 export { Chat, type ChatProps } from "./chat";
@@ -37,11 +37,11 @@ export {
   type InternalHeaderUserButtonProps,
   type InternalHeaderUserProps,
 } from "./internal-header";
-export { Bleed, type BleedProps } from "./layout/bleed";
-export { Box, type BoxProps, BoxNew, type BoxNewProps } from "./layout/box";
-export { HGrid, type HGridProps } from "./layout/grid";
-export { Page, type PageBlockProps, type PageProps } from "./layout/page";
-export { Hide, Show, type ResponsiveProps } from "./layout/responsive";
+export { Bleed, type BleedProps } from "./primitives/bleed";
+export { Box, type BoxProps, BoxNew, type BoxNewProps } from "./primitives/box";
+export { HGrid, type HGridProps } from "./primitives/grid";
+export { Page, type PageBlockProps, type PageProps } from "./primitives/page";
+export { Hide, Show, type ResponsiveProps } from "./primitives/responsive";
 export {
   HStack,
   Spacer,
@@ -50,7 +50,7 @@ export {
   type HStackProps,
   type StackProps,
   type VStackProps,
-} from "./layout/stack";
+} from "./primitives/stack";
 export { Link, type LinkProps } from "./link";
 export { List, type ListProps, type ListItemProps } from "./list";
 export { Loader, type LoaderProps } from "./loader";

package/src/internal-header/InternalHeaderButton.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from "react";
 import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 
-export interface InternalHeaderButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface InternalHeaderButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Application Button
    */

package/src/internal-header/InternalHeaderTitle.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from "react";
 import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 
-export interface InternalHeaderTitleProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface InternalHeaderTitleProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
    * Application title
    */

package/src/internal-header/InternalHeaderUser.tsx

@@ -2,8 +2,7 @@ import React, { HTMLAttributes, forwardRef } from "react";
 import { BodyShort, Detail } from "../typography";
 import { cl } from "../utils/helpers";
 
-export interface InternalHeaderUserProps
-  extends HTMLAttributes<HTMLDivElement> {
+export interface InternalHeaderUserProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * User name
    */

package/src/internal-header/InternalHeaderUserButton.tsx

@@ -5,8 +5,7 @@ import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 import InternalHeaderButton from "./InternalHeaderButton";
 
-export interface InternalHeaderUserButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface InternalHeaderUserButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * User name
    */

package/src/link/Link.tsx

@@ -4,8 +4,7 @@ import { AkselColor } from "../types";
 import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 
-export interface LinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
    * Inverts when the underline appears. If this is false,
    * the underline only appears on hover.

package/src/link-card/LinkCard.tsx

@@ -44,10 +44,9 @@ const { Provider: LinkCardContextProvider, useContext: useLinkCardContext } =
     name: "LinkCardContextProvider",
   });
 
-interface LinkCardComponent
-  extends React.ForwardRefExoticComponent<
-    LinkCardProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface LinkCardComponent extends React.ForwardRefExoticComponent<
+  LinkCardProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link LinkCardTitleProps}
    */

package/src/link-panel/LinkPanelDescription.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from "react";
 import { BodyLong } from "../typography";
 import { cl } from "../utils/helpers";
 
-export interface LinkPanelDescriptionProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface LinkPanelDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 

package/src/link-panel/LinkPanelTitle.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from "react";
 import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 
-export interface LinkPanelTitleProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface LinkPanelTitleProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 

package/src/modal/Modal.tsx

@@ -22,10 +22,9 @@ import { ModalProps } from "./types";
 
 const polyfillClassName = "aksel-modal--polyfilled";
 
-interface ModalComponent
-  extends React.ForwardRefExoticComponent<
-    ModalProps & React.RefAttributes<HTMLDialogElement>
-  > {
+interface ModalComponent extends React.ForwardRefExoticComponent<
+  ModalProps & React.RefAttributes<HTMLDialogElement>
+> {
   Header: typeof ModalHeader;
   Body: typeof ModalBody;
   Footer: typeof ModalFooter;

package/src/pagination/Pagination.tsx

@@ -11,11 +11,10 @@ import PaginationItem, {
   PaginationItemType,
 } from "./PaginationItem";
 
-interface RenderItemProps
-  extends Pick<
-    PaginationItemProps,
-    "className" | "disabled" | "selected" | "icon" | "iconPosition"
-  > {
+interface RenderItemProps extends Pick<
+  PaginationItemProps,
+  "className" | "disabled" | "selected" | "icon" | "iconPosition"
+> {
   children: React.ReactNode;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
   page: number;
@@ -81,10 +80,9 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
-interface PaginationType
-  extends React.ForwardRefExoticComponent<
-    PaginationProps & React.RefAttributes<HTMLElement>
-  > {
+interface PaginationType extends React.ForwardRefExoticComponent<
+  PaginationProps & React.RefAttributes<HTMLElement>
+> {
   Item: PaginationItemType;
 }
 

package/src/popover/Popover.tsx

@@ -10,8 +10,8 @@ import {
 } from "@floating-ui/react";
 import React, { HTMLAttributes, forwardRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
-import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
 import { omit, useClientLayoutEffect } from "../utils-external";
+import { DismissableLayer } from "../utils/components/dismissablelayer/DismissableLayer";
 import { cl } from "../utils/helpers";
 import { useMergeRefs } from "../utils/hooks";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -74,10 +74,9 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   flip?: boolean;
 }
 
-interface PopoverComponent
-  extends React.ForwardRefExoticComponent<
-    PopoverProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface PopoverComponent extends React.ForwardRefExoticComponent<
+  PopoverProps & React.RefAttributes<HTMLDivElement>
+> {
   Content: PopoverContentType;
 }
 

package/src/popover/PopoverContent.tsx

@@ -1,8 +1,7 @@
 import React, { forwardRef } from "react";
 import { cl } from "../utils/helpers";
 
-export interface PopoverContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 

package/src/{layout → primitives}/box/Box.tsx

@@ -70,8 +70,10 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
 } & PrimitiveProps &
   PrimitiveAsChildProps;
 
-interface BoxComponentType
-  extends OverridableComponent<BoxProps, HTMLDivElement> {
+interface BoxComponentType extends OverridableComponent<
+  BoxProps,
+  HTMLDivElement
+> {
   /**
    * @deprecated Deprecated in v8. Use `Box` from '@navikt/ds-react/Box' instead (with same props).
    *

package/src/{layout → primitives}/page/Page.tsx

@@ -28,8 +28,10 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
   background?: string;
 }
 
-interface PageComponentType
-  extends OverridableComponent<PageProps, HTMLElement> {
+interface PageComponentType extends OverridableComponent<
+  PageProps,
+  HTMLElement
+> {
   Block: typeof PageBlock;
 }
 

package/src/process/Process.tsx

@@ -40,10 +40,9 @@ const { Provider: ProcessContextProvider, useContext: useProcessContext } =
       "`<Process.Event />` must be used within a `<Process />` component.",
   });
 
-interface ProcessComponent
-  extends React.ForwardRefExoticComponent<
-    ProcessProps & React.RefAttributes<HTMLOListElement>
-  > {
+interface ProcessComponent extends React.ForwardRefExoticComponent<
+  ProcessProps & React.RefAttributes<HTMLOListElement>
+> {
   /**
    * @see 🏷️ {@link ProcessEventProps}
    */

package/src/progress-bar/ProgressBar.tsx

@@ -4,8 +4,10 @@ import { cl } from "../utils/helpers";
 import { useTimeout, useValueAsRef } from "../utils/hooks";
 import { useI18n } from "../utils/i18n/i18n.hooks";
 
-interface ProgressBarPropsBase
-  extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+interface ProgressBarPropsBase extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "role"
+> {
   /**
    * Changes height.
    * @default "medium"

package/src/read-more/ReadMore.tsx

@@ -6,8 +6,7 @@ import { BodyLong } from "../typography";
 import { cl, composeEventHandlers } from "../utils/helpers";
 import { useControllableState } from "../utils/hooks";
 
-export interface ReadMoreProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ReadMoreProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Content inside ReadMore.
    */

package/src/stepper/Step.tsx

@@ -4,8 +4,7 @@ import type { OverridableComponent } from "../utils-external";
 import { cl, composeEventHandlers } from "../utils/helpers";
 import { useStepperContext } from "./context";
 
-export interface StepperStepProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface StepperStepProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
    * Text content by indicator.
    */

package/src/table/DataCell.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from "react";
 import { BodyShort } from "../typography";
 import { cl } from "../utils/helpers";
 
-export interface DataCellProps
-  extends React.TdHTMLAttributes<HTMLTableCellElement> {
+export interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
   /**
    * Content alignment inside cell
    * @default "left"

package/src/table/ExpandableRow.tsx

@@ -9,8 +9,10 @@ import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
 import { isElementInteractiveTarget } from "./Table.utils";
 
-export interface ExpandableRowProps
-  extends Omit<RowProps, "content" | "onRowClick"> {
+export interface ExpandableRowProps extends Omit<
+  RowProps,
+  "content" | "onRowClick"
+> {
   /**
    * Content of the expanded row
    */

package/src/table/HeaderCell.tsx

@@ -1,8 +1,7 @@
 import React, { forwardRef } from "react";
 import { cl } from "../utils/helpers";
 
-export interface HeaderCellProps
-  extends React.ThHTMLAttributes<HTMLTableCellElement> {
+export interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
   scope?: string;
   /**
    * Content alignment inside cell

package/src/table/Table.tsx

@@ -10,8 +10,7 @@ import Row from "./Row";
 import { TableContext } from "./context";
 import { SortState } from "./types";
 
-export interface TableProps
-  extends React.TableHTMLAttributes<HTMLTableElement> {
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
   /**
    * Changes padding around Cells
    * @default "medium"
@@ -37,10 +36,9 @@ export interface TableProps
   onSortChange?: (sortKey: string) => void;
 }
 
-export interface TableType
-  extends React.ForwardRefExoticComponent<
-    TableProps & React.RefAttributes<HTMLTableElement>
-  > {
+export interface TableType extends React.ForwardRefExoticComponent<
+  TableProps & React.RefAttributes<HTMLTableElement>
+> {
   Header: typeof Header;
   Body: typeof Body;
   Row: typeof Row;

package/src/tabs/Tabs.types.ts

@@ -1,7 +1,9 @@
 import { HTMLAttributes } from "react";
 
-export interface TabsProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+export interface TabsProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange" | "dir"
+> {
   children: React.ReactNode;
   /**
    * Changes padding and font-size.

package/src/tabs/parts/tab/Tab.tsx

@@ -5,8 +5,10 @@ import { cl } from "../../../utils/helpers";
 import { useTabsContext } from "../../Tabs.context";
 import { useTab } from "./useTab";
 
-export interface TabProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+export interface TabProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> {
   /**
    * Tab label.
    */

package/src/timeline/Timeline.tsx

@@ -44,8 +44,7 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
   axisLabelTemplates?: AxisLabelTemplates;
 }
 
-interface TimelineComponent
-  extends React.ForwardRefExoticComponent<TimelineProps> {
+interface TimelineComponent extends React.ForwardRefExoticComponent<TimelineProps> {
   /**
    * @see 🏷️ {@link TimelineRowType}
    */