From 59d32e52c437759e66aa50d200b4264a6ba53069 Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 8 Mar 2023 15:50:13 +0100
Subject: [PATCH 1/3] :bug: Fikset TextareaAutoSize-bug for React18

---
 .changeset/quiet-bananas-learn.md             |   5 +
 .../src/form/stories/textarea.stories.tsx     |  14 +-
 .../core/react/src/util/TextareaAutoSize.tsx  | 120 ++++++++++++------
 3 files changed, 97 insertions(+), 42 deletions(-)
 create mode 100644 .changeset/quiet-bananas-learn.md

diff --git a/.changeset/quiet-bananas-learn.md b/.changeset/quiet-bananas-learn.md
new file mode 100644
index 0000000000..8bba2c78ef
--- /dev/null
+++ b/.changeset/quiet-bananas-learn.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Fikset React18 problem med TextareaAutosize
diff --git a/@navikt/core/react/src/form/stories/textarea.stories.tsx b/@navikt/core/react/src/form/stories/textarea.stories.tsx
index b665dba4f2..5485b60bdf 100644
--- a/@navikt/core/react/src/form/stories/textarea.stories.tsx
+++ b/@navikt/core/react/src/form/stories/textarea.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import React from "react";
+import React, { useState } from "react";
 import { Textarea } from "../index";
 export default {
   title: "ds-react/Textarea",
@@ -120,3 +120,15 @@ export const MaxRows = () => {
 export const Resize = () => {
   return <Textarea resize label="Ipsum enim quis culpa" />;
 };
+
+export const ResizeBug = () => {
+  const [hidden, setHidden] = useState(false);
+  return (
+    <div>
+      <button onClick={() => setHidden((x) => !x)}>toggle</button>
+      <div hidden={hidden}>
+        <Textarea resize label="Ipsum enim quis culpa" />
+      </div>
+    </div>
+  );
+};
diff --git a/@navikt/core/react/src/util/TextareaAutoSize.tsx b/@navikt/core/react/src/util/TextareaAutoSize.tsx
index 5d9c73fb8e..0bd0ff817c 100644
--- a/@navikt/core/react/src/util/TextareaAutoSize.tsx
+++ b/@navikt/core/react/src/util/TextareaAutoSize.tsx
@@ -1,12 +1,6 @@
 /* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js */
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import ReactDOM from "react-dom";
 import { debounce, mergeRefs, useClientLayoutEffect } from "..";
 
 /**
@@ -50,7 +44,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
     const renders = useRef(0);
     const [state, setState] = useState<any>({});
 
-    const syncHeight = useCallback(() => {
+    const getUpdatedState = React.useCallback(() => {
       if (!inputRef.current || !shadowRef.current) return;
       const input = inputRef.current;
       const containerWindow = ownerWindow(input);
@@ -102,50 +96,85 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
         outerHeight + (boxSizing === "border-box" ? padding + border : 0);
       const overflow = Math.abs(outerHeight - innerHeight) <= 1;
 
+      return { outerHeightStyle, overflow };
+    }, [maxRows, minRows, other?.placeholder]);
+
+    const syncHeight = React.useCallback(() => {
+      const newState = getUpdatedState();
+
+      if (isEmpty(newState)) {
+        return;
+      }
+
       setState((prevState) => {
-        // Need a large enough difference to update the height.
-        // This prevents infinite rendering loop.
-        if (
-          renders.current < 20 &&
-          ((outerHeightStyle > 0 &&
-            Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) >
-              1) ||
-            prevState.overflow !== overflow)
-        ) {
-          renders.current += 1;
-          return {
-            overflow,
-            outerHeightStyle,
-          };
-        }
+        return updateState(prevState, newState);
+      });
+    }, [getUpdatedState]);
 
-        if (process.env.NODE_ENV !== "production") {
-          if (renders.current === 20) {
-            console.error(
-              [
-                "Textarea: Too many re-renders. The layout is unstable.",
-                "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-              ].join("\n")
-            );
-          }
+    const updateState = (prevState, newState) => {
+      const { outerHeightStyle, overflow } = newState;
+      // Need a large enough difference to update the height.
+      // This prevents infinite rendering loop.
+      if (
+        renders.current < 20 &&
+        ((outerHeightStyle > 0 &&
+          Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1) ||
+          prevState.overflow !== overflow)
+      ) {
+        renders.current += 1;
+        return {
+          overflow,
+          outerHeightStyle,
+        };
+      }
+      if (process.env.NODE_ENV !== "production") {
+        if (renders.current === 20) {
+          console.error(
+            [
+              "Textarea: Too many re-renders. The layout is unstable.",
+              "TextareaAutosize limits the number of renders to prevent an infinite loop.",
+            ].join("\n")
+          );
         }
+      }
+      return prevState;
+    };
 
-        return prevState;
+    const withFlushSync = () => {
+      const newState = getUpdatedState();
+
+      if (isEmpty(newState)) {
+        return;
+      }
+
+      // In React 18, state updates in a ResizeObserver's callback are happening after the paint which causes flickering
+      // when doing some visual updates in it. Using flushSync ensures that the dom will be painted after the states updates happen
+      // Related issue - https://github.com/facebook/react/issues/24331
+      ReactDOM.flushSync(() => {
+        setState((prevState) => {
+          return updateState(prevState, newState);
+        });
       });
-    }, [maxRows, minRows, other?.placeholder]);
+    };
 
-    useEffect(() => {
+    React.useEffect(() => {
       const handleResize = debounce(() => {
         renders.current = 0;
-        syncHeight();
+
+        if (inputRef.current) {
+          withFlushSync();
+        }
       });
-      const containerWindow = ownerWindow(inputRef.current);
+      let resizeObserver: ResizeObserver;
+
+      const input = inputRef.current!;
+      const containerWindow = ownerWindow(input);
+
       containerWindow.addEventListener("resize", handleResize);
-      let resizeObserver;
 
       if (typeof ResizeObserver !== "undefined") {
         resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(inputRef.current);
+        resizeObserver.observe(input);
       }
 
       return () => {
@@ -155,7 +184,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
           resizeObserver.disconnect();
         }
       };
-    }, [syncHeight]);
+    });
 
     useClientLayoutEffect(() => {
       syncHeight();
@@ -221,4 +250,13 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
   }
 );
 
+function isEmpty(obj: any) {
+  return (
+    obj === undefined ||
+    obj === null ||
+    Object.keys(obj).length === 0 ||
+    (obj?.outerHeightStyle === 0 && !obj?.overflow)
+  );
+}
+
 export default TextareaAutosize;

From ba7c057f8c839247f74f470f2cc060bbfd44b4aa Mon Sep 17 00:00:00 2001
From: Ken <ken.aleksander@gmail.com>
Date: Wed, 8 Mar 2023 15:51:02 +0100
Subject: [PATCH 2/3] :fire: Fjernet ubrukt demo-eksempel

---
 .../react/src/form/stories/textarea.stories.tsx    | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/@navikt/core/react/src/form/stories/textarea.stories.tsx b/@navikt/core/react/src/form/stories/textarea.stories.tsx
index 5485b60bdf..b665dba4f2 100644
--- a/@navikt/core/react/src/form/stories/textarea.stories.tsx
+++ b/@navikt/core/react/src/form/stories/textarea.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta } from "@storybook/react";
-import React, { useState } from "react";
+import React from "react";
 import { Textarea } from "../index";
 export default {
   title: "ds-react/Textarea",
@@ -120,15 +120,3 @@ export const MaxRows = () => {
 export const Resize = () => {
   return <Textarea resize label="Ipsum enim quis culpa" />;
 };
-
-export const ResizeBug = () => {
-  const [hidden, setHidden] = useState(false);
-  return (
-    <div>
-      <button onClick={() => setHidden((x) => !x)}>toggle</button>
-      <div hidden={hidden}>
-        <Textarea resize label="Ipsum enim quis culpa" />
-      </div>
-    </div>
-  );
-};

From 08006cc04b2c0b633471ea265d2d298fbd1b748e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 8 Mar 2023 16:03:32 +0100
Subject: [PATCH 3/3] Version Packages (#1846)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/quiet-bananas-learn.md    |  5 -----
 @navikt/codemod/CHANGELOG.md         |  2 ++
 @navikt/codemod/package.json         |  2 +-
 @navikt/community/navno/package.json |  4 ++--
 @navikt/core/css/CHANGELOG.md        |  2 ++
 @navikt/core/css/package.json        |  4 ++--
 @navikt/core/react/CHANGELOG.md      |  9 +++++++++
 @navikt/core/react/package.json      |  4 ++--
 @navikt/core/tailwind/CHANGELOG.md   |  2 ++
 @navikt/core/tailwind/package.json   |  4 ++--
 @navikt/core/tokens/CHANGELOG.md     |  2 ++
 @navikt/core/tokens/package.json     |  2 +-
 @navikt/icons/CHANGELOG.md           |  2 ++
 @navikt/icons/package.json           |  2 +-
 @navikt/internal/css/CHANGELOG.md    |  2 ++
 @navikt/internal/css/package.json    |  2 +-
 @navikt/internal/react/CHANGELOG.md  |  8 ++++++++
 @navikt/internal/react/package.json  |  6 +++---
 aksel.nav.no/package.json            | 16 ++++++++--------
 examples/shadow-dom/package.json     |  4 ++--
 20 files changed, 54 insertions(+), 30 deletions(-)
 delete mode 100644 .changeset/quiet-bananas-learn.md

diff --git a/.changeset/quiet-bananas-learn.md b/.changeset/quiet-bananas-learn.md
deleted file mode 100644
index 8bba2c78ef..0000000000
--- a/.changeset/quiet-bananas-learn.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@navikt/ds-react": patch
----
-
-Fikset React18 problem med TextareaAutosize
diff --git a/@navikt/codemod/CHANGELOG.md b/@navikt/codemod/CHANGELOG.md
index 765019bcd6..a8b7e476e6 100644
--- a/@navikt/codemod/CHANGELOG.md
+++ b/@navikt/codemod/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @navikt/ds-codemod
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0
diff --git a/@navikt/codemod/package.json b/@navikt/codemod/package.json
index 92b0eb7d82..ac31108dd7 100644
--- a/@navikt/codemod/package.json
+++ b/@navikt/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
diff --git a/@navikt/community/navno/package.json b/@navikt/community/navno/package.json
index 6487b6431f..cf8288a109 100644
--- a/@navikt/community/navno/package.json
+++ b/@navikt/community/navno/package.json
@@ -39,8 +39,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.6.1",
-    "@navikt/ds-react": "^2.6.1",
+    "@navikt/ds-icons": "^2.6.2",
+    "@navikt/ds-react": "^2.6.2",
     "clsx": "^1.1.1"
   },
   "devDependencies": {
diff --git a/@navikt/core/css/CHANGELOG.md b/@navikt/core/css/CHANGELOG.md
index 08eb22e59e..1f44a55d26 100644
--- a/@navikt/core/css/CHANGELOG.md
+++ b/@navikt/core/css/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @navikt/ds-css
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0
diff --git a/@navikt/core/css/package.json b/@navikt/core/css/package.json
index 3b2bcca328..e055783085 100644
--- a/@navikt/core/css/package.json
+++ b/@navikt/core/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.6.1",
+    "@navikt/ds-tokens": "^2.6.2",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",
diff --git a/@navikt/core/react/CHANGELOG.md b/@navikt/core/react/CHANGELOG.md
index b5d85f1c1d..3d664ee0ce 100644
--- a/@navikt/core/react/CHANGELOG.md
+++ b/@navikt/core/react/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @navikt/ds-react
 
+## 2.6.2
+
+### Patch Changes
+
+- [`59d32e52c`](https://github.com/navikt/aksel/commit/59d32e52c437759e66aa50d200b4264a6ba53069) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset React18 problem med TextareaAutosize
+
+- Updated dependencies []:
+  - @navikt/ds-icons@2.6.2
+
 ## 2.6.1
 
 ### Patch Changes
diff --git a/@navikt/core/react/package.json b/@navikt/core/react/package.json
index 1248af241b..143fabcfe0 100644
--- a/@navikt/core/react/package.json
+++ b/@navikt/core/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.6.1",
+    "@navikt/ds-icons": "^2.6.2",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",
diff --git a/@navikt/core/tailwind/CHANGELOG.md b/@navikt/core/tailwind/CHANGELOG.md
index a5907dd468..ff9bddab26 100644
--- a/@navikt/core/tailwind/CHANGELOG.md
+++ b/@navikt/core/tailwind/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0
diff --git a/@navikt/core/tailwind/package.json b/@navikt/core/tailwind/package.json
index fa013cd612..b640c9a31a 100644
--- a/@navikt/core/tailwind/package.json
+++ b/@navikt/core/tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.6.1",
+    "@navikt/ds-tokens": "^2.6.2",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",
diff --git a/@navikt/core/tokens/CHANGELOG.md b/@navikt/core/tokens/CHANGELOG.md
index de64d8d8c1..510dca9122 100644
--- a/@navikt/core/tokens/CHANGELOG.md
+++ b/@navikt/core/tokens/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0
diff --git a/@navikt/core/tokens/package.json b/@navikt/core/tokens/package.json
index f6ad8289b0..9f0d858414 100644
--- a/@navikt/core/tokens/package.json
+++ b/@navikt/core/tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
diff --git a/@navikt/icons/CHANGELOG.md b/@navikt/icons/CHANGELOG.md
index 9aa9d541dd..4a7f98072f 100644
--- a/@navikt/icons/CHANGELOG.md
+++ b/@navikt/icons/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @navikt/ds-icons
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0
diff --git a/@navikt/icons/package.json b/@navikt/icons/package.json
index 910318b47b..1385440e9b 100644
--- a/@navikt/icons/package.json
+++ b/@navikt/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {
diff --git a/@navikt/internal/css/CHANGELOG.md b/@navikt/internal/css/CHANGELOG.md
index 328b718336..a0a7601526 100644
--- a/@navikt/internal/css/CHANGELOG.md
+++ b/@navikt/internal/css/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @navikt/ds-css-internal
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0
diff --git a/@navikt/internal/css/package.json b/@navikt/internal/css/package.json
index 1586ba8568..7d7aaac0dc 100644
--- a/@navikt/internal/css/package.json
+++ b/@navikt/internal/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
diff --git a/@navikt/internal/react/CHANGELOG.md b/@navikt/internal/react/CHANGELOG.md
index a795601fcd..1960f18269 100644
--- a/@navikt/internal/react/CHANGELOG.md
+++ b/@navikt/internal/react/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @navikt/ds-react-internal
 
+## 2.6.2
+
+### Patch Changes
+
+- Updated dependencies [[`59d32e52c`](https://github.com/navikt/aksel/commit/59d32e52c437759e66aa50d200b4264a6ba53069)]:
+  - @navikt/ds-react@2.6.2
+  - @navikt/ds-icons@2.6.2
+
 ## 2.6.1
 
 ### Patch Changes
diff --git a/@navikt/internal/react/package.json b/@navikt/internal/react/package.json
index cc3e0fd9a1..2457255a11 100644
--- a/@navikt/internal/react/package.json
+++ b/@navikt/internal/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "description": "Aksel react components for internal UIs in NAV",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.6.1",
-    "@navikt/ds-react": "^2.6.1",
+    "@navikt/ds-icons": "^2.6.2",
+    "@navikt/ds-react": "^2.6.2",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },
diff --git a/aksel.nav.no/package.json b/aksel.nav.no/package.json
index 49f30b3005..0e54129e80 100644
--- a/aksel.nav.no/package.json
+++ b/aksel.nav.no/package.json
@@ -15,14 +15,14 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/ds-codemod": "^2.6.1",
-    "@navikt/ds-css": "^2.6.1",
-    "@navikt/ds-css-internal": "^2.6.1",
-    "@navikt/ds-icons": "^2.6.1",
-    "@navikt/ds-react": "^2.6.1",
-    "@navikt/ds-react-internal": "^2.6.1",
-    "@navikt/ds-tailwind": "^2.6.1",
-    "@navikt/ds-tokens": "^2.6.1"
+    "@navikt/ds-codemod": "^2.6.2",
+    "@navikt/ds-css": "^2.6.2",
+    "@navikt/ds-css-internal": "^2.6.2",
+    "@navikt/ds-icons": "^2.6.2",
+    "@navikt/ds-react": "^2.6.2",
+    "@navikt/ds-react-internal": "^2.6.2",
+    "@navikt/ds-tailwind": "^2.6.2",
+    "@navikt/ds-tokens": "^2.6.2"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"
diff --git a/examples/shadow-dom/package.json b/examples/shadow-dom/package.json
index 6b3236aa6f..04507ae1d3 100644
--- a/examples/shadow-dom/package.json
+++ b/examples/shadow-dom/package.json
@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "2.6.1",
-    "@navikt/ds-react": "2.6.1",
+    "@navikt/ds-css": "2.6.2",
+    "@navikt/ds-react": "2.6.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },