primereact 7.0.0-rc.2 → 7.2.0

package/tabview/tabview.js

@@ -1,11 +1,54 @@
 this.primereact = this.primereact || {};
-this.primereact.tabview = (function (exports, React, core) {
+this.primereact.tabview = (function (exports, React, utils, ripple) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+  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 _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
   function _defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
       var descriptor = props[i];
@@ -19,17 +62,12 @@ this.primereact.tabview = (function (exports, React, core) {
   function _createClass(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties(Constructor.prototype, protoProps);
     if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, "prototype", {
+      writable: false
+    });
     return Constructor;
   }
 
-  function _assertThisInitialized(self) {
-    if (self === void 0) {
-      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-
-    return self;
-  }
-
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -57,23 +95,20 @@ this.primereact.tabview = (function (exports, React, core) {
         configurable: true
       }
     });
+    Object.defineProperty(subClass, "prototype", {
+      writable: false
+    });
     if (superClass) _setPrototypeOf(subClass, superClass);
   }
 
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function _typeof(obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function _typeof(obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-
-    return _typeof(obj);
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
   }
 
   function _possibleConstructorReturn(self, call) {
@@ -108,9 +143,9 @@ this.primereact.tabview = (function (exports, React, core) {
     return obj;
   }
 
-  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+  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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  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; }
 
   function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -126,7 +161,7 @@ this.primereact.tabview = (function (exports, React, core) {
       return _super.apply(this, arguments);
     }
 
-    return TabPanel;
+    return _createClass(TabPanel);
   }(React.Component);
 
   _defineProperty(TabPanel, "defaultProps", {
@@ -134,7 +169,10 @@ this.primereact.tabview = (function (exports, React, core) {
     headerTemplate: null,
     leftIcon: null,
     rightIcon: null,
+    closable: false,
     disabled: false,
+    style: null,
+    className: null,
     headerStyle: null,
     headerClassName: null,
     contentStyle: null,
@@ -155,7 +193,8 @@ this.primereact.tabview = (function (exports, React, core) {
       var state = {
         id: props.id,
         backwardIsDisabled: true,
-        forwardIsDisabled: false
+        forwardIsDisabled: false,
+        hiddenTabs: []
       };
 
       if (!_this.props.onTabChange) {
@@ -181,6 +220,59 @@ this.primereact.tabview = (function (exports, React, core) {
       value: function isSelected(index) {
         return index === this.getActiveIndex();
       }
+    }, {
+      key: "shouldTabRender",
+      value: function shouldTabRender(tab, index) {
+        return tab && tab.type === TabPanel && this.state.hiddenTabs.every(function (_i) {
+          return _i !== index;
+        });
+      }
+    }, {
+      key: "findVisibleActiveTab",
+      value: function findVisibleActiveTab(i) {
+        var _this2 = this;
+
+        var tabsInfo = React__default["default"].Children.map(this.props.children, function (tab, index) {
+          if (_this2.shouldTabRender(tab, index)) {
+            return {
+              tab: tab,
+              index: index
+            };
+          }
+        });
+        return tabsInfo.find(function (_ref) {
+          var tab = _ref.tab,
+              index = _ref.index;
+          return !tab.props.disabled && index >= i;
+        }) || tabsInfo.reverse().find(function (_ref2) {
+          var tab = _ref2.tab,
+              index = _ref2.index;
+          return !tab.props.disabled && i > index;
+        });
+      }
+    }, {
+      key: "onTabHeaderClose",
+      value: function onTabHeaderClose(event, index) {
+        var _this3 = this;
+
+        var hiddenTabs = [].concat(_toConsumableArray(this.state.hiddenTabs), [index]);
+        this.setState({
+          hiddenTabs: hiddenTabs
+        }, function () {
+          var tabInfo = _this3.findVisibleActiveTab(index);
+
+          tabInfo && _this3.onTabHeaderClick(event, tabInfo.tab, tabInfo.index);
+        });
+
+        if (this.props.onTabClose) {
+          this.props.onTabClose({
+            originalEvent: event,
+            index: index
+          });
+        }
+
+        event.preventDefault();
+      }
     }, {
       key: "onTabHeaderClick",
       value: function onTabHeaderClick(event, tab, index) {
@@ -200,21 +292,31 @@ this.primereact.tabview = (function (exports, React, core) {
         this.updateScrollBar(index);
         event.preventDefault();
       }
+    }, {
+      key: "onKeyDown",
+      value: function onKeyDown(event, tab, index) {
+        if (event.code === 'Enter') {
+          this.onTabHeaderClick(event, tab, index);
+        }
+      }
     }, {
       key: "updateInkBar",
       value: function updateInkBar() {
         var activeIndex = this.getActiveIndex();
         var tabHeader = this["tab_".concat(activeIndex)];
-        this.inkbar.style.width = core.DomHandler.getWidth(tabHeader) + 'px';
-        this.inkbar.style.left = core.DomHandler.getOffset(tabHeader).left - core.DomHandler.getOffset(this.nav).left + 'px';
+        this.inkbar.style.width = utils.DomHandler.getWidth(tabHeader) + 'px';
+        this.inkbar.style.left = utils.DomHandler.getOffset(tabHeader).left - utils.DomHandler.getOffset(this.nav).left + 'px';
       }
     }, {
       key: "updateScrollBar",
       value: function updateScrollBar(index) {
         var tabHeader = this["tab_".concat(index)];
-        tabHeader.scrollIntoView({
-          block: 'nearest'
-        });
+
+        if (tabHeader) {
+          tabHeader.scrollIntoView({
+            block: 'nearest'
+          });
+        }
       }
     }, {
       key: "updateButtonState",
@@ -222,7 +324,7 @@ this.primereact.tabview = (function (exports, React, core) {
         var content = this.content;
         var scrollLeft = content.scrollLeft,
             scrollWidth = content.scrollWidth;
-        var width = core.DomHandler.getWidth(content);
+        var width = utils.DomHandler.getWidth(content);
         this.setState({
           backwardIsDisabled: scrollLeft === 0
         });
@@ -242,14 +344,14 @@ this.primereact.tabview = (function (exports, React, core) {
         var prevBtn = this.prevBtn;
         var nextBtn = this.nextBtn;
         return [prevBtn, nextBtn].reduce(function (acc, el) {
-          return el ? acc + core.DomHandler.getWidth(el) : acc;
+          return el ? acc + utils.DomHandler.getWidth(el) : acc;
         }, 0);
       }
     }, {
       key: "navBackward",
       value: function navBackward() {
         var content = this.content;
-        var width = core.DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+        var width = utils.DomHandler.getWidth(content) - this.getVisibleButtonWidths();
         var pos = content.scrollLeft - width;
         content.scrollLeft = pos <= 0 ? 0 : pos;
       }
@@ -257,17 +359,38 @@ this.primereact.tabview = (function (exports, React, core) {
       key: "navForward",
       value: function navForward() {
         var content = this.content;
-        var width = core.DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+        var width = utils.DomHandler.getWidth(content) - this.getVisibleButtonWidths();
         var pos = content.scrollLeft + width;
         var lastPos = content.scrollWidth - width;
         content.scrollLeft = pos >= lastPos ? lastPos : pos;
       }
+    }, {
+      key: "reset",
+      value: function reset() {
+        var state = {
+          backwardIsDisabled: true,
+          forwardIsDisabled: false,
+          hiddenTabs: []
+        };
+
+        if (this.props.onTabChange) {
+          this.props.onTabChange({
+            index: this.props.activeIndex
+          });
+        } else {
+          state = _objectSpread(_objectSpread({}, state), {}, {
+            activeIndex: this.props.activeIndex
+          });
+        }
+
+        this.setState(state);
+      }
     }, {
       key: "componentDidMount",
       value: function componentDidMount() {
         if (!this.state.id) {
           this.setState({
-            id: core.UniqueComponentId()
+            id: utils.UniqueComponentId()
           });
         }
 
@@ -285,40 +408,52 @@ this.primereact.tabview = (function (exports, React, core) {
     }, {
       key: "renderTabHeader",
       value: function renderTabHeader(tab, index) {
-        var _this2 = this;
+        var _this4 = this;
 
         var selected = this.isSelected(index);
-        var className = core.classNames('p-unselectable-text', {
+
+        var style = _objectSpread(_objectSpread({}, tab.props.headerStyle || {}), tab.props.style || {});
+
+        var className = utils.classNames('p-unselectable-text', {
           'p-tabview-selected p-highlight': selected,
           'p-disabled': tab.props.disabled
-        }, tab.props.headerClassName);
+        }, tab.props.headerClassName, tab.props.className);
         var id = this.state.id + '_header_' + index;
         var ariaControls = this.state.id + '_content_' + index;
         var tabIndex = tab.props.disabled ? null : 0;
-        var leftIconElement = tab.props.leftIcon && /*#__PURE__*/React__default['default'].createElement("i", {
+        var leftIconElement = tab.props.leftIcon && /*#__PURE__*/React__default["default"].createElement("i", {
           className: tab.props.leftIcon
         });
-        var titleElement = /*#__PURE__*/React__default['default'].createElement("span", {
+        var titleElement = /*#__PURE__*/React__default["default"].createElement("span", {
           className: "p-tabview-title"
         }, tab.props.header);
-        var rightIconElement = tab.props.rightIcon && /*#__PURE__*/React__default['default'].createElement("i", {
+        var rightIconElement = tab.props.rightIcon && /*#__PURE__*/React__default["default"].createElement("i", {
           className: tab.props.rightIcon
         });
+        var closableIconElement = tab.props.closable && /*#__PURE__*/React__default["default"].createElement("i", {
+          className: "p-tabview-close pi pi-times",
+          onClick: function onClick(e) {
+            return _this4.onTabHeaderClose(e, index);
+          }
+        });
         var content =
         /*#__PURE__*/
 
         /* eslint-disable */
-        React__default['default'].createElement("a", {
+        React__default["default"].createElement("a", {
           role: "tab",
           className: "p-tabview-nav-link",
           onClick: function onClick(event) {
-            return _this2.onTabHeaderClick(event, tab, index);
+            return _this4.onTabHeaderClick(event, tab, index);
           },
           id: id,
+          onKeyDown: function onKeyDown(event) {
+            return _this4.onKeyDown(event, tab, index);
+          },
           "aria-controls": ariaControls,
           "aria-selected": selected,
           tabIndex: tabIndex
-        }, leftIconElement, titleElement, rightIconElement, /*#__PURE__*/React__default['default'].createElement(core.Ripple, null))
+        }, leftIconElement, titleElement, rightIconElement, closableIconElement, /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null))
         /* eslint-enable */
         ;
 
@@ -327,7 +462,10 @@ this.primereact.tabview = (function (exports, React, core) {
             className: 'p-tabview-nav-link',
             titleClassName: 'p-tabview-title',
             onClick: function onClick(event) {
-              return _this2.onTabHeaderClick(event, tab, index);
+              return _this4.onTabHeaderClick(event, tab, index);
+            },
+            onKeyDown: function onKeyDown(event) {
+              return _this4.onKeyDown(event, tab, index);
             },
             leftIconElement: leftIconElement,
             titleElement: titleElement,
@@ -338,50 +476,52 @@ this.primereact.tabview = (function (exports, React, core) {
             selected: selected,
             ariaControls: ariaControls
           };
-          content = core.ObjectUtils.getJSXElement(tab.props.headerTemplate, defaultContentOptions);
+          content = utils.ObjectUtils.getJSXElement(tab.props.headerTemplate, defaultContentOptions);
         }
 
-        return /*#__PURE__*/React__default['default'].createElement("li", {
+        return /*#__PURE__*/React__default["default"].createElement("li", {
           ref: function ref(el) {
-            return _this2["tab_".concat(index)] = el;
+            return _this4["tab_".concat(index)] = el;
           },
           className: className,
-          style: tab.props.headerStyle,
+          style: style,
           role: "presentation"
         }, content);
       }
     }, {
       key: "renderTabHeaders",
       value: function renderTabHeaders() {
-        var _this3 = this;
+        var _this5 = this;
 
-        return React__default['default'].Children.map(this.props.children, function (tab, index) {
-          return _this3.renderTabHeader(tab, index);
+        return React__default["default"].Children.map(this.props.children, function (tab, index) {
+          if (_this5.shouldTabRender(tab, index)) {
+            return _this5.renderTabHeader(tab, index);
+          }
         });
       }
     }, {
       key: "renderNavigator",
       value: function renderNavigator() {
-        var _this4 = this;
+        var _this6 = this;
 
         var headers = this.renderTabHeaders();
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           ref: function ref(el) {
-            return _this4.content = el;
+            return _this6.content = el;
           },
           id: this.props.id,
           className: "p-tabview-nav-content",
           style: this.props.style,
           onScroll: this.onScroll
-        }, /*#__PURE__*/React__default['default'].createElement("ul", {
+        }, /*#__PURE__*/React__default["default"].createElement("ul", {
           ref: function ref(el) {
-            return _this4.nav = el;
+            return _this6.nav = el;
           },
           className: "p-tabview-nav",
           role: "tablist"
-        }, headers, /*#__PURE__*/React__default['default'].createElement("li", {
+        }, headers, /*#__PURE__*/React__default["default"].createElement("li", {
           ref: function ref(el) {
-            return _this4.inkbar = el;
+            return _this6.inkbar = el;
           },
           className: "p-tabview-ink-bar"
         })));
@@ -389,14 +529,14 @@ this.primereact.tabview = (function (exports, React, core) {
     }, {
       key: "renderContent",
       value: function renderContent() {
-        var _this5 = this;
+        var _this7 = this;
 
-        var contents = React__default['default'].Children.map(this.props.children, function (tab, index) {
-          if (!_this5.props.renderActiveOnly || _this5.isSelected(index)) {
-            return _this5.createContent(tab, index);
+        var contents = React__default["default"].Children.map(this.props.children, function (tab, index) {
+          if (_this7.shouldTabRender(tab, index) && (!_this7.props.renderActiveOnly || _this7.isSelected(index))) {
+            return _this7.createContent(tab, index);
           }
         });
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-tabview-panels"
         }, contents);
       }
@@ -404,36 +544,39 @@ this.primereact.tabview = (function (exports, React, core) {
       key: "createContent",
       value: function createContent(tab, index) {
         var selected = this.isSelected(index);
-        var className = core.classNames(tab.props.contentClassName, 'p-tabview-panel', {
+
+        var style = _objectSpread(_objectSpread({}, tab.props.contentStyle || {}), tab.props.style || {});
+
+        var className = utils.classNames(tab.props.contentClassName, tab.props.className, 'p-tabview-panel', {
           'p-hidden': !selected
         });
         var id = this.state.id + '_content_' + index;
         var ariaLabelledBy = this.state.id + '_header_' + index;
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           id: id,
           "aria-labelledby": ariaLabelledBy,
           "aria-hidden": !selected,
           className: className,
-          style: tab.props.contentStyle,
+          style: style,
           role: "tabpanel"
         }, !this.props.renderActiveOnly ? tab.props.children : selected && tab.props.children);
       }
     }, {
       key: "renderPrevButton",
       value: function renderPrevButton() {
-        var _this6 = this;
+        var _this8 = this;
 
         if (this.props.scrollable && !this.state.backwardIsDisabled) {
-          return /*#__PURE__*/React__default['default'].createElement("button", {
+          return /*#__PURE__*/React__default["default"].createElement("button", {
             ref: function ref(el) {
-              return _this6.prevBtn = el;
+              return _this8.prevBtn = el;
             },
             className: "p-tabview-nav-prev p-tabview-nav-btn p-link",
             onClick: this.navBackward,
             type: "button"
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "pi pi-chevron-left"
-          }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+          }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
         }
 
         return null;
@@ -441,34 +584,34 @@ this.primereact.tabview = (function (exports, React, core) {
     }, {
       key: "renderNextButton",
       value: function renderNextButton() {
-        var _this7 = this;
+        var _this9 = this;
 
         if (this.props.scrollable && !this.state.forwardIsDisabled) {
-          return /*#__PURE__*/React__default['default'].createElement("button", {
+          return /*#__PURE__*/React__default["default"].createElement("button", {
             ref: function ref(el) {
-              return _this7.nextBtn = el;
+              return _this9.nextBtn = el;
             },
             className: "p-tabview-nav-next p-tabview-nav-btn p-link",
             onClick: this.navForward,
             type: "button"
-          }, /*#__PURE__*/React__default['default'].createElement("span", {
+          }, /*#__PURE__*/React__default["default"].createElement("span", {
             className: "pi pi-chevron-right"
-          }), /*#__PURE__*/React__default['default'].createElement(core.Ripple, null));
+          }), /*#__PURE__*/React__default["default"].createElement(ripple.Ripple, null));
         }
       }
     }, {
       key: "render",
       value: function render() {
-        var className = core.classNames('p-tabview p-component', this.props.className, {
+        var className = utils.classNames('p-tabview p-component', this.props.className, {
           'p-tabview-scrollable': this.props.scrollable
         });
         var navigator = this.renderNavigator();
         var content = this.renderContent();
         var prevButton = this.renderPrevButton();
         var nextButton = this.renderNextButton();
-        return /*#__PURE__*/React__default['default'].createElement("div", {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
           className: className
-        }, /*#__PURE__*/React__default['default'].createElement("div", {
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
           className: "p-tabview-nav-container"
         }, prevButton, navigator, nextButton), content);
       }
@@ -484,6 +627,7 @@ this.primereact.tabview = (function (exports, React, core) {
     className: null,
     renderActiveOnly: true,
     onTabChange: null,
+    onTabClose: null,
     scrollable: false
   });
 
@@ -494,4 +638,4 @@ this.primereact.tabview = (function (exports, React, core) {
 
   return exports;
 
-}({}, React, primereact.core));
+})({}, React, primereact.utils, primereact.ripple);

package/tabview/tabview.min.css

@@ -1 +1 @@
-.p-tabview-nav-container{position:relative}.p-tabview-scrollable .p-tabview-nav-container{overflow:hidden}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:flex;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview-nav-link{cursor:pointer;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview-ink-bar{display:none;z-index:1}.p-tabview-nav-link:focus{z-index:1}.p-tabview-title{line-height:1;white-space:nowrap}.p-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.p-tabview-nav-prev{left:0}.p-tabview-nav-next{right:0}.p-tabview-nav-content::-webkit-scrollbar{display:none}
+.p-tabview-nav-container{position:relative}.p-tabview-scrollable .p-tabview-nav-container{overflow:hidden}.p-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.p-tabview-nav{display:flex;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.p-tabview-nav-link{cursor:pointer;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.p-tabview-ink-bar{display:none;z-index:1}.p-tabview-nav-link:focus{z-index:1}.p-tabview-close{z-index:1}.p-tabview-title{line-height:1;white-space:nowrap}.p-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.p-tabview-nav-prev{left:0}.p-tabview-nav-next{right:0}.p-tabview-nav-content::-webkit-scrollbar{display:none}

package/tabview/tabview.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.tabview=function(e,t,n){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(t);function i(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function l(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&s(e,t)}function u(e){return(u="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})(e)}function p(e,t){if(t&&("object"===u(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return l(e)}function d(e){return(d=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(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 v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?h(Object(n),!0).forEach((function(t){f(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e){var t=m();return function(){var n,r=d(e);if(t){var a=d(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return p(this,n)}}function m(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var y=function(e){c(n,e);var t=b(n);function n(){return o(this,n),t.apply(this,arguments)}return n}(t.Component);f(y,"defaultProps",{header:null,headerTemplate:null,leftIcon:null,rightIcon:null,disabled:!1,headerStyle:null,headerClassName:null,contentStyle:null,contentClassName:null});var w=function(e){c(p,e);var t,r,s,u=b(p);function p(e){var t;o(this,p),t=u.call(this,e);var n={id:e.id,backwardIsDisabled:!0,forwardIsDisabled:!1};return t.props.onTabChange||(n=v(v({},n),{},{activeIndex:e.activeIndex})),t.state=n,t.navBackward=t.navBackward.bind(l(t)),t.navForward=t.navForward.bind(l(t)),t.onScroll=t.onScroll.bind(l(t)),t}return t=p,(r=[{key:"getActiveIndex",value:function(){return this.props.onTabChange?this.props.activeIndex:this.state.activeIndex}},{key:"isSelected",value:function(e){return e===this.getActiveIndex()}},{key:"onTabHeaderClick",value:function(e,t,n){t.props.disabled||(this.props.onTabChange?this.props.onTabChange({originalEvent:e,index:n}):this.setState({activeIndex:n})),this.updateScrollBar(n),e.preventDefault()}},{key:"updateInkBar",value:function(){var e=this.getActiveIndex(),t=this["tab_".concat(e)];this.inkbar.style.width=n.DomHandler.getWidth(t)+"px",this.inkbar.style.left=n.DomHandler.getOffset(t).left-n.DomHandler.getOffset(this.nav).left+"px"}},{key:"updateScrollBar",value:function(e){this["tab_".concat(e)].scrollIntoView({block:"nearest"})}},{key:"updateButtonState",value:function(){var e=this.content,t=e.scrollLeft,r=e.scrollWidth,a=n.DomHandler.getWidth(e);this.setState({backwardIsDisabled:0===t}),this.setState({forwardIsDisabled:t===r-a})}},{key:"onScroll",value:function(e){this.props.scrollable&&this.updateButtonState(),e.preventDefault()}},{key:"getVisibleButtonWidths",value:function(){return[this.prevBtn,this.nextBtn].reduce((function(e,t){return t?e+n.DomHandler.getWidth(t):e}),0)}},{key:"navBackward",value:function(){var e=this.content,t=n.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),r=e.scrollLeft-t;e.scrollLeft=r<=0?0:r}},{key:"navForward",value:function(){var e=this.content,t=n.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),r=e.scrollLeft+t,a=e.scrollWidth-t;e.scrollLeft=r>=a?a:r}},{key:"componentDidMount",value:function(){this.state.id||this.setState({id:n.UniqueComponentId()}),this.updateInkBar()}},{key:"componentDidUpdate",value:function(e){this.updateInkBar(),e.activeIndex!==this.props.activeIndex&&this.updateScrollBar(this.props.activeIndex)}},{key:"renderTabHeader",value:function(e,t){var r=this,i=this.isSelected(t),l=n.classNames("p-unselectable-text",{"p-tabview-selected p-highlight":i,"p-disabled":e.props.disabled},e.props.headerClassName),o=this.state.id+"_header_"+t,s=this.state.id+"_content_"+t,c=e.props.disabled?null:0,u=e.props.leftIcon&&a.default.createElement("i",{className:e.props.leftIcon}),p=a.default.createElement("span",{className:"p-tabview-title"},e.props.header),d=e.props.rightIcon&&a.default.createElement("i",{className:e.props.rightIcon}),f=a.default.createElement("a",{role:"tab",className:"p-tabview-nav-link",onClick:function(n){return r.onTabHeaderClick(n,e,t)},id:o,"aria-controls":s,"aria-selected":i,tabIndex:c},u,p,d,a.default.createElement(n.Ripple,null));return e.props.headerTemplate&&(f=n.ObjectUtils.getJSXElement(e.props.headerTemplate,{className:"p-tabview-nav-link",titleClassName:"p-tabview-title",onClick:function(n){return r.onTabHeaderClick(n,e,t)},leftIconElement:u,titleElement:p,rightIconElement:d,element:f,props:this.props,index:t,selected:i,ariaControls:s})),a.default.createElement("li",{ref:function(e){return r["tab_".concat(t)]=e},className:l,style:e.props.headerStyle,role:"presentation"},f)}},{key:"renderTabHeaders",value:function(){var e=this;return a.default.Children.map(this.props.children,(function(t,n){return e.renderTabHeader(t,n)}))}},{key:"renderNavigator",value:function(){var e=this,t=this.renderTabHeaders();return a.default.createElement("div",{ref:function(t){return e.content=t},id:this.props.id,className:"p-tabview-nav-content",style:this.props.style,onScroll:this.onScroll},a.default.createElement("ul",{ref:function(t){return e.nav=t},className:"p-tabview-nav",role:"tablist"},t,a.default.createElement("li",{ref:function(t){return e.inkbar=t},className:"p-tabview-ink-bar"})))}},{key:"renderContent",value:function(){var e=this,t=a.default.Children.map(this.props.children,(function(t,n){if(!e.props.renderActiveOnly||e.isSelected(n))return e.createContent(t,n)}));return a.default.createElement("div",{className:"p-tabview-panels"},t)}},{key:"createContent",value:function(e,t){var r=this.isSelected(t),i=n.classNames(e.props.contentClassName,"p-tabview-panel",{"p-hidden":!r});return a.default.createElement("div",{id:this.state.id+"_content_"+t,"aria-labelledby":this.state.id+"_header_"+t,"aria-hidden":!r,className:i,style:e.props.contentStyle,role:"tabpanel"},this.props.renderActiveOnly?r&&e.props.children:e.props.children)}},{key:"renderPrevButton",value:function(){var e=this;return this.props.scrollable&&!this.state.backwardIsDisabled?a.default.createElement("button",{ref:function(t){return e.prevBtn=t},className:"p-tabview-nav-prev p-tabview-nav-btn p-link",onClick:this.navBackward,type:"button"},a.default.createElement("span",{className:"pi pi-chevron-left"}),a.default.createElement(n.Ripple,null)):null}},{key:"renderNextButton",value:function(){var e=this;if(this.props.scrollable&&!this.state.forwardIsDisabled)return a.default.createElement("button",{ref:function(t){return e.nextBtn=t},className:"p-tabview-nav-next p-tabview-nav-btn p-link",onClick:this.navForward,type:"button"},a.default.createElement("span",{className:"pi pi-chevron-right"}),a.default.createElement(n.Ripple,null))}},{key:"render",value:function(){var e=n.classNames("p-tabview p-component",this.props.className,{"p-tabview-scrollable":this.props.scrollable}),t=this.renderNavigator(),r=this.renderContent(),i=this.renderPrevButton(),l=this.renderNextButton();return a.default.createElement("div",{className:e},a.default.createElement("div",{className:"p-tabview-nav-container"},i,t,l),r)}}])&&i(t.prototype,r),s&&i(t,s),p}(t.Component);return f(w,"defaultProps",{id:null,activeIndex:0,style:null,className:null,renderActiveOnly:!0,onTabChange:null,scrollable:!1}),e.TabPanel=y,e.TabView=w,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.core);
+this.primereact=this.primereact||{},this.primereact.tabview=function(e,t,n,r){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(t);function o(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 l(e){if(Array.isArray(e))return o(e)}function s(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function c(e,t){if(e){if("string"==typeof e)return o(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)?o(e,t):void 0}}function u(){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 p(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function d(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function f(e,t,n){return t&&d(e.prototype,t),n&&d(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function b(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function h(e,t){return h=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},h(e,t)}function v(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&h(e,t)}function y(e){return y="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},y(e)}function m(e,t){if(t&&("object"===y(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return p(e)}function w(e){return w=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},w(e)}function k(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function g(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 T(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?g(Object(n),!0).forEach((function(t){k(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):g(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function C(e){var t=I();return function(){var n,r=w(e);if(t){var a=w(this).constructor;n=Reflect.construct(r,arguments,a)}else n=r.apply(this,arguments);return m(this,n)}}function I(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}var O=function(e){v(n,e);var t=C(n);function n(){return b(this,n),t.apply(this,arguments)}return f(n)}(t.Component);k(O,"defaultProps",{header:null,headerTemplate:null,leftIcon:null,rightIcon:null,closable:!1,disabled:!1,style:null,className:null,headerStyle:null,headerClassName:null,contentStyle:null,contentClassName:null});var S=function(e){v(a,e);var t=C(a);function a(e){var n;b(this,a),n=t.call(this,e);var r={id:e.id,backwardIsDisabled:!0,forwardIsDisabled:!1,hiddenTabs:[]};return n.props.onTabChange||(r=T(T({},r),{},{activeIndex:e.activeIndex})),n.state=r,n.navBackward=n.navBackward.bind(p(n)),n.navForward=n.navForward.bind(p(n)),n.onScroll=n.onScroll.bind(p(n)),n}return f(a,[{key:"getActiveIndex",value:function(){return this.props.onTabChange?this.props.activeIndex:this.state.activeIndex}},{key:"isSelected",value:function(e){return e===this.getActiveIndex()}},{key:"shouldTabRender",value:function(e,t){return e&&e.type===O&&this.state.hiddenTabs.every((function(e){return e!==t}))}},{key:"findVisibleActiveTab",value:function(e){var t=this,n=i.default.Children.map(this.props.children,(function(e,n){if(t.shouldTabRender(e,n))return{tab:e,index:n}}));return n.find((function(t){return!t.tab.props.disabled&&t.index>=e}))||n.reverse().find((function(t){return!t.tab.props.disabled&&e>t.index}))}},{key:"onTabHeaderClose",value:function(e,t){var n,r=this,a=[].concat(l(n=this.state.hiddenTabs)||s(n)||c(n)||u(),[t]);this.setState({hiddenTabs:a},(function(){var n=r.findVisibleActiveTab(t);n&&r.onTabHeaderClick(e,n.tab,n.index)})),this.props.onTabClose&&this.props.onTabClose({originalEvent:e,index:t}),e.preventDefault()}},{key:"onTabHeaderClick",value:function(e,t,n){t.props.disabled||(this.props.onTabChange?this.props.onTabChange({originalEvent:e,index:n}):this.setState({activeIndex:n})),this.updateScrollBar(n),e.preventDefault()}},{key:"onKeyDown",value:function(e,t,n){"Enter"===e.code&&this.onTabHeaderClick(e,t,n)}},{key:"updateInkBar",value:function(){var e=this.getActiveIndex(),t=this["tab_".concat(e)];this.inkbar.style.width=n.DomHandler.getWidth(t)+"px",this.inkbar.style.left=n.DomHandler.getOffset(t).left-n.DomHandler.getOffset(this.nav).left+"px"}},{key:"updateScrollBar",value:function(e){var t=this["tab_".concat(e)];t&&t.scrollIntoView({block:"nearest"})}},{key:"updateButtonState",value:function(){var e=this.content,t=e.scrollLeft,r=e.scrollWidth,a=n.DomHandler.getWidth(e);this.setState({backwardIsDisabled:0===t}),this.setState({forwardIsDisabled:t===r-a})}},{key:"onScroll",value:function(e){this.props.scrollable&&this.updateButtonState(),e.preventDefault()}},{key:"getVisibleButtonWidths",value:function(){return[this.prevBtn,this.nextBtn].reduce((function(e,t){return t?e+n.DomHandler.getWidth(t):e}),0)}},{key:"navBackward",value:function(){var e=this.content,t=n.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),r=e.scrollLeft-t;e.scrollLeft=r<=0?0:r}},{key:"navForward",value:function(){var e=this.content,t=n.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),r=e.scrollLeft+t,a=e.scrollWidth-t;e.scrollLeft=r>=a?a:r}},{key:"reset",value:function(){var e={backwardIsDisabled:!0,forwardIsDisabled:!1,hiddenTabs:[]};this.props.onTabChange?this.props.onTabChange({index:this.props.activeIndex}):e=T(T({},e),{},{activeIndex:this.props.activeIndex}),this.setState(e)}},{key:"componentDidMount",value:function(){this.state.id||this.setState({id:n.UniqueComponentId()}),this.updateInkBar()}},{key:"componentDidUpdate",value:function(e){this.updateInkBar(),e.activeIndex!==this.props.activeIndex&&this.updateScrollBar(this.props.activeIndex)}},{key:"renderTabHeader",value:function(e,t){var a=this,o=this.isSelected(t),l=T(T({},e.props.headerStyle||{}),e.props.style||{}),s=n.classNames("p-unselectable-text",{"p-tabview-selected p-highlight":o,"p-disabled":e.props.disabled},e.props.headerClassName,e.props.className),c=this.state.id+"_header_"+t,u=this.state.id+"_content_"+t,p=e.props.disabled?null:0,d=e.props.leftIcon&&i.default.createElement("i",{className:e.props.leftIcon}),f=i.default.createElement("span",{className:"p-tabview-title"},e.props.header),b=e.props.rightIcon&&i.default.createElement("i",{className:e.props.rightIcon}),h=i.default.createElement("a",{role:"tab",className:"p-tabview-nav-link",onClick:function(n){return a.onTabHeaderClick(n,e,t)},id:c,onKeyDown:function(n){return a.onKeyDown(n,e,t)},"aria-controls":u,"aria-selected":o,tabIndex:p},d,f,b,e.props.closable&&i.default.createElement("i",{className:"p-tabview-close pi pi-times",onClick:function(e){return a.onTabHeaderClose(e,t)}}),i.default.createElement(r.Ripple,null));e.props.headerTemplate&&(h=n.ObjectUtils.getJSXElement(e.props.headerTemplate,{className:"p-tabview-nav-link",titleClassName:"p-tabview-title",onClick:function(n){return a.onTabHeaderClick(n,e,t)},onKeyDown:function(n){return a.onKeyDown(n,e,t)},leftIconElement:d,titleElement:f,rightIconElement:b,element:h,props:this.props,index:t,selected:o,ariaControls:u}));return i.default.createElement("li",{ref:function(e){return a["tab_".concat(t)]=e},className:s,style:l,role:"presentation"},h)}},{key:"renderTabHeaders",value:function(){var e=this;return i.default.Children.map(this.props.children,(function(t,n){if(e.shouldTabRender(t,n))return e.renderTabHeader(t,n)}))}},{key:"renderNavigator",value:function(){var e=this,t=this.renderTabHeaders();return i.default.createElement("div",{ref:function(t){return e.content=t},id:this.props.id,className:"p-tabview-nav-content",style:this.props.style,onScroll:this.onScroll},i.default.createElement("ul",{ref:function(t){return e.nav=t},className:"p-tabview-nav",role:"tablist"},t,i.default.createElement("li",{ref:function(t){return e.inkbar=t},className:"p-tabview-ink-bar"})))}},{key:"renderContent",value:function(){var e=this,t=i.default.Children.map(this.props.children,(function(t,n){if(e.shouldTabRender(t,n)&&(!e.props.renderActiveOnly||e.isSelected(n)))return e.createContent(t,n)}));return i.default.createElement("div",{className:"p-tabview-panels"},t)}},{key:"createContent",value:function(e,t){var r=this.isSelected(t),a=T(T({},e.props.contentStyle||{}),e.props.style||{}),o=n.classNames(e.props.contentClassName,e.props.className,"p-tabview-panel",{"p-hidden":!r});return i.default.createElement("div",{id:this.state.id+"_content_"+t,"aria-labelledby":this.state.id+"_header_"+t,"aria-hidden":!r,className:o,style:a,role:"tabpanel"},this.props.renderActiveOnly?r&&e.props.children:e.props.children)}},{key:"renderPrevButton",value:function(){var e=this;return this.props.scrollable&&!this.state.backwardIsDisabled?i.default.createElement("button",{ref:function(t){return e.prevBtn=t},className:"p-tabview-nav-prev p-tabview-nav-btn p-link",onClick:this.navBackward,type:"button"},i.default.createElement("span",{className:"pi pi-chevron-left"}),i.default.createElement(r.Ripple,null)):null}},{key:"renderNextButton",value:function(){var e=this;if(this.props.scrollable&&!this.state.forwardIsDisabled)return i.default.createElement("button",{ref:function(t){return e.nextBtn=t},className:"p-tabview-nav-next p-tabview-nav-btn p-link",onClick:this.navForward,type:"button"},i.default.createElement("span",{className:"pi pi-chevron-right"}),i.default.createElement(r.Ripple,null))}},{key:"render",value:function(){var e=n.classNames("p-tabview p-component",this.props.className,{"p-tabview-scrollable":this.props.scrollable}),t=this.renderNavigator(),r=this.renderContent(),a=this.renderPrevButton(),o=this.renderNextButton();return i.default.createElement("div",{className:e},i.default.createElement("div",{className:"p-tabview-nav-container"},a,t,o),r)}}]),a}(t.Component);return k(S,"defaultProps",{id:null,activeIndex:0,style:null,className:null,renderActiveOnly:!0,onTabChange:null,onTabClose:null,scrollable:!1}),e.TabPanel=O,e.TabView=S,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.utils,primereact.ripple);