@navikt/ds-react 5.12.5 → 5.13.0

package/src/stepper/Stepper.tsx

@@ -79,7 +79,7 @@ export const Stepper: StepperComponent = forwardRef<
       interactive = true,
       ...rest
     },
-    ref
+    ref,
   ) => {
     activeStep = activeStep - 1;
     return (
@@ -89,7 +89,7 @@ export const Stepper: StepperComponent = forwardRef<
         className={cl(
           "navds-stepper",
           orientation === "horizontal" ? "navds-stepper--horizontal" : "",
-          className
+          className,
         )}
       >
         <StepperContext.Provider
@@ -129,7 +129,7 @@ export const Stepper: StepperComponent = forwardRef<
         </StepperContext.Provider>
       </ol>
     );
-  }
+  },
 ) as StepperComponent;
 
 Stepper.Step = Step;

package/src/table/Body.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export interface BodyProps
   extends React.HTMLAttributes<HTMLTableSectionElement> {}

package/src/table/ColumnHeader.tsx

@@ -1,9 +1,9 @@
+import React, { forwardRef, useContext } from "react";
 import {
   ArrowDownIcon,
   ArrowUpIcon,
   ArrowsUpDownIcon,
 } from "@navikt/aksel-icons";
-import React, { forwardRef, useContext } from "react";
 import HeaderCell, { HeaderCellProps } from "./HeaderCell";
 import { TableContext } from "./context";
 
@@ -72,7 +72,7 @@ export const ColumnHeader: ColumnHeaderType = forwardRef(
         )}
       </HeaderCell>
     );
-  }
+  },
 );
 
 export default ColumnHeader;

package/src/table/DataCell.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { BodyShort } from "../typography";
 
 export interface DataCellProps
@@ -30,7 +30,7 @@ export const DataCell: DataCellType = forwardRef(
         {children}
       </BodyShort>
     );
-  }
+  },
 );
 
 export default DataCell;

package/src/table/ExpandableRow.tsx

@@ -1,8 +1,9 @@
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef } from "react";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { useId } from "../util";
 import AnimateHeight from "../util/AnimateHeight";
+import { useControllableState } from "../util/hooks/useControllableState";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
 
@@ -67,17 +68,18 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       colSpan = 999,
       ...rest
     },
-    ref
+    ref,
   ) => {
-    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+    const [_open, _setOpen] = useControllableState({
+      defaultValue: defaultOpen,
+      value: open,
+      onChange: onOpenChange,
+    });
+
     const id = useId();
-    const isOpen = open ?? internalOpen;
 
     const expansionHandler = (e) => {
-      onOpenChange?.(!isOpen);
-      if (open === undefined) {
-        setInternalOpen((oldOpen) => !oldOpen);
-      }
+      _setOpen((x) => !x);
       e.stopPropagation();
     };
 
@@ -90,7 +92,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
           {...rest}
           ref={ref}
           className={cl("navds-table__expandable-row", className, {
-            "navds-table__expandable-row--open": isOpen,
+            "navds-table__expandable-row--open": _open,
             "navds-table__expandable-row--expansion-disabled":
               expansionDisabled,
             "navds-table__expandable-row--clickable": expandOnRowClick,
@@ -103,7 +105,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
           {togglePlacement === "right" && children}
           <DataCell
             className={cl("navds-table__toggle-expand-cell", {
-              "navds-table__toggle-expand-cell--open": isOpen,
+              "navds-table__toggle-expand-cell--open": _open,
             })}
           >
             {!expansionDisabled && (
@@ -111,24 +113,24 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
                 className="navds-table__toggle-expand-button"
                 type="button"
                 aria-controls={id}
-                aria-expanded={isOpen}
+                aria-expanded={_open}
                 onClick={expansionHandler}
               >
                 <ChevronDownIcon
                   className="navds-table__expandable-icon"
-                  title={isOpen ? "Vis mindre" : "Vis mer"}
+                  title={_open ? "Vis mindre" : "Vis mer"}
                 />
               </button>
             )}
           </DataCell>
           {togglePlacement === "left" && children}
         </Row>
-        <tr className="navds-table__expanded-row" aria-hidden={!isOpen} id={id}>
+        <tr className="navds-table__expanded-row" aria-hidden={!_open} id={id}>
           <td colSpan={colSpan} className="navds-table__expanded-row-cell">
             <AnimateHeight
               className="navds-table__expanded-row-collapse"
               innerClassName="navds-table__expanded-row-content"
-              height={isOpen ? "auto" : 0}
+              height={_open ? "auto" : 0}
               duration={250}
             >
               {content}
@@ -137,7 +139,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
         </tr>
       </>
     );
-  }
+  },
 );
 
 function isInteractiveTarget(elm: HTMLElement) {
@@ -146,7 +148,7 @@ function isInteractiveTarget(elm: HTMLElement) {
   }
   if (
     ["BUTTON", "DETAILS", "LABEL", "SELECT", "TEXTAREA", "INPUT", "A"].includes(
-      elm.nodeName
+      elm.nodeName,
     )
   ) {
     return true;

package/src/table/Header.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export interface HeaderProps
   extends React.HTMLAttributes<HTMLTableSectionElement> {}

package/src/table/HeaderCell.tsx

@@ -29,7 +29,7 @@ export const HeaderCell: HeaderCellType = forwardRef(
         {children}
       </th>
     );
-  }
+  },
 );
 
 export default HeaderCell;

