@navikt/ds-react 5.5.0 → 5.6.0

package/src/timeline/Pin.tsx

@@ -1,4 +1,5 @@
 import {
+  FloatingFocusManager,
   autoUpdate,
   arrow as flArrow,
   flip,
@@ -10,6 +11,7 @@ import {
   useFocus,
   useHover,
   useInteractions,
+  useRole,
 } from "@floating-ui/react";
 import { format } from "date-fns";
 import React, { forwardRef, useMemo, useRef, useState } from "react";
@@ -51,25 +53,32 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
       floatingStyles,
     } = useFloating({
       placement: "top",
-      open: open,
-      onOpenChange: setOpen,
+      open,
+      onOpenChange: (_open) => setOpen(_open),
+      whileElementsMounted: autoUpdate,
       middleware: [
         offset(16),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
       ],
-      whileElementsMounted: autoUpdate,
     });
 
+    const hover = useHover(context, {
+      handleClose: safePolygon(),
+      restMs: 25,
+      delay: { open: 1000 },
+      move: false,
+    });
+    const focus = useFocus(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: "dialog" });
+
     const { getFloatingProps, getReferenceProps } = useInteractions([
-      useHover(context, {
-        handleClose: safePolygon(),
-        restMs: 25,
-        delay: { open: 1000 },
-      }),
-      useFocus(context),
-      useDismiss(context),
+      hover,
+      focus,
+      dismiss,
+      role,
     ]);
 
     const mergedRef = useMemo(
@@ -109,37 +118,33 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
             })}
           />
         </div>
-        {children && (
-          <div
-            className="navds-timeline__popover"
-            data-placement={placement}
-            aria-hidden={!open}
-            ref={refs.setFloating}
-            {...getFloatingProps({
-              tabIndex: -1,
-              onBlur: (e) =>
-                e.target.previousSibling !== document.activeElement &&
-                open &&
-                setOpen(false),
-            })}
-            style={{
-              ...floatingStyles,
-              display: open ? undefined : "none",
-            }}
+        {children && open && (
+          <FloatingFocusManager
+            context={context}
+            modal={false}
+            initialFocus={-1}
+            returnFocus={false}
           >
-            <div className="navds-timeline__popover-content">{children}</div>
             <div
-              ref={(node) => {
-                arrowRef.current = node;
-              }}
-              style={{
-                ...(arrowX != null ? { left: arrowX } : {}),
-                ...(arrowY != null ? { top: arrowY } : {}),
-                ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-              }}
-              className="navds-timeline__popover-arrow"
-            />
-          </div>
+              className="navds-timeline__popover"
+              data-placement={placement}
+              ref={refs.setFloating}
+              {...getFloatingProps()}
+              tabIndex={undefined}
+              style={floatingStyles}
+            >
+              {children}
+              <div
+                ref={arrowRef}
+                style={{
+                  ...(arrowX != null ? { left: arrowX } : {}),
+                  ...(arrowY != null ? { top: arrowY } : {}),
+                  ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+                }}
+                className="navds-timeline__popover-arrow"
+              />
+            </div>
+          </FloatingFocusManager>
         )}
       </>
     );

package/src/timeline/Timeline.tsx

@@ -104,9 +104,9 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       (c: any) => c?.type?.componentType === "row"
     );
 
