@navikt/ds-react 8.2.2 → 8.4.0

package/src/timeline/TimelineRow.tsx

@@ -12,33 +12,44 @@ import {
   TimelineComponentTypes,
 } from "./utils/types.internal";
 
-export interface TimelineRowProps
-  extends React.HTMLAttributes<HTMLOListElement> {
-  /**
-   * Label for the timeline row
-   */
-  label: string;
-  /**
-   * Heading level for the label e.g h2, h3...
-   * @default "h3"
-   */
-  headingTag?: "h2" | "h3" | "h4" | "h5" | "h6";
-  /**
-   * Icon next to label
-   */
-  icon?: React.ReactNode;
-}
+type TimelineRowBaseProps = React.HTMLAttributes<HTMLOListElement>;
+
+export type TimelineRowProps = TimelineRowBaseProps &
+  (
+    | {
+        /**
+         * Label for the timeline row as either `string` or `React.ReactNode`
+         *
+         *
+         * **Note**: When using `React.ReactNode`, `icon` and `headingTag` props are not available
+         */
+        label: string;
+        /**
+         * Heading level for the label e.g h2, h3...
+         * @default "h3"
+         */
+        headingTag?: "h2" | "h3" | "h4" | "h5" | "h6";
+        /**
+         * Icon next to label
+         */
+        icon?: React.ReactNode;
+      }
+    | {
+        label: Exclude<React.ReactNode, string>;
+        headingTag?: never;
+        icon?: never;
+      }
+  );
 
