primereact 10.2.0 → 10.3.0

package/tabmenu/tabmenu.cjs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/componentbase"),r=require("primereact/hooks"),a=require("primereact/ripple"),i=require("primereact/utils");function o(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 l=o(e);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},u(e)}function c(e,t){if("object"!==u(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==u(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function s(e){var t=c(e,"string");return"symbol"===u(t)?t:String(t)}function m(e){if(Array.isArray(e))return e}function p(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,o,l=[],u=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);u=!0);}catch(e){c=!0,a=e}finally{try{if(!u&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(c)throw a}}return l}}function f(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 b(e,t){if(e){if("string"==typeof e)return f(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)?f(e,t):void 0}}function d(){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 y(e,t){return m(e)||p(e,t)||b(e,t)||d()}var v=n.ComponentBase.extend({defaultProps:{__TYPE:"TabMenu",id:null,model:null,activeIndex:0,style:null,className:null,onTabChange:null,children:void 0},css:{classes:{icon:function(e){return i.classNames("p-menuitem-icon",e._icon)},label:"p-menuitem-text",action:"p-menuitem-link",menuitem:function(e){return i.classNames("p-tabmenuitem",{"p-highlight":e.active,"p-disabled":e.disabled},e._className)},inkbar:"p-tabmenu-ink-bar",menu:"p-tabmenu-nav p-reset",root:function(e){return i.classNames("p-tabmenu p-component",e.props.className)}},styles:"\n@layer primereact {\n    .p-tabmenu {\n        overflow-x: auto;\n    }\n    \n    .p-tabmenu-nav {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        flex-wrap: nowrap;\n    }\n    \n    .p-tabmenu-nav a {\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-decoration: none;\n        text-decoration: none;\n        overflow: hidden;\n    }\n    \n    .p-tabmenu-nav a:focus {\n        z-index: 1;\n    }\n    \n    .p-tabmenu-nav .p-menuitem-text {\n        line-height: 1;\n    }\n    \n    .p-tabmenu-ink-bar {\n        display: none;\n        z-index: 1;\n    }\n    \n    .p-tabmenu::-webkit-scrollbar {\n        display: none;\n    }\n}\n"}});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 O(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){var r,a,i;r=e,i=n[t],(a=s(a=t))in r?Object.defineProperty(r,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[a]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):g(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var h=l.memo(l.forwardRef((function(e,o){var u=l.useContext(t.PrimeReactContext),c=v.getProps(e,u),s=y(l.useState(c.id),2),m=s[0],p=s[1],f=y(l.useState(c.activeIndex),2),b=f[0],d=f[1],g=l.useRef(null),h=l.useRef(null),x=l.useRef(null),j=l.useRef({}),P=c.onTabChange?c.activeIndex:b,w=v.setMetaData({props:c,state:{id:m,activeIndex:b}}),N=w.ptm,S=w.cx,E=function(e,t,n){return N(e,{context:{item:t,index:n}})};n.useHandleStyle(v.css.styles,w.isUnstyled,{name:"tabmenu"});var k=function(e,t,n){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),c.onTabChange?c.onTabChange({originalEvent:e,value:t,index:n}):d(n))},C=function(e){return e===(P||0)},_=function(){if(c.model){var e=j.current["tab_".concat(P)];h.current.style.width=i.DomHandler.getWidth(e)+"px",h.current.style.left=i.DomHandler.getOffset(e).left-i.DomHandler.getOffset(x.current).left+"px"}};r.useMountEffect((function(){m||p(i.UniqueComponentId())})),l.useImperativeHandle(o,(function(){return{props:c,getElement:function(){return g.current}}})),l.useEffect((function(){_()}));var D=function(e,t){if(!1===e.visible)return null;var n=e.className,r=e.style,o=e.disabled,u=e.icon,s=e.label,p=e.template,f=e.url,b=e.target,d=e.id||m+"_"+t,y=C(t),v=i.classNames("p-menuitem-icon",u),g=i.mergeProps({className:S("icon",{_icon:u})},E("icon",e,t)),h=i.IconUtils.getJSXIcon(u,O({},g),{props:c}),x=i.mergeProps({className:S("label")},E("label",e,t)),P=s&&l.createElement("span",x,s),w=i.mergeProps({href:f||"#",className:S("action"),target:b,onClick:function(n){return k(n,e,t)},role:"presentation"},E("action",e,t)),N=l.createElement("a",w,h,P,l.createElement(a.Ripple,null));p&&(N=i.ObjectUtils.getJSXElement(p,e,{onClick:function(n){return k(n,e,t)},className:"p-menuitem-link",labelClassName:"p-menuitem-text",iconClassName:v,element:N,props:c,active:y,index:t,disabled:o}));var _=i.mergeProps({ref:j.current["tab_".concat(t)],id:d,key:d,className:S("menuitem",{_className:n,active:y,disabled:o}),style:r,role:"tab","aria-selected":y,"aria-expanded":y,"aria-disabled":o},E("menuitem",e,t));return l.createElement("li",_,N)};if(c.model){var I=c.model.map(D),T=i.mergeProps({ref:h,className:S("inkbar")},N("inkbar")),M=i.mergeProps({ref:x,className:S("menu"),role:"tablist"},N("menu")),q=i.mergeProps({id:c.id,ref:g,className:S("root"),style:c.style},v.getOtherProps(c),N("root"));return l.createElement("div",q,l.createElement("ul",M,I,l.createElement("li",T)))}return null})));h.displayName="TabMenu",exports.TabMenu=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/componentbase"),r=require("primereact/hooks"),a=require("primereact/ripple"),i=require("primereact/utils");function l(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 o=l(e);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},u(e)}function c(e,t){if("object"!==u(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==u(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function s(e){var t=c(e,"string");return"symbol"===u(t)?t:String(t)}function m(e){if(Array.isArray(e))return e}function p(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,l,o=[],u=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(o.push(r.value),o.length!==t);u=!0);}catch(e){c=!0,a=e}finally{try{if(!u&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(c)throw a}}return o}}function f(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 d(e,t){if(e){if("string"==typeof e)return f(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)?f(e,t):void 0}}function b(){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 v(e,t){return m(e)||p(e,t)||d(e,t)||b()}var y=n.ComponentBase.extend({defaultProps:{__TYPE:"TabMenu",id:null,model:null,activeIndex:0,ariaLabel:null,ariaLabelledBy:null,style:null,className:null,onTabChange:null,children:void 0},css:{classes:{icon:function(e){return i.classNames("p-menuitem-icon",e._icon)},label:"p-menuitem-text",action:"p-menuitem-link",menuitem:function(e){return i.classNames("p-tabmenuitem",{"p-highlight":e.active,"p-disabled":e.disabled},e._className)},inkbar:"p-tabmenu-ink-bar",menu:"p-tabmenu-nav p-reset",root:function(e){return i.classNames("p-tabmenu p-component",e.props.className)}},styles:"\n@layer primereact {\n    .p-tabmenu {\n        overflow-x: auto;\n    }\n\n    .p-tabmenu-nav {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        flex-wrap: nowrap;\n    }\n\n    .p-tabmenu-nav a {\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-decoration: none;\n        text-decoration: none;\n        overflow: hidden;\n    }\n\n    .p-tabmenu-nav a:focus {\n        z-index: 1;\n    }\n\n    .p-tabmenu-nav .p-menuitem-text {\n        line-height: 1;\n    }\n\n    .p-tabmenu-ink-bar {\n        display: none;\n        z-index: 1;\n    }\n\n    .p-tabmenu::-webkit-scrollbar {\n        display: none;\n    }\n}\n"}});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 h(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){var r,a,i;r=e,i=n[t],(a=s(a=t))in r?Object.defineProperty(r,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[a]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):g(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var x=o.memo(o.forwardRef((function(e,l){var u=o.useContext(t.PrimeReactContext),c=y.getProps(e,u),s=v(o.useState(c.id),2),m=s[0],p=s[1],f=v(o.useState(c.activeIndex),2),d=f[0],b=f[1],g=o.useRef(null),x=o.useRef(null),O=o.useRef(null),j=o.useRef({}),w=c.onTabChange?c.activeIndex:d,P=y.setMetaData({props:c,state:{id:m,activeIndex:d}}),S=P.ptm,E=P.cx,D=function(e,t,n){return S(e,{context:{item:t,index:n}})};n.useHandleStyle(y.css.styles,P.isUnstyled,{name:"tabmenu"});var N=function(e,t,n){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),c.onTabChange?c.onTabChange({originalEvent:e,value:t,index:n}):b(n))},k=function(e){return e===(w||0)},I=function(){if(c.model){for(var e=O.current.children,t=!1,n=0;n<e.length;n++){var r=e[n];i.DomHandler.getAttribute(r,"data-p-highlight")&&(x.current.style.width=i.DomHandler.getWidth(r)+"px",x.current.style.left=i.DomHandler.getOffset(r).left-i.DomHandler.getOffset(O.current).left+"px",t=!0)}t||(x.current.style.width="0px",x.current.style.left="0px")}};r.useMountEffect((function(){m||p(i.UniqueComponentId())})),o.useImperativeHandle(l,(function(){return{props:c,getElement:function(){return g.current}}})),o.useEffect((function(){I()}));var C=function(e,t,n){switch(e.code){case"ArrowRight":H(e.target),e.preventDefault();break;case"ArrowLeft":_(e.target),e.preventDefault();break;case"Home":A(e.target),e.preventDefault();break;case"End":T(e.target),e.preventDefault();break;case"Space":case"Enter":N(e,t,n),e.preventDefault();break;case"Tab":z()}},H=function(e){var t=M(e);t&&U(e,t)},_=function(e){var t=R(e);t&&U(e,t)},A=function(e){var t=q();t&&U(e,t)},T=function(e){var t=L();t&&U(e,t)},M=function e(t){var n=t.parentElement.nextElementSibling;return n?!0===i.DomHandler.getAttribute(n,"data-p-disabled")?e(n.children[0]):n.children[0]:null},R=function e(t){var n=t.parentElement.previousElementSibling;return n?!0===i.DomHandler.getAttribute(n,"data-p-disabled")?e(n.children[0]):n.children[0]:null},q=function(){var e=i.DomHandler.findSingle(O.current,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e.children[0]:null},L=function(){var e=i.DomHandler.find(O.current,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e[e.length-1].children[0]:null},U=function(e,t){e.tabIndex="-1",t.tabIndex="0",t.focus()},z=function(){var e=i.DomHandler.findSingle(O.current,'[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]'),t=i.DomHandler.findSingle(O.current,'[data-pc-section="action"][tabindex="0"]');t!==e.children[0]&&(e&&(e.children[0].tabIndex="0"),t.tabIndex="-1")},B=function(e,t){if(!1===e.visible)return null;var n=e.className,r=e.style,l=e.disabled,u=e.icon,s=e.label,p=e.template,f=e.url,d=e.target,b=e.id||m+"_"+t,v=k(t),y=i.classNames("p-menuitem-icon",u),g=i.mergeProps({className:E("icon",{_icon:u})},D("icon",e,t)),x=i.IconUtils.getJSXIcon(u,h({},g),{props:c}),O=i.mergeProps({className:E("label")},D("label",e,t)),w=s&&o.createElement("span",O,s),P=i.mergeProps({href:f||"#",role:"menuitem","aria-label":s,tabIndex:v?"0":"-1",className:E("action"),target:d,onClick:function(n){return N(n,e,t)}},D("action",e,t)),S=o.createElement("a",P,x,w,o.createElement(a.Ripple,null));p&&(S=i.ObjectUtils.getJSXElement(p,e,{onClick:function(n){return N(n,e,t)},className:"p-menuitem-link",labelClassName:"p-menuitem-text",iconClassName:y,element:S,props:c,active:v,index:t,disabled:l}));var I=i.mergeProps({ref:j.current["tab_".concat(t)],id:b,key:b,onKeyDown:function(n){return C(n,e,t)},className:E("menuitem",{_className:n,active:v,disabled:l}),style:r,role:"presentation","data-p-highlight":v,"data-p-disabled":l||!1,"aria-disabled":l},D("menuitem",e,t));return o.createElement("li",I,S)};if(c.model){var J=c.model.map(B),X=i.mergeProps({ref:x,role:"none",className:E("inkbar")},S("inkbar")),K=i.mergeProps({ref:O,"aria-label":c.ariaLabel,"aria-labelledby":c.ariaLabelledBy,className:E("menu"),role:"menubar"},S("menu")),W=i.mergeProps({id:c.id,ref:g,className:E("root"),style:c.style},y.getOtherProps(c),S("root"));return o.createElement("div",W,o.createElement("ul",K,J,o.createElement("li",X)))}return null})));x.displayName="TabMenu",exports.TabMenu=x;

