Ny hook useMergeRefs som erstatter mergeRefs (#2609)

* 🎨 Fjernet mergeRefs fra exponert API * ♻️ Oppdatert bruk av mergeRefs -> useMergeRefs-hook * Update @navikt/core/react/src/util/hooks/useMergeRefs.ts Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --------- Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com>
navikt · Jan 12, 2024 · b251e3f · b251e3f
1 parent 793998f
commit b251e3f
Show file tree

Hide file tree

Showing 19 changed files with 101 additions and 97 deletions.
diff --git a/.changeset/quick-monkeys-repeat.md b/.changeset/quick-monkeys-repeat.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Intern-API: Erstattet `mergeRefs` i `useMemo` med lokal `useMergeRefs`-hook
diff --git a/@navikt/core/react/src/button/Button.tsx b/@navikt/core/react/src/button/Button.tsx
@@ -1,13 +1,9 @@
 import cl from "clsx";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { Loader } from "../loader";
 import { Label } from "../typography";
-import {
-  OverridableComponent,
-  mergeRefs,
-  omit,
-  useClientLayoutEffect,
-} from "../util";
+import { OverridableComponent, omit, useClientLayoutEffect } from "../util";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -84,7 +80,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
       const buttonRef = useRef<HTMLButtonElement | null>(null);
       const [widthOverride, setWidthOverride] = useState<number>();
 
-      const mergedRef = useMemo(() => mergeRefs([buttonRef, ref]), [ref]);
+      const mergedRef = useMergeRefs(buttonRef, ref);
 
       useClientLayoutEffect(() => {
         if (loading) {

diff --git a/@navikt/core/react/src/date/datepicker/DatePicker.tsx b/@navikt/core/react/src/date/datepicker/DatePicker.tsx
@@ -1,8 +1,9 @@
 import cl from "clsx";
 import isWeekend from "date-fns/isWeekend";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
-import { mergeRefs, omit, useId } from "../../util";
+import { omit, useId } from "../../util";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { DateContext } from "../context";
 import { DatePickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
@@ -88,7 +89,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const [open, setOpen] = useState(_open ?? false);
 
     const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(wrapperRef, ref);
 
     const [selectedDates, setSelectedDates] = React.useState<
       Date | Date[] | DateRange | undefined

diff --git a/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx b/@navikt/core/react/src/date/monthpicker/MonthPicker.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 { RootProvider } from "react-day-picker";
-import { mergeRefs, useId } from "../../util";
+import { useId } from "../../util";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { DateContext, SharedMonthProvider } from "../context";
 import { MonthPickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
@@ -81,7 +82,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
     const [open, setOpen] = useState(_open ?? false);
 
     const wrapperRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([wrapperRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(wrapperRef, ref);
 
     const [selectedMonth, setSelectedMonth] = useState<Date | undefined>(
       defaultSelected,

diff --git a/@navikt/core/react/src/form/combobox/Combobox.tsx b/@navikt/core/react/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

diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/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 ?? "");
 

diff --git a/@navikt/core/react/src/help-text/HelpText.tsx b/@navikt/core/react/src/help-text/HelpText.tsx
@@ -1,7 +1,7 @@
 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 { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { HelpTextIcon } from "./HelpTextIcon";
 
 export interface HelpTextProps
@@ -47,7 +47,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 (

diff --git a/@navikt/core/react/src/modal/Modal.tsx b/@navikt/core/react/src/modal/Modal.tsx
@@ -1,17 +1,12 @@
 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 { useId } from "../util";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import ModalBody from "./ModalBody";
 import { ModalContext } from "./ModalContext";
 import ModalFooter from "./ModalFooter";
@@ -95,7 +90,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 });

diff --git a/@navikt/core/react/src/popover/Popover.tsx b/@navikt/core/react/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";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
@@ -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;

diff --git a/@navikt/core/react/src/tabs/TabList.tsx b/@navikt/core/react/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,

diff --git a/@navikt/core/react/src/timeline/Pin.tsx b/@navikt/core/react/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",

diff --git a/@navikt/core/react/src/timeline/period/ClickablePeriod.tsx b/@navikt/core/react/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",

diff --git a/@navikt/core/react/src/tooltip/Tooltip.tsx b/@navikt/core/react/src/tooltip/Tooltip.tsx
@@ -18,14 +18,14 @@ import React, {
   cloneElement,
   forwardRef,
   useContext,
-  useMemo,
   useRef,
 } from "react";
 import { ModalContext } from "../modal/ModalContext";
 import { useProvider } from "../provider";
 import { Detail } from "../typography";
-import { mergeRefs, useId } from "../util";
+import { useId } from "../util";
 import { useControllableState } from "../util/hooks/useControllableState";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -113,7 +113,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       maxChar = 80,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
@@ -166,30 +166,24 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     const ariaId = useId(id);
 
-    const mergedRef = useMemo(
-      () => mergeRefs([ref, refs.setFloating]),
-      [refs.setFloating, ref]
-    );
-    const childMergedRef = useMemo(
-      () => mergeRefs([(children as any).ref, refs.setReference]),
-      [children, refs.setReference]
-    );
+    const mergedRef = useMergeRefs(ref, refs.setFloating);
+    const childMergedRef = useMergeRefs(children.ref, refs.setReference);
 
     if (
       !children ||
       children?.type === React.Fragment ||
       (children as any) === React.Fragment
     ) {
       console.error(
-        "<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>"
+        "<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>",
       );
       return null;
     }
 
     if (content?.length > maxChar) {
       _open &&
         console.warn(
-          `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop\n\nLength:${content.length}\nTooltip-content: ${content}`
+          `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop\n\nLength:${content.length}\nTooltip-content: ${content}`,
         );
     }
 
@@ -203,7 +197,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
             "aria-describedby": _open
               ? cl(ariaId, children?.props["aria-describedby"])
               : children?.props["aria-describedby"],
-          })
+          }),
         )}
         <FloatingPortal root={rootElement}>
           {_open && (
@@ -222,7 +216,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 className: cl(
                   "navds-tooltip",
                   "navds-detail navds-detail--small",
-                  className
+                  className,
                 ),
               })}
               data-side={placement}
@@ -267,7 +261,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         </FloatingPortal>
       </>
     );
-  }
+  },
 );
 
 export default Tooltip;
diff --git a/@navikt/core/react/src/util/Slot.tsx b/@navikt/core/react/src/util/Slot.tsx
@@ -1,6 +1,6 @@
 // https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
 import * as React from "react";
-import mergeRefs from "./mergeRefs";
+import { mergeRefs } from "./hooks/useMergeRefs";
 
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;

diff --git a/@navikt/core/react/src/util/TextareaAutoSize.tsx b/@navikt/core/react/src/util/TextareaAutoSize.tsx
@@ -1,7 +1,8 @@
 /* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx */
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { debounce, mergeRefs, useClientLayoutEffect } from "../util";
+import { debounce, useClientLayoutEffect } from "../util";
+import { useMergeRefs } from "./hooks/useMergeRefs";
 
 type State = {
   outerHeightStyle: number;
@@ -90,7 +91,9 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
   ) => {
     const { current: isControlled } = useRef(value != null);
     const inputRef = useRef<HTMLTextAreaElement>(null);
-    const handleRef = useMemo(() => mergeRefs([inputRef, ref]), [ref]);
+
+    const handleRef = useMergeRefs(inputRef, ref);
+
     const shadowRef = useRef<HTMLTextAreaElement>(null);
     const renders = useRef(0);
     const [state, setState] = useState<State>({ outerHeightStyle: 0 });