@navikt/ds-react 4.0.0 → 4.1.0

package/src/dropdown/Menu/GroupedList/Heading.tsx

@@ -9,23 +9,20 @@ export interface GroupedHeadingProps
   children: React.ReactNode;
 }
 
-export type GroupedHeadingType = React.ForwardRefExoticComponent<
-  GroupedHeadingProps & React.RefAttributes<HTMLElement>
->;
-
-export const GroupedHeading: GroupedHeadingType = forwardRef(
-  ({ className, ...rest }, ref) => (
-    <dt
-      {...rest}
-      ref={ref}
-      className={cl(
-        "navds-dropdown__list-heading",
-        "navds-heading",
-        "navds-heading--xsmall",
-        className
-      )}
-    />
-  )
-);
+export const GroupedHeading = forwardRef<
+  HTMLDetailsElement,
+  GroupedHeadingProps
+>(({ className, ...rest }, ref) => (
+  <dt
+    {...rest}
+    ref={ref}
+    className={cl(
+      "navds-dropdown__list-heading",
+      "navds-heading",
+      "navds-heading--xsmall",
+      className
+    )}
+  />
+));
 
 export default GroupedHeading;

package/src/dropdown/Menu/GroupedList/Item.tsx

@@ -11,35 +11,31 @@ export interface GroupedItemProps
   children: React.ReactNode;
 }
 
-export type GroupedItemType = OverridableComponent<
+export const GroupedItem: OverridableComponent<
   GroupedItemProps,
   HTMLButtonElement
->;
+> = forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
+  const context = useContext(DropdownContext);
 
-export const GroupedItem: GroupedItemType = forwardRef(
-  ({ as: Component = "button", className, ...rest }, ref) => {
-    const context = useContext(DropdownContext);
-
-    return (
-      <dd className="navds-dropdown__list-item">
-        <Component
-          {...rest}
-          value={rest.children}
-          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            context?.onSelect?.(event);
-            rest?.onClick?.(event);
-          }}
-          ref={ref}
-          className={cl(
-            "navds-dropdown__item",
-            "navds-body-short",
-            "navds-body-short--small",
-            className
-          )}
-        />
-      </dd>
-    );
-  }
-);
+  return (
+    <dd className="navds-dropdown__list-item">
+      <Component
+        {...rest}
+        value={rest.children}
+        onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          context?.onSelect?.(event);
+          rest?.onClick?.(event);
+        }}
+        ref={ref}
+        className={cl(
+          "navds-dropdown__item",
+          "navds-body-short",
+          "navds-body-short--small",
+          className
+        )}
+      />
+    </dd>
+  );
+});
 
 export default GroupedItem;

package/src/dropdown/Menu/GroupedList/index.tsx

