feat(Forms): auto-open iterate container items when validation errors and make Iterate.Toolbar fully customizable

[tujoworker]

• This PR allows a dev to fully customize the buttons for the edit and view container toolbar.
• I also auto-opens the edit container, when there is a validation error.
• A followup-up PR feat(Forms): add toolbarVariant="minimumOneItem" to Iterate.Toolbar for hiding buttons when there is only one item in the array #3919 has been created.

Quick example of a fully customized Toolbar:

<Form.Handler>
  <Iterate.Array path="/countries" defaultValue={[null]}>
    <Iterate.ViewContainer
      toolbar={
        <Iterate.Toolbar>
          {({ items }) => {
            if (items.length === 1) {
              return <Iterate.ViewContainer.EditButton />
            }
            return (
              <>
                <Iterate.ViewContainer.EditButton />
                <Iterate.ViewContainer.RemoveButton />
              </>
            )
          }}
        </Iterate.Toolbar>
      }
    >
      <Value.SelectCountry
        label="Land du er statsborger i"
        itemPath="/"
      />
    </Iterate.ViewContainer>

    <Iterate.EditContainer
      toolbar={
        <Iterate.Toolbar>
          {({ items }) => {
            if (items.length === 1) {
              return null
            }

            return (
              <>
                <Iterate.EditContainer.DoneButton />
                <Iterate.EditContainer.CancelButton />
              </>
            )
          }}
        </Iterate.Toolbar>
      }
    >
      <Field.SelectCountry
        label="Land du er statsborger i"
        itemPath="/"
        required
      />
    </Iterate.EditContainer>
  </Iterate.Array>

  <Iterate.PushButton
    path="/countries"
    pushValue={null}
    text="Legg til flere statsborgerskap"
  />
</Form.Handler>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2024 8:21am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[tujoworker]

Can you test the keyboard usage again? Have made some improvements there.

[langz]

https://eufemia-git-feat-iterate-container-mode-eufemia.vercel.app/uilib/extensions/forms/Iterate/Array/demos/#initially-open
Sometimes when I get the error message "Feilene ovenfor må rettes" it looks like it misses margin/spacing. But only in certain situations? In the following video, you can see it happen:

Screen.Recording.2024-09-11.at.23.06.03.mov

Looking like this(see the last error message):

I believe this is newly introduced, as I did not experience this last week.

[langz]

https://eufemia-git-feat-iterate-container-mode-eufemia.vercel.app/uilib/extensions/forms/Iterate/Array/demos/#initially-open Sometimes when I get the error message "Feilene ovenfor må rettes" it looks like it misses margin/spacing. But only in certain situations? In the following video, you can see it happen:

Screen.Recording.2024-09-11.at.23.06.03.mov
Looking like this(see the last error message):

I believe this is newly introduced, as I did not experience this last week.

I'm still able to reproduce this now.

[tujoworker]

🎉 This PR is included in version 10.48.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