From 4ca82636df5da340045d4df934401ab7e19b656a Mon Sep 17 00:00:00 2001
From: sook <sukkyu.chung@gmail.com>
Date: Fri, 11 Aug 2023 20:13:47 +0900
Subject: [PATCH 1/3] fix undefined addon state

---
 code/lib/manager-api/src/index.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx
index 52c2f3000986..33b7603cd83d 100644
--- a/code/lib/manager-api/src/index.tsx
+++ b/code/lib/manager-api/src/index.tsx
@@ -416,7 +416,7 @@ const addonStateCache: {
 } = {};
 
 // shared state
-export function useSharedState<S>(stateId: string, defaultState?: S) {
+export function useSharedState<S extends object>(stateId: string, defaultState?: S) {
   const api = useStorybookApi();
   const existingState = api.getAddonState<S>(stateId) || addonStateCache[stateId];
   const state = orDefault<S>(
@@ -431,7 +431,13 @@ export function useSharedState<S>(stateId: string, defaultState?: S) {
   }
 
   const setState = (s: S | API_StateMerger<S>, options?: Options) => {
-    const result = api.setAddonState<S>(stateId, s, options);
+    let sFinal = s;
+    if (typeof s === 'function') {
+      sFinal = (_state) => {
+        return s(_state || defaultState);
+      };
+    }
+    const result = api.setAddonState<S>(stateId, sFinal, options);
     addonStateCache[stateId] = result;
     return result;
   };
@@ -483,7 +489,7 @@ export function useSharedState<S>(stateId: string, defaultState?: S) {
   ] as [S, (newStateOrMerger: S | API_StateMerger<S>, options?: Options) => void];
 }
 
-export function useAddonState<S>(addonId: string, defaultState?: S) {
+export function useAddonState<S extends object>(addonId: string, defaultState?: S) {
   return useSharedState<S>(addonId, defaultState);
 }
 

From 63f2dbef61ad47161d053617a0087cd05deb4766 Mon Sep 17 00:00:00 2001
From: sook <sukkyu.chung@gmail.com>
Date: Fri, 11 Aug 2023 20:45:16 +0900
Subject: [PATCH 2/3] remove S extends object

---
 code/lib/manager-api/src/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx
index 33b7603cd83d..c5a3f50cc225 100644
--- a/code/lib/manager-api/src/index.tsx
+++ b/code/lib/manager-api/src/index.tsx
@@ -416,7 +416,7 @@ const addonStateCache: {
 } = {};
 
 // shared state
-export function useSharedState<S extends object>(stateId: string, defaultState?: S) {
+export function useSharedState<S>(stateId: string, defaultState?: S) {
   const api = useStorybookApi();
   const existingState = api.getAddonState<S>(stateId) || addonStateCache[stateId];
   const state = orDefault<S>(
@@ -434,7 +434,7 @@ export function useSharedState<S extends object>(stateId: string, defaultState?:
     let sFinal = s;
     if (typeof s === 'function') {
       sFinal = (_state) => {
-        return s(_state || defaultState);
+        return (s as API_StateMerger<S>)(_state || defaultState);
       };
     }
     const result = api.setAddonState<S>(stateId, sFinal, options);
@@ -489,7 +489,7 @@ export function useSharedState<S extends object>(stateId: string, defaultState?:
   ] as [S, (newStateOrMerger: S | API_StateMerger<S>, options?: Options) => void];
 }
 
-export function useAddonState<S extends object>(addonId: string, defaultState?: S) {
+export function useAddonState<S>(addonId: string, defaultState?: S) {
   return useSharedState<S>(addonId, defaultState);
 }
 

From 64ad0c2ac4e6d164d57f73254f78d2d587385913 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 22 Aug 2023 12:20:25 +0200
Subject: [PATCH 3/3] Make sure that state is set when defined as default state

---
 code/lib/manager-api/src/index.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx
index c5a3f50cc225..fdbd258b25a1 100644
--- a/code/lib/manager-api/src/index.tsx
+++ b/code/lib/manager-api/src/index.tsx
@@ -424,20 +424,16 @@ export function useSharedState<S>(stateId: string, defaultState?: S) {
     addonStateCache[stateId] ? addonStateCache[stateId] : defaultState
   );
 
-  if (api.getAddonState(stateId) && api.getAddonState(stateId) !== state) {
-    api.setAddonState<S>(stateId, state).then((s) => {
-      addonStateCache[stateId] = s;
-    });
-  }
+  useEffect(() => {
+    if (api.getAddonState(stateId) === undefined && api.getAddonState(stateId) !== state) {
+      api.setAddonState<S>(stateId, state).then((s) => {
+        addonStateCache[stateId] = s;
+      });
+    }
+  }, [api]);
 
   const setState = (s: S | API_StateMerger<S>, options?: Options) => {
-    let sFinal = s;
-    if (typeof s === 'function') {
-      sFinal = (_state) => {
-        return (s as API_StateMerger<S>)(_state || defaultState);
-      };
-    }
-    const result = api.setAddonState<S>(stateId, sFinal, options);
+    const result = api.setAddonState<S>(stateId, s, options);
     addonStateCache[stateId] = result;
     return result;
   };