@navikt/ds-react 6.1.1 → 6.3.0

package/src/list/types.ts

@@ -20,7 +20,7 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   headingTag?: React.ElementType<any>;
   /**
    * Changes padding, height and font-size
-   * @default medium
+   * @default "medium"
    */
   size?: "medium" | "small";
 }

package/src/loader/Loader.tsx

@@ -32,12 +32,6 @@ export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
    * @default "neutral"
    */
   variant?: "neutral" | "interaction" | "inverted";
-  /**
-   * Allows getting a ref to the component instance.
-   * Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
-   * @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
-   */
-  ref?: React.Ref<SVGSVGElement>;
 }
 
 /* Workaround for @types/react v17/v18 feil */

package/src/modal/Modal.tsx

@@ -165,7 +165,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const shouldHandleModalClick = closeOnBackdropClick && !needPolyfill;
 
     /**
-     * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
+     * `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
      */
     const handleModalClick = (
       endEvent: React.MouseEvent<HTMLDialogElement>,
@@ -191,7 +191,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     };
 
     /**
-     * @note onCancel fires when you press `Esc`
+     * onCancel fires when you press `Esc`
      */
     const handleModalCancel = (
       event: React.SyntheticEvent<HTMLDialogElement, Event>,

package/src/modal/types.ts

@@ -1,25 +1,24 @@
 interface ModalPropsBase 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.
+   * 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
+     * Heading size.
      * @default "medium"
      * */
     size?: "medium" | "small";
     /**
-     * Removes close-button (X) when false
+     * Removes close-button (X) when false.
      * @default true
      */
     closeButton?: boolean;
   };
   /**
-   * Modal content
+   * Modal content.
    */
   children: React.ReactNode;
   /**
@@ -36,12 +35,13 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
    * Called when the user tries to close the modal by one of the built-in methods.
    * Used if you want to ask the user for confirmation before closing.
    * @warning Will not always be called when pressing Esc. See `onCancel` for more info.
-   * @returns Whether to close the modal
+   * @returns Whether to close the modal or not
    */
   onBeforeClose?: () => boolean;
   /**
-   * *Sometimes** called when the user presses the Esc key.
-   * @warning *Some browsers does not always trigger this event. Chrome only triggers it if you have
+   * _Sometimes*_ called when the user presses the Esc key.
+   *
+   *  *: Some browsers does not always trigger this event. Chrome only triggers it if you have
    *  interacted with the modal, and will not trigger it a second time if you press Esc twice in a row.
    */
   onCancel?: React.ReactEventHandler<HTMLDialogElement>;

package/src/pagination/Pagination.tsx

@@ -9,8 +9,9 @@ import PaginationItem, {
 
 export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   /**
-   * Current page
-   * @note Pagination indexing starts at 1
+   * Current page.
+   *
+   * Pagination indexing starts at 1.
    */
   page: number;
   /**

package/src/pagination/PaginationItem.tsx

@@ -16,7 +16,7 @@ export interface PaginationItemProps extends ButtonProps {
   page: number;
   /**
    * Changes padding, height and font-size
-   * @default medium
+   * @default "medium"
    */
   size?: "medium" | "small" | "xsmall";
 }

package/src/popover/Popover.tsx

@@ -42,7 +42,8 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   onClose: () => void;
   /**
    * Default orientation of popover
-   * @note Try to keep general usage to "top", "bottom", "left", "right"
+   *
+   * Try to keep general usage to "top", "bottom", "left", "right".
    * @default "top"
    */
   placement?:

package/src/read-more/ReadMore.tsx

@@ -8,20 +8,20 @@ import { useControllableState } from "../util/hooks/useControllableState";
 export interface ReadMoreProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
-   * Content inside ReadMore
+   * Content inside ReadMore.
    */
   children: React.ReactNode;
   /**
-   * ReadMore header content
+   * ReadMore header content.
    */
   header: React.ReactNode;
   /**
-   * Opens component if 'true', closes if 'false'
-   * Using this prop removes automatic control of open-state
+   * Opens component if `true`, closes if `false`.
+   * Using this prop removes automatic control of open-state.
    */
   open?: boolean;
   /**
-   * Initially open
+   * Initially open.
    * @default false
    */
   defaultOpen?: boolean;
