@navikt/ds-react 5.12.4 → 5.13.0

package/src/timeline/Timeline.tsx

@@ -89,7 +89,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       axisLabelTemplates,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const isMultipleRows = Array.isArray(children);
 
@@ -101,7 +101,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       children = [children];
     }
     const rowChildren = React.Children.toArray(children).filter(
-      (c: any) => c?.type?.componentType === "row"
+      (c: any) => c?.type?.componentType === "row",
     );
 
     const pins = React.Children.toArray(children)
@@ -109,7 +109,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       .map((x) => () => x);
 
     const zoomComponent = React.Children.toArray(children).find(
-      (c: any) => c?.type?.componentType === "zoom"
+      (c: any) => c?.type?.componentType === "zoom",
     );
 
     const rowsRaw = useMemo(() => {
@@ -127,7 +127,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
     const [start, setStart] = useState(initialStartDate);
     const [activeRow, setActiveRow] = useState<number | null>(null);
     const [endInclusive, setEndInclusive] = useState(
-      endOfDay(useLatestDate({ endDate, rows }))
+      endOfDay(useLatestDate({ endDate, rows })),
     );
 
     const initialEndDate = endOfDay(useLatestDate({ endDate, rows }));
@@ -135,14 +135,14 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       rowsRaw,
       startDate ?? start,
       endDate ?? endInclusive,
-      direction
+      direction,
     );
 
     const handleZoomChange = (zoomStart: Date) => {
       if (startDate || endDate) {
         if (process.env.NODE_ENV !== "production") {
           console.warn(
-            "Zooming is not supported when startDate or endDate is set"
+            "Zooming is not supported when startDate or endDate is set",
           );
         }
         return;
@@ -242,7 +242,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
         </div>
       </TimelineContext.Provider>
     );
-  }
+  },
 ) as TimelineComponent;
 
 Timeline.Row = TimelineRow;

package/src/timeline/TimelineRow.tsx

@@ -1,6 +1,7 @@
-import { BodyShort } from "../typography/BodyShort";
+import cl from "clsx";
 import { format } from "date-fns";
 import React, { forwardRef } from "react";
+import { BodyShort } from "../typography/BodyShort";
 import { PeriodContext } from "./hooks/usePeriodContext";
 import { useRowContext } from "./hooks/useRowContext";
 import { useTimelineContext } from "./hooks/useTimelineContext";
@@ -9,7 +10,6 @@ import {
   PositionedPeriod,
   TimelineComponentTypes,
 } from "./utils/types.internal";
-import cl from "clsx";
 
 export interface TimelineRowProps
   extends React.HTMLAttributes<HTMLOListElement> {
@@ -49,7 +49,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
     }, {} as PositionedPeriod);
 
     const firstFocusable = periods.find(
-      (p) => !!p.children || !!p.onSelectPeriod
+      (p) => !!p.children || !!p.onSelectPeriod,
     );
 
     return (
@@ -80,7 +80,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
                 ? "Ingen perioder"
                 : `${format(earliest.start, "dd.MM.yyyy")} til ${format(
                     latest.end,
-                    "dd.MM.yyyy"
+                    "dd.MM.yyyy",
                   )}`
             }
             className={cl("navds-timeline__row-periods", className)}
@@ -116,7 +116,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
         </div>
       </>
     );
-  }
+  },
 ) as TimelineRowType;
 
 TimelineRow.componentType = "row";

package/src/timeline/hooks/useTimelineContext.tsx