-    const pins = React.Children.toArray(children).filter(
-      (c: any) => c?.type?.componentType === "pin"
-    );
+    const pins = React.Children.toArray(children)
+      .filter((c: any) => c?.type?.componentType === "pin")
+      .map((x) => () => x);
 
     const zoomComponent = React.Children.toArray(children).find(
       (c: any) => c?.type?.componentType === "zoom"
@@ -212,9 +212,9 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
           <div className="navds-timeline">
             <AxisLabels templates={axisLabelTemplates} />
 
-            {pins.map((pin) => {
-              return pin;
-            })}
+            {pins.map((Pin, i) => (
+              <Pin key={`pin-${i}`} />
+            ))}
 
             {processedRows.map((row, i) => {
               return (

package/src/timeline/TimelineRow.tsx

@@ -70,6 +70,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
             "navds-timeline__row--active": active,
           })}
         >
+          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
           <ol
             {...rest}
             tabIndex={-1}

package/src/timeline/hooks/usePeriodContext.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext } from "react";
 
 interface PeriodContextProps {
-  periodId: String;
+  periodId: string;
   firstFocus: boolean;
   restProps?: any;
 }

package/src/timeline/period/ClickablePeriod.tsx

@@ -1,4 +1,5 @@
 import {
+  FloatingFocusManager,
   autoUpdate,
   arrow as flArrow,
   flip,
@@ -10,6 +11,7 @@ import {
   useFocus,
   useHover,
   useInteractions,
+  useRole,
 } from "@floating-ui/react";
 import cl from "clsx";
 import React, { useMemo, useRef, useState } from "react";
@@ -60,24 +62,31 @@ const ClickablePeriod = React.memo(
     } = useFloating({
       placement: "top",
       open: open,
-      onOpenChange: setOpen,
+      onOpenChange: (_open) => setOpen(_open),
+      whileElementsMounted: autoUpdate,
       middleware: [
         offset(16),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         flArrow({ element: arrowRef, padding: 5 }),
       ],
-      whileElementsMounted: autoUpdate,
     });
 
+    const hover = useHover(context, {
+      handleClose: safePolygon(),
+      restMs: 25,
+      delay: { open: 1000 },
+      move: false,
+    });
+    const focus = useFocus(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: "dialog" });
+
     const { getFloatingProps, getReferenceProps } = useInteractions([
-      useHover(context, {
-        handleClose: safePolygon(),
-        restMs: 25,
-        delay: { open: 1000 },
-      }),
-      useFocus(context),
-      useDismiss(context),
+      hover,
+      focus,
+      dismiss,
+      role,
     ]);
 
     const mergedRef = useMemo(
@@ -141,37 +150,32 @@ const ClickablePeriod = React.memo(
         >
           <span className="navds-timeline__period--inner">{icon}</span>
         </button>
-        {children && (
-          <div
-            className="navds-timeline__popover"
-            data-placement={placement}
-            aria-hidden={!open}
-            ref={refs.setFloating}
-            {...getFloatingProps({
-              tabIndex: -1,
-              onBlur: (e) =>
-                e.target.previousSibling !== document.activeElement &&
-                open &&
-                setOpen(false),
-            })}
-            style={{
-              ...floatingStyles,
-              display: open ? undefined : "none",
-            }}
+        {children && open && (
+          <FloatingFocusManager
+            context={context}
+            modal={false}
+            initialFocus={-1}
+            returnFocus={false}
           >
-            <div className="navds-timeline__popover-content">{children}</div>
             <div
-              ref={(node) => {
-                arrowRef.current = node;
-              }}
-              style={{
-                ...(arrowX != null ? { left: arrowX } : {}),
-                ...(arrowY != null ? { top: arrowY } : {}),
-                ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-              }}
-              className="navds-timeline__popover-arrow"
-            />
-          </div>
+              className="navds-timeline__popover"
+              data-placement={placement}
+              ref={refs.setFloating}
+              {...getFloatingProps()}
+              style={floatingStyles}
+            >
+              {children}
+              <div
+                ref={arrowRef}
+                style={{
+                  ...(arrowX != null ? { left: arrowX } : {}),
+                  ...(arrowY != null ? { top: arrowY } : {}),
+                  ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
+                }}
+                className="navds-timeline__popover-arrow"
+              />
+            </div>
+          </FloatingFocusManager>
         )}
       </>
     );

package/src/timeline/period/index.tsx

@@ -50,8 +50,8 @@ export interface PeriodProps {
   status: string;
   cropped: string;
   direction: string;
-  width: Number;
-  left: Number;
+  width: number;
+  left: number;
   icon?: React.ReactNode;
   children?: React.ReactNode;
   statusLabel?: string;
@@ -102,11 +102,12 @@ export const Period = forwardRef<HTMLDivElement, TimelinePeriodProps>(
         width={width}
         left={horizontalPosition}
         icon={icon}
-        children={children}
         isActive={isActive}
         statusLabel={statusLabel}
         restProps={restProps}
-      />
+      >
+        {children}
+      </ClickablePeriod>
     ) : (
       <NonClickablePeriod
         periodRef={ref}

package/src/timeline/timeline.stories.tsx

@@ -110,7 +110,7 @@ export const Default = () => {
           label="Row 1"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row1.map((p: any, i) => {
+          {row1.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -126,7 +126,7 @@ export const Default = () => {
           label="Row 2"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row2.map((p: any, i) => {
+          {row2.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -154,7 +154,7 @@ export const WithPins = () => {
           label="Row 1"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row1.map((p: any, i) => {
+          {row1.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -170,7 +170,7 @@ export const WithPins = () => {
           label="Row 2"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row2.map((p: any, i) => {
+          {row2.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -195,7 +195,7 @@ export const WithZoom = () => {
           label="Row 1"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row1.map((p: any, i) => {
+          {row1.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -211,7 +211,7 @@ export const WithZoom = () => {
           label="Row 2"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row2.map((p: any, i) => {
+          {row2.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -246,7 +246,7 @@ export const ActivePeriod = () => {
           label="Rad 1"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row1.map((p: any, i) => {
+          {row1.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -268,7 +268,7 @@ export const ActivePeriod = () => {
           })}
         </Timeline.Row>
         <Timeline.Row label="Rad 2">
-          {row2.map((p: any, i) => {
+          {row2.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -368,13 +368,14 @@ export const ContentDemo = () => {
         <Timeline.Pin date={new Date("Apr 15 2022")}>Pin 1</Timeline.Pin>
         <Timeline.Pin date={new Date("Jun 12 2022")}>
           Pin 2 <button>test</button>
+          <a href="/123">test123123</a>
         </Timeline.Pin>
         <Timeline.Pin date={new Date("Jul 28 2022")}>Pin 3</Timeline.Pin>
         <Timeline.Row
           label="Rad 1"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row1.map((p: any, i) => {
+          {row1.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -400,7 +401,7 @@ export const ContentDemo = () => {
           })}
         </Timeline.Row>
         <Timeline.Row label="Rad 2">
-          {row2.map((p: any, i) => {
+          {row2.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}

package/src/timeline/utils/timeline.ts

@@ -12,9 +12,9 @@ type ParsedChild = {
 };
 
 export const parseRows = (rowChildren: ReactNode[]) => {
-  let parsedChildren: ParsedChild[] = [];
+  const parsedChildren: ParsedChild[] = [];
   rowChildren?.forEach((r: React.ReactNode) => {
-    let periods: ParsedChild["periods"] = [];
+    const periods: ParsedChild["periods"] = [];
     if (React.isValidElement(r) && r?.props?.children) {
       if (Array.isArray(r.props.children)) {
         for (let i = 0; i < r.props.children.length; i++) {
@@ -72,7 +72,7 @@ export const parseRows = (rowChildren: ReactNode[]) => {
         label: r.props.label,
         icon: r.props.icon,
         headingTag: r.props.headingTag,
-        periods: periods,
+        periods,
         restProps: omit(r.props, ["label", "icon", "headingTag"]),
         ref: (r as any)?.ref,
       });

package/src/toggle-group/ToggleGroup.stories.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-
 import {
   EnvelopeClosedIcon,
   EnvelopeOpenIcon,
@@ -8,24 +6,24 @@ import {
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { ToggleGroup } from "../index";
-export default {
+
+const meta: Meta<typeof ToggleGroup> = {
   title: "ds-react/ToggleGroup",
   component: ToggleGroup,
   argTypes: {
     size: {
+      options: ["medium", "small"],
       control: {
         type: "radio",
-        options: ["medium", "small"],
       },
     },
     variant: {
-      control: {
-        type: "radio",
-        options: ["action", "neutral"],
-      },
+      options: ["action", "neutral"],
+      control: { type: "radio" },
     },
   },
-} as Meta;
+};
+export default meta;
 
 const Items = (icon?: boolean, both?: boolean) => (
   <>
@@ -59,26 +57,24 @@ const Items = (icon?: boolean, both?: boolean) => (
   </>
 );
 
-export const Default = {
-  render: (props) => {
-    const [activeValue, setActiveValue] = useState("ulest");
-    return (
-      <ToggleGroup
-        size={props?.size}
-        value={activeValue}
-        onChange={setActiveValue}
-        label={props.label ? "Proident minim dolor pariatur." : undefined}
-      >
-        {Items(!!props?.icon, !!props?.text && props.icon)}
-      </ToggleGroup>
-    );
-  },
-
-  args: {
-    icon: true,
-    text: true,
-    label: false,
-  },
+export const Default = (props) => {
+  const [activeValue, setActiveValue] = useState("ulest");
+  return (
+    <ToggleGroup
+      size={props.size}
+      variant={props.variant}
+      value={activeValue}
+      onChange={setActiveValue}
+      label={props.label ? "Proident minim dolor pariatur." : undefined}
+    >
+      {Items(props.icon, props.text && props.icon)}
+    </ToggleGroup>
+  );
+};
+Default.args = {
+  icon: true,
+  text: true,
+  label: false,
 };
 
 export const Compositions = () => {

package/src/toggle-group/ToggleGroup.tsx

@@ -88,7 +88,6 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       label,
       value,
       defaultValue,
-      id,
       "aria-describedby": desc,
       variant = "action",
       ...rest