primereact 9.3.1 → 9.5.0

package/tabview/tabview.cjs.js

@@ -7,6 +7,7 @@ var api = require('primereact/api');
 var hooks = require('primereact/hooks');
 var ripple = require('primereact/ripple');
 var utils = require('primereact/utils');
+var componentbase = require('primereact/componentbase');
 var chevronright = require('primereact/icons/chevronright');
 var chevronleft = require('primereact/icons/chevronleft');
 var times = require('primereact/icons/times');
@@ -31,19 +32,35 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
 
 function _typeof(obj) {
@@ -87,37 +104,6 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
@@ -158,7 +144,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var TabViewBase = {
+var TabViewBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'TabView',
     id: null,
@@ -174,15 +160,9 @@ var TabViewBase = {
     scrollable: false,
     style: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return utils.ObjectUtils.getMergedProps(props, TabViewBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return utils.ObjectUtils.getDiffProps(props, TabViewBase.defaultProps);
   }
-};
-var TabPanelBase = {
+});
+var TabPanelBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'TabPanel',
     className: null,
@@ -211,7 +191,7 @@ var TabPanelBase = {
   getCOtherProps: function getCOtherProps(tab) {
     return utils.ObjectUtils.getComponentDiffProps(tab, TabPanelBase.defaultProps);
   }
-};
+});
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -246,6 +226,25 @@ var TabView = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var nextBtnRef = React__namespace.useRef(null);
   var tabsRef = React__namespace.useRef({});
   var activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
+  var metaData = {
+    props: props,
+    state: {
+      id: idState,
+      isPrevButtonDisabled: backwardIsDisabledState,
+      isNextButtonDisabled: forwardIsDisabledState,
+      hiddenTabsState: hiddenTabsState,
+      activeIndex: activeIndexState
+    }
+  };
+  var _TabViewBase$setMetaD = TabViewBase.setMetaData(_objectSpread({}, metaData)),
+    ptm = _TabViewBase$setMetaD.ptm,
+    ptmo = _TabViewBase$setMetaD.ptmo;
+  var getTabPT = function getTabPT(tab, key) {
+    return ptmo(getTabProp(tab, 'pt'), key, {
+      props: tab.props,
+      parent: metaData
+    });
+  };
   var isSelected = function isSelected(index) {
     return index === activeIndex;
   };
@@ -415,15 +414,16 @@ var TabView = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var headerId = idState + '_header_' + index;
     var ariaControls = idState + '_content_' + index;
     var tabIndex = disabled ? null : 0;
-    var leftIconElement = leftIcon && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, utils.IconUtils.getJSXIcon(leftIcon, {
+    var leftIconElement = leftIcon && utils.IconUtils.getJSXIcon(leftIcon, undefined, {
       props: props
-    }));
-    var titleElement = /*#__PURE__*/React__namespace.createElement("span", {
-      className: "p-tabview-title"
-    }, header);
-    var rightIconElement = rightIcon && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, utils.IconUtils.getJSXIcon(rightIcon, {
+    });
+    var headerTitleProps = utils.mergeProps({
+      className: 'p-tabview-title'
+    }, getTabPT(tab, 'headertitle'));
+    var titleElement = /*#__PURE__*/React__namespace.createElement("span", headerTitleProps, header);
+    var rightIconElement = rightIcon && utils.IconUtils.getJSXIcon(rightIcon, undefined, {
       props: props
-    }));
+    });
     var iconClassName = 'p-tabview-close';
     var icon = closeIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, {
       className: iconClassName,
@@ -432,27 +432,31 @@ var TabView = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
       }
     });
     var closableIconElement = closable ? utils.IconUtils.getJSXIcon(icon, {
-      className: iconClassName
+      className: iconClassName,
+      onClick: function onClick(e) {
+        return onTabHeaderClose(e, index);
+      }
     }, {
       props: props
     }) : null;
-    var content =
-    /*#__PURE__*/
-    // eslint-disable /
-    React__namespace.createElement("a", {
-      role: "tab",
-      className: "p-tabview-nav-link",
+    var headerActionProps = utils.mergeProps({
+      id: headerId,
+      role: 'tab',
+      className: 'p-tabview-nav-link',
+      tabIndex: tabIndex,
+      'aria-controls': ariaControls,
+      'aria-selected': selected,
       onClick: function onClick(e) {
         return onTabHeaderClick(e, tab, index);
       },
-      id: headerId,
       onKeyDown: function onKeyDown(e) {
         return _onKeyDown(e, tab, index);
-      },
-      "aria-controls": ariaControls,
-      "aria-selected": selected,
-      tabIndex: tabIndex
-    }, leftIconElement, titleElement, rightIconElement, closableIconElement, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null))
+      }
+    }, getTabPT(tab, 'headeraction'));
+    var content =
+    /*#__PURE__*/
+    // eslint-disable /
+    React__namespace.createElement("a", headerActionProps, leftIconElement, titleElement, rightIconElement, closableIconElement, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null))
     // eslint-enable /
     ;
 
