primereact 9.3.0 → 9.4.0

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
@@ -94,15 +132,15 @@ export interface TabPanelProps {
     /**
      * Previous button of the tab header.
      */
-    prevButton: IconType<TabPanel> | undefined;
+    prevButton?: IconType<TabPanel> | undefined;
     /**
      * Next button of the tab header.
      */
-    nextButton: IconType<TabPanel> | undefined;
+    nextButton?: IconType<TabPanel> | undefined;
     /**
      * Close button of the tab header.
      */
-    closeIcon: IconType<TabPanel> | undefined;
+    closeIcon?: IconType<TabPanel> | undefined;
     /**
      * Whether the tab is disabled.
      * @defaultValue false
@@ -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.

package/tabview/tabview.esm.js

@@ -2,24 +2,41 @@ import * as React from 'react';
 import { ariaLabel } from 'primereact/api';
 import { useMountEffect, useUpdateEffect } from 'primereact/hooks';
 import { Ripple } from 'primereact/ripple';
-import { ObjectUtils, UniqueComponentId, classNames, DomHandler, IconUtils } from 'primereact/utils';
+import { ObjectUtils, UniqueComponentId, classNames, mergeProps, DomHandler, IconUtils } from 'primereact/utils';
+import { ComponentBase } from 'primereact/componentbase';
 import { ChevronRightIcon } from 'primereact/icons/chevronright';
 import { ChevronLeftIcon } from 'primereact/icons/chevronleft';
 import { TimesIcon } from 'primereact/icons/times';
 
-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) {
@@ -63,37 +80,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;
 }
@@ -134,7 +120,7 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-var TabViewBase = {
+var TabViewBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'TabView',
     id: null,
@@ -150,15 +136,9 @@ var TabViewBase = {
     scrollable: false,
     style: null,
     children: undefined
-  },
-  getProps: function getProps(props) {
-    return ObjectUtils.getMergedProps(props, TabViewBase.defaultProps);
-  },
-  getOtherProps: function getOtherProps(props) {
-    return ObjectUtils.getDiffProps(props, TabViewBase.defaultProps);
   }
-};
-var TabPanelBase = {
+});
+var TabPanelBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'TabPanel',
     className: null,
@@ -187,7 +167,7 @@ var TabPanelBase = {
   getCOtherProps: function getCOtherProps(tab) {
     return 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; }
@@ -222,6 +202,25 @@ var TabView = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var nextBtnRef = React.useRef(null);
   var tabsRef = React.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;
   };
@@ -229,7 +228,7 @@ var TabView = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return TabPanelBase.getCProp(tab, name);
   };
   var shouldUseTab = function shouldUseTab(tab, index) {
-    return ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every(function (_i) {
+    return tab && ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every(function (_i) {
       return _i !== index;
     });
   };
@@ -391,15 +390,16 @@ var TabView = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     var headerId = idState + '_header_' + index;
     var ariaControls = idState + '_content_' + index;
     var tabIndex = disabled ? null : 0;
-    var leftIconElement = leftIcon && /*#__PURE__*/React.createElement(React.Fragment, null, IconUtils.getJSXIcon(leftIcon, {
+    var leftIconElement = leftIcon && IconUtils.getJSXIcon(leftIcon, undefined, {
       props: props
-    }));
-    var titleElement = /*#__PURE__*/React.createElement("span", {
-      className: "p-tabview-title"
-    }, header);
-    var rightIconElement = rightIcon && /*#__PURE__*/React.createElement(React.Fragment, null, IconUtils.getJSXIcon(rightIcon, {
+    });
+    var headerTitleProps = mergeProps({
+      className: 'p-tabview-title'
+    }, getTabPT(tab, 'headertitle'));
+    var titleElement = /*#__PURE__*/React.createElement("span", headerTitleProps, header);
+    var rightIconElement = rightIcon && IconUtils.getJSXIcon(rightIcon, undefined, {
       props: props
-    }));
+    });
     var iconClassName = 'p-tabview-close';
     var icon = closeIcon || /*#__PURE__*/React.createElement(TimesIcon, {
       className: iconClassName,
@@ -408,27 +408,31 @@ var TabView = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       }
     });
     var closableIconElement = closable ? IconUtils.getJSXIcon(icon, {
-      className: iconClassName
+      className: iconClassName,
+      onClick: function onClick(e) {
+        return onTabHeaderClose(e, index);
+      }
     }, {
       props: props
     }) : null;
