@navikt/ds-react 4.1.6 → 4.2.0

package/src/form/error-summary/ErrorSummary.tsx

@@ -29,6 +29,18 @@ interface ErrorSummaryComponent
   extends React.ForwardRefExoticComponent<
     ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
   > {
+  /**
+   * Link to error
+   *
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   *
+   * @example
+   * ```jsx
+   * <ErrorSummary.Item href="#1">
+   *   Felt må fylles ut med alder
+   * </ErrorSummary.Item>
+   * ```
+   */
   Item: ErrorSummaryItemType;
 }
 

package/src/form/error-summary/ErrorSummaryItem.tsx

@@ -8,6 +8,10 @@ export interface ErrorSummaryItemProps
    * Link text
    */
   children: React.ReactNode;
+  /**
+   * Link to errormessage
+   */
+  href?: string;
 }
 
 export type ErrorSummaryItemType = OverridableComponent<

package/src/help-text/HelpText.tsx

@@ -29,6 +29,10 @@ export interface HelpTextProps
     | "right-end"
     | "left-start"
     | "left-end";
+  /**
+   * Classname for wrapper
+   */
+  wrapperClassName?: string;
 }
 
 /**
@@ -53,6 +57,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
       strategy = "absolute",
       title = "hjelp",
       onClick,
+      wrapperClassName,
       ...rest
     },
     ref
@@ -62,7 +67,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     const [open, setOpen] = useState(false);
 
     return (
-      <div className="navds-help-text">
+      <div className={cl("navds-help-text", wrapperClassName)}>
         <button
           {...rest}
           ref={mergedRef}

package/src/help-text/help-text.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react";
-import { HelpText } from "..";
+import { BodyLong, Heading, HelpText } from "..";
 
 export default {
   title: "ds-react/HelpText",
@@ -65,3 +65,36 @@ export const Open = () => {
     </HelpText>
   );
 };
+
+export const WrapperClassName = {
+  render: () => {
+    return (
+      <div>
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+
+        <Heading level="2" size="medium">
+          67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
+          <HelpText wrapperClassName="testClass">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+            perspiciatis vero voluptatum, asperiores cumque, deserunt
+            accusantium ullam ipsa accusamus officia cupiditate quae unde esse
+            culpa, ratione ab quam ea quas?
+          </HelpText>
+          <style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
+        </Heading>
+
+        <BodyLong spacing>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
+          ab quam ea quas?
+        </BodyLong>
+      </div>
+    );
+  },
+};

package/src/timeline/Pin.tsx

@@ -11,15 +11,9 @@ import {
   useHover,
   useInteractions,
 } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../util";
 import { format } from "date-fns";
-import React, {
-  forwardRef,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../util";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 import { TimelineComponentTypes } from "./utils/types.internal";
@@ -83,23 +77,6 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
       [ref, refs.setReference]
     );
 
-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            ![
-              refs.reference.current as HTMLButtonElement | null,
-              refs?.floating?.current,
-            ].some((element) => element?.contains(e.target as Node))
-          ) {
-            open && setOpen(false);
-          }
-        },
-        [open, refs.reference, refs?.floating]
-      )
-    );
-
     const staticSide = {
       top: "bottom",
       right: "left",
@@ -140,6 +117,10 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
             ref={refs.setFloating}
             {...getFloatingProps({
               tabIndex: -1,
+              onBlur: (e) =>
+                e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
             })}
             style={{
               ...floatingStyles,

package/src/timeline/TimelineRow.tsx

@@ -72,6 +72,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
         >
           <ol
             {...rest}
+            tabIndex={-1}
             ref={ref}
             aria-label={
               periods.length === 0

package/src/timeline/period/ClickablePeriod.tsx

@@ -11,9 +11,9 @@ import {
   useHover,
   useInteractions,
 } from "@floating-ui/react";
-import { useEventListener, mergeRefs } from "../../util";
 import cl from "clsx";
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
+import { mergeRefs } from "../../util";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -85,23 +85,6 @@ const ClickablePeriod = React.memo(
       [periodRef, refs.setReference]
     );
 
-    useEventListener(
-      "focusin",
-      useCallback(
-        (e: FocusEvent) => {
-          if (
-            ![
-              refs.reference.current as HTMLButtonElement | null,
-              refs?.floating?.current,
-            ].some((element) => element?.contains(e.target as Node))
-          ) {
-            open && setOpen(false);
-          }
-        },
-        [open, refs.reference, refs?.floating]
-      )
-    );
-
     const staticSide = {
       top: "bottom",
       right: "left",
@@ -166,6 +149,10 @@ const ClickablePeriod = React.memo(
             ref={refs.setFloating}
             {...getFloatingProps({
               tabIndex: -1,
+              onBlur: (e) =>
+                e.target.previousSibling !== document.activeElement &&
+                open &&
+                setOpen(false),
             })}
             style={{
               ...floatingStyles,