@navikt/ds-react 8.1.0 → 8.2.1

package/src/date/monthpicker/index.ts

@@ -1,9 +1,11 @@
 "use client";
 export { useMonthpicker, type MonthValidationT } from "./hooks/useMonthPicker";
-export { default as MonthPicker } from "./MonthPicker";
-export type { MonthPickerProps } from "./MonthPicker.types";
 export {
+  default as MonthPicker,
   MonthPickerStandalone,
-  type MonthPickerStandaloneProps,
-} from "./parts/MonthPicker.Standalone";
-export { MonthPickerInput } from "../Date.Input";
+  MonthPickerInput,
+} from "./MonthPicker";
+export type {
+  MonthPickerProps,
+  MonthPickerStandaloneProps,
+} from "./MonthPicker";

package/src/dialog/index.ts

@@ -1,19 +1,23 @@
 "use client";
-export { default as Dialog } from "./root/DialogRoot";
-export type { DialogProps } from "./root/DialogRoot";
-export { DialogTrigger } from "./trigger/DialogTrigger";
-export type { DialogTriggerProps } from "./trigger/DialogTrigger";
-export { DialogPopup } from "./popup/DialogPopup";
-export type { DialogPopupProps } from "./popup/DialogPopup";
-export { DialogCloseTrigger } from "./close-trigger/DialogCloseTrigger";
-export type { DialogCloseTriggerProps } from "./close-trigger/DialogCloseTrigger";
-export { DialogHeader } from "./header/DialogHeader";
-export type { DialogHeaderProps } from "./header/DialogHeader";
-export { DialogFooter } from "./footer/DialogFooter";
-export type { DialogFooterProps } from "./footer/DialogFooter";
-export { DialogTitle } from "./title/DialogTitle";
-export type { DialogTitleProps } from "./title/DialogTitle";
-export { DialogDescription } from "./description/DialogDescription";
-export type { DialogDescriptionProps } from "./description/DialogDescription";
-export { DialogBody } from "./body/DialogBody";
-export type { DialogBodyProps } from "./body/DialogBody";
+export {
+  default as Dialog,
+  DialogTrigger,
+  DialogPopup,
+  DialogCloseTrigger,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+} from "./root/DialogRoot";
+export type {
+  DialogProps,
+  DialogTriggerProps,
+  DialogPopupProps,
+  DialogCloseTriggerProps,
+  DialogHeaderProps,
+  DialogFooterProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogBodyProps,
+} from "./root/DialogRoot";

package/src/dialog/root/DialogRoot.tsx

@@ -5,14 +5,20 @@ import {
   useEventCallback,
   useTransitionStatus,
 } from "../../utils/hooks";
-import { DialogBody } from "../body/DialogBody";
-import { DialogCloseTrigger } from "../close-trigger/DialogCloseTrigger";
-import { DialogDescription } from "../description/DialogDescription";
-import { DialogFooter } from "../footer/DialogFooter";
-import { DialogHeader } from "../header/DialogHeader";
-import { DialogPopup } from "../popup/DialogPopup";
-import { DialogTitle } from "../title/DialogTitle";
-import { DialogTrigger } from "../trigger/DialogTrigger";
+import { DialogBody, DialogBodyProps } from "../body/DialogBody";
+import {
+  DialogCloseTrigger,
+  DialogCloseTriggerProps,
+} from "../close-trigger/DialogCloseTrigger";
+import {
+  DialogDescription,
+  DialogDescriptionProps,
+} from "../description/DialogDescription";
+import { DialogFooter, DialogFooterProps } from "../footer/DialogFooter";
+import { DialogHeader, DialogHeaderProps } from "../header/DialogHeader";
+import { DialogPopup, DialogPopupProps } from "../popup/DialogPopup";
+import { DialogTitle, DialogTitleProps } from "../title/DialogTitle";
+import { DialogTrigger, DialogTriggerProps } from "../trigger/DialogTrigger";
 import { DialogContextProvider, useDialogContext } from "./DialogRoot.context";
 
 interface DialogProps {
@@ -56,6 +62,7 @@ interface DialogComponent extends React.FC<DialogProps> {
    * ```
    */
   Trigger: typeof DialogTrigger;
+
   /**
    * @see 🏷️ {@link DialogCloseTriggerProps}
    * @example
@@ -70,6 +77,7 @@ interface DialogComponent extends React.FC<DialogProps> {
    * ```
    */
   CloseTrigger: typeof DialogCloseTrigger;
+
   /**
    * @see 🏷️ {@link DialogPopupProps}
    * @example
@@ -295,4 +303,24 @@ Dialog.Footer = DialogFooter;
 Dialog.Popup = DialogPopup;
 
 export default Dialog;
-export type { DialogProps };
+export {
+  DialogTrigger,
+  DialogCloseTrigger,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+  DialogPopup,
+};
+export type {
+  DialogProps,
+  DialogTriggerProps,
+  DialogCloseTriggerProps,
+  DialogHeaderProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogBodyProps,
+  DialogFooterProps,
+  DialogPopupProps,
+};

package/src/form/file-upload/FileUpload.tsx

@@ -14,10 +14,9 @@ interface FileUploadProps extends HTMLAttributes<HTMLDivElement> {
   translations?: ComponentTranslation<"FileUpload">;
 }
 
-interface FileUploadComponent
-  extends React.ForwardRefExoticComponent<
-    FileUploadProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface FileUploadComponent extends React.ForwardRefExoticComponent<
+  FileUploadProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * Framed area to drag-n-drop files, upload files with button-click or copy-paste.
    * @example
@@ -64,7 +63,7 @@ interface FileUploadComponent
    * Multiple items can be semantically grouped as a list.
    * ```jsx
    * <FileUpload>
-   *   <VStack gap="4" as="ul">
+   *   <VStack gap="space-16" as="ul">
    *     <FileUpload.Item as="li" file={file} />
    *     <FileUpload.Item as="li" file={file2} />
    *     <FileUpload.Item as="li" file={file3} status="uploading" />
@@ -117,7 +116,7 @@ interface FileUploadComponent
  * @example
  * Items
  * ```jsx
- * <VStack gap="4" as="ul">
+ * <VStack gap="space-16" as="ul">
  *   <FileUpload.Item as="li" file={myFile} />
  *   <FileUpload.Item as="li" file={mySecondFile} />
  * </VStack>

package/src/form/search/Search.tsx

@@ -18,6 +18,11 @@ import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 import { SearchContext } from "./context";
 
+export type SearchNativeProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "size" | "onChange" | "type"
+>;
+
 export type SearchClearEvent =
   | {
       trigger: "Click";
@@ -26,8 +31,7 @@ export type SearchClearEvent =
   | { trigger: "Escape"; event: React.KeyboardEvent<HTMLDivElement> };
 
 export interface SearchProps
-  extends Omit<FormFieldProps, "readOnly">,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
+  extends Omit<FormFieldProps, "readOnly">, SearchNativeProps {
   children?: React.ReactNode;
   /**
    * Search label.
@@ -82,10 +86,9 @@ export interface SearchProps
   "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
-interface SearchComponent
-  extends React.ForwardRefExoticComponent<
-    SearchProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface SearchComponent extends React.ForwardRefExoticComponent<
+  SearchProps & React.RefAttributes<HTMLDivElement>
+> {
   Button: SearchButtonType;
 }
 

package/src/internal-header/InternalHeader.tsx

@@ -1,6 +1,5 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { Theme } from "../theme/Theme";
-import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 import InternalHeaderButton, {
   InternalHeaderButtonProps,
@@ -15,38 +14,32 @@ import InternalHeaderUserButton, {
   InternalHeaderUserButtonProps,
 } from "./InternalHeaderUserButton";
 
-export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
+interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
   children: React.ReactNode;
 }
 
-interface InternalHeaderComponent
-  extends React.ForwardRefExoticComponent<
-    InternalHeaderProps & React.RefAttributes<HTMLElement>
-  > {
+interface InternalHeaderComponent extends React.ForwardRefExoticComponent<
+  InternalHeaderProps & React.RefAttributes<HTMLElement>
+> {
   /**
    * @see 🏷️ {@link InternalHeaderTitleProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Title: OverridableComponent<InternalHeaderTitleProps, HTMLAnchorElement>;
+  Title: typeof InternalHeaderTitle;
   /**
    * @see 🏷️ {@link InternalHeaderUserProps}
    */
-  User: React.ForwardRefExoticComponent<
-    InternalHeaderUserProps & React.RefAttributes<HTMLDivElement>
-  >;
+  User: typeof InternalHeaderUser;
   /**
    * @see 🏷️ {@link InternalHeaderButtonProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Button: OverridableComponent<InternalHeaderButtonProps, HTMLButtonElement>;
+  Button: typeof InternalHeaderButton;
   /**
    * @see 🏷️ {@link InternalHeaderUserButtonProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  UserButton: OverridableComponent<
-    InternalHeaderUserButtonProps,
-    HTMLButtonElement
-  >;
+  UserButton: typeof InternalHeaderUserButton;
 }
 
 /**
@@ -67,14 +60,13 @@ interface InternalHeaderComponent
  * ```jsx
  * <InternalHeader >
  *  <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
- *  <Dropdown>
- *    <InternalHeader.Button
- *      as={Dropdown.Toggle}
- *    >
+ *  <ActionMenu>
+ *   <ActionMenu.Trigger>
+ *    <InternalHeader.Button>
  *      <MenuGridIcon title="MenuGridIconer og oppslagsverk" />
  *    </InternalHeader.Button>
- *    <Dropdown.Menu />
- *  </Dropdown>
+ *   </ActionMenu.Trigger>
+ *  </ActionMenu>
  * </InternalHeader>
  * ```
  */
@@ -99,3 +91,16 @@ InternalHeader.Button = InternalHeaderButton;
 InternalHeader.UserButton = InternalHeaderUserButton;
 
 export default InternalHeader;
+export {
+  InternalHeaderTitle,
+  InternalHeaderUser,
+  InternalHeaderButton,
+  InternalHeaderUserButton,
+};
+export type {
+  InternalHeaderProps,
+  InternalHeaderTitleProps,
+  InternalHeaderUserProps,
+  InternalHeaderButtonProps,
+  InternalHeaderUserButtonProps,
+};

package/src/internal-header/index.ts

@@ -1,21 +1,15 @@
 "use client";
 export {
   default as InternalHeader,
-  type InternalHeaderProps,
+  InternalHeaderButton,
+  InternalHeaderTitle,
+  InternalHeaderUser,
+  InternalHeaderUserButton,
+} from "./InternalHeader";
+export type {
+  InternalHeaderProps,
+  InternalHeaderButtonProps,
+  InternalHeaderTitleProps,
+  InternalHeaderUserProps,
+  InternalHeaderUserButtonProps,
 } from "./InternalHeader";
-export {
-  default as InternalHeaderButton,
-  type InternalHeaderButtonProps,
-} from "./InternalHeaderButton";
-export {
-  default as InternalHeaderTitle,
-  type InternalHeaderTitleProps,
-} from "./InternalHeaderTitle";
-export {
-  default as InternalHeaderUser,
-  type InternalHeaderUserProps,
-} from "./InternalHeaderUser";
-export {
-  default as InternalHeaderUserButton,
-  type InternalHeaderUserButtonProps,
-} from "./InternalHeaderUserButton";

package/src/layout/bleed/Bleed.tsx

@@ -61,7 +61,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <Box padding="4">
+ * <Box padding="space-16">
  *   <Bleed marginInline="space-16" marginBlock="space-16">
  *     <BodyLong>Some content</BodyLong>
  *   </Bleed>

package/src/layout/responsive/Responsive.tsx

@@ -65,14 +65,14 @@ const Responsive = forwardRef<
  * @see 🏷️ {@link ResponsiveProps}
  *
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Hide below="md" asChild>
  *      // Only visible above "md"
  *   </Hide>
  * </HGrid>
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Hide above="md" asChild>
  *      // Only visible below "md"
@@ -90,14 +90,14 @@ export const Hide = forwardRef<HTMLDivElement, ResponsiveProps>(
  * @see 🏷️ {@link ResponsiveProps}
  *
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Show below="md" asChild>
  *      // Only visible below "md"
  *   </Show>
  * </HGrid>
  * @example
- * <HGrid columns={{ xs: 1, md: 2 }} gap="4">
+ * <HGrid columns={{ xs: 1, md: 2 }} gap="space-16">
  *   <div/>
  *   <Show above="md" asChild>
  *      // Only visible above "md"

package/src/layout/stack/HStack.tsx

@@ -13,14 +13,14 @@ export type HStackProps = PrimitiveAsChildProps & Omit<StackProps, "direction">;
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <HStack gap="8">
+ * <HStack gap="space-32">
  *  <MyComponent />
  *  <MyComponent />
  * </HStack>
  *
  * @example
  * // Responsive gap
- * <HStack gap={{xs: "2", md: "6"}}>
+ * <HStack gap={{xs: "space-8", md: "space-24"}}>
  *  <MyComponent />
  *  <MyComponent />
  * </HStack>

package/src/layout/stack/Spacer.tsx

@@ -6,7 +6,7 @@ import React from "react";
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/hstack)
  *
  * @example
- * <HStack gap="8">
+ * <HStack gap="space-32">
  *  <MyComponent />
  *  <Spacer />
  *  <MyComponent />

package/src/layout/stack/VStack.tsx

@@ -14,14 +14,14 @@ export type VStackProps = PrimitiveAsChildProps &
  * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
  *
  * @example
- * <VStack gap="8">
+ * <VStack gap="space-32">
  *  <MyComponent />
  *  <MyComponent />
  * </VStack>
  *
  * @example
  * // Responsive gap
- * <VStack gap={{xs: "2", md: "6"}}>
+ * <VStack gap={{xs: "space-8", md: "space-24"}}>
  *  <MyComponent />
  *  <MyComponent />
  * </VStack>

package/src/link-panel/LinkPanel.tsx

@@ -9,8 +9,7 @@ import {
 } from "./LinkPanelDescription";
 import { LinkPanelTitle, LinkPanelTitleProps } from "./LinkPanelTitle";
 
-export interface LinkPanelProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkPanelProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
    * Panel content
    */
@@ -22,10 +21,12 @@ export interface LinkPanelProps
   border?: boolean;
 }
 
-interface LinkPanelComponentType
-  extends OverridableComponent<LinkPanelProps, HTMLAnchorElement> {
+interface LinkPanelComponentType extends OverridableComponent<
+  LinkPanelProps,
+  HTMLAnchorElement
+> {
   /**
-   * @see 🏷️ {@link LinkPanelDescriptionProps}
+   * @see 🏷️ {@link LinkPanelTitleProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
   Title: OverridableComponent<LinkPanelTitleProps, HTMLDivElement>;

package/src/list/List.tsx

@@ -3,13 +3,11 @@ import { BodyLong } from "../typography";
 import { cl } from "../utils/helpers";
 import { ListItem } from "./List.Item";
 import { ListContext } from "./List.context";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { ListItemProps, ListProps } from "./List.types";
 
-export interface ListComponent
-  extends React.ForwardRefExoticComponent<
-    ListProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface ListComponent extends React.ForwardRefExoticComponent<
+  ListProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link ListItemProps}
    */
@@ -78,3 +76,5 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
 List.Item = ListItem;
 
 export default List;
+export { ListItem };
+export type { ListProps, ListItemProps };

package/src/list/index.ts

@@ -1,4 +1,3 @@
 "use client";
-export { default as List } from "./List";
-export type { ListProps, ListItemProps } from "./List.types";
-export { default as ListItem } from "./List.Item";
+export { default as List, ListItem } from "./List";
+export type { ListProps, ListItemProps } from "./List";