package/tabmenu/tabmenu.esm.js

@@ -125,13 +125,15 @@ var classes = {
     return classNames('p-tabmenu p-component', props.className);
   }
 };
-var styles = "\n@layer primereact {\n    .p-tabmenu {\n        overflow-x: auto;\n    }\n    \n    .p-tabmenu-nav {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        flex-wrap: nowrap;\n    }\n    \n    .p-tabmenu-nav a {\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-decoration: none;\n        text-decoration: none;\n        overflow: hidden;\n    }\n    \n    .p-tabmenu-nav a:focus {\n        z-index: 1;\n    }\n    \n    .p-tabmenu-nav .p-menuitem-text {\n        line-height: 1;\n    }\n    \n    .p-tabmenu-ink-bar {\n        display: none;\n        z-index: 1;\n    }\n    \n    .p-tabmenu::-webkit-scrollbar {\n        display: none;\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-tabmenu {\n        overflow-x: auto;\n    }\n\n    .p-tabmenu-nav {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        flex-wrap: nowrap;\n    }\n\n    .p-tabmenu-nav a {\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-decoration: none;\n        text-decoration: none;\n        overflow: hidden;\n    }\n\n    .p-tabmenu-nav a:focus {\n        z-index: 1;\n    }\n\n    .p-tabmenu-nav .p-menuitem-text {\n        line-height: 1;\n    }\n\n    .p-tabmenu-ink-bar {\n        display: none;\n        z-index: 1;\n    }\n\n    .p-tabmenu::-webkit-scrollbar {\n        display: none;\n    }\n}\n";
 var TabMenuBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'TabMenu',
     id: null,
     model: null,
     activeIndex: 0,
