fix: fixes issue where sidebar default state always starts as closed (#…

…3672)
equinor · Nov 8, 2024 · a44ad6b · a44ad6b
1 parent 6869b88
commit a44ad6b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 12 deletions.
diff --git a/packages/eds-core-react/src/components/SideBar/SideBar.context.tsx b/packages/eds-core-react/src/components/SideBar/SideBar.context.tsx
@@ -23,10 +23,16 @@ const initalState: State = {
 
 const SideBarContext = createContext<State>(initalState)
 
-type ProviderProps = { children: ReactNode }
-
-export const SideBarProvider = ({ children }: ProviderProps): JSX.Element => {
-  const [state, setState] = useState<State>(initalState)
+type ProviderProps = { children: ReactNode; isOpen: boolean }
+
+export const SideBarProvider = ({
+  children,
+  isOpen: isOpenProp = false,
+}: ProviderProps) => {
+  const [state, setState] = useState<State>({
+    onToggle: () => {},
+    isOpen: isOpenProp,
+  })
   const { isOpen, onToggle } = state
 
   const setIsOpen = useCallback(

diff --git a/packages/eds-core-react/src/components/SideBar/SideBar.tsx b/packages/eds-core-react/src/components/SideBar/SideBar.tsx
@@ -11,22 +11,17 @@ type ContainerProps = {
 
 const SideBarContainer = forwardRef<HTMLDivElement, SidebarProps>(
   function SideBarContainer(
-    { onToggle: onToggleCallback, open = false, children, ...rest },
+    { onToggle: onToggleCallback, children, ...rest },
     ref,
   ) {
-    const { isOpen, setIsOpen, onToggle, setOnToggle } = useSideBar()
+    const { isOpen, onToggle, setOnToggle } = useSideBar()
 
     useEffect(() => {
       if (onToggle === null && onToggleCallback) {
         setOnToggle(onToggleCallback)
       }
     }, [onToggle, onToggleCallback, setOnToggle])
 
-    useEffect(() => {
-      setIsOpen(open)
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open])
-
     return (
       <GridContainer {...rest} open={isOpen} ref={ref}>
         {children}
@@ -79,7 +74,7 @@ export const SideBar = forwardRef<HTMLDivElement, SidebarProps>(
 
     return (
       <ThemeProvider theme={token}>
-        <SideBarProvider>
+        <SideBarProvider isOpen={open}>
           <SideBarContainer {...props} ref={ref} />
         </SideBarProvider>
       </ThemeProvider>