@@ -29,7 +29,7 @@ export const useTimelineContext = () => {
 
   if (!context) {
     console.warn(
-      "useTimelineContext must be used with TimelineContext (<Timeline />)"
+      "useTimelineContext must be used with TimelineContext (<Timeline />)",
     );
   }
 

package/src/timeline/hooks/useTimelineRows.ts

@@ -1,7 +1,7 @@
-import { useMemo } from "react";
-
 import { addDays, endOfDay, isAfter, startOfDay, subDays } from "date-fns";
-
+import { useMemo } from "react";
+import { horizontalPositionAndWidth } from "../utils/calc";
+import { invisiblePeriods, withinADay } from "../utils/filter";
 import { lastPeriod } from "../utils/sort";
 import { Period } from "../utils/types.external";
 import {
@@ -9,9 +9,6 @@ import {
   PositionedPeriod,
 } from "../utils/types.internal";
 
-import { horizontalPositionAndWidth } from "../utils/calc";
-import { invisiblePeriods, withinADay } from "../utils/filter";
-
 const spatialPeriod = (
   period: Period,
   timelineStart: Date,
@@ -19,7 +16,7 @@ const spatialPeriod = (
   direction: "left" | "right" = "left",
   i: number,
   periods: PositionedPeriod[],
-  rowIndex: number
+  rowIndex: number,
 ): PositionedPeriod => {
   const start = period.start;
   const endInclusive = period.end;
@@ -30,10 +27,12 @@ const spatialPeriod = (
   const { horizontalPosition, width } = horizontalPositionAndWidth(
     startOfDay(start),
     endOfDay(
-      rightOverlap ? startOfDay(subDays(periods[i + 1].start, 1)) : endInclusive
+      rightOverlap
+        ? startOfDay(subDays(periods[i + 1].start, 1))
+        : endInclusive,
     ),
     timelineStart,
-    timelineEndInclusive
+    timelineEndInclusive,
   );
 
   return {
@@ -56,7 +55,7 @@ const spatialPeriod = (
 const adjustedEdges = (
   period: PositionedPeriod,
   i: number,
-  allPeriods: PositionedPeriod[]
+  allPeriods: PositionedPeriod[],
 ): PositionedPeriod => {
   const left =
     i > 0 && withinADay(period.start, allPeriods[i - 1].endInclusive);
@@ -67,10 +66,10 @@ const adjustedEdges = (
   return left && right
     ? { ...period, cropped: "both" }
     : left
-    ? { ...period, cropped: "left" }
-    : right
-    ? { ...period, cropped: "right" }
-    : period;
+      ? { ...period, cropped: "left" }
+      : right
+        ? { ...period, cropped: "right" }
+        : period;
 };
 
 const trimmedPeriods = (period: PositionedPeriod) => {
@@ -97,7 +96,7 @@ export const useTimelineRows = (
   rows: any,
   startDate: Date,
   endDate: Date,
-  direction: "left" | "right"
+  direction: "left" | "right",
 ): InternalSimpleTimeline[] =>
   useMemo(
     () =>
@@ -112,7 +111,7 @@ export const useTimelineRows = (
               direction,
               i,
               periods.periods,
-              rowIndex
+              rowIndex,
             ),
             restProps: period?.restProps,
             ref: period?.ref,
@@ -132,7 +131,7 @@ export const useTimelineRows = (
           ref: periods?.ref,
         };
       }),
-    [rows, startDate, endDate, direction]
+    [rows, startDate, endDate, direction],
   );
 
 const earliestDate = (earliest: Date, period: Period) =>
@@ -144,7 +143,7 @@ const earliestFomDate = (rader: Period[][]) =>
 export const useEarliestDate = ({ startDate, rows }: any) =>
   useMemo(
     () => (startDate ? startDate : earliestFomDate(rows)),
-    [startDate, rows]
+    [startDate, rows],
   );
 
 const latestDate = (latest: Date, period: Period) =>
@@ -156,5 +155,5 @@ const latestTomDate = (rows: Period[][]) =>
 export const useLatestDate = ({ endDate, rows }: any) =>
   useMemo(
     () => (endDate ? endDate : addDays(latestTomDate(rows), 1)),
-    [endDate, rows]
+    [endDate, rows],
   );

package/src/timeline/period/ClickablePeriod.tsx

@@ -24,7 +24,7 @@ import { PeriodProps } from "./types";
 
 interface TimelineClickablePeriodProps extends PeriodProps {
   onSelectPeriod?: (
-    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
+    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
   ) => void;
   isActive?: boolean;
   periodRef: React.ForwardedRef<HTMLButtonElement>;
@@ -91,7 +91,7 @@ const ClickablePeriod = React.memo(
 
     const mergedRef = useMemo(
       () => mergeRefs([refs.setReference, periodRef]),
-      [periodRef, refs.setReference]
+      [periodRef, refs.setReference],
     );
 
     const staticSide = {
@@ -117,7 +117,7 @@ const ClickablePeriod = React.memo(
             restProps?.className,
             {
               "navds-timeline__period--selected": isActive,
-            }
+            },
           )}
           aria-expanded={children ? open : undefined}
           aria-current={isActive || undefined}
@@ -179,7 +179,7 @@ const ClickablePeriod = React.memo(
         )}
       </>
     );
-  }
+  },
 );
 
 export default ClickablePeriod;

package/src/timeline/period/NonClickablePeriod.tsx

@@ -26,7 +26,7 @@ const NonClickablePeriod = ({
       {...restProps}
       className={cl(
         getConditionalClasses(cropped, direction, status),
-        restProps?.className
+        restProps?.className,
       )}
       style={{
         width: `${width}%`,

package/src/timeline/period/index.tsx

@@ -109,7 +109,7 @@ export const Period = forwardRef<HTMLDivElement, TimelinePeriodProps>(
         restProps={restProps}
       />
     );
-  }
+  },
 ) as PeriodType;
 
 Period.componentType = "period";

package/src/timeline/timeline.stories.tsx

@@ -1,8 +1,8 @@
-import { CheckmarkCircleFillIcon } from "@navikt/aksel-icons";
 import { Meta } from "@storybook/react";
 import * as React from "react";
-import Timeline from "./Timeline";
 import { useState } from "react";
+import { CheckmarkCircleFillIcon } from "@navikt/aksel-icons";
+import Timeline from "./Timeline";
 
 export default {
   title: "ds-react/Timeline",

package/src/timeline/utils/calc.ts

@@ -9,12 +9,12 @@ export const horizontalPositionAndWidth = (
   start: Date,
   endInclusive: Date,
   timelineStart: Date,
-  timelineEndInclusive: Date
+  timelineEndInclusive: Date,
 ) => {
   const horizontalPosition = position(
     start,
     timelineStart,
-    timelineEndInclusive
+    timelineEndInclusive,
   );
   const width =
     position(endInclusive, timelineStart, timelineEndInclusive) -

package/src/timeline/utils/filter.ts

@@ -12,13 +12,13 @@ export const isVisible = ({ horizontalPosition }: Positioned): boolean =>
 
 export const getFirstDate = (periods: any) => {
   return periods.sort(
-    (a: PeriodProps, b: PeriodProps) => a.start.getTime() - b.start.getTime()
+    (a: PeriodProps, b: PeriodProps) => a.start.getTime() - b.start.getTime(),
   )[0].start;
 };
 
 export const getLastDate = (periods: any) => {
   return periods.sort(
-    (a: PeriodProps, b: PeriodProps) => a.end.getTime() - b.end.getTime()
+    (a: PeriodProps, b: PeriodProps) => a.end.getTime() - b.end.getTime(),
   )[periods.length - 1].end;
 };
 

package/src/timeline/utils/period.ts

@@ -4,7 +4,7 @@ import { format } from "date-fns";
 export const getConditionalClasses = (
   cropped: string,
   direction: string,
-  status: string
+  status: string,
 ) => {
   return cl(`navds-timeline__period navds-timeline__period--${status}`, {
     "navds-timeline__period--connected-both": cropped === "both",
@@ -38,7 +38,7 @@ export const ariaLabel = (
   startDate: Date,
   endDate: Date,
   status: string,
-  statusLabel?: string
+  statusLabel?: string,
 ): string => {
   const start = format(startDate, "dd.MM.yyyy");
   const end = format(endDate, "dd.MM.yyyy");

package/src/timeline/utils/timeline.ts

@@ -1,5 +1,5 @@
-import { omit } from "../../util";
 import React, { ReactNode } from "react";
+import { omit } from "../../util";
 import { Period } from "./types.external";
 
 type ParsedChild = {

package/src/timeline/zoom/ZoomButton.tsx

@@ -1,4 +1,3 @@
-import { Detail } from "../../typography/Detail";
 import {
   addMonths,
   addYears,
@@ -8,6 +7,7 @@ import {
   subYears,
 } from "date-fns";
 import React, { forwardRef } from "react";
+import { Detail } from "../../typography/Detail";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 
 export interface TimelineZoomButtonProps {
@@ -61,7 +61,7 @@ export const ZoomButton: ZoomButtonType = forwardRef(
             !currentZoom
               ? `Zoom tidslinjen ${format(
                   startOfRange,
-                  "dd.MM.yyyy"
+                  "dd.MM.yyyy",
                 )} til ${format(endDate, "dd.MM.yyyy")}`
               : "Tilbakestill til initiell tidsperspektiv"
           }
@@ -77,7 +77,7 @@ export const ZoomButton: ZoomButtonType = forwardRef(
         </button>
       </Detail>
     );
-  }
+  },
 );
 
 export default ZoomButton;

package/src/timeline/zoom/index.tsx

@@ -21,7 +21,7 @@ export const Zoom = forwardRef<HTMLUListElement, ZoomProps>(
         {children}
       </ul>
     );
-  }
+  },
 ) as ZoomType;
 
 Zoom.Button = ZoomButton;

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

@@ -1,10 +1,10 @@
+import { Meta } from "@storybook/react";
+import React, { useState } from "react";
 import {
   EnvelopeClosedIcon,
   EnvelopeOpenIcon,
   InboxUpIcon,
 } from "@navikt/aksel-icons";
-import { Meta } from "@storybook/react";
-import React, { useState } from "react";
 import { ToggleGroup } from "../index";
 
 const meta: Meta<typeof ToggleGroup> = {

package/src/toggle-group/ToggleGroup.tsx

@@ -1,10 +1,10 @@
 import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import cl from "clsx";
-import React, { forwardRef, HTMLAttributes, useState } from "react";
+import React, { HTMLAttributes, forwardRef, useState } from "react";
 import { Label } from "../typography";
 import { useId } from "../util";
-import { ToggleGroupContext } from "./context";
 import ToggleItem, { ToggleItemProps } from "./ToggleItem";
+import { ToggleGroupContext } from "./context";
 
 export interface ToggleGroupProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
@@ -81,7 +81,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       variant = "action",
       ...rest
     },
-    ref
+    ref,
   ) => {
     const [groupValue, setGroupValue] = useState(defaultValue);
     const labelId = useId();
@@ -131,7 +131,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
             className={cl(
               "navds-toggle-group",
               `navds-toggle-group--${size}`,
-              `navds-toggle-group--${variant}`
+              `navds-toggle-group--${variant}`,
             )}
             {...(describeBy && { "aria-describedby": describeBy })}
             role="radiogroup"
@@ -142,7 +142,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
         </div>
       </ToggleGroupContext.Provider>
     );
-  }
+  },
 ) as ToggleGroupComponent;
 
 ToggleGroup.Item = ToggleItem;

package/src/toggle-group/ToggleItem.tsx

@@ -35,7 +35,7 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleItemProps>(
         </BodyShort>
       </RadixToggleGroup.Item>
     );
-  }
+  },
 );
 
 export default ToggleItem;