+    ariaLabel: null,
+    ariaLabelledBy: null,
     style: null,
     className: null,
     onTabChange: null,
@@ -211,9 +213,20 @@ var TabMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
   };
   var updateInkBar = function updateInkBar() {
     if (props.model) {
-      var tabHeader = tabsRef.current["tab_".concat(activeIndex)];
-      inkbarRef.current.style.width = DomHandler.getWidth(tabHeader) + 'px';
-      inkbarRef.current.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(navRef.current).left + 'px';
+      var tabs = navRef.current.children;
+      var inkHighlighted = false;
+      for (var i = 0; i < tabs.length; i++) {
+        var tab = tabs[i];
+        if (DomHandler.getAttribute(tab, 'data-p-highlight')) {
+          inkbarRef.current.style.width = DomHandler.getWidth(tab) + 'px';
+          inkbarRef.current.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(navRef.current).left + 'px';
+          inkHighlighted = true;
+        }
+      }
+      if (!inkHighlighted) {
+        inkbarRef.current.style.width = '0px';
+        inkbarRef.current.style.left = '0px';
+      }
     }
   };
   useMountEffect(function () {
@@ -232,6 +245,79 @@ var TabMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
   React.useEffect(function () {
     updateInkBar();
   });
+  var onKeyDownItem = function onKeyDownItem(event, item, index) {
+    switch (event.code) {
+      case 'ArrowRight':
+        navigateToNextItem(event.target);
+        event.preventDefault();
+        break;
+      case 'ArrowLeft':
+        navigateToPrevItem(event.target);
+        event.preventDefault();
+        break;
+      case 'Home':
+        navigateToFirstItem(event.target);
+        event.preventDefault();
+        break;
+      case 'End':
+        navigateToLastItem(event.target);
+        event.preventDefault();
+        break;
+      case 'Space':
+      case 'Enter':
+        itemClick(event, item, index);
+        event.preventDefault();
+        break;
+      case 'Tab':
+        onTabKey();
+        break;
+    }
+  };
+  var navigateToNextItem = function navigateToNextItem(target) {
+    var nextItem = findNextItem(target);
+    nextItem && setFocusToMenuitem(target, nextItem);
+  };
+  var navigateToPrevItem = function navigateToPrevItem(target) {
+    var prevItem = findPrevItem(target);
+    prevItem && setFocusToMenuitem(target, prevItem);
+  };
+  var navigateToFirstItem = function navigateToFirstItem(target) {
+    var firstItem = findFirstItem();
+    firstItem && setFocusToMenuitem(target, firstItem);
+  };
+  var navigateToLastItem = function navigateToLastItem(target) {
+    var lastItem = findLastItem();
+    lastItem && setFocusToMenuitem(target, lastItem);
+  };
+  var findNextItem = function findNextItem(item) {
+    var nextItem = item.parentElement.nextElementSibling;
+    return nextItem ? DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? findNextItem(nextItem.children[0]) : nextItem.children[0] : null;
+  };
+  var findPrevItem = function findPrevItem(item) {
+    var prevItem = item.parentElement.previousElementSibling;
+    return prevItem ? DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? findPrevItem(prevItem.children[0]) : prevItem.children[0] : null;
+  };
+  var findFirstItem = function findFirstItem() {
+    var firstSibling = DomHandler.findSingle(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+    return firstSibling ? firstSibling.children[0] : null;
+  };
+  var findLastItem = function findLastItem() {
+    var siblings = DomHandler.find(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+    return siblings ? siblings[siblings.length - 1].children[0] : null;
+  };
+  var setFocusToMenuitem = function setFocusToMenuitem(target, focusableItem) {
+    target.tabIndex = '-1';
+    focusableItem.tabIndex = '0';
+    focusableItem.focus();
+  };
+  var onTabKey = function onTabKey() {
+    var activeItem = DomHandler.findSingle(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+    var focusedItem = DomHandler.findSingle(navRef.current, '[data-pc-section="action"][tabindex="0"]');
+    if (focusedItem !== activeItem.children[0]) {
+      activeItem && (activeItem.children[0].tabIndex = '0');
+      focusedItem.tabIndex = '-1';
+    }
+  };
   var createMenuItem = function createMenuItem(item, index) {
     if (item.visible === false) {
       return null;
@@ -261,12 +347,14 @@ var TabMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     var label = _label && /*#__PURE__*/React.createElement("span", labelProps, _label);
     var actionProps = mergeProps({
       href: url || '#',
+      role: 'menuitem',
+      'aria-label': _label,
+      tabIndex: active ? '0' : '-1',
       className: cx('action'),
       target: target,
       onClick: function onClick(event) {
         return itemClick(event, item, index);
-      },
-      role: 'presentation'
+      }
     }, getPTOptions('action', item, index));
     var content = /*#__PURE__*/React.createElement("a", actionProps, icon, label, /*#__PURE__*/React.createElement(Ripple, null));
     if (template) {
@@ -289,15 +377,18 @@ var TabMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
       ref: tabsRef.current["tab_".concat(index)],
       id: key,
       key: key,
+      onKeyDown: function onKeyDown(event) {
+        return onKeyDownItem(event, item, index);
+      },
       className: cx('menuitem', {
         _className: _className,
         active: active,
         disabled: disabled
       }),
       style: style,
-      role: 'tab',
-      'aria-selected': active,
-      'aria-expanded': active,
+      role: 'presentation',
+      'data-p-highlight': active,
+      'data-p-disabled': disabled || false,
       'aria-disabled': disabled
     }, getPTOptions('menuitem', item, index));
     return /*#__PURE__*/React.createElement("li", menuItemProps, content);
@@ -309,12 +400,15 @@ var TabMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     var items = createItems();
     var inkbarProps = mergeProps({
       ref: inkbarRef,
+      role: 'none',
       className: cx('inkbar')
     }, ptm('inkbar'));
     var menuProps = mergeProps({
       ref: navRef,
+      'aria-label': props.ariaLabel,
+      'aria-labelledby': props.ariaLabelledBy,
       className: cx('menu'),
-      role: 'tablist'
+      role: 'menubar'
     }, ptm('menu'));
     var rootProps = mergeProps({
       id: props.id,

package/tabmenu/tabmenu.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as r}from"primereact/componentbase";import{useMountEffect as a}from"primereact/hooks";import{Ripple as i}from"primereact/ripple";import{classNames as o,UniqueComponentId as l,mergeProps as u,DomHandler as c,IconUtils as s,ObjectUtils as m}from"primereact/utils";function p(e){return p="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},p(e)}function f(e,t){if("object"!==p(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==p(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function b(e){var t=f(e,"string");return"symbol"===p(t)?t:String(t)}function d(e){if(Array.isArray(e))return e}function y(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,o,l=[],u=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);u=!0);}catch(e){c=!0,a=e}finally{try{if(!u&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(c)throw a}}return l}}function v(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,t){if(e){if("string"==typeof e)return v(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)?v(e,t):void 0}}function h(){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 x(e,t){return d(e)||y(e,t)||g(e,t)||h()}var O=n.extend({defaultProps:{__TYPE:"TabMenu",id:null,model:null,activeIndex:0,style:null,className:null,onTabChange:null,children:void 0},css:{classes:{icon:function(e){return o("p-menuitem-icon",e._icon)},label:"p-menuitem-text",action:"p-menuitem-link",menuitem:function(e){return o("p-tabmenuitem",{"p-highlight":e.active,"p-disabled":e.disabled},e._className)},inkbar:"p-tabmenu-ink-bar",menu:"p-tabmenu-nav p-reset",root:function(e){return o("p-tabmenu p-component",e.props.className)}},styles:"\n@layer primereact {\n    .p-tabmenu {\n        overflow-x: auto;\n    }\n    \n    .p-tabmenu-nav {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        flex-wrap: nowrap;\n    }\n    \n    .p-tabmenu-nav a {\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-decoration: none;\n        text-decoration: none;\n        overflow: hidden;\n    }\n    \n    .p-tabmenu-nav a:focus {\n        z-index: 1;\n    }\n    \n    .p-tabmenu-nav .p-menuitem-text {\n        line-height: 1;\n    }\n    \n    .p-tabmenu-ink-bar {\n        display: none;\n        z-index: 1;\n    }\n    \n    .p-tabmenu::-webkit-scrollbar {\n        display: none;\n    }\n}\n"}});function w(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?w(Object(n),!0).forEach((function(t){var r,a,i;r=e,i=n[t],(a=b(a=t))in r?Object.defineProperty(r,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[a]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):w(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var S=e.memo(e.forwardRef((function(n,p){var f=e.useContext(t),b=O.getProps(n,f),d=x(e.useState(b.id),2),y=d[0],v=d[1],g=x(e.useState(b.activeIndex),2),h=g[0],w=g[1],S=e.useRef(null),E=e.useRef(null),N=e.useRef(null),P=e.useRef({}),k=b.onTabChange?b.activeIndex:h,C=O.setMetaData({props:b,state:{id:y,activeIndex:h}}),I=C.ptm,T=C.cx,_=function(e,t,n){return I(e,{context:{item:t,index:n}})};r(O.css.styles,C.isUnstyled,{name:"tabmenu"});var D=function(e,t,n){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),b.onTabChange?b.onTabChange({originalEvent:e,value:t,index:n}):w(n))},A=function(e){return e===(k||0)},R=function(){if(b.model){var e=P.current["tab_".concat(k)];E.current.style.width=c.getWidth(e)+"px",E.current.style.left=c.getOffset(e).left-c.getOffset(N.current).left+"px"}};a((function(){y||v(l())})),e.useImperativeHandle(p,(function(){return{props:b,getElement:function(){return S.current}}})),e.useEffect((function(){R()}));var M=function(t,n){if(!1===t.visible)return null;var r=t.className,a=t.style,l=t.disabled,c=t.icon,p=t.label,f=t.template,d=t.url,v=t.target,g=t.id||y+"_"+n,h=A(n),x=o("p-menuitem-icon",c),O=u({className:T("icon",{_icon:c})},_("icon",t,n)),w=s.getJSXIcon(c,j({},O),{props:b}),S=u({className:T("label")},_("label",t,n)),E=p&&e.createElement("span",S,p),N=u({href:d||"#",className:T("action"),target:v,onClick:function(e){return D(e,t,n)},role:"presentation"},_("action",t,n)),k=e.createElement("a",N,w,E,e.createElement(i,null));f&&(k=m.getJSXElement(f,t,{onClick:function(e){return D(e,t,n)},className:"p-menuitem-link",labelClassName:"p-menuitem-text",iconClassName:x,element:k,props:b,active:h,index:n,disabled:l}));var C=u({ref:P.current["tab_".concat(n)],id:g,key:g,className:T("menuitem",{_className:r,active:h,disabled:l}),style:a,role:"tab","aria-selected":h,"aria-expanded":h,"aria-disabled":l},_("menuitem",t,n));return e.createElement("li",C,k)};if(b.model){var z=b.model.map(M),J=u({ref:E,className:T("inkbar")},I("inkbar")),U=u({ref:N,className:T("menu"),role:"tablist"},I("menu")),X=u({id:b.id,ref:S,className:T("root"),style:b.style},O.getOtherProps(b),I("root"));return e.createElement("div",X,e.createElement("ul",U,z,e.createElement("li",J)))}return null})));S.displayName="TabMenu";export{S as TabMenu};
+import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as r}from"primereact/componentbase";import{useMountEffect as a}from"primereact/hooks";import{Ripple as i}from"primereact/ripple";import{classNames as l,UniqueComponentId as o,mergeProps as u,DomHandler as c,IconUtils as s,ObjectUtils as m}from"primereact/utils";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 d(e){var t=p(e,"string");return"symbol"===f(t)?t:String(t)}function b(e){if(Array.isArray(e))return e}function v(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,l,o=[],u=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(o.push(r.value),o.length!==t);u=!0);}catch(e){c=!0,a=e}finally{try{if(!u&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(c)throw a}}return o}}function y(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,t){if(e){if("string"==typeof e)return y(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)?y(e,t):void 0}}function h(){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 x(e,t){return b(e)||v(e,t)||g(e,t)||h()}var w=n.extend({defaultProps:{__TYPE:"TabMenu",id:null,model:null,activeIndex:0,ariaLabel:null,ariaLabelledBy:null,style:null,className:null,onTabChange:null,children:void 0},css:{classes:{icon:function(e){return l("p-menuitem-icon",e._icon)},label:"p-menuitem-text",action:"p-menuitem-link",menuitem:function(e){return l("p-tabmenuitem",{"p-highlight":e.active,"p-disabled":e.disabled},e._className)},inkbar:"p-tabmenu-ink-bar",menu:"p-tabmenu-nav p-reset",root:function(e){return l("p-tabmenu p-component",e.props.className)}},styles:"\n@layer primereact {\n    .p-tabmenu {\n        overflow-x: auto;\n    }\n\n    .p-tabmenu-nav {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        flex-wrap: nowrap;\n    }\n\n    .p-tabmenu-nav a {\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-decoration: none;\n        text-decoration: none;\n        overflow: hidden;\n    }\n\n    .p-tabmenu-nav a:focus {\n        z-index: 1;\n    }\n\n    .p-tabmenu-nav .p-menuitem-text {\n        line-height: 1;\n    }\n\n    .p-tabmenu-ink-bar {\n        display: none;\n        z-index: 1;\n    }\n\n    .p-tabmenu::-webkit-scrollbar {\n        display: none;\n    }\n}\n"}});function O(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?O(Object(n),!0).forEach((function(t){var r,a,i;r=e,i=n[t],(a=d(a=t))in r?Object.defineProperty(r,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[a]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var E=e.memo(e.forwardRef((function(n,f){var p=e.useContext(t),d=w.getProps(n,p),b=x(e.useState(d.id),2),v=b[0],y=b[1],g=x(e.useState(d.activeIndex),2),h=g[0],O=g[1],E=e.useRef(null),j=e.useRef(null),k=e.useRef(null),N=e.useRef({}),P=d.onTabChange?d.activeIndex:h,I=w.setMetaData({props:d,state:{id:v,activeIndex:h}}),D=I.ptm,A=I.cx,C=function(e,t,n){return D(e,{context:{item:t,index:n}})};r(w.css.styles,I.isUnstyled,{name:"tabmenu"});var T=function(e,t,n){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),d.onTabChange?d.onTabChange({originalEvent:e,value:t,index:n}):O(n))},_=function(e){return e===(P||0)},R=function(){if(d.model){for(var e=k.current.children,t=!1,n=0;n<e.length;n++){var r=e[n];c.getAttribute(r,"data-p-highlight")&&(j.current.style.width=c.getWidth(r)+"px",j.current.style.left=c.getOffset(r).left-c.getOffset(k.current).left+"px",t=!0)}t||(j.current.style.width="0px",j.current.style.left="0px")}};a((function(){v||y(o())})),e.useImperativeHandle(f,(function(){return{props:d,getElement:function(){return E.current}}})),e.useEffect((function(){R()}));var L=function(e,t,n){switch(e.code){case"ArrowRight":M(e.target),e.preventDefault();break;case"ArrowLeft":z(e.target),e.preventDefault();break;case"Home":B(e.target),e.preventDefault();break;case"End":H(e.target),e.preventDefault();break;case"Space":case"Enter":T(e,t,n),e.preventDefault();break;case"Tab":Y()}},M=function(e){var t=J(e);t&&W(e,t)},z=function(e){var t=U(e);t&&W(e,t)},B=function(e){var t=X();t&&W(e,t)},H=function(e){var t=K();t&&W(e,t)},J=function e(t){var n=t.parentElement.nextElementSibling;return n?!0===c.getAttribute(n,"data-p-disabled")?e(n.children[0]):n.children[0]:null},U=function e(t){var n=t.parentElement.previousElementSibling;return n?!0===c.getAttribute(n,"data-p-disabled")?e(n.children[0]):n.children[0]:null},X=function(){var e=c.findSingle(k.current,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e.children[0]:null},K=function(){var e=c.find(k.current,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e[e.length-1].children[0]:null},W=function(e,t){e.tabIndex="-1",t.tabIndex="0",t.focus()},Y=function(){var e=c.findSingle(k.current,'[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]'),t=c.findSingle(k.current,'[data-pc-section="action"][tabindex="0"]');t!==e.children[0]&&(e&&(e.children[0].tabIndex="0"),t.tabIndex="-1")},$=function(t,n){if(!1===t.visible)return null;var r=t.className,a=t.style,o=t.disabled,c=t.icon,f=t.label,p=t.template,b=t.url,y=t.target,g=t.id||v+"_"+n,h=_(n),x=l("p-menuitem-icon",c),w=u({className:A("icon",{_icon:c})},C("icon",t,n)),O=s.getJSXIcon(c,S({},w),{props:d}),E=u({className:A("label")},C("label",t,n)),j=f&&e.createElement("span",E,f),k=u({href:b||"#",role:"menuitem","aria-label":f,tabIndex:h?"0":"-1",className:A("action"),target:y,onClick:function(e){return T(e,t,n)}},C("action",t,n)),P=e.createElement("a",k,O,j,e.createElement(i,null));p&&(P=m.getJSXElement(p,t,{onClick:function(e){return T(e,t,n)},className:"p-menuitem-link",labelClassName:"p-menuitem-text",iconClassName:x,element:P,props:d,active:h,index:n,disabled:o}));var I=u({ref:N.current["tab_".concat(n)],id:g,key:g,onKeyDown:function(e){return L(e,t,n)},className:A("menuitem",{_className:r,active:h,disabled:o}),style:a,role:"presentation","data-p-highlight":h,"data-p-disabled":o||!1,"aria-disabled":o},C("menuitem",t,n));return e.createElement("li",I,P)};if(d.model){var q=d.model.map($),F=u({ref:j,role:"none",className:A("inkbar")},D("inkbar")),G=u({ref:k,"aria-label":d.ariaLabel,"aria-labelledby":d.ariaLabelledBy,className:A("menu"),role:"menubar"},D("menu")),Q=u({id:d.id,ref:E,className:A("root"),style:d.style},w.getOtherProps(d),D("root"));return e.createElement("div",Q,e.createElement("ul",G,q,e.createElement("li",F)))}return null})));E.displayName="TabMenu";export{E as TabMenu};

package/tabmenu/tabmenu.js

@@ -141,13 +141,15 @@ this.primereact.tabmenu = (function (exports, React, api, componentbase, hooks,
       return utils.classNames('p-tabmenu p-component', props.className);
     }
   };
-  var styles = "\n@layer primereact {\n    .p-tabmenu {\n        overflow-x: auto;\n    }\n    \n    .p-tabmenu-nav {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        flex-wrap: nowrap;\n    }\n    \n    .p-tabmenu-nav a {\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-decoration: none;\n        text-decoration: none;\n        overflow: hidden;\n    }\n    \n    .p-tabmenu-nav a:focus {\n        z-index: 1;\n    }\n    \n    .p-tabmenu-nav .p-menuitem-text {\n        line-height: 1;\n    }\n    \n    .p-tabmenu-ink-bar {\n        display: none;\n        z-index: 1;\n    }\n    \n    .p-tabmenu::-webkit-scrollbar {\n        display: none;\n    }\n}\n";
+  var styles = "\n@layer primereact {\n    .p-tabmenu {\n        overflow-x: auto;\n    }\n\n    .p-tabmenu-nav {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        flex-wrap: nowrap;\n    }\n\n    .p-tabmenu-nav a {\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-decoration: none;\n        text-decoration: none;\n        overflow: hidden;\n    }\n\n    .p-tabmenu-nav a:focus {\n        z-index: 1;\n    }\n\n    .p-tabmenu-nav .p-menuitem-text {\n        line-height: 1;\n    }\n\n    .p-tabmenu-ink-bar {\n        display: none;\n        z-index: 1;\n    }\n\n    .p-tabmenu::-webkit-scrollbar {\n        display: none;\n    }\n}\n";
   var TabMenuBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'TabMenu',
       id: null,
       model: null,
       activeIndex: 0,
+      ariaLabel: null,
+      ariaLabelledBy: null,
       style: null,
       className: null,
       onTabChange: null,
@@ -227,9 +229,20 @@ this.primereact.tabmenu = (function (exports, React, api, componentbase, hooks,
     };
     var updateInkBar = function updateInkBar() {
       if (props.model) {
-        var tabHeader = tabsRef.current["tab_".concat(activeIndex)];
-        inkbarRef.current.style.width = utils.DomHandler.getWidth(tabHeader) + 'px';
-        inkbarRef.current.style.left = utils.DomHandler.getOffset(tabHeader).left - utils.DomHandler.getOffset(navRef.current).left + 'px';
+        var tabs = navRef.current.children;
+        var inkHighlighted = false;
+        for (var i = 0; i < tabs.length; i++) {
+          var tab = tabs[i];
+          if (utils.DomHandler.getAttribute(tab, 'data-p-highlight')) {
+            inkbarRef.current.style.width = utils.DomHandler.getWidth(tab) + 'px';
+            inkbarRef.current.style.left = utils.DomHandler.getOffset(tab).left - utils.DomHandler.getOffset(navRef.current).left + 'px';
+            inkHighlighted = true;
+          }
+        }
+        if (!inkHighlighted) {
+          inkbarRef.current.style.width = '0px';
+          inkbarRef.current.style.left = '0px';
+        }
       }
     };
     hooks.useMountEffect(function () {
@@ -248,6 +261,79 @@ this.primereact.tabmenu = (function (exports, React, api, componentbase, hooks,
     React__namespace.useEffect(function () {
       updateInkBar();
     });
+    var onKeyDownItem = function onKeyDownItem(event, item, index) {
+      switch (event.code) {
+        case 'ArrowRight':
+          navigateToNextItem(event.target);
+          event.preventDefault();
+          break;
+        case 'ArrowLeft':
+          navigateToPrevItem(event.target);
+          event.preventDefault();
+          break;
+        case 'Home':
+          navigateToFirstItem(event.target);
+          event.preventDefault();
+          break;
+        case 'End':
+          navigateToLastItem(event.target);
+          event.preventDefault();
+          break;
+        case 'Space':
+        case 'Enter':
+          itemClick(event, item, index);
+          event.preventDefault();
+          break;
+        case 'Tab':
+          onTabKey();
+          break;
+      }
+    };
+    var navigateToNextItem = function navigateToNextItem(target) {
+      var nextItem = findNextItem(target);
+      nextItem && setFocusToMenuitem(target, nextItem);
+    };
+    var navigateToPrevItem = function navigateToPrevItem(target) {
+      var prevItem = findPrevItem(target);
+      prevItem && setFocusToMenuitem(target, prevItem);
+    };
+    var navigateToFirstItem = function navigateToFirstItem(target) {
+      var firstItem = findFirstItem();
+      firstItem && setFocusToMenuitem(target, firstItem);
+    };
+    var navigateToLastItem = function navigateToLastItem(target) {
+      var lastItem = findLastItem();
+      lastItem && setFocusToMenuitem(target, lastItem);
+    };
+    var findNextItem = function findNextItem(item) {
+      var nextItem = item.parentElement.nextElementSibling;
+      return nextItem ? utils.DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? findNextItem(nextItem.children[0]) : nextItem.children[0] : null;
+    };
+    var findPrevItem = function findPrevItem(item) {
+      var prevItem = item.parentElement.previousElementSibling;
+      return prevItem ? utils.DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? findPrevItem(prevItem.children[0]) : prevItem.children[0] : null;
+    };
+    var findFirstItem = function findFirstItem() {
+      var firstSibling = utils.DomHandler.findSingle(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+      return firstSibling ? firstSibling.children[0] : null;
+    };
+    var findLastItem = function findLastItem() {
+      var siblings = utils.DomHandler.find(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+      return siblings ? siblings[siblings.length - 1].children[0] : null;
+    };
+    var setFocusToMenuitem = function setFocusToMenuitem(target, focusableItem) {
+      target.tabIndex = '-1';
+      focusableItem.tabIndex = '0';
+      focusableItem.focus();
+    };
+    var onTabKey = function onTabKey() {
+      var activeItem = utils.DomHandler.findSingle(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+      var focusedItem = utils.DomHandler.findSingle(navRef.current, '[data-pc-section="action"][tabindex="0"]');
+      if (focusedItem !== activeItem.children[0]) {
+        activeItem && (activeItem.children[0].tabIndex = '0');
+        focusedItem.tabIndex = '-1';
+      }
+    };
     var createMenuItem = function createMenuItem(item, index) {
       if (item.visible === false) {
         return null;
@@ -277,12 +363,14 @@ this.primereact.tabmenu = (function (exports, React, api, componentbase, hooks,
       var label = _label && /*#__PURE__*/React__namespace.createElement("span", labelProps, _label);
       var actionProps = utils.mergeProps({
         href: url || '#',
+        role: 'menuitem',
+        'aria-label': _label,
+        tabIndex: active ? '0' : '-1',
         className: cx('action'),
         target: target,
         onClick: function onClick(event) {
           return itemClick(event, item, index);
-        },
-        role: 'presentation'
+        }
       }, getPTOptions('action', item, index));
       var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, icon, label, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       if (template) {
@@ -305,15 +393,18 @@ this.primereact.tabmenu = (function (exports, React, api, componentbase, hooks,
         ref: tabsRef.current["tab_".concat(index)],
         id: key,
         key: key,
+        onKeyDown: function onKeyDown(event) {
+          return onKeyDownItem(event, item, index);
+        },
         className: cx('menuitem', {
           _className: _className,
           active: active,
           disabled: disabled
         }),
         style: style,
-        role: 'tab',
-        'aria-selected': active,
-        'aria-expanded': active,
+        role: 'presentation',
+        'data-p-highlight': active,
+        'data-p-disabled': disabled || false,
         'aria-disabled': disabled
       }, getPTOptions('menuitem', item, index));
       return /*#__PURE__*/React__namespace.createElement("li", menuItemProps, content);
@@ -325,12 +416,15 @@ this.primereact.tabmenu = (function (exports, React, api, componentbase, hooks,
       var items = createItems();
       var inkbarProps = utils.mergeProps({
         ref: inkbarRef,
+        role: 'none',
         className: cx('inkbar')
       }, ptm('inkbar'));
       var menuProps = utils.mergeProps({
         ref: navRef,
+        'aria-label': props.ariaLabel,
+        'aria-labelledby': props.ariaLabelledBy,
         className: cx('menu'),
-        role: 'tablist'
+        role: 'menubar'
       }, ptm('menu'));
       var rootProps = utils.mergeProps({
         id: props.id,

package/tabmenu/tabmenu.min.js

@@ -1 +1 @@
-this.primereact=this.primereact||{},this.primereact.tabmenu=function(e,t,n,r,a,i,o){"use strict";function l(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=l(t);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 s(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 m(e){var t=s(e,"string");return"symbol"===c(t)?t:String(t)}function p(e){if(Array.isArray(e))return e}function f(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,o,l=[],u=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);u=!0);}catch(e){c=!0,a=e}finally{try{if(!u&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(c)throw a}}return l}}function b(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 d(e,t){if(e){if("string"==typeof e)return b(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)?b(e,t):void 0}}function y(){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 v(e,t){return p(e)||f(e,t)||d(e,t)||y()}var g=r.ComponentBase.extend({defaultProps:{__TYPE:"TabMenu",id:null,model:null,activeIndex:0,style:null,className:null,onTabChange:null,children:void 0},css:{classes:{icon:function(e){return o.classNames("p-menuitem-icon",e._icon)},label:"p-menuitem-text",action:"p-menuitem-link",menuitem:function(e){return o.classNames("p-tabmenuitem",{"p-highlight":e.active,"p-disabled":e.disabled},e._className)},inkbar:"p-tabmenu-ink-bar",menu:"p-tabmenu-nav p-reset",root:function(e){return o.classNames("p-tabmenu p-component",e.props.className)}},styles:"\n@layer primereact {\n    .p-tabmenu {\n        overflow-x: auto;\n    }\n    \n    .p-tabmenu-nav {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        flex-wrap: nowrap;\n    }\n    \n    .p-tabmenu-nav a {\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-decoration: none;\n        text-decoration: none;\n        overflow: hidden;\n    }\n    \n    .p-tabmenu-nav a:focus {\n        z-index: 1;\n    }\n    \n    .p-tabmenu-nav .p-menuitem-text {\n        line-height: 1;\n    }\n    \n    .p-tabmenu-ink-bar {\n        display: none;\n        z-index: 1;\n    }\n    \n    .p-tabmenu::-webkit-scrollbar {\n        display: none;\n    }\n}\n"}});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 O(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){var r,a,i;r=e,i=n[t],(a=m(a=t))in r?Object.defineProperty(r,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[a]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var x=u.memo(u.forwardRef((function(e,t){var l=u.useContext(n.PrimeReactContext),c=g.getProps(e,l),s=v(u.useState(c.id),2),m=s[0],p=s[1],f=v(u.useState(c.activeIndex),2),b=f[0],d=f[1],y=u.useRef(null),h=u.useRef(null),x=u.useRef(null),j=u.useRef({}),P=c.onTabChange?c.activeIndex:b,w=g.setMetaData({props:c,state:{id:m,activeIndex:b}}),N=w.ptm,S=w.cx,E=function(e,t,n){return N(e,{context:{item:t,index:n}})};r.useHandleStyle(g.css.styles,w.isUnstyled,{name:"tabmenu"});var k=function(e,t,n){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),c.onTabChange?c.onTabChange({originalEvent:e,value:t,index:n}):d(n))},C=function(e){return e===(P||0)},_=function(){if(c.model){var e=j.current["tab_".concat(P)];h.current.style.width=o.DomHandler.getWidth(e)+"px",h.current.style.left=o.DomHandler.getOffset(e).left-o.DomHandler.getOffset(x.current).left+"px"}};a.useMountEffect((function(){m||p(o.UniqueComponentId())})),u.useImperativeHandle(t,(function(){return{props:c,getElement:function(){return y.current}}})),u.useEffect((function(){_()}));var D=function(e,t){if(!1===e.visible)return null;var n=e.className,r=e.style,a=e.disabled,l=e.icon,s=e.label,p=e.template,f=e.url,b=e.target,d=e.id||m+"_"+t,y=C(t),v=o.classNames("p-menuitem-icon",l),g=o.mergeProps({className:S("icon",{_icon:l})},E("icon",e,t)),h=o.IconUtils.getJSXIcon(l,O({},g),{props:c}),x=o.mergeProps({className:S("label")},E("label",e,t)),P=s&&u.createElement("span",x,s),w=o.mergeProps({href:f||"#",className:S("action"),target:b,onClick:function(n){return k(n,e,t)},role:"presentation"},E("action",e,t)),N=u.createElement("a",w,h,P,u.createElement(i.Ripple,null));p&&(N=o.ObjectUtils.getJSXElement(p,e,{onClick:function(n){return k(n,e,t)},className:"p-menuitem-link",labelClassName:"p-menuitem-text",iconClassName:v,element:N,props:c,active:y,index:t,disabled:a}));var _=o.mergeProps({ref:j.current["tab_".concat(t)],id:d,key:d,className:S("menuitem",{_className:n,active:y,disabled:a}),style:r,role:"tab","aria-selected":y,"aria-expanded":y,"aria-disabled":a},E("menuitem",e,t));return u.createElement("li",_,N)};if(c.model){var I=c.model.map(D),T=o.mergeProps({ref:h,className:S("inkbar")},N("inkbar")),M=o.mergeProps({ref:x,className:S("menu"),role:"tablist"},N("menu")),R=o.mergeProps({id:c.id,ref:y,className:S("root"),style:c.style},g.getOtherProps(c),N("root"));return u.createElement("div",R,u.createElement("ul",M,I,u.createElement("li",T)))}return null})));return x.displayName="TabMenu",e.TabMenu=x,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.ripple,primereact.utils);
+this.primereact=this.primereact||{},this.primereact.tabmenu=function(e,t,n,r,a,i,l){"use strict";function o(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=o(t);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 s(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 m(e){var t=s(e,"string");return"symbol"===c(t)?t:String(t)}function p(e){if(Array.isArray(e))return e}function f(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,l,o=[],u=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;u=!1}else for(;!(u=(r=i.call(n)).done)&&(o.push(r.value),o.length!==t);u=!0);}catch(e){c=!0,a=e}finally{try{if(!u&&null!=n.return&&(l=n.return(),Object(l)!==l))return}finally{if(c)throw a}}return o}}function d(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 b(e,t){if(e){if("string"==typeof e)return d(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)?d(e,t):void 0}}function v(){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 y(e,t){return p(e)||f(e,t)||b(e,t)||v()}var g=r.ComponentBase.extend({defaultProps:{__TYPE:"TabMenu",id:null,model:null,activeIndex:0,ariaLabel:null,ariaLabelledBy:null,style:null,className:null,onTabChange:null,children:void 0},css:{classes:{icon:function(e){return l.classNames("p-menuitem-icon",e._icon)},label:"p-menuitem-text",action:"p-menuitem-link",menuitem:function(e){return l.classNames("p-tabmenuitem",{"p-highlight":e.active,"p-disabled":e.disabled},e._className)},inkbar:"p-tabmenu-ink-bar",menu:"p-tabmenu-nav p-reset",root:function(e){return l.classNames("p-tabmenu p-component",e.props.className)}},styles:"\n@layer primereact {\n    .p-tabmenu {\n        overflow-x: auto;\n    }\n\n    .p-tabmenu-nav {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        flex-wrap: nowrap;\n    }\n\n    .p-tabmenu-nav a {\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-decoration: none;\n        text-decoration: none;\n        overflow: hidden;\n    }\n\n    .p-tabmenu-nav a:focus {\n        z-index: 1;\n    }\n\n    .p-tabmenu-nav .p-menuitem-text {\n        line-height: 1;\n    }\n\n    .p-tabmenu-ink-bar {\n        display: none;\n        z-index: 1;\n    }\n\n    .p-tabmenu::-webkit-scrollbar {\n        display: none;\n    }\n}\n"}});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 x(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){var r,a,i;r=e,i=n[t],(a=m(a=t))in r?Object.defineProperty(r,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):r[a]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var O=u.memo(u.forwardRef((function(e,t){var o=u.useContext(n.PrimeReactContext),c=g.getProps(e,o),s=y(u.useState(c.id),2),m=s[0],p=s[1],f=y(u.useState(c.activeIndex),2),d=f[0],b=f[1],v=u.useRef(null),h=u.useRef(null),O=u.useRef(null),j=u.useRef({}),w=c.onTabChange?c.activeIndex:d,P=g.setMetaData({props:c,state:{id:m,activeIndex:d}}),S=P.ptm,E=P.cx,D=function(e,t,n){return S(e,{context:{item:t,index:n}})};r.useHandleStyle(g.css.styles,P.isUnstyled,{name:"tabmenu"});var N=function(e,t,n){t.disabled?e.preventDefault():(t.url||e.preventDefault(),t.command&&t.command({originalEvent:e,item:t}),c.onTabChange?c.onTabChange({originalEvent:e,value:t,index:n}):b(n))},k=function(e){return e===(w||0)},I=function(){if(c.model){for(var e=O.current.children,t=!1,n=0;n<e.length;n++){var r=e[n];l.DomHandler.getAttribute(r,"data-p-highlight")&&(h.current.style.width=l.DomHandler.getWidth(r)+"px",h.current.style.left=l.DomHandler.getOffset(r).left-l.DomHandler.getOffset(O.current).left+"px",t=!0)}t||(h.current.style.width="0px",h.current.style.left="0px")}};a.useMountEffect((function(){m||p(l.UniqueComponentId())})),u.useImperativeHandle(t,(function(){return{props:c,getElement:function(){return v.current}}})),u.useEffect((function(){I()}));var C=function(e,t,n){switch(e.code){case"ArrowRight":H(e.target),e.preventDefault();break;case"ArrowLeft":_(e.target),e.preventDefault();break;case"Home":A(e.target),e.preventDefault();break;case"End":T(e.target),e.preventDefault();break;case"Space":case"Enter":N(e,t,n),e.preventDefault();break;case"Tab":B()}},H=function(e){var t=R(e);t&&z(e,t)},_=function(e){var t=M(e);t&&z(e,t)},A=function(e){var t=L();t&&z(e,t)},T=function(e){var t=U();t&&z(e,t)},R=function e(t){var n=t.parentElement.nextElementSibling;return n?!0===l.DomHandler.getAttribute(n,"data-p-disabled")?e(n.children[0]):n.children[0]:null},M=function e(t){var n=t.parentElement.previousElementSibling;return n?!0===l.DomHandler.getAttribute(n,"data-p-disabled")?e(n.children[0]):n.children[0]:null},L=function(){var e=l.DomHandler.findSingle(O.current,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e.children[0]:null},U=function(){var e=l.DomHandler.find(O.current,'[data-pc-section="menuitem"][data-p-disabled="false"]');return e?e[e.length-1].children[0]:null},z=function(e,t){e.tabIndex="-1",t.tabIndex="0",t.focus()},B=function(){var e=l.DomHandler.findSingle(O.current,'[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]'),t=l.DomHandler.findSingle(O.current,'[data-pc-section="action"][tabindex="0"]');t!==e.children[0]&&(e&&(e.children[0].tabIndex="0"),t.tabIndex="-1")},J=function(e,t){if(!1===e.visible)return null;var n=e.className,r=e.style,a=e.disabled,o=e.icon,s=e.label,p=e.template,f=e.url,d=e.target,b=e.id||m+"_"+t,v=k(t),y=l.classNames("p-menuitem-icon",o),g=l.mergeProps({className:E("icon",{_icon:o})},D("icon",e,t)),h=l.IconUtils.getJSXIcon(o,x({},g),{props:c}),O=l.mergeProps({className:E("label")},D("label",e,t)),w=s&&u.createElement("span",O,s),P=l.mergeProps({href:f||"#",role:"menuitem","aria-label":s,tabIndex:v?"0":"-1",className:E("action"),target:d,onClick:function(n){return N(n,e,t)}},D("action",e,t)),S=u.createElement("a",P,h,w,u.createElement(i.Ripple,null));p&&(S=l.ObjectUtils.getJSXElement(p,e,{onClick:function(n){return N(n,e,t)},className:"p-menuitem-link",labelClassName:"p-menuitem-text",iconClassName:y,element:S,props:c,active:v,index:t,disabled:a}));var I=l.mergeProps({ref:j.current["tab_".concat(t)],id:b,key:b,onKeyDown:function(n){return C(n,e,t)},className:E("menuitem",{_className:n,active:v,disabled:a}),style:r,role:"presentation","data-p-highlight":v,"data-p-disabled":a||!1,"aria-disabled":a},D("menuitem",e,t));return u.createElement("li",I,S)};if(c.model){var X=c.model.map(J),q=l.mergeProps({ref:h,role:"none",className:E("inkbar")},S("inkbar")),K=l.mergeProps({ref:O,"aria-label":c.ariaLabel,"aria-labelledby":c.ariaLabelledBy,className:E("menu"),role:"menubar"},S("menu")),W=l.mergeProps({id:c.id,ref:v,className:E("root"),style:c.style},g.getOtherProps(c),S("root"));return u.createElement("div",W,u.createElement("ul",K,X,u.createElement("li",q)))}return null})));return O.displayName="TabMenu",e.TabMenu=O,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.ripple,primereact.utils);