primereact 10.2.1 → 10.3.1

package/accordion/accordion.cjs.js

@@ -185,7 +185,7 @@ var classes = {
     transition: 'p-toggleable-content'
   }
 };
-var styles = "\n@layer primereact {\n    .p-accordion-header-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        user-select: none;\n        position: relative;\n        text-decoration: none;\n    }\n    \n    .p-accordion-header-link:focus {\n        z-index: 1;\n    }\n    \n    .p-accordion-header-text {\n        line-height: 1;\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-accordion-header-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        user-select: none;\n        position: relative;\n        text-decoration: none;\n    }\n    \n    .p-accordion-header-link:focus {\n        z-index: 1;\n    }\n    \n    .p-accordion-header-text {\n        line-height: 1;\n        width: 100%;\n    }\n}\n";
 var AccordionBase = componentbase.ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Accordion',
@@ -280,14 +280,19 @@ var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
         disabled: getTabProp(tab, 'disabled')
       }
     };
-    return utils.mergeProps(ptm("accordiontab.".concat(key), {
+    return utils.mergeProps(ptm("accordion.".concat(key), {
+      tab: tabMetaData
+    }), ptm("tab.".concat(key), {
       accordiontab: tabMetaData
-    }), ptm("accordiontab.".concat(key), tabMetaData), ptmo(tab.props, key, tabMetaData));
+    }), ptm("tab.".concat(key), tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
   };
   var getTabProp = function getTabProp(tab, name) {
     return AccordionTabBase.getCProp(tab, name);
   };
   var onTabHeaderClick = function onTabHeaderClick(event, tab, index) {
+    changeActiveIndex(event, tab, index);
+  };
+  var changeActiveIndex = function changeActiveIndex(event, tab, index) {
     if (!getTabProp(tab, 'disabled')) {
       var selected = isSelected(index);
       var newActiveIndex = null;
@@ -315,8 +320,75 @@ var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     }
     event.preventDefault();
   };
+  var onTabHeaderKeyDown = function onTabHeaderKeyDown(event, tab, index) {
+    switch (event.code) {
+      case 'ArrowDown':
+        onTabArrowDownKey(event);
+        break;
+      case 'ArrowUp':
+        onTabArrowUpKey(event);
+        break;
+      case 'Home':
+        onTabHomeKey(event);
+        break;
+      case 'End':
+        onTabEndKey(event);
+        break;
+      case 'Enter':
+      case 'Space':
+        onTabEnterKey(event, tab, index);
+        break;
+    }
+  };
+  var onTabArrowDownKey = function onTabArrowDownKey(event) {
+    var nextHeaderAction = findNextHeaderAction(event.target.parentElement.parentElement);
+    nextHeaderAction ? changeFocusedTab(nextHeaderAction) : onTabHomeKey(event);
+    event.preventDefault();
+  };
+  var onTabArrowUpKey = function onTabArrowUpKey(event) {
+    var prevHeaderAction = findPrevHeaderAction(event.target.parentElement.parentElement);
+    prevHeaderAction ? changeFocusedTab(prevHeaderAction) : onTabEndKey(event);
+    event.preventDefault();
+  };
+  var onTabHomeKey = function onTabHomeKey(event) {
+    var firstHeaderAction = findFirstHeaderAction();
+    changeFocusedTab(firstHeaderAction);
+    event.preventDefault();
+  };
+  var onTabEndKey = function onTabEndKey(event) {
+    var lastHeaderAction = findLastHeaderAction();
+    changeFocusedTab(lastHeaderAction);
+    event.preventDefault();
+  };
+  var onTabEnterKey = function onTabEnterKey(event, tab, index) {
+    changeActiveIndex(event, tab, index);
+    event.preventDefault();
+  };
+  var findNextHeaderAction = function findNextHeaderAction(tabElement) {
+    var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
+    var headerElement = utils.DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
+    return headerElement ? utils.DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findNextHeaderAction(headerElement.parentElement) : utils.DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
+  };
+  var findPrevHeaderAction = function findPrevHeaderAction(tabElement) {
+    var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+    var headerElement = utils.DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
+    return headerElement ? utils.DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findPrevHeaderAction(headerElement.parentElement) : utils.DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
+  };
+  var findFirstHeaderAction = function findFirstHeaderAction() {
+    return findNextHeaderAction(elementRef.current.firstElementChild, true);
+  };
+  var findLastHeaderAction = function findLastHeaderAction() {
+    return findPrevHeaderAction(elementRef.current.lastElementChild, true);
+  };
+  var changeFocusedTab = function changeFocusedTab(element) {
+    if (element) {
+      utils.DomHandler.focus(element);
+    }
+  };
   var isSelected = function isSelected(index) {
-    return props.multiple ? activeIndex && activeIndex.some(function (i) {
+    return props.multiple && Array.isArray(activeIndex) ? activeIndex && activeIndex.some(function (i) {
       return i === index;
     }) : activeIndex === index;
   };
@@ -347,6 +419,7 @@ var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var tabCProps = AccordionTabBase.getCProps(tab);
     var header = getTabProp(tab, 'headerTemplate') ? utils.ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), tabCProps) : /*#__PURE__*/React__namespace.createElement("span", headerTitleProps, utils.ObjectUtils.getJSXElement(getTabProp(tab, 'header'), tabCProps));
     var headerIconProps = utils.mergeProps({
+      'aria-hidden': 'true',
       className: cx('tab.headericon')
     }, getTabPT(tab, 'headericon', index));
     var icon = selected ? props.collapseIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, headerIconProps) : props.expandIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, headerIconProps);
@@ -354,7 +427,6 @@ var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       props: props,
       selected: selected
     });
-    var label = selected ? api.ariaLabel('collapseLabel') : api.ariaLabel('expandLabel');
     var headerProps = utils.mergeProps({
       className: utils.classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('tab.header', {
         selected: selected,
@@ -364,17 +436,20 @@ var Accordion = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       style: style,
       'data-p-highlight': selected,
       'data-p-disabled': getTabProp(tab, 'disabled')
-    }, getTabPT(tab, 'tab.header', index));
+    }, getTabPT(tab, 'header', index));
     var headerActionProps = utils.mergeProps({
       id: headerId,
       href: '#' + ariaControls,
       className: cx('tab.headeraction'),
-      role: 'tab',
+      role: 'button',
       tabIndex: tabIndex,
       onClick: function onClick(e) {
         return onTabHeaderClick(e, tab, index);
       },
-      'aria-label': label,
+      onKeyDown: function onKeyDown(e) {
+        return onTabHeaderKeyDown(e, tab, index);
+      },
+      'aria-disabled': getTabProp(tab, 'disabled'),
       'aria-controls': ariaControls,
       'aria-expanded': selected
     }, getTabPT(tab, 'headeraction', index));

