feat(Forms): add insertAt to Iterate.PushContainer (#4555)

Author: tujoworker

packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainer.tsx

@@ -64,6 +64,11 @@ export type Props = (OnlyPathRequired | OnlyItemPathRequired) & {
    */
   required?: boolean
 
+  /**
+   * The index to insert the new item at.
+   */
+  insertAt?: number
+
   /**
    * The button to open container.
    */
@@ -124,6 +129,7 @@ function PushContainer(props: AllProps) {
     bubbleValidation,
     path,
     itemPath,
+    insertAt,
     title,
     required = requiredInherited,
     children,
@@ -208,7 +214,13 @@ function PushContainer(props: AllProps) {
       transformOnCommit={({ pushContainerItems }) => {
         return moveValueToPath(
           path || absolutePath,
-          [...entries, ...pushContainerItems],
+          typeof insertAt === 'number'
+            ? [
+                ...entries.slice(0, insertAt),
+                ...pushContainerItems,
+                ...entries.slice(insertAt),
+              ]
+            : [...entries, ...pushContainerItems],
           absolutePath ? structuredClone(getValueByPath('/')) : {}
         )
       }}

packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/PushContainerDocs.ts

@@ -12,6 +12,11 @@ export const PushContainerProperties: PropertiesTableProps = {
     type: 'string',
     status: 'optional',
   },
+  insertAt: {
+    doc: 'The index to insert the new item at.',
+    type: 'number',
+    status: 'optional',
+  },
   title: {
     doc: 'The title of the container.',
     type: 'React.Node',

packages/dnb-eufemia/src/extensions/forms/Iterate/PushContainer/__tests__/PushContainer.test.tsx

@@ -1197,4 +1197,42 @@ describe('PushContainer', () => {
       ).toHaveClass('dnb-height-animation--is-visible')
     })
   })
+
+  describe('insertAt', () => {
+    it('should add a new entry to the beginning of the array', async () => {
+      const onChange = jest.fn()
+
+      render(
+        <Form.Handler
+          onChange={onChange}
+          defaultData={{
+            entries: ['Existing'],
+          }}
+        >
+          <Iterate.Array path="/entries">...</Iterate.Array>
+
+          <Iterate.PushContainer path="/entries" insertAt={0}>
+            <Field.String itemPath="/" />
+          </Iterate.PushContainer>
+        </Form.Handler>
+      )
+
+      const input = document.querySelector('input')
+      const button = document.querySelector('button')
+
+      await userEvent.type(input, 'First entry')
+
+      expect(onChange).toHaveBeenCalledTimes(0)
+
+      await userEvent.click(button)
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenLastCalledWith(
+        {
+          entries: ['First entry', 'Existing'],
+        },
+        expect.anything()
+      )
+    })
+  })
 })