@@ -477,14 +481,15 @@ var TabView = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
       };
       content = utils.ObjectUtils.getJSXElement(headerTemplate, defaultContentOptions);
     }
-    return /*#__PURE__*/React__namespace.createElement("li", {
+    var headerProps = utils.mergeProps({
       ref: function ref(el) {
         return tabsRef.current["tab_".concat(index)] = el;
       },
       className: className,
       style: style,
-      role: "presentation"
-    }, content);
+      role: 'presentation'
+    }, getTabPT(tab, 'root'), getTabPT(tab, 'header'));
+    return /*#__PURE__*/React__namespace.createElement("li", headerProps, content);
   };
   var createTabHeaders = function createTabHeaders() {
     return React__namespace.Children.map(props.children, function (tab, index) {
@@ -495,23 +500,30 @@ var TabView = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   };
   var createNavigator = function createNavigator() {
     var headers = createTabHeaders();
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      ref: contentRef,
+    var navContentProps = utils.mergeProps({
       id: idState,
-      className: "p-tabview-nav-content",
+      ref: contentRef,
+      className: 'p-tabview-nav-content',
       style: props.style,
       onScroll: onScroll
-    }, /*#__PURE__*/React__namespace.createElement("ul", {
+    }, ptm('navcontent'));
+    var navProps = utils.mergeProps({
       ref: navRef,
-      className: "p-tabview-nav",
-      role: "tablist"
-    }, headers, /*#__PURE__*/React__namespace.createElement("li", {
+      className: 'p-tabview-nav',
+      role: 'tablist'
+    }, ptm('nav'));
+    var inkbarProps = utils.mergeProps({
       ref: inkbarRef,
-      className: "p-tabview-ink-bar"
-    })));
+      className: 'p-tabview-ink-bar'
+    }, ptm('inkbar'));
+    return /*#__PURE__*/React__namespace.createElement("div", navContentProps, /*#__PURE__*/React__namespace.createElement("ul", navProps, headers, /*#__PURE__*/React__namespace.createElement("li", inkbarProps)));
   };
   var createContent = function createContent() {
     var className = utils.classNames('p-tabview-panels', props.panelContainerClassName);
+    var panelContainerProps = utils.mergeProps({
+      className: className,
+      style: props.panelContainerStyle
+    }, ptm('panelcontainer'));
     var contents = React__namespace.Children.map(props.children, function (tab, index) {
       if (shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index))) {
         var selected = isSelected(index);
@@ -521,69 +533,77 @@ var TabView = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
         });
         var contentId = idState + '_content_' + index;
         var ariaLabelledBy = idState + '_header_' + index;