@@ -30,8 +30,8 @@ export interface ReadMoreProps
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * Changes fontsize for content
-   * @default medium
+   * Changes fontsize for content.
+   * @default "medium"
    */
   size?: "medium" | "small";
 }

package/src/stepper/Step.tsx

@@ -8,21 +8,21 @@ import { StepperContext } from "./context";
 export interface StepperStepProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
-   * Text content by indicator
+   * Text content by indicator.
    */
   children: string;
   /**
-   * Handled by Stepper, overwriting may break component logic
+   * Handled by Stepper, overwriting may break component logic.
    * @private
    */
   unsafe_index?: number;
   /**
-   * Makes step-indicator a checkmark
+   * Makes step-indicator a checkmark.
    * @default false
    */
   completed?: boolean;
   /**
-   * Makes step non-interactive if false. Step will be set to a <div>, overriding `as`-prop
+   * Makes step non-interactive if false. Step will be set to a `<div>`, overriding `as`-prop.
    * @default true
    */
   interactive?: boolean;

package/src/stepper/Stepper.tsx

@@ -5,7 +5,7 @@ import { StepperContext } from "./context";
 
 export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   /**
-   * <Stepper.Step /> elements
+   * `<Stepper.Step />` elements.
    */
   children: React.ReactNode;
   /**
@@ -15,16 +15,18 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   orientation?: "horizontal" | "vertical";
   /**
    * Current active step.
-   * @note Stepper index starts at 1, not 0
+   *
+   * Stepper index starts at 1, not 0.
    */
   activeStep: number;
   /**
-   * Callback for next activeStep
-   * @note Stepper index starts at 1, not 0
+   * Callback for next `activeStep`.
+   *
+   * Stepper index starts at 1, not 0.
    */
   onStepChange?: (step: number) => void;
   /**
-   * Makes stepper non-interactive if false
+   * Makes stepper non-interactive if false.
    * @default true
    */
   interactive?: boolean;

package/src/table/AnimateHeight.tsx

@@ -51,7 +51,7 @@ interface AnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   duration?: number;
   /**
-   * @default ease
+   * @default "ease"
    */
   easing?: string;
   height: Height;

package/src/table/DataCell.tsx

@@ -15,12 +15,7 @@ export interface DataCellProps
   textSize?: "medium" | "small";
 }
 
