@navikt/ds-react 5.12.5 → 5.14.0

package/src/timeline/AxisLabels.tsx

@@ -1,4 +1,3 @@
-import { Detail } from "../typography/Detail";
 import {
   addDays,
   addMonths,
@@ -16,6 +15,7 @@ import {
 } from "date-fns";
 import nbLocale from "date-fns/locale/nb";
 import React from "react";
+import { Detail } from "../typography/Detail";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { isVisible } from "./utils";
 import { horizontalPositionAndWidth } from "./utils/calc";
@@ -26,7 +26,7 @@ export const dayLabels = (
   end: Date,
   totalDays: number,
   direction: "left" | "right",
-  template: string = "dd.MM"
+  template: string = "dd.MM",
 ): AxisLabel[] => {
   const increment = Math.ceil(totalDays / 10);
   const lastDay = startOfDay(end);
@@ -39,7 +39,7 @@ export const dayLabels = (
         day,
         addDays(day, 1),
         start,
-        end
+        end,
       );
       return {
         direction,
@@ -56,7 +56,7 @@ export const monthLabels = (
   start: Date,
   end: Date,
   direction: "left" | "right",
-  template: string = "MMM yy"
+  template: string = "MMM yy",
 ): AxisLabel[] => {
   const startMonth = startOfMonth(start);
   const endMonth = endOfMonth(end);
@@ -67,7 +67,7 @@ export const monthLabels = (
       month,
       addMonths(month, 1),
       start,
-      end
+      end,
     );
     return {
       direction,
@@ -83,7 +83,7 @@ export const yearLabels = (
   start: Date,
   end: Date,
   direction: "left" | "right",
-  template: string = "yyyy"
+  template: string = "yyyy",
 ): AxisLabel[] => {
   const firstYear = startOfYear(start);
   const lastYear = endOfYear(end);
@@ -94,7 +94,7 @@ export const yearLabels = (
       year,
       addYears(year, 1),
       start,
-      end
+      end,
     );
     return {
       direction,
@@ -110,7 +110,7 @@ const axisLabels = (
   start: Date,
   end: Date,
   direction: "left" | "right",
-  templates?: AxisLabelTemplates
+  templates?: AxisLabelTemplates,
 ): AxisLabel[] => {
   const totalDays = differenceInDays(end, start);
   if (totalDays < 40) {
@@ -129,7 +129,7 @@ export const AxisLabels = ({
 }) => {
   const { endDate, startDate, direction } = useTimelineContext();
   const labels = axisLabels(startDate, endDate, direction, templates).filter(
-    isVisible
+    isVisible,
   );
 
   return (

package/src/timeline/Pin.tsx

@@ -14,8 +14,8 @@ import {
   useRole,
 } from "@floating-ui/react";
 import { format } from "date-fns";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
-import { mergeRefs } from "../util";
+import React, { forwardRef, useRef, useState } from "react";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 import { TimelineComponentTypes } from "./utils/types.internal";
@@ -81,10 +81,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
       role,
     ]);
 
-    const mergedRef = useMemo(
-      () => mergeRefs([refs.setReference, ref]),
-      [ref, refs.setReference]
-    );
+    const mergedRef = useMergeRefs(refs.setReference, ref);
 
     const staticSide = {
       top: "bottom",
@@ -148,7 +145,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
         )}
       </>
     );
-  }
+  },
 ) as PinType;
 
 Pin.componentType = "pin";

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

@@ -14,8 +14,8 @@ import {
   useRole,
 } from "@floating-ui/react";
 import cl from "clsx";
-import React, { useMemo, useRef, useState } from "react";
-import { mergeRefs } from "../../util";
+import React, { useRef, useState } from "react";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -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>;
@@ -89,10 +89,7 @@ const ClickablePeriod = React.memo(
       role,
     ]);
 
-    const mergedRef = useMemo(
-      () => mergeRefs([refs.setReference, periodRef]),
-      [periodRef, refs.setReference]
-    );
+    const mergedRef = useMergeRefs(refs.setReference, periodRef);
 
     const staticSide = {
       top: "bottom",
@@ -117,7 +114,7 @@ const ClickablePeriod = React.memo(
             restProps?.className,
             {
               "navds-timeline__period--selected": isActive,
-            }
+            },
           )}
           aria-expanded={children ? open : undefined}
           aria-current={isActive || undefined}
@@ -179,7 +176,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 { useId } from "../util/hooks";
 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"));