-export interface TimelineRowType
-  extends React.ForwardRefExoticComponent<
-    TimelineRowProps & React.RefAttributes<HTMLOListElement>
-  > {
+export interface TimelineRowType extends React.ForwardRefExoticComponent<
+  TimelineRowProps & React.RefAttributes<HTMLOListElement>
+> {
   componentType: TimelineComponentTypes;
 }
 
 export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
   ({ label, className, headingTag = "h3", icon, ...rest }, ref) => {
-    const { periods, id, active } = useRowContext();
+    const { periods, active } = useRowContext();
     const { setActiveRow } = useTimelineContext();
     const translate = useI18n("Timeline");
 
@@ -56,17 +67,19 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
 
     return (
       <>
-        {label && (
-          <BodyShort
-            as={headingTag}
-            id={`timeline-row-${id}`}
-            className="aksel-timeline__row-label"
-            size="small"
-          >
-            {icon}
-            {label}
-          </BodyShort>
-        )}
+        {label &&
+          (typeof label === "string" ? (
+            <BodyShort
+              as={headingTag}
+              className="aksel-timeline__row-label"
+              size="small"
+            >
+              {icon}
+              {label}
+            </BodyShort>
+          ) : (
+            <div className="aksel-timeline__row-label">{label}</div>
+          ))}
         <div
           className={cl("aksel-timeline__row", {
             "aksel-timeline__row--active": active,

package/src/timeline/period/index.tsx

@@ -6,8 +6,7 @@ import type { TimelineComponentTypes } from "../utils/types.internal";
 import ClickablePeriod from "./ClickablePeriod";
 import NonClickablePeriod from "./NonClickablePeriod";
 
-export interface TimelinePeriodProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface TimelinePeriodProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Period start date.
    */
@@ -60,11 +59,9 @@ export interface TimelinePeriodProps
   placement?: "top" | "bottom";
 }
 
-export interface PeriodType
-  extends React.ForwardRefExoticComponent<
-    TimelinePeriodProps &
-      React.RefAttributes<HTMLDivElement | HTMLButtonElement>
-  > {
+export interface PeriodType extends React.ForwardRefExoticComponent<
+  TimelinePeriodProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>
+> {
   componentType: TimelineComponentTypes;
 }
 

package/src/timeline/pin/Pin.tsx

@@ -4,10 +4,9 @@ import { useTimelineContext } from "../hooks/useTimelineContext";
 import { TimelineComponentTypes } from "../utils/types.internal";
 import PinInternal, { type TimelinePinProps } from "./PinInternal";
 
-export interface PinType
-  extends React.ForwardRefExoticComponent<
-    TimelinePinProps & React.RefAttributes<HTMLButtonElement>
-  > {
+export interface PinType extends React.ForwardRefExoticComponent<
+  TimelinePinProps & React.RefAttributes<HTMLButtonElement>
+> {
   componentType: TimelineComponentTypes;
 }
 

package/src/timeline/pin/PinInternal.tsx

@@ -18,8 +18,7 @@ import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 import { position } from "../utils/calc";
 
-export interface TimelinePinProps
-  extends React.HTMLAttributes<HTMLButtonElement> {
+export interface TimelinePinProps extends React.HTMLAttributes<HTMLButtonElement> {
   /**
    * Date position for the pin.
    */

package/src/timeline/utils/timeline.ts

@@ -7,7 +7,7 @@ type TimelineRowPropsWithRef = React.ComponentProps<typeof TimelineRow>;
 type TimelinePeriodPropsWithRef = React.ComponentProps<typeof TimelinePeriod>;
 
 type ParsedRow = {
-  label: string;
+  label: React.ReactNode;
   icon?: React.ReactNode;
   headingTag?: string;
   periods: Omit<Period, "id" | "endInclusive">[];

package/src/timeline/zoom/index.tsx

@@ -6,10 +6,11 @@ interface ZoomProps extends React.HTMLAttributes<HTMLUListElement> {
   children: React.ReactNode;
 }
 
-export interface ZoomType<Props = ZoomProps>
-  extends React.ForwardRefExoticComponent<
-    Props & React.RefAttributes<HTMLUListElement>
-  > {
+export interface ZoomType<
+  Props = ZoomProps,
+> extends React.ForwardRefExoticComponent<
+  Props & React.RefAttributes<HTMLUListElement>
+> {
   Button: ZoomButtonType;
   componentType: string;
 }

package/src/toggle-group/ToggleGroup.types.ts

@@ -2,8 +2,10 @@ import { HTMLAttributes } from "react";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import type { AkselColor } from "../types";
 
-export interface ToggleGroupProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+export interface ToggleGroupProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange" | "dir"
+> {
   /**
    * Toggles.Item elements.
    */

package/src/toggle-group/useToggleGroup.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useControllableState } from "../utils/hooks";
 import { ToggleGroupProps } from "./ToggleGroup.types";
 
@@ -15,14 +15,10 @@ export function useToggleGroup({
     onChange,
   });
 
-  /**
-   * Sync focused `value` with controlled `selectedValue`
-   */
-  useEffect(() => {
-    if (value != null) {
-      setFocusedValue(value);
-    }
-  }, [value]);
+  /* Sync focused `value` with controlled `selectedValue` */
+  if (value != null && value !== focusedValue) {
+    setFocusedValue(value);
+  }
 
   return {
     selectedValue,

package/src/tooltip/Tooltip.tsx

@@ -14,11 +14,13 @@ import {
 import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { Portal } from "../portal";
+import { HStack } from "../primitives/stack";
 import { Detail } from "../typography";
 import { useId } from "../utils-external";
 import { Slot } from "../utils/components/slot/Slot";
 import { cl } from "../utils/helpers";
 import { useControllableState, useMergeRefs } from "../utils/hooks";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -79,7 +81,7 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * List of Keyboard-keys for shortcuts.
    */
-  keys?: string[];
+  keys?: string[] | [string[], string[]];
   /**
    * When false, Tooltip labels the element, and child-elements content will be ignored by screen-readers.
    * When true, content is added as additional information to the child element.
@@ -204,7 +206,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           ref={refs.setReference}
           {...getReferenceProps()}
           {...labelProps}
-          aria-keyshortcuts={keys ? keys.join("+") : undefined}
+          aria-keyshortcuts={ariaShortcuts(keys)}
         >
           {children}
         </Slot>
@@ -232,15 +234,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               data-state="open"
             >
               {content}
-              {keys && (
-                <span className="aksel-tooltip__keys" aria-hidden>
-                  {keys.map((key) => (
-                    <Detail as="kbd" key={key} className="aksel-tooltip__key">
-                      {key}
-                    </Detail>
-                  ))}
-                </span>
-              )}
+              <TooltipShortcuts shortcuts={keys} />
               {_arrow && (
                 <div
                   ref={(node) => {
@@ -269,4 +263,65 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   },
 );
 
+function isKeyShortcutNested(
+  shortcuts: TooltipProps["keys"],
+): shortcuts is [string[], string[]] {
+  return Array.isArray(shortcuts?.[0]);
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-keyshortcuts
+ * Space-separated shortcuts is valid syntax
+ */
+function ariaShortcuts(shortcuts: TooltipProps["keys"]) {
+  if (!shortcuts) {
+    return undefined;
+  }
+
+  if (isKeyShortcutNested(shortcuts)) {
+    return shortcuts.map((key) => key.join("+")).join(" ");
+  }
+
+  return shortcuts.join("+");
+}
+
+function TooltipShortcuts({ shortcuts }: { shortcuts: TooltipProps["keys"] }) {
+  const translate = useI18n("Tooltip");
+
+  if (!shortcuts) {
+    return null;
+  }
+
+  if (isKeyShortcutNested(shortcuts)) {
+    return (
+      <span className="aksel-tooltip__keys" aria-hidden>
+        {shortcuts.map((key, index) => (
+          <>
+            <HStack gap="space-4">
+              {key.map((k, i) => (
+                <Detail as="kbd" key={i} className="aksel-tooltip__key">
+                  {k}
+                </Detail>
+              ))}
+            </HStack>
+            {index < shortcuts.length - 1 && (
+              <span> {translate("shortcutSeparator")} </span>
+            )}
+          </>
+        ))}
+      </span>
+    );
+  }
+
+  return (
+    <span className="aksel-tooltip__keys" aria-hidden>
+      {shortcuts.map((k, i) => (
+        <Detail as="kbd" key={i} className="aksel-tooltip__key">
+          {k}
+        </Detail>
+      ))}
+    </span>
+  );
+}
+
 export default Tooltip;

package/src/typography/BodyLong.tsx

@@ -6,8 +6,7 @@ import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
 export interface BodyLongProps
-  extends TypoProps,
-    React.HTMLAttributes<HTMLParagraphElement> {
+  extends TypoProps, React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * large: 20px, medium: 18px, small: 16px.
    * @default "medium"

package/src/typography/BodyShort.tsx

@@ -6,8 +6,7 @@ import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
 export interface BodyShortProps
-  extends TypoProps,
-    React.HTMLAttributes<HTMLParagraphElement> {
+  extends TypoProps, React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * large: 20px, medium: 18px, small: 16px.
    * @default "medium"

package/src/typography/Detail.tsx

@@ -6,8 +6,7 @@ import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
 export interface DetailProps
-  extends TypoProps,
-    React.HTMLAttributes<HTMLParagraphElement> {
+  extends TypoProps, React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * @deprecated Medium is now the same as small.
    */

package/src/typography/ErrorMessage.tsx

@@ -5,7 +5,8 @@ import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
 export interface ErrorMessageProps
-  extends Pick<TypoProps, "spacing">,
+  extends
+    Pick<TypoProps, "spacing">,
     React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * medium: 18px, small: 16px.

package/src/typography/Heading.tsx

@@ -6,7 +6,8 @@ import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
 export interface HeadingProps
-  extends Pick<TypoProps, "spacing" | "visuallyHidden" | "align" | "textColor">,
+  extends
+    Pick<TypoProps, "spacing" | "visuallyHidden" | "align" | "textColor">,
     React.HTMLAttributes<HTMLHeadingElement> {
   /**
    * Heading level.

package/src/typography/Ingress.tsx

@@ -2,8 +2,7 @@ import React, { forwardRef } from "react";
 import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 
-export interface IngressProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+export interface IngressProps extends React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * Ingress text
    */

package/src/typography/Label.tsx

@@ -6,7 +6,8 @@ import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
 export interface LabelProps
-  extends Omit<TypoProps, "weight" | "align" | "truncate">,
+  extends
+    Omit<TypoProps, "weight" | "align" | "truncate">,
     React.LabelHTMLAttributes<HTMLLabelElement> {
   /**
    * medium: 18px, small: 16px.

package/src/{overlays → utils/components}/dismissablelayer/DismissableLayer.tsx

@@ -5,10 +5,10 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Slot } from "../../utils/components/slot/Slot";
-import { composeEventHandlers, ownerDocument } from "../../utils/helpers";
-import { useMergeRefs, useTimeout } from "../../utils/hooks";
-import type { AsChild } from "../../utils/types/AsChild";
+import { composeEventHandlers, ownerDocument } from "../../helpers";
+import { useMergeRefs, useTimeout } from "../../hooks";
+import type { AsChild } from "../../types/AsChild";
+import { Slot } from "../slot/Slot";
 import {
   CustomFocusEvent,
   CustomPointerEvent,
@@ -19,8 +19,7 @@ import { useFocusOutside } from "./util/useFocusOutside";
 import { usePointerDownOutside } from "./util/usePointerDownOutside";
 import { usePointerUpOutside } from "./util/usePointerUpOutside";
 
-interface DismissableLayerBaseProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface DismissableLayerBaseProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * When `true`, hover/focus/click interactions will be disabled on elements outside
    * the `DismissableLayer`. Users will need to click twice on outside elements to

package/src/{overlays → utils/components}/dismissablelayer/util/useEscapeKeydown.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useEventCallback } from "../../../utils/hooks";
+import { useEventCallback } from "../../../hooks";
 
 export function useEscapeKeydown(
   callback?: (event: KeyboardEvent) => void,

package/src/{overlays → utils/components}/dismissablelayer/util/useFocusOutside.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useEventCallback } from "../../../utils/hooks";
+import { useEventCallback } from "../../../hooks";
 import {
   CUSTOM_EVENTS,
   CustomFocusEvent,

package/src/{overlays → utils/components}/dismissablelayer/util/usePointerDownOutside.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useEventCallback, useTimeout } from "../../../utils/hooks";
+import { useEventCallback, useTimeout } from "../../../hooks";
 import {
   CUSTOM_EVENTS,
   CustomPointerEvent,

package/src/{overlays → utils/components}/dismissablelayer/util/usePointerUpOutside.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useEventCallback } from "../../../utils/hooks";
+import { useEventCallback } from "../../../hooks";
 import {
   CUSTOM_EVENTS,
   CustomPointerEvent,

package/src/{overlays → utils/components}/floating/Floating.tsx

@@ -18,16 +18,16 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useModalContext } from "../../modal/Modal.context";
-import { useClientLayoutEffect } from "../../utils-external";
-import { Slot } from "../../utils/components/slot/Slot";
-import { createStrictContext } from "../../utils/helpers";
+import { useModalContext } from "../../../modal/Modal.context";
+import { useClientLayoutEffect } from "../../../utils-external";
+import { createStrictContext } from "../../helpers";
 import {
   useEventCallback,
   useMergeRefs,
   useOpenChangeAnimationComplete,
-} from "../../utils/hooks";
-import type { AsChildProps } from "../../utils/types";
+} from "../../hooks";
+import type { AsChildProps } from "../../types";
+import { Slot } from "../slot/Slot";
 import {
   type Align,
   type Measurable,
@@ -315,6 +315,7 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
             const { width: anchorWidth, height: anchorHeight } =
               rects.reference;
             const contentStyle = elements.floating.style;
+
             /**
              * Allows styling and animations based on the available space.
              */

package/src/{overlays → utils/components}/floating/Floating.utils.ts

@@ -57,4 +57,4 @@ function getSideAndAlignFromPlacement(placement: Placement) {
 }
 
 export { getSideAndAlignFromPlacement, transformOrigin };
-export type { Side, Align, Measurable };
+export type { Align, Measurable, Side };

package/src/{overlays → utils/components}/floating-menu/Menu.tsx

@@ -1,16 +1,16 @@
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { Portal } from "../../portal";
-import { useId } from "../../utils-external";
-import { FocusBoundary } from "../../utils/components/focus-boundary/FocusBoundary";
-import { composeEventHandlers, createStrictContext } from "../../utils/helpers";
+import { Portal } from "../../../portal";
+import { useId } from "../../../utils-external";
+import { composeEventHandlers, createStrictContext } from "../../helpers";
 import {
   createDescendantContext,
   useEventCallback,
   useMergeRefs,
-} from "../../utils/hooks";
+} from "../../hooks";
 import { DismissableLayer } from "../dismissablelayer/DismissableLayer";
 import { Floating } from "../floating/Floating";
+import { FocusBoundary } from "../focus-boundary/FocusBoundary";
 import { RovingFocus, RovingFocusProps } from "./parts/RovingFocus";
 import {
   SlottedDivElement,
@@ -251,7 +251,8 @@ type MenuContentInternalPrivateProps = {
 };
 
 interface MenuContentInternalProps
-  extends MenuContentInternalPrivateProps,
+  extends
+    MenuContentInternalPrivateProps,
     Omit<
       React.ComponentPropsWithoutRef<typeof Floating.Content>,
       "dir" | "onPlaced"

package/src/{overlays → utils/components}/floating-menu/parts/RovingFocus.tsx

@@ -1,11 +1,13 @@
 import React, { forwardRef, useCallback, useEffect, useRef } from "react";
-import { Slot } from "../../../utils/components/slot/Slot";
-import { composeEventHandlers, ownerDocument } from "../../../utils/helpers";
-import type { DescendantsManager } from "../../../utils/hooks";
-import { useEventCallback, useMergeRefs } from "../../../utils/hooks";
-
-interface RovingFocusProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "tabIndex"> {
+import { composeEventHandlers, ownerDocument } from "../../../helpers";
+import type { DescendantsManager } from "../../../hooks";
+import { useEventCallback, useMergeRefs } from "../../../hooks";
+import { Slot } from "../../slot/Slot";
+
+interface RovingFocusProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "tabIndex"
+> {
   asChild?: boolean;
   descendants: DescendantsManager<HTMLDivElement, any>;
   onEntryFocus?: (event: Event) => void;

package/src/{overlays → utils/components}/floating-menu/parts/SlottedDivElement.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { Slot } from "../../../utils/components/slot/Slot";
+import { Slot } from "../../slot/Slot";
 
 interface SlottedDivProps extends React.HTMLAttributes<HTMLDivElement> {
   asChild?: boolean;

package/src/utils/components/textarea-autosize/TextareaAutoSize.tsx

@@ -39,11 +39,10 @@ function getStyleValue(value: string) {
   return parseInt(value, 10) || 0;
 }
 
-interface TextareaAutosizeProps
-  extends Omit<
-    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    "children" | "rows"
-  > {
+interface TextareaAutosizeProps extends Omit<
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "children" | "rows"
+> {
   /**
    * Maximum number of rows to display.
    */

package/src/utils/components/virtualfocus/parts/VirtualFocusAnchor.tsx

@@ -7,8 +7,10 @@ import {
   useVirtualFocusInternalContext,
 } from "../Context";
 
-export interface VirtualFocusAnchorProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
+export interface VirtualFocusAnchorProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "id"
+> {
   /**
    * The role of the container. This is a limited subset of roles that
    * require manual focus management.

package/src/utils/components/virtualfocus/parts/VirtualFocusItem.tsx

@@ -7,8 +7,10 @@ import {
   useVirtualFocusInternalContext,
 } from "../Context";
 
-export interface VirtualFocusItemProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "tabIndex"> {
+export interface VirtualFocusItemProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "id" | "tabIndex"
+> {
   /**
    * The function that is run when the element is focused
    * (virtually, not actual focus, eg. set a border around an item)

package/src/utils/i18n/locales/en.ts

@@ -132,4 +132,7 @@ export default {
       reset: "Reset zoom",
     },
   },
+  Tooltip: {
+    shortcutSeparator: "or",
+  },
 } satisfies Translations;

package/src/utils/i18n/locales/nb.ts

@@ -139,4 +139,7 @@ export default {
       reset: "Tilbakestill tidsperspektiv",
     },
   },
+  Tooltip: {
+    shortcutSeparator: "eller",
+  },
 } satisfies TranslationMap;

package/src/utils/i18n/locales/nn.ts

@@ -132,4 +132,7 @@ export default {
       reset: "Tilbakestill tidsperspektiv",
     },
   },
+  Tooltip: {
+    shortcutSeparator: "eller",
+  },
 } satisfies Translations;