Add collapsed button option to multistep form block

packages/bbui/src/ButtonGroup/CollapsedButtonGroup.svelte

@@ -28,7 +28,7 @@
 >
   {text || "Action"}
 </Button>
-<Popover bind:this={popover} {align} {anchor} {offset}>
+<Popover bind:this={popover} {align} {anchor} {offset} resizable={false}>
   <Menu>
     {#each buttons as button}
       <MenuItem on:click={() => handleClick(button)} disabled={button.disabled}>

packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte

@@ -54,6 +54,8 @@
     _instanceName: `Step ${currentStep + 1}`,
     title: savedInstance.title ?? defaults?.title,
     buttons: savedInstance.buttons || defaults?.buttons,
+    buttonsCollapsed: savedInstance.buttonsCollapsed,
+    buttonsCollapsedText: savedInstance.buttonsCollapsedText,
     fields: savedInstance.fields,
     desc: savedInstance.desc,
 

packages/client/manifest.json

@@ -7076,6 +7076,18 @@
         "key": "buttons",
         "wide": true,
         "nested": true
+      },
+      {
+        "type": "boolean",
+        "label": "Collapse",
+        "key": "buttonsCollapsed"
+      },
+      {
+        "type": "text",
+        "label": "Collapsed text",
+        "key": "buttonsCollapsedText",
+        "dependsOn": "buttonsCollapsed",
+        "placeholder": "Action"
       }
     ]
   },

packages/client/src/components/app/blocks/MultiStepFormblock.svelte

@@ -77,7 +77,7 @@
   const enrichSteps = (steps, schema, id) => {
     const safeSteps = steps?.length ? steps : [{}]
     return safeSteps.map((step, idx) => {
-      const { title, desc, fields, buttons } = step
+      const { title, fields, buttons } = step
       const defaultProps = Utils.buildMultiStepFormBlockDefaultProps({
         _id: id,
         stepCount: safeSteps.length,
@@ -86,10 +86,10 @@
         dataSource,
       })
       return {
+        ...step,
         _stepId: Helpers.uuid(),
         fields: getDefaultFields(fields || [], schema),
         title: title ?? defaultProps.title,
-        desc,
         buttons: buttons || defaultProps.buttons,
       }
     })
@@ -172,7 +172,11 @@
           {#if buttonPosition === "bottom"}
             <BlockComponent
               type="buttongroup"
-              props={{ buttons: step.buttons }}
+              props={{
+                buttons: step.buttons,
+                collapsed: step.buttonsCollapsed,
+                collapsedText: step.buttonsCollapsedText,
+              }}
               order={3}
             />
           {/if}