@navikt/ds-react 5.12.5 → 5.13.0

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;

package/src/typography/BodyShort.tsx

@@ -49,7 +49,7 @@ export const BodyShort: OverridableComponent<
       textColor,
       ...rest
     },
-    ref
+    ref,
   ) => (
     <Component
       {...rest}
@@ -65,10 +65,10 @@ export const BodyShort: OverridableComponent<
           align,
           visuallyHidden,
           textColor,
-        })
+        }),
       )}
     />
-  )
+  ),
 );
 
 export default BodyShort;

package/src/typography/Detail.tsx

@@ -51,7 +51,7 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
         textColor,
         ...rest
       },
-      ref
+      ref,
     ) => (
       <Component
         {...rest}
@@ -70,10 +70,10 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
           }),
           {
             "navds-detail--small": size === "small",
-          }
+          },
         )}
       />
-    )
+    ),
   );
 
 export default Detail;

package/src/typography/ErrorMessage.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";
@@ -49,10 +49,10 @@ export const ErrorMessage: OverridableComponent<
         }),
         {
           "navds-label--small": size === "small",
-        }
+        },
       )}
     />
-  )
+  ),
 );
 
 export default ErrorMessage;

package/src/typography/Heading.tsx

@@ -50,7 +50,7 @@ export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
         textColor,
         ...rest
       },
-      ref
+      ref,
     ) => {
       const HeadingTag = as ?? (`h${level}` as React.ElementType);
 
@@ -67,11 +67,11 @@ export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
               align,
               visuallyHidden,
               textColor,
-            })
+            }),
           )}
         />
       );
-    }
+    },
   );
 
 export default Heading;

package/src/typography/Ingress.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface IngressProps

package/src/typography/Label.tsx

@@ -44,7 +44,7 @@ export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
         textColor,
         ...rest
       },
-      ref
+      ref,
     ) => (
       <Component
         {...rest}
@@ -59,10 +59,10 @@ export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
           }),
           {
             "navds-label--small": size === "small",
-          }
+          },
         )}
       />
-    )
+    ),
   );
 
 export default Label;