@navikt/ds-react 5.13.0 → 5.14.0

package/src/modal/Modal.tsx

@@ -1,17 +1,13 @@
 import { useFloatingPortalNode } from "@floating-ui/react";
 import cl from "clsx";
-import React, {
-  forwardRef,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
+import React, { forwardRef, useContext, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { DateContext } from "../date/context";
 import { useProvider } from "../provider";
 import { Detail, Heading } from "../typography";
-import { mergeRefs, useId } from "../util";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useId } from "../util/hooks";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import ModalBody from "./ModalBody";
 import { ModalContext } from "./ModalContext";
 import ModalFooter from "./ModalFooter";
@@ -95,7 +91,8 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     ref,
   ) => {
     const modalRef = useRef<HTMLDialogElement>(null);
-    const mergedRef = useMemo(() => mergeRefs([modalRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(modalRef, ref);
+
     const ariaLabelId = useId();
     const rootElement = useProvider()?.rootElement;
     const portalNode = useFloatingPortalNode({ root: rootElement });
@@ -149,25 +146,28 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       ...(!isWidthPreset ? { width } : {}),
     };
 
-    const mergedOnCancel: React.DialogHTMLAttributes<HTMLDialogElement>["onCancel"] =
-      (event) => {
-        if (onBeforeClose && onBeforeClose() === false) {
-          event.preventDefault();
-        } else if (onCancel) onCancel(event);
-      };
-
-    const mergedOnClick =
-      closeOnBackdropClick && !needPolyfill // closeOnBackdropClick has issues on polyfill when nesting modals (DatePicker)
-        ? (event: React.MouseEvent<HTMLDialogElement>) => {
-            onClick && onClick(event);
-            if (
-              event.target === modalRef.current &&
-              (!onBeforeClose || onBeforeClose() !== false)
-            ) {
-              modalRef.current.close();
-            }
-          }
-        : onClick;
+    /**
+     * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
+     */
+    const handleModalClick = (event: React.MouseEvent<HTMLDialogElement>) => {
+      if (
+        closeOnBackdropClick &&
+        !needPolyfill &&
+        event.target === modalRef.current &&
+        (!onBeforeClose || onBeforeClose() !== false)
+      ) {
+        modalRef.current.close();
+      }
+    };
+
+    /**
+     * @note onCancel fires when you press `Esc`
+     */
+    const handleModalCancel = (
+      event: React.SyntheticEvent<HTMLDialogElement, Event>,
+    ) => {
+      onBeforeClose && onBeforeClose() === false && event.preventDefault();
+    };
 
     const mergedAriaLabelledBy =
       !ariaLabelledby && !rest["aria-label"] && header
@@ -181,8 +181,8 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         ref={mergedRef}
         className={mergedClassName}
         style={mergedStyle}
-        onCancel={mergedOnCancel} // FYI: onCancel fires when you press Esc
-        onClick={mergedOnClick}
+        onCancel={composeEventHandlers(onCancel, handleModalCancel)}
+        onClick={composeEventHandlers(onClick, handleModalClick)}
         aria-labelledby={mergedAriaLabelledBy}
       >
         <ModalContext.Provider

package/src/modal/types.ts

@@ -41,7 +41,7 @@ export interface ModalProps
    */
   onBeforeClose?: () => boolean | void;
   /**
-   * *Sometimes** called when the user presses the Esc key, unless you return `false` in `onBeforeClose()`.
+   * *Sometimes** called when the user presses the Esc key.
    * @warning *Some browsers does not always trigger this event. Chrome only triggers it if you have
    *  interacted with the modal, and will not trigger it a second time if you press Esc twice in a row.
    */

package/src/pagination/PaginationItem.tsx

@@ -1,7 +1,7 @@
 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;

package/src/panel/Panel.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
   /**

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"
    */
@@ -163,10 +163,7 @@ 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;

package/src/read-more/ReadMore.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 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
@@ -89,10 +90,7 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           className={cl("navds-read-more__button", "navds-body-short", {
             "navds-body-short--small": size === "small",
           })}
-          onClick={(e) => {
-            _setOpen((x) => !x);
-            onClick?.(e);
-          }}
+          onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
           aria-expanded={_open}
         >
           <ChevronDownIcon

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,6 +57,7 @@ export const Step: OverridableComponent<StepperStepProps, HTMLAnchorElement> =
         unsafe_index = 0,
         completed = false,
         interactive,
+        onClick,
         ...rest
       },
       ref,
@@ -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">

package/src/table/DataCell.tsx

@@ -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,6 +29,7 @@ export const DataCell: DataCellType = forwardRef(
         className={cl("navds-table__data-cell", className, {
           [`navds-table__data-cell--align-${align}`]: align,
         })}
+        size={textSize}
         {...rest}
       >
         {children}

package/src/table/ExpandableRow.tsx

@@ -1,9 +1,10 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useId } from "../util";
-import AnimateHeight from "../util/AnimateHeight";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
+import AnimateHeight from "./AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
 
@@ -66,6 +67,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       expansionDisabled = false,
       expandOnRowClick = false,
       colSpan = 999,
+      onClick,
       ...rest
     },
     ref,
@@ -86,6 +88,12 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
     const onRowClick = (e) =>
       !isInteractiveTarget(e.target) && expansionHandler(e);
 
+    const handleRowClick = (
+      e: React.MouseEvent<HTMLTableRowElement, MouseEvent>,
+    ) => {
+      !expansionDisabled && expandOnRowClick && onRowClick(e);
+    };
+
     return (
       <>
         <Row
@@ -97,10 +105,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
               expansionDisabled,
             "navds-table__expandable-row--clickable": expandOnRowClick,
           })}
