Add closeMode to TabView

[diogoko]

This new property fixes the problem described in #2842.

Context

Currently, it's not possible to dynamically create closable TabPanels in TabView because the default behavior of the tab header close button is to hide the tab by index. More precisely, it adds the tab index to the hiddenTabsState array. If the onTabClose is also handled and programmatically removes the tab from the list used to generate the children TabPanel components, then 2 tabs are removed at once (the one that was closed and the one immediately following it).

This is an example of the kind of code that causes this bug:

<TabView onTabClose={(e) => setDynamicTabs([...dynamicTabs.slice(0, e.index), ...dynamicTabs.slice(e.index + 1)])}>
    {dynamicTabs.map((tab) => {
        return (
            <TabPanel key={tab.id} header={tab.name} closable>
                <p>Name: {tab.name}</p>
            </TabPanel>
        );
    })}
</TabView>

Description of changes

This PR adds a new closeMode property to TabView. Its value is "auto" by default; when "manual", clicking the default close button of a closable TabPanel will not add the index to the hiddenTabsState array and it's the programmer's responsibility to update the list used to generate the dynamic TabPanel components.

This is the above example with the new property:

<TabView closeMode="manual" onTabClose={(e) => setDynamicTabs([...dynamicTabs.slice(0, e.index), ...dynamicTabs.slice(e.index + 1)])}>
    {dynamicTabs.map((tab) => {
        return (
            <TabPanel key={tab.id} header={tab.name} closable>
                <p>Name: {tab.name}</p>
            </TabPanel>
        );
    })}
</TabView>

I also updated the docs and TS definitions.

[melloware]

Thanks for the PR! I assigned Mert to review but looks good to me.

[melloware]

Can you rebase this PR there are conflicts.

[diogoko]

Can you rebase this PR there are conflicts.

Sure! Just need a couple of days.

[vercel[bot]]

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

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
primereact	⬜️ Ignored (Inspect)			May 30, 2023 2:47pm

[diogoko]

@melloware I've rebased it from the current master and redone the docs in the 9.x format.

[melloware]

I actually think this is fixed by https://github.com/primefaces/primereact/issues/5229