@navikt/ds-react 5.12.5 → 5.14.0

package/src/pagination/Pagination.tsx

@@ -1,6 +1,5 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { BodyShort } from "../typography";
 import PaginationItem, {
@@ -72,7 +71,7 @@ export const getSteps = ({
 
   const siblingsStart = Math.max(
     Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
-    boundaryCount + 2
+    boundaryCount + 2,
   );
   const siblingsEnd = siblingsStart + siblingCount * 2;
 
@@ -122,7 +121,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       ),
       ...rest
     },
-    ref
+    ref,
   ) => {
     if (page < 1) {
       console.error("page cannot be less than 1");
@@ -148,7 +147,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
         className={cl(
           "navds-pagination",
           `navds-pagination--${size}`,
-          className
+          className,
         )}
       >
         <ul className="navds-pagination__list">
@@ -204,7 +203,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
                   </Item>
                 </li>
               );
-            }
+            },
           )}
           <li>
             <Item
@@ -239,7 +238,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
         </ul>
       </nav>
     );
-  }
+  },
 ) as PaginationType;
 
 Pagination.Item = PaginationItem;

package/src/pagination/PaginationItem.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 
 export interface PaginationItemProps extends ButtonProps {
   children: React.ReactNode;
@@ -35,7 +35,7 @@ export const Item: PaginationItemType = forwardRef(
       className,
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <Button
@@ -52,7 +52,7 @@ export const Item: PaginationItemType = forwardRef(
         {children}
       </Button>
     );
-  }
+  },
 );
 
 export default Item;

package/src/pagination/steps.test.ts

@@ -5,7 +5,7 @@ describe("getSteps", () => {
   it("lists all pages when count is <= 7", () => {
     const count = faker.datatype.number({ min: 1, max: 7 });
     expect(getSteps({ page: 1, count })).toEqual(
-      Array.from({ length: count }, (_, i) => i + 1)
+      Array.from({ length: count }, (_, i) => i + 1),
     );
   });
 
@@ -16,7 +16,7 @@ describe("getSteps", () => {
       getSteps({
         page,
         count,
-      })
+      }),
     ).toEqual([1, 2, 3, 4, 5, "ellipsis", count]);
   });
 
@@ -27,7 +27,7 @@ describe("getSteps", () => {
       getSteps({
         page,
         count,
-      })
+      }),
     ).toEqual([
       1,
       "ellipsis",
@@ -46,7 +46,7 @@ describe("getSteps", () => {
       getSteps({
         page,
         count,
-      })
+      }),
     ).toEqual([1, "ellipsis", page - 1, page, page + 1, "ellipsis", count]);
   });
 
@@ -58,7 +58,7 @@ describe("getSteps", () => {
         page,
         count,
         siblingCount: 0,
-      })
+      }),
     ).toEqual([1, "ellipsis", page, "ellipsis", count]);
   });
 
@@ -70,7 +70,7 @@ describe("getSteps", () => {
         page,
         count,
         siblingCount: 2,
-      })
+      }),
     ).toEqual([
       1,
       "ellipsis",
@@ -92,7 +92,7 @@ describe("getSteps", () => {
         page,
         count,
         boundaryCount: 0,
-      })
+      }),
     ).toEqual(["ellipsis", page - 1, page, page + 1, "ellipsis"]);
   });
 