package/accordion/accordion.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/csstransition"),o=require("primereact/hooks"),a=require("primereact/icons/chevrondown"),i=require("primereact/icons/chevronright"),l=require("primereact/utils");function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=c(e);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u.apply(this,arguments)}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 p(e){if(Array.isArray(e))return d(e)}function b(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function f(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 m(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function 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 h(e,t){if("object"!==y(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==y(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function g(e){var t=h(e,"string");return"symbol"===y(t)?t:String(t)}function v(e){if(Array.isArray(e))return e}function O(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,l=[],c=!0,s=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=a.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){s=!0,o=e}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw o}}return l}}function P(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function j(e,t){return v(e)||O(e,t)||f(e,t)||P()}var C=n.ComponentBase.extend({defaultProps:{__TYPE:"Accordion",id:null,activeIndex:null,className:null,style:null,multiple:!1,expandIcon:null,collapseIcon:null,transitionOptions:null,onTabOpen:null,onTabClose:null,onTabChange:null,children:void 0},css:{classes:{root:"p-accordion p-component",tab:{root:function(e){return l.classNames("p-accordion-tab",{"p-accordion-tab-active":e.selected})},content:"p-accordion-content",header:function(e){return l.classNames("p-accordion-header",{"p-highlight":e.selected,"p-disabled":(0,e.getTabProp)(e.tab,"disabled")})},headeraction:"p-accordion-header-link",headericon:"p-accordion-toggle-icon",headertitle:"p-accordion-header-text",toggleablecontent:"p-toggleable-content",transition:"p-toggleable-content"}},styles:"\n@layer primereact {\n    .p-accordion-header-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        user-select: none;\n        position: relative;\n        text-decoration: none;\n    }\n    \n    .p-accordion-header-link:focus {\n        z-index: 1;\n    }\n    \n    .p-accordion-header-text {\n        line-height: 1;\n    }\n}\n"}}),x=n.ComponentBase.extend({defaultProps:{__TYPE:"AccordionTab",className:null,contentClassName:null,contentStyle:null,disabled:!1,header:null,headerClassName:null,headerStyle:null,headerTemplate:null,style:null,tabIndex:0,children:void 0},getCProp:function(e,t){return l.ObjectUtils.getComponentProp(e,t,x.defaultProps)},getCProps:function(e){return l.ObjectUtils.getComponentProps(e,x.defaultProps)},getCOtherProps:function(e){return l.ObjectUtils.getComponentDiffProps(e,x.defaultProps)}});function S(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function N(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?S(Object(n),!0).forEach((function(t){var r,o,a;r=e,a=n[t],(o=g(o=t))in r?Object.defineProperty(r,o,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[o]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):S(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var E=function(){},T=s.forwardRef((function(e,c){var d=s.useContext(t.PrimeReactContext),y=C.getProps(e,d),h=j(s.useState(y.id),2),g=h[0],v=h[1],O=j(s.useState(y.activeIndex),2),P=O[0],S=O[1],E=s.useRef(null),T=y.onTabChange?y.activeIndex:P,I=s.Children.count(y.children),w={props:y,state:{id:g,activeIndex:P}},_=C.setMetaData(N({},w)),A=_.ptm,U=_.ptmo,q=_.cx;n.useHandleStyle(C.css.styles,_.isUnstyled,{name:"accordion"});var D=function(e,t,n){x.getCProps(e);var r={parent:w,context:{index:n,count:I,first:0===n,last:n===I-1,selected:M(n),disabled:k(e,"disabled")}};return l.mergeProps(A("accordiontab.".concat(t),{accordiontab:r}),A("accordiontab.".concat(t),r),U(e.props,t,r))},k=function(e,t){return x.getCProp(e,t)},R=function(e,t,n){if(!k(t,"disabled")){var r=M(n),o=null;if(y.multiple){var a=T||[];o=r?a.filter((function(e){return e!==n})):[].concat(p(l=a)||b(l)||f(l)||m(),[n])}else o=r?null:n;var i=r?y.onTabClose:y.onTabOpen;i&&i({originalEvent:e,index:n}),y.onTabChange?y.onTabChange({originalEvent:e,index:o}):S(o)}var l;e.preventDefault()},M=function(e){return y.multiple?T&&T.some((function(t){return t===e})):T===e};if(s.useImperativeHandle(c,(function(){return{props:y,getElement:function(){return E.current}}})),o.useMountEffect((function(){g||v(l.UniqueComponentId())})),!g)return null;var J=function(e,n,r){var o=N(N({},k(e,"style")||{}),k(e,"headerStyle")||{}),c=g+"_header_"+r,u=g+"_content_"+r,d=k(e,"disabled")?-1:k(e,"tabIndex"),p=l.mergeProps({className:q("tab.headertitle")},D(e,"headertitle",r)),b=x.getCProps(e),f=k(e,"headerTemplate")?l.ObjectUtils.getJSXElement(k(e,"headerTemplate"),b):s.createElement("span",p,l.ObjectUtils.getJSXElement(k(e,"header"),b)),m=l.mergeProps({className:q("tab.headericon")},D(e,"headericon",r)),h=l.IconUtils.getJSXIcon(n?y.collapseIcon||s.createElement(a.ChevronDownIcon,m):y.expandIcon||s.createElement(i.ChevronRightIcon,m),N({},m),{props:y,selected:n}),v=t.ariaLabel(n?"collapseLabel":"expandLabel"),O=l.mergeProps({className:l.classNames(k(e,"headerClassName"),k(e,"className"),q("tab.header",{selected:n,getTabProp:k,tab:e})),style:o,"data-p-highlight":n,"data-p-disabled":k(e,"disabled")},D(e,"tab.header",r)),P=l.mergeProps({id:c,href:"#"+u,className:q("tab.headeraction"),role:"tab",tabIndex:d,onClick:function(t){return R(t,e,r)},"aria-label":v,"aria-controls":u,"aria-expanded":n},D(e,"headeraction",r));return s.createElement("div",O,s.createElement("a",P,h,f))},L=function(e,t,n){var o=N(N({},k(e,"style")||{}),k(e,"contentStyle")||{}),a=g+"_content_"+n,i=g+"_header_"+n,c=s.createRef(),d=l.mergeProps({id:a,ref:c,className:l.classNames(k(e,"contentClassName"),k(e,"className"),q("tab.toggleablecontent")),style:o,role:"region","aria-labelledby":i},D(e,"toggleablecontent",n)),p=l.mergeProps({className:q("tab.content")},D(e,"content",n)),b=l.mergeProps({classNames:q("tab.transition"),timeout:{enter:1e3,exit:450},in:t,unmountOnExit:!0,options:y.transitionOptions},D(e,"transition",n));return s.createElement(r.CSSTransition,u({nodeRef:c},b),s.createElement("div",d,s.createElement("div",p,k(e,"children"))))},X=s.Children.map(y.children,(function(e,t){if(l.ObjectUtils.isValidChild(e,"AccordionTab")){var n=g+"_"+t,r=M(t),o=J(e,r,t),a=L(e,r,t),i=l.mergeProps({key:n,className:q("tab.root",{selected:r})},x.getCOtherProps(e),D(e,"root",t));return s.createElement("div",i,o,a)}return null})),z=l.mergeProps({className:l.classNames(y.className,q("root")),style:y.style},C.getOtherProps(y),A("root"));return s.createElement("div",u({id:g,ref:E},z),X)}));E.displayName="AccordionTab",T.displayName="Accordion",exports.Accordion=T,exports.AccordionTab=E;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("primereact/api"),n=require("primereact/componentbase"),r=require("primereact/csstransition"),a=require("primereact/hooks"),o=require("primereact/icons/chevrondown"),i=require("primereact/icons/chevronright"),l=require("primereact/utils");function c(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var s=c(e);function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u.apply(this,arguments)}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 p(e){if(Array.isArray(e))return d(e)}function f(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function m(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 b(){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 h(e){return h="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},h(e)}function g(e,t){if("object"!==h(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==h(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function y(e){var t=g(e,"string");return"symbol"===h(t)?t:String(t)}function v(e){if(Array.isArray(e))return e}function O(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,l=[],c=!0,s=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){s=!0,a=e}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw a}}return l}}function P(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function E(e,t){return v(e)||O(e,t)||m(e,t)||P()}var S=n.ComponentBase.extend({defaultProps:{__TYPE:"Accordion",id:null,activeIndex:null,className:null,style:null,multiple:!1,expandIcon:null,collapseIcon:null,transitionOptions:null,onTabOpen:null,onTabClose:null,onTabChange:null,children:void 0},css:{classes:{root:"p-accordion p-component",tab:{root:function(e){return l.classNames("p-accordion-tab",{"p-accordion-tab-active":e.selected})},content:"p-accordion-content",header:function(e){return l.classNames("p-accordion-header",{"p-highlight":e.selected,"p-disabled":(0,e.getTabProp)(e.tab,"disabled")})},headeraction:"p-accordion-header-link",headericon:"p-accordion-toggle-icon",headertitle:"p-accordion-header-text",toggleablecontent:"p-toggleable-content",transition:"p-toggleable-content"}},styles:"\n@layer primereact {\n    .p-accordion-header-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        user-select: none;\n        position: relative;\n        text-decoration: none;\n    }\n    \n    .p-accordion-header-link:focus {\n        z-index: 1;\n    }\n    \n    .p-accordion-header-text {\n        line-height: 1;\n        width: 100%;\n    }\n}\n"}}),j=n.ComponentBase.extend({defaultProps:{__TYPE:"AccordionTab",className:null,contentClassName:null,contentStyle:null,disabled:!1,header:null,headerClassName:null,headerStyle:null,headerTemplate:null,style:null,tabIndex:0,children:void 0},getCProp:function(e,t){return l.ObjectUtils.getComponentProp(e,t,j.defaultProps)},getCProps:function(e){return l.ObjectUtils.getComponentProps(e,j.defaultProps)},getCOtherProps:function(e){return l.ObjectUtils.getComponentDiffProps(e,j.defaultProps)}});function C(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?C(Object(n),!0).forEach((function(t){var r,a,o;r=e,o=n[t],(a=y(a=t))in r?Object.defineProperty(r,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):r[a]=o})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):C(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var w=function(){},N=s.forwardRef((function(e,c){var d=s.useContext(t.PrimeReactContext),h=S.getProps(e,d),g=E(s.useState(h.id),2),y=g[0],v=g[1],O=E(s.useState(h.activeIndex),2),P=O[0],C=O[1],w=s.useRef(null),N=h.onTabChange?h.activeIndex:P,D=s.Children.count(h.children),T={props:h,state:{id:y,activeIndex:P}},A=S.setMetaData(x({},T)),I=A.ptm,_=A.ptmo,k=A.cx;n.useHandleStyle(S.css.styles,A.isUnstyled,{name:"accordion"});var U=function(e,t,n){j.getCProps(e);var r={parent:T,context:{index:n,count:D,first:0===n,last:n===D-1,selected:L(n),disabled:H(e,"disabled")}};return l.mergeProps(I("accordion.".concat(t),{tab:r}),I("tab.".concat(t),{accordiontab:r}),I("tab.".concat(t),r),_(H(e,"pt"),t,r))},H=function(e,t){return j.getCProp(e,t)},q=function(e,t,n){R(e,t,n)},R=function(e,t,n){if(!H(t,"disabled")){var r=L(n),a=null;if(h.multiple){var o=N||[];a=r?o.filter((function(e){return e!==n})):[].concat(p(l=o)||f(l)||m(l)||b(),[n])}else a=r?null:n;var i=r?h.onTabClose:h.onTabOpen;i&&i({originalEvent:e,index:n}),h.onTabChange?h.onTabChange({originalEvent:e,index:a}):C(a)}var l;e.preventDefault()},M=function(e,t,n){switch(e.code){case"ArrowDown":J(e);break;case"ArrowUp":X(e);break;case"Home":z(e);break;case"End":B(e);break;case"Enter":case"Space":Y(e,t,n)}},J=function(e){var t=K(e.target.parentElement.parentElement);t?G(t):z(e),e.preventDefault()},X=function(e){var t=V(e.target.parentElement.parentElement);t?G(t):B(e),e.preventDefault()},z=function(e){var t=$();G(t),e.preventDefault()},B=function(e){var t=F();G(t),e.preventDefault()},Y=function(e,t,n){R(e,t,n),e.preventDefault()},K=function e(t){var n=l.DomHandler.findSingle(arguments.length>1&&void 0!==arguments[1]&&arguments[1]?t:t.nextElementSibling,'[data-pc-section="header"]');return n?l.DomHandler.getAttribute(n,"data-p-disabled")?e(n.parentElement):l.DomHandler.findSingle(n,'[data-pc-section="headeraction"]'):null},V=function e(t){var n=l.DomHandler.findSingle(arguments.length>1&&void 0!==arguments[1]&&arguments[1]?t:t.previousElementSibling,'[data-pc-section="header"]');return n?l.DomHandler.getAttribute(n,"data-p-disabled")?e(n.parentElement):l.DomHandler.findSingle(n,'[data-pc-section="headeraction"]'):null},$=function(){return K(w.current.firstElementChild,!0)},F=function(){return V(w.current.lastElementChild,!0)},G=function(e){e&&l.DomHandler.focus(e)},L=function(e){return h.multiple&&Array.isArray(N)?N&&N.some((function(t){return t===e})):N===e};if(s.useImperativeHandle(c,(function(){return{props:h,getElement:function(){return w.current}}})),a.useMountEffect((function(){y||v(l.UniqueComponentId())})),!y)return null;var Q=function(e,t,n){var r=x(x({},H(e,"style")||{}),H(e,"headerStyle")||{}),a=y+"_header_"+n,c=y+"_content_"+n,u=H(e,"disabled")?-1:H(e,"tabIndex"),d=l.mergeProps({className:k("tab.headertitle")},U(e,"headertitle",n)),p=j.getCProps(e),f=H(e,"headerTemplate")?l.ObjectUtils.getJSXElement(H(e,"headerTemplate"),p):s.createElement("span",d,l.ObjectUtils.getJSXElement(H(e,"header"),p)),m=l.mergeProps({"aria-hidden":"true",className:k("tab.headericon")},U(e,"headericon",n)),b=l.IconUtils.getJSXIcon(t?h.collapseIcon||s.createElement(o.ChevronDownIcon,m):h.expandIcon||s.createElement(i.ChevronRightIcon,m),x({},m),{props:h,selected:t}),g=l.mergeProps({className:l.classNames(H(e,"headerClassName"),H(e,"className"),k("tab.header",{selected:t,getTabProp:H,tab:e})),style:r,"data-p-highlight":t,"data-p-disabled":H(e,"disabled")},U(e,"header",n)),v=l.mergeProps({id:a,href:"#"+c,className:k("tab.headeraction"),role:"button",tabIndex:u,onClick:function(t){return q(t,e,n)},onKeyDown:function(t){return M(t,e,n)},"aria-disabled":H(e,"disabled"),"aria-controls":c,"aria-expanded":t},U(e,"headeraction",n));return s.createElement("div",g,s.createElement("a",v,b,f))},W=function(e,t,n){var a=x(x({},H(e,"style")||{}),H(e,"contentStyle")||{}),o=y+"_content_"+n,i=y+"_header_"+n,c=s.createRef(),d=l.mergeProps({id:o,ref:c,className:l.classNames(H(e,"contentClassName"),H(e,"className"),k("tab.toggleablecontent")),style:a,role:"region","aria-labelledby":i},U(e,"toggleablecontent",n)),p=l.mergeProps({className:k("tab.content")},U(e,"content",n)),f=l.mergeProps({classNames:k("tab.transition"),timeout:{enter:1e3,exit:450},in:t,unmountOnExit:!0,options:h.transitionOptions},U(e,"transition",n));return s.createElement(r.CSSTransition,u({nodeRef:c},f),s.createElement("div",d,s.createElement("div",p,H(e,"children"))))},Z=s.Children.map(h.children,(function(e,t){if(l.ObjectUtils.isValidChild(e,"AccordionTab")){var n=y+"_"+t,r=L(t),a=Q(e,r,t),o=W(e,r,t),i=l.mergeProps({key:n,className:k("tab.root",{selected:r})},j.getCOtherProps(e),U(e,"root",t));return s.createElement("div",i,a,o)}return null})),ee=l.mergeProps({className:l.classNames(h.className,k("root")),style:h.style},S.getOtherProps(h),I("root"));return s.createElement("div",u({id:y,ref:w},ee),Z)}));w.displayName="AccordionTab",N.displayName="Accordion",exports.Accordion=N,exports.AccordionTab=w;