package/src/toggle-group/context.ts

@@ -5,5 +5,5 @@ interface ToggleContextProps {
 }
 
 export const ToggleGroupContext = createContext<ToggleContextProps | null>(
-  null
+  null,
 );

package/src/tooltip/Tooltip.test.tsx

@@ -1,11 +1,11 @@
 import { act, fireEvent, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import React from "react";
 import {
   focusVisible,
-  simulatePointerDown,
   renderWithStyles as render,
+  simulatePointerDown,
 } from "../../tests/utils";
-import userEvent from "@testing-library/user-event";
 import Tooltip from "./Tooltip";
 
 describe("Tooltip", () => {
@@ -15,7 +15,7 @@ describe("Tooltip", () => {
         <button id="testChild" type="submit">
           Hello World
         </button>
-      </Tooltip>
+      </Tooltip>,
     );
 
     expect(screen.getByRole("tooltip")).toBeVisible();
@@ -27,7 +27,7 @@ describe("Tooltip", () => {
         <button id="testChild" type="submit">
           Hello World
         </button>
-      </Tooltip>
+      </Tooltip>,
     );
 
     expect(screen.getByRole("tooltip")).toBeVisible();
@@ -39,7 +39,7 @@ describe("Tooltip", () => {
         <button id="testChild" type="submit">
           Hello World
         </button>
-      </Tooltip>
+      </Tooltip>,
     );
     simulatePointerDown();
 
@@ -53,7 +53,7 @@ describe("Tooltip", () => {
         <button id="testChild" type="submit">
           Hello World
         </button>
-      </Tooltip>
+      </Tooltip>,
     );
     simulatePointerDown();
 
@@ -72,7 +72,7 @@ describe("Tooltip", () => {
         <button id="testChild" type="submit">
           Hello World
         </button>
-      </Tooltip>
+      </Tooltip>,
     );
 
     await act(async () => {
@@ -94,7 +94,7 @@ describe("Tooltip", () => {
           </button>
         </Tooltip>
         <a href="/#">link</a>
-      </div>
+      </div>,
     );
 
     simulatePointerDown(screen.getByRole("button"));
@@ -116,7 +116,7 @@ describe("Tooltip", () => {
             Hello World
           </button>
         </Tooltip>
-      </div>
+      </div>,
     );
 
     simulatePointerDown(screen.getByRole("button"));
@@ -137,7 +137,7 @@ describe("Tooltip", () => {
           </button>
         </Tooltip>
         <a href="/#">link</a>
-      </div>
+      </div>,
     );
 
     simulatePointerDown(screen.getByRole("button"));

package/src/tooltip/Tooltip.tsx

@@ -20,12 +20,12 @@ import React, {
   useContext,
   useMemo,
   useRef,
-  useState,
 } from "react";
 import { ModalContext } from "../modal/ModalContext";
 import { useProvider } from "../provider";
 import { Detail } from "../typography";
 import { mergeRefs, useId } from "../util";
+import { useControllableState } from "../util/hooks/useControllableState";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -43,6 +43,10 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
    * @note "open"-prop overwrites this
    */
   defaultOpen?: boolean;
+  /**
+   * Change handler for open
+   */
+  onOpenChange?: (open: boolean) => void;
   /**
    * Orientation for tooltip
    * @default "top"
@@ -98,8 +102,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       className,
       arrow: _arrow = true,
       placement: _placement = "top",
-      open: userOpen,
+      open,
       defaultOpen = false,
+      onOpenChange,
       offset: _offset,
       content,
       delay = 150,
@@ -110,7 +115,12 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     },
     ref
   ) => {
-    const [open, setOpen] = useState(defaultOpen);
+    const [_open, _setOpen] = useControllableState({
+      defaultValue: defaultOpen,
+      value: open,
+      onChange: onOpenChange,
+    });
+
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const modalContext = useContext(ModalContext);
     const providerRootElement = useProvider()?.rootElement;
@@ -131,8 +141,8 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       refs,
     } = useFloating({
       placement: _placement,
-      open: userOpen ?? open,
-      onOpenChange: (_open) => setOpen(_open),
+      open: _open,
+      onOpenChange: (newState) => _setOpen(newState),
       middleware: [
         offset(_offset ? _offset : _arrow ? 10 : 2),
         shift(),
@@ -177,7 +187,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     }
 
     if (content?.length > maxChar) {
-      (userOpen ?? open) &&
+      _open &&
         console.warn(
           `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop\n\nLength:${content.length}\nTooltip-content: ${content}`
         );
@@ -190,14 +200,13 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
           getReferenceProps({
             ...children.props,
             ref: childMergedRef,
-            "aria-describedby":
-              userOpen ?? open
-                ? cl(ariaId, children?.props["aria-describedby"])
-                : children?.props["aria-describedby"],
+            "aria-describedby": _open
+              ? cl(ariaId, children?.props["aria-describedby"])
+              : children?.props["aria-describedby"],
           })
         )}
         <FloatingPortal root={rootElement}>
-          {(userOpen ?? open) && (
+          {_open && (
             <div
               {...getFloatingProps({
                 ...rest,

package/src/tooltip/tooltip.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { Tooltip, Alert, Button, Search } from "..";
+import { Alert, Button, Search, Tooltip } from "..";
 
 export default {
   title: "ds-react/Tooltip",

package/src/typography/BodyLong.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -51,7 +51,7 @@ export const BodyLong: OverridableComponent<
       textColor,
       ...rest
     },
-    ref
+    ref,
   ) => (
     <Component
       {...rest}
@@ -67,10 +67,10 @@ export const BodyLong: OverridableComponent<
           align,
           visuallyHidden,
           textColor,
-        })
+        }),
       )}
     />
-  )
+  ),
 );
 
 export default BodyLong;