-    var content =
-    /*#__PURE__*/
-    // eslint-disable /
-    React.createElement("a", {
-      role: "tab",
-      className: "p-tabview-nav-link",
+    var headerActionProps = 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.createElement(Ripple, null))
+      }
+    }, getTabPT(tab, 'headeraction'));
+    var content =
+    /*#__PURE__*/
+    // eslint-disable /
+    React.createElement("a", headerActionProps, leftIconElement, titleElement, rightIconElement, closableIconElement, /*#__PURE__*/React.createElement(Ripple, null))
     // eslint-enable /
     ;
 
@@ -453,14 +457,15 @@ var TabView = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       };
       content = ObjectUtils.getJSXElement(headerTemplate, defaultContentOptions);
     }
-    return /*#__PURE__*/React.createElement("li", {
+    var headerProps = 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.createElement("li", headerProps, content);
   };
   var createTabHeaders = function createTabHeaders() {
     return React.Children.map(props.children, function (tab, index) {
@@ -471,23 +476,30 @@ var TabView = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   };
   var createNavigator = function createNavigator() {
     var headers = createTabHeaders();
-    return /*#__PURE__*/React.createElement("div", {
-      ref: contentRef,
+    var navContentProps = mergeProps({
       id: idState,
-      className: "p-tabview-nav-content",
+      ref: contentRef,
+      className: 'p-tabview-nav-content',
       style: props.style,
       onScroll: onScroll
-    }, /*#__PURE__*/React.createElement("ul", {
+    }, ptm('navcontent'));
+    var navProps = mergeProps({
       ref: navRef,
-      className: "p-tabview-nav",
-      role: "tablist"
-    }, headers, /*#__PURE__*/React.createElement("li", {
+      className: 'p-tabview-nav',
+      role: 'tablist'
+    }, ptm('nav'));
+    var inkbarProps = mergeProps({
       ref: inkbarRef,
-      className: "p-tabview-ink-bar"
-    })));
+      className: 'p-tabview-ink-bar'
+    }, ptm('inkbar'));
+    return /*#__PURE__*/React.createElement("div", navContentProps, /*#__PURE__*/React.createElement("ul", navProps, headers, /*#__PURE__*/React.createElement("li", inkbarProps)));
   };
   var createContent = function createContent() {
     var className = classNames('p-tabview-panels', props.panelContainerClassName);
+    var panelContainerProps = mergeProps({
+      className: className,
+      style: props.panelContainerStyle
+    }, ptm('panelcontainer'));
     var contents = React.Children.map(props.children, function (tab, index) {
       if (shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index))) {
         var selected = isSelected(index);
@@ -497,69 +509,77 @@ var TabView = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         });
         var contentId = idState + '_content_' + index;
         var ariaLabelledBy = idState + '_header_' + index;
-        var _otherProps = TabPanelBase.getCOtherProps(tab);
-        return /*#__PURE__*/React.createElement("div", _extends({}, _otherProps, {
+        var contentProps = 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.createElement("div", contentProps, !props.renderActiveOnly ? getTabProp(tab, 'children') : selected && getTabProp(tab, 'children'));
       }
     });
-    return /*#__PURE__*/React.createElement("div", {
-      className: className,
-      style: props.panelContainerStyle
-    }, contents);
+    return /*#__PURE__*/React.createElement("div", panelContainerProps, contents);
   };
   var createPrevButton = function createPrevButton() {
-    var icon = props.prevButton || /*#__PURE__*/React.createElement(ChevronLeftIcon, null);
-    var leftIcon = IconUtils.getJSXIcon(icon, undefined, {
+    var prevIconProps = mergeProps(ptm('previcon'));
+    var icon = props.prevButton || /*#__PURE__*/React.createElement(ChevronLeftIcon, prevIconProps);
+    var leftIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, prevIconProps), {
       props: props
     });
+    var prevButtonProps = mergeProps({
+      ref: prevBtnRef,
+      type: 'button',
+      className: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
+      'aria-label': ariaLabel('previousPageLabel'),
+      onClick: function onClick(e) {
+        return navBackward();
+      }
+    }, ptm('prevbutton'));
     if (props.scrollable && !backwardIsDisabledState) {
-      return /*#__PURE__*/React.createElement("button", {
-        ref: prevBtnRef,
-        className: "p-tabview-nav-prev p-tabview-nav-btn p-link",
-        onClick: navBackward,
-        type: "button",
-        "aria-label": ariaLabel('previousPageLabel')
-      }, leftIcon, /*#__PURE__*/React.createElement(Ripple, null));
+      return /*#__PURE__*/React.createElement("button", prevButtonProps, leftIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
     return null;
   };
   var createNextButton = function createNextButton() {
-    var icon = props.prevButton || /*#__PURE__*/React.createElement(ChevronRightIcon, null);
-    var rightIcon = IconUtils.getJSXIcon(icon, {
+    var nextIconProps = mergeProps({
       'aria-hidden': 'true'
-    }, {
+    }, ptm('nexticon'));
+    var icon = props.nextButton || /*#__PURE__*/React.createElement(ChevronRightIcon, nextIconProps);
+    var rightIcon = IconUtils.getJSXIcon(icon, _objectSpread({}, nextIconProps), {
       props: props
     });
+    var nextButtonProps = mergeProps({
+      ref: nextBtnRef,
+      type: 'button',
+      className: 'p-tabview-nav-next p-tabview-nav-btn p-link',
+      'aria-label': ariaLabel('nextPageLabel'),
+      onClick: function onClick(e) {
+        return navForward();
+      }
+    }, ptm('nextbutton'));
     if (props.scrollable && !forwardIsDisabledState) {
-      return /*#__PURE__*/React.createElement("button", {
-        ref: nextBtnRef,
-        className: "p-tabview-nav-next p-tabview-nav-btn p-link",
-        onClick: navForward,
-        type: "button",
-        "aria-label": ariaLabel('nextPageLabel')
-      }, rightIcon, /*#__PURE__*/React.createElement(Ripple, null));
+      return /*#__PURE__*/React.createElement("button", nextButtonProps, rightIcon, /*#__PURE__*/React.createElement(Ripple, null));
     }
   };
-  var otherProps = TabViewBase.getOtherProps(props);
   var className = classNames('p-tabview p-component', {
     'p-tabview-scrollable': props.scrollable
   }, props.className);
+  var rootProps = mergeProps({
+    id: idState,
+    ref: elementRef,
+    style: props.style,
+    className: className
+  }, TabViewBase.getOtherProps(props), ptm('root'));
+  var navContainerProps = mergeProps({
+    className: 'p-tabview-nav-container'
+  }, ptm('navcontainer'));
   var navigator = createNavigator();
   var content = createContent();
   var prevButton = createPrevButton();
   var nextButton = createNextButton();
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: elementRef,
-    className: className
-  }, otherProps), /*#__PURE__*/React.createElement("div", {
-    className: "p-tabview-nav-container"
-  }, prevButton, navigator, nextButton), content);
+  return /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", navContainerProps, prevButton, navigator, nextButton), content);
 });
 TabPanel.displayName = 'TabPanel';
 TabView.displayName = 'TabView';

package/tabview/tabview.esm.min.js

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