From 48b688f271c0a8c60c5112b1d1cf2580614149a9 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Thu, 8 Aug 2024 08:51:48 +0200
Subject: [PATCH 1/4] chore(Accordion): fix defaultOpen flicker on first render

---
 .../react/src/components/Accordion/Accordion.stories.tsx     | 4 ++--
 packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/Accordion/Accordion.stories.tsx b/packages/react/src/components/Accordion/Accordion.stories.tsx
index fd5cc8a535..77853811fe 100644
--- a/packages/react/src/components/Accordion/Accordion.stories.tsx
+++ b/packages/react/src/components/Accordion/Accordion.stories.tsx
@@ -15,7 +15,7 @@ export default {
 
 export const Preview: StoryFn<typeof Accordion.Root> = (args) => (
   <Accordion.Root {...args}>
-    <Accordion.Item>
+    <Accordion.Item defaultOpen>
       <Accordion.Heading level={3}>
         Hvem kan registrere seg i Frivillighetsregisteret?
       </Accordion.Heading>
@@ -26,7 +26,7 @@ export const Preview: StoryFn<typeof Accordion.Root> = (args) => (
         til fysiske personer. Virksomheten må ha et styre.
       </Accordion.Content>
     </Accordion.Item>
-    <Accordion.Item>
+    <Accordion.Item defaultOpen>
       <Accordion.Heading level={3}>
         Hvordan går jeg fram for å registrere i Frivillighetsregisteret?
       </Accordion.Heading>
diff --git a/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx b/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx
index d58afe84f1..d79f4efb96 100644
--- a/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx
+++ b/packages/react/src/utilities/AnimateHeight/AnimateHeight.tsx
@@ -22,7 +22,10 @@ export const AnimateHeight = ({
   style,
   ...rest
 }: AnimateHeightProps) => {
-  const [height, setHeight] = useState<number>(0);
+  /* We don't know the initial height we want to start with.
+  It depends on if it should start open or not, therefore we set height to `undefined`,
+  so we don't get any layoutshift on first render */
+  const [height, setHeight] = useState<number | undefined>(undefined);
   const prevOpen = usePrevious(open);
   const openOrClosed: InternalState = open ? 'open' : 'closed';
   const [state, setState] = useState<InternalState>(openOrClosed);

From 88fdfd973d274c5a7142da2a98aeb656298fcde2 Mon Sep 17 00:00:00 2001
From: Tobias Barsnes <tobias.barsnes@digdir.no>
Date: Thu, 8 Aug 2024 08:52:29 +0200
Subject: [PATCH 2/4] Create chilled-icons-chew.md

---
 .changeset/chilled-icons-chew.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/chilled-icons-chew.md

diff --git a/.changeset/chilled-icons-chew.md b/.changeset/chilled-icons-chew.md
new file mode 100644
index 0000000000..b87eb3cd88
--- /dev/null
+++ b/.changeset/chilled-icons-chew.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+Accordion: Fix `defaultOpen` flicker on first render

From 4f70cc0bbb0ce02ad6ca236ac1a8651e919fe397 Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Thu, 8 Aug 2024 08:59:54 +0200
Subject: [PATCH 3/4] update test

---
 .../react/src/utilities/AnimateHeight/AnimateHeight.test.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/utilities/AnimateHeight/AnimateHeight.test.tsx b/packages/react/src/utilities/AnimateHeight/AnimateHeight.test.tsx
index 42f45e40e3..216ba0688e 100644
--- a/packages/react/src/utilities/AnimateHeight/AnimateHeight.test.tsx
+++ b/packages/react/src/utilities/AnimateHeight/AnimateHeight.test.tsx
@@ -35,7 +35,7 @@ describe('AnimateHeight', () => {
   it('Appends given style to root element', () => {
     const style = { color: 'rgb(255, 0, 0)' };
     const { container } = render({ style });
-    expect(container.firstChild).toHaveStyle({ height: 0 });
+    expect(container.firstChild).toHaveStyle({ height: undefined });
     expect(container.firstChild).toHaveStyle(style);
   });
 

From 8d593dbba8eb0ceaacef295b910ce1ff47791d4a Mon Sep 17 00:00:00 2001
From: barsnes <tobias.barsnes@digdir.no>
Date: Thu, 8 Aug 2024 09:01:48 +0200
Subject: [PATCH 4/4] remove defaultOpen on stories

---
 packages/react/src/components/Accordion/Accordion.stories.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Accordion/Accordion.stories.tsx b/packages/react/src/components/Accordion/Accordion.stories.tsx
index 77853811fe..fd5cc8a535 100644
--- a/packages/react/src/components/Accordion/Accordion.stories.tsx
+++ b/packages/react/src/components/Accordion/Accordion.stories.tsx
@@ -15,7 +15,7 @@ export default {
 
 export const Preview: StoryFn<typeof Accordion.Root> = (args) => (
   <Accordion.Root {...args}>
-    <Accordion.Item defaultOpen>
+    <Accordion.Item>
       <Accordion.Heading level={3}>
         Hvem kan registrere seg i Frivillighetsregisteret?
       </Accordion.Heading>
@@ -26,7 +26,7 @@ export const Preview: StoryFn<typeof Accordion.Root> = (args) => (
         til fysiske personer. Virksomheten må ha et styre.
       </Accordion.Content>
     </Accordion.Item>
-    <Accordion.Item defaultOpen>
+    <Accordion.Item>
       <Accordion.Heading level={3}>
         Hvordan går jeg fram for å registrere i Frivillighetsregisteret?
       </Accordion.Heading>