package/accordion/accordion.d.ts

@@ -28,6 +28,7 @@ export declare type AccordionPassThroughTransitionType = ReactCSSTransitionProps
 export interface AccordionTabPassThroughMethodOptions {
     props: AccordionTabProps;
     parent: AccordionPassThroughMethodOptions;
+    context: AccordionContext;
 }
 
 /**
@@ -74,6 +75,40 @@ export interface AccordionTabPassThroughOptions {
     transition?: AccordionPassThroughTransitionType;
 }
 
+/**
+ * Defines current inline context in Accordion component.
+ */
+export interface AccordionContext {
+    /**
+     * Opened tab index.
+     */
+    index: number;
+    /**
+     * Total number of tabs
+     */
+    count: number;
+    /**
+     * Is this the first tab?
+     * @defaultValue false
+     */
+    first: boolean;
+    /**
+     * Is this the last tab?
+     * @defaultValue false
+     */
+    last: boolean;
+    /**
+     * Is this tab currently selected.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Is this tab currently disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in AccordionTab component.
  * @group Properties

package/accordion/accordion.esm.js

@@ -1,12 +1,12 @@
 'use client';
 import * as React from 'react';
-import { PrimeReactContext, ariaLabel } from 'primereact/api';
+import { PrimeReactContext } from 'primereact/api';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
 import { CSSTransition } from 'primereact/csstransition';
 import { useMountEffect } from 'primereact/hooks';
 import { ChevronDownIcon } from 'primereact/icons/chevrondown';
 import { ChevronRightIcon } from 'primereact/icons/chevronright';
-import { ObjectUtils, classNames, UniqueComponentId, mergeProps, IconUtils } from 'primereact/utils';
+import { ObjectUtils, classNames, UniqueComponentId, mergeProps, IconUtils, DomHandler } from 'primereact/utils';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -161,7 +161,7 @@ var classes = {
     transition: 'p-toggleable-content'
   }
 };
-var styles = "\n@layer primereact {\n    .p-accordion-header-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        user-select: none;\n        position: relative;\n        text-decoration: none;\n    }\n    \n    .p-accordion-header-link:focus {\n        z-index: 1;\n    }\n    \n    .p-accordion-header-text {\n        line-height: 1;\n    }\n}\n";
+var styles = "\n@layer primereact {\n    .p-accordion-header-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        user-select: none;\n        position: relative;\n        text-decoration: none;\n    }\n    \n    .p-accordion-header-link:focus {\n        z-index: 1;\n    }\n    \n    .p-accordion-header-text {\n        line-height: 1;\n        width: 100%;\n    }\n}\n";
 var AccordionBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'Accordion',
@@ -256,14 +256,19 @@ var Accordion = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
         disabled: getTabProp(tab, 'disabled')
       }
     };
-    return mergeProps(ptm("accordiontab.".concat(key), {
+    return mergeProps(ptm("accordion.".concat(key), {
+      tab: tabMetaData
+    }), ptm("tab.".concat(key), {
       accordiontab: tabMetaData
-    }), ptm("accordiontab.".concat(key), tabMetaData), ptmo(tab.props, key, tabMetaData));
+    }), ptm("tab.".concat(key), tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
   };
   var getTabProp = function getTabProp(tab, name) {
     return AccordionTabBase.getCProp(tab, name);
   };
   var onTabHeaderClick = function onTabHeaderClick(event, tab, index) {
+    changeActiveIndex(event, tab, index);
+  };
+  var changeActiveIndex = function changeActiveIndex(event, tab, index) {
     if (!getTabProp(tab, 'disabled')) {
       var selected = isSelected(index);
       var newActiveIndex = null;
@@ -291,8 +296,75 @@ var Accordion = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
     event.preventDefault();
   };
+  var onTabHeaderKeyDown = function onTabHeaderKeyDown(event, tab, index) {
+    switch (event.code) {
+      case 'ArrowDown':
+        onTabArrowDownKey(event);
+        break;
+      case 'ArrowUp':
+        onTabArrowUpKey(event);
+        break;
+      case 'Home':
+        onTabHomeKey(event);
+        break;
+      case 'End':
+        onTabEndKey(event);
+        break;
+      case 'Enter':
+      case 'Space':
+        onTabEnterKey(event, tab, index);
+        break;
+    }
+  };
+  var onTabArrowDownKey = function onTabArrowDownKey(event) {
+    var nextHeaderAction = findNextHeaderAction(event.target.parentElement.parentElement);
+    nextHeaderAction ? changeFocusedTab(nextHeaderAction) : onTabHomeKey(event);
+    event.preventDefault();
+  };
+  var onTabArrowUpKey = function onTabArrowUpKey(event) {
+    var prevHeaderAction = findPrevHeaderAction(event.target.parentElement.parentElement);
+    prevHeaderAction ? changeFocusedTab(prevHeaderAction) : onTabEndKey(event);
+    event.preventDefault();
+  };
+  var onTabHomeKey = function onTabHomeKey(event) {
+    var firstHeaderAction = findFirstHeaderAction();
+    changeFocusedTab(firstHeaderAction);
+    event.preventDefault();
+  };
+  var onTabEndKey = function onTabEndKey(event) {
+    var lastHeaderAction = findLastHeaderAction();
+    changeFocusedTab(lastHeaderAction);
+    event.preventDefault();
+  };
+  var onTabEnterKey = function onTabEnterKey(event, tab, index) {
+    changeActiveIndex(event, tab, index);
+    event.preventDefault();
+  };
+  var findNextHeaderAction = function findNextHeaderAction(tabElement) {
+    var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
+    var headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
+    return headerElement ? DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
+  };
+  var findPrevHeaderAction = function findPrevHeaderAction(tabElement) {
+    var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+    var headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
+    return headerElement ? DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
+  };
+  var findFirstHeaderAction = function findFirstHeaderAction() {
+    return findNextHeaderAction(elementRef.current.firstElementChild, true);
+  };
+  var findLastHeaderAction = function findLastHeaderAction() {
+    return findPrevHeaderAction(elementRef.current.lastElementChild, true);
+  };
+  var changeFocusedTab = function changeFocusedTab(element) {
+    if (element) {
+      DomHandler.focus(element);
+    }
+  };
   var isSelected = function isSelected(index) {
-    return props.multiple ? activeIndex && activeIndex.some(function (i) {
+    return props.multiple && Array.isArray(activeIndex) ? activeIndex && activeIndex.some(function (i) {
       return i === index;
     }) : activeIndex === index;
   };
@@ -323,6 +395,7 @@ var Accordion = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     var tabCProps = AccordionTabBase.getCProps(tab);
     var header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), tabCProps) : /*#__PURE__*/React.createElement("span", headerTitleProps, ObjectUtils.getJSXElement(getTabProp(tab, 'header'), tabCProps));
     var headerIconProps = mergeProps({
+      'aria-hidden': 'true',
       className: cx('tab.headericon')
     }, getTabPT(tab, 'headericon', index));
     var icon = selected ? props.collapseIcon || /*#__PURE__*/React.createElement(ChevronDownIcon, headerIconProps) : props.expandIcon || /*#__PURE__*/React.createElement(ChevronRightIcon, headerIconProps);
@@ -330,7 +403,6 @@ var Accordion = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       props: props,
       selected: selected
     });