package/src/table/Row.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   /**
@@ -29,7 +29,7 @@ export const Row: RowType = forwardRef(
         "navds-table__row--shade-on-hover": shadeOnHover,
       })}
     />
-  )
+  ),
 );
 
 export default Row;

package/src/table/Table.tsx

@@ -87,7 +87,7 @@ export const Table = forwardRef(
       sort,
       ...rest
     },
-    ref
+    ref,
   ) => (
     <TableContext.Provider value={{ onSortChange, sort }}>
       <table
@@ -98,7 +98,7 @@ export const Table = forwardRef(
         })}
       />
     </TableContext.Provider>
-  )
+  ),
 ) as TableType;
 
 Table.Header = Header;

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

@@ -25,7 +25,7 @@ const updateData = async (url: string) => {
   const comparator = (
     a: Record<string, string | number | null>,
     b: Record<string, string | number | null>,
-    orderBy: string
+    orderBy: string,
   ) => {
     if ((b[orderBy] ?? "") < (a[orderBy] ?? "")) {
       return -1;
@@ -40,7 +40,7 @@ const updateData = async (url: string) => {
   const sort = newUrl.searchParams.get("sort");
 
   await new Promise((resolve) =>
-    setTimeout(resolve, Math.round(Math.random() * (1000 - 200) + 200))
+    setTimeout(resolve, Math.round(Math.random() * (1000 - 200) + 200)),
   );
 
   return {
@@ -69,7 +69,7 @@ export const Async = () => {
       page,
       sort: sort ? `${sort.orderBy}:${sort.direction}` : undefined,
     })}`,
-    (url) => updateData(url)
+    (url) => updateData(url),
   );
 
   if (!data) {
@@ -125,7 +125,7 @@ export const Async = () => {
                       sort?.direction === "ascending"
                         ? "descending"
                         : "ascending",
-                  }
+                  },
             )
           }
         >

package/src/table/stories/table.stories.tsx

@@ -164,7 +164,7 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
         setList((oldList) =>
           oldList.includes(value)
             ? oldList.filter((id) => id !== value)
-            : [...oldList, value]
+            : [...oldList, value],
         ),
     ];
   };

package/src/tabs/Tab.tsx

@@ -25,7 +25,7 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
   forwardRef(
     (
       { className, as: Component = "button", label, icon, value, ...rest },
-      ref
+      ref,
     ) => {
       const context = useContext(TabsContext);
 
@@ -45,7 +45,7 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
               className,
               {
                 "navds-tabs__tab--icon-only": icon && !label,
-              }
+              },
             )}
             {...rest}
           >
@@ -60,7 +60,7 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
           </Component>
         </RadixTabs.Trigger>
       );
-    }
+    },
   );
 
 export default Tab;

package/src/tabs/TabList.tsx

@@ -1,4 +1,3 @@
-import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { TabsList } from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, {
@@ -9,6 +8,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { debounce, mergeRefs } from "../util";
 import { TabsContext } from "./context";
 
@@ -43,10 +43,10 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
             showStartScroll === oldDisplayScroll.start &&
             showEndScroll === oldDisplayScroll.end
               ? oldDisplayScroll
-              : { start: showStartScroll, end: showEndScroll }
+              : { start: showStartScroll, end: showEndScroll },
           );
         }),
-      []
+      [],
     );
 
     useEffect(() => {
@@ -120,7 +120,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
         {showSteppers && <ScrollButton dir={1} hidden={!displayScroll.end} />}
       </div>
     );
-  }
+  },
 );
 
 export default TabList;

package/src/tabs/TabPanel.tsx

@@ -20,7 +20,7 @@ const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
       ref={ref}
       className={cl("navds-tabs__tabpanel", className)}
     />
-  )
+  ),
 );
 
 export default TabPanel;

package/src/tabs/Tabs.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
+import { DishwasherIcon, FreezerIcon, MugIcon } from "@navikt/aksel-icons";
 import { Tabs } from ".";
-import { FreezerIcon, MugIcon, DishwasherIcon } from "@navikt/aksel-icons";
 
 export default {
   title: "ds-react/Tabs",

package/src/tabs/Tabs.tsx

@@ -1,11 +1,11 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
-import React, { forwardRef, HTMLAttributes } from "react";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
-import { TabsContext } from "./context";
 import Tab, { TabProps } from "./Tab";
 import TabList, { TabListProps } from "./TabList";
 import TabPanel, { TabPanelProps } from "./TabPanel";
+import { TabsContext } from "./context";
 
 export interface TabsProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
@@ -105,7 +105,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
       iconPosition = "left",
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <RadixTabs.Root
@@ -126,7 +126,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
         </TabsContext.Provider>
       </RadixTabs.Root>
     );
-  }
+  },
 ) as TabsComponent;
 
 Tabs.Tab = Tab;

package/src/tag/Tag.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { BodyShort } from "../typography";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
@@ -60,10 +60,10 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
         "navds-tag",
         className,
         `navds-tag--${variant}`,
-        `navds-tag--${size}`
+        `navds-tag--${size}`,
       )}
     />
-  )
+  ),
 );
 
 export default Tag;

package/src/tag/tag.stories.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import type { Meta } from "@storybook/react";
+import React from "react";
 import { Tag, TagProps } from ".";
 
 const variants: TagProps["variant"][] = [

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

@@ -83,7 +83,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
 
     const mergedRef = useMemo(
       () => mergeRefs([refs.setReference, ref]),
-      [ref, refs.setReference]
+      [ref, refs.setReference],
     );
 
     const staticSide = {
@@ -148,7 +148,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 />)",
     );
   }