@navikt/ds-react 5.13.0 → 5.14.0

package/src/form/combobox/Combobox.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
-import React, { forwardRef, useMemo, useRef } from "react";
+import React, { forwardRef, useRef } from "react";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { mergeRefs } from "../../util";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import ClearButton from "./ClearButton";
 import ComboboxWrapper from "./ComboboxWrapper";
 import FilteredOptions from "./FilteredOptions/FilteredOptions";
@@ -50,10 +50,7 @@ export const Combobox = forwardRef<
     size = "medium",
   } = useInputContext();
 
-  const mergedInputRef = useMemo(
-    () => mergeRefs([inputRef, ref]),
-    [inputRef, ref],
-  );
+  const mergedInputRef = useMergeRefs(inputRef, ref);
 
   return (
     <ComboboxWrapper

package/src/form/combobox/FilteredOptions/filteredOptionsContext.tsx

@@ -7,8 +7,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { useClientLayoutEffect } from "../../../util";
-import usePrevious from "../../../util/usePrevious";
+import { useClientLayoutEffect, usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/inputContext";
 import { useCustomOptionsContext } from "../customOptionsContext";
 import { ComboboxProps } from "../types";

package/src/form/combobox/Input/inputContext.tsx

@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useClientLayoutEffect } from "../../../util";
+import { useClientLayoutEffect } from "../../../util/hooks";
 import { FormFieldType, useFormField } from "../../useFormField";
 
 interface InputContextType extends FormFieldType {

package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -5,7 +5,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import usePrevious from "../../../util/usePrevious";
+import { usePrevious } from "../../../util/hooks";
 import { useInputContext } from "../Input/inputContext";
 import { useCustomOptionsContext } from "../customOptionsContext";
 import { ComboboxProps } from "../types";

package/src/form/combobox/combobox.stories.tsx

@@ -1,6 +1,5 @@
-import { expect, jest } from "@storybook/jest";
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { userEvent, within } from "@storybook/testing-library";
+import { expect, fn, userEvent, within } from "@storybook/test";
 import React, { useId, useMemo, useState } from "react";
 import { Chips, ComboboxProps, TextField, UNSAFE_Combobox } from "../../index";
 
@@ -427,14 +426,14 @@ export const AddWhenAddNewDisabledTest: StoryObject = {
 };
 
 export const TestThatCallbacksOnlyFireWhenExpected: StoryObj<{
-  onChange: ReturnType<typeof jest.fn>;
-  onClear: ReturnType<typeof jest.fn>;
-  onToggleSelected: ReturnType<typeof jest.fn>;
+  onChange: ReturnType<typeof fn>;
+  onClear: ReturnType<typeof fn>;
+  onToggleSelected: ReturnType<typeof fn>;
 }> = {
   args: {
-    onChange: jest.fn(),
-    onClear: jest.fn(),
-    onToggleSelected: jest.fn(),
+    onChange: fn(),
+    onClear: fn(),
+    onToggleSelected: fn(),
   },
   render: (props) => {
     return (
@@ -469,9 +468,9 @@ export const TestThatCallbacksOnlyFireWhenExpected: StoryObj<{
 
 export const TestCasingWhenAutoCompleting = {
   args: {
-    onChange: jest.fn(),
-    onClear: jest.fn(),
-    onToggleSelected: jest.fn(),
+    onChange: fn(),
+    onClear: fn(),
+    onToggleSelected: fn(),
   },
   render: (props) => {
     return (

package/src/form/error-summary/ErrorSummary.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, isValidElement } from "react";
 import { BodyShort, Heading } from "../../typography";
-import { useId } from "../../util";
+import { useId } from "../../util/hooks";
 import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {

package/src/form/error-summary/ErrorSummaryItem.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../util";
+import { OverridableComponent } from "../../util/types";
 
 export interface ErrorSummaryItemProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {

package/src/form/radio/Radio.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
-import { omit, useId } from "../../util";
+import { omit } from "../../util";
+import { useId } from "../../util/hooks";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 

package/src/form/radio/RadioGroup.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { useId } from "../../util";
+import { useId } from "../../util/hooks";
 import { Fieldset, FieldsetContext, FieldsetProps } from "../Fieldset";
 
 export interface RadioGroupContextProps {

package/src/form/search/Search.tsx

@@ -3,13 +3,13 @@ import React, {
   InputHTMLAttributes,
   forwardRef,
   useCallback,
-  useMemo,
   useRef,
   useState,
 } from "react";
 import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
-import { mergeRefs, omit } from "../../util";
+import { omit } from "../../util";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 import { SearchContext } from "./context";
@@ -118,7 +118,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
     } = props;
 
     const searchRef = useRef<HTMLInputElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([searchRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(searchRef, ref);
 
     const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 

package/src/form/search/SearchButton.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
+import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { SearchContext } from "./context";
 
 export interface SearchButtonProps
@@ -36,10 +37,7 @@ const SearchButton: SearchButtonType = forwardRef(
         variant={variant === "secondary" ? "secondary" : "primary"}
         className={cl("navds-search__button-search", className)}
         disabled={context?.disabled ?? disabled}
-        onClick={(e) => {
-          handleClick();
-          onClick?.(e);
-        }}
+        onClick={composeEventHandlers(onClick, handleClick)}
         icon={
           <MagnifyingGlassIcon
             {...(children ? { "aria-hidden": true } : { title: "Søk" })}

package/src/form/useFormField.ts

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { useContext } from "react";
-import { useId } from "../util";
+import { useId } from "../util/hooks";
 import { FieldsetContext } from "./Fieldset/context";
 
 export interface FormFieldProps {

package/src/guide-panel/Illustration.tsx

@@ -1,5 +1,5 @@
 import React, { SVGProps } from "react";
-import { useId } from "../util";
+import { useId } from "../util/hooks";
 
 interface SVGRProps {
   title?: string;

package/src/help-text/HelpText.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { Popover, PopoverProps } from "../popover";
-import { mergeRefs } from "../util";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps
@@ -13,23 +14,6 @@ export interface HelpTextProps
    * @default "hjelp"
    */
   title?: string;
-  /**
-   * Default dialog-placement on open
-   * @default "top"
-   */
-  placement?:
-    | "top"
-    | "bottom"
-    | "right"
-    | "left"
-    | "top-start"
-    | "top-end"
-    | "bottom-start"
-    | "bottom-end"
-    | "right-start"
-    | "right-end"
-    | "left-start"
-    | "left-end";
   /**
    * Classname for wrapper
    */
@@ -54,7 +38,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     {
       className,
       children,
-      placement = "top",
+      placement,
       strategy = "absolute",
       title = "hjelp",
       onClick,
@@ -64,7 +48,8 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
     ref,
   ) => {
     const buttonRef = useRef<HTMLButtonElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(buttonRef, ref);
+
     const [open, setOpen] = useState(false);
 
     return (
@@ -72,10 +57,7 @@ export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
         <button
           {...rest}
           ref={mergedRef}
-          onClick={(e) => {
-            setOpen((x) => !x);
-            onClick?.(e);
-          }}
+          onClick={composeEventHandlers(onClick, () => setOpen((x) => x))}
           className={cl(className, "navds-help-text__button")}
           type="button"
           aria-expanded={open}

package/src/help-text/HelpTextIcon.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React from "react";
-import { useId } from "../util/useId";
+import { useId } from "../util/hooks";
 
 export const HelpTextIcon = ({
   title,

package/src/help-text/help-text.stories.tsx

@@ -1,63 +1,57 @@
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React, { useEffect, useRef } from "react";
 import { BodyLong, Heading, HelpText } from "..";
 
-export default {
+const meta: Meta<typeof HelpText> = {
   title: "ds-react/HelpText",
   component: HelpText,
   parameters: {
     chromatic: { delay: 300 },
   },
+};
+export default meta;
+
+export const Default: StoryObj<typeof HelpText> = {
+  render: (props) => (
+    <HelpText {...props}>Id ullamco excepteur elit fugiat labore.</HelpText>
+  ),
+
+  args: {
+    title: "Show tooltip",
+  },
   argTypes: {
     placement: {
-      control: {
-        type: "radio",
-        options: [
-          "top",
-          "bottom",
-          "right",
-          "left",
-          "top-start",
-          "top-end",
-          "bottom-start",
-          "bottom-end",
-          "right-start",
-          "right-end",
-          "left-start",
-          "left-end",
-        ],
-      },
+      control: { type: "radio" },
+      options: [
+        "top",
+        "bottom",
+        "right",
+        "left",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end",
+        "right-start",
+        "right-end",
+        "left-start",
+        "left-end",
+      ],
     },
     strategy: {
-      control: {
-        type: "radio",
-        options: ["fixed", "absolute"],
-      },
+      control: { type: "radio" },
+      options: ["fixed", "absolute"],
     },
   },
 };
 
-export const Default = {
-  render: (props: any) => {
-    return (
-      <HelpText title="show tooltip" strategy="fixed" {...props}>
-        Id ullamco excepteur elit fugiat labore.
-      </HelpText>
-    );
-  },
-
-  args: {
-    title: "show tooltip",
-  },
-};
-
-export const Open = () => {
+export const Open: StoryFn = () => {
   const ref = useRef<HTMLButtonElement | null>(null);
   useEffect(() => {
     ref.current && ref.current.click();
   }, []);
 
   return (
-    <HelpText ref={ref} title="show tooltip" strategy="fixed">
+    <HelpText ref={ref} title="Show tooltip" strategy="fixed">
       Incididunt laborum eiusmod ullamco id aliquip officia ex irure aliqua
       laboris id ea do nisi. Ex esse ad duis culpa non aliquip exercitation eu
       culpa cupidatat nisi. Deserunt voluptate consectetur cillum elit qui ad
@@ -66,35 +60,31 @@ export const Open = () => {
   );
 };
 
-export const WrapperClassName = {
-  render: () => {
-    return (
-      <div>
-        <BodyLong spacing>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
-          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
-          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
-          ab quam ea quas?
-        </BodyLong>
+export const WrapperClassName: StoryFn = () => (
+  <div>
+    <BodyLong spacing>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+      perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+      ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione ab
+      quam ea quas?
+    </BodyLong>
 
-        <Heading level="2" size="medium">
-          67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
-          <HelpText wrapperClassName="testClass">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
-            perspiciatis vero voluptatum, asperiores cumque, deserunt
-            accusantium ullam ipsa accusamus officia cupiditate quae unde esse
-            culpa, ratione ab quam ea quas?
-          </HelpText>
-          <style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
-        </Heading>
+    <Heading level="2" size="medium">
+      67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
+      <HelpText wrapperClassName="testClass">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+        perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+        ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione ab
+        quam ea quas?
+      </HelpText>
+      <style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
+    </Heading>
 
-        <BodyLong spacing>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
-          perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
-          ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione
-          ab quam ea quas?
-        </BodyLong>
-      </div>
-    );
-  },
-};
+    <BodyLong spacing>
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
+      perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
+      ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione ab
+      quam ea quas?
+    </BodyLong>
+  </div>
+);

package/src/internal-header/InternalHeader.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import InternalHeaderButton, {
   InternalHeaderButtonProps,
 } from "./InternalHeaderButton";

package/src/internal-header/InternalHeaderButton.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 InternalHeaderButtonProps
   extends React.AnchorHTMLAttributes<HTMLButtonElement> {

package/src/internal-header/InternalHeaderTitle.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 InternalHeaderTitleProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {

package/src/internal-header/InternalHeaderUserButton.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { BodyShort, Detail } from "../typography";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import InternalHeaderButton from "./InternalHeaderButton";
 
 export interface InternalHeaderUserButtonProps

package/src/layout/box/Box.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../util/OverridableComponent";
+import { OverridableComponent } from "../../util/types";
 import { getResponsiveProps } from "../utilities/css";
 import {
   BackgroundToken,

package/src/layout/page/parts/PageBlock.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 const widths = ["text", "md", "lg", "xl", "2xl"] as const;
 

package/src/layout/stack/HStack.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../util/OverridableComponent";
+import { OverridableComponent } from "../../util/types";
 import { Stack, StackProps } from "./Stack";
 
 export type HStackProps = Omit<StackProps, "direction">;

package/src/layout/stack/Stack.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { OverridableComponent } from "../../util/OverridableComponent";
+import { OverridableComponent } from "../../util/types";
 import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 

package/src/layout/stack/VStack.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../../util/OverridableComponent";
+import { OverridableComponent } from "../../util/types";
 import { Stack, StackProps } from "./Stack";
 
 export type VStackProps = Omit<StackProps, "direction" | "wrap">;

package/src/link/Link.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 LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {

package/src/link/{link.stories.tsx → stories/link.stories.tsx}

@@ -5,8 +5,8 @@ import {
   Alert as DsAlert,
   ConfirmationPanel as DsConfirmationPanel,
   Link,
-} from "..";
-import { RandomIcon } from "../util/RandomIcon";
+} from "../..";
+import { RandomIcon } from "./RandomIcon";
 
 export default {
   title: "ds-react/Link",

package/src/link-panel/LinkPanel.tsx

@@ -2,7 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { Panel } from "../panel";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 import {
   LinkPanelDescription,
   LinkPanelDescriptionProps,

package/src/link-panel/LinkPanelTitle.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 LinkPanelTitleProps
   extends React.HTMLAttributes<HTMLDivElement> {

package/src/list/List.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { BodyShort, Heading } from "../typography";
-import { useId } from "../util/useId";
+import { useId } from "../util/hooks";
 import { ListItem } from "./ListItem";
 import { ListContext } from "./context";
 import { ListProps } from "./types";

package/src/loader/Loader.tsx

@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { SVGProps, forwardRef } from "react";
-import { omit, useId } from "../util";
+import { omit } from "../util";
+import { useId } from "../util/hooks";
 
 export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**