Merge branch 'main' into prettyfy-again

.changeset/heavy-shrimps-destroy.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+Tag: Har nå innebygd støtte for ikoner

.changeset/quick-monkeys-repeat.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Intern-API: Erstattet `mergeRefs` i `useMemo` med lokal `useMergeRefs`-hook

@navikt/core/css/tag.css

@@ -1,4 +1,7 @@
 .navds-tag {
+  --__ac-tag-icon-size: 1.5rem;
+  --__ac-tag-icon-margin: -2px;
+
   border: 1px solid;
   border-radius: var(--a-border-radius-small);
   display: inline-flex;
@@ -12,11 +15,26 @@
 .navds-tag--small {
   min-height: 1.5rem;
   padding: 0 var(--a-spacing-1-alt);
+
+  --__ac-tag-icon-size: 1.25rem;
 }
 
 .navds-tag--xsmall {
   min-height: 1.25rem;
   padding: 0 var(--a-spacing-1);
+
+  --__ac-tag-icon-size: 1rem;
+  --__ac-tag-icon-margin: -1px;
+}
+
+.navds-tag:has(.navds-tag__icon--left) {
+  gap: var(--a-spacing-05);
+}
+
+.navds-tag__icon--left {
+  font-size: var(--__ac-tag-icon-size);
+  margin-inline-start: var(--__ac-tag-icon-margin);
+  display: flex;
 }
 
 .navds-tag--error {

@navikt/core/react/src/button/Button.tsx

@@ -1,14 +1,10 @@
 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 { composeEventHandlers } from "../util/composeEventHandlers";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -85,7 +81,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) {

@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

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

@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

@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 ?? "");
 

@navikt/core/react/src/help-text/HelpText.tsx

@@ -1,8 +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
@@ -48,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 (

@navikt/core/react/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>
+);

@navikt/core/react/src/modal/Modal.tsx

@@ -1,18 +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 { useId } from "../util";
 import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import ModalBody from "./ModalBody";
 import { ModalContext } from "./ModalContext";
 import ModalFooter from "./ModalFooter";
@@ -96,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 });