@@ -104,7 +104,7 @@ describe("getSteps", () => {
         page,
         count,
         boundaryCount: 2,
-      })
+      }),
     ).toEqual([
       1,
       2,

package/src/panel/Panel.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "../util/OverridableComponent";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../util/types";
 
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
   /**
@@ -38,7 +38,7 @@ export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
 export const Panel: PanelType = forwardRef(
   (
     { children, className, border = false, as: Component = "div", ...rest },
-    ref
+    ref,
   ) => {
     return (
       <Component
@@ -51,7 +51,7 @@ export const Panel: PanelType = forwardRef(
         {children}
       </Component>
     );
-  }
+  },
 );
 
 export default Panel;

package/src/panel/panel.stories.tsx

@@ -1,6 +1,7 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Panel } from "../index";
-import { Meta } from "@storybook/react";
+
 export default {
   title: "ds-react/Panel",
   component: Panel,

package/src/popover/Popover.test.tsx

@@ -13,7 +13,7 @@ describe("Popover", () => {
         data-testid="popover-id"
       >
         <div />
-      </Popover>
+      </Popover>,
     );
 
     expect(screen.getByTestId("popover-id")).toBeVisible();
@@ -28,7 +28,7 @@ describe("Popover", () => {
         data-testid="popover-id"
       >
         <div />
-      </Popover>
+      </Popover>,
     );
 
     expect(screen.getByTestId("popover-id")).not.toBeVisible();
@@ -47,7 +47,7 @@ describe("Popover", () => {
           <div />
         </Popover>
         <a href="/#">link</a>
-      </div>
+      </div>,
     );
 
     await act(async () => {
@@ -70,14 +70,14 @@ describe("Popover", () => {
         >
           <div />
         </Popover>
-      </div>
+      </div>,
     );
 
     expect(screen.getByTestId("popover-id")).toBeVisible();
     fireEvent.keyDown(
       // Should work anywhere
       container,
-      { key: "Escape" }
+      { key: "Escape" },
     );
 
     expect(fn).toHaveBeenCalled();
@@ -95,7 +95,7 @@ describe("Popover", () => {
         >
           <div />
         </Popover>
-      </div>
+      </div>,
     );
 
     await act(async () => {
@@ -118,7 +118,7 @@ describe("Popover", () => {
         >
           <div />
         </Popover>
-      </div>
+      </div>,
     );
 
     expect(screen.getByTestId("popover-id")).toBeVisible();

package/src/popover/Popover.tsx

@@ -15,12 +15,12 @@ import React, {
   forwardRef,
   useCallback,
   useContext,
-  useMemo,
   useRef,
 } from "react";
 import { DateContext } from "../date/context";
 import { ModalContext } from "../modal/ModalContext";
-import { mergeRefs, useClientLayoutEffect, useEventListener } from "../util";
+import { useClientLayoutEffect, useEventListener } from "../util/hooks";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
@@ -41,7 +41,7 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    */
   onClose: () => void;
   /**
-   * Orientation for popover
+   * Default orientation of popover
    * @note Try to keep general usage to "top", "bottom", "left", "right"
    * @default "top"
    */
@@ -123,7 +123,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       flip: _flip = true,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const isInModal = useContext(ModalContext) !== null;
@@ -163,17 +163,14 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       refs.setReference(anchorEl);
     }, [anchorEl]);
 
-    const floatingRef = useMemo(
-      () => mergeRefs([refs.setFloating, ref]),
-      [refs.setFloating, ref]
-    );
+    const floatingRef = useMergeRefs(refs.setFloating, ref);
 
     useClientLayoutEffect(() => {
       if (!refs.reference.current || !refs.floating.current || !open) return;
       const cleanup = autoUpdate(
         refs.reference.current,
         refs.floating.current,
-        update
+        update,
       );
       return () => cleanup();
     }, [refs.floating, refs.reference, update, open, anchorEl]);
@@ -184,16 +181,16 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         (e: FocusEvent) => {
           if (
             e.target instanceof HTMLElement &&
-            ![anchorEl, refs.floating.current].some((element) =>
-              element?.contains(e.target as Node)
+            ![anchorEl, refs.floating.current].some(
+              (element) => element?.contains(e.target as Node),
             ) &&
             !e.target.contains(refs.floating.current)
           ) {
             open && onClose();
           }
         },
-        [anchorEl, refs, open, onClose]
-      )
+        [anchorEl, refs, open, onClose],
+      ),
     );
 
     const staticSide = {
@@ -237,7 +234,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         )}
       </div>
     );
