Array fields show empty collapsible content even if there are no visible fields inside

[FedericoBonel]

Description

Array fields currently assume that any fields inside each item will be visible.
However, when using only slots nested inside array fields, or invisible fields, nothing is actually shown inside each item. In those cases, the field is mostly used just to add items to a list and reorder them.

In those scenarios, it would make sense to not make each item collapsible/expandable, since expanding shows no visible content and can be confusing.

Environment

• Puck version: 0.20.2

Steps to reproduce

1. Render the Puck editor with a component that uses slots inside an array field:

   const config = {
     components: {
       Test: {
         fields: {
           columns: {
             type: "array",
             arrayFields: { items: { type: "slot" } },
             defaultItemProps: { items: [] },
           },
         },
         defaultProps: { columns: [] },
         render: ({ columns }) => (
           <div>
             {columns.map(({ items: Items }) => (
               <Items />
             ))}
           </div>
         ),
       },
     },
   };
   
   export const Editor = () => {
     return <Puck data={{}} config={config} />;
   };
   

2. Run the application

3. Navigate to the editor

4. Drag and drop the component that uses the nested slots into the canvas

5. Select the component

6. Add items to the array field

7. Click on any of the items

What happens

Array items expand, even though no fields or content are shown inside.

What I expect to happen

If no visible fields are available in the array field items, then the items should not be collapsible/expandable.

Considerations

• The file that implements array fields is here.
• The line that renders the collapsible element is here.

Additional Media

[kuntlme]

hii @FedericoBonel 👋

If this Issue is still available, I would like to work on this.

[FedericoBonel]

Hey @kuntlme! Feel free to open a PR 🙏
Just a quick reminder:

• Slots are not visible by default
• Every field has a visible config parameter that can be set to false to hide it Looking forward to it, and thank you for taking this on

[kuntlme]

Thanks for the clarification, @FedericoBonel! Got it 👍 I’ll take care of that and open a PR once I’m done.

[FedericoBonel]

Awesome! Also, I almost forgot, in case you haven’t already, make sure to give this a quick skim so you’re familiar with how we typically handle contributions.