-        var _otherProps = TabPanelBase.getCOtherProps(tab);
-        return /*#__PURE__*/React__namespace.createElement("div", _extends({}, _otherProps, {
+        var contentProps = utils.mergeProps({
           id: contentId,
-          "aria-labelledby": ariaLabelledBy,
-          "aria-hidden": !selected,
           className: _className2,
           style: style,
-          role: "tabpanel"
-        }), !props.renderActiveOnly ? getTabProp(tab, 'children') : selected && getTabProp(tab, 'children'));
+          role: 'tabpanel',
+          'aria-labelledby': ariaLabelledBy,
+          'aria-hidden': !selected
+        }, TabPanelBase.getCOtherProps(tab), getTabPT(tab, 'root'), getTabPT(tab, 'content'));
+        return /*#__PURE__*/React__namespace.createElement("div", contentProps, !props.renderActiveOnly ? getTabProp(tab, 'children') : selected && getTabProp(tab, 'children'));
       }
     });
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: className,
-      style: props.panelContainerStyle
-    }, contents);
+    return /*#__PURE__*/React__namespace.createElement("div", panelContainerProps, contents);
   };
   var createPrevButton = function createPrevButton() {
-    var icon = props.prevButton || /*#__PURE__*/React__namespace.createElement(chevronleft.ChevronLeftIcon, null);
-    var leftIcon = utils.IconUtils.getJSXIcon(icon, undefined, {
+    var prevIconProps = utils.mergeProps(ptm('previcon'));
+    var icon = props.prevButton || /*#__PURE__*/React__namespace.createElement(chevronleft.ChevronLeftIcon, prevIconProps);
+    var leftIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, prevIconProps), {
       props: props
     });
+    var prevButtonProps = utils.mergeProps({
+      ref: prevBtnRef,
+      type: 'button',
+      className: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
+      'aria-label': api.ariaLabel('previousPageLabel'),
+      onClick: function onClick(e) {
+        return navBackward();
+      }
+    }, ptm('prevbutton'));
     if (props.scrollable && !backwardIsDisabledState) {
-      return /*#__PURE__*/React__namespace.createElement("button", {
-        ref: prevBtnRef,
-        className: "p-tabview-nav-prev p-tabview-nav-btn p-link",
-        onClick: navBackward,
-        type: "button",
-        "aria-label": api.ariaLabel('previousPageLabel')
-      }, leftIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      return /*#__PURE__*/React__namespace.createElement("button", prevButtonProps, leftIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     }
     return null;
   };
   var createNextButton = function createNextButton() {
-    var icon = props.prevButton || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, null);
-    var rightIcon = utils.IconUtils.getJSXIcon(icon, {
+    var nextIconProps = utils.mergeProps({
       'aria-hidden': 'true'
-    }, {
+    }, ptm('nexticon'));
+    var icon = props.nextButton || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, nextIconProps);
+    var rightIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, nextIconProps), {
       props: props
     });
+    var nextButtonProps = utils.mergeProps({
+      ref: nextBtnRef,
+      type: 'button',
+      className: 'p-tabview-nav-next p-tabview-nav-btn p-link',
+      'aria-label': api.ariaLabel('nextPageLabel'),
+      onClick: function onClick(e) {
+        return navForward();
+      }
+    }, ptm('nextbutton'));
     if (props.scrollable && !forwardIsDisabledState) {
-      return /*#__PURE__*/React__namespace.createElement("button", {
-        ref: nextBtnRef,
-        className: "p-tabview-nav-next p-tabview-nav-btn p-link",
-        onClick: navForward,
-        type: "button",
-        "aria-label": api.ariaLabel('nextPageLabel')
-      }, rightIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      return /*#__PURE__*/React__namespace.createElement("button", nextButtonProps, rightIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     }
   };
-  var otherProps = TabViewBase.getOtherProps(props);
   var className = utils.classNames('p-tabview p-component', {
     'p-tabview-scrollable': props.scrollable
   }, props.className);
+  var rootProps = utils.mergeProps({
+    id: idState,
+    ref: elementRef,
+    style: props.style,
+    className: className
+  }, TabViewBase.getOtherProps(props), ptm('root'));
+  var navContainerProps = utils.mergeProps({
+    className: 'p-tabview-nav-container'
+  }, ptm('navcontainer'));
   var navigator = createNavigator();
   var content = createContent();
   var prevButton = createPrevButton();
   var nextButton = createNextButton();
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: elementRef,
-    className: className
-  }, otherProps), /*#__PURE__*/React__namespace.createElement("div", {
-    className: "p-tabview-nav-container"
-  }, prevButton, navigator, nextButton), content);
+  return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", navContainerProps, prevButton, navigator, nextButton), content);
 });
 TabPanel.displayName = 'TabPanel';
 TabView.displayName = 'TabView';