-  }
+  },
 ) as PopoverComponent;
 
 Popover.Content = PopoverContent;

package/src/popover/PopoverContent.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export interface PopoverContentProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -17,7 +17,7 @@ const PopoverContent: PopoverContentType = forwardRef(
       ref={ref}
       className={cl("navds-popover__content", className)}
     />
-  )
+  ),
 );
 
 export default PopoverContent;

package/src/provider/Provider.tsx

@@ -8,7 +8,7 @@ export interface ProviderContextType {
 }
 
 export const ProviderContext = createContext<ProviderContextType | undefined>(
-  undefined
+  undefined,
 );
 
 export interface ProviderProps {

package/src/read-more/ReadMore.tsx

@@ -1,7 +1,9 @@
 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 { composeEventHandlers } from "../util/composeEventHandlers";
+import { useControllableState } from "../util/hooks/useControllableState";
 
 export interface ReadMoreProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -23,6 +25,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 +63,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 +80,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
@@ -81,13 +90,8 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           className={cl("navds-read-more__button", "navds-body-short", {
             "navds-body-short--small": size === "small",
           })}
-          onClick={(e) => {
-            if (open === undefined) {
-              setInternalOpen((isOpen) => !isOpen);
-            }
-            onClick?.(e);
-          }}
-          aria-expanded={isOpened}
+          onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
+          aria-expanded={_open}
         >
           <ChevronDownIcon
             className="navds-read-more__expand-icon"
@@ -98,9 +102,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 +112,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

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { Label } from "../typography";
-import { OverridableComponent } from "../util";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { OverridableComponent } from "../util/types";
 import { StepperContext } from "./context";
 
 export interface StepperStepProps
@@ -56,9 +57,10 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
         unsafe_index = 0,
         completed = false,
         interactive,
+        onClick,
         ...rest
       },
-      ref
+      ref,
     ) => {
       const context = useContext(StepperContext);
       if (context === null) {
@@ -71,6 +73,10 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
 
       const Comp = isInteractive ? Component : "div";
 
+      const handleStepClick = () => {
+        isInteractive && context.onStepChange(unsafe_index + 1);
+      };
+
       return (
         <Comp
           {...rest}
@@ -82,10 +88,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
             "navds-stepper__step--non-interactive": !isInteractive,
             "navds-stepper__step--completed": completed,
           })}
-          onClick={(e) => {
-            isInteractive && context.onStepChange(unsafe_index + 1);
-            rest?.onClick?.(e);
-          }}
+          onClick={composeEventHandlers(onClick, handleStepClick)}
         >
           {completed ? (
             <span className="navds-stepper__circle navds-stepper__circle--success">
@@ -105,7 +108,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/{util → table}/AnimateHeight.tsx

@@ -75,7 +75,7 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const prefersReducedMotion = useRef<boolean>(
     isBrowser && window.matchMedia
       ? window.matchMedia("(prefers-reduced-motion)").matches
-      : false
+      : false,
   );
 
   const duration = prefersReducedMotion.current ? 0 : userDuration;

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
@@ -9,6 +9,10 @@ export interface DataCellProps
    * @default "left"
    */
   align?: "left" | "center" | "right";
+  /**
+   * Adjusts font-size
+   */
+  textSize?: "medium" | "small";
 }
 
 export interface DataCellType
@@ -17,7 +21,7 @@ export interface DataCellType
   > {}
 
 export const DataCell: DataCellType = forwardRef(
-  ({ className, children = "", align, ...rest }, ref) => {
+  ({ className, children = "", align, textSize, ...rest }, ref) => {
     return (
       <BodyShort
         as="td"
@@ -25,12 +29,13 @@ export const DataCell: DataCellType = forwardRef(
         className={cl("navds-table__data-cell", className, {
           [`navds-table__data-cell--align-${align}`]: align,
         })}
+        size={textSize}
         {...rest}
       >
         {children}
       </BodyShort>
     );
-  }
+  },
 );
 
 export default DataCell;