refactor: control floating panel open state (#4331)

Slightly change floating panel "open" state to make it controlled from
outside. This is important with form validations.

Author: TrySound

apps/builder/app/builder/features/style-panel/controls/font-family/font-family-control.tsx

@@ -68,7 +68,8 @@ export const FontFamilyControl = () => {
         suffix={
           <FloatingPanel
             title="Fonts"
-            onOpenChange={setIsFontMangerOpen}
+            isOpen={isFontManagerOpen}
+            onIsOpenChange={setIsFontMangerOpen}
             content={
               <FontsManager
                 value={value.type === "fontFamily" ? value : undefined}

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.stories.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { getStyleDeclKey, type StyleDecl } from "@webstudio-is/sdk";
 import {
   FloatingPanel,
@@ -35,14 +35,16 @@ $selectedInstanceSelector.set(["box"]);
 
 export const BackgroundContentStory = () => {
   const elementRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(true);
 
   return (
     <>
       <div ref={elementRef} style={{ marginLeft: "400px" }}></div>
 
       <FloatingPanelProvider container={elementRef}>
         <FloatingPanel
-          open={true}
+          isOpen={isOpen}
+          onIsOpenChange={setIsOpen}
           title="Background"
           content={<BackgroundContent index={0} />}
         >

apps/builder/app/builder/shared/floating-panel.tsx

@@ -74,24 +74,13 @@ export const FloatingPanelProvider = ({
   </FloatingPanelContext.Provider>
 );
 
-const useLogic = (open?: boolean, onOpenChange?: (isOpen: boolean) => void) => {
-  const { container: containerRef } = useContext(FloatingPanelContext);
-  const [isOpen, setIsOpen] = useState(Boolean(open));
-  const [triggerRef, sideOffset] = useSideOffset({ isOpen, containerRef });
-  const handleOpenChange = (open: boolean) => {
-    setIsOpen(open);
-    onOpenChange?.(open);
-  };
-  return { isOpen, handleOpenChange, triggerRef, sideOffset };
-};
-
 // @todo add support for positioning next to the left panel
 type FloatingPanelProps = {
   title: string;
   content: JSX.Element;
   children: JSX.Element;
-  open?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
+  isOpen?: boolean;
+  onIsOpenChange?: (isOpen: boolean) => void;
   // collisionPadding is the distance in pixels from the boundary edges where collision detection should occur.
   collisionPadding?:
     | number
@@ -107,18 +96,19 @@ export const FloatingPanel = ({
   title,
   content,
   children,
-  open,
+  isOpen: externalIsOpen,
   align,
-  onOpenChange,
+  onIsOpenChange: setExternalIsOpen,
   collisionPadding,
 }: FloatingPanelProps) => {
-  const { isOpen, handleOpenChange, triggerRef, sideOffset } = useLogic(
-    open,
-    onOpenChange
-  );
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isOpen = externalIsOpen ?? internalIsOpen;
+  const setIsOpen = setExternalIsOpen ?? setInternalIsOpen;
+  const { container: containerRef } = useContext(FloatingPanelContext);
+  const [triggerRef, sideOffset] = useSideOffset({ isOpen, containerRef });
 
   return (
-    <FloatingPanelPopover open={isOpen} onOpenChange={handleOpenChange} modal>
+    <FloatingPanelPopover open={isOpen} onOpenChange={setIsOpen} modal>
       <FloatingPanelPopoverTrigger asChild ref={triggerRef}>
         {children}
       </FloatingPanelPopoverTrigger>