diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js index 9850b748c4..c491279982 100644 --- a/components/lib/tabview/TabView.js +++ b/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) => { diff --git a/components/lib/tabview/TabViewBase.js b/components/lib/tabview/TabViewBase.js index 2e41ca19d7..e6a4bbc89c 100644 --- a/components/lib/tabview/TabViewBase.js +++ b/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), diff --git a/components/lib/tabview/tabview.d.ts b/components/lib/tabview/tabview.d.ts index 592bde95d6..c063b2ae1e 100644 --- a/components/lib/tabview/tabview.d.ts +++ b/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; } /**