Version Packages (#1846)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-codemod
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0

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

@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": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0

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

@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

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

@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;
 
-      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,
-          };
-        }
-
-        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 { outerHeightStyle, overflow };
     }, [maxRows, minRows, other?.placeholder]);
 
-    useEffect(() => {
+    const syncHeight = React.useCallback(() => {
+      const newState = getUpdatedState();
+
+      if (isEmpty(newState)) {
+        return;
+      }
+
+      setState((prevState) => {
+        return updateState(prevState, newState);
+      });
+    }, [getUpdatedState]);
+
+    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;
+    };
+
+    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);
+        });
+      });
+    };
+
+    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;

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0

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

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0

@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": [

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-icons
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0

@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": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css-internal
 
+## 2.6.2
+
 ## 2.6.1
 
 ## 2.6.0

@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": [

@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

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

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"

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