-export interface DataCellType
-  extends React.ForwardRefExoticComponent<
-    DataCellProps & React.RefAttributes<HTMLTableCellElement>
-  > {}
-
-export const DataCell: DataCellType = forwardRef(
+export const DataCell = forwardRef<HTMLTableCellElement, DataCellProps>(
   ({ className, children = "", align, textSize, ...rest }, ref) => {
     return (
       <BodyShort

package/src/tabs/TabList.tsx

@@ -15,7 +15,7 @@ import { TabsContext } from "./context";
 
 export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * <Tabs.Tab /> elements
+   * `<Tabs.Tab />` elements
    */
   children: React.ReactNode;
 }

package/src/tabs/Tabs.tsx

@@ -11,34 +11,34 @@ export interface TabsProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
   children: React.ReactNode;
   /**
-   * Changes padding and font-size
+   * Changes padding and font-size.
    * @default "medium"
    */
   size?: "medium" | "small";
   /**
-   * onChange callback for selected Tab
+   * onChange callback for selected Tab.
    */
   onChange?: (value: string) => void;
   /**
-   * Controlled selected value
+   * Controlled selected value.
    */
   value?: string;
   /**
-   * If not controlled, a default-value needs to be set
+   * If not controlled, a default-value needs to be set.
    */
   defaultValue?: string;
   /**
-   * Automatically activates tab on focus/navigation
+   * Automatically activates tab on focus/navigation.
    * @default false
    */
   selectionFollowsFocus?: boolean;
   /**
-   * Loops back to start when navigating past last item
+   * Loops back to start when navigating past last item.
    * @default false
    */
   loop?: boolean;
   /**
-   * Icon position in Tab
+   * Icon position in Tab.
    * @default "left"
    */
   iconPosition?: "left" | "top";

package/src/timeline/Timeline.tsx

@@ -20,13 +20,15 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Decides startingpoint in timeline.
    * Defaults to earliest date among the timeline periods.
-   * @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
+   *
+   * Using this disables use of ZoomButtons. You will need to control zooming yourself.
    */
   startDate?: Date;
   /**
    * Decides end-date for timeline.
    * Defaults to the latest date among the timeline periods.
-   * @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
+   *
+   * Using this disables use of ZoomButtons. You will need to control zooming yourself.
    */
   endDate?: Date;
   /**
@@ -63,7 +65,8 @@ interface TimelineComponent
 
 /**
  * A component that displays a timeline of events. Meant for Internal systems.
- * @note Component is made for desktop enviroments and will start having issues on smaller screens.
+ *
+ * Component is made for desktop enviroments and will start having issues on smaller screens.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/timeline)
  * @see 🏷️ {@link TimelineProps}

package/src/timeline/period/index.tsx

@@ -38,8 +38,9 @@ export interface TimelinePeriodProps
    */
   children?: React.ReactNode;
   /**
-   * Visual active inidcation on period
-   * @note Make sure only one period is active at a time
+   * Visual active inidcation on period.
+   *
+   * Make sure only one period is active at a time.
    */
   isActive?: boolean;
 }

package/src/tooltip/Tooltip.tsx

@@ -22,8 +22,9 @@ import { useMergeRefs } from "../util/hooks/useMergeRefs";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Element tooltip anchors to
-   * @note Needs to be React.ReactElement, does not support multiple children/react fragment
+   * Element tooltip anchors to.
+   *
+   * Needs to be React.ReactElement, does not support multiple children/react fragment
    */
   children: React.ReactElement & React.RefAttributes<HTMLElement>;
   /**
@@ -32,45 +33,51 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   open?: boolean;
   /**
    * Tells tooltip to start in open state.
-   * Use sparingly synce hover/focus on other elements will close it
-   * @note "open"-prop overwrites this
+   * Use _sparingly_ since hover/focus on other elements will close it.
+   *
+   * `open`-prop overwrites this.
    */
   defaultOpen?: boolean;
   /**
-   * Change handler for open
+   * Change handler for open.
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * Orientation for tooltip
+   * Orientation for tooltip.
    * @default "top"
    */
   placement?: "top" | "right" | "bottom" | "left";
   /**
-   * Toggles rendering of arrow
+   * Toggles rendering of arrow.
    * @default true
    */
   arrow?: boolean;
   /**
-   * Distance from anchor to tooltip
+   * Distance from anchor to tooltip.
    * @default 10px with arrow, 2px without arrow
    */
   offset?: number;
   /**
-   * Text-content inside tooltip
+   * Text-content inside tooltip.
    */
   content: string;
   /**
-   * Sets max allowed character length.
+   * Sets max character length.
+   *
+   * Ideally you should keep the length of the tooltip to a minimum (80 characters).
+   * Currently this prop only emits a warning in the console, which can be squelched
+   * by setting this to a larger number. However, before doing so you should _try_
+   * to shorten the content so that it fits into 80 characters.
    * @default 80
    */
   maxChar?: number;
   /**
-   * Adds a delay in milliseconds before opening tooltip
+   * Adds a delay in milliseconds before opening tooltip.
    * @default 150
    */
   delay?: number;
   /**
-   * List of Keyboard-keys for shortcuts
+   * List of Keyboard-keys for shortcuts.
    */
   keys?: string[];
 }

package/src/util/create-context.tsx

@@ -16,6 +16,7 @@ export interface CreateContextOptions<T> {
   errorMessage?: string;
   name?: string;
   defaultValue?: T;
+  strict?: boolean;
 }
 
 type ProviderProps<T> = T & { children: React.ReactNode };

package/src/util/hooks/useMergeRefs.ts

@@ -1,7 +1,7 @@
 /* https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/composeRefs.tsx */
 import React from "react";
 
-type PossibleRef<T> = React.Ref<T> | undefined;
+type PossibleRef<T> = React.LegacyRef<T> | undefined;
 
 // https://github.com/gregberge/react-merge-refs
 /**