-    var label = selected ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
     var headerProps = mergeProps({
       className: classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('tab.header', {
         selected: selected,
@@ -340,17 +412,20 @@ var Accordion = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       style: style,
       'data-p-highlight': selected,
       'data-p-disabled': getTabProp(tab, 'disabled')
-    }, getTabPT(tab, 'tab.header', index));
+    }, getTabPT(tab, 'header', index));
     var headerActionProps = mergeProps({
       id: headerId,
       href: '#' + ariaControls,
       className: cx('tab.headeraction'),
-      role: 'tab',
+      role: 'button',
       tabIndex: tabIndex,
       onClick: function onClick(e) {
         return onTabHeaderClick(e, tab, index);
       },
-      'aria-label': label,
+      onKeyDown: function onKeyDown(e) {
+        return onTabHeaderKeyDown(e, tab, index);
+      },
+      'aria-disabled': getTabProp(tab, 'disabled'),
       'aria-controls': ariaControls,
       'aria-expanded': selected
     }, getTabPT(tab, 'headeraction', index));

package/accordion/accordion.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{PrimeReactContext as t,ariaLabel as n}from"primereact/api";import{ComponentBase as r,useHandleStyle as o}from"primereact/componentbase";import{CSSTransition as a}from"primereact/csstransition";import{useMountEffect as i}from"primereact/hooks";import{ChevronDownIcon as l}from"primereact/icons/chevrondown";import{ChevronRightIcon as c}from"primereact/icons/chevronright";import{ObjectUtils as s,classNames as u,UniqueComponentId as d,mergeProps as p,IconUtils as f}from"primereact/utils";function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},m.apply(this,arguments)}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 y(e){if(Array.isArray(e))return b(e)}function h(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function g(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 v(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function O(e){return O="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},O(e)}function P(e,t){if("object"!==O(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==O(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function x(e){var t=P(e,"string");return"symbol"===O(t)?t:String(t)}function S(e){if(Array.isArray(e))return e}function C(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,l=[],c=!0,s=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=a.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){s=!0,o=e}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(s)throw o}}return l}}function j(){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 E(e,t){return S(e)||C(e,t)||g(e,t)||j()}var N=r.extend({defaultProps:{__TYPE:"Accordion",id:null,activeIndex:null,className:null,style:null,multiple:!1,expandIcon:null,collapseIcon:null,transitionOptions:null,onTabOpen:null,onTabClose:null,onTabChange:null,children:void 0},css:{classes:{root:"p-accordion p-component",tab:{root:function(e){return u("p-accordion-tab",{"p-accordion-tab-active":e.selected})},content:"p-accordion-content",header:function(e){return u("p-accordion-header",{"p-highlight":e.selected,"p-disabled":(0,e.getTabProp)(e.tab,"disabled")})},headeraction:"p-accordion-header-link",headericon:"p-accordion-toggle-icon",headertitle:"p-accordion-header-text",toggleablecontent:"p-toggleable-content",transition:"p-toggleable-content"}},styles:"\n@layer primereact {\n    .p-accordion-header-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        user-select: none;\n        position: relative;\n        text-decoration: none;\n    }\n    \n    .p-accordion-header-link:focus {\n        z-index: 1;\n    }\n    \n    .p-accordion-header-text {\n        line-height: 1;\n    }\n}\n"}}),T=r.extend({defaultProps:{__TYPE:"AccordionTab",className:null,contentClassName:null,contentStyle:null,disabled:!1,header:null,headerClassName:null,headerStyle:null,headerTemplate:null,style:null,tabIndex:0,children:void 0},getCProp:function(e,t){return s.getComponentProp(e,t,T.defaultProps)},getCProps:function(e){return s.getComponentProps(e,T.defaultProps)},getCOtherProps:function(e){return s.getComponentDiffProps(e,T.defaultProps)}});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 I(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,o,a;r=e,a=n[t],(o=x(o=t))in r?Object.defineProperty(r,o,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[o]=a})):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 A=function(){},_=e.forwardRef((function(r,b){var O=e.useContext(t),P=N.getProps(r,O),x=E(e.useState(P.id),2),S=x[0],C=x[1],j=E(e.useState(P.activeIndex),2),w=j[0],A=j[1],_=e.useRef(null),k=P.onTabChange?P.activeIndex:w,D=e.Children.count(P.children),R={props:P,state:{id:S,activeIndex:w}},J=N.setMetaData(I({},R)),X=J.ptm,L=J.ptmo,M=J.cx;o(N.css.styles,J.isUnstyled,{name:"accordion"});var U=function(e,t,n){T.getCProps(e);var r={parent:R,context:{index:n,count:D,first:0===n,last:n===D-1,selected:H(n),disabled:Y(e,"disabled")}};return p(X("accordiontab.".concat(t),{accordiontab:r}),X("accordiontab.".concat(t),r),L(e.props,t,r))},Y=function(e,t){return T.getCProp(e,t)},z=function(e,t,n){if(!Y(t,"disabled")){var r=H(n),o=null;if(P.multiple){var a=k||[];o=r?a.filter((function(e){return e!==n})):[].concat(y(l=a)||h(l)||g(l)||v(),[n])}else o=r?null:n;var i=r?P.onTabClose:P.onTabOpen;i&&i({originalEvent:e,index:n}),P.onTabChange?P.onTabChange({originalEvent:e,index:o}):A(o)}var l;e.preventDefault()},H=function(e){return P.multiple?k&&k.some((function(t){return t===e})):k===e};if(e.useImperativeHandle(b,(function(){return{props:P,getElement:function(){return _.current}}})),i((function(){S||C(d())})),!S)return null;var V=function(t,r,o){var a=I(I({},Y(t,"style")||{}),Y(t,"headerStyle")||{}),i=S+"_header_"+o,d=S+"_content_"+o,m=Y(t,"disabled")?-1:Y(t,"tabIndex"),b=p({className:M("tab.headertitle")},U(t,"headertitle",o)),y=T.getCProps(t),h=Y(t,"headerTemplate")?s.getJSXElement(Y(t,"headerTemplate"),y):e.createElement("span",b,s.getJSXElement(Y(t,"header"),y)),g=p({className:M("tab.headericon")},U(t,"headericon",o)),v=f.getJSXIcon(r?P.collapseIcon||e.createElement(l,g):P.expandIcon||e.createElement(c,g),I({},g),{props:P,selected:r}),O=n(r?"collapseLabel":"expandLabel"),x=p({className:u(Y(t,"headerClassName"),Y(t,"className"),M("tab.header",{selected:r,getTabProp:Y,tab:t})),style:a,"data-p-highlight":r,"data-p-disabled":Y(t,"disabled")},U(t,"tab.header",o)),C=p({id:i,href:"#"+d,className:M("tab.headeraction"),role:"tab",tabIndex:m,onClick:function(e){return z(e,t,o)},"aria-label":O,"aria-controls":d,"aria-expanded":r},U(t,"headeraction",o));return e.createElement("div",x,e.createElement("a",C,v,h))},$=function(t,n,r){var o=I(I({},Y(t,"style")||{}),Y(t,"contentStyle")||{}),i=S+"_content_"+r,l=S+"_header_"+r,c=e.createRef(),s=p({id:i,ref:c,className:u(Y(t,"contentClassName"),Y(t,"className"),M("tab.toggleablecontent")),style:o,role:"region","aria-labelledby":l},U(t,"toggleablecontent",r)),d=p({className:M("tab.content")},U(t,"content",r)),f=p({classNames:M("tab.transition"),timeout:{enter:1e3,exit:450},in:n,unmountOnExit:!0,options:P.transitionOptions},U(t,"transition",r));return e.createElement(a,m({nodeRef:c},f),e.createElement("div",s,e.createElement("div",d,Y(t,"children"))))},q=e.Children.map(P.children,(function(t,n){if(s.isValidChild(t,"AccordionTab")){var r=S+"_"+n,o=H(n),a=V(t,o,n),i=$(t,o,n),l=p({key:r,className:M("tab.root",{selected:o})},T.getCOtherProps(t),U(t,"root",n));return e.createElement("div",l,a,i)}return null})),B=p({className:u(P.className,M("root")),style:P.style},N.getOtherProps(P),X("root"));return e.createElement("div",m({id:S,ref:_},B),q)}));A.displayName="AccordionTab",_.displayName="Accordion";export{_ as Accordion,A as AccordionTab};
+import*as e from"react";import{PrimeReactContext as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as r}from"primereact/componentbase";import{CSSTransition as a}from"primereact/csstransition";import{useMountEffect as o}from"primereact/hooks";import{ChevronDownIcon as i}from"primereact/icons/chevrondown";import{ChevronRightIcon as l}from"primereact/icons/chevronright";import{ObjectUtils as c,classNames as u,UniqueComponentId as s,mergeProps as d,IconUtils as p,DomHandler as f}from"primereact/utils";function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},m.apply(this,arguments)}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 h(e){if(Array.isArray(e))return b(e)}function y(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function g(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 v(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function E(e){return E="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(e)}function O(e,t){if("object"!==E(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==E(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function S(e){var t=O(e,"string");return"symbol"===E(t)?t:String(t)}function P(e){if(Array.isArray(e))return e}function x(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,o,i,l=[],c=!0,u=!1;try{if(o=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=o.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){u=!0,a=e}finally{try{if(!c&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw a}}return l}}function C(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function w(e,t){return P(e)||x(e,t)||g(e,t)||C()}var j=n.extend({defaultProps:{__TYPE:"Accordion",id:null,activeIndex:null,className:null,style:null,multiple:!1,expandIcon:null,collapseIcon:null,transitionOptions:null,onTabOpen:null,onTabClose:null,onTabChange:null,children:void 0},css:{classes:{root:"p-accordion p-component",tab:{root:function(e){return u("p-accordion-tab",{"p-accordion-tab-active":e.selected})},content:"p-accordion-content",header:function(e){return u("p-accordion-header",{"p-highlight":e.selected,"p-disabled":(0,e.getTabProp)(e.tab,"disabled")})},headeraction:"p-accordion-header-link",headericon:"p-accordion-toggle-icon",headertitle:"p-accordion-header-text",toggleablecontent:"p-toggleable-content",transition:"p-toggleable-content"}},styles:"\n@layer primereact {\n    .p-accordion-header-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        user-select: none;\n        position: relative;\n        text-decoration: none;\n    }\n    \n    .p-accordion-header-link:focus {\n        z-index: 1;\n    }\n    \n    .p-accordion-header-text {\n        line-height: 1;\n        width: 100%;\n    }\n}\n"}}),N=n.extend({defaultProps:{__TYPE:"AccordionTab",className:null,contentClassName:null,contentStyle:null,disabled:!1,header:null,headerClassName:null,headerStyle:null,headerTemplate:null,style:null,tabIndex:0,children:void 0},getCProp:function(e,t){return c.getComponentProp(e,t,N.defaultProps)},getCProps:function(e){return c.getComponentProps(e,N.defaultProps)},getCOtherProps:function(e){return c.getComponentDiffProps(e,N.defaultProps)}});function T(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 A(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?T(Object(n),!0).forEach((function(t){var r,a,o;r=e,o=n[t],(a=S(a=t))in r?Object.defineProperty(r,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):r[a]=o})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):T(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var I=function(){},D=e.forwardRef((function(n,b){var E=e.useContext(t),O=j.getProps(n,E),S=w(e.useState(O.id),2),P=S[0],x=S[1],C=w(e.useState(O.activeIndex),2),T=C[0],I=C[1],D=e.useRef(null),_=O.onTabChange?O.activeIndex:T,k=e.Children.count(O.children),R={props:O,state:{id:P,activeIndex:T}},J=j.setMetaData(A({},R)),U=J.ptm,X=J.ptmo,H=J.cx;r(j.css.styles,J.isUnstyled,{name:"accordion"});var M=function(e,t,n){N.getCProps(e);var r={parent:R,context:{index:n,count:k,first:0===n,last:n===k-1,selected:te(n),disabled:Y(e,"disabled")}};return d(U("accordion.".concat(t),{tab:r}),U("tab.".concat(t),{accordiontab:r}),U("tab.".concat(t),r),X(Y(e,"pt"),t,r))},Y=function(e,t){return N.getCProp(e,t)},z=function(e,t,n){K(e,t,n)},K=function(e,t,n){if(!Y(t,"disabled")){var r=te(n),a=null;if(O.multiple){var o=_||[];a=r?o.filter((function(e){return e!==n})):[].concat(h(l=o)||y(l)||g(l)||v(),[n])}else a=r?null:n;var i=r?O.onTabClose:O.onTabOpen;i&&i({originalEvent:e,index:n}),O.onTabChange?O.onTabChange({originalEvent:e,index:a}):I(a)}var l;e.preventDefault()},V=function(e,t,n){switch(e.code){case"ArrowDown":$(e);break;case"ArrowUp":q(e);break;case"Home":B(e);break;case"End":F(e);break;case"Enter":case"Space":G(e,t,n)}},$=function(e){var t=L(e.target.parentElement.parentElement);t?ee(t):B(e),e.preventDefault()},q=function(e){var t=Q(e.target.parentElement.parentElement);t?ee(t):F(e),e.preventDefault()},B=function(e){var t=W();ee(t),e.preventDefault()},F=function(e){var t=Z();ee(t),e.preventDefault()},G=function(e,t,n){K(e,t,n),e.preventDefault()},L=function e(t){var n=f.findSingle(arguments.length>1&&void 0!==arguments[1]&&arguments[1]?t:t.nextElementSibling,'[data-pc-section="header"]');return n?f.getAttribute(n,"data-p-disabled")?e(n.parentElement):f.findSingle(n,'[data-pc-section="headeraction"]'):null},Q=function e(t){var n=f.findSingle(arguments.length>1&&void 0!==arguments[1]&&arguments[1]?t:t.previousElementSibling,'[data-pc-section="header"]');return n?f.getAttribute(n,"data-p-disabled")?e(n.parentElement):f.findSingle(n,'[data-pc-section="headeraction"]'):null},W=function(){return L(D.current.firstElementChild,!0)},Z=function(){return Q(D.current.lastElementChild,!0)},ee=function(e){e&&f.focus(e)},te=function(e){return O.multiple&&Array.isArray(_)?_&&_.some((function(t){return t===e})):_===e};if(e.useImperativeHandle(b,(function(){return{props:O,getElement:function(){return D.current}}})),o((function(){P||x(s())})),!P)return null;var ne=function(t,n,r){var a=A(A({},Y(t,"style")||{}),Y(t,"headerStyle")||{}),o=P+"_header_"+r,s=P+"_content_"+r,f=Y(t,"disabled")?-1:Y(t,"tabIndex"),m=d({className:H("tab.headertitle")},M(t,"headertitle",r)),b=N.getCProps(t),h=Y(t,"headerTemplate")?c.getJSXElement(Y(t,"headerTemplate"),b):e.createElement("span",m,c.getJSXElement(Y(t,"header"),b)),y=d({"aria-hidden":"true",className:H("tab.headericon")},M(t,"headericon",r)),g=p.getJSXIcon(n?O.collapseIcon||e.createElement(i,y):O.expandIcon||e.createElement(l,y),A({},y),{props:O,selected:n}),v=d({className:u(Y(t,"headerClassName"),Y(t,"className"),H("tab.header",{selected:n,getTabProp:Y,tab:t})),style:a,"data-p-highlight":n,"data-p-disabled":Y(t,"disabled")},M(t,"header",r)),E=d({id:o,href:"#"+s,className:H("tab.headeraction"),role:"button",tabIndex:f,onClick:function(e){return z(e,t,r)},onKeyDown:function(e){return V(e,t,r)},"aria-disabled":Y(t,"disabled"),"aria-controls":s,"aria-expanded":n},M(t,"headeraction",r));return e.createElement("div",v,e.createElement("a",E,g,h))},re=function(t,n,r){var o=A(A({},Y(t,"style")||{}),Y(t,"contentStyle")||{}),i=P+"_content_"+r,l=P+"_header_"+r,c=e.createRef(),s=d({id:i,ref:c,className:u(Y(t,"contentClassName"),Y(t,"className"),H("tab.toggleablecontent")),style:o,role:"region","aria-labelledby":l},M(t,"toggleablecontent",r)),p=d({className:H("tab.content")},M(t,"content",r)),f=d({classNames:H("tab.transition"),timeout:{enter:1e3,exit:450},in:n,unmountOnExit:!0,options:O.transitionOptions},M(t,"transition",r));return e.createElement(a,m({nodeRef:c},f),e.createElement("div",s,e.createElement("div",p,Y(t,"children"))))},ae=e.Children.map(O.children,(function(t,n){if(c.isValidChild(t,"AccordionTab")){var r=P+"_"+n,a=te(n),o=ne(t,a,n),i=re(t,a,n),l=d({key:r,className:H("tab.root",{selected:a})},N.getCOtherProps(t),M(t,"root",n));return e.createElement("div",l,o,i)}return null})),oe=d({className:u(O.className,H("root")),style:O.style},j.getOtherProps(O),U("root"));return e.createElement("div",m({id:P,ref:D},oe),ae)}));I.displayName="AccordionTab",D.displayName="Accordion";export{D as Accordion,I as AccordionTab};

package/accordion/accordion.js

@@ -175,7 +175,7 @@ this.primereact.accordion = (function (exports, React, api, componentbase, csstr
       transition: 'p-toggleable-content'
     }
   };
-  var styles = "\n@layer primereact {\n    .p-accordion-header-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        user-select: none;\n        position: relative;\n        text-decoration: none;\n    }\n    \n    .p-accordion-header-link:focus {\n        z-index: 1;\n    }\n    \n    .p-accordion-header-text {\n        line-height: 1;\n    }\n}\n";
+  var styles = "\n@layer primereact {\n    .p-accordion-header-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        user-select: none;\n        position: relative;\n        text-decoration: none;\n    }\n    \n    .p-accordion-header-link:focus {\n        z-index: 1;\n    }\n    \n    .p-accordion-header-text {\n        line-height: 1;\n        width: 100%;\n    }\n}\n";
   var AccordionBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Accordion',
@@ -270,14 +270,19 @@ this.primereact.accordion = (function (exports, React, api, componentbase, csstr
           disabled: getTabProp(tab, 'disabled')
         }
       };
-      return utils.mergeProps(ptm("accordiontab.".concat(key), {
+      return utils.mergeProps(ptm("accordion.".concat(key), {
+        tab: tabMetaData
+      }), ptm("tab.".concat(key), {
         accordiontab: tabMetaData
-      }), ptm("accordiontab.".concat(key), tabMetaData), ptmo(tab.props, key, tabMetaData));
+      }), ptm("tab.".concat(key), tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
     };
     var getTabProp = function getTabProp(tab, name) {
       return AccordionTabBase.getCProp(tab, name);
     };
     var onTabHeaderClick = function onTabHeaderClick(event, tab, index) {
+      changeActiveIndex(event, tab, index);
+    };
+    var changeActiveIndex = function changeActiveIndex(event, tab, index) {
       if (!getTabProp(tab, 'disabled')) {
         var selected = isSelected(index);
         var newActiveIndex = null;
@@ -305,8 +310,75 @@ this.primereact.accordion = (function (exports, React, api, componentbase, csstr
       }
       event.preventDefault();
     };
+    var onTabHeaderKeyDown = function onTabHeaderKeyDown(event, tab, index) {
+      switch (event.code) {
+        case 'ArrowDown':
+          onTabArrowDownKey(event);
+          break;
+        case 'ArrowUp':
+          onTabArrowUpKey(event);
+          break;
+        case 'Home':
+          onTabHomeKey(event);
+          break;
+        case 'End':
+          onTabEndKey(event);
+          break;
+        case 'Enter':
+        case 'Space':
+          onTabEnterKey(event, tab, index);
+          break;
+      }
+    };
+    var onTabArrowDownKey = function onTabArrowDownKey(event) {
+      var nextHeaderAction = findNextHeaderAction(event.target.parentElement.parentElement);
+      nextHeaderAction ? changeFocusedTab(nextHeaderAction) : onTabHomeKey(event);
+      event.preventDefault();
+    };
+    var onTabArrowUpKey = function onTabArrowUpKey(event) {
+      var prevHeaderAction = findPrevHeaderAction(event.target.parentElement.parentElement);
+      prevHeaderAction ? changeFocusedTab(prevHeaderAction) : onTabEndKey(event);
+      event.preventDefault();
+    };
+    var onTabHomeKey = function onTabHomeKey(event) {
+      var firstHeaderAction = findFirstHeaderAction();
+      changeFocusedTab(firstHeaderAction);
+      event.preventDefault();
+    };
+    var onTabEndKey = function onTabEndKey(event) {
+      var lastHeaderAction = findLastHeaderAction();
+      changeFocusedTab(lastHeaderAction);
+      event.preventDefault();
+    };
+    var onTabEnterKey = function onTabEnterKey(event, tab, index) {
+      changeActiveIndex(event, tab, index);
+      event.preventDefault();
+    };
+    var findNextHeaderAction = function findNextHeaderAction(tabElement) {
+      var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
+      var headerElement = utils.DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
+      return headerElement ? utils.DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findNextHeaderAction(headerElement.parentElement) : utils.DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
+    };
+    var findPrevHeaderAction = function findPrevHeaderAction(tabElement) {
+      var selfCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+      var headerElement = utils.DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
+      return headerElement ? utils.DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findPrevHeaderAction(headerElement.parentElement) : utils.DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]') : null;
+    };
+    var findFirstHeaderAction = function findFirstHeaderAction() {
+      return findNextHeaderAction(elementRef.current.firstElementChild, true);
+    };
+    var findLastHeaderAction = function findLastHeaderAction() {
+      return findPrevHeaderAction(elementRef.current.lastElementChild, true);
+    };
+    var changeFocusedTab = function changeFocusedTab(element) {
+      if (element) {
+        utils.DomHandler.focus(element);
+      }
+    };
     var isSelected = function isSelected(index) {
-      return props.multiple ? activeIndex && activeIndex.some(function (i) {
+      return props.multiple && Array.isArray(activeIndex) ? activeIndex && activeIndex.some(function (i) {
         return i === index;
       }) : activeIndex === index;
     };
@@ -337,6 +409,7 @@ this.primereact.accordion = (function (exports, React, api, componentbase, csstr
       var tabCProps = AccordionTabBase.getCProps(tab);
       var header = getTabProp(tab, 'headerTemplate') ? utils.ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), tabCProps) : /*#__PURE__*/React__namespace.createElement("span", headerTitleProps, utils.ObjectUtils.getJSXElement(getTabProp(tab, 'header'), tabCProps));
       var headerIconProps = utils.mergeProps({
+        'aria-hidden': 'true',
         className: cx('tab.headericon')
       }, getTabPT(tab, 'headericon', index));
       var icon = selected ? props.collapseIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, headerIconProps) : props.expandIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, headerIconProps);
@@ -344,7 +417,6 @@ this.primereact.accordion = (function (exports, React, api, componentbase, csstr
         props: props,
         selected: selected
       });
-      var label = selected ? api.ariaLabel('collapseLabel') : api.ariaLabel('expandLabel');
       var headerProps = utils.mergeProps({
         className: utils.classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('tab.header', {
           selected: selected,
@@ -354,17 +426,20 @@ this.primereact.accordion = (function (exports, React, api, componentbase, csstr
         style: style,
         'data-p-highlight': selected,
         'data-p-disabled': getTabProp(tab, 'disabled')
-      }, getTabPT(tab, 'tab.header', index));
+      }, getTabPT(tab, 'header', index));
       var headerActionProps = utils.mergeProps({
         id: headerId,
         href: '#' + ariaControls,
         className: cx('tab.headeraction'),
-        role: 'tab',
+        role: 'button',
         tabIndex: tabIndex,
         onClick: function onClick(e) {
           return onTabHeaderClick(e, tab, index);
         },
-        'aria-label': label,
+        onKeyDown: function onKeyDown(e) {
+          return onTabHeaderKeyDown(e, tab, index);
+        },
+        'aria-disabled': getTabProp(tab, 'disabled'),
         'aria-controls': ariaControls,
         'aria-expanded': selected
       }, getTabPT(tab, 'headeraction', index));