@@ -1,7 +1,8 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import GroupedHeading, { GroupedHeadingType } from "./Heading";
-import GroupedItem, { GroupedItemType } from "./Item";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../../util/OverridableComponent";
+import GroupedHeading, { GroupedHeadingProps } from "./Heading";
+import GroupedItem, { GroupedItemProps } from "./Item";
 
 export interface GroupedListProps
   extends React.HTMLAttributes<HTMLDListElement> {
@@ -15,8 +16,17 @@ export interface GroupedListType
   extends React.ForwardRefExoticComponent<
     GroupedListProps & React.RefAttributes<HTMLDListElement>
   > {
-  Heading: GroupedHeadingType;
-  Item: GroupedItemType;
+  /**
+   * @see 🏷️ {@link GroupedHeadingProps}
+   */
+  Heading: React.ForwardRefExoticComponent<
+    GroupedHeadingProps & React.RefAttributes<HTMLDetailsElement>
+  >;
+  /**
+   * @see 🏷️ {@link GroupedItemProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Item: OverridableComponent<GroupedItemProps, HTMLButtonElement>;
 }
 
 export const DescriptionList = forwardRef(

package/src/dropdown/Menu/List/Item.tsx

@@ -10,13 +10,8 @@ export interface ListItemProps extends React.ButtonHTMLAttributes<HTMLElement> {
   children: React.ReactNode;
 }
 
-export type ListItemType = OverridableComponent<
-  ListItemProps,
-  HTMLButtonElement
->;
-
-export const ListItem: ListItemType = forwardRef(
-  ({ as: Component = "button", className, ...rest }, ref) => {
+export const ListItem: OverridableComponent<ListItemProps, HTMLButtonElement> =
+  forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
     const context = useContext(DropdownContext);
 
     return (
@@ -38,7 +33,6 @@ export const ListItem: ListItemType = forwardRef(
         />
       </li>
     );
-  }
-);
+  });
 
 export default ListItem;

package/src/dropdown/Menu/List/index.tsx

@@ -1,6 +1,7 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import ListItem, { ListItemType } from "./Item";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../../util/OverridableComponent";
+import ListItem, { ListItemProps } from "./Item";
 
 export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
   /**
@@ -13,7 +14,11 @@ export interface ListType
   extends React.ForwardRefExoticComponent<
     ListProps & React.RefAttributes<HTMLUListElement>
   > {
-  Item: ListItemType;
+  /**
+   * @see 🏷️ {@link ListItemProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Item: OverridableComponent<ListItemProps, HTMLButtonElement>;
 }
 
 export const List = forwardRef(({ className, children, ...rest }, ref) => (

package/src/dropdown/Menu/index.tsx

@@ -1,8 +1,8 @@
-import { Popover } from "../../popover";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
+import { Popover } from "../../popover";
 import { DropdownContext } from "../Dropdown";
-import Divider, { DividerType } from "./Divider";
+import Divider from "./Divider";
 import GroupedList, { GroupedListType } from "./GroupedList";
 import List, { ListType } from "./List";
 
@@ -43,9 +43,20 @@ export interface MenuType<Props = MenuProps>
   extends React.ForwardRefExoticComponent<
     Props & React.RefAttributes<HTMLDivElement>
   > {
+  /**
+   * @see 🏷️ {@link ListType}
+   */
   List: ListType;
+  /**
+   * @see 🏷️ {@link GroupedListType}
+   */
   GroupedList: GroupedListType;
-  Divider: DividerType;
+  /**
+   * @see 🏷️ {@link React.HTMLAttributes<HTMLHRElement>}
+   */
+  Divider: React.ForwardRefExoticComponent<
+    React.HTMLAttributes<HTMLHRElement> & React.RefAttributes<HTMLHRElement>
+  >;
 }
 
 export const Menu = forwardRef<HTMLDivElement, MenuProps>(

package/src/dropdown/Toggle.tsx

@@ -10,11 +10,7 @@ export interface ToggleProps
   children: React.ReactNode;
 }
 
-export type ToggleType = React.ForwardRefExoticComponent<
-  ToggleProps & React.RefAttributes<HTMLButtonElement>
->;
-
-export const Toggle: ToggleType = forwardRef(
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
   ({ className, onClick, ...rest }, ref) => {
     const context = useContext(DropdownContext);
 

package/src/expansion-card/ExpansionCard.tsx

@@ -1,28 +1,48 @@
 import cl from "clsx";
 import React, { createContext, forwardRef, useRef, useState } from "react";
+import { OverridableComponent } from "../util/OverridableComponent";
 import ExpansionCardContent, {
-  ExpansionCardContentType,
+  ExpansionCardContentProps,
 } from "./ExpansionCardContent";
 import {
   ExpansionCardDescription,
-  ExpansionCardDescriptionType,
+  ExpansionCardDescriptionProps,
 } from "./ExpansionCardDescription";
 import ExpansionCardHeader, {
-  ExpansionCardHeaderType,
+  ExpansionCardHeaderProps,
 } from "./ExpansionCardHeader";
 import {
   ExpansionCardTitle,
-  ExpansionCardTitleType,
+  ExpansionCardTitleProps,
 } from "./ExpansionCardTitle";
 
 interface ExpansionCardComponent
   extends React.ForwardRefExoticComponent<
     ExpansionCardProps & React.RefAttributes<HTMLDivElement>
   > {
-  Header: ExpansionCardHeaderType;
-  Title: ExpansionCardTitleType;
-  Description: ExpansionCardDescriptionType;
-  Content: ExpansionCardContentType;
+  /**
+   * @see 🏷️ {@link ExpansionCardHeaderProps}
+   */
+  Header: React.ForwardRefExoticComponent<
+    ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
+  >;
+  /**
+   * @see 🏷️ {@link ExpansionCardTitleProps}
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   */
+  Title: OverridableComponent<ExpansionCardTitleProps, HTMLHeadingElement>;
+  /**
+   * @see 🏷️ {@link ExpansionCardDescriptionProps}
+   */
+  Description: React.ForwardRefExoticComponent<
+    ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
+  >;
+  /**
+   * @see 🏷️ {@link ExpansionCardContentProps}
+   */
+  Content: React.ForwardRefExoticComponent<
+    ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
+  >;
 }
 
 interface ExpansionCardCommonProps
@@ -77,6 +97,24 @@ export const ExpansionCardContext = createContext<ExpansionCardContextProps>({
 export type ExpansionCardProps = ExpansionCardCommonProps &
   ExpansionCardConditionalProps;
 
+/**
+ * A component that displays an expandable card.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/expansioncard)
+ * @see 🏷️ {@link ExpansionCardProps}
+ *
+ * @example
+ * ```jsx
+ * <ExpansionCard aria-label="default-demo">
+ *   <ExpansionCard.Header>
+ *     <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title>
+ *   </ExpansionCard.Header>
+ *   <ExpansionCard.Content>
+ *     <Innhold />
+ *   </ExpansionCard.Content>
+ * </ExpansionCard>
+ * ```
+ */
 export const ExpansionCard = forwardRef<HTMLDivElement, ExpansionCardProps>(
   (
     {

package/src/expansion-card/ExpansionCardContent.tsx

@@ -8,36 +8,33 @@ export interface ExpansionCardContentProps
   children: React.ReactNode;
 }
 
-export type ExpansionCardContentType = React.ForwardRefExoticComponent<
-  ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>
->;
+const ExpansionCardContent = forwardRef<
+  HTMLDivElement,
+  ExpansionCardContentProps
+>(({ children, className, ...rest }, ref) => {
+  const panelContext = useContext(ExpansionCardContext);
 
-const ExpansionCardContent: ExpansionCardContentType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const panelContext = useContext(ExpansionCardContext);
-
-    if (panelContext === null) {
-      console.error(
-        "<ExpansionCard.Content> has to be used within an <ExpansionCard>"
-      );
-      return null;
-    }
-
-    return (
-      <BodyLong
-        {...rest}
-        ref={ref}
-        as="div"
-        className={cl("navds-expansioncard__content", className, {
-          "navds-expansioncard__content--closed": !panelContext.open,
-        })}
-        aria-hidden={!panelContext.open}
-        size={panelContext.size}
-      >
-        <div className="navds-expansioncard__content-inner">{children}</div>
-      </BodyLong>
+  if (panelContext === null) {
+    console.error(
+      "<ExpansionCard.Content> has to be used within an <ExpansionCard>"
     );
+    return null;
   }
-);
+
+  return (
+    <BodyLong
+      {...rest}
+      ref={ref}
+      as="div"
+      className={cl("navds-expansioncard__content", className, {
+        "navds-expansioncard__content--closed": !panelContext.open,
+      })}
+      aria-hidden={!panelContext.open}
+      size={panelContext.size}
+    >
+      <div className="navds-expansioncard__content-inner">{children}</div>
+    </BodyLong>
+  );
+});
 
 export default ExpansionCardContent;

package/src/expansion-card/ExpansionCardDescription.tsx

@@ -3,33 +3,31 @@ import cl from "clsx";
 import { BodyLong } from "../typography/BodyLong";
 import { ExpansionCardContext } from "./ExpansionCard";
 
-interface ExpansionCardDescriptionProps
+export interface ExpansionCardDescriptionProps
   extends React.HTMLAttributes<HTMLParagraphElement> {
   children: React.ReactNode;
 }
 
-export type ExpansionCardDescriptionType = React.ForwardRefExoticComponent<
-  ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>
->;
+export const ExpansionCardDescription = forwardRef<
+  HTMLParagraphElement,
+  ExpansionCardDescriptionProps
+>(({ className, ...rest }, ref) => {
+  const panelContext = useContext(ExpansionCardContext);
 
-export const ExpansionCardDescription: ExpansionCardDescriptionType =
-  forwardRef(({ className, ...rest }, ref) => {
-    const panelContext = useContext(ExpansionCardContext);
-
-    if (panelContext === null) {
-      console.error(
-        "<ExpansionCard.Description> has to be used within an <ExpansionCard>"
-      );
-      return null;
-    }
-
-    return (
-      <BodyLong
-        {...rest}
-        as="p"
-        ref={ref}
-        className={cl("navds-link-panel__description", className)}
-        size={panelContext.size}
-      />
+  if (panelContext === null) {
+    console.error(
+      "<ExpansionCard.Description> has to be used within an <ExpansionCard>"
     );
-  });
+    return null;
+  }
+
+  return (
+    <BodyLong
+      {...rest}
+      as="p"
+      ref={ref}
+      className={cl("navds-link-panel__description", className)}
+      size={panelContext.size}
+    />
+  );
+});

package/src/expansion-card/ExpansionCardHeader.tsx

@@ -8,43 +8,40 @@ export interface ExpansionCardHeaderProps
   children: React.ReactNode;
 }
 
-export type ExpansionCardHeaderType = React.ForwardRefExoticComponent<
-  ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>
->;
+const ExpansionCardHeader = forwardRef<
+  HTMLDivElement,
+  ExpansionCardHeaderProps
+>(({ children, className, ...rest }, ref) => {
+  const panelContext = useContext(ExpansionCardContext);
 
-const ExpansionCardHeader: ExpansionCardHeaderType = forwardRef(
-  ({ children, className, ...rest }, ref) => {
-    const panelContext = useContext(ExpansionCardContext);
+  if (panelContext === null) {
+    console.error(
+      "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
+    );
+    return null;
+  }
 
-    if (panelContext === null) {
-      console.error(
-        "<ExpansionCard.Header> has to be used within an <ExpansionCard>"
-      );
-      return null;
-    }
+  return (
+    <div
+      ref={ref}
+      {...rest}
+      className={cl("navds-expansioncard__header", className)}
+    >
+      <div className="navds-expansioncard__header-content">{children}</div>
 
-    return (
-      <div
-        ref={ref}
-        {...rest}
-        className={cl("navds-expansioncard__header", className)}
+      <button
+        className="navds-expansioncard__header-button"
+        onClick={() => panelContext.toggleOpen()}
+        type="button"
+        aria-expanded={panelContext.open}
       >
-        <div className="navds-expansioncard__header-content">{children}</div>
-
-        <button
-          className="navds-expansioncard__header-button"
-          onClick={() => panelContext.toggleOpen()}
-          type="button"
-          aria-expanded={panelContext.open}
-        >
-          <ChevronDownIcon
-            className="navds-expansioncard__header-chevron"
-            title="Vis mer"
-          />
-        </button>
-      </div>
-    );
-  }
-);
+        <ChevronDownIcon
+          className="navds-expansioncard__header-chevron"
+          title="Vis mer"
+        />
+      </button>
+    </div>
+  );
+});
 
 export default ExpansionCardHeader;

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from "react";
 import cl from "clsx";
 import { OverridableComponent } from "../util/OverridableComponent";
 
-interface ExpansionCardTitleProps
+export interface ExpansionCardTitleProps
   extends React.HTMLAttributes<HTMLHeadingElement> {
   children: React.ReactNode;
   /**
@@ -12,12 +12,10 @@ interface ExpansionCardTitleProps
   size?: "large" | "medium" | "small";
 }
 
-export type ExpansionCardTitleType = OverridableComponent<
+export const ExpansionCardTitle: OverridableComponent<
   ExpansionCardTitleProps,
   HTMLHeadingElement
->;
-
-export const ExpansionCardTitle: ExpansionCardTitleType = forwardRef(
+> = forwardRef(
   ({ className, as: Component = "h3", size = "medium", ...rest }, ref) => (
     <Component
       {...rest}

package/src/form/ConfirmationPanel.tsx

@@ -26,6 +26,24 @@ export interface ConfirmationPanelProps
   errorId?: string;
 }
 
+/**
+ * A component that displays a confirmation checkbox with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/confirmationpanel)
+ * @see 🏷️ {@link ConfirmationPanelProps}
+ *
+ * @example
+ * ```jsx
+      <ConfirmationPanel
+        checked={state}
+        label="Ja, jeg samtykker."
+        onChange={() => setState((x) => !x)}
+      >
+        For å komme videre må du gi oss lov til å hente inn og bruke opplysninger
+        om deg.
+      </ConfirmationPanel>
+ * ```
+ */
 export const ConfirmationPanel = forwardRef<
   HTMLInputElement,
   ConfirmationPanelProps

package/src/form/Select.tsx

@@ -30,6 +30,22 @@ export interface SelectProps
   style?: React.CSSProperties;
 }
 
+/**
+ * A component that displays a select input field.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/select)
+ * @see 🏷️ {@link SelectProps}
+ *
+ * @example
+ * ```jsx
+ * <Select label="Hvilket land har du bosted i.">
+ *   <option value="">Velg land</option>
+ *   <option value="norge">Norge</option>
+ *   <option value="sverige">Sverige</option>
+ *   <option value="danmark">Danmark</option>
+ * </Select>
+ * ```
+ */
 export const Select = forwardRef<HTMLSelectElement, SelectProps>(
   (props, ref) => {
     const {

package/src/form/Switch.tsx

@@ -55,6 +55,17 @@ export interface SwitchProps
   description?: string;
 }
 
+/**
+ * A component that displays a switch input field.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/switch)
+ * @see 🏷️ {@link SwitchProps}
+ *
+ * @example
+ * ```jsx
+ * <Switch>Slå på notifikasjoner</Switch>
+ * ```
+ */
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
   (props, ref) => {
     const { inputProps, size } = useFormField(props, "switch");

package/src/form/TextField.tsx

@@ -33,6 +33,17 @@ export interface TextFieldProps
   type?: "email" | "number" | "password" | "tel" | "text" | "url";
 }
 
+/**
+ * A component that displays a text input field with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/textfield)
+ * @see 🏷️ {@link TextFieldProps}
+ *
+ * @example
+ * ```jsx
+ * <TextField label="Har du noen tilbakemeldinger?" />
+ * ```
+ */
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (props, ref) => {
     const {

package/src/form/Textarea.tsx

@@ -55,6 +55,17 @@ export interface TextareaProps
   };
 }
 
+/**
+ * A component that displays a textarea input field with a label.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/textarea)
+ * @see 🏷️ {@link TextareaProps}
+ *
+ * @example
+ * ```jsx
+ * <Textarea label="Har du noen tilbakemeldinger?" />
+ * ```
+ */
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   (props, ref) => {
     const {

package/src/form/checkbox/CheckboxGroup.tsx

@@ -35,6 +35,21 @@ export interface CheckboxGroupProps
   onChange?: (value: any[]) => void;
 }
 
+/**
+ * A component that allows users to select one or more options from a list.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/checkbox)
+ * @see 🏷️ {@link CheckboxProps}
+ *
+ * @example
+ * ```jsx
+ * <CheckboxGroup legend="Hvor vil du sitte?">
+ *   <Checkbox value="Bakerst">Bakerst</Checkbox>
+ *   <Checkbox value="Midterst">Midterst</Checkbox>
+ *   <Checkbox value="Fremst">Fremst</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ */
 export const CheckboxGroup = forwardRef<
   HTMLFieldSetElement,
   CheckboxGroupProps