Fix #5900: TabPanel add visible prop

components/lib/tabview/TabView.js

@@ -69,7 +69,7 @@ export const TabView = React.forwardRef((inProps, ref) => {
     const getTabProp = (tab, name) => TabPanelBase.getCProp(tab, name);
 
     const shouldUseTab = (tab) => {
-        return tab && ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every((_i) => _i !== tab.key);
+        return tab && getTabProp(tab, 'visible') && ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every((_i) => _i !== tab.key);
     };
 
     const findVisibleActiveTab = (i) => {

components/lib/tabview/TabViewBase.js

@@ -140,8 +140,10 @@ export const TabViewBase = ComponentBase.extend({
 export const TabPanelBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'TabPanel',
+        children: undefined,
         className: null,
         closable: false,
+        closeIcon: null,
         contentClassName: null,
         contentStyle: null,
         disabled: false,
@@ -150,12 +152,11 @@ export const TabPanelBase = ComponentBase.extend({
         headerStyle: null,
         headerTemplate: null,
         leftIcon: null,
-        rightIcon: null,
-        prevButton: null,
         nextButton: null,
-        closeIcon: null,
+        prevButton: null,
+        rightIcon: null,
         style: null,
-        children: undefined
+        visible: true
     },
     getCProp: (tab, name) => ObjectUtils.getComponentProp(tab, name, TabPanelBase.defaultProps),
     getCProps: (tab) => ObjectUtils.getComponentProps(tab, TabPanelBase.defaultProps),

components/lib/tabview/tabview.d.ts

@@ -155,6 +155,28 @@ export interface TabPanelPassThroughOptions {
  * @group Properties
  */
 export interface TabPanelProps {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Defines if tab can be removed.
+     * @defaultValue false
+     */
+    closable?: boolean | undefined;
+    /**
+     * Style class of the tab header and content.
+     */
+    className?: string | undefined;
+    /**
+     * Inline style of the tab content.
+     */
+    contentStyle?: React.CSSProperties | undefined;
+    /**
+     * Style class of the tab content.
+     */
+    contentClassName?: string | undefined;
     /**
      * Orientation of tab headers.
      */
@@ -163,6 +185,14 @@ export interface TabPanelProps {
      * Header template of the tab to customize more.
      */
     headerTemplate?: React.ReactNode | ((options: TabPanelHeaderTemplateOptions) => React.ReactNode);
+    /**
+     * Inline style of the tab header.
+     */
+    headerStyle?: React.CSSProperties | undefined;
+    /**
+     * Style class of the tab header.
+     */
+    headerClassName?: string | undefined;
     /**
      * Icons can be placed at left of a header.
      */
@@ -188,40 +218,6 @@ export interface TabPanelProps {
      * @defaultValue false
      */
     disabled?: boolean | undefined;
-    /**
-     * Defines if tab can be removed.
-     * @defaultValue false
-     */
-    closable?: boolean | undefined;
-    /**
-     * Inline style of the tab header and content.
-     */
-    style?: React.CSSProperties | undefined;
-    /**
-     * Style class of the tab header and content.
-     */
-    className?: string | undefined;
-    /**
-     * Inline style of the tab header.
-     */
-    headerStyle?: React.CSSProperties | undefined;
-    /**
-     * Style class of the tab header.
-     */
-    headerClassName?: string | undefined;
-    /**
-     * Inline style of the tab content.
-     */
-    contentStyle?: React.CSSProperties | undefined;
-    /**
-     * Style class of the tab content.
-     */
-    contentClassName?: string | undefined;
-    /**
-     * Used to get the child elements of the component.
-     * @readonly
-     */
-    children?: React.ReactNode | undefined;
     /**
      * Uses to pass attributes to DOM elements inside the component.
      * @type {TabPanelPassThroughOptions}
@@ -232,11 +228,20 @@ export interface TabPanelProps {
      * @type {PassThroughOptions}
      */
     ptOptions?: PassThroughOptions;
+    /**
+     * Inline style of the tab header and content.
+     */
+    style?: React.CSSProperties | undefined;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
      */
     unstyled?: boolean;
+    /**
+     * When set as false, hides the tab panel.
+     * @defaultValue true
+     */
+    visible?: boolean | undefined;
 }
 
 /**