@navikt/ds-react 5.6.4 → 5.7.0

package/src/modal/types.ts

@@ -0,0 +1,64 @@
+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;
+}

package/src/pagination/Pagination.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { BodyShort } from "..";
+import { BodyShort } from "../typography";
 import PaginationItem, {
   PaginationItemProps,
   PaginationItemType,

package/src/pagination/PaginationItem.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { Button, ButtonProps, OverridableComponent } from "..";
+import { Button, ButtonProps } from "../button";
+import { OverridableComponent } from "../util";
 
 export interface PaginationItemProps extends ButtonProps {
   children: React.ReactNode;

package/src/popover/Popover.tsx

@@ -14,14 +14,13 @@ import React, {
   HTMLAttributes,
   forwardRef,
   useCallback,
+  useContext,
   useMemo,
   useRef,
-  useContext,
 } from "react";
-import { mergeRefs } from "..";
-import { useClientLayoutEffect, useEventListener } from "../util";
-import PopoverContent, { PopoverContentType } from "./PopoverContent";
 import { ModalContext } from "../modal/ModalContext";
+import { mergeRefs, useClientLayoutEffect, useEventListener } from "../util";
+import PopoverContent, { PopoverContentType } from "./PopoverContent";
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -79,6 +78,11 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    * @default false
    */
   bubbleEscape?: boolean;
+  /**
+   * Changes placement of the floating element in order to keep it in view.
+   * @default true
+   */
+  flip?: boolean;
 }
 
 interface PopoverComponent
@@ -121,6 +125,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       offset,
       strategy: userStrategy,
       bubbleEscape = false,
+      flip: _flip = true,
       ...rest
     },
     ref
@@ -145,7 +150,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       onOpenChange: () => onClose(),
       middleware: [
         flOffset(offset ?? (arrow ? 16 : 4)),
-        flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
+        _flip && flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         shift({ padding: 12 }),
         flArrow({ element: arrowRef, padding: 8 }),
       ],