-          onClick={(e) => {
-            !expansionDisabled && expandOnRowClick && onRowClick(e);
-            rest?.onClick?.(e);
-          }}
+          onClick={composeEventHandlers(onClick, handleRowClick)}
         >
           {togglePlacement === "right" && children}
           <DataCell

package/src/table/HeaderCell.tsx

@@ -9,6 +9,10 @@ export interface HeaderCellProps
    * @default "left"
    */
   align?: "left" | "center" | "right";
+  /**
+   * Adjusts font-size
+   */
+  textSize?: "medium" | "small";
 }
 
 export interface HeaderCellType
@@ -17,12 +21,13 @@ export interface HeaderCellType
   > {}
 
 export const HeaderCell: HeaderCellType = forwardRef(
-  ({ className, children, align, ...rest }, ref) => {
+  ({ className, children, align, textSize, ...rest }, ref) => {
     return (
       <th
         ref={ref}
         className={cl("navds-table__header-cell", "navds-label", className, {
           [`navds-table__header-cell--align-${align}`]: align,
+          "navds-label--small": textSize === "small",
         })}
         {...rest}
       >

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

@@ -1,26 +1,30 @@
 import React, { useState } from "react";
-import { Table } from "../";
-import { Alert, Button, Checkbox, Link } from "../..";
+import { Table, TableProps } from "../";
+import { Alert, Button, Checkbox, CheckboxGroup, Link } from "../..";
 
 export default {
   title: "ds-react/Table",
   component: Table,
 };
 
-const TableComponent = (props) => (
-  <Table {...props}>
+interface Props extends TableProps {
+  button?: boolean;
+  shadeOnHover?: boolean;
+}
+const TableComponent = ({ button, shadeOnHover, ...rest }: Props) => (
+  <Table {...rest}>
     <Table.Header>
       <Table.Row>
-        {props.button && <Table.HeaderCell>Action</Table.HeaderCell>}
+        {button && <Table.HeaderCell>Action</Table.HeaderCell>}
         <Table.HeaderCell>ID</Table.HeaderCell>
         <Table.HeaderCell>Fornavn</Table.HeaderCell>
-        <Table.HeaderCell>Etternavn</Table.HeaderCell>
-        <Table.HeaderCell>Rolle</Table.HeaderCell>
+        <Table.HeaderCell textSize="medium">Etternavn</Table.HeaderCell>
+        <Table.HeaderCell textSize="small">Rolle</Table.HeaderCell>
       </Table.Row>
     </Table.Header>
     <Table.Body>
-      <Table.Row shadeOnHover={props.shadeOnHover}>
-        {props.button && (
+      <Table.Row shadeOnHover={shadeOnHover}>
+        {button && (
           <Table.DataCell
             style={{
               paddingTop: 6,
@@ -35,8 +39,8 @@ const TableComponent = (props) => (
         <Table.DataCell>Picard</Table.DataCell>
         <Table.DataCell>Kaptein</Table.DataCell>
       </Table.Row>
-      <Table.Row shadeOnHover={props.shadeOnHover}>
-        {props.button && (
+      <Table.Row shadeOnHover={shadeOnHover}>
+        {button && (
           <Table.DataCell
             style={{
               paddingTop: 6,
@@ -51,8 +55,8 @@ const TableComponent = (props) => (
         <Table.DataCell>Riker</Table.DataCell>
         <Table.DataCell>Kommandør</Table.DataCell>
       </Table.Row>
-      <Table.Row shadeOnHover={props.shadeOnHover}>
-        {props.button && (
+      <Table.Row shadeOnHover={shadeOnHover}>
+        {button && (
           <Table.DataCell
             style={{
               paddingTop: 6,
@@ -64,8 +68,8 @@ const TableComponent = (props) => (
         )}
         <Table.HeaderCell>3</Table.HeaderCell>
         <Table.DataCell>Geordi</Table.DataCell>
-        <Table.DataCell>La Forge</Table.DataCell>
-        <Table.DataCell>Sjefsingeniør</Table.DataCell>
+        <Table.DataCell textSize="medium">La Forge</Table.DataCell>
+        <Table.DataCell textSize="small">Sjefsingeniør</Table.DataCell>
       </Table.Row>
     </Table.Body>
   </Table>
@@ -229,22 +233,32 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
         </Table.Row>
         <Table.Row selected={selectedRows.includes("3")}>
           <Table.DataCell>
-            <Checkbox
-              size={size}
-              hideLabel
-              checked={selectedRows.includes("3")}
-              onChange={() => toggleSelectedRow("3")}
-              aria-labelledby={`x_r3-${size}`}
-            >
-              {" "}
-            </Checkbox>
+            <CheckboxGroup legend="velg flere felt" hideLegend>
+              <Checkbox
+                size={size}
+                hideLabel
+                checked={selectedRows.includes("3")}
+                onChange={() => toggleSelectedRow("3")}
+                aria-labelledby={`x_r3-${size}`}
+              >
+                {" "}
+              </Checkbox>
+              <Checkbox
+                size={size}
+                hideLabel
+                checked={selectedRows.includes("3")}
+                onChange={() => toggleSelectedRow("3")}
+                aria-labelledby={`x_r3-${size}`}
+              >
+                {" "}
+              </Checkbox>
+            </CheckboxGroup>
           </Table.DataCell>
-          <Table.HeaderCell scope="row">
-            <span id={`x_r3-${size}`}>Rudolph Bachenmeier</span>
+          <Table.HeaderCell scope="row" colSpan={4}>
+            <span id={`x_r3-${size}`}>
+              Don&apos;t stack multiple checkboxes
+            </span>
           </Table.HeaderCell>
-          <Table.DataCell>32</Table.DataCell>
-          <Table.DataCell>Germany</Table.DataCell>
-          <Table.DataCell>70</Table.DataCell>
         </Table.Row>
       </Table.Body>
     </Table>

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

@@ -1,5 +1,4 @@
-import { expect, jest } from "@storybook/jest";
-import { userEvent, within } from "@storybook/testing-library";
+import { expect, fn, userEvent, within } from "@storybook/test";
 import React from "react";
 import { Table } from "../..";
 
@@ -66,7 +65,7 @@ export const ClickableRowTest = {
     );
   },
   args: {
-    onOpenChange: jest.fn(),
+    onOpenChange: fn(),
   },
   play: async ({ canvasElement, args }) => {
     args.onOpenChange.mockClear();

package/src/tabs/Tab.tsx

@@ -2,7 +2,7 @@ import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { BodyShort } from "../typography";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 import { TabsContext } from "./context";
 
 export interface TabProps

package/src/tabs/TabList.tsx

@@ -9,7 +9,8 @@ import React, {
   useState,
 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { debounce, mergeRefs } from "../util";
+import { debounce } from "../util";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { TabsContext } from "./context";
 
 export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -23,7 +24,8 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
   ({ className, ...rest }, ref) => {
     const context = useContext(TabsContext);
     const listRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([listRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(listRef, ref);
+
     const [displayScroll, setDisplayScroll] = useState({
       start: false,
       end: false,

package/src/tabs/Tabs.tsx

@@ -1,7 +1,7 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import Tab, { TabProps } from "./Tab";
 import TabList, { TabListProps } from "./TabList";
 import TabPanel, { TabPanelProps } from "./TabPanel";

package/src/tag/Tag.tsx

@@ -36,6 +36,10 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
    * @default "medium"
    */
   size?: "medium" | "small" | "xsmall";
+  /**
+   * Tag Icon
+   */
+  icon?: React.ReactNode;
 }
 
 /**
@@ -50,7 +54,7 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * ```
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ className, variant, size = "medium", ...rest }, ref) => (
+  ({ children, className, variant, size = "medium", icon, ...rest }, ref) => (
     <BodyShort
       {...rest}
       ref={ref}
@@ -62,7 +66,10 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
         `navds-tag--${variant}`,
         `navds-tag--${size}`,
       )}
-    />
+    >
+      {icon && <span className="navds-tag__icon--left">{icon}</span>}
+      {children}
+    </BodyShort>
   ),
 );
 

package/src/tag/tag.stories.tsx

@@ -1,6 +1,10 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
+import { ComponentIcon } from "@navikt/aksel-icons";
 import { Tag, TagProps } from ".";
+import { HStack } from "../layout/stack";
+
+const sizes: TagProps["size"][] = ["xsmall", "small", "medium"];
 
 const variants: TagProps["variant"][] = [
   "warning",
@@ -52,7 +56,11 @@ export default {
 
 export const Default = {
   render: (props) => (
-    <Tag variant={props.variant} size={props.size}>
+    <Tag
+      variant={props.variant}
+      size={props.size}
+      icon={props.icon && <ComponentIcon aria-hidden />}
+    >
       {props.children}
     </Tag>
   ),
@@ -60,6 +68,7 @@ export const Default = {
   args: {
     children: "Id elit esse",
     variant: "info",
+    icon: false,
   },
 };
 
@@ -98,3 +107,20 @@ export const Variants = () => {
     </div>
   );
 };
+
+export const WithIcons = () => {
+  return (
+    <HStack gap="2" align="start">
+      {sizes.reverse().map((size) => (
+        <Tag
+          key={size}
+          variant="neutral-moderate"
+          size={size}
+          icon={<ComponentIcon aria-hidden />}
+        >
+          {size}
+        </Tag>
+      ))}
+    </HStack>
+  );
+};

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

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

package/src/toggle-group/ToggleGroup.tsx

@@ -2,7 +2,7 @@ import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useState } from "react";
 import { Label } from "../typography";
-import { useId } from "../util";
+import { useId } from "../util/hooks";
 import ToggleItem, { ToggleItemProps } from "./ToggleItem";
 import { ToggleGroupContext } from "./context";