package/tabview/tabview.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/hooks"),r=require("primereact/ripple"),l=require("primereact/utils"),a=require("primereact/icons/chevronright"),o=require("primereact/icons/chevronleft"),i=require("primereact/icons/times");function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=c(e);function s(){return s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},s.apply(this,arguments)}function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function p(e,t){if("object"!==f(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function b(e){var t=p(e,"string");return"symbol"===f(t)?t:String(t)}function d(e,t,n){return(t=b(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function m(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function v(e){if(Array.isArray(e))return m(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function h(e,t){if(e){if("string"==typeof e)return m(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?m(e,t):void 0}}function g(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function O(e){if(Array.isArray(e))return e}function C(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,l,a,o,i=[],c=!0,u=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=a.call(n)).done)&&(i.push(r.value),i.length!==t);c=!0);}catch(e){u=!0,l=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(u)throw l}}return i}}function P(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function w(e,t){return O(e)||C(e,t)||h(e,t)||P()}var E={defaultProps:{__TYPE:"TabView",id:null,activeIndex:0,className:null,onBeforeTabChange:null,onBeforeTabClose:null,onTabChange:null,onTabClose:null,panelContainerClassName:null,panelContainerStyle:null,renderActiveOnly:!0,scrollable:!1,style:null,children:void 0},getProps:function(e){return l.ObjectUtils.getMergedProps(e,E.defaultProps)},getOtherProps:function(e){return l.ObjectUtils.getDiffProps(e,E.defaultProps)}},j={defaultProps:{__TYPE:"TabPanel",className:null,closable:!1,contentClassName:null,contentStyle:null,disabled:!1,header:null,headerClassName:null,headerStyle:null,headerTemplate:null,leftIcon:null,rightIcon:null,prevButton:null,nextButton:null,closeIcon:null,style:null,children:void 0},getCProp:function(e,t){return l.ObjectUtils.getComponentProp(e,t,j.defaultProps)},getCProps:function(e){return l.ObjectUtils.getComponentProps(e,j.defaultProps)},getCOtherProps:function(e){return l.ObjectUtils.getComponentDiffProps(e,j.defaultProps)}};function I(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function S(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?I(Object(n),!0).forEach((function(t){d(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):I(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var N=function(){},T=u.forwardRef((function(e,c){var f=E.getProps(e),p=w(u.useState(f.id),2),b=p[0],d=p[1],m=w(u.useState(!0),2),O=m[0],C=m[1],P=w(u.useState(!1),2),I=P[0],N=P[1],T=w(u.useState([]),2),x=T[0],D=T[1],_=w(u.useState(f.activeIndex),2),U=_[0],k=_[1],A=u.useRef(null),R=u.useRef(null),B=u.useRef(null),L=u.useRef(null),q=u.useRef(null),H=u.useRef(null),W=u.useRef({}),J=f.onTabChange?f.activeIndex:U,V=function(e){return e===J},X=function(e,t){return j.getCProp(e,t)},M=function(e,t){return e&&l.ObjectUtils.isValidChild(e,"TabPanel")&&x.every((function(e){return e!==t}))},F=function(e,t){var n;(e.preventDefault(),f.onBeforeTabClose&&!1===f.onBeforeTabClose({originalEvent:e,index:t}))||(D([].concat(v(n=x)||y(n)||h(n)||g(),[t])),f.onTabClose&&f.onTabClose({originalEvent:e,index:t}))},K=function(e,t,n){if(e&&e.preventDefault(),!X(t,"disabled")){if(f.onBeforeTabChange&&!1===f.onBeforeTabChange({originalEvent:e,index:n}))return;f.onTabChange?f.onTabChange({originalEvent:e,index:n}):k(n)}z(n)},Y=function(e,t,n){"Enter"===e.key&&K(e,t,n)},z=function(e){var t=W.current["tab_".concat(e)];t&&t.scrollIntoView&&t.scrollIntoView({block:"nearest"})},$=function(e){var t,n,r,a;f.scrollable&&(n=(t=R.current).scrollLeft,r=t.scrollWidth,a=l.DomHandler.getWidth(R.current),C(0===n),N(n===r-a)),e.preventDefault()},G=function(){return[q.current,H.current].reduce((function(e,t){return t?e+l.DomHandler.getWidth(t):e}),0)},Q=function(){var e=l.DomHandler.getWidth(R.current)-G(),t=R.current.scrollLeft-e;R.current.scrollLeft=t<=0?0:t},Z=function(){var e=l.DomHandler.getWidth(R.current)-G(),t=R.current.scrollLeft+e,n=R.current.scrollWidth-e;R.current.scrollLeft=t>=n?n:t},ee=function(){C(!0),N(!1),D([]),f.onTabChange?f.onTabChange({index:J}):k(f.activeIndex)};u.useEffect((function(){var e;e=W.current["tab_".concat(J)],L.current.style.width=l.DomHandler.getWidth(e)+"px",L.current.style.left=l.DomHandler.getOffset(e).left-l.DomHandler.getOffset(B.current).left+"px"})),n.useMountEffect((function(){b||d(l.UniqueComponentId())})),n.useUpdateEffect((function(){if(l.ObjectUtils.isNotEmpty(x)){var e=(t=x[x.length-1],(n=u.Children.map(f.children,(function(e,t){if(M(e,t))return{tab:e,index:t}}))).find((function(e){var n=e.index;return!X(e.tab,"disabled")&&n>=t}))||n.reverse().find((function(e){var n=e.index;return!X(e.tab,"disabled")&&t>n})));e&&K(null,e.tab,e.index)}var t,n}),[x]),n.useUpdateEffect((function(){z(f.activeIndex)}),[f.activeIndex]),u.useImperativeHandle(c,(function(){return{props:f,reset:ee,getElement:function(){return A.current}}}));var te,ne,re=function(e,t){var n=V(t),a=j.getCProps(e),o=a.headerClassName,c=a.style,s=a.className,p=a.disabled,d=a.leftIcon,m=a.rightIcon,v=a.header,y=a.headerTemplate,h=a.closable,g=a.closeIcon,O=S(S({},a.headerStyle||{}),c||{}),C=l.classNames("p-unselectable-text",{"p-tabview-selected p-highlight":n,"p-disabled":p},o,s),P=b+"_header_"+t,w=b+"_content_"+t,E=p?null:0,I=d&&u.createElement(u.Fragment,null,l.IconUtils.getJSXIcon(d,{props:f})),N=u.createElement("span",{className:"p-tabview-title"},v),T=m&&u.createElement(u.Fragment,null,l.IconUtils.getJSXIcon(m,{props:f})),x="p-tabview-close",D=h?l.IconUtils.getJSXIcon(g||u.createElement(i.TimesIcon,{className:x,onClick:function(e){return F(e,t)}}),{className:x},{props:f}):null,_=u.createElement("a",{role:"tab",className:"p-tabview-nav-link",onClick:function(n){return K(n,e,t)},id:P,onKeyDown:function(n){return Y(n,e,t)},"aria-controls":w,"aria-selected":n,tabIndex:E},I,N,T,D,u.createElement(r.Ripple,null));y&&(_=l.ObjectUtils.getJSXElement(y,{className:"p-tabview-nav-link",titleClassName:"p-tabview-title",onClick:function(n){return K(n,e,t)},onKeyDown:function(n){return Y(n,e,t)},leftIconElement:I,titleElement:N,rightIconElement:T,element:_,props:f,index:t,selected:n,ariaControls:w}));return u.createElement("li",{ref:function(e){return W.current["tab_".concat(t)]=e},className:C,style:O,role:"presentation"},_)},le=E.getOtherProps(f),ae=l.classNames("p-tabview p-component",{"p-tabview-scrollable":f.scrollable},f.className),oe=(te=u.Children.map(f.children,(function(e,t){if(M(e,t))return re(e,t)})),u.createElement("div",{ref:R,id:b,className:"p-tabview-nav-content",style:f.style,onScroll:$},u.createElement("ul",{ref:B,className:"p-tabview-nav",role:"tablist"},te,u.createElement("li",{ref:L,className:"p-tabview-ink-bar"})))),ie=function(){var e=l.classNames("p-tabview-panels",f.panelContainerClassName),t=u.Children.map(f.children,(function(e,t){if(M(e,t)&&(!f.renderActiveOnly||V(t))){var n=V(t),r=S(S({},X(e,"contentStyle")||{}),X(e,"style")||{}),a=l.classNames(X(e,"contentClassName"),X(e,"className"),"p-tabview-panel",{"p-hidden":!n}),o=b+"_content_"+t,i=b+"_header_"+t,c=j.getCOtherProps(e);return u.createElement("div",s({},c,{id:o,"aria-labelledby":i,"aria-hidden":!n,className:a,style:r,role:"tabpanel"}),f.renderActiveOnly?n&&X(e,"children"):X(e,"children"))}}));return u.createElement("div",{className:e,style:f.panelContainerStyle},t)}(),ce=(ne=l.IconUtils.getJSXIcon(f.prevButton||u.createElement(o.ChevronLeftIcon,null),void 0,{props:f}),f.scrollable&&!O?u.createElement("button",{ref:q,className:"p-tabview-nav-prev p-tabview-nav-btn p-link",onClick:Q,type:"button","aria-label":t.ariaLabel("previousPageLabel")},ne,u.createElement(r.Ripple,null)):null),ue=function(){var e=l.IconUtils.getJSXIcon(f.prevButton||u.createElement(a.ChevronRightIcon,null),{"aria-hidden":"true"},{props:f});if(f.scrollable&&!I)return u.createElement("button",{ref:H,className:"p-tabview-nav-next p-tabview-nav-btn p-link",onClick:Z,type:"button","aria-label":t.ariaLabel("nextPageLabel")},e,u.createElement(r.Ripple,null))}();return u.createElement("div",s({ref:A,className:ae},le),u.createElement("div",{className:"p-tabview-nav-container"},ce,oe,ue),ie)}));N.displayName="TabPanel",T.displayName="TabView",exports.TabPanel=N,exports.TabView=T;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/hooks"),r=require("primereact/ripple"),a=require("primereact/utils"),l=require("primereact/componentbase"),o=require("primereact/icons/chevronright"),i=require("primereact/icons/chevronleft"),c=require("primereact/icons/times");function u(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=u(e);function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function f(e){if(Array.isArray(e))return p(e)}function b(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function d(e,t){if(e){if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}function m(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function v(e){return v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v(e)}function y(e,t){if("object"!==v(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==v(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function g(e){var t=y(e,"string");return"symbol"===v(t)?t:String(t)}function h(e,t,n){return(t=g(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function P(e){if(Array.isArray(e))return e}function C(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,l,o,i=[],c=!0,u=!1;try{if(l=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=l.call(n)).done)&&(i.push(r.value),i.length!==t);c=!0);}catch(e){u=!0,a=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(u)throw a}}return i}}function w(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function O(e,t){return P(e)||C(e,t)||d(e,t)||w()}var E=l.ComponentBase.extend({defaultProps:{__TYPE:"TabView",id:null,activeIndex:0,className:null,onBeforeTabChange:null,onBeforeTabClose:null,onTabChange:null,onTabClose:null,panelContainerClassName:null,panelContainerStyle:null,renderActiveOnly:!0,scrollable:!1,style:null,children:void 0}}),I=l.ComponentBase.extend({defaultProps:{__TYPE:"TabPanel",className:null,closable:!1,contentClassName:null,contentStyle:null,disabled:!1,header:null,headerClassName:null,headerStyle:null,headerTemplate:null,leftIcon:null,rightIcon:null,prevButton:null,nextButton:null,closeIcon:null,style:null,children:void 0},getCProp:function(e,t){return a.ObjectUtils.getComponentProp(e,t,I.defaultProps)},getCProps:function(e){return a.ObjectUtils.getComponentProps(e,I.defaultProps)},getCOtherProps:function(e){return a.ObjectUtils.getComponentDiffProps(e,I.defaultProps)}});function S(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function N(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?S(Object(n),!0).forEach((function(t){h(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):S(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var x=function(){},j=s.forwardRef((function(e,l){var u=E.getProps(e),p=O(s.useState(u.id),2),v=p[0],y=p[1],g=O(s.useState(!0),2),h=g[0],P=g[1],C=O(s.useState(!1),2),w=C[0],S=C[1],x=O(s.useState([]),2),j=x[0],T=x[1],D=O(s.useState(u.activeIndex),2),_=D[0],k=D[1],U=s.useRef(null),B=s.useRef(null),A=s.useRef(null),R=s.useRef(null),q=s.useRef(null),L=s.useRef(null),H=s.useRef({}),W=u.onTabChange?u.activeIndex:_,J={props:u,state:{id:v,isPrevButtonDisabled:h,isNextButtonDisabled:w,hiddenTabsState:j,activeIndex:_}},V=E.setMetaData(N({},J)),X=V.ptm,M=V.ptmo,K=function(e,t){return M(z(e,"pt"),t,{props:e.props,parent:J})},Y=function(e){return e===W},z=function(e,t){return I.getCProp(e,t)},$=function(e,t){return e&&a.ObjectUtils.isValidChild(e,"TabPanel")&&j.every((function(e){return e!==t}))},F=function(e,t){var n;(e.preventDefault(),u.onBeforeTabClose&&!1===u.onBeforeTabClose({originalEvent:e,index:t}))||(T([].concat(f(n=j)||b(n)||d(n)||m(),[t])),u.onTabClose&&u.onTabClose({originalEvent:e,index:t}))},G=function(e,t,n){if(e&&e.preventDefault(),!z(t,"disabled")){if(u.onBeforeTabChange&&!1===u.onBeforeTabChange({originalEvent:e,index:n}))return;u.onTabChange?u.onTabChange({originalEvent:e,index:n}):k(n)}Z(n)},Q=function(e,t,n){"Enter"===e.key&&G(e,t,n)},Z=function(e){var t=H.current["tab_".concat(e)];t&&t.scrollIntoView&&t.scrollIntoView({block:"nearest"})},ee=function(e){var t,n,r,l;u.scrollable&&(n=(t=B.current).scrollLeft,r=t.scrollWidth,l=a.DomHandler.getWidth(B.current),P(0===n),S(n===r-l)),e.preventDefault()},te=function(){return[q.current,L.current].reduce((function(e,t){return t?e+a.DomHandler.getWidth(t):e}),0)},ne=function(){P(!0),S(!1),T([]),u.onTabChange?u.onTabChange({index:W}):k(u.activeIndex)};s.useEffect((function(){var e;e=H.current["tab_".concat(W)],R.current.style.width=a.DomHandler.getWidth(e)+"px",R.current.style.left=a.DomHandler.getOffset(e).left-a.DomHandler.getOffset(A.current).left+"px"})),n.useMountEffect((function(){v||y(a.UniqueComponentId())})),n.useUpdateEffect((function(){if(a.ObjectUtils.isNotEmpty(j)){var e=(t=j[j.length-1],(n=s.Children.map(u.children,(function(e,t){if($(e,t))return{tab:e,index:t}}))).find((function(e){var n=e.index;return!z(e.tab,"disabled")&&n>=t}))||n.reverse().find((function(e){var n=e.index;return!z(e.tab,"disabled")&&t>n})));e&&G(null,e.tab,e.index)}var t,n}),[j]),n.useUpdateEffect((function(){Z(u.activeIndex)}),[u.activeIndex]),s.useImperativeHandle(l,(function(){return{props:u,reset:ne,getElement:function(){return U.current}}}));var re,ae,le,oe,ie,ce,ue,se=function(e,t){var n=Y(t),l=I.getCProps(e),o=l.headerClassName,i=l.style,p=l.className,f=l.disabled,b=l.leftIcon,d=l.rightIcon,m=l.header,y=l.headerTemplate,g=l.closable,h=l.closeIcon,P=N(N({},l.headerStyle||{}),i||{}),C=a.classNames("p-unselectable-text",{"p-tabview-selected p-highlight":n,"p-disabled":f},o,p),w=v+"_header_"+t,O=v+"_content_"+t,E=f?null:0,S=b&&a.IconUtils.getJSXIcon(b,void 0,{props:u}),x=a.mergeProps({className:"p-tabview-title"},K(e,"headertitle")),j=s.createElement("span",x,m),T=d&&a.IconUtils.getJSXIcon(d,void 0,{props:u}),D="p-tabview-close",_=g?a.IconUtils.getJSXIcon(h||s.createElement(c.TimesIcon,{className:D,onClick:function(e){return F(e,t)}}),{className:D,onClick:function(e){return F(e,t)}},{props:u}):null,k=a.mergeProps({id:w,role:"tab",className:"p-tabview-nav-link",tabIndex:E,"aria-controls":O,"aria-selected":n,onClick:function(n){return G(n,e,t)},onKeyDown:function(n){return Q(n,e,t)}},K(e,"headeraction")),U=s.createElement("a",k,S,j,T,_,s.createElement(r.Ripple,null));y&&(U=a.ObjectUtils.getJSXElement(y,{className:"p-tabview-nav-link",titleClassName:"p-tabview-title",onClick:function(n){return G(n,e,t)},onKeyDown:function(n){return Q(n,e,t)},leftIconElement:S,titleElement:j,rightIconElement:T,element:U,props:u,index:t,selected:n,ariaControls:O}));var B=a.mergeProps({ref:function(e){return H.current["tab_".concat(t)]=e},className:C,style:P,role:"presentation"},K(e,"root"),K(e,"header"));return s.createElement("li",B,U)},pe=a.classNames("p-tabview p-component",{"p-tabview-scrollable":u.scrollable},u.className),fe=a.mergeProps({id:v,ref:U,style:u.style,className:pe},E.getOtherProps(u),X("root")),be=a.mergeProps({className:"p-tabview-nav-container"},X("navcontainer")),de=(re=s.Children.map(u.children,(function(e,t){if($(e,t))return se(e,t)})),ae=a.mergeProps({id:v,ref:B,className:"p-tabview-nav-content",style:u.style,onScroll:ee},X("navcontent")),le=a.mergeProps({ref:A,className:"p-tabview-nav",role:"tablist"},X("nav")),oe=a.mergeProps({ref:R,className:"p-tabview-ink-bar"},X("inkbar")),s.createElement("div",ae,s.createElement("ul",le,re,s.createElement("li",oe)))),me=function(){var e=a.classNames("p-tabview-panels",u.panelContainerClassName),t=a.mergeProps({className:e,style:u.panelContainerStyle},X("panelcontainer")),n=s.Children.map(u.children,(function(e,t){if($(e,t)&&(!u.renderActiveOnly||Y(t))){var n=Y(t),r=N(N({},z(e,"contentStyle")||{}),z(e,"style")||{}),l=a.classNames(z(e,"contentClassName"),z(e,"className"),"p-tabview-panel",{"p-hidden":!n}),o=a.mergeProps({id:v+"_content_"+t,className:l,style:r,role:"tabpanel","aria-labelledby":v+"_header_"+t,"aria-hidden":!n},I.getCOtherProps(e),K(e,"root"),K(e,"content"));return s.createElement("div",o,u.renderActiveOnly?n&&z(e,"children"):z(e,"children"))}}));return s.createElement("div",t,n)}(),ve=(ie=a.mergeProps(X("previcon")),ce=a.IconUtils.getJSXIcon(u.prevButton||s.createElement(i.ChevronLeftIcon,ie),N({},ie),{props:u}),ue=a.mergeProps({ref:q,type:"button",className:"p-tabview-nav-prev p-tabview-nav-btn p-link","aria-label":t.ariaLabel("previousPageLabel"),onClick:function(e){return t=a.DomHandler.getWidth(B.current)-te(),void(B.current.scrollLeft=(n=B.current.scrollLeft-t)<=0?0:n);var t,n}},X("prevbutton")),u.scrollable&&!h?s.createElement("button",ue,ce,s.createElement(r.Ripple,null)):null),ye=function(){var e=a.mergeProps({"aria-hidden":"true"},X("nexticon")),n=a.IconUtils.getJSXIcon(u.nextButton||s.createElement(o.ChevronRightIcon,e),N({},e),{props:u}),l=a.mergeProps({ref:L,type:"button",className:"p-tabview-nav-next p-tabview-nav-btn p-link","aria-label":t.ariaLabel("nextPageLabel"),onClick:function(e){return t=a.DomHandler.getWidth(B.current)-te(),void(B.current.scrollLeft=(n=B.current.scrollLeft+t)>=(r=B.current.scrollWidth-t)?r:n);var t,n,r}},X("nextbutton"));if(u.scrollable&&!w)return s.createElement("button",l,n,s.createElement(r.Ripple,null))}();return s.createElement("div",fe,s.createElement("div",be,ve,de,ye),me)}));x.displayName="TabPanel",j.displayName="TabView",exports.TabPanel=x,exports.TabView=j;

package/tabview/tabview.d.ts

@@ -12,7 +12,10 @@
  *
  */
 import * as React from 'react';
-import { IconType } from '../utils/utils';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type TabViewPassThroughType<T> = PassThroughType<T, TabViewPassThroughMethodOptions>;
+export declare type TabPanelPassThroughType<T> = PassThroughType<T, TabPanelPassThroughMethodOptions>;
 
 /**
  * Custom Tabpanel header template options
@@ -70,6 +73,41 @@ interface TabPanelHeaderTemplateOptions {
     ariaControls: string;
 }
 
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabPanelPassThroughMethodOptions {
+    props: TabPanelProps;
+    parent: TabViewPassThroughMethodOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabPanelProps.pt}
+ */
+export interface TabPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TabPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: TabPanelPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the header action's DOM element.
+     */
+    headerAction?: TabPanelPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    headerTitle?: TabPanelPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    content?: TabPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
 /**
  * Defines valid properties in TabPanel component.
  * @group Properties
@@ -142,6 +180,11 @@ export interface TabPanelProps {
      * @readonly
      */
     children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TabPanelPassThroughOptions}
+     */
+    pt?: TabPanelPassThroughOptions;
 }
 
 /**
@@ -182,6 +225,89 @@ interface TabViewTabCloseEvent {
     index: number;
 }
 
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabViewPassThroughMethodOptions {
+    props: TabViewProps;
+    state: TabViewState;
+}
+
+/**
+ * Defines current inline state in TabView component.
+ */
+export interface TabViewState {
+    /**
+     * Current active index state.
+     */
+    activeIndex: number;
+    /**
+     * Unique id for the TabView component.
+     */
+    id: string;
+    /**
+     * Current state of hidden tab.
+     */
+    hiddenTabsState: number[];
+    /**
+     * Current state of previous button.
+     * @defaultValue true
+     */
+    isPrevButtonDisabled: boolean;
+    /**
+     * Current state of the next button.
+     * @defaultValue false
+     */
+    isNextButtonDisabled: boolean;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabViewProps.pt}
+ */
+export interface TabViewPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TabViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the nav container's DOM element.
+     */
+    navContainer?: TabViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the nav content's DOM element.
+     */
+    navContent?: TabViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    nav?: TabViewPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the inkbar's DOM element.
+     */
+    inkbar?: TabViewPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the previous button's DOM element.
+     */
+    previousButton?: TabViewPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the previous button icon's DOM element.
+     */
+    previousIcon?: TabViewPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the next button's DOM element.
+     */
+    nextButton?: TabViewPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the next button icon's DOM element.
+     */
+    nextIcon?: TabViewPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panelContainer?: TabViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
 /**
  * Defines valid properties in TabView component. In addition to these, all properties of HTMLDivElement can be used in this component.
  * @group Properties
@@ -215,6 +341,11 @@ export interface TabViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAtt
      * @defaultValue false
      */
     scrollable?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TabViewPassThroughOptions}
+     */
+    pt?: TabViewPassThroughOptions;
     /**
      * Callback to invoke before an active tab is changed. Return false to prevent tab from changing.
      * @param {TabViewTabChangeEvent} event - Custom tab change event.