package/src/stepper/Step.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { Label, OverridableComponent } from "..";
-import { StepperContext } from "./Stepper";
+import { Label } from "../typography";
+import { OverridableComponent } from "../util";
+import { StepperContext } from "./context";
 
 export interface StepperStepProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {

package/src/stepper/Stepper.tsx

@@ -1,7 +1,7 @@
-import React, { createContext, forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import Step, { StepperStepProps } from "./Step";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { StepperContext } from "./context";
 
 export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   /**
@@ -38,19 +38,9 @@ interface StepperComponent
    * @see 🏷️ {@link StepperStepProps}
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    */
-  Step: OverridableComponent<StepperStepProps, HTMLAnchorElement>;
+  Step: typeof Step;
 }
 
-interface StepperContextProps {
-  activeStep: number;
-  onStepChange: (step: number) => void;
-  lastIndex: number;
-  orientation: "horizontal" | "vertical";
-  interactive: boolean;
-}
-
-export const StepperContext = createContext<StepperContextProps | null>(null);
-
 /**
  * A component that displays a stepper with clickable steps.
  *

package/src/stepper/context.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+interface StepperContextProps {
+  activeStep: number;
+  onStepChange: (step: number) => void;
+  lastIndex: number;
+  orientation: "horizontal" | "vertical";
+  interactive: boolean;
+}
+
+export const StepperContext = createContext<StepperContextProps | null>(null);

package/src/table/ColumnHeader.tsx

@@ -1,11 +1,11 @@
-import React, { forwardRef, useContext } from "react";
-import { TableContext } from "./Table";
-import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 import {
   ArrowDownIcon,
   ArrowUpIcon,
   ArrowsUpDownIcon,
 } from "@navikt/aksel-icons";
+import React, { forwardRef, useContext } from "react";
+import HeaderCell, { HeaderCellProps } from "./HeaderCell";
+import { TableContext } from "./context";
 
 export interface ColumnHeaderProps extends HeaderCellProps {
   /**

package/src/table/DataCell.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { BodyShort } from "..";
+import { BodyShort } from "../typography";
 
 export interface DataCellProps
   extends React.TdHTMLAttributes<HTMLTableCellElement> {

package/src/table/ExpandableRow.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
-import { useId } from "..";
+import { useId } from "../util";
 import AnimateHeight from "../util/AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";

package/src/table/Table.tsx

@@ -1,17 +1,14 @@
-import React, { createContext, forwardRef } from "react";
 import cl from "clsx";
-import Header, { HeaderType } from "./Header";
-import Body, { BodyType } from "./Body";
-import Row, { RowType } from "./Row";
-import ColumnHeader, { ColumnHeaderType } from "./ColumnHeader";
-import HeaderCell, { HeaderCellType } from "./HeaderCell";
-import DataCell, { DataCellType } from "./DataCell";
-import ExpandableRow, { ExpandableRowType } from "./ExpandableRow";
-
-export interface SortState {
-  orderBy: string;
-  direction: "ascending" | "descending";
-}
+import React, { forwardRef } from "react";
+import Body from "./Body";
+import ColumnHeader from "./ColumnHeader";
+import DataCell from "./DataCell";
+import ExpandableRow from "./ExpandableRow";
+import Header from "./Header";
+import HeaderCell from "./HeaderCell";
+import Row from "./Row";
+import { TableContext } from "./context";
+import { SortState } from "./types";
 
 export interface TableProps
   extends React.TableHTMLAttributes<HTMLTableElement> {
@@ -39,22 +36,15 @@ export interface TableType
   extends React.ForwardRefExoticComponent<
     TableProps & React.RefAttributes<HTMLTableElement>
   > {
-  Header: HeaderType;
-  Body: BodyType;
-  Row: RowType;
-  DataCell: DataCellType;
-  HeaderCell: HeaderCellType;
-  ColumnHeader: ColumnHeaderType;
-  ExpandableRow: ExpandableRowType;
-}
-
-export interface TableContextProps {
-  onSortChange?: (sortKey: string) => void;
-  sort?: SortState;
+  Header: typeof Header;
+  Body: typeof Body;
+  Row: typeof Row;
+  DataCell: typeof DataCell;
+  HeaderCell: typeof HeaderCell;
+  ColumnHeader: typeof ColumnHeader;
+  ExpandableRow: typeof ExpandableRow;
 }
 
-export const TableContext = createContext<TableContextProps | null>(null);
-
 /**
  * A component that displays a table with headers and rows.
  *

package/src/table/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+import { SortState } from "./types";
+
+export interface TableContextProps {
+  onSortChange?: (sortKey: string) => void;
+  sort?: SortState;
+}
+
+export const TableContext = createContext<TableContextProps | null>(null);

package/src/table/index.ts

@@ -1,4 +1,3 @@
-export { default as Table, type TableProps, type SortState } from "./Table";
 export { type BodyProps } from "./Body";
 export { type ColumnHeaderProps } from "./ColumnHeader";
 export { type DataCellProps } from "./DataCell";
@@ -6,3 +5,5 @@ export { type ExpandableRowProps } from "./ExpandableRow";
 export { type HeaderProps } from "./Header";
 export { type HeaderCellProps } from "./HeaderCell";
 export { type RowProps } from "./Row";
+export { default as Table, type TableProps } from "./Table";
+export { type SortState } from "./types";

package/src/table/types.ts

@@ -0,0 +1,4 @@
+export interface SortState {
+  orderBy: string;
+  direction: "ascending" | "descending";
+}

package/src/tabs/Tab.tsx

@@ -1,8 +1,9 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyShort, OverridableComponent } from "..";
-import { TabsContext } from "./Tabs";
+import { BodyShort } from "../typography";
+import { OverridableComponent } from "../util";
+import { TabsContext } from "./context";
 
 export interface TabProps
   extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {

package/src/tabs/TabList.tsx

@@ -9,8 +9,8 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { debounce, mergeRefs } from "..";
-import { TabsContext } from "./Tabs";
+import { debounce, mergeRefs } from "../util";
+import { TabsContext } from "./context";
 
 export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
   /**

package/src/tabs/Tabs.tsx

@@ -1,7 +1,8 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
-import React, { createContext, forwardRef, HTMLAttributes } from "react";
+import React, { forwardRef, HTMLAttributes } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TabsContext } from "./context";
 import Tab, { TabProps } from "./Tab";
 import TabList, { TabListProps } from "./TabList";
 import TabPanel, { TabPanelProps } from "./TabPanel";
@@ -66,14 +67,6 @@ interface TabsComponent
   >;
 }
 
-interface TabsContextProps {
-  size: "medium" | "small";
-  loop: boolean;
-  iconPosition: "left" | "top";
-}
-
-export const TabsContext = createContext<TabsContextProps | null>(null);
-
 /**
  * A component that displays a set of tabs that can be used to switch between different views.
  *

package/src/tabs/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+interface TabsContextProps {
+  size: "medium" | "small";
+  loop: boolean;
+  iconPosition: "left" | "top";
+}
+
+export const TabsContext = createContext<TabsContextProps | null>(null);

package/src/tabs/index.ts

@@ -1,4 +1,4 @@
-export { default as Tabs, type TabsProps } from "./Tabs";
 export { type TabProps } from "./Tab";
 export { type TabListProps } from "./TabList";
 export { type TabPanelProps } from "./TabPanel";
+export { default as Tabs, type TabsProps } from "./Tabs";

package/src/tag/Tag.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import { BodyShort } from "..";
+import { BodyShort } from "../typography";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;

package/src/timeline/period/ClickablePeriod.tsx

@@ -20,7 +20,7 @@ import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
-import { PeriodProps } from "./index";
+import { PeriodProps } from "./types";
 
 interface TimelineClickablePeriodProps extends PeriodProps {
   onSelectPeriod?: (

package/src/timeline/period/NonClickablePeriod.tsx

@@ -1,7 +1,7 @@
+import cl from "clsx";
 import React from "react";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
-import { PeriodProps } from "./index";
-import cl from "clsx";
+import { PeriodProps } from "./types";
 
 interface TimelineNonClickablePeriodProps extends PeriodProps {
   periodRef?: React.ForwardedRef<HTMLDivElement>;

package/src/timeline/period/index.tsx

@@ -44,20 +44,6 @@ export interface TimelinePeriodProps
   isActive?: boolean;
 }
 
-export interface PeriodProps {
-  start: Date;
-  end: Date;
-  status: string;
-  cropped: string;
-  direction: string;
-  width: number;
-  left: number;
-  icon?: React.ReactNode;
-  children?: React.ReactNode;
-  statusLabel?: string;
-  restProps?: any;
-}
-
 export interface PeriodType
   extends React.ForwardRefExoticComponent<
     TimelinePeriodProps &

package/src/timeline/period/types.ts

@@ -0,0 +1,13 @@
+export interface PeriodProps {
+  start: Date;
+  end: Date;
+  status: string;
+  cropped: string;
+  direction: string;
+  width: number;
+  left: number;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+  statusLabel?: string;
+  restProps?: any;
+}

package/src/timeline/utils/filter.ts

@@ -1,5 +1,5 @@
 import { differenceInDays } from "date-fns";
-import { PeriodProps } from "../period";
+import { PeriodProps } from "../period/types";
 import { Spatial } from "./types.internal";
 
 export interface Positioned {

package/src/toggle-group/ToggleGroup.tsx

@@ -1,12 +1,9 @@
 import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import cl from "clsx";
-import React, {
-  createContext,
-  forwardRef,
-  HTMLAttributes,
-  useState,
-} from "react";
-import { Label, useId } from "..";
+import React, { forwardRef, HTMLAttributes, useState } from "react";
+import { Label } from "../typography";
+import { useId } from "../util";
+import { ToggleGroupContext } from "./context";
 import ToggleItem, { ToggleItemProps } from "./ToggleItem";
 
 export interface ToggleGroupProps
@@ -55,14 +52,6 @@ interface ToggleGroupComponent
   >;
 }
 
-interface ToggleContextProps {
-  size: "medium" | "small";
-}
-
-export const ToggleGroupContext = createContext<ToggleContextProps | null>(
-  null
-);
-
 /**
  * A component that displays a group of toggle buttons.
  *

package/src/toggle-group/ToggleItem.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef, useContext } from "react";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
 import { BodyShort } from "../typography/BodyShort";
-import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
-import { ToggleGroupContext } from "./ToggleGroup";
+import { ToggleGroupContext } from "./context";
 
 export interface ToggleItemProps
   extends React.HTMLAttributes<HTMLButtonElement> {

package/src/toggle-group/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+
+interface ToggleContextProps {
+  size: "medium" | "small";
+}
+
+export const ToggleGroupContext = createContext<ToggleContextProps | null>(
+  null
+);

package/src/tooltip/Tooltip.tsx

@@ -21,8 +21,9 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Detail, useProvider } from "..";
+import { Detail } from "../typography";
 import { mergeRefs, useId } from "../util";
+import { useProvider } from "../provider";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/util/TextareaAutoSize.tsx

@@ -1,7 +1,7 @@
 /* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { debounce, mergeRefs, useClientLayoutEffect } from "..";
+import { debounce, mergeRefs, useClientLayoutEffect } from "../util";
 
 /**
  * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument.ts

package/src/util/index.ts

@@ -1,72 +1,7 @@
-import { useEffect, useLayoutEffect } from "react";
-
 export * from "./OverridableComponent";
-export * from "./useId";
-export { default as mergeRefs } from "./mergeRefs";
 export { default as debounce } from "./debounce";
-
-const canUseDOM = (): boolean => {
-  return (
-    typeof window !== "undefined" &&
-    typeof window.document !== "undefined" &&
-    typeof window.document.createElement !== "undefined"
-  );
-};
-
-export const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : () => {};
-
-export const omit = (obj: object, props: string[]) =>
-  Object.entries(obj)
-    .filter(([key]) => !props.includes(key))
-    .reduce(
-      (obj, [key, value]) => ({
-        ...obj,
-        [key]: value,
-      }),
-      {}
-    );
-
-export interface ListenerT {
-  addEventListener(
-    name: string,
-    handler: (event?: any) => void,
-    ...args: any[]
-  );
-
-  removeEventListener(
-    name: string,
-    handler: (event?: any) => void,
-    ...args: any[]
-  );
-}
-
-/* https://github.com/streamich/react-use/blob/master/src/useEvent.ts */
-export const useEventListener = <T extends ListenerT>(
-  name: Parameters<ListenerT["addEventListener"]>[0],
-  handler: Parameters<ListenerT["addEventListener"]>[1],
-  target: null | T | Window = typeof window !== "undefined" ? window : null
-): void => {
-  useEffect(() => {
-    if (!target) {
-      return;
-    }
-    target?.addEventListener(name, handler);
-    return () => {
-      target?.removeEventListener(name, handler);
-    };
-  }, [name, handler, target]);
-};
-
-/* https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx */
-export const composeEventHandlers = <E>(
-  originalEventHandler?: (event: E) => void,
-  ourEventHandler?: (event: E) => void
-) => {
-  return function handleEvent(event: E) {
-    originalEventHandler?.(event);
-
-    if (!(event as unknown as Event).defaultPrevented) {
-      return ourEventHandler?.(event);
-    }
-  };
-};
+export { default as mergeRefs } from "./mergeRefs";
+export * from "./omit";
+export * from "./useClientLayoutEffect";
+export * from "./useEventListener";
+export * from "./useId";

package/src/util/omit.ts

@@ -0,0 +1,10 @@
+export const omit = (obj: object, props: string[]) =>
+  Object.entries(obj)
+    .filter(([key]) => !props.includes(key))
+    .reduce(
+      (obj, [key, value]) => ({
+        ...obj,
+        [key]: value,
+      }),
+      {}
+    );

package/src/util/useClientLayoutEffect.ts

@@ -0,0 +1,11 @@
+import { useLayoutEffect } from "react";
+
+const canUseDOM = (): boolean => {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.document !== "undefined" &&
+    typeof window.document.createElement !== "undefined"
+  );
+};
+
+export const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : () => {};