@navikt/ds-react 5.5.0 → 5.6.0-beta.0

package/src/stepper/stepper.stories.tsx

@@ -1,26 +1,22 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { BodyLong } from "..";
 import Stepper from "./Stepper";
 
-export default {
+const meta: Meta<typeof Stepper> = {
   title: "ds-react/Stepper",
   component: Stepper,
   argTypes: {
     orientation: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
       options: ["horizontal", "vertical"],
     },
     activeStep: {
-      control: {
-        type: "number",
-      },
+      control: { type: "number" },
     },
   },
-} as Meta;
+};
+export default meta;
 
 const storyTexts = [
   "Minimize backwards overflow agile. Horsehead offer commitment to the cause nor copy and paste from stack overflow problem territories, innovation is hot right now for can you slack it to me?. High touch client table the discussion , and get buy-in so manage expectations loop back, please advise soonest. We need a paradigm shift dogpile that, and i need to pee and then go to another meeting for let's prioritize the low-hanging fruit.",
@@ -32,51 +28,48 @@ const storyTexts = [
   "Move the needle a loss a day will keep you focus yet can you put it into a banner that is not alarming, but eye catching and not too giant or strategic fit, nor it is all exactly as i said, but i don't like it or streamline. We've bootstrapped the model. This proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables the horse is out of the barn usabiltiy, for going forward but going forward.",
 ];
 
-export const Default = {
-  render: ({ asButton, ...props }) => {
-    const [activeStep, setActiveStep] = useState(1);
-
-    const newProps = {
-      onClick: (e) => e.preventDefault(),
-      ...(asButton ? { as: "button" } : { href: "#" }),
-    };
+export const Default = ({ asButton, ...props }) => {
+  const [activeStep, setActiveStep] = useState(1);
 
-    return (
-      <div style={{ display: "flex", gap: "10rem", flexDirection: "column" }}>
-        <Stepper
-          aria-labelledby="stepper-heading"
-          activeStep={activeStep}
-          onStepChange={setActiveStep}
-          orientation="vertical"
-          {...props}
-        >
-          <Stepper.Step {...newProps} completed={props.completed}>
-            Start søknad
-          </Stepper.Step>
-          <Stepper.Step {...newProps}>Personopplysninger</Stepper.Step>
-          <Stepper.Step {...newProps} completed={props.completed}>
-            Saksopplysninger
-          </Stepper.Step>
-          <Stepper.Step {...newProps} completed={props.completed}>
-            Søknadstekst for en veldig spesifikk prosess i NAV som må beskrives
-            og forklares i sitt fulle i denne labelen
-          </Stepper.Step>
-          <Stepper.Step {...newProps}>Vedlegg</Stepper.Step>
-          <Stepper.Step {...newProps}>Oppsummering</Stepper.Step>
-          <Stepper.Step {...newProps}>Innsending</Stepper.Step>
-        </Stepper>
-        <BodyLong style={{ marginTop: "5rem" }}>
-          {storyTexts[activeStep]}
-        </BodyLong>
-      </div>
-    );
-  },
+  const newProps = {
+    onClick: (e) => e.preventDefault(),
+    ...(asButton ? { as: "button" } : { href: "#" }),
+  };
 
-  args: {
-    asButton: false,
-    interactive: true,
-    completed: false,
-  },
+  return (
+    <div style={{ display: "flex", gap: "10rem", flexDirection: "column" }}>
+      <Stepper
+        aria-labelledby="stepper-heading"
+        activeStep={activeStep}
+        onStepChange={setActiveStep}
+        orientation="vertical"
+        {...props}
+      >
+        <Stepper.Step {...newProps} completed={props.completed}>
+          Start søknad
+        </Stepper.Step>
+        <Stepper.Step {...newProps}>Personopplysninger</Stepper.Step>
+        <Stepper.Step {...newProps} completed={props.completed}>
+          Saksopplysninger
+        </Stepper.Step>
+        <Stepper.Step {...newProps} completed={props.completed}>
+          Søknadstekst for en veldig spesifikk prosess i NAV som må beskrives og
+          forklares i sitt fulle i denne labelen
+        </Stepper.Step>
+        <Stepper.Step {...newProps}>Vedlegg</Stepper.Step>
+        <Stepper.Step {...newProps}>Oppsummering</Stepper.Step>
+        <Stepper.Step {...newProps}>Innsending</Stepper.Step>
+      </Stepper>
+      <BodyLong style={{ marginTop: "5rem" }}>
+        {storyTexts[activeStep]}
+      </BodyLong>
+    </div>
+  );
+};
+Default.args = {
+  asButton: false,
+  interactive: true,
+  completed: false,
 };
 
 export const Horizontal = () => {

package/src/table/stories/table-expandable.stories.tsx

@@ -147,7 +147,7 @@ const data = [
     status: "Inaktiv",
     content: (
       <>
-        Ola Conny Brakkestad sier "hei". Her er litt innhold med en{" "}
+        Ola Conny Brakkestad sier hei. Her er litt innhold med en{" "}
         <Link href="#">link.</Link>
       </>
     ),
@@ -162,7 +162,7 @@ const data = [
     status: <Link href="http://example.com">Hissig</Link>,
     content: (
       <>
-        Henriette Kristensen sier "hei". Her er litt innhold med en{" "}
+        Henriette Kristensen sier hei. Her er litt innhold med en{" "}
         <Link href="http://example.com">lenke</Link>. I forhold til en betydelig
         avveining synliggjøres potensialet med sikte på satsingsområdet. Gitt en
         manglende avveining synliggjøres instrumentet på bakgrunn av forholdene.
@@ -183,7 +183,7 @@ const data = [
     status: "Deaktivert",
     content: (
       <>
-        Suki Clydesdale sier "hei". Her er litt innhold med en{" "}
+        Suki Clydesdale sier hei. Her er litt innhold med en{" "}
         <Link href="http://example.com">link</Link>.
       </>
     ),
@@ -198,7 +198,7 @@ const data = [
     status: <Link href="#">Starter</Link>,
     content: (
       <>
-        Hans-Hermann Hoppe sier "hei". Her er litt innhold med en{" "}
+        Hans-Hermann Hoppe sier hei. Her er litt innhold med en{" "}
         <Link href="http://example.com">link</Link>.
       </>
     ),
@@ -213,7 +213,7 @@ const data = [
     status: <Link href="#">Eksplodert</Link>,
     content: (
       <>
-        Max Kraft sier "hei". Her er litt innhold med en{" "}
+        Max Kraft sier hei. Her er litt innhold med en{" "}
         <Link href="http://example.com">link</Link>.
       </>
     ),
@@ -228,7 +228,7 @@ const data = [
     status: <Link href="#">Gunstig</Link>,
     content: (
       <>
-        Pat Ole sier "hei". Her er litt innhold med en{" "}
+        Pat Ole sier hei. Her er litt innhold med en{" "}
         <Link href="http://example.com">lenke</Link>.
       </>
     ),
@@ -265,62 +265,58 @@ export const ExpandableOpen = () => {
   );
 };
 
-export const ClickableRow = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isRowOpen1, setIsRowOpen1] = useState(false);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isRowOpen2, setIsRowOpen2] = useState(false);
+export const ClickableRow = () => {
+  const [isRowOpen1, setIsRowOpen1] = useState(false);
+  const [isRowOpen2, setIsRowOpen2] = useState(false);
 
-    return (
-      <>
-        <Table zebraStripes>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>Navn</Table.HeaderCell>
-              <Table.HeaderCell>Info</Table.HeaderCell>
-              <Table.HeaderCell aria-hidden />
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            <Table.ExpandableRow
-              content={<div>placeholder row 1</div>}
-              togglePlacement="right"
-              onOpenChange={setIsRowOpen1}
-              data-testid="row1"
-              open={isRowOpen1}
-              expandOnRowClick
-            >
-              <Table.DataCell>Ola</Table.DataCell>
-              <Table.DataCell>
-                <Button
-                  size="xsmall"
-                  onClick={(e) => {
-                    alert("Mer info");
-                  }}
-                >
-                  Mer info
-                </Button>
-              </Table.DataCell>
-            </Table.ExpandableRow>
-            <Table.ExpandableRow
-              content={<div>placeholder row 2</div>}
-              togglePlacement="right"
-              onOpenChange={setIsRowOpen2}
-              data-testid="row2"
-              open={isRowOpen2}
-              expandOnRowClick
-            >
-              <Table.DataCell>Hans</Table.DataCell>
-              <Table.DataCell>
-                <Checkbox hideLabel size="small">
-                  Sett
-                </Checkbox>
-              </Table.DataCell>
-            </Table.ExpandableRow>
-          </Table.Body>
-        </Table>
-      </>
-    );
-  },
+  return (
+    <>
+      <Table zebraStripes>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Navn</Table.HeaderCell>
+            <Table.HeaderCell>Info</Table.HeaderCell>
+            <Table.HeaderCell aria-hidden />
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.ExpandableRow
+            content={<div>placeholder row 1</div>}
+            togglePlacement="right"
+            onOpenChange={setIsRowOpen1}
+            data-testid="row1"
+            open={isRowOpen1}
+            expandOnRowClick
+          >
+            <Table.DataCell>Ola</Table.DataCell>
+            <Table.DataCell>
+              <Button
+                size="xsmall"
+                onClick={() => {
+                  alert("Mer info");
+                }}
+              >
+                Mer info
+              </Button>
+            </Table.DataCell>
+          </Table.ExpandableRow>
+          <Table.ExpandableRow
+            content={<div>placeholder row 2</div>}
+            togglePlacement="right"
+            onOpenChange={setIsRowOpen2}
+            data-testid="row2"
+            open={isRowOpen2}
+            expandOnRowClick
+          >
+            <Table.DataCell>Hans</Table.DataCell>
+            <Table.DataCell>
+              <Checkbox hideLabel size="small">
+                Sett
+              </Checkbox>
+            </Table.DataCell>
+          </Table.ExpandableRow>
+        </Table.Body>
+      </Table>
+    </>
+  );
 };

package/src/tabs/TabList.tsx

@@ -34,13 +34,10 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
         debounce(() => {
           if (!listRef?.current) return;
           const { scrollWidth, clientWidth } = listRef.current;
-          let showStartScroll;
-          let showEndScroll;
-
-          const scrollLeft = listRef?.current?.scrollLeft;
+          const scrollLeft = listRef.current.scrollLeft;
           // use 1 for the potential rounding error with browser zooms.
-          showStartScroll = scrollLeft > 1;
-          showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+          const showStartScroll = scrollLeft > 1;
+          const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
 
           setDisplayScroll((displayScroll) =>
             showStartScroll === displayScroll.start &&
@@ -89,6 +86,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
       dir: 1 | -1;
       hidden: boolean;
     }) => (
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div
         className={cl("navds-tabs__scroll-button", {
           "navds-tabs__scroll-button--hidden": hidden,

package/src/tabs/Tabs.stories.tsx

@@ -8,19 +8,19 @@ export default {
   component: Tabs,
   argTypes: {
     size: {
+      options: ["medium", "small"],
       control: {
         type: "radio",
-        options: ["medium", "small"],
       },
     },
     iconPosition: {
+      options: ["top", "left"],
       control: {
         type: "radio",
-        options: ["top", "left"],
       },
     },
   },
-} as Meta;
+} satisfies Meta<typeof Tabs>;
 
 const Panel = () => {
   return (

package/src/tag/tag.stories.tsx

@@ -66,7 +66,7 @@ export const Default = {
 export const Small = () => {
   return (
     <div className="rowgap rowgap-wrap">
-      {variants.map((variant, i) => (
+      {variants.map((variant) => (
         <Tag key={variant} variant={variant} size="small">
           {variant}
         </Tag>
@@ -75,10 +75,10 @@ export const Small = () => {
   );
 };
 
-export const xSmall = () => {
+export const XSmall = () => {
   return (
     <div className="rowgap rowgap-wrap">
-      {variants.map((variant, i) => (
+      {variants.map((variant) => (
         <Tag key={variant} variant={variant} size="xsmall">
           {variant}
         </Tag>
@@ -90,7 +90,7 @@ export const xSmall = () => {
 export const Variants = () => {
   return (
     <div className="rowgap rowgap-wrap">
-      {variants.map((variant, i) => (
+      {variants.map((variant) => (
         <Tag key={variant} variant={variant}>
           {variant}
         </Tag>

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>
         )}
       </>
     );