fix(Forms): ensure itemNr still works in the Iterate.ViewContainer (#…

…4002)
dnbexperience · Sep 26, 2024 · 6f8bfb3 · 6f8bfb3
1 parent 1e57eab
commit 6f8bfb3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx
@@ -40,8 +40,15 @@ function ViewContainer(props: AllProps) {
 
   let itemTitle = title
   let ariaLabel = useMemo(() => convertJsxToString(itemTitle), [itemTitle])
-  if (ariaLabel.includes('{itemNo}')) {
-    itemTitle = ariaLabel = ariaLabel.replace('{itemNo}', index + 1)
+  if (ariaLabel.includes('{itemN')) {
+    /**
+     * {itemNr} is deprecated, and can be removed in v11 in favor of {itemNo}
+     * So in v11 we can use '{itemNo}' instead of a regex
+     */
+    itemTitle = ariaLabel = ariaLabel.replace(
+      /\{itemN(r|o)\}/g,
+      String(index + 1)
+    )
   }
 
   let toolbarElement = toolbar

diff --git a/...s/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/__tests__/ViewContainer.test.tsx b/...s/dnb-eufemia/src/extensions/forms/Iterate/ViewContainer/__tests__/ViewContainer.test.tsx
@@ -77,6 +77,20 @@ describe('ViewContainer', () => {
     expect(leads[1]).toHaveTextContent('Item title 2')
   })
 
+  // Deprecated, can be removed in v11
+  it('should render title with "itemNr"', () => {
+    render(
+      <Iterate.Array value={['foo', 'bar']}>
+        <ViewContainer title="Item title {itemNr}">content</ViewContainer>
+      </Iterate.Array>
+    )
+
+    const leads = document.querySelectorAll('.dnb-p')
+    expect(leads).toHaveLength(2)
+    expect(leads[0]).toHaveTextContent('Item title 1')
+    expect(leads[1]).toHaveTextContent('Item title 2')
+  })
+
   it('calls "handleRemove" when remove button is clicked', () => {
     const handleRemove = jest.fn()