@navikt/ds-react 5.12.4 → 5.13.0

package/src/read-more/ReadMore.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyLong } from "../typography";
+import { useControllableState } from "../util/hooks/useControllableState";
 
 export interface ReadMoreProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -23,6 +24,10 @@ export interface ReadMoreProps
    * @default false
    */
   defaultOpen?: boolean;
+  /**
+   * Callback for current open-state
+   */
+  onOpenChange?: (open: boolean) => void;
   /**
    * Changes fontsize for content
    * @default medium
@@ -57,13 +62,16 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
       defaultOpen = false,
       onClick,
       size = "medium",
+      onOpenChange,
       ...rest
     },
-    ref
+    ref,
   ) => {
-    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
-
-    const isOpened = open ?? internalOpen;
+    const [_open, _setOpen] = useControllableState({
+      defaultValue: defaultOpen,
+      value: open,
+      onChange: onOpenChange,
+    });
 
     return (
       <div
@@ -71,7 +79,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           "navds-read-more",
           `navds-read-more--${size}`,
           className,
-          { "navds-read-more--open": isOpened }
+          { "navds-read-more--open": _open },
         )}
       >
         <button
@@ -82,12 +90,10 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
             "navds-body-short--small": size === "small",
           })}
           onClick={(e) => {
-            if (open === undefined) {
-              setInternalOpen((isOpen) => !isOpen);
-            }
+            _setOpen((x) => !x);
             onClick?.(e);
           }}
-          aria-expanded={isOpened}
+          aria-expanded={_open}
         >
           <ChevronDownIcon
             className="navds-read-more__expand-icon"
@@ -98,9 +104,9 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
         <BodyLong
           as="div"
-          aria-hidden={!isOpened}
+          aria-hidden={!_open}
           className={cl("navds-read-more__content", {
-            "navds-read-more__content--closed": !isOpened,
+            "navds-read-more__content--closed": !_open,
           })}
           size={size}
         >
@@ -108,7 +114,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
         </BodyLong>
       </div>
     );
-  }
+  },
 );
 
 export default ReadMore;

package/src/read-more/readmore.stories.tsx

@@ -11,6 +11,7 @@ export default meta;
 export const Default: StoryFn<{
   controlled: boolean;
   size: "medium" | "small";
+  defaultOpen: boolean;
 }> = (props) => {
   const [state, setState] = useState(false);
 
@@ -20,6 +21,8 @@ export const Default: StoryFn<{
       onClick={() => setState((x) => !x)}
       header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
       size={props.size}
+      onOpenChange={console.log}
+      defaultOpen={props.defaultOpen}
     >
       <div style={{ maxWidth: 300 }}>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia,
@@ -32,6 +35,7 @@ export const Default: StoryFn<{
 Default.args = {
   controlled: false,
   size: "medium",
+  defaultOpen: false,
 };
 Default.argTypes = {
   size: {

package/src/skeleton/Skeleton.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
@@ -43,7 +43,7 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
       as: As = "div",
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <As
@@ -58,7 +58,7 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
             "navds-skeleton--no-height": !height,
             "navds-skeleton--no-width": !width,
             "navds-skeleton--inline": As === "span",
-          }
+          },
         )}
         style={{ ...style, width, height }}
         aria-hidden
@@ -66,7 +66,7 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
         {children}
       </As>
     );
-  }
+  },
 );
 
 export default Skeleton;

package/src/stepper/Step.tsx

@@ -58,7 +58,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
         interactive,
         ...rest
       },
-      ref
+      ref,
     ) => {
       const context = useContext(StepperContext);
       if (context === null) {
@@ -105,7 +105,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
           </Label>
         </Comp>
       );
-    }
+    },
   );
 
 export default Step;

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";